/* ===== WTS Design System v2 ===== */

/* Fonts */
@font-face { font-family: 'GmarketSans'; src: url('../fonts/GmarketSansTTFLight.ttf'); font-weight: 300; }
@font-face { font-family: 'GmarketSans'; src: url('../fonts/GmarketSansTTFMedium.ttf'); font-weight: 400; }
@font-face { font-family: 'GmarketSans'; src: url('../fonts/GmarketSansTTFBold.ttf'); font-weight: 700; }

/* ===== CSS Custom Properties — Light Theme ===== */
:root {
  /* Background */
  --bg-primary: #f8f9fc;
  --bg-secondary: #f0f2f7;
  --bg-panel: #ffffff;
  --bg-header: #ffffff;
  --bg-input: #f3f5fa;
  --bg-hover: #eceef5;
  --bg-orderbook: #f5f6fa;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;

  /* Text */
  --text-primary: #1a1f36;
  --text-secondary: #5a6275;
  --text-muted: #9ba3b5;

  /* Price */
  --price-up: #dc2626;
  --price-down: #2563eb;
  --price-flat: #6c757d;

  /* Orderbook depth */
  --depth-bid: rgba(37, 99, 235, 0.06);
  --depth-ask: rgba(220, 38, 38, 0.06);

  /* Buttons */
  --btn-buy: #dc2626;
  --btn-sell: #2563eb;
  --btn-neutral: #eceef5;
  --btn-text: #ffffff;

  /* Status */
  --status-pending: #f59e0b;
  --status-filled: #16a34a;
  --status-rejected: #dc2626;

  /* Order type colors */
  --type-buy: #dc2626;
  --type-sell: #2563eb;
  --type-entry: #16a34a;
  --type-close: #7c3aed;

  /* Border */
  --border: #dfe3ed;
  --border-light: #e8ecf5;

  /* Accent */
  --accent: #2563eb;
  --accent-hover: #1d4fd8;
  --focus-ring: rgba(37, 99, 235, 0.15);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Shadow */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --shadow-modal: 0 8px 32px rgba(0,0,0,0.12);

  /* Hoga column tints */
  --hoga-sell-bg: #f3fbff;
  --hoga-sell-limit: #dfefff;
  --hoga-sell-depth: #a5d2ff;
  --hoga-buy-bg: #ffe4e4;
  --hoga-buy-limit: #ffebed;
  --hoga-buy-depth: #ffbfc6;
  --hoga-active: #ffcd78;
  --hoga-price-up: #e12343;
  --hoga-price-down: #1261c4;
  --hoga-mark-high: #e31111;
  --hoga-mark-low: #0043ff;
  --hoga-badge-win: #e12343;
  --hoga-badge-loss: #002bff;

  /* Status / Loss */
  --loss: #e74c3c;
  --caution-border: #f5c6cb;
  --caution-text: #dc3545;
  --caution-bg: rgba(220, 53, 69, 0.04);
  --caution-title-bg: rgba(220, 53, 69, 0.08);
}

/* ===== Dark Theme — P2P Neutral Black ===== */
[data-theme="dark"] {
  --bg-primary: #050505;
  --bg-secondary: #0a0a0a;
  --bg-panel: #0a0a0a;
  --bg-header: #050505;
  --bg-input: #0f0f0f;
  --bg-hover: #171717;
  --bg-orderbook: #080808;
  --bg-elevated: #111111;
  --bg-card: #0a0a0a;

  --text-primary: #e5e5e5;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;

  --price-up: #f87171;
  --price-down: #60a5fa;
  --price-flat: #737373;

  --depth-bid: rgba(96, 165, 250, 0.08);
  --depth-ask: rgba(248, 113, 113, 0.08);

  --btn-buy: #dc2626;
  --btn-sell: #2563eb;
  --btn-neutral: #1a1a1a;

  --status-pending: #fbbf24;
  --status-filled: #4ade80;
  --status-rejected: #f87171;

  --type-buy: #f87171;
  --type-sell: #60a5fa;
  --type-entry: #4ade80;
  --type-close: #a78bfa;

  --border: #1a1a1a;
  --border-light: #141414;

  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --focus-ring: rgba(59, 130, 246, 0.25);

  --shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
  --shadow-modal: 0 8px 32px rgba(0,0,0,0.6);

  --hoga-sell-bg: #0d1b2a;
  --hoga-sell-limit: #0f2640;
  --hoga-sell-depth: #1a4a80;
  --hoga-buy-bg: #1f0a0a;
  --hoga-buy-limit: #2a0f0f;
  --hoga-buy-depth: #6b2020;
  --hoga-active: #6b5a1e;
  --hoga-price-up: #f87171;
  --hoga-price-down: #60a5fa;
  --hoga-mark-high: #f87171;
  --hoga-mark-low: #60a5fa;
  --hoga-badge-win: #f87171;
  --hoga-badge-loss: #60a5fa;

  --loss: #f87171;
  --caution-border: #4a1a1a;
  --caution-text: #f87171;
  --caution-bg: rgba(248, 113, 113, 0.06);
  --caution-title-bg: rgba(248, 113, 113, 0.1);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'GmarketSans', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow: hidden;
  word-break: keep-all;      /* 한글 단어 단위 줄바꿈 */
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ===== Layout Shell ===== */
#wts-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: relative;        /* 차트 overlay 기준점 */
  overflow: hidden;
}

/* Persistent chart overlay — iframe은 DOM 이동 시 리로드되므로 고정 위치 사용 */
#wts-chart-host {
  position: absolute;
  z-index: 5;
  display: none;
  pointer-events: auto;
  overflow: hidden;
}

/* ===== Header ===== */
.wts-header {
  height: 48px;
  min-height: 48px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  gap: 0;
}

.wts-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 clamp(112px, 14vw, 240px);
  min-width: 0;
  max-width: clamp(112px, 14vw, 240px);
  height: 36px;
  margin-right: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.wts-logo.has-image {
  width: var(--wts-logo-box-width, 122px);
  min-width: var(--wts-logo-box-width, 122px);
  max-width: var(--wts-logo-box-width, 122px);
  flex: 0 0 var(--wts-logo-box-width, 122px);
  margin-right: var(--wts-logo-gap, 20px);
}

.wts-logo.is-text-logo {
  flex: 0 1 clamp(112px, 14vw, 240px);
  min-width: 0;
  max-width: clamp(112px, 14vw, 240px);
}

.wts-logo-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--wts-logo-image-max-height, 30px);
  object-fit: contain;
  object-position: left center;
}

.wts-nav {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1;
}

.wts-nav-item {
  padding: 0 14px;
  height: 48px;
  line-height: 48px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
  white-space: nowrap;
  user-select: none;
}
.wts-nav-item:hover {
  color: var(--text-primary);
}
.wts-nav-item.active {
  color: var(--text-primary);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

/* Hamburger button (hidden on desktop) */
.wts-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 16px;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
}
.wts-hamburger:hover { background: var(--bg-hover); }

.wts-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

.wts-balance-display {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}
.wts-balance-display .amount {
  font-weight: 700;
  color: var(--text-primary);
}

.wts-theme-toggle,
.wts-sound-toggle,
.wts-mobile-symbol-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}
.wts-theme-toggle:hover,
.wts-sound-toggle:hover,
.wts-mobile-symbol-btn:hover {
  background: var(--bg-hover);
}
.wts-mobile-symbol-btn {
  font-weight: 600;
  white-space: nowrap;
}

.wts-logout-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.wts-logout-btn:hover {
  background: var(--bg-hover);
  color: var(--price-up);
}

/* ===== Main Content ===== */
#app-content {
  flex: 1;
  overflow: auto;
  background: var(--bg-secondary);
}

/* ===== Common Components ===== */

