/* ═══════════════════════════════════════════════════════════
   KOREAN BLOSSOM — Seoul-studio minimal: oat cream, cherry blossom, film
   Fonts: Gowun Batang (serif) · Gowun Dodum (sans) · Nanum Pen Script (hand)
═══════════════════════════════════════════════════════════ */
:root {
    --bg:           #f8f3ec;
    --bg-2:         #f1e8dc;
    --surface:      #fffcf8;
    --paper:        #fdf9f3;
    --text:         #554540;
    --muted:        #776760;
    --accent:       #e3a0ae;
    --accent-light: #f7dde2;
    --accent-dark:  #b8687c;
    --rose-ink:     #a3566b;
    --stamp:        #e0874c;
    --sage:         #a9b48f;
    --line:         rgba(85,69,64,.14);
    --line-soft:    rgba(85,69,64,.08);
    --shadow-s:     0 2px 6px rgba(120,90,80,.06), 0 10px 26px rgba(120,90,80,.08);
    --shadow-m:     0 4px 10px rgba(120,90,80,.07), 0 18px 40px rgba(120,90,80,.12);
    --serif:        'Gowun Batang', 'Nanum Myeongjo', Georgia, serif;
    --sans:         'Gowun Dodum', 'Noto Sans KR', system-ui, sans-serif;
    --hand:         'Nanum Pen Script', cursive;
    --radius:       20px;
    --frame-w:      min(100vw, 560px);
    --pad-top:      calc(var(--frame-w) * .31 + 18px);
    --pad-bottom:   calc(var(--frame-w) * .24 + 18px);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--sans);
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    width: 100%;
}
body.no-scroll { overflow: hidden; height: 100vh; }
img { max-width: 100%; display: block; }
main { overflow: hidden; position: relative; z-index: 2; }
::selection { background: var(--accent-light); color: var(--rose-ink); }

/* ── Paper + film grain ── */
.paper-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 45% at 15% 0%, rgba(247,221,226,.55), transparent 70%),
        radial-gradient(ellipse 60% 40% at 95% 100%, rgba(241,232,220,.9), transparent 70%),
        var(--bg);
}
.film-grain {
    position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .09;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .27 0 0 0 0 .25 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.petal-canvas {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 10002; pointer-events: none;
}

/* ── Frames (SVG assets) ── */
.section-frame {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--pad-top) 0 var(--pad-bottom);
}
.section-frame-top, .section-frame-bottom,
.intro-frame-top, .intro-frame-bottom {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: var(--frame-w); line-height: 0;
    pointer-events: none; user-select: none; z-index: 1;
    display: block;
}
.section-frame-top, .intro-frame-top { top: 0; }
.section-frame-bottom, .intro-frame-bottom { bottom: 0; }
.section-frame-top img, .section-frame-bottom img { width: 100%; height: auto; display: block; }
.intro-frame-top, .intro-frame-bottom { height: auto; max-height: 38vh; object-fit: cover; }
.intro-frame-top { object-position: top; }
.intro-frame-bottom { object-position: bottom; }
.divider { display: block; width: min(250px, 74%); height: auto; margin: 0 auto; }

/* ── Layout ── */
.container {
    width: 100%; max-width: 720px; margin: 0 auto; padding: 0 1.5rem;
    position: relative; z-index: 2;
}
.section-head { text-align: center; margin-bottom: 2.2rem; }
.eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: .72rem; letter-spacing: .38em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .5rem;
}
.section-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    line-height: 1.25; letter-spacing: .04em; color: var(--text);
    margin-bottom: .5rem;
}
.doodle-line, .quote-doodle, .amp-heart {
    fill: none; stroke: var(--accent-dark); stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.doodle-line { display: block; width: 130px; height: auto; margin: 0 auto; opacity: .8; }

/* ── Film date stamp ── */
.film-stamp {
    display: inline-block;
    font-family: var(--sans); font-weight: 400;
    color: var(--stamp); letter-spacing: .14em;
    text-shadow: 0 0 6px rgba(224,135,76,.45), 0 0 1px rgba(224,135,76,.8);
}

/* ── Washi tape ── */
.tape {
    position: absolute; top: -11px; width: 76px; height: 22px; z-index: 3;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px),
        rgba(242,188,203,.72);
    box-shadow: 0 1px 2px rgba(120,90,80,.08);
    transform-origin: center;
}
.tape::before, .tape::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 5px;
    background: radial-gradient(circle at 0 50%, var(--bg) 2px, transparent 2.5px) 0 0 / 5px 6px repeat-y;
}
.tape::before { left: -2px; }
.tape::after { right: -2px; transform: scaleX(-1); }
.tape-l { left: 18px; transform: rotate(-6deg); }
.tape-r { right: 18px; transform: rotate(5deg); background-color: rgba(185,194,156,.6); }

