/* ============================================================
   네일숍 스킨 — [data-skin] 브랜드 인격 축 (명암 축 data-theme 과 직교)
   기존 스킨은 토큰을 유지한다. 새 계열은 명시된 스킨 범위에서 공통 구역의 조판도 구성한다.
   설계 근거: 디자인 시스템 조사 워크플로 wf_63eed32f (M3·Carbon·HIG·Polaris·
   뷰티 브랜드·모션·한국 관행 5클러스터) — 스킨별 대비는 WCAG 상대휘도 실측,
   본 세션에서 코드로 재검증 완료 (11/11 일치).
   기준: ink/ground >= 7 · muted/ground >= 4.5 · brand/ground >= 3 · brand-ink/brand >= 4.5
   ★ 검산은 **10짝**이다. 위 4짝 + ink/surface · muted/surface · muted/surface-alt ·
     muted/brand-soft · brand/brand-soft · ink-2/ground. brand/brand-soft 가 목록에 없던 동안
     glass 4.06 · aurora 4.46 이 통과로 새어 나갔다 — brand-soft 는 배경으로 쓰이는 자리가
     여럿이고(nav 현재항목·요금표·SNS) 전부 **지속 상태의 일반 크기 글자**다.
     12스킨 x 라이트/다크 x 10짝 = 240항목 미달 0건 (상대휘도 공식 실측).
   ★ 배지 4토큰(--wb-ok·ok-soft·warn·warn-soft)도 12스킨 전부 재정의한다(2026-08-24) —
     foundation 청록/주황이 스킨 인격을 깨던 자리. 게이트 ok/ok-soft·warn/warn-soft·ok/surface ≥4.5,
     verify_contrast.py 가 기계 검산한다.
   radius 캡: 전 스킨 §18 상한 8px 이내 (atelier 4 · blush 8 · salt 2 · noir 0 · sage 8)
   ============================================================ */

/* ── atelier — 아틀리에 (세리프 에디토리얼)
   라이트: ink/ground 14.35, muted/ground 5.63, brand/ground 5.50, brand-ink/brand 5.87 (보너스 ink-2/ground 8.56, brand/brand-soft 4.68). 다크: ink/ground 15.32, muted/ground 6.57, brand/ground 8.58, brand-ink/brand 8.58 (ink-2 11.21, brand/brand-soft 6.78). 상대휘도 공식으로 실측 — 10짝 전 항목 기준(7/4.5/3/4.5) 통과. */
:root[data-skin="atelier"] {
  /* 로마자 전용 — 세리프 에디토리얼 — 한글 세리프(Noto Serif KR)와 결이 맞는 개러몬드 */
  --wb-font-latin: 'Cormorant Garamond', serif;
  --wb-ground: #FBF7F0;
  --wb-surface: #FFFDF8;
  --wb-surface-alt: #F3ECE0;
  --wb-rule: #E7DECE;
  --wb-rule-strong: #D5C8B2;
  --wb-ink: #2B241A;
  --wb-ink-2: #52463A;
  --wb-muted: #6E6152;
  --wb-brand: #8A5A2B;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #F1E4D0;
  /* 배지(영업상태·채널) — 스킨 hue 재정의(올리브/시에나). foundation 청록/주황이 웜 세피아 인격을 깼다.
     게이트 ok/ok-soft·warn/warn-soft·ok/surface ≥4.5 — 12스킨 전부 상대휘도 실측 통과(2026-08-24) */
  --wb-ok: #58681F; --wb-ok-soft: #EAEDD3;
  --wb-warn: #A14417; --wb-warn-soft: #F8E3D2;
  --wb-font-display: 'Noto Serif KR', 'Pretendard Variable', Pretendard, serif;
  --wb-display-weight: 600;
  --wb-display-spacing: -0.01em;
  --wb-r-sm: 2px;
  --wb-r-md: 3px;
  --wb-r-lg: 4px;
  --wb-ease: cubic-bezier(0.4, 0.14, 0.3, 1);
  --wb-d-reveal: 700ms;
}
:root[data-skin="atelier"][data-theme="dark"] {
  --wb-ground: #17130E;
  --wb-surface: #201A13;
  --wb-surface-alt: #272016;
  --wb-rule: #372E20;
  --wb-rule-strong: #4C3F2C;
  --wb-ink: #F0E9DD;
  --wb-ink-2: #D4C8B6;
  --wb-muted: #A89880;
  --wb-brand: #D9A868;
  --wb-brand-ink: #17130E;
  --wb-brand-soft: #332711;
  --wb-ok: #A9BF6B; --wb-ok-soft: #262B14;
  --wb-warn: #E39A62; --wb-warn-soft: #33200F;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="atelier"]:not([data-theme="light"]) {
    --wb-ground: #17130E;
    --wb-surface: #201A13;
    --wb-surface-alt: #272016;
    --wb-rule: #372E20;
    --wb-rule-strong: #4C3F2C;
    --wb-ink: #F0E9DD;
    --wb-ink-2: #D4C8B6;
    --wb-muted: #A89880;
    --wb-brand: #D9A868;
    --wb-brand-ink: #17130E;
    --wb-brand-soft: #332711;
    --wb-ok: #A9BF6B; --wb-ok-soft: #262B14;
    --wb-warn: #E39A62; --wb-warn-soft: #33200F;
  }
}

/* ── blush — 블러시 (소프트 페미닌)
   라이트: ink/ground 13.44, muted/ground 5.36, brand/ground 5.19, brand-ink/brand 5.50 (ink-2 8.30, brand/brand-soft 4.51, muted/brand-soft 4.66). 다크: ink/ground 15.78, muted/ground 6.38, brand/ground 8.01, brand-ink/brand 8.01 (ink-2 11.38, brand/brand-soft 6.41). 10짝 전 항목 통과.
   보정 이력: muted #85606B → #815D68 — brand-soft 위에서 4.44 미달(라이트)이었다. 10짝 검산이
             brand/brand-soft 를 들이면서 같은 배경의 muted 짝도 처음으로 재측정됐다. */
:root[data-skin="blush"] {
  /* 로마자 전용 — 소프트 페미닌 — 둥근 인상의 인간적 그로테스크 */
  --wb-font-latin: Karla, sans-serif;
  --wb-ground: #FDF7F6;
  --wb-surface: #FFFFFF;
  --wb-surface-alt: #FAEBE9;
  --wb-rule: #F1DBD8;
  --wb-rule-strong: #DFBFBB;
  --wb-ink: #37262B;
  --wb-ink-2: #5C444C;
  --wb-muted: #815D68;
  --wb-brand: #A84A62;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #FBE3E7;
  /* 배지 — 로즈 인격에 맞춘 세이지 그린/테라코타 */
  --wb-ok: #2E7250; --wb-ok-soft: #DFF0E6;
  --wb-warn: #B0431F; --wb-warn-soft: #FBE7DC;
  --wb-font-display: 'Pretendard Variable', Pretendard, sans-serif;
  --wb-display-weight: 700;
  --wb-display-spacing: -0.025em;
  --wb-r-sm: 6px;
  --wb-r-md: 8px;
  --wb-r-lg: 8px;
  --wb-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wb-d-reveal: 550ms;
}
:root[data-skin="blush"][data-theme="dark"] {
  --wb-ground: #191013;
  --wb-surface: #22161A;
  --wb-surface-alt: #2A1C21;
  --wb-rule: #3B2830;
  --wb-rule-strong: #503743;
  --wb-ink: #F5E9EC;
  --wb-ink-2: #DCC4CB;
  --wb-muted: #B08E99;
  --wb-brand: #F08CA6;
  --wb-brand-ink: #191013;
  --wb-brand-soft: #3B1E2A;
  --wb-ok: #7FD0A2; --wb-ok-soft: #163425;
  --wb-warn: #F09A70; --wb-warn-soft: #3A2013;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="blush"]:not([data-theme="light"]) {
    --wb-ground: #191013;
    --wb-surface: #22161A;
    --wb-surface-alt: #2A1C21;
    --wb-rule: #3B2830;
    --wb-rule-strong: #503743;
    --wb-ink: #F5E9EC;
    --wb-ink-2: #DCC4CB;
    --wb-muted: #B08E99;
    --wb-brand: #F08CA6;
    --wb-brand-ink: #191013;
    --wb-brand-soft: #3B1E2A;
    --wb-ok: #7FD0A2; --wb-ok-soft: #163425;
    --wb-warn: #F09A70; --wb-warn-soft: #3A2013;
  }
}

/* ── salt — 솔트 (미니멀 모노)
   라이트: ink/ground 15.76, muted/ground 5.31, brand/ground 10.19, brand-ink/brand 11.02 (ink-2 9.14, brand/brand-soft 8.90, muted/brand-soft 4.63). 다크: ink/ground 15.83, muted/ground 6.16, brand/ground 10.84, brand-ink/brand 10.84 (ink-2 11.05, brand/brand-soft 8.34). 10짝 전 항목 통과 — 브랜드가 준-무채라 대비 여유가 가장 크다.
   보정 이력: muted #6B6963 → #686661 — blush 와 같은 사유(brand-soft 위 4.44 미달, 라이트). */
:root[data-skin="salt"] {
  /* 로마자 전용 — 미니멀 — 중립 그로테스크. 숫자 정렬이 가장 깨끗하다 */
  --wb-font-latin: Inter, sans-serif;
  --wb-ground: #F7F6F3;
  --wb-surface: #FFFFFF;
  --wb-surface-alt: #EFEDE8;
  --wb-rule: #DFDCD5;
  --wb-rule-strong: #C7C3B9;
  --wb-ink: #1D1C1A;
  --wb-ink-2: #45433E;
  --wb-muted: #686661;
  --wb-brand: #3E3C37;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #E9E7E0;
  /* 배지 — 준-무채 인격에 맞춘 저채도 그린그레이/브라운 */
  --wb-ok: #44603F; --wb-ok-soft: #E6EAE0;
  --wb-warn: #7A4A28; --wb-warn-soft: #F0E6DA;
  --wb-font-display: 'Pretendard Variable', Pretendard, sans-serif;
  --wb-display-weight: 600;
  --wb-display-spacing: -0.02em;
  --wb-r-sm: 2px;
  --wb-r-md: 2px;
  --wb-r-lg: 2px;
  --wb-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --wb-d-reveal: 480ms;
}
:root[data-skin="salt"][data-theme="dark"] {
  --wb-ground: #121110;
  --wb-surface: #1B1A18;
  --wb-surface-alt: #232220;
  --wb-rule: #33312D;
  --wb-rule-strong: #46433D;
  --wb-ink: #EDEBE6;
  --wb-ink-2: #C9C6BE;
  --wb-muted: #97938A;
  --wb-brand: #C9C4B8;
  --wb-brand-ink: #121110;
  --wb-brand-soft: #2B2925;
  --wb-ok: #A9C0A4; --wb-ok-soft: #232A21;
  --wb-warn: #CFA377; --wb-warn-soft: #2E2418;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="salt"]:not([data-theme="light"]) {
    --wb-ground: #121110;
    --wb-surface: #1B1A18;
    --wb-surface-alt: #232220;
    --wb-rule: #33312D;
    --wb-rule-strong: #46433D;
    --wb-ink: #EDEBE6;
    --wb-ink-2: #C9C6BE;
    --wb-muted: #97938A;
    --wb-brand: #C9C4B8;
    --wb-brand-ink: #121110;
    --wb-brand-soft: #2B2925;
    --wb-ok: #A9C0A4; --wb-ok-soft: #232A21;
    --wb-warn: #CFA377; --wb-warn-soft: #2E2418;
  }
}

