:root{--navy:#071631;--navy2:#0b2851;--gold:#ffca69;--cream:#fff8e9;--ink:#182039;--pink:#ff7891;--accent:#ff6c5c;--muted:#7a8192;--line:#e8e8ef;--lantern:#ff7891}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Noto Sans KR",sans-serif;background:#dfe4ec;color:var(--ink)}button,input,textarea{font:inherit}.app-shell{position:relative;width:min(100%,430px);min-height:100vh;margin:auto;background:#fff;overflow:hidden;box-shadow:0 0 50px #55607038}.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;position:absolute;top:0;z-index:20;width:100%;color:#fff}.brand{color:inherit;text-decoration:none;font-weight:800;letter-spacing:-.5px}.icon-btn{border:0;background:#ffffff18;color:inherit;width:36px;height:36px;border-radius:50%;font-size:18px}.screen{display:none;min-height:100vh;padding-top:58px;background:#fff}.screen.active{display:block}.hero{height:61vh;min-height:500px;position:relative;overflow:hidden;background:radial-gradient(circle at 72% 20%,#153f70 0,#0a254b 32%,#06162f 75%);color:#fff}.stars,.stars:before{position:absolute;inset:0;content:"";background-image:radial-gradient(#fff 1px,transparent 1px);background-size:33px 39px;opacity:.35}.stars:before{transform:translate(17px,13px);background-size:49px 54px}.moon{position:absolute;width:38px;height:38px;border-radius:50%;right:42px;top:68px;background:#ffd782;box-shadow:0 0 25px #ffd78288}.castle{position:absolute;bottom:28%;left:0;width:100%;height:75px;display:flex;gap:3px;align-items:end;justify-content:center;filter:drop-shadow(0 0 10px #ffc76666)}.castle span{width:92px;height:36px;background:#101b26;border-top:5px solid #e4a74d;clip-path:polygon(0 10%,42% 10%,47% 0,53% 0,58% 10%,100% 10%,90% 35%,86% 35%,86% 100%,14% 100%,14% 35%,10% 35%)}.castle span:nth-child(2){height:62px;width:110px}.river{position:absolute;bottom:0;height:30%;width:100%;background:linear-gradient(#112b4d,#071c3d);border-top:1px solid #ffc76644}.river:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(170deg,transparent 0 13px,#ffca6915 14px 16px);animation:water 8s linear infinite}.float-lantern{position:absolute;z-index:2;width:17px;height:20px;background:#ffc767;border-radius:3px;box-shadow:0 0 12px #ffb73d;animation:float 3s ease-in-out infinite}.l1{left:8%;top:22%}.l2{left:27%;top:60%;animation-delay:-1s}.l3{left:46%;top:30%;animation-delay:-2s}.l4{left:62%;top:65%}.l5{left:78%;top:20%;animation-delay:-1.4s}.l6{left:90%;top:53%;animation-delay:-2.4s}.hero-copy{position:absolute;top:80px;left:28px;z-index:3}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--gold);margin:0 0 10px}.eyebrow.dark{color:#d67b58}.hero h1{font-size:31px;line-height:1.28;letter-spacing:-1.5px;margin:0 0 14px}.hero h1 em{color:var(--gold);font-style:normal}.hero-copy>p:last-child{font-size:14px;line-height:1.65;color:#d4dded}.home-card{position:relative;margin:-22px 18px 0;border-radius:24px 24px 0 0;background:#fff;padding:20px 16px 25px;z-index:5}.live{font-size:12px;color:#586071;text-align:center;margin-bottom:13px}.live span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff5e69;margin-right:6px;animation:pulse 1.3s infinite}.primary,.secondary{width:100%;height:54px;border-radius:14px;font-weight:800;border:0;cursor:pointer}.primary{background:linear-gradient(135deg,#ff775f,#ff9c72);color:#fff;box-shadow:0 10px 24px #ff82683c}.primary b{float:right;font-size:18px}.secondary{background:#f2f4f8;color:#3a4252;margin-top:10px}.mini-note{text-align:center;font-size:11px;color:#9aa0ae;margin:12px 0 0}.step-head{padding:12px 22px 0;display:flex;align-items:center;gap:12px}.step-head span{font-size:11px;font-weight:800;color:#df7355}.step-head div{height:5px;flex:1;background:#eee;border-radius:10px;overflow:hidden}.step-head i{display:block;height:100%;background:linear-gradient(90deg,#ff735f,#ffba72)}.content{padding:28px 22px 106px}.content h2,.river-title h2{font-size:29px;letter-spacing:-1.4px;line-height:1.25;margin:0 0 10px}.sub{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 25px}.wish-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.wish{min-height:116px;border:1.5px solid var(--line);background:#fff;border-radius:17px;padding:15px;text-align:left;color:var(--ink);transition:.2s}.wish.selected{border-color:var(--pink);background:#fff4f6;box-shadow:0 5px 15px #ff789125}.wish span{display:block;width:35px;height:35px;border-radius:12px;background:#f6f7fa;text-align:center;line-height:35px;color:#e26b7c;margin-bottom:10px}.wish b,.wish small{display:block}.wish b{font-size:15px}.wish small{font-size:11px;color:#9298a5;margin-top:3px}.sticky{position:fixed;z-index:30;bottom:0;width:min(100%,430px);padding:12px 20px 18px;background:linear-gradient(transparent,#fff 28%)}.decorate-content{padding-bottom:130px}.lantern-stage{height:285px;border-radius:22px;background:radial-gradient(circle,#fff0d5,#eef1fa 68%);display:grid;place-items:center;position:relative;overflow:hidden;margin:22px 0 15px}.halo{position:absolute;width:190px;height:190px;border-radius:50%;background:#ffc36e44;filter:blur(15px)}.big-lantern{position:relative;width:120px;z-index:2;filter:drop-shadow(0 12px 18px #53474033)}.big-lantern .cap,.big-lantern .base{height:16px;background:#835c38;border-radius:8px}.big-lantern .cap{width:86px;margin:auto}.big-lantern .body{height:150px;border:8px solid #9b6a3b;border-radius:26px 26px 18px 18px;background:linear-gradient(90deg,#fff7df66,var(--lantern),#fff7df66);display:grid;place-items:center;box-shadow:inset 0 0 25px #fff9,0 0 35px color-mix(in srgb,var(--lantern) 50%,transparent)}.big-lantern .body span{font-size:46px;color:#fff7df;text-shadow:0 2px 5px #9a5555}.big-lantern .base{width:110px;margin:auto}.tassel{width:7px;height:63px;background:#b85c47;margin:auto;position:relative}.tassel:after{content:"";position:absolute;width:32px;height:40px;background:#d36d55;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%);left:-13px;bottom:-30px}.custom-panel{border:1px solid var(--line);border-radius:18px;padding:12px}.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:15px}.tabs button{flex:1;border:0;background:none;padding:8px;color:#9a9fad}.tabs button.active{color:#da6c52;border-bottom:2px solid #da6c52;font-weight:800}.swatches{display:flex;justify-content:space-around;padding:5px}.swatch{width:33px;height:33px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 1px #ddd}.swatch.active{box-shadow:0 0 0 2px #333}.field{display:block;margin:25px 0}.field>span,.privacy>b{display:block;font-size:13px;font-weight:800;margin-bottom:9px}.field input,.field textarea{width:100%;border:1px solid var(--line);background:#f8f9fb;border-radius:14px;padding:15px;outline:none}.field textarea{height:130px;resize:none;line-height:1.6}.field:focus-within input,.field:focus-within textarea{border-color:#f38b70}.field small{display:block;text-align:right;margin-top:6px;color:#a0a5b1}.privacy{border:1px solid var(--line);border-radius:16px;padding:15px}.privacy label{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid #f0f0f3;font-size:13px}.privacy input{accent-color:#ff8068}.safety{font-size:11px;color:#9aa0ad;background:#f7f7f9;padding:10px;border-radius:10px}.launch-scene{min-height:69vh;padding:82px 22px 30px;text-align:center;color:#fff;background:radial-gradient(circle at 50% 45%,#144774,#071832 70%);position:relative;overflow:hidden}.launch-scene h2{font-size:25px;line-height:1.4;margin:0;position:relative}.launch-scene h2 span{color:var(--gold)}.launched-lantern{width:82px;height:108px;border:6px solid #9b6a3b;border-radius:22px;background:var(--lantern);display:grid;place-items:center;margin:34px auto 15px;position:relative;z-index:2;box-shadow:0 0 50px color-mix(in srgb,var(--lantern) 75%,transparent);animation:float 3s ease-in-out infinite}.launched-lantern span{font-size:31px;color:#fff6d9}.water-rings{height:20px;width:220px;border:2px solid #ffca6966;border-radius:50%;margin:-8px auto 18px;box-shadow:0 0 0 12px #ffca6918,0 0 0 26px #ffca690b}.result-card{background:#ffffff14;border:1px solid #ffffff2d;border-radius:17px;padding:17px;backdrop-filter:blur(8px);position:relative}.result-card p{font-size:13px;line-height:1.6;margin:11px 0}.result-card small{color:#9fb1c9}.pill{display:inline-block;padding:5px 10px;border-radius:20px;background:#fff1df;color:#d16a4e;font-size:10px;font-weight:800}.action-sheet{position:relative;margin-top:-20px;background:#fff;border-radius:22px 22px 0 0;padding:16px 18px 24px;z-index:5}.broadcast{display:flex;align-items:center;gap:10px;margin-bottom:13px}.broadcast>span{width:38px;height:38px;border-radius:12px;background:#fff0e9;color:#e8755b;display:grid;place-items:center}.broadcast div{flex:1}.broadcast b,.broadcast small{display:block}.broadcast b{font-size:12px}.broadcast small{font-size:10px;color:#969cab;margin-top:3px}.broadcast button{border:0;border-radius:10px;background:#182849;color:#fff;padding:8px 12px;font-size:11px}.river-page{min-height:100vh;color:#fff;background:linear-gradient(#081832,#0b2e56 52%,#071a35);position:relative;overflow:hidden;padding-top:35px}.river-page:after{content:"";position:absolute;inset:42% 0 0;background:repeating-linear-gradient(170deg,transparent 0 14px,#ffca6914 15px 17px)}.river-title{padding:30px 22px;position:relative;z-index:3}.river-title p:last-child{font-size:12px;color:#bec9d9}.lantern-feed{height:480px;position:relative;z-index:3}.lantern-feed article{position:absolute;left:var(--x);top:var(--y);width:130px;text-align:center;animation:float 4s ease-in-out infinite}.lantern-feed i{display:grid;place-items:center;margin:auto;width:58px;height:72px;border:4px solid #9b6a3b;border-radius:15px;background:var(--c);box-shadow:0 0 26px var(--c);font-style:normal;color:#fff}.lantern-feed span{display:block;margin-top:9px;font-size:9px;background:#071631aa;padding:5px;border-radius:10px}.river-stats{position:absolute;z-index:4;bottom:86px;left:18px;right:18px;display:flex;background:#ffffff12;border:1px solid #ffffff20;border-radius:16px;padding:13px;backdrop-filter:blur(10px)}.river-stats div{flex:1;text-align:center}.river-stats b,.river-stats span{display:block}.river-stats b{color:var(--gold)}.river-stats span{font-size:9px;color:#c4cfdf}.sticky.transparent{background:linear-gradient(transparent,#071a35 34%)}.souvenir-page{text-align:center;padding-top:35px}.photo-card{display:flex;gap:12px;justify-content:center;perspective:800px;margin:28px 0}.card-front,.card-back{width:164px;height:260px;border-radius:13px;padding:16px;box-shadow:0 14px 30px #18203928}.card-front{color:#fff;background:linear-gradient(#071831,#0e3d66);position:relative;overflow:hidden}.card-front:after{content:"";position:absolute;bottom:0;left:0;right:0;height:38%;background:repeating-linear-gradient(170deg,transparent 0 10px,#ffca6918 11px 13px)}.card-lantern{width:52px;height:72px;margin:15px auto;background:var(--lantern);border:4px solid #95643d;border-radius:15px;display:grid;place-items:center;box-shadow:0 0 25px var(--lantern);position:relative;z-index:2}.card-front h3{font-size:14px;line-height:1.5;position:relative;z-index:2}.card-front small{font-size:8px;color:#d4deec}.card-back{background:#fff8eb;border:1px solid #eadbbd;display:flex;flex-direction:column;align-items:center;justify-content:center}.card-back p{font-size:11px;line-height:1.7;margin:15px 0}.fake-qr{font-size:48px;line-height:1}.card-back small{font-size:8px;color:#9b927f}.price-line{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:17px 0;margin-top:10px;font-size:13px}.price-line b{font-size:16px}.toast{position:fixed;z-index:100;bottom:25px;left:50%;transform:translate(-50%,30px);background:#17223a;color:#fff;padding:12px 18px;border-radius:12px;font-size:12px;opacity:0;pointer-events:none;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes float{50%{transform:translateY(-8px)}}@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}@keyframes water{to{background-position:150px 0}}
@media(max-width:370px){.content{padding-left:17px;padding-right:17px}.photo-card{transform:scale(.9);margin-left:-18px;margin-right:-18px}.hero h1{font-size:27px}}
@media(min-width:431px){body{padding:22px 0}.app-shell{min-height:900px;border-radius:28px}.screen{min-height:900px}.sticky{left:50%;transform:translateX(-50%)}.toast{bottom:45px}}