/* =================================================================
   [2026-10-20 디자인 v3] SigmaDesk 거래소 스타일 (claude/2026-10-20-exchange-redesign.md)
   - 큰 거래소(바이낸스) 화면을 참고했다: 짙은 차콜 바탕 · 평평한 면 · 얇은 구분선 · 작은 모서리 · 골드 포인트 하나.
   - 색은 국내 관례 그대로: 상승/매수 = 빨강(--buy), 하락/매도 = 파랑(--sell).
   - 숫자는 고정폭 글꼴 대신 한글 UI 글꼴의 자리 맞춤 숫자(tabular-nums)로 쓴다.
   - 광택 · 흐림 · 빛번짐 · 그라데이션 · 깜빡임은 쓰지 않는다.
   - style.css 뒤에 읽혀 덮어쓰기만 한다(기능 · id는 그대로). 배치는 terminal.js가 바꾼다.
================================================================= */
:root {
  --bg: #0b0e11;
  --panel: #181a20;
  --panel-alt: #1e2329;
  --panel-raised: #2b3139;
  --border: #2b3139;
  --border-soft: #363c45;
  --line: #22262d;            /* 표 안쪽 줄 */
  --text: #eaecef;
  --text-muted: #9097a3;
  --text-dim: #7c8492;

  --buy: #f6465d;
  --buy-bg: rgba(246, 70, 93, 0.12);
  --buy-border: rgba(246, 70, 93, 0.45);
  --sell: #3d8bfd;
  --sell-bg: rgba(61, 139, 253, 0.12);
  --sell-border: rgba(61, 139, 253, 0.45);

  --gold: #e9b949;
  --gold-hover: #f1c862;
  --gold-bg: rgba(233, 185, 73, 0.12);
  --gold-border: rgba(233, 185, 73, 0.45);
  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --accent-bg: var(--gold-bg);
  --accent-border: var(--gold-border);
  --accent-ink: #e9b949;      /* 글자로 쓰는 강조색 */
  --on-accent: #181a20;       /* 골드 면 위 글자 */
  --accent-glow-12: rgba(233, 185, 73, 0.12);
  --accent-glow-15: rgba(233, 185, 73, 0.15);
  --accent-glow-45: rgba(233, 185, 73, 0.45);
  --accent-glow-55: rgba(233, 185, 73, 0.55);

  --ok: #2ebd85;
  --warn: #f0a83a;
  --warn-bg: rgba(240, 168, 58, 0.12);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-card: none;
  --shadow-panel: none;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ring: 0 0 0 2px var(--accent-glow-45);

  --font-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-num: var(--font-ui);
  --gap: 4px;                 /* 거래 화면 칸 사이 틈 */
}
html[data-theme="light"] {
  --bg: #f5f5f5;
  --panel: #ffffff;
  --panel-alt: #f5f6f8;
  --panel-raised: #eaecef;
  --border: #eaecef;
  --border-soft: #dcdfe4;
  --line: #f0f1f3;
  --text: #1e2329;
  --text-muted: #5b6370;
  --text-dim: #6b7380;
  --buy: #d9304e;
  --buy-bg: rgba(217, 48, 78, 0.08);
  --buy-border: rgba(217, 48, 78, 0.4);
  --sell: #1f6feb;
  --sell-bg: rgba(31, 111, 235, 0.08);
  --sell-border: rgba(31, 111, 235, 0.4);
  --gold: #e9b949;
  --gold-hover: #dcaa36;
  --gold-bg: rgba(201, 148, 0, 0.1);
  --gold-border: rgba(201, 148, 0, 0.45);
  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --accent-bg: var(--gold-bg);
  --accent-border: var(--gold-border);
  --accent-ink: #8f6700;
  --accent-sub: #8f6700;
  --ok: #0e9f6e;
  --warn: #b26a00;
  --warn-bg: rgba(178, 106, 0, 0.1);
  --shadow-pop: 0 8px 24px rgba(30, 35, 41, 0.14);
}

/* ---------- 바탕 · 글자 ---------- */
html, body { background: var(--bg); }
body {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
  color: var(--text);
}
::selection { background: var(--accent-glow-45); color: var(--text); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-soft); border: 0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); border: 0; }
.brand-star, .login-brand-mark, .login-brand-mark--live { filter: none !important; }

/* ---------- 상단바: 로고 · 메뉴 · 시세 ---------- */
.topbar,
html[data-theme="light"] .topbar {
  min-height: 56px;
  padding: 0 16px;
  gap: 8px 20px;
  background: var(--panel);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.topbar--live { border-bottom-color: var(--border); }
.topbar-left { gap: 0; min-width: 0; }
.brand-mark { margin-right: 8px; }
.brand-name {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-right: 28px;
}
.tm-nav { display: flex; align-items: stretch; gap: 4px; align-self: stretch; margin-right: 20px; }
.tm-nav-link {
  display: inline-flex; align-items: center;
  padding: 0 10px;
  background: none; border: 0; border-radius: 0;
  color: var(--text); font: 500 14px var(--font-ui);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  position: relative;
}
.tm-nav-link:hover { color: var(--accent-ink); }
.tm-nav-link.is-active { color: var(--accent-ink); }
.tm-nav-link.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--accent); }
.tm-nav-link:focus-visible { outline: none; box-shadow: inset var(--ring); }
.symbol-name {
  font-family: var(--font-ui);
  font-size: 16px; font-weight: 600; letter-spacing: 0;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}
