/* ============================================================
   tokens.css — CHAART Design Tokens (Single Source of Truth)
   ⚠ 이 파일을 수정하면 전체 시스템에 영향을 준다

   최종 수정: 2026-03-09 — iOS spring easing · CTA gradient · Material ease 추가
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   0. Primitive Color Scale — 모든 Semantic 토큰의 원재료
   값을 직접 쓰지 말 것 → 항상 Semantic(1번 블록) 통해 참조
   ══════════════════════════════════════════════════════════ */
:root {
  /* ── Neutral (Cool Grey) ── */
  --neutral-0:   #000000;
  --neutral-5:   #0a0a0a;
  --neutral-10:  #111111;
  --neutral-15:  #1A1A1A;
  --neutral-20:  #2E2E2E;
  --neutral-30:  #444444;
  --neutral-35:  #555555;
  --neutral-42:  #6B6B6B;
  --neutral-53:  #888888;
  --neutral-60:  #999999;
  --neutral-70:  #B0B0B0;
  --neutral-80:  #CCCCCC;
  --neutral-85:  #D9D9D9;
  --neutral-90:  #E5E5E5;
  --neutral-95:  #F0F0F0;
  --neutral-98:  #FAFAFA;
  --neutral-100: #FFFFFF;

  /* ── Warm Neutral ── */
  --warm-5:  #F0EDE6;   /* paper */
  --warm-10: #f5f2ee;   /* cream */
  --warm-20: #f8f6f2;   /* warm-bg */
  --warm-30: #f4f2ef;   /* bg-secondary */
  --warm-40: #FAFAF8;   /* bg (아주 미세한 웜) */

  /* ── Red ── */
  --red-20:  #5C1114;
  --red-30:  #7a191d;
  --red-40:  #961E23;   /* ★ brand red */
  --red-50:  #C12228;
  --red-55:  #E10600;
  --red-60:  #dc2626;
  --red-70:  #EF4444;
  --red-80:  #FCA5A5;

  /* ── Green ── */
  --green-30: #2D4F35;
  --green-50: #2E7D32;
  --green-60: #22c55e;
  --green-65: #16a34a;
  --green-90: #E8F5E9;

  /* ── Blue ── */
  --blue-30: #1e40af;
  --blue-50: #2563eb;
  --blue-60: #3b82f6;
  --blue-90: #E3F2FD;

  /* ── Gold ── */
  --gold-40: #8C6D46;
  --gold-80: #ffd700;

  /* ── Orange / Warning ── */
  --orange-40: #92400e;
  --orange-60: #EF6C00;
  --orange-70: #F9A825;
  --orange-80: #EAB308;
  --orange-90: #FFF3E0;

  /* ── Cyan ── */
  --cyan-50: #0891b2;
}

