/* 토스증권 RSI 자동매매 봇 — 웹판.
   색·글자 크기·여백을 토스23.py(tkinter) 화면과 같게 맞췄다.
     바탕 #1e1e2e · 머리말/표 #181825 · 로그 #11111b · 테두리 #313244
     글자 #cdd6f4 / 설명 #9399b2 / 흐린 설명 #6c7086
     파랑 #89b4fa · 초록 #a6e3a1 · 빨강 #f38ba8 · 노랑 #f9e2af
     주황 #fab387 · 보라 #cba6f7 · 하늘 #89dceb · 민트 #94e2d5
   국내 증시 관행대로 **이익은 빨강, 손실은 파랑** 이다 (토스 앱과 같다). */
:root{
  --bg:#1e1e2e; --bg2:#181825; --log:#11111b; --line:#313244; --line2:#45475a;
  --fg:#cdd6f4; --sub:#9399b2; --dim:#6c7086;
  --blue:#89b4fa; --green:#a6e3a1; --red:#f38ba8; --yellow:#f9e2af;
  --peach:#fab387; --mauve:#cba6f7; --sky:#89dceb; --teal:#94e2d5;
  --card:#181825; --card-run:#1b2a1f; --card-border:#313244; --card-border-run:#a6e3a1;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);
  font-family:"맑은 고딕","Malgun Gothic",system-ui,sans-serif;font-size:13.3px}
button{font-family:inherit;cursor:pointer;border-radius:4px;border:none;
  background:var(--line2);color:var(--fg);font-size:12px;font-weight:700;padding:5px 10px}
