/**
 * AIV Comparison — 모든 규칙은 .aivcmp-section 범위 + aivcmp- 접두어, 테마 충돌 방지용 !important
 */

.aivcmp-section *,
.aivcmp-section *::before,
.aivcmp-section *::after {
	box-sizing: border-box !important;
}

.aivcmp-section {
	position: relative !important;
	padding: 8rem 3rem !important;
	background-color: #0a0a0a !important;
	margin: 0 !important;
	font-size: 16px !important;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

.aivcmp-container {
	max-width: 80rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.aivcmp-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 3rem !important;
	margin-bottom: 5rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.aivcmp-col {
	position: relative !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.aivcmp-card {
	border-radius: 0.5rem !important;
	padding: 2rem !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.aivcmp-card--cloud {
	background: linear-gradient(to bottom right, rgba(239, 68, 68, 0.1), rgba(127, 29, 29, 0.05)) !important;
	border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.aivcmp-card--physical {
	background: linear-gradient(to bottom right, rgba(0, 255, 156, 0.1), rgba(0, 255, 156, 0.05)) !important;
	border: 1px solid rgba(0, 255, 156, 0.3) !important;
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -4px rgba(0, 0, 0, 0.1),
		0 0 24px rgba(0, 255, 156, 0.05) !important;
}

.aivcmp-card-header {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	margin: 0 0 1.5rem 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-sizing: border-box !important;
}

.aivcmp-card-header--physical {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	margin: 0 0 1.5rem 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

.aivcmp-card-heading-stack {
	flex: 1 !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.aivcmp-section .aivcmp-card-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.5rem !important;
	line-height: 2rem !important;
	font-weight: 500 !important;
	color: #fff !important;
	min-width: 0 !important;
	overflow-wrap: anywhere !important;
	border: none !important;
	background: transparent !important;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.aivcmp-section .aivcmp-card-subtitle {
	margin: 0.375rem 0 0 0 !important;
	padding: 0 !important;
	color: #6b7280 !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	border: none !important;
	background: transparent !important;
	font-weight: 400 !important;
	font-family: inherit !important;
}

.aivcmp-feature-list {
	margin: 0 0 2rem 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: none !important;
	background: transparent !important;
}

.aivcmp-feature-list > .aivcmp-feature-row + .aivcmp-feature-row {
	margin-top: 1rem !important;
}

.aivcmp-feature-row {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.75rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-bullet {
	width: 0.5rem !important;
	height: 0.5rem !important;
	border-radius: 9999px !important;
	margin: 0.5rem 0 0 0 !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.aivcmp-bullet--red {
	background-color: #f87171 !important;
}

.aivcmp-bullet--accent {
	background-color: #00ff9c !important;
}

.aivcmp-feature-title {
	color: #fff !important;
	margin: 0 0 0.25rem 0 !important;
	padding: 0 !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	line-height: 1.5rem !important;
	border: none !important;
	background: transparent !important;
	font-family: inherit !important;
}

.aivcmp-feature-desc {
	color: #6b7280 !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	overflow-wrap: anywhere !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	font-weight: 400 !important;
	font-family: inherit !important;
}

.aivcmp-diagram-preamble {
	text-align: center !important;
	margin: 0 0 1rem 0 !important;
	padding: 0 !important;
}

.aivcmp-diagram-flow-line {
	color: #fff !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-diagram-flow-sub {
	color: #6b7280 !important;
	font-size: 0.8125rem !important;
	line-height: 1.25rem !important;
	margin: 0.25rem 0 0 0 !important;
	padding: 0 !important;
}

.aivcmp-diagram {
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-diagram--cloud {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.aivcmp-diagram-node {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-diagram-iconbox {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 0.25rem !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.aivcmp-diagram-iconbox--cloud-sm {
	width: 3rem !important;
	height: 3rem !important;
	background-color: rgba(239, 68, 68, 0.2) !important;
	border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.aivcmp-diagram-connector {
	flex: 1 1 0% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-diagram-line {
	height: 1px !important;
	flex: 1 1 0% !important;
	background-color: rgba(239, 68, 68, 0.3) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.aivcmp-diagram-latency {
	color: #f87171 !important;
	font-size: 0.75rem !important;
	line-height: 1rem !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-diagram-label {
	color: #6b7280 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-diagram--physical {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 1rem !important;
}

.aivcmp-diagram-node--stack {
	align-items: center !important;
}

.aivcmp-diagram-iconbox--physical-lg {
	width: 4rem !important;
	height: 4rem !important;
	background-color: rgba(0, 255, 156, 0.2) !important;
	border: 2px solid rgba(0, 255, 156, 0.6) !important;
	border-radius: 0.25rem !important;
	box-shadow:
		0 10px 15px -3px rgba(0, 255, 156, 0.2),
		0 4px 6px -4px rgba(0, 255, 156, 0.2) !important;
}

.aivcmp-diagram-label-accent {
	color: #00ff9c !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-diagram-sublabel {
	color: #6b7280 !important;
	font-size: 0.75rem !important;
	line-height: 1rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-icon {
	display: block !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-icon-md {
	width: 1.5rem !important;
	height: 1.5rem !important;
}

.aivcmp-icon-lg {
	width: 2rem !important;
	height: 2rem !important;
}

.aivcmp-icon-xl {
	width: 2rem !important;
	height: 2rem !important;
}

.aivcmp-section svg.aivcmp-text-red {
	color: #f87171 !important;
	fill: none !important;
	stroke: currentColor !important;
}

.aivcmp-section svg.aivcmp-text-accent {
	color: #00ff9c !important;
	fill: none !important;
	stroke: currentColor !important;
}

.aivcmp-benefits-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 2rem !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.aivcmp-benefit {
	text-align: center !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.aivcmp-benefit-iconwrap {
	width: 4rem !important;
	height: 4rem !important;
	margin: 0 auto 1rem auto !important;
	background-color: rgba(0, 255, 156, 0.1) !important;
	border: 1px solid rgba(0, 255, 156, 0.3) !important;
	border-radius: 0.5rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.aivcmp-section .aivcmp-benefit-title {
	margin: 0 0 0.5rem 0 !important;
	padding: 0 !important;
	color: #fff !important;
	font-size: 1rem !important;
	line-height: 1.5rem !important;
	font-weight: 500 !important;
	border: none !important;
	background: transparent !important;
	font-family: inherit !important;
	text-transform: none !important;
}

.aivcmp-section .aivcmp-benefit-desc {
	margin: 0 !important;
	padding: 0 !important;
	color: #6b7280 !important;
	font-size: 0.875rem !important;
	line-height: 1.25rem !important;
	overflow-wrap: anywhere !important;
	border: none !important;
	background: transparent !important;
	font-weight: 400 !important;
	font-family: inherit !important;
}

@media (max-width: 1024px) {
	.aivcmp-benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.5rem !important;
	}
}

@media (max-width: 768px) {
	.aivcmp-section {
		padding: 4rem 1.25rem !important;
	}

	.aivcmp-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 2rem !important;
		margin-bottom: 3rem !important;
	}
}

@media (max-width: 520px) {
	.aivcmp-diagram--cloud {
		flex-direction: column !important;
		justify-content: center !important;
		gap: 0.75rem !important;
	}

	.aivcmp-diagram-connector {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 18rem !important;
	}
}

@media (max-width: 480px) {
	.aivcmp-section {
		padding: 3rem 1rem !important;
	}

	.aivcmp-card {
		padding: 1.5rem !important;
	}

	.aivcmp-section .aivcmp-card-title {
		font-size: 1.25rem !important;
		line-height: 1.75rem !important;
	}

	.aivcmp-benefits-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1.5rem !important;
	}
}