/* 케이드봇 운영 콘솔 v4 — 다크 기본 / 밝은 테마는 같은 토큰 이름으로 값만 바꾼다.
   원칙: 유리 효과·그림자·그라데이션 없음, 모서리 카드 8px · 버튼 6px, 숫자는 고정폭, 애니메이션은 값이 바뀔 때만.
   포인트 색은 KADE 청록. 바이낸스 브랜드 노랑은 쓰지 않는다. 노랑 계열(--warn)은 경고에만 쓴다.
   글자색 대비 4.5:1 이상을 지키는 짝(--ink/--card, --tab-on-ink/--tab-on-bg …)은 시험(test_v4_ui.py)이 두 테마 모두 검사한다. */
:root,:root[data-theme="dark"]{
  --bg:#0B0E11;--bg2:#11161C;--card:#181E25;--card-hi:#202833;--line:#2A3441;
  --ink:#F0F3F6;--ink-2:#94A3B8;--mute:#8696AA;
  --up:#0ECB81;--dn:#F6465D;--live:#00C2FF;--warn:#F59E0B;--accent:#2EC4B6;--orange:#FB923C;
  --up-t:#0ECB81;--dn-t:#F6465D;
  --tab-on-bg:#2EC4B6;--tab-on-ink:#04211E;
  --seg-on-bg:#2EC4B6;--seg-on-ink:#04211E;
  --btn-bg:#11161C;--btn-ink:#F0F3F6;--btn-dis-bg:#11161C;--btn-dis-ink:#94A3B8;
  --btn-main-bg:#2EC4B6;--btn-main-ink:#04211E;
  --env-live-bg:#B3202F;--env-live-ink:#FFFFFF;
  --tint-up:color-mix(in srgb,#0ECB81 12%,transparent);--tint-dn:color-mix(in srgb,#F6465D 12%,transparent);--tint-warn:color-mix(in srgb,#F59E0B 12%,transparent);--tint-live:color-mix(in srgb,#00C2FF 12%,transparent);--tint-acc:color-mix(in srgb,#2EC4B6 12%,transparent);
  --gutter:12px;--r:8px;--r-b:6px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F3F5F7;--bg2:#E9EDF1;--card:#FFFFFF;--card-hi:#F0F4F8;--line:#D5DCE4;
  --ink:#12202B;--ink-2:#4B5B6B;--mute:#5F6E7E;
  --up:#0ECB81;--dn:#F6465D;--live:#0072A3;--warn:#A04A00;--accent:#087A70;--orange:#C2410C;
  --up-t:#0A7F54;--dn-t:#C42035;
  --tab-on-bg:#087A70;--tab-on-ink:#FFFFFF;
  --seg-on-bg:#087A70;--seg-on-ink:#FFFFFF;
  --btn-bg:#FFFFFF;--btn-ink:#12202B;--btn-dis-bg:#E9EDF1;--btn-dis-ink:#4B5B6B;
  --btn-main-bg:#087A70;--btn-main-ink:#FFFFFF;
  --env-live-bg:#B3202F;--env-live-ink:#FFFFFF;
  --tint-up:color-mix(in srgb,#0ECB81 14%,transparent);--tint-dn:color-mix(in srgb,#F6465D 12%,transparent);--tint-warn:color-mix(in srgb,#F59E0B 16%,transparent);--tint-live:color-mix(in srgb,#0072A3 10%,transparent);--tint-acc:color-mix(in srgb,#087A70 10%,transparent);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500;font-size:13px;line-height:1.5;word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden;
}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
[hidden]{display:none!important}
body.booting{visibility:hidden}
.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:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* 숫자는 고정폭: 자리가 바뀌어도 폭이 흔들리지 않는다 */
.num{font-family:"Cascadia Mono","SF Mono",Menlo,Consolas,"Roboto Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em;word-break:normal}
.up{color:var(--up-t)}.dn{color:var(--dn-t)}
.na{color:var(--mute)}
i{font-style:normal}
small{font-size:.86em}
.none{color:var(--mute);font-weight:600;padding:14px 8px;font-size:12.5px;text-align:center}
.warnc{color:var(--warn)}
.role-viewer .admin-only{display:none!important}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);min-width:0}
[data-help],[data-tip]{cursor:help}
button[data-help],a[data-help],.btnwrap[data-help]{cursor:pointer}
.btnwrap[data-help]{cursor:not-allowed}

/* 값이 바뀔 때만 한 번 깜빡임(200ms). 움직임을 줄이는 설정이면 끈다 */
@keyframes flashup{from{background:var(--tint-up)}to{background:transparent}}
@keyframes flashdn{from{background:var(--tint-dn)}to{background:transparent}}
@keyframes flashnt{from{background:var(--tint-live)}to{background:transparent}}
.fl-up{animation:flashup .2s ease-out}.fl-dn{animation:flashdn .2s ease-out}.fl-nt{animation:flashnt .2s ease-out}
@media (prefers-reduced-motion:reduce){.fl-up,.fl-dn,.fl-nt{animation:none}}

/* 말풍선 (help.js) */
.helptip{position:fixed;z-index:100;left:0;top:0;max-width:min(290px,calc(100vw - 16px));padding:8px 10px;border-radius:var(--r-b);background:var(--card-hi);border:1px solid var(--line);color:var(--ink);
  font-size:12.5px;line-height:1.45;font-weight:500;pointer-events:none;}
.helptip b{display:block;font-weight:700;margin-bottom:2px;color:var(--ink)}
.helptip span{display:block;color:var(--ink);word-break:keep-all}

/* 버튼 · 분할 버튼 · 칩 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--r-b);border:1px solid var(--line);background:var(--btn-bg);color:var(--btn-ink);font:inherit;font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:disabled{background:var(--btn-dis-bg);color:var(--btn-dis-ink);border-style:dashed;cursor:not-allowed}
.btn.danger{color:var(--dn-t);border-color:color-mix(in srgb,var(--dn) 55%,var(--line))}
.btn.danger:disabled{color:var(--dn-t)}
.btn-main{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:var(--r-b);border:0;background:var(--btn-main-bg);color:var(--btn-main-ink);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.btn-main:disabled{opacity:.7;cursor:wait}
.btn-link{align-self:center;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:600;font-size:13px;cursor:pointer;padding:6px 10px;border-radius:var(--r-b)}
.btn-link:hover{text-decoration:underline}
.icon-btn{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-b);border:1px solid var(--line);background:var(--btn-bg);color:var(--ink-2);cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--accent);color:var(--ink)}
.icon-btn .ic{width:16px;height:16px}
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-b);background:var(--bg2);border:1px solid var(--line)}
.seg button{border:0;background:transparent;font:inherit;font-weight:600;font-size:12px;color:var(--ink-2);padding:2px 9px;border-radius:4px;cursor:pointer;min-height:24px;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--seg-on-bg);color:var(--seg-on-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 9px;border-radius:var(--r-b);border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mute);flex:none}
.dot.ok{background:var(--up)}.dot.lag,.dot.sync,.dot.warn{background:var(--warn)}.dot.down,.dot.bad,.dot.diff{background:var(--dn)}.dot.na,.dot.gray{background:var(--mute)}

/* ===== 상태 바 (44px) ===== */
.sbar{position:sticky;top:0;z-index:30;background:var(--bg2);border-bottom:1px solid var(--line)}
.sbar .row{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 var(--gutter)}
.sbar .grp{display:flex;align-items:center;gap:8px;min-width:0}
.sbar .grow{flex:1}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:800;font-size:14px;letter-spacing:.02em;white-space:nowrap}
.logo{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-b);background:var(--accent);color:var(--tab-on-ink)}
.logo .ic{width:16px;height:16px}
.venue{font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.vsep{width:1px;align-self:stretch;margin:10px 2px;background:var(--line)}
.envb{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--r-b);font-size:12px;font-weight:800;letter-spacing:.04em;white-space:nowrap;
  color:var(--live);background:var(--tint-live);border:1px solid color-mix(in srgb,var(--live) 55%,transparent)}
