/**
 * DEVOCEAN Responsive Popup Slider for Gnuboard - CSS
 * 
 * @author    DEVOCEAN (http://devocean.kr)
 * @copyright (c) 2025 DEVOCEAN. All rights reserved.
 * @version   1.0.0
 */


/* ==========================================================================
 * 사용자 컨트롤 설정 (상단/하단 닫기 버튼, 슬라이더 좌우버튼, 슬라이더 불릿 )
 * --------------------------------------------------------------------------
 * · 컨트롤 컬러 설정 (기본값: 흰색)
 * · 개별 요소 표시 여부 조절 가능 (필요 시 display: none; 적용)
 *     - 상단 닫기 버튼       : .hd_pops_top_close
 *     - 좌우 네비 버튼       : .swiper-button-next / .swiper-button-prev
 *     - 하단 페이징 불릿     : .swiper-pagination
 * ========================================================================== */

:root { --devpop-color: #fff; } /* 컨트롤 컬러 (기본: 흰색) */
:root { --devpop-color-02: #000; } /* 컨트롤 텍스트 (기본: 블랙) */
.hd_pops_top_close { display: block; } /* 상단 닫기 버튼 표시 */
.devocean-popup-slider .swiper-button-next { display: block; } /* 오른쪽 버튼 표시 */
.devocean-popup-slider .swiper-button-prev { display: block; } /* 왼쪽 버튼 표시 */
.devocean-popup-slider .swiper-pagination { display: block; } /* 페이지네이션 표시 */

/* 다크모드 */
[data-theme="dark"] { --devpop-color: #000; --devpop-color-02: #fff; }
.devocean-responsive-popup[data-theme="dark"] .hd_pops_footer { border : 1px solid #4f4f4f !important; }
.devocean-responsive-popup[data-theme="dark"] .hd_pops_footer button:first-child { border-right: 1px solid #4f4f4f; }

/* 센터정렬 팝업 */
.devocean-responsive-popup[data-position="center"] { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }


/* ==========================================================================
 * 반응형 팝업 기본 스타일 시작
 * ========================================================================== */
.hd_pops {z-index:9999;}
#devocean_hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.devocean-responsive-popup { border: none !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); overflow: hidden; background: #000 !important;  }
.devocean-responsive-popup .hd_pops_con { overflow: hidden; }
.devocean-responsive-popup .hd_pops_footer { display: flex; background: var(--devpop-color) ; border : 1px solid #e5e5e5;  min-height: 42px; overflow: visible !important;}
.devocean-responsive-popup .hd_pops_footer button { width: 50%; text-align: center; font-size: 14px; padding: 10px 0; border: none; color: var(--devpop-color-02); cursor: pointer; }
.devocean-responsive-popup .hd_pops_footer .hd_pops_reject, .devocean-responsive-popup .hd_pops_footer .hd_pops_close { background: var(--devpop-color) ; }
.devocean-responsive-popup .hd_pops_footer button:first-child { border-right: 1px solid #e5e5e5;  }

/* 슬라이더 스타일 */
.devocean-popup-slider-container { width: 100%; height: 100%; overflow: hidden; position: relative; }
.devocean-popup-slider { width: 100%; height: 100%; }
.devocean-popup-slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.devocean-popup-slider .swiper-slide a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.devocean-popup-additional-content { padding: 15px; background: #fff; display: none; }

/* 네비게이션 버튼 */
.devocean-popup-slider .swiper-button-next, .devocean-popup-slider .swiper-button-prev { background: none; width: 56px; height: 56px; top: 50%; transform: translateY(-50%); color: transparent; z-index: 10; cursor: pointer; }
.devocean-popup-slider .swiper-button-next { right: 0px; }
.devocean-popup-slider .swiper-button-prev { left: 0px; }

/* 화살표 커스텀 */
.devocean-popup-slider .swiper-button-next:after, .devocean-popup-slider .swiper-button-prev:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: solid var(--devpop-color); border-width: 0 1px 1px 0; border-radius: 1px; opacity: 0.6; }
.devocean-popup-slider .swiper-button-next:after { transform: translate(-50%, -50%) rotate(-45deg); }
.devocean-popup-slider .swiper-button-prev:after { transform: translate(-50%, -50%) rotate(135deg); }

/* 페이지네이션 */
.devocean-popup-slider .swiper-pagination { position: absolute; bottom: 15px; left: 0; width: 100%; z-index: 10; display: flex; justify-content: center; gap: 4px; }
.devocean-popup-slider .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--devpop-color); opacity: 0.6; transition: all 0.3s ease; }
.devocean-popup-slider .swiper-pagination-bullet-active { width: 20px; border-radius: 4px; background: var(--devpop-color);  opacity: 1;}

.hd_pops_top_close { position: absolute; top: 10px; right: 10px; background: transparent; border: none; cursor: pointer; z-index: 10; padding: 10px; }

/* 닫기 아이콘 스타일 */
.hd_pops_top_close .close-icon { position: relative; display: inline-block; width: 20px; height: 20px; }
.hd_pops_top_close .close-icon::before, .hd_pops_top_close .close-icon::after { content: ''; position: absolute; top: 0; left: 5px; width: 1px; height: 20px; background-color: var(--devpop-color); border-radius: 1px; }
.hd_pops_top_close .close-icon::before { transform: rotate(45deg); }
.hd_pops_top_close .close-icon::after { transform: rotate(-45deg); }

/* 반응형 스타일 */
@media (max-width: 480px) {
    .devocean-responsive-popup { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; max-width: 95% !important; max-height: 95% !important; margin: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); overflow: hidden; }
    .devocean-responsive-popup .hd_pops_con { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 100%; overflow: auto; }
    .devocean-responsive-popup .swiper-slide img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; margin: 0 auto; }
    .devocean-responsive-popup .hd_pops_footer { width: 100% !important; display: flex; justify-content: space-between; box-sizing: border-box; }
}