@charset "utf-8";

/* ============================================================
   msub16 — 스크롤텔링형
   좌: 풀 배경 이미지 sticky / 우: 챕터 텍스트 패널
   ============================================================ */

/* ============================================================
   히어로
   ============================================================ */
.st-hero {
	position: relative;
	height: 72vh;
	min-height: 480px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

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

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

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

.st-hero-cat {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 500;
	margin-bottom: 16px;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.75s ease, transform 0.75s ease;
}

.st-hero-tit {
	font-size: clamp(32px, calc(18px + 2.5vw), 58px);
	font-weight: 800;
	font-family: var(--font-sub-title);
	margin-bottom: 14px;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.75s ease, transform 0.75s ease;
}

.st-hero-sub {
	font-size: clamp(16px, calc(4px + 1.5vw), 20px);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.75s ease, transform 0.75s ease;
}

.st-hero.is-init .st-hero-cat  { opacity: 0.6;  transform: none; transition-delay: 0.1s; }
.st-hero.is-init .st-hero-tit  { opacity: 1;    transform: none; transition-delay: 0.26s; }
.st-hero.is-init .st-hero-sub  { opacity: 0.75; transform: none; transition-delay: 0.42s; }

/* ============================================================
   작가 소개 바
   ============================================================ */
.st-intro-bar {
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding: 32px 60px;
	max-width: 1599px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 48px;
}

.st-intro-name {
	font-size: clamp(22px, calc(10px + 2vw), 34px);
	font-weight: 800;
	font-family: var(--font-sub-title);
	white-space: nowrap;
}

.st-intro-div {
	width: 1px;
	height: 48px;
	background: var(--color-border);
	flex-shrink: 0;
}

.st-intro-role {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 500;
	color: var(--color-text-muted);
	margin-bottom: 6px;
}

.st-intro-desc {
	font-size: clamp(15px, calc(3px + 1.5vw), 19px);
	color: var(--color-text-sub);
	max-width: 560px;
}

/* ============================================================
   스크롤텔링 본문 — 그리드 레이아웃
   ============================================================ */
.st-story {
	display: grid;
	grid-template-columns: 60% 40%;
	position: relative;
}

/* ── 좌: 배경 이미지 스테이지 ── */
.st-bg-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	align-self: start;
	overflow: hidden;
}

.st-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1s ease;
}

.st-bg.is-active {
	opacity: 1;
}

/* 우측 경계 그라디언트 — 패널로 자연스럽게 이어짐 */
.st-bg-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, transparent 60%, var(--color-bg-main) 100%);
	pointer-events: none;
}

/* ── 우: 텍스트 패널 ── */
.st-panel {
	padding: 72px 60px 80px 0;
	background: var(--color-bg-main);
	position: relative;
	z-index: 1;
}

.st-lead {
	font-size: clamp(18px, calc(6px + 1.5vw), 24px);
	color: var(--color-text-sub);
	padding-bottom: 48px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--color-border);
}

/* ── 챕터 ── */
.st-chapter {
	padding: 52px 0;
	border-bottom: 1px solid var(--color-border);
	opacity: 0.25;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.st-chapter.is-visible {
	transform: none;
}

.st-chapter.is-active {
	opacity: 1;
}

.st-chapter:last-child {
	border-bottom: none;
}

.st-ch-num {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 700;
	color: var(--color-text-muted);
	margin-bottom: 12px;
	transition: color 0.4s;
}

.st-chapter.is-active .st-ch-num {
	color: var(--color-primary);
}

.st-ch-tit {
	font-size: clamp(22px, calc(10px + 1.8vw), 34px);
	font-weight: 800;
	color: var(--color-text-main);
	font-family: var(--font-sub-title);
	margin-bottom: 16px;
}

.st-ch-body {
	font-size: clamp(16px, calc(2px + 1.6vw), 20px);
	color: var(--color-text-sub);
}

/* 모바일 챕터 이미지 — 데스크탑에서 숨김 */
.st-ch-img-mo {
	display: none;
}

/* ============================================================
   반응형 — 999px
   ============================================================ */
@media all and (max-width: 999px) {
	.st-hero-inner  { padding: 0 32px 48px; }
	.st-intro-bar   { padding: 24px 32px; gap: 32px; }

	.st-story {
		grid-template-columns: 58% 42%;
	}

	.st-panel { padding: 56px 32px 64px 0; }
}

/* ============================================================
   반응형 — 768px (모바일: 세로 스택)
   ============================================================ */
@media all and (max-width: 768px) {
	.st-hero-inner { padding: 0 20px 40px; }

	.st-intro-bar {
		padding: 20px;
		flex-wrap: wrap;
		gap: 12px;
	}
	.st-intro-div { display: none; }

	.st-story {
		grid-template-columns: 1fr;
	}

	/* 데스크탑 이미지 스테이지 숨기고 챕터 내 이미지 사용 */
	.st-bg-stage { display: none; }

	.st-panel { padding: 40px 20px 60px; }

	.st-chapter { padding: 36px 0; opacity: 1; transform: none; }

	/* 챕터 이미지 표시 */
	.st-ch-img-mo {
		display: block;
		aspect-ratio: 16 / 9;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 20px;
	}

	.st-ch-img-mo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ============================================================
   반응형 — 499px
   ============================================================ */
@media all and (max-width: 499px) {
	.st-hero { height: 60vh; }
	.st-chapter { padding: 28px 0; }
}