/* GO기릿 시즌 1의 기록 — /1st/
   브랜드 v4(밝은 지면 + 로고 골드). 값은 assets/css/app.css 의 :root 와 같게 유지한다.
   ⚠️ 이 화면은 본체 SPA 밖의 정적 페이지라 app.css 를 안 받는다. 토큰을 여기서 다시 선언한다.
      본체 토큰을 고치면 **여기도 같이** 고쳐야 한다. 안 그러면 두 화면 색이 갈라진다.
   ⚠️ 밝은 바탕에서 골드는 글자가 못 된다(#FEC202 on #FAF7F0 = 1.7:1).
      글자로 쓸 땐 --gold-ink(5.0:1), 면으로 쓸 땐 그 위에 --ink 를 얹는다(12.3:1). */

@font-face{font-family:Pretendard;font-weight:400;font-style:normal;font-display:swap;
  src:url(../assets/fonts/Pretendard-Regular.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:500;font-style:normal;font-display:swap;
  src:url(../assets/fonts/Pretendard-Medium.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:600;font-style:normal;font-display:swap;
  src:url(../assets/fonts/Pretendard-SemiBold.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:800;font-style:normal;font-display:swap;
  src:url(../assets/fonts/Pretendard-ExtraBold.woff2) format('woff2')}

:root{
  /* 브랜드 v4 (2026-09-06) — 본체와 함께 밝은 지면으로 전환.
     ⚠️ 밝은 바탕에서 골드는 글자가 못 된다(1.7:1). 글자는 --gold-ink, 면일 때만 --gold + --ink. */
  color-scheme:light;
  --gold:#FEC202; --gold-hi:#FDE114; --gold-lo:#F0A401; --gold-ink:#8A6400;
  --gold-glow:rgba(240,164,1,.30); --ink:#14120C; --danger:#C0392B; --ok:#1F7A3D;
  --bg:#FAF7F0; --bg-2:#F2EEE4;
  --glass:#FFFFFF; --glass-hi:#F7F2E7;
  --line:#E4DED0; --line-soft:#EFEAE0;
  --inset:0 1px 2px rgba(20,18,12,.05), 0 2px 8px rgba(20,18,12,.045);
  --lift:0 2px 4px rgba(20,18,12,.06), 0 14px 30px -10px rgba(20,18,12,.13);
  --text:#14120C; --text-2:#4A463C; --muted:#6E6A5E;
  --char:#16150F; --char-text:#F3F0E6;
  --r:16px; --r-sm:10px; --maxw:1180px; --pad:20px;
  --hud:52px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth}
body{margin:0; overflow-x:clip; font-size:17px; line-height:1.7;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--text); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 50% at 50% -6%, #FFF7E0 0%, rgba(255,247,224,0) 62%),
    radial-gradient(64% 34% at 106% 20%, rgba(254,194,2,.10) 0%, rgba(254,194,2,0) 60%),
    radial-gradient(56% 32% at -8% 74%, rgba(240,164,1,.07) 0%, rgba(240,164,1,0) 58%),
    var(--bg);
  background-attachment:fixed}
img{max-width:100%; display:block}
a{color:var(--gold-ink); text-decoration:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
.mono{font-variant-numeric:tabular-nums}

/* ── 상단 바 ── */
.hud{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  height:calc(var(--hud) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--pad) 0;
  background:rgba(250,247,240,.88); border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.hud .back{display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  margin-left:-8px; border-radius:11px; color:var(--muted)}
.hud .back:hover{color:var(--text); background:var(--glass-hi)}
.hud .back svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.hud .wm{height:22px; width:auto}
.hud-t{font-size:14px; font-weight:600; color:var(--muted); letter-spacing:-.01em}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)
  calc(48px + env(safe-area-inset-bottom))}

/* ── 히어로 ── */
.hero{padding:48px 0 12px; text-align:center}
.eyebrow{margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.24em; color:var(--gold-ink)}
.hero h1{margin:0; font-size:clamp(30px,7.4vw,46px); font-weight:800; letter-spacing:-.035em;
  line-height:1.14; text-wrap:balance}
.hero .lede{margin:16px auto 0; max-width:34em; font-size:16.5px; color:var(--text-2);
  word-break:keep-all; text-wrap:pretty}
.hero .range{margin:18px 0 0; display:inline-block; padding:7px 16px; border-radius:999px;
  font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
  background:#FFF8E2; border:1px solid rgba(240,164,1,.40); color:var(--gold-ink);
  box-shadow:var(--inset), 0 0 44px -16px var(--gold-glow)}

/* ── 섹션 ── */
.sect{padding:44px 0 0}
.sect h2{display:flex; align-items:baseline; gap:12px; margin:0 0 6px;
  font-size:clamp(21px,4.4vw,26px); font-weight:800; letter-spacing:-.025em}
.sect h2::before{content:""; flex:0 0 auto; width:18px; height:5px; background:var(--gold);
  transform:skewX(-20deg); position:relative; top:-5px; border-radius:1px}
.lede2{margin:0 0 18px; color:var(--text-2); font-size:15.5px; max-width:60em;
  word-break:keep-all; text-wrap:pretty}
.note{margin:12px 0 0; font-size:13.5px; line-height:1.65; color:var(--muted);
  word-break:keep-all; text-wrap:pretty}
.note b{color:var(--text-2); font-weight:600}
.note a{text-decoration:underline; text-underline-offset:2px}

/* ── 총계 타일 ── */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; margin-top:16px}
.tile{padding:15px 16px; border-radius:var(--r); background:var(--glass);
  border:1px solid var(--line); box-shadow:var(--inset)}
.tile .tl{display:block; font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--muted)}
.tile b{display:block; margin:5px 0 2px; font-size:25px; font-weight:800; letter-spacing:-.03em;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.15}
.tile .ts{display:block; font-size:12.5px; color:var(--muted)}