button:disabled{color:var(--dim);cursor:default}
button.flat{background:var(--line2)}
button.flat.green{color:var(--green)} button.flat.red{color:var(--red)}
button.flat.blue{color:var(--blue)} button.flat.peach{color:var(--peach)}
button.primary{background:var(--green);color:#1e1e2e;padding:6px 14px}
button.mini{background:transparent;color:var(--dim);font-weight:400;font-size:11px}
button.gap{margin-left:8px}
button.right{margin-left:auto}
button.w10{min-width:84px}
button.peach-btn{background:var(--peach);color:#1e1e2e;padding:6px 14px;font-size:13px}
input,select{font-family:inherit;font-size:12px;background:var(--line);color:var(--fg);
  border:1px solid var(--line);border-radius:3px;padding:4px 6px}
input:disabled{background:var(--bg);color:var(--dim)}
input:focus,select:focus{outline:1px solid var(--blue)}
input[type=checkbox],input[type=radio]{accent-color:var(--blue);width:14px;height:14px}
code{background:var(--log);padding:1px 4px;border-radius:3px;color:var(--teal)}
.hidden{display:none !important}
.w4{width:42px}.w5{width:52px}.w6{width:62px}.w7{width:74px}.w9{width:96px}
.w10{width:92px}.w13{width:110px}.w20{width:180px}
.hint{color:var(--sub);font-size:12px}
.note{color:var(--dim);font-size:12px;line-height:1.55;margin:4px 0 0}
.note.yellow{color:var(--yellow)}
.err{color:var(--red);font-size:12px;min-height:15px;margin:4px 0}
.sect{color:var(--blue);font-weight:700;font-size:13px}
.sect.blue{color:var(--blue);display:block;margin:10px 0 3px}
.line{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:4px 0}
.line-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.lbl{font-weight:700;font-size:12px}
.chk{display:inline-flex;gap:5px;align-items:center;font-size:12px;color:var(--fg)}
.chk.bold{font-weight:700}.chk.cyan{color:var(--sky)}

/* 로그인 */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-box{width:100%;max-width:390px;background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;padding:22px}
.login-box h1{font-size:17px;margin:0 0 6px;color:var(--blue)}
.login-box label{display:block;margin:14px 0 0;color:var(--sub);font-size:12px}
.login-box input{width:100%;margin-top:5px;padding:7px}
.login-box button{width:100%;margin-top:16px;padding:9px}

/* 머리말 */
.head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  background:var(--bg2);padding:6px 16px;margin:6px 10px 4px;border-radius:4px}
.head-title{color:var(--blue);font-size:16px;font-weight:700}
.head-ver{color:var(--sub);font-size:12px}
.head-right{margin-left:auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.acct-cap{color:var(--sub);font-size:12px}
.acct-rate{font-size:18px;font-weight:700;color:var(--dim)}
.acct-amt{font-size:13px;font-weight:700;color:var(--dim)}
.acct-sub{color:var(--sub);font-size:12px}

/* 탭 */
.tabs{display:flex;gap:3px;padding:0 10px;border-bottom:1px solid var(--line)}
.tab{background:var(--bg2);color:var(--sub);font-size:13.5px;font-weight:700;
  padding:7px 14px;border-radius:4px 4px 0 0}
.tab.active{background:var(--line);color:var(--fg)}
.panel{display:none;padding:8px 14px 6px}
.panel.active{display:block}

/* LabelFrame */
.group{border:1px solid var(--line);border-radius:4px;margin:6px 0;padding:8px 10px}
.group>legend{color:var(--blue);font-weight:700;font-size:13px;padding:0 6px}
.grid2{display:grid;grid-template-columns:auto minmax(120px,460px);gap:5px 10px;align-items:center}
.grid4{display:grid;grid-template-columns:auto minmax(120px,320px) auto auto;gap:5px 10px;align-items:center}
.grid2 label,.grid4 label{font-size:12.5px}
.listbox{background:var(--bg2);border:1px solid var(--line);max-height:120px;
  overflow:auto;margin:3px 0}
.listbox div{padding:4px 8px;font-size:12px;cursor:pointer}
.listbox div:hover{background:var(--line2)}
.cash{color:var(--green);font-weight:700;font-size:13px}

/* 카드 탭 */
.cardbar{display:flex;gap:4px;align-items:center;margin:6px 0 4px}
.cardtab{background:var(--bg);color:var(--sub);padding:3px 12px}
.cardtab.active{background:var(--line2);color:var(--yellow)}

/* 카드 — 3열 (GUI CARDS_PER_ROW=3) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 8px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:2px solid var(--card-border);border-radius:4px;
  padding:6px 10px 4px;cursor:pointer}
.card.run{background:var(--card-run);border-color:var(--card-border-run)}
.card-head{display:flex;align-items:baseline;gap:4px}
.card-name{font-size:15px;font-weight:700}
.card-code{color:var(--dim);font-size:12px}
.card-price{margin-left:auto;color:var(--yellow);font-size:21px;font-weight:700}
.pnl-box{display:grid;grid-template-columns:54px auto auto 1fr;gap:1px 6px;
  align-items:baseline;margin-top:2px}
.pnl-cap{color:var(--dim);font-size:12px}
.pnl-main{font-size:17px;font-weight:700;color:var(--dim)}
.pnl-day{font-size:13px;font-weight:700;color:var(--dim)}
.pnl-sub{color:var(--dim);font-size:12px}
.pnl-krw{font-size:13.5px;font-weight:700;color:var(--dim)}
.rsi-box{display:flex;align-items:baseline;gap:6px;margin-top:5px}
.rsi-cap{color:var(--dim);font-size:12px}
.rsi-val{color:var(--sky);font-size:20px;font-weight:700}
.rsi-sub{color:var(--sub);font-size:11px}
.bar{position:relative;height:10px;background:var(--log);margin-top:3px}
.bar i{position:absolute;left:0;top:3px;bottom:1px;background:var(--green)}
.bar u{position:absolute;top:0;bottom:0;width:2px;background:var(--yellow)}
.card-info{color:var(--sub);font-size:12px;margin-top:5px}
.card-size{display:flex;gap:3px;align-items:center;margin-top:3px;flex-wrap:wrap}
.card-size span{color:var(--sub);font-size:12px}
.card-size input{width:72px}
.card-size input.q{width:46px}.card-size input.p{width:40px}
.card-size .tp{color:var(--green)}.card-size .sl{color:var(--red)}
.card-state{font-size:12px;font-weight:700;color:var(--dim);margin-top:3px;
  white-space:pre-wrap;line-height:1.5}
.card-state.on{color:var(--green)}
.card-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin:4px 0 3px}
.card-btns button{padding:4px 0;font-size:13px}
.btn-start{background:var(--green);color:#1e1e2e}
.btn-start:disabled{background:var(--line2);color:var(--dim)}
.btn-stop{background:var(--line2);color:var(--dim)}
.btn-stop.on{background:var(--red);color:#1e1e2e}
.card-log{background:var(--log);color:var(--sub);font-size:11px;line-height:1.45;
  padding:2px 6px;height:62px;overflow:hidden;white-space:nowrap}
.card-log div{overflow:hidden;text-overflow:ellipsis}
.empty{color:var(--dim);text-align:center;padding:30px;white-space:pre-line}

/* 보유 종목 표 */
.hold-wrap{margin-top:8px}
.table-wrap{overflow:auto;max-height:420px;border:1px solid var(--line)}
table.tree{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--bg2)}
table.tree th{background:var(--line);color:var(--blue);font-weight:700;padding:6px;
  position:sticky;top:0;text-align:right;cursor:pointer;white-space:nowrap}
table.tree td{padding:5px 6px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--line)}
table.tree th.l,table.tree td.l{text-align:left}
table.tree th.c,table.tree td.c{text-align:center}
table.tree tbody tr{cursor:pointer}
table.tree tbody tr:hover td{background:var(--line2)}
table.tree tr.plus td{color:var(--red)}
table.tree tr.minus td{color:var(--blue)}
table.tree tr.dip td{background:#1b2a1f;color:var(--green)}

/* 단타 후보 */
.scan-title{color:var(--peach);font-size:18px;font-weight:700}
.cond-strong{font-size:12px;font-weight:700;margin:6px 0 2px}
.cond{color:var(--sub);font-size:12px;margin:1px 0}
.cond-warn{color:var(--yellow);font-size:12px;margin:3px 0;line-height:1.55}
.thr{gap:4px}
.scan-status{color:var(--sub);font-size:12px;margin:4px 0}

/* 전략 설정 — GUI 처럼 두 칸 */
.strat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:1000px){.strat{grid-template-columns:1fr}}
.field{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;gap:4px 8px;
  align-items:center;margin:3px 0}
