@import url("https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Nanum+Myeongjo:wght@400;700&display=swap");

@font-face {
  font-family: "Munmak Byeolbanche";
  src: url("./public/fonts/MUNMAK_BYEOLBANCHE.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #efcfc8;
  --paper: #fffaf7;
  --paperMuted: #f7eee9;
  --ink: #373130;
  --inkSoft: #7f706b;
  --line: #eaded8;
  --primary: #d98985;
  --primaryDark: #3a302e;
  --sage: #d9dfc7;
  --coral: #efcfc8;
  --butter: #f6df9e;
  --mist: #e9eff2;
  --lavender: #d9cbd7;
  --ash: #b8aaa3;
  --orange: #de8a59;
  --font-base: "Munmak Byeolbanche", system-ui, sans-serif;
  --font-display: serif;
  --font-serif: serif;
  --intro-image: none;
  --intro-position: center center;
  --reveal-distance: 4px;
  --reveal-duration: 260ms;
  --shadow-soft: rgba(82, 55, 47, 0.1) 0 16px 36px;
  --shadow-button: rgba(58, 48, 46, 0.16) 0 10px 24px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #dfe8d4;
  color: var(--ink);
  font-family: var(--font-base);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  letter-spacing: 0;
  font-weight: 500;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

.intro-gate {
  display: none;
}

.page-shell {
  min-height: 100svh;
  overflow-x: hidden;
}

.phone-frame {
  width: min(100vw, 430px);
  max-width: 100vw;
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--canvas);
  box-shadow: rgba(62, 76, 54, 0.14) 0 0 0 1px, rgba(62, 76, 54, 0.16) 0 24px 60px;
}

.invitation-card {
  position: relative;
  padding-bottom: 5.6rem;
}

.section {
  position: relative;
  padding: 4.8rem 1.55rem;
}

.reveal-section {
  opacity: 1;
  transform: none;
}

.reveal-section.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-section:not(.cover-section) :where(
  .eyebrow,
  h2,
  .section-note,
  .tiny-mark,
  .invitation-copy,
  .signature,
  .party-date-ko,
  .party-date-en,
  .party-divider,
  .calendar-grid,
  .countdown-grid,
  .dday-message,
  .profile-photo,
  .profile-parent,
  .contact-open-button,
  .gallery-carousel,
  .gallery-help,
  .venue-heading,
  .map-card,
  .transport-item,
  .venue-section .button-grid,
  .account-list,
  .guestbook-list,
  .guestbook-form,
  .info-list,
  .rsvp-card,
  .share-buttons
) {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 1.75rem, 0) scale(0.985);
  will-change: opacity, filter, transform;
}

.reveal-section.is-visible:not(.cover-section) :where(
  .eyebrow,
  h2,
  .section-note,
  .tiny-mark,
  .invitation-copy,
  .signature,
  .party-date-ko,
  .party-date-en,
  .party-divider,
  .calendar-grid,
  .countdown-grid,
  .dday-message,
  .profile-photo,
  .profile-parent,
  .contact-open-button,
  .gallery-carousel,
  .gallery-help,
  .venue-heading,
  .map-card,
  .transport-item,
  .venue-section .button-grid,
  .account-list,
  .guestbook-list,
  .guestbook-form,
  .info-list,
  .rsvp-card,
  .share-buttons
) {
  animation: sectionItemIn 780ms cubic-bezier(0.18, 0.88, 0.26, 1) both;
}

.reveal-section.is-visible .tiny-mark,
.reveal-section.is-visible .eyebrow {
  animation-delay: 60ms;
}

.reveal-section.is-visible h2,
.reveal-section.is-visible .section-note,
.reveal-section.is-visible .venue-heading,
.reveal-section.is-visible .profile-photo {
  animation-delay: 150ms;
}

.reveal-section.is-visible .invitation-copy:nth-of-type(2),
.reveal-section.is-visible .party-date-ko,
.reveal-section.is-visible.profile-section h2,
.reveal-section.is-visible .map-card,
.reveal-section.is-visible .gallery-carousel,
.reveal-section.is-visible .account-list,
.reveal-section.is-visible .guestbook-list,
.reveal-section.is-visible .info-list,
.reveal-section.is-visible .rsvp-card,
.reveal-section.is-visible .share-buttons {
  animation-delay: 260ms;
}

.reveal-section.is-visible .invitation-copy:nth-of-type(3),
.reveal-section.is-visible .party-date-en,
.reveal-section.is-visible .profile-parent,
.reveal-section.is-visible .gallery-help,
.reveal-section.is-visible .guestbook-form {
  animation-delay: 370ms;
}

