/* 청첩장 디자인 5종. 모든 규칙은 html[data-template="…"] 아래에만 적용되어 관리·로그인 화면과 섞이지 않습니다.
 * 서버가 게시된 디자인을 <html data-template> 에 넣어 보내므로 첫 그림부터 해당 디자인으로 그려집니다.
 * 사진은 모두 직사각형 프레임입니다(아치·타원·원형 마스크 없음). 올린 사진에 색 보정 필터를 넣지 않습니다.
 * 서체는 SUIT 이고, 모던 화이트만 영문에 EB Garamond 를 씁니다. 이름 굵기·자간: 가든 500·0.02em, 블러시 400·0.04em, 화이트 400·0.01em, 필름 500·0.01em, 네이비 500·0.03em.
 * 본문·안내·날짜는 400, 버튼·구역 제목은 500 이고, 작은 영문 문구의 자간은 0.08em 을 넘기지 않습니다.
 *
 *   original-garden  최초 시안: 아이보리·정원 그린, 잎 장식, 중앙 이름. PC 왼쪽 사진·오른쪽 초대 정보
 *   romantic-blush   연분홍 편지 조판, 가는 이중 테두리 사진. PC 왼쪽 편지·오른쪽 사진
 *   modern-white     승인 재디자인: 흰 종이 여백, 작은 영문 EB Garamond·담백한 한글 이름, 가운데 한 열(PC 680px 종이)
 *   vintage-film     종이 베이지, 인화지 여백 사진과 사진 스트립, 작은 날짜. PC 스트립·사진·안내 3단
 *   navy-classic     네이비 바탕, 샴페인 라인 사진, 중앙 이름. 입력 영역은 밝은 바탕으로 대비 확보 */

/* 잎 장식은 오리지널 가든에만 씁니다. */
html[data-template]:not([data-template="original-garden"]) .sprig { display: none; }

/* =====================================================================
 * 1. 오리지널 가든 — 최초 시안(아이보리 #f7f4ec, 그린 #294b3b)의 배치를 그대로, 사진만 직사각형
 * ===================================================================== */
