/* =========================================================
   Responsive Popup
   해피아이의원
========================================================= */

* {
    margin: 0;
    padding: 0;
}


/* =========================================================
   Popup Base
========================================================= */

.rPopup {
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 99999;

    box-sizing: border-box;

    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    display: none;
}


/* 팝업 전체 프레임 */
.rPopup_wrap {
    display: inline-block;

    width: fit-content;
    max-width: 500px;

    border: 1px solid #dee2e6;
    border-radius: 3px;

    overflow: hidden;

    box-sizing: border-box;

    background: #fff;
}

.rPopup_wrap button {
    background: none;
    outline: none;
    border: none;
}


/* =========================================================
   Header
========================================================= */

.rPopup_header {
    position: relative;

    width: 100%;
    height: 33px;

    background: #f1f3f5;

    cursor: move;

    overflow: hidden;

    box-sizing: border-box;
}

.rPopup_header > h3 {
    position: absolute;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    z-index: 7;

    text-align: left;

    box-sizing: border-box;

    padding: 0 35px 0 7px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.rPopup_header > h3:before {
    content: '';

    display: inline-block;

    width: 0;
    height: 100%;

    vertical-align: middle;
}

.rPopup_header > h3 > span {
    display: inline-block;

    vertical-align: middle;

    font-size: 17px;

    color: #343a40;
}

.rPopup_header > button {
    position: absolute;

    right: 0;
    top: 0;
    bottom: 0;

    z-index: 77;

    width: 34px;

    font-size: 25px;

    cursor: pointer;

    color: #222;
}


/* =========================================================
   Popup Body
========================================================= */

.rPopup_body {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 500px;

    min-width: 0;
    min-height: 0;

    background: #fff;

    overflow: hidden;

    text-align: left;

    font-size: 16px;

    box-sizing: border-box;
}


/* 이미지에 링크가 있는 경우 */
.rPopup_body > a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 500px;

    height: auto;

    text-decoration: none;

    box-sizing: border-box;
}


/*
   핵심

   - 500 × 700보다 작은 이미지는 확대하지 않음
   - 큰 이미지만 최대 500 × 700 범위로 축소
   - 원본 비율 유지
*/
.rPopup_body img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 500px !important;
    max-height: 700px !important;

    object-fit: contain;
    object-position: center;

    vertical-align: top;

    background: #fff;
}


/* PC 이미지 */
.rPopupDesktopImg {
    display: block;
}


/* 모바일 이미지가 별도로 존재할 경우 */
.rPopupMobileImg {
    display: none;
}


/* =========================================================
   Footer
========================================================= */

.rPopup_footer {
    position: relative;

    width: 100%;

    background: #f1f3f5;

    text-align: right;

    padding: 5px;

    overflow: hidden;

    box-sizing: border-box;

    white-space: nowrap;
}

.rPopup_footer label {
    display: inline-flex;

    align-items: center;

    vertical-align: middle;

    cursor: pointer;
}

.rPopup_footer label input {
    transform: scale(1.2);

    margin-right: 3px;
}

.rPopup_footer label span {
    padding: 0 5px;

    font-size: 16px;

    color: #444;
}

.rPopup_footer button {
    display: inline-block;

    vertical-align: middle;

    border: 1px solid #ced4da;

    background: #dee2e6;

    padding: 5px 7px;

    border-radius: 5px;

    cursor: pointer;

    color: #333;
}


/* =========================================================
   Mobile Popup
========================================================= */

.rPopup_mobile {
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    z-index: 999999 !important;

    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;

    padding: 12px !important;

    background: rgba(0, 0, 0, 0.70) !important;

    text-align: center;

    font-size: 0;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    pointer-events: none;

    /*
       flex를 사용하지 않는 이유:
       기존 rpopup.js 구조와 호환성을 유지하기 위함
    */
}


/* 세로 중앙정렬 */
.rPopup_mobile:before {
    content: '';

    display: inline-block;

    width: 0;
    height: 100%;

    vertical-align: middle;
}


/* =========================================================
   Mobile Wrapper
========================================================= */

.rPopup_mobile .rPopup_wrap {
    position: relative;

    display: inline-block;

    width: fit-content !important;

    /*
       모바일 화면을 넘지 않도록 제한
       최대 PC 규격 500px
    */
    max-width: min(500px, calc(100vw - 24px)) !important;

    vertical-align: middle;

    box-sizing: border-box;

    background: #fff;

    overflow: hidden;

    pointer-events: auto;

    font-size: 16px;
}


/* =========================================================
   Mobile Header
========================================================= */

.rPopup_mobile .rPopup_header {
    width: 100% !important;

    height: 33px;

    cursor: default;

    box-sizing: border-box;
}


