@charset "utf-8";

/*****************************************
 제품 슬라이드 CSS
*****************************************/

/* ===== 제목 ===== */
.gallery_slide_title {
	font-family: 'Metropolis';
	color: #111;
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: -0.03rem;
}


/* ===== 슬라이드 레이아웃 (래퍼 / 뷰포트 / 카드) ===== */
.gallery-list {
	position: relative;
}

.gallery-list.gallery_slide .bx-wrapper {
	position: relative;
	max-width: 100% !important;
	margin-bottom: 30px;
}

.gallery-list.gallery_slide .bx-viewport {
	height: auto !important;
	cursor: grab;
}

/* 높이는 내용(이미지)에 맞춰 자동 */
.gallery-list.gallery_slide .bx-viewport:active {
	cursor: grabbing;
}

/* 드래그 중 커서 */
.gallery-list.gallery_slide .gallery-slide-ul .gallery-slide-item {
	margin-bottom: 0;
	max-width: 350px;
}

.gallery-list.gallery_slide li a {
	border: none;
	padding: 0;
	display: block;
	height: 100%;
	position: relative;
	/* 오버레이(.gallery-hover / ::after)의 기준 = 카드 */
}


/* ===== 카드 이미지 ===== */
.gallery-list.gallery_slide .gallery-img {
	padding: 1rem;
	overflow: hidden;
	background: #f1f1f1;
	border-radius: 1rem;
	height:210px;
	/* ★ 카드 높이 고정 — 이 값으로 슬라이드 높이 조절 (모든 카드 동일 → 여백/번쩍임 없음) */
}

.gallery-list.gallery_slide .gallery-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* 이미지 전체를 비율 유지하며 카드 안에 맞춤 (잘림 없음). 꽉 채우려면 cover */
	display: block;
}