/* ── 1. Core Tokens (Semantic Layer) ── */
:root {
  /* ── Color: Brand ── */
  --red-brand: var(--red-40);              /* #961E23 */
  --red-brand-hover: var(--red-30);        /* #7a191d */
  --red-ui: var(--red-55);                 /* #E10600 */
  --charcoal: var(--neutral-15);           /* #1A1A1A */
  --charcoal-hover: var(--neutral-20);     /* #2E2E2E */
  --black: var(--neutral-5);               /* #0a0a0a */
  --white: var(--neutral-100);             /* #ffffff */
  --cream: var(--warm-10);                 /* #f5f2ee */
  --paper: var(--warm-5);                  /* #F0EDE6 */

  /* ── Color: Surface ── */
  --bg: var(--warm-40);                    /* #FAFAF8 */
  --bg-card: var(--neutral-100);           /* #ffffff */
  --warm-bg: var(--warm-20);               /* #f8f6f2 */
  --bg-secondary: var(--warm-30);          /* #f4f2ef */

  /* ── Color: Text ── */
  --text: var(--neutral-10);               /* #111111 · 기본 텍스트 · 숫자 · 금액 */
  --text-secondary: var(--neutral-35);     /* #555555 · 5.07:1 on #FAFAF8 */
  --text-muted: var(--neutral-53);         /* #888888 · 3.22:1 — ⚠ 18px+ large text ONLY */
  --text-caption: var(--neutral-42);       /* #6B6B6B · 4.58:1 — captions ≥14px */
  --text-inverse: var(--neutral-100);      /* #ffffff · 어두운 배경 위 텍스트 */

  /* ── Color: Border & Alpha ── */
  --border: rgba(17,17,17,0.07);
  --border-strong: rgba(17,17,17,0.14);
  --alpha-4: rgba(0,0,0,0.04);     /* 카드 호버, 뱃지 배경 */
  --alpha-6: rgba(0,0,0,0.06);     /* 구분선, 패널 보더 */
  --alpha-8: rgba(0,0,0,0.08);     /* 기본 보더 */
  --alpha-12: rgba(0,0,0,0.12);    /* 인풋 보더, 강조 보더 */
  --alpha-16: rgba(0,0,0,0.16);    /* 강한 보더 */
  --alpha-25: rgba(0,0,0,0.25);    /* 드롭다운 보더 */

  /* ── Color: Semantic Status ── */
  --color-success: var(--green-30);            /* #2D4F35 */
  --color-success-bg: rgba(45,79,53,0.07);
  --color-success-border: rgba(45,79,53,0.16);
  --color-warning: var(--orange-40);           /* #92400e */
  --color-warning-bg: rgba(249,158,11,0.10);
  --color-warning-border: rgba(249,158,11,0.20);
  --color-warning-alt: var(--orange-80);       /* #EAB308 */
  --color-danger: var(--red-60);               /* #dc2626 */
  --color-danger-bg: rgba(239,68,68,0.08);
  --color-danger-border: rgba(239,68,68,0.18);
  --color-info: var(--blue-30);                /* #1e40af */
  --color-info-alt: var(--blue-50);            /* #2563eb */
  --color-info-bg: rgba(59,130,246,0.08);
  --color-info-border: rgba(59,130,246,0.18);
  --color-neutral: #3E4C59;
  --color-neutral-bg: rgba(62,76,89,0.07);
  --color-neutral-border: rgba(62,76,89,0.16);
  --color-gold: var(--gold-40);                /* #8C6D46 */
  --color-gold-bg: rgba(140,109,70,0.07);
  --color-gold-border: rgba(140,109,70,0.16);
  --color-cyan: var(--cyan-50);                /* #0891b2 */

  /* ── Color: ERP Semantic (Dealer 전용) ── */
  --badge-success-bg: var(--green-90);         /* #E8F5E9 */
  --badge-success-text: var(--green-50);       /* #2E7D32 */
  --badge-warning-bg: var(--orange-90);        /* #FFF3E0 */
  --badge-warning-text: var(--orange-60);      /* #EF6C00 */
  --badge-danger-bg: #FFEBEE;
  --badge-danger-text: #C62828;
  --badge-info-bg: var(--blue-90);             /* #E3F2FD */
  --badge-info-text: #1565C0;
  --bg-subtle: #F9FAFB;
  --bg-skeleton-from: var(--neutral-95);       /* #f0f0f0 */
  --bg-skeleton-to: var(--neutral-90);         /* ≈#e0e0e0 */
  --text-faint: var(--neutral-60);             /* #999999 */
  --gold-accent: var(--gold-80);               /* #ffd700 */

  /* ── Status States ── */
  --status-active: #3E4C59;
  --status-closed: #6b7280;
  --status-pending: #9ca3af;
  --status-online: var(--green-60);            /* #22c55e */
  --status-online-alt: var(--green-65);        /* #16a34a */
  --status-dormant: #d1d5db;

  /* ── Font Stacks ── */
  --font-ko: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-en: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Libre Baskerville', 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  --sans: var(--font-ko);
  --sans-en: var(--font-en);
  --mono: 'TASA Orbiter', 'Space Grotesk', sans-serif;

  /* ── Type Scale (정제된 모듈러 스케일) ── */
  --text-2xs: 10px;   /* 미니 라벨, 메타 */
  --text-xs: 12px;    /* 캡션, 코드 */
  --text-sm: 14px;    /* 부제, UI 라벨 */
  --text-base: 15px;  /* 본문 기준 */
  --text-md: 17px;    /* 강조 본문, 리드 */
  --text-lg: 20px;    /* 카드 타이틀 */
  --text-xl: 24px;    /* 섹션 타이틀 */
  --text-2xl: 28px;   /* 히어로 부제 */
  --text-3xl: 36px;   /* 히어로 타이틀 */
  --text-4xl: 48px;   /* 대형 히어로 */

  /* ── Letter Spacing (Tracking) ── */
  /* 음수 = 헤드라인 타이트닝, 양수 = 모노/대문자 와이드닝 */
  --ls-tightest: -0.04em;  /* 대형 디스플레이, 히어로 타이틀 */
  --ls-tight: -0.02em;     /* 서브 헤드라인, 중간 타이틀 */
  --ls-normal: 0;           /* 본문 기본값 */
  --ls-wide: 0.04em;       /* 미세 트래킹, 작은 라벨 */
  --ls-wider: 0.08em;      /* 버튼, UI 라벨, 네비 아이템 */
  --ls-widest: 0.12em;     /* 섹션 헤더, 모노 대문자 라벨 */
  --ls-ultra: 0.18em;      /* 히어로 라벨, 장식적 대문자 */

  /* ── Easing & Duration ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-ios-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS 네이티브 바텀시트 스프링 */
  --ease-material: cubic-bezier(0.4, 0, 0.2, 1);       /* Material Design 표준 이즈 */
  --dur-micro: 80ms;
  --dur-fast: 150ms;
  --dur-normal: 200ms;
  --dur-slow: 300ms;
  --dur-hover: 380ms;
  --dur-medium: 500ms;
  --dur-long: 800ms;
  --dur-xl: 1000ms;

  /* ── Spacing (System — 8px base) ── */
  --space-unit: 8px;
  --card-px: 36px;
  --card-py: 44px;
  --section-gap: 140px;

  /* ── Spacing Scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Border Radius ── */
  /* ⚠ 기본 R=0 · 직각 철학: 사각형은 사각형답게
     hover 시에만 미세 R값 허용 (--radius-hover) */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-hover: 3px;
  --radius-pill: 100px;
  --radius-round: 50%;

  /* ── Shadows (더 정교한 레이어드 쉐도우) ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03), 0 1px 1px rgba(0,0,0,0.02);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.02);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.03);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.04);
  --shadow-brand: 0 4px 16px rgba(150,30,35,0.08), 0 2px 4px rgba(150,30,35,0.04);
  --shadow-brand-lg: 0 12px 32px rgba(150,30,35,0.10);
  --shadow-glow: 0 0 40px rgba(150,30,35,0.10);

  /* ── Focus Ring ── */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(150,30,35,0.28);
  --focus-ring-sm: 0 0 0 3px rgba(150,30,35,0.08);

  /* ── Glass / Backdrop ── */
  --glass-bg: rgba(250,250,248,0.82);
  --glass-bg-dark: rgba(10,10,10,0.82);
  --glass-blur: 14px;

  /* ── Border Radius Extensions ── */
  --radius-2: 0;
  --radius-3: 0;
  --radius-10: 0;

  /* ── Type Scale Extensions ── */
  --text-9: 9px;
  --text-3xs: 9px;
  --text-11: 11px;
  --text-13: 13px;
  --text-16: 16px;
  --text-17: 17px;
  --text-20: 20px;
  --text-26: 26px;
  --text-32: 32px;

  /* ── Layout Tokens ── */
  --content-max: 1280px;
  --content-narrow: 680px;
  --content-wide: 1440px;
  --content-px: 64px;
  --content-px-mobile: 20px;

  /* ── Grid Tokens ── */
  --grid-cols-2: repeat(2, 1fr);
  --grid-cols-3: repeat(3, 1fr);
  --grid-cols-4: repeat(4, 1fr);
  --grid-gap-sm: var(--space-4);
  --grid-gap-md: var(--space-6);
  --grid-gap-lg: var(--space-8);
  --grid-gap-1px: 1px;

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-nav: 9999;
  --z-toast: 10000;

  /* ── Opacity Tokens ── */
  --opacity-ghost: 0.04;
  --opacity-subtle: 0.08;
  --opacity-muted: 0.12;
  --opacity-dim: 0.25;
  --opacity-half: 0.5;
  --opacity-visible: 0.7;

  /* ── Legacy Alpha Aliases ── */
  --alpha-30: rgba(17,17,17,0.30);
  --alpha-40: rgba(17,17,17,0.40);
  --alpha-50: rgba(17,17,17,0.50);
  --alpha-60: rgba(17,17,17,0.60);
  --alpha-70: rgba(17,17,17,0.70);
  --alpha-80: rgba(17,17,17,0.80);

  /* ── Brand Alpha Tokens ── */
  --red-brand-ghost: rgba(150, 30, 35, 0.04);
  --red-brand-subtle: rgba(150, 30, 35, 0.07);
  --red-brand-muted: rgba(150, 30, 35, 0.12);
  --red-brand-dim: rgba(150, 30, 35, 0.20);
  --red-brand-half: rgba(150, 30, 35, 0.40);
  --red-brand-visible: rgba(150, 30, 35, 0.70);

  /* ── CTA Gradient ── */
  --cta-gradient: linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%);

  /* ── Motion: Custom Keyframe Presets ── */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-dramatic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-default: var(--ease);
  --dur-cinematic: 1200ms;
  --dur-stagger: 120ms;

  /* ── Scroll Reveal Pattern ── */
  /* 스크롤 진입 시 blur→sharp 등장 애니메이션 공통 토큰
     Hub Manifesto, 섹션 인트로, 카드 리빌 등에 적용 */
  --reveal-blur: 6px;              /* 초기 블러 강도 */
  --reveal-shift: 8px;             /* 초기 Y-오프셋 (아래→위 등장) */
  --reveal-ease: cubic-bezier(0.05, 0.8, 0.15, 1); /* 감속 커브 — 빠른 출발, 부드러운 안착 */
  --reveal-dur-char: 450ms;        /* 글자 단위 등장 */
  --reveal-dur-line: 600ms;        /* 줄/문장 단위 등장 */
  --reveal-dur-fade: 800ms;        /* 느린 페이드인 (어트리뷰션 등) */
  --reveal-dur-blur: 500ms;        /* 블러 해제 (reveal-dur-char보다 약간 길게) */

  /* ── Aspect Ratios ── */
  --ratio-square: 1 / 1;
  --ratio-portrait: 4 / 5;
  --ratio-story: 9 / 16;
  --ratio-landscape: 16 / 9;
  --ratio-wide: 21 / 9;

  /* ── Extended Spacing ── */
  --space-9: 36px;
  --space-11: 44px;
  --space-13: 52px;
  --space-14: 56px;

  /* ── Semantic Aliases ── */
  --body: var(--sans);
  --text-primary: var(--text);
  --chaart-red: var(--red-brand);
  --comp-landing-accent: var(--red-brand-subtle);
  --pattern-accent: var(--red-brand-muted);
  --fill-0: var(--charcoal);
  --preview-width: 1200px;
  --preview-height: 640px;
  --branch-glow: 0.4;
  --mx: 50%;
  --my: 0%;
  --card-delay: 0ms;
  --reveal-delay: 0ms;

  /* ── Dealer Aliases ── */
  --gm-brand: var(--red-brand);
  --gm-ink: var(--charcoal);
  --gm-secondary: var(--text-secondary);
  --gm-muted: var(--text-muted);
  --gm-faint: var(--alpha-4);

}

