/* 바이스슈발츠 입상덱 통계 — 테마 대응 스타일 (dataviz 레퍼런스 팔레트) */
:root {
  --plane:#f9f9f7; --surface:#fcfcfb; --surface2:#f2f1ec;
  --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,0.10);
  --win:#2a78d6; --place:#9ec5f4;              /* 우승 / 기타입상 (동일 색상 명도차) */
  --fmt-title:#2a78d6; --fmt-trio:#1baf7a; --fmt-neo:#eda100; --fmt-std:#008300;
  --accent:#2a78d6; --accent-wash:rgba(42,120,214,0.10);
  --gold:#eda100;
}
@media (prefers-color-scheme:dark){
  :root{
    --plane:#0d0d0d; --surface:#1a1a19; --surface2:#232322;
    --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --baseline:#383835; --border:rgba(255,255,255,0.10);
    --win:#3987e5; --place:#1c5cab;
    --fmt-title:#3987e5; --fmt-trio:#199e70; --fmt-neo:#c98500; --fmt-std:#008300;
    --accent:#3987e5; --accent-wash:rgba(57,135,229,0.16); --gold:#c98500;
  }
}
:root[data-theme="light"]{
  --plane:#f9f9f7; --surface:#fcfcfb; --surface2:#f2f1ec;
  --ink:#0b0b0b; --ink2:#52514e; --grid:#e1e0d9; --baseline:#c3c2b7;
  --border:rgba(11,11,11,0.10);
  --win:#2a78d6; --place:#9ec5f4;
  --fmt-title:#2a78d6; --fmt-trio:#1baf7a; --fmt-neo:#eda100; --fmt-std:#008300;
  --accent:#2a78d6; --accent-wash:rgba(42,120,214,0.10); --gold:#eda100;
}
:root[data-theme="dark"]{
  --plane:#0d0d0d; --surface:#1a1a19; --surface2:#232322;
  --ink:#ffffff; --ink2:#c3c2b7; --grid:#2c2c2a; --baseline:#383835;
  --border:rgba(255,255,255,0.10);
  --win:#3987e5; --place:#1c5cab;
  --fmt-title:#3987e5; --fmt-trio:#199e70; --fmt-neo:#c98500; --fmt-std:#008300;
  --accent:#3987e5; --accent-wash:rgba(57,135,229,0.16); --gold:#c98500;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--plane); color:var(--ink);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Apple SD Gothic Neo","Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; -webkit-text-size-adjust:100%;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1060px; margin:0 auto; padding:0 18px;}

/* ── 헤더 / 슬라이더 ─────────────────────────────── */
header{position:sticky; top:0; z-index:20; background:var(--plane);
  border-bottom:1px solid var(--border); backdrop-filter:saturate(1.2) blur(4px);}
.hd-top{display:flex; align-items:baseline; gap:12px; padding:14px 0 8px; flex-wrap:wrap;}
.hd-top h1{margin:0; font-size:18px; font-weight:700;}
.hd-top .sub{color:var(--muted); font-size:12px;}
.hd-top .theme{margin-left:auto; cursor:pointer; background:none; border:1px solid var(--border);
  color:var(--ink2); border-radius:8px; padding:4px 9px; font-size:12px;}

.range{padding:2px 0 12px;}
.range-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.range-head .lbl{font-size:12px; color:var(--muted);}
.range-head .cur{font-variant-numeric:tabular-nums; font-weight:600; font-size:13px;}
.range-head .presets{display:flex; gap:6px;}
.range-head .presets button{font-size:11px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink2); cursor:pointer;}
.range-head .presets button:hover{border-color:var(--accent); color:var(--accent);}
.slider{position:relative; height:26px;}
.slider .track{position:absolute; top:11px; left:0; right:0; height:4px;
  background:var(--grid); border-radius:2px;}
.slider .fill{position:absolute; top:11px; height:4px; background:var(--accent); border-radius:2px;}
.slider input[type=range]{position:absolute; top:0; left:0; width:100%; margin:0;
  -webkit-appearance:none; appearance:none; background:none; pointer-events:none; height:26px;}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; pointer-events:auto;
  width:16px; height:16px; border-radius:50%; background:var(--surface);
  border:2px solid var(--accent); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.25);}
.slider input[type=range]::-moz-range-thumb{pointer-events:auto; width:16px; height:16px;
  border-radius:50%; background:var(--surface); border:2px solid var(--accent); cursor:pointer;}

