body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.wrap2 {
    position: relative;
    height: calc(100% - 67px) !important;
}


/* 토스트 이미지 */
.shorts_toast {
    display: none;
    position: absolute;
    bottom: 56px;
    left: 50%;
    z-index: 3;
    background-color: rgba(18, 18, 18, 0.50);
    border-radius: 25px;
    animation: bounce 0.6s 0.1s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate;
    transform: translateX(-50%);
}
@keyframes bounce {
    to {
        transform: translate(-50%, -10px); 
    }
}

.shorts_toast .text_box {
    padding: 8px 12px; 
    box-sizing: border-box; 
    display: flex;
}
.shorts_toast .text_box span {
    color: #fff; 
    font-size: 12px;
}

.shorts_toast .text_box img {
    width: 12px;
    padding-right: 8px;
}

.shorts_swiper {}
.shorts_swiper .swiper-button-prev {
    top: 50% !important;
    right: 30px !important;
    left: auto !important;
    background-image:  url(../img/short_Button_Up.png) !important;
}
.shorts_swiper .swiper-button-next {
    top: 56% !important;
    right: 30px !important;
    background-image:  url(../img/short_Button_Down.png) !important;
}

.shorts_container {
    position: relative;
    max-width: calc(56.25vh - 60px);
    margin: 0 auto;
    height: 100% !important;
    padding: 10px 0 30px 0;
    box-sizing: border-box;
}

.swiper-container {
    width: 100%;
    height: 100%;
    scroll-snap-type: y mandatory;
}

.shorts_inner {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.swiper-slide {
    width: 100%;
    height: 100% !important;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    aspect-ratio: 9/16;
    border-radius: 10px;
    background-color: rgba(0 , 0 , 0 , 0.8);
}
.swiper-slide .shorts {
    width: 100%;
    height: 100%;
}

.swiper-slide .shorts video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}


/* 투표하기 */
.shorts_btn {
    position: absolute;
    bottom: 50px;
    right: -70px;
    z-index: 1;
}
.shorts_btn ul li {margin-bottom: 26px; text-align: center;}
.shorts_btn ul li p {text-align: center; padding-top: 5px; font-size: 12px; color: #999; font-weight: bold;}
.shorts_btn .img_box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
}
.short_vote_btn.active .img_box {
    /* background-color: #fff; */
    /* border: 1px solid #ef4d4d; */
}
.short_vote_btn.active p {color: #ef4d4d;}
.shorts_btn .img_box img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
.short_vote_btn .img_box .web_short_heart {}
.short_vote_btn .img_box .mo_short_heart {display: none; width: 24px; height: 24px;}


/* 비디오 플레이 음소거 버튼 */
.shorts_video_icon {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 999;
    display: flex;
    gap: 10px;
}
.shorts_video_icon .img_box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    background-color: rgba(0 , 0 , 0 , 0.5);
}

.shorts_video_icon .img_box img {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}

.shorts_video_icon2 {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 999;
    display: flex;
    gap: 10px;
}
.shorts_video_icon2 .img_box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    background-color: rgba(0 , 0 , 0 , 0.5);
}

.shorts_video_icon2 .img_box img {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}


/* 비디오 진행 시간 */
.progress_bar {
    position: absolute;
    bottom: 10px;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 3px;
    background-color: rgba(255 , 255 , 255 , 0.5);
}

.progress-bar .progress_inner {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.progress_fill {
    position: absolute;
    height: 100%;
    width: 0%;
    background: #ef4d4d;
    transition: width 0.1s ease;
}


/* 모바일 아래로 버튼 */
.video_arrow_box {
    position: absolute; 
    bottom: -2px; 
    left: 50%; 
    transform: translate(-50% , -50%);
    animation: bounce 0.6s 0.1s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate;
}
@keyframes bounce {
    to {
        transform: translate(-50%, -13px); 
    }
}
.video_arrow_box.active {display: none;}


/************************************ 반응형 ************************************/
@media (max-width : 1200px){
    .shorts_swiper {display: none;}
    .video_arrow_box {display: none;}
}

@media (max-width : 630px){

    .wrap2 {height: 100% !important; background-color: #333;}

    .shorts_container {padding: 0 0;}
    .swiper-slide {border-radius: 0;}
    .shorts_inner {border-radius: 0;}

    .shorts_btn ul li p {color: #fff;}
    .shorts_btn {right: 15px; bottom: 80px;}
    .shorts_btn .img_box {background: rgba(18, 18, 18, 0.50); border-color: transparent !important;}  

    .short_vote_btn .img_box .web_short_heart {display: none;}
    .short_vote_btn .img_box .mo_short_heart {display: block;}

    .progress_bar {bottom: 60px;}
}

@media (max-width : 406px){
    .swiper-slide {border-radius: 0;}
};