/* ── 1. 오늘의 시장 브리핑 카드 ─────────────────────────── */
.briefing-card {
  border-bottom: 1px solid var(--border-primary);
}

.briefing-header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-height);
  padding: 0 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-secondary);
}

.briefing-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.briefing-date {
  font-size: 11px;
  color: var(--text-muted);
}

.briefing-sentiment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
}

.briefing-sentiment::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.briefing-sentiment.bullish { color: var(--color-up); }
.briefing-sentiment.bullish::before {
  background: var(--color-up);
  box-shadow: 0 0 6px rgba(14, 203, 129, 0.5);
}

.briefing-sentiment.bearish { color: var(--color-down); }
.briefing-sentiment.bearish::before {
  background: var(--color-down);
  box-shadow: 0 0 6px rgba(246, 70, 93, 0.5);
}

.briefing-sentiment.neutral { color: var(--color-accent); }
.briefing-sentiment.neutral::before {
  background: var(--color-accent);
  box-shadow: 0 0 6px rgba(240, 185, 11, 0.5);
}

.briefing-summary {
  flex: 1;
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.briefing-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background: var(--bg-base);
}

.briefing-section {
  padding: 10px 16px;
  border-right: 1px solid var(--border-secondary);
}

.briefing-section:last-child {
  border-right: none;
}

.briefing-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-secondary);
}

.briefing-section-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
}

.briefing-section-item .name {
  color: var(--text-tertiary);
}

.briefing-section-item .value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── 2. 티커 보드 ──────────────────────────────────────── */
.ticker-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border-primary);
}

.ticker-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 20px;
  border-right: 1px solid var(--border-secondary);
  position: relative;
}

.ticker-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-right: 1px solid var(--border-secondary);
}

.ticker-server-select {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.ticker-server-select .server-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.ticker-server-select .caret {
  font-size: 10px;
  color: var(--text-muted);
}

.ticker-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ticker-current-price {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}

.ticker-current-price.up { color: var(--color-up); }
.ticker-current-price.down { color: var(--color-down); }

.ticker-unit {
  font-size: 11px;
  color: var(--text-tertiary);
}

.ticker-alert-btn {
  margin-left: auto;
  font-size: 16px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.ticker-alert-btn:hover {
  color: var(--color-accent);
}

.ticker-change-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ticker-change-pct {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.ticker-change-amt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 체결강도 바 */
.ticker-strength {
  margin-top: 6px;
}

.ticker-strength-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 3px;
}

.ticker-strength-label .label { color: var(--text-secondary); font-weight: 500; }
.ticker-strength-label .buy-count { color: var(--color-up); font-family: var(--font-mono); font-weight: 600; }
.ticker-strength-label .sell-count { color: var(--color-down); font-family: var(--font-mono); font-weight: 600; }

.ticker-strength-bar {
  height: 3px;
  display: flex;
  overflow: hidden;
  border-radius: 1px;
}

.ticker-strength-bar .buy {
  background: var(--color-up);
  transition: width var(--transition-normal);
}

.ticker-strength-bar .sell {
  background: var(--color-down);
  transition: width var(--transition-normal);
}

/* 거래소별 시세 */
.ticker-sources {
  display: flex;
  gap: 20px;
  margin-top: 6px;
}

.ticker-source {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ticker-source .source-name {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
}

.ticker-source .source-price {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 스파크라인 */
.ticker-sparkline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px;
  border-right: 1px solid var(--border-secondary);
  min-width: 0;
  position: relative;
}

.sparkline-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.ticker-sparkline svg {
  width: 100%;
  height: 36px;
}

.ticker-sparkline .spark-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.ticker-sparkline .spark-up {
  stroke: var(--color-up, #0ECB81);
}

.ticker-sparkline .spark-down {
  stroke: var(--color-down, #F6465D);
}

/* 우측 통계 2x2 그리드 */
.ticker-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0;
}

.ticker-stat-cell {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-secondary);
  border-right: 1px solid var(--border-secondary);
}

.ticker-stat-cell:nth-child(2),
.ticker-stat-cell:nth-child(4) {
  border-right: none;
}

.ticker-stat-cell:nth-child(3),
.ticker-stat-cell:nth-child(4) {
  border-bottom: none;
}

.ticker-stat-cell .stat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.ticker-stat-cell .stat-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.ticker-stat-cell .stat-value.high { color: var(--color-up); }
.ticker-stat-cell .stat-value.low { color: var(--color-down); }

/* ── 3. 차트 영역 ──────────────────────────────────────── */
.chart-section {
  border-bottom: 1px solid var(--border-primary);
}

.chart-section:fullscreen {
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
}
.chart-section:fullscreen .chart-unified-bar { flex-shrink: 0; }
.chart-section:fullscreen .chart-draw-layout { flex: 1; }
.chart-section:fullscreen .chart-container { height: 100% !important; }

/* 비교 칩 바 */
.compare-chips-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-secondary);
  font-size: 11px;
}
.compare-chips-bar.open { display: flex; }
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  background: rgba(255,255,255,0.03);
}
.compare-chip-remove {
  cursor: pointer;
  font-size: 9px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.compare-chip-remove:hover { opacity: 1; }
.compare-chips-bar .compare-label {
  color: var(--text-tertiary);
  margin-right: 2px;
  font-size: 11px;
  white-space: nowrap;
}
.compare-server-select {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  margin-left: auto;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  min-width: 100px;
}
.compare-server-select:hover { border-color: var(--text-tertiary); }
.compare-server-select:focus { border-color: var(--accent-primary); }

/* 통합 바: OHLCV + 컨트롤 1줄 */
.chart-unified-bar {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 8px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-secondary);
  gap: 0;
}

