@charset "utf-8";
/* ==================================================
   cars.css - 중고차 목록 페이지 전용 스타일
   대상: pages/cars/index.html

   [Source of Truth]
     docs/cars/ITAMRA_CAR_DOMAIN_AUDIT.md
     docs/cars/ITAMRA_CAR_IMPLEMENTATION_SPEC.md
     docs/cars/car-web-implementation-guide.md
     docs/ui-policy.md

   [이 파일의 성격]
   부동산 목록(assets/css/pages/real-estate.css)에서 검증된
   아이탐라 PC Layout / Component / Interaction Convention을 재사용하되,
   Class와 정보구조는 Cars Domain 기준으로 독립 정의한다.

   - real-estate.css 를 import 하거나 .real-estate-* Class를 재사용하지 않는다.
     (Web Guide §19.2 : 재사용 대상은 Layout Pattern이고 Domain Schema가 아니다)
   - 부동산 전용 개념(거래유형 / 면적 / 방·욕실 / 층 / 관리비)에 대응하는
     Style을 이 파일에 만들지 않는다.
   - 공용 Component(.breadcrumb / .pagination / .main-wing / .wing-banner /
     .scroll-top)는 components.css 의 것을 그대로 쓰고 여기서 재정의하지 않는다.

   [Design Token]
   Color / Font Size / Spacing / Radius / Shadow 는 전부 tokens.css 참조다.
   이 파일에서 새 Token을 만들지 않았고 tokens.css 도 수정하지 않았다.
   숫자 리터럴은 부동산 구현이 이미 확정해 둔 Component 내부 구현값
   (Control Height / Panel min-width / radio 점 크기 등)만 동일하게 따른다.
================================================== */


/* ==================================================
   00. Utility
   [hidden] 이 display:flex/grid 에 지는 것을 막는다.
   (부동산 구현과 동일한 방어. 신규 규칙이 아니다)
================================================== */

.cars-quick-filter__field[hidden] {
  display: none !important;
}


/* ==================================================
   01. Page Shell
   .cars-page 는
   <main class="main-layout main-layout--sub cars-page"> 에 함께 붙는다.
   Layout 골격(1400 + 40 + 240)은 main-layout 이, Domain Context는 이 Class가 갖는다.

   Wing 노출 근거: docs/ui-policy.md "Wing 노출 화면" 목록의 `중고차 목록`.
   (같은 문서에서 `중고차 상세`는 미노출이다. 이 파일은 목록 전용이다)

   .main-layout__content 에 좌우 Padding을 두지 않는다.
   Main Content 실폭 = 1400px 이고, 여백 책임은 각 Component가 진다.
================================================== */

/* 하단 ↔ Footer 여백(64px)은 layout.css 의 .main-layout--sub 가 담당한다 (공용화 2026-08-31) */


/* ==================================================
   02. Page Head
   Breadcrumb → Page Title + Subtitle
   Main Content(1400px) Left Edge에 그대로 정렬한다.
================================================== */

.cars-page__breadcrumb {
  padding-top: var(--space-6);
}

.cars-page__head {
  margin-top: var(--space-3);
}

.cars-page__title {
  color: var(--text-primary);
  font-size: var(--text-page-title-size); /* 32px */
  font-weight: var(--text-page-title-weight);
  line-height: var(--text-page-title-line-height);
}

.cars-page__subtitle {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}


/* ==================================================
   03. Search + 인기검색어

   메인 Hero의 .hero-search 를 복제하지 않는다.
   Hero는 Landscape 위 Floating Bar(Shadow)이고 이쪽은 White 위 Inline
   Control(Border)이라 Surface 규칙이 다르다. (tokens.css Shadow 정책)

   Search Bar를 Content 전체 폭(1400)으로 늘리지 않는다.
   입력 시작점과 Button이 지나치게 멀어지므로 상한을 둔다.

   검색 대상 Backend Contract가 확정되지 않았으므로 Markup에서
   data-domain-status="ui-mock" 으로 표기하고 실제 검색 로직을 만들지 않는다.
================================================== */

