/* 어서자 포털 — 목록·상세(M4, 묶음7 L2)
 * 실측: docs/superpowers/specs/2026-09-27-m4-portal-facts.md (A 프레임 구조 · D 데이터 갭)
 * ★ 전 선택자 body.portal-site 접두(래칫 PortalListCssScopeTest) — 캠프 사이트는 이 파일을 로드하지
 *   않으므로(front/portalList.jsp·portalCampDetail.jsp가 c:if IS_PORTAL_SITE 로 건다) 접두가 없어도
 *   실질 영향은 없지만, L1/L3 CSS 와 같은 규약을 지켜 리뷰·래칫을 하나로 맞춘다.
 * 색은 assets/ds/tokens.css 변수만 쓴다(리터럴 hex 금지) — 그 파일은 L1 이 IS_PORTAL_SITE 일 때 로드한다. */

body.portal-site .portal-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 20px;
  margin: 24px 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card-portal);
}

body.portal-site .portal-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

body.portal-site .portal-filter-field--sm {
  min-width: 80px;
}

body.portal-site .portal-filter-field label {
  font-size: var(--ds-font-label-size);
  font-weight: var(--ds-font-label-weight);
  color: var(--ds-text-muted);
}

body.portal-site .portal-filter-field input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  font-size: var(--ds-font-body-m-size);
  color: var(--ds-text);
  background: var(--ds-bg);
}

body.portal-site .portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: var(--ds-font-body-m-size);
  font-weight: var(--ds-font-label-weight);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

body.portal-site .portal-btn--accent,
body.portal-site .portal-btn--primary {
  background: var(--ds-cta);
  color: var(--ds-on-primary);
}

body.portal-site .portal-btn--ghost {
  background: var(--ds-bg);
  color: var(--ds-text-strong);
  border-color: var(--ds-border);
}

body.portal-site .portal-btn--block {
  display: flex;
  width: 100%;
  margin-bottom: 8px;
}

body.portal-site .portal-list-summary {
  margin: 0 0 12px;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-body-s-size);
}

body.portal-site .portal-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.portal-site .portal-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card-portal);
  overflow: hidden;
  background: var(--ds-bg);
  box-shadow: var(--ds-shadow-card);
}

body.portal-site .portal-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

body.portal-site .portal-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ds-surface);
}

body.portal-site .portal-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.portal-site .portal-card-body {
  padding: 16px;
}

body.portal-site .portal-card-name {
  display: block;
  font-size: var(--ds-font-title-size);
  font-weight: var(--ds-font-title-weight);
  color: var(--ds-text-strong);
}

body.portal-site .portal-card-region {
  display: block;
  margin-top: 4px;
  font-size: var(--ds-font-caption-size);
  color: var(--ds-text-muted);
}

body.portal-site .portal-card-desc {
  margin: 8px 0 0;
  font-size: var(--ds-font-body-s-size);
  color: var(--ds-text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body.portal-site .portal-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: var(--ds-font-body-s-size);
}

body.portal-site .portal-card-remain {
  color: var(--ds-text);
}

body.portal-site .portal-card-remain--full {
  color: var(--ds-text-muted);
}

body.portal-site .portal-card-price {
  font-weight: var(--ds-font-title-weight);
  color: var(--ds-cta);
}

body.portal-site .portal-card-cta {
  padding: 0 16px 16px;
}

body.portal-site .portal-card-cta .portal-btn {
  width: 100%;
}

/* ==================== 캠핑장 상세 ==================== */

body.portal-site .portal-detail-breadcrumb {
  margin: 16px 0;
  font-size: var(--ds-font-caption-size);
  color: var(--ds-text-muted);
}

body.portal-site .portal-detail-breadcrumb a {
  color: var(--ds-text-muted);
}

body.portal-site .portal-detail-gallery {
  aspect-ratio: 16 / 6;
  overflow: hidden;
  border-radius: var(--ds-radius-card-portal);
  background: var(--ds-surface);
}

body.portal-site .portal-detail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.portal-site .portal-detail-head {
  margin: 20px 0;
}

body.portal-site .portal-detail-title {
  margin: 0;
  font-size: var(--ds-font-h2-size);
  font-weight: var(--ds-font-h2-weight);
  color: var(--ds-text-strong);
}

body.portal-site .portal-detail-addr,
body.portal-site .portal-detail-summary,
body.portal-site .portal-detail-tel {
  margin: 6px 0 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-body-m-size);
}

