/* TOLT 공통 크롬 — 상단바(GNB) · 토글 · 푸터 · 정책 링크 · 스크롤 등장.
   /shared/tokens.css 다음에 링크할 것.

   ⚠️ 현재 사용처: /product (목록) · /product/socks
   /product/hald 는 아직 이 파일을 쓰지 않는다. 그 페이지의 크롬 규칙이 페이지 고유
   미디어쿼리·프린트 규칙과 15곳에서 뒤엉켜 있어, 지금 뜯으면 회귀 위험이 크다.
   값은 hald.html 에서 그대로 옮겨온 것이라 렌더 결과는 동일하다.
   hald 를 여기로 합치는 작업은 삭스 스펙 확정 후 별도로 한다. */

/* ── 상단바 ── */
.gnb{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.gnb-in{display:flex; align-items:center; gap:22px; height:58px}
.logo{text-decoration:none; color:inherit; font-family:"DM Mono",monospace; font-weight:600; font-size:14px; letter-spacing:.2em}
.nav{display:flex; gap:20px; font-size:13.5px; color:var(--ink-2)}
.nav a{text-decoration:none; color:var(--ink-2)} .nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.gnb .sp{flex:1}
.gnb{transition:box-shadow .35s var(--e-out), background .35s var(--e-out)}
.gnb-in{transition:height .35s var(--e-out)}
.gnb.shrunk{box-shadow:0 6px 24px -12px rgba(0,0,0,.28); background:color-mix(in srgb,var(--bg) 97%,transparent)}
.gnb.shrunk .gnb-in{height:48px}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--e-out)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* ── 언어·테마 토글 ── */
.tg{display:inline-flex; align-items:center; gap:8px; user-select:none}
.tg-l{font-size:11px; letter-spacing:.06em; color:var(--mute); transition:color .18s;
  font-family:"DM Mono",ui-monospace,monospace}
.tg-l.on{color:var(--ink)}
.sw-btn{position:relative; width:42px; height:24px; padding:0; flex:0 0 auto;
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px; cursor:pointer;
  transition:background .22s var(--e-inout), border-color .22s var(--e-inout)}
.sw-btn::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:var(--ink); transition:transform .22s var(--e-inout), background .22s var(--e-inout)}
.sw-btn[aria-checked="true"]{background:var(--ink); border-color:var(--ink)}
.sw-btn[aria-checked="true"]::after{transform:translateX(18px); background:var(--bg)}
.sw-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .sw-btn,.sw-btn::after{transition:none} }

/* ── 푸터 ── */
footer{padding:40px 0 56px; font-size:12.5px; color:var(--mute); line-height:1.85}
.policy{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.policy a{
  background:none; border:0; padding:0; font:inherit; color:var(--mute);
  text-decoration:none; cursor:pointer}
.policy a:hover{color:var(--ink)}
.fg{display:grid; grid-template-columns:1fr auto; gap:20px}
.biz{font-family:inherit; letter-spacing:.02em; font-variant-numeric:tabular-nums; font-size:11px}

/* ── 스크롤 등장 ── */
.rv{transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
html.js-reveal .rv:not(.in){opacity:0; transform:translateY(14px)}
.rv.in{opacity:1; transform:none}

/* ── 접근성 ── */
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:100; background:var(--ink); color:var(--bg); padding:10px 14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:760px){
  .nav{gap:14px; font-size:12.5px}
  .fg{grid-template-columns:1fr}
}
@media (max-width:560px){
  .gnb-in{flex-wrap:wrap; height:auto; padding-block:9px 0}
  .gnb.shrunk .gnb-in{height:auto}
  .nav{order:3; width:100%; margin:9px -16px 0; padding:0 16px 9px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto; padding:7px 13px; border:1px solid var(--line); border-radius:999px;
    font-size:12.5px}
  .nav a::after{display:none}
  .policy a{padding:11px 4px; margin:-11px -4px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.rv{opacity:1!important;transform:none!important}}