/* ==========================================================================
   base.css — 리셋 + 기본 타이포그래피
   ==========================================================================
   부모 테마가 없으므로 여기서 브라우저 기본값만 정리하면 된다.
   (부모 테마를 !important 로 덮는 코드가 이 프로젝트에 없는 이유)
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 고정 헤더에 가려지지 않게 앵커 이동 시 여백을 준다. */
	scroll-padding-top: calc(var(--rl-header-h) + var(--rl-space-4));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--rl-bg);
	color: var(--rl-text);
	font-family: var(--rl-font-sans);
	font-size: var(--rl-text-md);
	font-weight: var(--rl-weight-regular);
	line-height: var(--rl-lh-normal);
	letter-spacing: var(--rl-ls-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	word-break: keep-all;   /* 한글은 단어 중간에서 끊기지 않게 */
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--rl-text-strong);
	font-weight: var(--rl-weight-bold);
	line-height: var(--rl-lh-tight);
	letter-spacing: var(--rl-ls-tight);
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--rl-link);
	text-decoration: none;
	transition: color var(--rl-duration) var(--rl-ease);
}

a:hover {
	color: var(--rl-link-hover);
}

ul, ol {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

img, svg, video, canvas, picture {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input, select, textarea {
	font: inherit;
	color: inherit;
}

code, pre, kbd {
	font-family: var(--rl-font-mono);
	font-size: 0.9em;
}

hr {
	border: 0;
	border-top: 1px solid var(--rl-border);
	margin: var(--rl-space-8) 0;
}

/* ── 포커스 링 ──────────────────────────────────────
   키보드 사용자에게만 보이게 한다 (마우스 클릭 시엔 안 나옴). */
:focus-visible {
	outline: 2px solid var(--rl-focus-ring);
	outline-offset: 2px;
	border-radius: var(--rl-radius-sm);
}

::selection {
	background: var(--rl-accent-soft);
	color: var(--rl-accent-strong);
}

/* ── 접근성 유틸 ──────────────────────────────────── */

.rl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rl-skip-link {
	position: absolute;
	top: -100%;
	left: var(--rl-space-4);
	z-index: 999;
	padding: var(--rl-space-3) var(--rl-space-5);
	background: var(--rl-accent);
	color: var(--rl-gray-0);
	border-radius: var(--rl-radius);
	font-weight: var(--rl-weight-semibold);
}

.rl-skip-link:focus {
	top: var(--rl-space-4);
	color: var(--rl-gray-0);
}

/* ── 본문 서식 (.rl-prose) ─────────────────────────
   블록 에디터로 쓴 글이 여기 안에서 렌더링된다.
   가이드·뉴스·현장 상세 본문 전부 이 규칙을 따른다. */

.rl-prose {
	font-size: var(--rl-text-md);
	line-height: var(--rl-lh-relaxed);
	color: var(--rl-text);
}

.rl-prose > * + * {
	margin-top: var(--rl-space-5);
}

.rl-prose h2 {
	margin-top: var(--rl-space-12);
	margin-bottom: var(--rl-space-4);
	font-size: var(--rl-text-2xl);
	padding-bottom: var(--rl-space-3);
	border-bottom: 1px solid var(--rl-border);
}

.rl-prose h3 {
	margin-top: var(--rl-space-8);
	margin-bottom: var(--rl-space-3);
	font-size: var(--rl-text-xl);
}

.rl-prose h4 {
	margin-top: var(--rl-space-6);
	font-size: var(--rl-text-lg);
	font-weight: var(--rl-weight-semibold);
}

.rl-prose ul,
.rl-prose ol {
	padding-left: var(--rl-space-5);
}

.rl-prose ul li {
	list-style: disc;
	margin-bottom: var(--rl-space-2);
}

.rl-prose ol li {
	list-style: decimal;
	margin-bottom: var(--rl-space-2);
}

.rl-prose li::marker {
	color: var(--rl-text-subtle);
}

.rl-prose strong {
	font-weight: var(--rl-weight-semibold);
	color: var(--rl-text-strong);
}

.rl-prose blockquote {
	margin: var(--rl-space-8) 0;
	padding: var(--rl-space-4) var(--rl-space-6);
	border-left: 3px solid var(--rl-accent);
	background: var(--rl-surface);
	border-radius: 0 var(--rl-radius) var(--rl-radius) 0;
	color: var(--rl-text-muted);
}

.rl-prose blockquote p + p {
	margin-top: var(--rl-space-3);
}

.rl-prose img {
	border-radius: var(--rl-radius-lg);
	border: 1px solid var(--rl-border-subtle);
}

.rl-prose figcaption {
	margin-top: var(--rl-space-2);
	font-size: var(--rl-text-sm);
	color: var(--rl-text-muted);
	text-align: center;
}

.rl-prose table {
	margin: var(--rl-space-8) 0;
	font-size: var(--rl-text-base);
	border: 1px solid var(--rl-border);
	border-radius: var(--rl-radius);
	overflow: hidden;
}

.rl-prose th,
.rl-prose td {
	padding: var(--rl-space-3) var(--rl-space-4);
	border-bottom: 1px solid var(--rl-border-subtle);
	text-align: left;
}

.rl-prose th {
	background: var(--rl-surface);
	font-weight: var(--rl-weight-semibold);
	color: var(--rl-text-muted);
}

.rl-prose tr:last-child td {
	border-bottom: 0;
}

.rl-prose a {
	text-decoration: underline;
	text-decoration-color: var(--rl-accent-soft);
	text-underline-offset: 3px;
}

.rl-prose a:hover {
	text-decoration-color: var(--rl-accent);
}