@font-face{font-family:Jua;src:url('assets/fonts/Jua-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Daisy;src:url('assets/fonts/Ownglyph_daisy-Rg.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:light;--ink:#26262b;--red:#af1742;--text:'Malgun Gothic','Apple SD Gothic Neo',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#15151a;color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit}img{display:block;max-width:100%;height:auto}p,figure{margin:0}em{font-style:normal}.skip{position:fixed;top:-100px;z-index:100;background:white;padding:12px}.skip:focus{top:10px}.reader{max-width:760px;margin:auto;background:#fff;overflow:hidden;container-type:inline-size}.sequence{position:relative;display:flow-root}.cut{position:relative;isolation:isolate;margin-bottom:var(--gap,130px)}.art{position:relative;width:var(--aw,90%);margin-inline:auto}.source-art{width:100%;height:auto}.identity{font-size:clamp(16px,3cqw,21px);font-weight:700;line-height:1.5;letter-spacing:.04em;margin:0 8% 35px;color:var(--accent)}.identity span{display:block;margin-top:9px;font-size:clamp(11px,1.9cqw,13px);font-weight:400;letter-spacing:.02em;color:var(--muted)}
.speech{position:relative;z-index:2;width:var(--bw,80%);max-width:92%;font-family:var(--talk,Jua),var(--text);font-size:clamp(19px,3.6cqw,27px);line-height:1.5;color:var(--accent,#333);margin-bottom:20px}.speech svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.speech path{fill:var(--bubble,#fff);stroke:var(--edge,#57565d);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round}.speech p{position:relative;padding:21px 24px 35px;text-align:center;word-break:keep-all;overflow-wrap:break-word;transform:translateY(.03em)}.speech.left{margin-left:5%}.speech.right{margin-left:auto;margin-right:5%}.speech.after{margin-top:23px;margin-bottom:0}.speech.after svg{transform:scaleY(-1)}.speech.after p{padding-top:35px;padding-bottom:21px}.speech.firm{font-family:var(--text);font-weight:600;font-size:clamp(18px,3.3cqw,25px)}.speech.tease{line-height:1.4}.speech.soft{font-family:Daisy,Jua,sans-serif;font-size:clamp(23px,4.2cqw,31px)}
.narration{text-align:center;font-size:clamp(18px,3.4cqw,25px);line-height:2.1;font-weight:500;letter-spacing:-.025em;padding:0 5%;word-break:keep-all}.intro{color:#ecebf1;background:#15151b}.cover{padding:70px 6% 48px;text-align:center;background:radial-gradient(ellipse at 50% 110%,#4b182d 0,transparent 70%)}.kicker{font-size:9px;letter-spacing:.19em;color:#af9ba5}.cover-logo{width:91%;margin:25px auto 11px;filter:drop-shadow(0 6px 13px #0009)}.cover-hook{font-size:clamp(13px,2.5cqw,18px);font-weight:400;color:#d0b8c3;letter-spacing:.025em;line-height:1.8}.cut-01{--aw:100%;--gap:145px}.cut-01 .art::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 70%,#15151b)}.cut-01 .narration{margin-top:52px}.cut-02{--aw:74%;--gap:145px}.cut-02 .narration{margin-bottom:60px;color:#b5b3c0}.cut-02 .art{margin-right:7%}.cut-02 .art::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 25px #15151b55}.cut-03{--aw:100%;--gap:0;padding-bottom:145px}.phone-icon{position:absolute;left:39.5%;top:35%;width:21%;text-align:center;display:grid;justify-items:center;gap:13px;color:#f9dbe4;font-size:clamp(14px,3cqw,23px);letter-spacing:.12em}.app-icon{width:62%;border:1px solid #dd4167;border-radius:18%;padding:14%;background:linear-gradient(145deg,#8e1338,#2b1020);box-shadow:0 0 33px #cb204c66}.app-icon svg{display:block;width:100%;overflow:visible;fill:none;stroke:#ffd4df;stroke-width:5}.question{margin-top:40px}.question em{color:#f595af;font-weight:700}
.chae{--accent:#343d4c;--muted:#78808a;--edge:#69707a;background:linear-gradient(#f4f5f8,#fff 40%,#ececf0);padding-top:90px}.cut-04{--aw:77%;--gap:73px}.cut-04 .art{margin-left:5%}.cut-04 .speech{margin-left:auto;margin-right:5%}.cut-05{--aw:100%;--gap:175px}.cut-05 .speech{margin-right:4%}.cut-06{--aw:75%;--gap:90px}.cut-06 .art{margin-right:4%}.night-transition{height:40px;width:1px;background:linear-gradient(#aaa0,#97929e);margin:0 auto 75px}.breath{font-family:Daisy,sans-serif;font-size:clamp(30px,5cqw,39px);color:#62606d;margin:18px 0 0 14%;transform:rotate(-6deg)}.cut-07{--aw:93%;--gap:155px}.cut-08{--aw:88%;--gap:0;padding-bottom:145px}
.desire-ui{position:relative;z-index:2;width:82%;margin:-2px 0 0 auto;padding:22px 25px 25px;background:linear-gradient(125deg,#232129,#121117);color:#f6e6ec;border-left:2px solid #c0355a;box-shadow:0 15px 28px #13121c1a}.ui-top{display:flex;gap:9px;align-items:center;font-size:11px;letter-spacing:.16em;color:#bb8595}.mini-eye{color:#dc496f;font-size:18px;line-height:1}.live-dot{width:4px;height:4px;border-radius:50%;margin-left:auto;background:#dc496f;box-shadow:0 0 8px #dc496f}.scan-track{height:1px;background:linear-gradient(90deg,#d13561aa,transparent);margin:13px 0 18px}.ui-label{font-size:11px;letter-spacing:.13em;color:#e77a99;margin-bottom:12px}.desire-text{font-size:clamp(18px,3.2cqw,23px);line-height:1.8;word-break:keep-all;overflow-wrap:break-word}.cut-08 .art{margin-left:0}.cut-08 .desire-ui{margin-right:0}
.mira{--accent:#81551d;--muted:#9b896d;--edge:#aa8052;--talk:Daisy;background:linear-gradient(#faf8f0,#fffdf8);padding-top:90px}.mira .speech{font-size:clamp(23px,4.1cqw,31px)}.cut-09{--aw:75%;--gap:60px}.cut-09 .art{margin-right:4%}.cut-09 .speech{margin-left:4%}.cut-10{--aw:92%;--gap:65px}.cut-10 .art{margin-left:0;box-shadow:6px 6px 0 #ead6b577}.cut-11{--aw:83%;--gap:100px}.cut-11 .art{margin-right:3%}.cut-11 .speech{margin-left:4%}.cut-12{--aw:89%;--gap:0;padding-bottom:150px}.cut-12 .art{margin-right:0}.cut-12 .desire-ui{margin-left:0;margin-right:auto;width:86%}
.sea{--accent:#702844;--muted:#b7a4ad;--edge:#9b6f85;--talk:Jua;background:linear-gradient(#211b24,#2f202b 65%,#201a24);padding-top:85px}.sea .identity{color:#deb4c7}.cut-13{--aw:72%;--gap:45px}.cut-13 .art{margin-left:4%;clip-path:polygon(0 2%,100% 0,100% 98%,0 100%)}.cut-13 .speech{margin-right:3%;margin-left:auto}.cut-14{--aw:100%;--gap:60px}.cut-14 .art{clip-path:polygon(0 3%,100% 0,100% 96%,0 100%)}.shutter{position:absolute;right:4%;bottom:-19px;z-index:2;color:#f9edf3;font-family:Jua,sans-serif;font-size:clamp(36px,7cqw,55px);font-style:italic;transform:rotate(-7deg);letter-spacing:.04em;text-shadow:3px 3px #54253f;-webkit-text-stroke:1px #381d30;paint-order:stroke fill}.cut-15{--aw:73%;--gap:105px}.cut-15 .art{margin-right:4%}.cut-16{--aw:90%;--gap:0;padding-bottom:150px}.cut-16 .art{margin-left:0}.cut-16 .desire-ui{width:86%;border-left-color:#df6090;background:linear-gradient(120deg,#3d1d31,#1b1520)}
.sujin{--accent:#285d60;--muted:#808a89;--edge:#6c9695;background:linear-gradient(#f1f3f1,#f8f7f3);padding-top:95px}.cut-17{--aw:78%;--gap:130px}.cut-17 .art{margin-right:4%}.cut-17 .speech{margin-left:4%;margin-right:auto}.cut-18{--aw:72%;--gap:135px}.cut-18 .art{margin-left:4%}.cut-19{--aw:84%;--gap:155px}.cut-19 .art{margin-right:4%}.cut-19 .speech{margin-left:5%}.cut-20{--aw:87%;--gap:0;padding-bottom:165px}.cut-20 .art{margin-right:0}.cut-20 .desire-ui{margin-left:0;margin-right:auto;border-left-color:#6ca6a0;background:linear-gradient(130deg,#193435,#111a20)}.cut-20 .scan-track{background:linear-gradient(90deg,#7aa5a1,transparent)}
.harin{--accent:#74617e;--muted:#a093a6;--edge:#aa9db6;--talk:Daisy;background:linear-gradient(#f5f2f6,#fffcff);padding-top:95px}.cut-21{--aw:68%;--gap:130px}.cut-21 .art{margin-left:6%}.cut-22{--aw:76%;--gap:95px}.cut-22 .art{margin-right:4%;box-shadow:-8px 8px 0 #e8e0ed88}.cut-23{--aw:74%;--gap:125px}.cut-23 .art{margin-left:5%}.cut-23 .speech{margin-left:auto;margin-right:4%;font-family:Daisy,sans-serif;font-size:clamp(23px,4.2cqw,31px)}.cut-24{--aw:88%;--gap:0;padding-bottom:170px}.cut-24 .art{margin-right:0}.cut-24 .desire-ui{width:85%;margin-right:auto;margin-left:0;border-left-color:#b39ac4;background:linear-gradient(135deg,#352b40,#1c1824)}
.finale{background:#14131a;color:#eee8ee;padding-top:75px}.cut-25{--gap:160px}.montage{position:relative;aspect-ratio:1/1.42;overflow:hidden}.montage-back{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.7}.face{position:absolute;overflow:hidden;box-shadow:0 0 0 2px #553140}.face img{position:absolute;width:100%;height:100%;object-fit:cover;filter:saturate(.87)}.face-1{left:2%;top:3%;width:61%;height:21%;clip-path:polygon(0 13%,100% 0,96% 85%,0 100%)}.face-1 img{object-position:50% 32%;transform:scale(1.18)}.face-2{right:0;top:25%;width:67%;height:19%;clip-path:polygon(8% 0,100% 13%,100% 100%,0 90%)}.face-2 img{object-position:52% 15%;transform:scale(1.15)}.face-3{left:0;top:46%;width:74%;height:19%;clip-path:polygon(0 5%,96% 0,100% 92%,0 100%)}.face-3 img{object-position:65% 22%;transform:scale(1.14)}.face-4{right:0;top:66%;width:57%;height:15%;clip-path:polygon(0 14%,100% 0,100% 100%,6% 94%)}.face-4 img{object-position:65% 15%;transform:scale(1.18)}.face-5{left:2%;top:82%;width:68%;height:17%;clip-path:polygon(0 0,100% 12%,94% 100%,0 94%)}.face-5 img{object-position:55% 20%;transform:scale(1.15)}.cut-25 .narration{margin-top:65px}.cut-26{--aw:100%;--gap:165px}.phone26-ui{position:absolute;top:29%;left:36%;width:28%;height:46%;display:flex;align-items:center;flex-direction:column;gap:12px;color:#ffb3c7}.target-reticle{font-size:clamp(30px,8cqw,59px);line-height:1;margin-top:15%;color:#ed507c;text-shadow:0 0 25px #f12e67}.phone26-ui strong{font-size:clamp(18px,4cqw,29px);font-weight:500;letter-spacing:.18em}.screen-word{font-size:clamp(9px,1.9cqw,14px);margin-top:18px;letter-spacing:.05em;color:#c8758c}.screen-line{width:50%;height:1px;background:#9d3150}.choice{margin-top:15px}.choice em{color:#e68da8}.cut-27{--gap:0}.keyvisual{position:relative;aspect-ratio:1/1.6;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#47313b,#11121a 80%)}.key-bg{position:absolute;width:100%;height:auto;top:0;opacity:.65;mask-image:linear-gradient(#000 40%,transparent)}.cast-stage{position:absolute;inset:0}.cast{position:absolute;filter:drop-shadow(0 0 5px #ffb8cc20);mask-image:linear-gradient(#000 64%,transparent 98%)}.cast img{width:100%;height:auto;filter:saturate(.87)}.cast-mira{width:58%;top:6%;left:-13%;z-index:1}.cast-sujin{width:57%;top:1%;right:-12%;z-index:2}.cast-sea{width:60%;top:28%;left:-14%;z-index:3}.cast-harin{width:58%;top:30%;right:-12%;z-index:4}.cast-chae{width:58%;top:15%;left:21%;z-index:5}.key-fade{position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#14131acc 52%,#14131a 90%);z-index:6}.key-title{position:absolute;z-index:7;top:69%;left:3%;width:94%;filter:drop-shadow(0 5px 20px #000)}footer{background:#14131a;text-align:center;padding:15px 20px 60px;color:#a99aaa;font-size:11px}footer .end{font-size:13px;letter-spacing:.07em;margin-bottom:28px}footer nav{display:flex;gap:35px;justify-content:center}footer a{text-decoration:none;color:#887c8c}
@media(max-width:500px){.cover{padding:46px 4% 37px}.kicker{font-size:7px;letter-spacing:.12em}.cover-logo{width:97%;margin-top:19px;margin-bottom:15px}.cut{margin-bottom:calc(var(--gap,130px)*.68)}.cut-03{padding-bottom:100px}.cut-01 .narration{margin-top:38px}.cut-02 .narration{margin-bottom:40px}.question{margin-top:18px}.phone-icon{gap:9px}.app-icon{box-shadow:0 0 18px #cb204c66}.identity{margin-bottom:27px}.chae,.mira,.sea,.sujin,.harin{padding-top:65px}.speech{margin-bottom:18px}.speech p{padding:17px 19px 30px}.speech.after p{padding-top:30px;padding-bottom:17px}.speech.after{margin-top:18px}.night-transition{height:33px;margin-bottom:43px}.cut-08,.cut-12,.cut-16{padding-bottom:100px}.cut-20,.cut-24{padding-bottom:115px}.desire-ui{width:86%;padding:18px 18px 22px}.ui-top{font-size:10px}.scan-track{margin:10px 0 15px}.ui-label{font-size:10px;margin-bottom:10px}.desire-text{font-size:18px;line-height:1.8}.finale{padding-top:52px}.cut-25 .narration{margin-top:44px}.cut-26 .choice{margin-top:27px}.phone26-ui{gap:8px}.phone26-ui .screen-word{margin-top:10px}.keyvisual{aspect-ratio:1/1.65}footer{padding-bottom:45px}.cut-27{margin-bottom:0}}
.cast-harin{z-index:6}.key-fade{z-index:7}.key-title{z-index:8}
.face svg{display:block;width:100%;height:100%}.speech.right svg{transform:scaleX(-1)}.speech.after.right svg{transform:scale(-1)}.speech.after.left svg{transform:scaleY(-1)}
.cut-04 .speech svg,.cut-13 .speech svg,.cut-23 .speech svg{transform:scaleX(-1)}.cut-09 .speech svg,.cut-15 .speech svg,.cut-17 .speech svg{transform:none}
html{scrollbar-width:none;scroll-behavior:auto}html::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
