:root{--ink:#222;--mute:#888;--sage:#b39a72;--sage-bg:transparent;--pearl:linear-gradient(115deg,#fff0 30%,#ffffffd0 45%,#f6e9ee99 52%,#fff0 65%);--hand:#9E4F64;--line:#e8e8e2}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#fffdfb}body{background:transparent;color:var(--ink);font-family:'Pretendard Variable',Pretendard,sans-serif;-webkit-font-smoothing:antialiased}
body{max-width:480px;margin:0 auto;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
section{padding:96px 28px;text-align:center}
.tint{background:var(--sage-bg)}
.eyebrow{font:400 15px 'Italiana',serif;letter-spacing:.35em;color:var(--sage);margin-bottom:10px}
h3{font-weight:500;font-size:17px;color:#444;margin-bottom:34px}
.display{font:400 40px 'Italiana',serif;letter-spacing:.12em;color:#333;margin-bottom:10px}
.sub,.since{font-size:13px;color:var(--mute);margin-bottom:34px}
.body{font-size:14px;line-height:2;color:#666}.body small{color:#999;font-size:12px}
.heart{color:var(--hand)}
#petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:.75}
.fab{position:fixed;top:14px;right:max(14px,calc(50% - 226px));z-index:60;display:flex;gap:6px;transition:opacity .3s}
.fab button{width:34px;height:34px;border-radius:50%;border:0;background:#0000002e;color:#fff;font-size:14px;backdrop-filter:blur(6px)}
.fab button[hidden]{display:none}
.fab.hide{opacity:1}
/* cover */
.cover{position:relative;height:100svh;padding:0;overflow:hidden;color:#fff}
.cover-photo{position:absolute;inset:0}.cover-photo img{object-position:50% 40%}
.cover::after{content:'';position:absolute;inset:0;background:linear-gradient(#00000080,#0000 32%,#0000 60%,#00000073)}
.cv-name{position:absolute;z-index:2;top:11%;left:0;right:0;font:500 34px 'Cormorant Garamond',serif;letter-spacing:.14em;text-shadow:0 1px 10px #0004}
.cv-name i{font:400 34px 'Pinyon Script',cursive;letter-spacing:0;padding:0 4px}
.cv-foot{position:absolute;z-index:2;bottom:11%;left:0;right:0;font-size:15px;line-height:1.9;letter-spacing:.02em;text-shadow:0 1px 8px #0006}
.hint{position:absolute;z-index:2;bottom:22px;left:0;right:0;font:400 10px 'Italiana',serif;letter-spacing:.4em;opacity:.8}
/* intro */
.hand{width:250px;height:64px;color:var(--hand);margin:0 auto 26px;display:block}
.hand text{font:400 46px 'Pinyon Script',cursive;fill:currentColor}
.lead{font:500 19px/1.8 'Cormorant Garamond','Nanum Myeongjo',serif;color:#333;margin-bottom:26px}
.sign{margin-top:30px;font-size:14px;color:#444;letter-spacing:.05em}
.wide{height:520px;overflow:hidden}.wide img{object-position:50% 30%}
/* date */
.bigdate{font:400 92px/1 'Italiana',serif;color:#2b2b2b;margin-bottom:22px}.bigdate span{display:inline-block}.bigdate .n{font-size:96px;color:var(--sage)}.bigdate .y{font-size:20px;letter-spacing:.5em;color:#777;margin-top:10px;padding-left:.5em}
.when .eyebrow{margin-top:8px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:10px 0;max-width:300px;margin:36px auto 30px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;color:#555}
.cal b{font-weight:500;color:#999;font-size:12px}.cal b:first-child,.cal span:nth-child(7n+8){color:#d27a7a}
.cal span{height:32px;line-height:32px}
.cal .on{background:#9E4F64;color:#fff!important;border-radius:50%;width:32px;margin:0 auto;font-weight:600}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:310px;margin:0 auto 22px}
.count div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 0 9px;font:400 26px 'Italiana',serif;color:#333;box-shadow:0 4px 14px #0000000a}
.count small{display:block;font:500 9px 'Pretendard Variable',sans-serif;letter-spacing:.12em;color:#aaa;margin-top:4px}
.left{font-size:14px;color:#555}.left b{color:var(--hand);font-weight:600}
/* parents */
.parents{padding-top:40px;padding-bottom:90px}
.parents p{font-size:15px;color:#555;margin:14px 0;line-height:1.8}
.parents small{font-size:13px;color:#999;margin:0 6px 0 2px}.parents b{font-weight:600;color:#222}
.parents em{font:normal 400 12px 'Italiana',serif;letter-spacing:.2em;color:var(--sage);margin-left:6px}
/* about */
.cards{display:grid;gap:26px}
.card{background:#fff;padding:14px 14px 22px;border-radius:4px;box-shadow:0 10px 30px #0000000f;margin:0 18px}
.card:nth-child(1){transform:rotate(-1.2deg)}.card:nth-child(2){transform:rotate(1.2deg)}
.pol{aspect-ratio:4/5;overflow:hidden}
.card:nth-child(1) .pol img{object-position:50% 35%}.card:nth-child(2) .pol img{object-position:50% 62%}
.card figcaption{margin-top:16px;display:flex;flex-direction:column;gap:4px}
.card small{font-size:11px;color:var(--sage);letter-spacing:.2em}.card b{font-size:17px;font-weight:600}.card span{font-size:13px;color:#888}
/* story */
.story h3{font-size:18px}.story h3 b{color:var(--hand);font-weight:600}
.story h3{margin-bottom:6px}
.timeline{list-style:none;position:relative;max-width:300px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:var(--line)}
.timeline li{position:relative;width:50%;padding:0 22px 34px;text-align:right}
.timeline li:nth-child(even){margin-left:50%;text-align:left}
.timeline li::after{content:'';position:absolute;top:6px;right:-5px;width:9px;height:9px;border-radius:50%;background:#fff;border:1px solid var(--sage)}
.timeline li:nth-child(even)::after{right:auto;left:-4px}
.timeline li:last-child::after{background:var(--hand);border-color:var(--hand)}
.timeline time{display:block;font:400 15px 'Italiana',serif;letter-spacing:.06em;color:var(--sage);margin-bottom:4px}
.timeline b{font-size:14px;font-weight:500;color:#444}
/* gallery: 9장, 3:4, 2열 동일 크기 */
.gallery{padding-left:20px;padding-right:20px}
.track{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.track>.ph{aspect-ratio:3/4;overflow:hidden;border-radius:4px;cursor:zoom-in;background:#eee}
/* location */
.where h3{font-size:18px;line-height:1.5;margin-bottom:10px}.where h3 small{font-size:14px;color:#888;font-weight:400}
.row2{display:flex;gap:8px;justify-content:center;margin:18px 0 22px}
.row2>*,.btns a{font-size:13px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#555;text-decoration:none}
.map{height:220px;border-radius:6px;overflow:hidden;background:#f1f1ec}
.btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 28px}
.info{list-style:none;text-align:left;border-top:1px solid var(--line)}
.info li{padding:16px 4px;border-bottom:1px solid var(--line);font-size:13px;color:#666;line-height:1.7}
.info b{display:block;color:#333;font-weight:600;margin-bottom:2px}
/* gift */
.gift{background:var(--sage-bg)}
.gift h3{margin-bottom:6px}.gift h3::after{content:'참석이 어려우신 분들을 위해 기재했습니다';display:block;font-size:13px;color:#999;font-weight:400;margin:10px 0 26px}
details{background:#fff;border-radius:8px;margin-bottom:10px;text-align:left;overflow:hidden;box-shadow:0 2px 10px #0000000a}
summary{list-style:none;padding:17px 20px;font-size:15px;font-weight:500;cursor:pointer;display:flex;justify-content:space-between}
summary::-webkit-details-marker{display:none}summary::after{content:'⌄';color:#aaa}
details[open] summary::after{transform:rotate(180deg)}
.acct{padding:4px 20px 18px;border-top:1px solid var(--line)}
.acct p{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:14px;color:#555;line-height:1.6}
.acct .copy{font-size:12px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff}
.pay{display:grid;grid-template-columns:1fr;gap:6px}.pay a{text-align:center;font-size:13px;padding:10px;border-radius:8px;background:#9E4F64;color:#fff;text-decoration:none}
.kpay{display:none!important}
/* closing */
.closing{position:relative;padding:0;height:90svh;overflow:hidden;color:#fff}
.close-ph{position:absolute;inset:0}.close-ph img{object-position:90% 35%}
.closing::after{content:'';position:absolute;inset:0;background:linear-gradient(#0000,#0000 40%,#00000080)}
.close-tx{position:absolute;z-index:2;left:0;right:0;bottom:10%;font-size:14px;line-height:1.9}
.script{font:400 48px 'Pinyon Script',cursive;margin-bottom:8px}
.share{margin-top:22px;padding:12px 26px;border:0;border-radius:999px;background:#ffffffe6;color:#333;font-size:14px}
/* lightbox / toast */
.lb{position:fixed;inset:0;z-index:100;background:#000e;display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}.lb-f{max-width:100%;max-height:82vh}.lb-f img{max-height:82vh;width:auto;max-width:100vw;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:30px;padding:12px}
.lb-x{top:10px;right:10px}.lb-p{left:4px}.lb-n{right:4px}.lb-c{position:absolute;bottom:20px;color:#ccc;font-size:13px}
.toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,20px);background:#333;color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;transition:.3s;z-index:120;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== FX ===== */
main{position:relative;z-index:1}
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#fffdfb}
.mesh i{position:absolute;width:80vmax;height:80vmax;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.mesh i:nth-child(1){background:radial-gradient(#fbe3e8,#fff0 65%);left:-30vmax;top:-20vmax;animation:m1 26s ease-in-out infinite alternate}
.mesh i:nth-child(2){background:radial-gradient(#f3ebdf,#fff0 65%);right:-35vmax;top:20vh;animation:m2 32s ease-in-out infinite alternate}
.mesh i:nth-child(3){background:radial-gradient(#eef0f7,#fff0 65%);left:-10vmax;bottom:-40vmax;animation:m3 38s ease-in-out infinite alternate}
@keyframes m1{to{transform:translate(25vmax,30vh)}}@keyframes m2{to{transform:translate(-30vmax,25vh)}}@keyframes m3{to{transform:translate(20vmax,-35vh)}}
.cover{z-index:2}
/* handwriting stroke */
.hand text{fill:transparent;stroke:#9E4F64;stroke-width:.9;stroke-dasharray:900;stroke-dashoffset:900}
.hand.draw text{animation:draw 3.2s cubic-bezier(.6,.1,.3,1) forwards,ink 1s 2.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes ink{to{fill:#9E4F64}}
/* lines rise */
.ln{display:block}
.js .ln{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1),filter 1s}
.js .ln.in{opacity:1;transform:none;filter:none}
@supports (animation-timeline:view()){
 .js .ln{transition:none;animation:rise linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
 @keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
 .track>.ph{animation:pop linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
 @keyframes pop{from{opacity:.2;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}
}
/* glass + pearl */
.glass,.count div,.card,.btns a,.row2>*{background:#ffffff8c!important;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid #ffffffd9!important;box-shadow:0 8px 28px #9e4f6414,inset 0 1px 0 #fff!important;position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out}
.glass::before,.count div::before,.card::before{content:'';position:absolute;inset:0;background:var(--pearl);background-size:250% 100%;background-position:var(--sx,100%) 0;pointer-events:none;z-index:1;mix-blend-mode:soft-light;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,60%{background-position:120% 0}100%{background-position:-120% 0}}
.map.glass{padding:0}
.eyebrow,.display{background:linear-gradient(100deg,#b39a72,#e6d6bb 45%,#9E4F64 55%,#b39a72);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%}
.bigdate .n{color:#9E4F64}
.timeline li::after{border-color:#9E4F64}
/* flip digits */
.count .d{display:inline-block}.count .d.flip{animation:flip .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes flip{from{transform:rotateX(90deg) translateY(-30%);opacity:0}to{transform:none;opacity:1}}
.count div{perspective:200px}
/* view transition */
::view-transition-old(hero),::view-transition-new(hero){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
.lb{background:#fffdfbf2;backdrop-filter:blur(10px)}.lb button{color:#9E4F64}.lb-c{color:#9E4F64}
@media (prefers-reduced-motion:reduce){.mesh i,.glass::before,.count div::before,.card::before{animation:none!important}.hand text{fill:#9E4F64;stroke-dashoffset:0}.js .ln,.track>.ph{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}.count .d.flip{animation:none}}