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

/* ── 목차 ─────────────────────────────────────────── */
/* 목차 상자 — 과정 머리 카드와 챕터 목록(nav). 챕터를 열면 통째로 숨는다(course-chapters.css) */
.ai-course-contents,
.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 {
	display: grid;
	gap: var(--wa-space-xs);
}
.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-goal p {
	font-size: var(--wa-font-size-m);
	line-height: 1.75;
}
.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);
}

/* 다른 과정 단원으로 보내는 챕터(쉘) · 설명을 다른 화면에 모은 챕터(Agent Skills → /skills) */
.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;
	justify-content: flex-start;
	gap: var(--wa-space-xs);
}
.ai-course-teach summary::after { margin-inline-start: auto; flex: none; }
.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 [hidden] { display: none; }
.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-inline-size: 0;
	block-size: min(50vh, 32rem);
	min-block-size: 16rem;
	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: start;
	white-space: pre;
	tab-size: 4;
	resize: vertical;
}
.ai-course-editor:focus-visible,
.ai-course-output: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-runner-actions .sonub-button { min-block-size: 2.75rem; }
.ai-course-editor { border-block-start: 1px 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: start;
	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);
}

/* 따로 보여 주는 소스 파일(AiCourse::FILES) — 머리에 파일 이름, 이름은 코드 글꼴로 */
.ai-course-file figcaption span {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--wa-color-text-normal);
}
/* 긴 파일은 파일 이름과 가로 스크롤이 같은 화면 안에 머물게 한다. */
.ai-course-file pre {
	max-block-size: min(36rem, 70vh);
	scrollbar-gutter: stable;
}
.ai-course .ai-lesson-code pre:focus-visible {
	outline: 2px solid var(--wa-color-brand-border-loud);
	outline-offset: -2px;
}

/* 반드시 기억하세요(AiCourse::MUST) — 경고색 테두리 상자 */
.ai-course-must {
	display: grid;
	gap: var(--wa-space-s);
	padding: var(--wa-space-l);
	border: 2px solid var(--dg-fill);
	border-inline-start-width: 6px;
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
}
.ai-course-must h3 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	margin: 0;
	font-size: calc(1.1rem * var(--wa-font-size-scale, 1));
}
.ai-course-must h3 i { color: var(--dg-fill); }
.ai-course-must p { margin: 0; line-height: 1.8; }
/* 오른쪽→왼쪽 언어에서 감싼 명령·경로(--scope project · ~/.claude.json)는 한 덩어리로 — '--' 뒤에서 줄이 바뀌지 않게 */
.ai-course-must bdi { white-space: nowrap; }

/* ── 강사·학생 페이지의 작은 목차(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);
}
/* 단계 머리(summary) — 누르면 그 단계의 챕터가 펼쳐진다. 이름 · 챕터 번호 범위 · Web Awesome 기본 펼침 화살표(summary::after) */
.ai-course-compact-level > summary {
	justify-content: flex-start;
	gap: var(--wa-space-xs);
	min-block-size: 2.75rem;
	box-sizing: border-box;
	padding: var(--wa-space-xs) var(--wa-space-m);
}
.ai-course-compact-level > summary::after {
	flex: none;
	margin-inline-start: auto;
}
.ai-course-compact-range {
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-variant-numeric: tabular-nums;
}
.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;
}

/* ── 쉽게 이해하기(AiCourse::EASY) — 첫 문단 아래 비유·예시·자주 하는 실수와 개념 그림 ─── */
.ai-course-easy {
	display: grid;
	gap: var(--sonub-space-3);
	padding: var(--sonub-space-4) var(--sonub-space-6);
	border: 1px solid var(--wa-color-brand-border-normal);
	border-radius: var(--sonub-radius-card);
	background: var(--wa-color-brand-fill-quiet);
}
.ai-course-easy h3 {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin: 0;
	font-size: calc(1.1rem * var(--wa-font-size-scale, 1));
}
.ai-course-easy h3 i { color: var(--wa-color-brand-fill-loud); }
.ai-course-easy dl {
	display: grid;
	gap: var(--sonub-space-3);
	margin: 0;
}
.ai-course-easy dl > div {
	padding: var(--sonub-space-3) var(--sonub-space-4);
	border-inline-start: 4px solid var(--wa-color-brand-fill-loud);
	border-radius: var(--wa-border-radius-s);
	background: var(--wa-color-surface-default);
}
.ai-course-easy dl > div[data-dg-tone] { border-inline-start-color: var(--dg-fill); }
.ai-course-easy dt {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin-block-end: var(--sonub-space-1);
	font-weight: 700;
	color: var(--wa-color-text-normal);
}
.ai-course-easy dl > div[data-dg-tone] dt i { color: var(--dg-fill); }
.ai-course-easy dd {
	margin: 0;
	line-height: 1.8;
}
/* 예시 칸은 목록 부품(x-ui.rich-text) — 요청을 바꿔 가는 차례·프롬프트 여섯 부분을 한 줄에 하나씩 */
.ai-course-easy dd > p { margin: 0; }
.ai-course-easy dd > * + * { margin-block-start: var(--sonub-space-2); }
.ai-course-easy .sonub-figure { margin: 0; }

