/* ============================================================
   OPTICAL_SHOP_MULTI_ANMOK — 안목 / ANMOK
   Architecture: 햄버거 드로어 + 중앙 워드마크 + 카테고리 가로 서브바 ·
   ★전면 이미지 시퀀스(100vh 사진 + 각주 캡션) · 좌측 고정 카테고리 레일 ·
   배지 붙은 2열 대형 카드 그리드.
   Reference: gngr.kr (진저아이웨어) — HOW·WHAT 모두. 골격 충실, 표면만 오리지널.
   ★ 오리지널라이즈: 액센트를 gngr 버밀리언 → 딥 인디고로 이동
     (웜 레드-오렌지는 카탈로그 액센트의 51%가 몰린 축 · C5 ⓐ).
   ★ 조판은 끌어올림: gngr은 전 텍스트 13~14px/400 로 위계가 없다 → D7 적용.
   Token-pure: 0 raw hex outside :root.
   ============================================================ */

:root{
  --tap:46px;                 /* ★ 탭 타깃. 44 는 실측 43.98 로 잡힌다 (v13 §14.8-9) */
  /* ★ 브랜드 워드마크 락업 (v13.1 §14.10) — 레퍼런스는 이미지 로고 238x41 로 존재감을 만든다.
     우리는 로고가 금지돼 있으므로 같은 면적을 조판으로 채운다. */
  --brand-size:clamp(28px,2.3vw,34px);
  --brand-track:.06em;
  /* ---- 6 colour roles — ★ 웜 아이보리 지면 + 무채색 잉크 + 유채색 1계열(인디고) ----
     레퍼런스는 순백이 아니라 크림/샌드 지면 위에 화보를 얹는다. 지면만 따뜻하게 옮기고
     잉크·보조문자는 무채색으로 남겨 "세피아 잉크 금지"(DECISIONS §2-1)는 지켰다. */
  --bg:#f4efe4;            /* 웜 아이보리 지면 */
  --surface:#eae2d3;       /* 한 단 진한 샌드 */
  --ink:#171717;           /* 무채색 chroma 0 */
  --muted:#6b6b6b;         /* 무채색 chroma 0 */
  --accent:#1f2f6b;        /* 딥 인디고 — 크림 위에서 12.3:1 · 카탈로그 웜레드 축 회피 */
  --accent-ink:#f4efe4;

  /* ---- ★ 사진 그레이드: 지면과 같은 온도로 (한 시즌 화보) ---- */
  --photo-filter:sepia(.16) saturate(.94) contrast(1.03);

  /* ---- derived ---- */
  --line:color-mix(in srgb, var(--ink) 12%, var(--bg));
  --line-strong:color-mix(in srgb, var(--ink) 26%, var(--bg));
  --ground:color-mix(in srgb, var(--ink) 5%, var(--bg));
  --ink-soft:color-mix(in srgb, var(--ink) 72%, var(--bg));
  --cap-shadow:color-mix(in srgb, var(--ink) 55%, transparent);

  /* ---- type ---- */
  --font-display:"Gothic A1", system-ui, sans-serif;              /* 700 ↔ 900 */
  --font-body:"Gothic A1",system-ui,sans-serif;
  --scale:1.25;
  --text-xs:11px;
  --text-sm:13px;
  --text-base:15px;
  --text-lg:19px;
  --text-xl:24px;
  --text-2xl:30px;
  --text-display:clamp(28px,4.2vw,50px);

  /* ---- spacing (8px multiples) ---- */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-6:3rem; --space-8:4rem; --space-12:6rem; --space-16:8rem;

  /* ---- shape & motion (one each) ---- */
  --radius:0px;
  --shadow:none;
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:560ms;
  --content-max:1400px;
  --prose-max:620px;
  --gutter:clamp(1rem,3vw,2.5rem);
  --rail-w:210px;
  --cta-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--text-base);font-weight:400;
  line-height:1.75;letter-spacing:-0.015em;        /* D7 본문 자간 */
  word-break:keep-all;overflow-wrap:anywhere;
}
img{max-width:100%;display:block;filter:var(--photo-filter)}   /* ★ 전 사진 동일 그레이드 */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:900;line-height:1.2;letter-spacing:-0.035em}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:var(--space-1);z-index:1100;background:var(--ink);color:var(--bg);padding:.7rem 1rem}

