/*
 * 인공지능 — 왕초보 허브(/ai)·심화 과정(/ai/advanced)·단계 상세(/ai/curriculum/{단계})·확률 실습(/ai/probability)과
 * 컴포넌트 <x-ai.curriculum-cards>(.ai-cards)·<x-ai.fill-in-blank>(.ai-fill). 이전 사이트 각 화면·컴포넌트의 스코프 CSS 를 옮겼다.
 * 컴포넌트 두 개는 다른 화면(홈)에서도 쓰므로 부모 화면 class 에 기대지 않고 자기 최상위 class 로만 범위를 좁힌다.
 * 모든 규칙은 .ai-* 아래에 둔다(app.css 의 .card·.chip·.notice 등과 겹치지 않게). 방향이 있는 속성은 논리 속성만 쓴다(ar·ur 오른쪽→왼쪽).
 */

/* ── 공용 — 구획 · 머리 · 링크 화살표 ───────────────── */
.ai-hub,
.ai-adv {
	display: grid;
	gap: clamp(2.5rem, 5vw, 3.5rem);
}
.ai-hub .ai-hero,
.ai-adv .ai-hero {
	gap: 1rem;
	margin: 0;
}
.ai-hub .ai-hero > p,
.ai-adv .ai-hero > p {
	margin: 0;
}
.ai-block {
	display: grid;
	gap: 1rem;
	min-inline-size: 0;
	scroll-margin-block-start: 6rem;
}
.ai-block > h2 {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.3;
}
.ai-go {
	color: var(--wa-color-text-quiet);
}
.ai-back {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: var(--wa-space-2xs);
	inline-size: fit-content;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.ai-back:hover {
	color: var(--wa-color-brand-on-quiet);
}

/* ── 허브 (/ai) — 심화 과정으로 가는 안내 ───────────── */
.ai-hub .ai-next-course {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--dg-border);
	border-radius: var(--pes-radius-panel);
	background: var(--dg-soft);
}
.ai-hub .ai-next-copy {
	display: grid;
	gap: 0.4rem;
}
.ai-hub .ai-next-copy .pes-eyebrow i {
	color: var(--dg-fill);
}
.ai-hub .ai-next-copy h2 {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.3;
}
.ai-hub .ai-next-cta {
	justify-self: start;
}

/* ── 심화 과정 (/ai/advanced) ─────────────────────── */
.ai-adv .ai-prereq {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 0.45rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--dg-border);
	border-radius: 999px;
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.ai-adv .ai-prereq > i:first-child {
	color: var(--dg-fill);
}
.ai-adv .ai-prereq:hover {
	border-color: var(--dg-fill);
}
/* 실습 표 — 표 안의 보조기기 글자(.pes-sr, position: absolute)가 가로 스크롤 틀 밖으로 나가 좁은 RTL 화면에서
   페이지 전체를 가로로 밀어내지 않도록 틀을 기준 상자로 삼는다 */
.ai-adv .dg-table-wrap {
	position: relative;
}
.ai-adv .ai-next-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 0.8rem;
}
.ai-adv .ai-next-card {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 1rem 1.1rem;
	color: inherit;
}
.ai-adv .ai-next-icon {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
	color: var(--dg-fill);
	font-size: 1.1rem;
}
.ai-adv .ai-next-text {
	display: grid;
	flex: 1;
	gap: 0.15rem;
	min-inline-size: 0;
}
.ai-adv .ai-next-text small {
	color: var(--wa-color-text-quiet);
	font-size: 0.82rem;
	line-height: 1.5;
}