/* ===== 마우스 오버 효과 (PC 전용) ===== */
@media (min-width: 768px) {
	.gallery-list.gallery_slide a .gallery-hover {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.gallery-list.gallery_slide a .gallery-hover p {
		padding-top: 10%;
	}

	.gallery-list.gallery_slide a:hover .gallery-hover {
		display: flex;
		justify-content: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #fff;
		opacity: 1;
		z-index: 2;
	}

	.gallery-list.gallery_slide a:hover .gallery-hover p {
		padding-top: 20%;
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}

	/* 호버 시 나타나는 반투명 + 십자 아이콘 오버레이 */
	.gallery-list.gallery_slide a::after {
		content: '';
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		position: absolute;
		opacity: 0;
		background: url('../images/icon_cross.png') no-repeat 50% 30%;
		z-index: 1;
		border-radius: 1rem;
	}

	.gallery-list.gallery_slide a:hover::after {
		opacity: 1;
		background: rgba(0, 0, 0, 0.5) url('../images/icon_cross.png') no-repeat 50% 65%;
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
		border-radius: 1rem;
	}
}


/* ===== 이전 / 다음 버튼 ===== */
.gallery-list.gallery_slide .bx-wrapper .bx-controls-direction a {
	position: absolute !important;
	top: 50%;
	bottom: auto;
	margin-top: -20px;
	width: 40px;
	height: 40px;
	background-color: rgba(0, 0, 0, 0.5);
	text-indent: -9999px;
	z-index: 99;
}

.gallery-list.gallery_slide .bx-wrapper .bx-prev {
	left: 10px !important;
	right: auto !important;
	background-image: url("../../layout/A_layout/A_type/images/main/arrow_prev02.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
}

.gallery-list.gallery_slide .bx-wrapper .bx-next {
	right: 10px !important;
	left: auto !important;
	background-image: url("../../layout/A_layout/A_type/images/main/arrow_next02.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
}

.gallery-list.gallery_slide .bx-wrapper .bx-controls-direction a:hover {
	background-color: rgba(0, 0, 0, 1);
}

/* 호버 시 진하게 */
.gallery-list.gallery_slide .bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* 카드용 십자 오버레이(::after)가 버튼에는 겹치지 않게 */
.gallery-list.gallery_slide .bx-wrapper .bx-controls-direction a::after,
.gallery-list.gallery_slide .bx-wrapper .bx-controls-direction a:hover::after {
	display: none;
}

@media (min-width: 768px) {
    .gallery-list.gallery_slide .gallery-img img {
       max-height: auto;
    }
}
/* ===== 반응형 (카드 너비 축소 / 모바일 화살표 숨김) ===== */
@media (max-width: 1199px) {
	.gallery-list.gallery_slide .gallery-slide-ul .gallery-slide-item {
		max-width: 280px;
	}

	.gallery-list.gallery_slide .gallery-img {
		height: 150px;
	}
}

@media (max-width: 991px) {
	.gallery-list.gallery_slide .gallery-slide-ul .gallery-slide-item {
		max-width: 220px;
	}

	.gallery-list.gallery_slide .gallery-img {
		height: 120px;
	}

	.gallery-list.gallery_slide .gallery-slide-ul li {
		padding-left: 7px;
		padding-right: 7px;
	}

	.gallery-list.gallery_slide .bx-wrapper .bx-controls-direction {
		display: none;
	}

	/* 992px 미만 화살표 숨김 */
}

@media (max-width: 767px) {
	.gallery-list.gallery_slide .gallery-slide-ul .gallery-slide-item {
		max-width: 180px;
	}

	.gallery-list.gallery_slide .gallery-img {
		height: 100px;
	}

	.gallery-list.gallery_slide .gallery-slide-ul li {
		padding-left: 4px;
		padding-right: 4px;
	}
}


/* ===== 상세보기 팝업 (#_layer_detail) ===== */
.shop_box_POPwar {
	background: #fff;
	text-align: center;
	padding: 3rem;
	max-width: 90vw;
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	/* 작은 화면에서 넘치지 않게 → 중앙 정렬 유지 */
}

#_layer_detail #bpop_img_src {
	max-width: 100%;
	height: auto;
}

@media (max-width: 800px) {
	.shop_box_POPwar {
		padding: 1.5rem;
	}
}

#_layer_detail .bpop-content {
	margin-top: 15px;
	font-size: 14px;
	line-height: 1.6;
	color: #333;
	max-height: 40vh;
	overflow-y: auto;
	word-break: break-all;
}


/* ===== 슬라이드 상단 이미지 ===== */
.list-top-wra {
	background: url("../../layout/A_layout/A_type/images/product/product_car_bg.jpg") no-repeat center bottom;
	background-size: cover;
	margin-bottom: 5rem;
}

@media (max-width: 767px) {
	.list-top-wra {
		overflow: hidden;
		/* height: 400px; */
	}
}



/* ===== 상단 차량 360° 뷰어 ===== */
.car-viewer {
	padding-top: 20%;
	position: relative;
}
@media (min-width: 1399px) {
	.car-viewer {
		padding-top: 18%;
	}
}
@media (max-width: 991px) {
	.car-viewer {
		padding-top: 40%;
		padding-bottom: 5%;
	}
}
@media (max-width: 767px) {
	.car-viewer {
		padding-top: 50%;
		padding-bottom: 5%;
	}

	/* 자동차 이미지(+스팟)만 115% 확대 */
	.car-stage {
        width: 112%;
        margin-left: -8.5%;
	}
}


.car-stage {
	position: relative;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;   /* 세로 스와이프=페이지 스크롤 허용, 가로 드래그=차량 회전(JS가 처리) */
}

.car-stage:active {
	cursor: grabbing;
}

.car-view-img {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
}





/* 드래그 방해 방지 */

/* 핫스팟: 12px 파란 점 (x,y = 중심점) */
.car-hotspot {
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	/* left/top 을 중심점으로 */
	background: #0ea2d9;
	box-shadow: 0 0 0 5px rgba(45, 127, 249, 0.2);
	cursor: pointer;
	z-index: 6;   /* 좌우 회전 버튼(.car-nav z-index:5) 보다 위 → 겹쳐도 스팟 클릭 가능 */
	transition: box-shadow .2s;
}

/* hover 히트 영역'만 넓힘 */
.car-hotspot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	/* 배경 없음(투명) — 보이지 않지만 마우스는 이 넓은 원에서 반응 */
}
@media (max-width: 767px) {
	.car-hotspot {
		width: 15px;
		height: 15px;
	}
	.car-hotspot::after {
		width: 50px;
		height: 50px;
	}
}



.car-hotspot:hover,
.car-hotspot.is-active {
	/* 호버하는 동안 투명 링이 계속 커졌다 작아지는 맥박(펄스) 효과 */
	animation: car-hotspot-pulse 1s ease-in-out infinite;
}

/* hover 로 이미지가 교체돼도 '현재 점'은 그대로 도드라지게 (밝은 흰 테두리 강조) */
.car-hotspot.is-active {
	background: #1ec3ff;
	box-shadow: 0 0 0 4px #1ec3ff, 0 0 10px 2px rgba(14, 162, 217, .6);
	z-index: 7;
}

@keyframes car-hotspot-pulse {
	0% {
		box-shadow: 0 0 0 5px rgba(45, 127, 249, 0.4);
	}
	100% {
		box-shadow: 0 0 0 20px rgba(45, 127, 249, 0);
	}
}

@media (max-width: 767px) {
	.car-hotspot {
		width: 12px;
		height: 12px;
	}
}