/* Input */
.wts-input {
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 13px;
  background: var(--bg-input);
  color: var(--text-primary);
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wts-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.wts-input::placeholder { color: var(--text-muted); }

/* Select */
.wts-select {
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 13px;
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.wts-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Buttons */
.btn-buy {
  background: var(--btn-buy);
  color: #fff;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  cursor: pointer;
  transition: filter 0.1s;
}
.btn-sell {
  background: var(--btn-sell);
  color: #fff;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  cursor: pointer;
  transition: filter 0.1s;
}
.btn-buy:hover, .btn-sell:hover { filter: brightness(1.1); }
.btn-buy:active, .btn-sell:active { filter: brightness(0.95); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.1s;
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-neutral {
  background: var(--btn-neutral);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-neutral:hover { background: var(--bg-hover); }

/* Tabs */
.wts-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.wts-tab {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  user-select: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: color 0.15s;
}
.wts-tab:hover { color: var(--text-primary); }
.wts-tab.active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* Sidebar sort header */
.wts-sort-head {
  cursor: pointer;
  user-select: none;
}
.wts-sort-head:hover {
  color: var(--text-primary);
}
.wts-sort-head.active {
  color: var(--text-primary);
  font-weight: 700;
}

/* Table */
.wts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wts-table th {
  background: var(--bg-secondary);
  padding: 8px 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 12px;
  white-space: nowrap;        /* 헤더 줄바꿈 방지 */
}
.wts-table th[data-sort-key] {
  cursor: pointer;
  user-select: none;
}
.wts-table th.sort-active {
  color: var(--accent);
}
.wts-table th:first-child,
.wts-table td:first-child { text-align: left; }
.wts-table td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border-light);
}
.wts-table tr:hover { background: var(--bg-hover); }

#pnl-table {
  min-width: 980px;
}
#pnl-table th,
#pnl-table td {
  font-variant-numeric: tabular-nums;
}
#pnl-table th:last-child,
#pnl-table td:last-child {
  min-width: 150px;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}

#ft-bottom-table th,
#ft-bottom-table td {
  font-variant-numeric: tabular-nums;
}
#ft-bottom-table .btn-neutral.btn-xs {
  min-width: 58px;
  white-space: nowrap;
}

/* Summary Card */
.summary-cards {
  display: flex;
  gap: 10px;
  padding: 16px;
}
.summary-card {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.summary-card .label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.summary-card .value {
  font-size: 18px;
  font-weight: 700;
}

/* Modal */
body.wts-modal-open {
  overflow: hidden;
}
.wts-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wts-modal-overlay.hidden { display: none; }
.wts-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 360px;
  max-width: 480px;
  box-shadow: var(--shadow-modal);
}
.wts-modal h3 {
  font-size: 16px;
  margin-bottom: 16px;
}
.wts-dialog-modal {
  max-width: 360px;
}
.wts-dialog-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.wts-dialog-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-radius: 4px;
  font-size: 13px;
}
.wts-dialog-label {
  color: var(--text-secondary);
}
.wts-dialog-value {
  font-weight: 600;
  text-align: right;
}
.wts-dialog-text {
  color: var(--text-primary);
  white-space: pre-line;
}

/* Desktop route modal */
.wts-route-modal-overlay {
  position: absolute;
  inset: 48px 0 0 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 40px;
  background: rgba(10, 15, 28, 0.28);
  backdrop-filter: blur(4px);
}
.wts-route-modal-overlay.hidden { display: none; }
.wts-route-modal {
  width: min(980px, calc(100vw - 120px));
  height: min(760px, calc(100vh - 112px));
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.wts-route-modal-overlay[data-route="funds"] .wts-route-modal {
  width: min(840px, calc(100vw - 120px));
}
.wts-route-modal-overlay[data-route="notice"] .wts-route-modal {
  width: min(1180px, calc(100vw - 120px));
}
.wts-route-modal-header {
  min-height: 58px;
  padding: 0 18px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.wts-route-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.wts-route-modal-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wts-route-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}
.wts-route-modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg-secondary);
}
.wts-route-modal-body > .wts-page {
  height: 100%;
  min-height: 0;
}
.wts-route-modal-body .wts-page-cs > div:first-child {
  max-width: none;
  border-left: 0;
  border-right: 0;
}
.wts-route-modal-overlay[data-route="cs"] .wts-route-modal-body {
  overflow: hidden;
}
.wts-route-modal-overlay[data-route="cs"] .wts-page-cs,
.wts-route-modal-overlay[data-route="cs"] .cs-shell {
  height: 100%;
}
.wts-route-modal-overlay[data-route="cs"] .wts-page-cs > .cs-shell {
  max-width: none;
  border-left: 0;
  border-right: 0;
}

