/* ==========================================================================
   MODULE: components/callout (.wzs-callout + .wzs-callout-t--*)
   유형별 콜아웃. 타입 모디파이어: --info(기본) / --tip / --warning
   ========================================================================== */

/* 원래 아이콘+본문을 나란히 두는 flex 레이아웃이었는데, 실제로 .wzs-callout-icon은
   어디서도 안 쓰이고(전부 .wzs-callout-body만 사용) 블로그 글에서는 아이콘 없이
   라벨(.wzs-callout-t)+줄바꿈+본문만 넣는 패턴이 반복돼 flex가 그 구조를 깨뜨렸다
   (텍스트 노드/br이 flex 아이템으로 취급됨). block으로 바꿔 두 패턴 다 정상 표시되게 한다. */
.wzs-callout {
	margin: 28px 0;
	padding: var(--wzs-space-4);
	border-radius: var(--wzs-radius-md);
	background: var(--wzs-bg-alt);
	border: 1px solid var(--wzs-border);
	line-height: var(--wzs-lh-article);
}

.wzs-callout-icon {
	display: block;
	width: 24px;
	height: 24px;
	margin-bottom: var(--wzs-space-2);
}

.wzs-callout-body p {
	line-height: var(--wzs-lh-article);
	margin: 0;
}

.wzs-callout-body p + p {
	margin-top: var(--wzs-space-2);
}

/* 블로그 글에서 아이콘+본문 구조 대신 쓰는 라벨(.wzs-callout-t) — 굵은 소제목처럼 */
.wzs-callout-t {
	display: block;
	margin-bottom: var(--wzs-space-2);
	font-weight: 700;
	color: var(--wzs-ink);
}

.wzs-callout-t--info {
	background: var(--wzs-blue-soft);
	border-color: transparent;
}
.wzs-callout-t--info .wzs-callout-icon {
	color: var(--wzs-blue);
}

.wzs-callout-t--tip {
	background: var(--wzs-amber-soft);
	border-color: transparent;
}
.wzs-callout-t--tip .wzs-callout-icon {
	color: var(--wzs-amber-ink);
}

.wzs-callout-t--warning {
	background: #fbe9e9;
	border-color: transparent;
}
.wzs-callout-t--warning .wzs-callout-icon {
	color: var(--wzs-danger);
}