/* ============================================================
   Design Tokens — 1차
   - 컬러는 light/dark 둘 다 정의. body의 data-theme로 스위치.
   - 트레이더 친화 다크모드 우선 톤(코드 에디터 느낌은 피함, 가독성 우선).
   ============================================================ */
:root {
  /* spacing scale (4의 배수) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --lh-tight: 1.25;
  --lh-base: 1.6;

  /* layout */
  --max-w: 960px;
  --header-h: 56px;

  /* semantic colors — light (default) */
  --bg: #ffffff;
  --bg-elev: #f8fafc;
  --bg-muted: #f1f5f9;
  --fg: #0f172a;
  --fg-muted: #475569;
  --fg-faint: #94a3b8;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #2563eb;
  --accent-fg: #ffffff;
  --accent-soft: #dbeafe;
  --success: #16a34a;
  --warning: #ca8a04;
  --danger: #dc2626;
  --status-live-bg: #2563eb;
  --status-live-fg: #ffffff;
  --status-upcoming-bg: #f1f5f9;
  --status-upcoming-fg: #334155;
  --status-ended-bg: #e2e8f0;
  --status-ended-fg: #64748b;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0b1220;
  --bg-elev: #111a2e;
  --bg-muted: #1a2540;
  --fg: #e6edf7;
  --fg-muted: #9aa7bd;
  --fg-faint: #5d6b85;
  --border: #1f2a44;
  --border-strong: #2c3a5c;
  --accent: #60a5fa;
  --accent-fg: #0b1220;
  --accent-soft: #1e3a8a;
  --success: #22c55e;
  --warning: #eab308;
  --danger: #f87171;
  --status-live-bg: #60a5fa;
  --status-live-fg: #0b1220;
  --status-upcoming-bg: #1a2540;
  --status-upcoming-fg: #cbd5e1;
  --status-ended-bg: #18223a;
  --status-ended-fg: #64748b;

  color-scheme: dark;
}

/* OS 다크 선호 시 사용자가 명시 안 했어도 다크 적용 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --bg-elev: #111a2e;
    --bg-muted: #1a2540;
    --fg: #e6edf7;
    --fg-muted: #9aa7bd;
    --fg-faint: #5d6b85;
    --border: #1f2a44;
    --border-strong: #2c3a5c;
    --accent: #60a5fa;
    --accent-fg: #0b1220;
    --accent-soft: #1e3a8a;
    --success: #22c55e;
    --warning: #eab308;
    --danger: #f87171;
    --status-live-bg: #60a5fa;
    --status-live-fg: #0b1220;
    --status-upcoming-bg: #1a2540;
    --status-upcoming-fg: #cbd5e1;
    --status-ended-bg: #18223a;
    --status-ended-fg: #64748b;
    color-scheme: dark;
  }
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body { transition: background 200ms ease, color 200ms ease; }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); margin: var(--space-5) 0 var(--space-3); }
h2 { font-size: var(--fs-xl); line-height: var(--lh-tight); margin: var(--space-6) 0 var(--space-3); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-tight); margin: var(--space-5) 0 var(--space-2); }
p, ul, ol { margin: var(--space-3) 0; }
small { color: var(--fg-muted); font-size: var(--fs-xs); }
code { font-family: var(--font-mono); font-size: 0.95em; background: var(--bg-muted); padding: 1px 4px; border-radius: var(--radius-sm); }

/* ============================================================
   Layout
   ============================================================ */
main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}
.site-header .logo {
  font-weight: 700;
  font-size: var(--fs-md);
  text-decoration: none;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.site-header nav { display: flex; align-items: center; gap: var(--space-4); }
.site-header nav a {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.site-header nav a:hover { color: var(--fg); }

.theme-toggle {
  background: var(--bg-muted);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: var(--fs-xs);
  cursor: pointer;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--border-strong); }

.site-footer {
  max-width: var(--max-w);
  margin: var(--space-10) auto var(--space-4);
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer nav a { color: var(--fg-muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--fg); }
.site-footer .disclaimer {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}

/* ============================================================
   Ad slots (자리만 — 실제 코드는 통과 후 삽입)
   ============================================================ */
.ad-slot {
  max-width: var(--max-w);
  margin: var(--space-5) auto;
  min-height: 90px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-faint);
  font-size: var(--fs-xs);
}
.ad-slot::before {
  content: "Advertisement";
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   Hero (메인 첫 화면)
   ============================================================ */
.hero {
  padding: var(--space-6) 0 var(--space-4);
}
.hero h1 {
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
}
.hero p {
  color: var(--fg-muted);
  font-size: var(--fs-md);
  margin: 0;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --fs-2xl: 28px;
    --fs-xl: 22px;
    --fs-lg: 18px;
  }
  main { padding: var(--space-4) var(--space-3); }
  .site-header { padding: 0 var(--space-3); }
  .site-header nav { gap: var(--space-3); }
}