/* inc-bible-filter.css — 성경 필터 바 + 바텀시트
 * 공용 overlay 레이아웃(.c-sheet)은 /css/style.css 에 있음.
 * 칩 톤은 c-plp-chip(pages/plps.css) 계열과 통일: accent(#FF6B6B) 사용. */

/* ── 필터 바 ─────────────────────────────────────── */
.c-bf-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--space-3) 2px;
}

.c-bf-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
  cursor: pointer;
}
.c-bf-open__ico { font-size: 16px; }
.c-bf-open.is-on {
  border-color: rgba(255,107,107,.35);
  color: var(--accent);
}
.c-bf-open__cnt {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.c-bf-bar__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.c-bf-bar__chips::-webkit-scrollbar { display: none; }

/* ── 칩 (바/시트 공용 — c-plp-chip 과 동일 톤) ────── */
.c-bf-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  letter-spacing: -0.2px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.c-bf-chip:active,
.c-bf-chip.is-active {
  border-color: rgba(255,107,107,.35);
  background: rgba(255,107,107,.07);
  color: var(--accent);
  font-weight: 700;
}
.c-bf-chip__x { font-size: 14px; line-height: 1; }
.c-bf-chip--reset { color: var(--sub); border-style: dashed; }

/* ── 바텀시트 ────────────────────────────────────── */
/* v1.4 하단 공백 수정:
 * 공통 규칙(.c-sheet[data-ov-placement="bottom"])의 padding-bottom(bottomnav-h+safe)은
 * dock 모드용이다. 이 시트는 overlay 모드(z-index 1410)라 bottom nav(1100)를 덮으므로
 * nav 높이만큼의 공백이 무의미 — 홈 인디케이터(safe-area)만 남긴다. */
.c-sheet.c-bfsheet[data-ov-placement="bottom"] {
  padding-bottom: env(safe-area-inset-bottom);
}

.c-bfsheet__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px var(--space-3) 10px;
}
.c-bfsheet__title { font-size: 15px; }

/* v1.4: 초과 시 클리핑(공통 .c-sheet 는 overflow:hidden) 대신 내부 스크롤 안전망 */
.c-bfsheet__body {
  padding: 8px var(--space-3) 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* v1.4: 가로 배치 — 라벨 좌측 고정폭 + 칩 우측 랩핑 (그룹당 라벨 줄 ~26px 절감) */
.c-bfsheet__group {
  display: flex;
  align-items: flex-start;   /* 크기 그룹처럼 칩이 2줄로 랩핑될 때 라벨은 첫 줄 기준 */
  gap: 10px;
}
.c-bfsheet__group + .c-bfsheet__group { margin-top: 12px; }
.c-bfsheet__label {
  flex: 0 0 58px;            /* '단본/합본' 4자+슬래시가 12px 에서 한 줄에 들어가는 폭 */
  margin: 0;
  padding-top: 9px;          /* 칩 첫 줄(높이 ~34px) 텍스트와 시각 정렬 */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}
.c-bfsheet__opts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c-bfsheet__actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.c-bfsheet__reset {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: var(--sub);
  cursor: pointer;
}
.c-bfsheet__apply {
  flex: 1;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--text);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}