@charset "UTF-8";

/* ==========================================================================
   §2. IDEOLOGY 섹션 전용 스타일 (ideology.css)
   - 다크 배경 (모드 무관, hero/footer와 같은 톤 유지)
   - 좌측 sticky 제목 + 우측 가치 리스트
   - 시안 액센트, 호버 인터랙션
   ========================================================================== */

#ideology {
	background: linear-gradient(180deg, var(--dark-secondary) 0%, var(--dark) 100%);
	padding: 120px var(--page-padding-x);
	position: relative;
	overflow: hidden;
}

.ideology-container {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 80px;
	align-items: start;
}

/* --------------------------------------------------------------------------
   좌측: sticky 제목 영역
   -------------------------------------------------------------------------- */
.ideology-left {
	position: sticky;
	top: calc(var(--header-height) + 40px);
}

.ideology-label {
	color: var(--accent);
	font-size: var(--fs-xs);
	letter-spacing: 4px;
	font-weight: 700;
	margin-bottom: 24px;
	display: inline-block;
}

.ideology-title {
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	color: white;
	line-height: 1.2;
	letter-spacing: -1.5px;
	margin-bottom: 28px;
}

.ideology-title .accent {
	color: var(--accent);
	display: block;
}

.ideology-desc {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-xl);
	line-height: 1.8;
}

/* --------------------------------------------------------------------------
   우측: 가치 리스트 (호버 인터랙션)
   -------------------------------------------------------------------------- */
.ideology-right {
	display: flex;
	flex-direction: column;
}

.value-item {
	padding: 40px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	transition: all 0.4s ease;
	cursor: default;
}

.value-item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.value-item:hover {
	padding-left: 24px;
	background: linear-gradient(90deg, rgba(0, 217, 255, 0.05), transparent);
}

.value-item:hover .value-num,
.value-item:hover .value-title {
	color: var(--accent);
}

.value-header {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

.value-num-title {
	display: flex;
	align-items: baseline;
	gap: 24px;
}

.value-num {
	font-size: 36px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.3);
	letter-spacing: -1px;
	line-height: 1;
	transition: color 0.3s;
	font-family: 'Pretendard', sans-serif;
	font-variant-numeric: tabular-nums;
}

/* 시안 매칭: 28px (이전 26px → 28px로 수정) */
.value-title {
	font-size: 28px;
	font-weight: 800;
	color: white;
	letter-spacing: -0.5px;
	transition: color 0.3s;
	margin: 0;
}

.value-desc {
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--fs-base);
	line-height: 1.8;
	padding-left: 60px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   반응형 - 태블릿 (768px ~ 1023px: 1단 레이아웃)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	#ideology {
		padding: 80px var(--page-padding-x);
	}

	.ideology-container {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.ideology-left {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   반응형 - 모바일 (~767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	#ideology {
		padding: 60px var(--page-padding-x);
	}

	.ideology-container {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.ideology-left {
		position: static;
	}

	.ideology-label {
		font-size: var(--fs-xs);
		letter-spacing: 3px;
		margin-bottom: 16px;
	}

	.ideology-title {
		font-size: clamp(26px, 7vw, 36px);
		letter-spacing: -1px;
		margin-bottom: 20px;
	}

	.ideology-desc {
		font-size: var(--fs-sm);
		line-height: 1.7;
	}

	/* 모바일에서는 좌측 패딩 효과 제거 (잘릴 수 있음) */
	.value-item:hover {
		padding-left: 0;
	}

	.value-item {
		padding: 28px 0;
	}

	.value-num-title {
		gap: 16px;
	}

	.value-num {
		font-size: 28px;
	}

	.value-title {
		font-size: 22px;
	}

	.value-desc {
		font-size: var(--fs-sm);
		line-height: 1.7;
		padding-left: 44px;
	}
}