html[data-template="original-garden"] {
  --wall: #f7f4ec; --white: #fcfbf7; --mat: #eceee4;
  --ink: #36443b; --ink-2: #4c584e; --ink-3: #5c6659;
  --rule: #d5d9ca; --rule-strong: #aab6a0;
  --accent: #294b3b; --accent-tint: #dce4d8;
}
[data-template="original-garden"] .invite {
  --sec-max: 1000px; --t-title-color: #294b3b;
  --t-radius: 4px; --t-btn-border: #aab6a0; --t-btn-text: #294b3b; --t-solid-bg: #294b3b; --t-solid-text: #ffffff;
  --t-field-bg: #fcfbf7; --t-field-border: #c3c9b6; --t-photo-bg: #e1e5d9; --t-bar-bg: rgba(248, 246, 240, 0.97);
  --t-sun: #94584c; --g-cols: 2; --g-gap: 9px; --g-ratio: 4 / 5;
}
[data-template="original-garden"] .hero { align-items: center; padding: 30px 28px 48px; text-align: center; }
[data-template="original-garden"] .hero-sprig { width: 58px; height: 37px; margin: 0 auto; color: #6f8a6a; }
[data-template="original-garden"] .hero-kicker { margin: 8px 0 15px; color: #5f6d55; font: 400 15px/1.4 var(--sans); letter-spacing: 0.04em; }
[data-template="original-garden"] .hero-kicker .k-garden { display: inline; }
[data-template="original-garden"] .hero-names { color: var(--ink); font-size: 30px; line-height: 1.4; letter-spacing: 0.02em; white-space: nowrap; }
[data-template="original-garden"] .hero-and { margin: 0 12px; color: #7d8b70; font: 400 22px/1 var(--sans); letter-spacing: 0; }
[data-template="original-garden"] .hero-latin { display: none; }
[data-template="original-garden"] .hero-plate { width: 100%; max-width: 430px; margin: 26px 0; }
/* 원본 시안처럼 첫 화면에 이름·사진·날짜·장소가 함께 보이도록 사진 높이를 화면의 52% 안으로 둡니다(자르지 않음). */
[data-template="original-garden"] .hero-frame img { max-height: 52vh; max-height: 52svh; }
/* 시안의 사진 안쪽 가는 선(아치 → 직사각형) */
[data-template="original-garden"] .hero-frame::after {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, 0.62); pointer-events: none;
}
[data-template="original-garden"] .hero-date { color: var(--ink); font: 400 18px/1.4 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
[data-template="original-garden"] .hero-time { margin-top: 4px; color: var(--ink-3); font-size: 14px; }
[data-template="original-garden"] .hero-venue { margin-top: 7px; font-size: 16px; }

[data-template="original-garden"] .sec { padding: 58px 0; border-top: 1px solid var(--rule); text-align: center; }
[data-template="original-garden"] .sec-title { font-size: 24px; letter-spacing: 0.02em; }
[data-template="original-garden"] .lead { font-size: 14px; color: var(--ink-3); }
[data-template="original-garden"] .invite-body { font-size: 16px; line-height: 1.9; }
[data-template="original-garden"] .family { font-size: 14px; }
[data-template="original-garden"] .calendar { max-width: 310px; }
[data-template="original-garden"] .plates { max-width: 900px; }
[data-template="original-garden"] .plate-mat::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(255, 255, 255, 0.42); pointer-events: none; }
[data-template="original-garden"] .plate .plate-cap { position: absolute; left: 0; right: 0; bottom: 10px; justify-content: center; margin: 0; pointer-events: none; }
[data-template="original-garden"] .plate-no { display: none; }
[data-template="original-garden"] .loc { max-width: 880px; margin: 0 auto; text-align: left; }
[data-template="original-garden"] .loc-info { text-align: center; }
[data-template="original-garden"] .sec-rsvp { width: min(100%, var(--sec-max)); padding-inline: var(--edge); background: #eef0e6; }
[data-template="original-garden"] .sec-closing { padding: 70px 24px 60px; border-top: 0; }
[data-template="original-garden"] .sec-closing .sprig { width: 86px; height: 54px; color: #6f8a6a; }

@media (min-width: 768px) {
  [data-template="original-garden"] .hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr;
    grid-template-areas: "plate head" "plate info"; column-gap: 64px;
    max-width: 1120px; min-height: 690px; margin: 0 auto; padding: 52px 36px;
  }
  [data-template="original-garden"] .hero-plate { grid-area: plate; align-self: center; max-width: none; margin: 0; }
  [data-template="original-garden"] .hero-head { grid-area: head; align-self: end; }
  [data-template="original-garden"] .hero-info { grid-area: info; align-self: start; padding-top: 30px; }
  [data-template="original-garden"] .hero-sprig { width: 86px; height: 54px; }
  [data-template="original-garden"] .hero-kicker { margin: 14px 0 22px; font-size: 17px; }
  [data-template="original-garden"] .hero-names { font-size: 42px; }
  [data-template="original-garden"] .hero-and { margin: 0 16px; font-size: 30px; }
  [data-template="original-garden"] .hero-frame img { max-height: min(80vh, 640px); }
  [data-template="original-garden"] .hero-frame::after { inset: 18px; }
  [data-template="original-garden"] .hero-date { font-size: 20px; }
  [data-template="original-garden"] .hero-time { margin-top: 8px; }
  [data-template="original-garden"] .hero-venue { font-size: 18px; }
  [data-template="original-garden"] .sec { padding: 80px 0; }
  [data-template="original-garden"] .sec-title { font-size: 26px; }
  [data-template="original-garden"] .lead { font-size: 15px; }
  [data-template="original-garden"] .invite-body { font-size: 17px; }
  [data-template="original-garden"] .family { font-size: 15px; }
  [data-template="original-garden"] .calendar { max-width: 342px; }
  [data-template="original-garden"] .invite { --g-cols: 3; --g-gap: 12px; }
  [data-template="original-garden"] .plate-mat::after { inset: 12px; }
  [data-template="original-garden"] .loc-info { text-align: left; }
  [data-template="original-garden"] .sec-rsvp { padding-inline: 28px; }
  [data-template="original-garden"] .sec-closing { padding: 70px 24px 80px; }
}
@media (min-width: 1300px) {
  [data-template="original-garden"] .invite { --g-cols: 4; }
}

/* =====================================================================
 * 2. 로맨틱 블러시 — 연분홍 편지 조판. 이름을 세로로 쌓고 사진은 가는 이중 테두리
 * ===================================================================== */
html[data-template="romantic-blush"] {
  --wall: #fbf4f2; --white: #fffaf9; --mat: #f5e5e3;
  --ink: #4a343b; --ink-2: #5a434a; --ink-3: #6b545b;
  --rule: #ead6d6; --rule-strong: #c49ca3;
  --accent: #8b4e59; --accent-tint: #f3e1e3;
}
[data-template="romantic-blush"] .invite {
  --sec-max: 760px; --t-title-color: #8b4e59;
  --t-radius: 999px; --t-btn-border: #c49ca3; --t-btn-text: #7a4350; --t-solid-bg: #8b4e59; --t-solid-text: #ffffff;
  --t-field-bg: #ffffff; --t-field-border: #dcc1c5; --t-photo-bg: #f3e4e2; --t-bar-bg: rgba(251, 244, 242, 0.97);
  --t-sun: #8b4e59; --g-cols: 2; --g-gap: 14px; --g-ratio: 3 / 4;
}
[data-template="romantic-blush"] .hero { align-items: center; padding: 42px var(--edge) 46px; text-align: center; }
[data-template="romantic-blush"] .hero-kicker { color: #8b4e59; font: 500 12px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
[data-template="romantic-blush"] .hero-kicker .k-blush { display: inline; }
[data-template="romantic-blush"] .hero-names { display: flex; flex-direction: column; align-items: center; margin-top: 20px; color: var(--ink); font-size: 30px; font-weight: 400; line-height: 1.4; letter-spacing: 0.04em; }
/* 마지막 글자 뒤 자간만큼 왼쪽을 띄워 이름이 가운데에 오게 합니다. */
[data-template="romantic-blush"] .hero-name { padding-left: 0.04em; }
[data-template="romantic-blush"] .hero-and { margin: 4px 0; color: #a0646f; font: 400 20px/1.2 var(--sans); letter-spacing: 0; }
[data-template="romantic-blush"] .hero-latin { margin-top: 14px; color: var(--ink-3); font: 400 14px/1.4 var(--sans); letter-spacing: 0.04em; }
[data-template="romantic-blush"] .hero-plate { width: 100%; margin: 32px 0 0; }
[data-template="romantic-blush"] .hero-frame { padding: 7px; border: 1px solid #b07f88; background: #fffaf9; }
[data-template="romantic-blush"] .hero-frame img { max-height: 58vh; max-height: 58svh; box-shadow: 0 0 0 1px rgba(139, 78, 89, 0.5); }
[data-template="romantic-blush"] .hero-info { margin-top: 28px; }
/* 편지의 가는 이중 줄 */
[data-template="romantic-blush"] .hero-info::before {
  content: ""; display: block; width: 96px; height: 5px; margin: 0 auto 22px;
  border-top: 1px solid #c49ca3; border-bottom: 1px solid #c49ca3;
}
[data-template="romantic-blush"] .hero-date { color: #8b4e59; font: 400 17px/1.4 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
[data-template="romantic-blush"] .hero-time { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
[data-template="romantic-blush"] .hero-venue { margin-top: 2px; font: 500 17px/1.6 var(--sans); }

[data-template="romantic-blush"] .sec { padding: 60px 0 56px; text-align: center; }
[data-template="romantic-blush"] .sec::before {
  content: ""; display: block; width: 48px; height: 5px; margin: 0 auto 26px;
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
}
[data-template="romantic-blush"] .sec-kicker { display: block; margin-bottom: 6px; color: #8b4e59; font: 500 12px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
[data-template="romantic-blush"] .sec-title { font-size: 23px; letter-spacing: 0.04em; }
[data-template="romantic-blush"] .lead { font-size: 14px; }
[data-template="romantic-blush"] .invite-body { max-width: 520px; font-size: 16px; line-height: 1.9; }
[data-template="romantic-blush"] .family { padding-top: 0; border-top: 0; }
[data-template="romantic-blush"] .cal-month { color: #8b4e59; font-size: 24px; }
[data-template="romantic-blush"] .plates { max-width: 900px; }
[data-template="romantic-blush"] .plate-mat { padding: 5px; border: 1px solid #d6b3b9; background: #fffaf9; }
[data-template="romantic-blush"] .plate-mat img { box-shadow: 0 0 0 1px rgba(139, 78, 89, 0.28); }
[data-template="romantic-blush"] .plate .plate-cap { justify-content: center; gap: 8px; color: var(--ink-3); font-size: 12px; }
[data-template="romantic-blush"] .loc { text-align: center; }
[data-template="romantic-blush"] .form-card { padding: 24px 20px; border: 1px solid var(--rule); background: #fffaf9; }
[data-template="romantic-blush"] .close-latin { display: block; margin-top: 4px; color: var(--ink-3); font: 400 14px/1.4 var(--sans); letter-spacing: 0.04em; }

@media (min-width: 768px) {
  [data-template="romantic-blush"] .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr;
    grid-template-areas: "head plate" "info plate"; column-gap: clamp(48px, 7vw, 104px);
    max-width: 1120px; margin: 0 auto; padding: 64px 40px 72px;
  }
  [data-template="romantic-blush"] .hero-head { grid-area: head; align-self: end; }
  [data-template="romantic-blush"] .hero-info { grid-area: info; align-self: start; }
  [data-template="romantic-blush"] .hero-plate { grid-area: plate; align-self: center; margin: 0; }
  [data-template="romantic-blush"] .hero-names { font-size: 42px; }
  [data-template="romantic-blush"] .hero-and { font-size: 26px; }
  [data-template="romantic-blush"] .hero-frame { padding: 10px; }
  [data-template="romantic-blush"] .hero-frame img { max-height: min(78vh, 660px); }
  [data-template="romantic-blush"] .hero-date { font-size: 19px; }
  [data-template="romantic-blush"] .sec { padding: 72px 0 64px; }
  [data-template="romantic-blush"] .sec-title { font-size: 26px; }
  [data-template="romantic-blush"] .invite { --g-cols: 3; --g-gap: 26px; }
  [data-template="romantic-blush"] .loc { text-align: left; }
}
/* 넓은 PC: 초대 편지와 예식 날짜를 나란히 둡니다. */
@media (min-width: 1024px) {
  [data-template="romantic-blush"] .book { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-template="romantic-blush"] .book > * { grid-column: 1 / -1; }
  [data-template="romantic-blush"] .book > .sec-invite { grid-column: 1; width: min(100% - 40px, 520px); margin-right: 0; }
  [data-template="romantic-blush"] .book > .sec-date { grid-column: 2; width: min(100% - 40px, 520px); margin-left: 0; border-left: 1px solid var(--rule); padding-left: 48px; }
  [data-template="romantic-blush"] .book > .sec-invite::before, [data-template="romantic-blush"] .book > .sec-date::before { margin-top: 0; }
}

/* =====================================================================
 * 3. 모던 화이트 — 승인 재디자인(2026-11-12). 흰 종이 여백, 작은 영문 EB Garamond, 담백한 SUIT 한글, 가운데 한 열.
 *    휴대폰은 화면 폭 한 열, PC 는 680px 종이 한 장(바깥 바탕 #f3f1ed). 갤러리·약도·안내·입력은 PC 에서 520px 폭이고,
 *    표지 사진은 세로 300px, 정사각·가로 360px 폭입니다. 표지·갤러리 칸의 중심 위치는 사진마다 관리자가 정할 수 있습니다.
 *    영문(이름·일시·장소·구역 영문 표시·달력 숫자·맺음)만 EB Garamond, 한글 이름(SUIT 400)·본문·입력·버튼은 SUIT 입니다.
 *    표지 순서: 영문 이름 → 대표 사진 → 영문 일시·장소 → 한글 이름 → 한글 일시·장소. 사진이 없으면 사진 칸만 빠집니다.
 * ===================================================================== */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
html[data-template="modern-white"] {
  --wall: #fdfcfa; --white: #ffffff; --mat: #f3f1ed;
  --ink: #2a2826; --ink-2: #57524c; --ink-3: #6b665f;
  --rule: #e2ded7; --rule-strong: #c9c3ba;
  --accent: #2a2826; --accent-tint: #f3f1ed;
  --serif-en: "EB Garamond", "Times New Roman", serif;
  background: var(--wall);
}
[data-template="modern-white"] .invite {
  --sec-max: 680px; --t-title-color: #2a2826;
  --t-radius: 2px; --t-btn-border: #c9c3ba; --t-btn-text: #2a2826; --t-solid-bg: #2a2826; --t-solid-text: #fdfcfa;
  --t-field-bg: #ffffff; --t-field-border: #8f897f; --t-photo-bg: #e2ded7; --t-bar-bg: rgba(253, 252, 250, 0.97);
  --t-sun: #2a2826; --g-cols: 3; --g-gap: 4px; --g-ratio: 306 / 263;
  --head-gap: 24px; --form-max: 480px; --mw-pad: 24px; --mw-gap: 96px;
  background: var(--wall); letter-spacing: 0;
}
[data-template="modern-white"] [lang="en"] { font-family: var(--serif-en); }
[data-template="modern-white"] .book { max-width: 680px; margin: 0 auto; padding: 0 var(--mw-pad) 72px; background: var(--wall); }

/* 표지 */
[data-template="modern-white"] .hero { display: flex; flex-direction: column; align-items: center; padding: 56px 0 8px; text-align: center; }
[data-template="modern-white"] .hero-head, [data-template="modern-white"] .hero-info { display: contents; }
[data-template="modern-white"] .hero-kicker, [data-template="modern-white"] .hero-whenko,
[data-template="modern-white"] .hero-strip { display: none !important; }
[data-template="modern-white"] .hero-latin { order: 1; margin: 0; color: var(--ink); font: 400 16px/1.4 var(--serif-en); letter-spacing: 0.1em; text-transform: uppercase; }
[data-template="modern-white"] .amp-sym { display: none; }
[data-template="modern-white"] .amp-word { display: inline; }
[data-template="modern-white"] .amp { margin: 0 0.3em; font-size: 0.8em; letter-spacing: 0.08em; }
[data-template="modern-white"] .hero-plate { order: 2; width: 100%; margin-top: 36px; }
[data-template="modern-white"] .hero-frame { display: block; width: min(62%, 300px); max-width: var(--hero-w, 100%); margin: 0 auto; background: var(--t-photo-bg); }
/* 표지 중심 위치: 관리자가 사진마다 정한 값(--mw-cover-pos, invite.js 가 넣음)이 없으면 50% 30% 입니다. */
[data-template="modern-white"] .hero-frame img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 2 / 3; object-fit: cover; object-position: var(--mw-cover-pos, 50% 30%); }
[data-template="modern-white"] .hero[data-orient="square"] .hero-frame { width: min(78%, 360px); }
[data-template="modern-white"] .hero[data-orient="square"] .hero-frame img { aspect-ratio: 1 / 1; }
/* 가로 사진도 정사각과 같은 폭 상한(본문의 78%, 최대 360px)이고 비율만 3:2 입니다. 본문 전체 폭으로 키우지 않습니다. */
[data-template="modern-white"] .hero[data-orient="landscape"] .hero-frame { width: min(78%, 360px); }
[data-template="modern-white"] .hero[data-orient="landscape"] .hero-frame img { aspect-ratio: 3 / 2; }
[data-template="modern-white"] .hero-date { order: 3; margin: 28px 0 0; padding: 0; color: var(--ink); font: 400 14px/1.5 var(--serif-en); letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: lining-nums; }
[data-template="modern-white"] .cover-when .bar { display: inline-block; width: 1px; height: 0.9em; margin: 0 0.8em; vertical-align: -0.08em; background: var(--ink-3); }
[data-template="modern-white"] .hero-place { order: 4; margin: 4px 0 0; color: var(--ink); font: 400 14px/1.5 var(--serif-en); letter-spacing: 0.08em; text-transform: uppercase; }
[data-template="modern-white"] .hero-names {
  order: 5; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 12px; margin: 52px 0 0;
  color: var(--ink); font: 400 21px/1.4 var(--sans); letter-spacing: 0.01em;
}
[data-template="modern-white"] .hero-name { font-weight: 400; }
[data-template="modern-white"] .hero-and > [aria-hidden] { display: none; }
[data-template="modern-white"] .and-ko { display: inline; color: var(--ink-3); font-size: 13px; letter-spacing: 0; }
[data-template="modern-white"] .hero-time { order: 6; margin: 14px 0 0; padding: 0; color: var(--ink-2); font-size: 15px; line-height: 1.8; }
[data-template="modern-white"] .hero-venue { order: 7; margin: 0; padding: 0; color: var(--ink-2); font-size: 15px; font-weight: 400; line-height: 1.8; }
html[data-photos="0"][data-template="modern-white"] .hero-names { margin-top: 40px; }

/* 구역 공통: 작은 영문 표시와 16px 제목을 가운데에 둡니다. */
[data-template="modern-white"] .sec { width: auto; margin: 0; padding-top: var(--mw-gap); text-align: center; }
[data-template="modern-white"] .sec-kicker { display: block; color: var(--ink-3); font: 400 13px/1.4 var(--serif-en); letter-spacing: 0.1em; text-transform: uppercase; }
[data-template="modern-white"] .sec-title { margin: 6px 0 var(--head-gap); color: var(--ink); font: 500 16px/1.5 var(--sans); letter-spacing: 0; }
[data-template="modern-white"] .sec-lead { margin: -12px auto 24px; color: var(--ink-2); font-size: 15px; }
[data-template="modern-white"] .lead { margin: -12px auto 24px; color: var(--ink-2); font-size: 15px; }

/* 초대 글·혼주 */
[data-template="modern-white"] .invite-body { max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 2; }
[data-template="modern-white"] .family { margin-top: 40px; padding-top: 0; border-top: 0; gap: 10px 0; font-size: 15px; line-height: 1.7; }
[data-template="modern-white"] .family-line .rel { padding: 0 12px 0 1px; color: var(--ink-2); font-size: 14px; }
[data-template="modern-white"] .child { color: var(--ink); font: 400 17px/1.6 var(--sans); letter-spacing: 0.01em; }
[data-template="modern-white"] #contact-open { margin-top: 28px; }

/* 예식 일시·달력: 한글 일시 → 달력 → 남은 날 → 일정 저장 */
[data-template="modern-white"] .sec-date { display: flex; flex-direction: column; align-items: center; }
[data-template="modern-white"] .cal-when { order: 1; margin: 0; font-size: 16px; line-height: 1.8; }
[data-template="modern-white"] .cal-sub { order: 2; color: var(--ink-2); font-size: 15px; line-height: 1.8; }
[data-template="modern-white"] .calendar { order: 3; width: 100%; max-width: 294px; margin: 32px auto 0; }
[data-template="modern-white"] .dday { order: 4; margin-top: 18px; color: var(--ink-2); font-size: 14px; }
[data-template="modern-white"] #ics-link { order: 5; margin-top: 28px; }
[data-template="modern-white"] .cal-month { margin-bottom: 14px; font: 400 14px/1.4 var(--serif-en); letter-spacing: 0.1em; text-transform: uppercase; }
[data-template="modern-white"] .cal-grid { gap: 0; font: 400 16px/1 var(--serif-en); font-variant-numeric: lining-nums tabular-nums; }
[data-template="modern-white"] .cal-grid span { height: 40px; }
[data-template="modern-white"] .cal-grid .wk { height: 32px; color: var(--ink-3); font: 400 13px/1 var(--sans); }
[data-template="modern-white"] .cal-grid .day { color: var(--wall); }
/* 예식 날짜 칸 표시는 검은 원(사진이 아닌 날짜 표시) */
[data-template="modern-white"] .cal-grid .day::before { width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--ink); }

/* 사진: 3열 직사각 칸. 휴대폰은 처음 6장 뒤 ‘더 보기’, PC 는 모두 표시합니다(공통 규칙 invite.css). */
[data-template="modern-white"] .gallery-foot { margin-top: 28px; }
[data-template="modern-white"] .plate .plate-cap { display: none; }
/* 갤러리 칸은 승인 미리보기와 같은 306:263 직사각형입니다. 칸 중심 위치는 사진마다 정한 값(--mw-thumb-pos)이 없으면 50% 32% 입니다.
 * 크게 보기는 원본 비율 그대로입니다. */
[data-template="modern-white"] .plate-mat img { object-position: var(--mw-thumb-pos, 50% 32%); }

/* 오시는 길: 장소·주소 → (라비두스일 때) 약도(누르면 크게 보기) → 교통 안내. 외부 지도·주소 복사 단추는 없습니다. */
[data-template="modern-white"] .loc { display: flex; flex-direction: column; gap: 0; text-align: center; }
[data-template="modern-white"] .loc-info { display: contents; }
/* 장소명·주소는 가운데(공통 PC 규칙의 왼쪽 정렬을 덮습니다). 교통 안내는 왼쪽입니다. */
[data-template="modern-white"] .route, [data-template="modern-white"] .route li { text-align: left; }
[data-template="modern-white"] .loc-info .venue { order: 1; margin: 0; font: 500 17px/1.5 var(--sans); }
[data-template="modern-white"] .loc-info .addr { order: 2; margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
[data-template="modern-white"] .map-fig { order: 3; margin-top: 30px; }
[data-template="modern-white"] .route { order: 4; margin-top: 30px; border-top: 1px solid var(--rule); }
[data-template="modern-white"] .route li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--rule); }
[data-template="modern-white"] .route h4 { margin: 0; font: 500 15px/1.75 var(--sans); }
[data-template="modern-white"] .route p { color: var(--ink-2); font-size: 15px; line-height: 1.75; }

/* 참석 여부·방명록 입력 */
[data-template="modern-white"] .form { gap: 20px; }
[data-template="modern-white"] .form .field > span, [data-template="modern-white"] .form legend { color: var(--ink); font-size: 14px; font-weight: 500; }
[data-template="modern-white"] .choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
[data-template="modern-white"] .choice label { position: relative; display: block; min-height: 46px; }
[data-template="modern-white"] .choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
[data-template="modern-white"] .choice span {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 8px;
  border: 1px solid var(--t-field-border); border-radius: 2px; background: #ffffff; font-size: 15px; text-align: center;
}
[data-template="modern-white"] .choice input:checked + span { border-color: var(--ink); background: var(--mat); font-weight: 500; }
[data-template="modern-white"] .choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
[data-template="modern-white"] .choice input:disabled + span { opacity: 0.55; }
[data-template="modern-white"] .notice-warn { border-color: var(--rule); background: #ffffff; color: var(--ink-2); }
[data-template="modern-white"] .sent { border-color: var(--ink); background: transparent; color: var(--ink); }
[data-template="modern-white"] .sent-title { color: var(--ink); }
[data-template="modern-white"] .sent .hint { color: var(--ink-3); }
[data-template="modern-white"] .sent .btn { --t-btn-text: #2a2826; --t-btn-border: #c9c3ba; }
[data-template="modern-white"] .guest-total { color: var(--ink-3); }
[data-template="modern-white"] .note-meta { font-size: 13px; }

/* 마음 전하실 곳: 신랑 측·신부 측 모두 펼침 */
[data-template="modern-white"] .accounts { max-width: var(--form-max); gap: 28px; }
[data-template="modern-white"] .acc-side { padding: 0 0 8px; border-bottom-color: var(--rule-strong); }
[data-template="modern-white"] .acc { padding: 12px 0; }

/* 맺음: 영문 이름과 날짜 */
[data-template="modern-white"] .close-title, [data-template="modern-white"] .close-names { display: none; }
[data-template="modern-white"] .close-latin { display: block; color: var(--ink); font: 400 16px/1.4 var(--serif-en); letter-spacing: 0.1em; text-transform: uppercase; }
[data-template="modern-white"] .close-date { margin-top: 6px; color: var(--ink-2); font: 400 14px/1.4 var(--serif-en); letter-spacing: 0.08em; font-variant-numeric: lining-nums; }

/* 사진 크게 보기: 화면 전체 종이 바탕 */
[data-template="modern-white"] .dlg { border-color: var(--rule); background: var(--wall); }
[data-template="modern-white"] .dlg::backdrop { background: rgba(42, 40, 38, 0.6); }
[data-template="modern-white"] .viewer {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); border: 0;
}
[data-template="modern-white"] .viewer[open] { display: flex; flex-direction: column; }
[data-template="modern-white"] .viewer::backdrop { background: var(--wall); }
[data-template="modern-white"] .viewer-fig { flex: 1; min-height: 0; align-content: center; padding: 0; background: transparent; }
[data-template="modern-white"] .viewer-fig img { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
[data-template="modern-white"] #viewer-count { font: 400 15px/1.2 var(--serif-en); letter-spacing: 0.06em; font-variant-numeric: lining-nums tabular-nums; }
[data-template="modern-white"] .viewer-nav { justify-content: center; gap: 12px; }
[data-template="modern-white"] .viewer-nav .btn { min-width: 112px; }

@media (min-width: 768px) {
  html[data-template="modern-white"] { background: var(--mat); }
  [data-template="modern-white"] .invite { --mw-pad: 48px; --mw-gap: 120px; --form-max: 520px; background: var(--mat); font-size: 16px; }
  [data-template="modern-white"] .book { margin-top: 32px; padding-bottom: 96px; }
  [data-template="modern-white"] .hero { padding-top: 72px; }
  [data-template="modern-white"] .hero-latin { font-size: 17px; }
  [data-template="modern-white"] .hero-plate { margin-top: 44px; }
  [data-template="modern-white"] .hero-frame { width: 300px; }
  [data-template="modern-white"] .hero[data-orient="square"] .hero-frame { width: 360px; }
  [data-template="modern-white"] .hero[data-orient="landscape"] .hero-frame { width: 360px; }
  [data-template="modern-white"] .hero-names { font-size: 22px; }
  [data-template="modern-white"] .invite-body { font-size: 16px; }
  [data-template="modern-white"] .calendar { max-width: 336px; }
  [data-template="modern-white"] .plates, [data-template="modern-white"] .loc, [data-template="modern-white"] .form-card,
  [data-template="modern-white"] .guest-wrap, [data-template="modern-white"] .accounts { max-width: 520px; margin-left: auto; margin-right: auto; }
  [data-template="modern-white"] .route li { grid-template-columns: 96px minmax(0, 1fr); }
  [data-template="modern-white"] .viewer-nav { gap: 16px; }
}

/* =====================================================================
 * 4. 빈티지 필름 — 종이 베이지, 인화지 여백이 있는 사진과 사진 스트립, 작은 날짜(사진에 필터 없음)
 * ===================================================================== */
html[data-template="vintage-film"] {
  --wall: #f1e7d6; --white: #f8f1e5; --mat: #e8dcc6;
  --ink: #332d26; --ink-2: #463c31; --ink-3: #5a4e41;
  --rule: #d8c8ad; --rule-strong: #9c8466;
  --accent: #63472f; --accent-tint: #e8dcc6;
}
[data-template="vintage-film"] .invite {
  --sec-max: 980px; --t-title-color: #63472f;
  --t-radius: 2px; --t-btn-border: #8a6c4f; --t-btn-text: #5a4029; --t-solid-bg: #63472f; --t-solid-text: #fbf7ef;
  --t-field-bg: #fbf7ef; --t-field-border: #c4ae8e; --t-photo-bg: #e3d6bf; --t-bar-bg: rgba(241, 231, 214, 0.97);
  --t-sun: #8a4630; --g-cols: 2; --g-gap: 16px; --g-ratio: 4 / 5;
}
[data-template="vintage-film"] .hero { align-items: center; padding: 30px var(--edge) 40px; text-align: center; }
[data-template="vintage-film"] .hero-kicker { color: var(--ink-3); font: 400 15px/1.4 var(--sans); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
[data-template="vintage-film"] .hero-kicker .k-film { display: inline; }
[data-template="vintage-film"] .hero-names { margin-top: 10px; color: var(--ink); font-size: 28px; line-height: 1.45; letter-spacing: 0.01em; white-space: nowrap; }
[data-template="vintage-film"] .hero-and { margin: 0 10px; color: #63472f; font: 400 20px/1 var(--sans); letter-spacing: 0; }
[data-template="vintage-film"] .hero-latin { display: none; }
[data-template="vintage-film"] .hero-plate { width: 100%; margin: 24px 0 0; }
/* 인화지: 사진 둘레의 흰 여백과 아래쪽 넓은 여백에 작은 글씨 */
[data-template="vintage-film"] .hero-frame { padding: 10px 10px 42px; background: #fbf7ef; box-shadow: 0 1px 2px rgba(51, 45, 38, 0.2), 0 10px 24px rgba(51, 45, 38, 0.12); }
[data-template="vintage-film"] .hero-frame img { max-height: 56vh; max-height: 56svh; }
[data-template="vintage-film"] .print-cap {
  display: block; position: absolute; left: 12px; right: 12px; bottom: 13px;
  color: var(--ink-2); font: 400 13px/1.2 var(--sans); letter-spacing: 0.03em; text-align: right; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums;
}
/* 사진 스트립: 갈색 띠 위에 대표 사진 다음 3장을 작게.
 * 칸은 정사각형 직사각형 프레임이고 사진은 자르지 않고 칸 안에 통째로 넣습니다(가로·세로 사진 모두 얼굴이 잘리지 않음). 남는 곳은 어두운 칸 바탕입니다. */
[data-template="vintage-film"] .hero-strip { display: flex; gap: 6px; width: 100%; max-width: 340px; margin-top: 18px; padding: 8px 8px 6px; background: #3d3026; }
[data-template="vintage-film"] .strip-frame { display: grid; flex: 1 1 0; align-content: start; gap: 4px; min-width: 0; }
[data-template="vintage-film"] .strip-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: 50% 50%; background: #2a2019; }
[data-template="vintage-film"] .strip-no { color: #e6d8bf; font: 400 11px/1 var(--sans); letter-spacing: 0.04em; text-align: left; font-variant-numeric: tabular-nums; }
[data-template="vintage-film"] .hero-info { margin-top: 24px; }
[data-template="vintage-film"] .hero-date { color: #63472f; font: 400 17px/1.4 var(--sans); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
[data-template="vintage-film"] .hero-time { margin-top: 6px; color: var(--ink-2); font-size: 14px; }
[data-template="vintage-film"] .hero-venue { margin-top: 2px; font: 500 17px/1.6 var(--sans); }

[data-template="vintage-film"] .book { counter-reset: sec; }
[data-template="vintage-film"] .sec { counter-increment: sec; padding: 56px 0; border-top: 1px solid var(--rule-strong); text-align: left; }
[data-template="vintage-film"] .sec-kicker { display: block; margin-bottom: 10px; color: var(--ink-3); font: 400 14px/1.4 var(--sans); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
/* 구분 막대는 SUIT 에 있는 가로 막대(U+2015)입니다(SUIT 에는 em dash 가 없습니다). */
[data-template="vintage-film"] .sec-kicker::before { content: "No. " counter(sec, decimal-leading-zero) "\00a0\00a0\2015\00a0\00a0"; }
[data-template="vintage-film"] .sec-title { font-size: 24px; letter-spacing: 0.01em; }
[data-template="vintage-film"] .lead { margin-left: 0; }
[data-template="vintage-film"] .invite-body { font-size: 16px; line-height: 1.9; }
[data-template="vintage-film"] .calendar { padding: 18px 16px 14px; border: 1px solid var(--rule); background: #f8f1e5; }
[data-template="vintage-film"] .cal-month { color: #63472f; font-size: 22px; letter-spacing: 0.03em; }
[data-template="vintage-film"] .plate { padding: 7px 7px 6px; background: #fbf7ef; box-shadow: 0 1px 2px rgba(51, 45, 38, 0.18), 0 6px 14px rgba(51, 45, 38, 0.1); }
[data-template="vintage-film"] .plate .plate-cap { margin-top: 6px; color: var(--ink-3); font-size: 12px; }
[data-template="vintage-film"] .plate-no::before { content: "No. "; }
[data-template="vintage-film"] .form-card { margin: 0; padding: 22px 18px; border: 1px solid var(--rule); background: #f8f1e5; }
[data-template="vintage-film"] .guest-wrap { margin: 0; }
[data-template="vintage-film"] .accounts { margin: 0; }
[data-template="vintage-film"] .sec-closing { text-align: center; }
[data-template="vintage-film"] .close-latin { display: block; margin-top: 4px; color: var(--ink-3); font: 400 14px/1.4 var(--sans); letter-spacing: 0.04em; }

@media (min-width: 768px) {
  /* 스트립 열은 태블릿에서 112px, 넓은 PC 에서 최대 152px 까지 넓혀 정사각형 칸의 사진이 너무 작지 않게 합니다. */
  [data-template="vintage-film"] .hero {
    display: grid; grid-template-columns: clamp(112px, 10.5vw, 152px) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr;
    grid-template-areas: "strip plate head" "strip plate info"; column-gap: 44px;
    max-width: 1180px; margin: 0 auto; padding: 56px 40px 64px; text-align: left;
  }
  [data-template="vintage-film"] .hero-strip { grid-area: strip; flex-direction: column; align-self: center; width: 100%; max-width: none; margin: 0; padding: 8px 8px 4px; }
  [data-template="vintage-film"] .strip-frame { flex: 0 0 auto; }
  [data-template="vintage-film"] .hero-strip[hidden] { display: none; }
  [data-template="vintage-film"] .hero-plate { grid-area: plate; align-self: center; margin: 0; }
  [data-template="vintage-film"] .hero-frame { padding: 14px 14px 56px; }
  [data-template="vintage-film"] .hero-frame img { max-height: min(76vh, 640px); }
  [data-template="vintage-film"] .print-cap { left: 18px; right: 18px; bottom: 19px; font-size: 15px; }
  [data-template="vintage-film"] .hero-head { grid-area: head; align-self: end; padding-bottom: 22px; border-bottom: 1px solid var(--rule-strong); }
  [data-template="vintage-film"] .hero-names { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 40px; line-height: 1.3; }
  [data-template="vintage-film"] .hero-and { margin: 0; font-size: 26px; }
  [data-template="vintage-film"] .hero-info { grid-area: info; align-self: start; margin: 0; padding-top: 22px; }
  [data-template="vintage-film"] .sec { padding: 72px 0; }
  [data-template="vintage-film"] .sec-title { font-size: 26px; }
  [data-template="vintage-film"] .invite { --g-cols: 3; --g-gap: 26px; }
}

/* =====================================================================
 * 5. 네이비 클래식 — 네이비 바탕, 아이보리 글, 샴페인 라인. 표지·구역을 가운데 정렬
 * ===================================================================== */
html[data-template="navy-classic"] {
  --wall: #17293b; --white: #1e3348; --mat: #22394f;
  --ink: #f5efe3; --ink-2: #e6ddcc; --ink-3: #d2c7b4;
  --rule: rgba(199, 176, 135, 0.4); --rule-strong: #c7b087;
  --accent: #c7b087; --accent-tint: #2a425a;
  --danger: #f3a896; --danger-tint: #3b2c33;
}
[data-template="navy-classic"] .invite {
  --sec-max: 860px; --t-title-color: #f5efe3;
  --t-radius: 0px; --t-btn-border: #c7b087; --t-btn-text: #f5efe3; --t-solid-bg: #c7b087; --t-solid-text: #17293b;
  --t-field-bg: #ffffff; --t-field-border: #8a94a1; --t-photo-bg: #22394f; --t-bar-bg: rgba(23, 41, 59, 0.97);
  --t-sun: #e9bfa6; --g-cols: 2; --g-gap: 10px; --g-ratio: 3 / 4;
}
[data-template="navy-classic"] .hero { align-items: center; padding: 46px var(--edge) 48px; text-align: center; }
[data-template="navy-classic"] .hero-kicker { color: #c7b087; font: 500 12px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
[data-template="navy-classic"] .hero-kicker .k-navy { display: inline; }
[data-template="navy-classic"] .hero-names { margin-top: 18px; color: #f5efe3; font-size: 30px; line-height: 1.45; letter-spacing: 0.03em; white-space: nowrap; }
[data-template="navy-classic"] .hero-and { margin: 0 12px; color: #c7b087; font: 400 22px/1 var(--sans); letter-spacing: 0; }
[data-template="navy-classic"] .hero-latin { margin-top: 8px; color: var(--ink-3); font: 400 14px/1.4 var(--sans); letter-spacing: 0.04em; }
/* 가운데 세로 샴페인 선 */
[data-template="navy-classic"] .hero-head::after { content: ""; display: block; width: 1px; height: 32px; margin: 22px auto 0; background: #c7b087; }
[data-template="navy-classic"] .hero-plate { width: 100%; margin: 22px 0 0; }
[data-template="navy-classic"] .hero-frame { padding: 9px; border: 1px solid #c7b087; background: transparent; }
[data-template="navy-classic"] .hero-frame img { max-height: 58vh; max-height: 58svh; }
[data-template="navy-classic"] .hero-info { margin-top: 28px; }
[data-template="navy-classic"] .hero-date { color: #c7b087; font: 400 18px/1.4 var(--sans); letter-spacing: 0; text-transform: uppercase; font-variant-numeric: tabular-nums; }
[data-template="navy-classic"] .hero-time { margin-top: 6px; color: var(--ink-2); font-size: 15px; }
[data-template="navy-classic"] .hero-venue { margin-top: 2px; font: 500 18px/1.6 var(--sans); }

[data-template="navy-classic"] .sec { padding: 64px 0 60px; text-align: center; }
[data-template="navy-classic"] .sec::before { content: ""; display: block; width: 40px; height: 1px; margin: 0 auto 26px; background: #c7b087; }
[data-template="navy-classic"] .sec-kicker { display: block; margin-bottom: 8px; color: #c7b087; font: 500 12px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
[data-template="navy-classic"] .sec-title { font-size: 24px; letter-spacing: 0.03em; }
[data-template="navy-classic"] .lead { color: var(--ink-2); }
[data-template="navy-classic"] .invite-body { max-width: 540px; font-size: 16px; line-height: 1.9; }
[data-template="navy-classic"] .family-line .rel { color: var(--ink-3); }
[data-template="navy-classic"] .cal-month { color: #c7b087; }
[data-template="navy-classic"] .plates { max-width: 860px; }
[data-template="navy-classic"] .plate-mat { padding: 4px; border: 1px solid rgba(199, 176, 135, 0.7); background: transparent; }
[data-template="navy-classic"] .plate .plate-cap { justify-content: center; gap: 8px; color: var(--ink-3); font-size: 12px; }
[data-template="navy-classic"] .plate-no { color: #c7b087; }
[data-template="navy-classic"] .loc { text-align: center; }
[data-template="navy-classic"] .route p { color: var(--ink-2); }
/* 입력 영역은 밝은 바탕에 진한 글씨로 대비를 확보합니다. */
[data-template="navy-classic"] .form-card {
  --ink: #17293b; --ink-2: #2f4357; --ink-3: #44566a; --rule: #d6ccb9; --rule-strong: #6b7785;
  --white: #fbf8f1; --mat: #ece4d4; --danger: #973627; --danger-tint: #faf1ef;
  --t-btn-text: #17293b; --t-btn-border: #17293b; --t-solid-bg: #17293b; --t-solid-text: #f5efe3;
  padding: 26px 22px; background: #f5efe3; color: #17293b;
}
[data-template="navy-classic"] .form-card :focus-visible { outline-color: #17293b; }
[data-template="navy-classic"] .acc-group summary::after { color: #c7b087; }
[data-template="navy-classic"] .close-title { color: #f5efe3; }
[data-template="navy-classic"] .close-latin { display: block; margin-top: 4px; color: #c7b087; font: 400 14px/1.4 var(--sans); letter-spacing: 0.04em; }
[data-template="navy-classic"] .map-btn { border-color: rgba(199, 176, 135, 0.6); }

/* PC: 가운데 사진을 두고 왼쪽에 날짜, 오른쪽에 시각·장소를 대칭으로 둡니다. */
@media (min-width: 768px) {
  [data-template="navy-classic"] .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "head head head" "date plate time" "date plate venue" "act act act";
    column-gap: clamp(28px, 4vw, 56px); max-width: 1120px; margin: 0 auto; padding: 56px 40px 64px;
  }
  [data-template="navy-classic"] .hero-head { grid-area: head; }
  [data-template="navy-classic"] .hero-head::after { display: none; }
  [data-template="navy-classic"] .hero-names { font-size: 46px; }
  [data-template="navy-classic"] .hero-and { font-size: 32px; margin: 0 18px; }
  [data-template="navy-classic"] .hero-latin { font-size: 16px; }
  [data-template="navy-classic"] .hero-plate { grid-area: plate; margin-top: 30px; }
  [data-template="navy-classic"] .hero-frame { padding: 12px; }
  [data-template="navy-classic"] .hero-frame img { max-height: min(62vh, 600px); }
  [data-template="navy-classic"] .hero-info { display: contents; }
  [data-template="navy-classic"] .hero-date { grid-area: date; align-self: center; justify-self: end; padding-right: 4px; font-size: 20px; text-align: right; }
  [data-template="navy-classic"] .hero-date::after { content: ""; display: block; width: 56px; height: 1px; margin: 14px 0 0 auto; background: #c7b087; }
  [data-template="navy-classic"] .hero-time { grid-area: time; align-self: end; justify-self: start; margin: 0; text-align: left; }
  [data-template="navy-classic"] .hero-venue { grid-area: venue; align-self: start; justify-self: start; margin: 0; font-size: 20px; text-align: left; }
  [data-template="navy-classic"] .hero-venue::before { content: ""; display: block; width: 56px; height: 1px; margin: 14px 0 12px; background: #c7b087; }
  [data-template="navy-classic"] .sec { padding: 80px 0 72px; }
  [data-template="navy-classic"] .sec-title { font-size: 26px; }
  [data-template="navy-classic"] .invite { --g-cols: 3; --g-gap: 18px; }
}

/* =====================================================================
 * 정렬 공통(5종): 이름·날짜·혼주가 있는 초대·예식 날짜·맺음 구역은 디자인과 상관없이 가운데입니다.
 * 모던 화이트·빈티지 필름의 나머지 구역은 왼쪽 시작선을 지키고, 그 안의 폼·목록은 invite.css 기준대로 왼쪽입니다.
 * ===================================================================== */
html[data-template] .sec-invite, html[data-template] .sec-date, html[data-template] .sec-closing { text-align: center; }

/* =====================================================================
 * 올린 사진이 없을 때의 표지(html[data-photos="0"]): 사진 칸·스트립을 빼고 가운데 한 열로 둡니다.
 * PC 는 내용 폭 720px·위아래 64px, 휴대폰은 위아래 40px·좌우 24px 이고, 사진 높이를 대신하는 최소 높이를 두지 않습니다.
 * 간격: 장식(잎·소제목) → 16px → 이름 → 24px → 날짜·시각·장소(줄 사이 8px).
 * 디자인마다 색·서체 역할·기존 장식(잎, 이중선, 샴페인 세로선, 모던의 가로줄)은 그대로 씁니다.
 * ===================================================================== */
html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero {
  display: flex; flex-direction: column; align-items: center; min-height: 0;
  max-width: none; margin: 0 auto; padding: 40px 24px; text-align: center;
}
html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero > * { align-self: center; width: 100%; max-width: 720px; margin-left: 0; margin-right: 0; }
html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero-head { margin-top: 0; padding: 0; border: 0; }
html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero-names { margin-top: 16px; }
html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero-info { display: block; margin-top: 24px; padding: 0; border: 0; text-align: center; }
/* 사진이 있을 때 PC 격자 칸에 맞추던 칸 정렬(justify-self·align-self)과 좌우 정렬을 풀어 한 축에 둡니다. */
html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero-info > * { justify-self: auto; align-self: auto; text-align: center; }
html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero-date { margin: 0; padding: 0; }
html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero-time, html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero-venue { margin: 8px 0 0; padding: 0; }

/* 오리지널 가든: 잎 → 소제목 → 이름 */
html[data-photos="0"][data-template="original-garden"] .hero-kicker { margin: 8px 0 0; }
html[data-photos="0"][data-template="original-garden"] .hero-names { font-size: 30px; }

/* 로맨틱 블러시: 소제목 → 세로로 쌓은 이름 → 영문 → 이중선 → 날짜 */
html[data-photos="0"][data-template="romantic-blush"] .hero-names { font-size: 30px; }
html[data-photos="0"][data-template="romantic-blush"] .hero-latin { margin-top: 12px; }
html[data-photos="0"][data-template="romantic-blush"] .hero-info::before { margin: 0 auto 16px; }


/* 빈티지 필름: 날짜 소제목 → 16px → 이름 → 24px → 정보 */
html[data-photos="0"][data-template="vintage-film"] .hero-names { white-space: nowrap; }

/* 네이비 클래식: 소제목 → 이름 → 영문 → 샴페인 세로선 → 날짜. PC 의 날짜 옆 가로선은 쓰지 않습니다. */
html[data-photos="0"][data-template="navy-classic"] .hero-names { font-size: 30px; }
html[data-photos="0"][data-template="navy-classic"] .hero-head::after { display: block; margin: 16px auto 0; }
html[data-photos="0"][data-template="navy-classic"] .hero-info { margin-top: 16px; }
html[data-photos="0"][data-template="navy-classic"] .hero-date::after, html[data-photos="0"][data-template="navy-classic"] .hero-venue::before { display: none; }

@media (min-width: 768px) {
  html[data-photos="0"][data-template]:not([data-template="modern-white"]) .hero { padding: 64px 40px; }
  html[data-photos="0"][data-template="original-garden"] .hero-names { font-size: 40px; }
  html[data-photos="0"][data-template="romantic-blush"] .hero-names { font-size: 40px; }
  html[data-photos="0"][data-template="vintage-film"] .hero-names { align-items: center; font-size: 40px; }
  html[data-photos="0"][data-template="navy-classic"] .hero-names { font-size: 40px; }
}