/** * Dark Mode Theme v4.0 — Premium Design System * * v4.0: OKLCH 기반 프리미엄 다크모드 (2026-03-30) * - Warm Charcoal 색온도 (Linear/Vercel 참조) * - 8단계 OKLCH Surface 계층 (L*10→L*32, 3% 균등 스텝) * - Accent Glow 시스템 (Blue soft glow) * - WCAG AA 준수 (text-primary 12:1, secondary 6:1, tertiary 4.5:1) * - Shadow: border-first elevation + inset depth * * 사용법: */ [data-theme="dark"] { /* ========================================= 1. BACKGROUND SYSTEM — OKLCH 8-level Warm Charcoal + 미세 Blue Tint (Hue 250) L* 3% 균등 스텝: 10→13→16→19→22→25→28→32 ========================================= */ --color-background: var(--shade-50); /* T611-2 (2026-05-10) — admin-surface 다크 토큰 (analytics-search-panel + 다른 var(--admin-surface, #ffffff) fallback 라이트 색상 유지 갭 해소). atmospheric 4-layer 완성 */ --admin-surface: var(--color-surface); /* card / panel layer (라이트는 fallback #ffffff) */ --admin-surface-subtle: var(--color-surface-variant); --admin-text-strong: var(--color-text-primary); --admin-text-muted: var(--color-text-secondary); --admin-bg-hover: color-mix(in oklch, var(--color-surface) 92%, var(--blue-400) 8%); --admin-border: var(--color-border-primary); /* D군 값결정 (2026-07-23 사용자 승인·L1.2 hold 해제): dark 테마 커버리지 결손 보충 — default 동일값. 라이트 정의는 themes/_variables/default.variables.css:23. --transition-fast는 여기 두면 안 됨 — theme.css는 런타임 lazy-append라 reduced-motion.css(정적 후순위) override를 이겨버림(실측) → 01-design-tokens/animations.css dark 블록에 배치 */ --color-secondary: #6c757d; /* Semantic BG aliases */ --color-bg-secondary: var(--color-surface); --color-bg-tertiary: var(--color-surface-variant); /* ========================================= 1B. SURFACE ALIAS (8-level hierarchy) OKLCH perceptually uniform steps ========================================= */ /* ========================================= 1C. TABLE TOKENS ========================================= */ /* bet KPI card 다크 모드 override — P2-5 (2026-05-12) cyan hue 212 정체성 유지 */ /* surface-elevated (L=24%) 대비 L=28% + cyan tint → "Primary" emphasis 회복 */ --color-info-cyan-soft-bg: var(--ds-info-soft-bg, var(--color-status-info-soft-bg)); --color-info-cyan-soft-border: var(--ds-info-soft-border, var(--color-status-info-soft-border)); /* KPI icon 다크 모드 전용 토큰 — V2 semantic palette compatibility */ /* 패턴: neutral graphite surface + restrained semantic accent */ --kpi-icon-green-bg: var(--ds-success-soft-bg, var(--color-status-success-soft-bg)); --kpi-icon-green-color: var(--ds-success-soft-text, var(--color-status-success-soft-text)); /* @deprecated (DARK-RELIGHT 2026-07-08): gold-named, 값은 blue 재배선 */ --kpi-icon-gold-bg: var(--ds-brand-soft-bg, var(--blue-900)); --kpi-icon-gold-color: var(--ds-brand-soft-text, var(--blue-300)); --kpi-icon-red-bg: var(--ds-danger-soft-bg, var(--color-status-danger-soft-bg)); --kpi-icon-red-soft-bg: var(--ds-danger-soft-bg, var(--color-status-danger-soft-bg)); --kpi-icon-red-color: var(--ds-danger-soft-text, var(--color-status-danger-soft-text)); --kpi-icon-neutral-bg: color-mix(in oklch, var(--color-text-secondary) 10%, transparent); /* count */ --kpi-icon-neutral-color: var(--color-text-secondary); --table-row-bg: var(--surface-2); --table-row-alt-bg: var(--surface-1); --table-row-hover-bg: var(--surface-3); --table-row-selected-bg: var(--color-selection-bg); --table-border: var(--color-border-primary); --table-border-subtle: color-mix(in oklch, var(--shade-400) 50%, transparent); /* ========================================= 1D. BADGE NEUTRAL TOKENS ========================================= */ --badge-neutral-bg: var(--surface-2); --badge-neutral-text: var(--color-text-secondary); --badge-neutral-border: var(--color-border-primary); /* Status Surface Tokens — OKLCH glassmorphism soft style 동일 Hue에서 bg(12%)/border(25%)/text 일관 생성 */ --color-status-neutral-soft-bg: color-mix(in oklch, var(--ash-500) 10%, transparent); /* neutral */ /* ========================================= 2. TEXT SYSTEM — OKLCH 5-level hierarchy Warm-tinted text with precise contrast ========================================= */ /* T666 (2026-05-10) Color & Contrast polish — tertiary AA(5.4:1) → AAA(7:1), disabled 3.2:1 → AA(4.5:1) */ --color-text-muted: var(--color-text-secondary); /* Bootstrap 5 dark-mode overrides — prevent light-mode fallbacks */ --bs-body-color: var(--color-text-primary); --bs-secondary-color: var(--color-text-secondary); /* .text-muted, .text-body-secondary */ --bs-tertiary-color: var(--color-text-disabled); --bs-emphasis-color: var(--color-text-heading); /* .text-body-emphasis */ --bs-heading-color: var(--color-text-heading); --bs-body-bg: var(--color-background); --bs-secondary-bg: var(--surface-3); --bs-tertiary-bg: var(--surface-2); --bs-border-color: oklch(28% 0.015 250deg); --bs-link-color: var(--ds-text-link, var(--blue-300)); --bs-link-hover-color: var(--ds-text-link-hover, var(--blue-250)); --bs-code-color: oklch(75% 0.15 350deg); --color-text-on-primary: var(--ds-on-brand, var(--color-white)); /* ========================================= 3. BORDER & DIVIDER SYSTEM — OKLCH 3-level ========================================= */ --color-border-secondary: var(--shade-200); --color-border-strong: var(--shade-500); /* ========================================= 4. SHADOW & ELEVATION SYSTEM — v4.0 Border-first + OKLCH glow ========================================= */ --shadow-xs: 0 1px 2px oklch(0% 0 0deg / 0.3); --shadow-sm: 0 1px 3px oklch(0% 0 0deg / 0.2), 0 1px 2px oklch(0% 0 0deg / 0.12); --shadow-sm-hover: 0 2px 6px oklch(0% 0 0deg / 0.3); --shadow-md: 0 4px 8px oklch(0% 0 0deg / 0.25), 0 2px 4px oklch(0% 0 0deg / 0.15); --shadow-lg: 0 10px 20px oklch(0% 0 0deg / 0.3); --shadow-xl: 0 16px 32px oklch(0% 0 0deg / 0.4); --shadow-2xl: 0 24px 48px oklch(0% 0 0deg / 0.45); --shadow-inner: inset 0 1px 2px oklch(0% 0 0deg / 0.15); /* Composite elevation (border + layered shadow) */ --shadow-card: 0 0 0 1px var(--color-border-secondary), 0 1px 3px oklch(0% 0 0deg / 0.2), 0 1px 2px oklch(0% 0 0deg / 0.12); --shadow-modal: 0 0 0 1px var(--color-border-primary), 0 16px 48px oklch(0% 0 0deg / 0.5), 0 8px 16px oklch(0% 0 0deg / 0.2); --shadow-modal-lg: 0 0 0 1px var(--color-border-primary), 0 20px 60px oklch(0% 0 0deg / 0.6); --shadow-modal-xl: 0 0 0 1px var(--color-border-primary), 0 24px 64px oklch(0% 0 0deg / 0.7); --shadow-dropdown: 0 0 0 1px var(--color-border-primary), 0 4px 16px oklch(0% 0 0deg / 0.35), 0 2px 6px oklch(0% 0 0deg / 0.15); /* Focus rings — Blue glow */ --shadow-focus: 0 0 0 2px var(--color-background), 0 0 0 4px color-mix(in oklch, var(--blue-400) 40%, transparent); --shadow-focus-primary: 0 0 0 2px var(--color-background), 0 0 0 4px color-mix(in oklch, var(--blue-400) 40%, transparent), 0 0 12px color-mix(in oklch, var(--blue-400) 20%, transparent); /* soft glow */ --shadow-focus-danger: 0 0 0 2px var(--color-background), 0 0 0 4px oklch(70% 0.20 25deg / 0.6); --shadow-focus-success: 0 0 0 2px var(--color-background), 0 0 0 4px oklch(72% 0.19 155deg / 0.6); /* Button shadows */ --shadow-button: 0 1px 2px oklch(0% 0 0deg / 0.3); --shadow-button-hover: 0 4px 12px oklch(0% 0 0deg / 0.35); --shadow-button-hover-lg: 0 6px 16px oklch(0% 0 0deg / 0.4); /* Accent glow system (Linear-inspired) */ --shadow-glow: 0 0 15px color-mix(in oklch, var(--blue-400) 50%, transparent); --shadow-glow-sm: 0 0 8px color-mix(in oklch, var(--blue-400) 35%, transparent); --shadow-glow-subtle: 0 0 20px color-mix(in oklch, var(--blue-400) 12%, transparent); /* Colored shadows — OKLCH */ --shadow-primary-sm: 0 2px 8px color-mix(in oklch, var(--blue-400) 15%, transparent); --shadow-primary-sm-hover: 0 2px 8px color-mix(in oklch, var(--blue-400) 25%, transparent); --shadow-primary: 0 4px 12px color-mix(in oklch, var(--blue-400) 25%, transparent); --shadow-primary-lg: 0 8px 20px color-mix(in oklch, var(--blue-400) 30%, transparent); --shadow-danger-sm: 0 2px 4px oklch(70% 0.20 25deg / 0.2); --shadow-danger: 0 4px 12px oklch(70% 0.20 25deg / 0.2); --shadow-success-sm: 0 2px 4px oklch(72% 0.19 155deg / 0.2); --shadow-success: 0 4px 12px oklch(72% 0.19 155deg / 0.2); --shadow-warning-sm: 0 2px 4px oklch(78% 0.16 60deg / 0.2); --shadow-warning: 0 4px 12px oklch(78% 0.16 60deg / 0.2); --shadow-blue-sm: 0 2px 4px oklch(68% 0.15 240deg / 0.2); --shadow-blue-sm-hover: 0 3px 6px oklch(68% 0.15 240deg / 0.25); --shadow-blue-md: 0 2px 6px oklch(68% 0.15 240deg / 0.3); --shadow-blue-lg: 0 2px 6px oklch(68% 0.15 240deg / 0.4); --shadow-purple-sm: 0 4px 15px oklch(62% 0.25 310deg / 0.15); --shadow-purple-lg: 0 6px 20px oklch(62% 0.25 310deg / 0.3); --shadow-button-glow: 0 6px 20px oklch(62% 0.25 310deg / 0.3); /* ========================================= 5. SEMANTIC COLORS — OKLCH perceptual ========================================= */ /* Primary (Blue — dark mode action/accent) */ --color-primary-200: var(--blue-900); --color-primary-300: var(--blue-300); --color-primary-400: var(--blue-400); /* --ds-brand는 dark-saas-tokens-v2(메인 앱 전용)에서 정의. 로그인 등 독립 페이지는 미로드 → 빈 값 방지 위해 blue 프리미티브 폴백. */ --color-primary-500: var(--ds-brand, var(--blue-500)); --color-primary-600: var(--ds-brand-hover, var(--blue-600)); --color-primary-700: var(--blue-700); --color-primary-800: var(--blue-800); /* RESOLVED-TOKEN CONTRACT (JS/canvas consumers) — blue-400 brand indicator. */ --color-primary-500-rgb: 67, 148, 255; /* RESOLVED-TOKEN CONTRACT (JS/canvas consumers) — blue-300 brand hover. */ --color-primary-600-rgb: 114, 175, 255; /* Success */ --color-success: oklch(72% 0.19 155deg); --color-success-rgb: 81, 207, 102; --color-success-50: oklch(18% 0.04 155deg); --color-success-100: oklch(22% 0.06 155deg); --color-success-300: oklch(80% 0.16 155deg); --color-success-400: oklch(76% 0.18 155deg); --color-success-500: oklch(72% 0.19 155deg); --color-success-600: oklch(62% 0.17 155deg); --color-success-700: oklch(52% 0.15 155deg); --color-success-500-rgb: 81, 207, 102; /* Warning (Orange) */ --color-warning: var(--amber-600); --color-warning-rgb: 253, 153, 21; --color-warning-50: oklch(18% 0.04 60deg); --color-warning-100: oklch(24% 0.06 60deg); --color-warning-300: oklch(84% 0.12 60deg); --color-warning-400: oklch(80% 0.15 60deg); --color-warning-500: var(--amber-600); --color-warning-600: var(--amber-600); --color-warning-500-rgb: 253, 153, 21; --color-warning-600-rgb: 253, 153, 21; /* Danger */ --color-danger: oklch(70% 0.20 25deg); --color-danger-rgb: 255, 107, 107; --color-danger-50: oklch(18% 0.05 25deg); --color-danger-100: oklch(22% 0.06 25deg); --color-danger-200: oklch(35% 0.10 25deg); --color-danger-300: oklch(80% 0.14 25deg); --color-danger-400: oklch(75% 0.18 25deg); --color-danger-500: oklch(70% 0.20 25deg); --color-danger-600: oklch(58% 0.22 25deg); --color-danger-700: oklch(48% 0.20 25deg); --color-danger-500-rgb: 255, 107, 107; /* Info — Cyan */ --color-info: var(--cyan-400); --color-info-rgb: 75, 181, 201; --color-info-50: oklch(18% 0.04 210deg); --color-info-100: oklch(22% 0.05 210deg); --color-info-300: oklch(88% 0.10 210deg); --color-info-400: var(--cyan-400); --color-info-500: var(--cyan-400); --color-info-600: oklch(65% 0.13 210deg); --color-info-500-rgb: 75, 181, 201; --color-purple-50: oklch(18% 0.06 310deg); /* purple */ --color-purple-300: oklch(80% 0.15 310deg); --color-purple-400: oklch(72% 0.20 310deg); --color-purple-500: oklch(62% 0.25 310deg); --color-purple-600: oklch(55% 0.22 310deg); --color-purple-500-rgb: 204, 93, 232; --color-purple-600-rgb: 174, 62, 201; --color-orange-100: oklch(24% 0.06 60deg); /* orange */ --color-orange-500: oklch(78% 0.16 60deg); --color-orange-600: oklch(65% 0.18 55deg); --color-pink-400: oklch(72% 0.15 350deg); /* pink */ --color-pink-500: oklch(60% 0.22 350deg); /* ========================================= 6. GRAY SCALE — OKLCH inverted for dark ========================================= */ --color-gray-600-rgb: 209, 213, 219; /* ========================================= 6B. TAILWIND EXTENDED PALETTE RGB (dark-brightened) [DM-QA] 라이트 500-level이 다크 배경에서 대비 부족 → 400-level 값으로 밝혀서 가독성 확보 ========================================= */ --color-blue-500-rgb: 67, 148, 255; --color-blue-400-rgb: 67, 148, 255; --color-green-500-rgb: 69, 186, 91; --color-red-500-rgb: 239, 101, 105; --color-amber-400-rgb: 254, 200, 75; --color-violet-500-rgb: 105, 127, 233; --color-cyan-500-rgb: 75, 181, 201; /* ========================================= 7. BADGE COLORS (dark-tuned) ========================================= */ --color-badge-pink: var(--template-chip-10-bg, var(--badge-danger-bg, color-mix(in srgb, var(--color-danger-500) 52%, var(--color-surface) 48%))); --color-badge-red: var(--template-chip-02-bg, var(--badge-danger-bg, color-mix(in srgb, var(--color-danger-500) 52%, var(--color-surface) 48%))); --color-badge-orange: var(--template-chip-12-bg, var(--badge-warning-bg, color-mix(in srgb, var(--color-warning-500) 52%, var(--color-surface) 48%))); --color-badge-green: var(--template-chip-03-bg, var(--badge-success-bg, color-mix(in srgb, var(--color-success-500) 52%, var(--color-surface) 48%))); --color-badge-skyblue: var(--template-chip-09-bg, var(--badge-info-bg, color-mix(in srgb, var(--color-info-500) 52%, var(--color-surface) 48%))); --color-badge-purple: var(--template-chip-11-bg, color-mix(in srgb, var(--color-purple-500) 38%, var(--color-surface) 62%)); --color-badge-gray: var(--badge-neutral-bg, var(--color-surface)); --color-badge-lightgreen: var(--template-chip-15-bg, var(--badge-success-bg, color-mix(in srgb, var(--color-success-500) 52%, var(--color-surface) 48%))); --color-badge-yellow: var(--template-chip-04-bg, var(--badge-warning-bg, color-mix(in srgb, var(--color-warning-500) 52%, var(--color-surface) 48%))); --color-badge-darkblue: var(--template-chip-14-bg, var(--badge-info-bg, color-mix(in srgb, var(--color-info-500) 44%, var(--color-surface) 56%))); --color-badge-brown: var(--template-chip-12-bg, var(--badge-warning-bg, color-mix(in srgb, var(--color-warning-500) 40%, var(--color-surface) 60%))); /* ========================================= 8. GAME STATUS COLORS ========================================= */ /* ========================================= 9. OVERLAY & BACKDROP ========================================= */ --color-overlay-light: oklch(0% 0 0deg / 0.6); --color-overlay-dark: oklch(0% 0 0deg / 0.85); --color-backdrop: oklch(0% 0 0deg / 0.7); --color-overlay-loader: oklch(10% 0.015 250deg / 0.92); /* ========================================= 10. DISABLED STATES ========================================= */ --color-disabled-text: oklch(38% 0.008 250deg); --color-disabled-bg: oklch(13% 0.012 250deg); --color-disabled-border: oklch(21% 0.012 250deg); /* ========================================= 11. STATE OPACITIES (boosted for dark) ========================================= */ --opacity-hover: 0.12; --opacity-active: 0.16; --opacity-selected: 0.20; /* ========================================= 12. COMPONENT TOKENS ========================================= */ /* Header */ --header-bg: var(--color-surface); --header-border: var(--color-border-primary); /* Sidebar */ --sidebar-bg: var(--color-surface); --sidebar-border: var(--color-border-primary); /* Content */ --content-bg: var(--color-background); /* Navbar */ --navbar-bg: var(--color-surface); /* Modal */ --modal-bg: var(--color-surface-elevated); /* Drawer */ --drawer-bg: var(--color-surface-elevated); /* Footer */ --footer-bg: var(--color-surface); /* Form elements */ --disabled-bg: var(--color-disabled-bg); --disabled-text: var(--color-disabled-text); --disabled-border: var(--color-disabled-border); /* Button — cancel (Tabler gray-400 → white text WCAG AA) */ --btn-color-cancel: var(--neutral-600); /* white text 5.3:1 WCAG AA PASS */ /* ========================================= 13. SIZING PARITY (visual-parity fix) Only tokens directly consumed by VP-measured elements (btn, badge). Avoid --font-size-base which cascades to th via --font-size-md alias and causes th fontSize regression. ========================================= */ /* Badge font sizes — base tokens now px-based (S3 DR fix), no rem shrink */ --font-size-xs: 12px; /* [S-grade] 11→12px — aligned with typography.css */ --font-size-sm: 12px; /* [S-grade] 11→12px — sm >= xs 스케일 정상화 */ /* Button sizing — root 16px 기준 */ --btn-font-size: var(--font-size-14); /* 14px (0.875 × 16) */ --btn-padding-y: 0.375rem; --btn-padding-x: 0.75rem; --btn-border-width: 1px; --btn-border-radius: var(--radius-sm, 0.25rem); /* ========================================= 14. FONT RENDERING (dark mode readability) ========================================= */ /* 자간 — 다크모드에서 약간 넓혀 가독성 향상 */ --letter-spacing-normal: 0.01em; /* light: 0em → dark: 0.01em */ --letter-spacing-tight: -0.01em; /* light: -0.025em → dark: -0.01em */ /* 행간 — 다크모드에서 약간 넓혀 시각 밀도 완화 */ --line-height-normal: 1.55; /* light: 1.5 → dark: 1.55 */ } /* ========================================= GLOBAL DARK MODE STYLES ========================================= */ [data-theme="dark"] body { background-color: var(--color-background); color: var(--color-text-primary); /* T695 (2026-05-11) ROLLBACK — antialiased 다크 모드 룰 제거. Win Chrome ClearType subpixel rendering 활용 (다크 배경에서도 Chrome 색 보정 적용 후 subpixel 색번짐 무관, modern Chrome 120+ 정착). */ } /* ========================================= Form Controls ========================================= */ [data-theme="dark"] .form-control { background-color: var(--surface-1); border-color: var(--color-border-secondary); color: var(--color-text-primary); box-shadow: var(--shadow-inner); /* v4.0: inset depth */ } [data-theme="dark"] .form-control:focus { border-color: var(--color-primary-400); box-shadow: var(--shadow-inner), var(--shadow-focus-primary); /* v4.0: inset + blue glow */ } [data-theme="dark"] .form-control::placeholder { color: var(--color-text-tertiary); } /* ========================================= Cards ========================================= */ [data-theme="dark"] .card { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-primary) 100%); border: 1px solid var(--color-border-secondary); box-shadow: var(--shadow-card); color: var(--color-text-primary); } /* ========================================= Tables (readable zebra) ========================================= */ [data-theme="dark"] .data-table th { background-color: var(--color-surface-variant); border-color: var(--color-border-primary); color: var(--color-text-secondary); } [data-theme="dark"] .data-table td { border-color: var(--color-border-primary); color: var(--color-text-primary); } [data-theme="dark"] .data-table tbody tr:nth-child(even) { background-color: var(--color-surface-variant); } [data-theme="dark"] .data-table tbody tr:hover { background-color: var(--surface-3); box-shadow: inset 3px 0 0 var(--color-primary-500); /* v4.0: left accent bar */ } /* ========================================= Buttons ========================================= */ [data-theme="dark"] .btn-secondary { background-color: var(--color-surface-variant); color: var(--color-white); border: 1px solid var(--color-text-primary); } [data-theme="dark"] .btn-secondary:hover { background-color: var(--color-surface-elevated); border-color: var(--color-text-primary); } /* ========================================= Modals ========================================= */ [data-theme="dark"] .modal-content { background-color: var(--color-surface-elevated); color: var(--color-text-primary); box-shadow: var(--shadow-modal); } /* ========================================= Dropdowns ========================================= */ [data-theme="dark"] .dropdown-menu { background-color: var(--color-surface-elevated); border-color: var(--color-border-primary); box-shadow: var(--shadow-dropdown); } [data-theme="dark"] .dropdown-item { color: var(--color-text-primary); } [data-theme="dark"] .dropdown-item:hover { background-color: var(--color-surface-variant); } /* ========================================= Badges (semantic colors) ========================================= */ [data-theme="dark"] .badge { background-color: var(--color-surface-variant); color: var(--color-text-primary); } /* ========================================= Tooltips ========================================= */ [data-theme="dark"] .tooltip { background-color: var(--color-surface-elevated); border-color: var(--color-border-primary); } /* ========================================= Sidebar ========================================= */ [data-theme="dark"] .sidebar { background-color: var(--color-surface); border-color: var(--color-border-primary); } /* ========================================= Alerts (type-specific dark backgrounds) ========================================= */ [data-theme="dark"] .alert { background-color: var(--alert-bg, var(--ds-panel-raised-bg, var(--color-surface-variant))); border-color: var(--alert-border, var(--ds-border-default, var(--color-border-primary))); border-left-color: var(--alert-rail, var(--ds-accent-muted-indicator, var(--color-border-primary))); color: var(--alert-text, var(--ds-text-primary, var(--color-text-primary))); box-shadow: var(--alert-shadow, none); } [data-theme="dark"] .alert-primary { --alert-bg: var(--alert-primary-bg, var(--ds-panel-raised-bg)); --alert-border: var(--alert-primary-border, var(--ds-accent-soft-border)); --alert-rail: var(--alert-primary-rail, var(--ds-accent-muted-indicator)); --alert-text: var(--alert-primary-text, var(--ds-text-primary)); } [data-theme="dark"] .alert-info { --alert-bg: var(--alert-info-bg, var(--ds-panel-raised-bg)); --alert-border: var(--alert-info-border, var(--ds-info-soft-border)); --alert-rail: var(--alert-info-rail, var(--data-info-indicator)); --alert-text: var(--alert-info-text, var(--ds-text-primary)); } [data-theme="dark"] .alert-success { --alert-bg: var(--alert-success-bg, var(--ds-panel-raised-bg)); --alert-border: var(--alert-success-border, var(--ds-success-soft-border)); --alert-rail: var(--alert-success-rail, var(--data-positive-indicator)); --alert-text: var(--alert-success-text, var(--ds-text-primary)); } [data-theme="dark"] .alert-warning { --alert-bg: var(--alert-warning-bg, var(--ds-panel-raised-bg)); --alert-border: var(--alert-warning-border, var(--ds-warning-soft-border)); --alert-rail: var(--alert-warning-rail, var(--data-caution-indicator)); --alert-text: var(--alert-warning-text, var(--ds-text-primary)); } [data-theme="dark"] .alert-danger { --alert-bg: var(--alert-danger-bg, var(--ds-panel-raised-bg)); --alert-border: var(--alert-danger-border, var(--ds-danger-soft-border)); --alert-rail: var(--alert-danger-rail, var(--data-negative-indicator)); --alert-text: var(--alert-danger-text, var(--ds-text-primary)); } /* ========================================= Pagination ========================================= */ [data-theme="dark"] .pagination .page-link { background-color: var(--color-surface); border-color: var(--color-border-primary); color: var(--color-text-primary); } [data-theme="dark"] .pagination .page-link:hover { background-color: var(--color-surface-variant); } /* ========================================= Code Blocks ========================================= */ [data-theme="dark"] code, [data-theme="dark"] pre { background-color: var(--color-surface-variant); color: var(--color-text-primary); } /* ========================================= Scrollbar ========================================= */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-bg); border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-bg); } /* ========================================= POL-005: cell-color-* Dark Strategy Marker colors are mapped through shared tokens, then mixed into graphite surfaces. ========================================= */ [data-theme="dark"] table.main_list td.cell-color-pink, [data-theme="dark"] td.cell-color-pink { --cell-color-marker: var(--member-marker-pink); } [data-theme="dark"] table.main_list td.cell-color-darkblue, [data-theme="dark"] td.cell-color-darkblue { --cell-color-marker: var(--member-marker-darkblue); } [data-theme="dark"] table.main_list td.cell-color-green, [data-theme="dark"] td.cell-color-green { --cell-color-marker: var(--member-marker-green); } [data-theme="dark"] table.main_list td.cell-color-brown, [data-theme="dark"] td.cell-color-brown { --cell-color-marker: var(--member-marker-brown); } [data-theme="dark"] table.main_list td.cell-color-red, [data-theme="dark"] td.cell-color-red { --cell-color-marker: var(--member-marker-red); } [data-theme="dark"] table.main_list td.cell-color-orange, [data-theme="dark"] td.cell-color-orange { --cell-color-marker: var(--member-marker-orange); } [data-theme="dark"] table.main_list td.cell-color-blue, [data-theme="dark"] td.cell-color-blue { --cell-color-marker: var(--member-marker-blue); } [data-theme="dark"] table.main_list td.cell-color-yellow, [data-theme="dark"] td.cell-color-yellow { --cell-color-marker: var(--member-marker-yellow); } [data-theme="dark"] table.main_list td.cell-color-purple, [data-theme="dark"] td.cell-color-purple { --cell-color-marker: var(--member-marker-purple); } [data-theme="dark"] table.main_list td.cell-color-peach, [data-theme="dark"] td.cell-color-peach { --cell-color-marker: var(--member-marker-peach); } [data-theme="dark"] table.main_list td.cell-color-lightgreen, [data-theme="dark"] td.cell-color-lightgreen { --cell-color-marker: var(--member-marker-lightgreen); } [data-theme="dark"] table.main_list td.cell-color-gray, [data-theme="dark"] td.cell-color-gray { --cell-color-marker: var(--member-marker-gray); } [data-theme="dark"] table.main_list td.cell-color-white, [data-theme="dark"] td.cell-color-white { --cell-color-marker: var(--member-marker-white); } [data-theme="dark"] table.main_list td.cell-color-black, [data-theme="dark"] td.cell-color-black { --cell-color-marker: var(--member-marker-black); } [data-theme="dark"] table.main_list td[class*="cell-color-"], [data-theme="dark"] td[class*="cell-color-"] { --cell-color-surface: var(--table-cell-bg, var(--ds-panel-bg, var(--color-surface))); --cell-color-rail: color-mix(in srgb, var(--cell-color-marker, var(--color-text-secondary)) 42%, var(--color-border-primary)); --cell-color-bg: color-mix(in srgb, var(--cell-color-marker, var(--color-text-secondary)) 12%, var(--cell-color-surface) 88%); background-color: var(--cell-color-bg); box-shadow: inset 4px 0 0 var(--cell-color-rail); color: var(--table-cell-text, var(--color-text-primary)); font-weight: var(--font-weight-semibold); text-shadow: none; } /* ========================================= THEME TRANSITION (전환 중에만 적용) ========================================= */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.2s ease-out, color var(--duration-fast) ease-out, border-color 0.2s ease-out, box-shadow var(--duration-normal) ease-out; /* v4.0: 차등 timing */ } /* T605 (2026-05-10) — admin-dense-page atmospheric 1-layer, self_seller 96.95 cycle atmospheric 4-layer 패턴 cross-port 첫 step */ [data-theme="dark"] .admin-dense-page { background-color: var(--surface-1); }