/* 좌측: OHLCV + MA */
.chart-ohlcv {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 12px;
  border-right: 1px solid var(--border-secondary);
  margin-right: 8px;
}

.chart-ohlcv-item {
  font-family: var(--font-mono);
  font-size: 11px;
}

.chart-ohlcv-item .ohlcv-label {
  color: var(--text-tertiary);
  margin-right: 3px;
}

.chart-ohlcv-item .ohlcv-value {
  color: var(--text-secondary);
  font-weight: 600;
}

.chart-ohlcv-item .ohlcv-value.up { color: var(--color-up); }
.chart-ohlcv-item .ohlcv-value.down { color: var(--color-down); }

.chart-ma-item {
  font-size: 11px;
  color: var(--text-muted);
}

.chart-ma-item.ma5 span { color: #F0B90B; }
.chart-ma-item.ma20 span { color: #6C5CE7; }

/* 우측: 컨트롤 */
.chart-controls {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.chart-separator {
  width: 1px;
  height: 16px;
  background: var(--border-secondary);
  margin: 0 6px;
  flex-shrink: 0;
}

/* ── 커스텀 셀렉트 ───────────────────── */
.chart-custom-select {
  position: relative;
}

.csel-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 100%;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.section-controls .chart-custom-select {
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--border-secondary);
}

.csel-trigger:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.csel-caret {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.chart-custom-select.open .csel-caret {
  transform: rotate(180deg);
}

.chart-custom-select.open .csel-trigger {
  color: var(--color-accent);
}

.csel-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 80px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  z-index: 30;
  padding: 4px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.chart-custom-select.open .csel-dropdown {
  display: block;
}

.csel-option {
  padding: 6px 12px 6px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  white-space: nowrap;
}

.csel-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.csel-option.active {
  color: var(--color-accent);
  font-weight: 600;
}

.csel-option.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--color-accent);
}

/* ── 지표 버튼 ───────────────────────── */
.chart-indicator-btn {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.chart-indicator-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.chart-style-group {
  display: flex;
  align-items: center;
}

.chart-style-btn {
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.chart-style-btn:hover { color: var(--text-secondary); }
.chart-style-btn.active { color: var(--color-accent); }

.chart-compare-btn {
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.chart-compare-btn:hover,
.chart-compare-btn.active { color: var(--color-accent); }

.chart-action-btn {
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.chart-action-btn:hover { color: var(--text-primary); }

/* ── 커스텀 툴팁 ─────────────────────── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-body);
  border: 1px solid var(--border-primary);
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transition-delay: 0s;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.3s;
}

/* 비교 모드 바 */
.compare-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-secondary);
  font-size: 12px;
}

.compare-bar.active { display: flex; }

.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-primary);
  border-radius: 2px;
}

.compare-chip .close {
  cursor: pointer;
  opacity: 0.6;
}

.compare-chip .close:hover { opacity: 1; }

.compare-end-btn {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
  cursor: pointer;
}

.compare-end-btn:hover { color: var(--text-primary); }

/* 차트 드로잉 레이아웃 */
.chart-draw-layout {
  display: flex;
  position: relative;
}
.chart-draw-layout.drawing-mode .chart-container,
.chart-draw-layout.drawing-mode .chart-container canvas,
.chart-draw-layout.drawing-mode .chart-container table { cursor: crosshair !important; }
.chart-draw-layout.hline-hover .chart-container,
.chart-draw-layout.hline-hover .chart-container canvas { cursor: ns-resize !important; }
.drawing-tool-btn.active { background: var(--accent-primary) !important; color: #fff !important; }

/* 좌측 드로잉 도구 */
.chart-drawing-tools {
  width: 32px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
  gap: 2px;
  flex-shrink: 0;
}

.drawing-tool-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.drawing-tool-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.drawing-tool-btn.active {
  color: var(--color-accent);
  background: var(--color-accent-bg);
}

.drawing-tool-btn.danger:hover { color: var(--color-down); }

.drawing-separator {
  width: 20px;
  height: 1px;
  background: var(--border-secondary);
  margin: 2px 0;
}

/* 차트 본체 */
.chart-container {
  flex: 1;
  min-height: 400px;
  background: var(--bg-body);
  position: relative;
}

/* 차트 호버 툴팁 */
.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  background: rgba(15, 18, 23, 0.92);
  border: 1px solid var(--border-primary);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  z-index: 10;
  display: none;
  pointer-events: none;

  transition: left 0.08s ease-out, top 0.08s ease-out;
}

.chart-tooltip.visible { display: block; }

.tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tooltip-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.tooltip-change {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
}

.tooltip-change.up {
  color: var(--color-up);
  background: var(--color-up-bg);
}

.tooltip-change.down {
  color: var(--color-down);
  background: var(--color-down-bg);
}

.tooltip-divider {
  height: 1px;
  background: var(--border-secondary);
  margin: 6px 0;
}

.tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}

