:root{
  --brand:#111111;
  --brand-dim:rgba(0,0,0,.05);

  --win:#16a34a;
  --win-bg:rgba(22,163,74,.08);

  --loss:#dc2626;
  --loss-bg:rgba(220,38,38,.08);

  --draw:#64748b;
  --draw-bg:rgba(100,116,139,.08);

  --ok:#16a34a;
  --err:#dc2626;
  --warn:#d97706;

  --c1:#2563eb;
  --c2:#7c3aed;
  --c3:#ea580c;
  --c4:#059669;

  --height:#0284c7;
  --height-dim:rgba(2,132,199,.08);
  --weight:#ea580c;
  --weight-dim:rgba(234,88,12,.08);

  --gold:#d97706;
  --gold-dim:rgba(217,119,6,.08);
  --silver:#64748b;
  --silver-dim:rgba(100,116,139,.08);

  --success:#16a34a;
}
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body.theme-light{
  --black:#f6f7f9;
  --dark:#eef1f4;
  --panel:#ffffff;
  --panel2:#f8fafc;

  --border:rgba(0,0,0,.08);
  --border2:rgba(0,0,0,.14);

  --text:#111827;
  --muted:#6b7280;
  --muted2:#9ca3af;

  background:var(--black);
  color:var(--text);
}

body.theme-dark{
  --black:#0a0c10;
  --dark:#11141a;
  --panel:#181c24;
  --panel2:#1e2330;

  --border:rgba(255,255,255,.07);
  --border2:rgba(255,255,255,.13);

  --text:#f0f2f5;
  --muted:#7a8294;
  --muted2:#4a5060;

  background:var(--black);
  color:var(--text);
}

/* 화이트모드에서 카드가 너무 밋밋하지 않게
body.theme-light .card, 
body.theme-light .game-item,*/
body.theme-light .stat-card,
body.theme-light .hero,
body.theme-light .tour-card,
body.theme-light .log-card,
body.theme-light .record-card,
body.theme-light .option-card,
body.theme-light .kpi,
body.theme-light .chart-card,
body.theme-light .table-card,
body.theme-light .form-card,
body.theme-light .section,
body.theme-light .month-card,
body.theme-light .split-card,
body.theme-light .streak-card,
body.theme-light .sheet-box,
body.theme-light .shortcut-card{
  box-shadow:0 4px 18px rgba(15,23,42,.05);
}