/* 인트로 애니메이션 + 참석 여부 창 */
body.intro-lock { overflow: hidden; }

/* 홈(.card)과 똑같은 자리: 위에서부터 화면 높이 전체, 폭은 최대 430px 가운데 */
.intro {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 430px);
  transform: translateX(-50%);
  z-index: 100;
  background: #02195c; /* 배경 그림 맨 위 하늘색과 같음 → 화면이 그림보다 길면 위쪽이 이어져 보임 */
  box-shadow: 0 0 0 100vmax #141414;
  overflow: hidden;
  transition: opacity 0.8s ease;
}
.intro.hide { opacity: 0; pointer-events: none; }

/* 그림 레이어 — intro.js 의 좌표 계산과 같아야 함 */
.intro-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  pointer-events: none;
  user-select: none;
}
/* 배경·기둥: 폭에 딱 맞추고 아래(테라스)에 붙임 → 양옆은 절대 안 잘림 (화면이 짧으면 위쪽 하늘만 잘림) */
.intro > .intro-layer {
  top: auto;
  height: auto;
}
/* 신랑신부: intro.js 가 위치·크기를 정한 상자 안을 그대로 채움 */
#introCouple { position: absolute; pointer-events: none; }
#introCouple .intro-layer { object-fit: fill; }
#introCouple [data-key] { visibility: hidden; }
#introCouple [data-key].on { visibility: visible; }

/* 걷는 신랑: 그림(1125×2436) 속 (350,1546)~(532,1872) 칸에 8프레임 띠 그림을 맞춰 넣음 */
.groom-walk {
  position: absolute;
  left: calc(350 / 1125 * 100%);
  top: calc(1546 / 2436 * 100%);
  width: calc(182 / 1125 * 100%);
  height: calc(326 / 2436 * 100%);
  background: url("images/intro/groom_walk.webp") 0 0 / 800% 100% no-repeat;
}

#introCouple .intro-part { position: absolute; inset: 0; }

/* 그림이 다 불러와질 때까지 숨겼다가 한꺼번에 보여줌 (신랑이 늦게 뜨는 일 없게) */
.intro > .intro-layer,
.intro > #introCouple,
.intro > canvas { transition: opacity 0.4s; }
.intro.loading > .intro-layer,
.intro.loading > #introCouple,
.intro.loading > canvas { opacity: 0; }

/* 반짝이는 별빛 (부드러운 빛번짐이라 도트 처리 안 함) */
#introStars { position: absolute; left: 0; top: 0; pointer-events: none; }
/* 폭죽 (gif 프레임, 도트 그대로 확대) */
#introBurst { position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: pixelated; }

#introCanvas,
#introShy {
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.intro-title {
  position: absolute;
  left: 0;
  right: 0;
  /* 배경 그림 위에서 22% 자리 (그림은 폭에 맞춰 아래에 붙으므로 높이 = 폭 × 2436/1125), 화면이 짧으면 맨 위에서 16px */
  top: max(16px, calc(100% - min(100vw, 430px) * 2436 / 1125 * 0.78));
  text-align: center;
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
.intro-title.show { animation: title-pop 0.9s steps(6) forwards; }
.intro-title h1 {
  font-family: "Press Start 2P", monospace;
  font-weight: 400;
  font-size: clamp(20px, 6.8vw, 27px);
  line-height: 1.6;
  text-shadow: 3px 3px 0 #e2557c;
}
.intro-title p {
  font-family: "Galmuri11", monospace;
  font-weight: 700;
  font-size: 17px;
  margin-top: 8px;
  color: #ffd6e4; /* 타이틀(흰 글씨 + 분홍 그림자)과 어울리는 연한 장밋빛 */
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 rgba(8, 12, 50, 0.6); /* 밤하늘 위 가독성용 은은한 남색 그림자 */
}
.intro-title p .heart { color: #ff8fbd; }
@keyframes title-pop {
  0% { opacity: 0; transform: translateY(-24px) scale(0.6); }
  60% { opacity: 1; transform: translateY(4px) scale(1.08); }
  100% { opacity: 1; transform: none; }
}

.intro-skip {
  position: absolute;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  font-family: "Galmuri11", monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}

/* 참석 여부 창 (RPG 대화창 스타일) */
.rsvp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.rsvp.show { opacity: 1; pointer-events: auto; }

.rsvp-box {
  width: 100%;
  max-width: 340px;
  background: #fffaf4;
  color: #2b2328;
  font-family: "Galmuri11", monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 22px 20px 18px;
  border: 4px solid #2b2328;
  box-shadow: 0 0 0 4px #fffaf4, 0 0 0 8px #e2557c;
  transform: translateY(16px);
  transition: transform 0.4s;
}
.rsvp.show .rsvp-box { transform: none; }

.rsvp-box h2 {
  font-family: "Galmuri11", monospace;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
}
.rsvp-desc { text-align: center; font-size: 12px; color: #7a6b70; margin-bottom: 16px; }

.rsvp-field { margin-bottom: 14px; }
.rsvp-field > span { display: block; font-size: 12px; color: #7a6b70; margin-bottom: 6px; }

.rsvp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rsvp-choice button,
.rsvp-actions button,
.rsvp-count button {
  font-family: inherit;
  font-size: 14px;
  color: inherit;
  background: #fff;
  border: 2px solid #2b2328;
  padding: 8px 0;
  cursor: pointer;
}
.rsvp-choice button.on { background: #e2557c; border-color: #e2557c; color: #fff; }

.rsvp-box input {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* iOS 확대 방지 */
  border: 2px solid #2b2328;
  padding: 8px 10px;
  background: #fff;
  border-radius: 0;
}

.rsvp-count { display: flex; align-items: center; gap: 12px; }
.rsvp-count button { width: 40px; padding: 4px 0; font-size: 18px; }
.rsvp-count b { min-width: 48px; text-align: center; font-size: 16px; }

.rsvp-error { color: #d6455d; font-size: 12px; min-height: 18px; text-align: center; }

.rsvp-actions { display: grid; gap: 8px; margin-top: 6px; }
.rsvp-actions .primary { background: #2b2328; color: #fff; }
.rsvp-actions .later { border: none; background: none; color: #7a6b70; font-size: 12px; text-decoration: underline; }

.rsvp-done { text-align: center; padding: 12px 0; }
.rsvp-done p { white-space: pre-line; }
.rsvp-done .heart { font-size: 28px; color: #e2557c; display: block; margin-bottom: 8px; }