.reveal-section.is-visible .signature,
.reveal-section.is-visible .party-divider,
.reveal-section.is-visible .contact-open-button {
  animation-delay: 480ms;
}

.reveal-section.is-visible .calendar-grid,
.reveal-section.is-visible .transport-item:nth-child(1) {
  animation-delay: 560ms;
}

.reveal-section.is-visible .countdown-grid,
.reveal-section.is-visible .transport-item:nth-child(2) {
  animation-delay: 650ms;
}

.reveal-section.is-visible .dday-message,
.reveal-section.is-visible .transport-item:nth-child(3),
.reveal-section.is-visible.venue-section .button-grid {
  animation-delay: 740ms;
}

.reveal-section.is-visible .transport-item:nth-child(4) {
  animation-delay: 830ms;
}

.photo-break.reveal-section {
  opacity: 1;
  transform: none;
}

.photo-break.reveal-section img {
  opacity: 0;
  filter: saturate(0.88) blur(7px);
  transform: scale(1.055);
  transition:
    opacity 900ms ease,
    filter 900ms ease,
    transform 1200ms cubic-bezier(0.16, 0.84, 0.28, 1);
}

.photo-break.reveal-section.is-visible img {
  opacity: 1;
  filter: saturate(1) blur(0);
  transform: scale(1);
}

@keyframes sectionItemIn {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(0, 1.75rem, 0) scale(0.985);
  }

  58% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -0.18rem, 0) scale(1.006);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.eyebrow {
  margin: 0 0 0.65rem;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 1.52rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.section h2,
.paper-panel h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
}

.section-note {
  margin: 0.72rem 0 0;
  color: var(--inkSoft);
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: center;
}

.cover-section {
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #171210;
  color: #fff;
  isolation: isolate;
}

.cover-photo,
.cover-shade,
.confetti-layer {
  position: absolute;
  inset: 0;
}

.cover-photo {
  z-index: 0;
  margin: 0;
  overflow: hidden;
}

.cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1) contrast(1) brightness(1);
  transform: scale(1.04);
  animation:
    coverPhotoIn 980ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
    coverFocusIn 2100ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
    coverPhotoBreath 12s ease-in-out 2200ms infinite alternate;
}

.cover-shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(16, 11, 8, 0.08) 0%, rgba(16, 11, 8, 0.01) 30%, rgba(16, 11, 8, 0.03) 58%, rgba(16, 11, 8, 0.32) 100%),
    radial-gradient(circle at 50% 35%, rgba(255, 238, 208, 0.04), rgba(0, 0, 0, 0.04) 76%);
}

.confetti-layer {
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.confetti-layer i {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  height: var(--h);
  border-radius: var(--radius);
  background: var(--color);
  opacity: 0;
  transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--rotate));
  animation: confettiFall var(--duration) linear var(--delay) infinite;
}

.music-toast,
.music-button,
.cover-title,
.cover-event,
.scroll-cue {
  position: relative;
  z-index: 3;
}

.entry-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: rgba(23, 17, 15, 0.54);
  pointer-events: none;
  animation: entryOverlayOut 520ms ease 1550ms both;
}

.entry-message {
  position: relative;
  display: grid;
  width: min(86vw, 20rem);
  justify-items: center;
  gap: 0.12rem;
  margin-top: 4.9rem;
  color: #efc6d7;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.78;
  text-align: center;
  text-shadow: rgba(58, 35, 45, 0.18) 0 3px 0;
}

.entry-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-line--we {
  order: 1;
  transform: translateY(-0.36rem);
}

.entry-line--you {
  order: 3;
  transform: translateY(0.16rem);
}