.tooltip-label {
  color: var(--text-tertiary);
  font-size: 12px;
}

.tooltip-val {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 12px;
}

.tooltip-val.up { color: var(--color-up); }
.tooltip-val.down { color: var(--color-down); }
.tooltip-val.ma5 { color: #F0B90B; }
.tooltip-val.ma20 { color: #6C5CE7; }

/* 지표 드롭다운 */
.indicator-dropdown {
  position: absolute;
  top: 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  padding: 8px 0;
  min-width: 180px;
  z-index: var(--z-dropdown);
  display: none;
}

.indicator-dropdown.open { display: block; }

.indicator-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.indicator-option:hover { background: var(--bg-hover); }

.indicator-option input[type="checkbox"] {
  accent-color: var(--color-accent);
}

/* ── 4. 하단 2분할 레이아웃 ────────────────────────────── */
.bottom-split {
  display: flex;
  flex-shrink: 0;
  height: 720px;
  overflow: hidden;
}

/* 모바일 통합 탭 — PC에서 숨김 */
.mobile-unified-tabs { display: none; }

/* 호가창 (좌측) */
.orderbook-panel {
  width: 40%;
  min-width: 280px;
  height: 100%;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ── 공용 섹션 헤더 ──────────────────── */
.section-header {
  display: flex;
  align-items: stretch;
  height: var(--header-height);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-secondary);
  flex-shrink: 0;
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.section-tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.section-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 90px;
  padding: 0 14px;
  height: 100%;
  font-size: 12px;
  color: var(--text-tertiary);
  border-right: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.section-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--color-accent);
  transition: left 0.25s ease, right 0.25s ease;
  z-index: 1;
}

.section-tab:first-child {
  border-left: none;
}

.section-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.section-tab:hover::after {
  left: 0;
  right: 0;
}

.section-tab.active {
  color: var(--text-primary);
}

.section-tab.active::after {
  left: 0;
  right: 0;
}

.tab-badge {
  font-size: 10px;
  padding: 1px 5px;
  background: var(--bg-active);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.section-tab.active .tab-badge {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
}

.section-controls {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  height: 100%;
}

.section-controls.source-filters {
  gap: 0;
}

/* 거래소 필터 — 셀 구분 구조 */
.source-filters .source-chip {
  height: 100%;
  padding: 0 12px;
  border: none;
  border-left: 1px solid var(--border-secondary);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.source-filters .source-chip i { visibility: hidden; font-size: 10px; }
.source-filters .source-chip.active i { visibility: visible; }

.source-filters .source-chip:hover {
  background: var(--bg-hover);
}

.source-filters .source-chip.barotem.active {
  color: var(--color-barotem);
}
.source-filters .source-chip.itemmania.active {
  color: var(--color-itemmania);
}
.source-filters .source-chip.itembay.active {
  color: var(--color-itembay);
}

.section-icon-btn {
  width: 36px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
  border-left: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.section-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.section-icon-btn.active {
  color: var(--color-accent);
}

/* 호가 테이블 (table 구조) */
.ob-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.ob-table {
  width: 100%;
  border-collapse: collapse;
}

.ob-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  height: 24px;
  padding: 0 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-secondary);
}

.ob-table thead th.right { text-align: right; }

.ob-row {
  height: 24px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border-secondary);
}

.ob-row:hover { background: var(--bg-hover); }

/* 바 차트 — CSS 변수 기반 ::after */
.ob-row::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--bar-w, 0%);
  z-index: 0;
  pointer-events: none;
}

