#hd_pop_mobile {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#hd_pop_mobile .hd_mobile_popup_overlay {
    position: fixed;
    z-index: 999999;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 48px 10px 20px;
    box-sizing: border-box;

    background: rgba(0,0,0,.58);

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#hd_pop_mobile .hd_mobile_popup {
    position: relative;

    width: min(92vw, 480px);
    max-width: 100%;

    margin: auto;

    background: #fff;
    border-radius: 10px;
    overflow: hidden;

    box-shadow: 0 8px 30px rgba(0,0,0,.30);
}

/*
 * 현재 슬라이드 높이에 맞춰 JS에서 height 값을 지정합니다.
 * 때문에 짧은 이미지 다음에 긴 이미지가 있어도
 * 이미지와 버튼 사이에 빈 공간이 생기지 않습니다.
 */
#hd_pop_mobile .hd_mobile_popup_viewport {
    position: relative;

    width: 100%;
    height: auto;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    transition: height .20s ease;
}

#hd_pop_mobile .hd_mobile_popup_track {
    display: flex;
    align-items: flex-start;

    width: 100%;
    height: auto;

    margin: 0 !important;
    padding: 0 !important;

    transition: transform .28s ease;
    will-change: transform;
}

#hd_pop_mobile .hd_mobile_pops {
    flex: 0 0 100%;

    width: 100%;
    min-width: 100%;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
    background: #fff;
}

/* 팝업 내용 */
#hd_pop_mobile .hd_mobile_pops_con {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    box-sizing: border-box;

    overflow: hidden;

    background: #fff;
}

/* 이미지 아래 inline 여백 제거 + 자동 축소 */
#hd_pop_mobile .hd_mobile_pops_con img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    vertical-align: top !important;
}

/* 내부 HTML 기본 여백 제거 */
#hd_pop_mobile .hd_mobile_pops_con > p,
#hd_pop_mobile .hd_mobile_pops_con > div,
#hd_pop_mobile .hd_mobile_pops_con > table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 에디터에서 이미지 뒤에 자동으로 붙는 빈 문단/줄바꿈 제거 */
#hd_pop_mobile .hd_mobile_pops_con > p:empty,
#hd_pop_mobile .hd_mobile_pops_con > div:empty,
#hd_pop_mobile .hd_mobile_pops_con > span:empty,
#hd_pop_mobile .hd_mobile_pops_con > br:last-child {
    display: none !important;
}

#hd_pop_mobile .hd_mobile_pops_con table,
#hd_pop_mobile .hd_mobile_pops_con div,
#hd_pop_mobile .hd_mobile_pops_con p,
#hd_pop_mobile .hd_mobile_pops_con iframe,
#hd_pop_mobile .hd_mobile_pops_con video {
    max-width: 100% !important;
    box-sizing: border-box;
}

#hd_pop_mobile .hd_mobile_pops_con table {
    width: 100% !important;
    border-spacing: 0 !important;
}

/*
 * 하단 버튼:
 * 슬라이드 내부가 아니라 팝업 컨테이너의 공통 영역에 두기 때문에
 * 항상 이미지 바로 아래 같은 위치에 표시됩니다.
 */
#hd_pop_mobile .hd_mobile_pops_footer {
    position: relative;
    z-index: 20;

    display: flex !important;

    width: 100% !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;

    background: #fff;
    border-top: 1px solid #ddd;
}

#hd_pop_mobile .hd_mobile_pops_reject,
#hd_pop_mobile .hd_mobile_pops_close {
    display: block !important;

    height: 44px !important;

    margin: 0 !important;
    padding: 0 4px !important;

    border: 0 !important;

    box-sizing: border-box;

    cursor: pointer;
}

#hd_pop_mobile .hd_mobile_pops_reject {
    flex: 1 1 50% !important;
    width: 50% !important;

    background: #f1f1f1 !important;
    color: #555 !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 44px !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#hd_pop_mobile .hd_mobile_pops_reject strong {
    font-weight: 400 !important;
}

#hd_pop_mobile .hd_mobile_pops_close {
    flex: 1 1 50% !important;
    width: 50% !important;

    background: #173b78 !important;
    color: #fff !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 44px !important;
}

/* 페이지 이동 영역 */
#hd_pop_mobile .hd_mobile_popup_navigation {
    position: relative;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 42px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    background: #fff;
    border-top: 1px solid #eee;
}

#hd_pop_mobile .hd_mobile_popup_prev,
#hd_pop_mobile .hd_mobile_popup_next {
    width: 48px;
    height: 42px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color: #333;

    font-size: 30px;
    line-height: 38px;

    cursor: pointer;
}

#hd_pop_mobile .hd_mobile_popup_counter {
    min-width: 80px;

    text-align: center;

    color: #777;
    font-size: 13px;
    line-height: 42px;
}

/* 우측 상단 X */
#hd_pop_mobile .hd_mobile_popup_close {
    position: absolute;
    z-index: 30;

    top: 6px;
    right: 6px;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(0,0,0,.55);
    color: #fff;

    font-size: 25px;
    line-height: 32px;

    cursor: pointer;
}

#hd_pop_mobile.hd_mobile_popup_hidden {
    display: none !important;
}

@media (max-width: 360px) {
    #hd_pop_mobile .hd_mobile_popup_overlay {
        padding-left: 7px;
        padding-right: 7px;
    }

    #hd_pop_mobile .hd_mobile_popup {
        width: 96vw;
        border-radius: 8px;
    }

    #hd_pop_mobile .hd_mobile_pops_footer,
    #hd_pop_mobile .hd_mobile_pops_reject,
    #hd_pop_mobile .hd_mobile_pops_close {
        height: 42px !important;
    }

    #hd_pop_mobile .hd_mobile_pops_reject,
    #hd_pop_mobile .hd_mobile_pops_close {
        line-height: 42px !important;
    }
}
/* Shared PC/mobile close control and image-sized desktop window. */
#hd_pop_mobile .hd_mobile_popup_overlay { padding-top: 100px; align-items: flex-start; }
#hd_pop_mobile .hd_mobile_popup { margin: 0 auto; }
#hd_pop_mobile .hd_popup_all_close {
    position: fixed; top: 35px; left: 50%; transform: translateX(-50%);
    z-index: 1000001; height: 40px; padding: 0 20px; border: 0;
    border-radius: 22px; background: #fff; color: #222;
    font-size: 15px; font-weight: 700; line-height: 40px;
    white-space: nowrap; cursor: pointer;
}
#hd_pop_mobile .hd_popup_all_close span { margin-left: 8px; font-size: 20px; }
#hd_pop_mobile .hd_mobile_popup_close { display: none; }
@media(max-width:768px) {
    #hd_pop_mobile .hd_mobile_popup_overlay { padding-top: 86px; }
    #hd_pop_mobile .hd_popup_all_close { top: 24px; }
}
