/* ========================================
   ROOM COMMON
======================================== */

#scene .scene-detail[data-id="room"] .detail-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#scene .room-page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* ========================================
   ROOM VIEWPORT
======================================== */

#scene .room-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    touch-action: pan-y;
    cursor: grab;
}

#scene .room-viewport.is-dragging {
    cursor: grabbing;
}


/* ========================================
   ROOM WORLD
   DESIGN SIZE : 2560 × 1440
======================================== */

#scene .room-world {
    position: absolute;

    width: max(
        100vw,
        calc(100dvh * 2560 / 1440)
    );

    height: max(
        100dvh,
        calc(100vw * 1440 / 2560)
    );

    left: 50%;
    top: 50%;

    transform: translate(
        calc(-50% + var(--room-drag-x, 0px)),
        -50%
    );

    will-change: transform;
    user-select: none;
}


/* ========================================
   ROOM BACKGROUND
======================================== */

#scene .room-bg {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}


/* ========================================
   ROOM OBJECT
======================================== */

#scene .dive-object {
    position: absolute;

    left: calc(var(--x) / 2560 * 100%);
    top: calc(var(--y) / 1440 * 100%);

    width: calc(var(--w) / 2560 * 100%);
    height: calc(var(--h) / 1440 * 100%);

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
    touch-action: manipulation;
}


/* ========================================
   ROOM POPUP LAYER
======================================== */

#scene .room-password-layer,
#scene .room-error-layer {
    position: absolute;
    inset: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

/* 팝업 내부 클릭 및 입력 허용 */
#scene .room-password-layer .contents-popup,
#scene .room-error-layer .contents-popup {
    pointer-events: auto;
}


/* ========================================
   ROOM DIM
======================================== */

#scene .room-dim {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.6);

    pointer-events: none;
}

/* ========================================
   ROOM POPUP HIDDEN
======================================== */

#scene .room-password-layer[hidden],
#scene .room-error-layer[hidden] {
    display: none !important;
}



/* ========================================
   PWD POPUP
======================================== */
.contents-popup.popup-room-password .popup-box {
    width:min(56rem, 90vw);
    max-height:calc(100% - 2rem);
}

.contents-popup.popup-room-password .room-pwd {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-40);
    align-items:center;
}

.contents-popup.popup-room-password .room-pwd .head-box {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
    align-items:center;
    text-align:center;
}

.contents-popup.popup-room-password .room-pwd .head-box .head {
    width:100%;
    font-family:var(--mona);
    font-size:2.6rem;
    font-weight:700;
    color:var(--pink);
}

.contents-popup.popup-room-password .room-pwd .head-box .head span {
    color:inherit;
    font-variant-emoji: text;
}

.contents-popup.popup-room-password .room-pwd .head-box .desc {
    width:100%;
    font-family:var(--noto);
    font-size:1.7rem;
    color:#bababa;
    font-weight:500;
    line-height:150%;
}


/* ========================================
   ROOM PASSWORD INPUT
======================================== */

.contents-popup.popup-room-password .input-box {
    --pixel: 0.3rem; /* 모서리 계단 크기 */
    --line: 0.2rem;  /* 테두리 두께 */
    --color: #ffb5cf;
    --bg: #222;

    position: relative;
    width: 36rem;
    max-width: 90%;
    height: 5.6rem;
    margin: 0 auto;
}

/* 바깥쪽 픽셀 테두리 */
.contents-popup.popup-room-password .input-box::before {
    content: '';
    position: absolute;
    inset: 0;

    background: var(--color);

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

        calc(100% - var(--pixel) * 2) var(--pixel),
        calc(100% - var(--pixel)) var(--pixel),

        calc(100% - var(--pixel)) calc(var(--pixel) * 2),
        100% calc(var(--pixel) * 2),

        100% calc(100% - var(--pixel) * 2),

        calc(100% - var(--pixel)) calc(100% - var(--pixel) * 2),
        calc(100% - var(--pixel)) calc(100% - var(--pixel)),

        calc(100% - var(--pixel) * 2) calc(100% - var(--pixel)),
        calc(100% - var(--pixel) * 2) 100%,

        calc(var(--pixel) * 2) 100%,

        calc(var(--pixel) * 2) calc(100% - var(--pixel)),
        var(--pixel) calc(100% - var(--pixel)),

        var(--pixel) calc(100% - var(--pixel) * 2),
        0 calc(100% - var(--pixel) * 2),

        0 calc(var(--pixel) * 2),

        var(--pixel) calc(var(--pixel) * 2),
        var(--pixel) var(--pixel),

        calc(var(--pixel) * 2) var(--pixel)
    );

    pointer-events: none;
}

