/* =========================================================
 * 청모파티 초대 페이지 스타일
 * 팔레트/서체는 기존 사이트와 동일한 계열(노을빛 블러시·라벤더·잉크)
 * ========================================================= */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-bg, #efe9e4);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.75;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* display 를 명시한 요소(.seg 등)에서도 hidden 속성이 항상 이기게 */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
input, select, textarea {
  font: inherit; color: inherit; width: 100%;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; background: #fff; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

/* ---------- design tokens ---------- */
:root {
  --bg: #fbf9f7;
  --bg-soft: #f4eeeb;
  --ink: #37333d;
  --ink-soft: #6f6876;
  --ink-faint: #9a939f;
  --line: #e5ddd8;
  --accent: #a8798a;
  --accent-deep: #7d5a68;
  --accent-soft: #f0e4e6;
  --gold: #c9a86a;
  --shadow: 0 10px 30px rgba(55, 45, 60, 0.10);
  --radius: 16px;
  --font-scale: 1;
  --col: 480px;
  --font-display: 'Gowun Batang', 'Noto Serif KR', serif;
  --font-body: 'Gowun Batang', 'Noto Serif KR', serif;
  --font-en: 'Cormorant Garamond', 'Gowun Batang', serif;
  --page-bg: #efe9e4;
  --title: var(--accent);   /* 큰제목 — 본문 네이비(#2c3e5d): 이전 딥 네이비(#1f2c44)보다 한 단계 밝게 */
}

/* ---------- 테마 프리셋 (관리자 → 디자인) ----------
   main.js applyTheme() 가 theme.palette / theme.font 값을
   html[data-palette] / html[data-font] 속성으로 옮겨 답니다. */

/* 블루 — 웨딩 사이트(soyeondoyoon.fun)의 porcelain 네이비와 같은 계열 */
html[data-palette="blue"] {
  --bg: #f7f8fa;
  --bg-soft: #edf1f5;
  --ink: #232a35;
  --ink-soft: #5b6371;
  --ink-faint: #8d95a3;
  --line: #dde3ea;
  --accent: #2c3e5d;
  --accent-deep: #1f2c44;
  --accent-soft: #e4e9f1;
  --gold: #8593ad;          /* 금색 포인트 → 스틸 블루 */
  --shadow: 0 10px 30px rgba(35, 42, 53, 0.10);
  --page-bg: #e7eaef;
}

/* 고딕 (맑은 고딕) — 윈도우 전용 글꼴이라, 폰·맥에서는 같은 계열의
   Noto Sans KR / Apple SD 산돌고딕네오로 대신 보입니다. */
html[data-font="gothic"] {
  --font-display: 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-body: 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-en: 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

/* ---------- layout ---------- */
.app {
  max-width: var(--col);
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 60px rgba(60, 50, 65, 0.18);
  overflow: clip;
  font-size: calc(1rem * var(--font-scale));
}

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 포스터 ----------
   문구는 이미지 안에 들어 있습니다. 오버레이·크롭 없이 원본 비율 그대로.
   aspect-ratio 는 로딩 전 자리 확보용(아래 내용이 점프하지 않게) — 이미지가
   뜨면 실제 비율이 우선합니다(auto). 로드가 끝나면 다른 섹션의 reveal 처럼
   부드럽게 나타납니다 (.is-loaded 는 main.js 가 붙입니다). */
.poster { display: block; background: var(--bg-soft); }
.poster img {
  display: block; width: 100%; height: auto;
  aspect-ratio: auto 889 / 1252;   /* A3 비율 (1778×2504 원본) */
  opacity: 0; transition: opacity 0.9s ease;
}
.poster img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .poster img { opacity: 1; transition: none; }
}

/* ---------- 사진 아래 안내 ---------- */
.intro { padding: 42px 26px 44px; text-align: center; }
.intro-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.1em; text-indent: 0.1em;
  color: var(--title);   /* 큰제목 색은 :root 의 --title 한 곳에서 */
}
.intro-venue { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; margin-top: 14px; }
.intro-venue .addr {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: 14.5px; color: var(--ink-soft); margin-top: 6px;
}
.intro-rule { width: 38px; height: 1px; background: var(--gold); margin: 20px auto; }
.intro-date {
  font-family: var(--font-en); font-size: 17px; letter-spacing: 0.16em;
  color: var(--accent-deep); font-variant-numeric: tabular-nums;
}

