/* ═══════════════════════════════════════════════════════════
   CVD PAGE — Emerging Tech Design Tokens
   Mirrors desktop.html CSS variables for theme continuity
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; }

/* ── Default: Light mode ────────────────────────────────── */
:root,
html[data-theme="light"] {
  --bg:    oklch(96%  0.008 255);
  --s1:    oklch(99.5% 0.003 255);
  --s2:    oklch(94%  0.010 255);
  --s3:    oklch(90%  0.014 255);
  --br:    oklch(86%  0.014 255);
  --br-hi: oklch(70%  0.020 255);

  --tx-1: oklch(14%  0.020 255);
  --tx-2: oklch(40%  0.022 255);
  --tx-3: oklch(58%  0.018 255);

  --amber:      oklch(54%  0.21  73);
  --amber-dim:  oklch(54%  0.21  73 / 0.10);
  --amber-ring: oklch(54%  0.21  73 / 0.24);
  --amber-text: oklch(99%  0.003 73);

  --ai:      oklch(52%  0.22 280);
  --ai-dim:  oklch(52%  0.22 280 / 0.09);

  --teal:     oklch(56%  0.15 188);
  --teal-dim: oklch(56%  0.15 188 / 0.09);

  --up:     oklch(52%  0.16 188);
  --up-dim: oklch(52%  0.16 188 / 0.09);
  --dn:     oklch(52%  0.23  25);
  --dn-dim: oklch(52%  0.23  25 / 0.09);

  --hdr-bg:    oklch(99.5% 0.003 255 / 0.94);
  --sidebar-bg: oklch(97% 0.005 255);
}

html[data-theme="dark"] {
  --bg:    oklch(10.2% 0.013 255);
  --s1:    oklch(13.5% 0.015 255);
  --s2:    oklch(17%   0.017 255);
  --s3:    oklch(21%   0.019 255);
  --br:    oklch(26%   0.018 255);
  --br-hi: oklch(38%   0.022 255);

  /* 가독성 개선: tx-2, tx-3 밝기 상향 */
  --tx-1: oklch(95%  0.006 255);
  --tx-2: oklch(74%  0.012 255);
  --tx-3: oklch(54%  0.012 255);

  --amber:      oklch(80%  0.18  73);
  --amber-dim:  oklch(80%  0.18  73 / 0.14);
  --amber-ring: oklch(80%  0.18  73 / 0.30);
  --amber-text: oklch(10%  0.008 73);

  --ai:      oklch(68%  0.20 280);
  --ai-dim:  oklch(68%  0.20 280 / 0.13);

  --teal:     oklch(74%  0.14 188);
  --teal-dim: oklch(74%  0.14 188 / 0.13);

  --up:     oklch(70%  0.15 188);
  --up-dim: oklch(70%  0.15 188 / 0.12);
  --dn:     oklch(62%  0.22  25);
  --dn-dim: oklch(62%  0.22  25 / 0.12);

  --hdr-bg:    oklch(10.2% 0.013 255 / 0.94);
  --sidebar-bg: oklch(12% 0.014 255);
}

/* ── Base ─────────────────────────────────────── */
html {
  font-size: 16px;
  transition: background 0.22s, color 0.22s;
}

body {
  background: var(--bg) !important;
  color: var(--tx-1) !important;
  font-family: 'Inter', 'Noto Sans KR', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── CVD Header ───────────────────────────────── */
.cvd-hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--br);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.22s, border-color 0.22s;
}
.cvd-hdr-inner {
  display: flex; align-items: center;
  height: 56px; padding: 0 20px; gap: 0;
}
.cvd-logo {
  display: flex; align-items: center; gap: 10px;
  margin-right: 24px; flex-shrink: 0;
  text-decoration: none;
}
.cvd-logo img { width: 24px; height: 24px; object-fit: contain; }
.cvd-logo-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 600;
  color: var(--tx-1); letter-spacing: -0.02em;
  white-space: nowrap;
}
.cvd-logo-text em { color: var(--amber); font-style: normal; }

