:root{
  --bg:#0e1218;
  --surface:#161c25;
  --surface-2:#1e2530;
  --surface-hover:#242c39;
  --border:#2a323f;
  --border-soft:#20272f;
  --text-primary:#eef1f5;
  --text-secondary:#98a3b3;
  --text-muted:#5f6b7a;
  --accent:#e8a33d;
  --accent-dim:#3a2f1a;
  --accent-ring:rgba(232,163,61,.35);
  --good:#3ecf8e;
  --good-dim:#132922;
  --bad:#f0665c;
  --bad-dim:#2c1817;
  --warn:#e8a33d;
  --chart-old:#3987e5;
  --chart-new:#d95926;
  --chart-btc:#199e70;
  --violet:#a78bfa;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.55);
  color-scheme: dark;
}
*{ box-sizing:border-box; }
body{
  background:var(--bg); color:var(--text-primary);
  font-family:"Manrope","Noto Sans KR",system-ui,sans-serif;
  padding:0; margin:0;
  /* 홈 화면 앱(PWA)으로 열었을 때 노치/상태바 밑에 콘텐츠가 가려지지 않도록 */
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
a{ color:inherit; text-decoration:none; }
.mono{ font-family:"JetBrains Mono","Noto Sans Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ---------- shell layout ---------- */
.shell{ display:flex; min-height:100vh; }

.rail{
  width:220px; flex:none; background:var(--surface);
  border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column;
  padding:18px 14px; gap:4px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 18px; }
.brand .mark{
  width:30px; height:30px; border-radius:8px; background:var(--accent-dim);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex:none;
}
.brand .name{ font-weight:800; font-size:14.5px; letter-spacing:-.01em; }
.brand .sub{ font-size:10.5px; color:var(--text-muted); font-family:"JetBrains Mono",monospace; letter-spacing:.04em; }

.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  color:var(--text-secondary); font-size:13.5px; font-weight:600; cursor:pointer;
  border:1px solid transparent; position:relative;
}
.nav-item:hover{ background:var(--surface-2); color:var(--text-primary); }
.nav-item.active{ background:var(--accent-dim); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.nav-item.disabled{ cursor:default; opacity:.55; }
.nav-item.disabled:hover{ background:transparent; color:var(--text-secondary); }
.nav-item .ic{ width:18px; text-align:center; flex:none; }
.nav-item .soon{
  margin-left:auto; font-size:9.5px; font-weight:700; color:var(--text-muted);
  background:var(--surface-2); padding:2px 6px; border-radius:999px; letter-spacing:.02em;
}
.krw-line{ margin-top:2px; font-size:13px; font-weight:600; color:var(--text-muted); font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
.krw-line span{ font-weight:400; font-size:11px; }
.krw-line[hidden]{ display:none; }
.nav-item .beta-tag{
  margin-left:7px; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; line-height:1;
  color:var(--accent); background:var(--accent-dim); padding:3px 6px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.nav-dot{
  width:7px; height:7px; border-radius:50%; background:var(--good); margin-left:auto; flex:none;
  animation:blink 1.3s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion: reduce){ .nav-dot, .bell-dot, .unread-dot{ animation:none; } }

.rail-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:6px; }
.rail-user{ display:flex; align-items:center; gap:9px; padding:8px; border-radius:9px; }
.avatar{
  width:28px; height:28px; border-radius:50%; background:var(--surface-2); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--text-secondary);
  border:1px solid var(--border);
}
.rail-user .u-name{ font-size:12.5px; font-weight:700; }
.rail-user .u-role{ font-size:10.5px; color:var(--text-muted); }
.logout-link{ font-size:12px; color:var(--text-muted); padding:6px 8px; }
.logout-link:hover{ color:var(--bad); }

.main{ flex:1; min-width:0; padding:22px clamp(16px,3vw,36px) 60px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:22px; flex-wrap:wrap;
}
.topbar h1{ font-size:20px; font-weight:800; letter-spacing:-.01em; margin:0; }
.topbar .meta{ font-size:12px; color:var(--text-muted); font-family:"JetBrains Mono",monospace; margin-top:3px; }
.topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:6px 11px; border-radius:999px; border:1px solid var(--border);
  background:none; cursor:default; color:var(--text-secondary); font-family:inherit;
}
.chip-good{ color:var(--good); background:var(--good-dim); border-color:color-mix(in srgb, var(--good) 35%, transparent); }
.chip-bad{ color:var(--bad); background:var(--bad-dim); border-color:color-mix(in srgb, var(--bad) 35%, transparent); }
.chip-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip-btn{ cursor:pointer; }
.chip-btn:hover{ filter:brightness(1.15); }
.unread-dot{
  width:7px; height:7px; border-radius:50%; background:var(--bad); flex:none;
  animation:blink 1.3s ease-in-out infinite;
}

.bell-btn{
  position:relative; width:34px; height:34px; border-radius:9px; background:var(--surface-2);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; color:var(--text-secondary);
}
.bell-btn .bell-dot{
  position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%;
  background:var(--good); box-shadow:0 0 0 2px var(--surface);
  animation:blink 1.3s ease-in-out infinite;
}

.step-btn{
  width:32px; height:32px; flex:none; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text-primary); font-size:17px; font-weight:700;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.step-btn:hover:not(:disabled){ background:var(--surface-hover); }
.step-btn:disabled{ opacity:.4; cursor:default; }

.grid{ display:grid; gap:14px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:1.3fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
/* 사이드바가 고정으로 붙어 있는 폭(821~1100px)에서는 4열이면 카드당 170px대라 글자가 꺾인다 - 2열로 */
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:1000px){ .grid-2{ grid-template-columns:1fr; } }
@media (max-width:640px){ .grid-4, .grid-3{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:14px;
  padding:18px 19px; box-shadow:var(--shadow);
}

/* 패치노트 CTA 등 다른 화면에서 링크로 들어왔을 때, 어떤 카드인지 잠깐 짚어준다 */
.highlight-flash{ animation:highlightFlash 1.7s ease-out; }
@keyframes highlightFlash{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); border-color:var(--accent); }
  60%{ box-shadow:0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent); border-color:var(--accent); }
  100%{ box-shadow:var(--shadow); border-color:var(--border-soft); }
}
@media (prefers-reduced-motion: reduce){ .highlight-flash{ animation:none; outline:2px solid var(--accent); outline-offset:2px; } }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card-title{ font-size:12.5px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }

.stat-tile .stat-label{ font-size:12px; color:var(--text-muted); font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.stat-tile .stat-value{ font-family:"JetBrains Mono",monospace; font-size:25px; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
.stat-tile .stat-sub{ margin-top:7px; font-size:12px; color:var(--text-secondary); font-family:"JetBrains Mono",monospace; }
.stat-tile .stat-sub.good{ color:var(--good); }
.stat-tile .stat-sub.bad{ color:var(--bad); }

.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:999px;
}
.badge-long{ color:var(--good); background:var(--good-dim); }
.badge-short{ color:var(--bad); background:var(--bad-dim); }
.badge-off{ color:var(--text-muted); background:var(--surface-2); }

/* logic flow */
.flow-list{ display:flex; flex-direction:column; gap:8px; }
.flow-row{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.flow-row .flag{
  width:20px; height:20px; border-radius:6px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
}
.flow-row.pass .flag{ background:var(--good-dim); color:var(--good); }
.flow-row.fail .flag{ background:var(--bad-dim); color:var(--bad); }
.flow-row .flabel{ font-size:13px; font-weight:600; color:var(--text-primary); }
.flow-row .fdesc{ font-size:11.5px; color:var(--text-muted); margin-left:auto; font-family:"JetBrains Mono",monospace; }

/* SL/TP gauge */
.gauge-wrap{ margin-top:14px; }
/* 좁은 stat-tile 안(보유 포지션 카드)에 넣는 버전 - 위 여백을 줄인다 */
.gauge-wrap.sm{ margin-top:10px; }
.gauge-track{
  position:relative; height:10px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--border-soft); overflow:visible;
}
.gauge-fill{
  position:absolute; top:0; left:0; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--bad), var(--accent) 55%, var(--good));
  opacity:.35;
}
.gauge-now{
  position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  background:var(--text-primary); border:2px solid var(--bg); transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px var(--accent);
}
.gauge-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; font-family:"JetBrains Mono",monospace; color:var(--text-muted); }
.gauge-labels b{ color:var(--text-primary); font-weight:600; }

/* embedded TradingView chart */
.chart-card{ border-color:var(--border); }
.live-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  color:var(--text-muted); font-family:"JetBrains Mono",monospace; letter-spacing:.02em;
}
.live-pill .nav-dot{ margin-left:0; }
.chart-frame{
  margin:0 19px 19px; border-radius:10px; overflow:hidden;
  border:1px solid var(--border-soft); background:var(--bg);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  display:flex; flex-direction:column; height:480px;
}
.chart-frame #tv_chart_container{ position:relative; flex:1 1 auto; min-height:0; width:100%; }
/* 시간축은 맨 아래(밴드폭) 패널에만 있어서, 그 패널이 축 높이만큼 더 크다 */
.chart-frame #stoch_chart_container,
.chart-frame #bbw_chart_container{ position:relative; width:100%; border-top:1px solid var(--border-soft); }
.chart-frame #stoch_chart_container{ flex:0 0 96px; }
.chart-frame #bbw_chart_container{ flex:0 0 124px; }
.panel-label{
  position:absolute; top:6px; left:8px; z-index:4; pointer-events:none;
  font-size:10.5px; font-weight:700; color:var(--text-secondary); font-family:"JetBrains Mono",monospace; letter-spacing:.02em;
  background:rgba(14,18,24,.78); padding:2px 7px; border-radius:6px; border:1px solid rgba(255,255,255,.05);
}
@media (max-width:640px){
  .chart-frame{ height:460px; margin:0 12px 12px; }
  .chart-frame #stoch_chart_container{ flex-basis:80px; }
  .chart-frame #bbw_chart_container{ flex-basis:108px; }
}

/* 차트 헤더: 현재가 / 24시간 등락 / 다음 봉까지 남은 시간 */
.chart-head-left{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.chart-live{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; }
.chart-live .cl-price{ font-size:17px; font-weight:800; color:var(--text-primary); letter-spacing:-.01em; }
.chart-live .cl-chg{ font-weight:700; }
.chart-live .cl-chg.up{ color:var(--good); }
.chart-live .cl-chg.down{ color:var(--bad); }
.chart-live .cl-count{ color:var(--text-muted); font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .chart-live{ gap:2px 10px; }
  .chart-live .cl-price{ font-size:16px; }
  .chart-live .cl-lbl{ display:none; }  /* 폰에서는 "⏱ 01:40:49"만 - 헤더가 여러 줄이 되지 않게 */
}
.cl-price.tick-up{ animation:tickUp .7s ease-out; }
.cl-price.tick-down{ animation:tickDown .7s ease-out; }
@keyframes tickUp{ 0%{ color:var(--good); } 100%{ color:var(--text-primary); } }
@keyframes tickDown{ 0%{ color:var(--bad); } 100%{ color:var(--text-primary); } }
@media (prefers-reduced-motion: reduce){ .cl-price.tick-up, .cl-price.tick-down{ animation:none; } }

.chart-tooltip{
  position:absolute; z-index:5; pointer-events:none; display:none;
  background:rgba(30,37,48,.93); border:1px solid var(--border); border-radius:9px;
  padding:7px 10px; font-size:11px; font-family:"JetBrains Mono",monospace;
  color:var(--text-secondary); box-shadow:var(--shadow); min-width:124px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.chart-tooltip .ct-time{ font-size:10.5px; color:var(--text-muted); margin-bottom:5px; letter-spacing:.02em; white-space:nowrap; }
.chart-tooltip .ct-row{ display:flex; justify-content:space-between; gap:14px; padding:1px 0; }
.chart-tooltip .ct-row b{ color:var(--text-primary); font-weight:600; }
.chart-tooltip .ct-row.up b{ color:var(--good); }
.chart-tooltip .ct-row.down b{ color:var(--bad); }

.chart-loading-badge{
  position:absolute; top:8px; left:8px; z-index:5; display:none;
  background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
  padding:4px 9px; font-size:11px; color:var(--text-secondary); font-family:"JetBrains Mono",monospace;
}

.chart-expand-btn{
  width:30px; height:30px; flex:none; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text-secondary); font-size:14px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.chart-expand-btn:hover{ background:var(--surface-hover); color:var(--text-primary); }

.chart-close-btn{
  display:none; position:fixed; top:calc(16px + env(safe-area-inset-top)); right:16px; z-index:210;
  width:36px; height:36px; border-radius:10px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text-primary); font-size:18px; cursor:pointer;
  align-items:center; justify-content:center;
}
.chart-frame.fullscreen{
  position:fixed; inset:0; z-index:200; margin:0; border-radius:0; border:none;
  padding-top:env(safe-area-inset-top); height:100vh;
}
.chart-frame.fullscreen .chart-close-btn{ display:flex; }
body.chart-fullscreen-lock{ overflow:hidden; }

/* trade table */
table.trades{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.trades th{
  text-align:left; padding:8px 10px; color:var(--text-muted); font-weight:600;
  border-bottom:1px solid var(--border-soft); font-size:11px; text-transform:uppercase; letter-spacing:.03em;
}
table.trades td{ padding:9px 10px; border-bottom:1px solid var(--border-soft); font-family:"JetBrains Mono",monospace; color:var(--text-secondary); }
table.trades tbody tr:hover{ background:var(--surface-2); }
table.trades td.win{ color:var(--good); font-weight:600; }
table.trades td.loss{ color:var(--bad); font-weight:600; }
.table-wrap{ overflow-x:auto; }

/* toggle */
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:4px 0; }
.toggle-row .t-label{ font-size:13px; font-weight:600; }
.toggle-row .t-desc{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.switch{ width:38px; height:22px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); position:relative; flex:none; cursor:pointer; padding:0; }
.switch .knob{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-muted); transition:.15s; }
.switch[disabled]{ opacity:.45; cursor:not-allowed; }
.switch.on{ background:var(--accent-dim); border-color:var(--accent-ring); }
.switch.on .knob{ left:18px; background:var(--accent); }

