/* ===== 기본 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #f2ede0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.invite {
  max-width: 430px;
  margin: 0 auto;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}

/* 시안 이미지 = 섹션 배경 */
.sec { position: relative; font-size: 0; }
.sec > img { display: block; }
.sec > img:first-child { width: 100%; } /* 시안 배경 이미지만 */

/* ===== 스크롤 리빌: 섹션이 화면에 들어오면 떠오르며 나타남 =====
   .js 게이트: JS가 없는 뷰어(카톡 미리보기, iOS Quick Look 등)에선 숨기지 않고 그대로 표시 */
.js .sec {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .sec.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .sec { opacity: 1; transform: none; transition: none; }
}

/* ===== 커버 "정훈 & 정윤" 살랑살랑 애니메이션 ===== */
/* 좌표는 원본 이미지(1200x2325) 기준 백분율 */
.nc-blank {
  position: absolute;
  left: 24.167%;   /* x 290 / 1200 */
  top: 41.763%;    /* y 971 / 2325 */
  width: 52.167%;  /* w 626 / 1200 */
}
.namechar {
  position: absolute;
  top: 41.763%;
  transform-origin: 50% 85%;
  /* 등장(1회) → 살랑살랑(무한, 딜레이 후) */
  animation: nc-in 0.5s ease-out both, name-sway 2.6s ease-in-out infinite;
  will-change: transform, opacity;
}
/* 글자가 0.22초 간격으로 하나씩 떠오르고, 다 나타난 뒤 웨이브 시작 */
.nc-1 { left: 24.667%; width: 8.583%; animation-delay: 0.25s, 1.9s; }  /* x 296 */
.nc-2 { left: 33.333%; width: 10%;    animation-delay: 0.47s, 2.15s; } /* x 400 */
.nc-3 { left: 45.417%; width: 8.333%; animation: nc-in 0.5s ease-out both; animation-delay: 0.69s; } /* & 는 등장만 */
.nc-4 { left: 58.333%; width: 8%;     animation-delay: 0.91s, 2.65s; } /* x 700 */
.nc-5 { left: 66.5%;   width: 9.083%; animation-delay: 1.13s, 2.9s; }  /* x 798 */

@keyframes nc-in {
  from { opacity: 0; transform: translateY(12%); }
  to   { opacity: 1; transform: none; }
}

/* 정지 상태에서 출발해 양쪽으로 갸웃거리는 진자형 — 시작 시 튀지 않음 */
@keyframes name-sway {
  0%, 50%, 100% { transform: translateY(0) rotate(0deg); }
  25%           { transform: translateY(-6%) rotate(3deg); }
  75%           { transform: translateY(-6%) rotate(-3deg); }
}

/* ===== 타임라인 아이콘 둥실둥실 애니메이션 ===== */
/* 좌표는 원본 이미지(1200x2705) 기준 백분율.
   tlblank(깨끗한 배경)가 원본 아이콘을 덮고 있어 아이콘이 크게 움직여도 잔상 없음 */
.tlblank { position: absolute; }
.tlicon {
  position: absolute;
  transform-origin: 50% 60%;
  animation: icon-float 3.2s ease-in-out infinite;
  will-change: transform;
}
.tl-bouquet { left: 61.5%;   top: 58.336%; width: 14.25%; }  /* 14:30 하객 맞이 */
.tl-rings   { left: 20.75%;  top: 63.253%; width: 16%; }     /* 15:00 예식 */
.tl-camera  { left: 61.083%; top: 75.305%; width: 18.333%; } /* 15:30 기념 촬영 */
.tl-glasses { left: 21.75%;  top: 79.335%; width: 14.583%; } /* 16:00 식사 */
.tlicon.tl-bouquet { animation-delay: 0s; }
.tlicon.tl-rings   { animation-delay: 0.7s; }
.tlicon.tl-camera  { animation-delay: 1.4s; }
.tlicon.tl-glasses { animation-delay: 2.1s; }

/* 두둥실 떠올랐다가 갸웃하며 내려오는 리듬 */
@keyframes icon-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  30%      { transform: translateY(-5%) rotate(2.5deg) scale(1.05); }
  60%      { transform: translateY(-1%) rotate(-1.5deg) scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .namechar, .tlicon { animation: none; }
}

/* ===== 투명 핫스팟 버튼 (시안에 그려진 버튼 위에 얹음) ===== */
.hotspot {
  position: absolute;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(47, 79, 178, 0.18);
}
.hotspot:active { background: rgba(47, 79, 178, 0.1); }

/* 디버그 모드(?debug): 핫스팟 위치 확인용 */
.debug .hotspot { outline: 2px dashed #e0322c; background: rgba(224, 50, 44, 0.18); }
.debug .slot { outline: 2px dashed #e0322c; background: rgba(44, 106, 224, 0.18); }

/* 5. 오시는 길 */
.hs-addr  { left: 35%;   top: 39.5%; width: 30%; height: 7%; }
.hs-kakao { left: 11.5%; top: 47.5%; width: 27%; height: 7%; }
.hs-naver { left: 40%;   top: 47.5%; width: 27.5%; height: 7%; }
.hs-tmap  { left: 68.5%; top: 47.5%; width: 20%; height: 7%; }

/* 6. 마음 전하실 곳 */
.hs-groom { left: 23%; top: 58.7%; width: 54%; height: 7.5%; }
.hs-bride { left: 23%; top: 67%;   width: 54%; height: 7.5%; }

/* 7. 공유 */
.hs-share    { left: 31.5%; top: 40%;   width: 37%; height: 6.8%; }
.hs-copylink { left: 31.5%; top: 47.5%; width: 37%; height: 6.8%; }

/* ===== 4. 갤러리 사진 슬롯 ===== */
.slot {
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
}
.slot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slot--1 { left: 13%;   top: 27.5%; width: 34.7%; height: 30.5%; }
.slot--2 { left: 52.3%; top: 27.5%; width: 34.7%; height: 30.5%; }
.slot--3 { left: 13%;   top: 61%;   width: 34.7%; height: 32%; }
.slot--4 { left: 52.3%; top: 61%;   width: 34.7%; height: 32%; }

/* ===== 계좌번호 바텀시트 ===== */
.sheet__dim {
  position: fixed;
  inset: 0;
  background: rgba(30, 40, 80, 0.45);
}
.sheet__panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: #fdf9e8;
  border: 2.5px solid #2f4fb2;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
}
.sheet__title {
  font-family: "Gaegu", cursive;
  font-weight: 700;
  font-size: 26px;
  color: #2f4fb2;
  text-align: center;
  margin-bottom: 16px;
}
.sheet__list { list-style: none; }
.sheet__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #2f4fb2;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.acc__who { display: block; font-size: 13px; color: #5a6ba8; margin-bottom: 3px; }
.acc__num { display: block; font-size: 15px; font-weight: 600; color: #22337a; }
.acc__copy {
  flex: none;
  background: #ffe873;
  border: 1.5px solid #2f4fb2;
  border-radius: 999px;
  color: #2f4fb2;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
}
.sheet__close {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: #2f4fb2;
  color: #fdf9e8;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 0;
  cursor: pointer;
}

/* ===== 토스트 ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(16px);
  background: #2f4fb2;
  color: #fdf9e8;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }