/* ============================================================
   reviews.css — 이용후기 페이지 전용 스타일
   ============================================================ */

/* ── 페이지 상단 여백 (fixed nav 80px 보정) ── */
body {
  padding-top: 80px;
}
@media (max-width: 640px) {
  body {
    padding-top: 60px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.reviews-hero {
  background: var(--bg-elevated);
  text-align: center;
  padding: 60px 0 56px;
}

.reviews-hero .section-eyebrow {
  color: var(--color-primary-dark);
}

.reviews-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-extrabold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}

.reviews-hero p {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  max-width: 440px;
  margin: 0 auto;
}

/* ══════════════════════════════════════
   MAIN GRID
══════════════════════════════════════ */
.reviews-main {
  background: var(--bg-surface);
  padding: 60px 0 80px;
}

/* 3열 그리드 — 데스크톱 */
.reviews-grid-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1040px;
  margin: 0 auto;
}

/* 태블릿: 2열 */
@media (max-width: 1023px) {
  .reviews-grid-page {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 모바일: 1열 */
@media (max-width: 640px) {
  .reviews-grid-page {
    grid-template-columns: 1fr;
  }

  .reviews-hero {
    padding: 48px 0 44px;
  }

  .reviews-hero h1 {
    font-size: 2rem;
  }

  .reviews-main {
    padding: 48px 0 64px;
  }
}

/* ══════════════════════════════════════
   더 보기 버튼
══════════════════════════════════════ */
.reviews-load-more-wrap {
  text-align: center;
  margin-top: var(--space-10);
}

.reviews-load-more-btn {
  min-width: 160px;
}

.reviews-load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ══════════════════════════════════════
   MOBILE (≤ 640px) — 추가 스타일
══════════════════════════════════════ */
@media (max-width: 640px) {
  #reviews-more-btn, .reviews-more-wrap button {
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    font-size: 0.9375rem;
  }

  .review-meta {
    flex-direction: column;
    gap: 2px;
  }
}