/* 레이아웃: 로그인, 고정 헤더, 12칸 작업 영역(좌 판단·중앙 차트·우 잔고/제어·하단 탭), 카드 */
.login{max-width:380px;margin:14vh auto;padding:0 16px}
.login .box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 24px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.login h1{margin:0 0 4px;font-size:20px}.login form{display:grid;gap:8px;margin-top:18px}.login form .btn{padding:10px 12px}
.mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:#fff;font:800 13px var(--mono);
  background:linear-gradient(135deg,#f43f5e,#6366f1 55%,#34d399);box-shadow:0 6px 18px rgba(244,63,94,.25);flex-shrink:0}
.login .mark{width:46px;height:46px;font-size:16px;margin-bottom:12px}
#app{max-width:1920px;margin:0 auto}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  background:rgba(17,24,39,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-weight:800;font-size:16px}
.sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:11px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 1.8s infinite;flex-shrink:0}.dot.off{background:var(--danger);animation:none}
.metrics{display:flex;gap:22px;font-family:var(--mono);padding-left:18px;border-left:1px solid var(--line)}
.metrics span{display:block;font-size:10px;color:var(--muted);font-family:var(--sans)}.metrics b{font-size:14px;padding:0 2px;border-radius:4px}
.actions{display:flex;gap:8px;flex-shrink:0}
.warn{list-style:none;margin:10px 14px 0;padding:0}
.warn li{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-left:3px solid var(--warn);color:#fcd34d;padding:8px 12px;border-radius:8px;margin-bottom:6px;font-size:12px}
.strat{margin:10px 14px 0}.shead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.tag{font:700 10px var(--mono);padding:2px 8px;border-radius:99px;color:#a5b4fc;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3)}
.strat summary{cursor:pointer;margin-top:10px;font-size:12px;font-weight:700;color:var(--accent2)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px 24px;margin-top:12px}
.sgrid h3{margin:0 0 6px;font-size:13px}.sgrid p,.sgrid li{margin:0 0 6px;font-size:12px;color:var(--muted);line-height:1.6}.sgrid ul{margin:0;padding-left:18px}.sgrid b{color:var(--ink)}
#ladder{font-family:var(--sans);margin-bottom:6px}#ladder tr.now{background:rgba(99,102,241,.18);outline:1px solid var(--accent)}
#ladder tr.now td:last-child:after{content:" ◀ 지금";color:var(--accent2);font-weight:700}
.ws{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;padding:10px 14px 14px}
.col-l{grid-column:span 3}.col-c{grid-column:span 6}.col-r{grid-column:span 3}.bottom{grid-column:span 12}
.col-l,.col-c,.col-r{display:flex;flex-direction:column;gap:10px;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;overflow-wrap:anywhere;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.card h2{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.card h2 .ic{color:var(--accent2)}
.chead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.chead .px{font:800 22px var(--mono)}.chead .chg{font:600 12px var(--mono);margin-left:8px}
.col-c .card{flex:1;display:flex;flex-direction:column}
.chart{height:360px}.col-c .chart{flex:1;min-height:360px}
.foot{font-size:11px;text-align:center;margin:4px 14px 24px}
@media (max-width:1280px){.col-l{grid-column:span 4}.col-c{grid-column:span 8}.col-r{grid-column:span 12}}
@media (max-width:900px){.col-l,.col-c,.col-r{grid-column:span 12}.metrics{display:none}.chart{height:280px}.top{padding:8px 10px}.ws{padding:8px 10px}}
@media (max-width:480px){.actions .btn span{display:none}.name{font-size:15px}}
