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

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

/* ===== 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);
}

/* WTS3 P3 (2026-05-04): 모바일 프로필 드롭다운 — 계정설정 / 로그아웃 + mock 뱃지 */
.wts-profile-wrap { position: relative; display: inline-flex; }
.wts-profile-btn {
  position: relative;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.15s;
}
.wts-profile-btn:hover {
  background: var(--bg-hover);
}
.wts-profile-icon {
  width: 18px;
  height: 18px;
  display: block;
}
.wts-profile-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  background: #d9434f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  padding: 0 5px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
.wts-profile-badge[hidden] { display: none; }
.wts-profile-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.wts-profile-menu[hidden] { display: none; }
.wts-profile-menu-header {
  padding: 10px 14px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #1ba784);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.wts-profile-menu-item {
  background: none;
  border: 0;
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s;
}
.wts-profile-menu-item:hover { background: var(--bg-hover); }

/* ===== 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;
}

/* #238 (2026-05-19): 3-state 컬럼 정렬 헤더 공통 스타일.
   TableSort3State 모듈이 [data-sort-key] 요소에 .sort-active 토글. */
[data-sort-key] {
  cursor: pointer;
  user-select: none;
}
[data-sort-key]:hover {
  color: var(--text-primary);
}
[data-sort-key].sort-active {
  color: var(--accent, 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;
}
/* 보유포지션 테이블 — 9열이 한 화면에 들어가도록 패딩 축소 */
#ft-bottom-table th,
#ft-bottom-table td {
  padding: 4px 6px;
  font-size: 12px;
}
#ft-bottom-table .btn-neutral.btn-xs {
  min-width: 48px;
  padding: 2px 6px;
  font-size: 11px;
  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);
}

/* ============================================================
   #235 (2026-05-18): 호가창 확장 옵션 — body.hoga-expanded 시 폰트/칸 1.5배.
   영역 자체 크기는 동일 (.ft-hoga-wrapper 미변경) → 보이는 호가 행 수가 줄어듦.
   ============================================================ */
body.hoga-expanded .ft-hoga-table th {
  font-size: 17px;
  padding: 6px 3px;
}
body.hoga-expanded .ft-hoga-table td {
  font-size: 18px;
  height: 27px;
  padding: 2px 3px;
}
body.hoga-expanded .st-hoga-cell {
  font-size: 20px;
  height: 63px;
  min-height: 63px;
}
body.hoga-expanded .st-hoga-head-cell {
  font-size: 18px;
}
body.hoga-expanded .st-hoga-price-main {
  font-size: 20px;
}
body.hoga-expanded .st-hoga-price-change {
  font-size: 17px;
}

/* 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); }
/* H94/H99 (2026-05-06): 회원 요청 — 잔량/건수 셀에 행 영역색 적용.
   단, 데이터가 있는 셀에만(빈 행은 배경 없음).
     - 건수 (hoga-col-info-no): 값이 있을 때만 (:not(:empty))
     - 잔량 (hoga-col-info-rem): depth-sell / depth-buy 클래스가 그라디언트+색 둘 다 칠하므로 별도 룰 불필요. */
.ft-hoga-table tr[data-side="offer"] .hoga-col-info-no:not(:empty) { background-color: var(--hoga-sell-limit); }
.ft-hoga-table tr[data-side="bid"]   .hoga-col-info-no:not(:empty) { 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 {
  /* #141 (2026-05-17): 모바일 hit area 확대 — 회원 요청 "실제 모바일에서 누르기 어려움, 더 크게".
     12px → 18px (font), 20px → 36px (width), padding 6px 추가로 hit area ≈ 36×30px (Apple/Google 권장 ≥ 36px).
     #259 (2026-05-19): 회원 재요청 — 별 자체보다 별을 감싼 영역 인식. width 36→52, padding 8px 12px,
     font 20px 로 hit area ≈ 52×36px. 종목명은 자연스레 우측으로 이동. */
  flex: 0 0 52px;
  text-align: center;
  font-size: 20px;
  padding: 8px 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); }
/* N113 (2026-05-02): 선택된 종목 행 색상 강화 — 회원 시인성 향상 (HTS 패턴 일치) */
.symbol-row.selected {
  background: #d6e4ff;
  font-weight: 600;
  border-left: 3px solid #1890ff;
  padding-left: 9px; /* 12 - 3 (border) */
}
[data-theme="dark"] .symbol-row.selected {
  background: #1d3a5f;
  border-left-color: #4a90e2;
}

/* ===== 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; }
/* H91: WTS3 모바일뷰 전용 → mobile-only 노출, desktop-only 숨김 (line 2593 에서 정의). */

/* 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);
}
/* Mobile: relocated to top of page (right after symbol-bar). JS toggles this class. */
.ft-summary-card.ft-summary-mobile-top {
  margin-top: 0;
  padding: 6px 8px;
  border-top: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.ft-summary-card.ft-summary-mobile-top .ft-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}
.ft-summary-card.ft-summary-mobile-top .ft-summary-cell {
  min-height: 36px;
  padding: 3px 5px;
}
.ft-summary-card.ft-summary-mobile-top .ft-summary-label { font-size: 10px; }
.ft-summary-card.ft-summary-mobile-top .ft-summary-value { font-size: 11px; }
.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;
}

/* Lansur Stat Grid (Phase 1 P1-1) — 데스크탑에선 숨김. 모바일 lansur block 에서 grid 노출 */
.ft-lansur-stats { display: none; }

/* Phase 2 — Chart Sheet FAB (모바일 lansur 전용. 데스크탑에선 hidden) */
.wts-chart-fab { display: none; }

/* 좁은 폭에서는 세로 레이아웃으로 폴백 */
.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;
}

