:root{--bg:#0a0e17;--board:#111726;--card:#182135;--line:#243049;
 --ink:#f1f4fa;--dim:#7d8ca8;--acc:#2b5fd9;--hot:#ff4d4f;
 --font:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif}
/* ── 좌측 슬라이드 메뉴 ──────────────────────────────────────────────────
   전부 position:fixed 입니다. 보드 위에 얹혀도 보드의 흐름을 한 픽셀도
   건드리지 않아야 하기 때문입니다(닫혀 있을 때 보드는 예전과 완전히 같습니다).
   닫힌 서랍은 visibility:hidden 이라 탭 순서에서도 빠집니다. */
:root{--navw:264px}
.navtog{position:fixed;top:12px;left:12px;z-index:210;width:40px;height:36px;
 display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 9px;
 background:var(--card);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.navtog span{display:block;height:2px;background:var(--dim);border-radius:2px;
 transition:background .15s}
.navtog:hover span{background:var(--ink)}
.navtog:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.navov{position:fixed;inset:0;z-index:190;background:rgba(4,7,14,.62);
 opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s}
.navov.on{opacity:1;visibility:visible}
.sidenav{position:fixed;top:0;bottom:0;left:0;z-index:200;width:264px;max-width:82vw;
 background:var(--board);border-right:1px solid var(--line);
 transform:translateX(-100%);visibility:hidden;
 transition:transform .18s ease,visibility .18s;
 display:flex;flex-direction:column;padding:52px 0 22px;overflow-y:auto}
.sidenav.on{transform:none;visibility:visible}
.sidenav a{display:block;padding:11px 22px;color:var(--dim);text-decoration:none;
 font-size:15px;font-weight:600;letter-spacing:-.01em;border-left:3px solid transparent}
.sidenav a:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.sidenav a[aria-current="page"]{color:var(--ink);border-left-color:var(--acc);
 background:rgba(43,95,217,.10)}
.sidenav a:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media(max-width:640px){
  .sidenav{width:min(300px,86vw)}
  .navtog{top:8px;left:8px}
}
/* ── 넓은 화면: 서랍이 아니라 그냥 붙박이 왼쪽 칸 ────────────────────────
   960px 을 경계로 잡았습니다. 1024 폭 태블릿 가로에서도 264px 을 떼고 나면
   본문이 760px 남아 표가 읽히고, 그보다 좁으면 본문이 너무 눌려 서랍이
   낫습니다. 이 위에서는 햄버거도 오버레이도 없고 열고 닫을 것도 없습니다. */
/* 보드는 1920px 고정 캔버스라 창보다 넓어질 때가 있습니다. 그때 align-items
   가 center 면 넘치는 절반이 왼쪽으로 밀려 나가 화면 밖(또는 붙박이 메뉴 밑)
   으로 사라지고, 왼쪽으로는 스크롤이 안 되므로 영영 못 봅니다. safe 를 붙이면
   넘칠 때만 start 로 떨어져서 넘친 만큼이 전부 오른쪽으로 가고 스크롤로 닿을
   수 있게 됩니다. 넘치지 않을 때는 지금처럼 가운데 정렬 그대로입니다.
   (safe 를 모르는 브라우저는 이 줄을 통째로 무시하고 예전 동작을 씁니다.) */
body{align-items:safe center}
@media(min-width:960px){
  .navtog,.navov{display:none}
  .sidenav{transform:none;visibility:visible;transition:none;
   width:var(--navw);max-width:none;padding-top:26px}
  /* 본문을 옆으로 밀어냅니다. margin 이라 body 가 원래 갖고 있던 padding 값을
     몰라도 되고(보드는 24px, 하위 페이지는 0), 본문 폭이 그만큼 줄어듭니다. */
  body{margin-left:var(--navw)}
}
@media(prefers-reduced-motion:reduce){
  .navov,.sidenav{transition:none}
}

/* ── 하위 페이지 ─────────────────────────────────────────────────────────
   보드와 달리 1920 고정 캔버스가 아니라 그냥 흐르는 문서입니다. 보드의 3MB
   페이로드는 여기 들어오지 않습니다 — 팀 순위(team_season_ranks.js)와 선수
   스탯(player_season_stats.js)만 필요한 페이지에서 따로 부릅니다. */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);
 line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:64px 20px 72px}