/* ── noir — 누아르 (모던 럭셔리)
   라이트: ink/ground 17.01, muted/ground 6.00, brand/ground 8.58, brand-ink/brand 9.16 (ink-2 9.94, brand/brand-soft 7.34). 다크: ink/ground 16.53, muted/ground 6.71, brand/ground 9.33, brand-ink/brand 8.76 (ink-2 11.98, brand/brand-soft 7.03). 10짝 전 항목 통과 — 5종 중 대비 최고치. */
:root[data-skin="noir"] {
  /* 로마자 전용 — 누아르 럭셔리 — 고대비 세리프가 럭셔리 인상을 만든다 */
  --wb-font-latin: 'Cormorant Garamond', serif;
  --wb-ground: #FAF7F4;
  --wb-surface: #FFFFFF;
  --wb-surface-alt: #F2EBE5;
  --wb-rule: #E4D9D1;
  --wb-rule-strong: #CCBDB1;
  --wb-ink: #1B1414;
  --wb-ink-2: #4A3B3B;
  --wb-muted: #6E5A5C;
  --wb-brand: #7E2A40;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #F6E1E6;
  /* 배지 — 와인 럭셔리에 맞춘 딥 포레스트/번트 시에나 */
  --wb-ok: #2F5D46; --wb-ok-soft: #E2EEE6;
  --wb-warn: #A03A1E; --wb-warn-soft: #F8E3DA;
  --wb-font-display: 'Noto Serif KR', 'Pretendard Variable', Pretendard, serif;
  --wb-display-weight: 400;
  --wb-display-spacing: -0.015em;
  --wb-r-sm: 0px;
  --wb-r-md: 0px;
  --wb-r-lg: 0px;
  --wb-ease: cubic-bezier(0.05, 0.7, 0.1, 1);
  --wb-d-reveal: 750ms;
}
:root[data-skin="noir"][data-theme="dark"] {
  --wb-ground: #100D0E;
  --wb-surface: #1A1517;
  --wb-surface-alt: #221B1E;
  --wb-rule: #342A31;
  --wb-rule-strong: #483B43;
  --wb-ink: #F2ECE9;
  --wb-ink-2: #D6C9C4;
  --wb-muted: #A8948E;
  --wb-brand: #D4AE7A;
  --wb-brand-ink: #1B1414;
  --wb-brand-soft: #332715;
  --wb-ok: #86C7A4; --wb-ok-soft: #1B3328;
  --wb-warn: #E89A77; --wb-warn-soft: #38201A;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="noir"]:not([data-theme="light"]) {
    --wb-ground: #100D0E;
    --wb-surface: #1A1517;
    --wb-surface-alt: #221B1E;
    --wb-rule: #342A31;
    --wb-rule-strong: #483B43;
    --wb-ink: #F2ECE9;
    --wb-ink-2: #D6C9C4;
    --wb-muted: #A8948E;
    --wb-brand: #D4AE7A;
    --wb-brand-ink: #1B1414;
    --wb-brand-soft: #332715;
    --wb-ok: #86C7A4; --wb-ok-soft: #1B3328;
    --wb-warn: #E89A77; --wb-warn-soft: #38201A;
  }
}

/* ── sage — 세이지 (내추럴 캄)
   라이트: ink/ground 13.86, muted/ground 5.21, brand/ground 5.26, brand-ink/brand 5.69 (ink-2 7.65, brand/brand-soft 4.69, muted/brand-soft 4.64). 다크: ink/ground 15.90, muted/ground 6.76, brand/ground 8.82, brand-ink/brand 8.82 (ink-2 11.89, brand/brand-soft 6.40). 10짝 전 항목 통과. */
:root[data-skin="sage"] {
  /* 로마자 전용 — 동네감성 — 한글 Gowun Dodum 의 부드러움에 맞춘다 */
  --wb-font-latin: Karla, sans-serif;
  --wb-ground: #F4F7F1;
  --wb-surface: #FCFDFB;
  --wb-surface-alt: #E9EFE3;
  --wb-rule: #D8E0D0;
  --wb-rule-strong: #BECBB2;
  --wb-ink: #21291F;
  --wb-ink-2: #46523F;
  --wb-muted: #5F6B58;
  --wb-brand: #46704F;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #E3ECDD;
  /* 배지 — 내추럴 그린 인격은 성공색도 제 초록 계열, 경고는 웜 오커 */
  --wb-ok: #2F6635; --wb-ok-soft: #DFEDDA;
  --wb-warn: #96530F; --wb-warn-soft: #F3E7D0;
  --wb-font-display: 'Gowun Dodum', 'Pretendard Variable', Pretendard, sans-serif;
  --wb-display-weight: 400;
  --wb-display-spacing: -0.005em;
  --wb-r-sm: 4px;
  --wb-r-md: 6px;
  --wb-r-lg: 8px;
  --wb-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --wb-d-reveal: 620ms;
}
:root[data-skin="sage"][data-theme="dark"] {
  --wb-ground: #11150F;
  --wb-surface: #1A2017;
  --wb-surface-alt: #212A1D;
  --wb-rule: #313C2B;
  --wb-rule-strong: #44523B;
  --wb-ink: #EAF0E5;
  --wb-ink-2: #C8D3BF;
  --wb-muted: #93A188;
  --wb-brand: #8FBF92;
  --wb-brand-ink: #11150F;
  --wb-brand-soft: #24331F;
  --wb-ok: #90C795; --wb-ok-soft: #1F3320;
  --wb-warn: #E0A45E; --wb-warn-soft: #332711;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="sage"]:not([data-theme="light"]) {
    --wb-ground: #11150F;
    --wb-surface: #1A2017;
    --wb-surface-alt: #212A1D;
    --wb-rule: #313C2B;
    --wb-rule-strong: #44523B;
    --wb-ink: #EAF0E5;
    --wb-ink-2: #C8D3BF;
    --wb-muted: #93A188;
    --wb-brand: #8FBF92;
    --wb-brand-ink: #11150F;
    --wb-brand-soft: #24331F;
    --wb-ok: #90C795; --wb-ok-soft: #1F3320;
    --wb-warn: #E0A45E; --wb-warn-soft: #332711;
  }
}



/* ══════════════════════════════════════════════════════════════════
   신규 스킨 (2026-08-14) — UUPM 순수효과 이식.
   근거 BEAUTY-DESIGN-REFERENCE.md · 명세는 worklog 2026-08-14 절(계획서는 흡수 후 정리 — git 이력)
   위 5종과 갈리는 축은 색이 아니라 **표면**이다 — foundation 에 뚫은
   --wb-elev / --wb-elev-hover / --wb-ground-layer 를 여기서만 채운다.
   radius 캡: soft 6/8/8 · mist 8 · aurora 4/6/8 (전부 §18 상한 8px 이내)
   ══════════════════════════════════════════════════════════════════ */

/* ── soft — 소프트 (항상 떠 있는 카드, 느린 호흡)
   라이트: ink/ground 9.72 · muted/ground 5.89 · brand/ground 5.53 · brand-ink/brand 6.04
   다크:   ink/ground 15.89 · muted/ground 6.61 · brand/ground 9.45 · brand-ink/brand 9.45
   상대휘도 공식 실측 — 본문 4.5:1 · 큰글자/UI 3:1 기준 전 항목 통과.
   (보너스 라이트 ink-2/ground 6.18 · ink/surface 10.62 · muted/surface 6.43 ·
    muted/surface-alt 5.40 · muted/brand-soft 5.33 · brand/brand-soft 5.01 — `.wb-ph` 자리.
    다크 11.46 / 14.93 / 6.21 / 5.80 / 5.24 / 7.48)
   보정 이력: 참조 §2 미용실·네일 행 primary #EC4899 → #BE185D (흰 글자와 3.53 탈락 → 6.04)
              참조 §2 미용실·네일 행 muted #64748B → #7E5261 (ground 대비 4.36 탈락 → 5.89)
   인격은 색이 아니라 축에 있다 — 정지상태 부양(--wb-elev) · 느린 모션(hover 260ms · card 300ms) ·
   넉넉한 밀도(section 120px). 신규 애니메이션 0 · JS 0줄. */
:root[data-skin="soft"] {
  --wb-ground: #FDF2F8;
  --wb-surface: #FFFFFF;
  --wb-surface-alt: #F7E7F0;
  --wb-rule: #F3D7E4;
  --wb-rule-strong: #E3B3C9;
  --wb-ink: #7A1338;
  --wb-ink-2: #8C4460;
  --wb-muted: #7E5261;
  --wb-brand: #BE185D;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #FBE4EC;
  /* 배지 — 소프트 핑크에 맞춘 뮤트 그린/웜 코랄 */
  --wb-ok: #34754C; --wb-ok-soft: #DFF2E5;
  --wb-warn: #B0431C; --wb-warn-soft: #FCE7DA;
  /* 타이포 — Pretendard 600 예산 -0.012em (자연 자간 0.0243em 의 50%). 웹폰트 추가 0 */
  --wb-font-display: 'Pretendard Variable', Pretendard, sans-serif;
  --wb-display-weight: 600;
  --wb-display-spacing: -0.012em;
  --wb-r-sm: 6px;
  --wb-r-md: 8px;
  --wb-r-lg: 8px;
  --wb-ease: cubic-bezier(.22,.61,.36,1);
  --wb-d-reveal: 640ms;
  /* ↓ 여기부터가 기존 5종이 한 번도 안 건드린 축 — 인격의 실체 */
  --wb-elev: 0 1px 2px rgba(122,19,56,.05), 0 8px 20px -10px rgba(122,19,56,.16);
  --wb-elev-hover: 0 2px 4px rgba(122,19,56,.06), 0 18px 34px -14px rgba(122,19,56,.26);
  --wb-shadow-sm: 0 1px 3px rgba(122,19,56,.07);
  --wb-shadow-md: 0 6px 18px -6px rgba(122,19,56,.16);
  --wb-shadow-lg: 0 18px 40px -16px rgba(122,19,56,.26);
  --wb-d-hover: 260ms;
  --wb-d-card: 300ms;
  --wb-d-lift: 220ms;
  --wb-d-press: 90ms;
  --wb-stagger: 100ms;
  --wb-section: clamp(64px, 10vw, 120px);
}
:root[data-skin="soft"][data-theme="dark"] {
  --wb-ground: #1B1014;
  --wb-surface: #261519;
  --wb-surface-alt: #2F1A20;
  --wb-rule: #3D2028;
  --wb-rule-strong: #553039;
  --wb-ink: #FAE9EF;
  --wb-ink-2: #E3C3CE;
  --wb-muted: #B98F9D;
  --wb-brand: #F2A2BE;
  --wb-brand-ink: #1B1014;
  --wb-brand-soft: #3D1F2A;
  --wb-ok: #8AD1A8; --wb-ok-soft: #143024;
  --wb-warn: #F0A379; --wb-warn-soft: #3A2114;
  --wb-elev: 0 1px 2px rgba(0,0,0,.50), 0 8px 20px -10px rgba(0,0,0,.60);
  --wb-elev-hover: 0 2px 4px rgba(0,0,0,.55), 0 18px 34px -14px rgba(0,0,0,.72);
  --wb-shadow-sm: 0 1px 3px rgba(0,0,0,.50);
  --wb-shadow-md: 0 6px 18px -6px rgba(0,0,0,.60);
  --wb-shadow-lg: 0 18px 40px -16px rgba(0,0,0,.72);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="soft"]:not([data-theme="light"]) {
    --wb-ground: #1B1014;
    --wb-surface: #261519;
    --wb-surface-alt: #2F1A20;
    --wb-rule: #3D2028;
    --wb-rule-strong: #553039;
    --wb-ink: #FAE9EF;
    --wb-ink-2: #E3C3CE;
    --wb-muted: #B98F9D;
    --wb-brand: #F2A2BE;
    --wb-brand-ink: #1B1014;
    --wb-brand-soft: #3D1F2A;
    --wb-ok: #8AD1A8; --wb-ok-soft: #143024;
    --wb-warn: #F0A379; --wb-warn-soft: #3A2114;
    --wb-elev: 0 1px 2px rgba(0,0,0,.50), 0 8px 20px -10px rgba(0,0,0,.60);
    --wb-elev-hover: 0 2px 4px rgba(0,0,0,.55), 0 18px 34px -14px rgba(0,0,0,.72);
    --wb-shadow-sm: 0 1px 3px rgba(0,0,0,.50);
    --wb-shadow-md: 0 6px 18px -6px rgba(0,0,0,.60);
    --wb-shadow-lg: 0 18px 40px -16px rgba(0,0,0,.72);
  }
}

