/*
 * AI Course 위젯(x-widget.learn.ai-course) — 목차·챕터·수업 진행·코드 실행기, 강사·학생 페이지의 작은 목차(.ai-course-compact).
 * 챕터 본문은 ai.css 의 .ai-lesson 규칙을 그대로 쓰고, 여기에는 위젯에만 있는 것을 둔다. 보이기·숨기기는 public/css/course-chapters.css.
 */

/* ── 목차 ─────────────────────────────────────────── */
.ai-course-toc {
	display: grid;
	gap: var(--wa-space-xl);
}
.ai-course-toc > h2 {
	margin: 0;
	font-size: var(--wa-font-size-xl);
}
/* 단계(초급·중급·고급·마스터) — 구간을 묶는 머리 */
.ai-course-level {
	display: grid;
	gap: var(--wa-space-l);
	padding-block-start: var(--wa-space-m);
	border-block-start: var(--wa-border-width-m) solid var(--dg-border);
}
.ai-course-level-head {
	display: grid;
	gap: var(--wa-space-2xs);
}
.ai-course-level-head h3 {
	margin: 0;
	color: var(--dg-ink);
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-bold);
}
.ai-course-level-head p {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
}
.ai-course-part {
	display: grid;
	gap: var(--wa-space-s);
}
.ai-course-part h4 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	margin: 0;
	color: var(--dg-ink);
	font-size: var(--wa-font-size-m);
	font-weight: var(--wa-font-weight-bold);
}
.ai-course-part h4::before {
	content: '';
	inline-size: 0.35rem;
	block-size: 1.1em;
	border-radius: var(--wa-border-radius-pill);
	background: var(--dg-fill);
}
.ai-course-part ol {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--wa-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-course-part a {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	block-size: 100%;
	padding: var(--wa-space-s) var(--wa-space-m);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}
.ai-course-part a:hover {
	border-color: var(--dg-border);
	background: var(--dg-soft);
}
.ai-course-part a:focus-visible {
	outline: 2px solid var(--wa-color-brand-fill-loud);
	outline-offset: 2px;
}
.ai-course-toc .sonub-icon-tile {
	--tile-ink: var(--dg-fill);
	--tile-bg: var(--dg-soft);
}
.ai-course-toc-text {
	display: grid;
	flex: 1;
	gap: var(--wa-space-3xs);
	min-inline-size: 0;
}
.ai-course-toc-text small {
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-semibold);
}
.ai-course-toc-text strong {
	font-size: var(--wa-font-size-s);
	line-height: 1.4;
}

/* 끝낸 챕터 — 페이지가 뜬 뒤 JS 가 .is-done 을 붙인다 */
.ai-course .ai-course-done-mark {
	flex: none;
	color: var(--sonub-success);
	visibility: hidden;
}
.ai-course .is-done .ai-course-done-mark {
	visibility: visible;
}

.ai-course-next {
	display: grid;
	gap: var(--wa-space-s);
}
.ai-course-next h3 {
	margin: 0;
	font-size: var(--wa-font-size-m);
}

/* ── 챕터 ─────────────────────────────────────────── */
.ai-course-chapter .ai-lesson-head h2 {
	margin: 0;
	font-size: calc(clamp(1.35rem, 2.6vw, 1.75rem) * var(--wa-font-size-scale, 1));
	line-height: 1.3;
}
.ai-course-chapter .ai-lesson-goal h3 {
	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-course-chapter .ai-lesson-goal h3 i {
	color: var(--dg-fill);
}
.ai-course-chapter .ai-lesson-check h3 {
	margin: 0;
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-bold);
}
.ai-course .ai-course-note {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
}
.ai-course-checked {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
}

/* 다른 과정 단원으로 보내는 챕터(쉘) */
.ai-course-linked {
	display: grid;
	gap: var(--wa-space-s);
	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-course-linked h3 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	margin: 0;
	font-size: var(--wa-font-size-m);
}
.ai-course-linked ul {
	display: grid;
	gap: var(--wa-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-course-linked a {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	color: var(--wa-color-brand-on-quiet);
	font-weight: var(--wa-font-weight-semibold);
}

/* 수업 진행 — 강사용 안내(접어 둔다) */
.ai-course-teach summary {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
}
.ai-course-teach .ai-course-teach-body {
	display: grid;
	gap: var(--wa-space-xs);
}
.ai-course-teach h4 {
	margin: var(--wa-space-s) 0 0;
	color: var(--dg-ink);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-bold);
}
.ai-course-teach p,
.ai-course-teach li {
	margin: 0;
	font-size: var(--wa-font-size-s);
	line-height: 1.7;
}
.ai-course-teach ol,
.ai-course-teach ul {
	display: grid;
	gap: var(--wa-space-3xs);
	margin: 0;
	padding-inline-start: 1.3rem;
}

/* 코드 실행기 — 코드는 오른쪽→왼쪽 언어에서도 왼쪽부터 쓴다 */
.ai-course-runner {
	display: grid;
	overflow: hidden;
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
}
.ai-course-runner-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-2xs) var(--wa-space-m);
	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);
}
.ai-course-runner-head span {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	font-weight: var(--wa-font-weight-semibold);
}
.ai-course-editor {
	inline-size: 100%;
	min-block-size: 12rem;
	margin: 0;
	padding: var(--wa-space-m);
	border: 0;
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-normal);
	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;
	white-space: pre;
	tab-size: 4;
	resize: vertical;
}
.ai-course-editor:focus-visible {
	outline: 2px solid var(--wa-color-brand-fill-loud);
	outline-offset: -2px;
}
.ai-course-runner-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-s) var(--wa-space-m);
	border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}
.ai-course-run-status {
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
}
.ai-course-output {
	max-block-size: 24rem;
	margin: 0;
	padding: var(--wa-space-m);
	overflow: auto;
	border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	background: var(--wa-color-surface-default);
	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;
	white-space: pre-wrap;
}

/* 보여만 주는 명령(터미널에서 친다) — 아래 안내 한 줄 */
.ai-course-commands .ai-course-note {
	margin: 0;
	padding: var(--wa-space-xs) var(--wa-space-m);
	border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

/* ── 강사·학생 페이지의 작은 목차(compact) ───────────── */
.ai-course-compact {
	display: grid;
	gap: var(--wa-space-m);
	margin-block: 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-l);
	background: var(--wa-color-surface-default);
}
.ai-course-compact-head {
	display: grid;
	gap: var(--wa-space-xs);
	justify-items: start;
}
.ai-course-compact-head h2 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	margin: 0;
	font-size: var(--wa-font-size-l);
}
.ai-course-compact-head p {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
}
.ai-course-compact-level {
	display: grid;
	gap: var(--wa-space-xs);
}
.ai-course-compact-level h3 {
	margin: 0;
	color: var(--dg-ink);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-bold);
}
.ai-course-compact-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--wa-space-2xs) var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-course-compact-list a {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	padding-block: var(--wa-space-3xs);
	color: inherit;
	font-size: var(--wa-font-size-s);
	text-decoration: none;
}
.ai-course-compact-list a:hover {
	color: var(--wa-color-brand-on-quiet);
}
.ai-course-compact-list .ai-course-no {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-bold);
}

/* 한국어는 어절을 지키고, 중국어·일본어는 기본 규칙 */
.ai-course :is(p, li, h2, h3, h4, strong) {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
:is(:lang(ja), :lang(zh)) .ai-course :is(p, li, h2, h3, h4, strong) {
	word-break: normal;
}
:lang(ur) .ai-course :is(h2, h3, h4) {
	line-height: 1.8;
	letter-spacing: 0;
}