@charset "utf-8";

.mediaplayer{
    margin-bottom: 5px;
}
.mejs__controls {
    flex-wrap: wrap;
    display: flex;
    z-index: 100;
    position: absolute;
    bottom: 0;
    height: 65px
}

.mejs__controls.hovered {
    opacity: 1!important;
    display: flex!important;
    background: rgba(255,0,0,.7);
    background: -webkit-linear-gradient(transparent,rgba(0,0,0,.35));
    background: linear-gradient(transparent,rgba(0,0,0,.35))
}

.mejs__controls .mejs__button>button:focus {
    outline: 0
}

.mejs__controls .mejs__time {
    font-size: .80rem;
    top: -1px;
    position: relative
}

.mejs__controls .mejs__speed-button {
    margin-left: auto;
    margin-right: 5px;
    top: 5px;
    height: 1.5rem;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .3));
    z-index: 100
}

.mejs__controls .mejs__speed-button button {
    font-size: 12px;
    margin-top: 5px
}

.mejs__controls .mejs__download-file.downloading {
    animation: mejs__loading-spinner 1s linear infinite
}

.mejs__controls .mejs__download-file svg {
    width: 1.05rem;
    height: 1.05rem;
    top: 1px;
    position: relative
}

.mejs__controls svg {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .3))
}

.mejs__controls .mejs-speed-selector,.mejs__controls .mejs__speed-selector {
    height: 180px;
    top: -180px;
    width: 55px
}

.mejs__controls .mejs-speed-selector .mejs__speed-selector-list-item,.mejs__controls .mejs__speed-selector .mejs__speed-selector-list-item {
    margin-bottom: 0;
    padding-top: 1px;
    padding-bottom: 1px
}

.mejs__controls .mejs-speed-selector.wide,.mejs__controls .mejs__speed-selector.wide {
    height: 90px;
    top: -90px;
    width: 110px
}

.mejs__controls .mejs-speed-selector.wide .mejs__speed-selector-list-item,.mejs__controls .mejs__speed-selector.wide .mejs__speed-selector-list-item {
    width: 50%;
    float: left
}
.mejs__time-rail {
    flex: 100%;
    padding-top: 0;
    position: relative;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .3));
    width: 100%;
    height: 1.5rem;
    margin: 0 .25rem;
    z-index: 100
}

.mejs__time-rail .mejs__time-slider {
    position: absolute;
    z-index: 101;
    top: 10px;
    padding-top: 7px;
    padding-bottom: 6px;
    height: 16px;
    background-clip: content-box;
}

.mejs__time-buffering,.mejs__time-current,.mejs__time-float,.mejs__time-float-corner,.mejs__time-float-current,.mejs__time-hovered,.mejs__time-loaded,.mejs__time-marker,.mejs__time-total {
    border-radius: 2px;
    cursor: pointer;
    display: block;
    height: 3px;
    position: absolute
}

.mejs__time-handle-content {
    border: 3px solid hsla(0, 0%, 100%, .9);
    border-radius: 50%;
    height: 12px;
    left: -7px;
    top: -8px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    width: 12px;
}

.mejs__time-rail .mejs__time-float {
    display: none!important
}

.mejs__container.soundon .mejs__time-current{
    background: #c00;
}
.mejs__container.soundon .mejs__time-handle-content{
    background: #c00;
}
.mejs__container.soundoff .mejs__time-current{
    background: #ffc126;
}
.mejs__container.soundoff .mejs__time-handle-content{
    background: #ffc126;
}

.mejs__fullscreen-button{
    margin-left: auto;
}

.mejs__container .custom-progress-bar {
    display: none;
    height: 3px;
    position: absolute;
    width: 100%;
    bottom: 0px;
    background: #eee;
    z-index: 4
}
.mejs__container.soundon .custom-progress-bar .inner {
    width: 0%;
    background: #c00;
    height: 100%
}
.mejs__container.soundoff .custom-progress-bar .inner {
    width: 0%;
    background: #ffc126;
    height: 100%
}

