/* =========================================================
   모바일 청첩장 - 리본 드로잉 스타일
   메인 컬러는 아래 4개만 바꿔도 전체 분위기가 달라집니다.
   ========================================================= */
:root {
  --paper: #ffffff;
  --ink: #202a31;
  --blue: #89bce7;
  --soft-blue: #eaf4fb;
  --line: #dce4e9;
  --muted: #7d858a;

  /* 첫 화면 사진 위에 덮이는 흰색 농도
     사진을 더 진하게 보이게 하려면 .52 → .25 정도로 낮추세요. */
  --hero-overlay: rgba(255,255,255,.52);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #edf0f1;
  color: var(--ink);
  font-family: "Gowun Batang", "Noto Serif KR", serif;
  word-break: keep-all;
}

button, a { font: inherit; }

.invitation {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 36px rgba(25, 38, 45, .08);
}

/* ---------- Hero ---------- */
.ribbon-frame { position: relative; }

.hero {
  min-height: 660px;
  padding: 118px 32px 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* ★ 첫 화면 배경사진
     images 폴더에 hero-bg.jpg 파일을 넣으면 자동으로 보입니다. */
  background:
    linear-gradient(var(--hero-overlay), var(--hero-overlay)),
    url("images/hero-bg.jpg") center center / cover no-repeat;

  position: relative;
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
}

.script-title {
  margin: 0 0 42px;
  color: var(--blue);
  font-family: "Allura", cursive;
  font-size: 47px;
  line-height: .75;
  font-weight: 400;
  transform: rotate(-2deg);
}

.names h1 {
  margin: 0;
  font-family: "Gowun Batang", serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .12em;
}

.and {
  display: block;
  margin: 6px 0;
  font-family: "Allura", cursive;
  color: #7f8689;
  font-size: 24px;
}

.hero-info {
  font-size: 13px;
  line-height: 1.9;
}

.hero-info p { margin: 2px 0; }

.hero-date {
  margin: 14px 0 8px !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  letter-spacing: -.02em;
}

/* ---------- Common section ---------- */
.section {
  position: relative;
  padding: 82px 31px;
  text-align: center;
}

.section + .section {
  border-top: 1px solid rgba(220, 228, 233, .65);
}

.section-mark {
  margin-bottom: 11px;
  color: var(--blue);
  font-family: "Allura", cursive;
  font-size: 34px;
  line-height: 1;
}

.section h2 {
  margin: 0 0 28px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.02em;
}

.small-copy {
  margin: -17px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.intro-text {
  margin: 0;
  color: #495057;
  font-size: 13px;
  line-height: 2.15;
}

.family {
  margin-top: 40px;
  font-size: 12px;
  line-height: 2;
}

.family p { margin: 2px 0; }
.family span { color: #5c6468; }
.family b { font-weight: 700; }

/* Minimal divider */
.simple-divider {
  height: 66px;
  position: relative;
}

.simple-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  border-top: 1px solid #e3e9ec;
  transform: translate(-50%, -50%);
}

.simple-divider::after {
  content: "and";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -56%);
  padding: 0 14px;
  background: #fff;
  color: var(--blue);
  font-family: "Allura", cursive;
  font-size: 22px;
}

