/* =====================================================
   11/21 한국 결혼예배 · 하례회 청첩장
   화이트 + 피치·핑크 파스텔 (PLAN.md §3)
   폰 너비 360~430px 기준 · 가로 스크롤 없음
   ===================================================== */

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* 팔레트 — PLAN §3 */
  --bg:          #fffdfb;
  --surface:     #ffffff;
  --blush:       #fbe4e1;
  --peach:       #f6c6b5;
  --rose:        #e8a5a0;
  --rose-deep:   #d98f8a;   /* 버튼 텍스트·hover 등 조금 진한 톤 */
  --text:        #3d3236;
  --text-light:  #6f6166;   /* 보조 텍스트 — 흰 배경 대비 5.8:1 (2026-10-30 가독성 보강, 이전 #9a8a8f) */
  --rose-text:   #b8655f;   /* 로즈 계열 '글자' 전용 — 대비 4.1:1. 테두리·버튼·장식은 --rose/--rose-deep 유지 */
  --border:      #f1dcd8;
  --rose-dim:    rgba(232, 165, 160, 0.18);
  --shadow:      rgba(217, 143, 138, 0.14);

  --font-display: 'Cormorant Garamond', serif;
  --font-serif:   'Noto Serif KR', serif;
  --font-sans:    'Noto Sans KR', sans-serif;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: 16px;
}

/* hidden 속성이 컴포넌트의 display 선언에 덮이지 않도록 보장 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  max-width: 430px;
  margin: 0 auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ===== 미확정 값 표시 (task_5·6 에서 채운다) ===== */
mark.todo {
  display: inline-block;
  background: #fff3a8;
  color: #5a4a00;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.86em;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: 4px;
  letter-spacing: 0;
  vertical-align: baseline;
}

/* ===== Music Button ===== */
.music-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(232, 165, 160, 0.55);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.music-btn:hover { background: rgba(255, 255, 255, 0.92); }
.music-btn.playing { border-color: var(--rose); }

.music-icon {
  font-size: 17px;
  color: var(--rose-text);
  animation: spin 5s linear infinite;
  display: block;
  will-change: transform;
}

.music-btn.playing .music-icon       { animation-play-state: running; }
.music-btn:not(.playing) .music-icon { animation-play-state: paused; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Hero ===== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--bg);
}

/* 실제 사진이 들어왔을 때 (index.html 의 주석 처리된 .hero-img) */
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: kenBurns 20s ease-out forwards;
  will-change: transform;
  transform-origin: center center;
}

@keyframes kenBurns {
  from { transform: scale(1.1); }
  to   { transform: scale(1.0); }
}

/* 아래에서 올라오는 흰 그라데이션 — 어두운 오버레이 대신 "밝게" */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 253, 251, 0.0) 0%,
    rgba(255, 253, 251, 0.0) 38%,
    rgba(255, 253, 251, 0.62) 64%,
    rgba(255, 253, 251, 0.97) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 44px 28px 56px;
  color: var(--text);
  width: 100%;
  text-align: center;
}

/* Hero stagger */
.hero-label {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--rose-text);
  /* 흰 드레스 위에서도 읽히도록 옅은 흰 글로우 */
  text-shadow: 0 0 10px rgba(255, 253, 251, 0.95), 0 0 2px rgba(255, 253, 251, 0.9);
  opacity: 0;
  margin-bottom: 18px;
  animation: heroUp 1s var(--ease-out) 0.5s forwards;
}

.hero-names {
  font-family: var(--font-display);
  /* 폰 너비(360~430px)에서 이름이 글자 중간에서 꺾이지 않도록 — 한 줄 고정 + 뷰포트 비례 크기 */
  font-size: clamp(28px, 8.4vw, 40px);
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
  word-break: keep-all;
  margin-bottom: 18px;
  opacity: 0;
  line-height: 1.2;
  animation: heroUp 1.1s var(--ease-out) 1.0s forwards;
}

.heart {
  color: var(--rose-text);
  margin: 0 6px;
  font-size: 0.75em;
  vertical-align: 0.1em;
}