.envb.live{background:var(--env-live-bg);color:var(--env-live-ink);border-color:var(--env-live-bg)}
.tabs{display:flex;gap:2px}
.tabs a{padding:5px 12px;border-radius:var(--r-b);text-decoration:none;font-weight:600;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.on{background:var(--tab-on-bg);color:var(--tab-on-ink)}
.tabs a.on:hover{color:var(--tab-on-ink)}
.chips{display:flex;align-items:center;gap:6px;min-width:0}
.chip.btnlike{cursor:pointer;font:inherit;font-size:12px;font-weight:600}
.chip.bot{color:var(--ink)}
.chip.bot .ic{width:13px;height:13px;color:var(--ink-2)}
.chip .sv{font-weight:700}
.chip .sv.ok{color:var(--up-t)}.chip .sv.lag{color:var(--warn)}.chip .sv.down{color:var(--dn-t)}.chip .sv.na{color:var(--mute)}
.sbtxt{font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sbtxt b{color:var(--ink);font-weight:700}
.sbtxt.stale{color:var(--warn)}
.clock{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.bellb{position:relative}
.bellb .cnt{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--dn-t);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center}
.bellb .cnt:empty{display:none}
.who{font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.who .ic{width:14px;height:14px}
.pop{position:absolute;right:8px;top:46px;width:min(360px,calc(100vw - 16px));padding:6px;border-radius:var(--r);background:var(--card-hi);border:1px solid var(--line);z-index:40;}
.pop .it{display:flex;gap:8px;padding:7px 8px;border-radius:var(--r-b);font-size:12.5px;font-weight:600;line-height:1.4}
.pop .it i{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}
.pop .it.red i{background:var(--dn)}.pop .it.orange i{background:var(--orange)}.pop .it.amber i{background:var(--warn)}
.pop .empty{padding:10px 8px;color:var(--mute);font-weight:600;font-size:12.5px}

/* 이상 띠 */
.hband{padding:6px var(--gutter) 0;display:flex;flex-direction:column;gap:4px}
.hband.fadein{animation:hin .12s ease-out}
@keyframes hin{from{opacity:0}to{opacity:1}}
.hl{display:flex;align-items:center;gap:10px;min-height:32px;padding:5px 12px;border-radius:var(--r);font-weight:600;font-size:12.5px;line-height:1.35;border:1px solid var(--line);background:var(--card)}
.hl i{width:8px;height:8px;border-radius:50%;flex:none}
.hl.red{background:var(--tint-dn);border-color:color-mix(in srgb,var(--dn) 55%,transparent);color:var(--dn-t)}.hl.red i{background:var(--dn)}
.hl.orange{background:color-mix(in srgb,var(--orange) 14%,transparent);border-color:color-mix(in srgb,var(--orange) 55%,transparent);color:var(--orange)}.hl.orange i{background:var(--orange)}
.hl.amber{background:var(--tint-warn);border-color:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--ink)}.hl.amber i{background:var(--warn)}
.hmore{font-size:12px;font-weight:600;color:var(--mute);padding-left:12px}

main{padding:0}
.page[hidden]{display:none}
.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}}

