:root{
  --bg:#f6f4ef;--panel:#fff;--ink:#26241f;--muted:#7a766b;--line:#e2ded3;--accent:#c4621f;--accent-ink:#fff;--ok:#2f8f5b;--warn:#b07a00;
  --g-노말:#8b8b8b;--g-매직:#2f8f5b;--g-레어:#2f6fd0;--g-유니크:#c28a00;--g-준전설:#7b4fc9;--g-스페셜:#d0457a;
  --g-전설:#e0662b;--g-엘리트:#17a2a8;--g-에픽:#a02323;--g-인피니티:#1b1b1b;--g-정수:#6b8e23;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1a1916;--panel:#242320;--ink:#ece8de;--muted:#9a958a;--line:#3a3832;--accent:#e08545;--accent-ink:#1a1916;--g-인피니티:#e9e9e9;--g-노말:#a3a3a3;}}
:root[data-theme="dark"]{--bg:#1a1916;--panel:#242320;--ink:#ece8de;--muted:#9a958a;--line:#3a3832;--accent:#e08545;--accent-ink:#1a1916;--g-인피니티:#e9e9e9;--g-노말:#a3a3a3}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Pretendard","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif}
button,input,select{font:inherit;color:inherit}
h1{margin:0;font-size:1.5rem}h1 small{font-size:.8rem;color:var(--muted);font-weight:500}
h2{font-size:1.05rem;margin:1.2rem 0 .5rem}
.top{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:18px 16px 8px;max-width:1200px;margin:0 auto}
.brand p{margin:.3rem 0 0;color:var(--muted);font-size:.9rem}
.tabs{display:flex;gap:4px;max-width:1200px;margin:0 auto;padding:0 16px;overflow-x:auto;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;cursor:pointer;color:var(--muted);white-space:nowrap}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
main{max-width:1200px;margin:0 auto;padding:16px}
.pane[hidden]{display:none}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
input[type=search]{flex:1 1 220px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip,.chips button{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 11px;cursor:pointer;font-size:.85rem}
.chips button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ghost{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer}
.ghost:hover,.chip:hover{border-color:var(--accent)}
.muted{color:var(--muted)}.small{font-size:.82rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.card .res{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.card .ing{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.card .plus{color:var(--muted)}
.card.off{opacity:.55}
.card .miss{color:var(--warn);font-size:.85rem;margin-top:4px}
.u{border:0;background:none;padding:0;cursor:pointer;font-weight:600;text-align:left}
.u:hover{text-decoration:underline}
.g{display:inline-block;font-size:.72rem;font-weight:700;color:#fff;border-radius:4px;padding:0 6px;line-height:1.5;vertical-align:middle;background:var(--gc,#888)}
.badge{display:inline-block;min-width:1.6em;text-align:center;background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:.78rem;padding:0 7px}
.split{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:20px}
.split.wide{grid-template-columns:1fr minmax(260px,320px)}
@media (max-width:820px){.split,.split.wide{grid-template-columns:1fr}}
.owned{display:grid;gap:4px;max-height:70vh;overflow:auto;padding-right:4px}
.own{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.own .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.own button{width:28px;height:28px;border:1px solid var(--line);background:var(--bg);border-radius:6px;cursor:pointer}
.own output{min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
.own.has{border-color:var(--accent)}
.tableWrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{cursor:pointer;position:sticky;top:0;background:var(--panel);font-size:.85rem;color:var(--muted)}
th.sort::after{content:" ▾";color:var(--accent)}th.sort.asc::after{content:" ▴"}
tr:hover td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.skillGrid{display:grid;gap:8px;grid-auto-flow:row}
.node{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.node.lv{border-color:var(--accent)}
.node.lock{opacity:.5}
.node .t{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.node .d{color:var(--muted);font-size:.85rem;margin:2px 0 6px}
.node .c{display:flex;align-items:center;gap:8px;font-size:.85rem}
.node button{width:28px;height:28px;border:1px solid var(--line);background:var(--bg);border-radius:6px;cursor:pointer}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;align-self:start;position:sticky;top:8px}
.panel h2{margin-top:0}
.sum{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;padding:2px 0}
.sum .cap{color:var(--warn)}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);max-width:min(520px,94vw);width:100%;padding:14px 16px}
dialog::backdrop{background:rgba(0,0,0,.45)}
.dlgHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:8px 0}.dl dt{color:var(--muted)}.dl dd{margin:0}
.patch{white-space:pre-wrap;font:inherit;max-height:60vh;overflow:auto;margin:0}
.foot{max-width:1200px;margin:0 auto;padding:8px 16px 28px;color:var(--muted);font-size:.8rem}
.empty{color:var(--muted);padding:12px 0}