/* ============ Fonts ============ */
/* Loaded from Google Fonts at runtime (requires the visitor's normal internet access). */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Gowun+Batang:wght@400;700&family=Noto+Serif+KR:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700;900&family=Gaegu:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Nanum+Myeongjo:wght@400;700;800&family=Nanum+Pen+Script&family=Song+Myung&family=Poor+Story&display=swap');

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

/* Smooth crossfade for the editor's live-preview DOM swap (see ONLY4U_PREVIEW_UPDATE in invite.js) —
   calmer than the browser's default snap-crossfade so re-renders feel less chaotic while typing. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: #3d332c;
  background: #faf5f6;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.muted { color: #9c8089; font-size: 13px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: all .15s ease;
  gap: 6px;
}
/* 클릭했을 때 눌린 느낌이 나도록 살짝 눌리는 애니메이션 — 특히 저장하기처럼 클릭 즉시
   disabled로 바뀌는 버튼은 브라우저 기본 :active가 제대로 안 보일 수 있어서, JS에서도
   .btn-pressed 클래스를 직접 붙여준다(아래 #save-btn 관련 JS, dashboard.js 참고). */
.btn:active, .btn.btn-pressed { transform: scale(.96); filter: brightness(.96); }
/* 저장 성공 시 버튼에서 짧게 한 번 튀는 확인 펄스 (dashboard.js saveInvitation 참고). */
@keyframes btnSavedPulse { 0% { transform: scale(.96); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
.btn.btn-saved-flash { animation: btnSavedPulse .5s ease; background: #6fa87a !important; }
.btn-primary { background: #b8607e; color: #fff; }
.btn-primary:hover { background: #b15d40; }
.btn-secondary { background: #fff; color: #3d332c; border-color: #e5d9ca; }
.btn-secondary:hover { background: #f6efe6; }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-danger { background: #e14b4b; color: #fff; }
.btn-danger:hover { background: #c93d3d; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============ Site Header / Footer ============ */
.site-header {
  background: rgba(255,253,254,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #f0dde3; position: sticky; top: 0; z-index: 50;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-size: 19px; font-weight: 800; color: #b8607e; letter-spacing: -.5px; }
.logo span { font-size: 12px; font-weight: 500; color: #9c8089; margin-left: 6px; }
.site-nav { display: flex; align-items: center; gap: 14px; }
.nav-link { font-size: 14px; font-weight: 600; color: #5c5049; padding: 8px 4px; }
.nav-link:hover { color: #b8607e; }
.site-footer { background: linear-gradient(155deg, #2b2420 0%, #362824 100%); color: #d9cdc1; padding: 40px 0; margin-top: 60px; text-align: center; }
.home-page .site-footer { margin-top: 0; }
.site-footer p { margin-bottom: 6px; font-size: 13px; }
.site-footer .muted { color: #9c8089; }

/* ============ Flash ============ */
.flash { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.flash-error { background: #fdecec; color: #c0392b; border: 1px solid #f5b7b1; }
.flash-ok { background: #eafaf1; color: #1e8449; border: 1px solid #a9dfbf; }

/* ============ Landing Page ============ */
.hero {
  position: relative;
  background: linear-gradient(160deg, #fff3ea 0%, #fdf1ee 55%, #fdf6e8 100%);
  padding: 84px 0 76px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-blob { position: absolute; border-radius: 50%; filter: blur(50px); z-index: -1; pointer-events: none; }
.hero-blob-1 { width: 380px; height: 380px; top: -140px; left: -100px; background: radial-gradient(circle, rgba(217,123,141,.28) 0%, rgba(217,123,141,0) 70%); }
.hero-blob-2 { width: 460px; height: 460px; bottom: -220px; right: -140px; background: radial-gradient(circle, rgba(255,196,140,.32) 0%, rgba(255,196,140,0) 70%); }
.hero-blob-3 { width: 260px; height: 260px; top: 30%; right: 6%; background: radial-gradient(circle, rgba(184,96,126,.16) 0%, rgba(184,96,126,0) 70%); }
.hero-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 56px; text-align: left; }
.hero-text { flex: 1 1 480px; max-width: 520px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #f3d9c6;
  color: #b8607e; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 30px;
  box-shadow: 0 6px 16px rgba(120,70,50,.08); margin-bottom: 20px;
}
.hero h1 { font-size: 42px; font-weight: 800; line-height: 1.35; color: #3d332c; text-align: left; letter-spacing: -.5px; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, #d97b8d 0%, #b8607e 55%, #c98a6b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin-top: 18px; font-size: 17px; color: #7a6a5c; text-align: left; line-height: 1.7; }
.hero-cta { margin-top: 30px; display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
.hero-cta .btn-primary { box-shadow: 0 14px 28px rgba(184,96,126,.32); }
.hero-badges { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #7a6a5c;
  background: rgba(255,255,255,.7); border: 1px solid #f1dde4; padding: 6px 12px; border-radius: 20px;
}
.hero-visual { flex: 0 0 auto; display: flex; justify-content: center; perspective: 1200px; }
.hero-phone-mock {
  position: relative; width: 230px; height: 470px; border-radius: 36px; border: 10px solid #2b2420;
  overflow: hidden; box-shadow: 0 34px 60px rgba(80,40,50,.25); background: #fff;
  transform: rotate(-7deg); animation: heroPhoneFloat 4.5s ease-in-out infinite;
}
.hero-phone-mock::after {
  content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,123,141,.35) 0%, rgba(217,123,141,0) 68%); filter: blur(10px);
}
.hero-phone-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 90px; height: 18px;
  background: #2b2420; border-radius: 0 0 12px 12px; z-index: 2;
}
.hero-phone-mock iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
@keyframes heroPhoneFloat {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-7deg) translateY(-18px); }
}
.section-eyebrow-tag {
  display: block; text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: #c98a6b; margin-bottom: 10px;
}
.section-title { text-align: center; font-size: 30px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.3px; }
.section-sub { text-align: center; color: #8a7480; margin-bottom: 48px; font-size: 15.5px; }

/* ---- How it works ---- */
.how-it-works { padding: 84px 0 20px; }
.step-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.step-row::before {
  content: ""; position: absolute; top: 34px; left: 16%; right: 16%; height: 2px;
  background: repeating-linear-gradient(90deg, #eeccb8 0, #eeccb8 8px, transparent 8px, transparent 16px); z-index: 0;
}
.step-card { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
.step-num {
  width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 24px; font-weight: 800; color: #fff;
  background: linear-gradient(150deg, #e9a08e 0%, #d97b8d 100%); box-shadow: 0 12px 24px rgba(217,123,141,.35);
}
.step-card h3 { font-size: 17px; margin-bottom: 8px; }
.step-card p { font-size: 14px; color: #8a7480; line-height: 1.6; }

/* ---- Features ---- */
.features { padding: 84px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
  background: #fffdfe; border: 1px solid #f1dde4; border-radius: 18px; padding: 30px 24px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px rgba(120,70,50,.12); border-color: #f3d9c6; }
.feature-icon-badge {
  width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 16px; background: linear-gradient(150deg, #fdece7 0%, #fbe0e6 100%);
  box-shadow: inset 0 0 0 1px rgba(217,123,141,.14);
}
.feature-card h3 { font-size: 17px; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: #8a7480; line-height: 1.6; }

.theme-showcase { position: relative; background: linear-gradient(180deg, #fffaf5 0%, #fdf3ec 100%); padding: 80px 0 88px; overflow: hidden; isolation: isolate; }
.template-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.template-card {
  background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid #f1e2d8;
  box-shadow: 0 10px 26px rgba(120,70,50,.08); transition: transform .2s ease, box-shadow .2s ease;
}
.template-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(120,70,50,.16); }
.template-card-swatch { height: 100px; display: flex; align-items: center; justify-content: center; }
.template-card-swatch-mark { font-size: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.template-card-body { padding: 16px 14px 18px; text-align: center; }
.template-card-name { font-weight: 800; font-size: 14px; color: #3d332c; margin-bottom: 6px; }
.template-card-desc { font-size: 12px; color: #9c8578; line-height: 1.5; }
.theme-showcase-more { text-align: center; margin-top: 34px; }
.theme-more-link { font-size: 14px; font-weight: 700; color: #b8607e; text-decoration: none; }
.theme-more-link:hover { text-decoration: underline; }

.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #2b2420 0%, #402a30 55%, #5c3244 100%);
  color: #fff; text-align: center; padding: 76px 0;
}
.cta-band::before {
  content: ""; position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 520px; height: 520px;
  border-radius: 50%; background: radial-gradient(circle, rgba(217,123,141,.22) 0%, rgba(217,123,141,0) 70%);
  filter: blur(20px); z-index: -1; pointer-events: none;
}
.cta-band h2 { font-size: 28px; margin-bottom: 14px; font-weight: 800; }
.cta-band p { color: #d9cdc1; margin-bottom: 28px; font-size: 15.5px; }

@media (max-width: 900px) {
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-text { max-width: 100%; text-align: center; }
  .hero h1, .hero p { text-align: center; }
  .hero-cta, .hero-badges { justify-content: center; }
  .hero-phone-mock { width: 190px; height: 390px; }
  .step-row { grid-template-columns: 1fr; gap: 34px; }
  .step-row::before { display: none; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: 28px; }
  .feature-grid { grid-template-columns: 1fr; }
  .template-strip { grid-template-columns: repeat(2, 1fr); }
  .cta-band h2 { font-size: 23px; }
  .section-title { font-size: 24px; }
}

/* ============ Auth Pages ============ */
.auth-wrap { max-width: 420px; margin: 60px auto; padding: 0 20px; }
.auth-card { background: #fffdfe; border: 1px solid #f0dde3; border-radius: 18px; padding: 36px 28px; }
.auth-card h1 { font-size: 22px; text-align: center; margin-bottom: 26px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #4a3f38; }
.form-group .hint { font-size: 12px; color: #9c8089; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], textarea, select {
  width: 100%; padding: 12px 14px; border: 1.5px solid #e9e0d3; border-radius: 11px; font-size: 14px; font-family: inherit;
  background: #fffefc; color: #3d332c; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--theme-primary, #b8607e); background: #fff;
  box-shadow: 0 0 0 3px rgba(184,96,126,.12);
}
input::placeholder, textarea::placeholder { color: #c2b6a8; }
textarea { resize: vertical; min-height: 90px; }
.auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: #8a7480; }
.auth-switch a { color: #b8607e; font-weight: 700; }

/* ============ Dashboard / Admin Shell ============ */
.dash-page main { background: #f8eff1; min-height: calc(100vh - 130px); padding: 34px 0 60px; }
.dash-page .container { max-width: 1440px; }
.dash-layout { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; }
.dash-side { background: #fffdfe; border: 1px solid #f0dde3; border-radius: 16px; padding: 16px; position: sticky; top: 84px; }
.dash-side-title { font-size: 12px; font-weight: 800; color: #9c8089; text-transform: uppercase; padding: 6px 10px 12px; }
.side-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #5c5049; margin-bottom: 2px; }
.side-link:hover { background: #f8eff1; }
.side-link.active { background: #f7e3ea; color: #b8607e; }
.admin-side .side-link.active { background: #eaf0fb; color: #2f5fb3; }
.side-link-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px;
  background: #d97b8d; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; line-height: 1;
}
.side-link.active .side-link-badge { background: #b8607e; }
.dash-content { min-width: 0; }
@media (max-width: 860px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-side { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .side-link { padding: 8px 10px; font-size: 13px; }
}

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 10px; }
.page-head h1 { font-size: 22px; font-weight: 800; color: #3d332c; }
.completion-bar { width: 220px; height: 6px; border-radius: 6px; background: #ecdfd0; margin-top: 10px; overflow: hidden; }
.completion-fill { height: 100%; background: linear-gradient(90deg, #b8607e, #dba0b5); border-radius: 6px; transition: width .4s ease; }
.completion-label { font-size: 11.5px; color: #9c8089; margin-top: 5px; font-weight: 700; }
.card {
  background: #fffdfe; border: 1px solid #f0dde3; border-radius: 18px; padding: 26px; margin-bottom: 20px;
  box-shadow: 0 3px 14px rgba(150,80,110,.05); position: relative;
}
.card h2 {
  font-size: 16px; font-weight: 800; margin-bottom: 4px; color: #3d332c;
  display: flex; align-items: center; gap: 9px;
}
.card h2::before { content: ""; width: 4px; height: 15px; border-radius: 3px; background: linear-gradient(180deg,#cc7d97,#a8536f); display: inline-block; }
.card .card-sub { color: #9c8089; font-size: 13px; margin-bottom: 20px; line-height: 1.5; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fffdfe; border: 1px solid #f0dde3; border-radius: 16px; padding: 20px; }
.stat-card .label { font-size: 13px; color: #9c8089; font-weight: 700; }
.stat-card .value { font-size: 28px; font-weight: 800; margin-top: 6px; }
.stat-card .value.pink { color: #b8607e; }
.stat-card .value.blue { color: #2f5fb3; }
.stat-card .value.green { color: #2e9e5b; }
@media (max-width: 860px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th, .data-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #f1dde4; vertical-align: middle; }
.data-table th { color: #9c8089; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.data-table td { white-space: nowrap; }
.data-table tr:hover td { background: #faf1f3; }
.table-wrap { overflow-x: auto; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.4; }
.badge-green { background: #eafaf1; color: #1e8449; }
.badge-red { background: #fdecec; color: #c0392b; }
.badge-gray { background: #f3e8db; color: #7a6d61; }
.badge-blue { background: #eaf0fb; color: #2f5fb3; }
.badge-pink { background: #f7e3ea; color: #b8607e; }
.icon-btn { background: none; border: none; font-size: 15px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.icon-btn:hover { background: #f3e8db; }
.data-table .icon-btn { font-size: 13px; padding: 4px 6px; }
.empty-state { text-align: center; padding: 60px 20px; color: #9c8089; }
.empty-state .icon { font-size: 40px; margin-bottom: 12px; }

/* ============ Homepage "sample invitation" phone-frame modal ============ */
.sample-modal-overlay { position: fixed; inset: 0; background: rgba(20,10,14,.62); z-index: 300; display: none; align-items: center; justify-content: center; padding: 24px; }
.sample-modal-overlay.open { display: flex; }
.sample-modal-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.sample-modal-inner .phone-frame { width: 320px; }
.sample-modal-close {
  position: absolute; top: -46px; right: 0; background: rgba(255,255,255,.16); color: #fff; border: none;
  width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
}
.sample-modal-hint { margin-top: 14px; font-size: 12.5px; color: #fff; opacity: .75; }
@media (max-width: 480px) {
  .sample-modal-inner .phone-frame { width: 84vw; }
}

/* ============ Split-screen live editor ============ */
.builder-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.builder-main { min-width: 0; }
.builder-main form { min-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.builder-main .form-section.active { flex: 1; }
.builder-savebar { flex-shrink: 0; }
.builder-preview { position: sticky; top: 84px; }
.phone-frame {
  width: 320px; margin: 0 auto; border-radius: 42px; border: 10px solid #1c1c1e; background: #1c1c1e;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; position: relative; aspect-ratio: 320 / 664;
}
.phone-frame::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 130px; height: 24px;
  background: #1c1c1e; border-radius: 0 0 16px 16px; z-index: 5;
}
.phone-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.preview-label { text-align: center; font-size: 12px; color: #9c8089; margin-top: 12px; }
.ofp-btn-row { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.open-full-preview-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; padding: 10px 20px; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600;
  border-radius: 999px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.open-full-preview-btn:hover { transform: translateY(-1px); }
.open-full-preview-btn .ofp-icon { font-size: 15px; }
.open-full-preview-btn .ofp-arrow { opacity: .8; transition: transform .15s ease; }
.open-full-preview-btn:hover .ofp-arrow { transform: translateX(3px); }
.ofp-btn-tab {
  background: linear-gradient(135deg, var(--theme-primary, #d97b8d), #7c8fd9);
  color: #fff; box-shadow: 0 8px 20px rgba(124,143,217,.35);
}
.ofp-btn-tab:hover { box-shadow: 0 10px 24px rgba(124,143,217,.45); }
.ofp-btn-kakao {
  background: #FEE500; color: #391b1b; box-shadow: 0 8px 20px rgba(254,229,0,.5);
}
.ofp-btn-kakao:hover { box-shadow: 0 10px 24px rgba(254,229,0,.6); }
.slug-error-text { color: #c62828; font-size: 12px; margin-top: 6px; font-weight: 600; }
.builder-savebar {
  position: sticky; bottom: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin-top: 16px; background: #fffdfe; border: 1px solid #f0dfe6; backdrop-filter: blur(6px); padding: 12px 16px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(150,80,110,.16);
}
.builder-savebar-hint { font-size: 12px; color: #9c8089; flex: 1; }
.builder-savebar #save-btn { box-shadow: 0 8px 20px rgba(184,96,126,.4); }
@media (max-width: 1180px) {
  .builder-layout { grid-template-columns: 1fr; }
  .builder-preview { position: static; margin-bottom: 22px; order: -1; }
  .phone-frame { width: 260px; }
}

/* ============ Builder Form ============ */
.builder-tabs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px;
  margin-bottom: 26px; position: sticky; top: 64px; background: #f8eff1; z-index: 20; padding: 14px 2px 18px;
  border-bottom: 1px solid #f0dde3;
}
.builder-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 13px 6px 11px; font-size: 12px; font-weight: 700; color: #8d7480; text-align: center; line-height: 1.25;
  background: #fffdfe; border: 1.5px solid #f0dfe6; border-radius: 16px; cursor: pointer;
  box-shadow: 0 2px 5px rgba(150,80,110,.05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.builder-tab .bt-icon { font-size: 19px; line-height: 1; }
.builder-tab .bt-label { white-space: nowrap; }
.builder-tab:hover { border-color: #e8bece; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(150,80,110,.1); }
.builder-tab.active {
  color: #fff; background: linear-gradient(150deg, #cc7d97, #a8536f); border-color: #a8536f;
  box-shadow: 0 8px 18px rgba(168,83,111,.32);
}
/* '섹션 노출·순서' sits apart from the content-editing tabs (it toggles/reorders everything else),
   so it gets its own look: dashed border + slate tint instead of the pink content-tab styling. */
.builder-tab-accent {
  grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 8px; padding: 12px;
  border-style: dashed; border-color: #b9c3d6; background: #f4f6fb; color: #5d6a85;
  margin-top: 4px;
}
.builder-tab-accent .bt-icon { font-size: 16px; }
.builder-tab-accent:hover { border-color: #8b9ac2; }
.builder-tab-accent.active {
  background: linear-gradient(150deg, #7c8bb3, #545f82); border-color: #545f82; color: #fff;
  box-shadow: 0 8px 18px rgba(84,95,130,.28);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-section { display: none; }
.form-section.active { display: block; }
/* Kept in sync with the real height of the sticky site header + .builder-tabs bar by
   updateFormScrollOffset() in dashboard.js (20 tabs now wrap across several rows, so this is
   NOT a fixed number) — used together with section.scrollIntoView() so a newly activated tab's
   section never ends up hidden underneath the sticky tab bar. */
.form-section { scroll-margin-top: var(--form-scroll-offset, 450px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f3e8db; }
.switch-row:last-child { border-bottom: none; }
.switch-row .switch-label { font-size: 14px; font-weight: 600; color: #4a3f38; }
.switch-row .switch-desc { font-size: 12px; color: #9c8089; margin-top: 2px; }
.switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: #e4d6c5; border-radius: 20px; transition: .2s; }
.switch .track::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .track { background: #b8607e; }
.switch input:checked + .track::before { transform: translateX(18px); }

.section-order-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; touch-action: none; }
.section-order-row {
  display: flex; align-items: center; gap: 10px; background: #fffdfe; border: 1.5px solid #f0dfe6;
  border-radius: 12px; padding: 10px 12px; user-select: none;
}
.section-order-handle {
  cursor: grab; color: #c2a9b3; font-size: 16px; padding: 4px 2px; line-height: 1; touch-action: none;
}
.section-order-handle:active { cursor: grabbing; }
.section-order-icon { font-size: 16px; }
.section-order-label { flex: 1; font-size: 13.5px; font-weight: 700; color: #4a3f38; }
.section-order-always { font-size: 11px; color: #a19d99; background: #f6eef1; padding: 4px 9px; border-radius: 8px; flex-shrink: 0; }
.section-order-switch { flex-shrink: 0; }
.section-order-row.dragging { opacity: .5; border-style: dashed; border-color: #b8607e; }
.section-order-row.drop-target { border-color: #b8607e; box-shadow: 0 0 0 2px rgba(184,96,127,.18); }

.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.thumb-item { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: #f3e8db; }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.thumb-item .thumb-del { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); color: #fff; border: none; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; cursor: pointer; z-index: 2; }
.thumb-item .thumb-move { position: absolute; bottom: 4px; background: rgba(0,0,0,.55); color: #fff; border: none; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; cursor: pointer; z-index: 2; }
.thumb-item .thumb-move-prev { left: 4px; }
.thumb-item .thumb-move-next { right: 4px; }
.thumb-item .thumb-move:disabled { opacity: .3; cursor: default; }
.upload-box {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed #dcb3c0; border-radius: 14px; padding: 20px 16px; text-align: center; cursor: pointer;
  color: #9c8089; font-size: 13px; font-weight: 600; background: #fffaf6; box-sizing: border-box;
  width: 100%; transition: .15s; margin-top: 12px;
}
.upload-box:hover { border-color: #b8607e; color: #b8607e; background: #fdf1f4; transform: translateY(-1px); }
.upload-box:active { transform: translateY(0); }

.account-row {
  border: 1px solid #f0dde3; border-radius: 14px; padding: 16px 16px 14px; background: #faf1f3; position: relative;
  margin-bottom: 14px;
}
.account-row .acc-top-row { display: grid; grid-template-columns: 108px 1fr; gap: 8px; margin-bottom: 10px; }
.account-row .acc-field { margin-bottom: 10px; }
.account-row .acc-field label { display: block; font-size: 11.5px; font-weight: 700; color: #9c8089; margin-bottom: 4px; }
.account-row select.acc-side, .account-row input.acc-role, .account-row input.acc-holder, .account-row input.acc-bank {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5dcd0; border-radius: 9px; font-size: 13.5px; background: #fff;
}
.account-row .acc-bottom-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.account-row .remove-account-row {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; line-height: 1; padding: 0;
}
@media (max-width: 480px) { .account-row .acc-top-row { grid-template-columns: 1fr; } }

/* ---- KakaoPay chip toggle ---- */
.kakaopay-chip { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.kakaopay-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.kakaopay-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 20px;
  background: #f3efe9; color: #a89b8c; font-size: 12.5px; font-weight: 700; border: 1.5px solid #e9e0d3;
  transition: all .15s ease;
}
.kakaopay-badge .kp-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: #d8cec1; color: #fff; font-size: 11px; font-weight: 900; transition: all .15s ease;
}
.kakaopay-chip input:checked + .kakaopay-badge {
  background: #FEE500; color: #3c2e14; border-color: #FEE500; box-shadow: 0 4px 12px rgba(254,229,0,.45);
}
.kakaopay-chip input:checked + .kakaopay-badge .kp-icon { background: #3c1e1e; color: #FEE500; }

.theme-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.theme-pick { border: 2px solid #f0dde3; border-radius: 14px; overflow: hidden; cursor: pointer; text-align: left; background: #fffdfe; }
.theme-pick.selected { border-color: #b8607e; box-shadow: 0 0 0 3px #f7e3ea; }
.theme-pick .swatch { height: 68px; }
.theme-pick .meta { padding: 10px 12px; }
.theme-pick .meta .name { font-size: 13px; font-weight: 700; }
.theme-pick .meta .desc { font-size: 11.5px; color: #9c8089; margin-top: 2px; }

/* ============ Invitation Page ============ */
.invite-wrap { max-width: 480px; margin: 0 auto; background: #fff; min-height: 100vh; box-shadow: 0 0 40px rgba(0,0,0,.06); position: relative; }
.invite-section { padding: 56px 30px; text-align: center; border-bottom: 1px solid #f2efec; scroll-margin-top: 64px; }
.invite-section:last-of-type { border-bottom: none; }
.invite-cover {
  padding: 0; height: 100vh; min-height: 640px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: #fff; position: relative; background-size: cover; background-position: center;
  text-align: center;
}
.invite-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,var(--cover-overlay-a1,.15)), rgba(0,0,0,var(--cover-overlay-a2,.55))); }
.invite-cover .cover-inner { position: relative; z-index: 2; text-align: center; }
.invite-cover .eyebrow { letter-spacing: 4px; font-size: 12px; opacity: .85; margin-bottom: 18px; }
.invite-cover h1 { font-size: 30px; font-weight: 700; line-height: 1.5; }
.invite-cover .date-line { margin-top: 18px; font-size: 14px; letter-spacing: 1px; opacity: .95; }
.invite-cover .scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 12px; opacity: .85; z-index: 2; }

.section-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--theme-primary, #d97b8d); opacity: .68; margin-bottom: 10px; }
.invite-section h2.title { font-size: 19px; letter-spacing: .2px; color: var(--theme-text, #2b2b2b); font-weight: 700; margin-bottom: 24px; }
.calendar-subtitle { font-size: 13.5px; color: var(--theme-text-soft, #888); margin: -14px 0 20px; line-height: 1.6; }
.greeting-msg { font-size: 15.5px; line-height: 2; color: var(--theme-text, #4a4a4a); white-space: pre-line; }
.invite-wrap .btn-primary { background: var(--theme-button, var(--theme-primary, #d97b8d)); color: var(--theme-button-text, #fff); }
.invite-wrap .btn-primary:hover { filter: brightness(.92); }
.invite-wrap .family-line, .invite-wrap .venue-address, .invite-wrap .info-box, .invite-wrap .gb-msg, .invite-wrap .ending-message { color: var(--theme-text, #55524f); }
.family-block { margin-top: 30px; font-size: 15px; }
.family-line { display: flex; justify-content: center; gap: 10px; padding: 6px 0; color: #55524f; }
.family-line b { color: #2b2b2b; }
.family-names { margin-top: 26px; font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.family-names .amp { color: var(--theme-primary, #d97b8d); margin: 0 12px; font-weight: 400; }

.dday-box {
  margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2.4vw, 10px); width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; box-sizing: border-box;
}
.dday-unit {
  background: #faf8f6; border-radius: 12px; padding: clamp(8px, 3vw, 14px) 4px; min-width: 0; text-align: center;
}
.dday-unit .num {
  font-size: clamp(13px, 4.6vw, 22px); font-weight: 800; color: var(--theme-primary, #d97b8d);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dday-unit .label { font-size: clamp(9px, 2.6vw, 11px); color: #a19d99; margin-top: 4px; white-space: nowrap; }

.mini-calendar { width: 100%; max-width: 320px; margin: 4px auto 0; box-sizing: border-box; }
.cal-month-label { font-size: 15px; font-weight: 800; color: #2b2b2b; margin-bottom: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; box-sizing: border-box; }
.cal-grid.cal-head { margin-bottom: 6px; }
.cal-dow { font-size: 11.5px; font-weight: 700; color: #a19d99; padding: 4px 0; min-width: 0; }
.cal-dow.cal-sun { color: #d97b8d; }
.cal-dow.cal-sat { color: #6a8fc7; }
.cal-cell {
  position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: #4a4540; border-radius: 8px; min-width: 0;
}
.cal-cell.cal-sun .cal-daynum { color: #d97b8d; }
.cal-cell.cal-sat .cal-daynum { color: #6a8fc7; }
.cal-cell.cal-wedding {
  background: var(--theme-primary, #d97b8d); color: #fff; font-weight: 800; flex-direction: column; gap: 1px;
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.cal-cell.cal-wedding .cal-daynum { color: #fff; font-size: 12px; }
.cal-cell.cal-wedding .cal-heart { font-size: 10px; line-height: 1; margin-top: 2px; }
.cal-cell.cal-empty { visibility: hidden; }

/* ---- Calendar style variants ---- */
.mini-calendar.cal-style-card {
  background: #fff; border-radius: 18px; padding: 22px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border: 1px solid #f1dde4;
}
.mini-calendar.cal-style-card .cal-month-label { text-align: center; }
.mini-calendar.cal-style-minimal .cal-month-label {
  font-weight: 400; letter-spacing: 3px; text-transform: uppercase; font-size: 12.5px; color: #8a7480;
}
.mini-calendar.cal-style-minimal .cal-cell.cal-wedding {
  background: transparent; color: var(--theme-primary, #d97b8d); box-shadow: none;
  border: 1.5px solid var(--theme-primary, #d97b8d);
}
.mini-calendar.cal-style-minimal .cal-cell.cal-wedding .cal-daynum { color: var(--theme-primary, #d97b8d); }
.mini-calendar.cal-style-romantic .cal-month-label {
  font-family: var(--font-heading, 'Gowun Batang', serif); font-size: 19px; font-weight: 700;
}
.mini-calendar.cal-style-romantic .cal-cell.cal-wedding {
  background: linear-gradient(135deg, var(--theme-primary, #d97b8d), #f0b8c8);
  border-radius: 50%;
}
.mini-calendar.cal-style-mono { background: #fafafa; border-radius: 4px; padding: 20px 16px; border: 1px solid #e6e6e6; }
.mini-calendar.cal-style-mono .cal-month-label { font-weight: 800; letter-spacing: 1px; color: #1f1f1f; }
.mini-calendar.cal-style-mono .cal-dow { color: #999; }
.mini-calendar.cal-style-mono .cal-dow.cal-sun, .mini-calendar.cal-style-mono .cal-dow.cal-sat { color: #999; }
.mini-calendar.cal-style-mono .cal-cell.cal-sun .cal-daynum, .mini-calendar.cal-style-mono .cal-cell.cal-sat .cal-daynum { color: #4a4540; }
.mini-calendar.cal-style-mono .cal-cell.cal-wedding {
  background: #1f1f1f; color: #fff; border-radius: 4px; box-shadow: none;
}
.mini-calendar.cal-style-mono .cal-cell.cal-wedding .cal-daynum { color: #fff; }
.mini-calendar.cal-style-outline { background: transparent; border: 1.5px solid var(--theme-primary, #d97b8d); border-radius: 18px; padding: 22px 16px; }
.mini-calendar.cal-style-outline .cal-month-label { text-align: center; letter-spacing: 1px; }
.mini-calendar.cal-style-outline .cal-cell.cal-wedding {
  background: transparent; color: var(--theme-primary, #d97b8d); box-shadow: none;
  border-radius: 50%; border: 2px dashed var(--theme-primary, #d97b8d);
}
.mini-calendar.cal-style-outline .cal-cell.cal-wedding .cal-daynum { color: var(--theme-primary, #d97b8d); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.gallery-grid img { aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; }
.gallery-more { grid-column: 1 / -1; text-align: center; margin-top: 14px; }

.venue-name { font-size: 19px; font-weight: 700; }
.venue-address { margin-top: 8px; color: #6b6866; font-size: 14px; }
.map-embed { margin-top: 20px; border-radius: 12px; overflow: hidden; border: 1px solid #eee; }
.map-embed iframe { width: 100%; height: 220px; border: 0; display: block; }
.map-actions { display: flex; gap: 8px; margin-top: 14px; }
.map-nav-buttons { display: flex; gap: 8px; margin-top: 14px; }
.map-nav-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px;
  border-radius: 10px; font-size: 12.5px; font-weight: 700; text-decoration: none; border: 1.5px solid transparent;
}
.map-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px; font-weight: 900; flex-shrink: 0; }
.map-nav-kakao { background: #FEE500; color: #3c1e1e; }
.map-nav-kakao .map-nav-icon { background: #3c1e1e; color: #FEE500; }
.map-nav-naver { background: #03C75A; color: #fff; }
.map-nav-naver .map-nav-icon { background: #fff; color: #03C75A; }
.info-box { text-align: left; background: #faf8f6; border-radius: 12px; padding: 16px 18px; margin-top: 16px; font-size: 13.5px; color: #55524f; }
.info-box b { display: block; margin-bottom: 4px; color: #2b2b2b; font-size: 13px; }

/* ---- Contact (전화 연락처) ---- */
.contact-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.contact-item {
  display: flex; align-items: center; justify-content: space-between; padding: 13px 16px;
  border-radius: 12px; background: #faf8f6; text-decoration: none; color: #4a4540;
  border: 1px solid #f0eeec; transition: background .15s ease;
}
.contact-item:active { background: #f3e8db; }
.contact-role { font-size: 13.5px; font-weight: 700; }
.contact-phone { font-size: 13px; color: var(--theme-primary, #d97b8d); font-weight: 700; }
.contact-group { margin-bottom: 16px; }
.contact-group:last-child { margin-bottom: 0; }
.contact-group-title { font-size: 12.5px; font-weight: 700; color: #9c8089; margin-bottom: 8px; }
.contact-actions { display: flex; gap: 6px; }
.contact-btn {
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 20px; text-decoration: none;
  color: var(--theme-primary, #d97b8d); background: #fff; border: 1px solid #f0dde4; transition: transform .12s ease;
}
.contact-btn:active { transform: scale(.96); }
.contact-btn.contact-sms { color: #4a7c6f; border-color: #dbeee8; }
.contact-filter { display: flex; gap: 8px; justify-content: center; margin-top: 18px; margin-bottom: 4px; }
.contact-filter-btn {
  padding: 7px 18px; border-radius: 20px; border: 1.5px solid #f1dde4; background: #fff;
  font-size: 12.5px; font-weight: 700; color: #9c8089; cursor: pointer; transition: all .15s ease;
}
.contact-filter-btn.active { background: var(--theme-primary, #d97b8d); border-color: var(--theme-primary, #d97b8d); color: #fff; }

.account-accordion { margin-top: 20px; text-align: left; }
.account-group { border: 1px solid #eee; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.account-group summary { padding: 14px 16px; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.account-group summary::-webkit-details-marker { display: none; }
.account-group[open] summary { border-bottom: 1px solid #f0eeec; }
.account-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 13.5px; border-top: 1px solid #f7f5f3; }
.account-item:first-child { border-top: none; }
.account-item .info b { display: block; font-size: 13px; }
.account-item .info > span { display: block; color: #a19d99; font-size: 12px; }
.copy-btn { border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #555; }
.copy-btn:hover { border-color: #d97b8d; color: #d97b8d; }

.rsvp-form, .guestbook-form { text-align: left; margin-top: 20px; }
.radio-group { display: flex; gap: 8px; }
.radio-chip { flex: 1; text-align: center; padding: 10px; border: 1px solid #ddd; border-radius: 10px; font-size: 13px; font-weight: 700; color: #777; cursor: pointer; }
.radio-chip input { display: none; }
.radio-chip.checked { border-color: var(--theme-primary, #d97b8d); color: var(--theme-primary, #d97b8d); background: #fdecef; }

.guestbook-list { margin-top: 20px; text-align: left; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.guestbook-item { background: #faf8f6; border-radius: 12px; padding: 14px 16px; position: relative; }
.guestbook-item .gb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding-right: 20px; }
.guestbook-item .gb-name { font-weight: 700; font-size: 13.5px; }
.guestbook-item .gb-date { font-size: 11px; color: #a19d99; }
.guestbook-item .gb-msg { font-size: 13.5px; color: #4a4a4a; white-space: pre-line; }
/* 본인이 작성한(핀 있는) 글에만 client-side로 붙는 삭제용 x 버튼 — 카드 우상단 코너 */
.gb-del {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.06); border: none; color: #a19d99; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.gb-del:hover { background: rgba(0,0,0,.12); color: #6b6866; }

.share-row { display: flex; gap: 10px; margin-top: 20px; justify-content: center; }
.share-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: #777; background: none; border: none; }
.share-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #f2efec; }
.share-btn-kakao .share-icon { background: #FEE500; color: #3c1e1e; }
.share-btn-kakao { color: #3c1e1e; font-weight: 700; }

.invite-footer { padding: 34px 30px 50px; text-align: center; color: #b6b2ae; font-size: 12px; }
.bgm-toggle { position: fixed; top: 16px; left: 16px; z-index: 30; width: 42px; height: 42px; background: transparent; color: #fff; border: none; font-size: 20px; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4); }

/* ---- Nav menu (top-right, active sections, smooth scroll) ---- */
.nav-menu-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 320; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.4); border: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; transition: background .2s ease;
}
.nav-menu-toggle span { display: block; width: 17px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-menu-toggle.open { background: var(--theme-primary, #d97b8d); }
.nav-menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-menu-toggle.open span:nth-child(2) { opacity: 0; }
.nav-menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-menu-backdrop {
  position: fixed; inset: 0; background: rgba(20,15,10,.4); z-index: 310; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.nav-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-menu-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(78vw, 300px); background: #fffdfe; z-index: 315;
  box-shadow: -12px 0 30px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.3,1);
  padding: 84px 8px 30px; box-sizing: border-box; overflow-y: auto;
}
.nav-menu-panel.open { transform: translateX(0); }
.nav-menu-list { display: flex; flex-direction: column; }
.nav-menu-link {
  padding: 15px 20px; font-size: 15px; font-weight: 700; color: #4a3f38; border-radius: 12px;
  transition: background .15s ease, color .15s ease;
}
.nav-menu-link:hover, .nav-menu-link:active { background: #f8eff1; color: var(--theme-primary, #d97b8d); }
.nav-menu-link:first-child { color: var(--theme-primary, #d97b8d); border-bottom: 1px solid #f0e5d8; margin-bottom: 6px; padding-bottom: 17px; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 100; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92%; max-height: 86%; border-radius: 6px; }
.lightbox-close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 28px; background: none; border: none; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 30px; background: none; border: none; padding: 10px; }
.lightbox-prev { left: 6px; } .lightbox-next { right: 6px; }

.unpublished-banner { background: #2b2b2b; color: #fff; text-align: center; padding: 10px; font-size: 12.5px; }

/* ---- Unpaid-invitation watermark: banners + repeating page-wide overlay ---- */
.watermark-banner {
  position: fixed; left: 0; right: 0; z-index: 480; display: block; text-align: center;
  background: linear-gradient(90deg, #c0392b, #e0584c); color: #fff; font-size: 12px; font-weight: 700;
  padding: 10px 16px; line-height: 1.5; text-decoration: none; box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.watermark-banner:hover { background: linear-gradient(90deg, #a8321f, #c94b3f); }
.watermark-banner.wm-top { top: 0; }
.watermark-banner.wm-bottom { bottom: 0; }
/* Theme variants */
[data-theme="classic-pink"] { --theme-primary: #d97b8d; --theme-bg: #fff9f9; }
[data-theme="minimal-beige"] { --theme-primary: #b08b5f; --theme-bg: #fbf8f4; }
[data-theme="navy-elegant"] { --theme-primary: #3b4a6b; --theme-bg: #f5f7fb; }
[data-theme="floral-green"] { --theme-primary: #5f8354; --theme-bg: #f6f9f4; }
[data-theme="mono-black"] { --theme-primary: #2b2b2b; --theme-bg: #f7f7f7; }
[data-theme] .invite-cover { background-color: var(--theme-primary); }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #2b2b2b; color: #fff;
  padding: 12px 20px; border-radius: 30px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================================
   DESIGN SYSTEM OVERHAUL — official wedding-site look
   Font mapping / sizing / background textures / theme colors / motion /
   decorative dividers / cover variants / new content sections
   ===================================================================== */

/* ---- page letterbox (desktop shows the mobile card centered on a soft backdrop) ---- */
body.invite-page {
  background: #ece7e1;
  min-height: 100vh;
}
body.invite-page main { padding: 0; }

/* ---- Fonts: independent body (data-font) / heading (data-headingfont) pickers, 11 keys each ---- */
.invite-wrap { --font-body: 'Gowun Dodum', 'Noto Sans KR', sans-serif; --font-heading: 'Gowun Batang', 'Noto Serif KR', serif; }
.invite-wrap[data-font="gowun-dodum"] { --font-body: 'Gowun Dodum', 'Noto Sans KR', sans-serif; }
.invite-wrap[data-font="gowun-batang"] { --font-body: 'Gowun Batang', serif; }
.invite-wrap[data-font="noto-serif"] { --font-body: 'Noto Serif KR', serif; }
.invite-wrap[data-font="noto-sans"] { --font-body: 'Noto Sans KR', sans-serif; }
.invite-wrap[data-font="nanum-myeongjo"] { --font-body: 'Nanum Myeongjo', serif; }
.invite-wrap[data-font="nanum-pen"] { --font-body: 'Nanum Pen Script', cursive; }
.invite-wrap[data-font="song-myung"] { --font-body: 'Song Myung', serif; }
.invite-wrap[data-font="poor-story"] { --font-body: 'Poor Story', cursive; }
.invite-wrap[data-font="gaegu"] { --font-body: 'Gaegu', cursive; }
.invite-wrap[data-font="playfair"] { --font-body: 'Playfair Display', 'Noto Serif KR', serif; }
.invite-wrap[data-font="cormorant"] { --font-body: 'Cormorant Garamond', 'Noto Serif KR', serif; }

.invite-wrap[data-headingfont="gowun-dodum"] { --font-heading: 'Gowun Dodum', 'Noto Sans KR', sans-serif; }
.invite-wrap[data-headingfont="gowun-batang"] { --font-heading: 'Gowun Batang', serif; }
.invite-wrap[data-headingfont="noto-serif"] { --font-heading: 'Noto Serif KR', serif; }
.invite-wrap[data-headingfont="noto-sans"] { --font-heading: 'Noto Sans KR', sans-serif; }
.invite-wrap[data-headingfont="nanum-myeongjo"] { --font-heading: 'Nanum Myeongjo', serif; }
.invite-wrap[data-headingfont="nanum-pen"] { --font-heading: 'Nanum Pen Script', cursive; }
.invite-wrap[data-headingfont="song-myung"] { --font-heading: 'Song Myung', serif; }
.invite-wrap[data-headingfont="poor-story"] { --font-heading: 'Poor Story', cursive; }
.invite-wrap[data-headingfont="gaegu"] { --font-heading: 'Gaegu', cursive; }
.invite-wrap[data-headingfont="playfair"] { --font-heading: 'Playfair Display', 'Noto Serif KR', serif; }
.invite-wrap[data-headingfont="cormorant"] { --font-heading: 'Cormorant Garamond', 'Noto Serif KR', serif; }

.invite-wrap { font-family: var(--font-body); }
.invite-cover h1, .invite-section h2.title, .family-names, .couple-profile .cp-name, .timeline-title, .interview-title, .intro-names { font-family: var(--font-heading); }
.invite-wrap[data-letterspacing="wide"] .greeting-msg, .invite-wrap[data-letterspacing="wide"] .family-line, .invite-wrap[data-letterspacing="wide"] .cp-content { letter-spacing: .6px; }
.invite-wrap[data-letterspacing="wide"] .invite-cover h1 { letter-spacing: 2px; }

/* ---- Font size scale per theme_font_size ---- */
.invite-wrap[data-fontsize="large"] .greeting-msg,
.invite-wrap[data-fontsize="large"] .family-line,
.invite-wrap[data-fontsize="large"] .info-box,
.invite-wrap[data-fontsize="large"] .gb-msg,
.invite-wrap[data-fontsize="large"] .interview-a,
.invite-wrap[data-fontsize="large"] .cp-content { font-size: 16.5px; line-height: 2.05; }
.invite-wrap[data-fontsize="large"] .invite-cover h1 { font-size: 33px; }
.invite-wrap[data-fontsize="large"] .invite-section h2.title { font-size: 21px; }
.invite-wrap[data-fontsize="xlarge"] .greeting-msg,
.invite-wrap[data-fontsize="xlarge"] .family-line,
.invite-wrap[data-fontsize="xlarge"] .info-box,
.invite-wrap[data-fontsize="xlarge"] .gb-msg,
.invite-wrap[data-fontsize="xlarge"] .interview-a,
.invite-wrap[data-fontsize="xlarge"] .cp-content { font-size: 18px; line-height: 2.1; }
.invite-wrap[data-fontsize="xlarge"] .invite-cover h1 { font-size: 36px; }
.invite-wrap[data-fontsize="xlarge"] .invite-section h2.title { font-size: 23px; }

/* ---- Background textures (pure CSS, no image assets) ---- */
.invite-wrap[data-bgtexture="paper"] {
  background-color: #fffcf7;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.012) 0px, transparent 1px, transparent 2px);
}
.invite-wrap[data-bgtexture="grid"] {
  background-color: #fffefc;
  background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
.invite-wrap[data-bgtexture="cloud"] {
  background-color: #fbfaf7;
  background-image:
    radial-gradient(ellipse 60% 30% at 15% 10%, rgba(217,123,141,.06), transparent 60%),
    radial-gradient(ellipse 50% 26% at 85% 30%, rgba(176,139,95,.06), transparent 60%),
    radial-gradient(ellipse 55% 30% at 25% 80%, rgba(95,131,84,.05), transparent 60%);
  background-attachment: fixed;
}
.invite-wrap[data-bgtexture="hanji"] {
  background-color: #faf7f0;
  background-image:
    radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.02) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 3px;
}
.invite-wrap[data-bgtexture="dot"] {
  background-color: #fffefd;
  background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1.4px);
  background-size: 16px 16px;
}

/* ---- Background effect (whole invitation page, not just the cover — pure CSS, no image assets) ----
   Distinct from data-bgtexture above (a subtle paper/grid/dot noise layer): these are bolder,
   theme-color-driven treatments a user picks alongside the cover effect in the '헤더(커버)' tab. */
.invite-wrap[data-bgeffect="pattern"] {
  background-color: var(--theme-bg, #fffdfb);
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--theme-primary, #d97b8d) 7%, transparent) 0px, color-mix(in srgb, var(--theme-primary, #d97b8d) 7%, transparent) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--theme-primary, #d97b8d) 5%, transparent) 0px, color-mix(in srgb, var(--theme-primary, #d97b8d) 5%, transparent) 1px, transparent 1px, transparent 18px);
}
.invite-wrap[data-bgeffect="motif"] {
  background-color: var(--theme-bg, #fffdfb);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--theme-primary, #d97b8d) 14%, transparent) 0 2px, transparent 2.6px);
  background-size: 34px 34px;
  background-position: 0 0, 17px 17px;
}
.invite-wrap[data-bgeffect="motif"]::before {
  content: "❀"; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  font-size: 13px; line-height: 46px; letter-spacing: 34px; word-spacing: 34px;
  color: color-mix(in srgb, var(--theme-primary, #d97b8d) 10%, transparent);
  overflow: hidden; white-space: pre-wrap; padding: 20px; opacity: .7;
  content: "❀    ❀    ❀    ❀    ❀\A   ❀    ❀    ❀    ❀    ❀\A❀    ❀    ❀    ❀    ❀\A   ❀    ❀    ❀    ❀    ❀";
}
.invite-wrap[data-bgeffect="gradient"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--theme-primary, #d97b8d) 16%, #fff) 0%,
    var(--theme-bg, #fff9f9) 40%,
    var(--theme-bg, #fff9f9) 70%,
    color-mix(in srgb, var(--theme-primary, #d97b8d) 12%, #fff) 100%);
  background-attachment: fixed;
}

/* ---- Theme color custom overrides (inline CSS vars set per-invitation win by specificity) ---- */
.invite-wrap { --theme-margin: #ece7e1; }
.invite-section { background: transparent; }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.opt-no-anim .reveal { opacity: 1; transform: none; transition: none; }

/* ---- Decorative dividers ---- */
.deco-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 26px; color: var(--theme-primary, #d97b8d); opacity: .75; }
.deco-divider::before, .deco-divider::after { content: ""; height: 1px; width: 34px; background: currentColor; opacity: .5; }
.deco-divider .deco-mark { font-size: 13px; }
.eng-subtitle { font-size: 10.5px; letter-spacing: 2.5px; color: var(--theme-primary, #d97b8d); opacity: .8; margin-bottom: 6px; text-transform: uppercase; }

/* ---- Cover redesign / layout variants ---- */
.invite-cover { transition: none; }
.invite-cover[data-layout="basic"], .invite-cover[data-layout="fill"] {
  padding: 0; height: 100vh; min-height: 640px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; position: relative; background-size: cover; background-position: center;
}
.invite-cover[data-layout="fill"] .cover-inner { padding: 0 24px; }
.invite-cover[data-layout="fill"]::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.62) 100%); }

/* "사진 상단형/텍스트 상단형/사진 하단형/가운데형" 등 배치 순서 프리셋을 고르면 기본/채우기 레이아웃도
   사진을 배경이 아니라 인라인 카드로 콘텐츠 흐름 안에 넣어야 순서 변경이 실제로 눈에 보임 —
   이때는 배경사진이 없으므로 흰 글씨 대신 일반 텍스트 색으로 전환. */
.invite-cover[data-layout="basic"][data-photomode="inline"], .invite-cover[data-layout="fill"][data-photomode="inline"] {
  height: auto; min-height: 100vh; padding: 64px 34px 50px; color: #2b2b2b; background: var(--theme-bg, #fbf8f4);
  justify-content: flex-start; text-align: center;
}
.invite-cover[data-layout="basic"][data-photomode="inline"]::after, .invite-cover[data-layout="fill"][data-photomode="inline"]::after { content: none; }
.invite-cover[data-layout="basic"][data-photomode="inline"] .cover-inner, .invite-cover[data-layout="fill"][data-photomode="inline"] .cover-inner { position: static; padding: 0; }
.invite-cover[data-layout="basic"][data-photomode="inline"] .date-line, .invite-cover[data-layout="fill"][data-photomode="inline"] .date-line { color: #6b6866; opacity: 1; }
.invite-cover[data-layout="basic"][data-photomode="inline"] .scroll-cue, .invite-cover[data-layout="fill"][data-photomode="inline"] .scroll-cue { position: static; margin-top: 40px; color: #a19d99; }
.cover-photo-inline { width: 100%; max-width: 320px; margin: 0 auto 30px; overflow: hidden; border-radius: 14px; background: #eee; position: relative; box-shadow: 0 18px 40px rgba(0,0,0,.14); }
.cover-photo-inline img, .cover-photo-inline video { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
.invite-cover[data-border="1"] .cover-photo-inline { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--theme-primary, #d97b8d); }

.invite-cover[data-layout="arch"], .invite-cover[data-layout="oval"], .invite-cover[data-layout="frame"] {
  height: auto; min-height: 100vh; padding: 64px 34px 50px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  color: #2b2b2b; background: var(--theme-bg, #fbf8f4); position: relative; text-align: center;
}
.invite-cover[data-layout="arch"]::after, .invite-cover[data-layout="oval"]::after, .invite-cover[data-layout="frame"]::after { content: none; }
.cover-photo-frame { width: 100%; max-width: 320px; margin: 0 auto 30px; overflow: hidden; background: #eee; position: relative; box-shadow: 0 18px 40px rgba(0,0,0,.14); }
.invite-cover[data-layout="arch"] .cover-photo-frame { border-radius: 160px 160px 8px 8px; aspect-ratio: 3/4; }
.invite-cover[data-layout="oval"] .cover-photo-frame { border-radius: 50%; aspect-ratio: 1; max-width: 260px; box-shadow: 0 0 0 8px #fff, 0 18px 40px rgba(0,0,0,.14); }
.invite-cover[data-layout="circle"] .cover-photo-frame { border-radius: 50%; aspect-ratio: 1; max-width: 230px; box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--theme-primary, #d97b8d), 0 18px 40px rgba(0,0,0,.14); }
.invite-cover[data-layout="frame"] .cover-photo-frame { border-radius: 4px; aspect-ratio: 3/4; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--theme-primary, #d97b8d), 0 18px 40px rgba(0,0,0,.14); }
/* 육각형(hexagon) — 이중 테두리: 흰색 안쪽 여백 링 + 포인트색 바깥 라인(clip-path 실루엣을 따라가는 drop-shadow로 구현, box-shadow는 비직사각형 클립 모양엔 적용되지 않음) */
.invite-cover[data-layout="hexagon"] .cover-photo-frame {
  aspect-ratio: .95; max-width: 230px; padding: 9px; box-sizing: border-box; background: #fff;
  clip-path: polygon(50% 0%, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  filter: drop-shadow(0 0 0 3px var(--theme-primary, #d97b8d)) drop-shadow(0 16px 30px rgba(0,0,0,.16));
}
.invite-cover[data-layout="hexagon"] .cover-photo-frame img,
.invite-cover[data-layout="hexagon"] .cover-photo-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: polygon(50% 0%, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
}
.cover-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.invite-cover[data-border="1"] .cover-photo-frame { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--theme-primary, #d97b8d); }
.invite-cover[data-layout="arch"] .cover-inner, .invite-cover[data-layout="oval"] .cover-inner, .invite-cover[data-layout="frame"] .cover-inner { position: static; color: #2b2b2b; }
.invite-cover[data-layout="arch"] .eyebrow, .invite-cover[data-layout="oval"] .eyebrow, .invite-cover[data-layout="frame"] .eyebrow { color: var(--theme-primary, #d97b8d); opacity: 1; }
.invite-cover[data-layout="arch"] .date-line, .invite-cover[data-layout="oval"] .date-line, .invite-cover[data-layout="frame"] .date-line { color: #6b6866; opacity: 1; }
.invite-cover[data-layout="arch"] .scroll-cue, .invite-cover[data-layout="oval"] .scroll-cue, .invite-cover[data-layout="frame"] .scroll-cue { position: static; margin-top: 40px; color: #a19d99; }
.invite-cover .cover-message { margin-top: 16px; font-size: 13.5px; color: inherit; opacity: .9; white-space: pre-line; }

/* cover content order presets — reorders eng/photo/names/date/message blocks; add top margin to
   the photo frame whenever text now precedes it (its own CSS only has a bottom margin). */
.cover-inner[data-content-order="text-top"] .cover-photo-frame,
.cover-inner[data-content-order="photo-bottom"] .cover-photo-frame,
.cover-inner[data-content-order="text-top"] .cover-photo-inline,
.cover-inner[data-content-order="photo-bottom"] .cover-photo-inline { margin-top: 22px; }
.cover-inner[data-content-order="photo-center"] .cover-photo-inline,
.cover-inner[data-content-order="photo-center"] .cover-photo-frame { margin: 22px auto; }
.cover-inner[data-content-order="photo-top"] h1 { margin-top: 4px; }

/* cover photo effects */
.invite-cover[data-effect="fog"] .cover-photo-frame::after,
.invite-cover[data-effect="fog"]::before { content: ""; }
.invite-cover[data-effect="fog"] .cover-photo-frame::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 100%); }
.invite-cover[data-layout="basic"][data-effect="fog"]::after, .invite-cover[data-layout="fill"][data-effect="fog"]::after {
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(0,0,0,.1) 45%, rgba(0,0,0,.55) 100%);
}
.invite-cover[data-effect="paper"] .cover-photo-frame::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size: 4px 4px; mix-blend-mode: overlay; opacity: .5; }
/* 기본형/채우기 레이아웃에는 .cover-photo-frame 자체가 없어서(아치/원형/액자형 전용 요소) 위 규칙이
   전혀 매칭되지 않아 "페이퍼" 이펙트를 골라도 아무 변화가 없던 버그(#24, 세 이펙트 전부 "적용 안됨"
   리포트로 발견 — 실제로는 페이퍼만 완전히 무효였고 안개/물결은 미세하게 적용되고 있었음을
   스크린샷 픽셀 비교로 확인) — 안개 이펙트와 동일한 패턴으로, 기본 오버레이 역할을 하는 ::after에
   종이 질감(radial-gradient 점무늬)을 어두운 그라데이션과 함께 그려 넣어 기본형/채우기에서도 실제로
   보이도록 한다. */
.invite-cover[data-layout="basic"][data-effect="paper"]::after, .invite-cover[data-layout="fill"][data-effect="paper"]::after {
  background:
    radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px) 0 0/5px 5px,
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.6) 100%);
  background-blend-mode: overlay, normal;
}
.invite-cover[data-effect="wave"] { padding-bottom: 90px; }
.invite-cover[data-effect="wave"]::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; background: #fff;
  clip-path: path('M0,30 C180,80 360,0 540,30 C720,60 900,10 1080,30 L1080,100 L0,100 Z');
  transform: scaleX(3); transform-origin: center bottom; z-index: 1;
}
.invite-cover[data-layout="basic"][data-effect="wave"]::before, .invite-cover[data-layout="fill"][data-effect="wave"]::before { z-index: 2; }

/* ---- Couple Profile ---- */
.couple-profile { margin-top: 26px; }
.couple-profile[data-layout="horizontal"] .cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.couple-profile[data-layout="vertical"] .cp-grid { display: flex; flex-direction: column; gap: 22px; }
.couple-profile[data-layout="left"] .cp-grid, .couple-profile[data-layout="right"] .cp-grid { display: flex; flex-direction: column; gap: 22px; }
.couple-profile[data-layout="left"] .cp-card { flex-direction: row; text-align: left; }
.couple-profile[data-layout="right"] .cp-card { flex-direction: row-reverse; text-align: right; }
.cp-card { background: #faf8f6; border-radius: 16px; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.couple-profile[data-layout="left"] .cp-card, .couple-profile[data-layout="right"] .cp-card { align-items: center; gap: 16px; padding: 16px; }
.cp-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #eee; flex-shrink: 0; }
.cp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cp-body { flex: 1; min-width: 0; }
.cp-role { font-size: 11px; letter-spacing: 1.5px; color: var(--theme-primary, #d97b8d); font-weight: 700; margin-bottom: 4px; text-transform: uppercase; }
.cp-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.cp-content { font-size: 13.5px; color: var(--theme-text, #6b6866); white-space: pre-line; line-height: 1.85; }

/* ---- Timeline ---- */
.timeline-cover-photo { width: 100%; border-radius: 14px; overflow: hidden; margin-bottom: 22px; aspect-ratio: 4/3; background: #eee; }
.timeline-cover-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 템플릿 1 (라운드): 넉넉한 라운드 모서리 */
.timeline-cover-photo.tpl-1 { border-radius: 26px; aspect-ratio: 4/3; }
/* 템플릿 2 (사각): 각진 모서리 */
.timeline-cover-photo.tpl-2 { border-radius: 0; aspect-ratio: 1/1; }
/* 템플릿 3 (풀사이즈): 섹션 좌우 여백을 뚫고 꽉 차게, 세로로 더 길게 */
.timeline-cover-photo.tpl-3 {
  border-radius: 0; aspect-ratio: 3/4;
  width: calc(100% + 60px); margin-left: -30px; margin-right: -30px;
}
.timeline-list { margin-top: 24px; text-align: left; position: relative; padding-left: 26px; }
.timeline-list::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--theme-primary, #d97b8d), transparent); opacity: .35; }
.timeline-item { position: relative; padding-bottom: 26px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -26px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--theme-primary, #d97b8d); }
.timeline-item .ti-time { font-size: 11.5px; font-weight: 700; color: var(--theme-primary, #d97b8d); letter-spacing: .5px; }
.timeline-item .ti-title { font-size: 14.5px; font-weight: 700; margin-top: 4px; }
.timeline-item .ti-desc { font-size: 13px; color: var(--theme-text, #6b6866); margin-top: 5px; white-space: pre-line; }
.timeline-item .ti-photo { margin-top: 10px; border-radius: 10px; overflow: hidden; max-height: 200px; }
.timeline-item .ti-photo img { width: 100%; object-fit: cover; }

/* ---- Interview ---- */
.interview-list { margin-top: 22px; text-align: left; display: flex; flex-direction: column; gap: 20px; }
.interview-photos { display: flex; gap: 10px; margin-bottom: 20px; }
.interview-photos .ip { flex: 1; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #eee; }
.interview-photos .ip img { width: 100%; height: 100%; object-fit: cover; }
.interview-item .interview-q { font-size: 13.5px; font-weight: 700; color: var(--theme-primary, #d97b8d); }
.interview-item .interview-q::before { content: "Q. "; }
.interview-item .interview-a { font-size: 14px; color: var(--theme-text, #4a4a4a); margin-top: 6px; white-space: pre-line; }
.interview-item .interview-a::before { content: "A. "; font-weight: 700; color: #c9c5c1; }

.interview-filter { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.interview-filter-btn {
  padding: 7px 18px; border-radius: 20px; border: 1.5px solid #f1dde4; background: #fff;
  font-size: 12.5px; font-weight: 700; color: #9c8089; cursor: pointer; transition: all .15s ease;
}
.interview-filter-btn.active { background: var(--theme-primary, #d97b8d); border-color: var(--theme-primary, #d97b8d); color: #fff; }

/* ---- Empty-state placeholder (shown only inside the editor's live-preview iframe when a
   section is toggled on but has no content yet) + invisible scroll anchors on the real page ---- */
.section-anchor { height: 0; overflow: hidden; scroll-margin-top: 64px; }
.section-empty-state { opacity: .78; }
.section-empty-state .section-empty-msg {
  font-size: 13px; color: #a19d99; margin-top: 14px; padding: 18px; background: #faf5f6;
  border: 1px dashed #e8bece; border-radius: 12px;
}

/* ---- Mid photo ---- */
.mid-photo-section { padding: 0 !important; border: none !important; }
.mid-photo-section img { width: 100%; display: block; }
.mid-photo-caption { padding: 16px 30px 0; font-size: 12.5px; text-align: center; color: #a19d99; }

/* ---- Ending section ---- */
.ending-section { text-align: center; }
.ending-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 5px 14px; border-radius: 20px; background: var(--theme-primary, #d97b8d); color: #fff; margin-bottom: 18px; }
.ending-photo { border-radius: 14px; overflow: hidden; margin: 0 auto 20px; background: #eee; }
.ending-photo.ratio-square { aspect-ratio: 1; max-width: 320px; }
.ending-photo.ratio-portrait { aspect-ratio: 3/4; max-width: 300px; }
.ending-photo.ratio-wide { aspect-ratio: 16/10; max-width: 420px; }
.ending-photo img { width: 100%; height: 100%; object-fit: cover; }
.ending-message { font-size: 15px; line-height: 2; color: #4a4a4a; white-space: pre-line; }

/* ---- Guestbook design variants ---- */
/* 포스트잇형(2줄/1줄 공통 베이스) — 메시지를 몇 줄까지 보여줄지만 다르고 나머지 카드 스타일은 동일.
   날짜는 이름 옆이 아니라 이름 "아래"에 작게 표시(다른 디자인 타입은 기존처럼 이름과 한 줄에 표시). */
.guestbook-list[data-design="postit-2line"], .guestbook-list[data-design="postit-1line"] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guestbook-list[data-design="postit-1line"] { grid-template-columns: 1fr; }
.guestbook-list[data-design="postit-2line"] .guestbook-item,
.guestbook-list[data-design="postit-1line"] .guestbook-item {
  background: #fffbe0; box-shadow: 2px 4px 10px rgba(0,0,0,.08); transform: rotate(-1deg); border-radius: 2px; position: relative;
}
.guestbook-list[data-design="postit-2line"] .guestbook-item:nth-child(even),
.guestbook-list[data-design="postit-1line"] .guestbook-item:nth-child(even) { transform: rotate(1deg); background: #ffeef0; }
.guestbook-list[data-design="postit-2line"] .guestbook-item:nth-child(3n),
.guestbook-list[data-design="postit-1line"] .guestbook-item:nth-child(3n) { background: #eaf3ff; }
.guestbook-list[data-design="postit-2line"] .gb-head,
.guestbook-list[data-design="postit-1line"] .gb-head {
  flex-direction: column; align-items: flex-start; gap: 1px; margin-bottom: 8px;
}
.guestbook-list[data-design="postit-2line"] .gb-date,
.guestbook-list[data-design="postit-1line"] .gb-date { font-size: 10px; }
.guestbook-list[data-design="postit-2line"] .gb-msg {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}
.guestbook-list[data-design="postit-1line"] .gb-msg {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;
}
.gb-popup-trigger { display: block; width: 100%; text-align: center; padding: 16px; background: #faf8f6; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--theme-primary, #d97b8d); border: 1px dashed var(--theme-primary, #d97b8d); margin-top: 20px; }

.guestbook-list[data-design="card"] .guestbook-item {
  background: #fff; border: 1px solid #f1dde4; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.guestbook-list[data-design="card"] .gb-name { color: var(--theme-primary, #d97b8d); }

.guestbook-list[data-design="timeline"] { gap: 0; padding-left: 14px; border-left: 2px solid #f1dde4; }
.guestbook-list[data-design="timeline"] .guestbook-item {
  background: none; border-radius: 0; padding: 10px 0 18px 18px; position: relative;
}
.guestbook-list[data-design="timeline"] .guestbook-item::before {
  content: ""; position: absolute; left: -21px; top: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--theme-primary, #d97b8d); box-shadow: 0 0 0 3px #fff;
}
.gb-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; display: none; align-items: flex-end; justify-content: center; }
.gb-popup-overlay.open { display: flex; }
.gb-popup-sheet { background: #fff; width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 24px 22px; }
.gb-popup-sheet .gb-popup-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.gb-popup-close { background: none; border: none; font-size: 22px; color: #a19d99; }

/* ---- RSVP dynamic field visibility handled by [hidden] on markup ---- */
.rsvp-popup-notice { background: #f7e3ea; border-radius: 12px; padding: 14px 16px; font-size: 12.5px; color: #a85332; margin-bottom: 16px; white-space: pre-line; text-align: left; }

/* ---- RSVP modal (button opens a bottom sheet with the form) ---- */
.rsvp-trigger-btn { margin-top: 20px; }
.rsvp-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; display: none; align-items: flex-end; justify-content: center; }
.rsvp-modal-overlay.open { display: flex; }
.rsvp-modal-sheet { background: #fff; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 24px 22px; }
.rsvp-modal-sheet .rsvp-form { margin-top: 0; }
.rsvp-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rsvp-modal-close { background: none; border: none; font-size: 22px; color: #9c8089; }

/* ---- Kakao share preview modal ---- */
.kakao-preview-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; display: none; align-items: flex-end; justify-content: center; }
.kakao-preview-overlay.open { display: flex; }
.kakao-preview-sheet { background: #fff; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 24px 22px; }
.kakao-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.kakao-preview-close { background: none; border: none; font-size: 22px; color: #9c8089; }
.kakao-chat-mock { background: #b2c7d9; border-radius: 14px; padding: 18px 14px; }
.kakao-chat-row { display: flex; align-items: flex-end; gap: 8px; }
.kakao-chat-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.kakao-chat-card { background: #fff; border-radius: 4px 12px 12px 12px; overflow: hidden; max-width: 260px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.kakao-card-thumb { width: 100%; height: 140px; background-size: cover; background-position: center; background-color: #eee; }
.kakao-card-body { padding: 10px 12px 12px; }
.kakao-card-title { font-size: 13.5px; font-weight: 700; color: #222; line-height: 1.4; margin-bottom: 4px; }
.kakao-card-desc { font-size: 12px; color: #666; line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kakao-card-domain { font-size: 11px; color: #999; }
.kakao-preview-hint { font-size: 12px; color: #999; text-align: center; margin: 12px 0 4px; }
.kakao-preview-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* ---- Gallery variants ---- */
.gallery-grid[data-gtype="grid"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery-grid[data-gtype="swipe"], .gallery-grid[data-gtype="thumb_swipe"] { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -30px; padding-left: 30px; padding-right: 30px; }
.gallery-grid[data-gtype="swipe"] img, .gallery-grid[data-gtype="thumb_swipe"] img { flex: 0 0 78%; aspect-ratio: 4/5; scroll-snap-align: center; border-radius: 12px; }
.gallery-grid[data-gtype="masonry"] { display: block; column-count: 2; column-gap: 8px; }
.gallery-grid[data-gtype="masonry"] img { display: block; width: 100%; height: auto; aspect-ratio: auto; margin-bottom: 8px; border-radius: 8px; break-inside: avoid; -webkit-column-break-inside: avoid; cursor: pointer; }
.gallery-grid[data-gtype="polaroid"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px; padding: 10px 4px 4px; }
.gallery-grid[data-gtype="polaroid"] img {
  aspect-ratio: 1; object-fit: cover; border-radius: 2px; cursor: pointer;
  background: #fff; padding: 8px 8px 20px; box-shadow: 0 6px 14px rgba(0,0,0,.14); border: 1px solid #f1ede7;
}
.gallery-grid[data-gtype="polaroid"] img:nth-child(3n+1) { transform: rotate(-3deg); }
.gallery-grid[data-gtype="polaroid"] img:nth-child(3n+2) { transform: rotate(2deg); }
.gallery-grid[data-gtype="polaroid"] img:nth-child(3n) { transform: rotate(-1.5deg); }
.gallery-grid[data-gtype="round"] { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding-top: 4px; }
.gallery-grid[data-gtype="round"] img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; cursor: pointer; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.gallery-thumbstrip { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; }
.gallery-thumbstrip img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; opacity: .55; flex-shrink: 0; cursor: pointer; }
.gallery-thumbstrip img.active { opacity: 1; box-shadow: 0 0 0 2px var(--theme-primary, #d97b8d); }

/* ---- Account expand/collapse-all buttons ---- */
.account-toggle-btns { display: flex; gap: 8px; margin-top: 16px; }
.account-toggle-btn {
  flex: 1; padding: 9px 0; border-radius: 20px; border: 1.5px solid #e9e0d3; background: #faf8f6;
  color: #8a7d6f; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s ease;
}
.account-toggle-btn:active { background: #f3e8db; }
.account-toggle-btn.active {
  background: var(--theme-primary, #d97b8d); border-color: var(--theme-primary, #d97b8d);
  color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* ---- Emoji picker (transit / info-tab icons) ---- */
.emoji-picker-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.emoji-pick-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid #e9e0d3; background: #faf8f6;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s ease; padding: 0;
}
.emoji-pick-btn:hover { background: #f3e8db; }
.emoji-pick-btn.selected { border-color: #d97b8d; background: #fdf0f2; box-shadow: 0 0 0 2px rgba(217,123,141,.18); }
.account-item .info .kakaopay-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 9px !important; font-weight: 800;
  background: #FEE500; color: #3c1e1e; border-radius: 20px; padding: 2px 7px 2px 2px; margin-top: 5px;
  box-shadow: 0 2px 5px rgba(254,229,0,.5); vertical-align: middle;
}
.account-item .info .kakaopay-badge .kp-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 50%;
  background: #3c1e1e; color: #FEE500; font-size: 8px; font-weight: 900;
}

/* ---- Transit list ---- */
.transit-list { text-align: left; margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.transit-item { background: #faf8f6; border-radius: 12px; padding: 14px 16px; }
.transit-item .tr-name { font-weight: 700; font-size: 13.5px; color: var(--theme-primary, #d97b8d); margin-bottom: 4px; }
.transit-item .tr-content { font-size: 13px; color: #55524f; white-space: pre-line; }

/* ---- Venue map lock / sketch map ---- */
.map-embed { position: relative; }
.map-lock-overlay { position: absolute; inset: 0; background: transparent; z-index: 2; }
.map-lock-hint { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 4px 9px; border-radius: 20px; z-index: 3; pointer-events: none; }
.venue-sketch { margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid #eee; }
.venue-sketch img { width: 100%; display: block; }

/* ---- Basic-info / mourning marks ---- */
.mourning-mark { display: inline-block; line-height: 1; vertical-align: -1px; margin-right: 3px; }
/* Emoji glyphs (🌼/🎗️) render with a lot of built-in side-bearing whitespace in their own box,
   so a small margin-right alone still leaves a visible gap before the name — pull them in with a
   larger negative margin to sit them visually right next to the name (기존 3px 마진과 별개로 필요). */
.mourning-mark-emoji { font-size: 13px; margin-right: -11px; }
.mourning-mark-text { font-size: 0.92em; color: inherit; opacity: .75; }

/* ---- Countdown suppressed state ---- */
.dday-box.hidden-box { display: none; }

/* ---- BGM preset title chip ---- */
.bgm-toggle .bgm-title-chip { display: none; }

/* ---- Enhanced theme picker (dashboard) ---- */
.design-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.design-opt { border: 2px solid #f0dde3; border-radius: 12px; padding: 10px 6px; text-align: center; cursor: pointer; font-size: 12px; font-weight: 700; color: #8a7480; background: #fffdfe; }
.design-opt.selected { border-color: #b8607e; color: #b8607e; background: #f7e3ea; }
.design-opt .design-opt-icon { font-size: 22px; display: block; margin-bottom: 4px; }

/* Single-row horizontal-scroll variant (e.g. particle/cover effect picker, which has too many
   options to grid-wrap nicely) — swipe left/right instead of wrapping to extra rows. */
.design-picker-grid.design-picker-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  margin-bottom: -4px;
}
.design-picker-grid.design-picker-scroll .design-opt {
  flex: 0 0 82px;
  scroll-snap-align: start;
}
.design-picker-grid.design-picker-scroll::-webkit-scrollbar { height: 5px; }
.design-picker-grid.design-picker-scroll::-webkit-scrollbar-thumb { background: #f0dde3; border-radius: 3px; }
.live-preview-card { border: 1px solid #f0dde3; border-radius: 16px; padding: 20px 16px; background: linear-gradient(160deg, #fdf3f0 0%, #f8e9ee 100%); text-align: center; margin-bottom: 16px; }
.live-preview-card .lp-frame {
  width: 130px; margin: 0 auto 12px; overflow: hidden; aspect-ratio: 3/4; background: #f3e8db; position: relative;
  border-radius: 60px 60px 6px 6px; box-shadow: 0 14px 28px rgba(150,80,110,.22), 0 2px 8px rgba(150,80,110,.12);
  transition: border-radius .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease, width .45s ease, aspect-ratio .45s ease;
}
.live-preview-card .lp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-preview-card .lp-label { font-size: 12px; color: #9c8089; letter-spacing: .3px; }

/* Per-layout shape/shadow — selecting a layout should visibly change this thumbnail too, not just the hidden field */
.live-preview-card .lp-frame[data-layout="basic"], .live-preview-card .lp-frame[data-layout="fill"] {
  border-radius: 14px; aspect-ratio: 9/16; box-shadow: 0 16px 34px rgba(40,20,30,.3);
}
.live-preview-card .lp-frame[data-layout="arch"] { border-radius: 60px 60px 6px 6px; }
.live-preview-card .lp-frame[data-layout="oval"], .live-preview-card .lp-frame[data-layout="circle"] {
  border-radius: 50%; aspect-ratio: 1; width: 118px;
}
.live-preview-card .lp-frame[data-layout="circle"] {
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--theme-primary, #d97b8d), 0 14px 28px rgba(150,80,110,.3);
}
.live-preview-card .lp-frame[data-layout="frame"] {
  border-radius: 4px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--theme-primary, #d97b8d), 0 14px 28px rgba(150,80,110,.3);
}
.live-preview-card .lp-frame[data-layout="hexagon"] {
  border-radius: 0; background: #fff; padding: 6px; box-sizing: border-box; box-shadow: none;
  clip-path: polygon(50% 0%, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  filter: drop-shadow(0 0 0 3px var(--theme-primary, #d97b8d)) drop-shadow(0 12px 22px rgba(150,80,110,.32));
}
.live-preview-card .lp-frame[data-layout="hexagon"] img { clip-path: polygon(50% 0%, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); }
@keyframes lpPop { 0% { transform: scale(.92); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
.live-preview-card .lp-frame.lp-pop { animation: lpPop .45s cubic-bezier(.3,1.4,.4,1); }

/* font picker */
.font-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.font-opt { font-size: 15px !important; font-weight: 400 !important; padding: 14px 8px !important; }

/* Generic horizontal-scroll row with explicit left/right nav buttons (e.g. color presets —
   too many options to grid-wrap nicely, and unlike the plain-swipe particle picker this one
   also gets visible arrow buttons since the row isn't always obviously swipeable at a glance). */
.hscroll-row { display: flex; align-items: center; gap: 6px; }
.hscroll-row > .design-picker-scroll,
.hscroll-row > .color-preset-grid { flex: 1; min-width: 0; }
.hscroll-btn {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #f0dde3; background: #fffdfe;
  color: #b8607e; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hscroll-btn:hover { background: #f7e3ea; }
.hscroll-btn:disabled { opacity: .35; cursor: default; background: #fffdfe; }

/* color preset swatches */
.color-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 14px 10px; }
.color-preset-grid.design-picker-scroll {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 8px; margin-bottom: -4px;
}
.color-preset-grid.design-picker-scroll .color-preset { flex: 0 0 64px; scroll-snap-align: start; }
.color-preset-grid.design-picker-scroll::-webkit-scrollbar { height: 5px; }
.color-preset-grid.design-picker-scroll::-webkit-scrollbar-thumb { background: #f0dde3; border-radius: 3px; }
.color-preset {
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; padding: 0;
}
.color-preset .cp-swatch {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #f0dde3, 0 4px 10px rgba(150,80,110,.12);
  transition: box-shadow .15s ease, transform .15s ease; position: relative;
}
.color-preset:hover .cp-swatch { transform: translateY(-2px); }
.color-preset.selected .cp-swatch { box-shadow: 0 0 0 2px #b8607e, 0 6px 14px rgba(184,96,126,.32); }
.color-preset.selected .cp-swatch::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.color-preset .cp-name { font-size: 11px; font-weight: 700; color: #9c8089; text-align: center; }
input[type=color] { width: 100%; height: 42px; padding: 3px; border: 1px solid #e5dcd0; border-radius: 10px; background: #fff; cursor: pointer; }
input[type=range] { width: 100%; accent-color: #b8607e; }

/* ---- Repeatable list editor rows (timeline / interview / transit / couple profile) ---- */
.repeat-list { display: flex; flex-direction: column; gap: 14px; }
.repeat-item { border: 1px solid #f0dde3; border-radius: 14px; padding: 16px; background: #faf1f3; position: relative; }
.repeat-item .repeat-remove {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; line-height: 1; padding: 0;
}
.repeat-item .repeat-photo-preview { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: #f3e8db; margin-bottom: 8px; }
.repeat-item .repeat-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.mini-upload-btn { font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px dashed #dcb3c0; background: #fff; color: #9c8089; cursor: pointer; display: inline-block; }
.mini-upload-btn:hover { border-color: #b8607e; color: #b8607e; }

/* ---- BGM preset picker (dashboard) ---- */
.bgm-preset-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bgm-preset-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #f0dde3; border-radius: 10px; }
.bgm-preset-row.selected { border-color: #b8607e; background: #f7e3ea; }
.bgm-preset-row .bgm-play-btn { width: 30px; height: 30px; border-radius: 50%; background: #f3e8db; border: none; font-size: 12px; flex-shrink: 0; }
.bgm-preset-row .bgm-preset-name { flex: 1; font-size: 13px; font-weight: 600; }

@media (max-width: 480px) {
  .couple-profile[data-layout="horizontal"] .cp-grid { grid-template-columns: 1fr; }
  .interview-photos { flex-direction: row; }
}

/* ---- Flower notice / live stream / visit counter ---- */
.flower-notice { margin-top: 22px; font-size: 12.5px; color: #a19d99; letter-spacing: .2px; }
.live-stream-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 20px; border-radius: 12px;
  background: #1c1c1e; color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .3px;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255,77,77,.6); animation: liveDotPulse 1.6s infinite; }
@keyframes liveDotPulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,77,.6); } 70% { box-shadow: 0 0 0 8px rgba(255,77,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); } }
.visit-count { text-align: center; font-size: 12px; color: #a19d99; padding: 0 30px 30px; margin-top: -10px; }
.visit-count b { color: var(--theme-primary, #d97b8d); font-weight: 800; }

/* =====================================================================
   Intro splash (entrance screen) — tap-to-open before the invitation
   각 스타일마다 전체 테마 색상과 분리된 고유 팔레트를 가짐(인트로 전용 테마세트).
   `intro_use_theme_color` 옵션이 켜져 있으면 --theme-primary 커스텀 프로퍼티로 오버라이드됨.
   ===================================================================== */
.intro-splash {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(160deg, var(--theme-primary, #d9917e) 0%, #fbe9dd 100%);
  color: #fff; text-align: center; cursor: pointer; overflow: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}
.intro-splash[data-enabled="0"] { display: none; }
.intro-splash.intro-hidden { display: none; }
.intro-splash.closing { opacity: 0; pointer-events: none; }
.nav-menu-link-intro { display: flex; align-items: center; gap: 6px; }
.nav-menu-link-intro::before { content: "✨"; font-size: 13px; }
.intro-splash::before {
  content: ""; position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.6); pointer-events: none;
}
.intro-splash::after {
  content: ""; position: absolute; inset: 22px; border: 1px solid rgba(255,255,255,.3); pointer-events: none;
}
.intro-inner { position: relative; padding: 0 30px; width: 100%; box-sizing: border-box; text-align: center; animation: introFadeIn 1s ease both; z-index: 2; }
.intro-mark { font-size: 32px; margin-bottom: 22px; text-align: center; animation: introFloat 3s ease-in-out infinite; }
.intro-names { font-family: var(--font-heading, 'Gowun Batang', serif); font-size: 27px; letter-spacing: .5px; margin-bottom: 12px; width: 100%; text-align: center; }
.intro-names .amp { opacity: .8; margin: 0 10px; font-weight: 300; }
.intro-date { font-size: 12.5px; letter-spacing: 2.5px; opacity: .92; text-transform: uppercase; margin-bottom: 40px; width: 100%; text-align: center; }
.intro-message { font-size: 13.5px; line-height: 1.85; opacity: .95; white-space: pre-line; margin-bottom: 28px; font-family: var(--font-body, inherit); width: 100%; text-align: center; }
.intro-tap { font-size: 12px; letter-spacing: 1.5px; opacity: .92; padding: 12px 26px; border: 1px solid rgba(255,255,255,.7); border-radius: 30px; display: inline-block; text-align: center; animation: introPulse 2.2s ease-in-out infinite; }
.intro-tap-auto { animation: none; opacity: .78; border-color: rgba(255,255,255,.45); }
@keyframes introFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes introFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes introPulse { 0%, 100% { opacity: .6; box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { opacity: 1; box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
body.invite-page.intro-locked { overflow: hidden; height: 100vh; }

/* ---- 기본형 비주얼 + 자동 닫힘 조합: 샴페인 골드 듀오톤, 은은한 광택
   (예전엔 "자동 닫힘"이 곧 이 비주얼을 의미하는 별도 intro_style 값이었지만, 이제 비주얼(default)과
   닫는 방식(auto)이 독립된 값이 됨 — 예전 조합의 룩을 그대로 보존하기 위해 두 값이 동시에 이 조합일
   때만 이 팔레트를 적용) ---- */
.intro-splash[data-mode="default"][data-close="auto"] {
  background: linear-gradient(165deg, #d8b26a 0%, var(--theme-primary, #b8895a) 45%, #6f5636 100%);
}
.intro-splash[data-mode="default"][data-close="auto"] .intro-mark { animation: introFloat 3s ease-in-out infinite, introShimmer 2.4s ease-in-out infinite; }
.intro-splash[data-mode="default"][data-close="auto"] .intro-names { letter-spacing: 1.5px; }
@keyframes introShimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

/* ---- 커튼 열림 (curtain): 딥 버건디, 실제로 좌우 커튼 패널이 열리는 연출 ---- */
.intro-splash[data-mode="curtain"] {
  background: radial-gradient(ellipse 90% 60% at 50% 30%, rgba(255,255,255,.12), transparent 65%),
    linear-gradient(165deg, #2b1420 0%, var(--theme-primary, #6e2438) 55%, #3a1220 100%);
}
.intro-curtain {
  position: absolute; top: 0; bottom: 0; width: 52%; z-index: 3; pointer-events: none;
  background: linear-gradient(120deg, #4a1728 0%, #7a2c42 55%, #4a1728 100%);
  box-shadow: 0 0 40px rgba(0,0,0,.5);
}
.intro-curtain::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 8px, rgba(255,255,255,.05) 8px 16px);
}
.intro-curtain-left { left: 0; border-radius: 0 40px 40px 0; animation: introCurtainOpenLeft 1.1s cubic-bezier(.65,0,.35,1) .15s both; }
.intro-curtain-right { right: 0; border-radius: 40px 0 0 40px; animation: introCurtainOpenRight 1.1s cubic-bezier(.65,0,.35,1) .15s both; }
@keyframes introCurtainOpenLeft { from { transform: translateX(0); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@keyframes introCurtainOpenRight { from { transform: translateX(0); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.intro-splash[data-mode="curtain"] .intro-inner { animation: introCurtainReveal 1s ease .6s both; }
.intro-splash[data-mode="curtain"] .intro-names { font-size: 30px; letter-spacing: 4px; font-weight: 600; text-transform: uppercase; }
.intro-splash[data-mode="curtain"] .intro-date { letter-spacing: 4px; }
.intro-splash[data-mode="curtain"]::before { inset: 26px; border-width: 1px; border-color: rgba(230,190,150,.5); }
.intro-splash[data-mode="curtain"]::after { display: none; }
@keyframes introCurtainReveal { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }

/* ---- 꽃잎 흩날림 (petal): 소프트 로즈, 실제 이모지 파티클이 흩날림(JS: spawnIntroPetals) ---- */
.intro-splash[data-mode="petal"] {
  background: linear-gradient(175deg, #ffeef3 0%, var(--theme-primary, #e2a3ba) 60%, #f6c9d6 100%);
}
.intro-splash[data-mode="petal"] .intro-names { font-size: 28px; letter-spacing: 1px; }
.intro-petal-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

/* ---- 타이핑 효과 (typing): 에디토리얼 차콜 + 아이보리, 이탤릭 세리프 타이핑 연출 ---- */
.intro-splash[data-mode="typing"] {
  background: linear-gradient(180deg, #2a2622 0%, var(--theme-primary, #3d372e) 100%);
  color: #f3ecdf;
}
.intro-splash[data-mode="typing"]::before { border-color: rgba(243,236,223,.35); }
.intro-splash[data-mode="typing"]::after { border-color: rgba(243,236,223,.18); }
.intro-splash[data-mode="typing"] .intro-mark { animation: none; opacity: .85; }
.intro-splash[data-mode="typing"] .intro-names {
  font-style: italic; font-weight: 600; font-size: 25px; min-height: 1.3em;
  display: flex; align-items: center; justify-content: center;
}
.intro-typing-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: #f3ecdf; animation: introCursorBlink .8s step-end infinite; vertical-align: middle; }
@keyframes introCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* date/message/tap prompt stay hidden until the typing finishes, then fade in together */
.intro-splash[data-mode="typing"] .intro-inner[data-typing="1"] .intro-date,
.intro-splash[data-mode="typing"] .intro-inner[data-typing="1"] .intro-message,
.intro-splash[data-mode="typing"] .intro-inner[data-typing="1"] .intro-tap {
  opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease;
}
.intro-splash[data-mode="typing"] .intro-inner.intro-typed-done .intro-date,
.intro-splash[data-mode="typing"] .intro-inner.intro-typed-done .intro-message,
.intro-splash[data-mode="typing"] .intro-inner.intro-typed-done .intro-tap {
  opacity: 1; transform: translateY(0);
}

/* ---- 미니멀 라인 (minimal): 아이보리 + 블랙, 얇은 가로선이 좌우로 펼쳐지는 절제된 연출 ---- */
.intro-splash[data-mode="minimal"] {
  background: linear-gradient(180deg, #faf7f2 0%, #f3ede3 100%);
  color: #2b2620;
}
.intro-splash[data-mode="minimal"]::before,
.intro-splash[data-mode="minimal"]::after { display: none; }
.intro-splash[data-mode="minimal"] .intro-mark { display: none; }
.intro-splash[data-mode="minimal"] .intro-names {
  font-size: 24px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase;
  padding-bottom: 18px; margin-bottom: 18px; position: relative;
}
.intro-splash[data-mode="minimal"] .intro-names::after {
  content: ""; position: absolute; left: 50%; bottom: 0; height: 1px; width: 0;
  background: var(--theme-primary, #2b2620); transform: translateX(-50%);
  animation: introMinimalLine 1.1s ease .3s forwards;
}
@keyframes introMinimalLine { from { width: 0; } to { width: 64px; } }
.intro-splash[data-mode="minimal"] .intro-date { color: var(--theme-primary, #8a7f6c); }
.intro-splash[data-mode="minimal"] .intro-tap { border-color: rgba(43,38,32,.35); color: #2b2620; }
.intro-splash[data-mode="minimal"] .intro-tap-auto { border-color: rgba(43,38,32,.2); }

/* ---- 별빛 반짝임 (starlight): 딥 네이비 + 골드, 반짝이는 별 파티클(JS: spawnIntroPetals 재사용) ---- */
.intro-splash[data-mode="starlight"] {
  background: radial-gradient(ellipse 80% 55% at 50% 15%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, #0f1730 0%, var(--theme-primary, #1c2a4d) 55%, #060a18 100%);
  color: #f5ecd2;
}
.intro-splash[data-mode="starlight"]::before { border-color: rgba(245,236,210,.4); }
.intro-splash[data-mode="starlight"]::after { border-color: rgba(245,236,210,.18); }
.intro-splash[data-mode="starlight"] .intro-mark { animation: introTwinkleMark 2s ease-in-out infinite; }
@keyframes introTwinkleMark { 0%, 100% { opacity: .7; } 50% { opacity: 1; text-shadow: 0 0 12px rgba(245,236,210,.8); } }
.intro-splash[data-mode="starlight"] .intro-names { letter-spacing: 2px; }
.intro-splash[data-mode="starlight"] .intro-tap { border-color: rgba(245,236,210,.6); }
.intro-star-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

/* =====================================================================
   Premium feature pack — multi-invitation dashboard, on/off tab clarity,
   particle effects, reception, flower-order CTA, tabbed info box, cover video
   ===================================================================== */

/* ---- Sidebar: invitation-list entry + divider ---- */
.dash-side-divider { height: 1px; background: #f0dde3; margin: 10px 4px; }

/* ---- My invitations (list) ---- */
.page-head-sub { font-size: 13px; color: #9c8089; margin-top: 4px; }
.inv-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.inv-card { background: #fffdfe; border: 1px solid #f0dde3; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(150,80,110,.06); transition: transform .15s ease, box-shadow .15s ease; }
.inv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(150,80,110,.12); }
.inv-card-thumb { aspect-ratio: 16/10; background: #f3e8db; display: flex; align-items: center; justify-content: center; }
.inv-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.inv-card-thumb-ph { font-size: 32px; opacity: .5; }
.inv-card-body { padding: 16px; }
.inv-card-badges { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.inv-card-views { font-size: 11.5px; color: #9c8089; }
.inv-card-name { font-size: 16px; font-weight: 800; color: #3d332c; }
.inv-card-date { font-size: 12.5px; color: #9c8089; margin-top: 3px; margin-bottom: 14px; }
.inv-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-card-actions .btn { flex: 1; }
.inv-card-actions .inv-card-del { flex: 0 0 auto; }

/* ---- Builder tab bar: clear on/off distinction ---- */
.builder-tab { position: relative; opacity: 1; transition: opacity .15s ease, color .15s ease; }
.builder-tab.tab-off { opacity: .58; }

/* Clickable on/off toggle icon in the corner of each tab card */
.bt-toggle {
  position: absolute; top: 4px; right: 4px; width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1;
  background: #f3e8db; color: #b9a99a; cursor: pointer; transition: all .15s ease;
}
.bt-toggle:hover { transform: scale(1.15); }
.bt-toggle.bt-toggle-on { background: #FEE500; color: #3c1e1e; }
.builder-tab.active .bt-toggle { background: rgba(255,255,255,.35); color: #fff; }
.builder-tab.active .bt-toggle.bt-toggle-on { background: #FEE500; color: #3c1e1e; }

/* ---- Dashboard generic modal (샘플보기, etc.) ---- */
.dash-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 900; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.dash-modal-overlay.open { display: flex; }
.dash-modal-sheet { background: #fff; width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; border-radius: 18px; padding: 24px 22px; }
.dash-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dash-modal-close { background: none; border: none; font-size: 22px; color: #9c8089; cursor: pointer; }
.dash-sample-list { display: flex; flex-direction: column; gap: 10px; }
.dash-sample-item {
  text-align: left; background: #faf5f6; border: 1px solid #f1dde4; border-radius: 12px; padding: 12px 14px;
  font-size: 13px; line-height: 1.7; color: #4a4a4a; white-space: pre-line; cursor: pointer; transition: all .15s ease;
}
.dash-sample-item:hover { border-color: #b8607e; background: #f7e3ea; }

/* ---- Generic pill toggle (사용함 / 사용안함 style two-button switch) ---- */
.pill-toggle-row { display: flex; gap: 8px; }
.pill-toggle-btn {
  flex: 1; padding: 11px 14px; border-radius: 10px; border: 1px solid #e5dcd0; background: #fff;
  color: #8a7480; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .15s ease;
}
.pill-toggle-btn:hover { border-color: #dcb3c0; }
.pill-toggle-btn.active { background: #b8607e; border-color: #b8607e; color: #fff; }

/* ---- Defensive, robust cover-photo preview (fixed height, not aspect-ratio-only) ---- */
.cover-photo-preview {
  width: 100%; max-width: 280px; height: 280px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  background: #f3e8db; display: flex; align-items: center; justify-content: center;
}
.cover-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-photo-preview-ph { font-size: 34px; opacity: .4; }

/* ---- Tabbed info box (예: 포토부스 / 식사안내 / 주차안내) ---- */
.info-tab-box { margin-top: 6px; }
.info-tab-nav { display: flex; border: 1px solid #eee; border-radius: 14px 14px 0 0; overflow: hidden; background: #faf8f6; }
.info-tab-btn { flex: 1; padding: 13px 8px; font-size: 13px; font-weight: 700; color: #a19d99; background: none; border: none; border-bottom: 2px solid transparent; }
.info-tab-btn.active { color: var(--theme-primary, #d97b8d); background: #fff; border-bottom-color: var(--theme-primary, #d97b8d); }
.info-tab-panels { border: 1px solid #eee; border-top: none; border-radius: 0 0 14px 14px; padding: 20px 18px; text-align: center; }
.info-tab-panel { display: none; }
.info-tab-panel.active { display: block; }
.info-tab-photo { border-radius: 12px; overflow: hidden; margin-bottom: 16px; background: #f3f1ee; }
.info-tab-photo img { width: 100%; display: block; }
.info-tab-content { font-size: 13.5px; line-height: 1.9; color: var(--theme-text, #55524f); white-space: pre-line; }

/* ---- Reception (피로연) card ---- */
.reception-card { border: 1px solid #eee; border-radius: 16px; padding: 24px 22px; text-align: center; }
.reception-title { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .5px; background: #faf1f3; color: var(--theme-primary, #d97b8d); border-radius: 20px; padding: 6px 16px; margin-bottom: 18px; }
.reception-message { font-size: 13.5px; line-height: 1.9; color: var(--theme-text, #55524f); white-space: pre-line; margin-bottom: 14px; }
.reception-meta { font-size: 13.5px; color: #55524f; margin-bottom: 4px; }
.reception-map-btn { margin-top: 14px; }

/* ---- Flower order CTA card ---- */
.flower-order-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff;
  border: 1px solid #f0eeec; border-radius: 16px; padding: 22px 24px; box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.flower-order-title { font-size: 15px; font-weight: 700; color: #2b2b2b; }
.flower-order-desc { font-size: 12.5px; color: #a19d99; margin-top: 6px; }
.flower-order-icon { font-size: 30px; flex-shrink: 0; }

/* ---- Floating flower-order button (always visible, bottom-left) ---- */
.flower-order-float {
  position: fixed; left: 16px; bottom: 20px; z-index: 400; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(145deg, #fff, #fdf3f6); box-shadow: 0 8px 22px rgba(0,0,0,.16), 0 0 0 1px #f7e3ea;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  animation: flowerFloatBob 2.6s ease-in-out infinite;
}
.flower-order-float-icon { font-size: 24px; }
.flower-order-float-pending { opacity: .6; cursor: default; }
/* Editor live-preview only: nudged out of the .phone-frame mockup's rounded-corner clip zone (see
   comment at the call site in invite-template.js), and z-index raised above .intro-splash (500) —
   the "항상 표시" (always show) toggle is meant to always float on top even while editing the
   intro tab itself (where .intro-splash is intentionally kept visible), not just on other tabs. */
.flower-order-float-preview { left: 30px; bottom: 60px; z-index: 510; }
@keyframes flowerFloatBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---- Cover video background ---- */
.cover-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.invite-cover[data-layout="basic"] .cover-bg-video, .invite-cover[data-layout="fill"] .cover-bg-video { position: absolute; }
.invite-cover .cover-inner { position: relative; z-index: 2; }
.cover-photo-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Particle effect overlay (falling petals/hearts/snow/bubbles/leaves, confetti bursts, sparkle) ---- */
.particle-overlay { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
.particle { position: absolute; top: -8%; will-change: transform, opacity; }
.particle-fall { animation-name: particleFall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes particleFall {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(112vh) rotate(340deg); }
}
.particle-confetti { animation: particleBurst 1.8s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes particleBurst {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(220deg); opacity: 0; }
}
.intro-splash .particle-overlay, .intro-splash ~ .particle-overlay { z-index: 600; }