/* ===== 로그인 ===== */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login-card{position:relative;width:min(380px,100%);padding:30px 26px 24px;display:flex;flex-direction:column;gap:14px}
.login-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:.02em;margin-bottom:4px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.fld input{min-height:44px;padding:0 14px;border-radius:var(--r-b);border:1px solid var(--line);background:var(--bg2);font:inherit;font-size:16px;font-weight:500;color:var(--ink);outline:0}
.fld input:focus{border-color:var(--accent)}
.fld input[readonly]{opacity:.75}
.login-err{min-height:1.5em;margin:0;color:var(--dn-t);font-weight:600;font-size:13px}
.login-theme{position:absolute;top:14px;right:14px}

/* ===== 시스템 화면 ===== */
.sysmain{padding:12px var(--gutter) 32px}
.head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
.head h1{font-size:18px;font-weight:800;letter-spacing:-.01em}
.sys-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.sys-grid>.panel{flex:1 1 360px;min-width:0}
.sys-grid>.wide{flex:2 1 740px}
.panel{padding:14px 16px}
.panel h2{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;color:var(--ink)}
.panel h2 .r{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-2)}
.panel.off{border-color:color-mix(in srgb,var(--dn) 55%,var(--line));background:var(--tint-dn)}
.panel.off h2{color:var(--dn-t)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:12px;font-weight:600;color:var(--ink-2);padding:5px 8px;white-space:nowrap}
td{padding:6px 8px;border-top:1px solid var(--line);font-weight:500;vertical-align:middle}
th.r,td.r{text-align:right}
table.kv td{padding:6px 4px}
table.kv td:first-child{color:var(--ink-2);font-weight:600}
.rlist{max-height:280px;overflow:auto;font-size:12.5px;margin-top:4px}
.rr{display:flex;gap:10px;padding:4px 2px;border-top:1px solid var(--line)}
.rr.bad{color:var(--dn-t)}
.rr .num{color:var(--ink-2);flex:none;min-width:70px}
.lv-ok,.lv-info{color:var(--ink)}.lv-warn{color:var(--warn)}.lv-danger{color:var(--dn-t)}

@media (max-width:760px){
  .sys-grid>.panel,.sys-grid>.wide{flex:1 1 100%}
  .panel{padding:12px 12px}
}

/* 상태 바 폭별 배치: 1500 이하 거래소 문구 접기 → 1300 이하 접속 계정 글자 접기 → 900 이하 두 줄(윗줄 브랜드·환경·도구, 아랫줄 칩이 옆으로 밀림) */
@media (max-width:1500px){.venue{display:none}.sbar .vsep{display:none}}
@media (max-width:1380px){.who{display:none}.chip .ic{display:none}}
@media (max-width:1280px){.sbar .row{gap:6px}.chip{padding:0 7px}#c-lat-w{display:none}}
@media (max-width:1000px){
  .sbar .row{flex-wrap:wrap;row-gap:0;padding-top:0;padding-bottom:0}
  .sbar .brand{order:1}.sbar .envb{order:2}.sbar .grow{order:3}.sbar .clock{order:4;display:none}.sbar .bellb{order:5}.sbar .icon-btn#theme{order:6}.sbar .icon-btn#logout{order:7}
  .sbar .tabs{order:8}.sbar .chips{order:9}
  .sbar .row::after{content:"";order:8;flex:1 1 100%;height:0}
  .sbar .tabs,.sbar .chips{margin-bottom:6px}
  .sbar .chips{flex:1 1 0;overflow-x:auto;scrollbar-width:none;padding-bottom:0}
  .sbar .chips::-webkit-scrollbar{display:none}
  #c-lat-w{display:inline}
  .sbar .row{min-height:38px;padding-top:4px}
  .pop{top:42px}
}
@media (max-width:760px){.sbar .chips{flex-wrap:wrap;overflow:visible;row-gap:6px}}