/* ============================================================
   H2GO Design System Themes — 5 Concept CSS Variable Overrides
   ============================================================
   로드 순서: colors_and_type.css → … → design-themes.css (last)
   body[data-design="..."] 속성으로 활성화. 기본(default)은 속성 없음.
   ============================================================ */

/* ─── 01. Neon Holo — 사이버펑크 디스패치 터미널 ─────────────── */
body[data-design="neon-holo"] {
    --bg-black:               #08030f;
    --bg-dark:                #14082a;
    --bg-card:                #1a0830;
    --h2-blue:                #ec4899;
    --h2-blue-light:          #a855f7;
    --h2-blue-dark:           #be185d;
    --go-gray:                #6d5db8;
    --go-gray-dark:           #4a3d8a;
    --text-primary:           #f5f3ff;
    --text-white:             #f5f3ff;
    --text-muted:             #a78bfa;
    --border-color:           rgba(168,85,247,0.35);
    --surface-soft:           rgba(168,85,247,0.08);
    --surface-soft-border:    rgba(168,85,247,0.22);
    --surface-overlay:        rgba(8,3,15,0.92);
    --surface-deep:           rgba(20,8,42,0.80);
    --surface-deep-strong:    rgba(10,4,26,0.92);
    --field-readonly:         rgba(20,8,42,0.80);
    --ambient-primary:        rgba(236,72,153,0.16);
    --ambient-secondary:      rgba(34,211,238,0.08);
    --ambient-grid:           rgba(168,85,247,0.08);
    --shadow-card:            0 1px 0 rgba(168,85,247,0.10) inset, 0 12px 40px rgba(0,0,0,0.45);
    --shadow-glow-primary:    0 4px 20px rgba(236,72,153,0.38);
    --shadow-fab:             0 8px 24px rgba(236,72,153,0.40);
    --status-success:         #a3e635;
    --status-success-bg:      rgba(163,230,53,0.12);
    --status-success-bd:      rgba(163,230,53,0.38);
    --status-warn:            #fbbf24;
    --status-warn-bg:         rgba(251,191,36,0.12);
    --status-warn-bd:         rgba(251,191,36,0.38);
    --status-danger:          #f472b6;
    --status-danger-bg:       rgba(244,114,182,0.12);
    --status-danger-bd:       rgba(244,114,182,0.38);
    --status-info:            #22d3ee;
    --status-info-bg:         rgba(34,211,238,0.12);
    --status-info-bd:         rgba(34,211,238,0.30);
    --status-cancel:          #fb923c;
    --status-cancel-bg:       rgba(251,146,60,0.14);
    --status-cancel-bd:       rgba(251,146,60,0.40);
    --radius-sm:              2px;
    --radius-md:              2px;
    --radius-lg:              4px;
    --radius-pill:            4px;
    --font-sans:              'Space Grotesk','Noto Sans KR',sans-serif;
    --font-mono:              'JetBrains Mono','DM Mono',monospace;
}

