/* pc */
.modal_cont {
    visibility: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 500;
}

.modal_cont.active {
    visibility: visible;
}

.modal_cont.active .modal_center {
    bottom: 0;
}

.modal_cont.active .dim {
    opacity: 1;
}

.modal_cont .dim {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    /* Safari 대응 */
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: all 300ms;
}

.modal_cont .modal_center {
    position: absolute;
    background-color: #fff;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 16px 16px 0 0;
    transition: all 300ms;
}

.modal_size_mobile {
    width: 100%;
    max-width: 600px;
}

.modal_cont .modal_head {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal_cont .modal_head h2 {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

.modal_cont .modal_content {
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
}

.modal_cont .modal_close {
    background-color: transparent;
    display: block;
    width: 100%;
    border-top: 1px solid #ECECEC;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 400;
    color: #5E5E5E;
}

/* 반려견 프로필 모달 */
.modal_cont.modal_profile .modal_content {
    padding: 12px 24px 20px;
}

.modal_profile .alert_wrap {
    margin-bottom: 24px;
}

.modal_profile .profile_list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 32px;
}

.modal_profile .profile_list .item_box {
    width: calc((100% - 48px) / 3);
    aspect-ratio: 1/1;
    position: relative;
    background-color: transparent;
    border-radius: 50%;
}

.modal_profile .profile_list .list_item {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: 50%;
    overflow: hidden;
}

.modal_profile .profile_list .list_item img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.modal_profile .profile_list .item_box.active::before {
    content: '';
    display: block;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 50%;
    border: 2px solid var(--sub-color);
    position: absolute;
    top: 0;
    left: 0;
}

.modal_profile .profile_list .item_box.active::after {
    content: '';
    display: block;
    width: 24%;
    height: 0;
    padding-bottom: 24%;
    background: url(/static/app_www/base/img/icon_check_circle_or.png) no-repeat center/contain;
    position: absolute;
    top: 0;
    right: 3px;
}

.modal_profile .modal_content .btn_default {
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
}

/* 주소 검색 */
#edk_modal_addr>div {
    width: 100% !important;
}

/* 미션 인증완료 보류 */
.modal_mission_complete .modal_content {
    padding: 0 24px 20px;
}

.modal_mission_complete .complete_wrap {
    background-color: #F8F8F8;
    border-radius: 6px;
    overflow: hidden;
}

.modal_mission_complete .complete_head {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-bottom: 1px solid #fff;
    gap: 8px;
}

.modal_mission_complete .complete_head .share_btn {
    display: flex;
    background-color: transparent;
    width: 32px;
}

.modal_mission_complete .complete_body {
    background-color: #F8F8F8;
    border-radius: 6px;
    /* padding: 16px 12px; */
}

.modal_mission_complete .text_wrap {
    padding: 16px 12px;
}

.modal_mission_complete .mission_name {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    text-align: center;
}


.modal_mission_complete .sub_mission_name {
    font-size: 14px;
    font-weight: 500;
    color: #5E5E5E;
    margin-bottom: 6px;
    text-align: center;
}

.modal_mission_complete .mission_cnt {
    font-size: 38px;
    font-weight: 600;
    color: var(--sub-color);
    text-align: center;
}

.modal_mission_complete .bg_wrap {
    display: flex;
    width: 100%;
}

.modal_mission_complete .copy_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px 16px;
}

.modal_mission_complete .season_info {
    display: flex;
    gap: 4px;
    align-items: center;
}