/* ===== Orderbook ===== */
.ft-hoga-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.orderbook-row {
  display: flex;
  height: 28px;
  align-items: center;
  font-size: 13px;
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}
.orderbook-row:hover {
  background: var(--bg-hover);
}
.orderbook-depth {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.4;
  pointer-events: none;
}
.orderbook-price {
  flex: 0 0 40%;
  text-align: right;
  padding-right: 8px;
  font-weight: 500;
  z-index: 1;
}
.orderbook-qty {
  flex: 0 0 30%;
  text-align: right;
  padding-right: 8px;
  z-index: 1;
}
.orderbook-cnt {
  flex: 0 0 30%;
  text-align: right;
  padding-right: 8px;
  z-index: 1;
  color: var(--text-muted);
  font-size: 12px;
}
.orderbook-center {
  display: flex;
  align-items: center;
  height: 32px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ===== Stock Hoga (HTS-style unified ladder) ===== */
.st-hoga-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.st-hoga-scroll.is-fixed {
  overflow-y: hidden;
}
/* 통합 헤더 */
.st-hoga-header {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.st-hoga-head-cell {
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}
/* 블록 */
.st-hoga-block {
  display: flex;
  flex-direction: column;
}
.st-hoga-block-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
}
.st-hoga-qty-col,
.st-hoga-price-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* 사이드 카드 (시세/체결) */
.st-hoga-side-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--bg-panel);
}
.st-hoga-ask .st-hoga-side-card {
  border-left: 1px solid var(--border-light);
}
.st-hoga-bid .st-hoga-side-card {
  border-right: 1px solid var(--border-light);
}
/* 셀 공통 */
.st-hoga-cell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  height: 42px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  overflow: hidden;
}
/* 수량 셀 */
.st-hoga-qty-cell {
  justify-content: flex-end;
  padding: 0 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.st-hoga-qty-cell.ask {
  color: #0070f3;
}
.st-hoga-qty-cell.bid {
  background: var(--hoga-buy-bg);
  color: #e60039;
}
.st-hoga-qty-cell::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.st-hoga-qty-cell.ask::before {
  right: 0;
  width: var(--bar, 0%);
  background: linear-gradient(to left, var(--hoga-sell-depth), transparent);
}
.st-hoga-qty-cell.bid::before {
  left: 0;
  width: var(--bar, 0%);
  background: linear-gradient(to right, var(--hoga-buy-depth), transparent);
}
.st-hoga-qty-value {
  position: relative;
  z-index: 1;
}
/* 가격 셀 — 2줄 (가격 원 / 등락률) */
.st-hoga-price-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}
.st-hoga-price-cell.ask {
  background: var(--hoga-sell-limit, #dfefff);
}
.st-hoga-price-cell.bid {
  background: var(--hoga-buy-limit, #ffebed);
}
.st-hoga-price-main {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}
.st-hoga-price-change {
  font-size: 11px;
  line-height: 1.2;
  color: inherit;
}
.st-hoga-price-mark {
  font-size: 10px;
  font-weight: 700;
}
.st-hoga-price-mark.high { color: #e60039; }
.st-hoga-price-mark.low { color: #0070f3; }
.st-hoga-price-mark.open { color: var(--text-primary); }
/* 현재가 — 검정 테두리 박스 (HTS와 동일) */
.st-hoga-price-cell.is-current {
  outline: 2px solid #333;
  outline-offset: -2px;
  z-index: 1;
}
/* 등락 색상 */
.st-hoga-price-cell.price-up { color: #e60039; }
.st-hoga-price-cell.price-down { color: #0070f3; }
.st-hoga-price-cell.price-flat { color: var(--text-primary); }
.st-hoga-cell.is-empty .st-hoga-qty-value {
  color: var(--text-muted);
}

/* ===== 9-Column Hoga Table (Desktop-parity orderbook) ===== */
.ft-hoga-controls {
  display: flex;
  gap: 10px;
  padding: 4px 8px;
  font-size: 11px;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
  flex-wrap: wrap;
}
.ft-hoga-controls label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.ft-hoga-controls input[type="checkbox"] {
  margin: 0;
}

/* Market order / liquidation button bar */
.ft-hoga-market-bar {
  display: flex;
  gap: 2px;
  padding: 3px 4px;
}
.ft-hoga-btn-sell {
  flex: 1;
  background: var(--btn-sell);
  color: var(--btn-text);
  text-align: center;
  padding: 5px 2px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  user-select: none;
}
.ft-hoga-btn-buy {
  flex: 1;
  background: var(--btn-buy);
  color: var(--btn-text);
  text-align: center;
  padding: 5px 2px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  user-select: none;
}
.ft-hoga-btn-liq {
  flex: 1;
  background: var(--bg-elevated, #f5f5f5);
  color: var(--text-primary, #333);
  border: 1px solid var(--border, #ddd);
  text-align: center;
  padding: 5px 2px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  user-select: none;
}
.ft-hoga-btn-sell:hover,
.ft-hoga-btn-buy:hover,
.ft-hoga-btn-liq:hover {
  opacity: 0.85;
}
.ft-hoga-btn-liq.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* Hoga table wrapper (scrollable area) */
.ft-hoga-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.ft-hoga-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ft-hoga-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-panel);
}
.ft-hoga-table th {
  padding: 4px 2px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.ft-hoga-table td {
  padding: 1px 2px;
  height: 18px;
  text-align: center;
  font-size: 12px;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
}
.ft-hoga-table td + td {
  border-left: 1px solid var(--border-light);
}

/* Column tints — sell side (blue) */
.ft-hoga-table .hoga-col-mit-sell { background-color: var(--hoga-sell-bg); }
.ft-hoga-table .hoga-col-limit-sell { background-color: var(--hoga-sell-limit); }
/* Column tints — buy side (red) */
.ft-hoga-table .hoga-col-limit-buy { background-color: var(--hoga-buy-limit); }
.ft-hoga-table .hoga-col-mit-buy { background-color: var(--hoga-buy-bg); }
/* Price column — offer rows blue, bid rows red */
.ft-hoga-table tr[data-side="offer"] .hoga-col-price { background-color: var(--hoga-sell-limit); }
.ft-hoga-table tr[data-side="bid"] .hoga-col-price { background-color: var(--hoga-buy-limit); }
/* Current price highlight */
.ft-hoga-table td.hoga-active { background-color: var(--hoga-active) !important; }

/* Average price marker (HTS parity) */
.ft-hoga-table td.hoga-col-price.hoga-price-check::before {
  content: attr(data-price-marker);
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #111;
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.ft-hoga-table td.hoga-col-price.hoga-price-check.hoga-price-check-ohl::before {
  left: 14px;
}

/* Depth gradient bars */
.ft-hoga-table td.depth-sell {
  background: linear-gradient(to left, var(--hoga-sell-depth) var(--depth-pct, 0%), transparent var(--depth-pct, 0%)), var(--hoga-sell-limit);
}
.ft-hoga-table td.depth-buy {
  background: linear-gradient(to right, var(--hoga-buy-depth) var(--depth-pct, 0%), transparent var(--depth-pct, 0%)), var(--hoga-buy-limit);
}

/* Price cell text colors */
.ft-hoga-table .hoga-price-up { color: var(--hoga-price-up); }
.ft-hoga-table .hoga-price-down { color: var(--hoga-price-down); }
.ft-hoga-table .hoga-price-flat { color: var(--text-primary); }
.ft-hoga-table td.hoga-col-price {
  font-variant-numeric: tabular-nums;
}
/* Price change % pseudo-element */
.ft-hoga-table td.hoga-col-price[data-change] {
  position: relative;
  text-align: left;
  padding-left: 8px;
  padding-right: 4.6em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ft-hoga-table td.hoga-col-price.hoga-price-check[data-change] {
  padding-left: 18px;
}
.ft-hoga-table td.hoga-col-price.hoga-price-check.hoga-price-check-ohl[data-change] {
  padding-left: 32px;
}
.ft-hoga-table td.hoga-col-price[data-change]::after {
  content: attr(data-change);
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.66em;
  color: inherit;
  opacity: 0.8;
}

/* OHL markers (시/고/저) */
.ft-hoga-table .hoga-ohl-mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  font-weight: bold;
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
}
.ft-hoga-table .hoga-mark-open { background: var(--text-primary); }
.ft-hoga-table .hoga-mark-high { background: var(--hoga-mark-high); }
.ft-hoga-table .hoga-mark-low { background: var(--hoga-mark-low); }

/* Win/loss cut badges (익/손) */
.ft-hoga-table td.hoga-it-badge::after {
  content: "익";
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--hoga-badge-win);
  border-radius: 2px;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  font-weight: bold;
}
.ft-hoga-table td.hoga-son-badge::after {
  content: "손";
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--hoga-badge-loss);
  border-radius: 2px;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  font-weight: bold;
}

/* Footer sums */
.ft-hoga-footer {
  display: flex;
  border: 1px solid var(--border);
  background: var(--bg-panel);
}
.ft-hoga-footer > div {
  flex: 1;
  text-align: center;
  font-size: 11px;
  padding: 3px 2px;
  border-left: 1px solid var(--border-light);
}
.ft-hoga-footer > div:first-child {
  border-left: none;
}
.ft-hoga-footer > div:nth-child(5) {
  flex: 2;
}

/* Cancel buttons bar */
.ft-hoga-cancel-bar {
  display: flex;
  gap: 1px;
}
.ft-cancel-btn {
  flex: 1;
  text-align: center;
  padding: 4px 2px;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid var(--border, #ddd);
  background: var(--bg-elevated, #f5f5f5);
  color: var(--text-primary, #333);
  user-select: none;
}
.ft-cancel-btn:hover { background: var(--bg-hover, #eee); }
.ft-cancel-all { font-weight: 600; }

/* Order confirmation modal body */
.ft-order-confirm-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.ft-oc-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  font-size: 13px;
}
.ft-oc-label { color: var(--text-secondary); }
.ft-oc-value { font-weight: 600; }

/* Dark mode overrides for hoga (non-variable items only) */
[data-theme="dark"] .ft-cancel-btn { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .ft-hoga-btn-liq { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }

/* ===== Account Summary Panel (Stock page) ===== */
.st-account-summary {
  width: 15%;
  min-width: 110px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 8px 6px;
  gap: 2px;
  overflow-y: auto;
  background: var(--bg-panel);
}
.st-acct-item {
  display: flex;
  flex-direction: column;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border-light);
}
.st-acct-item:last-child { border-bottom: none; }
.st-acct-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  margin-bottom: 4px;
}
.st-acct-value {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-acct-value.pos { color: var(--price-up); }
.st-acct-value.neg { color: var(--price-down); }

/* ===== Sidebar Sub-tabs (전체/관심) ===== */
.wts-sidebar-subtabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.wts-subtab {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
  user-select: none;
}
.wts-subtab:hover { color: var(--text-primary); }
.wts-subtab.active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* ===== Sidebar Favorites Star ===== */
.symbol-fav {
  flex: 0 0 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
  line-height: 1;
}
.symbol-fav:hover { color: #f5c518; }
.symbol-fav.active { color: #f5c518; }

/* Adjust symbol row layout for star column */
.symbol-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.symbol-price { flex: 0 0 25%; text-align: right; }
.symbol-change { flex: 0 0 25%; text-align: right; }

/* Laptop-friendly heights: total must fit 768px viewport (minus 48px header).
   chart(28vh≈215) + symbolBar(40) + toggle(20) + mainPanel(min140) + bottomPanel(min160) ≈ 575px */
.ft-chart-panel,
.st-chart-panel {
  height: 28vh;
  min-height: 160px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.ft-main-panel {
  display: flex;
  flex: 1 1 0;
  min-height: 140px;
  overflow: hidden;
}
/* Order entry column — allow scroll when content overflows */
.ft-order-col {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.ft-bottom-panel {
  flex: 0 0 auto;
  min-height: 160px;
  max-height: 240px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.st-trade-panel {
  display: flex;
  flex: 1 1 0;
  min-height: 250px;
  overflow: hidden;
}
.st-order-entry {
  width: 35%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.st-bottom-panel {
  height: 165px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
#st-orderbook .orderbook-row {
  height: 26px;
}
#st-orderbook .orderbook-center {
  height: 30px;
}

@media (max-height: 820px) {
  .ft-chart-panel,
  .st-chart-panel {
    height: 36vh;
    min-height: 210px;
  }
  .ft-main-panel {
    min-height: 120px;
  }
  .ft-bottom-panel {
    min-height: 140px;
    max-height: 200px;
  }
  .st-order-entry {
    padding: 8px;
    gap: 6px;
  }
  .st-trade-panel {
    min-height: 230px;
  }
  .st-bottom-panel {
    height: 130px;
  }
  #st-orderbook .orderbook-row {
    height: 24px;
  }
  #st-orderbook .orderbook-center {
    height: 28px;
  }
}

/* ===== Symbol List (Sidebar) ===== */
.symbol-row {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}
.symbol-row:hover { background: var(--bg-hover); }
.symbol-row.selected { background: var(--bg-hover); font-weight: 600; }

/* ===== Small Button ===== */
.btn-xs {
  padding: 2px 8px !important;
  font-size: 11px !important;
  height: auto !important;
}
.btn-neutral.active {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

/* ===== Trading Price Big ===== */
.ft-price-big { font-size: 22px; font-weight: 700; }

/* Price color helpers */
.price-up { color: var(--price-up); }
.price-down { color: var(--price-down); }
.price-flat { color: var(--price-flat); }

/* Price flash animation */
@keyframes flash-up {
  0% { background: rgba(220, 38, 38, 0.2); }
  100% { background: transparent; }
}
@keyframes flash-down {
  0% { background: rgba(37, 99, 235, 0.2); }
  100% { background: transparent; }
}
@keyframes flash-up-dark {
  0% { background: rgba(248, 113, 113, 0.15); }
  100% { background: transparent; }
}
@keyframes flash-down-dark {
  0% { background: rgba(96, 165, 250, 0.15); }
  100% { background: transparent; }
}
.flash-up { animation: none; }
.flash-down { animation: none; }
[data-theme="dark"] .flash-up { animation: none; }
[data-theme="dark"] .flash-down { animation: none; }

/* Panel */
.wts-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Page container */
.wts-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Utility */
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.fw-bold { font-weight: 700; }
.fs-sm { font-size: 12px; }
.fs-lg { font-size: 18px; }
.fs-xl { font-size: 24px; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.hidden { display: none !important; }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.nowrap { white-space: nowrap; }
.desktop-only { display: initial; }
.mobile-only { display: none !important; }

/* Sidebar toggle FAB (hidden on desktop, shown on mobile) */
.wts-sidebar-toggle {
  display: none !important;
}

/* ===== Page Level Components ===== */

/* Page title */
.wts-page-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Card panel */
.wts-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Filter bar */
.wts-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wts-filter-bar .filter-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Form grid */
.wts-form-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 12px;
  font-size: 13px;
}
.wts-form-grid .form-label {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
}

/* Market tab toggle (compact) */
.wts-market-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: max-content;
}
.wts-market-toggle .wts-tab {
  min-width: 100px;
  text-align: center;
  border-bottom: none;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}
.wts-market-toggle .wts-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-bottom: none;
}

/* Symbol info bar */
.wts-symbol-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.wts-symbol-bar .symbol-title {
  font-size: 15px;
  font-weight: 700;
}
.wts-symbol-bar .symbol-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wts-symbol-bar .meta-label {
  font-size: 11px;
  color: var(--text-muted);
}
.wts-symbol-bar .meta-value {
  font-size: 12px;
}

/* Trading sidebar */
.wts-sidebar {
  width: 320px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
}
.wts-sidebar-search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wts-sidebar-search .wts-input {
  flex: 1 1 auto;
  min-width: 0;
}
.wts-sidebar-close {
  display: none;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1;
}

/* Page pagination */
.wts-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 8px 0;
}

/* Orderbook header */
.orderbook-header {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
}

/* Trading page left main area */
.wts-trade-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ===== Futures Order Entry Compact ===== */
.ft-order-entry .wts-input {
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
}
.ft-order-entry .btn-neutral {
  padding: 0 8px;
  height: 30px;
  font-size: 12px;
}
.ft-order-entry-horizontal {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ft-order-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ft-stop-panel {
  flex: 0 0 46%;
  min-width: 150px;
  border-right: 1px solid var(--border);
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ft-stop-panel .ft-stop-row {
  margin-bottom: 0 !important;
}

/* TP/SL Inline Bar (always visible) */
.ft-tpsl-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
}
.ft-tpsl-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ft-tpsl-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  min-width: 52px;
  cursor: pointer;
  white-space: nowrap;
}
.ft-tpsl-input {
  width: 64px !important;
  height: 26px !important;
  font-size: 12px !important;
  text-align: center;
}
.ft-tpsl-unit {
  font-size: 11px;
  color: var(--text-secondary);
}
.ft-tpsl-detail-btn {
  margin-left: auto;
  padding: 0 6px !important;
  min-width: 26px !important;
  height: 26px !important;
  font-size: 12px !important;
}

.ft-meta-panel {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.ft-meta-row {
  display: flex;
  gap: 8px;
}
.ft-meta-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ft-meta-item .label {
  color: var(--text-secondary);
  white-space: nowrap;
}
.ft-meta-item .value {
  margin-left: 8px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft-summary-card {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.ft-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.ft-summary-cell {
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  min-height: 44px;
}
.ft-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.1px;
}
.ft-summary-value {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 좁은 폭에서는 세로 레이아웃으로 폴백 */
@media (max-width: 1180px) {
  .ft-order-entry-horizontal {
    flex-direction: column;
    gap: 6px;
  }
  .ft-stop-panel {
    order: 2;
    flex: 0 0 auto;
    min-width: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    padding-right: 0;
    padding-top: 6px;
  }
  .ft-meta-item .value {
    max-width: 56%;
  }
  .ft-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== CS Chat ===== */
.wts-page-cs {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.cs-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.cs-header {
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overscroll-behavior: contain;
}
.cs-composer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
.cs-msg {
  display: flex;
  max-width: 70%;
}
.cs-msg-self {
  margin-left: auto;
}
.cs-msg-other {
  margin-right: auto;
}
.cs-bubble {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
  position: relative;
}
.cs-msg-self .cs-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cs-msg-other .cs-bubble {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border);
}
.cs-time {
  display: block;
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.6;
}

/* ===== Badge ===== */
.wts-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--price-up);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

/* ===== Stop popup modal ===== */
.wts-stop-modal {
  min-width: 400px;
}
.wts-stop-modal .stop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.wts-stop-modal .stop-row label {
  min-width: 50px;
  font-size: 13px;
  font-weight: 600;
}
.wts-stop-modal .stop-row input {
  flex: 1;
}

/* ===== All-prices table ===== */
.allprice-row {
  cursor: pointer;
}
.allprice-row:hover {
  background: var(--bg-hover);
}

/* ===== fitNumericFont ===== */
.fit-number {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

/* ===== Table Responsive Wrapper ===== */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== Chart Toggle (Sprint 3-1) ===== */
.wts-chart-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.wts-chart-toggle:hover { background: var(--bg-hover); }
.chart-toggle-label {
  display: none;  /* desktop: hidden — just show arrow */
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 4px;
}
.chart-toggle-icon {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.chart-collapsed {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-bottom: none !important;
  transition: height 0.25s ease;
}

/* ===== Toast Notifications (Sprint 4-1) ===== */
.wts-toast-container {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 420px;
  width: calc(100% - 32px);
}
.wts-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  pointer-events: auto;
  cursor: pointer;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.wts-toast.show { transform: translateY(0); opacity: 1; }
.wts-toast.hide { transform: translateY(-20px); opacity: 0; }
.wts-toast-icon { font-size: 16px; flex-shrink: 0; }
.wts-toast-msg { flex: 1; }
.wts-toast-success { background: #16a34a; color: #fff; }
.wts-toast-error { background: #dc2626; color: #fff; }
.wts-toast-info { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); }
.wts-toast-warning { background: #f59e0b; color: #fff; }

/* ===== Mobile Bottom Tab Bar (Sprint 2) — hidden on desktop ===== */
.wts-bottom-tabs { display: none; }

/* ===== Mobile Balance Bar (Sprint 4-2) — hidden on desktop ===== */
.wts-mobile-balance { display: none; }

/* ===== Bottom Sheet Modal (Sprint 5-1) ===== */
.wts-bottomsheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.wts-bottomsheet-overlay.active { opacity: 1; pointer-events: auto; }
.wts-bottomsheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-radius: 16px 16px 0 0;
  max-height: 70vh;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 2001;
  overflow-y: auto;
}
.wts-bottomsheet-overlay.active .wts-bottomsheet { transform: translateY(0); }
/* Bottom sheet SVG icons */
.bs-icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 12px;
  color: var(--text-secondary);
}
.wts-bottomsheet-handle {
  width: 36px;
  height: 4px;
  background: var(--text-muted);
  border-radius: 2px;
  margin: 10px auto;
}
.wts-bottomsheet-menu { padding: 8px 0 16px; }
.wts-bottomsheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.wts-bottomsheet-item:hover { background: var(--bg-hover); }
.wts-bottomsheet-item .bs-icon { font-size: 18px; width: 24px; text-align: center; }

/* ===== Loading Spinner (Sprint 4-3) ===== */
.wts-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
}
.wts-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wts-spin 0.6s linear infinite;
}
@keyframes wts-spin { to { transform: rotate(360deg); } }



/* ==========================================================
   Responsive Breakpoints
   ========================================================== */

/* Orderbook toggle button — hidden on desktop */
.ob-toggle-btn {
  display: none;
}

/* --- Sidebar overlay mode ≤ 1031px --- */
@media (max-width: 1031px) {
  #btn-mobile-symbol-search:not(.hidden) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .wts-sidebar {
    display: none;
  }

  .wts-sidebar.sidebar-open {
    display: flex;
    position: fixed;
    top: 48px;
    right: 0;
    bottom: 0;
    z-index: 2002;
    width: min(360px, 100vw);
    max-width: 100vw;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    background: var(--bg-panel);
    isolation: isolate;
    overflow: hidden;
  }

  .wts-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Tablet ≤ 768px --- */
@media (max-width: 768px) {
  .wts-header {
    padding: 0 12px;
    gap: 8px;
  }
  .wts-header-right {
    gap: 6px;
  }
  .wts-mobile-symbol-btn {
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1;
  }
  .wts-logout-btn.mobile-only {
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  .wts-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wts-nav {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    z-index: 99;
    box-shadow: var(--shadow-card);
  }
  .wts-nav.open {
    display: flex;
  }
  .wts-nav-item {
    height: 44px;
    line-height: 44px;
    padding: 0 20px;
    border-bottom: none;
    border-left: 3px solid transparent;
    font-size: 14px;
  }
  .wts-nav-item.active {
    border-bottom: none;
    border-left-color: var(--accent);
    background: var(--bg-hover);
  }
  .wts-balance-display {
    display: none;
  }
  .desktop-only { display: none !important; }
  .mobile-only { display: initial !important; }

  /* Summary cards: 2-column */
  .summary-cards {
    flex-wrap: wrap;
    padding: 12px;
    gap: 8px;
  }
  .summary-card {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* Modals */
  .wts-modal {
    min-width: 0;
    width: calc(100vw - 32px);
    max-width: 440px;
  }
  .wts-route-modal-overlay {
    display: none !important;
  }
  .wts-stop-modal {
    min-width: 0;
  }

  /* Settings 2-col → 1-col */
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  /* 모바일 스크롤: 페이지 높이 제한 해제 → #app-content가 스크롤 담당 */
  .wts-page:not(.wts-page-cs) {
    height: auto !important;
    min-height: 100%;
  }
  #app-content {
    -webkit-overflow-scrolling: touch;
  }

  /* Trading pages: hide sidebar, vertical stack */
  .wts-page-trading {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .fund-transfer-direction {
    max-width: none;
  }
  .fund-transfer-direction .wts-tab {
    padding: 10px 8px;
    font-size: 12px;
  }
  .fund-transfer-meta {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px 10px;
    font-size: 12px;
  }
  .fund-transfer-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .fund-transfer-input {
    grid-column: 1 / 2;
  }
  .fund-transfer-unit {
    grid-column: 2 / 3;
    justify-self: start;
  }
  .fund-transfer-submit {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
  }
  .wts-trade-top {
    flex-direction: column;
    min-height: 0;
    overflow: visible;
  }
  .wts-trade-chart-col,
  .wts-trade-side-col {
    width: 100% !important;
    max-width: none;
    min-width: 0;
    border-right: none;
  }
  .wts-trade-chart-col {
    border-bottom: 1px solid var(--border);
  }
  .wts-trade-chart-col .ft-chart-panel,
  .wts-trade-chart-col .st-chart-panel {
    height: clamp(428px, 65.25vh, 630px);
    min-height: 428px;
    border-bottom: 1px solid var(--border);
  }
  .wts-sidebar {
    display: none;
  }
  .wts-sidebar.sidebar-open {
    display: flex;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: calc(64px + 30px + env(safe-area-inset-bottom, 0px));
    z-index: 2002;
    width: auto;
    max-width: none;
    border-left: none;
    border-top: 1px solid var(--border);
    box-shadow: none;
    background: var(--bg-panel);
    isolation: isolate;
    overflow: hidden;
  }
  .wts-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .wts-trade-main {
    min-width: 0 !important;
    flex: 0 0 auto !important;   /* 내용물 크기로 → #app-content가 스크롤 */
  }

  /* Trading panels: vertical stack on mobile */
  .ft-main-panel,
  .st-trade-panel {
    flex-direction: column;
    min-height: auto;
    flex: 0 0 auto;
  }
  .ft-main-panel > div,
  .st-trade-panel > div {
    width: 100% !important;
    border-right: none !important;
  }
  /* Account summary: horizontal strip on mobile, placed ABOVE orderbook */
  .st-account-summary {
    order: -1;
    width: 100% !important;
    min-width: 0;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0;
    padding: 6px 8px;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .st-acct-item {
    flex: 1 1 calc(50% - 8px);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    border-bottom: none;
    min-width: 0;
  }
  .st-acct-label { margin-bottom: 0; margin-right: 6px; }
  .ft-orderbook-col,
  .st-orderbook-col {
    min-height: auto;
    overflow: visible !important;  /* 인라인 overflow:hidden 해제 */
    border-bottom: 1px solid var(--border);
    display: none !important;      /* 모바일: 호가 기본 접힘 */
  }
  .ft-orderbook-col.ob-expanded,
  .st-orderbook-col.ob-expanded {
    display: flex !important;      /* 모바일: 호가 펼침 */
  }

  /* Orderbook toggle button — shown on mobile */
  .ob-toggle-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
  }
  .ob-toggle-btn:active {
    background: var(--bg-hover);
  }

  /* 모바일: 호가 컨트롤 터치 타겟 확대 (최소 44px) */
  .ft-hoga-controls {
    padding: 6px 8px;
    gap: 12px;
  }
  .ft-hoga-controls label {
    font-size: 13px;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ft-hoga-controls input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  /* 모바일: 필터바 버튼 높이 통일 (32px) */
  .wts-filter-bar .btn-neutral,
  .wts-filter-bar .btn-primary {
    height: 36px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }
  .wts-filter-bar .wts-input,
  .wts-filter-bar .wts-select {
    height: 36px !important;
    font-size: 13px !important;
  }

  /* 모바일: 호가 테이블 MIT열 숨김 (7열로 축소) */
  .ft-hoga-table .hoga-col-mit-sell,
  .ft-hoga-table .hoga-col-mit-buy,
  .ft-hoga-table .hoga-th-mit-sell,
  .ft-hoga-table .hoga-th-mit-buy { display: none; }
  .ft-hoga-cancel-bar > .ft-cancel-mit { display: none; }
  .ft-hoga-footer > .ft-hf-mit-sell,
  .ft-hoga-footer > .ft-hf-mit-buy { display: none; }
  /* 모바일: 호가 확장 시 높이 제한 + 터치 스크롤 */
  .ft-hoga-wrapper {
    min-height: 0;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #st-orderbook {
    max-height: 50vh;
    flex: 0 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #st-orderbook .st-hoga-ask .st-hoga-block-body {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  }
  #st-orderbook .st-hoga-bid .st-hoga-block-body {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  }
  #st-orderbook .st-hoga-side-card {
    display: flex;
  }
  .ft-order-col,
  .st-order-entry {
    width: 100% !important;
    overflow: visible !important;  /* 인라인 overflow:hidden 해제 */
  }
  .ft-bottom-panel,
  .st-bottom-panel {
    height: auto;
    min-height: 180px;
    flex: 0 0 auto;
  }

  /* Symbol info bar responsive */
  .wts-symbol-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }

  /* Non-trading page padding */
  .wts-page:not(.wts-page-trading) {
    padding: 12px !important;
  }

  /* Form grid responsive */
  .wts-form-grid {
    grid-template-columns: 90px 1fr;
    gap: 6px 10px;
  }

  /* ===== Mobile Bottom Tab Bar (Sprint 2) ===== */
  .wts-bottom-tabs {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .wts-bottom-tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
    background: none;
    border: none;
    padding: 5px 0 7px;
    font-family: inherit;
  }
  .wts-bottom-tab-item .tab-icon { font-size: 22px; line-height: 1; }
  .wts-bottom-tab-item .tab-icon-svg { width: 24px; height: 24px; }
  .wts-bottom-tab-item.active { color: var(--accent); font-weight: 600; }
  .wts-bottom-tab-item.active .tab-icon-svg { stroke-width: 2.2; }

  /* ===== Mobile Balance Bar (Sprint 4-2) ===== */
  .wts-mobile-balance {
    display: flex !important;
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    height: 36px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    z-index: 99;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
  }
  .wts-mobile-balance .mb-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
  }
  .wts-mobile-balance .mb-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  .wts-mobile-balance .mb-value.price-up { color: var(--price-up); }
  .wts-mobile-balance .mb-value.price-down { color: var(--price-down); }

  body.wts-mobile-sidebar-open #wts-chart-host {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.wts-mobile-sidebar-open .wts-trade-main {
    visibility: hidden;
  }
  body.wts-mobile-sidebar-open .wts-sidebar.sidebar-open {
    visibility: visible;
  }

  /* Content: extra bottom padding for balance bar + tab bar */
  #app-content { padding-bottom: calc(64px + 30px + env(safe-area-inset-bottom, 0px)); }

  /* Hide hamburger on mobile (replaced by bottom tabs) */
  .wts-hamburger { display: none !important; }

  /* Hide top nav on mobile (bottom tabs replace it) */
  .wts-nav { display: none !important; }
  .wts-nav.open { display: none !important; }

  /* ===== Mobile Order Form Optimization (Sprint 3-2) ===== */
  .st-order-entry {
    padding: 8px !important;
    gap: 8px !important;
  }
  .st-order-entry .btn-buy,
  .st-order-entry .btn-sell {
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
  }

  /* ===== Sprint B Mobile: Stock Trading Components ===== */

  /* B5: Hoga info & recent trades — mobile also keeps desktop-parity content */
  .st-hoga-info {
    display: flex;
    padding: 6px 10px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-panel);
  }
  .st-recent-trades {
    display: flex;
    flex-direction: column;
    padding: 4px 10px 6px;
    border-top: 1px solid var(--border-light);
    max-height: none;
    overflow: hidden;
    justify-content: flex-start;
  }

  /* B2: Pct buttons — larger touch targets */
  .st-pct-buttons {
    gap: 6px;
    margin-top: 8px;
  }
  .st-pct-buttons .btn-xs {
    height: 36px !important;
    font-size: 12px !important;
    border-radius: var(--radius-sm);
  }

  /* B1: Leverage slider — larger thumb for touch interaction */
  .st-leverage-slider {
    padding: 8px 0 24px;
  }
  .st-lev-range {
    height: 6px;
  }
  .st-lev-range::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
  }
  .st-lev-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
  }
  .st-lev-ticks {
    margin-top: 8px;
  }
  .st-lev-tick {
    font-size: 12px;
    padding: 6px 8px;
    min-width: 32px;
    text-align: center;
  }

  /* B4: Cost preview — larger font for readability */
  .st-cost-preview {
    padding: 10px 12px;
  }
  .st-cp-row {
    font-size: 12px;
  }

  /* A5: Qty presets — larger touch targets */
  .ft-qty-presets .btn-xs {
    height: 34px !important;
    font-size: 12px !important;
    min-width: 40px;
  }

  /* B7: "현재가" button — override inline font-size on mobile */
  #st-last-price-btn {
    font-size: 13px !important;
    padding: 0 12px !important;
    min-height: 38px;
  }

  /* Futures buy/sell buttons — override inline height/font on mobile */
  .ft-order-entry .btn-buy,
  .ft-order-entry .btn-sell {
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
  }

  /* Futures 청산/초기화 buttons — override inline sizes */
  .ft-order-entry [data-order-liq],
  .ft-order-entry [data-qty-reset] {
    height: 40px !important;
    font-size: 13px !important;
  }

  /* Reject modal — responsive sizing */
  .wts-reject-modal {
    width: calc(100vw - 32px) !important;
    max-width: 360px !important;
  }

  /* Bottom sheet safe area */
  .wts-bottomsheet-menu {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

}

/* --- Mobile ≤ 480px --- */
@media (max-width: 480px) {
  html, body {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .wts-header {
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
  }
  .wts-nav {
    top: 44px;
  }
  .wts-nav-item {
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    padding: 0 16px;
  }
  .wts-logo {
    flex: 0 1 clamp(74px, 20vw, 132px);
    min-width: 0;
    max-width: clamp(74px, 20vw, 132px);
    height: 28px;
    margin-right: 10px;
    font-size: 14px;
  }
  .wts-logo.has-image {
    width: var(--wts-logo-mobile-width, 92px);
    min-width: var(--wts-logo-mobile-width, 92px);
    max-width: var(--wts-logo-mobile-width, 92px);
    flex-basis: var(--wts-logo-mobile-width, 92px);
    margin-right: var(--wts-logo-mobile-gap, 12px);
  }
  .wts-logo-image {
    max-height: var(--wts-logo-mobile-max-height, 24px);
  }
  .wts-input {
    height: 44px;
    font-size: 16px !important; /* iOS 줌 방지 — 인라인 font-size override */
    border-radius: var(--radius-sm);
  }
  .wts-select {
    height: 44px;
    font-size: 16px !important;
  }
  .btn-buy, .btn-sell {
    height: 48px;
    font-size: 16px;
    border-radius: var(--radius-md);
  }
  .wts-modal {
    width: calc(100vw - 24px);
    padding: 20px;
    border-radius: var(--radius-md);
  }

  /* Tabs scrollable */
  .wts-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wts-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 14px;
  }
  .fund-transfer-direction .wts-tab {
    white-space: normal;
    font-size: 11px;
    padding: 10px 6px;
  }
  .funds-card {
    flex: 0 0 auto !important;
    overflow: visible;
  }
  .fund-hist-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }
  .fund-transfer-meta {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  /* Trading pages: compact */
  .wts-trade-chart-col .ft-chart-panel,
  .wts-trade-chart-col .st-chart-panel {
    height: clamp(473px, 69.75vh, 675px);
    min-height: 473px;
  }

  /* Chart toggle: show "차트" label on mobile */
  .wts-chart-toggle {
    height: 32px;
    gap: 4px;
  }
  .chart-toggle-label {
    display: inline;
    font-size: 13px;
  }

  /* Symbol bar compact */
  .wts-symbol-bar {
    padding: 6px 12px;
    gap: 6px;
  }
  .wts-symbol-bar .symbol-title {
    font-size: 14px;
  }
  .ft-price-big {
    font-size: 18px !important;
  }

  /* 필터바 반응형: 세로 wrap + date input 크기 조정 */
  .wts-filter-bar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .wts-filter-bar input[type="date"] {
    width: 100% !important;
    max-width: calc(50vw - 40px);
    min-width: 0 !important;
  }

  /* 선물 요약 그리드: 3열 → 2열 */
  .ft-summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* CS 채팅 border 제거 */
  .wts-page-cs > div:first-child {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* ===== 테이블 모바일 UX ===== */

  /* 테이블 셀: nowrap + 수평 스크롤로 한글 깨짐 방지 */
  .wts-table td {
    white-space: nowrap;
  }
  .wts-table th,
  .wts-table td {
    padding: 6px 8px;
  }

  /* 시세 테이블: 불필요 컬럼 숨김 (전일대비, 거래량, 통화) → 종목명+현재가+등락률 */
  #mkt-table th:nth-child(3),
  #mkt-table td:nth-child(3),
  #mkt-table th:nth-child(5),
  #mkt-table td:nth-child(5),
  #mkt-table th:nth-child(6),
  #mkt-table td:nth-child(6) {
    display: none;
  }

  /* 공지 테이블: 모바일에서 일자+제목만 표시 (시간,공지구분,시장구분 숨김) */
  #notice-table th:nth-child(2),
  #notice-table td:nth-child(2),
  #notice-table th:nth-child(3),
  #notice-table td:nth-child(3),
  #notice-table th:nth-child(4),
  #notice-table td:nth-child(4) {
    display: none;
  }

  /* 터치 타겟 최소 44px 확보 */
  .ft-order-entry .btn-neutral,
  .st-order-entry .btn-neutral {
    min-width: 44px;
    min-height: 38px;
  }

  /* ===== Sprint B Mobile (480px): Stock Components ===== */

  /* B2: Pct buttons — 480px sizing */
  .st-pct-buttons .btn-xs {
    height: 40px !important;
    font-size: 13px !important;
  }

  /* B1: Leverage slider — even larger thumb on small screens */
  .st-lev-range::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
  }
  .st-lev-range::-moz-range-thumb {
    width: 30px;
    height: 30px;
  }
  .st-lev-tick {
    font-size: 13px;
    padding: 8px 6px;
  }

  /* B4: Cost preview — iOS zoom prevention */
  .st-cp-row {
    font-size: 13px;
  }

  /* A5: Qty presets — 480px sizing */
  .ft-qty-presets .btn-xs {
    height: 38px !important;
    font-size: 13px !important;
  }

  /* B3: Quick add buttons — larger for small screens */
  .st-order-entry [data-qty-add] {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  /* Toast: 480px에서 상단 여백 축소 */
  .wts-toast-container { top: 50px; }

  /* 모바일 밸런스 바: 텍스트 축소 */
  .wts-mobile-balance {
    height: 34px;
    font-size: 11px;
    gap: 12px;
  }
  .wts-mobile-balance .mb-label { font-size: 10px; }
  .wts-mobile-balance .mb-value { font-size: 13px; }

  /* 하단 탭 아이콘 크기 축소 */
  .wts-bottom-tab-item .tab-icon { font-size: 20px; }
  .wts-bottom-tab-item .tab-icon-svg { width: 22px; height: 22px; }
  .wts-bottom-tab-item { font-size: 10px; gap: 3px; }
}

/* --- Safe area (notch devices) --- */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 480px) {
    .wts-header {
      padding-top: env(safe-area-inset-top);
      height: calc(44px + env(safe-area-inset-top));
      min-height: calc(44px + env(safe-area-inset-top));
    }
  }
}

/* ===== Qty Presets ===== */
.ft-qty-presets {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ft-qty-presets .btn-xs {
  min-width: 36px;
  font-size: 11px;
  padding: 2px 6px;
  height: 26px;
}

/* ===== Reject Modal ===== */
.wts-reject-modal {
  border: 2px solid var(--loss, #e74c3c);
}
.wts-reject-icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 28px;
  font-weight: 700;
  border-radius: 50%;
  background: rgba(231, 76, 60, 0.15);
  color: var(--loss, #e74c3c);
  margin: 0 auto 12px;
}

/* ===== B2: Stock Pct Buttons ===== */
.st-pct-buttons {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.st-pct-buttons .btn-xs {
  flex: 1;
  font-size: 10px;
  padding: 2px 0;
  height: 24px;
  min-width: 0;
}

/* ===== B1: Leverage Slider ===== */
.st-leverage-slider {
  position: relative;
  padding: 4px 0 20px;
}
.st-lev-range {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.st-lev-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #3861fb);
  border: 2px solid var(--bg-panel, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
}
.st-lev-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #3861fb);
  border: 2px solid var(--bg-panel, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
}
.st-lev-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.st-lev-tick {
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.st-lev-tick:hover {
  color: var(--text-primary);
}
.st-lev-tick.active {
  color: var(--accent, #3861fb);
  font-weight: 700;
  background: rgba(56, 97, 251, 0.1);
}

/* ===== B4: Cost Preview ===== */
.st-cost-preview {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-panel);
  border-radius: 6px;
  border: 1px solid var(--border-light);
}
.st-cp-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.st-cp-row span:last-child {
  font-weight: 600;
  color: var(--text-primary);
}

/* ===== B5: Hoga Info Panel ===== */
.st-hoga-info {
  padding: 6px 10px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-panel);
}
.st-hi-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  line-height: 1.7;
}
.st-hi-label {
  color: var(--text-muted);
  flex: 0 0 40%;
}
.st-hi-value {
  text-align: right;
  flex: 1;
  color: var(--text-primary);
}
.st-recent-trades {
  padding: 4px 10px 6px;
  border-top: 1px solid var(--border-light);
  max-height: none;
  overflow: hidden;
  justify-content: flex-start;
}

/* ===== Notice Accordion ===== */
.notice-row:hover {
  background: var(--bg-hover) !important;
}
.notice-content-row td {
  border-top: none !important;
}

/* ===== Funds Caution Notice ===== */
.funds-caution {
  border: 1px solid var(--caution-border);
  border-radius: 6px;
  background: var(--caution-bg);
  margin-bottom: 16px;
  overflow: hidden;
}
.funds-caution-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--caution-text);
  background: var(--caution-title-bg);
  border-bottom: 1px solid var(--caution-border);
}
.funds-caution-title::before {
  content: '⚠';
  font-size: 14px;
}
.funds-caution-body {
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.funds-card {
  overflow-y: auto;
  overflow-x: hidden;
}
.funds-content {
  width: 100%;
  max-width: 600px;
}
.funds-content.funds-content--wide {
  max-width: none;
}
.fund-hist-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.fund-hist-table-wrap {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.fund-hist-table {
  width: 100%;
  min-width: 720px;
}
.fund-hist-table th,
.fund-hist-table td {
  vertical-align: middle;
}
.fund-hist-table th:nth-child(1),
.fund-hist-table td:nth-child(1),
.fund-hist-table th:nth-child(2),
.fund-hist-table td:nth-child(2),
.fund-hist-table th:nth-child(4),
.fund-hist-table td:nth-child(4) {
  text-align: left;
}
.fund-hist-table td:nth-child(4) {
  font-size: 12px;
}
.fund-hist-pagination {
  flex-wrap: wrap;
}

@media (min-width: 769px) {
  .funds-content.funds-content--wide {
    min-width: 0;
  }
  .fund-hist-table-wrap {
    overflow-x: hidden;
  }
  .fund-hist-table {
    min-width: 0;
    table-layout: fixed;
  }
  .fund-hist-table th,
  .fund-hist-table td {
    padding-left: 6px;
    padding-right: 6px;
  }
  .fund-hist-table th:nth-child(1),
  .fund-hist-table td:nth-child(1) {
    width: 29%;
  }
  .fund-hist-table th:nth-child(2),
  .fund-hist-table td:nth-child(2) {
    width: 23%;
    white-space: normal;
    word-break: keep-all;
  }
  .fund-hist-table th:nth-child(3),
  .fund-hist-table td:nth-child(3) {
    width: 12%;
  }
  .fund-hist-table th:nth-child(4),
  .fund-hist-table td:nth-child(4) {
    width: 14%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .fund-hist-table th:nth-child(5),
  .fund-hist-table td:nth-child(5) {
    width: 8%;
    white-space: nowrap;
  }
  .fund-hist-table th:nth-child(6),
  .fund-hist-table td:nth-child(6) {
    width: 14%;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .fund-hist-table {
    min-width: 720px;
    table-layout: auto;
  }
}

.fund-transfer-shell {
  width: 100%;
  max-width: 600px;
  min-width: 0;
}
.fund-transfer-direction {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 460px;
  margin-bottom: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.fund-transfer-direction .wts-tab {
  min-width: 0;
  white-space: normal;
  word-break: keep-all;
  text-align: center;
  line-height: 1.3;
  padding: 10px 12px;
}
.fund-transfer-title {
  font-size: 15px;
  margin-bottom: 16px;
}
.fund-transfer-meta {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 8px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}
.fund-transfer-label {
  color: var(--text-secondary);
}
.fund-transfer-form {
  display: grid;
  grid-template-columns: minmax(0, 220px) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.fund-transfer-input {
  width: 100%;
  min-width: 0;
}
.fund-transfer-unit {
  font-size: 13px;
}
.fund-transfer-submit {
  white-space: nowrap;
}
.fund-transfer-quick-wrap {
  margin-top: 16px;
}
.fund-transfer-quick-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.fund-transfer-quick-btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* ===== Inline → Class Migration ===== */

/* Trading page: row layout on desktop */
.wts-page-trading {
  flex-direction: row;
  height: 100%;
}
.wts-trade-chart-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wts-trade-chart-stack > :first-child {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  width: 100%;
}
.wts-trade-chart-stack > :first-child > .ft-chart-panel,
.wts-trade-chart-stack > :first-child > .st-chart-panel {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

@media (min-width: 1600px) {
  .wts-page-trading {
    overflow: hidden;
    align-items: stretch;
  }
  .wts-trade-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 18vw, 380px) clamp(320px, 20vw, 430px);
    grid-template-rows: auto minmax(0, 1fr) clamp(300px, 29vh, 360px);
    min-height: 0;
    overflow: hidden;
    background: var(--bg-panel);
  }
  .wts-trade-main:has(.chart-collapsed) {
    grid-template-rows: auto auto clamp(300px, 29vh, 360px);
  }
  .wts-trade-main > .wts-symbol-bar {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }
  .wts-trade-chart-stack {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-panel);
    overflow: hidden;
  }
  .wts-trade-chart-stack .ft-chart-panel,
  .wts-trade-chart-stack .st-chart-panel {
    height: 100%;
    min-height: 360px;
    border-bottom: none;
  }
  .ft-main-panel,
  .st-trade-panel {
    grid-column: 2 / 4;
    grid-row: 2;
    display: grid;
    min-height: 0;
    background: var(--bg-panel);
    overflow: hidden;
  }
  .ft-main-panel > .ob-toggle-btn,
  .st-trade-panel > .ob-toggle-btn {
    display: none;
  }
  .ft-main-panel > .ft-orderbook-col,
  .st-trade-panel > .st-orderbook-col {
    width: auto;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: none;
    overflow: hidden;
    display: flex;
    background: var(--bg-panel);
  }
  .ft-main-panel {
    grid-template-columns: minmax(320px, 1.08fr) minmax(300px, 0.92fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .ft-main-panel > .ft-orderbook-col {
    grid-column: 1;
    grid-row: 1;
  }
  .ft-main-panel > .ft-order-entry.ft-order-col {
    grid-column: 2;
    grid-row: 1;
  }
  .st-trade-panel {
    grid-template-columns: minmax(320px, 1.08fr) minmax(300px, 0.92fr);
    grid-template-rows: minmax(120px, auto) minmax(0, 1fr);
  }
  .st-trade-panel > .st-orderbook-col {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .wts-trade-main > .ft-bottom-panel,
  .wts-trade-main > .st-bottom-panel {
    grid-column: 1 / -1;
    grid-row: 3;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: clamp(300px, 29vh, 360px);
    max-height: clamp(300px, 29vh, 360px);
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
  }
  .ft-main-panel > .ft-order-entry.ft-order-col,
  .st-trade-panel > .st-order-entry {
    width: auto;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--border);
    background: var(--bg-panel);
  }
  .ft-main-panel > .ft-order-entry.ft-order-col {
    height: auto;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  .ft-order-entry-horizontal {
    flex-direction: column;
    gap: 8px;
  }
  .ft-stop-panel {
    flex: 0 0 auto;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 8px;
  }
  .ft-order-main {
    flex: 1 1 auto;
    min-height: 0;
  }
  .st-trade-panel > .st-order-entry {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    overflow: hidden;
  }
  .st-trade-panel > .st-account-summary {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--border);
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    padding: 10px;
    overflow: auto;
    background: var(--bg-panel);
  }
  .st-acct-item {
    flex: 1 1 50%;
    min-width: 0;
    padding: 8px 6px;
  }
  .st-acct-label {
    font-size: 11px;
    margin-bottom: 4px;
  }
  .st-acct-value {
    font-size: 13px;
  }
  .ft-main-panel > .ft-orderbook-col .ft-hoga-wrapper,
  .st-trade-panel > .st-orderbook-col > #st-orderbook {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  .wts-sidebar {
    flex: 0 0 300px;
    min-width: 300px;
  }
}

@media (min-width: 1600px) and (max-height: 980px) {
  .wts-trade-main {
    grid-template-rows: auto minmax(0, 1fr) clamp(240px, 24vh, 280px);
  }
  .wts-trade-main:has(.chart-collapsed) {
    grid-template-rows: auto auto clamp(240px, 24vh, 280px);
  }
  .wts-trade-main > .ft-bottom-panel,
  .wts-trade-main > .st-bottom-panel {
    height: clamp(240px, 24vh, 280px);
    max-height: clamp(240px, 24vh, 280px);
  }
}

@media (min-width: 1600px) and (max-height: 900px) {
  .wts-trade-main {
    grid-template-rows: auto minmax(0, 1fr) clamp(190px, 20vh, 230px);
  }
  .wts-trade-main:has(.chart-collapsed) {
    grid-template-rows: auto auto clamp(190px, 20vh, 230px);
  }
  .wts-trade-main > .ft-bottom-panel,
  .wts-trade-main > .st-bottom-panel {
    height: clamp(190px, 20vh, 230px);
    max-height: clamp(190px, 20vh, 230px);
  }
}

/* Orderbook column structural */
.ft-orderbook-col {
  width: 50%;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.st-orderbook-col {
  flex: 1;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Orderbook header spans (stock) */
.orderbook-header span { text-align: right; padding-right: 8px; }
.orderbook-header .oh-price { flex: 0 0 40%; }
.orderbook-header .oh-qty  { flex: 0 0 30%; }
.orderbook-header .oh-cnt  { flex: 0 0 30%; }

/* Stock orderbook scroll area */
#st-orderbook {
  font-size: 13px;
}

/* Order entry column (futures) */
.ft-order-col {
  width: 50%;
  padding: 8px;
  gap: 8px;
  overflow: hidden;
}

/* Symbol change text */
.symbol-change-text { font-size: 14px; }

/* Small form label */
.form-label-sm {
  font-size: 12px;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 6px;
}

/* Form hint text */
.form-hint {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Entry tab pane container */
.ft-entry-panes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  min-height: 0;
  flex: 1;
}
.ft-entry-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Radio label inline */
.ft-radio-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 13px;
}

/* Buyable/Sellable bar */
.ft-buyable-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
}
.ft-buyable-bar span {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
}
.ft-buyable-bar strong {
  display: inline;
  margin-top: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

/* Price step button */
.ft-price-step-btn {
  padding: 0 8px;
  min-width: 36px;
}

/* Order buttons group */
.ft-order-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Trade button (buy/sell on order panel) */
.ft-trade-btn {
  flex: 1;
  height: 38px;
  font-size: 14px;
}

/* Secondary action button */
.ft-secondary-btn {
  flex: 1;
  height: 32px;
  font-size: 12px;
}

/* Cancel all button positioned in tabs */
.ft-cancel-all-pos {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* Table empty state */
.table-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}
.wts-table td.table-empty {
  text-align: center;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Sidebar type tabs (선물/주식) */
.wts-sidebar-type-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.wts-sidebar-type-tabs .wts-tab {
  flex: 1;
  text-align: center;
}

/* Sidebar sortbar */
.wts-sidebar-sortbar {
  display: flex;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}
.sidebar-sort-spacer { flex: 0 0 24px; }
.sidebar-sort-price { flex: 0 0 25%; text-align: right; }
.sidebar-sort-rate  { flex: 0 0 25%; text-align: right; }

/* Compact sidebar input */
.wts-sidebar-search .wts-input {
  height: 32px;
  font-size: 12px;
}

/* Full-width button */
.btn-block { width: 100%; }

/* Modal text paragraph */
.modal-text {
  margin: 12px 0;
  font-size: 13px;
}

/* Modal action button row */
.modal-actions {
  display: flex;
  gap: 8px;
}

/* Stock order type radio */
.st-radio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.st-order-type-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.st-order-reset-btn {
  margin-left: auto;
  min-width: 56px;
  height: 28px !important;
  padding: 0 10px !important;
  flex: 0 0 auto;
}

/* Stock buy/sell buttons */
.st-trade-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.st-trade-btn {
  flex: 1;
  height: 38px;
  font-size: 14px;
}

/* TPSL save btn */
.ft-tpsl-save {
  height: 36px;
  font-size: 13px;
}

/* Qty settings gear button */
.ft-qty-settings-btn {
  padding: 0 6px;
  min-width: 28px;
  font-size: 12px;
}

/* Hoga info panel recent trade header */
.st-recent-header {
  font-weight: 600;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-panel);
  flex: 0 0 auto;
}
.st-recent-trade-row {
  justify-content: flex-end;
}
.st-recent-trade-row .st-hi-value {
  flex: 1 1 auto;
  text-align: right;
}
#st-recent-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: flex-start;
}

/* Reject modal text */
.reject-reason {
  margin: 12px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Reject confirm button */
.reject-ok-btn {
  width: 100%;
  height: 40px;
}

/* Confirm modal size */
.modal-confirm { max-width: 340px; }
.modal-reject  { max-width: 360px; text-align: center; }
.modal-preset  { max-width: 320px; }

/* Preset grid */
.ft-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

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