/*스타일*/

#mainIntro {
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    z-index:100;
    overflow:hidden;
}

#mainIntro.is-complete {
    display:none;
}


.main .scene-detail .detail-result .detail-content {
    width:100%;
    height:100%;
    min-height:0;
    position:relative;
    isolation:isolate;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* DIM */
.main .scene-detail .detail-result .detail-content::before {
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
    z-index:0;
    pointer-events:none;
}

/* 팝업 */
.main .scene-detail .detail-content .contents-popup {
    position:relative;
    z-index:1;
}

/*.main .scene-object {background-color:rgba(2555,0,0,0.5);}*/
.main .scene-object.focus:before {
    content:'';
    width: var(--size-32);
    aspect-ratio:1;
    background:url(../../img/com/icon_focus.svg) no-repeat center / cover;
    position:absolute;
    left:50%; 
    top:50%;
    transform:translate(-50%,-50%);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
}


/* PC - 마우스 hover */
@media (hover:hover) and (pointer:fine) {
    .main .scene-object.focus:hover::before,
    .main .scene-object.comingsoon:hover::before {
        opacity:1;
        visibility:visible;
    }

    .main .scene-object.focus:hover::before{
        animation:focusBlink 1.5s ease-in-out infinite;
    }
}

/* 모바일 / 태블릿 */
@media (hover:none), (pointer:coarse) {
    .main .scene-object.focus::before,
    .main .scene-object.comingsoon::before {
        opacity: 0;
        visibility: visible;
        animation: focusSoftGlow 3.2s ease-in-out infinite;
    }

    /* 서로 다른 타이밍으로 은은하게 */
    .main .scene-object:nth-child(2n).focus::before,
    .main .scene-object:nth-child(2n).comingsoon::before {
        animation-duration: 3.8s;
        animation-delay: -1.4s;
    }

    .main .scene-object:nth-child(3n).focus::before,
    .main .scene-object:nth-child(3n).comingsoon::before {
        animation-duration: 3.5s;
        animation-delay: -2.2s;
    }

    .main .scene-object:nth-child(4n).focus::before,
    .main .scene-object:nth-child(4n).comingsoon::before {
        animation-duration: 4.1s;
        animation-delay: -0.8s;
    }

    .main .scene-object:nth-child(5n).focus::before,
    .main .scene-object:nth-child(5n).comingsoon::before {
        animation-duration: 3.3s;
        animation-delay: -2.7s;
    }
}

/* 자연스럽게 나타났다 사라지는 효과 */
@keyframes focusSoftGlow {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 0.65;
    }
}

/* BLINK ANIMATION */
@keyframes focusBlink {
    0%, 100% {
        opacity:1;
    }
    50% {
        opacity:.3;
    }
}


/* ========================================
   EXTERNAL LINK - TRANSPARENT DIM
======================================== */

.main .scene-detail.is-external-link .detail-result {
    background:transparent;
}

.main .scene-detail.is-external-link .detail-result::before,
.main .scene-detail.is-external-link .detail-result::after,
.main .scene-detail.is-external-link .detail-content,
.main .scene-detail.is-external-link .detail-content::before,
.main .scene-detail.is-external-link .detail-content::after {
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}



.main .scene-object[data-id="turntable"] {
    clip-path:polygon(
        0% 0%,
        76% 0%,
        80% 12%,
        96% 58%,
        100% 62%,
        100% 100%,
        0% 100%,
        0% 72%,
        12% 65%,
        28% 60%,
        20% 46%,
        0% 26%
    );
}

.scene-object[data-id="pan"] {
    clip-path: polygon(
        0% 22%,
        4% 12%,
        13% 4%,
        25% 0%,
        36% 1%,
        46% 5%,
        52% 13%,
        56% 24%,
        57% 38%,
        61% 43%,
        77% 54%,
        97% 67%,
        100% 74%,
        100% 88%,
        96% 94%,
        77% 85%,
        59% 72%,
        51% 65%,
        51% 75%,
        47% 79%,
        39% 79%,
        27% 84%,
        16% 83%,
        7% 75%,
        1% 62%,
        0% 48%
    );
}

.main .scene-object[data-id='pan'].focus:before {
    left:29%;
    top:calc(50% - 1.3rem);
}


.scene-object[data-id="album"] {
    clip-path: polygon(
        3% 18%,
        6% 12%,
        12% 8%,
        20% 6%,
        47% 6%,
        47% 3%,
        82% 3%,
        88% 7%,
        91% 14%,
        94% 23%,
        96% 35%,
        96% 82%,
        89% 88%,
        79% 93%,
        52% 96%,
        23% 96%,
        19% 92%,
        16% 78%,
        12% 62%,
        8% 47%,
        5% 33%,
        3% 24%
    );
}

.main .scene-object[data-id='album'].focus:before {
    left:calc(50% + 1.8rem);
}


.scene-object[data-id="photo"] {
    clip-path: polygon(
        0% 8%,
        8% 5%,
        8% 3%,
        22% 3%,
        22% 1%,
        78% 1%,
        85% 6%,
        89% 26%,
        96% 46%,
        96% 75%,
        100% 81%,
        93% 86%,
        80% 90%,
        53% 95%,
        24% 98%,
        15% 93%,
        11% 77%,
        6% 51%,
        2% 30%
    );
}

.main .scene-object[data-id="drawer"] {
    clip-path:polygon(
        2.5% 0%,
        97.5% 0%,
        100% 6%,
        100% 52.8%,
        77.4% 52.8%,
        77.4% 58.7%,
        75% 58.7%,
        75% 70.6%,
        72.5% 70.6%,
        72.5% 76.6%,
        70% 76.6%,
        70% 88.5%,
        67.5% 88.5%,
        67.5% 94.4%,
        65% 94.4%,
        65% 100%,
        0% 100%,
        0% 6%,
        2.5% 6%
    );
}

/* ========================================
   BOX - MAIN GIFT
======================================== */

.main .scene-object[data-id="box"] {
    clip-path:polygon(
        4% 11%,
        10% 8%,
        23% 6%,
        39% 4%,
        55% 2%,
        72% 4%,
        88% 6%,
        100% 8%,

        100% 78%,
        94% 82%,
        85% 86%,
        76% 89%,
        65% 92%,
        54% 95%,

        43% 93%,
        34% 89%,
        27% 85%,
        27% 69%,
        24% 68%,
        21% 67%,

        19% 57%,
        15% 53%,
        10% 49%,
        5% 49%,
        2% 46%,
        4% 40%,
        6% 28%
    );
}
.main .scene-object[data-id='box'].focus:before {
    left:40%;
}



.main .scene-object[data-id='room'].focus:before {
    left:calc(50% + 0.8rem);
    top:calc(50% - 1.5rem);
}


