/* BASIC css start */
/* =========================================================
   EVENT POPUP
   ========================================================= */

#popup-event .layer-content { 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    width: fit-content; 
    max-width: calc(100vw - 40px);
    height: auto; 
    border-radius: var(--cw-size-12); 
    font-size: var(--cw-size-14); 
    line-height: var(--cw-size-20); 
    background-color: var(--cw-color-white); 
    text-align: center; 
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10); 
} 


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

#popup-event .layer-content .content-wrap {
    width: fit-content;
    max-width: 100%;
}


/* ---------------------------------------------------------
   SWIPER IMAGE
   --------------------------------------------------------- */

#popup-event .layer-content .content-wrap .swiper .swiper-slide { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

#popup-event .layer-content .content-wrap .swiper .swiper-slide img { 
    display: block;
    width: auto;
    max-width: 100%; 
    height: auto;
} 


/* ---------------------------------------------------------
   SWIPER PAGINATION
   --------------------------------------------------------- */

#popup-event .layer-content .content-wrap .swiper .swiper-pagination { 
    width: 100%; 
    bottom: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: var(--cw-size-6); 
    padding: var(--cw-size-8) var(--cw-size-20); 
} 

#popup-event .layer-content .content-wrap .swiper .swiper-pagination .swiper-pagination-switch { 
    width: var(--cw-size-8); 
    height: var(--cw-size-8); 
    border-radius: var(--cw-size-10); 
    background-color: var(--cw-heading-color); 
    opacity: 0.4; 
} 

#popup-event .layer-content .content-wrap .swiper .swiper-pagination .swiper-pagination-switch.swiper-active-switch { 
    opacity: 1; 
} 


/* ---------------------------------------------------------
   SINGLE IMAGE
   --------------------------------------------------------- */

#popup-event .layer-content .content-wrap .attach-img { 
    width: fit-content;
    max-width: 100%;
}

#popup-event .layer-content .content-wrap .attach-img a { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

#popup-event .layer-content .content-wrap .attach-img img { 
    display: block;
    width: auto;
    max-width: 100%; 
    height: auto;
} 


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

#popup-event .layer-content .content-wrap .txt-box { 
    padding: var(--cw-size-16) var(--cw-size-20); 
    border-bottom: 1px solid var(--cw-color-30); 
    color: var(--cw-color-80); 
    text-align: center; 
} 


/* ---------------------------------------------------------
   BOTTOM BUTTON
   --------------------------------------------------------- */

#popup-event .layer-content .content-btns { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    width: 100%;
    box-sizing: border-box;
    padding: var(--cw-size-16) var(--cw-size-20); 
    background-color: var(--cw-color-white); 
} 

#popup-event .layer-content .content-btns a { 
    color: var(--cw-heading-color); 
} 

#popup-event .layer-content .content-btns a:first-of-type { 
    display: flex; 
    align-items: center; 
    padding-left: 0; 
    color: var(--cw-color-80); 
} 


/* =========================================================
   PC
   992px 이상
   ========================================================= */

@media (min-width: 992px) {

    /* -----------------------------------------------------
       PC 상위 그룹
       기존에 정상 작동했던 max-content 유지
       ----------------------------------------------------- */

    [id^="MAKESHOPLY"] #popup-event .layer-content {
        width: max-content !important;
        max-width: 90vw !important;
    }

    [id^="MAKESHOPLY"] #popup-event .layer-content .content-wrap {
        width: max-content !important;
        max-width: 90vw !important;
    }


    /* -----------------------------------------------------
       PC 이미지
       MakeShop 기본 360px 제한 해제
       ----------------------------------------------------- */

    [id^="MAKESHOPLY"] #popup-event .layer-content .content-wrap img {
        display: block;
        width: auto !important;
        max-width: none !important;
        height: auto !important;

        /* 기본 PC에서는 원본 높이 유지 */
        max-height: none !important;
    }

}


/* =========================================================
   PC - 화면 높이가 부족한 경우
   4:3 / 가로형 / 낮은 높이 화면 대응
   ========================================================= */

@media (min-width: 992px) and (max-height: 850px) {

    [id^="MAKESHOPLY"] #popup-event .layer-content .content-wrap img {
        width: auto !important;
        max-width: 90vw !important;

        /* 이미지 + 하단 버튼이 모두 보이도록 */
        max-height: calc(100vh - 100px) !important;

        height: auto !important;
    }

}


/* =========================================================
   MOBILE
   991.98px 이하
   ========================================================= */

@media (max-width: 991.98px) { 

    div[oneframe-detail-type="FULL"] .event_inner > div { 
        position: absolute; 
        bottom: 0; 
    } 

    #popup-event .layer-content { 
        position: absolute; 
        top: auto; 
        bottom: 0; 

        /* 기존 모바일 크기 유지 */
        width: 85vw !important;
        max-width: 85vw !important;

        height: auto;
        font-size: var(--cw-size-13); 
        line-height: var(--cw-size-18); 
        border-radius: var(--cw-size-12);
    } 

    #popup-event .layer-content .content-wrap {
        width: 100%;
        max-width: 100%;
    }

    #popup-event .layer-content .content-wrap .swiper .swiper-slide img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    #popup-event .layer-content .content-wrap .attach-img {
        width: 100%;
        max-width: 100%;
    }

    #popup-event .layer-content .content-wrap .attach-img img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    #popup-event .layer-content .content-btns { 
        padding: var(--cw-size-9) var(--cw-size-20);
        background-color: var(--cw-color-white);
    } 

}


/* =========================================================
   MOBILE / TABLET
   화면 높이가 부족한 경우
   ========================================================= */

@media (max-width: 991.98px) and (max-height: 850px) {

    #popup-event .layer-content {
        max-height: calc(100vh - 20px) !important;
    }

    #popup-event .layer-content .content-wrap .swiper .swiper-slide img,
    #popup-event .layer-content .content-wrap .attach-img img {
        width: 100% !important;
        max-width: 100% !important;

        /* 하단 버튼 영역을 확보 */
        max-height: calc(100vh - 65px) !important;

        height: auto !important;
        object-fit: contain;
    }

}


/* =========================================================
   MOBILE / TABLET
   4:3 및 가로 화면
   ========================================================= */

@media (max-width: 991.98px) and (orientation: landscape) {

    #popup-event .layer-content {
        width: 85vw !important;
        max-width: 85vw !important;
        max-height: calc(100vh - 20px) !important;
    }

    #popup-event .layer-content .content-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    #popup-event .layer-content .content-wrap .swiper .swiper-slide img,
    #popup-event .layer-content .content-wrap .attach-img img {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 65px) !important;
        height: auto !important;
        object-fit: contain;
    }

}
/* BASIC css end */