/* ── 회차 카드 ── */
.eps{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; margin-top:16px}
.ep{border-radius:var(--r); overflow:hidden; background:var(--glass);
  border:1px solid var(--line); box-shadow:var(--inset)}
.ep-th{position:relative; display:block; background:#16150F}
.ep-th img{width:100%; height:auto; opacity:1; transition:opacity .18s}
.ep-th:hover img{opacity:1}
.ep-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.ep-play svg{width:52px; height:52px; padding:13px; border-radius:50%;
  background:rgba(20,18,12,.62); fill:var(--gold); stroke:none;
  border:1px solid rgba(254,194,2,.45)}
.ep-b{padding:15px 16px 17px}
.ep-no{margin:0; font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--gold-ink)}
.ep-b h3{margin:4px 0 2px; font-size:20px; font-weight:800; letter-spacing:-.025em}
.ep-t{margin:0 0 12px; font-size:13.5px; color:var(--muted); word-break:keep-all}
.ep-sc{margin:11px 0 0; padding-top:10px; border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--muted)}

.kv{display:grid; grid-template-columns:1fr 1fr; gap:7px 14px; margin:0}
.kv div{display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  border-bottom:1px solid var(--line-soft); padding-bottom:5px}
.kv dt{margin:0; font-size:12.5px; color:var(--muted)}
.kv dd{margin:0; font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums}

/* ── 표 ── */
.tw{overflow-x:auto; margin:16px 0 0; border-radius:var(--r);
  background:var(--glass); border:1px solid var(--line); box-shadow:var(--inset);
  -webkit-overflow-scrolling:touch}
table{width:100%; min-width:0; border-collapse:collapse; font-size:15px}
caption{caption-side:top; text-align:left; padding:14px 16px 4px; font-size:15px;
  color:var(--text-2); font-weight:500}
caption b{color:var(--gold-ink); font-weight:800; margin-right:6px}
th,td{text-align:left; padding:10px 16px; border-top:1px solid var(--line-soft); vertical-align:middle}
thead th{border-top:0; border-bottom:1px solid var(--line);
  font-size:11.5px; font-weight:700; letter-spacing:.09em; color:var(--muted); white-space:nowrap}
