@charset "utf-8";

/* ============================================================
   씬 카운터 (고정)
   ============================================================ */
.sc-counter {
	position: fixed;
	top: 110px;
	right: clamp(20px, 4vw, 48px);
	z-index: 80;
	display: flex;
	align-items: baseline;
	gap: 4px;
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
	mix-blend-mode: difference;
}
.sc-counter.is-visible { opacity: 1; }

.sc-counter-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: #ede8de;
}
.sc-counter-num {
	font-size: clamp(28px, calc(18px + 2vw), 48px);
	font-weight: 900;
	color: #ede8de;
}
.sc-counter-sep {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(237, 232, 222, 0.45);
	margin: 0 2px;
}
.sc-counter-total {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(237, 232, 222, 0.45);
}

/* ============================================================
   씬 컷 플래시
   ============================================================ */
.sc-flash {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: #ede8de;
	opacity: 0;
	pointer-events: none;
}

/* ============================================================
   오프닝 히어로
   ============================================================ */
.sc-hero {
	position: relative;
	height: 70vh;
	min-height: 500px;
	overflow: hidden;
	background: #1a1510;
}

.sc-grain {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
	opacity: 0.25;
}

.sc-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sc-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: brightness(0.48) saturate(0.55) sepia(0.12);
}

.sc-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to top,
		rgba(26, 21, 16, 0.97) 0%,
		rgba(26, 21, 16, 0.55) 40%,
		rgba(26, 21, 16, 0.1) 75%,
		transparent 100%
	);
	pointer-events: none;
}

.sc-hero-inner {
	position: relative;
	z-index: 4;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 clamp(24px, 8vw, 120px) clamp(48px, 7vh, 88px);
}

.sc-hero-eyebrow {
	display: block;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(237, 232, 222, 0.38);
	margin-bottom: 20px;
	font-weight: 500;
}

.sc-hero-tit {
	font-size: clamp(42px, calc(22px + 4vw), 88px);
	font-weight: 900;
	color: #ede8de;
	margin-bottom: 20px;
}

.sc-hero-sub {
	font-size: clamp(16px, calc(12px + 0.8vw), 22px);
	color: rgba(237, 232, 222, 0.6);
}

/* ============================================================
   씬 — 공통
   ============================================================ */
.sc-scene {
	background: #ede8de;
	padding-top: clamp(40px, 6vh, 72px);
}

/* ============================================================
   씬 이미지 블록
   ============================================================ */
.sc-scene-img-wrap {
	position: relative;
	height: 58vh;
	min-height: 360px;
	overflow: hidden;
	max-width: 1600px;
	margin: 0 auto;
}

.sc-scene-img-bg {
	position: absolute;
	inset: 0;
	will-change: transform;
}
.sc-scene-img-bg img {
	width: 100%;
	height: 115%;
	object-fit: cover;
	display: block;
	filter: brightness(0.52) saturate(0.6) sepia(0.08);
}

/* 이미지 오버레이 (그라데이션 + 텍스트 영역) */
.sc-scene-img-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to top,
		rgba(26, 21, 16, 0.96) 0%,
		rgba(26, 21, 16, 0.45) 45%,
		rgba(26, 21, 16, 0.05) 80%,
		transparent 100%
	);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(24px, 4vh, 48px) clamp(24px, 6vw, 100px);
	gap: 14px;
}

/* 씬 03 인용 — 중앙 정렬 */
.sc-scene-img-overlay--quote {
	justify-content: center;
	align-items: center;
	text-align: center;
	background: rgba(26, 21, 16, 0.68);
}

/* ============================================================
   씬 배지 (번호)
   ============================================================ */
.sc-scene-badge {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.sc-scene-img-overlay--quote .sc-scene-badge {
	justify-content: center;
	margin-bottom: 24px;
}

.sc-badge-num {
	font-size: clamp(28px, calc(18px + 2vw), 48px);
	font-weight: 900;
	color: #b8922e;
}
.sc-badge-sep {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(237, 232, 222, 0.3);
}
.sc-badge-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(237, 232, 222, 0.45);
	font-weight: 500;
}

/* ============================================================
   씬 제목 (이미지 위)
   ============================================================ */
.sc-scene-tit {
	font-size: clamp(28px, calc(18px + 2vw), 52px);
	font-weight: 800;
	color: #ede8de;
}

/* ============================================================
   인용 (씬 03)
   ============================================================ */
