:root {
  --bg: #0f1218;
  --panel: #171b24;
  --panel-2: #1e2430;
  --chip: #262d3a;
  --line: #2a3140;
  --text: #e7ebf2;
  --muted: #8c96a8;
  --accent: #ff9f2e;
  --on-accent: #1a1205;
  --ok: #5fd38d;
  --warn: #ff7a6b;
  --rare: #4aa8ff;
  --epic: #a974ff;
  --unique: #ffc23d;
  --legendary: #8cd94a;
  --star: #ffd84d;
  --date: #ffcf91;
  --tag-bg: #2b3343;
  --tag-text: #c7d0e0;
  --notice-bg: #3a1f1c;
  --notice-line: #6b302a;
  --notice-text: #ffd4cf;
  --cost-low-bg: #1f3a2a; --cost-low: #9ff0bf;
  --cost-mid-bg: #2f3420; --cost-mid: #e3eb9c;
  --cost-high-bg: #3c2c1b; --cost-high: #ffcf91;
  --cost-max-bg: #3e1f1f; --cost-max: #ffaaa0;
  color-scheme: dark;
}
/* 기본은 다크. 헤더 버튼으로 라이트를 고르면 html[data-theme="light"]가 된다. */
:root[data-theme="light"] {
  --bg: #f4f5f8;
  --panel: #ffffff;
  --panel-2: #f0f2f6;
  --chip: #e3e7ee;
  --line: #d9dee7;
  --text: #1b2130;
  --muted: #5f6878;
  --accent: #e07a00;
  --on-accent: #ffffff;
  --ok: #1f9d55;
  --warn: #d6453a;
  --rare: #1f6fd1;
  --epic: #7a3fe0;
  --unique: #b07800;
  --legendary: #4a8f12;
  --star: #c48a00;
  --date: #a65a00;
  --tag-bg: #e3e7ee;
  --tag-text: #3a4356;
  --notice-bg: #fdecea;
  --notice-line: #f3b8b1;
  --notice-text: #8a2219;
  --cost-low-bg: #dcf5e6; --cost-low: #17683a;
  --cost-mid-bg: #f2f4d6; --cost-mid: #5e6410;
  --cost-high-bg: #fde9d2; --cost-high: #8a4b00;
  --cost-max-bg: #fde0dd; --cost-max: #9b2318;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Pretendard", "Malgun Gothic", system-ui, sans-serif;
}
h1, h2 { margin: 0; }
h1 { font-size: 18px; }
h2 { font-size: 15px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

.top { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; flex-wrap: wrap; }
.search { display: flex; gap: 6px; margin-left: auto; }
.theme { padding: 6px 10px; }
input, select, button { font: inherit; color: inherit; }
.search input {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; width: 200px;
}
button {
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 700; cursor: pointer;
}
button:disabled { opacity: .6; cursor: wait; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; padding: 6px 12px; }
select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }

main { padding-block: 20px 40px; display: grid; gap: 16px; }
#result { display: grid; gap: 16px; }
.notice { background: var(--notice-bg); border: 1px solid var(--notice-line); color: var(--notice-text); padding: 12px 14px; border-radius: 10px; }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; align-content: start; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.grid-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
@media (max-width: 760px) { .grid-top { grid-template-columns: 1fr; } }

.char { grid-template-columns: 96px 1fr; align-items: center; }
.char img { width: 96px; height: 96px; image-rendering: pixelated; background: var(--panel-2); border-radius: 10px; }
.char .name { font-size: 18px; font-weight: 700; }
.char dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; }
.char dt { color: var(--muted); }
.char dd { margin: 0; }

.targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.targets label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.targets .field { display: flex; align-items: center; gap: 4px; }
.targets input {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
}
.targets input.changed { border-color: var(--accent); }
.targets .unit { color: var(--muted); font-size: 12px; }

.head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg { display: flex; gap: 4px; }
.seg button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); padding: 3px 10px; font-weight: 500; font-size: 12px; }
.seg button.on { color: var(--text); border-color: var(--accent); }
.char .date { grid-column: 1 / -1; font-size: 12px; color: var(--date); }
.item.drop { opacity: .55; }
.pill { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.bar { height: 6px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ok); transition: width .3s; }
.plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.plan-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; background: var(--panel-2); border-radius: 8px; padding: 8px 10px; border-left: 3px solid var(--warn); }
.plan-row.ok { border-left-color: var(--ok); }
.plan-row img { width: 28px; height: 28px; object-fit: contain; }
.plan-row .slot { font-size: 12px; color: var(--muted); }
.plan-row .what { font-size: 13px; }
.plan-row .arrow { color: var(--accent); }