/* ===== Mobile chart fullscreen ===== */
.wts-chart-fs-entry {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  z-index: 6;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.wts-chart-fs-entry svg { display: block; }
/* Hide entry button when chart panel collapsed (sibling combinator) */
.ft-chart-panel.chart-collapsed ~ .wts-chart-fs-entry,
.st-chart-panel.chart-collapsed ~ .wts-chart-fs-entry { display: none !important; }

.wts-chart-fs-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  height: 44px;
  box-sizing: border-box;
  background: var(--bg-header, #fff);
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  height: calc(44px + env(safe-area-inset-top, 0px));
}
body.wts-chart-fullscreen-on .wts-chart-fs-toolbar { display: flex; }
body.wts-chart-fullscreen-on #wts-chart-host.wts-chart-fullscreen {
  position: fixed !important;
  top: calc(44px + env(safe-area-inset-top, 0px)) !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100dvh - 44px - env(safe-area-inset-top, 0px)) !important;
  z-index: 10000 !important;
  display: block !important;
}
@supports not (height: 100dvh) {
  body.wts-chart-fullscreen-on #wts-chart-host.wts-chart-fullscreen {
    height: calc(100vh - 44px - env(safe-area-inset-top, 0px)) !important;
  }
}
body.wts-chart-fullscreen-on .wts-mobile-balance,
body.wts-chart-fullscreen-on .wts-bottom-tabs,
body.wts-chart-fullscreen-on .wts-header { display: none !important; }
body.wts-chart-fullscreen-on { overflow: hidden; }

.wts-chart-fs-back {
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-primary, #111);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.wts-chart-fs-intervals {
  flex: 1 1 auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wts-chart-fs-intervals::-webkit-scrollbar { display: none; }
.wts-chart-fs-int-btn {
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-secondary, #6b7280);
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
.wts-chart-fs-int-btn.active {
  background: var(--accent, #1976d2);
  color: #fff;
  border-color: var(--accent, #1976d2);
}
.wts-chart-fs-indicator {
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-primary, #111);
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Phase G (2026-05-05): timeframe 드롭다운 + 캔들/저장/불러오기 버튼 */
.wts-chart-fs-tf-wrap {
  position: relative;
  flex: 0 0 auto;
}
.wts-chart-fs-tf-btn {
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-primary, #111);
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 64px;
  justify-content: center;
}
.wts-chart-fs-tf-current { font-weight: 600; }
.wts-chart-fs-tf-caret { font-size: 10px; opacity: 0.7; }
.wts-chart-fs-tf-menu {
  /* Phase H21 (2026-05-05): toolbar 의 overflow-x:auto 가 absolute 자식 clip 시킴 → fixed 로 변경.
     z-index 10020 = host(10000) + toolbar(10001) 보다 위. JS 가 매 토글 시 좌표 갱신. */
  position: fixed;
  z-index: 10020;
  background: var(--bg-header, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  min-width: 88px;
  padding: 4px;
}
.wts-chart-fs-tf-menu[hidden] { display: none; }
.wts-chart-fs-tf-opt {
  background: transparent;
  border: 0;
  color: var(--text-primary, #111);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.wts-chart-fs-tf-opt:hover,
.wts-chart-fs-tf-opt:focus { background: var(--bg-muted, #f5f5f5); }
.wts-chart-fs-tf-opt.active {
  background: var(--accent, #1976d2);
  color: #fff;
}
.wts-chart-fs-action-btn {
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-primary, #111);
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
.wts-chart-fs-action-btn:active { background: var(--bg-muted, #f5f5f5); }
/* Phase H6 (2026-05-05): '그림' 버튼 active 상태 — 좌측 toolbar 켜져있을 때 강조 */
.wts-chart-fs-action-btn.active {
  background: var(--accent, #1976d2);
  color: #fff;
  border-color: var(--accent, #1976d2);
}

/* Phase H10 (2026-05-05): 차트 타입 picker — 캔들 버튼 클릭 시 dropdown 처럼 노출.
   풀스크린 toolbar 의 z-index(10001) 보다 위에 배치해서 차트 위에 떠 있도록. */
.wts-chart-type-picker {
  position: fixed;
  top: calc(44px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10020;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 0;
  box-sizing: border-box;
}
.wts-chart-type-picker.hidden { display: none; }
.wts-chart-type-list {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  width: min(320px, 90%);
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}
.wts-chart-type-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text-primary, #111);
  font-size: 14px;
  padding: 12px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.wts-chart-type-item:hover,
.wts-chart-type-item:focus { background: var(--bg-muted, #f5f5f5); }
.wts-chart-type-item.active {
  background: var(--accent, #1976d2);
  color: #fff;
  font-weight: 600;
}
.wts-chart-type-sep {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 4px 8px;
}

/* #16 (2026-06-27): 보조지표 퀵 컨트롤 패널 — chart-type-picker 와 동일한 overlay 패턴. */
.wts-chart-indicator-picker {
  position: fixed;
  top: calc(44px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10020;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 0;
  box-sizing: border-box;
}
.wts-chart-indicator-picker.hidden { display: none; }
.wts-chart-indicator-panel {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  width: min(360px, 92%);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wts-chart-indicator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.wts-chart-indicator-title { font-size: 14px; font-weight: 700; color: var(--text-primary, #111); }
.wts-chart-indicator-close {
  background: transparent;
  border: 0;
  color: var(--text-secondary, #555);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.wts-chart-indicator-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
}
.wts-chart-indicator-empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #888);
}
.wts-chart-indicator-row { border-bottom: 1px solid var(--border, #eee); }
.wts-chart-indicator-row:last-child { border-bottom: 0; }
.wts-chart-indicator-rowmain {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}
.wts-chart-indicator-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text-primary, #111);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wts-chart-indicator-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.wts-ind-btn {
  background: var(--bg-muted, #f5f5f5);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-primary, #111);
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.wts-ind-btn:active { opacity: 0.7; }
.wts-ind-btn-danger { color: var(--danger, #d32f2f); border-color: var(--danger, #d32f2f); }
.wts-chart-indicator-settings {
  padding: 4px 14px 12px;
  background: var(--bg-muted, #fafafa);
}
.wts-chart-indicator-settings.hidden { display: none; }
.wts-ind-set-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.wts-ind-set-label { flex: 1 1 auto; font-size: 12px; color: var(--text-secondary, #555); }
.wts-ind-input {
  flex: 0 0 auto;
  width: 110px;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  background: var(--bg-elevated, #fff);
  color: var(--text-primary, #111);
}
.wts-ind-set-empty { padding: 8px 0; font-size: 12px; color: var(--text-muted, #888); }
.wts-ind-set-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.wts-chart-indicator-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.wts-chart-indicator-add {
  width: 100%;
  background: var(--accent, #1976d2);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
}
.wts-chart-indicator-add:active { opacity: 0.85; }
/* 좌측 back 버튼 + tf 드롭다운 + 액션 버튼 4개 가로 배치, 작은 화면에서 스크롤 */
.wts-chart-fs-toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wts-chart-fs-toolbar::-webkit-scrollbar { display: none; }

.wts-chart-fs-entry { display: inline-flex; }

/* ===== Toast Notifications (Sprint 4-1) ===== */
/* Phase H30 (2026-05-05): 회원 요청 — 화면을 가리는 시간 단축 + 우측 닫기(x) 버튼 + 크기 축소. */
.wts-toast-container {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  max-width: 360px;
  width: calc(100% - 32px);
}
.wts-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  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.25s ease, opacity 0.25s ease;
}
.wts-toast.show { transform: translateY(0); opacity: 1; }
.wts-toast.hide { transform: translateY(-20px); opacity: 0; }
.wts-toast-icon { font-size: 14px; flex-shrink: 0; line-height: 1; }
.wts-toast-msg { flex: 1; line-height: 1.3; }
.wts-toast-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: 0.7;
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
  margin-right: -2px;
  cursor: pointer;
  border-radius: 3px;
}
.wts-toast-close:hover,
.wts-toast-close:focus { opacity: 1; background: rgba(255,255,255,0.18); }
.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; }

/* 청산제한(수익청산방지) 거부 전용 — 회원 요청 2026-05-25: 모달 차단 대신
   우측 하단 토스트 + 폰트 키움. 거래 흐름 안 끊기게 비파괴 알림. */
.wts-toast-container.wts-toast-block-container {
  top: auto;
  bottom: 24px;
  left: auto;
  right: 24px;
  transform: none;
  max-width: 420px;
}
.wts-toast.wts-toast-block {
  font-size: 16px;
  font-weight: 600;
  padding: 14px 16px;
  background: #dc2626;
  color: #fff;
  box-shadow: 0 6px 24px rgba(220,38,38,0.35);
}
.wts-toast.wts-toast-block .wts-toast-icon { font-size: 20px; }
.wts-toast.wts-toast-block .wts-toast-msg { line-height: 1.4; }

/* ===== 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 --- */
#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 --- */
.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; }
/* Phase B-3 (2026-05-04 ever-asset): 활성 탭 — 초록 컬러 + 상단 짧은 underline */
.wts-bottom-tab-item { position: relative; color: #888; }
.wts-bottom-tab-item.active { color: #16a34a; font-weight: 600; }
.wts-bottom-tab-item.active .tab-icon-svg { stroke-width: 2.2; }
.wts-bottom-tab-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 2px;
  background: #16a34a;
  border-radius: 0 0 2px 2px;
}

/* ===== 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;
}
/* MTS #2 (2026-07-16): 시트 열림 중 배경 스크롤 잠금 — 시트 위 드래그가 iOS 스크롤
   체이닝으로 뒤 거래창(#app-content)을 스크롤시키는 문제 차단. 시트는 body 직속
   portal(#wts-sidebar-portal) 소속이라 영향 없음. */
body.wts-mobile-sidebar-open #app-content {
  overflow: hidden !important;
  touch-action: none;
}

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

/* Phase B-3 (2026-05-04 ever-asset): 햄버거 button 모바일 표시 (more-sheet 트리거) */
.wts-hamburger { display: inline-flex !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 --- */
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)) {
  .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;
}

/* Phase G2 (2026-05-05): 입출금 내역 카드 레이아웃 — 회원 요청.
   가로 스크롤 표 폐기, 항목당 4×4 grid (header/data/header/data) 카드. */
.fund-hist-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.fund-hist-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--bg-elevated, #fff);
  padding: 8px 10px;
  overflow: hidden;
}
.fh-grid {
  display: grid;
  /* Phase H24 (2026-05-05): 회원 요청 — 날짜 컬럼이 짤려서 비율 조정.
     col1(번호/구분) col2(날짜) col3(금액) col4(상태/비고) — 날짜 가장 넓게. */
  grid-template-columns: 1fr 2.4fr 1.5fr 1fr;
  row-gap: 4px;
  column-gap: 6px;
  align-items: center;
}
.fh-grid .fh-h {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #888);
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fh-grid .fh-d {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #111);
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fh-grid .fh-d-date {
  font-size: 11px;
  font-feature-settings: 'tnum';
}
.fh-grid .fh-d-memo {
  font-size: 11px;
  white-space: normal;
  word-break: break-all;
}
/* Header row separator (3줄째 헤더 위에 살짝 라인) */
.fh-grid .fh-h:nth-child(n+9):nth-child(-n+12) {
  padding-top: 6px;
  border-top: 1px dashed var(--border, #e5e7eb);
}
/* 회원 요청 컬러: 입금 초록, 출금 빨강 */
.fh-grid .fh-d.fh-type-deposit {
  color: var(--ev-action-green, #10a37f);
  font-weight: 600;
}
.fh-grid .fh-d.fh-type-withdraw {
  color: var(--ev-buy-red, #f23645);
  font-weight: 600;
}
.fund-hist-empty {
  text-align: center;
  color: var(--text-muted, #888);
  padding: 40px 0;
  font-size: 13px;
}


.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%;
}


/* 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;
}

/* Bottom action buttons positioned in tabs */
.ft-bottom-actions,
.st-bottom-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
}

/* 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;
  }
}

/* ── Orders: Mobile Card Layout ── */
.ord-cards-wrap {
  padding: 0 4px;
}

.ord-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

.ord-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e0e0e0);
}

.ord-card-symbol {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary, #222);
}

.ord-card-id {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-left: auto;
}

.ord-card-badges {
  display: flex;
  gap: 4px;
  flex-basis: 100%;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ord-card-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-muted, #f0f0f0);
  color: var(--text-secondary, #555);
}

.ord-card-badge.badge-buy {
  background: #fde8e8;
  color: #d32f2f;
}

.ord-card-badge.badge-sell {
  background: #e3f0ff;
  color: #1565c0;
}

.ord-card-badge.badge-entry {
  background: #e8f5e9;
  color: #2e7d32;
}

.ord-card-badge.badge-exit {
  background: #f3e5f5;
  color: #7b1fa2;
}

.ord-card-badge.badge-platform {
  background: #e8eaf6;
  color: #283593;
}

/* 카드 #386: 주문구분 '취소' 배지 = 빨강 */
.ord-card-badge.badge-cancel {
  background: #fde8e8;
  color: #d32f2f;
}

.ord-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  margin-bottom: 8px;
}

.ord-card-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e0e0e0);
}

.ord-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: 12px;
}

.ord-card-label {
  color: var(--text-muted, #888);
  font-size: 11px;
  flex-shrink: 0;
  margin-right: 8px;
}

.ord-card-row span:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Dark theme */
[data-theme="dark"] .ord-card {
  background: var(--card-bg, #1e1e1e);
  border-color: var(--border, #333);
}

[data-theme="dark"] .ord-card-badge {
  background: #2a2a2a;
  color: #bbb;
}

[data-theme="dark"] .ord-card-badge.badge-buy {
  background: #3d1f1f;
  color: #ef5350;
}

[data-theme="dark"] .ord-card-badge.badge-sell {
  background: #1a2a3d;
  color: #42a5f5;
}

[data-theme="dark"] .ord-card-badge.badge-entry {
  background: #1a2e1a;
  color: #66bb6a;
}

[data-theme="dark"] .ord-card-badge.badge-exit {
  background: #2a1a2e;
  color: #ab47bc;
}

[data-theme="dark"] .ord-card-badge.badge-platform {
  background: #1a1a2e;
  color: #7986cb;
}

[data-theme="dark"] .ord-card-badge.badge-cancel {
  background: #3d1f1f;
  color: #ef5350;
}

/* ── WS 연결 끊김 오버레이 ───────────────────────────────── */
.wts-ws-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  touch-action: none;
}
.wts-ws-overlay.visible { display: flex; }
.wts-ws-overlay-card {
  background: #ffffff;
  color: #1a1a1a;
  border-radius: 14px;
  padding: 28px 32px 24px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: wtsWsOverlayPop 0.18s ease-out;
}
@keyframes wtsWsOverlayPop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.wts-ws-overlay-spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: #1976d2;
  border-radius: 50%;
  animation: wtsWsOverlaySpin 0.9s linear infinite;
}
@keyframes wtsWsOverlaySpin {
  to { transform: rotate(360deg); }
}
.wts-ws-overlay-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1a1a1a;
}
.wts-ws-overlay-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #555;
  margin-bottom: 18px;
}
.wts-ws-overlay-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.wts-ws-overlay-btn {
  flex: 1;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #1976d2;
  color: #ffffff;
  transition: filter 0.12s ease;
}
.wts-ws-overlay-btn:active { filter: brightness(0.9); }
.wts-ws-overlay-btn-secondary {
  background: #eceff1;
  color: #37474f;
}

[data-theme="dark"] .wts-ws-overlay-card {
  background: #1f2533;
  color: #e8eaed;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .wts-ws-overlay-spinner {
  border-color: rgba(255, 255, 255, 0.14);
  border-top-color: #64b5f6;
}
[data-theme="dark"] .wts-ws-overlay-title { color: #e8eaed; }
[data-theme="dark"] .wts-ws-overlay-desc { color: #b8bfcc; }
[data-theme="dark"] .wts-ws-overlay-btn { background: #1565c0; }
[data-theme="dark"] .wts-ws-overlay-btn-secondary { background: #2c3340; color: #cfd8dc; }

/* 2026-05-12: 재시도 3회 누적 후 노출되는 path-mode 초기화 버튼. */
.wts-ws-overlay-reset {
  margin-top: 14px;
  background: transparent;
  border: 1px dashed #b0bec5;
  color: #607d8b;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}
.wts-ws-overlay-reset:active { filter: brightness(0.9); }
[data-theme="dark"] .wts-ws-overlay-reset { border-color: #455a64; color: #90a4ae; }

/* ===== Trade Settings Modal (란서식 6 토글 통합) ===== */
.ft-trade-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.ft-trade-settings-btn:hover { background: var(--bg-hover); }

.wts-trade-settings-modal .wts-trade-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px;
  margin-top: 8px;
}
.wts-trade-settings-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wts-trade-settings-row .label {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.wts-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 76px;
  height: 28px;
  border-radius: 999px;
  background: #d6dae0;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.4px;
}
.wts-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease;
}
.wts-toggle .label-on { display: none; margin-left: auto; }
.wts-toggle .label-off { display: inline; margin-left: 26px; color: #6b7280; }
.wts-toggle.is-on { background: #1e88e5; }
.wts-toggle.is-on::after { transform: translateX(48px); }
.wts-toggle.is-on .label-on { display: inline; margin-right: 26px; margin-left: 0; }
.wts-toggle.is-on .label-off { display: none; }

[data-theme="dark"] .wts-toggle { background: #424753; }
[data-theme="dark"] .wts-toggle .label-off { color: #9ca3af; }
[data-theme="dark"] .wts-toggle.is-on { background: #1e88e5; }

.wts-trade-settings-modal .wts-modal { min-width: 0; width: calc(100vw - 32px); max-width: 420px; }
.wts-trade-settings-modal .wts-trade-settings-grid { gap: 14px 16px; }
.wts-toggle { width: 70px; height: 26px; font-size: 10px; }
.wts-toggle::after { width: 20px; height: 20px; }
.wts-toggle.is-on::after { transform: translateX(44px); }

/* ===== 버튼효과 (클릭 애니메이션) ===== */
body.wts-button-effect button:not([disabled]):active,
body.wts-button-effect .ft-hoga-btn-buy:active,
body.wts-button-effect .ft-hoga-btn-sell:active,
body.wts-button-effect .ft-hoga-btn-liq:active,
body.wts-button-effect .ft-cancel-btn:active,
body.wts-button-effect [data-order-submit]:active,
body.wts-button-effect [data-order-liq]:active {
  transform: scale(0.95);
  filter: brightness(0.92);
  transition: transform 0.06s ease, filter 0.06s ease;
}

/* =================================================================
   2026-05-03: Mobile Lansur Layout (default — 옵션 아님)
   목표: 차트 + 호가 + 주문 + 포지션 한 화면 동시 노출 (란서 MTS 식)
   호가는 위아래 5칸씩만 보이고 스크롤 가능
   ================================================================= */
/* Phase 2 (2026-05-04) — 차트를 bottom-anchored slide-up sheet 로 재구성.
   기본 hidden (translateY 100%), .chart-sheet-open 시 슬라이드 업.
   in-flow 에서 빠지므로 매매 영역 (호가 + 주문) 자동으로 자리 회수.
   기존 H1 의 .chart-collapsed 시스템은 데스크탑 한정으로 유지. */
.wts-trade-chart-stack {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50vh !important;
  min-height: 0 !important;
  max-height: 50vh;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.wts-trade-chart-stack.chart-sheet-open {
  transform: translateY(0);
}
.wts-trade-chart-stack > .relative {
  flex: 1;
  min-height: 0;
  display: block !important;
  height: auto !important;
}
.ft-chart-panel,
.st-chart-panel {
  height: 100% !important;
  min-height: 0 !important;
}
/* 시트 상단 close handle — .wts-chart-toggle 을 sheet 의 위쪽으로 (flex order -1) 이동.
   라벨도 "차트 닫기"(▽) 의미로 변경. */
.wts-chart-toggle {
  display: flex !important;
  order: -1;
  height: 32px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  border-top: none;
}
.wts-trade-chart-stack .chart-toggle-label {
  display: inline;
  font-size: 12px;
  font-weight: 600;
}
.wts-trade-chart-stack.chart-sheet-open .chart-toggle-icon {
  transform: rotate(180deg);
}

/* Phase 2 — Chart FAB 노출 (우하단 동그라미).
   bottom = nav 64 + balance strip 36 + gap 12 = 112px. z-index 는 balance strip(99) 위로. */
.wts-chart-fab {
  display: flex !important;
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 112px);
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent, #1890ff);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.wts-chart-fab:active {
  transform: scale(0.92);
}
.wts-chart-fab.is-active {
  background: var(--price-down, #d9534f);
}
/* sheet 가 z-index 50 이라 host (z 5) 가 가려지지 않게 host 도 sheet 위로 */
#wts-chart-host {
  z-index: 51 !important;
}

/* 심볼 바 (회원 mockup 5/4 13:15) — [종목변경(좌측)] [나스닥/NQM26 + 가격 + 등락 + 틱가치 + 영문] [테마 + 로그아웃(우측)]
   wts-header 의 버튼은 그대로 + symbol-bar 가 한 줄 처리. 모바일에선 ft-cur-price / symbol-change-text 다시 노출. */
.wts-symbol-bar {
  padding: 6px 8px !important;
  flex-wrap: wrap !important;
  overflow-x: hidden;
  font-size: 12px;
  gap: 4px 8px;
  align-items: baseline;
}
.wts-symbol-bar .symbol-title {
  font-size: 16px !important;
  font-weight: 800;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.wts-symbol-bar .symbol-meta {
  display: none !important;  /* desktop 용 */
}
/* 큰 가격 + 등락 다시 노출 (회원 요청) */
.wts-symbol-bar .ft-price-big {
  display: inline !important;
  font-size: 18px !important;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.wts-symbol-bar .symbol-change-text {
  display: inline !important;
  font-size: 12px !important;
  font-weight: 700;
}
.wts-symbol-bar .symbol-meta-mobile {
  display: inline-flex !important;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.wts-symbol-bar .symbol-tick-label {
  font-weight: 600;
}
.wts-symbol-bar .symbol-tick-value {
  font-weight: 700;
  color: var(--text-primary);
}
.wts-symbol-bar .symbol-fullname {
  margin-left: 4px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
/* 헤더: 로고 숨김. */
.wts-header .wts-logo {
  display: none !important;
}
/* 종목변경 버튼: 좌측 2줄 (종목/변경) — 회원 mockup */
.wts-mobile-symbol-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px !important;
  font-size: 11px !important;
  line-height: 1.15;
  min-width: 44px;
  min-height: 40px;
  text-align: center;
  flex-shrink: 0;
}
.wts-mobile-symbol-btn .symbol-btn-line {
  display: block;
}
/* 통합 헤더 모드 (JS 가 body.wts-mobile-unified-header 부착) — wts-header 자체 숨기고 모든 버튼은 wts-symbol-bar 안으로 이동.
   3-column grid: [종목변경] [symbol info center (multi-line)] [theme/logout group] */
body.wts-mobile-unified-header .wts-header {
  display: none !important;
}
body.wts-mobile-unified-header .wts-symbol-bar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 8px !important;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
}
body.wts-mobile-unified-header .wts-symbol-bar > .wts-mobile-symbol-btn {
  grid-column: 1;
  grid-row: 1;
}
body.wts-mobile-unified-header .wts-symbol-bar > .wts-symbol-info-center {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  min-width: 0;
  overflow: hidden;
}
body.wts-mobile-unified-header .wts-symbol-bar > .wts-symbol-bar-right {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.wts-symbol-bar-right .wts-theme-toggle,
.wts-symbol-bar-right .wts-logout-btn,
.wts-symbol-bar-right .wts-hamburger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Phase C-1 (2026-05-05 ever-asset 매핑): stat grid 3행 5칸
   row 1 = stacked (label 위/값 아래, 중앙 정렬, 배경 없음)
   row 2-3 = inline (label 좌/값 우, 민트 bg #e2ece8)
   ※ 기존 row-3 = 3cell 레거시 override 제거 */
.ft-ls-value {
  letter-spacing: -0.4px;
  text-overflow: clip !important;
}

/* ft-meta-panel: 가로 1줄 (현재가/전일비/시가/등락률 등 옆으로) */
.ft-meta-panel {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  padding: 4px 8px;
  font-size: 10px;
  -webkit-overflow-scrolling: touch;
}
.ft-meta-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px;
  flex-shrink: 0;
}
.ft-meta-item {
  flex-direction: row !important;
  gap: 3px;
  align-items: baseline;
}
.ft-meta-item .label { font-size: 9px; opacity: 0.7; }
.ft-meta-item .value { font-size: 11px; font-weight: 600; }

/* Summary card / meta-panel 숨김 — 새로운 lansur stat grid 가 대체 */
.ft-summary-card,
.ft-summary-mobile-top,
.ft-meta-panel {
  display: none !important;
}

/* Phase C-1 (2026-05-05 ever-asset 매핑): Stat Grid (3행 × 5칸)
   - Row 1: 라벨 위 / 값 아래 (stacked, centered)  배경 없음
   - Row 2-3: 라벨 좌 / 값 우 (inline)  민트 bg #e2ece8
   - 보유잔고 값 = 파랑 #007eda */
.ft-lansur-stats {
  display: block !important;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.ft-ls-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
.ft-ls-row + .ft-ls-row {
  margin-top: 1px;
}
/* 공통 cell — flat (border 없음, radius 없음) */
.ft-ls-cell {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 1px 0;
  min-width: 0;
  overflow: hidden;
  line-height: 1.2;
}
/* === Row 1: stacked label+value, centered === */
.ft-ls-row:nth-child(1) .ft-ls-cell {
  text-align: center;
  padding: 1px 0;
}
.ft-ls-row:nth-child(1) .ft-ls-label {
  font-size: 11px;
  font-weight: 400;
  color: rgb(125, 125, 125);
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
}
.ft-ls-row:nth-child(1) .ft-ls-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
}
/* === Row 2 + 3: inline label-left / value-right, mint bg === */
.ft-ls-row:nth-child(2) .ft-ls-cell,
.ft-ls-row:nth-child(3) .ft-ls-cell {
  background: rgb(226, 236, 234);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px 5px 6px;
  min-height: 22px;
}
.ft-ls-row:nth-child(2) .ft-ls-label,
.ft-ls-row:nth-child(3) .ft-ls-label {
  font-size: 10px;
  font-weight: 400;
  color: rgb(58, 58, 58);
  white-space: nowrap;
  flex-shrink: 0;
}
.ft-ls-row:nth-child(2) .ft-ls-value,
.ft-ls-row:nth-child(3) .ft-ls-value {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  letter-spacing: -0.4px;
  flex: 1 1 auto;
  min-width: 0;
}
/* 보유잔고 (row 3 첫 셀) 값 — 파랑 강조 */
.ft-ls-row:nth-child(3) .ft-ls-cell:first-child .ft-ls-value {
  color: rgb(0, 126, 218);
  font-weight: 600;
}
/* 오버나잇 action cell — Ever Asset 에는 없으나 cell 자체는 유지, 민트 bg 만 적용
   (액션 버튼 형태는 그대로 두되 row 안에서 다른 cell 과 같이 보이게) */
.ft-ls-cell-action {
  background: var(--accent, #1890ff) !important;
  border-color: var(--accent, #1890ff);
  cursor: pointer;
  justify-content: center !important;
}
.ft-ls-cell-action .ft-ls-label,
.ft-ls-cell-action .ft-ls-action-text {
  color: #fff;
}
.ft-ls-cell-action:active {
  opacity: 0.85;
}

/* 호가창 default 노출 (기존 mobile CSS 의 display:none override) */
.ft-orderbook-col {
  display: flex !important;
  flex: 1 1 55% !important;
  min-width: 0;
  overflow: hidden;
}
.ob-toggle-btn {
  display: none !important;
}

/* ft-main-panel: 호가(왼쪽) + 주문(오른쪽) 옆으로.
   Phase 3 — 차트 sheet 분리 후 vertical 회수 → 50vh → 60vh */
.ft-main-panel {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px;
  align-items: stretch;
  min-height: 60vh;
}
.ft-order-col {
  flex: 1 1 45% !important;
  width: auto !important;
  min-width: 0;
  overflow-y: auto;
}

/* 호가 컨트롤(설정) 작게 */
.ft-hoga-controls {
  padding: 4px 6px;
  gap: 6px;
}
.ft-trade-settings-btn {
  font-size: 10px;
  padding: 3px 6px;
}

/* 시장가/청산 버튼바: 2x2 grid */
.ft-hoga-market-bar {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  font-size: 10px;
}
.ft-hoga-market-bar > div {
  padding: 6px 4px;
  text-align: center;
}

/* 호가 테이블: 폰트 작게 + 패딩 줄임 */
.ft-hoga-table {
  font-size: 9px;
  table-layout: fixed;
  width: 100%;
}
.ft-hoga-table td,
.ft-hoga-table th {
  padding: 1px 2px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 2026-05-04: 헤더 라벨 1글자 축약 (좁은 모바일 폭에 "매도"/"건수"/"잔량" 짤림 — data-mobile-label 로 교체) */
.ft-hoga-table th[data-mobile-label] {
  font-size: 0;
}
.ft-hoga-table th[data-mobile-label]::before {
  content: attr(data-mobile-label);
  font-size: 9px;
  font-weight: 600;
}
.ft-hoga-table .price-row {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
/* 가격셀 등락률 ::after 숨김 — 좁은 모바일에서 가격과 겹쳐서 깨져 보임 */
.ft-hoga-table td.hoga-col-price[data-change]::after,
.ft-hoga-table td[data-change]::after {
  display: none !important;
}
.ft-hoga-table td.hoga-col-price[data-change],
.ft-hoga-table td.hoga-col-price.hoga-price-check[data-change],
.ft-hoga-table td.hoga-col-price.hoga-price-check.hoga-price-check-ohl[data-change] {
  padding-right: 2px !important;
  padding-left: 2px !important;
}

/* 호가 wrapper: Phase 3 — 차트가 sheet 로 분리되어 매매 영역 회수 → 위아래 5칸(200px) → 7-8칸(260px).
   스크롤 가능 (회원 의도 유지). 셀 높이 ~16px × 16칸 ≈ 256px */
.ft-hoga-wrapper {
  max-height: 260px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 호가 footer/cancel 압축 */
.ft-hoga-footer {
  font-size: 9px;
}
.ft-hoga-cancel-bar {
  font-size: 9px;
}
.ft-cancel-btn {
  padding: 4px 2px;
}

/* 주문 entry 압축 */
.ft-order-entry {
  padding: 4px;
  gap: 4px;
}
.ft-stop-panel {
  display: none !important;
}
/* Phase 4 P4-1 — 주문가격 row 한 줄 (란서식): [−] [input] [＋] [현재가]
   H2 의 줄바꿈 fallback 제거. 버튼 아이콘만이라 폭 충분. */
.ft-price-row {
  flex-wrap: nowrap !important;
  gap: 3px !important;
  align-items: stretch;
}
.ft-price-row > .wts-input {
  flex: 1 1 auto !important;
  min-width: 0;
}
.ft-price-row > .ft-price-step-btn.ft-price-step-icon {
  flex: 0 0 32px !important;
  width: 32px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.ft-price-row > .ft-price-current-btn {
  flex: 0 0 auto !important;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Phase 4 P4-2 — 주문수량 row 끝 종목코드 badge */
.ft-qty-row {
  align-items: stretch;
}
.ft-qty-symbol-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 56px;
}

/* Phase 4 P4-3 — 손익절틱 status box */
.ft-cut-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 10px;
}
.ft-cut-status-label {
  color: var(--text-muted);
  font-weight: 600;
}
.ft-cut-status-value {
  color: var(--text-secondary);
  font-weight: 600;
}
.ft-cut-status-value.is-active {
  color: var(--accent, #1890ff);
}

/* Phase 5 P5-1 — 하단 주문/체결 영역 max-height ↑ (22vh → 28vh) */
.ft-bottom-panel {
  max-height: 28vh !important;
  min-height: 120px !important;
}
/* Phase 5 P5-2 — 전체취소/청산 버튼 폰트/패딩 ↑ (현재 너무 작음) */
.ft-cancel-btn {
  padding: 8px 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  min-height: 32px;
}
.ft-hoga-cancel-bar {
  font-size: 11px !important;
}

/* Phase 6 P6-1 — 호가창 노출 토글 (body.wts-hoga-hidden 시 호가 숨기고 주문 영역 풀폭) */
body.wts-hoga-hidden .ft-orderbook-col {
  display: none !important;
}
body.wts-hoga-hidden .ft-order-col {
  flex: 1 1 100% !important;
}

/* Phase 6 P6-2 — Stat strip 컴팩트 모드 (폰트/패딩 ↓ → vertical 절약). 좁은 폰 사용자용 */
body.wts-stat-compact .ft-lansur-stats {
  padding: 2px 4px;
}
body.wts-stat-compact .ft-ls-cell {
  padding: 1px 2px;
}
body.wts-stat-compact .ft-ls-label {
  font-size: 8px;
}
body.wts-stat-compact .ft-ls-value {
  font-size: 10px;
}
.ft-order-main {
  padding: 4px;
  gap: 6px;
}
.form-label-sm,
.form-hint {
  font-size: 10px;
}
.wts-input {
  height: 30px;
  font-size: 12px;
}
.ft-trade-btn {
  font-size: 14px;
  padding: 10px 6px;
  font-weight: 700;
}
.ft-secondary-btn {
  font-size: 11px;
  padding: 6px;
}
.ft-qty-presets {
  flex-wrap: wrap;
  gap: 2px;
}
.ft-qty-presets button {
  font-size: 10px;
  padding: 4px 6px;
  min-width: 28px;
}
.ft-buyable-bar {
  font-size: 9px;
  flex-wrap: wrap;
}

/* 하단 포지션 패널 압축 */
.ft-bottom-panel {
  max-height: 22vh;
  min-height: 100px;
}
.ft-bottom-panel .wts-tabs {
  font-size: 11px;
}
.ft-bottom-table {
  font-size: 9px;
}
.ft-bottom-table td,
.ft-bottom-table th {
  padding: 2px 3px !important;
}

/* ============================================================
   Phase A (2026-05-04): ever-asset 모바일 매핑
   - 빈 상태 박스 (포지션/주문 없음)
   ============================================================ */
.ft-bottom-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px;
  padding: 28px 16px;
  background: var(--bg-secondary, #ebebeb);
  border-radius: 8px;
  color: var(--text-muted, #888);
  text-align: center;
}
.ft-bottom-empty-icon {
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted, #888);
}
.ft-bottom-empty-text {
  font-size: 13px;
  font-weight: 500;
}
/* 데이터 없을 때 — JS 가 .is-empty 추가 */
.ft-bottom-panel.is-empty .ft-bottom-empty {
  display: flex;
}
.ft-bottom-panel.is-empty .table-responsive {
  display: none;
}

/* ============================================================
   Phase B-1 (2026-05-04): 호가창 모바일/태블릿 stacked
   - 9컬럼 호가표 → 매/MIT 직접주문 컬럼은 hide (Ever Asset 매핑)
   - 매도=파랑(한국 컨벤션), 매수=빨강
   - 768px 이하 (모바일+태블릿) 적용
   - Footer 합계도 동일하게 0/1/7/8 hide
   ============================================================ */
/* MIT 컬럼(0,8) + limit 직접주문 컬럼(1,7) 모바일/태블릿 hide */
.ft-hoga-table [data-col="0"],
.ft-hoga-table [data-col="1"],
.ft-hoga-table [data-col="7"],
.ft-hoga-table [data-col="8"],
.ft-hoga-table thead th.hoga-th-mit-sell,
.ft-hoga-table thead th.hoga-th-mit-buy,
.ft-hoga-table thead th[data-mobile-label="매"] {
  display: none !important;
}
/* 호가창 footer (합계) — MIT/직접주문 합계 cell 도 hide */
.ft-hoga-footer .ft-hf-mit-sell,
.ft-hoga-footer .ft-hf-mit-buy,
#ft-hf-limit-sell,
#ft-hf-limit-buy {
  display: none !important;
}
/* 호가창 cancel bar — 직접주문 취소(매도/매수) hide. 전종목/현종목만 표시 */
.ft-hoga-cancel-bar .ft-cancel-sell,
.ft-hoga-cancel-bar .ft-cancel-buy,
.ft-hoga-cancel-bar .ft-cancel-mit {
  display: none !important;
}
/* 매도행: 우측 매수 정보(잔량/건수) 칸은 자리 차지하되 내용은 비움 */
.ft-hoga-table tr[data-side="offer"] [data-col="5"],
.ft-hoga-table tr[data-side="offer"] [data-col="6"] {
  visibility: hidden;
}
/* 매수행: 좌측 매도 정보(건수/잔량) 칸은 자리 차지하되 내용은 비움 */
.ft-hoga-table tr[data-side="bid"] [data-col="2"],
.ft-hoga-table tr[data-side="bid"] [data-col="3"] {
  visibility: hidden;
}
/* H104 (2026-05-08): 회원 요청 — 매수/매도 호가 영역에서 호가/잔량 없는 셀 컬러 표기 해제.
   row-level background 제거 → 빈 셀은 투명. 데이터 있는 셀은 TD-단위 룰(1136-1143, 1172-1177)이 책임. */
/* 컬럼 폭 모바일에서 균등 분배 (건수/잔량/가격/잔량/건수) */
.ft-hoga-table [data-col="2"],
.ft-hoga-table [data-col="6"] { width: 18%; text-align: center; }
.ft-hoga-table [data-col="3"],
.ft-hoga-table [data-col="5"] { width: 22%; text-align: right; }
.ft-hoga-table [data-col="4"] { width: 20%; text-align: center; font-weight: 700; }
/* MIT/limit 컬럼 hide 됐으니 thead 라벨 짧게 */
.ft-hoga-table thead th { font-size: 10px; padding: 4px 2px; }

/* ============================================================
   Phase B-2: 주문 영역 상단 정보바 (가능 매도/매수 + 설정)
   ============================================================ */
.ft-order-availbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text-secondary, #666);
}
.ft-order-availbar .label { font-weight: 500; }
.ft-order-availbar .sell { color: var(--price-down, #2563eb); font-weight: 600; }
.ft-order-availbar .buy { color: var(--price-up, #dc2626); font-weight: 600; }
.ft-order-availbar .ft-availbar-settings {
  margin-left: auto;
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid var(--border-light, #ddd);
  border-radius: 4px;
  background: var(--bg-secondary, #f5f5f5);
  cursor: pointer;
}

/* ============================================================
   Phase C (2026-05-05 ever-asset 디테일 매핑) — 모바일/태블릿 (≤768px)
   ============================================================ */
/* === C-2: 매수/매도 버튼 single row + 청산/초기화 row 숨김 === */
/* 보조 버튼(청산/초기화) 행 숨김 */
.ft-order-btns > .flex:nth-child(2) {
  display: none !important;
}
/* 메인 매수/매도 버튼 행 — Ever Asset spec */
.ft-order-btns > .flex:nth-child(1) {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}
.ft-trade-btn {
  flex: 0.49 1 0% !important;
  height: 44px !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  width: 100% !important;
}
.ft-trade-btn.btn-buy {
  background: rgb(240, 91, 81) !important;
}
.ft-trade-btn.btn-sell {
  background: rgb(0, 126, 218) !important;
}
/* === C-3: 주문수량 -/+ 스테퍼 (가격과 동일) === */
.ft-qty-row {
  align-items: center !important;
  gap: 4px !important;
}
.ft-qty-row .ft-qty-step-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1;
}
.ft-qty-row .ft-qty-step-btn:active {
  background: var(--bg-hover);
}
.ft-qty-row .wts-input {
  text-align: center !important;
  font-weight: 500;
}
/* === C-4: 손익절틱 status — "현재종목" 라벨 prefix 모바일 hide === */
.ft-cut-status-bar .ft-cut-status-label {
  display: none !important;
}
.ft-cut-status-bar {
  justify-content: center !important;
  text-align: center;
  font-size: 11px;
  color: rgb(58, 58, 58);
  padding: 4px 0;
}
/* === C-5: availbar pill 스타일 (민트 bg + colored text) === */
.ft-order-availbar {
  padding: 6px 8px;
  font-size: 11px;
  color: rgb(58, 58, 58);
}
.ft-order-availbar .label {
  color: rgb(58, 58, 58);
  font-weight: 400;
}
.ft-order-availbar .sell,
.ft-order-availbar .buy {
  background: rgb(226, 236, 234);
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 500;
}
.ft-order-availbar .sell {
  color: rgb(0, 126, 218) !important;
}
.ft-order-availbar .buy {
  color: rgb(240, 91, 81) !important;
}
.ft-order-availbar .ft-availbar-settings {
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid rgb(220, 220, 220);
  background: #fff;
  color: rgb(58, 58, 58);
  border-radius: 3px;
}
/* === C-6: 하단 패널 액션 버튼 — Ever Asset 그린 #009f92 큰 버튼 === */
/* 기존 absolute 위치 해제 — 큰 그린 버튼은 탭 바와 별개 row 가 아니라 같은 줄 우측 */
.ft-bottom-actions {
  position: static !important;
  transform: none !important;
  right: auto;
  top: auto;
  margin-left: auto;
  gap: 8px;
}
.ft-bottom-actions .btn-neutral {
  background: rgb(0, 159, 146) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 6px 12px !important;
  height: auto !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 3px !important;
  flex: 0 0 auto;
}
.ft-bottom-actions .btn-neutral:active {
  filter: brightness(0.9);
}
/* === C-6: 하단 탭 바 (포지션/미체결) flex 정렬 === */
#ft-bottom-tabs {
  display: flex !important;
  align-items: center;
  border-bottom: 1px solid rgb(230, 230, 230);
}
#ft-bottom-tabs .wts-tab {
  color: rgb(58, 58, 58);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
}
#ft-bottom-tabs .wts-tab.active {
  color: rgb(193, 32, 38);
  border-bottom-color: rgb(193, 32, 38);
}

/* H95 (2026-05-06): 체결내역 페이지 — 종목 다중 선택 모달 */
.ord-symbol-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 16px;
}
.ord-symbol-modal.hidden { display: none; }
.ord-symbol-modal-box {
  background: var(--bg-panel); border-radius: 10px;
  width: 100%; max-width: 420px; max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.ord-symbol-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.ord-symbol-modal-close {
  background: none; border: 0; font-size: 18px; cursor: pointer;
  color: var(--text-muted); padding: 0 4px; line-height: 1;
}
.ord-symbol-modal-controls {
  display: flex; gap: 6px; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.ord-symbol-modal-body {
  flex: 1; overflow-y: auto; padding: 8px 4px;
}
.ord-symbol-modal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
  border-radius: 4px;
}
.ord-symbol-modal-row:hover { background: var(--bg-elevated, #f5f5f5); }
.ord-symbol-modal-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.ord-symbol-modal-footer {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); justify-content: flex-end;
}
.ord-symbol-modal-footer .btn-neutral,
.ord-symbol-modal-footer .btn-primary {
  height: 36px; padding: 0 18px; font-size: 13px;
}