/* [디자인 리프레시 2026-09-29] 한글 UI 글꼴(Pretendard) + 숫자 글꼴(JetBrains Mono). 인터넷이 안 되면 아래 글꼴 목록의 다음 글꼴(맑은 고딕 · Consolas)로 그린다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap");
/* ==============================================================
   Design tokens — SigmaDesk 2-테마 시스템 (다크/라이트)
   - 매수(BUY) = 빨강, 매도(SELL) = 파랑  (국내 증권시장 관례에 맞춤)
   - 색은 반드시 이 토큰을 통해서만 사용한다 (하드코딩 금지)
   - [테마 시스템] 로고(시리우스 별) 컨셉에 맞춰 "은은하고 차분한 골드"를
     기본 브랜드 색으로 확정했다. 다크모드는 메인=골드/서브=바다색, 라이트
     모드는 정반대(메인=바다색/서브=골드)로 뒤집는다 — 그래서 실제 색상 값
     자체(--gold, --ocean)는 테마와 무관하게 고정해두고, "어느 쪽이 메인/
     서브냐"만 --accent/--accent-sub가 테마별로 가리키는 대상을 바꾼다.
     html[data-theme="light"]에서 전체를 오버라이드한다(아래 참고).
================================================================= */
:root {
  /* [다크모드 - 기본값] 메인=골드(시리우스), 서브=차분한 바다색 */
  --bg: #0a0d12;
  --panel: #10141b;
  --panel-alt: #131822;
  --panel-raised: #161c26;
  --border: #1e2530;
  --border-soft: #262e3a;
  --text: #e8ecf1;
  --text-muted: #6b7480;
  --text-dim: #454d59;

  /* 매수(상승) = 빨강 / 매도(하락) = 파랑 */
  --buy: #ff4d5e;
  --buy-bg: rgba(255, 77, 94, 0.14);
  --buy-border: rgba(255, 77, 94, 0.4);
  --sell: #3b82f6;
  --sell-bg: rgba(59, 130, 246, 0.14);
  --sell-border: rgba(59, 130, 246, 0.4);

  /* [브랜드 색] 은은하고 차분한 골드(시리우스) · 차분한 바다색 - 두 값
     자체는 테마와 무관하게 고정, 아래 --accent/--accent-sub가 테마별로
     이 둘 중 어느 쪽을 "메인"으로 쓸지만 바뀐다. */
  --gold: #c9a961;
  --gold-hover: #d9bd82;
  --gold-bg: rgba(201, 169, 97, 0.14);
  --gold-border: rgba(201, 169, 97, 0.4);
  --ocean: #3f7089;
  --ocean-hover: #4f88a4;
  --ocean-bg: rgba(63, 112, 137, 0.14);
  --ocean-border: rgba(63, 112, 137, 0.4);

  /* 다크모드: 메인=골드, 서브=바다색 */
  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --accent-bg: var(--gold-bg);
  --accent-border: var(--gold-border);
  --accent-sub: var(--ocean);
  --accent-sub-hover: var(--ocean-hover);
  --accent-sub-bg: var(--ocean-bg);
  /* [테마 대응 그림자] 기존에 하드코딩되어 있던 보라색 rgba 그림자들을
     골드 값으로 미리 계산해둔 변수. 라이트모드에서는 바다색 값으로 다시
     오버라이드된다(아래 참고) - box-shadow/drop-shadow는 CSS 변수를
     rgba() 안에서 부분 치환할 수 없어서 이렇게 완성된 값을 통째로 둔다. */
  --accent-glow-12: rgba(201, 169, 97, 0.12);
  --accent-glow-15: rgba(201, 169, 97, 0.15);
  --accent-glow-45: rgba(201, 169, 97, 0.45);
  --accent-glow-55: rgba(201, 169, 97, 0.55);

  --warn: #f59e0b;
  --warn-bg: rgba(245, 158, 11, 0.14);
  --violet: #c084fc;
  --violet-bg: rgba(168, 85, 247, 0.16);
  /* 매매 방향과 무관한 일반 시스템 상태(연결 성공/실패 등) 전용 색 */
  --ok: #22c55e;
  --fail: #ef4444;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-panel: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-pop: 0 4px 16px -4px rgba(0,0,0,0.6);

  --font-num: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", sans-serif;
}

/* [라이트모드] 메인=바다색, 서브=골드로 정반대 - 배경·텍스트·테두리도
   밝은 톤으로 전부 뒤집는다. 매수/매도(빨강/파랑) 색은 의미가 고정된
   색이라 두 테마에서 동일하게 유지한다. */
html[data-theme="light"] {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-alt: #f1f3f6;
  --panel-raised: #eceef2;
  --border: #e2e5eb;
  --border-soft: #d3d8e0;
  --text: #1a1f29;
  --text-muted: #5b6472;
  --text-dim: #99a1ac;

  --accent: var(--ocean);
  --accent-hover: var(--ocean-hover);
  --accent-bg: var(--ocean-bg);
  --accent-border: var(--ocean-border);
  --accent-sub: var(--gold);
  --accent-sub-hover: var(--gold-hover);
  --accent-sub-bg: var(--gold-bg);
  --accent-glow-12: rgba(63, 112, 137, 0.12);
  --accent-glow-15: rgba(63, 112, 137, 0.15);
  --accent-glow-45: rgba(63, 112, 137, 0.45);
  --accent-glow-55: rgba(63, 112, 137, 0.55);

  --shadow-panel: 0 1px 2px rgba(20,30,45,0.06), 0 8px 24px -8px rgba(20,30,45,0.12);
  --shadow-pop: 0 4px 16px -4px rgba(20,30,45,0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ==== 실거래(LIVE) 모드 전용 스타일 ====
   live.html에서만 쓰인다. 테스트넷 화면(index.html)과 시각적으로 확실히
   달라 보이게 해서 실수로 모드를 혼동하는 일을 막는 게 목적이다. */
.live-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(90deg, #ff4d5e, #c81e3a);
  color: white;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  padding: 8px 10px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 12px rgba(255, 77, 94, 0.4);
}
.login-card--live { border-color: rgba(255, 77, 94, 0.35); }
.login-brand-mark--live { color: var(--buy) !important; filter: drop-shadow(0 0 10px rgba(255, 77, 94, 0.55)); }
.login-brand-text--live { color: var(--buy) !important; }
.topbar--live { border-bottom-color: rgba(255, 77, 94, 0.3); }
.env-badge--live {
  color: var(--buy);
  border-color: var(--buy);
  background: var(--buy-bg);
  animation: liveBadgeBlink 1.2s ease-in-out infinite;
}
@keyframes liveBadgeBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.footnote--live {
  background: var(--buy-bg);
  border-top-color: rgba(255, 77, 94, 0.4);
  color: var(--text);
}
.footnote--live b { color: var(--buy); }

/* ==== Login ==== */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, var(--accent-glow-12), transparent 42%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.08), transparent 42%),
    var(--bg);
}

.login-card {
  width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow-panel);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.login-brand-mark {
  display: inline-flex;
  align-items: center;
  filter: drop-shadow(0 0 10px var(--gold-bg));
}
.login-brand-text {
  font-family: var(--font-num);
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
.login-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

.field-label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin: 15px 0 6px;
  text-transform: uppercase;
  font-weight: 600;
}
.field-input {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--text);
  font-family: var(--font-num);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow-15);
}
.field-input--readonly {
  color: var(--text-muted);
  font-size: 12px;
  cursor: default;
  user-select: text;
}
.field-input::placeholder { color: var(--text-dim); }
/* [부호 입력] 손절(−)·익절(+) 칸: 손절 칸에 "+", 익절 칸에 "-"를 적으면 주황 테두리로 알리고, 포커스가 빠지면 올바른 부호로 고쳐 쓴다 */
.field-input.sign-mismatch { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
/* [설정 검사] 저장을 막은 칸 - 값은 그대로 두고 어디가 문제인지만 표시한다(검사기는 값을 고치지 않는다) */
.field-input.field-invalid { border-color: var(--buy); box-shadow: 0 0 0 3px var(--buy-bg); }
.field-input[data-sign="-"] { color: var(--sell); }
.field-input[data-sign="+"] { color: var(--buy); }

.btn-primary {
  width: 100%;
  margin-top: 24px;
  padding: 12px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.99); }

.login-error {
  color: var(--buy);
  font-size: 12px;
  margin-top: 10px;
  min-height: 14px;
}
.login-help {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.65;
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 15px;
}
.login-help a { color: var(--accent); text-decoration: none; }
.login-help a:hover { text-decoration: underline; }

/* ==== 회원가입 링크 / 성공 메시지 ==== */
.signup-row {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
}
.signup-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.signup-link:hover { text-decoration: underline; }
.signup-success {
  color: var(--buy);
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
}

.login-help code {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-num);
  font-size: 12px;
}

/* ==== 관리자 로그인 화면: 테스트넷/실거래 모드 토글 ==== */
.mode-tabs { width: 100%; margin-bottom: 4px; }
.mode-tabs .strategy-tab { flex: 1; }
.strategy-tab--danger.active {
  background: var(--sell-bg, rgba(255,77,94,0.16));
  color: var(--buy);
  border: 1px solid var(--buy-border, rgba(255,77,94,0.4));
}

.live-warning {
  margin: 10px 0 4px;
  padding: 12px 13px;
  background: var(--warn-bg);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
}
.live-warning b { color: var(--warn); }
.live-confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(245, 158, 11, 0.35);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.live-confirm-row input { margin-top: 2px; flex-shrink: 0; }

.btn-primary--danger { background: var(--buy); }
.btn-primary--danger:hover { filter: brightness(1.08); background: var(--buy); }

/* ==== 테스트넷 연결 상태 표시 ==== */
.conn-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-alt);
  margin-bottom: 4px;
}
.conn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}
.conn-status--checking .conn-dot { background: var(--warn); animation: signalPulse 1s ease-in-out infinite; }
.conn-status--ok .conn-dot { background: var(--ok); }
.conn-status--fail .conn-dot { background: var(--fail); }
.conn-status--checking { color: var(--text-muted); }
.conn-status--ok { color: var(--ok); border-color: rgba(34, 197, 94, 0.4); }
.conn-status--fail { color: var(--fail); border-color: rgba(239, 68, 68, 0.4); }
#connStatusText { flex: 1; }
.conn-retry {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}
.conn-retry:hover { opacity: 0.8; }

/* ==== Dashboard shell ==== */
.topbar {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: inline-flex; align-items: center; }
/* [로고 - 시리우스 별] SVG 두 겹(큰 별 + 작은 반짝임)으로 구성 - 은은하게
   빛나는 느낌을 위해 옅은 골드 그림자를 항상 함께 준다. 로고 색상 자체는
   브랜드 아이덴티티라 테마(다크/라이트)와 무관하게 항상 골드로 고정한다
   (SVG 안에서 fill="var(--gold)"로 직접 지정, currentColor를 안 씀). */
.brand-star { filter: drop-shadow(0 0 6px var(--gold-bg)); flex-shrink: 0; }
.brand-name { font-family: var(--font-num); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; color: var(--text); margin-right: 10px; }
.symbol-name { font-family: var(--font-num); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }
.env-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--warn);
  border: 1px solid var(--warn);
  background: var(--warn-bg);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.05em;
}
.topbar-right { display: flex; align-items: center; gap: 16px; }
.last-price { font-family: var(--font-num); font-size: 16px; font-weight: 600; transition: color 0.15s; }
.ws-status { font-size: 12px; color: var(--text-dim); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-ghost:hover { border-color: var(--text-muted); color: var(--text); background: var(--panel-alt); }

/* ==== 연결 갱신 아이콘 버튼 ==== */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 4px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.btn-icon:hover {
  color: var(--text);
  transform: rotate(35deg);
}
.btn-icon:active { transform: rotate(35deg) scale(0.92); }
.btn-icon .icon-refresh { display: block; }
.btn-icon.spinning .icon-refresh { animation: iconSpin 0.7s linear infinite; }
.btn-icon.spinning { color: var(--text); transform: none; }
@keyframes iconSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.panel { background: var(--panel); padding: 16px 16px 22px; }
.panel-title {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.09em;
  margin-bottom: 11px;
  font-weight: 600;
}

/* ==== Order book DOM ladder ==== */
.ob-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 4px 7px;
  border-bottom: 1px solid var(--border);
}
.ob-header span:nth-child(2) { text-align: right; }
.ob-header span:nth-child(3) { text-align: right; }

