/* ──────────────────────────────────────────────────────────────────────────
   Spike Zones / engine — 5분봉 거래 결과 그리드 (미니멀 다크 톤)
   ──────────────────────────────────────────────────────────────────────────
   ops-health 와 동일 색감, 시안 그대로의 컴팩트 그리드.
   - 셀: 정사각형 가까운 직사각형, 둥근 모서리 없음
   - 한국식: win=빨강, loss=파랑
   - 좌측 축: NOW + 일/월 변화 지점만 표기
   ────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;
  --bg:        #111111;
  --bg-soft:   #19191c;
  --ink:       #f2f2f2;
  --muted:     #a8a8a8;
  --dim:       #5a5a60;
  --line:      #1a1a1d;

  /* 시안의 짙은 톤 */
  --win-bg:        rgba(176, 42, 47, 0.65);
  --win-bg-soft:   rgba(176, 42, 47, 0.42);
  --win-fg:        #ff8a8e;

  --loss-bg:       rgba(28, 78, 152, 0.78);
  --loss-bg-soft:  rgba(28, 78, 152, 0.50);
  --loss-fg:       #6ea4ff;

  --grid-gap:      2px;
  --cell-h:        32px;

  --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum', 'zero';
}

/* 리로드 시 데이터 로드 전후 페이지 높이 차이로 스크롤바가 출현/소실되며
   뷰포트 너비가 흔들리는 것을 방지 */
html { scrollbar-gutter: stable; }

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

/* ── boot splash ──────────────────────────────────────────────── */
.boot-splash {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg);
  z-index: 999;
}
.boot-splash-spinner {
  /* 사용자 요청 (2026-05-13): 30% 더 크게. 24→31px, border 2→3px (시각 균형) */
  width: 31px; height: 31px;
  border: 3px solid #15151a;
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── auth gate ───────────────────────────────────────────────── */
.auth-gate {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg);
  padding: 24px;
  z-index: 100;
}
.auth-card {
  width: min(320px, 100%);
  text-align: center;
}
.auth-card .eyebrow {
  font-size: 10px; letter-spacing: 0;
  color: var(--dim); margin: 0 0 6px;
  text-transform: uppercase;
}
.auth-card h2 {
  margin: 0 0 14px;
  font-weight: 400; font-size: 16px;
  letter-spacing: 0;
}
.auth-copy { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-input {
  background: #0a0a0a; color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 10px;
  font: inherit;
  outline: none;
  text-align: center;
  letter-spacing: 0;
}
.auth-input:focus { border-color: #2a2a30; }
.auth-button {
  background: var(--ink); color: #000;
  border: 0;
  padding: 10px 12px;
  font: inherit; font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}
.auth-button.is-danger {
  background: #b02a2f;
  color: #fff;
}
.auth-button-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.auth-button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-button-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.28);
  border-top-color: #000;
  border-radius: 999px;
  animation: auth-spin 800ms linear infinite;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.auth-button-confirm.is-loading .auth-button-label {
  visibility: hidden;
}
.auth-button-confirm.is-loading .auth-button-spinner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform 은 회전 애니메이션이 차지하므로 가운데 정렬은 negative margin 으로 처리 */
  margin: -7px 0 0 -7px;
}
.auth-button:disabled:not(.is-loading) { opacity: 0.5; cursor: not-allowed; }
.auth-button-confirm.is-loading { cursor: progress; }
.auth-button-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.auth-button-secondary:hover { border-color: #2a2a30; }
.auth-message {
  color: var(--win-fg);
  font-size: 11px; min-height: 14px;
  margin: 8px 0 0;
}
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* ── board ─────────────────────────────────────────────────────── */
.board {
  display: flex; flex-direction: column;
  min-height: 100vh;   /* fallback for older browsers */
  min-height: 100dvh;  /* iOS Safari excludes URL bar from dvh */
  max-width: 720px;
  margin: 0;
  padding: 18px 28px 24px;
  gap: 16px;
}

/* topbar — "Spike Zones / engine"  vs  ACTIVE  DRYRUN */
.topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px;
  /* 리로드 중 폰트 로드/내용 전환 시 미세한 vertical jitter 방지 */
  min-height: 22px;
  padding-top: 10px;
}
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
  line-height: 0;
}
.brand-logo {
  display: block;
  height: 22px;       /* 데스크탑 기본 */
  width: auto;
  /* SVG 가 white fill 이라 추가 색 처리 불요 */
}
/* mode toggle — 미니멀: 텍스트 + 라이트닷 */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;   /* topbar 안에서 상단 정렬 (로고는 하단 유지) */
}
.mode-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 11px;
  line-height: 14px;            /* 고정: 폰트 로드/색 전환 시 height 변동 방지 */
  height: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease, opacity 140ms ease;
}
.mode-toggle-button-with-dot { gap: 6px; }
.mode-toggle-button.is-active { color: var(--ink); }
.mode-toggle-button:hover:not(:disabled):not(.is-active) { color: var(--muted); }
.mode-toggle-button:disabled { opacity: 0.5; cursor: progress; }
.mode-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}
.mode-status-dot-green {
  background: #39ff14;  /* 형광 그린 (네온 라임) */
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.85);
  animation: green-dot-blink 1.2s ease-in-out infinite alternate;
}
@keyframes green-dot-blink {
  from { opacity: 1; box-shadow: 0 0 10px rgba(57, 255, 20, 0.95); }
  to   { opacity: 0.45; box-shadow: 0 0 4px rgba(57, 255, 20, 0.3); }
}
.mode-status-dot-red {
  background: #8a4a4a;
  box-shadow: 0 0 6px rgba(138, 74, 74, 0.4);
}
.mode-status-dot-orange {
  background: #8a7240;
  box-shadow: 0 0 6px rgba(138, 114, 64, 0.4);
}

