/* 세 시안 공용 가게 화면. 시안은 :root 변수(색·글꼴)만 바꾼다. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 13px/1.45 var(--ui);letter-spacing:var(--ui-track,0)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.sf-announce{background:var(--ink);color:var(--bg);text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px}

/* 머리말: 왼쪽 로고+품목, 오른쪽 검색·장바구니 */
.sf-head{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:14px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.sf-logo img{height:var(--logo-h,34px);width:auto}
.sf-logo-text{display:block;font:var(--display-weight,700) var(--logo-size,28px)/1 var(--display);text-transform:var(--display-case,none);letter-spacing:var(--display-track,0);white-space:nowrap;color:var(--logo-color,var(--ink))}
.sf-nav{display:flex;flex-wrap:wrap;gap:4px 18px;font:var(--nav-weight,700) 12px/1.3 var(--ui);text-transform:uppercase;letter-spacing:.04em;}
.sf-nav a:hover,.sf-tool:hover{color:var(--accent)}
.sf-tools{display:flex;gap:18px;align-items:center;font:var(--nav-weight,700) 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.04em}
.sf-tool{display:flex;align-items:center;gap:6px}
.sf-menu{display:none}

/* 첫 화면 */
.sf-hero{height:calc(100svh - 96px);min-height:520px;background:var(--line)}
.sf-hero a,.sf-hero img{display:block;width:100%;height:100%}
.sf-hero img{object-fit:cover;object-position:var(--hero-pos,center)}
.sf-hero-pair{display:grid;grid-template-columns:1fr 1fr}
.sf-hero-pair img{object-position:center 30%}

/* 로고 띠 */
.sf-band{padding:72px 20px 64px;text-align:center;background:var(--band-bg,var(--bg))}
.sf-band .sf-band-logo{font:var(--display-weight,700) clamp(48px,8vw,112px)/1 var(--display);text-transform:var(--display-case,none);letter-spacing:var(--display-track,0);margin:0 auto 18px;opacity:1;color:var(--logo-color,var(--ink))}
.sf-band p{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}

/* 상품 그리드: 가장자리까지, 얇은 선 */
.sf-section{padding:0 0 48px}
.sf-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sf-tile{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--tile)}
@media (min-width:1100px){.sf-grid{grid-template-columns:repeat(4,1fr)}.sf-grid>.sf-tile:nth-child(4n){border-right:0}}
@media (min-width:821px) and (max-width:1099px){.sf-grid>.sf-tile:nth-child(3n){border-right:0}}
.sf-tile-img{display:block;position:relative;aspect-ratio:var(--tile-ratio,4/5);overflow:hidden;background:var(--tile)}
.sf-tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.sf-look{opacity:0}
.sf-tile-img:hover .sf-look{opacity:1}
.sf-heart{position:absolute;top:12px;right:12px;opacity:.8}
.sf-heart[aria-pressed=true] svg{fill:currentColor}
.sf-tile-info{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px 16px;font:var(--tile-weight,700) 12px/1.35 var(--ui);text-transform:var(--tile-case,uppercase);letter-spacing:.02em}
.sf-tile-color{grid-column:1;font-weight:400;opacity:.65}
.sf-tile-price{text-align:right;white-space:nowrap}
.sf-dots{grid-column:1/-1;display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sf-dot{width:13px;height:13px;border-radius:var(--dot-radius,50%);background:var(--c);border:1px solid rgba(0,0,0,.2);display:inline-block}
.sf-dot.on{outline:1.5px solid var(--ink);outline-offset:2px}
.sf-dots-lg .sf-dot{width:22px;height:22px}
.sf-more{display:inline-block;margin:28px 20px 0;font:var(--nav-weight,700) 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.06em;border-bottom:1.5px solid currentColor;padding-bottom:4px}
.sf-row-head{display:flex;justify-content:space-between;align-items:end;padding:56px 20px 16px}
.sf-row-head h3{font:var(--display-weight,800) clamp(24px,3vw,40px)/1 var(--display);text-transform:var(--display-case,uppercase);letter-spacing:var(--display-track,-.02em)}
.sf-row-head a{font:700 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.06em}

/* 사진·문구 */
.sf-feature img{width:100%;height:min(100svh,1000px);object-fit:cover;object-position:center 30%}
.sf-slogan{padding:28px 20px;background:var(--band-bg,var(--bg))}
.sf-slogan h2{font:var(--display-weight,800) clamp(34px,6vw,88px)/.95 var(--display);text-transform:var(--display-case,uppercase);letter-spacing:var(--display-track,-.02em)}
.sf-pair{display:grid;grid-template-columns:1fr 1fr}
.sf-pair-item{position:relative;display:block}
.sf-pair-item img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sf-pair-item span{position:absolute;left:16px;bottom:16px;background:var(--bg);padding:8px 12px;font:700 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.04em}

/* 상점 */
.sf-shop-head{padding:28px 20px 20px}
.sf-shop-head h1{font:var(--display-weight,800) clamp(40px,7vw,104px)/.9 var(--display);text-transform:var(--display-case,uppercase);letter-spacing:var(--display-track,-.02em);margin-bottom:22px}
.sf-tabs{display:flex;gap:6px 22px;flex-wrap:wrap;font:700 13px/1 var(--ui);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line);padding-bottom:14px}
.sf-tabs button{padding:6px 0;opacity:.55}
.sf-tabs button.on{opacity:1;box-shadow:0 2px 0 var(--ink)}
.sf-filters{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding-top:16px}
.sf-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sf-chips span,.sf-sort span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin-right:4px}
.sf-chips button{border:1px solid var(--line-strong);padding:7px 11px;font-size:12px;border-radius:var(--chip-radius,0)}
.sf-chips button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sf-sort{margin-left:auto;display:flex;align-items:center;gap:6px}
.sf-sort select{background:transparent;border:1px solid var(--line-strong);padding:7px 10px;border-radius:var(--chip-radius,0)}
.sf-count{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin-top:16px}
.sf-empty{padding:40px 20px;font-size:14px}

