/**
 * 메인 팝업 — PC 탭 레이아웃 + 카드 왼쪽 배치 (2026-10-01, 국내 홈 전용)
 *
 * 디자인 정본 = 직원 샘플(메인팝업_코드.txt). 데이터·동작은 popup-inject.js(DB 배선) 소관.
 * 로드 조건: evt_popup_enqueue_inject_script() 안에서만 enqueue → 해외 언어호스트는 그 함수를
 *   remove_action 하므로 이 파일이 안 실린다(해외 팝업 모습 무변경).
 *
 * ★선택자는 전부 #bottomSwiperPopup / #centerCardPopup 으로 시작한다.
 *   Elementor 홈(9639) 위젯의 인라인 CSS 가 같은 요소를 클래스 선택자로 잡고 있고 본문(head 뒤)에
 *   나오므로, 클래스 선택자로는 진다. id 를 붙여 Elementor 원본을 손대지 않고 덮는다.
 * ★display 는 쓰지 않는다(#bottomSwiperPopup·#centerCardPopup·.cv-card-item) — popup-inject.js 가
 *   인라인으로 열고 닫는다. 여기서 display 를 !important 로 주면 팝업이 안 닫힌다.
 *   (.evers-pc-tabs / .evers-swiper 의 PC·모바일 전환만 display 를 쓴다 — JS 가 토글하지 않는 요소)
 * ★모바일 경계 768px = popup-inject.js MQ_MOBILE 과 같은 값.
 */

/* ===== 하단 슬라이드 팝업 → PC: 화면 중앙 800px ===== */
#bottomSwiperPopup.evt-pop-tabs {
    top: 52%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    /* 폭 800 · 화면폭 95% · 화면 높이에 맞춘 폭 중 가장 작은 값.
       세 번째 항: 화면 높이 90% 에서 탭줄+하단줄(약 100px)을 뺀 높이 × 이미지 비율(JS 가 첫 장으로 지정).
       없으면 1366×768 노트북에서 3:2 이미지가 높이를 넘겨 「닫기」 줄이 잘린다. */
    width: min(800px, 95vw, calc((90vh - 100px) * var(--evt-pop-ratio, 1.5)));
    max-width: 95vw;
    max-height: 90vh;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    z-index: 120;
    overflow: hidden;
}

/* PC: 탭 보이고 스와이퍼 숨김 */
#bottomSwiperPopup.evt-pop-tabs .evers-swiper { display: none; }
#bottomSwiperPopup .evers-pc-tabs {
    display: block;
    cursor: grab;
    user-select: none;
}
#bottomSwiperPopup .evers-pc-tabs:active { cursor: grabbing; }

#bottomSwiperPopup .evers-tab-content {
    position: relative;
    width: 100%;
    min-height: 250px;
}
#bottomSwiperPopup .evers-tab-content a,
#bottomSwiperPopup .evers-tab-content > .evers-tab-pane > div { display: block; -webkit-user-drag: none; }
#bottomSwiperPopup .evers-tab-content img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    -webkit-user-drag: none;
}

/* 페이드 전환 — 비활성 장은 겹쳐 두고 투명 처리 */
#bottomSwiperPopup .evers-tab-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1;
}
#bottomSwiperPopup .evers-tab-pane.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* 탭 버튼 줄 */
#bottomSwiperPopup .evers-tab-buttons {
    display: flex;
    width: 100%;
    background: #e8e8e8;
    border-top: none;
}
#bottomSwiperPopup .evers-tab-btn {
    flex: 1;
    margin: 0;
    padding: 9px 3px;
    font-family: inherit;
    font-size: clamp(10px, 1.35vw, 13px);
    line-height: 1.15;
    letter-spacing: -0.7px;
    word-break: keep-all;
    border: none;
    border-right: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 42px;
    transition: background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
#bottomSwiperPopup .evers-tab-btn:last-child { border-right: none; }
#bottomSwiperPopup .evers-tab-btn:focus { outline: none; }
#bottomSwiperPopup .evers-tab-btn.active,
#bottomSwiperPopup .evers-tab-btn.active:hover,
#bottomSwiperPopup .evers-tab-btn.active:focus {
    background: #009191;
    color: #fff;
    font-weight: 600;
}
#bottomSwiperPopup .evers-tab-btn:not(.active),
#bottomSwiperPopup .evers-tab-btn:not(.active):focus {
    background: #e8e8e8;
    color: #333;
    font-weight: 400;
}
#bottomSwiperPopup .evers-tab-btn:not(.active):hover { background: #dedede; color: #333; }

/* ===== 하단 버튼 줄 (슬라이드·카드 공통) ===== */
#bottomSwiperPopup .evers-popup-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    background: #fff;
    border-top: 1px solid #eee;
}
#centerCardPopup .cv-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #eee;
}
#bottomSwiperPopup .evers-popup-bottom button,
#centerCardPopup .cv-card-bottom button {
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    color: #555;
    font-family: inherit;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
#bottomSwiperPopup .evers-popup-bottom button:hover,
#bottomSwiperPopup .evers-popup-bottom button:focus,
#bottomSwiperPopup .evers-popup-bottom button:active,
#centerCardPopup .cv-card-bottom button:hover,
#centerCardPopup .cv-card-bottom button:focus,
#centerCardPopup .cv-card-bottom button:active {
    outline: none;
    border: none;
    background: transparent;
    box-shadow: none;
}
#bottomSwiperPopup .evers-today-btn,
#centerCardPopup .cv-card-today {
    font-size: 13.5px;
    letter-spacing: -0.5px;
    padding: 2px 0;
}
#bottomSwiperPopup .evers-close-btn,
#centerCardPopup .cv-card-close {
    font-size: 14px;
    color: #666;
    padding: 2px 0;
}

/* ===== 카드 팝업 → PC: 화면 왼쪽 ===== */
#centerCardPopup {
    top: 52%;
    left: 6%;
    transform: translateY(-50%);
    width: 400px;
    max-width: 95vw;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 150;
}
#centerCardPopup .cv-card-content img { width: 100%; display: block; }

@media (max-width: 1400px) {
    #centerCardPopup { left: 20px; }
}

/* ===== 모바일 (768px 이하) — 슬라이드는 종전 스와이퍼 바닥 시트, 카드는 중앙 ===== */
@media (max-width: 768px) {
    #bottomSwiperPopup .evers-pc-tabs { display: none; }
    #bottomSwiperPopup.evt-pop-tabs .evers-swiper { display: block; }

    #bottomSwiperPopup.evt-pop-tabs {
        top: auto;
        left: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: none;
        border-radius: 16px 16px 0 0;
    }
    #bottomSwiperPopup .evers-popup-bottom { padding: 8px 15px; }
    #centerCardPopup .cv-card-bottom { padding: 10px 15px; }

    #centerCardPopup {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        max-width: 95vw;
    }
    #centerCardPopup .cv-card-content img {
        width: 100%;
        height: auto;
        max-height: none;
    }
}