/* ════════════════════════════
   BUTTONS
════════════════════════════ */
.btn-blossom {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .9rem 2rem;
    background: var(--text); color: var(--surface);
    border: none; border-radius: 999px; cursor: pointer;
    font-family: var(--sans); font-size: .86rem; letter-spacing: .14em;
    box-shadow: 0 0 0 4px rgba(255,252,248,.8), 0 0 0 5px var(--line), 0 12px 26px rgba(85,69,64,.22);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s;
}
.btn-blossom:hover { transform: translateY(-2px); background: var(--rose-ink); }
.btn-blossom:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255,252,248,.9), 0 0 0 6px var(--accent), 0 12px 26px rgba(85,69,64,.22);
}
.btn-blossom:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.btn-blossom.is-sent { background: #7f9a72; }
.btn-block { width: 100%; }

/* ════════════════════════════
   INTRO / COVER (soft curtain)
════════════════════════════ */
.curtain-sheer {
    position: fixed; inset: 0 0 -14vh; z-index: 9999; pointer-events: none;
    background: linear-gradient(180deg, rgba(247,221,226,.95), rgba(253,240,242,.9) 70%, rgba(247,221,226,.95));
    border-radius: 0 0 50% 50% / 0 0 14vh 14vh;
}
.intro {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse 80% 50% at 50% 45%, rgba(255,252,248,.95), transparent 70%),
        linear-gradient(180deg, #faf5ee 0%, #f5ede2 100%);
    text-align: center; padding: 2rem 1.5rem;
}
/* soft curved hem below the cover — visible while it lifts */
.intro::after {
    content: ''; position: absolute; left: -10%; right: -10%; top: 100%;
    height: 14vh; margin-top: -1px;
    background: #f5ede2;
    border-radius: 0 0 50% 50%;
    box-shadow: 0 18px 30px rgba(120,90,80,.12);
}
.intro-content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    max-width: 420px; width: 100%;
    padding-top: min(13vh, 110px);
}
.intro-stamp { font-size: .78rem; margin-bottom: .6rem; }
.intro-wreath { position: relative; width: min(46vw, 190px); aspect-ratio: 1; margin-bottom: .2rem; }
.intro-ornamen { width: 100%; height: 100%; }
.monogram {
    position: absolute; inset: 0 0 8% 0;
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    font-family: var(--serif); font-size: clamp(1.9rem, 9vw, 2.5rem); color: var(--text);
    letter-spacing: .02em;
}
.mono-heart { width: 15px; height: 14px; fill: var(--accent); margin-top: .2em; animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.25); } 24% { transform: scale(1); } 36% { transform: scale(1.15); } }
.intro-subtitle {
    font-family: var(--hand); font-size: 1.55rem; line-height: 1.1;
    color: var(--accent-dark); margin-bottom: .3rem;
}
.intro-names {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.9rem, 8.6vw, 2.6rem); line-height: 1.25;
    letter-spacing: .05em; color: var(--text);
    margin-bottom: 1.3rem; overflow-wrap: anywhere;
}
.intro-names em { font-family: var(--hand); font-style: normal; color: var(--accent-dark); font-size: .95em; padding: 0 .1em; }
.guest-card {
    position: relative;
    width: min(100%, 300px);
    padding: 1.15rem 1.2rem .95rem;
    margin-bottom: 1.4rem;
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow-s);
}
.guest-card .tape-l { left: 50%; margin-left: -38px; transform: rotate(-3deg); }
.to-label { display: block; font-size: .78rem; color: var(--muted); letter-spacing: .03em; margin-bottom: .2rem; }
.guest-name {
    font-family: var(--serif); font-weight: 700; font-size: 1.18rem; line-height: 1.35;
    color: var(--text); overflow-wrap: anywhere;
}

/* ════════════════════════════
   NAV + MUSIC
════════════════════════════ */
nav#mainNav {
    position: fixed; left: 0; right: 0; margin: 0 auto;
    width: max-content; max-width: calc(100% - 24px);
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateY(160px); opacity: 0;
    z-index: 1000;
    transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .9s, bottom .4s ease;
}
nav#mainNav.visible { transform: translateY(0); opacity: 1; }
body:has(#qr-fab) nav#mainNav, body.has-qr nav#mainNav { bottom: calc(84px + env(safe-area-inset-bottom)); }
.nav-inner {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 8px;
    background: rgba(255,252,248,.88);
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(163,86,107,.08), var(--shadow-m);
}
nav#mainNav a {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    color: #85736b; display: flex; align-items: center; justify-content: center; position: relative;
    text-decoration: none; transition: color .3s, background-color .3s;
}
nav#mainNav a svg { width: 21px; height: 21px; flex-shrink: 0; }
nav#mainNav a.active { color: var(--rose-ink); background: var(--accent-light); box-shadow: inset 0 0 0 1px rgba(227,160,174,.55); }
nav#mainNav a:hover { color: var(--rose-ink); }
nav#mainNav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.music-toggle-btn {
    position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 1001;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.9);
    background: rgba(255,252,248,.86); color: var(--rose-ink);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow-s);
    transition: transform .3s, background .3s;
}
.music-toggle-btn svg { width: 18px; height: 18px; }
.music-toggle-btn:hover { transform: rotate(-10deg) scale(1.05); background: var(--accent-light); }
.music-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ════════════════════════════
   HERO
