/*공통*/
#wrap {width:100%; position:relative;}

header {width:100%; position:fixed; left:0; top:2rem; z-index:1000;}

@media screen and (max-width: 480px) {
    header {top:1.5rem;}
}


header .header-wrap {width:95%; max-width:183.7rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between;}
header .header-box {display:flex; align-items:center; gap:var(--gap-4);}

@media screen and (max-width: 480px) {
    header .header-wrap {
        align-items:flex-start;
    }

    header .header-box.lf {
        /*flex-direction:column;*/
        gap:0.6rem;
        align-items:flex-start;
    }
}

/* 헤더의 빈 영역은 드래그 통과 */
header,
header .header-wrap,
header .header-box,
header .header-item,
header .item-box {
    pointer-events:none;
}

/* 실제 클릭하는 버튼만 활성화 */
header button,
header a,
header input,
header .music-progress {
    pointer-events:auto;
}



header .header-item {
    --corner-size:1.3rem;
    --pixel:calc(var(--corner-size) / 9);
    --cut:calc(var(--corner-size) * 10 / 18);
    --yellow:var(--key-color);
    --gray:var(--gray-2d);
    --bg:var(--gray-2);

    width:fit-content;
    min-width:calc(var(--corner-size) * 2);
    height:4.5rem;
    padding:0 var(--corner-size);
    position:relative;
    box-sizing:border-box;

    filter:drop-shadow(0 var(--size-4) 0 var(--black));
}
header .header-item:before {
    content:'';
    position:absolute;
    inset:0;
    background:var(--bg);
    clip-path:polygon(
        var(--cut) 0,
        calc(100% - var(--cut)) 0,
        calc(100% - var(--cut)) var(--pixel),
        calc(100% - var(--pixel) * 3) var(--pixel),
        calc(100% - var(--pixel) * 3) calc(var(--pixel) * 3),
        100% var(--cut),
        100% calc(100% - var(--cut)),
        calc(100% - var(--pixel) * 3) calc(100% - var(--pixel) * 3),
        calc(100% - var(--pixel) * 3) calc(100% - var(--pixel)),
        calc(100% - var(--cut)) calc(100% - var(--pixel)),
        calc(100% - var(--cut)) 100%,
        var(--cut) 100%,
        var(--cut) calc(100% - var(--pixel)),
        calc(var(--pixel) * 3) calc(100% - var(--pixel)),
        calc(var(--pixel) * 3) calc(100% - var(--pixel) * 3),
        0 calc(100% - var(--cut)),
        0 var(--cut),
        calc(var(--pixel) * 3) calc(var(--pixel) * 3),
        calc(var(--pixel) * 3) var(--pixel),
        var(--cut) var(--pixel)
    );
}

header .header-item .item-box {
    height:100%;
    display:flex;
    align-items:center;
    position:relative;
    z-index:10;
}
header .header-item .corner {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    pointer-events:none;

    background:
        /* 상단 */
        linear-gradient(var(--yellow) 0 0)
        center top / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--gray) 0 0)
        center var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--black) 0 0)
        center calc(var(--pixel) * 2) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 하단 */
        linear-gradient(var(--yellow) 0 0)
        center bottom / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--gray) 0 0)
        center bottom var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--black) 0 0)
        center bottom calc(var(--pixel) * 2) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 좌측 */
        linear-gradient(var(--yellow) 0 0)
        left center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--gray) 0 0)
        var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--black) 0 0)
        calc(var(--pixel) * 2) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        /* 우측 */
        linear-gradient(var(--yellow) 0 0)
        right center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--gray) 0 0)
        right var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--black) 0 0)
        right calc(var(--pixel) * 2) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat;
}

header .header-item .corner span {display:block; width:100%; height:50%; position:absolute; left:0;}
header .header-item .corner span:before,
header .header-item .corner span:after {content:''; width:var(--corner-size); height:var(--corner-size); background:url(../../img/com/gnb_corner.svg) no-repeat center / 100% 100%; position:absolute; z-index:2;}

header .header-item .corner span:first-child {top:0;}
header .header-item .corner span:first-child:before {left:0; top:0;}
header .header-item .corner span:first-child:after {right:0; top:0; transform:scaleX(-1);}

header .header-item .corner span:last-child {bottom:0;}
header .header-item .corner span:last-child:before {left:0; bottom:0; transform:scaleY(-1);}
header .header-item .corner span:last-child:after {right:0; bottom:0; transform:scale(-1);}

header .header-item.ty-2 {
    --yellow:var(--gray-2);
    --gray:var(--key-color);
    --bg:var(--key-color);
    --dark-yellow:#CEA100;
}