/* ── mist — 미스트 (뉴모피즘 저부조: 테두리를 색으로 지우고 이중 그림자로 눌러 올린다)
   라이트: ink/ground 13.96 · muted/ground 5.91 · brand/ground 6.99 · brand-ink/brand 8.15
   다크:   ink/ground 14.31 · muted/ground 6.05 · brand/ground 7.47 · brand-ink/brand 7.47
   상대휘도 공식 실측 — 본문 4.5:1 · 큰글자/UI 3:1 기준 전 항목 통과.
   10짝 전수(라이트/다크): ink 13.96/14.31 · ink-2 8.04/10.14 · muted 5.91/6.05 ·
   brand 6.99/7.47 · brand-ink 8.15/7.47 · ink/surface 13.96/14.31 ·
   muted/surface 5.91/6.05 · muted/surface-alt 5.44/5.62 · muted/brand-soft 5.23/5.17 ·
   brand/brand-soft 6.19/6.38.
   ★ 참조 §3 이 Neumorphism 을 "접근성 ⚠ Low contrast" 라고 자백한다. UUPM 의 저대비
   회색 지반(연회색 글자)을 버리고 ink/ground 13.96 으로 다시 뽑았다 —
   저대비는 *그림자*에만 남기고 *글자*에는 남기지 않는다.
   보정 이력: 참조 §2 명상·힐링 행 primary #7C3AED → #5B31B8
   (흰 글자 대비 5.70 → 8.15. 원문도 4.5 는 넘지만 저대비 지반이라 여유를 더 뒀다) */
:root[data-skin="mist"] {
  /* ★ ground == surface 가 뉴모피즘의 서명이다. rule == surface-alt 로 테두리를 색으로 잠근다.
     둘 다 의도적 동일 — 오타로 보고 고치지 마라. 테두리 두께는 리터럴 100곳이라 못 바꾼다 */
  --wb-ground: #EFECF6;
  --wb-surface: #EFECF6;
  --wb-surface-alt: #E7E2F2;
  --wb-rule: #E7E2F2;
  --wb-rule-strong: #D5CEE8;
  --wb-ink: #241C33;
  --wb-ink-2: #4A4166;
  --wb-muted: #5E5578;
  --wb-brand: #5B31B8;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #E4DDF4;
  /* 배지 — 라벤더 저부조에 맞춘 딥 틸/앰버 */
  --wb-ok: #17695E; --wb-ok-soft: #DCEEE9;
  --wb-warn: #96520C; --wb-warn-soft: #F2E4D3;
  /* 저대비 표면이라 잉크가 가장 진한 서체로 고정. 세리프 금지
     (잉크밀도 실측 Pretendard 22.2 > Noto Serif 17.4 > Gowun 16.3). 웹폰트 추가 0바이트 */
  --wb-font-display: 'Pretendard Variable', Pretendard, sans-serif;
  --wb-display-weight: 600;
  --wb-display-spacing: -0.012em;
  --wb-r-sm: 8px;
  --wb-r-md: 8px;
  --wb-r-lg: 8px;
  --wb-ease: cubic-bezier(.4, 0, .2, 1);
  --wb-d-reveal: 680ms;
  /* ↓ 이중 그림자 = 인격 전부. 밝은쪽(-x-y)/어두운쪽(+x+y)이 다크에서 뒤집힌다 */
  --wb-elev: -6px -6px 14px rgba(255,255,255,.92), 6px 6px 14px rgba(36,28,51,.13);
  --wb-elev-hover: -8px -8px 18px rgba(255,255,255,.95), 8px 8px 18px rgba(36,28,51,.17);
  --wb-shadow-sm: -2px -2px 6px rgba(255,255,255,.85), 2px 2px 6px rgba(36,28,51,.09);
  --wb-shadow-md: -4px -4px 10px rgba(255,255,255,.90), 4px 4px 10px rgba(36,28,51,.12);
  --wb-shadow-lg: -8px -8px 18px rgba(255,255,255,.95), 8px 8px 18px rgba(36,28,51,.17);
  /* press 150ms = 참조 §3 Neumorphism 지시(현재 60ms 의 2.5배 — 물렁한 반응) */
  --wb-d-hover: 180ms;
  --wb-d-card: 220ms;
  --wb-d-lift: 150ms;
  --wb-d-press: 150ms;
  --wb-stagger: 120ms;
  --wb-section: clamp(72px, 11vw, 132px);
  --wb-lh-read: 1.8;
}
:root[data-skin="mist"][data-theme="dark"] {
  --wb-ground: #1C1826;
  --wb-surface: #1C1826;
  --wb-surface-alt: #231E30;
  --wb-rule: #231E30;
  --wb-rule-strong: #332C45;
  --wb-ink: #EBE7F5;
  --wb-ink-2: #C9C2DD;
  --wb-muted: #9C94B4;
  --wb-brand: #B79BF5;
  --wb-brand-ink: #1C1826;
  --wb-brand-soft: #2A2340;
  --wb-ok: #6FCDBB; --wb-ok-soft: #142B27;
  --wb-warn: #E5A164; --wb-warn-soft: #302112;
  --wb-elev: -6px -6px 14px rgba(255,255,255,.045), 6px 6px 14px rgba(0,0,0,.55);
  --wb-elev-hover: -8px -8px 18px rgba(255,255,255,.060), 8px 8px 18px rgba(0,0,0,.62);
  --wb-shadow-sm: -2px -2px 6px rgba(255,255,255,.035), 2px 2px 6px rgba(0,0,0,.45);
  --wb-shadow-md: -4px -4px 10px rgba(255,255,255,.045), 4px 4px 10px rgba(0,0,0,.55);
  --wb-shadow-lg: -8px -8px 18px rgba(255,255,255,.060), 8px 8px 18px rgba(0,0,0,.62);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="mist"]:not([data-theme="light"]) {
    --wb-ground: #1C1826;
    --wb-surface: #1C1826;
    --wb-surface-alt: #231E30;
    --wb-rule: #231E30;
    --wb-rule-strong: #332C45;
    --wb-ink: #EBE7F5;
    --wb-ink-2: #C9C2DD;
    --wb-muted: #9C94B4;
    --wb-brand: #B79BF5;
    --wb-brand-ink: #1C1826;
    --wb-brand-soft: #2A2340;
    --wb-ok: #6FCDBB; --wb-ok-soft: #142B27;
    --wb-warn: #E5A164; --wb-warn-soft: #302112;
    --wb-elev: -6px -6px 14px rgba(255,255,255,.045), 6px 6px 14px rgba(0,0,0,.55);
    --wb-elev-hover: -8px -8px 18px rgba(255,255,255,.060), 8px 8px 18px rgba(0,0,0,.62);
    --wb-shadow-sm: -2px -2px 6px rgba(255,255,255,.035), 2px 2px 6px rgba(0,0,0,.45);
    --wb-shadow-md: -4px -4px 10px rgba(255,255,255,.045), 4px 4px 10px rgba(0,0,0,.55);
    --wb-shadow-lg: -8px -8px 18px rgba(255,255,255,.060), 8px 8px 18px rgba(0,0,0,.62);
  }
}

/* ── aurora — 오로라 (지반 자체가 색을 갖는다)
   라이트: ink/ground 13.46, muted/ground 6.61, brand/ground 6.02, brand-ink/brand 6.49 (ink-2 8.63).
   다크: ink/ground 15.84, muted/ground 6.45, brand/ground 9.22, brand-ink/brand 9.22 (ink-2 11.51).
   상대휘도 공식 실측 — 본문 4.5:1 · 큰글자/UI 3:1 기준 10짝 전 항목 통과.
   brand/brand-soft 5.35/7.43 · muted/brand-soft 5.88/5.20.
   ★ 이 스킨만 지반이 평평하지 않다. --wb-ground-layer 3겹을 알파 합성한 **최악 지점**으로 재검산:
     라이트 최악 지반 #F1DAE2 → ink 10.96 · ink-2 7.03 · muted 5.38 · brand 4.90
     다크   최악 지반 #3E232C → ink 12.07 · ink-2 8.77 · muted 4.92 · brand 7.02
     표면 계열(surface·surface-alt·brand-soft)은 불투명이라 그라디언트가 닿지 않는다 —
     라이트 7.13 / 6.07 / 5.88, 다크 5.96 / 5.49 / 5.20 (muted 기준, `.wb-ph` 자리 포함).
   보정 이력: 참조 §2 웨딩 행 accent 골드 #A16207 → #9A5B12 (흰 글자 4.92 → 5.41, 게이트 4.5 여유 확보)
             → #975912 (brand-soft 위 4.46 미달 → 4.61. brand-soft 를 밝히는 쪽은 흰 표면과
               구분이 사라져 틴트가 죽으므로 accent 를 내렸다. 흰 글자는 5.59 로 함께 올랐다).
             → #8A500F (2026-08-24. 12px 아이브로가 최악 지반 #F1DAE2 위 4.23 으로 소형 텍스트
               4.5 미달 → 4.90. brand 하향은 brand-ink/brand·brand/brand-soft·brand/ground 가
               전부 동반 상승하는 단조 방향 — 6.49 / 5.35 / 6.02 재실측).
             같은 행 primary 는 핑크였으나 참조 §6-2 '규칙이 정본' 에 따라 규칙의 'Gold accents' 를 채택. */
