/* 범표집수리 — 욕조복원 v6 랜딩페이지 스타일시트 */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

a { transition: opacity .2s, color .2s, background-color .2s; }
a:hover { opacity: .85; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: '';
}

.consult-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 24px; border-radius: 9999px; font-size: 15px; font-weight: 700;
  cursor: pointer; border: none;
}
.consult-btn-tel { background: var(--accent, #B87333); color: #fff; }
.consult-btn-sms { background: #fff; color: var(--accent, #B87333); border: 2px solid var(--accent, #B87333); }

/* 헤더 스크롤 시 그림자 강화는 header.php 인라인 style 로 처리 */

@media (max-width: 860px) {
  .nav-desktop-only { display: none !important; }
  #hamburger { display: flex !important; }
}

/* 카드 hover */
main a[href^="/"]:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); }

/* 카드 그리드 — PC 3열 / 모바일 2열 고정 (auto-fit/auto-fill 금지) */
.grid-3-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) {
  .grid-3-2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* 카드 그리드 — PC 2열 / 모바일 1열 고정 (auto-fit/auto-fill 금지) */
.grid-2-1 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) {
  .grid-2-1 { grid-template-columns: repeat(1, 1fr); gap: 16px; }
}

/* 시공사진 갤러리 카드 (라이트박스 트리거) */
.gallery-photo-btn { all: unset; cursor: zoom-in; display: block; width: 100%; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
.gallery-photo-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.gallery-photo-btn:hover img { transform: scale(1.04); }

/* 전후 비교 카드 (라이트박스 트리거) */
.case-photo-btn { all: unset; cursor: zoom-in; display: block; width: 100%; }
.case-photo-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; border-radius: 16px; overflow: hidden; }
.case-photo-half { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.case-photo-half img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.case-photo-btn:hover .case-photo-half img { transform: scale(1.04); }
.case-photo-tag { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 9999px; background: rgba(17,17,17,.6); color: #fff; font-size: 12px; font-weight: 700; }

/* 라이트박스 오버레이 */
.lightbox-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(17,17,17,.88); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.lightbox-overlay[hidden] { display: none; }
.lightbox-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; border: none; font-size: 22px; line-height: 1; cursor: pointer; z-index: 1; }

.lightbox-panel { max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 16px; padding: 24px; }
.lightbox-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 640px) {
  .lightbox-images { grid-template-columns: repeat(1, 1fr); }
}
.lightbox-image-col { position: relative; }
.lightbox-image-col img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4/3; display: block; }
.lightbox-image-tag { position: absolute; top: 10px; left: 10px; padding: 4px 12px; border-radius: 9999px; background: rgba(17,17,17,.65); color: #fff; font-size: 12px; font-weight: 700; }
.lightbox-title { font-size: 18px; font-weight: 800; color: #1F2937; margin: 0 0 12px; }
.lightbox-caption { font-size: 15px; line-height: 1.9; color: #374151; white-space: pre-line; margin: 0; }