.entry-letter {
  display: inline-block;
  font-size: clamp(5.7rem, 26vw, 9rem);
  letter-spacing: 0;
  opacity: 0;
  transform-origin: center 62%;
  animation: entryLetterIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.entry-letter--w {
  animation-delay: 230ms;
}

.entry-letter--e {
  animation-delay: 410ms;
}

.entry-letter--y {
  animation-delay: 650ms;
}

.entry-letter--o {
  animation-delay: 830ms;
}

.entry-letter--u {
  animation-delay: 1010ms;
}

.entry-heart {
  display: block;
  order: 2;
  color: #e8b0c7;
  font-size: clamp(4.7rem, 21vw, 7.2rem);
  opacity: 1;
  transform-origin: center;
  animation: entryHeartPulse 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.music-toast {
  position: absolute;
  top: max(0.7rem, env(safe-area-inset-top));
  left: 50%;
  z-index: 6;
  display: inline-flex;
  max-width: calc(100% - 4.8rem);
  min-height: 2rem;
  align-items: center;
  gap: 0.42rem;
  padding: 0 0.74rem;
  border-radius: 999px;
  background: rgba(21, 18, 17, 0.78);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  animation: softDrop 560ms ease-out 120ms both;
}

.music-toast svg,
.music-button svg,
.button svg,
.icon-button svg,
.map-card svg,
.transport-item__icon svg,
.transport-route-arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.music-button {
  position: absolute;
  top: max(0.7rem, env(safe-area-inset-top));
  right: 0.78rem;
  z-index: 6;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(21, 18, 17, 0.72);
  color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  animation: musicButtonIn 560ms ease-out 180ms both;
}

.music-button svg {
  transition: opacity 180ms ease, transform 180ms ease;
}

.music-button.is-playing svg {
  opacity: 0.22;
  transform: scale(0.88);
}

.music-equalizer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.13rem;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 180ms ease, transform 180ms ease;
}

.music-button.is-playing .music-equalizer {
  opacity: 1;
  transform: scale(1);
}

.music-equalizer i {
  width: 0.16rem;
  height: 0.58rem;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center bottom;
  animation: musicEqualizer 780ms ease-in-out infinite;
}

.music-equalizer i:nth-child(2) {
  animation-delay: 130ms;
}

.music-equalizer i:nth-child(3) {
  animation-delay: 260ms;
}

.cover-title {
  position: absolute;
  top: clamp(4.8rem, 12svh, 6.8rem);
  left: 1rem;
  right: 1rem;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3.15rem, 13.8vw, 4.75rem);
  font-weight: 700;
  line-height: 0.74;
  text-align: center;
  text-shadow: 0 2px 18px rgba(35, 20, 12, 0.3);
}

.cover-title span {
  display: block;
  animation: coverTitleIn 820ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.cover-title span + span {
  animation-delay: 120ms;
}

.cover-event {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: calc(4.55rem + env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  color: rgba(255, 255, 255, 0.94);
  text-align: center;
  text-shadow: 0 2px 16px rgba(29, 17, 12, 0.38);
  animation: coverEventIn 680ms ease-out 360ms both;
}

.cover-event p,
.cover-event strong,
.cover-event span {
  margin: 0;
}

.cover-event p {
  font-size: 0.84rem;
  font-weight: 800;
}

.cover-event strong {
  font-family: var(--font-serif);
  font-size: 1.06rem;
}

.cover-event span {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.92;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  width: 1px;
  height: 2.2rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.24);
  transform: translateX(-50%);
}

.scroll-cue span {
  display: block;
  width: 100%;
  height: 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  animation: scrollCue 1.7s ease-in-out infinite;
}

.invitation-section {
  padding: 5.8rem 2.25rem 5.9rem;
  background: #fff;
}

.paper-panel {
  max-width: 20.5rem;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  text-align: center;
}

.tiny-mark {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  margin: 0 auto 1.9rem;
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.invitation-copy {
  margin: 1.85rem 0 0;
  color: var(--ink);
  font-family: var(--font-base);
  font-size: 0.88rem;
  line-height: 2.12;
  white-space: pre-line;
  word-break: keep-all;
}

.invitation-copy + .invitation-copy {
  margin-top: 2.05rem;
}

.signature {
  margin: 2.35rem 0 0;
  color: var(--primary);
  font-family: var(--font-base);
  font-size: 0.86rem;
  font-weight: 700;
}

.photo-break {
  background: var(--canvas);
}

.photo-break figure {
  height: min(67svh, 640px);
  margin: 0;
  overflow: hidden;
}

.photo-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.color-field {
  height: 0;
  min-height: 0;
}

.party-year {
  position: relative;
  display: grid;
  min-height: 86svh;
  place-content: center;
  justify-items: center;
  gap: 0.55rem;
  padding: 5.8rem 1rem 8.2rem;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

.party-year::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #d99498;
  content: "";
  opacity: 0;
  transform: scaleY(0.08);
  transform-origin: bottom center;
  transition:
    opacity 620ms ease,
    transform 920ms cubic-bezier(0.17, 0.84, 0.32, 1);
}

.party-year.is-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

.party-year p {
  margin: 0;
  color: rgba(255, 250, 247, 0.95);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.84;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 4.8rem, 0) scale(0.86);
  will-change: opacity, filter, transform;
}

.party-year.is-visible p {
  animation: party-text-pop 820ms cubic-bezier(0.2, 1.18, 0.28, 1) both;
}

.party-year.is-visible .party-year__date {
  animation-delay: 180ms;
}

.party-year.is-visible .party-year__year {
  animation-delay: 300ms;
}

.party-year__date {
  font-size: clamp(3.45rem, 15vw, 5.25rem);
}

.party-year__year {
  font-size: clamp(6.9rem, 29vw, 10.2rem);
}

@keyframes party-text-pop {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 4.8rem, 0) scale(0.86);
  }

  46% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -0.72rem, 0) scale(1.045);
  }

  68% {
    transform: translate3d(0, 0.34rem, 0) scale(0.985);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.party-section {
  padding: 4.85rem 2rem 5.35rem;
  background: #fff;
  text-align: center;
}

.party-section h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2.65rem;
  font-weight: 400;
  line-height: 1;
}

