/* 공통 — 색, 글꼴, 기본 모양. 색은 여기 변수만 바꾸면 전체에 반영된다(밝은 화면·어두운 화면 자동). */
:root {
  --bg: #f5f5f3;
  --panel: #ffffff;
  --line: #e3e2de;
  --text: #1f1f1d;
  --sub: #66655f;
  --muted: #98968f;
  --hover: #efeeea;
  --accent: #2f6fdb;
  --accent-bg: #e7effc;
  --accent-text: #1c4fa6;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151514;
    --panel: #1e1e1c;
    --line: #34332f;
    --text: #ecebe6;
    --sub: #a8a69f;
    --muted: #7d7b75;
    --hover: #2a2926;
    --accent: #5b93f1;
    --accent-bg: #1f2c45;
    --accent-text: #a8c6ff;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
}

body.no-scroll { overflow: hidden; }

button, select, input { font: inherit; color: inherit; }

[hidden] { display: none !important; }

.tag {
  font-size: 11px;
  line-height: 18px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
}

.fatal {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #fdecea;
  color: #8a1c14;
}