:root{--navy:#1f2c55;--navy2:#2c3d72;--cream:#fff8ec;--paper:#fffdf8;--ink:#3b2f2a;--sub:#7a6a60;--green:#3f9d4b;--green2:#e7f4e3;--gold:#f2b84b;--pot:#e98a5f;--line:#efe3d3;--r:20px}
*{box-sizing:border-box}
img{height:auto;max-width:100%}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#e9edf7;color:var(--ink);font-family:'Gowun Dodum',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;line-height:1.6;word-break:keep-all}
a{color:inherit}
.wrap{max-width:480px;margin:0 auto;background:var(--cream);min-height:100vh;position:relative;box-shadow:0 0 40px rgba(31,44,85,.12)}
h1,h2,h3,.jua{font-family:'Jua',sans-serif;font-weight:400;letter-spacing:-.2px}
.scene{position:relative;background:var(--navy) var(--bg,url(/img/bg_christmas.webp)) center top/cover no-repeat;transition:background-image .3s;color:#fff;overflow:hidden;border-radius:0 0 28px 28px}
.scene .top{position:relative;z-index:3;padding:22px 20px 0;text-align:center}
.brand{display:inline-flex;align-items:center;gap:6px;font-family:'Jua';font-size:15px;text-decoration:none;color:#fff;background:rgba(255,255,255,.14);padding:5px 12px;border-radius:99px;backdrop-filter:blur(4px)}
.scene h1{margin:14px 0 4px;font-size:28px;line-height:1.25;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.scene .lead{margin:0;opacity:.92;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.stage{position:relative;height:430px;z-index:2}
.stage .pot{position:absolute;left:50%;bottom:30px;width:40%;transform:translateX(-50%);filter:drop-shadow(0 10px 14px rgba(40,40,80,.28));transition:transform .4s}
.stage .pot.grow{animation:grow .9s ease}
@keyframes grow{0%{transform:translateX(-50%) scale(1)}35%{transform:translateX(-50%) scale(1.08) rotate(-2deg)}70%{transform:translateX(-50%) scale(.97) rotate(1deg)}100%{transform:translateX(-50%) scale(1)}}
.leaf{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;animation:bob 3.4s ease-in-out infinite;z-index:2;pointer-events:none}
.leaf svg{width:30px;height:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.leaf span{font-size:11px;background:rgba(255,255,255,.92);color:var(--ink);padding:1px 7px;border-radius:99px;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.leaf.new{animation:pop .8s cubic-bezier(.2,1.6,.4,1),bob 3.4s 0.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pop{0%{transform:scale(0) translateY(60px);opacity:0}100%{transform:scale(1);opacity:1}}
.count{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:4;background:#fff;color:var(--ink);font-family:'Jua';padding:6px 16px;border-radius:99px;font-size:17px;box-shadow:0 4px 14px rgba(0,0,0,.18);white-space:nowrap}
.count b{color:var(--green);font-weight:400}
.body{padding:22px 18px 30px}
.prog{background:#fff;border-radius:var(--r);padding:14px 16px;box-shadow:0 2px 0 var(--line)}
.prog p{margin:0 0 10px;font-size:14px;color:var(--sub);text-align:center}
.prog p b{color:var(--green);font-family:'Jua';font-weight:400;font-size:16px}
.steps{display:flex;justify-content:space-between;position:relative}
.steps:before{content:'';position:absolute;left:8%;right:8%;top:17px;height:4px;background:var(--line);border-radius:4px}
.steps .bar{position:absolute;left:8%;top:17px;height:4px;background:var(--green);border-radius:4px;transition:width .6s}
.steps div{position:relative;z-index:1;text-align:center;width:20%;font-size:11px;color:var(--sub)}
.steps i{display:block;margin:0 auto 4px;width:38px;height:38px;border-radius:50%;background:#fff;border:3px solid var(--line);font-style:normal;line-height:32px;font-size:16px}
.steps div.on i{border-color:var(--green);background:var(--green2)}
.steps div.on{color:var(--ink)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:16px;background:var(--green);color:#fff;font-family:'Jua';font-size:19px;padding:16px;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 #2e7a39;transition:transform .1s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #2e7a39}
.btn.gold{background:var(--gold);color:#4a3210;box-shadow:0 4px 0 #c98f22}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 3px 0 var(--line);border:1.5px solid var(--line);font-size:17px;padding:13px}
.btn[disabled]{opacity:.6;pointer-events:none}
.stack{display:grid;gap:12px;margin-top:16px}
.card{background:#fff;border-radius:var(--r);padding:18px;box-shadow:0 2px 0 var(--line);margin-top:16px}
.card h2{margin:0 0 8px;font-size:21px}
.muted{color:var(--sub);font-size:14px}
label.f{display:block;font-size:14px;color:var(--sub);margin:12px 0 6px}
.in{width:100%;border:2px solid var(--line);border-radius:14px;padding:13px 14px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink);outline:0}
.in:focus{border-color:var(--green)}
textarea.in{min-height:120px;resize:vertical}
.cnt{text-align:right;font-size:12px;color:var(--sub);margin-top:4px}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;background:var(--paper)}
.opt input{margin-top:4px;accent-color:var(--green)}
.opt b{font-family:'Jua';font-weight:400;font-size:16px;display:block}
.opt small{color:var(--sub);font-size:13px}
.opt:has(input:checked){border-color:var(--green);background:var(--green2)}
.kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kind{border:2px solid var(--line);border-radius:14px;padding:8px 2px 6px;text-align:center;cursor:pointer;background:var(--paper);font-size:13px}
.kind svg{width:30px;height:30px;display:block;margin:0 auto 2px}
.kind[aria-pressed=true]{border-color:var(--green);background:var(--green2)}
.sheet{position:fixed;inset:0;z-index:50;background:rgba(20,26,50,.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.sheet.on{opacity:1;pointer-events:auto}
.sheet .in-sheet{background:var(--cream);width:100%;max-width:480px;border-radius:26px 26px 0 0;padding:10px 18px 24px;max-height:92vh;overflow:auto;transform:translateY(30px);transition:transform .25s}
.sheet.on .in-sheet{transform:none}
.grab{width:44px;height:5px;border-radius:5px;background:#d9cdbd;margin:4px auto 12px}
.sheet h2{margin:0 0 4px;font-size:22px;text-align:center}
.x{position:absolute;right:14px;top:10px;border:0;background:none;font-size:26px;color:var(--sub);cursor:pointer}
.msgs{display:grid;gap:10px;margin-top:12px}
.msg{background:var(--paper);border-radius:16px;padding:14px;border-top:5px solid var(--k,var(--green));position:relative;box-shadow:0 2px 0 var(--line)}
.msg .h{display:flex;align-items:center;gap:6px;font-family:'Jua';font-size:16px}
.msg .h svg{width:20px;height:20px}
.msg .h small{margin-left:auto;font-family:'Gowun Dodum';color:var(--sub);font-size:12px}
.msg p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.msg .del{position:absolute;right:10px;bottom:8px;border:0;background:none;color:#b5a596;font-size:12px;cursor:pointer;padding:4px}
.msg .del.sure{color:#d1453b;font-weight:700}
.lock{text-align:center;padding:22px 16px;background:linear-gradient(160deg,#fff7e3,#fff);border-radius:var(--r);box-shadow:0 2px 0 var(--line)}
.lock .d{font-family:'Jua';font-size:44px;color:var(--navy);line-height:1.1;margin:6px 0}
.notice{font-size:13px;color:var(--sub);background:#fff6e0;border-radius:14px;padding:12px 14px;margin-top:12px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:rgba(31,44,85,.94);color:#fff;padding:11px 18px;border-radius:99px;font-size:14px;opacity:0;transition:.25s;z-index:80;pointer-events:none;max-width:90%;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.how{display:grid;gap:10px;margin-top:6px}
.how div{display:flex;gap:12px;align-items:center;background:var(--paper);border-radius:16px;padding:10px 12px}
.how img{width:56px;height:auto}
.how b{font-family:'Jua';font-weight:400;font-size:16px;display:block}
.faq details{border-bottom:1.5px dashed var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-family:'Jua';font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:'🍀 '}
.faq p{margin:8px 0 0;color:var(--sub);font-size:14px}
.mine a{display:flex;justify-content:space-between;padding:12px 14px;background:var(--paper);border-radius:14px;text-decoration:none;margin-top:8px;font-family:'Jua'}
.foot{text-align:center;font-size:12px;color:var(--sub);padding:10px 16px 34px}
.foot a{margin:0 6px}
.report{background:none;border:0;color:var(--sub);text-decoration:underline;font:inherit;font-size:12px;cursor:pointer}
.ham{position:absolute;right:4%;bottom:30px;width:27%;z-index:3;filter:drop-shadow(0 6px 8px rgba(40,40,80,.25));animation:bob 3s ease-in-out infinite}
.fly{position:fixed;z-index:90;width:40px;height:40px;pointer-events:none;transition:transform .9s cubic-bezier(.5,-0.3,.6,1),opacity .9s}
.doc{padding:24px 20px 40px}
.doc h1{font-size:26px}
.doc h2{font-size:19px;margin-top:24px}
.doc p,.doc li{font-size:15px}
.ad{margin:16px 0;min-height:0}
.when{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.when button{border:2px solid var(--line);background:var(--paper);border-radius:16px;padding:12px 4px;font-size:22px;cursor:pointer;color:var(--ink)}
.when button b{display:block;font-family:'Jua';font-weight:400;font-size:16px;margin-top:2px}
.when button[aria-pressed=true]{border-color:var(--green);background:var(--green2);box-shadow:0 0 0 2px var(--green) inset}
.hint{margin:8px 2px 0;font-size:14px;color:var(--green);min-height:1.4em}
.when.two{grid-template-columns:1fr 1fr}
.when button small{display:block;font-size:12px;color:var(--sub);margin-top:2px}
.links{display:grid;gap:12px;margin-top:16px}
.step{background:#fff;border-radius:var(--r);padding:16px;box-shadow:0 2px 0 var(--line)}
.step h3{margin:0 0 4px;font-size:18px}
.step p{margin:0 0 12px;font-size:14px;color:var(--sub)}
.from{font-size:14px;opacity:.9}
.t-christmas{--bg:url(/img/bg_christmas.webp)}
.t-newyear{--bg:url(/img/bg_newyear.webp)}
.t-birthday{--bg:url(/img/bg_birthday.webp)}
.t-spring{--bg:url(/img/bg_spring.webp)}
.t-thanks{--bg:url(/img/bg_thanks.webp)}
.scene.light{color:#4a3428}
.scene.light h1{text-shadow:0 0 2px #fff,0 2px 0 #fff,0 0 14px rgba(255,255,255,.95)}
.scene.light .lead,.scene.light .from{text-shadow:0 0 6px #fff,0 0 10px #fff;opacity:1}
.scene.light .brand{background:rgba(255,255,255,.7);color:#4a3428}
.themes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.themes button{border:2px solid var(--line);border-radius:12px;padding:0 0 4px;background:var(--paper);cursor:pointer;overflow:hidden;font-size:11px;letter-spacing:-.6px;white-space:nowrap;color:var(--ink)}
.themes button i{display:block;aspect-ratio:3/4;background:center top/cover no-repeat;margin-bottom:3px}
.themes button[aria-pressed=true]{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}
.fx{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.p{position:absolute;top:-30px;font-style:normal;line-height:1;animation:fall linear infinite}
.snow{color:#fff;opacity:.9;text-shadow:0 0 4px rgba(255,255,255,.8)}
.conf{width:8px;height:12px;border-radius:2px;animation-name:fallspin}
.petal{width:12px;height:9px;background:#ffc1d6;border-radius:12px 1px 12px 1px;animation-name:fallspin;opacity:.9}
.heart{color:#ff6f91;top:auto;bottom:-30px;animation-name:rise;opacity:.8}
.spark{color:#ffd166;top:auto;animation-name:twinkle;text-shadow:0 0 8px #fff3b0}
@keyframes fall{0%{transform:translate(0,0)}50%{transform:translate(18px,330px)}100%{transform:translate(-8px,680px)}}
@keyframes fallspin{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(30px,680px) rotate(720deg)}}
@keyframes rise{0%{transform:translate(0,0);opacity:0}15%{opacity:.85}100%{transform:translate(-20px,-640px);opacity:0}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.2)}}
.badge{display:block;font-family:'Pacifico',cursive;font-size:26px;margin-top:10px;color:#ffe08a;text-shadow:0 2px 8px rgba(0,0,0,.35);transform:rotate(-3deg)}
.scene.light .badge{color:#e2557a;text-shadow:0 0 3px #fff,0 2px 0 #fff,0 0 12px #fff}
.t-newyear .badge{color:#d1352b}
.t-spring .badge{color:#e2557a}
.t-thanks .badge{color:#d1352b}
.deco{position:absolute;bottom:34px;font-size:44px;z-index:3;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2));animation:bob 3s ease-in-out infinite}
.deco.l{left:12%}.deco.r{right:12%;animation-delay:1.2s}
.themes.big{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;grid-template-columns:none}
.themes.big button{flex:0 0 88px;scroll-snap-align:start;font-size:13px;letter-spacing:0;font-family:'Jua'}
.themes.big button i{aspect-ratio:3/4;position:relative}
.themes.big button i:after{content:attr(data-e);position:absolute;right:4px;bottom:2px;font-size:22px;font-style:normal}
.ham ~ .deco.r{display:none}