:root{
  --ground:#e9edf2; --surface:#fff; --surface-2:#f3f6fa; --surface-3:#e8edf4;
  --line:#d3dae3; --line-soft:#e3e9f0;
  --ink:#171d26; --ink-2:#48545f; --muted:#6f7d8c;
  --accent:#9a6b18; --pos:#0d7d68; --neg:#b23a5e; --warn:#a5651a;
  --field:#fff; --myth:#b8860b; --leg:#c2560a; --uniq:#1f6f9a;
  --shadow:0 1px 2px rgba(23,29,38,.06),0 8px 24px rgba(23,29,38,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0e1218; --surface:#161c24; --surface-2:#1c242e; --surface-3:#232d39;
    --line:#2a343f; --line-soft:#222b35;
    --ink:#e4eaf1; --ink-2:#aab6c3; --muted:#7f8d9c;
    --accent:#d7a94f; --pos:#3fbfa2; --neg:#e3708f; --warn:#d9a253;
    --field:#111720; --myth:#f2c94c; --leg:#f2994a; --uniq:#63b4dc;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0e1218; --surface:#161c24; --surface-2:#1c242e; --surface-3:#232d39;
  --line:#2a343f; --line-soft:#222b35;
  --ink:#e4eaf1; --ink-2:#aab6c3; --muted:#7f8d9c;
  --accent:#d7a94f; --pos:#3fbfa2; --neg:#e3708f; --warn:#d9a253;
  --field:#111720; --myth:#f2c94c; --leg:#f2994a; --uniq:#63b4dc;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);margin:0;padding:26px 18px 60px;
  font-family:"IBM Plex Sans KR",system-ui,"Malgun Gothic",sans-serif;line-height:1.55}
.wrap{max-width:1340px;margin:0 auto}

header{margin-bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 6px}
h1{font-family:"Gowun Batang",Georgia,serif;font-weight:700;
  font-size:clamp(26px,3.6vw,36px);line-height:1.15;margin:0 0 8px;text-wrap:balance}
.lede{margin:0;color:var(--ink-2);max-width:66ch;font-size:14.5px}
.dbinfo{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap}
.dbinfo b{color:var(--ink-2);font-weight:600}

.grid{display:grid;grid-template-columns:336px minmax(0,1fr);gap:20px;align-items:start;margin-top:20px}
@media (max-width:1000px){.grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.panel+.panel{margin-top:16px}
.panel-hd{padding:12px 15px;border-bottom:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.panel-hd h2{font-family:"Gowun Batang",Georgia,serif;font-size:15.5px;font-weight:700;margin:0}
.panel-hd .hint{font-size:11.5px;color:var(--muted)}

.fs{padding:13px 15px;border-bottom:1px solid var(--line-soft)}
.fs:last-child{border-bottom:0}
.fs-label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.rows{display:flex;flex-direction:column;gap:7px}
.row{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:9px}
.row label{font-size:13px;color:var(--ink-2)}
.row .u{color:var(--muted);font-size:11px;margin-left:3px}
.row .bonus{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--pos);margin-left:4px}
/* 외부 증가치 줄은 룬 몫 설명이 길어 아래로 흘린다 */
.row:has(#b_eAtk),.row:has(#b_eExt){grid-template-columns:1fr 92px}
#b_eAtk,#b_eExt{display:block;margin:2px 0 0;color:var(--muted);font-size:10px;line-height:1.4}
input[type=number],input[type=text],select{width:100%;padding:6px 9px;background:var(--field);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;font-size:13px}
input[type=number]{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right}
select,input[type=text]{font-family:inherit}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.row .rl{display:flex;align-items:center;gap:6px;min-width:0}
.chk-row{display:flex;align-items:center;gap:7px}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);cursor:pointer}
.chk input{accent-color:var(--accent);width:15px;height:15px}
.note{font-size:11.5px;color:var(--warn);margin-top:7px;line-height:1.45}

.msg{margin-top:9px;font-size:12px;min-height:1.3em}
.msg.busy{color:var(--accent)} .msg.ok{color:var(--pos)} .msg.err{color:var(--neg)}
.steps{margin:0 0 12px;padding-left:20px;font-size:12.5px;color:var(--ink-2);line-height:1.7}
.steps b{color:var(--ink);font-weight:600}
.btn.wide{width:100%;padding:7px 10px;font-size:13px;margin-bottom:10px}

.results{display:flex;flex-direction:column;gap:18px;min-width:0}
.hero{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:17px 19px;display:grid;
  grid-template-columns:auto 1fr;gap:24px;align-items:center}
@media (max-width:700px){.hero{grid-template-columns:1fr;gap:14px}}
.hero .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.hero .v{font-family:"IBM Plex Mono",monospace;font-size:clamp(30px,4.4vw,40px);
  font-weight:600;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.hero .sub{font-size:12px;color:var(--muted);margin-top:4px}
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:8px;overflow:hidden}
.term{background:var(--surface);padding:8px 10px}
.term .tk{font-size:10.5px;color:var(--muted);white-space:nowrap}
.term .tv{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;margin-top:1px}

.tabs{display:flex;gap:3px;padding:0 15px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:10px 12px;font-family:inherit;font-size:13.5px;color:var(--muted);cursor:pointer}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.pane{padding:15px}
.pane[hidden]{display:none!important}

.verdict{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:8px;
  padding:11px 14px;margin-bottom:14px;font-size:13.5px;color:var(--ink-2)}
.verdict b{color:var(--ink);font-weight:600}
.verdict .m{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  color:var(--accent);font-weight:600}
.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:104px minmax(0,1fr) 96px;align-items:center;gap:12px}
@media (max-width:560px){.bar-row{grid-template-columns:82px minmax(0,1fr) 76px;gap:8px}}
.bar-name{font-size:13px;color:var(--ink-2)}
.bar-name .rank{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);margin-right:5px}
.bar-track{height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden;border:1px solid var(--line-soft)}
.bar-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .2s ease}
.bar-row.top .bar-fill{background:var(--pos)}
.bar-row.top .bar-name{color:var(--ink);font-weight:600}
.bar-val{font-family:"IBM Plex Mono",monospace;font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.step-row{display:flex;align-items:center;gap:9px;margin-bottom:13px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.step-row input{width:88px}

.slots{display:flex;flex-direction:column;gap:11px;margin-bottom:14px}
.sg-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.sg-hd .t{font-size:12.5px;color:var(--ink-2);font-weight:600}
.sg-hd .c{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.sg-hd .c.full{color:var(--warn)}
.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:26px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--line);font-size:12.5px}
.chip .x{cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:0 1px}
.chip .x:hover{color:var(--neg)}
.chip.empty{color:var(--muted);border-style:dashed;background:none}
.filters{display:flex;gap:6px;margin-bottom:11px;flex-wrap:wrap;align-items:center}
.filters .sp{flex:1}
.filters input[type=text]{width:150px}
.btn{appearance:none;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  padding:4px 10px;border-radius:6px;font-family:inherit;font-size:12px;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.on{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}

.tbl-wrap{overflow-x:auto;max-height:620px;overflow-y:auto}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
thead th{position:sticky;top:0;z-index:1;background:var(--surface);
  font-size:11px;color:var(--muted);font-weight:500;text-align:right;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
thead th.l{text-align:left}
tbody td{padding:7px 10px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap}
tbody td.l{text-align:left;white-space:normal}
tbody tr:hover{background:var(--surface-2)}
tbody tr.eq{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rk{font-family:"IBM Plex Mono",monospace;color:var(--muted);font-size:11.5px;width:34px}
.val{font-family:"IBM Plex Mono",monospace;font-weight:600;font-variant-numeric:tabular-nums}
.val.p{color:var(--pos)} .val.n{color:var(--neg)} .val.z{color:var(--muted)}
.badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10.5px;
  border:1px solid currentColor;margin-left:5px;vertical-align:1px}
.b-myth{color:var(--myth)} .b-leg{color:var(--leg)} .b-uniq{color:var(--uniq)}
.st{display:inline-block;font-size:10.5px;margin-left:5px;padding:1px 5px;border-radius:4px;
  border:1px dashed currentColor}
.st-skill{color:var(--uniq)} .st-none{color:var(--muted)} .st-review{color:var(--warn)}
.up{width:56px;padding:3px 5px;font-size:11.5px}
.empty-row{padding:22px;text-align:center;color:var(--muted);font-size:13px}

.hm-ctl{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.hm-ctl select{width:auto;min-width:108px}
table.hm{width:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;font-variant-numeric:tabular-nums}
table.hm th{position:static;font-weight:500;color:var(--muted);padding:4px 6px;white-space:nowrap;font-size:10.5px;border:0}
table.hm th.corner{text-align:left;color:var(--ink-2);font-weight:600}
table.hm th.rowh{text-align:right;position:sticky;left:0;background:var(--surface)}
table.hm td{padding:5px 7px;text-align:right;color:var(--ink);border:0;border-radius:3px}
table.hm tr.me th.rowh,table.hm th.me{color:var(--accent);font-weight:700}
table.hm td.me{outline:1.5px solid var(--accent);outline-offset:-1.5px;font-weight:600}
.legend{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.scale{display:flex;height:9px;width:170px;border-radius:99px;overflow:hidden;border:1px solid var(--line-soft)}
.scale i{flex:1}
.axis-note{font-size:12px;color:var(--muted);margin:0 0 11px}
.axis-note b{color:var(--ink-2);font-weight:600}

footer{margin-top:26px;padding-top:15px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);}
footer p{margin:0 0 7px}
footer .credit{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);
  color:var(--muted);font-size:11.5px}
footer code{font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--surface-2);
  padding:1px 5px;border-radius:4px;color:var(--ink-2)}
.loading{padding:40px;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* LLM으로 읽기 */
.llm-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.small-note{font-size:11.5px;color:var(--muted);margin:0 0 9px;line-height:1.45}
textarea{width:100%;padding:8px 10px;background:var(--field);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;font-size:12px;line-height:1.5;resize:vertical;
  font-family:"IBM Plex Mono",monospace}
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn.done{background:var(--pos);color:#fff;border-color:var(--pos)}
.btn.apply{width:100%;margin-top:8px;padding:7px 10px;font-size:13px;
  background:var(--accent);color:var(--surface);border-color:var(--accent);font-weight:600}
.btn.apply:hover{filter:brightness(1.08);color:var(--surface)}
.extra{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px}
.extra .ex-hd{width:100%;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-family:"IBM Plex Mono",monospace;margin-bottom:2px}
.extra .ex{display:inline-flex;gap:5px;align-items:baseline;padding:2px 7px;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--line-soft);font-size:11.5px;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.extra .ex i{font-style:normal;color:var(--muted)}
.season-sel{width:auto;min-width:88px;padding:4px 8px;font-size:12px}
.warn-box{background:color-mix(in srgb,var(--warn) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  border-radius:8px;padding:10px 13px;margin-bottom:12px;font-size:12.5px;
  color:var(--ink-2);line-height:1.6}
.warn-box b{color:var(--ink);font-weight:600}
.slot-cfg{background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:8px;padding:12px 14px;margin-bottom:10px}
.cfg-hd{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
/* 접기 — 기본은 접힌 상태 */
details.slot-cfg > summary.cfg-hd{cursor:pointer;user-select:none;list-style:none;
  display:flex;align-items:center;gap:7px;margin-bottom:0;
  font-size:11.5px;letter-spacing:.06em;color:var(--ink-2)}
details.slot-cfg[open] > summary.cfg-hd{margin-bottom:10px}
details.slot-cfg > summary::-webkit-details-marker{display:none}
details.slot-cfg > summary::before{content:"▸";font-size:11px;color:var(--accent);
  transition:transform .12s ease}
details.slot-cfg[open] > summary::before{transform:rotate(90deg)}
details.slot-cfg > summary:hover{color:var(--ink-2)}
details.slot-cfg #slotSum{letter-spacing:0;text-transform:none;color:var(--muted)}
details.slot-cfg .cfg-tip{margin-left:auto;letter-spacing:0;text-transform:none;
  font-family:"IBM Plex Sans KR",system-ui,sans-serif;font-size:11.5px;color:var(--muted)}
details.slot-cfg[open] .cfg-tip{opacity:0}
@media (max-width:760px){details.slot-cfg .cfg-tip{display:none}}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px 12px}
.cfg-grid label{display:grid;grid-template-columns:1fr 74px;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-2)}
.cfg-grid .u{color:var(--muted);font-size:10.5px;margin-left:4px}
.cfg-grid input{padding:4px 8px;font-size:12px}
/* 16칸을 세로로 늘어놓으면 너무 길다 — 폭이 되는 만큼 여러 단으로 접는다 */
.slot-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:5px 16px;align-items:center}
.slot-row{display:grid;grid-template-columns:66px 60px minmax(0,1fr);gap:7px;
  align-items:center;font-size:12.5px;min-width:0}
.slot-row .sl-name{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-row input,.slot-row select{padding:4px 7px;font-size:12px;min-width:0}
.slot-row input{text-align:right}
.base-line{margin:0 0 14px;padding:0 2px;
  font-size:11.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums;line-height:1.7}
.base-line b{color:var(--ink-2);font-weight:600}
.base-line .bad{color:var(--neg)}

/* 룬 속성 배지 */
.el{display:inline-block;padding:1px 7px;border-radius:99px;font-size:10.5px;
  border:1px solid currentColor;white-space:nowrap}
.el-light{color:#c9a227} .el-dark{color:#9b7fd4} .el-dragon{color:#d1734a}
.el-none{color:var(--muted);border-style:dashed}

/* 룬 설명 아이콘 + 팝오버 */
.rune-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  margin-left:6px;border-radius:50%;border:1px solid var(--line);color:var(--muted);
  font-size:10px;font-style:normal;cursor:pointer;vertical-align:1px;line-height:1}
.rune-i:hover{border-color:var(--accent);color:var(--accent)}
.rune-pop{position:fixed;z-index:50;max-width:min(420px,92vw);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);padding:13px 15px}
.rp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.rp-name{font-family:"Gowun Batang",Georgia,serif;font-size:15px;font-weight:700}
.rp-x{appearance:none;background:none;border:0;color:var(--muted);font-size:17px;
  cursor:pointer;line-height:1;padding:0 2px}
.rp-x:hover{color:var(--neg)}
.rp-meta{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.rp-text{font-size:12.5px;color:var(--ink-2);line-height:1.65;white-space:pre-wrap;
  max-height:40vh;overflow-y:auto}

/* ── 정렬 가능한 헤더 ── */
th.srt{cursor:pointer;user-select:none;position:relative;padding-right:16px}
th.srt:hover{color:var(--ink-2)}
th.srt::after{content:"⇅";position:absolute;right:5px;opacity:.35;font-size:9px}
th.srt.sorted{color:var(--accent)}
th.srt.sorted[data-dir="asc"]::after{content:"↑";opacity:1}
th.srt.sorted[data-dir="desc"]::after{content:"↓";opacity:1}

/* 장착 룬 — 스크롤해도 상단 고정, 기여도는 색을 달리 */
tbody tr.eq td{background:color-mix(in srgb,var(--accent) 13%,var(--surface))}
tbody tr.eq:hover td{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
tbody tr.eq .rk{color:var(--accent);font-weight:700}
.val.eqv{color:var(--accent)}

/* ── 스크롤바 ── */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;
  border:2px solid var(--surface);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);border:2px solid var(--surface);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
.tbl-wrap{scrollbar-gutter:stable}

/* 조건부 배지 — 누를 수 있다는 걸 보이게 */
.cond-btn{cursor:pointer}
.cond-btn:hover{background:color-mix(in srgb,var(--warn) 18%,transparent)}
.cond-hd{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-family:"IBM Plex Mono",monospace;margin-bottom:7px}
.cond-list{margin:0 0 10px;padding-left:18px}
.cond-list li{margin-bottom:5px;line-height:1.6}
.cond-tip{font-size:11.5px;color:var(--muted);line-height:1.6;
  border-top:1px dashed var(--line);padding-top:9px}
.cond-tip b{color:var(--ink-2)}
.rp-text.rich{white-space:normal}
.rp-text p{margin:0 0 8px;line-height:1.65}
.rp-text i{color:var(--ink-2)}

/* ── 룬 표 ──
   룬 밸류는 탭 밖 독립 패널이므로 .rune-tbl 로 잡는다 */
.rune-tbl thead th{padding:8px 10px;border-bottom:1px solid var(--line)}
.rune-tbl tbody td{padding:7px 10px;line-height:1.55}
.rune-tbl thead th + th,
.rune-tbl tbody td + td{border-left:1px solid var(--line-soft)}
.rune-tbl tbody tr.eq td + td{border-left-color:color-mix(in srgb,var(--accent) 26%,transparent)}

/* 속성 · 등급 · 가동률 · 넣기 는 가운데 정렬 */
.rune-tbl thead th:nth-child(2), .rune-tbl tbody td:nth-child(2),
.rune-tbl thead th:nth-child(3), .rune-tbl tbody td:nth-child(3),
.rune-tbl thead th:nth-child(6), .rune-tbl tbody td:nth-child(6),
.rune-tbl thead th:nth-child(7), .rune-tbl tbody td:nth-child(7){text-align:center}
.rune-tbl thead th:nth-child(2), .rune-tbl thead th:nth-child(3),
.rune-tbl thead th:nth-child(6){padding-right:20px}   /* 정렬 화살표 자리 */

/* 가동률 입력과 넣기 버튼은 칸을 꽉 채운다 */
.rune-tbl .up{width:100%;padding:4px 6px;font-size:12px;text-align:center}
.rune-tbl .btn{width:100%;padding:4px 8px;font-size:12px}
.rune-tbl td:nth-child(6),.rune-tbl td:nth-child(7){padding-left:8px;padding-right:8px}

.rune-tbl .badge{padding:1px 6px;margin-left:0}
.rune-tbl .st{padding:1px 6px;margin-left:5px}
.rune-tbl .rune-i{width:16px;height:16px;margin-left:6px}
.rune-tbl .el{padding:1px 8px}
.rune-tbl .rk{width:40px}

/* 등급 배지는 색을 채워 눈에 띄게 */
.badge.b-myth{background:color-mix(in srgb,var(--myth) 16%,transparent);font-weight:600}
.badge.b-leg{background:color-mix(in srgb,var(--leg) 16%,transparent);font-weight:600}

/* ── 세팅 저장 ── */
.save-list{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
.sv{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:7px;
  padding:5px 8px;background:var(--surface-2);border:1px solid var(--line);border-radius:7px}
.sv-base{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.sv-tag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1px 5px;white-space:nowrap}
.sv-base .sv-tag{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.sv-nm{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-b{background:none;border:1px solid var(--line);color:var(--ink-2);border-radius:5px;
  padding:2px 7px;font-size:11.5px;cursor:pointer;font-family:inherit}
.sv-b:hover{border-color:var(--accent);color:var(--accent)}
.sv-x{background:none;border:0;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.sv-x:hover{color:var(--neg)}
.save-in{margin-bottom:7px}
.save-in input{width:100%;box-sizing:border-box}

/* ── 세팅 비교 표 ── */
#cmpPickers{margin-bottom:12px}
.cmp-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.cmp-tbl th{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.cmp-tbl td{padding:6px 10px;line-height:1.5;border-bottom:1px solid var(--line-soft)}
.cmp-tbl th + th,.cmp-tbl td + td{border-left:1px solid var(--line-soft)}
.cmp-tbl td:first-child{color:var(--ink-2);white-space:nowrap}
.cmp-h.top{color:var(--accent)}
.cmp-total td{font-size:15px;padding:10px;background:var(--surface-2)}
.cmp-total td.top b{color:var(--accent)}
.cmp-sec td{background:var(--surface-2);color:var(--muted);font-size:11.5px;text-align:left;
  padding:7px 10px;border-left:0 !important;border-top:1px solid var(--line)}
.cmp-tbl .chg{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.dp{color:var(--pos);font-family:"IBM Plex Mono",monospace;font-size:11px}
.dn{color:var(--neg);font-family:"IBM Plex Mono",monospace;font-size:11px}
.dz{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:11px}

/* 착용 구역과 후보 구역을 가르는 줄 */
.rune-tbl tbody tr.split-row td{background:var(--surface-2);color:var(--muted);
  font-size:11px;text-align:left;padding:4px 10px;border-left:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ── 착용 룬 속성 집계 ── */
.el-tally{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 12px;
  padding:7px 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.el-tally .et-hd{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.el-tally .et{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2)}
.el-tally .et b{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink)}
.el-tally .et.off{opacity:.42}
.el-tally .et-sum{margin-left:auto;font-size:11.5px;color:var(--muted)}
.el-tally .et-none{font-size:12px;color:var(--muted)}

/* ── 리롤 순서 ── */
.plan{margin:10px 0 14px}
.plan .pl-hd{font-size:11.5px;color:var(--muted);margin-bottom:6px}
.pl{display:grid;grid-template-columns:22px minmax(96px,1fr) minmax(150px,1.4fr) 74px 92px 52px;
  align-items:center;gap:9px;padding:6px 9px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.pl:first-of-type{border-top:1px solid var(--line-soft)}
.pl-n{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:var(--accent);color:var(--surface);
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700}
.pl-n.sm{width:16px;height:16px;font-size:10px;vertical-align:middle}
.pl-w{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-c{color:var(--ink-2)}
.pl-c b{color:var(--pos)}
.pl-g{font-family:"IBM Plex Mono",monospace;color:var(--pos);text-align:right}
.pl-g.neg{color:var(--neg)}
.pl-t{font-family:"IBM Plex Mono",monospace;color:var(--muted);font-size:11px;text-align:right}
.dim{color:var(--muted)}

/* ── 최적화 후 능력치 ── */
.fin-tbl{width:100%;border-collapse:collapse;font-size:12px}
.fin-tbl th{padding:6px 8px;border-bottom:1px solid var(--line);
  font-size:11px;color:var(--muted);white-space:nowrap}
.fin-tbl td{padding:7px 8px;border-bottom:1px solid var(--line-soft);
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right}
.fin-tbl td.l,.fin-tbl th.l{text-align:left;font-family:inherit;color:var(--ink-2);white-space:nowrap}
.fin-tbl th + th,.fin-tbl td + td{border-left:1px solid var(--line-soft)}
.fin-tbl tr.cmp-total td{background:var(--surface-2);color:var(--muted)}
.fin-tbl .dp,.fin-tbl .dn,.fin-tbl .dz{font-size:10.5px}

/* 인챈트에서 읽은 줄 */
.extra .ex.ok{border-color:color-mix(in srgb,var(--pos) 45%,var(--line));color:var(--pos)}
.extra .ex.ok i{color:var(--muted)}
.extra .ex-sub{display:block;width:100%;margin-top:5px;font-size:11px;color:var(--muted);line-height:1.5}

/* 손으로 최대치를 넣은 룬 */
.st-max{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}

/* 팝오버 안의 두 기준 비교 */
.mode-tbl{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:11.5px}
.mode-tbl th{text-align:left;color:var(--muted);font-weight:400;padding:3px 6px;
  border-bottom:1px solid var(--line-soft)}
.mode-tbl td{padding:4px 6px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:top}
.mode-tbl td:first-child{white-space:nowrap;color:var(--muted)}
.mode-tbl td:last-child{text-align:right;font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.mode-tbl tr.on td{color:var(--accent)}

/* 룬 최적화 추천 줄 */
.pl.ro{grid-template-columns:22px minmax(190px,1.1fr) minmax(220px,1.7fr) 74px 92px;
  align-items:start;padding:9px}
.pl.ro .pl-n{margin-top:1px}
.pl.ro .pl-w{white-space:normal}
.pl.ro .pl-g,.pl.ro .pl-t{margin-top:2px}
.pl.ro .pl-w b{color:var(--ink)}
.pl.ro .pl-c{color:var(--muted);font-size:11.5px}
#runeOptBody .cmp-tbl td:first-child{color:var(--muted)}
#runeOptBody .dim{font-size:11px}

/* 후보 순위 — 길어서 스크롤 */
.rank-wrap{max-height:420px;overflow-y:auto}
.rank-wrap thead th{position:sticky;top:0;background:var(--surface);z-index:1}
#runeOptBody .cmp-tbl tr.chg td{background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* 보유 룬 */
.owned-list{margin-top:10px}
.owned-list .ow-hd{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2);
  margin-bottom:7px}
.owned-list .ow-hd b{color:var(--accent)}
.owned-list .ow-hd .sv-b{margin-left:auto}
.ow-row{display:flex;gap:8px;align-items:baseline;padding:4px 0;
  border-top:1px solid var(--line-soft)}
.ow-names{font-size:11.5px;color:var(--muted);line-height:1.6}
/* 지금 고른 기준의 열을 강조 */
#runeOptBody .cmp-tbl td.val.on{color:var(--accent);font-weight:600}

/* 후보 순위의 효과 원문 — 두 줄까지만 보이고 나머지는 i 아이콘으로 */
.ro-text{display:block;margin-top:3px;font-size:11px;line-height:1.55;
  color:var(--muted);opacity:.85;max-width:60ch}
.st-fix{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 45%,var(--line))}
#runeOptBody .cmp-tbl td .rune-i{margin-left:5px}

/* 두 탭이 함께 쓰는 필터 */
#runeFilters{margin-bottom:12px}

/* 접이식 블록 (보유 룬 입력·목록) */
details.fold > summary.fold-hd{cursor:pointer;user-select:none;list-style:none;
  display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);padding:2px 0}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary.fold-hd::before{content:"▸";font-size:11px;color:var(--accent)}
details.fold[open] > summary.fold-hd::before{transform:rotate(90deg);display:inline-block}
details.fold[open] > summary.fold-hd{margin-bottom:9px}
details.fold > summary.fold-hd b{color:var(--accent)}
.fold-tip{margin-left:auto;font-size:11px;color:var(--muted);text-align:right}

/* 후보 순위 — 등급은 줄바꿈 금지, 룬 칸은 라벨 위 이름 아래 */
#runeOptRank .cmp-tbl th,
#runeOptRank .cmp-tbl td:nth-child(3){white-space:nowrap}
#runeOptRank .cmp-tbl td:nth-child(3) .badge{padding:2px 8px}
.ro-name{min-width:150px}
.ro-tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:3px}
.ro-nm{font-size:13px}
.ro-nm b{color:var(--ink)}
.warn-box.ok{border-color:color-mix(in srgb,var(--pos) 45%,var(--line));color:var(--ink-2)}
.warn-box.ok b{color:var(--pos)}
#filterSlotList,#filterSlotOpt{margin-bottom:0}
/* 검색 조건은 두 탭 모두 우측 정렬 */
#runeFilters{justify-content:flex-end}
#runeFilters #q{flex:0 1 240px}

/* 푸터 설명 두 문단을 5:5 로 나란히 */
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;align-items:start}
.foot-cols > p{margin:0}
@media (max-width:820px){.foot-cols{grid-template-columns:1fr;gap:7px 0}}

/* 테마 전환 버튼 */
.hd-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.theme-btn{appearance:none;background:var(--surface);color:var(--ink-2);
  border:1px solid var(--line);border-radius:99px;padding:5px 13px;
  font-family:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
.theme-btn .tb-dot{width:9px;height:9px;border-radius:50%;border:1px solid currentColor}
.theme-btn[data-t="dark"] .tb-dot{background:currentColor}
.theme-btn[data-t="auto"] .tb-dot{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}

/* 공증·피증 출처 내역 */
.break-box{margin-top:11px;padding:9px 10px;background:var(--surface-2);
  border:1px solid var(--line-soft);border-radius:7px}
.bk-row{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:11.5px;
  padding:3px 0;color:var(--muted)}
.bk-row + .bk-row{border-top:1px solid var(--line-soft)}
.bk-k{color:var(--ink-2);white-space:nowrap}
.bk-v{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--accent);
  margin-left:auto;order:3}
.bk-p{flex:1 1 100%;font-size:10.5px;opacity:.85;line-height:1.5}
.bk-tip{margin:7px 0 0;font-size:10.5px;color:var(--muted);line-height:1.5;
  padding-top:7px;border-top:1px dashed var(--line)}

.fs-sub{font-family:"IBM Plex Sans KR",system-ui,sans-serif;font-size:10.5px;
  letter-spacing:0;text-transform:none;color:var(--muted);margin-left:5px}

/* 각인 리롤 적용 */
.btn.sm{padding:2px 8px;font-size:11px}
.pl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--line-soft)}
.pl-foot .dim{font-size:11px;color:var(--muted);line-height:1.5}

/* ── 좁은 화면 (모바일) ──────────────────────
   룬 표는 7열이라 375px 에서 이름 칸이 49px 까지 눌린다.
   표를 버리고 한 줄에 하나씩 카드로 쌓는다. */
.only-narrow{display:none}

@media (max-width:640px){
  .only-narrow{display:inline-block}

  /* 표 머리글은 감추고 정렬은 셀렉트로 */
  .rune-tbl thead{display:none}
  .rune-tbl,.rune-tbl tbody{display:block;width:100%}

  .rune-tbl tbody tr{
    display:grid;
    grid-template-columns:auto auto auto 1fr;
    grid-template-areas:
      "rk el grade val"
      "name name name name"
      "up up btn btn";
    gap:6px 8px;align-items:center;
    padding:11px 12px;margin-bottom:8px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  }
  .rune-tbl tbody tr.eq{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .rune-tbl tbody tr.eq td{background:none}

  .rune-tbl tbody td{display:block;padding:0;border:0 !important;text-align:left;min-width:0}
  .rune-tbl tbody td:nth-child(1){grid-area:rk}
  .rune-tbl tbody td:nth-child(2){grid-area:el}
  .rune-tbl tbody td:nth-child(3){grid-area:grade}
  .rune-tbl tbody td:nth-child(4){grid-area:name;font-size:14px;line-height:1.6}
  .rune-tbl tbody td:nth-child(5){grid-area:val;text-align:right;font-size:15px}
  .rune-tbl tbody td:nth-child(6){grid-area:up}
  .rune-tbl tbody td:nth-child(7){grid-area:btn}

  .rune-tbl tbody .rk{font-size:12px;color:var(--muted);min-width:18px}
  .rune-tbl .up{width:100%;padding:7px;font-size:14px}
  .rune-tbl .btn{width:100%;padding:7px;font-size:13px}

  /* 구분줄과 빈 줄은 카드가 아니다 */
  .rune-tbl tbody tr.split-row{display:block;padding:6px 10px;margin-bottom:8px;
    background:var(--surface-2);border:0;border-radius:6px}
  .rune-tbl tbody tr.split-row td,
  .rune-tbl tbody td.empty-row{text-align:left}

  /* 나머지 표들은 가로로 밀어서 본다 */
  .tbl-wrap{-webkit-overflow-scrolling:touch}
  .cmp-tbl,.fin-tbl{min-width:560px}

  /* 화면 여백·타이포 */
  body{padding:16px 12px 48px}
  h1{font-size:26px}
  .lede{font-size:13.5px}
  .panel{padding:14px 13px}
  .filters .season-sel,.filters input[type=text]{flex:1 1 46%;min-width:0;width:auto}

  /* 각인 칸·리롤 순서는 세로로 */
  .pl,.pl.ro{grid-template-columns:22px 1fr;gap:4px 8px}
  .pl .pl-c,.pl .pl-g,.pl .pl-t,.pl .btn{grid-column:2}
  .pl-g,.pl-t{text-align:left}
}

@media (max-width:640px){
  /* 페이지 스크롤 안에 또 스크롤 상자를 두면 손가락이 갇힌다.
     좁은 화면에서는 높이 제한을 풀고 페이지와 함께 흐르게 둔다. */
  .rune-tbl ~ *,
  #rp-list .tbl-wrap,
  .rank-wrap{max-height:none;overflow-y:visible}

  /* 후보 순위표·교체 분석도 8열, 6열이라 좁은 화면에선 카드로 쌓는다 */
  #runeOptRank .cmp-tbl{min-width:0;display:block}
  #runeOptRank .cmp-tbl thead{display:none}
  #runeOptRank .cmp-tbl tbody{display:block}
  #runeOptRank .cmp-tbl tbody tr{
    display:grid;gap:5px 8px;align-items:center;
    padding:11px 12px;margin-bottom:8px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  }
  #runeOptRank .cmp-tbl tbody td{display:block;padding:0;border:0 !important;text-align:left;min-width:0}

  /* 후보 순위: # 속성 등급 룬 스탯 최대치 일반 버튼
     값 두 개와 버튼을 맨 아래 한 줄로 모은다. 위에 붙이면 카드 밖으로 넘친다. */
  #runeOptRank .rank-wrap tbody tr{
    grid-template-columns:auto auto 1fr;
    grid-template-areas:
      "rk el grade"
      "name name name"
      "stat stat stat"
      "mx auto btn";
  }
  #runeOptRank .rank-wrap tbody td:nth-child(1){grid-area:rk;font-size:12px;color:var(--muted)}
  #runeOptRank .rank-wrap tbody td:nth-child(2){grid-area:el}
  #runeOptRank .rank-wrap tbody td:nth-child(3){grid-area:grade;justify-self:start}
  #runeOptRank .rank-wrap tbody td:nth-child(4){grid-area:name;font-size:14px}
  #runeOptRank .rank-wrap tbody td:nth-child(5){grid-area:stat}
  #runeOptRank .rank-wrap tbody td:nth-child(6){grid-area:mx;font-size:14px;white-space:nowrap}
  #runeOptRank .rank-wrap tbody td:nth-child(7){grid-area:auto;font-size:12px;white-space:nowrap}
  #runeOptRank .rank-wrap tbody td:nth-child(8){grid-area:btn}
  #runeOptRank .rank-wrap tbody td:nth-child(6)::before{content:"최대치 ";font-size:10.5px;color:var(--muted);font-family:"IBM Plex Sans KR",sans-serif}
  #runeOptRank .rank-wrap tbody td:nth-child(7)::before{content:"일반 ";font-size:10.5px;color:var(--muted);font-family:"IBM Plex Sans KR",sans-serif}
  #runeOptRank .ro-text{font-size:10.5px;max-width:none}
  #runeOptRank .ro-name{min-width:0}
  #runeOptRank .ro-tags{margin-bottom:2px}

  /* 교체 분석: 부위 지금낀룬 지금기여 바꾼다면 딜변화 버튼 */
  #runeOptRank > .tbl-wrap:not(.rank-wrap) tbody tr{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "cat contrib"
      "old old"
      "to to"
      "gain btn";
  }
  #runeOptRank > .tbl-wrap:not(.rank-wrap) tbody td:nth-child(1){grid-area:cat;font-size:11px;color:var(--muted)}
  #runeOptRank > .tbl-wrap:not(.rank-wrap) tbody td:nth-child(2){grid-area:old;font-size:14px}
  #runeOptRank > .tbl-wrap:not(.rank-wrap) tbody td:nth-child(3){grid-area:contrib;text-align:right;font-size:12px}
  #runeOptRank > .tbl-wrap:not(.rank-wrap) tbody td:nth-child(4){grid-area:to;font-size:13px}
  #runeOptRank > .tbl-wrap:not(.rank-wrap) tbody td:nth-child(5){grid-area:gain;font-size:15px}
  #runeOptRank > .tbl-wrap:not(.rank-wrap) tbody td:nth-child(6){grid-area:btn}
  #runeOptRank > .tbl-wrap:not(.rank-wrap) tbody td:nth-child(3)::before{content:"지금 기여 ";font-size:10.5px;color:var(--muted);font-family:"IBM Plex Sans KR",sans-serif}
  #runeOptRank > .tbl-wrap:not(.rank-wrap) tbody td:nth-child(4)::before{content:"→ ";color:var(--muted)}
  #runeOptRank .cmp-tbl .btn{width:100%;padding:7px;font-size:13px}

  /* 교차 비교(행렬)와 세팅 비교는 가로로 미는 게 맞다 */
  #pane-hm .tbl-wrap,
  #cmpBody .tbl-wrap{overflow-x:auto}
}