/* ---------- 떠 있는 섹션 바 ----------
   첫 포스터를 지나면 나타나고, 위로 되돌리면 다시 숨습니다. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  opacity: 0; pointer-events: none; transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nav.show { opacity: 1; pointer-events: auto; transform: none; }
.nav-inner {
  max-width: var(--col); margin: 0 auto;
  background: rgba(251, 249, 247, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(213, 203, 197, 0.75);
  box-shadow: 0 6px 18px rgba(60, 50, 65, 0.07);
}
.nav ul { display: flex; padding: 0 8px; }
.nav li { flex: 1; }
.nav a {
  display: block; text-align: center; padding: 16px 2px 14px;
  font-family: var(--font-en); font-size: 16px; letter-spacing: 0.04em;
  line-height: 24px;   /* 국문(15px)·영문(16px) 라벨의 줄상자를 통일 — 세로 정렬 유지 */
  color: var(--ink-soft); border-bottom: 2px solid transparent;
}
.nav a.ko { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
/* 드러냄표 — 글자 위의 강조 점 (nav 설정의 em: true) */
.nav a.em {
  -webkit-text-emphasis: filled dot;
  -webkit-text-emphasis-position: over;
  text-emphasis: filled dot;
  text-emphasis-position: over right;
}
.nav a.on { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 700; }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* ---------- 섹션 공통 ---------- */
.sec { padding: 56px 26px; border-top: 1px solid var(--line); scroll-margin-top: 56px; }
.sec-eyebrow {
  font-family: var(--font-en); font-size: 12px;
  letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--accent); text-align: center;
}
.sec-title {
  font-family: var(--font-display); font-size: 23px; font-weight: 700;
  text-align: center; margin-top: 12px; text-wrap: balance;
  color: var(--title);   /* 큰제목 색은 :root 의 --title 한 곳에서 */
}
.sec-lead { font-size: 15px; color: var(--ink-soft); text-align: center; margin-top: 12px; line-height: 1.8; }

/* 본문은 좌우 여백을 같게 두고 양쪽 정렬.
   Q&A 답변은 제외 — 짧은 문장이라 양쪽 정렬 시 단어 사이가 벌어져서
   왼쪽 정렬(자연스러운 오른쪽 끝)로 둡니다. */
.note p, .story-body p {
  text-align: justify; text-justify: auto; hanging-punctuation: allow-end;
}

/* ---------- 안내사항 ---------- */
.notes { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.note { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.note > div { padding-right: 38px; }   /* 왼쪽 번호 칸(26+12)과 같은 여백 → 본문이 가운데 옴 */
.note .n {
  font-family: var(--font-en); font-size: 15px; font-weight: 600;
  color: var(--accent); line-height: 1.5; padding-top: 1px;
  text-align: center; border-bottom: 1px solid var(--accent-soft);
}
.note p { font-size: 15.5px; line-height: 1.9; }
.note .sub { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }
.note .btn { margin-top: 12px; }

/* ---------- 버튼 ---------- */
.btn {
  display: block; width: 100%; text-align: center;
  font-family: var(--font-body); font-size: 15.5px;
  padding: 15px; border-radius: 12px; border: 0; cursor: pointer;
}
.btn-primary { background: var(--accent-deep); color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-sm { font-size: 13px; padding: 9px 14px; width: auto; display: inline-block; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Our Story ---------- */
.story-photo { margin: 26px -26px 0; aspect-ratio: 4 / 5; overflow: hidden; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.story-body { font-size: 15px; line-height: 1.95; color: var(--ink-soft); margin-top: 24px; }
.story-body p + p { margin-top: 14px; }

/* ---------- 파티 순서 ---------- */
.timeline { margin-top: 30px; position: relative; padding-left: 76px; }
.timeline::before { content: ""; position: absolute; left: 62px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.slot { position: relative; padding-bottom: 30px; }
.slot:last-child { padding-bottom: 0; }
.slot .t {
  position: absolute; left: -76px; top: 0; width: 52px; text-align: right;
  font-family: var(--font-en); font-size: 16.5px; letter-spacing: 0.04em;
  color: var(--accent-deep); font-variant-numeric: tabular-nums;
}
.slot::before {
  content: ""; position: absolute; left: -15px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.slot h4 { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.slot .where { font-family: var(--font-en); font-size: 13.5px; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 2px; }
.slot .desc { font-size: 14.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.8; }

/* ---------- 오시는 길 ---------- */
.loc-venue { font-family: var(--font-display); font-size: 17.5px; font-weight: 700; text-align: center; margin-top: 26px; }
.loc-address { font-size: 14.5px; color: var(--ink-soft); text-align: center; margin-top: 5px; }
.map-box { margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.map-canvas { position: relative; display: block; height: 200px; background: var(--bg-soft); }
.map-canvas iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-canvas .pin {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
.map-canvas .dot { font-size: 22px; }
.map-canvas .label {
  font-size: 13.5px; color: var(--ink-soft); background: rgba(255, 255, 255, 0.9);
  padding: 3px 11px; border-radius: 20px; border: 1px solid var(--line);
}
.map-actions { display: flex; border-top: 1px solid var(--line); position: relative; background: #fff; }
.map-actions a { flex: 1; text-align: center; padding: 14px 4px; font-size: 14px; color: var(--ink-soft); }
.map-actions a + a { border-left: 1px solid var(--line); }

/* ---------- Q&A ---------- */
.qgroup { margin-top: 30px; }
.qgroup-label {
  font-family: var(--font-en); font-size: 12px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.qgroup-label .ko { font-family: var(--font-body); letter-spacing: 0.04em; }
.qa { border-bottom: 1px solid var(--line); }
.qa .q {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  width: 100%; text-align: left;
  padding: 17px 0 16px; font-size: 15.5px;
  font-family: var(--font-display); font-weight: 700;
}
.qa .q .car { font-family: var(--font-en); color: var(--accent); font-size: 15px; flex: none; }
.qa .q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.qa .a { font-size: 14.5px; line-height: 1.9; color: var(--ink-soft); padding: 0 0 17px; }
.qa.shut .a { display: none; }

/* ---------- RSVP ---------- */
.rcards { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.rcard { border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; text-align: center; background: var(--bg-soft); }
.rcard.lead { background: #fff; border-color: var(--accent-soft); box-shadow: 0 6px 20px rgba(125, 90, 104, 0.07); }
.rcard .kind { font-family: var(--font-en); font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.rcard h4 { font-family: var(--font-display); font-size: 17.5px; font-weight: 700; margin-top: 8px; }
.rcard .when {
  font-family: var(--font-en); font-size: 14px; letter-spacing: 0.14em;
  color: var(--accent-deep); margin-top: 9px; font-variant-numeric: tabular-nums;
}
.rcard .where { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.rcard .asks { font-size: 12.5px; color: var(--ink-faint); margin-top: 12px; }
.rcard .goes { font-size: 12.5px; color: var(--ink-faint); margin-top: 11px; line-height: 1.7; }
.rcard .btn { margin-top: 14px; }

/* ---------- 푸터 ---------- */
.foot { padding: 34px 26px 40px; text-align: center; border-top: 1px solid var(--line); background: var(--bg-soft); }
.foot .site-link {
  display: inline-block; font-size: 14.5px; color: var(--accent-deep);
  border-bottom: 1px solid var(--accent-soft); padding-bottom: 3px; margin-bottom: 20px;
}
.foot .names { font-family: var(--font-en); font-size: 15px; letter-spacing: 0.3em; color: var(--ink-soft); }

/* ---------- 오버레이 / 시트 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(40, 33, 44, 0.5);
  display: none; align-items: flex-end; justify-content: center;
  padding: 0; overscroll-behavior: contain;
}
.overlay.open { display: flex; }
.sheet {
  position: relative; width: 100%; max-width: var(--col);
  background: var(--bg); border-radius: 20px 20px 0 0;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow-y: auto;
  animation: sheet-up 0.28s ease;
}
@keyframes sheet-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-close { position: absolute; top: 14px; right: 16px; font-size: 18px; color: var(--ink-faint); padding: 6px; }
.sheet-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; text-align: center; margin-bottom: 20px; }

.form-field { margin-bottom: 16px; }
.form-field > label { display: block; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 7px; }
.form-field .req { color: var(--accent); }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  flex: 1 1 auto; min-width: 84px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 10px;
  font-size: 14px; background: #fff; color: var(--ink-soft);
}
.seg button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.stepper { display: flex; align-items: center; gap: 18px; }
.stepper button {
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font-size: 18px; line-height: 1;
}
.stepper output { font-family: var(--font-en); font-size: 19px; min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }

/* 라벨 아래 작은 안내 (예: 동반자 안내) */
.field-hint { font-size: 12.5px; color: var(--ink-faint); margin: -4px 0 10px; }

/* 동반자가 있을 때의 메뉴별 개수 고르기 */
.menu-count-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px;
}
.menu-count-row .mc-label { font-size: 15px; }
.stepper-sm { gap: 12px; }
.stepper-sm button { width: 36px; height: 36px; font-size: 16px; }
.stepper-sm output { font-size: 17px; min-width: 24px; }

.rsvp-warn {
  font-size: 12.5px; color: var(--ink-faint); text-align: center;
  line-height: 1.7; margin: 4px 0 16px;
}
.consent { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; background: #fff; }
.consent-row { display: flex; align-items: center; gap: 9px; }
.consent-row input { width: auto; }
.consent-row label { font-size: 13px; flex: 1; }
.consent-toggle { font-size: 12px; color: var(--accent-deep); text-decoration: underline; }
.consent-detail { display: none; font-size: 12px; color: var(--ink-soft); line-height: 1.75; margin-top: 10px; white-space: pre-line; }
.consent.open .consent-detail { display: block; }

/* ---------- 토스트 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(12px);
  z-index: 90; background: rgba(40, 33, 44, 0.94); color: #fff;
  font-size: 14px; padding: 12px 20px; border-radius: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: calc(100% - 40px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%); }