/* 백테스트 탭(2026-09-10) — 레이아웃·간격만. 버튼 모양은 `buttons.css` 변형(D-076)을 그대로
   쓴다. 표 모양은 `table.css`(`.screen-table` 재사용) 것을 그대로 쓴다.
   좁은 화면 규칙은 여기 없다 — `mobile-backtest.css` 뿐(`mobile.css` 규약).
   ‼️ **적록색약 대응(2026-09-11, 사용자 요청 — 강한 적록색약)** — 이 탭은 `chart.css` 의
   전역 `--chart-up`/`--chart-down`(한국식 빨강↑/파랑↓) 을 **안 쓴다**. 승패·양음을 전부
   `--bt-safe-a`(파랑)/`--bt-safe-b`(주황) 한 쌍으로만 가른다 — 색이 곧 유일한 단서가
   되면 안 되므로 **어디서든 색과 함께 기호·글자를 같이 둔다**(거래표 ▲/▼/●, 캔들
   매수/매도 글자, 차트 끝 배수 라벨, 손절/익절/신고가 옆 글자, 범례의 선 모양). 새로운
   승패 표기를 추가할 때 빨강·초록을 쓰지 않는다 — `web/js/backtest/CLAUDE.md` 하드 규칙. */

:root {
  --bt-safe-a: #0072b2;   /* 파랑 — 전략·상승(익절)·양봉 */
  --bt-safe-b: #e69f00;   /* 주황 — 벤치마크·하락(손절)·음봉·음수 */
  --bt-stop: var(--bt-safe-b);
  --bt-target: var(--bt-safe-a);
  --bt-highref: var(--muted);
  --bt-bench: var(--bt-safe-b);
  /* 거래표 행 tint(`trades.js` 의 `outcomeClass`, 결과 하나당 하나) — 알파(rgb 성분 +
     별도 알파 변수)로 둔 이유는 배경 위에 "겹쳐 칠한" 색으로 남아 톤이 안 죽게 하려는
     것이다(hover 는 살짝 더 진하게). 보유 중은 이기고 짐이 아니라 중립 회색이다. */
  --bt-tint-target-rgb: 0, 114, 178;    /* --bt-safe-a */
  --bt-tint-stop-rgb: 230, 159, 0;      /* --bt-safe-b */
  --bt-tint-open-rgb: 130, 130, 130;
  /* 타일·R분포 등 음수 값 — `--bt-safe-b` 의 파스텔(진한 주황은 경보로 읽힌다). */
  --bt-neg: #f0c088;
}

.bt-strategy { margin: 0 0 14px; }
.bt-disclaimer-static { margin: 0 0 14px; padding: 8px 10px; background: var(--warn-bg); border-radius: var(--radius); }
.bt-panel-note { color: var(--err); }
.bt-panel-note:empty, .bt-panel-note[hidden] { display: none; }

/* ── 조건 폼 ──────────────────────────────────────────────────────── */
.bt-form { margin: 0 0 14px; }
/* «조건 보기/접기» 토글(2026-09-11) — **데스크톱에서는 늘 숨는다**(D-050, 한 픽셀도 안
   바뀐다). `mobile-backtest.css` 가 ≤600px 에서만 드러내고, 접힌 상태(`data-open`)를
   읽는 규칙도 그 미디어쿼리 안에만 있다 — 이 파일에는 "숨긴다" 뿐, "접는다"는 없다. */
.bt-form-toggle { display: none; }
/* 섹터 선택은 `<details>` 로 접는다(2026-09-11, 모든 폭에서 — 브레이크포인트가 아니다) —
   «지난 실행»(`.bt-runs summary`)과 같은 모양을 쓴다. */
.bt-sectors-details summary, .bt-runs summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.bt-form-error { padding: 6px 10px; background: var(--err-bg); color: var(--err); border-radius: var(--radius); }
/* 422 가 짚어 준 칸(2026-09-11) — 문구뿐 아니라 칸 자체도 눈에 띄게 한다(`form.js` 의
   `showFieldError`). 배경은 살짝만 — 붉은 배경 전체 칠은 그 옆 라벨까지 «오류»로 읽힌다. */
