/* Mlaude GUI 토큰 */
:root{
  --bg:#F2F4F6; --card:#FFFFFF; --line:#EEF0F2; --line-2:#F2F4F6;
  --fg:#191F28; --fg-2:#333D4B; --fg-3:#4E5968; --muted:#6B7684; --faint:#8B95A1; --faint-2:#B0B8C1;
  --accent:#F47A35; --accent-ink:#C2531A; --accent-soft:#FFF1E8;
  --ok:#0E9F6E; --ok-soft:#E5F7F0; --warn:#C77700; --warn-soft:#FFF4E0;
  --crit:#E5363F; --crit-soft:#FEECEE; --rest:#5B5FD6; --rest-soft:#EEEFFC; --off:#6B7684; --off-soft:#F2F4F6;
  --gold:#B7791F; --map:#2B303C;
  --font:'Pretendard','Noto Sans KR',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 var(--font);letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{cursor:default;opacity:.4}
h1,h2,h3{margin:0}

/* ── 레이아웃 ── */
.app{min-height:100vh;min-height:100dvh;display:flex}
nav.side{width:188px;flex:none;background:var(--card);border-right:1px solid var(--line);padding:16px 10px 14px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;height:100dvh;padding-left:max(10px,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:8px;padding:0 8px 14px}
.mark{width:26px;height:26px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.brand b{font-size:15px;font-weight:700}
.brand span{font-size:12px;color:var(--faint);font-weight:500}
.nv{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:10px;color:var(--muted);font-weight:500;text-align:left;width:100%}
.nv:hover{background:var(--line-2)}
.nv[aria-current="page"]{background:var(--bg);color:var(--fg);font-weight:700}
.nv svg{width:18px;height:18px;flex:none}
.nv .cnt{margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:var(--crit);border-radius:999px;padding:0 6px;line-height:18px}
.side .grow{flex:1}
.side .mode{align-self:center;font-size:11px;font-weight:600;color:var(--muted);background:var(--bg);padding:3px 8px;border-radius:7px;margin-bottom:8px}
.big{height:44px;border-radius:12px;font-size:14px;font-weight:700;width:100%}
.big.go{background:var(--accent);color:#fff}
.big.stop{background:var(--bg);color:var(--fg-3)}
.side .hint{text-align:center;font-size:11px;color:var(--faint);padding-top:6px}

main{flex:1;min-width:0;padding:16px;padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.view{display:none;flex-direction:column;gap:12px;max-width:1600px;margin:0 auto}
.view.on{display:flex}
.vh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-left:4px;flex-wrap:wrap;min-height:34px}
.vh .t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vh h1{font-size:20px;font-weight:700}
.vh .s{font-size:12.5px;color:var(--faint)}
.card{background:var(--card);border-radius:18px;min-width:0}
.cap{font-size:12px;font-weight:600;color:var(--faint)}

/* ── 공통 ── */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 9px;border-radius:7px;white-space:nowrap}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.p-hunt{background:var(--accent-soft);color:var(--accent-ink)} .p-grow{background:var(--ok-soft);color:var(--ok)}
.p-town{background:var(--rest-soft);color:var(--rest)} .p-done{background:var(--rest-soft);color:var(--rest)}
.p-wait,.p-idle,.p-stop{background:var(--off-soft);color:var(--off)}
.p-err{background:var(--crit-soft);color:var(--crit)} .p-off{background:var(--warn-soft);color:var(--warn)}
.t-hunt{color:var(--accent-ink)} .t-grow{color:var(--ok)} .t-town,.t-done{color:var(--rest)} .t-wait,.t-stop,.t-idle{color:var(--faint)} .t-err{color:var(--crit)} .t-off{color:var(--warn)}
.seg{display:grid;grid-auto-flow:column;gap:4px;padding:4px;background:var(--bg);border-radius:11px}
.seg button{height:30px;padding:0 11px;border-radius:8px;font-size:13px;color:var(--faint);font-weight:500;white-space:nowrap}
.seg button.on{background:var(--card);color:var(--fg);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg button .n{font-size:11px;margin-left:4px;color:var(--faint-2);font-weight:600}
.btn{height:34px;padding:0 12px;border-radius:9px;background:var(--bg);color:var(--fg-2);font-size:13px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.btn:hover:not(:disabled){background:var(--line)}
.btn.w{background:var(--card)}
.btn.pri{background:var(--accent);color:#fff}
.btn.pri:hover:not(:disabled){filter:brightness(1.05);background:var(--accent)}
.btn.dark{background:var(--fg);color:#fff}
.btn.dark:hover:not(:disabled){background:var(--fg-2)}
.btn.red{color:var(--crit)}
.btn svg{width:15px;height:15px;flex:none}
.ib{width:34px;height:34px;border-radius:9px;background:var(--bg);color:var(--fg-3);display:inline-grid;place-items:center;flex:none}
.ib:hover:not(:disabled){background:var(--line);color:var(--fg)}
.ib svg{width:16px;height:16px}
.field{height:34px;padding:0 10px;border:1.5px solid transparent;background:var(--bg);border-radius:9px;font-size:13px;font-weight:500;color:var(--fg);min-width:0}
.field:focus{outline:none;border-color:var(--accent);background:var(--card)}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;margin:0;cursor:pointer;flex:none}
.sw{position:relative;flex:none;width:42px;height:26px;border-radius:999px;background:#D1D6DB;padding:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:left .15s}
.sw[aria-pressed="true"]{background:var(--accent)}
.sw[aria-pressed="true"]::after{left:19px}
.swl{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3);font-weight:500}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.bar.rot i{background:var(--rest)}
.empty{text-align:center;color:var(--faint);padding:40px 0;font-size:13px}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px}
.tools .q{width:220px}
.tools .sp{flex:1}
.bulk{display:none;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:14px;background:var(--accent-soft);font-size:13px;flex-wrap:wrap}
.bulk.on{display:flex}
.bulk b{color:var(--accent-ink)}
.bulk .sp{flex:1}

/* 화면 */
.screen{position:relative;border-radius:12px;overflow:hidden;background:var(--map);aspect-ratio:16/9;display:block;width:100%;padding:0}
button.screen{cursor:pointer}
.screen svg{display:block;width:100%;height:100%}
.screen .tag{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:3px 7px;border-radius:6px}
.screen .tag i{width:6px;height:6px;border-radius:50%;background:#FF5A5F}
.screen .tag.still i{background:#B0B8C1}
.screen .tr{position:absolute;right:8px;top:8px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:3px 7px;border-radius:6px}
.screen .bl{position:absolute;left:8px;bottom:8px;right:8px;display:flex;justify-content:space-between;gap:6px;font-size:11px;font-weight:600;color:#fff}
.screen .bl span{background:rgba(0,0,0,.5);padding:2px 7px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen .blank{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#A4ADBB;font-size:12px;padding:16px;line-height:1.5}
.screen .hover{position:absolute;inset:0;display:grid;place-items:center;background:rgba(25,31,40,.45);color:#fff;font-size:13px;font-weight:700;opacity:0;transition:opacity .12s}
button.screen:hover .hover{opacity:1}

/* ── 홈 ── */
.hero{display:flex;gap:24px;padding:20px}
.hero-l{width:260px;flex:none;display:flex;flex-direction:column}
.hero-l .big-v{font-size:30px;font-weight:700;letter-spacing:-0.02em;margin-top:10px;line-height:1.25;color:var(--gold)}
.hero-l .big-v small{font-size:14px;color:var(--faint);font-weight:600;margin-left:3px}
.hero-l p{margin:4px 0 0;font-size:13px;color:var(--faint)}
.kv{border-top:1px solid var(--line-2);padding-top:12px;margin-top:auto;display:flex;flex-direction:column;gap:9px;font-size:13px}
.kv div{display:flex;justify-content:space-between;gap:8px}
.kv span{color:var(--faint)} .kv b{font-weight:600}
.hero-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.hr-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px}
.hr-h b{font-size:14px;font-weight:700}
.chart{display:flex;align-items:flex-end;gap:6px;flex:1;min-height:150px;padding-top:8px}
.chart div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;min-width:0}
.chart i{width:100%;max-width:40px;border-radius:6px 6px 2px 2px;background:var(--accent);min-height:2px}
.chart i.now{background:var(--accent-ink)}
.chart i.z{background:var(--line)}
.chart em{font-style:normal;font-size:10.5px;color:var(--faint);white-space:nowrap}
.chart span{font-size:11px;color:var(--faint-2)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{padding:16px 18px}
.tile .v{font-size:22px;font-weight:700;margin-top:4px;letter-spacing:-0.02em;line-height:1.3}
.tile .v small{font-size:13px;color:var(--faint);font-weight:600;margin-left:3px}
.tile .s{font-size:12px;color:var(--faint);margin-top:2px}
.sec{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sec-h b{font-size:15px;font-weight:700}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.wl{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:16/9;background:var(--map);padding:0;outline:2px solid transparent;outline-offset:-2px}
.wl svg{display:block;width:100%;height:100%}
.wl.w-err{outline-color:var(--crit)} .wl.w-off{opacity:.45} .wl.w-idle,.wl.w-done,.wl.w-stop{opacity:.7}
.wl .lb{position:absolute;left:4px;bottom:4px;font-size:10.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:1px 6px;border-radius:5px;max-width:calc(100% - 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl .bk{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;color:#A4ADBB;font-weight:600}
.wl:hover{outline-color:var(--accent)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.li{display:flex;align-items:center;gap:12px;min-height:54px;border-bottom:1px solid var(--line-2);width:100%;text-align:left;padding:0 2px}
.li:last-child{border-bottom:0}
.li:hover{background:#FAFBFC}
.li .rk{width:22px;font-weight:700;color:var(--faint);text-align:center;flex:none}
.li .tx{flex:1;min-width:0}
.li .t1{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .t1 small{font-size:12px;color:var(--faint);font-weight:500;margin-left:5px}
.li .t2{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .v{font-size:14px;font-weight:700;color:var(--gold);flex:none}
.li .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.li .ic svg{width:17px;height:17px}
.ava{width:36px;height:36px;border-radius:10px;background:var(--map);color:#FFD400;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}

/* ── PC 카드 ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;align-items:start}
.pcc{padding:12px;display:flex;flex-direction:column;gap:10px;border:1.5px solid transparent}
.pcc.pk{border-color:var(--accent)}
.pcc-h{display:flex;align-items:center;gap:8px;padding:0 2px}
.pcc-h .nm{font-weight:700;font-size:15px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pcc-h .nm:hover{color:var(--accent-ink)}
.pcc-h .sp{flex:1}
.pcc-h .res{font-size:11.5px;color:var(--faint);white-space:nowrap}
.now{background:var(--bg);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;text-align:left;width:100%}
button.now:hover{background:#ECEEF1}
.now-t{display:flex;align-items:center;gap:10px}
.now .tx{flex:1;min-width:0}
.now .n{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now .n small{font-size:11px;font-weight:700;color:var(--accent-ink);margin-right:5px}
.now .j{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now .lv{font-size:18px;font-weight:700;line-height:1.1;text-align:right;flex:none}
.now .lv small{display:block;font-size:11px;color:var(--faint);font-weight:600}
.now .bar{background:var(--card)}
.now-r{display:flex;justify-content:space-between;font-size:12px;color:var(--faint);gap:8px}
.now-r b{color:var(--fg-2);font-weight:600}
.now-r .g{color:var(--ok);font-weight:600}
.now.none{color:var(--faint);font-size:13px;align-items:center;padding:16px}
.queue{display:flex;flex-direction:column}
.q-h{display:flex;justify-content:space-between;padding:0 2px 4px}
.qr{display:grid;grid-template-columns:20px minmax(0,1fr) auto 64px;align-items:center;gap:8px;min-height:32px;padding:0 4px;border-radius:8px;text-align:left;font-size:12.5px;width:100%}
.qr:hover{background:var(--bg)}
.qr.on{background:var(--accent-soft)}
.qr .no{width:20px;height:20px;border-radius:6px;background:var(--bg);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted)}
.qr.on .no{background:var(--accent);color:#fff}
.qr .qn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr .qn small{font-weight:500;color:var(--faint);margin-left:4px}
.qr .qs{font-size:11.5px;font-weight:600;white-space:nowrap}
.qr .qm{text-align:right;font-weight:600;color:var(--gold);font-size:12px}
.qr .qm.z{color:var(--faint-2);font-weight:500}
.pc-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--line-2);padding:10px 2px 0}
.pc-sum span{display:block;font-size:11.5px;color:var(--faint)}
.pc-sum b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-sum b.g{color:var(--gold)}
.acts{display:flex;gap:6px}
.acts .btn{flex:1;height:34px;padding:0 8px;font-size:12.5px}

/* ── 계정 표 ── */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:1240px}
th{text-align:left;font-size:12px;font-weight:600;color:var(--faint);padding:10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--card)}
td{padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;vertical-align:middle}
tbody tr.ac{cursor:pointer}
tbody tr.ac:hover td{background:#FAFBFC}
tbody tr.pk td{background:var(--accent-soft)}
tr.grp td{background:var(--bg);font-size:13px;padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--line)}
tr.grp .gi{display:flex;align-items:center;gap:10px}
tr.grp .ar{width:14px;color:var(--faint);transition:transform .12s;display:inline-block}
tr.grp.cl .ar{transform:rotate(-90deg)}
tr.grp b{font-weight:700}
tr.grp .gs{color:var(--faint);font-size:12px}
tr.grp .gs b{color:var(--gold)}
td.r,th.r{text-align:right}
tfoot td{font-weight:700;border-top:1px solid var(--line);border-bottom:0;background:var(--bg)}
.sub2{font-size:12px;color:var(--faint)}
.cc{display:flex;align-items:center;gap:9px}
.cc .ava{width:30px;height:30px;border-radius:9px;font-size:12px}
.cc b{font-weight:700}
.cc small{display:block;font-size:11px;color:var(--faint)}
.mexp{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.mexp .bar{width:52px}

/* ── 원격 ── */
.rm{display:grid;grid-template-columns:250px minmax(0,1fr) 310px;gap:12px;align-items:start}
.rm-list{padding:10px;display:flex;flex-direction:column;gap:8px;position:sticky;top:16px;max-height:calc(100dvh - 32px)}
.rm-items{overflow:auto;display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:0 4px}
.rmi{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;text-align:left;width:100%}
.rmi:hover{background:var(--line-2)}
.rmi.on{background:var(--accent-soft)}
.rmi .dt{width:8px;height:8px;border-radius:50%;flex:none}
.rmi .tx{flex:1;min-width:0}
.rmi b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmi span{display:block;font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmi input{margin-left:2px}
.rm-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.rm-bar{padding:10px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rm-bar .ti{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.rm-bar .ti b{font-size:16px;font-weight:700}
.rm-bar .sp{flex:1}
.chip{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--bg);padding:3px 8px;border-radius:7px;white-space:nowrap}
.stage .screen{border-radius:16px}
.screen.live{cursor:default}
.screen.ctl{outline:3px solid var(--accent);outline-offset:-3px;cursor:crosshair}
.ctlbar{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.rip{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #FFD400;pointer-events:none;animation:rip .6s ease-out forwards}
@keyframes rip{from{transform:scale(.4);opacity:1}to{transform:scale(1.8);opacity:0}}
.multi{display:grid;gap:8px}
.multi .screen{border-radius:12px}
.rm-side{padding:14px;display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}
.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.meters div{background:var(--bg);border-radius:10px;padding:8px 10px}
.meters span{display:block;font-size:11px;color:var(--faint)}
.meters b{font-size:15px;font-weight:700}
.rq{display:flex;flex-direction:column;gap:6px}
.rqi{border-radius:12px;background:var(--bg);padding:9px 10px;display:flex;flex-direction:column;gap:6px}
.rqi.on{background:var(--accent-soft)}
.rqi-t{display:flex;align-items:center;gap:8px}
.rqi .no{width:20px;height:20px;border-radius:6px;background:var(--card);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted);flex:none}
.rqi.on .no{background:var(--accent);color:#fff}
.rqi .tx{flex:1;min-width:0;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.rqi .tx small{font-weight:500;color:var(--faint);margin-left:4px;font-size:11.5px}
.rqi .tx:hover{color:var(--accent-ink)}
.rqi-b{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--faint)}
.rqi-b .bar{flex:1;background:var(--card)}
.rqi-a{display:flex;gap:6px}
.rqi-a .btn{height:30px;font-size:12px;flex:1;background:var(--card)}
.rqi-a .btn.pri{background:var(--accent)}

/* 기록 */
.log{padding:8px;display:flex;flex-direction:column;min-height:420px}
.lg{display:flex;padding:5px 10px;font-size:13px;color:var(--fg-2)}
.lg .t{width:84px;flex:none;font-size:12px;color:var(--faint-2)}
.lg .p{width:110px;flex:none;font-size:12px;font-weight:700;color:var(--fg-3)}

/* 상세 */
.scrim{position:fixed;inset:0;background:rgba(25,31,40,.32);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--bg);z-index:80;transform:translateX(100%);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:12px;overflow:auto;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) 12px}
.drawer.on{transform:none}
.dsec{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.d-top{display:flex;align-items:center;gap:12px}
.d-top .ava{width:48px;height:48px;font-size:18px;border-radius:13px}
.d-top h2{font-size:20px;font-weight:700}
.d-top .sub{font-size:13px;color:var(--faint)}
.d-top .x{margin-left:auto;align-self:flex-start}
.d-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.d-acts .btn{height:40px}
.kvg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
.kvg span{display:block;font-size:12px;color:var(--faint)}
.kvg b{display:block;font-size:15px;font-weight:700}
.kvg small{font-size:11.5px;color:var(--faint);font-weight:500}
.dchart{display:flex;align-items:flex-end;gap:5px;height:110px}
.dchart div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.dchart i{width:100%;border-radius:5px 5px 2px 2px;background:var(--accent);min-height:2px}
.dchart i.z{background:var(--line)}
.dchart span{font-size:10px;color:var(--faint-2)}

/* ── 성장 ── */
.gchart{position:relative;min-width:0}
.gchart svg{display:block;width:100%;height:auto;overflow:visible}
.ax{font-size:11px;fill:#8B95A1;font-family:var(--font)}
.ctip{position:absolute;top:-6px;transform:translate(-50%,-100%);background:var(--fg);color:#fff;font-size:12px;line-height:1.5;padding:7px 10px;border-radius:9px;pointer-events:none;opacity:0;white-space:nowrap;transition:opacity .1s;z-index:5}
.ctip b{font-weight:700}
.ctip span{color:var(--faint-2)}
.lgd{display:flex;gap:12px;font-size:12px;color:var(--faint);flex-wrap:wrap}
.lgd span{display:inline-flex;align-items:center;gap:5px}
.lgd i{display:inline-block;width:10px;height:10px;border-radius:3px}
.lgd i.ln{height:3px;width:14px;border-radius:2px}
.tile .s .up{color:var(--ok);font-weight:600}
.tile .s .dn{color:var(--crit);font-weight:600}
.dist{display:flex;flex-direction:column;gap:8px}
.dr{display:grid;grid-template-columns:64px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:12.5px}
.dr b{font-weight:600}
.dr .bs{display:flex;flex-direction:column;gap:3px}
.dr .bs i{display:block;height:8px;border-radius:4px;min-width:2px}
.dr .n{text-align:right;font-weight:700}
.dr .n small{display:block;font-size:11px;color:var(--faint);font-weight:500}
.lvup{font-weight:700;color:var(--ok);margin-left:4px;font-size:12px}
.spark{display:block}
.more{height:40px;margin:4px 12px 12px;border-radius:10px;background:var(--bg);font-size:13px;font-weight:600;color:var(--fg-2)}
.more:hover{background:var(--line)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--fg);color:#fff;padding:11px 16px;border-radius:12px;font-size:13px;font-weight:500;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.18);max-width:calc(100vw - 32px)}

@media (max-width:1280px){
  .rm{grid-template-columns:230px minmax(0,1fr)}
  .rm-side{grid-column:1/-1;position:static}
}
@media (max-width:1100px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .row2{grid-template-columns:1fr} }
@media (max-width:860px){
  .hero{flex-direction:column} .hero-l{width:auto} .kv{margin-top:14px}
  .rm{grid-template-columns:1fr}
  .rm-list{position:static;max-height:260px}
}
@media (max-width:760px){
  .app{flex-direction:column}
  nav.side{width:auto;height:auto;flex-direction:row;align-items:center;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;gap:4px;z-index:40}
  .brand{padding:0 6px 0 0}
  .brand span{display:none}
  .nv{width:auto;flex:none}
  .side .grow,.side .mode,.side .hint{display:none}
  .big{width:auto;padding:0 14px;height:38px;flex:none;font-size:13px}
  .tools .q{width:100%}
  .tools .sp{display:none}
  .grid{grid-template-columns:1fr}
  .kvg{grid-template-columns:repeat(2,minmax(0,1fr))}
}