:root{
  --bg:#0f1420; --card:#171e2e; --line:#273249; --txt:#e6ebf5; --sub:#93a1bd;
  --base:#8a94a8; --base-bg:#1c2333; --impr:#4f8cff; --impr-bg:#16233d;
  --good:#37c978; --warn:#ffb020; --bad:#ff5c5c; --hi:#3a2f12;
  --maxw:1200px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,"Segoe UI","Malgun Gothic",AppleSDGothicNeo,sans-serif;background:var(--bg);color:var(--txt);font-size:14px}
header{padding:16px 0 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#131a29,#0f1420)}
.head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1{margin:0;font-size:20px;letter-spacing:-.3px}
.sub{margin:4px 0 0;color:var(--sub);font-size:13px}
.controls{display:flex;align-items:center;gap:10px}
.controls label{font-size:12px;color:var(--sub);display:flex;flex-direction:column;gap:3px}
select{background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:14px;min-width:120px}
#reloadBtn{align-self:flex-end;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:8px;width:36px;height:36px;font-size:16px;cursor:pointer}
#reloadBtn:hover{border-color:var(--impr)}
.tabs{display:flex;gap:4px;margin:14px auto 0;flex-wrap:wrap;max-width:var(--maxw);padding:0 22px}
.tab{background:transparent;color:var(--sub);border:none;border-bottom:2px solid transparent;padding:10px 14px;font-size:14px;cursor:pointer;font-weight:600}
.tab:hover{color:var(--txt)}
.tab.active{color:var(--txt);border-bottom-color:var(--impr)}
main{padding:18px 22px 40px;max-width:var(--maxw);margin:0 auto}
.posbar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.posbtn{background:var(--card);color:var(--sub);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer}
.posbtn:hover{color:var(--txt)}
.posbtn.active{background:var(--impr);color:#fff;border-color:var(--impr)}
.view.hidden{display:none}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:900px){.three-col{grid-template-columns:1fr}}
.three-col table{font-size:11px}
.three-col th,.three-col td{padding:5px 4px}
.three-col td.inn{font-size:10.5px}
/* 같은 선수 세 열 동시 하이라이트 (hover 추적) */
#view-rank tr.hl>td{background:#1f3f63 !important;box-shadow:inset 0 -1px 0 var(--impr)}
/* 순위 등락 화살표 (기존 대비) */
.mv{font-size:9.5px;font-weight:800;margin-left:3px;vertical-align:middle}
.mv.up{color:var(--good)} .mv.down{color:var(--bad)} .mv.flat{color:var(--sub);font-weight:600}
/* 유틸: 선수명 hover 시 포지션 구성 툴팁 */
.hint{cursor:help;border-bottom:1px dotted var(--sub)}
/* 유틸: 클릭 가능한 행 표시 */
.three-col.util-mode tbody tr[data-pc]{cursor:pointer}
/* 유틸 포지션별 합산 내역 표 */
.util-bd th span{display:block;font-weight:400;color:var(--sub);font-size:9.5px;margin-top:1px}
.util-bd tr.util-total td{border-top:2px solid var(--impr);background:#16233d}
.mtitle{font-size:14px;margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid}
.mtitle span{display:block;font-weight:400;color:var(--sub);font-size:11px;margin:2px 0 0}
.mtitle.base{border-color:var(--base)}
.mtitle.impr2{border-color:var(--warn)}
.mtitle.impr{border-color:var(--impr)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:6px 6px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
td.inn{color:var(--sub);font-size:11.5px}
th{color:var(--sub);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;position:sticky;top:0;background:var(--bg)}
tbody tr:hover{background:#1a2233}
tr.moved{background:var(--hi)}
tr.moved:hover{background:#4a3c18}
.rk{font-weight:700;color:var(--sub)}
.rk1{color:#ffd24a}
.pos-num{color:var(--sub);font-size:11px}
.pos{color:var(--good)} .neg{color:var(--bad)}
.up{color:var(--good);font-weight:700}
.down{color:var(--bad);font-weight:700}
.flat{color:var(--sub)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.note{color:var(--sub);font-size:12px;margin-top:12px;line-height:1.5}
.metric-head{margin-bottom:14px}
/* 지표 분해 바 */
.mrow{display:grid;grid-template-columns:70px 1fr 1fr;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.mrow .lbl{color:var(--sub);font-weight:600}
.barbox{position:relative;height:26px;background:#0d1220;border-radius:6px;overflow:hidden}
.barbox .zero{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.bar{position:absolute;top:4px;bottom:4px;border-radius:4px}
.bar.b{background:var(--base)} .bar.i{background:var(--impr)}
.barval{position:absolute;top:5px;font-size:11px;color:var(--txt);font-weight:600}
.mhdr{display:grid;grid-template-columns:70px 1fr 1fr;gap:12px;color:var(--sub);font-size:12px;font-weight:600;padding-bottom:6px}
/* 시상 후보 */
.award-tbl td,.award-tbl th{text-align:center}
.chip{display:inline-block;background:#1c2333;border:1px solid var(--line);border-radius:14px;padding:3px 10px;font-size:12px}
.changed{background:var(--hi);border-color:var(--warn)}
.badge{font-size:11px;padding:2px 7px;border-radius:10px;font-weight:700}
.badge.same{background:#16261a;color:var(--good)}
.badge.diff{background:#3a2f12;color:var(--warn)}
/* 품질 */
.q-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.q-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.q-card .v{font-size:26px;font-weight:800;margin:6px 0}
.q-card .n{color:var(--sub);font-size:12px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot.ok{background:var(--good)} .dot.warn{background:var(--warn)} .dot.fail{background:var(--bad)}
footer{max-width:var(--maxw);margin:0 auto;padding:14px 22px;border-top:1px solid var(--line);color:var(--sub);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.loading{color:var(--sub);padding:40px;text-align:center}
/* 산출 방식 */
.f-h{font-size:16px;margin:0 0 8px;color:var(--txt)}
.f-p{color:#c7d0e2;font-size:13.5px;line-height:1.65;margin:6px 0}
.f-sub{color:var(--sub);font-size:12px;margin:6px 0 0}
.f-eq{font-family:"Consolas","Menlo",monospace;font-size:13px;color:#dbe4f7;background:#0d1220;border-left:3px solid var(--impr);border-radius:0 6px 6px 0;padding:10px 12px;margin:8px 0;line-height:1.7}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:760px){.f-grid{grid-template-columns:1fr}}
.f-card{margin-bottom:0}
.f-tag{display:inline-block;font-weight:800;font-size:12px;padding:2px 9px;border-radius:6px;letter-spacing:.4px;vertical-align:middle}
.f-tag.rng{background:#16233d;color:#7db2ff} .f-tag.err{background:#33191b;color:#ff8a8a}
.f-tag.dpr{background:#15281a;color:#7fdc9b} .f-tag.arm{background:#33290f;color:#ffcf6b}
.f-name{display:inline-block;font-weight:600;font-size:14px;margin-left:8px;vertical-align:middle}