:root{
  --bg:#10121a; --panel:#171a25; --panel2:#1d2130; --line:#2a2f42;
  --ink:#e8eaf2; --dim:#98a0b8; --gold:#d8b46a; --on:#8fd6a0; --bad:#e08a8a;
  /* 사이트는 어두운 화면뿐이다. 브라우저가 그리는 부분(선택 목록 펼침 · 스크롤바)도 어둡게 */
  color-scheme:dark;
}
*{box-sizing:border-box}
/* 스크롤바 — 가는 금색 막대 (테마 색), 바탕 길은 비워 둔다. 내 기록(/me/ history.css)과 같은 모양.
   크롬은 scrollbar-color/width를 쓰면 ::-webkit-scrollbar를 무시하므로, 표준 속성은 그걸 못 쓰는 브라우저에만 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{border-radius:8px;border:2px solid transparent;background-clip:padding-box;
  background-color:#a8843f;background-image:linear-gradient(180deg,var(--gold),#a8843f)}
::-webkit-scrollbar-thumb:hover{background-color:var(--gold);background-image:none}
::-webkit-scrollbar-button{display:none;width:0;height:0}
@supports not selector(::-webkit-scrollbar){ *{scrollbar-width:thin;scrollbar-color:#a8843f transparent} }
/* 키보드로 옮겨 다닐 때 어디에 있는지 보이게 (마우스 클릭에는 뜨지 않는다) */
:where(a:any-link, button, select, input, summary):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* 화면에는 안 보이고 화면 읽기 프로그램에만 읽히는 글 */
.visually-hidden:where(:not(:focus-within, :active)){position:absolute!important;clip-path:inset(50%)!important;
  overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;
  border:0!important;white-space:nowrap!important}
/* 아이폰을 가로로 돌리면 사파리가 글자를 멋대로 키운다 — 막는다 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 "Pretendard","Malgun Gothic",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
/* 통계 화면은 카드가 옆으로 늘어서야 스크롤이 짧다 (머리글도 같이 넓힌다) */
body[data-kind="endgame"] .wrap,
body[data-kind="warp"] .wrap{max-width:1440px}

.top{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#151826,#10121a);padding:18px 0}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:46px;height:46px;display:block;object-fit:contain;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gold) 22%,transparent))}
.brand h1{margin:0;font-size:19px;letter-spacing:.02em}
.brand p{margin:2px 0 0;color:var(--dim);font-size:12.5px}

.lookup{margin:28px 0 8px}
.lookup label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:6px}
.row{display:flex;gap:8px;max-width:420px}
#uid{flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink);font-size:16px;letter-spacing:.06em}
#uid:focus{outline:none;border-color:var(--gold)}
#go{padding:11px 20px;border:0;border-radius:8px;background:var(--gold);color:#1a1406;
  font-weight:700;font-size:15px;cursor:pointer}
#go:hover{filter:brightness(1.08)}
.hint{color:var(--dim);font-size:12.5px;max-width:560px;margin:10px 0 0}
.msg{margin:12px 0 0;font-size:13.5px;color:var(--dim)}
.msg.bad{color:var(--bad)}

.player{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:22px 0;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.pfp{width:52px;height:52px;border-radius:50%;background:var(--panel2)}
.player h2{margin:0;font-size:17px}
.player p{margin:2px 0 0;color:var(--dim);font-size:12.5px}
.player .sig{color:#7e869e;font-style:italic}
.space{display:flex;gap:22px;margin:0 0 0 auto}
.space div{text-align:right}
.space dt{color:var(--dim);font-size:11.5px}
.space dd{margin:0;font-size:17px;font-weight:700}

.cards{display:grid;gap:14px;align-items:start;grid-template-columns:repeat(auto-fill,minmax(430px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.c-top{display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--el) 22%,transparent),transparent)}
.face{width:54px;height:54px;border-radius:8px;background:var(--panel2)}
.c-id{flex:1;min-width:0}
.c-id h3{margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-id p{margin:1px 0 0;color:var(--dim);font-size:12px}
.assist{margin-left:6px;padding:1px 6px;border-radius:4px;font-size:10.5px;font-weight:600;
  vertical-align:middle;background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}
.score{text-align:right;line-height:1.1}
.score b{font-size:26px;color:var(--gold)}
.score span{display:block;font-size:11px;color:var(--dim)}

.c-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px}
.lc{display:flex;align-items:center;gap:9px}
.lc img{width:34px;height:34px;border-radius:5px;background:var(--panel2)}
.lc b{font-size:13.5px;font-weight:600}
.lc span{display:block;color:var(--dim);font-size:11.5px}
.lc.empty{color:var(--dim);font-size:12.5px}
.sets{display:flex;gap:6px;flex-wrap:wrap}
.set{font-size:12px;padding:3px 8px;border:1px solid var(--line);border-radius:20px;background:var(--panel2)}
.set i{font-style:normal;color:var(--gold);font-weight:700}
.set.none{color:var(--dim)}
.stat{display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--dim)}
.stat b{color:var(--ink);font-size:14px}
.warn{color:var(--bad)}
.pct{font-size:12.5px;color:var(--dim)}
.pct b{font-size:13.5px;color:var(--ink)}
.pct.wait{color:#6f7690;font-size:12px}
.pct.good b{color:var(--on)}
.pct.top b{color:var(--gold)}
.stat .warn{margin-left:auto}
.eff{font-size:12.5px;color:var(--dim)}
.eff b{color:var(--ink);font-weight:600}
.byprop{display:flex;gap:6px;flex-wrap:wrap}
.bp{font-size:12px;padding:3px 8px;border-radius:6px;background:var(--panel2);color:var(--dim)}
.bp b{color:var(--on);font-size:12.5px}
.bp.none{color:var(--dim)}

.more{align-self:flex-start;margin-top:2px;padding:6px 12px;font-size:12.5px;cursor:pointer;
  border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--dim)}
.more:hover{color:var(--ink);border-color:var(--gold)}
.pieces{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.pieces[hidden]{display:none}
.piece{display:grid;grid-template-columns:40px 1fr;gap:9px;align-items:start;
  padding:8px;border-radius:8px;background:var(--panel2)}
.piece img{width:40px;height:40px;grid-row:span 2}
.p-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.p-head .lv{color:var(--gold)}
.p-head .main{color:var(--ink)}
.p-head .setname{margin-left:auto;font-size:11px}
.subs{grid-column:2;display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.sub{font-size:11.5px;color:#6f7690;padding:2px 7px;border-radius:5px;border:1px solid transparent}
.sub b{font-weight:600}
.sub i{font-style:normal;margin-left:4px;opacity:.65}
.sub.on{color:var(--ink);border-color:color-mix(in srgb,var(--on) 45%,transparent);
  background:color-mix(in srgb,var(--on) 10%,transparent)}
.sub.on b{color:var(--on)}

.cta{margin:26px 0;padding:18px;border:1px dashed var(--line);border-radius:12px;background:var(--panel)}
.cta h2{margin:0 0 6px;font-size:16px}
.cta p{margin:0;color:var(--dim);font-size:13.5px}
.cta .soon{margin-top:8px;color:var(--gold);font-size:12.5px}

.foot{margin:36px auto 40px;color:#6f7690;font-size:12px}
.foot p{margin:4px 0}

@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .space{margin:10px 0 0;gap:16px}
}

/* ── 확장 프로그램 안내 ─────────────────────────────────── */
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0}
.btn{display:inline-block;padding:11px 22px;border-radius:8px;background:var(--gold);color:#1a1406;
  font-weight:700;font-size:15px;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn.alt{padding:10px 21px;background:transparent;color:var(--gold);border:1px solid var(--gold)}   /* 두 번째 버튼(파이어폭스) */
.btn.alt:hover{filter:none;background:color-mix(in srgb,var(--gold) 10%,transparent)}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.dim{color:var(--dim);font-size:12.5px}
.small{font-size:12px}

.cta{margin:26px 0;padding:20px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 7%,var(--panel)),var(--panel))}
.cta h2{margin:4px 0 14px;font-size:19px}
.compare{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.compare .col{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.compare .col.plus{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.compare h3{margin:0 0 9px;font-size:13.5px;display:flex;align-items:center;gap:7px}
.tag{padding:1px 7px;border-radius:4px;font-size:10.5px;font-weight:600}
.tag.now{background:var(--line);color:var(--dim)}
.tag.more{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold)}
.compare ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.compare li{font-size:12.5px;padding-left:19px;position:relative;color:var(--ink)}
.compare li::before{position:absolute;left:0;top:0}
.compare li.yes::before{content:"✓";color:var(--on)}
.compare li.no{color:#5d6478;text-decoration:line-through}
.compare li.no::before{content:"×";color:#5d6478}
.cta-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 10px}

/* ── 설치 안내 페이지 ───────────────────────────────────── */
.top .brand{text-decoration:none;color:inherit}
.guide{padding-top:28px;max-width:760px}
.guide .phase + .hint{margin:-2px 0 12px;max-width:none}   /* 단계 묶음 위 안내 한 줄 */
.big{margin:6px 0 8px;font-size:clamp(22px,4vw,28px);line-height:1.3}
.lead{margin:0;color:var(--dim);max-width:60ch}
.phase{margin:30px 0 11px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.safe{margin:18px 0;padding:12px 16px;border-left:2px solid var(--on);border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--on) 8%,transparent);color:var(--dim);font-size:13.5px}
.note{margin:22px 0;padding:12px 16px;border-left:2px solid var(--gold);border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--gold) 8%,transparent);color:var(--dim);font-size:13.5px}
.guide code{font-family:Consolas,ui-monospace,monospace;font-size:13px;color:var(--gold);
  background:var(--panel2);padding:1px 6px;border-radius:5px;border:1px solid var(--line)}
ol.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:9px}
ol.steps[start="3"]{counter-reset:s 2}
ol.steps > li{counter-increment:s;position:relative;padding:13px 16px 13px 54px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;font-size:14px}
ol.steps > li::before{content:counter(s);position:absolute;left:16px;top:13px;width:25px;height:25px;
  border-radius:50%;display:grid;place-items:center;font:600 12.5px Consolas,monospace;
  color:#1a1406;background:var(--gold)}
.sub{display:block;color:var(--dim);font-size:12.5px;margin-top:3px}
.faq{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;overflow:hidden}
.faq td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--dim)}
.faq tr:last-child td{border-bottom:0}
.faq td:first-child{color:var(--ink);width:42%}
.back{display:inline-block;margin-top:26px;font-size:13.5px}