:root[data-skin="aurora"] {
  --wb-ground:       #FDF4F7;
  --wb-surface:      #FFFFFF;
  --wb-surface-alt:  #F8E9EE;
  --wb-rule:         #EFDCD0;
  --wb-rule-strong:  #DCC0AC;
  --wb-ink:          #3A2418;
  --wb-ink-2:        #5C4130;
  --wb-muted:        #6E5240;
  --wb-brand:        #8A500F;
  --wb-brand-ink:    #FFFFFF;
  --wb-brand-soft:   #F6E7D5;
  /* 배지 — 골드/로즈 인격에 맞춘 모스 그린/딥 로즈(그라디언트 지반 위에서도 ok/ground 6.09) */
  --wb-ok: #566318; --wb-ok-soft: #ECEFD3;
  --wb-warn: #A63348; --wb-warn-soft: #FBE2E7;
  /* 타이포 — Noto Serif KR 600 예산 -0.008em (자연 자간 0.016em 의 50%). 웹폰트 추가 0 */
  --wb-font-display: 'Noto Serif KR', 'Pretendard Variable', Pretendard, serif;
  --wb-display-weight: 600;
  --wb-display-spacing: -0.008em;
  --wb-r-sm: 4px;
  --wb-r-md: 6px;
  --wb-r-lg: 8px;
  --wb-ease: cubic-bezier(.16, 1, .3, 1);
  --wb-d-reveal: 760ms;
  /* ★ 인격의 실체 — body 지반 레이어. 애니메이션은 넣지 않는다(참조 §1 'Harsh animations' 금지 +
     상시 재생은 저사양 배터리 비용). 알파는 대비 검산으로 정한 상한이다 — **올리지 마라**:
     라이트는 .12/.12/.09 에서 muted 4.43 으로 게이트를 깬다(.10/.10/.07 은 4.74 로 아직 산다). */
  --wb-ground-layer:
    radial-gradient(70% 55% at 12%   0%, rgba(219, 39,119,.060), transparent 60%),
    radial-gradient(60% 50% at 92%  12%, rgba(161, 98,  7,.060), transparent 62%),
    radial-gradient(80% 60% at 50% 100%, rgba(139, 92,246,.045), transparent 65%);
  --wb-elev:        0 1px 2px rgba(58,36,24,.05), 0 10px 26px -12px rgba(58,36,24,.18);
  --wb-elev-hover:  0 2px 5px rgba(58,36,24,.07), 0 20px 42px -16px rgba(58,36,24,.28);
  --wb-shadow-sm:   0 1px 3px rgba(58,36,24,.07);
  --wb-shadow-md:   0 6px 18px -6px rgba(58,36,24,.16);
  --wb-shadow-lg:   0 20px 42px -16px rgba(58,36,24,.28);
  --wb-d-hover: 240ms;
  --wb-d-card: 320ms;
  --wb-stagger: 110ms;
  --wb-section: clamp(72px, 11vw, 128px);
}
/* 다크 2벌 — 내용 동일. :root[data-skin] 은 foundation 의 @media dark 블록과 특이도가 같고(0,2,0)
   이 파일이 뒤에 실리므로 이겨버린다. 빠뜨리면 다크에서 라이트용 갈색 그림자와 라이트용 그라디언트가 그대로 남는다.
   다크 지반은 여유가 얇다 — .12/.10/.08 에서 이미 muted 4.49 로 미달(실측). 아래 값이 상한이다. */
:root[data-skin="aurora"][data-theme="dark"] {
  --wb-ground:      #191110;
  --wb-surface:     #231917;
  --wb-surface-alt: #2B201D;
  --wb-rule:        #3A2A25;
  --wb-rule-strong: #503A33;
  --wb-ink:         #F5EBE4;
  --wb-ink-2:       #DBC8BB;
  --wb-muted:       #AD9384;
  --wb-brand:       #E0AE63;
  --wb-brand-ink:   #191110;
  --wb-brand-soft:  #33240F;
  --wb-ok: #B4C86A; --wb-ok-soft: #262B10;
  --wb-warn: #EE9AA8; --wb-warn-soft: #3A1A20;
  --wb-ground-layer:
    radial-gradient(70% 55% at 12%   0%, rgba(219, 39,119,.090), transparent 60%),
    radial-gradient(60% 50% at 92%  12%, rgba(224,174, 99,.080), transparent 62%),
    radial-gradient(80% 60% at 50% 100%, rgba(139, 92,246,.060), transparent 65%);
  --wb-elev:        0 1px 2px rgba(0,0,0,.50), 0 10px 26px -12px rgba(0,0,0,.62);
  --wb-elev-hover:  0 2px 5px rgba(0,0,0,.55), 0 20px 42px -16px rgba(0,0,0,.74);
  --wb-shadow-sm:   0 1px 3px rgba(0,0,0,.50);
  --wb-shadow-md:   0 6px 18px -6px rgba(0,0,0,.60);
  --wb-shadow-lg:   0 20px 42px -16px rgba(0,0,0,.74);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="aurora"]:not([data-theme="light"]) {
    --wb-ground:      #191110;
    --wb-surface:     #231917;
    --wb-surface-alt: #2B201D;
    --wb-rule:        #3A2A25;
    --wb-rule-strong: #503A33;
    --wb-ink:         #F5EBE4;
    --wb-ink-2:       #DBC8BB;
    --wb-muted:       #AD9384;
    --wb-brand:       #E0AE63;
    --wb-brand-ink:   #191110;
    --wb-brand-soft:  #33240F;
    --wb-ok: #B4C86A; --wb-ok-soft: #262B10;
    --wb-warn: #EE9AA8; --wb-warn-soft: #3A1A20;
    --wb-ground-layer:
      radial-gradient(70% 55% at 12%   0%, rgba(219, 39,119,.090), transparent 60%),
      radial-gradient(60% 50% at 92%  12%, rgba(224,174, 99,.080), transparent 62%),
      radial-gradient(80% 60% at 50% 100%, rgba(139, 92,246,.060), transparent 65%);
    --wb-elev:        0 1px 2px rgba(0,0,0,.50), 0 10px 26px -12px rgba(0,0,0,.62);
    --wb-elev-hover:  0 2px 5px rgba(0,0,0,.55), 0 20px 42px -16px rgba(0,0,0,.74);
    --wb-shadow-sm:   0 1px 3px rgba(0,0,0,.50);
    --wb-shadow-md:   0 6px 18px -6px rgba(0,0,0,.60);
    --wb-shadow-lg:   0 20px 42px -16px rgba(0,0,0,.74);
  }
}



/* ══════════════════════════════════════════════════════════════════
   신규 스킨 2차 (2026-08-14) — 표면이 아니라 **리듬**으로 갈린다.
   glass 만 신규 토큰 2개(--wb-blur · --wb-chrome-bg)를 쓰고 나머지 셋은 **0개**다 —
   모션(--wb-d-*·--wb-stagger)·밀도(--wb-section·--wb-pad)·모서리는 이미 :root 에 있고
   :root[data-skin=X](0,2,0)가 :root(0,1,0)를 이긴다.
   ══════════════════════════════════════════════════════════════════ */

/* ── glass — 글라스 (유리 크롬)
   라이트: ink/ground 17.42 · muted/ground 5.37 · brand/ground 5.27 · brand-ink/brand 5.74
   다크:   ink/ground 17.06 · muted/ground 6.62 · brand/ground 9.65 · brand-ink/brand 9.65
   상대휘도 공식 실측 — 10항목 × 라이트/다크 = 20항목 전 항목 통과.
   10짝 전수(라이트/다크): ink 17.42/17.06 · ink-2 10.83/12.38 · muted 5.37/6.62 ·
   brand 5.27/9.65 · brand-ink 5.74/9.65 · ink/surface 18.98/15.58 ·
   muted/surface 5.85/6.04 · muted/surface-alt 4.91/5.60 · muted/brand-soft 4.70/5.24 ·
   brand/brand-soft 4.61/7.64.
   ★ 유리 크롬 위 텍스트는 정적 팔레트로 안 잡힌다 — 알파 합성으로 따로 검산했다.
     `.nav-bar` 위 글자는 전부 --wb-ink-2 이므로 그 기준, 아래가 순검정/순백이라는 이론상 최악:
       .72 → 라이트 #B8B8B8 위 5.95 / 다크 #595958 위 4.47 **미달**
       .76 → 라이트 #C2C2C2 위 6.62 / 다크 #504F4F 위 5.21 통과  ← 채택값
     평상시(아래가 자기 ground): 라이트 11.59 / 다크 11.63.
     같은 최악 지점에서 ink 는 10.66/7.17 로 살고, brand 는 라이트 3.22 로 죽는다 —
     **유리 크롬 안에 맨 --wb-brand 글자를 넣지 마라**(정지 상태는 안 넣고, 호버가 brand 를
     쓰는 자리(.nav-menu__link·.nav-d-chip)는 brand-soft 불투명 지반을 함께 깐다 — 2026-08-24).
   보정 이력: 참조 §2 프리미엄 뷰티 브랜드 행 accent 골드 #A16207 → #8A6A12
              (흰 글자 대비를 4.5 통과선까지 내렸다 → 5.06)
              → #7F6211 (brand-soft 위 4.06 미달 → 4.61. 12종 중 유일하게 6% 넘게 밝혀야 했던
                brand-soft 는 흰 표면과 1.12 까지 붙어 틴트가 사라지므로 accent 를 내렸다.
                흰 글자 5.74 · ground 5.27 로 함께 올랐다)
   인격은 색이 아니라 축에 있다 — 고정 크롬이 유리가 되고(12종 중 유일한 backdrop-filter),
   밀도는 12종 최조밀(section 96px · stagger 70ms). 8종은 전부 넓어지는 쪽으로만 갔다. */
:root[data-skin="glass"] {
  --wb-ground:       #F6F5F3;
  --wb-surface:      #FFFFFF;
  --wb-surface-alt:  #EDEBE7;
  --wb-rule:         #E0DDD7;
  --wb-rule-strong:  #C7C2B8;
  --wb-ink:          #12100E;
  --wb-ink-2:        #3B3733;
  --wb-muted:        #6A645C;
  --wb-brand:        #7F6211;
  --wb-brand-ink:    #FFFFFF;
  --wb-brand-soft:   #EFE6CC;
  /* 배지 — 골드 뉴트럴에 맞춘 올리브/러스트 */
  --wb-ok: #57651A; --wb-ok-soft: #E9EDCF;
  --wb-warn: #A2401C; --wb-warn-soft: #F7E3D8;
  /* 타이포 — Noto Serif KR 600 예산 -0.008em. atelier·noir·aurora 와 같은 가변 파일, 추가 0바이트 */
  --wb-font-display: 'Noto Serif KR', 'Pretendard Variable', Pretendard, serif;
  --wb-display-weight: 600;
  --wb-display-spacing: -0.008em;
  --wb-r-sm: 2px;
  --wb-r-md: 4px;
  --wb-r-lg: 6px;
  --wb-ease: cubic-bezier(.32, .72, 0, 1);
  --wb-d-reveal: 560ms;
  /* ★ 인격의 실체. 두 토큰은 nav 의 `.nav-bar`·`.nav-c-plate`·`.nav-e-dock` 이 읽는다 —
     nav 5/5 유리 크롬(2026-08-24 c·e 합류. c 는 스크롤/호버 시 플레이트가, e 는 하단 도크가 유리.
     기본값 surface/none 이라 타 스킨 렌더 불변).
     color-mix 를 쓰지 않는다: 미지원 브라우저에서 선언이 살아남아 치환 후 무효가 되고
     background 가 transparent 로 unset 된다(var() 폴백은 '선언 없음'에만 발동). */
  --wb-blur:      saturate(1.6) blur(14px);
  --wb-chrome-bg: rgba(255, 255, 255, .76);
  --wb-shadow-sm: 0 1px 2px rgba(18,16,14,.06);
  --wb-shadow-md: 0 8px 24px -10px rgba(18,16,14,.20);
  --wb-shadow-lg: 0 24px 48px -20px rgba(18,16,14,.30);
  --wb-d-hover: 220ms;
  --wb-d-card: 260ms;
  --wb-stagger: 70ms;
  --wb-section: clamp(52px, 8vw, 96px);   /* 12종 중 최조밀 (foundation 104 · soft 120 · aurora 128 · mist 132) */
  /* --wb-elev 는 일부러 선언하지 않는다 — 깊이를 카드가 아니라 크롬에서 만든다.
     foundation 기본값(elev:none / elev-hover:var(--wb-shadow-lg))이 그대로 산다. */
}
/* 다크 2벌 — 내용 동일. :root[data-skin] 은 foundation 의 @media dark 블록과 특이도가 같고(0,2,0)
   이 파일이 뒤에 실리므로 이겨버린다. 빠뜨리면 다크에서 라이트용 흰 유리(rgba(255,255,255,.76))가 그대로 나와 크롬이 하얗게 뜬다. */