.env-badge, .env-badge--live {
  margin-left: 8px;
  padding: 1px 6px;
  border: 0;
  border-radius: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  animation: none;
}
.env-badge { color: var(--warn); background: var(--warn-bg); }
.env-badge--live { color: var(--buy); background: var(--buy-bg); }
.env-badge.env-badge--paper { color: #a99cff; background: rgba(107, 92, 255, 0.16); }
html[data-theme="light"] .env-badge.env-badge--paper { color: #4b3fb0; }
.topbar-right { gap: 8px; }
.last-price, .topbar-right .last-price { font-family: var(--font-ui); font-size: 18px; font-weight: 600; margin-left: 0; }
.ws-status { font-size: 12px; color: var(--text-dim); }
.topbar-right .btn-ghost, .topbar-right .tb-menu-btn,
html[data-theme="light"] .topbar-right .btn-ghost, html[data-theme="light"] .topbar-right .tb-menu-btn {
  min-height: 32px; padding: 0 12px;
  background: transparent; border: 0;
  color: var(--text); font-size: 14px; font-weight: 500;
}
.topbar-right .btn-ghost:hover, .topbar-right .tb-menu-btn:hover,
html[data-theme="light"] .topbar-right .btn-ghost:hover, html[data-theme="light"] .topbar-right .tb-menu-btn:hover,
.tb-menu-btn[aria-expanded="true"] { background: var(--panel-alt); color: var(--accent-ink); }
.tb-menu-pop { border-radius: var(--radius-lg); border-color: var(--border); background: var(--panel); padding: 6px; min-width: 210px; }
.tb-menu-pop > .btn-ghost, .tb-menu-pop > a.btn-ghost,
html[data-theme="light"] .tb-menu-pop > .btn-ghost { min-height: 36px; padding: 0 12px; font-size: 14px; color: var(--text); border-radius: var(--radius-sm); background: transparent; }
.tb-menu-pop > .btn-ghost:hover, .tb-menu-pop > .btn-ghost:focus-visible,
html[data-theme="light"] .tb-menu-pop > .btn-ghost:hover { background: var(--panel-alt); color: var(--text); }
.tb-menu-pop > #resetPageBtn { color: var(--buy); }

/* 테마 전환: 알약 스위치 → 아이콘 버튼(지금 테마의 그림 하나) */
.theme-toggle {
  width: 32px; height: 32px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  justify-content: center;
}
.theme-toggle:hover { background: var(--panel-alt); color: var(--text); }
.theme-toggle::after { display: none; }
.theme-toggle-icon { position: static; transform: none; display: inline-flex; opacity: 1; transition: none; }
.theme-toggle-icon--light,
html[data-theme="light"] .theme-toggle-icon--dark { display: none; }
html[data-theme="light"] .theme-toggle-icon--light { display: inline-flex; opacity: 1; }
.theme-toggle--floating { top: 16px; right: 16px; background: var(--panel); border: 1px solid var(--border); }
#reconnectBtn { width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--radius-sm); }
#reconnectBtn:hover { background: var(--panel-alt); color: var(--text); }

/* ---------- 실거래 · 페이퍼 표시 띠 ---------- */
.live-banner {
  height: 28px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center;
  background: #2a1217; color: #ff8a9a;
  border-bottom: 1px solid rgba(246, 70, 93, 0.35);
  box-shadow: none;
  font-size: 12px; font-weight: 500; letter-spacing: 0;
}
html[data-theme="light"] .live-banner { background: #fdecef; color: #b0233c; border-bottom-color: rgba(217, 48, 78, 0.3); }
@media (min-width: 641px) { body[data-mode="live"] .topbar { top: 28px; } }
.paper-strip {
  position: sticky; top: 0; z-index: 60; /* 상단바(50) 위 · 팝업(200) 아래 */
  min-height: 30px; padding: 3px 12px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: #1b1d2b; color: #c9c3ff;
  border-bottom: 1px solid #34305a;
  font-size: 12px; font-weight: 500;
}
html[data-theme="light"] .paper-strip { background: #f1efff; color: #4b3fb0; border-bottom-color: #ddd8ff; }
.paper-strip-tag { padding: 1px 6px; border-radius: 2px; background: #6b5cff; color: #fff; font-weight: 600; letter-spacing: 0.06em; }
.paper-strip-sub { color: inherit; opacity: 0.75; }
.paper-strip-btn {
  min-height: 24px; padding: 0 10px;
  background: transparent; color: inherit;
  border: 1px solid currentColor; border-radius: var(--radius-sm);
  font: 500 12px var(--font-ui); cursor: pointer; opacity: 0.9;
}
.paper-strip-btn:hover { opacity: 1; background: rgba(107, 92, 255, 0.18); }
.paper-strip-btn:disabled { opacity: 0.5; cursor: default; }
@media (min-width: 641px) { body[data-mode="paper"] .topbar { top: 30px; } }
@media (max-width: 640px) { .paper-strip-sub { display: none; } }

/* ---------- 면 · 제목 ---------- */
.panel { background: var(--panel); }
#dashboard > .panel { border-radius: var(--radius-lg); border-color: var(--border); box-shadow: none; }
#dashboard > .panel.runtime-panel.is-running { border-color: var(--border); }
.panel-title, .modal-title, .modal-section-title { font-family: var(--font-ui); }
.panel-title { font-size: 14px; 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: 400; color: var(--text-muted); }
.strategy-note, .chart-note, .auto-desc { color: var(--text-dim); }
.strategy-note { border-left-color: var(--border); }
.footnote { background: transparent; border-top: 0; color: var(--text-dim); padding: 12px 16px 20px; }
.footnote--live { background: transparent; }

/* ---------- 입력 · 버튼 · 탭 ---------- */
.field-input {
  min-height: 36px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  box-shadow: none;
}
.field-input:hover { border-color: var(--border-soft); }
.field-input:focus, .field-input:focus-visible { outline: none; border-color: var(--accent); background: var(--panel-alt); box-shadow: none; }
html[data-theme="light"] .field-input { background: #fff; border-color: var(--border-soft); }
.btn-ghost, .btn-mini {
  background: var(--panel-raised);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 500;
}
.btn-ghost:hover, .btn-mini:hover { background: var(--border-soft); border-color: transparent; color: var(--text); }
html[data-theme="light"] .btn-ghost, html[data-theme="light"] .btn-mini { background: var(--panel-raised); }
html[data-theme="light"] .btn-ghost:hover, html[data-theme="light"] .btn-mini:hover { background: var(--border-soft); }
.btn-primary,
html:not([data-theme="light"]) .btn-primary:not(.btn-primary--danger),
html[data-theme="light"] .btn-primary:not(.btn-primary--danger) {
  background: var(--gold);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
}
.btn-primary:hover { background: var(--gold-hover); filter: none; }
.btn-primary:active { transform: none; }
.btn-primary--danger, .btn-primary--danger:hover { background: var(--buy); color: #fff; }
.btn-mini.btn-mini--danger, .btn-ghost.btn-mini--danger { background: var(--buy-bg); border-color: transparent; color: var(--buy); }
.btn-ghost:focus-visible, .btn-mini:focus-visible, .btn-primary:focus-visible, .strategy-tab:focus-visible { outline: none; box-shadow: var(--ring); }
.strategy-tabs {
  background: var(--panel-alt);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.strategy-tab { border-radius: 3px; font-family: var(--font-ui); font-weight: 500; color: var(--text-muted); }
.strategy-tab:hover { color: var(--text); }
.strategy-tab.active,
html[data-theme="light"] .strategy-tab.active {
  background: var(--panel-raised);
  color: var(--text);
  box-shadow: none;
}
html[data-theme="light"] .strategy-tab.active { background: #fff; box-shadow: 0 1px 2px rgba(30, 35, 41, 0.12); }
.strategy-tab--danger.active { background: var(--buy-bg); color: var(--buy); box-shadow: none; }

/* ---------- 표 · 목록 ---------- */
table { font-variant-numeric: tabular-nums; }
th { font-weight: 400; color: var(--text-dim); }
.so-list { border: 0; border-radius: 0; background: transparent; }
.so-cols { color: var(--text-dim); font-weight: 400; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.so-row { border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; }
/* [2026-10-29] 전용 슬롯 6 · 덤프 그리드 - 1~5와 갈라 보이게 */
.so-row--dg { border-top: 1px dashed var(--line); }
.so-row--dg .so-no { color: var(--gold, #f0b90b); }
.so-row:hover { background: var(--panel-alt); }
.so-sym, .so-no { font-family: var(--font-ui); }
.so-title { font-size: 16px; }
.ob-header { color: var(--text-dim); border-bottom: 0; padding-bottom: 6px; }
.ob-row { font-family: var(--font-ui); border-radius: 0; }
.ob-row:hover { background: var(--panel-alt); }
.ob-spread { background: transparent; border: 0; border-radius: 0; margin: 2px 0; padding: 8px 4px; font-family: var(--font-ui); }
#spreadMid { font-size: 16px; }
.auto-status, .auto-pnl-summary-item { background: var(--panel-alt); border: 0; border-radius: var(--radius-sm); }
.auto-pnl-summary-value { font-family: var(--font-ui); }
.pnlcalc-readout { background: var(--panel-alt); border: 0; border-radius: var(--radius-sm); }
.trade-chart-canvas-wrap { border: 0; border-radius: 0; background: var(--panel); }
.trade-chart-info, .trade-chart-legend { font-family: var(--font-ui); }

/* ---------- 모달 ---------- */
.modal-overlay, html[data-theme="light"] .modal-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.6); }
.modal-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
html:not([data-theme="light"]) .modal-card { background: var(--panel-alt); }
.modal-header { border-bottom-color: var(--border); }
.modal-title { font-size: 16px; font-weight: 600; }

/* ---------- 로그인 · 회원가입 ---------- */
.login-screen { background: var(--bg); }
.login-card, .login-card--live {
  width: 400px; max-width: calc(100vw - 32px);
  padding: 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.login-brand { gap: 10px; margin-bottom: 8px; }
.login-brand-text, .login-brand-text--live {
  font-family: var(--font-ui);
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text) !important;
}
.login-sub { color: var(--text-muted); margin-bottom: 20px; }
.login-help { color: var(--text-dim); }
.login-help a, .signup-link { color: var(--accent-ink); }
.live-warning { background: var(--buy-bg); border: 0; border-radius: var(--radius-sm); }
.live-warning b { color: var(--buy); }

/* =================================================================
   거래 터미널 배치(terminal.js가 body에 .tm을 붙인 뒤)
   위: 차트 | 호가 | 거래 모드   아래: 탭(슬롯 현황 · 슬롯 1~5 · 시그널 · 최근 체결)
================================================================= */
body.tm #dashboard > .tm-top { padding: var(--gap) var(--gap) 0; }
body.tm .tm-top > .chart-group-panel { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.tm .chart-group-panel > .panel-collapse-header { display: none; }
body.tm .chart-group-panel > .panel-body { display: block !important; margin: 0; padding: 0; }
body.tm .chart-orderbook-row { gap: var(--gap); background: transparent; }
body.tm .chart-orderbook-row > .panel { margin: 0; padding: 12px 16px 16px; background: var(--panel); border: 0; border-radius: var(--radius-lg); }
body.tm .chart-orderbook-row .panel-collapse-header { min-height: 32px; margin-bottom: 8px; }
body.tm .orderbook-panel--sidebar { flex-basis: 300px; max-width: 300px; padding-left: 12px; padding-right: 12px; }
body.tm .market-mode-panel--sidebar { flex-basis: 300px; max-width: 300px; }
body.tm .trade-chart-canvas-wrap { height: 540px; }
body.tm .chart-panel > .panel-body { margin-top: 0; }
body.tm .chart-panel .chart-note, body.tm .chart-panel .chart-note + .note-more { display: none; } /* 거래 화면에서는 긴 설명을 숨긴다(차트 범례는 그대로) */
body.tm .trade-chart { gap: 6px; }
body.tm .trade-chart-bar .strategy-tabs { background: transparent; padding: 0; }
body.tm .trade-chart-bar .strategy-tab { padding: 4px 8px; font-size: 13px; }
body.tm .trade-chart-bar .strategy-tab.active { background: transparent; color: var(--accent-ink); }
body.tm .trade-chart-legend { font-size: 12px; color: var(--text-dim); }
body.tm .chart-panel .panel-collapse-header-left { gap: 12px; flex-wrap: wrap; }
body.tm .chart-panel .panel-title { font-size: 14px; }
body.tm .tm-pane > .panel-body { margin-top: 0; }

body.tm .tm-bottom {
  margin: var(--gap);
  background: var(--panel);
  border-radius: var(--radius-lg);
  min-height: 360px;
}
.tm-tabs {
  display: flex; align-items: stretch; gap: 28px;
  height: 48px; padding: 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.tm-tabs::-webkit-scrollbar { display: none; }
.tm-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; background: none; border: 0;
  color: var(--text-muted); font: 500 14px var(--font-ui); white-space: nowrap;
  cursor: pointer;
}
.tm-tab:hover { color: var(--text); }
.tm-tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.tm-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 20px; height: 3px; margin-left: -10px; background: var(--accent); border-radius: 2px 2px 0 0; }
.tm-tab:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--accent-glow-45); }
.tm-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.tm-tab-dot[hidden] { display: none; }

body.tm .tm-panes > .tm-pane {
  margin: 0;
  padding: 16px 20px 20px;
  background: transparent;
  border: 0; border-radius: 0; box-shadow: none;
}
body.tm .tm-panes > .tm-pane.tm-hide { display: none !important; }
body.tm .tm-pane > .panel-collapse-header .panel-collapse-btn { display: none; }
body.tm .tm-pane > .panel-body { display: block; }
body.tm #dashboard > .footnote { margin: 0 var(--gap) var(--gap); }

@media (max-width: 1100px) {
  .tm-nav { margin-right: 12px; }
  .tm-nav-link { padding: 0 8px; font-size: 13px; }
  .brand-name { margin-right: 16px; }
}
@media (max-width: 1000px) {
  body.tm .orderbook-panel--sidebar, body.tm .market-mode-panel--sidebar { max-width: none; flex-basis: auto; }
  body.tm .trade-chart-canvas-wrap { height: 380px; }
}
@media (max-width: 820px) {
  .topbar-left { flex-wrap: wrap; row-gap: 0; }
  .tm-nav { order: 10; flex: 1 1 100%; margin: 4px -16px 0; padding: 0 6px; height: 40px; border-top: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
  .tm-nav::-webkit-scrollbar { display: none; }
  .brand-name { margin-right: 12px; }
  .symbol-name { padding-left: 12px; }
}
@media (max-width: 640px) {
  .topbar, html[data-theme="light"] .topbar { padding: 8px 12px 0; }
  .tm-nav { margin: 6px -12px 0; }
  .brand-name { font-size: 16px; }
  .topbar-right { padding-bottom: 8px; flex-wrap: nowrap; gap: 4px; }
  .topbar-right .ws-status { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .last-price, .topbar-right .last-price { font-size: 16px; margin-right: 4px; }
  .topbar-right .btn-ghost, .topbar-right .tb-menu-btn { min-height: 36px; padding: 0 10px; font-size: 13px; }
  body.tm .chart-orderbook-row > .panel { padding: 12px; }
  body.tm .trade-chart-canvas-wrap { height: 320px; }
  .tm-tabs { gap: 20px; padding: 0 12px; height: 44px; }
  body.tm .tm-panes > .tm-pane { padding: 12px; }
}

/* ---------- 오토 차트 머리 ---------- */
.ac-brand { gap: 8px; }
.ac-brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.ac-brand-page { padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--border); color: var(--text-muted); font-weight: 500; font-size: 14px; }

/* =================================================================
   [2026-10-21 화면 나누기] 상황판 · 오토 트레이딩 · 오토 차트 (terminal.js · overview.js)
================================================================= */
.tm-view[hidden] { display: none !important; }
body.tm .tm-view--autochart { padding: var(--gap); }
.tm-autochart-frame { display: block; width: 100%; min-height: 480px; border: 0; border-radius: var(--radius-lg); background: var(--bg); }
html.ac-embed .ac-brand { display: none; }

/* ---------- 상황판 ---------- */
.ov-wrap { padding: 16px var(--gap) var(--gap); display: flex; flex-direction: column; gap: var(--gap); }
.ov-head { display: flex; align-items: baseline; gap: 12px; padding: 4px 12px 8px; }
.ov-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.ov-mode { padding: 1px 6px; border-radius: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.ov-mode--live { color: var(--buy); background: var(--buy-bg); }
.ov-mode--paper { color: #a99cff; background: rgba(107, 92, 255, 0.16); }
html[data-theme="light"] .ov-mode--paper { color: #4b3fb0; }
.ov-mode--testnet { color: var(--warn); background: var(--warn-bg); }
.ov-updated { margin-left: auto; font-size: 12px; color: var(--text-dim); }

.ov-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.ov-kpi { background: var(--panel); border-radius: var(--radius-lg); padding: 16px 20px; min-width: 0; }
.ov-kpi-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-kpi-value { margin-top: 6px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-kpi-sub { margin-top: 4px; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [2026-11-09] 지갑 잔고 옆 원화 - 좁으면 다음 줄로 */
#ovBal { white-space: normal; }
.ov-kpi-krw { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }

.ov-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.ov-card { background: var(--panel); border-radius: var(--radius-lg); min-width: 0; }
.ov-card--trades { grid-column: 1 / -1; }
.ov-card-head { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.ov-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.ov-card-head > :last-child:not(.ov-card-title) { margin-left: auto; }
.ov-card-body { padding: 12px 20px 16px; }
.ov-link { background: none; border: 0; padding: 4px 0; color: var(--accent-ink); font: 500 13px var(--font-ui); cursor: pointer; }
.ov-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 2px; }
.ov-empty { margin: 8px 0; color: var(--text-dim); font-size: 13px; }
.ov-dim { color: var(--text-dim); font-weight: 400; }
.is-up { color: var(--buy); }
.is-down { color: var(--sell); }
.ov-kpi-value.is-up { color: var(--buy); }
.ov-kpi-value.is-down { color: var(--sell); }

/* 슬롯 상태(app.js 슬롯 현황 표를 그대로 옮겨 온다) */
.ov-card--slots .slot-overview, .ov-card--slots .slot-overview.panel { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.ov-card--slots .so-title { display: none; }
.ov-card--slots .so-head { margin: 0 0 8px; }
.ov-card--slots .ov-card-body { overflow-x: auto; }

/* 표 */
.ov-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ov-table th { padding: 6px 8px 8px; text-align: left; font-size: 12px; font-weight: 400; color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ov-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--text); }
.ov-table tr:last-child td { border-bottom: 0; }
.ov-table tbody tr:hover td { background: var(--panel-alt); }
.ov-table .r { text-align: right; }
.ov-table th:first-child, .ov-table td:first-child { padding-left: 0; }
.ov-table th:last-child, .ov-table td:last-child { padding-right: 0; }
.ov-trades, .ov-market { overflow-x: auto; }
.ov-side { display: inline-block; min-width: 28px; padding: 1px 6px; border-radius: 2px; font-size: 12px; font-weight: 600; text-align: center; }
.ov-side.is-up { background: var(--buy-bg); }
.ov-side.is-down { background: var(--sell-bg); }
.ov-regime { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.ov-regime i { width: 8px; height: 8px; border-radius: 2px; background: var(--text-dim); flex-shrink: 0; }
.ov-regime--trend_up i { background: var(--buy); }
.ov-regime--trend_down i { background: var(--sell); }
.ov-regime--range i { background: #8a94a6; }
.ov-regime--volatile i { background: var(--warn); }
.ov-regime--quiet i { background: #5e6673; }
.ov-regime--illiquid i { background: #b05a7a; }

/* 서버 상태 */
.ov-server { margin: 0; }
.ov-srow { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ov-srow:last-child { border-bottom: 0; }
.ov-srow dt { color: var(--text-muted); white-space: nowrap; }
.ov-srow dd { margin: 0; text-align: right; color: var(--text); }
.ov-state { display: inline-flex; align-items: baseline; gap: 6px; }
.ov-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; transform: translateY(-1px); }
.ov-state--ok i { background: var(--ok); }
.ov-state--warn i { background: var(--warn); }
.ov-state--bad i { background: var(--buy); }
.ov-state--bad { color: var(--buy); }

/* 손익 그래프 */
.ov-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--panel-alt); border-radius: var(--radius-sm); }
.ov-seg-btn { min-height: 26px; padding: 0 10px; background: transparent; border: 0; border-radius: 3px; color: var(--text-muted); font: 500 12px var(--font-ui); cursor: pointer; }
.ov-seg-btn[aria-pressed="true"] { background: var(--panel-raised); color: var(--text); }
html[data-theme="light"] .ov-seg-btn[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(30, 35, 41, 0.12); }
.ov-seg-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ov-chart { position: relative; min-height: 220px; }
.ov-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ov-grid-line { stroke: var(--line); stroke-width: 1; }
.ov-grid-line.is-zero { stroke: var(--border-soft); }
.ov-axis { fill: var(--text-dim); font-size: 11px; font-family: var(--font-ui); }
.ov-bar.is-up { fill: var(--buy); }
.ov-bar.is-down { fill: var(--sell); }
.ov-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ov-area { fill: var(--accent); opacity: 0.1; }
.ov-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.ov-cross { stroke: var(--border-soft); stroke-width: 1; }
.ov-hit { fill: transparent; cursor: crosshair; }
.ov-tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 8px 10px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-size: 12px; color: var(--text); pointer-events: none; }
.ov-tip[hidden] { display: none; }

/* [2026-10-28] 기간 막대 · 거르기 · 엑셀 · 되돌리기 비교 */
.ov-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 12px; }
.ov-seg--period { flex-wrap: wrap; }
.ov-range { display: inline-flex; align-items: center; gap: 6px; }
.ov-date, .ov-select { min-height: 30px; padding: 0 8px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 400 13px var(--font-ui); color-scheme: dark; }
html[data-theme="light"] .ov-date, html[data-theme="light"] .ov-select { color-scheme: light; }
.ov-date:focus-visible, .ov-select:focus-visible { outline: none; box-shadow: var(--ring); }
.ov-card-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } /* [2026-11-02] 체결 칸 - 거래소 내역 가져오기 · 엑셀 */
.ov-btn { min-height: 30px; padding: 0 12px; background: var(--panel-alt); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 500 13px var(--font-ui); cursor: pointer; white-space: nowrap; }
.ov-btn:hover:not(:disabled) { border-color: var(--border-soft); background: var(--panel-raised); }
.ov-btn:disabled { opacity: 0.5; cursor: default; }
.ov-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ov-card--replay { grid-column: 1 / -1; }
.ov-replay { overflow-x: auto; }
.ov-table tr.ov-total td { border-top: 1px solid var(--border); font-weight: 600; }
.ov-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.ov-more { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.ov-trades { max-height: 560px; overflow-y: auto; }
@media (max-width: 640px) {
  .ov-period { padding: 0 8px; }
  .ov-range { flex-wrap: wrap; }
  .ov-select { flex: 1 1 40%; }
}

@media (max-width: 1200px) { .ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ov-wrap { padding-top: 8px; }
  .ov-head { padding: 4px 8px; }
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-kpi { padding: 12px; }
  .ov-kpi-value { font-size: 18px; }
  .ov-card-head, .ov-card-body { padding-left: 12px; padding-right: 12px; }
}

/* ---------- [2026-10-21] 거래량 X레이 켜기 · 끄기 ---------- */
.tc-xray-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.tc-xray-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.tc-xray-toggle:hover { color: var(--text); }

/* [2026-10-28] 덤프 바닥 그리드 - 전용 슬롯 6 탭(dumpgrid.js) */
.dg-panel { padding: 16px 20px 20px; }
.dg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
/* [2026-10-30] 슬롯 6 두 모드(덤프 그리드 · 눌림 그리드) 켬/끔 */
.dg-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 280px; }
.dg-title strong { font-size: 15px; color: var(--text); }
.dg-sub { font-size: 12px; color: var(--text-dim); }
.dg-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); color: var(--text-muted); }
.dg-badge.is-run { color: var(--ok); border-color: var(--ok); }
.dg-badge.is-wait { color: var(--accent-ink); border-color: var(--accent-border); background: var(--accent-bg); }
.dg-btn-gold { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dg-btn-gold:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.dg-err { margin: 6px 0; color: var(--warn); font-size: 13px; }
.dg-ok { margin: 6px 0; color: var(--ok); font-size: 13px; }
.dg-muted { margin: 6px 0; color: var(--text-dim); font-size: 13px; }
.dg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dg-card { background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; overflow-x: auto; }
.dg-card--wide { grid-column: 1 / -1; }
.dg-card-head { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.dg-card-sub { font-size: 12px; color: var(--text-dim); margin: 10px 0 4px; }
.dg-kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-bottom: 8px; }
.dg-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; min-width: 0; }
.dg-k { color: var(--text-dim); white-space: nowrap; }
.dg-v { color: var(--text); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dg-table td, .dg-table th { font-variant-numeric: tabular-nums; }
.dg-hist, .dg-log { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.dg-hist li, .dg-log li { padding: 4px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.dg-hist li:last-child, .dg-log li:last-child { border-bottom: 0; }
.dg-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.dg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dg-help { font-size: 11px; color: var(--text-dim); line-height: 1.35; }
.dg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* [2026-11-03 주인님 "슬롯 6 레이아웃을 이쁘게"] 요약 · 모드 · 슬롯 카드 · 아래 두 칸 */
.dg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.dg-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
.dg-stat-k { font-size: 12px; color: var(--text-dim); }
.dg-stat-v { font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dg-stat-sub { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-sec { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 8px; }
.dg-sec-t { font-size: 13px; font-weight: 600; color: var(--text); }
.dg-sec-s { font-size: 12px; color: var(--text-dim); }
.dg-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dg-mode { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; text-align: left; padding: 9px 12px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-alt); color: var(--text); cursor: pointer; font: inherit; transition: border-color 0.15s ease, background-color 0.15s ease; }
.dg-mode:hover:not(:disabled) { border-color: var(--border-soft); }
.dg-mode b { font-size: 13px; font-weight: 600; }
.dg-mode small { grid-column: 1 / -1; font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.dg-pill { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border-soft); color: var(--text-muted); }
.dg-mode.is-on { border-color: var(--gold-border); background: var(--gold-bg); }
.dg-mode.is-on .dg-pill { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.dg-mode:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dg-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dg-lanes--1 { grid-template-columns: minmax(0, 1fr); }
.dg-lanes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dg-lane { display: flex; flex-direction: column; gap: 10px; }
.dg-lane-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dg-lane-no { flex: none; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--panel-raised); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dg-lane-name { display: flex; flex-direction: column; min-width: 0; }
.dg-lane-name strong { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-lane-name span { font-size: 12px; color: var(--text-dim); }
.dg-lane-chart { background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; } /* [2026-11-08] 누르면 차트가 이 종목 5분봉으로 */
.dg-lane-chart:hover strong, .dg-lane-chart:focus-visible strong { text-decoration: underline; }
.dg-side { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 10px; border: 1px solid var(--border-soft); color: var(--text-muted); }
.dg-side.is-long { color: var(--buy); border-color: var(--buy-border); background: var(--buy-bg); }
.dg-side.is-short { color: var(--sell); border-color: var(--sell-border); background: var(--sell-bg); }
.dg-bigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dg-big { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dg-big-k { font-size: 11px; color: var(--text-dim); }
.dg-big-v { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dg-lane-line { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.dg-kvs--lane { grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 0; }
.dg-kvs--lane .dg-kv { font-size: 12px; }
.dg-lots { margin-top: 2px; }
.dg-lane--empty { border-style: dashed; background: transparent; justify-content: center; min-height: 96px; }
.dg-lane--empty .dg-lane-name strong { color: var(--text-muted); }
.dg-lane-note { grid-column: 1 / -1; }
.is-gold { color: var(--accent-ink); }
.dg-grid--split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-top: 16px; align-items: start; }
.dg-side-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dg-card--full { margin-top: 12px; }
.dg-tag { display: inline-block; font-size: 11px; padding: 0 6px; margin: 0 6px; border-radius: var(--radius-sm); background: var(--panel-raised); color: var(--text-muted); }
.dg-hist-why { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.dg-log { max-height: 320px; overflow-y: auto; }
.dg-side-col .dg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dg-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dg-grid { grid-template-columns: minmax(0, 1fr); } .dg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dg-lanes, .dg-lanes--2 { grid-template-columns: minmax(0, 1fr); } .dg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .dg-panel { padding: 12px 16px 16px; } .dg-kvs, .dg-fields, .dg-side-col .dg-fields { grid-template-columns: minmax(0, 1fr); } .dg-modes { grid-template-columns: minmax(0, 1fr); } .dg-stat-v { font-size: 16px; } }
/* [2026-11-03] 늘 기본값 - 슬롯 세부 설정 숨김(종목 · 금액 · 레버리지만 남김 · claude/2026-11-03-slot-defaults-only.md) */
body.slot-defaults-only .settings-subpanel .strategy-tabs,
body.slot-defaults-only .settings-subpanel .auto-desc,
body.slot-defaults-only .settings-subpanel .strategy-settings,
body.slot-defaults-only .settings-subpanel .strategy-note,
body.slot-defaults-only .settings-subpanel .auto-setting:not([id^="qtySizingRow"]):not([id^="qtyBalanceDivRow"]):not([id^="qtyUsdtRow"]):not([id^="maxPosUsdtRow"]):not([id^="notionalRow"]),
body.slot-defaults-only .market-mode-panel .market-mode-tabs--full,
body.slot-defaults-only .market-mode-panel .strategy-note,
body.slot-defaults-only .market-mode-panel .auto-setting:has(#marginIsolatedTab),
body.slot-defaults-only .market-mode-panel .auto-setting:has(#marginIsolatedTab2) { display: none !important; }
body.slot-defaults-only .sdo-note { margin: 0 0 10px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* =================================================================
   [2026-11-03 주인님 "전체 디자인 통일성 · 버튼 · 토글 모션 · 더 전문적으로"] 모션 · 상태 색 규칙
   - 참고: 거래소 HTS · WTS(바이낸스 · 업비트 · 트레이딩뷰)의 공통 규칙 - 숫자는 자리 맞춤, 움직임은 정보를 줄 때만 짧게(0.09 ~ 0.24초),
     값이 바뀐 칸만 0.4초 깜빡임, 상태는 점 + 글자, 빨강 · 파랑은 방향(롱 · 숏 · 손익)에만.
   - 상태 색 하나로: 켜짐 · 고름 = 골드, 실행 중(살아 있음) = 초록 점, 롱 · 이익 = 빨강, 숏 · 손실 = 파랑, 경고 = 주황.
   - 움직임 줄이기(prefers-reduced-motion)를 켠 PC에서는 모두 바로 바뀐다(맨 아래).
================================================================= */
:root {
  --dur-1: 90ms; --dur-2: 160ms; --dur-3: 240ms; --dur-flash: 600ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --live: var(--ok);
  --live-glow: rgba(46, 189, 133, 0.35);
}

/* ---- 버튼: 누르면 살짝 눌림 · 마우스를 올리면 부드럽게 ---- */
.btn-ghost, .btn-mini, .btn-primary, .ov-btn, .ov-seg-btn, .strategy-tab, .tb-menu-btn, .paper-strip-btn, .dg-mode, .dg-master, .tm-tab, .so-row, .sc-btn, .cm-btn, .sa-btn {
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.btn-ghost:active:not(:disabled), .btn-mini:active:not(:disabled), .btn-primary:active:not(:disabled), .ov-btn:active:not(:disabled), .ov-seg-btn:active, .strategy-tab:active, .tb-menu-btn:active, .paper-strip-btn:active:not(:disabled), .dg-master:active:not(:disabled), .sc-btn:active:not(:disabled), .cm-btn:active:not(:disabled), .sa-btn:active:not(:disabled) { transform: scale(0.97); }
.dg-mode:active:not(:disabled) { transform: scale(0.985); }
.btn-primary:hover:not(:disabled), .dg-btn-gold:hover:not(:disabled) { box-shadow: 0 0 0 3px var(--accent-glow-15); }

/* ---- 켬 · 끔 스위치(슬롯 켜기 · 시그마 AI 모드 · 자동 운용): 골드 · 손잡이가 탄력 있게 미끄러짐 ---- */
.auto-toggle-slider { transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.auto-toggle-slider::before { transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out); }
.auto-toggle input:checked + .auto-toggle-slider { background: var(--gold); border-color: var(--gold); }
.auto-toggle input:checked + .auto-toggle-slider::before { background: var(--on-accent); }
.auto-toggle:active .auto-toggle-slider::before { width: 20px; }
.auto-toggle input:focus-visible + .auto-toggle-slider { box-shadow: var(--ring); }
.auto-status-badge.on { color: var(--live); background: rgba(46, 189, 133, 0.1); border-color: rgba(46, 189, 133, 0.45); }

.dg-switch { position: relative; flex: none; display: inline-block; width: 30px; height: 18px; border-radius: 999px; background: var(--panel-raised); border: 1px solid var(--border-soft); transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.dg-switch > i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2) var(--ease-out); }
.is-on > .dg-switch, .dg-master.is-on .dg-switch { background: var(--gold); border-color: var(--gold); }
.is-on > .dg-switch > i, .dg-master.is-on .dg-switch > i { transform: translateX(12px); background: var(--on-accent); }

/* ---- 체크 상자: 골드 · 체크 표시가 튀어나오듯 ---- */
input[type="checkbox"]:not(.auto-toggle > input) {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -3px;
  border: 1.5px solid var(--border-soft); border-radius: 4px; background: var(--panel-alt); cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
input[type="checkbox"]:not(.auto-toggle > input):hover:not(:disabled) { border-color: var(--gold-border); }
input[type="checkbox"]:not(.auto-toggle > input):checked { background: var(--gold); border-color: var(--gold); }
input[type="checkbox"]:not(.auto-toggle > input)::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-2) var(--ease-spring); }
input[type="checkbox"]:not(.auto-toggle > input):checked::after { transform: rotate(45deg) scale(1); }
input[type="checkbox"]:not(.auto-toggle > input):focus-visible { outline: none; box-shadow: var(--ring); }
input[type="checkbox"]:not(.auto-toggle > input):disabled { opacity: 0.45; cursor: default; }

/* ---- 입력칸: 고르면 골드 테두리가 부드럽게 ---- */
.field-input, input.field-input, select.field-input, textarea.field-input { transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.field-input:focus { border-color: var(--gold-border); box-shadow: 0 0 0 3px var(--accent-glow-12); outline: none; }

/* ---- 아래 탭 두 단: 추세 AI(슬롯 1 ~ 5) · 시그마 AI(전체 · 6-1 · 6-2 · 6-3) · 시그널 · 최근 체결 ---- */
.tm-tabs { position: relative; }
.tm-tabs .tm-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); border-radius: 2px 2px 0 0; opacity: 0; pointer-events: none; transition: transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), opacity var(--dur-2) linear; }
.tm-tab[aria-selected="true"]::after { content: none; } /* 고정 밑줄 대신 움직이는 밑줄(.tm-ink) */
.tm-tabs--group { height: 50px; gap: 30px; }
.tm-gtab { font-size: 15px; letter-spacing: -0.01em; }
.tm-gtab[aria-selected="true"] { color: var(--text); }
.tm-gcount { display: inline-flex; align-items: center; min-width: 30px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--panel-raised); color: var(--text-dim); font: 600 11px var(--font-num); font-variant-numeric: tabular-nums; justify-content: center; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.tm-gcount.is-live { background: rgba(46, 189, 133, 0.12); color: var(--live); }
.tm-tabs--sub { height: 40px; gap: 4px; padding: 0 16px; align-items: center; background: var(--panel-alt); border-bottom: 1px solid var(--border); }
.tm-tabs--sub[hidden] { display: none; }
.tm-tabs--sub .tm-ink { height: 2px; }
.tm-stab { height: 30px; padding: 0 12px !important; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); }
.tm-stab:hover { background: var(--panel-raised); color: var(--text); }
.tm-stab[aria-selected="true"] { color: var(--text); background: var(--panel); font-weight: 600; }
html[data-theme="light"] .tm-stab[aria-selected="true"] { background: #fff; box-shadow: 0 1px 2px rgba(30, 35, 41, 0.1); }
.tm-stab[hidden] { display: none; }
.tm-tab-dot { box-shadow: 0 0 0 0 var(--live-glow); animation: sd-live 2.4s var(--ease-out) infinite; }
.tm-tab-dot { background: var(--live); }

/* 슬롯 현황 묶음 머리(추세 AI · 시그마 AI) */
.so-group { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 6px; border-bottom: 1px solid var(--line); }
.so-group b { font-size: 12px; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.02em; }
.so-group small { font-size: 11px; color: var(--text-dim); }

/* ---- 살아 있음 점: 천천히 퍼지는 고리(정보: 서버가 돌고 있음) ---- */
@keyframes sd-live { 0% { box-shadow: 0 0 0 0 var(--live-glow); } 70% { box-shadow: 0 0 0 6px rgba(46, 189, 133, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 189, 133, 0); } }
@keyframes sd-tick-up { 0% { background-color: var(--buy-bg); color: var(--buy); } 100% { background-color: transparent; } }
@keyframes sd-tick-dn { 0% { background-color: var(--sell-bg); color: var(--sell); } 100% { background-color: transparent; } }
@keyframes sd-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sd-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
@keyframes sd-scan { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* ================= 시그마 AI(예전 슬롯 6) v2 ================= */
.dg-panel { padding: 18px 20px 22px; }
.dg-head { gap: 14px; margin-bottom: 14px; }
.dg-eyebrow { font: 700 10px/1 var(--font-ui); letter-spacing: 0.16em; color: var(--accent-ink); }
.dg-title strong { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.dg-badge { gap: 7px; height: 28px; padding: 0 12px; border-radius: 14px; }
.dg-badge.is-run { background: rgba(46, 189, 133, 0.1); border-color: rgba(46, 189, 133, 0.45); color: var(--live); }
.dg-live { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex: none; }
.dg-badge.is-run .dg-live { background: var(--live); animation: sd-live 2.4s var(--ease-out) infinite; }
.dg-badge.is-wait .dg-live { background: var(--accent); animation: sd-scan 1.4s ease-in-out infinite; }
.dg-master { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel-alt); color: var(--text-muted); font: 600 13px var(--font-ui); cursor: pointer; }
.dg-master:hover:not(:disabled) { border-color: var(--border-soft); color: var(--text); }
.dg-master.is-on { border-color: var(--gold-border); background: var(--gold-bg); color: var(--accent-ink); }
.dg-master:focus-visible { outline: none; box-shadow: var(--ring); }
.dg-master:disabled { opacity: 0.6; cursor: default; }

.dg-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dg-stat { position: relative; padding: 12px 14px; gap: 4px; background: var(--panel-alt); }
.dg-stat-v { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.dg-meter { display: flex; gap: 3px; height: 4px; margin: 2px 0 1px; }
.dg-meter > i { flex: 1 1 0; border-radius: 2px; background: var(--panel-raised); transition: background-color var(--dur-3) var(--ease-out); }
.dg-meter > i.is-on { background: var(--gold); }
.dg-meter--lanes > i.is-on { background: var(--live); }

.dg-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dg-mode { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: center; gap: 4px 10px; padding: 11px 14px 10px; min-height: 92px; border-radius: var(--radius-md); }
.dg-mode b { font-size: 14px; }
.dg-mode small { font-size: 12px; }
.dg-mode-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 20px; }
.dg-mode-ago { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dg-mode.is-live { box-shadow: inset 3px 0 0 var(--live); }
.dg-mode:hover:not(:disabled) { border-color: var(--gold-border); }
.dg-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--panel-raised); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dg-chip--live { background: rgba(46, 189, 133, 0.12); color: var(--live); }
.dg-chip.is-pick { background: var(--gold-bg); color: var(--accent-ink); }
.dg-chip.is-err { background: var(--warn-bg); color: var(--warn); }
.dg-chip.is-dim { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }

.dg-lanes { align-items: stretch; }
.dg-lanes--focus { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.dg-lane { position: relative; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--panel-alt); }
.dg-lane.is-long { box-shadow: inset 3px 0 0 var(--buy); }
.dg-lane.is-short { box-shadow: inset 3px 0 0 var(--sell); }
.dg-lane.dg-enter { animation: sd-enter var(--dur-3) var(--ease-out) both; }
.dg-lane-no { font-size: 12px; padding: 3px 8px; background: var(--panel-raised); color: var(--text); }
.dg-lane-name strong { font-size: 16px; font-weight: 700; }
.dg-bigs { padding: 10px 0; }
.dg-big-v { font-size: 17px; font-weight: 700; border-radius: 3px; padding: 0 2px; margin: 0 -2px; }
.dg-big-sub { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-tick-up { animation: sd-tick-up var(--dur-flash) var(--ease-out); }
.dg-tick-dn { animation: sd-tick-dn var(--dur-flash) var(--ease-out); }
.dg-lane--empty { min-height: 168px; align-items: center; justify-content: center; text-align: center; background: transparent; border: 1px dashed var(--border-soft); }
.dg-lane--empty .dg-lane-head { flex-direction: column; gap: 8px; }
.dg-lane--empty .dg-lane-name { align-items: center; }
.dg-scanning { display: flex; gap: 5px; }
.dg-scanning i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: sd-scan 1.4s ease-in-out infinite; }
.dg-scanning i:nth-child(2) { animation-delay: 0.16s; }
.dg-scanning i:nth-child(3) { animation-delay: 0.32s; }

/* 가격 막대: 손절 ─ 평단 ─ 지금 ─ 익절 */
.dg-rail { display: flex; flex-direction: column; gap: 6px; }
.dg-rail-track { position: relative; height: 6px; margin: 6px 0 2px; border-radius: 3px; background: var(--panel-raised); }
.dg-rail-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: left var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out); }
.dg-rail-fill.is-win { background: var(--buy); opacity: 0.55; }
.dg-rail-fill.is-loss { background: var(--sell); opacity: 0.55; }
.dg-rail-m { position: absolute; top: -4px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; }
.dg-rail-m.is-stop { background: var(--sell); }
.dg-rail-m.is-avg { background: var(--text-muted); }
.dg-rail-m.is-tp { background: var(--gold); }
.dg-rail-now { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--panel-alt); transition: left var(--dur-3) var(--ease-out); }
.dg-rail-now.is-win { background: var(--buy); }
.dg-rail-now.is-loss { background: var(--sell); }
.dg-rail-lbl { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dg-rail-lbl .is-down { color: var(--sell); }
.dg-hold { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); }
.dg-hold-bar { height: 4px; border-radius: 2px; background: var(--panel-raised); overflow: hidden; }
.dg-hold-bar > i { display: block; height: 100%; background: var(--text-muted); border-radius: 2px; transition: width var(--dur-3) var(--ease-out); }
.dg-hold-bar.is-late > i { background: var(--warn); }
.dg-hold-v { font-variant-numeric: tabular-nums; }

/* 아래 칸 */
.dg-card { border-radius: var(--radius-md); padding: 14px 16px; }
.dg-card-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.dg-card-head-s { font-size: 12px; font-weight: 400; color: var(--text-dim); }
.dg-scan { border-top: 1px solid var(--line); }
.dg-scan:first-of-type { border-top: 0; }
.dg-scan > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; border-radius: var(--radius-sm); padding: 0 4px; margin: 0 -4px; transition: background-color var(--dur-2) var(--ease-out); }
.dg-scan > summary::-webkit-details-marker { display: none; }
.dg-scan > summary::before { content: ""; width: 6px; height: 6px; border: solid var(--text-dim); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease-out); margin-right: 4px; flex: none; }
.dg-scan[open] > summary::before { transform: rotate(45deg); }
.dg-scan > summary:hover { background: var(--panel-raised); }
.dg-scan > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.dg-scan-t { font-size: 13px; font-weight: 600; color: var(--text); }
.dg-scan-ago { margin-left: auto; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dg-scan-body { padding: 0 0 10px 14px; animation: sd-enter var(--dur-2) var(--ease-out); }
.dg-input-wrap { position: relative; display: block; }
.dg-input-wrap > input { width: 100%; padding-right: 30px; }
.dg-input-wrap::after { content: attr(data-unit); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-dim); pointer-events: none; }
.dg-log { max-height: 360px; }
.dg-log li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 0 4px; padding: 5px 0; }
.dg-log-t { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap; }
.dg-log .dg-tag { min-width: 64px; text-align: center; }
.dg-log-m { color: var(--text-muted); }
.dg-skel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dg-skel i { height: 72px; border-radius: var(--radius-md); background: var(--panel-raised); animation: sd-pulse 1.2s ease-in-out infinite; }

@media (max-width: 1100px) { .dg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dg-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-tabs--group { gap: 20px; } }
@media (max-width: 480px) { .dg-modes { grid-template-columns: minmax(0, 1fr); } .dg-mode { min-height: 0; } .dg-master-t { display: none; } .dg-master { padding: 0 8px; } .dg-log li { grid-template-columns: minmax(0, 1fr); } .tm-gcount { display: none; } }

/* 움직임 줄이기를 켠 PC: 움직임 없이 바로 바뀐다(색 변화는 그대로) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .dg-tick-up, .dg-tick-dn { animation: none !important; }
}
.dg-mode.is-on { background: var(--panel-alt); border-color: var(--gold-border); }
.dg-mode.is-on b { color: var(--text); }
.dg-mode:not(.is-on) b, .dg-mode:not(.is-on) small { opacity: 0.72; }
@media (max-width: 900px) { .dg-stats > .dg-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 480px) {
  .dg-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dg-mode { padding: 10px 10px 8px; gap: 4px 6px; }
  .dg-mode small { display: none; }
  .dg-mode b { font-size: 13px; }
  .dg-log li { grid-template-columns: auto auto; }
  .dg-log-m { grid-column: 1 / -1; }
  .dg-log .dg-tag { min-width: 0; justify-self: start; }
}

/* [2026-11-03 새 로고] 시리우스 타일 - 골드 타일 안에 별(음각) · 작은 반짝임. 실거래 로그인은 빨강 타일 */
.brand-tile { display: block; border-radius: 22%; flex: none; }
.brand-mark { margin-right: 10px; }
.brand-name { font-weight: 700; letter-spacing: -0.02em; }
.login-brand-mark--live .brand-tile-bg { fill: var(--buy); }
.login-brand-mark { filter: none !important; }
.ac-brand .brand-tile, .admin-title .brand-tile { display: inline-block; vertical-align: -4px; margin-right: 8px; }

/* =================================================================
   [2026-11-03] 전략 생성 AI(sa-) · 커뮤니티(cm-) - 같은 토큰 · 같은 카드 · 같은 버튼 규칙
================================================================= */
.tm-view--strategy, .tm-view--community { padding: 20px 24px 40px; max-width: 1480px; margin: 0 auto; }
.sa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sa-eyebrow { display: block; font: 700 10px/1 var(--font-ui); letter-spacing: 0.16em; color: var(--accent-ink); margin-bottom: 6px; }
.sa-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.sa-sub { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }
.sa-muted { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.sa-err { margin: 0; color: var(--warn); font-size: 13px; }
.sa-banner { padding: 10px 12px; border-radius: var(--radius-md); background: var(--warn-bg); margin-bottom: 12px; }
.sa-link { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--gold-border); }
.sa-grid { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.sa-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sa-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sa-card-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sa-card-h b { font-size: 15px; }
.sa-enter { animation: sd-enter var(--dur-3) var(--ease-out) both; }
.sa-step { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; }
.sa-step b { font-size: 14px; color: var(--text); }
.sa-step small { grid-column: 2; font-size: 12px; color: var(--text-dim); }
.sa-step-n { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gold-bg); color: var(--accent-ink); font: 700 12px var(--font-num); border: 1px solid var(--gold-border); }
.sa-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sa-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 1.5px dashed var(--border-soft); border-radius: var(--radius-md); background: var(--panel-alt); text-align: center; cursor: pointer; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.sa-drop:hover, .sa-drop:focus-within, .sa-drop.is-over { border-color: var(--gold); background: var(--gold-bg); }
.sa-drop.is-over { transform: scale(1.01); }
.sa-drop b { font-size: 13px; color: var(--text); }
.sa-drop small { font-size: 12px; color: var(--text-dim); }
.sa-drop-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--panel-raised); position: relative; }
.sa-drop-ic::before { content: ""; position: absolute; left: 50%; top: 9px; width: 2px; height: 14px; margin-left: -1px; background: var(--accent); border-radius: 1px; }
.sa-drop-ic::after { content: ""; position: absolute; left: 50%; top: 9px; width: 8px; height: 8px; margin-left: -5px; border: solid var(--accent); border-width: 2px 0 0 2px; transform: rotate(45deg); }
.sa-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.sa-thumb { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--panel-alt); border: 1px solid var(--border); animation: sd-enter var(--dur-3) var(--ease-out) both; }
.sa-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-thumb.is-frame { box-shadow: inset 0 -3px 0 var(--accent); }
.sa-thumb-t { position: absolute; left: 4px; bottom: 5px; font: 600 10px var(--font-num); padding: 1px 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); color: #fff; }
.sa-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2); }
.sa-x:hover { background: var(--buy); transform: scale(1.08); }
.sa-x--row { position: static; flex: none; background: transparent; color: var(--text-dim); }
.sa-x--row:hover { background: var(--panel-raised); color: var(--text); }
.sa-text, .sa-rectext { resize: vertical; min-height: 96px; font: 13px/1.55 var(--font-ui); }
.sa-seg { align-self: flex-start; }
.sa-recfile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; }
.sa-recfile small { font-size: 12px; color: var(--text-dim); }
.sa-recsum { display: flex; flex-wrap: wrap; gap: 6px; animation: sd-enter var(--dur-2) var(--ease-out); }
.sa-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--panel-raised); font: 600 12px var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); }
.sa-chip.is-up { color: var(--buy); background: var(--buy-bg); }
.sa-chip.is-down { color: var(--sell); background: var(--sell-bg); }
.sa-chip--dim { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-weight: 500; }
.sa-card--opts { flex-direction: row; gap: 12px; }
.sa-opt { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-go { display: flex; flex-direction: column; gap: 8px; }
.sa-btn, .cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--panel-alt); color: var(--text); font: 600 13px var(--font-ui); cursor: pointer; white-space: nowrap; text-decoration: none; }
.sa-btn:hover:not(:disabled), .cm-btn:hover:not(:disabled) { background: var(--panel-raised); }
.sa-btn:focus-visible, .cm-btn:focus-visible, .cm-rail-btn:focus-visible, .cm-card:focus-visible, .cm-like:focus-visible { outline: none; box-shadow: var(--ring); }
.sa-btn:disabled, .cm-btn:disabled { opacity: 0.5; cursor: default; }
.sa-btn--ghost, .cm-btn--ghost { background: transparent; }
.sa-btn--gold, .cm-btn--gold { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sa-btn--gold:hover:not(:disabled), .cm-btn--gold:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--accent-glow-15); }
.cm-btn--danger { color: var(--buy); border-color: var(--buy-border); background: var(--buy-bg); }
.sa-btn--lg { min-height: 46px; font-size: 15px; border-radius: var(--radius-md); }
.sa-spark { width: 14px; height: 14px; position: relative; flex: none; }
.sa-spark::before, .sa-spark::after { content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; border-radius: 1px; }
.sa-spark::before { width: 2px; height: 14px; }
.sa-spark::after { width: 14px; height: 2px; }
.sa-btn--lg:not(:disabled) .sa-spark { animation: sa-twinkle 2.6s var(--ease-out) infinite; }
.sa-btn.is-busy .sa-spark { animation: sa-spin 0.9s linear infinite; }
@keyframes sa-twinkle { 0%, 70%, 100% { transform: rotate(0) scale(1); } 80% { transform: rotate(45deg) scale(0.75); } }
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-ai { text-align: center; }
.sa-empty { align-items: center; text-align: center; padding: 40px 24px; gap: 14px; }
.sa-empty b { font-size: 15px; }
.sa-empty .sa-muted { max-width: 520px; }
.sa-empty-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sa-flow { position: relative; padding: 7px 12px; border: 1px solid var(--border-soft); border-radius: 16px; font-size: 12px; color: var(--text-muted); animation: sd-enter var(--dur-3) var(--ease-out) both; }
.sa-flow:not(:last-child)::after { content: ""; position: absolute; right: -8px; top: 50%; width: 8px; height: 1px; background: var(--border-soft); }
.sa-flow:nth-child(2) { border-color: var(--gold-border); color: var(--accent-ink); }
.sa-progress { align-items: center; text-align: center; padding: 36px 20px; }
.sa-orbit { position: relative; width: 56px; height: 56px; }
.sa-orbit i { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--accent); border-radius: 50%; animation: sa-spin 1.1s linear infinite; }
.sa-orbit i:nth-child(2) { inset: 8px; border-top-color: var(--live); animation-duration: 1.6s; animation-direction: reverse; }
.sa-orbit i:nth-child(3) { inset: 18px; background: var(--gold-bg); border: 0; animation: sd-pulse 1.2s ease-in-out infinite; }
.sa-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.sa-steps li { padding: 5px 12px; border-radius: 14px; border: 1px solid var(--border); font-size: 12px; color: var(--text-dim); transition: all var(--dur-3) var(--ease-out); }
.sa-steps li.is-now { border-color: var(--gold); color: var(--accent-ink); background: var(--gold-bg); }
.sa-steps li.is-done { color: var(--live); border-color: rgba(46, 189, 133, 0.45); }
.sa-strat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sa-strat-name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sa-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sa-summary { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.sa-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sa-rules li { position: relative; padding: 8px 12px 8px 14px; border-radius: var(--radius-sm); background: var(--panel-alt); font-size: 13px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.sa-rules li::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--border-soft); }
.sa-rules li.is-meta { background: transparent; padding-left: 0; color: var(--text-dim); font-size: 12px; }
.sa-rules li.is-meta::before { content: none; }
.sa-rules li.is-long::before { background: var(--buy); }
.sa-rules li.is-short::before { background: var(--sell); }
.sa-rules li.is-exit::before { background: var(--gold); }
.sa-why { border-top: 1px solid var(--line); padding-top: 8px; }
.sa-why > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 6px; }
.sa-why > summary::-webkit-details-marker { display: none; }
.sa-why > summary::before { content: ""; width: 6px; height: 6px; border: solid var(--text-dim); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease-out); }
.sa-why[open] > summary::before { transform: rotate(45deg); }
.sa-why ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.sa-why--risk > summary { color: var(--warn); }
.sa-tune { border-top: 1px solid var(--line); padding-top: 8px; }
.sa-tune > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-ink); list-style: none; }
.sa-tune > summary::-webkit-details-marker { display: none; }
.sa-tune-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.sa-tune-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.sa-unit { position: relative; display: block; }
.sa-unit input { width: 100%; padding-right: 30px; }
.sa-unit::after { content: attr(data-unit); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-dim); pointer-events: none; }
.sa-tune-act { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sa-verdict { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; }
.sa-verdict.is-good { background: rgba(46, 189, 133, 0.1); color: var(--live); }
.sa-verdict.is-mixed, .sa-verdict.is-few { background: var(--gold-bg); color: var(--accent-ink); }
.sa-verdict.is-bad { background: var(--sell-bg); color: var(--sell); }
.sa-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sa-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--panel-alt); min-width: 0; }
.sa-kpi-k { font-size: 11px; color: var(--text-dim); }
.sa-kpi-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.01em; }
.sa-kpi-s { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sa-curve { display: block; width: 100%; height: 140px; border-radius: var(--radius-md); background: var(--panel-alt); }
.sa-curve-zero { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sa-curve-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sa-draw 0.9s var(--ease-out) forwards; }
.sa-curve.is-up .sa-curve-line { stroke: var(--buy); }
.sa-curve.is-down .sa-curve-line { stroke: var(--sell); }
.sa-curve-area { opacity: 0.12; animation: sa-area 0.9s var(--ease-out) both; }
@keyframes sa-area { from { opacity: 0; } to { opacity: 0.12; } }
.sa-curve.is-up .sa-curve-area { fill: var(--buy); }
.sa-curve.is-down .sa-curve-area { fill: var(--sell); }
@keyframes sa-draw { to { stroke-dashoffset: 0; } }
.sa-curve-empty { padding: 30px; text-align: center; font-size: 12px; color: var(--text-dim); background: var(--panel-alt); border-radius: var(--radius-md); }
.sa-halves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sa-half { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
.sa-half b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sa-half small { font-size: 11px; color: var(--text-dim); }
.sa-exits { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-tablewrap { overflow-x: auto; margin-top: 8px; }
.sa-table td, .sa-table th { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-foot { border-top: 1px solid var(--line); padding-top: 10px; }
.sa-skel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sa-skel i { height: 64px; border-radius: var(--radius-md); background: var(--panel-raised); animation: sd-pulse 1.2s ease-in-out infinite; }
.sa-lib-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sa-lib-list li { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); }
.sa-lib-list li:first-child { border-top: 0; }
.sa-lib-item { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 6px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; border-radius: var(--radius-sm); min-width: 0; transition: background-color var(--dur-2) var(--ease-out); }
.sa-lib-item:hover { background: var(--panel-alt); }
.sa-lib-item b { font-size: 13px; }
.sa-lib-item small { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* 커뮤니티 */
.cm-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cm-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; }
.cm-rail hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.cm-rail-btn { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: 500 13px var(--font-ui); cursor: pointer; text-align: left; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.cm-rail-btn small { margin-left: auto; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cm-rail-btn:hover { background: var(--panel-alt); color: var(--text); }
.cm-rail-btn.is-on { background: var(--gold-bg); color: var(--accent-ink); font-weight: 600; }
.cm-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--text-dim); flex: none; }
.cm-dot--pnl { background: var(--buy); } .cm-dot--entry { background: var(--gold); } .cm-dot--strategy { background: var(--live); } .cm-dot--chart { background: var(--sell); } .cm-dot--talk { background: var(--text-muted); } .cm-dot--mine { background: transparent; border: 1.5px solid var(--accent); }
.cm-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cm-feed-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-search { flex: 1 1 200px; min-width: 0; }
.cm-write { margin-left: auto; }
.cm-plus { width: 12px; height: 12px; position: relative; }
.cm-plus::before, .cm-plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; border-radius: 1px; }
.cm-plus::before { width: 2px; height: 12px; } .cm-plus::after { width: 12px; height: 2px; }
.cm-feed { display: flex; flex-direction: column; gap: 10px; }
.cm-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; animation: sd-enter var(--dur-3) var(--ease-out) both; transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.cm-card:hover { border-color: var(--border-soft); background: var(--panel-alt); }
.cm-card:active { transform: scale(0.995); }
.cm-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cm-type { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font: 700 11px var(--font-ui); background: var(--panel-raised); color: var(--text-muted); }
.cm-type--pnl { background: var(--buy-bg); color: var(--buy); } .cm-type--entry { background: var(--gold-bg); color: var(--accent-ink); } .cm-type--strategy { background: rgba(46, 189, 133, 0.12); color: var(--live); } .cm-type--chart { background: var(--sell-bg); color: var(--sell); }
.cm-sym { font: 700 13px var(--font-num); color: var(--text); }
.cm-side { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; }
.cm-side.is-long { color: var(--buy); background: var(--buy-bg); } .cm-side.is-short { color: var(--sell); background: var(--sell-bg); }
.cm-meta { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.cm-meta b { color: var(--text-muted); font-weight: 600; }
.cm-mode { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border-soft); color: var(--text-dim); }
.cm-mode--live { color: var(--buy); border-color: var(--buy-border); }
.cm-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
.cm-body { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-img { display: block; max-width: 100%; max-height: 320px; object-fit: contain; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--panel-alt); align-self: flex-start; }
.cm-chartinfo { margin: 0; font-size: 13px; color: var(--text-muted); }
.cm-foot { display: flex; align-items: center; gap: 14px; }
.cm-like { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: 600 12px var(--font-num); cursor: pointer; transition: border-color var(--dur-2), color var(--dur-2), background-color var(--dur-2); }
.cm-like:hover { border-color: var(--buy-border); color: var(--buy); }
.cm-like.is-on { color: var(--buy); border-color: var(--buy-border); background: var(--buy-bg); }
.cm-heart { width: 12px; height: 11px; position: relative; display: inline-block; }
.cm-heart::before, .cm-heart::after { content: ""; position: absolute; top: 0; width: 7px; height: 11px; border-radius: 6px 6px 0 0; background: currentColor; opacity: 0.35; }
.cm-heart::before { left: 6px; transform: rotate(-45deg); transform-origin: 0 100%; }
.cm-heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.cm-like.is-on .cm-heart::before, .cm-like.is-on .cm-heart::after { opacity: 1; }
.cm-like.is-pop .cm-heart { animation: cm-pop 0.42s var(--ease-spring); }
@keyframes cm-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cm-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cm-stat--dim { color: var(--text-dim); }
.cm-ic-cmt { width: 13px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; }
.cm-ic-cmt::after { content: ""; position: absolute; left: 2px; bottom: -4px; width: 4px; height: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; background: var(--panel); transform: skewY(-30deg); }
.cm-foot .cm-btn { margin-left: auto; min-height: 30px; font-size: 12px; }
.cm-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cm-lad-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--panel-alt); border-top: 3px solid var(--border-soft); }
.cm-lad-row span { font-size: 11px; color: var(--text-dim); }
.cm-lad-row b { font: 700 15px var(--font-num); font-variant-numeric: tabular-nums; }
.cm-lad-row small { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cm-lad-row.is-sl { border-top-color: var(--sell); } .cm-lad-row.is-tp { border-top-color: var(--gold); }
.cm-lad-row.is-entry.is-long { border-top-color: var(--buy); } .cm-lad-row.is-entry.is-short { border-top-color: var(--sell); }
.cm-rr { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.cm-rr-bar { flex: 1 1 auto; display: flex; height: 6px; gap: 2px; }
.cm-rr-bar i { border-radius: 3px; } .cm-rr-bar .is-risk { background: var(--sell); } .cm-rr-bar .is-reward { background: var(--gold); }
.cm-rr small { font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-pnl { display: flex; flex-direction: column; gap: 10px; }
.cm-pnl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cm-pnl-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--panel-alt); border-radius: var(--radius-md); min-width: 0; }
.cm-pnl-kpis small { font-size: 11px; color: var(--text-dim); }
.cm-pnl-kpis b { font: 700 15px var(--font-num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cm-bars { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.cm-bars i { flex: 1 1 0; border-radius: 2px 2px 0 0; min-width: 3px; transform-origin: bottom; animation: cm-grow var(--dur-3) var(--ease-out) both; }
.cm-bars i.is-up { background: var(--buy); } .cm-bars i.is-down { background: var(--sell); opacity: 0.8; }
@keyframes cm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.cm-verified { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--live); }
.cm-check { width: 14px; height: 14px; border-radius: 50%; background: var(--live); position: relative; flex: none; }
.cm-check::after { content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3px; height: 6px; border: solid var(--panel); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cm-strat { display: flex; flex-direction: column; gap: 8px; }
.cm-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 16px; background: var(--panel); border: 1px dashed var(--border-soft); border-radius: var(--radius-lg); text-align: center; }
.cm-pager { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--text-dim); }
.cm-side-col { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.cm-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cm-box-h { display: flex; flex-direction: column; gap: 2px; }
.cm-box--note p { font-size: 12px; }
.cm-leaders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm-leaders li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 2px 8px; padding: 8px 4px; border-top: 1px solid var(--line); cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--dur-2); }
.cm-leaders li:first-child { border-top: 0; }
.cm-leaders li:hover { background: var(--panel-alt); }
.cm-leaders li b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-leaders li small { grid-column: 2 / -1; font-size: 11px; color: var(--text-dim); }
.cm-rank { grid-row: span 2; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--font-num); background: var(--panel-raised); color: var(--text-muted); }
.cm-rank.r1 { background: var(--gold); color: var(--on-accent); } .cm-rank.r2 { background: var(--gold-bg); color: var(--accent-ink); }
.cm-lnet { font: 700 13px var(--font-num); font-variant-numeric: tabular-nums; }
.cm-nick { display: flex; gap: 6px; } .cm-nick input { flex: 1 1 auto; min-width: 0; }
.cm-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end; }
.cm-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); animation: cm-fade var(--dur-2) var(--ease-out); }
.cm-sheet-panel { position: relative; width: min(560px, 100%); height: 100%; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--border); padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-pop); animation: cm-slide var(--dur-3) var(--ease-out); }
.cm-sheet.is-closing .cm-sheet-panel { animation: cm-slide-out 0.18s ease-in forwards; }
.cm-sheet.is-closing .cm-sheet-bg { animation: cm-fade 0.18s ease-in reverse forwards; }
@keyframes cm-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cm-slide-out { to { transform: translateX(24px); opacity: 0; } }
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
.cm-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-sheet-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cm-sheet .cm-meta { margin-left: 0; }
.cm-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 18px; cursor: pointer; transition: background-color var(--dur-2), transform var(--dur-1); }
.cm-x:hover { background: var(--panel-raised); color: var(--text); }
.cm-x:active { transform: scale(0.94); }
.cm-x:focus-visible { outline: none; box-shadow: var(--ring); }
.cm-sheet-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-cmt-h { margin: 8px 0 0; font-size: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.cm-cmts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cm-cmts li { padding: 10px 12px; border-radius: var(--radius-md); background: var(--panel-alt); animation: sd-enter var(--dur-2) var(--ease-out); }
.cm-cmt-t { margin: 4px 0 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-cmt-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cm-cmt-form textarea { width: 100%; resize: vertical; }
.cm-linkbtn { background: none; border: 0; color: var(--text-dim); font-size: 12px; cursor: pointer; text-decoration: underline; }
.cm-compose-panel { gap: 14px; }
.cm-typeseg { align-self: flex-start; flex-wrap: wrap; }
.cm-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 0 auto; }
.cm-row > .cm-f { flex: 1 1 120px; }
.cm-f textarea { resize: vertical; }
.cm-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cm-hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0; }
.cm-imgrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-imgrow label { position: relative; }
.cm-imgprev { width: 96px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.ov-seg-btn.cm-side-long[aria-pressed="true"] { color: var(--buy); }
.ov-seg-btn.cm-side-short[aria-pressed="true"] { color: var(--sell); }
.cm-toast { position: fixed; left: 50%; bottom: 28px; z-index: 1100; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--radius-md); background: var(--panel-raised); color: var(--text); font-size: 13px; box-shadow: var(--shadow-pop); animation: sd-enter var(--dur-3) var(--ease-out); max-width: calc(100vw - 32px); }
.cm-skel { grid-template-columns: minmax(0, 1fr); } .cm-skel i { height: 130px; }