════════════════════════════ */
.hero { align-items: center; text-align: center; padding-left: 1.5rem; padding-right: 1.5rem; }
.hero-frame { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 440px; width: 100%; }
.hero-eyebrow {
    font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; color: var(--muted);
    margin-bottom: .6rem;
}
.hero-wreath { position: relative; width: min(52vw, 220px); aspect-ratio: 1; margin-bottom: .2rem; }
.hero-ornamen { width: 100%; height: 100%; animation: sway 9s ease-in-out infinite; transform-origin: 50% 45%; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.wreath-date {
    position: absolute; inset: 0 0 10% 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.wreath-date .day { font-family: var(--serif); font-size: clamp(2.6rem, 13vw, 3.4rem); line-height: 1; color: var(--text); }
.wreath-date .month { font-family: var(--hand); font-size: 1.45rem; line-height: 1; color: var(--accent-dark); }
.hero-label { font-family: var(--hand); font-size: 1.6rem; line-height: 1.1; color: var(--accent-dark); margin: .2rem 0 .2rem; }
.hero-names {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.2rem, 10.5vw, 3.2rem); line-height: 1.15;
    letter-spacing: .06em; color: var(--text);
    margin-bottom: 1rem;
    display: flex; flex-direction: column; align-items: center;
}
.hero-names .name-line { display: block; overflow-wrap: anywhere; }
.hero-names .word { display: inline-block; white-space: nowrap; }
.hero-names .ch { display: inline-block; }
.hero-names .amp {
    display: inline-block;
    font-family: var(--hand); font-size: .7em; line-height: 1.1;
    color: var(--accent-dark);
}
.hero-divider { margin-bottom: 1.1rem; }
.hero-date .film-stamp { font-size: 1rem; padding: .3rem .9rem; border: 1px dashed rgba(224,135,76,.45); border-radius: 6px; }
.hero-date .d { font-weight: 700; margin-right: .25em; }
.scroll-hint {
    margin-top: 1.8rem;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--muted);
}
.scroll-hint span {
    width: 1px; height: 34px; position: relative; overflow: hidden; background: var(--line);
}
.scroll-hint span::after {
    content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
    background: var(--accent-dark); animation: drip 2.2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes drip { to { transform: translateY(350%); } }

/* ════════════════════════════
   QUOTE (scrapbook card)
════════════════════════════ */
.quote { text-align: center; }
.quote-card {
    position: relative; max-width: 520px; margin: 0 auto;
    padding: 2.4rem 1.6rem 1.8rem;
    background: var(--surface);
    border-radius: 6px;
    box-shadow: var(--shadow-m);
    transform: rotate(-.6deg);
}
.quote-card::before {
    content: ''; position: absolute; inset: 10px; border: 1px solid var(--line-soft); border-radius: 3px; pointer-events: none;
}
.quote-doodle { width: 64px; height: auto; margin: 0 auto .8rem; display: block; stroke: var(--accent); stroke-width: 1.8; }
.quote-card p {
    font-family: var(--serif); font-size: 1.05rem; line-height: 1.9; color: var(--text);
    margin-bottom: 1rem;
}
.quote-card cite {
    display: block; font-style: normal; font-family: var(--hand); font-size: 1.45rem;
    color: var(--rose-ink); margin-bottom: 1rem;
}

/* ════════════════════════════
   COUPLE (polaroids)
════════════════════════════ */
.couple { text-align: center; }
.couple-flex {
    display: flex; align-items: flex-start; justify-content: center; gap: 1rem;
}
.couple-item { flex: 1 1 0; min-width: 0; max-width: 240px; display: flex; flex-direction: column; align-items: center; }
.polaroid {
    width: 100%; max-width: 200px;
    background: #fffefb; padding: 9px 9px 0;
    border-radius: 6px;
    box-shadow: var(--shadow-m);
    margin-bottom: 1.1rem;
}
.couple-item:first-child .polaroid { transform: rotate(-3.5deg); }
.couple-item:last-child .polaroid { transform: rotate(3deg); }
.polaroid-photo {
    position: relative; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), transparent 45%),
        radial-gradient(circle at 75% 80%, rgba(227,160,174,.55), transparent 55%),
        linear-gradient(160deg, #f7dde2, #efe2d3 70%);
}
.polaroid-photo.alt {
    background:
        radial-gradient(circle at 70% 25%, rgba(255,255,255,.75), transparent 45%),
        radial-gradient(circle at 25% 80%, rgba(185,194,156,.5), transparent 55%),
        linear-gradient(200deg, #efe2d3, #f7dde2 75%);
}
.polaroid-photo .initial {
    font-family: var(--serif); font-size: clamp(2.6rem, 14vw, 3.6rem); color: rgba(85,69,64,.78);
}
.film-stamp.mini { position: absolute; right: 8px; bottom: 6px; font-size: .62rem; letter-spacing: .1em; }
.polaroid-caption {
    display: block; padding: .35rem 0 .45rem;
    font-family: var(--hand); font-size: 1.3rem; line-height: 1.2; color: var(--muted);
}
.couple .name {
    font-family: var(--serif); font-weight: 700; font-size: clamp(1.15rem, 5vw, 1.5rem);
    line-height: 1.3; color: var(--text); margin-bottom: .35rem; overflow-wrap: anywhere;
}
.parent { font-size: .92rem; line-height: 1.6; color: var(--muted); }
.ampersand {
    position: relative; flex: 0 0 auto; align-self: center;
    width: 44px; height: 42px; margin-top: -4rem;
    display: flex; align-items: center; justify-content: center;
}
.amp-heart { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--accent); stroke-width: 1.6; }
.ampersand span { position: relative; font-family: var(--hand); font-size: 1.5rem; color: var(--rose-ink); line-height: 1; margin-top: -2px; }
.couple-divider { margin-top: 2rem; }

/* ════════════════════════════
   EVENT
════════════════════════════ */
.event { text-align: center; }
.countdown {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
    max-width: 420px; margin: 0 auto 2.2rem;
}
.time-box {
    background: var(--surface); border-radius: 18px;
    padding: .9rem .3rem .7rem;
    box-shadow: var(--shadow-s);
    position: relative;
}
.time-box::after {
    content: ''; position: absolute; top: 8px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
    border-radius: 50%; background: var(--accent);
}
.digit-window { overflow: hidden; height: 1.25em; font-size: clamp(1.5rem, 7.4vw, 2rem); line-height: 1.25; margin-top: .25rem; }
.digit-window span {
    display: block; position: relative;
    font-family: var(--serif); font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.digit-window span::before {
    content: attr(data-prev); position: absolute; left: 0; right: 0; top: 100%;
}
.time-box label { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.event-grid { display: grid; gap: 1.2rem; max-width: 460px; margin: 0 auto; }
.event-card {
    --notch: 11px;
    position: relative; text-align: center;
    background: var(--surface);
    border-radius: 22px;
    box-shadow: var(--shadow-s);
    overflow: hidden;
}
.ticket-head {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    padding: 1.1rem 1rem .9rem;
    background: linear-gradient(180deg, rgba(247,221,226,.6), rgba(247,221,226,.25));
}
.ticket-head::after {
    /* perforation */
    content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
    background: repeating-linear-gradient(90deg, rgba(85,69,64,.25) 0 6px, transparent 6px 11px);
}
.ticket-body { position: relative; }
.ticket-body::before, .ticket-body::after {
    content: ''; position: absolute; z-index: 2; top: calc(var(--notch) * -1);
    width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%;
    background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-soft), inset 0 2px 4px rgba(120,90,80,.08);
}
.ticket-body::before { left: calc(var(--notch) * -1); }
.ticket-body::after { right: calc(var(--notch) * -1); }
.event-icon { width: 28px; height: 28px; flex: none; }
.event-title { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--text); letter-spacing: .04em; }
.ticket-body { padding: 1.2rem 1.4rem 1.4rem; }
.event-date { font-family: var(--serif); font-size: 1.05rem; color: var(--text); }
.event-time { color: var(--rose-ink); font-size: .98rem; letter-spacing: .06em; margin: .15rem 0 .55rem; }
.event-location { font-size: .95rem; color: var(--muted); line-height: 1.55; }

/* ════════════════════════════
   MAP
════════════════════════════ */
.map-section { text-align: center; }
.map-card {
    max-width: 560px; margin: 0 auto; text-align: left;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-m);
    padding: 10px; overflow: hidden;
}
.map-info {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem .8rem 1rem;
}
.map-detail { display: flex; gap: .75rem; align-items: flex-start; min-width: 0; }
.map-icon {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--rose-ink);
}
.map-venue { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.map-address { font-size: .9rem; color: var(--muted); line-height: 1.55; margin-top: .15rem; }
.btn-map-nav {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .6rem 1.1rem; border-radius: 999px;
    background: var(--text); color: var(--surface); text-decoration: none;
    font-size: .82rem; letter-spacing: .08em;
    transition: background .3s, transform .3s;
}
.btn-map-nav:hover { background: var(--rose-ink); transform: translateY(-1px); }
.btn-map-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.leaflet-map { width: 100%; height: 260px; display: block; border-radius: 14px; filter: saturate(.7) sepia(.12) brightness(1.03); z-index: 1; }
.map-embed-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    height: 200px; border-radius: 14px; text-decoration: none;
    background: repeating-linear-gradient(45deg, rgba(247,221,226,.45) 0 12px, rgba(255,252,248,.6) 12px 24px);
    color: var(--rose-ink); font-size: .92rem;
}
.leaflet-popup-content-wrapper { border-radius: 12px; font-family: var(--sans); color: var(--text); }

