/* 북촌무궁화 V1.15 — PC/모바일 각각 기존 YouTube 영상 표시 영역과 썸네일 정렬.
   PC: width:100%; max-width:2500px; height:2000px. 모바일: width:2500px; height:600px.
   2000px 높이 전체를 썸네일로 채우지 않고, 플레이어 중앙의 16:9 영역만 표시.
   썸네일 원본 자체에 여백이 포함된 경우는 CSS만으로 없애지 않는다. */
.intro .movie {background-color:#f6f3eb;}
.intro .movie .rzo_intro_poster {
    position:absolute;
    top:50%; left:50%;
    width:100%; max-width:2500px; min-width:2200px;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:cover;
    transform:translate(-50%,-50%);
    z-index:0;
    pointer-events:none;
}
/* 모바일: 원래의 2500×600 iframe 중앙에 표시되는 16:9 영상은 1066.67×600.
   썸네일도 정확히 같은 크기와 위치로 표시하여 자연스럽게 전환. */
@media (max-width:750px) {
    .intro .movie .rzo_intro_poster {
        width:1066.6667px;
        min-width:1066.6667px;
        max-width:none;
        height:600px;
        aspect-ratio:auto;
    }
}
/* 실제 재생되면 영상만 서서히 드러냄: V1.04 이벤트 타이밍 유지 */
.intro .movie iframe {opacity:0; transition:opacity .35s ease;}
.intro .movie.show iframe {opacity:1; transition:opacity 1.1s ease;}
@media (prefers-reduced-motion:reduce) {
    .intro .movie iframe, .intro .movie.show iframe {transition:none;}
}

/* 북촌무궁화 V1.07: 8개 추가 배경 영상의 썸네일과 실제 유튜브 영상 표시 영역을 동일하게 맞춤.
   기존 style.css의 iframe 크기/위치는 변경하지 않음. */
.balance .movie .rzo_bg_poster,
.brand .brand_movie .video-container .rzo_bg_poster,
.menu .movie .rzo_bg_poster,
.together .together_movie li .rzo_bg_poster {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    max-width:none;
    object-fit:cover;
    pointer-events:none;
    z-index:0;
}
/* balance: iframe 2500x800 안의 16:9 실제 영상 화면은 1422.22x800. */
.balance .movie .rzo_bg_poster {width:1422.2222px; height:800px;}
/* 브랜드: iframe/video-container 양쪽 모두 16:9. */
.brand .brand_movie .video-container .rzo_bg_poster {width:100%; height:100%;}
.brand .brand_movie .video-container iframe {z-index:1;}
/* together: iframe은 폭 2500px, 높이 100%; 영상은 16:9 크기로 중앙에 표시. */
.together .together_movie li .rzo_bg_poster {height:100%; max-height:1406.25px; width:auto;}
/* 메뉴: iframe 2500x2000의 중앙 16:9 영상은 2500x1406.25. */
.menu .movie .rzo_bg_poster {width:2500px; height:1406.25px;}
/* 유튜브 영상 로딩 중 썸네일, 재생 시작 시 1.1초 동안 자연스럽게 전환. */
.balance .movie iframe,
.brand .brand_movie .video-container iframe,
.together .together_movie li iframe,
.menu .movie iframe {opacity:0; transition:opacity .35s ease;}
.balance .movie.show iframe,
.brand .brand_movie .movie.show iframe,
.together .together_movie li.show iframe,
.menu .movie.show iframe {opacity:1; transition:opacity 1.1s ease;}
@media (prefers-reduced-motion: reduce) {
    .balance .movie iframe, .balance .movie.show iframe,
    .brand .brand_movie .video-container iframe, .brand .brand_movie .movie.show iframe,
    .together .together_movie li iframe, .together .together_movie li.show iframe,
    .menu .movie iframe, .menu .movie.show iframe {transition:none;}
}
/* 기존 모바일 style.css는 balance/menu iframe 높이를 700px로 변경한다. */
@media (max-width:750px) {
    .balance .movie .rzo_bg_poster,
    .menu .movie .rzo_bg_poster {width:1244.4444px; height:700px;}
}