/* ── 탭 ─────────────────────────────── */
.tabs{display:flex; gap:2px; padding-top:8px;}
.tabs button{background:none; border:none; border-bottom:2px solid transparent;
  color:var(--ink2); font-size:14px; font-weight:600; padding:8px 12px; cursor:pointer;}
.tabs button.on{color:var(--ink); border-bottom-color:var(--accent);}
.tabs button:hover{color:var(--ink);}

/* ── 콘텐츠 공통 ─────────────────────────────── */
#main{padding:20px 18px 60px;}   /* .wrap(클래스)보다 우선하도록 ID 선택자 */
.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px;}
.seg{display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden;}
.seg button{background:var(--surface); border:none; color:var(--ink2); font-size:12.5px;
  padding:5px 11px; cursor:pointer; border-right:1px solid var(--border);}
.seg button:last-child{border-right:none;}
.seg button.on{background:var(--accent); color:#fff;}
.seg.fmt button.on[data-f="title"]{background:var(--fmt-title);}
.seg.fmt button.on[data-f="trio"]{background:var(--fmt-trio);}
.seg.fmt button.on[data-f="neo"]{background:var(--fmt-neo); color:#0b0b0b;}
.search{flex:1; min-width:120px; max-width:240px; background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:6px 10px; color:var(--ink); font-size:13px;}
.controls .spacer{flex:1;}
.hint{color:var(--muted); font-size:12px;}

/* stat 타일 */
.stats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:11px 15px; min-width:120px;}
.stat .n{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums;}
.stat .k{color:var(--muted); font-size:11.5px; margin-top:1px;}

/* ── 랭킹 막대 ─────────────────────────────── */
.rank{list-style:none; margin:0; padding:0;}
.rank li{display:grid; grid-template-columns:26px minmax(120px,1fr) 2.2fr auto;
  gap:10px; align-items:center; padding:5px 6px; border-radius:8px; cursor:pointer;}
.rank li:hover{background:var(--surface);}
.rank li.sel{background:var(--accent-wash);}
.rank li.drill-inline{display:block; padding:0; cursor:default;}
.rank li.drill-inline:hover{background:none;}
.rank li.drill-inline .panel{margin-top:6px;}
.rank .no{color:var(--muted); font-size:12px; text-align:right; font-variant-numeric:tabular-nums;}
.rank .name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rank .bar{display:flex; align-items:center; height:14px; background:var(--surface2);
  border-radius:4px; overflow:hidden; gap:2px;}
.rank .bar .w{height:100%; background:var(--win); border-radius:4px;}
.rank .bar .p{height:100%; background:var(--place); border-radius:4px;}
.rank .val{font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--ink2); text-align:right; min-width:104px;}
.rank .val b{color:var(--ink);}
.rank .val .gold{color:var(--gold); font-weight:700;}

/* 범례 */
.legend{display:flex; gap:14px; align-items:center; margin:2px 0 12px; font-size:12px; color:var(--ink2); flex-wrap:wrap;}
.legend .k{display:inline-flex; align-items:center; gap:5px;}
.legend .sw{width:11px; height:11px; border-radius:3px; display:inline-block;}

