/* ── 함께 보면 좋은 페이지 (x-widget.learn.related) ─────────────────── */
.sonub-related {
	display: grid;
	gap: var(--sonub-space-4);
	margin-block-start: var(--sonub-space-12);
	padding-block-start: var(--sonub-space-8);
	border-block-start: 1px dashed var(--sonub-border);
}
.sonub-related .related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--sonub-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sonub-related .related-grid > li { margin: 0; min-inline-size: 0; }
.sonub-related .related-card {
	display: flex;
	align-items: flex-start;
	gap: var(--sonub-space-3);
	block-size: 100%;
	padding: var(--sonub-space-4);
	box-sizing: border-box;
}
.sonub-related .related-text {
	display: grid;
	flex: 1 1 auto;
	gap: 0.3rem;
	min-inline-size: 0;
}
.sonub-related .related-text strong {
	font-size: calc(1rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.sonub-related .related-text span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: var(--sonub-muted);
	font-size: calc(0.84rem * var(--wa-font-size-scale, 1));
	line-height: 1.65;
	overflow-wrap: anywhere;
}
.sonub-related .related-go {
	flex: 0 0 auto;
	margin-block-start: 0.2rem;
	color: var(--sonub-accent-ink);
	transition: transform var(--sonub-motion-fast);
}
.sonub-related .related-card:hover .related-go { transform: translateX(0.2rem); }
[dir='rtl'] .sonub-related .related-card:hover .related-go { transform: scaleX(-1) translateX(0.2rem); }
.sonub-related .related-card:focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.sonub-related .related-go { transition: none; }
}