/* shop.css — gallery, lightbox theme, category sheet, size chart (2026-10-13 completeness uplift).
   Loaded last. styles.css is hostile on purpose ([공격] rules: content-box!important on *, button{all:unset},
   img/svg max-width:100%!important + height:auto!important) and stays untouched — every new component
   below re-states what it needs (class selectors beat the type selectors; !important where the attack uses it). */

/* ── armour + finish ─────────────────────────────────────────────────── */
[hidden]{display:none!important}
/* Korean wraps between words (§10-4); only an overflowing long token is broken. The shop's own content only. */
.site-header,.product,.detail,.site-footer,.nav-sheet{word-break:keep-all;overflow-wrap:break-word}
::selection{background:rgba(50,107,236,.2)}
button:focus-visible,a:focus-visible{outline-color:#326bec}
.menu-btn svg,.nav-x svg,.header-icons .hi svg{display:block;width:20px!important;height:20px!important;max-width:none!important}
.zoom-badge svg,.sc-link svg,.hint-open svg{display:block;width:14px!important;height:14px!important;max-width:none!important;flex:none}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html:has(body.capture-mode){scroll-behavior:auto}
.mk-toasts{z-index:2147483647}

/* ── header: menu button (≤900px), category buttons, icon buttons ────── */
.menu-btn{display:none;place-items:center;width:40px;height:40px;margin-left:-9px;border-radius:10px;color:#151a21;cursor:pointer;box-sizing:border-box!important;transition:background-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.menu-btn:hover{background:#f1f4f8}
.menu-btn:active{transform:scale(.92)}
.gnb button{position:relative;display:inline-flex;align-items:center;height:40px;font:600 12px/1 'Renewal Sans',Arial,sans-serif;letter-spacing:.04em;color:#2f343b;cursor:pointer;transition:color var(--dur-2) var(--ease-out)}
.gnb button::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:1px;background:#151a21;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-3) var(--ease-expo)}
.gnb button:hover{color:#151a21}
.gnb button:hover::after{transform:scaleX(1)}
.header-icons{gap:2px;margin-right:-9px}
.header-icons .hi{width:40px;height:40px;border-radius:10px;cursor:pointer;box-sizing:border-box!important;transition:background-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.header-icons .hi:hover{background:#f1f4f8}
.header-icons .hi:active{transform:scale(.9)}
@media(max-width:900px){.menu-btn{display:inline-grid}.header-inner{gap:10px}}

/* ── gallery: stacked slides (≥601px) · snap strip + dots (≤600px) · thumbs ── */
.main-photo{isolation:isolate}
.pdp-track{display:grid}
.slide{grid-area:1/1;display:block;position:relative;color:inherit;text-decoration:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent;outline-offset:-4px}
.slide picture{display:block}
.slide .editorial-product{object-position:50% 42%}
.slide[data-slide="1"] .editorial-product{object-position:50% 30%}
@media(min-width:601px){
  .slide:not(.is-current):not(.is-leaving){display:none}
  .slide.is-current{z-index:1}
}
.zoom-badge{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.88);color:#273344;font:600 11px/1 'Renewal Sans',Arial,sans-serif;box-shadow:0 2px 10px rgba(20,30,45,.08);pointer-events:none;box-sizing:border-box!important}
.main-photo .image-note{z-index:2}
.main-photo.is-loading::after{content:'';position:absolute;z-index:3;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(23,38,60,.16);border-top-color:#326bec;animation:shop-spin .7s linear infinite;box-sizing:border-box!important}
@keyframes shop-spin{to{transform:rotate(360deg)}}

.thumb-row{display:flex;gap:10px;margin-top:14px}
.thumb{position:relative;display:block;flex:0 0 72px;width:72px;height:90px;border-radius:8px;overflow:hidden;background:#f0f0ed;cursor:pointer;box-sizing:border-box!important;transition:transform var(--dur-1) var(--ease-out)}
.thumb picture,.thumb img{display:block;width:100%}
.thumb::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,24,30,.08);transition:box-shadow var(--dur-2) var(--ease-out)}
.thumb:hover::after{box-shadow:inset 0 0 0 1px #9aa6b6}
.thumb[aria-pressed="true"]::after{box-shadow:inset 0 0 0 2px #17263c}
.thumb:active{transform:scale(.94)}
.thumb:focus-visible{outline:2px solid #326bec;outline-offset:2px}
.dots{display:none}
@media(max-width:600px){
  .pdp-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .pdp-track::-webkit-scrollbar{display:none}
  .slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
  .thumb-row{display:none}
  .dots{display:flex;justify-content:center;margin-top:6px}
  .dot{position:relative;display:block;width:30px;height:30px;cursor:pointer}
  .dot::before{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:3px;background:#c5ccd6;transition:width var(--dur-3) var(--ease-expo),margin var(--dur-3) var(--ease-expo),background-color var(--dur-2)}
  .dot[aria-pressed="true"]::before{width:18px;margin-left:-9px;background:#17263c}
  .dot:focus-visible{outline:2px solid #326bec;outline-offset:-4px;border-radius:8px}
  .zoom-badge{top:10px;right:10px}
}

/* ── options: size-chart link + "사이즈 핏 열기" ──────────────────────── */
.opt-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.opt-head label{margin:0}
.sc-link{display:inline-flex;align-items:center;gap:5px;min-height:32px;font:600 12px/1 'Renewal Sans',Arial,sans-serif;color:#3168d7;text-decoration:none;border-radius:6px;transition:color var(--dur-2)}
.sc-link:hover{color:#17263c;text-decoration:underline;text-underline-offset:3px}
.hint-open{display:inline-flex;align-items:center;gap:6px;height:38px;margin-top:12px;padding:0 14px;border-radius:8px;background:#326bec;color:#fff;font:600 13px/1 'Renewal Sans',Arial,sans-serif;letter-spacing:0;cursor:pointer;box-sizing:border-box!important;box-shadow:0 6px 16px rgba(50,107,236,.22);transition:background-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2)}
.hint-open:hover{background:#2559cf;box-shadow:0 8px 20px rgba(50,107,236,.3)}
.hint-open:active{transform:scale(.96)}
.hint-open:focus-visible{outline:2px solid #17263c;outline-offset:3px}

/* ── size chart (generated region, tools/gen-size-chart.mjs) ──────────── */
.size-chart{margin-top:56px;scroll-margin-top:96px}
.sc-eyebrow{display:block;font:600 10px/1 'Renewal Sans',Arial,sans-serif;letter-spacing:.16em;color:#768395}
.size-chart h3{margin:12px 0 8px;font:700 26px/1.3 'Renewal Sans',Arial,sans-serif;letter-spacing:-.04em;color:#171d27}
.size-chart .sc-cap{margin:0;max-width:60ch;font-size:13px;line-height:1.7;color:#717d8b}
.sc-body{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:44px;align-items:center;margin-top:28px}
.sc-sketch{margin:0;padding:18px;border-radius:16px;background:#f3f5f8}
.sc-sketch svg{display:block;width:100%!important;max-width:none!important;height:auto!important;overflow:visible}
.sc-garment{fill:#e2e9f4;stroke:#5d6d84;stroke-width:1.5;stroke-linejoin:round}
.sc-seam{fill:none;stroke:#8f9db2;stroke-width:1;stroke-dasharray:3 3}
.sc-btn circle{fill:#fff;stroke:#5d6d84;stroke-width:1.1}
.sc-m{fill:none;stroke:#326bec;stroke-width:2;stroke-linecap:round}
.sc-tk{fill:none;stroke:#326bec;stroke-width:1;opacity:.55}
.sc-keys circle,.sc-keys text{transform-box:fill-box;transform-origin:center}
.sc-keys circle{fill:#326bec}
.sc-keys text{fill:#fff;font:700 10px 'Renewal Sans',Arial,sans-serif;text-anchor:middle}
.sc-table-wrap{min-width:0}
.sc-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px;line-height:1.3}
.sc-table th,.sc-table td{padding:13px 10px;text-align:right;border-bottom:1px solid #e6e9ed}
.sc-table thead th{padding-top:0;font-size:12px;font-weight:600;color:#717d8b;white-space:nowrap;vertical-align:bottom}
.sc-table th:first-child{text-align:left;padding-left:12px}
.sc-table tbody th{font-weight:700;color:#171d27}
.sc-table td{color:#424b58}
.sc-table i{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:5px;border-radius:50%;background:#326bec;color:#fff;font:700 9px/1 'Renewal Sans',Arial,sans-serif;vertical-align:1px;box-sizing:border-box!important}
.sc-table tbody tr{transition:background-color var(--dur-3) var(--ease-out)}
.sc-table tbody tr.is-sel{background:#f0f5ff}
.sc-table tbody tr.is-sel th{color:#326bec}
.size-chart .sc-note{margin:14px 0 0;font-size:12px;line-height:1.6;color:#8a94a1}
.sc-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:768px){
  .sc-body{grid-template-columns:1fr;gap:24px}
  .sc-sketch{max-width:320px}
}
@media(max-width:600px){
  .size-chart{margin-top:40px;scroll-margin-top:76px}
  .size-chart h3{font-size:23px}
  .sc-sketch{max-width:none;padding:14px}
  .sc-table{font-size:13px}
  .sc-table th,.sc-table td{padding:11px 6px}
  .sc-table thead th{white-space:normal;font-size:11px}
  .sc-table th:first-child{padding-left:8px}
  .sc-table i{display:grid;margin:0 0 4px auto}
}

/* ── category sheet (≤900px) ─────────────────────────────────────────── */
html.nav-open{overflow:hidden}
.nav-sheet{position:fixed;inset:0;z-index:2147483647}
.nav-scrim{position:absolute;inset:0;background:rgba(14,22,34,.48)}
.nav-panel{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;width:min(320px,86vw);padding:0 0 max(20px,env(safe-area-inset-bottom));background:#fff;box-shadow:12px 0 40px rgba(14,22,34,.18);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box!important}
.nav-head{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 8px 0 20px;border-bottom:1px solid #eef0f3;flex:none}
.nav-logo{font:700 21px/1 'Renewal Sans',Arial,sans-serif;letter-spacing:-.045em;color:#151a21}
.nav-x{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;color:#151a21;cursor:pointer;box-sizing:border-box!important}
.nav-x:hover{background:#f1f4f8}
.nav-x:active{transform:scale(.9)}
.nav-list{margin:8px 0;padding:0;list-style:none}
.nav-item{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:16px 20px;font:700 15px/1.2 'Renewal Sans',Arial,sans-serif;letter-spacing:.03em;color:#151a21;cursor:pointer;box-sizing:border-box!important;transition:background-color var(--dur-2) var(--ease-out)}
.nav-item span{font-size:12px;font-weight:400;letter-spacing:0;color:#87909b}
.nav-item:hover{background:#f5f7fa}
.nav-item:focus-visible{outline:2px solid #326bec;outline-offset:-2px}
.nav-foot{margin:auto 20px 0;max-width:none;font-size:12px;line-height:1.65;color:#87909b}

/* ── PhotoSwipe 5.4.4 re-theme + armour (its CSS is injected before this file) ── */
.pswp{--pswp-bg:#0e1622;--pswp-placeholder-bg:#1b2738;--pswp-root-z-index:2147483647;--pswp-icon-color:#fff;--pswp-icon-color-secondary:#0e1622;--pswp-icon-stroke-color:#0e1622;--pswp-error-text-color:#dfe6f0;font-family:'Renewal Sans',Arial,sans-serif;line-height:1.4;letter-spacing:0;color:#fff}
.pswp,.pswp *,.pswp *::before,.pswp *::after{box-sizing:border-box!important}
.pswp img,.pswp svg{max-width:none!important}
.pswp .pswp__icn{height:32px!important}
.pswp .pswp__button--arrow .pswp__icn{height:60px!important}
.pswp .pswp__button:focus-visible{outline:2px solid #6f9bff;outline-offset:-6px;border-radius:12px}
.pswp__counter{font:600 13px/30px 'Renewal Sans',Arial,sans-serif;font-variant-numeric:tabular-nums;text-shadow:none;opacity:.9}
.pswp__ai-caption{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(14,22,34,.72);color:#fff;font:600 12px/1.4 'Renewal Sans',Arial,sans-serif;white-space:nowrap;pointer-events:none}

/* ── 상품 상세 01 / FABRIC: text + fabric photo (tools/build-images.mjs → fabric-*.avif/webp) ── */
.material-note.has-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:40px}
.material-note .mn-text{min-width:0}
.material-note .mn-photo{display:block;min-width:0;border-radius:12px;overflow:hidden;background:#dfe6ee;aspect-ratio:3/2}
.material-note .mn-photo img{display:block;width:100%;object-fit:cover}
@media(max-width:760px){
  .material-note.has-photo{grid-template-columns:minmax(0,1fr);gap:22px}
  .material-note .mn-photo{order:-1}
}