@media (max-width: 1200px) { .cm-grid { grid-template-columns: 180px minmax(0, 1fr); } .cm-side-col { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .sa-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .tm-view--strategy, .tm-view--community { padding: 16px 16px 32px; }
  .cm-grid { grid-template-columns: minmax(0, 1fr); }
  .cm-rail { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 4px; }
  .cm-rail hr { display: none; }
  .cm-rail-btn { flex: none; }
  .cm-side-col { grid-template-columns: minmax(0, 1fr); }
  .cm-pnl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-tune-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-meta { margin-left: 0; width: 100%; }
  .cm-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cm-write { margin-left: 0; }
}
@media (max-width: 1100px) { .tm-nav-link { font-size: 13px; } }

/* [2026-11-03 2차] 전략 생성 - 되돌리기 테스트(기간 · 금액 · 차트 · 여러 종목) · 시그마 AI에 추가 / 시그마 AI 내 전략 */
.sa-bt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sa-bt-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-ic-sigma { font: 700 14px/1 var(--font-ui); }
.sa-btn.is-open { box-shadow: 0 0 0 3px var(--accent-glow-15); }
.sa-add { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--gold-border); background: var(--gold-bg); }
.sa-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sa-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); cursor: pointer; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.sa-radio input { margin-top: 3px; accent-color: var(--gold); }
.sa-radio span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-radio b { font-size: 13px; } .sa-radio small { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.sa-radio.is-on { border-color: var(--gold); box-shadow: 0 0 0 3px var(--accent-glow-12); }
.sa-radio.is-dis { opacity: 0.5; cursor: default; }
.sa-warn { padding: 10px 12px; border-radius: var(--radius-md); background: var(--warn-bg); color: var(--warn); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.sa-warn p { margin: 0; color: var(--text-muted); font-size: 12px; }
.sa-ack { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.sa-ok { margin: 0; font-size: 13px; color: var(--live); font-weight: 600; }
.sa-money { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.sa-money-in { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 10px; }
.sa-kpis--money .sa-kpi { background: var(--panel-alt); }
.sa-chart { display: flex; flex-direction: column; gap: 8px; }
.sa-chart-cv { display: block; width: 100%; height: 260px; border-radius: var(--radius-md); background: var(--panel-alt); }
.sa-chart-ctl { display: flex; align-items: center; gap: 8px; }
.sa-chart-range { flex: 1 1 auto; accent-color: var(--gold); min-width: 0; }
.sa-multi { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.sa-mtable tbody tr { cursor: pointer; transition: background-color var(--dur-2) var(--ease-out); }
.sa-mtable tbody tr:hover, .sa-mtable tbody tr:focus-visible { background: var(--panel-alt); outline: none; }
.sa-mtable tbody tr.is-cur { box-shadow: inset 3px 0 0 var(--gold); }
.sa-lv { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; background: var(--panel-raised); color: var(--text-muted); }
.sa-lv.is-good { background: rgba(46, 189, 133, 0.12); color: var(--live); } .sa-lv.is-mixed, .sa-lv.is-few { background: var(--gold-bg); color: var(--accent-ink); } .sa-lv.is-bad { background: var(--sell-bg); color: var(--sell); }
.sa-days .ov-seg-btn { min-width: 44px; }
.dg-css { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dg-cs { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-alt); transition: border-color var(--dur-2) var(--ease-out); animation: sd-enter var(--dur-3) var(--ease-out) both; }
.dg-cs.is-on { border-color: var(--gold-border); }
.dg-cs-head { display: flex; align-items: flex-start; gap: 10px; }
.dg-cs-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dg-cs-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-cs-name small { font-size: 12px; color: var(--text-dim); }
.dg-cs-sw { background: none; border: 0; padding: 2px; cursor: pointer; border-radius: 10px; }
.dg-cs-sw:focus-visible { outline: none; box-shadow: var(--ring); }
.dg-cs-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dg-cs-rules li { font-size: 12px; color: var(--text-muted); padding-left: 8px; border-left: 2px solid var(--border-soft); line-height: 1.45; overflow-wrap: anywhere; }
.dg-cs-rules li.is-long { border-left-color: var(--buy); } .dg-cs-rules li.is-short { border-left-color: var(--sell); }
.dg-cs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dg-cs-lv.is-good { background: rgba(46, 189, 133, 0.12); color: var(--live); } .dg-cs-lv.is-warn { background: var(--gold-bg); color: var(--accent-ink); } .dg-cs-lv.is-bad { background: var(--sell-bg); color: var(--sell); }
.dg-cs-act { display: flex; gap: 6px; align-items: center; }
.dg-cs-scope { flex: 1 1 auto; min-width: 0; height: 30px; font-size: 12px; }
.dg-cs-del { flex: none; }
.dg-cs-warn { margin: 0; font-size: 12px; color: var(--warn); }
.dg-cs-empty { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--border-soft); border-radius: var(--radius-md); color: var(--text); text-decoration: none; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.dg-cs-empty:hover { border-color: var(--gold); background: var(--gold-bg); }
.dg-cs-empty span:last-child { display: flex; flex-direction: column; gap: 2px; }
.dg-cs-empty b { font-size: 13px; } .dg-cs-empty small { font-size: 12px; color: var(--text-dim); }
.dg-cs-plus { width: 30px; height: 30px; border-radius: 8px; background: var(--gold-bg); position: relative; flex: none; }
.dg-cs-plus::before, .dg-cs-plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--accent); border-radius: 1px; }
.dg-cs-plus::before { width: 2px; height: 12px; } .dg-cs-plus::after { width: 12px; height: 2px; }
@media (max-width: 1100px) { .dg-css { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dg-css, .sa-radios { grid-template-columns: minmax(0, 1fr); } .sa-money-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =================================================================
   [2026-11-03 3차 주인님 "유격이 안 맞아 · 빈칸도 지워 주고 · 어색한 칸마다 테두리도 세련된 디자인 폼"] 면 · 간격 · 테두리 한 벌
   - 참고: 거래소 WTS(바이낸스 · 바이비트)와 대시보드 디자인 시스템(Linear · Vercel) - 바깥 면은 테두리 없이 면 색으로만 나누고,
     안쪽 칸은 한 단계 밝은 면 + 테두리 없음, 누르는 것(버튼 · 입력 · 켜고 끄는 칸)만 테두리. 테두리가 두 겹으로 겹치지 않게.
   - 간격 한 벌: 화면 가장자리 16px · 카드 사이 8px · 카드 안 16px · 칸 사이 8px · 모서리 바깥 10px / 안쪽 8px / 작은 것 6px.
   - 나란한 카드는 높이를 맞춘다(짧은 쪽 아래 빈칸이 보이지 않게).
================================================================= */
:root { --r-card: 10px; --r-tile: 8px; --r-chip: 6px; --sp-page: 16px; --sp-gap: 8px; --sp-card: 16px; }
/* 바깥 면 - 테두리 없이 면 색 */
.ov-card, .sa-card, .cm-card, .cm-box, .cm-rail, body.tm .tm-bottom, body.tm .chart-orderbook-row > .panel, .dg-card { border-color: transparent; border-radius: var(--r-card); }
.sa-card, .cm-card, .cm-box, .cm-rail { border: 0; }
.cm-card { border: 1px solid transparent; }
.cm-card:hover { border-color: var(--border); background: var(--panel); }
/* 안쪽 칸 - 한 단계 밝은 면 · 테두리 없음 */
.dg-stat, .sa-kpi, .sa-half, .cm-pnl-kpis > div, .cm-lad-row, .sa-money, .sa-rules li, .dg-cs, .ov-kpi { border: 0; border-radius: var(--r-tile); }
.sa-half, .sa-money { background: var(--panel-alt); }
.dg-panel .dg-card { background: var(--panel-alt); border: 0; }
.dg-lane:not(.dg-lane--empty) { border: 0; }
.dg-lane--empty { border: 1px dashed var(--border-soft); background: transparent; }
.dg-cs { background: var(--panel-alt); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--dur-2) var(--ease-out); }
.dg-cs.is-on { box-shadow: inset 0 0 0 1px var(--gold-border); }
.dg-mode { border-color: var(--border); }
/* 높이 맞춤 - 나란한 카드 */
.ov-grid { align-items: stretch; }
.ov-grid > .ov-card { display: flex; flex-direction: column; }
.ov-grid > .ov-card > :last-child { flex: 1 1 auto; }
.dg-grid--split { align-items: stretch; }
.dg-grid--split > .dg-card { height: 100%; }
.dg-side-col > .dg-card:last-child { flex: 1 1 auto; }
.sa-grid { align-items: stretch; }
.sa-grid > .sa-col--in > .sa-card:last-of-type, .sa-grid > .sa-col--right > .sa-card:last-child { flex: 1 1 auto; }
/* 간격 한 벌 - 새 화면도 상황판 · 거래 화면과 같은 8px 틈 · 16px 가장자리 */
.tm-view--strategy, .tm-view--community { padding: var(--sp-page) var(--sp-page) 32px; }
.sa-grid, .cm-grid, .sa-col, .cm-main, .cm-feed, .cm-side-col { gap: var(--sp-gap); }
.sa-card { padding: var(--sp-card); }
.sa-head { margin-bottom: 12px; }
.dg-stats, .dg-modes, .dg-lanes, .dg-css, .dg-grid { gap: var(--sp-gap); }
.dg-sec { margin: 18px 0 8px; }
/* 표 · 목록 줄 높이 */
.ov-table td, .ov-table th, .dg-table td, .dg-table th, .sa-table td, .sa-table th { padding-top: 9px; padding-bottom: 9px; }

/* 전략 생성 - 새로 만들기 | 지금 전략 되돌리기 */
.sa-tabs { margin: 0 0 12px; }
.sa-tabs .ov-seg-btn { min-height: 32px; padding: 0 16px; font-size: 13px; }
.sa-cat { display: flex; flex-direction: column; gap: 4px; }
.sa-cat--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sa-cat-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-tile); background: var(--panel-alt); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.sa-cat-item:hover { border-color: var(--border-soft); }
.sa-cat-item:active { transform: scale(0.99); }
.sa-cat-item.is-on { border-color: var(--gold); background: var(--gold-bg); }
.sa-cat-item:focus-visible { outline: none; box-shadow: var(--ring); }
.sa-cat-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sa-cat-t b { font-size: 13px; }
.sa-cat-t small { font-size: 11px; color: var(--text-dim); line-height: 1.4; }
.sa-cat-item .sa-chip { flex: none; height: 20px; font-size: 10px; }
.sa-opt--inline { flex-direction: row; align-items: center; gap: 10px; }
.sa-opt--inline .field-label { flex: none; margin: 0; }
.sa-opt--inline input { max-width: 160px; }
.sa-step-n--trend { background: rgba(46, 189, 133, 0.1); color: var(--live); border-color: rgba(46, 189, 133, 0.45); }
.sa-symswap { align-items: center; }
.sa-symswap input { width: 110px; height: 34px; }
.sa-cat-note { padding: 0 4px; }
@media (max-width: 760px) { .sa-cat--grid { grid-template-columns: minmax(0, 1fr); } }

/* 거래 모드 칸 아래 - 슬롯 한눈에 */
.tm-mini { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.tm-mini-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; }
.tm-mini-sum { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tm-mini-list { display: flex; flex-direction: column; gap: 2px; }
.tm-mini-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 8px auto; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border: 0; border-radius: var(--r-chip); background: transparent; color: var(--text); font: 13px var(--font-ui); text-align: left; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out); }
.tm-mini-row:hover { background: var(--panel-alt); }
.tm-mini-row:focus-visible { outline: none; box-shadow: var(--ring); }
.tm-mini-row.is-grp .tm-mini-no { color: var(--accent-ink); }
.tm-mini-no { font: 600 12px var(--font-num); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tm-mini-sym { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tm-mini-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-soft); }
.tm-mini-row.is-live .tm-mini-dot { background: var(--live); animation: sd-live 2.4s var(--ease-out) infinite; }
.tm-mini-pnl { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.tm-mini-pnl.is-up { color: var(--buy); } .tm-mini-pnl.is-down { color: var(--sell); }
.sa-opt--inline { flex: none; }
.sa-cat--grid .sa-cat-item { flex-direction: column; align-items: flex-start; gap: 6px; }
.sa-cat--grid .sa-cat-item .sa-chip { align-self: flex-start; }
/* 가장자리 · 틈 한 벌(모든 화면): 위 16px · 옆 8px · 칸 사이 8px · 제목과 거르기 줄은 카드 왼쪽 끝에 맞춤 */
:root { --gap: 8px; }
.ov-head { padding: 4px 0 8px; }
.ov-period { padding: 0; }
.tm-view--strategy, .tm-view--community { padding: 16px var(--gap) 24px; max-width: none; }
.sa-head { padding: 4px 0 0; }
@media (max-width: 760px) { .ov-head { padding: 4px 0; } .ov-period { padding: 0; } .tm-view--strategy, .tm-view--community { padding: 12px var(--gap) 24px; } }
.dg-panel .dg-lane--empty { background: transparent; border: 1px dashed var(--border-soft); min-height: 128px; }

/* =================================================================
   [2026-11-03 4차] 글자 로고 · 움직이는 마크 · 가운데 정렬 (claude/2026-11-03-orbit-align.md)
   주인님: "로고는 앱이나 프로그램 아이콘에만 따로 쓰고 프로그램에는 글자만 · 로고를 모션 그래픽이 가능하게 만들어서
           새로고침 버튼을 저걸로 · 버튼들이랑 글자의 정렬을 중앙으로 맞춰서 자연스러워 보이게"
   - 마크(별을 도는 세 고리)는 앱 아이콘(public/icons · 파비콘)과 움직이는 표시(새로고침 · 불러오는 중)에만.
   - 화면 머리 · 로그인은 글자 로고 ΣIGMA(굵게) DESK(가늘게 · 골드) · 자간 14%.
   - 한 줄에 놓인 버튼 · 입력 · 탭은 같은 높이(32px)로 맞추고 위아래 가운데. 버튼 안 글자는 가운데.
   ================================================================= */
:root { --ctl-h: 32px; --ctl-h-sm: 28px; }

/* ---- 글자 로고 ---- */
.sd-wordmark { display: inline-flex; align-items: baseline; gap: 0.34em; font-family: var(--font-ui); font-size: 16px; line-height: 1; letter-spacing: 0.14em; white-space: nowrap; color: var(--text); }
.sd-wm-a { font-weight: 600; }
/* [2026-11-03 5차] Σ(= S)를 골드로 강조 · [2026-11-04 주인님] 강조 글자(골드 Σ · DESK)는 일반 글자(IGMA)보다 살짝 굵고 크게 - 800 · 6% 크게 */
.sd-wm-s { color: var(--accent-ink); font-weight: 800; font-size: 1.06em; }
.sd-wm-b { font-weight: 800; font-size: 1.06em; color: var(--accent-ink); margin-right: -0.14em; }
a.brand-name { display: inline-flex; align-items: center; height: var(--ctl-h); text-decoration: none; color: var(--text); border-radius: var(--r-chip); }
a.brand-name:focus-visible { outline: none; box-shadow: var(--ring); }
.topbar .brand-name .sd-wordmark { font-size: 15px; }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand .sd-wordmark { font-size: 22px; }
.login-brand-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-chip); font: 700 11px var(--font-ui); letter-spacing: 0.12em; background: var(--panel-alt); color: var(--text-muted); }
.login-brand-tag:empty { display: none; }
.login-brand-tag--live { background: var(--buy-bg); color: var(--buy); }
.login-brand-tag--paper { background: var(--panel-raised); color: var(--text); }
.admin-title { display: inline-flex; align-items: center; gap: 12px; }
.admin-title .sd-wordmark { font-size: 16px; }
.admin-title-page { padding-left: 12px; border-left: 1px solid var(--border); font: 500 15px var(--font-ui); color: var(--text-muted); letter-spacing: 0; }
.ac-brand-name { display: inline-flex; align-items: center; }
.ac-brand-name .sd-wordmark { font-size: 14px; }
@media (max-width: 760px) { .topbar .brand-name .sd-wordmark { font-size: 14px; } .login-brand .sd-wordmark { font-size: 20px; } }

/* ---- 움직이는 마크(public/orbit.js) ---- */
.sd-orbit { display: block; flex: none; overflow: visible; }
.sd-orbit .orb-arc, .sd-orbit .orb-star { transform-box: view-box; transform-origin: 32px 32px; transition: transform var(--dur-3) var(--ease-out); }
.sd-orbit-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.sd-orbit-btn:hover:not(:disabled) { color: var(--text); }
.sd-orbit-btn:hover .orb-arc--1 { transform: rotate(16deg); }
.sd-orbit-btn:hover .orb-arc--2 { transform: rotate(-12deg); }
.sd-orbit-btn:hover .orb-arc--3 { transform: rotate(10deg); }
.sd-orbit-btn:hover .orb-star { transform: scale(1.1); }
.sd-orbit-btn.is-orbit-spinning, .sd-orbit-btn.is-orbit-spinning:hover, #reconnectBtn.is-orbit-spinning, #refreshBalanceBtn.is-orbit-spinning { color: var(--accent-ink); }
.is-orbit-spinning .orb-arc--1 { animation: sd-orb 0.9s linear infinite; }
.is-orbit-spinning .orb-arc--2 { animation: sd-orb 1.3s linear infinite; }
.is-orbit-spinning .orb-arc--3 { animation: sd-orb 1.8s linear infinite reverse; }
.is-orbit-spinning .orb-star { animation: sd-orb-star 1.2s ease-in-out infinite; }
@keyframes sd-orb { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sd-orb-star { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.74); } }
@keyframes sd-orb-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.sd-orbit-btn, .sd-orbit-btn:hover, .sd-orbit-btn:active, .sd-orbit-btn.spinning { transform: none; } /* 버튼 자체는 돌지 않는다(고리만) */
.sd-orbit-btn:active:not(:disabled) .sd-orbit { transform: scale(0.9); transition: transform var(--dur-1) var(--ease-out); }
/* 불러오는 중 = 도는 마크 + 글자 */
.sd-loading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.sd-loading > .sd-orbit { color: var(--accent-ink); }
p.sd-loading, div.sd-loading { display: flex; width: 100%; padding: 24px 0; margin: 0; }
.balances > .sd-loading { padding: 8px 0; }
.sa-orbit .sd-orbit { color: var(--accent-ink); }
.sa-orbit:has(> .sd-orbit) { width: 56px; height: 56px; }
@media (prefers-reduced-motion: reduce) {
  /* 돌지 않고 고리가 차례로 옅어졌다 짙어진다(색 · 투명도만) */
  .is-orbit-spinning .orb-arc { animation: sd-orb-fade 1.4s ease-in-out infinite !important; animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
  .is-orbit-spinning .orb-arc--2 { animation-delay: 0.2s !important; }
  .is-orbit-spinning .orb-arc--3 { animation-delay: 0.4s !important; }
  .is-orbit-spinning .orb-star { animation: none !important; }
  .sd-orbit-btn:hover .orb-arc, .sd-orbit-btn:hover .orb-star { transform: none; }
}

/* ---- 버튼 글자 가운데(위아래 · 좌우) ---- */
:where(.btn-ghost, .btn-primary, .btn-danger, .btn-mini, .btn-icon, .ov-btn, .ov-seg-btn, .sa-btn, .cm-btn, .strategy-tab, .tm-stab, .tb-menu-btn, .dg-btn-gold, .theme-toggle) {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; line-height: 1.2; gap: 6px;
}
.btn-mini, .btn-ghost, .btn-primary, .ov-btn { justify-content: center; text-align: center; }
/* 내림 메뉴 · 목록처럼 줄로 읽는 것은 왼쪽 그대로 */
.tb-menu-pop > .btn-ghost, .tb-menu-pop > a.btn-ghost { justify-content: flex-start; text-align: left; }

/* ---- 한 줄에 놓인 칸은 같은 높이(32px) · 위아래 가운데 ---- */
.ov-seg { align-items: center; padding: 3px; min-height: var(--ctl-h); box-sizing: border-box; }
.ov-seg-btn { min-height: calc(var(--ctl-h) - 6px); }
.ov-date, .ov-select, .ov-btn { min-height: var(--ctl-h); box-sizing: border-box; }
.sa-btn, .cm-btn { min-height: var(--ctl-h); }
.sa-btn--lg { min-height: 46px; }
.cm-search, .sa-symswap input, .sa-head input.field-input { height: var(--ctl-h); min-height: var(--ctl-h); box-sizing: border-box; }
.sa-tabs .ov-seg-btn { min-height: calc(var(--ctl-h) + 2px); }
.sa-tabs.ov-seg { min-height: calc(var(--ctl-h) + 8px); }
/* 차트 머리: 제목 · 종목 · SPOT/FUTURES · 봉 간격을 한 가운데 줄에 */
body.tm .chart-panel .panel-collapse-header-left { align-items: center; }
body.tm .chart-panel .panel-collapse-header-left > * { margin-top: 0; margin-bottom: 0; align-self: center; }
body.tm .chart-panel .panel-collapse-header-left > .field-input { height: var(--ctl-h); min-height: var(--ctl-h); }
body.tm .chart-panel .panel-collapse-header-left > .strategy-tabs { min-height: var(--ctl-h); box-sizing: border-box; align-items: center; }
/* 슬롯 머리: 켜기 · 제목 · 종목 · 신호 분석 · 최적화 · 종목 추천값 · 상태 */
.auto-header-left { align-items: center; }
.auto-header-left > .field-input { height: var(--ctl-h); min-height: var(--ctl-h); box-sizing: border-box; }
.auto-header-left > .btn-ghost { min-height: var(--ctl-h); box-sizing: border-box; }
/* 카드 머리(제목 + 오른쪽 단추) 위아래 가운데 */
.ov-card-head, .dg-head, .sa-strat-head, .cm-head, .panel-collapse-header { align-items: center; }

/* =================================================================
   [2026-11-03 6차] 주인님 "글자 로고 왼쪽에 붙는 게 싫어"
   - 위 메뉴줄: 로고 자리는 왼쪽 그대로, 가장자리 여백 16 → 28px · 로고와 메뉴 사이 36px(붙어 보이지 않게)
   - 로그인 · 회원가입 카드: 로고를 가운데로 · 조금 크게 · 안내 글도 가운데
   ================================================================= */
.topbar, html[data-theme="light"] .topbar { padding-left: 28px; padding-right: 24px; }
.topbar .brand-name { margin-right: 36px; }
@media (max-width: 1100px) { .topbar .brand-name { margin-right: 20px; } }
@media (max-width: 820px) and (min-width: 641px) { .tm-nav { margin-left: -28px; margin-right: -24px; padding: 0 18px; } }
@media (max-width: 640px) {
  .topbar, html[data-theme="light"] .topbar { padding: 10px 20px 0; }
  .tm-nav { margin: 6px -20px 0; padding: 0 10px; }
  .topbar .brand-name { margin-right: 16px; }
}
.login-brand { justify-content: center; text-align: center; margin: 4px 0 10px; }
.login-brand .sd-wordmark { font-size: 26px; }
.login-sub { text-align: center; }
@media (max-width: 760px) { .login-brand .sd-wordmark { font-size: 22px; } }
.topbar .last-price, .topbar-right .last-price { white-space: nowrap; }
/* [2026-11-04] 로그인 · 가입: 글자 로고는 카드 가운데, 모드 표시(LIVE · PAPER · TESTNET)는 오른쪽 끝 · 위 메뉴줄 종목 이름은 없앰 */
.login-brand { position: relative; justify-content: center; }
.login-brand .login-brand-tag { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.cm-verified--demo { color: var(--text-muted); } /* [2026-11-04] 체험판 예시 글 - 서버 확인 표시 대신 */
/* [2026-11-04] 커뮤니티 글 종류: 왼쪽 세로 → 위 가로(제목 아래 한 줄 · 좁으면 옆으로 밀기) */
.cm-grid { grid-template-columns: minmax(0, 1fr) 300px; }
.cm-rail { position: static; flex-direction: row; align-items: center; gap: 6px; padding: 6px; margin: 0 0 var(--sp-gap, 12px); overflow-x: auto; scrollbar-width: none; }
.cm-rail::-webkit-scrollbar { display: none; }
.cm-rail hr { display: block; flex: none; width: 1px; height: 20px; margin: 0 4px; border: 0; background: var(--line); }
.cm-rail-btn { flex: none; min-height: 34px; padding: 0 14px; gap: 8px; white-space: nowrap; }
.cm-rail-btn small { margin-left: 2px; }
@media (max-width: 1200px) { .cm-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cm-rail { padding: 4px; } .cm-rail-btn { padding: 0 10px; } }
/* [2026-11-04] 거래 모드 표시: 글자 로고 바로 오른쪽 · 세로 가운데 · 메뉴와의 간격은 표시 뒤로 */
.topbar .brand-name { margin-right: 0; }
.topbar-left .brand-name + .env-badge { display: inline-flex; align-items: center; align-self: center; height: 20px; line-height: 1; margin: 0 36px 0 10px; padding: 0 6px; }
@media (max-width: 1100px) { .topbar-left .brand-name + .env-badge { margin-right: 20px; } }
@media (max-width: 640px) { .topbar-left .brand-name + .env-badge { margin-right: 12px; margin-left: 8px; } }
/* [2026-11-04] 내 전략 쉬는 시간 - 전략 생성 되돌리기 판 · 시그마 AI 내 전략 카드 */
.sa-rest { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-inner, 8px); background: var(--panel-alt); }
.sa-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 64px; align-items: end; padding-bottom: 14px; position: relative; }
.sa-hour { position: relative; height: 100%; display: flex; align-items: flex-end; border-radius: 3px; }
.sa-hour i { display: block; width: 100%; border-radius: 2px; background: var(--text-dim); }
.sa-hour.is-up i { background: var(--buy); } .sa-hour.is-down i { background: var(--sell); }
.sa-hour.is-rest { box-shadow: inset 0 0 0 1.5px var(--gold); }
.sa-hour small { position: absolute; left: 0; right: 0; bottom: -14px; text-align: center; font-size: 10px; color: var(--text-dim); }
.sa-rest-ack { margin-top: 2px; }
.dg-cs-rest { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-muted); }
.dg-cs-rest span { color: var(--text); font-weight: 600; } .dg-cs-rest small { color: var(--text-dim); }
.btn-mini.btn-danger-mini { color: var(--buy); border-color: var(--buy); } /* [2026-11-04] 회원 탈퇴 */
.login-legal { margin-top: 10px; font-size: 12px; color: var(--text-dim); } .login-legal a { color: var(--text-muted); text-decoration: none; } .login-legal a:hover { color: var(--text); } /* [2026-11-04] */

