*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#111;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}
#app{width:100%}
.screen{display:none;position:relative;width:100%;max-width:640px;margin:0 auto;background:#f7f2e8;overflow:visible}
.screen.active{display:block}
.screen-image{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center top}
.hotspot{position:absolute;border:0;background:transparent;cursor:pointer;z-index:5}
.hero-cta{left:6%;right:6%;bottom:11%;height:8%}
.top-left{left:0;top:0;width:20%;height:13%}
.shutter{left:36%;right:36%;bottom:15%;height:19%}
.album{left:0;bottom:15%;width:30%;height:20%}
.result-cta{left:5%;right:5%;bottom:2%;height:13%}
.play{right:0;top:53%;width:30%;height:22%}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(18px);opacity:0;background:rgba(18,49,27,.94);color:#fff;padding:12px 16px;border-radius:999px;font-size:13px;transition:.2s;z-index:20}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:700px){.screen{box-shadow:0 0 35px rgba(0,0,0,.28)}}