/* ---------- Calendar ---------- */
.calendar {
  margin: 38px 0 25px;
  padding: 24px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.calendar-head,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-head {
  margin-bottom: 15px;
  color: #879097;
  font-family: Arial, sans-serif;
  font-size: 9px;
}

.calendar-grid {
  row-gap: 13px;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.calendar-grid span {
  height: 28px;
  display: grid;
  place-items: center;
}

.wedding-day {
  width: 38px;
  height: 36px !important;
  margin: -4px auto 0;
  position: relative;
  display: grid !important;
  place-items: center;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  z-index: 0;
}

/* ★ 꽉 찬 하늘색 하트 */
.wedding-day::before {
  content: "♥";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -53%);
  color: var(--blue);
  font-family: Arial, "Apple Symbols", sans-serif;
  font-size: 46px;
  line-height: 1;
  z-index: -1;
}

.wedding-day::after {
  content: none;
}

.countdown {
  margin: 0;
  color: #6fa8d1;
  font-size: 12px;
}


/* ---------- Gallery : horizontal swipe slider ---------- */
.gallery-slider-wrap {
  position: relative;
  width: 100%;
  margin-top: 8px;
}

.gallery-slider {
  display: flex;
  gap: 0;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

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

.gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f4f6f7;
  border: 1px solid #e5ebee;
}

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

.gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 34px;
  height: 48px;
  border: 0;
  background: rgba(255,255,255,.76);
  color: #6ca7d1;
  font-family: Arial, sans-serif;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.gallery-prev {
  left: 0;
}

.gallery-next {
  right: 0;
}

.gallery-meta {
  margin-top: 14px;
  color: #719fc0;
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
}

.gallery-slash {
  padding: 0 5px;
  color: #b9c8d3;
}

.gallery-note {
  margin: 7px 0 0;
  font-size: 10px;
  color: #9ba4a9;
}

/* 모바일에서는 스와이프가 주동작이라 버튼을 살짝 작게 */
@media (max-width: 480px) {
  .gallery-nav {
    width: 29px;
    height: 44px;
    font-size: 26px;
    background: rgba(255,255,255,.58);
  }
}


/* ---------- Location / real map ---------- */
.location-info strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

.location-info p {
  margin: 3px 0;
  color: #697176;
  font-size: 12px;
  line-height: 1.6;
}

.real-map {
  width: 100%;
  height: 260px;
  margin: 27px 0 12px;
  overflow: hidden;
  border: 1px solid #dce4e9;
  background: #f2f5f6;
}

.real-map iframe { display: block; }

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.map-btn,
.share-btn {
  border: 1px solid #b9d5e8;
  background: #fff;
  color: #497796;
  text-decoration: none;
  padding: 13px 8px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .11em;
  cursor: pointer;
}

.transport {
  margin-top: 31px;
  text-align: left;
}

.transport > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.transport b {
  display: block;
  margin-bottom: 8px;
  color: #6ca7d1;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .14em;
}

.transport p {
  margin: 3px 0;
  color: #5d666b;
  font-size: 11px;
  line-height: 1.8;
}

/* ---------- Account ---------- */
.account-guide {
  margin: -12px 0 25px;
  color: #747c81;
  font-size: 11px;
  line-height: 1.8;
}

details {
  margin: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

summary {
  padding: 15px 4px;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

summary::-webkit-details-marker { display: none; }

summary span {
  color: var(--blue);
  font-family: Arial, sans-serif;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 4px 18px;
  border-top: 1px dashed #e1e6e9;
}

.account-row b,
.account-row small {
  display: block;
}

.account-row b { font-size: 11px; font-weight: 400; }
.account-row small { margin-top: 5px; color: #92999d; }

.account-row button {
  border: 1px solid #c8ddeb;
  background: #fff;
  padding: 8px 10px;
  color: #5d8eae;
  font-size: 10px;
  cursor: pointer;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.contact-grid a {
  padding: 21px 8px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.contact-grid small,
.contact-grid b,
.contact-grid span { display: block; }

.contact-grid small {
  color: #7bb0d6;
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .13em;
}

.contact-grid b {
  margin: 7px 0;
  font-size: 14px;
  font-weight: 400;
}

.contact-grid span {
  color: #8c9498;
  font-size: 10px;
}

.share-btn { width: 100%; }

/* ---------- Footer ---------- */
.footer {
  min-height: 250px;
  padding: 66px 20px 80px;
  text-align: center;
  color: #7f888c;
}

.footer-script {
  margin: 0 0 12px;
  color: var(--blue);
  font-family: "Allura", cursive;
  font-size: 42px;
}

.footer > p:not(.footer-script) {
  margin: 0;
  font-size: 12px;
}

.footer small {
  display: block;
  margin-top: 7px;
  font-family: Georgia, serif;
  font-size: 10px;
  letter-spacing: .05em;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 30;
  transform: translate(-50%, 16px);
  padding: 10px 15px;
  border-radius: 100px;
  background: rgba(32,42,49,.9);
  color: #fff;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
}

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

@media (max-width: 360px) {
  .hero { min-height: 710px; }
  .ribbon { width: 135px; }
  .section { padding-left: 24px; padding-right: 24px; }
  .script-title { font-size: 42px; }
}


.names {
  position: relative;
  padding-bottom: 38px;
  margin-bottom: 34px;
}

.names::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 52px;
  border-top: 1px solid #cbd8df;
  transform: translateX(-50%);
}

.hero-info {
  margin-top: 0;
}


/* =========================================================
   첫 화면 오픈 연출 - 파란 하트가 위에서 도도도독 떨어짐
   ========================================================= */
.heart-rain-layer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, 430px);
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.falling-heart {
  position: absolute;
  top: -60px;
  color: var(--blue);
  font-family: Arial, "Apple Symbols", sans-serif;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 2px 2px rgba(90, 150, 195, .08));
  animation-name: heartDrop;
  animation-timing-function: cubic-bezier(.18,.65,.32,1);
  animation-fill-mode: forwards;
}

@keyframes heartDrop {
  0% {
    transform: translate3d(0, -50px, 0) rotate(0deg) scale(.82);
    opacity: 0;
  }

  8% {
    opacity: .95;
  }

  78% {
    opacity: .95;
  }

  100% {
    transform: translate3d(var(--drift), 112vh, 0) rotate(var(--rotate)) scale(1);
    opacity: 0;
  }
}

/* 사용자가 기기에서 '동작 줄이기'를 켠 경우 과한 애니메이션 방지 */
@media (prefers-reduced-motion: reduce) {
  .heart-rain-layer {
    display: none;
  }
}


/* =========================================================
   메인 화면 텍스트 위치 재배치
   - 영문 + 이름: 위쪽
   - 날짜 + 문구 + 장소: 아래쪽
   ========================================================= */

.hero {
  min-height: 760px;
  padding: 72px 32px 48px;
  align-items: stretch;
}

.hero-copy {
  width: 100%;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}

/* 위쪽 영문 타이틀 */
.script-title {
  margin: 0 0 24px;
}

/* 이름 영역 */
.names {
  margin: 0;
  padding: 0;
}

/* 이름 밑 기존 선 제거 */
.names::after {
  display: none;
}

/* 날짜/문구/호텔정보를 아래쪽으로 밀기 */
.hero-info {
  margin-top: auto;
  padding-top: 0;
}

/* 하단 정보 위 구분선 */
.hero-info::before {
  content: "";
  display: block;
  width: 52px;
  margin: 0 auto 42px;
  border-top: 1px solid #cbd8df;
}

.hero-date {
  margin: 0 0 12px !important;
}

/* 모바일에서도 위/아래 분리가 유지되도록 */
@media (max-width: 480px) {
  .hero {
    min-height: 760px;
    padding: 66px 28px 42px;
  }

  .hero-copy {
    min-height: 650px;
  }

  .hero-info::before {
    margin-bottom: 38px;
  }
}


/* =========================================================
   메인 최종 배치
   - 사진 중앙부는 100% 원색
   - 사진 위/아래만 흰 배경으로 자연스럽게 그라데이션
   - 영문 + 이름은 위
   - 날짜 + 문구 + 장소는 아래
   ========================================================= */

.hero {
  min-height: 820px;
  padding: 0 28px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  position: relative;

  /* 중앙 사진은 그대로 100%, 위/아래 끝부분만 흰색으로 페이드 */
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.72) 5%,
      rgba(255,255,255,.18) 12%,
      rgba(255,255,255,0) 19%,
      rgba(255,255,255,0) 82%,
      rgba(255,255,255,.16) 88%,
      rgba(255,255,255,.68) 95%,
      rgba(255,255,255,1) 100%
    ),
    url("images/hero-bg.jpg") center center / cover no-repeat;
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 820px;
  display: block;
}

/* 상단 영문 - 더 위로 */
.script-title {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  margin: 0;
}

/* 이름 - 영문 바로 아래, 얼굴 위쪽 */
.names {
  position: absolute;
  top: 137px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
}

.names::after {
  display: none;
}

/* 날짜 + 문구 + 호텔정보 - 맨 아래쪽 */
.hero-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  margin: 0;
  padding: 0;
}