.party-date-ko {
  margin: 2.4rem 0 0;
  color: var(--ink);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
}

.party-date-en {
  margin: 0.78rem 0 0;
  color: var(--ash);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
}

.party-time {
  margin: 0.35rem 0 1.6rem;
  color: var(--inkSoft);
  font-size: 0.92rem;
}

.party-divider {
  height: 1px;
  margin: 2.15rem 0 2rem;
  background: rgba(127, 112, 107, 0.16);
}

.calendar-card {
  padding: 1.2rem 1.05rem 1.35rem;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.calendar-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.05rem;
  color: var(--ink);
}

.calendar-card__head span {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}

.calendar-card__head strong {
  color: var(--inkSoft);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.88rem 0.24rem;
  color: var(--ink);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}

.calendar-grid span {
  display: grid;
  min-height: 2.35rem;
  place-items: center;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.calendar-grid .calendar-label {
  min-height: 1.2rem;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 800;
}

.calendar-grid .is-sunday {
  color: #ff686f;
}

.calendar-grid .is-party-day {
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  box-shadow: none;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: center;
}

.countdown-card {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: 0.36rem;
  overflow: hidden;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 61%, transparent 62%),
    conic-gradient(var(--primary) calc(var(--progress, 0) * 1%), rgba(217, 137, 133, 0.18) 0);
  box-shadow: rgba(55, 49, 48, 0.1) 0 10px 22px;
}

.countdown-card::before {
  position: absolute;
  inset: 0.38rem;
  border-radius: inherit;
  background: #fff;
  box-shadow: inset rgba(217, 137, 133, 0.08) 0 0 0 1px;
  content: "";
}

.countdown-card strong {
  position: relative;
  z-index: 1;
  color: #171923;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1;
}

