/**
 * Design Language Pack — Design Tokens v1.0
 *
 * Cross-project SSOT: 모든 프로젝트가 이 파일을 참조.
 * 시크 뉴트럴 톤 — 쿨 그레이 기반, 절제된 악센트.
 *
 * 구조:
 *   :root          — 공통 토큰 (typography, spacing, radius, motion)
 *   [data-theme="light"] — 라이트 테마 (쿨 크림, 미세한 로즈)
 *   [data-theme="dark"]  — 다크 테마 (블루-차콜, 코랄 악센트)
 *   기본값: light
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════
   1. TYPOGRAPHY — Modular Scale 1.25, base 16px
   ═══════════════════════════════════════════════════════════ */
:root {
    --text-2xs: 0.64rem;   /* 10.24px — 캡션 최소 */
    --text-xs: 0.8rem;     /* 12.8px  — 뱃지, 라벨 */
    --text-sm: 0.875rem;   /* 14px    — 보조 텍스트 */
    --text-base: 1rem;     /* 16px    — 본문 */
    --text-md: 1.25rem;    /* 20px    — 소제목 */
    --text-lg: 1.563rem;   /* 25px    — 섹션 타이틀 */
    --text-xl: 1.953rem;   /* 31.25px — 페이지 타이틀 */
    --text-2xl: 2.441rem;  /* 39px    — 히어로 */

    /* Display sizes — Apple Tahoe / Glassmorphism wizard 진입 화면용 (2026-05-20 v1.1) */
    --text-display-sm: 2.25rem;  /* 36px — section title */
    --text-display-md: 2.75rem;  /* 44px — hero title */
    --text-display-lg: 3.5rem;   /* 56px — splash hero */

    --leading-tight: 1.2;
    --leading-display: 1.08;     /* 큰 타이포용 — 더 타이트 */
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-tight: -0.02em;
    --tracking-display: -0.025em;  /* display sizes 가독성 */
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-mono: 0.06em;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont,
                 'Pretendard Variable', 'Helvetica Neue', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* ═══════════════════════════════════════════════════════════
   2. SPACING — 4px base grid
   ═══════════════════════════════════════════════════════════ */
:root {
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 2px;
    --space-1: 4px;     /* xs: 인라인 간격 */
    --space-2: 8px;     /* sm: 뱃지 내부, 작은 갭 */
    --space-3: 12px;    /* md: 카드 내부, 버튼 내부 */
    --space-4: 16px;    /* lg: 카드 간 갭, 폼 그룹 간 */
    --space-5: 20px;
    --space-6: 24px;    /* xl: 패널 패딩 */
    --space-8: 32px;    /* 2xl: 섹션 간 */
    --space-10: 40px;
    --space-12: 48px;   /* 3xl: 페이지 마진 */
    --space-16: 64px;

    /* 시맨틱 별칭 */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-3);
    --space-lg: var(--space-4);
    --space-xl: var(--space-6);
    --space-2xl: var(--space-8);
    --space-3xl: var(--space-12);

    /* 컴포넌트 내부 리듬 */
    --gap-label-control: var(--space-2);   /* 라벨 → 컨트롤 */
    --gap-control-hint: var(--space-1);    /* 컨트롤 → 힌트 텍스트 */
    --gap-group: var(--space-4);           /* 폼 그룹 간 */
    --gap-section: var(--space-6);         /* 섹션 간 */
}

/* ═══════════════════════════════════════════════════════════
   3. RADIUS
   ═══════════════════════════════════════════════════════════ */
:root {
    --radius-xs: 4px;
    --radius-sm: 6px;    /* 뱃지, 태그 */
    --radius-md: 8px;    /* 버튼, 입력 */
    --radius-lg: 12px;   /* 카드 */
    --radius-xl: 16px;   /* 모달, 큰 패널 */
    --radius-2xl: 20px;
    --radius-full: 9999px;
}

/* ═══════════════════════════════════════════════════════════
   4. MOTION — Apple HIG 기반
   ═══════════════════════════════════════════════════════════ */
:root {
    /* easing */
    --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-default: var(--ease-spring);

    /* duration */
    --duration-instant: 60ms;    /* 버튼 press */
    --duration-fast: 120ms;      /* hover 상태 */
    --duration-normal: 200ms;    /* 일반 전환 */
    --duration-slow: 300ms;      /* 모달 진입 */
    --duration-spring: 500ms;    /* spring 기반 */

    /* 마이크로 인터랙션 */
    --press-scale: 0.98;
    --hover-lift: -2px;
    --hover-opacity: 0.85;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   5. LAYOUT — z-index, depth
   ═══════════════════════════════════════════════════════════ */
:root {
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-panel: 500;
    --z-overlay: 9000;
    --z-modal: 9999;
    --z-toast: 10000;

    --header-height: 56px;
    --panel-width: 360px;
    --page-max-width: 1200px;
    --page-padding: var(--space-8);
}

/* ═══════════════════════════════════════════════════════════
   6. LIGHT THEME — 쿨 크림, 미세한 로즈 터치
   ═══════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
    /* 배경 4단계 */
    --bg-base: #f7f7f8;
    --bg-surface: #ffffff;
    --bg-elevated: #f0f0f2;
    --bg-elevated-2: #e8e8ec;

    /* 텍스트 4단계 */
    --text-primary: #18181b;
    --text-secondary: #62626b;
    --text-tertiary: #a0a0ab;
    --text-ghost: #c8c8d0;

    /* 악센트 — 로즈 그레이 (시크, 절제) */
    --color-accent: #8b6f6f;
    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --accent-hover: #7a5e5e;
    --accent-bg: rgba(139,111,111,0.07);
    --accent-glow: rgba(139,111,111,0.05);
    --accent-text: #8b6f6f;

    /* 시맨틱 — 채도 낮춘 시크 톤 */
    --color-success: #3d9970;
    --color-warning: #c49530;
    --color-danger: #c25450;
    --color-info: #4a7fb5;

    --success-bg: rgba(61,153,112,0.07);
    --success-text: #3d9970;
    --warning-bg: rgba(196,149,48,0.07);
    --warning-text: #c49530;
    --danger-bg: rgba(194,84,80,0.07);
    --danger-text: #c25450;
    --info-bg: rgba(74,127,181,0.07);
    --info-text: #4a7fb5;

    --success-hover: #358560;
    --accent-secondary: #7a8b6f;

    /* 보더 */
    --border-subtle: rgba(0,0,0,0.06);
    --border-emphasis: rgba(0,0,0,0.12);
    --border-focus: rgba(139,111,111,0.4);

    /* 오버레이 */
    --overlay: rgba(247,247,248,0.85);

    /* 그림자 — 미니멀 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);
    --shadow-glow: 0 0 20px rgba(139,111,111,0.06);

    /* 그래픽 악센트 */
    --gradient-accent: linear-gradient(135deg, #8b6f6f, #a08878);
    --gradient-surface: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
    --noise-opacity: 0.018;

    /* 차트 */
    --chart-primary: #8b6f6f;
    --chart-secondary: #a08878;
    --chart-tertiary: #c8c8d0;

    /* 퍼플 (카테고리용) */
    --color-purple: #7c6b9e;
    --purple-bg: rgba(124,107,158,0.07);
}

/* ═══════════════════════════════════════════════════════════
   7. DARK THEME — 블루-차콜, 코랄 악센트
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* 배경 4단계 — 블루 언더톤 */
    --bg-base: #0b0b0f;
    --bg-surface: #131318;
    --bg-elevated: #1b1b22;
    --bg-elevated-2: #23232c;

    /* 텍스트 4단계 */
    --text-primary: #e4e4e8;
    --text-secondary: #85858f;
    --text-tertiary: #52525c;
    --text-ghost: #32323a;

    /* 악센트 — 코랄 (기존 유지, 시크하게 톤다운) */
    --color-accent: #e8634a;
    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --accent-hover: #d65540;
    --accent-bg: rgba(232,99,74,0.09);
    --accent-glow: rgba(232,99,74,0.05);
    --accent-text: #e8634a;

    /* 시맨틱 */
    --color-success: #34d399;
    --color-warning: #f0b429;
    --color-danger: #ef6461;
    --color-info: #5b9bd5;

    --success-bg: rgba(52,211,153,0.09);
    --success-text: #34d399;
    --warning-bg: rgba(240,180,41,0.09);
    --warning-text: #f0b429;
    --danger-bg: rgba(239,100,97,0.09);
    --danger-text: #ef6461;
    --info-bg: rgba(91,155,213,0.09);
    --info-text: #5b9bd5;

    --success-hover: #2bc48d;
    --accent-secondary: #f0b429;

    /* 보더 */
    --border-subtle: rgba(255,255,255,0.06);
    --border-emphasis: rgba(255,255,255,0.12);
    --border-focus: rgba(232,99,74,0.4);

    /* 오버레이 */
    --overlay: rgba(11,11,15,0.85);

    /* 그림자 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(232,99,74,0.05);

    /* 그래픽 악센트 */
    --gradient-accent: linear-gradient(135deg, #e8634a, #f0b429);
    --gradient-surface: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
    --noise-opacity: 0.015;

    /* 차트 */
    --chart-primary: #e8634a;
    --chart-secondary: #f0b429;
    --chart-tertiary: #52525c;

    /* 퍼플 */
    --color-purple: #a78bfa;
    --purple-bg: rgba(167,139,250,0.09);
}

/* ═══════════════════════════════════════════════════════════
   7.5. PURPLE HAZE — Apple Tahoe Glassmorphism (2026-05-20 v1.1 신설)
   ─────────────────────────────────────────────────────────────
   - 정체성: 보라 + 반투명 glass + radial gradient backdrop
   - 사용처: creator-os-agents (wizard) / creator-os-license-server (landing)
   - 라이트(.purple-haze) + 다크(.purple-haze-dark) 2 variant
   ═══════════════════════════════════════════════════════════ */
[data-theme="purple-haze"] {
    /* 배경 4단계 — 라벤더 화이트 */
    --bg-base:       #F3F0FF;
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #EDE9FF;
    --bg-elevated-2: #E4DEFF;

    /* 텍스트 4단계 — 라이트 위 가독성 강화 (v1.9.2 audit fix) */
    --text-primary:   #18181b;
    --text-secondary: #52525c;       /* darker than 62626b */
    --text-tertiary:  #75757f;       /* darker than a0a0ab — small label 가독성 */
    --text-ghost:     #c8c8d0;

    /* 악센트 — 딥 바이올렛 + soft accent */
    --color-accent:      #7C3AED;
    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --color-accent-soft: #c084fc;  /* Purple Haze secondary */
    --accent-hover:      #6D28D9;
    --accent-bg:         rgba(124,58,237,0.08);
    --accent-glow:       rgba(124,58,237,0.12);
    --accent-text:       #7C3AED;

    /* 시맨틱 */
    --color-success:        #3d9970;
    --color-success-strong: #15803d;
    --color-warning:        #c49530;
    --color-danger:         #c25450;
    --color-danger-strong:  #b91c1c;
    --color-info:           #4a7fb5;

    --success-bg:    rgba(61,153,112,0.10);
    --success-text:  #3d9970;
    --warning-bg:    rgba(196,149,48,0.10);
    --warning-text:  #c49530;
    --danger-bg:     rgba(194,84,80,0.10);
    --danger-text:   #c25450;
    --info-bg:       rgba(74,127,181,0.10);
    --info-text:     #4a7fb5;

    /* 보더 */
    --border-subtle:   rgba(124,58,237,0.10);
    --border-emphasis: rgba(124,58,237,0.18);
    --border-focus:    rgba(124,58,237,0.45);

    /* 그림자 */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg:   0 12px 32px rgba(0,0,0,0.08);
    --shadow-glow: 0 0 20px rgba(124,58,237,0.12);

    /* ── Glassmorphism tokens (Purple Haze 핵심 정체성) ──
       반투명 + backdrop blur + saturate — macOS Tahoe Vibrant 톤. */
    --glass-bg:        rgba(255, 255, 255, 0.34);
    --glass-bg-hi:     rgba(255, 255, 255, 0.52);
    --glass-border:    rgba(124, 58, 237, 0.22);
    --glass-border-hi: rgba(124, 58, 237, 0.40);
    --glass-blur:      blur(28px) saturate(240%);
    --glass-shadow:    0 12px 48px rgba(124, 58, 237, 0.18), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    --glass-glow:      0 0 64px rgba(192, 132, 252, 0.30);

    /* Page bg — v1.17.x Apple Liquid Glass 톤 (Hub 와 동일한 가벼움)
       Hero glass panel(.hub__hero::before / .card frosted) 이 색을 잡는 시스템. body 는 조용. */
    --page-bg-from: #FFFFFF;
    --page-bg-to:   #FAF7FF;
    --page-bg-radial:
        radial-gradient(circle at 15% 8%, rgba(167,139,250,0.20) 0%, transparent 55%),
        radial-gradient(circle at 88% 18%, rgba(216,180,254,0.14) 0%, transparent 60%),
        radial-gradient(circle at 80% 90%, rgba(196,132,252,0.18) 0%, transparent 60%),
        radial-gradient(circle at 20% 95%, rgba(167,139,250,0.12) 0%, transparent 60%),
        linear-gradient(135deg, var(--page-bg-from) 0%, var(--page-bg-to) 100%);

    /* 그래픽 악센트 */
    --gradient-accent: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
    --gradient-surface: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
    --noise-opacity: 0.018;

    /* 차트 */
    --chart-primary:   #7C3AED;
    --chart-secondary: #A78BFA;
    --chart-tertiary:  #c8c8d0;

    /* 오버레이 */
    --overlay: rgba(243,240,255,0.85);
}

/* ═══════════════════════════════════════════════════════════
   7.6. EDITORIAL — Linear / Vercel / Stripe 톤 (2026-05-20 v1.2 신설)
   ─────────────────────────────────────────────────────────────
   - 정체성: 큰 typography + 미니멀 + 단색 accent + line-only chrome
   - 메커니즘: no shadow / no gradient / no border — line underline 만
   - 사용처: 뉴스(iran-war-feed) / blog / dev tool / portfolio
   - 라이트 / 다크 양쪽
   ═══════════════════════════════════════════════════════════ */
[data-theme="editorial"] {
    /* 배경 — pure white 4단계 (실질 거의 동일) */
    --bg-base:       #FFFFFF;
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #FAFAFA;
    --bg-elevated-2: #F4F4F5;

    /* 텍스트 — near black */
    --text-primary:   #0A0A0A;
    --text-secondary: #525252;
    --text-tertiary:  #A3A3A3;
    --text-ghost:     #D4D4D4;

    /* 악센트 — 보라 단색 (Linear/Vercel 톤) */
    --color-accent:    #6366F1;
    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --color-accent-soft: #A78BFA;
    --accent-hover:    #4F46E5;
    --accent-bg:       rgba(99,102,241,0.06);
    --accent-glow:     rgba(99,102,241,0.10);
    --accent-text:     #6366F1;

    /* 시맨틱 — 채도 낮은 정중함 */
    --color-success:        #16A34A;
    --color-success-strong: #15803D;
    --color-warning:        #D97706;
    --color-danger:         #DC2626;
    --color-danger-strong:  #B91C1C;
    --color-info:           #2563EB;

    --success-bg:    rgba(22,163,74,0.06);
    --success-text:  #16A34A;
    --warning-bg:    rgba(217,119,6,0.06);
    --warning-text:  #D97706;
    --danger-bg:     rgba(220,38,38,0.06);
    --danger-text:   #DC2626;
    --info-bg:       rgba(37,99,235,0.06);
    --info-text:     #2563EB;

    /* 보더 — line 만 (Editorial 핵심 메커니즘) */
    --border-subtle:   #E5E5E5;
    --border-emphasis: #D4D4D4;
    --border-focus:    rgba(99,102,241,0.45);

    /* Shadow — Editorial 은 무그림자가 정체성 — 토큰 비워둠 */
    --shadow-sm:   none;
    --shadow-md:   none;
    --shadow-lg:   none;
    --shadow-glow: none;

    /* Gradient — 없음 (단색만) */
    --gradient-accent:  none;
    --gradient-surface: none;

    /* Editorial 전용 — 큰 typography display sizes */
    --editorial-display-sm: 2rem;     /* 32px */
    --editorial-display-md: 3rem;     /* 48px */
    --editorial-display-lg: 4rem;     /* 64px */
    --editorial-display-xl: 5rem;     /* 80px — hero / splash */
    --editorial-eyebrow-tracking: 0.18em;
    --editorial-line-thickness: 1px;

    /* 차트 */
    --chart-primary:   #6366F1;
    --chart-secondary: #A78BFA;
    --chart-tertiary:  #D4D4D4;

    /* 오버레이 */
    --overlay: rgba(255,255,255,0.92);
}

[data-theme="editorial-dark"] {
    /* 배경 — near black */
    --bg-base:       #0A0A0A;
    --bg-surface:    #0A0A0A;
    --bg-elevated:   #171717;
    --bg-elevated-2: #1F1F1F;

    /* 텍스트 — near white */
    --text-primary:   #FAFAFA;
    --text-secondary: #A3A3A3;
    --text-tertiary:  #737373;
    --text-ghost:     #404040;

    /* 악센트 — Vercel green or Linear violet */
    --color-accent:    #00DC82;
    --on-accent:        #0A0A0A;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --color-accent-soft: #34D399;
    --accent-hover:    #00B570;
    --accent-bg:       rgba(0,220,130,0.08);
    --accent-glow:     rgba(0,220,130,0.12);
    --accent-text:     #00DC82;

    /* 시맨틱 */
    --color-success:        #34D399;
    --color-success-strong: #6EE7B7;
    --color-warning:        #FBBF24;
    --color-danger:         #F87171;
    --color-danger-strong:  #FCA5A5;
    --color-info:           #60A5FA;

    --success-bg:   rgba(52,211,153,0.10);
    --success-text: #34D399;
    --warning-bg:   rgba(251,191,36,0.10);
    --warning-text: #FBBF24;
    --danger-bg:    rgba(248,113,113,0.10);
    --danger-text:  #F87171;
    --info-bg:      rgba(96,165,250,0.10);
    --info-text:    #60A5FA;

    /* 보더 */
    --border-subtle:   #1F1F1F;
    --border-emphasis: #404040;
    --border-focus:    rgba(0,220,130,0.45);

    /* Shadow — 없음 */
    --shadow-sm:   none;
    --shadow-md:   none;
    --shadow-lg:   none;
    --shadow-glow: none;

    /* Gradient — 없음 */
    --gradient-accent:  none;
    --gradient-surface: none;

    /* Editorial display tokens */
    --editorial-display-sm: 2rem;
    --editorial-display-md: 3rem;
    --editorial-display-lg: 4rem;
    --editorial-display-xl: 5rem;
    --editorial-eyebrow-tracking: 0.18em;
    --editorial-line-thickness: 1px;

    /* 차트 */
    --chart-primary:   #00DC82;
    --chart-secondary: #34D399;
    --chart-tertiary:  #404040;

    /* 오버레이 */
    --overlay: rgba(10,10,10,0.92);
}

/* ═══════════════════════════════════════════════════════════
   7.7. MATERIAL 3 — Google Material Design 3 (2026-05-20 v1.3 신설)
   ─────────────────────────────────────────────────────────────
   - 정체성: Tonal palette + Elevation 5 단계 + State layer + Shape scale
   - 핵심 메커니즘:
       1. Tonal palette: primary / on-primary / primary-container /
          on-primary-container (4 tier semantic pair)
       2. Surface tint: surface 색상에 primary 색을 elevation 따라 mix
       3. State layer: hover/focus/pressed 시 같은 색 opacity overlay
       4. Shape scale: 0 / 4 / 8 / 12 / 16 / 28 / full (7 단계)
   - 출처: m3.material.io (Google official baseline)
   - 사용처: 일반 SaaS · 모바일 친화 · Android-like app
   ═══════════════════════════════════════════════════════════ */
[data-theme="tonal"] {
    /* 배경 — surface tier */
    --bg-base:       #FFFBFE;
    --bg-surface:    #FFFBFE;
    --bg-elevated:   #F7F2FA;       /* surface-container */
    --bg-elevated-2: #F0EAF4;       /* surface-container-high */

    /* 텍스트 — on-surface tier */
    --text-primary:   #1C1B1F;       /* on-surface */
    --text-secondary: #49454F;       /* on-surface-variant */
    --text-tertiary:  #79747E;       /* outline */
    --text-ghost:     #CAC4D0;       /* outline-variant */

    /* 악센트 — Primary tonal (M3 baseline Purple) */
    --color-accent:    #6750A4;       /* primary */
    --color-accent-soft: #EADDFF;     /* primary-container */
    --accent-hover:    #4F378B;       /* primary darker */
    --accent-bg:       rgba(103,80,164,0.08);    /* state layer 8% */
    --accent-glow:     rgba(103,80,164,0.12);    /* state layer 12% */
    --accent-text:     #6750A4;

    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    /* 시맨틱 (M3 color roles) */
    --color-success:        #006E1C;
    --color-success-strong: #4F6354;
    --color-warning:        #885200;
    --color-danger:         #B3261E;
    --color-danger-strong:  #410E0B;
    --color-info:           #0061A4;

    --success-bg: rgba(0,110,28,0.08);
    --warning-bg: rgba(136,82,0,0.08);
    --danger-bg:  rgba(179,38,30,0.08);
    --info-bg:    rgba(0,97,164,0.08);

    /* 보더 — Outline */
    --border-subtle:   #CAC4D0;       /* outline-variant */
    --border-emphasis: #79747E;       /* outline */
    --border-focus:    rgba(103,80,164,0.45);

    /* M3 Shape scale */
    --m3-shape-none:    0;
    --m3-shape-xs:      4px;
    --m3-shape-sm:      8px;
    --m3-shape-md:      12px;
    --m3-shape-lg:      16px;
    --m3-shape-xl:      28px;
    --m3-shape-full:    9999px;

    /* M3 Elevation tokens — 5 단계 (z-axis depth) */
    --m3-elev-0: none;
    --m3-elev-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
    --m3-elev-2: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
    --m3-elev-3: 0 1px 3px rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15);
    --m3-elev-4: 0 2px 3px rgba(0,0,0,0.30), 0 6px 10px 4px rgba(0,0,0,0.15);
    --m3-elev-5: 0 4px 4px rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15);

    /* Shadow alias */
    --shadow-sm:   var(--m3-elev-1);
    --shadow-md:   var(--m3-elev-2);
    --shadow-lg:   var(--m3-elev-3);
    --shadow-glow: var(--m3-elev-4);

    /* Gradient — M3 은 단색 + tonal */
    --gradient-accent:  none;
    --gradient-surface: none;

    /* M3 surface tint (elevation 별 primary mix) */
    --m3-surface-tint-1: rgba(103,80,164,0.05);
    --m3-surface-tint-2: rgba(103,80,164,0.08);
    --m3-surface-tint-3: rgba(103,80,164,0.11);
    --m3-surface-tint-4: rgba(103,80,164,0.12);
    --m3-surface-tint-5: rgba(103,80,164,0.14);

    /* 차트 */
    --chart-primary:   #6750A4;
    --chart-secondary: #625B71;       /* secondary */
    --chart-tertiary:  #7D5260;       /* tertiary */

    /* 오버레이 */
    --overlay: rgba(255,251,254,0.92);
}

