.modal_wrap {position: fixed; background-color: #00000066; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 100;}


/* 모달 - 하단고정메뉴 */
.md_bottom {width: calc(100% - 32px); position: fixed; left: 50%; bottom: 15px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px;}
.md_bottom .menu_list {border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; width: 100%; background-color: #fff;}
.md_bottom .menu_list li {width: 100%; text-align: center; padding: 15px 10px; border-bottom: 1px solid #ddd;}
.md_bottom .menu_list li:last-child {border-bottom: none;}
.md_bottom .menu_list span {font-size: 15px;}
.md_bottom .menu_list li.cancel span {color: #FF4A4A;}
.md_bottom .menu_cancel {width: 100%; text-align: center; padding: 15px 10px; border-radius: 10px; background-color: #fff; color: #FF4A4A; font-weight: 600;}


/* 모달 - 알림 */
.md_alert {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 25px 20px; border-radius: 10px; display: flex; flex-direction: column; width: calc(100% - 32px); gap: 20px;}
.md_alert .md_text {display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%;}
.md_alert .md_text span {font-size: 16px; font-weight: 600;}
.md_alert .md_text p {font-size: 14px; color: #444;}

.md_button {display: flex; align-items: center; gap: 10px;}
.md_button.two button {width: 50%;}



/* ======== 팝업 모달 ======== */

.pop-wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 10px; overflow: hidden; width: 80vw;}
.pop-wrap .pop-img {width: 100%; max-height: 70vh;}
.pop-wrap .pop-btn {width: 100%; padding: 15px 0; text-align: center; font-size: 16px; color: #16854f; font-weight: 800; background-color: #fff;}

.award-none {display: flex; flex-direction: column; align-items: center; gap: 15px;}
.award-none em {width: 41px;}
.award-none p {font-size: 14px !important; color: #8f8f8f !important;}


/* ======== 바텀시트 ======== */

.bt-sheet {position: fixed; bottom: 0; left: 0; padding: 20px 20px 60px 20px; border-radius: 25px 25px 0 0; background-color: #f7f7f7; width: 100%;}
.bt-sheet.bg-wh {background-color: #fff;}
.bt-sheet .handlebar {width: 40px; height: 4px; border-radius: 20px; background-color: #ddd; margin: 0 auto;}
.bt-sheet .bt-con {display: flex; flex-direction: column; gap: 10px; margin-top: 20px;}
.bt-sheet .bt-con p {font-size: 16px; color: #555; font-weight: 600;}
.bt-sheet .bt-con ul {display: flex; flex-direction: column; gap: 10px;}
.bt-sheet .bt-con ul li {font-family: 'pretendard'; display: flex; align-items: center; justify-content: space-between; font-size: 16px; padding: 16px 15px; background-color: #fff; border-radius: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08);}
.bt-sheet .bt-con ul li div {background: url(../img/angle2.png) no-repeat center/cover; width: 15px; height: 15px;}

.modal_wrap .sort-con {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.modal_wrap .sort-con ul {border-radius: 10px; background-color: #fff; width: 80vw;}
.modal_wrap .sort-con ul li {font-size: 15px; color: #111; font-weight: 400; padding: 20px 0; text-align: center; border-bottom: 1px solid #ddd; width: 100%;}
.modal_wrap .sort-con ul li:last-child {border-bottom: none;}





/* ======== 이미지 모달 ======== */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.photo-wrap .close-btn {background: url(../img/close-btn.png) no-repeat center/cover; width: 35px; height: 35px; position: absolute; top: 20px; right: 20px;}
.photo-slide .swiper-wrapper {align-items: center;}
.photo-wrap .swiper-pagination {bottom: 30px !important; right: auto !important; left: 50% !important; transform: translateX(-50%); font-size: 16px; font-weight: 500; color: #fff !important; padding: 6px 12px !important;}
.photo-wrap .swiper-pagination > span {color: #fff !important;}
.swiper-pagination-current {font-weight: 500 !important;}

.photo-slide  {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-height: 80vh; width: 100%;}
.photo-slide .photo-con {width: 100%; height: 100%;}