/* ─── 02. Chrome Lux — 항공 콕핏 / 럭셔리 시계 ──────────────── */
body[data-design="chrome-lux"] {
    --bg-black:               #0c1118;
    --bg-dark:                #141b25;
    --bg-card:                #1c2433;
    --h2-blue:                #d4af6d;
    --h2-blue-light:          #f0d18a;
    --h2-blue-dark:           #a07c3f;
    --go-gray:                #8d96a5;
    --go-gray-dark:           #5a6477;
    --text-primary:           #e9edf3;
    --text-white:             #e9edf3;
    --text-muted:             #8d96a5;
    --border-color:           rgba(212,175,109,0.22);
    --surface-soft:           rgba(212,175,109,0.06);
    --surface-soft-border:    rgba(212,175,109,0.16);
    --surface-overlay:        rgba(12,17,24,0.93);
    --surface-deep:           rgba(20,27,37,0.84);
    --surface-deep-strong:    rgba(8,12,18,0.92);
    --field-readonly:         rgba(20,27,37,0.84);
    --ambient-primary:        rgba(212,175,109,0.10);
    --ambient-secondary:      rgba(240,209,138,0.06);
    --ambient-grid:           rgba(212,175,109,0.05);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 40px rgba(0,0,0,0.40);
    --shadow-glow-primary:    0 4px 16px rgba(212,175,109,0.30);
    --shadow-fab:             0 8px 24px rgba(212,175,109,0.35);
    --status-success:         #7fb069;
    --status-success-bg:      rgba(127,176,105,0.12);
    --status-success-bd:      rgba(127,176,105,0.38);
    --status-warn:            #d4af6d;
    --status-warn-bg:         rgba(212,175,109,0.12);
    --status-warn-bd:         rgba(212,175,109,0.38);
    --status-danger:          #d4634c;
    --status-danger-bg:       rgba(212,99,76,0.12);
    --status-danger-bd:       rgba(212,99,76,0.38);
    --status-info:            #8ab4e8;
    --status-info-bg:         rgba(138,180,232,0.12);
    --status-info-bd:         rgba(138,180,232,0.28);
    --status-cancel:          #d4af6d;
    --status-cancel-bg:       rgba(212,175,109,0.10);
    --status-cancel-bd:       rgba(212,175,109,0.30);
    --radius-sm:              4px;
    --radius-md:              6px;
    --radius-lg:              8px;
    --font-sans:              'Inter','Noto Sans KR',sans-serif;
    --font-mono:              'DM Mono','JetBrains Mono',monospace;
}

/* ─── 03. Sunset Warm — 휴머니스트 따스함 ───────────────────── */
body[data-design="sunset-warm"] {
    --bg-black:               #f7efe4;
    --bg-dark:                #fdf8ef;
    --bg-card:                #fffbf5;
    --h2-blue:                #c45a3a;
    --h2-blue-light:          #e8a878;
    --h2-blue-dark:           #8f3a22;
    --go-gray:                #7a6759;
    --go-gray-dark:           #5a4a3c;
    --text-primary:           #2d201a;
    --text-white:             #2d201a;
    --text-muted:             #7a6759;
    --border-color:           #e6d8c4;
    --surface-soft:           rgba(196,90,58,0.06);
    --surface-soft-border:    rgba(196,90,58,0.15);
    --surface-overlay:        rgba(253,248,239,0.96);
    --surface-deep:           rgba(230,216,196,0.92);
    --surface-deep-strong:    rgba(210,196,178,0.96);
    --field-readonly:         rgba(230,216,196,0.92);
    --ambient-primary:        rgba(196,90,58,0.10);
    --ambient-secondary:      rgba(232,168,120,0.08);
    --ambient-grid:           rgba(58,40,26,0.05);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.90) inset, 0 10px 32px rgba(45,32,26,0.08);
    --shadow-glow-primary:    0 4px 16px rgba(196,90,58,0.24);
    --shadow-fab:             0 8px 24px rgba(196,90,58,0.28);
    --status-success:         #6b9e5a;
    --status-success-bg:      rgba(107,158,90,0.14);
    --status-success-bd:      rgba(107,158,90,0.40);
    --status-warn:            #b48a2a;
    --status-warn-bg:         rgba(180,138,42,0.14);
    --status-warn-bd:         rgba(180,138,42,0.40);
    --status-danger:          #c45a3a;
    --status-danger-bg:       rgba(196,90,58,0.10);
    --status-danger-bd:       rgba(196,90,58,0.32);
    --status-info:            #2c3e5a;
    --status-info-bg:         rgba(44,62,90,0.10);
    --status-info-bd:         rgba(44,62,90,0.26);
    --status-cancel:          #7a4a5c;
    --status-cancel-bg:       rgba(122,74,92,0.10);
    --status-cancel-bd:       rgba(122,74,92,0.30);
    --radius-sm:              8px;
    --radius-md:              12px;
    --radius-lg:              16px;
    --font-sans:              'Inter','Noto Sans KR',sans-serif;
    --font-mono:              'DM Mono',monospace;
}