:root[data-skin="glass"][data-theme="dark"] {
  --wb-ground:      #0E0D0C;
  --wb-surface:     #191817;
  --wb-surface-alt: #211F1D;
  --wb-rule:        #302E2A;
  --wb-rule-strong: #45423C;
  --wb-ink:         #F2F0EC;
  --wb-ink-2:       #D2CEC7;
  --wb-muted:       #9C968C;
  --wb-brand:       #D8B25A;
  --wb-brand-ink:   #0E0D0C;
  --wb-brand-soft:  #2B2415;
  --wb-ok: #B7C670; --wb-ok-soft: #24280F;
  --wb-warn: #E89B6E; --wb-warn-soft: #33200F;
  --wb-blur:        saturate(1.6) blur(14px);
  --wb-chrome-bg:   rgba(25, 24, 23, .76);
  --wb-shadow-sm:   0 1px 2px rgba(0,0,0,.45);
  --wb-shadow-md:   0 8px 24px -10px rgba(0,0,0,.60);
  --wb-shadow-lg:   0 24px 48px -20px rgba(0,0,0,.75);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="glass"]:not([data-theme="light"]) {
    --wb-ground:      #0E0D0C;
    --wb-surface:     #191817;
    --wb-surface-alt: #211F1D;
    --wb-rule:        #302E2A;
    --wb-rule-strong: #45423C;
    --wb-ink:         #F2F0EC;
    --wb-ink-2:       #D2CEC7;
    --wb-muted:       #9C968C;
    --wb-brand:       #D8B25A;
    --wb-brand-ink:   #0E0D0C;
    --wb-brand-soft:  #2B2415;
    --wb-ok: #B7C670; --wb-ok-soft: #24280F;
    --wb-warn: #E89B6E; --wb-warn-soft: #33200F;
    --wb-blur:        saturate(1.6) blur(14px);
    --wb-chrome-bg:   rgba(25, 24, 23, .76);
    --wb-shadow-sm:   0 1px 2px rgba(0,0,0,.45);
    --wb-shadow-md:   0 8px 24px -10px rgba(0,0,0,.60);
    --wb-shadow-lg:   0 24px 48px -20px rgba(0,0,0,.75);
  }
}

/* ── swiss — 스위스 (그림자 0 · 순수 무채 · 활자 격자: 깊이를 그림자가 아니라 선과 반전으로 짓는다)
   라이트: ink/ground 21.00 · muted/ground 9.74 · brand/ground 17.93 · brand-ink/brand 17.93
   다크:   ink/ground 20.12 · muted/ground 8.83 · brand/ground 20.12 · brand-ink/brand 20.12
   상대휘도 실측 — 10짝 × 2모드 20항목 전 항목 통과. 최저 여유 6.93(게이트 4.5) — 12종 중 대비 최고.
   10짝 전수(라이트/다크): ink 21.00/20.12 · ink-2 15.13/14.17 · muted 9.74/8.83 ·
   brand 17.93/20.12 · brand-ink 17.93/20.12 · ink/surface 20.12/18.74 ·
   muted/surface 9.33/8.23 · muted/surface-alt 8.55/7.47 · muted/brand-soft 7.95/6.93 ·
   brand/brand-soft 14.63/15.79.
   보정 이력: 없음(0건). 참조 §2 뷰티 스튜디오 행은 순무채(#000/#0C0C0C/#181818/#FAFAFA)라
   원문 색이 게이트를 그대로 통과한다 — 우리가 손댈 이유가 없었다.
   ★ salt 와 색만 다른 게 아니다. 갈리는 축 8개: 그림자 none · surface<ground · pad/max/section
   재정의 · lh 4축 재정의 · stagger 0 · 채도 0 · 700/0em · radius 0. 나란히 놓으면 갈린다. */
:root[data-skin="swiss"] {
  --wb-ground:       #FFFFFF;
  --wb-surface:      #FAFAFA;   /* ★ 의도적으로 ground 보다 어둡다 — 오타로 보고 뒤집지 마라.
                                   그림자가 없으니 이 반전이 깊이를 대신한다(종이에서 파낸 판) */
  --wb-surface-alt:  #F0F0F0;
  --wb-rule:         #C4C4C4;   /* 8종보다 두 단계 진하다 — 선이 구조를 진다 */
  --wb-rule-strong:  #5E5E5E;   /* ★ 더 진하게 올리지 마라. 이 토큰은 배경으로도 4곳에 쓰인다
                                   (gallery-b-dot__i · review-b-pip · price-b-sheet__grip ·
                                   booking-c-hint li::before) — 근검정이면 캐러셀 *비활성* 점이
                                   활성처럼 읽힌다. #5E5E5E 가 그 상한 */
  --wb-ink:          #000000;
  --wb-ink-2:        #262626;
  --wb-muted:        #444444;
  --wb-brand:        #171717;   /* 참조 §3 'single primary only' — 강조색을 안 쓰는 것이 강조다 */
  --wb-brand-ink:    #FFFFFF;
  --wb-brand-soft:   #E8E8E8;
  /* 배지 — 순무채 인격은 배지도 무채다('강조색을 안 쓰는 것이 강조'). 영업중=근검정 강세,
     종료=중회색 약세 — 의미는 색이 아니라 배지 텍스트가 진다(WCAG 1.4.1, foundation .wb-badge 규약) */
  --wb-ok: #171717; --wb-ok-soft: #E8E8E8;
  --wb-warn: #444444; --wb-warn-soft: #F0F0F0;
  /* 타이포 — Pretendard 700, 자간 0em. 예산 700 >= -0.007em 이고 0 은 양수쪽이라 무제한.
     헤딩 자간 0em 은 8종(전부 -0.005 ~ -0.025) 중 유일. 웹폰트 추가 0바이트 */
  --wb-font-display: 'Pretendard Variable', Pretendard, sans-serif;
  --wb-display-weight: 700;
  --wb-display-spacing: 0em;
  /* ↓ 활자 격자 — 8종이 한 번도 안 건드린 4축(mist 의 lh-read 만 예외).
     파셜 도달 lh-read 33곳 · lh-ui 11곳 */
  --wb-ls-head:  0em;
  --wb-lh-tight: 1.15;
  --wb-lh-ui:    1.40;
  --wb-lh-read:  1.55;
  --wb-r-sm: 0px;
  --wb-r-md: 0px;
  --wb-r-lg: 0px;
  --wb-ease: cubic-bezier(.3, 0, .1, 1);
  --wb-d-reveal: 420ms;         /* 12종 최단(다음이 salt 480) */
  /* ↓ 인격의 실체 — 그림자를 끈다. 12종 중 유일.
     --wb-shadow-* 도달 33곳이 전부 box-shadow 속성이라 none 이 안전함을 전수 확인.
     .wb-card:hover 는 translateY(-4px) + border-color 만으로 반응한다 */
  --wb-shadow-sm: none;
  --wb-shadow-md: none;
  --wb-shadow-lg: none;
  --wb-elev:       none;        /* foundation 기본값과 같지만 의도를 명시한다 */
  --wb-elev-hover: none;        /* 이걸 빼면 카드 호버에서 foundation shadow-lg 가 되살아난다 */
  --wb-d-hover: 230ms;          /* 참조 §3 'Subtle hover (200-250ms)' */
  --wb-d-card: 200ms;
  --wb-d-lift: 130ms;
  --wb-stagger: 0ms;            /* 격자는 순차 등장하지 않고 한 번에 선다 — 12종 유일 */
  --wb-section: clamp(48px, 7vw, 88px);
  --wb-pad: clamp(20px, 3vw, 32px);   /* 참조 §3 '--spacing: 2rem' */
  --wb-max: 1320px;             /* ★ 12종 중 유일하게 레이아웃 폭을 바꾼다.
                                   히어로·갤러리 그리드가 넓어지므로 1440 이상에서 눈으로 볼 것 */
}
/* 다크 2벌 필수 — 그림자를 none 으로 재정의하는 스킨이라 다크 블록을 빠뜨리면
   foundation 의 검은 그림자가 되살아나 라이트와 인격이 갈린다.
   색은 참조 §2 뷰티 스튜디오 행 원문 그대로(background/card/muted/foreground). */
:root[data-skin="swiss"][data-theme="dark"] {
  --wb-ground:      #000000;
  --wb-surface:     #0C0C0C;
  --wb-surface-alt: #181818;
  --wb-rule:        #3A3A3A;
  --wb-rule-strong: #6E6E6E;
  --wb-ink:         #FAFAFA;
  --wb-ink-2:       #D4D4D4;
  --wb-muted:       #A8A8A8;
  --wb-brand:       #FAFAFA;
  --wb-brand-ink:   #000000;
  --wb-brand-soft:  #1F1F1F;
  --wb-ok: #FAFAFA; --wb-ok-soft: #1F1F1F;
  --wb-warn: #A8A8A8; --wb-warn-soft: #181818;
  --wb-shadow-sm: none;
  --wb-shadow-md: none;
  --wb-shadow-lg: none;
  --wb-elev:       none;
  --wb-elev-hover: none;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="swiss"]:not([data-theme="light"]) {
    --wb-ground:      #000000;
    --wb-surface:     #0C0C0C;
    --wb-surface-alt: #181818;
    --wb-rule:        #3A3A3A;
    --wb-rule-strong: #6E6E6E;
    --wb-ink:         #FAFAFA;
    --wb-ink-2:       #D4D4D4;
    --wb-muted:       #A8A8A8;
    --wb-brand:       #FAFAFA;
    --wb-brand-ink:   #000000;
    --wb-brand-soft:  #1F1F1F;
    --wb-ok: #FAFAFA; --wb-ok-soft: #1F1F1F;
    --wb-warn: #A8A8A8; --wb-warn-soft: #181818;
    --wb-shadow-sm: none;
    --wb-shadow-md: none;
    --wb-shadow-lg: none;
    --wb-elev:       none;
    --wb-elev-hover: none;
  }
}