/* ── 단계 카드 묶음 <x-ai.curriculum-cards> ───────────── */
.ai-cards {
	display: grid;
	gap: 1.1rem;
	min-inline-size: 0;
}
.ai-cards .ai-cards-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
}
.ai-cards .ai-cards-chip {
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	background: var(--dg-fill);
	color: var(--dg-on-fill);
	font-size: 0.78rem;
	font-weight: var(--wa-font-weight-bold);
}
.ai-cards .ai-cards-head h2 {
	margin: 0;
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	line-height: 1.3;
}
.ai-cards .ai-cards-grade {
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
}
.ai-cards .ai-cards-wrap {
	container-type: inline-size;
	min-inline-size: 0;
}
.ai-cards .ai-cards-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-cards .ai-cards-item {
	position: relative;
	display: flex;
	min-inline-size: 0;
	margin: 0; /* Web Awesome 기본 li 들여쓰기를 없앤다 */
}
/* 카드 사이 화살표 — 앞 카드와의 간격 한가운데에 둔다. 첫 카드에는 없다. */
.ai-cards .ai-cards-arrow {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: -1.35rem;
	inline-size: 1.1rem;
	block-size: 0.7rem;
	translate: 0 -50%;
	background: var(--dg-fill);
	opacity: 0.7;
	mask: var(--dg-arrow) center / contain no-repeat;
}
.ai-cards .ai-cards-item:first-child .ai-cards-arrow {
	display: none;
}
[dir='rtl'] .ai-cards .ai-cards-arrow {
	transform: scaleX(-1);
}
.ai-cards .ai-card {
	display: grid;
	align-content: start;
	gap: 0.7rem;
	inline-size: 100%;
	padding: 1.1rem 1.1rem 1rem;
	border-block-start: 4px solid var(--dg-fill);
}
.ai-cards .ai-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ai-cards .ai-card-n {
	display: grid;
	place-items: center;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 50%;
	background: var(--dg-fill);
	color: var(--dg-on-fill);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-bold);
}
.ai-cards .ai-card-icon {
	display: grid;
	place-items: center;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
	color: var(--dg-fill);
	font-size: 1.1rem;
}
.ai-cards .ai-card h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.35;
}
.ai-cards .ai-card-goal {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: 0.84rem;
	line-height: 1.6;
}
.ai-cards .ai-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block-start: 0.2rem;
	padding-block-start: 0.7rem;
	border-block-start: 1px solid var(--wa-color-surface-border);
}
.ai-cards .ai-card-foot a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.ai-cards .ai-card-foot a:hover {
	text-decoration: underline;
}
.ai-cards .ai-card-practice {
	color: var(--wa-color-text-quiet);
}
.ai-cards .ai-card-practice i {
	color: var(--dg-fill);
}
/* 실습이 없는 단계도 "배우기" 는 끝에 둔다 */
.ai-cards .ai-card-learn {
	margin-inline-start: auto;
	color: var(--wa-color-brand-on-quiet);
}
/* 좁은 폭: 세로로 쌓고 화살표를 아래로 돌린다 */
@container (max-width: 44rem) {
	.ai-cards .ai-cards-list {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.ai-cards .ai-cards-arrow {
		inset-block-start: -1.15rem;
		inset-inline-start: 50%;
		translate: -50% 0;
		rotate: 90deg;
	}
	[dir='rtl'] .ai-cards .ai-cards-arrow {
		transform: none;
		translate: 50% 0;
	}
}

/* ── 빈칸 채우기 체험 <x-ai.fill-in-blank> ───────────── */
/* 홈·/ai 가 함께 쓰는 첫 수업 카드. 여백을 넉넉히 두고 본문을 1rem 안팎으로 키워 처음 보는 사람도 편히 읽게 한다.
   바깥 위아래 여백은 두지 않는다 — 놓이는 화면의 간격을 따른다. */
.ai-fill {
	padding: clamp(1.75rem, 3.5vw, 3.25rem);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--pes-radius-panel);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	box-shadow: var(--pes-shadow-card);
	scroll-margin-block-start: 6rem;
}
.ai-fill .ai-fill-head {
	max-inline-size: 62ch;
}
.ai-fill :is(h2, h3) {
	font-family: inherit;
	font-weight: 750;
}
.ai-fill h2 {
	margin-block: 1rem 0;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.ai-fill h3 {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.6;
}
.ai-fill p {
	margin-block: 0.65rem 0;
	line-height: 1.85;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
:is(:lang(ja), :lang(zh)) .ai-fill p {
	word-break: normal;
}
.ai-fill :is(.ai-fill-intro, .ai-fill-explain p) {
	color: var(--wa-color-text-quiet);
	font-size: 1.02rem;
}
.ai-fill .ai-fill-intro {
	margin-block-start: 1rem;
}
.ai-fill .ai-fill-example {
	margin-block: 2.25rem;
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	border: 1px solid color-mix(in oklab, var(--wa-color-brand-on-quiet) 22%, transparent);
	border-radius: 1.25rem;
	background: var(--wa-color-brand-fill-quiet);
}
.ai-fill .ai-fill-question {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 600;
}
.ai-fill .ai-fill-sentence {
	margin-block: 1rem 1.4rem;
	color: var(--wa-color-brand-on-quiet);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 750;
	letter-spacing: -0.02em;
}
.ai-fill .ai-fill-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}
.ai-fill .ai-fill-choice {
	max-inline-size: 100%;
	min-block-size: 3rem;
	padding-inline: 1.1rem;
	font-size: 0.95rem;
	white-space: normal;
}
.ai-fill .ai-fill-choice i {
	color: var(--wa-color-brand-on-quiet);
}
/* 고른 예시 — 채운 버튼(aria-pressed 가 뜻을 보조기기에 전한다) */
.ai-fill .ai-fill-choice[aria-pressed='true'],
.ai-fill .ai-fill-choice[aria-pressed='true']:not(:disabled):hover {
	border-color: transparent;
	background: var(--pes-accent);
	color: var(--pes-on-accent);
}
.ai-fill .ai-fill-choice[aria-pressed='true'] i {
	color: inherit;
}
.ai-fill .ai-fill-note {
	margin-block-start: 1.1rem;
	color: var(--wa-color-text-quiet);
	font-size: 0.86rem;
}
.ai-fill .ai-fill-explain {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 2.5rem;
}
.ai-fill .ai-fill-takeaway {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-block-start: 1rem;
	padding: 0.9rem 1.1rem;
	border-radius: 0.9rem;
	background: var(--wa-color-surface-lowered);
}
.ai-fill .ai-fill-takeaway i {
	flex-shrink: 0;
	color: var(--wa-color-brand-on-quiet);
}
.ai-fill .ai-fill-takeaway strong {
	color: var(--wa-color-text-normal);
	font-size: 0.98rem;
}
.ai-fill .ai-fill-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: 2rem;
	min-block-size: 3rem;
	padding: 0.5rem 1.15rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 999px;
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-brand-on-quiet);
	font-size: 0.95rem;
	font-weight: 650;
	text-decoration: none;
	box-sizing: border-box;
	transition:
		border-color var(--pes-motion),
		background-color var(--pes-motion);
}
.ai-fill .ai-fill-link:hover {
	border-color: var(--wa-color-brand-border-loud);
	background: var(--wa-color-brand-fill-quiet);
}

