/*스타일*/
html, body {width:100%; height:100%; margin:0; padding:0; overflow:hidden; overscroll-behavior:none;}
body {position:fixed; inset:0;}

:root {
    --stage-h:max(100svh, 70rem);
    --stage-w:max(100vw, calc(var(--stage-h) * 1920 / 1080));
}

.scene {width:100%; height:100vh; height:100dvh; position:fixed; inset:0; overflow:hidden; background:var(--black); touch-action:none;}
.scene::after {content:""; position:absolute; inset:0; z-index:150; background:rgba(0,0,0,.18); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); opacity:0; pointer-events:none; transition:opacity .16s ease, backdrop-filter .16s ease, -webkit-backdrop-filter .16s ease;}
.scene.is-focus-transition::after {opacity:1; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);}


.scene-stage {
    width:var(--stage-w);
    height:calc(var(--stage-w) * 1080 / 1920);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(calc(-50% + var(--drag-x, 0px)),-50%);
    overflow:hidden;
    touch-action:none;
    cursor:grab;
}

.scene-stage.is-dragging {cursor:grabbing;}

.scene-main {position:absolute; inset:0; z-index:10;}
.scene-img {position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:fill; pointer-events:none; user-select:none; -webkit-user-drag:none;}

.scene-object {position:absolute; z-index:10; display:block; padding:0; border:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:none;}

.hotspot-glow {position:absolute; inset:0; display:block; border-radius:50%;}
.hotspot-glow-core {position:absolute; left:50%; top:50%; width:30%; height:30%; transform:translate(-50%,-50%); border-radius:50%; background:var(--white);}

.scene-detail {position:absolute; inset:0; z-index:20; pointer-events:none;}

.detail-forward {position:absolute; inset:0; z-index:1; opacity:0; visibility:hidden; pointer-events:none;}
.detail-forward.is-ready {opacity:1; visibility:visible;}
.detail-forward video {position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; filter:none !important; mix-blend-mode:normal;}

.detail-result {position:absolute; inset:0; z-index:3; opacity:0; visibility:hidden; pointer-events:none;}
.detail-result.is-active {opacity:1; visibility:visible; pointer-events:auto;}
.detail-result > img {position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; -webkit-user-drag:none;}

.detail-back {position:absolute; inset:0; z-index:5; opacity:0; visibility:hidden; pointer-events:none;}
.detail-back.is-ready {opacity:1; visibility:visible;}
.detail-back video {position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; filter:none !important; mix-blend-mode:normal;}

.scene.is-playing-forward .scene-main {visibility:hidden;}
.scene.is-back-ending .scene-main {z-index:50; visibility:visible;}

/* 영상 준비 중에는 기존 메인 이미지 유지 */
.scene.is-forward-preparing .scene-main {
    z-index:30;
    visibility:visible;
}

/* 영상이 준비되면 메인 이미지 숨김 */
.scene.is-playing-forward .scene-main {
    visibility:hidden;
}


@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}