.wrap{max-width:var(--content-max);margin:0 auto;padding-inline:var(--gutter)}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* ============ header — 햄버거 + 중앙 워드마크 + 카테고리 서브바 ============ */
#site-header{position:sticky;top:0;z-index:500;background:var(--bg);border-bottom:1px solid var(--line)}
.promo{background:var(--ink);color:var(--bg);text-align:center;font-size:var(--text-xs);
       letter-spacing:.02em;padding:.55rem var(--gutter)}
.hbar{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--space-2);min-height:64px}
.burger{grid-column:1;display:flex;width:var(--tap);height:var(--tap);align-items:center;justify-content:center}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.brandwrap{grid-column:2;justify-self:center;text-align:center;display:block;padding:.4rem 0}
/* 액센트 내성: 워드마크는 --ink, 액센트는 그 아래 룰(선)로만 존재 */
.brand{display:inline-block;font-family:var(--font-display);font-weight:900;font-size:var(--brand-size);
       letter-spacing:.2em;text-indent:.2em;line-height:1;color:var(--ink);
       padding-bottom:.28rem;border-bottom:3px solid var(--accent)}
.brand-sub{display:block;margin-top:.34rem;font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.28em}
.head-r{grid-column:3;display:flex;align-items:center;gap:var(--space-2)}
.head-tel{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);
          font-size:var(--text-sm);font-weight:700;letter-spacing:-0.01em}
.head-tel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}

/* 카테고리 가로 서브바 (gngr 문법) */
.subbar{border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.subbar::-webkit-scrollbar{display:none}
.subbar .in{display:flex;gap:var(--space-6);justify-content:center;min-width:max-content;
            padding-inline:var(--gutter);font-size:var(--text-sm);font-weight:700;letter-spacing:.06em}
.subbar a{display:inline-flex;align-items:center;min-height:46px;color:var(--muted);
          border-bottom:2px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.subbar a:hover{color:var(--ink)}
.subbar a.active{color:var(--ink);border-bottom-color:var(--accent)}

/* 드로어 */
.mobile-nav{display:none;flex-direction:column;background:var(--bg)}
/* 컴팩트 리스트 — 패딩은 줄이고 탭 영역은 min-height 로 확보한다(44px 유지).
   데스크톱 .subbar / .rail 은 이미 컴팩트하므로 건드리지 않는다. */
.mobile-nav a{display:flex;align-items:center;min-height:var(--tap);
              padding:.55rem var(--gutter);font-family:var(--font-display);font-weight:700;
              font-size:var(--text-base);line-height:1.25;border-bottom:1px solid var(--line)}
.mobile-nav .mn-sub{padding-left:calc(var(--gutter) + 1rem);font-size:var(--text-sm);
                    font-weight:500;color:var(--muted)}
.mobile-nav .mn-tel{font-family:var(--font-body);font-weight:800;border-left:3px solid var(--accent)}
.mobile-nav.open{display:flex}

/* ============ ★ MOVE 1 · 전면 이미지 시퀀스 + 각주 캡션 (SIGNATURE) ============ */
.seq{display:block}
.frame{position:relative;background:var(--ground);overflow:hidden}
.frame img{width:100%;height:clamp(420px,86vh,940px);object-fit:cover;object-position:50% 50%}
.frame--half img{height:clamp(320px,52vw,660px)}
/* 각주 캡션 — 사진 위 아주 작은 한 줄 (gngr 시그니처) */
.fn{position:absolute;z-index:2;color:var(--bg);text-shadow:0 1px 10px var(--cap-shadow)}
.fn--bl{left:var(--gutter);bottom:var(--space-4);text-align:left}
.fn--c{left:50%;bottom:var(--space-6);transform:translateX(-50%);text-align:center;width:max-content;max-width:90vw}
.fn b{display:block;font-family:var(--font-display);font-weight:900;font-size:var(--text-sm);letter-spacing:.06em}
.fn span{display:block;margin-top:.2rem;font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;
         color:color-mix(in srgb,var(--bg) 82%,transparent)}
.frame::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
              background:linear-gradient(180deg,transparent,var(--cap-shadow))}

/* 시퀀스 사이의 짧은 텍스트 조각 */
.slug{padding:var(--space-12) 0;text-align:center}
.slug .in{max-width:var(--prose-max);margin:0 auto}
.eyebrow{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);
         color:var(--muted);letter-spacing:.24em;text-indent:.24em;margin-bottom:var(--space-3);
         padding-bottom:.3rem;border-bottom:2px solid var(--accent)}