.countdown-card span {
  position: relative;
  z-index: 1;
  color: var(--ash);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dday-message {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 1.9rem 0 0;
  color: var(--ink);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.74rem;
  line-height: 1.5;
}

.dday-message i,
.dday-message strong {
  color: var(--primary);
  font-style: normal;
  font-weight: 800;
}

.dday {
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  justify-content: center;
  margin: 1.35rem auto 1rem;
  padding: 0 1.05rem;
  border-radius: 999px;
  background: var(--paperMuted);
  color: var(--primaryDark);
  font-weight: 800;
}

.profile-section {
  background: var(--canvas);
  text-align: center;
}

.profile-section h2 {
  font-family: var(--font-base);
  font-weight: 400;
}

.profile-photo {
  width: 10.8rem;
  height: 10.8rem;
  margin: 1.5rem auto 1.25rem;
  overflow: hidden;
  border: 0.55rem solid rgba(255, 250, 247, 0.75);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.5rem 0 1.45rem;
  color: var(--inkSoft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.profile-parent__role {
  color: var(--primary);
  font-weight: 900;
}

.profile-parent i {
  color: rgba(127, 112, 107, 0.48);
  font-style: normal;
}

.contact-open-button {
  display: inline-flex;
  min-width: 13rem;
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  padding: 0 1.35rem;
  border: 1px solid rgba(127, 112, 107, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow: rgba(82, 55, 47, 0.12) 0 12px 26px;
}

.profile-list,
.info-list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  background: rgba(255, 250, 247, 0.72);
}

.profile-list li,
.info-list li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.05rem;
  border-bottom: 1px solid rgba(127, 112, 107, 0.15);
}

.profile-list li:last-child,
.info-list li:last-child {
  border-bottom: 0;
}

.profile-list span,
.info-list span {
  color: var(--inkSoft);
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: right;
  word-break: keep-all;
}

.profile-list strong,
.info-list strong {
  color: var(--ink);
  font-size: 0.9rem;
  white-space: nowrap;
}

.gallery-section {
  padding-left: 0;
  padding-right: 0;
  background: var(--paper);
  text-align: center;
}

.gallery-carousel {
  display: grid;
  grid-auto-columns: 82%;
  grid-auto-flow: column;
  gap: 0.8rem;
  margin-top: 1.8rem;
  padding: 0 1.45rem 0.8rem;
  overflow-x: auto;
  scroll-padding: 1.45rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery-carousel::-webkit-scrollbar {
  display: none;
}

.gallery-slide {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--paperMuted);
  box-shadow: var(--shadow-soft);
  scroll-snap-align: center;
}

.gallery-slide img {
  width: 100%;
  aspect-ratio: 9 / 15.8;
  object-fit: cover;
}

.gallery-slide span {
  position: absolute;
  right: 0.72rem;
  bottom: 0.72rem;
  min-width: 3.3rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgba(58, 48, 46, 0.62);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.gallery-help {
  margin: 0.35rem 1.55rem 0;
  color: rgba(104, 85, 80, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.venue-section,
.guestbook-section,
.rsvp-section {
  background: var(--paper);
}

.venue-heading {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.35rem;
  text-align: center;
}

.venue-heading strong {
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.5;
}

.venue-title {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}

.venue-title__name,
.venue-title__hall {
  display: block;
}

.venue-title__hall {
  color: var(--inkSoft);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.venue-heading p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  margin: 0;
  color: var(--inkSoft);
  font-size: 0.84rem;
  line-height: 1.55;
  word-break: keep-all;
}

.venue-heading p span {
  min-width: 0;
}

.venue-inline-copy {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--inkSoft);
}

.venue-inline-copy svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.map-card {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  margin-top: 1.65rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f7f3eb;
  box-shadow: var(--shadow-soft);
}

.map-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-pin {
  position: absolute;
  top: 41%;
  left: 38.5%;
  width: 2.18rem;
  height: 2.18rem;
  transform: translate(-50%, -100%);
  filter: drop-shadow(rgba(80, 35, 30, 0.28) 0 5px 7px);
}

.map-pin::before {
  position: absolute;
  inset: 0;
  border-radius: 999px 999px 999px 0;
  background: #f21d12;
  content: "";
  transform: rotate(-45deg);
}

.map-pin span {
  position: absolute;
  top: 0.5rem;
  left: 0.63rem;
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 0.12rem;
  background:
    linear-gradient(#fff 0 0) 50% 0.17rem / 0.52rem 0.12rem no-repeat,
    linear-gradient(#fff 0 0) 50% 0.42rem / 0.52rem 0.12rem no-repeat,
    linear-gradient(#fff 0 0) 50% 0.67rem / 0.52rem 0.12rem no-repeat;
  border: 0.12rem solid #fff;
}

.transport-guide {
  --transport-gap: 0.75rem;
  --transport-icon-size: 2.2rem;
  --transport-line-gradient: linear-gradient(90deg, transparent 0%, rgba(224, 203, 195, 0.28) 12%, rgba(224, 203, 195, 0.86) 50%, rgba(224, 203, 195, 0.28) 88%, transparent 100%);

  display: grid;
  margin: 1.15rem 0 1rem;
  padding: 0.2rem 0;
  background: transparent;
}

.transport-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--transport-icon-size) minmax(0, 1fr);
  gap: var(--transport-gap);
  padding: 1.05rem 0;
  text-align: left;
}

.transport-item:not(:last-child)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--transport-line-gradient);
  content: "";
}

.transport-item:last-child {
  padding-bottom: 0;
}

.transport-item__icon {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 999px;
  background: var(--paperMuted);
  color: var(--primary);
}

.transport-item__body {
  min-width: 0;
}

.transport-item__body h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.45;
}

.transport-lines {
  display: grid;
  gap: 0.28rem;
  margin: 0.42rem 0 0;
  padding: 0;
  color: var(--inkSoft);
  font-size: 0.75rem;
  line-height: 1.7;
  list-style: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.transport-line-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.24rem 0.38rem;
}

.transport-route-step {
  display: inline;
  min-width: 0;
}

.transport-route-heading.transport-line-route {
  display: flex;
  color: var(--ink);
  font-weight: 900;
}

.transport-route-arrow {
  display: inline-flex;
  min-width: 1.08rem;
  height: 1.08rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-family: Arial, sans-serif;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.9;
  transform: translateY(0.03rem);
}

.transport-route-arrow svg {
  width: 0.96rem;
  height: 0.96rem;
  stroke-width: 2.2;
}

.transport-route {
  position: relative;
  margin-top: 0.7rem;
}

.transport-route + .transport-route {
  padding-top: 0.7rem;
}

.transport-route + .transport-route::before {
  position: absolute;
  top: 0;
  right: 0;
  left: calc(-1 * (var(--transport-icon-size) + var(--transport-gap)));
  height: 1px;
  background: var(--transport-line-gradient);
  content: "";
}

.transport-route strong {
  display: block;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.55;
}

.venue-section .button-grid {
  margin-top: 0.9rem;
}

.venue-info {
  display: grid;
  gap: 0.35rem;
  padding: 1.2rem 0 1rem;
  text-align: center;
}

.venue-info strong,
.venue-info p,
.venue-info span {
  margin: 0;
}

.venue-info strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.venue-info p,
.venue-info span {
  color: var(--inkSoft);
  font-size: 0.86rem;
  line-height: 1.6;
}

.button-grid,
.share-buttons {
  display: grid;
  gap: 0.6rem;
}

.account-section {
  background: #fff;
  border-top: 1px solid rgba(234, 222, 216, 0.72);
  border-bottom: 1px solid rgba(234, 222, 216, 0.72);
  box-shadow:
    inset 0 1.4rem 2rem rgba(217, 137, 133, 0.035),
    inset 0 -1.4rem 2rem rgba(217, 137, 133, 0.035);
  text-align: center;
}

.account-list {
  display: grid;
  gap: 0.78rem;
  margin-top: 1.65rem;
}

.account-detail {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: rgba(82, 55, 47, 0.1) 0 10px 24px;
  text-align: left;
}

.account-detail summary {
  display: flex;
  min-height: 3.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
  list-style: none;
}

.account-detail summary::-webkit-details-marker {
  display: none;
}

.account-detail__chevron {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  align-items: center;
  justify-content: center;
  color: var(--inkSoft);
  transition: transform 180ms ease;
}

.account-detail__chevron svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.account-detail[open] .account-detail__chevron {
  transform: rotate(180deg);
}

.account-detail__body {
  padding: 0 0.8rem 0.9rem;
}

.account-card {
  display: grid;
  gap: 0.95rem;
  padding: 1.35rem 1rem 1.1rem;
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: rgba(82, 55, 47, 0.12) 0 12px 24px;
}

.account-card__head,
.account-copy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.account-card__head span,
.account-copy-box span {
  color: var(--inkSoft);
  font-size: 0.74rem;
  font-weight: 800;
}

.account-card__head strong,
.account-copy-box strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.account-copy-box {
  min-height: 3.25rem;
  padding: 0.72rem 0.82rem;
  border-radius: 0.35rem;
  background: var(--paperMuted);
}

.account-copy-box div {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.account-copy-button {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.24rem;
  padding: 0 0.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.account-copy-button svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.toss-transfer-button {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  border: 1px solid rgba(0, 100, 255, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #202633;
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow: rgba(0, 100, 255, 0.1) 0 9px 18px;
}

.toss-mark {
  position: relative;
  display: inline-block;
  width: 1.18rem;
  height: 1.08rem;
  flex: 0 0 auto;
  border-radius: 58% 48% 54% 46%;
  background: #0064ff;
  transform: rotate(-13deg);
}

.toss-mark::before {
  position: absolute;
  bottom: 0.02rem;
  left: -0.22rem;
  width: 0.58rem;
  height: 0.46rem;
  background: #0064ff;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  content: "";
  transform: rotate(7deg);
  transform-origin: right bottom;
}

.form-card {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.45rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--paperMuted);
  box-shadow: var(--shadow-soft);
}

.form-card label,
.field-grid label {
  display: grid;
  gap: 0.38rem;
}

.form-card label span,
.segmented-field legend {
  color: var(--inkSoft);
  font-size: 0.78rem;
  font-weight: 800;
}

.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.82rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  background: #fff;
  color: var(--ink);
}

.form-card textarea {
  resize: vertical;
  line-height: 1.6;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(217, 137, 133, 0.15);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.segmented-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  border: 0;
}

.segmented-field legend {
  grid-column: 1 / -1;
  margin-bottom: 0.1rem;
}

.segmented-field label {
  position: relative;
}

.segmented-field input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-field span {
  display: grid;
  min-height: 2.85rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--inkSoft);
  font-size: 0.86rem;
  font-weight: 800;
}

.segmented-field input:checked + span {
  border-color: var(--primaryDark);
  background: var(--primaryDark);
  color: #fff;
}

.guestbook-list {
  display: grid;
  gap: 0.72rem;
  margin-top: 1rem;
}

.guestbook-entry {
  padding: 1rem;
  border: 1px solid var(--line);
  background: #fff;
}

.guestbook-entry p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.7;
  word-break: keep-all;
}

.guestbook-entry div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.72rem;
  color: var(--inkSoft);
  font-size: 0.76rem;
}

