/* File: /theme/responsive/side/youtube/css/css.css */

/* ✅ 공통(기본 구조) */
.section-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 0;
}

.video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

/* YouTube가 #player에 iframe을 주입 */
#player {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

/* ✅ PC (481px 이상): 한 화면(100vh) 차지 + 기존 커버 느낌 유지 */
@media (min-width: 481px) {
    .section-video {
        height: calc(100vh - 100px);
    }
    /* 기존 PC 커버 느낌 유지: 세로 기준 확장 */
    #player {
        width: 200vh;              /* 가로 확장 (좌우 잘림 허용) */
        height: 112.5vh;           /* 16:9 비율 */
    }
}

/* ✅ 모바일(480px 이하): 전체 화면에서 100px 제외 (잘림 허용, cover) */
@media (max-width: 480px) {
    .section-video {
        height: calc(100svh - 100px);   /* 보이는 화면 - 100px */
    }
    #player {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        height: 56.25vw;                /* 16:9 */
        min-width: 177.78vh;            /* 세로 대비 보정 */
        min-height: 100vh;
    }
}

/* ✅ 도트 네비게이션 */
.video-background .video-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}
.video-background .video-pagination span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}
.video-background .video-pagination span.active {
    width: 30px;
    height: 10px;
    border-radius: 10px;
    background: #fff;
}
@media (max-width: 480px) {
    .video-background .video-pagination {
        top: 50%;
        left: 20px;
        bottom: auto;
        transform: translateY(-50%);
        flex-direction: column;        
        gap: 8px;
    }

    .video-background .video-pagination span {
        width: 10px;
        height: 10px;
    }

    /* 활성화 시 세로로 길어지게 */
    .video-background .video-pagination span.active {
        width: 10px;
        height: 30px;
        border-radius: 10px;
        background: #fff;
    }
}