/* patch notes (accordion) */
.patch-card{ margin-bottom:14px; padding:0; overflow:hidden; }
.patch-card > summary.patch-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:18px 19px; cursor:pointer; list-style:none; user-select:none;
}
.patch-card > summary.patch-head::-webkit-details-marker{ display:none; }
.patch-card > summary.patch-head:hover{ background:var(--surface-2); }
.patch-version{ font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:700; color:var(--accent); }
.patch-title{ font-size:16px; font-weight:800; margin-top:2px; }
.patch-date{ font-size:11.5px; color:var(--text-muted); font-family:"JetBrains Mono",monospace; }
.patch-card .chevron{ color:var(--text-muted); font-size:13px; transition:transform .15s ease; flex:none; }
.patch-card[open] .chevron{ transform:rotate(180deg); }
.patch-body{ padding:0 19px 19px; border-top:1px solid var(--border-soft); }
.patch-body .patch-summary{ margin-top:16px; }
.patch-summary{ font-size:13.5px; color:var(--text-secondary); line-height:1.65; white-space:pre-line; }
.new-pill{ font-size:10.5px; font-weight:800; color:var(--bg); background:var(--accent); padding:3px 9px; border-radius:999px; }

.patch-image{ display:block; width:100%; height:auto; margin-top:16px; border-radius:8px; border:1px solid var(--border-soft); }

.legend{ display:flex; gap:16px; flex-wrap:wrap; margin:14px 0 6px; }
.legend-item{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-secondary); }
.legend-item .ln{ width:14px; height:2.5px; border-radius:2px; }
.legend-item .val{ font-family:"JetBrains Mono",monospace; color:var(--text-primary); font-weight:700; }