/* ── 카드/리스트/드릴다운 ─────────────────────────────── */
.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px 6px;}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin-top:14px;}
.panel h3{margin:0 0 2px; font-size:15px;}
.panel .psub{color:var(--muted); font-size:12px; margin-bottom:10px;}
.panel .close{float:right; cursor:pointer; color:var(--muted); background:none; border:none; font-size:18px; line-height:1;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{text-align:left; padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:middle;}
th{color:var(--muted); font-weight:600; font-size:12px; position:sticky; top:0; background:var(--surface); z-index:1;}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;}
table.fixed{table-layout:fixed;}
table.fixed td, table.fixed th{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
tr.click{cursor:pointer;}
tr.click:hover td{background:var(--surface2);}

/* 배지/칩 */
.chip{display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap;}
.chip.title{background:color-mix(in srgb,var(--fmt-title) 18%,transparent); color:var(--fmt-title);}
.chip.trio{background:color-mix(in srgb,var(--fmt-trio) 18%,transparent); color:var(--fmt-trio);}
.chip.neo{background:color-mix(in srgb,var(--fmt-neo) 22%,transparent); color:var(--fmt-neo);}
.chip.std{background:color-mix(in srgb,var(--fmt-std) 18%,transparent); color:var(--fmt-std);}
.res{font-weight:700;}
.res.r1{color:var(--gold);} .res.r2{color:var(--ink2);} .res.r3,.res.r4{color:var(--muted);}
.pos{color:var(--muted); font-size:11px;}
.code{font-variant-numeric:tabular-nums; font-size:12px;}
.deckcode-link::after{content:" ↗"; color:var(--muted);}
/* 덱종류 배지 + 레벨매수 */
.ct{display:inline-block; padding:1px 7px; border-radius:6px; font-size:12px; font-weight:700;
  background:var(--accent-wash); color:var(--accent); white-space:nowrap;}
.lvc{white-space:nowrap; text-align:center;}
.lv{font-variant-numeric:tabular-nums; color:var(--ink2); font-size:12px; letter-spacing:.02em;}
th.lvc{text-align:center;}
.ctdist{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 12px;}
.ctdist .ctlbl{color:var(--muted); font-size:12px; margin-right:2px;}
.ctpill{background:var(--surface2); border:1px solid var(--border); border-radius:999px;
  padding:2px 9px; font-size:12px; color:var(--ink2); white-space:nowrap;}
.ctpill b{color:var(--ink); font-variant-numeric:tabular-nums;}
.ctpill i{color:var(--muted); font-style:normal; font-size:11px;}
.ctpill.clk{cursor:pointer;}
.ctpill.clk:hover{border-color:var(--accent);}
.ctpill.clk.on{border-color:var(--accent); background:var(--accent-wash);}
.ctpill .cdot{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:middle;}
/* 카드 스테이플 */
.stwrap{margin:4px 0 12px;}
.stlbl{font-size:12px; color:var(--ink2); font-weight:600; margin-bottom:8px;}
.stlbl .hint{font-weight:400;}
.staples{display:flex; flex-wrap:wrap; gap:8px;}
.stcard{width:70px;}
.stimg{position:relative; border-radius:5px; overflow:hidden; background:var(--surface2); aspect-ratio:161/225;}
.stimg img{width:100%; height:100%; object-fit:cover; display:block;}
.strate{position:absolute; right:2px; bottom:2px; background:rgba(0,0,0,.72); color:#fff;
  font-size:10px; font-weight:700; padding:1px 4px; border-radius:4px; font-variant-numeric:tabular-nums;}
.stnm{font-size:10px; color:var(--ink2); margin-top:3px; line-height:1.25; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.stsub{font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums;}

/* 페이지네이션 */
.pager{display:flex; gap:8px; align-items:center; justify-content:center; margin-top:14px;}
.pager button{background:var(--surface); border:1px solid var(--border); color:var(--ink2);
  border-radius:8px; padding:5px 12px; cursor:pointer; font-size:13px;}
.pager button:disabled{opacity:.4; cursor:default;}
.pager .info{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;}

.empty{color:var(--muted); font-size:13px; padding:24px 6px; text-align:center;}
footer{color:var(--ink2); font-size:12px; padding:18px 0 44px; border-top:1px solid var(--border); margin-top:24px; line-height:1.6;}
footer div{margin:1px 0;}
footer .fmeta{color:var(--muted); font-size:11px; margin-top:6px;}
footer a{color:var(--ink2); text-decoration:underline;}

/* 툴팁 */
#tip{position:fixed; z-index:50; pointer-events:none; background:var(--surface);
  border:1px solid var(--border); border-radius:9px; padding:8px 10px; font-size:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.22); max-width:260px; opacity:0; transition:opacity .08s;}
#tip.on{opacity:1;}
#tip .tt{font-weight:700; margin-bottom:4px;}
#tip .row{display:flex; justify-content:space-between; gap:14px; color:var(--ink2);}
#tip .row .v{font-variant-numeric:tabular-nums; color:var(--ink);}
#tip .tinfo{color:var(--ink2); font-size:11.5px; max-width:240px; line-height:1.4;}

/* ── 메타 탭 ── */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.span2{grid-column:1 / -1;}
.mh{margin:0 0 12px; font-size:14px; color:var(--ink2); font-weight:600;}
.mh .hint{font-weight:400;}
.segbtn{background:var(--surface); border:1px solid var(--border); color:var(--ink2);
  border-radius:8px; padding:5px 11px; cursor:pointer; font-size:12.5px;}