.slug h1,.slug h2{font-size:var(--text-display);text-wrap:balance}
.slug p{margin-top:var(--space-3);color:var(--ink-soft)}

/* ============ MOVE 2 · 좌측 고정 카테고리 레일 + 콘텐츠 ============ */
.railed{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--space-8);
        align-items:start;padding-block:var(--space-8) var(--space-12)}
.rail{position:sticky;top:132px;min-width:0}
.rail h3{font-family:var(--font-display);font-weight:900;font-size:var(--text-sm);
         letter-spacing:.14em;padding-bottom:var(--space-2);border-bottom:2px solid var(--ink)}
.rail a{display:flex;align-items:center;min-height:var(--tap);font-size:var(--text-sm);font-weight:600;
        color:var(--muted);border-bottom:1px solid var(--line);
        transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
.rail a:hover{color:var(--ink);padding-left:.35rem}
.rail a.on{color:var(--ink);font-weight:800;border-left:3px solid var(--accent);padding-left:.55rem}
.rail .cnt{margin-left:auto;font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}
/* ★ 계층 레일 — 그룹 헤더 아래 세부 분류 (레퍼런스 구조) */
.rail .grp{display:block;margin-top:var(--space-4);padding-bottom:.3rem;
           font-family:var(--font-display);font-weight:900;font-size:var(--text-xs);
           letter-spacing:.18em;color:var(--muted);border-bottom:1px solid var(--line)}
.rail .grp:first-of-type{margin-top:var(--space-3)}

/* ============ ★ 카테고리 모달 — 레일 클릭 시 우측 위로 떠오른다 ============ */
/* 스크림은 visibility 로만 제어한다 — [hidden] 을 쓰면 display:none 이 이겨 아예 안 뜬다 */
.scrim{position:fixed;inset:0;z-index:990;background:color-mix(in srgb,var(--ink) 58%,transparent);
       opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease)}
body.cat-open .scrim{opacity:1;visibility:visible}
.catmodal{position:fixed;z-index:1000;left:50%;top:50%;transform:translate(-50%,-48%) scale(.985);
          width:min(1120px,92vw);max-height:86vh;overflow-y:auto;overscroll-behavior:contain;
          background:var(--bg);border:1px solid var(--line-strong);
          opacity:0;visibility:hidden;
          transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease)}
body.cat-open .catmodal{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.catmodal .mhead{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
                 gap:var(--space-2);padding:var(--space-3) var(--space-4);
                 background:var(--bg);border-bottom:1px solid var(--line)}
.catmodal .mhead h2{font-size:var(--text-lg)}
.catmodal .mhead em{font-style:normal;margin-left:.5rem;font-size:var(--text-sm);font-weight:700;color:var(--muted)}
.mclose{display:flex;align-items:center;justify-content:center;width:44px;height:var(--tap)}
.mclose svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
/* 모달 안도 카테고리 페이지와 같은 형식 — 히어로 1장 + 2열 그리드 (변경 6) */
.catmodal .mhero{position:relative;overflow:hidden;background:var(--surface)}
.catmodal .mhero img{width:100%;height:clamp(180px,26vw,320px);object-fit:cover}
.catmodal .mbody{padding:var(--space-4)}

/* ============ 게시판 (NEWS · 3열 카드) ============ */
.board{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--space-6);align-items:start}
.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4) var(--space-3)}
.news .n{min-width:0;border-top:2px solid var(--ink);padding-top:var(--space-2)}
.news .n .cat{font-family:var(--font-display);font-weight:900;font-size:var(--text-xs);
              letter-spacing:.12em;color:var(--accent)}
.news .n h3{margin-top:.4rem;font-size:var(--text-base);line-height:1.45;letter-spacing:-0.02em}
.news .n .meta{display:flex;gap:var(--space-2);margin-top:.6rem;font-size:var(--text-xs);color:var(--muted);
               font-variant-numeric:tabular-nums}
