/* 케이드봇 운영 콘솔 — 라벤더 팔레트(케이드크루 site.css 토큰 그대로) */
/* 색 기준: 레퍼런스(Moorly) 캡처에서 뽑은 청록 계열. 라이트 #e6f8f6 하늘·민트, 포인트 #047b82 / 다크 #030f15 남색, 포인트 #6cccca */
:root{
  --bg:oklch(96.5% .02 195);
  --surface:oklch(100% 0 0);
  --ink:oklch(25% .06 250);
  --ink-2:oklch(40% .06 245);
  --ink-3:oklch(47% .05 240);
  --brand:oklch(52% .09 200);
  --brand-deep:oklch(42% .08 205);
  --brand-soft:oklch(94% .03 195);
  --brand-line:oklch(84% .05 200);
  --pink:oklch(64% .15 55);
  --grad:linear-gradient(135deg,oklch(48% .09 210) 0%,oklch(60% .1 185) 100%);
  --glass:color-mix(in srgb,#fff 58%,transparent);
  --glass-line:color-mix(in srgb,#fff 82%,transparent);
  --band:color-mix(in srgb,#fff 34%,transparent);
  --aur1:color-mix(in srgb,oklch(80% .08 225) 46%,transparent);
  --aur2:color-mix(in srgb,oklch(90% .08 70) 52%,transparent);
  --aur3:color-mix(in srgb,oklch(86% .09 175) 46%,transparent);
  --shadow:0 18px 44px -26px color-mix(in srgb,oklch(40% .08 215) 55%,transparent);
  --gutter:clamp(14px,2.2vw,40px);
  --r:24px;--r-s:14px;
  --no:oklch(52% .16 25);
  --dusk:transparent;
  --tab-on-bg:oklch(42% .08 205);--tab-on-ink:#fff;
  --t1:oklch(66% .1 195);--t2:oklch(76% .13 85);--t3:oklch(62% .1 245);--t4:oklch(68% .15 50);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:oklch(15% .03 225);--surface:oklch(21% .03 215);
  --ink:oklch(95% .012 200);--ink-2:oklch(83% .025 205);--ink-3:oklch(75% .03 210);
  --brand:oklch(78% .09 190);--brand-deep:oklch(84% .08 190);
  --brand-soft:oklch(27% .04 205);--brand-line:oklch(38% .05 205);
  --pink:oklch(74% .14 55);
  --grad:linear-gradient(135deg,oklch(62% .09 195) 0%,oklch(74% .09 185) 100%);
  --glass:color-mix(in srgb,oklch(22% .035 220) 66%,transparent);
  --glass-line:color-mix(in srgb,oklch(70% .06 200) 24%,transparent);
  --band:color-mix(in srgb,oklch(22% .035 220) 40%,transparent);
  --aur1:color-mix(in srgb,oklch(36% .07 195) 60%,transparent);
  --aur2:color-mix(in srgb,oklch(58% .15 55) 38%,transparent);
  --aur3:color-mix(in srgb,oklch(32% .08 250) 55%,transparent);
  --shadow:0 18px 44px -26px #000;
  --no:oklch(74% .14 25);
  --dusk:transparent;
  --tab-on-bg:oklch(84% .08 190);--tab-on-ink:oklch(15% .03 225);
  --t1:oklch(52% .09 195);--t2:oklch(58% .1 85);--t3:oklch(48% .09 245);--t4:oklch(56% .13 50);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  font-weight:500;font-size:15px;line-height:1.55;
  word-break:keep-all;overflow-wrap:break-word;
  background:
    radial-gradient(1600px 460px at 52% -8%,var(--aur2),transparent 70%),
    radial-gradient(1100px 640px at 0% 12%,var(--aur1),transparent 64%),
    radial-gradient(1200px 800px at 82% 104%,var(--aur3),transparent 62%),
    linear-gradient(180deg,oklch(96% .025 215),oklch(96% .03 180));
  background-attachment:fixed;
  overflow-x:hidden;
}
body.theming,body.theming *{transition:background-color .5s ease,color .5s ease,border-color .5s ease,fill .5s ease,stroke .5s ease!important}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
.ic{width:1.2em;height:1.2em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);box-shadow:var(--shadow);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}

/* 상단 바 */
.top{position:sticky;top:0;z-index:30;background:var(--glass);border-bottom:1px solid var(--glass-line);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.top .bar{display:grid;grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"brand tabs search run tools";align-items:center;gap:14px;padding:12px var(--gutter);min-height:68px}
.brand{grid-area:brand;color:var(--ink);display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.02em}
.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--grad);color:#fff;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
.logo .ic{width:22px;height:22px}
.tabs{grid-area:tabs;position:relative;justify-self:center;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--band);border:1px solid var(--glass-line)}
.tabs a{position:relative;z-index:1;padding:8px 18px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14.5px;color:var(--ink-2);white-space:nowrap;transition:color .25s}
.tabs a:hover{color:var(--ink)}
/* 활성 탭: 배경과 글자색을 a.on 한 규칙에 한 쌍으로 선언(알약 요소 없음). 대비 4.5:1 이상 */
.tabs a.on{background:var(--tab-on-bg);color:var(--tab-on-ink);box-shadow:0 8px 18px -12px color-mix(in srgb,var(--tab-on-bg) 80%,transparent)}
.tabs a.on:hover{color:var(--tab-on-ink)}
.search{grid-area:search;display:flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--glass-line);background:var(--band);color:var(--ink-3);width:210px}
.search input{border:0;background:transparent;outline:0;font:inherit;color:var(--ink);width:100%;min-width:0}
.search:focus-within{border-color:var(--brand)}
.btn-run{grid-area:run;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--brand-line);background:var(--glass);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .12s,border-color .12s}
.btn-run:hover{border-color:var(--brand)}
.btn-run:active{transform:translateY(1px)}
.btn-run.paused{background:var(--grad);color:#fff;border-color:transparent}
.tools{grid-area:tools;display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--glass-line);background:var(--band);color:var(--ink-2);cursor:pointer;padding:0;transition:border-color .12s,transform .12s}
.icon-btn:hover{border-color:var(--brand);color:var(--ink)}
.icon-btn:active{transform:scale(.95)}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--pink);border:2px solid var(--bg)}
.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800}
.bell-wrap{position:relative}
.pop{position:absolute;right:0;top:52px;width:300px;padding:10px;z-index:40;background:var(--surface)}
.pop[hidden]{display:none}
.pop li{list-style:none;display:flex;gap:12px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:600}
.pop li:hover{background:var(--brand-soft)}
.pop li time{color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
.pop ul{margin:0;padding:0}

/* 본문 */
main{padding:22px var(--gutter) 48px}
.page[hidden]{display:none}
.head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-bottom:18px}
.head h1{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-right:6px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:2px 12px;border-radius:999px;border:1px solid var(--brand-line);background:color-mix(in srgb,var(--brand) 9%,var(--glass));font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.chip.live{background:color-mix(in srgb,var(--pink) 12%,var(--glass))}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--brand);display:block}
.chip.stopped i{background:var(--no)}
.chip.sm{min-height:24px;padding:0 9px;font-size:12px}
.sp{flex:1}

