/*자원순환 기업철학*/
/* 호버 시 카드 부상 효과 */
.hover-card { transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hover-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }


/* 특허/인증 카드 호버 모션 */
.patent-card { transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.patent-card:hover { transform: translateY(-10px); }
.patent-card:hover .image-slot { border-color: var(--primary); background-color: #f0fdf4; }
.patent-card:hover .image-slot i { color: var(--primary); transform: scale(1.1); }


/* 제품군 상세 토글 스위치 탭 스타일 */
.product-toggle-btn { transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.product-toggle-btn.active { background-color: var(--primary); color: #fff; box-shadow: 0 10px 25px rgba(45, 138, 78, 0.25); }

/* 이미지 오버랩 호버 줌 효과 */
.zoom-img { transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.zoom-container:hover .zoom-img { transform: scale(1.08); }

/* [에너지 쉴드] 애니메이션 요소 스타일 */
.heat-wave { stroke: rgba(239, 68, 68, 0.6); stroke-width: 4; fill: none; }
.shimmer-bg {
	background: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.2) 50%, transparent 75%);
	background-size: 250% 250%;
	animation: shimmer 3s infinite;
}
@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}


/* 메커니즘 카드 스타일 */
.mechanism-card { transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.mechanism-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

/* [모바일 대응 비포/애프터 터치 슬라이더] 극강의 반응형 튜닝 */
.comparison-slider-container {
	position: relative;
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
	overflow: hidden;
}
.comparison-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* [중요] 이미지 분할 크롭을 위한 가로 비율 완벽 고정 스펙 (object-fit 제거하여 반응형 시 왜곡 방지) */
.comparison-img img {
	width: 100% !important; /* 가로 크기를 부모 컨테이너의 정확히 2배로 유지 */
	max-width: none !important;
	height: 100% !important;
	position: absolute;
	top: 0;
}
.comparison-before {
	width: 100%;
	clip-path: inset(0 50% 0 0); /* 초기 50% 반반으로 클리핑 마스크 */
	z-index: 20;
}
.comparison-before img {
	left: 0 !important;
}
.comparison-after img {
	/* left: -100% !important;  *//* 우측 맑은 수조 이미지를 부모 폭 만큼 정확히 당겨 렌더링 */
}
/* 드래그 핸들 (모바일 터치 타겟 48px 이상 터치 규격 만족) */
.slider-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4px;
	background-color: #fff;
	cursor: ew-resize;
	z-index: 30;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	touch-action: none; /* 모바일 브라우저 기본 수직 스크롤 간섭 방어 */
}
.slider-handle-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	background-color: var(--primary);
	border: 4px solid #fff;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	pointer-events: none;
	transition: background-color 0.2s;
}
.slider-handle:active .slider-handle-button {
	background-color: var(--primary-dark);
}