/* ============ 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; }
/* 하트 포유 로고(2026-07-30 시안 1번 확정) — ONLY + [하트 속 4 패스] + U.
 * 워드마크는 Didot 우선(맥/iOS 내장) → 세리프 폴백. 심볼(하트4)은 순수 SVG 패스라 어디서나 동일. */
.logo { font-family: Didot, 'Bodoni 72', 'Playfair Display', Georgia, 'Times New Roman', serif; font-size: 21px; font-weight: 700; color: #b8607e; letter-spacing: .08em; display: flex; align-items: baseline; }
.logo .logo-h4 { height: .88em; width: auto; align-self: center; margin: 0 .09em; transform: translateY(.02em); }
.logo span { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: 12px; font-weight: 500; color: #9c8089; margin-left: 8px; letter-spacing: 0; }
/* 카테고리 상단 메뉴(2026-07-30) — 관리자가 '노출' 체크한 카테고리가 헤더 아래 한 줄로 */
.cat-nav { border-top: 1px solid #f8eff1; background: #fffdfe; }
.cat-nav-inner { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-nav-item { font-size: 13.5px; font-weight: 600; color: #6b5a62; padding: 9px 12px; white-space: nowrap; border-bottom: 2px solid transparent; }
.cat-nav-item:hover { color: #b8607e; border-bottom-color: #ecd4dc; }
.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: 48px 0 32px; 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; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.footer-logo { font-family: Didot, 'Bodoni 72', 'Playfair Display', Georgia, var(--font-serif, serif); font-size: 21px; font-weight: 700; letter-spacing: .09em; color: #f1e6da; display: flex; align-items: center; justify-content: center; }
.footer-logo .logo-h4 { height: .88em; width: auto; margin: 0 .09em; }
.footer-tagline { font-size: 12.5px; color: #b3a297; margin: 0; }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 12.5px; color: #e2d5c8; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); width: 100%; max-width: 620px; }
.footer-contact-item { display: inline-flex; align-items: center; gap: 6px; color: #e2d5c8; }
.footer-contact a.footer-contact-item:hover { color: #f1c6d1; }
.footer-contact .fc-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #8a7568; background: rgba(255,255,255,.06); border-radius: 4px; padding: 2px 6px; }
.footer-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 40px; width: 100%; max-width: 760px; text-align: left; }
.footer-info-block .footer-info-title { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #8a7568; margin-bottom: 8px; }
.footer-info-block p { font-size: 11.5px; line-height: 1.9; color: #a8988c; margin: 0; }
.footer-info-block a { color: #c3a2ab; text-decoration: underline; text-underline-offset: 2px; }
.footer-info-block a:hover { color: #f1c6d1; }
.footer-copy { margin-top: 4px; }
@media (max-width: 640px) {
  .footer-info-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-contact { justify-content: center; }
}

/* ============ 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-visual-stage { position: relative; width: 280px; }
.hero-sparkle { position: absolute; color: #e3a6b5; font-size: 22px; z-index: -1; animation: heroSparkle 3.2s ease-in-out infinite; pointer-events: none; }
.hero-sparkle-1 { top: 6%; left: 4%; animation-delay: 0s; font-size: 26px; }
.hero-sparkle-2 { top: 46%; right: -2%; animation-delay: .9s; font-size: 18px; color: #f0c39a; }
.hero-sparkle-3 { bottom: 10%; left: 0; animation-delay: 1.7s; font-size: 20px; }
@keyframes heroSparkle {
  0%, 100% { opacity: .35; transform: scale(.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(14deg); }
}
.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;
  display: block; margin: 0 auto; padding: 0; cursor: pointer; font: inherit; appearance: none; -webkit-appearance: none;
}
.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;
}
@keyframes heroPhoneFloat {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-7deg) translateY(-18px); }
}
/* 히어로 폰목업 안쪽 커버 카드 — 실시간 iframe 대신 실제 청첩장 커버처럼 사진+텍스트를
   합성한 정적 카드(#182). 탭하면 진짜 청첩장을 모달로 보여준다(hero-phone-mock의 클릭 핸들러). */
.hero-cover-card {
  width: 100%; height: 100%; background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 18px 22px; color: #fff; box-sizing: border-box;
}
.hero-cover-eyebrow { font-size: 10px; letter-spacing: 2.5px; font-weight: 700; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.hero-cover-spacer { flex: 1; }
.hero-cover-names { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; font-weight: 700; line-height: 1.3; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.hero-cover-amp { display: block; font-size: 14px; opacity: .85; margin: 2px 0; font-style: italic; }
.hero-cover-date { margin-top: 10px; font-size: 11.5px; letter-spacing: .5px; color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.hero-cover-cta {
  margin-top: 16px; font-size: 10.5px; padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.55);
  color: #fff; letter-spacing: .3px; backdrop-filter: blur(2px);
}
/* 폰 목업 주위를 감싸는 화보st러운 폴라로이드 사진 카드 — "화려하게" 요청(#181)에 맞춰 히어로가
   밋밋한 단일 목업 하나만 있을 때보다 훨씬 풍성해 보이도록 추가. */
.hero-photo-chip {
  position: absolute; width: 92px; padding: 6px 6px 20px; background: #fff; border-radius: 6px;
  box-shadow: 0 16px 30px rgba(80,40,50,.22); z-index: 3; animation: heroChipFloat 5.5s ease-in-out infinite;
}
.hero-photo-chip img { width: 100%; height: 100px; object-fit: cover; border-radius: 3px; display: block; }
.hero-photo-chip-1 { top: -18px; left: -46px; transform: rotate(-11deg); animation-delay: .2s; }
.hero-photo-chip-2 { bottom: 22px; right: -52px; width: 84px; transform: rotate(9deg); animation-delay: 1.1s; }
.hero-photo-chip-2 img { height: 90px; }
.hero-photo-chip-cap { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 9px; color: #a68f7f; font-weight: 600; }
@keyframes heroChipFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
.hero-photo-chip-1 { --rot: -11deg; }
.hero-photo-chip-2 { --rot: 9deg; }
@media (max-width: 560px) {
  .hero-photo-chip { display: none; }
}
.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: 32px; font-weight: 800; margin-bottom: 14px; letter-spacing: -.3px; }
.section-title::after {
  content: "♥"; display: block; margin: 12px auto 0; font-size: 13px; color: #e3a6b5;
}
.section-sub { text-align: center; color: #8a7480; margin-bottom: 48px; font-size: 15.5px; }

/* 스크롤하며 섹션들이 살짝 떠오르듯 나타나는 연출 — 랜딩페이지 전체를 "화려하게" 요청(#181)에
   맞춰 정적인 페이지보다 생동감 있게 느껴지도록 추가. 초기 opacity:0은 JS(reveal-up 초기화)가
   .in-view를 못 붙이는 경우(스크립트 오류 등)에도 콘텐츠가 아예 안 보이면 안 되므로, 아래
   noscript 안전장치와 함께 짧은 시간 안에 강제로 보이게 하는 폴백을 페이지 스크립트에 둔다. */
/* 요청("마우스에 반응하는 슬라이드로 스르륵 내려오게")에 맞춰 아래에서 떠오르는 방향이 아니라
   위에서 살짝 내려와 자리를 잡는 방향으로 변경 — 클래스 이름(.reveal-up)은 기존 JS와의 호환을
   위해 그대로 유지. */
.reveal-up { opacity: 0; transform: translateY(-28px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal-up.in-view { opacity: 1; transform: translateY(0); }

/* ---- 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;
  transform-origin: left center; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.3,1) .25s;
}
.step-row.in-view::before { transform: scaleX(1); }
.step-card { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
/* 01→02→03 카드가 각자 왼쪽에서 오른쪽으로 스르륵 밀려나오는 전용 애니메이션 — 다른 카드형
   섹션(.reveal-up, 위에서 아래로)과는 결이 달라서 별도 클래스로 분리. */
.step-slide { opacity: 0; transform: translateX(-56px); transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1); }
.step-row.in-view .step-slide { opacity: 1; transform: translateX(0); }
.step-row .step-slide:nth-child(1) { transition-delay: .2s; }
.step-row .step-slide:nth-child(2) { transition-delay: .45s; }
.step-row .step-slide:nth-child(3) { transition-delay: .7s; }
.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-card:hover .feature-icon-badge { transform: scale(1.08) rotate(-4deg); }
.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); transition: transform .25s ease;
}
.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; }
  .hero-visual-stage { width: 230px; }
  .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; }

/* ---- 네이버 로그인 버튼 (실제 네이버 공식 브랜드 색상/레이아웃 — 진짜 OAuth로 연결되므로 그대로 사용) ---- */
.naver-login-btn {
  display: flex; align-items: stretch; width: 100%; height: 48px; border-radius: 8px; overflow: hidden;
  background: #03c75a; text-decoration: none; box-shadow: 0 4px 14px rgba(3,199,90,.3);
  transition: filter .15s ease, transform .15s ease;
}
.naver-login-btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.naver-login-icon {
  display: flex; align-items: center; justify-content: center; width: 50px; flex-shrink: 0;
  font-size: 19px; font-weight: 800; color: #fff; border-right: 1px solid rgba(255,255,255,.32);
}
.naver-login-label { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; color: #b3a89e; font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #f0e5d8; }
/* 헤더용 소형 변형 — 사이트 상단 헤더의 "로그인" 버튼을 네이버 공식 버튼 모양(첨부 이미지)으로
   맞춘 것(2026-07-27). 회원가입 버튼(btn-sm, 높이 ~32px)과 나란히 놓이므로 같은 높이로 줄인다. */
.naver-login-btn-sm { width: auto; height: 32px; border-radius: 6px; box-shadow: 0 2px 8px rgba(3,199,90,.25); }
.naver-login-btn-sm .naver-login-icon { width: 30px; font-size: 14px; }
.naver-login-btn-sm .naver-login-label { padding: 0 12px; font-size: 13px; }

/* ============ 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; }
/* 사이드바 2차 메뉴(2026-07-30 "2차메뉴로 각 메뉴 넣어줘") — 내 카드 목록/카드 관리 아래 카테고리.
 * 기본 접힘(클릭 시 펼침 — data-subnav-toggle), 활성 표시는 배경 없이 글자색·볼드만
 * ("1차 메뉴 활성화와 2차 메뉴 활성화가 같아서 보기가 안 좋아" — 1차=배경, 2차=텍스트로 구분). */
.side-subnav { display: none; margin: 2px 0 6px; padding-left: 14px; border-left: 2px solid #f3e2e8; margin-left: 12px; }
.side-subnav.open { display: block; }
.side-caret { font-size: 10px; color: #c9a4b1; margin-left: auto; }
.side-sublink { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #8a7480; margin-bottom: 1px; }
.side-sublink span { font-size: 11.5px; color: #c9a4b1; font-weight: 700; }
.side-sublink:hover { background: #f8eff1; color: #b8607e; }
.side-sublink.active { background: transparent; color: #b8607e; font-weight: 800; }
.side-sublink.active span { color: #b8607e; }
.admin-side .side-sublink.active { background: transparent; color: #2f5fb3; }
.admin-side .side-sublink.active span { color: #2f5fb3; }
.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; }
  /* 모바일: 2차 메뉴가 열렸을 때 가로 칩 흐름에 자연스럽게 합류(접힘 상태는 그대로 숨김) */
  .side-subnav { display: none; }
  .side-subnav.open { display: contents; }
  .side-sublink { border: 1.5px solid #f0dde3; background: #fff; border-radius: 999px; padding: 7px 12px; white-space: nowrap; flex: 0 0 auto; }
  .side-sublink.active { border-color: #d97b8d; color: #b8607e; background: #fff; }
  .side-link { white-space: nowrap; flex: 0 0 auto; }
}

.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-cat { background: #fdf3f6; color: #b8607e; border: 1px solid #f0dde3; }
/* 마이페이지 카테고리 필터 칩(2026-07-30) */
.inv-cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.inv-cat-chip { font-size: 13px; font-weight: 600; color: #6b5a62; background: #fff; border: 1.5px solid #f0dde3; border-radius: 999px; padding: 7px 14px; transition: all .15s; }
.inv-cat-chip span { font-size: 11.5px; color: #c9a4b1; margin-left: 2px; }
.inv-cat-chip:hover { border-color: #e0b7c3; color: #b8607e; }
.inv-cat-chip.active { background: #d97b8d; border-color: #d97b8d; color: #fff; }
.inv-cat-chip.active span { color: #fbe3ea; }
.inv-card-copy-form { display: inline; margin: 0; }
/* 내 구매내역 사용여부 라벨 + 사용 이력(2026-07-30) */
.purchase-badge { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.purchase-badge-unused { background: #e8f5ec; color: #2e7d43; }
.purchase-badge-partial { background: #fdf3f6; color: #b8607e; border: 1px solid #f0dde3; }
.purchase-badge-done { background: #f3e8db; color: #7a6d61; }
.purchase-row-uses { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.purchase-use-line { font-size: 12.5px; color: #8a7480; background: #faf6f7; border-radius: 8px; padding: 5px 10px; }
.purchase-use-line b { color: #6b5a62; }
.purchase-hero-cats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.purchase-hero-cat { font-size: 12.5px; font-weight: 600; color: #8a6474; background: rgba(255,255,255,.75); border: 1px solid #f0d7de; border-radius: 999px; padding: 5px 12px; }
.purchase-hero-cat b { color: #b8607e; }
.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; }
.admin-inv-link { color: #b8607e; font-weight: 700; text-decoration: none; border-bottom: 1px dashed #e3b6c3; }
.admin-inv-link:hover { color: #973f5f; border-bottom-style: solid; }
.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); }
/* 예식일 경과로 편집이 잠긴 청첩장 — 탭 이동/미리보기는 그대로 두고 실제 입력 영역만 흐리게 + 클릭 차단 */
#builder-form.is-locked .form-section { opacity: .55; pointer-events: none; filter: grayscale(.2); }
.builder-savebar #save-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@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; }
/* 탭 아이콘 드래그 순서변경(2026-07-30) — 드래그 가능한 탭 표시 + 드래그 중 스타일.
 * 데스크톱 전용(모바일 세로 레일은 스크롤이 우선이라 touch-action을 건드리지 않는다 —
 * 모바일에서는 '섹션 노출·순서' 탭의 드래그 리스트로 순서 변경). */
@media (min-width: 901px) {
  .builder-tab-draggable { touch-action: none; }
  .builder-tab-draggable:active { cursor: grabbing; }
}
.builder-tab.bt-dragging { opacity: .75; transform: scale(1.06); border-color: #d97b8d; box-shadow: 0 10px 24px rgba(184,96,126,.28); z-index: 5; position: relative; }
.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; flex-wrap: wrap; gap: 16px 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; width: 64px; }
.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; }
.share-btn.is-saving { opacity: .6; pointer-events: none; }

.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_button_style, 2026-07-27) ---- */
/* dark = 기본(반투명 어두운 원) — 위 기본 스타일 그대로 */
.nav-menu-toggle.nav-style-light { background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.nav-menu-toggle.nav-style-light span { background: #3d3833; }
.nav-menu-toggle.nav-style-theme { background: var(--theme-primary, #d97b8d); box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.nav-menu-toggle.nav-style-outline { background: transparent; border: 1.5px solid rgba(255,255,255,.85); }
.nav-menu-toggle.nav-style-minimal { background: transparent; }
.nav-menu-toggle.nav-style-minimal span { width: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.nav-menu-toggle.nav-style-square { border-radius: 12px; background: rgba(30,26,22,.55); }
.nav-menu-toggle.open { background: var(--theme-primary, #d97b8d); }
/* 열려 있는 동안엔 어떤 프리셋이든 스팬(X자)이 잘 보이도록 흰색으로 통일 */
.nav-menu-toggle.open span { background: #fff; }
.nav-menu-toggle.nav-style-outline.open { border-color: transparent; }
/* 에디터 테마 탭의 메뉴 버튼 프리셋 픽커에 쓰는 미니 견본(swatch) */
.nav-style-chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; }
.nav-style-chip-dark { background: rgba(0,0,0,.45); color: #fff; }
.nav-style-chip-light { background: #fff; color: #3d3833; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.nav-style-chip-theme { background: #d97b8d; color: #fff; }
.nav-style-chip-outline { background: #b9b2aa; color: #fff; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #d8d2ca; }
.nav-style-chip-minimal { background: #cfc9c2; color: #fff; }
.nav-style-chip-square { border-radius: 9px; background: rgba(30,26,22,.6); color: #fff; }
.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, opacity .35s ease, transform .35s ease;
  /* 메뉴를 열면 위에서 아래로 하나씩 스르륵 나타나도록 기본은 숨김+살짝 위로 이동한 상태로 시작 */
  opacity: 0; transform: translateY(-12px);
}
.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; }
.nav-menu-panel.open .nav-menu-link { opacity: 1; transform: translateY(0); }
.nav-menu-panel.open .nav-menu-link:nth-child(1) { transition-delay: .06s; }
.nav-menu-panel.open .nav-menu-link:nth-child(2) { transition-delay: .11s; }
.nav-menu-panel.open .nav-menu-link:nth-child(3) { transition-delay: .16s; }
.nav-menu-panel.open .nav-menu-link:nth-child(4) { transition-delay: .21s; }
.nav-menu-panel.open .nav-menu-link:nth-child(5) { transition-delay: .26s; }
.nav-menu-panel.open .nav-menu-link:nth-child(6) { transition-delay: .31s; }
.nav-menu-panel.open .nav-menu-link:nth-child(7) { transition-delay: .36s; }
.nav-menu-panel.open .nav-menu-link:nth-child(8) { transition-delay: .41s; }
.nav-menu-panel.open .nav-menu-link:nth-child(9) { transition-delay: .46s; }
.nav-menu-panel.open .nav-menu-link:nth-child(10) { transition-delay: .51s; }
.nav-menu-panel.open .nav-menu-link:nth-child(11) { transition-delay: .56s; }
.nav-menu-panel.open .nav-menu-link:nth-child(12) { transition-delay: .61s; }
.nav-menu-panel.open .nav-menu-link:nth-child(13) { transition-delay: .66s; }
.nav-menu-panel.open .nav-menu-link:nth-child(14) { transition-delay: .71s; }
.nav-menu-panel.open .nav-menu-link:nth-child(15) { transition-delay: .76s; }

.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); }

/* "청첩장 간직하기" — 대시보드에서 ?keepsake=1로 진입했을 때 캡처 진행 상태를 알려주는 배너 */
.keepsake-status {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9998; text-align: center;
  background: linear-gradient(90deg, #b8607e, #d97b8d); color: #fff; font-size: 13px; font-weight: 600;
  padding: 12px 16px; transform: translateY(-100%); transition: transform .3s ease; box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.keepsake-status.show { transform: 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_effect 컬럼, 테마·디자인 탭에서 선택)으로 고를 수 있다 —
   invite-template.js가 .invite-wrap에 data-reveal="up|down|left|right|fade|pop|zoom"을 찍고,
   여기서 방향/변형만 프리셋별로 달리 준다(기본 up = 아래서 위로, 기존과 동일). */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
[data-reveal="down"] .reveal { transform: translateY(-30px); }
[data-reveal="left"] .reveal { transform: translateX(-46px); }
[data-reveal="right"] .reveal { transform: translateX(46px); }
[data-reveal="fade"] .reveal { transform: none; transition-duration: 1.15s; }
/* 말풍선: 살짝 작게 아래에서 시작해 통통 튀며 커진다 — 오버슈트 곡선으로 탄성 표현 */
[data-reveal="pop"] .reveal { transform: scale(.78) translateY(16px); transition: opacity .55s ease, transform .65s cubic-bezier(.34,1.56,.64,1); }
[data-reveal="zoom"] .reveal { transform: scale(1.1); }
/* in-view 규칙은 반드시 프리셋 변형들보다 특이도가 높아야 모든 변형을 이긴다(.invite-wrap 접두) */
.invite-wrap .reveal.in-view, .reveal.in-view { opacity: 1; transform: none; }
.opt-no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- 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; }
/* 슬라이드형(swipe)/썸네일 스와이프형(thumb_swipe) — 예전엔 overflow-x:auto만 있어서 데스크톱
   브라우저(비-오버레이 스크롤바 환경)에서 볼썽사나운 가로 스크롤바가 그대로 노출돼 "형편없어
   보인다"는 리포트가 있었다. 스크롤/스냅 동작 자체는 그대로 두고 스크롤바만 시각적으로 숨겨서
   진짜 앱 같은 스와이프 느낌을 내고, iOS Safari의 관성 스크롤(-webkit-overflow-scrolling)과
   scroll-behavior:smooth까지 더해 손으로 넘길 때 더 자연스럽게 미끄러지도록 했다. */
.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;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gallery-grid[data-gtype="swipe"]::-webkit-scrollbar,
.gallery-grid[data-gtype="thumb_swipe"]::-webkit-scrollbar { display: none; height: 0; width: 0; }
.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; }
/* 슬라이드형 전용 하단 점(dot) 인디케이터 — 지금 몇 번째 사진을 보고 있는지 보여줘서
   "스크롤 중"이 아니라 "슬라이드 넘기는 중"이라는 느낌을 준다. thumb_swipe는 이미 썸네일
   스트립이 같은 역할을 하므로 dots는 swipe 타입에만 렌더링된다(invite-template.js 참고). */
.gallery-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; }
.gallery-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.16); transition: all .25s ease; padding: 0; border: none; cursor: pointer; }
.gallery-dots .dot.active { background: var(--theme-primary, #d97b8d); width: 18px; border-radius: 3px; }
.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; }
/* 카드 액션(2026-07-31 재배치): 아래 줄은 편집/보기 2버튼만, 복사/삭제는 썸네일 우측 상단 칩으로 */
.inv-card-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.inv-card-actions .btn { width: 100%; white-space: nowrap; padding: 9px 4px; font-size: 13px; text-align: center; justify-content: center; border-radius: 10px; }
.inv-card-copy-form { display: contents; }
.inv-card-thumb { position: relative; }
.inv-card-thumb-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; }
.thumb-act-btn {
  font-size: 11.5px; font-weight: 700; color: #6b5a62; background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06); border-radius: 999px; padding: 5px 11px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); backdrop-filter: blur(3px); transition: all .15s;
}
.thumb-act-btn:hover { background: #fff; color: #b8607e; }
.thumb-act-btn.thumb-act-del { color: #b8605a; }
.thumb-act-btn.thumb-act-del:hover { background: #fff5f4; }
/* 예식이 끝난 청첩장 카드 하단의 "청첩장 간직하기" 버튼 — 편집/보기 버튼과 구분되게 골드톤
   그라데이션으로 눈에 띄게 만들되, 위 액션 버튼들과는 여백을 줘서 별도 영역처럼 보이게 한다. */
.inv-card-keepsake {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding: 11px 14px;
  border-radius: 12px; font-size: 13px; font-weight: 700; text-decoration: none; color: #6b4a1f;
  background: linear-gradient(120deg, #ffe6b8 0%, #ffd9a0 55%, #ffcf8f 100%);
  box-shadow: 0 6px 16px rgba(200,140,50,.22); transition: transform .15s ease, box-shadow .15s ease;
}
.inv-card-keepsake:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(200,140,50,.3); }

/* ---- 셀프 워터마크 제거 버튼 / 결제완료 표시 (내 청첩장 카드, 2026-07-29) ---- */
.inv-card-removewm {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; padding: 11px 14px;
  border: none; cursor: pointer; border-radius: 12px; font-size: 13px; font-weight: 700; color: #1b5e6b;
  background: linear-gradient(120deg, #c9f0f5 0%, #a8e4ee 55%, #8fd9e8 100%);
  box-shadow: 0 6px 16px rgba(40,150,175,.22); transition: transform .15s ease, box-shadow .15s ease;
}
.inv-card-removewm:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(40,150,175,.3); }
.inv-card-removewm:disabled { opacity: .6; cursor: wait; transform: none; }
.inv-card-paidmark {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding: 9px 14px;
  border-radius: 12px; font-size: 12.5px; font-weight: 700; color: #1e8449; background: #eafaf1;
}

/* ---- 워터마크 구매 안내 모달 (2026-07-29 "alert 말고 이쁜 모달로") ---- */
.wm-modal-overlay {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  background: rgba(30,22,18,.45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; padding: 20px;
}
.wm-modal-overlay.open { opacity: 1; }
.wm-modal {
  background: #fff; border-radius: 22px; padding: 30px 26px 22px; max-width: 400px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.25); transform: translateY(14px) scale(.97); transition: transform .25s cubic-bezier(.22,.8,.32,1);
}
.wm-modal-overlay.open .wm-modal { transform: translateY(0) scale(1); }
.wm-modal-icon {
  width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: linear-gradient(145deg, #e8f7fb, #d2eff7);
}
.wm-modal-title { font-size: 18px; font-weight: 800; color: #3d3833; margin: 0 0 8px; }
.wm-modal-desc { font-size: 13.5px; color: #6b645d; line-height: 1.6; margin: 0 0 10px; }
.wm-modal-sub { font-size: 11.5px; color: #a19a92; line-height: 1.55; margin: 0 0 16px; }
.naver-store-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 16px;
  border-radius: 12px; background: #03c75a; color: #fff; font-size: 14.5px; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 20px rgba(3,199,90,.35); transition: transform .15s ease, box-shadow .15s ease; margin-bottom: 10px;
}
.naver-store-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(3,199,90,.45); }
.naver-store-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px;
  background: #fff; color: #03c75a; font-weight: 900; font-size: 15px; font-family: Arial, sans-serif;
}
.naver-store-arrow { font-weight: 900; opacity: .85; }
.wm-modal-close {
  background: none; border: none; cursor: pointer; font-size: 13px; color: #a19a92; padding: 8px 16px; font-weight: 600;
}
.wm-modal-close:hover { color: #6b645d; }

/* ---- 헤더 프로필 드롭다운 (2026-07-29 개편) ---- */
.user-menu { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #f0e6dc; cursor: pointer;
  padding: 5px 12px 5px 6px; border-radius: 999px; transition: box-shadow .15s ease, border-color .15s ease;
}
.user-menu-btn:hover { border-color: #e8cfd6; box-shadow: 0 4px 14px rgba(180,120,130,.14); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center;
  justify-content: center; background: linear-gradient(145deg, #f3d6dd, #e8b9c4); color: #8c4a5c; font-weight: 800; font-size: 14px;
}
.user-menu-name { font-size: 13.5px; font-weight: 700; color: #4a423b; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-caret { font-size: 10px; color: #b3a99f; transition: transform .2s ease; }
.user-menu.open .user-menu-caret { transform: rotate(180deg); }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; background: #fff; border-radius: 16px;
  box-shadow: 0 16px 44px rgba(60,40,40,.16), 0 0 0 1px #f3ece4; padding: 8px; z-index: 500;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.user-menu.open .user-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: #4a423b; transition: background .12s ease;
}
.user-menu-item:hover { background: #faf3ee; }
.user-menu-item-muted { color: #a1978c; }
.user-menu-divider { height: 1px; background: #f3ece4; margin: 6px 4px; }

/* ---- 내 구매내역 (2026-07-29 재디자인) ---- */
.purchase-hero {
  max-width: 560px; text-align: center; border-radius: 22px; padding: 30px 24px 26px; margin-bottom: 18px;
  background: linear-gradient(135deg, #fdeef2 0%, #fbe3ea 55%, #f8d9e4 100%);
  box-shadow: 0 12px 34px rgba(200,110,140,.16), inset 0 1px 0 rgba(255,255,255,.7);
}
.purchase-hero-label { font-size: 13px; font-weight: 800; color: #a86478; letter-spacing: .5px; }
.purchase-hero-count { font-size: 58px; font-weight: 900; color: #b8607e; line-height: 1.15; margin: 6px 0 2px; }
.purchase-hero-count span { font-size: 22px; font-weight: 800; margin-left: 4px; }
.purchase-hero-sub { font-size: 12.5px; font-weight: 700; color: #c295a3; }
.purchase-hero-hint {
  display: inline-block; margin-top: 14px; background: rgba(255,255,255,.75); border-radius: 999px;
  padding: 8px 16px; font-size: 12.5px; font-weight: 700; color: #8c4a5c;
}
.purchase-list-card { max-width: 560px; }
.purchase-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 4px; border-bottom: 1px solid #f5ece6; font-size: 14px; color: #5b544d;
}
.purchase-row:last-of-type { border-bottom: none; }
.purchase-row-main { min-width: 0; flex: 1; }
.purchase-row-name { font-weight: 800; color: #4a423b; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purchase-row-date { font-weight: 600; color: #9a9188; font-size: 12px; margin-top: 2px; }
.purchase-row-qty { white-space: nowrap; }
.purchase-row-qty b { color: #b8607e; }
.purchase-row-price { font-weight: 800; color: #4a423b; white-space: nowrap; }

/* 버튼 로딩 인디케이터(2026-07-29 "멈춘 것처럼 보여서 불편해") — 도는 바람개비형 스피너 */
.btn-spinner {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%; vertical-align: -2px; margin-right: 7px;
  border: 2px solid currentColor; border-top-color: transparent; opacity: .8;
  animation: only4uSpin .7s linear infinite;
}
@keyframes only4uSpin { to { transform: rotate(360deg); } }

/* ---- 성공 안내 플로팅 토스트 (작고 귀엽게, 2026-07-29) ---- */
.flash-toast {
  position: fixed; top: 18px; left: 50%; z-index: 11000;
  transform: translateX(-50%) translateY(-70px); opacity: 0;
  background: linear-gradient(120deg, #fff, #fdf4f6); color: #8c4a5c;
  font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(180,90,110,.22), 0 0 0 1px #f7dfe6;
  transition: transform .4s cubic-bezier(.22,.8,.32,1), opacity .4s ease;
  max-width: 86vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flash-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ============ 모바일 전면 개편 (2026-07-29 "모바일에서도 정말 편하게") ============ */
/* 에디터 모바일 미리보기 — 인라인 프리뷰 칼럼을 숨기고, 플로팅 '미리보기' 버튼으로 전체화면
   오버레이를 연다. iframe 노드를 옮기면 문서가 리로드되므로 절대 이동하지 않고, .builder-preview
   자체를 fixed 오버레이로 전환하는 방식(라이브 업데이트 postMessage 연결 유지). */
.mobile-preview-fab, .mobile-preview-close, .mobile-pane-hint { display: none; }
@media (max-width: 900px) {
  /* --- 공통: iOS 입력 포커스 자동 확대 방지(16px 미만이면 사파리가 강제 줌) + 넉넉한 탭 영역 --- */
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"],
  input[type="date"], input[type="time"], input[type="url"], select, textarea { font-size: 16px !important; }
  .btn { padding: 12px 18px; }
  .container { padding-left: 14px; padding-right: 14px; }
  .card { padding: 18px 14px; }

  /* --- 에디터 모바일 레이아웃 v2 (2026-07-29 재요청) ---
     왼쪽에 아이콘 세로 레일(스와이프 없음, 한 줄에 하나씩) + 오른쪽은 가로 스냅 패널 2장
     [세팅 폼][미리보기]. 기본은 미리보기가 보이는 상태(레일 ~16% + 미리보기 ~84%)이고,
     아이콘을 누르면 세팅 패널로 이동, 오른쪽으로 밀면(가로 스크롤) 언제든 미리보기.
     ⚠ iframe(#live-preview-frame)은 DOM 이동 시 리로드되므로 CSS 배치 전환만 사용. */
  /* 레일 폭 10% / 편집·미리보기 90% (2026-07-30 확정 요청 — 이전 64px에서 축소) */
  .builder-tabs {
    position: fixed; left: 0; top: 58px; bottom: 0; width: 10vw; z-index: 60;
    display: flex; flex-direction: column; gap: 5px; overflow-y: auto; overflow-x: hidden;
    margin: 0; padding: 6px 3px 24px; background: #f8eff1; border-right: 1px solid #f0dde3;
    border-bottom: none; scrollbar-width: none;
  }
  .builder-tabs::-webkit-scrollbar { display: none; }
  .builder-tab {
    position: relative; flex: 0 0 auto; width: 100%; min-width: 0;
    padding: 8px 1px 6px; gap: 2px; border-radius: 10px;
  }
  .builder-tab .bt-icon { font-size: 15px; }
  .builder-tab .bt-label { white-space: normal; font-size: 7px; line-height: 1.12; word-break: keep-all; letter-spacing: -.2px; }
  .builder-tab .bt-toggle { top: 1px; right: 1px; width: 12px; height: 12px; font-size: 6px; }

  /* 레일이 fixed라 에디터 페이지의 나머지 콘텐츠(상단 메뉴/제목 포함)를 통째로 밀어준다 —
     initMobileEditorLayout()이 body에 has-builder-rail 클래스를 붙인다 */
  body.has-builder-rail .dash-layout { margin-left: 10vw; padding-left: 4px; padding-right: 8px; }
  /* 고정 레일이 헤더 아래 카테고리 메뉴 줄의 왼쪽을 가리지 않게 같이 밀어준다 */
  body.has-builder-rail .cat-nav-inner { margin-left: 10vw; }
  /* 편집창 상단 정리(2026-07-30) — 관리 메뉴 칩 스트립은 기본 숨김, [☰ 관리 메뉴 열기]로 토글 */
  body.has-builder-rail .dash-side { display: none; }
  body.has-builder-rail .dash-side.mobile-menu-open { display: flex; }
  .mobile-editor-topbar { display: flex; gap: 8px; margin: 2px 0 10px; }
  .met-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #6b5a62; background: #fff;
    border: 1.5px solid #f0dde3; border-radius: 999px; padding: 9px 12px; cursor: pointer;
  }
  .met-btn:active { background: #f8eff1; }
  .met-btn.met-preview { color: #fff; background: #d97b8d; border-color: #d97b8d; }
  .builder-layout {
    display: flex; flex-direction: row; gap: 0; margin-left: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .builder-layout::-webkit-scrollbar { display: none; }
  .builder-main { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 6px; }
  .builder-preview {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
    position: static; margin: 0; padding: 12px 4px 30px; order: 2;
  }
  .builder-preview .phone-frame { width: min(300px, 80vw); }
  /* 미리보기 패널 상단의 "← 편집으로" 안내 칩 */
  .mobile-pane-hint {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
    color: #8c6a74; background: #fbe9ee; border-radius: 999px; padding: 7px 14px;
  }
  /* 이전 방식(FAB+오버레이) 요소는 폐기 */
  .mobile-preview-fab, .mobile-preview-close { display: none !important; }

  /* --- 에디터: 저장바를 화면 하단에 고정 --- */
  .builder-savebar { position: sticky; bottom: 8px; z-index: 40; }

  /* --- 표(방명록/RSVP/관리자 목록): 가로 스크롤로 잘림 방지 --- */
  .card table.data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- 헤더: 로고 축소 + 드롭다운 이름 숨김(아바타만) --- */
  .logo span { display: none; }
  .user-menu-name { display: none; }
  .header-inner { height: 58px; }

  /* --- 대시보드 사이드 메뉴: 가로 칩 스크롤 --- */
  .dash-side { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dash-side::-webkit-scrollbar { display: none; }
  .dash-side .side-link { flex: 0 0 auto; white-space: nowrap; }
  .dash-side-title { display: none; }
  .dash-side .dash-side-divider { display: none; }

  /* --- 청첩장 카드: 한 줄에 하나, 꽉 차게 --- */
  .inv-card-grid { grid-template-columns: 1fr; }

  /* --- 화환 플로팅/모달 여백 미세 조정 --- */
  .wm-modal { padding: 24px 18px 18px; }
}

/* ---- 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 (bottom-left) ----
   인트로/최상단(메인)에서는 화면을 가리므로 기본 상태는 숨김이고, 인트로가 닫히고 스크롤을 조금
   내렸을 때만 아래→위로 스르륵 나타난다(2026-07-27 재요청) — public/js/invite.js의
   initFlowerFloat()가 .flower-order-float-visible 클래스를 토글한다. */
.flower-order-float {
  position: fixed; left: 16px; bottom: 20px; z-index: 9999; display: flex; flex-direction: column;
  align-items: center; gap: 5px; text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(46px);
  transition: opacity .45s cubic-bezier(.22,.8,.32,1), transform .45s cubic-bezier(.22,.8,.32,1);
  /* 둥둥 애니메이션의 이동 범위를 히트영역 안에 포함 — 클릭 좌표가 항상 버튼에 명중 */
  padding: 8px 6px 2px;
}
.flower-order-float.flower-order-float-visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.flower-order-float-circle {
  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;
}
/* ⚠ 둥둥(bob) 애니메이션은 버튼 전체가 아니라 안쪽 원에만 건다(2026-07-29 "화환 보내기가 클릭
   안 돼" 수정) — 버튼(anchor) 자체가 계속 움직이면 탭 좌표가 빗나가 모바일에서 클릭이 잘 안 됐다.
   클릭 영역(anchor)은 고정, 보이는 원만 움직여서 시각 효과는 유지하고 명중률은 100%로. */
.flower-order-float-visible .flower-order-float-circle { animation: flowerFloatBob 2.6s ease-in-out infinite; }
.flower-order-float-icon { font-size: 24px; }
.flower-order-float-label {
  font-size: 10.5px; font-weight: 700; color: #7a6a5c; background: rgba(255,255,255,.92);
  padding: 3px 9px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,.12); white-space: nowrap;
}
.flower-order-float-pending { cursor: default; }
.flower-order-float-pending.flower-order-float-visible { opacity: .6; }
/* 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) — z-index no longer needs a special-cased bump
   here since the base z-index (9999) already sits above everything including .intro-splash.
   ⚠ 항상 보이게 고정하지 말 것(2026-07-27 "아직도 편집모드 미리보기에 화환이 계속 떠있잖아") —
   에디터 프리뷰에서도 실제 페이지와 똑같이 "스크롤을 어느 정도 내렸을 때만 아래서 위로 등장"
   해야 한다. 등장/숨김 로직은 실제 페이지와 동일하게 invite.js의 initFlowerFloat()가 처리. */
.flower-order-float-preview { left: 30px; bottom: 60px; }
/* 방명록/RSVP/카카오 미리보기/라이트박스/메뉴 같은 모달·오버레이가 열려 있는 동안엔 화환 버튼을
   숨긴다(2026-07-27 요청) — public/js/invite.js의 initFlowerFloat()가 이 클래스를 토글. */
.flower-order-float-hidden {
  opacity: 0 !important; pointer-events: none !important; animation: none !important;
  transform: translateY(20px) !important;
}
@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; }

/* 모바일 편집창 상단 버튼 바 — 데스크톱(사이드 메뉴가 원래대로 보임)에선 항상 숨김 */
@media (min-width: 901px) {
  .mobile-editor-topbar { display: none; }
}