@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Serif+KR:wght@400;500;600&display=swap");

:root {
  --paper: #f8f6f1;
  --paper-2: #f1eee7;
  --ink: #3f3b36;
  --muted: #8a8379;
  --line: #d9d3c8;
  --accent: #9b8975;
  --sage: #8d9884;
  --max: 720px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overscroll-behavior-y: contain;
  background: #e8e4dc;
  color: var(--ink);
  font-family: "Noto Serif KR", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit
}

.invitation {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(60, 50, 40, .08);
}

.hero,
.ending {
  position: relative;
  min-height: 100svh;
  overflow: hidden
}

.hero-photo,
.ending-photo {
  position: absolute;
  inset: 0
}

.hero-photo img,
.ending-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-photo img {
  object-position: center
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 18, 15, .08), rgba(20, 18, 15, .12) 45%, rgba(20, 18, 15, .62));
}

.hero-copy {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 14%;
  color: #fff;
  text-align: center;
}

.eyebrow,
.section-label {
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .24em;
  font-size: 12px;
}

.hero h1 {
  margin: 12px 0 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(42px, 10vw, 74px);
  font-weight: 500;
  letter-spacing: .08em;
}

.hero h1 span {
  font-size: .65em;
  font-style: italic;
  margin: 0 4px
}

.hero-date {
  font-size: 12px;
  letter-spacing: .12em
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  color: #fff;
  font: 11px "Cormorant Garamond", serif;
  letter-spacing: .2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, .75);
  animation: scrollLine 1.7s infinite
}

@keyframes scrollLine {

  0%,
  100% {
    transform: scaleY(.45);
    transform-origin: top;
    opacity: .35
  }

  50% {
    transform: scaleY(1);
    opacity: 1
  }
}

.section {
  position: relative;
  padding: 92px 9%
}

.intro {
  text-align: center;
  background: var(--paper)
}

.section-label {
  color: var(--accent);
  margin-bottom: 25px
}

.intro h2,
.gallery-section h2,
.location-section h2,
.account-section h2 {
  margin: 0 0 30px;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.55;
  font-weight: 500;
}

.intro p {
  font-size: 14px;
  line-height: 2.15;
  color: #686158;
  margin: 0 0 20px
}

.names {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 42px;
  font-size: 15px;
}

.names em {
  font-family: "Cormorant Garamond", serif;
  font-size: 25px;
  color: var(--accent)
}

.botanical {
  position: absolute;
  color: #a5aa99;
  font-size: 30px;
  opacity: .65
}

.botanical-left {
  left: 7%;
  top: 60px;
  transform: rotate(-20deg)
}

.date-card {
  padding-top: 65px;
  padding-bottom: 65px;
  text-align: center;
  background: var(--paper-2);
}

.date-line {
  height: 1px;
  background: var(--line);
  margin: 0 auto 25px;
  max-width: 160px
}

.date-month {
  font: 13px "Cormorant Garamond", serif;
  letter-spacing: .25em;
  color: var(--muted);
  margin: 0 0 2px
}

.date-card strong {
  font: 500 68px "Cormorant Garamond", serif;
  line-height: 1
}

.date-week {
  font: 12px "Cormorant Garamond", serif;
  letter-spacing: .16em;
  color: var(--muted);
  margin: 8px 0
}

.date-place {
  font-size: 13px;
  margin: 16px 0 0
}

.gallery-section {
  background: #fbfaf7;
  text-align: center
}

.slider {
  position: relative;
  margin-top: 35px
}

.slides {
  overflow: hidden
}

.slide {
  display: none;
  margin: 0;
  aspect-ratio: 4/5;
  background: #eae7e0
}