/* 블라인드 열림 */
.main .scene-toggle[data-id="blind"] {
    clip-path:polygon(
        0% 0%,
        5% 0%,
        100% 40%,
        100% 100%,
        80% 97%,
        30% 86%,
        0% 78%
    );
}

/* 블라인드 닫힘 */
.main .scene-toggle[data-id="blind"].is-active {
    clip-path:polygon(
        0% 0%,
        5% 0%,
        100% 18%,
        100% 98%,
        0% 100%
    );
}

/* ========================================
   LAMP 1 - OFF
======================================== */

.main .scene-toggle[data-id="lamp1"] {
    clip-path:polygon(
        28% 0%,
        72% 0%,
        100% 48%,
        96% 53%,
        65% 55%,
        70% 61%,
        75% 68%,
        74% 77%,
        65% 85%,
        65% 91%,
        68% 94%,
        68% 100%,
        32% 100%,
        32% 94%,
        35% 91%,
        35% 85%,
        26% 77%,
        25% 68%,
        30% 61%,
        35% 55%,
        4% 53%,
        0% 48%
    );
}

/* ========================================
   LAMP 2 - OFF
======================================== */

.main .scene-toggle[data-id="lamp2"] {
    clip-path:polygon(
        38% 0%,
        62% 0%,
        78% 6%,
        91% 18%,
        100% 32%,
        100% 47%,
        91% 61%,
        75% 72%,
        65% 77%,
        65% 87%,
        78% 89%,
        78% 100%,
        22% 100%,
        22% 89%,
        35% 87%,
        35% 77%,
        25% 72%,
        9% 61%,
        0% 47%,
        0% 32%,
        9% 18%,
        22% 6%
    );
}



.main .scene-object.comingsoon::before {
    content: '';
    width: 5.8rem;
    aspect-ratio: 58 / 52;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

/* Hover */
.main .scene-object.comingsoon:hover::before {
    opacity: 1;
    visibility: visible;
    animation: comingsoonGlow 1.5s ease-in-out infinite;
}

@keyframes comingsoonGlow {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}


.main .scene-object.comingsoon[data-val="1106"]:before {
    background-image:url(../../img/com/coming_soon_1106_01.svg);
    left:0;
    top:0;
}

html:is([lang="en"], [lang="th"]) .main .scene-object.comingsoon[data-val="1106"]:before {
    background-image:url(../../img/com/coming_soon_1106_02.svg?v=3);
}

html:is([lang="vi"]) .main .scene-object.comingsoon[data-val="1106"]:before {
    background-image:url(../../img/com/coming_soon_1106_03.svg);
}

.scene-object[data-id="gun"] {
    clip-path: polygon(
        43% 0%,
        57% 0%,
        70% 2%,
        81% 5%,
        90% 10%,
        96% 17%,
        98% 25%,
        96% 32%,
        89% 38%,
        80% 42%,

        /* 오른쪽 원형 장식 */
        83% 46%,
        86% 52%,
        86% 59%,
        82% 65%,
        72% 70%,

        /* 아래쪽 손잡이 */
        63% 79%,
        65% 86%,
        59% 92%,
        48% 97%,
        27% 97%,
        15% 94%,
        11% 88%,
        15% 80%,
        23% 73%,

        /* 왼쪽 원형 장식 */
        22% 67%,
        20% 60%,
        20% 53%,
        24% 46%,

        /* 왼쪽 상단 */
        40% 44%,
        44% 34%,
        43% 28%,
        36% 23%,
        35% 16%,
        38% 7%
    );
}



/* ========================================
   POPUP LAYOUT
======================================== */

.contents-popup {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}

/* 팝업 크기 */
.contents-popup .popup-box {
    height:auto;    
    display:flex;
    flex-direction:column;    
}

/* 내부 전체 */
.contents-popup .popup-wrap {
    display:flex;
    flex-direction:column;
    min-height:0;
    max-height:100%;
    padding:var(--gap-24) var(--gap-8);
    gap:var(--gap-10);
}

/* 헤더 */
.contents-popup .popup-head {
    position:relative;
    flex-shrink:0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

/* 본문 */
.contents-popup .popup-body {
    display:flex;
    flex-direction:column;
    flex:0 1 auto;
    min-height:0;
    max-height:100%;
}

/* 실제 콘텐츠 */
.contents-popup .popup-body .popup-conts {
    flex:0 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
}

/* ========================================
   PIXEL BORDER
======================================== */

.contents-popup .popup-box {
    --pixel:4px;
    --border-color:var(--key-color);
    --border-inner:#2D2D2D;
    --popup-bg:#222222;

    position:relative;
    box-sizing:border-box;
    padding:calc(var(--pixel) * 2);

    background:
        /* 상단 노랑 */
        linear-gradient(var(--border-color) 0 0)
        center top /
        calc(100% - var(--pixel) * 8)
        var(--pixel) no-repeat,

        /* 상단 회색 */
        linear-gradient(var(--border-inner) 0 0)
        center top var(--pixel) /
        calc(100% - var(--pixel) * 8)
        var(--pixel) no-repeat,

        /* 하단 노랑 */
        linear-gradient(var(--border-color) 0 0)
        center bottom /
        calc(100% - var(--pixel) * 8)
        var(--pixel) no-repeat,

        /* 하단 회색 */
        linear-gradient(var(--border-inner) 0 0)
        center bottom var(--pixel) /
        calc(100% - var(--pixel) * 8)
        var(--pixel) no-repeat,

        /* 왼쪽 노랑 */
        linear-gradient(var(--border-color) 0 0)
        left center /
        var(--pixel)
        calc(100% - var(--pixel) * 8) no-repeat,

        /* 왼쪽 회색 */
        linear-gradient(var(--border-inner) 0 0)
        left var(--pixel) center /
        var(--pixel)
        calc(100% - var(--pixel) * 8) no-repeat,

        /* 오른쪽 노랑 */
        linear-gradient(var(--border-color) 0 0)
        right center /
        var(--pixel)
        calc(100% - var(--pixel) * 8) no-repeat,

        /* 오른쪽 회색 */
        linear-gradient(var(--border-inner) 0 0)
        right var(--pixel) center /
        var(--pixel)
        calc(100% - var(--pixel) * 8) no-repeat,

        /* 중앙 배경 */
        linear-gradient(var(--popup-bg) 0 0)
        center /
        calc(100% - var(--pixel) * 8)
        100% no-repeat,

        linear-gradient(var(--popup-bg) 0 0)
        center /
        calc(100% - var(--pixel) * 4)
        calc(100% - var(--pixel) * 4) no-repeat,

        linear-gradient(var(--popup-bg) 0 0)
        center /
        100%
        calc(100% - var(--pixel) * 8) no-repeat;
}

.contents-popup.ty-2 .popup-box {
    --border-color:#FF70A1;    
}

.contents-popup.ty-3 .popup-box {
    --pixel:4px;
    --border-color:var(--key-color);
    --border-inner:#2D2D2D;
    --popup-bg:#222222;

    position:relative;
    box-sizing:border-box;
    padding:0;

    background:none;
}

/* ========================================
   PIXEL CORNERS
======================================== */

.contents-popup .popup-box::before,
.contents-popup .popup-box::after {
    content:'';
    position:absolute;
    left:0;
    width:100%;
    height:calc(var(--pixel) * 4);
    z-index:3;
    pointer-events:none;

    background:
        /* 왼쪽 노랑 */
        linear-gradient(var(--border-color) 0 0)
        left calc(var(--pixel) * 3) top var(--pixel) /
        var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--border-color) 0 0)
        left calc(var(--pixel) * 2) top calc(var(--pixel) * 2) /
        var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--border-color) 0 0)
        left var(--pixel) top calc(var(--pixel) * 3) /
        var(--pixel) var(--pixel) no-repeat,

        /* 왼쪽 회색 */
        linear-gradient(var(--border-inner) 0 0)
        left calc(var(--pixel) * 3) top calc(var(--pixel) * 2) /
        var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--border-inner) 0 0)
        left calc(var(--pixel) * 2) top calc(var(--pixel) * 3) /
        var(--pixel) var(--pixel) no-repeat,

        /* 오른쪽 노랑 */
        linear-gradient(var(--border-color) 0 0)
        right calc(var(--pixel) * 3) top var(--pixel) /
        var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--border-color) 0 0)
        right calc(var(--pixel) * 2) top calc(var(--pixel) * 2) /
        var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--border-color) 0 0)
        right var(--pixel) top calc(var(--pixel) * 3) /
        var(--pixel) var(--pixel) no-repeat,

        /* 오른쪽 회색 */
        linear-gradient(var(--border-inner) 0 0)
        right calc(var(--pixel) * 3) top calc(var(--pixel) * 2) /
        var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--border-inner) 0 0)
        right calc(var(--pixel) * 2) top calc(var(--pixel) * 3) /
        var(--pixel) var(--pixel) no-repeat;
}

