/* =========================================================================
   메인 슬라이더 (이미지 + MP4 영상) - 2026.10.19
   위치 : /UserData/sungji/Content/dimode.widget.slider.media.css
   공통 기본 스타일(/Content/dimode.widget.slider.css) 뒤에 불러옴
   ========================================================================= */

/* 가로로 이어 붙인 슬라이드 (이동은 스크립트가 transform 으로 처리) */
.media-slider .slider-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    will-change: transform;
}
.media-slider .slider-wrapper .slide {
    flex: 0 0 auto;
    position: relative;
    float: none;
}

/* ---- 영상 슬라이드 ---- */
.media-slider .slide video {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;          /* 영상 정보를 읽기 전에도 자리를 미리 잡아 화면이 흔들리지 않게 */
    object-fit: cover;
    background: #000;
    pointer-events: none;          /* 영상 위 클릭/끌기는 슬라이더가 처리 */
}
.media-slider .slide .video,
.media-slider .slide .video-container { width: 100%; margin: 0; padding: 0; }

/* 영상 슬라이드 링크 : 영상 전체를 덮는 투명 링크 */
.media-slider .slide .slide-link {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* 첨부 이미지 슬라이드 */
.media-slider .slide-image .each-img { margin: 0; }
.media-slider .slide-image .each-img img { display: block; width: 100%; height: auto; }

/* 버튼 / 점 : 슬라이드·링크보다 위 */
.media-slider .move-btn,
.media-slider .slider-dots { z-index: 3; }
.media-slider .move-btn:focus-visible,
.media-slider .slider-dots .each-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 현재 슬라이드 표시(점) : 기존 "반투명 검정" 은 어두운 영상 위에서 보이지 않아 흰색 막대 모양으로 변경 */
.media-slider .slider-dots { align-items: center; }
.media-slider .slider-dots .each-dot {
    background-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
    margin-bottom: 0 !important;
    transition: width .3s ease, background-color .3s ease !important;
}
.media-slider .slider-dots .each-dot.active {
    width: 34px !important;
    background-color: #fff !important;
    margin-bottom: 0 !important;
}

/* 태블릿 */
@media (max-width: 991px) {
    .media-slider .slider-dots { bottom: 4%; }
}
/* 모바일 : 점·화살표 크기 축소 (화면이 작아 슬라이드를 가리지 않도록) */
@media (max-width: 767px) {
    .media-slider .slider-dots { gap: 6px; bottom: 3%; }
    .media-slider .slider-dots .each-dot,
    .media-slider .slider-dots .each-dot.active { height: 7px !important; margin-bottom: 0 !important; }
    .media-slider .slider-dots .each-dot { width: 7px !important; }
    .media-slider .slider-dots .each-dot.active { width: 20px !important; }
    .media-slider .move-btn { width: 28px; height: auto; }
}

/* 움직임 줄이기 설정 사용자 : 슬라이드 전환 애니메이션 없이 */
@media (prefers-reduced-motion: reduce) {
    .media-slider .slider-wrapper { transition: none !important; }
}