@charset "utf-8";

/* ===== 등장 애니메이션 ===== */
@keyframes popFadeUp {
    0% { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes popSlideLeft {
    0% { opacity: 0; transform: translate(-70%, -50%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes popSlideRight {
    0% { opacity: 0; transform: translate(-30%, -50%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes popZoomIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes popBounceIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    70% { transform: translate(-50%, -50%) scale(0.95); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes popDropDown {
    0% { opacity: 0; transform: translate(-50%, -80%) scale(0.95); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes popFlipIn {
    0% { opacity: 0; transform: translate(-50%, -50%) perspective(600px) rotateY(-90deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) perspective(600px) rotateY(0deg); }
}
@keyframes popFadeOut {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}
@keyframes popOverlay {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes popOverlayOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===== 전역 박스모델 ===== */
#hd_pop, #hd_pop *, #hd_pop *:before, #hd_pop *:after { box-sizing: border-box; }

/* ===== 팝업 오버레이 ===== */
#hd_pops_overlay {
    position: fixed;
    z-index: 9998;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    width: 100%; height: 100%;
    animation: popOverlay 0.4s ease;
}

/* ===== 팝업 컨테이너 ===== */
#hd_pop {
    position: fixed;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    animation: popFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#hd_pop h2 { position:absolute; font-size:0; line-height:0; overflow:hidden; }

/* ===== 팝업 컨텐츠 공통 ===== */
.hd_pops_con { overflow: hidden; }
/* img는 인라인 스타일(height:30px 등) 존중 — width/height 강제하지 않음 */

/* ======================
   PC 팝업: 나란히 배치 (380px)
   ====================== */
#hd_pop_pc {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
    list-style: none;
    margin: 0; padding: 0;
}
#hd_pop_pc .hd_pops {
    flex: 0 0 380px;
    width: 380px;
    overflow: hidden;
}
#hd_pop_pc .hd_pops_con {
    width: 380px;
    overflow: hidden;
    border-radius: 12px;
}
/*
 * 팝업 생성기 HTML의 최상위 래퍼만 380px로 제한.
 * > div:first-child = 인라인 스타일에 max-width:460px/380px 가진 래퍼 div
 * 내부 하위 요소는 건드리지 않음 (로고 height 등 인라인 스타일 존중)
 */
#hd_pop_pc .hd_pops_con > div:first-child {
    min-width: 0 !important;
    max-width: 380px !important;
    width: 380px !important;
}

/* ======================
   모바일 팝업: Swiper
   ====================== */
#hd_pop_mo {
    display: none;
    width: 100%;
    overflow: hidden;
}
#hd_pop_mo .hd-pop-swiper {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}
#hd_pop_mo .swiper-wrapper {
    display: flex;
}
#hd_pop_mo .swiper-slide {
    width: 100% !important;
    flex-shrink: 0;
    overflow: hidden;
}
#hd_pop_mo .swiper-slide .hd_pops_con {
    width: 100%;
    overflow: hidden;
}
/*
 * 모바일: 최상위 래퍼 div만 100% 강제 (인라인 min-width:460px 깨기)
 * 내부 div/img는 건드리지 않아서 로고 height:30px 등 유지됨
 */
#hd_pop_mo .hd_pops_con > div:first-child {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 페이지네이션 도트 */
#hd_pop_mo .hd-pop-pagination {
    position: relative;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    width: 100%;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 0 0 12px 12px;
    margin-top: -1px;
}
#hd_pop_mo .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: rgba(255,255,255,0.35);
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
}
#hd_pop_mo .swiper-pagination-bullet-active {
    background: #fff;
    width: 22px; height: 8px;
    border-radius: 4px;
}

/* ===== 팝업 하단 버튼 ===== */
.hd_pops_footer {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    justify-content: center;
    width: auto;
}
.hd_pops_footer:after { display:block; visibility:hidden; clear:both; content:""; }
.hd_pops_footer button {
    padding: 12px 28px;
    border: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    min-width: 120px;
    position: relative;
    z-index: 99999999;
}
.hd_pops_footer button:first-child {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
}
.hd_pops_footer button:first-child:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
}
.hd_pops_footer button:last-child {
    background: #fff;
    color: #333;
    border: 1px solid #fff;
    min-width: 80px;
}
.hd_pops_footer button:last-child:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 4px 16px rgba(255,255,255,0.4);
}
.hd_pops_footer button:last-child i {
    font-size: 12px;
    opacity: 0.6;
}

/* ============================
   반응형
   ============================ */

/* 태블릿: PC숨김 → 모바일Swiper */
@media all and (max-width:1200px) {
    #hd_pop_pc { display: none !important; }
    #hd_pop_mo { display: block !important; }
    #hd_pop {
        width: 380px;
        max-width: 90vw;
        overflow: hidden;
    }
}

/* 모바일 */
@media all and (max-width:768px) {
    #hd_pop {
        width: 90vw;
        max-width: 380px;
        overflow: hidden;
    }
    .hd_pops_footer {
        gap: 8px;
        margin-top: 12px;
        width: 100%;
    }
    .hd_pops_footer button {
        padding: 10px 16px;
        font-size: 13px;
        min-width: 0;
        flex: 1;
    }
    .hd_pops_footer button:last-child {
        flex: 0 0 auto;
        min-width: 70px;
    }
    #hd_pops_overlay { -webkit-tap-highlight-color: transparent; }
}

/* 작은 모바일 */
@media all and (max-width:380px) {
    #hd_pop { width: 94vw; max-width: 94vw; }
    .hd_pops_footer button { padding: 9px 12px; font-size: 12px; }
}