/* ==========================================================================
   MODULE: components/toc (.wzs-toc)
   h2 3개 이상인 글에 자동 삽입되는 목차 (생성 로직: inc/toc.php)
   ========================================================================== */

/* .wzs-article 본문 요소는 각자 margin-bottom을 갖는 게 규칙인데(base/typography.css 주석 참고)
   TOC는 그 규칙에서 빠져 있어서 다음 문단과 거의 붙어 보였다 — quote/callout과 같은 28px로 맞춤 */
.wzs-toc {
	margin: 28px 0;
	padding: var(--wzs-space-4);
	background: var(--wzs-white);
	border: 1px solid var(--wzs-border);
	border-radius: var(--wzs-radius-md);
}

.wzs-toc-title {
	font-size: var(--wzs-fs-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wzs-ink-muted);
	margin-bottom: var(--wzs-space-2);
}

/* TOC는 항상 .wzs-article-content(=본문) 안, 즉 .wzs-article 조상 아래 삽입된다.
   base/typography.css의 .wzs-article ol/.wzs-article a 규칙이 명시도상 더 강해서
   (element+class 조합) list-style이 원상복구되고 밑줄이 새는 문제가 있었다 —
   여기 선택자를 .wzs-toc로 한 겹 더 감싸 명시도를 올려서 확실히 이기게 한다. */
.wzs-toc .wzs-toc-list {
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: wzs-toc-counter;
}

.wzs-toc .wzs-toc-list li {
	counter-increment: wzs-toc-counter;
}

.wzs-toc .wzs-toc-list a {
	display: flex;
	gap: var(--wzs-space-2);
	padding: 6px 0;
	color: var(--wzs-ink-soft);
	font-size: var(--wzs-fs-sm);
	text-decoration: none;
	transition: color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-toc .wzs-toc-list a::before {
	content: counter(wzs-toc-counter);
	flex: none;
	color: var(--wzs-amber-ink);
	font-weight: 700;
}

.wzs-toc .wzs-toc-list a:hover {
	color: var(--wzs-ink);
}