/* ALGS 코리아 트래커 — 모바일 우선 480px 프레임 */
:root {
  --paper: #ECEBE7;
  --card: #F7F6F3;
  --ink: #1A1C21;
  --steel: #5D6372;
  --rule: #D4D2CC;
  --ring: #C4122F;
  --ring-soft: rgba(196, 18, 47, .09);
  --brass: #9A7A2C;
  --ok: #2F6B4F;
  --coach: #1F6FB2;
  --kr-team: #C4122F;
  --kr-team-soft: rgba(196, 18, 47, .10);
  --kr-member: #D46A00;
  --kr-member-soft: rgba(212, 106, 0, .12);
  --coach-soft: rgba(31, 111, 178, .10);
  --display: 'Big Shoulders Display', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --body: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --r-lg: 14px;
  --r-sm: 8px;
  --tab-h: 64px;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --paper: #15171B;
  --card: #1E2127;
  --ink: #ECEBE7;
  --steel: #9BA1AE;
  --rule: #2E323A;
  --ring: #FF4D63;
  --ring-soft: rgba(255, 77, 99, .12);
  --brass: #D2B062;
  --ok: #6FC09A;
  --coach: #5AA9F0;
  --kr-team: #FF4D63;
  --kr-team-soft: rgba(255, 77, 99, .14);
  --kr-member: #FF9F43;
  --kr-member-soft: rgba(255, 159, 67, .14);
  --coach-soft: rgba(90, 169, 240, .13);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.55 var(--body); font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--card); padding: 8px 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.frame { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(var(--tab-h) + 24px); }

/* 상단 */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 800 22px/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 420px) { .brand { font-size: 19px; gap: 6px; } .brand-mark { width: 20px; height: 20px; } }
.brand-mark { width: 24px; height: 24px; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 10px; cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; }

/* 하단 탭 */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: var(--tab-h); display: grid; grid-template-columns: repeat(7, 1fr); background: var(--card); border-top: 1px solid var(--rule); z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; font-size: 11.5px; color: var(--steel); }
.tabbar svg { width: 22px; height: 22px; }
.tabbar a[aria-current='page'] { color: var(--ink); font-weight: 700; }
.tabbar a[aria-current='page'] svg { color: var(--ring); }

/* 공통 섹션 */
main { padding: 4px 18px 8px; outline: none; }
.sec { margin: 26px 0 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.title { font: 800 40px/0.95 var(--display); margin: 18px 0 4px; letter-spacing: .005em; }
.h2 { font: 800 26px/1 var(--display); margin: 0; letter-spacing: .01em; }
.lead { color: var(--steel); margin: 4px 0 0; font-size: 13.5px; }
.more { font-size: 13.5px; color: var(--steel); text-decoration: none; border-bottom: 1px solid var(--rule); }
.card { background: var(--card); border-radius: var(--r-lg); padding: 16px; }
.muted { color: var(--steel); }
.small { font-size: 12.5px; }
.num { font-family: var(--display); font-weight: 800; }

/* 한국 팀 히어로 */
.kr-hero { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: 18px 18px 16px; margin-top: 16px; position: relative; overflow: hidden; }
:root[data-theme='dark'] .kr-hero { background: #0E0F12; color: var(--ink); border: 1px solid var(--rule); }
.kr-hero .flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; opacity: .8; }
.kr-hero .flag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ring); }
.kr-hero h1 { font: 800 44px/0.95 var(--display); margin: 8px 0 2px; }
.kr-hero .roster { font-size: 13px; opacity: .75; margin: 0; }
.kr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.kr-stats div { border-top: 1px solid rgba(236, 235, 231, .22); padding-top: 8px; }
.kr-stats b { display: block; font: 800 30px/1 var(--display); }
.kr-stats span { font-size: 12px; opacity: .72; }
.kr-stats b.sm { font-size: 20px; line-height: 1.5; }
.kr-ev { margin: 14px 0 0; font-size: 13px; font-weight: 700; }
.kr-ev a { color: inherit; }
.kr-ev .tag { margin-left: 4px; }
.kr-next { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(236, 235, 231, .22); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13.5px; }
.kr-next b { font: 800 22px/1 var(--display); color: #FF8A99; }

/* 링 라인: CP 120팀 중 한국 팀 위치 */
.ringline { margin-top: 18px; }
.ringline svg { width: 100%; height: auto; display: block; overflow: visible; }
.ringline .caption { font-size: 12.5px; color: var(--steel); margin-top: 6px; }

/* 한국 선수 소속 팀 줄 */

/* 표 */
.tbl-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 600; font-size: 12px; color: var(--steel); padding: 6px 6px; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
.tbl td { padding: 9px 6px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tbl .r { text-align: right; }
.tbl .c { text-align: center; }
.tbl .rank { width: 30px; font: 800 17px/1 var(--display); }
.tbl .team { font-weight: 650; }
.tbl .team small { color: var(--steel); font-weight: 500; margin-left: 4px; }
.tbl tr.kr td { background: var(--ring-soft); }
.tbl tr.kr td:first-child { box-shadow: inset 3px 0 0 var(--ring); }
.tbl tr.cut td { border-bottom: 2px solid var(--ink); }
/* 점수 표기 공통: 순위 점수 / 킬 점수 / 종합 점수 */
.tbl th.pts-h { text-align: right; }
.tbl tr.cut-label td { padding: 3px 6px 8px; border-bottom: 0; font-size: 11.5px; color: var(--steel); background: transparent; box-shadow: none; }
.tbl tbody tr.expandable { cursor: pointer; }
.tbl tr.detail td { white-space: normal; background: var(--card); font-size: 13px; color: var(--steel); }

/* 배지 */
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--rule); color: var(--steel); vertical-align: 1px; white-space: nowrap; }
.tag.kr { border-color: var(--ring); color: var(--ring); }
.tag.ok { border-color: var(--ok); color: var(--ok); }
.tag.mp { border-color: var(--brass); color: var(--brass); }
.tag.live { background: var(--ring); color: #fff; border-color: var(--ring); }
.krdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ring); margin-right: 6px; vertical-align: 2px; }

/* 세그먼트 */
.seg { display: inline-flex; background: var(--card); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg a, .seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--steel); cursor: pointer; }
.seg [aria-current='true'], .seg [aria-pressed='true'] { background: var(--ink); color: var(--paper); font-weight: 600; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; align-items: center; }

