@charset "UTF-8";

/* ==========================================================================
   §5. REFERENCE 섹션 전용 스타일 (reference.css)
   - 흰 배경 (Tech 다음 자연스러운 라이트 흐름)
   - 좌측 세로 라인 + 연도 점 마커 + 가로 카드
   - 라인은 primary → accent 그라데이션
   - 카드 호버: 우측 이동 + 좌측 파란 라인 + 그림자
   ========================================================================== */

#reference {
	padding: 100px 0;
	background: white;
}

/* --------------------------------------------------------------------------
   타임라인 컨테이너 (좌측 세로 라인)
   -------------------------------------------------------------------------- */
.timeline {
	position: relative;
	max-width: 900px;
	margin: 60px auto 0;
	padding-left: 40px;
}

/* 좌측 세로 라인 (primary → accent 그라데이션) */
.timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--primary);
}

/* --------------------------------------------------------------------------
   연도 그룹 (B4: 구분선 없음, 자연스러운 흐름)
   -------------------------------------------------------------------------- */
.year-group {
	position: relative;
	margin-bottom: 50px;
}

.year-group:last-child {
	margin-bottom: 0;
}

/* 연도 라벨 공통 */
.year-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 24px;
}

/* 연도 옆 원형 점 공통 — 16px 고정으로 left:-40px 와 정확히 center 맞춤 */
.year-label::before {
	content: "";
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 4px solid white;
}

/* 모든 연도 마커 — primary 단색 */
.year-label {
	color: var(--primary);
}
.year-label::before {
	background: var(--primary);
	box-shadow: 0 0 0 2px var(--primary);
}

/* --------------------------------------------------------------------------
   프로젝트 카드 리스트
   -------------------------------------------------------------------------- */
.project-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 카드: 기간 / 정보 / 태그 3단 그리드 */
.project-card {
	display: grid;
	grid-template-columns: 160px 1fr auto;
	gap: 24px;
	align-items: center;
	padding: 20px 24px;
	background: var(--light);
	border-radius: 8px;
	border-left: 3px solid transparent;
	transition: all 0.3s ease;
}

.project-card:hover {
	background: white;
	border-left-color: var(--primary);
	box-shadow: 0 4px 16px rgba(0, 102, 204, 0.1);
	transform: translateX(4px);
}

/* 좌측: 기간 */
.proj-period {
	font-size: 13px;
	color: var(--gray-light);
	font-weight: 500;
	white-space: nowrap;
}

/* 가운데: 프로젝트 정보 */
.proj-info {
	min-width: 0;
}

.proj-title {
	font-size: 16px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.4;
	margin-bottom: 4px;
}

.proj-client {
	font-size: 12px;
	color: var(--gray-light);
}

/* 우측: 태그 */
.proj-tags {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.proj-tag {
	font-size: 10px;
	font-weight: 700;
	padding: 4px 10px;
	background: rgba(0, 102, 204, 0.08);
	color: var(--primary);
	border-radius: 12px;
	letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   반응형 - 태블릿 (768px ~ 1023px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	#reference {
		padding: 80px 0;
	}

	.timeline {
		margin-top: 40px;
	}

	.project-card {
		grid-template-columns: 130px 1fr auto;
		gap: 16px;
		padding: 16px 20px;
	}
}

/* --------------------------------------------------------------------------
   반응형 - 모바일 (~767px: 카드 세로 적층)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	#reference {
		padding: 60px 0;
	}

	.timeline {
		margin-top: 40px;
		padding-left: 32px;
	}

	.year-label {
		font-size: 22px;
		margin-bottom: 16px;
	}

	.year-label::before {
		left: -32px;
		width: 12px;
		height: 12px;
		border-width: 3px;
	}

	.year-group {
		margin-bottom: 36px;
	}

	/* 모바일: 카드 세로 적층 (기간 → 정보 → 태그) */
	.project-card {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 16px;
	}

	.proj-period {
		font-size: 12px;
	}

	.proj-title {
		font-size: 15px;
	}

	.proj-client {
		font-size: 11px;
	}

	.proj-tags {
		margin-top: 4px;
	}
}