/* 메인 이벤트 팝업 (관리자 > 환경설정 > 팝업레이어관리 에서 등록/관리) */
#hd_pop h2 { display: none; }

#hd_pop:has(.hd_pops) {
    position: fixed;
    inset: 0;
    z-index: 9999;
    height: auto;
    margin: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* 카드들 + 공용 하단바를 하나로 묶는 그룹. 그룹 폭이 카드 줄의 실제 폭에
   맞춰지고(width: fit-content), 하단바가 그 폭에 꽉 채워져서 항상 카드 폭과
   정확히 일치하며 카드 바로 아래에 놓인다. */
.hd_pop_group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 60%;
    max-width: 100%;
    gap: 12px;
}

.hd_pop_cards {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 5%;
    width: 100%;
    flex-direction: row;
}

.hd_pops {
    width: 100%;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.hd_pops_con {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hd_pops_con a { display: block; }
.hd_pops_con img { display: block; width: 100%; max-width: 100%; height: auto; }

@media screen and (min-width: 769px) {
    .hd_pops_con { width: 100% !important; max-width: 100%; }
}

/* 개별 팝업마다 붙는 GNUboard 기본 하단바는 숨기고, 전체 공용 하단바로 대체 */
.hd_pops_footer { display: none; }

.hd_pop_shared_bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hd_pop_shared_chk {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}
.hd_pop_shared_chk input { cursor: pointer; }
.hd_pop_shared_close {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.hd_pop_shared_close:hover { color: #ccc; }

@media screen and (max-width: 1400px) {
    .hd_pop_group { width: 70%; }
    .hd_pop_cards { gap: 3%; }
}
@media screen and (max-width: 1080px) {
    .hd_pop_group { width: 80%; }
}
/* 768px 이하: 카드를 나란히 배치하지 않고 한 번에 1개씩 스와이프해서 보는 슬라이드로 전환 */
@media screen and (max-width: 768px) {
    #hd_pop:has(.hd_pops) { padding: 16px; }

    .hd_pop_group { width: 90vw; max-width: 90vw; }

    .hd_pop_cards {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .hd_pop_cards::-webkit-scrollbar { display: none; }

    .hd_pops {
        flex: 0 0 100%;
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
    }

    .hd_pops_con { width: 100% !important; max-width: 100%; }

    .hd_pop_slide_dots {
        display: flex;
        justify-content: center;
        gap: 6px;
    }
    .hd_pop_slide_dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
    }
    .hd_pop_slide_dots span.on { background: #fff; }
}
@media screen and (min-width: 769px) {
    .hd_pop_slide_dots { display: none; }
}

/* 팝업이 1개일 때는 카드가 gap 없이 그룹 폭을 혼자 다 차지해서 원본(1080px)보다
   크게 늘어나고 세로로도 넘친다. 카드가 1개인 경우에만 상한을 걸어 원본 크기와
   화면 높이(70vh) 안에 들어오게 한다. */
.hd_pop_group:has(.hd_pop_cards > .hd_pops:only-child) {
    width: min(520px, 90vw, 70vh);
}