@media (min-width:821px){
  body[data-page=shop] .sf-main{display:grid;grid-template-columns:240px 1fr}
  body[data-page=shop] .sf-shop-head{position:sticky;top:64px;align-self:start;border-right:1px solid var(--line);min-height:calc(100svh - 64px)}
  body[data-page=shop] .sf-shop-head h1{font-size:34px;margin-bottom:18px}
  body[data-page=shop] .sf-tabs{flex-direction:column;align-items:flex-start;gap:10px;border:0}
  body[data-page=shop] .sf-tabs button.on{box-shadow:none;text-decoration:underline;text-underline-offset:4px}
  body[data-page=shop] .sf-filters{flex-direction:column;align-items:flex-start;border-top:1px solid var(--line);margin-top:8px}
  body[data-page=shop] .sf-sort{margin-left:0}
  body[data-page=shop] .sf-grid{border-top:0}
}
/* 상세 */
.sf-pdp{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);border-bottom:1px solid var(--line)}
.sf-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.sf-gallery img{width:100%;aspect-ratio:var(--tile-ratio,4/5);object-fit:cover;background:var(--tile)}
.sf-gallery img:first-child{grid-column:1/-1}
/* 사진 수가 짝수면 마지막 한 장이 한 줄에 혼자 남아 옆이 비므로 꽉 채운다 */
.sf-gallery img:last-child:nth-child(even){grid-column:1/-1}
.sf-buy{position:sticky;top:70px;align-self:start;padding:28px 28px 40px}
.sf-crumb{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin-bottom:14px}
.sf-buy h1{font:var(--display-weight,800) clamp(28px,3vw,44px)/1 var(--display);text-transform:var(--display-case,uppercase);letter-spacing:var(--display-track,-.02em)}
.sf-price{font:700 18px/1 var(--ui);margin:16px 0 6px}
.sf-color{opacity:.7;margin-bottom:12px}
.sf-sizes{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 14px}
.sf-size{min-width:56px;height:46px;border:1px solid var(--line-strong);font-weight:700;border-radius:var(--chip-radius,0)}
.sf-size[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sf-size:disabled{opacity:.3;text-decoration:line-through;cursor:default}
.sf-add{width:100%;height:54px;background:var(--cta,var(--ink));color:var(--cta-ink,var(--bg));font:800 13px/1 var(--ui);text-transform:uppercase;letter-spacing:.08em;border-radius:var(--chip-radius,0)}
.sf-add:hover{filter:brightness(1.1)}
.sf-msg{min-height:20px;margin-top:8px;font-size:12px}
.sf-perks{list-style:none;padding:0;margin:4px 0 20px;display:grid;gap:4px;font-size:12px;opacity:.75}
.sf-buy details{border-top:1px solid var(--line)}
.sf-buy details:last-of-type{border-bottom:1px solid var(--line)}
.sf-buy summary{padding:15px 0;font:700 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.sf-buy summary::after{content:"+"}.sf-buy details[open] summary::after{content:"–"}
.sf-buy summary::-webkit-details-marker{display:none}
.sf-buy details>p{padding-bottom:14px;font-size:13px;opacity:.85}
.sf-buy .fit-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:10px}
.sf-buy .fit-table th,.sf-buy .fit-table td{text-align:left;padding:7px 4px;border-bottom:1px solid var(--line)}
.sf-buy .fit-note{font-size:11px;opacity:.6;padding-bottom:14px}

/* 소개 */
.sf-about{display:grid;grid-template-columns:1fr 1fr;min-height:80svh}
.sf-about img{width:100%;height:100%;object-fit:cover}
.sf-about>div{padding:48px 32px;align-self:center;max-width:560px}
.sf-about h1{font:var(--display-weight,800) clamp(36px,5vw,72px)/.95 var(--display);text-transform:var(--display-case,uppercase);letter-spacing:var(--display-track,-.02em);margin-bottom:24px}
.sf-about p{font-size:15px;margin-bottom:14px}
.sf-about .sf-more{margin-left:0}

/* 정책 페이지는 기존 policy.js 그대로, 여백만 */
.policy{padding:36px 20px 60px;max-width:900px}

/* 서랍 */
.sf-scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}
.sf-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg);z-index:41;display:flex;flex-direction:column;overflow:auto;box-shadow:-10px 0 40px rgba(0,0,0,.12)}
.sf-drawer[hidden],.sf-scrim[hidden]{display:none}
.sf-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.sf-drawer-head h2{font:800 14px/1 var(--ui);text-transform:uppercase;letter-spacing:.06em}
.sf-drawer-head img{height:28px}
.sf-drawer-head .sf-logo-text{--logo-size:24px}
.sf-search{width:100%;left:0;bottom:auto;max-height:90svh}
.sf-search input{flex:1;border:0;border-bottom:1.5px solid var(--ink);background:transparent;font-size:20px;padding:8px 0;outline:0}
.sf-bag-list{list-style:none;margin:0;padding:0}
.sf-bag-list li{display:grid;grid-template-columns:80px 1fr auto;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);align-items:start}
.sf-bag-list img{width:80px;aspect-ratio:4/5;object-fit:cover;background:var(--tile)}
.sf-bag-list div{display:grid;gap:4px;font-size:12px}
.sf-bag-list a{font-weight:700;text-transform:uppercase}
.sf-bag-list button{font-size:11px;text-decoration:underline;opacity:.7}
.sf-bag-foot{padding:20px;display:grid;gap:10px;margin-top:auto}
.sf-bag-foot p:first-child{display:flex;justify-content:space-between;font-size:14px}
.sf-checkout{height:52px;background:var(--cta,var(--ink));color:var(--cta-ink,var(--bg));font:800 13px/1 var(--ui);text-transform:uppercase;letter-spacing:.08em;border-radius:var(--chip-radius,0)}
.sf-small{font-size:11px;opacity:.65}
.sf-menu-drawer nav{display:grid;padding:12px 20px}
.sf-menu-drawer nav a{font:var(--display-weight,800) 30px/1.25 var(--display);text-transform:var(--display-case,uppercase);border-bottom:1px solid var(--line);padding:10px 0}

