/* ============================================================
   ZUM GEO Modules — v1.0.0
   색은 currentColor에서 파생시켜 라이트/다크 영역 모두에 적응합니다.
   테마 고유 색을 쓰려면 --zum-rule / --zum-mute 두 줄만 덮어쓰세요.
   ============================================================ */

.zum-chapters,
.zum-related {
	--zum-rule: rgba(128, 128, 128, 0.28);
	--zum-mute: rgba(128, 128, 128, 1);
}

@supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
	.zum-chapters,
	.zum-related {
		--zum-rule: color-mix(in srgb, currentColor 18%, transparent);
		--zum-mute: color-mix(in srgb, currentColor 62%, transparent);
	}
}

/* ---------- 챕터 ---------- */

.zum-chapters {
	margin: 2rem 0;
	padding: 1.25rem 1.25rem 0.75rem;
	border: 1px solid var(--zum-rule);
}

.zum-chapters__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.72rem;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zum-mute);
}

.zum-chapters__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zum-chapters__item + .zum-chapters__item {
	border-top: 1px solid var(--zum-rule);
}

.zum-chapters__link {
	display: grid;
	grid-template-columns: 2.25rem 1fr auto;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.7rem 0;
	color: inherit;
	text-decoration: none;
}

.zum-chapters__num {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var(--zum-mute);
}

.zum-chapters__name {
	font-size: 0.95rem;
	line-height: 1.45;
}

.zum-chapters__time {
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--zum-mute);
}

.zum-chapters__link:hover .zum-chapters__name,
.zum-chapters__link:focus-visible .zum-chapters__name {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.zum-chapters__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- 관련글 ---------- */

.zum-related {
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 2px solid var(--zum-rule);
}

.zum-related__title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.zum-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zum-related__item + .zum-related__item {
	border-top: 1px solid var(--zum-rule);
}

.zum-related__link {
	display: block;
	padding: 0.85rem 0;
	color: inherit;
	text-decoration: none;
}

.zum-related__cat {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zum-mute);
}

.zum-related__headline {
	display: block;
	font-size: 0.98rem;
	line-height: 1.5;
}

.zum-related__link:hover .zum-related__headline,
.zum-related__link:focus-visible .zum-related__headline {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.zum-related__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.zum-related__hub {
	display: inline-block;
	margin-top: 1rem;
	padding-bottom: 0.15rem;
	font-size: 0.82rem;
	color: var(--zum-mute);
	text-decoration: none;
	border-bottom: 1px solid var(--zum-rule);
}

.zum-related__hub:hover,
.zum-related__hub:focus-visible {
	color: inherit;
}

@media (max-width: 640px) {
	.zum-chapters {
		padding: 1rem 1rem 0.5rem;
	}

	.zum-chapters__link {
		grid-template-columns: 1.9rem 1fr auto;
		gap: 0.6rem;
	}
}