/* ==================================================
   맛집·카페 목록 (PC)
   pages/places/index.html 전용

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

   [Architecture]
   부동산(real-estate.css) / 구인구직(jobs.css) 목록과 같은 구성이다.
     Page Head → Search → Category → Quick Filter →
     (좌측 상세 Filter 280 + 우측 Result) → Pagination
   사용자가 Domain을 옮겨 다녀도 탐색 방식이 같아야 하므로
   맛집·카페 전용 Navigation System을 따로 만들지 않는다.

   [Reference 시안에서 가져오지 않은 것]
   시안의 `좌측 Filter + 중앙 4열 Card + 우측 Utility Aside` 3단 구조를 쓰지 않는다.
   우측 Utility Aside(지도에서 찾기 / 인기 TOP5 / APP / 최근 본 매장)를 만들지 않았고
   오른쪽 240px은 기존 Global Advertising Wing 하나뿐이다.

   [Domain]
   docs/lifestyle/lifestyle-web-implementation-guide.md 가 Source of Truth다.
   맛집·카페는 홈 UI 그룹이고 canonical 탐색 카테고리는 `맛집·음식` / `카페·디저트` 2개다.

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


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

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

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

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

.places-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 + 인기검색어
   부동산 / 구인구직 목록 검색과 같은 구성이다.
   검색 대상만 생활정보 기준(업체명 / 카테고리 / 지역)이다.
================================================== */

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

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

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

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

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

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

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

.places-search__input:focus {
  outline: none;
}

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

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

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

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

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

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

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

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

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

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

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


/* ==================================================
   03. Category — canonical 2개 (맛집·음식 / 카페·디저트)

   부동산 목록의 Category Navigation Pattern이다.
   항목이 2개뿐인 이유는 `맛집·카페` 홈 UI 그룹에 속한 canonical이
   정확히 2개이기 때문이다(Lifestyle Guide §5.1 / §5.2).
   시안의 `음식점 / 카페` 를 새 Type으로 만들지 않고 canonical 표기를 그대로 쓴다.
================================================== */

.places-category {
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.places-category__list {
  display: flex;
  gap: var(--space-8);
}

.places-category__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);
}

.places-category__button:hover {
  color: var(--text-secondary);
}

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

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

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


/* ==================================================
   04. Quick Filter
   Lifestyle Guide §8.2 공통 필터만 올린다.
     지역 / 평점 = Dropdown, 지금 영업중 / 예약 / 주차 = Toggle
   Dropdown 열고 닫기는 common.js 의 [data-dropdown] 규약이 담당한다.
================================================== */

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

.places-quick-filter__field {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 단일 On/Off 조건(지금 영업중 / 예약 / 주차)은 Dropdown 없이 Toggle 하나로 둔다 */
.places-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);
}

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

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

.places-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은 남겨 두고 표시만 끈다(향후 재노출 시 그대로 살릴 수 있게). */
.places-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);
}

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

.places-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
================================================== */

.places-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 디자인을 복사하지 않는다.
================================================== */

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

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

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

.places-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 다. */
.places-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);
}

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

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

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

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

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

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

.places-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;
}

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

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

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

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

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

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

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

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

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

/* 부동산 상세조건과 같은 커스텀 Control이다.
   OS 기본 Control(accent-color)은 브라우저마다 크기 · 모서리가 달라
   목록 화면끼리 미묘하게 다르게 보인다. */
.places-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);
}

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

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

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

.places-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;
}

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

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


/* ==================================================
   07. Result Header

   읽어야 할 정보는 `현재 Category` 와 `Result Count` 둘뿐이다.

   [정렬 Control이 없는 이유]
   Lifestyle Guide §8.3 : 생활정보 정렬 표준이 원본 Spec에 확정되어 있지 않아
   `PC 목록에서 정렬 옵션 세트를 임의로 확정하지 않는다`.
   §16.1도 `Result Header / Sort — Component만 재사용. 정렬 옵션은 [UNKNOWN]` 이다.
   추천순 / 인기순 / 평점순 / 리뷰순을 지어내지 않고 우측 Slot을 비워 뒀다.
   정렬 세트가 확정되면 이 Header는 좌우 2단(제목·건수 / 정렬)이 되고
   부동산 목록의 .real-estate-sort Component가 그대로 우측에 들어간다.
================================================== */

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

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

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

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

.places-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이다. */

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

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

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

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

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

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

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

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

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

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

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

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

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


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


/* ==================================================
   08. Card Grid

   부동산(.real-estate-results__grid) / 구인구직(.jobs-results__grid)과 같은
   `repeat(3, minmax(0, 1fr))` + 20px Gap 규칙이다.
   시안의 4열을 쓰지 않는 이유는 좌측 상세 Filter(280px)를 함께 두는
   아이탐라 목록 구조에서 Card 폭이 지나치게 좁아지기 때문이다.
================================================== */

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

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

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

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

.places-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) */
.places-results__pagination {
  margin-top: var(--space-10);
}


/* ==================================================
   09. Place Card

   맛집·카페는 Image-driven Domain이라 부동산 / 중고차 Card보다
   대표 이미지 비중을 키운다. Layout은 Platform 공통, Card 내용만 Domain 전용이다.

   시선 흐름 : 대표 이미지 → 상호명 → 지역 → 평점 · 리뷰 → 대표 메뉴/가격 → 이용정보 Tag

   canonical Category(맛집·음식 / 카페·디저트) 표시 라인은 Card에서 제거했다.
   상단 Tab에서 이미 선택한 값이라 Card마다 반복할 이유가 없다.
   Data(data-place-category)는 그대로 두고 **표시만** 없앤 것이다.

   [Hover]
   Jobs 목록에서 확정한 Card Hover(기존 Title Color + Subtle Elevation)를
   같은 강도로 맞춘다. 맛집만 별도의 과한 Hover를 만들지 않는다.
   Shadow는 --shadow-md 재사용이고 Blur 16px < Card Gap 20px 이라 옆 Card와 겹치지 않는다.
================================================== */

.place-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-default); /* 부동산 Card와 동일 농도 */
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.places-results__grid .place-card:hover {
  box-shadow: var(--shadow-md);
}

/* 4:3 고정 비율. 원본 비율이 제각각이라 cover로 채우고 Card 폭에 맞춘다.
   height 고정 / Stretch를 쓰지 않아 원본이 찌그러지지 않는다. */
.place-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--bg-muted);
}

/* absolute로 띄워 이미지가 Media Box 높이에 관여하지 못하게 한다.

   .place-card 가 column flex container라 Media는 flex item이다.
   img를 일반 흐름(static)에 두면 flex-basis: auto 가 이미지 **원본 비율**로 높이를 잡아
   aspect-ratio(4/3)를 덮어쓴다. 실제로 1:1 원본(풍류 / 피쉬앤돈 / 남도고기국수)이
   350x350 으로 렌더돼 같은 Row에서 Card마다 사진 높이가 달라졌다.
   absolute + inset:0 이면 원본 비율과 무관하게 항상 4:3 이다. */
.place-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 찜하기 — `[LIST REMOVED 2026-09-01]`
   목록 화면(index.html)의 Card Favorite Button은 정책상 제거했다.
     List   = 탐색 / 비교 / 상세 진입
     Detail = 찜 / 문의 / 연락 등 관심 행동
   ⚠ 이 규칙은 **상세 화면이 같은 Card Component를 재사용**하므로 남긴다.
     pages/places/detail.html 이 이 파일을 함께 로드하고 `비슷한 곳` Card 에서 이 Class를 쓴다.
     지우면 상세의 찜 Button이 깨진다(요청 §9 · §10). */
.place-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);
  /* 사진 위에 얹히므로 부동산 Card와 같은 반투명 배경을 쓴다 */
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.place-card__favorite:hover {
  color: var(--brand-secondary);
}

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

.place-card__favorite.is-active {
  color: var(--error);
}

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

/* 좌우/상단은 부동산 Card 본문과 동일한 16px 이다.
   하단만 20px 로 4px 보정했다 — Card 바닥의 Tag 줄이 Border에 붙어 보였고,
   Category 라인 제거로 생긴 여유 안에서 흡수되므로 Card가 오히려 낮아진다. */
.place-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--space-4) var(--space-4) var(--space-5);
}

/* 상호명 — Card에서 가장 먼저 읽혀야 한다.
   Size / Weight / Line Height는 부동산 Card 제목과 동일하다(16px / semibold / snug).
   다만 부동산은 1줄 nowrap + ellipsis 인 반면 여기는 **2줄 clamp** 다.
   업체명이 부동산 매물명보다 길고 편차가 커서 1줄로 자르면 상호가 잘리는 Card가 많다.
   Grid Row 정렬은 2줄 예약으로 안정되므로 이 한 가지만 Domain 차이로 남긴다. */
.place-card__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.place-card__link {
  color: inherit;
}

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

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

/* Card 전체를 Click 영역으로 쓴다. 저장 Button은 z-index로 이 위에 있다 */
.place-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 지역 — Secondary Metadata. 상호명 바로 아래 한 줄로 고정한다.
   부동산 Card의 __region 과 같은 리듬이다(제목 아래 4px / 13px). */
.place-card__region {
  overflow: hidden;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 평점 · 리뷰 — 표시 위치는 Guide §8.1에 확정되어 있으나
   집계 key가 `[UNKNOWN]` 이라 Markup에 data-domain-status="unknown" 을 둔다.
   별 Icon Asset이 assets/icons 에 없어 새로 만들지 않고 Text 문자를 쓴다. */
.place-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-2);
  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]` 별 Icon은 공용 `.rating-star` (components.css) 로 통일했다.
   문자 `&#9733;` + --warning 조합을 쓰지 않는다. 이 파일에는 별 전용 규칙이 없다. */

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

/* 대표 가격 — products 대표 항목. 판단 정보라 평점과 같은 줄 아래에 둔다 */
.place-card__price {
  overflow: hidden;
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 이용정보 Tag — 우선순위가 가장 낮다. Card 바닥에 붙여 높이를 맞춘다.
   Tag가 0개인 업체도 있으므로 margin-top: auto 로 아래 정렬만 담당한다. */
.place-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: auto; /* Tag 개수가 달라도 Card 바닥선이 맞는다 */
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.place-card__tags:empty {
  display: none;
}

.place-card__tag {
  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);
}