/* 날짜 위 얇은 선 */
.hero-info::before {
  content: "";
  display: block;
  width: 52px;
  margin: 0 auto 25px;
  border-top: 1px solid rgba(145,173,190,.55);
}

.hero-date {
  margin: 0 0 14px !important;
}

/* 모바일에서도 동일한 위치감 유지 */
@media (max-width: 480px) {
  .hero {
    min-height: 820px;
    padding: 0 24px;
  }

  .hero-copy {
    min-height: 820px;
  }

  .script-title {
    top: 34px;
  }

  .names {
    top: 132px;
  }

  .hero-info {
    bottom: 20px;
  }
}


/* =========================================================
   메인 하단 정보 분리 버전
   사진 하단 → 자연스럽게 흰색으로 페이드
   날짜/문구/호텔정보 → 사진 밖 흰 영역
   ========================================================= */

.hero {
  min-height: 820px !important;
  padding: 0 28px !important;
  position: relative;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.72) 5%,
      rgba(255,255,255,.16) 12%,
      rgba(255,255,255,0) 19%,
      rgba(255,255,255,0) 72%,
      rgba(255,255,255,.08) 77%,
      rgba(255,255,255,.32) 83%,
      rgba(255,255,255,.68) 91%,
      rgba(255,255,255,1) 100%
    ),
    url("images/hero-bg.jpg") center center / cover no-repeat !important;
}

