/* 프롬프트 하나가 지나가는 길(x-widget.learn.prompt-trace) — 흐름 그림·단계 설명·맺는 말. 세 테마·RTL 공통. */
.prompt-trace {
	display: grid;
	gap: var(--wa-space-l);
	min-inline-size: 0;
	padding: clamp(var(--wa-space-m), 2vw, var(--wa-space-l));
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--wa-color-surface-raised);
}
.prompt-trace > *,
.prompt-trace p { margin-block: 0; }
.prompt-trace h4,
.prompt-trace h5 {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-2xs);
	margin: 0;
}
.prompt-trace h4 { font-size: var(--wa-font-size-l); }
.prompt-trace h4 i { flex: none; color: var(--wa-color-brand-fill-loud); }

/* 단계 설명 — 번호 원은 하는 쪽(나·하네스·모델)의 색 */
.prompt-trace-steps {
	display: grid;
	gap: var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}
.prompt-trace-steps li {
	margin: 0;
	padding: var(--wa-space-m);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-control);
	background: var(--wa-color-surface-lowered);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wa-space-s);
	align-items: start;
	min-inline-size: 0;
	line-height: 1.75;
}
.prompt-trace-steps li > div {
	display: grid;
	gap: var(--wa-space-3xs);
	min-inline-size: 0;
	overflow-wrap: anywhere;
}
.prompt-trace-n {
	display: grid;
	place-items: center;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 50%;
	background: var(--dg-fill);
	color: var(--wa-color-neutral-on-loud, #fff);
	font-weight: var(--wa-font-weight-bold);
}
.prompt-trace-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wa-space-xs);
}
.prompt-trace-who {
	padding-inline: var(--wa-space-xs);
	border-radius: var(--wa-border-radius-pill);
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-size: var(--wa-font-size-s);
}

/* 맺는 말 — 이 단락이 챕터의 요점이라 브랜드색 테두리 상자 */
.prompt-trace-end {
	display: grid;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-m);
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--sonub-radius-card);
	background: var(--dg-soft);
	line-height: 1.8;
}
.prompt-trace-end h5 { font-size: var(--wa-font-size-m); }
.prompt-trace-end h5 i { color: var(--dg-fill); }