.field>label{font-size:12.5px}
.field .unit{color:var(--dim);font-size:12px;font-style:italic}
.field .unit.plain{color:var(--sub);font-style:normal}
.row-inline{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin:4px 0}
.row-inline span{font-size:12px;color:var(--fg)}
.row-inline .cap{color:var(--yellow);font-weight:700}
.toggle{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:13px;margin:5px 0 2px}
.toggle.green{color:var(--green)}.toggle.yellow{color:var(--yellow)}
.toggle.peach{color:var(--peach)}.toggle.cyan{color:var(--sky)}
.toggle.teal{color:var(--teal)}.toggle.mauve{color:var(--mauve)}
.toggle.red{color:var(--red)}.toggle.small{font-size:12px;font-weight:400;color:var(--fg)}
.desc{color:var(--sub);font-size:12px;line-height:1.55;margin:3px 0 2px;white-space:pre-line}

/* 맨 아래 줄 · 전체 로그 */
.syslog{background:var(--log);color:var(--sub);font-size:12px;padding:5px 12px;
  margin:4px 10px 8px;border-radius:3px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fulllog{background:var(--log);margin:0 10px 8px;border-radius:3px;padding:6px 10px;
  height:40vh;overflow:auto;font-family:Consolas,"D2Coding",monospace;font-size:12px;
  line-height:1.6;white-space:pre-wrap;word-break:break-all}
.fulllog .t{color:var(--dim)}
.fulllog .s{color:var(--teal)}
.log-INFO{color:var(--fg)} .log-WARN{color:var(--yellow)} .log-ERR{color:var(--red)}
.log-BUY{color:var(--green);font-weight:700} .log-RSI{color:var(--blue)}
.log-COOL{color:var(--peach)} .log-TREND{color:var(--yellow);font-weight:700}

/* 카드 옵션 창 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;
  align-items:center;justify-content:center;padding:16px;z-index:50}
.modal-box{background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:14px;width:100%;max-width:560px;max-height:88vh;overflow:auto}
.modal-box h2{color:var(--blue);font-size:15px;margin:0 0 4px}
.quote{background:var(--bg2);padding:8px 12px;margin:8px 0}
.quote-price{color:var(--yellow);font-size:21px;font-weight:700}
.quote-sub{color:var(--sub);font-size:12px;margin-top:2px}
.grid3{display:grid;grid-template-columns:auto 130px 1fr;gap:5px 8px;align-items:center}
.grid3>label{font-size:12.5px}
.grid3 .side{font-size:12px;color:var(--green)}
.grid3 .side.blue{color:var(--blue)}