@charset "utf-8";
/* places-detail.css - 맛집·카페 업체 상세 (pages/places/detail.html)

   [Source of Truth]
     docs/lifestyle/lifestyle-web-implementation-guide.md  (PC Web Guide §9 상세 / §16 재사용 / §20 구현 기록)
     docs/ui-policy.md                                     (Wing / Layout 정책)
     assets/css/tokens.css                                 (Design Token — 새 토큰 추가 없음)

   [Layout Source of Truth = 부동산 상세(real-estate-detail.css)]
     상세 3화면 중 부동산 / 중고차가 computed style 기준으로 완전히 동일하고
     중고차 CSS가 스스로 `부동산 상세와 동일`이라고 기록한다. 구인구직만 Section Shell이 다르다.
     따라서 다수이자 원본인 부동산 기준을 따른다.

       Service Frame   1400 Content + 40 Gap + 240 Wing = 1680
       Detail Layout   grid  minmax(0, 1fr) 360px / column-gap 40px  -> Main 1000 / Aside 360
       Aside           align-self: stretch + padding-bottom 32px (Sticky 이동범위 확보)
       Sticky Card     top 32px (--space-8) — Wing / Broker / Dealer Card와 같은 값
       Section Shell   margin-top 24 / padding 24 / Border 1px --border-default / Radius 14
       Section Title   --text-subsection-title-* (20px semibold)
       본문 하단 ↔ Footer  layout.css 의 .main-layout--sub 가 담당(64px). 여기서 다시 쓰지 않는다.

   [2차 UI Refinement 2026-09-01]
     1) Wing 노출 -> 1차의 .main-layout__inner 1 Column 재정의를 **제거**했다.
        이제 layout.css 의 기본 1680 Grid를 그대로 쓴다 (재정의 0).
     2) Anchor Navigation -> Tab Panel. scroll-margin-top / Scroll Spy 관련 규칙을 전부 삭제했다.
     3) Gallery Stage 4:3 + max-height -> `aspect-ratio: 20 / 11` (Main 1000 기준 1000 x 550).
     4) Section Box 반복감 완화 : Panel(.place-detail-section) / Light(.place-detail-block) 2종으로 차등화.
     5) 대표 메뉴 Placeholder 제거 -> 실제 이미지 Card.

   [이 파일이 하지 않는 것]
     - layout.css / components.css / tokens.css / places.css 수정
     - 새 Design Token 생성
     - 부동산 / 중고차 / 구인구직 상세 CSS import 또는 Selector 공유

   [Namespace]
     .place-detail-* 로 전부 분리한다. 목록의 .place-card 만 재사용하고
     그 Modifier(.place-card--compact)도 이 파일에서만 정의한다(목록 화면 영향 0).
================================================== */


/* ==================================================
   01. Page

   Wing이 노출되므로 layout.css 의 .main-layout__inner (1400 + 40 + 240 = 1680)를
   **그대로 쓴다.** Page Scope 재정의가 없다.
================================================== */

/* Breadcrumb 상단 여백 : 목록(.places-page__breadcrumb) / 구인구직 상세와 같은 24px */
.place-detail__breadcrumb {
  padding-top: var(--space-6);
}

/* Feature Icon Sprite Host
   detail.html 상단의 인라인 <symbol> 정의 컨테이너다.
   자체 렌더링은 하지 않고 <use> 참조 대상만 담으므로 Layout에서 완전히 빼낸다.
   (부동산 상세 .real-estate-icon-sprite 와 같은 처리) */
.place-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ==================================================
   02. Detail Layout
   1400 Content 안을 다시 두 Column으로 나눈다.

     [ Main 1000 ][ Gap 40 ][ Action Aside 360 ] = 1400
     + Gap 40 + Advertising Wing 240             = 1680 Service Frame

   Main / Aside / Gap / Wing 값은 부동산·중고차·구인구직 상세와 동일하다.
================================================== */

.place-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: var(--space-10); /* 40px */
  margin-top: var(--space-5);
}

.place-detail__main {
  min-width: 0;
}

/* Action Column
   layout.css 의 Wing / 부동산 Broker / 중고차 Dealer와 동일한 책임 분리다.
     .place-detail__aside  → Grid Item / stretch 로 Sticky 이동 범위 확보
     .place-detail-action  → Sticky 동작
   Grid Item에 align-self: start 를 주면 Item 높이가 Card 높이에 딱 맞아
   Sticky 자식의 이동 가능 범위가 0이 되어 고정이 동작하지 않는다. */
.place-detail__aside {
  align-self: stretch;
  min-width: 0;
  /* Sticky 이동 범위의 끝을 32px 앞당겨 Card가 본문 마지막 Section보다
     아래로 내려가지 않게 한다. Footer 침범을 구조적으로 막는 지점이다. */
  padding-bottom: var(--space-8);
}


/* ==================================================
   03. Business Header
   상위 Category · 지역 → 업체명 → 평점 · 리뷰 → 주요 이용정보 Summary
================================================== */

.place-detail__head {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-light);
}

.place-detail__category {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

.place-detail__category-divider {
  color: var(--text-disabled);
}

/* 업체명 : 상세 제목이므로 --text-detail-title-* (28px bold)
   구인구직 상세 제목과 같은 Token이다. */
.place-detail__title {
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-detail-title-size);
  font-weight: var(--text-detail-title-weight);
  line-height: var(--text-detail-title-line-height);
  word-break: keep-all;
}

.place-detail__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-normal);
}

/* `[CHANGED 2026-09-01]` 별 Icon은 공용 `.rating-star` (components.css) 로 통일했다.
   상세 3곳(업체 요약 / 리뷰 요약 / 리뷰 Card)과 목록 Card가 같은 Asset · 같은 16x16 이다. */

.place-detail__rating-value {
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.place-detail__rating-divider {
  color: var(--text-disabled);
}

.place-detail__review {
  font-variant-numeric: tabular-nums;
}

/* 주요 이용정보 Summary : Badge가 아니라 구분점(·)으로 잇는 한 줄 요약이다.
   Badge를 쓰면 확정 Enum(영업상태)이 있는 것처럼 보인다. */
.place-detail__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

.place-detail__summary-item + .place-detail__summary-item {
  position: relative;
  padding-left: var(--space-4);
}

.place-detail__summary-item + .place-detail__summary-item::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--text-disabled);
}

.place-detail__summary-item--open {
  color: var(--success);
  font-weight: var(--font-weight-semibold);
}


/* ==================================================
   04. Photo Gallery
   Stage(대표 사진) + Thumbnail 4장 + Photo Counter

   [2차] Stage 비율 = 20 / 11
     Main Column이 1000px이므로 1000 x 550 이 된다 (요청 540~560 범위).
     고정 height를 쓰지 않고 비율로 두어 Column 폭이 바뀌어도 왜곡이 없다.
     Box 비율이 고정이라 이미지 로딩 전후 Layout Shift가 없다.

   Thumbnail은 4장뿐이라 1차의 가로 Rail(좌우 Nav)을 제거하고 4등분 Grid로 둔다.
   Rail은 항목이 넘칠 때 쓰는 장치이고, 4장은 넘치지 않는다.
================================================== */

.place-detail-gallery {
  margin-top: var(--space-6);
}

.place-detail-gallery__stage {
  position: relative;
  aspect-ratio: 20 / 11; /* Main 1000 기준 1000 x 550 */
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
  overflow: hidden;
}

.place-detail-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Stage 좌우 이동 : 중고차 상세 __stage-nav 와 같은 규격(44px / pill / 반투명) */
.place-detail-gallery__stage-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.place-detail-gallery__stage-nav:hover {
  background-color: var(--surface-default);
  color: var(--brand-secondary);
}

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

.place-detail-gallery__stage-nav--prev {
  left: var(--space-4);
}

.place-detail-gallery__stage-nav--next {
  right: var(--space-4);
}

.place-detail-gallery__counter-divider {
  opacity: 0.6;
}

/* ---------- Thumbnail ---------- */

.place-detail-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3); /* 12px */
  margin-top: var(--space-3);
}

.place-detail-gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 20 / 11; /* Stage와 같은 비율 */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--bg-muted);
  overflow: hidden;
  opacity: 0.72;
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
}

.place-detail-gallery__thumb:hover {
  opacity: 1;
}

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

.place-detail-gallery__thumb.is-active {
  border-color: var(--brand-secondary);
  opacity: 1;
}

.place-detail-gallery__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==================================================
   05. Detail Tabs

   Tab Content 전환형이다(1차의 Anchor Navigation은 제거했다).
   Main Column 상단에 sticky로 붙어 긴 상세에서 위치를 잃지 않게 한다.

   Header(.header)는 이 프로젝트에서 Sticky / Fixed가 아니라 일반 Flow에 있으므로
   --header-height 만큼의 Offset이 필요 없다. top은 0이다.
================================================== */

.place-detail-tabs {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  margin-top: var(--space-6);
  /* Sticky로 실제로 떠서 본문 위를 지나가므로 배경이 반드시 불투명해야 한다 */
  background-color: var(--bg-page);
}

.place-detail-tabs__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 56px;
  border-bottom: 1px solid var(--border-default);
}

.place-detail-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  transition: color var(--transition-fast);
}

.place-detail-tabs__tab:hover {
  color: var(--text-primary);
}

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

.place-detail-tabs__tab.is-active {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

/* Active 밑줄은 Tab List 하단 Border 위에 겹쳐 그린다 */
.place-detail-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background-color: var(--brand-secondary);
}

/* Tab Panel
   고정 height / min-height를 쓰지 않는다. Tab마다 콘텐츠 높이가 다르고
   Document Flow가 그대로 유지되어야 Footer 위치가 정상이다. */
.place-detail-panel[hidden] {
  display: none;
}


/* ==================================================
   06. Section 표현 2종 (Visual Rhythm)

   1차에는 모든 Section이 같은 Border Box라 페이지가 단조로웠다.
   2차에서 중요도에 따라 **두 가지**로만 차등화한다.
   Section마다 새 Component를 만들지 않는다.

     .place-detail-section  Panel  — Border Box (한눈에 보는 정보 / 업체 기본정보 /
                                     메뉴·리뷰·사진 Tab의 본체)
     .place-detail-block    Light  — Border 없음 (정보 Tab의 대표 메뉴 / 최근 리뷰 /
                                     위치 / 비슷한 곳 Preview)

   Panel 규격(margin-top 24 / padding 24 / Border 1 / Radius 14 / Title 20px semibold)은
   부동산 상세 .real-estate-detail-section 과 완전히 같은 값이다.
================================================== */

/* ---------- Panel ---------- */

.place-detail-section {
  margin-top: var(--space-6); /* 24px */
  padding: var(--space-6);    /* 24px */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); /* 14px */
  background-color: var(--surface-default);
}

.place-detail-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 40px; /* .recommend-nav(40px)와 높이를 맞춰 Title 위치가 흔들리지 않게 한다 */
}

.place-detail-section__title {
  color: var(--text-primary);
  font-size: var(--text-subsection-title-size);        /* 20px */
  font-weight: var(--text-subsection-title-weight);
  line-height: var(--text-subsection-title-line-height);
}

.place-detail-section__body {
  margin-top: var(--space-3);
}

/* Panel이 Tab Panel의 첫 요소일 때는 위 여백을 Tab List가 이미 만들고 있다 */
.place-detail-panel > .place-detail-section:first-child,
.place-detail-panel > [data-shared-slot]:first-child .place-detail-spec > .place-detail-section:first-child {
  margin-top: var(--space-5);
}

/* ---------- Light Block ---------- */

.place-detail-block {
  margin-top: var(--space-10); /* 40px — Panel(24)보다 넓게 두어 Section 경계를 여백이 만든다 */
}

.place-detail-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 40px;
}

.place-detail-block__title {
  color: var(--text-primary);
  font-size: var(--text-subsection-title-size);        /* 20px */
  font-weight: var(--text-subsection-title-weight);
  line-height: var(--text-subsection-title-line-height);
}

.place-detail-block__body {
  margin-top: var(--space-4);
}

/* Carousel / Page Navigation
   components.css 의 공용 .recommend-nav 를 그대로 재사용한다.
   새 Nav Component를 만들지 않기 위한 선택이며 components.css 는 수정하지 않았다. */
.place-detail-block__nav,
.place-detail-section__nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.place-detail-block__nav .recommend-nav,
.place-detail-section__nav .recommend-nav {
  position: static;
  margin-top: 0;
}

.place-detail-block__nav .recommend-nav:disabled,
.place-detail-section__nav .recommend-nav:disabled {
  border-color: var(--border-light);
  color: var(--text-disabled);
  box-shadow: none;
}

.place-detail-block__nav .recommend-nav:disabled:hover,
.place-detail-section__nav .recommend-nav:disabled:hover {
  border-color: var(--border-light);
  color: var(--text-disabled);
}

/* Page Indicator (전체 메뉴 `1 / 2`) */
.place-detail-section__page {
  margin-right: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}


/* ==================================================
   07. 한눈에 보는 정보 — Feature Item (Icon + Label)

   1차의 Pill Tag를 Icon + Label Feature Item으로 바꿨다.
   Icon 위 / Label 아래 / 가운데 정렬 구성은 부동산 상세의 옵션·특징
   (.real-estate-facility__item)과 같은 규약이다.

   Aside의 Highlight는 Compact Pill(§13)로 남겨 두 곳의 위계를 다르게 한다.
================================================== */

.place-detail-feature {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

.place-detail-feature__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
  color: var(--text-secondary);
  text-align: center;
}

.place-detail-feature__icon {
  display: block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--brand-secondary);
}

.place-detail-feature__label {
  color: var(--text-primary);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  word-break: keep-all;
}

/* ---------- 07-1. 업장 Description / 방문 TIP / Keyword  [3차 2026-09-01] ----------

   `한눈에 보는 정보` Panel **안에서** Feature 아래에 이어 붙는 서술 영역이다.
   별도의 `업장소개` Section을 만들지 않았고, Box 안에 Box를 또 두지도 않았다.
   위계는 Divider(상단 Border) + Typography로만 만든다.

     Description  16px / --text-primary   (본문)
     Visit Tip    14px / --text-secondary (보조 안내. Icon + Text)
     Keyword      13px / --brand-secondary (배경 없는 Text)

   Divider는 기존 Token(--border-light)이며 새 색상을 만들지 않았다.
   고정 height를 쓰지 않는다. 문구가 길어지면 Panel이 자연스럽게 늘어난다.
================================================== */

.place-detail-about {
  margin-top: var(--space-5);  /* Feature ↔ Divider 20px */
  padding-top: var(--space-5); /* Divider ↔ Description 20px */
  border-top: 1px solid var(--border-light);
}

/* Description
   Main Column(1000) - Panel Padding(24 x 2) = 952px 안에서 읽힌다.
   짧은 폭으로 줄바꿈되지 않도록 max-width를 걸지 않는다. */
.place-detail-about__description {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  word-break: keep-all;
}

/* 방문 / 이용 안내 (TIP)
   Description보다 한 단계 약한 Typography로 두어 같은 무게의 문단 두 개로 보이지 않게 한다.
   Icon은 첫 줄에 맞춰 정렬하고 여러 줄이 되어도 Text가 Icon 아래로 흘러들지 않는다. */
.place-detail-about__tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3); /* Description ↔ TIP 12px */
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-relaxed);
}

.place-detail-about__tip-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  /* line-height 1.7 x 14px = 23.8px 행 높이의 세로 중앙에 Icon(16px)을 맞춘다 */
  margin-top: 4px;
  color: var(--text-tertiary);
}

.place-detail-about__tip-text {
  min-width: 0;
  word-break: keep-all;
}

/* Presentation Keyword (Hashtag)
   Feature Pill / Aside Highlight Pill과 **다른 표현**이다.
   Button이나 Chip으로 보이지 않도록 배경 / Border / Radius를 쓰지 않는다.
   클릭 대상이 아니므로 cursor / hover / focus 스타일도 두지 않는다. */
.place-detail-about__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-4); /* TIP ↔ Keyword 16px */
}

.place-detail-about__keyword {
  color: var(--brand-secondary);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}


/* ==================================================
   08. 업체 기본정보 (Definition List)
   1차 구조 유지. 외부 링크만 Chip Link로 정리했다.
================================================== */

.place-detail-info {
  border-top: 1px solid var(--border-light);
}

.place-detail-info__row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
}

.place-detail-info__label {
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.place-detail-info__value {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  word-break: keep-all;
}

/* 편의정보(usageAttrs) Tag — Neutral. Highlights(Feature Item)와 다른 표현이다 */
.place-detail-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.place-detail-info__tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* 외부 링크 : Browser 기본 Link(파란 밑줄)로 두지 않고
   프로젝트 Token 기준의 Chip Link로 정리했다(보조 액션이라 Button Surface는 쓰지 않는다). */
.place-detail-info__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.place-detail-info__link {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-link);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.place-detail-info__link:hover {
  border-color: var(--brand-interaction);
  background-color: var(--bg-brand-light);
  color: var(--brand-interaction);
}

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


/* ==================================================
   09. 대표 메뉴 Preview — 1줄 Horizontal Carousel

   Main 1000px / Light Block(좌우 Padding 0) 기준
     Card 4장 + Gap 20 x 3 = 1000  ->  Card 235px
   Track은 overflow: hidden 이고 places-detail.js 가 translateX 로 Page 이동한다.
   외부 Carousel Library를 쓰지 않는다.
================================================== */

.place-detail-menu-preview__track {
  display: flex;
  gap: var(--space-5); /* 20px — 목록 Card Grid Gap과 동일 */
  transition: transform var(--transition-slow);
  will-change: transform;
}

/* Track을 감싸는 Body가 넘치는 부분을 잘라낸다 */
[data-menu-preview] .place-detail-block__body {
  overflow: hidden;
}

.place-detail-menu-preview__item {
  /* 4장 동시 노출 : (100% - Gap 20 x 3) / 4 */
  flex: 0 0 calc((100% - var(--space-5) * 3) / 4);
  min-width: 0;
}

/* ---------- Menu Card (세로형 / Preview 전용) ---------- */

.place-menu-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); /* 목록 Card와 같은 14px */
  background-color: var(--surface-default);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

/* 목록 Card와 같은 강도의 Hover (Border 농도는 바꾸지 않는다) */
.place-menu-card:hover {
  box-shadow: var(--shadow-md);
}

.place-menu-card__media {
  position: relative;
  aspect-ratio: 4 / 3; /* 목록 Card 이미지와 같은 비율 */
  background-color: var(--bg-muted);
  overflow: hidden;
}

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

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

.place-menu-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  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;
}

/* BEST Badge — Ranking Policy가 없는 UI MOCK 표시다.
   Brand Color를 쓰면 확정 등급처럼 보이므로 Warning 계열 Surface로만 둔다. */
.place-menu-card__badge {
  flex-shrink: 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--warning-bg);
  color: var(--warning);
  font-size: var(--font-size-xs); /* 12px */
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.place-menu-card__price {
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}


/* ==================================================
   10. 전체 메뉴 (메뉴 Tab) — 2열 x 2행 Page View

   정보 Tab Preview와 **다른 UI**를 쓴다.
     Preview  세로 Card / 1줄 / 좌우 Slide
     Full     가로 Card / 2열 x 2행 / Page 단위 전환

   Page 계산(items / 4)은 places-detail.js 가 한다. 메뉴 개수가 늘어도 동작한다.
   마지막 Page의 항목이 4개보다 적어도 Grid가 무너지지 않는다(빈 칸으로 남는다).
================================================== */

.place-detail-menu-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.place-detail-menu-view__item[hidden] {
  display: none;
}

/* ---------- Menu Row (가로형 / 전체 메뉴 전용) ---------- */

.place-menu-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
  transition: box-shadow var(--transition-fast);
}

.place-menu-row:hover {
  box-shadow: var(--shadow-md);
}

.place-menu-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background-color: var(--bg-muted);
  overflow: hidden;
}

.place-menu-row__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.place-menu-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
}

.place-menu-row__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  word-break: keep-all;
}

/* 간단 설명 — Domain에 대응 field가 없는 `[UI MOCK]` 이다 */
.place-menu-row__desc {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-relaxed);
  word-break: keep-all;
}

.place-menu-row__price {
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}


/* ==================================================
   11. 리뷰
   Preview(정보 Tab 3건) / Full(리뷰 Tab 6건)이 같은 Component를 쓴다.
   Full에서만 리뷰 사진이 붙는다.
================================================== */

.place-detail-review__summary {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}


.place-detail-review__summary-score {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.place-detail-review__summary-count {
  font-variant-numeric: tabular-nums;
}

.place-detail-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.place-detail-review__card {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
}

/* 리뷰 Tab(Full)은 Panel 안에 들어가므로 Card 배경을 흰 면으로 두어
   Panel ↔ Card 대비가 과하지 않게 한다 */
.place-detail-review--full .place-detail-review__card {
  border-color: var(--border-default);
  background-color: var(--surface-default);
}

.place-detail-review__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.place-detail-review__author {
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.place-detail-review__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  font-variant-numeric: tabular-nums;
}


.place-detail-review__date {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
}

/* 본문 + (있으면) 사진 Thumbnail.
   사진이 없는 Review도 같은 Layout으로 안정적으로 보이게 Grid가 아니라 Flex를 쓴다. */
.place-detail-review__content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.place-detail-review__text {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-relaxed);
  word-break: keep-all;
}

/* Preview(정보 Tab)에는 __content 래퍼가 없으므로 __text 가 직접 여백을 갖는다 */
.place-detail-review__card > .place-detail-review__text {
  margin-top: var(--space-2);
}

/* 리뷰 사진은 Thumbnail 수준으로만 쓴다.
   Photo 중심 탐색은 `사진` Tab이 담당하므로 여기서 크게 키우지 않는다. */
.place-detail-review__photo {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-md);
  background-color: var(--bg-muted);
  overflow: hidden;
}

.place-detail-review__photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.place-detail-review__more {
  margin-top: var(--space-4);
  text-align: center;
}

.place-detail-review__more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 44px;
  padding: 0 var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.place-detail-review__more-button:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

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


/* ==================================================
   12. 사진 Tab — 3열 Image Grid

   Panel 안쪽 폭 = Main 1000 - Padding 24 x 2 = 952
   3열 / Gap 20 -> Tile 304 x 228 (4:3)
   4열이면 Tile이 223px로 작아져 사진 탐색 목적에 맞지 않아 3열을 택했다.
================================================== */

.place-detail-photo__count {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

.place-detail-photo__group-title {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.place-detail-photo__group-title:first-child {
  margin-top: 0;
}

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

.place-detail-photo-grid__item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background-color: var(--bg-muted);
  overflow: hidden;
}

.place-detail-photo-grid__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.place-detail-photo-grid__image:hover {
  transform: scale(1.04);
}


/* ==================================================
   13. 위치 정보
   모바일 detail-map-block (네이버/카카오 SDK + 외부맵 링크) 재사용.
   PC Main 폭에 맞게 캔버스 높이만 보정한다.
================================================== */

.place-detail-location .itamra-detail-map {
  height: auto;
  min-height: 220px;
  aspect-ratio: 24 / 7;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-muted);
}

.place-detail-location .itamra-map-ext {
  margin-top: var(--space-4);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-light);
  background: transparent;
}

.place-detail-location .itamra-map-ext-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.place-detail-location .itamra-map-ext-addr {
  margin-top: var(--space-1);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.place-detail-location .itamra-map-ext-links {
  margin-top: var(--space-3);
  gap: var(--space-2);
}

.place-detail-location .itamra-map-ext-links a {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

/* legacy action (unused after map-block) */
.place-detail-location__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--brand-interaction);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.place-detail-location__action:hover {
  border-color: var(--brand-interaction);
  background-color: var(--surface-hover);
}

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

.place-detail-location__action-icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  object-fit: contain;
}


/* ==================================================
   14. 비슷한 곳도 둘러보세요
   목록 Card(.place-card)를 그대로 쓰고 좁아진 폭만 --compact 로 보정한다.
   Modifier는 이 파일에만 있으므로 목록 화면(places.css)에 영향이 없다.

   Card 4장이 한 줄에 정확히 들어가므로 1차의 Rail(좌우 Nav / Drag)을 제거하고
   4 Column Grid로 뒀다. Rail은 항목이 넘칠 때 쓰는 장치다.
================================================== */

.place-detail-similar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5); /* 20px. 목록 Grid Gap과 동일 */
}

.place-detail-similar__item {
  min-width: 0;
}

/* Card 폭이 목록(약 352px)보다 좁아진 만큼(235px)만 보정한다.
   Border / Radius / Hover / Media 비율은 목록과 동일하게 둔다. */
.place-card--compact .place-card__body {
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.place-card--compact .place-card__title {
  font-size: var(--font-size-md); /* 18 -> 14 */
}

.place-card--compact .place-card__price {
  font-size: var(--font-size-md);
}


/* ==================================================
   15. Right Sticky Action Aside

   [역할] 행동 + 핵심 요약. 본문 정보를 반복하지 않는다.
     포함 : 업체명 / 한 줄 소개 / 전화 문의 / 문의 남기기 / 관심업체 등록 /
            오늘 영업정보(2줄) / 핵심 Highlight 3개
     제외 : 매장 사진 / Gallery / 전체 영업시간 표 / 전체 편의시설 /
            상세 주소 / 전체 메뉴 / 리뷰 / 지도  -> 전부 Main Content에만 둔다.

   [Sticky] top 32px — Wing(.main-wing__inner) / 부동산 Broker / 중고차 Dealer Card와
   **같은 값**이라 세 고정 영역의 상단 높이가 화면에서 일치한다.
   Aside와 Wing은 서로 다른 Grid Column이라 폭이 겹치지 않는다.
================================================== */

.place-detail-action {
  position: sticky;
  top: var(--space-8); /* 32px */
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
  /* Sticky로 실제로 떠 있는 요소라 Shadow를 허용한다 (tokens.css 사용 원칙) */
  box-shadow: var(--shadow-sm);
}

.place-detail-action__name {
  color: var(--text-primary);
  font-size: 22px; /* 부동산 __agency / 중고차 __company 와 같은 값 */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  word-break: keep-all;
}

/* 한 줄 소개(oneliner). businessProfile.shortIntro(16자 Card용)와 다른 필드다.
   길이 제한이 없는 값이라 2줄까지 허용하고 그 이상은 잘라 Layout을 지킨다. */
.place-detail-action__oneliner {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: var(--space-2);
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
  word-break: keep-all;
}

/* ---------- CTA ----------
   Button 규격(48px / gap 8 / Radius sm / semibold)은 중고차 Dealer CTA와 같다. */

.place-detail-action__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.place-detail-action__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

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

/* Primary : business-detail.css 의 문의하기 버튼과 동일한 규칙을 따른다 —
   --brand-secondary = Primary 버튼, --brand-interaction = Hover/Focus (tokens.css 정의). */
.place-detail-action__button--primary {
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
}

.place-detail-action__button--primary:hover {
  background-color: var(--brand-interaction);
}

.place-detail-action__button--secondary {
  border: 1px solid var(--border-default);
  background-color: var(--surface-default);
  color: var(--brand-secondary);
}

.place-detail-action__button--secondary:hover {
  border-color: var(--brand-secondary);
  background-color: var(--surface-hover);
}

/* 관심업체 : 상태를 갖는 Toggle. aria-pressed 로 상태를 노출한다.
   Pressed Color는 목록 Card Favorite / 중고차 Dealer Favorite과 같은 --error 계열이다. */
.place-detail-action__button--favorite {
  border: 1px solid var(--border-default);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.place-detail-action__button--favorite:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.place-detail-action__button--favorite[aria-pressed="true"] {
  border-color: var(--error);
  background-color: var(--error-bg);
  color: var(--error);
}

/* Icon Glyph는 목록 Card(.place-card__favorite-icon)와 같이 ♡ 하나만 쓰고
   선택 상태는 Color / Border / Surface 로만 표현한다. */
.place-detail-action__button-heart {
  font-size: var(--font-size-lg);
  line-height: 1;
}

/* Button Icon
   Asset : assets/icons/action/action-inquiry.svg, action-phone.svg (원색 #1344b4)
   Secondary Button은 White Surface라 Asset 원색을 그대로 쓰고,
   진한 Primary 배경(전화 문의) 위에서는 묻히므로 filter로 White 반전한다
   (business-detail.css / real-estate-detail.css / cars-detail.css 와 동일 처리). */
.place-detail-action__button-icon {
  display: block;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.place-detail-action__button--primary .place-detail-action__button-icon {
  filter: brightness(0) invert(1);
}

/* ---------- 오늘 영업정보 (최소 Summary) ----------
   본문 `업체 기본정보`의 전체 영업시간 표를 복제하지 않는다. 오늘 기준 2줄뿐이다. */

.place-detail-action__today {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.place-detail-action__today-label {
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.place-detail-action__today-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  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;
}

.place-detail-action__today-status {
  color: var(--success);
  font-weight: var(--font-weight-semibold);
}

/* ---------- 핵심 Highlight (Compact Pill) ----------
   Main의 Feature Item(Icon + Label)과 **다른 표현**을 써서 위계를 구분한다. */

.place-detail-action__highlight {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.place-detail-action__highlight-item {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--bg-brand-light);
  color: var(--brand-secondary);
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* ==================================================
   리뷰 작성 모달 (places-detail.js initReviewWrite())
   모달 골격(.modal / __dialog / __body 등)은 components.css 공용 정의를 그대로 쓴다.
================================================== */
.review-write__stars {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.review-write__star {
  border: none;
  background: none;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--border-strong);
}

.review-write__star.is-active {
  color: var(--warning);
}

.review-write__textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--font-size-md);
  font-family: inherit;
  resize: vertical;
}