/* 레이아웃·타이포·간격 수치는 참고 사이트(Tales of Us)를 측정한 값입니다. 폰트/이미지는 무료 폰트와 내 사진으로 대체. */
@import "https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/static/woff2/SUIT.css";
@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css";
@import "https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Inter:wght@400;500;600&display=swap";

@font-face{font-family:"HappyTimeTwo";src:url(fonts/HappyTimeTwo.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"The Californication";src:url(fonts/TheCalifornication.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}

:root{--ink:#111;--mut:rgba(17,17,17,.65);--grey:#7f7d77;--pink:#fef8f9;--line:rgba(0,0,0,.12)}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-synthesis:none;background:#fff;color:var(--ink);font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
#root{font-family:SUIT,sans-serif;width:100%;margin:0 auto;background:#fff;min-height:100dvh;position:relative;overflow-x:hidden}
/* 폭: 폰(900px 미만)에서는 화면 전체, 데스크톱(900px 이상)에서는 375px 한 칸 (참고 사이트와 동일) */

img{max-width:100%;display:block;-webkit-user-select:none;user-select:none}
button,input,textarea{font-family:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}

/* 스크롤 등장 효과: 화면에 들어오면 is-visible 이 붙으며 제자리로 */
.rv{opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.rv-up{transform:translateY(30px)}
.rv-down{transform:translateY(-30px)}
.rv-left{transform:translateX(-40px)}
.rv-right{transform:translateX(40px)}
.rv-scale{transform:scale(.92)}
.rv.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* 공통 */
.sec{position:relative;padding-top:130px}
.h2{font-family:HappyTimeTwo,cursive;font-style:normal;font-weight:400;font-size:18px;line-height:27px;text-transform:uppercase;text-align:center;color:var(--ink)}
.it{font-family:HappyTimeTwo,cursive;font-style:normal;font-weight:400}
.script{font-family:"The Californication",serif;font-weight:400}
.pillbtn{display:flex;gap:6px;align-items:center;justify-content:center;width:100%;height:40px;background:var(--pink);font-size:14px;letter-spacing:-.2px;color:var(--ink)}

/* 1. 헤더 */
.s1{position:relative;width:100%;aspect-ratio:800/810;overflow:hidden;background:#fff}
.s1-bg{position:absolute;inset:0}
.s1-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;opacity:0;transition:opacity 1.4s ease}
.s1-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.1) 0,rgba(255,255,255,.18) 40%,rgba(255,255,255,.7) 78%,#fff 100%)}
.s1-c{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;padding:9px;box-sizing:border-box}
.s1-top,.s1-bottom{display:flex;justify-content:space-between;align-items:center;width:100%}
.s1-top{height:14px;margin-bottom:auto}
.s1-bottom{gap:20px;margin-top:auto}
.s1-top span,.s1-bottom span{font-family:HappyTimeTwo,cursive;font-style:normal;font-size:12px;line-height:1.5;color:var(--ink)}
.s1-top span{font-size:13px}
.s1-bottom span{flex:1;text-align:center;text-transform:uppercase}
.s1-bottom span:first-child{text-align:left}
.s1-bottom span:last-child{text-align:right}
.s1-main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:auto 0;padding:0 9px}
.s1-title{font-family:"The Californication",serif;font-weight:400;font-size:39px;line-height:58.5px;letter-spacing:2px;color:var(--ink);text-transform:capitalize}
.s1-sub{font-family:HappyTimeTwo,cursive;font-style:normal;font-weight:400;font-size:14px;line-height:1;margin:4px 0 9px;letter-spacing:.5px;color:var(--ink);text-transform:capitalize}
.s1-fallback{position:absolute;inset:0;background:#eceae6}

/* 2. CELEBRATE */
.s2{display:flex;flex-direction:column;gap:20px;align-items:center;padding:130px 0 30px}
.s2-in{display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center}
.s2-head{display:flex;flex-direction:column;gap:6px;align-items:center}
.s2-star{font-size:16px;line-height:16px}
.s2-photo{width:355px;max-width:96%;aspect-ratio:355/150;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect}
.s2-photo img{width:100%;height:100%;object-fit:cover}
.s2-text{display:flex;flex-direction:column;align-items:center;margin-top:1.7px}
.s2-text p{font-family:HappyTimeTwo,cursive;font-style:normal;font-size:25.5px;line-height:27.5px;text-transform:uppercase;text-align:center}
.s2-party{font-family:"The Californication",serif;font-size:39.375px;line-height:51.19px;letter-spacing:2.3px;margin-top:0}
.s2-date{font-family:SUIT,sans-serif;padding:20px 24px 0;font-size:14px;font-style:italic;line-height:21px;color:var(--mut);text-align:center}

/* 3. 인사말 */
.s3{display:flex;flex-direction:column;gap:30px;align-items:center;padding:130px 0 20px;background:#fff}
.s3-text{padding:0 15px;font-size:13px;line-height:19.5px;letter-spacing:-.438px;color:var(--grey);text-align:center;white-space:pre-line}
.s3-pair{display:flex;gap:9px;align-items:center;justify-content:center;width:calc(100% - 2*46px)}
.s3-col{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.s3-col:last-child{align-items:flex-end}
.s3-ph{width:100%;aspect-ratio:1/1;overflow:hidden;background:#e9e7e3}
.s3-ph img{width:100%;height:100%;object-fit:cover}
.s3-cap{font-size:14px;line-height:21px;white-space:nowrap}
.s3-col:last-child .s3-cap{text-align:right}
.s3-cap i{font-family:HappyTimeTwo,cursive;font-style:normal;font-weight:400}
.s3-cap b{font-weight:700;letter-spacing:-.438px;margin-left:2px}

/* 4. 혼주 */
.s4{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:130px 9px 20px}
.s4-grid{display:grid;grid-template-columns:auto auto;gap:11px 18px;align-items:center;justify-content:center}
.s4-par{font-size:14px;line-height:21px;letter-spacing:-.438px;color:var(--mut);white-space:nowrap}
.s4-kid{font-size:15px;font-weight:700;line-height:22.5px;letter-spacing:-.438px;white-space:nowrap}
.s4-contact{width:calc(100% - 30px);max-width:345px;margin-top:40px}

/* 5. 갤러리 */
.s5{display:flex;flex-direction:column;gap:12px;align-items:center;padding-top:130px}
.s5-head{width:100%;padding:0 12px;display:flex;flex-direction:column;gap:12px}
.s5-head .h2{margin-bottom:4px}
.s5-sub{display:flex;justify-content:space-between;gap:12px;opacity:.8}
.s5-sub p{font-family:SUIT,sans-serif;font-size:12px;font-style:italic;line-height:15.6px;letter-spacing:-.5px;color:var(--grey);text-transform:capitalize}
.s5-line{height:1px;background:var(--grey)}
.s5-track{display:flex;gap:9.4px;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;padding:0 8.5%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.s5-track::-webkit-scrollbar{display:none}
.s5-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:311/466;overflow:hidden;background:#e9e7e3}
.s5-slide img{width:100%;height:100%;object-fit:cover}
.s5-track{scroll-padding:0 8.5%}
.s5-track::after{content:"";flex:0 0 1px}

/* 6. 날짜 */
.s6{display:flex;flex-direction:column;gap:26px;align-items:center;padding:80px 0;margin-top:130px;background:#fff}
.s6-photo{width:130px;height:130px;overflow:hidden;background:#e9e7e3;margin-bottom:20px}
.s6-photo img{width:100%;height:100%;object-fit:cover}
/* Date 사진은 눌러도 아무 반응이 없게 (확대·길게 눌러 저장 메뉴 방지) */
.s6-photo{cursor:default}
.s6-photo img{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.s6-body{display:flex;flex-direction:column;gap:20px;align-items:center}
.s6-month{font-family:HappyTimeTwo,cursive;font-size:18px;line-height:27px}
.s6-d{font-family:"The Californication",serif}
.s6-grid{display:grid;grid-template-columns:repeat(9,20px);justify-content:center}
.s6-grid div{font-family:SUIT,sans-serif;position:relative;height:24px;font-size:15px;line-height:24px;text-align:center}
.s6-grid .on::after{content:"";position:absolute;left:50%;top:50%;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;border:1px solid var(--ink);border-radius:50%}
.s6-dow{font-family:HappyTimeTwo,cursive;font-style:normal;font-size:14px;line-height:21px;color:var(--mut);text-align:center}
.s6-dday{font-size:14px;font-weight:700;line-height:21px;margin-top:20px;padding:0 20px;text-align:center}

/* 7. 안내 캐러셀 */
.s7{display:flex;flex-direction:column;gap:18.75px;align-items:center;padding:130px 0 10px}
.s7-track{display:flex;gap:9.4px;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;padding:0 calc((100% - 278px)/2);scrollbar-width:none}
.s7-track::-webkit-scrollbar{display:none}
.s7-slide{flex:0 0 278px;scroll-snap-align:center}
.s7-img{width:278px;height:96px;overflow:hidden;background:#e9e7e3}
.s7-img img{width:100%;height:100%;object-fit:cover}
.s7-cap{height:24px;display:flex;align-items:center;justify-content:center;padding:5px 0;background:rgba(207,207,207,.2);font-family:HappyTimeTwo,cursive;font-style:normal;font-size:14px;line-height:14px}
.s7-desc{width:260px;min-height:98px;font-size:13px;line-height:19.5px;letter-spacing:-.23px;color:var(--mut);text-align:center;white-space:pre-line}
.s7-dots{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:-10px}
.s7-dots i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.1);transition:background .3s}
.s7-dots i.on{background:var(--ink)}

/* 8. 오시는 길 */
.s8{display:flex;flex-direction:column;gap:23px;align-items:center;padding:130px 15px 10px}
.s8-head{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}
.s8-venue{font-size:14px;line-height:21px;letter-spacing:-.25px;color:var(--grey);text-align:center}
.s8-mapwrap{width:100%;display:flex;flex-direction:column}
.s8-map{width:100%;height:160px;background:rgba(255,255,255,.2);border:1px solid rgba(0,0,0,.2);position:relative;overflow:hidden}
.s8-map iframe{width:100%;height:100%;border:0}
.s8-addr{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;padding:8px 40px;border:1px solid rgba(0,0,0,.2);border-top:0;background:rgba(255,255,255,.2)}
.s8-addr p{font-size:13px;line-height:19.5px;letter-spacing:-.25px;text-align:center}
.s8-addr button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#999}
.s8-list{display:flex;flex-direction:column;gap:23px;width:100%;padding:0 7px}
.s8-item{display:flex;flex-direction:column;gap:11px}
.s8-tag{align-self:flex-start;padding:3px 7px;background:rgba(0,0,0,.1);border-radius:57px;font-size:13px;line-height:13px;letter-spacing:-.25px}
.s8-txt{padding:0 7px;font-size:14px;line-height:21px;letter-spacing:-.29px;color:var(--mut);white-space:pre-line}
.s8-links{display:flex;width:100%}
.s8-links button{flex:1;display:flex;gap:5px;align-items:center;justify-content:center;height:40px;padding:15px 11px;background:var(--pink);border:1px solid var(--line);font-size:14px;line-height:14px;color:var(--ink)}
.s8-links img{width:12px;height:12px;object-fit:contain}

/* 9. 마음 전하실 곳 */
.s9{display:flex;flex-direction:column;gap:22px;align-items:center;padding:130px 15px 10px}
.s9-tabs{display:flex;width:100%}
.s9-tabs button{flex:1;height:46px;padding:0 0 0 12px;text-align:left;font-size:14px;font-weight:300;line-height:28px;letter-spacing:-.25px;color:var(--mut);border-bottom:1px solid rgba(0,0,0,.2)}
.s9-tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.s9-panel{width:100%;display:flex;flex-direction:column;gap:20px;margin-top:20px}
.s9-row{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;gap:8px}
.s9-who{display:grid;grid-template-columns:40px 12px auto;align-items:center;font-size:14px;line-height:28px;letter-spacing:-.25px;white-space:nowrap}
.s9-who b{font-weight:700}
.s9-who s{text-decoration:none;text-align:center}
.s9-who span{text-align:justify;text-align-last:justify;text-justify:inter-character}
.s9-right{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}
.s9-acc{display:flex;flex-direction:column;gap:2px;text-align:left;width:112px;flex:none}
.s9-acc small{font-size:10px;line-height:11px;color:var(--mut)}
.s9-acc span{font-size:14px;line-height:15px;font-weight:500;letter-spacing:-.25px;white-space:nowrap;font-variant-numeric:tabular-nums}
.s9-copy{display:flex;gap:4px;align-items:center;padding:2px 6px;background:#e5e5e5;font-size:10px;font-weight:600;line-height:20px;flex:none}
.s9-acct{display:flex;flex-direction:column;gap:6px}
.s9-pay{display:flex;gap:6px;justify-content:flex-end;padding:0 10px}
.s9-pay button{padding:2px 6px;background:#e5e5e5;font-size:10px;font-weight:600;line-height:20px}

/* 방명록 / 사진 (같은 문법으로 디자인) */
.sx{display:flex;flex-direction:column;gap:22px;align-items:center;padding:130px 15px 0}
.sx-sub{font-size:14px;line-height:20.3px;letter-spacing:-.14px;color:var(--grey);text-align:center;margin-top:-12px}
.sx-form{width:100%;display:flex;flex-direction:column;gap:12px}
.fld label{display:block;font-size:12px;line-height:16px;color:var(--grey);margin-bottom:6px}
.fld input,.fld textarea{width:100%;border:1px solid rgba(0,0,0,.15);background:#fff;padding:0 12px;font-size:14px;border-radius:0;outline:0}
.fld input{height:42px}
.fld textarea{padding:10px 12px;line-height:1.6;resize:none;display:block}
.fld input:focus,.fld textarea:focus{border-color:var(--ink)}
.btn-dark{display:block;width:100%;height:44px;background:var(--ink);color:#fff;font-size:14px;letter-spacing:-.2px}
.btn-dark:disabled{opacity:.6;cursor:default}
.sx-msg{display:none;text-align:center;font-size:13px;color:var(--grey);line-height:1.7}
.gb-list{width:100%;display:flex;flex-direction:column;gap:10px}
.gb-card{padding:16px;background:#fafaf9;border:1px solid var(--line)}
.gb-card div:first-child{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.gb-card b{font-size:14px;font-weight:700}
.gb-card small{font-size:11px;color:#aaa}
.gb-card p{font-size:13.5px;line-height:1.7;color:var(--mut);white-space:pre-wrap;word-break:break-all}
.gb-empty{text-align:center;font-size:13px;color:#aaa}
.gb-more{padding:8px 20px;border:1px solid var(--line);font-size:13px;color:var(--mut);background:#fff}
.ph-pick{width:100%;height:44px;border:1px solid var(--ink);font-size:14px;background:#fff}
.ph-pick:disabled{opacity:.6;cursor:default}
.ph-album{font-size:13px;text-decoration:underline;text-underline-offset:2px;color:var(--mut)}

/* 10. RSVP / 공유 / 푸터 */
.s10{display:flex;flex-direction:column;gap:22px;align-items:center;padding:130px 15px 0}
.s10-head{display:flex;flex-direction:column;gap:10px;align-items:center}
.s10-head p{font-size:14px;line-height:20.3px;letter-spacing:-.14px;color:var(--grey);text-align:center}
.s11{display:flex;flex-direction:column;gap:18px;align-items:center;margin:80px 0 10px}
.s11 button{display:flex;gap:6px;align-items:center;justify-content:center;font-family:Sk-Modernist,SUIT,sans-serif;font-size:13px;letter-spacing:-.08px;line-height:16px}
.s12{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:70px;padding-bottom:40px;opacity:.55}
.s12 p{font-family:Sk-Modernist,sans-serif;font-size:13px;line-height:15.6px;color:var(--grey);text-align:center}
.s12 .script{font-family:"Pinyon Script",cursive;font-size:30px;line-height:36px;color:var(--ink);opacity:.8}

/* 모달(RSVP·축하 연락) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;display:flex;align-items:center;justify-content:center;padding:8px}
.modal[hidden]{display:none!important}
.sheet{position:relative;width:min(340px,calc(100% - 16px));max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border:1px solid #e6ecf1;border-radius:12px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 24px 48px rgba(0,0,0,.12);animation:pop .24s ease}
@keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.sheet-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.sheet-h b{font-family:HappyTimeTwo,cursive;font-style:normal;font-weight:400;font-size:18px}
.sheet-h button{font-size:18px;color:#aaa;width:28px;height:28px}
.seg{display:flex;gap:8px}
.seg button{flex:1;height:40px;border:1px solid rgba(0,0,0,.15);font-size:14px;color:var(--mut);background:#fff}
.seg button.sel{background:var(--ink);border-color:var(--ink);color:#fff}
.rsvp-grid{display:flex;gap:10px}
.rsvp-grid .fld{flex:1}
.agree{display:flex;gap:10px;margin:6px 0 4px;font-size:12px;color:var(--grey);line-height:1.5}
.agree input{margin-top:2px;accent-color:var(--ink)}
.agree small{display:block;font-size:11.5px;color:#999}
.done{display:none;text-align:center;padding:26px 0 6px}
.done svg{display:block;margin:0 auto 18px}
.done p:first-of-type{font-size:1.05rem;margin-bottom:8px}
.done p+p{font-size:14px;line-height:1.8;color:var(--grey)}
.done button{margin:22px auto 0;padding:8px 20px;border:1px solid var(--line);font-size:13px;color:var(--mut)}
.ct{display:flex;gap:0}
.ct>div{flex:1}
.ct>div:first-child{border-right:1px solid #f1f1f1}
.ct h4{font-size:14px;font-weight:700;text-align:center;margin-bottom:15px}
.ct-p{margin-bottom:18px;text-align:center}
.ct-p p{margin:5px 0;font-size:13px;color:var(--grey)}
.ct-p span{color:var(--ink);margin-left:2px;white-space:pre}
.ct-p div{display:flex;gap:20px;justify-content:center;margin-top:8px}

.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:rgba(18,18,18,.92);color:#fff;padding:12px 18px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:-.15px;line-height:1.3;opacity:0;pointer-events:none;transition:opacity .3s;z-index:60;white-space:pre-line;text-align:center;max-width:90%}
.toast.show{opacity:1}

#music{position:fixed;right:16px;bottom:20px;z-index:20;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.15);display:none;align-items:center;justify-content:center;font-size:16px}

@media (min-width:900px){#root{max-width:375px}#music{right:max(16px,calc(50% - 171px))}}

/* RSVP 팝업(가운데 카드) */
.sheet-x{position:absolute;top:9px;right:9px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#201e1e;z-index:1}
.rs-intro{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 20px;text-align:center}
.rs-cupid{width:143px;height:143px;object-fit:contain;display:block}
.rs-title{font-size:17px;font-weight:700;letter-spacing:-.2px;color:#201e1e}
.rs-desc{font-size:14px;line-height:1.5;letter-spacing:-.1px;color:#777;white-space:pre-line}
.rs-fields{display:flex;flex-direction:column;gap:16px}
.rs-label{font-size:13px;font-weight:600;color:#201e1e;margin-bottom:8px;letter-spacing:-.1px}
.rs-label span{color:#e5484d;margin-left:3px}
.rs-row{display:flex;gap:8px}
.rs-choice{flex:1;height:40px;border:1px solid #d9dfe5;border-radius:6px;background:#fff;font-size:14px;color:#555}
.rs-choice.sel{background:#000;border-color:#000;color:#fff;font-weight:600}
.rs-input{width:100%;height:42px;border:1px solid #d9dfe5;border-radius:6px;padding:0 12px;font-size:14px;background:#fff;outline:0;display:block}
.rs-input:focus{border-color:#000}
.rs-counter{display:flex;align-items:center;justify-content:space-between;height:42px;border:1px solid #d9dfe5;border-radius:6px;background:#fff}
.rs-counter button{width:46px;height:100%;font-size:20px;line-height:1;color:#201e1e}
.rs-counter div{font-size:14px;font-weight:600}
.rs-primary{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:40px;margin-top:20px;border-radius:6px;background:#000;color:#fff;font-size:14px;font-weight:600;letter-spacing:-.2px}
.rs-primary.off{background:#d5d5d5}
.rs-primary:disabled{opacity:.6;cursor:default}

/* 사진 스냅 (Snap of the Day) */
.sn{display:flex;flex-direction:column;align-items:center;padding-top:130px}
.sn-hero{position:relative;width:100%;aspect-ratio:375/300;overflow:hidden}
.sn-media{position:absolute;inset:0}
.sn-media img{width:100%;height:100%;object-fit:cover}
.sn-fade{position:absolute;inset:0;background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,.85) 80%,#fff 100%)}
.sn-copy{position:absolute;left:0;right:0;bottom:6px;text-align:center}
.sn-title{font-family:HappyTimeTwo,cursive;font-weight:400;font-size:28px;line-height:1.3;color:#111}
.sn-sub{margin-top:6px;font-size:14px;line-height:21px;letter-spacing:-.2px;color:#7f7d77}
.sn-body{width:100%;padding:12px 15px 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.sn-heading{font-size:16px;font-weight:700;letter-spacing:-.2px;color:#111;margin-bottom:14px}
.sn-guide{display:flex;flex-direction:column;gap:2px}
.sn-guide p{font-size:14px;line-height:1.7;letter-spacing:-.2px;color:var(--mut)}
.sn-form{width:100%;max-width:345px;margin-top:26px;display:flex;flex-direction:column;gap:14px;text-align:left}
.sn-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;border-radius:6px;background:#111;color:#fff;font-size:14px;font-weight:600;letter-spacing:-.2px}
.sn-upload:disabled{opacity:.6;cursor:default}

/* ===== Midnight (다크) 테마: body.dark ===== */
body.dark{--ink:#ffdee7;--mut:rgba(255,222,231,.6);--grey:rgba(255,222,231,.6);--pink:#000;--line:rgba(255,222,231,.2);background:#000;color:var(--ink)}
body.dark #root,body.dark .s1,body.dark .s3,body.dark .s6{background:#000}
body.dark .s1-bg::after{background:linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,.45) 45%,rgba(0,0,0,.75) 80%,#000 100%)}
body.dark .s1-fallback,body.dark .s3-ph,body.dark .s5-slide,body.dark .s6-photo,body.dark .s7-img{background:#1a1a1a}
body.dark .s7-cap{background:rgba(255,222,231,.12)}
body.dark .s7-dots i{background:rgba(255,222,231,.18)}
body.dark .s8-map,body.dark .s8-addr{background:rgba(255,222,231,.06);border-color:rgba(255,222,231,.2)}
body.dark .s8-map{filter:grayscale(1) brightness(.72) contrast(1.05)}
body.dark .s8-tag{background:rgba(255,222,231,.2)}
body.dark .s9-tabs button{border-bottom-color:rgba(255,222,231,.2)}
body.dark .s9-copy,body.dark .s9-pay button{background:#212121;color:#ffdee7}
body.dark .fld input,body.dark .fld textarea,body.dark .gb-more,body.dark .ph-pick,body.dark .seg button{background:transparent;border-color:rgba(255,222,231,.25);color:var(--ink)}
body.dark .btn-dark,body.dark .seg button.sel,body.dark .sn-upload{background:rgba(255,222,231,.2);color:#ffdee7;border-color:transparent}
body.dark .gb-card{background:rgba(255,222,231,.06)}
body.dark .gb-card small,body.dark .gb-empty{color:rgba(255,222,231,.5)}
body.dark .sn-fade{background:linear-gradient(to bottom,#000 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 80%,#000 100%)}
body.dark .sn-title,body.dark .sn-heading{color:#ffdee7}
body.dark .sn-sub{color:rgba(255,222,231,.6)}
body.dark .sheet{background:rgba(20,20,20,.96);border-color:rgba(255,222,231,.2)}
body.dark .sheet-x,body.dark .rs-title,body.dark .rs-label,body.dark .rs-counter button{color:#ffdee7}
body.dark .rs-desc,body.dark .rs-choice{color:rgba(255,222,231,.7)}
body.dark .rs-input,body.dark .rs-counter,body.dark .rs-choice{background:transparent;border-color:rgba(255,222,231,.25);color:#ffdee7}
body.dark .rs-input:focus{border-color:#ffdee7}
body.dark .rs-choice.sel,body.dark .rs-primary{background:#ffdee7;border-color:#ffdee7;color:#000}
body.dark .rs-primary.off{background:#444;color:#999}
body.dark .ct>div:first-child{border-right-color:rgba(255,222,231,.15)}
body.dark img[src$=".svg"]{filter:invert(1) sepia(.3) saturate(2) hue-rotate(300deg)}
body.dark #music{background:rgba(40,40,40,.9);color:#ffdee7}
#thm{position:fixed;bottom:20px;left:12px;z-index:40;display:flex;padding:3px;border-radius:999px;background:rgba(127,127,127,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#thm button{padding:5px 11px;border-radius:999px;font:600 11px/1 SUIT,sans-serif;letter-spacing:0;color:#666}
#thm button.on{background:#111;color:#fff}
body.dark #thm button{color:#aaa}
body.dark #thm button.on{background:#ffdee7;color:#000}
body.dark img[src^="data:image/svg"]{filter:brightness(.28)}
/* 버튼은 움직이는 도중 탭하면 클릭이 사라질 수 있어 등장 효과를 투명도만 쓰고, 탭 지연도 없앰 */
button,.pillbtn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* 방명록·사진 스냅 입력 영역: 얇은 밑줄 입력칸 + RSVP와 같은 연한 분홍 버튼 */
.sx-form{gap:18px}
.fld label{font-size:12px;font-weight:500;letter-spacing:-.1px}
.fld input,.fld textarea{border:0;border-bottom:1px solid var(--line);background:transparent;padding:0 2px;font-size:14px;color:var(--ink)}
.fld input{height:40px}
.fld textarea{padding:8px 2px;border:1px solid var(--line);padding:10px 12px}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(127,125,119,.7)}
.fld input:focus,.fld textarea:focus{border-color:var(--ink)}
.btn-dark{height:40px;background:var(--pink);color:var(--ink);font-size:14px;letter-spacing:-.2px}
.gb-list{gap:0}
.gb-card{padding:18px 4px;background:transparent;border:0;border-bottom:1px solid var(--line)}
.gb-card:first-child{border-top:1px solid var(--line)}
.gb-card b{font-weight:600}
.gb-card p{color:var(--ink);opacity:.8}
.gb-empty{font-size:13px;color:var(--grey);padding:8px 0}
.gb-more{background:transparent;border-radius:999px;padding:8px 22px}
body.dark .btn-dark{background:rgba(255,222,231,.2)}
body.dark .fld input,body.dark .fld textarea{background:transparent}
/* 첫 화면 제목을 아래로 내려 사진 속 두 분 얼굴을 가리지 않게 함 */
.s1-main{transform:translateY(82px)}

/* 배경음악 버튼: 음표 아이콘, 재생 중에는 살짝 맥동, 정지 중에는 사선 */
#music{width:44px;height:44px;background:transparent!important;box-shadow:none!important;color:var(--ink);font-size:0;-webkit-tap-highlight-color:transparent}
#music svg{display:block}
#music .mu-slash{position:absolute;left:9px;right:9px;top:50%;height:1.5px;background:currentColor;transform:rotate(-40deg);transition:opacity .2s}
#music.playing .mu-slash{opacity:0}
#music.playing svg{animation:muPulse 2.4s ease-in-out infinite}
@keyframes muPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){#music.playing svg{animation:none}}

/* 방명록 비밀번호 / 수정·삭제 */
.fld-hint{font-size:11px;opacity:.7}
.gb-card{position:relative}
.gb-links{display:inline-flex;align-items:center;gap:8px;margin-top:10px}
.gb-links i{width:1px;height:10px;background:var(--line)}
.gb-links button{font-size:12px;color:var(--grey);padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.gb-act{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.gb-ask{font-size:13px;color:var(--ink)}
.gb-edit,.gb-pw{width:100%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:14px;padding:8px 10px;border-radius:0;outline:0;display:block}
.gb-edit{line-height:1.6;resize:none}
.gb-pw{height:38px}
.gb-btns{display:flex;gap:8px}
.gb-btns button{flex:1;height:36px;font-size:13px;background:var(--pink);color:var(--ink)}
.gb-btns button:last-child{background:transparent;border:1px solid var(--line)}
.gb-btns button:disabled{opacity:.6}
body.dark .gb-btns button:first-child{background:rgba(255,222,231,.2)}
/* ===== 초대장(봉투) 연출: body.env =====
   짙은 갈색 배경 위에 종이 카드가 있고, 맨 위에서는 위쪽 "INVITED" 띠 + 아래쪽 봉투 앞면이 보임.
   스크롤을 시작하면 띠가 올라가고, 카드가 화면 폭으로 넓어지고, 봉투가 아래로 내려감. 내용 영역 CSS는 그대로. */
/* 봉투(테두리)는 테마와 상관없이 흰색. 색을 바꾸려면 아래 세 값을 고치세요 */
body.env{--env:#fff;--env-ink:#000;--env-msg:rgba(0,0,0,.65);background:var(--env)}
body.env #root{margin-top:var(--mt,32px);width:calc(100% - 2 * var(--ins,20px));padding-bottom:40px}
#envTop,#envFront,#envMsg{display:none}
body.env #envTop{display:flex;position:fixed;top:0;left:0;right:0;height:32px;align-items:center;justify-content:center;background:var(--env);z-index:30;pointer-events:none;transition:transform .4s ease-out}
body.env #envTop span{font-family:HappyTimeTwo,cursive;font-size:14px;letter-spacing:0;color:var(--env-ink)}
body.env.env-open #envTop{transform:translateY(-32px)}
body.env #envFront{display:block;position:fixed;left:0;bottom:0;width:100%;z-index:30;pointer-events:none;overflow:hidden;transition:transform .4s ease-in-out}
body.env #envFront svg{display:block;width:100%;height:auto;filter:drop-shadow(0 -3px 8px rgba(0,0,0,.28))}
body.env #envFront{transform-origin:50% 100%}
body.env.env-open #envFront{transform:translateY(110%);opacity:0}
body.env #envFront text{transition:opacity .2s ease}
body.env.env-open #envFront text{opacity:0}
body.env #envMsg{display:block;position:fixed;left:0;right:0;bottom:22px;z-index:31;pointer-events:none;text-align:center;padding:0 24px;font-family:"Noto Serif KR",Georgia,serif;font-size:11.5px;line-height:1.55;color:var(--env-msg);white-space:pre-line;transition:opacity .3s ease}
body.env.env-open #envMsg{opacity:0}
body.env #music{z-index:35;color:var(--env-ink)}
@media (min-width:900px){
  body.env #root{width:calc(375px - 2 * var(--ins,20px))}
  body.env #envTop,body.env #envFront,body.env #envMsg{left:calc(50% - 187.5px);right:auto;width:375px}
}
@media (prefers-reduced-motion:reduce){body.env #root,body.env #envTop,body.env #envFront,body.env #envMsg{transition:none}}

/* 라이트(흰 종이)에서는 흰 봉투가 묻히지 않도록 가장자리에 은은한 그림자 */
body.env:not(.dark) #envFront svg{filter:drop-shadow(0 -2px 6px rgba(0,0,0,.18))}
body.env:not(.dark) #root{box-shadow:0 0 0 1px rgba(0,0,0,.06)}

/* 진입 연출: 닫힌 봉투 → 덮개가 열림 → 접힌 편지지가 튀어나옴 → 펼쳐지며 실제 화면이 됨 */
body.env.env-intro{overflow:hidden}
body.env.env-intro #root{opacity:0;transition:none}
body.env.env-intro #envFront,body.env.env-intro #envTop,body.env.env-intro #envMsg,body.env.env-intro #music{opacity:0;transition:none}
body.env #envFront,body.env #envTop{transition:transform .4s ease-in-out,opacity .7s ease}
body.env #root{transition:width .4s ease-out,margin-top .8s ease-out,opacity .7s ease}
body.env #envMsg{transition:opacity .5s ease .1s}
body.env.env-open #envMsg{transition:opacity .3s ease}
#envIntro{position:fixed;inset:0;z-index:40;background:#000;transition:opacity .7s ease,background .8s ease;cursor:pointer}
/* 편지가 커지는 동안 바탕이 서서히 사이트 테두리 색으로 바뀌어, 끝에서 번쩍이지 않음 */
#envIntro.s-grow{background:var(--env,#fff)}
#envIntro.s-out{opacity:0;pointer-events:none}
#envIntro .ei-stage{position:absolute;left:50%;top:56%;width:300px;height:214px;opacity:0;transform:translate(-50%,-44%);perspective:1200px;transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}
#envIntro.s-in .ei-stage{opacity:1;transform:translate(-50%,-50%)}
#envIntro.s-grow .ei-stage{opacity:0;transform:translate(-50%,-50%) translateY(50px);transition:opacity .45s ease .05s,transform .9s cubic-bezier(.4,0,.2,1)}
#envIntro .ei-back{position:absolute;inset:0;background:#f1f1ef;border:1px solid rgba(0,0,0,.14);border-radius:12px;box-shadow:0 30px 44px -30px rgba(0,0,0,.3)}
#envIntro .ei-letter{position:absolute;left:20px;right:20px;top:100px;height:100px;z-index:2;overflow:hidden;border-radius:6px 6px 0 0;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:top 1s cubic-bezier(.25,.75,.25,1),height 1s cubic-bezier(.25,.75,.25,1)}
body.dark #envIntro .ei-letter{background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
#envIntro .ei-prev{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
#envIntro.s-pop .ei-letter{top:-205px;height:262px}
#envIntro .ei-front{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible;filter:drop-shadow(0 -1px 2px rgba(0,0,0,.06))}
#envIntro .ei-flap{position:absolute;left:0;top:0;width:100%;height:96px;z-index:4;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.45,.05,.2,1),opacity .4s ease}
#envIntro .ei-flap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#envIntro .ei-flap .bk{transform:rotateX(180deg)}
#envIntro .ei-seal{position:absolute;left:124.4px;top:82.4px;width:51.2px;height:51.2px;border-radius:50%;z-index:5;display:flex;align-items:center;justify-content:center;background:#fff;font:12px/1 HappyTimeTwo,cursive;color:rgba(0,0,0,.42);white-space:nowrap;transition:opacity .25s ease}
#envIntro.s-open .ei-seal{opacity:0}
#envIntro.s-open .ei-flap{transform:rotateX(180deg);z-index:1}
#envIntro.s-pop .ei-flap{opacity:0;transition:transform .8s cubic-bezier(.45,.05,.2,1),opacity .5s ease .12s}
@media (prefers-reduced-motion:reduce){#envIntro{display:none}}
/* 라이트(흰 종이)에서는 흰 봉투가 묻히지 않도록 가장자리에 은은한 그림자 */
body.env:not(.dark) #envFront svg{filter:drop-shadow(0 -2px 6px rgba(0,0,0,.18))}
body.env:not(.dark) #root{box-shadow:0 0 0 1px rgba(0,0,0,.06)}

/* 모바일: 위로 올릴 때 봉투가 흔들리지 않게 고정 (별도 화면 층으로 올리고, 맨 위 바운스/새로고침 당김을 줄임) */
html,body{overscroll-behavior-y:none}
body.env #envFront,body.env #envTop,body.env #envMsg{backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
body.env #envFront{bottom:0}

/* 참고 사이트와 같은 구조: 화면 높이로 고정된 안쪽 상자가 스크롤됨 (페이지 자체는 스크롤 안 됨) */
html.env-lock,html.env-lock body{height:100%;overflow:hidden}
#envScroll{position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none;overflow-anchor:none}
body.env.env-intro #envScroll{overflow:hidden}
#envScroll{scrollbar-width:none;-ms-overflow-style:none}
#envScroll::-webkit-scrollbar{display:none;width:0;height:0}


/* 갤러리 슬라이드: 마우스로 끌 때 사진이 선택/드래그되지 않게 */
.s5-track{cursor:grab;-webkit-user-select:none;user-select:none}
.s5-track:active{cursor:grabbing}
.s5-slide img{-webkit-user-drag:none;pointer-events:none}

/* 갤러리 전체화면 보기 (참고 사이트와 같은 구성: 어두운 배경 + 번호표 + × + 이전/다음) */
body.lb-open #envScroll{overflow:hidden}
.lb{position:fixed;inset:0;width:100vw;height:100dvh;background:rgba(8,8,10,.9);z-index:9999;display:flex;align-items:center;justify-content:center;animation:lbIn .3s ease;touch-action:none;overflow:hidden;overscroll-behavior:contain}
@media (min-width:769px){.lb{left:calc(50% - 187.5px);width:375px}}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-c{position:relative;width:100%;height:100%;padding:calc(14px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.lb-x{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));background:transparent;border:0;color:#fff;font-size:30px;cursor:pointer;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:transform .2s;z-index:3;font-weight:200;line-height:1;transform:translateY(-1px)}
.lb-x:hover{transform:translateY(-1px) scale(1.06)}
.lb-n{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);color:#fff;font:600 14px SUIT,sans-serif;background:rgba(255,255,255,.1);padding:7px 14px;border-radius:20px;pointer-events:none;z-index:3;letter-spacing:.4px}
.lb-p,.lb-nx{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;color:#000;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:.3s;z-index:3;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.lb-p:hover,.lb-nx:hover{background:#fff;transform:translateY(-50%) scale(1.07);box-shadow:0 8px 24px rgba(0,0,0,.26)}
.lb-p:active,.lb-nx:active{transform:translateY(-50%) scale(.95)}
.lb-p{left:calc(6px + env(safe-area-inset-left,0px))}
.lb-p::before{content:"";width:8px;height:8px;border-left:1.5px solid #000;border-bottom:1.5px solid #000;transform:rotate(45deg);margin-left:3px}
.lb-nx{right:calc(6px + env(safe-area-inset-right,0px))}
.lb-nx::before{content:"";width:8px;height:8px;border-right:1.5px solid #000;border-bottom:1.5px solid #000;transform:rotate(-45deg);margin-right:3px}
.lb-w{position:relative;margin:0 auto;width:calc(100% - 24px);height:calc(100% - 72px);max-width:100%;max-height:min(100% - 72px,84dvh);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.lb-i{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;touch-action:pan-y;-webkit-user-select:none;user-select:none}
@media (prefers-reduced-motion:reduce){.lb{animation:none}}

/* 확대(핀치/더블탭) 방지: 스크롤만 허용 */
html,body,#envScroll{touch-action:pan-x pan-y}

/* 피로연/결혼식 탭 */
.ev-tabs{display:flex;width:100%;align-self:stretch;margin:6px 0 2px}
.ev-tabs button{flex:1;height:42px;text-align:center;font-size:14px;font-weight:300;letter-spacing:-.25px;color:var(--mut);border-bottom:1px solid rgba(0,0,0,.2)}
.ev-tabs button.on{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
body.dark .ev-tabs button{border-bottom-color:rgba(255,222,231,.2)}
body.dark .ev-tabs button.on{border-bottom-color:var(--ink)}
/* 첫 화면 아래: 날짜 두 줄 */
.s1-bottom.two{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;row-gap:6px;column-gap:20px}
.s1-row{display:contents}
.s1-bottom.two span{flex:none;text-align:left;font-variant-numeric:tabular-nums}
.s1-bottom.two .s1-row span:last-child{text-align:right}