.slide.active {
  display: block;
  animation: fade .45s ease
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

@keyframes fade {
  from {
    opacity: .3;
    transform: scale(1.015)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

.slider-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(40, 35, 30, .22);
  color: white;
  font-size: 25px;
}

.slider-btn.prev {
  left: 14px
}

.slider-btn.next {
  right: 14px
}

.slider-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 16px
}

.counter {
  font: 12px "Cormorant Garamond", serif;
  letter-spacing: .1em;
  color: var(--muted)
}

.dots {
  display: flex;
  gap: 6px
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c9c2b7
}

.dot.active {
  background: #756b5f
}

.gallery-note {
  font-size: 11px;
  color: #aaa39a;
  margin: 14px 0 0
}

.location-section {
  background: var(--paper)
}

.venue {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.venue-icon,
.transport-icon {
  flex: none
}

.venue-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round
}

.venue h3 {
  font-size: 15px;
  margin: 0 0 5px
}

.venue p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0
}

.transport-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 28px 0
}

.transport {
  text-align: center;
  padding: 18px 6px;
  background: #f2efe9
}

.transport-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round
}

.transport h3 {
  font-size: 13px;
  margin: 9px 0 5px
}

.transport p {
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0
}

.map-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 230px;
  overflow: hidden;
  background: #e8e5dc;
  color: #777066;
  font-size: 11px;
}

.map-grid {
  position: absolute;
  inset: -20%;
  opacity: .45;
  background:
    linear-gradient(25deg, transparent 44%, #c8c4b9 45%, #c8c4b9 46%, transparent 47%),
    linear-gradient(145deg, transparent 35%, #d0ccc2 36%, #d0ccc2 37%, transparent 38%),
    linear-gradient(90deg, transparent 49%, #cbc7bd 50%, transparent 51%);
  background-size: 90px 70px, 120px 95px, 70px 70px;
}

.map-pin {
  position: relative;
  z-index: 1;
  margin-bottom: 7px
}

.map-pin svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #8f8171;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.map-placeholder span {
  position: relative;
  z-index: 1;
  background: rgba(248, 246, 241, .86);
  padding: 8px 12px
}

.map-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px
}

.map-actions button {
  border: 1px solid var(--line);
  background: transparent;
  padding: 11px 4px;
  font-size: 11px;
  cursor: pointer;
}

.account-section {
  text-align: center;
  background: var(--paper-2)
}

.account-intro {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
  margin: -8px 0 28px
}

.account-group {
  border-top: 1px solid var(--line);
  text-align: left
}

.account-group:last-child {
  border-bottom: 1px solid var(--line)
}

.account-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 13px;
}

.account-toggle span:last-child {
  font: 22px "Cormorant Garamond", serif;
  color: var(--accent);
  transition: .25s
}

.account-toggle[aria-expanded="true"] span:last-child {
  transform: rotate(45deg)
}

.account-content {
  display: none;
  padding: 0 4px 18px
}

.account-content.open {
  display: block
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .55);
  padding: 15px 14px;
}

.account-row strong {
  display: block;
  font-size: 12px;
  margin-bottom: 5px
}

.account-row small {
  font-size: 10px;
  color: var(--muted)
}

.copy-btn {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 7px 10px;
  font-size: 10px;
  cursor: pointer
}

.ending {
  min-height: 78svh
}

.ending-photo img {
  object-position: center
}

.ending-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(25, 20, 15, .12), rgba(25, 20, 15, .62))
}

.ending-copy {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12%;
  text-align: center;
  color: white
}

.ending-copy h2 {
  font-size: 26px;
  line-height: 1.7;
  font-weight: 400;
  margin: 15px 0 22px
}

.ending-copy>p:last-of-type {
  font: 13px "Cormorant Garamond", serif;
  letter-spacing: .15em
}

.ending-names {
  font: 17px "Cormorant Garamond", serif;
  letter-spacing: .12em;
  margin-top: 20px
}

footer {
  text-align: center;
  background: var(--paper);
  padding: 24px;
  color: #aaa39a;
  font: 11px "Cormorant Garamond", serif;
  letter-spacing: .12em
}