body.portal-site .portal-detail-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
  margin-bottom: 40px;
}

body.portal-site .portal-detail-subtitle {
  font-size: var(--ds-font-h3-size);
  font-weight: var(--ds-font-h3-weight);
  color: var(--ds-text-strong);
  margin: 0 0 12px;
}

body.portal-site .portal-area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.portal-site .portal-area {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
}

body.portal-site .portal-area-name {
  font-weight: var(--ds-font-title-weight);
  color: var(--ds-text-strong);
}

body.portal-site .portal-area-spec {
  color: var(--ds-text-muted);
  font-size: var(--ds-font-body-s-size);
}

body.portal-site .portal-area-price {
  margin-left: auto;
  color: var(--ds-cta);
  font-weight: var(--ds-font-title-weight);
}

body.portal-site .portal-detail-booking {
  position: sticky;
  top: 20px;
  padding: 20px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card-portal);
  background: var(--ds-surface);
}

body.portal-site .portal-detail-booking-price {
  margin: 0 0 16px;
  font-size: var(--ds-font-h3-size);
  color: var(--ds-text-strong);
}

body.portal-site .portal-detail-note {
  margin: 12px 0 0;
  font-size: var(--ds-font-caption-size);
  color: var(--ds-text-muted);
}

/* ==================== 모바일(375) ==================== */

@media (max-width: 767px) {
  body.portal-site .portal-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  body.portal-site .portal-filter-field,
  body.portal-site .portal-filter-field--sm {
    min-width: 0;
  }

  body.portal-site .portal-card-list {
    grid-template-columns: 1fr;
  }

  body.portal-site .portal-detail-body {
    grid-template-columns: 1fr;
  }

  body.portal-site .portal-detail-booking {
    position: static;
  }
}

/* 단계4 — 큐레이션·지자체 모음 목록 머리(제목·소개) */
body.portal-site .portal-list-head { margin: 0 0 20px; }
body.portal-site .portal-list-title { margin: 0 0 6px; font-size: var(--ds-font-h2-size); font-weight: 700; color: var(--ds-text-strong); }
body.portal-site .portal-list-lead { margin: 0; font-size: var(--ds-font-body-m-size); color: var(--ds-text-muted); }

/* ==================== Figma 03 ② 검색결과·목록 / ③ 상세 대조(DR-P, 2026-09-28) ====================
 * 본문 폭 1120(프레임 1280 − 좌우 80), 검색 바 = Booking Bar(surface·r16·그림자·라벨 위/값 아래·구분선),
 * 목록 카드 = Camp Card Horizontal(사진 왼쪽 200·정보 오른쪽, surface·그림자), 가격은 text-strong.
 * 폼 name·링크·버튼 동작은 그대로 — 클래스 스타일만 바꾼다. */
body.portal-site .portal-list > .container,
body.portal-site .portal-detail > .container { max-width: 1120px; }

body.portal-site .portal-filter-bar {
  align-items: center;
  gap: 0;
  padding: 8px;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 14px rgba(20, 23, 28, .14);
}
body.portal-site .portal-filter-field {
  flex: 1 1 0;
  min-width: 0;
  gap: 2px;
  padding: 8px 16px;
}
body.portal-site .portal-filter-field--sm { flex: 0 1 110px; }
body.portal-site .portal-filter-field + .portal-filter-field { border-left: 1px solid var(--ds-border); }
body.portal-site .portal-filter-field label { font-size: 12px; }
body.portal-site .portal-filter-field input {
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 700;
  color: var(--ds-text-strong);
}
body.portal-site .portal-filter-bar .portal-btn { height: 52px; padding: 0 24px; font-weight: 700; }

