/* 백테스트 탭의 좁은 화면 규칙만. 폭은 `mobile.css` 등록부의 것만 쓴다(새 폭을 만들지
   않는다) — 표(`.screen-table` 재사용)의 카드 접기는 `mobile-table.css` 가 이미 전역으로
   맡는다(2026-09-10, 이 파일은 이 탭만의 격자·간격 뒤집기뿐).
   2026-09-11 폰 390px 실측 이후 — 폼 접기·필드 2단·타일 1단·전략 칩 말줄임이 더해졌다. */

@media (max-width: 600px) {
  .bt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-examples-grid { grid-template-columns: 1fr; }
  .bt-rhist-row { grid-template-columns: 70px 1fr 40px; }
  .bt-poshist-row { grid-template-columns: 44px 1fr 90px; }

  /* «조건 보기/접기»(`main.js`) — 토글은 여기서만 드러난다(`backtest.css` 는 늘 숨긴다).
     접힌 상태(`data-open="false"`)를 실제로 감추는 규칙도 이 미디어쿼리 하나뿐이다 —
     데스크톱은 `data-open` 값과 무관하게 폼이 항상 보인다(D-050). */
  .bt-form-toggle { display: inline-block; margin: 0 0 10px; }
  .bt-form-collapse[data-open="false"] .bt-form { display: none; }

  /* 짧은 숫자 필드 둘을 한 줄로(`formentry.js`/`formsizing.js` 의 `pair()`/`.bt-field-pair`,
     2026-09-11) — 인접한 자리를 감싼 것뿐이라 데스크톱은 이 규칙이 없어 그냥 두 줄이다. */
  .bt-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

  /* 자본 + 위험 %(또는 자산 비중 %) — 사이에 유닛 기준 토글이 끼어 있어 DOM 을 못 옮긴다
     (`formsizing.js` 주석) — 이름표만 보고 자리를 옮긴다, DOM 순서는 그대로다. */
  .bt-sizing-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .bt-sizing-capital { grid-column: 1; grid-row: 1; }
  .bt-sizing-risk-pair { grid-column: 2; grid-row: 1; }
  .bt-sizing-mode-label { grid-column: 1 / -1; grid-row: 2; }
  .bt-sizing-mode-row { grid-column: 1 / -1; grid-row: 3; }
  .bt-sizing-maxpos { grid-column: 1 / -1; grid-row: 4; }

  /* 숫자·날짜 입력은 폰에서 칸 폭을 다 쓴다(180px 로 눌러 두지 않는다). */
  .bt-number, .bt-date { max-width: none; }
  /* 라벨(도움말 문구를 겸한다)을 살짝 줄인다 — 값은 그대로 두고 글씨만 옅게. */
  .bt-field-label { font-size: 12px; }

  /* 전략 칩 이름이 길면(«급등 양봉 + 신고가 근접»·«매물대 소화 급등» 등) 줄이 넘치지
     않고 말줄임한다 — `.btn-group` 은 이미 줄바꿈하니(`buttons.css`) 칩 하나가 화면
     폭보다 넓어지는 경우만 막으면 된다. */
  .bt-strategy .btn-toggle {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 긴 문장·낱말이 가로 스크롤을 만들지 않게(정의 목록·타일 라벨·예시 메타). */
  .bt-spec-summary dd, .bt-tile-label, .bt-example-meta { overflow-wrap: anywhere; }

  /* 차트 내보내기(2026-09-11) — `mobile-detail.css` 의 같은 규칙을 그대로 옮긴다(그 파일은
     `stock.html` 전용이라 이 탭은 못 읽는다, D-051 "mobile-*.css 는 한 화면만"). 좁은
     화면에서는 이미지 복사만 남긴다 — PNG 저장·HTML 복사는 «파일을 내려받아 편집기에
     붙여넣는» PC 흐름이라 폰에는 없다. */
  .chart-export .btn-action[data-export="png"],
  .chart-export .btn-action[data-export="html"] { display: none; }
  .chart-shot { display: block; position: relative; }
  .chart-export {
    position: absolute; z-index: 2; top: 8px; left: 8px;
    width: auto; margin: 0; justify-content: flex-start; gap: 4px;
    max-width: calc(100% - 16px);
  }
  .chart-export .btn-action {
    background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(3px); border-color: rgba(0, 0, 0, 0.14);
  }
  .chart-export-status {
    flex-basis: 100%; margin-top: 4px; padding: 2px 6px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.82); text-align: left;
  }
}

@media (max-width: 480px) {
  .bt-ladder-body { grid-template-columns: 1fr; }
  /* 타일은 480px 아래에서도 2단이다 — 1단이면 390px 폰에서 요약만 한 화면을 넘긴다(실브라우저 확인
     2026-09-11). 라벨이 눌리면 글씨를 줄인다. */
  .bt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-tile-label { font-size: 11px; }
}