/**
 * 팝업창 표시 스타일
 * 접근성, 애니메이션, 반응형 지원
 */

/* prefers-reduced-motion 지원 */
@media (prefers-reduced-motion: reduce) {
    .popup-overlay,
    .popup-modal {
        animation: none !important;
        transition: none !important;
    }
}

/* 팝업 오버레이 - 모든 요소 위에 표시 */
.popup-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) saturate(180%) !important; /* 더 강한 블러와 채도 효과 */
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
    z-index: 2147483647 !important; /* 최대 z-index 값 */
    display: flex !important;
    flex-wrap: wrap !important; /* 여러 팝업을 감쌀 수 있도록 */
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important; /* 여러 줄일 때 중앙 정렬 */
    gap: 24px !important; /* 팝업 간 간격 */
    padding: 24px !important;
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; /* 더 부드러운 애니메이션 */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    isolation: isolate !important; /* 새로운 stacking context 생성 */
    overflow-y: auto !important; /* 여러 팝업이 많을 경우 스크롤 가능 */
}

/* 세로형 팝업일 때 양쪽 여백 제거 및 행 배치 */
.popup-overlay.popup-portrait-mode {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-direction: row !important; /* 행으로 배치 */
    align-items: center !important; /* 중앙 정렬 */
    justify-content: center !important; /* 중앙 정렬 */
    gap: 20px !important; /* 팝업 간 간격 */
}

.popup-overlay[aria-hidden="true"] {
    display: none;
}

/* 팝업 모달 - 배경색 추가하여 이미지와 버튼 구분 */
.popup-modal {
    position: relative !important;
    background: #ffffff !important; /* 배경색 추가 */
    border: none !important;
    border-radius: 24px !important; /* 더 둥근 모서리 */
    width: fit-content !important; /* 이미지 크기에 맞게 자동 조정 */
    max-width: 600px !important; /* 가로형 최대 너비 제한 (px 단위) */
    max-height: 300px !important; /* 가로형 최대 높이 제한 (px 단위) */
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important; /* 오버플로우 hidden으로 변경하여 버튼 영역 포함 */
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4), 
                0 8px 24px rgba(0, 0, 0, 0.25) !important; /* 다층 그림자 (테두리 제거) */
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; /* 더 부드러운 애니메이션 */
    outline: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important; /* 이미지 크기에 맞게 조정 */
    z-index: 2147483647 !important; /* 최대 z-index 값 */
    pointer-events: auto !important;
    margin: 0 !important; /* 마진 완전 제거 */
    padding-bottom: 60px !important; /* 버튼 공간 확보 */
    flex-shrink: 0 !important; /* 축소 방지 */
    line-height: 0 !important; /* 이미지 하단 여백 제거 */
    vertical-align: top !important; /* 상단 정렬 */
    box-sizing: border-box !important;
    transform: translateZ(0) !important; /* GPU 가속 */
    will-change: transform !important; /* 성능 최적화 */
}

/* 세로형 팝업 모달: 컨테이너 너비를 이미지 크기에 정확히 맞춤, 여백 완전 제거 */
.popup-modal.popup-portrait-modal {
    max-width: 400px !important; /* 세로형 최대 너비 제한 (px 단위) */
    width: 400px !important; /* 세로형 너비 고정 */
    border-radius: 0 !important; /* 둥근 모서리 제거 */
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4), 
                0 8px 24px rgba(0, 0, 0, 0.25) !important; /* 흰색 테두리 제거 */
    padding-top: 0 !important; /* 상단 여백 제거 */
    padding-bottom: 60px !important; /* 버튼 공간 확보 */
    margin-top: 0 !important; /* 상단 마진 제거 */
    background: transparent !important; /* 배경 투명 (이미지가 보이도록) */
    border: none !important; /* 테두리 제거 */
    border-top: none !important; /* 상단 테두리 제거 */
    outline: none !important; /* 아웃라인 제거 */
}

