/* ==================================================
   여행·숙박 목록 (PC)
   pages/travel-stay/index.html 전용

   1680 Service Frame = 1400 Content + 40 Gap + 240 Advertising Wing
   layout.css 의 .main-layout / .main-layout--sub 골격을 그대로 쓴다.

   [Architecture]
   맛집·카페(places.css) / 부동산(real-estate.css) / 구인구직(jobs.css) 목록과 같은 구성이다.
     Page Head → Search → 여행·숙박 Tab → Quick Filter →
     (좌측 상세 Filter 280 + 우측 Result 1096) → Pagination
   01~08 Section은 places.css 의 Listing Skeleton을 **값 그대로** 가져왔다.
   새 Layout System / 새 Breakpoint / 새 min-width 정책을 만들지 않았다.

   [여행 ↔ 숙박은 Card만 다르다]
     여행 Visual Discovery : 4열 Grid  / Image 비중 최대 / 정보 최소
     숙박 Comparison       : 1열 List  / 위치·평점·시설·가격 비교

   [Domain]
   docs/lifestyle/lifestyle-web-implementation-guide.md 가 Source of Truth다.
   canonical 탐색 카테고리는 `숙박·여행` **하나**이며(§5.2)
   `여행` / `숙박` Tab은 canonical이 아니라 화면 구성 장치다(§5.3).

   [Design Token]
   tokens.css 값만 사용한다. 이 화면 때문에 새 Color / Shadow / Spacing Token을
   만들지 않았다.
================================================== */

/* ==================================================
   01. Page Shell
   .main-layout__content 에 좌우 Padding을 두지 않는다. 실제 Content Width = 1400px.
================================================== */

.travel-stay-page__breadcrumb {
  padding-top: var(--space-5);
}

.travel-stay-page__head {
  margin-top: var(--space-4);
}

.travel-stay-page__title {
  color: var(--text-primary);
  font-size: var(--text-page-title-size);
  font-weight: var(--text-page-title-weight);
  line-height: var(--text-page-title-line-height);
}

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


/* ==================================================
   02. Search + 인기검색어
   부동산 / 구인구직 목록 검색과 같은 구성이다.
   검색 대상만 생활정보 기준(업체명 / 카테고리 / 지역)이다.
================================================== */

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

.travel-stay-search__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 56px;
  padding: 0 var(--space-2) 0 var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
}

.travel-stay-search__form:focus-within {
  border-color: var(--brand-secondary);
}

.travel-stay-search__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.travel-stay-search__icon-image {
  width: 20px;
  height: 20px;
}

.travel-stay-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background-color: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.travel-stay-search__input::placeholder {
  color: var(--text-disabled);
}

.travel-stay-search__input:focus {
  outline: none;
}

.travel-stay-search__button {
  flex-shrink: 0;
  width: 96px; /* 부동산 목록과 동일한 고정 폭 */
  height: 40px;
  border: 0;
  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);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

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

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

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

.travel-stay-search__keyword-title {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.travel-stay-search__keyword-icon {
  display: flex;
  align-items: center;
}

.travel-stay-search__keyword-icon-image {
  width: 16px;
  height: 16px;
}

/* Tab에 따라 Keyword Set 하나만 보인다.
   UA 기본 `[hidden] { display: none }` 은 아래 display: flex 에 밀리므로 명시한다. */
.travel-stay-search__keyword-list[hidden] {
  display: none;
}

.travel-stay-search__keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.travel-stay-search__keyword-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1;
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast);
}

.travel-stay-search__keyword-tag:hover {
  border-color: var(--brand-secondary);
  background-color: var(--bg-subtle);
  color: var(--brand-secondary);
}

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


/* ==================================================
   03. 여행 / 숙박 Tab

   맛집·카페 목록의 Category Navigation(.places-category)과 **같은 Component**다.
   Margin / Border / Font / Active Underline 값을 그대로 가져왔다.

   ⚠ 이 Tab은 canonical Category Navigation이 **아니다.**
     canonical은 `숙박·여행` 하나뿐이며(Lifestyle Guide §5.2) 이 Tab은
     그 한 canonical 안에서 탐색 방식을 나누는 **화면 구성 장치**다(§5.3).
     `여행` / `숙박` 을 canonical 값으로 저장하지 않는다.
================================================== */