.todd { display: grid; gap: 6px; }
.todd-row { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: start; background: var(--panel-2); border-radius: 8px; padding: 8px 10px; }
.todd-row .slot { font-size: 12px; color: var(--muted); padding-top: 2px; }
.todd-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.todd-path .step { background: var(--chip); border-radius: 4px; padding: 1px 6px; color: var(--muted); }
.todd-path .step.src { color: var(--text); border: 1px solid var(--accent); }
.todd-path .step.me { color: var(--on-accent); background: var(--ok); font-weight: 700; }
.todd-path .arrow { color: var(--muted); }
.todd-row .note { grid-column: 2; font-size: 12px; color: var(--muted); }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); padding: 4px 10px; font-weight: 500; font-size: 12px; }
.filters button.on { color: var(--text); border-color: var(--accent); }

.recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: rec; }
.rec { display: grid; grid-template-columns: 30px 36px 1fr auto; gap: 10px; align-items: center; background: var(--panel-2); border-radius: 10px; padding: 10px 12px; }
.rec::before { counter-increment: rec; content: counter(rec); color: var(--accent); font-weight: 800; font-size: 16px; text-align: center; }
.rec img { width: 36px; height: 36px; object-fit: contain; }
.rec .title { font-weight: 600; }
.rec .sub { font-size: 12px; color: var(--muted); }
.rec .side { text-align: right; display: grid; gap: 4px; justify-items: end; }
.rec .gain { font-weight: 700; color: var(--ok); }
.tag { font-size: 11px; border-radius: 4px; padding: 1px 6px; background: var(--tag-bg); color: var(--tag-text); margin-right: 6px; }
.cost { font-size: 11px; border-radius: 4px; padding: 1px 6px; }
.cost-낮음 { background: var(--cost-low-bg); color: var(--cost-low); }
.cost-보통 { background: var(--cost-mid-bg); color: var(--cost-mid); }
.cost-높음 { background: var(--cost-high-bg); color: var(--cost-high); }
.cost-매우-높음 { background: var(--cost-max-bg); color: var(--cost-max); }
@media (max-width: 560px) {
  .rec { grid-template-columns: 24px 32px 1fr; }
  .rec .side { grid-column: 3; justify-items: start; text-align: left; }
}

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.item { background: var(--panel-2); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: 36px 1fr; gap: 4px 10px; }
.item img { width: 36px; height: 36px; object-fit: contain; grid-row: span 2; }
.item .slot { font-size: 11px; color: var(--muted); }
.item .nm { font-weight: 600; font-size: 13px; }
.item .meta { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.item .meta span { background: var(--chip); border-radius: 4px; padding: 1px 6px; }
.star { color: var(--star); }
.g-레어 { color: var(--rare); }
.g-에픽 { color: var(--epic); }
.g-유니크 { color: var(--unique); }
.g-레전드리 { color: var(--legendary); }
.foot { font-size: 12px; }

.cube-prices { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--muted); }
.cube-prices label, .cube td label { display: flex; align-items: center; gap: 6px; }
.cube-prices input, .cube input {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; width: 110px; color: var(--text);
}
.cube { display: grid; gap: 12px; overflow-x: auto; }
.cube h3 { margin: 0 0 4px; font-size: 13px; }
.cube h3 .muted { font-weight: 400; font-size: 12px; }
.cube table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 620px; }
.cube th, .cube td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cube th:first-child, .cube td:first-child { text-align: left; }
.cube th { color: var(--muted); font-weight: 500; }
.cube tr.best td { background: var(--panel-2); }
.cube tr.best td:first-child::after { content: '가성비'; margin-left: 6px; font-size: 11px; border-radius: 4px; padding: 0 5px; background: var(--accent); color: var(--on-accent); }
.cube .from { color: var(--muted); font-size: 11px; }
.card > .note { margin: 0; font-size: 12px; }