/* ─── 04. Flip Board — 공항 출발 안내판 ─────────────────────── */
body[data-design="flip-board"] {
    --bg-black:               #0a0c0f;
    --bg-dark:                #11151a;
    --bg-card:                #181c22;
    --h2-blue:                #ffb020;
    --h2-blue-light:          #ffd060;
    --h2-blue-dark:           #8a5e10;
    --go-gray:                #7d8694;
    --go-gray-dark:           #3f4754;
    --text-primary:           #f5f5ec;
    --text-white:             #f5f5ec;
    --text-muted:             #7d8694;
    --border-color:           rgba(255,176,32,0.18);
    --surface-soft:           rgba(255,176,32,0.06);
    --surface-soft-border:    rgba(255,176,32,0.18);
    --surface-overlay:        rgba(10,12,15,0.93);
    --surface-deep:           rgba(17,21,26,0.84);
    --surface-deep-strong:    rgba(8,10,13,0.93);
    --field-readonly:         rgba(17,21,26,0.84);
    --ambient-primary:        rgba(255,176,32,0.12);
    --ambient-secondary:      rgba(45,212,191,0.08);
    --ambient-grid:           rgba(255,176,32,0.05);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.45);
    --shadow-glow-primary:    0 4px 20px rgba(255,176,32,0.32);
    --shadow-fab:             0 8px 24px rgba(255,176,32,0.35);
    --status-success:         #2dd4bf;
    --status-success-bg:      rgba(45,212,191,0.12);
    --status-success-bd:      rgba(45,212,191,0.38);
    --status-warn:            #ffb020;
    --status-warn-bg:         rgba(255,176,32,0.12);
    --status-warn-bd:         rgba(255,176,32,0.38);
    --status-danger:          #ef4444;
    --status-danger-bg:       rgba(239,68,68,0.12);
    --status-danger-bd:       rgba(239,68,68,0.38);
    --status-info:            #2dd4bf;
    --status-info-bg:         rgba(45,212,191,0.12);
    --status-info-bd:         rgba(45,212,191,0.30);
    --status-cancel:          #ffb020;
    --status-cancel-bg:       rgba(255,176,32,0.10);
    --status-cancel-bd:       rgba(255,176,32,0.32);
    --radius-sm:              2px;
    --radius-md:              2px;
    --radius-lg:              3px;
    --radius-pill:            3px;
    --font-sans:              'Space Grotesk','Noto Sans KR',sans-serif;
    --font-mono:              'JetBrains Mono','DM Mono',monospace;
}

/* ─── 05. Hanji Ink — 한지·수묵·주사 인장 ────────────────────── */
body[data-design="hanji-ink"] {
    --bg-black:               #f3ece0;
    --bg-dark:                #ebe2d2;
    --bg-card:                #e2d6bf;
    --h2-blue:                #c0382b;
    --h2-blue-light:          #d45544;
    --h2-blue-dark:           #8a2418;
    --go-gray:                #7a7062;
    --go-gray-dark:           #5a5248;
    --text-primary:           #1a1612;
    --text-white:             #1a1612;
    --text-muted:             #7a7062;
    --border-color:           rgba(26,22,18,0.15);
    --surface-soft:           rgba(192,56,43,0.06);
    --surface-soft-border:    rgba(192,56,43,0.14);
    --surface-overlay:        rgba(235,226,210,0.96);
    --surface-deep:           rgba(215,205,188,0.94);
    --surface-deep-strong:    rgba(200,188,170,0.96);
    --field-readonly:         rgba(215,205,188,0.94);
    --ambient-primary:        rgba(192,56,43,0.08);
    --ambient-secondary:      rgba(61,107,92,0.06);
    --ambient-grid:           rgba(26,22,18,0.05);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.70) inset, 0 10px 32px rgba(26,22,18,0.07);
    --shadow-glow-primary:    0 4px 16px rgba(192,56,43,0.22);
    --shadow-fab:             0 8px 24px rgba(192,56,43,0.26);
    --status-success:         #3d6b5c;
    --status-success-bg:      rgba(61,107,92,0.12);
    --status-success-bd:      rgba(61,107,92,0.34);
    --status-warn:            #b48a2a;
    --status-warn-bg:         rgba(180,138,42,0.12);
    --status-warn-bd:         rgba(180,138,42,0.34);
    --status-danger:          #c0382b;
    --status-danger-bg:       rgba(192,56,43,0.10);
    --status-danger-bd:       rgba(192,56,43,0.30);
    --status-info:            #2c3e5a;
    --status-info-bg:         rgba(44,62,90,0.10);
    --status-info-bd:         rgba(44,62,90,0.26);
    --status-cancel:          #7a4a5c;
    --status-cancel-bg:       rgba(122,74,92,0.10);
    --status-cancel-bd:       rgba(122,74,92,0.28);
    --radius-sm:              4px;
    --radius-md:              6px;
    --radius-lg:              10px;
    --font-sans:              'Noto Sans KR',sans-serif;
    --font-mono:              'DM Mono',monospace;
}

