/* ═══════════════════════════════════════════════════════════
   TraidApp — shared design system (Binance-style terminal)
   navy dark · green accent · 한국식 상승=빨강/하락=파랑
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg-0:#090c12; --bg-1:#0e121b; --bg-2:#141925; --bg-3:#1b2230;
  --line:#212838; --line-2:#2c3546;
  --t-hi:#eaecef; --t-mid:#8b95a5; --t-lo:#535d6c;
  --up:#f0616d;   --up-bg:rgba(240,97,109,.12);
  --down:#4a8ef0; --down-bg:rgba(74,142,240,.12);
  --flat:#8b95a5;
  --acc:#22c780;  --acc-dim:#138a5a; --acc-bg:rgba(34,199,128,.12); --acc-glow:rgba(34,199,128,.45);
  --warn:#e0a82e; --warn-bg:rgba(224,168,46,.12);
  --idle:#535d6c;
  --r-sm:6px; --r-md:9px; --r-lg:12px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body {
  background:var(--bg-0); color:var(--t-hi);
  font-family:'IBM Plex Sans',-apple-system,sans-serif;
  font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
.num { font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.up{color:var(--up);} .down{color:var(--down);} .flat{color:var(--flat);} .acc{color:var(--acc);}
.lbl { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--t-lo); white-space:nowrap; }
a { color:inherit; }

/* ═══ SHELL ═══ */
.shell { display:flex; min-height:100vh; }
.side {
  width:214px; flex-shrink:0; background:var(--bg-1);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.side .brand { display:flex; align-items:center; gap:10px; padding:18px 18px 14px; }
.side .mark {
  width:28px; height:28px; border-radius:7px; background:var(--acc); color:#04130c;
  display:grid; place-items:center; font-weight:700; font-size:16px; box-shadow:0 0 16px var(--acc-glow);
}
.side .brand .wn { font-weight:700; font-size:16px; letter-spacing:-.01em; }
.side .live {
  margin:0 18px 16px; padding:7px 11px; display:flex; align-items:center; gap:8px;
  background:var(--acc-bg); border:1px solid rgba(34,199,128,.25); border-radius:var(--r-sm);
  font-size:11px; font-weight:600; color:var(--acc); white-space:nowrap;
}
.side .live .pdot { width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc-glow); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.nav { display:flex; flex-direction:column; gap:2px; padding:0 10px; }
.nav a {
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r-sm);
  color:var(--t-mid); text-decoration:none; font-size:13px; font-weight:500; transition:.14s; position:relative;
}
.nav a svg { width:17px; height:17px; flex-shrink:0; }
.nav a:hover { background:var(--bg-2); color:var(--t-hi); }
.nav a.active { background:var(--acc-bg); color:var(--acc); font-weight:600; }
.nav a.active::before { content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; background:var(--acc); border-radius:0 3px 3px 0; }
.side .foot { margin-top:auto; padding:14px; border-top:1px solid var(--line); }
.acct-switch { display:flex; gap:3px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; }
.acct-switch button { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:none; border:none; color:var(--t-mid); font-family:inherit; font-size:12px; font-weight:600; padding:8px 6px; border-radius:5px; cursor:pointer; transition:.12s; white-space:nowrap; }
.acct-switch button:hover { color:var(--t-hi); }
.acct-switch button.active { background:var(--acc-bg); color:var(--acc); }
.acct-switch button .av { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; background:var(--bg-3); color:var(--t-mid); flex-shrink:0; }
.acct-switch button.active .av { background:var(--acc); color:#04130c; }
.acct-divider { display:flex; align-items:center; gap:8px; margin:12px 0; }
.acct-divider .ln { flex:1; height:1px; background:var(--line); }
.side .clocks { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.clk-row { display:flex; align-items:center; gap:8px; font-size:11px; }
.clk-row .rg { color:var(--t-mid); font-weight:600; width:22px; }
.clk-row .dot { width:6px; height:6px; border-radius:50%; }
.clk-row .dot.on { background:var(--acc); box-shadow:0 0 6px var(--acc-glow); }
.clk-row .dot.off { background:var(--idle); }
.clk-row .st { font-weight:600; } .clk-row .st.on { color:var(--acc); } .clk-row .st.off { color:var(--idle); }
.clk-row .tm { margin-left:auto; color:var(--t-lo); }
.side .engine { display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:600; color:var(--t-mid); }
.side .engine .l { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.side .engine .dot { width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 6px var(--acc-glow); }
.side .engine .out { color:var(--t-lo); cursor:pointer; display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-sm); transition:.14s; }
.side .engine .out:hover { background:var(--bg-2); color:var(--t-hi); }

.content { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ribbon */
.ribbon { display:flex; align-items:stretch; border-bottom:1px solid var(--line); background:var(--bg-1); min-height:46px; }
.ribbon .indices { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; align-content:center; padding:4px 8px; }
.tick { display:flex; align-items:center; gap:8px; padding:5px 16px; border-right:1px solid var(--line); white-space:nowrap; }
.tick .name { color:var(--t-mid); font-size:11px; font-weight:600; }
.tick .val { font-size:13px; font-weight:600; }
.tick .chg { font-size:11px; }
.tick .wn { color:var(--warn); font-size:10px; }
.ribbon .aside { flex-shrink:0; display:flex; flex-direction:column; justify-content:center; gap:4px; border-left:1px solid var(--line); background:var(--bg-0); padding:8px 18px; }
.fx-chip { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.fx-chip .k { font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--acc); }
.fx-chip .v { font-size:13px; font-weight:600; }
.fx-chip .chg { font-size:10px; }
.fx-chip .tag { font-size:9px; font-weight:600; color:var(--acc); background:var(--acc-bg); padding:1px 6px; border-radius:3px; }
.aside .cycle { font-size:11px; color:var(--t-lo); white-space:nowrap; }
.aside .cycle b { color:var(--t-mid); font-weight:500; }

.main { padding:16px; display:flex; flex-direction:column; gap:14px; }

/* page header */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.page-head .ttl { font-size:20px; font-weight:700; letter-spacing:-.01em; }
.page-head .cap { font-size:12px; color:var(--t-mid); margin-top:4px; max-width:760px; line-height:1.55; word-break:keep-all; }

/* ═══ TILE / PANEL ═══ */
.tile { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; }
.t-lbl { display:flex; align-items:center; gap:8px; }
.t-lbl .bar { width:3px; height:12px; background:var(--acc); border-radius:2px; }
.panel { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.panel-head .ttl { font-size:14px; font-weight:600; white-space:nowrap; }
.panel-head .sub { font-size:11px; color:var(--t-lo); white-space:nowrap; }

/* ═══ BUTTONS ═══ */
.btn { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--t-mid); background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 13px; cursor:pointer; transition:.14s; white-space:nowrap; }
.btn:hover { border-color:var(--line-2); color:var(--t-hi); }
.btn svg { width:13px; height:13px; }
.btn.primary { background:var(--acc); border-color:var(--acc); color:#04130c; font-weight:600; }
.btn.primary:hover { background:#26d98c; }
.btn.up { color:var(--up); border-color:rgba(240,97,109,.3); background:var(--up-bg); }
.btn.up:hover { border-color:var(--up); }
.btn.down { color:var(--down); border-color:rgba(74,142,240,.3); background:var(--down-bg); }
.btn.down:hover { border-color:var(--down); }
.btn.danger { color:var(--up); }
.btn:disabled, .btn.disabled { opacity:.4; cursor:not-allowed; }
.btn.sm { padding:5px 10px; font-size:11px; }

/* ═══ SEGMENTED TABS ═══ */
.seg-tabs { display:inline-flex; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; gap:2px; }
.seg-tabs button { background:none; border:none; color:var(--t-mid); font-family:inherit; font-size:12px; font-weight:600; padding:7px 16px; border-radius:5px; cursor:pointer; transition:.12s; white-space:nowrap; }
.seg-tabs button:hover { color:var(--t-hi); }
.seg-tabs button.active { background:var(--acc-bg); color:var(--acc); }
.seg-tabs.tf button.active { background:var(--bg-3); color:var(--t-hi); }

/* ═══ TABLE ═══ */
.dtable { width:100%; border-collapse:collapse; }
.dtable.fixed { table-layout:fixed; }
.dtable.fixed td, .dtable.fixed th { overflow:hidden; }
.dtable thead th { text-align:right; font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--t-lo); padding:11px 18px; border-bottom:1px solid var(--line); white-space:nowrap; }
.dtable thead th.l { text-align:left; } .dtable thead th.c { text-align:center; }
.dtable tbody td { padding:13px 18px; border-bottom:1px solid var(--line); text-align:right; font-size:13px; }
.dtable tbody tr:last-child td { border-bottom:none; }
.dtable tbody tr { transition:background .12s; }
.dtable tbody tr:hover { background:var(--bg-3); }
.dtable td.l { text-align:left; } .dtable td.c { text-align:center; }
.dtable.rows-click tbody tr { cursor:pointer; }
.dtable.rows-click tbody tr:hover .nm { color:var(--acc); }
.sym-wrap { display:flex; align-items:center; gap:10px; }
.sym .nm { font-weight:600; } .sym .cd { font-size:10px; color:var(--t-lo); }
.pos-sub { font-size:10px; color:var(--t-lo); }

/* ═══ BADGES ═══ */
.rtag { font-size:9px; font-weight:700; letter-spacing:.04em; padding:2px 5px; border-radius:3px; border:1px solid var(--line-2); color:var(--t-mid); }
.rtag.kr { color:#e3a3a3; border-color:#5a3030; }
.rtag.us { color:#9fb6e8; border-color:#2c3c5e; }
.sig { font-size:10px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:4px; white-space:nowrap; }
.sig.buy { color:var(--up); background:var(--up-bg); }
.sig.sell { color:var(--down); background:var(--down-bg); }
.sig.hold { color:var(--t-mid); background:var(--bg-3); }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:5px 11px; border-radius:20px; }
.chip.up { background:var(--up-bg); color:var(--up); }
.chip.down { background:var(--down-bg); color:var(--down); }
.chip.acc { background:var(--acc-bg); color:var(--acc); }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:12px; border:1px solid var(--line-2); color:var(--t-mid); }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; }
.impact { font-size:9px; font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:4px; text-align:center; white-space:nowrap; }
.impact.high { color:var(--up); background:var(--up-bg); }
.impact.medium { color:var(--warn); background:var(--warn-bg); }
.impact.low { color:var(--t-mid); background:var(--bg-3); }

/* ═══ NOTICE / CALLOUT ═══ */
.notice { display:flex; gap:11px; padding:12px 16px; border-radius:var(--r-md); font-size:12px; line-height:1.55; }
.notice .ico { flex-shrink:0; width:16px; height:16px; margin-top:1px; }
.notice .msg { color:var(--t-mid); word-break:keep-all; } .notice .msg b { color:var(--t-hi); font-weight:600; }
.notice.warn { background:var(--warn-bg); border:1px solid rgba(224,168,46,.25); }
.notice.warn .ico, .notice.warn .msg b { color:var(--warn); }
.notice.info { background:rgba(74,142,240,.07); border:1px solid rgba(74,142,240,.2); }
.notice.info .ico { color:var(--down); }
.notice.acc { background:var(--acc-bg); border:1px solid rgba(34,199,128,.22); }
.notice.acc .ico { color:var(--acc); }
.notice.danger { background:var(--up-bg); border:1px solid rgba(240,97,109,.3); }
.notice.danger .ico, .notice.danger .msg b { color:var(--up); }

/* ═══ FORM ═══ */
.field { display:flex; flex-direction:column; gap:6px; }
.field > label { font-size:11px; font-weight:600; color:var(--t-mid); }
input[type=text], input[type=number], input[type=password], select, textarea {
  font-family:inherit; font-size:13px; color:var(--t-hi); background:var(--bg-1);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px; transition:.14s; width:100%;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--acc); }
input::placeholder { color:var(--t-lo); }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b95a5' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; padding-right:30px; }
textarea { resize:vertical; font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.6; }
input.num, .num input { font-family:'IBM Plex Mono',monospace; }

/* range slider */
.slider { display:flex; flex-direction:column; gap:9px; }
.slider .srow { display:flex; align-items:center; justify-content:space-between; }
.slider .sk { font-size:12px; color:var(--t-mid); white-space:nowrap; }
.slider .sv { font-size:15px; font-weight:700; color:var(--acc); }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:3px; background:var(--bg-3); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--acc); cursor:pointer; box-shadow:0 0 8px var(--acc-glow); border:2px solid var(--bg-0); }
input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--acc); cursor:pointer; border:2px solid var(--bg-0); }
.slider .sscale { display:flex; justify-content:space-between; font-size:10px; color:var(--t-lo); }