/* ── micro — 마이크로 (즉답형: 갈리는 축이 색이 아니라 **시간**이다)
   라이트: ink/ground 13.98 · muted/ground 6.16 · brand/ground 5.58 · brand-ink/brand 5.93
   다크:   ink/ground 16.60 · muted/ground 7.44 · brand/ground 9.24 · brand-ink/brand 9.24
   상대휘도 공식 실측 — 10짝 × 2테마 20항목 전 항목 통과. 최저 여유 4.99(게이트 4.5).
   10짝 전수(라이트/다크): ink 13.98/16.60 · ink-2 9.13/12.58 · muted 6.16/7.44 ·
   brand 5.58/9.24 · brand-ink 5.93/9.24 · ink/surface 14.86/15.22 ·
   muted/surface 6.55/6.82 · muted/surface-alt 5.68/6.24 · muted/brand-soft 5.51/5.45 ·
   brand/brand-soft 4.99/6.77.
   보정 이력: 참조 §2 치과(미용치과) 행 primary #0EA5E9 → #0369A1
              (원문 지반 #F0F9FF 대비 2.60 으로 brand/ground 3 게이트 탈락 → 5.58, 흰 글자와 5.93)
              같은 행 muted #64748B → #47616F (surface-alt 대비 4.13 탈락 → 5.68)
   인격: `--wb-d-hover: 90ms` 는 HTML 파셜 **105곳**이 참조한다(전 토큰 최다) —
   링크·칩·아코디언·내비·버튼의 반응 속도가 이 한 값으로 동시에 바뀐다.
   기존 8종 + foundation 중 6축(hover/lift/press/card/stagger/reveal) 전부 최소값이다
   (hover: foundation 200 · mist 180 · aurora 240 · soft 260 → micro 90).
   `--wb-elev-hover` 는 5종(atelier·blush·salt·noir·sage)이 미선언이라 foundation 의
   shadow-lg 를 쓰고, soft/mist/aurora 는 리터럴로 더 **깊게** 잡았다.
   micro 만 shadow-md 로 더 **얕게** 잡는다 — 빠르되 과장 없는 호버. 신규 토큰 0 · 애니메이션 0 · JS 0줄.
   `--wb-elev` 미선언 = 정지상태는 평평(부양은 soft/mist/aurora 몫).
   `--wb-section`/`--wb-pad` 미선언 = 밀도는 안 건드린다(공간이 아니라 시간이 인격이라).
   90ms 는 사실상 '즉시'로 읽히지만 foundation.css 의 prefers-reduced-motion 전역 방어가
   이미 1ms 로 눌러 준다 — 추가 조치 불필요. */
:root[data-skin="micro"] {
  --wb-ground:       #F2F9FD;
  --wb-surface:      #FFFFFF;
  --wb-surface-alt:  #E3F1FA;
  --wb-rule:         #C9E4F5;
  --wb-rule-strong:  #93C6E6;
  --wb-ink:          #0B2A3D;
  --wb-ink-2:        #24485E;
  --wb-muted:        #47616F;
  --wb-brand:        #0369A1;
  --wb-brand-ink:    #FFFFFF;
  --wb-brand-soft:   #DDEEF9;
  /* 배지 — 스카이 블루에 맞춘 틸/보색 앰버 */
  --wb-ok: #087163; --wb-ok-soft: #D9F2EE;
  --wb-warn: #A44D0B; --wb-warn-soft: #FBE9D4;
  /* 타이포 — Pretendard 600 예산 -0.012em 안쪽(-0.010em). 웹폰트 추가 0바이트 */
  --wb-font-display: 'Pretendard Variable', Pretendard, sans-serif;
  --wb-display-weight: 600;
  --wb-display-spacing: -0.010em;
  --wb-r-sm: 6px;
  --wb-r-md: 6px;
  --wb-r-lg: 6px;
  --wb-ease: cubic-bezier(.25, .9, .25, 1);
  /* ↓ 인격의 실체 — 참조 §3 Micro-interactions 의 '50-100ms' 를 hover/press 에 그대로 적용 */
  --wb-d-reveal: 380ms;
  --wb-d-hover: 90ms;
  --wb-d-card: 140ms;
  --wb-d-lift: 70ms;
  --wb-d-press: 50ms;
  --wb-stagger: 40ms;
  --wb-elev-hover: var(--wb-shadow-md);   /* foundation 기본 shadow-lg 보다 얕은 들림 */
}
/* 다크 2벌 — 내용 동일. 이 스킨은 그림자 **리터럴**을 쓰지 않으므로
   --wb-elev-hover: var(--wb-shadow-md) 가 foundation 의 다크 shadow-md 를 자동 추종한다.
   그래서 다크 블록은 색 11개만 담는다 — 그림자·듀레이션은 라이트 블록이 그대로 산다. */
:root[data-skin="micro"][data-theme="dark"] {
  --wb-ground:      #0A1219;
  --wb-surface:     #101C25;
  --wb-surface-alt: #16242F;
  --wb-rule:        #22333F;
  --wb-rule-strong: #334756;
  --wb-ink:         #E8F2F8;
  --wb-ink-2:       #C2D6E2;
  --wb-muted:       #8FA6B4;
  --wb-brand:       #5FC0F0;
  --wb-brand-ink:   #0A1219;
  --wb-brand-soft:  #12303F;
  --wb-ok: #4FD2BC; --wb-ok-soft: #0E312C;
  --wb-warn: #F0A45C; --wb-warn-soft: #33230E;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="micro"]:not([data-theme="light"]) {
    --wb-ground:      #0A1219;
    --wb-surface:     #101C25;
    --wb-surface-alt: #16242F;
    --wb-rule:        #22333F;
    --wb-rule-strong: #334756;
    --wb-ink:         #E8F2F8;
    --wb-ink-2:       #C2D6E2;
    --wb-muted:       #8FA6B4;
    --wb-brand:       #5FC0F0;
    --wb-brand-ink:   #0A1219;
    --wb-brand-soft:  #12303F;
    --wb-ok: #4FD2BC; --wb-ok-soft: #0E312C;
    --wb-warn: #F0A45C; --wb-warn-soft: #33230E;
  }
}

/* ── kinetic — 키네틱 (한 줄씩 늦게 도착하는 페이지)
   라이트: ink/ground 15.43 · muted/ground 7.02 · brand/ground 5.43 · brand-ink/brand 5.71
   다크:   ink/ground 16.28 · muted/ground 6.44 · brand/ground 8.26 · brand-ink/brand 8.26
   상대휘도 공식 실측 — 10짝 × 2벌 20항목 전수 통과. 최저 여유 4.67(라이트 brand/brand-soft, 게이트 4.5).
   나머지(라이트/다크): ink-2/ground 10.68/11.66 · ink/surface 16.22/15.10 ·
   muted/surface 7.39/5.98 · muted/surface-alt 6.37/5.58 · muted/brand-soft 6.04/5.13 ·
   brand/brand-soft 4.67/6.58.
   보정 이력: 참조 §2 필라테스·요가원 행 primary #F97316 → #B4400C
              (흰 글자 2.71 로 brand-ink 게이트 탈락 → 5.71. hue 유지, 명도만 하강.
               참조 §1 미용실·네일 금지 'Bright neon colors' 도 같이 피한다 — 구운 흙색이다)
             같은 행 background #1F2937(쿨 슬레이트)은 오렌지와 hue 가 어긋나 다크 지반을 웜 #14100D 으로 재추출.
             같은 행 muted #64748B ground 대비 미달 → 웜 브라운 #7A4A2C (7.02).
   인격은 색이 아니라 **시간**이다 — micro 의 정반대 끝. 12종 최장 5축(reveal 900 · stagger 160 ·
   card 400 · hover 320 · lift 260)에 12종 최대 여백(section 144)·최대 들림(elev-hover 28px).
   stagger 160ms × 카드 6장 = 마지막이 첫 카드보다 0.8초 늦게 도착한다 — 밴드가 '뜨는' 게 아니라 '흘러 든다'.
   --wb-elev 는 선언하지 않는다: 정지상태는 평평하고 **움직일 때만** 깊어진다(부양은 soft/mist/aurora 몫).
   신규 애니메이션 0 · JS 0줄 · 신규 토큰 0 · 웹폰트 0바이트. 패럴랙스 없음(1차 명세 기각 유지 —
   components-nailshop/about.html 이 will-change 를 금지하고, 리빌·스태거는 foundation.css:230-236 에 이미 있다). */
:root[data-skin="kinetic"] {
  --wb-ground:       #FFF8F3;
  --wb-surface:      #FFFFFF;
  --wb-surface-alt:  #FDEBDD;
  --wb-rule:         #F7D8C1;
  --wb-rule-strong:  #E8B58C;
  --wb-ink:          #35190A;
  --wb-ink-2:        #5A3018;
  --wb-muted:        #7A4A2C;
  --wb-brand:        #B4400C;
  --wb-brand-ink:    #FFFFFF;
  --wb-brand-soft:   #FCE4D2;
  /* 배지 — 브랜드가 이미 주황이라 경고는 앰버로 갈라 세운다. 성공은 웜 올리브 */
  --wb-ok: #52691B; --wb-ok-soft: #E7EDD2;
  --wb-warn: #8F5606; --wb-warn-soft: #F7E8CE;
  /* 타이포 — Pretendard 700 예산 -0.007em. -0.005em 로 여유를 남겼다. 웹폰트 추가 0바이트 */
  --wb-font-display: 'Pretendard Variable', Pretendard, sans-serif;
  --wb-display-weight: 700;
  --wb-display-spacing: -0.005em;
  --wb-r-sm: 4px;
  --wb-r-md: 8px;
  --wb-r-lg: 8px;
  --wb-ease: cubic-bezier(.19, .9, .22, 1);
  /* ↓ 인격의 실체 — 12종 최장. 참조 §3 Motion-Driven 'hover 300-400ms' 지시의 하단을 잡았다.
     사장님이 '굼뜨다'고 하면 hover 는 280ms 까지 내려도 범위 밖이 아니다(260 은 soft 와 겹친다).
     stagger 는 gallery 13노드에서 마지막 카드가 2초 뒤 도착 — 길면 130ms(120 은 mist 와 겹친다).
     ★ 판정은 브라우저 페인이 표시된 상태에서만 — CLAUDE.md §4-6, 리빌 스킨이라 가장 잘 당하는 자리다. */
  --wb-d-reveal: 900ms;
  --wb-d-hover: 320ms;
  --wb-d-card: 400ms;
  --wb-d-lift: 260ms;
  --wb-d-press: 110ms;
  --wb-stagger: 160ms;
  /* 느린 등장은 넓은 무대를 요구한다. 둘 다 12종 유일값 */
  --wb-section: clamp(80px, 12vw, 144px);
  --wb-lh-read: 1.75;
  --wb-shadow-sm: 0 1px 3px rgba(53,25,10,.07);
  --wb-shadow-md: 0 10px 26px -10px rgba(53,25,10,.18);
  --wb-shadow-lg: 0 22px 48px -18px rgba(53,25,10,.28);
  --wb-elev-hover: 0 4px 8px -2px rgba(53,25,10,.10), 0 28px 56px -20px rgba(53,25,10,.34);
}
/* 다크 2벌 — 내용 동일. 그림자가 웜 브라운 **리터럴**이라 빠뜨리면 다크에서 라이트용 갈색 그림자가 그대로 나온다 */
:root[data-skin="kinetic"][data-theme="dark"] {
  --wb-ground:      #14100D;
  --wb-surface:     #1E1814;
  --wb-surface-alt: #261E18;
  --wb-rule:        #33281F;
  --wb-rule-strong: #4A3A2C;
  --wb-ink:         #F7ECE3;
  --wb-ink-2:       #DEC7B4;
  --wb-muted:       #AF9179;
  --wb-brand:       #F5934F;
  --wb-brand-ink:   #14100D;
  --wb-brand-soft:  #38210F;
  --wb-ok: #AECB6F; --wb-ok-soft: #2A2E12;
  --wb-warn: #E3B25C; --wb-warn-soft: #322708;
  --wb-shadow-sm: 0 1px 3px rgba(0,0,0,.50);
  --wb-shadow-md: 0 10px 26px -10px rgba(0,0,0,.62);
  --wb-shadow-lg: 0 22px 48px -18px rgba(0,0,0,.74);
  --wb-elev-hover: 0 4px 8px -2px rgba(0,0,0,.55), 0 28px 56px -20px rgba(0,0,0,.78);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="kinetic"]:not([data-theme="light"]) {
    --wb-ground:      #14100D;
    --wb-surface:     #1E1814;
    --wb-surface-alt: #261E18;
    --wb-rule:        #33281F;
    --wb-rule-strong: #4A3A2C;
    --wb-ink:         #F7ECE3;
    --wb-ink-2:       #DEC7B4;
    --wb-muted:       #AF9179;
    --wb-brand:       #F5934F;
    --wb-brand-ink:   #14100D;
    --wb-brand-soft:  #38210F;
    --wb-ok: #AECB6F; --wb-ok-soft: #2A2E12;
    --wb-warn: #E3B25C; --wb-warn-soft: #322708;
    --wb-shadow-sm: 0 1px 3px rgba(0,0,0,.50);
    --wb-shadow-md: 0 10px 26px -10px rgba(0,0,0,.62);
    --wb-shadow-lg: 0 22px 48px -18px rgba(0,0,0,.74);
    --wb-elev-hover: 0 4px 8px -2px rgba(0,0,0,.55), 0 28px 56px -20px rgba(0,0,0,.78);
  }
}