.ob-row.sell::after { background: var(--color-up-bg); }
.ob-row.buy::after { background: var(--color-down-bg); }

.ob-row td {
  padding: 0 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  position: relative;
  z-index: 1;
  height: 24px;
}

.ob-row.sell .ob-col-price { color: var(--color-up); }
.ob-row.buy .ob-col-price { color: var(--color-down); }

.ob-col-qty {
  text-align: right;
  color: var(--text-secondary);
}

/* 현재가 구분선 */
.ob-current-row { height: 24px; }

.ob-current-price {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  height: 24px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
  position: relative;
  letter-spacing: 0.5px;
}

.ob-current-price i {
  font-size: 12px;
  vertical-align: middle;
  margin-right: 2px;
}

/* 깊이 차트 */
.ob-depth-chart {
  display: none;
  height: 200px;
  background: var(--bg-elevated);
  padding: 8px;
}

.ob-depth-chart.active { display: block; }

.ob-depth-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  margin-bottom: 4px;
}

.ob-depth-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

/* 체결/매물 패널 (우측) */
.trade-panel {
  flex: 1;
  min-width: 280px;
  height: 100%;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* source-chip 기본 스타일은 .source-filters 내에서 정의됨 (section-header 영역) */

/* 체결/매물 테이블 */
.trade-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.trade-table {
  width: 100%;
  border-collapse: collapse;
}

.trade-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  height: 24px;
  padding: 0 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-secondary);
}

.trade-table thead th.right { text-align: right; }
.trade-table thead th.center { text-align: center; }

.trade-table tbody tr {
  height: 24px;
  border-bottom: 1px solid var(--border-secondary);
  transition: background var(--transition-fast);
}

.trade-table tbody tr:hover { background: var(--bg-hover); }
.trade-table tbody tr:last-child { border-bottom: none; }

.trade-table tbody td {
  padding: 0 8px;
  font-size: 12px;
  height: 24px;
  vertical-align: middle;
}

.trade-table .td-source {
  font-size: 11px;
  white-space: nowrap;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-left: 2px solid transparent;
}

.source-badge.barotem { color: var(--color-barotem); background: rgba(79,195,247,0.06); border-left-color: var(--color-barotem); }
.source-badge.itemmania { color: var(--color-itemmania); background: rgba(174,213,129,0.06); border-left-color: var(--color-itemmania); }
.source-badge.itembay { color: var(--color-itembay); background: rgba(255,183,77,0.06); border-left-color: var(--color-itembay); }

