/* ==========================================================================
   [Theme Variants] — 팔레트 드롭다운 5종 테마 (v6.6.262).
   phosphor.css 위에 `body[data-theme="..."]` 선택자로 배경·accent 변수만 오버라이드.
   폰트(IBM Plex Mono + Noto Sans KR)와 카드 레이아웃은 5종 공통 유지.

   테마 목록:
     1. dark    — Steel Monitor Dark (OLED, 기본)
     2. monitor — Steel Monitor (phosphor 그대로, 스캔라인 있음)
     3. blue    — Cobalt Blue
     4. amber   — Amber Terminal
     5. emerald — Emerald Focus
   ========================================================================== */

/* ───────────────────────────────────────────────────────────
   공통: monitor 제외 4종 = OLED 순흑 + 스캔라인 제거
   `body:not([data-theme])` 는 JS hydration 이전 초기 플래시 방지용 (기본값 dark 외양).
   ─────────────────────────────────────────────────────────── */
body[data-theme="dark"],
body[data-theme="blue"],
body[data-theme="amber"],
body[data-theme="emerald"],
body:not([data-theme]) {
    background: #000000;
    --background-color: #000000;
    --active-text-color: #000000;
}
body[data-theme="dark"] .main-wrapper,
body[data-theme="blue"] .main-wrapper,
body[data-theme="amber"] .main-wrapper,
body[data-theme="emerald"] .main-wrapper,
body:not([data-theme]) .main-wrapper,
body[data-theme="dark"] .sidebar,
body[data-theme="blue"] .sidebar,
body[data-theme="amber"] .sidebar,
body[data-theme="emerald"] .sidebar,
body:not([data-theme]) .sidebar,
body[data-theme="dark"] header,
body[data-theme="blue"] header,
body[data-theme="amber"] header,
body[data-theme="emerald"] header,
body:not([data-theme]) header {
    background: #000000;
}
body[data-theme="dark"]::before,
body[data-theme="blue"]::before,
body[data-theme="amber"]::before,
body[data-theme="emerald"]::before,
body:not([data-theme])::before {
    display: none !important;
}

/* ───────────────────────────────────────────────────────────
   1. Steel Monitor Dark — OLED + 슬레이트 accent (기본)
   ─────────────────────────────────────────────────────────── */
body[data-theme="dark"],
body:not([data-theme]) {
    --primary-color: #94A3B8;
    --primary-rgb: 148, 163, 184;
    --text-color: #DDE4EE;
    --glass-border: rgba(148, 163, 184, 0.18);
    --accent-glow: rgba(148, 163, 184, 0.20);
    --card-bg: rgba(148, 163, 184, 0.035);
    color: #DDE4EE;
}

/* ───────────────────────────────────────────────────────────
   2. Steel Monitor — phosphor 기본값 그대로 (추가 오버라이드 없음)
   ─────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────
   3. Cobalt Blue — OLED + 코발트 블루 포인트
   ─────────────────────────────────────────────────────────── */
body[data-theme="blue"] {
    --primary-color: #3B82F6;
    --primary-rgb: 59, 130, 246;
    --text-color: #DDE4EE;
    --glass-border: rgba(59, 130, 246, 0.22);
    --accent-glow: rgba(59, 130, 246, 0.25);
    --card-bg: rgba(59, 130, 246, 0.04);
    color: #DDE4EE;
}

/* ───────────────────────────────────────────────────────────
   4. Amber Terminal — OLED + 호박색 (레트로 CRT)
   ─────────────────────────────────────────────────────────── */
body[data-theme="amber"] {
    --primary-color: #FBBF24;
    --primary-rgb: 251, 191, 36;
    --text-color: #FDE68A;
    --glass-border: rgba(251, 191, 36, 0.22);
    --accent-glow: rgba(251, 191, 36, 0.25);
    --card-bg: rgba(251, 191, 36, 0.035);
    color: #FDE68A;
}

/* ───────────────────────────────────────────────────────────
   5. Emerald Focus — OLED + 민트 그린 (포커스 모드)
   ─────────────────────────────────────────────────────────── */
body[data-theme="emerald"] {
    --primary-color: #10B981;
    --primary-rgb: 16, 185, 129;
    --text-color: #D1FAE5;
    --glass-border: rgba(16, 185, 129, 0.22);
    --accent-glow: rgba(16, 185, 129, 0.25);
    --card-bg: rgba(16, 185, 129, 0.04);
    color: #D1FAE5;
}

/* ==========================================================================
   [Theme Picker Dropdown] — 팔레트 버튼 클릭 시 표시되는 테마 선택 패널
   ========================================================================== */
/* [v6.6.266] 테마 피커 백드롭 — 투명 전체 화면 오버레이. 메뉴보다 한 단계 낮은 z-index */
.theme-picker-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 8999;
    /* cursor: default 로 두어 "닫기 가능" 힌트는 주지 않음 (조용한 UX) */
}
.theme-picker-backdrop[data-open="true"] {
    display: block;
}