/* ── 특칙 ── */
/* sage: Gowun Dodum 단일 웨이트 — 브라우저 가짜 볼드 합성 방지 */
:root[data-skin="sage"] { font-synthesis: none; }

/* Nail design families: composition tokens and scoped shared sections. */
:root[data-skin="folio"] {
  --wb-ground: #F8F9F7;
  --wb-surface: #FFFFFF;
  --wb-surface-alt: #ECEFE9;
  --wb-rule: #CCD3CA;
  --wb-rule-strong: #526458;
  --wb-ink: #17251D;
  --wb-ink-2: #3E5044;
  --wb-muted: #526058;
  --wb-brand: #254D35;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #E3EBDD;
  --wb-ok: #35623D;
  --wb-ok-soft: #E2EDDE;
  --wb-warn: #875228;
  --wb-warn-soft: #F1E5D7;
  --wb-font-latin: 'Cormorant Garamond', serif;
  --wb-font-display: 'Noto Serif KR', 'Pretendard Variable', Pretendard, serif;
  --wb-display-weight: 400;
  --wb-display-spacing: -0.045em;
  --wb-max: 1480px;
  --wb-pad: clamp(20px, 5vw, 88px);
  --wb-section: clamp(64px, 9vw, 152px);
  --wb-r-sm: 0px;
  --wb-r-md: 0px;
  --wb-r-lg: 0px;
  --wb-shadow-sm: none;
  --wb-shadow-md: none;
  --wb-shadow-lg: none;
  --wb-elev: none;
  --wb-elev-hover: none;
  --wb-d-hover: 240ms;
}
:root[data-skin="folio"][data-theme="dark"] {
  --wb-ground: #101C15;
  --wb-surface: #17251D;
  --wb-surface-alt: #203025;
  --wb-rule: #405648;
  --wb-rule-strong: #82968A;
  --wb-ink: #EFF3EC;
  --wb-ink-2: #CAD7CC;
  --wb-muted: #AABBAF;
  --wb-brand: #B9D4B2;
  --wb-brand-ink: #16251B;
  --wb-brand-soft: #203A28;
  --wb-ok: #B9D4B2;
  --wb-ok-soft: #203A28;
  --wb-warn: #E1BB94;
  --wb-warn-soft: #392D20;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="folio"]:not([data-theme="light"]) {
    --wb-ground: #101C15;
    --wb-surface: #17251D;
    --wb-surface-alt: #203025;
    --wb-rule: #405648;
    --wb-rule-strong: #82968A;
    --wb-ink: #EFF3EC;
    --wb-ink-2: #CAD7CC;
    --wb-muted: #AABBAF;
    --wb-brand: #B9D4B2;
    --wb-brand-ink: #16251B;
    --wb-brand-soft: #203A28;
    --wb-ok: #B9D4B2;
    --wb-ok-soft: #203A28;
    --wb-warn: #E1BB94;
    --wb-warn-soft: #392D20;
  }
}
:root[data-skin="poster"] {
  --wb-ground: #F5F5EF;
  --wb-surface: #FFFFFF;
  --wb-surface-alt: #DEE5FC;
  --wb-rule: #677AAE;
  --wb-rule-strong: #18357E;
  --wb-ink: #101F58;
  --wb-ink-2: #2E3E71;
  --wb-muted: #485580;
  --wb-brand: #173BB5;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #DCE4FF;
  --wb-ok: #31583A;
  --wb-ok-soft: #DDEDDD;
  --wb-warn: #81441D;
  --wb-warn-soft: #F4E3D1;
  --wb-font-latin: var(--wb-font);
  --wb-font-display: var(--wb-font);
  --wb-display-weight: 700;
  --wb-display-spacing: -0.055em;
  --wb-max: 1680px;
  --wb-pad: clamp(18px, 3vw, 56px);
  --wb-section: clamp(48px, 6vw, 100px);
  --wb-r-sm: 0px;
  --wb-r-md: 0px;
  --wb-r-lg: 0px;
  --wb-shadow-sm: none;
  --wb-shadow-md: none;
  --wb-shadow-lg: none;
  --wb-elev: none;
  --wb-elev-hover: none;
  --wb-d-hover: 180ms;
}
:root[data-skin="poster"][data-theme="dark"] {
  --wb-ground: #11182D;
  --wb-surface: #17213D;
  --wb-surface-alt: #202F52;
  --wb-rule: #495E91;
  --wb-rule-strong: #93A6E3;
  --wb-ink: #F4F5FF;
  --wb-ink-2: #CCD6F4;
  --wb-muted: #B1BFE8;
  --wb-brand: #B9C9FF;
  --wb-brand-ink: #112462;
  --wb-brand-soft: #273762;
  --wb-ok: #BDD8C0;
  --wb-ok-soft: #22382B;
  --wb-warn: #FFD294;
  --wb-warn-soft: #493318;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="poster"]:not([data-theme="light"]) {
    --wb-ground: #11182D;
    --wb-surface: #17213D;
    --wb-surface-alt: #202F52;
    --wb-rule: #495E91;
    --wb-rule-strong: #93A6E3;
    --wb-ink: #F4F5FF;
    --wb-ink-2: #CCD6F4;
    --wb-muted: #B1BFE8;
    --wb-brand: #B9C9FF;
    --wb-brand-ink: #112462;
    --wb-brand-soft: #273762;
    --wb-ok: #BDD8C0;
    --wb-ok-soft: #22382B;
    --wb-warn: #FFD294;
    --wb-warn-soft: #493318;
  }
}
:root[data-skin="exhibit"] {
  --wb-ground: #F7F7F5;
  --wb-surface: #FFFFFF;
  --wb-surface-alt: #E8E8E4;
  --wb-rule: #C8CAC5;
  --wb-rule-strong: #424B44;
  --wb-ink: #151A16;
  --wb-ink-2: #424B44;
  --wb-muted: #515D52;
  --wb-brand: #344D3A;
  --wb-brand-ink: #FFFFFF;
  --wb-brand-soft: #E1E8DD;
  --wb-ok: #35623D;
  --wb-ok-soft: #E2EDDE;
  --wb-warn: #875228;
  --wb-warn-soft: #F1E5D7;
  --wb-font-latin: var(--wb-font);
  --wb-font-display: var(--wb-font);
  --wb-display-weight: 400;
  --wb-display-spacing: -0.04em;
  --wb-max: 1560px;
  --wb-pad: clamp(20px, 4vw, 76px);
  --wb-section: clamp(64px, 8vw, 128px);
  --wb-r-sm: 0px;
  --wb-r-md: 0px;
  --wb-r-lg: 0px;
  --wb-shadow-sm: none;
  --wb-shadow-md: none;
  --wb-shadow-lg: none;
  --wb-elev: none;
  --wb-elev-hover: none;
  --wb-d-hover: 280ms;
}
:root[data-skin="exhibit"][data-theme="dark"] {
  --wb-ground: #101211;
  --wb-surface: #181B19;
  --wb-surface-alt: #222723;
  --wb-rule: #353C36;
  --wb-rule-strong: #879189;
  --wb-ink: #F0F2EF;
  --wb-ink-2: #CBD2CA;
  --wb-muted: #A9B6AB;
  --wb-brand: #CBDEC0;
  --wb-brand-ink: #16211A;
  --wb-brand-soft: #2A372B;
  --wb-ok: #B9D4B2;
  --wb-ok-soft: #223322;
  --wb-warn: #EBC29B;
  --wb-warn-soft: #3B2C1F;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="exhibit"]:not([data-theme="light"]) {
    --wb-ground: #101211;
    --wb-surface: #181B19;
    --wb-surface-alt: #222723;
    --wb-rule: #353C36;
    --wb-rule-strong: #879189;
    --wb-ink: #F0F2EF;
    --wb-ink-2: #CBD2CA;
    --wb-muted: #A9B6AB;
    --wb-brand: #CBDEC0;
    --wb-brand-ink: #16211A;
    --wb-brand-soft: #2A372B;
    --wb-ok: #B9D4B2;
    --wb-ok-soft: #223322;
    --wb-warn: #EBC29B;
    --wb-warn-soft: #3B2C1F;
  }
}

/* Shared information follows each family's layout; existing skins never match. */
:root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) .wb-btn { border-radius: var(--wb-r-sm); }
:root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) .nav-bar { box-shadow: none; border-bottom: 1px solid var(--wb-rule); }
:root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) .nav-logo__txt { font-family: var(--wb-font-display); letter-spacing: var(--wb-display-spacing); }
:root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) #c-booking-b .hb-card { box-shadow: none; border-radius: 0; }
:root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) #c-footer-d .footer-d-brand { max-width: 100%; overflow-wrap: anywhere; font-family: var(--wb-font-display); letter-spacing: var(--wb-display-spacing); }
:root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) #c-sns-d .sns-d-list { max-width: none; }
:root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) #c-sns-d .sns-d-row { padding-inline: 0; }
:root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) #c-sns-d .sns-d-badge { border-radius: 0; background: transparent; color: var(--wb-ink); border: 0; }
:root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) #c-sns-d .sns-d-sub { overflow-wrap: anywhere; }