/* ════════════════════════════
   GALLERY (instant film)
════════════════════════════ */
.gallery { text-align: center; }
.gallery-subtitle { font-family: var(--hand); font-size: 1.5rem; color: var(--muted); margin: -1.4rem 0 1.6rem; }
.gallery-layout {
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 10px;
    max-width: 620px; margin: 0 auto;
}
.gallery-featured, .gallery-grid-item, .gallery-extra-item {
    position: relative; overflow: hidden; cursor: pointer;
    background: #fffefb; padding: 6px 6px 18px; border-radius: 8px;
    box-shadow: var(--shadow-s);
}
.gallery-featured img, .gallery-grid-item img, .gallery-extra-item img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 4px;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.gallery-featured { aspect-ratio: auto; min-height: 100%; }
.gallery-featured img { height: 100%; min-height: 220px; }
.gallery-grid-side { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; min-width: 0; }
.gallery-grid-item { aspect-ratio: 3 / 4; }
.gallery-grid-item img { height: 100%; }
.gallery-featured::after, .gallery-grid-item::after, .gallery-extra-item::after {
    content: ''; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px;
    border-radius: 50%; background: var(--accent); opacity: .7;
}
.gallery-featured-overlay, .gallery-item-overlay {
    position: absolute; inset: 6px 6px 18px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(85,69,64,.28); opacity: 0; transition: opacity .35s;
}
.gallery-featured:hover img, .gallery-grid-item:hover img, .gallery-extra-item:hover img { transform: scale(1.05); }
.gallery-featured:hover .gallery-featured-overlay, .gallery-grid-item:hover .gallery-item-overlay, .gallery-extra-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-row-extra {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr));
    gap: 10px; max-width: 620px; margin: 10px auto 0;
}
.gallery-extra-item { aspect-ratio: 1; }
.gallery-featured.placeholder, .gallery-grid-item.placeholder {
    display: flex; align-items: center; justify-content: center; cursor: default;
    color: var(--accent-dark); background: linear-gradient(160deg, #fffefb, var(--accent-light));
}
.gallery-featured.placeholder { min-height: 240px; }
.gallery-featured.placeholder svg, .gallery-grid-item.placeholder svg { opacity: .5; }

.gallery-lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(248,243,236,.94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s;
}
.lb-img-wrap { max-width: min(90vw, 600px); max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.lb-img-wrap img {
    max-width: 100%; max-height: 78vh; object-fit: contain;
    background: #fffefb; padding: 10px 10px 34px; border-radius: 8px;
    box-shadow: var(--shadow-m);
}
.lb-close, .lb-prev, .lb-next {
    position: fixed; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: var(--surface);
    color: var(--text); cursor: pointer; box-shadow: var(--shadow-s);
    transition: background .2s, color .2s;
}
.lb-close { top: 1.1rem; right: 1.1rem; width: 40px; height: 40px; font-size: 1rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 42px; height: 42px; font-size: 1.7rem; line-height: 1; }
.lb-prev { left: .75rem; }
.lb-next { right: .75rem; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--accent-light); color: var(--rose-ink); }
.lb-counter {
    position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
    font-family: var(--sans); color: var(--muted); font-size: .82rem; letter-spacing: .25em;
    padding: 4px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-s);
}

/* ════════════════════════════
   GIFT SECTION OVERRIDE
════════════════════════════ */
#gift-section {
    position: relative;
    background:
        radial-gradient(ellipse 70% 45% at 50% 50%, rgba(247,221,226,.45), transparent 70%),
        transparent !important;
    padding: var(--pad-top) 0 var(--pad-bottom) !important;
    font-family: var(--sans) !important;
    z-index: 2;
}
#gift-section .gs-heading h2 {
    color: var(--text) !important;
    font-family: var(--serif) !important; font-weight: 400 !important;
    font-size: clamp(1.6rem, 6.5vw, 2.1rem) !important; letter-spacing: .04em;
}
#gift-section .gs-heading h2::after { background: var(--accent) !important; }
#gift-section .gs-heading p { color: var(--muted) !important; font-family: var(--sans) !important; font-size: .95rem !important; }
#gift-section .gs-sub-label { color: var(--rose-ink) !important; }
#gift-section .gs-card, #gift-section .gs-bank-card {
    background: var(--surface) !important; border-color: var(--line-soft) !important;
    border-radius: 18px !important; box-shadow: var(--shadow-s) !important;
}

/* ════════════════════════════
   WISHES
════════════════════════════ */
.rsvp-form-container {
    position: relative;
    max-width: 540px; margin: 0 auto 2.2rem;
    padding: 1.8rem 1.4rem 1.6rem;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-m);
}
.input-row { margin-bottom: 1.25rem; }
.input-row > label {
    display: block; margin-bottom: .45rem;
    font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.input-row input[type="text"], .input-row textarea {
    width: 100%; padding: .85rem 1rem;
    background: var(--paper); color: var(--text);
    border: 1px solid var(--line); border-radius: 14px;
    font-family: var(--sans); font-size: 1rem; line-height: 1.6;
    transition: border-color .3s, box-shadow .3s, background .3s;
    resize: vertical;
}
.input-row input::placeholder, .input-row textarea::placeholder { color: #a89890; }
.input-row input:focus, .input-row textarea:focus {
    outline: none; border-color: var(--accent); background: #fff;
    box-shadow: 0 0 0 4px rgba(227,160,174,.22);
}
.attend-options { display: flex; gap: .5rem; flex-wrap: wrap; }
.attend-opt {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .45rem .9rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper);
    font-size: .92rem; color: var(--text);
    transition: border-color .3s, background .3s, color .3s;
}
.attend-opt:hover { border-color: var(--accent); }
.attend-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-light); color: var(--rose-ink); }
.attend-opt input[type="radio"] { accent-color: var(--accent-dark); width: 15px; height: 15px; }