/* ─── 06. Editorial Press — 신문·출판 편집 미학 ──────────────── */
body[data-design="editorial-press"] {
    --bg-black:               #f5f1ea;
    --bg-dark:                #ede8df;
    --bg-card:                #ffffff;
    --h2-blue:                #1a3025;
    --h2-blue-light:          #4a6b5a;
    --h2-blue-dark:           #0e1f18;
    --go-gray:                #7a8378;
    --go-gray-dark:           #5c6b5e;
    --text-primary:           #1a1f1c;
    --text-white:             #1a1f1c;
    --text-muted:             #5c6b5e;
    --border-color:           #e8e2d6;
    --surface-soft:           rgba(26,48,37,0.05);
    --surface-soft-border:    rgba(26,48,37,0.12);
    --surface-overlay:        rgba(245,241,234,0.96);
    --surface-deep:           rgba(237,232,223,0.94);
    --surface-deep-strong:    rgba(225,219,208,0.96);
    --field-readonly:         rgba(237,232,223,0.94);
    --ambient-primary:        rgba(26,48,37,0.06);
    --ambient-secondary:      rgba(74,107,90,0.05);
    --ambient-grid:           rgba(26,31,28,0.04);
    --shadow-card:            0 1px 0 rgba(255,255,255,1) inset, 0 8px 24px rgba(26,31,28,0.07);
    --shadow-glow-primary:    0 4px 12px rgba(26,48,37,0.18);
    --shadow-fab:             0 8px 24px rgba(26,48,37,0.22);
    --status-success:         #1a3025;
    --status-success-bg:      rgba(26,48,37,0.10);
    --status-success-bd:      rgba(26,48,37,0.30);
    --status-warn:            #8a5c1a;
    --status-warn-bg:         rgba(138,92,26,0.10);
    --status-warn-bd:         rgba(138,92,26,0.30);
    --status-danger:          #8a2418;
    --status-danger-bg:       rgba(138,36,24,0.08);
    --status-danger-bd:       rgba(138,36,24,0.26);
    --status-info:            #2c4a5c;
    --status-info-bg:         rgba(44,74,92,0.08);
    --status-info-bd:         rgba(44,74,92,0.22);
    --status-cancel:          #5c6b5e;
    --status-cancel-bg:       rgba(92,107,94,0.08);
    --status-cancel-bd:       rgba(92,107,94,0.24);
    --radius-sm:              2px;
    --radius-md:              4px;
    --radius-lg:              4px;
    --radius-pill:            2px;
    --font-sans:              'Outfit','Noto Sans KR',sans-serif;
    --font-mono:              'JetBrains Mono','DM Mono',monospace;
}

