/* 실적 조건 구역 — 조건 하나에 컨트롤이 다섯(체크 · 숫자 둘 · 손잡이 둘)이라 규칙이 따로
 * 뭉친다. `controls.css` 에서 갈라 나왔다(200줄 한도).
 *
 * screener_us 의 같은 이름 파일과 **구조가 같고 값만 KR 팔레트 토큰**이다 — 그래야 다크
 * 모드가 저절로 따라온다(저쪽은 다크가 없다). **파일을 통째로 베끼지 마라.**
 *
 * **켠 조건만 손잡이가 보인다.** 감추는 일은 JS 가 `hidden` 속성으로 하고(폼 탐색·스크린
 * 리더에서 함께 빠진다) 여기서 `display` 로 다시 감추지 않는다 — 두 곳이 감추면 한 곳만
 * 고쳐진 날 "체크는 켜져 있는데 손잡이가 없는" 화면이 된다. */

.growth-list {
  display: grid;
  /* 좁으면 한 단, 넓으면 두 단. **두 단을 넘지 못하게 묶는다** — 팝오버가 칩 바 폭
     전체(1180px)라 `auto-fit` 을 풀어 두면 세 단까지 벌어지고, 그러면 같은 지표의
     QoQ/YoY 가 서로 다른 단으로 갈라져 나란히 못 읽는다. */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 6px 14px;
  /* ⚠️ **`start` 다.** 격자 기본값(`stretch`)이면 켠 줄 옆의 **접힌 줄이 같은 높이로
     늘어나** 빈 상자가 된다 — 체크는 꺼져 있는데 자리는 차지해서 "여기 뭐가 있었나" 로
     읽힌다 `✅ 겪음 (2026-08-20, 헤드리스 스크린샷)`. */
  align-items: start;
  max-width: 820px;
  margin: 8px 0;
}

.growth-item {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
/* 켠 조건은 테두리로도 표시한다 — 체크박스만으로는 열여섯 중 어느 것이 켜졌는지
   훑어보기 어렵다. */
.growth-item.is-on { border-color: var(--accent); background: var(--accent-soft); }

.growth-head { display: flex; align-items: baseline; gap: 6px; cursor: pointer; }
.growth-head input { flex: none; align-self: center; margin: 0; accent-color: var(--accent); }
.growth-name { color: var(--ink); font-size: 12.5px; font-weight: 600; }
/* `직전 분기 대비` 같은 설명. 색만으로 구별하지 않게 글씨도 작게 만든다. */
.growth-mode { color: var(--ink-faint); font-size: 11px; }

.growth-range { margin-top: 6px; }
.growth-range[hidden] { display: none; }

.growth-pair { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.growth-pair-name { min-width: 24px; color: var(--ink-soft); font-size: 11.5px; }
.growth-unit { color: var(--ink-faint); font-size: 11.5px; }

/* 숫자 입력은 **좁게**. 넓으면 손잡이가 밀려 한 줄에 안 들어간다. */
.growth-num { width: 68px; text-align: right; }

/* 손잡이가 남은 폭을 다 쓴다. `min-width: 0` 이 없으면 flex 항목이 안 줄어 줄이 넘친다. */
.growth-slider { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.growth-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.growth-readout { margin: 2px 0 0; color: var(--ink-soft); font-size: 11.5px; }