/* 상단 코너 */
.contents-popup .popup-box::before {
    top:0;
}

/* 하단 코너 */
.contents-popup .popup-box::after {
    bottom:0;
    transform:scaleY(-1);
}

/* ========================================
   INNER BACKGROUND
======================================== */

.contents-popup .popup-wrap {
    position:relative;
    z-index:1;
    width:100%;
    background:var(--popup-bg);
}

.contents-popup.ty-3 .popup-box::before,
.contents-popup.ty-3 .popup-box::after {
    display:none;
}

.contents-popup.ty-3 .popup-wrap {
    padding:var(--gap-10) 0;
}

.contents-popup.ty-3 .popup-head {
    position:absolute;
    left:0;
    top:0;
    z-index:100;
    padding:var(--gap-10);
}


.contents-popup .btn-conts-close {
    font-size:0;
    width:1.6rem;
    aspect-ratio:1;
    background:url(../../img/com/icon_close.svg) no-repeat center / cover;
}

.contents-popup.ty-2 .btn-conts-close {
    background-image:url(../../img/com/icon_close_p.svg)
}


.contents-popup .popup-body .popup-conts {
    width:100%;
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:var(--gap-40);
    align-items:center;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    box-sizing:border-box;
}

/* 스크롤바 */
.contents-popup .popup-body .popup-conts::-webkit-scrollbar {
    width:0.3rem;
}

.contents-popup .popup-body .popup-contsx::-webkit-scrollbar-thumb {
    background:var(--key-color);
}


/* TV POPUP */
.contents-popup.popup-tv .popup-box {
    width:min(101rem, 95vw, calc((100dvh - 16rem) * 16 / 9));
    max-height:calc(100dvh - 12rem);
    min-height:0;
}

.contents-popup.popup-tv .popup-wrap,
.contents-popup.popup-tv .popup-body,
.contents-popup.popup-tv .popup-conts {
    min-width:0;
    min-height:0;
}

.contents-popup.popup-tv .popup-conts {
    overflow:hidden;
}

.contents-popup.popup-tv .video-box {
    width:100%;
    max-width:100%;
    aspect-ratio:16/9;
    position:relative;
    flex-shrink:1;
    min-height:0;
}

.contents-popup.popup-tv .video-box video,
.contents-popup.popup-tv .video-box iframe {
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform:none;
    object-fit:contain;
}

.contents-popup.popup-tv .youtube-player {
    width:100%;
    height:100%;
    position:relative;
}

.contents-popup.popup-tv .youtube-thumbnail {
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    padding:0;
    border:0;
    cursor:pointer;
    background:#000;
}

.contents-popup.popup-tv .youtube-thumbnail img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.contents-popup.popup-tv .youtube-play {
    width:6.8rem;
    height:4.8rem;
    background:#ff0033;
    border-radius:1.4rem;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.contents-popup.popup-tv .youtube-play::after {
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-40%,-50%);
    border-top:1rem solid transparent;
    border-bottom:1rem solid transparent;
    border-left:1.7rem solid #fff;
}

.contents-popup.popup-tv .youtube-player iframe {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}



/* ========================================
   TURNTABLE OVERFLOW FIX
======================================== */

.contents-popup.popup-turntable {
    --pink : #FF70A1;
}

.contents-popup.popup-turntable .popup-box {
    width:min(60rem, 95vw);
    max-height:40vh;
}

.contents-popup.popup-turntable .popup-body {
    overflow:visible;
}

.contents-popup.popup-turntable .popup-conts {
    width:min(49rem, 92%);
    margin:0 auto;
    overflow:visible;
}

.contents-popup.popup-turntable .turntable-player {
    --arm-angle:7deg;
    
    width:100%;
    display:flex;
    align-items:center;
    gap:var(--gap-40);
    overflow:visible;
}

.contents-popup.popup-turntable .turntable-visual {
    width:min(14rem, 30%);
    aspect-ratio:1;
    position:relative;
    flex-shrink:0;
    overflow:visible;
}

.contents-popup.popup-turntable .turntable-visual .record {
    width:100%;
    aspect-ratio:1;
    position:absolute;
    left:0;
    top:50%;

    background:url(../../img/main/turntable_recored.svg)
        no-repeat center / contain;

    transform-origin:center center;

    animation:record-spin 3s linear infinite;
    animation-play-state:paused;
    overflow:visible;
}

/* 재생 중 회전 */
.contents-popup.popup-turntable .turntable-player.is-playing .record {
    animation-play-state:running;
}

/* 레코드 회전 */
@keyframes record-spin {
    from {
        transform:translateY(-50%) rotate(0deg);
    }

    to {
        transform:translateY(-50%) rotate(360deg);
    }
}


.contents-popup.popup-turntable .turntable-visual .record-label {
    display:none;
}

.contents-popup.popup-turntable .turntable-visual .tonearm {
    position:absolute;
    right:-16%;
    top:-9%;

    width:35%;
    height:65%;

    background:url('../../img/main/turntable_tonearm.svg') no-repeat center / contain;

    border:0;
    border-radius:0;

    transform-origin:50% 8%;
    transform:rotate(var(--arm-angle));

    transition:transform 0.7s cubic-bezier(.22,1,.36,1);
    z-index:2;
}

.contents-popup.popup-turntable .turntable-visual .tonearm::before,
.contents-popup.popup-turntable .turntable-visual .tonearm::after,
.contents-popup.popup-turntable .turntable-visual .tonearm-head {
    display:none;
}

.contents-popup.popup-turntable .turntable-visual .record,
.contents-popup.popup-turntable .turntable-visual .tonearm {
    image-rendering:pixelated;
}

.contents-popup.popup-turntable .turntable-info {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.contents-popup.popup-turntable .track-info {
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:var(--gap-4);
    font-family:var(--mona);
}


/* ========================================
   TRACK TITLE MARQUEE
======================================== */

.contents-popup.popup-turntable .track-info .track-title {
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    position:relative;
    white-space:nowrap;
    color:var(--pink);
    font-size:var(--fs-24);
    font-weight:700;
}

.contents-popup.popup-turntable .track-title .track-marquee-inner {
    display:flex;
    align-items:center;
    width:max-content;
    gap:3.2rem;
    transform:translateX(0);
    will-change:transform;
}

.contents-popup.popup-turntable .track-title .track-marquee-inner > span {
    display:block;
    flex:0 0 auto;
    width:max-content;
    white-space:nowrap;
}

.contents-popup.popup-turntable .track-title:not(.is-marquee) .track-title-clone {
    display:none;
}

.contents-popup.popup-turntable .track-title.is-marquee .track-marquee-inner {
    animation:track-title-marquee
        var(--marquee-duration, 6s)
        linear
        infinite;
}

@keyframes track-title-marquee {
    from {
        transform:translateX(0);
    }

    to {
        transform:translateX(var(--marquee-distance, 0px));
    }
}



.contents-popup.popup-turntable .track-info .track-artist {
    color:#FFD7E4;
    font-size:var(--fs-18);
}


/* ========================================
   TRACK SEEK - PIXEL BORDER
======================================== */

.contents-popup.popup-turntable .track-progress {
    position:relative;
    width:100%;
    min-width:0;
    margin-top:var(--gap-20);
    display:flex;
    flex-direction:column;
    gap:var(--gap-10);
}

/* 진행바 */
.contents-popup.popup-turntable .track-seek {
    --pixel:0.2rem;

    -webkit-appearance:none;
    appearance:none;

    display:block;
    position:relative;
    z-index:1;

    width:100%;
    height:1rem;
    margin:0;
    padding:0;

    border:0;
    border-radius:0;
    outline:none;
    box-sizing:border-box;

    background:linear-gradient(
        to right,
        #FF70A1 0%,
        #FF70A1 var(--progress, 0%),
        #222222 var(--progress, 0%),
        #222222 100%
    );

    clip-path:polygon(
        var(--pixel) 0,
        calc(100% - var(--pixel)) 0,
        calc(100% - var(--pixel)) var(--pixel),
        100% var(--pixel),
        100% calc(100% - var(--pixel)),
        calc(100% - var(--pixel)) calc(100% - var(--pixel)),
        calc(100% - var(--pixel)) 100%,
        var(--pixel) 100%,
        var(--pixel) calc(100% - var(--pixel)),
        0 calc(100% - var(--pixel)),
        0 var(--pixel),
        var(--pixel) var(--pixel)
    );

    cursor:pointer;
}

/* 픽셀 테두리 */
.contents-popup.popup-turntable .track-progress::before {
    content:'';
    position:absolute;
    left:-0.2rem;
    right:-0.2rem;
    top:-0.2rem;
    height:1.4rem;

    background:#FFD5E4;

    clip-path:polygon(
        0.2rem 0,
        calc(100% - 0.2rem) 0,
        calc(100% - 0.2rem) 0.2rem,
        100% 0.2rem,
        100% calc(100% - 0.2rem),
        calc(100% - 0.2rem) calc(100% - 0.2rem),
        calc(100% - 0.2rem) 100%,
        0.2rem 100%,
        0.2rem calc(100% - 0.2rem),
        0 calc(100% - 0.2rem),
        0 0.2rem,
        0.2rem 0.2rem
    );

    pointer-events:none;
}

/* 기본 슬라이더 핸들 숨김 */
.contents-popup.popup-turntable .track-seek::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:0;
    height:0;
    border:0;
}

.contents-popup.popup-turntable .track-seek::-moz-range-thumb {
    width:0;
    height:0;
    border:0;
}


.contents-popup.popup-turntable .track-time {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#d4d4d4;
    font-size:var(--fs-14);
    font-family:var(--mona);
}



/* ========================================
   TRACK CONTROLS
======================================== */

.contents-popup.popup-turntable .track-control {
    width:min(20rem, 90%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--gap-24);
    margin-top:var(--gap-8);
}

.contents-popup.popup-turntable .track-control button {
    flex-shrink:0;
}

.contents-popup.popup-turntable .track-control .arrow {
    width:var(--size-24);
    aspect-ratio:1;
    position:relative;
}

.contents-popup.popup-turntable .track-control .arrow:before {
    content:'';
    width:100%;
    height:100%;
    background:url(../../img/main/play_arrow.svg) no-repeat center / min(2.2rem, 92%) auto;
    position:absolute;
    left:0;
    top:0;
}

.contents-popup.popup-turntable .track-control .btn-track-next:before {
    transform:scaleX(-1);
}

.contents-popup.popup-turntable .track-control .btn-track-play {
    width:4.7rem;
    aspect-ratio:1;
    background:url(../../img/main/turntable_play.svg) no-repeat center / cover;
}

.contents-popup.popup-turntable .track-control .btn-track-play.is-playing {
    background-image:url(../../img/main/turntable_pause.svg);
}



/* ========================================
   FIXED BACK BUTTON
======================================== */

#scene .scene-back-box {
    position:fixed;
    top:calc(2rem + 4.5rem + 0.8rem);
    left:0;
    width:100%;
    z-index:9999;
    pointer-events:none;
}