:root[data-skin="folio"] #c-location-a > .wb-container { display: grid; grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
:root[data-skin="folio"] #c-location-a .location-head { margin: 0; }
:root[data-skin="folio"] #c-location-a .location-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:root[data-skin="folio"] #c-location-a .wb-h2 { font-size: clamp(26px, 2.6vw, 42px); }
:root[data-skin="folio"] #c-booking-b { border-top: 1px solid var(--wb-rule); }
:root[data-skin="folio"] #c-booking-b .hb-cols { gap: clamp(32px, 7vw, 112px); grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
:root[data-skin="folio"] #c-booking-b .hb-card { padding: 0; border: 0; background: transparent; }
:root[data-skin="folio"] #c-booking-b .hb-panel .wb-h2 { font-size: clamp(30px, 3.2vw, 50px); line-height: 1.35; }
:root[data-skin="folio"] #c-sns-d { padding-block: clamp(40px, 5vw, 80px); }
:root[data-skin="folio"] #c-sns-d > .wb-container { display: grid; grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
:root[data-skin="folio"] #c-sns-d .sns-d__head .wb-h2 { font-size: clamp(24px, 2.2vw, 36px); }
:root[data-skin="folio"] #c-footer-d { background: var(--wb-surface-alt); padding-block: clamp(48px, 6vw, 96px); }
:root[data-skin="folio"] #c-footer-d .footer-d-brand { font-size: clamp(48px, 10vw, 164px); line-height: 1.15; font-weight: 400; margin-bottom: clamp(32px, 6vw, 80px); }

:root[data-skin="poster"] .nav-logo__txt { font-weight: 700; }
:root[data-skin="poster"] #c-location-a { border-top: 3px solid var(--wb-ink); }
:root[data-skin="poster"] #c-location-a .location-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
:root[data-skin="poster"] #c-location-a .wb-h2 { font-size: clamp(32px, 5vw, 80px); }
:root[data-skin="poster"] #c-location-a .location-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 64px); }
:root[data-skin="poster"] #c-booking-b { background: var(--wb-brand-soft); }
:root[data-skin="poster"] #c-booking-b .hb-cols { gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-block: 3px solid var(--wb-ink); }
:root[data-skin="poster"] #c-booking-b .hb-card { border: 0; background: transparent; padding: clamp(24px, 4vw, 64px); }
:root[data-skin="poster"] #c-booking-b .hb-card + .hb-card { border-left: 1px solid var(--wb-ink); }
:root[data-skin="poster"] #c-booking-b .hb-panel .wb-h2 { font-size: clamp(32px, 4.4vw, 70px); line-height: 1.12; }
:root[data-skin="poster"] #c-sns-d { border-block: 3px solid var(--wb-ink); padding-block: 32px; }
:root[data-skin="poster"] #c-sns-d > .wb-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
:root[data-skin="poster"] #c-sns-d .wb-h2 { font-size: clamp(30px, 4vw, 64px); line-height: 1.15; }
:root[data-skin="poster"] #c-sns-d .sns-d-name { font-size: clamp(20px, 2vw, 30px); font-weight: 700; }
:root[data-skin="poster"] #c-footer-d .footer-d-brand { font-size: clamp(52px, 12vw, 188px); line-height: 1.05; font-weight: 700; margin-bottom: 48px; }

:root[data-skin="exhibit"] .nav-logo__txt { font-size: 18px; letter-spacing: -.02em; }
:root[data-skin="exhibit"] #c-location-a { border-top: 1px solid var(--wb-rule); }
:root[data-skin="exhibit"] #c-location-a .location-head { display: flex; align-items: baseline; gap: clamp(24px, 5vw, 80px); }
:root[data-skin="exhibit"] #c-location-a .wb-h2 { font-size: clamp(24px, 2.4vw, 36px); }
:root[data-skin="exhibit"] #c-location-a .location-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(32px, 5vw, 80px); }
:root[data-skin="exhibit"] #c-booking-b { background: var(--wb-surface-alt); }
:root[data-skin="exhibit"] #c-booking-b .hb-cols { max-width: 1080px; margin-inline: auto; gap: clamp(32px, 6vw, 96px); }
:root[data-skin="exhibit"] #c-booking-b .hb-card { padding: 0; border: 0; background: transparent; }
:root[data-skin="exhibit"] #c-booking-b .hb-panel .wb-h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.3; }
:root[data-skin="exhibit"] #c-sns-d { padding-block: 40px; border-bottom: 1px solid var(--wb-rule); }
:root[data-skin="exhibit"] #c-sns-d > .wb-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
:root[data-skin="exhibit"] #c-sns-d .wb-h2 { font-size: 26px; }
:root[data-skin="exhibit"] #c-footer-d { background: var(--wb-ground); }
:root[data-skin="exhibit"] #c-footer-d .footer-d-brand { font-size: clamp(36px, 5.6vw, 84px); line-height: 1.2; font-weight: 400; margin-bottom: 48px; }

@media (max-width: 900px) {
  :root[data-skin="folio"] #c-location-a > .wb-container,
  :root[data-skin="folio"] #c-sns-d > .wb-container { grid-template-columns: minmax(0, 1fr); }
  :root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) #c-location-a .location-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root:is([data-skin="folio"], [data-skin="poster"], [data-skin="exhibit"]) #c-booking-b .hb-cols,
  :root[data-skin="poster"] #c-sns-d > .wb-container,
  :root[data-skin="exhibit"] #c-sns-d > .wb-container { grid-template-columns: minmax(0, 1fr); }
  :root[data-skin="poster"] #c-booking-b .hb-card { padding: 24px 0; }
  :root[data-skin="poster"] #c-booking-b .hb-card + .hb-card { border-left: 0; border-top: 1px solid var(--wb-ink); }
  :root[data-skin="poster"] #c-location-a .location-head,
  :root[data-skin="exhibit"] #c-location-a .location-head { display: block; }
}

/* Paper and ink stage colors are stable when a new component is selected under another skin. */
:root { --wb-edition-ink: #20192F; --wb-edition-paper: #F7F3EB; --wb-edition-pink: #F2BAD8; --wb-edition-acid: #F5F047; }
:root[data-skin="edition"] {
  --wb-ground: #F7F3EB; --wb-surface: #FFFDF8; --wb-surface-alt: #EDE7DB;
  --wb-rule: #C4BFB6; --wb-rule-strong: #5E5466;
  --wb-ink: #20192F; --wb-ink-2: #514655; --wb-muted: #514655;
  --wb-brand: #20192F; --wb-brand-ink: #F7F3EB; --wb-brand-soft: #F2BAD8;
  --wb-ok: #234D3B; --wb-ok-soft: #E1EDE5; --wb-warn: #70411F; --wb-warn-soft: #F4E8D2;
  --wb-font-display: var(--wb-font); --wb-display-weight: 700; --wb-display-spacing: -.06em;
  --wb-r-sm: 2px; --wb-r-md: 2px; --wb-r-lg: 2px; --wb-r-scene: 16px;
  --wb-pad: clamp(16px, 4vw, 72px); --wb-section-y: clamp(64px, 9vw, 144px);
  --wb-shadow-sm: none; --wb-shadow-md: none; --wb-shadow-lg: none; --wb-elev: none; --wb-elev-hover: none;
}
:root[data-skin="edition"][data-theme="dark"] {
  --wb-ground: #20192F; --wb-surface: #2A223A; --wb-surface-alt: #393044;
  --wb-rule: #645969; --wb-rule-strong: #AEA0B1;
  --wb-ink: #F7F3EB; --wb-ink-2: #E0D5E0; --wb-muted: #BAADBE;
  --wb-brand: #F2BAD8; --wb-brand-ink: #20192F; --wb-brand-soft: #4A3147;
  --wb-ok: #B9D4B2; --wb-ok-soft: #223322; --wb-warn: #EBC29B; --wb-warn-soft: #3B2C1F;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="edition"]:not([data-theme="light"]) {
    --wb-ground: #20192F; --wb-surface: #2A223A; --wb-surface-alt: #393044;
    --wb-rule: #645969; --wb-rule-strong: #AEA0B1;
    --wb-ink: #F7F3EB; --wb-ink-2: #E0D5E0; --wb-muted: #BAADBE;
    --wb-brand: #F2BAD8; --wb-brand-ink: #20192F; --wb-brand-soft: #4A3147;
    --wb-ok: #B9D4B2; --wb-ok-soft: #223322; --wb-warn: #EBC29B; --wb-warn-soft: #3B2C1F;
  }
}
:root[data-skin="edition"] .nav-f-header { max-width: none; padding-block: 8px; border-bottom: 1px solid var(--wb-rule-strong); min-height: 68px; }
:root[data-skin="edition"] .nav-f-logo { font-size: 15px; font-weight: 700; letter-spacing: -.04em; max-width: 70%; }
:root[data-skin="edition"] .nav-f-toggle { font-size: 12px; padding-block: 8px; min-height: 44px; }
:root[data-skin="edition"] #c-about-h { padding-block: clamp(60px, 10vw, 150px); border-top: 1px solid var(--wb-rule-strong); }
:root[data-skin="edition"] #c-about-h .about-h-title { font-size: clamp(48px, 7.5vw, 128px); font-weight: 700; line-height: 1.1; }
:root[data-skin="edition"] #c-review-f { background: var(--wb-brand-soft); border-top: 1px solid var(--wb-rule-strong); }
:root[data-skin="edition"] #c-review-f .review-f-title { font-size: clamp(44px, 7vw, 112px); line-height: 1.15; }
:root[data-skin="edition"] #c-review-f .review-f-item { border-radius: 0; background: var(--wb-ground); box-shadow: none; padding: clamp(24px, 4vw, 56px); margin-bottom: 20px; border: 1px solid var(--wb-rule-strong); }
:root[data-skin="edition"] #c-location-a { border-top: 1px solid var(--wb-rule-strong); }
:root[data-skin="edition"] #c-location-a .location-head .wb-h2 { font-size: clamp(40px, 6vw, 96px); }
:root[data-skin="edition"] #c-location-a .location-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 80px); }
:root[data-skin="edition"] #c-sns-d { border-block: 1px solid var(--wb-rule-strong); padding-block: 32px; }
:root[data-skin="edition"] #c-sns-d > .wb-container { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); gap: 32px; }
:root[data-skin="edition"] #c-sns-d .sns-d__head .wb-h2 { font-size: clamp(28px, 3vw, 44px); }
:root[data-skin="edition"] #c-sns-d .sns-d-list { max-width: none; }
:root[data-skin="edition"] #c-sns-d .sns-d-row { padding-inline: 0; }
:root[data-skin="edition"] #c-footer-d { background: var(--wb-ground); }
:root[data-skin="edition"] #c-footer-d .footer-d-brand { font-size: clamp(48px, 12vw, 210px); font-family: var(--wb-font-display); font-weight: 700; letter-spacing: -.07em; line-height: 1.12; max-width: 100%; overflow-wrap: anywhere; margin-bottom: 48px; }
@media (max-width: 767px) {
  :root[data-skin="edition"] #c-location-a .location-body,
  :root[data-skin="edition"] #c-sns-d > .wb-container { grid-template-columns: minmax(0, 1fr); }
}

/* A deliberate motion override: absent by default, so saved pages keep their behavior. */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }