/* =====================================================================
   [데모 페이지 전용] 미리보기 모달 오버라이드
   Admin 스타일과 충돌하지 않도록 #previewModal ID로 강제 적용
   ===================================================================== */

/* 모달 전체 컨테이너 (테두리 및 다크 배경) */
#previewModal .modal-content.mp-preview-panel {
    background-color: rgba(20, 33, 56, 0.95) !important;
    /* 데모 페이지의 다크 블루 배경 */
    border: 1px solid rgba(55, 135, 255, 0.3) !important;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* 모달 헤더 (하얀색 배경 제거, 하단 경계선 은은하게) */
#previewModal .modal-header.mp-preview-head {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 24px;
}

/* 모달 제목 (파란색/검은색 텍스트를 흰색으로 변경) */
#previewModal .modal-title.mp-preview-title {
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 600;
}

/* 모달 바디 (영상 뒤 배경을 더 어둡게 하여 영상 집중도 향상) */
#previewModal .modal-body.mp-preview-body {
    background-color: #0a1220 !important;
    padding: 24px;
}

/* 닫기 버튼 (검은색 X 표시를 하얀색으로 반전) */
#previewModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
}

#previewModal .btn-close:hover {
    opacity: 1;
}

/* 내부 영상 꽉 차고 둥글게 처리 */
#previewModal .modal-body video,
#previewModal .modal-body img {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}