*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --font-en: 'Cormorant Garamond', serif;
  --font-kr: 'Noto Serif KR', serif;
  --font-ui: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-kr);
  max-width: 480px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* reveal */
.rv { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.rv.in { opacity: 1; transform: none; }

/* ===================== MUSIC BAR ===================== */
.music-bar {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  padding: 7px 14px 7px 7px;
  backdrop-filter: blur(20px);
  border: 1px solid;
}
.mb-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.mb-btn:hover { transform: scale(1.1); }
.mb-title { font-size: 10px; letter-spacing: 0.5px; white-space: nowrap; }
.mb-waves { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.mbw { width: 2px; border-radius: 2px; opacity: 0; }
.mbw:nth-child(1) { height: 40%; }
.mbw:nth-child(2) { height: 70%; }
.mbw:nth-child(3) { height: 100%; }
.mbw:nth-child(4) { height: 60%; }
.mbw:nth-child(5) { height: 40%; }
.music-bar.playing .mbw {
  opacity: 1;
  animation: wav 1.2s ease-in-out infinite;
}
.music-bar.playing .mbw:nth-child(2) { animation-delay: 0.1s; }
.music-bar.playing .mbw:nth-child(3) { animation-delay: 0.2s; }
.music-bar.playing .mbw:nth-child(4) { animation-delay: 0.3s; }
.music-bar.playing .mbw:nth-child(5) { animation-delay: 0.15s; }
@keyframes wav { 0%,100%{transform:scaleY(1)}50%{transform:scaleY(0.3)} }

/* ===================== CINEMATIC THEME ===================== */
body.theme-cinematic { background: #0A0A0A; color: #FAFAF8; }
body.theme-cinematic .music-bar { background: rgba(10,10,10,0.85); border-color: rgba(255,255,255,0.08); }
body.theme-cinematic .mb-btn { background: #8F0000; color: #0A0A0A; }
body.theme-cinematic .mb-title { color: rgba(255,255,255,0.4); }
body.theme-cinematic .mbw { background: #8F0000; }

.theme-cinematic .inv-cover {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 32px 60px;
  overflow: hidden;
  background: linear-gradient(160deg, #0D0B06 0%, #1A1208 50%, #0A0A0A 100%);
}
.theme-cinematic .inv-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(143,0,0,0.08) 0%, transparent 60%);
}
.theme-cinematic .cover-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}
.theme-cinematic .cover-corner { position: absolute; font-family: var(--font-en); font-size: 9px; letter-spacing: 2px; color: rgba(255,255,255,0.1); }
.theme-cinematic .cover-corner.tl { top: 22px; left: 22px; }
.theme-cinematic .cover-corner.tr { top: 22px; right: 22px; }
.theme-cinematic .cover-date { font-family: var(--font-en); font-size: 10px; letter-spacing: 4px; color: rgba(255,255,255,0.25); margin-bottom: 44px; position: relative; }
.theme-cinematic .cover-names { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 28px; position: relative; }
.theme-cinematic .cover-name { font-size: 52px; font-weight: 200; line-height: 1; letter-spacing: -1px; }
.theme-cinematic .cover-and { font-family: var(--font-en); font-size: 24px; color: #8F0000; }
.theme-cinematic .cover-sub { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.4); letter-spacing: 6px; position: relative; }
.theme-cinematic .cover-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.theme-cinematic .cs-line { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.25)); animation: sd 2s ease-in-out infinite; }
@keyframes sd { 0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom} }
.theme-cinematic .cover-scroll span { font-family: var(--font-en); font-size: 9px; letter-spacing: 3px; color: rgba(255,255,255,0.15); }