.travel-stay-tab {
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.travel-stay-tab__list {
  display: flex;
  gap: var(--space-8);
}

.travel-stay-tab__button {
  position: relative;
  padding: 0 0 var(--space-4);
  border: 0;
  background-color: transparent;
  color: var(--text-tertiary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.travel-stay-tab__button:hover {
  color: var(--text-secondary);
}

.travel-stay-tab__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Active는 Brand Identity Color를 쓴다. GNB Active와 같은 위계다 */
.travel-stay-tab__button.is-active {
  color: var(--brand-primary);
}

.travel-stay-tab__button.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px; /* .travel-stay-tab 의 border-bottom 을 덮는다 */
  left: 0;
  height: 2px;
  background-color: var(--brand-primary);
}


/* ==================================================
   04. Quick Filter
   맛집·카페 목록과 같은 Component다. 항목만 여행 / 숙박 Set으로 바뀐다.
     여행 : 지역 / 여행·체험 / 이용요금 = Dropdown, 실내 · 주차 가능 = Toggle
     숙박 : 지역 / 숙소 유형 / 1박 가격 = Dropdown, 주차 가능 · 수영장 = Toggle
   Dropdown 열고 닫기는 common.js 의 [data-dropdown] 규약이 담당한다.
================================================== */

/* 상하 Padding을 Host가 갖는다. 부동산 / 중고차 / 구인구직 Quick Filter와 같은 방식이라
   Category ↔ Quick Filter ↔ Body 세로 리듬이 네 목록 화면에서 동일해진다. */
.travel-stay-quick-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) 0;
}

.travel-stay-quick-filter__field {
  position: relative;
}

.travel-stay-quick-filter__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 42px; /* 부동산 Quick Filter와 동일 */
  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);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.travel-stay-quick-filter__item:hover {
  border-color: var(--brand-secondary);
}

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

.travel-stay-quick-filter__label {
  color: var(--text-tertiary);
}

.travel-stay-quick-filter__value {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.travel-stay-quick-filter__arrow {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

/* 값이 선택된 Field는 Border + Value Color로만 표시한다. Background를 채우지 않는다 */
.travel-stay-quick-filter__field.is-active .travel-stay-quick-filter__item {
  border-color: var(--brand-secondary);
}

.travel-stay-quick-filter__field.is-active .travel-stay-quick-filter__value {
  color: var(--brand-secondary);
}

.travel-stay-quick-filter__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 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);
  /* 실제로 떠 있는 Dropdown이라 Shadow를 쓴다 (tokens.css 사용 원칙) */
  box-shadow: var(--shadow-md);
}

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

.travel-stay-quick-filter__option:hover {
  background-color: var(--surface-hover);
}

.travel-stay-quick-filter__option.is-selected {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-medium);
}

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

/* 단일 On/Off 조건(여행 : 실내 · 주차 가능 / 숙박 : 주차 가능 · 수영장)은
   Dropdown 없이 Toggle 하나로 둔다 */
.travel-stay-quick-filter__toggle {
  height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.travel-stay-quick-filter__toggle:hover {
  border-color: var(--brand-secondary);
}

.travel-stay-quick-filter__toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.travel-stay-quick-filter__toggle[aria-pressed="true"] {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-medium);
}

/* 상세필터 Toggle — 이번 화면에서는 노출하지 않는다.
   좌측 Sidebar는 부동산 목록과 동일하게 항상 노출 상태를 유지하고,
   Result를 1400px로 넓히던 Collapse Interaction도 쓰지 않는다.
   Markup과 Style은 남겨 두고 표시만 끈다(향후 재노출 시 그대로 살릴 수 있게). */
.travel-stay-quick-filter__detail {
  display: none;
  height: 42px;
  margin-left: auto;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.travel-stay-quick-filter__detail:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.travel-stay-quick-filter__detail:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   05. Body — 좌측 상세 Filter + 우측 Result
   부동산(.real-estate-body) / 구인구직(.jobs-body)과 같은 Grid다.
     --sidebar-width(280) 는 Filter / Navigation 전용 Token이라 여기에 맞다.
     1400 = 280 + 24 + 1096
================================================== */

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


/* ==================================================
   06. 좌측 상세조건 Filter
   부동산 / 구인구직 Left Detail Filter Pattern을 그대로 쓴다.
   시안의 Filter 디자인을 복사하지 않는다.
================================================== */

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

.travel-stay-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);
}