header .header-item.ty-2 .corner {
    background:
        /* 상단 */
        linear-gradient(var(--yellow) 0 0)
        center top / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--gray) 0 0)
        center var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--dark-yellow) 0 0)
        center calc(var(--pixel) * 2) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 하단 */
        linear-gradient(var(--yellow) 0 0)
        center bottom / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--gray) 0 0)
        center bottom var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--dark-yellow) 0 0)
        center bottom calc(var(--pixel) * 2) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 좌측 */
        linear-gradient(var(--yellow) 0 0)
        left center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--gray) 0 0)
        var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--dark-yellow) 0 0)
        calc(var(--pixel) * 2) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        /* 우측 */
        linear-gradient(var(--yellow) 0 0)
        right center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--gray) 0 0)
        right var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--dark-yellow) 0 0)
        right calc(var(--pixel) * 2) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat;
}

header .header-item.ty-2 .corner span:before,
header .header-item.ty-2 .corner span:after {
    background-image:url(../../img/com/gnb_corner_2.svg);
}

@media screen and (max-width: 480px) {
    header .header-item {height:4.2rem;}
}




header .logo {width:10rem; height:100%; background:url(../../img/com/logo.svg) no-repeat center / 80% auto; font-size:0;}

/*@media screen and (max-width: 480px) {
    header .logo {width:7.6rem; background-size:100% auto;}
}*/



/* 모바일 헤더 레이아웃 보정 */
@media screen and (max-width: 768px) {

    header {
        left: 0;
        right: 0;
        width: 100%;
    }

    header .header-wrap {
        width: 95%;
        max-width: none;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    header .header-box {
        min-width: 0;
    }

    header .header-box.lf {
        flex-shrink: 0;
    }

    header .header-box.rt {
        flex-shrink: 0;
        margin-left: auto;
    }

    header .header-utility {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

}




.com-bx {
    --corner-size:1.3rem;
    --pixel:calc(var(--corner-size) / 9);
    --cut:calc(var(--corner-size) * 10 / 18);
    --yellow:var(--key-color);
    --gray:var(--gray-2d);
    --bg:var(--gray-2);

    width:fit-content;
    padding:0 var(--corner-size);
    position:relative;
    box-sizing:border-box;
    filter:drop-shadow(0 var(--size-4) 0 var(--black));
}

.com-bx:before {
    content:'';
    position:absolute;
    inset:0;
    clip-path:polygon(
        var(--cut) 0,
        calc(100% - var(--cut)) 0,
        calc(100% - var(--cut)) var(--pixel),
        calc(100% - var(--pixel) * 3) var(--pixel),
        calc(100% - var(--pixel) * 3) calc(var(--pixel) * 3),
        100% var(--cut),
        100% calc(100% - var(--cut)),
        calc(100% - var(--pixel) * 3) calc(100% - var(--pixel) * 3),
        calc(100% - var(--pixel) * 3) calc(100% - var(--pixel)),
        calc(100% - var(--cut)) calc(100% - var(--pixel)),
        calc(100% - var(--cut)) 100%,
        var(--cut) 100%,
        var(--cut) calc(100% - var(--pixel)),
        calc(var(--pixel) * 3) calc(100% - var(--pixel)),
        calc(var(--pixel) * 3) calc(100% - var(--pixel) * 3),
        0 calc(100% - var(--cut)),
        0 var(--cut),
        calc(var(--pixel) * 3) calc(var(--pixel) * 3),
        calc(var(--pixel) * 3) var(--pixel),
        var(--cut) var(--pixel)
    );
}

.com-bx .item-box {
    height:100%;
    display:flex;
    align-items:center;
    z-index:10;
}

.com-bx .corner {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    pointer-events:none;
}

.com-bx .corner span {display:block; width:100%; height:50%; position:absolute; left:0;}
.com-bx .corner span:before,
.com-bx .corner span:after {content:''; width:var(--corner-size); height:var(--corner-size); background-repeat:no-repeat; background-position:center; background-size:100% 100%; position:absolute; z-index:2;}

.com-bx .corner span:first-child {top:0;}
.com-bx .corner span:first-child:before {left:0; top:0;}
.com-bx .corner span:first-child:after {right:0; top:0; transform:scaleX(-1);}

.com-bx .corner span:last-child {bottom:0;}
.com-bx .corner span:last-child:before {left:0; bottom:0; transform:scaleY(-1);}
.com-bx .corner span:last-child:after {right:0; bottom:0; transform:scale(-1);}

.com-bx .item-box .icon {width:100%; height:100%; position:absolute; left:0; top:0; z-index:20;}
.com-bx .item-box .text {font-size:0; opacity:0; visibility:hidden;}



.bx-1:before {
    background:var(--bg);
}

.bx-1 .corner {
    background:
        /* 상단 */
        linear-gradient(var(--yellow) 0 0)
        center top / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--gray) 0 0)
        center var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--black) 0 0)
        center calc(var(--pixel) * 2) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 하단 */
        linear-gradient(var(--yellow) 0 0)
        center bottom / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--gray) 0 0)
        center bottom var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--black) 0 0)
        center bottom calc(var(--pixel) * 2) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 좌측 */
        linear-gradient(var(--yellow) 0 0)
        left center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--gray) 0 0)
        var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--black) 0 0)
        calc(var(--pixel) * 2) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        /* 우측 */
        linear-gradient(var(--yellow) 0 0)
        right center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--gray) 0 0)
        right var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--black) 0 0)
        right calc(var(--pixel) * 2) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat;
}

.bx-1 .corner span:before,
.bx-1 .corner span:after {background-image:url(../../img/com/bx_corner_01.svg);}


.bx-2:before {
    background:var(--yellow);
}

.bx-2 .corner {
    --yellow-dark : #CEA100;
    background:
        /* 상단 */
        linear-gradient(var(--bg) 0 0)
        center top / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--yellow) 0 0)
        center var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--yellow-dark) 0 0)
        center calc(var(--pixel) * 2) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 하단 */
        linear-gradient(var(--bg) 0 0)
        center bottom / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--yellow) 0 0)
        center bottom var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--yellow-dark) 0 0)
        center bottom calc(var(--pixel) * 2) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 좌측 */
        linear-gradient(var(--bg) 0 0)
        left center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--yellow) 0 0)
        var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--yellow-dark) 0 0)
        calc(var(--pixel) * 2) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        /* 우측 */
        linear-gradient(var(--bg) 0 0)
        right center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--yellow) 0 0)
        right var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--yellow-dark) 0 0)
        right calc(var(--pixel) * 2) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat;
}

.bx-2 .corner span:before,
.bx-2 .corner span:after {background-image:url(../../img/com/bx_corner_02.svg);}


.bx-3 {
    --p:.1rem;
    --bx-black:#000;
    --bx-border:#b1b1b1;
    --bx-bg:#535353;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    height:6.4rem;
    position:relative;
    flex-shrink:0;
    box-sizing:border-box;
    border:0;
    border-radius:0;
    background:none;
    color:#fff;
    font-size:0;
    appearance:none;
    cursor:pointer;
}

/* 스타일 영역 */
.bx-3 .btn-style {
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        /* 상단 검정 */
        linear-gradient(var(--bx-black) 0 0)
        center top /
        calc(100% - var(--p) * 11)
        var(--p) no-repeat,

        /* 하단 검정 */
        linear-gradient(var(--bx-black) 0 0)
        center bottom /
        calc(100% - var(--p) * 11)
        var(--p) no-repeat,

        /* 상단 연회색 */
        linear-gradient(var(--bx-border) 0 0)
        center var(--p) /
        calc(100% - var(--p) * 11)
        calc(var(--p) * 2) no-repeat,

        /* 하단 연회색 */
        linear-gradient(var(--bx-border) 0 0)
        center bottom var(--p) /
        calc(100% - var(--p) * 11)
        calc(var(--p) * 2) no-repeat,

        /* 왼쪽 검정 */
        linear-gradient(var(--bx-black) 0 0)
        left center /
        calc(var(--p) * 1.5)
        calc(100% - var(--p) * 10) no-repeat,

        /* 오른쪽 검정 */
        linear-gradient(var(--bx-black) 0 0)
        right center /
        calc(var(--p) * 1.5)
        calc(100% - var(--p) * 10) no-repeat,

        /* 왼쪽 연회색 */
        linear-gradient(var(--bx-border) 0 0)
        left calc(var(--p) * 1.5) center /
        calc(var(--p) * 2)
        calc(100% - var(--p) * 10) no-repeat,

        /* 오른쪽 연회색 */
        linear-gradient(var(--bx-border) 0 0)
        right calc(var(--p) * 1.5) center /
        calc(var(--p) * 2)
        calc(100% - var(--p) * 10) no-repeat,

        /* 내부 진회색 */
        linear-gradient(var(--bx-bg) 0 0)
        center /
        calc(100% - var(--p) * 5)
        calc(100% - var(--p) * 6) no-repeat;
}

/* 모서리 공통 */
.bx-3 .btn-corner {
    position:absolute;
    left:0;
    width:100%;
    height:50%;
    pointer-events:none;
}

.bx-3 .btn-corner.top {
    top:0;
}

.bx-3 .btn-corner.bottom {
    bottom:0;
}

/* 모서리 픽셀 */
.bx-3 .btn-corner::before,
.bx-3 .btn-corner::after {
    content:"";
    position:absolute;
    width:calc(var(--p) * 4);
    height:calc(var(--p) * 4);

    background:
        /* 바깥 검정 계단 */
        linear-gradient(var(--bx-black) 0 0)
        right top /
        calc(var(--p) * 2)
        calc(var(--p) * 2) no-repeat,

        linear-gradient(var(--bx-black) 0 0)
        left bottom /
        calc(var(--p) * 2)
        calc(var(--p) * 2) no-repeat,

        /* 안쪽 연회색 */
        linear-gradient(var(--bx-border) 0 0)
        right bottom /
        calc(var(--p) * 2)
        calc(var(--p) * 2) no-repeat;
}

/* 왼쪽 / 오른쪽 */
.bx-3 .btn-corner::before {
    left:calc(var(--p) * 1.5);
}

.bx-3 .btn-corner::after {
    right:calc(var(--p) * 1.5);
    transform:scaleX(-1);
}

