:root{
  --bg:#0e1116; --bg2:#151a22; --bg3:#1c232e; --line:#2a3340;
  --fg:#e6ecf3; --fg-dim:#96a3b4; --fg-dim2:#6b7889;
  --acc:#ffc94d; --acc2:#4da3ff; --ok:#5ddc7a; --purple:#b47dff;
  --dice:#ffc94d; --rune:#4da3ff; --passive:#5ddc7a; --perk:#b47dff;
  --danger:#ff6b6b;
  --radius:10px;
}
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;
  /* dvh 로 모바일 브라우저의 주소창 접힘까지 반영. 미지원 환경은 vh 로 폴백 */
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  background:var(--bg); color:var(--fg);
  font:14px/1.5 "Pretendard","Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex; flex-direction:column;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:20px; position:relative;
  padding:25px 18px 10px; background:var(--bg2);
  border-bottom:1px solid var(--line); flex:none;
}
.brand{display:flex; align-items:center; gap:9px; font-size:17px}
.brand .logo{font-size:22px}
.brand .title b{color:var(--acc)}
/* 폭이 모자라면 항상 가로 스크롤 — 어떤 폭에서도 상단바가 화면을 밀지 않게 */
.tabs{
  display:flex; gap:4px; flex:1 1 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap}
.tab{
  background:none; border:1px solid transparent; color:var(--fg-dim);
  padding:7px 14px; border-radius:var(--radius); cursor:pointer; font-size:14px;
}
.tab:hover{color:var(--fg); background:var(--bg3)}
.tab.active{color:#111; background:var(--acc); font-weight:600}
.langs select{
  background:var(--bg3); color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px;
}

/* min-width:0 이 없으면 넓은 표가 플렉스 컨테이너를 통째로 늘려 페이지가 가로로 넘친다 */
main{flex:1; min-height:0; min-width:0; display:flex; overflow:hidden}
.view{display:none; flex:1; min-height:0; min-width:0; flex-direction:column; overflow:hidden}
.view.active{display:flex}

/* ---------- toolbar ---------- */
.toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--line); background:var(--bg2); flex:none;
}
.toolbar input[type=search]{
  background:var(--bg3); border:1px solid var(--line); color:var(--fg);
  padding:7px 12px; border-radius:8px; min-width:220px;
}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  background:var(--bg3); border:1px solid var(--line); color:var(--fg-dim);
  padding:5px 12px; border-radius:99px; cursor:pointer; font-size:13px;
}
.chip:hover{color:var(--fg)}
.chip.on{background:var(--acc); border-color:var(--acc); color:#111; font-weight:600}
.btn{
  background:var(--bg3); border:1px solid var(--line); color:var(--fg);
  padding:7px 14px; border-radius:8px; cursor:pointer;
}
.btn:hover{border-color:var(--acc)}
.btn.danger:hover{border-color:var(--danger); color:var(--danger)}
.count,.hint{color:var(--fg-dim2); font-size:12px}
.toggle{display:flex; align-items:center; gap:6px; color:var(--fg-dim); font-size:13px}
.legend{display:flex; gap:10px; font-size:12px}
.lg::before{content:""; display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px}
.lg-dice::before{background:var(--dice)} .lg-rune::before{background:var(--rune)}
.lg-passive::before{background:var(--passive)} .lg-perk::before{background:var(--perk)}

/* ---------- dice codex ---------- */
.dice-grid{
  flex:1; overflow:auto; padding:18px;
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  align-content:start;
}
.dcard{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; cursor:pointer; transition:.12s; position:relative;
}
.dcard:hover{border-color:var(--acc); transform:translateY(-2px)}
.dcard .icon{
  width:100%; height:96px; display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
.dcard .icon img{max-height:96px; max-width:100%; image-rendering:auto}
.dcard .icon .ph{
  width:64px; height:64px; border-radius:12px; background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  color:var(--fg-dim2); font-size:22px; font-weight:700;
}
.dcard .nm{font-weight:600; margin-bottom:3px}
.dcard .sub{font-size:12px; color:var(--fg-dim2)}
.dcard .grp{
  position:absolute; top:10px; right:10px; font-size:10px;
  padding:2px 7px; border-radius:99px; background:var(--bg3); color:var(--fg-dim);
}
.dcard.off{opacity:.5}
.dcard .unused{
  position:absolute; top:10px; left:10px; font-size:10px;
  padding:2px 7px; border-radius:99px;
  background:rgba(255,107,107,.18); color:var(--danger);
}

/* ---------- modal ---------- */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal .box{
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  max-width:660px; width:100%; max-height:86vh; overflow:auto; padding:22px;
}
.modal h2{margin:0 0 4px}
.modal .close{float:right; cursor:pointer; color:var(--fg-dim); font-size:20px; line-height:1}

/* ---------- stat table ---------- */
.stats{width:100%; border-collapse:collapse; margin-top:12px; font-size:13px}
.stats td{padding:6px 8px; border-bottom:1px solid var(--line)}
.stats td:first-child{color:var(--fg-dim); width:44%}
.stats tr:last-child td{border-bottom:none}

/* ---------- tree ---------- */
.tree-wrap{flex:1; min-height:0; display:flex; position:relative}
.tree-wrap svg{
  flex:1; cursor:grab; touch-action:none;
  background:radial-gradient(circle at 50% 40%, #1b1730 0%, #0e1116 72%);
  -webkit-user-select:none; user-select:none;
}
.tree-wrap svg *{-webkit-user-select:none; user-select:none}
.tree-wrap svg.grabbing{cursor:grabbing}
/* 노드 상세 — 항상 자리를 차지하지 않고, 선택했을 때만 떠오른다 */
.node-panel{
  position:absolute; top:0; right:0; bottom:0; width:352px;
  background:var(--bg2); border-left:1px solid var(--line);
  box-shadow:-14px 0 34px rgba(0,0,0,.45);
  overflow:auto; padding:16px 16px 28px;
  transform:translateX(104%); transition:transform .18s ease;
  visibility:hidden; z-index:5;
}
.node-panel.open{transform:none; visibility:visible}
.panel-close{
  position:sticky; top:0; float:right; margin:-4px -4px 0 0;
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:15px;
  background:var(--bg3); border:1px solid var(--line); color:var(--fg-dim); z-index:2;
}
.panel-close:hover{color:var(--fg); border-color:var(--acc)}
.node-panel .empty{color:var(--fg-dim2); text-align:center; padding:36px 0}

/* 시뮬레이터 합계 — 툴바에 상시 표시 */
.totals-bar{
  display:flex; gap:14px; flex-wrap:wrap; margin-left:auto;
  background:var(--bg3); border-radius:9px; padding:6px 12px; font-size:12.5px;
}
.totals-bar .row{display:flex; gap:6px; align-items:baseline}
.totals-bar .row span{color:var(--fg-dim2)}
.totals-bar .row b{color:var(--acc); font-variant-numeric:tabular-nums}
.node-panel h3{margin:0 0 2px; font-size:17px}
.node-panel .kind{font-size:12px; color:var(--fg-dim2); margin-bottom:10px}
.node-panel .desc{
  background:var(--bg3); border-radius:8px; padding:10px; font-size:13px;
  line-height:1.6; margin:10px 0;
}
.tag{
  display:inline-block; padding:0 6px; border-radius:5px;
  font-size:11px; font-weight:700; vertical-align:middle;
}

/* svg node styling */
.n-hit{cursor:pointer}
.edge{stroke:#33404f; stroke-width:9; fill:none; stroke-linecap:round}
.edge.on{stroke:#7d94ad; stroke-width:11}
.n-lab{
  text-anchor:middle; fill:#0c0f14; font-weight:700;
  pointer-events:none; dominant-baseline:central;
}
.n-name{text-anchor:middle; fill:#c9d5e2; pointer-events:none}
.n-rank{
  text-anchor:middle; dominant-baseline:central; font-size:44px;
  font-weight:700; fill:#0c0f14; pointer-events:none;
  paint-order:stroke; stroke:#ffc94d; stroke-width:22px; stroke-linejoin:round;
}
.n-sel{stroke:#ffd970; stroke-width:9; fill:none; opacity:.95}

/* 게임 노드 팝업과 같은 능력치 표 */
.statgrid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0;
}
.statgrid .si{
  background:var(--bg3); border-radius:9px; padding:8px 10px;
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.statgrid .sl{font-size:11px; color:var(--fg-dim2); line-height:1.3}
.statgrid .sv{font-size:17px; font-weight:700; color:var(--fg)}
.tagchips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.tagchips .tag{padding:3px 9px; font-size:11.5px}

/* 클릭 가능한 태그 */
.tag-btn{cursor:pointer; transition:.12s}
.tag-btn:hover{filter:brightness(1.18); box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.tag-btn:focus-visible{outline:2px solid var(--acc); outline-offset:1px}
.tagmodal .tagbox{max-width:400px}
.tagbox .taghead{margin:2px 0 12px}
.tagbox .taghead .tag{font-size:15px; padding:5px 13px}
.tagbox .kind{margin-top:10px; font-size:11px; color:var(--fg-dim2)}

/* 중앙 '다이스 트리' 허브 */
.hub-edge{stroke-width:14; opacity:.75}
.hub-lab{
  text-anchor:middle; dominant-baseline:middle; font-size:64px;
  font-weight:700; fill:#e8eef6; pointer-events:none;
}
.grp-lab{
  text-anchor:middle; dominant-baseline:middle; font-size:86px;
  font-weight:800; pointer-events:none;
  paint-order:stroke; stroke:#0e1116; stroke-width:16px; stroke-linejoin:round;
}

/* ---------- simulator ---------- */
.totals{
  background:var(--bg3); border-radius:10px; padding:12px; margin-bottom:14px;
}
.totals .row{display:flex; justify-content:space-between; padding:3px 0; font-size:13px}
.totals .row b{color:var(--acc)}
.rankctl{display:flex; align-items:center; gap:12px; margin:14px 0; justify-content:center}
.rankctl .val{
  min-width:104px; text-align:center; color:var(--acc);
  font-weight:700; font-size:26px; font-variant-numeric:tabular-nums;
}
.rankctl .val em{font-style:normal; font-size:14px; color:var(--fg-dim2); font-weight:500}
.stepbtn{
  width:52px; height:44px; border-radius:10px; cursor:pointer; font-size:17px;
  background:var(--bg3); border:1px solid var(--line); color:var(--fg);
}
.stepbtn:hover:not(:disabled){border-color:var(--acc); color:var(--acc)}
.stepbtn:disabled{opacity:.35; cursor:default}
.rankjump{display:flex; gap:6px; justify-content:center}
.btn.sm{padding:5px 12px; font-size:12.5px}
.btn.wide{width:100%; margin-top:12px; padding:10px}

/* ---------- misc list ---------- */
.list{flex:1; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:8px}
.list > *{min-width:0; max-width:100%}
.litem{
  background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  min-width:0; overflow-wrap:anywhere;
}
.litem .h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0}
.litem .h b{font-size:14px}
.litem .h .g{font-size:11px; color:var(--fg-dim2)}
.litem .d{font-size:12.5px; color:var(--fg-dim); margin-top:5px; line-height:1.55}

/* ---------- 덱 빌더 ---------- */
.deckbody{flex:1; min-height:0; min-width:0; display:flex}
.deckleft{
  width:400px; flex:none; min-width:0; overflow:auto; padding:16px;
  border-right:1px solid var(--line); background:var(--bg2);
}
.deckright{flex:1; min-width:0; overflow:auto; padding:16px}
.deckhead{
  font-size:12px; color:var(--fg-dim2); margin:18px 0 8px;
  padding-bottom:6px; border-bottom:1px solid var(--line);
}

.slotrow{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.slotrow.sup{grid-template-columns:1fr; margin-top:10px}
.slot{
  position:relative; background:var(--bg3); border:2px dashed var(--line);
  border-radius:12px; padding:9px 6px; text-align:center; cursor:pointer;
  min-height:96px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; transition:.12s;
}
.slot:hover{border-color:var(--fg-dim2)}
.slot.filled{border-style:solid; border-color:var(--line); background:var(--bg)}
.slot.on{border-color:var(--acc); box-shadow:0 0 0 3px rgba(255,201,77,.18)}
.slot.sup{min-height:78px; flex-direction:row; gap:12px; justify-content:flex-start; padding:9px 14px}
.slot.sup.filled{border-color:var(--perk)}
.slot .sicon{height:46px; display:flex; align-items:center; justify-content:center}
.slot .sicon img{max-height:46px; max-width:100%}
.slot .sempty{font-size:24px; color:var(--fg-dim2); line-height:1}
.slot .sname{font-size:11.5px; line-height:1.25; word-break:keep-all}
.slot .sclear{
  position:absolute; top:3px; right:3px; width:20px; height:20px; line-height:1;
  border-radius:6px; border:1px solid var(--line); background:var(--bg2);
  color:var(--fg-dim2); cursor:pointer; font-size:11px; padding:0;
}
.slot .sclear:hover{color:var(--danger); border-color:var(--danger)}

.dsummary{margin-top:16px; display:flex; flex-direction:column; gap:10px}
.dsrow{display:flex; flex-direction:column; gap:6px}
.dsrow > b{font-size:11.5px; color:var(--fg-dim2); font-weight:600}

.savedeck{
  display:flex; align-items:center; gap:8px; padding:8px 10px; min-width:0;
  background:var(--bg3); border-radius:10px; margin-bottom:6px;
}
.savedeck .sdicons{display:flex; align-items:center; gap:2px; flex:none}
.savedeck .sdicons img{width:26px; height:26px; object-fit:contain}
.savedeck .sdicons .sep{color:var(--fg-dim2); margin:0 3px; font-size:11px}
.savedeck .sdname{flex:1; min-width:0; font-size:12.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

.deckmodal{max-width:430px}
.deckmodal .mi{
  width:100%; margin-top:12px; padding:9px 12px; border-radius:9px;
  background:var(--bg3); border:1px solid var(--line); color:var(--fg); font-size:14px;
}
.deckmodal .mbtns{display:flex; gap:8px; justify-content:flex-end; margin-top:16px}
.presetlist{display:flex; flex-direction:column; gap:7px; margin-top:12px}
.presetrow{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--bg3); border-radius:10px; padding:9px 11px;
}
.presetrow .pname{font-weight:600; font-size:13.5px; flex:1 1 100%; min-width:0}
.presetrow .pstat{
  flex:1 1 100%; font-size:11.5px; color:var(--fg-dim2);
  font-variant-numeric:tabular-nums; margin-top:-3px;
}
.btn.primary{background:var(--acc); border-color:var(--acc); color:#111; font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}

.pickhead{font-size:12.5px; color:var(--fg-dim); margin-bottom:10px}
.pickgrid{padding:0; overflow:visible}
.dcard.pick{cursor:pointer}
.dcard.pick.used{outline:2px solid var(--ok); outline-offset:-2px}
.dcard .unused.ok{background:rgba(93,220,122,.18); color:var(--ok)}
.bcard.pick{cursor:pointer}
.bcard.pick.on{border-color:var(--perk); box-shadow:0 0 0 2px rgba(180,125,255,.22)}

/* ---------- 자료실 ---------- */
.libbody{flex:1; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:8px}
/* 넓은 표가 페이지 자체를 밀지 않도록 자식 폭을 가둔다 */
.libbody > *{min-width:0; max-width:100%}
.badge{
  font-size:10.5px; padding:2px 8px; border-radius:99px;
  background:var(--bg3); color:var(--fg-dim); white-space:nowrap;
}
.badge.boss{background:rgba(255,107,107,.18); color:var(--danger); font-weight:700}
.badge.off{background:rgba(255,107,107,.14); color:var(--danger)}
.dim{color:var(--fg-dim2)}

/* 몬스터 카드 */
.bgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.bcard{
  background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  padding:14px; display:flex; gap:14px; min-width:0;
}
.bcard .bimg{flex:none; width:84px; height:84px; display:flex; align-items:center; justify-content:center}
.bcard .bimg img{max-width:84px; max-height:84px}
.bcard .binfo{min-width:0; flex:1}
.bcard .h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.bcard .h b{font-size:15px}
.bcard .sub{font-size:11px; color:var(--fg-dim2); margin-top:2px}
.bcard .d{font-size:12.5px; color:var(--fg-dim); margin:6px 0; line-height:1.55}
.statgrid.sm{grid-template-columns:1fr 1fr; gap:6px; margin:8px 0 0}
.statgrid.sm .sv{font-size:14px}

/* 데이터 테이블 */
.tablewrap{
  overflow-x:auto; width:100%; max-width:100%; min-width:0;
  border:1px solid var(--line); border-radius:10px; background:var(--bg2);
  -webkit-overflow-scrolling:touch;
}
.dtable{border-collapse:collapse; width:100%; font-size:12.5px; white-space:nowrap}
.dtable th{
  position:sticky; top:0; background:var(--bg3); color:var(--fg-dim);
  text-align:left; padding:9px 12px; font-weight:600; border-bottom:1px solid var(--line);
}
.dtable td{padding:8px 12px; border-bottom:1px solid var(--line)}
.dtable tr:last-child td{border-bottom:none}
.dtable td.wv{font-weight:700; color:var(--acc)}
.wboss{
  display:inline-block; background:var(--bg3); border-radius:7px;
  padding:2px 8px; margin-right:5px;
}
.wboss em{font-style:normal; color:var(--fg-dim2); font-size:11px; margin-left:4px}

/* 룬·능력 카드 부가 요소 */
.chips.sub{width:100%; padding-top:2px; border-top:1px solid var(--line); margin-top:2px}
.chips.sub .chip{font-size:12px; padding:4px 10px}
.bcard.nolead{display:block}
.bcard .flavor{
  font-size:12px; color:var(--fg-dim2); font-style:italic;
  margin-top:6px; padding-left:9px; border-left:2px solid var(--line);
}
.dchips{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.dchip{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  background:var(--bg3); border-radius:99px; padding:2px 9px 2px 3px; color:var(--fg-dim);
}
.dchip img{width:20px; height:20px; object-fit:contain}
.mstats{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.ms{
  background:var(--bg3); border-radius:8px; padding:4px 9px;
  font-size:12.5px; font-weight:600; color:var(--fg);
}
.ms i{
  font-style:normal; color:var(--fg-dim2); font-weight:400;
  font-size:11px; margin-right:6px;
}
.ms em{font-style:normal; color:var(--ok); font-size:11px; margin-left:3px}
.rankmark{
  display:inline-block; margin-left:7px; font-size:10px; color:var(--fg-dim2);
  background:var(--bg); border-radius:99px; padding:1px 7px; vertical-align:middle;
}

.libnote{
  background:var(--bg3); border-left:3px solid var(--acc2); border-radius:8px;
  padding:9px 12px; font-size:12px; color:var(--fg-dim); line-height:1.55;
}

/* 업적 단계 */
.tiers{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.tier{
  background:var(--bg3); border-radius:8px; padding:4px 9px; font-size:12px;
  display:flex; gap:7px; align-items:baseline;
}
.tier em{font-style:normal; color:var(--fg-dim2); font-size:11px}

.foot{
  flex:none; padding:8px 18px; border-top:1px solid var(--line);
  background:var(--bg2); color:var(--fg-dim2); font-size:11.5px;
}

/* ===================== 모바일 =====================
   미디어쿼리 대신 <html class="compact"> 로 제어한다. 브라우저가 'PC 버전으로 보기' 를
   쓰면 레이아웃 폭이 980px 이상으로 잡혀 폭 기준 미디어쿼리가 안 먹기 때문에,
   app.js 에서 폭과 터치 여부를 함께 보고 클래스를 붙인다. */
.compact body{font-size:13.5px}

.compact .topbar{
  flex-wrap:wrap; gap:10px; padding:25px 12px 9px;
  position:sticky; top:0; z-index:20;
}
.compact .brand{font-size:15px}
.compact .brand .logo{font-size:19px}
.compact .langs select{padding:5px 8px; font-size:12px}
.compact .tabs{
  order:3; width:100%; flex:0 0 100%;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:2px;
}
.compact .tabs::-webkit-scrollbar{display:none}
.compact .tab{white-space:nowrap; padding:7px 13px; font-size:14px}

.compact .toolbar{padding:9px 12px; gap:8px}
.compact .toolbar input[type=search]{min-width:0; flex:1 1 150px}
.compact .chip{padding:6px 12px; font-size:13.5px}
.compact .btn{padding:7px 13px; font-size:13.5px}
.compact .legend{display:none}
.compact .totals-bar{margin-left:0; width:100%; justify-content:space-between; gap:8px}

/* 상세는 하단 시트로 */
.compact .node-panel{
  top:auto; left:0; right:0; bottom:0; width:auto;
  max-height:64%; border-left:none;
  border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;
  transform:translateY(104%);
  box-shadow:0 -14px 34px rgba(0,0,0,.5);
  padding:14px 14px 26px;
}
.compact .node-panel.open{transform:none}
.compact .node-panel::before{
  content:""; display:block; width:42px; height:4px; border-radius:99px;
  background:var(--line); margin:0 auto 10px;
}

.compact .dice-grid{
  padding:12px; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
}
.compact .dcard{padding:10px}
.compact .dcard .icon{height:70px}
.compact .dcard .icon img{max-height:70px}
.compact .dcard .nm{font-size:13.5px}
.compact .dcard .grp{font-size:10px; padding:1px 6px}

.compact .deckbody{flex-direction:column; overflow:auto}
.compact .deckleft{
  width:auto; flex:none; overflow:visible; padding:12px;
  border-right:none; border-bottom:1px solid var(--line);
}
.compact .deckright{flex:none; overflow:visible; padding:12px}
.compact .slotrow{gap:6px}
.compact .slot{min-height:84px; padding:7px 4px}
.compact .slot .sicon{height:38px}
.compact .slot .sicon img{max-height:38px}
.compact .slot .sname{font-size:10.5px}
.compact .pickgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.compact .libbody{padding:12px; gap:7px}
.compact .bgrid{grid-template-columns:1fr}
.compact .bcard{padding:11px; gap:11px}
.compact .bcard .bimg{width:64px; height:64px}
.compact .bcard .bimg img{max-width:64px; max-height:64px}
.compact .dtable{font-size:11.5px}
.compact .dtable th, .compact .dtable td{padding:7px 9px}
.compact .list{padding:12px; gap:7px}
.compact .litem{padding:10px 12px}
.compact .modal{padding:12px; align-items:flex-end}
.compact .modal .box{max-height:88vh; padding:16px; border-radius:16px}
.compact .statgrid{gap:6px}
.compact .statgrid .sv{font-size:15px}
.compact .stepbtn{width:58px; height:46px}
.compact .foot{font-size:11px; padding:7px 12px}

/* 아주 좁을 때 */
.compact.narrow .dice-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.compact.narrow .statgrid{grid-template-columns:1fr}

/* 화면이 낮을 때(가로 모드 등) */
@media (max-height:560px){
  .compact .topbar{position:static}
  .compact .node-panel{max-height:82%}
}

/* ---------- 데이터 변경사항 ---------- */
.clblock{
  background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  padding:14px; margin-bottom:10px;
}
.clhead{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:10px;
  font-size:13.5px; font-variant-numeric:tabular-nums;
}
.clhead b{color:var(--acc); font-size:15px}
.clsec{margin-top:12px}
.clsec:first-child{margin-top:0}
.clsechead{
  font-size:11.5px; color:var(--fg-dim2); margin-bottom:6px;
  text-transform:none; letter-spacing:.02em;
}
.clitem{
  background:var(--bg3); border-radius:9px; padding:8px 11px;
  margin-bottom:6px; font-size:13px; line-height:1.5;
}
.cltag{
  display:inline-block; font-size:10.5px; font-weight:700; padding:1px 7px;
  border-radius:99px; margin-right:8px; vertical-align:middle;
}
.cltag.add{background:rgba(93,220,122,.18); color:var(--ok)}
.cltag.del{background:rgba(255,107,107,.18); color:var(--danger)}
.cltag.chg{background:rgba(77,163,255,.18); color:var(--acc2)}
.cldiff{
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  margin-top:6px; padding-left:2px; font-size:12.5px;
}
.cldiff i{
  font-style:normal; color:var(--fg-dim2); font-size:11px;
  min-width:96px; flex:none;
}
.cldiff s{color:var(--fg-dim2); text-decoration:line-through}
.cldiff b{color:var(--fg-dim2); font-weight:400}
.cldiff em{font-style:normal; color:var(--ok); font-weight:600}
.compact .cldiff i{min-width:0; flex:1 1 100%}

/* 긴 문구 비교는 한 줄에 나란히 놓으면 읽히지 않는다 — 위아래로 쌓는다 */
.cldiff.long{display:block}
.cldiff.long i{display:block; margin-bottom:4px}
.cldiff.long .t{
  padding:5px 9px; border-radius:7px; background:var(--bg2);
  margin-bottom:4px; line-height:1.55;
}
.cldiff.long .t s{display:block; color:var(--fg-dim2)}
.cldiff.long .t em{display:block}
.cldiff .reorder{color:var(--fg-dim2); font-weight:400}

/* 증감 배지 — 한국식으로 증가 붉은색, 감소 푸른색. 좋고 나쁨이 아니라 방향만 나타낸다 */
:root{--up:#ff7b6b; --down:#5aa9ff}
.cldiff{font-variant-numeric:tabular-nums}
.cldiff:not(.long) em{color:var(--fg)}
.dl{
  display:inline-block; font-size:10.5px; font-weight:700; font-style:normal;
  padding:1px 6px; border-radius:6px; margin-left:6px; white-space:nowrap;
  vertical-align:1px;
}
.dl.up{color:var(--up); background:rgba(255,123,107,.14)}
.dl.dn{color:var(--down); background:rgba(90,169,255,.14)}

/* 같은 필드가 여러 항목에서 바뀌면 표로 — 표만 가로 스크롤되고 페이지는 넘치지 않는다 */
.cltable-wrap{
  overflow-x:auto; margin-bottom:6px; border-radius:9px; background:var(--bg3);
  max-width:100%;
}
.cltable{width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums}
.cltable th, .cltable td{
  padding:6px 12px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.cltable thead th{font-size:11px; color:var(--fg-dim2); font-weight:600; background:var(--bg3)}
.cltable tbody th{font-weight:600; color:var(--fg)}
.cltable tbody tr:last-child th, .cltable tbody tr:last-child td{border-bottom:none}
.cltable tbody tr:hover{background:rgba(255,255,255,.03)}
.cltable s{color:var(--fg-dim2); text-decoration:line-through}
.cltable b{color:var(--fg-dim2); font-weight:400; margin:0 5px}
.cltable em{font-style:normal; color:var(--fg); font-weight:600}
.cltable td.none{color:var(--fg-dim2); text-align:center}
.compact .cltable th, .compact .cltable td{padding:5px 8px}
/* 변경사항 항목에는 공백 없는 긴 식별자가 들어온다 — 반드시 줄바꿈시킨다 */
.clitem, .cldiff, .clsec{min-width:0}
.clitem{overflow-wrap:anywhere; word-break:break-word}
.cldiff s, .cldiff em, .cldiff i{overflow-wrap:anywhere; min-width:0}
.cldiff{max-width:100%}

.clitem .mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  color:var(--fg-dim); overflow-wrap:anywhere;
}
.clblock.upcoming{border:1px solid var(--acc); background:var(--bg2)}
.clblock.upcoming .clhead b{color:var(--acc)}
.badge.soon{background:rgba(255,193,74,.18); color:var(--acc)}
.cltag.soon{background:rgba(255,193,74,.18); color:var(--acc)}
.clitem .upd{margin-top:5px; font-size:12.5px; color:var(--fg-dim); line-height:1.55}
.clhead .src{text-decoration:none; font-size:12px}
.clhead .src:hover{color:var(--acc)}

/* 공지 · 링크 */
.ncard, .lcard{
  display:block; background:var(--bg3); border-radius:9px;
  padding:10px 12px; margin-bottom:6px; text-decoration:none; color:inherit;
  border:1px solid transparent; transition:border-color .12s, background .12s;
}
.ncard:hover, .lcard:hover{border-color:var(--acc); background:var(--bg2)}
.ncard .nt, .lcard .lt{font-weight:600; font-size:13.5px; color:var(--fg)}
.ncard .nd{margin-top:3px; font-size:11.5px; color:var(--fg-dim2);
  font-variant-numeric:tabular-nums}
.ncard.past .nt{color:var(--fg-dim)}
.ncard.past{opacity:.6}
.lcard .ld{margin-top:3px; font-size:11.5px; color:var(--fg-dim)}
.lcard .lu{
  margin-top:4px; font-size:11px; color:var(--fg-dim2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow-wrap:anywhere;
}

.clnotes{
  margin:8px 0 4px; padding:8px 11px; border-radius:9px;
  background:var(--bg2); color:var(--fg-dim2);
  font-size:11.5px; line-height:1.6;
}