/* 안쪽 배경 */
.contents-popup.popup-room-password .input-box::after {
    content: '';
    position: absolute;
    inset: var(--line);

    background: var(--bg);

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

        calc(100% - var(--pixel) * 2) var(--pixel),
        calc(100% - var(--pixel)) var(--pixel),

        calc(100% - var(--pixel)) calc(var(--pixel) * 2),
        100% calc(var(--pixel) * 2),

        100% calc(100% - var(--pixel) * 2),

        calc(100% - var(--pixel)) calc(100% - var(--pixel) * 2),
        calc(100% - var(--pixel)) calc(100% - var(--pixel)),

        calc(100% - var(--pixel) * 2) calc(100% - var(--pixel)),
        calc(100% - var(--pixel) * 2) 100%,

        calc(var(--pixel) * 2) 100%,

        calc(var(--pixel) * 2) calc(100% - var(--pixel)),
        var(--pixel) calc(100% - var(--pixel)),

        var(--pixel) calc(100% - var(--pixel) * 2),
        0 calc(100% - var(--pixel) * 2),

        0 calc(var(--pixel) * 2),

        var(--pixel) calc(var(--pixel) * 2),
        var(--pixel) var(--pixel),

        calc(var(--pixel) * 2) var(--pixel)
    );

    pointer-events: none;
}

/* INPUT */
.contents-popup.popup-room-password .input-box input {
    position: relative;
    z-index: 2;

    display: block;
    width: 100%;
    height: 100%;
    padding: 0 2rem;

    box-sizing: border-box;

    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;

    color: #ffb5cf;
    font-family: var(--noto);
    font-size: 2.6rem;
    text-align: center;

    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}


/* ========================================
   ROOM PASSWORD BUTTON
======================================== */

.contents-popup.popup-room-password .action-box {
    display: flex;
    justify-content: center;
    padding-bottom:var(--gap-32);
}

.contents-popup.popup-room-password .action-box button {
    --pixel: 0.3rem;
    --line: 0.2rem;
    --btn-bg: #FFCCDE;
    --btn-border: #FF70A1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 21.2rem;
    max-width:80%;
    height: 4.8rem;

    padding: 0;
    border: 0;
    border-radius: 0;

    background: var(--btn-border);

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

        calc(100% - var(--pixel) * 3) var(--pixel),
        calc(100% - var(--pixel) * 2) var(--pixel),

        calc(100% - var(--pixel) * 2) calc(var(--pixel) * 2),
        calc(100% - var(--pixel)) calc(var(--pixel) * 2),

        calc(100% - var(--pixel)) calc(var(--pixel) * 3),
        100% calc(var(--pixel) * 3),

        100% calc(100% - var(--pixel) * 3),

        calc(100% - var(--pixel)) calc(100% - var(--pixel) * 3),
        calc(100% - var(--pixel)) calc(100% - var(--pixel) * 2),

        calc(100% - var(--pixel) * 2) calc(100% - var(--pixel) * 2),
        calc(100% - var(--pixel) * 2) calc(100% - var(--pixel)),

        calc(100% - var(--pixel) * 3) calc(100% - var(--pixel)),
        calc(100% - var(--pixel) * 3) 100%,

        calc(var(--pixel) * 3) 100%,

        calc(var(--pixel) * 3) calc(100% - var(--pixel)),
        calc(var(--pixel) * 2) calc(100% - var(--pixel)),

        calc(var(--pixel) * 2) calc(100% - var(--pixel) * 2),
        var(--pixel) calc(100% - var(--pixel) * 2),

        var(--pixel) calc(100% - var(--pixel) * 3),
        0 calc(100% - var(--pixel) * 3),

        0 calc(var(--pixel) * 3),

        var(--pixel) calc(var(--pixel) * 3),
        var(--pixel) calc(var(--pixel) * 2),

        calc(var(--pixel) * 2) calc(var(--pixel) * 2),
        calc(var(--pixel) * 2) var(--pixel),

        calc(var(--pixel) * 3) var(--pixel)
    );

    cursor: pointer;
}