/* 상단 */
.bx-3 .btn-corner.top::before,
.bx-3 .btn-corner.top::after {
    top:var(--p);
}

/* 하단 */
.bx-3 .btn-corner.bottom::before,
.bx-3 .btn-corner.bottom::after {
    bottom:var(--p);
    transform:scaleY(-1);
}

.bx-3 .btn-corner.bottom::after {
    transform:scale(-1);
}


header .header-utility {display:flex; align-items:center; gap:0.6rem;}




header .audio-wrap {width:100%; height:100%; padding:0 var(--gap-8); display:flex; align-items:center;}
header .music-player {display:flex; align-items:center; gap:var(--gap-8);}
header .music-player .music-toggle {width:var(--size-24); aspect-ratio:1; position:relative;}
header .music-player .music-toggle span {display:block; width:100%; height:100%;}
header .music-player .music-toggle .icon-play {background:url(../../img/com/icon_play.svg) no-repeat center / cover; display:block;}
header .music-player .music-toggle .icon-pause {background:url(../../img/com/icon_pause.svg) no-repeat center / cover; display:none;}
header .music-player.is-playing .music-toggle .icon-pause {display:block;}
header .music-player.is-playing .music-toggle .icon-play {display:none;}

header .music-player .music-info {display:flex; flex-direction:column; justify-content:center; flex:1; gap:0.5rem; width:17rem;}
header .music-player .music-info .music-title {width:100%; font-family:var(--mona); font-size:var(--fs-14); font-weight:700; color:var(--white); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
header .music-player .music-info .music-progress {width:100%; height:var(--size-2); position:relative; background:var(--gray-4c); cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none;}
header .music-player .music-info .music-progress .music-progress-fill {width:0; height:100%; position:absolute; left:0; top:0; background:var(--key-color); pointer-events:none;}
header .music-player .music-info .music-progress .music-progress-thumb {position:absolute; left:0%; top:50%; width:0.6rem; height:0.6rem; transform:translate(-50%,-50%); pointer-events:none; background:var(--key-color);}


/* 모든 화면에서 음악 제목 흐르기 */
header .music-player .music-title-track {
    display:flex;
    align-items:center;
    width:max-content;
    gap:3rem;
    animation:musicTitleRolling 10s linear infinite;
    will-change:transform;
}

header .music-player .music-title-track span {
    flex-shrink:0;
    white-space:nowrap;
}

header .music-player.is-paused .music-title-track {
    animation-play-state:paused;
}

@keyframes musicTitleRolling {
    from {
        transform:translateX(0);
    }
    to {
        transform:translateX(calc(-50% - 1.5rem));
    }
}


/* ========================================
   MUSIC PLAYER MOBILE
======================================== */

@media (max-width:768px) {

    header .audio-wrap {
        min-width:0;
    }

    header .music-player {
        width:100%;
        min-width:0;
    }

    header .music-player .music-info {
        width:12rem;
        min-width:0;
        flex:0 0 12rem;
    }

    header .music-player .music-info .music-title {
        overflow:hidden;
        white-space:nowrap;
    }

    header .music-player .music-title-track {
        display:flex;
        align-items:center;
        width:max-content;
        gap:3rem;
        animation:musicTitleRolling 10s linear infinite;
        will-change:transform;
    }

    header .music-player .music-title-track span {
        flex-shrink:0;
        white-space:nowrap;
    }

    header .music-player.is-paused .music-title-track {
        animation-play-state:paused;
    }

    @keyframes musicTitleRolling {
        from {
            transform:translateX(0);
        }
        to {
            transform:translateX(calc(-50% - 1.5rem));
        }
    }
}

@media (max-width:480px) {
    header .music-player .music-info {
        width:8rem;
        min-width:0;
        flex:0 0 8rem;
    }
}

/*@media screen and (max-width: 1280px) {
    header .header-item:has(.music-player) {min-width:0; aspect-ratio:1; padding:0;}
    header .music-player {width:100%; height:100%; position:absolute; left:0; top:0;}
    header .music-player .music-toggle  {width:100%;}
    header .music-player .music-toggle .icon-play,
    header .music-player .music-toggle .icon-pause {background-size:auto 40%; background-position:calc(50% + 0.1rem) center;}
    header .music-player .music-info {display:none;}
}*/




header .mo-header {display:none;}

@media screen and (max-width: 1024px) {
    header .header-box.rt > .header-item {
        display:none;
    }
    header .mo-header {
        display:flex;
        align-items:center;
        gap:var(--gap-4);
    }
    header .mo-header .header-item {
        padding:0;
        aspect-ratio:1;
    }
    header .mo-header .header-item .item-box {
        width:100%;
        height:100%;
    }

    header .mo-header .header-item .item-box button {
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        font-size:0;
    }

    header .mo-header .header-item .item-box button .btn-text {
        background-position:center;
        background-repeat: no-repeat;
        display:block;
        width:100%;
        height:100%;
    }

    header .btn-menu .btn-text {
        background-image:url(../../img/com/icon_menu.svg);
    }
}




.mo-menu {
    width:100%;
    height:var(--nvh);
    height:100dvh;
    position:fixed;
    left:0;
    top:0;
    z-index:1000;
    background:rgba(0,0,0,0.9);
    display:none;
}

.mo-menu.is-active {
    display:block;
}

.mo-menu .menu-wrap {
    width:95%;
    max-width:183.7rem;
    height:100%;
    margin:0 auto;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mo-menu .head {
    position:absolute;
    right:0;
    top:3.7rem;
}

.mo-menu .head .header-item {
    padding:0;
    aspect-ratio:1;
}

.mo-menu .head .header-item .item-box {
    width:100%;
    height:100%;
}

.mo-menu .head .header-item button {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    font-size:0;
}

.mo-menu .head .header-item button .btn-text {
    display:block;
    width:100%;
    height:100%;
}

.mo-menu .btn-menu-close .btn-text {
    background:url(../../img/com/icon_close_w.svg) no-repeat center / cover;
}

@media screen and (max-width: 480px) {
    .mo-menu .head {
        top : 2.5rem;
    }
}

.mo-menu .menu-box {
    --pixel:0.3rem;
    --cut:calc(var(--pixel) * 4);
    --yellow:var(--key-color);
    --black:#000;
    --bg:#222222;

    width:min(37rem, 95%);
    position:relative;
    box-sizing:border-box;
    filter:drop-shadow(0 var(--pixel) 0 var(--black));
    display:flex;
    align-items:center;
    justify-content:center;
}

.mo-menu .menu-box:before {
    content:'';
    position:absolute;
    inset:0;
    background:var(--bg);
    clip-path:polygon(
        var(--cut) 0,
        calc(100% - var(--cut)) 0,
        calc(100% - var(--cut)) var(--pixel),
        calc(100% - var(--pixel) * 2) var(--pixel),
        calc(100% - var(--pixel) * 2) calc(var(--pixel) * 2),
        100% var(--cut),
        100% calc(100% - var(--cut)),
        calc(100% - var(--pixel) * 2) calc(100% - var(--pixel) * 2),
        calc(100% - var(--pixel) * 2) calc(100% - var(--pixel)),
        calc(100% - var(--cut)) calc(100% - var(--pixel)),
        calc(100% - var(--cut)) 100%,
        var(--cut) 100%,
        var(--cut) calc(100% - var(--pixel)),
        calc(var(--pixel) * 2) calc(100% - var(--pixel)),
        calc(var(--pixel) * 2) calc(100% - var(--pixel) * 2),
        0 calc(100% - var(--cut)),
        0 var(--cut),
        calc(var(--pixel) * 2) calc(var(--pixel) * 2),
        calc(var(--pixel) * 2) var(--pixel),
        var(--cut) var(--pixel)
    );
}

.mo-menu .menu-box .group-wrap {
    position:relative;
    z-index:2;
    width:min(29rem, 90%);
}

.mo-menu .menu-box .corner {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    pointer-events:none;

    background:
        /* 상단 */
        linear-gradient(var(--yellow) 0 0)
        center top / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--black) 0 0)
        center var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 하단 */
        linear-gradient(var(--yellow) 0 0)
        center bottom / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        linear-gradient(var(--black) 0 0)
        center bottom var(--pixel) / calc(100% - var(--cut) * 2) var(--pixel) no-repeat,

        /* 좌측 */
        linear-gradient(var(--yellow) 0 0)
        left center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--black) 0 0)
        left var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        /* 우측 */
        linear-gradient(var(--yellow) 0 0)
        right center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat,

        linear-gradient(var(--black) 0 0)
        right var(--pixel) center / var(--pixel) calc(100% - var(--cut) * 2) no-repeat;
}

.mo-menu .menu-box .corner span {
    display:block;
    width:100%;
    height:50%;
    position:absolute;
    left:0;
}

.mo-menu .menu-box .corner span:before,
.mo-menu .menu-box .corner span:after {
    content:'';
    width:var(--cut);
    height:var(--cut);
    position:absolute;
    background:
        linear-gradient(var(--yellow) 0 0)
        calc(var(--pixel) * 3) 0 / var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--black) 0 0)
        calc(var(--pixel) * 3) var(--pixel) / var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--yellow) 0 0)
        calc(var(--pixel) * 2) var(--pixel) / var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--black) 0 0)
        calc(var(--pixel) * 2) calc(var(--pixel) * 2) / var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--yellow) 0 0)
        var(--pixel) calc(var(--pixel) * 2) / var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--black) 0 0)
        var(--pixel) calc(var(--pixel) * 3) / var(--pixel) var(--pixel) no-repeat,

        linear-gradient(var(--yellow) 0 0)
        0 calc(var(--pixel) * 3) / var(--pixel) var(--pixel) no-repeat;
}

.mo-menu .menu-box .corner span:first-child {
    top:0;
}

.mo-menu .menu-box .corner span:first-child:before {
    left:0;
    top:0;
}

.mo-menu .menu-box .corner span:first-child:after {
    right:0;
    top:0;
    transform:scaleX(-1);
}

.mo-menu .menu-box .corner span:last-child {
    bottom:0;
}

.mo-menu .menu-box .corner span:last-child:before {
    left:0;
    bottom:0;
    transform:scaleY(-1);
}

.mo-menu .menu-box .corner span:last-child:after {
    right:0;
    bottom:0;
    transform:scale(-1);
}

.mo-menu .mo-utility {
    width:100%;
    padding:7rem var(--gap-16);
    display:flex;
    flex-direction:column;
    gap:var(--gap-30);
}

.mo-menu .mo-utility button {
    width:100%;
    display:flex;
    align-items:center;
    gap:var(--gap-36);
}

.mo-menu .mo-utility button .icon {
    width:6.4em;
    height:6.4rem;
    font-size:inherit;
    color:transparent;
}

.mo-menu .mo-utility button .txt {
    font-size:var(--fs-24);
    font-weight:500;
    color:var(--key-color);
}

.mo-menu .mo-menu-box {
    width:100%;
    padding:var(--gap-36) 0;
    display:flex;
    flex-direction:column;
    gap:var(--gap-36);
    border-top:1px solid #888;
}

.mo-menu .mo-sns {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--gap-8);
}

.mo-menu .mo-sns a {
    width:6rem;
    height:6rem;
}

.mo-menu .mo-utility-login {
    width:100%;
}

.mo-menu .mo-utility-login .btn-pubg-login {
    min-height:6rem;
    width:100%;
    font-size:var(--fs-24);
}






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

.layer-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.layer-popup.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media screen and (max-width: 648px) {
    .layer-popup.ty-2 {
        inset:auto;
        width:100%;
    }
}



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

.layer-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;
}

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

.layer-popup .popup-box::before,
.layer-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;
}

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

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

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

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

/* ========================================
   MOBILE
======================================== */

@media screen and (max-width:648px) {
    .layer-popup.ty-2 .popup-box {
        padding:0;
        background:transparent;
    }

    .layer-popup.ty-2 .popup-box::before,
    .layer-popup.ty-2 .popup-box::after {
        display:none;
    }

    .layer-popup.ty-2 .popup-wrap {
        background:var(--gray-2);
    }
}



.layer-popup .btn-popup-close {
    font-size:0;
    width:1.6rem;
    aspect-ratio:1;
    background:url(../../img/com/icon_close.svg) no-repeat center / cover;
    position:absolute;
    right:var(--gap-24);
    top:var(--gap-24);
}

.layer-popup .popup-conts .title-box {
    width:100%;
    text-align:center;
    font-family:var(--noto);
    font-size:var(--fs-20);
    font-weight:600;
    color:var(--key-color);
    display:flex;
    align-items:center;
    justify-content:center;
}

.layer-popup .popup-conts .title-box span {
    padding:0.6rem var(--gap-10);
    position:relative;
}

.layer-popup .popup-conts .title-box span:before {
    content:'';
    width:100%;
    height:var(--size-1);
    background:var(--key-color);
    position:absolute;
    left:0;
    bottom:0;
}

.layer-popup .popup-conts .conts-box {
    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;
}

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

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




/* ========================================
   LANGUAGE POPUP
======================================== */

.layer-popup[data-id="language"] .popup-box {
    width:min(65rem, 90vw);
    max-height:calc(100dvh - 4rem);
    box-sizing:border-box;
}

.layer-popup[data-id="language"] .popup-wrap {
    height:min(65rem, 70dvh);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-sizing:border-box;
}

.layer-popup[data-id="language"] .popup-conts {
    width:min(108rem, 95%);
    height:calc(100% - 8rem);
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:var(--gap-32);
    align-items:center;
    overflow:hidden;
}

.layer-popup[data-id="language"] .popup-conts .title-box {
    flex-shrink:0;
}

.layer-popup[data-id="language"] .popup-conts .conts-box {
    padding:var(--size-40) 0;
    background:var(--gray-1);
}

.layer-popup[data-id="language"] .language-list {
    width:min(44rem, 95%);
    display:flex;
    justify-content:space-between;
    gap:var(--gap-16);
    flex-shrink:0;
}

.layer-popup[data-id="language"] .language-box {
    width:calc((100% - var(--gap-20)) / 2);
    max-width:20rem;
    display:flex;
    flex-direction:column;
    gap:var(--gap-20);
}

.layer-popup[data-id="language"] .language-box .item {
    width:100%;
    position:relative;
}

.layer-popup[data-id="language"] .language-box .item input[type='radio'] {
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    visibility:hidden;
    width:0;
    height:0;
}

.layer-popup[data-id="language"] .language-box .item .item-wrap {
    width:100%;
    height:6.6rem;
    position:relative;
    box-sizing:border-box;
    border:var(--size-1) solid transparent;
    padding:0 var(--gap-24);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--gap-8);
    cursor:pointer;
}

.layer-popup[data-id="language"] .language-box .item .flag {
    width:4.4rem;
    aspect-ratio:1;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    flex-shrink:0;
}

.layer-popup[data-id="language"] .language-box .item .flag img {
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    object-fit:cover;
}

.layer-popup[data-id="language"] .language-box .item .lan-name {
    font-size:var(--fs-18);
    font-family:var(--noto);
    font-weight:500;
    color:var(--gray-a);
}

.layer-popup[data-id="language"] .language-box .item #lan-chn-s + .item-wrap .lan-name {
    font-family:var(--notoSC);
}


.layer-popup[data-id="language"] .language-box .item .check {
    width:3.6rem;
    aspect-ratio:1;
    flex-shrink:0;
    background:url(../../img/com/check.svg) no-repeat center / cover;
}

.layer-popup[data-id="language"] .language-box .item input[type='radio']:checked + .item-wrap {
    border-color:var(--key-color);
}

.layer-popup[data-id="language"] .language-box .item input[type='radio']:checked + .item-wrap .lan-name {
    font-weight:600;
    color:var(--key-color);
}

.layer-popup[data-id="language"] .language-box .item input[type='radio']:checked + .item-wrap .check {
    background-image:url(../../img/com/check_on.svg);
}

.layer-popup[data-id="language"] .language-action {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.layer-popup[data-id="language"] .btn-select-language {
    width:min(27rem, 100%);
    height:var(--size-50);
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--key-color);
    font-size:var(--fs-18);
    font-weight:500;
    color:var(--gray-1);
    font-family:var(--noto);
}