.modal_mission_complete .season_info .icon_wrap {
    display: flex;
    border-radius: 50%;
    width: 20px;
    aspect-ratio: 1/1;
    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* .modal_mission_complete .season_info .icon_wrap img {
    height: 100%;
    object-fit: cover;
    object-position: center;
} */

.modal_mission_complete .season_info .season_name {
    font-size: 12px;
    font-weight: 400;
    color: #222;
}

.modal_mission_complete .copy_wrap .img_wrap {
    display: flex;
    width: 66px;
}

/* 게시글 선택 필터 */
.modal_cont.modal_post_filter .modal_content {
    padding: 12px 24px 20px;
}

.modal_post_filter .input_area {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.modal_post_filter .btn_group {
    margin-top: 32px;
}

.modal_post_filter .btn_default {
    padding: 11px 0;
    font-size: 16px;
    font-weight: 500;
}

/* 게시글,댓글 편집 모달 */
.modal_cont.modal_edit .modal_content {
    padding: 12px 24px 20px;
}

.modal_edit .btn_default {
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
}

/* 대표펫 프로필 모달 */
.modal_cont.modal_pet_profile {
    z-index: 501;
}

.modal_cont.modal_pet_profile .modal_content {
    padding: 12px 24px 20px;
}

.modal_pet_profile .main_profile {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.modal_pet_profile .main_profile .profile_wrap {
    position: relative;
    max-width: 110px;
}

.modal_pet_profile .profile_wrap .img_wrap {
    border: 3px solid #EBEBEB;
    /* padding: 3px; */
}

.modal_pet_profile .profile_wrap .wappen_img {
    width: 34px;
    aspect-ratio: 1/1;
    display: flex;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}

.modal_pet_profile .main_profile .pet_name_box {
    display: flex;
    justify-content: center;
    gap: 1px;
    align-items: center;
    margin-bottom: 6px;
}

.modal_pet_profile .pet_name_box .name {
    font-size: 18px;
    font-weight: 500;
}

.modal_pet_profile .pet_name_box .badge {
    display: flex;
    width: 18px;
    aspect-ratio: 1/1;
}

/* 반려견 이름 옆 보호자 이름. 피드·상세의 '반려견 | 보호자' 표기와 같은 구분선을 쓴다. */
.modal_pet_profile .pet_name_box .owner_name {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #5E5E5E;
}

.modal_pet_profile .pet_name_box .owner_name::before {
    content: '';
    display: block;
    height: 10px;
    border-left: 1px solid #BBBBBB;
}

/* 비반려인은 반려견 생일 칸 대신 이 문구가 이름 아래에 온다. */
.modal_pet_profile .main_profile .no_pet_msg {
    font-size: 13px;
    color: #5E5E5E;
    text-align: center;
}

.modal_pet_profile .main_profile .pet_birth_box {
    border: 1px solid #FF704D;
    border-radius: 100px;
    padding: 5px 12px;
    font-size: 12px;
    color: #222;
    width: fit-content;
}

.modal_pet_profile .main_profile .pet_birth_box,
.modal_pet_profile .pet_birth_box .gender {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.modal_pet_profile .pet_birth_box .gender::before {
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    background-color: #FFDEC4;
    border-radius: 50%;
}

.modal_pet_profile .pet_birth_box .icon_wrap {
    display: flex;
    width: 16px;
    aspect-ratio: 1/1;
}

.modal_pet_profile .main_profile .btn_update {
    color: #5E5E5E;
    font-size: 12px;
}

.modal_pet_profile .pet_info_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal_pet_profile .pet_info_list .info_item {
    padding: 12px 16px;
    background-color: #F8F8F8;
    border-radius: 4px;
}

.modal_pet_profile .pet_info_list .info_title {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 4px;
    color: #5E5E5E;
    font-size: 12px;
}

.modal_pet_profile .pet_info_list .info_title::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: url("/static/app_www/base/img/icon_foot_g.png") center / cover no-repeat;
}

.modal_pet_profile .pet_info_list .info_content {
    color: #222;
    font-size: 12px;
}

/* 번개모임 참가인원 modal */
.modal_cont.modal_meet_people .modal_content {
    padding: 12px 24px 32px;
}

.modal_meet_people .meet_people_list>li:not(:last-child) {
    margin-bottom: 12px;
}

.modal_meet_people .meet_people_list .profile_img {
    width: 48px;
}

.modal_meet_people .meet_people_list .poster_content {
    gap: 10px;
}

.modal_meet_people .meet_people_list .info_box {
    font-size: 14px;
}

/* 관리자 팝업 */
.edk_admin_popup {
    border-radius: 6px;
    overflow: hidden;
    /* border: none; */
}

.edk_admin_popup .pop_section,
.edk_admin_popup .pop_img_wrapper {
    height: calc(100% - 39px);
}

.edk_admin_popup .pop_bottom {
    padding: 0;
    gap: 0;
    height: 39px;
    border: none;
}

.edk_admin_popup .pop_bottom .btn_admin_popup {
    width: 50%;
    padding: 11px 0;
    font-size: 12px;
    color: #5E5E5E;
    font-weight: 400;
}

.edk_admin_popup .pop_bottom .btn_admin_popup:not(:last-child) {
    border-right: 1px solid #CFCFCF;
}

.edk_admin_popup.popup_birth {
    width: 420px;
    aspect-ratio: 1/1.427;
    left: 50%;
}

.edk_admin_popup.popup_birth .pop_img_wrapper {
    position: relative;
}


.edk_admin_popup.popup_birth .pop_text_wrap {
    position: absolute;
    top: 6.79%;
    left: 0;
    width: 100%;
    padding: 0 12px;
    text-align: center;
}

.edk_admin_popup.popup_birth .pop_text_wrap p {
    color: #222;
    font-size: 18px;
}

.edk_admin_popup.popup_birth .pop_text_wrap .strong {
    font-size: 23px;
    font-weight: 600;
}

/* ID카드 */
.modal_id_card .modal_content {
    padding: 0 24px 20px;
}

/* .modal_id_card .id_slide_wrap {
    position: relative;
} */
.modal_id_card .swiper-slide {
    display: flex;
}

.modal_id_card .card-swiper-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.modal_id_card .swiper-pagination-bullet {
    opacity: 0.3;
    width: 6px;
    height: 6px;
}

.modal_id_card .swiper-pagination-bullet-active {
    width: 12px;
    border-radius: 50px;
    background-color: #000;
    opacity: 0.6;
}

.modal_id_card .live_time {
    position: absolute;
    left: 6px;
    bottom: 2px;
    z-index: 1;
    font-size: clamp(18px, 2dvw, 30px);
    font-weight: 600;
    color: #222;
}

.modal_id_card .card_desc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

.modal_id_card .card_desc .img_wrap {
    width: 22.28%;
    padding-bottom: 27.38%;
    height: 0;
    margin-top: 22.6%;
    margin-left: 8.8%;
    overflow: hidden;
    position: relative;
}

.modal_id_card .card_desc .img_wrap img {
    position: absolute;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.modal_id_card .card_desc .text_wrap {
    padding-left: 18%;
}

.modal_id_card .card_desc .text_wrap .card_txt {
    font-size: clamp(12px, 2vw, 18px);
    position: absolute;
    /* transform: translateY(-23%); */
}

.modal_id_card .modal_content .btn_default {
    margin-top: 32px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
}

/* 회원탈퇴 팝업 */
.modal_cont.modal_dropout .modal_content {
    padding: 12px 24px 20px;
}

.modal_dropout .alert_list {
    color: #5E5E5E;
    font-size: 14px;
    padding-left: 24px;
}

.modal_dropout .btn_default {
    margin-top: 32px;
    font-size: 16px;
    padding: 11px 0;
}

/* 와펜 모달 */
.modal_wappen .modal_content {
    padding: 0 24px 20px;
}

.modal_wappen .empty_wrap {
    padding: 63px 0;
}

.modal_wappen .wappen_list {
    display: flex;
    flex-wrap: wrap;
    gap: 25px 16px;
    margin-bottom: 32px;
}

.modal_wappen .wappen_item {
    width: calc((100% - 32px) / 3);
}

.modal_wappen .wappen_item .item_box {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    background-color: transparent;
    border-radius: 50%;
}

.modal_wappen .wappen_item .img_wrap {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: 50%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
}

.modal_wappen .wappen_item .img_wrap img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.modal_wappen .wappen_item .item_box.active::before {
    content: '';
    display: block;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 50%;
    border: 2px solid var(--sub-color);
    position: absolute;
    top: 0;
    left: 0;
}

.modal_wappen .wappen_item .item_box.active::after {
    content: '';
    display: block;
    width: 24%;
    height: 0;
    padding-bottom: 24%;
    background: url(/static/app_www/base/img/icon_check_circle_or.png) no-repeat center/contain;
    position: absolute;
    top: 0;
    right: 3px;
}

.modal_wappen .wappen_item .wappen_name {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #222;
    margin-top: 2px;
}

.modal_wappen .modal_content .btn_default {
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
}

.modal_edit.contact_edit .btn_group {
    margin-top: 0;
}

/* tablet */
@media screen and (max-width: 1023px) {}

/* mobile */
@media screen and (max-width: 767px) {

    .edk_admin_popup.popup_birth {
        transform: translate(-50%, -50%);
        width: calc(100% - 32px);
        max-height: calc(100dvh - 20px);
    }
}

/* Ovrrrides */

.modal_cont .modal_center {
    border-radius: 30px 30px 0 0 !important;
}

.modal_cont .modal_head {
    padding: 24px 30px 8px !important;
}

.modal_cont .modal_head h2 {
    font-size: 26px !important;
    font-weight: 500 !important;
}