/* ═══════════════════════════════════════════════════════════
   styles/app.css  —  Global custom styles & theme variables
   Tailwind handles layout/spacing; CSS vars handle theming.
═══════════════════════════════════════════════════════════ */

/* ── Theme: Light (default) ──────────────────────────── */
:root {
  --bg-base:       #f8fafc;
  --bg-surface:    #ffffff;
  --bg-surface2:   #f1f5f9;
  --border:        #e2e8f0;
  --text-main:     #0f172a;
  --text-sub:      #475569;
  --text-muted:    #94a3b8;
  /* Chart.js 에서 읽는 변수 */
  --chart-grid:    rgba(0,0,0,0.07);
  --chart-tick:    #94a3b8;
  --tt-bg:         #ffffff;
  --tt-text:       #0f172a;
  --tt-border:     #e2e8f0;
}

/* ── Theme: Dark ─────────────────────────────────────── */
html.dark {
  --bg-base:       #020617;
  --bg-surface:    #0f172a;
  --bg-surface2:   #1e293b;
  --border:        #1e293b;
  --text-main:     #f1f5f9;
  --text-sub:      #94a3b8;
  --text-muted:    #475569;
  --chart-grid:    rgba(51,65,85,0.4);
  --chart-tick:    #475569;
  --tt-bg:         #1e293b;
  --tt-text:       #e2e8f0;
  --tt-border:     #334155;
}

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: var(--bg-base); }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 4px; }

/* ── Range Slider ────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-surface2);
  outline: none;
  cursor: pointer;
  width: 100%;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #22c55e;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
  transition: box-shadow 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgba(34,197,94,0.3);
}

/* ── Animations ──────────────────────────────────────── */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.wizard-enter { animation: fadeSlideIn 0.28s ease both; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in { animation: fadeIn 0.35s ease both; }

/* ── Table row hover ─────────────────────────────────── */
#yearly-table tr { transition: background 0.1s; }