.status-link-button {
  padding: 0;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.status-link-button:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* info split — 우측 슬롯만 사용 (좌측 totals 제거됨) */
.info-split {
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
  /* 리로드 시 데이터 유무에 따라 높이 흔들리지 않도록 고정
     2행 stat-cell(38px×2) + row-gap(20px) + padding(20+20) = 136px */
  min-height: 194px;
  box-sizing: border-box;
}
.info-right {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 38px);
  gap: 20px 14px;
  align-content: start;
}
.stat-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 38px;     /* 행 높이 고정: 데이터 들어와도 흔들림 없음 */
  overflow: hidden;
}
.stat-label {
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-sub {
  font-size: 10px;
  color: var(--dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.stat-value {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-value.is-loss { color: var(--loss-fg); }
.stat-value.is-win  { color: var(--win-fg); }
.stat-value-neutral { color: #ffffff; }
.stat-label-sub { font-weight: 400; color: inherit; }
.stat-value .money-power-wrap {
  justify-content: flex-start;
  max-width: 100%;
}
#statMoneyPower { cursor: pointer; }
#statMoneyPower .money-power-stack { cursor: pointer; }
#statMoneyPower .money-power-stack {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
#statMoneyPower .money-power-mode {
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 12px;
  letter-spacing: 0;
}

/* markets-scroll: market-header + grid-wrap 을 한 가로 스크롤 컨테이너로 묶음.
   좌측은 .board(720) 안에서 로고/헤더와 정렬 유지.
   우측은 viewport 끝까지 확장(.board max-width 720 제약 무시) → 가로폭 큰 디바이스에서 매트릭스 다 보임. */
.markets-scroll {
  overflow-x: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-right: calc(100% + 28px - 100vw);  /* .board 우측 padding 까지 통과해 viewport 끝까지 */
  cursor: grab;
}
.markets-scroll.is-grabbing {
  cursor: grabbing;
  user-select: none;
}
.markets-scroll.is-grabbing * {
  user-select: none;
  cursor: grabbing !important;
}
.markets-scroll > .grid-wrap {
  margin-top: 8px;  /* market-header 와 사이 간격 (기존 -8 override) */
}

/* market header */
.market-header {
  display: grid;
  gap: var(--grid-gap);
  padding-left: 30px;  /* time-axis 너비(30px) + grid-gap(2px) 보정 */
  /* 리로드 중 innerHTML 갱신 시 높이 흔들리지 않게 고정 */
  min-height: 42px;
  min-width: max-content;
}
/* TSAEV01 등 SMA gap 없는 엔진: market-gap span 자체가 없으므로 헤더 컴팩트 (사용자 요청 2026-05-21).
   :has() 미지원 브라우저 폴백 위해 JS 가 .is-no-gap 클래스도 .market-header 에 부착함. */
.market-header:not(:has(.market-gap)),
.market-header.is-no-gap { min-height: auto; }

/* 일간 합계 셀 — 일반 셀보다 한 톤 더 어둡게 */
.cell.day-total            { font-size: 12px; font-weight: 900; }
.cell.day-total.is-empty   { background: #151517; }  /* --bg(#090909)~--bg-soft(#111114) 중간 */
.cell.day-total.is-win     { background: rgba(176, 42, 47,  0.22); color: #c96d70; }
.cell.day-total.is-loss    { background: rgba(28,  78, 152, 0.28); color: #5883cc; }
.cell.day-total.is-now     { font-weight: 900; }
.cell.day-total.is-now.is-win  { background: rgba(176, 42, 47,  0.26); }
.cell.day-total.is-now.is-loss { background: rgba(28,  78, 152, 0.30); }
.market-col-head {
  text-align: center;
  padding: 6px 0;
  /* 행 높이 고정: warmup(11px)/normal(13px) 차이로 흔들리지 않게 */
  min-height: 42px;
  box-sizing: border-box;
}
/* gap 없는 col-head (TSAEV01): padding/min-height/margin 모두 축소 → 라벨+%만 컴팩트 표시.
   JS 폴백: .market-header.is-no-gap 일 때 child col-head 도 적용. */
.market-col-head:not(:has(.market-gap)),
.market-header.is-no-gap .market-col-head {
  min-height: auto;
  padding: 2px 0;
}
.market-col-head:not(:has(.market-gap)) .market-pct,
.market-header.is-no-gap .market-col-head .market-pct {
  margin-top: 0;
}
.market-col-head .market-label {
  display: block;
  font-size: 12px;
  line-height: 16px;  /* UA 디폴트(~1.5×=18px) 로 추가 공백 잡히는 것 방지 */
  letter-spacing: 0;
  color: var(--muted);
  text-transform: uppercase;
}
/* 코인명 → TradingView 차트 링크 (기존 라벨 외형 유지, hover 시만 강조) */
a.market-label-link {
  text-decoration: none;
  color: var(--muted);
  cursor: pointer;
}
a.market-label-link:hover {
  color: var(--text, #fff);
  text-decoration: underline;
}
.market-col-head .market-pct {
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 16px;
  color: var(--win-fg);
  margin-top: 2px;
}
.market-col-head .market-pct.is-loss   { color: var(--loss-fg); }
.market-col-head .market-pct.is-warmup { color: var(--dim); font-size: 11px; line-height: 16px; }
.market-col-head.is-display-only {
  opacity: 0.48;
}
.market-col-head.is-accumulation-watch .market-label {
  color: #6fb08a;
}
.cell.is-display-only {
  opacity: 0.45;
  filter: saturate(0.65);
}
/* Total 컬럼: pct 자리에 "Total" 라벨 표시 — 다른 마켓 수익률과 Y축 정렬 */
.market-col-head.is-total-head .market-pct.market-total-label {
  color: var(--muted);
  text-transform: uppercase;
}
.market-count-head {
  cursor: help;
}
.market-gap {
  display: block;
  font-size: 11px;
  color: #888;
  line-height: 1.2;
}

/* grid layout — 단일 그리드. markets-scroll 안에서 가로 스크롤. */
.grid-wrap {
  margin-top: -8px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--grid-gap);
  position: relative;
}

.time-axis {
  display: flex; flex-direction: column;
  align-items: flex-start;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0;
}
.time-axis-tick {
  height: var(--cell-h);
  display: flex; align-items: center;
  margin-bottom: var(--grid-gap);
  padding-left: 2px;
}
.time-axis-tick.is-major { color: var(--muted); height: var(--cell-h); }

.grid {
  display: grid;
  gap: var(--grid-gap);
  min-width: max-content;
}

/* cells */
.cell {
  position: relative;
  min-width: 80px;
  height: var(--cell-h);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  letter-spacing: 0;
  background: var(--bg-soft);
  color: var(--dim);
}
.cell.is-empty { background: var(--bg-soft); color: var(--dim); }
.cell.is-win   { background: var(--win-bg-soft);  color: var(--win-fg); }
.cell.is-loss  { background: var(--loss-bg-soft); color: var(--loss-fg); }
.cell.is-now            { background: var(--win-bg);   color: var(--ink); font-weight: 400; height: var(--cell-h); }
.cell.is-now.is-loss    { background: var(--loss-bg);  color: var(--ink); }
.cell.is-now-pipe       { color: var(--ink); font-size: 10px; height: var(--cell-h); }
/* NOW idle 셀에 buyRule (dmk + sma) 진단 표기 — ops-health Note 셀 색상 규칙과 동일 */
.cell.is-buyrule { font-size: 10px; }
.cell.is-buyrule.is-buyrule-green  { color: #6ad27a; background: rgba(106, 210, 122, 0.20); }
.cell.is-buyrule.is-buyrule-orange { color: #d9a866; background: rgba(217, 168, 102, 0.12); }
.cell.is-buyrule.is-buyrule-yellow { color: #d9c866; background: rgba(217, 200, 102, 0.10); }
.cell-stack {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.03;
  gap: 2px;
  padding: 2px 0;
  text-align: center;
  overflow: hidden;
}
.cell-main {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.02;
  white-space: nowrap;
}
.cell-sub {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: 0.72;
  white-space: nowrap;
}
.cell.is-buyrule .cell-main {
  font-size: 10px;
}
.cell.is-buyrule .cell-sub {
  font-size: 8px;
}
.cell.is-now .cell-main {
  font-size: 12px;
}
.cell.is-now .cell-sub {
  font-size: 9px;
}
.money-power-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: max-content;
  min-width: 0;
  height: 12px;
  vertical-align: middle;
}
.money-power-seg {
  width: 4px;
  height: 12px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.18);
}
.money-power-seg.is-sell {
  background: rgba(28, 78, 152, 0.96);
}
.money-power-seg.is-buy {
  background: rgba(176, 42, 47, 0.96);
}
.money-power-seg.is-dummy {
  opacity: 0.92;
}
.money-power-wrap.is-sparse {
  opacity: 0.75;
}
.money-power-wrap.is-empty .money-power-seg.is-sell,
.money-power-wrap.is-empty .money-power-seg.is-buy {
  background: rgba(255, 255, 255, 0.10);
}
.money-power-tooltip-gauge {
  display: flex;
  height: 12px;
}
.rolling-number {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: calc(var(--roll-width, 0) * 0.55em);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.rolling-char,
.rolling-digit {
  display: inline-block;
  min-width: 0.55em;
  text-align: center;
}
.rolling-digit {
  position: relative;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.08em;
  contain: paint;
}
.rolling-wheel {
  display: flex;
  flex-direction: column;
  height: 20em;
  line-height: 1em;
  transform: translate3d(0, calc(var(--roll-to, 0) * -1em), 0);
}
.rolling-wheel span {
  display: block;
  height: 1em;
  line-height: 1em;
}
.rolling-digit.is-rolling .rolling-wheel {
  animation: rolling-wheel 520ms cubic-bezier(0.16, 0.78, 0.2, 1) both;
  backface-visibility: hidden;
  will-change: transform;
}
@keyframes rolling-wheel {
  from { transform: translate3d(0, calc(var(--roll-from, 0) * -1em), 0); }
  to   { transform: translate3d(0, calc(var(--roll-to, 0) * -1em), 0); }
}
.position-blocks {
  display: flex;
  width: 100%;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 4px 2px;
  overflow: hidden;
  text-align: center;
}
.position-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.position-line {
  font-size: 9px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.position-head {
  font-size: 10px;
  font-weight: 600;
}
.cell.is-blocked-history { background: #1a1a1d; color: var(--dim); }
.cell[data-tooltip-kind] { cursor: pointer; }

/* 역사적 백테스트 셀: 전체 40% opacity + 살짝 보라색 tint 로 LIVE/DRYRUN 실거래 셀과 시각 구분.
   data-source="backtest" 인 셀에만 적용 — LIVE/DRYRUN 실거래 셀은 정상 win/loss 색상 + 불투명 유지
   (2026-05-09 사용자 지적: ONDO 21:36→21:47 실주문은 LIVE 정상색이어야 함). */
.cell.is-history[data-source="backtest"] {
  opacity: 0.4;
}
.cell.is-history.is-win[data-source="backtest"]::after,
.cell.is-history.is-loss[data-source="backtest"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(145, 92, 255, 0.12);
}
.cell.is-history.is-empty::after {
  content: none;
}

/* NOW 셀 tick flash — 값이 바뀐 순간 방향색(up=win 빨강 / down=loss 파랑)으로 1회 번쩍 후 정적 색으로 fade.
   상시 호흡은 제거 — 평소엔 정적 배경(.cell.is-now 의 var(--win-bg)/var(--loss-bg)),
   값이 바뀐 렌더에서만 오버레이가 셀 배경 위·텍스트 아래(z-index:-1)에서 1회 번쩍. */
.cell.is-now { isolation: isolate; }
.cell-tick-flash {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.cell-tick-flash.is-tick-up   { animation: cell-tick-up 700ms ease-out both; }
.cell-tick-flash.is-tick-down { animation: cell-tick-down 700ms ease-out both; }
@keyframes cell-tick-up {
  0%   { background: rgba(176, 42, 47, 0.92); }
  100% { background: rgba(176, 42, 47, 0); }
}
@keyframes cell-tick-down {
  0%   { background: rgba(28, 78, 152, 0.92); }
  100% { background: rgba(28, 78, 152, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cell-tick-flash { animation: none; display: none; }
  .rolling-digit.is-rolling .rolling-wheel {
    animation: none;
  }
}

.cell-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  min-width: 180px;
  max-width: min(280px, calc(100vw - 24px));
  /* 2026-05-19: tooltip 높이가 viewport 넘으면 안쪽 스크롤 가능하게.
     모바일에서 tooltip 하단이 화면 밖으로 나가 못 보던 케이스 fix. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 12px;
  background: rgba(8, 8, 10, 0.96);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0;
  pointer-events: none;
  border-radius: 6px;
  transform: translate3d(-9999px, -9999px, 0);
  visibility: hidden;
  opacity: 0;
  transition: opacity 80ms ease;
}
/* 모바일 (터치) 에서만 tooltip 내부 스크롤 가능하도록 pointer-events 활성.
   PC 호버는 기존대로 pointer-events: none 유지 (mouseout 추적 보존). */
@media (pointer: coarse) {
  .cell-tooltip {
    pointer-events: auto;
  }
}
.cell-tooltip-block + .cell-tooltip-block {
  margin-top: 4px;
}
.cell-tooltip-marketline {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.1;
}
.cell-tooltip-value {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.12;
}
.cell-tooltip-label {
  font-size: 10px;
  line-height: 1.05;
  opacity: 0.72;
}
.cell-tooltip-price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.08;
  white-space: nowrap;
}
.cell-tooltip-price-empty {
  display: inline-block;
  min-width: 20px;
}
.cell-tooltip-arrow {
  display: inline-block;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1;
  vertical-align: -0.05em;
}
.cell-tooltip.is-visible {
  visibility: visible;
  opacity: 1;
}
/* pinned 상태도 일반 호버와 동일한 테두리/그림자 유지
   (이전: 보라색 테두리 + 강한 그림자로 핀 표시 → 사용자 요청으로 제거) */
.cell-tooltip.is-pinned {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.cell-tooltip.is-copied::after {
  content: 'COPIED';
  display: block;
  margin-top: 6px;
  color: #7fb3ff;
}

/* Engine Realistic-PnL summary tooltip (statEngine 호버) */
.cell-tooltip.is-engine {
  min-width: 240px;
  max-width: min(320px, calc(100vw - 24px));
  font-size: 12px;
  line-height: 1.55;
}
.engine-tooltip-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.engine-tooltip-title {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.engine-tooltip-verdict {
  font-size: 11px;
  color: var(--muted);
}
.engine-tooltip-engine {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.engine-tooltip-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.engine-tooltip-meta > div + div { margin-top: 2px; }
.engine-tooltip-rows {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 8px;
}
.engine-tooltip-row {
  display: flex; justify-content: space-between; gap: 12px;
}
.engine-tooltip-row > span:first-child { color: var(--muted); }
.engine-tooltip-row > span:last-child  { color: var(--ink); white-space: nowrap; }
.engine-tooltip-branchhead {
  color: var(--muted);
  margin-bottom: 4px;
}
.engine-tooltip-branches {
  display: flex; flex-direction: column; gap: 2px;
}
.engine-tooltip-branch {
  display: grid; grid-template-columns: 40px 60px 1fr;
  column-gap: 8px;
}
.engine-tooltip-branch > span:first-child  { color: var(--muted); }
.engine-tooltip-branch > span:nth-child(2) { color: var(--ink); text-align: right; }
.engine-tooltip-branch > span:last-child   { color: var(--muted); text-align: right; }

/* AI section (tooltip 하단 합성) */
.engine-tooltip-divider {
  height: 1px;
  background: var(--muted);
  opacity: 0.18;
  margin: 10px 0;
}
.engine-tooltip-ai-head {
  display: flex; align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.engine-tooltip-ai-title {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
  flex: 1;
}
.engine-tooltip-ai-state {
  font-size: 11px;
}
.engine-tooltip-ai-yes { color: #4ade80; }
.engine-tooltip-ai-no  { color: var(--muted); }
.engine-tooltip-ai-tier {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.engine-tooltip-ai-tier-0 { background: #2a2a2a; color: var(--muted); }
.engine-tooltip-ai-tier-1 { background: #1f3a2a; color: #7ad99a; }
.engine-tooltip-ai-tier-2 { background: #1f3a4a; color: #7ab7d9; }
.engine-tooltip-ai-tier-3 { background: #3a1f4a; color: #c77ad9; }
.engine-tooltip-ai-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.engine-tooltip-ai-meta > div + div { margin-top: 2px; }
.engine-tooltip-ai-rows {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 10px;
}
.engine-tooltip-ai-tiers {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 8px;
}
.engine-tooltip-ai-tierline {
  display: grid;
  grid-template-columns: 28px 60px 1fr;
  column-gap: 8px;
  font-size: 10px;
  line-height: 1.4;
}
.engine-tooltip-ai-tierline.is-active .engine-tooltip-ai-tierlabel { color: #7ad99a; }
.engine-tooltip-ai-tierline.is-inactive { opacity: 0.45; }
.engine-tooltip-ai-tierlabel {
  font-weight: 500;
  color: var(--muted);
}
.engine-tooltip-ai-tiername { color: var(--ink); }
.engine-tooltip-ai-tierdesc { color: var(--muted); }
.engine-tooltip-ai-footnote {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
  margin-top: 6px;
  line-height: 1.4;
}


/* load older button */
.load-older-wrap {
  display: flex; justify-content: center;
  padding: 14px 0 4px;
}
.load-older-button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 8px 16px;
  font: inherit; font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.load-older-button:hover { color: var(--ink); border-color: #2a2a30; }
.load-older-button:disabled {
  opacity: 0.38;
  cursor: default;
}
.load-older-button:disabled:hover {
  color: var(--muted);
  border-color: var(--line);
}

/* status footer */
.status-strip {
  flex: 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 11px; color: var(--dim);
  letter-spacing: 0;
  text-transform: uppercase;
}
.status-group { display: flex; flex-direction: column; gap: 4px; }
.status-group-row { display: flex; align-items: center; gap: 10px; }
.status-group-right { align-items: flex-end; text-align: right; }
.status-divider { flex: 1; }
.status-link {
  color: var(--muted);
  text-decoration: none;
  font-variant-ligatures: contextual;
  font-feature-settings: "calt" 1;
}
.status-link:hover { color: var(--ink); }
.status-health.is-degraded { color: var(--loss-fg); }
.status-health.is-error    { color: var(--win-fg); }

/* responsive */
@media (max-width: 480px) {
  .board       { padding: 14px 10px 14px; gap: 14px; }
  .brand-logo  { height: 18px; }
  :root        { --cell-h: 28px; }
  .cell        { font-size: 12px; }
  .info-split  { grid-template-columns: 1fr; }
  .info-right:empty { display: none; }  /* 모바일: 우측 빈 슬롯 숨김 */
  /* 모바일에서도 4컬럼 × 2행 (8셀). 폭이 좁으므로 gap/폰트 살짝 축소. */
  .info-right  { grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
  .info-right .stat-value { font-size: 12px; line-height: 16px; }
  .info-right .stat-label { font-size: 9px; letter-spacing: 0.03em; }
}

/* ─── TEMA-RS — 헤더 stat-cell + 클릭 팝업 (cell-tooltip 과 동일 톤) ───────── */
.tema-popup {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 12px;
  background: rgba(8, 8, 10, 0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  font-size: 11.5px;
  color: var(--muted);
}
.tema-popup.is-hidden { display: none; }
.tema-popup .tema-popup-title { color: var(--ink); font-weight: 600; font-size: 12px; }
.tema-popup .tema-popup-sub {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.tema-popup .cell-tooltip-block + .cell-tooltip-block { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tema-popup .tema-table { width: 100%; border-collapse: collapse; }
.tema-popup .tema-table td {
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tema-popup .tema-table td:first-child { color: var(--ink); padding-right: 10px; }
.tema-popup .tema-table td:last-child { text-align: right; }
.tema-popup .is-win { color: var(--win-fg); }
.tema-popup .is-loss { color: var(--loss-fg); }
.tema-popup .tema-warm { font-size: 9px; color: var(--dim); }
.tema-popup .tema-dim { color: var(--dim); }
#pineTemaCell { cursor: pointer; }

.cell.is-incident{background:var(--bg-soft);color:var(--dim)}

.grid,.time-axis{contain:layout style paint}

.load-splash{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.55);z-index:998;backdrop-filter:blur(1px)}
.load-splash.is-on{display:grid}
.load-splash-spinner{width:31px;height:31px;border:3px solid #15151a;border-top-color:var(--ink);border-radius:50%;animation:spin 800ms linear infinite}

.auth-gate.is-overlay{background:rgba(0,0,0,.58)}.auth-gate.is-overlay .auth-card{background:#151517;border:1px solid rgba(255,255,255,.14);padding:22px 24px;box-sizing:border-box}.auth-input,.mode-gate input,input[type=password]{font-size:16px}.brand{position:relative}.stat-cell .stat-value{text-align:left}.stat-value .rolling-number{display:flex;width:100%;justify-content:flex-start}#statMdd{white-space:nowrap}#statMdd .rolling-number{display:inline-flex;width:auto}.rolling-number{transition:min-width 520ms cubic-bezier(0.16,0.78,0.2,1)}.rolling-char.is-pad{overflow:hidden;animation:rolling-char-exit 520ms cubic-bezier(0.16,0.78,0.2,1) both}@keyframes rolling-char-exit{from{min-width:.55em;width:.55em}to{min-width:0;width:0}}.rolling-char.is-enter{overflow:hidden;animation:rolling-char-enter 520ms cubic-bezier(0.16,0.78,0.2,1) both}@keyframes rolling-char-enter{from{min-width:0;width:0;opacity:0}to{min-width:.55em;width:.55em;opacity:1}}.mode-gate-hint{margin:8px 0 0;padding:8px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.7;text-align:left;white-space:pre;overflow-x:auto;color:#c8ccd6}#statStrategyLogic{display:block;text-align:left}.active-live-banner:empty{display:none}.active-live-banner{margin:0 0 8px;padding:7px 10px;font-size:11px;letter-spacing:.12em;text-align:center}.active-live-notice{margin-top:4px;font-size:10px;letter-spacing:0;color:#ffe9ea}.active-live-banner.is-active{background:#8f1d24;color:#ffd8da}.active-live-banner.is-dryrun{background:rgba(255,255,255,.08);color:#c8ccd6}.strategy-select{display:block;width:100%;max-width:120px;margin:0;padding:0 14px 0 0;background:transparent url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23c8ccd6%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E') no-repeat right 1px center/12px 12px;color:inherit;border:0;font:inherit;text-align:left;text-align-last:left;-moz-text-align-last:left;outline:0;appearance:none;-webkit-appearance:none}.strategy-select.is-live-tick{color:#37ca34}.strategy-select option{color:#111;background:#fff}.strategy-select option.is-live-tick{color:#37ca34}.markets-scroll,.grid-wrap,.grid,.time-axis,.load-older-wrap{overflow-anchor:none}.load-older-wrap{min-height:52px;box-sizing:border-box}.time-axis-tick.is-month-label{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;line-height:1.02}.time-axis-tick-month{display:block;font-size:9px;line-height:1.05;letter-spacing:.02em}.cell.is-buyrule.is-buyrule-neutral{color:#c8ccd6;background:rgba(200,204,214,.08)}.cell.is-month-summary{opacity:.9}.cell.is-month-summary:not(.is-empty){box-shadow:inset 0 0 0 9999px rgba(255,255,255,.040)}.cell.is-month-summary:not(.is-empty)::before{content:'';position:absolute;top:0;left:0;width:0;height:0;border-top:5px solid rgba(255,255,255,.50);border-right:5px solid transparent}.cell.is-month-summary.is-win{background:rgb(101 22 25 / 51%);color:#ffa0a3}.cell.is-month-summary.is-loss{background:rgb(10 40 85 / 59%);color:#82b2ff}.backtest-validation{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;cursor:pointer}.backtest-validation-title{margin-bottom:8px;color:var(--ink);font-size:11px;letter-spacing:.02em;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}.backtest-header-lines{margin:6px 0 10px;opacity:.75}.backtest-header-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:4px;line-height:1.45}.backtest-validation.is-copied .backtest-validation-title::after{content:' COPIED';color:#7fb3ff}.backtest-validation-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;cursor:grab}.backtest-validation-scroll.is-grabbing{cursor:grabbing;user-select:none}.backtest-validation-scroll.is-grabbing *{user-select:none;cursor:grabbing!important}.backtest-validation table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.backtest-validation th,.backtest-validation td{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.06);text-align:right;white-space:nowrap}.backtest-validation th:first-child,.backtest-validation td:first-child{padding-left:6px;padding-right:8px;text-align:left}.backtest-validation th{color:var(--dim);font-weight:500;text-transform:uppercase;letter-spacing:.04em}.backtest-validation tbody tr:nth-child(even) td{background:rgba(255,255,255,.035)}.backtest-validation tbody tr:last-child td{color:var(--ink);border-bottom:0;background:rgba(255,255,255,.055)}@media(max-width:480px){.backtest-validation-title{margin-bottom:5px;letter-spacing:0;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}.backtest-header-row{grid-template-columns:52px minmax(0,1fr);gap:8px}.backtest-validation table{width:max-content;min-width:calc(100% + 72px)}.backtest-validation th{letter-spacing:0}}
@media(max-width:480px){.markets-scroll{margin-right:calc(100% + 10px - 100vw)}}.market-label.is-rookie-green{color:#37ca34}.market-label.is-rookie-yellow{color:#e8c33a}.market-label-link.is-rookie-green:hover,.market-label-link.is-rookie-yellow:hover{opacity:.8}