@charset "UTF-8";

/* ==========================================================================
   Services 섹션 - 사업 영역
   - AILab 기획팀 시안 (landing.html) 의 디자인을 100% 그대로 매칭
   - 흰색 배경 + 진한 파랑 액센트
   - 호버 시:
       · 좌측 4px 액센트 세로 바 (위→아래 그려짐)
       · 번호 1.15배 확대 + 액센트 색상
       · 제목 8px 우측 이동 + 액센트 색상
       · 배경 살짝 액센트 글로우
   ========================================================================== */

#services {
	padding: 100px 0;
	background: white;
	position: relative;
	transition: background 0.3s ease;
}

.services-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--page-padding-x);
}

/* ─── 섹션 헤더 ─── */
.services-header {
	text-align: center;
	margin-bottom: 50px;
}

.services-label {
	color: var(--primary);
	font-size: 13px;
	letter-spacing: 4px;
	font-weight: 700;
	margin-bottom: 12px;
	transition: color 0.3s ease;
}

.services-title {
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: -1px;
	margin: 0 0 12px;
	transition: color 0.3s ease;
}

.services-subtitle {
	color: #8a8d99;
	font-size: 15px;
	margin: 0;
	transition: color 0.3s ease;
}

/* ─── 사업 영역 리스트 ─── */
.services-list {
	margin-top: 50px;
	border-top: 1px solid #d1d5db;
	transition: border-color 0.3s ease;
}

/* 각 행 - 4컬럼 그리드 (시안 그대로) */
.service-row {
	display: grid;
	grid-template-columns: 100px 1fr 2fr auto;
	align-items: center;
	gap: 40px;
	padding: 28px 0;
	border-bottom: 1px solid #d1d5db;
	transition: all 0.3s, border-color 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

/* 호버 시 좌측 4px 액센트 세로 바 (위→아래 그려짐) */
.service-row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: var(--primary);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.4s, background 0.3s ease;
}

.service-row:hover::before {
	transform: scaleY(1);
	transform-origin: top;
}

/* 호버 시 행 자체: 좌측 슬라이드 + 살짝 글로우 */
.service-row:hover {
	padding-left: 20px;
	background: linear-gradient(90deg, rgba(0, 102, 204, 0.03) 0%, transparent 100%);
}

/* ─── 번호 (01, 02, 03, 04) ─── */
.service-num {
	font-size: 48px;
	font-weight: 800;
	color: #8a8d99;
	letter-spacing: -1px;
	transition: all 0.3s, color 0.3s ease;
}

/* 호버 시 번호: 1.15배 확대 + 액센트 색상 */
.service-row:hover .service-num {
	transform: scale(1.15);
	color: var(--primary);
}

/* ─── 제목 ─── */
.service-title {
	font-size: 28px;
	font-weight: 700;
	color: #1a1a1a;
	letter-spacing: -0.5px;
	transition: all 0.3s, color 0.3s ease;
	word-break: keep-all;
}

/* 호버 시 제목: 8px 우측 이동 + 액센트 색상 */
.service-row:hover .service-title {
	color: var(--primary);
	transform: translateX(8px);
}

/* ─── 설명 ─── */
.service-desc {
	color: #4a4a4a;
	font-size: 15px;
	line-height: 1.7;
	word-break: keep-all;
	transition: color 0.3s ease;
}

/* ─── 태그 영역 ─── */
.service-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.service-tag {
	color: #8a8d99;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 0;
	white-space: nowrap;
	transition: color 0.3s ease;
}

/* 태그 사이 점 구분자 */
.service-tag::after {
	content: '·';
	margin-left: 8px;
}

.service-tag:last-child::after {
	content: '';
}

/* ==========================================================================
   다크 모드 변형 (시안과 동일)
   - 흰 배경 → 다크 배경 (var(--dark))
   - 진한 파랑 액센트 → 시안 액센트 (var(--accent))
   - 글자 색상 어두운 톤 → 흰색 계열
   ========================================================================== */

/* ==========================================================================
   반응형
   ========================================================================== */

/* 태블릿 (768px ~ 1023px) - 태그를 다음 줄로 */
@media (min-width: 768px) and (max-width: 1023px) {
	#services {
		padding: 80px 0;
	}

	.service-row {
		grid-template-columns: 80px 1fr 2fr;
		gap: 28px;
		padding: 26px 0;
	}

	.service-num {
		font-size: 40px;
	}

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

	.service-desc {
		font-size: 14px;
	}

	.service-tags {
		grid-column: 2 / -1;
		justify-content: flex-start;
		margin-top: -4px;
	}
}

/* 모바일 (~767px) - 세로 스택 */
@media (max-width: 767px) {
	#services {
		padding: 60px 0;
	}

	.services-header {
		margin-bottom: 32px;
	}

	.services-list {
		margin-top: 32px;
	}

	/* 그리드 → 세로 스택, 좌측 세로 바(4px) + 여백 확보 */
	.service-row {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 24px 0 24px 16px; /* left: 세로바 4px + 여백 12px */
		overflow: visible;
	}

	/* 세로 바: 모바일에서 항상 표시 (스크롤 환경이므로 hover 없음) */
	.service-row::before {
		transform: scaleY(1);
	}

	/* 호버 시 padding-left 고정 (밀림 방지) */
	.service-row:hover {
		padding-left: 16px;
		background: none;
	}

	/* 모바일에서는 hover 텍스트 변형 제거 */
	.service-row:hover .service-num  { transform: none; color: #8a8d99; }
	.service-row:hover .service-title { transform: none; color: #1a1a1a; }

	.service-num   { font-size: 32px; }
	.service-title { font-size: 18px; }
	.service-desc  { font-size: 13px; }

	.service-tags {
		grid-column: 2 / -1;
		justify-content: flex-start;
		margin-top: 4px;
	}

	.service-tag { font-size: 11px; }
}