/* ═══ METRIC TILE ═══ */
.mtile { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px; }
.mtile .k { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--t-lo); }
.mtile .v { font-size:24px; font-weight:700; margin-top:9px; letter-spacing:-.01em; }
.mtile .meta { font-size:11px; color:var(--t-lo); margin-top:5px; }
.mtile .delta { font-size:11px; font-weight:600; margin-top:4px; }

/* ═══ CHART CARD ═══ */
.chart-card { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; }
.chart-card .ch-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.chart-card .ch-ttl { font-size:13px; font-weight:600; white-space:nowrap; }
.chart-card .ch-leg { display:flex; gap:14px; }
.ch-leg .lg { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--t-mid); }
.ch-leg .lg .ln { width:14px; height:2px; border-radius:2px; }
.chart-svg { width:100%; display:block; }
.chart-svg .grid { stroke:var(--line); stroke-width:1; }
.chart-svg .axislbl { fill:var(--t-lo); font-size:10px; font-family:'IBM Plex Mono',monospace; }

/* ═══ LOG VIEWER ═══ */
.logview { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-md); max-height:620px; overflow-y:auto; overflow-x:hidden; }
.logline { display:flex; gap:12px; align-items:baseline; padding:9px 16px; border-bottom:1px solid var(--line); font-size:12px; }
.logline:last-child { border-bottom:none; }
.logline .tm { color:var(--t-lo); font-family:'IBM Plex Mono',monospace; flex-shrink:0; }
.logline .tx { color:var(--t-mid); flex:1; min-width:0; word-break:keep-all; }
.logline.mono { font-family:'IBM Plex Mono',monospace; }
.logline.mono .tx { word-break:break-word; }
.logline .lvl { font-size:9px; font-weight:700; padding:1px 6px; border-radius:3px; flex-shrink:0; }
.lvl.crit { color:var(--up); background:var(--up-bg); }
.lvl.err { color:var(--warn); background:var(--warn-bg); }

