/* 토스증권 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)}


/* ── 업비트판 추가 ───────────────────────────────────────── */
.runbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 14px}
.chip.krw{color:var(--green)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:1000px){.two{grid-template-columns:1fr}}
.state-big{font-size:17px;font-weight:700;color:var(--yellow);margin:2px 0 8px}
.grid-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.grid-kv span{color:var(--sub);font-size:12.5px}
.grid-kv b{font-size:13.5px}
.grid-kv b.big{font-size:17px}
.grid-kv b.wrap{white-space:pre-wrap;font-size:12.5px;line-height:1.5}
.green{color:var(--green)} .red{color:var(--red)} .sky{color:var(--sky)}
.peach{color:var(--peach)} .mauve{color:var(--mauve)} .blue{color:var(--blue)}
.dim{color:var(--dim)}
.warn{color:var(--yellow)}
.chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.funnel{display:flex;gap:4px;flex-wrap:wrap}
.funnel div{background:var(--bg2);border:1px solid var(--line);border-radius:4px;
  padding:4px 8px;font-size:12px}
.funnel div b{color:var(--yellow);margin-left:4px}

.tickerbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:4px 14px}
.ticker-tabs{display:flex;gap:4px;flex-wrap:wrap}
.ticker-tab{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);
  border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer;
  font-size:12.5px;color:var(--sub)}
.ticker-tab.on{border-color:var(--blue);color:var(--fg);background:var(--line)}
.ticker-tab.run{border-color:var(--green)}
.ticker-tab b{font-weight:700}
.ticker-tab .rate{font-weight:700}
.ticker-tab .x{color:var(--dim);border:none;background:transparent;padding:0 2px;
  font-size:13px;cursor:pointer}
.ticker-tab .x:hover{color:var(--red)}
.add-sel{max-width:190px}

/* ── 업비트15.py 창과 같은 2단 배치 ───────────────────────── */
.title{color:var(--blue);font-size:17px;font-weight:700;padding:8px 14px 2px;
  position:relative;text-align:center}
.title-sub{color:var(--dim);font-size:11.5px;font-weight:400}
.title .mini{position:absolute;right:12px;bottom:2px}
.main{display:grid;grid-template-columns:minmax(380px,640px) 1fr;gap:10px;
  padding:4px 14px 10px;align-items:stretch;min-height:calc(100vh - 120px)}
@media (max-width:1100px){.main{grid-template-columns:1fr}}
.col-left,.col-right{display:flex;flex-direction:column;gap:2px}
.runbar .sep{width:12px}
.table-wrap.short{max-height:220px}
.log{height:220px}

/* ── 제어 버튼 — 업비트15.py 와 같은 색·굵기·같은 폭 ────────────────────
   원본: 시작 #a6e3a1 / 정지 #f38ba8 / 로그 지우기 #585b70 / 설정 저장 #89b4fa,
   글자색 #1e1e2e(지우기만 #cdd6f4), pady 12, 네 개가 같은 폭으로 줄을 채운다.  */
.runbar{display:flex;gap:8px;margin:8px 0}
.runbar button{flex:1 1 0;padding:12px 0;font-size:15px;font-weight:700;
  border-radius:4px;border:none}