/* 좌우 회전 버튼: 얇은 라인 꺾쇠(‹ ›) */
.car-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 84px;
	height: 84px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	/* 앵커 텍스트 숨김 */
	cursor: pointer;
}

.car-nav::before {
	/* 꺾쇠 = 정사각형의 두 변만 */
	content: '';
	width: 84px;
	height: 84px;
	border-top: 1px solid rgba(0, 0, 0, 0.4);
	border-right: 1px solid rgba(0, 0, 0, 0.4);
	transition: border-color .2s;
}

.car-prev {
	left: 3%;
}

.car-prev::before {
	transform: rotate(-135deg);
}

/* ‹ */
.car-next {
	right: 3%;
}

.car-next::before {
	transform: rotate(45deg);
}

/* › */
.car-nav:hover::before {
	border-color: #333;
}

/* 부품 팝업: 핫스팟(점)에서 선으로 연결되는 카드 (위 이미지 / 아래 제품코드) */
.car-popup {
	position: absolute;
	z-index: 10;
}

.car-popup::before {
	/* 점 → 카드 연결선 */
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 60px;
	background: #0ea2d9;
}

.car-popup-card {
	position: absolute;
	bottom: 60px;
	/* 연결선 위에 얹힘 */
	left: 0;
	transform: translateX(-50%);
	/* 점 기준 가로 중앙 */
	width: 280px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid #0ea2d9;
	border-radius: 1rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	padding: 0 1rem 1.5rem;
	text-align: center;
}

/* ★ 가로로 긴 제품 이미지용 : 팝업을 더 넓게 (부품 데이터에 wide:true 지정 시 적용) */
.car-popup.is-wide .car-popup-card {
	width: 340px;
}

@media (max-width: 911px) {
	.car-popup::before {
		height: 40px;
	}
	.car-popup-card {
		width: 200px;
		bottom: 40px;
	}
	.car-popup.is-wide .car-popup-card {
		width: 240px;
	}
}
@media (max-width: 767px) {
	.car-popup::before {
		height: 20px;
	}
	.car-popup-card {
		width: 200px;
		bottom: 20px;
		padding-bottom:0.5rem
	}
	.car-popup.is-wide .car-popup-card {width: 220px;}
}



.car-popup-img {
	display: block;
	max-width: 72%;
	height: auto;
	margin: 0 auto 0rem;
}

.car-popup.is-wide .car-popup-img {
	max-width: 92%;
}
@media (max-width: 767px) {
	.car-popup.is-wide .car-popup-img {
		max-width: 80%;
	}
}

/* ★ 팝업 이미지 2~3장 : 가로로 나란히 (부품 데이터 img 를 배열로 지정 시) */
.car-popup-imgs {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: .5rem;
}
.car-popup-imgs.is-2 .car-popup-img,
.car-popup-imgs.is-3 .car-popup-img {
	max-width: 100%;
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
	object-fit: contain;
}
@media (max-width: 767px) {
	.car-popup-imgs {
		gap: .3rem;
	}
	/* 모바일에서 2~3장 : 축소하지 않고 가로 스크롤로 넘겨봄 */
	.car-popup-imgs.is-scroll {
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		touch-action: pan-x;
		scrollbar-width: thin;
	}
	.car-popup-imgs.is-scroll .car-popup-img {
		flex: 0 0 80%;
		width: 80%;
		max-width: none;
		margin: 0;
		scroll-snap-align: center;
	}
	.car-popup-imgs.is-scroll::-webkit-scrollbar {
		height: 3px;
	}
	.car-popup-imgs.is-scroll::-webkit-scrollbar-thumb {
		background: rgba(14, 162, 217, 0.5);
		border-radius: 3px;
	}
}
/* 부품명(팝업 제목) */
.car-popup-name {
	font-weight: 700;
	font-size: 1.1rem;
	color: #111;
	margin-bottom: .3rem;
	line-height: 1.3;
}

.car-popup-code {
	font-weight: 600;
	font-size: .95rem;
	color: #0ea2d9;
	letter-spacing: .02em;
}

/* 설명 문구 (맨 아래, 옅은 회색) */
.car-popup-desc {
	margin-top: .7rem;
	padding-top: .7rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: .85rem;
	line-height: 1.5;
	color: #555;
	text-align: center;
	word-break: keep-all;
}





.car-popup-close {
	position: absolute;
	right: -0.7rem;
	top: -0.7rem;
	font-size: 20px;
	width: 23px;
	height: 23px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.8) !important;
	background:rgba(0, 0, 0, 0.5);
	border-radius: 50%;
}

.car-popup-close:hover {
	color: rgba(255, 255, 255, 1);
	background:rgba(0, 0, 0, 0.8);
}