#scene .scene-back-box .inner {
    width:95%;
    max-width:183.7rem;
    margin:0 auto;
    display:flex;
}

#scene .scene-back-box,
#scene .scene-back-box .inner {
    pointer-events:none;
}

#scene .scene-back-box .btn-conts-back {
    pointer-events:auto;
}


#scene .scene-back-box .btn-conts-back {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

#scene .scene-back-box.is-active {
    pointer-events:auto;
}

#scene .scene-back-box.is-active .btn-conts-back {
    display:flex;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}



/* ========================================
   ALBUM POPUP
======================================== */

.contents-popup.popup-gallery .popup-wrap,
.contents-popup.popup-gallery .popup-body,
.contents-popup.popup-gallery .popup-conts {
    min-width:0;
    min-height:0;
}

.contents-popup.popup-gallery .popup-box {
    width:min(101rem, 95vw, calc((100dvh - 22rem) * 750 / 480 + 10rem));
    max-height:calc(100dvh - 12rem);
}

.contents-popup.popup-gallery .photo-gallery {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
    justify-content:center;
    align-items:center;
    min-height:0;
}

.contents-popup.popup-gallery .photo-box {
    width:100%;
    display:flex;
    gap:var(--gap-16);
    justify-content:center;
    align-items:center;
    position:relative;
}

.contents-popup.popup-gallery .photo-box .arrow {
    width:var(--size-32);
    aspect-ratio:1;    
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

.contents-popup.popup-gallery .photo-box .arrow:before {
    content:'';
    width:100%;
    height:100%;
    background:url(../../img/main/arrow_gallery.svg) no-repeat center / auto var(--size-20);
    position:absolute;
    left:0;
    top:0;
}

.contents-popup.popup-gallery .photo-box .photo-prev {
    left:0;
}

.contents-popup.popup-gallery .photo-box .photo-next {
    right:0;
}

.contents-popup.popup-gallery .photo-box .photo-next:before {
    transform:scaleX(-1);
}


.contents-popup.popup-gallery .photo-list .item {
    flex:0 0 auto;
    width:100%;
    min-width:0;
    box-sizing:border-box;
}


.contents-popup.popup-gallery .photo-list .item .item-box {
    width:100%;
    aspect-ratio:750/480;
    max-height:calc(100dvh - 30rem);
    position:relative;
    min-width:0;
}

.contents-popup.popup-gallery .photo-list .item .item-box img {
    width:100%;
    height:100%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:block;
    object-fit:contain;
}


@media screen and (max-width: 480px) {
    .contents-popup.popup-gallery .photo-box .arrow {
        width:var(--size-24);
    }
}




/* SWIPER */
.contents-popup.popup-gallery .photo-gallery,
.contents-popup.popup-gallery .photo-gallery .photo-box {
    min-width:0;
}

.contents-popup.popup-gallery .photo-gallery .photo-swiper {
    width:calc(100% - (var(--gap-32) * 2) - (var(--gap-8) * 2));
    min-width:0;
    overflow:hidden;
}

.contents-popup.popup-gallery .photo-gallery .photo-list-wrap {
    display:flex;
    height:100%;
}


.contents-popup.popup-gallery .photo-gallery .photo-count {
    font-family:var(--mona);
    font-size:2.2rem;
    font-weight:700;
    color:#606060;
    position:absolute;
    left:var(--gap-24);
    top:var(--gap-16);
}

.contents-popup.popup-gallery .photo-gallery .photo-count .current {
    color:var(--key-color);
}

.contents-popup.popup-gallery .photo-gallery .swiper-pagination {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.2rem;
    flex-wrap:wrap;
}

.contents-popup.popup-gallery .photo-gallery .swiper-pagination .swiper-pagination-bullet {
    width:var(--size-10);
    aspect-ratio:1;
    display:block;
    font-size:0;
    background:url(../../img/main/gallery_dot.svg) no-repeat center / cover;
}

.contents-popup.popup-gallery .photo-gallery .swiper-pagination .swiper-pagination-bullet-active {
    background-image:url(../../img/main/gallery_dot_active.svg);
}

.contents-popup.popup-gallery .photo-gallery .photo-actions {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--gap-16);
}

.contents-popup.popup-gallery .photo-gallery .photo-actions button {
    width:2.8rem;
    aspect-ratio:1;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.contents-popup.popup-gallery .photo-gallery .photo-actions .btn-photo-zoom {
    background-image:url(../../img/main/icon_zoom.svg);
}

.contents-popup.popup-gallery .photo-gallery .photo-actions .btn-photo-download {
    background-image:url(../../img/main/icon_download.svg);
}


.contents-popup.popup-gallery .photo-gallery.is-single .photo-count,
.contents-popup.popup-gallery .photo-gallery.is-single .swiper-pagination,
.contents-popup.popup-gallery .photo-gallery.is-single .photo-prev,
.contents-popup.popup-gallery .photo-gallery.is-single .photo-next {
    display:none !important;
}




@media screen and (max-width: 480px) {
    #scene .scene-back-box {
        top:calc(2.5rem + 3.6rem + 0.8rem);
    }

    .contents-popup.popup-gallery .photo-gallery .photo-swiper {
        width:calc(100% - (var(--gap-24) * 2) - (0.5rem * 2));
    }
}




/* ========================================
   PHOTO ZOOM
======================================== */

.photo-zoom-layer {
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100dvh;
    padding:3rem;
    box-sizing:border-box;
    background:rgba(0,0,0,.92);
    overflow:hidden;
}

.photo-zoom-inner {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    overflow:hidden;
    touch-action:none;
}

.photo-zoom-inner img {
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    transform-origin:center center;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    will-change:transform;
}

.btn-photo-zoom-close {
    position:absolute;
    top:0;
    right:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    width:4rem;
    height:4rem;
    background:url(../../img/com/icon_close.svg) no-repeat center / 50% auto;
    cursor:pointer;
    touch-action:manipulation;
}





/* ========================================
   COMMON POPUP
======================================== */

.contents-popup.popup-com .popup-body {
    display:flex;
    flex-direction:column;
    gap:var(--gap-32);
}

.contents-popup.popup-com .popup-title {
    width:100%;
    text-align:center;
}

.contents-popup.popup-com .popup-title span {
    display:inline-block;
    font-family:var(--noto);
    font-size:var(--fs-20);
    font-weight:500;
    color:var(--key-color);
    padding:0 1rem 0.5rem 1rem;
    position:relative;
}

.contents-popup.popup-com .popup-title span:after {
    content:'';
    width:100%;
    height:0.2rem;
    background:var(--key-color);
    position:absolute;
    left:0;
    bottom:0;
}


/* ========================================
   COMMON POPUP CONTENTS
======================================== */

.contents-popup.popup-com .popup-conts {
    width:100%;
    min-height:0;
    flex:1 1 auto;
    display:block;
    background:var(--gray-1);
    padding:0;
    overflow-y:auto;
    overflow-x:hidden;
    box-sizing:border-box;
}

/* 내부 콘텐츠 */
.contents-popup.popup-com .popup-conts-box {
    width:100%;
    min-height:0;
    padding:var(--gap-40);
    box-sizing:border-box;
}

/* 하단 고정 여백 */
.contents-popup.popup-com .popup-conts {
    position:relative;
}

.contents-popup.popup-com .popup-conts::before {
    content:'';
    display:block;
    position:sticky;
    top:0;
    width:100%;
    height:var(--gap-40);
    margin-top:calc(-1 * var(--gap-40));
    background:var(--gray-1);
    pointer-events:none;
}

.contents-popup.popup-com .popup-conts::after {
    content:'';
    display:block;
    position:sticky;
    bottom:0;
    width:100%;
    height:var(--gap-40);
    margin-top:calc(-1 * var(--gap-40));
    background:var(--gray-1);
    pointer-events:none;
}

/* 스크롤바 */
.contents-popup.popup-com .popup-conts::-webkit-scrollbar {
    width:0.3rem;
}

.contents-popup.popup-com .popup-conts::-webkit-scrollbar-track {
    background:transparent;
}

.contents-popup.popup-com .popup-conts::-webkit-scrollbar-thumb {
    background:var(--key-color);
}



/* ========================================
   GUIDE POPUP
======================================== */

.contents-popup.popup-event .popup-wrap,
.contents-popup.popup-event .popup-body,
.contents-popup.popup-event .popup-conts {
    min-width:0;
    min-height:0;
}

.contents-popup.popup-event .popup-box {
    width:min(91rem, 95vw);
    max-height:min(80rem, 70vh);
}

.contents-popup.popup-event .event-wrap {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-32);
}

.contents-popup.popup-event .event-wrap .row {
    width:100%;
    display:flex;
    gap:var(--gap-16);
}

.contents-popup.popup-event .event-wrap .event-item {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
}

.contents-popup.popup-event .event-wrap .event-item .basic-txt {
    font-family:var(--noto);
    font-size:var(--fs-16);
    color:#CDCDCD;
}

.contents-popup.popup-event .event-wrap .event-item .note {
    font-family:var(--noto);
    font-size:1.2rem;
    margin-top:var(--gap-24);
    color:#838383;
    text-align:center;
}

.contents-popup.popup-event .event-wrap .event-item .item-head {
    width:100%;
    display:flex;
    gap:var(--gap-16);
    align-items:flex-start;
    color:var(--gray-f4);
    font-family:var(--noto);
    font-size:var(--fs-16);
}

.contents-popup.popup-event .event-wrap .event-item .item-head .head {
    font-weight:600;
    position:relative;
    padding-left:var(--gap-10);
    flex:0 0 auto;
    width:max-content;
    white-space:nowrap;
}

.contents-popup.popup-event .event-wrap .event-item .item-head .head:before {
    content:'';
    width:var(--size-2);
    height:60%;
    background:var(--gray-f4);
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
}

.contents-popup.popup-event .event-wrap .event-item .item-head .desc {
    flex:1 1 0;
    min-width:0;
    overflow-wrap:break-word;
}

.contents-popup.popup-event .event-wrap .event-reward {
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:var(--gap-50);
}

.contents-popup.popup-event .event-wrap .event-reward .reward-box {
    flex:1 1 auto;
    max-width:32rem;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);    
}

.contents-popup.popup-event .event-wrap .event-reward .reward-box .img-box {
    width:100%;
    position:relative;
}

.contents-popup.popup-event .event-wrap .event-reward .reward-box .img-box:before {
    content:'';
    width:100%;
    height:100%;
    box-sizing:border-box;
    border:0.5rem solid var(--key-color);
    position:absolute;
    left:0;
    top:0;
}

.contents-popup.popup-event .event-wrap .event-reward .reward-box .img-box img {
    display:block;
    width:100%;
}

.contents-popup.popup-event .event-wrap .event-reward .reward-box .desc {
    width:100%;
    text-align:center;
    font-family:var(--noto);
    font-size:var(--fs-16);
    font-weight:500;
    color:var(--key-color);
}

.contents-popup.popup-event .event-wrap .event-item .item-conts:has(.event-step) {
    width:100%;
    display:flex;
    align-items:stretch;
    gap:var(--gap-40);
}

.contents-popup.popup-event .event-wrap .event-item .item-conts .conts-wrap {
    width:100%;
    display:flex;
    flex-direction:column;
}

.contents-popup.popup-event .event-wrap .event-step {
    flex:1 1 0;
    min-width:0;
    display:flex;
    align-items:stretch;
    gap:var(--gap-40);
}

.contents-popup.popup-event .event-wrap .event-step .step-box {
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
    font-family:var(--noto);
    position:relative;
}

.contents-popup.popup-event .event-wrap .event-step .step-box .img-box {
    width:100%;
    border:1px solid #4B4B4B;
    position:relative;
}

.contents-popup.popup-event .event-wrap .event-step .step-box .img-box:before {
    content:'';
    width:var(--gap-40);
    height:100%;
    background:url(../../img/main/arrow_step.svg) no-repeat center / 18% auto;
    position:absolute;
    right:calc(var(--gap-40) * -1);
    top:0;
}

.contents-popup.popup-event .event-wrap .event-step .step-box:last-child .img-box:before {
    display:none;
}

.contents-popup.popup-event .event-wrap .event-step .step-box .img-box span {
    display:block;
    width:100%;
    aspect-ratio:221/141;
    position:relative;
}

.contents-popup.popup-event .event-wrap .event-step .step-box .img-box span img {
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    object-fit:cover;
}

.contents-popup.popup-event .event-wrap .event-step .step-box .conts-box {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--gap-10);
    font-family:var(--noto);
    color:var(--gray-c);
}

.contents-popup.popup-event .event-wrap .event-step .step-box .conts-box .label {
    width:fit-content;
    height:2.7rem;
    padding:0 1.2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:99rem;
    border:1px solid #4B4B4B;
    font-size:var(--fs-14);
    font-weight:500;
}

.contents-popup.popup-event .event-wrap .event-step .step-box .conts-box .desc {
    width:100%;
    font-size:var(--fs-15);
    line-height:1.6;
    min-height:4.8em; /* 1.6 × 3줄 */
    color:#CDCDCD;
    text-align:center;
}