/* 일정 */
.day { margin-top: 20px; }
.day-h { font: 800 20px/1 var(--display); padding-bottom: 6px; border-bottom: 1.5px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; }
.day-h small { font: 500 12.5px var(--body); color: var(--steel); }
.match { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.match time { font: 800 19px/1.1 var(--display); }
.match .what { font-weight: 650; }
.match .meta { font-size: 12.5px; color: var(--steel); margin-top: 2px; }
.match .res { margin-top: 6px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.match .res b { font-weight: 700; }
.match details { margin-top: 6px; }
.match summary { font-size: 12.5px; color: var(--steel); cursor: pointer; }
.spoiler { filter: blur(5px); cursor: pointer; user-select: none; }

/* 타임라인 */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; padding: 7px 0; align-items: baseline; font-size: 13.5px; }
.timeline li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--rule); background: var(--paper); justify-self: center; transform: translateY(1px); }
.timeline li.done::before { background: var(--steel); border-color: var(--steel); }
.timeline li.now::before { background: var(--ring); border-color: var(--ring); box-shadow: 0 0 0 4px var(--ring-soft); }
.timeline li.now { font-weight: 700; }
.timeline .when { color: var(--steel); font-size: 12.5px; }

/* 팀 */
.search { width: 100%; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--card); font: inherit; color: inherit; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.team-tile { background: var(--card); border-radius: var(--r-sm); padding: 12px; text-decoration: none; display: block; }
.team-tile > b { display: block; font: 800 22px/1 var(--display); }
.team-tile > span { font-size: 12.5px; color: var(--steel); }
.team-tile.kr { box-shadow: inset 3px 0 0 var(--ring); }
.roster-list { list-style: none; padding: 0; margin: 0; }
.roster-list li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--rule); }

/* 방송 */
.stream { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); gap: 10px; }
.stream a { font-weight: 650; }

/* 설명 상자 */
.explain { font-size: 13px; color: var(--steel); background: var(--card); border-radius: var(--r-sm); padding: 12px 14px; margin-top: 12px; }
.explain table { border-collapse: collapse; margin-top: 6px; }
.explain td { padding: 2px 8px 2px 0; }

.foot { padding: 28px 18px 8px; font-size: 12px; color: var(--steel); }
.foot p { margin: 2px 0; }

