@charset "utf-8";

/* ============================================================
   msub26 — 빈티지 라디오 기사형 (mmain17 서브)
   크림 배경 + 앰버 스윕 라인 섹션 전환
   ============================================================ */

:root {
	--rv-bg:    #f5f0e8;
	--rv-amber: #c8840a;
	--rv-ink:   #1a1209;
	--rv-muted: #7a6040;
	--rv-rule:  #c4b090;
}

body { background: var(--rv-bg); }

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0.15;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px;
}

body.page-light-header #header,
body.page-light-header #header.on,
body.page-light-header #header.act { background-color: var(--rv-bg) !important; }

.rv-wrap { max-width: 720px; margin: 0 auto; padding: 0 40px; }

/* ── 읽기 진행 바 ── */
.rv-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	background: var(--rv-amber);
	width: 0%;
	z-index: 200;
	transition: width 0.1s linear;
	box-shadow: 0 0 6px rgba(200, 132, 10, 0.5);
}

/* ── 채널 인디케이터 ── */
.rv-indicator {
	position: fixed;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	z-index: 100;
	opacity: 0;
	transition: opacity 0.4s;
}
.rv-indicator.visible { opacity: 1; }
.rv-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rv-amber);
	animation: rv-blink 1.4s ease-in-out infinite;
}
@keyframes rv-blink {
	0%, 45% { opacity: 1; }
	55%, 100% { opacity: 0.2; }
}
.rv-ind-ch {
	font-size: 11px;
	color: var(--rv-amber);
	font-weight: 700;
	writing-mode: vertical-rl;
}
.rv-ind-label {
	font-size: 11px;
	color: var(--rv-muted);
	writing-mode: vertical-rl;
}

/* ═══════════════════════════════════════════
   ① 히어로
   ═══════════════════════════════════════════ */
.rv-hero {
	padding: 140px 0 72px;
	border-bottom: 1px solid var(--rv-rule);
}
.rv-hero-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.rv-hero-ch {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rv-amber);
	font-weight: 600;
}
.rv-hero-cat {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rv-muted);
}
.rv-hero-tit {
	font-size: clamp(32px, calc(12px + 3vw), 54px);
	color: var(--rv-ink);
	font-weight: 700;
	margin-bottom: 16px;
}
.rv-hero-sub {
	font-size: clamp(18px, calc(10px + 0.9vw), 20px);
	color: var(--rv-muted);
	margin-bottom: 24px;
}
.rv-hero-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rv-muted);
}
.rv-meta-sep { color: var(--rv-rule); }

/* ── 오디오 플레이어 ── */
.rv-player {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	background: var(--rv-panel);
	border-radius: 6px;
	margin-top: 24px;
}
.rv-player-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--rv-amber);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	transition: opacity 0.2s;
}
.rv-player-btn:hover { opacity: 0.85; }
.rv-player-track { flex: 1; min-width: 0; }
.rv-player-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.rv-player-title {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rv-amber);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}
.rv-player-bar {
	height: 3px;
	background: rgba(200, 132, 10, 0.25);
	border-radius: 2px;
	cursor: pointer;
	position: relative;
}
.rv-player-prog {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--rv-amber);
	border-radius: 2px;
	width: 0%;
	transition: width 0.1s linear;
}
.rv-player-time {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(200, 132, 10, 0.65);
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

/* 다이얼 데코 */
.rv-hero-dial {
	display: flex;
	align-items: center;
	gap: 0;
	margin-top: 40px;
}
.rv-dial-line {
	display: block;
	flex: 1;
	height: 1px;
	background: var(--rv-rule);
}
.rv-dial-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rv-amber);
	box-shadow: 0 0 10px rgba(200, 132, 10, 0.5);
	flex-shrink: 0;
	margin-left: 12px;
	animation: rv-blink 1.4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
   ② 본문 섹션
   ═══════════════════════════════════════════ */
.rv-section {
	padding: 72px 0;
	border-bottom: 1px solid var(--rv-rule);
	position: relative;
	overflow: hidden;
}

/* 앰버 스윕 라인 */
.rv-sweep {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--rv-amber);
	box-shadow: 0 0 12px rgba(200, 132, 10, 0.6);
	transform: scaleX(0);
	transform-origin: left center;
}