/* ── 2. Theme: Charcoal (Dark) ── */
body[data-theme="charcoal"] {
  --bg: #0a0a0a;
  --bg-card: #141414;
  --warm-bg: #111111;
  --bg-secondary: #1a1a1a;
  --text: #F0F0F0;
  --text-secondary: #A5A5A5;
  --text-muted: #6B6B6B;
  --text-caption: #888888;
  --text-inverse: #111111;
  --charcoal: #F0F0F0;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);
  --alpha-4: rgba(255,255,255,0.04);
  --alpha-6: rgba(255,255,255,0.06);
  --alpha-8: rgba(255,255,255,0.08);
  --alpha-12: rgba(255,255,255,0.12);
  --alpha-16: rgba(255,255,255,0.18);
  --alpha-30: rgba(255,255,255,0.30);
  --alpha-40: rgba(255,255,255,0.40);
  --alpha-50: rgba(255,255,255,0.50);
  --alpha-60: rgba(255,255,255,0.60);
  --alpha-70: rgba(255,255,255,0.70);
  --alpha-80: rgba(255,255,255,0.80);
  --glass-bg: rgba(10,10,10,0.82);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.12);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.16);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.20);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.28);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.36);
}

/* ── 3. Theme: Paper (Warm) ── */
body[data-theme="paper"] {
  --bg: #F0EDE6;
  --bg-card: #F7F5F0;
  --warm-bg: #EBE8E1;
  --bg-secondary: #E6E3DC;
  --text: #1A1A1A;
  --text-secondary: #555555;
  --text-muted: #888888;
  --text-caption: #6B6B6B;
  --border: rgba(17,17,17,0.09);
  --border-strong: rgba(17,17,17,0.15);
  --glass-bg: rgba(240,237,230,0.82);
}