/* 요약 카드 */
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-bottom:16px}
.card{padding:20px 22px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card{background:color-mix(in srgb,var(--t) 15%,var(--glass));border-color:color-mix(in srgb,var(--t) 38%,var(--glass-line))}
.card:nth-child(4n+1){--t:var(--t1)}.card:nth-child(4n+2){--t:var(--t2)}.card:nth-child(4n+3){--t:var(--t3)}.card:nth-child(4n){--t:var(--t4)}
.card .lb{font-size:14px;font-weight:700;color:var(--ink-2)}
.card .v{font-size:clamp(1.7rem,1.1rem + 1.5vw,2.6rem);font-weight:800;line-height:1.1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.card .v.neg{color:var(--no)}
.spark{display:block;width:100%;height:44px;margin-top:6px;overflow:visible}
.spark .ln{fill:none;stroke:url(#sg);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.spark .ar{fill:url(#sg);opacity:.14}
.spark .dt{fill:var(--pink);stroke:var(--surface);stroke-width:2}

/* 엔진 */
.engines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.eng{padding:22px 24px 18px;display:flex;flex-direction:column;gap:18px;min-width:0}
.eng.buy{background:color-mix(in srgb,var(--brand) 9%,var(--glass));border-color:var(--brand-line)}
.eng.sell{background:color-mix(in srgb,var(--pink) 9%,var(--glass));border-color:color-mix(in srgb,var(--pink) 36%,var(--glass-line))}
.eh{display:flex;align-items:center;gap:12px}
.eh h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.eh .cnt{margin-left:auto;font-size:15px;font-weight:700;color:var(--ink-2)}
.eh .cnt b{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.pips{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.pips i{height:10px;border-radius:5px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.pips i.f{background:var(--grad)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stat .lb{font-size:13.5px;font-weight:700;color:var(--ink-2);line-height:1.35;min-height:2.7em}
.stat .v{font-size:clamp(1.35rem,1rem + .9vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;font-variant-numeric:tabular-nums;margin-top:2px}
.stat .v.neg{color:var(--no)}
.bar2{height:8px;border-radius:5px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.bar2 i{display:block;height:100%;border-radius:5px;background:var(--grad)}

/* 항로 */
.route{position:relative;height:128px;margin:0 22px}
.route svg{position:absolute;left:0;top:0;width:100%;height:92px;overflow:visible}
.route .base{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:3;stroke-dasharray:2 8;stroke-linecap:round}
.route .fill{fill:none;stroke-width:4.5;stroke-linecap:round}
.route .nd{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--surface);border:2px solid var(--brand-line);transition:background .2s,border-color .2s}
.route .nd.d{background:var(--brand);border-color:var(--brand);width:20px;height:20px;margin:-10px 0 0 -10px}
.route .nd.d::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
:root[data-theme="dark"] .route .nd.d::after{border-color:oklch(15% .03 225)}
.route .nl{position:absolute;top:100px;transform:translateX(-50%);text-align:center;font-size:13.5px;font-weight:700;color:var(--ink-3);line-height:1.2;white-space:nowrap}
.route .nl small{display:block;font-size:11.5px;font-weight:600;margin-top:2px;opacity:.85}
.route .nl.d{color:var(--ink)}
.route .nl.cur{color:var(--brand-deep)}
.mover{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px -6px color-mix(in srgb,var(--brand) 85%,transparent),0 0 0 5px color-mix(in srgb,var(--brand) 18%,transparent)}
.mover .ic{width:20px;height:20px}

/* 표 */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rules-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.stack{display:grid;gap:16px;align-content:start;min-width:0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.panel{padding:20px 22px;min-width:0}
.panel h2{font-size:18px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel h2 .r{margin-left:auto;font-size:14px;font-weight:700;color:var(--ink-2)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:13px;font-weight:700;color:var(--ink-3);padding:6px 8px 8px;white-space:nowrap}
td{padding:11px 8px;border-top:1px solid color-mix(in srgb,var(--brand-line) 70%,transparent);font-weight:600;vertical-align:middle}
th.r,td.r{text-align:right}
td.num,th.num{font-variant-numeric:tabular-nums}
tbody tr:hover td{background:color-mix(in srgb,var(--brand) 6%,transparent)}
tr.sum td{font-weight:800;background:color-mix(in srgb,var(--brand) 8%,transparent)}
.pos{color:var(--brand-deep);font-weight:800}
.neg{color:var(--no);font-weight:800}
.tag{display:inline-flex;flex-direction:column;gap:1px;line-height:1.25}
.tag b{font-size:14px}
.tag small{font-size:12px;font-weight:600;color:var(--ink-3)}
.tag.b b{color:var(--brand-deep)}
.tag.s b{color:var(--pink)}
.date-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:6px}
.date-h h2{margin:0}
.date-h .tot{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.dsum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:2px 0 8px}
.dsum div{padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--brand) 8%,transparent);border:1px solid var(--glass-line)}
.dsum span{display:block;font-size:12px;font-weight:700;color:var(--ink-3)}
.dsum b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.todo .st{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:800;white-space:nowrap;border:1px solid var(--brand-line);background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand-deep)}
.todo .st.t{background:color-mix(in srgb,var(--pink) 12%,transparent);border-color:color-mix(in srgb,var(--pink) 40%,transparent);color:var(--ink-2)}
.todo .st.u{background:transparent;border-style:dashed;color:var(--ink-3)}
.bars{display:flex;flex-direction:column;gap:5px;min-width:90px}
.bars i{display:block;height:8px;border-radius:4px}
.bars .a{background:color-mix(in srgb,var(--ink) 28%,transparent)}
.bars .b{background:var(--grad)}
.vs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vsc{padding:18px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.vsc .lb{font-size:14px;font-weight:700;color:var(--ink-2)}
.vsc .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vsc .two span{display:block;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.vsc .two b{font-size:clamp(1.4rem,1.1rem + .8vw,2rem);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.vsc .two .bn b{color:var(--brand-deep)}
:root[data-theme="dark"] .vsc .two .bn b{color:var(--brand-deep)}

/* 탭 전환: 즉시 교체 + 120ms 페이드(오버레이 없음) */
.page.fade-in{animation:pgin .12s ease-out}
@keyframes pgin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.page.fade-in{animation:none}}

/* 반응형 */
@media (max-width:1400px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1280px){
  .top .bar{grid-template-columns:auto 1fr auto auto;grid-template-areas:"brand . run tools" "tabs tabs tabs tabs";gap:10px 12px}
  .search{display:none}
  .tabs{justify-self:stretch;justify-content:space-between}
  .tabs a{flex:1;text-align:center}
}
@media (max-width:1000px){
  .engines,.grid2,.vs,.rules-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .grid3{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:14px 14px 10px}
  .card .v{font-size:1.55rem}
  .eng{padding:18px 16px 14px;gap:16px}
  .stats{gap:8px}
  .stat .v{font-size:1.3rem}
  .stat .lb{font-size:12.5px}
  .route{margin:0 22px}
  .route .nl{font-size:12.5px}
  .route .nl small{font-size:10.5px}
  .tabs a{padding:8px 4px;font-size:13px}
  .btn-run{padding:0 14px}
  .panel{padding:16px 14px}
  td{padding:10px 4px;font-size:13.5px}
  th{padding:6px 4px 8px;font-size:12px}
  .dsum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand .bname{font-size:17px}
  .pop{width:min(300px,calc(100vw - 28px))}
}
@media (max-width:420px){
  .top .bar{padding:10px 14px}
  .tools{gap:6px}
  .icon-btn,.avatar{width:38px;height:38px}
  .btn-run{min-height:38px}
  .top .bar{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  body.theming,body.theming *{transition-duration:.01s!important}
}

:root[data-theme="dark"] body{background:
    radial-gradient(1000px 640px at 104% -6%,var(--aur2),transparent 62%),
    radial-gradient(1100px 700px at 0% 8%,var(--aur1),transparent 64%),
    radial-gradient(1200px 800px at 70% 108%,var(--aur3),transparent 62%),
    linear-gradient(180deg,oklch(13% .03 225),oklch(16% .035 235));background-attachment:fixed}
:root[data-theme="dark"] .btn-run.paused,:root[data-theme="dark"] .logo,:root[data-theme="dark"] .avatar,:root[data-theme="dark"] .mover{color:oklch(15% .03 225)}

/* 운영 현황 아래 영역 */
.lower{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-top:16px}
.chart-panel{padding:20px 22px 16px;display:flex;flex-direction:column;gap:12px}
.chart-panel .ch{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.chart-panel h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0}
.seg{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--glass-line);background:var(--band);margin-left:auto}
.seg button{border:0;background:transparent;font:inherit;font-weight:700;font-size:13.5px;color:var(--ink-2);padding:6px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.seg button.on{background:var(--grad);color:#fff}
:root[data-theme="dark"] .seg button.on{color:oklch(15% .03 225)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:18px;height:4px;border-radius:2px;background:var(--grad)}
.legend i.b{background:var(--pink)}
.legend b{font-variant-numeric:tabular-nums;color:var(--ink)}
.plot{position:relative;flex:1;min-height:300px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;column-gap:10px}
.yl{display:flex;flex-direction:column;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right;transform:translateY(-.6em);margin-bottom:.6em}
.cv{position:relative;min-height:260px}
.cv svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cv .gl{stroke:color-mix(in srgb,var(--ink) 12%,transparent);stroke-width:1;stroke-dasharray:3 5}
.cv .l1{fill:none;stroke:url(#sg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cv .l2{fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 5}
.cv .a1{fill:url(#ag)}
.xl{grid-column:2;display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--ink-3);padding-top:8px;font-variant-numeric:tabular-nums}
.side{padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.side h2{font-size:18px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.side h2 .r{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--ink-3)}
.lst{display:flex;flex-direction:column;margin:0 0 12px;padding:0}
.lst li{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--brand-line) 70%,transparent);font-weight:600;font-size:14.5px;min-width:0}
.lst li:first-child{border-top:0}
.lst .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand-deep)}
.lst .ico.s{background:color-mix(in srgb,var(--pink) 16%,transparent);color:var(--pink)}
.lst .tx{flex:1;min-width:0;line-height:1.35}
.lst .tx small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600}
.lst .rt{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;flex:none;line-height:1.35}
.todo .st{flex:none}
@media (max-width:1100px){.lower{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.chart-panel{padding:16px 14px}.seg{margin-left:0}.plot{min-height:240px}.cv{min-height:200px}.side{padding:16px 14px}}

/* ====== 1차 개편: 로그인 · 안전 띠 · 현황/포지션/기록/시스템 ====== */
:root{
  --warn:oklch(56% .13 72);--warn-bg:oklch(97% .04 85);--warn-line:oklch(80% .1 80);
  --bad-bg:oklch(96% .035 25);--bad-line:oklch(78% .1 25);
  --info:oklch(50% .05 255);
}
:root[data-theme="dark"]{
  --warn:oklch(82% .13 85);--warn-bg:oklch(28% .05 85);--warn-line:oklch(52% .09 85);
  --bad-bg:oklch(27% .06 25);--bad-line:oklch(52% .12 25);
  --info:oklch(80% .04 250);
}
[hidden]{display:none!important}
body.booting{visibility:hidden}
.sm{font-size:.78em;font-weight:600;color:var(--ink-3);margin-left:6px}
.none{color:var(--ink-3);font-weight:600;padding:14px 4px;font-size:14.5px}
.none.center{position:absolute;inset:0;display:grid;place-items:center;padding:0}
.warnc{color:var(--warn)}
.role-viewer .admin-only{display:none!important}

/* 로그인 */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login-card{position:relative;width:min(400px,100%);padding:34px 30px 28px;display:flex;flex-direction:column;gap:16px}
.login-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.fld input{min-height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--brand-line);background:color-mix(in srgb,var(--surface) 80%,transparent);font:inherit;font-size:16px;font-weight:600;color:var(--ink);outline:0}
.fld input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.login-err{min-height:1.5em;margin:0;color:var(--no);font-weight:700;font-size:14px}
.btn-main{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;border:0;background:var(--grad);color:#fff;font:inherit;font-weight:800;font-size:16px;cursor:pointer;transition:transform .12s,opacity .12s}
.btn-main:active{transform:translateY(1px)}
.btn-main:disabled{opacity:.6;cursor:wait}
:root[data-theme="dark"] .btn-main{color:oklch(15% .03 225)}
.login-theme{position:absolute;top:18px;right:18px;width:38px;height:38px}

/* 상단 */
.envchip{grid-area:run;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.04em;border:1px dashed var(--brand-line);color:var(--brand-deep);background:color-mix(in srgb,var(--brand) 8%,transparent)}
.envchip.live{border-style:solid;border-color:var(--bad-line);color:var(--no);background:var(--bad-bg)}
@media (min-width:1001px){.top{position:sticky}}
@media (max-width:1000px){.top{position:static}}

/* 안전 띠 */
.safety{padding:0 var(--gutter) 12px}
.sf-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sf-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i l w" "i v v";align-items:center;column-gap:10px;row-gap:0;padding:8px 14px;min-height:62px;border-radius:16px;border:1px solid var(--brand-line);background:color-mix(in srgb,var(--brand) 8%,var(--glass));min-width:0}
.sf-item .sfi{grid-area:i;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand-deep)}
.sf-item .sfl{grid-area:l;font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-item .sfv{grid-area:v;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.sf-item .sfw{grid-area:w;display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:800;color:var(--ink-3);white-space:nowrap}
.sf-item .sfw .ic{width:13px;height:13px}
.sf-item.sf-wide{grid-column:1/-1;grid-template-areas:"i l v w"}
.sf-item.lvl-warn{background:var(--warn-bg);border-color:var(--warn-line)}
.sf-item.lvl-warn .sfi,.sf-item.lvl-warn .sfw{color:var(--warn);background:transparent}
.sf-item.lvl-warn .sfi{background:color-mix(in srgb,var(--warn) 16%,transparent)}
.sf-item.lvl-danger{background:var(--bad-bg);border-color:var(--bad-line)}
.sf-item.lvl-danger .sfi{color:var(--no);background:color-mix(in srgb,var(--no) 16%,transparent)}
.sf-item.lvl-danger .sfw,.sf-item.lvl-danger .sfv{color:var(--no)}
.sf-item.lvl-info,.sf-item.lvl-na{background:color-mix(in srgb,var(--info) 9%,var(--glass));border-color:color-mix(in srgb,var(--info) 30%,var(--glass-line))}
.sf-item.lvl-info .sfi,.sf-item.lvl-na .sfi{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}
.sf-detail{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sf-detail li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:8px 14px;border-radius:12px;border:1px solid var(--warn-line);background:var(--warn-bg);font-size:14px;font-weight:700}
.sf-detail li.lvl-danger{border-color:var(--bad-line);background:var(--bad-bg);color:var(--no)}
.sf-detail small{font-weight:600;color:var(--ink-2);font-size:13px}

/* 카드·엔진 보강 */
.card .sub{font-size:12.5px;font-weight:600;color:var(--ink-3);line-height:1.35;overflow-wrap:anywhere}
.cards{grid-template-columns:repeat(6,minmax(0,1fr))}
.stat .v small.sm{display:block;margin:0;font-size:12.5px}
.stat .lb small.sm{margin-left:4px}
.eng .stats+.stats{margin-top:-2px}
.eng .cnt{margin-left:auto}
.idle{display:flex;flex-direction:column;gap:6px;padding:26px 0;align-items:flex-start}
.idle b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink-2)}
.idle span{color:var(--ink-3);font-weight:700}
.engines{margin-bottom:16px}

/* 가격·펀딩 */
.mid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
.pc .lb{font-size:13px;font-weight:700;color:var(--ink-2)}
.pc .v{font-size:clamp(1.25rem,1rem + .8vw,1.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.2}
.pc small{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.fclock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.ring{position:relative;width:148px;height:148px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .rt{stroke:color-mix(in srgb,var(--ink) 12%,transparent)}
.ring .rf{stroke:url(#sg);transition:stroke-dasharray .8s linear}
.rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.rc b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.rc small{font-size:11.5px;font-weight:700;color:var(--ink-3)}
table.kv td{padding:8px 4px}
table.kv td:first-child{color:var(--ink-2);font-weight:700;font-size:14px}
.panel.sb{background:color-mix(in srgb,var(--brand) 8%,var(--glass));border-color:var(--brand-line)}
.panel.ss{background:color-mix(in srgb,var(--pink) 8%,var(--glass));border-color:color-mix(in srgb,var(--pink) 34%,var(--glass-line))}
.panel.off{border-color:var(--bad-line);background:var(--bad-bg)}
.panel.off h2{color:var(--no)}
.gap-t{margin-top:16px}
.hm{}

/* 사이드 보강 */
.lst li.barli{padding:0 0 10px;border-top:0}
.lst li.barli .bar2{width:100%}
.bar2.big{height:12px;margin:2px 0 8px}

/* 기록·시스템 */
.dsum.big{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.dsum.big div{padding:14px 16px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line)}
.dsum.big span{font-size:13px}
.dsum.big b{font-size:clamp(1.3rem,1rem + .9vw,1.9rem);letter-spacing:-.03em}
.grid-rec{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.sys-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.sys-grid>.stack{align-content:stretch}
.sys-grid .wide{grid-column:span 2}

@media (max-width:1400px){
  .sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1100px){.grid-rec{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sf-item:last-child:nth-child(odd){grid-column:1/-1}
  .sf-item{padding:8px 10px;column-gap:8px;min-height:58px}
  .sf-item .sfi{width:28px;height:28px;border-radius:9px}
  .sf-item .sfv{font-size:14.5px}
  .safety{padding-bottom:10px}
  .prices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fclock{grid-template-columns:minmax(0,1fr);justify-items:center}
  .fclock .fkv{width:100%}
  .dsum.big{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sys-grid{grid-template-columns:minmax(0,1fr)}
  .sys-grid .wide{grid-column:auto}
  .hm{display:none}
  .login-card{padding:28px 20px 22px}
  .envchip{padding:0 10px;font-size:12px}
}

.btn-link{align-self:center;border:0;background:transparent;color:var(--brand-deep);font:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:6px 10px;border-radius:8px}
.btn-link:hover{text-decoration:underline}
.fld input[readonly]{opacity:.7}
