/* 범브로빌드 — 대리석바닥 v8-1 랜딩페이지 스타일시트 */

*, *::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; cursor: pointer; position: relative; padding-right: 30px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid #0E6F5C; border-bottom: 2px solid #0E6F5C;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .25s;
}
details[open] > summary::after { transform: translateY(-35%) rotate(-135deg); }

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

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

/* 히어로 슬라이드쇼 (메인 페이지, 사진 4장 자동 전환) */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-active { opacity: 1; }

/* 카드 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:2px; overflow: hidden; aspect-ratio: 3/4; }
.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); }

/* 전/후 비교 카드 쌍 (gallery-photo-btn 2개 + 전·후 배지) */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-item { position: relative; }
.ba-badge { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 11px; border-radius:2px; font-size: 12px; font-weight: 800; color: #fff; }
.ba-badge-before { background: rgba(28,28,26,.72); }
.ba-badge-after { background: #0E6F5C; }
/* 좁은 폰 화면(iPhone SE~대부분 기종)에서는 전/후를 위아래로 쌓아 사진을 크게 보여줌 */
@media (max-width: 560px) {
  .ba-pair { grid-template-columns: 1fr; gap: 10px; }
}

/* 라이트박스 오버레이 (단일사진) */
.lightbox-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(28,28,26,.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:2px; background: rgba(28,28,26,.55); color: #fff; border: none; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }

.lightbox-panel { max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; background: #fff; border-radius:2px; padding: 24px; padding-top: 64px; }
.lightbox-single-image { margin-bottom: 16px; }
.lightbox-single-image img { width: 100%; border-radius:2px; object-fit: cover; aspect-ratio: 4/3; display: block; }
.lightbox-title { font-size: 19px; font-weight: 800; color: #201E1B; margin: 0; }