:root {
  --bg: #0b0e11; --panel: #161a1e; --panel2: #1e2329; --line: #2b3139; --line2: #252a30;
  --text: #eaecef; --muted: #848e9c; --dim: #5e6673;
  --up: #0ecb81; --down: #f6465d; --yellow: #f0b90b; --blue: #3b82f6; --purple: #c084fc;
  --up-bg: rgba(14, 203, 129, .12); --down-bg: rgba(246, 70, 93, .12); --yellow-bg: rgba(240, 185, 11, .12); --blue-bg: rgba(59, 130, 246, .14);
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
/* 웹앱: 화면 전체가 좌우로 밀리거나 확대·축소되지 않게 (표·차트 안 스크롤은 그대로) */
html, body { overflow-x: hidden; max-width: 100%; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, label, input, select { touch-action: manipulation; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 12px/1.45 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--muted); } .yellow { color: var(--yellow); }

/* ---------- 상단 ---------- */
header.top { height: 48px; display: flex; align-items: center; gap: 18px; padding: 0 16px; background: var(--panel);
  border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; font-size: 16px; letter-spacing: .5px; white-space: nowrap; }
.brand b { color: var(--yellow); }
.badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge.mode { background: var(--yellow-bg); color: var(--yellow); margin-left: 6px; }
.badge.mode.live { background: var(--down); color: #fff; }
.acct { display: flex; gap: 18px; overflow: hidden; }
.acct div { display: flex; flex-direction: column; white-space: nowrap; }
.acct span:first-child { color: var(--muted); font-size: 11px; }
.spacer { flex: 1; }
.conn { display: flex; gap: 10px; color: var(--muted); white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); margin-right: 4px; vertical-align: 1px; }
.dot.on { background: var(--up); } .dot.off { background: var(--down); }
.switch { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; }
.toggle { position: relative; width: 36px; height: 20px; flex: none; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle i { position: absolute; inset: 0; background: var(--line); border-radius: 20px; transition: .15s; }
.toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; }
.toggle input:checked + i { background: var(--up); }
.toggle input:checked + i::after { transform: translateX(16px); }
.toggle input:disabled + i { opacity: .4; cursor: not-allowed; }
.toggle.sm { width: 30px; height: 16px; } .toggle.sm i::after { width: 10px; height: 10px; }
.toggle.sm input:checked + i::after { transform: translateX(14px); }

#banner:empty { display: none; }
#banner { padding: 8px 16px; background: var(--yellow-bg); color: var(--yellow); border-bottom: 1px solid var(--line); }
#banner.err { background: var(--down-bg); color: var(--down); }
#banner code { background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 3px; }

/* ---------- 레이아웃 ---------- */
main.layout { display: grid; height: calc(100vh - 48px - var(--banner-h, 0px));
  grid-template-columns: 250px minmax(0, 1fr) 300px; grid-template-rows: minmax(360px, 1fr) 300px;
  grid-template-areas: "side chart trade" "side bottom trade"; gap: 1px; background: var(--line); }
.sidebar { grid-area: side; background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.center { grid-area: chart; background: var(--panel); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.trade { grid-area: trade; background: var(--panel); overflow-y: auto; min-height: 0; }
.bottom { grid-area: bottom; background: var(--panel); display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ---------- 종목 리스트 ---------- */
.side-top { padding: 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line2); }
.search { width: 100%; background: var(--panel2); border: 1px solid transparent; border-radius: 4px; padding: 6px 8px; outline: none; }
.search:focus { border-color: var(--yellow); }
.ftabs { display: flex; gap: 2px; }
.ftabs button { flex: 1; background: none; border: 0; padding: 5px 0; border-radius: 4px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.ftabs button.on { background: var(--panel2); color: var(--text); }
.ftabs button em { font-style: normal; color: var(--yellow); margin-left: 2px; }
.side-sort { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; padding: 0 2px; }
.side-sort select { background: none; border: 0; color: var(--muted); font-size: 11px; }
#symList { overflow-y: auto; flex: 1; }
.sym { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 7px 10px; cursor: pointer; border-left: 2px solid transparent; }
.sym:hover { background: var(--panel2); }
.sym.sel { background: var(--panel2); border-left-color: var(--yellow); }
.sym .nm { font-weight: 700; }
.sym .nm small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.sym .px { text-align: right; }
.sym .sub { color: var(--muted); font-size: 11px; display: flex; gap: 4px; flex-wrap: wrap; }
.sym .chg { text-align: right; font-size: 11px; }
.tag { font-size: 10.5px; padding: 0 5px; border-radius: 3px; font-weight: 600; white-space: nowrap; }
.tag.gap { background: var(--blue-bg); color: #8fb6ff; }
.tag.near { background: var(--yellow-bg); color: var(--yellow); }
.tag.ord { background: rgba(132,142,156,.18); color: var(--text); }
.tag.pos-up { background: var(--up-bg); color: var(--up); }
.tag.pos-down { background: var(--down-bg); color: var(--down); }
.tag.off { color: var(--dim); }
.tag.tn { border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.notice { background: var(--panel2); border-radius: 6px; padding: 10px; color: var(--muted); line-height: 1.5; }
.notice b { color: var(--text); }
.empty { color: var(--muted); padding: 24px 10px; text-align: center; }

/* ---------- 심볼 헤더 / 차트 ---------- */
.symhead { display: flex; align-items: center; gap: 22px; padding: 8px 14px; border-bottom: 1px solid var(--line2); overflow-x: auto; white-space: nowrap; }
.symhead .title { font-size: 17px; font-weight: 800; }
.symhead .title small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.symhead .last { font-size: 17px; font-weight: 700; }
.stat { display: flex; flex-direction: column; }
.stat span:first-child { color: var(--muted); font-size: 11px; }
.sigbar { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--line2); color: var(--muted); flex-wrap: wrap; }
.sigbar .chip { background: var(--panel2); border-radius: 4px; padding: 2px 8px; color: var(--text); }
.sigbar .chip b { color: #8fb6ff; }
.charttools { display: flex; align-items: center; gap: 2px; padding: 4px 10px; border-bottom: 1px solid var(--line2); overflow-x: auto; white-space: nowrap; }
.charttools button { background: none; border: 0; color: var(--muted); padding: 3px 8px; border-radius: 3px; font-weight: 600; white-space: nowrap; flex: none; }
.charttools button.on { color: var(--yellow); background: var(--panel2); }
.charttools .sep { width: 1px; height: 14px; background: var(--line); margin: 0 6px; }
.charttools label { color: var(--muted); display: flex; align-items: center; gap: 4px; margin-left: 8px; white-space: nowrap; flex: none; }
.chartwrap { position: relative; flex: 1; min-height: 0; }
#chart { position: absolute; inset: 0; }
.legend { position: absolute; left: 10px; top: 6px; z-index: 3; color: var(--muted); pointer-events: none; font-size: 11.5px; }
.legend b { color: var(--text); font-weight: 600; }

/* ---------- 하단 탭 ---------- */
.btabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line2); overflow-x: auto; flex: none; }
.btabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 9px 10px 7px; font-weight: 600; white-space: nowrap; }
.btabs button.on { color: var(--text); border-bottom-color: var(--yellow); }
.btabs .right { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.tbl-wrap { overflow: auto; flex: 1; }
table { width: 100%; border-collapse: collapse; }
th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 400; text-align: left; padding: 6px 10px; white-space: nowrap; z-index: 1; }
td { padding: 6px 10px; border-top: 1px solid var(--line2); white-space: nowrap; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--panel2); }
td .sname { font-weight: 700; } td .lev { font-size: 10.5px; color: var(--yellow); background: var(--yellow-bg); padding: 0 4px; border-radius: 3px; margin-left: 4px; }
.side-buy { color: var(--up); } .side-sell { color: var(--down); }
.lnk { background: none; border: 0; color: var(--yellow); padding: 0 4px; }
.lnk:hover { text-decoration: underline; }
.lnk.red { color: var(--down); }
.mini { width: 78px; background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; }
.who { font-size: 10.5px; padding: 0 4px; border-radius: 3px; background: var(--blue-bg); color: #8fb6ff; }
.who.man { background: rgba(132,142,156,.18); color: var(--muted); }
.st { font-size: 11px; font-weight: 600; }
.st.pending { color: #8fb6ff; } .st.armed { color: var(--yellow); } .st.open { color: var(--up); } .st.closed { color: var(--muted); }
.st.touched, .st.expired, .st.invalid, .st.skipped, .st.canceled, .st.error { color: var(--dim); }
.summary { padding: 8px 12px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line2); }
.summary b { color: var(--text); font-weight: 600; }
.lv-info { color: var(--muted); } .lv-warn { color: var(--yellow); } .lv-error { color: var(--down); }

/* ---------- 주문 패널 ---------- */
.tp { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 6px; }
.btn2 { flex: 1; background: var(--panel2); border: 0; border-radius: 4px; padding: 6px; font-weight: 600; }
.btn2:hover { background: var(--line); }
.otabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line2); }
.otabs button { background: none; border: 0; padding: 4px 0 6px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
.otabs button.on { color: var(--text); border-bottom-color: var(--yellow); }
.fld { display: flex; align-items: center; background: var(--panel2); border: 1px solid transparent; border-radius: 4px; padding: 0 8px; height: 36px; }
.fld:focus-within { border-color: var(--yellow); }
.fld label { color: var(--muted); white-space: nowrap; }
.fld input { flex: 1; min-width: 0; text-align: right; background: none; border: 0; outline: none; padding: 0 6px; font-family: var(--mono); }
.fld .unit { color: var(--text); white-space: nowrap; }
.fld select { background: none; border: 0; color: var(--text); }
.fld button { background: none; border: 0; color: var(--yellow); padding: 0 0 0 6px; font-size: 11px; }
.pcts { display: flex; gap: 4px; }
.pcts button { flex: 1; background: none; border: 1px solid var(--line); border-radius: 3px; padding: 3px 0; color: var(--muted); font-size: 11px; }
.pcts button:hover { color: var(--text); border-color: var(--muted); }
input[type=range] { width: 100%; accent-color: var(--yellow); }
.chk { display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; user-select: none; }
.chk input { accent-color: var(--yellow); }
.tpsl { display: none; flex-direction: column; gap: 6px; } .tpsl.on { display: flex; }
.kv { display: flex; justify-content: space-between; color: var(--muted); }
.kv b { color: var(--text); font-weight: 500; }
.buysell { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.buy, .sell { border: 0; border-radius: 4px; padding: 10px 0; font-weight: 700; color: #fff; font-size: 13px; }
.buy { background: var(--up); } .sell { background: var(--down); }
.buy:disabled, .sell:disabled { opacity: .35; cursor: not-allowed; }
.costs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; color: var(--muted); font-size: 11px; }
.hr { height: 1px; background: var(--line2); margin: 2px 0; }
.sigbox { background: var(--blue-bg); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.sigbox h4 { margin: 0; font-size: 12px; color: #8fb6ff; }
.sigbox button { background: var(--blue); border: 0; color: #fff; border-radius: 4px; padding: 6px; font-weight: 600; }
.h3 { font-weight: 700; margin-top: 4px; }

/* ---------- 계좌 전환 (자동매매 / 모의매매) ---------- */
body.a-manual .auto-only { display: none !important; }
.accts { display: flex; background: var(--panel2); border-radius: 6px; padding: 2px; flex: none; }
.accts button { background: none; border: 0; color: var(--muted); font-weight: 700; padding: 5px 11px; border-radius: 5px; white-space: nowrap; }
.accts button.on { background: var(--yellow); color: #111; }
body.a-manual .accts button.on { background: #8fb6ff; }
.flash-up { animation: fup .45s ease-out; } .flash-down { animation: fdn .45s ease-out; }
@keyframes fup { from { background: rgba(14, 203, 129, .28); } to { background: transparent; } }
@keyframes fdn { from { background: rgba(246, 70, 93, .28); } to { background: transparent; } }
.tag.kind { border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.more { color: var(--muted); text-align: center; padding: 10px; font-size: 11.5px; }

/* ---------- 수익 탭 ---------- */
.views { display: flex; gap: 2px; }
.views button { background: none; border: 0; color: var(--muted); font-weight: 700; padding: 6px 10px; border-radius: 4px; white-space: nowrap; }
.views button.on { color: var(--text); background: var(--panel2); }
.perf { display: none; height: calc(100vh - 48px - var(--banner-h, 0px)); overflow-y: auto; padding: 16px; background: var(--bg); }
body.v-perf main.layout { display: none !important; }
body.v-perf .perf { display: block; }
.perf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.perf-head h2 { margin: 0; font-size: 18px; }
.ranges { display: flex; gap: 4px; }
.ranges button { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 4px; padding: 5px 12px; font-weight: 600; }
.ranges button.on { color: var(--yellow); border-color: var(--yellow); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; margin-bottom: 12px; }
.card { background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 12px; min-width: 0; }
.card span { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 2px; }
.card b { font-size: 18px; font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.card small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.pcard { background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 12px; margin-bottom: 12px; min-width: 0; }
.pcard h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.legend2 { font-size: 11px; color: var(--muted); font-weight: 400; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.legend2 i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }
.pchart { height: 320px; position: relative; }
.pchart.sm { height: 200px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pgrid .tbl-wrap { max-height: 360px; }
.pempty { color: var(--muted); text-align: center; padding: 40px 10px; }

/* ---------- 대화상자 / 토스트 ---------- */
dialog { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 18px; width: 340px; }
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h3 { margin: 0 0 12px; font-size: 14px; }
dialog .acts { display: flex; gap: 8px; margin-top: 14px; }
dialog .acts button { flex: 1; border: 0; border-radius: 4px; padding: 8px; font-weight: 600; background: var(--line); }
dialog .acts .ok { background: var(--yellow); color: #000; }
.levval { text-align: center; font-size: 22px; font-weight: 700; margin: 8px 0; }
.seg { display: flex; gap: 6px; } .seg button { flex: 1; padding: 8px; border-radius: 4px; border: 1px solid var(--line); background: none; font-weight: 600; }
.seg button.on { border-color: var(--yellow); color: var(--yellow); }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: 360px; }
.toast { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: 6px; padding: 9px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4); animation: tin .2s; }
.toast.ok { border-left-color: var(--up); } .toast.err { border-left-color: var(--down); }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* ---------- 좁은 화면 / 휴대폰 웹앱 ---------- */
.mnav { display: none; }
@media (max-width: 1200px) {
  main.layout { grid-template-columns: 210px minmax(0, 1fr) 280px; }
  .acct div:nth-child(n+3) { display: none; }
}
@media (max-width: 900px) {
  html, body { overscroll-behavior: none; }
  input, select, textarea { font-size: 16px !important; }   /* 아이폰: 16px 미만 입력칸은 누를 때 자동 확대됨 */
  header.top { gap: 10px; padding: 0 12px; } .acct, .conn { display: none; }
  .brand { font-size: 14px; }
  main.layout { display: block; height: auto; background: var(--panel); }
  .sidebar, .center, .trade, .bottom { display: none; }
  body.m-list .sidebar, body.m-chart .center, body.m-bottom .bottom { display: flex; }
  body.m-trade .trade { display: block; }
  .sidebar, .center, .bottom, .trade { height: calc(100dvh - 48px - var(--banner-h, 0px) - 58px - env(safe-area-inset-bottom)); }
  .symhead { gap: 14px; padding: 8px 12px; }
  .stat:nth-of-type(n+4) { display: none; }
  .sigbar { max-height: 30%; overflow-y: auto; }
  .sym { padding: 10px 12px; }
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--panel);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .mnav button { flex: 1; background: none; border: 0; color: var(--muted); padding: 7px 0 6px; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .mnav button i { font-style: normal; font-size: 18px; line-height: 1.2; }
  .mnav button.on { color: var(--yellow); }
  .views { display: none; }
  .b-long, .sw-label { display: none; }
  .brand .badge { display: none; }
  .accts button { padding: 5px 9px; font-size: 12px; }
  .perf { height: calc(100dvh - 48px - var(--banner-h, 0px) - 58px - env(safe-area-inset-bottom)); padding: 12px; }
  .pgrid { grid-template-columns: 1fr; }
  .pchart { height: 240px; } .pchart.sm { height: 170px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card b { font-size: 15px; }
  #toasts { bottom: calc(66px + env(safe-area-inset-bottom)); right: 10px; left: 10px; max-width: none; }
  dialog { width: calc(100vw - 32px); }
}