/* ==========================================================================
   MODULE: components/list (.wzs-list)
   본문 내 체크형/순번 리스트. 기본 ul/ol 대신 사용.
   ========================================================================== */

.wzs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wzs-space-2);
}

.wzs-list > li {
	position: relative;
	padding-left: var(--wzs-space-5);
	line-height: var(--wzs-lh-article);
}

/* 불릿은 페이지 전체에서 가장 많이 반복되는 요소라 앰버를 쓰면 강조색이 소음이 된다.
   (variables.css 의 앰버 사용 규칙 참고) */
.wzs-list > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--wzs-ink-muted);
}

/* 번호 목록은 항목마다 2~3줄짜리 설명이 붙는 자리에 쓴다. 기본 간격(8px)은 문단 안
   줄간격(16px x 1.9 = 약 30px)보다 좁아서 항목끼리 통째로 붙어 보였다 — 항목 사이가
   줄 사이보다 넓어야 덩어리가 나뉘어 읽힌다. 짧은 한 줄짜리 목록(.wzs-list)은 8px 유지. */
.wzs-list--numbered {
	counter-reset: wzs-list-counter;
	gap: var(--wzs-space-4);
}

.wzs-list--numbered > li {
	counter-increment: wzs-list-counter;
}

.wzs-list--numbered > li::before {
	content: counter(wzs-list-counter);
	width: auto;
	height: auto;
	background: none;
	top: 0;
	font-weight: 700;
	font-size: var(--wzs-fs-sm);
	color: var(--wzs-ink-muted);
}