.chart-shell{ position:relative; }
svg.eqchart{ width:100%; height:auto; display:block; overflow:visible; }
.axis-label{ fill:var(--text-muted); font-family:"JetBrains Mono",monospace; font-size:11px; }
.grid-line{ stroke:var(--border-soft); stroke-width:1; }
.series-line{ fill:none; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.end-label{ font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; }
.crosshair-line{ stroke:var(--text-muted); stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.hover-dot{ opacity:0; }
.tooltip{
  position:absolute; pointer-events:none; opacity:0; transition:opacity .08s ease;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:9px 11px; box-shadow:var(--shadow); font-size:12px; white-space:nowrap; z-index:5;
}
.tooltip .t-date{ color:var(--text-muted); font-family:"JetBrains Mono",monospace; margin-bottom:6px; font-size:10.5px; }
.tooltip .t-row{ display:flex; align-items:center; gap:7px; justify-content:space-between; }
.tooltip .t-row + .t-row{ margin-top:4px; }
.tooltip .t-dot{ width:8px; height:8px; border-radius:2px; flex:none; }
.tooltip .t-name{ color:var(--text-secondary); margin-right:10px; }
.tooltip .t-val{ font-family:"JetBrains Mono",monospace; font-weight:700; margin-left:auto; }

/* settings / forms */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:700; color:var(--text-secondary); margin-bottom:6px; }
.field input{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
  padding:9px 11px; color:var(--text-primary); font-family:"JetBrains Mono",monospace; font-size:13px;
}
.field input:focus{ outline:none; border-color:var(--accent-ring); }
.btn{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
  padding:9px 16px; border-radius:9px; border:1px solid var(--border); cursor:pointer;
  background:var(--surface-2); color:var(--text-primary); font-family:inherit;
}
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#251a06; }
.btn-danger{ background:var(--bad-dim); border-color:color-mix(in srgb, var(--bad) 40%, transparent); color:var(--bad); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn[hidden]{ display:none; } /* .btn의 display:inline-flex가 hidden 속성 기본 스타일을 이겨버려서 명시 (2026-09-25) */
.expand-btn{
  width:100%; justify-content:center; margin-top:10px; font-size:12.5px; padding:8px 14px;
  background:transparent; color:var(--text-secondary);
}
.expand-btn:hover{ background:var(--surface-2); color:var(--text-primary); }
.expand-btn .chev{ display:inline-block; transition:transform .15s; }
.expand-btn .chev.up{ transform:rotate(180deg); }
.hint-box{
  background:var(--accent-dim); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:12px; padding:13px 15px; font-size:12.5px; color:var(--text-secondary); line-height:1.6; margin-bottom:18px;
}
.hint-box b{ color:var(--text-primary); }

/* 알림 내역 페이지 */
.alert-feed{ display:flex; flex-direction:column; gap:2px; }
.alert-row{ padding:12px 4px; border-bottom:1px solid var(--border-soft); }
.alert-row:last-child{ border-bottom:none; }
.alert-row-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.alert-time{ font-size:11.5px; color:var(--text-muted); }
.alert-badges{ display:flex; gap:6px; }
.alert-row-body{ font-size:13px; color:var(--text-secondary); line-height:1.6; white-space:pre-line; word-break:keep-all; }
.error-box{
  background:var(--bad-dim); border:1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  border-radius:12px; padding:12px 15px; font-size:13px; color:var(--text-primary); margin-bottom:16px;
}
.success-box{
  background:var(--good-dim); border:1px solid color-mix(in srgb, var(--good) 35%, transparent);
  border-radius:12px; padding:12px 15px; font-size:13px; color:var(--text-primary); margin-bottom:16px;
}

/* login/signup */
.auth-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:100%; max-width:380px; }
.auth-card .brand{ justify-content:center; padding-bottom:22px; }
.auth-tabs{ display:flex; gap:6px; margin-bottom:18px; background:var(--surface-2); border-radius:10px; padding:4px; }
.auth-tab{ flex:1; text-align:center; padding:8px; border-radius:7px; font-size:13px; font-weight:700; color:var(--text-secondary); cursor:pointer; }
.auth-tab.active{ background:var(--surface); color:var(--accent); }

.seg-tabs{ display:flex; gap:6px; background:var(--surface-2); border-radius:10px; padding:4px; }
.seg-tab{ flex:1; text-align:center; padding:8px; border-radius:7px; font-size:13px; font-weight:700; color:var(--text-secondary); cursor:pointer; }
.seg-tab.active{ background:var(--surface); color:var(--accent); }
.field-hint{ font-size:11px; color:var(--text-muted); margin-top:5px; }

footer.page-foot{ margin-top:32px; font-size:11.5px; color:var(--text-muted); line-height:1.7; }

/* ---------- mobile nav drawer (rail slides in from the left) ---------- */
.rail-toggle{
  display:none;
  width:34px; height:34px; margin-bottom:14px; flex:none; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-primary);
  font-size:16px; align-items:center; justify-content:center; cursor:pointer;
}