[data-theme="tonal-dark"] {
    /* 배경 */
    --bg-base:       #1C1B1F;       /* surface */
    --bg-surface:    #1C1B1F;
    --bg-elevated:   #2B2930;       /* surface-container */
    --bg-elevated-2: #36343B;       /* surface-container-high */

    /* 텍스트 */
    --text-primary:   #E6E1E5;       /* on-surface */
    --text-secondary: #CAC4D0;       /* on-surface-variant */
    --text-tertiary:  #938F99;       /* outline */
    --text-ghost:     #49454F;       /* outline-variant */

    /* 악센트 — Primary tonal (다크는 더 밝은 tone) */
    --color-accent:    #D0BCFF;       /* primary (dark) */
    --color-accent-soft: #4F378B;     /* primary-container (dark) */
    --accent-hover:    #B69DF8;
    --accent-bg:       rgba(208,188,255,0.08);
    --accent-glow:     rgba(208,188,255,0.12);
    --accent-text:     #D0BCFF;

    --on-accent:        #1C1B1F;   /* accent bg 위 텍스트 색 (v1.10.1) */
    /* 시맨틱 */
    --color-success:        #4ADC65;
    --color-success-strong: #B5F2BE;
    --color-warning:        #FFB951;
    --color-danger:         #F2B8B5;
    --color-danger-strong:  #FFD9DC;
    --color-info:           #9ECAFF;

    --success-bg: rgba(74,220,101,0.10);
    --warning-bg: rgba(255,185,81,0.10);
    --danger-bg:  rgba(242,184,181,0.10);
    --info-bg:    rgba(158,202,255,0.10);

    /* 보더 */
    --border-subtle:   #49454F;
    --border-emphasis: #938F99;
    --border-focus:    rgba(208,188,255,0.45);

    /* Shape scale 동일 */
    --m3-shape-none:    0;
    --m3-shape-xs:      4px;
    --m3-shape-sm:      8px;
    --m3-shape-md:      12px;
    --m3-shape-lg:      16px;
    --m3-shape-xl:      28px;
    --m3-shape-full:    9999px;

    /* Elevation (다크는 더 강한 shadow) */
    --m3-elev-0: none;
    --m3-elev-1: 0 1px 2px rgba(0,0,0,0.45), 0 1px 3px 1px rgba(0,0,0,0.25);
    --m3-elev-2: 0 1px 2px rgba(0,0,0,0.45), 0 2px 6px 2px rgba(0,0,0,0.25);
    --m3-elev-3: 0 1px 3px rgba(0,0,0,0.45), 0 4px 8px 3px rgba(0,0,0,0.25);
    --m3-elev-4: 0 2px 3px rgba(0,0,0,0.45), 0 6px 10px 4px rgba(0,0,0,0.25);
    --m3-elev-5: 0 4px 4px rgba(0,0,0,0.45), 0 8px 12px 6px rgba(0,0,0,0.25);

    --shadow-sm:   var(--m3-elev-1);
    --shadow-md:   var(--m3-elev-2);
    --shadow-lg:   var(--m3-elev-3);
    --shadow-glow: var(--m3-elev-4);

    --gradient-accent:  none;
    --gradient-surface: none;

    --m3-surface-tint-1: rgba(208,188,255,0.05);
    --m3-surface-tint-2: rgba(208,188,255,0.08);
    --m3-surface-tint-3: rgba(208,188,255,0.11);
    --m3-surface-tint-4: rgba(208,188,255,0.12);
    --m3-surface-tint-5: rgba(208,188,255,0.14);

    --chart-primary:   #D0BCFF;
    --chart-secondary: #CCC2DC;
    --chart-tertiary:  #EFB8C8;

    --overlay: rgba(28,27,31,0.92);
}

/* ═══════════════════════════════════════════════════════════
   7.8. Candy Plastic — 1998~2003 캔디 시대 (2026-05-20 v1.6 — Mac Classic 폐기 후 교체)
   ─────────────────────────────────────────────────────────────
   - 정체성: 반투명 캔디 plastic + Bondi Blue / 5 컬러 변형 + Aqua glossy
   - 영감: Candy Plastic (1998) · Bondi Blue / Tangerine / Strawberry / Grape / Lime
   - 핵심 메커니즘:
       1. Bondi Blue 시그니처 (#2696D2 핵심) — 1998 Steve Jobs 부활
       2. 반투명 캔디 — rgba + backdrop blur (Aqua 의 전신)
       3. Aqua glossy button — top white highlight + gradient + 둥근 모서리
       4. Drop shadow + soft glow — 입체 plastic 느낌
       5. Lucida Grande (Mac OS X) — 둥근 sans
   - 사용처: 노스탤지아 product · creative tools · 디자이너용 retro app
   - 폐기: 기존 mac-classic (System 7) 은 *렌더링 안 된 페이지처럼 보인다* 는
          라이언 피드백 → Candy Plastic 로 evolve (1991 → 1998 시대 점프)
   ═══════════════════════════════════════════════════════════ */
[data-theme="candy-plastic"] {
    /* 배경 — 반투명 캔디 plastic 표현 (라이트는 부드러운 cream + 보라 띠) */
    --bg-base:       #F4F1E8;       /* 아이맥 외부 white plastic (가장 옅은 cream) */
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #EBF6FC;       /* 옅은 Bondi mist */
    --bg-elevated-2: #D8E9F4;

    --text-primary:   #1B2B3A;
    --text-secondary: #4A5C73;
    --text-tertiary:  #8090A8;
    --text-ghost:     #C5D2E0;

    /* 악센트 — Bondi Blue (Candy Plastic 시그니처) */
    --color-accent:    #2696D2;       /* Bondi Blue */
    --color-accent-soft: #66BFEC;     /* 옅은 Bondi */
    --accent-hover:    #1B7AB0;
    --accent-bg:       rgba(38,150,210,0.10);
    --accent-glow:     rgba(38,150,210,0.22);
    --accent-text:     #1B7AB0;

    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    /* iMac 5 캔디 컬러 (Bondi + Tangerine + Strawberry + Grape + Lime + Blueberry) */
    --imac-bondi:      #2696D2;       /* Blue (오리지널) */
    --imac-tangerine:  #FF9F1C;       /* Orange */
    --imac-strawberry: #FF4F5E;       /* Red */
    --imac-grape:      #9B7BC0;       /* Purple */
    --imac-lime:       #BCD93B;       /* Green */
    --imac-blueberry:  #5067C2;       /* Deep Blue */

    --color-success:        #59A559;
    --color-success-strong: #3B7D3B;
    --color-warning:        #FF9F1C;
    --color-danger:         #FF4F5E;
    --color-danger-strong:  #D03540;
    --color-info:           #2696D2;

    --success-bg: rgba(89,165,89,0.10);
    --warning-bg: rgba(255,159,28,0.10);
    --danger-bg:  rgba(255,79,94,0.10);
    --info-bg:    rgba(38,150,210,0.10);

    --border-subtle:   rgba(38,150,210,0.20);
    --border-emphasis: rgba(38,150,210,0.40);
    --border-focus:    #2696D2;

    /* Soft drop shadow — plastic 느낌 (Candy Plastic 외관 그림자) */
    --shadow-sm:   0 2px 6px rgba(38,150,210,0.12), 0 1px 0 rgba(255,255,255,0.6) inset;
    --shadow-md:   0 4px 16px rgba(38,150,210,0.18), 0 1px 0 rgba(255,255,255,0.7) inset;
    --shadow-lg:   0 12px 40px rgba(38,150,210,0.22), 0 1px 0 rgba(255,255,255,0.8) inset;
    --shadow-glow: 0 0 28px rgba(102,191,236,0.45);

    /* Aqua glossy button gradient (top white highlight + Bondi) */
    --gradient-accent:
        linear-gradient(180deg,
            rgba(255,255,255,0.85) 0%,
            rgba(255,255,255,0.30) 45%,
            rgba(38,150,210,0.85) 51%,
            rgba(38,150,210,1.00) 100%);
    --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #EBF6FC 100%);

    /* iMac 전용 — Aqua 메커니즘 */
    --imac-glossy-highlight: linear-gradient(180deg,
        rgba(255,255,255,0.7) 0%,
        rgba(255,255,255,0.15) 50%,
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.05) 100%);
    --imac-pinstripe:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.85) 0,
            rgba(255,255,255,0.85) 1px,
            rgba(220,232,242,0.95) 1px,
            rgba(220,232,242,0.95) 2px);
    --imac-font-display: 'Lucida Grande', 'Lucida Sans Unicode', -apple-system, sans-serif;
    --imac-font-body:    'Lucida Grande', 'Lucida Sans Unicode', -apple-system, sans-serif;

    --chart-primary:   #2696D2;
    --chart-secondary: #FF9F1C;
    --chart-tertiary:  #9B7BC0;

    --overlay: rgba(244,241,232,0.90);
}

[data-theme="candy-plastic-dark"] {
    /* 다크 — Aqua/Bondi 의 어두운 plastic */
    --bg-base:       #0E1A26;       /* deep ocean */
    --bg-surface:    #142536;
    --bg-elevated:   #1B304A;
    --bg-elevated-2: #233F62;

    /* 다크 plastic title-bar 텍스트 영역 (라이트는 rgba(255,255,255,0.65) 기본값) */
    --imac-window-title-bg: rgba(20,37,54,0.85);

    --text-primary:   #E8F2F8;
    --text-secondary: #A4BCD0;
    --text-tertiary:  #6D8BA8;
    --text-ghost:     #3D5878;

    --color-accent:    #66BFEC;       /* 옅은 Bondi (다크에선 더 밝게) */
    --color-accent-soft: #2696D2;
    --accent-hover:    #88D2F2;
    --accent-bg:       rgba(102,191,236,0.14);
    --accent-glow:     rgba(102,191,236,0.32);
    --accent-text:     #66BFEC;

    --on-accent:        #0E1A26;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --imac-bondi:      #66BFEC;
    --imac-tangerine:  #FFB85C;
    --imac-strawberry: #FF7A8A;
    --imac-grape:      #B295D8;
    --imac-lime:       #D4E96C;
    --imac-blueberry:  #7A8FE3;

    --color-success:        #7BD17B;
    --color-success-strong: #B5EBB5;
    --color-warning:        #FFB85C;
    --color-danger:         #FF7A8A;
    --color-danger-strong:  #FFB0BB;
    --color-info:           #66BFEC;

    --success-bg: rgba(123,209,123,0.14);
    --warning-bg: rgba(255,184,92,0.14);
    --danger-bg:  rgba(255,122,138,0.14);
    --info-bg:    rgba(102,191,236,0.14);

    --border-subtle:   rgba(102,191,236,0.20);
    --border-emphasis: rgba(102,191,236,0.40);
    --border-focus:    #66BFEC;

    --shadow-sm:   0 2px 6px rgba(0,0,0,0.50), 0 1px 0 rgba(102,191,236,0.10) inset;
    --shadow-md:   0 4px 16px rgba(0,0,0,0.55), 0 1px 0 rgba(102,191,236,0.14) inset;
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.65), 0 1px 0 rgba(102,191,236,0.18) inset;
    --shadow-glow: 0 0 32px rgba(102,191,236,0.40);

    --gradient-accent:
        linear-gradient(180deg,
            rgba(255,255,255,0.45) 0%,
            rgba(255,255,255,0.10) 45%,
            rgba(102,191,236,0.85) 51%,
            rgba(102,191,236,1.00) 100%);
    --gradient-surface: linear-gradient(180deg, #142536 0%, #0E1A26 100%);

    --imac-glossy-highlight: linear-gradient(180deg,
        rgba(255,255,255,0.45) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.20) 100%);
    --imac-pinstripe:
        repeating-linear-gradient(0deg,
            rgba(102,191,236,0.10) 0,
            rgba(102,191,236,0.10) 1px,
            rgba(20,37,54,0.95) 1px,
            rgba(20,37,54,0.95) 2px);
    --imac-font-display: 'Lucida Grande', 'Lucida Sans Unicode', -apple-system, sans-serif;
    --imac-font-body:    'Lucida Grande', 'Lucida Sans Unicode', -apple-system, sans-serif;

    --chart-primary:   #66BFEC;
    --chart-secondary: #FFB85C;
    --chart-tertiary:  #B295D8;

    --overlay: rgba(14,26,38,0.92);
}

/* ═══════════════════════════════════════════════════════════
   7.9. MEMPHIS 80s — 1980s 도타주 (2026-05-20 v1.5 신설)
   ─────────────────────────────────────────────────────────────
   - 정체성: Geometric shapes (▲●◆) + 컬러 폭발 (핑크/노랑/민트) +
            bold sans + asymmetric layout + 80s 도타주
   - 영감: Memphis Group (1981~1988) — Mendini · Sottsass · Sowden
   - 핵심 메커니즘:
       1. 4 primary 컬러 (핫핑크 + 노랑 + 민트 + 네이비)
       2. Geometric pattern utility (.memphis-pattern-{dots/stripes/squiggle})
       3. Asymmetric border + offset shadow
       4. Bold display typography (Druk-like, weight 900)
       5. Pure white/black 대비
   - 사용처: 음악 · 패션 · 갤러리 · 예술 product · 어린이 콘텐츠
   ═══════════════════════════════════════════════════════════ */