/* 버튼 내부 배경 */
.contents-popup.popup-room-password .action-box button::before {
    content: '';
    position: absolute;
    inset: var(--line);

    background: var(--btn-bg);

    clip-path: inherit;
    pointer-events: none;
}

/* 버튼 텍스트 */
.contents-popup.popup-room-password .action-box button .text {
    position: relative;
    z-index: 1;

    color: #B91F59;
    font-family: var(--mona);
    font-size: var(--fs-20);
    font-weight:700;
}



/* ========================================
   PWD ERROR POPUP
======================================== */
.contents-popup.popup-room-error .popup-box {
    width:min(56rem, 90vw);
    height:min(41rem, 60vh);    
}

.contents-popup.popup-room-error .popup-wrap,
.contents-popup.popup-room-error .popup-body,
.contents-popup.popup-room-error .popup-conts {
    width:100%;
    height:100%;
}

.contents-popup.popup-room-error .popup-conts {
    display:flex;
    align-items:center;
    justify-content:center;
}

.contents-popup.popup-room-error .pwd-error {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-50);
}

.contents-popup.popup-room-error .pwd-error .head-box {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
    align-items:center;
    text-align:center;
    font-family:var(--noto);
}

.contents-popup.popup-room-error .pwd-error .head-box .head {
    width:100%;
    font-size:var(--fs-24);
    font-weight:500;
    color:var(--pink);
}

.contents-popup.popup-room-error .pwd-error .head-box .desc {
    width:100%;
    font-size:1.7rem;
    line-height:150%;
    font-weight:500;
    color:#bababa;
}

.contents-popup.popup-room-error .pwd-error .action-box {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.contents-popup.popup-room-error .pwd-error .action-box button {
    width:20rem;
    max-width:80%;
    height:4.5rem;
    background:#FFCCDE;
    border:1px solid var(--pink);
    font-family:var(--noto);
    font-size:1.7rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#BD1F55;
}

/* ========================================
   DIVE ROOM ENTRY VIDEO
======================================== */

.dive-room-entry-video {
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    z-index:2000;
    overflow:hidden;
}

.dive-room-entry-video video {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.room-page[data-room-page="dive"] .room-viewport {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    touch-action:none;
    cursor:grab;
}

.room-page[data-room-page="dive"] .room-world {
    position:absolute;
    left:50%;
    top:50%;

    width:calc(100dvh * 2560 / 1440);
    aspect-ratio:2560 / 1440;

    transform:translate(
        calc(-50% + var(--room-drag-x, 0px)),
        -50%
    );
}

.room-page[data-room-page="dive"] .room-bg {
    display:block;
    width:100%;
    height:100%;
    pointer-events:none;
    user-select:none;
}


/* DIVE ROOM 오브제 */
.room-page[data-room-page="dive"] .scene-object {
    position:absolute;
    display:block;
    z-index:2;
    cursor:pointer;
}

/* ========================================
   DIVE ROOM OBJECT FOCUS
======================================== */

/* 공통 */
.room-page[data-room-page="dive"] .scene-object.focus::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3.2rem;
    aspect-ratio: 1;
    background: url('../../img/com/icon_focus.svg') no-repeat center / contain;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
    display:none;
}

/* PC - 마우스 호버 */
@media (hover: hover) and (pointer: fine) {
    .room-page[data-room-page="dive"] .scene-object.focus:hover::before {
        opacity: 1;
        visibility: visible;
        animation: focusBlink 1.5s ease-in-out infinite;
    }
}

/* 모바일 / 태블릿 */
@media (hover: none), (pointer: coarse) {
    .room-page[data-room-page="dive"] .scene-object.focus::before {
        opacity: 0;
        visibility: visible;
        animation: roomFocusGlow var(--focus-duration, 2.4s)
                   ease-in-out var(--focus-delay, 0s) infinite;
    }

    /* 오브제마다 다른 타이밍 */
    .room-page[data-room-page="dive"] .scene-object.focus:nth-of-type(2n)::before {
        --focus-duration: 2.1s;
        --focus-delay: -0.8s;
    }

    .room-page[data-room-page="dive"] .scene-object.focus:nth-of-type(3n)::before {
        --focus-duration: 2.7s;
        --focus-delay: -1.6s;
    }

    .room-page[data-room-page="dive"] .scene-object.focus:nth-of-type(4n)::before {
        --focus-duration: 2.3s;
        --focus-delay: -0.4s;
    }

    .room-page[data-room-page="dive"] .scene-object.focus:nth-of-type(5n)::before {
        --focus-duration: 2.6s;
        --focus-delay: -1.9s;
    }
}

/* PC 깜빡임 */
@keyframes focusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* 모바일 - 은은하게 나타났다 사라짐 */
@keyframes roomFocusGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.85; }
}

