/* 공용 디자인 토큰. 참가자·관리자 화면이 같은 값을 써서 같은 행사처럼 보이게 한다.
   색 원칙(2026-10-26 사용자 선택): 밝은 남색 바탕 + 코랄 강조, 스포츠 중계판 느낌.
   순위 변동은 국내 증시 관례를 따라 오름=코랄(빨강 계열), 내림=하늘색. 둘 다 화살표와 숫자를 같이 써 색만으로 구분하지 않는다. */
:root {
  /* 원색 단계 — 화면 코드는 아래 의미 토큰만 쓰고, 이 단계값은 테마를 짤 때만 쓴다 */
  /* 2026-10-26 2차 피드백 "좀 진한 남색으로, 세련되게" — 바탕은 깊은 남색, 강조색은 코랄 하나만 쓰고 나머지는 남색 단계로 만든다 */
  --navy-950: #081029;
  --navy-900: #0D1838;
  --navy-850: #111E47;
  --navy-800: #16244F;
  --navy-700: #1E2F63;
  --navy-600: #2A3D7A;
  --navy-500: #3D55A8;
  --navy-400: #5B70B8;
  --navy-300: #93A1CC;
  --navy-200: #B9C4E6;
  --navy-100: #DFE5F7;
  --navy-50: #F1F4FC;
  --ink: #0B1440;
  --coral-700: #D9472A;
  --coral-500: #FF6A4A;
  --coral-400: #FF8A6E;
  --coral-100: #FFE6DE;
  --periwinkle: #7C93E6; /* 남이 낸 데이터(팀원 막대 등). '나'만 코랄 */
  --sky-500: #7FA6FF;
  --sky-700: #1C7FC0;
  --gold-500: #F5C451;
  --gold-700: #A86F00;

  --f-body: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* 숫자는 좁은 경기장 전광판 글꼴. 자릿수가 바뀌어도 폭이 흔들리지 않게 tabular-nums 를 같이 건다 */
  --f-num: "Barlow Condensed", "Pretendard Variable", sans-serif;

  --fs-hero: clamp(64px, 19vw, 92px);
  --fs-xl: 40px;
  --fs-l: 22px;
  --fs-m: 16px;
  --fs-s: 14px;
  --fs-xs: 12.5px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* 곡률은 위계에 따라 다르게: 큰 판(트랙·전광판) > 카드 > 입력 > 칩 */
  --r-xl: 28px;
  --r-l: 20px;
  --r-m: 12px;
  --r-s: 8px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
  --dur-fast: 140ms;
  --dur: 280ms;
  --dur-count: 900ms; /* 숫자 올라가기·트랙 채우기. 사용자 선택 '중간'(1초 안팎) */
  --dur-confetti: 1100ms;

  --tap: 44px;
  --col: 480px; /* 참가자 화면 폭. 폰 기준이고 PC 에서는 가운데 한 줄로 */
}

/* ---------- 참가자: 깊은 남색 ---------- */
.theme-field {
  --bg: var(--navy-900);
  --bg-deep: var(--navy-950);
  --surface: #142251;            /* 카드 */
  --surface-2: #1C2C5E;          /* 카드 안 강조 줄 */
  --panel: #0B1534;              /* 카드 안 오목한 곳(막대 바닥 등) */
  --fg: #F3F6FD;
  --muted: var(--navy-300);
  --line: rgb(255 255 255 / .08);
  --line-2: rgb(255 255 255 / .16);
  --accent: var(--coral-500);
  --accent-ink: var(--coral-400); /* 남색 위 코랄 글자 */
  --accent-soft: rgb(255 106 74 / .12);
  --hl: #22366F;                  /* '내 줄' 강조. 코랄을 옅게 깔면 남색과 섞여 탁한 자주색이 돼서 밝은 남색 + 코랄 세로줄로 표시한다 */
  --on-accent: var(--ink);        /* 코랄 위 흰 글자는 대비 3:1 남짓이라 진남색 글자를 쓴다 */
  --data: var(--periwinkle);
  --up: var(--coral-500);
  --down: var(--sky-500);
  --gold: var(--gold-500);
  --warn: var(--gold-500);
  --bad: var(--coral-400);
  --track-lane: rgb(255 255 255 / .05);
  --shadow: 0 16px 40px rgb(0 0 0 / .32);
  color-scheme: dark;
}
/* 이미 어두운 화면이라 기기 다크 모드에서도 그대로 둔다 */

/* ---------- 관리자: 밝은 종이 + 남색 사이드바 ---------- */
.theme-paper {
  --bg: var(--navy-50);
  --bg-deep: var(--navy-100);
  --surface: #FFFFFF;
  --surface-2: #E9EDF8;
  --panel: var(--navy-800);
  --fg: var(--navy-900);
  --muted: #4A5A85;
  --line: #D5DCEE;
  --accent: var(--coral-500);
  --accent-ink: var(--coral-700);
  --on-accent: var(--navy-900);
  --brand: var(--navy-600);
  --up: var(--coral-700);
  --down: var(--sky-700);
  --gold: var(--gold-700);
  --warn: #9A5B00;
  --warn-soft: #FFF1D6;
  --bad: var(--coral-700);
  --bad-soft: var(--coral-100);
  --ok: #1F7A4A;
  --ok-soft: #DDF3E6;
  --chart: var(--navy-500);
  --chart-soft: var(--navy-200);
  --chart-hi: var(--coral-500);
  --grid: #E3E8F4;
  --shadow: 0 1px 2px rgb(16 29 74 / .06), 0 6px 20px rgb(16 29 74 / .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  .theme-paper {
    --bg: #0E1838;
    --bg-deep: #0A1230;
    --surface: #16244F;
    --surface-2: #1D2D5E;
    --panel: #0A1230;
    --fg: #E8EDFB;
    --muted: #A3B1DA;
    --line: #2A3B70;
    --accent-ink: var(--coral-400);
    --brand: var(--navy-400);
    --up: var(--coral-400);
    --down: var(--sky-500);
    --gold: var(--gold-500);
    --warn: #F2B04A;
    --warn-soft: #3A2E14;
    --bad: var(--coral-400);
    --bad-soft: #43211C;
    --ok: #6CCF95;
    --ok-soft: #173826;
    --chart: var(--navy-400);
    --chart-soft: #2E4380;
    --chart-hi: var(--coral-500);
    --grid: #22336A;
    --shadow: 0 1px 2px rgb(0 0 0 / .3);
    color-scheme: dark;
  }
}

/* ---------- 공용 바탕 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: var(--fs-m); line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.3; letter-spacing: -0.01em; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.btn:hover { border-color: var(--muted); }
.btn:active { transform: scale(.96); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--bad); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.small { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-xs); border-radius: var(--r-s); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
input, select, textarea { min-height: 42px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); width: 100%; }
textarea { min-height: 80px; resize: vertical; }
label { display: grid; gap: var(--sp-1); font-size: var(--fs-s); color: var(--muted); }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; line-height: 1.6; }

#toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0; background: var(--navy-900); color: #fff; padding: 11px 20px; border-radius: var(--r-pill); font-size: var(--fs-s); font-weight: 600; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring); z-index: 80; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--coral-700); }

.demo-bar { font-size: var(--fs-xs); padding: 6px max(16px, env(safe-area-inset-left, 0px)); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; background: var(--gold-500); color: var(--navy-900); }
.demo-bar a { color: inherit; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }