@charset "utf-8";

/* ============================================================
   ① 카운트다운 오버레이
   ============================================================ */
.fm-countdown {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: #ede8de;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.fm-countdown-scratch {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: rgba(201, 168, 76, 0.2);
	pointer-events: none;
	animation: fm-scratch 0.09s steps(1) infinite;
}
@keyframes fm-scratch {
	0%   { left: 28%; opacity: 1; }
	33%  { left: 63%; opacity: 0.5; }
	66%  { left: 42%; opacity: 0.8; }
	100% { left: 28%; opacity: 1; }
}

.fm-leader {
	position: relative;
	width: min(55vw, 55vh);
	max-width: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
}

.fm-leader-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fm-l-cross {
	stroke: rgba(140, 110, 50, 0.4);
	stroke-width: 0.8;
}

.fm-l-ring {
	fill: none;
	stroke: rgba(140, 110, 50, 0.3);
	stroke-width: 0.8;
}

.fm-l-ticks line {
	stroke: rgba(140, 110, 50, 0.6);
	stroke-width: 2;
}

.fm-l-arc {
	fill: none;
	stroke: #b8922e;
	stroke-width: 3;
	stroke-dasharray: 753.98; /* 2π × 120 */
	stroke-dashoffset: 0;
}

.fm-l-inner {
	fill: #f5f0e8;
}

.fm-countdown-num {
	font-size: clamp(60px, calc(10px + 10vw), 130px);
	font-weight: 900;
	color: #b8922e;
	opacity: 0;
	will-change: transform, opacity;
	user-select: none;
	position: relative;
	z-index: 1;
}

.fm-flash {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: #fff;
	opacity: 0;
	pointer-events: none;
}

/* ============================================================
   커튼
   ============================================================ */
.fm-curtain {
	position: fixed;
	top: 0;
	height: 100%;
	width: 51%;
	z-index: 109;
	background: #e4dfd4;
	will-change: transform;
}
.fm-curtain--left { left: 0; }
.fm-curtain--right { right: 0; }

/* ============================================================
   ① 히어로
   ============================================================ */
.fm-hero {
	position: relative;
	height: 100dvh;
	min-height: 620px;
	overflow: hidden;
	background: #2a2520;
}

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

.fm-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.fm-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: brightness(0.7) saturate(0.65) sepia(0.08);
}

/* 하단 크림 그라데이션 — 텍스트 가독성 */
.fm-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to top,
		rgba(237, 232, 222, 0.97) 0%,
		rgba(237, 232, 222, 0.82) 28%,
		rgba(237, 232, 222, 0.3)  52%,
		transparent 72%
	);
	pointer-events: none;
}

.fm-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(60px, 8vh, 120px);
	max-width: 1000px;
}

.fm-hero-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;
}
.fm-meta-badge {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid #b8922e;
	color: #b8922e;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
}
.fm-meta-genre,
.fm-meta-vol {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(42, 37, 32, 0.65);
}
.fm-meta-sep {
	color: rgba(42, 37, 32, 0.3);
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
}

.fm-hero-tit {
	font-size: clamp(32px, calc(12px + 3vw), 60px);
	font-weight: 900;
	color: #1a1714;
	margin-bottom: 28px;
}

.fm-hero-sub {
	font-size: clamp(16px, calc(10px + 1.2vw), 24px);
	color: rgba(42, 37, 32, 0.72);
	margin-bottom: 44px;
}

.fm-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	background: #1a1714;
	color: #f5f0e8;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	align-self: flex-start;
	transition: background 0.3s;
}
.fm-hero-btn::after { content: '→'; }
.fm-hero-btn:hover { background: #2e2820; color: #f5f0e8; }

@media (max-width: 999px) {
	.fm-hero-inner { padding: 0 30px clamp(50px, 7vh, 80px); }
	.fm-hero-tit { margin-bottom: 20px; }
	.fm-hero-sub { margin-bottom: 32px; }
}
@media (max-width: 768px) {
	.fm-hero-inner { padding: 0 20px clamp(40px, 6vh, 60px); }
	.fm-hero-meta { gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
	.fm-meta-sep { display: none; }
}
@media (max-width: 499px) {
	.fm-hero-inner { padding: 0 16px 40px; }
	.fm-hero-tit { margin-bottom: 16px; }
	.fm-hero-sub { margin-bottom: 24px; }
}

/* ============================================================
   ② 기사 포스터 그리드
   ============================================================ */
.fm-articles {
	background: #ede8de;
	padding: clamp(60px, 8vw, 120px) 0;
}
.fm-articles-inner {
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 80px);
}
.fm-section-head {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 48px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(140, 110, 50, 0.3);
}
.fm-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: #b8922e;
	text-transform: uppercase;
}
.fm-section-tit {
	font-size: clamp(24px, calc(12px + 2.5vw), 40px);
	font-weight: 700;
	color: #1a1714;
}

.fm-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.fm-card {
	display: block;
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: #2a2520;
}

.fm-card-frame {
	position: absolute;
	inset: 10px;
	border: 1px solid #c9a84c;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}
.fm-card:hover .fm-card-frame { opacity: 1; }

.fm-card-img {
	position: absolute;
	inset: 0;
}
.fm-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease, filter 0.4s;
	filter: brightness(0.6) saturate(0.65) sepia(0.06);
}
.fm-card:hover .fm-card-img img {
	transform: scale(1.06);
	filter: brightness(0.45) saturate(0.5);
}

.fm-card-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 28px 20px 22px;
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
	transition: transform 0.4s;
}
.fm-card:hover .fm-card-overlay { transform: translateY(-8px); }

.fm-card-genre {
	display: block;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: #c9a84c;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.fm-card-tit {
	font-size: clamp(18px, calc(10px + 1.5vw), 26px);
	font-weight: 700;
	color: #f5f0e8;
	margin-bottom: 8px;
}
.fm-card-desc {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(237, 232, 222, 0.65);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;
}
.fm-card:hover .fm-card-desc {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 999px) {
	.fm-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.fm-section-head { margin-bottom: 32px; }
	.fm-articles { padding: 50px 0; }
}
@media (max-width: 499px) {
	.fm-grid { gap: 12px; }
	.fm-articles { padding: 40px 0; }
	.fm-card-overlay { padding: 20px 14px 16px; }
}

/* ============================================================
   ③ 필름스트립 (어두운 띠 — 크림 배경과 대비)
   ============================================================ */
.fm-strip {
	background: #1e1a16;
	overflow: hidden;
}
.fm-strip-holes {
	height: 24px;
	background-color: #1e1a16;
	background-image: repeating-linear-gradient(
		90deg,
		#1e1a16 0px 8px,
		#3a3020 8px 22px,
		#1e1a16 22px 30px
	);
}
.fm-strip-track-wrap { overflow: hidden; }
.fm-strip-track {
	display: flex;
	gap: 6px;
	width: max-content;
	will-change: transform;
}
.fm-strip-item {
	flex: 0 0 240px;
	height: 160px;
	overflow: hidden;
}
.fm-strip-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.4) brightness(0.65) sepia(0.1);
}

/* ============================================================
   ④ 아웃트로
   ============================================================ */
.fm-outro {
	background: #ede8de;
	padding: clamp(60px, 8vw, 120px) 0;
	border-top: 1px solid rgba(140, 110, 50, 0.2);
}
.fm-outro-inner {
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 80px);
	text-align: center;
}
.fm-outro-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: #b8922e;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.fm-outro-tit {
	font-size: clamp(28px, calc(14px + 3vw), 52px);
	font-weight: 700;
	color: #1a1714;
	margin-bottom: 60px;
}
.fm-outro-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	text-align: left;
}
.fm-outro-link { display: block; }
.fm-outro-img {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: 16px;
}
.fm-outro-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.6) brightness(0.85) sepia(0.06);
	transition: transform 0.5s, filter 0.4s;
}
.fm-outro-link:hover .fm-outro-img img {
	transform: scale(1.05);
	filter: saturate(0.85) brightness(1);
}
.fm-outro-genre {
	display: block;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: #b8922e;
	font-weight: 700;
	margin-bottom: 8px;
}
.fm-outro-tit-sm {
	display: block;
	font-size: clamp(18px, calc(10px + 1.2vw), 24px);
	font-weight: 600;
	color: #1a1714;
	transition: color 0.3s;
}
.fm-outro-link:hover .fm-outro-tit-sm { color: #b8922e; }

@media (max-width: 768px) {
	.fm-articles-inner { padding: 0 20px; }
	.fm-outro-inner { padding: 0 20px; }
	.fm-outro-links { grid-template-columns: 1fr; gap: 32px; }
	.fm-outro { padding: 40px 0; }
	.fm-outro-tit { margin-bottom: 40px; }
}

/* ============================================================
   다크모드
   ============================================================ */
/* 카운트다운·커튼·플래시 */
body.dark .fm-countdown { background: #1e1a16; }
body.dark .fm-curtain { background: #2a2520; }
body.dark .fm-flash { background: #2a2520; }

/* 히어로 — 그라데이션 다크로, 텍스트 라이트 */
body.dark .fm-hero::after {
	background: linear-gradient(
		to top,
		rgba(26, 21, 16, 0.97) 0%,
		rgba(26, 21, 16, 0.75) 30%,
		rgba(26, 21, 16, 0.2)  55%,
		transparent 75%
	);
}
body.dark .fm-hero-tit { color: #ede8de; }
body.dark .fm-hero-sub { color: rgba(237, 232, 222, 0.65); }
body.dark .fm-hero-btn { background: #ede8de; color: #1a1510; }
body.dark .fm-hero-btn:hover { background: #d8d2c6; color: #1a1510; }

/* 기사 섹션 */
body.dark .fm-articles { background: #1e1a16; }
body.dark .fm-section-head { border-bottom-color: rgba(184, 146, 46, 0.18); }
body.dark .fm-section-tit { color: #ede8de; }

/* 아웃트로 */
body.dark .fm-outro { background: #1e1a16; border-top-color: rgba(184, 146, 46, 0.15); }
body.dark .fm-outro-tit { color: #ede8de; }
body.dark .fm-outro-tit-sm { color: rgba(237, 232, 222, 0.85); }
body.dark .fm-outro-link:hover .fm-outro-tit-sm { color: #b8922e; }

/* 부모 div에 색상 — a는 common.css에서 전역 inherit 처리됨 */
.fm-outro-item { color: #1a1714; }
body.dark .fm-outro-item { color: rgba(237, 232, 222, 0.85); }