/* [2026-11-05] 텔레그램 채널 · 그룹 목록 */
.tg-channels{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.tg-channel{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:6px;background:var(--bg-2, rgba(255,255,255,.04))}
.tg-channel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* [2026-11-06 밤] 전략 생성 → 한 번에 비교(같은 종목 · 모든 전략 · 1년 되돌리기) - 곡선 색 8칸(어두운 바탕 · 밝은 바탕 각각 검사 · 9번째 색은 만들지 않음) */
:root { --cmp-1: #3987e5; --cmp-2: #d95926; --cmp-3: #199e70; --cmp-4: #c98500; --cmp-5: #d55181; --cmp-6: #008300; --cmp-7: #9085e9; --cmp-8: #e66767; }
html[data-theme="light"] { --cmp-1: #2a78d6; --cmp-2: #eb6834; --cmp-3: #1baf7a; --cmp-4: #eda100; --cmp-5: #e87ba4; --cmp-6: #008300; --cmp-7: #6250d6; --cmp-8: #e34948; }
.cmp-pane { display: flex; flex-direction: column; gap: 16px; }
.cmp-card { display: flex; flex-direction: column; gap: 12px; }
.cmp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cmp-ctl .field-input { width: auto; min-width: 110px; }
.cmp-heavy { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.cmp-prog { display: flex; flex-direction: column; gap: 6px; }
.cmp-bar { height: 6px; border-radius: 3px; background: var(--panel-alt); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; background: var(--accent, var(--gold)); transition: width var(--dur-2, 0.2s) var(--ease-out, ease-out); }
.cmp-log { margin: 0; max-height: 150px; overflow: auto; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--panel-alt); color: var(--text-muted); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.cmp-chart { position: relative; }
.cmp-svg { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--panel-alt); }
.cmp-grid { stroke: var(--line); stroke-width: 1; }
.cmp-zero { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 4 4; }
.cmp-ax { fill: var(--text-dim); font-size: 11px; }
.cmp-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cmp-cross { stroke: var(--text-dim); stroke-width: 1; }
.cmp-dot { stroke: var(--panel-alt); stroke-width: 2; }
.cmp-hit { fill: transparent; cursor: crosshair; }
.cmp-tip { position: absolute; top: 8px; z-index: 2; min-width: 170px; max-width: 280px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--panel); color: var(--text); font-size: 12px; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.cmp-tip > b { display: block; margin-bottom: 4px; color: var(--text-muted); font-weight: 600; }
.cmp-tip-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 6px; }
.cmp-tip-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--border-soft); background: transparent; flex: none; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.cmp-leg { display: inline-flex; align-items: center; gap: 6px; }
.cmp-sort { all: unset; cursor: pointer; color: inherit; font: inherit; white-space: nowrap; }
.cmp-sort:focus-visible { box-shadow: var(--ring); border-radius: 2px; }
.cmp-pick { width: 34px; }
.cmp-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cmp-table tr.cmp-mix td { background: var(--panel-alt); }
.sa-btn--sm { min-height: 28px; padding: 0 10px; font-size: 12px; }
@media (max-width: 720px) { .cmp-ctl .field-input { flex: 1 1 100%; } .cmp-tip { max-width: 70%; } }
/* [2026-11-07] 시그마 AI - 실거래 성적 · 같은 기간 되돌리기 비교 */
.dg-live .dg-scroll { overflow-x: auto; margin-top: 8px; }
.dg-live .dg-scroll table { min-width: 720px; }
.dg-live .dg-actions { flex-wrap: wrap; gap: 6px; }

/* [2026-11-08] 거래 분석(public/trade-insight.js) - 개선 진단 · 시간대 · 종목 · 청산 이유 · 거래 하나 차트 */
.ti-ana { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ti-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ti-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ti-muted { color: var(--text-muted); font-size: 12px; }
.ti-err { color: var(--sell); font-size: 12px; }
.ti-hints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ti-hint { background: var(--panel-alt); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.ti-hint.is-ok, .ti-hint.is-few { border-left-color: var(--border-soft); }
.ti-hint b { font-size: 13px; }
.ti-tag { align-self: flex-start; font-size: 11px; color: var(--text-muted); border: 1px solid var(--border-soft); border-radius: 999px; padding: 0 6px; }
.ti-ev { font-size: 12px; font-variant-numeric: tabular-nums; }
.ti-how { font-size: 12px; color: var(--text-muted); }
.ti-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.ti-row2 { display: grid; grid-template-columns: 6fr 7fr; gap: 8px; }
.ti-blocks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.ti-dow { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ti-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 34px; border-radius: 4px; background: var(--panel-alt); font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ti-cell::before { content: ""; position: absolute; inset: 0; border-radius: 4px; opacity: var(--a, 0); }
.ti-cell.is-up::before { background: var(--buy); }
.ti-cell.is-down::before { background: var(--sell); }
.ti-cell i, .ti-cell small { position: relative; font-style: normal; color: var(--text); }
.ti-cell small { font-size: 9px; color: var(--text); opacity: .85; }
.ti-cell.is-empty i { color: var(--text-dim); }
.ti-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.ti-tw { overflow-x: auto; }
.ti-table { width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.ti-table td.r, .ti-table th.r { text-align: right; }
.ti-more summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
.ti-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ti-tbtn { all: unset; cursor: pointer; display: block; padding: 4px 6px; border-radius: 4px; }
button.ti-tbtn:hover, button.ti-tbtn:focus-visible { background: var(--panel-alt); outline: 1px solid var(--gold-border); }
.ti-chart { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.ti-cv { width: 100%; display: block; }
.ti-legend { font-size: 11px; color: var(--text-muted); }
.ti-ptl { margin: 0; padding-left: 18px; font-size: 12px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 2px; }
.ti-trades { width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.ti-trades tr[data-on="1"] td { background: var(--gold-bg); }
.ti-trades tbody tr { cursor: pointer; }
.ti-trades tbody tr:focus-visible { outline: 1px solid var(--gold); }
.ti-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; font-size: 12px; }
@media (max-width: 640px) { .ti-row2 { grid-template-columns: 1fr; } .ti-cell { min-height: 30px; } .ti-hours { gap: 1px; } }
.dg-ana { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.dg-ana .ti-ana + .dg-card-head { margin-top: 8px; }
/* [2026-11-09] 실거래 되돌리기 - 전략 업데이트 구간(처음 · 1차 · 2차 …) */
.dg-era { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dg-era .dg-actions { flex-wrap: wrap; }
.dg-era-table td.dg-era-items { min-width: 180px; max-width: 360px; white-space: normal; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.dg-era-table tr[data-on="1"] td { background: var(--gold-bg); }
.dg-era-table tbody tr[tabindex] { cursor: pointer; }
.dg-era-table tbody tr[tabindex]:hover td, .dg-era-table tbody tr[tabindex]:focus-visible td { background: var(--gold-bg); }
@media (max-width: 640px) { .ti-hours { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; } }

/* [2026-11-08] 시각 세 곳(서울 · 시카고 · UTC) · 원화 - public/tz-fx.js */
.sd-clock3 { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-alt); }
.sd-tz-more { color: var(--text-muted); font-size: 0.92em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .sd-clock3 { font-size: 11px; white-space: normal; flex: 1 1 100%; } }

/* [2026-11-08] 시그널 페이지 - 시그마 AI 전략별 신호 · 시작 · 진입 · 익절 · 청산 + AI 코멘트(sigma-feed.js) */
.sf-root{display:flex;flex-direction:column;gap:12px;min-width:0}
.sf-bar,.sf-filters,.sf-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sf-chk,.sf-num{display:inline-flex;gap:4px;align-items:center;font-size:12px}
.sf-num input{width:64px}
.sf-h{font-size:13px;margin:0 0 6px}
.sf-scroll{overflow-x:auto}
.sf-table tr{cursor:pointer}.sf-table tr.is-sel td{background:rgba(240,185,11,.08)}
.sf-on{color:var(--up,#0ecb81);font-size:11px}.sf-off{color:var(--muted,#848e9c);font-size:11px}
.sf-chip{border:1px solid var(--line,#2b3139);background:transparent;color:inherit;border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer}
.sf-chip.is-on{border-color:var(--gold,#f0b90b);color:var(--gold,#f0b90b)}
.sf-chip span{opacity:.7}
.sf-list{display:flex;flex-direction:column;gap:8px}
.sf-card{border:1px solid var(--line,#2b3139);border-radius:8px;padding:8px 10px;min-width:0}
.sf-card.is-watch{border-style:dashed;opacity:.9}
.sf-card-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.sf-card-h time{margin-left:auto;color:var(--muted,#848e9c)}
.sf-kind{border-radius:4px;padding:1px 6px;font-size:11px;background:rgba(132,142,156,.2)}
.sf-kind.is-start,.sf-kind.is-entry{background:rgba(240,185,11,.18)}.sf-kind.is-tp{background:rgba(14,203,129,.18)}.sf-kind.is-exit{background:rgba(246,70,93,.15)}
.sf-md,.sf-sym{background:none;border:0;color:inherit;font-weight:600;cursor:pointer;padding:0}
.sf-sym{text-decoration:underline dotted}
.sf-watch,.sf-lane,.sf-n{color:var(--muted,#848e9c)}
.sf-text{margin:4px 0;font-size:12px;line-height:1.5;word-break:break-word}
.sf-ai{font-size:12px;line-height:1.5}.sf-ai.is-good b{color:var(--up,#0ecb81)}.sf-ai.is-bad b{color:var(--down,#f6465d)}.sf-ai.is-wait,.sf-ai.is-none{color:var(--muted,#848e9c)}
.sf-model{color:var(--muted,#848e9c)}

/* [2026-11-08] 상황판 전략별 성적 - 전략 칸 안에 종목별 · 시간대별 · 요일별 */
.ov-card--strat { grid-column: 1 / -1; }
/* [2026-11-09] 시그마 AI(큰 칸) 안에 전략 칸들 · 기타 전략은 맨 끝(점선) */
.ov-strat-top > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 14px; padding: 6px 2px 10px; }
.ov-strat-top > summary > b:first-child { font-size: 15px; }
.ov-strat-cnt { margin-left: auto; font-size: 12px; color: var(--muted, #848e9c); }
.ov-strat-in { padding-left: 12px; border-left: 2px solid var(--line, #2b3139); }
.ov-strat-cat--etc { border-style: dashed; }
.ov-strat-etc { margin: 6px 0 0; font-size: 12px; color: var(--muted, #848e9c); }
.ov-strat-cat { border: 1px solid var(--line, #2b3139); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.ov-strat-cat > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }
.ov-strat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 8px; min-width: 0; }
.ov-strat-sub { min-width: 0; overflow-x: auto; }
.ov-strat-sub h4 { margin: 0 0 4px; font-size: 12px; color: var(--muted, #848e9c); }

/* [2026-11-10] 시그마 AI · 금지 시간 설정(요일 · 4시간 칸 · 누르면 바로 차단 · 주인님 그림) */
.dg-blk .dg-muted { margin: 2px 0 10px; }
.dg-blk-mds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dg-blk-md { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.dg-blk-md.is-sel { background: var(--accent-sub); border-color: var(--accent-sub); color: #fff; }
.dg-blk-n { background: var(--buy); color: #fff; border-radius: 999px; font-size: 10px; line-height: 1; padding: 2px 5px; }
.dg-blk-days { display: flex; gap: 6px; margin-bottom: 12px; }
.dg-blk-day { position: relative; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; cursor: pointer; }
.dg-blk-day.is-sel { background: var(--accent-sub); border-color: var(--accent-sub); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.dg-blk-day.has-blk::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--buy); }
.dg-blk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1500px) { .dg-blk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dg-blk-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 92px; padding: 10px 6px; border-radius: 14px; border: 1px solid transparent; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); cursor: pointer; font-size: 12px; text-align: center; transition: background-color 120ms ease, transform 80ms ease; }
.dg-blk-cell:hover { background: color-mix(in srgb, var(--text) 16%, transparent); }
.dg-blk-cell:active { transform: scale(0.97); }
.dg-blk-cell b { font-size: 14px; font-variant-numeric: tabular-nums; }
.dg-blk-cell small { opacity: 0.85; font-size: 11px; }
.dg-blk-cell.is-now { border-color: var(--accent-sub); }
.dg-blk-cell.is-on { background: var(--buy); color: #fff; }
.dg-blk-cell.is-on:hover { background: color-mix(in srgb, var(--buy) 88%, #000); }
.dg-blk-ico { font-size: 20px; line-height: 1; }
.dg-blk-cell:focus-visible, .dg-blk-day:focus-visible, .dg-blk-md:focus-visible { outline: 2px solid var(--accent-sub); outline-offset: 2px; }
.dg-blk-foot { margin: 12px 0 0; font-size: 12px; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .dg-blk-cell { transition: none; } .dg-blk-cell:active { transform: none; } }