/* areas-shared.css — 신규 지역페이지 20종 공용 컴포넌트: 4컷 현장사진 갤러리·비용표·FAQ·관련링크·컴팩트 푸터 */

.detail-gallery {
  max-width: 1120px;
  margin: 40px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.detail-gallery picture, .detail-gallery img { display: block; width: 100%; }
.detail-gallery img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.detail-gallery figcaption {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.85rem;
  color: var(--secondary, #8a8a8a);
  margin-top: 8px;
}
@media (max-width: 860px) {
  .detail-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.cost-table { max-width: 960px; margin: 40px auto; padding: 0 20px; overflow-x: auto; }
.cost-table table { width: 100%; border-collapse: collapse; }
.cost-table caption { text-align: left; font-weight: 700; margin-bottom: 10px; font-size: 1.05rem; color: var(--primary, #35443A); }
.cost-table th, .cost-table td { border: 1px solid var(--secondary, #ddd); padding: 12px 14px; text-align: left; font-size: 0.92rem; vertical-align: top; }
.cost-table th { background: var(--secondary, #f2f2f2); font-weight: 700; }

.faq-block { max-width: 880px; margin: 48px auto; padding: 0 20px; }
.faq-block h2 { margin-bottom: 18px; }
.faq-list h3 { font-size: 1.05rem; margin: 26px 0 8px; color: var(--primary, #35443A); }
.faq-list h3:first-child { margin-top: 0; }
.faq-list p { margin: 0; font-size: 0.95rem; }

.related-links { max-width: 880px; margin: 40px auto; padding: 0 20px; }
.related-links h2 { margin-bottom: 14px; }
.related-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.related-links a {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--secondary, #D8E2DC);
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
}
.related-links a:hover { border-color: var(--primary, #35443A); color: var(--primary, #35443A); }

.page-note { max-width: 880px; margin: 0 auto 32px; padding: 0 20px; font-size: 0.8rem; color: var(--secondary, #8a8a8a); }