.travel-stay-filter__title {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px — 부동산 상세조건 Title과 동일 */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

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

/* 초기화는 큰 Button이 아니라 Header 안의 작은 Text Action이다.
   선택이 1개 이상일 때만 쓸 수 있으므로 기본은 disabled 다. */
.travel-stay-filter__reset {
  flex-shrink: 0;
  border: 0;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.travel-stay-filter__reset:not(:disabled):hover {
  color: var(--brand-interaction);
}

.travel-stay-filter__reset:disabled {
  color: var(--text-disabled);
  cursor: default;
}

.travel-stay-filter__reset:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 부동산과 같은 구조다. Panel 좌우 Padding을 Body가 아니라
   Group Title / Group Body가 가져서 Group 사이 구분선이 Panel 폭 전체로 그어진다. */
.travel-stay-filter__body {
  padding: 0;
}

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

.travel-stay-filter__group:last-child {
  border-bottom: 0;
}

.travel-stay-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); /* 14px — 부동산 Filter Group Title과 동일 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  cursor: pointer;
  list-style: none;
}

.travel-stay-filter__group-title::-webkit-details-marker {
  display: none;
}

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

.travel-stay-filter__group-arrow {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  transition: transform var(--transition-fast);
}

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

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

.travel-stay-filter__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2); /* 부동산과 동일 (row 12 / column 8) */
}

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

.travel-stay-filter__option-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.travel-stay-filter__option-label:hover {
  color: var(--brand-interaction);
}

/* 부동산 상세조건과 같은 커스텀 Control이다.
   OS 기본 Control(accent-color)은 브라우저마다 크기 · 모서리가 달라
   목록 화면끼리 미묘하게 다르게 보인다. */
.travel-stay-filter__option-input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

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

/* Radio는 원형 + 가운데 점, Checkbox는 사각형 + 체크. 부동산과 같은 표현이다 */
.travel-stay-filter__option-input[type="radio"] {
  border-radius: var(--radius-pill);
}

.travel-stay-filter__option-input[type="radio"]:checked {
  border-width: 5px;
  background-color: var(--surface-default);
}

.travel-stay-filter__option-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

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

.travel-stay-filter__option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 숙소 유형 — Compact Filter Chip ----------

   숙소 유형만 세로 목록 대신 Chip으로 그린다.
   선택지가 6개고 명칭이 짧고 계층이 없어 한눈에 전체를 훑을 수 있으며,
   좌측 Sidebar의 세로 공간도 줄어든다.
   ⚠ 지역 / 1박 가격 / 주요 시설은 기존 Checkbox·Radio List 그대로다.
     이 Chip을 숙박의 다른 Filter나 다른 도메인으로 확대 적용하지 않았다.

   Component 구성은 구인구직 `요일 직접 선택`(.jobs-filter__day*)과 같은 계열이다.
   native input을 .sr-only 로 숨기고 :checked / :focus-visible 을 형제 <span>에 반영한다.
   다만 요일 Chip은 7개 균등 Grid + --radius-sm 이고, 여기는 글자 길이대로 늘어나는
   Wrap Pill이라 Class를 공유하지 않고 이 파일 안에서 따로 정의한다(요청 §13 · §18).

   Pill Size는 같은 파일의 인기 검색어 Chip(.travel-stay-search__keyword-tag)과 맞췄다
   — height 32 / --radius-pill / 같은 Border·Hover 계열. */

.travel-stay-filter__chips {
  display: flex;
  flex-wrap: wrap;
  /* row 8 / column 8. 인기 검색어 Chip List와 같은 값을 쓴다.
     Chip 폭은 글자 길이대로 결정되므로 고정 width를 주지 않는다. */
  gap: var(--space-2);
  min-width: 0;
}

.travel-stay-filter__chip-item {
  min-width: 0;
}

.travel-stay-filter__chip-label {
  display: block;
  cursor: pointer;
}

.travel-stay-filter__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  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);
  /* Sidebar Filter 본문과 같은 14px. Chip이 되었다고 강조하지 않는다 */
  font-size: var(--font-size-md);
  line-height: 1;
  white-space: nowrap; /* 좁아져도 글자 단위로 쪼개지지 않게 한다 */
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast);
}