.rail-scrim{
  display:none; position:fixed; inset:0; background:rgba(4,6,10,.6);
  z-index:39; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.rail-scrim.show{ opacity:1; pointer-events:auto; }

@media (max-width:820px){
  .rail-toggle{ display:flex; }
  .shell{ flex-direction:column; }
  .rail{
    position:fixed; top:0; left:0; height:100vh; width:250px; max-width:82vw;
    padding-top:calc(18px + env(safe-area-inset-top));
    z-index:40; transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:var(--shadow);
  }
  .rail.open{ transform:translateX(0); }
  .rail-scrim{ display:block; }
}

.info-btn{
  display:inline-grid; place-items:center; width:18px; height:18px; margin-left:6px; padding:0; vertical-align:middle;
  border-radius:50%; border:1px solid var(--border); background:var(--surface-2); color:var(--text-secondary);
  font:700 11px/1 "JetBrains Mono",monospace; font-style:italic; cursor:pointer;
}
.info-btn:hover, .info-btn:focus-visible{ color:var(--accent); border-color:var(--accent); outline:none; }
/* .info-btn을 탭/클릭하면 뜨는 작은 설명 말풍선 (모바일엔 호버가 없어서 title 속성만으론
   아무 반응이 없다 - JS가 이 클래스로 엘리먼트를 만들어 body에 붙인다) */
.tip-bubble{
  position:fixed; z-index:250; max-width:260px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; font-size:11.5px; line-height:1.45; color:var(--text-secondary);
  box-shadow:var(--shadow); word-break:keep-all;
}
.modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(6,9,13,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-overlay[hidden]{ display:none; }

/* 설치 전면 차단 화면의 핵심 CSS(html.ct-install-blocked .shell/.install-block)는
   캐시 문제 때문에 base.html <head>에 인라인으로 옮겼다(2026-09-26) - 여기 중복해서
   두지 않는다. */
.modal{ width:100%; max-width:1040px; max-height:100%; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border-soft); }
.modal-close{ background:none; border:none; color:var(--text-secondary); font-size:16px; cursor:pointer; padding:4px 8px; border-radius:6px; }
.modal-close:hover, .modal-close:focus-visible{ color:var(--text-primary); background:var(--surface-2); outline:none; }
.modal-body{ padding:16px 18px 18px; overflow:auto; }
.modal-img{ overflow:hidden; border-radius:10px; border:1px solid var(--border-soft); background:#0e1218; }
/* 화면 폭에 맞춰 통째로 줄이고, 화면이 낮을 땐(가로로 눕힌 폰 등) 높이도 넘지 않게 비율을 유지한 채 줄인다 */
.modal-img img{ display:block; width:100%; height:auto; max-height:62vh; object-fit:contain; }
.cond-list{ margin:14px 0 0; padding-left:20px; display:grid; gap:6px; font-size:13px; color:var(--text-secondary); line-height:1.6; }
.cond-list b{ color:var(--text-primary); margin-right:6px; }
.modal-note{ margin:12px 0 0; font-size:12.5px; color:var(--text-muted); line-height:1.6; }
body.modal-open{ overflow:hidden; }

.mon-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:14px; }
.mon-tile{ background:var(--surface-2); border:1px solid var(--border-soft); border-radius:10px; padding:10px 12px; }
.mon-tile .mon-val{ font-size:20px; font-weight:700; font-family:"JetBrains Mono",monospace; margin-top:2px; }
.spark{ display:block; width:120px; height:28px; }
.card-head.collapsible{ cursor:pointer; user-select:none; }
.card-head.collapsible:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.card-head.collapsible .chev{ display:inline-block; width:1em; color:var(--text-muted); transition:transform .15s; }
.card-head.collapsible.collapsed .chev{ transform:rotate(-90deg); }
.card-head.collapsible.collapsed{ margin-bottom:0; }
.mon-head-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; font-size:12px; }
.mon-summary{ font-weight:600; }

/* 자금 이동 페이지 */
.flow-cols{ margin-top:6px; }
.flow-col-label{ font-size:11.5px; font-weight:700; letter-spacing:.02em; margin-bottom:8px; }
.flow-col-label.in{ color:var(--good); }
.flow-col-label.out{ color:var(--accent); }
.step-list{ list-style:none; margin:0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:10px; }
.step-list li{
  position:relative; padding-left:28px; font-size:12.5px; color:var(--text-secondary); line-height:1.6;
  counter-increment:step;
}
.step-list li::before{
  content:counter(step); position:absolute; left:0; top:0; width:19px; height:19px; border-radius:50%;
  background:var(--accent-dim); color:var(--accent); font-size:10.5px; font-weight:800;
  font-family:"JetBrains Mono",monospace; display:flex; align-items:center; justify-content:center;
}
.step-list.in li::before{ background:var(--good-dim); color:var(--good); }
.step-list li b{ color:var(--text-primary); }
/* border-top(3px)을 카드 기본 테두리(1px)와 같이 쓰면 둥근 모서리에서 두께가 달라 대각선 이음매가
   생긴다 - 안쪽 그림자(inset box-shadow)로 대신하면 border-radius를 따라 매끈하게 그려진다 */
.dir-card.dir-in{ box-shadow: var(--shadow), inset 0 3px 0 0 var(--good); }
.dir-card.dir-out{ box-shadow: var(--shadow), inset 0 3px 0 0 var(--accent); }
.badge-accent{ color:var(--accent); background:var(--accent-dim); }
.dir-cards{ grid-template-columns:1fr 1fr; } /* .grid-2의 기본 1.3:1 비율 대신 넣기/빼기를 5:5로 */
/* .dir-cards가 .grid-2의 모바일 1열 전환을 덮어쓰지 않도록, 좁은 화면에서는 다시 1열로 */
@media (max-width:720px){ .dir-cards{ grid-template-columns:1fr; } }

/* 입출금: 접이식 이용 방법 */
.help-card summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; list-style:none; user-select:none; }
.help-card summary::-webkit-details-marker{ display:none; }
.help-card summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.help-card .chevron{ color:var(--text-muted); font-size:13px; transition:transform .15s ease; flex:none; }
.help-card[open] .chevron{ transform:rotate(180deg); }
.badge-src{ font-size:10.5px; }
.list-hint{ font-size:11.5px; color:var(--text-muted); margin-top:10px; line-height:1.6; }

/* 거래 내역: 차트 아래 안내 */
.chart-note{ font-size:11.5px; color:var(--text-muted); margin-top:10px; }
.chart-note a{ color:var(--accent); text-decoration:none; font-weight:700; }
.chart-note a:hover{ text-decoration:underline; }

