/* 공용 필터탭(db-tabs) 시각 정본 — shared/_filter_tabs.html.erb 전용.
   세그먼트 컨트롤 룩: 회색 트랙(.db-tabs) + 알약 탭(.db-tab), 활성 탭(.tab--on)=흰 알약+남색 글씨+그림자.
   ⚠️ .tab--on = 활성 표시 클래스(페이지 JS가 토글). 클래스명 바꾸면 그 JS도 같이 고쳐야 함.
   동작(선택·필터)은 쓰는 페이지 소유 — 컨테이너 data-* + 탭 data-value/data-action 으로 배선. */
.db-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 4px;
}
.db-tab {
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.db-tab:hover { background: rgba(255,255,255,.55); }
.db-tab.tab--on { background: #fff; color: #1e40af; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.db-tab.tab--on:hover { background: #fff; }