/**
 * 팝업 슬라이더 스타일
 */

/* 전체화면 딤 배경 */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 투명 레이어가 페이지·일반팝업 클릭을 막지 않도록 통과시킴 (모달 자체만 클릭 수신) */
    pointer-events: none;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 슬라이더 모달 */
.popup-slider-modal {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    max-height: 92vh;
    transform: scale(0.92);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-slider-modal {
    transform: scale(1);
}

/* 바디: 슬라이더 + 사이드바 */
.popup-modal-body {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}

/* ── 슬라이더 영역 ── */
.popup-slides-wrap {
    width: 640px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.popup-slides-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1 1 auto;
    min-height: 0;
}

.popup-slide {
    flex: 0 0 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* 팝업 메인 이미지 (PC: 640×768 고정) */
.popup-image {
    display: block;
    width: 100%;
    height: 768px;
    object-fit: cover;
    flex-shrink: 0;
}

/* 팝업 에디터 콘텐츠 */
.popup-content {
    padding: 0;
}

.popup-content p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    font-size: 0 !important;
}

.popup-content img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Bullet dots — PC에서 숨김, 모바일에서만 표시 */
.popup-dots {
    display: none;
}

/* ── 우측 사이드바 (PC 전용) ── */
.popup-sidebar {
    background: #333;
    min-width: 180px;
    max-width: 220px;
    overflow-y: auto;
    flex-shrink: 0;
}

.popup-title-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.popup-title-list li {
    padding: 16px 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    line-height: 1.5;
    word-break: keep-all;
    text-align: center;
    transition: background 0.2s, color 0.2s;
}

.popup-title-list li:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.popup-title-list li.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 600;
}

/* ── 링크 버튼 그리드 ── */
.popup-link-grid {
    display: grid;
    gap: 1px;
    background: #e0e0e0;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
    margin-top: auto;
}

.popup-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
    word-break: keep-all;
    transition: background 0.15s;
}

.popup-link-btn:hover {
    background: #f5f5f5;
    color: #E1693A;
}

/* ── 하단 컨트롤 ── */
.popup-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.popup-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    user-select: none;
}

.popup-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.popup-close {
    background: #333;
    color: #fff;
    border: none;
    padding: 5px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
}

.popup-close:hover {
    background: #555;
}

/* ════════════════════════════════
   일반팝업 (개별 위치 지정)
════════════════════════════════ */
.popup-normal-item {
    position: fixed;
    z-index: 9998; /* 상담 모달(10000)·하단 상담바(9999)보다 아래. 슬라이드 오버레이는 pointer-events:none이라 클릭 차단 없음 */
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 40px);
    max-height: 92vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    /* 등장 모션은 transform이 아닌 개별 translate 속성 사용 — 위치 지정용 inline transform과 충돌 없음 (미지원 브라우저는 페이드만) */
    translate: 0 -28px;
    transition: opacity 1s ease, visibility 1s ease, translate 1s cubic-bezier(0.22, 0.9, 0.35, 1);
}

.popup-normal-item.active {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
}

.popup-normal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* 일반팝업 이미지는 높이 자동 (슬라이더의 고정 높이 미적용) */
.popup-normal-item .popup-image {
    height: auto;
    object-fit: contain;
}

/* ════════════════════════════════
   모바일 반응형
════════════════════════════════ */
@media (max-width: 768px) {
    .popup-slider-modal {
        width: 85vw;
        max-width: 90vw;
        max-height: 90vh;
    }

    .popup-slides-wrap {
        width: 100%;
    }

    /* 이미지: 반응형, 고정 높이 해제 */
    .popup-image {
        height: auto;
        max-height: 90vw;
        object-fit: cover;
    }

    /* 사이드바 숨김 */
    .popup-sidebar {
        display: none;
    }

    /* Bullet dots 표시 */
    .popup-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 12px;
        background: #666;
        flex-shrink: 0;
    }

    .popup-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: background 0.2s, transform 0.2s;
        flex-shrink: 0;
    }

    .popup-dot.active {
        background: #fff;
        transform: scale(1.25);
    }

    /* 링크 버튼 */
    .popup-link-btn {
        padding: 10px 4px;
        font-size: 11.5px;
    }

    /* 컨트롤 */
    .popup-controls {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        padding: 12px 16px;
    }

    .popup-checkbox {
        justify-content: center;
    }

    .popup-close {
        padding: 10px;
        text-align: center;
        width: 100%;
    }

    /* 일반팝업: 모바일에서는 중앙 정렬 + 화면 폭 제한 */
    .popup-normal-mobile {
        max-width: 85vw !important;
        max-height: 85vh;
    }

    .popup-normal-mobile .popup-controls {
        flex-direction: row;
        gap: 8px;
        align-items: center;
        padding: 10px 12px;
    }

    .popup-normal-mobile .popup-close {
        width: auto;
        padding: 6px 14px;
    }
}