/* 팝업 공통 */
.my_popup {
    display: none;
    position: absolute;
    width: min(90%, 450px);
    height: auto;
    border: 0; 
}

/* 에러, 확인 팝업 */
#error_popup, #confirm_popup {
    border-radius: min(20px, max(5px, 4vw));
    background-color: #fff;
    min-height: min(220px, max(44vw, 200px));
    max-height: min(550px, max(110vw, 500px));
    width: 90%;
    max-width: 450px;
    min-width: 300px;
    height: auto;
}

.my_popup .content {
    width: 100%;
    height: auto;
    min-height: min(220px, max(44vw, 200px));
    text-align: center;
    padding: min(40px, max(8vw, 20px)) 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.my_popup .content > * {
    width: 100%;
    height: auto;
}
.my_popup .msg_title {
    font-size: 1.25rem;
    font-weight: 600;
}
.my_popup .msg_text {
    font-size: 1rem;
    line-height: 1.5em;
    word-break: keep-all;
    margin: 1rem 0;
}
.my_popup .msg_desc {
    display: block;
    width: 100%;
    height: auto;
    font-size: .875rem;
    line-height: 1.5em;
    text-align: justify;
    padding: 0 1em;
    color: #444;
    margin-bottom: 1rem;
}
.my_popup .msg_desc > a  {
    color: #000;
    text-decoration: underline;
}
.my_popup > .close {
    position: absolute;
    display: block;
    width: min(22px, max(3.4vw, 18px));
    height: auto;
    top: min(10px, max(2vw, 5px));
    right: min(10px, max(2vw, 5px));
    z-index: 10;
}
.my_popup > .close > img {
    display: block;
    width: 100%;
    height: auto;
}
.my_popup .ok_btn_area {
    display: block;
    width: 100%;
    height: auto;
}
.my_popup .ok_cancel_btn_area {
    display: flex;
    width: 100%;
    height: auto;
    padding: 0 min(30px, max(6vw, 15px));
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: .75em;
}

/* 팝업 확인 버튼 */
.my_popup .ok_btn_area > a, .my_popup .ok_btn_area > input {
    display: block;
    margin: 0 auto;
    padding: .5rem 0;
    line-height: 1em;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 1.6875rem;
    text-decoration: none;
    text-align: center;
    width: min(240px, max(48vw, 200px));
}

/* 팝업 예, 아니오 버튼 */
.my_popup .ok_cancel_btn_area > a, .my_popup .ok_cancel_btn_area > input {
    display: block;
    width: 100%;
    padding: .5rem 0;
    line-height: 1em;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 1.6875rem;
    text-decoration: none;
    text-align: center;
}

.my_popup > .popup_content {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.my_popup > .popup_content {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.my_popup > .popup_content > iframe {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 팝업 배경 */
#bg_popup {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
}