/* ─── 07. Mono Grid — 그리드·모노스페이스 시스템 ─────────────── */
body[data-design="mono-grid"] {
    --bg-black:               #faf9f6;
    --bg-dark:                #f0ede6;
    --bg-card:                #faf9f6;
    --h2-blue:                #0d5c3d;
    --h2-blue-light:          #1a8a5c;
    --h2-blue-dark:           #084028;
    --go-gray:                #4a5851;
    --go-gray-dark:           #2e3832;
    --text-primary:           #14201a;
    --text-white:             #14201a;
    --text-muted:             #4a5851;
    --border-color:           rgba(20,32,26,0.18);
    --surface-soft:           rgba(13,92,61,0.05);
    --surface-soft-border:    rgba(13,92,61,0.14);
    --surface-overlay:        rgba(250,249,246,0.96);
    --surface-deep:           rgba(237,234,228,0.94);
    --surface-deep-strong:    rgba(224,220,212,0.96);
    --field-readonly:         rgba(237,234,228,0.94);
    --ambient-primary:        rgba(13,92,61,0.06);
    --ambient-secondary:      rgba(20,32,26,0.04);
    --ambient-grid:           rgba(20,32,26,0.04);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 24px rgba(20,32,26,0.06);
    --shadow-glow-primary:    0 4px 12px rgba(13,92,61,0.20);
    --shadow-fab:             0 8px 24px rgba(13,92,61,0.24);
    --status-success:         #0d5c3d;
    --status-success-bg:      rgba(13,92,61,0.10);
    --status-success-bd:      rgba(13,92,61,0.32);
    --status-warn:            #8a5c1a;
    --status-warn-bg:         rgba(138,92,26,0.10);
    --status-warn-bd:         rgba(138,92,26,0.30);
    --status-danger:          #8a3a2e;
    --status-danger-bg:       rgba(138,58,46,0.08);
    --status-danger-bd:       rgba(138,58,46,0.26);
    --status-info:            #0d5c3d;
    --status-info-bg:         rgba(13,92,61,0.08);
    --status-info-bd:         rgba(13,92,61,0.22);
    --status-cancel:          #4a5851;
    --status-cancel-bg:       rgba(74,88,81,0.08);
    --status-cancel-bd:       rgba(74,88,81,0.24);
    --radius-sm:              1px;
    --radius-md:              1px;
    --radius-lg:              2px;
    --radius-pill:            2px;
    --font-sans:              'Outfit','Noto Sans KR',sans-serif;
    --font-mono:              'JetBrains Mono','DM Mono',monospace;
}

/* ─── 08. Soft Bento — 민트·소프트 벤토 ─────────────────────── */
body[data-design="soft-bento"] {
    --bg-black:               #eef4f0;
    --bg-dark:                #f4f7f1;
    --bg-card:                rgba(255,255,255,0.85);
    --h2-blue:                #10b981;
    --h2-blue-light:          #34d399;
    --h2-blue-dark:           #0e8967;
    --go-gray:                #5f6b65;
    --go-gray-dark:           #3f4d46;
    --text-primary:           #1f2926;
    --text-white:             #1f2926;
    --text-muted:             #6b7d72;
    --border-color:           rgba(16,185,129,0.18);
    --surface-soft:           rgba(16,185,129,0.06);
    --surface-soft-border:    rgba(16,185,129,0.18);
    --surface-overlay:        rgba(244,247,241,0.96);
    --surface-deep:           rgba(232,243,237,0.94);
    --surface-deep-strong:    rgba(218,234,226,0.96);
    --field-readonly:         rgba(232,243,237,0.94);
    --ambient-primary:        rgba(16,185,129,0.10);
    --ambient-secondary:      rgba(16,185,129,0.06);
    --ambient-grid:           rgba(31,41,38,0.04);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 30px rgba(31,41,38,0.06);
    --shadow-glow-primary:    0 4px 16px rgba(16,185,129,0.24);
    --shadow-fab:             0 8px 24px rgba(16,185,129,0.28);
    --status-success:         #0e8967;
    --status-success-bg:      rgba(14,137,103,0.10);
    --status-success-bd:      rgba(14,137,103,0.32);
    --status-warn:            #c49e3a;
    --status-warn-bg:         rgba(196,158,58,0.10);
    --status-warn-bd:         rgba(196,158,58,0.30);
    --status-danger:          #d45a3a;
    --status-danger-bg:       rgba(212,90,58,0.08);
    --status-danger-bd:       rgba(212,90,58,0.26);
    --status-info:            #10b981;
    --status-info-bg:         rgba(16,185,129,0.08);
    --status-info-bd:         rgba(16,185,129,0.22);
    --status-cancel:          #6b7d72;
    --status-cancel-bg:       rgba(107,125,114,0.08);
    --status-cancel-bd:       rgba(107,125,114,0.24);
    --radius-sm:              10px;
    --radius-md:              14px;
    --radius-lg:              20px;
    --radius-pill:            999px;
    --font-sans:              'Outfit','Noto Sans KR',sans-serif;
    --font-mono:              'JetBrains Mono','DM Mono',monospace;
}