/* 역할별 교재 본문도 같은 종이 카드와 읽기 폭을 사용한다(SSOT 11·23절). compact 목차는 기존 홈 위젯 그대로다. */
.learn-ai .ai-course-contents { gap: var(--wa-space-xl); }
.learn-ai .ai-course-level { min-inline-size: 0; padding: clamp(1rem,2.1vw,2rem); border: 1px solid var(--sonub-border); border-radius: var(--sonub-radius-panel); background: var(--sonub-surface); box-shadow: var(--wa-shadow-s); }
.learn-ai .ai-course-level-head { padding-block-end: var(--wa-space-s); border-block-end: 1px solid var(--sonub-border); }
.learn-ai .ai-course-level-head p { font-size: calc(1rem * var(--wa-font-size-scale,1)); line-height: 1.8; }
.learn-ai .ai-course-toc-text strong { font-size: calc(1rem * var(--wa-font-size-scale,1)); line-height: 1.6; }
.learn-ai .ai-course-part a { min-block-size: 4.5rem; transition-duration: 160ms; }
.learn-ai .ai-course-chapter { inline-size: 100%; max-inline-size: var(--sonub-reading-width); min-inline-size: 0; margin-inline: auto; padding: clamp(1rem,2.1vw,2rem); border: 1px solid var(--sonub-border); border-radius: var(--sonub-radius-panel); background: var(--sonub-surface); box-shadow: var(--wa-shadow-s); }
.learn-ai .ai-course-chapter :is(.ai-lesson-head,.ai-lesson-body) { min-inline-size: 0; }
.learn-ai .ai-course-chapter .ai-lesson-head { padding-block-end: var(--wa-space-m); border-block-end: 1px solid var(--sonub-border); }
.learn-ai .ai-course-chapter .ai-lesson-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.learn-ai .ai-course-chapter .ai-lesson-nav a {
	justify-content: space-between;
	inline-size: 100%;
	max-inline-size: none;
	min-inline-size: 0;
	min-block-size: 4.5rem;
	margin-inline: 0;
	padding: var(--wa-space-m);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-subtle);
}
.learn-ai .ai-lesson-nav a:hover { border-color: var(--wa-color-brand-border-normal); }
.learn-ai .ai-lesson-nav a > span { flex: 1; min-inline-size: 0; text-align: start; }
.learn-ai .ai-lesson-nav a > span:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
.learn-ai .ai-course-chapter .ai-lesson-body > *,
.learn-ai .ai-course-chapter .ai-lesson-check > * { margin-block: 0; }
/* 펼친 상자의 바깥 여백에 본문 여백을 다시 더하지 않는다. */
.learn-ai .ai-lesson-fold > :not(summary) { padding: 0; }
.learn-ai .ai-lesson-fold > ul { padding-inline-start: 1.3rem; }
.learn-ai .ai-course-teach-body { row-gap: var(--wa-space-s); }
.learn-ai .ai-course-teach :is(ol, ul) { row-gap: var(--wa-space-xs); }
.learn-ai .ai-course-linked a { min-block-size: 2.75rem; }
@media (prefers-reduced-motion: reduce) { .learn-ai .ai-course-part a { transition: none; } }
/* 첫 검수 보완: 작은 읽기 카드 안의 중첩 상자가 글 폭을 지나치게 줄이지 않게 한다. */
@media (max-width: 600px) {
	.learn-ai .ai-course-chapter :is(.ai-lesson-goal,.ai-course-easy,.ai-course-linked) { padding: var(--wa-space-m); }
	.learn-ai .ai-course-easy dl > div { padding: var(--wa-space-s); }
}

/* AI 교재 — 목차의 단계별 경계를 분명히 하고 챕터를 편하게 찾는다. */
.learn-ai .ai-course-level { padding: clamp(1rem, 2vw, 1.75rem); border: 1px solid var(--wa-color-surface-border); border-block-start: 3px solid var(--wa-color-brand-fill-loud); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-raised); }
.learn-ai .ai-course-level-head { gap: var(--wa-space-s); padding-block-end: var(--wa-space-m); border-block-end: 1px solid var(--wa-color-surface-border); }
.learn-ai .ai-course-level-head p { line-height: 1.8; }
.learn-ai .ai-course-part a { min-block-size: 3.5rem; border-radius: var(--wa-border-radius-m); }
.learn-ai .ai-course-part h4 { line-height: 1.7; }