.cars-search {
  margin-top: var(--space-6);
}

.cars-search__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 720px; /* 부동산 Search와 동일 상한 */
  height: 56px;     /* 8 + 40 + 8 */
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
}

.cars-search__form:focus-within {
  border-color: var(--border-focus);
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 공용 Search Asset(assets/icons/search/search-magnifier.svg) 재사용.
   중고차 전용 Icon Asset을 새로 만들지 않는다. */
.cars-search__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.cars-search__icon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cars-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.cars-search__input::placeholder {
  color: var(--text-tertiary);
}

.cars-search__input:focus {
  outline: none; /* Focus Ring은 Form 전체(:focus-within)가 담당한다 */
}

.cars-search__button {
  flex-shrink: 0;
  width: 96px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  transition: background-color var(--transition-fast);
}

.cars-search__button:hover {
  background-color: var(--brand-interaction);
}

.cars-search__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
}

/* ---------- 인기검색어 ----------
   표시 데이터는 UI Mock이다. 실제 Ranking / Search Analytics를 만들지 않는다. */

.cars-search__keyword {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.cars-search__keyword-title {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* 공용 Asset(assets/icons/search/search-trending.svg) 재사용. 16x16 */
.cars-search__keyword-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.cars-search__keyword-icon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cars-search__keyword-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cars-search__keyword-tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast),
              background-color var(--transition-fast);
}

.cars-search__keyword-tag:hover {
  border-color: var(--brand-secondary);
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
}

.cars-search__keyword-tag:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   04. Quick Entry (빠른 진입 4종)
   Web Guide §6.1 : 국산차 / 수입차 / 전기·친환경 / 화물·승합

   [부동산 Category Navigation과의 관계]
   Web Guide §19.1 은 `.real-estate-category` 를 "Pattern 재사용, 항목은
   자동차 빠른 진입 4종"으로 지정한다. 그래서 시각 규칙(18px Bold /
   Bar 높이 52px / Active Indicator 3px / Surface 없음 / Bottom Border 1줄)은
   그대로 따르고 Class만 Cars Namespace로 분리했다.

   [부동산과 다른 점 — Tab이 아니라 Toggle]
   부동산 Category는 8종 중 항상 하나가 선택되어 있는 Tab이다.
   중고차 빠른 진입은 "목록 진입 범위"이고 Domain에 `전체` 빠른 진입값이 없다.
   (state.origin 의 '전체' / state.fuelGroup 의 null 은 Quick Filter Bar에
    칩이 없는 non-UI state다 — Web Guide §8.2)

   존재하지 않는 다섯 번째 항목(`전체`)을 만들지 않기 위해
   role="tab" 이 아니라 aria-pressed Toggle로 둔다.
     기본 상태 : 아무 것도 선택되지 않음(= 진입 범위 없음)
     하나 선택 : 나머지는 해제 (상호 배타)
     다시 클릭 : 해제 (범위 없음으로 복귀)
================================================== */

.cars-quick-entry {
  margin-top: var(--space-8);
  border-bottom: 1px solid var(--border-default);
}

.cars-quick-entry__list {
  display: flex;
  align-items: stretch;
  gap: var(--space-8); /* 32px */
}

.cars-quick-entry__item {
  display: flex;
}

.cars-quick-entry__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0;
  text-align: left;
  color: var(--text-secondary);
  font-size: var(--font-size-lg); /* 18px - Quick Filter(14px)보다 명확히 우위 */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.cars-quick-entry__link:hover {
  color: var(--brand-secondary);
}

.cars-quick-entry__link.is-active {
  color: var(--brand-primary);
  font-weight: var(--font-weight-bold);
}

/* Active Indicator : Bar의 Bottom Border 위에 정확히 겹친다 */
.cars-quick-entry__link.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background-color: var(--brand-secondary);
}

.cars-quick-entry__link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}