.hero-line {
  width: 36px;
  height: 1px;
  background: var(--rose);
  margin: 0 auto 16px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  animation: heroLine 0.9s var(--ease-out) 1.6s forwards;
}

.hero-date {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 7px;
  opacity: 0;
  animation: heroUp 1s var(--ease-out) 2.0s forwards;
}

.hero-place {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--text-light);
  margin-top: 6px;
  opacity: 0;
  animation: heroUp 1s var(--ease-out) 2.3s forwards;
}

@keyframes heroUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroLine {
  to { opacity: 0.8; transform: scaleX(1); }
}

/* ===== Reveal on scroll (10/10 에서 가져옴 — script.js 의 IntersectionObserver 와 짝) ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 섹션 안 요소/문장이 한 호흡씩 떠오르는 등장 효과.
   transition-delay 는 script.js 가 문서 순서대로 계산해 넣는다 */
.fx,
.fx-line {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}

.fx.visible,
.fx-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 문장 줄 단위 등장용 — 줄바꿈 대신 블록으로 쌓는다 */
.fx-line { display: block; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .fx, .fx-line,
  .countdown-item, .gallery-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-label, .hero-names, .hero-line, .hero-date, .hero-place {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-img, .music-icon { animation: none !important; }
}

/* ===== Container / Section ===== */
.container { padding: 0 0 24px; }

.section {
  padding: 56px var(--gutter) 60px;
  border-bottom: 1px solid var(--border);
}

.section:last-child { border-bottom: none; }

.section-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--rose-text);
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 5px;
  text-align: center;
  color: var(--text);
  margin-bottom: 34px;
}

/* 타이틀 아래 헤어라인 — 섹션 등장 시 좌우로 그어진다 */
.section-title::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  margin: 16px auto 0;
  background: linear-gradient(to right, transparent, var(--rose), transparent);
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out) 0.6s;
}

.reveal.visible .section-title::after { transform: scaleX(1); }

/* ===== Divider ===== */
.divider {
  text-align: center;
  margin: 24px 0;
  color: var(--rose-text);
  font-size: 12px;
  letter-spacing: 10px;
}

/* 인사말 첫 divider — ✦ 아래로 라인이 그어지며 내려온다 */
.divider-drop {
  position: relative;
  padding-bottom: 46px;
  letter-spacing: 0;
}

.divider-drop::after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -0.5px;
  top: 26px;
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, var(--rose), transparent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.6s var(--ease-out) 0.5s;
}

.reveal.visible .divider-drop::after { transform: scaleY(1); }

/* ===== Greeting ===== */
/* 인사말 안의 강조 한 줄 (처음 만난 날) */
.greeting-accent {
  color: var(--rose-text);
  font-style: italic;
  margin: 2px 0;
}

.greeting { text-align: center; }

.greeting-verse {
  margin-bottom: 30px;
  padding: 0 8px;
}

.greeting-verse p {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  line-height: 2.2;
  color: var(--text);
  word-break: keep-all;
}

.greeting-verse .fx-line:first-child::before,
.greeting-verse .fx-line:last-child::after {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: normal;
  line-height: 0;
  color: var(--rose-text);
  opacity: 0.6;
  vertical-align: -0.15em;
}

.greeting-verse .fx-line:first-child::before { content: '\201C'; margin-right: 3px; }
.greeting-verse .fx-line:last-child::after  { content: '\201D'; margin-left: 3px; }

.greeting-verse cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--rose-text);
}

.greeting-verse p:last-child { margin-top: 8px; font-style: normal; line-height: 1.6; }

.greeting-text {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 2.3;
  color: var(--text);
  margin-bottom: 22px;
  word-break: keep-all;
}

.greeting-text + .greeting-family { margin-top: 10px; }

.greeting-family {
  font-size: 12.5px;
  color: var(--text-light);
  line-height: 2.5;
  letter-spacing: 1.5px;
}

