/* ════════════════════════════════════════════════
   LAYERS DESIGN SYSTEM — TOKENS
   색상, 폰트, 간격을 바꾸려면 이 파일만 수정하세요.
   ════════════════════════════════════════════════ */

:root {

  /* ── 브랜드 원색 (로고 가이드라인 기준) ─── */
  --brand-grey:  #3e3a39;   /* LAYERS_Grey  — Primary ① */
  --brand-green: #38543f;   /* LAYERS_Green — Primary ② */
  --brand-blue:  #202c3f;   /* LAYERS_Blue  — Sub ① */
  --brand-sand:  #beb4a3;   /* LAYERS_Sand  — Sub ② */
  --brand-brown: #443321;   /* LAYERS_Brown — Sub ③ */

  /* ── 배경 색상 ──────────────────────────── */
  --ink:     var(--primary-50);   /* 메인 배경 ← LAYERS_Grey = #3e3a39 */
  --surface: #4a4645;   /* 카드·섹션 배경 (ink +12) */
  --card:    #565251;   /* 카드 내부 배경 (ink +24) */

  /* ── 선 / 구분선 ────────────────────────── */
  --line:      rgba(190,180,163,.15);
  --line-warm: rgba(190,180,163,.15);

  /* ── 텍스트 색상 ────────────────────────── */
  --cream:    #f0ece4;               /* 기본 텍스트 */
  --cream-60: #beb4a3;               /* 서브 텍스트 ← LAYERS_Sand */
  --cream-30: #7a7468;               /* 힌트·레이블 */
  --cream-10: rgba(240,236,228,.10); /* 미세 강조 */

  /* ── Primary Scale — LAYERS_Grey (HSL 12°, 4%, 명도 12단계) ─── */
  --primary-0:   #f8f7f7;   /* L 97% — near-white */
  --primary-5:   #eeedec;   /* L 93% */
  --primary-10:  #dddada;   /* L 86% */
  --primary-20:  #c2bebd;   /* L 75% */
  --primary-30:  #9d9695;   /* L 60% */
  --primary-40:  #726b69;   /* L 43% */
  --primary-50:  #3e3a39;   /* L 23% — LAYERS_Grey 대표색 ★ */
  --primary-60:  #2d2a2a;   /* L 17% */
  --primary-70:  #201e1d;   /* L 12% */
  --primary-80:  #151414;   /* L 8% */
  --primary-90:  #0b0a0a;   /* L 4% */
  --primary-100: #040404;   /* L 1.5% — near-black */

  /* ── Secondary Scale — LAYERS_Green (HSL 135°, 20%, 명도 12단계) ── */
  --secondary-0:   #f6f9f7;   /* L 97% — near-white */
  --secondary-5:   #eaf1eb;   /* L 93% */
  --secondary-10:  #d4e2d8;   /* L 86% */
  --secondary-20:  #b3ccb9;   /* L 75% */
  --secondary-30:  #85ad8f;   /* L 60% */
  --secondary-40:  #588463;   /* L 43% */
  --secondary-50:  #38543f;   /* L 27.5% — LAYERS_Green 대표색 ★ */
  --secondary-60:  #2b4030;   /* L 21% */
  --secondary-70:  #1f2e22;   /* L 15% */
  --secondary-80:  #141f17;   /* L 10% */
  --secondary-90:  #0c120e;   /* L 6% */
  --secondary-100: #040605;   /* L 2% — near-black */

  /* ── UI 포인트 별칭 — 재팬디: 무채색(LAYERS_Grey) ──────── */
  /* 2026-08 재팬디 전환: UI에서 그린을 빼고 브랜드 그레이로 리매핑.
     색은 사진에서만 나오게 한다. 그린으로 되돌리려면 --secondary-* 를 다시 가리키면 됨.
     (--secondary-* 스케일 자체는 브랜드 자산이라 그대로 보존) */
  --gold:      var(--primary-50);    /* = #3e3a39 LAYERS_Grey */
  --gold-lt:   var(--primary-40);    /* = #726b69 */
  --gold-dk:   var(--primary-60);    /* = #2d2a2a */
  /* ⚠️ --gold 는 --ink(#3e3a39)와 값이 같다. 어두운 배경 위에서는 배경에 묻히므로
     반드시 아래 --accent-on-dark 를 쓸 것. (그린이던 시절엔 색상이 달라 구분됐다) */
  --accent-on-dark: var(--cream-60);   /* #beb4a3 LAYERS_Sand — 어두운 면 위 강조 */
  --gold-glow: rgba(62,58,57,.22);   /* 글로우 효과 */
  --gold-50:   rgba(62,58,57,.50);   /* 커서 테두리 */
  --gold-a03:  rgba(62,58,57,.03);
  --gold-a04:  rgba(62,58,57,.04);
  --gold-a05:  rgba(62,58,57,.05);
  --gold-a06:  rgba(62,58,57,.06);
  --gold-a07:  rgba(62,58,57,.07);
  --gold-a08:  rgba(62,58,57,.08);
  --gold-a09:  rgba(62,58,57,.09);
  --gold-a10:  rgba(62,58,57,.10);
  --gold-a12:  rgba(62,58,57,.12);
  --gold-a15:  rgba(62,58,57,.15);
  --gold-a25:  rgba(62,58,57,.25);
  --gold-a30:  rgba(62,58,57,.30);
  --gold-a35:  rgba(62,58,57,.35);

  /* ── Neutral Gray Scale (HSL 0°, 0%, 명도 10단계) ──────────── */
  --gray-0:  #f5f5f5;   /* L 96% — near-white */
  --gray-10: #e0e0e0;   /* L 88% */
  --gray-20: #c7c7c7;   /* L 78% */
  --gray-30: #ababab;   /* L 67% */
  --gray-40: #8f8f8f;   /* L 56% */
  --gray-50: #737373;   /* L 45% */
  --gray-60: #595959;   /* L 35% */
  --gray-70: #404040;   /* L 25% */
  --gray-80: #292929;   /* L 16% */
  --gray-90: #141414;   /* L 8% — near-black */

  /* ── System Color: Danger — HSL(4°, 75%, 명도 10단계) ──────── */
  --danger-0:  #fceeed;   /* L 96% — near-white tint */
  --danger-10: #f7cdc9;   /* L 88% */
  --danger-20: #f1a29d;   /* L 78% */
  --danger-30: #ea746c;   /* L 67% */
  --danger-40: #e3463b;   /* L 56% */
  --danger-50: #c9281d;   /* L 45% — representative ★ */
  --danger-60: #9c1f16;   /* L 35% */
  --danger-70: #701610;   /* L 25% */
  --danger-80: #470e0a;   /* L 16% */
  --danger-90: #240705;   /* L 8%  — near-black shade */

  /* ── System Color: Warning — HSL(35°, 85%, 명도 10단계) ──────── */
  --warning-0:  #fdf6ec;   /* L 96% */
  --warning-10: #fae4c6;   /* L 88% */
  --warning-20: #f7cf97;   /* L 78% */
  --warning-30: #f2b863;   /* L 67% */
  --warning-40: #ee9e2f;   /* L 56% */
  --warning-50: #d48311;   /* L 45% — representative ★ */
  --warning-60: #a5660d;   /* L 35% */
  --warning-70: #764a0a;   /* L 25% */
  --warning-80: #4b2e06;   /* L 16% */
  --warning-90: #261703;   /* L 8% */

  /* ── System Color: Success — HSL(145°, 50%, 명도 10단계) ────── */
  --success-0:  #f0faf5;   /* L 96% */
  --success-10: #d1f0de;   /* L 88% */
  --success-20: #abe3c2;   /* L 78% */
  --success-30: #81d5a3;   /* L 67% */
  --success-40: #57c786;   /* L 56% */
  --success-50: #39ac69;   /* L 45% — representative ★ */
  --success-60: #2d8651;   /* L 35% */
  --success-70: #20603b;   /* L 25% */
  --success-80: #143d25;   /* L 16% */
  --success-90: #0a1f13;   /* L 8% */

  /* ── System Color: Information — HSL(210°, 65%, 명도 10단계) ─── */
  --info-0:  #eef5fb;   /* L 96% */
  --info-10: #cde0f4;   /* L 88% */
  --info-20: #a2c7eb;   /* L 78% */
  --info-30: #74abe2;   /* L 67% */
  --info-40: #468fd8;   /* L 56% */
  --info-50: #2873bd;   /* L 45% — representative ★ */
  --info-60: #1f5993;   /* L 35% */
  --info-70: #164069;   /* L 25% */
  --info-80: #0e2943;   /* L 16% */
  --info-90: #071422;   /* L 8% */

  /* ── 워밍 골드 ──────────────────────────── */
  --warm-gold:      #C9A96E;
  --warm-gold-dk:   #b07848;
  --warm-gold-deep: #8a5c34;
  --warm-gold-13:   rgba(201,169,110,.13);
  --warm-gold-20:   rgba(201,169,110,.20);
  --warm-gold-28:   rgba(201,169,110,.28);
  --warm-gold-50:   rgba(201,169,110,.50);
  --warm-gold-62:   rgba(201,169,110,.62);
  --warm-gold-80:   rgba(201,169,110,.80);
  --warm-gold-92:   rgba(201,169,110,.92);
  --warm-gold-95:   rgba(201,169,110,.95);

  /* ── Alpha Scale — Black (rgba 6단계) ───────── */
  --black-100: rgba(0,0,0,1.00);
  --black-75:  rgba(0,0,0,.75);
  --black-50:  rgba(0,0,0,.50);
  --black-25:  rgba(0,0,0,.25);
  --black-10:  rgba(0,0,0,.10);
  --black-0:   rgba(0,0,0,.00);    /* transparent */

  /* ── Alpha Scale — White (rgba 6단계) ───────── */
  --white-100: rgba(255,255,255,1.00);
  --white-85:  rgba(255,255,255,.85);  /* 사진 위 라벨 판(2026-09-04) */
  --white-75:  rgba(255,255,255,.75);
  --white-50:  rgba(255,255,255,.50);
  --white-25:  rgba(255,255,255,.25);
  --white-10:  rgba(255,255,255,.10);
  --white-0:   rgba(255,255,255,.00);  /* transparent */

  /* ── 오버레이 반투명 ──────────────────────── */
  --ink-97:   rgba(62,58,57,.97);    /* 드롭다운·드로어·모바일메뉴 배경 */
  --ink-72:   rgba(62,58,57,.72);
  --ink-60:   rgba(62,58,57,.60);
  --black-50: rgba(0,0,0,.50);       /* 모바일 오버레이 배경 */
  --black-40: rgba(0,0,0,.40);
  --black-30: rgba(0,0,0,.30);
  --black-45: rgba(0,0,0,.45);
  --black-55: rgba(0,0,0,.55);
  --black-60: rgba(0,0,0,.60);
  --black-82:  rgba(0,0,0,.82);
  --black-04:  rgba(0,0,0,.04);
  --black-055: rgba(0,0,0,.055);
  --black-10:  rgba(0,0,0,.10);
  --white-025: rgba(255,255,255,.025);
  --white-3:  rgba(255,255,255,.03);
  --white-4:  rgba(255,255,255,.04);
  --white-5:  rgba(255,255,255,.05);
  --white-6:  rgba(255,255,255,.06);
  --white-10: rgba(255,255,255,.10);
  --white-22: rgba(255,255,255,.22);
  --warm-92:  rgba(13,11,9,.92);
  --warm-94:  rgba(13,11,9,.94);

  /* ── 배경·텍스트·선 추가 ─────────────────── */
  --bg-black:    #1e1c1b;   /* 최심층 다크 (ink보다 어두움) */
  --bg-dark:     #2e2b2a;   /* 다크 보조 배경 */
  --bg-hero:     #3c3f3c;   /* 히어로 그라디언트 시작점 (그린 틴트) */
  --bg-hero-dk:  #383b38;   /* 히어로 그라디언트 중간점 */
  --cream-muted: #eae6e0;
  --cream-75:    rgba(240,236,228,.75);  /* 크림 반투명 오버레이 75% */
  --cream-98:    rgba(240,236,228,.98);  /* 크림 불투명 배경 98% */
  --line-subtle: rgba(160,156,152,.18);

  /* ── 서브 컬러 확장 ──────────────────────── */
  --blue:       #202c3f;              /* LAYERS_Blue */
  --blue-lt:    #2d3e56;             /* 밝은 블루 */
  --blue-dk:    #151e2a;             /* 어두운 블루 */
  --blue-a20:   rgba(32,44,63,.20);
  --blue-a40:   rgba(32,44,63,.40);
  --brown:      #443321;              /* LAYERS_Brown */
  --brown-lt:   #5c4530;             /* 밝은 브라운 */
  --brown-dk:   #2e221a;             /* 어두운 브라운 */
  --brown-a20:  rgba(68,51,33,.20);

  /* ── 소재색 (construction 전용) ─────────────── */
  --mat-slate: #405878;   /* 슬레이트 블루 */
  --mat-rust:  #6b2e12;   /* 번트 브라운 */

  /* ════════════════════════════════════════════
     SEMANTIC LAYER — 사용 목적별 토큰
     primitive 스케일을 참조해 용도명으로 매핑
     ════════════════════════════════════════════ */

  /* ── 배경 (Background) ────────────────────── */
  --bg-primary:        var(--primary-0);   /* #f8f7f7 — 메인 페이지 배경 */
  --bg-primary-subtle: var(--primary-5);   /* #eeedec — 섹션·구분 배경 */
  --bg-inverse:        var(--primary-50);  /* #3e3a39 — 반전 다크 배경 */
  --bg-dim:            var(--primary-10);  /* #dddada — 흐림·비활성 배경 */

  /* ── 텍스트 (Text) ────────────────────────── */
  /* Neutral */
  --text-bolder:      var(--primary-70);   /* #201e1d — 가장 강한 텍스트·헤딩 */
  --text-basic:       var(--primary-60);   /* #2d2a2a — 기본 본문 */
  --text-subtle:      var(--primary-40);   /* #726b69 — 보조·캡션·힌트 */
  --text-disabled:    var(--primary-30);   /* #9d9695 — 비활성 텍스트 */
  --text-disabled-on: var(--primary-20);   /* #c2bebd — 비활성 배경 위 텍스트 */
  /* Inverse */
  --text-bolder-inverse:  #ffffff;           /* 가장 밝은 역방향 텍스트 */
  --text-basic-inverse:   var(--primary-0);  /* #f8f7f7 — 역방향 기본 텍스트 */
  --text-subtle-inverse:  var(--primary-20); /* #c2bebd — 역방향 보조 텍스트 */
  /* Static */
  --text-static:         var(--primary-60);  /* #2d2a2a — 모드 고정 다크 (다크모드에도 불변) */
  --text-inverse-static: var(--primary-0);   /* #f8f7f7 — 모드 고정 라이트 (다크모드에도 불변) */
  /* Brand */
  --text-primary:   var(--primary-50);    /* #3e3a39 — 프라이머리 브랜드 텍스트 */
  --text-secondary: var(--primary-50);  /* #3e3a39 (재팬디 전환: 그린→그레이) — 세컨더리 브랜드 텍스트·링크 */
  /* System */
  --text-danger:      var(--danger-50);   /* #c9281d */
  --text-warning:     var(--warning-50);  /* #d48311 */
  --text-success:     var(--success-50);  /* #39ac69 */
  --text-information: var(--info-50);     /* #2873bd */

  /* ── 오버레이 (Overlay) ───────────────────── */
  --scrim-light:  rgba(0,0,0,.30);         /* 가벼운 스크림 */
  --scrim-medium: rgba(0,0,0,.50);         /* 일반 모달 스크림 */
  --scrim-heavy:  rgba(62,58,57,.97);      /* 드로어·메뉴 배경 */

  /* ── 히어로 스크림 (재팬디: 라이트 히어로) ────────
     기존 다크 히어로 대비 농도를 약 절반으로 낮춰 사진이 밝게 보이게 한다.
     사진이 밝아 흰 글씨가 안 읽히면 이 4개 값만 올리면 되고,
     다크 히어로로 되돌리려면 주석의 '이전 값'으로 복구한다. */
  --hero-scrim-top:    rgba(0,0,0,.18);   /* 이전: .40 — 상단 nav 가독용 */
  /* 2026-09-01 두 차례 상향(.30/.14/.06 → .36/.32/.10 → .46/.44/.12).
     히어로가 '풀블리드 영상 위 흰 글씨' 구성이라 하단 글씨가 끝까지 영상 위에 남는다.
     2차 상향은 본문이 2행 → 3행(덩어리당)으로 길어지면서 글자가 위로 48px 올라온 탓.
     영상 전 프레임(4fps 48장) 실측 — 그 자리는 AA에 α 0.43이 필요한데 .36/.32로는
     최악 3.40이었다. 아래 값으로 전 구간 통과. 본문을 다시 줄이면 되돌려도 된다. */
  --hero-scrim-btm-1:  rgba(0,0,0,.46);   /* 화면 맨 아래 */
  --hero-scrim-btm-2:  rgba(0,0,0,.44);   /* 26% — 본문 맨 윗줄까지 이 농도를 유지 */
  --hero-scrim-btm-3:  rgba(0,0,0,.12);   /* 55% */

  /* ── 이미지 위 다크 오버레이 (On-image overlay) ── */
  --overlay-dark-35: rgba(0,0,0,.35);   /* 카드 호버 drop-shadow (라이트) */
  --overlay-dark-45: rgba(0,0,0,.45);   /* BEFORE 라벨 배경 */
  --overlay-dark-55: rgba(0,0,0,.55);   /* 카드 호버 drop-shadow */
  --overlay-dark-75: rgba(0,0,0,.75);   /* 시리즈 뱃지 배경 */

  --tint-primary-hover: rgba(62,58,57,.06);   /* 호버 오버레이 */
  --tint-primary-press: rgba(62,58,57,.12);   /* 프레스 오버레이 */
  --tint-brand-hover:   rgba(62,58,57,.08);   /* 브랜드 호버 — 재팬디: 무채색 */
  --tint-brand-press:   rgba(62,58,57,.15);   /* 브랜드 프레스 — 재팬디: 무채색 */
  /* ── 세컨더리 알파 — 뱃지·border 전용 (재팬디: 무채색화) ── */
  --alpha-secondary-10: rgba(62,58,57,.10);   /* 아이콘 호버 배경 */
  --alpha-secondary-30: rgba(62,58,57,.30);   /* 카드 호버 border */
  --alpha-secondary-35: rgba(62,58,57,.35);   /* AFTER 라벨 border */
  --alpha-secondary-50: rgba(62,58,57,.50);   /* AFTER 라벨 배경·시리즈 badge border */

  /* ── 선 (Border) ──────────────────────────── */
  /* Neutral */
  --border-transparency:    var(--black-0);    /* transparent */
  --border-inverse:         var(--primary-0);  /* #f8f7f7 — 어두운 배경 위 선 */
  --border-inverse-opacity50: var(--white-50); /* rgba(255,255,255,.50) */
  --border-disabled:        var(--primary-10); /* #dddada — 비활성 선 */
  /* Gray */
  --border-gray-light: var(--gray-20);  /* #c7c7c7 */
  --border-gray:       var(--gray-40);  /* #8f8f8f */
  /* Primary */
  --border-primary-light:  var(--primary-5);   /* #eeedec */
  --border-primary:        var(--primary-10);  /* #dddada */
  --border-primary-dark:   var(--primary-20);  /* #c2bebd */
  --border-primary-darker: var(--primary-30);  /* #9d9695 */
  /* Secondary */
  --border-secondary-light: var(--secondary-20);  /* #b3ccb9 */
  --border-secondary:       var(--primary-50);  /* #3e3a39 (재팬디 전환: 그린→그레이) */
  /* Danger */
  --border-danger-light: var(--danger-20);  /* #f1a29d */
  --border-danger:       var(--danger-50);  /* #c9281d */
  /* Warning */
  --border-warning-light: var(--warning-20);  /* #f7cf97 */
  --border-warning:       var(--warning-50);  /* #d48311 */
  /* Success */
  --border-success-light: var(--success-20);  /* #abe3c2 */
  --border-success:       var(--success-50);  /* #39ac69 */
  /* Information */
  --border-information-light: var(--info-20);  /* #a2c7eb */
  --border-information:       var(--info-50);  /* #2873bd */

  /* ── 엘리먼트 (Element) ──────────────────── */
  /* Neutral / Inverse */
  --element-inverse:          var(--primary-0);         /* #f8f7f7 — 어두운 배경 위 요소 */
  --element-inverse-opacity50: var(--alpha-inverse-50); /* rgba(255,255,255,.50) */
  --element-black-opacity50:  var(--black-50);          /* rgba(0,0,0,.50) */
  --element-inverse-static:   var(--primary-0);         /* #f8f7f7 — 모드 고정 */
  /* Gray */
  --element-gray-lighter: var(--gray-10);  /* #e0e0e0 */
  --element-gray-light:   var(--gray-20);  /* #c7c7c7 */
  --element-gray:         var(--gray-40);  /* #8f8f8f */
  --element-gray-dark:    var(--gray-60);  /* #595959 */
  /* Disabled */
  --element-disabled-light: var(--primary-10);  /* #dddada */
  --element-disabled-dark:  var(--primary-30);  /* #9d9695 */
  /* Primary */
  --element-primary:        var(--primary-50);  /* #3e3a39 */
  --element-primary-dark:   var(--primary-60);  /* #2d2a2a */
  --element-primary-light:  var(--primary-30);  /* #9d9695 */
  --element-primary-lighter: var(--primary-20); /* #c2bebd */
  /* Secondary */
  --element-secondary:        var(--primary-50);  /* #3e3a39 (재팬디 전환: 그린→그레이) */
  --element-secondary-light:  var(--secondary-30);  /* #85ad8f */
  --element-secondary-lighter: var(--secondary-20); /* #b3ccb9 */

  /* ── 아이콘 (Icon) ────────────────────────── */
  --icon-basic:        var(--primary-40);    /* #726b69 — 기본 아이콘 */
  --icon-gray:         var(--primary-30);    /* #9d9695 */
  --icon-inverse:      var(--primary-0);     /* #f8f7f7 — 어두운 배경 위 아이콘 */
  --icon-disabled:     var(--primary-20);    /* #c2bebd */
  --icon-disabled-on:  var(--primary-30);    /* #9d9695 — 비활성 배경 위 아이콘 */
  --icon-primary:      var(--primary-50);    /* #3e3a39 */
  --icon-primary-light: var(--primary-40);   /* #726b69 */
  --icon-primary-fill: var(--primary-60);    /* #2d2a2a — 채움형 아이콘 */
  --icon-secondary:    var(--primary-50);  /* #3e3a39 (재팬디 전환: 그린→그레이) */
  --icon-danger:       var(--danger-50);     /* #c9281d */
  --icon-warning:      var(--warning-50);    /* #d48311 */
  --icon-success:      var(--success-50);    /* #39ac69 */
  --icon-information:  var(--info-50);       /* #2873bd */

  /* ── 버튼 (Button) ───────────────────────── */
  /* Primary */
  --button-primary-fill:         var(--primary-50);   /* #3e3a39 */
  --button-primary-fill-hover:   var(--primary-60);   /* #2d2a2a */
  --button-primary-fill-pressed: var(--primary-70);   /* #201e1d */
  /* Secondary */
  --button-secondary-fill:            var(--primary-50);  /* #3e3a39 (재팬디 전환: 그린→그레이) */
  --button-secondary-fill-hover:      var(--primary-60);  /* #2d2a2a */
  --button-secondary-fill-pressed:    var(--primary-70);  /* #201e1d */
  --button-secondary-border:          var(--primary-50);  /* #3e3a39 (재팬디 전환: 그린→그레이) */
  --button-secondary-border-selected: var(--primary-60);  /* #2d2a2a */
  /* Tertiary */
  --button-tertiary-fill:         var(--white-0);     /* rgba(255,255,255,0) — transparent */
  --button-tertiary-fill-hover:   var(--primary-10);  /* #dddada */
  --button-tertiary-fill-pressed: var(--primary-20);  /* #c2bebd */
  --button-tertiary-border:       var(--primary-20);  /* #c2bebd */
  /* Text */
  --button-text-fill:         var(--black-0);          /* transparent */
  --button-text-fill-hover:   var(--alpha-base-10);    /* rgba(62,58,57,.10) */
  --button-text-fill-pressed: var(--alpha-base-25);    /* rgba(62,58,57,.25) */
  /* Disabled */
  --button-disabled-fill:   var(--primary-5);   /* #eeedec */
  --button-disabled-border: var(--primary-10);  /* #dddada */

  /* ── 인풋 (Input) ─────────────────────────── */
  --input-surface:          #ffffff;               /* 입력창 배경 */
  --input-border:           var(--primary-10);     /* #dddada — 기본 테두리 */
  --input-border-active:    var(--primary-50);   /* #3e3a39 (재팬디 전환: 그린→그레이) — 포커스 테두리 */
  --input-border-error:     var(--danger-50);      /* #c9281d — 오류 테두리 */
  --input-surface-disabled: var(--primary-5);      /* #eeedec — 비활성 배경 */
  --input-border-disabled:  var(--primary-10);     /* #dddada — 비활성 테두리 */

  /* ── 디바이더 (Divider) ──────────────────── */
  --divider-transparency:   var(--black-0);        /* transparent */
  --divider-inverse:        var(--primary-0);      /* #f8f7f7 — 어두운 배경 위 구분선 */
  --divider-gray-light:     var(--gray-20);        /* #c7c7c7 */
  --divider-gray:           var(--gray-40);        /* #8f8f8f */
  --divider-primary-light:  var(--primary-5);      /* #eeedec */
  --divider-primary:        var(--primary-10);     /* #dddada */
  --divider-primary-dark:   var(--primary-20);     /* #c2bebd */
  --divider-primary-darker: var(--primary-30);     /* #9d9695 */
  --divider-secondary-light: var(--secondary-20);  /* #b3ccb9 */
  --divider-secondary:      var(--primary-50);   /* #3e3a39 (재팬디 전환: 그린→그레이) */
  --divider-error:          var(--danger-50);      /* #c9281d */

  /* ── 액션 (Action) ───────────────────────── */
  /* White */
  --action-white: #ffffff;
  /* Primary — LAYERS_Grey 기반 (라이트 톤) */
  --action-primary:          var(--primary-10);  /* #dddada — 기본 */
  --action-primary-hover:    var(--primary-5);   /* #eeedec — 호버 */
  --action-primary-pressed:  var(--primary-30);  /* #9d9695 — 프레스 */
  --action-primary-selected: var(--primary-20);  /* #c2bebd — 선택됨 */
  --action-primary-active:   var(--primary-5);   /* #eeedec — 활성 */
  /* Secondary — LAYERS_Green 기반 */
  --action-secondary:          var(--primary-50);  /* #3e3a39 (재팬디 전환: 그린→그레이) — 기본 */
  --action-secondary-hover:    var(--secondary-60);  /* #2b4030 — 호버 */
  --action-secondary-pressed:  var(--secondary-70);  /* #1f2e22 — 프레스 */
  --action-secondary-selected: var(--secondary-60);  /* #2b4030 — 선택됨 */
  --action-secondary-active:   var(--secondary-40);  /* #588463 — 활성 */
  /* Disabled */
  --action-disabled: var(--primary-10);  /* #dddada */
  /* Shadow — alpha-shadow 참조 */
  --action-shadow:         var(--alpha-shadow-1);  /* rgba(0,0,0,.06) */
  --action-shadow-hover:   var(--alpha-shadow-2);  /* rgba(0,0,0,.12) */
  --action-shadow-pressed: var(--alpha-shadow-3);  /* rgba(0,0,0,.24) */

  /* ── 알파 (Alpha) — 시맨틱 투명도 ──────────── */
  /* Base — 브랜드 그레이 #3e3a39(primary-50) 기반 */
  --alpha-base-100: rgba(62,58,57,1.00);
  --alpha-base-75:  rgba(62,58,57,.75);
  --alpha-base-50:  rgba(62,58,57,.50);
  --alpha-base-25:  rgba(62,58,57,.25);
  --alpha-base-10:  rgba(62,58,57,.10);
  --alpha-base-0:   rgba(62,58,57,.00);   /* transparent */
  /* Inverse — 화이트 기반 (어두운 배경 위) */
  --alpha-inverse-100: rgba(255,255,255,1.00);
  --alpha-inverse-75:  rgba(255,255,255,.75);
  --alpha-inverse-50:  rgba(255,255,255,.50);
  --alpha-inverse-25:  rgba(255,255,255,.25);
  --alpha-inverse-10:  rgba(255,255,255,.10);
  --alpha-inverse-5:   rgba(255,255,255,.05);   /* FAB 인셋 그림자 등 미세 역방향 알파 */
  --alpha-inverse-0:   rgba(255,255,255,.00);  /* transparent */
  /* Shadow — 그림자 전용 3단계 */
  /* 재팬디 전환: 그림자를 거의 쓰지 않는다 — 면과 여백으로 위계를 만든다.
     구조(y offset·blur)는 그대로 두고 농도만 낮춰, 되돌릴 때 이 세 줄만 복구하면 됨. */
  --alpha-shadow-1: rgba(0,0,0,.02);   /* 미세 그림자 */
  --alpha-shadow-2: rgba(0,0,0,.04);   /* 중간 그림자 */
  --alpha-shadow-3: rgba(0,0,0,.07);   /* 강한 그림자 */

  /* ── 서피스 (Surface) ────────────────────── */
  /* White */
  --surface-white:        #ffffff;                  /* 기본 흰색 표면 */
  --surface-white-subtle: var(--primary-0);         /* #f8f7f7 — 미세 크림 표면 */
  --surface-white-static: #ffffff;                  /* 모드 고정 흰색 (다크모드에도 불변) */
  /* Inverse */
  --surface-inverse:        var(--primary-80);      /* #151414 — 반전 다크 표면 */
  --surface-inverse-static: #3e3a39;                /* 모드 고정 다크 (다크모드에도 불변) */
  /* State */
  --surface-disabled:          var(--primary-5);    /* #eeedec — 비활성 표면 */
  --surface-primary-subtler:   var(--primary-5);    /* #eeedec — 프라이머리 극연 */
  --surface-primary-subtle:    var(--primary-10);   /* #dddada — 프라이머리 연 */
  --surface-secondary-subtler: var(--primary-5);  /* #eeedec — 브랜드 그린 극연 */
  /* System */
  --surface-danger-subtler:      var(--danger-0);   /* #fceeed — 위험 극연 */
  --surface-warning-subtler:     var(--warning-0);  /* #fdf6ec — 경고 극연 */
  --surface-success-subtler:     var(--success-0);  /* #f0faf5 — 성공 극연 */
  --surface-information-subtler: var(--info-0);     /* #eef5fb — 정보 극연 */
  /* Opacity */
  --surface-white-opacity50:   var(--white-50);   /* rgba(255,255,255,.50) — 반투명 흰색 오버레이 */
  --surface-white-opacity25:   var(--white-25);   /* rgba(255,255,255,.25) — 더 투명한 흰색 오버레이 */
  --surface-inverse-opacity50: var(--black-50);   /* rgba(0,0,0,.50)       — 반투명 다크 오버레이 */
  /* Warm */
  --surface-warm-neutral: var(--cream-60);        /* #beb4a3 — LAYERS Sand — BEFORE 그라디언트 종단, 중립 웜 배경 */

  /* ── 타이포그래피 ───────────────────────── */
  --type-display: 'Pretendard Variable';
  --type-serif:   'Pretendard Variable';
  --type-sans:    'Pretendard Variable';

  /* ── 폰트 굵기 (재팬디: 가볍게) ───────────── */
  /* 재팬디 웹의 핵심 — 큰 글자일수록 얇게. 제목에 600을 쓰지 않는다. */
  --fw-light:   300;   /* 대형 제목·히어로 */
  --fw-regular: 400;   /* 본문·중간 제목 */
  --fw-medium:  500;   /* 라벨·버튼 — 기존 600 자리 */
  --fw-bold:    600;   /* 꼭 강조가 필요한 곳만 */

  /* ── 자간 ─────────────────────────────────── */
  --tracking:        0;        /* letter-spacing 기본값 */
  --tracking-wide:   .08em;    /* eyebrow·라벨 */
  --tracking-wider:  .18em;    /* 워드마크·섹션 대문자 소제목 */
  --tracking-tight: -.02em;    /* 대형 제목 — 얇을수록 살짝 좁혀야 덩어리로 보임 */

  /* ── 폰트 크기 (데스크톱) ──────────────── */
  /* display */
  /* 히어로 전용 대형 디스플레이 — 기존 최대치(--fs-display-lg 36px)로는 한참 모자라
     film.html 히어로 타이틀에 쓰려고 추가. 값은 clamp라 모바일 축소 블록에 다시 쓰지 않는다. */
  /* 히어로보다 한 단계 큰 전시형 제목 — kononenkogroup.com 식 '거대한 제목 + 작은 본문' 대비용 */
  /* 92px에서는 '표면은 가까이에서 다르게 보입니다'(15자)가 1200px 안에 안 들어가 두 줄로 접혔다.
     한 줄 유지가 목적이라 컨테이너 폭에 맞춰 낮춤 — 15.9×F ≤ 1200 → F ≈ 75px. */
  --fs-display-xl:   clamp(20px, 5.2vw, 75px);
  --fs-display-hero: clamp(24px, 4.5vw, 64px);
  /* 메인 섹션 제목 — 히어로(64)와 --fs-display-lg(36) 사이가 비어 있어 추가 */
  --fs-display-section: clamp(24px, 3.4vw, 48px);
  --fs-display-lg: 36px;
  --fs-display:    28px;
  --fs-display-sm: 22px;
  /* fluid (clamp 기반 — 반응형 내장, media query 불필요) */
  --fs-stat:       clamp(36px, 3.6vw, 56px);   /* 통계 대형 수치 */
  --fs-cta-title:  clamp(22px, 2.2vw, 32px);   /* CTA 대형 제목 */
  --fs-stat-desc:  14px;                       /* 통계 설명 — 반응형 축소 없이 고정 */
  /* heading */
  --fs-heading:    20px;
  --fs-heading-md: 18px;
  --fs-heading-sm: 18px;
  --fs-heading-xs: 16px;
  /* body */
  --fs-body-lg:    22px;
  --fs-body-md:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-body-xs:    13px;
  /* label */
  --fs-label:      15px;
  --fs-label-sm:   14px;
  --fs-label-xs:   13px;
  /* 라틴 대문자 마이크로 라벨용(스크롤 인디케이터 등). 한글엔 쓰지 않는다 — 13px로 올린 이력 있음 */
  --fs-label-2xs:  11px;
  /* navigation */
  --fs-nav-md:     24px;
  --fs-nav-sm:     18px;
  --fs-nav-xs:     14px;

  /* ── 스페이싱 (padding · gap 공용) ─────── */
  --sp-2:   2px;
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-10:  10px;
  --sp-12:  12px;
  --sp-14:  14px;
  --sp-16:  16px;
  --sp-18:  18px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-28:  28px;
  --sp-30:  30px;  /* 모바일 히어로 카피 문단 간격(2026-09-04) */
  --sp-32:  32px;
  --sp-36:  36px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-56:  56px;
  --sp-64:  64px;
  --sp-72:  72px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-120: 120px;
  --sp-160: 160px;
  --sp-400: 400px;

  /* ── 간격 / 레이아웃 ───────────────────── */
  --px:  20px;    /* 좌우 패딩 — 전 페이지·전 섹션 공통 기본값(2026-09-01: 60→20) */
  --nav: 82px;    /* 네비게이션 높이 (데스크톱 1줄: 로고행 padding 36/22 + 로고 24px) */
  /* 2026-09-01: 폭 상한 해제. 레퍼런스(kononenkogroup)처럼 상한 없이 좌우 --px만으로 여백을 잡는다.
     ⚠️ none으로 두면 안 된다 — 8개 파일 10곳이 calc((100vw - var(--max))/2) 형태로 쓰고 있어
     none이면 계산식이 무효가 되어 선언째 버려진다. 화면보다 큰 px값이면 계산은 살고
     max(var(--px), 음수) → --px 로 떨어져 의도한 20px 여백이 된다. */
  --max: 3000px;

  /* ── 보더 반경 (Border Radius) ─────────────── */
  --br-sm:   1px;    /* borderRadius.sm */
  --br-md:   2px;    /* borderRadius.md — 라벨·배지 */
  --br-lg:   3px;    /* borderRadius.lg — 가장 많이 쓰임 */
  --br-xl:   4px;    /* borderRadius.xl — 카드 */
  --br-2xl:  9px;    /* borderRadius.2xl — 모달·시트 */
  --br-pill: 20px;   /* borderRadius.pill — 태그 */
  --br-full: 50%;    /* borderRadius.full — 원형 */

  /* ── 아이콘 크기 (Icon Size) ─────────────────── */
  --icon-size-xs:  10px;   /* icon.size.xs — 핀·위치 */
  --icon-size-sm:  12px;   /* icon.size.sm — 테이블·필터 */
  --icon-size-md:  14px;   /* icon.size.md — 닫기·인라인 */
  --icon-size-lg:  18px;   /* icon.size.lg — 피처리스트·카드 */
  --icon-size-xl:  20px;   /* icon.size.xl — 버튼·FAB */
  --icon-size-2xl: 24px;   /* icon.size.2xl — 강조·섹션 */

  /* ── 선 두께 (Border Width) ─────────────── */
  --border-width-regular: 1px;
  --border-width-medium:  2px;

  /* ── 섀도우 (Shadow) ─────────────────────── */
  /* Y offset */
  --shadow-y-1:  4px;
  --shadow-y-2:  8px;
  --shadow-y-3:  12px;
  --shadow-y-4: -4px;   /* 상단 그림자 */
  /* Blur radius */
  --shadow-blur-1: 8px;
  --shadow-blur-2: 12px;
  --shadow-blur-3: 16px;
  /* Composed — box-shadow 바로 사용 */
  --shadow-1: 0 var(--shadow-y-1) var(--shadow-blur-1) var(--alpha-shadow-1);  /* 0 4px  8px  rgba(0,0,0,.06) */
  --shadow-2: 0 var(--shadow-y-2) var(--shadow-blur-2) var(--alpha-shadow-2);  /* 0 8px  12px rgba(0,0,0,.12) */
  --shadow-3: 0 var(--shadow-y-3) var(--shadow-blur-3) var(--alpha-shadow-3);  /* 0 12px 16px rgba(0,0,0,.24) */
  --shadow-4: 0 var(--shadow-y-4) var(--shadow-blur-1) var(--alpha-shadow-1);  /* 0 -4px 8px  rgba(0,0,0,.06) */

  /* ── 이징 함수 ──────────────────────────── */
  --ease:     cubic-bezier(.22,.68,0,1.2);
  --ease-out: cubic-bezier(.25,.46,.45,.94);
}

