/* ── 타자 기초 (x-widget.typing.basics) — 키보드 연습 첫 화면의 단계 목록 아래 ─── */
.typing-basics {
	display: grid;
	gap: var(--sonub-space-4);
	max-inline-size: var(--sonub-reading-width);
	margin-block-start: var(--sonub-space-12);
}
.typing-basics .tb-intro {
	margin: 0;
	color: var(--sonub-muted);
	line-height: 1.8;
}
.typing-basics .tb-points {
	display: grid;
	gap: var(--sonub-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tb;
}
.typing-basics .tb-point {
	margin: 0;
	padding: var(--sonub-space-6);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	box-shadow: var(--sonub-shadow-card);
	counter-increment: tb;
}
.typing-basics .tb-point h3 {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-3);
	margin: 0 0 var(--sonub-space-3);
	font-size: calc(1.12rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
	line-height: 1.45;
}
.typing-basics .tb-point .tb-title::before {
	content: counter(tb) '. ';
	color: var(--sonub-accent-ink);
}
.typing-basics .tb-point p {
	margin: 0;
	line-height: 1.85;
}
.typing-basics .tb-point .sonub-figure { margin-block-end: 0; }
.typing-basics .tb-path {
	padding: var(--sonub-space-6);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-accent-soft);
}
.typing-basics .tb-path h3 {
	margin: 0 0 var(--sonub-space-3);
	font-size: calc(1.08rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
}
.typing-basics .tb-path ol {
	display: grid;
	gap: var(--sonub-space-3);
	margin: 0;
	padding-inline-start: 1.4rem;
}
.typing-basics .tb-path li {
	margin: 0;
	line-height: 1.75;
}
.typing-basics .tb-path li::marker {
	color: var(--sonub-accent-ink);
	font-weight: 700;
}
.typing-basics .tb-path a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-inline-end: 0.4rem;
	color: var(--sonub-accent-ink);
	font-weight: 700;
	text-decoration: none;
}
.typing-basics .tb-path a:hover { text-decoration: underline; }
.typing-basics .tb-path li > span { color: var(--sonub-ink); }
@media (max-width: 600px) {
	.typing-basics .tb-point,
	.typing-basics .tb-path { padding: var(--sonub-space-4); }
}