/* 거래 내역: 신규 잔고 추이(월별/연별) 카드의 .bt-tabs/.bt-hit-*/.bt-summary-row
   CSS는 캐시 문제(실기기에서 배포해도 안 갈아끼워짐, 2026-09-27) 때문에 base.html
   <head>에 인라인으로 옮겼다 - 여기 중복해서 두지 않는다. */

/* 대시보드 타일 안의 읽기 전용 설정 표시 + 설정 페이지의 매매 설정 카드 */
.tile-foot{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border-soft); }
.ro-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--text-secondary); padding:2px 0; word-break:keep-all; }
.ro-row b{ font-weight:700; white-space:nowrap; }
.ro-row b.on{ color:var(--good); }
.ro-row b.off{ color:var(--text-muted); }
.tile-link{ display:inline-block; margin-top:8px; font-size:11.5px; font-weight:700; color:var(--accent); }
.tile-link:hover{ text-decoration:underline; }
.stat-tile .stat-sub b{ color:var(--text-primary); font-weight:700; white-space:nowrap; }
.set-row, .set-block{ padding:14px 0; border-top:1px solid var(--border-soft); }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
/* 패치노트 버튼(/settings#eth-setting)으로 들어왔을 때 해당 스위치 행을 잠깐 강조 */
#eth-setting{ scroll-margin-top:80px; }
#eth-setting:target{ animation:setRowFlash 2.4s ease-out 1; }
@keyframes setRowFlash{ 0%,40%{ background:rgba(232,163,61,.16); box-shadow:0 0 0 6px rgba(232,163,61,.16); border-radius:10px; } 100%{ background:transparent; box-shadow:0 0 0 6px transparent; } }
@media (prefers-reduced-motion:reduce){ #eth-setting:target{ animation:none; background:rgba(232,163,61,.12); border-radius:10px; } }
/* 거래 내역 표의 월 구분 행 (연도와 그 달의 거래 수/수익률) */
table.trades tbody tr.month-row:hover{ background:none; }
table.trades tr.month-row td{ padding:14px 10px 6px; font-size:11.5px; font-weight:700; color:var(--text-secondary); border-bottom:1px solid var(--border); font-family:inherit; }
tr.month-row .mr-year{ color:var(--accent); }
/* 첫 화면 진입 시 뜨는 최신 패치노트 팝업 */
#patchPopup .card-title{ text-transform:none; letter-spacing:0; display:flex; align-items:center; gap:8px; }
.patch-popup-title{ font-size:16px; font-weight:800; line-height:1.4; margin-bottom:8px; }
.patch-popup-summary{ white-space:pre-line; margin:0 0 12px; font-size:13px; line-height:1.7; color:var(--text-secondary); }
.patch-popup-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft); }
.patch-popup-check{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-secondary); cursor:pointer; user-select:none; }
.patch-popup-check input{ width:16px; height:16px; accent-color:var(--accent); }
.patch-popup-actions{ display:flex; gap:8px; margin-left:auto; }
/* 패치노트 바로가기 버튼 2개 이상(ctas 배열) - 좁은 화면에서는 세로로 쌓는다 */
.patch-popup-ctas{ display:flex; gap:8px; margin-top:12px; }
@media (max-width:480px){ .patch-popup-ctas{ flex-direction:column; } }
.more-stats{ margin-top:8px; }
.more-stats summary{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none; user-select:none; font-size:12.5px; font-weight:700; color:var(--text-secondary); padding:6px 2px; }
.more-stats summary::-webkit-details-marker{ display:none; }
.more-stats summary:hover{ color:var(--text-primary); }
.more-stats summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.more-stats summary .chev{ display:inline-block; transition:transform .15s; }
.more-stats[open] summary .chev{ transform:rotate(180deg); }
.more-stats > .grid{ margin-top:8px; }
.set-row .t-label, .set-block .t-label{ font-size:13px; font-weight:600; }
.set-row .t-desc, .set-block .t-desc{ font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.5; }
.stepper{ display:flex; align-items:center; gap:8px; flex:none; }
.stepper-val{ font-size:16px; font-weight:800; min-width:44px; text-align:center; }
.ts-saved{ font-size:11.5px; font-family:"JetBrains Mono",monospace; color:var(--good); }
.ts-saved.err{ color:var(--bad); }