/* ── 4. Density: Compact ── */
body[data-density="compact"] {
  --text-base: 14px;
  --text-sm: 13px;
  --text-md: 16px;
  --space-unit: 6px;
  --card-px: 28px;
  --card-py: 32px;
  --section-gap: 80px;
}

/* ── 5. Type: Editorial ── */
body[data-type="editorial"] {
  --sans: var(--serif);
}

/* ══════════════════════════════════════════════════════════
   6. Composition Tokens — Cross-Page System Components
   Dealer + Artists 통일 기준 (2026-02 Design Wash v3.0)
   ══════════════════════════════════════════════════════════ */

:root {

  /* ① Surface System
     --surface-page    : 전체 페이지 바탕 (스크롤 배경)
     --surface-panel   : 카드/패널/사이드바 배경
     --surface-muted   : 약하게 구분되는 보조 영역
     --surface-ambient : 페이지별 분위기 레이어 (비네팅 등) — 끄고 켜기만 허용
  ---------------------------------------------------------------- */
  --surface-page:    var(--bg);          /* #FAFAF8 */
  --surface-panel:   var(--bg-card);     /* #ffffff */
  --surface-muted:   var(--bg-secondary);/* #f4f2ef */
  --surface-ambient: transparent;        /* 기본: 끔 — 페이지가 켜서 쓸 것 */

  /* ② Section Header Component
     양쪽 페이지 "구획 헤더 바"를 동일한 컴포넌트로 통일
  ---------------------------------------------------------------- */
  --section-hd-bg:       var(--charcoal);
  --section-hd-bg-sub:   var(--red-brand);
  --section-hd-height:   32px;
  --section-hd-px:       14px;
  --section-hd-py:       6px;
  --section-hd-color:    var(--bg);                /* 흰 텍스트 */
  --section-hd-font:     var(--mono);
  --section-hd-size:     var(--text-2xs);
  --section-hd-weight:   600;
  --section-hd-spacing:  0.12em;
  --section-hd-border:   none;

  /* ③ KPI Rail Component
     4분할 요약 지표 — Dealer·Artists 공통
  ---------------------------------------------------------------- */
  --kpi-rail-bg:       var(--surface-panel);
  --kpi-rail-divider:  var(--border);
  --kpi-rail-py:       var(--space-5);
  --kpi-rail-px:       var(--space-4);
  --kpi-value-font:    var(--mono);
  --kpi-value-size:    var(--text-2xl);    /* 28px */
  --kpi-value-weight:  700;
  --kpi-value-color:   var(--charcoal);
  --kpi-value-spacing: -0.02em;
  --kpi-label-font:    var(--mono);
  --kpi-label-size:    var(--text-2xs);
  --kpi-label-color:   var(--text-muted);
  --kpi-label-spacing: 0.08em;
  /* Emphasis Band: none → subtle(border-top 컬러) → strong(밴드 배경) */
  --emphasis-band:     subtle;            /* 기본 = subtle */
  --emphasis-band-color: var(--red-brand);

  /* ④ Sidebar Component Family
     Sidebar-Nav(Dealer) + Sidebar-Explorer(Artists) 공통 베이스
  ---------------------------------------------------------------- */
  --sidebar-width:        260px;
  --sidebar-bg:           var(--surface-panel);
  --sidebar-border:       var(--border);
  --sidebar-item-height:  44px;
  --sidebar-item-px:      20px;
  --sidebar-item-font:    var(--mono);
  --sidebar-item-size:    var(--text-2xs);
  --sidebar-item-spacing: 0.08em;
  --sidebar-item-color:   var(--text-secondary);
  --sidebar-active-bg:    var(--red-brand-ghost);
  --sidebar-active-color: var(--red-brand);
  --sidebar-active-border:var(--red-brand);
  --sidebar-badge-font:   var(--mono);
  --sidebar-badge-size:   var(--text-2xs);

  /* ⑤ DataGrid Component
     Artists 표 + Dealer 리스트 "읽는 질감" 통일
  ---------------------------------------------------------------- */
  --datagrid-header-bg:     var(--surface-muted);
  --datagrid-header-color:  var(--text-caption);
  --datagrid-header-font:   var(--mono);
  --datagrid-header-size:   var(--text-2xs);
  --datagrid-header-spacing:0.08em;
  --datagrid-row-height:    44px;
  --datagrid-row-font:      var(--sans);
  --datagrid-row-size:      var(--text-sm);
  --datagrid-divider:       var(--border);
  --datagrid-hover:         var(--red-brand-ghost);
  --datagrid-muted:         var(--text-caption);
  --datagrid-accent:        var(--red-brand);   /* 강조 수치 색 */
  --datagrid-mono:          var(--mono);

  /* ⑥ Typography Hierarchy
     역할 기반 타입 토큰 — 페이지 공통
  ---------------------------------------------------------------- */
  --type-page-title-font:    var(--mono);
  --type-page-title-size:    var(--text-2xs);
  --type-page-title-weight:  600;
  --type-page-title-spacing: 0.12em;
  --type-page-title-color:   var(--bg);          /* 다크 헤더 위 */

  --type-section-title-font:    var(--mono);
  --type-section-title-size:    var(--text-2xs);
  --type-section-title-weight:  600;
  --type-section-title-spacing: 0.10em;
  --type-section-title-color:   var(--charcoal);

  --type-kpi-value-font:    var(--mono);
  --type-kpi-value-size:    var(--text-2xl);
  --type-kpi-value-weight:  700;
  --type-kpi-value-spacing: -0.02em;
  --type-kpi-value-color:   var(--charcoal);

  --type-label-font:    var(--mono);
  --type-label-size:    var(--text-2xs);
  --type-label-weight:  500;
  --type-label-spacing: 0.08em;
  --type-label-color:   var(--text-caption);

  --type-body-font:    var(--sans);
  --type-body-size:    var(--text-sm);
  --type-body-weight:  400;
  --type-body-color:   var(--text);

  --type-meta-font:    var(--mono);
  --type-meta-size:    var(--text-2xs);
  --type-meta-weight:  400;
  --type-meta-color:   var(--text-muted);

  /* ⑦ Interaction State Tokens
     Wanted DS 벤치마크: opacity overlay 기반 (별도 색상 아님)
  ---------------------------------------------------------------- */
  --state-hover-overlay:   rgba(0,0,0,0.04);
  --state-active-overlay:  rgba(0,0,0,0.08);
  --state-focus-ring:      0 0 0 2px var(--bg), 0 0 0 4px rgba(150,30,35,0.28);
  --state-focus-ring-inset:inset 0 0 0 2px rgba(150,30,35,0.28);
  --state-disabled-opacity:0.38;
  --state-loading-opacity: 0.7;
  --state-error-border:    var(--color-danger);
  --state-error-bg:        var(--color-danger-bg);

  /* ⑧ Component Size Scale
     XS → XL 5단계 — height / padding / font / icon
  ---------------------------------------------------------------- */
  --size-xs-height: 24px;
  --size-xs-px:     8px;
  --size-xs-font:   var(--text-xs);
  --size-xs-icon:   14px;

  --size-sm-height: 32px;
  --size-sm-px:     12px;
  --size-sm-font:   var(--text-13);
  --size-sm-icon:   16px;

  --size-md-height: 40px;
  --size-md-px:     16px;
  --size-md-font:   var(--text-sm);
  --size-md-icon:   18px;

  --size-lg-height: 48px;
  --size-lg-px:     20px;
  --size-lg-font:   var(--text-base);
  --size-lg-icon:   20px;

  --size-xl-height: 56px;
  --size-xl-px:     24px;
  --size-xl-font:   var(--text-md);
  --size-xl-icon:   24px;

  /* ⑨ Icon Tokens
  ---------------------------------------------------------------- */
  --icon-xs:     14px;
  --icon-sm:     16px;
  --icon-md:     20px;
  --icon-lg:     24px;
  --icon-xl:     32px;
  --icon-stroke: 1.5;
  --icon-color:  currentColor;

  /* ⑩ Breakpoints (참조용 — CSS변수는 @media에 사용 불가)
     Mobile:  360px   최소 타겟, 1컬럼
     Tablet:  768px   2컬럼, 사이드바 접힘
     Desktop: 1024px  풀 네비, 3-4컬럼
     Wide:    1440px  max-content
  ---------------------------------------------------------------- */
  --content-px-tablet: 40px;
  --touch-target-min:  44px;

}