.ob-side {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
}
/* ⚠️ 예전에는 매도호가(asks)만 column-reverse + 배열 뒤집기로 최우선가를 맨
   아래(스프레드 바로 위)에 붙여 보여줬는데, 매수호가는 반대로 최우선가가 맨 위라
   두 쪽 방향이 서로 달라 헷갈렸다. 지금은 양쪽 다 평범한 column 방향으로 통일해서
   "최우선 호가가 항상 맨 위, 멀어질수록 아래"로 일관되게 보이도록 했다. */

.ob-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-family: var(--font-num);
  font-size: 12px;
  padding: 3.5px 4px;
  z-index: 0;
  border-radius: 3px;
}
.ob-row .depth-bar {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: -1;
  transition: width 0.15s ease-out;
}
/* 매도(ask) = 파랑, 매수(bid) = 빨강 */
.ob-row.ask .depth-bar { background: var(--sell-bg); }
.ob-row.bid .depth-bar { background: var(--buy-bg); }
.ob-row.ask .price { color: var(--sell); }
.ob-row.bid .price { color: var(--buy); }
.ob-row .size, .ob-row .total { text-align: right; color: var(--text-muted); }

/* 크로스오버(호가 추월) 화살표: 매수 추월=상승(▲, 빨강), 매도 추월=하락(▼, 파랑).
   한 번 뜨면 다음 추월 이벤트가 올 때까지 그대로 유지되며, 계속 반짝인다. */
.ob-arrow {
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
  font-weight: 600;
  animation: obArrowBlink 0.9s ease-in-out infinite;
}
.ob-arrow-up { color: var(--buy); }
.ob-arrow-down { color: var(--sell); }
@keyframes obArrowBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* 물량 변동 시 순간적으로 반짝이는 효과 (해외선물 DOM 창 특유의 실시간 피드백)
   - 물량 증가 = 매수/매도 각자의 색으로 밝게, 물량 감소 = 어둡게, 신규 호가 = 보라 */
@keyframes flashUp {
  0%   { background-color: rgba(255, 77, 94, 0.5); }
  100% { background-color: transparent; }
}
@keyframes flashDown {
  0%   { background-color: rgba(59, 130, 246, 0.5); }
  100% { background-color: transparent; }
}
@keyframes flashNew {
  0%   { background-color: var(--accent-glow-45); }
  100% { background-color: transparent; }
}
.row-flash-up   { animation: flashUp 0.5s ease-out; }
.row-flash-down { animation: flashDown 0.5s ease-out; }
.row-new        { animation: flashNew 0.6s ease-out; }

/* ==== Recent trades (Trade Tape) ==== */
.trade-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 4px 7px;
  border-bottom: 1px solid var(--border);
}
.trade-header span:nth-child(2) { text-align: right; }
.trade-header span:nth-child(3) { text-align: right; }

.trade-tape {
  display: flex;
  flex-direction: column;
  max-height: 520px;
  overflow: hidden;
}
.trade-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-family: var(--font-num);
  font-size: 12px;
  padding: 4.5px 4px;
  animation: rowIn 0.25s ease-out;
  border-radius: 3px;
}
@keyframes rowIn {
  0%   { background-color: rgba(255,255,255,0.10); }
  100% { background-color: transparent; }
}
.trade-row .trade-time { color: var(--text-dim); }
.trade-row .trade-price { text-align: right; }
.trade-row .trade-qty { text-align: right; color: var(--text-muted); }
.trade-row.buy .trade-price { color: var(--buy); }
.trade-row.sell .trade-price { color: var(--sell); }

/* ==== 최우선 매수/매도 호가 + 스프레드 바 ==== */
.ob-spread {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-num);
  font-size: 12px;
  padding: 9px 4px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 3px 0;
  background: var(--panel-alt);
  border-radius: 4px;
}
#spreadMid {
  text-align: center;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  padding: 0 10px;
}
.tick-price {
  font-weight: 600;
  transition: color 0.15s;
}
#bestBidDisplay { text-align: left; }
#bestAskDisplay { text-align: right; }
.tick-up   { color: var(--buy) !important; }
.tick-down { color: var(--sell) !important; }
.tick-flat { color: var(--text-muted) !important; }
.tick-arrow { font-size: 12px; margin: 0 2px; }

.last-price-arrow {
  font-size: 12px;
  margin-right: 4px;
}
.last-price-arrow.tick-up   { color: var(--buy) !important; }
.last-price-arrow.tick-down { color: var(--sell) !important; }
.last-price.tick-up   { color: var(--buy); }
.last-price.tick-down { color: var(--sell); }

/* ==== 시그널 카드 (SIGNAL 패널에서 사용) ====
   카드가 옆으로 살짝 겹쳐 쌓이고(뒤 카드일수록 아래에 깔림), 목록 오른쪽 끝은
   반투명하게 사라지는 것처럼 페이드 처리된다. 그 부분을 스크롤하면 다시
   또렷하게 나타난다 (opacity 고정이 아니라 가장자리 마스크로 구현). */
.signal-card {
  flex: 0 0 auto;
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-family: var(--font-num);
  position: relative;
  margin-left: -14px; /* 카드끼리 살짝 겹쳐서 쌓인 느낌 (겹치는 폭을 줄여 글자 침범 방지) */
  box-sizing: border-box;
  overflow: hidden; /* 텍스트가 카드 폭을 넘어 옆 카드 위로 삐져나가지 않도록 확실히 자른다 */
  box-shadow: -6px 0 10px -6px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s;
}
.signal-log > .signal-card:first-child { margin-left: 0; }
.signal-log > .signal-card:hover { transform: translateY(-3px); }
/* 쌓인 순서: 최신(첫 카드)이 맨 위, 지나간 카드일수록 뒤에 깔림 (최근 10개) */
.signal-log > .signal-card:nth-child(1)  { z-index: 10; }
.signal-log > .signal-card:nth-child(2)  { z-index: 9; }
.signal-log > .signal-card:nth-child(3)  { z-index: 8; }
.signal-log > .signal-card:nth-child(4)  { z-index: 7; }
.signal-log > .signal-card:nth-child(5)  { z-index: 6; }
.signal-log > .signal-card:nth-child(6)  { z-index: 5; }
.signal-log > .signal-card:nth-child(7)  { z-index: 4; }
.signal-log > .signal-card:nth-child(8)  { z-index: 3; }
.signal-log > .signal-card:nth-child(9)  { z-index: 2; }
.signal-log > .signal-card:nth-child(10) { z-index: 1; }

/* 두 번째 카드부터 점점 반투명하게 흐려짐 (첫 카드=최신만 또렷, 최근 10개까지 단계적으로) */
.signal-log > .signal-card:nth-child(2)  { opacity: 0.86; }
.signal-log > .signal-card:nth-child(3)  { opacity: 0.74; }
.signal-log > .signal-card:nth-child(4)  { opacity: 0.63; }
.signal-log > .signal-card:nth-child(5)  { opacity: 0.53; }
.signal-log > .signal-card:nth-child(6)  { opacity: 0.45; }
.signal-log > .signal-card:nth-child(7)  { opacity: 0.38; }
.signal-log > .signal-card:nth-child(8)  { opacity: 0.32; }
.signal-log > .signal-card:nth-child(9)  { opacity: 0.27; }
.signal-log > .signal-card:nth-child(10) { opacity: 0.22; }
/* [100개 확장] 11번째 이후는 마지막 단계 투명도를 그대로 유지 - 없으면 11번째부터
   갑자기 다시 또렷해진다. 스크롤로 지난 카드를 읽을 때는 hover로 되살린다. */
.signal-log > .signal-card:nth-child(n+11) { opacity: 0.22; }
.signal-log > .signal-card:hover { opacity: 1; }
.signal-log > .signal-card:hover { opacity: 1; }

.signal-card-time {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 5px;
  white-space: nowrap;
}
.signal-card-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere; /* 긴 숫자·기호가 줄바꿈 없이 폭을 넘어가는 것 자체를 방지 */
  word-break: break-word;
}