.theme-picker-menu {
    /* [v6.6.267] 기본값 display: none 명시 — div 기본값 block 이 적용되어
       data-open 속성을 제거해도 메뉴가 계속 보이던 버그 수정. */
    display: none;
    position: fixed;
    min-width: 228px;
    background: rgba(10, 10, 12, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 6px;
    z-index: 9000;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-direction: column;
    gap: 2px;
    font-family: 'Noto Sans KR', 'IBM Plex Mono', monospace;
}
.theme-picker-menu[data-open="true"] {
    display: flex;
}
.theme-picker-menu .theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text-color, #CBD5E1);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
    min-height: 40px;
}
.theme-picker-menu .theme-option:hover {
    background: rgba(255, 255, 255, 0.05);
}
.theme-picker-menu .theme-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 6px currentColor;
}
.theme-picker-menu .theme-label {
    flex: 1;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.theme-picker-menu .theme-check {
    color: var(--primary-color);
    opacity: 0;
    font-size: 0.8rem;
    min-width: 14px;
    text-align: center;
}
.theme-picker-menu .theme-option.active .theme-check {
    opacity: 1;
}
.theme-picker-menu .theme-option.active {
    background: rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   [v6.6.502] 6. Steel Monitor Light — 라이트(화이트) 테마 베이스
   다크 5종과 별도 — 풀라이트(slate-50 배경 + slate-900 텍스트). 카드/사이드바/헤더 톤만
   1차로 깔고, 세부 미세 조정(배지·차트 라인·차트 그리드)은 사용자 검수 후 다음 세션.
   ========================================================================== */
body[data-theme="light"] {
    background: #F1F5F9;
    --background-color: #F1F5F9;
    --primary-color: #475569;
    --primary-rgb: 71, 85, 105;
    --active-text-color: #FFFFFF;
    --secondary-color: #64748B;
    --surface-color: rgba(15, 23, 42, 0.04);
    --glass-border: rgba(15, 23, 42, 0.10);
    --text-color: #1E293B;
    --accent-glow: rgba(71, 85, 105, 0.15);
    --card-bg: rgba(255, 255, 255, 0.85);
    /* [v6.7.224] 라이트 토큰 누락분 보강 — 다수 P0/P1 일괄 해소.
       --text-muted: 다크 #a8a8a8(흰 배경 2.0:1) → 슬레이트(4.5:1↑) — feed-card-time/comment-title/count-chip 등.
       --sit-text-1: :root/light 어디에도 정의 없어 health-popover 제목이 #fafafa 폴백으로 흰 배경서 소실.
       --border-subtle/strong: 다크 white-alpha 값이라 흰 배경서 보더 소실 (u-status-pill 등 광범위). */
    --text-muted: #64748B;
    --sit-text-1: #0F172A;
    --border-subtle: 1px solid rgba(15, 23, 42, 0.08);
    --border-strong: 1px solid rgba(15, 23, 42, 0.14);
    color: #1E293B;
}
body[data-theme="light"] .main-wrapper {
    background: #F1F5F9;
}
body[data-theme="light"] .sidebar {
    background: #FFFFFF;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] header {
    background: transparent;
}
body[data-theme="light"]::before {
    /* 다크 5종에서 monitor 만 스캔라인 — 라이트는 무조건 제거 */
    display: none !important;
}

/* [v6.7.229] 라이트 스크롤바 톤 정합 — ralph #8 P2 폴리시.
   base 스크롤바 thumb 들이 다크 가정 색이라 슬레이트-50 배경서 안 보임:
   - 글로벌(theme-phosphor.css ::-webkit-scrollbar-thumb) = slate `rgba(148,163,184,0.2)` → 흰 배경 ≈#DEE5EC 희미.
   - .pane-window 자손 = white `rgba(255,255,255,0.28)`, .sit-card-recent = white `rgba(255,255,255,0.12)` → 라이트서 사실상 소실(트랙 홈만 보임).
   라이트는 다른 라이트 보더(rgba(15,23,42,..))와 동일 계열 slate-900 dark-alpha 로 치환.
   specificity: body[data-theme=light] 가 base(글로벌 0-0-1 / .pane-window·.sit-card 0-1-x)를 전부 이김 + theme-variants 최후 로드. 라이트 스코프라 다크 영향 0. */
body[data-theme="light"] ::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, 0.22);
}
body[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15, 23, 42, 0.40);
}
body[data-theme="light"] .pane-window {
    scrollbar-color: rgba(15, 23, 42, 0.28) transparent;
}
body[data-theme="light"] .pane-window *::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, 0.28);
}
body[data-theme="light"] .pane-window *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15, 23, 42, 0.48);
}
body[data-theme="light"] .sit-card-recent {
    scrollbar-color: rgba(15, 23, 42, 0.16) transparent;
}
body[data-theme="light"] .sit-card-recent::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.16);
}
body[data-theme="light"] .sit-card-recent::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.28);
}
body[data-theme="light"] .sidebar-logo {
    color: #475569;
}
body[data-theme="light"] .sidebar .nav-item {
    color: rgba(15, 23, 42, 0.55);
}
body[data-theme="light"] .sidebar .nav-item.active,
body[data-theme="light"] .sidebar .nav-item:hover {
    color: #0F172A;
    background: rgba(15, 23, 42, 0.04);
}
body[data-theme="light"] .app-topbar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .app-topbar__btn {
    color: #475569;
}
body[data-theme="light"] .app-topbar__btn:hover {
    /* [v6.6.507] 라이트 모드 호버 — 다크 모드의 white 강제 오버라이드를 라이트 톤으로 다시 덮음 */
    background: rgba(15, 23, 42, 0.10);
    color: #0F172A;
}

/* [v6.6.505] Phase 4-B — 라이트 모드 드로어 톤 보강.
   드로어 자체 배경(#09090b 하드코딩)·sit-surface 들이 다크 가정이라 라이트에선 가독성 ↓ → 변수 오버라이드. */