/* ==================================================
   05. Quick Filter (6종)
   Web Guide §8.1 : 제조사 / 차종 / 연료 / 연식 / 가격 / 상세필터

   [Bar를 6개 초과로 늘리지 않는다]
   origin / fuelGroup 은 Quick Filter Bar에 칩이 없는 non-UI state다(§8.2).
   진입 범위는 위 Quick Entry의 Active 상태와 Result Header 요약이 표현한다.

   [상세필터 Trigger]
   Mobile은 바텀시트지만 PC는 좌측 Detail Filter Panel이 항상 열려 있다(§8.1).
   그래서 6번째 항목은 Dropdown이 아니라 좌측 Panel로 Focus를 넘기는
   Anchor Action이다. Filter 항목 자체를 없앤 것이 아니다.

   Chip 표현은 부동산 Quick Filter와 동일한 Design Language를 따른다.
   (White Surface + 1px --border-default + radius 10px + height 42px)
================================================== */

.cars-quick-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) 0;
}

/* Dropdown 기준점. Item 자체가 아니라 Host가 갖는다 */
.cars-quick-filter__field {
  position: relative;
  display: flex;
}

.cars-quick-filter__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
  white-space: nowrap;
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast);
}

.cars-quick-filter__item:hover {
  border-color: var(--brand-secondary);
  background-color: var(--bg-brand-light);
  color: var(--brand-secondary);
}

.cars-quick-filter__item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Open 상태 : Header Dropdown(.is-open)과 동일한 상태 문법 */
.cars-quick-filter__field.is-open .cars-quick-filter__item {
  border-color: var(--brand-secondary);
  background-color: var(--bg-brand-light);
}

.cars-quick-filter__label {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}

.cars-quick-filter__value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.cars-quick-filter__item.is-selected {
  border-color: var(--brand-secondary);
  background-color: var(--surface-selected);
}

.cars-quick-filter__item.is-selected .cars-quick-filter__value {
  color: var(--brand-secondary);
}

.cars-quick-filter__arrow {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1;
}

/* 6번째 `상세필터` — Dropdown이 아니라 좌측 Panel로 이동하는 Action.
   Value / Arrow가 없으므로 Label 하나만 기본 Text 굵기로 읽는다. */
.cars-quick-filter__item--detail .cars-quick-filter__label {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ---------- Quick Filter Dropdown Panel ---------- */

.cars-quick-filter__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 200px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  /* 실제로 떠 있는 요소이므로 Shadow를 사용한다 */
  box-shadow: var(--shadow-md);
}

.cars-quick-filter__panel[hidden] {
  display: none;
}

.cars-quick-filter__panel--wide {
  min-width: 260px;
}

/* 제조사는 Domain에 확정된 브랜드 수가 많다(국산 6 + 수입 22 + 기타 2).
   선택지를 임의로 줄이지 않고 Panel 안에서만 스크롤한다.
   Scrollbar는 좁은 Picker의 시각 노이즈라 숨기고 Scroll 기능은 유지한다. */
.cars-quick-filter__panel--scroll {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 구형 Edge / IE */
}

.cars-quick-filter__panel--scroll::-webkit-scrollbar {
  display: none;
}

.cars-quick-filter__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cars-quick-filter__option:hover {
  background-color: var(--surface-hover);
  color: var(--brand-secondary);
}