/* =========================================================
   Mobile Body
========================================================= */

.rPopup_mobile .rPopup_body {
    display: flex !important;

    align-items: center;
    justify-content: center;

    width: fit-content !important;

    max-width: calc(100vw - 26px) !important;

    min-width: 0 !important;
    min-height: 0 !important;

    height: auto !important;

    background: #fff;

    box-sizing: border-box;

    overflow: hidden;
}


.rPopup_mobile .rPopup_body > a {
    display: flex !important;

    align-items: center;
    justify-content: center;

    width: fit-content !important;

    max-width: calc(100vw - 26px) !important;

    height: auto !important;

    box-sizing: border-box;
}


/* =========================================================
   Mobile Image
========================================================= */

.rPopup_mobile .rPopup_body img,
.rPopup_mobile .rPopupDesktopImg,
.rPopup_mobile .rPopupMobileImg {
    display: block;

    /*
       절대 500px 고정으로 만들지 않음.
       원본보다 확대하지 않고 큰 이미지만 축소.
    */
    width: auto !important;
    height: auto !important;

    /*
       가로는 휴대폰 화면 안쪽으로
    */
    max-width: min(500px, calc(100vw - 26px)) !important;

    /*
       세로도 화면을 초과하지 않도록 제한.
       header + footer + 위아래 여백 고려
    */
    max-height: min(700px, calc(100dvh - 115px)) !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 auto;

    background: #fff;
}


/*
   모바일 전용 이미지가 없는 경우에는
   rpopup.js에서 DesktopImg를 그대로 보여주면 됨.
*/


/* =========================================================
   Mobile Footer
========================================================= */

.rPopup_mobile .rPopup_footer {
    width: 100% !important;

    padding: 6px;

    box-sizing: border-box;

    text-align: right;

    background: #f1f3f5;

    font-size: 14px;

    white-space: nowrap;
}

.rPopup_mobile .rPopup_footer label {
    display: inline-flex;

    align-items: center;
}

.rPopup_mobile .rPopup_footer label input {
    width: auto;

    margin: 0 3px 0 0;

    transform: scale(1.1);
}

.rPopup_mobile .rPopup_footer label span {
    padding: 0 4px;

    font-size: 14px;

    line-height: 1.4;
}

.rPopup_mobile .rPopup_footer button {
    padding: 5px 7px;

    font-size: 14px;

    line-height: 1.2;
}


/* 클릭 허용 */
.rPopup_mobile a,
.rPopup_mobile button,
.rPopup_mobile input,
.rPopup_mobile select,
.rPopup_mobile textarea,
.rPopup_mobile label {
    pointer-events: auto;
}


/* =========================================================
   Mobile 480 이하
========================================================= */

@media screen and (max-width: 480px) {

    .rPopup_mobile {
        padding: 8px !important;
    }

    .rPopup_mobile .rPopup_wrap {
        max-width: calc(100vw - 16px) !important;
    }

    .rPopup_mobile .rPopup_body {
        max-width: calc(100vw - 18px) !important;
    }

    .rPopup_mobile .rPopup_body > a {
        max-width: calc(100vw - 18px) !important;
    }

    .rPopup_mobile .rPopup_body img,
    .rPopup_mobile .rPopupDesktopImg,
    .rPopup_mobile .rPopupMobileImg {
        max-width: calc(100vw - 18px) !important;

        max-height: calc(100dvh - 105px) !important;
    }

    .rPopup_mobile .rPopup_footer {
        padding: 6px 4px;
    }

    .rPopup_mobile .rPopup_footer label span {
        font-size: 13px;

        padding: 0 3px;
    }

    .rPopup_mobile .rPopup_footer button {
        padding: 5px 6px;

        font-size: 13px;
    }
}


/* =========================================================
   아주 작은 모바일
========================================================= */

@media screen and (max-width: 360px) {

    .rPopup_mobile {
        padding: 5px !important;
    }

    .rPopup_mobile .rPopup_wrap {
        max-width: calc(100vw - 10px) !important;
    }

    .rPopup_mobile .rPopup_body,
    .rPopup_mobile .rPopup_body > a {
        max-width: calc(100vw - 12px) !important;
    }

    .rPopup_mobile .rPopup_body img,
    .rPopup_mobile .rPopupDesktopImg,
    .rPopup_mobile .rPopupMobileImg {
        max-width: calc(100vw - 12px) !important;

        max-height: calc(100dvh - 100px) !important;
    }

    .rPopup_mobile .rPopup_footer label span {
        font-size: 12px;
    }

    .rPopup_mobile .rPopup_footer button {
        font-size: 12px;
    }
}