/* SECTION: 통계 헤더 (style.css 공통 스타일 사용) */

/* SECTION: 통계 히어로 */
.section-stats-hero {
	position: relative;
	overflow: hidden;
	height: 374px;
}

/* 배경 레이어 */
.stats-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background: linear-gradient(180deg, rgba(48.41, 151.8, 211.66, 0.9) 0%, #153885 100%);
	z-index: 0;
}

/* 배경 블러 효과 */
.stats-hero-blur {
	position: absolute;
	border-radius: 9999px;
}

.stats-hero-blur.blur-1 {
	width: 808px;
	height: 656px;
	left: -79px;
	top: -385px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 300px 300px 300px;
	filter: blur(150px);
}

.stats-hero-blur.blur-2 {
	width: 808px;
	height: 656px;
	left: 324px;
	top: -36px;
	background: rgba(41.25, 255, 8.36, 0.3);
	box-shadow: 300px 300px 300px;
	filter: blur(150px);
}

.stats-hero-blur.blur-3 {
	width: 681px;
	height: 681px;
	left: 866px;
	top: -359px;
	background: rgba(0, 8.96, 67.23, 0.8);
	box-shadow: 399.8999938964844px 399.8999938964844px 399.8999938964844px;
	filter: blur(199.95px);
}

/* 히어로 콘텐츠 */
.stats-hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 125px 0;
	text-align: center;
}

.stats-hero-title-group {
	display: flex;
	align-items: flex-end;
	gap: 5px;
}

.stats-hero-title {
	color: white;
	margin: 0;
}

.stats-hero-desc {
	color: white;
	margin: 0;
}

/* SECTION: 한계 섹션 */
.section-stats-limitation {
	width: 100%;
	padding: 180px 0;
	background: white;
}

.stats-limitation-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	margin-bottom: 188px;
}

.stats-limitation-title {
	background: linear-gradient(90deg, #153885 0%, #2563eb 58%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	margin: 0;
}

/* 카드 그리드 */
.stats-limitation-cards {
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.stats-limitation-card {
	display: flex;
}

/* 왼쪽 정렬 카드 (1, 3번) */
.stats-limitation-card-left {
	justify-content: flex-start;
}

/* 오른쪽 정렬 카드 (2번) */
.stats-limitation-card-right {
	justify-content: flex-end;
}

/* 카드 래퍼 (아이콘과 스크린샷의 기준점) */
.stats-limitation-card-wrapper {
	position: relative;
	width: 628px;
	height: 380px;
}

/* 카드 박스 */
.stats-limitation-card-box {
	width: 100%;
	height: 100%;
	padding: 60px;
	background: white;
	border-radius: 31px;
	border: 1px solid var(--disabled);
	opacity: 0.8;
	box-shadow: 15px 20px 25px rgba(0, 0, 0, 0.1);
}

.stats-limitation-card-title {
	color: var(--text-main);
	margin: 0;
}

/* 스크린샷 이미지 */
.stats-limitation-card-screenshot {
	position: absolute;
	width: 210px;
	height: auto;
	z-index: 2;
	bottom: 1px;
	right: 70px;
}

/* 3D 아이콘 애니메이션 */
@keyframes floatIcon {
	0% {
		transform: translateY(0) rotate(4deg);
	}
	50% {
		transform: translateY(-15px) rotate(4deg);
	}
	100% {
		transform: translateY(0) rotate(4deg);
	}
}

/* 3D 아이콘 */
.stats-limitation-icon-1 {
	width: 160px;
	position: absolute;
	height: auto;
	z-index: 3;
	right: -105px;
	top: 30px;
	transform: rotate(4deg);
	animation: floatIcon 2s ease-in-out infinite;
}

.stats-limitation-icon-2 {
	width: 141px;
	position: absolute;
	height: auto;
	z-index: 3;
	right: -75px;
	top: -45px;
	transform: rotate(4deg);
	scale: 0.9;
	animation: floatIcon 2s ease-in-out infinite 1s;
}

.stats-limitation-icon-3 {
	width: 180px;
	position: absolute;
	height: auto;
	z-index: 3;
	right: -105px;
	top: 20px;
	transform: rotate(4deg);
	animation: floatIcon 2s ease-in-out infinite 0.5s;
}

/* SECTION: 통계 기능 소개 */
.section-stats-features {
	position: relative;
	width: 100%;
	background: var(--bg-white);
	overflow: hidden;
	padding: 180px 0;
}

/* 상단 헤더 타이틀 */
.stats-features-header {
	position: relative;
	z-index: 10;
	margin-bottom: 200px;
}

.stats-features-header-title {
	background: linear-gradient(90deg, #153885 0%, #2563eb 58%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	font-size: 72px;
	font-weight: 900;
	line-height: 90px;
	text-align: center;
	margin: 0;
}

/* 배경 효과 */
.stats-features-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.stats-features-bg-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 450px; /* 곡선 깊이를 위해 높이 증가 */
}

.stats-features-bg-main {
	position: absolute;
	top: 300px; /* 곡선 아래 시작점 조정 */
	left: 0;
	width: 100%;
	height: calc(100% - 300px);
	background: #f5f8ff;
}

/* 컨테이너 */
.stats-features-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 150px;
}

/* 각 통계 아이템 */
.stats-feature-item {
	width: 1200px;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

/* 헤더 영역 */
.stats-feature-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
}

.stats-feature-header-content {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 951px;
}

.stats-feature-title {
	color: var(--text-main);
	margin: 0;
}

.stats-feature-desc {
	color: var(--text-main);
	margin: 0;
}

/* 네비게이션 버튼 */
.stats-feature-nav {
	display: flex;
	gap: 10px;
	align-items: end;
	flex-shrink: 0;
	margin-bottom: 14px;
}

.stats-feature-nav-btn {
	position: relative;
	width: 62px;
	height: 62px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.stats-feature-nav-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 콘텐츠 박스 */
.stats-feature-content {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}

.stats-feature-box {
	width: 1200px;
	height: 450px;
	background: radial-gradient(ellipse 89.89% 123.2% at 16.67% 54.67%, #153885 0%, #2563eb 100%);
	border-radius: 48px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 60px 90px 0 90px;
	position: relative;
	gap: 60px;
}

/* 텍스트 영역 */
.stats-feature-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 90px;
}

.stats-feature-content-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.stats-feature-number {
	color: var(--accent-color);
}

.stats-feature-subtitle {
	color: var(--text-white);
	margin: 0;
}

.stats-feature-detail {
	color: var(--text-accent);
	margin: 0;
}

/* 이미지 영역 */
.stats-feature-image {
	flex-shrink: 0;
	width: 568px;
	height: 389px;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	background: var(--bg-white);
}

.stats-feature-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px 16px 0 0;
	display: block;
}

/* Common Transition Styles for Auto-play */
.stats-feature-image,
.stats-feature-text {
	transition: opacity 0.3s ease-in-out;
	opacity: 1;
}

.stats-feature-image.fade-out,
.stats-feature-text.fade-out {
	opacity: 0;
}

/* SECTION: 하단 CTA */
.section-stats-cta {
	background-image: url('../images/product/stats/stats_cta_bg.png');
}

.stats-cta-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	text-align: center;
}