[data-theme="memphis"] {
    --bg-base:       #FAF8F4;       /* cream */
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #FFF6E0;       /* 옐로우 tint */
    --bg-elevated-2: #FFE9D6;

    --text-primary:   #1A1A2E;       /* deep navy */
    --text-secondary: #4A4A6E;
    --text-tertiary:  #8989A8;
    --text-ghost:     #C8C8DE;

    /* 4 primary — Memphis 시그니처 컬러 */
    --color-accent:    #FF6B9D;       /* hot pink */
    --color-accent-soft: #FFE05C;     /* sunshine yellow */
    --accent-hover:    #FF4485;
    --accent-bg:       rgba(255,107,157,0.10);
    --accent-glow:     rgba(255,107,157,0.18);
    --accent-text:     #FF6B9D;

    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    /* Memphis 4 컬러 토큰 (직접 참조용) */
    --memphis-pink:   #FF6B9D;
    --memphis-yellow: #FFE05C;
    --memphis-mint:   #3DCCC7;
    --memphis-navy:   #1A1A2E;

    /* light 전용 — eyebrow / mono 텍스트용 더 진한 pink (가독성 fix v1.9.2) */
    --memphis-pink-text: #C9407A;

    --color-success:        #3DCCC7;     /* 민트 = success */
    --color-success-strong: #2BAFA9;
    --color-warning:        #FFE05C;     /* 노랑 = warning */
    --color-danger:         #FF6B9D;     /* 핑크 = danger */
    --color-danger-strong:  #FF4485;
    --color-info:           #1A1A2E;

    --success-bg: rgba(61,204,199,0.14);
    --warning-bg: rgba(255,224,92,0.20);
    --danger-bg:  rgba(255,107,157,0.12);
    --info-bg:    rgba(26,26,46,0.06);

    /* 보더 — 두꺼운 검정 (Memphis 시그니처) */
    --border-subtle:   #1A1A2E;
    --border-emphasis: #1A1A2E;
    --border-focus:    #FF6B9D;

    /* Hard offset shadow (no blur — 80s 톤) */
    --shadow-sm:   3px 3px 0 #1A1A2E;
    --shadow-md:   6px 6px 0 #1A1A2E;
    --shadow-lg:   10px 10px 0 #1A1A2E;
    --shadow-glow: none;

    --gradient-accent:  linear-gradient(135deg, #FF6B9D 0%, #FFE05C 100%);
    --gradient-surface: none;

    /* Memphis 전용 — 4 geometric pattern */
    --memphis-pattern-dots:
        radial-gradient(circle, #1A1A2E 1.5px, transparent 1.5px) 0 0 / 16px 16px;
    --memphis-pattern-stripes:
        /* 더 미세 — 2px line + 18px gap (이전 4px / 8px → 가독성 우선) */
        repeating-linear-gradient(45deg, #1A1A2E 0, #1A1A2E 2px, transparent 2px, transparent 20px);
    --memphis-pattern-grid:
        linear-gradient(#1A1A2E 1px, transparent 1px) 0 0 / 100% 24px,
        linear-gradient(90deg, #1A1A2E 1px, transparent 1px) 0 0 / 24px 100%;

    --chart-primary:   #FF6B9D;
    --chart-secondary: #FFE05C;
    --chart-tertiary:  #3DCCC7;

    --overlay: rgba(250,248,244,0.92);
}

[data-theme="memphis-dark"] {
    --bg-base:       #1A1A2E;       /* deep navy */
    --bg-surface:    #20203A;
    --bg-elevated:   #2A2A48;
    --bg-elevated-2: #353556;

    --text-primary:   #FAF8F4;       /* cream */
    --text-secondary: #C8C8DE;
    --text-tertiary:  #8989A8;
    --text-ghost:     #4A4A6E;

    --color-accent:    #FF6B9D;
    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --color-accent-soft: #FFE05C;
    --accent-hover:    #FF85B5;
    --accent-bg:       rgba(255,107,157,0.18);
    --accent-glow:     rgba(255,107,157,0.28);
    --accent-text:     #FF6B9D;

    --memphis-pink:   #FF6B9D;
    --memphis-yellow: #FFE05C;
    --memphis-mint:   #3DCCC7;
    --memphis-navy:   #1A1A2E;

    --color-success:        #3DCCC7;
    --color-success-strong: #6FE0DC;
    --color-warning:        #FFE05C;
    --color-danger:         #FF6B9D;
    --color-danger-strong:  #FF85B5;
    --color-info:           #FAF8F4;

    --success-bg: rgba(61,204,199,0.18);
    --warning-bg: rgba(255,224,92,0.18);
    --danger-bg:  rgba(255,107,157,0.18);
    --info-bg:    rgba(250,248,244,0.08);

    --border-subtle:   #FAF8F4;
    --border-emphasis: #FAF8F4;
    --border-focus:    #FF6B9D;

    --shadow-sm:   3px 3px 0 #FAF8F4;
    --shadow-md:   6px 6px 0 #FAF8F4;
    --shadow-lg:   10px 10px 0 #FAF8F4;
    --shadow-glow: none;

    --gradient-accent:  linear-gradient(135deg, #FF6B9D 0%, #FFE05C 100%);
    --gradient-surface: none;

    --memphis-pattern-dots:
        radial-gradient(circle, #FAF8F4 1.5px, transparent 1.5px) 0 0 / 16px 16px;
    --memphis-pattern-stripes:
        /* 더 미세 (v1.13.2) */
        repeating-linear-gradient(45deg, #FAF8F4 0, #FAF8F4 2px, transparent 2px, transparent 20px);
    --memphis-pattern-grid:
        linear-gradient(#FAF8F4 1px, transparent 1px) 0 0 / 100% 24px,
        linear-gradient(90deg, #FAF8F4 1px, transparent 1px) 0 0 / 24px 100%;

    --chart-primary:   #FF6B9D;
    --chart-secondary: #FFE05C;
    --chart-tertiary:  #3DCCC7;

    --overlay: rgba(26,26,46,0.92);
}

[data-theme="brutalist"] {
    /* ─────────────────────────────────────────────────────
       Brutalist — raw / asymmetric / 강한 대비 / 잡지 스타일
       (Balenciaga / Drudge / Acne / Berghain)
       ───────────────────────────────────────────────────── */
    --bg-base:       #FFFFFF;       /* pure white */
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #F5F5F5;
    --bg-elevated-2: #EDEDED;

    --text-primary:   #000000;       /* pure black */
    --text-secondary: #111111;
    --text-tertiary:  #555555;
    --text-ghost:     #999999;

    --color-accent:    #FFFF00;       /* hot yellow — Brutalist 시그니처 */
    --color-accent-soft: #FFFE7A;
    --accent-hover:    #E5E500;
    --accent-bg:       #FFFF00;       /* fill, no transparency */
    --accent-glow:     none;
    --accent-text:     #000000;

    --on-accent:        #000000;   /* accent bg 위 텍스트 색 (v1.10.1) */
    /* Brutalist 보조 컬러 (직접 참조) */
    --brutalist-yellow:     #FFFF00;
    --brutalist-vermillion: #FF3D00;
    --brutalist-cyan:       #00E5FF;

    --color-success:        #00C853;
    --color-success-strong: #009E44;
    --color-warning:        #FFFF00;
    --color-danger:         #FF3D00;
    --color-danger-strong:  #C62828;
    --color-info:           #000000;

    --success-bg: #00C853;
    --warning-bg: #FFFF00;
    --danger-bg:  #FF3D00;
    --info-bg:    #000000;

    /* 두꺼운 검정 보더 — Brutalist 핵심 메커니즘 */
    --border-subtle:   #000000;
    --border-emphasis: #000000;
    --border-focus:    #FF3D00;

    /* 그림자 0 — Brutalist 정통 (그림자 X / gradient X) */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;

    --gradient-accent:  none;
    --gradient-surface: none;

    /* Brutalist 전용 토큰 */
    --brutalist-border-thin:  2px;
    --brutalist-border-thick: 4px;
    --brutalist-border-mega:  8px;
    --brutalist-font-display: 'Helvetica Neue', Helvetica, 'Arial Black', sans-serif;
    --brutalist-font-mono:    'Space Mono', 'IBM Plex Mono', Menlo, monospace;

    --chart-primary:   #000000;
    --chart-secondary: #FFFF00;
    --chart-tertiary:  #FF3D00;

    --overlay: rgba(255,255,255,0.95);
}

[data-theme="brutalist-dark"] {
    --bg-base:       #000000;       /* pure black */
    --bg-surface:    #000000;
    --bg-elevated:   #0E0E0E;
    --bg-elevated-2: #1C1C1C;

    --text-primary:   #FFFFFF;
    --text-secondary: #EEEEEE;
    --text-tertiary:  #AAAAAA;
    --text-ghost:     #555555;

    --color-accent:    #FFFF00;       /* yellow 그대로 — black 위에서 더 강함 */
    --color-accent-soft: #FFFE7A;
    --accent-hover:    #FFFE7A;
    --accent-bg:       #FFFF00;
    --accent-glow:     none;
    --accent-text:     #000000;

    --on-accent:        #000000;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --brutalist-yellow:     #FFFF00;
    --brutalist-vermillion: #FF6037;
    --brutalist-cyan:       #66F1FF;

    --color-success:        #00E676;
    --color-success-strong: #00C853;
    --color-warning:        #FFFF00;
    --color-danger:         #FF6037;
    --color-danger-strong:  #FF3D00;
    --color-info:           #FFFFFF;

    --success-bg: #00E676;
    --warning-bg: #FFFF00;
    --danger-bg:  #FF6037;
    --info-bg:    #FFFFFF;

    --border-subtle:   #FFFFFF;
    --border-emphasis: #FFFFFF;
    --border-focus:    #FFFF00;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;

    --gradient-accent:  none;
    --gradient-surface: none;

    --brutalist-border-thin:  2px;
    --brutalist-border-thick: 4px;
    --brutalist-border-mega:  8px;
    --brutalist-font-display: 'Helvetica Neue', Helvetica, 'Arial Black', sans-serif;
    --brutalist-font-mono:    'Space Mono', 'IBM Plex Mono', Menlo, monospace;

    --chart-primary:   #FFFFFF;
    --chart-secondary: #FFFF00;
    --chart-tertiary:  #FF6037;

    --overlay: rgba(0,0,0,0.95);
}

[data-theme="terminal"] {
    /* ─────────────────────────────────────────────────────
       Terminal (light — paper/amber 톤)
       — mono only · single color accent · CLI 메타포
       ───────────────────────────────────────────────────── */
    --bg-base:       #F4EFD7;       /* parchment / aged paper */
    --bg-surface:    #F4EFD7;
    --bg-elevated:   #ECE5C7;
    --bg-elevated-2: #E3DAB5;

    --text-primary:   #1F1B0E;       /* dark coffee */
    --text-secondary: #3A331B;
    --text-tertiary:  #6B5F35;
    --text-ghost:     #9C8E5C;

    --color-accent:    #00874A;       /* deep ink green */
    --color-accent-soft: #B4C9A7;
    --accent-hover:    #006A3A;
    --accent-bg:       #DCE9C8;
    --accent-glow:     none;
    --accent-text:     #00874A;

    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    /* Terminal 보조 (직접 참조) */
    --terminal-green:  #00874A;
    --terminal-amber:  #C68A2A;
    --terminal-rust:   #B14B1E;

    --color-success:        #00874A;
    --color-success-strong: #006A3A;
    --color-warning:        #C68A2A;
    --color-danger:         #B14B1E;
    --color-danger-strong:  #8A3A18;
    --color-info:           #1F1B0E;

    --success-bg: #DCE9C8;
    --warning-bg: #F0E0B4;
    --danger-bg:  #F0D0C0;
    --info-bg:    #E0DABE;

    /* mono char 보더 — terminal 정통 */
    --border-subtle:   #6B5F35;
    --border-emphasis: #1F1B0E;
    --border-focus:    #00874A;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;

    --gradient-accent:  none;
    --gradient-surface: none;

    /* Terminal 전용 */
    --terminal-font:        'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
    --terminal-border-mono: dashed;
    --terminal-scanline:    repeating-linear-gradient(0deg, rgba(31,27,14,0.03) 0, rgba(31,27,14,0.03) 1px, transparent 1px, transparent 3px);

    --chart-primary:   #00874A;
    --chart-secondary: #C68A2A;
    --chart-tertiary:  #B14B1E;

    --overlay: rgba(244,239,215,0.95);
}

[data-theme="terminal-dark"] {
    /* ─────────────────────────────────────────────────────
       Terminal (dark — 정통 CRT + neon green)
       ───────────────────────────────────────────────────── */
    --bg-base:       #0A0E0A;       /* near-black with green tint */
    --bg-surface:    #0A0E0A;
    --bg-elevated:   #121712;
    --bg-elevated-2: #1A201A;

    --text-primary:   #00FF66;       /* neon green */
    --text-secondary: #00CC52;
    --text-tertiary:  #008C38;
    --text-ghost:     #004D1E;

    --color-accent:    #00FF66;
    --on-accent:        #0A0E0A;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --color-accent-soft: #80FFB2;
    --accent-hover:    #80FFB2;
    --accent-bg:       rgba(0,255,102,0.10);
    --accent-glow:     0 0 8px rgba(0,255,102,0.6);
    --accent-text:     #00FF66;

    --terminal-green:  #00FF66;
    --terminal-amber:  #FFB000;
    --terminal-rust:   #FF6037;
    /* CGA palette 시안/마젠타 보조 */
    --terminal-cyan:    #00FFFF;
    --terminal-magenta: #FF00FF;

    --color-success:        #00FF66;
    --color-success-strong: #80FFB2;
    --color-warning:        #FFB000;
    --color-danger:         #FF6037;
    --color-danger-strong:  #FF3D00;
    --color-info:           #00FFFF;

    --success-bg: rgba(0,255,102,0.12);
    --warning-bg: rgba(255,176,0,0.12);
    --danger-bg:  rgba(255,96,55,0.12);
    --info-bg:    rgba(0,255,255,0.10);

    --border-subtle:   #004D1E;
    --border-emphasis: #00FF66;
    --border-focus:    #00FFFF;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: 0 0 8px rgba(0,255,102,0.5);

    --gradient-accent:  none;
    --gradient-surface: none;

    --terminal-font:        'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
    --terminal-border-mono: dashed;
    /* CRT scanline overlay */
    --terminal-scanline:    repeating-linear-gradient(0deg, rgba(0,255,102,0.04) 0, rgba(0,255,102,0.04) 1px, transparent 1px, transparent 3px);

    --chart-primary:   #00FF66;
    --chart-secondary: #00FFFF;
    --chart-tertiary:  #FF00FF;

    --overlay: rgba(10,14,10,0.95);
}

[data-theme="neumorphism"] {
    /* ─────────────────────────────────────────────────────
       Neumorphism (라이트) — soft dual shadow / embossed
       calm / 명상 / 웰니스 / 미니멀 시계 톤
       ───────────────────────────────────────────────────── */
    --bg-base:       #E0E5EC;       /* Neumorphism canonical bg */
    --bg-surface:    #E0E5EC;
    --bg-elevated:   #E0E5EC;
    --bg-elevated-2: #D5DAE2;

    --text-primary:   #2D3748;
    --text-secondary: #4A5568;
    --text-tertiary:  #718096;
    --text-ghost:     #A0AEC0;

    --color-accent:    #4F46E5;       /* subtle indigo (single chroma) */
    --color-accent-soft: #C7D2FE;
    --accent-hover:    #4338CA;
    --accent-bg:       #D6DBF7;
    --accent-glow:     rgba(79,70,229,0.18);
    --accent-text:     #FFFFFF;

    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --color-success:        #10B981;
    --color-success-strong: #047857;
    --color-warning:        #F59E0B;
    --color-danger:         #EF4444;
    --color-danger-strong:  #B91C1C;
    --color-info:           #4F46E5;

    --success-bg: #D1FAE5;
    --warning-bg: #FEF3C7;
    --danger-bg:  #FEE2E2;
    --info-bg:    #DBEAFE;

    --border-subtle:   #CBD2DC;
    --border-emphasis: #B8C2D0;
    --border-focus:    #4F46E5;

    /* Neumorphism 시그니처 — dual shadow (high + low light) */
    --neu-shadow-out:
        9px 9px 18px rgba(163,177,198,0.50),
        -9px -9px 18px rgba(255,255,255,0.75);
    --neu-shadow-out-sm:
        4px 4px 8px rgba(163,177,198,0.45),
        -4px -4px 8px rgba(255,255,255,0.70);
    --neu-shadow-in:
        inset 5px 5px 10px rgba(163,177,198,0.55),
        inset -5px -5px 10px rgba(255,255,255,0.70);
    --neu-shadow-in-sm:
        inset 2px 2px 5px rgba(163,177,198,0.55),
        inset -2px -2px 5px rgba(255,255,255,0.70);
    --neu-shadow-flat:
        2px 2px 5px rgba(163,177,198,0.30),
        -2px -2px 5px rgba(255,255,255,0.55);

    /* legacy shadow tokens 호환 — neu out 매핑 */
    --shadow-sm:   var(--neu-shadow-out-sm);
    --shadow-md:   var(--neu-shadow-out);
    --shadow-lg:   var(--neu-shadow-out);
    --shadow-glow: 0 0 16px var(--accent-glow);

    --gradient-accent:  linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
    --gradient-surface: linear-gradient(145deg, #E6EBF2 0%, #D8DEE6 100%);

    /* Neumorphism 둥근 모서리 (큼) */
    --neu-radius:     18px;
    --neu-radius-sm:  10px;
    --neu-radius-pill: 9999px;

    --chart-primary:   #4F46E5;
    --chart-secondary: #10B981;
    --chart-tertiary:  #F59E0B;

    --overlay: rgba(224,229,236,0.92);
}

[data-theme="neumorphism-dark"] {
    /* dark Neumorphism — embossed in 다크 plastic */
    --bg-base:       #2D2F36;
    --bg-surface:    #2D2F36;
    --bg-elevated:   #2D2F36;
    --bg-elevated-2: #353841;

    --text-primary:   #E5E7EB;
    --text-secondary: #CBD5E0;
    --text-tertiary:  #A0AEC0;
    --text-ghost:     #718096;

    --color-accent:    #818CF8;       /* 밝은 인디고 (다크 위) */
    --color-accent-soft: #4F46E5;
    --accent-hover:    #A5B4FC;
    --accent-bg:       rgba(129,140,248,0.18);
    --accent-glow:     rgba(129,140,248,0.30);
    --accent-text:     #1A1B23;

    --on-accent:        #1A1B23;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --color-success:        #34D399;
    --color-success-strong: #10B981;
    --color-warning:        #FBBF24;
    --color-danger:         #F87171;
    --color-danger-strong:  #EF4444;
    --color-info:           #818CF8;

    --success-bg: rgba(52,211,153,0.18);
    --warning-bg: rgba(251,191,36,0.18);
    --danger-bg:  rgba(248,113,113,0.18);
    --info-bg:    rgba(129,140,248,0.18);

    --border-subtle:   #404451;
    --border-emphasis: #4A4F5E;
    --border-focus:    #818CF8;

    /* dark neu shadow — 검정 + 밝은 plastic 톱라이트 */
    --neu-shadow-out:
        9px 9px 18px rgba(0,0,0,0.55),
        -9px -9px 18px rgba(58,60,68,0.40);
    --neu-shadow-out-sm:
        4px 4px 8px rgba(0,0,0,0.50),
        -4px -4px 8px rgba(58,60,68,0.40);
    --neu-shadow-in:
        inset 5px 5px 10px rgba(0,0,0,0.55),
        inset -5px -5px 10px rgba(58,60,68,0.40);
    --neu-shadow-in-sm:
        inset 2px 2px 5px rgba(0,0,0,0.55),
        inset -2px -2px 5px rgba(58,60,68,0.40);
    --neu-shadow-flat:
        2px 2px 5px rgba(0,0,0,0.30),
        -2px -2px 5px rgba(58,60,68,0.30);

    --shadow-sm:   var(--neu-shadow-out-sm);
    --shadow-md:   var(--neu-shadow-out);
    --shadow-lg:   var(--neu-shadow-out);
    --shadow-glow: 0 0 16px var(--accent-glow);

    --gradient-accent:  linear-gradient(135deg, #818CF8 0%, #A5B4FC 100%);
    --gradient-surface: linear-gradient(145deg, #34373F 0%, #25272D 100%);

    --neu-radius:     18px;
    --neu-radius-sm:  10px;
    --neu-radius-pill: 9999px;

    --chart-primary:   #818CF8;
    --chart-secondary: #34D399;
    --chart-tertiary:  #FBBF24;

    --overlay: rgba(45,47,54,0.92);
}

[data-theme="purple-haze-dark"] {
    /* 배경 4단계 — 딥 퍼플 블랙 */
    --bg-base:       #0A0514;
    --bg-surface:    #120B20;
    --bg-elevated:   #1E1035;
    --bg-elevated-2: #271545;

    /* 텍스트 4단계 — 다크 위 가독성 강화 (v1.9.2 audit fix) */
    --text-primary:   #f0f0f3;       /* +brighter than e4e4e8 */
    --text-secondary: #c0c0c8;       /* +brighter than a0a0a8 */
    --text-tertiary:  #9090a0;       /* +brighter than 6b6b75 — glass 위에서 보임 */
    --text-ghost:     #5a5a68;

    /* 악센트 — 바이올렛 + soft accent */
    --color-accent:      #8B5CF6;
    --on-accent:        #FFFFFF;   /* accent bg 위 텍스트 색 (v1.10.1) */
    --color-accent-soft: #c084fc;
    --accent-hover:      #7C3AED;
    --accent-bg:         rgba(139,92,246,0.12);
    --accent-glow:       rgba(139,92,246,0.20);
    --accent-text:       #8B5CF6;

    /* 시맨틱 */
    --color-success:        #34d399;
    --color-success-strong: #6ee7b7;
    --color-warning:        #f0b429;
    --color-danger:         #ef6461;
    --color-danger-strong:  #fca5a5;
    --color-info:           #5b9bd5;

    --success-bg:   rgba(52,211,153,0.12);
    --success-text: #34d399;
    --warning-bg:   rgba(240,180,41,0.12);
    --warning-text: #f0b429;
    --danger-bg:    rgba(239,100,97,0.12);
    --danger-text:  #ef6461;
    --info-bg:      rgba(91,155,213,0.12);
    --info-text:    #5b9bd5;

    /* 보더 */
    --border-subtle:   rgba(139,92,246,0.12);
    --border-emphasis: rgba(139,92,246,0.22);
    --border-focus:    rgba(139,92,246,0.55);

    /* 그림자 */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.40);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.50);
    --shadow-lg:   0 12px 32px rgba(0,0,0,0.60);
    --shadow-glow: 0 0 32px rgba(139,92,246,0.20);

    /* ── Glassmorphism tokens — Dark variant ── */
    --glass-bg:        rgba(30, 16, 53, 0.55);
    --glass-bg-hi:     rgba(39, 21, 69, 0.72);
    --glass-border:    rgba(192, 132, 252, 0.18);
    --glass-border-hi: rgba(192, 132, 252, 0.32);
    --glass-blur:      blur(32px) saturate(180%);
    --glass-shadow:    0 12px 48px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(192, 132, 252, 0.12) inset;
    --glass-glow:      0 0 80px rgba(139, 92, 246, 0.34);

    /* Page bg — v1.17.x .demo-page::before 메쉬 제거에 따른 보강 (4 blob on dark base) */
    --page-bg-from: #0A0514;
    --page-bg-to:   #120B20;
    --page-bg-radial:
        radial-gradient(circle at 12% 8%, rgba(139,92,246,0.42) 0%, transparent 55%),
        radial-gradient(circle at 88% 18%, rgba(192,132,252,0.32) 0%, transparent 58%),
        radial-gradient(circle at 78% 88%, rgba(167,139,250,0.38) 0%, transparent 58%),
        radial-gradient(circle at 22% 92%, rgba(124,58,237,0.30) 0%, transparent 58%),
        linear-gradient(135deg, var(--page-bg-from) 0%, var(--page-bg-to) 100%);

    /* 그래픽 악센트 */
    --gradient-accent: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    --gradient-surface: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
    --noise-opacity: 0.015;

    /* 차트 */
    --chart-primary:   #8B5CF6;
    --chart-secondary: #A78BFA;
    --chart-tertiary:  #52525c;

    /* 오버레이 */
    --overlay: rgba(10,5,20,0.88);
}

/* ═══════════════════════════════════════════════════════════
   7.9 NEO-BRUTALISM — 컬러풀 파스텔 + pure black border + offset shadow
   Gumroad / shadcn neobrutalism / 인디 SaaS / 크리에이터 도구 톤
   ═══════════════════════════════════════════════════════════ */
[data-theme="neo-brutalism"] {
    --bg-base:       #FFFBEB;       /* warm cream */
    --bg-surface:    #FFFBEB;
    --bg-elevated:   #FFFFFF;
    --bg-elevated-2: #FFF3D6;

    --text-primary:   #000000;
    --text-secondary: #1A1A1A;
    --text-tertiary:  #4A4A4A;
    --text-ghost:     #8A8A8A;

    --color-accent:    #FFD93D;       /* candy yellow */
    --color-accent-soft: #FFE97A;
    --accent-hover:    #F5C518;
    --accent-bg:       #FFD93D;
    --accent-glow:     none;
    --accent-text:     #000000;
    --on-accent:       #000000;

    /* Neo-Brutalism candy 팔레트 (Brutalist 모노톤과 차별) */
    --neo-pink:    #FF6B9D;
    --neo-blue:    #6BCFFF;
    --neo-green:   #B5FF7D;
    --neo-purple:  #D4A5FF;
    --neo-yellow:  #FFD93D;

    --color-success:        #4ADE80;
    --color-success-strong: #16A34A;
    --color-warning:        #FFD93D;
    --color-danger:         #FF6B9D;
    --color-danger-strong:  #EC4899;
    --color-info:           #6BCFFF;

    --success-bg: #B5FF7D;
    --warning-bg: #FFD93D;
    --danger-bg:  #FF6B9D;
    --info-bg:    #6BCFFF;

    --border-subtle:   #000000;
    --border-emphasis: #000000;
    --border-focus:    #FF6B9D;

    /* Neo-Brutalism 시그니처: solid offset shadow (blur 0) */
    --shadow-sm: 3px 3px 0 #000;
    --shadow-md: 5px 5px 0 #000;
    --shadow-lg: 8px 8px 0 #000;
    --shadow-glow: 5px 5px 0 var(--neo-pink);

    --gradient-accent:  none;
    --gradient-surface: none;

    --neo-border:      3px solid #000;
    --neo-border-thin: 2px solid #000;
    --neo-radius:      8px;
    --neo-font:        'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
    --neo-font-mono:   'JetBrains Mono', 'Space Mono', monospace;

    --chart-primary:   #000000;
    --chart-secondary: #FF6B9D;
    --chart-tertiary:  #6BCFFF;

    --overlay: rgba(255,251,235,0.95);
}

[data-theme="neo-brutalism-dark"] {
    --bg-base:       #1A1B26;       /* deep indigo-black */
    --bg-surface:    #1A1B26;
    --bg-elevated:   #24263A;
    --bg-elevated-2: #2E3050;

    --text-primary:   #FAFAFA;
    --text-secondary: #E0E0E0;
    --text-tertiary:  #B0B0B0;
    --text-ghost:     #707080;

    --color-accent:    #FFD93D;
    --color-accent-soft: #FFE97A;
    --accent-hover:    #FFE055;
    --accent-bg:       #FFD93D;
    --accent-glow:     none;
    --accent-text:     #000000;
    --on-accent:       #000000;

    --neo-pink:    #FF6B9D;
    --neo-blue:    #6BCFFF;
    --neo-green:   #B5FF7D;
    --neo-purple:  #D4A5FF;
    --neo-yellow:  #FFD93D;

    --color-success:        #4ADE80;
    --color-success-strong: #22C55E;
    --color-warning:        #FFD93D;
    --color-danger:         #FF6B9D;
    --color-danger-strong:  #EC4899;
    --color-info:           #6BCFFF;

    --success-bg: #4ADE80;
    --warning-bg: #FFD93D;
    --danger-bg:  #FF6B9D;
    --info-bg:    #6BCFFF;

    --border-subtle:   #FAFAFA;
    --border-emphasis: #FAFAFA;
    --border-focus:    #FF6B9D;

    /* Dark — white offset shadow */
    --shadow-sm: 3px 3px 0 #FAFAFA;
    --shadow-md: 5px 5px 0 #FAFAFA;
    --shadow-lg: 8px 8px 0 #FAFAFA;
    --shadow-glow: 5px 5px 0 var(--neo-pink);

    --gradient-accent:  none;
    --gradient-surface: none;

    --neo-border:      3px solid #FAFAFA;
    --neo-border-thin: 2px solid #FAFAFA;
    --neo-radius:      8px;
    --neo-font:        'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
    --neo-font-mono:   'JetBrains Mono', 'Space Mono', monospace;

    --chart-primary:   #FAFAFA;
    --chart-secondary: #FF6B9D;
    --chart-tertiary:  #6BCFFF;

    --overlay: rgba(26,27,38,0.95);
}

/* ═══════════════════════════════════════════════════════════
   7.10 CLAYMORPHISM — 부풀어 오른 점토 / 캔디 팔레트 / 3중 inset shadow
   Duolingo / Headspace / 웰니스 / 키즈 / 게임 톤
   ═══════════════════════════════════════════════════════════ */
[data-theme="claymorphism"] {
    --bg-base:       #F0E7FF;       /* soft lavender canvas */
    --bg-surface:    #F0E7FF;
    --bg-elevated:   #FFFFFF;
    --bg-elevated-2: #FFE5F0;

    --text-primary:   #4A3E6B;
    --text-secondary: #6B5E8B;
    --text-tertiary:  #8B7EAB;
    --text-ghost:     #B0A5C8;

    --color-accent:    #FF85B5;       /* candy pink */
    --color-accent-soft: #FFB5CC;
    --accent-hover:    #FF6BA5;
    --accent-bg:       #FFD1DC;
    --accent-glow:     rgba(255,133,181,0.35);
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    /* Claymorphism 캔디 팔레트 */
    --clay-pink:    #FF85B5;
    --clay-blue:    #85C5FF;
    --clay-yellow:  #FFD685;
    --clay-mint:    #85FFC5;
    --clay-purple:  #C5A5FF;

    --color-success:        #4ADE80;
    --color-success-strong: #16A34A;
    --color-warning:        #FBBF24;
    --color-danger:         #FF6B85;
    --color-danger-strong:  #EF4444;
    --color-info:           #85C5FF;

    --success-bg: #D1FAE5;
    --warning-bg: #FEF3C7;
    --danger-bg:  #FFE5EA;
    --info-bg:    #DBEAFE;

    --border-subtle:   rgba(74,62,107,0.10);
    --border-emphasis: rgba(74,62,107,0.18);
    --border-focus:    #FF85B5;

    /* Claymorphism 시그니처: 3중 shadow (inner dark + inner highlight + outer colored) */
    --clay-shadow-out:
        inset -4px -8px 14px rgba(74,62,107,0.10),
        inset 4px 4px 8px rgba(255,255,255,0.85),
        0 12px 28px rgba(255,133,181,0.22);
    --clay-shadow-out-sm:
        inset -2px -4px 8px rgba(74,62,107,0.08),
        inset 2px 2px 4px rgba(255,255,255,0.85),
        0 6px 14px rgba(255,133,181,0.18);
    --clay-shadow-pressed:
        inset 4px 6px 12px rgba(74,62,107,0.18),
        inset -2px -2px 6px rgba(255,255,255,0.70),
        0 2px 4px rgba(255,133,181,0.10);

    --shadow-sm:   var(--clay-shadow-out-sm);
    --shadow-md:   var(--clay-shadow-out);
    --shadow-lg:   var(--clay-shadow-out);
    --shadow-glow: 0 0 20px var(--accent-glow);

    --gradient-accent:  linear-gradient(135deg, #FF85B5 0%, #FFB5CC 100%);
    --gradient-surface: linear-gradient(145deg, #F8EFFF 0%, #F0E7FF 100%);

    --clay-radius:     28px;
    --clay-radius-sm:  18px;
    --clay-radius-pill: 9999px;
    --clay-font:       'Quicksand', 'Plus Jakarta Sans', 'Nunito', system-ui, sans-serif;

    --chart-primary:   #FF85B5;
    --chart-secondary: #85C5FF;
    --chart-tertiary:  #FFD685;

    --overlay: rgba(240,231,255,0.92);
}

[data-theme="claymorphism-dark"] {
    --bg-base:       #2A1F3D;       /* deep plum canvas */
    --bg-surface:    #2A1F3D;
    --bg-elevated:   #352849;
    --bg-elevated-2: #3F305A;

    --text-primary:   #F0E7FF;
    --text-secondary: #D5C5E5;
    --text-tertiary:  #B0A0C5;
    --text-ghost:     #806B98;

    --color-accent:    #FF85B5;
    --color-accent-soft: #FFB5CC;
    --accent-hover:    #FF9BC0;
    --accent-bg:       rgba(255,133,181,0.20);
    --accent-glow:     rgba(255,133,181,0.40);
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    --clay-pink:    #FF85B5;
    --clay-blue:    #85C5FF;
    --clay-yellow:  #FFD685;
    --clay-mint:    #85FFC5;
    --clay-purple:  #C5A5FF;

    --color-success:        #4ADE80;
    --color-success-strong: #22C55E;
    --color-warning:        #FBBF24;
    --color-danger:         #FF6B85;
    --color-danger-strong:  #EF4444;
    --color-info:           #85C5FF;

    --success-bg: rgba(74,222,128,0.18);
    --warning-bg: rgba(251,191,36,0.18);
    --danger-bg:  rgba(255,107,133,0.18);
    --info-bg:    rgba(133,197,255,0.18);

    --border-subtle:   rgba(240,231,255,0.10);
    --border-emphasis: rgba(240,231,255,0.18);
    --border-focus:    #FF85B5;

    /* Dark clay shadow — 더 진한 inner shadow + 밝은 highlight */
    --clay-shadow-out:
        inset -4px -8px 14px rgba(0,0,0,0.40),
        inset 4px 4px 8px rgba(255,255,255,0.08),
        0 12px 28px rgba(0,0,0,0.45);
    --clay-shadow-out-sm:
        inset -2px -4px 8px rgba(0,0,0,0.35),
        inset 2px 2px 4px rgba(255,255,255,0.08),
        0 6px 14px rgba(0,0,0,0.35);
    --clay-shadow-pressed:
        inset 4px 6px 12px rgba(0,0,0,0.50),
        inset -2px -2px 6px rgba(255,255,255,0.05),
        0 2px 4px rgba(0,0,0,0.20);

    --shadow-sm:   var(--clay-shadow-out-sm);
    --shadow-md:   var(--clay-shadow-out);
    --shadow-lg:   var(--clay-shadow-out);
    --shadow-glow: 0 0 20px var(--accent-glow);

    --gradient-accent:  linear-gradient(135deg, #FF85B5 0%, #C5A5FF 100%);
    --gradient-surface: linear-gradient(145deg, #3A2D52 0%, #2A1F3D 100%);

    --clay-radius:     28px;
    --clay-radius-sm:  18px;
    --clay-radius-pill: 9999px;
    --clay-font:       'Quicksand', 'Plus Jakarta Sans', 'Nunito', system-ui, sans-serif;

    --chart-primary:   #FF85B5;
    --chart-secondary: #85C5FF;
    --chart-tertiary:  #FFD685;

    --overlay: rgba(42,31,61,0.92);
}

/* ═══════════════════════════════════════════════════════════
   7.11 BENTO — Apple-style pearl grid / 비대칭 셀 / 절제된 액센트
   Apple 제품 페이지 / Notion / SaaS 피처 랜딩 톤
   ═══════════════════════════════════════════════════════════ */
[data-theme="bento"] {
    --bg-base:       #F5F5F7;       /* Apple pearl gray */
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #FFFFFF;
    --bg-elevated-2: #FAFAFC;

    --text-primary:   #1D1D1F;       /* Apple near-black */
    --text-secondary: #424245;
    --text-tertiary:  #6E6E73;
    --text-ghost:     #A1A1A6;

    --color-accent:    #0071E3;       /* Apple blue */
    --color-accent-soft: #5AC8FA;
    --accent-hover:    #0058B0;
    --accent-bg:       rgba(0,113,227,0.08);
    --accent-glow:     rgba(0,113,227,0.16);
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    --color-success:        #30D158;
    --color-success-strong: #248A3D;
    --color-warning:        #FF9500;
    --color-danger:         #FF453A;
    --color-danger-strong:  #C7372C;
    --color-info:           #0071E3;

    --success-bg: rgba(48,209,88,0.12);
    --warning-bg: rgba(255,149,0,0.12);
    --danger-bg:  rgba(255,69,58,0.12);
    --info-bg:    rgba(0,113,227,0.10);

    --border-subtle:   rgba(0,0,0,0.06);
    --border-emphasis: rgba(0,0,0,0.10);
    --border-focus:    #0071E3;

    /* Bento 시그니처: 부드러운 카드 shadow (Apple bento grid 톤) */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.06), 0 24px 56px rgba(0,0,0,0.08);
    --shadow-glow: 0 8px 28px rgba(0,113,227,0.20);

    --gradient-accent:  linear-gradient(135deg, #0071E3 0%, #5AC8FA 100%);
    --gradient-surface: linear-gradient(145deg, #FFFFFF 0%, #F5F5F7 100%);

    /* Bento 전용 토큰 — 비대칭 grid + 큰 radius */
    --bento-radius:        22px;
    --bento-radius-sm:     14px;
    --bento-gap:           16px;
    --bento-cell-pad:      28px;
    --bento-font:          -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif;
    --bento-font-display:  -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif;

    --chart-primary:   #0071E3;
    --chart-secondary: #30D158;
    --chart-tertiary:  #FF9500;

    --overlay: rgba(245,245,247,0.92);
}

[data-theme="bento-dark"] {
    --bg-base:       #000000;       /* Apple true black */
    --bg-surface:    #1C1C1E;
    --bg-elevated:   #1C1C1E;
    --bg-elevated-2: #2C2C2E;

    --text-primary:   #F5F5F7;
    --text-secondary: #D1D1D6;
    --text-tertiary:  #8E8E93;
    --text-ghost:     #636366;

    --color-accent:    #0A84FF;       /* Apple iOS dark accent */
    --color-accent-soft: #64D2FF;
    --accent-hover:    #409CFF;
    --accent-bg:       rgba(10,132,255,0.16);
    --accent-glow:     rgba(10,132,255,0.30);
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    --color-success:        #30D158;
    --color-success-strong: #32D74B;
    --color-warning:        #FF9F0A;
    --color-danger:         #FF453A;
    --color-danger-strong:  #FF3B30;
    --color-info:           #0A84FF;

    --success-bg: rgba(48,209,88,0.16);
    --warning-bg: rgba(255,159,10,0.16);
    --danger-bg:  rgba(255,69,58,0.16);
    --info-bg:    rgba(10,132,255,0.16);

    --border-subtle:   rgba(255,255,255,0.08);
    --border-emphasis: rgba(255,255,255,0.14);
    --border-focus:    #0A84FF;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.30);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.40), 0 12px 32px rgba(0,0,0,0.45);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.50), 0 24px 56px rgba(0,0,0,0.55);
    --shadow-glow: 0 8px 28px rgba(10,132,255,0.35);

    --gradient-accent:  linear-gradient(135deg, #0A84FF 0%, #64D2FF 100%);
    --gradient-surface: linear-gradient(145deg, #2C2C2E 0%, #1C1C1E 100%);

    --bento-radius:        22px;
    --bento-radius-sm:     14px;
    --bento-gap:           16px;
    --bento-cell-pad:      28px;
    --bento-font:          -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif;
    --bento-font-display:  -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif;

    --chart-primary:   #0A84FF;
    --chart-secondary: #30D158;
    --chart-tertiary:  #FF9F0A;

    --overlay: rgba(0,0,0,0.92);
}

/* ═══════════════════════════════════════════════════════════
   7.12 FRUTIGER AERO — 2000s Aqua gloss / sky + water + emerald
   Windows Vista / iTunes / 초기 Google / Sony 2006~2010 톤
   Gen Z 노스탤지아 · 자연/환경 SaaS · 뮤직 플레이어
   ═══════════════════════════════════════════════════════════ */
[data-theme="frutiger-aero"] {
    --bg-base:       #E6F3FF;       /* soft sky blue */
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #FFFFFF;
    --bg-elevated-2: #F0F8FF;

    --text-primary:   #0B3D5C;       /* deep ocean blue */
    --text-secondary: #2C5F85;
    --text-tertiary:  #5285AB;
    --text-ghost:     #8AB0CC;

    --color-accent:    #00AAFF;       /* Aqua bright blue — signature */
    --color-accent-soft: #66CFFF;
    --accent-hover:    #0095E5;
    --accent-bg:       rgba(0,170,255,0.10);
    --accent-glow:     rgba(0,170,255,0.40);
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    /* Frutiger 시그니처 컬러 */
    --aero-aqua:       #00AAFF;
    --aero-emerald:    #00C58A;
    --aero-sky:        #66CFFF;
    --aero-cyan:       #00E5FF;
    --aero-deep:       #0058A8;

    --color-success:        #00C58A;
    --color-success-strong: #008F60;
    --color-warning:        #FFB300;
    --color-danger:         #FF5252;
    --color-danger-strong:  #D32F2F;
    --color-info:           #00AAFF;

    --success-bg: rgba(0,197,138,0.12);
    --warning-bg: rgba(255,179,0,0.14);
    --danger-bg:  rgba(255,82,82,0.12);
    --info-bg:    rgba(0,170,255,0.12);

    --border-subtle:   rgba(0,88,168,0.16);
    --border-emphasis: rgba(0,88,168,0.32);
    --border-focus:    #00AAFF;

    /* Aqua glossy shadow — water bubble feel */
    --shadow-sm: 0 1px 3px rgba(0,88,168,0.10), 0 2px 8px rgba(0,170,255,0.10);
    --shadow-md: 0 4px 12px rgba(0,88,168,0.14), 0 8px 24px rgba(0,170,255,0.16);
    --shadow-lg: 0 8px 24px rgba(0,88,168,0.18), 0 16px 48px rgba(0,170,255,0.22);
    --shadow-glow: 0 0 20px rgba(0,170,255,0.45);

    /* Frutiger 시그니처: 상단 흰 하이라이트 + 아래 액센트 그라데이션 */
    --gradient-accent:
        linear-gradient(to bottom,
            rgba(255,255,255,0.55) 0%,
            rgba(255,255,255,0.10) 48%,
            rgba(0,170,255,0.95) 52%,
            rgba(0,88,168,1.0) 100%);
    --gradient-surface:
        linear-gradient(180deg, #E6F3FF 0%, #B6DFFF 60%, #E6F3FF 100%);
    --aero-sky-bg:
        radial-gradient(ellipse at top, rgba(102,207,255,0.5) 0%, transparent 55%),
        radial-gradient(ellipse at bottom, rgba(0,197,138,0.18) 0%, transparent 50%),
        linear-gradient(180deg, #B6DFFF 0%, #E6F3FF 50%, #FFFFFF 100%);

    /* Aero 전용 토큰 */
    --aero-radius:        14px;
    --aero-radius-sm:     10px;
    --aero-radius-pill:   999px;
    --aero-font:          'Frutiger', 'Helvetica Neue', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --aero-font-display:  'Frutiger', 'Helvetica Neue', -apple-system, 'Segoe UI', system-ui, sans-serif;

    --chart-primary:   #00AAFF;
    --chart-secondary: #00C58A;
    --chart-tertiary:  #FFB300;

    --overlay: rgba(230,243,255,0.92);
}

[data-theme="frutiger-aero-dark"] {
    /* Frutiger Aero dark — midnight aqua (Vista 다크 톤 회상) */
    --bg-base:       #051628;
    --bg-surface:    #0A2238;
    --bg-elevated:   #0E2B47;
    --bg-elevated-2: #133458;

    --text-primary:   #E6F3FF;
    --text-secondary: #B6DFFF;
    --text-tertiary:  #7DB5DC;
    --text-ghost:     #4A7A9C;

    --color-accent:    #00C8FF;       /* 더 밝은 아쿠아 (다크 위) */
    --color-accent-soft: #66E0FF;
    --accent-hover:    #33D5FF;
    --accent-bg:       rgba(0,200,255,0.16);
    --accent-glow:     rgba(0,200,255,0.55);
    --accent-text:     #051628;
    --on-accent:       #051628;

    --aero-aqua:       #00C8FF;
    --aero-emerald:    #00E5A0;
    --aero-sky:        #66E0FF;
    --aero-cyan:       #00FFEE;
    --aero-deep:       #0085C8;

    --color-success:        #00E5A0;
    --color-success-strong: #00C58A;
    --color-warning:        #FFC93D;
    --color-danger:         #FF6B6B;
    --color-danger-strong:  #FF5252;
    --color-info:           #00C8FF;

    --success-bg: rgba(0,229,160,0.18);
    --warning-bg: rgba(255,201,61,0.18);
    --danger-bg:  rgba(255,107,107,0.18);
    --info-bg:    rgba(0,200,255,0.18);

    --border-subtle:   rgba(102,224,255,0.14);
    --border-emphasis: rgba(102,224,255,0.28);
    --border-focus:    #00C8FF;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 2px 8px rgba(0,200,255,0.12);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.50), 0 8px 24px rgba(0,200,255,0.18);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.55), 0 16px 48px rgba(0,200,255,0.24);
    --shadow-glow: 0 0 20px rgba(0,200,255,0.60);

    --gradient-accent:
        linear-gradient(to bottom,
            rgba(255,255,255,0.32) 0%,
            rgba(255,255,255,0.05) 48%,
            rgba(0,200,255,0.95) 52%,
            rgba(0,133,200,1.0) 100%);
    --gradient-surface:
        linear-gradient(180deg, #0A2238 0%, #133458 60%, #0E2B47 100%);
    --aero-sky-bg:
        radial-gradient(ellipse at top, rgba(0,200,255,0.32) 0%, transparent 55%),
        radial-gradient(ellipse at bottom, rgba(0,229,160,0.16) 0%, transparent 50%),
        linear-gradient(180deg, #051628 0%, #0A2238 50%, #0E2B47 100%);

    --aero-radius:        14px;
    --aero-radius-sm:     10px;
    --aero-radius-pill:   999px;
    --aero-font:          'Frutiger', 'Helvetica Neue', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --aero-font-display:  'Frutiger', 'Helvetica Neue', -apple-system, 'Segoe UI', system-ui, sans-serif;

    --chart-primary:   #00C8FF;
    --chart-secondary: #00E5A0;
    --chart-tertiary:  #FFC93D;

    --overlay: rgba(5,22,40,0.92);
}

/* ═══════════════════════════════════════════════════════════
   7.13 CYBERPUNK / SYNTHWAVE — 네온 마젠타+시안 / vaporwave horizon
   인디 게임 · 일렉트로닉 뮤직 · NFT/Web3 · 이스포츠 톤
   ═══════════════════════════════════════════════════════════ */
[data-theme="cyberpunk"] {
    /* 라이트 = "Synthwave bright" — 다크가 메인이지만 light variant 도 제공 */
    --bg-base:       #FFF0F8;       /* rosy white */
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #FFFFFF;
    --bg-elevated-2: #FFE6F2;

    --text-primary:   #2A0F60;       /* deep purple */
    --text-secondary: #5A2A95;
    --text-tertiary:  #8A5BC0;
    --text-ghost:     #B89BD8;

    --color-accent:    #FF006E;       /* hot magenta — signature */
    --color-accent-soft: #00C8E5;
    --accent-hover:    #E60062;
    --accent-bg:       rgba(255,0,110,0.10);
    --accent-glow:     rgba(255,0,110,0.45);
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    /* Cyber 시그니처 컬러 */
    --cyber-magenta:   #FF006E;
    --cyber-cyan:      #00C8E5;
    --cyber-purple:    #B100E6;
    --cyber-pink:      #FF4F9F;
    --cyber-yellow:    #FFE600;

    --color-success:        #00E588;
    --color-success-strong: #00B36F;
    --color-warning:        #FFE600;
    --color-danger:         #FF006E;
    --color-danger-strong:  #C8005A;
    --color-info:           #00C8E5;

    --success-bg: rgba(0,229,136,0.14);
    --warning-bg: rgba(255,230,0,0.16);
    --danger-bg:  rgba(255,0,110,0.12);
    --info-bg:    rgba(0,200,229,0.12);

    --border-subtle:   rgba(255,0,110,0.22);
    --border-emphasis: rgba(177,0,230,0.40);
    --border-focus:    #FF006E;

    /* Light에서는 글로우 약하게 */
    --shadow-sm: 0 1px 2px rgba(177,0,230,0.10), 0 2px 6px rgba(255,0,110,0.10);
    --shadow-md: 0 4px 10px rgba(177,0,230,0.14), 0 8px 20px rgba(255,0,110,0.16);
    --shadow-lg: 0 8px 24px rgba(177,0,230,0.20), 0 16px 40px rgba(255,0,110,0.22);
    --shadow-glow: 0 0 18px rgba(255,0,110,0.55), 0 0 36px rgba(0,200,229,0.32);

    --gradient-accent:
        linear-gradient(135deg, #FF006E 0%, #B100E6 50%, #00C8E5 100%);
    --gradient-surface:
        linear-gradient(180deg, #FFF0F8 0%, #FFE6F2 50%, #FFFFFF 100%);
    --cyber-grid-bg:
        linear-gradient(180deg, transparent 60%, rgba(255,0,110,0.08) 100%),
        repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255,0,110,0.06) 39px, rgba(255,0,110,0.06) 40px),
        repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(0,200,229,0.06) 39px, rgba(0,200,229,0.06) 40px);

    /* Cyber 전용 토큰 */
    --cyber-radius:        4px;
    --cyber-radius-sm:     2px;
    --cyber-glow-text:     0 0 8px var(--accent-glow), 0 0 16px var(--accent-glow);
    --cyber-font:          'Inter', 'Space Grotesk', system-ui, sans-serif;
    --cyber-font-display:  'Orbitron', 'Audiowide', 'Inter', system-ui, sans-serif;
    --cyber-font-mono:     'Space Mono', 'JetBrains Mono', 'Courier New', monospace;

    --chart-primary:   #FF006E;
    --chart-secondary: #00C8E5;
    --chart-tertiary:  #FFE600;

    --overlay: rgba(255,240,248,0.92);
}

[data-theme="cyberpunk-dark"] {
    /* 다크 = 메인 cyberpunk 톤 */
    --bg-base:       #0A0118;       /* deep purple-black */
    --bg-surface:    #14062E;
    --bg-elevated:   #1F0B47;
    --bg-elevated-2: #2A0F60;

    --text-primary:   #F0E6FF;
    --text-secondary: #C8AFFF;
    --text-tertiary:  #9078C0;
    --text-ghost:     #5A4080;

    --color-accent:    #FF006E;       /* hot magenta */
    --color-accent-soft: #00F0FF;
    --accent-hover:    #FF338A;
    --accent-bg:       rgba(255,0,110,0.18);
    --accent-glow:     rgba(255,0,110,0.75);
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    --cyber-magenta:   #FF006E;
    --cyber-cyan:      #00F0FF;
    --cyber-purple:    #B100E6;
    --cyber-pink:      #FF4F9F;
    --cyber-yellow:    #FFE600;

    --color-success:        #00FF9F;
    --color-success-strong: #00E588;
    --color-warning:        #FFE600;
    --color-danger:         #FF006E;
    --color-danger-strong:  #FF338A;
    --color-info:           #00F0FF;

    --success-bg: rgba(0,255,159,0.16);
    --warning-bg: rgba(255,230,0,0.16);
    --danger-bg:  rgba(255,0,110,0.18);
    --info-bg:    rgba(0,240,255,0.16);

    --border-subtle:   rgba(255,0,110,0.28);
    --border-emphasis: rgba(0,240,255,0.45);
    --border-focus:    #00F0FF;

    /* 다크에서는 네온 글로우 강함 */
    --shadow-sm: 0 0 6px rgba(255,0,110,0.40), 0 0 12px rgba(0,240,255,0.20);
    --shadow-md: 0 0 12px rgba(255,0,110,0.55), 0 0 24px rgba(0,240,255,0.30);
    --shadow-lg: 0 0 24px rgba(255,0,110,0.65), 0 0 48px rgba(0,240,255,0.40);
    --shadow-glow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow);

    --gradient-accent:
        linear-gradient(135deg, #FF006E 0%, #B100E6 50%, #00F0FF 100%);
    --gradient-surface:
        linear-gradient(180deg, #0A0118 0%, #1F0B47 60%, #2A0F60 100%);
    --cyber-grid-bg:
        radial-gradient(ellipse at bottom, rgba(255,0,110,0.18) 0%, transparent 55%),
        linear-gradient(180deg, transparent 60%, rgba(177,0,230,0.20) 100%),
        repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255,0,110,0.10) 39px, rgba(255,0,110,0.10) 40px),
        repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(0,240,255,0.08) 39px, rgba(0,240,255,0.08) 40px),
        #0A0118;

    --cyber-radius:        4px;
    --cyber-radius-sm:     2px;
    --cyber-glow-text:     0 0 8px var(--accent-glow), 0 0 16px var(--accent-glow), 0 0 24px var(--accent-glow);
    --cyber-font:          'Inter', 'Space Grotesk', system-ui, sans-serif;
    --cyber-font-display:  'Orbitron', 'Audiowide', 'Inter', system-ui, sans-serif;
    --cyber-font-mono:     'Space Mono', 'JetBrains Mono', 'Courier New', monospace;

    --chart-primary:   #FF006E;
    --chart-secondary: #00F0FF;
    --chart-tertiary:  #FFE600;

    --overlay: rgba(10,1,24,0.92);
}

/* ═══════════════════════════════════════════════════════════
   7.14 SWISS / BAUHAUS — 기하학 정밀 + 빨강 단색 + Helvetica
   미술관 · 건축 사무소 · 럭셔리 갤러리 · 출판사 톤
   ═══════════════════════════════════════════════════════════ */
[data-theme="swiss"] {
    --bg-base:       #FAFAF7;       /* off-white (slightly warm) */
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #FFFFFF;
    --bg-elevated-2: #F0F0EE;

    --text-primary:   #000000;
    --text-secondary: #333333;
    --text-tertiary:  #808080;
    --text-ghost:     #BBBBBB;

    --color-accent:    #E30613;       /* Swiss red — International */
    --color-accent-soft: #FFE0E2;
    --accent-hover:    #B8050F;
    --accent-bg:       #FFE0E2;
    --accent-glow:     none;
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    /* Swiss 시그니처 — 한정된 단색 팔레트 */
    --swiss-red:       #E30613;
    --swiss-black:     #000000;
    --swiss-gray-90:   #1A1A1A;
    --swiss-gray-50:   #808080;
    --swiss-gray-20:   #CCCCCC;
    --swiss-gray-10:   #E5E5E5;
    --swiss-gray-05:   #F0F0EE;

    --color-success:        #1A1A1A;       /* 색 절제 — 빨강 외 단색 */
    --color-success-strong: #000000;
    --color-warning:        #E30613;
    --color-danger:         #E30613;
    --color-danger-strong:  #B8050F;
    --color-info:           #1A1A1A;

    --success-bg: #F0F0EE;
    --warning-bg: #FFE0E2;
    --danger-bg:  #FFE0E2;
    --info-bg:    #F0F0EE;

    --border-subtle:   #E5E5E5;
    --border-emphasis: #000000;
    --border-focus:    #E30613;

    /* 그림자 0 — Swiss 정통 (Brutalist 와 다른 점: 빨강 액센트 + 정밀 그리드) */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;

    --gradient-accent:  none;
    --gradient-surface: none;

    /* Swiss 전용 토큰 */
    --swiss-rule-thin:   1px;
    --swiss-rule-thick:  3px;
    --swiss-rule-mega:   8px;
    --swiss-radius:      0;
    --swiss-font:        'Helvetica Neue', 'Helvetica', 'Inter', 'Univers', 'Arial', sans-serif;
    --swiss-font-display:'Helvetica Neue', 'Helvetica', 'Inter', 'Univers', 'Arial', sans-serif;
    --swiss-font-mono:   'IBM Plex Mono', 'JetBrains Mono', 'Space Mono', monospace;

    --chart-primary:   #E30613;
    --chart-secondary: #000000;
    --chart-tertiary:  #808080;

    --overlay: rgba(250,250,247,0.95);
}

[data-theme="swiss-dark"] {
    --bg-base:       #000000;       /* pure black */
    --bg-surface:    #0A0A0A;
    --bg-elevated:   #141414;
    --bg-elevated-2: #1F1F1F;

    --text-primary:   #F5F5F2;
    --text-secondary: #C8C8C5;
    --text-tertiary:  #888888;
    --text-ghost:     #555555;

    --color-accent:    #E30613;       /* same red on black */
    --color-accent-soft: #FF6B73;
    --accent-hover:    #FF1F2D;
    --accent-bg:       rgba(227,6,19,0.18);
    --accent-glow:     none;
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    --swiss-red:       #E30613;
    --swiss-black:     #000000;
    --swiss-gray-90:   #F5F5F2;
    --swiss-gray-50:   #888888;
    --swiss-gray-20:   #333333;
    --swiss-gray-10:   #1F1F1F;
    --swiss-gray-05:   #0A0A0A;

    --color-success:        #F5F5F2;
    --color-success-strong: #FFFFFF;
    --color-warning:        #E30613;
    --color-danger:         #E30613;
    --color-danger-strong:  #FF1F2D;
    --color-info:           #F5F5F2;

    --success-bg: #1F1F1F;
    --warning-bg: rgba(227,6,19,0.18);
    --danger-bg:  rgba(227,6,19,0.18);
    --info-bg:    #1F1F1F;

    --border-subtle:   #333333;
    --border-emphasis: #F5F5F2;
    --border-focus:    #E30613;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;

    --gradient-accent:  none;
    --gradient-surface: none;

    --swiss-rule-thin:   1px;
    --swiss-rule-thick:  3px;
    --swiss-rule-mega:   8px;
    --swiss-radius:      0;
    --swiss-font:        'Helvetica Neue', 'Helvetica', 'Inter', 'Univers', 'Arial', sans-serif;
    --swiss-font-display:'Helvetica Neue', 'Helvetica', 'Inter', 'Univers', 'Arial', sans-serif;
    --swiss-font-mono:   'IBM Plex Mono', 'JetBrains Mono', 'Space Mono', monospace;

    --chart-primary:   #E30613;
    --chart-secondary: #F5F5F2;
    --chart-tertiary:  #888888;

    --overlay: rgba(0,0,0,0.95);
}

/* ═══════════════════════════════════════════════════════════
   7.15 AURORA / MESH GRADIENT — 다중 radial blob + grain + glass overlay
   AI 스타트업 · 모던 SaaS · ML 도구 · 크리에이티브 포트폴리오 hero 톤
   ═══════════════════════════════════════════════════════════ */
[data-theme="aurora"] {
    --bg-base:       #FAFBFF;       /* very subtle blue-tinted white */
    --bg-surface:    rgba(255,255,255,0.65);
    --bg-elevated:   #FFFFFF;
    --bg-elevated-2: #F0F4FF;

    --text-primary:   #0F172A;       /* deep slate */
    --text-secondary: #334155;
    --text-tertiary:  #64748B;
    --text-ghost:     #94A3B8;

    --color-accent:    #8B5CF6;       /* violet */
    --color-accent-soft: #A78BFA;
    --accent-hover:    #7C3AED;
    --accent-bg:       rgba(139,92,246,0.10);
    --accent-glow:     rgba(139,92,246,0.35);
    --accent-text:     #FFFFFF;
    --on-accent:       #FFFFFF;

    /* Aurora 시그니처 — mesh 색 포인트 */
    --aurora-violet:   #8B5CF6;
    --aurora-pink:     #EC4899;
    --aurora-teal:     #06B6D4;
    --aurora-blue:     #3B82F6;
    --aurora-amber:    #F59E0B;

    --color-success:        #10B981;
    --color-success-strong: #047857;
    --color-warning:        #F59E0B;
    --color-danger:         #EC4899;
    --color-danger-strong:  #BE185D;
    --color-info:           #3B82F6;

    --success-bg: rgba(16,185,129,0.12);
    --warning-bg: rgba(245,158,11,0.14);
    --danger-bg:  rgba(236,72,153,0.12);
    --info-bg:    rgba(59,130,246,0.12);

    --border-subtle:   rgba(15,23,42,0.08);
    --border-emphasis: rgba(15,23,42,0.14);
    --border-focus:    #8B5CF6;

    /* Soft modern shadow */
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.04), 0 4px 12px rgba(139,92,246,0.06);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 12px 32px rgba(139,92,246,0.10);
    --shadow-lg: 0 8px 24px rgba(15,23,42,0.08), 0 24px 56px rgba(139,92,246,0.14);
    --shadow-glow: 0 0 24px rgba(139,92,246,0.35), 0 0 48px rgba(236,72,153,0.18);

    --gradient-accent:
        linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #06B6D4 100%);
    --gradient-surface:
        linear-gradient(145deg, #FFFFFF 0%, #FAFBFF 100%);

    /* Aurora mesh — 다중 radial-gradient blob (시그니처) */
    --aurora-mesh-bg:
        radial-gradient(at 18% 22%, rgba(139,92,246,0.45) 0%, transparent 52%),
        radial-gradient(at 82% 18%, rgba(236,72,153,0.38) 0%, transparent 50%),
        radial-gradient(at 12% 78%, rgba(6,182,212,0.32) 0%, transparent 50%),
        radial-gradient(at 78% 82%, rgba(59,130,246,0.36) 0%, transparent 52%),
        radial-gradient(at 50% 50%, rgba(245,158,11,0.18) 0%, transparent 60%),
        #FAFBFF;
    /* Grain noise overlay — fractalNoise SVG */
    --aurora-grain:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");

    /* Aurora 전용 토큰 */
    --aurora-radius:        20px;
    --aurora-radius-sm:     12px;
    --aurora-radius-pill:   999px;
    --aurora-font:          'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
    --aurora-font-display:  'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;

    --chart-primary:   #8B5CF6;
    --chart-secondary: #06B6D4;
    --chart-tertiary:  #EC4899;

    --overlay: rgba(250,251,255,0.92);
}

[data-theme="aurora-dark"] {
    --bg-base:       #050816;       /* deep midnight */
    --bg-surface:    rgba(15,23,42,0.55);
    --bg-elevated:   #0F172A;
    --bg-elevated-2: #1E293B;

    --text-primary:   #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-tertiary:  #94A3B8;
    --text-ghost:     #64748B;

    --color-accent:    #A78BFA;       /* brighter violet on dark */
    --color-accent-soft: #C4B5FD;
    --accent-hover:    #B299FA;
    --accent-bg:       rgba(167,139,250,0.18);
    --accent-glow:     rgba(167,139,250,0.55);
    --accent-text:     #FFFFFF;
    --on-accent:       #050816;

    --aurora-violet:   #A78BFA;
    --aurora-pink:     #F472B6;
    --aurora-teal:     #22D3EE;
    --aurora-blue:     #60A5FA;
    --aurora-amber:    #FBBF24;

    --color-success:        #34D399;
    --color-success-strong: #10B981;
    --color-warning:        #FBBF24;
    --color-danger:         #F472B6;
    --color-danger-strong:  #EC4899;
    --color-info:           #60A5FA;

    --success-bg: rgba(52,211,153,0.18);
    --warning-bg: rgba(251,191,36,0.18);
    --danger-bg:  rgba(244,114,182,0.18);
    --info-bg:    rgba(96,165,250,0.18);

    --border-subtle:   rgba(241,245,249,0.08);
    --border-emphasis: rgba(241,245,249,0.16);
    --border-focus:    #A78BFA;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 4px 12px rgba(167,139,250,0.18);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.50), 0 12px 32px rgba(167,139,250,0.28);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.55), 0 24px 56px rgba(167,139,250,0.35);
    --shadow-glow: 0 0 28px rgba(167,139,250,0.55), 0 0 56px rgba(244,114,182,0.32);

    --gradient-accent:
        linear-gradient(135deg, #A78BFA 0%, #F472B6 50%, #22D3EE 100%);
    --gradient-surface:
        linear-gradient(145deg, #1E293B 0%, #0F172A 100%);

    /* Dark aurora mesh — 더 진하고 vibrant */
    --aurora-mesh-bg:
        radial-gradient(at 18% 22%, rgba(167,139,250,0.45) 0%, transparent 52%),
        radial-gradient(at 82% 18%, rgba(244,114,182,0.38) 0%, transparent 50%),
        radial-gradient(at 12% 78%, rgba(34,211,238,0.34) 0%, transparent 50%),
        radial-gradient(at 78% 82%, rgba(96,165,250,0.36) 0%, transparent 52%),
        radial-gradient(at 50% 50%, rgba(251,191,36,0.14) 0%, transparent 60%),
        #050816;
    --aurora-grain:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

    --aurora-radius:        20px;
    --aurora-radius-sm:     12px;
    --aurora-radius-pill:   999px;
    --aurora-font:          'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
    --aurora-font-display:  'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;

    --chart-primary:   #A78BFA;
    --chart-secondary: #22D3EE;
    --chart-tertiary:  #F472B6;

    --overlay: rgba(5,8,22,0.92);
}

/* ═══════════════════════════════════════════════════════════
   8. COMPONENT TOKENS — 시맨틱 컴포넌트 변수
   ═══════════════════════════════════════════════════════════ */
:root,
[data-theme="light"],
[data-theme="dark"] {
    /* 버튼 */
    --btn-height: 40px;
    --btn-height-sm: 32px;
    --btn-height-lg: 48px;
    --btn-padding-x: var(--space-4);
    --btn-padding-x-sm: var(--space-3);
    --btn-radius: var(--radius-md);
    --btn-font-size: var(--text-sm);
    --btn-font-weight: var(--font-weight-medium);

    /* 입력 */
    --input-height: 40px;
    --input-padding-x: var(--space-3);
    --input-radius: var(--radius-md);
    --input-font-size: var(--text-base);

    /* 카드 */
    --card-radius: var(--radius-lg);
    --card-padding: var(--space-6);
    --card-gap: var(--space-4);

    /* 뱃지 */
    --badge-padding-x: var(--space-2);
    --badge-padding-y: 2px;
    --badge-radius: var(--radius-sm);
    --badge-font-size: var(--text-xs);
    --badge-font-weight: var(--font-weight-semibold);

    /* 테이블 */
    --table-header-font-size: var(--text-xs);
    --table-cell-padding: var(--space-3) var(--space-4);

    /* 모달 */
    --modal-width: min(90vw, 480px);
    --modal-radius: var(--radius-xl);
    --modal-padding: var(--space-8);
    --modal-backdrop-blur: 12px;

    /* 토스트 */
    --toast-radius: var(--radius-md);
    --toast-padding: var(--space-3) var(--space-6);
    --toast-duration: 2500ms;

    /* 프로그레스 바 */
    --progress-height: 5px;
    --progress-radius: var(--radius-full);

    /* 그래디언트 라인 */
    --gradient-line-height: 1px;
    --gradient-line-opacity: 0.25;
}


/* ════════════════════════════════════════════════════════════
   LAYER 2 — COMPOSITION TOKENS (v1.10, 2026-05-20)
   ────────────────────────────────────────────────────────────
   기존 layer 1 (color / typography / spacing) 위에 얹는 layer.

   각 테마는 자기 *컴포지션 personality* 도 토큰으로 정의:
   - section padding / gap / divider 패턴
   - hero typography 크기
   - grid 비율 (대칭 / 비대칭 / joined)
   - card / button / input radius + chrome
   - section label 표현 스타일

   사용자는 `.demo-*` 공통 utility 만 쓰고 [data-theme] 만 바꾸면
   composition 자체가 테마 personality 로 바뀜.

   광범위 light+dark 매칭을 위해 `[data-theme^="..."]` (starts-with)
   셀렉터 사용. e.g. brutalist + brutalist-dark 모두 매칭.
   ════════════════════════════════════════════════════════════ */

/* ── BASELINE (light + dark 기본 + 미지정 fallback) ── */
:root {
    --compose-page-max:           980px;
    --compose-section-pad:        var(--space-10) var(--space-6);
    --compose-section-gap:        var(--space-8);
    --compose-section-divider:    none;
    --compose-stack-rhythm:       var(--space-5);

    --compose-hero-size:          clamp(2.5rem, 6vw, 4rem);
    --compose-hero-weight:        700;
    --compose-hero-tracking:      -0.025em;
    --compose-hero-leading:       1.05;

    --compose-grid-asymmetric:    1.3fr 1fr;
    --compose-grid-features:      repeat(auto-fit, minmax(220px, 1fr));
    --compose-grid-gap:           var(--space-4);
    --compose-grid-cell-divider:  none;

    --compose-card-pad:           var(--space-5);
    --compose-card-radius:        var(--radius-lg);
    --compose-card-bg:            var(--bg-surface);
    --compose-card-border:        1px solid var(--border-subtle);
    --compose-card-shadow:        var(--shadow-sm);

    --compose-button-pad:         10px 18px;
    --compose-button-radius:      var(--radius-md);
    --compose-button-font:        inherit;
    --compose-button-weight:      600;

    --compose-input-pad:          10px 14px;
    --compose-input-radius:       var(--radius-md);
    --compose-input-border:       1px solid var(--border-emphasis);
    --compose-input-bg:           var(--bg-surface);

    --compose-tag-pad:            4px 10px;
    --compose-tag-radius:         var(--radius-full);
    --compose-tag-font:           var(--font-mono);
    --compose-tag-weight:         600;
    --compose-tag-tracking:       0.06em;

    --compose-toolbar-bg:         var(--bg-base);
    --compose-toolbar-border:     1px solid var(--border-subtle);
    --compose-toolbar-pad:        12px 24px;

    --compose-label-bg:           transparent;
    --compose-label-fg:           var(--text-tertiary);
    --compose-label-pad:          0;
    --compose-label-tracking:     0.14em;
}

/* ── BRUTALIST — asymmetric / joined grid / thick black rule ── */
[data-theme^="brutalist"] {
    --compose-page-max:           1100px;
    --compose-section-pad:        56px 32px;
    --compose-section-gap:        0;                          /* joined */
    --compose-section-divider:    var(--brutalist-border-thick) solid var(--text-primary);
    --compose-stack-rhythm:       24px;

    --compose-hero-size:          clamp(3.5rem, 11vw, 7.5rem);
    --compose-hero-weight:        900;
    --compose-hero-tracking:      -0.04em;
    --compose-hero-leading:       0.92;

    --compose-grid-asymmetric:    1.2fr 1fr;
    --compose-grid-features:      repeat(3, 1fr);
    --compose-grid-gap:           0;
    --compose-grid-cell-divider:  var(--brutalist-border-thick) solid var(--text-primary);

    --compose-card-pad:           24px;
    --compose-card-radius:        0;
    --compose-card-bg:            var(--bg-base);
    --compose-card-border:        var(--brutalist-border-thick) solid var(--text-primary);
    --compose-card-shadow:        none;

    --compose-button-pad:         12px 20px;
    --compose-button-radius:      0;
    --compose-button-font:        var(--brutalist-font-display);
    --compose-button-weight:      700;

    --compose-input-pad:          14px 16px;
    --compose-input-radius:       0;
    --compose-input-border:       var(--brutalist-border-thick) solid var(--text-primary);
    --compose-input-bg:           var(--bg-base);

    --compose-tag-pad:            2px 8px;
    --compose-tag-radius:         0;
    --compose-tag-font:           var(--brutalist-font-mono);
    --compose-tag-weight:         700;
    --compose-tag-tracking:       0.12em;

    --compose-toolbar-bg:         var(--bg-base);
    --compose-toolbar-border:     var(--brutalist-border-mega) solid #000;
    --compose-toolbar-pad:        0;

    --compose-label-bg:           var(--text-primary);
    --compose-label-fg:           var(--bg-base);
    --compose-label-pad:          4px 10px;
    --compose-label-tracking:     0.18em;
}

/* ── EDITORIAL — line-only chrome / generous whitespace / 1단 ── */
[data-theme^="editorial"] {
    --compose-page-max:           800px;
    --compose-section-pad:        48px 24px;
    --compose-section-gap:        48px;
    --compose-section-divider:    1px solid var(--border-subtle);
    --compose-stack-rhythm:       20px;

    --compose-hero-size:          clamp(2.5rem, 6vw, 5rem);
    --compose-hero-weight:        500;
    --compose-hero-tracking:      -0.04em;
    --compose-hero-leading:       1.0;

    --compose-grid-asymmetric:    1fr;                        /* 1단 */
    --compose-grid-features:      repeat(auto-fit, minmax(220px, 1fr));
    --compose-grid-gap:           24px;
    --compose-grid-cell-divider:  none;

    --compose-card-pad:           20px;
    --compose-card-radius:        0;
    --compose-card-bg:            transparent;
    --compose-card-border:        1px solid var(--border-subtle);
    --compose-card-shadow:        none;

    --compose-button-pad:         8px 14px;
    --compose-button-radius:      0;
    --compose-button-font:        inherit;
    --compose-button-weight:      500;

    --compose-input-pad:          12px 0;
    --compose-input-radius:       0;
    --compose-input-border:       0;            /* underline 만 */
    --compose-input-bg:           transparent;

    --compose-tag-pad:            2px 8px;
    --compose-tag-radius:         0;
    --compose-tag-font:           var(--font-mono);
    --compose-tag-weight:         500;
    --compose-tag-tracking:       0.14em;

    --compose-toolbar-bg:         var(--bg-base);
    --compose-toolbar-border:     1px solid var(--border-subtle);
    --compose-toolbar-pad:        12px 24px;

    --compose-label-bg:           transparent;
    --compose-label-fg:           var(--text-tertiary);
    --compose-label-pad:          0;
    --compose-label-tracking:     0.14em;
}

/* ── MATERIAL 3 — rounded surface / tonal / elevation rhythm ── */
[data-theme^="tonal"] {
    --compose-page-max:           1100px;
    --compose-section-pad:        32px;
    --compose-section-gap:        24px;
    --compose-section-divider:    none;
    --compose-stack-rhythm:       16px;

    --compose-hero-size:          clamp(2.5rem, 5vw, 3.5rem);
    --compose-hero-weight:        500;
    --compose-hero-tracking:      0;
    --compose-hero-leading:       1.15;

    --compose-grid-asymmetric:    1.4fr 1fr;
    --compose-grid-features:      repeat(auto-fit, minmax(260px, 1fr));
    --compose-grid-gap:           16px;
    --compose-grid-cell-divider:  none;

    --compose-card-pad:           20px;
    --compose-card-radius:        var(--m3-shape-md);
    --compose-card-bg:            var(--bg-surface);
    --compose-card-border:        0;
    --compose-card-shadow:        var(--m3-elev-1);

    --compose-button-pad:         10px 20px;
    --compose-button-radius:      var(--m3-shape-full);
    --compose-button-font:        inherit;
    --compose-button-weight:      500;

    --compose-input-pad:          12px 16px;
    --compose-input-radius:       var(--m3-shape-xs);
    --compose-input-border:       1px solid var(--border-emphasis);
    --compose-input-bg:           var(--bg-elevated);

    --compose-tag-pad:            6px 12px;
    --compose-tag-radius:         var(--m3-shape-sm);
    --compose-tag-font:           var(--font-sans);
    --compose-tag-weight:         500;
    --compose-tag-tracking:       0.04em;

    --compose-toolbar-bg:         var(--bg-elevated);
    --compose-toolbar-border:     0;
    --compose-toolbar-pad:        12px 24px;

    --compose-label-bg:           var(--accent-bg);
    --compose-label-fg:           var(--color-accent);
    --compose-label-pad:          4px 10px;
    --compose-label-tracking:     0.10em;
}

/* ── iMAC G3 — translucent plastic / soft rounded / Aqua ── */
[data-theme^="candy-plastic"] {
    --compose-page-max:           960px;
    --compose-section-pad:        32px 24px;
    --compose-section-gap:        28px;
    --compose-section-divider:    none;
    --compose-stack-rhythm:       18px;

    --compose-hero-size:          clamp(2rem, 5vw, 3.25rem);
    --compose-hero-weight:        700;
    --compose-hero-tracking:      -0.01em;
    --compose-hero-leading:       1.05;

    --compose-grid-asymmetric:    1fr 1fr;
    --compose-grid-features:      repeat(auto-fit, minmax(240px, 1fr));
    --compose-grid-gap:           18px;
    --compose-grid-cell-divider:  none;

    --compose-card-pad:           18px;
    --compose-card-radius:        12px;
    --compose-card-bg:            var(--bg-surface);
    --compose-card-border:        1px solid var(--border-subtle);
    --compose-card-shadow:        var(--shadow-sm);

    --compose-button-pad:         0 14px;
    --compose-button-radius:      13px;
    --compose-button-font:        var(--imac-font-display);
    --compose-button-weight:      600;

    --compose-input-pad:          6px 12px;
    --compose-input-radius:       10px;
    --compose-input-border:       1px solid var(--border-emphasis);
    --compose-input-bg:           var(--bg-surface);

    --compose-tag-pad:            4px 12px;
    --compose-tag-radius:         9999px;
    --compose-tag-font:           var(--imac-font-display);
    --compose-tag-weight:         600;
    --compose-tag-tracking:       0.02em;

    --compose-toolbar-bg:         var(--imac-pinstripe);
    --compose-toolbar-border:     1px solid var(--border-emphasis);
    --compose-toolbar-pad:        10px 24px;

    --compose-label-bg:           rgba(255,255,255,0.6);
    --compose-label-fg:           var(--color-accent);
    --compose-label-pad:          3px 10px;
    --compose-label-tracking:     0.12em;
}

/* ── MEMPHIS — 두꺼운 검정 보더 / offset hard shadow / 컬러 폭발 ── */
[data-theme^="memphis"] {
    --compose-page-max:           1080px;
    --compose-section-pad:        40px 28px;
    --compose-section-gap:        28px;
    --compose-section-divider:    none;
    --compose-stack-rhythm:       20px;

    --compose-hero-size:          clamp(3rem, 8vw, 6rem);
    --compose-hero-weight:        900;
    --compose-hero-tracking:      -0.02em;
    --compose-hero-leading:       0.95;

    --compose-grid-asymmetric:    2fr 1fr;
    --compose-grid-features:      repeat(auto-fit, minmax(240px, 1fr));
    --compose-grid-gap:           20px;
    --compose-grid-cell-divider:  none;

    --compose-card-pad:           24px;
    --compose-card-radius:        0;
    --compose-card-bg:            var(--bg-surface);
    --compose-card-border:        4px solid var(--memphis-navy);   /* v1.13.3 — 살짝 더 볼드 */
    --compose-card-shadow:        var(--shadow-lg);                  /* 그림자도 더 강하게 */

    --compose-button-pad:         12px 22px;
    --compose-button-radius:      0;
    --compose-button-font:        inherit;
    --compose-button-weight:      900;                               /* v1.13.3 — 더 굵게 */

    --compose-input-pad:          12px 16px;
    --compose-input-radius:       0;
    --compose-input-border:       3px solid var(--memphis-navy);
    --compose-input-bg:           var(--bg-surface);

    --compose-tag-pad:            4px 12px;
    --compose-tag-radius:         0;
    --compose-tag-font:           var(--font-mono);
    --compose-tag-weight:         700;
    --compose-tag-tracking:       0.06em;

    --compose-toolbar-bg:         var(--memphis-yellow);
    --compose-toolbar-border:     3px solid var(--memphis-navy);
    --compose-toolbar-pad:        12px 24px;

    --compose-label-bg:           var(--memphis-yellow);
    --compose-label-fg:           var(--memphis-navy);
    --compose-label-pad:          4px 10px;
    --compose-label-tracking:     0.12em;
}

/* ── TERMINAL — mono / dashed divider / scanline / [bracketed] ── */
[data-theme^="terminal"] {
    --compose-page-max:           960px;
    --compose-section-pad:        24px 18px;
    --compose-section-gap:        20px;
    --compose-section-divider:    1px dashed var(--border-subtle);
    --compose-stack-rhythm:       14px;

    --compose-hero-size:          clamp(1.75rem, 4vw, 2.5rem);
    --compose-hero-weight:        700;
    --compose-hero-tracking:      0;
    --compose-hero-leading:       1.2;

    --compose-grid-asymmetric:    1fr 1fr;
    --compose-grid-features:      repeat(auto-fit, minmax(240px, 1fr));
    --compose-grid-gap:           14px;
    --compose-grid-cell-divider:  1px dashed var(--border-subtle);

    --compose-card-pad:           16px 18px;
    --compose-card-radius:        0;
    --compose-card-bg:            var(--bg-base);
    --compose-card-border:        1px solid var(--border-emphasis);
    --compose-card-shadow:        var(--shadow-glow);

    --compose-button-pad:         6px 14px;
    --compose-button-radius:      0;
    --compose-button-font:        var(--terminal-font);
    --compose-button-weight:      600;

    --compose-input-pad:          6px 4px;
    --compose-input-radius:       0;
    --compose-input-border:       0;             /* dashed bottom 만 */
    --compose-input-bg:           transparent;

    --compose-tag-pad:            1px 6px;
    --compose-tag-radius:         0;
    --compose-tag-font:           var(--terminal-font);
    --compose-tag-weight:         600;
    --compose-tag-tracking:       0.06em;

    --compose-toolbar-bg:         var(--bg-elevated);
    --compose-toolbar-border:     1px dashed var(--border-subtle);
    --compose-toolbar-pad:        10px 18px;

    --compose-label-bg:           transparent;
    --compose-label-fg:           var(--text-tertiary);
    --compose-label-pad:          0;
    --compose-label-tracking:     0.12em;
}

/* ── NEUMORPHISM — soft dual shadow / pill / single-tone ── */
[data-theme^="neumorphism"] {
    --compose-page-max:           1000px;
    --compose-section-pad:        32px 24px;
    --compose-section-gap:        36px;
    --compose-section-divider:    none;
    --compose-stack-rhythm:       20px;

    --compose-hero-size:          clamp(2.5rem, 6vw, 4rem);
    --compose-hero-weight:        700;
    --compose-hero-tracking:      -0.025em;
    --compose-hero-leading:       1.05;

    --compose-grid-asymmetric:    1.4fr 1fr;
    --compose-grid-features:      repeat(auto-fit, minmax(220px, 1fr));
    --compose-grid-gap:           18px;
    --compose-grid-cell-divider:  none;

    --compose-card-pad:           24px;
    --compose-card-radius:        var(--neu-radius);
    --compose-card-bg:            var(--bg-base);
    --compose-card-border:        0;
    --compose-card-shadow:        var(--neu-shadow-out);

    --compose-button-pad:         12px 22px;
    --compose-button-radius:      var(--neu-radius);
    --compose-button-font:        inherit;
    --compose-button-weight:      600;

    --compose-input-pad:          14px 18px;
    --compose-input-radius:       var(--neu-radius);
    --compose-input-border:       0;
    --compose-input-bg:           var(--bg-base);

    --compose-tag-pad:            6px 14px;
    --compose-tag-radius:         9999px;
    --compose-tag-font:           inherit;
    --compose-tag-weight:         600;
    --compose-tag-tracking:       0.04em;

    --compose-toolbar-bg:         var(--bg-base);
    --compose-toolbar-border:     0;
    --compose-toolbar-pad:        14px 22px;

    --compose-label-bg:           var(--bg-base);
    --compose-label-fg:           var(--text-tertiary);
    --compose-label-pad:          6px 14px;
    --compose-label-tracking:     0.14em;
}

/* ── PURPLE-HAZE (Glassmorphism) — translucent / backdrop blur / radial ── */
[data-theme^="purple-haze"] {
    --compose-page-max:           1080px;
    --compose-section-pad:        48px 56px;
    --compose-section-gap:        32px;
    --compose-section-divider:    none;
    --compose-stack-rhythm:       20px;

    --compose-hero-size:          clamp(2.5rem, 6vw, 4.5rem);
    --compose-hero-weight:        700;
    --compose-hero-tracking:      -0.025em;
    --compose-hero-leading:       1.08;

    --compose-grid-asymmetric:    1.3fr 1fr;
    --compose-grid-features:      repeat(auto-fit, minmax(260px, 1fr));
    --compose-grid-gap:           20px;
    --compose-grid-cell-divider:  none;

    --compose-card-pad:           24px;
    --compose-card-radius:        var(--radius-xl);
    --compose-card-bg:            var(--glass-bg);
    --compose-card-border:        1px solid var(--glass-border);
    --compose-card-shadow:        var(--glass-shadow);

    --compose-button-pad:         10px 20px;
    --compose-button-radius:      var(--radius-full);
    --compose-button-font:        inherit;
    --compose-button-weight:      600;

    --compose-input-pad:          12px 16px;
    --compose-input-radius:       var(--radius-lg);
    --compose-input-border:       1px solid var(--glass-border);
    --compose-input-bg:           var(--glass-bg-hi);

    --compose-tag-pad:            4px 12px;
    --compose-tag-radius:         9999px;
    --compose-tag-font:           var(--font-mono);
    --compose-tag-weight:         500;
    --compose-tag-tracking:       0.08em;

    --compose-toolbar-bg:         var(--glass-bg);
    --compose-toolbar-border:     1px solid var(--glass-border);
    --compose-toolbar-pad:        12px 24px;

    --compose-label-bg:           var(--glass-bg-hi);
    --compose-label-fg:           var(--color-accent);
    --compose-label-pad:          4px 12px;
    --compose-label-tracking:     0.14em;
}