/* 신부님 후기 모아보기 (/reviews) — 대표 요청 2026-08-27.
   ⚠ 이 화면은 홈과 **같은 틀**을 쓴다 (대표 «헤더가 사라져버리네 / 디자인스타일이 달라 폰트도 달라»).
   `body` 에 rules-page 를 붙이지 않고, site-header·site-footer·container·section-title 을
   홈에서 쓰던 그대로 쓴다. 여기 있는 건 후기 카드뿐이다. */

/* 머리말이 fixed(84px) 라 그만큼 비워준다 */
.rv-page { padding: 148px 0 96px; background: var(--paper); }
.rv-head { margin-bottom: 44px; text-align: center; }
.rv-head .section-desc { margin-top: 14px; line-height: 1.85; }
/* 지금 보고 있는 칸은 메뉴에서 짚어준다 */
.site-header .nav-menu a.on { color: var(--gold); }

/* ── 두 갈래를 위아래로 갈라 놓는다 (칸을 눌러 바꾸지 않아도 다 보이게) ── */
.rv-sec + .rv-sec { margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--line); }
.rv-sec-t { font-family: var(--kserif); font-size: 1.32rem; font-weight: 500;
  color: var(--ink); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.rv-sec-n { font-family: var(--sans); font-size: .76rem; font-weight: 500;
  color: var(--gold-deep); background: var(--cream); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; }
.rv-sec-d { margin: 0 0 22px; font-size: .86rem; color: var(--ink-soft); line-height: 1.75; }

.rv-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius, 10px);
  min-width: 0; }

/* ── 일반 후기: 이름 / 홀 이름 / 후기 링크 석 줄. 카드째 누르면 열린다.
      전에는 카드가 컸다 — 대표 «일반 후기 카드가 좀 커». 「블로그」 딱지도 뺐다.
      ⚠ align-items 를 start 로 두면 예식장 이름이 두 줄인 카드만 커져 들쭉날쭉해진다.
      늘려서(stretch) 한 줄 안에서는 키를 맞추고, 링크는 아래로 내려 붙인다 ── */
.rv-sec-link .rv-grid { display: grid; gap: 14px; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
.rv-link { display: flex; flex-direction: column; padding: 16px 18px 14px; background: var(--cream);
  transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.rv-link:hover { border-color: var(--gold); background: #fff; transform: translateY(-2px); }
.rv-link .rv-who { font-size: .92rem; }
.rv-go { margin-top: auto; padding-top: 10px; font-size: .82rem; color: var(--gold-deep); }
.rv-link:hover .rv-go { text-decoration: underline; }

/* ── 촬영 후 설문 후기: 본문이 주인공.
      ⚠ 격자로 놓으면 글 길이가 5자에서 200자까지라 한 줄이 제일 긴 카드에 맞춰지고
      나머지 밑이 통째로 빈다 — 대표 «박스가 너무 뒤죽박죽이네.. 빈공간도 많고».
      단(column)으로 쌓으면 위아래로 촘촘히 붙어 빈자리가 안 생긴다 ── */
.rv-sec-survey .rv-grid { display: block; column-count: 3; column-gap: 14px; }
.rv-survey { display: block; break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 14px; padding: 22px 22px 18px; }
.rv-body { margin: 0 0 16px; line-height: 1.9; color: #3d3833; font-size: .93rem;
  white-space: pre-wrap; word-break: break-word; }
.rv-body::before { content: '“'; font-family: var(--serif); font-size: 2.1rem;
  color: var(--gold); line-height: 0; vertical-align: -.22em; margin-right: 4px; }
.rv-foot { padding-top: 13px; border-top: 1px solid var(--line); }

.rv-who { margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink); }
.rv-meta { margin: 3px 0 0; font-size: .78rem; color: var(--ink-soft); }

.rv-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }

/* 안내 문구를 뺐으므로(대표 지시) 위 간격을 더 준다 */
.rv-cta { margin-top: 46px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .rv-sec-survey .rv-grid { column-count: 2; }
}
@media (max-width: 860px) {
  .rv-page { padding: 120px 0 72px; }
}
@media (max-width: 640px) {
  /* 좁으면 한 줄에 하나. 두 칸으로 버티면 글이 두 글자씩 끊긴다 */
  .rv-sec-link .rv-grid { grid-template-columns: 1fr; gap: 10px; }
  .rv-sec-survey .rv-grid { column-count: 1; }
  .rv-survey { margin-bottom: 10px; padding: 19px 18px 16px; }
  .rv-body { font-size: .9rem; line-height: 1.85; }
  .rv-sec + .rv-sec { margin-top: 36px; padding-top: 30px; }
  .rv-head { margin-bottom: 32px; }
  .rv-cta .btn { width: 100%; }
}

/* ── 후기 글을 이 자리에서 보여주는 창 (대표 «새창 말고 팝업형식으로») ── */
.rv-modal { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.rv-modal-bg { position: absolute; inset: 0; background: rgba(43, 39, 36, .55); }
.rv-modal-box { position: relative; z-index: 1; width: min(980px, 100%); height: min(86vh, 900px);
  background: var(--paper); border-radius: var(--radius, 4px); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 24px 60px -18px rgba(0,0,0,.45); }
.rv-modal-head { display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.rv-modal-t { margin: 0; margin-right: auto; font-size: .9rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-line { font-size: .8rem; color: var(--gold-deep); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 13px; white-space: nowrap; }
.btn-line:hover { border-color: var(--gold); background: var(--cream); }
.rv-modal-x { background: none; border: none; font-size: 1.7rem; line-height: 1; cursor: pointer;
  color: var(--ink-soft); padding: 0 4px; }
.rv-modal-x:hover { color: var(--ink); }
.rv-modal-body { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; }
.rv-modal-body iframe { width: 100%; height: 100%; border: 0; display: block; }
/* 안내 글은 화면 한가운데. iframe 은 안 보이게 숨겨두고 다 오면 드러낸다 */
.rv-modal-msg { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; margin: 0; padding: 20px;
  text-align: center; color: var(--ink-soft); font-size: .9rem; line-height: 1.8; }
.rv-modal-msg b { color: var(--ink); }

@media (max-width: 640px) {
  /* 폰에서는 꽉 채운다 — 여백을 두면 글이 들어갈 자리가 없다 */
  .rv-modal { padding: 0; }
  .rv-modal-box { width: 100%; height: 100%; border-radius: 0; }
  .rv-modal-t { font-size: .84rem; }
}

/* ── 쪽 나누기 (대표 «일반후기는 10개하고 페이지 네이션 / 설문후기도10개하고 페이지네이션»).
      자리마다 따로 넘긴다 — 한쪽을 넘겼다고 다른 쪽이 같이 넘어가면 안 된다 ── */
.rv-pg { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 20px; }
.rv-pg-a, .rv-pg-n { min-width: 34px; height: 34px; padding: 0 7px; border: 1px solid var(--line);
  background: #fff; border-radius: var(--radius, 4px); cursor: pointer; font-family: inherit;
  font-size: .85rem; color: var(--ink-soft); transition: border-color .18s, color .18s; }
.rv-pg-a:hover:not(:disabled), .rv-pg-n:hover { border-color: var(--gold); color: var(--gold-deep); }
.rv-pg-a:disabled { opacity: .35; cursor: default; }
.rv-pg-n.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.rv-pg-d { color: var(--ink-soft); padding: 0 2px; }