.phd{border-bottom:2px solid var(--acc);padding-bottom:16px;margin-bottom:26px;
 display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.phd h1{font-size:27px;font-weight:800;letter-spacing:-.02em}
.phd .sub{font-size:14px;color:var(--dim);font-weight:600;letter-spacing:.04em}
.pick{display:flex;gap:8px;align-items:center;margin:0 0 22px;flex-wrap:wrap}
.pick label{font-size:13px;color:var(--dim);font-weight:700;letter-spacing:.06em}
.pick select{background:var(--card);color:var(--ink);border:1px solid var(--line);
 border-radius:6px;padding:8px 12px;font:inherit;font-size:14px;font-weight:600;
 cursor:pointer}
.pick select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.note{color:var(--dim);font-size:15px;line-height:1.75}
.early{margin:0 0 14px;padding:10px 14px;border:1px solid #6b5a1e;border-radius:8px;
 background:rgba(255,196,0,.08);color:#f3d27a;font-size:14px;line-height:1.65}
.early b{color:#ffd866}
/* 부문 탭 — 좁은 화면에서는 줄바꿈 대신 가로로 밀어 봅니다. 줄바꿈을 쓰면
   탭 줄이 세 줄까지 늘어나 표가 화면 밖으로 밀립니다. */
.tabs{display:flex;gap:6px;margin:0 0 18px;overflow-x:auto;padding-bottom:4px;
 scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tabs button{flex:none;background:var(--card);color:var(--dim);
 border:1px solid var(--line);border-radius:7px;padding:7px 15px;
 font:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.01em;
 cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--acc);color:#fff;
 border-color:var(--acc)}
.tabs button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pending{background:var(--board);border:1px solid var(--line);border-radius:10px;
 padding:38px 26px;text-align:center;color:var(--dim);font-size:16px;font-weight:600}
h2.sec{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:34px 0 12px}
h2.sec:first-of-type{margin-top:6px}
.tw{overflow-x:auto;background:var(--board);border:1px solid var(--line);
 border-radius:10px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:10px 12px;text-align:right;white-space:nowrap;font-size:14.5px;
 border-bottom:1px solid var(--line)}
thead th{position:sticky;top:0;background:var(--board);color:var(--dim);
 font-size:12.5px;font-weight:700;letter-spacing:.04em;cursor:pointer;
 user-select:none;z-index:1}
thead th:hover{color:var(--ink)}
thead th[aria-sort]{color:var(--ink)}
thead th .ar{margin-left:4px;font-size:10px;opacity:.8}
th.tm,td.tm{text-align:left;font-weight:700}
td.tm{color:var(--ink)}
tbody tr:hover{background:rgba(255,255,255,.025)}
tbody tr:last-child td{border-bottom:0}
td .rk{color:var(--dim);font-size:12.5px;font-weight:600;margin-left:6px}
/* 스플릿 막대 — 지금 보는 표에 걸리는 조건입니다. 묶음마다 이름을 앞에 답니다. */
.splits{display:flex;flex-wrap:wrap;gap:10px 14px;padding:10px 0 4px;
 border-bottom:1px solid var(--line);margin-bottom:12px}
.splits .sgrp{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.splits .sgrp>i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;
 color:#4a5878;margin-right:2px}
.splits button{background:var(--card);color:var(--dim);border:1px solid var(--line);
 border-radius:5px;padding:3px 9px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.splits button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.splits button:hover:not([disabled]){color:var(--ink)}
.splits button[disabled]{opacity:.38;cursor:not-allowed}
.splits .sgrp>i{user-select:none}
.splits .snote{font-size:11.5px;color:#4a5878;font-weight:600}
.splits .wtil{color:#4a5878;font-weight:700;padding:0 2px}
.splits select{background:var(--card);color:var(--ink);border:1px solid var(--line);
 border-radius:5px;padding:3px 8px;font:inherit;font-size:12px;font-weight:700}
/* 표본이 얇아 순위를 안 단 칸 — 값은 그대로 두고 흐리게만 합니다. */
td.thin{opacity:.5}
/* 지금 고른 조건에서는 성립하지 않는 칸. 마우스를 올리면 왜 못 내는지 나옵니다.
   색만으로 알리지 않습니다 — 열 제목에 점선 밑줄을 같이 답니다. */
td.na{color:#4a5878;cursor:help}
th.nah{color:#4a5878;text-decoration:underline dotted;text-underline-offset:3px;
 cursor:help}
th.rn,td.rn{font-size:11.5px;color:#4a5878;font-variant-numeric:tabular-nums;
 white-space:nowrap}
/* 표 밑 라이선스 줄 */
.lic{margin:10px 2px 0;font-size:11.5px;line-height:1.7;color:#4a5878}
.lic b{color:#8fa0bd;font-weight:700}
.credit{margin:34px 0 0;padding-top:14px;border-top:1px solid var(--line);
 font-size:11.5px;color:#4a5878;line-height:1.7}
.credit a{color:#7ea8ff}
td .rk.hot{color:var(--hot)}
/* ── 유튜브 임베드 ───────────────────────────────────────────────────────
   본문의 {{youtube:...}} 토큰이 여기로 바뀝니다(리뷰·뉴스 공통). 사이트에서
   허용하는 유일한 외부 임베드이고, 재생 전에는 쿠키를 심지 않는
   youtube-nocookie.com 을 씁니다. */
.yt{position:relative;aspect-ratio:16/9;margin:0 0 1em;border-radius:8px;
 overflow:hidden;background:#000;border:1px solid var(--line)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* 반복 클립 — 글 속에서 한 장면을 보여 주는 삽화라 전체 임베드보다 작습니다. */
.yt.yt-loop{width:min(85%,420px)}
.yt-poster{position:absolute;inset:0;display:block;background:#000}
.yt-poster img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82}
.yt-play{position:absolute;left:50%;top:50%;width:56px;height:40px;margin:-20px 0 0 -28px;
 border-radius:10px;background:rgba(0,0,0,.72)}
.yt-play::after{content:"";position:absolute;left:22px;top:12px;border-left:15px solid #fff;
 border-top:8px solid transparent;border-bottom:8px solid transparent}
.yt-poster:hover .yt-play,.yt-poster:focus-visible .yt-play{background:#cc1f1a}
.yterr{display:inline-block;background:rgba(255,77,79,.10);color:var(--hot);
 border:1px solid rgba(255,77,79,.35);border-radius:6px;padding:2px 8px;
 font-size:13px;font-weight:600}
.yterr code{background:transparent;color:inherit;padding:0}
/* ── 본문 속 표 ──────────────────────────────────────────────────────── */
.mdtw{overflow-x:auto;max-width:100%;margin:0 0 1em;background:var(--board);
 border:1px solid var(--line);border-radius:8px;-webkit-overflow-scrolling:touch}
/* 크기는 둘레 글에 붙여 정합니다(.95em) — 재 보면 사이트 리뷰 칸에서 14.6px 이고,
   옆에 선 박스스코어 값(15.1px)·팀 스탯 표(14.5px)와 같은 덩치입니다. 편집 화면
   미리보기와 검토 파일은 "사이트에 나가는 모양"을 보여 주는 자리라 같은 비율을
   씁니다(그쪽 박스스코어 칸은 12.5px 짜리 도구 화면이라 기준으로 삼지 않습니다).
   em 은 겹쳐 곱해지므로 크기는 표에 한 번만 겁니다. 앞줄의 px 은 max() 를 모르는
   옛 브라우저용 예비값입니다. */
.mdt{width:100%;margin:0;border-collapse:collapse;line-height:1.5;
 font-variant-numeric:tabular-nums;font-size:14px;font-size:max(12px,.95em)}
.mdt th,.mdt td{padding:7px 12px;text-align:left;white-space:nowrap;
 font-size:inherit;border-bottom:1px solid rgba(36,48,73,.5)}
.mdt thead th{position:static;top:auto;z-index:auto;cursor:default;user-select:auto;
 background:none;font-size:.88em;font-weight:800;letter-spacing:.04em;
 color:var(--dim);border-bottom:1px solid var(--line)}
.mdt tbody tr:nth-child(even){background:rgba(255,255,255,.028)}
.mdt tbody tr:last-child td{border-bottom:0}
.mdt td{color:#c3cddf;font-weight:600}
.mdt td:first-child{color:var(--ink);font-weight:700}
.mdt .l{text-align:left}
.mdt .c{text-align:center}
.mdt .r{text-align:right}
.mdt a{color:#7ea8ff}
.mdt strong{color:var(--ink);font-weight:800}
.mderr{display:inline-block;background:rgba(255,77,79,.10);color:var(--hot);
 border:1px solid rgba(255,77,79,.35);border-radius:6px;padding:2px 8px;
 font-size:13px;font-weight:600}
.mderr code{background:transparent;color:inherit;padding:0;white-space:pre-wrap}
@media(max-width:640px){
  .mdt th,.mdt td{padding:6px 9px}
}
td.pos{color:var(--dim);font-weight:600}
.cnt{color:var(--dim);font-size:13px;font-weight:600;margin-left:auto}
/* 선수 스탯 — 시즌 선택 옆에 부문 탭을 붙입니다. 좁아지면 탭이 아래로
   내려가고, 탭 줄 자체는 예전처럼 가로로 밀립니다. */
.pickrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 22px}
.pickrow .pick,.pickrow .tabs{margin:0}
.pickrow .tabs{flex:1 1 auto;min-width:0;padding-bottom:0}
/* 그 시즌 원본에 자료가 없는 칸의 머리글 — 눌러도 정렬할 게 없다는 표시. */
thead th.off{color:#4c5a74}
thead th.off:hover{color:var(--dim)}
/* 자료 출처 각주. 주차별 자료의 패싱야드 각주와 같은 결입니다. */
.note.dfn{font-size:13.5px;margin-top:12px;padding-left:12px;
 border-left:2px solid var(--line)}
@media(max-width:640px){
  .wrap{padding:56px 12px 56px}
  .phd h1{font-size:21px}
  .tabs{gap:5px;margin-bottom:14px}
  .tabs button{padding:6px 11px;font-size:12.5px}
  th,td{padding:8px 8px;font-size:13px}
  thead th{font-size:11.5px}
  td .rk{font-size:11px;margin-left:4px}
}

/* 디비전 자리 — 나뉜 자리는 숫자 위에 작은 '공동' 을 답니다. */
td.rn s{display:block;text-decoration:none;font-size:.62em;font-weight:700;
 letter-spacing:.04em;color:#4a5878;line-height:1}
/* ── 26시즌 팀 순위 ───────────────────────────────────────────────────────
   디비전 카드 여덟 장(1999–2001 은 여섯 장)을 두 줄로 세웁니다. 카드 안은
   하위 페이지 공용 표 스타일 그대로이고, 카드가 테두리를 그리므로 안쪽 .tw
   에서는 테두리를 뺍니다. 좁은 화면에서는 한 줄로 내려오고, 표 자체는 공용
   .tw 의 가로 스크롤에 맡깁니다 — 팀 이름을 줄이면 어느 팀인지 알아보기가
   어려워집니다. */
/* 디비전 표는 팀 이름을 다 적으면 620px 쯤 됩니다. 1180px 본문에 두 장을
   넣으면 카드마다 가로 스크롤이 생겨서, 이 페이지만 본문을 1520px 까지 쓰고
   두 장이 안 들어가는 폭에서는 한 장씩 세로로 내립니다. auto-fit 이라 폭이
   정하지 화면 크기를 따로 재지 않습니다. */
.wrap.mid{max-width:1520px}
.divgrid{display:grid;gap:16px;
 grid-template-columns:repeat(auto-fit,minmax(620px,1fr))}
.divbox{background:var(--board);border:1px solid var(--line);border-radius:10px;
 overflow:hidden}
.divbox h3{font-size:14px;font-weight:800;letter-spacing:.01em;padding:11px 14px;
 border-bottom:1px solid var(--line)}
.divbox .tw{border:0;border-radius:0;background:transparent}
.divbox th,.divbox td{padding:8px 10px;font-size:13.5px}
.divbox thead th{cursor:default}
.divbox thead th:hover{color:var(--dim)}
th.rn,td.rn{width:1%;text-align:right;color:var(--dim);font-size:12.5px;
 font-weight:700;padding-right:2px}
td.dif{font-weight:700}
#note{max-width:78ch}
/* 620px 짜리 최소 폭은 화면이 그보다 좁으면 그대로 넘칩니다 — 좁은 쪽에서는
   최소 폭을 풀어 칸이 화면에 맞게 줄고, 표는 .tw 의 가로 스크롤에 맡깁니다. */
@media(max-width:700px){.divgrid{grid-template-columns:1fr}}
@media(max-width:640px){
  .divbox h3{font-size:13px;padding:9px 12px}
  .divbox th,.divbox td{padding:7px 7px;font-size:12.5px}
}

/* ── 주요 뉴스 ───────────────────────────────────────────────────────────
   한 항목이 카드 하나입니다. 맨 아래 출처 줄(.nwcr)은 장식이 아니라 조건이라
   본문과 같은 템플릿에서 같이 나옵니다 — 이 줄 없이 나가는 항목은 없습니다. */
.nw{background:var(--board);border:1px solid var(--line);border-radius:10px;
 padding:20px 22px;margin:0 0 16px}
.nwt{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.45}
.nwm{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:6px 0 14px;
 font-size:12.5px;color:var(--dim);font-weight:600}
.nwm time{font-variant-numeric:tabular-nums}
.nwlink{color:#7aa2f7;text-decoration:none;font-weight:700}
.nwlink:hover{text-decoration:underline}
.nwb{font-size:15px;line-height:1.8}
.nwb p{margin:0 0 .85em}
.nwb p:last-child{margin-bottom:0}
.nwb h2,.nwb h3,.nwb h4{font-weight:800;letter-spacing:-.01em;margin:1.1em 0 .4em}
.nwb h2{font-size:17px} .nwb h3{font-size:15.5px} .nwb h4{font-size:14.5px}
.nwb ul,.nwb ol{margin:0 0 .85em 1.35em}
.nwb li{margin:.2em 0}
.nwb blockquote{border-left:3px solid var(--line);padding-left:14px;color:var(--dim);
 margin:0 0 .85em}
.nwb code{background:var(--card);border-radius:4px;padding:1px 5px;font-size:13px}
.nwb a{color:#7aa2f7}
.nwcr{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
 font-size:12.5px;color:var(--dim);line-height:1.65}
.nwcr a{color:var(--dim);text-decoration:underline}
.nwcr a:hover{color:var(--ink)}
@media(max-width:640px){
  .nw{padding:16px 15px}
  .nwt{font-size:17px}
  .nwb{font-size:14.5px}
}

/* ── 칼럼/분석 ───────────────────────────────────────────────────────────
   목록은 한 줄에 한 편(제목·날짜·발췌)이고, 본문은 제 주소를 가진 한 장입니다.
   주요 뉴스 카드와 같은 말투를 쓰되 출처 줄이 없습니다 — 칼럼은 픽다운이 쓴
   글이라 원문이 따로 없습니다. */
.cols{display:grid;gap:14px}
.cl{background:var(--board);border:1px solid var(--line);border-radius:10px;
 padding:18px 22px;text-decoration:none;color:inherit;display:block;
 border-left:3px solid transparent}
.cl:hover,.cl:focus-visible{border-left-color:var(--acc);background:#141b2d}
.cl h2{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.45;
 color:var(--ink)}
.cl time{display:block;margin:5px 0 9px;font-size:12.5px;color:var(--dim);
 font-weight:600;font-variant-numeric:tabular-nums}
.cl p{font-size:14.5px;line-height:1.75;color:var(--dim);margin:0}
/* 한 편 보기 */
.cpost{background:var(--board);border:1px solid var(--line);border-radius:10px;
 padding:26px 30px}
.cpost h1{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.4;
 color:var(--ink)}
.cpost .cmeta{margin:8px 0 20px;padding-bottom:16px;border-bottom:1px solid var(--line);
 font-size:13px;color:var(--dim);font-weight:600;font-variant-numeric:tabular-nums}
.cbody{font-size:15.5px;line-height:1.85}
.cbody p{margin:0 0 .95em}
.cbody p:last-child{margin-bottom:0}
.cbody h2,.cbody h3,.cbody h4{font-weight:800;letter-spacing:-.01em;margin:1.3em 0 .5em;
 color:var(--ink)}
.cbody h2{font-size:19px} .cbody h3{font-size:17px} .cbody h4{font-size:15.5px}
.cbody ul,.cbody ol{margin:0 0 .95em 1.35em}
.cbody li{margin:.2em 0}
.cbody blockquote{border-left:3px solid var(--line);padding-left:14px;color:var(--dim);
 margin:0 0 .95em}
.cbody code{background:var(--card);border-radius:4px;padding:1px 5px;font-size:13.5px}
.cbody a{color:#7aa2f7}
.cback{display:inline-block;margin-top:22px;font-size:13.5px;font-weight:700;
 color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.cback:hover{color:var(--ink);border-bottom-color:var(--acc)}
@media(max-width:640px){
  .cl{padding:15px 16px}
  .cpost{padding:18px 16px}
  .cpost h1{font-size:21px}
  .cbody{font-size:15px}
}

/* ── 주차별 자료 ─────────────────────────────────────────────────────────
   왼쪽부터 [경기 목록][박스스코어][리뷰] 세 칸입니다. 목록 칸은 제 내용
   폭(fit-content)에 딱 맞춰 섭니다 — 예전 18% 규칙은 1920px 에서 288px 을
   가져가 점수와 날짜 사이에 60px 넘는 빈칸을 남겼습니다. 16em 은 안전장치일
   뿐이고 실제로는 내용이 폭을 정합니다. 박스스코어는 비율(25%)로 크되
   520px 에서 멈추고, 남는 폭은 전부 리뷰가 가져갑니다 — 화면이 넓어질수록
   리뷰만 넓어집니다. 어느 폭에서든 리뷰가 가장 넓고 절반을 넘습니다.
   본문 폭 제한은 없습니다(.wrap.wide). 창 폭에서 왼쪽 메뉴와 28px 여백만
   빼고 전부 씁니다 — 예전 1720px 제한이 넓은 화면에서 오른쪽을 통째로
   비워 두고 있었습니다.

   글자 크기는 이 칸 전체에 걸린 font-size 하나가 정하고, 안쪽은 전부 em 이라
   같이 커지고 같이 작아집니다. 그래서 위계(머리글 > 큰 줄 > 보통 줄 > 세부
   줄)가 어느 폭에서나 그대로 유지됩니다. 1366px 에서 12.5px, 1920px 에서
   15px, 그보다 넓으면 16px 에서 멈춥니다. */
.wrap.wide{max-width:none;padding:24px 28px 56px}
.wrap.wide .phd{padding-bottom:12px;margin-bottom:16px}
.wrap.wide .pick{margin-bottom:14px}
/* 주소가 가리킨 경기를 못 찾았을 때 — 조용히 기본 화면을 열지 않습니다. */
.hashnote{margin:0 0 12px;padding:.7em .9em;border-radius:6px;
 border:1px solid rgba(232,179,57,.4);background:rgba(232,179,57,.1);
 color:#e8b339;font-size:.92em;font-weight:700}
.wcols{display:grid;
 grid-template-columns:fit-content(16em) min(25%,520px) minmax(0,1fr);
 gap:22px;align-items:start;
 font-size:clamp(12.5px,calc(0.45vw + 6.3px),16px)}
.wcol{min-width:0}
.wcol>h3{font-size:1.05em;line-height:1.2;letter-spacing:.13em;color:var(--dim);
 font-weight:700;border-bottom:2px solid #2f3d5c;padding-bottom:.5em;
 margin-bottom:.6em}
.wcol>h3 em{font-style:normal;color:#4a5878;letter-spacing:0;margin-left:.5em;
 font-size:.8em;font-weight:600}
/* 목록 칸 — 색인입니다. 한 경기가 한 줄에 들어가는 선에서 가장 크게 잡습니다.
   아직 안 한 경기는 점수 자리에 – 를 두고 킥오프 시각을 답니다. */
.glist{display:flex;flex-direction:column;gap:2px}
.grow{display:flex;align-items:center;gap:.26em;flex-wrap:wrap;padding:.34em .36em;
 border-radius:5px;border:1px solid transparent;cursor:pointer;background:#141b2c}
.grow:hover{border-color:#2f3d5c}
.grow[aria-pressed="true"]{background:#1d2740;border-color:#4a5f8f}
.grow .gs{display:flex;align-items:center;gap:.2em;min-width:0}
.grow .gs img{width:1.35em;height:1.35em;object-fit:contain;flex:none}
.grow .gs b{font-size:.9em;font-weight:700;letter-spacing:0;color:var(--dim)}
.grow .gs i{font-style:normal;font-size:1em;font-weight:700;color:var(--dim);
 font-variant-numeric:tabular-nums;min-width:1.15em;text-align:right}
/* 이긴 쪽만 밝게 둡니다 — 목록에서 결과를 읽는 가장 싼 방법입니다. */
.grow .gs.w b,.grow .gs.w i{color:var(--ink)}
.grow .gat{font-size:.72em;color:#3c4761;font-weight:700}
.grow .gw{margin-left:auto;padding-left:.2em;font-size:.8em;color:#4a5878;
 font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.gnote{padding:.7em .2em;font-size:.88em;color:var(--dim);line-height:1.6}
/* 박스스코어 칸 — 보드에 있던 표 그대로입니다. 줄은 하나도 안 뺐습니다.
   줄 높이는 세로로 넉넉히 벌립니다(줄당 2.2em) — 25줄이면 머리글·각주까지
   합쳐 1080px 화면을 거의 다 채웁니다. 값 두 칸은 4em 고정이라 가장 긴
   "13-103" 이 들어가고, 남는 폭은 전부 라벨이 가져갑니다. */
/* 팀 머리는 표 왼쪽 끝에 붙습니다 — 아래 기록 줄의 라벨과 같은 선(.gr 의
   가로 여백 .4em)에서 시작합니다. 값 칸 위에 가운데로 얹지 않습니다. */
.ghead{border-bottom:2px solid #2f3d5c;padding-bottom:.55em}
.gthr{display:flex;gap:1.7em;align-items:flex-end;padding-left:.4em}
.gth{display:flex;flex-direction:column;align-items:flex-start;gap:.1em}
.gth img{width:1.75em;height:1.75em;object-fit:contain}
.gth b{font-size:.8em;font-weight:800;letter-spacing:.04em}
.gth i{font-style:normal;font-size:1.2em;font-weight:800;color:var(--dim);
 font-variant-numeric:tabular-nums}
.gth small{font-size:.62em;font-weight:700;letter-spacing:.08em;color:#4a5878}
.gtab{margin-top:.5em}
.gr{display:grid;grid-template-columns:minmax(0,1fr) 4em 4em;gap:.25em;
 align-items:baseline;padding:.44em .4em;border-radius:4px}
.gr:nth-of-type(even){background:rgba(255,255,255,.028)}
.gr .gl{font-size:.98em;font-weight:600;color:var(--dim);letter-spacing:-.03em;
 line-height:1.35}
/* "13-103"·"24/32" 처럼 붙임표가 든 값은 그냥 두면 붙임표에서 줄이 갈립니다. */
.gr .gv{text-align:right;font-size:1.02em;font-weight:700;color:var(--ink);
 font-variant-numeric:tabular-nums;line-height:1.35;white-space:nowrap}
.gr.lv-m .gl{font-size:1.05em;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.gr.lv-m .gv{font-size:1.12em;font-weight:800}
.gr.lv-s .gl{padding-left:.7em;font-size:.9em;color:var(--dim)}
.gr.lv-s .gv{font-size:.95em;font-weight:700;color:#c3cddf}
/* 나은 쪽만 빨강 — 보드와 같은 #ff4d4f 입니다. 나은 쪽이 없는 항목은
   양쪽 다 색을 안 넣습니다. */
.gr .gv.on{color:#ff4d4f}
.gr.xhd{margin-top:.9em;border-top:1px solid #243049;border-radius:0;
 padding-top:.8em;background:none!important}
.gr.xhd .gl{font-size:.75em;font-weight:700;letter-spacing:.02em;color:#4a5878}
.gnpn{margin-top:.8em;font-size:.78em;color:var(--dim);line-height:1.6}
.gnpn b{color:#c3cddf;font-weight:700}
/* 리뷰 칸 — 이 페이지의 본문입니다. 남는 폭은 전부 여기로 오고, 글자도 표보다
   한 단계 큽니다. 글이 없으면 지어내지 않고 조용히 비웁니다. */
.rvw{font-size:1.14em;line-height:1.85;color:#d6dded}
.rvw>*:first-child{margin-top:0}
.rvw p{margin:0 0 .95em}
.rvw h1{font-size:1.45em;font-weight:800;letter-spacing:-.02em;color:var(--ink);
 margin:1.5em 0 .6em}
.rvw h2{font-size:1.26em;font-weight:800;letter-spacing:-.02em;color:var(--ink);
 margin:1.4em 0 .55em}
.rvw h3{font-size:1.1em;font-weight:800;letter-spacing:-.01em;color:var(--ink);
 margin:1.25em 0 .5em}
.rvw h4{font-size:1em;font-weight:800;color:#c3cddf;margin:1.15em 0 .45em}
.rvw ul,.rvw ol{margin:0 0 .95em;padding-left:1.5em}
.rvw li{margin-bottom:.3em}
.rvw strong{color:var(--ink);font-weight:800}
.rvw em{color:#c3cddf}
.rvw code{background:var(--card);border:1px solid var(--line);border-radius:4px;
 padding:1px .35em;font-size:.86em}
.rvw blockquote{margin:0 0 .95em;padding:.1em 0 .1em .9em;
 border-left:3px solid var(--acc);color:var(--dim)}
.rvw hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}
.rvw a{color:#7ea8ff}
.rvnone{color:#4a5878;font-size:.92em;font-weight:600;line-height:1.7;
 border:1px dashed var(--line);border-radius:8px;padding:1.4em 1.2em}
/* ── 세로 스크롤은 페이지가 아니라 칸이 각자 합니다 ─────────────────────
   긴 리뷰 하나 때문에 페이지 전체가 내려가면 왼쪽 목록과 박스스코어가 화면
   밖으로 끌려 나갑니다. 세 칸을 화면 높이에 맞춰 세우고, 넘치는 칸만 자기
   안에서 구르게 합니다. 박스스코어는 팀 머리와 각주를 붙박이로 두고 기록
   줄만 굴립니다 — 보드에 있던 방식 그대로입니다.
   overflow:auto 라 내용이 짧은 칸에는 막대가 아예 안 뜹니다.
   좁은 화면(세로로 쌓이는 배치)에는 이 규칙을 아예 안 겁니다. 쌓인 칸 안에서
   또 구르는 건 손가락으로 쓸 수 없습니다. */
@media(min-width:1301px){
  body.wk{height:100vh;overflow:hidden}
  body.wk .wrap.wide{height:100%;display:flex;flex-direction:column;
   padding-bottom:24px;overflow:hidden}
  body.wk .phd,body.wk .pick{flex:none}
  body.wk .wcols{flex:1 1 auto;min-height:0;
   grid-template-rows:minmax(0,1fr);align-items:stretch}
  body.wk .wcol{display:flex;flex-direction:column;min-height:0}
  body.wk .wcol>h3{flex:none}
  body.wk .glist,body.wk .rvw{flex:1 1 auto;min-height:0;overflow-y:auto}
  /* 막대가 차지할 폭을 미리 비워 둡니다. 이 여백은 fit-content 가 재는 폭에도
     들어가므로, 막대가 떠도 경기 줄이 밀려 두 줄로 접히지 않습니다. */
  body.wk .glist{padding-right:9px}
  body.wk .rvw{padding-right:14px}
  body.wk .gbox{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  body.wk .gbox>.ghead,body.wk .gbox>.gnote{flex:none}
  /* 구르는 칸은 접이식 두 칸을 담은 .bsecs 입니다 — 팀 머리만 붙박이로 두고
     그 아래가 통째로 구릅니다. 예전에는 .gtab 이 바로 자식이라 그게 구르는
     칸이었는데, 표가 칸 안으로 한 겹 들어가면서 바뀌었습니다. */
  body.wk .gbox>.bsecs{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:9px}
  /* 막대는 어두운 배경에 묻히게 가늘게 둡니다. */
  body.wk .glist,body.wk .rvw,body.wk .gbox>.bsecs{
   scrollbar-width:thin;scrollbar-color:#2a3550 transparent}
  body.wk .glist::-webkit-scrollbar,body.wk .rvw::-webkit-scrollbar,
  body.wk .gbox>.bsecs::-webkit-scrollbar{width:7px}
  body.wk .glist::-webkit-scrollbar-track,body.wk .rvw::-webkit-scrollbar-track,
  body.wk .gbox>.bsecs::-webkit-scrollbar-track{background:transparent}
  body.wk .glist::-webkit-scrollbar-thumb,body.wk .rvw::-webkit-scrollbar-thumb,
  body.wk .gbox>.bsecs::-webkit-scrollbar-thumb{background:#2a3550;border-radius:4px}
  body.wk .glist::-webkit-scrollbar-thumb:hover,body.wk .rvw::-webkit-scrollbar-thumb:hover,
  body.wk .gbox>.bsecs::-webkit-scrollbar-thumb:hover{background:#3a4767}
}
/* 좁은 화면 — 세 칸을 목록 → 박스스코어 → 리뷰 순서로 쌓습니다. 폭이 남으니
   기준 글자를 한 단계 더 키우고 값 칸도 넓힙니다. 안쪽 크기는 전부 em 이라
   여기서 다시 적을 것이 거의 없습니다. */
@media(max-width:1300px){
  .wrap.wide{padding-left:20px;padding-right:20px}
  .wcols{grid-template-columns:minmax(0,1fr);gap:30px;font-size:14.5px}
  /* 쌓인 배치에서는 목록도 제 길이 그대로 둡니다 — 칸 안에 또 스크롤을 두면
     손가락이 어느 쪽을 굴리는지 알 수 없습니다. 페이지 하나만 구릅니다. */
  .glist{max-height:none;overflow:visible}
  .gr{grid-template-columns:minmax(0,1fr) 5.4em 5.4em;padding:.4em .6em}
  /* 팀 머리의 왼쪽 선은 아래 라벨의 왼쪽 선과 같아야 합니다 — .gr 의 가로
     여백이 여기서 .6em 으로 바뀌므로 .gthr 도 같이 따라갑니다. */
  .gthr{padding-left:.6em}
}
/* 960px 아래로는 햄버거가 다시 뜹니다 — 그만큼 위를 비워 둡니다. */
@media(max-width:959px){
  .wrap.wide{padding-top:56px}
}
@media(max-width:640px){
  .wrap.wide{padding:56px 12px 56px}
  .wcols{gap:24px;font-size:13.5px}
  .gr{grid-template-columns:minmax(0,1fr) 4.4em 4.4em}
}

.bsecs{display:flex;flex-direction:column;gap:.45em;min-width:0}
.bsec{min-width:0}
.bsh{display:flex;align-items:center;gap:.35em;padding:.42em .2em;cursor:pointer;
 font-weight:800;color:var(--ink);border-bottom:1px solid var(--line);
 -webkit-user-select:none;user-select:none}
.bsh:hover{color:#7ea8ff}
.bsh:focus-visible{outline:2px solid #4a5f8f;outline-offset:-2px}
/* 손잡이는 코치 경력 표와 같은 모양입니다 — 접혀 있으면 ▸, 펴지면 90도 */
.bchev{display:inline-block;width:.8em;font-size:.82em;color:#5b6880;
 transition:transform .12s ease}
.bsh[aria-expanded="true"] .bchev{transform:rotate(90deg)}
.bsh .bcnt{margin-left:auto;font-size:.78em;font-weight:700;color:#4a5878;
 letter-spacing:.02em;white-space:nowrap}
.bsb{padding-top:.2em}
.bsb.off{display:none}
/* 선수 스탯 안쪽 — 팀마다 접이식 한 덩이, 펴면 표들이 제목과 함께 다 나옵니다 */
.pteam{margin:.2em 0 .3em}
.bsh .blb{display:flex;align-items:center;gap:.35em;min-width:0}
.pteam .bsh img{width:1.3em;height:1.3em;object-fit:contain;flex:none}
.pteam .bsh b{font-size:.95em;font-weight:800;letter-spacing:.03em}
.pteam .bsh small{font-size:.66em;font-weight:700;letter-spacing:.08em;color:#4a5878}
.pgrp{margin:.35em 0 .75em}
.pgrp:last-child{margin-bottom:.3em}
.pgh{padding:.2em .25em .25em;font-size:.86em;font-weight:800;color:#c3cddf;
 letter-spacing:.02em;border-bottom:1px solid var(--line)}
/* 표 한 장. 이름 칸이 남는 폭을 다 먹고 숫자 칸은 고정입니다. 칸 수가
   표마다 달라서 --ptpl 로 통째로 받습니다 — repeat(var(--n),…) 은 값이
   정수여야 해서 브라우저마다 갈리는데, 이렇게 전체 값을 넘기면 안 갈립니다. */
.ptbl{min-width:0;overflow-x:auto}
.ptr{display:grid;grid-template-columns:var(--ptpl);gap:.3em;padding:.3em .25em;
 align-items:baseline;border-bottom:1px solid rgba(36,48,73,.45)}
.ptr:last-child{border-bottom:0}
.ptr .pnm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-size:.9em;font-weight:600;color:var(--dim)}
.ptr .ptd{text-align:right;font-size:.9em;font-weight:700;color:var(--ink);
 font-variant-numeric:tabular-nums;white-space:nowrap}
.ptr.pthr{border-bottom:1px solid var(--line)}
.ptr.pthr .ptd{font-size:.72em;font-weight:700;color:#4a5878;letter-spacing:.03em}
.ptr:nth-child(even):not(.pthr){background:rgba(255,255,255,.022)}
/* 표 밑에 붙는 잔글씨 — net/gross 같은 주의사항입니다. */
.pnote{padding:.5em .25em .2em;font-size:.76em;color:var(--dim);line-height:1.6}
.pnote b{color:#c3cddf;font-weight:700}