.aside .box{border:1px solid var(--line);padding:var(--space-3);margin-bottom:var(--space-2)}
.aside .box h4{font-family:var(--font-display);font-weight:900;font-size:var(--text-xs);
               letter-spacing:.16em;color:var(--muted);margin-bottom:.5rem}
.aside .box p{font-size:var(--text-sm);color:var(--ink-soft)}
.aside .box a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--text-sm);font-weight:800;
              text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}

/* ============ STORY 미니 메뉴 ============ */
.mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-6)}
.mini a{display:flex;flex-direction:column;justify-content:space-between;min-height:132px;
        padding:var(--space-3);border:1px solid var(--line);
        transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.mini a:hover{border-color:var(--accent);background:var(--surface)}
.mini .en{font-family:var(--font-display);font-weight:900;font-size:var(--text-sm);letter-spacing:.14em}
.mini .ko{margin-top:auto;font-size:var(--text-xs);color:var(--muted)}

.listhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);
          padding-bottom:var(--space-4);flex-wrap:wrap}
.listhead h2{font-size:var(--text-xl);letter-spacing:-0.02em}
.listhead h2 em{font-style:normal;margin-left:.5rem;font-size:var(--text-sm);font-weight:700;color:var(--muted)}
.listhead .sort{font-size:var(--text-sm);color:var(--muted);min-height:var(--tap);display:inline-flex;align-items:center}

/* ============ MOVE 3 · 배지 붙은 2열 대형 카드 ============ */
.plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-3)}
.plist--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p{position:relative;min-width:0}
.p .ph{position:relative;background:var(--ground);aspect-ratio:4/3;overflow:hidden}
.p .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
           transition:transform var(--dur) var(--ease)}
.p:hover .ph img{transform:scale(1.03)}
.badge{position:absolute;left:0;top:0;z-index:2;display:inline-block;
       background:var(--accent);color:var(--accent-ink);
       font-family:var(--font-display);font-weight:900;font-size:var(--text-xs);
       letter-spacing:.04em;padding:.42rem .7rem}
.badge--out{background:var(--ink)}
.p .nm{display:block;margin-top:.85rem;font-size:var(--text-sm);font-weight:800;letter-spacing:-0.01em}
.p .nm small{display:block;margin-top:.15rem;font-size:var(--text-xs);font-weight:500;color:var(--muted);letter-spacing:.02em}
.p .pr{display:block;margin-top:.3rem;font-size:var(--text-sm);font-weight:700;font-variant-numeric:tabular-nums}

/* ============ 안내 리스트 (구매·A/S·FAQ) ============ */
.qa{border-top:2px solid var(--ink)}
.qa .r{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);
       padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.qa .q{font-family:var(--font-display);font-weight:900;font-size:var(--text-sm);color:var(--muted);
       letter-spacing:.06em;white-space:nowrap;padding-left:.7rem;border-left:3px solid var(--accent)}
.qa h3{font-size:var(--text-lg)}
.qa .a{margin-top:.5rem;font-size:var(--text-sm);color:var(--ink-soft);line-height:1.8}
.qa .a strong{font-weight:800;color:var(--ink)}
.qa--mt{margin-top:var(--space-6)}

/* ============ 매장 정보 ============ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);
       padding-bottom:var(--space-12)}
.dl{border-top:2px solid var(--ink)}
.dl .r{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--space-2);
       padding:.85rem 0;border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.dl .r dt{color:var(--muted);font-weight:700;margin:0}
.dl .r dd{margin:0;font-weight:500}
.dl .r dd a{display:inline-flex;align-items:center;min-height:var(--tap);
            text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
            text-decoration-color:var(--line-strong)}
.dl .r dd a:hover{text-decoration-color:var(--accent)}
.hours{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.hours th,.hours td{text-align:left;padding:.72rem .5rem;border-bottom:1px solid var(--line)}
.hours th{width:5.5rem;color:var(--muted);font-weight:700}
.hours td{font-variant-numeric:tabular-nums lining-nums;font-weight:600}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:52px;padding:.9rem 1.7rem;
     font-size:var(--text-sm);font-weight:800;letter-spacing:-0.01em;border-radius:var(--radius);
     transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}
.btn-solid{background:var(--ink);color:var(--bg)}        /* 액센트 내성: 큰 면적은 --ink */
.btn-solid:hover{background:color-mix(in srgb,var(--ink) 82%,var(--bg))}
.btn-line{border:1px solid var(--line-strong);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btnrow{display:flex;gap:var(--space-1);flex-wrap:wrap;justify-content:center;margin-top:var(--space-4)}

/* ============ end band ============ */
.endband{border-top:1px solid var(--line);background:var(--surface)}
.endband .in{padding:var(--space-12) 0;text-align:center;max-width:var(--prose-max);margin:0 auto}
.endband h2{font-size:var(--text-xl);margin-bottom:var(--space-2)}
.endband p{color:var(--ink-soft);font-size:var(--text-sm)}

/* ============ footer ============ */
.foot{border-top:2px solid var(--ink);padding:var(--space-8) 0 var(--space-6)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--space-6)}
.foot-brand p{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--muted);max-width:34ch}
.foot-col h4{font-family:var(--font-display);font-weight:900;font-size:var(--text-xs);
             color:var(--muted);letter-spacing:.18em;margin-bottom:var(--space-1)}
.foot-col a{display:flex;align-items:center;min-height:var(--tap);font-size:var(--text-sm);color:var(--ink-soft)}
.foot-col a:hover{color:var(--ink)}
.foot-brand .brand{font-size:var(--brand-size);color:var(--accent);border-bottom-color:var(--accent)}   /* 푸터 워드마크는 브랜드색 */
.foot-meta{display:flex;flex-wrap:wrap;gap:.4rem var(--space-3);margin-top:var(--space-6);
           padding-top:var(--space-3);border-top:1px solid var(--line);
           font-size:var(--text-sm);color:var(--ink-soft)}
.foot-legal{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line);
            font-size:var(--text-xs);color:var(--muted);line-height:1.9}
.mobile-nav a em{font-style:normal;margin-left:.5rem;font-size:var(--text-sm);font-weight:500;color:var(--muted)}

/* ============ mobile bottom CTA bar (전화만) ============ */
.mcta{position:fixed;left:0;right:0;bottom:0;display:none;
      padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
      background:var(--bg);border-top:1px solid var(--line)}
.mcta a{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;min-height:52px;
        background:var(--ink);color:var(--bg);font-weight:800;font-size:var(--text-sm);letter-spacing:-0.01em}
.mcta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9}

