/* 공통 디자인 토큰 — 모든 페이지가 이 한 벌을 공유한다.
 *
 * 예전엔 이 블록이 12개 CSS에 그대로 복붙돼 있었다(각 파일 헤더가 "mood/songbook 토큰 차용"이라고
 * 자백해 두기까지 했다). 색 하나 바꾸려면 12곳을 고쳐야 했고, 실제로 포매팅이 갈라지기 시작했다.
 * 페이지 CSS보다 **먼저** 링크할 것 — 페이지가 개별 토큰을 덮어쓰고 싶으면 자기 :root에서 재선언하면 된다.
 */
:root {
  --bg: #15171c;
  --bg-2: #1c1f26;
  --card: #21252e;
  --card-2: #2a2f3a;
  --border: #343a46;
  --text: #e9ebef;
  --muted: #98a1b0;
  --primary: #8b5cf6;
  --primary-2: #a274f4;
  --green: #2ecc71;
  --red: #e74c3c;
  --amber: #f1c40f;

  /* 글꼴은 두 벌뿐이다(2026-09-06).
   * --font-ui: 사람이 브라우저에서 보는 모든 페이지. 시스템 폰트라 요청 0회·즉시 렌더(치지직 본문과
   *   같은 방식). 맥은 Apple SD Gothic Neo, 윈도우는 맑은 고딕(400/700뿐이라 900이 700으로 보인다),
   *   Noto가 깔린 리눅스/안드로이드는 그것. 이전엔 Google Fonts에서 Noto Sans KR을 받았다 —
   *   첫 방문 수백 KB, 페이지마다 CSS 요청 + 외부 호스트 2곳, swap 깜빡임. 관리 화면엔 과했다.
   * --font-stream: OBS 브라우저 소스로 **방송에 송출**되는 화면(overlay, roulette). 스트리머 OS와
   *   무관하게 같은 글꼴이어야 해서 웹폰트를 유지한다. 지금은 Noto Sans KR(Google Fonts) —
   *   Pretendard 전환·자체 호스팅은 이 값과 해당 HTML의 <link>만 바꾸면 된다. 캔버스는 CSS 변수를
   *   못 읽으므로 roulette/_core/engine.js가 getComputedStyle로 이 값을 읽는다. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
  --font-stream: "Noto Sans KR", sans-serif;
}