.stats-cta-text-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.stats-cta-title {
	color: white;
}

.stats-cta-subtitle {
	color: white;
}

.stats-cta-btn-wrapper {
	display: flex;
	align-items: center;
	gap: 33px;
}

.stats-cta-btn {
	padding: 18px 32px;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.stats-cta-btn-secondary {
	background: white;
	color: var(--primary-color);
}

.stats-cta-btn-primary {
	background: var(--primary-color);
	color: white;
}

/* 태블릿 반응형 (Max-width: 1023px) */

@media (max-width: 1023px) {
	/* 2. 통계 히어로 */
	.section-stats-hero {
		height: auto; /* 고정 높이 해제 */
	}

	.stats-hero-content {
		padding: 100px 0;
		gap: 20px;
	}

	/* 블러 가시성 조정 (텍스트 가독성 확보) */
	.stats-hero-blur.blur-1 {
		opacity: 0.3;
	}

	/* 3. 통계 CTA (style.css 공통 스타일 사용) */

	.stats-cta-btn-wrapper {
		flex-direction: column;
		gap: 15px;
	}

	.stats-cta-btn {
		width: fit-content;
		min-width: 230px;
	}

	/* 4. Limitations Section */
	.section-stats-limitation {
		padding: 100px 0;
	}

	.stats-limitation-header {
		margin-bottom: 80px;
	}

	.stats-limitation-cards {
		display: flex;
		flex-direction: column;
		gap: 60px;
		align-items: center;
	}

	.stats-limitation-card {
		width: 100%;
		justify-content: center; /* 카드 중앙 정렬 */
	}

	.stats-limitation-card-left,
	.stats-limitation-card-right {
		justify-content: center;
	}

	.stats-limitation-card-wrapper {
		width: 100%;
		max-width: 628px;
		/* Height remains fixed or adaptable? Original 380px. */
	}

	/* 5. Features Section */
	.section-stats-features {
		padding: 100px 0;
	}

	.stats-features-bg-svg {
		height: 500px; /* 태블릿: 높이 증가 */
		top: -100px; /* 상단 여백 확보를 위해 이동 */
	}

	.stats-features-bg-main {
		top: 320px; /* 시작점 조정 */
		height: calc(100% - 320px);
	}

	.stats-features-header {
		margin-bottom: 150px;
	}

	.stats-features-header-title {
		font-size: 56px;
		line-height: 1.3;
	}

	.stats-feature-item {
		width: 100%;
		gap: 30px;
		position: relative; /* 네비게이션 포지셔닝용 */
		padding-bottom: 80px; /* 네비게이션 공간 */
	}

	.stats-feature-header-content {
		width: 100%;
		gap: 20px;
	}

	.stats-feature-box {
		width: 100%;
		height: auto;
		min-height: 650px;
		flex-direction: column-reverse; /* 기본: 이미지 상단, 텍스트 하단 */
		padding: 60px 40px;
		gap: 40px;
		align-items: center;
		justify-content: start;
	}

	/* 상품 통계 특화 규칙 (HTML 순서가 이미지->텍스트인 경우) -> 컬럼 방향으로 이미지 상단 배치 */
	.stats-feature-product .stats-feature-box {
		flex-direction: column;
	}

	.stats-feature-content-group {
		gap: 15px;
	}

	.stats-feature-image {
		width: 100%;
		height: auto;
		max-width: 500px;
		background: transparent;
	}

	.stats-feature-image img {
		border-radius: 16px;
	}

	.stats-feature-text {
		padding-top: 0;
		width: 100%;
		text-align: center;
		align-items: center;
	}

	.stats-feature-header {
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
		position: static; /* 네비게이션 버튼 포지셔닝 컨텍스트 해제 */
	}

	/* 네비게이션 버튼 포지셔닝 (콘텐츠 하단 중앙) */
	.stats-feature-nav {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: auto;
		margin: 0;
		justify-content: center;
	}

	.stats-feature-nav-btn {
		width: 50px;
		height: 50px;
	}

	/* 배경 원 스케일링 */
	.stats-feature-nav-btn > svg:first-child {
		width: 100%;
		height: 100%;
	}

	.stats-feature-nav-icon {
		width: 18px;
		height: auto;
	}
}

/* 모바일 반응형 (Max-width: 767px) */

@media (max-width: 767px) {
	/* 2. 통계 히어로 */
	.stats-hero-content {
		padding: 80px 0;
	}

	/* 3. Stats CTA - Layout handled by .subpage-cta-section */

	.stats-cta-btn {
		min-width: 210px;
	}

	/* 4. Limitations Section */
	.section-stats-limitation {
		padding: 60px 0;
	}

	.stats-limitation-header {
		margin-bottom: 60px;
	}

	.stats-limitation-cards {
		gap: 40px;
	}

	.stats-limitation-card-wrapper {
		height: auto; /* 높이 유동적 허용 */
		aspect-ratio: auto;
	}

	.stats-limitation-card-box {
		padding: 40px 30px 150px 30px; /* 이미지 공간 확보를 위한 하단 패딩 */
		height: auto;
		min-height: 350px;
	}

	/* 모바일 이미지 배치 */
	.stats-limitation-card-screenshot {
		right: 50%;
		transform: translateX(50%);
		bottom: 00px;
		width: 150px;
	}

	.stats-limitation-icon-1 {
		width: 100px;
		right: -30px;
		/* top: -20px; */
	}

	.stats-limitation-icon-2 {
		width: 100px;
		right: -15px;
		top: -25px;
	}

	.stats-limitation-icon-3 {
		width: 100px;
		right: -20px;
		top: 65px;
	}

	/* 5. Features Section */
	.section-stats-features {
		padding: 60px 0;
	}

	.stats-feature-box {
		min-height: 460px;
		padding: 30px 20px;
		border-radius: 30px;
	}

	.stats-features-bg-svg {
		height: 700px; /* 모바일: 충분한 높이 확보 */
		width: 150%; /* 텍스트 커버를 위해 곡선 너비 확대 */
		left: 50%;
		transform: translateX(-50%);
		top: -135px; /* 텍스트 커버를 위해 곡선 더 위로 이동 */
	}

	.stats-features-bg-main {
		top: 380px; /* 적절히 조정 */
		height: calc(100% - 380px);
	}

	.stats-features-header {
		margin-bottom: 80px;
	}

	.stats-features-header-title {
		font-size: 36px;
		line-height: 1.3;
	}

	.stats-feature-desc {
		text-align: center;
	}

	.stats-features-container {
		gap: 80px;
	}

	.stats-feature-item {
		padding-bottom: 60px;
	}

	.stats-feature-content-group {
		gap: 10px;
	}

	.stats-feature-nav {
		bottom: 0;
		margin: 0;
	}

	.stats-feature-nav-btn {
		width: 40px;
		height: 40px;
	}

	.stats-feature-nav-icon {
		width: 14px;
		height: auto;
	}

	.stats-feature-header-content {
		align-items: center;
	}
}