.popart-artboard{position:relative;width:min(100%,calc((100svh - 205px)*1.5));aspect-ratio:3/2;margin:0 auto;min-width:0}
.popart-artboard>img{display:block;width:100%;height:100%;object-fit:contain}
.phone-popart{position:absolute;left:56.12%;top:42.85%;width:16.02%;height:33.45%;overflow:hidden;isolation:isolate;container-type:inline-size;background:linear-gradient(135deg,#fff3c8 0%,#ffe5ef 43%,#e6e0ff 70%,#d3f4ff 100%);cursor:pointer}
.pop-grid{position:absolute;inset:0;opacity:.17;background-image:radial-gradient(#a660bf 1px,transparent 1px);background-size:7cqw 7cqw;transform:rotate(-9deg) scale(1.3)}
.pop-caption{position:absolute;left:7%;top:5%;font:700 3.4cqw/1.2 Arial,sans-serif;letter-spacing:.35cqw;color:#614073;z-index:3}
.pop-sticker{position:absolute;z-index:3;transform-origin:center;will-change:transform;filter:drop-shadow(0 1.5cqw 0 #ffffff) drop-shadow(0 -.8cqw 0 #ffffff) drop-shadow(.8cqw 0 0 #ffffff) drop-shadow(-.8cqw 0 0 #ffffff) drop-shadow(0 2cqw 1cqw #60347b22)}
.pop-sticker img{display:block;width:100%;height:auto;pointer-events:none}
.pop-soft{left:6%;top:15%;width:88%;animation:soft-pop 5.8s cubic-bezier(.3,.1,.3,1) infinite}
.pop-play{left:5%;top:40%;width:91%;animation:play-pop 5.8s .24s cubic-bezier(.3,.1,.3,1) infinite}
.pop-orbit{position:absolute;border:1.3cqw solid #fff;border-radius:50%;box-shadow:0 0 0 .45cqw #c68aff44;opacity:.8}
.orbit-one{width:80%;height:30%;left:24%;top:16%;transform:rotate(-20deg)}
.orbit-two{width:76%;height:24%;left:-20%;top:58%;border-color:#f9a4cb;transform:rotate(25deg)}
.pop-star{position:absolute;z-index:4;font-family:Arial,sans-serif;line-height:1;color:#ff40ac;filter:drop-shadow(1cqw 1cqw 0 #fff);animation:star-bop 5.8s ease-in-out infinite}
.star-one{right:5%;top:30%;font-size:22cqw;transform:rotate(12deg)}
.star-two{left:3%;top:62%;font-size:27cqw;color:#9a64f8;animation-delay:-2s}
.pop-heart{position:absolute;right:5%;top:62%;font:700 22cqw/1 Arial,sans-serif;color:#2baee4;transform:rotate(15deg);animation:heart-bop 4s ease-in-out infinite}
.pop-word{position:absolute;left:27%;top:70%;font:900 10cqw/.85 Arial,sans-serif;letter-spacing:-.7cqw;transform:rotate(-6deg);color:#38234e;text-align:left;text-shadow:.7cqw .7cqw #fff}
.pop-scribble{position:absolute;left:24%;top:88%;width:57%;height:3%;border-bottom:2.4cqw solid #ff5eb9;border-radius:50%;transform:rotate(-7deg)}
.pop-chip{position:absolute;left:8%;right:8%;bottom:3%;border:1cqw solid #674275;border-radius:10cqw;padding:2.5cqw 1cqw;background:#fff9;font:700 4cqw Arial,sans-serif;letter-spacing:.2cqw;color:#674275;transform:rotate(3deg)}
.pop-confetti i{position:absolute;z-index:5;width:3cqw;height:7cqw;background:#ffcb45;border-radius:2cqw;left:12%;top:33%;transform:rotate(-35deg)}
.pop-confetti i:nth-child(2){left:88%;top:9%;height:5cqw;background:#ff65b5;transform:rotate(24deg)}.pop-confetti i:nth-child(3){left:9%;top:88%;background:#2ab7e6;transform:rotate(35deg)}.pop-confetti i:nth-child(4){left:81%;top:83%;height:4cqw;background:#a26bff}.pop-confetti i:nth-child(5){left:73%;top:67%;height:3cqw;background:#ffd254}
@keyframes soft-pop{0%,100%{transform:translateY(0) rotate(-7deg) scale(.98)}14%{transform:translateY(-6%) rotate(-3deg) scale(1.04,1.09)}25%{transform:translateY(2%) rotate(-7deg) scale(1.05,.94)}37%{transform:translateY(-2%) rotate(-5deg) scale(.99,1.03)}52%,85%{transform:translateY(0) rotate(-7deg) scale(1)}}
@keyframes play-pop{0%,100%{transform:translateY(0) rotate(7deg) scale(1)}18%{transform:translateY(-7%) rotate(3deg) scale(1.03,1.08)}30%{transform:translateY(3%) rotate(8deg) scale(1.06,.94)}43%{transform:translateY(-2%) rotate(5deg) scale(.99,1.03)}60%,88%{transform:translateY(0) rotate(7deg) scale(1)}}
@keyframes star-bop{0%,100%{transform:rotate(12deg) scale(.9)}25%{transform:rotate(-12deg) scale(1.15)}45%,85%{transform:rotate(12deg) scale(1)}}
@keyframes heart-bop{0%,100%{transform:translateY(0) rotate(15deg)}50%{transform:translateY(-10%) rotate(7deg)}}
.pop-tap .pop-confetti{animation:confetti-jump .8s ease-out}
@keyframes confetti-jump{0%{opacity:1;transform:scale(1)}45%{opacity:.8;transform:scale(1.12) rotate(-3deg)}100%{opacity:1;transform:scale(1)}}
.pop-paused *{animation-play-state:paused!important}
.popart-controls{display:flex;justify-content:center;align-items:center;gap:22px;margin:12px auto 2px;color:#927b9b;font:9px Arial,sans-serif;letter-spacing:1px}
.popart-controls button{font:10px Arial,sans-serif;color:#765588;border:1px solid #e6d8ef;background:#fff;border-radius:20px;padding:8px 12px;cursor:pointer}
@media(max-width:650px){.popart-artboard{width:100%;aspect-ratio:3/2}.popart-controls{gap:12px;font-size:7px;letter-spacing:.4px}.popart-controls button{font-size:9px}}
@media(prefers-reduced-motion:reduce){.phone-popart *{animation:none!important}.pop-soft{transform:rotate(-7deg)}.pop-play{transform:rotate(7deg)}}
/* Silent hover concept: keep the original object photograph as the backdrop. */
.silent-dance-scene{background:transparent;cursor:pointer}
.phone-photo-base{position:absolute;display:block;max-width:none!important;width:624.2%!important;height:auto!important;left:-350.4%;top:-128.3%;pointer-events:none}
.logo-paper{position:absolute;left:12%;top:11%;width:84%;height:30%;background:#fff;clip-path:polygon(0 15%,11% 8%,8% 0,31% 7%,48% 0,73% 6%,91% 0,100% 15%,95% 32%,100% 57%,92% 77%,100% 96%,74% 91%,57% 100%,35% 93%,13% 100%,0 83%,7% 62%,0 41%);opacity:0;pointer-events:none}
.dance-wordmark{position:absolute;left:12%;top:15%;width:84%;z-index:4;pointer-events:none;opacity:0;animation:wordmark-dance .66s ease-in-out infinite;animation-play-state:paused;filter:drop-shadow(0 .5cqw 0 #fff)}
.dance-wordmark img{display:block;width:100%;height:auto}
.dance-star{position:absolute;z-index:5;line-height:1;font-family:Arial,sans-serif;filter:drop-shadow(.6cqw .6cqw 0 #fff);pointer-events:none;opacity:0;animation:star-dance .66s ease-in-out infinite;animation-play-state:paused}
.dance-yellow{left:4%;top:2%;font-size:19cqw;color:#ffd34b;animation-delay:-.16s}.dance-blue{right:2%;top:32%;font-size:20cqw;color:#38b9ef;animation-delay:-.33s}
.dance-screen{position:absolute;left:64%;top:64%;width:29%;height:29%;z-index:3;transform:rotate(11deg);overflow:hidden;border-radius:3cqw;pointer-events:none;opacity:0;background:#f1f1f1}
.dance-screen video{width:100%;height:100%;object-fit:contain;display:block;background:transparent}
.has-played .logo-paper,.has-played .dance-wordmark,.has-played .dance-star,.has-played .dance-screen{opacity:1}
.dance-doodles{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.dance-doodles path{fill:none;stroke:#ff5ba6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset .35s ease-out}
.dance-doodles path:nth-child(3n+1){stroke:#ffc735}.dance-doodles path:nth-child(3n+2){stroke:#29b2e7}.dance-doodles path.drawn{stroke-dashoffset:0}
.camera-photo-flash{position:absolute;left:28%;top:81%;width:12%;aspect-ratio:1;z-index:7;pointer-events:none;opacity:0;background:radial-gradient(#fff 0 12%,#fff9 16%,transparent 65%);filter:drop-shadow(0 0 3px #fff)}
.camera-photo-flash:after{content:"✦";position:absolute;inset:0;font:24cqw/1 Arial;color:#fff;transform:translate(-15%,-15%)}
.flash-now{animation:camera-still-flash .35s ease-out both;animation-play-state:paused}
.dance-active .dance-wordmark,.dance-active .dance-star,.dance-active .flash-now{animation-play-state:running}
@keyframes wordmark-dance{0%,100%{transform:translate(0,0) rotate(-5deg) scale(1)}25%{transform:translate(2%,-5%) rotate(2deg) scale(1.02,.97)}55%{transform:translate(-2%,2%) rotate(-8deg) scale(.98,1.03)}78%{transform:translate(1%,-2%) rotate(-2deg)}}
@keyframes star-dance{0%,100%{transform:rotate(-12deg) scale(.9)}30%{transform:rotate(18deg) scale(1.1)}65%{transform:rotate(-24deg) scale(1)}}
@keyframes camera-still-flash{0%{opacity:0;transform:scale(.5)}12%{opacity:.9;transform:scale(1)}40%{opacity:.25}100%{opacity:0;transform:scale(1.2)}}
.sprite-fallback .dance-screen{background-image:url("GDAVO_확정인물댄스_Approved_Dancer_Frames.발행2026.10.31.png");background-size:400% 300%;background-repeat:no-repeat;animation:dancer-frame-loop 1s steps(1,end) infinite;animation-play-state:paused;background-color:#ededeb}
.sprite-fallback .dance-screen video{display:none}.sprite-fallback.dance-active .dance-screen{animation-play-state:running}
@keyframes dancer-frame-loop{0%{background-position:0 0}8.33%{background-position:33.333% 0}16.66%{background-position:66.666% 0}25%{background-position:100% 0}33.33%{background-position:0 50%}41.66%{background-position:33.333% 50%}50%{background-position:66.666% 50%}58.33%{background-position:100% 50%}66.66%{background-position:0 100%}75%{background-position:33.333% 100%}83.33%{background-position:66.666% 100%}91.66%{background-position:100% 100%}}
.silent-dance-scene:focus-visible{outline:2px solid #9b72c2;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.silent-dance-scene *{animation:none!important}.dance-doodles path{transition:none}}
.silent-dance-scene .logo-paper{left:8%;top:7%;width:89%;height:34%}
/* Clip every moving layer to the pictured phone feed, including filters. */
.phone-popart{clip-path:inset(0);contain:paint;overflow:hidden!important;max-width:100%;max-height:100%}
.dance-screen{clip-path:inset(0 round 3cqw);contain:paint}
.dance-screen video{position:absolute;inset:0;max-width:100%;max-height:100%}
.laptop-ink-screen{position:absolute;left:4.8%;top:33.75%;width:47.4%;height:43.2%;overflow:hidden;clip-path:inset(0 round 1%);contain:paint;cursor:pointer;container-type:inline-size}
.laptop-ink-logo{position:absolute;left:70%;top:79%;width:26%;height:20%;isolation:isolate;pointer-events:none}
.ink-paper{position:absolute;inset:-10%;background:#fff8f3;clip-path:polygon(0 20%,20% 7%,40% 14%,70% 0,100% 10%,93% 70%,100% 100%,30% 90%,0 100%);opacity:0}
.ink-reveal{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;clip-path:inset(0 100% 0 0)}
.ink-pen{position:absolute;left:2%;top:75%;width:4%;height:34%;background:linear-gradient(90deg,#161921,#515763 50%,#202530);transform-origin:50% 100%;transform:rotate(35deg);border-radius:3px 3px 0 0;opacity:0}
.ink-pen:after{content:"";position:absolute;left:0;top:100%;width:100%;height:22%;background:#bfc3ca;clip-path:polygon(0 0,100% 0,50% 100%)}
.ink-toss-star{position:absolute;left:72%;top:-10%;font:900 6cqw/1 Arial;color:#ff42a5;opacity:0}
.ink-spark{position:absolute;left:71%;top:-15%;font:3cqw Arial;color:#ffcb40;opacity:0}
.laptop-ink-screen:is(:hover,:focus-visible,.ink-active) .ink-paper{opacity:1}
.laptop-ink-screen:is(:hover,:focus-visible,.ink-active) .ink-reveal{opacity:1;animation:ink-reveal 3.6s linear both}
.laptop-ink-screen:is(:hover,:focus-visible,.ink-active) .ink-pen{animation:ink-write 3.6s linear both}
.laptop-ink-screen:is(:hover,:focus-visible,.ink-active) .ink-toss-star{animation:ink-toss .85s 3s cubic-bezier(.2,.8,.3,1) both}
.laptop-ink-screen:is(:hover,:focus-visible,.ink-active) .ink-spark{animation:ink-ping .5s 3.65s ease-out both}
@keyframes ink-reveal{0%{clip-path:inset(0 100% 0 0)}85%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ink-write{0%{left:0;top:55%;opacity:1}10%{left:14%;top:10%}20%{left:9%;top:70%}30%{left:31%;top:20%}40%{left:35%;top:70%}50%{left:52%;top:10%}60%{left:60%;top:65%}70%{left:74%;top:15%}80%{left:89%;top:60%;opacity:1}90%,100%{left:100%;top:0;opacity:0}}
@keyframes ink-toss{0%{opacity:0;transform:translate(-240%,160%) rotate(-180deg) scale(.3)}15%{opacity:1}60%{transform:translate(0,-30%) rotate(10deg) scale(1.2)}80%{transform:translate(0,10%) rotate(-8deg) scale(.9)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes ink-ping{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
@media(prefers-reduced-motion:reduce){.laptop-ink-screen *{animation:none!important}.laptop-ink-screen:is(:hover,:focus-visible,.ink-active) .ink-reveal{clip-path:none;opacity:1}.ink-pen,.ink-toss-star{display:none}}

/* Calibrated to the small photographed phone inside the large phone feed.
   Board reference 1536x1024: screen corners approximately
   (1037,672), (1082,685), (1050,768), (1005,755). */
.phone-popart .dance-screen{left:71.1%;top:68.1%;width:18.3%;height:24.2%;transform-origin:0 0;transform:matrix(1,.289,-.386,1,0,0);border-radius:1.1cqw;clip-path:inset(0 round 1.1cqw);background:#dce8ef;overflow:hidden;contain:paint}
.phone-popart .dance-screen video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}