/* 실적 조건 구역(D-028). `controls.css` 에서 갈라 나왔다 — 저기가 200줄 한도에 가깝고,
   이 구역은 조건 하나에 컨트롤이 넷(체크 · 숫자 둘 · 손잡이 둘)이라 규칙이 따로 뭉친다.

   **켠 조건만 손잡이가 보인다.** 감추는 일은 JS 가 `hidden` 속성으로 하고(폼 탐색·스크린
   리더에서 함께 빠진다) 여기서는 `display` 로 다시 감추지 않는다 — 두 곳이 감추면 한 곳만
   고쳐진 날 "체크는 켜져 있는데 손잡이가 없는" 화면이 된다. */

.growth-list {
  display: grid;
  /* 좁은 화면에서 한 줄, 넓으면 두 줄. 조건이 여섯이라 세 줄로 벌리면 관련된 QoQ/YoY 가
     서로 멀어진다 — 같은 지표의 둘이 나란히 서는 것이 이 배치의 목적이다. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 16px;
  /* **두 단을 넘지 못하게 묶는다.** 칩 팝오버가 바 폭 전체가 되면서(2026-08-12,
     `filterbar.css`) 넓은 화면에서는 `auto-fit` 이 세 단까지 벌릴 수 있게 됐다 —
     3단은 `280*3 + 16*2 = 872px` 부터 생기므로 여기서 끊으면 최대 두 단이고,
     2단에 필요한 `280*2 + 16 = 576px` 은 그대로 확보된다. */
  max-width: 800px;
}

.growth-item {
  padding: 6px 8px;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: var(--radius, 8px);
  background: var(--bg, #fff);
}

/* 켠 조건은 테두리로 표시한다 — 체크박스만으로는 여섯 중 어느 것이 켜졌는지 훑어보기 어렵다. */
.growth-item.is-on {
  border-color: var(--accent, #2563eb);
  background: var(--head-bg, #f6f7f9);
}

.growth-head { display: flex; align-items: center; gap: 6px; }
.growth-label { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer; }
.growth-name { font-weight: 600; }
/* `직전 분기 대비` 같은 설명. 색만으로 구별하지 않게 글씨를 작게도 만든다. */
.growth-mode { color: var(--muted, #6b7480); font-size: 12px; }

.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 { color: var(--muted, #6b7480); font-size: 12px; min-width: 24px; }
.growth-unit { color: var(--muted, #6b7480); font-size: 12px; }

/* 숫자 입력은 **좁게**. 넓으면 손잡이가 밀려 한 줄에 안 들어간다. */
.growth-num {
  width: 72px;
  padding: 2px 4px;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 손잡이가 남은 폭을 다 쓴다. `min-width: 0` 이 없으면 flex 항목이 안 줄어 줄이 넘친다. */
.growth-slider { flex: 1 1 auto; min-width: 0; }

.growth-readout {
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

.growth-note { margin: 8px 0 0; }