thead th span{display:block; font-size:10.5px; font-weight:500; letter-spacing:.04em; opacity:.7}
tbody tr:first-child td, tbody tr:first-child th{border-top:0}
.c1{white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700; color:var(--text-2); width:1%}
.c3{width:1%; white-space:nowrap; text-align:right}
.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600}
/* 상위 3자리 — 골드 레일 */
tr.top .c1{color:var(--gold-ink)}
tr.top td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
tr.sum td{border-top:1px solid var(--line); font-weight:800; color:var(--gold-ink)}
.alias{display:block; font-size:12px; color:var(--muted); font-weight:400}
.gt{display:inline-block; margin-left:7px; padding:1px 8px; border-radius:999px;
  font-size:11.5px; font-weight:600; color:var(--muted); border:1px solid var(--line); background:var(--bg-2)}
.pill{display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.02em}
.pill.win{background:var(--gold); color:var(--ink)}
.pill.lose{background:#FCEAE7; color:var(--danger);
  border:1px solid rgba(192,57,43,.32)}
.pill.sm{padding:0 7px; font-size:11px; margin-left:5px}

/* ── 종합 매트릭스 ── */
.mx{min-width:620px}
.mx th[scope=row]{font-weight:700; white-space:nowrap; color:var(--text)}
.mx td{font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap}
.mx td.empty{color:var(--muted)}   /* 3.52:1 이었다 — 흐리게 두되 WCAG AA 는 지킨다 (2026-09-06) */
.mx td.n{color:var(--muted); font-size:13px}

/* ── 시그 카드 ── */
.sigwrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:14px; margin-top:16px}
.sigcard{padding:16px 18px 18px; border-radius:var(--r); background:var(--glass);
  border:1px solid var(--line); box-shadow:var(--inset)}
.sigcard h3{margin:0 0 10px; font-size:16px; font-weight:800; color:var(--gold-ink); letter-spacing:-.01em}
.sigcard ul{margin:0; padding:0; list-style:none}
.sigcard li{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 0; border-top:1px solid var(--line-soft); font-size:15px}
.sigcard li:first-child{border-top:0}
.sigcard li span{word-break:keep-all}
.sigcard li b{white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700; color:var(--text-2)}

/* ── 후원 규모 절 — 나중에 통째로 지울 수 있게 시각적으로도 구획한다 ── */
.sect.money .tw{border-color:rgba(240,164,1,.34)}

/* ── 타임라인 ── */
.tl{list-style:none; margin:18px 0 0; padding:0; counter-reset:tl}
.tl li{position:relative; padding:0 0 20px 26px}
.tl li::before{content:""; position:absolute; left:4px; top:9px; width:9px; height:9px;
  border-radius:50%; background:var(--gold-lo); box-shadow:0 0 0 3px rgba(240,164,1,.20)}
.tl li:not(:last-child)::after{content:""; position:absolute; left:8px; top:22px; bottom:0;
  width:1px; background:var(--line)}
.tl-d{display:block; font-size:12.5px; font-weight:600; letter-spacing:.05em; color:var(--gold-ink);
  font-variant-numeric:tabular-nums}
.tl b{display:block; margin:1px 0 3px; font-size:16.5px; font-weight:700; letter-spacing:-.015em}
.tl-m{display:block; font-size:14.5px; color:var(--text-2); word-break:keep-all; text-wrap:pretty}

/* ── 출처 ── */
.src{margin:14px 0 0; padding:0 0 0 18px}
.src li{margin-bottom:8px; font-size:15px; color:var(--text-2); word-break:keep-all}
.src li b{color:var(--text); font-weight:700}
.src .mono{font-size:14px; color:var(--gold-ink)}

.backhome{margin:44px 0 0; text-align:center}
.backhome a{display:inline-flex; align-items:center; min-height:48px; padding:0 26px;
  border-radius:14px; font-size:16px; font-weight:800; color:var(--ink);
  background:linear-gradient(177deg,#FDE114,#FEC202 46%,#F0A401);
  box-shadow:var(--inset), 0 8px 28px -12px rgba(254,194,2,.55)}

@media (max-width:560px){
  body{font-size:16px}
  .hero{padding:34px 0 8px}
  .sect{padding-top:36px}
  .kv{grid-template-columns:1fr}
  th,td{padding:9px 13px}
  caption{padding:12px 13px 4px; font-size:14.5px}
  .tile b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }