/* pSEO(지역×인원×시설) 추천 페이지 — wh-tokens.css 변수 기준. 신규 규칙만, 기존 페이지 CSS 영향 없음.
   카드 elevation·chip·hover 패턴은 docs/design-md/patterns/recipes.md ListingCard/SearchFilterChips SSOT. */

.pseo-wrap {
  max-width: var(--wh-max-page);
  margin: 0 auto;
  padding: 0 var(--wh-space-md);
}

/* 데스크톱 셸(static-pages-desktop-upgrade.css)의 div#content 기본 규칙이 좌우 padding을 0으로
   강제해서(!important) 콘텐츠가 --sp-dt-max-w 컬럼 가장자리에 붙는다 — 여기서만 좌우 여백 보정. */
html.sp-force-desktop-ui div#content.pseo-page {
  padding-left: var(--wh-space-xl) !important;
  padding-right: var(--wh-space-xl) !important;
}

.pseo-breadcrumb {
  font-size: var(--wh-text-xs);
  color: var(--wh-tx3);
  padding: var(--wh-space-md) 0 0;
}
.pseo-breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--wh-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pseo-breadcrumb-list li + li::before {
  content: ">";
  margin-right: var(--wh-space-xs);
  color: var(--wh-tx3);
}
.pseo-breadcrumb a {
  color: var(--wh-tx3);
  text-decoration: none;
}
.pseo-breadcrumb-current {
  color: var(--wh-tx);
}

.pseo-hero {
  padding: var(--wh-space-xl) 0 var(--wh-space-lg);
  border-bottom: 1px solid var(--wh-bd-hairline);
  display: grid;
  gap: var(--wh-space-lg);
}
@media (min-width: 1024px) {
  .pseo-hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* 히어로 우측 대표 사진 모자이크 — 목록 상위 4장 재사용(추가 쿼리 없음). 장식용이라 alt 비움. */
.pseo-hero-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wh-space-xs);
  border-radius: var(--wh-radius-md);
  overflow: hidden;
}
.pseo-hero-mosaic-item {
  display: block;
  aspect-ratio: 4/3;
  background: var(--wh-surface);
  overflow: hidden;
}
.pseo-hero-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 1023px) {
  .pseo-hero-mosaic {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 160px;
    overflow-x: auto;
  }
}
.pseo-h1 {
  font-family: var(--wh-ff-display, var(--wh-ff));
  font-size: var(--wh-text-hero);
  font-weight: 800;
  letter-spacing: var(--wh-tracking-title);
  margin: 0 0 var(--wh-space-sm);
  color: var(--wh-tx);
}
.pseo-desc {
  font-size: var(--wh-text-sm);
  color: var(--wh-tx3);
  max-width: 640px;
  margin: 0 0 var(--wh-space-md);
}

/* 적용 조건 칩 — SearchFilterChips 재사용(선택된 필터라 selected 톤) */
.pseo-condition-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wh-inline-xs, 8px);
  margin-bottom: var(--wh-space-sm);
}
.pseo-condition-chips .wh-chip {
  cursor: default;
  min-height: 32px;
  padding: 6px 12px;
  font-size: var(--wh-text-xs);
}

.pseo-stat-badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wh-space-xs);
  background: var(--wh-brand-tint);
  color: var(--wh-brand);
  font-size: var(--wh-text-xs);
  font-weight: 600;
  padding: 6px var(--wh-space-md);
  border-radius: var(--wh-radius-pill);
}
.pseo-stat-badge strong {
  font-family: var(--wh-ff-display, var(--wh-ff));
  font-size: var(--wh-text-lg);
  font-weight: 800;
}

.pseo-empty {
  padding: var(--wh-space-4xl) 0;
  text-align: center;
  color: var(--wh-tx3);
}
.pseo-empty-link {
  display: inline-block;
  margin-top: var(--wh-space-md);
  color: var(--wh-brand);
  font-weight: 600;
  text-decoration: none;
}

.pseo-tips {
  background: var(--wh-brand-tint);
  border-radius: var(--wh-radius-md);
  padding: var(--wh-space-md) var(--wh-space-lg);
  margin: var(--wh-space-lg) 0;
}
.pseo-tips-title {
  font-family: var(--wh-ff-display, var(--wh-ff));
  font-size: var(--wh-text-sm);
  font-weight: 700;
  color: var(--wh-brand);
  margin: 0 0 var(--wh-space-xs);
}
.pseo-tips-list {
  margin: 0;
  padding-left: var(--wh-space-lg);
}
.pseo-tips-list li {
  font-size: var(--wh-text-sm);
  color: var(--wh-tx);
  margin-bottom: 4px;
}

.pseo-date-guest-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wh-space-sm);
  background: var(--wh-surface);
  border-radius: var(--wh-radius-sharp);
  padding: var(--wh-space-sm) var(--wh-space-md);
  margin: var(--wh-space-lg) 0;
}
.pseo-date-guest-field {
  font-size: var(--wh-text-sm);
  color: var(--wh-tx3);
}
.pseo-date-guest-field em {
  color: var(--wh-tx);
  font-style: normal;
  font-weight: 600;
}
.pseo-date-guest-cta {
  margin-left: auto;
  background: var(--wh-brand);
  color: #fff;
  text-decoration: none;
  font-size: var(--wh-text-sm);
  font-weight: 600;
  padding: 8px var(--wh-space-md);
  border-radius: var(--wh-radius-btn);
  min-height: var(--wh-touch-min, 44px);
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .pseo-date-guest-cta:hover {
    background: var(--wh-brand-hover);
  }
}

.pseo-section-title {
  font-family: var(--wh-ff-display, var(--wh-ff));
  font-size: var(--wh-text-section);
  font-weight: 800;
  color: var(--wh-tx);
  margin: var(--wh-space-lg) 0 var(--wh-space-sm);
}

.pseo-compare-wrap {
  margin-bottom: var(--wh-space-lg);
  border: 1px solid var(--wh-bd-hairline);
  border-radius: var(--wh-radius-sharp);
  overflow: hidden;
}
.pseo-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wh-text-sm);
}
.pseo-compare-table th,
.pseo-compare-table td {
  border-bottom: 1px solid var(--wh-bd-hairline);
  padding: var(--wh-space-sm);
  text-align: center;
  color: var(--wh-tx);
}
.pseo-compare-table th {
  background: var(--wh-surface);
  color: var(--wh-tx3);
  font-weight: 600;
  border-bottom: 1px solid var(--wh-bd-hairline);
}
.pseo-compare-table tbody tr:last-child td {
  border-bottom: none;
}
.pseo-compare-mobile { display: none; }

.pseo-listing-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--wh-space-lg);
}

.pseo-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wh-space-sm);
  margin: var(--wh-space-3xl) 0 var(--wh-space-xl);
}
.pseo-more-status {
  margin: 0;
  color: var(--wh-tx3);
  font-size: var(--wh-text-sm);
}
.pseo-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wh-touch-min);
  padding: var(--wh-space-sm) var(--wh-space-xl);
  border: 1px solid var(--wh-bd-hairline);
  border-radius: var(--wh-radius-sharp);
  background: var(--wh-card);
  color: var(--wh-tx);
  font-size: var(--wh-text-sm);
  font-weight: 600;
  text-decoration: none;
}
.pseo-more-link[hidden] { display: none; }
.pseo-more-link:focus-visible {
  outline: 2px solid var(--wh-focus-ring);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pseo-more-link:hover { background: var(--wh-surface); }
}

.pseo-prop-card {
  border: 1px solid var(--wh-bd, rgba(0, 0, 0, 0.06));
  /* ListingCard rest = elevation 0. --wh-shadow-listing은 패널 전용, 카드 rest에 쓰지 않는다. */
  box-shadow: none;
  transition:
    transform var(--wh-motion-state, 180ms) var(--wh-ease-spring, cubic-bezier(0.34, 1.28, 0.64, 1)),
    box-shadow var(--wh-motion-hover, 120ms) var(--wh-ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
@media (hover: hover) and (pointer: fine) {
  .pseo-prop-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wh-shadow-listing-hover);
  }
  .pseo-prop-card:hover .r26-prop-img,
  .pseo-prop-card:hover .pseo-prop-img-placeholder {
    transform: scale(1.02);
  }
}
.pseo-prop-card .r26-prop-img {
  transition: transform var(--wh-motion-state, 180ms) var(--wh-ease-out-smooth);
}
.pseo-prop-img-placeholder {
  aspect-ratio: 4/3;
  background: var(--wh-surface);
  transition: transform var(--wh-motion-state, 180ms) var(--wh-ease-out-smooth);
}
.pseo-prop-price {
  font-size: var(--wh-text-base);
  font-weight: 800;
  color: var(--wh-tx);
  margin-top: var(--wh-space-xs);
}
.pseo-prop-price-unit {
  font-size: var(--wh-text-xs);
  font-weight: 600;
  color: var(--wh-tx3);
}
.pseo-prop-price-note {
  font-size: var(--wh-text-xs);
  color: var(--wh-tx3);
  margin-top: 6px;
}

.pseo-guide-section,
.pseo-related {
  margin: var(--wh-space-xl) 0;
}

.pseo-faq-list { margin-top: var(--wh-space-sm); }
.pseo-faq-item {
  border-bottom: 1px solid var(--wh-bd-hairline);
  padding: var(--wh-space-sm) 0;
}
.pseo-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wh-space-sm);
  background: none;
  border: none;
  padding: var(--wh-space-xs) 0;
  min-height: var(--wh-touch-min, 44px);
  font-weight: 600;
  font-size: var(--wh-text-sm);
  color: var(--wh-tx);
  cursor: pointer;
  text-align: left;
}
.pseo-faq-q:focus-visible {
  outline: 2px solid var(--wh-focus-ring);
  outline-offset: 2px;
}
.pseo-faq-chevron {
  display: inline-flex;
  color: var(--wh-brand);
  transition: transform var(--wh-motion-fast) var(--wh-ease-out-smooth);
  flex: none;
}
.pseo-faq-chevron svg {
  display: block;
}
.pseo-faq-item.open .pseo-faq-chevron {
  transform: rotate(90deg);
}
.pseo-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--wh-motion-fast) var(--wh-ease-out-smooth);
}
.pseo-faq-item.open .pseo-faq-a {
  grid-template-rows: 1fr;
}
.pseo-faq-a-inner {
  min-height: 0;
  font-size: var(--wh-text-sm);
  color: var(--wh-tx3);
  padding-top: var(--wh-space-xs);
}

.pseo-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wh-inline-xs, 8px);
}

.pseo-footnote {
  border-top: 1px solid var(--wh-bd-hairline);
  padding: var(--wh-space-lg) 0;
  margin-top: var(--wh-space-xl);
  font-size: var(--wh-text-xs);
  color: var(--wh-tx3);
}

/* 분기값은 var()를 쓸 수 없어 토큰 수치 그대로 사용: 640=bp-mobile, 1024=bp-desktop-lock */
@media (min-width: 640px) {
  .pseo-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pseo-hero { padding: var(--wh-space-2xl) 0 var(--wh-space-xl); }
  .pseo-listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .pseo-compare-table { display: none; }
  .pseo-compare-mobile { display: block; }
  .pseo-compare-wrap { border: none; border-radius: 0; }
  .pseo-compare-row {
    display: flex;
    justify-content: space-between;
    gap: var(--wh-space-sm);
    border-bottom: 1px solid var(--wh-bd-hairline);
    padding: var(--wh-space-xs) 0;
    font-size: var(--wh-text-sm);
    color: var(--wh-tx);
  }
  .pseo-compare-row-detail { color: var(--wh-tx3); }
}

/* pSEO 랜딩 집중: 전역 플로팅 위젯 숨김.
   AI FAB 파셜이 로컬 미추적(실서버 전용)이라 PHP URI 가드 대신 CSS로 처리한다.
   pseo.css는 pSEO 컨트롤러에서만 로드되고 body:has로 이중 한정하므로 다른 페이지 영향 없음. */
body:has(#content.pseo-page) .wh-air-fab,
body:has(#content.pseo-page) .wh-air-tip,
body:has(#content.pseo-page) .wh-appdl,
body:has(#content.pseo-page) .wh-appdl-qr,
body:has(#content.pseo-page) .wh-admin-ui-fab {
  display: none !important;
}

/* 지역 최상위 페이지 「한눈에 보기」 숫자 칸 (2026-10-10 #718) */
.pseo-region-stats,
.pseo-region-near {
  margin: var(--wh-space-xl) 0;
}
.pseo-rs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wh-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pseo-rs-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  box-sizing: border-box;
  padding: var(--wh-space-sm) var(--wh-space-md);
  border: 1px solid var(--wh-bd-hairline);
  border-radius: var(--wh-radius-sharp);
  color: var(--wh-tx);
  text-decoration: none;
}
.pseo-rs-label {
  font-size: var(--wh-text-sm);
  color: var(--wh-tx3);
}
.pseo-rs-value {
  font-size: var(--wh-text-section);
  font-weight: 700;
  color: var(--wh-tx);
}
.pseo-rs-item--link .pseo-rs-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pseo-rs-item--link:focus-visible {
  outline: 2px solid var(--wh-focus-ring);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pseo-rs-item--link:hover {
    border-color: var(--wh-tx3);
  }
}
.pseo-rs-note {
  margin: var(--wh-space-xs) 0 0;
  font-size: var(--wh-text-xs);
  color: var(--wh-tx3);
}
@media (min-width: 640px) {
  .pseo-rs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 지역 최상위 페이지 월별 평균 1박 요금 표 (2026-10-10 #718) */
.pseo-region-monthly {
  margin: var(--wh-space-xl) 0;
}
.pseo-mo-summary {
  margin: 0 0 var(--wh-space-sm);
  font-size: var(--wh-text-sm);
  color: var(--wh-tx);
}
.pseo-mo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wh-text-sm);
  font-variant-numeric: tabular-nums;
}
.pseo-mo-table th,
.pseo-mo-table td {
  padding: 10px var(--wh-space-sm);
  border-bottom: 1px solid var(--wh-bd-hairline);
  text-align: right;
}
.pseo-mo-table th:first-child {
  text-align: left;
}
.pseo-mo-table thead th {
  color: var(--wh-tx3);
  font-weight: 600;
}
.pseo-mo-table tbody th {
  font-weight: 600;
  color: var(--wh-tx);
}
.pseo-mo-table tr.is-cheapest td,
.pseo-mo-table tr.is-cheapest th {
  font-weight: 700;
  background: var(--wh-surface);
}