/* ─── 09. Urban Grid — 어반·오렌지·다크 ─────────────────────── */
body[data-design="urban-grid"] {
    --bg-black:               #0f1115;
    --bg-dark:                #13171d;
    --bg-card:                #1a1f27;
    --h2-blue:                #f55434;
    --h2-blue-light:          #ff7a5c;
    --h2-blue-dark:           #c03818;
    --go-gray:                #6e7587;
    --go-gray-dark:           #3f4754;
    --text-primary:           #e9ecf2;
    --text-white:             #e9ecf2;
    --text-muted:             #a8aebe;
    --border-color:           rgba(245,84,52,0.25);
    --surface-soft:           rgba(245,84,52,0.08);
    --surface-soft-border:    rgba(245,84,52,0.22);
    --surface-overlay:        rgba(15,17,21,0.93);
    --surface-deep:           rgba(19,23,29,0.84);
    --surface-deep-strong:    rgba(10,12,16,0.93);
    --field-readonly:         rgba(19,23,29,0.84);
    --ambient-primary:        rgba(245,84,52,0.12);
    --ambient-secondary:      rgba(245,84,52,0.06);
    --ambient-grid:           rgba(245,245,250,0.025);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.45);
    --shadow-glow-primary:    0 4px 20px rgba(245,84,52,0.35);
    --shadow-fab:             0 8px 24px rgba(245,84,52,0.38);
    --status-success:         #2dd4bf;
    --status-success-bg:      rgba(45,212,191,0.10);
    --status-success-bd:      rgba(45,212,191,0.32);
    --status-warn:            #f59e0b;
    --status-warn-bg:         rgba(245,158,11,0.10);
    --status-warn-bd:         rgba(245,158,11,0.32);
    --status-danger:          #f55434;
    --status-danger-bg:       rgba(245,84,52,0.10);
    --status-danger-bd:       rgba(245,84,52,0.32);
    --status-info:            #a8aebe;
    --status-info-bg:         rgba(168,174,190,0.08);
    --status-info-bd:         rgba(168,174,190,0.24);
    --status-cancel:          #6e7587;
    --status-cancel-bg:       rgba(110,117,135,0.10);
    --status-cancel-bd:       rgba(110,117,135,0.28);
    --radius-sm:              2px;
    --radius-md:              2px;
    --radius-lg:              3px;
    --radius-pill:            3px;
    --font-sans:              'Outfit','Noto Sans KR',sans-serif;
    --font-mono:              'JetBrains Mono','DM Mono',monospace;
}

