:root {
  color-scheme: dark; /* 모바일 force-dark 자동 반전 차단 (다크 전용) */
  --bg: #0e1117;
  --panel: #161b22;
  --panel-strong: #10151d;
  --border: #30363d;
  --fg: #e6edf3;
  --muted: #8b949e;
  --accent: #58a6ff;
  --up: #26a69a;
  --down: #ef5350;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

body {
  display: flex;
  flex-direction: column;
}

.is-hidden {
  display: none !important;
}

/* GoldMiner 의 .chart-top-bar 패턴 이식 (web/css/index.css:535~593 참조).
   향후 packages/core-chart-shell/ 로 추출 예정 — 양쪽 동일 규칙 유지. */
.chart-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 0 0 auto;
}

.chart-top-bar::-webkit-scrollbar { display: none; }

.chart-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.layout-menu {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.chart-top-bar > .chart-trade-overlay {
  flex: 0 1 auto;
  min-width: 0;
}

.chart-footer {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px 16px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  overflow: visible;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

/* #8: 하단 sessions strip(공유 sessions-timeline.css 의 고정 width:720px)이 좁은
   뷰포트에서 chart-footer 를 device-width 밖으로 밀어 페이지 전체가 가로
   오버플로우 → 모바일 shrink-to-fit + 차트/거래패널/strip 이 화면 밖으로 넘치던 버그.
   FXTester 만 한정 수정: footer 가 정상 흐름(모바일 flex-wrap:wrap)이라 strip 이
   자기 줄에서 720 을 강제 → 줄 폭이 viewport 초과. strip 을 flex item 으로 만들어
   가용폭(host grow)까지만 차지하고 좁으면 축소(min-width:0)시킨다. 셀은 JS 가
   offsetWidth 로 매 렌더 재산출(create-sessions-footer-strip.js), now-marker 는
   CSS left:50% 라 가변폭 자동 추종 — JS 변경 불필요. GoldMiner 는 footer 가
   overflow-x:auto(자체 스크롤)+고정 100vw 오버레이라 증상이 없어 공유/ GM CSS 는
   건드리지 않는다(이 규칙은 .chart-footer 스코프라 GM 에 영향 없음). */
.chart-footer .sessions-footer-strip-host {
  display: flex;
  align-items: center;
  /* 가용 슬랙을 차지해 strip 이 채워질 definite 폭 확보. 형제 .draw-tool-group 의
     margin-right:auto / tz·sync 의 margin-left:auto 는 이 grow 와 경쟁해 host 를
     굶기므로 위에서 제거(flex:0 0 auto / margin-left:0)했다. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.chart-footer .sessions-footer-wrap {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.chart-footer .sessions-footer-strip {
  /* 데스크탑 720 cap(회귀 없음), 좁으면 0 까지 축소. */
  flex: 0 1 720px;
  width: auto;
  max-width: 720px;
  min-width: 0;
}

#symbol-select,
.chart-slot-symbol {
  background: rgba(14, 17, 23, 0.82);
  color: var(--fg);
  border: 1px solid rgba(48, 54, 61, 0.88);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
}

#symbol-select {
  min-width: 124px;
}

#symbol-select:disabled,
.chart-slot-symbol:disabled {
  opacity: 0.5;
}

.icon-dropdown {
  position: relative;
  min-width: 96px;
}

.icon-dropdown-trigger,
.icon-dropdown-option {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}

.icon-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.icon-dropdown.is-open .icon-dropdown-trigger {
  border-color: rgba(88, 166, 255, 0.65);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.22);
}

.icon-dropdown.is-disabled .icon-dropdown-trigger {
  opacity: 0.5;
  cursor: default;
}

.icon-dropdown-selected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

.icon-dropdown-chevron {
  color: var(--muted);
  font-size: 11px;
}

.icon-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: rgba(13, 17, 23, 0.98);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.icon-dropdown-option {
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.icon-dropdown-option:hover {
  border-color: rgba(88, 166, 255, 0.5);
  background: rgba(88, 166, 255, 0.08);
}

.icon-dropdown-option.is-selected {
  border-color: rgba(88, 166, 255, 0.65);
  background: rgba(88, 166, 255, 0.12);
  color: var(--accent);
}

.icon-dropdown-option-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.icon-dropdown-option-content.label-hidden {
  width: 100%;
  justify-content: center;
}

.icon-dropdown-preview {
  display: grid;
  grid-template-columns: repeat(var(--icon-columns, 1), minmax(0, 1fr));
  gap: 2px;
  width: calc((var(--icon-cell-size, 6px) * var(--icon-columns, 1)) + (2px * (var(--icon-columns, 1) - 1)));
  min-width: calc((var(--icon-cell-size, 6px) * var(--icon-columns, 1)) + (2px * (var(--icon-columns, 1) - 1)));
}

.icon-dropdown-preview i {
  display: block;
  width: 100%;
  height: var(--icon-cell-size, 6px);
  border-radius: 2px;
  background: currentColor;
  opacity: 0.92;
}

.icon-dropdown-label {
  white-space: nowrap;
}

.sync-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 우측 정렬은 .sessions-footer-strip-host 의 flex-grow 가 슬랙을 차지하며 담당.
     margin-left:auto 는 그 슬랙을 가로채 strip 을 굶겨 가로 오버플로우(#8)를 유발 → 제거. */
  margin-left: 0;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}

.sync-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.sync-toggle input {
  margin: 0;
}

.chart-overlay,
.chart-slot-overlay {
  position: absolute;
  top: 4px;
  left: 4px;
  /* --chart-right-axis-width 는 ChartView 가 chartWrapEl(styleHost) 에 매 프레임
     세팅 — 가격축(우측) 위로 timer/timeframe badge 가 침범하지 않도록 보정. */
  right: calc(var(--chart-right-axis-width, 0px) + 4px);
  z-index: 21;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  pointer-events: none;
}

.chart-slot-overlay > * {
  pointer-events: auto;
}

.chart-slot-overlay > .candle-timer-progress {
  pointer-events: none;
}

/* Per-slot 하단 지표 overlay (RSI+BB+이격도+Stoch). 슬롯 chart container 위에
   absolute 로 얹어 메인 candle 의 하단 영역을 가린다. plot area 폭 정렬은 host
   에서 indicator.setRightAxisWidth(--chart-right-axis-width) 로 보정. */
.slot-bottom-indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  min-height: 120px;
  max-height: 240px;
  z-index: 5;
  background: #0d1117;
  border-top: 1px solid rgba(120, 123, 134, 0.25);
  pointer-events: auto;
}
.slot-bottom-indicator[data-show="0"] {
  display: none;
}