.info-section {
  background: var(--canvas);
}

.info-list {
  margin-top: 1.45rem;
}

.rsvp-section {
  padding-bottom: 5.2rem;
  text-align: center;
}

.rsvp-card {
  display: grid;
  gap: 0.68rem;
  margin-top: 1.6rem;
  padding: 1.55rem 1.25rem;
  border-radius: 6px;
  background: #f4e3df;
  color: var(--ink);
}

.rsvp-card p {
  margin: 0;
  color: var(--inkSoft);
  font-size: 0.86rem;
  line-height: 1.6;
}

.rsvp-card__parents {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.82rem;
}

.rsvp-card__parents span,
.rsvp-card__parents strong {
  color: var(--ink);
  font-weight: 900;
}

.rsvp-card__parents i {
  color: var(--primaryDark);
  font-style: normal;
  font-size: 0.82rem;
}

.rsvp-card__divider {
  height: 1px;
  margin: 0.9rem 0 0.5rem;
  background: rgba(217, 137, 133, 0.26);
}

.rsvp-open-button {
  display: inline-flex;
  min-height: 3.45rem;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  border-radius: 6px;
  background: #dc8b76;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: rgba(176, 91, 74, 0.18) 0 12px 24px;
}

.share-section {
  padding-top: 5.7rem;
  padding-bottom: 7.2rem;
  background: var(--canvas);
  text-align: center;
}

