/* =========================================================
   campzone.css
   - 캠핑존 안내 페이지 전용
   - 목표: 카드/상세/비교/CTA까지 통일감 있게
========================================================= */

.section-block{ padding: 48px 0; }
.section-block.is-soft{ background: #f6f7f3; margin: 0 calc(-1 * var(--container-pad, 0px)); padding-left: var(--container-pad, 0px); padding-right: var(--container-pad, 0px); }
.section-head{ margin-bottom: 18px; text-align : center; }
.section-title{ font-size: 26px; font-weight: 800; letter-spacing: -0.02em;}
.section-desc{ color: #6b7280; margin-top: 6px; }

/* ===== 요약 카드(3개) ===== */
.zone-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.zone-card{
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  color: inherit;
}

.zone-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(0,0,0,.10);
}

.zone-thumb{
  height: 180px;
  background-size: cover;
  background-position: center;
}

.zone-body{ padding: 14px 14px 16px; }
.zone-name{ font-size: 18px; font-weight: 800; }
.zone-one{ margin-top: 6px; color: #4b5563; font-size: 14px; }
.zone-tags{ margin-top: 10px; display:flex; flex-wrap:wrap; gap: 8px; }
.tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
}

/* ===== 상세 섹션 ===== */
.zone-detail-head{ margin-bottom: 14px; text-align: center;}
.zone-detail-grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items: start;
}

/* 사진 갤러리: JS 없이 모바일 슬라이더(스크롤 스냅) */
.zone-gallery{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.zone-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.zone-shot{ margin: 0; scroll-snap-align: start; }
.zone-shot img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.zone-hint{
  padding: 10px 12px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  border-top: 1px solid #eef2f7;
}

/* 정보 카드 */
.zone-info-box{
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.info-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px dashed #e5e7eb;
}
.info-row:last-child{ border-bottom: 0; }
.info-row .k{ color:#6b7280; font-weight: 700; min-width: 92px; }
.info-row .v{ color:#111827; font-weight: 600; text-align: right; }

.zone-actions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; }
.zone-note{ margin-top: 10px; color: #6b7280; font-size: 12px; line-height: 1.5; }

/* ===== 비교표 ===== */
.table-wrap{ overflow:auto; }
.compare-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
}
.compare-table th, .compare-table td{
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f7;
  font-size: 14px;
}
.compare-table thead th{
  background: #f9fafb;
  font-weight: 800;
}
.compare-table tbody tr:last-child td{ border-bottom: 0; }
.compare-table td:first-child{ font-weight: 800; color:#374151; width: 120px; }

/* ===== CTA ===== */
.cta-card{
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f2 100%);
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}
.cta-title{ font-size: 20px; font-weight: 900; margin: 0; }
.cta-desc{ margin: 6px 0 0; color:#6b7280; }
.cta-actions{ display:flex; gap: 10px; flex-wrap: wrap; }

/* ===== 반응형 ===== */
@media (max-width: 980px){
  .zone-cards{ grid-template-columns: 1fr; }
  .zone-thumb{ height: 220px; }
  .zone-detail-grid{ grid-template-columns: 1fr; }
  .zone-shot img{ height: 320px; }
  .cta-card{ flex-direction: column; align-items: flex-start; }
}

/* 컨테이너 패딩 변수가 없으면 soft 배경 padding 계산이 0이 될 수 있어서 기본값 제공 */
:root{ --container-pad: 20px; }


/* =========================================================
   [모바일] 캠핑존 한눈에 보기: 카드 가로 슬라이더 (Flex 버전)
   - Grid에서 생기는 "세로 stretch(카드 높이 쭉 늘어남)" 문제 방지
========================================================= */
@media (max-width: 980px){

  .zone-cards{
    /* ✅ grid -> flex 로 변경 (높이 늘어나는 문제 제거) */
    display: flex;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    padding: 6px 2px 14px;

    /* ✅ 카드가 위쪽에 붙도록 (세로 늘어남 방지) */
    align-items: flex-start;
  }

  .zone-card{
    /* ✅ 한 장 폭 고정 (원하면 80~90%로 조절) */
    flex: 0 0 86%;
    scroll-snap-align: start;

    /* ✅ 혹시라도 높이 늘어나는 경우를 차단 */
    height: auto;
  }

  .zone-thumb{
    height: 200px;
  }

  /* 스크롤바 얇게 */
  .zone-cards::-webkit-scrollbar{ height: 6px; }
  .zone-cards::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.18);
    border-radius: 999px;
  }
  .zone-cards::-webkit-scrollbar-track{
    background: rgba(0,0,0,.06);
    border-radius: 999px;
  }
}

/* 앵커 이동 시 상단 고정헤더 높이만큼 여백 확보 */
#zone-auto, #zone-indoor, #zone-module{
  scroll-margin-top: 110px; /* 헤더 높이에 맞게 숫자만 조절 */
}
.zone-compare.section-block.is-soft {
  background: #faf7f2; /* 메인 베이지 톤과 동일 */
}

.zone-compare table {
  margin: 0 auto;
}
.zone-compare th,
.zone-compare td {
  text-align: center;
  vertical-align: middle;
}
.zone-compare th:first-child,
.zone-compare td:first-child {
  text-align: left;
  padding-left: 20px;
  font-weight: 600;
}
.zone-compare .section-title {
  margin-bottom: 12px;
}

.zone-compare .section-desc {
  margin-bottom: 28px;
}
/* 캠핑존 첫 상세 섹션 상단 여백 줄이기 */
.zone-detail:first-of-type {
  padding-top: 24px; /* 기존보다 줄인 값 */
}

.zone-detail h2 {
  margin-top: 0;
}

/* 상단 페이지 타이틀(캠핑존) 영역 하단 여백 살짝 줄이기 */
.page-head {
  padding-bottom: 12px; /* 기존이 더 크면 줄이기 */
}

/* 카드(큰 흰 박스)가 타이틀 영역에 더 붙도록 */
.page-head + .card,
.page-head + .panel,
.page-head + .section-card {
  margin-top: 12px; /* 기존 20~30이면 12로 */
}