/* CSS 변수 — 라이트/다크 모드 공용 테마. */

:root {
  --bg: #ffffff;
  --bg-card: rgba(255,255,255,0.9);
  --bg-page: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --bg-header: #ffffff;
  --bg-footer: #f8fafc;
  --bg-sidebar: #1e293b;
  --bg-sidebar-active: #334155;
  --bg-subtle: rgba(0,0,0,0.02);
  --text: #1e293b;
  --text-sub: #64748b;
  --text-footer: #94a3b8;
  --text-sidebar: #cbd5e1;
  --text-sidebar-active: #ffffff;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.12);
  --border-header: #e2e8f0;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --danger: #dc2626;
  --success: #059669;
  --spinner-bg: rgba(99,102,241,0.15);
  --error-border: rgba(239,68,68,0.15);

  /* 간격 시스템 (tight → loose) */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 14px;
  --gap-lg: 20px;
  --gap-xl: 28px;
  --gap-xxl: 40px;

  /* 타이포 계층 */
  --fs-h1: 1.5rem;
  --fs-h2: 1.05rem;
  --fs-h3: 0.9rem;
  --fs-body: 0.9rem;
  --fs-sub: 0.82rem;
  --fs-help: 0.78rem;

  --radius: 12px;
  --radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --bg-card: rgba(30,41,59,0.8);
    --bg-page: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --bg-header: #1e293b;
    --bg-footer: #1e293b;
    --bg-sidebar: #020617;
    --bg-sidebar-active: #1e293b;
    --bg-subtle: rgba(255,255,255,0.03);
    --text: #f1f5f9;
    --text-sub: #94a3b8;
    --text-footer: #64748b;
    --text-sidebar: #94a3b8;
    --text-sidebar-active: #f1f5f9;
    --border: rgba(148,163,184,0.15);
    --border-strong: rgba(148,163,184,0.25);
    --border-header: rgba(148,163,184,0.1);
    --spinner-bg: rgba(99,102,241,0.2);
    --error-border: rgba(239,68,68,0.2);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
}