dialog { border: 0; border-radius: var(--r-lg); background: var(--card); color: var(--ink); width: min(420px, 92vw); padding: 20px; }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
dialog h2 { font: 800 28px/1 var(--display); margin: 0 0 12px; }
.switch { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.switch input { width: 18px; height: 18px; accent-color: var(--ring); }
.dlg-note { font-size: 12.5px; color: var(--steel); margin: 12px 0; }
.btn { border: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; }

.empty { padding: 24px 0; color: var(--steel); }

@media (min-width: 720px) { body { font-size: 15.5px; } }
@media (prefers-reduced-motion: no-preference) {
  .ringline .marker { transition: transform .5s ease; }
}

/* ---------- 갱신 상태 표시 ---------- */
.top-right { display: flex; align-items: center; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); background: var(--card); border-radius: 999px; padding: 5px 10px; font-size: 12px; color: var(--steel); cursor: pointer; white-space: nowrap; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
.pill.is-live { color: var(--ring); border-color: var(--ring); }
.pill.is-live .pill-dot { background: var(--ring); }
@media (prefers-reduced-motion: no-preference) { .pill.is-live .pill-dot { animation: blink 1.6s ease-in-out infinite; } }
@keyframes blink { 50% { opacity: .25; } }
.dlg-h { font: 800 18px/1 var(--display); margin: 16px 0 4px; }
.refresh-note { font-size: 12.5px; color: var(--steel); background: var(--card); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 10px; }
.refresh-note b { color: var(--ink); }
.tag.mpe { border-color: var(--brass); color: var(--brass); }
.res .upd { color: var(--steel); font-size: 11.5px; }

/* ---------- 방송 ---------- */
.mv { display: grid; gap: 14px; }
.mv figure { margin: 0; }
.mv img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }
.mv figcaption { font-size: 12px; color: var(--steel); margin-top: 6px; }
.mv ul { margin: 8px 0 0; padding-left: 18px; }
.mv li { margin: 3px 0; }
.btn-link { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; padding: 10px 16px; border-radius: 10px; font-weight: 650; margin-top: 12px; }
.bc { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.bc h3 { margin: 0; font-size: 16px; }
.bc p { margin: 2px 0 8px; font-size: 13px; color: var(--steel); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); text-decoration: none; font-size: 13px; font-weight: 600; }
.chip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.chip.twitch i { background: #9146FF; } .chip.youtube i { background: #FF0033; } .chip.chzzk i { background: #00D564; } .chip.soop i { background: #0545B1; }
.chip.off { color: var(--steel); border-style: dashed; cursor: default; font-weight: 500; }
.pl-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pl-row .nm { font-weight: 700; }
.pl-row .nm small { color: var(--steel); font-weight: 500; margin-left: 6px; }

/* ---------- 반응형: 태블릿·데스크톱 ---------- */
.frame { max-width: 480px; }
@media (min-width: 560px) { .frame { max-width: 640px; } .tabbar { max-width: 640px; } .team-grid { grid-template-columns: repeat(3, 1fr); } }

/* 한국 코치가 있는 팀 = 파랑 */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--steel); margin: 10px 0 0; }
.legend > span { display: inline-flex; align-items: center; }
.krn { font-weight: 700; color: var(--ink); }
sup.mix { font-size: 10px; font-weight: 700; color: var(--ring); margin-left: 2px; }
.olink { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.olink:hover { text-decoration-color: currentColor; }
.olink::after { content: '↗'; font-size: .78em; margin-left: 2px; color: var(--steel); }
.chip.find { border-style: dashed; font-weight: 500; color: var(--steel); }
.tile-roster { display: block; font-size: 12px; color: var(--steel); margin-top: 6px; line-height: 1.45; }
.kr-hero .kr-where { margin: 12px 0 0; font-size: 13.5px; opacity: .85; }
.meta.lineup { margin-top: 4px; }

/* 진출 구조 그림 */
.flow-sec { margin-top: 16px; }
.flow-grid { display: grid; gap: 12px; }
.bf-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border-radius: var(--r-lg); padding: 10px 8px 6px; }
.bf { display: block; width: 100%; min-width: 620px; height: auto; font-family: var(--body); }
.bf-box { fill: var(--paper); stroke: var(--rule); stroke-width: 1.2; }
.bf-node:hover .bf-box, .bf-node:focus-visible .bf-box { stroke: var(--ink); }
.bf-node.done .bf-box { fill: var(--card); stroke-dasharray: 3 3; }
.bf-node.next .bf-box { stroke: var(--brass); stroke-width: 2; }
.bf-node.live .bf-box { stroke: var(--ring); stroke-width: 2.4; }
.bf-title { font-size: 14px; font-weight: 800; fill: var(--ink); }
.bf-state { font-size: 11.5px; font-weight: 700; fill: var(--steel); }
.bf-node.live .bf-state { fill: var(--ring); }
.bf-node.next .bf-state { fill: var(--brass); }
.bf-sub { font-size: 11.5px; fill: var(--steel); }
.bf-sub2 { font-size: 10.5px; fill: var(--steel); }
.bf-edge { fill: none; stroke: var(--steel); stroke-width: 1.3; opacity: .7; }
.bf-arrow { fill: var(--steel); }
.bf-elab { font-size: 10.5px; fill: var(--steel); font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.bf-chip rect { fill: var(--ring); }
.bf-chip text { font-size: 11px; font-weight: 700; fill: #fff; }
.bf-chip.out { opacity: .38; }
.bf-chip.up rect { stroke: var(--ink); stroke-width: 1.5; }
.bf-more { font-size: 11px; fill: var(--steel); }
.bf-note { font-size: 11px; fill: var(--steel); font-weight: 600; }
.up-list .match:first-child { margin-top: 0; }

/* 브래킷 순위 */
.tl-row { margin-top: 4px; }
.bk-h { display: flex; align-items: center; gap: 8px; }
.bk-badge { font: 800 13px/1 var(--body); padding: 6px 10px; border-radius: 999px; }
.bk-badge.up { background: var(--ink); color: var(--paper); }
.bk-badge.low { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.bk-final .bk-h::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brass); }
.bk-stage { background: var(--card); border-radius: var(--r-lg); padding: 12px 12px 10px; margin-top: 10px; }
.bk-stage.live { box-shadow: inset 0 0 0 2px var(--ring); }
.bk-stage .tbl-wrap { margin-top: 6px; }
.bk-stage-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bk-stage-h .h3 { margin: 0; font-size: 16px; font-weight: 800; }
.bk-stage-h .when { margin-left: auto; font-size: 12.5px; color: var(--steel); }
.bk-rule { margin: 4px 0 0; font-size: 12.5px; color: var(--steel); }
.bk-lower .bk-cols { display: grid; gap: 0 14px; }
.adv { font-size: 12px; font-weight: 700; }
.adv.up { color: var(--ok); } .adv.down { color: var(--brass); } .adv.out { color: var(--steel); font-weight: 500; }
.lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.lu { display: flex; align-items: center; gap: 2px; padding: 7px 9px; border-radius: var(--r-sm); background: var(--paper); font-size: 13.5px; font-weight: 600; }
.lu small { margin-left: auto; color: var(--steel); font-weight: 500; font-size: 11.5px; }
.lu.kr { background: var(--ring-soft); box-shadow: inset 3px 0 0 var(--ring); }
details.past { background: var(--card); border-radius: var(--r-lg); padding: 12px; }
details.past > summary { cursor: pointer; color: var(--steel); font-size: 13px; }
details.past > summary .h2 { display: inline; margin-right: 8px; color: var(--ink); }
.h3 { font-size: 15px; font-weight: 800; margin: 18px 0 4px; }

@media (min-width: 768px) {
  body { font-size: 15.5px; }
  .frame { max-width: 1040px; padding-bottom: 24px; }
  .top { padding: 14px 28px; }
  .tabbar { position: sticky; top: var(--top-h, 70px); left: auto; transform: none; max-width: none; height: auto; display: flex; gap: 4px; padding: 8px 24px; border-top: 0; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); }
  .tabbar a { flex-direction: row; gap: 7px; font-size: 14px; padding: 8px 14px; border-radius: 999px; }
  .tabbar svg { width: 18px; height: 18px; }
  .tabbar a[aria-current='page'] { background: var(--card); }
  main { padding: 6px 28px 8px; }
  .foot { padding: 32px 28px 12px; }
  .title { font-size: 56px; margin-top: 24px; }
  .h2 { font-size: 30px; }
  .tbl-wrap { margin: 0; padding: 0; }
  .home-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .home-grid .col-b > .sec:first-child { margin-top: 16px; }
  .kr-hero h1 { font-size: 58px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .bk-lower .bk-cols { grid-template-columns: 1fr 1fr; }
  .lineup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 24px; }
  .stream-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; align-items: start; }
  .pl-row { grid-template-columns: minmax(180px, 1fr) 2fr; align-items: center; }
}
@media (min-width: 1200px) {
  .frame { max-width: 1240px; }
  .team-grid { grid-template-columns: repeat(4, 1fr); }
  .flow-grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
  .days { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start; }
  .kr-stats b { font-size: 36px; }
}
main:focus, main:focus-visible { outline: none; }
.bk-cols .lineup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.flow-grid > * { min-width: 0; }
.team-tile .tile-roster .krn { display: inline; font: 700 12.5px/1.45 var(--body); color: var(--ink); }
.team-tile > span:not(.tile-roster) { display: block; }

/* ---------- 넓은 화면 단계 (1024 / 1440 / 1680 / 1920 / 2560) ----------
   폭이 늘어나면 본문 폭, 글자 크기, 열 수를 함께 늘려 빈 여백만 커지지 않게 한다. */
@media (min-width: 1024px) {
  .frame { max-width: 1120px; }
  .home-grid { gap: 0 40px; }
  .lineup-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .frame { max-width: 1240px; }
}
@media (min-width: 1440px) {
  body { font-size: 16px; }
  .frame { max-width: 1400px; }
  .top { padding: 16px 36px; }
  .tabbar { padding: 8px 32px; }
  main { padding: 8px 36px 12px; }
  .foot { padding: 36px 36px 14px; }
  .title { font-size: 60px; }
  .home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; }
  .team-grid { grid-template-columns: repeat(5, 1fr); }
  .lineup-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .flow-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
  .pts-cols { display: grid; grid-template-columns: minmax(400px, 1fr) minmax(0, 1.9fr); gap: 0 40px; align-items: start; }
  .pts-side .tbl td { white-space: normal; }
  .pts-cols > .pts-side { position: sticky; top: 130px; }
  .stream-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 48px; }
  .bk-stage { padding: 14px 16px 12px; }
}
@media (min-width: 1680px) {
  body { font-size: 16.5px; }
  .frame { max-width: 1600px; }
  .title { font-size: 66px; }
  .h2 { font-size: 32px; }
  .team-grid { grid-template-columns: repeat(6, 1fr); }
  .days { grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
  .kr-hero { padding: 24px 26px 20px; }
  .kr-hero h1 { font-size: 68px; }
  .kr-stats b { font-size: 40px; }
  .flow-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
  .lineup-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1920px) {
  /* 고정 px 요소(표, 칩, 그림)까지 함께 커지도록 화면 전체를 비율로 키운다 (1.1배, 실제 폭 약 1840px) */
  .frame { zoom: 1.1; max-width: 1672px; }
  .home-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 52px; }
  .team-grid { grid-template-columns: repeat(6, 1fr); }
  .pts-cols { grid-template-columns: minmax(420px, 1fr) minmax(0, 2fr); gap: 0 48px; }
}
@media (min-width: 2560px) {
  /* 1.35배, 실제 폭 약 2360px */
  .frame { zoom: 1.35; max-width: 1748px; }
  .team-grid { grid-template-columns: repeat(7, 1fr); }
}
@media (min-width: 3400px) {
  .frame { zoom: 1.8; max-width: 1750px; }
}