.cars-quick-filter__option.is-selected {
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

.cars-quick-filter__option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* Panel 안에서 국산 / 수입을 나누는 소제목. Option이 아니라 Label이다. */
.cars-quick-filter__optgroup {
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.cars-quick-filter__optgroup:first-child {
  padding-top: var(--space-1);
}


/* ==================================================
   06. Range / Max Input

   [Domain 근거 — 매우 중요]
   Web Guide §8.3 / §9.1
     연식     : yearMin ~ yearMax  → 현재 확정된 유일한 양방향 Range
     가격     : maxPrice 만 존재   → minPrice 를 만들지 않는다
     주행거리 : maxMileage 만 존재 → minMileage 를 만들지 않는다

   그래서 Range Component는 연식에만 쓰고,
   가격 / 주행거리는 `이하` 단일 입력(.cars-max)으로 그린다.
   두 Component를 하나로 합치지 않는 이유가 Domain 제약 그 자체다.
================================================== */

.cars-range {
  padding: var(--space-2);
}

.cars-range__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.cars-range__field {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
}

.cars-range__field:focus-within {
  border-color: var(--border-focus);
}

.cars-range__input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Number Spinner는 Filter 폭을 잡아먹어 숨긴다 */
  appearance: textfield;
}

.cars-range__input::-webkit-outer-spin-button,
.cars-range__input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.cars-range__input:focus {
  outline: none; /* Focus Ring은 __field(:focus-within)가 담당 */
}

.cars-range__unit {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: 1;
}

.cars-range__dash {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: 1;
}

.cars-range__note {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

/* ---------- 최대값 단일 입력 (가격 / 주행거리) ----------
   `~ 이하` 한 방향뿐이라 Range의 3 Column Grid를 쓰지 않는다.
   Field / Input / Unit Style은 Range와 동일 Token을 공유한다. */

.cars-max {
  padding: var(--space-2);
}

.cars-max__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cars-max__field {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: var(--space-1);
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
}

.cars-max__field:focus-within {
  border-color: var(--border-focus);
}

.cars-max__suffix {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: 1;
}

/* Preset Option 목록 위 구분선. Preset 값은 Domain 확정값이 아니라 UI Mock이다. */
.cars-max__presets {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}


/* ==================================================
   07. Body Layout
   Detail Filter(280) + Gap(24) + Result(1fr = 1096) = 1400

   Filter Column은 기존 --sidebar-width(280px) Token을 그대로 쓴다.
   Sidebar(Filter/Navigation)와 Wing(Advertisement)은 다른 개념이므로
   여기에 --wing-width 를 쓰지 않는다. (CLAUDE.md / ui-policy.md)

   minmax(0, 1fr) : Viewport가 1680보다 좁아져 Content Column이 줄어도
   Result가 먼저 줄고 가로 Overflow가 발생하지 않게 한다.
   ui-policy.md 기준 Breakpoint가 미확정이므로 Media Query를 두지 않는다.
================================================== */

.cars-body {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: start;
}


/* ==================================================
   08. Detail Filter (좌측 10종 — Public Listing)
     제조사 / 차종 / 모델 / 연식 / 가격 / 주행거리 /
     연료 / 변속기 / 지역 / 사고상태

   [판매상태 Filter 없음 — Public Listing Policy / Web Guide §9.4]
   Web Guide §9.1 원 목록은 `판매상태`를 포함한 11종이었으나,
   PC Web 공개 목록은 `saleStatus = 판매중` 매물만 노출하는 것으로 확정되었다.
   목록에 있다는 사실 자체가 판매 가능을 의미하므로 선택 Filter가 필요 없다.
   `saleStatus` Domain 개념과 네 상태(판매중/예약중/판매완료/임시저장)는
   그대로 유지된다. isPublic / isVisible 같은 새 key를 만들지 않았다.

   [밀도 정책]
   Group이 10개라 전부 펼치면 Panel이 과도하게 길어진다.
   신규 Interaction을 만들지 않고 부동산과 동일하게 <details>/<summary>
   Accordion을 쓰며, 초기 open은 차종 / 연식 / 가격 3개뿐이다.
   Option이 많은 제조사를 포함한 나머지는 접힌 상태로 시작한다.

   [사고상태는 유지]
   Web Guide §11.3 : 사고상태(condition)와 판매상태(saleStatus)는 끝까지
   별개 개념이다. 공개 목록에서 판매상태 Filter를 제거해도
   사고상태 Filter는 그대로 유지한다.

   Input 형태:
     자동차 상세 Filter는 Domain상 전부 `전체`가 있는 단일 선택
     완전 일치 비교이므로 Checkbox가 아니라 radio다.
================================================== */

.cars-filter {
  position: sticky;
  top: var(--space-5); /* 스크롤 시 상단 20px */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
}

.cars-filter__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.cars-filter__heading {
  min-width: 0;
}

.cars-filter__title {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.cars-filter__selected {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.cars-filter__body {
  /* Group 11개가 늘어나도 Panel이 화면을 넘기지 않도록 Panel 안에서만 스크롤한다.
     Sticky top(20) + Header(약 78) + 하단 여유(30) 를 뺀 값이다. */
  max-height: calc(100vh - 130px);
  overflow-y: auto;

  /* Scrollbar 시각적 숨김 (Scroll 기능은 그대로 유지)
     Wheel / Trackpad / Keyboard / Tab Focus 이동이 전부 정상 동작한다. */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 구형 Edge / IE */
}

.cars-filter__body::-webkit-scrollbar {
  display: none;
}

/* ---------- Filter Group (Accordion) ---------- */

.cars-filter__group {
  border-bottom: 1px solid var(--border-light);
}

.cars-filter__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  cursor: pointer;
  list-style: none; /* 기본 삼각형 Marker 제거 (Firefox) */
}

/* 기본 삼각형 Marker 제거 (Chromium / Safari) */
.cars-filter__group-title::-webkit-details-marker {
  display: none;
}

.cars-filter__group-title:hover {
  color: var(--brand-secondary);
}

.cars-filter__group-title:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.cars-filter__group-arrow {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1;
  transition: transform var(--transition-fast);
}

.cars-filter__group[open] .cars-filter__group-arrow {
  transform: rotate(180deg);
}

.cars-filter__group-body {
  padding: 0 var(--space-5) var(--space-5);
}

/* ---------- Option List ---------- */

.cars-filter__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
}

.cars-filter__options--single {
  grid-template-columns: minmax(0, 1fr);
}

/* Group 안에 별도 Scroll 영역을 만들지 않는다.
   Scrollbar가 숨겨진 상태에서 Group 내부까지 스크롤되면 목록이 그 자리에서
   끝난 것처럼 읽혀 뒤쪽 브랜드가 없는 것으로 오해된다.
   스크롤 책임은 부동산과 동일하게 .cars-filter__body 하나가 진다.
   Option이 많은 제조사 Group은 대신 기본 접힘(<details> 미open)으로 밀도를 잡는다. */

.cars-filter__option-item {
  min-width: 0;
}

.cars-filter__option-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.cars-filter__option-label:hover {
  color: var(--brand-secondary);
}

/* 공통 Form Control Component가 아직 없어 Domain Namespace로 둔다.
   native input을 숨기지 않고 appearance:none 으로 직접 그리므로
   Focus / Keyboard / Screen Reader 동작이 그대로 유지된다. */
.cars-filter__option-input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0; /* 13px Text의 첫 줄 중앙에 맞춘다 */
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.cars-filter__option-input:checked {
  border-color: var(--brand-secondary);
  background-color: var(--brand-secondary);
}

.cars-filter__option-input:checked::after {
  content: "";
  display: block;
  /* 18px Box(테두리 1px 포함)의 안쪽 16px 기준 중앙에 6px 점.
     부동산 radio와 동일한 Component 내부 구현값이다. */
  width: 6px;
  height: 6px;
  margin: 5px auto;
  border-radius: var(--radius-pill);
  background-color: var(--text-inverse);
}

.cars-filter__option-input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.cars-filter__option-input:checked + .cars-filter__option-text {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-medium);
}

.cars-filter__option-text {
  min-width: 0;
  word-break: keep-all;
}

/* Group 안에서 국산 / 수입처럼 두 축을 나눌 때 쓰는 소제목 */
.cars-filter__subgroup + .cars-filter__subgroup {
  margin-top: var(--space-4);
}

.cars-filter__subgroup-title {
  margin-bottom: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* ---------- Filter Group : 모델 키워드 ----------
   Web Guide §9.1 : modelKeyword 는 Select가 아니라 `.model` 텍스트 포함 검색이다.
   모델 목록을 Select로 만들면 GROUPED_MODELS 를 임의 확장하게 되므로 쓰지 않는다. */

.cars-filter__keyword {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
}

.cars-filter__keyword:focus-within {
  border-color: var(--border-focus);
}

.cars-filter__keyword-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.cars-filter__keyword-input::placeholder {
  color: var(--text-tertiary);
}

.cars-filter__keyword-input:focus {
  outline: none;
}

/* Range / Max Component가 Filter Group 안에 들어올 때는 자체 Padding을 지운다 */
.cars-filter__group-body .cars-range,
.cars-filter__group-body .cars-max {
  padding: 0;
}

/* Group 안 보조 문구. 사용자에게는 `이하` 조건만 읽히면 된다. */
.cars-filter__note {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

/* ---------- 초기화 (Header Text Action) ----------
   Filter Option을 선택하는 즉시 결과가 갱신되는 Interaction 기준이므로
   하단 [적용하기] Action을 두지 않는다.
   선택 0개일 때는 disabled 로 두어 강조하지 않는다.
   (숨기지 않는 이유: 개수가 바뀔 때 Header 높이가 흔들리지 않게 하기 위함) */

.cars-filter__reset {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.cars-filter__reset:not(:disabled):hover {
  color: var(--brand-secondary);
}

.cars-filter__reset:disabled {
  color: var(--text-disabled);
  text-decoration: none;
}

.cars-filter__reset:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ==================================================
   09. Result Area (가운데)
================================================== */

.cars-results {
  min-width: 0;
}

/* ---------- Result Header ----------
   읽어야 할 정보 위계는 3개뿐이다.
     현재 탐색 범위 / Result Count / Sort

     [ 제주 중고차  총 842대 ]                          [ 추천순 ▼ ]

   Count 단위는 자동차라 `건`이 아니라 `대`다.
   842는 UI Mock이며 실제 Result Count API를 만들지 않는다. */

.cars-results__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.cars-results__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3); /* 12px */
  min-width: 0;
}

/* Page Title(32px)보다 낮고 Card Title(16px)보다 높다 */
.cars-results__title {
  color: var(--text-primary);
  font-size: var(--font-size-xl); /* 20px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.cars-results__count {
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  white-space: nowrap; /* `총 842대`가 중간에서 끊기지 않게 */
}

.cars-results__count-value {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.cars-results__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- Sort ----------
   Web Guide §9.3 : 자동차 목록 정렬 표준은 `[UNKNOWN]` 이다.
   Component만 재사용하고 sortKey / sortOrder 같은 Contract를 만들지 않는다.
   Option Set은 Markup에서 data-domain-status="ui-mock" 으로 표기한다. */

.cars-sort {
  position: relative;
  display: flex;
}

.cars-sort__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.cars-sort__trigger:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-hover);
}

.cars-sort.is-open .cars-sort__trigger {
  border-color: var(--brand-secondary);
  background-color: var(--bg-brand-light);
}

.cars-sort__trigger:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.cars-sort__arrow {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1;
}

.cars-sort__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 160px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  box-shadow: var(--shadow-md);
}

