@charset "utf-8";

/* ========================================
   공통 필터 칩(pill) UI
   - faq.php 카테고리 탭 버튼(.faq-tab)
   - seats.php 좌석 필터(.seat-filter__chip)
   - timetable.php 열차종류/시간대/정렬 필터(.filter-chip)
   위 세 곳이 공유하는 모양(배경/테두리/radius/레이아웃)과 active 상태만 여기서 관리한다.
   폰트 크기·padding 등 크기 관련 값은 각 페이지 CSS에서 이 클래스 위에 덧씌워 오버라이드한다.
======================================== */
/* 필터 칩을 직접 자식으로 갖는 컨테이너(.faq-tabs, .filter-group__options, .seat-filter 등)는
   클래스명과 무관하게 자동으로 가로 배치. 간격 등 세부는 각 페이지에서 오버라이드. */
:has(> .filter-chip) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.filter-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: #ffffff;
    border: 0.1rem solid var(--color-line-gray);
    border-radius: 50px;
    font-family: 'Pretendard';
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    padding: 0.7rem 2rem;
}

/* 체크박스/라디오를 품은 칩(label.filter-chip > input + span) — 네이티브 입력은 숨기고 칩 모양만 노출 */
.filter-chip > input[type="checkbox"],
.filter-chip > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* active 상태
   - 버튼형(예: faq-tab)은 JS로 .is-active 토글
   - 체크박스/라디오형은 :has()로 체크 여부를 직접 감지 (별도 JS 불필요) */
.filter-chip.is-active,
.filter-chip:has(> input:checked) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

/* common.css의 전역 `* { color: var(--color-primary) }` 리셋 때문에 자식 요소(span 등)의
   글자색이 상속이 아니라 직접 지정된 값으로 깔려있어, 자식까지 명시적으로 흰색을 덮어써야 한다.
   (background/border-color는 칩 자체에만 필요하므로 여기엔 포함하지 않는다) */
.filter-chip.is-active *,
.filter-chip:has(> input:checked) * {
    color: #ffffff;
}

/* 칩 내부 아이콘(있는 경우) — active 상태에서 흰색으로 반전 */
.filter-chip img {
    transition: filter 0.16s ease;
}

.filter-chip.is-active img,
.filter-chip:has(> input:checked) img {
    filter: brightness(0) invert(1);
}

.filter-chip:focus-visible,
.filter-chip:has(> input:focus-visible) {
    outline: 0.2rem solid var(--color-point);
    outline-offset: 0.2rem;
}

/* 칩 내부 텍스트를 감싸는 span (아이콘 없이 텍스트만 있는 경우 포함) */
.filter-chip span {font-size: var(--fs-15);font-weight: 400;color: var(--color-txt-purple);}