.trade-table .td-price {
  width: 150px;
  text-align: right;
  font-family: var(--font-mono);
}

.trade-table .td-qty {
  width: 150px;
  text-align: right;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.trade-table .td-time {
  width: 80px;
  text-align: right;
  font-size: 11px;
  color: var(--text-tertiary);
}

.trade-table .td-link {
  width: 50px;
  text-align: right;
}

.trade-table .td-link a {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.trade-table .td-link a:hover { color: var(--color-accent); }

/* 일별시세 테이블 */
.daily-table {
  width: 100%;
  border-collapse: collapse;
}

.daily-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  height: 24px;
  padding: 0 8px;
  text-align: right;
  border-bottom: 1px solid var(--border-secondary);
}

.daily-table thead th:first-child { text-align: left; }

.daily-table tbody tr {
  height: 24px;
  border-bottom: 1px solid var(--border-secondary);
}

.daily-table tbody tr:hover { background: var(--bg-hover); }

.daily-table tbody td {
  padding: 0 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  text-align: right;
  color: var(--text-secondary);
  height: 24px;
}

.daily-table tbody td:first-child {
  text-align: left;
  font-family: var(--font-ui);
}

.daily-table .td-close { font-weight: 600; color: var(--text-primary); }

/* ── 5. 스마트 계산기 ──────────────────────────────────── */
.calculator-panel {
  padding: 16px;
}

.calc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.calc-header .calc-icon {
  color: var(--color-accent);
  font-size: 18px;
}

.calc-header .calc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.calc-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.calc-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.calc-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--font-mono);
  background: var(--bg-body);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}

.calc-input:focus {
  border-color: var(--color-accent);
}

.calc-input-unit {
  font-size: 12px;
  color: var(--text-tertiary);
}

.calc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}

.calc-preset-btn {
  padding: 4px 8px;
  font-size: 11px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.calc-preset-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

.calc-result {
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-secondary);
}

.calc-result-empty {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 20px;
}

.calc-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-secondary);
}

.calc-summary-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calc-summary-label {
  font-size: 11px;
  color: var(--text-muted);
}

.calc-summary-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.calc-result .trade-table {
  width: 100%;
}

.calc-result .trade-table thead th {
  background: var(--bg-elevated);
}

/* ── 6. 가격 알림 모달 ─────────────────────────────────── */
.alert-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.alert-type-option {
  padding: 20px;
  border: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}

.alert-type-option::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--color-accent);
  transform: scaleY(0);
  transition: transform 0.25s ease;
}

.alert-type-option:hover {
  border-color: var(--border-primary);
  background: rgba(255, 255, 255, 0.02);
}

.alert-type-option.active {
  border-color: var(--border-primary);
  background: var(--color-accent-bg);
}

.alert-type-option.active::before {
  transform: scaleY(1);
}

.alert-type-option .type-icon {
  font-size: 20px;
  color: var(--text-muted);
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.alert-type-option:hover .type-icon {
  color: var(--text-secondary);
}

.alert-type-option.active .type-icon {
  color: var(--color-accent);
}

.alert-type-option .type-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.alert-type-option .type-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.alert-form-group {
  margin-bottom: 12px;
}

.alert-form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}

.alert-form-input,
.alert-form-select {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--bg-body);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.alert-form-input:focus,
.alert-form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(240, 185, 11, 0.15);
}

.alert-form-select {
  background: var(--bg-elevated);
  cursor: pointer;
}