body[data-theme="light"] .sit-drawer {
    background: #FFFFFF;
    border-left-color: rgba(15, 23, 42, 0.10);
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .sit-drawer-head {
    background: rgba(15, 23, 42, 0.02);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .sit-drawer-foot {
    background: rgba(15, 23, 42, 0.02);
    border-top-color: rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .sit-drawer-title {
    color: #0F172A;
}
body[data-theme="light"] .sit-drawer-section .sit-section-label {
    color: #475569;
    border-bottom-color: rgba(15, 23, 42, 0.10);
}
body[data-theme="light"] .sit-input-posts {
    /* [v6.7.14] situation.css v6.7.14 가 transparent + border 로 변경 — 라이트 모드 border 색만 톤 일치. */
    background: transparent !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}
body[data-theme="light"] .sit-input-post {
    background: #FFFFFF;
}
body[data-theme="light"] .sit-input-post + .sit-input-post {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}
/* [v6.7.14] 라이트 모드 호버 강화 — 0.04 → 0.07 (translateX 와 결합해 더 명확). */
body[data-theme="light"] .sit-input-post:hover {
    background: rgba(15, 23, 42, 0.07) !important;
}
body[data-theme="light"] .sit-input-post-title a,
body[data-theme="light"] .sit-input-post-title a:link,
body[data-theme="light"] .sit-input-post-title a:visited {
    color: #0F172A;
}
body[data-theme="light"] .sit-input-post-summary {
    color: #475569;
}
body[data-theme="light"] .sit-input-post-time {
    color: #1E293B;
}
body[data-theme="light"] .sit-input-post-sev {
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
}
body[data-theme="light"] .sit-drawer-action-primary {
    color: #0891B2;
    border-color: #0891B2;
}
body[data-theme="light"] .sit-drawer-action-primary:hover {
    background: rgba(8, 145, 178, 0.10);
    color: #0E7490;
}

/* ==========================================================================
   [v6.6.506] 라이트 모드 — 핵심 컴포넌트 다크 잔존 제거.
   style.css 에 `body { background: #0b0b0f }`, `.sidebar { background: #111113 }` 등이
   하드코딩이라 라이트 모드가 진입해도 사이드바·pane·차트 컨테이너가 검게 남아있던 문제.
   여기서 `body[data-theme="light"]` 셀렉터로 일괄 오버라이드.
   ========================================================================== */
body[data-theme="light"] {
    /* style.css 의 `body { background: #0b0b0f }` 보다 specificity 1점 높음(속성 셀렉터) — !important 없이 OK,
       다만 backdrop/inline overrides 충돌 회피 위해 안전하게 !important 동봉. */
    background: #F1F5F9 !important;
    color: #1E293B;
}
body[data-theme="light"] .sidebar {
    background: #FFFFFF !important;
    border-right-color: rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .sidebar-section-title,
body[data-theme="light"] .sidebar-section-title--toggle {
    color: rgba(15, 23, 42, 0.45);
}
body[data-theme="light"] .sidebar .nav-item {
    color: rgba(15, 23, 42, 0.65);
}
body[data-theme="light"] .sidebar .nav-item:hover,
body[data-theme="light"] .sidebar .nav-item.active {
    color: #0F172A;
    background: rgba(15, 23, 42, 0.05);
}

/* pane(피드/댓글/대시보드) 카드 — surface-color 기반이라 변수 오버라이드만으로 일부 OK,
   다만 .pane-window 의 box-shadow, hover 효과는 다크 가정이라 라이트용 따로 정의. */
body[data-theme="light"] .pane-window {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
body[data-theme="light"] .pane-window:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
body[data-theme="light"] .pane-header {
    background: rgba(15, 23, 42, 0.02);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* 피드/댓글 카드 — 다크 가정 hover/border 색 라이트로 */
body[data-theme="light"] .feed-card {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}
body[data-theme="light"] .feed-card:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(8, 145, 178, 0.32);
}
body[data-theme="light"] .feed-card-title {
    color: #1E293B;
}
body[data-theme="light"] .feed-card-meta,
body[data-theme="light"] .feed-card-source {
    color: #475569;
}

/* 대시보드 게임 카드(상황판) — sit-card 톤 */
body[data-theme="light"] .sit-card {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.10);
}
body[data-theme="light"] .sit-card:hover {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.18);
}
body[data-theme="light"] .sit-card-title,
body[data-theme="light"] .sit-card-count {
    color: #0F172A;
}
body[data-theme="light"] .sit-card-summary,
body[data-theme="light"] .sit-card-meta {
    color: #475569;
}

/* 7일 그래프 컨테이너 — 다크 surface 가정 */
body[data-theme="light"] .graph-section,
body[data-theme="light"] .dashboard-graph-section,
body[data-theme="light"] .sit-graph-section {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.08);
}

/* 검색바·인풋 */
body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="search"],
body[data-theme="light"] textarea {
    background: rgba(15, 23, 42, 0.04);
    color: #0F172A;
    border-color: rgba(15, 23, 42, 0.10);
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
    color: rgba(15, 23, 42, 0.40);
}

/* [v6.6.506] 토글 버튼 활성(light-active) — 라이트 모드일 때만 시안 강조로 "지금 라이트" 시각 표시 */
.app-topbar__btn.light-active {
    color: #22d3ee;
    opacity: 1;
}
.app-topbar__btn.light-active i {
    /* fa-adjust 반원이 라이트 측 절반(좌측 채움)을 시각화 — 회전 없이 색만으로 충분 */
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
}
body[data-theme="light"] .app-topbar__btn.light-active {
    color: #0891B2;
}
body[data-theme="light"] .app-topbar__btn.light-active i {
    text-shadow: 0 0 6px rgba(8, 145, 178, 0.30);
}

/* [v6.6.509] 테마 피커 드롭다운 라이트 모드 — 다크 톤(rgba(10,10,12,0.97) 배경 + 흰 텍스트) 그대로 유지되어
   라이트 모드에서 글자 식별 어렵던 문제. 흰 카드 + 슬레이트 텍스트로 오버라이드. */
body[data-theme="light"] .theme-picker-menu {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
body[data-theme="light"] .theme-picker-menu .theme-option {
    color: #1E293B;
}
body[data-theme="light"] .theme-picker-menu .theme-option:hover {
    background: rgba(15, 23, 42, 0.06);
}
body[data-theme="light"] .theme-picker-menu .theme-option.active {
    background: rgba(15, 23, 42, 0.04);
}
body[data-theme="light"] .theme-picker-menu .theme-swatch {
    border-color: rgba(15, 23, 42, 0.25);
}

/* [v6.6.510] 모달(필터링/설정) 라이트 모드 — `.modal-content` 다크 톤(#1e1f22) 그대로라 라이트에서 카드 톤 부조화.
   설정/필터링 모달, 게임별 카드, 입력창 모두 라이트 톤으로 오버라이드. */
body[data-theme="light"] .modal-content,
body[data-theme="light"] .settings-modal-content {
    background: #FFFFFF;
    color: #1E293B;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
body[data-theme="light"] .modal-header {
    background: rgba(15, 23, 42, 0.02);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .modal-header h2 {
    color: #0F172A;
}
body[data-theme="light"] .modal-footer {
    background: rgba(15, 23, 42, 0.02);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .close-modal {
    color: #475569;
}
body[data-theme="light"] .close-modal:hover {
    color: #0F172A;
    background: rgba(15, 23, 42, 0.06);
}
body[data-theme="light"] .settings-tab-btn {
    background: rgba(15, 23, 42, 0.05);
    color: #475569;
}
body[data-theme="light"] .settings-tab-btn:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0F172A;
}
body[data-theme="light"] .settings-tab-btn.active {
    /* 다크의 var(--color-modal-focus) 파랑 → 라이트는 시안 액센트로 통일 */
    background: #22d3ee;
    color: #FFFFFF;
}
body[data-theme="light"] .local-settings-batch-bar {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.12);
}
body[data-theme="light"] .local-settings-batch-label {
    color: #0F172A;
}
body[data-theme="light"] .local-settings-card {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.08);
    color: #1E293B;
}
body[data-theme="light"] .local-settings-card:hover {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.15);
}
/* [v6.6.511] 게임명 라벨 라이트 — 다크의 #e0e0e0 가 라이트 배경에 거의 안 보임 */
body[data-theme="light"] .local-settings-card .card-label {
    color: #0F172A;
}
body[data-theme="light"] .local-settings-card .card-label.dim {
    /* 비활성 상태도 라이트에서 시각적으로 dim 으로 인지 가능한 톤 */
    color: rgba(15, 23, 42, 0.38);
}
body[data-theme="light"] .local-settings-card .card-label.comment-label {
    /* 댓글 카드 강조색 — 라이트에서도 파랑 식별 가능, 약간 진하게 */
    color: #1D4ED8;
}
body[data-theme="light"] .local-settings-batch-bar input[type="number"],
body[data-theme="light"] .local-settings-card input[type="number"],
body[data-theme="light"] input[type="number"] {
    background: #FFFFFF;
    color: #0F172A;
    border-color: rgba(15, 23, 42, 0.15);
}
body[data-theme="light"] .settings-search-bar input {
    background: #FFFFFF;
    color: #0F172A;
    border-color: rgba(15, 23, 42, 0.15);
}
/* 검색 결과 / 행 텍스트 일반화 */
body[data-theme="light"] .config-content,
body[data-theme="light"] .settings-search-bar {
    color: #1E293B;
}
/* 모달 footer 의 secondary 버튼 톤 */
body[data-theme="light"] .modal-footer .secondary {
    background: rgba(15, 23, 42, 0.06);
    color: #1E293B;
    border-color: rgba(15, 23, 42, 0.15);
}
body[data-theme="light"] .modal-footer .secondary:hover {
    background: rgba(15, 23, 42, 0.12);
    color: #0F172A;
}

/* [v6.6.513] 라이트 모드 — admin 시세 탭(.excel-table) + 그 외 admin pane(SQL 콘솔/AI 분석/업데이트 등) 식별성.
   다크 가정 색(.excel-table-container #1a1a1e, .excel-table #e0e0e0, .excel-table th #1e1e24)으로 라이트에서 안 보임. */
body[data-theme="light"] .excel-table-container,
body[data-theme="light"] #totalArticlesContainer,
body[data-theme="light"] #aiAnalysisContainer,
body[data-theme="light"] #updateHistoryContainer,
body[data-theme="light"] .game-articles-container {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.10);
}
/* [v6.7.225] 단독 탭(게임/커뮤니티) 섹션 헤더·게임링크 행 — 다크 가정 색이 흰 배경서 구분선 소실.
   .game-section-header: theme-phosphor.css 가 slate 2%/8% 로 override(흰 배경 ≈ 흰색 무감).
   .community-game-links: phosphor 미커버 → style.css 의 white-alpha(0.05) border-bottom 라 완전 소실.
   둘 다 슬레이트 톤으로 복원해 다크와 동등한 헤더/구분선 위계 확보. (체크리스트 #3) */