/* 팝업 컨텐츠 영역 (스크롤 가능) */
.popup-modal .popup-content,
.popup-modal > a {
    position: relative !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: calc(100vh - 200px) !important; /* 버튼 공간 확보를 위해 높이 감소 */
    overflow: auto !important; /* 세로로 긴 이미지 대비 스크롤 */
    border-radius: 24px !important; /* 모달과 동일한 둥근 모서리 */
}

/* 가로형 팝업 컨텐츠: 이미지 영역 높이 제한 600×300px */
.popup-modal:not(.popup-portrait-modal) .popup-content,
.popup-modal:not(.popup-portrait-modal) > a {
    height: 300px !important; /* 가로형 이미지 영역 높이 고정 */
    max-height: 300px !important; /* 가로형 이미지 영역 최대 높이 */
    overflow: hidden !important;
}

/* 세로형 팝업 컨텐츠: 여백 완전 제거, 이미지 영역 크기 제한 400×600px */
.popup-modal.popup-portrait-modal .popup-content,
.popup-modal.popup-portrait-modal > a {
    border-radius: 0 !important; /* 둥근 모서리 제거 */
    padding: 0 !important;
    padding-top: 0 !important; /* 상단 패딩 제거 */
    margin: 0 !important;
    margin-top: 0 !important; /* 상단 마진 제거 */
    margin-bottom: 0 !important; /* 하단 여백 제거 */
    width: 400px !important; /* 이미지 영역 너비 고정 */
    max-width: 400px !important; /* 이미지 영역 최대 너비 */
    height: 600px !important; /* 이미지 영역 높이 고정 400×600px */
    max-height: 600px !important; /* 이미지 영역 최대 높이 */
    overflow: hidden !important;
    display: block !important;
    line-height: 0 !important; /* line-height 제거로 여백 제거 */
    vertical-align: top !important; /* 상단 정렬 */
    border: none !important; /* 테두리 제거 */
    border-top: none !important; /* 상단 테두리 제거 */
    outline: none !important; /* 아웃라인 제거 */
}

.popup-modal img {
    display: block !important;
    width: 100% !important; /* 컨테이너에 꽉 차게 */
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* 이미지 비율 유지 */
    margin: 0 !important; /* 마진 완전 제거 */
    padding: 0 !important; /* 패딩 완전 제거 */
    border: none !important; /* 테두리 제거 */
    outline: none !important; /* 아웃라인 제거 */
    vertical-align: top !important; /* 상단 정렬 */
    border-radius: 24px 24px 0 0 !important; /* 상단만 둥근 모서리 */
}

/* 세로형 팝업 이미지: 여백 완전 제거, 크기 제한 400×600px */
.popup-modal.popup-portrait-modal img {
    border-radius: 0 !important; /* 둥근 모서리 제거 */
    width: 100% !important; /* 컨테이너 너비에 맞춤 (400px) */
    max-width: 400px !important; /* 이미지 최대 너비 */
    height: 100% !important; /* 컨테이너 높이에 맞춤 (600px) */
    max-height: 600px !important; /* 이미지 최대 높이 */
    object-fit: contain !important; /* 이미지 비율 유지, 컨테이너 크기 안에 맞춤 */
    margin-top: 0 !important; /* 상단 마진 제거 */
    padding-top: 0 !important; /* 상단 패딩 제거 */
    border: none !important; /* 테두리 제거 */
    border-top: none !important; /* 상단 테두리 제거 */
    outline: none !important; /* 아웃라인 제거 */
}

.popup-modal a {
    display: block !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    line-height: 0 !important;
    width: 100% !important; /* 컨테이너에 꽉 차게 */
    height: auto !important;
}

/* 슬라이더를 쓰는 경우: 슬라이드 중앙정렬 */
.popup-modal .swiper,
.popup-modal .swiper-wrapper {
    width: 100% !important;
}

.popup-modal .swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 닫기 버튼 */
.popup-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a1a !important;
    border-radius: 50% !important; /* 완전히 둥근 버튼 */
    cursor: pointer !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 
                0 1px 3px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) rotate(90deg) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 
                0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.popup-close:active {
    transform: scale(0.95) rotate(90deg) !important;
}

.popup-close:focus {
    outline: 3px solid rgba(59, 130, 246, 0.5) !important;
    outline-offset: 3px !important;
    background: rgba(255, 255, 255, 1) !important;
}