/* ---------- 모바일 다듬기 (폰 화면) ---------- */
.only-sm, .dt-short{ display:none; }
/* 차트 카드 머리: 폭이 좁으면 컨트롤이 아랫줄로 내려가고, 글자는 어느 폭에서도 세로로 쪼개지지 않게 */
.chart-card .card-head{ flex-wrap:wrap; }
.chart-card .card-head *{ white-space:nowrap; }
.chart-head-right{ margin-left:auto; }
@media (max-width:640px){
  /* 표: 덜 중요한 열(.hide-sm)은 숨기고, 날짜는 짧게, 칸 여백은 좁게 - 손익률/결과가 화면 밖으로 밀려나지 않게 */
  .hide-sm{ display:none; }
  .only-sm{ display:block; }
  .dt-full{ display:none; }
  .dt-short{ display:inline; }
  table.trades{ font-size:12px; }
  table.trades th, table.trades td{ padding-left:6px; padding-right:6px; }

  /* 거래 내역 통계 타일은 2열로 (8개가 한 줄씩 쌓이면 너무 길다) */
  .grid.tiles-2{ grid-template-columns:1fr 1fr; gap:10px; }
  .tiles-2 .stat-tile{ padding:13px; }
  .tiles-2 .stat-tile .stat-value{ font-size:20px; }
  .tiles-2 .stat-tile .stat-value.sm{ font-size:13.5px; white-space:nowrap; }
  .tiles-2 .stat-tile .stat-sub{ font-size:11px; }

  /* 관리자: 접이식 머리는 줄바꿈, 모니터링 표는 좁히지 말고 옆으로 밀어서 보기 */
  .card-head.collapsible{ flex-wrap:wrap; }
  .card-head.collapsible .card-title{ white-space:nowrap; }
  td .btn{ padding:7px 11px; font-size:12px; }
  table.trades tr.month-row td{ padding-left:6px; padding-right:6px; }
}

/* 폰과 폴드 안쪽 화면 사이 폭(641~1100px): 표 안의 결과/뱃지/버튼이 글자 단위로 쪼개지지 않게 하고,
   칸이 많은 표는 덜 중요한 열을 숨기거나(.hide-md) 좁히지 않고 옆으로 밀어서 보게 한다 */
table.trades td.win, table.trades td.loss, table.trades td.hold-cell, table.trades .dt-full, .badge, td .btn{ white-space:nowrap; }
@media (max-width:1000px){ .hide-md{ display:none; } }
@media (max-width:1100px){
  table.trades.wide{ min-width:820px; }
  table.trades.wide th, table.trades.wide td{ white-space:nowrap; }
}

/* 전체 매매 내역: 기간/구분/결과 필터 */
.stat-tile .stat-value.sm{ font-size:19px; }
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin:0 0 14px; }
.filter-group{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.filter-group .fg-label{ font-size:11.5px; color:var(--text-muted); font-weight:700; margin-right:2px; }
.chip.chip-btn.active{ color:var(--accent); background:var(--accent-dim); border-color:color-mix(in srgb, var(--accent) 35%, transparent); }
.list-count{ margin-left:6px; color:var(--text-muted); text-transform:none; letter-spacing:0; font-family:"JetBrains Mono",monospace; }

/* BTC·ETH 동시 운용 대시보드 (2026-09-28) */
.coin-tabs{ display:flex; gap:12px; }
.coin-tab{ flex:1; min-width:0; text-align:left; font:inherit; color:var(--text-primary); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; cursor:pointer; }
.coin-tab.active{ background:var(--surface-2); border-width:1.5px; padding:13.5px 15.5px; }
.coin-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.coin-tab .ct-row1{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.coin-tab .ct-price{ font-size:13.5px; font-weight:700; }
.coin-tab .ct-sub{ font-size:12px; color:var(--text-secondary); margin-top:7px; }
.coin-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.coin-state{ margin-left:auto; display:inline-flex; align-items:center; border-radius:99px; padding:3px 10px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.coin-state.hold{ background:var(--good-dim); color:var(--good); }
.coin-state.wait{ background:var(--surface-2); color:var(--text-secondary); border:1px solid var(--border); }
.cond-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
.cond-chip{ font-size:11px; color:var(--text-secondary); background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:3px 8px; }
.cond-cols{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:12px; }
.cond-col-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; }
.cond-col-head .mono{ font-size:11.5px; color:var(--text-secondary); }
.cond-hold{ margin-top:14px; border:1px dashed var(--border); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:6px; }
.cond-hold p{ margin:0; font-size:12.5px; color:var(--text-secondary); line-height:1.6; }
@media (max-width:820px){ .cond-cols{ grid-template-columns:1fr; } .coin-tabs{ flex-direction:column; } }
#tradeCoinFilter{ flex:none; }
#tradeCoinFilter .seg-tab{ white-space:nowrap; padding-left:12px; padding-right:12px; }