.is-field-error { outline: 2px solid var(--err); outline-offset: 1px; background: var(--err-bg); }
.bt-form-error[hidden] { display: none; }
.bt-field { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bt-field:last-child { border-bottom: 0; }
.bt-field-label {
  display: block; margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600;
}
.bt-number, .bt-date { display: block; margin-top: 4px; font: inherit; padding: 4px 6px; width: 100%; max-width: 180px; }
/* 숫자 옆 단위(2026-09-11, `formunits.js` 의 `withUnit`) — 입력을 `<span class="bt-field-unit">`
   로 감싸 값과 단위가 한 줄에 붙어 보인다(레이블 글자엔 단위를 안 넣는다, `../CLAUDE.md`). */
.bt-field-unit { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
.bt-field-unit .bt-number, .bt-field-unit .bt-date { margin-top: 0; width: auto; max-width: none; flex: 1 1 auto; min-width: 0; }
.bt-unit { color: var(--muted); font-size: 12px; white-space: nowrap; }
.bt-unit:empty { display: none; }
.bt-mcap-toggle, .bt-hold-toggle, .bt-ladder-toggle,
.bt-loss-toggle, .bt-market-ladder-toggle { display: flex; align-items: center; gap: 6px; font-weight: 600; }

.bt-ladder-body, .bt-market-ladder-body {
  margin-top: 10px; padding-left: 18px; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bt-ladder-body[hidden], .bt-market-ladder-body[hidden] { display: none; }
/* `.bt-adr` 는 `.bt-field` 와 같이 붙는데(`box.className='bt-field bt-adr'`), `.bt-field` 자체엔
   `display` 가 없지만 `.bt-field-label`(부분 일치)에 있어 검사가 짝을 요구한다 — 명시로 만족시킨다. */
.bt-adr[hidden] { display: none; }
/* "신호 전수 채점" 모드에서 `ladder.el`/`marketLadder.el` 전체를 숨긴다(`form.js`) —
   `.bt-field` 짝과 같은 이유. */
.bt-ladder[hidden], .bt-market-ladder[hidden] { display: none; }
/* `sizingWrap`(`.bt-sizing-fields`, 2026-09-11 이름표)도 같은 "신호 전수 채점" 토글로
   숨는다(`setSizingVisible`) — ≤600px 에서 이 클래스가 `display:grid` 를 얻어(모바일
   2단 배치) 짝이 필요해졌다. */
.bt-sizing-fields[hidden] { display: none; }
/* 전략마다 진입 조건 위젯이 갈린다(2026-09-11) — 손으로 지은 것(entry·growth·sectors)과
   일반 렌더러(`formfields.js`)를 번갈아 숨긴다. 셋 다 `.bt-field` 짝과 같은 이유가 있다. */
.bt-entry[hidden], .bt-growth-yoy[hidden], .bt-sectors[hidden], .bt-generic-entry[hidden],
.bt-rs[hidden] { display: none; }

/* ── 실행 · 공유 ──────────────────────────────────────────────────── */
.bt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.bt-actions-status { margin: 0; color: var(--muted); font-size: 13px; }
/* «기본값으로»(2026-09-11) — 실행 줄과 공유 줄 사이, 독립된 한 줄이라 위아래 여백만 준다.
   (`.bt-reset`, "btn" 을 안 넣은 이름 — `buttons.checks.mjs` 가 `/btn|button/i` 선택자를
   전부 buttons.css 전용으로 본다, 모양은 이미 `.btn-action` 이 낸다, 여기는 간격뿐.) */
.bt-reset { display: inline-block; margin: 0 0 10px; }
.bt-share { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.bt-share-status { color: var(--muted); font-size: 12px; }
.bt-share-status.is-bad { color: var(--err); }
.bt-status { color: var(--err); font-size: 13px; }
.bt-status:empty { display: none; }

/* «지난 실행»(2026-09-11) — `<details>` 그대로(`filterbar.js` 머리말과 같은 이유,
   여닫기·키보드는 브라우저가 준다). 화살표 모양은 안 건드린다 — 새 그림을 만들 필요가
   없는 만큼 기본을 남긴다. */
.bt-runs { margin: 0 0 16px; }
.bt-runs-body { margin-top: 8px; }
.bt-runs-empty { margin: 0; }
.bt-run-row { cursor: pointer; }
.bt-run-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── 결과 ─────────────────────────────────────────────────────────── */
.bt-error { padding: 10px 12px; background: var(--err-bg); color: var(--err); border-radius: var(--radius); margin-bottom: 14px; }
.bt-error[hidden] { display: none; }
.bt-results-header { margin: 0 0 12px; }
.bt-results-meta { margin: 0; font-size: 13px; color: var(--muted); }
.bt-variant-bar { margin: 0 0 14px; }
.bt-variant-bar[hidden] { display: none; }
.bt-zero-note[hidden] { display: none; }

/* 요약 타일(2026-09-11 재단장) — 칸 경계가 있는 «세련된» 격자로. `gap:1px` + 컨테이너
   배경을 `--line` 으로 두면 칸마다 따로 테두리를 안 그려도 표처럼 선이 선다(칸 수가
   좁은 화면에서 4→2 로 바뀌어도 nth-child 계산 없이 그대로 맞는다, `mobile-backtest.css`). */
.bt-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin: 0 0 6px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.bt-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg); }
.bt-tile-label { font-size: 12px; color: var(--muted); }
.bt-tile-value { font-size: 18px; font-variant-numeric: tabular-nums; }
/* 음수(MDD·손실 쪽 CAGR·기대R 등) — 경보가 아니라 «있는 그대로»다, 그래서 err 의
   진한 빨강이 아니라 흐린 빨강(`--bt-neg`)을 쓴다. */
.bt-tile-value.is-neg { color: var(--bt-neg); }
.bt-units-hist:empty, .bt-units-hist[hidden] { display: none; }
.bt-regime-hist:empty, .bt-regime-hist[hidden] { display: none; }
.bt-lossmakers-note:empty, .bt-lossmakers-note[hidden] { display: none; }
.bt-held8w-note:empty, .bt-held8w-note[hidden] { display: none; }
.bt-rodema-note:empty, .bt-rodema-note[hidden] { display: none; }

.bt-equity-canvas, .bt-chart-canvas { display: block; width: 100%; }
.bt-equity-legend { margin: 4px 0 0; font-size: 12px; }
.bt-eq-equity .chart-swatch { background: var(--bt-safe-a); }
/* 벤치마크 견본은 색만이 아니라 **선 모양도** 점선으로 갈라 보인다(2026-09-11, 적록색약
   대응) — 배경 채움 대신 위아래 테두리를 점선으로 그어 범례에서도 "이 선은 점선"이 읽힌다. */
.bt-eq-bench .chart-swatch {
  background: none; height: 2px; border-top: 2px dashed var(--bt-bench); border-radius: 0;
}

/* «전략·설정 요약»(2026-09-11) — 라벨 84px + 문장, 좁은 화면에서도 폭을 안 넘긴다
   (긴 문장은 그냥 줄바꿈한다, 표가 아니라 정의 목록이라 가로 스크롤이 필요 없다). */
.bt-spec-summary-title { margin: 12px 0 6px; font-weight: 600; }
.bt-spec-summary { margin: 0 0 16px; display: grid; grid-template-columns: 84px 1fr; gap: 4px 10px; font-size: 13px; }
.bt-spec-summary dt { margin: 0; color: var(--muted); }
.bt-spec-summary dd { margin: 0; }

.bt-rhist { margin: 16px 0; }
.bt-rhist-row { display: grid; grid-template-columns: 90px 1fr 48px; align-items: center; gap: 8px; margin: 3px 0; }
.bt-rhist-label { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-rhist-track { background: var(--head-bg); border-radius: 3px; height: 14px; }
.bt-rhist-bar { width: var(--bt-bar-pct, 0%); height: 100%; background: var(--bt-safe-a); border-radius: 3px; }
/* 손실 쪽 R 칸(2026-09-11, 적록색약 대응) — `rhist.js` 가 상한이 0 이하인 칸에 붙인다. */
.bt-rhist-bar.is-neg { background: var(--bt-safe-b); }
.bt-rhist-count { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

.bt-posline-section, .bt-poshist-section { margin: 16px 0; }
.bt-posline-title, .bt-poshist-title { margin: 0 0 8px; font-weight: 600; }
.bt-positions-canvas { display: block; width: 100%; }
.bt-positions-canvas[hidden] { display: none; }
/* `.bt-positions-empty` 는 `.note` 를 같이 쓰는데, `.panel-error .note{display:block}`
   (`styles.css`, 부분 일치)에 걸려 검사가 짝을 요구한다 — 명시로 만족시킨다. */
.bt-positions-empty[hidden] { display: none; }
.bt-poshist-row { display: grid; grid-template-columns: 60px 1fr 130px; align-items: center; gap: 8px; margin: 3px 0; }
.bt-poshist-label { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-poshist-track { background: var(--head-bg); border-radius: 3px; height: 14px; }
.bt-poshist-bar { width: var(--bt-bar-pct, 0%); height: 100%; background: var(--bt-safe-a); border-radius: 3px; }
.bt-poshist-value { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

.bt-yearly-table, .bt-trades-table { margin: 8px 0 16px; }
/* 거래표 — «진짜 테두리 있는 표»로(2026-09-11). `.screen-table` 은 원래 가로줄(아래
   테두리)만 있다 — 이 표는 칸마다 세로줄도 그어 "표"라는 인상을 준다. */
.bt-trades-table th, .bt-trades-table td { border: 1px solid var(--line); }
.bt-trades-table thead th { border-bottom-width: 2px; }
/* 결과 tint — 알파를 입혀 배경 위에 "겹쳐 칠한" 색으로 남긴다(hover 는 살짝 더 진하게,
   그래도 결과색은 유지한다 — 회색 `--row-hover` 로 덮으면 그 행이 무슨 결과인지 hover
   중엔 안 보인다). */
.bt-trades-table tbody tr.bt-row-target { background: rgba(var(--bt-tint-target-rgb), .1); }
.bt-trades-table tbody tr.bt-row-stop { background: rgba(var(--bt-tint-stop-rgb), .1); }
.bt-trades-table tbody tr.bt-row-open { background: rgba(var(--bt-tint-open-rgb), .1); }
.bt-trades-table tbody tr.bt-row-target:hover { background: rgba(var(--bt-tint-target-rgb), .18); }
.bt-trades-table tbody tr.bt-row-stop:hover { background: rgba(var(--bt-tint-stop-rgb), .18); }
.bt-trades-table tbody tr.bt-row-open:hover { background: rgba(var(--bt-tint-open-rgb), .18); }
/* «적자» 칸의 배지(2026-09-11) — `--err`/`--err-bg` 그대로 재사용(새 색 없음), 알약 모양만
   더한다. 표의 행 tint(위)와 안 겹치는 이유: 배지는 `is_loss_maker` 하나만, 행은 매매
   결과(익절/손절/보유) 하나만 본다 — 같은 행이 둘 다 켜질 수 있고 서로 안 가린다. */
/* «산업» 칸(§5c, 2026-09-11) — FMP 산업 라벨이 길 수 있어 한 줄로 자르고 말줄임(가로
   스크롤 대신, D-049 카드 접기에서는 폭 제약이 없어 자연히 그냥 보인다). */
.bt-cell-ellipsis { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-badge-loss {
  padding: 1px 6px; border-radius: 999px; background: var(--err-bg); color: var(--err);
  font-size: 11px; font-variant-numeric: tabular-nums;
}