.contents-popup.popup-event .event-wrap .event-step .step-box .conts-box .action {
    width:100%;
    margin-top:var(--gap-10);
    display:flex;
    justify-content:center;
}

.contents-popup.popup-event .event-wrap .event-step .step-box:last-child .conts-box .action {
    position:absolute;
    left:0;
    bottom:0;
}

.contents-popup.popup-event .event-wrap .event-step .step-box .conts-box .action button {
    width:fit-content;
    padding:0 1.8rem;
    height:3rem;
    background:var(--key-color);
    color:var(--gray-1);
    font-size:var(--fs-15);
    font-weight:600;
    font-family:var(--noto);
    display:flex;
    align-items:center;
    gap:var(--gap-8);
    justify-content:center;
}

.contents-popup.popup-event .event-wrap .event-step .step-box .conts-box .action button .arrow {
    width:var(--size-20);
    aspect-ratio:1;
    background:url(../../img/main/btn_arrow.svg) no-repeat center / cover;
}

.contents-popup.popup-event .popup-action {
    display:flex;
    justify-content:center;
}

.contents-popup.popup-event .btn-notice {
    font-family:var(--noto);
    font-size:var(--fs-15);
    color:#A2A2A2;
}

.contents-popup.popup-event .btn-notice span {
    position:relative;
    padding:0.5rem 0;
}

.contents-popup.popup-event .btn-notice span:after {
    content:'';
    width:100%;
    height:1px;
    background:#A2A2A2;
    position:absolute;
    left:0;
    bottom:0;
}


@media screen and (max-width: 648px) {
    .contents-popup.popup-event .event-wrap .row {
        flex-direction:column;
        gap:var(--gap-32);
    }

    .contents-popup.popup-event .event-wrap .event-reward {
        flex-direction:column;
        gap:var(--gap-24);
        justify-content:center;
        align-items:center;
    }

    .contents-popup.popup-event .event-wrap .event-step {
        flex-direction:column;
        align-items:center;
    }

    .contents-popup.popup-event .event-wrap .event-step .step-box .img-box:before {
        display:none;
    }
    
    .contents-popup.popup-event .event-wrap .event-step .step-box {
        width:100%;
        max-width:22rem;
    }

    .contents-popup.popup-event .event-wrap .event-step .step-box .conts-box .desc {
        min-height:0;
    }

    .contents-popup.popup-event .event-wrap .event-step .step-box:last-child .conts-box .action {
        position:relative;
        left:auto;
        bottom:auto;
    }
}


/* ========================================
   GUIDE POPUP
======================================== */

.contents-popup.popup-notice .popup-wrap,
.contents-popup.popup-notice .popup-body,
.contents-popup.popup-notice .popup-conts {
    min-width:0;
    min-height:0;
}

.contents-popup.popup-notice .popup-box {
    width:min(91rem, 95vw);
    max-height:min(77rem, 70vh);
}


/* 유의사항 팝업 기본 숨김 */
.contents-popup.popup-notice {
    display:none;
}

/* 유의사항 팝업 활성화 */
.contents-popup.popup-notice.is-active {
    display:flex;
}

.contents-popup.popup-notice .notice-wrap {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
    align-items:center;
    font-family:var(--noto);
}

.contents-popup.popup-notice .notice-wrap .head {
    font-size:var(--fs-18);
    font-weight:500;
    color:var(--key-color);
}

.contents-popup.popup-notice .notice-wrap .notice-conts {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-24);
}

.contents-popup.popup-notice .notice-wrap .notice-conts .notice-item {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-10);
}

.contents-popup.popup-notice .notice-wrap .notice-conts .notice-item .head {
    width:100%;
    font-size:var(--fs-16);
    font-weight:600;
    color:var(--gray-c);
    font-family:var(--noto);
    color:var(--key-color);
}

.contents-popup.popup-notice .notice-wrap .notice-conts .notice-list {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    font-size:var(--fs-15);
    color:var(--gray-c);
    font-family:var(--noto);
}

.contents-popup.popup-notice .notice-wrap .notice-conts .notice-list li {
    position:relative;
    padding-left:var(--gap-10);
}

contents-popup.popup-notice .notice-wrap .notice-conts .notice-list li a {
    font-family:var(--noto);
    font-size:var(--fs-15);
    text-decoration:underline;
}

.contents-popup.popup-notice .notice-wrap .notice-conts .notice-list li:before {
    content:'';
    width:0.3rem;
    aspect-ratio:1;
    border-radius:50%;
    background:var(--gray-c);
    position:absolute;
    left:0;
    top:calc(1lh / 2);
    transform:translateY(-50%);
}



.contents-popup.popup-share .popup-wrap,
.contents-popup.popup-share .popup-body,
.contents-popup.popup-share .popup-conts {
    min-width:0;
    min-height:0;
}

.contents-popup.popup-share .popup-box {
    width:min(43.5rem, 95vw);
    max-height:min(35rem, 50vh);
}

.contents-popup.popup-share {
    display:none;
}

.contents-popup.popup-share.is-active {
    display:flex;
}

.contents-popup.popup-share .popup-conts {
    background:transparent;
}

.contents-popup.popup-share .popup-conts:before,
.contents-popup.popup-share .popup-conts:after {
    display:none;
}

.contents-popup.popup-share .popup-conts-box {
    padding:var(--gap-32) 0;
}

.contents-popup.popup-share .share-wrap {
    width:100%;
    display:flex;
    gap:var(--gap-24);
    align-items:stretch;
    justify-content:center;
}

.contents-popup.popup-share .share-wrap .share-box {
    flex:1 1 0;
    min-width:0;
    max-width:8rem;
    display:flex;
    flex-direction:column;
    gap:var(--gap-8);
}

.contents-popup.popup-share .share-wrap .share-box button {
    width:100%;
    aspect-ratio:1;
    background-repeat:no-repeat;
    background-position:center;
    background-size:50% auto;
    background-color:var(--black);
}

.contents-popup.popup-share .share-wrap .share-box .btn-instagram-share {
    background-image:url(../../img/com/share_instagram.svg);
}

.contents-popup.popup-share .share-wrap .share-box .btn-x-share {
    background-image:url(../../img/com/share_x.svg);
}

.contents-popup.popup-share .share-wrap .share-box .btn-link-share {
    background-image:url(../../img/com/share_link.svg);
}

.contents-popup.popup-share .share-wrap .share-box .btn-weibo-share {
    background-image:url(../../img/com/share_weibo.svg);
}

.contents-popup.popup-share .share-wrap .share-box .btn-bilibili-share {
    background-image:url(../../img/com/share_bilibili.svg);
}

.contents-popup.popup-share .share-wrap .share-box .btn-heybox-share {
    background-image:url(../../img/com/share_heybox.svg);
}