/* ── 단계 상세 (/ai/curriculum/{단계}) ─────────────── */
.ai-lesson {
	max-inline-size: 46rem;
	display: grid;
	gap: var(--wa-space-xl);
}
.ai-lesson .ai-lesson-head {
	gap: var(--wa-space-xs);
	margin: 0;
	padding-block-end: var(--wa-space-l);
}
.ai-lesson .ai-lesson-level {
	justify-self: start;
	padding: var(--wa-space-3xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-pill);
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-bold);
	box-shadow: inset 0 0 0 1px var(--dg-border);
}
.ai-lesson .ai-lesson-goal {
	padding: var(--wa-space-l);
	border: var(--wa-border-width-s) solid var(--dg-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
}
.ai-lesson .ai-lesson-goal h2 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	margin: 0 0 var(--wa-space-2xs);
	font-size: var(--wa-font-size-m);
	font-weight: var(--wa-font-weight-bold);
}
.ai-lesson .ai-lesson-goal h2 i {
	color: var(--dg-fill);
}
.ai-lesson .ai-lesson-goal p {
	margin: 0;
	font-size: var(--wa-font-size-l);
	line-height: 1.6;
}
.ai-lesson .ai-lesson-body {
	display: grid;
	gap: var(--wa-space-l);
}
.ai-lesson .ai-lesson-body p {
	margin: 0;
	font-size: var(--wa-font-size-m);
	line-height: 1.85;
}
.ai-lesson .ai-lesson-check {
	display: grid;
	gap: var(--wa-space-s);
}
.ai-lesson .ai-lesson-check h2 {
	margin: 0;
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-bold);
}
.ai-lesson .ai-lesson-fold {
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
}
.ai-lesson .ai-lesson-fold summary {
	padding: var(--wa-space-s) var(--wa-space-m);
	font-weight: var(--wa-font-weight-semibold);
	cursor: pointer;
}
.ai-lesson .ai-lesson-fold summary:hover {
	color: var(--wa-color-brand-on-quiet);
}
.ai-lesson .ai-lesson-fold summary:focus-visible {
	outline: 2px solid var(--wa-color-brand-fill-loud);
	outline-offset: 2px;
	border-radius: var(--wa-border-radius-m);
}
.ai-lesson .ai-lesson-fold > :not(summary) {
	margin: 0;
	padding: 0 var(--wa-space-m) var(--wa-space-m);
}
.ai-lesson .ai-lesson-fold ul {
	display: grid;
	gap: var(--wa-space-2xs);
	padding-inline-start: calc(var(--wa-space-m) + 1.2rem);
	line-height: 1.6;
}
.ai-lesson .ai-lesson-fold a {
	color: var(--wa-color-brand-on-quiet);
	overflow-wrap: anywhere;
}
.ai-lesson .ai-lesson-code {
	margin: 0;
	overflow: hidden;
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
}
.ai-lesson .ai-lesson-code figcaption {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-xs) var(--wa-space-m);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
}
/* 코드는 오른쪽→왼쪽 언어에서도 왼쪽부터 쓴다 */
.ai-lesson .ai-lesson-code pre {
	margin: 0;
	padding: var(--wa-space-m);
	overflow-x: auto;
	background: var(--wa-color-surface-lowered);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
	direction: ltr;
	text-align: left;
}
.ai-lesson .ai-lesson-practice {
	display: flex;
	justify-content: center;
}
.ai-lesson .ai-lesson-practice .pes-button {
	min-block-size: 3rem;
	padding-inline: 1.5rem;
	font-size: 0.95rem;
}
.ai-lesson .ai-lesson-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--wa-space-m);
	padding-block-start: var(--wa-space-l);
	border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}
