/* 신고가 돌파(창 · 판정 기준)와 저점(창 · 배수) 컨트롤, 그리고 표의 돌파 칸 표시.
   `controls.css` 에서 갈라 나왔다 — 나눈 기준은 줄 수가 아니라 **바뀌는 계기**다:
   여기는 "돌파·저점 조건의 모양이 바뀔 때", controls.css 는 "시총·RS·섹터 컨트롤이
   바뀔 때" 손댄다. 색은 전부 변수로만 있고 JS 는 클래스만 토글한다. */

:root {
  /* 지금 걸린 돌파 필터가 읽는 신고가 칸. 강조가 아니라 **지목**이라 아주 옅다 —
     `is-breakout`(초록 글씨)과 겹쳐 찍혀도 둘 다 읽혀야 한다. */
  --basis-bg: #f3f7ff;
}

/* 돌파 창은 작을수록 좁은 조건이다. 다른 컨트롤과 방향이 반대라 눈에 띄게 둔다. */
.xlow.is-off { opacity: .55; }
/* **꺼진 컨트롤을 통째로 덮지 않는다.** `.breakout.is-off { opacity: .55 }` 는 그 안의
   기준 토글(`.bo-basis.is-idle` 도 .55)과 **곱해져 0.30** 이 됐다 — 라디오 라벨 두 개가
   화면에서 유일하게 못 읽는 글씨가 되고, 둘 다 동시에 "비활성"으로 보였다. 필터가 꺼진
   것은 **고른 라디오와 설명 문장**이 이미 말하고 있으므로, 흐리게 하는 것은 설명 글뿐이다. */
.breakout.is-off .bo-scale,
.breakout.is-off .bo-readout { color: var(--muted); }

.xlow-presets { display: flex; gap: .25rem; margin: .35rem 0; }
.xlow-presets button {
  padding: .15rem .5rem; font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--head-bg); color: var(--fg);
}
.xlow-presets button.is-on { background: var(--accent); color: var(--bg); }
.xlow-presets button:disabled { cursor: default; opacity: .5; }
.xlow-input { width: 5rem; }

.control-note { margin: .25rem 0 0; font-size: .8rem; color: var(--muted); }

/* ── 저점 기준 기간 — 네 정거장짜리 눈금 (시총 밴드와 같은 읽는 법) ── */
.lw-slider { padding: 2px 0; }
.lw-input { width: 100%; margin: 0; accent-color: var(--accent); }
.lw-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lw-ticks {
  display: flex; list-style: none; margin: 2px 0 0; padding: 0;
  font-size: 11px; color: var(--muted);
}
.lw-ticks li { flex: 1 1 0; text-align: center; }
.lw-ticks li:first-child { text-align: left; }
.lw-ticks li:last-child { text-align: right; }
.lw-ticks li.is-picked { color: var(--accent); font-weight: 700; }
.lw-readout { display: block; margin-top: 6px; font-weight: 700; }
.lw-note { margin-top: 4px; }

/* ── 돌파 창 라디오 — 왼쪽일수록 좁다 (배열 순서가 곧 강도다) ────── */
.bo-scale {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0 0 4px; font-size: 11px; color: var(--muted);
}
.bo-scale-arrow { letter-spacing: -1px; }
.bo-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-opt {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; cursor: pointer;
}
.bo-opt:hover { background: var(--row-hover); }
.bo-radio { accent-color: var(--accent); }
.bo-opt:has(.bo-radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bo-opt.is-picked { background: var(--pick-bg); border-color: var(--accent); }
.bo-opt.is-picked .bo-opt-label { font-weight: 700; color: var(--accent); }
.bo-opt-tight { color: var(--muted); font-size: 11px; }
.bo-readout { display: block; margin-top: 6px; font-weight: 700; }
.bo-note { margin-top: 4px; }

/* ── 신고가 기준 토글 (돌파 컨트롤 안) ────────────────────────────── */
/* 창(N일)보다 위에 둔다. "최근 3일"이 무엇을 세는 3일인지 먼저 읽혀야 한다. */
.bo-basis { margin-bottom: 8px; }
/* 창을 끄면 기준은 아무것도 고르지 않는다. 그 사실을 **설명 문장에만** 적는다 —
   토글 전체에 opacity 를 주면 선택지 이름까지 흐려져 "고를 수 없는 것"으로 읽힌다. */
.bo-basis.is-idle .bo-basis-how,
.bo-basis.is-idle .bo-basis-note { opacity: .7; }
.bo-basis-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-basis-opt {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; cursor: pointer;
}
.bo-basis-opt:hover { background: var(--row-hover); }
.bo-basis-opt.is-picked { background: var(--pick-bg); border-color: var(--accent); }
.bo-basis-opt.is-picked .bo-basis-name { font-weight: 700; color: var(--accent); }
.bo-basis-opt:has(.bo-basis-radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bo-basis-radio { accent-color: var(--accent); }
/* 선택지 **이름**은 다른 컨트롤 라벨과 같은 본문색이다. 흐린 것은 옆의 설명(`-how`)뿐이다. */
.bo-basis-name { color: var(--fg); }
/* 두 기준의 차이는 이 한 줄로만 설명된다. 라벨보다 흐리되 숨기지 않는다. */
.bo-basis-how { color: var(--muted); font-size: 12px; }
.bo-basis-note { margin-top: 4px; }

/* 오늘 돌파한 행의 표시. `0` 은 이 표에서 **가장 강한 신호**이므로 결측(.is-missing)과
   시각적으로 반대편에 둔다 — 회색 흐림이 아니라 강조다. 두 신고가 칸에 같이 적용된다. */
.col-brk.is-breakout { font-weight: 600; color: var(--up); }
.col-brk.is-breakout::before { content: "▲ "; }
/* 결측은 반대편이다. `0`(오늘 돌파)으로 보이면 안 되므로 색도 굵기도 반대로 간다. */
.screen-table td.col-brk.is-missing { color: var(--muted); font-size: 12px; }

/* 지금 걸린 필터가 읽은 칸. 머리에 말로 적고(아래 ::before) 칸 전체를 옅게 깐다 —
   두 신고가 칸이 서로 다른 값을 보일 때 어느 쪽이 조건이었는지가 유일한 해석 열쇠다. */
.screen-table th.col-brk.is-basis { box-shadow: inset 0 -3px 0 var(--accent); }
.screen-table th.col-brk.is-basis .sort-btn::before {
  content: "필터 기준 "; color: var(--accent); font-size: 10px; font-weight: 400;
}
.screen-table.basis-close td.col-brk-close,
.screen-table.basis-intraday td.col-brk-intraday { background: var(--basis-bg); }