:root{color-scheme:dark;--bg:#0b1020;--panel:#151e32;--line:#2b3852;--text:#edf2ff;--muted:#a6b3cc;--mint:#75e3c2;--danger:#ff99a7;--navh:72px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif;font-size:14px}
button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #75a5ff;outline-offset:3px}
h1,h2,h3,p,dl,dd{margin:0}h1{font-size:24px;letter-spacing:.07em}h2{font-size:15px}h3{font-size:12px;color:var(--muted);margin-bottom:10px}
.app-shell{width:min(760px,100%);min-height:100dvh;margin:auto;padding:18px 18px calc(var(--navh) + 24px + env(safe-area-inset-bottom))}
.topbar,.section-title,.dialog-head,.target-head,.tab-sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.topbar{margin-bottom:14px}
.eyebrow{color:var(--mint);font-size:10px;letter-spacing:.16em;font-weight:800;margin-bottom:4px}
.ghost,.primary,.danger{min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#10182a;color:var(--text)}
.ghost.compact{min-height:34px;padding:6px 10px;font-size:11px}.primary{background:var(--mint);border-color:var(--mint);color:#0b2320;font-weight:800}.danger{color:var(--danger);border-color:#754555}
.hud{background:#10192b;border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.hud>div{min-width:0}.hud span,.hud small{display:block;color:var(--muted);font-size:11px}.hud strong{display:block;font-size:24px;line-height:1.45;font-variant-numeric:tabular-nums}.hud strong small{display:inline;margin-left:3px}.hud b{font-weight:inherit}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}.section-title{margin-bottom:14px}.pill{font-size:10px;color:var(--mint);border:1px solid #356153;border-radius:6px;padding:4px 6px;white-space:nowrap}.muted{color:var(--muted);font-size:11px}
.main-arena{min-height:245px;display:flex;flex-direction:column;justify-content:center}.target-head{margin-top:8px;margin-bottom:10px}.hpbar{height:14px;border-radius:7px;overflow:hidden;background:#090f1c}#enemyHpFill{height:100%;background:#ef8191}.attack{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;margin-top:18px;padding:16px;border:0;border-radius:12px;background:var(--mint);color:#09251f;font-weight:900;font-size:19px}.attack span{font-size:12px;font-weight:600}
.status{color:var(--mint);min-height:40px;padding:11px 2px;font-size:12px;overflow-wrap:anywhere}
.tab-sheet{display:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:4px}.tab-sheet.open{display:block}.tab-sheet-head{margin-bottom:14px}.tab-panel{display:none}.tab-panel.active{display:block}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}dt{font-size:11px;color:var(--muted)}dd{font-weight:800;font-size:24px;font-variant-numeric:tabular-nums;margin-top:2px}.stat-note{color:var(--muted);font-size:11px;line-height:1.5;margin-top:10px}
.equipment-slot{display:block;width:100%;text-align:left;min-height:86px;border:1px solid #415776;border-radius:10px;padding:12px;background:#10182a;color:var(--text)}.equipment-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.equipment-actions b{color:var(--mint)}
.loot-name{font-weight:800;overflow-wrap:anywhere}.loot-meta{color:var(--muted);font-size:12px;line-height:1.6;margin-top:5px;overflow-wrap:anywhere}.loot-power{color:var(--mint);font-weight:800;margin-top:6px}.rarity-희귀{color:#87b8ff}.rarity-영웅{color:#d7a5ff}.rarity-전설{color:#ffd281}
.upgrade-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:60px;margin-top:8px;border:1px solid var(--line);border-radius:10px;padding:12px;background:#10182a;color:var(--text);text-align:left}.upgrade-row small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.upgrade-row strong{white-space:nowrap;font-size:13px}
.bottom-tabs{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:5;width:min(760px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#0d1525eF;border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(14px)}
.tab-button{min-height:56px;border:0;background:transparent;color:var(--muted);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.tab-button span{font-weight:800}.tab-button small{font-size:9px;color:#7f8da7}.tab-button.active{background:#18243a;color:var(--text)}.tab-button.active small{color:var(--mint)}
.log-fab{position:fixed;right:max(14px,calc((100vw - 760px)/2 + 14px));bottom:calc(var(--navh) + 16px + env(safe-area-inset-bottom));z-index:4;min-height:38px;padding:7px 11px;font-size:11px}
dialog{width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow-y:auto;border:1px solid #49617e;border-radius:18px;padding:22px;background:#151e32;color:var(--text);box-shadow:0 24px 80px #0008}dialog::backdrop{background:#030711bd}.dialog-head{margin-bottom:18px}.dialog-head h2{font-size:20px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-grid section{padding:14px;background:#0d1628;border:1px solid var(--line);border-radius:12px;min-width:0}.comparison{margin-top:14px;padding:12px;background:#10182a;border-radius:10px;font-size:13px;line-height:1.8}.positive{color:var(--mint)}.negative{color:var(--danger)}.item-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}.capacity-note{font-size:12px;color:var(--danger);margin-top:8px}.loot-list{display:grid;gap:8px;margin-top:12px}.loot-item{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#0d1628;color:var(--text)}.loot-item .loot-power{white-space:nowrap}.full{width:100%;margin-top:14px}.log{font-size:12px;line-height:1.8;color:var(--muted)}.log div{padding:7px 0;border-bottom:1px solid var(--line)}
@media(min-width:701px){.tab-sheet{display:block}.tab-sheet-head .ghost{display:none}.bottom-tabs{position:sticky;transform:none;left:auto;bottom:auto;width:100%;margin-top:12px;border:1px solid var(--line);border-radius:14px;padding:6px}.log-fab{position:static;float:right;margin-top:10px}.app-shell{padding-bottom:28px}}
@media(max-width:700px){.app-shell{padding:10px 12px calc(var(--navh) + 18px + env(safe-area-inset-bottom))}.topbar{margin-bottom:9px}h1{font-size:20px}.topbar .ghost{min-height:36px;padding:6px 10px;font-size:11px}.hud{padding:10px;gap:8px;margin-bottom:8px}.hud strong{font-size:21px}.hud span,.hud small{font-size:9px}.card{padding:14px;border-radius:12px}.main-arena{min-height:220px}.attack{min-height:58px;margin-top:14px}.status{font-size:11px;padding:8px 2px;min-height:34px}.tab-sheet{position:fixed;left:12px;right:12px;bottom:calc(var(--navh) + 12px + env(safe-area-inset-bottom));z-index:4;max-height:52dvh;overflow-y:auto;box-shadow:0 18px 60px #0009;margin:0}.stats-grid{grid-template-columns:1fr 1fr;gap:10px}.stats-grid dd{font-size:22px}.equipment-slot{min-height:80px}.bottom-tabs{--navh:72px}.log-fab{right:14px}}
@media(max-width:360px){.app-shell{padding-left:8px;padding-right:8px}.tab-sheet{left:8px;right:8px}.hud strong{font-size:18px}.tab-button{min-height:52px}.tab-button span{font-size:12px}}