.wishes-list { max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }
.wish-item {
    display: flex; gap: .85rem; align-items: flex-start; text-align: left;
    padding: 1rem 1.1rem;
    background: var(--surface); border-radius: 16px;
    box-shadow: var(--shadow-s);
}
.wish-item:nth-child(even) { background: #fffaf6; }
.wish-avatar {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--rose-ink);
    font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
}
.wish-body { flex: 1; min-width: 0; }
.wish-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.wish-name { font-family: var(--serif); font-weight: 700; font-size: 1rem; color: var(--text); overflow-wrap: anywhere; }
.wish-badge { font-size: .7rem; padding: 1px 9px; border-radius: 999px; letter-spacing: .04em; }
.wish-badge.hadir { color: #4f6b45; background: #e3ead7; }
.wish-badge.tidak { color: #9a4a55; background: #f6dfe2; }
.wish-badge.ragu  { color: #8a6232; background: #f4e6cf; }
.wish-message { font-size: .95rem; color: var(--text); line-height: 1.6; margin-bottom: .2rem; word-break: break-word; }
.wish-time { font-family: var(--hand); font-size: 1.1rem; color: var(--muted); }
.wish-empty { text-align: center; color: var(--muted); padding: 1.6rem 0; font-family: var(--hand); font-size: 1.35rem; }

/* ════════════════════════════
   FOOTER
════════════════════════════ */
.footer { text-align: center; align-items: center; padding-left: 1.5rem; padding-right: 1.5rem; }
.footer-inner { position: relative; z-index: 2; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.footer-wreath { position: relative; width: 150px; aspect-ratio: 1; margin-bottom: .6rem; }
.footer-ornamen { width: 100%; height: 100%; }
.footer-mono {
    position: absolute; inset: 0 0 10% 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 1.7rem; color: var(--text);
}
.footer-mono em { font-family: var(--hand); font-style: normal; color: var(--accent-dark); font-size: .9em; padding: 0 .12em; }
.korean-thanks { font-family: var(--serif); font-size: .95rem; letter-spacing: .3em; color: var(--accent-dark); margin: -.2rem 0 .6rem; }
.footer-names {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.25; letter-spacing: .04em;
    color: var(--text); margin-bottom: .8rem; overflow-wrap: anywhere;
}
.footer-names .amp { display: block; font-family: var(--hand); font-size: .75em; color: var(--accent-dark); line-height: 1.1; }
.footer-copy { color: var(--muted); font-size: .98rem; margin-bottom: 1.4rem; }
.footer-credit { margin-top: 1.8rem; font-size: .78rem; color: var(--muted); letter-spacing: .04em; }

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (min-width: 700px) {
    .event-grid { grid-template-columns: 1fr 1fr; max-width: 640px; }
}
@media (max-width: 520px) {
    .couple-flex { gap: .4rem; }
    .ampersand { width: 36px; height: 34px; margin-top: -5rem; }
    .ampersand span { font-size: 1.25rem; }
    .parent { font-size: .86rem; }
    .countdown { gap: .45rem; }
    .map-info { flex-direction: column; align-items: stretch; }
    .btn-map-nav { width: 100%; }
    .rsvp-form-container { padding: 1.6rem 1.15rem 1.4rem; }
    .gallery-featured img { min-height: 200px; }

}
@media (max-width: 360px) {
    .polaroid { padding: 7px 7px 0; }
}
@media (max-height: 700px) {
    .intro-content { padding-top: 8vh; }
    .intro-wreath { width: min(36vw, 150px); }
    .guest-card { margin-bottom: 1rem; padding: .9rem 1rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mono-heart, .hero-ornamen, .scroll-hint span::after { animation: none !important; }
    .petal-canvas { display: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Footer clearance so content never sits behind the bottom nav */
main > footer.footer { padding-bottom: 96px; }
body:has(#qr-fab) main > footer.footer, body.has-qr main > footer.footer { padding-bottom: 160px; }