@charset "utf-8";

/* ============================================================
   msub25 — 주파수 노이즈 스크롤형
   섹션 진입마다 지지직 노이즈 → 콘텐츠 페이드인
   ============================================================ */

:root {
	--rs-bg:    #ffffff;
	--rs-red:   #e8002d;
	--rs-ink:   #0a0a0a;
	--rs-muted: #888888;
	--rs-rule:  #e8e8e8;
}

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

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

/* ── 공용 래퍼 ── */
.rs-wrap { max-width: 760px; margin: 0 auto; padding: 0 40px; }

/* ── 노이즈 캔버스 (fixed) ── */
.rs-noise {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.05s;
}
.rs-noise.active { opacity: 1; pointer-events: auto; }

/* ── 채널 인디케이터 (fixed 우측) ── */
.rs-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;
}
.rs-indicator.visible { opacity: 1; }
.rs-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rs-red);
	animation: rs-blink 1.2s ease-in-out infinite;
}
@keyframes rs-blink {
	0%, 45% { opacity: 1; }
	55%, 100% { opacity: 0.2; }
}
.rs-ind-label {
	font-size: 11px;
	color: var(--rs-red);
	font-weight: 700;
	writing-mode: vertical-rl;
}
.rs-ind-ch {
	font-size: 11px;
	color: var(--rs-muted);
	writing-mode: vertical-rl;
	font-weight: 600;
}

/* ── 읽기 진행 바 ── */
.rs-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	background: var(--rs-red);
	width: 0%;
	z-index: 200;
	transition: width 0.1s linear;
}

/* ═══════════════════════════════════════════
   ① 히어로
   ═══════════════════════════════════════════ */
.rs-hero {
	padding: 140px 0 80px;
	border-bottom: 1px solid var(--rs-rule);
	position: relative;
	overflow: hidden;
}
.rs-hero-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.rs-hero-ch {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rs-red);
	font-weight: 700;
}
.rs-hero-cat {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rs-muted);
}
.rs-hero-tit {
	font-size: clamp(34px, calc(14px + 3vw), 56px);
	color: var(--rs-ink);
	font-weight: 700;
	margin-bottom: 16px;
}
.rs-hero-sub {
	font-size: clamp(18px, calc(10px + 1vw), 22px);
	color: var(--rs-muted);
	margin-bottom: 28px;
}
.rs-hero-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rs-muted);
}
.rs-meta-sep { color: var(--rs-rule); }

/* 스크롤 힌트 */
.rs-scroll-hint {
	display: flex;
	justify-content: center;
	margin-top: 28px;
	color: var(--rs-muted);
	opacity: 0.5;
	animation: rs-bounce 2s ease-in-out infinite;
}
@keyframes rs-bounce {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(5px); }
}

/* 이퀄라이저 데코 — 전체 너비 */
.rs-hero-deco {
	width: 100%;
	height: 28px;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	overflow: hidden;
	margin-top: 40px;
}
.rs-hero-deco span {
	display: block;
	width: 3px;
	flex-shrink: 0;
	background: var(--rs-red);
	opacity: 0.28;
	border-radius: 1px 1px 0 0;
	transform-origin: bottom;
	animation: rs-eq 1.4s ease-in-out infinite alternate;
}
@keyframes rs-eq {
	from { transform: scaleY(0.3); }
	to   { transform: scaleY(1); }
}

/* ═══════════════════════════════════════════
   ② 본문 섹션
   ═══════════════════════════════════════════ */
.rs-section {
	padding: 80px 0;
	border-bottom: 1px solid var(--rs-rule);
}

.rs-section-content {
	opacity: 0;
	transform: translateY(16px);
}
.rs-section-content.visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.rs-section-hd {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
}
.rs-ch-badge {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rs-red);
	font-weight: 700;
	border: 1px solid var(--rs-red);
	padding: 3px 10px;
	border-radius: 2px;
}
.rs-section-tit {
	font-size: clamp(20px, calc(12px + 1.6vw), 30px);
	color: var(--rs-ink);
	font-weight: 700;
}

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

/* 본문 이미지 */
.rs-fig { margin: 32px 0; }
.rs-fig img { width: 100%; display: block; border-radius: 2px; }

/* 인용구 */
.rs-quote {
	margin: 36px 0;
	padding: 24px 28px;
	border-left: 3px solid var(--rs-red);
	background: #fafafa;
}
.rs-quote p,
.rs-quote {
	font-size: clamp(18px, calc(10px + 1vw), 22px);
	color: var(--rs-ink);
	font-style: normal;
}
.rs-quote cite {
	display: block;
	margin-top: 12px;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rs-muted);
	font-style: normal;
}

/* ═══════════════════════════════════════════
   ③ 다음 기사
   ═══════════════════════════════════════════ */
.rs-next {
	padding: 60px 0 80px;
}
.rs-next-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rs-muted);
	margin-bottom: 16px;
}
.rs-next-link {
	display: flex;
	align-items: center;
	gap: 20px;
	text-decoration: none;
	color: inherit;
	padding: 24px 0;
	border-top: 2px solid var(--rs-ink);
	border-bottom: 1px solid var(--rs-rule);
	transition: background 0.2s;
}
.rs-next-link:hover { background: #f8f8f8; }
.rs-next-cat {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--rs-red);
	font-weight: 700;
	flex-shrink: 0;
}
.rs-next-tit {
	flex: 1;
	font-size: clamp(18px, calc(10px + 1vw), 22px);
	color: var(--rs-ink);
	font-weight: 700;
}
.rs-next-arr {
	font-size: 22px;
	color: var(--rs-muted);
	transition: transform 0.2s, color 0.2s;
}
.rs-next-link:hover .rs-next-arr {
	transform: translateX(6px);
	color: var(--rs-red);
}

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

@media (max-width: 768px) {
	.rs-wrap { padding: 0 24px; }
	.rs-hero { padding: 100px 0 48px; }
	.rs-section { padding: 48px 0; }
	.rs-next { padding: 40px 0 60px; }
	.rs-quote { padding: 20px 20px; margin: 28px 0; }
}

@media (max-width: 499px) {
	.rs-wrap { padding: 0 16px; }
	.rs-hero { padding: 90px 0 40px; }
	.rs-section { padding: 32px 0; }
	.rs-section-hd { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── 다크모드 ── */
body.dark { background: #0a0a0a; }
body.dark .rs-hero,
body.dark .rs-section { border-color: #222; }
body.dark .rs-hero-tit,
body.dark .rs-section-tit,
body.dark .rs-body p,
body.dark .rs-quote,
body.dark .rs-next-tit { color: rgba(255, 255, 255, 0.9); }
body.dark .rs-hero-sub,
body.dark .rs-hero-cat,
body.dark .rs-hero-meta,
body.dark .rs-muted,
body.dark .rs-next-label,
body.dark .rs-next-arr,
body.dark .rs-ind-ch { color: rgba(255, 255, 255, 0.4); }
body.dark .rs-quote { background: #111; border-left-color: var(--rs-red); }
body.dark .rs-quote cite { color: rgba(255, 255, 255, 0.4); }
body.dark .rs-next-link { border-top-color: rgba(255, 255, 255, 0.2); border-bottom-color: #222; }
body.dark .rs-next-link:hover { background: #111; }
body.dark .rs-rule { background: #222; }