/* 기획안 §5 공통 디자인 원칙 — 모든 화면이 이 토큰만 쓴다. */
/* 웹폰트는 각 HTML 에서 '논블로킹'으로 불러온다 (인터넷이 없으면 시스템 한글 폰트로 즉시 폴백).
   여기서 @import 로 불러오면 인터넷이 끊긴 현장에서 첫 화면이 몇 초씩 하얗게 멈춘다. */

:root {
  --bg:        #0F1117;
  --bg-2:      #161A24;
  --bg-3:      #1E2430;
  --line:      #2A3242;
  --fg:        #F2F5FA;
  --fg-dim:    #98A2B3;

  --team-a:    #FF6B6B;   /* 코랄 */
  --team-b:    #4ECDC4;   /* 민트 */
  --accent:    #FFD93D;   /* 옐로 — 강조/득점 */
  --dead:      #4A5568;   /* 탈락 그레이 */
  --x:         #FF3B30;   /* 탈락 X자 */
  --ok:        #34D399;

  --team:      var(--accent);   /* 화면 단위로 팀 컬러가 덮어씀 */

  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-full: 999px;
  --shadow: 0 8px 32px rgba(0,0,0,.45);
  --glow: 0 0 24px color-mix(in srgb, var(--team) 60%, transparent);

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;

  --ease-pop: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, select, textarea { font-family: inherit; font-weight: 600; color: inherit; }
button { cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}