.signal-card--buy,
.signal-card--bull   { border-left-color: var(--buy); }
.signal-card--sell,
.signal-card--bear    { border-left-color: var(--sell); }
.signal-card--converge { border-left-color: var(--violet); }
.signal-card--diverge  { border-left-color: var(--warn); }
/* 반대 크로스오버로 인한 포지션 청산/스위칭 시그널: 일반 매매 신호와 구분되게 앰버 계열 */
/* [크로스오버 v7] 시그널 페이지 카드 - 되돌림 무장/도달/만료·벽 소진 임박 */
.signal-card--v2arm    { border-left-color: var(--violet); }
.signal-card--v2fire   { border-left-color: var(--buy); }
.signal-card--v2expire { border-left-color: var(--muted, #8a8f98); opacity: .85; }
.signal-card--v2scout  { border-left-color: var(--warn); }

.signal-card--switch {
  border-left-color: var(--warn);
  background: var(--warn-bg);
}

/* 방금 들어온(가장 왼쪽) 카드만 살짝 강조 */
.signal-log > .signal-card:first-child {
  background: var(--panel-raised);
  box-shadow: 0 0 0 1px currentColor inset, -6px 0 10px -6px rgba(0, 0, 0, 0.55);
}
.signal-log > .signal-card:first-child.signal-card--buy,
.signal-log > .signal-card:first-child.signal-card--bull { color: var(--buy); }
.signal-log > .signal-card:first-child.signal-card--sell,
.signal-log > .signal-card:first-child.signal-card--bear { color: var(--sell); }
.signal-log > .signal-card:first-child.signal-card--converge { color: var(--violet); }
.signal-log > .signal-card:first-child.signal-card--diverge { color: var(--warn); }
.signal-log > .signal-card:first-child.signal-card--switch {
  color: var(--warn);
  background: var(--warn-bg);
}
.signal-log > .signal-card:first-child .signal-card-text { color: inherit; }

/* 돌파 깊이 미니 바 (크로스오버 카드 전용) */
.signal-card-depth {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.signal-card-depth-bar {
  display: flex;
  gap: 1.5px;
  flex-wrap: wrap;
}
.signal-card-depth-block {
  width: 4px;
  height: 10px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.signal-card--buy .signal-card-depth-block.filled  { background: var(--buy); }
.signal-card--sell .signal-card-depth-block.filled { background: var(--sell); }
.signal-card-depth-count {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ==== Account panel (수동 주문 없음, 안내문 + 잔고/미체결 주문만 표시) ==== */
.account-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 4px;
  padding: 10px 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.account-note b { color: var(--text); }

/* ==== 잔고 헤더 (SPOT/FUTURES 탭 + 새로고침 버튼) - 지갑 패널 전용 ==== */
.balance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  margin-bottom: 11px;
}
.balance-title { margin: 0 !important; }

.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}
.btn-mini:hover { border-color: var(--text-muted); color: var(--text); background: var(--panel-raised); }
.btn-mini:active { transform: scale(0.96); }
.btn-mini.spinning { opacity: 0.6; pointer-events: none; }
.btn-mini--danger {
  background: var(--buy-bg);
  border-color: var(--buy-border, rgba(255, 77, 94, 0.4));
  color: var(--buy);
}
.btn-mini--danger:hover { background: rgba(255, 77, 94, 0.22); border-color: var(--buy); color: var(--buy); }
.btn-mini--danger:disabled { opacity: 0.5; pointer-events: none; }

.balances, .open-orders {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.balances .row, .open-orders .row {
  display: flex;
  justify-content: space-between;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border);
}
.balances-error {
  color: var(--warn);
  line-height: 1.5;
  white-space: normal;
}

.footnote {
  padding: 11px 20px;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  background: var(--panel);
  line-height: 1.6;
}

/* ==== 거래 모드 패널 (차트 바로 아래, SPOT/FUTURES·레버리지·마진) ==== */
.market-mode-panel {
  border-top: 1px solid var(--border);
}

/* ==== 전략 구동 / 전략 설정 패널 ==== */
/* [슬롯 강조 방식 변경] 예전에는 슬롯 2가 슬롯 1과 구분되도록 위쪽에만
   3px 강조선(border-top)을 그었는데, 요청에 따라 이제 각 슬롯 전체
   (전략 구동 + 그 안에 중첩된 전략 설정까지, <section class="runtime-panel">
   하나가 이미 그 둘을 통째로 감싸고 있음)를 은은한 라운드 테두리 박스로
   감싼다 - 슬롯 1·슬롯 2 둘 다 동일하게 적용되어(강조선처럼 슬롯 2에만
   붙는 게 아님), 각 슬롯의 시작과 끝이 한눈에 명확히 구분된다. */
.runtime-panel {
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  overflow: hidden;
}

/* ==== 수익률 비교 패널 (슬롯 1 vs 슬롯 2) ==== */
.comparison-panel { border-top: 1px solid var(--border); }
.comparison-grid {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}
.comparison-col {
  flex: 1 1 0;
  min-width: 0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.comparison-col-title {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.comparison-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-num);
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.comparison-row:last-child { border-bottom: none; }
.comparison-row span:first-child { color: var(--text-dim); }
.comparison-row span:last-child { font-weight: 600; color: var(--text); }
@media (max-width: 640px) {
}

/* ==== 시그널 패널 (자동매매 칸과 오더북 사이) ====
   최근 5개까지 카드가 옆으로 살짝 겹쳐 쌓인다. 오른쪽 끝은 반투명하게 사라지는
   것처럼 페이드 처리되어 있고, 그 부분을 옆으로 스크롤하면 다시 또렷하게
   나타난다 (opacity 고정이 아니라 mask-image로 가장자리만 페이드 처리). */
.signal-panel {
  border-top: 1px solid var(--border);
  padding-bottom: 14px;
}
.signal-log {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  padding: 6px 4px 10px 4px; /* 위/오른쪽 여유 - hover 시 살짝 뜨는 카드와 그림자 공간 */
  mask-image: linear-gradient(to right, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 82%, transparent 100%);
}
.signal-log-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 2px 2px 4px;
}

/* ==== 접기/펼치기 가능한 패널 공통 (차트/거래모드/자동매매/시그널/오더북/체결내역) ==== */
.collapsible-panel { padding-bottom: 12px; }
.panel-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-collapse-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-collapse-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}
.panel-collapse-btn:hover { color: var(--text); }
.collapsible-panel.collapsed .panel-collapse-btn { transform: rotate(-90deg); }
.collapsible-panel .panel-body { margin-top: 14px; }
.collapsible-panel.collapsed .panel-body,
.collapsible-panel.collapsed > script { display: none; }
.collapsible-panel.collapsed { padding-bottom: 16px; }
/* ⚠️ 발견된 버그: 중첩된 "전략 설정" 서브패널(.nested-collapsible, 예:
   settings-subpanel)이 실제 HTML 구조상 바깥 패널의 .panel-body "밖"에
   있어서(전략 구동 패널의 runtime-summary-mini 등과 같은 레벨), 바깥
   패널(전략 구동)을 접어도 .panel-body만 숨겨지고 전략 설정은 계속 화면에
   남아있었다. 이제 바깥 패널이 collapsed 상태면 그 안에 중첩된
   .nested-collapsible도 함께 숨긴다 - 슬롯을 접으면 전략 설정도 정확히
   함께 사라진다. */
.collapsible-panel.collapsed > .nested-collapsible { display: none; }

/* [이중 접이식] 전략 구동 패널 안에 중첩된 "전략 설정" 하위 패널. 바깥
   패널과 시각적으로 구분되도록 살짝 들여쓰고, 배경을 한 톤 더 어둡게 하고,
   왼쪽에 강조선을 둔다 - 두 패널이 같은 색이면 어디부터 중첩이 시작되는지
   구분하기 어렵기 때문이다. 접기/펼치기 동작 자체는 바깥 패널과 똑같이
   .collapsible-panel/.panel-collapse-btn 클래스를 그대로 재사용한다
   (setupCollapsiblePanels가 :scope > 자식만 검사하도록 되어 있어서, 몇 겹이
   중첩되어도 각자 자기 버튼에만 반응한다). */
.settings-subpanel.nested-collapsible {
  margin-top: 18px;
  margin-left: 4px;
  margin-right: 4px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}
.settings-subpanel.nested-collapsible.collapsed { padding-bottom: 14px; }

/* ==== 차트 패널 (최상단 배치, TradingView 위젯) ====
   차트가 오더북·거래모드 열보다 작아 보이는 문제 수정: 예전에는 위젯을
   고정 420px 높이로 그렸는데, 옆의 오더북+거래모드 열은 내용(설정값·안내
   문구)에 따라 그보다 훨씬 커져서(align-items: stretch로 세 열의 높이가
   맞춰지긴 하지만) 차트 자체는 420px에 머물고 그 아래로 빈 여백만 남았다.
   이제 TradingView 위젯을 autosize로 그리고, 이 컨테이너를 flex로 늘려서
   행 안에서 항상 오더북·거래모드 열과 정확히 같은 높이를 채우도록 한다. */
.chart-panel {
  border-top: 1px solid var(--border);
}
.tradingview-widget-container {
  flex: 1 1 0;
  min-height: 480px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel-alt);
}
/* [차트 위 장세 배지] 위젯 iframe 위에 겹쳐 띄운다 - 클릭은 통과시켜 차트 조작을 막지 않는다 */
.tradingview-widget-container { position: relative; }
.chart-regime-badge { position: absolute; top: 44px; left: 10px; z-index: 5; pointer-events: none; padding: 6px 10px; border-radius: 8px;
  background: rgba(11, 15, 20, .86); border: 1.5px solid var(--regime-color, #4b5563); box-shadow: 0 2px 10px rgba(0,0,0,.35); max-width: 70%; }
.chart-regime-main { font-size: 14px; font-weight: 600; color: var(--regime-color, #e5e7eb); letter-spacing: -.2px; }
.chart-regime-arrow { font-size: 15px; }
.chart-regime-conf { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.chart-regime-dim { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.chart-regime-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-regime-strip { margin-top: 6px; }
.chart-regime-strip canvas { width: 100%; height: 38px; display: block; }
.chart-regime-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.chart-regime-legend span { display: inline-flex; align-items: center; gap: 4px; }
.chart-regime-legend i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; }
@media (max-width: 700px) { .chart-regime-badge { top: 40px; left: 6px; max-width: 85%; } .chart-regime-main { font-size: 12px; } }
#tv_chart_container {
  height: 100%;
}
.chart-note {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 8px 2px 0;
}
.chart-note b { color: var(--text-muted); }

/* ==== 차트+오더북+거래모드 통합 접기 wrapper (신규) ====
   이 바깥 패널은 안쪽의 chart-orderbook-row(자체 padding·gap 있는 3분할
   레이아웃)를 그대로 감싸기만 하는 역할이라, 기본 .panel-body의 좌우/하단
   padding을 없애서 이중으로 여백이 생기지 않게 한다. */
.chart-group-panel { padding-bottom: 0; }
.chart-group-body { padding: 0; margin: 0; }

/* ==== 차트 + 오더북 나란히 배치 (오더북은 폭을 줄이고 세로 높이는 차트에 맞춤) ====
   오더북 가로폭을 줄여서 차트 옆에 붙여달라는 요청으로 추가했다. .grid와 같은
   패턴(1px 틈으로 테두리처럼 보이게)을 재사용한다. 좁은 화면에서는 세로로 쌓인다.
   두 패널 다 내부를 flex column으로 만들어서, align-items:stretch로 늘어난 높이를
   오더북의 매수/매도 목록(.ob-side)이 실제로 꽉 채우도록 했다 (전에는 밖에서 늘어난
   패널 높이 안에 고정 높이(460px) 스크롤 영역만 있어서 아래쪽에 빈 공간이 남았다). */
.chart-orderbook-row {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: var(--border);
}
.chart-orderbook-row .chart-panel,
.chart-orderbook-row .orderbook-panel--sidebar,
.chart-orderbook-row .market-mode-panel--sidebar {
  display: flex;
  flex-direction: column;
  border-top: none;
}
.chart-orderbook-row .chart-panel > .panel-body,
.chart-orderbook-row .orderbook-panel--sidebar > .panel-body,
.chart-orderbook-row .market-mode-panel--sidebar > .panel-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* flex 자식 내부에서 overflow(스크롤)가 제대로 동작하도록 */
}
.chart-orderbook-row .chart-panel {
  flex: 1 1 auto;
  min-width: 0; /* 플렉스 자식이 내용 때문에 넘치지 않도록 */
}
.orderbook-panel--sidebar {
  flex: 0 0 300px;
  max-width: 300px;
}
.orderbook-panel--sidebar .panel-body {
  gap: 0;
}
.orderbook-panel--sidebar .ob-header,
.orderbook-panel--sidebar .ob-spread {
  flex: 0 0 auto; /* 헤더/스프레드 행은 원래 높이 그대로, 늘어나지 않음 */
}
.orderbook-panel--sidebar .ob-side {
  flex: 1 1 0; /* 남는 세로 공간을 매수/매도 목록이 절반씩 나눠 채운다 */
  max-height: none;
  min-height: 80px;
}
.orderbook-panel--sidebar .ob-header { font-size: 12px; }
.orderbook-panel--sidebar .ob-row { font-size: 12px; padding: 3px 3px; }
@media (max-width: 1000px) {
  .chart-orderbook-row { flex-direction: column; }
  .chart-orderbook-row .chart-panel,
  .chart-orderbook-row .orderbook-panel--sidebar,
  .chart-orderbook-row .market-mode-panel--sidebar { flex: 1 1 auto; }
  .orderbook-panel--sidebar { max-width: none; }
  .orderbook-panel--sidebar .ob-side { max-height: 340px; min-height: 0; flex: 1 1 340px; }
  .orderbook-panel--sidebar .ob-header { font-size: 12px; }
  .orderbook-panel--sidebar .ob-row { font-size: 12px; padding: 3.5px 4px; }
}


.auto-header-left { display: flex; align-items: center; gap: 10px; }

.auto-status-badge {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}
.auto-status-badge.on {
  color: var(--buy);
  background: var(--buy-bg);
  border-color: var(--buy-border);
}

.auto-toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.auto-toggle input { opacity: 0; width: 0; height: 0; }
.auto-toggle-slider {
  position: absolute; inset: 0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s;
}
.auto-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; top: 2px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.auto-toggle input:checked + .auto-toggle-slider { background: var(--buy-bg); border-color: var(--buy); }
.auto-toggle input:checked + .auto-toggle-slider::before { transform: translateX(18px); background: var(--buy); }

/* ==== 전략 선택 탭 (크로스오버 / 어필리에이트) ====
   버튼 톤 통일 방침에 맞춰 강조색 없이 무채색으로. 선택된 탭만 살짝 밝게. */
.strategy-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 14px;
}
.strategy-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.strategy-tab:hover { color: var(--text); }
.strategy-tab.active { background: var(--panel-raised); color: var(--text); }
.strategy-tab:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.strategy-tab:disabled:hover { color: var(--text-muted); }
.strategy-tab.active:disabled { color: var(--text); }

.strategy-settings { margin-bottom: 4px; }
.strategy-settings.hidden { display: none; }
.strategy-note {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 16px;
  padding: 8px 11px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.strategy-note b { color: var(--text-muted); }
.strategy-disclaimer {
  display: block;
  margin-top: 8px;
  color: var(--warn);
}

/* 전략 구동 패널의 손익 요약 (실시간 손익/수익률, 거래·총 실현 손익, 누적 수익률, 레퍼럴 수익).
   패널이 펼쳐져 있으면 본문에 이미 같은 정보가 상세하게 보이므로 요약은 중복이라
   숨긴다 - 패널을 접었을 때만(요약이 유일한 정보 창구가 될 때) 이 요약이 보인다. */
.runtime-summary {
  display: none;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-dim);
}
.runtime-panel.collapsed .runtime-summary { display: flex; }
.rp-summary-item b { color: var(--text); font-weight: 600; margin-left: 4px; }
.rp-summary-item b.auto-pnl-pos { color: var(--buy); }
.rp-summary-item b.auto-pnl-neg { color: var(--sell); }

/* 전략 구동 패널이 접혔을 때만 보이는 미니 요약 (최근 실행 로그·진입청산 각 3개).
   손익 요약(.runtime-summary)과 같은 원칙 - 펼쳐져 있으면 본문에 전체 목록이
   보이니 중복이라 숨기고, 접혔을 때만 나타난다. */
.runtime-summary-mini {
  display: none;
  gap: 24px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.runtime-panel.collapsed .runtime-summary-mini { display: flex; }
.runtime-summary-mini .rp-mini-col { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) {
  .runtime-summary-mini { flex-direction: column; gap: 12px; }
}
.rp-mini-title {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.rp-mini-list { display: flex; flex-direction: column; gap: 3px; }
.rp-mini-empty { font-size: 12px; color: var(--text-dim); }
.rp-mini-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.rp-mini-row .rp-mini-time { color: var(--text-dim); font-family: var(--font-num); font-size: 12px; flex-shrink: 0; }
.rp-mini-row .rp-mini-text { overflow: hidden; text-overflow: ellipsis; }
.rp-mini-row .auto-trade-side { flex-shrink: 0; }
.rp-mini-row .auto-trade-pnl { margin-left: auto; flex-shrink: 0; font-size: 12px; }
.rp-mini-log-buy .rp-mini-text { color: var(--buy); }
.rp-mini-log-sell .rp-mini-text { color: var(--sell); }
.rp-mini-log-error .rp-mini-text { color: var(--sell); }

/* 실행 로그·진입청산내역 페이지 넘기기 버튼 */
.log-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.log-page-btn {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.log-page-btn:hover:not(:disabled) { border-color: var(--text-muted); color: var(--text); }
.log-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.log-page-indicator {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-dim);
  min-width: 40px;
  text-align: center;
}

/* 마진 타입 탭은 설정 칸 안에 작게 들어가므로 살짝 축소 */
.auto-setting .strategy-tabs { padding: 2px; }
.auto-setting .strategy-tab { padding: 5px 12px; font-size: 12px; }

/* ==== 거래 모드 사이드바 변형 (차트+오더북 오른쪽 세 번째 칸, 세로 배치) ====
   좁은 폭이라 SPOT/FUTURES 탭을 헤더 대신 본문 맨 위에 두고, 레버리지·마진·
   적용 버튼도 가로 grid가 아니라 세로로 하나씩 쌓이게 한다. */
.market-mode-panel--sidebar {
  flex: 0 0 260px;
  max-width: 260px;
  border-top: none;
}
/* [세로 사이즈를 차트에 맞춤] 위에서 .panel-body가 flex: 1 1 auto로 차트/
   오더북과 같은 높이만큼 늘어나게 됐는데, 그 안의 실제 콘텐츠(안내문·설정
   입력창 등)가 그 높이보다 길어질 수 있다 - 그럴 때 패널 전체가 차트보다
   길게 밀려나지 않도록, 이 안쪽 콘텐츠 영역만 스크롤되게 한다(오더북의
   매수/매도 목록이 이미 내부 스크롤되는 것과 같은 원리). */
.market-mode-panel--sidebar .panel-body {
  overflow-y: auto;
}
.market-mode-panel--sidebar .market-mode-tabs--full {
  display: flex;
  width: 100%;
}
.market-mode-panel--sidebar .market-mode-tabs--full .strategy-tab {
  flex: 1;
}
.market-mode-panel--sidebar .auto-settings {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auto-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 16px;
  max-width: 880px;
}
.auto-desc b { color: var(--text); }

.auto-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 220px));
  gap: 16px;
  margin-bottom: 18px;
}
.auto-setting {
  display: flex;
  flex-direction: column;
}
.auto-setting .field-label { margin-top: 0; }
/* 라벨이 길어서 두 줄이 되면 그 칸의 입력창만 아래로 처져서 옆 칸과 높이가
   안 맞는 문제가 있었다 - 입력창을 항상 칸의 맨 아래에 붙여서(margin-top:auto)
   라벨 줄 수와 상관없이 한 줄로 가지런히 맞춘다. */
.auto-setting .field-input,
.auto-setting .field-input--readonly,
.auto-setting .btn-mini {
  margin-top: auto;
}
/* 설정 항목 사이 간격을 넉넉하게 준 버전 - 라벨이 긴 항목(거래량/추세 소진 설정 등)이
   많은 크로스오버 설정 구역에 사용 */
.auto-settings--roomy {
  gap: 20px 24px;
  row-gap: 28px;
}

.auto-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}
@media (max-width: 860px) {
  .auto-body { grid-template-columns: 1fr; }
  .auto-settings { grid-template-columns: 1fr 1fr; }
}

.auto-status {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  align-self: start;
}
.auto-status-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-num);
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.auto-status-row span:first-child { color: var(--text-dim); }
.auto-status-row span:last-child { font-weight: 600; }