body[data-theme="light"] .game-section-header {
    background: rgba(15, 23, 42, 0.04);
    border-bottom-color: rgba(15, 23, 42, 0.10);
}
body[data-theme="light"] .community-game-links {
    border-bottom-color: rgba(15, 23, 42, 0.10);
}
body[data-theme="light"] .excel-table,
body[data-theme="light"] .full-width-table {
    color: #1E293B;
}
/* [v6.7.230] th 다크 누수 fix — theme-phosphor.css:145~158 이 `.excel-table th`/`.full-width-table th`
   + ID 스코프(`#account-trade-tab`/`#comments-tab`/`#diamond-trade-tab`) th 에 `background:#111118 !important;
   color:#94A3B8 !important; border-bottom:...!important` 를 건다(theme-phosphor 는 link.disabled 가 아니라
   data-theme 전환이라 라이트 포함 항상 활성). v6.6.513 라이트 오버라이드는 !important 누락으로 cascade 패배 →
   라이트 모드에서도 모든 테이블 헤더가 다크(#111118) 잔존(죽은 오버라이드). theme-phosphor 셀렉터 리스트를
   `body[data-theme="light"]` 접두로 미러 + !important 동반 → 클래스(0,0,2→0,2,2)·ID(1,0,2→1,2,2) 양 티어 상회 승. */
body[data-theme="light"] .excel-table th,
body[data-theme="light"] .full-width-table th,
body[data-theme="light"] #account-trade-tab .excel-table th,
body[data-theme="light"] #account-trade-tab .summary-table th,
body[data-theme="light"] #comments-tab .excel-table th,
body[data-theme="light"] #diamond-trade-tab .excel-table th {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #475569 !important;
    border-bottom-color: rgba(15, 23, 42, 0.15) !important;
}
body[data-theme="light"] .excel-table td,
body[data-theme="light"] .full-width-table td {
    color: #1E293B;
    border-bottom-color: rgba(15, 23, 42, 0.06);
}
body[data-theme="light"] .excel-table tr:hover,
body[data-theme="light"] .full-width-table tr:hover {
    background: rgba(15, 23, 42, 0.03);
}
body[data-theme="light"] .excel-table .cell-link {
    color: #0891B2;
}
body[data-theme="light"] .excel-table .cell-link:hover {
    color: #0E7490;
}
body[data-theme="light"] .excel-table .cell-time {
    color: #64748B;
}
/* 시세 탭 헤더 컨트롤(검색바·셀렉트·버튼) — 자체 색 가정될 가능성 */
body[data-theme="light"] #account-trade-tab,
body[data-theme="light"] #diamond-trade-tab {
    color: #1E293B;
}
/* [v6.7.231] 라이트 .tab-btn 활성 탭 누수 fix — 계정거래/다이아시세/트렌드 게임 탭.
   theme-phosphor 의 미스코프 `.tab-btn.active{color:#CBD5E1;border-bottom:2px solid #94A3B8}`(0-2-0,
   비-important)가 라이트에도 적용 → 활성 라벨 #CBD5E1 이 흰 배경서 ≈1.3:1 로 소실 +
   비활성(generic button color=var(--primary-color)=#475569)보다 오히려 밝아 '선택 탭이 사라지는'
   명도 역전 버그. 라이트 스코프(0-3-0 > 0-2-0, theme-variants 후행 로드)로 미러 —
   활성=가장 진한 slate(#1E293B) + 진한 underline(#475569). 다크 5종은 매칭 불가 → 회귀 0. */
body[data-theme="light"] .tab-btn.active,
body[data-theme="light"] .tab-button.active {
    color: #1E293B;
    border-bottom-color: #475569;
}

/* ==========================================================================
   [v6.6.502] App Topbar — 포토샵 스타일 얇은 상단 도구 영역
   main-wrapper 의 첫 자식. height 32px 고정, 우측 정렬 버튼 그룹.
   Phase 2 에서 도구 6개(필터/새로고침/업데이트/로그/테마/앱설치) 이전 예정.
   ========================================================================== */
.app-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    padding: 0 10px;
    gap: 4px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--glass-border, rgba(148, 163, 184, 0.12));
    flex-shrink: 0;
    z-index: 100;
}
.app-topbar__group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.app-topbar__divider {
    width: 1px;
    height: 16px;
    background: var(--glass-border, rgba(148, 163, 184, 0.18));
    margin: 0 6px;
}
.app-topbar__btn {
    width: 28px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-color, #CBD5E1);
    opacity: 0.65;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s ease, opacity 0.12s ease, color 0.12s ease;
    font-size: 0.78rem;
    padding: 0;
}
.app-topbar__btn:hover {
    /* [v6.6.507] 다크 호버 식별성 보강 — fa-adjust 처럼 부분 채움 아이콘이 다크 배경에 묻혀 안 보이는 문제.
       opacity 1 + 배경 0.06 → 0.12 + color 를 흰색으로 명시 (var --text-color 대신 강제 white). */
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}
.app-topbar__btn:focus-visible {
    outline: 1px solid var(--primary-color);
    outline-offset: 1px;
    opacity: 1;
}
/* [v6.6.503] active 상태 — toggleAppPane 으로 활성화된 도구(업데이트/로그 등) 강조.
   사이드바 nav-item 의 active 와 동일 의미. id 보존으로 기존 토글 로직 그대로 호환. */
.app-topbar__btn.active {
    opacity: 1;
    background: rgba(var(--primary-rgb, 148, 163, 184), 0.14);
    color: var(--primary-color);
}
.app-topbar__btn.active:hover {
    background: rgba(var(--primary-rgb, 148, 163, 184), 0.20);
}
/* [v6.6.504] spinning — 클릭 시 한 번 회전. sitSpin keyframe 은 situation.css 에 정의(0.6s ease).
   sit-refresh-btn 과 동일 모션을 상단 바 새로고침 버튼(#topbarRefreshBtn)에 이식. */
.app-topbar__btn.spinning i {
    animation: sitSpin 0.6s ease;
}
/* [v6.6.503] admin-only 가드 — 사이드바 .sidebar-section--admin 과 동일 의미.
   body.is-admin 일 때만 노출. 비관리자에게는 무조건 숨김 (구체 인라인 style 보다 specificity 우선). */
body:not(.is-admin) .topbar-admin-only {
    display: none !important;
}
/* 모바일: 헤더 햄버거가 별도 줄에 있으므로 상단 바는 그대로 유지하되 살짝 축소 */
@media (max-width: 768px) {
    .app-topbar {
        height: 30px;
        padding: 0 6px;
    }
    .app-topbar__btn {
        width: 26px;
        height: 22px;
    }
    /* 모바일에서 그룹 디바이더 간격 축소 */
    .app-topbar__divider {
        margin: 0 3px;
    }
}

/* ==========================================================================
   [v6.7.221] 라이트 모드 — 대시보드(situation) 배지·알림바 다크 잔존 제거.
   situation.css 의 --sit-* 변수가 다크 값(#111114/#17171b/#1c1c20 등)이라, 이를 쓰는
   .sit-action-item(긴급/주의 호명 줄)이 라이트에서 '검은 박스'로 떴음. 변수 자체를 라이트로
   재정의 → 변수 기반 요소(action-item 배경/보더/hover, sm/headline 텍스트, idle LED 등) 일괄 대응.
   배지(.st) 와 .sit-card-alert 의 연한 빨강/노랑 텍스트는 흰 배경 대비 보강. (v6.6.502 "배지 다음 세션" 완수)
   ========================================================================== */
body[data-theme="light"] {
    --sit-surface: #FFFFFF;
    --sit-surface-2: #F8FAFC;
    --sit-surface-hover: rgba(15, 23, 42, 0.05);
    --sit-border: rgba(15, 23, 42, 0.10);
    --sit-border-strong: rgba(15, 23, 42, 0.18);
    --sit-text-2: #475569;
    --sit-text-3: #94A3B8;
    --sit-text-4: #CBD5E1;
}
/* 알림바 호명 줄 배지 — 연빨강(#fca5a5)/연노랑(#fcd34d)이 흰 배경에서 안 보임 → 진한 톤. */
body[data-theme="light"] .sit-action-item.critical .st { color: #dc2626; background: rgba(220, 38, 38, 0.10); }
body[data-theme="light"] .sit-action-item.warning  .st { color: #b45309; background: rgba(245, 158, 11, 0.16); }
/* 카드 급증+부정 경보 칩 — 동일 사유. */
body[data-theme="light"] .sit-card-alert {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.09);
    border-color: rgba(220, 38, 38, 0.32);
}
/* 상단 카운트 칩 라벨 — --text-muted 미정의로 다크 회색 fallback. 라이트 슬레이트로. */
body[data-theme="light"] .sit-count-chip .lbl { color: #64748B; }

/* ==========================================================================
   [v6.7.224] 라이트 모드 정합성 2차 — 대시보드/피드/그라파나 다크 잔존 일괄 제거.
   다크/화이트 UI 정합 감사(4표면 병렬) 종합 결과. 근본 원인 2종:
   (A) 라이트 토큰 누락 → 위 199 블록에서 --text-muted/--sit-text-1/--border-* 보강.
   (B) PATTERN-34 cascade 트랩 → 아래 specificity 더 높은 라이트 셀렉터로 해소.
   ========================================================================== */

/* ── [P0-1] 상황판 ID-cascade 트랩 ──
   situation.css:7 `#situation-tab { --sit-* }` (ID, specificity 1-0-0) 가
   `body[data-theme="light"] { --sit-* }` (686, 0-1-0) 를 shadow → 단독 상황판 탭 내부
   전 요소가 흰 배경 위 다크 surface/border 사용. ID-qualified(1-1-1)로 승격해 해소.
   ( #pane-situation 임베드는 자체 --sit-* 정의가 없어 686 body 블록을 그대로 상속 → 이미 정상 ) */
body[data-theme="light"] #situation-tab {
    --sit-surface: #FFFFFF;
    --sit-surface-2: #F8FAFC;
    --sit-surface-hover: rgba(15, 23, 42, 0.05);
    --sit-border: rgba(15, 23, 42, 0.10);
    --sit-border-strong: rgba(15, 23, 42, 0.18);
    --sit-text-1: #0F172A;
    --sit-text-2: #475569;
    --sit-text-3: #94A3B8;
    --sit-text-4: #CBD5E1;
}

/* ── [P0-7] 7일 그래프 매트릭스 표 — white-alpha 구획선/zebra/hover 가 흰 배경서 통째 소실 ── */
body[data-theme="light"] .graph-matrix-table thead th { background: rgba(15, 23, 42, 0.04); }
body[data-theme="light"] .graph-matrix-table tbody td { border-bottom-color: rgba(15, 23, 42, 0.08); }
body[data-theme="light"] .graph-matrix-table tbody tr:hover { background: rgba(15, 23, 42, 0.04); }
body[data-theme="light"] .graph-matrix-table tbody tr.footer-row { background: rgba(15, 23, 42, 0.03); }
body[data-theme="light"] .graph-matrix-table--daily tbody tr.group-cont td { border-bottom-color: rgba(15, 23, 42, 0.08); }

/* ── [P1-3] 헬스 LED 칩 — bg/border 가 흰 배경서 소실(평면 텍스트화) ── */
body[data-theme="light"] .sit-health-led {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.10);
}
body[data-theme="light"] .sit-health-led:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.16);
}