/* ─── 10. Organic Garden — 유기농·세이지·서체 ───────────────── */
body[data-design="organic-garden"] {
    --bg-black:               #f6f1e6;
    --bg-dark:                #ede8d8;
    --bg-card:                #fefcf6;
    --h2-blue:                #5f8d59;
    --h2-blue-light:          #7aad74;
    --h2-blue-dark:           #3f6438;
    --go-gray:                #8a7861;
    --go-gray-dark:           #6a5c48;
    --text-primary:           #2d3a2e;
    --text-white:             #2d3a2e;
    --text-muted:             #6b7a64;
    --border-color:           rgba(45,58,46,0.14);
    --surface-soft:           rgba(95,141,89,0.06);
    --surface-soft-border:    rgba(95,141,89,0.16);
    --surface-overlay:        rgba(254,252,246,0.96);
    --surface-deep:           rgba(237,232,216,0.94);
    --surface-deep-strong:    rgba(220,214,197,0.96);
    --field-readonly:         rgba(237,232,216,0.94);
    --ambient-primary:        rgba(95,141,89,0.08);
    --ambient-secondary:      rgba(196,158,108,0.06);
    --ambient-grid:           rgba(45,58,46,0.04);
    --shadow-card:            0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 28px rgba(45,58,46,0.06);
    --shadow-glow-primary:    0 4px 14px rgba(95,141,89,0.22);
    --shadow-fab:             0 8px 24px rgba(95,141,89,0.26);
    --status-success:         #3f6438;
    --status-success-bg:      rgba(63,100,56,0.10);
    --status-success-bd:      rgba(63,100,56,0.30);
    --status-warn:            #b48a2a;
    --status-warn-bg:         rgba(180,138,42,0.10);
    --status-warn-bd:         rgba(180,138,42,0.28);
    --status-danger:          #9a3020;
    --status-danger-bg:       rgba(154,48,32,0.08);
    --status-danger-bd:       rgba(154,48,32,0.24);
    --status-info:            #2c4a5c;
    --status-info-bg:         rgba(44,74,92,0.08);
    --status-info-bd:         rgba(44,74,92,0.22);
    --status-cancel:          #8a7861;
    --status-cancel-bg:       rgba(138,120,97,0.08);
    --status-cancel-bd:       rgba(138,120,97,0.24);
    --radius-sm:              6px;
    --radius-md:              10px;
    --radius-lg:              16px;
    --radius-pill:            999px;
    --font-sans:              'Outfit','Noto Sans KR',sans-serif;
    --font-mono:              'DM Mono',monospace;
}

/* ============================================================
   Design System Picker UI
   ============================================================ */

.design-theme-switcher {
    position: relative;
}

.design-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--w-medium);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.design-theme-btn:hover {
    border-color: var(--h2-blue);
    color: var(--text-primary);
    background: var(--ambient-primary);
}

.design-btn-swatches {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.design-btn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(128,128,128,0.20);
}

.design-theme-caret {
    margin-left: 1px;
    opacity: 0.5;
    transition: transform var(--dur-fast);
    flex-shrink: 0;
}
.design-theme-btn[aria-expanded="true"] .design-theme-caret {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* Panel */
.design-theme-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 236px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card), 0 8px 32px rgba(0,0,0,0.22);
    z-index: 9999;
    padding: 6px;
    animation: dtPanelIn var(--dur-fast) var(--ease-out);
}
@keyframes dtPanelIn {
    from { opacity: 0; transform: translateY(-5px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.design-theme-panel-header {
    font-size: 10px;
    font-weight: var(--w-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 10px 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.design-theme-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--dur-fast);
    text-align: left;
}
.design-theme-item:hover {
    background: var(--surface-soft);
}
.design-theme-item.active {
    background: var(--ambient-primary);
}

.design-item-swatches {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.di-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(128,128,128,0.18);
    flex-shrink: 0;
}

.design-item-texts { flex: 1; min-width: 0; }

.design-item-name {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    line-height: 1.3;
}
.design-item-desc {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.design-item-check {
    flex-shrink: 0;
    color: var(--h2-blue);
    opacity: 0;
    transition: opacity var(--dur-fast);
}
.design-theme-item.active .design-item-check { opacity: 1; }