.chart-timeframe-label,
.chart-slot-timeframe {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #58a6ff;
  padding: 1px 6px;
  background: rgba(13, 17, 23, 0.75);
  border-radius: 3px;
  user-select: none;
}

.chart-timeframe-label.is-empty,
.chart-slot-timeframe.is-empty {
  color: #6e7681;
}

#refresh-btn,
#session-btn,
.replay-actions button,
.session-actions button {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}

#refresh-btn:hover,
#session-btn:hover,
.replay-actions button:hover,
.session-actions button:hover {
  background: var(--border);
}

#refresh-btn:disabled,
#session-btn:disabled,
.replay-actions button:disabled,
.session-actions button:disabled,
.replay-speed-field select:disabled,
.session-field select:disabled,
.session-field input:disabled {
  opacity: 0.5;
  cursor: default;
}

main {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
}

.chart-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.chart,
.chart-grid {
  position: absolute;
  inset: 0;
  /* 차트 위 터치 제스처(가격축 드래그 등)가 페이지 전체 스크롤로 번지는 것 차단.
     "화면 전체가 움직임" 해결의 앱쪽 절반 (나머지 절반은 core-chart .u-over touch-action). */
  touch-action: none;
}

/* Phase 4c / 6a: SessionBox / HourGroup SVG overlay (slot 컨테이너 기준 absolute).
   pointer-events:none 로 차트 상호작용을 가리지 않게 오버레이한다. */
.session-overlay,
.hgroup-overlay,
.liqmap-overlay,
.bb-arrow-overlay,
.sma-arrow-overlay,
[class^="wma-arrow-overlay"] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
/* Replay cursor marker — session overlay 보다 위에 (z 3), drawing 보다 아래로. */
.replay-cursor-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.replay-controls {
  position: fixed;
  /* slot overlay (candle timer, timeframe label, pnl overlay 등 z-index 21) 위로
     떠야 드래그 위치에 따라 슬롯 상단 timer 가 패널을 가리지 않는다.
     .session-panel 과 동일 tier (z 50). */
  z-index: 50;
  top: auto;
  right: auto;
  /* Phase 6 footer (Drawing + Sync, ~44px) 위로 올린다. */
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  /* 데스크톱 = 원치수. 모바일 50% 축소는 파일 하단 `@media (hover:none) and
     (pointer:coarse)` 블록에서만 override (task #2). */
  gap: 8px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.94) 0%, rgba(14, 17, 23, 0.94) 100%);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(88, 166, 255, 0.08);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.replay-controls.is-replay-active {
  border-color: rgba(88, 166, 255, 0.75);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(88, 166, 255, 0.35), 0 0 24px rgba(88, 166, 255, 0.35);
  background: linear-gradient(180deg, rgba(30, 52, 82, 0.94) 0%, rgba(16, 26, 42, 0.94) 100%);
}

.replay-controls.is-session-hidden {
  display: none;
}

@keyframes replay-pulse {
  0%, 100% { box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(88, 166, 255, 0.45), 0 0 24px rgba(88, 166, 255, 0.35); }
  50%      { box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(88, 166, 255, 0.7),  0 0 34px rgba(88, 166, 255, 0.55); }
}

.replay-controls.is-replay-active:has(.replay-play-btn.is-playing) {
  animation: replay-pulse 2s ease-in-out infinite;
}

.replay-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 2px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.replay-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
}

/* 현재 replay cursor 시각 (UTC). Replay 비활성 시 '--:--'. */
.replay-time {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #58a6ff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.replay-drag-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.replay-controls.is-dragging .replay-header {
  cursor: grabbing;
}

.replay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.replay-speed-field,
.replay-timeframe-field,
.replay-bar-close-stop-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.replay-speed-field select,
.replay-timeframe-field select,
.replay-bar-close-stop-field select,
.session-field select,
.session-field input {
  background: rgba(14, 17, 23, 0.92);
  color: var(--fg);
  border: 1px solid rgba(48, 54, 61, 0.88);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}

.replay-bar-close-stop-label {
  white-space: nowrap;
}
.replay-bar-close-stop-select {
  min-width: 80px;
}
.replay-bar-close-stop-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.replay-speed-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 220px;
  height: 22px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.replay-speed-slider:focus { outline: none; }
.replay-speed-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right, rgba(88, 166, 255, 0.9), rgba(240, 180, 41, 0.9));
  border-radius: 2px;
}
.replay-speed-slider::-moz-range-track {
  height: 4px;
  background: linear-gradient(to right, rgba(88, 166, 255, 0.9), rgba(240, 180, 41, 0.9));
  border-radius: 2px;
}
.replay-speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fafbfc;
  border: 2px solid #1f6feb;
  margin-top: -5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.replay-speed-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fafbfc;
  border: 2px solid #1f6feb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.replay-speed-slider:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.replay-speed-label {
  min-width: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fg);
  text-align: left;
}