/* Cinematic sections */
.theme-cinematic .inv-section { padding: 72px 32px; border-bottom: 1px solid rgba(255,255,255,0.04); text-align: center; }
.theme-cinematic .sec-deco { font-family: var(--font-en); font-size: 11px; letter-spacing: 6px; color: #8F0000; opacity: 0.6; margin-bottom: 28px; }
.theme-cinematic .sec-title { font-size: 20px; font-weight: 300; margin-bottom: 12px; }
.theme-cinematic .sec-text { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 2.2; word-break: keep-all; white-space: pre-line; }
.theme-cinematic .sec-sub { font-size: 12px; color: rgba(255,255,255,0.25); margin-top: 6px; }
.theme-cinematic .date-pill { display: inline-block; font-family: var(--font-en); font-size: 12px; letter-spacing: 3px; color: #8F0000; border: 1px solid rgba(143,0,0,0.25); padding: 7px 18px; border-radius: 100px; margin-bottom: 24px; }
.theme-cinematic .family-grid { display: flex; gap: 0; margin-top: 24px; }
.theme-cinematic .family-side { flex: 1; padding: 0 12px; }
.theme-cinematic .fs-role { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.2); margin-bottom: 10px; }
.theme-cinematic .fs-name { font-size: 22px; font-weight: 300; margin-bottom: 12px; }
.theme-cinematic .fs-parents { font-size: 12px; color: rgba(255,255,255,0.35); line-height: 2; }
.theme-cinematic .fd { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 8px; }
.theme-cinematic .fd-line { width: 1px; height: 40px; background: rgba(255,255,255,0.06); }
.theme-cinematic .fd-heart { color: #8F0000; opacity: 0.5; font-size: 14px; }
.theme-cinematic .map-box { background: #141414; border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; }
.theme-cinematic .map-visual { height: 180px; background: #1A1A1A; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.theme-cinematic .map-pin { font-size: 28px; }
.theme-cinematic .map-venue-name { font-size: 13px; color: rgba(255,255,255,0.4); text-align: center; padding: 0 20px; }
.theme-cinematic .map-btns { display: flex; gap: 8px; padding: 14px; }
.theme-cinematic .map-btn { flex: 1; padding: 11px; border-radius: 7px; font-size: 12px; font-weight: 500; text-align: center; transition: opacity 0.2s; }
.theme-cinematic .map-btn:hover { opacity: 0.85; }
.theme-cinematic .map-btn.kakao { background: #FEE500; color: #000; }
.theme-cinematic .map-btn.naver { background: #03C75A; color: #fff; }
.theme-cinematic .transport { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.theme-cinematic .tp { display: flex; gap: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; padding: 14px; }
.theme-cinematic .tp-icon { font-size: 18px; flex-shrink: 0; }
.theme-cinematic .tp-text { font-size: 12px; color: rgba(255,255,255,0.3); line-height: 1.7; word-break: keep-all; }
.theme-cinematic .tp-text strong { display: block; color: rgba(255,255,255,0.6); font-weight: 500; margin-bottom: 2px; }
.theme-cinematic .account-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; text-align: left; }
.theme-cinematic .acc-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 3px; align-items: center; }
.theme-cinematic .acc-role { grid-column: 1; font-size: 10px; letter-spacing: 2px; color: #8F0000; opacity: 0.7; }
.theme-cinematic .acc-holder { grid-column: 1; font-size: 15px; font-weight: 300; }
.theme-cinematic .acc-num { grid-column: 1; font-family: var(--font-en); font-size: 14px; color: #8F0000; letter-spacing: 1px; }
.theme-cinematic .acc-copy-btn { grid-column: 2; grid-row: 1/4; background: none; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); font-family: var(--font-ui); font-size: 12px; padding: 8px 14px; border-radius: 6px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.theme-cinematic .acc-copy-btn:hover { border-color: #8F0000; color: #8F0000; }
.theme-cinematic .acc-copy-btn.copied { border-color: #4CAF50; color: #4CAF50; }
.theme-cinematic .gallery-strip { overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding: 0; cursor: grab; }
.theme-cinematic .gallery-strip:active { cursor: grabbing; }
.theme-cinematic .gallery-strip::-webkit-scrollbar { display: none; }
.theme-cinematic .gallery-track { display: inline-flex; gap: 8px; padding: 0 24px; }
.theme-cinematic .g-item { flex-shrink: 0; width: 200px; height: 260px; border-radius: 6px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.04); }
.theme-cinematic .g-placeholder { display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: 0.15; }
.theme-cinematic .countdown-wrap { display: flex; justify-content: center; gap: 0; margin: 28px 0 0; }
.theme-cinematic .cd-u { text-align: center; padding: 0 18px; border-right: 1px solid rgba(255,255,255,0.06); }
.theme-cinematic .cd-u:last-child { border-right: none; }
.theme-cinematic .cd-n { font-family: var(--font-en); font-size: 44px; font-weight: 300; display: block; line-height: 1; margin-bottom: 6px; letter-spacing: -1px; }
.theme-cinematic .cd-l { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.25); }

/* ===================== CLASSIC THEME ===================== */
body.theme-classic { background: #F5EDDF; color: #2A1F14; }
body.theme-classic .music-bar { background: rgba(245,237,223,0.9); border-color: rgba(0,0,0,0.1); }
body.theme-classic .mb-btn { background: #6A0000; color: #fff; }
body.theme-classic .mb-title { color: #8A7060; }
body.theme-classic .mbw { background: #6A0000; }
.theme-classic .inv-cover { position: relative; height: 100vh; min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 32px 60px; background: linear-gradient(160deg, #F8F2E8 0%, #EDE0CC 100%); }
.theme-classic .cover-deco { font-family: var(--font-en); font-size: 16px; color: #6A0000; margin-bottom: 16px; }
.theme-classic .cover-title { font-size: 20px; font-weight: 400; color: #3A2A1A; letter-spacing: 6px; margin-bottom: 32px; }
.theme-classic .cover-names { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 24px; }
.theme-classic .cover-name { font-size: 48px; font-weight: 200; color: #2A1F14; line-height: 1; }
.theme-classic .cover-and { color: #6A0000; font-family: var(--font-en); font-size: 22px; }
.theme-classic .cover-date { font-size: 14px; color: #8A7060; letter-spacing: 2px; }
.theme-classic .cover-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.theme-classic .cs-line { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2)); animation: sd 2s ease-in-out infinite; }
.theme-classic .cover-scroll span { font-size: 9px; letter-spacing: 3px; color: rgba(0,0,0,0.2); }
.theme-classic .inv-section { padding: 64px 32px; border-bottom: 1px solid rgba(0,0,0,0.05); text-align: center; }
.theme-classic .sec-deco { font-family: var(--font-en); font-size: 14px; color: #6A0000; margin-bottom: 24px; }
.theme-classic .sec-title { font-size: 20px; font-weight: 400; margin-bottom: 12px; }
.theme-classic .sec-text { font-size: 14px; color: #5A4A3A; line-height: 2.2; word-break: keep-all; white-space: pre-line; }
.theme-classic .sec-sub { font-size: 12px; color: #8A7060; margin-top: 6px; }
.theme-classic .date-pill { display: inline-block; font-size: 14px; color: #6A0000; margin-bottom: 20px; letter-spacing: 2px; }
.theme-classic .family-grid { display: flex; gap: 0; margin-top: 20px; }
.theme-classic .family-side { flex: 1; padding: 0 12px; }
.theme-classic .fs-role { font-size: 10px; letter-spacing: 2px; color: #6A0000; margin-bottom: 8px; }
.theme-classic .fs-name { font-size: 20px; font-weight: 300; margin-bottom: 10px; }
.theme-classic .fs-parents { font-size: 12px; color: #7A6A5A; line-height: 2; }
.theme-classic .fd { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 8px; }
.theme-classic .fd-line { width: 1px; height: 36px; background: rgba(0,0,0,0.1); }
.theme-classic .fd-heart { color: #6A0000; font-size: 14px; }
.theme-classic .map-box { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; overflow: hidden; }
.theme-classic .map-visual { height: 180px; background: rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.theme-classic .map-pin { font-size: 28px; }
.theme-classic .map-venue-name { font-size: 13px; color: #6A5A4A; text-align: center; padding: 0 20px; }
.theme-classic .map-btns { display: flex; gap: 8px; padding: 14px; }
.theme-classic .map-btn { flex: 1; padding: 11px; border-radius: 7px; font-size: 12px; font-weight: 500; text-align: center; }
.theme-classic .map-btn.kakao { background: #FEE500; color: #000; }
.theme-classic .map-btn.naver { background: #03C75A; color: #fff; }
.theme-classic .transport { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.theme-classic .tp { display: flex; gap: 12px; background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; padding: 12px; }
.theme-classic .tp-icon { font-size: 16px; flex-shrink: 0; }
.theme-classic .tp-text { font-size: 12px; color: #7A6A5A; line-height: 1.7; word-break: keep-all; }
.theme-classic .tp-text strong { display: block; color: #3A2A1A; font-weight: 500; margin-bottom: 2px; }
.theme-classic .account-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; text-align: left; }
.theme-classic .acc-card { background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 3px; }
.theme-classic .acc-role { font-size: 10px; letter-spacing: 2px; color: #6A0000; }
.theme-classic .acc-holder { font-size: 15px; color: #2A1F14; }
.theme-classic .acc-num { font-family: var(--font-en); font-size: 14px; color: #6A0000; }
.theme-classic .acc-copy-btn { grid-column: 2; grid-row: 1/4; background: none; border: 1px solid rgba(0,0,0,0.1); color: #8A7060; font-family: var(--font-ui); font-size: 12px; padding: 8px 14px; border-radius: 6px; cursor: pointer; }
.theme-classic .gallery-strip { overflow-x: auto; scrollbar-width: none; cursor: grab; }
.theme-classic .gallery-strip::-webkit-scrollbar { display: none; }
.theme-classic .gallery-track { display: inline-flex; gap: 8px; padding: 0 24px; }
.theme-classic .g-item { flex-shrink: 0; width: 200px; height: 260px; border-radius: 6px; background-size: cover; background-position: center; background-color: rgba(0,0,0,0.06); }
.theme-classic .countdown-wrap { display: flex; justify-content: center; gap: 0; margin: 24px 0 0; }
.theme-classic .cd-u { text-align: center; padding: 0 16px; border-right: 1px solid rgba(0,0,0,0.08); }
.theme-classic .cd-u:last-child { border-right: none; }
.theme-classic .cd-n { font-family: var(--font-en); font-size: 40px; font-weight: 300; display: block; line-height: 1; margin-bottom: 5px; color: #3A2A1A; }
.theme-classic .cd-l { font-size: 10px; letter-spacing: 2px; color: #8A7060; }

/* ===================== NATURE THEME ===================== */
body.theme-nature { background: #EFF4EA; color: #2A3A28; }
body.theme-nature .music-bar { background: rgba(239,244,234,0.9); border-color: rgba(0,0,0,0.1); }
body.theme-nature .mb-btn { background: #5A7A58; color: #fff; }
body.theme-nature .mb-title { color: #6A8A68; }
body.theme-nature .mbw { background: #5A7A58; }
.theme-nature .inv-cover { position: relative; height: 100vh; min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 32px 60px; background: linear-gradient(160deg, #ECF3E6 0%, #D8ECCE 100%); }
.theme-nature .cover-leaf { font-size: 36px; margin-bottom: 20px; }
.theme-nature .cover-en { font-family: var(--font-en); font-size: 12px; letter-spacing: 5px; color: #5A7A58; margin-bottom: 28px; }
.theme-nature .cover-names { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; }
.theme-nature .cover-name { font-size: 48px; font-weight: 200; color: #2A3A28; line-height: 1; }
.theme-nature .cover-and { color: #5A7A58; font-size: 16px; }
.theme-nature .cover-date { font-family: var(--font-en); font-size: 13px; color: #6A8A68; letter-spacing: 3px; }
.theme-nature .cover-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.theme-nature .cs-line { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2)); animation: sd 2s ease-in-out infinite; }
.theme-nature .cover-scroll span { font-size: 9px; letter-spacing: 3px; color: rgba(0,0,0,0.2); }
.theme-nature .inv-section { padding: 64px 32px; border-bottom: 1px solid rgba(0,0,0,0.05); text-align: center; }
.theme-nature .sec-deco { font-size: 16px; color: #5A7A58; margin-bottom: 20px; }
.theme-nature .sec-title { font-size: 20px; font-weight: 300; margin-bottom: 12px; color: #2A3A28; }
.theme-nature .sec-text { font-size: 14px; color: #4A5A48; line-height: 2.2; word-break: keep-all; white-space: pre-line; }
.theme-nature .date-pill { font-family: var(--font-en); display: inline-block; font-size: 13px; color: #5A7A58; margin-bottom: 20px; letter-spacing: 2px; }
.theme-nature .family-grid { display: flex; gap: 0; margin-top: 20px; }
.theme-nature .family-side { flex: 1; padding: 0 12px; }
.theme-nature .fs-role { font-size: 10px; letter-spacing: 2px; color: #5A7A58; margin-bottom: 8px; }
.theme-nature .fs-name { font-size: 20px; font-weight: 300; margin-bottom: 10px; }
.theme-nature .fs-parents { font-size: 12px; color: #6A7A68; line-height: 2; }
.theme-nature .fd { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 8px; }
.theme-nature .fd-line { width: 1px; height: 36px; background: rgba(0,0,0,0.08); }
.theme-nature .fd-heart { color: #5A7A58; font-size: 16px; }
.theme-nature .map-box { background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; overflow: hidden; }
.theme-nature .map-visual { height: 180px; background: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.theme-nature .map-pin { font-size: 28px; }
.theme-nature .map-venue-name { font-size: 13px; color: #5A6A58; text-align: center; padding: 0 20px; }
.theme-nature .map-btns { display: flex; gap: 8px; padding: 14px; }
.theme-nature .map-btn { flex: 1; padding: 11px; border-radius: 7px; font-size: 12px; font-weight: 500; text-align: center; }
.theme-nature .map-btn.kakao { background: #FEE500; color: #000; }
.theme-nature .map-btn.naver { background: #03C75A; color: #fff; }
.theme-nature .transport { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.theme-nature .tp { display: flex; gap: 12px; background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.05); border-radius: 8px; padding: 12px; }
.theme-nature .tp-icon { font-size: 16px; flex-shrink: 0; }
.theme-nature .tp-text { font-size: 12px; color: #6A7A68; line-height: 1.7; word-break: keep-all; }
.theme-nature .tp-text strong { display: block; color: #2A3A28; font-weight: 500; margin-bottom: 2px; }
.theme-nature .account-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; text-align: left; }
.theme-nature .acc-card { background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 3px; }
.theme-nature .acc-role { font-size: 10px; letter-spacing: 2px; color: #5A7A58; }
.theme-nature .acc-holder { font-size: 15px; color: #2A3A28; }
.theme-nature .acc-num { font-family: var(--font-en); font-size: 14px; color: #5A7A58; }
.theme-nature .acc-copy-btn { grid-column: 2; grid-row: 1/4; background: none; border: 1px solid rgba(0,0,0,0.1); color: #6A8A68; font-family: var(--font-ui); font-size: 12px; padding: 8px 14px; border-radius: 6px; cursor: pointer; }
.theme-nature .gallery-strip { overflow-x: auto; scrollbar-width: none; cursor: grab; }
.theme-nature .gallery-strip::-webkit-scrollbar { display: none; }
.theme-nature .gallery-track { display: inline-flex; gap: 8px; padding: 0 24px; }
.theme-nature .g-item { flex-shrink: 0; width: 200px; height: 260px; border-radius: 6px; background-size: cover; background-position: center; background-color: rgba(0,0,0,0.04); }
.theme-nature .countdown-wrap { display: flex; justify-content: center; gap: 0; margin: 24px 0 0; }
.theme-nature .cd-u { text-align: center; padding: 0 16px; border-right: 1px solid rgba(0,0,0,0.08); }
.theme-nature .cd-u:last-child { border-right: none; }
.theme-nature .cd-n { font-family: var(--font-en); font-size: 40px; font-weight: 300; display: block; line-height: 1; margin-bottom: 5px; color: #2A3A28; }
.theme-nature .cd-l { font-size: 10px; letter-spacing: 2px; color: #6A8A68; }

/* ===================== MODERN THEME ===================== */
body.theme-modern { background: #F5F5F5; color: #0A0A0A; }
body.theme-modern .music-bar { background: rgba(245,245,245,0.95); border-color: rgba(0,0,0,0.08); }
body.theme-modern .mb-btn { background: #0A0A0A; color: #fff; }
body.theme-modern .mb-title { color: #999; }
body.theme-modern .mbw { background: #0A0A0A; }
.theme-modern .inv-cover { position: relative; height: 100vh; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; padding: 60px 36px; background: #EFEFEF; }
.theme-modern .cover-line { width: 40px; height: 2px; background: #0A0A0A; margin-bottom: 20px; }
.theme-modern .cover-num { font-family: var(--font-en); font-size: 10px; letter-spacing: 4px; color: #AAA; margin-bottom: 10px; }
.theme-modern .cover-en { font-family: var(--font-en); font-size: 36px; font-weight: 300; line-height: 1.3; color: #0A0A0A; margin-bottom: 24px; }
.theme-modern .cover-names { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.theme-modern .cover-name { font-size: 14px; font-weight: 700; letter-spacing: 4px; font-family: var(--font-ui); }
.theme-modern .cover-and { color: #BBB; font-size: 10px; letter-spacing: 2px; }
.theme-modern .cover-date { font-family: var(--font-en); font-size: 12px; color: #888; letter-spacing: 3px; }
.theme-modern .cover-scroll { position: absolute; bottom: 36px; right: 36px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.theme-modern .cs-line { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2)); animation: sd 2s ease-in-out infinite; }
.theme-modern .cover-scroll span { font-size: 9px; letter-spacing: 3px; color: rgba(0,0,0,0.2); }
.theme-modern .inv-section { padding: 64px 36px; border-bottom: 1px solid #E8E8E8; }
.theme-modern .sec-deco { font-size: 9px; letter-spacing: 5px; color: #CCC; margin-bottom: 20px; text-transform: uppercase; }
.theme-modern .sec-title { font-size: 22px; font-weight: 500; margin-bottom: 12px; font-family: var(--font-ui); }
.theme-modern .sec-text { font-size: 14px; color: #555; line-height: 2; word-break: keep-all; white-space: pre-line; font-family: var(--font-ui); font-weight: 300; }
.theme-modern .date-pill { font-family: var(--font-en); font-size: 13px; color: #888; letter-spacing: 3px; display: block; margin-bottom: 16px; }
.theme-modern .family-grid { display: flex; gap: 0; margin-top: 20px; }
.theme-modern .family-side { flex: 1; padding: 0 10px; }
.theme-modern .fs-role { font-size: 9px; letter-spacing: 3px; color: #AAA; margin-bottom: 8px; }
.theme-modern .fs-name { font-size: 20px; font-weight: 600; margin-bottom: 8px; font-family: var(--font-ui); }
.theme-modern .fs-parents { font-size: 12px; color: #888; line-height: 2; }
.theme-modern .fd { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 6px; }
.theme-modern .fd-line { width: 1px; height: 36px; background: #E8E8E8; }
.theme-modern .fd-heart { color: #CCC; font-size: 14px; }
.theme-modern .map-box { background: #FFF; border: 1px solid #E8E8E8; border-radius: 10px; overflow: hidden; }
.theme-modern .map-visual { height: 180px; background: #F0F0F0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.theme-modern .map-pin { font-size: 28px; }
.theme-modern .map-venue-name { font-size: 13px; color: #888; text-align: center; padding: 0 20px; font-family: var(--font-ui); }
.theme-modern .map-btns { display: flex; gap: 8px; padding: 14px; }
.theme-modern .map-btn { flex: 1; padding: 11px; border-radius: 7px; font-size: 12px; font-weight: 500; text-align: center; }
.theme-modern .map-btn.kakao { background: #FEE500; color: #000; }
.theme-modern .map-btn.naver { background: #03C75A; color: #fff; }
.theme-modern .transport { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.theme-modern .tp { display: flex; gap: 12px; background: #FFF; border: 1px solid #E8E8E8; border-radius: 8px; padding: 12px; }
.theme-modern .tp-icon { font-size: 16px; flex-shrink: 0; }
.theme-modern .tp-text { font-size: 12px; color: #888; line-height: 1.7; word-break: keep-all; font-family: var(--font-ui); }
.theme-modern .tp-text strong { display: block; color: #333; font-weight: 500; margin-bottom: 2px; }
.theme-modern .account-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.theme-modern .acc-card { background: #FFF; border: 1px solid #E8E8E8; border-radius: 10px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 3px; }
.theme-modern .acc-role { font-size: 9px; letter-spacing: 3px; color: #AAA; }
.theme-modern .acc-holder { font-size: 15px; font-weight: 500; color: #0A0A0A; font-family: var(--font-ui); }
.theme-modern .acc-num { font-family: var(--font-en); font-size: 14px; color: #666; }
.theme-modern .acc-copy-btn { grid-column: 2; grid-row: 1/4; background: #0A0A0A; border: none; color: #fff; font-family: var(--font-ui); font-size: 12px; padding: 8px 14px; border-radius: 6px; cursor: pointer; }
.theme-modern .gallery-strip { overflow-x: auto; scrollbar-width: none; cursor: grab; }
.theme-modern .gallery-strip::-webkit-scrollbar { display: none; }
.theme-modern .gallery-track { display: inline-flex; gap: 8px; padding: 0 24px; }
.theme-modern .g-item { flex-shrink: 0; width: 200px; height: 260px; border-radius: 6px; background-size: cover; background-position: center; background-color: #E0E0E0; }
.theme-modern .countdown-wrap { display: flex; justify-content: center; gap: 0; margin: 24px 0 0; }
.theme-modern .cd-u { text-align: center; padding: 0 16px; border-right: 1px solid #E8E8E8; }
.theme-modern .cd-u:last-child { border-right: none; }
.theme-modern .cd-n { font-family: var(--font-en); font-size: 40px; font-weight: 300; display: block; line-height: 1; margin-bottom: 5px; }
.theme-modern .cd-l { font-size: 9px; letter-spacing: 3px; color: #AAA; font-family: var(--font-ui); }

/* ===================== GUESTBOOK ===================== */
.guestbook { padding: 72px 32px; }
body.theme-cinematic .guestbook { border-top: 1px solid rgba(255,255,255,0.04); }
body.theme-classic .guestbook { border-top: 1px solid rgba(0,0,0,0.05); background: rgba(255,255,255,0.3); }
body.theme-nature .guestbook { border-top: 1px solid rgba(0,0,0,0.04); background: rgba(255,255,255,0.3); }
body.theme-modern .guestbook { border-top: 1px solid #E8E8E8; background: #FFF; }
.gb-inner { max-width: 480px; margin: 0 auto; }
.gb-deco { font-family: var(--font-en); font-size: 11px; letter-spacing: 6px; text-align: center; opacity: 0.4; margin-bottom: 12px; }
body.theme-cinematic .gb-deco { color: #8F0000; }
body.theme-classic .gb-deco { color: #6A0000; }
body.theme-nature .gb-deco { color: #5A7A58; }
body.theme-modern .gb-deco { color: #AAA; }
.gb-title { font-size: 22px; font-weight: 300; text-align: center; margin-bottom: 28px; }
.gb-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.gb-input, .gb-textarea {
  width: 100%;
  border-radius: 8px;
  padding: 13px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  outline: none;
  resize: none;
  transition: border-color 0.2s;
}
body.theme-cinematic .gb-input, body.theme-cinematic .gb-textarea { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #FAFAF8; }
body.theme-cinematic .gb-input::placeholder, body.theme-cinematic .gb-textarea::placeholder { color: rgba(255,255,255,0.2); }
body.theme-cinematic .gb-input:focus, body.theme-cinematic .gb-textarea:focus { border-color: rgba(143,0,0,0.4); }
body.theme-classic .gb-input, body.theme-classic .gb-textarea { background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.1); color: #2A1F14; }
body.theme-nature .gb-input, body.theme-nature .gb-textarea { background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.08); color: #2A3A28; }
body.theme-modern .gb-input, body.theme-modern .gb-textarea { background: #F8F8F8; border: 1px solid #E0E0E0; color: #0A0A0A; }
.gb-submit {
  border: none;
  border-radius: 8px;
  padding: 15px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
body.theme-cinematic .gb-submit { background: #8F0000; color: #0A0A0A; }
body.theme-classic .gb-submit { background: #6A0000; color: #fff; }
body.theme-nature .gb-submit { background: #5A7A58; color: #fff; }
body.theme-modern .gb-submit { background: #0A0A0A; color: #fff; }
.gb-submit:hover { opacity: 0.85; }
.gb-list { display: flex; flex-direction: column; gap: 10px; }
.gb-item { border-radius: 10px; padding: 16px; }
body.theme-cinematic .gb-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); }
body.theme-classic .gb-item { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.06); }
body.theme-nature .gb-item { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.05); }
body.theme-modern .gb-item { background: #F8F8F8; border: 1px solid #E8E8E8; }
.gbi-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.gbi-name { font-size: 13px; font-weight: 500; }
.gbi-date { font-size: 11px; opacity: 0.4; }
.gbi-msg { font-size: 13px; line-height: 1.7; word-break: keep-all; }
body.theme-cinematic .gbi-msg { color: rgba(255,255,255,0.4); }
body.theme-classic .gbi-msg { color: #5A4A3A; }
body.theme-nature .gbi-msg { color: #4A5A48; }
body.theme-modern .gbi-msg { color: #555; font-family: var(--font-ui); }

/* ===================== CLOSING ===================== */
.closing { padding: 80px 32px 60px; text-align: center; position: relative; overflow: hidden; }
body.theme-cinematic .closing { background: #0A0A0A; border-top: 1px solid rgba(255,255,255,0.04); }
body.theme-classic .closing { background: linear-gradient(to bottom, #EDE0CC, #F8F2E8); }
body.theme-nature .closing { background: linear-gradient(to bottom, #D8ECCE, #ECF3E6); }
body.theme-modern .closing { background: #EFEFEF; border-top: 1px solid #E8E8E8; }
.cl-inner { position: relative; z-index: 1; }
.cl-deco { font-family: var(--font-en); font-size: 11px; letter-spacing: 6px; opacity: 0.3; margin-bottom: 28px; }
.cl-names { font-size: 28px; font-weight: 200; margin-bottom: 20px; }
body.theme-modern .cl-names { font-size: 18px; font-weight: 700; letter-spacing: 4px; font-family: var(--font-ui); }
.cl-msg { font-size: 14px; line-height: 2; opacity: 0.4; margin-bottom: 32px; word-break: keep-all; }
.cl-brand { font-size: 11px; opacity: 0.2; }
.cl-brand a { opacity: 1; letter-spacing: 2px; font-family: var(--font-en); }
body.theme-cinematic .cl-brand a { color: #8F0000; }
body.theme-classic .cl-brand a { color: #6A0000; }
body.theme-nature .cl-brand a { color: #5A7A58; }
body.theme-modern .cl-brand a { color: #0A0A0A; }

/* ===================== TOAST ===================== */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  border-radius: 100px;
  padding: 11px 24px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 200;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
body.theme-cinematic .toast { background: rgba(30,30,30,0.95); color: #fff; border: 1px solid rgba(255,255,255,0.08); }
body.theme-classic .toast, body.theme-nature .toast, body.theme-modern .toast { background: rgba(10,10,10,0.85); color: #fff; }