@media (max-width:560px){
  .compare{grid-template-columns:1fr}
  .faq td:first-child{width:auto}
}

/* ── 캐릭터별 통계 ──────────────────────────────────────── */
/* 통계는 넓은 화면을 쓴다 — 좁게 묶으면 카드가 한 줄씩 쌓여 스크롤만 길어진다.
   읽는 글(설명 · 리드문)은 .lead 의 60ch 로 따로 묶여 있다. */
.stats{padding-top:28px}
/* 첫 화면 = 개척 기록 "보유 캐릭터"(history.css .cc)와 같은 카드 격자. 카드를 누르면 격자 대신 그 캐릭터 상세 (?char=, 뒤로 가기) */
.ct{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.ct[hidden]{display:none}
.ct-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#q{flex:0 1 220px;min-width:0;padding:7px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:13px}
#q:focus{outline:none;border-color:var(--gold)}
.ct-chips{display:flex;flex-wrap:wrap;gap:4px}
.ct-chips button{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 9px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12px;color:var(--dim);background:var(--panel);border:1px solid var(--line)}
.ct-chips button.ic{padding:0;width:30px}
.ct-chips button img{width:18px;height:18px;opacity:.75}
.ct-chips button:hover{color:var(--ink)}
.ct-chips button[aria-pressed="true"]{color:var(--gold);border-color:#7b6d4d;background:color-mix(in srgb,var(--gold) 12%,var(--panel))}
.ct-chips button[aria-pressed="true"] img{opacity:1}
.ct-key{font-size:12px;color:var(--dim)}
.ct-key b{color:var(--gold);font-weight:600}
.ct-sort{margin-left:auto;font:inherit;font-size:12px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.ct-total{font-size:12px;margin:0}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:10px}
.cc{display:grid;grid-template-columns:92px minmax(0,1fr);height:132px;padding:0;text-align:left;font:inherit;color:inherit;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s}
.cc:hover{border-color:#a18a5a;transform:translateY(-1px)}
.cc-por{position:relative;overflow:hidden;container-type:size;background:linear-gradient(160deg,#c9925a,#7a4e33)}
.cc.r4 .cc-por{background:linear-gradient(160deg,#8c78c9,#4d3f80)}
/* 반신 그림(376×512)을 개척 기록 카드와 같은 셈으로 — 그림 편집기 "보유 카드"의 --fx · --fy(보일 중심) · --fz(확대) */
.cc-por .art{--a:1.3617;--w:max(calc(var(--fz, 1) * 100cqw), calc(100cqh / 1.3617));
  position:absolute;max-width:none;height:auto;width:var(--w);
  left:clamp(calc(100cqw - var(--w)), calc(50cqw - var(--fx, .5) * var(--w)), 0px);
  top:clamp(calc(100cqh - var(--w) * var(--a)), calc(50cqh - var(--fy, .3) * var(--w) * var(--a)), 0px)}
.cc-por .art.face{inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 30%}
.cc-ico{position:absolute;left:5px;top:5px;display:flex;flex-direction:column;gap:3px}
.cc-ico img{width:20px;height:20px;border-radius:50%;background:rgba(10,12,20,.65);padding:2px}
.cc-nm{position:absolute;left:0;right:0;bottom:0;padding:16px 5px 6px;font-size:12px;font-weight:600;color:#fff;text-align:center;line-height:1.25;
  background:linear-gradient(transparent,rgba(10,12,20,.85));word-break:keep-all;text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* 오른쪽: 사용률(크게, 어느 칸인지) · 막대 · 아래에 보유율 · 표본 */
.cc-in{display:flex;flex-direction:column;gap:3px;padding:9px 10px 8px;min-width:0}
.cu-lab{display:flex;justify-content:space-between;gap:4px;font-size:11px;color:var(--dim);white-space:nowrap}
.cu-lab i{font-style:normal;color:var(--gold);opacity:.85;overflow:hidden;text-overflow:ellipsis}
.cu-big{font-size:24px;font-weight:700;line-height:1.1;color:var(--gold);font-variant-numeric:tabular-nums}
.cu-big.na{font-size:13px;font-weight:500;color:var(--dim);line-height:1.9}
.cu-bar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.cu-bar i{display:block;height:100%;background:var(--gold);border-radius:3px}
.cc-us{margin-top:auto;display:flex;justify-content:space-between;gap:4px;white-space:nowrap;
  font-size:10.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:5px}
.cc-us span{display:flex;flex-direction:column;line-height:1.2}
.cc-us b{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cc-us span:last-child{text-align:right}
/* 상세: 위에 "← 캐릭터 목록" */
.st-detail{margin-top:18px}
.st-detail[hidden]{display:none}
.st-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;font-size:13px;color:var(--dim);text-decoration:none;
  padding:5px 12px 5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.st-back:hover{color:var(--gold);border-color:#7b6d4d}
.st-detail .panel{margin-top:0}

.panel{margin:20px 0 0;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.s-top{display:flex;align-items:center;gap:13px;padding:14px 16px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--el) 22%,transparent),transparent)}
.s-top h3{margin:0;font-size:18px}
.s-top p{margin:2px 0 0;color:var(--dim);font-size:12.5px}
.s-top p b{color:var(--ink)}
.s-body{padding:6px 16px 18px}
.s-body h4{margin:18px 0 9px;font-size:13px;color:var(--gold);letter-spacing:.02em}
.empty{margin:0;padding:18px 16px;color:var(--dim);font-size:13.5px}

.brow{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:10px;align-items:center;margin:5px 0;font-size:12.5px}
.blab{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blab i{font-style:normal;color:var(--gold);font-weight:700}
.tiny{width:26px;height:26px;border-radius:5px;flex:none;object-fit:contain;
  background:color-mix(in srgb,var(--ink) 9%,transparent);padding:1px}
.btrack{height:7px;border-radius:4px;background:var(--panel2);overflow:hidden}
.bfill{display:block;height:100%;background:var(--gold);opacity:.75}
.bnum{white-space:nowrap;font-size:12px}
.bnum i{font-style:normal;font-size:10.5px;opacity:.7}

.spread{margin:4px 0 12px}
.sline{position:relative;height:9px;border-radius:5px;background:var(--panel2)}
.stick{position:absolute;top:0;height:100%;border-radius:5px;background:color-mix(in srgb,var(--gold) 55%,transparent)}
.smed{position:absolute;top:-3px;width:2px;height:15px;background:var(--ink);border-radius:1px}
.sends{display:flex;justify-content:space-between;color:var(--dim);font-size:11.5px;margin-top:4px}
.kv{display:flex;gap:26px;flex-wrap:wrap;margin:0}
.kv dt{color:var(--dim);font-size:11.5px}
.kv dd{margin:1px 0 0;font-size:13.5px}
.kv dd b{font-size:17px;color:var(--gold)}
.subs-avg{display:flex;gap:6px;flex-wrap:wrap}
/* 유효 부옵션 분포: 부옵션마다 작은 막대그래프 (가로축 = 6부위에 붙은 횟수, 모든 부옵션이 같은 눈금) */
.subnote{font-size:12px;margin:-4px 0 10px;max-width:70ch}
/* 한 줄 칸 수(--cols)는 개수로 정한다 — 4개면 2×2 (3칸이면 하나가 혼자 남는다). 좁으면 250px 아래로는 안 줄고 내려간다 */
.subds{--cols:3;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(max(250px,calc((100% - (var(--cols) - 1) * 12px) / var(--cols))),1fr))}
.subd{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px 8px;min-width:0}
.subd-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.subd-h b.g{color:var(--gold);font-size:15px}
.subd .hc i{background:color-mix(in srgb,var(--gold) 32%,transparent)}
.subd .hc.in i{background:var(--gold)}
/* 중앙값 막대는 테두리로 한 겹 키운다 — 아래쪽 테두리는 잘라 가로축 밑으로 튀어나오지 않게 */
.subd .hc.md i{background:#f0cf7e;box-shadow:0 0 0 1px #f0cf7e;clip-path:inset(-2px -2px 0 -2px)}
.subd-f{margin:6px 0 0;font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:6px}
.subd-f .sw{width:9px;height:9px;border-radius:2px;background:var(--gold);flex:none}

@media (max-width:560px){
  .brow{grid-template-columns:minmax(0,1fr) 60px auto}
  .kv{gap:16px}
}
.top .wrap{display:flex;align-items:center;gap:12px}
.nav{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav a{font-size:13px;line-height:1;text-decoration:none;color:var(--dim)}
.nav #langSwitch{display:inline-flex;align-items:center}
.nav a:hover{color:var(--gold)}

/* ── 통계: 무엇을 끼는가 (크게) ─────────────────────────── */
.picks{display:flex;flex-direction:column;gap:8px}
.pick{display:grid;grid-template-columns:auto minmax(0,1fr) 72px;gap:12px;align-items:center;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.pick.first{border-color:color-mix(in srgb,var(--gold) 45%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 9%,var(--panel2)),var(--panel2))}
.pic{width:42px;height:42px;border-radius:7px;object-fit:contain;flex:none;
  background:color-mix(in srgb,var(--ink) 8%,transparent);padding:2px}
.picpair{display:flex;gap:4px}
.picpair .pic{width:36px;height:36px}
.pname{min-width:0}
.pname b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pname i{font-style:normal;color:var(--gold);font-weight:700}
.pname span{display:block;font-size:11.5px;margin-top:1px}
.pmeter{grid-column:2;height:5px;border-radius:3px;background:var(--panel);overflow:hidden;margin-top:6px}
.pmeter span{display:block;height:100%;background:var(--gold);opacity:.7}
.pick.first .pmeter span{opacity:1}
.pnum{grid-column:3;grid-row:1/3;text-align:right;line-height:1.15}
.pnum b{font-size:20px}
.pick.first .pnum b{color:var(--gold)}
.pnum span{display:block;font-size:11px}

/* 보유율 · 엔드콘텐츠 사용률 (성흔 위). 금색 막대 = 사용률, 초록 선 = 가진 사람 중. 설명은 ? 말풍선.
   보유율 % · 사용률 %만 크게 — 나머지 글자는 성흔 칸과 같은 크기 */
.cusage{margin:14px 0 4px}
.uown{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--line)}
.uown b{font-size:36px;line-height:1.1;color:var(--gold)}
.uown span{font-size:12.5px;color:var(--dim)}
.ugrid{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center}
.ulab{font-size:12.5px;color:var(--dim);font-weight:600;white-space:nowrap}
.urow{display:grid;grid-template-columns:1fr 168px;gap:12px;align-items:center}
.ubar{position:relative;height:10px;border-radius:6px;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.ubar.off{opacity:.5}
.ubar i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:var(--gold)}
.ubar u{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--on);border-radius:2px}
.unum{font-size:12.5px;color:var(--dim);white-space:nowrap}
.unum b{color:var(--ink);font-size:19px}
.unum em{font-style:normal;color:var(--on)}
@media (max-width:560px){
  .uown b{font-size:30px}
  .urow{grid-template-columns:1fr 11.6em;gap:8px}
  .unum{text-align:right;font-size:11.5px}
  .unum b{font-size:16px}
}

.eids{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:stretch}
.eid{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px 8px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-size:11px}
.eid.zero{opacity:.3}
.eid.top{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
img.eface{width:40px;height:40px;border-radius:8px;object-fit:contain;
  background:color-mix(in srgb,var(--ink) 8%,transparent);padding:2px}
.eid.zero img.eface{filter:grayscale(1)}
/* 칸 안의 숫자·라벨은 한 덩어리로 묶어 어느 칸이든 같은 높이에서 시작한다 */
.enums{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.25}

/* "전체"는 성흔이 아니므로 성흔 줄에 끼우지 않고 제목 옆에 둔다 */
.eidhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.allbtn{padding:5px 13px;border:1px solid var(--line);border-radius:20px;background:var(--panel2);
  color:var(--dim);font:inherit;font-size:12px;font-weight:400;cursor:pointer;letter-spacing:0}
.allbtn b{color:var(--ink);font-size:12.5px}
.allbtn:hover{border-color:var(--gold)}
.allbtn.sel{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--panel2));color:var(--gold)}
.allbtn.sel b{color:var(--gold)}
.eid b{font-size:13px}
.elab{color:var(--dim);font-weight:600}

@media (max-width:560px){
  .pick{grid-template-columns:auto minmax(0,1fr) 58px;gap:9px}
  .pnum b{font-size:17px}
  .eids{gap:3px}
}

/* 성흔 막대를 누를 수 있게 */

button.eid{cursor:pointer;color:var(--ink);font:inherit;font-size:11px;transition:border-color .12s}
button.eid:hover:not(:disabled){border-color:var(--gold)}
button.eid:disabled{cursor:default}
.eid.sel{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--panel2))}
.filtered{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;padding:9px 12px;
  border-radius:9px;background:color-mix(in srgb,var(--gold) 10%,transparent);font-size:12.5px;color:var(--dim)}
.filtered b{color:var(--gold)}
.clear{padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:transparent;
  color:var(--dim);font-size:12px;cursor:pointer}
.clear:hover{color:var(--ink);border-color:var(--gold)}
@media (max-width:560px){ .eids{grid-template-columns:repeat(4,1fr)} }
.panel.loading{opacity:.45;pointer-events:none;transition:opacity .1s}

/* 캐릭터 이름 → 그 캐릭터의 통계로 */
.c-id h3 a.cname{color:inherit;text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--ink) 35%,transparent)}
.c-id h3 a.cname:hover{color:var(--gold);border-bottom-color:var(--gold)}
/* 성흔 일러스트를 넣은 캐릭터는 그림이 주인공이 되게 크게 */
img.eface.big{width:100%;height:auto;aspect-ratio:1;border-radius:9px;object-fit:cover;padding:0;
  background:color-mix(in srgb,var(--ink) 6%,transparent)}
.eid:has(img.eface.big){padding:0 0 8px;gap:6px;overflow:hidden}
.eid:has(img.eface.big) b{margin-top:2px}
.lang{display:inline-flex;align-items:center;gap:10px;font-size:13px;line-height:1;
  border-left:1px solid var(--line);padding-left:14px}
.lang a{color:var(--dim);text-decoration:none}
.lang a:hover{color:var(--gold)}

/* ── 모집단 통계 (엔드콘텐츠 · 워프) ─────────────────────────
   표본이 모자라면 서버가 세부를 주지 않는다. 화면은 숨기는 대신
   "몇 명 모였는지"를 적어 둔다 — 비어 있는 것과 아직인 것은 다르다. */
.trends{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:18px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.thead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.thead h3{margin:0;font-size:15px}
.thead .dim{font-size:12px;color:var(--dim)}
.thead .n{margin-left:auto;font-size:11.5px;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:1px 9px;white-space:nowrap}
.tkv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px}
.tkv dt{color:var(--dim)}
.tkv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.tbars{display:flex;flex-direction:column;gap:5px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.trow{display:grid;grid-template-columns:minmax(64px,auto) 1fr minmax(48px,auto);
  gap:9px;align-items:center;font-size:12px}
.tlabel{color:var(--ink)}
.tbar{height:7px;border-radius:999px;background:var(--panel2);overflow:hidden}
.tbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#a18a5a,var(--gold))}
.tval{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.trends .empty{grid-column:1/-1;color:var(--dim);font-size:13px;margin:0}
.tcard .empty{color:var(--dim);font-size:12.5px;margin:0;line-height:1.5}

/* 개인정보 처리방침 */
.policydoc h3{margin:30px 0 10px;font-size:17px;scroll-margin-top:16px}
.policydoc ul{padding-left:20px;margin:8px 0}
.policydoc li{margin:6px 0;line-height:1.7}
.policydoc .faq td:first-child{white-space:nowrap}
.toc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:20px 0 6px;font-size:13px}
.toc a{color:var(--dim);text-decoration:none;border-bottom:1px dashed var(--line)}
.toc a:hover{color:var(--gold)}
.policydoc .en{margin-top:34px;padding-top:6px;border-top:1px solid var(--line)}

/* 제목 옆 느낌표 — 집계 기준 같은 긴 안내를 접어 둔다.
   올리기 · 초점 · 누르기(.open)로 열리고, Esc(.shut)로 닫힌다 (ui.js). */
/* 설명 상자는 아이콘이 아니라 제목 줄 기준으로 편다 — 제목이 길어 아이콘이 오른쪽 끝에 붙어도
   화면 밖으로 나가지 않는다 (숨겨 둔 상자도 가로 스크롤을 만든다) */
.titlerow{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.titlerow .big{margin-bottom:8px}
.info{display:inline-flex;margin-top:-2px}
.info-btn{width:22px;height:22px;padding:0;border-radius:50%;cursor:help;display:grid;place-items:center;
  font:700 13px/1 inherit;color:var(--gold);background:var(--panel2);border:1px solid #7b6d4d}
.info-btn:hover,.info.open .info-btn{background:#2e2820}
.info-tip{position:absolute;top:calc(100% - 2px);left:0;z-index:40;width:min(560px,100%);
  padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;
  background:var(--panel2);color:var(--ink);font-size:13px;font-weight:400;line-height:1.65;
  box-shadow:0 10px 28px rgba(0,0,0,.45);opacity:0;visibility:hidden;
  /* 닫힐 때는 잠깐 기다린다 — 마우스를 아이콘에서 설명 위로 옮기는 사이 닫히지 않게 */
  transition:opacity .12s,visibility 0s linear .3s}
.info:is(:hover,:focus-within,.open):not(.shut) .info-tip{opacity:1;visibility:visible;transition-delay:0s}
@media (prefers-reduced-motion:reduce){ .info-tip{transition:none} }
/* 그래프 자리를 비워 두지 않고, 같은 크기의 점선 상자에 "없다"를 적는다 */
.tsec .empty.nolost{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:128px;padding:16px 20px;border:1px dashed var(--line);border-radius:10px;
  background:var(--panel2);font-size:12.5px;line-height:1.6}

/* 모드 탭 · 사용률 · 파티 · 층별 */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:18px;flex-wrap:wrap}
.seg button{padding:7px 15px;border:0;background:var(--panel);color:var(--dim);
  cursor:pointer;font:inherit;font-size:13px;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--panel2);color:var(--gold)}
.trends-detail{display:flex;flex-direction:column;gap:22px;margin-top:20px}
.tsec h4{margin:0 0 10px;font-size:14px}
.tsec h4 .dim{font-weight:400;font-size:12px;color:var(--dim);margin-left:6px}
.tsec .tbars{margin-top:0;padding-top:0;border-top:0}
.tsec .trow{grid-template-columns:168px minmax(0,1fr) 46px}
/* 캐릭터 사용률 줄을 누르면 그 캐릭터 조합만 (trends.js pickUsageChar) */
.trow.cpick{cursor:pointer;border-radius:8px;padding:2px 6px;margin:0 -6px;border:1px solid transparent}
.trow.cpick:hover{background:rgba(255,255,255,.03)}
.trow.cpick[aria-pressed="true"]{border-color:#7b6d4d;background:color-mix(in srgb,var(--gold) 9%,transparent)}
.trow.cpick[aria-pressed="true"] .cn{color:var(--gold)}
/* 고른 캐릭터 조합끼리 나눈 비율 + 아래에 전체 비율 */
.teams.picked li.tm{grid-template-columns:62px auto minmax(0,1fr) auto}
.teams.picked .pct small{display:block;font-size:10px;color:var(--dim);margin-top:1px;white-space:nowrap}
.tpick{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:13px}
.tpick b{color:var(--gold);font-weight:600}
.tpick-x{margin-left:auto;font:inherit;font-size:12px;color:var(--dim);background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer}
.tpick-x:hover{color:var(--ink);border-color:var(--gold)}
.face{display:inline-flex;align-items:center;position:relative;flex:none}
.face img{width:30px;height:30px;border-radius:50%;background:var(--panel2);object-fit:cover;
  border:1px solid var(--line);display:block}
/* 엔드콘텐츠의 캐릭터 타일: 게임과 캐릭터 상세처럼 네모.
   별 등급으로 바탕색이 갈리고, 원본 여백이 넓어 조금 확대해 얼굴 크기를 맞춘다. */
:is(#detail,.egc) .face{width:36px;height:36px;border-radius:8px;overflow:hidden;flex:none;
  border:1px solid var(--line);background:var(--panel2)}
:is(#detail,.egc) .face.r5{background:linear-gradient(165deg,#6a5327,#3a2b1e)}
:is(#detail,.egc) .face.r4{background:linear-gradient(165deg,#4a3a63,#2a2438)}
:is(#detail,.egc) .face img{width:100%;height:100%;border:0;border-radius:0;
  object-fit:cover;object-position:top;transform:scale(1.12)}
.face i{font-style:normal;font-size:9.5px;color:var(--gold);margin-left:2px}
/* 이름 길이가 달라도 막대가 같은 자리에서 시작하도록 첫 칸을 고정한다 */
.tlabel{display:flex;align-items:center;gap:8px;min-width:0}
.tlabel .cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teams{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.teams li{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:10px;align-items:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 12px}
.teams .pct{font-variant-numeric:tabular-nums;color:var(--gold);font-size:13px}
/* 파티마다 인원이 달라도 칸은 넷 — 아이콘이 세로로 줄 맞는다 */
.teams .team{display:grid;grid-template-columns:repeat(4,40px);gap:4px}
/* 이름은 잘라 내지 않고 줄을 바꾼다 — 넷 중 누가 있는지가 요점이다 */
.teams .names{font-size:12px;color:var(--ink);line-height:1.4;word-break:keep-all}
.tfloors{width:100%;border-collapse:collapse;font-size:13px}
.tfloors th{text-align:left;font-weight:500;font-size:11.5px;color:var(--dim);
  padding:0 10px 7px;border-bottom:1px solid var(--line)}
.tfloors th:not(:first-child),.tfloors td.n{text-align:right}
.tfloors td{padding:8px 10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .teams li{grid-template-columns:42px 1fr} .teams .names{display:none}
  .tsec .trow{grid-template-columns:118px minmax(0,1fr) 42px}   /* 좁은 화면에선 막대에 자리를 준다 */
}

/* 엔드콘텐츠: 왼쪽 고르기 패널 + 오른쪽 통계 (theherta식) */
.eg{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;margin-top:20px;align-items:start}
.egside{position:sticky;top:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:10px}
.eghead{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.eghead span::before{content:"// ";color:var(--gold)}
.eghead select{font:inherit;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:4px 6px;max-width:170px}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.modes button{font:inherit;font-size:13px;font-weight:600;line-height:1.25;min-height:54px;padding:8px;cursor:pointer;
  color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:9px;transform:skewX(-6deg)}
.modes button[aria-pressed="true"]{color:var(--ink);border-color:#a18a5a;
  background:linear-gradient(135deg,#3a3326,var(--panel2));box-shadow:inset 3px 0 0 var(--gold)}
.modes button:hover{color:var(--ink)}
.stages{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--bg)}
.stages button{display:flex;align-items:center;gap:9px;text-align:left;font:inherit;cursor:pointer;
  padding:7px 10px;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:8px}
.stages button[aria-pressed="true"]{color:var(--ink);border-color:#a18a5a;box-shadow:inset 3px 0 0 var(--gold);
  background:linear-gradient(90deg,#2c2820,var(--panel))}
.stages button:hover{color:var(--ink)}
.stgroup{margin:6px 2px 0;font-size:10.5px;letter-spacing:.14em;color:var(--dim)}
.stgroup::before{content:"// ";color:var(--gold)}
.stgroup:first-child{margin-top:0}
.stages button.hard{border-color:#6b3a3a;background:linear-gradient(90deg,#3a2224,var(--panel))}
.stages button.hard[aria-pressed="true"]{border-color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}
.stages img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--panel2);flex:none}
.stx{display:flex;flex-direction:column;min-width:0;flex:1}
.stx b{font-size:13px;font-weight:600}
.stx em{font-style:normal;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stn{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.egmain{margin-top:0;min-width:0}
/* 워프 배너 카드 — 일러스트를 깔고 왼쪽에 이름, 오른쪽 위에 버전 */
.banner{position:relative;display:flex;align-items:flex-end;min-height:168px;padding:20px 22px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  /* 일러스트는 376×512 세로 그림이다. 높이를 카드의 세 배쯤으로 키우고 얼굴께가 보이게 내린다 */
  background:linear-gradient(95deg,var(--panel) 30%,rgba(23,26,37,.7) 56%,rgba(23,26,37,.1) 100%),
             var(--art, none) right 0 top 22%/auto 200% no-repeat, var(--panel2)}
.banner.plain{background:linear-gradient(120deg,var(--panel2),var(--panel));min-height:120px}
/* 상대 그림은 160px짜리다 — 늘이지 않고 제 크기로 오른쪽에 둔다 */
.banner.boss{background:linear-gradient(95deg,var(--panel) 34%,rgba(23,26,37,.7) 62%,rgba(23,26,37,.25) 100%),
             var(--art, none) right 4% center/auto 104% no-repeat, var(--panel2)}
/* 배너용 큰 상대 그림(960×320, 3:1 · 그림 편집기에서 맞춘 자리) — 오른쪽에 배너 높이에 맞춰 그대로, 뒤에 은은한 빛.
   폭이 아니라 높이에 맞추므로 화면 폭이 달라도 보이는 곳이 같다 (좁은 화면은 흐려지는 왼쪽 가장자리만 잘린다).
   그림은 ::before에 따로 깔고 왼쪽 · 아래 가장자리를 투명하게 풀어, 그림의 테두리(잘린 선)가 보이지 않게 한다 */
.banner.boss.big{background:radial-gradient(circle at 84% 42%,rgba(229,180,92,.14),transparent 42%),var(--panel2)}
.banner.boss.big::before{content:"";position:absolute;top:0;right:0;height:100%;aspect-ratio:3/1;pointer-events:none;
  background:var(--art, none) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(0deg,transparent 0,#000 22%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(0deg,transparent 0,#000 22%);
  mask-composite:intersect}
.banner .bmeta{position:relative;max-width:60%}
/* 워프 배너: 종류 · 이름은 위, 숫자 줄은 아래 (엔드콘텐츠 보스 배너는 글자가 아래 그대로) */
.banner.warp{align-items:stretch}
.banner.warp .bmeta{display:flex;flex-direction:column}
.banner.warp .bsum{margin-top:auto;padding-top:14px}
.banner p{margin:0;font-size:12px}
.banner h3{margin:3px 0 0;font-size:26px;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.banner .bsum{margin-top:6px;color:var(--ink);font-size:12.5px;opacity:.85}
.bver{position:absolute;top:14px;right:16px;font-size:11.5px;color:var(--gold);
  border:1px solid #7b6d4d;border-radius:999px;padding:3px 10px;background:rgba(16,18,26,.6)}
.stn .ver{font-style:normal;display:block;font-size:10px;color:var(--gold);opacity:.85}
/* 목록 한 줄도 작은 배너 — 오른쪽에 그림, 왼쪽으로 어둡게 */
/* 그림은 바탕으로만 — 이름과 숫자가 이겨야 한다 */
.stages button.bnr{padding:10px 14px;min-height:58px;border-radius:10px;
  background:linear-gradient(90deg,var(--panel) 46%,rgba(23,26,37,.9) 72%,rgba(23,26,37,.72) 100%),
             var(--art, none) right -4% top 26%/auto 180% no-repeat, var(--panel)}
.stages button.bnr.noart{background:linear-gradient(110deg,var(--panel2),var(--panel))}
.stages button.bnr[aria-pressed="true"]{border-color:#a18a5a;
  background:linear-gradient(90deg,#2e2820 46%,rgba(46,40,32,.9) 72%,rgba(46,40,32,.7) 100%),
             var(--art, none) right -4% top 26%/auto 180% no-repeat, var(--panel)}
.stages button.bnr .stx b,.stages button.bnr .stn{text-shadow:0 1px 6px rgba(16,18,26,.9)}
/* 이상중재 킹 · 절망은 붉은 결을 지킨다 */
.stages button.bnr.hard{background:linear-gradient(90deg,#3a2224 46%,rgba(58,34,36,.9) 72%,rgba(58,34,36,.72) 100%),
  var(--art, none) right -4% top 26%/auto 180% no-repeat, var(--panel)}
.stages button.bnr.hard[aria-pressed="true"]{border-color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}
.stages button.bnr .stx b{font-size:13.5px}
.stages button.bnr .stn{text-align:right}
.trends-detail > .banner + .tgrid{margin-top:0}
@media (max-width:560px){ .banner{min-height:140px} .banner h3{font-size:21px} .banner .bmeta{max-width:72%}
  /* 좁은 화면은 그림이 글자 밑까지 온다 — 왼쪽을 더 길게 풀어 글자가 읽히게 */
  .banner.boss.big::before{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 30%,#000 62%),linear-gradient(0deg,transparent 0,#000 22%);
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 30%,#000 62%),linear-gradient(0deg,transparent 0,#000 22%)} }

.stagehead{display:flex;align-items:center;gap:14px}
.stagehead img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--panel2);border:1px solid var(--line)}
.stagehead p{margin:0;font-size:12px}
.stagehead h3{margin:2px 0 0;font-size:20px}
@media (max-width:820px){ .eg{grid-template-columns:1fr} .egside{position:static} }

/* 회차 고르기 — 최신이 맨 앞 */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chips button{font:inherit;font-size:12.5px;padding:5px 12px;border-radius:999px;cursor:pointer;
  background:var(--panel);color:var(--dim);border:1px solid var(--line)}
.chips button span{font-size:11px;opacity:.7;margin-left:4px}
.chips button[aria-pressed="true"]{color:var(--gold);border-color:#7b6d4d;background:var(--panel2)}

/* 분포 — 원그래프 · 막대 */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.tgrid .tsec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-width:0}
.tgrid .tsec.wide{grid-column:1/-1}
.donut{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut svg{width:150px;height:150px;flex:none}
.donut path{cursor:default}
.donut path:hover{opacity:.85}
.donut .dn{fill:var(--ink);font-size:22px;font-weight:600}
.donut .dl{fill:var(--dim);font-size:11px}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;flex:1;min-width:150px}
.legend li{display:grid;grid-template-columns:12px 1fr auto 38px;gap:8px;align-items:center}
.legend li.zero{opacity:.45}
.legend i{width:10px;height:10px;border-radius:3px}
.legend b{font-weight:500;font-variant-numeric:tabular-nums}
.legend em{font-style:normal;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}
.hist{margin-top:4px}
.hbars{display:flex;align-items:stretch;gap:2px;height:var(--h);padding-top:14px;border-bottom:1px solid var(--line)}
.hc{flex:1 1 0;min-width:4px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.hc i{display:block;width:100%;max-width:24px;background:var(--gold);border-radius:4px 4px 0 0}
.hc:hover i{background:#f0cf7e}
.hc:hover{background:rgba(255,255,255,.03)}
.hv{font-size:10.5px;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:2px;line-height:1}
.hx{display:flex;gap:2px;margin-top:4px}
.hx span{flex:1 1 0;min-width:4px;text-align:center;font-size:10px;color:var(--dim);white-space:nowrap;overflow:visible}
.sub{margin:14px 0 4px;font-size:12px;font-weight:500;color:var(--dim)}
.axisnote{font-size:11.5px;color:var(--dim);margin:8px 0 0}
/* 접힌 묶음 — 숨김은 hidden 속성이 한다. 여기에 display를 걸면 찾기(until-found)가 깨진다 */
.foldbox > .tbars{margin-top:5px}
.foldbox > .teams{margin-top:7px}
/* .more는 UID 조회의 "유물 6부위 보기"도 쓰는 이름이라 통계 카드 안으로만 좁힌다 */
:is(.tsec,.egc) .more{display:block;width:100%;margin-top:10px;padding:7px;cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:8px}
:is(.tsec,.egc) .more:hover{color:var(--gold)}

/* 캐릭터별 통계 · 엔드콘텐츠 조합 */
.egc{margin-top:26px;padding-top:4px;border-top:1px solid var(--line)}
.egc .egnote{margin:-3px 0 12px;font-size:12px;line-height:1.5}
.egtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.egtab{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line);border-radius:20px;
  background:var(--panel2);color:var(--dim);font:inherit;font-size:12.5px;cursor:pointer}
.egtab b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.egtab:hover{border-color:var(--gold)}
.egtab[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);
  background:color-mix(in srgb,var(--gold) 14%,var(--panel2))}
.egtab[aria-pressed="true"] b{color:var(--gold)}
.eguse{margin:0 0 8px;font-size:13px;color:var(--dim)}
.eguse b{color:var(--ink)}
.egeids{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;font-size:12px}
.egeids .bp.sel{outline:1px solid var(--gold)}
.egc .egf{margin:0 0 10px;font-size:12px}
.egc .empty{padding:12px 0}
/* 이 캐릭터가 파티 어디에 섰는지 */
.egc .face.me{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.small{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mini h5{margin:0 0 6px;font-size:12.5px;font-weight:500}
.mini h5 .dim{color:var(--dim);font-weight:400;margin-left:4px}
.usage{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin-top:14px;align-items:start}
.usage .tsec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-width:0}
.vtip{position:fixed;z-index:50;pointer-events:none;background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-size:12px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
/* 긴 설명(? 말풍선)은 줄을 바꿔 좁게 — 짧은 막대 숫자는 그대로 한 줄 */
.vtip.long{white-space:pre-line;width:max-content;max-width:min(300px,calc(100vw - 16px));line-height:1.55;padding:8px 11px}

/* 워프 통계: 공개 전 배너 — 흐리게, 누를 수 없다 */
.stages button.bnr.locked{opacity:.45;cursor:default;filter:grayscale(.6)}
.stages button.bnr.locked:hover{transform:none}
.stages button.bnr.locked em{font-style:normal}

/* 워프 통계: 뭇별 · 초보자 "많이 나온 5성" */
.tsec.wide{grid-column:1 / -1}
.toplist{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 22px}
.toplist li{display:grid;grid-template-columns:30px minmax(90px,150px) 1fr 52px;gap:10px;align-items:center}
#detail .toplist .face{width:30px;height:30px}
.toplist .tl-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toplist .tl-bar{height:8px;border-radius:4px;background:var(--panel2,#232a40);overflow:hidden}
.toplist .tl-bar i{display:block;height:100%;border-radius:4px;background:#d9b46a}
.toplist .tl-n{text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.toplist .tl-n small{display:block;font-size:11px;opacity:.6}

/* ── 세팅 요약 (캐릭터 통계 "이 정도면 깬다" · 엔드콘텐츠 조합 펼치기) — party.js summaryHtml ── */
.egtab.off{opacity:.45;border-style:dashed;cursor:default}
.egtab.off:hover{border-color:var(--line)}
.tgrp{margin:0 0 5px;font-size:11px;color:var(--dim);letter-spacing:.02em}
.bs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:4px 0 10px}
.bs-stats.compact{grid-template-columns:1fr;margin:6px 0 6px}
.bs-st{display:flex;flex-direction:column;gap:2px;min-width:0;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;font-size:11.5px}
.bs-stats.compact .bs-st{background:none;border:0;padding:0}
.bs-n{color:var(--dim);font-size:12px}
.bs-st > b{font-size:19px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.25}
.bs-goalnote{color:var(--gold);font-weight:600}
.bs-spd{margin:6px 0 4px}
.bs-bars{position:relative;display:flex;align-items:flex-end;gap:2px;height:38px;border-bottom:1px solid var(--line)}
.bs-bars i{flex:1 1 0;min-width:3px;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--gold) 35%,transparent)}
.bs-bars i.hi{background:var(--gold)}
.bs-goal{position:absolute;top:-4px;bottom:-4px;border-left:1.5px dashed #d8846a;pointer-events:none}
.bs-goal em{position:absolute;top:-12px;left:3px;font-style:normal;font-size:10px;color:#d8846a}
.bs-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:2px}
.bs-wait{margin:2px 0 10px;font-size:12px;color:var(--dim)}
.bs-chips{display:flex;flex-wrap:wrap;gap:6px}
.bs-chip{font-size:12px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:4px 9px}
.bs-chip b{color:var(--ink);font-weight:600}
/* 엔드콘텐츠 조합: 누르면 그 아래로 펼친다 */
.teams li.tm{grid-template-columns:44px auto minmax(0,1fr) auto;cursor:pointer}
.teams li.tm:hover{border-color:var(--gold)}
.teams li.tm:focus-visible{outline:1px solid var(--gold)}
.teams li.tm .chev{color:var(--dim);font-size:11px;transition:transform .15s}
.teams li.tm[aria-expanded="true"]{border-color:var(--gold);border-bottom-left-radius:0;border-bottom-right-radius:0}
.teams li.tm[aria-expanded="true"] .chev{transform:rotate(180deg)}
.teams li.tdet{display:block;margin-top:-7px;border-top:0;border-top-left-radius:0;border-top-right-radius:0;
  border-color:var(--gold);background:var(--panel);padding:12px}
.teams li.tdet[hidden]{display:none}   /* 위의 display:block이 hidden을 덮지 않게 — 접기가 안 되던 것 */
.tdsum{margin:0 0 10px;font-size:13px;color:var(--ink)}
/* 멤버는 넷이 보통이라 한 줄에 둘 (2×2). 좁으면 150px 아래로 줄지 않고 하나씩 */
.tdcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(150px,calc(50% - 4px)),1fr));gap:8px}
.tdm{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 10px;min-width:0}
.tdm-h{display:flex;align-items:center;gap:7px;font-size:12.5px}
.tdm-h .face{width:28px;height:28px}
.tdm-e{margin:6px 0 0;font-size:11.5px;color:var(--dim)}
.tdm-e b{color:var(--ink);font-weight:600}
.tdm .bs-chips{flex-direction:column;gap:4px}
.tdm .bs-chip{font-size:11.5px;padding:3px 7px}
.tdnote{margin:10px 0 0;font-size:11.5px}
/* 조합 펼치기 — 파티 한 줄씩 (이름 · UID 없이) */
.plist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.prow{display:grid;grid-template-columns:54px repeat(4,minmax(0,1fr));gap:6px;align-items:center;padding:8px 10px;
  background:var(--panel2);border-top:1px solid var(--line)}
.prow:first-child{border-top:0}
.prd{text-align:center;font-size:11px;color:var(--dim);line-height:1.3}
.prd b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.prd em{display:block;font-style:normal;font-size:10px;color:#d8846a}
.prd .prd-s{display:block;font-size:10px;color:var(--dim)}
/* 종합에서 어느 칸(파티 1 · 2 · 3)의 기록인지 */
.prd .pno{--c:var(--ink);display:inline-block;margin-bottom:4px;padding:1px 7px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 14%,var(--panel2));
  font-size:10.5px;font-weight:600;color:var(--c);white-space:nowrap}
/* 칸마다 색 — 금색(코스트) · 초록(가진 사람) · 주황(절망)과 겹치지 않게 파랑 · 보라 · 분홍 */
.prd .pno.n1{--c:#7fb2f2}
.prd .pno.n2{--c:#b99af2}
.prd .pno.n3{--c:#f08fb8}
.prd .pcost{display:block;margin-top:3px;font-size:10.5px;font-weight:600;color:var(--gold);white-space:nowrap;cursor:help}
.prd .pcost i{font-style:normal;font-weight:400;color:var(--dim)}
/* 망각의 정원 라운드가 왜 합계인지 — 올리면 설명 (ui.js data-tip) */
.qd{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:4px;border-radius:50%;vertical-align:1px;
  border:1px solid var(--line);color:var(--dim);font-size:10.5px;font-weight:600;cursor:help}
.qd:hover,.qd:focus{color:var(--ink);border-color:var(--gold);outline:none}
.pm{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.pf{position:relative;display:inline-block}
.pf .face{width:44px;height:44px}
.pe{position:absolute;right:-5px;bottom:-4px;font-style:normal;font-size:10px;font-weight:700;line-height:1;
  padding:2px 4px;border-radius:4px;background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.pe.six{color:var(--gold);border-color:var(--gold)}
.pg{display:flex;align-items:center;gap:3px}
.plc{margin-right:5px}   /* S 배지가 옆 세트 아이콘을 덮지 않게 */
.plc{position:relative;display:inline-block}
.plc img{width:24px;height:24px;border-radius:5px;background:var(--panel);display:block}
.plc i{position:absolute;right:-5px;bottom:-5px;font-style:normal;font-size:9px;font-weight:700;color:var(--dim);
  background:var(--bg);border-radius:3px;padding:0 2px}
.pset{width:20px;height:20px;border-radius:50%;background:var(--panel)}
@media (max-width:560px){ .prow{grid-template-columns:40px repeat(4,minmax(0,1fr));gap:4px;padding:7px 6px}
  .pf .face{width:38px;height:38px} }

/* 캐릭터 통계 맨 위 두 카드 (stats.js buildCards) — 이렇게 많이 키워요 · 스탯 목표 */
.cb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:16px 0 4px}
.cb-card{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:14px 16px}
.cb-card h4{display:flex;align-items:baseline;gap:6px;margin:0 0 12px;font-size:13px;color:var(--gold)}
.cb-card h4 small{margin-left:auto;font-weight:400;font-size:11px;color:var(--dim)}
.cb-build{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start}
.cb-lc{position:relative;border-radius:10px;overflow:hidden;background:var(--bg);aspect-ratio:3/4.2}
.cb-lc img{width:100%;height:100%;object-fit:cover;display:block}
.cb-lc .cb-pc{position:absolute;left:6px;bottom:6px;padding:2px 6px;border-radius:6px;background:rgba(10,12,20,.85)}
/* 칸이 좁아(96px) 글자 단위로 끊기면 "아름답도 / 록"이 된다 — 낱말 단위로 끊고 두 줄 길이를 고르게 */
.cb-lcn{margin:7px 0 0;font-size:12.5px;font-weight:600;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.cb-lcn small{display:block;font-weight:400;font-size:11px;color:var(--dim)}
.cb-sets{display:flex;flex-direction:column;gap:9px;padding-top:2px}
.cb-set{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center}
.cb-set img{width:38px;height:38px;border-radius:9px;background:var(--bg)}
.cb-set b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-set small{font-size:11px;color:var(--dim)}
.cb-pc{font-size:12px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.cb-mains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:12px}
.cb-main{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:7px 10px;min-width:0}
.cb-main.split{border-color:color-mix(in srgb,var(--gold) 35%,var(--line))}
.cb-pos{font-size:10.5px;color:var(--dim)}
.cb-v{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:2px;min-width:0}
.cb-v b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-main .cb-pos em{font-style:normal;margin-left:6px;font-size:10px;font-weight:600;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:4px;padding:0 4px;vertical-align:1px}
.cb-alt{margin-top:2px;font-size:10.5px;color:var(--dim);line-height:1.4}
.cb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cb-st{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.cb-nm{font-size:11.5px;color:var(--dim)}
.cb-big{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin:1px 0 3px}
.cb-cut{font-size:11.5px;color:var(--dim)}
.cb-cut span{display:block;font-size:10.5px;margin-top:1px}
.cb-cut b{color:var(--gold)}
.cb-mini{position:relative;height:6px;margin-top:7px;border-radius:3px;background:var(--line)}
.cb-mini span{position:absolute;top:0;height:6px;border-radius:3px;background:color-mix(in srgb,var(--gold) 55%,transparent)}
.cb-mini i{position:absolute;top:-3px;width:2px;height:12px;background:var(--gold);border-radius:1px}
.cb-subs{margin-top:12px}
.cb-t{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--dim);margin-bottom:6px}
.cb-bar{display:flex;height:22px;border-radius:6px;overflow:hidden;gap:2px}
.cb-bar span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#10121a;white-space:nowrap;overflow:hidden}
.cb-wait{margin:4px 0 0;font-size:12px;color:var(--dim);line-height:1.6}
@media (max-width:560px){ .cb-mains{grid-template-columns:1fr 1fr} .cb-build{grid-template-columns:84px minmax(0,1fr)} }

/* 캐릭터 통계 광추 필터 (stats.js lcFilter) — 성흔 카드 아래 아이콘 한 줄 */
.lf{margin:14px 0 2px}
.lf-h{display:block;font-size:12.5px;font-weight:700;color:var(--gold);margin-bottom:8px}
.lf-row{display:flex;gap:8px;flex-wrap:wrap}
.lf-i{display:flex;flex-direction:column;align-items:center;gap:3px;font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--dim)}
.lf-i img,.lf-all{width:46px;height:46px;border-radius:10px;background:var(--panel2);box-shadow:0 0 0 1px var(--line)}
.lf-all{display:grid;place-items:center;font-size:11.5px}
.lf-i small{font-size:11px;font-variant-numeric:tabular-nums}
.lf-i:hover img,.lf-i:hover .lf-all{box-shadow:0 0 0 1px var(--gold)}
.lf-i.sel img,.lf-i.sel .lf-all{box-shadow:0 0 0 2px var(--gold)}
.lf-i.sel small{color:var(--gold);font-weight:700}
.pick.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.cb-set small em{font-style:normal;margin-left:6px;font-size:10px;font-weight:600;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:4px;padding:0 4px}
.cb-set .cb-alt{display:block;margin-top:1px}
/* 캐릭터 통계 접는 칸 (유효 부옵션 분포) */
.sfold{margin-top:4px}
.sfold summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.sfold summary::-webkit-details-marker{display:none}
.sfold summary h4{margin:18px 0 9px}
.sfold .sf-h{margin-top:9px;font-size:11.5px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:1px 10px}
.sfold .sf-h::after{content:" ▾"}
.sfold[open] .sf-h{display:none}
.sfold summary:hover .sf-h{color:var(--ink);border-color:var(--gold)}

/* ── 폰(560px 아래) 촘촘하게 — 2026-10-25 모바일 정리 ─────────────────
   데스크톱 크기를 그대로 쓰면 머리말이 다섯 줄, 카드 안 카드 여백이 겹쳐 내용 폭이 줄고 파티 줄이 잘렸다.
   여기 규칙은 맨 끝에 두어 위의 같은 이름 규칙보다 이긴다. */
@media (max-width:560px){
  /* 머리말: 로고 + 이름 한 줄(오른쪽에 언어), 메뉴는 아래 한 줄 — 넘치면 옆으로 민다 */
  .top{padding:10px 0 0}
  .top .wrap{position:relative;flex-wrap:wrap;gap:0}
  .brand{gap:9px;min-height:34px}
  .mark{width:32px;height:32px}
  .brand h1{font-size:16px;white-space:nowrap}
  .brand p{display:none}
  .nav{width:calc(100% + 32px);margin:8px -16px 0;padding:9px 16px 10px;gap:18px;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:13.5px;white-space:nowrap;flex:none}
  .nav #langSwitch{position:absolute;top:0;right:16px;height:34px}
  .lang{border-left:0;padding-left:0;gap:12px;font-size:12.5px}

  /* 페이지 제목 · 설명도 한 단계 작게 */
  .stats,.guide{padding-top:18px}
  .big{font-size:22px;margin:2px 0 4px}
  .lead{font-size:13.5px;line-height:1.55}

  /* 카드 안의 카드 여백을 줄여 내용 폭을 되찾는다 */
  .s-top{padding:12px}
  .s-body{padding:4px 12px 14px}
  .cb-card{padding:12px}
  .tgrid .tsec,.usage .tsec{padding:14px 12px}
  .teams li.tdet{padding:8px}

  /* 캐릭터 통계 카드 격자: 두 장씩 */
  .ct,.st-detail{margin-top:14px}
  #q{flex:1 1 100%}
  .ct-sort{margin-left:0}
  .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cc{grid-template-columns:66px minmax(0,1fr);height:124px}
  .cc-in{padding:7px 8px}
  .cu-big{font-size:21px}

  /* 파티 상세 줄: 라운드 · 코스트는 위 한 줄, 아래에 넷이 칸을 나눠 쓴다 (전에는 "8 코스트"와 세트 아이콘이 잘렸다) */
  .prow{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 4px;padding:8px 6px 9px}
  .prd{grid-column:1/-1;display:flex;align-items:baseline;gap:5px;text-align:left;font-size:11.5px;padding:0 2px}
  .prd b{display:inline;font-size:15px}
  .prd em,.prd .prd-s{display:inline;font-size:10.5px}
  .prd .pno{margin:0 4px 0 0}
  .prd .pcost{display:inline;margin:0 0 0 auto;font-size:11px}
  .pf .face{width:40px;height:40px}
  .pg{gap:2px;flex-wrap:wrap;justify-content:center}
  .plc{margin-right:4px}
  .plc img{width:20px;height:20px}
  .plc i{font-size:8.5px;right:-4px;bottom:-4px}
  .pset{width:17px;height:17px}

  /* 엔드콘텐츠 · 워프 왼쪽 고르기 패널: 모드 단추 · 큰 배너를 낮게 */
  .eg{margin-top:14px;gap:14px}
  .egside{padding:10px;gap:8px;border-radius:12px}
  .modes button{min-height:40px;padding:6px;font-size:12.5px}
  .banner{min-height:112px;padding:14px 16px}
  .banner.plain{min-height:90px}

  /* 워프 배너 목록: 두 줄로, 낮게, 일정 높이만 보이고 안에서 스크롤 (전에는 49장을 다 내려야 통계가 나왔다) */
  body[data-kind="warp"] .stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;
    max-height:300px;overflow-y:auto;padding:6px}
  body[data-kind="warp"] .stgroup{grid-column:1/-1}
  body[data-kind="warp"] .stages button.bnr{min-height:46px;padding:6px 9px;gap:6px;border-radius:8px}
  body[data-kind="warp"] .stages button.bnr .stx b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-kind="warp"] .stx em{font-size:10.5px}
  body[data-kind="warp"] .stn{font-size:10.5px}
  body[data-kind="warp"] .stn .ver{font-size:9.5px}
}