.replay-status {
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.replay-controls.is-disabled {
  opacity: 0.92;
}

.replay-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 34px;
  padding: 6px 9px;
}

.replay-icon-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.replay-play-btn .icon-pause {
  display: none;
}

.replay-play-btn.is-playing .icon-play {
  display: none;
}

.replay-play-btn.is-playing .icon-pause {
  display: block;
}

.session-panel {
  position: absolute;
  inset: 0;
  /* slot overlay (candle timer, timeframe label, pnl overlay 등 z-index ~21) 위로
     덮어야 패널 활성 동안 차트 요소가 비져나오지 않는다. */
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 10, 16, 0.72);
  backdrop-filter: blur(10px);
}

.session-card {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(88, 166, 255, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(14, 17, 23, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

.session-copy h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.session-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.session-field,
.data-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.session-field span,
.session-random-toggle span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.session-symbol-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.session-symbol-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
}

.session-symbol-item:hover {
  background: rgba(88, 166, 255, 0.08);
}

.session-symbol-item input {
  margin: 0;
  cursor: pointer;
}

.session-symbol-item:has(input:checked) {
  background: rgba(88, 166, 255, 0.16);
  border-color: rgba(88, 166, 255, 0.55);
}

.session-symbol-item:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.session-random-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.session-random-toggle input {
  margin: 0;
}

.session-meta {
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.session-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Open Chart 강조 CTA — 가운데, 큰 사이즈, 맑은 푸른색.
   다른 .session-actions button (Cancel) 스타일은 그대로. */
.session-actions .session-apply-cta {
  padding: 18px 60px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: linear-gradient(180deg, #4ea1ff 0%, #1e7bff 60%, #0561e6 100%);
  border: 1px solid rgba(120, 180, 255, 0.55);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(30, 123, 255, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.08s, box-shadow 0.15s, background 0.15s;
}
.session-actions .session-apply-cta:hover {
  background: linear-gradient(180deg, #66b1ff 0%, #2a8aff 60%, #0d6cf0 100%);
  box-shadow: 0 8px 24px rgba(30, 123, 255, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.session-actions .session-apply-cta:active {
  transform: scale(0.985);
  box-shadow: 0 4px 12px rgba(30, 123, 255, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.session-actions .session-apply-cta:disabled {
  background: linear-gradient(180deg, #3a4a60 0%, #2a3850 100%);
  border-color: rgba(120, 140, 170, 0.35);
  color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
  cursor: not-allowed;
}

/* inline 모드에서는 input 자체는 숨기고 캘린더만 보여준다. */
.data-picker .data-picker-inline-input {
  display: none;
}

.data-picker .flatpickr-calendar.inline {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
}

/* 연도(numInput) 가시성 — flatpickr 기본 색상이 너무 어두움 */
.data-picker .flatpickr-calendar .flatpickr-current-month .cur-year,
.data-picker .flatpickr-calendar .numInputWrapper input.cur-year {
  color: var(--fg);
  font-weight: 600;
  background: transparent;
}

.data-picker .flatpickr-calendar .numInputWrapper:hover {
  background: rgba(88, 166, 255, 0.12);
}

.data-picker .flatpickr-calendar .numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--fg);
}

.data-picker .flatpickr-calendar .numInputWrapper span.arrowDown::after {
  border-top-color: var(--fg);
}

.data-picker .flatpickr-calendar .flatpickr-monthDropdown-months {
  color: var(--fg);
}

.data-picker .flatpickr-input {
  width: 100%;
  min-height: 40px;
  padding-right: 12px;
}

.data-picker .flatpickr-calendar {
  width: 100%;
  margin-top: 6px;
  border: 1px solid rgba(88, 166, 255, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(14, 17, 23, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

.data-picker .flatpickr-months,
.data-picker .flatpickr-weekdays {
  background: transparent;
}

.data-picker .flatpickr-month {
  color: var(--fg);
  fill: var(--fg);
}

.data-picker span.flatpickr-weekday {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.data-picker .flatpickr-current-month .flatpickr-monthDropdown-months,
.data-picker .flatpickr-current-month input.cur-year {
  color: var(--fg);
}

/* Windows Chromium 의 native <select> 펼침 패널이 dark 모드에서도 흰색 배경으로
   표시되는 문제 — color-scheme:dark 로 OS 가 dark 패널 그리도록 hint + select/option
   에 명시 background. */
.data-picker .flatpickr-current-month .flatpickr-monthDropdown-months {
  color-scheme: dark;
  background-color: #1a2435;
  border-radius: 4px;
  padding: 2px 8px 2px 4px;
}
.data-picker .flatpickr-current-month .flatpickr-monthDropdown-months option,
.data-picker .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #1a2435;
  color: var(--fg);
}

/* 연도 spinner 와 input 간격 — numInputWrapper 자체에 좌우 여유 + spinner 영역
   확보로 화살표가 input 숫자에 너무 붙지 않게. */
.data-picker .flatpickr-current-month .numInputWrapper {
  margin-left: 8px;
  margin-right: 4px;
  min-width: 6.5ch;
  padding-right: 6px;
}
.data-picker .flatpickr-current-month input.cur-year {
  padding-right: 8px;
}

.data-picker .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.data-picker .flatpickr-current-month input.cur-year:hover,
.data-picker .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.data-picker .flatpickr-current-month input.cur-year:focus {
  background: rgba(88, 166, 255, 0.12);
}

.data-picker .flatpickr-prev-month:hover svg,
.data-picker .flatpickr-next-month:hover svg {
  fill: var(--accent);
}

.data-picker .flatpickr-current-month .numInputWrapper span {
  opacity: 1;
  border-color: rgba(139, 148, 158, 0.35);
}

.data-picker .flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--fg);
}

.data-picker .flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: var(--fg);
}

.data-picker .flatpickr-current-month .numInputWrapper span:hover {
  background: rgba(88, 166, 255, 0.18);
}

.data-picker .flatpickr-current-month .numInputWrapper:hover {
  background: rgba(88, 166, 255, 0.08);
}

/* 헤더가 monthDropdown + year + 최근 버튼 모두 수용하도록 좌우 여유 확장 */
.data-picker .flatpickr-current-month {
  left: 6%;
  right: 6%;
  width: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* "최근" 버튼 — 헤더 우측 끝, monthDropdown/year 와 동일 시각 weight */
.data-picker .flatpickr-current-month .fp-recent-btn {
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(88, 166, 255, 0.16);
  color: var(--fg);
  border: 1px solid rgba(88, 166, 255, 0.32);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
.data-picker .flatpickr-current-month .fp-recent-btn:hover {
  background: rgba(88, 166, 255, 0.28);
  border-color: rgba(88, 166, 255, 0.55);
}
.data-picker .flatpickr-current-month .fp-recent-btn:active {
  transform: scale(0.97);
}

.data-picker .flatpickr-day {
  color: var(--fg);
  border-radius: 10px;
}

.data-picker .flatpickr-day:hover,
.data-picker .flatpickr-day:focus {
  background: rgba(88, 166, 255, 0.12);
  border-color: rgba(88, 166, 255, 0.18);
}

.data-picker .flatpickr-day.today {
  border-color: rgba(88, 166, 255, 0.45);
}

.data-picker .flatpickr-day.selected,
.data-picker .flatpickr-day.startRange,
.data-picker .flatpickr-day.endRange {
  background: rgba(88, 166, 255, 0.92);
  border-color: rgba(88, 166, 255, 0.92);
  color: #08111f;
}

.data-picker .flatpickr-day.flatpickr-disabled,
.data-picker .flatpickr-day.prevMonthDay,
.data-picker .flatpickr-day.nextMonthDay {
  color: rgba(139, 148, 158, 0.5);
}

.data-picker .flatpickr-calendar.arrowTop:before {
  border-bottom-color: rgba(88, 166, 255, 0.22);
}

.data-picker .flatpickr-calendar.arrowTop:after {
  border-bottom-color: rgba(22, 27, 34, 0.98);
}

.chart-grid {
  display: grid;
  gap: 2px;
  padding: 0;
}

.chart-grid[data-layout="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.chart-grid[data-layout="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-grid[data-layout="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.chart-grid[data-layout="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.chart-grid[data-layout="8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.chart-grid[data-layout="10"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.chart-grid[data-layout="12"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* 가로 한 줄 레이아웃 (rows=1, cols=N) */
.chart-grid[data-layout="3h"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

.chart-grid[data-layout="4h"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

.chart-grid[data-layout="5h"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

.chart-grid[data-layout="6h"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

.chart-grid[data-layout="7h"] {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

.chart-slot {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 3px;
  overflow: hidden;
  /* 기본 커서는 default (화살표). 차트 캔버스는 LWC 가 crosshair 로 덮고, BE 라인
     근처에선 BE drag controller 가 ns-resize 로 setProperty. cursor:pointer 였던
     기존 동작은 슬롯 전체가 클릭 가능하단 의미였으나 시각적 노이즈가 커서 제거. */
}

.chart-slot.focused {
  border-color: #58a6ff;
  border-width: 2px;
}

.chart-slot-symbol {
  flex: 1 1 auto;
  min-width: 0;
}

.chart-slot-chart-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.chart-slot-chart {
  /* LWC 가 컨테이너에 inline `position: relative` 를 강제 박아 inset:0 이 무효화되는
     현상이 single-chart→multi 전환 시 슬롯 0 에서 재현됨 (chartEl 이 LWC 내부 table
     사이즈로 stretch → 부모 wrap 보다 커져 시간축이 잘림). !important 로 CSS
     우선순위 강제. LWC 자식들은 absolute/relative 둘 다 stacking context 동일. */
  position: absolute !important;
  inset: 0 !important;
}

.chart-slot-status,
.status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  pointer-events: none;
  font-size: 13px;
}

.chart-slot-status.error,
.status.error {
  color: var(--down);
}

/* Phase 4e2: position view overlays (.position-pnl-overlay + .tp-sl-overlay).
   chart-slot-chart-wrap 내부에 chartEl 과 같은 좌표계로 배치. */
.position-pnl-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}
.pos-pnl-label {
  position: absolute;
  left: 4px;
  transform: translateY(-50%);
  font-size: 10px;
  font-family: 'Segoe UI', Consolas, monospace;
  font-weight: 600;
  background: rgba(13,17,23,0.82);
  padding: 1px 5px;
  border-radius: 3px;
  border-left: 2px solid;
  white-space: nowrap;
  line-height: 1.6;
}
.tp-sl-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
.tp-sl-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  font-size: 10px;
  font-family: 'Segoe UI', Consolas, monospace;
  font-weight: 600;
  background: rgba(13,17,23,0.88);
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid currentColor;
  white-space: nowrap;
  line-height: 1.6;
}
.tp-sl-label.has-clear {
  left: 6px;
  transform: translateY(-50%);
}
.tp-sl-side {
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.9;
}
.tp-sl-tag {
  font-weight: 700;
  letter-spacing: 0.03em;
}
.tp-sl-clear-btn {
  pointer-events: auto;
  border: 1px solid #484f58;
  background: rgba(13,17,23,0.96);
  color: #8b949e;
  border-radius: 2px;
  padding: 0 4px;
  margin-left: 2px;
  font-size: 9px;
  line-height: 1.2;
  cursor: pointer;
}
.tp-sl-clear-btn:hover {
  color: #f0f6fc;
  border-color: #8b949e;
}
.tp-sl-label.be-label {
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
  cursor: ns-resize;
  user-select: none;
}
.tp-sl-label.be-label.is-hover {
  opacity: 0.85;
  visibility: visible;
  pointer-events: auto;
}
/* 모바일: 노출된 BE 라벨은 직접 잡아 드래그해야 TP/SL 이 설정된다. 라벨이 작아
   잡기 어려우므로 상하/좌우로 터치 그랩 영역을 넓힌다(시각 영향 없음, hit-area 만 확장).
   pseudo 영역을 터치해도 event.target 은 .be-label 로 해석되어 grab 분기가 동작한다. */
.tp-sl-label.be-label.is-hover::before {
  content: '';
  position: absolute;
  left: -18px;
  right: -18px;
  top: -16px;
  bottom: -16px;
}
.tp-sl-pnl {
  font-weight: 600;
}
.tp-sl-label.pending-order-label {
  left: 20%;
  border-style: dashed;
}

/* BE 라인 드래그 중 표시되는 수익/손실 preview 라벨.
   core-be-drag 의 createMoneyLabel 이 이 클래스로 div 를 생성해 차트 컨테이너에
   absolute 로 붙이고 top 을 inline 으로 설정. left 와 시각 스타일은 CSS 가 담당.
   라인 좌측 (chart 좌측 영역) 에 배치해 가독성 확보. */
.drag-preview-money {
  position: absolute;
  left: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 6;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  background: rgba(13, 17, 23, 0.92);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.tp-sl-lot {
  font-weight: 600;
  margin-left: 2px;
}

.chart-slot-meta {
  /* 사용자 요청 — bars/date-range/digits 메타 텍스트 노출 안 함. DOM 자체는
     core-chart-slot 이 항상 만들어서 다른 코드가 setMetaText 등을 호출해도 안전. */
  display: none;
}

.radial-tf-menu {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.radial-tf-menu--open {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
}

.radial-tf-svg {
  overflow: visible;
}

.radial-tf-path {
  fill: #161b22;
  stroke: #30363d;
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.1s;
}

.radial-tf-seg:hover .radial-tf-path {
  fill: #21262d;
}

.radial-tf-seg.active .radial-tf-path {
  fill: #1f6feb;
}

.radial-tf-seg--highlight .radial-tf-path {
  fill: #3a2a08;
  stroke: #f0b429;
  stroke-width: 2;
}

.radial-tf-seg--highlight:hover .radial-tf-path {
  fill: #4d3810;
}

.radial-tf-seg--highlight.active .radial-tf-path {
  fill: #1f6feb;
  stroke: #f0b429;
  stroke-width: 2;
}

.radial-tf-seg--highlight .radial-tf-label {
  fill: #f0b429;
  font-weight: 800;
}

.radial-tf-label {
  fill: #c9d1d9;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
}

.radial-tf-seg:hover .radial-tf-label,
.radial-tf-seg.active .radial-tf-label {
  fill: #ffffff;
}

.radial-tf-center-circle {
  fill: #0d1117;
  stroke: #30363d;
  stroke-width: 2;
  cursor: pointer;
}

.radial-tf-center-circle:hover {
  fill: #161b22;
  stroke: #484f58;
}

.radial-tf-center-text {
  fill: #58a6ff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .chart-grid[data-layout="2"],
  .chart-grid[data-layout="4"],
  .chart-grid[data-layout="6"],
  .chart-grid[data-layout="8"],
  .chart-grid[data-layout="10"],
  .chart-grid[data-layout="12"],
  .chart-grid[data-layout="3h"],
  .chart-grid[data-layout="4h"],
  .chart-grid[data-layout="5h"],
  .chart-grid[data-layout="6h"],
  .chart-grid[data-layout="7h"] {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(260px, 1fr);
  }
}

@media (max-width: 720px) {
  .chart-header {
    padding: 4px 10px;
  }

  .chart-footer {
    padding: 6px 10px;
    flex-wrap: wrap;
  }

  .sync-controls {
    margin-left: 0;
  }

  #symbol-select {
    min-width: 110px;
  }

  .chart-overlay {
    max-width: calc(100% - 24px);
    flex-wrap: wrap;
  }

  .replay-controls {
    top: auto;
    right: auto;
    /* 모바일에서 .chart-footer 가 flex-wrap 으로 2줄이 될 수 있어 더 띄운다. */
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%);
    /* 좁은 뷰포트 폭 여백 (원치수). 모바일 50% 축소는 하단 coarse-pointer 블록 담당. */
    max-width: calc(100vw - 24px);
  }

  .session-card {
    padding: 18px;
  }

  .session-actions button {
    width: 100%;
  }
}

/* Phase 4b2: drawing toolbar + overlay (공유 core-drawing engine).
   GoldMiner/web/css/index.css 와 동일 규칙 — 버튼/아이콘/레이어 계약 공유. */
.draw-tool-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  /* margin-right:auto 제거 — 슬랙을 .sessions-footer-strip-host 의 flex-grow 가
     가져가 strip(max-width:720)을 채우고, 좁은 뷰포트에선 함께 축소해 고정 720 이
     footer 를 device-width 밖으로 밀던 가로 오버플로우(#8)를 막는다. 우측 정렬은
     host grow 가 담당. */
  flex: 0 0 auto;
}
.btn-draw-tool {
  min-width: 34px;
  min-height: 28px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #c9d1d9;
  line-height: 1;
  cursor: pointer;
}
.btn-draw-tool:hover {
  background: #161b22;
}
.btn-draw-tool .draw-icon {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
}
.btn-draw-tool .draw-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-draw-tool .draw-icon-node {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
}
.btn-draw-tool.active {
  background: #1c2a3a;
  border-color: #58a6ff;
  color: #58a6ff;
}
.btn-snap-toggle {
  margin-left: 6px;
  border-left: 1px solid #30363d;
  padding-left: 10px;
}
.tz-toggle-btn {
  /* 우측 정렬은 .sessions-footer-strip-host flex-grow 가 담당. margin-left:auto 는 footer
     슬랙을 가로채 strip 을 굶겨 가로 오버플로우(#8)를 유발하던 원인 → 제거. */
  margin-left: 0;
  min-width: 56px;
  min-height: 28px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #c9d1d9;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
}
.tz-toggle-btn:hover {
  background: #161b22;
  border-color: #58a6ff;
  color: #58a6ff;
}
.tz-toggle-btn[data-mode="server"] {
  color: #f0a020;
  border-color: #6b4a18;
}
.tz-toggle-btn[data-mode="server"]:hover {
  border-color: #f0a020;
}
.btn-snap-toggle.active {
  background: #1c2a3a;
  border-color: #58a6ff;
  color: #58a6ff;
}
.btn-draw-delete {
  opacity: 0.3;
  transition: opacity 0.12s, color 0.12s;
  pointer-events: none;
}
.btn-draw-delete.has-selection {
  opacity: 1;
  pointer-events: auto;
  color: #ff7b72;
}
.btn-draw-delete.has-selection .draw-icon-stroke {
  stroke: #ff7b72;
}
.btn-draw-delete.has-selection:hover {
  background: rgba(255, 123, 114, 0.12);
}

.draw-underlay-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.draw-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.draw-overlay .shape {
  vector-effect: non-scaling-stroke;
}

/* trade overlay — chart-top-bar 안에 inline 으로 자리잡는 단일 통합 툴바.
   GoldMiner 와 동일하게 항상 1개만 존재 (#chartTradeOverlay). */
.chart-trade-overlay {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.chart-trade-overlay::-webkit-scrollbar {
  display: none;
}
.chart-trade-overlay.is-visible {
  display: inline-flex;
}
.chart-trade-overlay-left,
.chart-trade-overlay-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: max-content;
}
.chart-trade-overlay-left {
  flex: 0 0 auto;
  justify-content: flex-start;
}
.chart-trade-overlay-center {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.chart-trade-overlay-right {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
}
.chart-trade-overlay .btn-action {
  min-height: 22px;
  padding: 2px 8px;
  white-space: nowrap;
}
.chart-trade-overlay .chart-lot-input {
  height: 22px;
  width: 56px;
}

/* Trade overlay 섹션 분할:
   - chartTopBar 의 #chartTradeOverlay 는 close/take(.right) 만 보이게.
   - replay-controls 의 #chartTradeOverlayBottom 은 Buy/Sell + lot(.left/center) 만 보이게.
   각 위치에서 동일한 trade-overlay-view 가 full DOM 을 그리지만 CSS 로 클리핑해
   사용자 시야엔 한 섹션만 노출. display:none 영역은 pointer 이벤트도 안 받음. */
#chartTradeOverlay > .chart-trade-overlay-left,
#chartTradeOverlay > .chart-trade-overlay-center {
  display: none;
}
#chartTradeOverlayBottom > .chart-trade-overlay-right {
  display: none;
}

/* REPLAY 컨트롤 하단 trade overlay (Buy/Sell+lot).
   데스크톱 = 원치수. 모바일 50% 축소는 파일 하단 `@media (hover:none) and
   (pointer:coarse)` 블록에서만 override (task #2). (core-trade-ui base 50% 룰은
   `.chart-trade-overlay .btn-action`(0,2,0) — 아래 `.replay-controls …`(0,3,0)이
   더 높은 specificity 라 base 가 안 닿아 모바일 블록에서 직접 줄인다.)
   replay-controls 의 좁은 폭에 맞춰 wrap 허용. */
.replay-controls > .chart-trade-overlay--replay-bottom {
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(120, 123, 134, 0.2);
}
.replay-controls > .chart-trade-overlay--replay-bottom.is-visible {
  display: flex;
}
.replay-controls .chart-trade-overlay-left {
  gap: 6px;
}
.replay-controls .chart-trade-overlay-center {
  flex: 0 0 auto;
}
.replay-controls .chart-trade-overlay .btn-action {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 6px;
}
.replay-controls .chart-trade-overlay .chart-lot-input {
  height: 36px;
  width: 72px;
  font-size: 13px;
  padding: 4px 8px;
}

/* 공통 action 버튼 톤 (GoldMiner index.css 에서 가져옴) */
.btn-action {
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  background: #161b22;
  color: #c9d1d9;
  border-color: #30363d;
}
.btn-action:hover { opacity: 0.85; }
.btn-action:active { opacity: 0.6; }
.btn-action:disabled {
  background: #1b2129 !important;
  color: #6e7681 !important;
  border-color: #3a434e !important;
  opacity: 1;
  cursor: not-allowed;
}
.btn-action:disabled:hover,
.btn-action:disabled:active { opacity: 1; }
/* PnL 텍스트 변동에도 너비 안정 — Close 1234.56 까지 흔들리지 않게. */
.btn-close-profit, .btn-close-loss, .btn-tp { min-width: 110px; text-align: center; }
.btn-buy {
  background: #0c2d6b;
  color: #58a6ff;
  border-color: #1f6feb;
}
.btn-sell {
  background: #5a1a0a;
  color: #f0883e;
  border-color: #d17e2b;
}
.btn-tp {
  background: #1a3a1a;
  color: #3fb950;
  border-color: #238636;
}
.btn-close-profit {
  background: #1a3a1a;
  color: #3fb950;
  border-color: #238636;
}
.btn-close-loss {
  background: #3a1a1a;
  color: #f85149;
  border-color: #da3633;
}
.lot-input {
  width: 52px;
  padding: 2px 4px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 3px;
  color: #c9d1d9;
  font-size: 11px;
  text-align: center;
  font-family: inherit;
}
.lot-input:focus { outline: none; border-color: #58a6ff; }
.lot-input::-webkit-outer-spin-button,
.lot-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lot-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* === MultiClose floating panel + checkbox MC (shared with GoldMiner) === */
  /* MultiClose 버튼 — 체크박스 형식. 체크 시 floating panel 열림. */
  .btn-multi-close {
    background: #21262d;
    color: #c9d1d9;
    border-color: #484f58;
    min-width: 50px;
  }
  .btn-multi-close.mc-checkbox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
  }
  .btn-multi-close .mc-checkbox-box {
    width: 13px;
    height: 13px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .btn-multi-close[aria-pressed="true"] {
    background: rgba(121, 192, 255, 0.20);
    color: #79c0ff;
    border-color: #79c0ff;
  }
  .btn-multi-close[aria-pressed="true"] .mc-checkbox-box {
    background: #79c0ff;
    border-color: #79c0ff;
  }
  .btn-multi-close[aria-pressed="true"] .mc-checkbox-box::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border-right: 2px solid #0d1117;
    border-bottom: 2px solid #0d1117;
    transform: rotate(45deg);
  }
  /* MC 패널이 열린 동안 동일 심볼의 close 계열 버튼 잠금 — 충돌 방지.
     텍스트는 multi-close-modal 의 _restoreLockSnapshot 가 lock 시점 값으로 freeze. */
  .is-mc-locked {
    pointer-events: none !important;
    opacity: 0.32 !important;
    cursor: not-allowed !important;
    filter: saturate(0) !important;
  }

  /* MultiClose floating panel — 차트 위에 떠 있는 작은 floating widget.
     FXTester replay-controls 와 동일한 fixed + drag-handle 패턴, backdrop 없음. */
  .mc-panel {
    position: fixed;
    top: 88px;
    right: 16px;
    z-index: 2500;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
    display: none;
    flex-direction: column;
    border: 1px solid rgba(88, 166, 255, 0.35);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(22, 27, 34, 0.94) 0%, rgba(14, 17, 23, 0.94) 100%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(88, 166, 255, 0.08);
    backdrop-filter: blur(12px);
    overflow: hidden;
  }
  .mc-panel.is-open { display: flex; }
  .mc-panel.is-dragging { box-shadow: 0 28px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(88, 166, 255, 0.4); }
  .mc-panel-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #2a3a52;
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  .mc-panel.is-dragging .mc-panel-header { cursor: grabbing; }
  .mc-symbol {
    font-size: 15px;
    font-weight: 700;
    color: #f4f7fb;
    letter-spacing: 0.04em;
  }
  /* 종목명 우측 tri-state 마스터 체크박스 — 하단 개별 포지션 전체 선택/해제. */
  .mc-master-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 2px;
  }
  .mc-master-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #79c0ff;
  }
  .mc-master-checkbox:disabled { cursor: not-allowed; opacity: 0.4; }
  /* MultiClose 버튼 수익합산 라벨 — 색은 인라인(캔들 상승/하락색)으로 주입. */
  .btn-multi-close .mc-pnl-sum { font-weight: 600; }
  .mc-panel .mc-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px 0;
  }
  .mc-panel .mc-tab {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #334760;
    border-radius: 6px;
    background: #1a2435;
    color: #96a7bf;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .mc-panel .mc-tab:hover {
    color: #c9d1d9;
    border-color: #58a6ff;
  }
  .mc-panel .mc-tab.is-active {
    background: #1f3050;
    color: #f4f7fb;
    border-color: #58a6ff;
  }
  .mc-panel-body {
    padding: 10px 14px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 60px;
  }
  .mc-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 2px 2px;
  }
  .mc-list.hidden { display: none; }
  .mc-pos-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.05s;
  }
  .mc-pos-btn:hover { opacity: 0.85; }
  .mc-pos-btn:active { transform: scale(0.98); }
  .mc-pos-btn:disabled, .mc-pos-btn.is-pending {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .mc-pos-btn.is-closed {
    opacity: 0.35;
    background: #1a2435;
    color: #6e7681;
    border-color: #334760;
    cursor: not-allowed;
  }
  .mc-pos-btn.is-checked {
    box-shadow: 0 0 0 2px #79c0ff, 0 0 8px rgba(121, 192, 255, 0.55);
    border-color: #79c0ff;
  }
  .mc-pos-btn.is-checked.btn-close-profit { background: rgba(63, 185, 80, 0.34); }
  .mc-pos-btn.is-checked.btn-close-loss   { background: rgba(248, 81, 73, 0.34); }
  .mc-pos-btn .mc-pos-lot {
    flex: 0 0 auto;
    letter-spacing: 0.02em;
  }
  .mc-pos-btn .mc-pos-pnl {
    flex: 1 1 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  /* 우측 끝 명료한 체크박스 — 빈 사각형 → 체크 시 채워진 cyan + ✓ */
  .mc-pos-btn .mc-pos-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.25);
    position: relative;
    display: inline-block;
    box-sizing: border-box;
  }
  .mc-pos-btn.is-checked .mc-pos-check {
    background: #79c0ff;
    border-color: #79c0ff;
  }
  .mc-pos-btn.is-checked .mc-pos-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #0d1117;
    border-bottom: 2px solid #0d1117;
    transform: rotate(45deg);
  }
  .mc-empty {
    text-align: center;
    padding: 24px 8px;
    color: #6e7681;
    font-size: 13px;
  }
  .mc-panel-footer {
    padding: 10px 14px 12px;
    border-top: 1px solid #2a3a52;
  }
  .mc-total-close-btn {
    width: 100%;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 1px solid #484f58;
    border-radius: 6px;
    background: linear-gradient(180deg, #2a3340, #1f2630);
    color: #c9d1d9;
    font-size: 13px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, filter 0.15s;
  }
  .mc-total-close-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .mc-total-close-btn:hover:not(:disabled) { filter: brightness(1.18); }
  .mc-total-close-btn .mc-total-pnl {
    font-variant-numeric: tabular-nums;
  }
  .mc-total-close-btn.btn-close-profit:not(:disabled) {
    color: #3fb950;
    border-color: rgba(63, 185, 80, 0.55);
  }
  .mc-total-close-btn.btn-close-loss:not(:disabled) {
    color: #f85149;
    border-color: rgba(248, 81, 73, 0.55);
  }

/* ── History modal (task #41) ────────────────────────────────────────────
   csv 한 줄 입력 → 모든 슬롯에 진입↔청산 trend line 표시. 세션 메모리. */
.history-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99000;                  /* radial-tf-menu (100000) 아래, replay/grid 위 */
  background: rgba(13, 17, 23, 0.62);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.history-modal-backdrop.is-hidden {
  display: none;
}
.history-modal {
  width: min(520px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.98) 0%, rgba(14, 17, 23, 0.98) 100%);
  border: 1px solid rgba(88, 166, 255, 0.40);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
  color: var(--fg, #c9d1d9);
  font-size: 12px;
}
.history-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(120, 123, 134, 0.18);
}
.history-modal-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.history-modal-close {
  background: none;
  border: none;
  color: #c9d1d9;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.history-modal-close:hover { color: #58a6ff; }
.history-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}
.history-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-field > span {
  font-size: 11px;
  color: #8b949e;
}
.history-csv-input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 8px 10px;
  background: rgba(13, 17, 23, 0.85);
  border: 1px solid rgba(120, 123, 134, 0.35);
  border-radius: 6px;
  color: #c9d1d9;
}
.history-csv-input:focus {
  border-color: #58a6ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.history-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.history-apply {
  background: rgba(63, 185, 80, 0.18);
  border-color: rgba(63, 185, 80, 0.55);
  color: #3fb950;
}
.history-clear {
  background: rgba(248, 81, 73, 0.12);
  border-color: rgba(248, 81, 73, 0.42);
  color: #f85149;
}
.history-error {
  min-height: 16px;
  font-size: 11px;
  color: #f85149;
}
.history-list-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-list-title {
  font-size: 11px;
  color: #8b949e;
}
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid rgba(120, 123, 134, 0.16);
  border-radius: 6px;
}
.history-list li {
  padding: 6px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  border-bottom: 1px solid rgba(120, 123, 134, 0.08);
}
.history-list li:last-child { border-bottom: 0; }
.history-list li.is-empty {
  color: #6e7681;
  text-align: center;
  font-family: inherit;
}

/* ───────────────────────────────────────────────────────────────────────────
   task #2: replay-controls floating 거래 UI 50% 축소 = 모바일(터치) 전용.
   `@media (hover: none) and (pointer: coarse)` 는 실제 터치 디바이스(모바일·
   풀스크린 webview 래퍼)에서만 매치, 데스크톱 마우스(창을 좁혀도 hover:hover/
   pointer:fine)에선 매치 안 됨 → 데스크톱은 위쪽 base 규칙(원치수) 그대로 유지.
   값들은 commit 59be761 에서 무조건 적용됐던 50% 축소본을 그대로 옮긴 것.
   ─────────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* 컨테이너 여백/간격/폭 50% 축소. */
  .replay-controls {
    gap: 4px;
    max-width: min(260px, calc(100vw - 16px));
    padding: 6px 7px;
    border-radius: 7px;
  }
  /* 하단 trade overlay (Buy/Sell+lot) 내부 치수 50% 축소. */
  .replay-controls > .chart-trade-overlay--replay-bottom {
    gap: 4px;
    padding-top: 3px;
    margin-top: 2px;
  }
  .replay-controls .chart-trade-overlay-left {
    gap: 3px;
  }
  .replay-controls .chart-trade-overlay .btn-action {
    min-height: 18px;
    padding: 4px 7px;
    font-size: 11px;
    border-radius: 4px;
  }
  .replay-controls .chart-trade-overlay .chart-lot-input {
    height: 18px;
    width: 48px;
    font-size: 11px;
    padding: 2px 4px;
  }
}

/* ── 토스트 알림 (band/MA 터치 등) ─────────────────────────────────────── */
.fx-toast-container {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}

.fx-toast {
  pointer-events: auto;
  cursor: pointer;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.fx-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.fx-toast--alert {
  border-left-color: #ffb300;
}

.fx-toast--error {
  border-left-color: var(--down);
}

@media (max-width: 720px) {
  .fx-toast-container {
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: none;
  }
}