.contents-popup.popup-share .share-wrap .share-box .btn-douyin-share {
    background-image:url(../../img/com/share_douyin.svg);
}

.contents-popup.popup-share .share-wrap .share-box .btn-xiaohongshu-share {
    background-image:url(../../img/com/share_xiaohongshu.svg);
}

.contents-popup.popup-share .share-wrap .share-box .btn-facebook-share {
    background-image:url(../../img/com/share_facebook.svg?v=2);
    background-size:70% auto;
}

.contents-popup.popup-share .share-wrap .share-box .txt {
    width:100%;
    text-align:center;
    font-size:1.1rem;
    font-weight:500;
    color:var(--white);
    font-family:var(--noto);
}

html[lang="ko"] .contents-popup.popup-share .share-wrap .share-box .txt {
    font-size:var(--fs-16);
}






/* 팝업 드래그 위치 보정 제거: 팝업은 뷰포트 중앙에 고정 */


/* ========================================
   ROOM TOGGLE IMAGES
======================================== */

.main .scene-toggle-images {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}

.main .scene-change-img {
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.main .scene-change-img.is-active {
    opacity:1;
    visibility:visible;
}

/* ========================================
   ROOM TOGGLE BUTTONS
======================================== */

.main .scene-object.scene-toggle {
    background:transparent;
    cursor:pointer;
    z-index:2;
}

/* Toggle buttons do not use focus icons */
.main .scene-object.scene-toggle::before {
    display:none;
}







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

#scene > .scene-detail {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    width:100dvw;
    height:100dvh;
    margin:0;
    transform:none;
    pointer-events:none;
    z-index:1000;
}

#scene > .scene-detail .detail-forward,
#scene > .scene-detail .detail-back {
    display:none !important;
}

#scene > .scene-detail .detail-result {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    transform:none;
    pointer-events:none;
    visibility:hidden;
    opacity:0;
}

#scene > .scene-detail .detail-result.is-active {
    display:flex;
    align-items:center;
    justify-content:center;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

#scene > .scene-detail .detail-result .detail-content {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

#scene > .scene-detail .detail-content .contents-popup {
    transform:none;
}


.main .bgm-box {
    display: none;
}

/* ========================================
   BOX EVENT SHARE / NOTICE OVERLAY
======================================== */

/* EVENT 팝업 */
#scene .scene-detail[data-id="box"] .popup-event {
    position:relative;
    z-index:1;
}

/* SHARE / NOTICE 팝업 */
#scene .scene-detail[data-id="box"] .popup-share,
#scene .scene-detail[data-id="box"] .popup-notice {
    display:none;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:10;
    align-items:center;
    justify-content:center;
}

/* SHARE / NOTICE 활성화 */
#scene .scene-detail[data-id="box"] .popup-share.is-active,
#scene .scene-detail[data-id="box"] .popup-notice.is-active {
    display:flex;
}

/* EVENT 위에 딤 */
#scene .scene-detail[data-id="box"] .popup-share::before,
#scene .scene-detail[data-id="box"] .popup-notice::before {
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
    z-index:0;
    pointer-events:none;
}

/* SHARE / NOTICE 팝업 박스 */
#scene .scene-detail[data-id="box"] .popup-share .popup-box,
#scene .scene-detail[data-id="box"] .popup-notice .popup-box {
    position:relative;
    z-index:1;
}



/* MAIN 드래그 시 브라우저 기본 동작 방지 */
.main .scene-stage,
.main .scene-stage * {
    -webkit-user-select:none;
    user-select:none;
    -webkit-user-drag:none;
}

.main .scene-stage {
    touch-action:pan-y;
    cursor:grab;
}

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

.main .scene-stage img {
    -webkit-user-drag:none;
    user-drag:none;
}

/* 일반 팝업이 열릴 때만 헤더 숨김 */
body:has(
    #scene .scene-detail:not([data-id="room"])
    > .detail-result.is-active
) header {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* BACK 버튼의 넓은 투명 영역은 클릭 통과 */
#scene .scene-back-box,
#scene .scene-back-box.is-active {
    pointer-events: none;
}

/* 실제 BACK 버튼만 클릭 가능 */
#scene .scene-back-box .btn-back,
#scene .scene-back-box .btn-detail-back {
    pointer-events: auto;
}


/* ========================================
   SHARE LANGUAGE
======================================== */

/* 기본 언어: 중국 SNS 숨김 */
.contents-popup.popup-share .share-wrap .share-box.share-china {
    display: none !important;
}

/* 중국어: Instagram, X 숨김 */
html:is([lang="zh-CN"])
.contents-popup.popup-share .share-wrap .share-box.share-default {
    display: none !important;
}

/* 중국어: 중국 SNS 표시 */
html:is([lang="zh-CN"])
.contents-popup.popup-share .share-wrap .share-box.share-china {
    display: flex !important;
}

/* 중국어 팝업 */
html:is([lang="zh-CN"])
.contents-popup.popup-share .popup-box {
    max-height: 60vh;
}

/* 중국어 공유 버튼 3열 반응형 */
html:is([lang="zh-CN"])
.contents-popup.popup-share .share-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.5vw, 1rem);
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
}

/* 중국어 공유 버튼 */
html:is([lang="zh-CN"])
.contents-popup.popup-share .share-wrap .share-box {
    width: 100%;
    min-width: 0;
    flex: none;
}

/* 중국어 공유 아이콘 */
html:is([lang="zh-CN"])
.contents-popup.popup-share .share-wrap .share-box button {
    width: 100%;
    max-width: 8rem;
    aspect-ratio: 1;
    height: auto;
}

/* ROOM 진입 영상 첫 프레임 준비 전 숨김 */
#scene .scene-detail .detail-forward.is-active.is-frame-pending {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 첫 프레임 준비 후 표시 */
#scene .scene-detail .detail-forward.is-active:not(.is-frame-pending) {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ========================================
   COMPUTER NOTICE POPUP
======================================== */

#scene .scene-detail[data-id="computer"] .popup-notice {
    display:none;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:10;
    align-items:center;
    justify-content:center;
}

#scene .scene-detail[data-id="computer"] .popup-notice.is-active {
    display:flex;
}

#scene .scene-detail[data-id="computer"] .popup-notice::before {
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
    z-index:0;
    pointer-events:none;
}

#scene .scene-detail[data-id="computer"] .popup-notice .popup-box {
    position:relative;
    z-index:1;
}

.popup-share.is-camera-share .share-box {
    display: none;
}

.popup-share.is-camera-share .share-camera,
.popup-share.is-camera-share .share-box:has(.btn-x-share),
.popup-share.is-camera-share .share-box:has(.btn-link-share) {
    display: block;
}