@media screen and (max-width:648px) {

    .layer-popup[data-id="language"] .popup-box {
        width:100%;
        height:100dvh;
        max-height:none;
        padding:0;
    }

    .layer-popup[data-id="language"] .popup-wrap {
        height:100%;
        min-height:0;
        box-sizing:border-box;
        flex-direction:column;
        justify-content:flex-start;
        gap:var(--gap-32);
        padding-top:var(--gap-32);
    }

    .layer-popup[data-id="language"] .popup-head {
        width:90%;
        display:flex;
        justify-content:flex-end;
        flex-shrink:0;
    }

    .layer-popup[data-id="language"] .btn-popup-close {
        position:relative;
        right:auto;
        top:auto;
        flex-shrink:0;
    }

    .layer-popup[data-id="language"] .popup-conts {
        width:100%;
        height:auto;
        flex:1;
        min-height:0;
    }

    .layer-popup[data-id="language"] .popup-conts .title-box {
        flex-shrink:0;
        font-size:var(--fs-24);
    }

    .layer-popup[data-id="language"] .popup-conts .conts-box {
        width:100%;
        height:0;
        flex:1;
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    .layer-popup[data-id="language"] .language-list {
        flex-direction:column;
        gap:var(--gap-30);
    }

    .layer-popup[data-id="language"] .language-box {
        width:100%;
        max-width:100%;
        gap:var(--gap-30);
    }

    .layer-popup[data-id="language"] .language-box .item .item-wrap {
        height:7.5rem;
    }

    .layer-popup[data-id="language"] .language-box .item .flag {
        width:5.5rem;
    }

    .layer-popup[data-id="language"] .language-box .item .lan-name {
        font-size:var(--fs-24);        
    }

    .layer-popup[data-id="language"] .language-box .item .check {
        width:4.5rem;
    }

    .layer-popup[data-id="language"] .btn-select-language {
        width:90%;
        height:6.3rem;
        font-size:var(--fs-24);
    }

}



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

.layer-popup[data-id="guide"] .popup-box {
    width:min(70rem, 90vw);
    max-height:calc(100dvh - 4rem);
    box-sizing:border-box;
}

.layer-popup[data-id="guide"] .popup-wrap {
    max-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-sizing:border-box;
    padding:var(--gap-40) 0;
}

.layer-popup[data-id="guide"] .popup-conts {
    width:min(60rem, 95%);
    height:calc(100% - 8rem);
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:var(--gap-36);
    align-items:center;
    overflow:hidden;
}

.layer-popup[data-id="guide"] .guide-list {
    width:100%;
    display:flex;
    align-items:stretch;
    gap:var(--gap-24);
    justify-content:space-between;
}

.layer-popup[data-id="guide"] .guide-list .guide-box {
    width:calc((100% - (var(--gap-24) * 2)) / 3);
    background:var(--gray-1);
    padding:var(--gap-20);
}

.layer-popup[data-id="guide"] .guide-list .guide-box .item-box {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
}

.layer-popup[data-id="guide"] .guide-list .guide-box .item-box .obj-box {
    width:100%;
    aspect-ratio:140/90;
    border:1px solid #313131;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}


.layer-popup[data-id="guide"] .guide-list .guide-box .item-box .conts-box {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-8);
    text-align:center;
    font-family:var(--noto);
}

.layer-popup[data-id="guide"] .guide-list .guide-box .item-box .conts-box .head {
    width:100%;
    font-size:1.7rem;
    line-height:150%;
    color:#f0f0f0;
    font-weight:500;
}

html[lang="en"] .layer-popup[data-id="guide"] .guide-list .guide-box .item-box .conts-box .head,
html[lang="th"] .layer-popup[data-id="guide"] .guide-list .guide-box .item-box .conts-box .head {
    font-size:1.5rem;
}

.layer-popup[data-id="guide"] .guide-list .guide-box .item-box .conts-box .desc {
    width:100%;
    font-size:var(--fs-15);
    line-height:150%;
    color:var(--gray-c);
    letter-spacing:calc(var(--size-1) * -1);
    white-space:normal !important;
}

html[lang="en"] .layer-popup[data-id="guide"] .guide-list .guide-box .item-box .conts-box .desc,
html[lang="th"] .layer-popup[data-id="guide"] .guide-list .guide-box .item-box .conts-box .desc {
    font-size:1.3rem;
    letter-spacing:0.01rem;
}


.layer-popup[data-id="guide"] .popup-conts .conts-box {
    gap:var(--gap-16);
}

.layer-popup[data-id="guide"] .popup-conts .conts-box .head-conts {
    width:100%;
    font-family:var(--noto);
    font-size:var(--fs-24);
    font-weight:600;
    color:var(--white);
    text-align:center;
}




@media screen and (max-width:648px) {

    .layer-popup[data-id="guide"] .popup-box {
        width:100%;
        height:100dvh;
        max-height:none;
        padding:0;
    }

    .layer-popup[data-id="guide"] .popup-wrap {
        height:100%;
        min-height:0;
        box-sizing:border-box;
        flex-direction:column;
        justify-content:flex-start;
        gap:var(--gap-32);
        padding-top:var(--gap-32);
        max-height:100%;
    }

    .layer-popup[data-id="guide"] .popup-head {
        width:90%;
        display:flex;
        justify-content:flex-end;
        flex-shrink:0;
    }

    .layer-popup[data-id="guide"] .btn-popup-close {
        position:relative;
        right:auto;
        top:auto;
        flex-shrink:0;
    }

    .layer-popup[data-id="guide"] .popup-conts {
        width:100%;
        height:auto;
        flex:1;
        min-height:0;
    }

    .layer-popup[data-id="guide"] .guide-list {
        width:95%;
        margin:0 auto;
        flex-direction:column;
    }

    .layer-popup[data-id="guide"] .guide-list .guide-box {
        width:100%;
    }

    .layer-popup[data-id="guide"] .guide-list .guide-box .item-box {
        flex-direction:row;
        align-items:center;
    }

    .layer-popup[data-id="guide"] .guide-list .guide-box .item-box .obj-box {
        flex:1;
    }

}



/* ========================================
   SCROLL LOCK
======================================== */

html.is-popup-open,
body.is-popup-open {
    overflow: hidden;
}



.btn-back {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease, visibility .3s ease;
    padding:0 2rem;
    width:auto;
    height:4.5rem;
}


.btn-back.is-active {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


.btn-back .btn-text {
    display:flex;
    align-items:center; 
    gap:var(--gap-10);
    position:relative;
    z-index:10;
}

.btn-back .btn-text span {
    display:block;
}

.btn-back .btn-text .arrow {
    width:1.2rem;
    aspect-ratio:16/24;
    background:url(../../img/com/icon_back.svg) no-repeat center / 100% 100%;
}

.btn-back .btn-text .text {
    font-family:var(--mona);
    font-size:var(--fs-16);
    font-weight:700;
    color:var(--white);
}


@media screen and (max-width: 480px) {
    .btn-back {
        width:4.5rem;
        padding:0;
    }
    
    .btn-back .btn-text {
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
    }

    .btn-back .btn-text .arrow {
        width:100%;
        height:100%;
        background-size:1.5rem auto;        
    }

    .btn-back .btn-text .text {
        font-size:0;
        opacity:0;
        display:none;
    }
}


header .btn-language {
    width:4.5rem;
    height:4.5rem;
}

header .btn-language .item-box .icon {background:url(../../img/com/icon_language.svg) no-repeat center / 80% auto;}

header .btn-guide {
    width:4.5rem;
    height:4.5rem;
}

header .btn-guide .item-box .icon {background:url(../../img/com/icon_guide.svg) no-repeat center / auto 45%;}

header .btn-sound {
    width:4.5rem;
    height:4.5rem;
}

header .btn-sound .item-box .icon {background:url(../../img/com/icon_sound_off.svg) no-repeat center / auto 45%; transition: none !important;}
header .btn-sound.is-active .item-box .icon {background-image:url(../../img/com/icon_sound_on.svg);}



/* 인트로에서는 오디오 영역의 부모 숨김 */
header .header-box.lf > .header-item:nth-child(2) {
    display: none;
}

/* 메인룸 진입 완료 후 표시 */
body.is-main-entered header .header-box.lf > .header-item:nth-child(2) {
    display: block;
}

/*
@media screen and (max-width: 480px) {
    header .btn-language,
    header .btn-guide,
    header .btn-sound {
        width:4.2rem;
        height:4.2rem;
    }
}*/