/* 계좌 정보 블록 (평균 진입가 바로 아래로 이동) */
.auto-account-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.auto-account-block .balances,
.auto-account-block .open-orders {
  font-size: 12px;
}
.test-order-note {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 6px 0 0;
}
.test-order-note b { color: var(--text-muted); }

/* ==== 지갑 (평소엔 접혀있다가 클릭하면 펼쳐짐, 기본 조회 대상 FUTURES) ====
   ⚠️ 과거 버그: <button> 요소에 display:flex를 직접 걸어서 "지갑" 글자와 ▸ 아이콘을
   양 끝으로 벌렸었는데, 일부 렌더링 환경에서 버튼 내부의 기본 박스 처리 때문에
   flex 정렬이 온전히 먹지 않아 글자와 아이콘이 바짝 붙어버리는 문제가 있었다.
   버튼 자체는 평범한 블록으로 두고, 안에 별도 span(.wallet-toggle-inner)을 하나
   더 넣어서 그 위에 flex를 걸었다 - 브라우저마다 다르게 동작하는 button+flex
   조합을 아예 안 쓰게 되어 훨씬 안정적으로 정렬된다. */
.wallet-toggle {
  display: block;
  width: 100%;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.wallet-toggle:hover { border-color: var(--text-muted); }
.wallet-toggle-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  line-height: 1.4;
}
.wallet-toggle-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  transition: transform 0.15s;
}
.wallet-toggle[aria-expanded="true"] .wallet-toggle-icon { transform: rotate(90deg); }
.wallet-panel {
  margin-top: 10px;
}
.wallet-panel .balance-header { margin-top: 0; }

/* 현재 호가 아이콘 + 실시간 매수/매도가 (보유량 행 위) */
.auto-status-quote {
  justify-content: flex-start;
  gap: 7px;
}
.auto-quote-icon {
  display: inline-flex;
  color: var(--text-dim);
  flex-shrink: 0;
}
.auto-quote-text {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
}
.auto-quote-text .tick-price { font-weight: 600; }

.auto-log-panel {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.auto-log-title {
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  font-weight: 600;
}
.auto-log {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auto-log-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 0;
}
.auto-log-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 8px;
  font-family: var(--font-num);
  font-size: 12px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
}
.auto-log-row:last-child { border-bottom: none; }
.auto-log-time { color: var(--text-dim); }
.auto-log-buy .auto-log-text { color: var(--buy); }
.auto-log-sell .auto-log-text { color: var(--sell); }
.auto-log-error .auto-log-text { color: var(--warn); }
.auto-log-skip .auto-log-text { color: var(--text-dim); }
.auto-log-info .auto-log-text { color: var(--text-muted); }

/* ==== 손익 현황 (실행 로그 바로 아래) ==== */
.auto-pnl-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.auto-pnl-summary-item {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.auto-pnl-summary-label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.auto-pnl-summary-value {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.auto-pnl-pos { color: var(--buy); }
.auto-pnl-neg { color: var(--sell); }

/* 진입 → 청산 내역 목록 */
.auto-trades {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auto-trade-row {
  display: grid;
  grid-template-columns: 82px 34px 72px 1fr auto;
  align-items: center;
  gap: 8px;
  font-family: var(--font-num);
  font-size: 12px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border);
}
.auto-trade-row:last-child { border-bottom: none; }
.auto-trade-time { color: var(--text-dim); font-size: 12px; }
.auto-trade-side {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-radius: 4px;
  padding: 2px 0;
}
.auto-trade-side-long { color: var(--buy); background: var(--buy-bg); }
.auto-trade-side-short { color: var(--sell); background: var(--sell-bg); }
.auto-trade-qty { color: var(--text-muted); white-space: nowrap; }
.auto-trade-prices { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-trade-pnl { font-weight: 600; text-align: right; white-space: nowrap; }
.auto-trade-pnl-pos { color: var(--buy); }
.auto-trade-pnl-neg { color: var(--sell); }


/* ==== 회원정보변경 모달 (신규) ==== */
/* 예전에는 "로그인 화면"에서 API 키를 매번 입력했는데, 이제 계정 로그인만
   하면 바로 대시보드가 보이고, API 키는 이 모달에서 한 번 등록해두면 서버가
   계정+모드 기준으로 자동으로 찾아 쓴다. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 12, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 200;
}
.modal-card {
  width: 460px;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-family: var(--font-num); font-weight: 600; font-size: 15px; }
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.modal-close:hover { color: var(--text); background: var(--panel-raised); }
.modal-body { padding: 20px; max-height: 78vh; overflow-y: auto; }
.modal-section-title { font-family: var(--font-num); font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 8px; }
.modal-note { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 0 0 10px; }
.modal-note a { color: var(--accent); }
.modal-actions { display: flex; gap: 8px; margin-top: 10px; }
.modal-result { font-size: 12px; margin-top: 8px; white-space: pre-line; }
.modal-result.ok { color: var(--buy); }
.modal-result.error { color: var(--sell); }
.modal-badge-registered { display:inline-block; padding:2px 8px; border-radius:999px; font-size: 12px; font-weight: 600; background:rgba(34,197,94,0.15); color:#22c55e; }
.modal-badge-unregistered { display:inline-block; padding:2px 8px; border-radius:999px; font-size: 12px; font-weight: 600; background:rgba(148,163,184,0.15); color:#94a3b8; }

/* [API 키 미등록 안내 배너] 대시보드에 접속했는데 지금 모드의 API 키가 아직
   등록 안 되어 있을 때, 화면 위쪽에 눈에 띄게 안내한다. */
.api-key-missing-banner {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  padding: 10px 16px;
  font-size: 13px;
  text-align: center;
  font-weight: 600;
}
.api-key-missing-banner button {
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  font-weight: 600;
}

/* ==== 스크롤바 숨김 (기능은 그대로 유지, 신규) ====
   시그널(가로 스크롤)·오더북·실행 로그·진입청산 내역(세로 스크롤) 네 곳
   모두 마우스 휠/트랙패드/드래그로 스크롤은 그대로 되지만, 브라우저가
   그리는 스크롤바 막대 자체는 화면에 보이지 않게 한다 - 스크롤바가 패널
   폭을 차지하면서 도드라져 보이던 문제를 없앤다. 표준 스크롤 동작 자체는
   전혀 건드리지 않고 시각적으로만 숨긴다(overflow는 그대로 auto로 둠). */
.signal-log,
.ob-side,
.auto-log,
.auto-trades {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* 구형 Edge/IE */
}
.signal-log::-webkit-scrollbar,
.ob-side::-webkit-scrollbar,
.auto-log::-webkit-scrollbar,
.auto-trades::-webkit-scrollbar {
  display: none; /* Chrome/Safari/신버전 Edge */
}

/* ==== 라이트/다크 테마 토글 (신규) ====
   pill(알약) 모양 스위치 - 다크모드일 때는 왼쪽에 달(🌙)이 활성화되어
   보이고, 라이트모드로 바꾸면 오른쪽 해(☀️)로 넘어간다. 두 아이콘을 항상
   같이 그려두고 opacity/transform으로 전환하는 방식이라, 실제 전환은
   JS 쪽에서 <html>의 data-theme 속성만 바꾸면 CSS가 알아서 나머지를
   처리한다(색상 토큰이 전부 이 속성 하나에 연동되어 있으므로). */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 52px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--panel-raised);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle-icon {
  position: absolute;
  top: 50%;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-50%);
  transition: opacity 0.2s, transform 0.25s;
}
.theme-toggle-icon--dark { left: 6px; opacity: 1; }
.theme-toggle-icon--light { right: 6px; opacity: 0.35; }
html[data-theme="light"] .theme-toggle-icon--dark { opacity: 0.35; }
html[data-theme="light"] .theme-toggle-icon--light { opacity: 1; }
.theme-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow-pop);
  transition: transform 0.25s;
}
html[data-theme="light"] .theme-toggle::after { transform: translateX(26px); }
.theme-toggle--floating {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
}