.cars-sort__panel[hidden] {
  display: none;
}

.cars-sort__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cars-sort__option:hover {
  background-color: var(--surface-hover);
  color: var(--brand-secondary);
}

.cars-sort__option.is-selected {
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

.cars-sort__option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}


/* ==================================================
   10. Result Grid / Car Card
   Public Listing 정보 우선순위:
     사진 → 가격 → 제조사+모델+세부모델
        → 연식/주행거리/연료 → 지역

   Web Guide §10.1 원 표준은 `사진 → 판매상태/광고배지 → 가격 …` 이지만,
   공개 목록은 `saleStatus = 판매중` 매물만 노출하므로(Web Guide §9.4)
   모든 Card에 같은 값을 반복하는 판매상태 Badge를 두지 않는다.
   Media 영역에 남는 Overlay는 관심(Favorite) 하나뿐이다.
   (광고 Badge는 별개 사안이며 §17.3 `[PARTIAL]` 로 v1 미표시 판단을 유지한다)

   Grid:
     (1096 - Gap 20 x 2) / 3 = 352px
     auto-fill 대신 repeat(3, minmax(0, 1fr)) 을 써서 Card 3장이 항상 같은 폭이고
     세 번째 Card의 오른쪽 Edge가 Listing Right Edge와 정확히 맞는다.
     minmax(0, 1fr) 이라 Viewport가 좁아져도 Overflow 없이 Card 폭만 줄어든다.

   Image Ratio:
     부동산 Card는 4/3 이지만 assets/images/cars 의 차량 Asset이 전부
     1536 x 1024 (= 3/2) 이므로 3/2 로 둔다.
     Cover Crop 손실 없이 차량 전체가 들어와 차량 형태(세단 / SUV /
     쿠페 / 픽업 / 1톤)가 Card에서 구분된다. Grid System 자체는 그대로다.
================================================== */