/* ── 표준 브레이크포인트 스케일 (5단계) ──────────────
   ⚠️ CSS @media 조건부에는 var()를 쓸 수 없어 값 자체를 토큰화할 수 없다.
   아래 5개 값만 사용한다. 임의 값(960·640·560·760 등) 추가 금지.

     --bp-lg   1100px  (--px는 더 이상 여기서 바뀌지 않음 — 전 구간 20px)
     --bp-md    900px  nav 버거 전환 · 3컬럼→2컬럼
     --bp-sm    768px  폰트 스케일 축소 · 2컬럼→1컬럼
     --bp-xs    600px  카드 스택 · 모바일 본격화
     --bp-2xs   480px  좁은 폰 패딩 (--px 20→16)
   ───────────────────────────────────────────────── */

/* ── 반응형 토큰 ────────────────────────────── */
/* 900↓: nav가 2행(로고+메뉴)→1행(로고 중앙·버거 우측)으로 압축되며 높이 64px.
   버거 전환(global.css)·단행 레이아웃·오프셋 토큰이 900에서 함께 바뀐다. */
@media (max-width: 900px)  { :root { --nav: 64px } }
@media (max-width: 768px)  {
  :root {
    /* display */
    --fs-display-lg: 24px;
    --fs-display:    22px;
    --fs-display-sm: 20px;
    /* heading */
    --fs-heading:    18px;
    --fs-heading-md: 16px;
    --fs-heading-sm: 16px;
    --fs-heading-xs: 14px;
    /* body */
    --fs-body-lg:    18px;
    --fs-body-md:    16px;
    --fs-body:       14px;
    --fs-body-sm:    13px;
    --fs-body-xs:    12px;
    /* label */
    --fs-label:      14px;
    --fs-label-sm:   13px;
    --fs-label-xs:   12px;
    /* navigation */
    --fs-nav-md:     22px;
    --fs-nav-sm:     18px;
  }
}
@media (max-width: 480px)  { :root { --px: 16px } }