/* 셀피 오브제 위치 유지 */
.room-page[data-room-page="dive"] .scene-object[data-id="selfie"].focus::before {
    left: 40%;
    top: 75%;
}

/* Hover 시 반짝임 */
.room-page[data-room-page="dive"] .scene-object.focus:hover::before {
    opacity: 1;
    visibility: visible;
    animation: focusBlink 1.5s ease-in-out infinite;
}

.room-page[data-room-page="dive"] .scene-object[data-id='selfie'].focus::before {
    left:40%;
    top:75%;
}




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

.contents-popup.popup-computer .popup-box {
    width:min(65rem, 90vw);
    max-height:95vh;
}

.contents-popup.popup-computer .event-wrap {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-24);
    align-items:center;
}

.contents-popup.popup-computer .event-wrap .head-box {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-8);
    text-align:center;
    font-family:var(--noto);
    color:var(--white);
}

.contents-popup.popup-computer .event-wrap .head-box .head {
    width:100%;
    font-size:var(--fs-18);
    font-weight:500;
}

.contents-popup.popup-computer .event-wrap .head-box .desc {
    width:100%;
    font-size:var(--fs-15);
}

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

.contents-popup.popup-computer .event-wrap .detail-box .item-box {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-8);
    font-family:var(--noto);
    font-size:var(--fs-16);
    color:var(--white);
}

.contents-popup.popup-computer .event-wrap .detail-box .item-box .item-head {
    width:100%;
    padding-left:var(--gap-10);
    position:relative;
    font-weight:600;
}

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

.contents-popup.popup-computer .event-wrap .detail-box .item-box .item-conts {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
}

.contents-popup.popup-computer .event-wrap .detail-box .item-box .item-conts .conts {
    font-size:var(--fs-16);
}

.contents-popup.popup-computer .event-wrap .detail-box .item-box .item-conts .conts span {
    color:var(--key-color);
}

.contents-popup.popup-computer .event-wrap .detail-box .item-box .item-conts .img-box {
    width:100%;
}

.contents-popup.popup-computer .event-wrap .detail-box .item-box .item-conts .img-box img {
    width:100%;
    display:block;
}

.contents-popup.popup-computer .event-wrap .detail-box .item-box .item-conts .action {
    width:100%;
    display:flex;
    justify-content:center;
}

.contents-popup.popup-computer .event-wrap .detail-box .item-box .item-conts .btn-participate {
    width:fit-content;
    height:4.3rem;
    padding:0 var(--gap-20);
    display:flex;
    align-items:center;
    gap:var(--gap-8);
    justify-content:center;
    font-family:var(--noto);
    font-size:var(--fs-15);
    font-weight:600;
    color:var(--gray-1);
    background:var(--key-color);
}

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

.contents-popup.popup-computer .event-wrap .main-conts {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
    align-items:center;
}

.contents-popup.popup-computer .event-wrap .main-conts .head {
    width:100%;
    font-size:var(--fs-16);
    font-weight:600;
    font-family:var(--noto);
    color:var(--gray-f4);
    text-align:center;
}

.contents-popup.popup-computer .event-wrap .main-conts .conts {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-16);
    align-items:center;
}

.contents-popup.popup-computer .event-wrap .main-conts .step-wrap {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:1.4rem;
}

.contents-popup.popup-computer .event-wrap .main-conts .step-wrap .step-box {
    width: 100%;
    border: 1px solid #4b4b4b;
    display: flex;
    gap: var(--gap-20);
    align-items: flex-start;
    padding: var(--gap-16) var(--gap-24);
    box-sizing: border-box;
}

/* LABEL - 크기 고정 */
.contents-popup.popup-computer .event-wrap .main-conts .step-wrap .step-box .label {
    flex: 0 0 8rem;
    width: 8rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,200,0,0.24);
    font-family: var(--noto);
    font-size: var(--fs-14);
    color: var(--key-color);
    font-weight: 500;
    box-sizing: border-box;
}

