/* ------------------------------------------
 * 에디터 삽입 스와이퍼(갤러리) 페이사드 (.prd_swiper)
 * 마크업: CKEditor swiperButton(common.js) / 슬라이더 변환: buildPrdSwiper(common.js)
 * 프론트(headerCommon link) + 관리자 에디터(common.js 지연 로드) 공용 — 동일 외형
 * ------------------------------------------ */
.prd_swiper{position: relative; width: 100%; max-width: 800px; margin: 2rem auto;}
.prd_swiper .swiper-slide{display: flex; align-items: center; justify-content: center; background: #f5f5f5;}
.prd_swiper .swiper-slide .prd_swiper_img{display: block; width: 100%; height: auto;}
/* 페이지네이션(불릿) */
.swiper-container-horizontal>.prd_swiper_pagi.swiper-pagination-bullets{position: relative; margin-top: 1rem; left: 0; right: 0; bottom: 0; z-index: 2; gap: 0.5rem; text-align: center; background: rgba(0, 0, 0, 0.2);  backdrop-filter: blur(10px); display: flex; width: max-content; border-radius: 99rem; padding: 0.4em 0.5em; left:50%; transform: translateX(-50%);}
.swiper-container-horizontal>.prd_swiper_pagi.swiper-pagination-bullets .swiper-pagination-bullet{width: 0.8rem; height: 0.8rem; margin: 0; background: #fff; opacity: 0.6; box-shadow: none;}
.swiper-container-horizontal>.prd_swiper_pagi.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1;}
.prd_swiper .prd_swiper_pagi .swiper-pagination-bullet-active{opacity: 1; background: #fff;}

.swiper-container-horizontal>.prd_swiper_pagi.swiper-pagination-bullets{}

/* 좌우 내비 화살표 */
.prd_swiper .prd_swiper_prev, .prd_swiper .prd_swiper_next{position: absolute; top: 50%; transform: translateY(-50%); width: 4rem; height: 4rem; z-index: 2; cursor: pointer; border-radius: 50%; background: rgba(0, 0, 0, 0.35); transition: background 0.2s;}
.prd_swiper .prd_swiper_prev:hover, .prd_swiper .prd_swiper_next:hover{background: rgba(0, 0, 0, 0.6);}
.prd_swiper .prd_swiper_prev{left: 1rem;}
.prd_swiper .prd_swiper_next{right: 1rem;}
.prd_swiper .prd_swiper_prev::before, .prd_swiper .prd_swiper_next::before{content: ''; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; border-style: solid; border-color: #fff; border-width: 2px 2px 0 0;}
.prd_swiper .prd_swiper_prev::before{transform: translate(-30%, -50%) rotate(-135deg);}
.prd_swiper .prd_swiper_next::before{transform: translate(-70%, -50%) rotate(45deg);}
.prd_swiper .swiper-button-disabled{opacity: 0.3; cursor: default;}

.prd_view_cont01 .detail_info .tab_cont .prd_swiper img{margin-bottom: 0;}

/* ------------------------------------------
 * 타입별 스타일 분기 (스와이퍼1=.prd_swiper_type1 / 스와이퍼2=.prd_swiper_type2)
 * 위 .prd_swiper 규칙은 두 타입 공통 베이스. 타입마다 다르게 쓰려면 아래에 추가/오버라이드.
 * ------------------------------------------ */
.prd_swiper.swiper-container.prd_swiper_type1{border-radius: 1rem; overflow: hidden;}
.prd_swiper.swiper-container.prd_swiper_type2{border-radius: 0;}
.prd_swiper.swiper-container.prd_swiper_type2 .prd_swiper_img{border-radius: 1rem; overflow: hidden;}

/* ------------------------------------------
 * 관리자 에디터 전용 컨트롤(이미지 편집 / 삭제) — common.js addSwiperEditBtn 이 주입, 프론트엔 없음
 * ------------------------------------------ */
.prd_swiper_tools{position: absolute; top: 10px; right: 10px; z-index: 20; display: flex; gap: 6px;}
.prd_swiper_tools button{padding: 6px 12px; border: 0; border-radius: 6px; color: #fff; font-size: 13px; line-height: 1.2; cursor: pointer;}
.prd_swiper_edit_btn{background: rgba(0, 0, 0, 0.6);}
.prd_swiper_edit_btn:hover{background: rgba(0, 0, 0, 0.85);}
.prd_swiper_del_btn{background: rgba(200, 40, 40, 0.78);}
.prd_swiper_del_btn:hover{background: rgba(200, 40, 40, 0.96);}