.cars-results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

/* 2px Border / 강한 Shadow / Gradient 를 쓰지 않는다.
   Hover는 --border-strong 으로 기본보다 한 단계만 또렷해진다. */
.car-card {
  position: relative;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); /* 14px */
  background-color: var(--surface-default);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.car-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.car-card__media {
  position: relative;
  aspect-ratio: 3 / 2; /* 차량 Asset 원본 비율 1536 x 1024 */
  background-color: var(--bg-muted);
}

.car-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 관심(Favorite) ----------
   목록 화면(index.html)의 Card Favorite Button은 정책상 제거했다.
     List   = 탐색 / 비교 / 상세 진입
     Detail = 찜 / 문의 / 연락 등 관심 행동
   ⚠ 이 규칙은 **상세 화면이 같은 Card Component를 재사용**하므로 남긴다.
     pages/cars/detail.html 이 이 파일을 함께 로드하고 관련 차량 Card 에서 이 Class를 쓴다.
     지우면 상세의 찜 Button이 깨진다(요청 §9 · §10). */
.car-card__favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.car-card__favorite:hover {
  background-color: var(--surface-default);
  color: var(--error);
}

.car-card__favorite:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.car-card__favorite-icon {
  font-size: var(--font-size-lg);
  line-height: 1;
}

