/* =============================================
   common.css — 웨딩피치 모청 공통 스타일
   v1 · v2 · v3 전 버전 공통 사용
   ============================================= */


/* =============================================
   BGM 버튼 (v1·v3: #play-btn / v2: .bgm-wrap)
   ============================================= */
#play-btn {
  background: transparent; border: none; cursor: pointer; padding: 0;
  position: fixed; top: 20px; right: 20px;
  width: 40px; height: 40px; z-index: 9999;
}
#play-btn img { width: 100%; height: 100%; }

.bgm-wrap {
  position: fixed; top: 20px; right: 20px;
  z-index: 9999; width: 40px; height: 40px;
}
.bgm-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 0; width: 40px; height: 40px;
}
.bgm-btn img { width: 100%; height: 100%; }


/* =============================================
   유튜브 영상 (썸네일 + 클릭 재생 방식)
   ============================================= */
#sec-video { background: var(--color-black); width: 100%; }
#sec-video .video-wrap {
  position: relative; width: 100%;
  margin: 30px 0;
}

/* 썸네일 */
.video-thumb { position: relative; width: 100%; cursor: pointer; line-height: 0; }
.video-thumb img { width: 100%; display: block; }
.video-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 26px; display: flex;
  align-items: center; justify-content: center;
  padding-left: 5px;
  transition: background .2s;
}
.video-thumb:hover .video-play-btn,
.video-thumb:active .video-play-btn { background: rgba(220,0,0,0.85); }

/* iframe (재생 후) */
.video-iframe-wrap {
  position: relative; width: 100%; padding-top: 56.25%;
}
.video-iframe-wrap iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: 0;
}


/* =============================================
   갤러리
   ============================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.gallery-item { aspect-ratio: 3/4; overflow: hidden; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery-item:hover img { transform: scale(1.05); }


/* =============================================
   라이트박스
   ============================================= */
.lb-overlay {
  display: none; position: fixed;
  inset: 0; background: rgba(0,0,0,.92);
  z-index: 10000; justify-content: center; align-items: center;
  touch-action: none;
}
.lb-overlay.on { display: flex; }
.lb-overlay img {
  max-width: 95vw; max-height: 90vh; object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.lb-close {
  position: absolute; top: 16px; right: 20px;
  color: #fff; font-size: 28px; cursor: pointer;
  background: none; border: none; line-height: 1;
}
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.7); font-size: 32px;
  cursor: pointer; background: none; border: none; padding: 10px;
}
.lb-prev { left: 5px; }
.lb-next { right: 5px; }


/* =============================================
   네이버 지도
   ============================================= */
#naver-map { width: 100%; height: 300px; }


/* =============================================
   토스트 (복사 알림)
   ============================================= */
#link-toast {
  display: none; position: fixed; bottom: 32px;
  left: 50%; transform: translateX(-50%);
  background: rgba(30,30,30,0.88); color: #fff;
  padding: 10px 24px; border-radius: 20px;
  font-size: 14px; font-weight: 500;
  z-index: 99999; pointer-events: none;
  white-space: nowrap;
}


/* =============================================
   RSVP 참석 폼
   ============================================= */
#sec-rsvp { background: #fff; padding: 40px 24px 36px; }

.rsvp-title {
  font-size: 18px; font-weight: 600;
  text-align: center; margin-bottom: 6px;
}
.rsvp-subtitle {
  font-size: 13px; text-align: center;
  color: #888; margin-bottom: 28px; line-height: 1.6;
}
.rsvp-group { margin-bottom: 18px; }
.rsvp-label {
  font-size: 13px; font-weight: 600;
  margin-bottom: 8px; display: block;
}
.rsvp-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid #e0e0e0; border-radius: 6px;
  font-size: 14px; background: #fff;
  outline: none; transition: border-color .2s;
}
.rsvp-input:focus { border-color: var(--color-pink); }

.rsvp-btn-group { display: flex; gap: 8px; }
.rsvp-btn-group input[type="radio"] { display: none; }
.rsvp-btn-group label {
  flex: 1; text-align: center;
  padding: 10px 0; border-radius: 6px;
  border: 1px solid #e0e0e0;
  font-size: 13px; color: #888; cursor: pointer;
  transition: all .2s;
}
.rsvp-btn-group input[type="radio"]:checked + label {
  border-color: var(--color-pink);
  background: var(--color-pink);
  color: #fff; font-weight: 600;
}

.rsvp-count-wrap {
  display: flex; align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 6px; overflow: hidden;
}
.rsvp-count-btn {
  width: 44px; height: 44px;
  background: #f5f5f5; border: none;
  font-size: 20px; color: #555;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.rsvp-count-btn:active { background: #e0e0e0; }
.rsvp-count-display {
  flex: 1; text-align: center;
  font-size: 15px; font-weight: 600;
}

.rsvp-submit {
  width: 100%; padding: 14px;
  background: var(--color-text); color: #fff;
  border: none; border-radius: 6px;
  font-size: 15px; font-weight: 600;
  cursor: pointer; margin-top: 8px;
  transition: opacity .2s;
}
.rsvp-submit:active { opacity: 0.8; }
.rsvp-submit:disabled { opacity: 0.5; cursor: default; }

.rsvp-result {
  display: none; text-align: center;
  padding: 20px 0 4px;
  font-size: 14px; line-height: 1.8;
}
.rsvp-result.success { color: var(--color-pink); }
.rsvp-result.error   { color: #e53935; }