/*
 * 중요:
 * #hd_pop 자체를 fixed/height:100%로 만들지 않습니다.
 * 그누보드/테마의 기존 HTML 레이아웃을 보호하고,
 * 별도의 .hd_popup_overlay만 화면 전체를 덮도록 합니다.
 */

#hd_pop {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

/* 화면 전체를 덮는 팝업 레이어 */
#hd_pop .hd_popup_overlay {
    position: fixed;
    z-index: 999999;

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

    width: 100%;
    height: 100%;

    padding: 72px 14px 28px;

    box-sizing: border-box;

    background: rgba(0, 0, 0, .42);

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

/* 실제 팝업 영역 */
#hd_pop .hd_pops_wrap {
    position: relative;

    width: 100%;
    max-width: 1550px;

    margin: 0 auto;
    box-sizing: border-box;
}

/* 전체 닫기 */
#hd_pop .hd_pop_all_close {
    position: fixed;
    z-index: 1000001;

    top: 35px;
    left: 50%;

    transform: translateX(-50%);

    height: 34px;
    padding: 0 16px;

    border: 0;
    border-radius: 18px;

    background: #fff;
    color: #222;

    font-size: 13px;
    font-weight: 700;
    line-height: 34px;

    white-space: nowrap;
    cursor: pointer;

    box-shadow: 0 2px 10px rgba(0,0,0,.20);
}

#hd_pop .hd_pop_all_close span {
    display: inline-block;
    margin-left: 6px;
    font-size: 18px;
    font-weight: 400;
    vertical-align: -1px;
}

/* 팝업 4열 */
#hd_pop .hd_pops_grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 13px;

    width: 100%;
    margin: 0;
    padding: 0;

    align-items: start;
}

/* 개별 팝업 */
#hd_pop .hd_pops {
    position: relative !important;

    top: auto !important;
    left: auto !important;

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

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;

    background: #fff;
    border-radius: 6px;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0,0,0,.25);
}

/* 팝업 내용 */
#hd_pop .hd_pops_con {
    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;

    overflow: hidden !important;

    background: #fff;
}

/*
 * 기존 팝업 HTML 안에 width가 지정된 이미지가 있어도
 * 카드 폭을 넘지 않도록 합니다.
 */
#hd_pop .hd_pops_con img {
    display: block !important;

    width: auto;
    max-width: 100% !important;
    height: auto !important;

    margin-left: auto;
    margin-right: auto;
}

#hd_pop .hd_pops_con table,
#hd_pop .hd_pops_con iframe,
#hd_pop .hd_pops_con video {
    max-width: 100% !important;
    box-sizing: border-box;
}

/*
 * 이미지와 하단 버튼 사이의 공백 제거
 * 그누보드 에디터가 이미지 뒤에 넣는 p/div/br 및 기본 여백을 제거합니다.
 */
#hd_pop .hd_pops_con > p,
#hd_pop .hd_pops_con > div,
#hd_pop .hd_pops_con > table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#hd_pop .hd_pops_con > p:empty,
#hd_pop .hd_pops_con > div:empty,
#hd_pop .hd_pops_con > span:empty,
#hd_pop .hd_pops_con > br:last-child {
    display: none !important;
}

#hd_pop .hd_pops_con img:last-child {
    margin-bottom: 0 !important;
}

/* 하단 버튼 */
#hd_pop .hd_pops_footer {
    display: flex !important;

    width: 100% !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;

    background: #fff;
}

#hd_pop .hd_pops_reject {
    flex: 1 1 50% !important;

    width: 50% !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 4px !important;

    border: 0 !important;

    background: #f1f1f1 !important;
    color: #555 !important;

    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 38px !important;

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

    cursor: pointer;
}

#hd_pop .hd_pops_reject strong {
    font-weight: 400;
}

#hd_pop .hd_pops_close {
    flex: 1 1 50% !important;

    width: 50% !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: #173b78 !important;
    color: #fff !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 38px !important;

    cursor: pointer;
}

#hd_pop .hd_pops_close:hover {
    background: #102d5c !important;
}

/* 팝업 레이어 스크롤바 */
#hd_pop .hd_popup_overlay::-webkit-scrollbar {
    width: 7px;
}

#hd_pop .hd_popup_overlay::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.70);
    border-radius: 10px;
}

@media (max-width: 1000px) {
    #hd_pop .hd_popup_overlay {
        padding-left: 12px;
        padding-right: 12px;
    }

    #hd_pop .hd_pops_grid {
        gap: 10px;
    }
}

@media (max-width: 850px) {
    #hd_pop .hd_pops_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}