/* 선택 상태 : Visual Toggle 전용이다. 실제 Favorite Backend는 구현하지 않는다. */
.car-card__favorite.is-active {
  color: var(--error);
}

.car-card__body {
  padding: var(--space-4);
}

/* ---------- 1) 가격 : Card에서 가장 강한 한 줄 ----------
   Web Guide §10.2 : 단위 표기 `만` / `만원` 이 원본에 혼재하므로
   PC에서는 `만원` 하나로 통일해 표시한다. 값 자체는 가공하지 않는다. */
.car-card__price {
  color: var(--brand-interaction);
  font-size: var(--font-size-xl); /* 20px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}

/* ---------- 2) 제조사 + 모델 + 세부모델 ----------
   Web Guide §10.3 : Mobile 목록의 "제조사+모델만" `[MISMATCH]` 를
   PC 신규 구현에서 반복하지 않는다. 표준대로 subModel 까지 한 줄에 둔다.
   새 Domain key(carTitle / displayModel)를 만들지 않고
   기존 manufacturer / model / subModel 을 그대로 이어 쓴다.
   긴 이름(예: 제네시스 GV80 2.5T 가솔린)이 한 줄 말줄임으로 잘리지 않도록 2줄까지 보여준다. */
.car-card__title {
  display: -webkit-box;
  margin-top: var(--space-2);
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Card 전체를 Click 영역으로 만드는 확장 Link (기존 Card 패턴과 동일) */
.car-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.car-card__link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 3) 트림 (step01.grade) ----------
   제목보다 한 단계 낮게 읽히는 보조 식별 정보다.
   등급/트림은 등록 필수값이므로 Card에서 비지 않는다. */
.car-card__trim {
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 4) 연식 / 주행거리 / 연료 ----------
   세 값은 항상 같은 순서로 읽히는 한 줄이다.
   차량마다 Card Layout이 달라지지 않게 항목을 늘리거나 줄이지 않는다. */
.car-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.car-card__spec {
  display: inline-flex;
  align-items: baseline;
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

.car-card__spec-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* Spec 사이 구분점 */
.car-card__spec + .car-card__spec::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--border-strong);
}

/* ---------- 5) 지역 ---------- */
.car-card__region {
  margin-top: var(--space-2);
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cars-results__pagination {
  margin-top: var(--space-10); /* 40px */
}