@charset "UTF-8";

:root {
	--rl-dark:  #1a2236;
	--rl-steel: #3a4f65;
	--rl-cream: #f5f1ea;
	--rl-text:  #1a1a1a;
	--rl-muted: #6b7280;
	--rl-amber: #c8a84b;
	--rl-bd:    rgba(26, 26, 26, 0.08);
}

/* ─── 히어로 ─── */
.rl-hero {
	background: var(--rl-dark);
	height: 100vh;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rl-hero-inner {
	width: 100%;
	height: 100%;
	padding: 80px 80px 60px;
	box-sizing: border-box;
	display: flex;
}

.rl-window-frame {
	flex: 1;
	border: 8px solid var(--rl-steel);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 60px rgba(0, 0, 0, 0.3);
}

.rl-win-rail {
	background: var(--rl-steel);
	padding: 8px 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.rl-win-rail span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4a6274;
}

.rl-win-rail span:nth-child(1) { background: #c0392b; }
.rl-win-rail span:nth-child(2) { background: #f39c12; }
.rl-win-rail span:nth-child(3) { background: #27ae60; }

.rl-win-rail--bot { justify-content: flex-end; }

.rl-hero-viewport {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.rl-hero-bg {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.rl-hero-bg img {
	width: 100%;
	height: 110%;
	object-fit: cover;
}

.rl-hero-caption {
	position: absolute;
	inset: 0;
	background: rgba(12, 18, 25, 0.52);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 48px;
}

.rl-hero-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.rl-hero-series,
.rl-hero-cat,
.rl-hero-time {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: rgba(255, 255, 255, 0.65);
	font-family: "Paperlogy", sans-serif;
}

.rl-hero-sep { color: rgba(255, 255, 255, 0.3); }

.rl-hero-tit {
	font-size: clamp(28px, calc(16px + 2.2vw), 52px);
	font-weight: 700;
	color: #fff;
	font-family: "Paperlogy", sans-serif;
	margin-bottom: 14px;
}

.rl-hero-sub {
	font-size: clamp(16px, calc(10px + 0.8vw), 22px);
	color: rgba(255, 255, 255, 0.6);
}

/* ─── 본문 ─── */
.rl-content {
	background: #fff;
	padding: 80px 0 0;
}

.rl-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 48px;
}

.rl-lead {
	font-size: clamp(18px, calc(12px + 1vw), 26px);
	color: var(--rl-text);
	font-family: "Paperlogy", sans-serif;
	font-weight: 500;
	max-width: 780px;
	margin-bottom: 80px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--rl-bd);
}

/* ─── 섹션 ─── */
.rl-sec {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	margin-bottom: 80px;
}

.rl-sec--rev {
	direction: rtl;
}

.rl-sec--rev > * { direction: ltr; }

.rl-sec-img {
	overflow: hidden;
	border-radius: 8px;
}

.rl-sec-img img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.rl-sec:hover .rl-sec-img img { transform: scale(1.03); }

.rl-sec-body { padding: 8px 0; }

.rl-sec-tit {
	font-size: clamp(20px, calc(12px + 1.3vw), 30px);
	font-weight: 700;
	color: var(--rl-text);
	font-family: "Paperlogy", sans-serif;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rl-bd);
}

.rl-sec-txt {
	font-size: clamp(16px, calc(10px + 0.8vw), 20px);
	color: #3a3a3a;
	margin-bottom: 16px;
}

.rl-sec-txt:last-child { margin-bottom: 0; }

/* ─── 풀블리드 ─── */
.rl-full-img {
	margin: 60px 0;
}

.rl-full-img img {
	width: 100%;
	height: clamp(300px, 45vw, 600px);
	object-fit: cover;
	display: block;
}

.rl-full-img figcaption {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: var(--rl-muted);
	text-align: center;
	padding: 14px 48px 0;
}

/* ─── 인용구 ─── */
.rl-quote {
	margin: 16px 0 64px;
	padding: 40px 48px;
	border-left: 3px solid var(--rl-amber);
	background: var(--rl-cream);
	border-radius: 0 8px 8px 0;
}

.rl-quote p {
	font-size: clamp(20px, calc(12px + 1.2vw), 28px);
	font-weight: 600;
	color: var(--rl-text);
	font-family: "Paperlogy", sans-serif;
}

/* ─── 아웃트로 ─── */
.rl-outro {
	background: var(--rl-cream);
	padding: 80px 0;
	margin-top: 80px;
}

.rl-outro-label {
	text-align: center;
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: var(--rl-muted);
	margin-bottom: 8px;
	font-family: "Paperlogy", sans-serif;
}

.rl-outro-tit {
	text-align: center;
	font-size: clamp(22px, calc(14px + 1.2vw), 32px);
	font-weight: 700;
	color: var(--rl-text);
	font-family: "Paperlogy", sans-serif;
	margin-bottom: 48px;
}

.rl-outro-links {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 48px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.rl-outro-link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s;
}

.rl-outro-link:hover { opacity: 0.7; }

.rl-outro-img {
	overflow: hidden;
	border-radius: 6px;
	margin-bottom: 14px;
}

.rl-outro-img img {
	width: 100%;
	aspect-ratio: 3/2;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.rl-outro-link:hover .rl-outro-img img { transform: scale(1.04); }

.rl-outro-cat {
	display: block;
	font-size: clamp(14px, calc(10px + 0.3vw), 18px);
	color: var(--rl-muted);
	margin-bottom: 6px;
}

.rl-outro-name {
	display: block;
	font-size: clamp(16px, calc(10px + 0.7vw), 20px);
	font-weight: 600;
	color: var(--rl-text);
	font-family: "Paperlogy", sans-serif;
}

/* ─── 반응형 ─── */
@media (max-width: 999px) {
	.rl-hero-inner { padding: 60px 40px 44px; }
	.rl-inner { padding: 0 32px; }
	.rl-sec { gap: 40px; }
	.rl-outro-links { padding: 0 32px; gap: 24px; }
	.rl-quote { padding: 28px 32px; }
}

@media (max-width: 768px) {
	.rl-hero-inner { padding: 24px 20px 28px; }
	.rl-hero-caption { padding: 28px; }
	.rl-inner { padding: 0 20px; }

	.rl-sec {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-bottom: 56px;
	}

	.rl-sec--rev { direction: ltr; }

	.rl-lead { margin-bottom: 56px; padding-bottom: 36px; }

	.rl-full-img { margin: 40px 0; }
	.rl-full-img figcaption { padding: 12px 20px 0; }

	.rl-quote { margin: 8px 0 48px; padding: 24px 20px; }

	.rl-outro-links {
		grid-template-columns: 1fr;
		padding: 0 20px;
		gap: 32px;
	}

	.rl-outro { padding: 60px 0; margin-top: 60px; }
}

@media (max-width: 499px) {
	.rl-hero-inner { padding: 16px 14px 20px; }
	.rl-hero-caption { padding: 20px; }
}

/* ─── 다크모드 ─── */
body.dark .rl-content,
body.dark .rl-quote { background: #111827; }

body.dark .rl-outro { background: #1a2236; }

body.dark .rl-sec-tit,
body.dark .rl-outro-name,
body.dark .rl-outro-tit,
body.dark .rl-lead { color: #f5f1ea; }

body.dark .rl-sec-txt { color: rgba(245, 241, 234, 0.75); }
body.dark .rl-sec-tit { border-color: rgba(255, 255, 255, 0.1); }
body.dark .rl-lead { border-color: rgba(255, 255, 255, 0.1); }
body.dark .rl-quote p { color: #f5f1ea; }
body.dark .rl-outro-cat { color: rgba(245, 241, 234, 0.45); }