@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600&family=DM+Sans:wght@400;500;600&display=swap');
:root{--paper:#f5f2ea;--ink:#313c33;--accent:#73816a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #b98752;outline-offset:6px}header{position:absolute;top:0;left:0;width:100%;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:28px 4%;color:white}header button{background:none;border:1px solid #ffffff70;border-radius:30px;color:inherit;padding:12px 18px;font-size:12px}header button span{margin-left:12px}.brand{font-family:Georgia,serif;font-size:28px;font-style:italic;color:inherit;text-decoration:none}.brand span{display:block;font:9px sans-serif;letter-spacing:3px;margin-top:6px}#journey{height:360svh}.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#73999b;color:white}.scenes,.scene,.shade,#particles{position:absolute;inset:0}.scene{background-size:cover;background-position:center 60%;opacity:0;transform:scale(1.035);transition:opacity 1s ease,transform 7s linear}.scene.active{opacity:1;transform:scale(1)}.shade{background:linear-gradient(180deg,#14272155 0%,transparent 28%,#102c2320 48%,#112720c7 100%)}.eyebrow{position:absolute;top:24%;left:7%;font-size:10px;letter-spacing:3px}.tinyflower{font-size:21px;vertical-align:middle;margin-right:10px}.hero-copy{position:absolute;left:7%;bottom:18%;max-width:75%;text-shadow:0 2px 25px #172d2545;transition:opacity .25s,transform .25s}.hero-copy.changing{opacity:0;transform:translateY(10px)}#chapter{font-size:11px;letter-spacing:2px;margin-bottom:22px}h1{font-family:'Noto Serif KR',serif;font-size:clamp(32px,4.3vw,64px);font-weight:400;line-height:1.55;letter-spacing:-2px;margin:0}.sub{font-family:'Noto Serif KR',serif;font-size:13px;line-height:1.8;opacity:.85;margin-top:22px}.stage-footer{position:absolute;bottom:34px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:end}.location span{font-size:9px;letter-spacing:2px}.location small{display:block;font-size:10px;margin-top:7px;opacity:.65}#next{border:0;background:none;color:white;font-size:11px;display:flex;gap:16px;align-items:center}#next span{font-size:24px;animation:bob 2s infinite}.count{display:flex;gap:13px;align-items:center;font-size:11px}.count b{font-weight:400;font-size:24px}.count i{font-style:normal;opacity:.5}.season-nav{position:absolute;right:3%;top:43%;display:grid;gap:13px}.season-nav button{border:0;background:none;color:white;display:flex;align-items:center;justify-content:end;gap:12px;padding:5px}.season-nav span{font-size:10px;opacity:0;transition:opacity .3s}.season-nav i{width:5px;height:5px;border-radius:50%;background:#ffffff70;transition:all .4s}.season-nav .selected span{opacity:1}.season-nav .selected i{height:24px;border-radius:9px;background:white}#particles{pointer-events:none;overflow:hidden}.particle{position:absolute;top:-10%;width:7px;height:10px;background:#f9d9d7;border-radius:80% 0 80% 0;animation:fall linear infinite;opacity:.7}.winter .particle{width:4px;height:4px;border-radius:50%;background:white}.summer .particle{background:#e7eec2;width:3px;height:3px;border-radius:50%}.autumn .particle{background:#d5a466;border-radius:0 70% 0 70%}@keyframes fall{to{transform:translate(70px,115svh) rotate(360deg)}}@keyframes bob{50%{transform:translateY(5px)}}#invitation{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 24px 110px;background:radial-gradient(ellipse at 50% 35%,#fffdf7,var(--paper) 75%)}.invite-inner{max-width:620px}.overline{font-size:9px;letter-spacing:3px;color:#88907f}.flower-mark{color:#899477;font-size:42px;margin:30px}.intro{font:15px/2.1 'Noto Serif KR',serif;color:#7d8276}h2{font:400 clamp(28px,3.5vw,43px)/1.8 'Noto Serif KR',serif;letter-spacing:-1.4px;margin:24px 0}.rule{height:35px;width:1px;background:#b6bba9;margin:25px auto}.message{font:13px/2.4 'Noto Serif KR',serif;color:#818577}.open{margin:28px auto 0;padding:18px 30px;background:#3e503f;color:white;border:0;border-radius:3px;min-width:220px;display:flex;justify-content:space-between;gap:35px;font-size:13px}.open:hover{background:#52674f}.demo-label{font-size:10px;color:#a1a497;margin-top:17px}footer{position:absolute;bottom:27px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;color:#9b9f91;font-size:9px;letter-spacing:1px}footer button{background:none;border:0;color:#777f6d;font-size:10px}dialog{border:1px solid #d9ddcf;background:#faf8f1;color:var(--ink);padding:65px 35px 45px;width:min(90vw,480px);text-align:center;border-radius:4px}dialog::backdrop{background:#18261ba8;backdrop-filter:blur(6px)}dialog h2{font-size:30px}dialog p{font:14px/2 'Noto Serif KR',serif;color:#798070}dialog #close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:28px;color:#818b77}.detail{display:grid;gap:12px;border-block:1px solid #dfe2d7;padding:25px 0;margin:30px 0}.detail span{font-size:10px;color:#919884}.detail b{font-size:13px;font-weight:400;margin-bottom:12px}dialog small{font-size:10px;color:#969c8c}@media(min-width:1100px){.hero-copy{bottom:18%;left:7%}.eyebrow{top:25%}}@media(max-width:650px){header{padding:24px}.brand{font-size:24px}header button{font-size:10px;padding:10px 12px}.brand span{font-size:8px;letter-spacing:2px}.scene{background-position:36% center}.eyebrow{left:25px;top:23%;font-size:8px;letter-spacing:2px}.hero-copy{left:25px;bottom:19%;max-width:85%}h1{font-size:34px;line-height:1.65;letter-spacing:-1.4px}.sub{font-size:11px;max-width:270px}.stage-footer{left:25px;right:25px;bottom:29px}.location{display:none}#next{font-size:10px;padding:0}.season-nav{right:14px;top:40%;gap:10px}.season-nav span{display:none}.count{font-size:10px}.count b{font-size:21px}#invitation{padding-top:80px}footer{font-size:7px;letter-spacing:.5px;left:20px;right:20px}footer button{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene,.hero-copy{transition:none;transform:none}.particle{display:none}#next span{animation:none}}
/* Continuous, scroll-driven blending: no timer or discrete scene swap. */
.scene{transition:none;will-change:opacity,transform}
.hero-copy{transition:none;will-change:opacity,transform;pointer-events:none}
#journey{height:360svh}
.particle{background:var(--particle-color,#f9d9d7)!important;transition:background-color .5s,border-radius .5s}
/* A sealed envelope opens into a long, quiet paper invitation. */
#letter{width:min(94vw,620px);max-height:90svh;padding:0;border:0;border-radius:5px;background:#faf7ef;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;text-align:center;box-shadow:0 24px 100px #101a2150}
#letter:not(.revealed){height:min(560px,86svh);overflow:hidden}
#letter::backdrop{background:#17221ed9;backdrop-filter:blur(10px)}
#letter #close{position:sticky;float:right;top:10px;right:12px;margin:8px 12px -52px 0;z-index:20;width:38px;height:38px;border-radius:50%;background:#faf7efe8;color:#6e665d;font:26px/1 sans-serif}
.envelope-scene{height:100%;min-height:360px;display:grid;place-items:center;position:absolute;inset:0;z-index:3;pointer-events:none;perspective:1100px;transition:opacity .4s 1.5s}
.envelope{position:relative;width:78%;height:210px;background:#d8c9b1;border-radius:3px;box-shadow:0 18px 35px #54412b25;transform:translateY(30px);transition:transform 1.2s .6s,opacity .4s 1.4s}
.envelope-pocket{position:absolute;inset:0;background:#e8dbc6;clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);z-index:4}
.envelope-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 59%);background:#d3bea0;transform-origin:top center;z-index:6;backface-visibility:hidden;transition:transform .8s .2s ease-in-out}
.seal{position:absolute;z-index:7;top:46%;left:calc(50% - 23px);width:46px;height:46px;display:grid;place-items:center;background:#ae735e;border-radius:50%;color:#f5e4d1;font:italic 15px Georgia;box-shadow:0 2px 5px #72503a33;transition:opacity .2s,transform .3s}
.envelope-note{position:absolute;inset:12px 18px -2px;background:#fffdf7;padding:48px 12px 0;font:20px/1.8 'Noto Serif KR',serif;color:#6f6458;box-shadow:0 0 4px #8d785b20;z-index:2;transition:transform 1s .65s}
.envelope-note span{font-size:11px;letter-spacing:2px;color:#a1927d}
.unfolding .seal{opacity:0;transform:scale(.7)}.unfolding .envelope-flap{transform:rotateX(180deg)}.unfolding .envelope-note{transform:translateY(-135px)}.unfolding .envelope{transform:translateY(115px);opacity:0}.unfolding .envelope-scene{opacity:0}
.letter-paper{position:relative;padding:70px 42px 65px;opacity:0;transform:translateY(80px);transition:opacity .7s 1.2s,transform 1s 1.1s;background:linear-gradient(90deg,#c3ac7e06,transparent 12%,#fff8ed55 50%,transparent 90%,#c3ac7e06)}
.unfolding .letter-paper{opacity:1;transform:translateY(0)}.revealed .envelope-scene{display:none}.letter-heading{padding:15px 0 42px}.letter-date{font:13px/2 'Noto Serif KR',serif!important;color:#9b8b74!important;margin-top:28px}.letter-heading h2{font-size:31px!important;margin:17px 0 20px}#letter p{font-size:13px;line-height:2.1;color:#81786d}
.letter-section{border-top:1px solid #ddd5c5;padding:42px 0 0;margin-top:12px;margin-bottom:40px}.letter-section h3{font:400 19px/1.8 'Noto Serif KR',serif;letter-spacing:-.5px;margin:12px 0 27px}.letter-section .overline{color:#a18d72;font-size:8px;letter-spacing:2px}.couple-names{display:flex;justify-content:center;align-items:center;gap:22px;padding:8px 0}.couple-names div{display:grid;gap:10px}.couple-names small{font-size:10px;color:#9b8f7d}.couple-names strong{font:400 22px 'Noto Serif KR',serif}.couple-names>span{color:#b4a58f;font:italic 18px Georgia}.couple-names .pending{font-size:16px;color:#a29887}.wedding-details{margin:0;text-align:left}.wedding-details>div{padding:17px 0;border-bottom:1px solid #e9e2d6;display:grid;grid-template-columns:74px 1fr;gap:12px}.wedding-details dt{font-size:11px;color:#a08d74;line-height:1.8}.wedding-details dd{margin:0;font-size:12px;line-height:1.8;color:#7e7669}.wedding-details dd small{display:block;color:#a1988a;font-size:11px;margin-top:6px}.venue-map{border:1px solid #e6dfd0;border-radius:3px;overflow:hidden}.venue-map svg{display:block;width:100%;height:auto}.section-note{font-size:10px!important;color:#aaa08f!important;line-height:1.9!important}.accounts{margin-bottom:0}.accounts details{border-block:1px solid #e7dfd0;margin-top:-1px;text-align:left}.accounts summary{cursor:pointer;list-style:none;font-size:12px;padding:20px 3px;color:#7c705f;display:flex;justify-content:space-between}.accounts summary::-webkit-details-marker{display:none}.accounts summary span{color:#aa9577}.accounts details[open] summary span{transform:rotate(45deg)}.account-info{padding:0 10px 14px}.account-info strong{font-weight:400;font-size:12px}.account-info p{font-size:11px!important;margin:6px 0}
@media(max-width:650px){.letter-paper{padding:65px 25px 45px}.envelope{height:170px}.envelope-note{padding-top:35px;font-size:17px}.letter-heading h2{font-size:27px!important}.couple-names{gap:17px}.couple-names strong{font-size:21px}.couple-names .pending{font-size:14px}}
@media(prefers-reduced-motion:reduce){#letter *{transition:none!important;animation:none!important}.unfolding .envelope-scene{display:none}.letter-paper{transform:none}.unfolding .letter-paper{opacity:1}html{scroll-behavior:auto}}

.family-contacts{margin-top:35px;text-align:left}.family-contacts h4{font:400 15px 'Noto Serif KR',serif;text-align:center;color:#8c7d69;margin:0 0 24px}.family-group{padding:17px 0;border:0}.family-group h5{font-size:11px;font-weight:400;color:#a08d74;margin:0 0 15px}.family-group dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}.family-group dl>div{display:flex;gap:12px}.family-group dt{font-size:11px;color:#9b8f7d}.family-group dd{margin:0;font-size:12px;color:#7e7669}.family-group dd small{display:block;margin-top:8px;font-size:10px;color:#a1988a}.account-info>small{font-size:10px;color:#a1988a}@media(max-width:420px){.family-group dl{grid-template-columns:1fr;gap:20px}}

.family-contacts{text-align:center;border:0}.family-contacts>summary,.travel-toggle>summary{cursor:pointer;list-style:none;padding:19px 8px;font-size:12px;color:#7c705f}.family-contacts>summary::-webkit-details-marker,.travel-toggle>summary::-webkit-details-marker{display:none}.toggle-arrow{display:inline-block;margin-right:7px;transition:transform .2s}.family-contacts[open]>summary .toggle-arrow,.travel-toggle[open]>summary .toggle-arrow{transform:rotate(90deg)}.family-group dl>div{display:grid;gap:9px;justify-content:center}.family-group h5{text-align:center}.family-group dl{grid-template-columns:1fr 1fr}.family-group dd{line-height:1.8}.venue-map img{display:block;width:100%;height:auto}.venue-map a{display:block}.travel-info{text-align:center;margin-top:25px}.travel-info h4{font:400 14px 'Noto Serif KR',serif;margin:26px 0 10px;color:#82725d}#letter .travel-info p{font-size:11px;line-height:2;color:#8e8272}.travel-toggle{border:0;margin:0}.travel-toggle>summary{padding:17px 8px}.travel-toggle>p{margin:0 0 20px}.family-contacts .family-group:last-child{padding-bottom:8px}.bus-routes dl{margin:0 0 20px;text-align:left}.bus-routes dl>div{display:grid;grid-template-columns:65px 1fr;gap:8px;padding:10px 0}.bus-routes dt{font-size:10px;color:#a08d74;line-height:1.9}.bus-routes dd{margin:0;font-size:10px;line-height:1.9;color:#8e8272;overflow-wrap:anywhere}

/* Shared title and arrow columns keep all travel disclosures aligned. */
.travel-toggle>summary{display:grid;grid-template-columns:16px minmax(0,1fr) 16px;align-items:center;width:180px;max-width:100%;margin-inline:auto;text-align:center;column-gap:8px}.travel-toggle>summary::after{content:""}.travel-toggle>summary .toggle-arrow{margin:0;width:16px;text-align:center}