.ai-lesson .ai-lesson-nav a {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-s);
	max-inline-size: 48%;
	color: inherit;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.ai-lesson .ai-lesson-nav a:hover {
	color: var(--wa-color-brand-on-quiet);
}
.ai-lesson .ai-lesson-nav small {
	display: block;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-normal);
}
.ai-lesson .ai-lesson-next {
	margin-inline-start: auto;
	text-align: end;
}

/* ── 확률 실습 (/ai/probability) ──────────────────── */
.ai-prob {
	display: grid;
	gap: var(--wa-space-2xl);
}
.ai-prob .ai-prob-hero {
	display: grid;
	gap: var(--wa-space-xl);
	padding: var(--wa-space-2xl) var(--wa-space-xl);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--pes-radius-panel);
	background:
		linear-gradient(180deg, var(--wa-color-brand-fill-quiet), transparent 70%),
		var(--wa-color-surface-default);
}
.ai-prob .ai-prob-copy {
	display: grid;
	gap: var(--wa-space-s);
	max-inline-size: 54rem;
}
.ai-prob .ai-prob-badge {
	justify-self: start;
	padding: 0.2rem 0.8rem;
	border-radius: 999px;
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-size: 0.8rem;
	font-weight: var(--wa-font-weight-bold);
}
.ai-prob .ai-prob-copy h1 {
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 1.1;
}
.ai-prob .ai-prob-copy p {
	margin: 0;
	max-inline-size: 44rem;
	color: var(--wa-color-text-quiet);
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.65;
}
.ai-prob .ai-prob-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
	align-items: start;
	gap: var(--wa-space-2xl);
}
.ai-prob .ai-prob-article {
	display: grid;
	gap: var(--wa-space-l);
	min-inline-size: 0;
}
.ai-prob .ai-prob-article > p {
	margin: 0;
	color: var(--wa-color-text-normal);
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: 1.9;
}
.ai-prob .ai-prob-article > p.ai-prob-shout {
	color: var(--wa-color-danger-on-quiet);
	font-size: clamp(1.5rem, 4vw, 2.6rem);
	font-weight: var(--wa-font-weight-bold);
	line-height: 1.2;
}
.ai-prob .ai-prob-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-m);
	margin-block-start: var(--wa-space-l);
	padding: var(--wa-space-l);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
}
.ai-prob .ai-prob-next p {
	margin: var(--wa-space-2xs) 0 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-m);
}
.ai-prob .ai-prob-next .pes-button {
	flex: none;
	min-block-size: 3rem;
	padding-inline: 1.25rem;
	font-size: 0.95rem;
}
.ai-prob .ai-prob-notes {
	position: sticky;
	inset-block-start: var(--wa-space-l);
	padding: var(--wa-space-l);
	border-inline-start: 4px solid var(--wa-color-brand-fill-loud);
	background: var(--wa-color-brand-fill-quiet);
}
.ai-prob .ai-prob-notes h2 {
	margin: 0 0 var(--wa-space-s);
	font-size: var(--wa-font-size-l);
}
.ai-prob .ai-prob-notes ul {
	display: grid;
	gap: var(--wa-space-s);
	margin: 0;
	padding-inline-start: 1.2rem;
	color: var(--wa-color-text-normal);
	line-height: 1.6;
}
@media (max-width: 900px) {
	.ai-prob .ai-prob-hero {
		padding: var(--wa-space-xl) var(--wa-space-m);
	}
	.ai-prob .ai-prob-body {
		grid-template-columns: 1fr;
	}
	.ai-prob .ai-prob-next {
		flex-direction: column;
		align-items: stretch;
	}
	.ai-prob .ai-prob-notes {
		position: static;
	}
}

