/* WeeklyPick — Floodlit Scoreboard 토큰 (docs/design-guide.md v1)
   다크 = 기본(:root), 라이트 = html.light 오버라이드. 상세: docs/03-design.md
   ⚠️ 색 = RGB 트리플릿 (Tailwind <alpha-value> 대응). 주석에 원 hex 병기. */
:root {
  --bg:11 14 19;        /* #0B0E13 */
  --surface:20 26 35;   /* #141A23 */
  --surface-2:27 34 45; /* #1B222D */
  --line:38 47 60;      /* #262F3C */
  --line-soft:30 38 50; /* #1E2632 */
  --text:238 242 247;   /* #EEF2F7 */
  --muted:139 150 168;  /* #8B96A8 */
  --faint:92 101 112;   /* #5C6570 */
  --accent:246 179 60;  /* #F6B33C */
  --accent-text:246 179 60;
  --accent-ink:11 14 19;
  --info:79 195 232;    /* #4FC3E8 */
  --win:52 199 123;     /* #34C77B */
  --draw:154 166 184;   /* #9AA6B8 */
  --loss:240 90 84;     /* #F05A54 */
  /* 로또 볼 (MVP2 대비 정의만) */
  --ball-1-10:251 196 0; --ball-11-20:105 200 242; --ball-21-30:255 114 114;
  --ball-31-40:170 170 170; --ball-41-45:176 216 64;
  --font-display:"Barlow Condensed","Pretendard Variable",Pretendard,sans-serif;
  --font-body:"Pretendard Variable",Pretendard,-apple-system,system-ui,
              "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --radius:14px; --radius-sm:9px; --radius-pill:999px;
  --maxw:1080px;
}
html.light {
  --bg:245 247 250;     /* #F5F7FA */
  --surface:255 255 255;
  --surface-2:237 241 246; /* #EDF1F6 */
  --line:217 223 232;   /* #D9DFE8 */
  --line-soft:228 233 240; /* #E4E9F0 */
  --text:23 28 36;      /* #171C24 */
  --muted:90 102 120;   /* #5A6678 */
  --faint:152 162 176;  /* #98A2B0 */
  --accent-text:154 106 0; /* #9A6A00 */
  --info:23 121 168;    /* #1779A8 */
  --win:30 158 92;      /* #1E9E5C */
  --draw:107 119 137;   /* #6B7789 */
  --loss:213 66 60;     /* #D5423C */
}

html, body {
  background-color: rgb(var(--bg));
  color: rgb(var(--text));
  font-family: var(--font-body);
  font-size: 16px;             /* 14px 함정 청산 — 1rem=16px 복원 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 모바일 하단 탭바 가림 여유 (특이도 (0,1,1) — main 요소 선택자 금지) */
@media (max-width: 767px) {
  main[role="main"] { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* eyebrow 라벨 — mono uppercase */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--muted));
}

/* 시그니처: 승·무·패 확률 바 */
.prob-bar { display:flex; height:34px; border-radius:8px; overflow:hidden; }
.prob-seg {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:12px;
  color:rgb(var(--accent-ink)); min-width:0; overflow:hidden; white-space:nowrap;
  transition: flex-basis .9s cubic-bezier(.2,.8,.2,1);
}
.prob-seg--h { background:rgb(var(--win)); }
.prob-seg--d { background:rgb(var(--draw)); }
.prob-seg--a { background:rgb(var(--loss)); }

/* 스코어 LED 글로우 */
.score-glow {
  font-family:var(--font-display); font-weight:800;
  color:rgb(var(--accent));
  text-shadow:0 0 18px rgb(var(--accent) / .35);
}
html.light .score-glow { color:rgb(var(--accent-text)); text-shadow:none; }

/* 히어로 다음 킥오프 — mono LED 글로우 (다크: 앰버+glow / 라이트: 대비 확보 앰버 텍스트) */
.kickoff-glow {
  font-family:var(--font-mono); font-weight:700;
  color:rgb(var(--accent));
  text-shadow:0 0 24px rgb(var(--accent) / .30);
}
html.light .kickoff-glow { color:rgb(var(--accent-text)); text-shadow:none; }

/* LIVE 도트 펄스 */
.live-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:rgb(var(--loss)); animation:live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* 페이지 전환 로딩 바 — 앰버 */
#nav-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  pointer-events:none; opacity:0; transition:opacity 120ms ease;
}
.nav-progress__bar {
  display:block; height:100%; width:0;
  background:rgb(var(--accent));
  box-shadow:0 0 8px rgb(var(--accent) / .6);
  border-radius:0 2px 2px 0;
}
html.is-navigating #nav-progress { opacity:1; }
html.is-navigating .nav-progress__bar {
  animation:nav-progress-trickle 12s cubic-bezier(0.1,0.6,0.2,1) forwards;
}
html.is-navigating { cursor:progress; }
@keyframes nav-progress-trickle {
  0%{width:0} 12%{width:38%} 35%{width:62%} 60%{width:78%} 85%{width:90%} 100%{width:95%}
}

/* 테마 토글 해/달 아이콘 — html.light 기준 분기 (darkMode:'class' 제거로 dark: variant 대체) */
.theme-icon-sun { display:none; }
html.light .theme-icon-sun { display:block; }
.theme-icon-moon { display:block; }
html.light .theme-icon-moon { display:none; }

:focus-visible { outline:2px solid rgb(var(--accent)); outline-offset:3px; }

a { color:rgb(var(--accent-text)); text-decoration:none; }
a:hover { text-decoration:underline; }

/* 토너먼트 브래킷 연결선 */
.bracket-card { position:relative; }
.bracket-col:not(:first-of-type) .bracket-card::before {
  content:""; position:absolute; left:-0.75rem; top:50%;
  width:0.75rem; height:1px; background:rgb(var(--line));
}
.bracket-col:not(:last-of-type) .bracket-card::after {
  content:""; position:absolute; right:-0.75rem; top:50%;
  width:0.75rem; height:1px; background:rgb(var(--line));
}

/* 모션 최소화 — 가이드 7절 */
@media (prefers-reduced-motion: reduce) {
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  html.is-navigating .nav-progress__bar { width:30%; }
}