/* 댓글 첨부 영상 — 썸네일 + 플레이어 모달 (업체창고 리뷰) */

.comment-video-thumb-wrap .play-overlay {
    transition: opacity 0.25s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* hover 무음 미리보기 — 썸네일 위에 겹치는 muted <video> */
.comment-video-playback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    background: #000;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
}

.cvp-hover-playing .comment-video-playback {
    opacity: 1;
}

/* 모달 — clips.php(videostyle_v2.min.css + clips_v20.min.js) 레이아웃 동일
   NOTE: Video.js 초기화 후 DOM은 <div id="commentVideoPlayer" class="video-js"> > <video id="…_html5_api" class="vjs-tech"> 구조로 재구성됨 — 선택자는 항상 overlay ID 기준 후손 매칭 */

#comment-video-overlay {
    display: none; /* JS가 display:block으로 전환 (clips와 동일) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999998;
}

/* clips의 .modal-content — 전 영역 스테이지 (desktop "전체화면 느낌"의 핵심) */
.cvo-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0 !important;
    box-sizing: border-box;
    z-index: 999999;
}

/* clips의 .video-container */
.cvo-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#comment-video-overlay .video-js {
    height: 100% !important;
}

/* 데스트탑 — 너비 fit + 위아래 공백 (contain). UA 기본값과 동일하게 명시 */
#comment-video-overlay .vjs-tech,
#comment-video-overlay .video-js video {
    height: 100% !important;
    object-fit: contain;
}

/* clips.php head 인라인 <style>과 동일 — 모달 내 빅플레이버튼 숨김 */
#comment-video-overlay .video-js .vjs-big-play-button {
    display: none !important;
}

/* clips의 .close-btn base */
.cvo-close {
    position: absolute;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    z-index: 1000000;
}

#comment-video-overlay .vjs-control-bar {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

/* clips — desktop (min-width: 769px) */
@media screen and (min-width: 769px) {
    #comment-video-overlay .cvo-content {
        max-width: 100vw;
        max-height: 100vh;
    }

    .cvo-stage {
        max-width: 100%;
        max-height: 100%;
    }

    #comment-video-overlay .cvo-close {
        position: fixed !important;
        top: 30px !important;
        right: 30px !important;
        z-index: 1000002 !important;
        width: 35px !important;
        height: 35px !important;
    }
}

/* clips — 모바일 틱톡 모드 (max-width: 768px) */
@media screen and (max-width: 768px) {
    #comment-video-overlay .cvo-content {
        padding: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        position: fixed !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .cvo-stage {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    #comment-video-overlay .video-js {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    /* 틱톡식 세로 풀스크린 — 좌우 cropping 감수, 높이를 꽉 채우는 cover */
    #comment-video-overlay .vjs-tech,
    #comment-video-overlay .video-js video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }

    /* 실제 fullscreen 진입 시엔 clips와 동일하게 contain으로 복귀 */
    #comment-video-overlay .video-js.vjs-fullscreen .vjs-tech {
        object-fit: contain !important;
    }

    /* 컨트롤바 — 뷰포트 하단 fixed, user-inactive 시 자동 숨김 */
    #comment-video-overlay .video-js .vjs-control-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 2000 !important;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)) !important;
    }

    #comment-video-overlay .video-js .vjs-progress-control {
        flex: 1 !important;
        margin: 0 10px !important;
    }

    #comment-video-overlay .video-js .vjs-progress-holder {
        height: 6px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border-radius: 3px !important;
    }

    #comment-video-overlay .video-js .vjs-play-control {
        margin-right: 10px !important;
    }

    #comment-video-overlay .video-js .vjs-time-control {
        font-size: 12px !important;
        margin: 0 5px !important;
    }

    #comment-video-overlay .video-js .vjs-volume-panel {
        display: none !important;
    }

    #comment-video-overlay .video-js .vjs-fullscreen-control {
        margin-left: 10px !important;
    }

    #comment-video-overlay .video-js.vjs-user-inactive .vjs-control-bar {
        transform: translateY(0) !important;
        opacity: 0 !important;
        transition: opacity 0.2s ease !important;
    }

    #comment-video-overlay .video-js.vjs-user-active .vjs-control-bar {
        opacity: 1 !important;
    }

    #comment-video-overlay .cvo-close {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 2002 !important;
        background: rgba(0, 0, 0, 0.7) !important;
    }

    #comment-video-overlay .video-js .vjs-control-bar .vjs-button {
        min-height: 44px !important;
    }
}