.sc-quote {
	max-width: 640px;
}
.sc-quote p {
	font-size: clamp(20px, calc(14px + 1.2vw), 34px);
	font-weight: 700;
	color: #ede8de;
}
.sc-quote p + p {
	margin-top: 14px;
	color: rgba(237, 232, 222, 0.68);
}

/* ============================================================
   씬 본문 텍스트
   ============================================================ */
.sc-scene-body {
	max-width: 720px;
	padding: clamp(32px, 5vh, 60px) clamp(24px, 6vw, 100px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* 우측 정렬 변형 */
.sc-scene--alt .sc-scene-body {
	margin-left: auto;
}

/* 인용 씬 — 본문 텍스트 없으므로 상하 여백으로 호흡 확보 */
.sc-scene--quote {
	padding: clamp(40px, 6vh, 72px) 0;
}

.sc-scene-body p {
	font-size: clamp(16px, calc(12px + 0.7vw), 20px);
	color: rgba(42, 37, 32, 0.78);
}

/* ============================================================
   엔딩 크레딧
   ============================================================ */
.sc-credits {
	background: #1a1510;
	padding: clamp(60px, 10vh, 100px) clamp(24px, 6vw, 80px);
	display: flex;
	justify-content: center;
}

.sc-credits-inner {
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
	opacity: 0;
	transform: translateY(32px);
}

.sc-credits-fin {
	font-size: clamp(16px, calc(12px + 0.8vw), 22px);
	color: rgba(237, 232, 222, 0.4);
	margin-bottom: 28px;
}

.sc-credits-title {
	font-size: clamp(22px, calc(16px + 1.2vw), 36px);
	font-weight: 900;
	color: #ede8de;
	margin-bottom: 40px;
}

.sc-credits-list {
	width: 100%;
	border-top: 1px solid rgba(237, 232, 222, 0.1);
	border-bottom: 1px solid rgba(237, 232, 222, 0.1);
	padding: 24px 0;
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sc-credit-item {
	display: flex;
	justify-content: center;
	gap: 28px;
}
.sc-credit-role {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: #b8922e;
	width: 40px;
	text-align: right;
}
.sc-credit-name {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(237, 232, 222, 0.65);
	width: 110px;
	text-align: left;
}

.sc-credits-series {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.sc-credits-series-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(237, 232, 222, 0.3);
	font-weight: 500;
}
.sc-credits-series-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}
/* 부모 div에 색상 — a는 common.css에서 전역 inherit 처리됨 */
.sc-series-item { color: rgba(237, 232, 222, 0.48); }
.sc-credits-series-links a {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	transition: color 0.25s;
}
.sc-credits-series-links a:hover { color: #b8922e; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 999px) {
	.sc-counter { top: 80px; }
	.sc-hero { min-height: 440px; }
	.sc-scene-img-wrap { height: 50vh; }
	.sc-scene--alt .sc-scene-body { margin-left: 0; }
}

@media (max-width: 768px) {
	.sc-counter { top: 76px; right: 16px; }
	.sc-hero { height: 62vh; min-height: 380px; }
	.sc-scene-img-wrap { height: 44vh; min-height: 260px; }
	.sc-scene-img-overlay { padding: clamp(16px, 3vh, 24px) 20px; }
	.sc-scene-body { padding: 28px 20px; max-width: 100%; }
	.sc-credits { padding: 48px 20px; }
}

@media (max-width: 499px) {
	.sc-counter { top: 72px; right: 14px; }
	.sc-hero { height: 58vh; min-height: 320px; }
	.sc-scene { padding-top: clamp(28px, 4vh, 40px); }
	.sc-scene-img-overlay { padding: 14px 16px; }
	.sc-scene-body { padding: 24px 16px; gap: 14px; }
	.sc-credits-inner { max-width: 100%; }
}

/* ============================================================
   다크모드
   ============================================================ */
body.dark .sc-scene { background: #1e1a16; }
body.dark .sc-scene-body p { color: rgba(237, 232, 222, 0.72); }

/* 다크 플래시 — 크림 대신 어두운 색으로 */
body.dark .sc-flash { background: #2a2520; }

/* 크레딧 — 씬 배경과 구분 */
body.dark .sc-credits { border-top: 1px solid rgba(237, 232, 222, 0.08); }

/* 인용 씬 오버레이 — 다크모드에서 좀 더 어둡게 */
body.dark .sc-scene-img-overlay--quote { background: rgba(10, 8, 6, 0.78); }