body.portal-site .portal-list-summary {
  margin: 40px 0 20px;
  font-size: var(--ds-font-h3-size);
  font-weight: 700;
  color: var(--ds-text-strong);
}

body.portal-site .portal-card-list { grid-template-columns: 1fr; gap: 16px; }
body.portal-site .portal-card {
  flex-direction: row;
  align-items: center;
  padding: 14px;
  border: 0;
  background: var(--ds-surface);
}
body.portal-site .portal-card-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 18px; }
body.portal-site .portal-card-img { flex: none; width: 200px; aspect-ratio: 25 / 18; border-radius: 8px; }
body.portal-site .portal-card-body { padding: 0; min-width: 0; }
body.portal-site .portal-card-region { font-size: 13px; }
body.portal-site .portal-card-desc { margin-top: 6px; }
body.portal-site .portal-card-meta { justify-content: flex-start; gap: 12px; margin-top: 6px; }
body.portal-site .portal-card-price { font-size: 20px; color: var(--ds-text-strong); }
body.portal-site .portal-card-cta { flex: none; padding: 0 0 0 16px; }
body.portal-site .portal-card-cta .portal-btn { width: auto; }

/* 상세: 사진 r12, 제목 32, 구역 행 = surface 카드(r12), 가격 text-strong, 예약 요약 = surface 카드 */
body.portal-site .portal-detail-gallery { aspect-ratio: 11 / 4; }
body.portal-site .portal-detail-head { margin: 24px 0 32px; }
body.portal-site .portal-detail-addr,
body.portal-site .portal-detail-summary,
body.portal-site .portal-detail-tel { font-size: var(--ds-font-body-s-size); }
body.portal-site .portal-detail-body { grid-template-columns: 1fr 360px; gap: 32px; }
body.portal-site .portal-detail-subtitle { font-size: 22px; margin-bottom: 16px; }
body.portal-site .portal-area-list { gap: 12px; }
body.portal-site .portal-area {
  padding: 18px 20px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card-portal);
  background: var(--ds-surface);
}
body.portal-site .portal-area-price { font-size: var(--ds-font-title-size); color: var(--ds-text-strong); }
body.portal-site .portal-detail-booking { padding: 24px; }
body.portal-site .portal-detail-booking-price { font-size: 22px; font-weight: 700; }
body.portal-site .portal-detail-booking .portal-btn { height: 52px; font-weight: 700; }

@media (max-width: 767px) {
  body.portal-site .portal-filter-field + .portal-filter-field { border-left: 0; border-top: 1px solid var(--ds-border); }
  body.portal-site .portal-filter-bar { align-items: stretch; }
  body.portal-site .portal-filter-field, body.portal-site .portal-filter-field--sm { flex: none; }
  body.portal-site .portal-list-summary { margin-top: 24px; font-size: 20px; }
  /* Figma 모바일 목록: 카드 테두리·배경 없이 사진 위·정보 아래 */
  body.portal-site .portal-card { flex-direction: column; align-items: stretch; padding: 0; background: transparent; box-shadow: none; }
  body.portal-site .portal-card-link { flex-direction: column; align-items: stretch; gap: 14px; }
  body.portal-site .portal-card-img { width: 100%; aspect-ratio: 343 / 210; border-radius: var(--ds-radius-card-portal); }
  body.portal-site .portal-card-cta { padding: 12px 0 0; }
  body.portal-site .portal-card-cta .portal-btn { width: 100%; }
  body.portal-site .portal-detail-gallery { aspect-ratio: 4 / 3; }
  /* 상세 본문 320px 고정 2열이 모바일 컨테이너 폭을 넘어 가로 스크롤을 만듦(P2-2) */
  body.portal-site .portal-detail-body { grid-template-columns: 1fr; }
}