.greeting-family strong {
  color: var(--text);
  font-weight: 400;
}

/* ===== Countdown ===== */
.countdown {
  background: linear-gradient(to bottom, var(--bg), var(--blush) 50%, var(--bg));
  text-align: center;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 6px;
  box-shadow: 0 8px 24px var(--shadow);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.countdown-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.countdown-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
  display: block;
  font-variant-numeric: tabular-nums;
}

.countdown-num.flip-out { animation: flipOut 0.15s ease forwards; }
.countdown-num.flip-in  { animation: flipIn 0.22s var(--ease-out) forwards; }

@keyframes flipOut {
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes flipIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.countdown-label {
  font-size: 10px;
  color: var(--text-light);
  letter-spacing: 2.5px;
}

.countdown-note {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--text-light);
  letter-spacing: 0.5px;
}

/* ===== Info card (예배·식사 안내 / 오시는 길 공용) ===== */
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 22px;
  margin-bottom: 20px;
  box-shadow: 0 12px 36px var(--shadow);
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.info-label {
  flex-shrink: 0;
  width: 64px;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--rose-text);
  line-height: 1.5;
}

.info-row > div { min-width: 0; }

.info-main {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 3px;
  word-break: keep-all;
}

.info-main-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--text-light);
  margin-left: 4px;
}

.info-sub {
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-light);
  word-break: keep-all;
}

.info-tel {
  color: var(--rose-text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.info-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

/* ===== Timeline (예배 → 식사) ===== */
.timeline {
  list-style: none;
  position: relative;
  padding: 6px 0 0 6px;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 26px;
}

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

/* 점과 점을 잇는 세로선 */
.timeline-item::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: -4px;
  width: 1px;
  background: linear-gradient(to bottom, var(--rose), var(--border));
}

.timeline-item:last-child::before { display: none; }

.timeline-dot {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--rose);
  box-shadow: 0 0 0 4px var(--rose-dim);
}

.timeline-body { min-width: 0; }

.timeline-time {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--rose-text);
  margin-bottom: 2px;
}

.timeline-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 2px;
}

.timeline-desc {
  font-size: 12.5px;
  color: var(--text-light);
  word-break: keep-all;
}

/* ===== Gallery (플레이스홀더) ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.55s ease, transform 0.55s ease;
  /* 사진이 없는 동안의 그라데이션 박스. 각 칸마다 각도를 조금씩 달리한다 */
  background: linear-gradient(var(--ph-angle, 150deg), var(--blush) 0%, var(--peach) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-item:nth-child(2) { --ph-angle: 200deg; }
.gallery-item:nth-child(3) { --ph-angle: 120deg; }
.gallery-item:nth-child(4) { --ph-angle: 240deg; }
.gallery-item:nth-child(5) { --ph-angle: 160deg; }
.gallery-item:nth-child(6) { --ph-angle: 300deg; }

.gallery-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gallery-ph {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(217, 143, 138, 0.4);
}

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

/* 안내 섹션 하단의 짧은 주의 문구 (화환 사양 등) */
.info-note {
  margin-top: 18px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: var(--text-light);
}

.gallery-note {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
}

/* ===== Directions ===== */
.directions-address {
  text-align: center;
  margin-bottom: 18px;
}

.map-embed {
  position: relative;
  width: 100%;
  height: 240px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--blush);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


.map-btns {
  display: flex;
  gap: 8px;
}

.map-btn {
  flex: 1;
  display: block;
  text-align: center;
  padding: 13px 6px;
  border-radius: 12px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.5px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px var(--shadow);
  transition: opacity 0.2s, transform 0.15s, border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.map-btn:hover  { border-color: var(--rose); }
.map-btn:active { transform: scale(0.97); opacity: 0.85; }


.map-btns-note {
  margin: 10px 0 22px;
  text-align: center;
  font-size: 12px;
}

/* ===== RSVP 섹션 + 모달 ===== */
.rsvp { text-align: center; }

.rsvp-lead {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 2;
  color: var(--text);
  margin-bottom: 22px;
  word-break: keep-all;
}

.rsvp-open {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--peach), var(--rose));
  color: #fff;
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(217, 143, 138, 0.35);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.rsvp-open:hover  { filter: brightness(1.03); }
.rsvp-open:active { transform: scale(0.98); box-shadow: 0 6px 16px rgba(217, 143, 138, 0.3); }

.rsvp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(61, 50, 54, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: rsvpFade 0.25s ease;
}

@keyframes rsvpFade { from { opacity: 0; } to { opacity: 1; } }

.rsvp-modal {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 24px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(61, 50, 54, 0.18);
  animation: rsvpUp 0.35s var(--ease-out);
}

@keyframes rsvpUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rsvp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-light);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}

.rsvp-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--rose-text);
  margin-bottom: 6px;
}

.rsvp-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.rsvp-desc {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-light);
  margin-bottom: 12px;
}

.rsvp-desc strong {
  font-weight: 400;
  color: var(--rose-text);
}

.rsvp-desc-last {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.rsvp-field {
  text-align: left;
  margin-bottom: 16px;
}

.rsvp-label {
  display: block;
  font-size: 12px;
  color: var(--text-light);
  letter-spacing: 0.5px;
  margin-bottom: 7px;
}

.rsvp-label em { font-style: normal; opacity: 0.7; }

.rsvp-choice { display: flex; gap: 8px; }

.rsvp-opt {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.rsvp-opt.active {
  border-color: var(--rose);
  background: var(--rose-dim);
  color: var(--text);
  font-weight: 400;
}

.rsvp-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: 16px;            /* iOS 자동 확대 방지 (16px 미만이면 포커스 시 줌) */
  font-weight: 300;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}

.rsvp-input:focus { outline: none; border-color: var(--rose); background: var(--surface); }
.rsvp-input::placeholder { color: var(--text-light); opacity: 0.55; }
.rsvp-textarea { resize: none; line-height: 1.6; }

.rsvp-stepper {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rsvp-step {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.rsvp-step:hover:not(:disabled) { border-color: var(--rose); color: var(--rose-text); }
.rsvp-step:disabled { opacity: 0.35; cursor: default; }

.rsvp-count {
  font-family: var(--font-display);
  font-size: 20px;
  min-width: 26px;
  text-align: center;
}

.rsvp-hint {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 6px;
}

.rsvp-submit {
  width: 100%;
  padding: 14px;
  margin-top: 6px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--peach), var(--rose));
  color: #fff;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(217, 143, 138, 0.3);
  transition: opacity 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.rsvp-submit:active { transform: scale(0.98); }
.rsvp-submit:disabled { opacity: 0.5; cursor: default; }

.rsvp-privacy {
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-light);
  margin-top: 12px;
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 44px var(--gutter) 64px;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--text-light);
  line-height: 2.2;
  background: linear-gradient(to bottom, var(--bg), var(--blush));
}

.footer-ornament {
  display: block;
  color: var(--rose-text);
  font-size: 11px;
  margin-bottom: 10px;
}

.footer-names {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text);
  letter-spacing: 4px;
}

.footer-date {
  font-size: 13px;
  letter-spacing: 5px;
  color: var(--rose-text);
}

.footer-note {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 1px;
  margin-top: 8px;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: rgba(61, 50, 54, 0.92);
  color: #fff;
  padding: 10px 22px;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 10000;
}

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

/* ===== 아주 좁은 화면 (≤360px) 미세 조정 ===== */
@media (max-width: 360px) {
  .hero-names { font-size: 34px; letter-spacing: 3px; }
  .countdown-num { font-size: 26px; }
  .info-label { width: 56px; letter-spacing: 2px; }
  .map-btn { font-size: 12px; padding: 12px 4px; }
}

/* ===== directions (task_6 추가) ===== */
.map-btns-note { color: var(--text-light); }

.addr-copy {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.addr-copy:hover  { border-color: var(--rose); color: var(--rose-text); }
.addr-copy:active { transform: scale(0.96); }