/* ── 긴 본문 줄바꿈 — 한국어는 어절을 지키고, 중국어·일본어는 기본 규칙 ─── */
:is(.ai-lesson, .ai-prob) :is(p, li, h1, h2) {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
:is(:lang(ja), :lang(zh)) :is(.ai-lesson, .ai-prob) :is(p, li, h1, h2) {
	word-break: normal;
}

/* ── 우르두어 — 제목 줄 간격 ─── */
:lang(ur) :is(.ai-hub, .ai-adv, .ai-lesson, .ai-prob, .ai-fill, .ai-cards) :is(h1, h2, h3) {
	line-height: 1.8;
	letter-spacing: 0;
}

/* ── 확률 수업의 리엔 음성 설명(이전 사이트 .voice-panel) ─── */
.ai-prob .ai-prob-voice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-m);
	padding: var(--wa-space-m);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
}
.ai-prob .ai-prob-voice > div { display: grid; gap: var(--wa-space-3xs); min-inline-size: 0; }
.ai-prob .ai-prob-voice small { color: var(--wa-color-text-quiet); }
.ai-prob .ai-prob-voice .pes-button { flex: none; }
@media (max-width: 600px) {
	.ai-prob .ai-prob-voice { flex-direction: column; align-items: stretch; }
}

/* ── 인공지능 교재 — 개념과 학습 단계의 읽기 리듬 ────────── */
.ai-lesson .ai-lesson-body { line-height: 1.9; }
.ai-prob .ai-prob-article { line-height: 1.9; }
.ai-hub .ai-cards, .ai-adv .ai-next-grid { gap: var(--wa-space-m); }