@charset "utf-8";

/* ============================================================
	msub09 — 타임라인
	연도별 좌우 교차 배치, 스크롤 진입 애니메이션
	============================================================ */

/* ============================================================
	서브 비주얼
	============================================================ */
.tl-hero {
	position: relative;
	height: 55vh;
	min-height: 360px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.tl-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	will-change: transform;
}

.tl-hero-dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
	z-index: 1;
}

.tl-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 60px 52px;
	color: #fff;
}

.tl-hero-cat {
	font-size: 16px;
	text-transform: uppercase;
	opacity: 0;
	margin-bottom: 14px;
	transform: translateY(16px);
	transition:
		opacity 0.75s ease,
		transform 0.75s ease;
}

.tl-hero-tit {
	font-family: "GMarketSans", sans-serif;
	font-size: clamp(28px, 4.5vw, 56px);
	font-weight: 700;
	margin-bottom: 14px;
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.75s ease 0.16s,
		transform 0.75s ease 0.16s;
}

.tl-hero-sub {
	font-size: clamp(16px, 1.2vw, 18px);
	font-weight: 300;
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.75s ease 0.3s,
		transform 0.75s ease 0.3s;
}

.tl-hero.is-init .tl-hero-cat {
	opacity: 0.6;
	transform: none;
}
.tl-hero.is-init .tl-hero-tit {
	opacity: 1;
	transform: none;
}
.tl-hero.is-init .tl-hero-sub {
	opacity: 0.65;
	transform: none;
}

/* ============================================================
	타임라인 섹션
	============================================================ */
.tl-section {
	background: var(--color-bg-main, #fff);
	padding: 60px 0 80px;
}

.tl-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ============================================================
	타임라인 리스트 + 중앙 축
	============================================================ */
.tl-list {
	position: relative;
	list-style: none;
}

/* 중앙 세로 축 — 트랙 */
.tl-axis {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--color-border, #eee);
	z-index: 0;
}

/* 스크롤에 따라 채워지는 fill */
.tl-axis-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--color-primary, #3b82f6);
}

/* ============================================================
	타임라인 아이템
	============================================================ */
.tl-item {
	display: flex;
	width: 100%;
	position: relative;
	margin-bottom: 60px;
}

.tl-item:last-child {
	margin-bottom: 0;
}

/* 왼쪽 아이템 */
.tl-left {
	padding-right: calc(50% + 44px);
	justify-content: flex-end;
}

/* 오른쪽 아이템 */
.tl-right {
	padding-left: calc(50% + 44px);
	justify-content: flex-start;
}

/* 축 위의 점 */
.tl-dot {
	position: absolute;
	top: 22px;
	left: calc(50% - 8px);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-primary, #3b82f6);
	border: 3px solid var(--color-bg-main, #fff);
	box-shadow: 0 0 0 1.5px var(--color-primary, #3b82f6);
	z-index: 2;
	transform: scale(0);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tl-item.is-visible .tl-dot {
	transform: scale(1);
}

/* 콘텐츠 박스 */
.tl-body {
	width: 100%;
}

.tl-left .tl-body {
	text-align: right;
}

/* 연도 라벨 */
.tl-date {
	display: inline-block;
	font-family: "GMarketSans", sans-serif;
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 700;
	color: var(--color-primary, #3b82f6);
	margin-bottom: 14px;
}

/* 이미지 */
.tl-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 20px;
}

.tl-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.tl-item:hover .tl-img img {
	transform: scale(1.04);
}

/* 이미지 클립패스 reveal */
.tl-img {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s cubic-bezier(0.4, 0, 0.15, 1) 0.2s;
}

.tl-item.is-visible .tl-img {
	clip-path: inset(0 0 0% 0);
}

/* 제목 */
.tl-title {
	font-family: "GMarketSans", sans-serif;
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 700;
	margin-bottom: 12px;
}

/* 설명 */
.tl-desc {
	font-size: clamp(16px, 1.1vw, 17px);
	color: var(--color-text-sub, #666);
}

/* ============================================================
	진입 애니메이션
	============================================================ */
.tl-item {
	opacity: 0;
	transition:
		opacity 0.65s ease,
		transform 0.65s ease;
}

.tl-left {
	transform: translateX(-36px);
}
.tl-right {
	transform: translateX(36px);
}

.tl-item.is-visible {
	opacity: 1;
	transform: none;
}

/* ============================================================
	반응형 — 768px 이하 (축 왼쪽 정렬, 단일 컬럼)
	============================================================ */
@media all and (max-width: 768px) {
	.tl-wrap {
		padding: 0 24px 0 56px;
	}

	/* 축 왼쪽으로 이동 */
	.tl-axis {
		left: 0;
		transform: none;
	}

	/* 모든 아이템 오른쪽(단일 컬럼) */
	.tl-item.tl-left,
	.tl-item.tl-right {
		padding-left: 28px;
		padding-right: 0;
		justify-content: flex-start;
	}

	.tl-left .tl-body {
		text-align: left;
	}

	/* 점 왼쪽 축 위로 */
	.tl-dot {
		left: -8px;
	}

	/* 진입 방향 통일 */
	.tl-left,
	.tl-right {
		transform: translateX(-20px);
	}

	.tl-item {
		margin-bottom: 40px;
	}
}

@media all and (max-width: 480px) {
	.tl-hero-inner {
		padding: 0 20px 36px;
	}

	.tl-item {
		margin-bottom: 40px;
	}
}