.top-btn {
  position: fixed;
  right: max(18px, calc((100vw - var(--max))/2 + 18px));
  bottom: 20px;
  width: 38px;
  height: 38px;
  border: 1px solid #d4cec3;
  border-radius: 50%;
  background: rgba(248, 246, 241, .9);
  backdrop-filter: blur(6px);
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: .25s;
  z-index: 10;
}

.top-btn.show {
  opacity: 1;
  pointer-events: auto
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  padding: 10px 14px;
  background: rgba(45, 41, 37, .9);
  color: #fff;
  font-size: 11px;
  border-radius: 20px;
  opacity: 0;
  transition: .25s;
  z-index: 20;
  white-space: nowrap;
}

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

@media (min-width:721px) {

  .hero,
  .ending {
    min-height: 820px
  }
}

@media (max-width:480px) {
  .section {
    padding: 78px 7%
  }

  .hero-copy {
    bottom: 13%
  }

  .transport-grid {
    gap: 6px
  }
}

.section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease
}

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

.hero {
  opacity: 1;
  transform: none
}

/* V2 motion */
.section {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1)
}

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

.section.is-visible .section-label {
  animation: labelIn .75s .08s both
}

.section.is-visible h2,
.section.is-visible .intro p,
.section.is-visible .names,
.section.is-visible .gallery-note,
.section.is-visible .venue,
.section.is-visible .transport-row,
.section.is-visible .map-placeholder,
.section.is-visible .map-actions,
.section.is-visible .account-group {
  animation: contentUp .8s both
}

.section.is-visible h2 {
  animation-delay: .15s
}

.section.is-visible .intro p:nth-of-type(1) {
  animation-delay: .28s
}

.section.is-visible .intro p:nth-of-type(2) {
  animation-delay: .38s
}

.section.is-visible .names {
  animation-delay: .48s
}

.section.is-visible .venue {
  animation-delay: .22s
}

.section.is-visible .transport-row:nth-child(1) {
  animation-delay: .30s
}

.section.is-visible .transport-row:nth-child(2) {
  animation-delay: .42s
}

.section.is-visible .transport-row:nth-child(3) {
  animation-delay: .54s
}

.section.is-visible .map-placeholder {
  animation-delay: .66s
}

.section.is-visible .map-actions {
  animation-delay: .74s
}

.section.is-visible .account-group:nth-child(1) {
  animation-delay: .22s
}

.section.is-visible .account-group:nth-child(2) {
  animation-delay: .34s
}

@keyframes contentUp {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes labelIn {
  from {
    opacity: 0;
    letter-spacing: .42em;
    transform: translateX(-10px)
  }

  to {
    opacity: 1;
    letter-spacing: .24em;
    transform: none
  }
}

.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .hero-date {
  opacity: 0;
  animation: heroIn .9s both
}

.hero-copy .eyebrow {
  animation-delay: .2s
}

.hero-copy h1 {
  animation-delay: .38s
}

.hero-copy .hero-date {
  animation-delay: .58s
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.hero-photo img {
  animation: heroPhoto 1.8s both
}

@keyframes heroPhoto {
  from {
    transform: scale(1.045);
    filter: saturate(.9)
  }

  to {
    transform: scale(1);
    filter: saturate(1)
  }
}

/* V2 date emphasis */
.date-card {
  background: #f2efe8;
  text-align: center;
  padding: 92px 9% 88px
}

.date-kicker {
  margin: -8px 0 18px;
  font: 11px "Cormorant Garamond", serif;
  letter-spacing: .28em;
  color: var(--muted)
}

.big-date {
  display: flex;
  flex-direction: column;
  align-items: center
}

.big-date .year {
  font: 16px "Cormorant Garamond", serif;
  letter-spacing: .35em;
  color: var(--accent);
  margin-left: .35em
}

.date-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 4px 0 2px
}

.date-main strong {
  font: 500 clamp(76px, 20vw, 122px) "Cormorant Garamond", serif;
  line-height: .95;
  letter-spacing: -.04em
}

.date-main i {
  font: 400 clamp(35px, 8vw, 55px) "Cormorant Garamond", serif;
  color: #b5ab9f;
  margin: 0 8px
}

.big-date .day {
  font: 12px "Cormorant Garamond", serif;
  letter-spacing: .35em;
  color: var(--muted);
  margin-left: .35em
}

.time-box {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  margin: 30px auto 20px;
  padding: 14px 28px 15px;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent)
}