/* Hover는 Border · Text만 아주 얕게. Shadow / Scale은 쓰지 않는다 */
.travel-stay-filter__chip-label:hover .travel-stay-filter__chip {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

/* 선택 상태 — Border만 진해지는 정도로 끝내지 않고 Surface까지 바꾼다.
   체크 아이콘은 넣지 않는다(요청 §6). */
.travel-stay-filter__chip-input:checked + .travel-stay-filter__chip {
  border-color: var(--brand-secondary);
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

/* input이 .sr-only 라 Outline이 보이지 않으므로 Chip에 대신 그린다 */
.travel-stay-filter__chip-input:focus-visible + .travel-stay-filter__chip {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   07. Result Header + 정렬

   좌측 `현재 Tab + 전체 건수` / 우측 `정렬`. 맛집·카페 목록과 같은 구성이다.

   ⚠ Lifestyle Guide §8.3 은 생활정보 정렬 표준을 **여전히 `[UNKNOWN]`** 으로 둔다.
     여행(추천순 / 인기순 / 최신순) · 숙박(추천순 / 가격낮은순 / 가격높은순 / 리뷰많은순)
     Option Set은 시연을 위한 `[UI MOCK]` 이며 이 작업으로 Domain 정렬 표준을
     확정한 것이 아니다. Component 자체는 맛집·카페 목록(.places-sort)과 동일하다.
================================================== */

.travel-stay-results {
  min-width: 0;
}

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

.travel-stay-results__heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.travel-stay-results__title {
  color: var(--text-primary);
  font-size: var(--text-subsection-title-size); /* 20px */
  font-weight: var(--font-weight-bold); /* 부동산 Result Title과 동일 */
  line-height: var(--text-subsection-title-line-height);
}

.travel-stay-results__count {
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

/* ---------- 정렬 — `[UI MOCK]` ----------
   부동산 목록의 .real-estate-sort 와 같은 구성 · 같은 Size · 같은 위치다.
   Dropdown 열고 닫기는 common.js 의 [data-dropdown] 규약이 담당한다.

   ⚠ 정렬 옵션 세트는 Lifestyle Guide §8.3 기준 **여전히 `[UNKNOWN]`** 이고
   여기 4개는 Executive Review 시연용 UI Mock이다. */

.travel-stay-results__controls {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.travel-stay-sort {
  position: relative;
  display: flex;
}

.travel-stay-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;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

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

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

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

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

.travel-stay-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);
}

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

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

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

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

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


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


/* ==================================================
   08. Result Container — 여행 Grid / 숙박 List

   Gap(20) / margin-top(20) / Empty State / Pagination 은 맛집·카페 목록과 같다.
   Column 수만 다르다.
     여행 Visual Discovery  -> repeat(4, minmax(0, 1fr))  Card 259px
     숙박 Comparison        -> 1열 Horizontal Card        Card 1096px
================================================== */

/* 여행 — 4열 Visual Grid
   Result 1096 = Card 259 x 4 + Gap 20 x 3.
   고정 px을 쓰지 않고 minmax(0, 1fr) 로 1096 안에서 나눈다. */
.travel-stay-results__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5); /* 20px */
  margin-top: var(--space-5);
}

/* 숙박 — 1열 Search Result List  `[CHANGED 2026-09-01]`
   가격 비교가 목적이라 Row 하나가 Result 폭(1096)을 그대로 쓴다.

   Card Gap을 두지 않는다. Row 자신의 상하 Padding(20/20) + Row 사이 Divider가
   리듬을 만든다(Borderless Search Result List). 여행 Grid는 그대로 gap 20이다.
   margin-top도 0이다 — Result Header Border 아래 20px 여백은
   첫 Row의 padding-top이 담당하므로 겹쳐서 40px이 되지 않게 한다. */
.travel-stay-results__list {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

/* Front-end Filter는 Card Node를 지우지 않고 hidden 속성만 토글한다.
   UA 기본 `[hidden] { display: none }` 은 위 display 선언(grid / flex)에 밀리므로
   여기서 명시해 준다. */
.travel-stay-results__grid[hidden],
.travel-stay-results__list[hidden],
.travel-card[hidden],
.stay-card[hidden] {
  display: none;
}

/* Filter 조합 결과가 0건일 때만 노출한다(JS가 hidden 속성을 토글).
   기존 Token / Typography만 쓰고 새 Empty Component를 만들지 않았다. */
.travel-stay-results__empty {
  padding: var(--space-16) 0;
  text-align: center;
}

.travel-stay-results__empty-title {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.travel-stay-results__empty-desc {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

/* 가운데 정렬은 공통 .pagination Component가 이미 한다(components.css) */
.travel-stay-results__pagination {
  margin-top: var(--space-10);
}



/* ==================================================
   09. Travel Card — Visual Discovery

   여행은 `비교`가 아니라 `발견`이다. 그래서 맛집·카페 Card에 있는
   지역 / 평점 / 리뷰 / Tag / 운영정보를 **Card에 표시하지 않는다.**
   그 값들이 없는 것이 아니라 Filter와 (향후) 상세에서 쓰는 정보다.

   시선 흐름 : 큰 이미지 → 여행지·체험명 + 무료/유료 → 한 줄 설명

   Border / Radius / Hover는 .place-card 와 같은 값이다.
   `[LIST REMOVED 2026-09-01]` 목록 Favorite 정책 변경으로 찜 Button은 제거했다.
   여행만 다른 것은 **이미지 비율 하나**다(4:3 -> 5:4).
   Card 폭이 259px 로 좁아진 만큼 세로를 키워 Visual 비중을 유지한다.
   완전 Square Product Tile(1:1)로 가지 않아 기존 목록 Rhythm과 이어진다.
================================================== */

.travel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Hover 강도는 맛집·카페 / 구인구직 Card와 같다(--shadow-md).
   Blur 16px < Card Gap 20px 이라 옆 Card와 겹치지 않는다. */
.travel-stay-results__grid .travel-card:hover {
  box-shadow: var(--shadow-md);
}

/* 5:4 = 259 x 207.
   .travel-card 가 column flex container라 img를 일반 흐름에 두면
   원본 비율이 aspect-ratio를 덮어쓴다(places.css 09 주석과 같은 이유).
   그래서 Media를 position: relative 로 두고 img를 absolute로 띄운다. */
.travel-card__media {
  position: relative;
  aspect-ratio: 5 / 4;
  background-color: var(--bg-muted);
}

.travel-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.travel-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--space-4) var(--space-4) var(--space-5);
}

/* 여행지·체험명 + 무료/유료가 **한 줄 안에** 들어간다.
   Card 폭이 좁아 2줄까지 허용하고 그 이상은 자른다. */
.travel-card__title {
  display: -webkit-box;
  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);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---------- 목록 -> 상세 Link  `[ADDED 2026-09-01]` ----------
   여행 상세(travel-detail.html)가 생긴 여행지 Card에만 붙는다.
   맛집·카페 목록 .place-card__link 와 **완전히 같은 규약**이며 새 Pattern이 아니다.
     - 색은 제목에서 상속받아 Link처럼 보이지 않는다(파란 밑줄 없음).
     - ::after 가 Card 전체를 덮어 Card 어느 곳을 눌러도 상세로 이동한다.
       기준점은 .travel-card 의 position: relative 다(기존 값. 변경하지 않았다).
     - 여행 Card에는 Favorite Button이 없어(§23.2 List Favorite 미제공)
       Overlay와 Click이 충돌하는 요소가 없다.
   ⚠ Card Visual(크기 / Border / Radius / Hover / Typography)은 변하지 않는다. */
.travel-card__link {
  color: inherit;
}

.travel-card__link:hover {
  color: var(--brand-secondary);
}

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

.travel-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 무료 / 유료는 비용 존재 여부를 알려 주는 **보조 상태값**이다.
   Badge / Pill / Status Color(초록·빨강)를 쓰지 않는다.
   같은 Font Size에서 Weight와 Color만 낮춰 위계를 만든다. */
.travel-card__price-type {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
  font-size: 14px
}

/* 한 줄 설명 — 넘치면 자른다 */
.travel-card__desc {
  overflow: hidden;
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==================================================
   10. Stay Result Row — Comparison  `[CHANGED 2026-09-01 · 2차]`

   숙박은 `발견`이 아니라 `비교`다. Result 1096px 전체를 한 Row가 쓰고
   왼쪽부터 [ 사진 | 숙소 정보 | 가격 ] 으로 읽힌다.

   [1차 -> 2차 변경]
   독립된 `Bordered Card` 에서 **Borderless Search Result List Row** 로 바꿨다.
   Card마다 Border Box를 두르면 9개 결과가 `9개의 개별 상자`로 읽혀
   가격·평점을 가로질러 비교하기 어렵다. Border를 빼고 Row 사이만 Divider로 나누면
   시선이 세로로 흐르면서 같은 x에 놓인 가격끼리 바로 비교된다.

     Before  Border 1 + Image 240 + Info 654 + Price 200 + Border 1 / Radius 14 / Gap 20
     After   Image 300 + Info 596 + Price 200 = 1096 / Border 0 / Radius 0 / Divider

   Price Column을 고정폭(200)으로 두어 Row가 몇 개든 **가격이 같은 x에 정렬**된다.
   숙소명 / 위치 길이가 달라도 가격 열은 흔들리지 않는다.

   [Divider를 border-bottom 으로 두는 이유]
   Filter가 Card를 `hidden`(display:none)으로 감추므로 숨은 Row의 선도 함께 사라진다.
   `.stay-card + .stay-card { border-top }` 형태로 두면 앞 Row가 숨겨졌을 때
   **첫 번째로 보이는 Row 위에 선이 남는다.** border-bottom은 그 문제가 없다.
   마지막 Row 아래 선은 Pagination과의 구분선 역할을 그대로 한다.

   시설 Tag / Rating 조판은 여전히 .place-card 와 같은 값이다.
   `[LIST REMOVED 2026-09-01]` 사진 위 찜 Overlay는 제거했다 — 사진에 아무 Overlay도 없다.
   ⚠ 이 Section은 `.stay-card` 만 다룬다. 여행 Card(.travel-card)와 공용 CSS는 건드리지 않는다.
================================================== */

.stay-card {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 200px;
  align-items: stretch;
  /* Row 상하 20px + Divider = Content / 20 / ─── / 20 / Content 리듬 */
  padding: var(--space-5) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border-default);
  /* Page 배경과 그대로 이어지게 둔다. Row 자신의 면을 만들지 않는다 */
  background-color: transparent;
}

/* Borderless List라 Border / Shadow Hover를 쓰지 않는다.
   맛집·카페 Card(.place-card__link:hover)와 같은 **제목 Color 변경** Pattern만 재사용한다. */
.travel-stay-results__list .stay-card:hover .stay-card__name {
  color: var(--brand-secondary);
}

/* Row 높이는 사진이 정한다. 300 x 2:1 = 150px 이며
   Info Cluster 높이(약 148px)와 거의 같아 둘 중 무엇이 커져도 Row가 튀지 않는다.
   Info가 적은 Row(시설 Tag 1개)도 사진이 납작해지지 않는다.

   Card Border가 사라졌으므로 사진에는 Radius를 남긴다(요청 §4).
   overflow: hidden 은 Radius 밖으로 사진이 삐져나오지 않게 하는 용도다. */
.stay-card__media {
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--bg-muted);
}

.stay-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info Cluster — **상단 정렬**  `[CHANGED 2026-09-01 · 2차]`
   유형 -> 숙소명 -> 위치 -> 평점 -> 시설 이 위쪽 한 덩어리로 읽혀야 한다.
   Row 상하 Padding은 .stay-card 가 이미 갖고 있으므로 여기는 좌우 Gutter만 둔다.
     좌 20 = 사진과의 간격 / 우 20 = 가격 Column과의 간격
   flex column 기본 정렬이 flex-start 라 별도 선언 없이 상단에 붙는다. */
.stay-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0 var(--space-5);
}

/* 숙소 유형 — 숙소명 위 Overline. Filter의 `숙소 유형` 과 같은 값이다 */
.stay-card__type {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* 숙소명 — Card 폭이 1096px 이라 맛집 Card(18px)보다 한 단계 키운다.
   긴 상호도 한 줄에 들어가고, 넘치면 자른다. */
/* 숙소명 Link `[NEW]` — 여행 Card(.travel-card__link)와 같은 규약이다.
   .stay-card 가 이미 position: relative + cursor: pointer 라
   ::after 하나로 Card 전체가 상세 Link가 된다(Nested Interactive 없음).
   상세 Route가 있는 숙소(제주 해비치 호텔)에만 <a> 가 들어가고
   나머지 Card는 지금처럼 Text 그대로다 — 빈 Link(href="#")를 만들지 않는다. */
.stay-card__link {
  color: inherit;
}

.stay-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

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

.stay-card__name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-xl); /* 20px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

/* 위치 / 접근성 — 숙소 선택의 1차 판단 정보다 */
.stay-card__location {
  overflow: hidden;
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 평점 · 리뷰 — 맛집·카페 Card와 같은 조판이다.
   집계 key가 `[UNKNOWN]` 이라 Markup에 data-domain-status="unknown" 을 둔다. */
.stay-card__rating {
  display: flex;
  /* 공용 Rating Star(<img>)는 치환 요소라 baseline 정렬 시 바닥선이 Text Baseline에
     맞아 시각적으로 뜬다. components.css `Rating Star` 규약대로 center 로 맞춘다. */
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  font-variant-numeric: tabular-nums;
}

/* `[CHANGED 2026-09-01]` 시험용 inline SVG Star는 **공용 `.rating-star`**
   (components.css + assets/icons/rating/rating-star.svg) 로 승격했다.
   이 파일에는 별 전용 규칙도 Sprite도 남기지 않는다. */

.stay-card__review {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}

/* 주요 시설 — Info Cluster의 마지막 줄이다.  `[CHANGED 2026-09-01 · 2차]`
   1차에서는 `margin-top: auto` 로 Row 바닥에 붙였지만, 이제 Info 전체를 상단에
   한 덩어리로 모으므로 평점 바로 아래에 둔다(요청 §11).
   Row 높이는 사진(aspect-ratio 2/1)이 잡으므로 시설 개수가 0~3개로 달라도
   Row 바닥선이 흔들리지 않는다. */
.stay-card__facilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.stay-card__facilities:empty {
  display: none;
}

.stay-card__facility {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-xs); /* 12px */
  line-height: var(--line-height-normal);
}

/* 가격 Column — 고정 200px.
   Card마다 정보량이 달라도 가격이 항상 같은 x에서 오른쪽 정렬로 읽힌다. */
/* 가격 Column — 고정 200px + **우측 하단 Anchor**  `[CHANGED 2026-09-01 · 2차]`
   1차에서는 Row 세로 중앙(justify-content: center)이라 가격이 정보 덩어리 옆에
   떠 있는 것처럼 보였다. 이제 Info는 위, 가격은 아래로 대각선 축을 만든다.
   Row 상하 Padding은 .stay-card 가 갖고 있으므로 여기에는 Padding을 두지 않는다.
   그래야 가격 오른쪽 Edge가 Result Header / Pagination과 같은 x(=1096 오른쪽 끝)에 선다.
   Border Box를 없앴으므로 Column 구분선(border-left)도 제거했다. */
.stay-card__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 0;
  text-align: right;
}

/* 체크인은 가격보다 확실히 약하게 읽혀야 한다(요청 §14).
   가격 20px bold / --text-primary 대비 13px regular / --text-secondary 다. */
.stay-card__checkin {
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* `1박` 을 금액 **윗줄**로 올린다 (요청 §12의 두 번째 형태).
   같은 줄에 두면 `95,000원~` 과 `180,000원~` 처럼 자릿수가 다를 때
   오른쪽 정렬 때문에 `1박` 의 x가 Row마다 12px씩 어긋난다(측정 확인: 1269 / 1281).
   줄을 나누면 체크인 · `1박` · 금액 **세 줄의 오른쪽 Edge가 모두 같은 x** 에 선다(요청 §15).
   할인율 / 취소선 정상가 / 회원가를 두지 않았다(Commerce Contract 없음). */
.stay-card__price {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  color: var(--text-primary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-tight);
}

/* `1박` — **가격 기준 단위만** Brand Color로 강조한다(요청 §13).
   금액 자체는 --text-primary 를 유지한다. 금액까지 Brand Color로 바꾸면
   9개 Row의 가격이 전부 파랗게 떠서 오히려 비교가 어려워진다. */
.stay-card__price-unit {
  color: var(--brand-interaction);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
}

.stay-card__price-value {
  color: var(--text-primary);
  font-size: var(--font-size-xl); /* 20px */
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}