.cvd-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.cvd-nav a {
  font-size: 13px; color: var(--tx-2);
  padding: 5px 10px; border-radius: 6px;
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
}
.cvd-nav a:hover { color: var(--tx-1); background: var(--s2); }
.cvd-nav a.active { color: var(--amber); }

.cvd-hdr-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Ticker */
.cvd-ticker { display: flex; align-items: center; gap: 6px; }
.cvd-ticker-sym {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 600;
  color: var(--amber); letter-spacing: 0.04em;
}
.cvd-ticker-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 500; color: var(--tx-1);
  font-feature-settings: 'tnum' 1;
}
.cvd-ticker-chg {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-feature-settings: 'tnum' 1;
}
.cvd-hdr-divider { width: 1px; height: 20px; background: var(--br); }

/* Theme toggle */
.cvd-theme-toggle {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  background: none; border: none; padding: 4px;
}
.cvd-toggle-track {
  width: 34px; height: 18px; border-radius: 9px;
  background: var(--s2); border: 1px solid var(--br);
  position: relative; transition: all 0.2s;
}
.cvd-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tx-1); transition: transform 0.2s;
}
html[data-theme="light"] .cvd-toggle-knob { transform: translateX(16px); }

/* Mobile menu button override */
.cvd-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px;
  border: 1px solid var(--br); background: transparent;
  color: var(--tx-2); cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.cvd-menu-btn:hover { border-color: var(--br-hi); color: var(--tx-1); }

/* ── Main content area ────────────────────────── */
.cvd-main-wrap {
  background: var(--bg);
  min-height: calc(100vh - 56px);
}
.cvd-content-area {
  background: var(--bg);
  padding: 16px 20px;
}

/* ── Sidebar ──────────────────────────────────── */
.cvd-sidebar-panel {
  background: var(--sidebar-bg) !important;
  border-left: 1px solid var(--br) !important;
}

/* ── Control pills / buttons ──────────────────── */
.cvd-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 500;
  padding: 5px 12px; border-radius: 5px;
  border: 1px solid var(--br);
  background: var(--s2); color: var(--tx-2);
  cursor: pointer; transition: all 0.12s;
  white-space: nowrap;
}
.cvd-btn:hover { border-color: var(--br-hi); color: var(--tx-1); }
.cvd-btn.active {
  background: var(--amber-dim);
  border-color: var(--amber-ring);
  color: var(--amber);
}

/* Ticker badge in chart header */
.cvd-ticker-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px; font-weight: 600;
  color: var(--tx-1); letter-spacing: 0.02em;
}

/* Usage bar */
.cvd-usage-bar {
  height: 2px; border-radius: 1px;
  background: var(--br); overflow: hidden;
}
.cvd-usage-fill {
  height: 100%; background: var(--amber); border-radius: 1px;
}

/* Live dot */
.cvd-live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--up);
  animation: cvdBlink 2.2s ease-in-out infinite;
}
@keyframes cvdBlink { 0%,100%{opacity:1} 50%{opacity:0.25} }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--s1); }
::-webkit-scrollbar-thumb { background: var(--s2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--s3); }

/* ═══════════════════════════════════════════════════════════
   Tailwind dark-mode override — map gray scale to design tokens
   This avoids editing every JSX component individually.
═══════════════════════════════════════════════════════════ */

/* Backgrounds */
html[data-theme="dark"] .dark\:bg-gray-900, .dark .dark\:bg-gray-900 { background-color: var(--bg) !important; }
html[data-theme="dark"] .dark\:bg-gray-800, .dark .dark\:bg-gray-800 { background-color: var(--s1) !important; }
html[data-theme="dark"] .dark\:bg-gray-700, .dark .dark\:bg-gray-700 { background-color: var(--s2) !important; }
html[data-theme="dark"] .bg-gray-900  { background-color: var(--bg) !important; }
html[data-theme="dark"] .bg-gray-800  { background-color: var(--s1) !important; }
html[data-theme="dark"] .bg-gray-700  { background-color: var(--s2) !important; }
html[data-theme="dark"] .bg-gray-100  { background-color: var(--s2) !important; }