/* DESC - 남은 영역에서 자동 줄바꿈 */
.contents-popup.popup-computer .event-wrap .main-conts .step-wrap .step-box .desc {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.7rem;
    font-family: var(--noto);
    font-size: var(--fs-15);
    color: var(--white);
    overflow-wrap: break-word;
}

.contents-popup.popup-computer .event-wrap .main-conts .note {
    width:100%;
    text-align:center;
    font-size:var(--fs-14);
    font-family:var(--noto);
    color:#cdcdcd;
    line-height:150%;
}

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

.contents-popup.popup-computer .event-wrap .reward-conts .conts-box {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:1.3rem;
}

.contents-popup.popup-computer .event-wrap .reward-conts .conts-box .head {
    width:100%;
    font-family:var(--noto);
    font-size:var(--fs-16);
    font-weight:600;
    color:var(--gray-f4);
    position:relative;
    padding-left:1rem;
}

.contents-popup.popup-computer .event-wrap .reward-conts .conts-box .head:before {
    content:'';
    width:0.2rem;
    height:60%;
    background:var(--gray-f4);
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
}

.contents-popup.popup-computer .event-wrap .reward-conts .conts-box .conts {
    width:100%;
}

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

.contents-popup.popup-computer .event-wrap .reward-conts .action-box {
    width:100%;
    display:flex;
    justify-content:center;
}

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

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

.contents-popup.popup-computer .popup-action {
    display:flex;
    justify-content:center;
    width:100%;
}

.contents-popup.popup-computer .popup-action .btn-notice {
    font-family:var(--noto);
    font-size:var(--fs-15);
    color:#a2a2a2;
    position:relative;
    padding-bottom:0.5rem;
}

.contents-popup.popup-computer .popup-action .btn-notice:before {
    content:'';
    width:100%;
    height:1px;
    background:#a2a2a2;
    position:absolute;
    left:0;
    bottom:0;
}


@media screen and (max-width:768px) {
    .contents-popup.popup-computer .popup-box {
        max-height:70vh;
    }
}

@media screen and (max-width:648px) {
    .contents-popup.popup-computer .event-wrap .main-conts .step-wrap .step-box {
        flex-direction: column;
        gap: var(--gap-16);
        align-items: center;
    }

    .contents-popup.popup-computer .event-wrap .main-conts .step-wrap .step-box .label {
        flex: none;
        width: 8rem;
        height: 2.7rem;
    }

    .contents-popup.popup-computer .event-wrap .main-conts .step-wrap .step-box .desc {
        width: 100%;
        text-align: center;
    }

    .contents-popup.popup-computer .event-wrap .main-conts .note .br {
        display: inline-block;
    }
}

@media screen and (max-width:1280px) {
    .contents-popup.popup-computer .popup-box {
        max-height:70vh;
    }
}



@media screen and (max-width:480px) {
    .contents-popup.popup-computer .popup-box {
        max-height:60vh;
    }
}


.contents-popup.popup-diary .popup-wrap,
.contents-popup.popup-diary .popup-body,
.contents-popup.popup-diary .popup-conts {
    min-width:100%;
    min-height:100%;
}

.contents-popup.popup-diary .popup-conts {
    display:flex;
    align-items:center;
    justify-content:center;
}

.contents-popup.popup-diary .popup-box {
    width:min(50rem, 90vw);
    max-height:min(30rem, 55vh);
}

.contents-popup.popup-diary .coming-soon {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--gap-20);
    text-align:center;
}

.contents-popup.popup-diary .coming-soon .head {
    width:100%;
    font-family:var(--mona);
    font-size:2.6rem;
    font-weight:700;
    color:var(--pink);
}

.contents-popup.popup-diary .coming-soon .head span {
    color:inherit;
    font-variant-emoji: text;
}

.contents-popup.popup-diary .coming-soon .conts {
    width:100%;
    font-family:var(--noto);
    font-size:1.7rem;
    color:#bababa;
    font-weight:500;
    padding-bottom:var(--gap-32);
}

/* ========================================
   ROOM PASSWORD - MOBILE KEYBOARD
======================================== */

@media (max-width:768px) {

    #scene .room-password-layer {
        height:var(--room-visible-height, 100%);
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    .contents-popup.popup-room-password .popup-box {
        max-height:calc(100% - 2rem);
    }

    .contents-popup.popup-room-password .room-pwd {
        gap:var(--gap-20);
    }

    .contents-popup.popup-room-password .action-box {
        padding-bottom:var(--gap-16);
    }
}