/* 하단 */
.sf-foot{border-top:1px solid var(--line);background:var(--foot-bg,var(--bg))}
.sf-info{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:22px 20px;border-bottom:1px solid var(--line)}
.sf-foot h4{font:800 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.sf-foot p{font-size:12px;opacity:.75}
.sf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:28px 20px}
.sf-cols a{display:block;font-size:12px;padding:3px 0;opacity:.85}
.sf-news{display:flex;flex-wrap:wrap;border-bottom:1.5px solid currentColor}
.sf-news input{flex:1;min-width:0;border:0;background:transparent;padding:8px 0;outline:0}
.sf-news button{font:800 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.06em}
.sf-news p{flex-basis:100%;padding:6px 0}
.sf-wordmark{font:var(--display-weight,800) var(--wordmark-size,clamp(56px,14.5vw,230px))/.85 var(--display);text-transform:var(--display-case,uppercase);letter-spacing:var(--display-track,-.03em);padding:10px 16px 18px;white-space:nowrap;overflow:hidden;color:var(--wordmark,var(--ink))}
.sf-legal{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--line)}

/* 휴대폰 */
@media (max-width:820px){
  .sf-head{grid-template-columns:1fr auto;padding:12px 16px}
  .sf-nav{display:none}
  .sf-tools span{display:none}
  .sf-menu{display:flex}
  .sf-logo img{height:var(--logo-h-m,26px)}
  .sf-logo-text{font-size:var(--logo-size-m,22px)}
  .sf-hero{height:78svh;min-height:480px}
  .sf-hero-pair{grid-template-columns:1fr}
  .sf-hero-pair a:nth-child(2){display:none}
  .sf-grid{grid-template-columns:1fr 1fr}
  .sf-grid>.sf-tile:nth-child(3n){border-right:1px solid var(--line)}
  .sf-grid>.sf-tile:nth-child(2n){border-right:0}
  .sf-tile-info{grid-template-columns:1fr;font-size:11px;padding:10px 10px 14px}
  .sf-tile-price{text-align:left}
  .sf-feature img{height:80svh}
  .sf-pair{grid-template-columns:1fr}
  .sf-pdp{grid-template-columns:1fr}
  .sf-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .sf-gallery img{flex:0 0 88%;scroll-snap-align:start}
  .sf-buy{position:static;padding:20px 16px 32px}
  .sf-about{grid-template-columns:1fr}
  .sf-about img{height:60svh}
  .sf-info{grid-template-columns:1fr}
  .sf-cols{grid-template-columns:1fr 1fr}
  .sf-sort{margin-left:0}
  .sf-legal{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.legal-links{display:none!important}
.sf-brand{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.sf-tile-brand{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.75}