/* ---------- 한국 관련 3분류 색 ----------
   빨강 = 한국 팀(선수 2명 이상), 주황 = 한국 선수 소속(1명), 파랑 = 한국 코치 팀(코치만)
   한국 선수와 한국 코치가 모두 있으면 한국 선수 기준 색으로 표시 */
.k-team { --kc-col: var(--kr-team); --kc-soft: var(--kr-team-soft); }
.k-member { --kc-col: var(--kr-member); --kc-soft: var(--kr-member-soft); }
.k-coach { --kc-col: var(--coach); --kc-soft: var(--coach-soft); }
.krdot.k-team, .krdot.k-member, .krdot.k-coach { background: var(--kc-col); border: 0; width: 9px; height: 9px; vertical-align: 1px; }
.krdot.k-member { border-radius: 2px; transform: rotate(45deg) scale(.9); }
.krdot.k-coach { border-radius: 2px; }
.tbl tr.kr.k-team td, .tbl tr.kr.k-member td, .tbl tr.kr.k-coach td { background: var(--kc-soft); }
.tbl tr.kr.k-team td:first-child, .tbl tr.kr.k-member td:first-child, .tbl tr.kr.k-coach td:first-child { box-shadow: inset 4px 0 0 var(--kc-col); }
.tag.kr.k-team, .tag.kr.k-member, .tag.kr.k-coach { border-color: var(--kc-col); color: var(--kc-col); }
.team-tile.kr.k-team, .team-tile.kr.k-member, .team-tile.kr.k-coach { box-shadow: inset 4px 0 0 var(--kc-col); background: linear-gradient(90deg, var(--kc-soft), transparent 70%), var(--card); }
.lu.kr.k-team, .lu.kr.k-member, .lu.kr.k-coach { background: var(--kc-soft); box-shadow: inset 4px 0 0 var(--kc-col); }
.bf-chip.k-team rect { fill: var(--kr-team); }
.bf-chip.k-member rect { fill: var(--kr-member); }
.bf-chip.k-coach rect { fill: var(--coach); }
.bf-chip .bf-c { fill: #fff; }
.bf-chip .bf-ct { fill: var(--coach); font-size: 9.5px; font-weight: 800; }
.bf-chip.up rect { stroke: var(--ink); stroke-width: 1.5; }
.kr-hero .flag.k-member::before { background: var(--kr-member); border-radius: 2px; transform: rotate(45deg); }
.kr-hero .flag.k-coach::before { background: var(--coach); border-radius: 2px; }

/* ---------- 규칙 탭 ---------- */
.vid-grid { display: grid; gap: 14px; margin-top: 12px; }
.vid { margin: 0; background: var(--card); border-radius: var(--r-lg); overflow: hidden; }
.yt, .yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: #000; position: relative; cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.yt:hover img { opacity: 1; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; transform: translate(-50%, -50%); background: var(--ring); border-radius: 12px; }
.yt-play::after { content: ''; position: absolute; left: 26px; top: 13px; border-left: 16px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.vid figcaption { padding: 10px 12px 12px; display: grid; gap: 3px; }
.vid figcaption b { font-size: 14.5px; }
.vid figcaption span { font-size: 12.5px; color: var(--steel); }
.rules-grid { display: grid; gap: 0 32px; align-items: start; }
.rule-card p, .rule-card ul { margin: 8px 0 0; }
.rule-card ul { padding-left: 18px; }
.rule-card li { margin: 3px 0; }
.tbl.compact th, .tbl.compact td { padding: 6px 4px; font-size: 12.5px; }
@media (min-width: 768px) { .vid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rules-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1680px) { .rules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 380px) { .tabbar a { font-size: 10.5px; } }

/* =====================================================================
   APEX 테마: 짙은 차콜 + 강렬한 레드, 비스듬한 모서리
   ===================================================================== */
:root {
  --apex: #DA292A;
  --apex-hot: #FF3D2E;
  --bar: #121317;
  --bar-2: #1B1D23;
  --bar-ink: #F2F1EC;
  --bar-steel: #9BA0AB;
  --paper: #ECEBE6;
  --card: #FFFFFF;
  --ink: #141519;
  --rule: #D6D4CE;
  --ring: #DA292A;
  --ring-soft: rgba(218, 41, 42, .10);
  --kr-team: #DA292A;
  --kr-team-soft: rgba(218, 41, 42, .10);
  --r-lg: 6px;
  --r-sm: 4px;
  --stick: 0px;
}
:root[data-theme='dark'] {
  --paper: #0E0F12;
  --card: #181A1F;
  --ink: #F2F1EC;
  --rule: #2A2D35;
  --ring: #FF3D3D;
  --ring-soft: rgba(255, 61, 61, .13);
  --kr-team: #FF3D3D;
  --kr-team-soft: rgba(255, 61, 61, .14);
}
/* 머리말·탭: 항상 어두운 막대 */
.top { background: var(--bar); color: var(--bar-ink); border-bottom: 3px solid var(--apex); backdrop-filter: none; }
.top .brand { color: var(--bar-ink); text-transform: uppercase; letter-spacing: .04em; }
.top .brand-mark { color: var(--apex); }
.top .icon-btn { color: var(--bar-ink); }
.top .pill { background: var(--bar-2); border-color: #2C2F37; color: var(--bar-steel); }
.top .pill.is-live { color: #fff; border-color: var(--apex); background: rgba(218, 41, 42, .2); }
.tabbar { background: var(--bar); border-top: 0; }
.tabbar a { color: var(--bar-steel); position: relative; }
.tabbar a[aria-current='page'] { color: #fff; }
.tabbar a[aria-current='page'] svg { color: var(--apex-hot); }
.tabbar a[aria-current='page']::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--apex); transform: skewX(-20deg); }

/* 세부 탭 */
.subtabs { position: sticky; top: var(--stick); z-index: 9; margin: 0 -18px; padding: 8px 18px; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.subtabs-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subtabs-in::-webkit-scrollbar { display: none; }
.subtabs a { flex: none; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--steel); padding: 7px 14px; border: 1px solid var(--rule); background: var(--card); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.subtabs a[aria-current='page'] { background: var(--apex); color: #fff; border-color: var(--apex); }

/* 제목·섹션 머리 */
.title { text-transform: uppercase; position: relative; padding-bottom: 8px; }
.title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; background: var(--apex); transform: skewX(-25deg); transform-origin: left; }
.h2 { display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.h2::before { content: ''; flex: none; width: 6px; height: .78em; background: var(--apex); transform: skewX(-18deg); }
.sec-head .more, .more { font-weight: 600; }
.more::after { content: ' →'; color: var(--apex); }

/* 버튼·세그먼트 */
.seg a[aria-current='true'] { background: var(--apex); color: #fff; }
.btn-link { background: var(--apex); color: #fff; border: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-left: 20px; padding-right: 20px; }
.btn-link.ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); display: inline-block; text-decoration: none; padding: 10px 22px; font-weight: 600; }

/* 히어로: 어두운 판 + 빨간 사선 */
.kr-hero { background: linear-gradient(118deg, var(--bar) 0 58%, var(--apex) 58% 60.5%, var(--bar) 60.5% 64%, #20232A 64%); color: var(--bar-ink); border: 0; border-radius: var(--r-lg); }
:root[data-theme='dark'] .kr-hero { background: linear-gradient(118deg, #17191E 0 58%, var(--apex) 58% 60.5%, #17191E 60.5% 64%, #22252C 64%); color: var(--bar-ink); border: 1px solid var(--rule); }
.kr-hero .flag { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.kr-hero .kr-next b { color: var(--apex-hot); }
.hero-id { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.hero-id h1 { margin: 0; text-transform: uppercase; }
.kr-hero .kr-where { font-weight: 600; }

/* 팀 로고 */
.tlogo { width: 18px; height: 18px; object-fit: contain; flex: none; vertical-align: -4px; }
.tlogo.lg { width: 30px; height: 30px; }
.tlogo.xl { width: 56px; height: 56px; }
.tlogo.ph { display: inline-grid; place-items: center; background: var(--rule); color: var(--steel); font: 700 9px/1 var(--body); border-radius: 3px; }
.tlogo.ph.lg { font-size: 11px; } .tlogo.ph.xl { font-size: 16px; }
.tl { display: inline-flex; align-items: center; gap: 6px; }
.detail-id { display: flex; align-items: center; gap: 14px; }
.detail-id .title { margin-top: 18px; }

/* 홈: 한국 선수·코치 팀 칩 */
.kr-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.kchip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; background: var(--card); text-decoration: none; border-left: 4px solid var(--kc-col); border-radius: var(--r-sm); }
.kchip > span { display: grid; line-height: 1.15; }
.kchip b { font: 800 17px/1 var(--display); letter-spacing: .02em; }
.kchip small { font-size: 11.5px; color: var(--steel); }
.kchip:hover { box-shadow: 0 0 0 1.5px var(--kc-col); }
.season-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.season-next li { background: var(--card); padding: 10px 12px; border-radius: var(--r-sm); font-weight: 600; }
.season-next .when { display: block; font-weight: 400; font-size: 12.5px; color: var(--steel); margin-top: 2px; }
.up-h { margin-top: 0; }

/* 팀 탭: 한국 관련 카드 */
.kcards { display: grid; gap: 10px; margin-top: 14px; }
.kcard { display: grid; gap: 10px; background: var(--card); padding: 14px; text-decoration: none; border-left: 5px solid var(--kc-col); border-radius: var(--r-sm); }
.kcard-id { display: flex; align-items: center; gap: 10px; }
.kcard-id > span { display: grid; }
.kcard-id b { font: 800 22px/1 var(--display); text-transform: uppercase; }
.kcard-id small, .kcard-stats small { color: var(--steel); font-size: 12px; }
.kcard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--rule); padding-top: 10px; }
.kcard-stats > span { display: grid; }
.kcard-stats b { font: 800 24px/1 var(--display); }
.kcard-now { font-size: 13px; font-weight: 600; }
.kcard-roster { font-size: 12.5px; color: var(--steel); }
.tile-id { display: flex; align-items: center; gap: 8px; }
.tile-id b { font: 800 22px/1 var(--display); }

/* 갱신 안내: 접힘 */
details.refresh-note { padding: 0; }
details.refresh-note summary { cursor: pointer; padding: 9px 12px; list-style: none; }
details.refresh-note summary::-webkit-details-marker { display: none; }
details.refresh-note[open] summary { border-bottom: 1px solid var(--rule); }
details.refresh-note > :not(summary) { padding: 0 12px; }
details.refresh-note { font-size: 12.5px; }
details.refresh-note[open] { padding-bottom: 10px; }
.more-hint { color: var(--apex); font-weight: 600; margin-left: 4px; }
.past-link { text-align: center; }

/* 진출 구조 그림: 칩·강조색을 Apex 빨강으로 */
.bf-node.live .bf-box { stroke: var(--apex); }
.bf-node.next .bf-box { stroke: var(--ink); stroke-width: 2; }
.bf-node.next .bf-state { fill: var(--ink); }

/* ---------- 화면 크기 단계 (작은 폰 → 4K) ----------
   ~340 아주 작은 폰 · ~400 일반 폰 · 480 큰 폰 · 560/640 폰 가로·작은 태블릿
   768 태블릿(위 탭) · 900 · 1024 · 1200 · 1440 · 1680 · 1920 · 2560 · 3400 */
@media (max-width: 400px) {
  .tbl .opt { display: none; }
  .kcard-stats b { font-size: 21px; }
}
@media (max-width: 340px) {
  body { font-size: 13.5px; }
  main { padding: 4px 12px 8px; }
  .subtabs { margin: 0 -12px; padding: 6px 12px; }
  .title { font-size: 32px; }
  .h2 { font-size: 21px; }
  .brand span { font-size: 16px; }
  .tabbar a { font-size: 9.5px; }
  .tabbar svg { width: 19px; height: 19px; }
  .kr-hero h1 { font-size: 34px; }
  .tlogo.xl { width: 40px; height: 40px; }
  .kchip b { font-size: 15px; }
  .top .pill #refreshText { display: none; }
}
@media (min-width: 480px) and (max-width: 559px) { .frame { max-width: 560px; } .tabbar { max-width: 560px; } }
@media (min-width: 560px) and (max-width: 639px) { .frame { max-width: 640px; } .tabbar { max-width: 640px; } }
@media (min-width: 560px) { .kcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) and (max-width: 767px) { .frame { max-width: 720px; } .tabbar { max-width: 720px; } }
/* 폰 가로 화면: 높이가 낮으면 하단 탭을 얇게 */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 940px) {
  :root { --tab-h: 48px; }
  .tabbar a { flex-direction: row; gap: 5px; font-size: 12px; }
  .tabbar svg { width: 18px; height: 18px; }
  .top { padding-top: 6px; padding-bottom: 6px; }
}
@media (min-width: 768px) {
  .tabbar { background: var(--bar); border-bottom: 0; }
  .tabbar a { color: var(--bar-steel); }
  .tabbar a[aria-current='page'] { background: var(--apex); color: #fff; border-radius: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-left: 18px; padding-right: 18px; }
  .tabbar a[aria-current='page'] svg { color: #fff; }
  .tabbar a[aria-current='page']::before { display: none; }
  .tabbar a:hover { color: #fff; }
  .subtabs { margin: 0 -28px; padding: 10px 28px; }
  .kcards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) { .kcards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .subtabs { margin: 0 -36px; padding: 10px 36px; } .kchip { padding: 10px 14px 10px 12px; } }
@media (min-width: 1680px) { .kcards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 360px) { .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 340px) { .tbl-wrap { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } }
.team-tile, .kcard { overflow-wrap: anywhere; min-width: 0; }
.more { white-space: nowrap; }
@media (max-width: 520px) {
  .h2 { font-size: 22px; }
  .sec-head { align-items: center; }
  .tlogo.xl { width: 40px; height: 40px; }
  .kr-hero h1 { font-size: 40px; }
}
/* 히어로의 빨간 사선은 글자를 피해 오른쪽 끝에 */
.kr-hero { background: linear-gradient(112deg, var(--bar) 0 80%, var(--apex) 80% 81.6%, var(--bar) 81.6% 84%, #23262E 84%); }
:root[data-theme='dark'] .kr-hero { background: linear-gradient(112deg, #17191E 0 80%, var(--apex) 80% 81.6%, #17191E 81.6% 84%, #23262E 84%); }
.rule-card .tbl-wrap { margin: 8px 0 0 !important; padding: 0 !important; }

/* 머리말·메뉴 막대를 화면 양옆 끝까지 채움 (본문 폭과 상관없이) */
html, body { overflow-x: clip; }
.top, .tabbar { background: transparent; border-bottom: 0; isolation: isolate; }
.top::before, .tabbar::after { content: ''; position: absolute; top: 0; bottom: 0; left: -100vmax; right: -100vmax; background: var(--bar); z-index: -1; pointer-events: none; }
.top::before { bottom: -3px; border-bottom: 3px solid var(--apex); }
.top { margin-bottom: 3px; }
/* 메뉴 막대 아래는 그림자로 본문 배경에 자연스럽게 이어지게 */
@media (min-width: 768px) {
  .tabbar::after { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55); }
}
/* 아주 넓은 화면: 본문 양옆도 가장자리로 갈수록 살짝 어두워지게 */
@media (min-width: 1500px) {
  body { background: radial-gradient(ellipse 70% 120% at 50% 0%, var(--paper) 60%, color-mix(in srgb, var(--paper) 82%, var(--bar)) 100%) fixed; }
}

/* CP 내역 */
.cpb { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.cpb:last-child { border-bottom: 0; }
.cpb-n { font-weight: 700; }
.cpb-n b { margin-left: 6px; }
.cpb-items { display: flex; flex-wrap: wrap; gap: 4px; }
.cpb-i { font-size: 12px; padding: 2px 8px; background: var(--paper); border-radius: 3px; white-space: nowrap; }
.cpb-i i { font-style: normal; color: var(--steel); margin-right: 2px; }
.cpb-i.po { box-shadow: inset 2px 0 0 var(--apex); }
.cpb-i.etc { opacity: .8; }
.rank .mv { display: block; font: 600 10px/1 var(--body); color: var(--steel); }
.ev-controls { flex-direction: column; align-items: flex-start; }
.ev-seg a { font-size: 12.5px; }
.cpb-i.pend { box-shadow: inset 2px 0 0 var(--apex), 0 0 0 1px var(--apex); } .cpb-i small { color: var(--apex); font-weight: 600; }
.ringline svg { max-width: 680px; display: block; }
.board-note { margin: 14px 0 0; padding: 10px 12px; font-size: 13px; background: var(--card); border-left: 4px solid var(--apex); border-radius: var(--r-sm); }
.board-note.pending { border-left-color: var(--kr-member); }
.board-note.confirmed { border-left-color: var(--ok); }
.board-note.now { border-left-color: var(--steel); color: var(--steel); }
.board-note b { margin-right: 6px; }
/* 지역별 챔피언십 직행권 팀 수 */
.tag.lcq { border-color: var(--steel); color: var(--steel); }
.qual { margin: 14px 0 0; padding: 12px; background: var(--card); border-radius: var(--r-lg); border-top: 3px solid var(--apex); }
.qual-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 10px; }
.qual-h b { font-family: var(--display); font-size: 20px; letter-spacing: .02em; }
.qual-h span { font-size: 12.5px; color: var(--steel); }
.qual-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qual-c { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper); color: inherit; text-decoration: none; border: 1px solid transparent; }
.qual-c:hover { border-color: var(--rule); }
.qual-c.on { border-color: var(--apex); box-shadow: inset 0 0 0 1px var(--apex); }
.qual-r { font-size: 12px; font-weight: 700; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qual-c b { font-family: var(--display); font-size: 34px; line-height: 1.05; color: var(--ok); }
.qual-c b small { margin-left: 2px; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--steel); }
.qual-s { font-size: 11.5px; color: var(--steel); }
@media (max-width: 560px) { .qual-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qual-c b { font-size: 28px; } }
.sm-only { display: none; }
@media (max-width: 520px) {
  .tbl .opt2 { display: none; }
  .sm-only { display: block; font-size: 11.5px; color: var(--steel); font-weight: 500; }
}
@media (max-width: 400px) { .pts-side .tbl .opt { display: none; } .tbl td.team { white-space: normal; } }
@media (max-width: 520px) { .tbl td.team .sm-only { white-space: normal; min-width: 140px; } }
@media (max-width: 340px) { .tbl td.team .sm-only { min-width: 112px; } .qual-c { padding: 8px 10px; } }
.cpb-i.excl { opacity: .55; text-decoration: line-through; text-decoration-color: var(--steel); } .cpb-i.excl small { color: var(--steel); text-decoration: none; }

/* 스포일러 방지 */
.spoil-box { position: relative; margin-top: 10px; }
.spoil-hidden { filter: blur(9px) saturate(.4); opacity: .55; pointer-events: none; user-select: none; max-height: 220px; overflow: hidden; }
.spoil-btn { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 2px; text-align: center; padding: 12px 20px; background: var(--bar); color: var(--bar-ink); border: 0; border-left: 4px solid var(--apex); cursor: pointer; max-width: 92%; }
.spoil-btn b { font: 800 18px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.spoil-btn span { font-size: 12px; color: var(--bar-steel); }
.spoil-box:has(.spoil-hidden:empty) { min-height: 64px; }
.sw-note { display: block; font-size: 11.5px; color: var(--steel); }

/* 문의·피드백 */
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.fb-link { color: var(--steel); }
.fb-kinds { display: grid; gap: 8px; margin: 12px 0 16px; }
.fb-kind { display: grid; gap: 2px; text-align: left; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--apex); cursor: pointer; border-radius: var(--r-sm); }
.fb-kind span { font-size: 12.5px; color: var(--steel); }
.fb-kind:hover { border-color: var(--apex); }
.top .icon-btn + .icon-btn { margin-left: 2px; }

/* 선수 링크 */
.plink { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.plink:hover { text-decoration-color: currentColor; }

/* 게임 다시보기 */
.rp-pick select { font: inherit; padding: 8px 10px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); max-width: 100%; border-radius: var(--r-sm); }
.rp-games { flex-wrap: wrap; }
.rp-games small { color: inherit; opacity: .7; font-size: 11px; }
.rp-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.rp-bans { font-size: 12.5px; color: var(--steel); }
.rp-bar { display: flex; align-items: center; gap: 6px; margin: 12px 0; padding: 10px; background: var(--bar); color: var(--bar-ink); border-radius: var(--r-sm); position: sticky; top: calc(var(--stick) + 52px); z-index: 5; }
.rp-bar input[type=range] { flex: 1; accent-color: var(--apex); min-width: 80px; }
.rp-btn { width: 34px; height: 34px; border: 0; background: var(--bar-2); color: #fff; cursor: pointer; font-size: 15px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
#rpPlay { background: var(--apex); }
.rp-count { font: 700 13px/1 var(--body); min-width: 64px; text-align: right; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.rp-team { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 8px; background: var(--card); border-radius: var(--r-sm); transition: opacity .25s, filter .25s; }
.rp-team .tlogo { grid-row: span 2; }
.rp-team b { font: 800 15px/1 var(--display); }
.rp-team .rp-state { font-size: 11px; color: var(--ok); font-weight: 600; }
.rp-team.out { opacity: .35; filter: grayscale(1); }
.rp-team.out .rp-state { color: var(--steel); }
.rp-team.win { box-shadow: 0 0 0 2px var(--apex); }
.rp-team.win .rp-state { color: var(--apex); }
.rp-team.kr { box-shadow: inset 4px 0 0 var(--kc-col); }
.rp-team.kr.win { box-shadow: inset 4px 0 0 var(--kc-col), 0 0 0 2px var(--apex); }
.rp-log { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; max-height: 280px; overflow: auto; }
.rp-ev { padding: 6px 10px; background: var(--card); font-size: 13.5px; border-radius: var(--r-sm); }
.rp-ev.kr { background: var(--kc-soft); }
.rp-place { font: 800 15px/1 var(--display); display: inline-block; min-width: 34px; }
.rp-win { color: var(--apex); }
.rp-detail summary { cursor: pointer; font-weight: 600; margin-top: 14px; }
.rp-vods { margin-top: 14px; }
.rp-link { display: inline-block; margin-top: 6px; font-size: 12.5px; }
@media (min-width: 768px) { .rp-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .rp-grid { grid-template-columns: repeat(10, 1fr); } }
.sm-inline { display: none; }
@media (max-width: 520px) { .lg-only { display: none; } .sm-inline { display: inline; } }
@media (max-width: 440px) { .top #refreshText { display: none; } .top .pill { padding: 8px; } .top .icon-btn { width: 34px; } }
.sub-note { display: block; margin-top: 3px; color: var(--kr-member); font-size: 11.5px; line-height: 1.35; }
.st-parts { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12.5px; } .st-parts small { color: var(--apex); }

/* 팀 로고: 맞는 색 로고가 없을 때 반대색 판, 로고가 없을 때 약칭 배지 */
.tlogo.plate-dark { background: var(--bar); border-radius: 4px; padding: 2px; }
.tlogo.plate-light { background: #F2F1EC; border-radius: 4px; padding: 2px; }
.tlogo.ph { display: inline-grid; place-items: center; background: var(--bar); color: #fff; font: 800 7px/1 var(--display); letter-spacing: .02em; border-radius: 4px; box-shadow: inset 0 -2px 0 var(--apex); overflow: hidden; text-transform: uppercase; }
.tlogo.ph.lg { font-size: 10px; } .tlogo.ph.xl { font-size: 17px; }
:root[data-theme='dark'] .tlogo.ph { background: #2A2D35; }

/* 보기 모드 */
.mode-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.mode-seg button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; color: var(--steel); cursor: pointer; }
.mode-seg button[aria-current='true'] { background: var(--apex); color: #fff; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 10px; }
.fav-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; background: var(--card); border: 1.5px solid var(--rule); border-radius: var(--r-sm); cursor: pointer; font: inherit; color: var(--ink); }
.fav-chip .tlogo { grid-row: span 2; width: 26px; height: 26px; }
.fav-chip b { font: 800 16px/1 var(--display); }
.fav-chip small { font-size: 11px; color: var(--steel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-chip.on { border-color: var(--apex); background: var(--ring-soft); box-shadow: inset 4px 0 0 var(--apex); }
.fav-chip.on b::after { content: ' ★'; color: var(--apex); }
.fav-btn { margin-left: auto; align-self: center; border: 1.5px solid var(--apex); background: transparent; color: var(--apex); font: 700 13px/1 var(--body); padding: 9px 14px; cursor: pointer; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.fav-btn.on { background: var(--apex); color: #fff; }
.kchip.more-chip { border-left-color: var(--steel); }
.kchip.more-chip { border-left-color: var(--steel); }

/* 대표 응원 팀 */
.tbl tr.kr.main td { background: color-mix(in srgb, var(--apex) 18%, transparent); font-weight: 700; }
.tbl tr.kr.main td:first-child { box-shadow: inset 7px 0 0 var(--apex); }
.kchip.main { border-left-width: 6px; padding: 10px 16px 10px 12px; box-shadow: 0 0 0 2px var(--apex); }
.kchip.main b { font-size: 21px; }
.kchip.main b::after { content: ' ★'; color: var(--apex); }
.kchip.main .tlogo { width: 28px; height: 28px; }
.main-pick { margin: 14px 0 6px; padding: 12px; background: var(--card); border-left: 4px solid var(--apex); border-radius: var(--r-sm); }
.main-pick .muted { font-size: 12.5px; }
.main-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.main-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); font: 700 13px/1 var(--body); cursor: pointer; border-radius: 999px; }
.main-opt.on { border-color: var(--apex); background: var(--apex); color: #fff; }
.fav-btns { margin-left: auto; display: flex; gap: 6px; align-self: center; flex-wrap: wrap; justify-content: flex-end; }
.fav-btns .fav-btn { margin-left: 0; }
.fav-btn.main { border-color: var(--brass); color: var(--brass); }
.fav-btn.main.on { background: var(--brass); color: #fff; }

/* ---------- LCQ · 이전 결과 ---------- */
.seg-n { display: inline-block; min-width: 18px; margin-left: 3px; padding: 0 5px; border-radius: 999px; background: var(--kr-team-soft); color: var(--kr-team); font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; }
.seg a[aria-current='true'] .seg-n { background: rgba(255, 255, 255, .25); color: #fff; }
.lcq-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font-size: 13px; }
.lcq-focus > b { margin-right: 4px; }
.lcq-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--card); color: inherit; text-decoration: none; border: 1px solid var(--rule); font-weight: 700; }
.lcq-chip small { color: var(--steel); font-weight: 500; font-size: 11px; }
.lcq-chip.k-team { border-color: var(--kr-team); } .lcq-chip.k-member { border-color: var(--kr-member); } .lcq-chip.k-coach { border-color: var(--coach); }
.lcq-tabs { position: relative; margin: 16px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lcq-tabs .seg { flex-wrap: nowrap; white-space: nowrap; }
.lcq-tabs .seg a { display: inline-flex; align-items: center; gap: 4px; }
.lcq-tabs small { font-size: 10.5px; opacity: .75; }
.tab-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ring); animation: pulse 1.6s ease-in-out infinite; }
.seg a[aria-current='true'] .tab-live { background: #fff; }
@keyframes pulse { 50% { opacity: .35; } }
.lcq-gcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.lcq-g .h3 { margin: 6px 0 6px; font-size: 16px; }
.lcq-g .h3 small { font-size: 12px; font-weight: 500; }
.tbl td.team .lcq-roster { display: block; margin: 3px 0 0; white-space: normal; font-size: 11.5px; line-height: 1.45; color: var(--steel); font-weight: 500; }
.lcq-roster .kr-p { color: var(--ink); font-weight: 700; }
.lcq-roster .krdot { width: 6px; height: 6px; margin-right: 3px; vertical-align: 1px; }
@media (max-width: 760px) { .lcq-gcols { grid-template-columns: 1fr; } }
.lcq-rule { display: flex; flex-wrap: wrap; gap: 2px 16px; }
time.tbd { font-size: 12px; color: var(--steel); }
.tbl.lcq-sch td { white-space: nowrap; }
.tbl.lcq-grid td.team { min-width: 96px; }
.tbl.lcq-grid td.team small { display: block; margin-left: 0; font-size: 11px; white-space: nowrap; }
.tbl.lcq-grid tr.slot td { color: var(--steel); }
.tbl.lcq-grid tr.slot td.team { font-weight: 500; }
.past-ev { margin-top: 14px; padding: 14px 16px; background: var(--card); border-radius: var(--r-lg); border-left: 5px solid var(--apex); }
.past-ev .h2 { margin: 0; }
.past-ev .lead { margin: 4px 0 0; }

/* ---------- 챔피언십 조 편성 ---------- */
.cg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.cg { background: var(--card); border-radius: var(--r-lg); padding: 12px 12px 8px; border-top: 4px solid var(--apex); min-width: 0; }
.cg-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.cg-h b { font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: .02em; }
.cg-h small { font-size: 12px; color: var(--steel); font-weight: 600; }
.cg-list { list-style: none; margin: 0; padding: 0; }
.cg-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 52px; align-items: center; gap: 6px; padding: 7px 6px; border-top: 1px solid var(--rule); font-size: 13.5px; }
.cg-row:first-child { border-top: 0; }
.cg-row.kr { background: var(--kc-soft, var(--kr-team-soft)); border-left: 4px solid var(--kc-col, var(--kr-team)); padding-left: 4px; border-radius: 4px; }
.cg-row.tbd { color: var(--steel); }
.cg-row.tbd .cg-team .tag { border-style: dashed; }
.cg-seed { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--steel); text-align: right; }
.cg-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cg-reg { font-size: 10.5px; color: var(--steel); font-weight: 700; }
.cg-cp { text-align: right; font-size: 12.5px; color: var(--steel); }
.cq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cq { display: grid; gap: 6px; align-content: start; padding: 10px 12px; background: var(--card); border-radius: var(--r-sm); font-size: 13.5px; }
.cq b { font-size: 12px; color: var(--steel); }
@media (max-width: 1100px) { .cg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cg-grid { grid-template-columns: minmax(0, 1fr); } }
/* 2부 리그(챌린저 서킷) 팀 표시 */
:root { --d2: #6D4BD8; }
:root[data-theme='dark'] { --d2: #A58BFF; }
.tag.d2 { border-color: var(--d2); color: var(--d2); font-size: 10.5px; padding: 1px 5px; }
.tbl small.tie { display: block; font-size: 10.5px; font-weight: 600; color: var(--brass); white-space: nowrap; }

/* ---------- 언어 ---------- */
:root[lang='ja'] { --body: 'Pretendard Variable', Pretendard, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', 'Yu Gothic', Meiryo, system-ui, sans-serif; --display: 'Big Shoulders Display', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic UI', Meiryo, system-ui, sans-serif; }
.lang-seg { margin: 4px 0 6px; }
.lang-seg button[aria-current='true'] { background: var(--apex); color: #fff; }