.segbtn:hover{border-color:var(--accent); color:var(--accent);}
ul.bars{list-style:none; margin:0; padding:0;}
ul.bars li{display:grid; grid-template-columns:minmax(72px,120px) 1fr auto; gap:10px; align-items:center; padding:3px 0; font-size:13px;}
ul.bars .lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
ul.bars .track{background:var(--surface2); border-radius:6px; height:11px; overflow:hidden;}
ul.bars .fill{display:block; height:100%; background:linear-gradient(90deg,var(--accent2,var(--accent)),var(--accent)); border-radius:6px;}
ul.bars .val{font-variant-numeric:tabular-nums; font-weight:600; min-width:56px; text-align:right;}
ul.bars .sub{color:var(--muted); font-weight:400; font-size:11px;}
ul.bars li.clk{cursor:pointer; border-radius:6px; padding:3px 6px; margin:0 -6px;}
ul.bars li.clk:hover{background:var(--surface2);}
ul.bars li.sel{background:var(--accent-wash);}
ul.bars .dot{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:middle;}
:root{--s1:#2a78d6;--s2:#1baf7a;--s3:#eda100;--s4:#008300;--s5:#4a3aa7;--s6:#e34948;--s7:#e87ba4;--s8:#eb6834;}
@media (prefers-color-scheme:dark){:root{--s1:#3987e5;--s2:#199e70;--s3:#c98500;--s4:#008300;--s5:#9085e9;--s6:#e66767;--s7:#d55181;--s8:#d95926;}}
:root[data-theme="light"]{--s1:#2a78d6;--s2:#1baf7a;--s3:#eda100;--s4:#008300;--s5:#4a3aa7;--s6:#e34948;--s7:#e87ba4;--s8:#eb6834;}
:root[data-theme="dark"]{--s1:#3987e5;--s2:#199e70;--s3:#c98500;--s4:#008300;--s5:#9085e9;--s6:#e66767;--s7:#d55181;--s8:#d95926;}
/* 시기별 덱종류 점유율 — 수평 막대 */
.hchart{display:flex; flex-direction:column; gap:5px;}
.hrow{display:flex; align-items:center; gap:10px;}
.hlbl{width:52px; flex-shrink:0; font-size:11px; color:var(--ink2); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.hlbl span{color:var(--muted); font-size:10px;}
.hbar{flex:1; display:flex; height:18px; border-radius:4px; overflow:hidden; background:var(--surface2);}
.hseg{height:100%; border-right:1px solid var(--surface);}
.hseg:hover{filter:brightness(1.25);}
/* 발매·대회 타임라인 */
/* 발매·대회 타임라인 — 스윔레인 */
.swwrap{display:flex; align-items:stretch;}
.swlabels{flex-shrink:0; width:118px; padding-right:8px;}
.swllbl{display:flex; align-items:center; font-size:11px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.swllbl .cdot{width:8px; height:8px; border-radius:2px; margin-right:5px; flex-shrink:0;}
.swllbl.swaxis{color:var(--muted); align-items:flex-start; padding-top:4px;}
.tlscroll{flex:1; overflow-x:auto; overflow-y:hidden; border:1px solid var(--border); border-radius:8px; background:var(--surface2);}
.tlcanvas{position:relative;}
.swlane{position:absolute; left:0; right:0;}
.swlane.alt{background:rgba(128,128,128,0.06);}
.tlgrid{position:absolute; top:0; width:1px; background:var(--grid);}
.tlaxl{position:absolute; font-size:10px; color:var(--muted); transform:translateX(-50%); white-space:nowrap; font-variant-numeric:tabular-nums;}
.tlprod{position:absolute; top:0; width:0; border-left:2px dashed; opacity:.55; z-index:3;}
.tlprod:hover{opacity:1;}
.tlpin{position:absolute; top:-3px; left:-4px; width:8px; height:8px; border-radius:2px; cursor:pointer;}
.swdot{position:absolute; border-radius:50%; z-index:2; cursor:pointer; box-sizing:border-box;}
.swdot.win{box-shadow:0 0 0 1.5px var(--surface2);}
.swdot:not(.win){background:var(--surface2); border:2px solid;}
.swdot:hover{filter:brightness(1.3); z-index:4;}
.swtick{position:absolute; width:3px; height:16px; border-radius:1px; opacity:.75; cursor:pointer;}
.swtick:hover{opacity:1; transform:scaleY(1.15);}
.tldot{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:middle;}

@media (max-width:760px){ .grid{grid-template-columns:1fr;} }
@media (max-width:640px){
  .rank li{grid-template-columns:22px 1fr; gap:6px;}
  .rank .bar{grid-column:1 / -1; order:3;}
  .rank .val{grid-column:1 / -1; order:2; text-align:left; min-width:0;}
}