/* **조건 칩 바**(D-033) — 조건을 한 줄로 접고 표를 화면의 주인공으로 만든다.

   예전에는 조건 컨트롤이 2단 그리드로 화면의 2/3 를 먹었다(실적 조건이 열여섯 줄이 되며
   더 심해졌다). 여기서 바꾸는 것은 **껍데기뿐**이다 — 안에 든 컨트롤의 CSS 는 각자
   파일 그대로이고(`controls.css`·`breakout.css`·`growth.css`…), 이 파일은 칩과 그 안을
   담는 상자만 정한다.

   ## 겹쳐 뜨는 것은 CSS 만의 일이다

   마크업은 `<details>` 그대로다(키보드·스크린리더를 브라우저가 준다). `position: absolute`
   로 띄우기만 하므로 스크립트가 막힌 환경에서도 **아래로 펼쳐지며 그대로 동작한다** —
   그림만 다르고 쓸 수 있다는 뜻이다(상세 조각의 점진적 향상과 같은 규칙). */

.fbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* 칩이 겹쳐 뜰 기준면. 바깥 요소를 기준으로 삼으면 스크롤할 때 팝오버가 따로 논다. */
  position: relative;
  margin: 0 0 10px;
}

/* **기준면을 갖지 않는다**(`position` 없음). 팝오버는 칩이 아니라 위 `.fbar` 에 붙는다 —
   이유는 `.fchip-body` 주석에. 칩 안쪽의 절대 배치는 `.cap-slider` 가 자기 기준면을
   따로 갖고 있어서 여기에 기대는 것이 없다. */
.fchip {
  border: 1px solid var(--line, #e3e6ea);
  border-radius: 999px;
  background: var(--bg, #fff);
}

/* 조건이 걸린 칩만 도드라진다 — 여섯이 같은 모양이면 무엇이 걸렸는지 훑어서 못 읽는다.
   색만으로 구별하지 않는다: 글씨도 굵어진다(`.is-on .fchip-val`). */
.fchip.is-on {
  border-color: var(--accent, #2563eb);
  background: var(--head-bg, #f6f7f9);
}

.fchip-head {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 13px;
  /* 기본 삼각형을 지우고 아래 `::after` 로 방향만 남긴다(열림 상태를 눈으로도 준다). */
  list-style: none;
  white-space: nowrap;
}
.fchip-head::-webkit-details-marker { display: none; }
.fchip-head::after { content: '▾'; color: var(--muted, #6b7480); font-size: 11px; }
.fchip[open] .fchip-head::after { content: '▴'; }
.fchip-head:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

/* 칩 이름은 **줄지 않는다** — 무엇의 조건인지가 값보다 먼저다(줄어드는 쪽은 값이다). */
.fchip-name { flex: none; color: var(--muted, #6b7480); }
.fchip-val { font-variant-numeric: tabular-nums; }
.fchip.is-on .fchip-val { font-weight: 700; color: var(--accent, #2563eb); }

/* 펼친 내용. **바(`.fbar`) 아래 한 자리에 바 폭 그대로** 뜬다 — 어느 칩을 눌러도 같다.
   `min-width`·`max-width`·`right` 보정이 하나도 없는 것이 이 규칙의 요점이다.

   칩에 붙이려던 두 판을 거쳐 여기로 왔다(2026-08-12, 방문자 신고 둘):
   ① 칩 기준(`.fchip { position: relative }`) — 마지막 칩이 `right: 0` 인데 칩 바는
      `flex-wrap` 이라 **줄바꿈되면 그 칩이 어디 서는지 알 수 없다.** 실적이 둘째 줄 왼쪽에
      서자 520px 팝오버가 통째로 화면 왼쪽 밖으로 나갔다("좌측으로 숨겨져 있다").
   ② 바 기준 + 고정 폭 — 화면 밖으로는 안 나가지만 **누른 칩과 자리가 안 맞았다**(둘째 줄
      칩을 눌렀는데 팝오버는 바 끝에 뜬다). 칩이 어디로 밀리든 자리가 안 변해야 한다.
   폭을 바에 맞추면 **자리를 계산할 일 자체가 없어진다.** 어느 칩이 열렸는지는 `▴` 와
   `is-on` 이 말하고, 한 번에 하나만 열린다(`js/filterbar.js`). */
.fchip-body {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: var(--radius, 8px);
  background: var(--bg, #fff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.fchip-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
}
.fchip-title + .fchip-title { margin-top: 12px; }
.fchip-title .hint { font-weight: 400; color: var(--muted, #6b7480); font-size: 12px; }