/* 공통 디자인 토큰(다크 모드 없음) — 디자인 검수(.dryforge/design-review-1.md, 선생님 채택)의 표를 그대로 옮긴 값.
   방향: 낮의 쪽빛 바다 위에 단정한 흰 조작 패널. 플레이 화면은 밝은 중성 바탕 + 선명한 학습 도식.
   색의 역할을 섞지 않는다:
     · 팀 색(--blue/--red)은 팀 표시(팀명·소유 영역·대결 발사 단추)에만.
     · 신호 색(--hit/--line/--miss/--dud)은 발사 결과에만. 빨강은 명중·오류에 쓰지 않는다(명중은 황금).
     · UI 강조(--accent)는 일반 발사·현재 선택에만.
   명암비(흰 바탕 기준): ink 12.9 · ink-2 5.8 · accent 6.2 · blue 6.5 · red 6.0 · line 7.0 · miss 5.9 · dud 6.7 · hit-ink 6.6
   명중 바탕(--hit) 위 ink 7.6, 칸 바탕(--cell) 위 ink 11.2 — 맞히지 않은 소리도 흐리게 하지 않는다.
   명중 바탕 위 기호(--hit-ink)는 3.9(비문자 대비 3 이상). 조작 경계선(--control-line)은 흰 바탕 4.5. */
:root {
  /* 바탕·글씨 */
  --bg: #F2F6F6;           /* 플레이 화면 전체 바탕 */
  --surface: #FFFFFF;      /* 조작 패널·학습 카드 */
  --ink: #183540;          /* 음소·축 이름·주요 문구 */
  --ink-2: #536971;        /* 부가 기록·보조 메뉴 */
  --divider: #C6D3D9;      /* 패널·표의 조용한 구분선 */
  --control-line: #607A86; /* 누를 수 있는 요소의 경계 */
  /* 바다(일러스트·작은 장식에만) */
  --sea: #1B5F82;
  --foam: #D8F2F5;
  /* UI 강조(일반 발사·현재 선택) */
  --accent: #096C6A;
  --accent-2: #06524F;     /* 눌림·위에 올림 */
  --accent-soft: #E4F3EF;  /* 선택 카드의 옅은 바탕 */
  /* 판 */
  --cell: #E8F0F4;         /* 미탐색 지도 칸(소리는 기본 잉크) */
  --cell-off: #F4F6F7;     /* 단계에서 뺀 칸(잠금 표시와 함께) */
  /* 신호 */
  --hit: #F6BE48;          /* 명중: 황금 채움 + 과녁 */
  --hit-ink: #8B4E00;      /* 명중 바탕 위 기호·작은 글씨 */
  --line: #6746A5;         /* 같은 줄: 보라 윤곽 + 방향 기호 */
  --line-soft: #F0ECFA;
  --miss: #526774;         /* 빗나감: × */
  --miss-soft: #E9EEF1;
  --dud: #625B53;          /* 없는 소리: ∅ */
  --dud-soft: #F0EEEB;
  /* 팀 */
  --blue: #245CB3;
  --blue-soft: #EAF0FA;
  --red: #B5323A;
  --red-soft: #F9ECED;
  /* 공기 입자 */
  --air: #147D92;
  /* 간격(4·8·12·16·24·32·48)과 반경·그림자 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-cell: 8px;           /* 지도 칸 */
  --r-btn: 12px;           /* 단추·카드 */
  --r-panel: 16px;         /* 패널 */
  --radius: var(--r-btn);
  --shadow-float: 0 8px 24px rgba(24, 53, 64, .12); /* 떠 있는 패널에만 쓰는 그림자 한 종류 */
  --touch: 64px;           /* 터치 목표(가로) */
  /* 움직임 */
  --t-pick: 120ms;         /* 선택 반응(100–140ms) */
  --t-result: 180ms;       /* 결과 강조(150–200ms) */
  /* 글꼴(css/fonts.css가 부분 글꼴 이름을 앞에 더한다) */
  --font-title: 'Noto Serif KR', serif;                                   /* 로고·대제목(Hahmlet) */
  --font-body: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;  /* 그 밖의 모든 UI(Pretendard) */
  --font-sound: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; /* 판 위 소리 표기(Pretendard 700) */

  /* 옛 이름(다른 파일이 아직 쓰면 같은 역할의 새 값으로) */
  --paper: var(--bg);
  --paper-2: var(--surface);
  --ink-3: var(--ink-2);
  --ui: var(--accent);
  --ui-2: var(--accent-2);
  --ui-3: var(--accent-soft);
  --sea-2: var(--cell);
}
@media (max-width: 760px), (orientation: portrait) {
  :root { --touch: 48px; } /* 휴대폰 세로 배치 */
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
#app { min-height: 100%; }
/* 누를 수 있는 것의 초점 표시(키보드) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}