/* ==================== 손익계산기 ==================== */
/* [팝업 크기] 손익계산기·매매 설정은 기본 카드(460px)보다 넓게. width를 직접 주고(예전엔 max-width만 있어
   기본 460px에 2단 그리드가 눌려 두 팝업의 폭·배치가 서로 달랐다) 화면이 좁으면 100%로 줄인다. */
.pnlcalc-card { width: 920px; max-width: 100%; }
.settings-card { width: 760px; max-width: 100%; }
.settings-card .auto-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.settings-card .auto-settings--roomy { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .settings-card .auto-settings, .settings-card .auto-settings--roomy { grid-template-columns: 1fr; } }
.settings-card .modal-body, .pnlcalc-card .modal-body { max-height: 82vh; }
.pnlcalc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .pnlcalc-grid { grid-template-columns: 1fr; } }
.pnlcalc-seg { display: flex; gap: 6px; }
.pnlcalc-seg-btn {
  flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border, #3a3f4b);
  background: transparent; color: inherit; cursor: pointer; font-weight: 600;
}
.pnlcalc-seg-btn.active { background: var(--gold, #e0b34c); color: #111; border-color: var(--gold, #e0b34c); }
.pnlcalc-mini {
  margin-left: 6px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border, #3a3f4b);
  background: transparent; color: inherit; font-size: 12px; cursor: pointer;
}
.pnlcalc-rows { display: flex; flex-direction: column; gap: 6px; }
.pnlcalc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 10px; border-radius: 8px; background: rgba(127,127,127,0.08); font-size: 13px;
}
.pnlcalc-row b { font-variant-numeric: tabular-nums; font-size: 14px; }
.pnlcalc-row--sum { background: rgba(224,179,76,0.12); }
.pnlcalc-row--sum b { font-size: 16px; }
.pnlcalc-readout { padding: 8px 10px; border-radius: 8px; background: rgba(127,127,127,0.08); font-weight: 600; font-variant-numeric: tabular-nums; }
.pnlcalc-pos { color: var(--green, #2ecc71); }
.pnlcalc-neg { color: var(--red, #e74c3c); }

/* [종목] 슬롯 헤더의 종목 선택 */
.symbol-select { width: auto; min-width: 118px; padding: 3px 8px; font-size: 12px; font-weight: 600; margin-left: 6px; }

/* [시그널 카드 - 종목 구분] 카드마다 종목 색(--sym-h = 색상환 각도, JS의 symbolHue가 넣는다)을
   위쪽 띠와 오른쪽 위 배지에 함께 칠한다. 왼쪽 세로선은 원래대로 시그널 종류(매수/매도/…) 뜻을 지킨다.
   색만으로 구분하지 않게 배지에 종목 이름을 항상 같이 적는다(색약·흑백 출력 대비). */
.signal-card--sym { --sym-h: 262; padding-top: 11px; } /* padding: 위쪽 띠만큼 내용을 내린다 */
.signal-card--sym::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: hsl(var(--sym-h) 80% 58%);
}
/* 11번째 종목부터는 같은 색을 끊긴 띠로 다시 쓴다(색만으로 스무 개를 가르지 않게) */
.signal-card--sym2::before {
  background: repeating-linear-gradient(90deg, hsl(var(--sym-h) 80% 58%) 0 7px, transparent 7px 13px);
}
.signal-card--sym2 .signal-sym { border-style: dashed; }
.signal-sym {
  position: absolute; top: 7px; right: 8px; z-index: 1;
  max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 1px 6px;
  border-radius: 999px; pointer-events: none;
  color: hsl(var(--sym-h) 85% 74%);
  background: hsl(var(--sym-h) 80% 55% / .20);
  border: 1px solid hsl(var(--sym-h) 80% 60% / .45);
}
html[data-theme="light"] .signal-sym {
  color: hsl(var(--sym-h) 70% 30%);
  background: hsl(var(--sym-h) 75% 50% / .16);
  border-color: hsl(var(--sym-h) 70% 45% / .40);
}

/* [crossover AI] 장세 판정 표시 */
.ai-regime-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--panel-raised); margin-bottom: 8px; }
.ai-regime-title { font-family: var(--font-num); font-weight: 600; font-size: 18px; }
.ai-regime-title.ai-trend { color: #4ade80; } .ai-regime-title.ai-range { color: #93c5fd; } .ai-regime-title.ai-volatile { color: #fbbf24; } .ai-regime-title.ai-illiquid { color: #f87171; } .ai-regime-title.ai-quiet { color: #a8a29e; } .ai-hot { color: #fb923c; font-weight: 600; } .ai-forming { color: #86efac; font-weight: 600; } /* [1분봉 보조] 추세 형성 중 */
/* [추세 AI] 설정 줄 · 현황 · 차트 배지(크로스오버 AI 배지 아래) */
.trend-ai-body { display: flex; flex-direction: column; gap: 4px; }
.trend-ai-readout { margin-top: 6px; }
.chart-trend-badge { top: 96px; }
@media (max-width: 700px) { .chart-trend-badge { top: 88px; } }
.ai-regime-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; font-weight: 500; }
.ai-regime-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 8px; font-size: 12px; }
.ai-regime-grid span { color: var(--text-dim); } .ai-regime-grid b { font-family: var(--font-num); }

/* ======================================================================
   [모바일 규격] 640px 이하 - 한 열 배치, 큰 터치 영역, 가로 스크롤 방지, 팝업 전체 화면.
   데스크톱 규칙은 그대로 두고 여기서만 덮어쓴다. iOS는 입력 글자가 16px 미만이면 확대되므로 16px 고정.
   ====================================================================== */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  .dashboard { padding: 8px; }
  /* 상단바: 두 줄로 감싼다 - 왼쪽 브랜드·종목, 오른쪽 가격·버튼들 */
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 10px; gap: 6px 10px; }
  .topbar-left { flex: 1 1 100%; gap: 8px; }
  .topbar-right { flex: 1 1 100%; flex-wrap: wrap; gap: 6px 8px; justify-content: flex-start; }
  .topbar-right .btn-ghost { font-size: 12px; padding: 7px 10px; min-height: 36px; }
  .topbar-right .last-price { font-size: 16px; }
  .brand-name { font-size: 14px; }
  /* 패널 */
  .panel { border-radius: 10px; }
  .panel-body { padding: 10px; }
  .panel-collapse-header { padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
  .panel-title { font-size: 12px; }
  .auto-header-left { flex-wrap: wrap; gap: 6px; }
  .symbol-select { min-width: 96px; font-size: 12px; margin-left: 0; }
  /* 차트·호가창: 세로로 쌓고 높이를 줄인다 */
  .chart-orderbook-row { flex-direction: column; }
  .tradingview-widget-container, #tv_chart_container { min-height: 300px; height: 300px; }
  .orderbook-panel--sidebar .ob-side { max-height: 220px; flex-basis: 220px; }
  .ob-row { font-size: 12px; padding: 3px 3px; }
  /* 전략 탭: 한 줄 가로 스크롤 */
  .strategy-tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; scrollbar-width: none; }
  .strategy-tabs::-webkit-scrollbar { display: none; }
  .strategy-tab { flex: 0 0 auto; padding: 8px 12px; min-height: 36px; font-size: 12px; }
  /* 설정: 한 열, 큰 입력 */
  .auto-body { grid-template-columns: 1fr; gap: 12px; }
  .auto-settings, .auto-settings--roomy, .settings-card .auto-settings, .settings-card .auto-settings--roomy { grid-template-columns: 1fr !important; gap: 12px !important; row-gap: 14px !important; }
  .field-input, .field-input--readonly, select.field-input { font-size: 16px; min-height: 42px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
  .field-label { font-size: 12px; }
  .btn-ghost, .btn-mini, .btn-primary, button.log-page-btn { min-height: 40px; font-size: 13px; }
  .auto-toggle { transform: scale(1.15); transform-origin: left center; }
  /* 손익 요약·비교 */
  .auto-pnl-summary { grid-template-columns: 1fr; gap: 6px; }
  .auto-pnl-summary-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .auto-pnl-summary-label { font-size: 12px; }
  .auto-pnl-summary-value { font-size: 13px; }
  .runtime-summary-mini { flex-wrap: wrap; }
  /* 로그·시그널 */
  .auto-log { max-height: 260px; font-size: 12px; }
  .auto-log-title { flex-wrap: wrap; gap: 6px; }
  .signal-log { max-height: 220px; }
  .signal-card { min-width: 240px; }
  .ai-regime-title { font-size: 16px; }
  .ai-regime-grid { grid-template-columns: 1fr; gap: 2px; }
  /* 표·긴 내용은 가로 스크롤 */
  table, .trade-history, .mini-trades { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* 팝업: 전체 화면 */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-card, .pnlcalc-card, .settings-card { width: 100% !important; max-width: 100% !important; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; display: flex; flex-direction: column; }
  .modal-body, .settings-card .modal-body, .pnlcalc-card .modal-body { max-height: none; flex: 1 1 auto; overflow-y: auto; padding: 14px; }
  .modal-header { padding: 12px 14px; position: sticky; top: 0; z-index: 2; background: var(--panel); }
  .modal-close { min-width: 40px; min-height: 40px; }
  .pnlcalc-grid { grid-template-columns: 1fr; }
  /* 설명 문단은 접히지 않으면 너무 길다 - 조금 작게 */
  .strategy-note { font-size: 12px; line-height: 1.55; }
  /* 페이퍼 띠·경고 띠 */
  .paper-strip, .live-strip { flex-wrap: wrap; font-size: 12px; padding: 6px 10px; gap: 6px; }
}
/* 아주 좁은 화면(≤ 400px): 글자 한 단계 더 */
@media (max-width: 400px) {
  .topbar-right .btn-ghost { padding: 6px 8px; font-size: 12px; }
  .panel-body { padding: 8px; }
  .tradingview-widget-container, #tv_chart_container { min-height: 240px; height: 240px; }
}
/* 터치 기기: hover 효과 대신 눌림 피드백, 스크롤 관성 */
@media (hover: none) and (pointer: coarse) {
  .btn-ghost:active, .strategy-tab:active, .btn-mini:active { opacity: 0.7; }
  .auto-log, .signal-log, .ob-side { -webkit-overflow-scrolling: touch; }
}
/* [모바일] 로그인 카드·관리자 페이지 */
@media (max-width: 640px) {
  .login-card { width: 100%; max-width: 100%; margin: 12px; padding: 18px 14px; box-sizing: border-box; }
  .login-card .field-input { font-size: 16px; min-height: 44px; }
  .login-card button, .login-card .btn-primary { min-height: 44px; font-size: 15px; }
  .admin-table, .users-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* [깜빡임 수정] 요약 줄의 숫자는 폭이 고정되게(자릿수 변화로 줄바꿈이 흔들리지 않도록) */
.runtime-summary .rp-summary-item { white-space: nowrap; }
.runtime-summary .rp-summary-item b, .auto-pnl-summary-value, #autoUnrealizedPnl, #autoUnrealizedYield { font-variant-numeric: tabular-nums; }

/* ==================== [📊 신호 승률] 단계별 승률 × 차트 대조 ====================
   색을 쓰는 방식(dataviz 규칙):
   · 단계(깊이)는 **순서가 있는 크기**라 한 가지 색의 밝기 단계(sequential)로 칠한다. 무지개·범주 색이 아니다.
     다크·라이트는 각자 자기 배경에서 대비 3:1을 넘는 별도 단계를 쓴다(밝기만 뒤집지 않는다).
   · 결과(익절·손절·미결)는 **상태 색**이다. 초록↔빨강은 적록색약에서 구분이 안 되므로(ΔE 2.5)
     초록↔주황 짝을 쓴다(ΔE 12.5 · 검증 통과). 그래도 색만으로 구분하게 두지 않는다 -
     익절은 꽉 찬 마커, 손절은 속 빈 마커, 미결은 작은 점으로 모양까지 다르게 한다.
   · 방향은 모양(▲ 매수 / ▼ 매도)이 맡는다. 색과 겹치지 않는 축이다. */
.sigwin-card { width: min(1180px, 96vw); max-width: 100%; }
.sigwin-card .modal-body { max-height: 84vh; }
.sigwin-card .sigwin-controls { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sigwin-card .sigwin-controls { grid-template-columns: 1fr 1fr; } }

:root {
  /* 결과(상태) 색 - 익절 / 손절 / 미결 */
  --sig-win: #34d399; --sig-loss: #f97316; --sig-open: #9ca3af;
  /* 깊이 단계 색 (다크 배경용: 깊을수록 밝다) */
  --sig-d1: #7c62bf; --sig-d2: #8d70d4; --sig-d3: #9f80e3; --sig-d4: #b192ee;
  --sig-d5: #c4a6f7; --sig-d6: #d5b8ff; --sig-d7: #e6d4ff;
}
html[data-theme="light"] {
  --sig-win: #0f9d6b; --sig-loss: #c2530b; --sig-open: #6b7280;
  /* 라이트 배경용: 깊을수록 어둡다 (밝기를 그대로 뒤집지 않고 각 단계를 따로 골랐다) */
  --sig-d1: #9880d0; --sig-d2: #8a6fc6; --sig-d3: #7b5eb9; --sig-d4: #6c4da8;
  --sig-d5: #5c3f92; --sig-d6: #4d327b; --sig-d7: #3e2764;
}

/* 표본이 0이거나 캔들을 못 받았을 때: 이유를 적은 줄이 눈에 띄어야 한다(색만으로 알리지 않고 글로 적는다) */
.sigwin-status-warn { background: var(--warn-bg); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1.55; }
.sigwin-th-sub { font-weight: 600; font-size: 12px; color: var(--text-muted); }
/* 허수 필터 표: "지금 설정"·"가장 나음" 표식 (색만으로 알리지 않고 글로도 적는다) */
.sigwin-hold-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 5px; border-radius: 999px; margin-left: 4px;
  background: var(--panel-alt); border: 1px solid var(--border); color: var(--text-dim); vertical-align: middle; }
.sigwin-hold-tag.is-best { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }

.sigwin-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 4px; }
@media (max-width: 760px) { .sigwin-tiles { grid-template-columns: 1fr 1fr; } }
.sigwin-tile { background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.sigwin-tile-label { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.sigwin-tile-value { font-family: var(--font-num); font-size: 20px; font-weight: 600; color: var(--text); line-height: 1.2; }
.sigwin-tile-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.sigwin-section-title { font-size: 12px; font-weight: 600; color: var(--text); margin: 18px 0 8px; letter-spacing: .02em; }
.sigwin-hint { font-weight: 500; font-size: 12px; color: var(--text-muted); margin-left: 6px; }

.sigwin-chart-wrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-alt); }
.sigwin-chart { display: block; width: 100%; height: 320px; }
.sigwin-tip {
  position: absolute; pointer-events: none; z-index: 3; max-width: 260px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 9px; font-size: 12px; line-height: 1.55; color: var(--text);
  box-shadow: var(--shadow-panel); font-family: var(--font-num);
}
.sigwin-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.sigwin-legend b { color: var(--text); font-weight: 600; }
.sigwin-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* 막대: 얇게, 끝만 둥글게, 배경 트랙 위에. 값은 막대마다 직접 적는다(별도 축을 두지 않는다). */
.sigwin-bars { display: flex; flex-direction: column; gap: 7px; }
.sigwin-bar-row { display: grid; grid-template-columns: 74px 1fr 196px; align-items: center; gap: 10px; cursor: pointer; }
@media (max-width: 900px) { .sigwin-bar-row { grid-template-columns: 62px 1fr 150px; } }
.sigwin-bar-row.is-empty { cursor: default; opacity: .45; }
.sigwin-bar-row.is-active .sigwin-bar-label { color: var(--text); font-weight: 600; }
.sigwin-bar-label { font-family: var(--font-num); font-size: 12px; color: var(--text-dim); text-align: right; }
.sigwin-bar-track { position: relative; height: 16px; background: var(--panel-alt); border-radius: 3px; }
.sigwin-bar-fill { height: 100%; border-radius: 3px; transition: filter .12s; }
.sigwin-swatch--hollow { background: transparent !important; box-shadow: inset 0 0 0 2px var(--sig-loss); }
.sigwin-bar-row:hover .sigwin-bar-fill { filter: brightness(1.12); }
.sigwin-bar-be { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text-muted); opacity: .75; }
.sigwin-bar-meta { font-family: var(--font-num); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.sigwin-bar-meta b { color: var(--text); }

.sigwin-table-wrap { overflow-x: auto; }
.sigwin-table { width: 100%; border-collapse: collapse; font-family: var(--font-num); font-size: 12px; }
.sigwin-table th, .sigwin-table td { padding: 6px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.sigwin-table th { color: var(--text-dim); font-weight: 600; text-align: right; }
.sigwin-table th:first-child, .sigwin-table td:first-child { text-align: left; }
.sigwin-table tbody tr.is-active td { background: var(--panel-alt); }
.sigwin-table td.pos { color: var(--sig-win); }
.sigwin-table td.neg { color: var(--sig-loss); }

/* ==================== [구동 시간대] 슬롯별 구동 시간표 ==================== */
.sched-row .field-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sched-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text); }
.sched-toggle input { cursor: pointer; }
.sched-hint { font-weight: 500; font-size: 12px; color: var(--text-muted); }
.sched-body { display: grid; grid-template-columns: 1fr; gap: 8px 12px; align-items: center; }
.sched-body > .pnlcalc-readout { grid-column: 1 / -1; }
.sched-mode { max-width: 260px; }
/* [요일별 시간대] 같은 시간대 방식: 시간표 + 요일 버튼 한 줄 · 요일별 방식: 요일 7줄 */
.sched-same { display: grid; grid-template-columns: minmax(200px, 260px) auto; gap: 8px 12px; align-items: center; }
.sched-perday { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 12px; }
.sched-day-row { display: flex; align-items: center; gap: 8px; }
.sched-day-name { flex: 0 0 22px; font-weight: 600; font-size: 12px; color: var(--text); text-align: center; padding: 3px 0; border-radius: 6px; background: var(--panel-2, rgba(255,255,255,.05)); }
.sched-day-row:nth-child(6) .sched-day-name, .sched-day-row:nth-child(7) .sched-day-name { color: var(--violet); }
.sched-day-row .field-input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) { .sched-same { grid-template-columns: 1fr; } }
.sched-body.is-off { opacity: .45; pointer-events: none; }
.sched-days { display: flex; gap: 4px; flex-wrap: wrap; }
.sched-days label { position: relative; cursor: pointer; }
.sched-days input { position: absolute; opacity: 0; width: 0; height: 0; }
.sched-days span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; border-radius: 6px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--panel-alt); color: var(--text-dim);
  transition: background .12s, color .12s, border-color .12s;
}
.sched-days input:checked + span { background: var(--gold); border-color: var(--gold); color: #1b1408; }
.sched-days input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.sched-days label:nth-child(6) input:checked + span,
.sched-days label:nth-child(7) input:checked + span { background: var(--violet); border-color: var(--violet); color: #1a1030; }
.sched-state-on { color: var(--sig-win); font-weight: 600; }
.sched-state-off { color: var(--text-dim); font-weight: 600; }

/* [실시간 손익] 시세가 끊겨 값이 멈췄을 때 - 지우지 않고 흐리게 + "시세 N초 전"을 붙여
   "지금 값"으로 착각하지 않게 한다. 색(빨강/초록)은 그대로 두고 밝기만 낮춘다. */
.auto-pnl-stale { opacity: .5; font-style: italic; }

/* [추세 AI 허용 장세] 체크박스 줄 */
.trend-ai-regimes { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 12px; }
/* [2026-10-28 밤] 여러 시간축 종합 길목 필터 - 전략마다 한 줄(이름 · 방식 · 기준 점수) */
.mtf-gate-grid { display: grid; gap: 4px; margin-top: 4px; }
.mtf-gate-row { display: grid; grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) 64px; gap: 6px; align-items: center; font-size: 12px; }
.mtf-gate-row .field-input { min-width: 0; }
.mtf-gate-name { color: var(--muted, #8a93a6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-ai-regime-chk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.trend-ai-regime-chk input { margin: 0; }


/* ==============================================================
   [디자인 리프레시 2026-09-29] 화면만 다듬는 층 - 기능 · 마크업 · 설정 값은 그대로다.
   이 블록(파일 끝 ~ 맨 아래)과 파일 맨 위 @import 두 줄을 지우면 예전 모습으로 돌아간다.
   ① 글꼴: 한글은 Pretendard, 숫자는 JetBrains Mono(자리 맞춤 숫자). 숫자 칸에 섞인 한글도 Pretendard로 그린다.
   ② 대비: 흐린 글자(--text-dim / --text-muted)를 읽을 수 있을 만큼 올렸다(두 테마).
   ③ 상단바: 버튼 글자가 두 줄로 꺾이지 않게(넘치면 버튼 단위로 다음 줄) · 넓은 화면에서는 스크롤해도 위에 붙어 있다.
   ④ 전략 설정 칸: 3칸 고정(폭 약 700px) → 화면 폭에 맞춰 4 ~ 5칸으로 채운다(모달 · 사이드바는 그대로).
   ⑤ 요약 문장(readout): 16px 굵은 글씨 → 한 단계 작고 차분하게, 왼쪽 강조선.
   ⑥ 입력칸 · 버튼 · 탭 · 패널 머리 · 스크롤바를 한 규칙으로 맞췄다.
================================================================= */
:root {
  --font-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, "Pretendard Variable", Pretendard, "Malgun Gothic", monospace;
  --bg: #090c11;
  --panel: #0f131a;
  --panel-alt: #141922;
  --panel-raised: #1a202b;
  --border: #1f2631;
  --border-soft: #2a3240;
  --text: #e9edf2;
  --text-muted: #9aa3af;
  --text-dim: #6c7582;
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 15px;
  --ring: 0 0 0 3px var(--accent-glow-15);
}
html[data-theme="light"] {
  --bg: #f4f5f8;
  --panel: #ffffff;
  --panel-alt: #f3f5f8;
  --panel-raised: #eceff4;
  --border: #e1e5eb;
  --border-soft: #cfd5de;
  --text: #161b24;
  --text-muted: #525c6b;
  --text-dim: #7a8493;
}

body {
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
}
/* 숫자 글꼴을 쓰는 곳은 자리 맞춤 숫자 · 0에 사선 없음 */
.last-price, .auto-status-row, .auto-pnl-summary-value, .field-input, .ob-row, .sigwin-table, .pnlcalc-row b { font-variant-numeric: tabular-nums; }

/* ---------- ① 글꼴: 제목 · 라벨은 한글 UI 글꼴 ---------- */
.panel-title, .modal-title, .modal-section-title, .brand-name, .login-brand-text, .ai-regime-title {
  font-family: var(--font-ui);
}
.panel-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.panel-collapse-header > .panel-title,
.panel-collapse-header-left > .panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.panel-collapse-header > .panel-title::before,
.panel-collapse-header-left > .panel-title::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.85;
  flex-shrink: 0;
}
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.symbol-name { white-space: nowrap; }
.modal-title { font-size: 16px; letter-spacing: -0.01em; }

.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}

/* ---------- ⑥ 입력칸 ---------- */
.field-input {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  min-height: 38px;
  background: var(--panel-alt);
  border-color: var(--border-soft);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.field-input:hover:not(:focus):not(:disabled) { border-color: var(--text-dim); }
.field-input:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--panel); }
.field-input:disabled { opacity: 0.55; cursor: not-allowed; }
select.field-input {
  font-family: var(--font-ui);
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
select.field-input option { background: var(--panel); color: var(--text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- ⑥ 버튼 ---------- */
.btn-ghost {
  white-space: nowrap;
  border-color: var(--border-soft);
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.2;
}
.btn-ghost:hover { border-color: var(--accent-border); color: var(--text); background: var(--accent-bg); }
.btn-ghost:focus-visible, .btn-mini:focus-visible, .btn-primary:focus-visible, .strategy-tab:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-mini { white-space: nowrap; border-color: var(--border-soft); }
.btn-primary {
  border-radius: 9px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 18px -8px var(--accent-glow-55);
}
/* 다크 테마의 골드 버튼은 흰 글씨가 잘 안 보여 짙은 글씨로 */
html:not([data-theme="light"]) .btn-primary:not(.btn-primary--danger) { color: #1b1508; }

/* ---------- ⑥ 탭(전략 · SPOT/FUTURES 등) ---------- */
.strategy-tabs { background: var(--panel-alt); border-color: var(--border-soft); }
.strategy-tab { white-space: nowrap; font-weight: 600; }
.strategy-tab.active {
  background: var(--accent-bg);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
html[data-theme="light"] .strategy-tab.active { color: var(--ocean); }
/* 실거래 선택 탭은 강조색 대신 빨강 그대로(위험 표시) */
.strategy-tab--danger.active { background: var(--buy-bg); color: var(--buy); box-shadow: inset 0 0 0 1px var(--buy-border); }

/* ---------- ③ 상단바 (넓은 화면 · 휴대폰은 기존 두 줄 규칙 그대로) ---------- */
@media (min-width: 641px) {
  /* 넓은 화면에서는 스크롤해도 위에 붙어 있다(휴대폰은 여러 줄이라 붙이지 않는다) */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
  }
  /* 버튼이 많아 한 줄에 안 들어가면 버튼 단위로 다음 줄에 놓는다(글자는 꺾지 않는다) */
  .topbar { height: auto; min-height: 54px; gap: 8px 16px; padding-top: 7px; padding-bottom: 7px; }
  body[data-mode="live"] .topbar { top: 32px; } /* 실거래 화면은 빨간 경고 띠(위에 붙어 있음) 아래에 붙는다 */
  .topbar-left { flex-shrink: 0; }
  .topbar-right { gap: 6px 8px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .topbar-right .btn-ghost { padding: 6px 11px; font-size: 12px; }
  .topbar-right .last-price { margin-left: 4px; }
  .topbar-right .ws-status { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
}
.env-badge { border-radius: 999px; padding: 2px 8px; letter-spacing: 0.06em; }

/* 전략 설정 안쪽 패널: 검정 18% 덮개(라이트 모드에서 회색으로 보였다) → 두 테마 모두 배경과 패널 사이 색 */
.settings-subpanel.nested-collapsible { background: color-mix(in srgb, var(--bg) 65%, var(--panel)); border-color: var(--border); }

/* 패널 머리의 종목 선택은 작게 유지 */
.field-input.symbol-select { min-height: 30px; padding: 4px 28px 4px 10px; font-size: 12px; }

/* ---------- 패널 · 카드 ---------- */
.panel-collapse-btn { border-radius: 6px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.panel-collapse-btn:hover { background: var(--panel-alt); }
.auto-status, .auto-pnl-summary-item, .strategy-note {
  border-color: var(--border);
}
.auto-status { border-radius: var(--radius-md); }
.auto-status-row { font-size: 12.5px; padding: 7px 0; }
.auto-status-row span:first-child { font-family: var(--font-ui); color: var(--text-muted); }
.auto-pnl-summary-item { border-radius: 9px; padding: 10px 12px; background: var(--panel-alt); }
.auto-pnl-summary-label { font-size: 12px; color: var(--text-muted); }
.auto-pnl-summary-value { font-size: 15px; font-weight: 600; }

/* 설명 문단: 읽기 쉬운 줄 간격 · 너무 길게 늘어지지 않게 */
.strategy-note {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-dim);
  border-radius: 9px;
}
.strategy-note b { color: var(--text-muted); font-weight: 600; }
.chart-note { line-height: 1.6; }

/* ---------- ⑤ 요약 문장(readout) ---------- */
.pnlcalc-readout {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  border-left: 3px solid var(--accent-border);
  border-radius: 8px;
}
.pnlcalc-readout b, .pnlcalc-readout strong { font-weight: 600; color: var(--text); }

/* ---------- ④ 설정 칸: 전략 설정 패널 안에서만 화면 폭에 맞춰 채운다(모달 · 사이드바는 예전 배치 그대로) ---------- */
.settings-subpanel .auto-settings {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  max-width: 1180px;
  gap: 14px 18px;
}
.settings-subpanel .auto-settings--roomy { gap: 18px 22px; row-gap: 22px; }
@media (max-width: 860px) {
  .settings-subpanel .auto-settings { grid-template-columns: 1fr 1fr; }
}

/* ---------- 모달 ---------- */
.modal-card { border-radius: var(--radius-lg); }
.modal-overlay { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- 스크롤바 ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-soft) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; border: 2px solid transparent; }

::selection { background: var(--accent-glow-45); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==============================================================
   [디자인 리프레시 2단계 · 2026-09-29] 디자인 평가(claude/2026-09-29-dashboard-design-critique.md) ①②③ 반영
   ① 맨 위 "슬롯 현황"(app.js setupSlotOverview) · 슬롯 머리 요약은 펼쳐 있어도 보인다
   ② 되돌릴 수 없는 버튼(정보 초기화 · 이 슬롯 초기화)은 빨간 테두리 · 상단바 맨 끝(로그아웃 앞)
   ③ 대비(흐린 글자 · 라이트 모드 빨강/파랑 글자) · 너무 작은 글자(9 ~ 10.5px → 11px 이상) · 손익계산기 손익 색 통일
================================================================= */
:root {
  --text-dim: #7f8895;          /* 패널 위 4.9 ~ 5.2:1 (WCAG AA) */
  --ok-bg: rgba(34, 197, 94, 0.14);
  --ok-border: rgba(34, 197, 94, 0.4);
}
html[data-theme="light"] {
  --text-dim: #646d7b;          /* 흰 배경 · 밝은 패널 4.8 ~ 5.2:1 */
  --buy: #cc2a3e;               /* 라이트 모드 글자용 빨강 · 파랑 - 밝은 배경에서 4.5:1 이상(배경 틴트 --buy-bg 등은 그대로) */
  --sell: #2563eb;
}

/* ---------- ① 슬롯 현황 ---------- */
.slot-overview {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.so-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 10px; }
.so-title { margin: 0; font-family: var(--font-ui); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.so-sum { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.so-cols, .so-row {
  display: grid;
  grid-template-columns: 30px minmax(180px, 1.4fr) 128px minmax(120px, 0.9fr) minmax(190px, 1.3fr) minmax(160px, 1fr);
  align-items: center;
  column-gap: 14px;
}
.so-cols { padding: 0 12px 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.so-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--panel); }
.so-row {
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.so-row:first-child { border-top: 0; }
.so-row:hover { background: var(--panel-alt); }
.so-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.so-row.is-on { box-shadow: inset 3px 0 0 var(--accent); }
.so-row.is-on:focus-visible { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 2px var(--accent); }
.so-no { font-family: var(--font-num); font-size: 13px; font-weight: 600; color: var(--text-dim); }
.so-row.is-on .so-no { color: var(--accent); }
.so-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.so-sym { font-family: var(--font-num); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.so-strat { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.so-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); opacity: 0.6; flex-shrink: 0; }
.so-row.is-on .so-state { color: var(--text); font-weight: 600; }
.so-row.is-on .so-dot { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px var(--ok-bg); }
.so-cell { font-family: var(--font-num); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
.so-cell.pos { color: var(--buy); }
.so-cell.neg { color: var(--sell); }
@media (max-width: 900px) {
  .so-cols { display: none; }
  .so-row {
    grid-template-columns: 24px 1fr auto;
    grid-template-areas: "no name state" ". pos pos" ". upnl upnl" ". rpnl rpnl";
    row-gap: 4px;
  }
  .so-no { grid-area: no; } .so-name { grid-area: name; } .so-state { grid-area: state; }
  .so-pos { grid-area: pos; } .so-upnl { grid-area: upnl; } .so-rpnl { grid-area: rpnl; }
  .so-cell::before { content: attr(data-label); display: inline-block; min-width: 56px; margin-right: 8px; font-family: var(--font-ui); font-size: 12px; color: var(--text-dim); }
}
/* 슬롯 현황에서 누르면 그 슬롯 제목이 위에 붙은 상단바에 가리지 않게 */
.runtime-panel { scroll-margin-top: 96px; }

/* 슬롯 머리의 포지션 · 손익 요약: 접든 펼치든 제목 아래 한 줄로 늘 보인다 */
.runtime-panel > .panel-collapse-header > .panel-collapse-header-left { order: 1; }
.runtime-panel > .panel-collapse-header > .panel-collapse-btn { order: 2; }
.runtime-panel > .panel-collapse-header > .runtime-summary {
  display: flex;
  order: 3;
  flex-basis: 100%;
  gap: 6px 18px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.runtime-panel:not(.collapsed) > .panel-collapse-header > .runtime-summary { margin-bottom: 2px; }

/* 슬롯 상태 배지: 실행 중은 초록(빨강은 이익 · 매수 색과 겹쳤다) */
.auto-status-badge { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0; border-radius: 999px; padding: 2px 9px; }
.auto-status-badge.on { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }

/* ---------- ② 되돌릴 수 없는 버튼 ---------- */
.topbar-right #resetPageBtn { order: 98; }
.topbar-right #systemLogoutBtn { order: 99; }
#resetPageBtn, [id^="slotResetBtn"] {
  color: var(--buy);
  border-color: var(--buy-border);
  background: transparent;
}
#resetPageBtn:hover, [id^="slotResetBtn"]:hover { color: var(--buy); border-color: var(--buy); background: var(--buy-bg); }

/* ---------- ③ 작은 글자 · 색 통일 ---------- */
.auto-log-title, .test-order-note, .chart-note, .rp-mini-title, .env-badge { font-size: 12px; }
.ob-header, .ob-header span, .feed-unit-size, .feed-unit-qty { font-size: 12px; }
.field-label { font-size: 12px; }
.strategy-note { font-size: 12px; }
.pnlcalc-pos { color: var(--buy); }
.pnlcalc-neg { color: var(--sell); }
/* 요청 한도 경고 띠: HTML에 박힌 갈색이 라이트 모드에서도 남았다 → 경고 토큰 */
#rateLimitBanner { background: var(--warn-bg) !important; border-color: var(--warn) !important; color: var(--text) !important; }
.runtime-summary { font-family: var(--font-ui); }
.runtime-summary .rp-summary-item b { font-family: var(--font-num); }
@media (max-width: 900px) { .so-row.is-flat .so-upnl { display: none; } }
/* 접힌 전략 설정: 제목 줄 전체가 누르는 곳 */
.settings-subpanel > .panel-collapse-header.is-clickable { cursor: pointer; border-radius: 8px; margin: -6px -8px; padding: 6px 8px; transition: background 0.12s; }
.settings-subpanel > .panel-collapse-header.is-clickable:hover { background: var(--panel-alt); }
.settings-subpanel.collapsed > .panel-collapse-header .panel-title::after { content: "눌러서 펼치기"; margin-left: 10px; font-weight: 500; font-size: 12px; color: var(--text-dim); }

/* ==============================================================
   [디자인 시스템 v2 · 2026-09-29] "보기 편하고 심플하고 세련되게" - VectorLab UX 스킬(색 60-30-10 · 글자 · 간격 · 군더더기 제거) 기준
   · 색: 바탕(L0) 60% · 카드(L1) 30% · 강조색 10%(주요 버튼 · 포커스 · 실행 중 표시에만). 탭 · 알약에 칠하던 금색 틴트를 걷었다.
   · 깊이: 1px 옅은 테두리 먼저, 그림자는 아주 옅게(라이트 < 0.08) · 다크는 위쪽 안쪽 하이라이트만. 흐림(backdrop-filter) 없음.
   · 글자: 굵기 400 / 500 / 600만(700 · 800 → 600) · 12px 미만 없음 · 값 · 입력은 14px.
   · 간격: 4 / 8pt 격자 · 섹션은 16px 간격의 카드.
   · 상단바 버튼은 "도구" · "계정" 메뉴로 묶고(app.js setupTopbarMenus), 긴 설명문은 두 줄 + "자세히"(setupNoteClamp).
================================================================= */
:root {
  --bg: #0a0c0f;
  --panel: #111318;
  --panel-alt: #161a20;
  --panel-raised: #1d2229;
  --border: rgba(255, 255, 255, 0.075);
  --border-soft: rgba(255, 255, 255, 0.12);
  --text: #e7e9ec;
  --text-muted: #a3aab4;
  --text-dim: #7f8895;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --shadow-pop: 0 12px 32px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
}
html[data-theme="light"] {
  --bg: #f3f4f6;
  --panel: #ffffff;
  --panel-alt: #f6f7f9;
  --panel-raised: #eceef2;
  --border: rgba(16, 24, 40, 0.085);
  --border-soft: rgba(16, 24, 40, 0.14);
  --text: #111827;
  --text-muted: #4b5563;
  --text-dim: #646d7b;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 12px 32px -12px rgba(16, 24, 40, 0.18);
}
body { background: var(--bg); font-size: 14px; line-height: 1.5; }

/* ---------- 섹션 = 카드 ---------- */
#dashboard > .panel {
  margin: 0 16px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
}
#dashboard > .topbar + * , #dashboard > .api-key-missing-banner + .panel { margin-top: 16px; }
#dashboard > .panel.runtime-panel { overflow: hidden; }
#dashboard > .panel.runtime-panel.is-running { border-color: var(--accent-border); }
.chart-group-panel .panel, .settings-subpanel .panel { box-shadow: none; }
.settings-subpanel.nested-collapsible {
  margin: 16px 0 0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
@media (max-width: 640px) {
  #dashboard > .panel { margin: 0 8px 8px; padding: 12px; border-radius: var(--radius-md); }
  #dashboard > .topbar + * { margin-top: 8px; }
}

/* ---------- 제목 · 라벨 ---------- */
.panel-title { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0; }
.panel-collapse-header > .panel-title::before,
.panel-collapse-header-left > .panel-title::before { display: none; }
.field-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.so-title { font-size: 15px; font-weight: 600; }

/* ---------- 입력 ---------- */
.field-input {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--panel-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.field-input:focus { background: var(--panel); }
.field-input.symbol-select { min-height: 32px; font-size: 13px; }
.field-input--readonly { font-size: 13px; }

/* ---------- 버튼 ---------- */
.btn-ghost, .btn-mini {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
}
.btn-mini { padding: 4px 10px; font-size: 12px; }
.btn-ghost:hover, .btn-mini:hover { background: var(--panel-raised); border-color: var(--border-soft); color: var(--text); }
.btn-primary { border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; box-shadow: none; }
.btn-primary:hover { filter: brightness(1.06); }

/* ---------- 탭(세그먼트): 선택 = 한 단계 밝은 면 · 강조색 틴트 없음 ---------- */
.strategy-tabs { background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.strategy-tab { border-radius: 7px; font-weight: 500; color: var(--text-muted); }
.strategy-tab.active, html[data-theme="light"] .strategy-tab.active {
  background: var(--panel-raised);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
html[data-theme="light"] .strategy-tab.active { background: var(--panel); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), inset 0 0 0 1px var(--border); }
.strategy-tab--danger.active { background: var(--buy-bg); color: var(--buy); box-shadow: inset 0 0 0 1px var(--buy-border); }

/* ---------- 상단바: 불투명 L1 · 흐림 없음 ---------- */
.topbar { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--border); min-height: 56px; }
.brand-name { font-weight: 600; }
.env-badge { font-weight: 600; }
.last-price { font-size: 17px; font-weight: 600; }
.topbar-right #resetPageBtn, .topbar-right #systemLogoutBtn { order: 0; }
/* 도구 · 계정 메뉴 */
.tb-menu { position: relative; }
.tb-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
.tb-menu-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.7; }
.tb-menu-btn[aria-expanded="true"] { background: var(--panel-raised); }
.tb-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 120;
  min-width: 200px; padding: 4px;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
}
.tb-menu-pop[hidden] { display: none; }
.tb-menu-pop > .btn-ghost, .tb-menu-pop > a.btn-ghost {
  width: 100%; justify-content: flex-start; text-align: left;
  border: 0; border-radius: 6px; padding: 8px 10px; background: transparent; font-size: 13px;
}
.tb-menu-pop > .btn-ghost:hover, .tb-menu-pop > .btn-ghost:focus-visible { background: var(--panel-alt); }
.tb-menu-pop > .tb-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.tb-menu-pop > #resetPageBtn { color: var(--buy); }
@media (max-width: 640px) { .tb-menu-pop { right: auto; left: 0; } }

/* ---------- 요약 · 상태 ---------- */
.pnlcalc-readout { border-left: 0; background: var(--panel-alt); border: 1px solid var(--border); font-size: 14px; font-weight: 500; }
.pnlcalc-readout b, .pnlcalc-readout strong { font-weight: 600; }
.auto-status, .auto-pnl-summary-item { background: var(--panel-alt); border: 1px solid var(--border); box-shadow: none; }
.auto-pnl-summary-value { font-size: 15px; font-weight: 600; }
.auto-status-row { font-size: 13px; }
.so-list { background: var(--panel); }
.slot-overview { padding: 16px; }
.so-sym, .so-no { font-weight: 600; }

/* ---------- 설명문: 조용한 글 + 긴 글은 두 줄(자세히) ---------- */
.strategy-note {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--border-soft);
  border-radius: 0;
  padding: 2px 0 2px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 860px;
}
.note-clamp:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-more {
  display: block; margin: -12px 0 16px 14px; padding: 2px 0;
  background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.note-more:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.note-more:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
.chart-note + .note-more, .test-order-note + .note-more { margin: 4px 0 8px; }
.auto-desc + .note-more { margin: -8px 0 16px; }
.auto-desc { max-width: 860px; }

/* ---------- 모달: 흐림 없는 불투명 면 ---------- */
.modal-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4, 6, 9, 0.66); }
html[data-theme="light"] .modal-overlay { background: rgba(16, 24, 40, 0.32); }
.modal-card { box-shadow: var(--shadow-pop); border-color: var(--border-soft); }
.modal-title { font-weight: 600; }
/* HTML에 직접 적힌 10 ~ 11px 글자도 12px로(가장 작은 글자 12px 규칙) */
[style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:10px"], [style*="font-size: 10px"], [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 12px !important; }
/* 위험 버튼은 빨강 유지(위의 공통 버튼 규칙보다 뒤에) */
.btn-mini.btn-mini--danger, .btn-ghost.btn-mini--danger { color: var(--buy); border-color: var(--buy-border); background: var(--buy-bg); }
.btn-mini.btn-mini--danger:hover { background: var(--buy-bg); border-color: var(--buy); }
#dashboard [id^="slotResetBtn"] { color: var(--buy); border-color: var(--buy-border); }
#dashboard [id^="slotResetBtn"]:hover { background: var(--buy-bg); border-color: var(--buy); }

/* ==================== [2026-10-03] 매매 기록 차트 ====================
   시세 차트(TradingView) 옆 탭. 같은 종목 캔들 위에 진입 ▲▼ · 청산 ● · 보유 구간 점선을 그린다. */
.chart-view-tabs { margin-left: 8px; }
.trade-chart { display: flex; flex-direction: column; gap: 8px; }
.trade-chart.hidden { display: none; }
.trade-chart-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trade-chart-info { color: var(--text-muted); font-size: 12px; font-family: var(--font-num); }
.trade-chart-canvas-wrap { position: relative; height: 460px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); overflow: hidden; }
#tradeChartCanvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.trade-chart-tip { position: absolute; z-index: 3; max-width: 320px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--panel-raised); color: var(--text); font-size: 12px; line-height: 1.5; box-shadow: var(--shadow-pop); pointer-events: none; }
.trade-chart-tip.hidden { display: none; }
.trade-chart-tip-reason { color: var(--text-muted); }
.trade-chart-legend { margin: 0; color: var(--text-muted); font-size: 12px; }
.tc-up { color: var(--buy); }
.tc-dn { color: var(--sell); }
@media (max-width: 720px) {
  .trade-chart-canvas-wrap { height: 340px; }
  .chart-view-tabs { margin-left: 0; }
}

/* ==================== [2026-10-04] 텔레그램 알림 설정 ==================== */
.tg-howto { margin-bottom: 12px; }
.tg-howto summary { cursor: pointer; color: var(--text); font-weight: 500; }
.tg-howto ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.tg-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tg-checks label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; cursor: pointer; min-height: 32px; }
#telegramChatSelect { margin-top: 6px; }

/* [2026-10-05] 자체 차트 하나로 통일 - 장세 · 추세 AI 배지는 캔버스 위 왼쪽 위에, 추세 AI 띠 범례 */
.trade-chart-canvas-wrap .chart-regime-badge { top: 8px; left: 10px; }
.trade-chart-canvas-wrap .chart-trend-badge { top: 60px; }
.tc-band-key { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }
.tc-band-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
@media (max-width: 700px) { .trade-chart-canvas-wrap .chart-trend-badge { top: 54px; } }