/* ========================================
   MIRROR POPUP
======================================== */

/*#scene .popup-mirror .popup-box {
    width: min(100vw, 380px);
    max-height: 100dvh;
    height:100%;
    overflow: hidden;
}*/

/* ========================================
   MIRROR POPUP
======================================== */

#scene .popup-mirror {
    width:100%;
    height:100%;
}

/* 팝업 전체 */
#scene .popup-mirror .popup-box {
    width:min(60rem, 100vw);
    height:100dvh;
    max-height:none;
    min-height:0;
    flex-shrink:0;
    box-sizing:border-box;
}

/* 팝업 내부 */
#scene .popup-mirror .popup-wrap {
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    box-sizing:border-box;
}

/* 헤더 */
#scene .popup-mirror .popup-head {
    flex:0 0 auto;
}

/* 남은 높이 전체 사용 */
#scene .popup-mirror .popup-body {
    display:flex;
    flex-direction:column;
    flex:1 1 0%;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
}

/* 콘텐츠 */
#scene .popup-mirror .popup-body .popup-conts {
    display:flex;
    flex-direction:column;
    flex:1 1 0%;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
}

/* 카메라 영역 */
#scene .popup-mirror .mirror-camera {
    display:flex;
    flex-direction:column;
    flex:1 1 0%;
    width:100%;
    height:100%;
    min-height:0;
}

/* ========================================
   MIRROR CAMERA LAYOUT
======================================== */

#scene .popup-mirror .popup-body .popup-conts {
    display:flex;
    flex-direction:column;
    flex:1 1 0;
    min-height:0;
    overflow:hidden;
}

#scene .popup-mirror .mirror-camera {
    display:flex;
    flex-direction:column;
    flex:1 1 0;
    min-height:0;
    height:100%;
}

/* 카메라 화면과 TAKE 버튼을 감싸는 요소가 있다면
   해당 요소에도 flex:1 적용 필요 */

/* ========================================
   CAMERA LAYOUT
======================================== */

#scene .popup-mirror .mirror-camera {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
}

/* ========================================
   CAMERA STAGE
======================================== */

#scene .popup-mirror .mirror-stage {
    position:relative;
    flex:1 1 0;
    width:auto;
    height:0;
    max-width:100%;
    min-height:0;
    aspect-ratio:9 / 16;
    overflow:hidden;
    background:transparent;
}

#scene .popup-mirror .mirror-actions {
    flex:0 0 auto;
}

/* ========================================
   CAMERA VIDEO / FRAME / RESULT
======================================== */

#scene .popup-mirror .mirror-video,
#scene .popup-mirror .mirror-frame,
#scene .popup-mirror .mirror-result {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 카메라 */
#scene .popup-mirror .mirror-video {
    object-fit: cover;
    transform: scaleX(-1);
}

/* 원본 프레임 전체 표시 */
#scene .popup-mirror .mirror-frame {
    object-fit: contain;
    pointer-events: none;
}

/* 촬영 결과 */
#scene .popup-mirror .mirror-result {
    object-fit: contain;
    background: #111;
}

#scene .popup-mirror .mirror-result[hidden] {
    display: none;
}

/* ========================================
   CAMERA MESSAGE
======================================== */

#scene .popup-mirror .mirror-message {
    position: absolute;
    inset: 0;

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

    padding: 20px;
    text-align: center;

    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 14px;
}

#scene .popup-mirror .mirror-message[hidden] {
    display: none;
}

/* ========================================
   CAMERA BUTTONS
======================================== */

#scene .popup-mirror .mirror-actions {
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    gap:0.8rem;
    margin-top:1.2rem;
    width:100%;
}

#scene .popup-mirror .mirror-actions button {
    --pixel-border:#555;
    --pixel-bg:#222;
    --pixel-size:0.2rem;

    position:relative;
    isolation:isolate;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem;

    flex:1 1 0;
    min-width:0;
    max-width:17rem;
    padding:0 1.5rem;
    height:4.2rem;

    border:0;
    border-radius:0;
    background:var(--pixel-border);
    color:#ffce00;

    font-family:inherit;
    font-size:1.2rem;
    font-weight:700;
    line-height:1;

    cursor:pointer;
    white-space:nowrap;

    clip-path:polygon(
        0 calc(var(--pixel-size) * 3),
        var(--pixel-size) calc(var(--pixel-size) * 3),
        var(--pixel-size) calc(var(--pixel-size) * 2),
        calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 2),
        calc(var(--pixel-size) * 2) var(--pixel-size),
        calc(var(--pixel-size) * 3) var(--pixel-size),
        calc(var(--pixel-size) * 3) 0,

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

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

        calc(var(--pixel-size) * 3) 100%,
        calc(var(--pixel-size) * 3) calc(100% - var(--pixel-size)),
        calc(var(--pixel-size) * 2) calc(100% - var(--pixel-size)),
        calc(var(--pixel-size) * 2) calc(100% - var(--pixel-size) * 2),
        var(--pixel-size) calc(100% - var(--pixel-size) * 2),
        var(--pixel-size) calc(100% - var(--pixel-size) * 3),
        0 calc(100% - var(--pixel-size) * 3)
    );
}

/* 표시되는 버튼이 1개일 때 */
#scene .popup-mirror .mirror-actions:has(button:not([hidden])):not(:has(button:not([hidden]) ~ button:not([hidden]))) button:not([hidden]) {
    flex:0 0 auto;
    width:fit-content;
}

#scene .popup-mirror .mirror-actions button .icon {
    flex:0 0 2.4rem;
    width:2.4rem;
    aspect-ratio:1;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

#scene .popup-mirror .mirror-actions .mirror-start .icon,
#scene .popup-mirror .mirror-actions .mirror-retake .icon {
    background-image:url(../../img/main/icon_camera.svg);
}

#scene .popup-mirror .mirror-actions .mirror-save .icon {
    background-image:url(../../img/main/icon_save.svg);
}

#scene .popup-mirror .mirror-actions .mirror-flip .icon {
    background-image:url(../../img/main/icon_switch.svg);
}

#scene .popup-mirror .mirror-actions .mirror-share .icon {
    background-image:url(../../img/main/icon_share.svg);
}

#scene .popup-mirror .mirror-actions button .text {
    font-family:var(--mona);
    font-weight:700;
    font-size:var(--fs-16);
    color:var(--key-color);
    flex:0 1 auto;
    white-space:nowrap;
}

/* 내부 배경 */
#scene .popup-mirror .mirror-actions button::before {
    content:'';
    position:absolute;
    inset:0.2rem;
    background:var(--pixel-bg);
    clip-path:inherit;
    z-index:-1;
}

#scene .popup-mirror .mirror-actions button[hidden] {
    display:none;
}


@media screen and (max-width:480px) {
    #scene .popup-mirror .mirror-actions button .text {
        font-size:var(--fs-14);
    }
}

/* 카메라 공유 팝업: 기존 popup-share 디자인을 #scene 최상위에서 재사용 */
#scene > .mirror-share-layer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.6rem;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .65);
    pointer-events: auto !important;
}
#scene > .mirror-share-layer[hidden] { display: none !important; }

/* 기존 .contents-popup/.popup-share/.popup-com의 테두리·타이틀·아이콘 CSS 유지 */
#scene > .mirror-share-layer > .contents-popup.popup-share {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}
#scene > .mirror-share-layer > .popup-share > .popup-box {
    flex: 0 1 auto;
    max-width: min(100%, 100vw - 3.2rem);
    max-height: calc(100dvh - 3.2rem);
    overflow: auto;
}