/* ============ motion (transform/opacity only) ============ */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .stag>*{opacity:0;transform:translateY(14px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
html.js .stag.in>*{opacity:1;transform:none}
html.js .stag.in>*:nth-child(1){transition-delay:0ms}
html.js .stag.in>*:nth-child(2){transition-delay:70ms}
html.js .stag.in>*:nth-child(3){transition-delay:140ms}
html.js .stag.in>*:nth-child(4){transition-delay:210ms}
html.js .stag.in>*:nth-child(n+5){transition-delay:280ms}

/* ============ responsive ============ */
@media(max-width:1080px){
  .railed{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .rail{position:static}
  .rail h3{display:none}
  .rail .nav{display:flex;gap:var(--space-1);overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem}
  .rail .nav::-webkit-scrollbar{display:none}
  .rail a{border:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 .9rem;white-space:nowrap}
  .rail a.on{border-left-width:1px;border-color:var(--accent);padding-left:.9rem}
  .rail .cnt{margin-left:.4rem}
  .plist--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail .grp{display:none}
  .board{grid-template-columns:minmax(0,1fr)}
  .news{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .head-tel{display:none}
  .subbar .in{justify-content:flex-start;gap:var(--space-4)}
  .split{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .qa .r{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .mcta{display:block}
  :root{--cta-h:72px}
  body{padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  .plist,.plist--3{grid-template-columns:minmax(0,1fr)}
  .slug{padding:var(--space-8) 0}
  .news{grid-template-columns:minmax(0,1fr)}
  .mini{grid-template-columns:minmax(0,1fr)}
  .catmodal{width:100vw;max-height:100vh;height:100vh;top:0;left:0;transform:none;border:0}
  body.cat-open .catmodal{transform:none}
}

/* AGENT1000-CTA-CONTRACT v1 — z대역: 드로어/모달 1000 > 하단바 900 > 플로팅 800 */
.mcta{z-index:900}
.mobile-nav.open{position:fixed;left:0;right:0;top:var(--mm-top,64px);bottom:0;z-index:1000;
                 overflow-y:auto;overscroll-behavior:contain}
body.mm-open{overflow:hidden}
body.mm-open .mcta{display:none}

body.cat-open{overflow:hidden}
body.cat-open .mcta{display:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal,html.js .stag>*{opacity:1!important;transform:none!important}
  .p:hover .ph img{transform:none}
  /* 모달은 뜨고 지는 애니메이션 없이 즉시 최종 상태 */
  .catmodal{transform:translate(-50%,-50%)!important}
  body.cat-open .catmodal{transform:translate(-50%,-50%)!important}
}

/* ★ 2026-08-25 0B — 헤더 주입 CLS(실측 0.104/0.194) 차단.
   실측 header 150px (프로모 띠 + 중앙 워드마크 + 서브바) — 전 뷰포트 동일. */
:root{--head-h:150px}
#site-header{min-height:var(--head-h)}

/* ★ 좁은 화면 락업 가드 (v13.1 §14.10) — 계약의 360 하한은 워드마크 21px · 락업 96px 이다.
   그 위에서 화면 폭에 맞춘다. 안 줄이면 워드마크+부제+전화+버거가 한 줄에 안 들어가
   헤더가 넘치거나(눈맵시 17px) 웹폰트가 들어올 때 좌우로 흔들린다(파란 CLS 0.11). */
@media (max-width:480px){
  :root{--brand-size:clamp(22px,6.4vw,28px)}
  .brandwrap{min-width:0;flex:0 1 auto}
  .brand{white-space:nowrap}
  .brand-sub{font-size:10px;letter-spacing:.1em;white-space:nowrap}
}


/* ===== OPTICAL_SHOP_MULTI_ANMOK — 영문 중심 조판 (r01-en) =====
   영문 display  Barlow — https://github.com/google/fonts/tree/main/ofl/barlow
                 SIL Open Font License 1.1 · OFL.txt
                 원본 Barlow-Bold.ttf sha256 84e6a4d61e7c3e21f3c50ea6a4f7e5303a3467864c038be6ea3759bab8d547f9
                 자산 로컬 WOFF2 9개 (fonts/) — 외부 CDN 이 유일한 경로가 아니다
   한글 body     'Gothic A1', system-ui, sans-serif — 원본에서 바꾸지 않았다
   선택 이유     레퍼런스 gngr.kr 은 **일부러 평평한 조판**이다 — 본문 13px · 제목 13~14px 이고 위계를 타입이 아니라 사진 크기로만 만든다. 그래서 큰 크기에서만 예쁜 display 서체는 이 사이트를 망가뜨린다. 실측에서 Barlow 는 획대비 1.21(거의 평평) · x/cap 0.729(작은 크기에서 잘 읽힌다) · 굵기 9종(100~900)으로, 11~19px 자리에서도 자간을 벌린 대문자 라벨이 또렷하다. 웜 아이보리 지면 위 딥 인디고와 부딪히지 않는 중립 그로테스크다. 포트폴리오 사용 2회.

   영문이 시각을 주도한다: 워드마크 · 메뉴 · 히어로 · 페이지 제목 · 섹션 제목 · 카테고리 · 짧은 라벨.
   한글은 영문 아래 짧은 설명 · 서비스 · 가격 · 주소 · 운영정보 · 긴 본문에 남는다.
   구조 · 색 · 사진 · 모션 · 정보구조는 그대로다.
   ==================================================== */
@font-face{font-family:"Barlow";src:url("https://locwgvizodujqrhztvjk.supabase.co/storage/v1/object/public/site-assets/OPTICAL_SHOP_MULTI_ANMOK/fonts/barlow-100-latin.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url("https://locwgvizodujqrhztvjk.supabase.co/storage/v1/object/public/site-assets/OPTICAL_SHOP_MULTI_ANMOK/fonts/barlow-200-latin.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url("https://locwgvizodujqrhztvjk.supabase.co/storage/v1/object/public/site-assets/OPTICAL_SHOP_MULTI_ANMOK/fonts/barlow-300-latin.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url("https://locwgvizodujqrhztvjk.supabase.co/storage/v1/object/public/site-assets/OPTICAL_SHOP_MULTI_ANMOK/fonts/barlow-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url("https://locwgvizodujqrhztvjk.supabase.co/storage/v1/object/public/site-assets/OPTICAL_SHOP_MULTI_ANMOK/fonts/barlow-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url("https://locwgvizodujqrhztvjk.supabase.co/storage/v1/object/public/site-assets/OPTICAL_SHOP_MULTI_ANMOK/fonts/barlow-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url("https://locwgvizodujqrhztvjk.supabase.co/storage/v1/object/public/site-assets/OPTICAL_SHOP_MULTI_ANMOK/fonts/barlow-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url("https://locwgvizodujqrhztvjk.supabase.co/storage/v1/object/public/site-assets/OPTICAL_SHOP_MULTI_ANMOK/fonts/barlow-800-latin.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url("https://locwgvizodujqrhztvjk.supabase.co/storage/v1/object/public/site-assets/OPTICAL_SHOP_MULTI_ANMOK/fonts/barlow-900-latin.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{ --bi-en:"Barlow",'Barlow', system-ui, sans-serif; --bi-kr:'Gothic A1', system-ui, sans-serif; }

/* 워드마크 */
.brand{font-family:var(--bi-en) !important;font-weight:600;
  font-size:28px;line-height:1.05;letter-spacing:.07em;
  text-indent:0;text-transform:uppercase}
/* ★ 워드마크 아래 한글 부제는 두지 않는다 (2026-08-30 지시: "브랜드명 영문 철자 아래 한글을 지워").
   영문 철자 아래 한글을 겹쳐 두면 상호가 두 번 읽히고, 그 한글이 라틴 전용 display 를
   물려받아 시스템 폴백으로 그려졌다. 상호의 한글은 푸터 법정정보에 그대로 남는다. */
.brand-sub{display:none !important}
@media (max-width:600px){ .brand{font-size:22px} }

/* 영문 표제 + 한글 부제 — 우리가 붙인 class 에만 건다.
   ★ !important 를 쓴다. 사이트마다 제목 class 에 라틴 토큰을 !important 로 박아 둔 곳이 있어
     그냥 두면 영문이 옛 폰트로, 한글이 라틴 폰트로 그려진다.
   ★ 크기는 **px 고정이 아니라 그 요소에 대한 배율(em)** 이다.
     또렷(vycoz)·안목(gngr)처럼 **일부러 평평한 조판**이 레퍼런스 시그니처인 사이트가 있어
     제목을 px 로 못 박으면 그 사이트의 위계 자체가 사라진다. 배율이면 위계는 그대로 두고
     영문만 그 자리에서 커진다.
   ★ 한글 부제는 24px 미만으로 잠근다 — 영문 아래 짧은 설명이라는 역할이 크기로도 지켜진다. */
.bi{display:block;letter-spacing:normal;text-indent:0}
/* 설정의 
 이 줄바꿈이 된다 — DOM 을 더 만들지 않고 원본의 <br> 리듬을 옮긴다 */
.bi__en,.bi__kr{white-space:pre-line}
.bi__en{display:block;font-family:var(--bi-en) !important;font-weight:500;
  font-size:calc(1em * 1.45);line-height:1.2;letter-spacing:.01em;
  text-transform:none}
.bi__kr{display:block;font-family:var(--bi-kr) !important;font-weight:500;
  font-size:clamp(13px, calc(1em * .6), 18px);
  line-height:1.5;letter-spacing:-.022em;text-transform:none;margin-top:6px}
h1.bi>.bi__en,.bi--h1>.bi__en{font-size:calc(1em * 1.15)}
h3.bi>.bi__en,.bi--h3>.bi__en{font-size:calc(1em * 1.35)}
.bi--display>.bi__en{font-size:calc(1em * 1.2)}
@media (max-width:600px){
  .bi__en{font-size:calc(1em * 1.3)}
  h1.bi>.bi__en,.bi--h1>.bi__en{font-size:calc(1em * 1.1)}
  .bi__kr{font-size:clamp(13px, calc(1em * .64), 15px)}
}

/* 런타임 판독창 — 사이트 스크립트가 data-* 에서 글자를 다시 쓰는 자리.
   영문과 한글이 한 줄에 섞이므로 **글리프 단위 폴백**으로 라틴은 영문 서체,
   한글은 한글 서체가 그리게 한다(라틴 전용 서체에 한글을 넣지 않는다). */
.bi[data-nm],.bi[data-name]{font-family:var(--bi-en),var(--bi-kr) !important}

/* 라틴 라벨 — 우리가 영문으로 바꾼 것만 */
.bi-lb{font-family:var(--bi-en) !important;letter-spacing:.16em;
  text-transform:uppercase}
.bi-lb>em{font-style:normal;font-family:var(--bi-kr) !important;text-transform:none;
  letter-spacing:-.015em}

/* 메뉴 · 푸터 · 드로어 — 이름은 **한 번만**, 서체는 하나로.
   푸터 전체를 우리 영문 서체로 통일한다(라틴 라벨 한정) — 아래쪽만 다른 서체로 보이지 않게. */
.bi-nav{font-family:var(--bi-en) !important;letter-spacing:.16em;
  text-transform:uppercase}
.foot .bi-nav,.mobile-nav .bi-nav{font-weight:500}
/* 푸터의 한글(법정정보·태그라인)은 반드시 한글 서체로 — 라틴 전용으로 새면 폴백이 된다 */
.foot-legal,.foot-tag{font-family:var(--bi-kr) !important}

/* 핵심 CTA — 영문 주도 + 한글 보완 */
.bi2{flex-direction:column !important;align-items:flex-start;justify-content:center;gap:3px;
  text-align:left}
.bi2__en{display:block;font-family:var(--bi-en) !important;font-weight:600;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.15}
.bi2__kr{display:block;font-family:var(--bi-kr) !important;font-weight:500;font-size:12.5px;
  letter-spacing:-.015em;line-height:1.35;opacity:.94}
/* 하단 고정 바는 한 줄이다 — 앵커가 flex 라 두 span 이 나란히 선다 */
.mcta .bi2__en{margin-right:9px}
.mcta .bi2__kr{opacity:1}

/* ★ 2026-08-31 정정 (사용자 지시) — 안목
   ⓐ 시작 페이지에서 두 번째 메뉴 줄(.subbar)을 걷는다. 햄버거 드로어가 같은 곳을 다 가리킨다.
      하위 페이지에서는 현재 위치를 알려 주므로 남긴다.
   ⓑ 제품 이름 — 영문만 굵게, 한글은 보통. 규격줄은 HTML 에서 걷었다.
   ⓒ 카테고리 레일의 위계가 뒤집혀 있었다 — 하위 항목이 상위 그룹보다 크고 진했다.
   ⓓ 게시판 구획 사이 간격이 없어 News·FAQ·Policy·Review 가 한 덩어리로 붙어 있었다. */
[data-active="index"] .subbar{display:none}
.p .nm{font-weight:400}
.p .nm b{font-weight:800;letter-spacing:-.01em}
.p .nm i{font-style:normal;font-weight:400;color:var(--ink-soft)}
.rail .grp{margin-top:var(--space-6);padding-bottom:.35rem;
  font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--ink);
  border-bottom:1px solid var(--ink)}
.rail .grp:first-of-type{margin-top:var(--space-2)}
.rail .nav a{font-size:var(--text-sm);font-weight:500;padding-left:.7rem;
  border-bottom:1px solid var(--line-soft)}
.rail .nav a:hover{padding-left:.95rem}
.rail .nav a.on{font-weight:700;padding-left:.55rem}
.board .listhead{margin-top:var(--space-7);padding-bottom:var(--space-2);
  border-bottom:2px solid var(--ink)}
.board .listhead:first-child{margin-top:0}
.listhead h2 em{margin-left:0;display:block}
.board .news{margin-top:var(--space-4)}
.board .qa{margin-top:var(--space-4);border-top:0}
.board .qa .r{padding-block:var(--space-3)}
@media (max-width:760px){ .board .listhead{margin-top:var(--space-6)} }