.time-box span {
  font: 10px "Cormorant Garamond", serif;
  letter-spacing: .25em;
  color: var(--muted)
}

.time-box strong {
  font: 600 24px "Cormorant Garamond", serif;
  letter-spacing: .08em
}

.date-place {
  font-size: 13px;
  color: var(--ink)
}

.date-place em {
  font-style: normal;
  color: var(--accent);
  padding: 0 5px
}

/* V2 transport rows */
.transport-list {
  margin: 28px 0 30px;
  border-top: 1px solid var(--line)
}

.transport-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 23px 4px;
  border-bottom: 1px solid var(--line)
}

.transport-row .transport-icon {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #f0ede6;
  border-radius: 50%
}

.transport-row .transport-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round
}

.transport-text h3 {
  font-size: 14px;
  margin: 1px 0 8px
}

.transport-text p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
  margin: 0
}

.transport-text p span {
  color: #91887d
}

/* V2 disable photo zoom/drag */
.no-image-zoom img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
  pointer-events: none
}

.slide {
  -webkit-tap-highlight-color: transparent;
  cursor: default
}

/* ===== V4: clean V2-style account accordion ===== */
.account-group {
  margin-top: 28px;
}

.account-group-bride {
  margin-top: 46px;
}

.account-heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}

.account-heading span {
  font-size: 14px;
  letter-spacing: .12em;
}

.account-heading b {
  font-size: 20px;
  font-weight: 300;
  color: var(--accent);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

.account-group.open .account-heading b {
  transform: rotate(45deg);
}

.account-list {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .9s cubic-bezier(.16, 1, .3, 1), opacity .6s ease;
}

.account-group.open .account-list {
  max-height: 360px;
  opacity: 1;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  transform: translateY(-7px);
  opacity: 0;
  transition: transform .75s cubic-bezier(.16, 1, .3, 1), opacity .75s ease;
}

.account-group.open .account-row {
  transform: none;
  opacity: 1;
}

.account-group.open .account-row:nth-child(1) {
  transition-delay: .08s
}

.account-group.open .account-row:nth-child(2) {
  transition-delay: .17s
}

.account-group.open .account-row:nth-child(3) {
  transition-delay: .26s
}

.account-row>div {
  min-width: 0
}

.account-row strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}

.account-row span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .02em;
}

.account-row .copy-btn {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .04em;
}

/* Keep V2's slower overall reveal, without the V3 circular hero */
.section {
  transition-duration: 1.35s;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* ===== V5: OUR STORY ===== */
.story-section {
  padding: 104px 9% 94px;
  background: #fbfaf7;
}

.story-intro {
  text-align: center
}

.story-intro h2 {
  margin: 16px 0 17px;
  font: 500 clamp(45px, 12vw, 70px)/.86 "Cormorant Garamond", serif;
  letter-spacing: .02em;
}

.story-intro h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent)
}

.story-lead {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}

.timeline {
  margin-top: 66px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--line);
  transform-origin: top;
}

.timeline-item {
  display: grid;
  grid-template-columns: 50px 1px 1fr;
  column-gap: 18px;
  min-height: 96px;
  position: relative;
  opacity: 0;
  transform: translateY(22px);
}

.story-section.is-visible .timeline-item {
  animation: storyItemIn 1.15s both cubic-bezier(.16, 1, .3, 1);
}

.story-section.is-visible .timeline-item:nth-child(1) {
  animation-delay: .35s
}

.story-section.is-visible .timeline-item:nth-child(2) {
  animation-delay: .58s
}

