/* ═══════════════════════════════════════════════════════════════ White Mode Theme — Main Mode Activated by adding .white-mode to Colors matched to select.html: #FFF bg, #000 text, #9A8A5A gold ═══════════════════════════════════════════════════════════════ */ /* ── Body & Global ── */ html.white-mode body { background: #FFFFFF !important; color: #1a1a1a !important; } html.white-mode body::before { display: none !important; } /* ── Navbar ── */ html.white-mode #main-nav { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.white-mode .leaflet-control-zoom { display: none !important; } html.white-mode #globeViz { filter: brightness(1.08) saturate(1.15); } html.white-mode #main-nav .text-white, html.white-mode #main-nav h1 { color: #333 !important; } html.white-mode #main-nav svg { stroke: #333 !important; } /* ── Scrollbar — hidden in white mode ── */ html.white-mode ::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } html.white-mode * { scrollbar-width: none !important; } /* ── Navbar — excluded from white mode, stays dark ── */ /* ── Mode Badge ── */ html.white-mode #current-mode-badge { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #333 !important; } html.white-mode #current-mode-badge:hover { border-color: rgba(0, 0, 0, 0.25) !important; color: #000 !important; } /* ── Mode Dropdown ── */ html.white-mode .mode-dropdown { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important; } html.white-mode .mode-dropdown-item { color: #555 !important; } html.white-mode .mode-dropdown-item:hover { background: rgba(0, 0, 0, 0.04) !important; color: #000 !important; } /* ── Sidebar Menu ── */ html.white-mode #sidebar-menu { background: rgba(255, 255, 255, 0.98) !important; border-right-color: rgba(0, 0, 0, 0.08) !important; } html.white-mode #sidebar-menu h1 { color: #1a1a1a !important; } html.white-mode #sidebar-close-btn { color: #999 !important; } html.white-mode #sidebar-close-btn:hover { color: #333 !important; } html.white-mode #sidebar-menu .rr-glass { background: rgba(245, 245, 245, 0.8) !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.white-mode #sidebar-menu input { color: #1a1a1a !important; } html.white-mode #sidebar-menu input::placeholder { color: #999 !important; } html.white-mode #sidebar-menu .border-b { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } /* Sidebar feature items (Timeline, Perspective, Countries) */ html.white-mode .sidebar-feature-item div div:first-child { color: #333 !important; } html.white-mode .sidebar-feature-item div div:last-child { color: #999 !important; } html.white-mode .sidebar-feature-item svg { stroke: rgba(0, 0, 0, 0.25) !important; } html.white-mode .sidebar-feature-item:hover { background: rgba(154, 138, 90, 0.06) !important; } html.white-mode #sidebar-feature-menu { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode #sidebar-countries-section { border-top-color: rgba(0, 0, 0, 0.06) !important; } /* Sidebar timeline items */ html.white-mode .sb-tl-item { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .sb-tl-item:hover { background: rgba(154, 138, 90, 0.06) !important; border-color: rgba(154, 138, 90, 0.18) !important; } html.white-mode .sb-tl-title { color: #333 !important; } html.white-mode .sb-tl-country { color: #9A8A5A !important; } html.white-mode .sb-tl-meta { color: #999 !important; } html.white-mode .sb-tl-rank { color: #999 !important; background: rgba(0, 0, 0, 0.04) !important; } html.white-mode .sb-tl-arrow { color: rgba(0, 0, 0, 0.2) !important; } html.white-mode .sb-tl-item:hover .sb-tl-arrow, html.white-mode .sb-tl-item:hover .sb-tl-rank { color: #9A8A5A !important; } /* Sidebar country dropdown — white mode */ html.white-mode .sb-country-selected { color: #333 !important; background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.1) !important; } html.white-mode .sb-country-selected:hover { background: rgba(154, 138, 90, 0.06) !important; border-color: rgba(154, 138, 90, 0.3) !important; } html.white-mode .sb-country-dropdown.open .sb-country-selected { border-color: rgba(154, 138, 90, 0.5) !important; background: rgba(154, 138, 90, 0.06) !important; } html.white-mode .sb-country-code { background: rgba(154, 138, 90, 0.15) !important; color: #9A8A5A !important; } html.white-mode .sb-country-options { background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; } html.white-mode .sb-country-option { color: #555 !important; } html.white-mode .sb-country-option:hover { color: #9A8A5A !important; background: rgba(154, 138, 90, 0.06) !important; } /* Country items (alphabetical list) */ html.white-mode .country-item { border-bottom-color: rgba(0, 0, 0, 0.04) !important; color: #333 !important; } html.white-mode .country-item:hover { background: rgba(154, 138, 90, 0.06) !important; border-left-color: #9A8A5A !important; } html.white-mode .alpha-letter { background: #fff !important; border-bottom-color: rgba(154, 138, 90, 0.25) !important; } html.white-mode .alpha-letter-char { color: #9A8A5A !important; } html.white-mode .alpha-count { color: #999 !important; } html.white-mode .alpha-toggle { background: rgba(154, 138, 90, 0.08) !important; border-color: rgba(154, 138, 90, 0.2) !important; color: #9A8A5A !important; } html.white-mode .alpha-divider { background: rgba(0, 0, 0, 0.04) !important; } /* Sidebar overlay */ html.white-mode #sidebar-overlay.show { background: rgba(0, 0, 0, 0.2) !important; } /* ── Hover Card (Country Detail) ── */ html.white-mode #hover-card { background: rgba(255, 255, 255, 0.97) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 28px 85px rgba(0, 0, 0, 0.12) !important; color: #1a1a1a !important; } html.white-mode #hover-card.pinned { border-color: rgba(154, 138, 90, 0.5) !important; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(154, 138, 90, 0.15) !important; } html.white-mode #hover-card .pin-indicator { color: #9A8A5A !important; } html.white-mode #hover-tag { color: #9A8A5A !important; } html.white-mode #hover-name { color: #1a1a1a !important; } html.white-mode #hover-card .border-t { border-top-color: rgba(0, 0, 0, 0.08) !important; } html.white-mode #hover-card h4 { color: #767676 !important; } html.white-mode #hover-card .text-gray-500, html.white-mode #hover-card .text-gray-600 { color: #767676 !important; } /* Broadcast tabs */ html.white-mode .bc-tab { color: #767676 !important; background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.white-mode .bc-tab:hover { color: #9A8A5A !important; border-color: rgba(154, 138, 90, 0.3) !important; background: rgba(154, 138, 90, 0.06) !important; } html.white-mode .bc-tab.active { color: #9A8A5A !important; border-color: rgba(154, 138, 90, 0.4) !important; background: rgba(154, 138, 90, 0.1) !important; } /* News category tabs */ html.white-mode .news-cat-tab { color: #767676 !important; background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.white-mode .news-cat-tab:hover { color: #9A8A5A !important; border-color: rgba(154, 138, 90, 0.3) !important; background: rgba(154, 138, 90, 0.06) !important; } html.white-mode .news-cat-tab.active { color: #9A8A5A !important; border-color: rgba(154, 138, 90, 0.4) !important; background: rgba(154, 138, 90, 0.1) !important; } /* Hover card news articles */ html.white-mode #hover-card a.block { background: rgba(0, 0, 0, 0.03) !important; } html.white-mode #hover-card a.block:hover { background: rgba(154, 138, 90, 0.06) !important; } html.white-mode #hover-card h5.text-white, html.white-mode #hover-card h5.text-xs { color: #1a1a1a !important; } html.white-mode #hover-card a.block:hover h5 { color: #9A8A5A !important; } html.white-mode #hover-card p.text-gray-500, html.white-mode #hover-card .text-gray-500 { color: #999 !important; } html.white-mode #hover-card p.text-gray-400, html.white-mode #hover-card .text-gray-400 { color: #767676 !important; } /* ── User Briefing Panel ── */ html.white-mode .user-briefing { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 24px 72px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(0, 0, 0, 0.02) !important; } html.white-mode .briefing-greeting { color: #767676 !important; } html.white-mode .briefing-name { color: #1a1a1a !important; } html.white-mode .briefing-time { color: #999 !important; } html.white-mode .briefing-divider { background: linear-gradient(90deg, transparent, rgba(154, 138, 90, 0.2), transparent) !important; } html.white-mode .briefing-section-title { color: #555 !important; } html.white-mode .briefing-close { border-color: rgba(0, 0, 0, 0.08) !important; background: rgba(0, 0, 0, 0.03) !important; color: #999 !important; } html.white-mode .briefing-close:hover { background: rgba(0, 0, 0, 0.06) !important; color: #333 !important; border-color: rgba(0, 0, 0, 0.15) !important; } html.white-mode .briefing-news-title { color: #333 !important; } html.white-mode .briefing-news-item:hover .briefing-news-title { color: #000 !important; } html.white-mode .briefing-news-item:hover { background: rgba(154, 138, 90, 0.05) !important; border-color: rgba(154, 138, 90, 0.12) !important; } html.white-mode .briefing-news-meta { color: #999 !important; } html.white-mode .briefing-news-source { color: rgba(154, 138, 90, 0.7) !important; } html.white-mode .briefing-news-number { color: rgba(154, 138, 90, 0.5) !important; } html.white-mode .briefing-icon { background: linear-gradient(135deg, rgba(154, 138, 90, 0.12), rgba(154, 138, 90, 0.04)) !important; border-color: rgba(154, 138, 90, 0.2) !important; color: #9A8A5A !important; } html.white-mode .briefing-country-badge { color: #9A8A5A !important; border-color: rgba(154, 138, 90, 0.2) !important; background: rgba(154, 138, 90, 0.06) !important; } html.white-mode .briefing-loading { color: #999 !important; } html.white-mode .briefing-spinner { border-color: rgba(154, 138, 90, 0.15) !important; border-top-color: #9A8A5A !important; } /* Hot Issues Panel — White Mode */ html.white-mode .hot-issues-panel-title { color: #222 !important; } html.white-mode .hot-issues-panel-subtitle { color: rgba(0,0,0,.45) !important; } html.white-mode .hot-issue-card { background: rgba(0, 0, 0, .02) !important; border-color: rgba(0, 0, 0, .06) !important; } html.white-mode .hot-issue-card:hover { background: rgba(0, 0, 0, .04) !important; border-color: rgba(0, 0, 0, .12) !important; } html.white-mode .hot-issue-rank { color: #999 !important; background: rgba(0, 0, 0, .04) !important; } html.white-mode .hot-issue-title { color: #222 !important; } html.white-mode .hot-issue-card:hover .hot-issue-title { color: #000 !important; } html.white-mode .hot-issue-meta { color: #888 !important; } html.white-mode .hot-issue-heat-label { color: #999 !important; } html.white-mode .hot-issue-heat-bar-bg { background: rgba(0, 0, 0, .08) !important; } html.white-mode .hot-issue-heat-score { color: #555 !important; } html.white-mode .hot-issue-card:hover .hot-issue-heat-score { color: #333 !important; } html.white-mode .hot-issue-btn { color: #666 !important; background: rgba(0, 0, 0, .03) !important; border-color: rgba(0, 0, 0, .08) !important; } html.white-mode .hot-issue-btn:hover { color: #9A8A5A !important; background: rgba(154, 138, 90, .06) !important; border-color: rgba(154, 138, 90, .25) !important; } /* ── Toast ── */ html.white-mode #toast { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #333 !important; } /* ── Timeline Overlay ── */ html.white-mode #timeline-overlay { background: #F8F7F5 !important; } html.white-mode .tl-ov-header { background: linear-gradient(180deg, rgba(248, 247, 245, 0.98) 0%, rgba(248, 247, 245, 0.6) 70%, transparent 100%) !important; } html.white-mode .tl-ov-back { color: #767676 !important; } html.white-mode .tl-ov-back:hover { color: #9A8A5A !important; } /* Timeline panel root */ html.white-mode .tl-panel-root { background: #F8F7F5 !important; color: #1a1a1a !important; } html.white-mode .tl-panel-header-section h1 { color: #1a1a1a !important; } html.white-mode .tl-panel-header-section p { color: #767676 !important; } html.white-mode .tl-panel-badge { color: #9A8A5A !important; background: rgba(154, 138, 90, 0.08) !important; border-color: rgba(154, 138, 90, 0.2) !important; } /* Timeline tabs */ html.white-mode .tl-tab { color: #767676 !important; background: none !important; } html.white-mode .tl-tab.active { background: rgba(154, 138, 90, 0.1) !important; color: #9A8A5A !important; } html.white-mode .tl-tabs { background: rgba(0, 0, 0, 0.03) !important; } /* Timeline summary trunk cards */ html.white-mode .tl-summary-trunk { background: rgba(154, 138, 90, 0.04) !important; border-color: rgba(154, 138, 90, 0.15) !important; } html.white-mode .tl-summary-trunk:hover { background: rgba(154, 138, 90, 0.08) !important; border-color: rgba(154, 138, 90, 0.3) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important; } /* Timeline tree nodes */ html.white-mode .tl-trunk-node { background: rgba(154, 138, 90, 0.04) !important; border-color: rgba(154, 138, 90, 0.15) !important; } html.white-mode .tl-branch-node { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .tl-tree-title { color: #1a1a1a !important; } html.white-mode .tl-tree-actor { color: #767676 !important; } html.white-mode .tl-panel-title { color: #1a1a1a !important; } html.white-mode .tl-panel-date { color: #999 !important; } html.white-mode .tl-panel-desc { color: #767676 !important; } html.white-mode .tl-panel-src-count { color: #999 !important; } html.white-mode .tl-panel-connector-line, html.white-mode .tl-trunk-line { background: rgba(154, 138, 90, 0.2) !important; } html.white-mode .tl-branch-row::before { background: rgba(154, 138, 90, 0.15) !important; } html.white-mode .tl-branch-node::before { background: rgba(154, 138, 90, 0.15) !important; } html.white-mode .tl-edge-badge { background: rgba(0, 0, 0, 0.04) !important; color: #767676 !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Timeline sidebar cards */ html.white-mode .tl-sb-card { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .tl-sb-label { color: #767676 !important; } html.white-mode .tl-sb-ai-badge { background: rgba(154, 138, 90, 0.08) !important; color: #9A8A5A !important; border-color: rgba(154, 138, 90, 0.2) !important; } html.white-mode .tl-sb-insight-oneliner { color: #333 !important; } html.white-mode .tl-sb-insight-summary { color: #555 !important; border-bottom-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .tl-sb-insight-toggle { color: #9A8A5A !important; border-top-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .tl-sb-section { background: rgba(0, 0, 0, 0.02) !important; } html.white-mode .tl-sb-section-label { color: #767676 !important; } html.white-mode .tl-sb-section-text { color: #555 !important; } html.white-mode .tl-sb-entity { border-bottom-color: rgba(0, 0, 0, 0.04) !important; } html.white-mode .tl-sb-entity-name { color: #333 !important; } html.white-mode .tl-sb-entity-role { color: #999 !important; } html.white-mode .tl-sb-entity-group-label { color: #767676 !important; border-bottom-color: rgba(0, 0, 0, 0.06) !important; } /* Sidebar tabs */ html.white-mode .tl-sb-tab-bar { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .tl-sb-tab { color: #767676 !important; } html.white-mode .tl-sb-tab-active { color: #9A8A5A !important; } html.white-mode .tl-sb-tab-active::after { background: linear-gradient(90deg, #9A8A5A, #B8A870) !important; box-shadow: 0 0 8px rgba(154, 138, 90, 0.2) !important; } html.white-mode .tl-sb-tab-count { background: rgba(154, 138, 90, 0.08) !important; color: #9A8A5A !important; } html.white-mode .tl-sb-tab-empty { color: #999 !important; } /* People filter */ html.white-mode .tl-sb-pf-btn { color: #767676 !important; } html.white-mode .tl-sb-pf-active { color: #9A8A5A !important; } /* ── Zoom Overlay ── */ html.white-mode .tl-zoom-overlay { background: rgba(248, 247, 245, 0.97) !important; } html.white-mode .tl-zoom-content h2 { color: #1a1a1a !important; } html.white-mode .tl-zoom-content p { color: #555 !important; } html.white-mode .tl-zoom-nav { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.1) !important; } html.white-mode .tl-zoom-nav button { color: #767676 !important; } html.white-mode .tl-zoom-nav button:hover { color: #9A8A5A !important; } html.white-mode .tl-zoom-counter { color: #999 !important; } html.white-mode .tl-zoom-close { color: #767676 !important; } html.white-mode .tl-zoom-close:hover { color: #9A8A5A !important; } /* Zoom content source links */ html.white-mode .tl-zoom-content a[href] { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .tl-zoom-content a[href]:hover { background: rgba(0, 0, 0, 0.04) !important; } html.white-mode .tl-zoom-content a div[style*="color:#ccc"], html.white-mode .tl-zoom-content a div[style*="color:#aaa"] { color: #333 !important; } html.white-mode .tl-zoom-content a div[style*="color:#444"], html.white-mode .tl-zoom-content a div[style*="color:#555"] { color: #767676 !important; } /* ── White Mode Toggle Button ── */ #white-mode-toggle { position: fixed; top: 24px; right: 28px; z-index: 101; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.4); color: #ccc; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(8px); font-size: 16px; line-height: 1; } #white-mode-toggle:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; transform: scale(1.05); } html.white-mode #white-mode-toggle { border-color: rgba(0, 0, 0, 0.12) !important; background: rgba(255, 255, 255, 0.8) !important; color: #333 !important; } html.white-mode #white-mode-toggle:hover { border-color: rgba(0, 0, 0, 0.25) !important; color: #000 !important; } /* ── Language Toggle Button ── */ #lang-toggle { position: fixed; top: 24px; right: 72px; z-index: 101; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.4); color: #ccc; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(8px); font-size: 11px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-family: 'Manrope', sans-serif; } #lang-toggle:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; transform: scale(1.05); } html.white-mode #lang-toggle { border-color: rgba(0, 0, 0, 0.12) !important; background: rgba(255, 255, 255, 0.8) !important; color: #333 !important; } html.white-mode #lang-toggle:hover { border-color: rgba(0, 0, 0, 0.25) !important; color: #000 !important; } /* ── rr-glass override ── */ html.white-mode .rr-glass { background: rgba(245, 245, 245, 0.85) !important; border-color: rgba(0, 0, 0, 0.06) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } /* ── Economic Calendar Panel (달력) ── */ html.white-mode #econ-calendar-panel { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(0, 0, 0, 0.02) !important; } html.white-mode .ecal-title { color: #767676 !important; } html.white-mode .ecal-close { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: #999 !important; } html.white-mode .ecal-close:hover { background: rgba(0, 0, 0, 0.08) !important; color: #333 !important; } /* Calendar dropdown — white mode */ html.white-mode .ecal-country-selected { color: #9A8A5A !important; background: rgba(154, 138, 90, 0.08) !important; border-color: rgba(154, 138, 90, 0.3) !important; } html.white-mode .ecal-country-selected:hover { background: rgba(154, 138, 90, 0.12) !important; border-color: rgba(154, 138, 90, 0.5) !important; } html.white-mode .ecal-country-options { background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; } html.white-mode .ecal-tab { color: #767676 !important; background: transparent !important; border: none !important; } html.white-mode .ecal-tab:hover { color: #9A8A5A !important; background: rgba(154, 138, 90, 0.06) !important; } /* Month navigation */ html.white-mode .ecal-nav-btn { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: #555 !important; } html.white-mode .ecal-nav-btn:hover { background: rgba(154, 138, 90, 0.08) !important; border-color: rgba(154, 138, 90, 0.25) !important; color: #9A8A5A !important; } html.white-mode .ecal-month-label { color: #1a1a1a !important; } /* Weekday headers */ html.white-mode .ecal-weekdays span { color: #999 !important; } html.white-mode .ecal-weekdays span:first-child { color: #D4645A !important; } html.white-mode .ecal-weekdays span:last-child { color: #4a9eff !important; } /* Calendar grid */ html.white-mode .ecal-grid { border-color: rgba(0, 0, 0, 0.04) !important; } html.white-mode .ecal-cell { border-color: rgba(0, 0, 0, 0.04) !important; } html.white-mode .ecal-day-num { color: #555 !important; } html.white-mode .ecal-cell.ecal-has-event .ecal-day-num { color: #1a1a1a !important; } html.white-mode .ecal-cell.ecal-has-event:hover { background: rgba(154, 138, 90, 0.06) !important; } html.white-mode .ecal-cell.ecal-today { background: rgba(154, 138, 90, 0.06) !important; } html.white-mode .ecal-cell.ecal-today .ecal-day-num { color: #9A8A5A !important; } html.white-mode .ecal-cell.ecal-selected { background: rgba(154, 138, 90, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(154, 138, 90, 0.3) !important; } html.white-mode .ecal-cell.ecal-selected .ecal-day-num { color: #9A8A5A !important; } /* Legend */ html.white-mode .ecal-legend { border-top-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .ecal-legend-item { color: #767676 !important; } /* Events panel */ html.white-mode .ecal-events { border-top-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .ecal-events-header { color: #333 !important; } html.white-mode .ecal-event-item { background: rgba(0, 0, 0, 0.02) !important; } html.white-mode .ecal-event-item:hover { background: rgba(0, 0, 0, 0.04) !important; } html.white-mode .ecal-event-title { color: #1a1a1a !important; } html.white-mode .ecal-event-sub { color: #767676 !important; } html.white-mode .ecal-event-cat { opacity: 0.8; } /* Calendar toggle button */ html.white-mode #ecal-toggle-btn { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #555 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important; } html.white-mode #ecal-toggle-btn:hover { border-color: rgba(154, 138, 90, 0.4) !important; color: #9A8A5A !important; } /* ── Sidebar Search Results ── */ html.white-mode .sb-search-result-item { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .sb-search-result-item:hover { background: rgba(154, 138, 90, 0.06) !important; border-color: rgba(154, 138, 90, 0.18) !important; } html.white-mode .sb-search-title { color: #1a1a1a !important; } html.white-mode .sb-search-sub { color: #999 !important; } html.white-mode .sb-search-arrow { stroke: rgba(0, 0, 0, 0.2) !important; } /* ── Country Timeline Panel (타임라인 목록) ── */ html.white-mode #country-timeline-panel { background: #FFFFFF !important; border-right-color: rgba(0, 0, 0, 0.06) !important; box-shadow: 4px 0 30px rgba(0, 0, 0, 0.06) !important; } html.white-mode #country-timeline-panel>div:first-child { background: #FFFFFF !important; border-bottom-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode #country-timeline-panel #ctp-back { color: #767676 !important; } html.white-mode #country-timeline-panel #ctp-back:hover { color: #9A8A5A !important; } /* Country name, timeline count */ html.white-mode #country-timeline-panel div[style*="color:#e8e6e3"], html.white-mode #country-timeline-panel div[style*="color: #e8e6e3"] { color: #1a1a1a !important; } html.white-mode #country-timeline-panel div[style*="color:#555"] { color: #999 !important; } /* Section headers (진행중, 종료) */ html.white-mode #country-timeline-panel div[style*="color:#6ee7b7"] { color: #3a9a5c !important; } html.white-mode #country-timeline-panel div[style*="color:#f87171"] { color: #d4645a !important; } /* Responsive section at the end */ @media (max-width: 640px) { html.white-mode .tl-summary-trunk { width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════ Perspective Comparison Overlay — White Mode ═══════════════════════════════════════════════════════════════ */ /* Main overlay background */ html.white-mode #perspective-overlay { background: #F8F7F5 !important; } /* --- Left: List Panel --- */ html.white-mode .persp-list-panel { background: rgba(255, 255, 255, 0.98) !important; border-right-color: rgba(0, 0, 0, 0.08) !important; } html.white-mode .persp-list-header { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .persp-list-header h2 { color: #1a1a1a !important; } html.white-mode .persp-list-header p { color: #999 !important; } html.white-mode .persp-list-close { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: #999 !important; } html.white-mode .persp-list-close:hover { background: rgba(154, 138, 90, 0.08) !important; color: #9A8A5A !important; border-color: rgba(154, 138, 90, 0.2) !important; } html.white-mode .persp-list-items::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.08) !important; } /* Article cards in list */ html.white-mode .persp-article-card { background: rgba(0, 0, 0, 0.015) !important; border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .persp-article-card:hover { background: rgba(154, 138, 90, 0.06) !important; border-color: rgba(154, 138, 90, 0.15) !important; } html.white-mode .persp-article-card.active { background: rgba(154, 138, 90, 0.08) !important; border-color: rgba(154, 138, 90, 0.3) !important; } html.white-mode .persp-card-num { color: #999 !important; background: rgba(0, 0, 0, 0.04) !important; } html.white-mode .persp-card-country { color: #9A8A5A !important; } html.white-mode .persp-card-title { color: #1a1a1a !important; } html.white-mode .persp-card-meta { color: #999 !important; } html.white-mode .persp-card-badge { background: rgba(154, 138, 90, 0.15) !important; color: #9A8A5A !important; } /* --- Right: Detail Panel --- */ html.white-mode .persp-detail-panel { background: #F8F7F5 !important; } html.white-mode .persp-detail-panel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.06) !important; } /* Drop zone */ html.white-mode .persp-dropzone { color: #999 !important; } html.white-mode .persp-dropzone.drag-over { background: rgba(154, 138, 90, 0.04) !important; border-color: rgba(154, 138, 90, 0.25) !important; } html.white-mode .persp-dropzone h3 { color: #999 !important; } html.white-mode .persp-dropzone p { color: #aaa !important; } /* Comparison header */ html.white-mode .persp-comp-header h2 { color: #1a1a1a !important; } html.white-mode .persp-comp-header p { color: #999 !important; } /* View cards (local vs outside) */ html.white-mode .persp-view-card { border-color: rgba(0, 0, 0, 0.06) !important; background: rgba(0, 0, 0, 0.015) !important; } html.white-mode .persp-view-text { color: #444 !important; } /* Frame Difference section */ html.white-mode .persp-frame-section { background: rgba(154, 138, 90, 0.04) !important; border-color: rgba(154, 138, 90, 0.12) !important; } html.white-mode .persp-section-label { color: #9A8A5A !important; } html.white-mode .persp-frame-item { background: rgba(0, 0, 0, 0.025) !important; } html.white-mode .persp-frame-item-label { color: #999 !important; } html.white-mode .persp-frame-item-value { color: #333 !important; } html.white-mode .persp-key-diff { background: rgba(154, 138, 90, 0.06) !important; border-color: rgba(154, 138, 90, 0.15) !important; } html.white-mode .persp-key-diff .persp-frame-item-label { color: #9A8A5A !important; } html.white-mode .persp-key-diff .persp-frame-item-value { color: #5a4f35 !important; } html.white-mode .persp-bias-badge { color: #fff !important; } /* Keyword tags */ html.white-mode .persp-keyword-tag { color: #555 !important; background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Representative Articles */ html.white-mode .persp-repr-article { background: rgba(0, 0, 0, 0.015) !important; border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode .persp-repr-article:hover { background: rgba(154, 138, 90, 0.05) !important; border-color: rgba(154, 138, 90, 0.15) !important; } html.white-mode .persp-repr-title { color: #333 !important; } html.white-mode .persp-repr-source { color: #999 !important; } /* Loading spinner */ html.white-mode .persp-loading-spinner { border-color: rgba(154, 138, 90, 0.15) !important; border-top-color: #9A8A5A !important; } /* ═══════════════════════════════════════════════════════════════ Country vs Country Perspective Panel — White Mode ═══════════════════════════════════════════════════════════════ */ /* Panel background */ html.white-mode #cc-perspective-panel { background: #F8F7F5 !important; } /* Back button */ html.white-mode #cc-perspective-panel #cc-back { color: #767676 !important; } html.white-mode #cc-perspective-panel #cc-back:hover { color: #9A8A5A !important; } /* Header text */ html.white-mode #cc-perspective-panel div[style*="color:#555"] { color: #999 !important; } html.white-mode #cc-perspective-panel h1[style*="color:#e8e6e3"] { color: #1a1a1a !important; } /* Topic cards */ html.white-mode #cc-perspective-panel .cc-topic-card { background: rgba(0, 0, 0, 0.015) !important; border-color: rgba(0, 0, 0, 0.06) !important; } html.white-mode #cc-perspective-panel .cc-topic-card:hover { background: rgba(154, 138, 90, 0.06) !important; border-color: rgba(154, 138, 90, 0.15) !important; } /* Topic card text (title) */ html.white-mode #cc-perspective-panel .cc-topic-card div[style*="color:#e0e0e0"] { color: #1a1a1a !important; } /* Topic card subtitle */ html.white-mode #cc-perspective-panel .cc-topic-card div[style*="color:#555"] { color: #999 !important; } /* Topic card chevron */ html.white-mode #cc-perspective-panel .cc-topic-card svg { stroke: rgba(0, 0, 0, 0.2) !important; } /* Topic card vs text */ html.white-mode #cc-perspective-panel .cc-topic-card span[style*="color:#555"] { color: #999 !important; } /* ── Detail View ── */ /* Topic detail header border */ html.white-mode #cc-perspective-panel #cc-topic-detail div[style*="border-bottom:1px solid rgba(255,255,255"] { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } /* Detail title */ html.white-mode #cc-perspective-panel #cc-topic-detail h2[style*="color:#e8e6e3"] { color: #1a1a1a !important; } /* Detail subtitle */ html.white-mode #cc-perspective-panel #cc-topic-detail p[style*="color:#555"] { color: #999 !important; } /* Comparison columns — headlines */ html.white-mode #cc-perspective-panel #cc-topic-detail div[style*="color:#ddd"] { color: #1a1a1a !important; } /* Comparison columns — framing */ html.white-mode #cc-perspective-panel #cc-topic-detail p[style*="color:#888"] { color: #555 !important; } /* Comparison columns — backgrounds */ html.white-mode #cc-perspective-panel #cc-topic-detail div[style*="background:rgba(59,130,246,0.03)"] { background: rgba(59, 130, 246, 0.04) !important; border-color: rgba(59, 130, 246, 0.12) !important; } html.white-mode #cc-perspective-panel #cc-topic-detail div[style*="background:rgba(239,68,68,0.03)"] { background: rgba(239, 68, 68, 0.04) !important; border-color: rgba(239, 68, 68, 0.12) !important; } /* Source quote boxes */ html.white-mode #cc-perspective-panel #cc-topic-detail div[style*="background:rgba(59,130,246,0.04)"] { background: rgba(59, 130, 246, 0.05) !important; } html.white-mode #cc-perspective-panel #cc-topic-detail div[style*="background:rgba(239,68,68,0.04)"] { background: rgba(239, 68, 68, 0.05) !important; } /* Quote text */ html.white-mode #cc-perspective-panel #cc-topic-detail div[style*="color:#999"] { color: #555 !important; } /* ── Vote Card ── */ html.white-mode #cc-perspective-panel #cc-vote-card { background: rgba(99, 102, 241, 0.04) !important; border-color: rgba(99, 102, 241, 0.12) !important; } html.white-mode #cc-perspective-panel #cc-vote-card div[style*="color:#ccc"] { color: #333 !important; } /* Vote buttons */ html.white-mode #cc-perspective-panel #cc-vote-left { background: rgba(59, 130, 246, 0.06) !important; border-color: rgba(59, 130, 246, 0.2) !important; } html.white-mode #cc-perspective-panel #cc-vote-right { background: rgba(239, 68, 68, 0.06) !important; border-color: rgba(239, 68, 68, 0.2) !important; } html.white-mode #cc-perspective-panel #cc-vote-card div[style*="color:#888"] { color: #767676 !important; } /* Vote result bar background */ html.white-mode #cc-perspective-panel #cc-vote-result div[style*="background:rgba(255,255,255,0.05)"] { background: rgba(0, 0, 0, 0.06) !important; } /* Vote status */ html.white-mode #cc-perspective-panel #cc-vote-status { color: #999 !important; } /* Revote button */ html.white-mode #cc-perspective-panel #cc-revote-btn { color: #818cf8 !important; background: rgba(99, 102, 241, 0.06) !important; border-color: rgba(99, 102, 241, 0.15) !important; } /* ── AI Analysis Card ── */ html.white-mode #cc-perspective-panel #cc-ai-diff { background: rgba(154, 138, 90, 0.04) !important; border-color: rgba(154, 138, 90, 0.12) !important; } /* AI diff items */ html.white-mode #cc-perspective-panel #cc-ai-diff-content span[style*="color:#bbb"] { color: #555 !important; } html.white-mode #cc-perspective-panel #cc-ai-diff-content p[style*="color:#999"] { color: #555 !important; } /* AI diff section border */ html.white-mode #cc-perspective-panel #cc-ai-diff-content div[style*="border-top:1px solid rgba(255,255,255"] { border-top-color: rgba(0, 0, 0, 0.06) !important; } /* AI disclaimer text */ html.white-mode #cc-perspective-panel #cc-ai-diff div[style*="color:#555"] { color: #999 !important; } /* ── Navigation ── */ html.white-mode #cc-perspective-panel .cc-nav-btn { color: #767676 !important; } html.white-mode #cc-perspective-panel .cc-nav-btn:hover { color: #9A8A5A !important; } html.white-mode #cc-perspective-panel #cc-topic-detail div[style*="border-top:1px solid rgba(255,255,255,0.04)"] { border-top-color: rgba(0, 0, 0, 0.06) !important; } /* Navigation page counter */ html.white-mode #cc-perspective-panel span[style*="color:#555"] { color: #999 !important; }