/* "오늘 하루 보지 않기" 버튼 */
.popup-hide-today {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 16px 20px !important;
    background: #f5f5f5 !important; /* 버튼 영역 배경색 */
    color: #1a1a1a !important;
    border: none !important;
    border-top: 1px solid #e0e0e0 !important; /* 상단 구분선 */
    border-radius: 0 !important; /* 모서리 제거 */
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    z-index: 100 !important; /* z-index를 높여서 항상 보이도록 */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
    box-shadow: none !important; /* 그림자 제거 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-align: center !important; /* 텍스트 중앙 정렬 */
    transform: none !important; /* transform 제거 */
}

.popup-hide-today:hover {
    background: #eeeeee !important;
}

.popup-hide-today:active {
    background: #e0e0e0 !important;
}

.popup-hide-today:focus {
    outline: 3px solid rgba(59, 130, 246, 0.5) !important;
    outline-offset: 3px !important;
    background: rgba(255, 255, 255, 1) !important;
}

/* 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px) saturate(180%);
        -webkit-backdrop-filter: blur(8px) saturate(180%);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(40px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* 반응형 */
@media (max-width: 768px) {
    .popup-overlay {
        flex-direction: column !important; /* 모바일에서는 세로로 배치 */
        align-items: center !important; /* 중앙 정렬 */
        justify-content: flex-start !important; /* 상단부터 시작 */
        align-content: center !important;
        gap: 12px !important;
        padding: 12px !important;
        overflow-y: auto !important; /* 스크롤 가능 */
    }
    
    /* 세로형 팝업일 때 양쪽 여백 제거 및 행 배치 */
    .popup-overlay.popup-portrait-mode {
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex-direction: row !important; /* 행으로 배치 */
        align-items: center !important; /* 중앙 정렬 */
        justify-content: center !important; /* 중앙 정렬 */
        gap: 12px !important; /* 팝업 간 간격 */
    }
    
    .popup-modal {
        max-width: calc(100vw - 24px) !important; /* 모바일 가로형 최대 너비 (화면에 맞게) */
        max-height: calc(100vh - 100px) !important; /* 모바일 가로형 최대 높이 (버튼 공간 확보) */
        width: fit-content !important;
        min-width: 0 !important;
        padding-bottom: 55px !important; /* 버튼 공간 확보 */
        overflow: hidden !important;
    }
    
    /* 세로형 팝업 모달: 모바일에서도 컨테이너 너비 제한 및 여백 제거 */
    .popup-modal.popup-portrait-modal {
        max-width: calc(100vw - 24px) !important; /* 모바일 세로형 최대 너비 (화면에 맞게) */
        max-height: calc(100vh - 100px) !important; /* 모바일 세로형 최대 높이 (버튼 공간 확보) */
        width: auto !important;
        border-radius: 0 !important;
        box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4), 
                    0 8px 24px rgba(0, 0, 0, 0.25) !important;
        padding-bottom: 55px !important; /* 버튼 공간 확보 */
    }
    
    /* 세로형 팝업 이미지: 모바일에서도 여백 제거 */
    .popup-modal.popup-portrait-modal img {
        border-radius: 0 !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 세로형 팝업 컨텐츠: 모바일에서도 여백 제거 */
    .popup-modal.popup-portrait-modal .popup-content,
    .popup-modal.popup-portrait-modal > a {
        border-radius: 0 !important;
        max-width: 100% !important;
    }
    
    .popup-modal .popup-content,
    .popup-modal > a {
        max-height: calc(100vh - 100px) !important;
        max-width: 100% !important;
    }
    
    .popup-modal img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .popup-close {
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    .popup-hide-today {
        font-size: 12px !important;
        padding: 12px 16px !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-top: 1px solid #e0e0e0 !important;
        transform: none !important;
    }
}

/* 스크롤 잠금 */
body.popup-open {
    overflow: hidden;
    padding-right: 15px; /* 스크롤바 너비 보정 */
}

/* 포커스 트랩 */
.popup-modal:focus {
    outline: none;
}