/* Text */
html[data-theme="dark"] .dark\:text-white, .dark .dark\:text-white { color: var(--tx-1) !important; }
html[data-theme="dark"] .dark\:text-gray-200, .dark .dark\:text-gray-200 { color: var(--tx-1) !important; }
html[data-theme="dark"] .dark\:text-gray-300, .dark .dark\:text-gray-300 { color: var(--tx-2) !important; }
html[data-theme="dark"] .dark\:text-gray-400, .dark .dark\:text-gray-400 { color: var(--tx-3) !important; }

/* Borders */
html[data-theme="dark"] .dark\:border-gray-700, .dark .dark\:border-gray-700 { border-color: var(--br) !important; }
html[data-theme="dark"] .dark\:border-gray-600, .dark .dark\:border-gray-600 { border-color: var(--br-hi) !important; }

/* Hover states */
html[data-theme="dark"] .dark\:hover\:bg-gray-700:hover,
.dark .dark\:hover\:bg-gray-700:hover { background-color: var(--s2) !important; }
html[data-theme="dark"] .dark\:hover\:bg-gray-800:hover,
.dark .dark\:hover\:bg-gray-800:hover { background-color: var(--s1) !important; }

/* Light mode Tailwind overrides to match our light palette */
html[data-theme="light"] body { background-color: var(--bg) !important; }
html[data-theme="light"] .bg-gray-50 { background-color: var(--bg) !important; }
html[data-theme="light"] .bg-white   { background-color: var(--s1) !important; }
html[data-theme="light"] .bg-gray-100 { background-color: var(--s2) !important; }
html[data-theme="light"] .border-gray-200 { border-color: var(--br) !important; }
html[data-theme="light"] .border-gray-300 { border-color: var(--br) !important; }
html[data-theme="light"] .text-gray-900 { color: var(--tx-1) !important; }
html[data-theme="light"] .text-gray-700 { color: var(--tx-2) !important; }
html[data-theme="light"] .text-gray-600 { color: var(--tx-2) !important; }
html[data-theme="light"] .text-gray-500 { color: var(--tx-3) !important; }

/* Selected ticker — amber instead of blue */
.bg-blue-900 { background-color: var(--amber-dim) !important; }
.text-blue-200 { color: var(--amber) !important; }
.bg-blue-100  { background-color: var(--amber-dim) !important; }
.text-blue-800 { color: var(--amber) !important; }
.bg-amber-100 { background-color: var(--amber-dim) !important; }

/* Search bar override
   ⚠️  border-color은 외부 wrapper div가 담당 — input 자체에 border 추가 금지 (이중 테두리 방지) */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"] {
  color: var(--tx-1) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="search"] {
  color: var(--tx-1) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}
/* Search wrapper (the visible bordered container) */
html[data-theme="dark"] .border.rounded-lg,
html[data-theme="dark"] .rounded-lg.border {
  background: var(--s2) !important;
  border-color: var(--br) !important;
}
html[data-theme="light"] .border.rounded-lg,
html[data-theme="light"] .rounded-lg.border {
  background: var(--s1) !important;
  border-color: var(--br) !important;
}

/* Chart tooltip */
html[data-theme="dark"] .recharts-tooltip-wrapper .bg-black\/40 { background: oklch(13.5% 0.015 255 / 0.92) !important; }

/* Sidebar panel — floating on desktop */
.lg\:fixed { background: var(--sidebar-bg) !important; border-left: 1px solid var(--br) !important; }

/* Header shadow override */
html[data-theme="dark"] .shadow-sm { box-shadow: none !important; border-bottom: 1px solid var(--br) !important; }