.hero-copy {
  min-height: 820px !important;
}

/* 상단 텍스트 위치 유지 */
.script-title {
  top: 38px !important;
}

.names {
  top: 137px !important;
}

/* 사진 밖 예식 정보 */
.hero-details {
  position: relative;
  margin-top: -2px;
  padding: 10px 28px 50px;
  background: #ffffff;
  text-align: center;
  color: var(--ink);
}

.hero-details::before {
  content: "";
  display: block;
  width: 52px;
  margin: 0 auto 24px;
  border-top: 1px solid rgba(145,173,190,.48);
}

.hero-details .hero-date {
  margin: 0 0 16px !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hero-details p:not(.hero-date) {
  margin: 4px 0;
  font-size: 12px;
  line-height: 1.8;
  color: #4f5a60;
}

/* 기존 hero 안 하단 정보 관련 스타일은 더 이상 사용하지 않음 */
.hero .hero-info {
  display: none !important;
}

@media (max-width: 480px) {
  .hero {
    min-height: 820px !important;
    padding: 0 24px !important;
  }

  .hero-copy {
    min-height: 820px !important;
  }

  .script-title {
    top: 34px !important;
  }

  .names {
    top: 132px !important;
  }

  .hero-details {
    padding: 8px 24px 46px;
  }
}


/* =========================================================
   Guestbook
   ========================================================= */

.guestbook-guide {
  margin: -10px 0 30px;
  color: #747d82;
  font-size: 11px;
  line-height: 1.8;
}

.guestbook-form {
  padding: 22px 18px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: left;
}

.guestbook-field {
  display: block;
  margin-bottom: 17px;
}

.guestbook-field > span {
  display: block;
  margin-bottom: 8px;
  color: #72a9cf;
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .16em;
}

.guestbook-field input,
.guestbook-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #dfe6ea;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: "Gowun Batang", "Noto Serif KR", serif;
  font-size: 12px;
  line-height: 1.8;
  resize: none;
}

.guestbook-field input {
  height: 39px;
}

.guestbook-field textarea {
  min-height: 92px;
  padding: 8px 0;
}

.guestbook-field input:focus,
.guestbook-field textarea:focus {
  border-bottom-color: #8dbde0;
}

.guestbook-field input::placeholder,
.guestbook-field textarea::placeholder {
  color: #aab1b5;
}

.guestbook-form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 5px;
}

.guestbook-form-bottom small {
  color: #a0a7ab;
  font-family: Arial, sans-serif;
  font-size: 9px;
}

.guestbook-submit,
.guestbook-more {
  border: 1px solid #b9d5e8;
  background: #fff;
  color: #5286aa;
  cursor: pointer;
}

.guestbook-submit {
  padding: 11px 14px;
  font-size: 10px;
}

.guestbook-submit:disabled {
  cursor: default;
  opacity: .45;
}

.guestbook-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.guestbook-status {
  margin: 18px 0 0;
  padding: 11px 12px;
  border: 1px solid #dbe6ed;
  background: #f8fbfd;
  color: #68767e;
  font-size: 10px;
  line-height: 1.6;
}

.guestbook-list {
  margin-top: 28px;
  text-align: left;
}

.guestbook-card {
  padding: 19px 3px 18px;
  border-bottom: 1px solid #e5eaed;
}

.guestbook-card:first-child {
  border-top: 1px solid #e5eaed;
}

.guestbook-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.guestbook-card-name {
  color: #27343b;
  font-size: 12px;
  font-weight: 700;
}

.guestbook-card-date {
  flex: 0 0 auto;
  color: #a1a9ad;
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .02em;
}

.guestbook-card-message {
  margin: 0;
  color: #576168;
  font-size: 11px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.guestbook-empty {
  padding: 30px 0 10px;
  color: #9aa3a8;
  font-size: 10px;
  line-height: 1.9;
  text-align: center;
}

.guestbook-more {
  width: 100%;
  margin-top: 19px;
  padding: 12px 10px;
  font-size: 10px;
}



/* =========================================================
   하트 커서
   PC : 실제 마우스 커서를 하늘색 하트로 표시
   모바일 : 터치 위치 바로 위에 하트가 따라다님
   ========================================================= */

/* 32x32 SVG 하트 커서 */
@media (hover: hover) and (pointer: fine) {
  html,
  body,
  a,
  button,
  input,
  textarea,
  summary,
  details,
  .gallery-slider,
  .gallery-nav,
  .guestbook-submit,
  .guestbook-more,
  .map-btn,
  .share-btn {
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 28.2C14.8 27.1 5 20.3 2.8 13.7C1 8.4 4.1 4 9 4C12 4 14.4 5.6 16 7.9C17.6 5.6 20 4 23 4C27.9 4 31 8.4 29.2 13.7C27 20.3 17.2 27.1 16 28.2Z' fill='%2389bce7'/%3E%3C/svg%3E")
      16 16,
      auto;
  }
}

/* 모바일에서 손가락을 따라오는 하트 */
.mobile-heart-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  color: var(--blue);
  font-family: Arial, "Apple Symbols", sans-serif;
  font-size: 27px;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -100%) scale(.78);
  transition:
    opacity .14s ease,
    transform .14s ease;
  filter: drop-shadow(0 1px 2px rgba(65, 130, 180, .12));
  will-change: left, top, opacity, transform;
}

.mobile-heart-cursor.show {
  opacity: .94;
  transform: translate(-50%, -118%) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .mobile-heart-cursor {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-heart-cursor {
    transition: none;
  }
}


/* 계좌번호 부모 역할 라벨 */
.account-info {
  min-width: 0;
}

.account-role {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.account-info b,
.account-info small {
  display: block;
}


/* =========================================================
   FINAL RESPONSIVE HERO FIX
   기기 화면 비율과 상관없이 메인 이미지 1080x1620(2:3) 구도 유지
   ========================================================= */

/* 메인 이미지 영역 자체를 정확히 2:3으로 고정 */
.hero {
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden;

  /* 원본 2:3 비율과 hero가 동일하므로 cover여도 크롭되지 않음 */
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.70) 4%,
      rgba(255,255,255,.14) 11%,
      rgba(255,255,255,0) 18%,
      rgba(255,255,255,0) 84%,
      rgba(255,255,255,.10) 89%,
      rgba(255,255,255,.42) 94%,
      rgba(255,255,255,1) 100%
    ),
    url("images/hero-bg.jpg") center center / cover no-repeat !important;
}