.story-section.is-visible .timeline-item:nth-child(3) {
  animation-delay: .81s
}

.story-section.is-visible .timeline-item:nth-child(4) {
  animation-delay: 1.04s
}

.story-section.is-visible .timeline-item:nth-child(5) {
  animation-delay: 1.27s
}

.story-section.is-visible .timeline-item:nth-child(6) {
  animation-delay: 1.50s
}

.timeline-year {
  font: 500 14px "Cormorant Garamond", serif;
  color: var(--accent);
  padding-top: 1px;
  letter-spacing: .06em;
}

.timeline-line {
  position: relative;
  width: 1px;
  background: var(--line);
}

.timeline-line::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid var(--accent);
  background: #fbfaf7;
  border-radius: 50%;
  transform: translateX(-50%);
}

.timeline-copy {
  padding: 0 0 28px
}

.timeline-copy span {
  display: block;
  font: 10px "Cormorant Garamond", serif;
  letter-spacing: .22em;
  color: #9b9186;
  margin-bottom: 7px;
}

.timeline-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink);
}

.final-year .timeline-copy {
  padding-bottom: 0;
}

@keyframes storyItemIn {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ===== V5: WHY WE CHOOSE EACH OTHER ===== */
.why-section {
  padding: 98px 9% 100px;
  background: #f2efe8;
  text-align: center;
}

.why-card {
  margin: 38px auto 0;
  max-width: 430px;
}

.why-side {
  opacity: 0;
  transform: translateY(22px);
}

.why-section.is-visible .why-side {
  animation: whyIn 1.25s both cubic-bezier(.16, 1, .3, 1);
}

.why-section.is-visible .groom {
  animation-delay: .3s
}

.why-section.is-visible .bride {
  animation-delay: .78s
}

.why-question {
  margin: 0 0 16px;
  font: italic 500 17px "Cormorant Garamond", serif;
  letter-spacing: .13em;
  color: var(--accent);
}

.why-answer {
  margin: 0;
  font-size: 12px;
  line-height: 2;
  color: var(--ink);
}

.why-divider {
  height: 58px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--line);
}

.why-divider span {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: #f2efe8;
  color: var(--accent);
  font-size: 13px;
}

.why-ending {
  margin: 44px 0 0;
  font: italic 16px/1.55 "Cormorant Garamond", serif;
  color: var(--muted);
}

@keyframes whyIn {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* V5: more luxurious, slower text appearance */
.story-section .section-label,
.why-section .section-label {
  transition: opacity 1.4s ease, letter-spacing 1.4s ease;
}

.story-section::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin: 54px auto 0;
  background: var(--accent);
  opacity: .35;
  transform: scaleX(0);
  transform-origin: center;
}

.story-section.is-visible::after {
  animation: lineReveal 1.6s 1.55s both cubic-bezier(.16, 1, .3, 1);
}

@keyframes lineReveal {
  from {
    transform: scaleX(0);
    opacity: 0
  }

  to {
    transform: scaleX(1);
    opacity: .35
  }
}

/* ===== V6: alternating 1:1 couple photos ===== */
.why-section {
  padding: 104px 8% 100px;
  background: #f2efe8;
  text-align: center;
  overflow: hidden;
}

.why-title {
  margin: 15px 0 46px;
  font: 500 clamp(35px, 9vw, 54px)/.92 "Cormorant Garamond", serif;
  letter-spacing: .02em;
}

.why-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent)
}

.why-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin: 0 auto 46px;
  max-width: 440px;
  text-align: left;
}

.why-person.bride {
  margin-bottom: 0
}

.why-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fffdf9;
  border: 1px solid rgba(130, 115, 100, .18);
}

.why-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.placeholder-photo {
  display: grid;
  place-items: center;
  position: relative;
}

.placeholder-photo::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(130, 115, 100, .12);
}

.placeholder-photo span {
  position: relative;
  z-index: 1;
  font: 10px "Cormorant Garamond", serif;
  letter-spacing: .18em;
  color: #aaa096;
}