.alert-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.alert-btn-save {
  flex: 1;
  padding: 10px;
  background: var(--color-accent);
  color: var(--bg-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.alert-btn-save:hover { background: var(--color-accent-hover); }

.alert-btn-cancel {
  padding: 10px 16px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.alert-btn-cancel:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

.alert-btn-delete {
  padding: 10px 16px;
  background: transparent;
  color: var(--color-down);
  font-size: 13px;
  cursor: pointer;
}

/* ── 7. 모바일 반응형: 600px 미만만 ─────────────────────── */
@media (max-width: 600px) {

  /* ── iOS WebGL compositing bleed 방지 ──────────────── */
  /* LWC WebGL canvas가 인접 요소 색상 렌더링에 영향을 주므로
     각 섹션을 독립 compositing layer로 강제 분리 */
  .chart-section,
  .ticker-board,
  .briefing-card,
  .bottom-split,
  .orderbook-panel,
  .trade-panel {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* P3 디스플레이에서 depth 바가 과도하게 보이므로 모바일에서 비활성화 */
  .ob-row::after {
    display: none;
  }

  /* 티커 보드 — 2열 그리드 */
  .ticker-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    padding: 0;
  }

  /* 가격 정보 — 1행 왼쪽 */
  .ticker-info {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    padding: 12px 16px;
    border-right: 1px solid var(--border-secondary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .ticker-current-price { font-size: 24px; }
  .ticker-unit { font-size: 10px; }
  .ticker-change-pct { font-size: 12px; }
  .ticker-change-amt { font-size: 11px; }

  /* 스파크라인 — 1행 오른쪽 (가격 옆) */
  .ticker-sparkline {
    grid-row: 1;
    grid-column: 2;
    display: flex !important;
    border-right: none;
    border-bottom: 1px solid var(--border-secondary);
    padding: 10px 12px;
  }

  /* 체결강도 + 거래소시세 — 2행 전폭 */
  .ticker-meta {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    padding: 10px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border-secondary);
    min-width: 0;
  }
  .ticker-strength { width: 100%; }
  .ticker-strength-bar { height: 6px; }
  .ticker-strength-label { font-size: 10px; }
  .ticker-sources {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 4px;
    width: 100%;
  }
  .ticker-source { white-space: nowrap; min-width: auto; flex-shrink: 0; }
  .source-name { font-size: 10px; }
  .ticker-source .source-price { font-size: 11px; }

  /* 통계 그리드 — 3행 전폭 */
  .ticker-stats {
    grid-row: 3;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr 1fr;
  }
  .ticker-stat-cell {
    padding: 8px 16px;
    border-right: 1px solid var(--border-secondary);
  }
  .ticker-stat-cell:nth-child(2),
  .ticker-stat-cell:nth-child(4) { border-right: none; }
  .stat-label { font-size: 10px; }
  .stat-value { font-size: 12px; }

  /* === 차트 영역 === */

  /* 통합 바: 세로 스택 */
  .chart-unified-bar {
    flex-direction: column;
    height: auto;
  }

  /* OHLCV: 1행, 가로 스크롤, 스크롤바 숨김 */
  .chart-ohlcv {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 8px;
    height: 34px;
    border-right: none;
    border-bottom: 1px solid var(--border-secondary);
    margin-right: 0;
    scrollbar-width: none;
  }
  .chart-ohlcv::-webkit-scrollbar { display: none; }
  .chart-ohlcv-item { white-space: nowrap; font-size: 10px; }
  .chart-ma-item { display: none; }

  /* 컨트롤: 2행, 줄바꿈 */
  .chart-controls {
    width: 100%;
    flex-wrap: wrap;
    padding: 0 4px;
    height: 34px;
    align-items: center;
    border-top: none;
  }

  /* 아이콘 크기 최적화 */
  .chart-style-group { gap: 2px; }
  .chart-style-btn,
  .chart-action-btn { width: 28px; height: 28px; font-size: 13px; }
  .chart-indicator-btn { font-size: 11px; padding: 4px 8px; }
  .chart-separator { height: 14px; margin: 0 4px; }

  /* 드로잉 도구 숨김 */
  .chart-drawing-tools { display: none; }

  /* 차트 높이 확대 */
  .chart-container { min-height: 280px; }

  /* 비교 칩 바 */
  .compare-chips-bar { font-size: 10px; flex-wrap: wrap; gap: 6px; }

  /* 툴바 break 제거 */
  .chart-toolbar-break { display: none; }

  /* 호가/체결 하단 → 세로, 통합 탭 기반 */
  .bottom-split {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  /* 모바일 통합 탭 표시 */
  .mobile-unified-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge */
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-surface);
    position: sticky;
    top: var(--gnb-height);
    z-index: 10;
  }
  .mobile-unified-tabs::-webkit-scrollbar { display: none; }
  .unified-tab {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }
  .unified-tab.active {
    color: var(--text-primary);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
  }

  /* 기존 패널 헤더(탭) 숨김 — 통합 탭이 대체 */
  .orderbook-panel > .section-header,
  .trade-panel > .section-header { display: none; }

  .orderbook-panel {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: none;
  }
  .trade-panel {
    width: 100%;
    min-width: 0;
  }

  /* 스크롤 영역 해제 — 풀 리스트 */
  .ob-table-wrap,
  .trade-table-wrap {
    overflow: visible;
    max-height: none;
  }
  .orderbook-panel {
    height: auto;
    overflow: visible;
  }

  .ob-table th,
  .ob-table td { font-size: 11px; padding: 3px 8px; }
  .ob-row { height: 26px; }
  .ob-table tbody tr:last-child { border-bottom: none; }
  .ob-current-price { font-size: 13px; }

  .trade-table th,
  .trade-table td { font-size: 11px; padding: 4px 6px; }
  .trade-table tbody tr:last-child { border-bottom: none; }
  .source-badge { font-size: 9px; padding: 1px 4px; }

  .trade-table .td-time { display: none; }
  .trade-table thead th:nth-child(4) { display: none; }

  #tab-content-daily { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .daily-table { min-width: 500px; }
  .daily-table th,
  .daily-table td { font-size: 11px; padding: 4px 6px; white-space: nowrap; }

  .section-tab { font-size: 12px; }

  .calc-input-group { width: 100%; }
  .calc-presets { flex-wrap: wrap; }
  .calc-preset-btn { min-height: 36px; flex: 1 1 auto; }

  .load-more-btn { min-height: 44px; width: 100%; }

  /* 브리핑 — 2x2 그리드 */
  .briefing-card.open .briefing-body { grid-template-columns: 1fr 1fr; }
  .briefing-section {
    border-right: none;
    border-bottom: 1px solid var(--border-secondary);
    padding: 8px 12px;
  }
  /* 홀수 번째(좌측) 섹션에 우측 구분선 */
  .briefing-section:nth-child(odd) {
    border-right: 1px solid var(--border-secondary);
  }
  /* 하단 2개 섹션은 하단 구분선 제거 */
  .briefing-section:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .alert-type-grid { grid-template-columns: 1fr; }
}

/* ── 스켈레톤 로딩 ─────────────────────────────────────── */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 25%,
    var(--bg-hover) 50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease infinite;
  border-radius: 2px;
}

/* ── 더보기 버튼 ── */
.load-more-wrap {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-secondary);
  flex-shrink: 0;
}
.load-more-btn {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: color var(--transition-fast);
  font-family: inherit;
  padding: 0;
}
.load-more-btn:hover {
  color: var(--text-primary);
}

/* ── 서버 전환 로딩 오버레이 ── */
.switch-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 12, 16, 0.8);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.switch-loading-overlay.active {
  display: flex;
}
.switch-loading-overlay .loader {
  display: inline-grid;
}
.switch-loading-overlay .loader:before,
.switch-loading-overlay .loader:after {
  content: "";
  grid-area: 1/1;
  height: 14px;
  aspect-ratio: 6;
  --c: #0000 64%, #f0b90b 66% 98%, #0000 101%;
  background:
    radial-gradient(35% 146% at 50% 159%, var(--c)) 0 0,
    radial-gradient(35% 146% at 50% -59%, var(--c)) 25% 100%;
  background-size: calc(100%/3) 50%;
  background-repeat: repeat-x;
  clip-path: inset(0 100% 0 0);
  animation: loader-wave 1.5s infinite linear;
}
.switch-loading-overlay .loader:after {
  scale: -1;
}
@keyframes loader-wave {
  50% { clip-path: inset(0); }
  to  { clip-path: inset(0 0 0 100%); }
}
.switch-loading-overlay .loader-text {
  font-size: 0.8rem;
  color: var(--text-muted, #8b949e);
  letter-spacing: 0.02em;
}