/* 텍스트 레이어도 사진 크기에 맞춰 자동으로 줄어듦 */
.hero-copy {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* 영문 타이틀: 사진 위쪽 여백에 고정 */
.script-title {
  top: 4.6% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  font-size: clamp(37px, 10.7vw, 47px) !important;
}

/* 신랑/신부 이름: 화면 크기에 비례해 같은 위치 유지 */
.names {
  top: 16.6% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.names h1 {
  font-size: clamp(23px, 6.5vw, 28px) !important;
}

.names .and,
.and {
  font-size: clamp(20px, 5.6vw, 24px) !important;
}

/* 사진 안쪽에 예식정보가 남아있더라도 표시하지 않음 */
.hero .hero-info {
  display: none !important;
}

/* 사진 밖 날짜/장소 영역과 자연스럽게 붙임 */
.hero-details {
  margin-top: 0 !important;
  padding-top: 8px !important;
}

/* 아주 작은 폰에서도 비율/구도 유지 */
@media (max-width: 360px) {
  .script-title {
    top: 4.2% !important;
  }

  .names {
    top: 16.1% !important;
  }
}


/* =========================================================
   PRETTY MAP
   화이트/라이트그레이 지도 + 하늘색 하트 핀
   ========================================================= */

.real-map.pretty-map {
  width: 100%;
  height: 275px;
  margin: 28px 0 13px;
  overflow: hidden;
  border: 1px solid #dbe7ee;
  border-radius: 10px;
  background: #f7fafb;
  box-shadow: 0 6px 20px rgba(75, 115, 140, .07);
}

.pretty-map .leaflet-control-zoom {
  border: 0 !important;
  box-shadow: 0 3px 12px rgba(65, 90, 105, .10) !important;
}

.pretty-map .leaflet-control-zoom a {
  width: 31px !important;
  height: 31px !important;
  line-height: 29px !important;
  border: 0 !important;
  border-bottom: 1px solid #e5edf2 !important;
  background: rgba(255,255,255,.95) !important;
  color: #6f9fbe !important;
  font-family: Arial, sans-serif !important;
  font-size: 17px !important;
}

.pretty-map .leaflet-control-zoom a:last-child {
  border-bottom: 0 !important;
}

.pretty-map .leaflet-control-attribution {
  padding: 2px 5px !important;
  background: rgba(255,255,255,.78) !important;
  color: #a0aab0 !important;
  font-size: 7px !important;
}

.pretty-map .leaflet-control-attribution a {
  color: #8da3b0 !important;
}

.wedding-map-marker {
  background: transparent;
  border: 0;
}

.wedding-map-pin {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #89bce7;
  border: 3px solid rgba(255,255,255,.97);
  box-shadow: 0 4px 14px rgba(64, 123, 165, .26);
}

.wedding-map-pin::after {
  content: "♥";
  transform: rotate(45deg);
  color: #fff;
  font-family: Arial, "Apple Symbols", sans-serif;
  font-size: 17px;
  line-height: 1;
}

.pretty-map .leaflet-tooltip.hotel-label {
  padding: 7px 10px;
  border: 1px solid #d9e8f1;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 3px 12px rgba(55, 90, 110, .10);
  color: #40545f;
  font-family: "Gowun Batang", "Noto Serif KR", serif;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.pretty-map .leaflet-tooltip.hotel-label::before {
  border-top-color: #fff;
}

.location-section .button-row {
  gap: 9px;
}

.location-section .map-btn {
  border-color: #c6ddea;
  border-radius: 7px;
  transition: background .2s ease, border-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .location-section .map-btn:hover {
    background: #f5fbff;
    border-color: #9ec7df;
  }
}

@media (max-width: 480px) {
  .real-map.pretty-map {
    height: 255px;
    border-radius: 8px;
  }
}


/* =========================================================
   FINAL NAME POSITION FIX
   영어 타이틀과 이름 사이 간격 늘리기 + 이름 살짝 축소
   ========================================================= */

.names {
  top: 18.5% !important;
}

.names h1 {
  font-size: clamp(21px, 5.8vw, 25px) !important;
}

.names .and,
.and {
  font-size: clamp(18px, 5.0vw, 22px) !important;
}

/* 아주 작은 폰도 동일한 간격 유지 */
@media (max-width: 360px) {
  .names {
    top: 18.0% !important;
  }

  .names h1 {
    font-size: 21px !important;
  }
}