/* ═══ ACCORDION ═══ */
.acc { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.acc > summary { list-style:none; cursor:pointer; padding:13px 16px; font-size:13px; font-weight:600; color:var(--t-mid); display:flex; align-items:center; gap:9px; background:var(--bg-2); }
.acc > summary::-webkit-details-marker { display:none; }
.acc > summary .caret { transition:transform .15s; color:var(--t-lo); }
.acc[open] > summary .caret { transform:rotate(90deg); }
.acc > summary:hover { color:var(--t-hi); }
.acc .acc-body { padding:16px; border-top:1px solid var(--line); background:var(--bg-1); }

/* dashboard-specific (hero/regime/alloc) */
.bento { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tile.hero { grid-column:span 3; position:relative; overflow:hidden; }
.tile.regime { grid-column:span 1; display:flex; flex-direction:column; }
.hero .nw { font-size:42px; font-weight:700; letter-spacing:-.02em; margin-top:14px; line-height:1; }
.hero .chip-row { display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.hero .usd { font-size:13px; color:var(--t-mid); white-space:nowrap; }
.hero .usd .num { color:var(--t-hi); font-weight:600; }
.spark-wrap { position:absolute; right:0; top:0; bottom:0; width:46%; opacity:.9; pointer-events:none; z-index:0; }
.spark-wrap svg { width:100%; height:100%; }
.tile.hero > *:not(.spark-wrap) { position:relative; z-index:1; }
.alloc { margin-top:20px; }
.alloc .bar { display:flex; height:9px; border-radius:5px; overflow:hidden; gap:2px; }
.alloc .seg { height:100%; }
.alloc .legend { display:flex; gap:18px; margin-top:10px; flex-wrap:wrap; }
.alloc .lg { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--t-mid); }
.alloc .lg .sw { width:8px; height:8px; border-radius:2px; }
.alloc .lg .num { color:var(--t-hi); font-weight:600; }
.regime .stage { font-size:30px; font-weight:700; margin-top:12px; letter-spacing:-.01em; color:var(--acc); }
.regime .meter { display:flex; gap:3px; margin-top:14px; }
.regime .seg { flex:1; height:6px; border-radius:3px; background:var(--bg-3); }
.regime .seg.lit { background:var(--acc); box-shadow:0 0 8px var(--acc-glow); }
.regime .scale { display:flex; justify-content:space-between; margin-top:6px; font-size:9px; color:var(--t-lo); letter-spacing:.03em; }
.regime .rule { border-top:1px solid var(--line); margin:16px 0 0; padding-top:14px; display:flex; flex-direction:column; gap:11px; }
.r-stat { display:flex; align-items:center; gap:9px; font-size:12px; white-space:nowrap; }
.r-stat .k { color:var(--t-lo); } .r-stat .v { margin-left:auto; font-weight:600; }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kpi { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px; }
.kpi.acct { display:flex; flex-direction:column; gap:9px; }
.kpi .v { font-size:24px; font-weight:700; margin-top:9px; letter-spacing:-.01em; }
.kpi .meta { font-size:11px; color:var(--t-lo); margin-top:5px; }
.acct-line { display:flex; align-items:baseline; justify-content:space-between; }
.acct-line .nm { font-size:12px; color:var(--t-mid); font-weight:500; white-space:nowrap; }
.acct-line .am { font-size:14px; font-weight:600; } .acct-line .pp { font-size:11px; margin-left:7px; }
.kpi.acct .ttl { display:flex; justify-content:space-between; align-items:center; }
.kpi.acct .fx { font-size:10px; color:var(--acc); }
.sig-row { display:flex; gap:18px; margin-top:10px; }
.sig-row .s { display:flex; align-items:baseline; gap:6px; font-size:22px; font-weight:700; }
.sig-row .s .tg { font-size:10px; font-weight:700; letter-spacing:.05em; }

/* utility grids */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.row.between { justify-content:space-between; }
.spacer { flex:1; }

@media (max-width:1180px) {
  .bento { grid-template-columns:repeat(2,1fr); }
  .tile.hero, .tile.regime { grid-column:span 2; }
  .kpis, .grid-4, .grid-5 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}

/* ═══ 실서비스 추가 (목업 외 공통: 로그인·모달·토스트·FX태그·스파크) ═══ */
.tag.fresh { color:var(--acc); background:var(--acc-bg); }
.tag.old { color:var(--warn); background:var(--warn-bg); }
.tag.stale { color:var(--up); background:var(--up-bg); }
.spark { width:68px; height:26px; display:block; margin:0 auto; }

/* 로그인 */
.login-wrap { min-height:100vh; display:grid; place-items:center; background:var(--bg-0); }
.login-card { width:340px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; text-align:center; }
.login-card .mark { width:54px; height:54px; border-radius:13px; background:var(--acc); color:#04130c; display:grid; place-items:center; font-weight:700; font-size:30px; margin:0 auto; box-shadow:0 0 28px var(--acc-glow); }
.login-card h2 { margin-top:14px; font-size:20px; }
.login-card p { color:var(--t-mid); font-size:13px; margin:6px 0 18px; }
.login-card .err { color:var(--up); font-size:12px; margin-top:10px; min-height:16px; }

/* 확인 모달 */
.modal-back { position:fixed; inset:0; background:rgba(5,8,13,.72); display:grid; place-items:center; z-index:90; }
.modal { width:380px; max-width:92vw; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:20px; }
.modal .m-ttl { font-size:15px; font-weight:700; margin-bottom:12px; }
.modal .m-body { font-size:13px; color:var(--t-mid); line-height:1.7; word-break:keep-all; }
.modal .m-body b { color:var(--t-hi); }
.modal .m-row { display:flex; gap:8px; margin-top:18px; }
.modal .m-row .btn { flex:1; justify-content:center; }

/* 토스트 */
.toast-wrap { position:fixed; top:16px; right:16px; z-index:99; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--bg-3); border:1px solid var(--line-2); border-left:3px solid var(--acc); border-radius:var(--r-md); padding:11px 16px; font-size:12px; color:var(--t-hi); max-width:420px; box-shadow:0 6px 22px rgba(0,0,0,.45); animation:tin .18s ease-out; }
.toast.bad { border-left-color:var(--up); }
@keyframes tin { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* 마크다운 요약 (거래내역) */
.mdview { font-size:12.5px; color:var(--t-mid); line-height:1.7; word-break:keep-all; }
.mdview h1,.mdview h2,.mdview h3 { color:var(--t-hi); font-size:13px; margin:12px 0 6px; }
.mdview b,.mdview strong { color:var(--t-hi); }
.mdview ul { padding-left:18px; }
.mdview code { font-family:'IBM Plex Mono',monospace; background:var(--bg-1); padding:1px 5px; border-radius:3px; font-size:11px; }
.mdview table { border-collapse:collapse; margin:8px 0; }
.mdview td,.mdview th { border:1px solid var(--line); padding:4px 9px; font-size:11.5px; }

/* ═══ 정렬 보강 (필터 셀렉트/인풋 높이 통일) ═══ */
.panel-head select, .panel-head input[type=number],
.filters select, .filters input[type=number] {
  height: 32px; padding: 5px 10px; font-size: 12px; width: auto;
}
.panel-head select { padding-right: 28px; }
.panel-head .row, .filters { align-items: center; }

/* 일별 요약 (목업 .report) */
.report dt { font-size: 12px; color: var(--t-lo); margin-top: 14px; }
.report dt:first-child { margin-top: 0; }
.report dd { font-size: 14px; font-weight: 600; margin: 3px 0 0; }

/* 종목 자동완성 드롭다운 */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-md);
  max-height: 280px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.ac-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--bg-3); }
