/*
 * 학습 기록 공용 부품 — "이해했어요" 칸 <x-study.step-check>(resources/views/components/study/step-check.blade.php).
 * 컴포넌트가 @once @push('head') 로 싣는다. 인공지능 커리큘럼·바이브 코딩 등 여러 섹션의 화면에 놓이므로
 * 선택자는 모두 .study-step-check 아래로 좁힌다. 방향이 있는 속성은 논리 속성만(ar·ur).
 */

/* ── 이해했어요 칸 ─────────────────────────────────── */
.study-step-check {
	margin-block-start: var(--pes-space-6);
	padding: var(--pes-space-4) var(--pes-space-4);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
}
.study-step-check.done {
	border-color: var(--wa-color-success-border-quiet, var(--pes-border));
	background: var(--pes-success-soft);
}
.study-step-check > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pes-space-2);
}
.study-step-check p {
	margin: 0;
}
.study-step-check-question,
.study-step-check-line {
	font-weight: 600;
	line-height: 1.6;
}
.study-step-check-line {
	display: inline-flex;
	align-items: center;
	gap: var(--pes-space-2);
	color: var(--pes-success);
}
.study-step-check-note {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--pes-muted);
}