/* 아이마스 서비스 가족의 바탕 — 노래 맞추기 · 노래 폴더 · 컬러 퀴즈 · 허브가 같은 파일을 읽는다.
   원본은 노래 맞추기 css/tokens.css. 다른 서비스 것은 복사본 — 고칠 때는 원본을 고치고 node tools/sync.mjs (노래 맞추기 tools/check.mjs 가 견줌).

   조용한 바탕, 색은 내용이 낸다:
   · 바탕과 틀은 무채색 (라이트 #f5f5f7 + 흰 카드 / 다크 검정 + #1c1c1e 카드). 색은 커버 · 아이돌 이미지 컬러 · 시리즈 색에서만.
   · 서비스 색(--tint)은 여기 없다 — 서비스마다 제 스타일에서 정하고, 주 동작 하나에만 쓴다.
   · 큰 제목은 아주 굵고 촘촘하게, 숫자는 고정폭. 모양은 둥근 카드(--r-card) · 알약 · 세그먼트 · 아래 시트 한 벌.
   · 카드 표면(--shadow-s): 라이트는 머리카락 선 + 가까운 그림자 + 먼 그림자 — 종이가 바탕 위에 놓인 느낌. 다크는 그림자 대신 위 가장자리에 받는 빛.
   · 구역 제목은 작은 글자 + 서비스 색 짧은 줄(눈썹 제목), 위 줄의 단추들은 한 캡슐에 모음 — 서비스마다 제 스타일에서 같은 모양으로.
   · 움직임은 짧게: 누르면 줄고(--ease), 튀는 것은 --spring. 움직임 줄이기 설정을 지킨다.

   다크는 두 가지로 켜진다 — 앱이 화면 모드를 정할 때는 data-theme="dark", 정하지 않으면(data-theme 없음) 기기 설정.
   그래서 다크 값이 두 번 적혀 있다 (아래 두 블록은 같은 값 — tools/check.mjs 가 봄). */
:root {
  --bg: #f5f5f7; --bg-blur: rgba(245, 245, 247, .8);
  --card: #ffffff; --card-2: #f2f2f5;
  --label: #0e0e12; --label-2: rgba(28, 28, 40, .64); --label-3: rgba(28, 28, 40, .34);
  --sep: rgba(20, 20, 40, .1); --fill: rgba(118, 118, 140, .12); --fill-2: rgba(118, 118, 140, .22);
  --ok: #17b26a; --ok-bg: rgba(23, 178, 106, .12); --bad: #f04461; --bad-bg: rgba(240, 68, 97, .11); --bad-text: #d61f45;
  --shadow-s: 0 0 0 .5px rgba(20, 20, 50, .07), 0 1px 2px rgba(10, 10, 30, .04), 0 12px 28px -18px rgba(20, 20, 60, .3);
  --shadow-l: 0 30px 70px -30px rgba(20, 20, 60, .45);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Sans", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --top: env(safe-area-inset-top); --bottom: env(safe-area-inset-bottom);
  --gutter: 20px; --r-card: 20px; --r-btn: 14px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #000000; --bg-blur: rgba(0, 0, 0, .72);
  --card: #1c1c1e; --card-2: #2c2c2e;
  --label: #f5f5f7; --label-2: rgba(235, 235, 245, .6); --label-3: rgba(235, 235, 245, .32);
  --sep: rgba(255, 255, 255, .09); --fill: rgba(120, 120, 128, .22); --fill-2: rgba(120, 120, 128, .34);
  --ok: #30d158; --ok-bg: rgba(48, 209, 88, .14); --bad: #ff5a74; --bad-bg: rgba(255, 90, 116, .14); --bad-text: #ff5a74;
  --shadow-s: inset 0 .5px 0 rgba(255, 255, 255, .1), 0 0 0 .5px rgba(255, 255, 255, .05);
  --shadow-l: 0 30px 70px -30px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #000000; --bg-blur: rgba(0, 0, 0, .72);
    --card: #1c1c1e; --card-2: #2c2c2e;
    --label: #f5f5f7; --label-2: rgba(235, 235, 245, .6); --label-3: rgba(235, 235, 245, .32);
    --sep: rgba(255, 255, 255, .09); --fill: rgba(120, 120, 128, .22); --fill-2: rgba(120, 120, 128, .34);
    --ok: #30d158; --ok-bg: rgba(48, 209, 88, .14); --bad: #ff5a74; --bad-bg: rgba(255, 90, 116, .14); --bad-text: #ff5a74;
    --shadow-s: inset 0 .5px 0 rgba(255, 255, 255, .1), 0 0 0 .5px rgba(255, 255, 255, .05);
    --shadow-l: 0 30px 70px -30px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}