.ac-item .nm { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-item .cd { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--t-lo); }
.ac-empty { padding: 12px; text-align: center; color: var(--t-lo); font-size: 12px; }

/* ═══ 피드백 2차 (2026-06-11) ═══ */
/* 총자산 숫자: 42px → 32px (Mono 유지, 굵기 완화) */
.hero .nw { font-size: 32px; font-weight: 600; margin-top: 12px; }

/* date input 다크 통일 (백테스트 시작일/종료일) */
input[type=date] {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--t-hi);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 11px; width: 100%; color-scheme: dark; transition: .14s;
}
input[type=date]:focus { outline: none; border-color: var(--acc); }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.6); cursor: pointer; }

/* 차트 십자선 호버 툴팁 */
.ch-tip {
  position: absolute; z-index: 50; pointer-events: none; white-space: nowrap;
  background: rgba(14,18,27,.96); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 8px 12px; font-size: 11px; line-height: 1.75;
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.ch-tip .d { color: var(--t-mid); }
.ch-tip .k { color: var(--t-lo); margin-right: 4px; }

/* ═══ GUI-M1 모바일 (2026-06-11) — ≤768px 추가 override만, 데스크톱 룰 무수정 ═══ */
@media (max-width: 768px) {
  /* 사이드바 → 하단 독 (1행: 계좌전환+엔진/로그아웃, 2행: 탭바) */
  .shell { flex-direction: column; }
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: auto; z-index: 80;
    flex-direction: column; border-right: none; border-top: 1px solid var(--line);
  }
  .side .brand, .side .live, .side .clocks, .acct-divider { display: none; }
  .side .foot { margin: 0; padding: 7px 10px 3px; border-top: none; display: flex; align-items: center; gap: 10px; }
  .side .foot .acct-switch { flex: 1; }
  .acct-switch button { padding: 5px 6px; font-size: 11px; }
  .side .nav {
    flex-direction: row; padding: 2px 6px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
  .nav a { flex: 1; flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 10px; font-weight: 600; }
  .nav a svg { width: 19px; height: 19px; }
  .nav a.active::before { left: 22%; right: 22%; top: -3px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  /* 본문 — 하단 독에 안 가리게 */
  .main { padding: 12px; gap: 12px; padding-bottom: 112px; }
  /* 리본: 지수 가로 스크롤 + 환율 행 분리 */
  .ribbon { flex-direction: column; }
  .ribbon .indices { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ribbon .indices::-webkit-scrollbar { display: none; }
  .ribbon .aside {
    border-left: none; border-top: 1px solid var(--line);
    flex-direction: row; align-items: center; justify-content: space-between; padding: 7px 12px;
    flex-wrap: wrap; row-gap: 2px;
  }
  .aside .cycle { white-space: normal; }
  /* 쏠림 방어: 미스코프 오버플로가 생겨도 페이지 폭은 뷰포트 고정 (스코프 스크롤러는 무관) */
  .content { overflow-x: clip; }
  /* 그리드 전부 1열 */
  .bento, .kpis, .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .tile.hero, .tile.regime { grid-column: span 1; }
  .hero .nw { font-size: 28px; }
  /* 테이블: 열 구조 유지 + panel 내부 가로 스크롤 (자동완성 드롭다운 있는 panel은 제외) */
  .panel:has(.dtable):not(:has(.ac-wrap)) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel:has(.dtable):not(:has(.ac-wrap)) .dtable { min-width: 640px; }
  .dtable thead th, .dtable tbody td { padding: 11px 12px; }
  /* 헤더 여유 */
  .page-head .ttl { font-size: 18px; }
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .logview { max-height: 440px; }
}