/* video-popup.css
 * 별도 유지: ui_content.css 수정 없이 팝업 비디오 전용 오버라이드
 * 작성일: 2025-09-28
 * 목적: .pop_movie 내부 video / video.js / iframe / fallback video를 컨테이너(full) 사이즈로 맞춤
 */

/* 공통: 팝업 컨테이너가 on 상태일 때 내부 미디어 요소를 전체 채우기 */
.pop_movie .video-js,
.pop_movie .video-js .vjs-tech,
.pop_movie > video,
.pop_movie iframe,
.pop_movie #plainVideoWrap,
.pop_movie #plainVideoWrap video {
  width:100% !important;
  height:100% !important;
  display:block;
}

/* fallback plain video 래퍼를 컨테이너 높이와 동일하게 */
.pop_movie #plainVideoWrap { position:relative; background:#000; }

/* 실제 영상 객체 채우기 + 필요 시 잘림 허용 (전체 채우기) */
.pop_movie .video-js .vjs-tech,
.pop_movie > video,
.pop_movie #plainVideoWrap video { object-fit:cover; background:#000; }

/* contain 모드가 필요할 경우 .pop_movie에 data-fit="contain" 속성 부여 */
.pop_movie[data-fit="contain"] .video-js .vjs-tech,
.pop_movie[data-fit="contain"] > video,
.pop_movie[data-fit="contain"] #plainVideoWrap video { object-fit:contain; }

/* video.js 플레이어 자체 여백/정렬 보장 */
.pop_movie .video-js { background:#000; }

/* 작은 높이(모바일)에서도 동일 규칙 적용: 기존 ui_content.css의 height 값(240px 등)을 그대로 사용 */
@media (max-width:1300px) {
  .pop_movie .video-js,
  .pop_movie .video-js .vjs-tech,
  .pop_movie > video,
  .pop_movie iframe,
  .pop_movie #plainVideoWrap,
  .pop_movie #plainVideoWrap video { width:100% !important; height:100% !important; }
}

/* 접근성: 재생 영역이 포커스 되었을 때 외곽선 가시성 확보 (video.js 기본 outline 제거 대비) */
.pop_movie .video-js:focus-within { outline:2px solid #1aa3ff; outline-offset:2px; }