.why-person-copy {
  padding: 0 2px
}

.why-question {
  margin: 0 0 13px;
  font: italic 500 17px "Cormorant Garamond", serif;
  letter-spacing: .13em;
  color: var(--accent);
}

.why-answer {
  margin: 0;
  font-size: 11.5px;
  line-height: 2;
  color: var(--ink)
}

.why-person.groom {
  opacity: 0;
  transform: translateX(-30px)
}

.why-person.bride {
  opacity: 0;
  transform: translateX(30px)
}

.why-section.is-visible .why-person.groom {
  animation: whySlideLeft 1.25s .35s both cubic-bezier(.16, 1, .3, 1);
}

.why-section.is-visible .why-person.bride {
  animation: whySlideRight 1.25s .85s both cubic-bezier(.16, 1, .3, 1);
}

.why-section.is-visible .why-ending {
  animation: contentUp 1.35s 1.35s both cubic-bezier(.16, 1, .3, 1);
}

@keyframes whySlideLeft {
  from {
    opacity: 0;
    transform: translateX(-30px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes whySlideRight {
  from {
    opacity: 0;
    transform: translateX(30px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.why-ending {
  margin: 50px 0 0;
  font: italic 16px/1.55 "Cormorant Garamond", serif;
  color: var(--muted);
}

@media (max-width:380px) {
  .why-person {
    gap: 14px
  }

  .why-answer {
    font-size: 10.5px
  }

  .why-question {
    font-size: 15px
  }
}

/* ===== V7: intro flower + requested section order ===== */
.intro .botanical {
  display: none !important
}

.intro-flower {
  width: 54px;
  height: 72px;
  margin: 0 auto 18px;
  opacity: 0;
  transform: translateY(10px) scale(.96);
}

.intro-flower img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.intro.is-visible .intro-flower {
  animation: introFlowerIn 1.45s .05s both cubic-bezier(.16, 1, .3, 1);
}

@keyframes introFlowerIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96)
  }

  to {
    opacity: 1;
    transform: none
  }
}


/* Only the actual date typography uses Playfair Display. */
.date-card .big-date,
.date-card .big-date .year,
.date-card .big-date .date-main strong,
.date-card .big-date .date-main i,
.date-card .big-date .day {
  font-family: "Playfair Display", Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.date-card .big-date .date-main strong {
  font-weight: 500;
}

.date-card .big-date .date-main {
  letter-spacing: .01em;
}

/* ===== V9: Playfair Display for ALL NUMBERS ONLY ===== */
.number-font {
  font-family: "Playfair Display", Georgia, serif !important;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ===== V10: wedding time emphasis ===== */
.date-card .time-number {
  font-family: "Playfair Display", Georgia, serif !important;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: #9b6f59;
  font-size: 1.14em;
  font-weight: 500;
  letter-spacing: .015em;
}

/* OUR STORY: keep years clear of the vertical line after the
   numeric font change. Give the year column a little more room. */
.timeline {
  padding-left: 3px;
}

.timeline::before {
  left: 31px;
}

.timeline-item {
  grid-template-columns: 62px 1px minmax(0, 1fr);
  column-gap: 18px;
}

.timeline-year {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  padding-right: 4px;
  background: #fbfaf7;
}

.timeline-line {
  position: relative;
  z-index: 1;
}

.kakao-map-wrap {
  width: 100%;
  overflow: hidden;
  background: #f3f1ec
}

.kakao-map-wrap .root_daum_roughmap {
  width: 100% !important
}

.kakao-map-wrap .root_daum_roughmap .wrap_map {
  width: 100% !important
}

.map-actions .map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  font-size: 11px;
  padding: 11px 4px;
  border: 1px solid var(--line);
  color: var(--accent);
}

.map-actions .map-btn i {
  color: var(--accent);
  font-size: 11px;
  line-height: 1;
}

.map-img {
  width: 100%;

  >img {
    width: 100%;
  }
}

/* V5 mobile performance + zoom guard */
@media (max-width: 720px) {
  .section,
  .section.is-visible {
    transform: none !important;
    transition: opacity .35s ease !important;
  }
  .section.is-visible .section-label,
  .section.is-visible h2,
  .section.is-visible .intro p,
  .section.is-visible .names,
  .section.is-visible .gallery-note,
  .section.is-visible .venue,
  .section.is-visible .transport-row,
  .section.is-visible .map-placeholder,
  .section.is-visible .map-actions,
  .section.is-visible .account-group,
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy .hero-date,
  .hero-photo img {
    animation: none !important;
  }

  /* 애니메이션을 끈 요소가 opacity:0에 머물지 않도록 최종 상태로 표시 */
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy .hero-date {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-photo img {
    transform: none !important;
    filter: none !important;
  }

  .slide.active { animation: none !important; }
  .scroll-cue i { animation: none !important; }
}

img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}


/* =========================================================
   V14 PREMIUM MOBILE MOTION
   - GPU-friendly opacity + translate3d only
   - Staggered reveal per section
   - Animated SCROLL cue restored on mobile
   - No heavy blur/filter animations
   ========================================================= */

@media (max-width: 720px) {
  /* Keep the whole section stable; animate its contents instead. */
  .section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Elements that should gently enter as the user reaches each section. */
  .section.is-motion-pending .section-label,
  .section.is-motion-pending > h2,
  .section.is-motion-pending > p,
  .section.is-motion-pending > .names,
  .section.is-motion-pending > .date-kicker,
  .section.is-motion-pending > .big-date,
  .section.is-motion-pending > .time-box,
  .section.is-motion-pending > .date-place,
  .section.is-motion-pending > .story-intro,
  .section.is-motion-pending > .why-person,
  .section.is-motion-pending > .why-ending,
  .section.is-motion-pending > .slider,
  .section.is-motion-pending > .slider-meta,
  .section.is-motion-pending > .gallery-note,
  .section.is-motion-pending > .venue,
  .section.is-motion-pending > .transport-list,
  .section.is-motion-pending > .map-img,
  .section.is-motion-pending > .map-actions,
  .section.is-motion-pending > .account-group,
  .section.is-motion-pending > .account-intro {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }

  .section.is-motion-pending .timeline-item {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }

  /* Smooth entrance. The browser can composite opacity/transform cheaply. */
  .section.is-visible .section-label,
  .section.is-visible > h2,
  .section.is-visible > p,
  .section.is-visible > .names,
  .section.is-visible > .date-kicker,
  .section.is-visible > .big-date,
  .section.is-visible > .time-box,
  .section.is-visible > .date-place,
  .section.is-visible > .story-intro,
  .section.is-visible > .why-person,
  .section.is-visible > .why-ending,
  .section.is-visible > .slider,
  .section.is-visible > .slider-meta,
  .section.is-visible > .gallery-note,
  .section.is-visible > .venue,
  .section.is-visible > .transport-list,
  .section.is-visible > .map-img,
  .section.is-visible > .map-actions,
  .section.is-visible > .account-group,
  .section.is-visible > .account-intro,
  .section.is-visible .timeline-item {
    animation: v14Reveal .72s cubic-bezier(.22,.61,.36,1) both;
    will-change: transform, opacity;
  }

  .section.is-visible .section-label { animation-delay: .03s; }
  .section.is-visible > h2 { animation-delay: .10s; }
  .section.is-visible > p { animation-delay: .18s; }
  .section.is-visible > .names { animation-delay: .30s; }
  .section.is-visible > .date-kicker { animation-delay: .08s; }
  .section.is-visible > .big-date { animation-delay: .15s; }
  .section.is-visible > .time-box { animation-delay: .26s; }
  .section.is-visible > .date-place { animation-delay: .34s; }
  .section.is-visible > .story-intro { animation-delay: .06s; }
  .section.is-visible .timeline-item:nth-child(1) { animation-delay: .16s; }
  .section.is-visible .timeline-item:nth-child(2) { animation-delay: .25s; }
  .section.is-visible .timeline-item:nth-child(3) { animation-delay: .34s; }
  .section.is-visible .timeline-item:nth-child(4) { animation-delay: .43s; }
  .section.is-visible .timeline-item:nth-child(5) { animation-delay: .52s; }
  .section.is-visible .timeline-item:nth-child(6) { animation-delay: .61s; }
  .section.is-visible > .why-person:nth-of-type(1) { animation-delay: .18s; }
  .section.is-visible > .why-person:nth-of-type(2) { animation-delay: .34s; }
  .section.is-visible > .why-ending { animation-delay: .52s; }
  .section.is-visible > .slider { animation-delay: .16s; }
  .section.is-visible > .slider-meta { animation-delay: .28s; }
  .section.is-visible > .gallery-note { animation-delay: .38s; }
  .section.is-visible > .venue { animation-delay: .14s; }
  .section.is-visible > .transport-list { animation-delay: .24s; }
  .section.is-visible > .map-img { animation-delay: .36s; }
  .section.is-visible > .map-actions { animation-delay: .46s; }
  .section.is-visible > .account-intro { animation-delay: .14s; }
  .section.is-visible > .account-group:nth-of-type(1) { animation-delay: .22s; }
  .section.is-visible > .account-group:nth-of-type(2) { animation-delay: .32s; }

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

  /* Main hero: elegant text entrance + subtle photo settle. */
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy .hero-date {
    animation-name: v14HeroText !important;
    animation-duration: .9s !important;
    animation-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  }

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

  /* Restore the moving line under SCROLL. */
  .scroll-cue {
    opacity: 0;
    animation: v14CueIn .8s .9s ease both;
  }

  .scroll-cue i {
    animation: v14ScrollLine 1.65s cubic-bezier(.45,0,.55,1) infinite !important;
    transform-origin: top center;
  }

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

  @keyframes v14ScrollLine {
    0% { transform: scaleY(.15); opacity: .25; }
    45% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(.15); opacity: .25; }
  }

  /* Gallery transition: fade/slide, not scale, so it stays light on phones. */
  .slide.active {
    animation: v14SlideIn .48s cubic-bezier(.22,.61,.36,1) both !important;
  }

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

  /* Account accordion gets a subtle lift without animating height. */
  .account-content.open {
    animation: v14ContentIn .3s ease both;
  }

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

  /* Respect devices that explicitly request reduced motion. */
  @media (prefers-reduced-motion: reduce) {
    .section.is-motion-pending *,
    .section.is-visible * {
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .scroll-cue { animation: none !important; opacity: 1 !important; }
    .scroll-cue i { animation: none !important; transform: none !important; opacity: .8 !important; }
  }
}


/* PHOTO EVENT */
.photo-event-section {
  position: relative;
  padding: 92px 9%;
  text-align: center;
  background: var(--paper-2);
}

.photo-event-section .section-label {
  margin-bottom: 25px;
}

.photo-event-section h2 {
  margin: 0 0 26px;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.55;
  font-weight: 500;
}

.photo-event-copy {
  margin: 0;
  color: #686158;
  font-size: 13px;
  line-height: 2.05;
}

.photo-event-image {
  margin: 34px 0 0;
  overflow: hidden;
  background: #eae7e0;
}

.photo-event-image img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width:480px) {
  .photo-event-section {
    padding: 78px 7%;
  }

  .photo-event-copy {
    font-size: 12px;
    line-height: 2.05;
  }
}


/* KakaoTalk share */
.kakao-share-wrap {
  display: flex;
  justify-content: center;
  padding: 28px 20px 34px;
}

.kakao-share-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  padding: 12px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kakao-share-btn span {
  margin-right: 5px;
}

.kakao-share-btn:active {
  transform: scale(.98);
}