.runbar button.go{background:#a6e3a1;color:#1e1e2e}
.runbar button.go:hover{background:#94d3a2}
.runbar button.stop{background:#f38ba8;color:#1e1e2e}
.runbar button.stop:hover{background:#e07a96}
.runbar button.stop:disabled,.runbar button.go:disabled{color:#6c7086}
.runbar button#btn-clear-log{background:#585b70;color:#cdd6f4;font-size:13px}
.runbar button#btn-clear-log:hover{background:#6c7086}
.runbar button#btn-save{background:#89b4fa;color:#1e1e2e;font-size:13px}
.runbar button#btn-save:hover{background:#74a0e8}

/* 탭별 로그 영역 — 전환 시 보이기만 바꾼다 */
.log-pane{display:block}

/* 업비트15.py 와 같은 4열 표 (라벨·값·라벨·값) */
.grid-kv4{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 12px;
  align-items:baseline}
.grid-kv4 span{color:var(--sub);font-size:12.5px}
.grid-kv4 b{font-size:13.5px}
.grid-kv4 b.span3{grid-column:2 / -1}

/* 전략 설정 — 업비트15.py 처럼 한 행에 설정 두 개 (라벨+입력 짝이 2개) */
.grid-pairs{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px}
.grid-pairs .field{display:grid;grid-template-columns:auto minmax(70px,1fr);
  gap:3px 8px;align-items:center}
.grid-pairs .field label{font-size:12.5px;color:var(--sub)}
.grid-pairs .field .unit{grid-column:1 / -1;color:var(--dim);font-size:11px}
@media (max-width:760px){.grid-pairs{grid-template-columns:1fr}}

/* 제목 — 원본처럼 가운데, 버전은 오른쪽 위 */
.title{position:relative;text-align:center}
.title .title-sub{position:absolute;right:12px;top:2px;font-size:11px;color:var(--dim)}
.title #btn-logout{position:absolute;right:12px;bottom:2px}

/* 실행 로그 — 남는 세로 공간을 채운다 (원본과 같이) */
.col-left{display:flex;flex-direction:column}
.log{height:auto;min-height:220px;flex:1 1 auto;overflow:auto}

/* 매도 설정 — 원본처럼 [체크] · 항목명 · 입력값 을 한 행에 */
.sell-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(160px,1fr);
  gap:4px 14px;align-items:center;margin:2px 0}
.sell-row label.chk{margin:0}
.grid-pairs .field.tab-note{color:var(--dim);font-size:11.5px;display:block}
.grid-pairs .field.tab-note b{color:var(--yellow)}

/* ── 설정 격자 — 업비트15.py 의 4열 행 구성 그대로 ─────────────────────
   라벨 · 입력 · (라벨 또는 설명) · 입력  */
.grid4r{display:grid;grid-template-columns:auto minmax(72px,1fr) auto minmax(72px,1fr);
  gap:4px 10px;align-items:center}
.grid4r .lbl{color:var(--sub);font-size:12.5px;white-space:nowrap}
.grid4r .val input,.grid4r .val select,.grid4r .val2 input{width:100%}
.grid4r .hint{color:var(--dim);font-size:11px;line-height:1.35}
.grid4r .cell2{grid-column:span 2}
.grid4r .cell4{grid-column:1 / -1}
.grid4r .val2{grid-column:span 2}
.grid4r .row-inline{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.grid4r .row-inline select,.grid4r .row-inline input{width:auto;min-width:64px}
.grid4r .dim{color:var(--dim);font-size:11.5px}
.grid4r .dim b{color:var(--yellow)}
.grid4r label.chk{margin:0}

/* 매도 설정 — [체크] · 항목명 · 입력 · 설명 한 행 */
.grid4s{display:grid;grid-template-columns:auto auto minmax(70px,120px) 1fr;
  gap:4px 10px;align-items:center}
.grid4s .lbl{color:var(--sub);font-size:12.5px;white-space:nowrap}
.grid4s .hint{color:var(--dim);font-size:11px}
.grid4s .val input{width:100%}
.grid4s .cell4{grid-column:1 / -1}
.grid4s label.chk{margin:0}
@media (max-width:760px){
  .grid4r,.grid4s{grid-template-columns:auto 1fr}
  .grid4r .cell2,.grid4r .val2,.grid4s .hint{grid-column:1 / -1}
}

/* 실행 로그 — 오른쪽 열이 행 높이를 채우고, 로그가 남는 높이를 먹는다 (원본 log_frame) */
.col-right{min-height:0}
.group.logbox{display:flex;flex-direction:column;flex:1 1 auto;min-height:260px}
.group.logbox .log{flex:1 1 auto;height:auto;min-height:200px;overflow:auto}

/* API 키 — 원본처럼 키 두 행 오른쪽에 테스트 버튼이 두 행을 걸쳐 놓인다 */
.apikey{display:grid;grid-template-columns:auto 1fr auto;gap:5px 10px;align-items:center}
.apikey .tbtn{grid-row:1 / span 2;align-self:center}