.mejs__horizontal-volume-slider{
    display:none;
}
.controls-mouse-hover {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 65px;
    z-index: 1;
    color: #fff;
}
.controls-playbtn {
    position: absolute;
    bottom: 0;
    width: 80px;
    height: 80px;
    z-index: 10000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:none;
}
.mejs__horizontal-volume-total {
    background: rgba(50, 50, 50, .8);
    height: 3px;
    top: 18px;
    width: 50px;
}

.mediaplayer-wrapper video:not(.mejs__container-fullscreen video) {
    object-fit: cover;
}

.mediaplayer-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
    .mediaplayer-wrapper .mejs__container,
    .mediaplayer-wrapper .mejs__fill-container {
    width: 100% !important;
    max-width: 100% !important;
}
/* 영상 실제 비율 유지 (JS에서 --mejs-aspect-pct 설정, 기본 16:9) */
.mediaplayer-wrapper .mejs__container {
    height: 0 !important;
    padding-bottom: var(--mejs-aspect-pct, 56.25%) !important;
}
.mediaplayer-wrapper .mejs__layer,
.mediaplayer-wrapper .mejs__mediaelement,
.mediaplayer-wrapper .mejs__overlay,
.mediaplayer-wrapper .mejs__overlay-play {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center;
}
.mediaplayer-wrapper .mediaplayer,
.mediaplayer-wrapper video.mediaplayer {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}






/* 일반 화면에서는 cover 사용 가능, 단 전체화면 video는 제외 */
.mediaplayer-wrapper video:not(.mejs__container-fullscreen video) {
    object-fit: cover;
}

/* 전체화면에서는 비율 유지 */
body .mejs__container-fullscreen .mediaplayer,
body .mejs__container-fullscreen video.mediaplayer {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000;
}

/* 전체화면에서 video를 중앙정렬 */
.mediaplayer-wrapper .mejs__container-fullscreen .mejs__mediaelement > mediaelementwrapper,
.mediaplayer-wrapper .mejs__container-fullscreen .mejs__mediaelement > div {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
    background: #000;
}

/* 전체화면에서는 padding-bottom 비율 트릭 제거 */
.mediaplayer-wrapper .mejs__container:not(.mejs__container-fullscreen) {
    height: 0 !important;
    padding-bottom: var(--mejs-aspect-pct, 56.25%) !important;
}

.mediaplayer-wrapper .mejs__container.mejs__container-fullscreen {
    height: 100% !important;
    padding-bottom: 0 !important;
}







/* 모바일: MEJS 플레이어 반응형 - 가로 잘림 방지 */
@media screen and (max-width: 1114px) {
    .volume-layer,
    .controls-mouse-hover,
    .custom-progress-bar,
    .controls-playbtn,
    .controls-playbtn a {
        pointer-events: none;
    }
    
    .mejs__container .custom-progress-bar {
        display: none;
        height: 3px;
        position: absolute;
        width: 100%;
        bottom: 0;              /* 수정 */
        left: 0;
        background: #eee;
        z-index: 20;            /* z-index도 올리자 */
    }

    .mejs__horizontal-volume-slider{
        display: none !important;
    }
    .mejs__time-buffering,.mejs__time-current,.mejs__time-float,.mejs__time-float-corner,.mejs__time-float-current,.mejs__time-hovered,.mejs__time-loaded,.mejs__time-marker,.mejs__time-total,.mejs__horizontal-volume-total {
        height: 4px;
    }

    .mejs__button{
        height: 48px;
    }
    .mejs__controls{
        height: 78px;
    }
    .mejs__button>button{
        margin: 14px 6px;
    }
    .mejs__time {
        padding: 20px 6px 0;
    }

    .mejs__time-current{
        transition: none;
    }
    .mediaplayer-wrapper .mejs__poster {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
     .mediaplayer-wrapper .mejs__poster img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
}