.share-section h2 {
  color: rgba(255, 250, 247, 0.98);
  font-family: var(--font-display);
  font-size: clamp(4.4rem, 20vw, 7rem);
  font-weight: 700;
  line-height: 0.8;
  text-shadow: rgba(122, 83, 74, 0.16) 0 3px 0;
}

.share-section p {
  margin: 1rem 0 1.7rem;
  color: var(--inkSoft);
  font-size: 0.9rem;
}

.button {
  display: inline-flex;
  width: 100%;
  min-height: 3.05rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 850;
  transition: transform 150ms ease, opacity 150ms ease;
}

.button:active,
.icon-button:active,
.quick-bar__button:active,
.gallery-slide:active {
  transform: scale(0.98);
}

.button--dark {
  background: var(--primaryDark);
  color: #fff;
  box-shadow: var(--shadow-button);
}

.button--line {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.button--kakao {
  background: #fee85e;
  color: #332321;
  box-shadow: var(--shadow-button);
}

.kakao-talk-icon {
  position: relative;
  display: inline-grid;
  width: 2.25rem;
  height: 1.48rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: #3f2925;
  color: #fee85e;
  font-family: system-ui, sans-serif;
  font-size: 0.47rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.kakao-talk-icon::after {
  position: absolute;
  bottom: -0.22rem;
  left: 0.38rem;
  width: 0.44rem;
  height: 0.44rem;
  background: #3f2925;
  clip-path: polygon(0 0, 100% 0, 10% 100%);
  content: "";
}

.icon-button {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.icon-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.quick-bar {
  position: fixed;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  width: min(calc(100% - 2rem), 360px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2rem;
  padding: 0.36rem;
  border: 1px solid rgba(236, 221, 213, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: rgba(82, 55, 47, 0.12) 0 10px 24px;
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.quick-bar__button {
  display: grid;
  min-width: 0;
  min-height: 2.25rem;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  color: var(--inkSoft);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.quick-bar__button:nth-child(2) {
  background: var(--paperMuted);
  color: var(--ink);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 5.2rem;
  z-index: 80;
  max-width: min(92vw, 360px);
  padding: 0.74rem 1rem;
  border-radius: 999px;
  background: rgba(58, 48, 46, 0.94);
  color: #fff;
  font-size: 0.84rem;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.toast.is-active {
  opacity: 1;
  transform: translate(-50%, 0);
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(58, 48, 46, 0.86);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.image-viewer.is-open {
  opacity: 1;
  visibility: visible;
}

.image-viewer figure {
  position: relative;
  width: min(100%, 390px);
  margin: 0;
  animation: imageViewerPhotoIn 260ms ease both;
}

.image-viewer img {
  width: 100%;
  max-height: 76svh;
  object-fit: contain;
  background: #fff;
}

.image-viewer figcaption {
  margin-top: 0.8rem;
  color: #fff;
  text-align: center;
}

.image-viewer__close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  min-height: 2.4rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.image-viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
}

.image-viewer__nav--prev {
  left: max(0.8rem, env(safe-area-inset-left));
}

.image-viewer__nav--next {
  right: max(0.8rem, env(safe-area-inset-right));
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.contact-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 35, 34, 0.32);
  backdrop-filter: blur(2px);
}

.contact-modal__panel {
  position: relative;
  width: min(100%, 390px);
  padding: 2.75rem 1.45rem 1.6rem;
  background: #f8f8f8;
  color: var(--ink);
  box-shadow: rgba(45, 37, 35, 0.18) 0 18px 46px;
}

.contact-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  background: transparent;
  color: var(--inkSoft);
  font-size: 1.8rem;
  line-height: 1;
}

.contact-modal__panel h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 1.36rem;
  font-weight: 500;
  text-align: center;
}

.contact-modal__panel > p {
  margin: 0.55rem 0 1.65rem;
  color: var(--primary);
  font-size: 0.84rem;
  text-align: center;
}

.contact-list {
  display: grid;
  gap: 1rem;
}

.contact-card {
  padding: 1.1rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(55, 49, 48, 0.12) 0 12px 24px;
}

.contact-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.contact-card__head strong {
  color: var(--ink);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
}

.contact-card__head span {
  color: var(--inkSoft);
  font-size: 0.82rem;
}

.contact-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.contact-card__actions button {
  min-height: 2.85rem;
  border-radius: 6px;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
}

.contact-card__actions button:first-child {
  background: #dc8b76;
}

.contact-card__actions button:last-child {
  background: #686868;
}

.rsvp-modal {
  position: fixed;
  inset: 0;
  z-index: 76;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.rsvp-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.rsvp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 35, 34, 0.36);
  backdrop-filter: blur(2px);
}

.rsvp-modal__panel {
  position: relative;
  width: min(100%, 390px);
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  padding: 2.45rem 1.1rem 1.15rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: rgba(45, 37, 35, 0.2) 0 18px 46px;
}

.rsvp-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  background: transparent;
  color: var(--inkSoft);
  font-size: 1.7rem;
  line-height: 1;
}

.rsvp-modal__panel h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-base);
  font-size: 1.28rem;
  font-weight: 400;
  text-align: center;
}

.rsvp-modal__panel > p:not(.eyebrow) {
  margin: 0.45rem 0 1rem;
  color: var(--inkSoft);
  font-size: 0.82rem;
  text-align: center;
}

.rsvp-modal .form-card {
  margin-top: 1rem;
  box-shadow: none;
}

@keyframes coverPhotoIn {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes imageViewerPhotoIn {
  from {
    opacity: 0;
    transform: translate3d(0, 0.4rem, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes coverPhotoBreath {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.08);
  }
}

@keyframes coverFocusIn {
  0%,
  78% {
    filter: saturate(0.74) contrast(0.92) brightness(0.54) blur(3px);
  }
  100% {
    filter: saturate(1) contrast(1) brightness(1) blur(0);
  }
}

@keyframes softDrop {
  from {
    opacity: 0;
    transform: translate3d(-50%, -8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes musicButtonIn {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes musicEqualizer {
  0%,
  100% {
    transform: scaleY(0.42);
  }

  48% {
    transform: scaleY(1);
  }
}

@keyframes entryLetterIn {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.72) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes entryHeartPulse {
  0% {
    transform: scale(0.88) rotate(-4deg);
  }
  58% {
    transform: scale(1.12) rotate(2deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes entryOverlayOut {
  0%,
  72% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes coverTitleIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes coverEventIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes confettiFall {
  0% {
    opacity: 0;
    transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--rotate));
  }
  12% {
    opacity: var(--alpha);
    transform: translate3d(var(--m1x), var(--m1y), 0) rotate(calc(var(--rotate) + 64deg));
  }
  48% {
    opacity: var(--alpha);
    transform: translate3d(var(--m2x), var(--m2y), 0) rotate(calc(var(--rotate) + 180deg));
  }
  78% {
    opacity: 0.24;
    transform: translate3d(var(--ex), var(--ey), 0) rotate(calc(var(--rotate) + 330deg));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--ex), var(--ey), 0) rotate(calc(var(--rotate) + 420deg));
  }
}

@keyframes scrollCue {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(260%);
  }
}

@media (min-width: 768px) {
  .page-shell {
    padding: 3rem 0;
  }

  .phone-frame {
    min-height: min(900px, calc(100svh - 6rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .reveal-section {
    opacity: 1;
    transform: none;
  }

  .reveal-section:not(.cover-section) :where(
    .eyebrow,
    h2,
    .section-note,
    .tiny-mark,
    .invitation-copy,
    .signature,
    .party-date-ko,
    .party-date-en,
    .party-divider,
    .calendar-grid,
    .countdown-grid,
    .dday-message,
    .profile-photo,
    .profile-parent,
    .contact-open-button,
    .gallery-carousel,
    .gallery-help,
    .venue-heading,
    .map-card,
    .transport-item,
    .venue-section .button-grid,
    .account-list,
    .guestbook-list,
    .guestbook-form,
    .info-list,
    .rsvp-card,
    .share-buttons
  ),
  .photo-break.reveal-section img {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }

  .party-year p {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .confetti-layer {
    display: none;
  }
}