/* ── [P2-3 / P2-6] 카드 baseline·chip hot/cold/dormant 톤 — OLED 튜닝색이 흰 배경서 워시아웃/소실 ── */
body[data-theme="light"] .sit-card-baseline.is-hot,
body[data-theme="light"] .sit-card-chip.is-hot { color: #dc2626; }
body[data-theme="light"] .sit-card-chip.is-hot { background: rgba(220, 38, 38, 0.10); }
body[data-theme="light"] .sit-card-baseline.is-cold,
body[data-theme="light"] .sit-card-chip.is-cold { color: #0369a1; }
body[data-theme="light"] .sit-card-chip.is-cold { background: rgba(8, 145, 178, 0.12); }
body[data-theme="light"] .sit-card-chip.is-dormant { background: rgba(15, 23, 42, 0.05); }
body[data-theme="light"] .sit-card-sparkline.is-cold rect { fill: rgba(8, 145, 178, 0.55); }

/* ── [P0-3] 댓글 카드 본문 — #d8dde3 하드코딩(0-2-0)이 라이트 .feed-card-title(0-2-1) 와 충돌.
   0-3-0 으로 승격해 다크값 무력화(흰 배경 near-white 텍스트 소실 방지). ── */
body[data-theme="light"] .feed-card--comment .feed-card-title { color: #1E293B; }

/* ── [P0-5] 피드 소스 배지 — 노랑/연하늘 텍스트가 흰 배경서 대비 1.3~1.6:1 ── */
body[data-theme="light"] .feed-card-source--daum  { background: rgba(217, 119, 6, 0.14); color: #b45309; }
body[data-theme="light"] .feed-card-source--dc    { background: rgba(8, 145, 178, 0.14); color: #0369a1; }
body[data-theme="light"] .feed-card-source--naver { background: rgba(3, 199, 90, 0.16);  color: #047857; }

/* ── [P1-8] 새글/신선도 tint — 저알파 cyan/amber 가 흰 배경서 식별 불가 → 라이트용 알파 상향 ── */
body[data-theme="light"] .feed-card--new-cafe { background: rgba(245, 158, 11, 0.12); }
body[data-theme="light"] .feed-card--new-dc   { background: rgba(8, 145, 178, 0.10); }
body[data-theme="light"] .feed-card--fresh    { background: rgba(8, 145, 178, 0.08); }
body[data-theme="light"] .feed-card--fresh-cafe { background: rgba(245, 158, 11, 0.10); }

/* ── [P1-2] 피드 빈 섹션 — --text-color-secondary 레포 미정의 → #a1a1aa 폴백(2.3:1). ── */
body[data-theme="light"] .feed-community-empty { color: #64748B; }

/* ── [P1-5] 스켈레톤 shimmer — 흰 배경 위 흰 shimmer 거의 안 보임(로딩 신호 소실) ── */
body[data-theme="light"] .skeleton-bar,
body[data-theme="light"] .skeleton-line {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.09) 50%, rgba(15, 23, 42, 0.04) 100%);
}

/* ── [P2-1] 피드 본문 컨테이너 배경 — rgba(0,0,0,0.1) 가 흰 pane 위 회색 오버레이 ── */
body[data-theme="light"] .feed-body { background: transparent; }

/* ── [P0-8] 관리자 알림이력 표 .ntb-table / 트레이스 — thead 만 검은 띠 + 본문 텍스트 소실 ── */
body[data-theme="light"] .ntb-table thead th {
    background: #F1F5F9;
    color: #475569;
    border-color: rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .ntb-table tbody td {
    color: #1E293B;
    border-color: rgba(15, 23, 42, 0.08);
}
body[data-theme="light"] .ntb-table tbody tr:hover { background: rgba(15, 23, 42, 0.03); }
body[data-theme="light"] .ntb-table .ntb-title { color: #0F172A; }
/* dim 위계 보존 — 시간/게임은 슬레이트-500 (td 오버라이드가 flatten 하지 않게 specificity 보강) */
body[data-theme="light"] .ntb-table .ntb-time,
body[data-theme="light"] .ntb-table .ntb-game { color: #64748B; }
/* kind 의미색 보존 — 연빨강/연노랑이 흰 배경서 흐리므로 600 톤으로 (flatten 방지 + 대비 확보) */
body[data-theme="light"] .ntb-table .ntb-kind-SUPER    { color: #dc2626; }
body[data-theme="light"] .ntb-table .ntb-kind-OFFICIAL { color: #b45309; }
/* ── [v6.7.233] 알림 이력 표 잔여 워시아웃 — 결과 필(.ntb-pill) + 제목 링크(.ntb-link) — ralph #9 sweep ──
   .ntb-table 본문은 v6.7.224 라이트 오버라이드(위 thead/td/title/time/game/kind)로 흰 배경이 됐으나,
   그 안의 상태 필(신규/중복/초기/발송/실패/차단 — .ntb-result td)과 제목 링크(.ntb-title td)는
   다크 가정 파스텔(300/400레벨)이 그대로 남아 흰 배경서 워시아웃:
     q/s-ok #86efac(green-300)≈1.4:1 · i #93c5fd(blue-300)≈1.6:1 · s-err #fca5a5(red-300)≈1.8:1 ·
     d #a1a1aa / blocked #9ca3af(zinc-400)≈2.3:1 · ntb-link #93c5fd≈1.6:1.
   iter 11 .status-badge 동형 — bg 틴트는 흰 배경 pale 칩으로 정상이라 유지, 텍스트만 600/700 AA 로 하향.
   semantic 위계(녹 신규·회 중복/차단·청 초기·적 실패) 유지. 링크는 .cell-link 와 같은 라이트 링크 톤(sky).
   specificity: body[data-theme=light] .ntb-table .ntb-pill-X (0,3,1) > base .ntb-pill-X (0,1,0)
   + theme-variants 후행 로드 → 비-important 승. 라이트 스코프 → 다크 5종 매칭 불가 = 회귀 0. */
body[data-theme="light"] .ntb-table .ntb-pill-q,
body[data-theme="light"] .ntb-table .ntb-pill-s-ok    { color: #047857; }  /* emerald-700, ~6.0:1 */
body[data-theme="light"] .ntb-table .ntb-pill-d,
body[data-theme="light"] .ntb-table .ntb-pill-blocked { color: #64748B; }  /* slate-500, ~4.5:1 */
body[data-theme="light"] .ntb-table .ntb-pill-i       { color: #2563EB; }  /* blue-600, ~4.7:1 */
body[data-theme="light"] .ntb-table .ntb-pill-s-err   { color: #DC2626; }  /* red-600, ~4.45:1 */
body[data-theme="light"] .ntb-table .ntb-link         { color: #0369a1; }  /* sky-700, ~5.3:1 */
body[data-theme="light"] .notif-trace {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.08);
}

/* ── [P1-4] 입력란 .u-input-full — --bg-secondary 라이트 미정의로 다크 섬(#1e1e2e + 흰 글자) ── */
body[data-theme="light"] .u-input-full {
    background: #FFFFFF;
    color: #1E293B;
    border-color: rgba(15, 23, 42, 0.15);
}

/* ── [P1-9] 상태 필 행 구분선 — 직접 하드코딩 white-alpha(토큰 미경유)라 흰 배경서 소실 ── */
body[data-theme="light"] .u-status-pill-row { border-top-color: rgba(15, 23, 42, 0.10); }

/* ── [v6.7.232] 크롤러 상태 배지(.status-badge) 라이트 텍스트 워시아웃 — ralph #9 sweep ──
   components.css:361~385 가 !important 로 5상태(running/waiting/error/complete/loaded)를
   400-레벨 파스텔 텍스트(다크 가정)로 정의 → 흰 배경(#F1F5F9)서 전부 워시아웃:
   waiting #CBD5E1@55% ≈1.1:1(불가시) · running #34D399 ≈1.6:1 · error/complete/loaded 1.9~2.2:1 sub-AA.
   admin "운영" 크롤러 상태판(index.html:369~379, 메인/댓글/본문/자사·타사 다이아/오딘G2G/계정거래)의 기능 인디케이터라 가독 필수.
   surgical: 파스텔 bg/border 틴트는 흰 배경서 정상 → 텍스트 색만 600~700 레벨로 하향(AA). bg/border 무변경.
   specificity body[data-theme=light] .status-badge.X (0,3,1) !important > base (0,2,0) !important → 로드순 무관 승.
   라이트 스코프라 다크 5종 매칭 불가 = 회귀 0. */
body[data-theme="light"] .status-badge.running  { color: #047857 !important; }  /* emerald-700, ~6.0:1 */
body[data-theme="light"] .status-badge.waiting  { color: #64748B !important; }  /* slate-500(은은), ~4.5:1 */
body[data-theme="light"] .status-badge.error    { color: #DC2626 !important; }  /* red-600, ~4.45:1 */
body[data-theme="light"] .status-badge.complete { color: #2563EB !important; }  /* blue-600, ~4.7:1 */
body[data-theme="light"] .status-badge.loaded   { color: #7E22CE !important; }  /* purple-700, ~6.9:1 */

/* ── [P2-2] empty-state 박스 — 흰 배경에 검은 박스(#1a1a1e) 부조화 ── */
body[data-theme="light"] .empty-state {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
}
body[data-theme="light"] .empty-state-title { color: #1E293B; }
body[data-theme="light"] .empty-state-desc  { color: #64748B; }
body[data-theme="light"] .empty-state-icon  { color: #94A3B8; }

/* ── [v6.7.234] 대시보드(상황판) 세그먼트 토글 — 라이트 잔여 워시아웃 2종 + 액센트 소실 ──
   배경/보더는 v6.7.224 `body[data-theme="light"] #situation-tab { --sit-* }` 가 이미 라이트화(#F8FAFC / slate-alpha).
   남은 결함은 (A) 비활성 텍스트 (B) 활성 액센트 두 갈래:
   (A) .seg-btn 비활성 텍스트 = var(--text-color-secondary, #a1a1aa) — 이 변수는 레포 전역 미정의
       (theme-variants.css:845 주석 참조)라 흰 배경서 다크 #a1a1aa(~2.0:1) 폴백. --sit-* 네임스페이스 밖이라
       v6.7.224 토큰 오버라이드가 못 미침 → .seg-btn 색을 라이트 스코프에서 직접 지정.
   (A') .sit-window-btn/.sit-view-btn 비활성 텍스트 = var(--sit-text-3)=라이트 #94A3B8(slate-400, ~2.6:1) 워시아웃.
   (B) .seg-btn.active bg/border = var(--primary-color) — 라이트=slate #475569(theme-variants.css:203)라
       활성 세그가 회색 솔리드 = "다크 잔존"의 정체(블루 액센트 소실). → 라이트는 blue-600 솔리드로 복원.
       (.sit-window-btn/.sit-view-btn 활성은 rgba(59,130,246,0.16) 하드코딩이라 이미 블루 — 톤만 보강.)
   specificity: body[data-theme=light] 접두로 원 셀렉터를 동률↑ + theme-variants 후행 로드 → cascade 승.
   라이트 스코프 → 다크 5종(dark/monitor/blue/amber/emerald) 매칭 불가 = 회귀 0. */
/* (1) 그래프 컨트롤 세그(.seg-btn) — .sit-graph-head 전체 스코프로 3그룹 일괄:
   게임별/커뮤니티별/표 · 7/14/30일 (.sit-graph-controls) + 로그/선형/점유% (.sit-yscale-controls.yscale-group) + 전체/게임별/커뮤니티별.
   ※ yscale(로그/선형/점유%)은 .sit-graph-controls 가 아니라 .yscale-group 소속이라 .sit-graph-controls 스코프는 누락 →
     공통 부모 .sit-graph-head 로 올려 같은 행 6그룹(2 pane × mode/days/yscale)을 라이트서 동일 톤으로 통일. */
body[data-theme="light"] .situation-board .sit-graph-head .seg-btn {
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.12);  /* yscale 세그는 base 보더가 없어 border shorthand 로 명시 */
    border-radius: 4px;
    color: #475569;  /* slate-600, ~7:1 on white (was #a1a1aa ~2.0:1) */
}
body[data-theme="light"] .situation-board .sit-graph-head .seg-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.22);
    color: #0F172A;
}
body[data-theme="light"] .situation-board .sit-graph-head .seg-btn.active {
    /* 다크 var(--primary-color) 회색 → 라이트는 blue-600 솔리드(블루 정체 복원) */
    background: #2563EB;
    border-color: #2563EB;
    color: #FFFFFF;
}
/* (2) 시간범위(1h/24h/7d) · 뷰(카드/리스트) 토글 — .sit-window-btn / .sit-view-btn */
body[data-theme="light"] .sit-window-toggle,
body[data-theme="light"] .sit-view-toggle {
    border-color: rgba(15, 23, 42, 0.14);
}
body[data-theme="light"] .sit-window-btn,
body[data-theme="light"] .sit-view-btn {
    background: #FFFFFF;
    color: #475569;  /* slate-600 — 비활성 라벨 가독(was #94A3B8 ~2.6:1) */
}
body[data-theme="light"] .sit-window-btn + .sit-window-btn,
body[data-theme="light"] .sit-view-btn + .sit-view-btn {
    border-left-color: rgba(15, 23, 42, 0.14);
}
body[data-theme="light"] .sit-window-btn:hover,
body[data-theme="light"] .sit-view-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    color: #0F172A;
}
body[data-theme="light"] .sit-window-btn.is-active,
body[data-theme="light"] .sit-view-btn.is-active {
    /* 활성 = 블루 액센트(다크 rgba(59,130,246,0.16) 동형, 라이트 대비 보강) */
    background: rgba(37, 99, 235, 0.12);
    color: #1D4ED8;
}