/* 섹션 콘텐츠 초기 상태 */
.rv-section-content {
	opacity: 0;
	transform: translateY(14px);
}
.rv-section-content.visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.rv-section-hd {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 28px;
}
.rv-time {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rv-amber);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.rv-section-tit {
	font-size: clamp(20px, calc(12px + 1.4vw), 28px);
	color: var(--rv-ink);
	font-weight: 700;
}

/* 본문 */
.rv-body p {
	font-size: clamp(16px, calc(10px + 0.9vw), 19px);
	color: var(--rv-ink);
	margin-bottom: 20px;
}
.rv-body p:last-child { margin-bottom: 0; }

/* 인용구 */
.rv-quote {
	margin: 36px 0;
	padding: 20px 24px;
	border-left: 2px solid var(--rv-amber);
	background: rgba(200, 132, 10, 0.06);
	font-size: clamp(18px, calc(10px + 1vw), 21px);
	color: var(--rv-ink);
	font-style: normal;
}
.rv-quote cite {
	display: block;
	margin-top: 10px;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rv-muted);
	font-style: normal;
}

/* ═══════════════════════════════════════════
   ③ 다음 (편성표 복귀)
   ═══════════════════════════════════════════ */
.rv-next { padding: 56px 0 80px; }
.rv-next-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rv-muted);
	margin-bottom: 14px;
}
.rv-next-link {
	display: flex;
	align-items: center;
	gap: 20px;
	text-decoration: none;
	color: inherit;
	padding: 22px 0;
	border-top: 2px solid var(--rv-ink);
	border-bottom: 1px solid var(--rv-rule);
	transition: background 0.2s;
}
.rv-next-link:hover { background: rgba(200, 132, 10, 0.06); }
.rv-next-cat {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rv-amber);
	font-weight: 700;
	flex-shrink: 0;
}
.rv-next-tit {
	flex: 1;
	font-size: clamp(18px, calc(12px + 1.2vw), 26px);
	color: var(--rv-ink);
	font-weight: 700;
}
.rv-next-arr {
	font-size: 22px;
	color: var(--rv-muted);
	transition: transform 0.2s, color 0.2s;
}
.rv-next-link:hover .rv-next-arr {
	transform: translateX(6px);
	color: var(--rv-amber);
}

/* ═══════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════ */
@media (max-width: 999px) {
	.rv-indicator { display: none; }
	.rv-hero { padding: 120px 0 56px; }
	.rv-section { padding: 56px 0; }
}

@media (max-width: 768px) {
	.rv-wrap { padding: 0 24px; }
	.rv-hero { padding: 100px 0 44px; }
	.rv-section { padding: 44px 0; }
	.rv-next { padding: 40px 0 60px; }
	.rv-quote { padding: 16px 18px; margin: 24px 0; }
}

@media (max-width: 499px) {
	.rv-wrap { padding: 0 16px; }
	.rv-hero { padding: 90px 0 36px; }
	.rv-section { padding: 32px 0; }
	.rv-section-hd { flex-direction: column; gap: 6px; }
}

/* ── 다크모드 ── */
body.dark { background: #120e08; }
body.dark .rv-hero,
body.dark .rv-section,
body.dark .rv-next-link { border-color: rgba(255, 255, 255, 0.1); }
body.dark .rv-hero-tit,
body.dark .rv-section-tit,
body.dark .rv-body p,
body.dark .rv-quote,
body.dark .rv-next-tit { color: rgba(255, 255, 255, 0.9); }
body.dark .rv-hero-sub,
body.dark .rv-hero-cat,
body.dark .rv-hero-meta,
body.dark .rv-next-label,
body.dark .rv-next-arr,
body.dark .rv-ind-label { color: rgba(255, 255, 255, 0.4); }
body.dark .rv-quote { background: rgba(200, 132, 10, 0.1); }
body.dark .rv-quote cite { color: rgba(255, 255, 255, 0.4); }
body.dark .rv-next-link { border-top-color: rgba(255, 255, 255, 0.2); }
body.dark .rv-next-link:hover { background: rgba(200, 132, 10, 0.08); }
body.dark .rv-dial-line { background: rgba(255, 255, 255, 0.15); }