.plyr {
    height: 100%;
    width :100%;
}
#wrapper{
    display: flex;
    justify-content:center;
    width: 100%;
    /*height: 600px;*/
    aspect-ratio: 16 / 9;
    background-color: black;
}
.plyr__video-wrapper {
    height: 100%;
}
.plyr__video-wrapper iframe {
    width: 100%;
    height: 100%;
}

button.plyr__control--overlaid {
    --tw-bg-opacity: 1;
    background-color: rgb(246 59 66 / var(--tw-bg-opacity))
}

.plyr__video-wrapper {
    height: 100%
}

.plyr__poster {
    background-size: cover;
    background-position: top
}

.plyr__volume {
    max-width: 33px;
    min-width: 0
}

.plyr__volume input[data-plyr=volume] {
    display: none;
    width: 87px;
    position: absolute;
    transform: rotate(270deg);
    top: -42px;
    left: -33px;
    height: 25px;
    padding-left: 18px
}

.plyr__volume:hover input[data-plyr=volume],.plyr__volume input[data-plyr=volume]:hover {
    display: block!important
}

:root {
    --plyr-color-main: #F63B42; /* 기본 색상 - 분홍색 */
    --plyr-captions-background: rgba(0, 0, 0, 0.5); /* 자막 배경 - 반투명 검정색 */
}

/* 여기에 스킵 오버레이 애니메이션 추가 */
.skip-overlay {
    animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* 세로 동영상 처리 */
#wrapper.is-vertical {
    /* aspect-ratio: unset; */ /* 기존 16/9 비율 제한 해제 */
    height: auto;        /* 비디오 본연의 비율에 따라 높이 자동 조절 */
    /* width: 100%;      너비는 여전히 100%를 유지하며, 높이가 auto로 풀림 */
}

/* PC일 때 poster는 높이 100% 이므로, is-vertical에 따른 별도 스타일 불필요 */
/* #wrapper.is-vertical .plyr__poster { height: 100%; } */


/* ------------------------------------------------------------------------- */
/* --- 모바일 환경 (미디어 쿼리 내부) --- */
@media (max-width: 768px) { /* 태블릿/모바일 경계, 디자인의 breakpoint에 맞게 조정하세요 */

    /* 모바일에서 #wrapper 기본 스타일 (가로 영상이거나 세로 영상인데 is-vertical 스타일이 없을 때) */
    /* 모바일에서는 기본적으로 너비를 100% 뷰포트 너비로, 높이는 자동 조절 */
    #wrapper {
        width: 100%;   /* 뷰포트 너비에 꽉 차게 */
        aspect-ratio: 16 / 9; /* 모바일에서 가로/세로 비디오 모두 높이가 동적으로 조절되도록 */
        height: auto;
    }

    /* 모바일 환경에서 세로 영상 (#wrapper.is-vertical) */
    #wrapper.is-vertical {
        height: 435px; /* 모바일일때 wrapper 높이: 435px */
        /*width: auto;   /* 높이에 맞춰 너비 자동 조절 */
        /* 필요하다면 여기에 세로 영상에 맞는 추가 스타일 (예: margin) */
    }

    /* 모바일 환경에서 세로 영상 Poster (.plyr__poster) */
    #wrapper.is-vertical .plyr__poster {
        height: auto; /* 모바일일때 poster 높이: auto */
        background-size: cover; /* 옵션: 포스터가 공간을 채우고 레터박스 없도록 (비율 안맞으면 잘림) */
        /* 기본 'contain'을 원하면 이 라인 제거 */
    }
}