/*
 * 학습 콘텐츠 공용 — 이전 사이트(v1)의 디자인 토큰·공용 클래스·교육용 도표를 옮겼다.
 * 모든 화면이 읽는다. 섹션 전용 디자인은 public/css/pages/<섹션>.css 에 둔다.
 * --sonub-* 토큰은 Web Awesome 토큰을 가리킨다 — 디자인의 기준은 Web Awesome 하나다.
 * 방향이 있는 속성은 논리 속성만 쓴다(ar·ur 오른쪽→왼쪽).
 */

/* ── 토큰 ─────────────────────────────────────── */
:root {
	--sonub-font: var(--wa-font-family-body);
	--sonub-canvas: var(--wa-color-surface-default);
	--sonub-surface: var(--wa-color-surface-raised);
	--sonub-subtle: var(--wa-color-surface-lowered);
	--sonub-border: var(--wa-color-surface-border);
	--sonub-ink: var(--wa-color-text-normal);
	--sonub-muted: var(--wa-color-text-quiet);
	--sonub-accent: var(--wa-color-brand-fill-loud);
	--sonub-accent-hover: color-mix(in srgb, var(--wa-color-brand-fill-loud) 86%, #000);
	--sonub-accent-soft: var(--wa-color-brand-fill-quiet);
	/* 단원 링크 복사(public/css/linkify.css — 스킬 원본 그대로)의 색 — 기본·다크·핑크 테마를 따른다(SSOT 11절 "단원 링크 복사") */
	--linkify-accent: var(--wa-color-brand-fill-loud);
	--linkify-muted: var(--wa-color-text-quiet);
	--linkify-toast-bg: var(--wa-color-neutral-fill-loud);
	--linkify-toast-fg: var(--wa-color-neutral-on-loud);
	--sonub-accent-ink: var(--wa-color-brand-on-quiet);
	--sonub-on-accent: var(--wa-color-brand-on-loud);
	--sonub-success: var(--wa-color-success-on-quiet);
	--sonub-success-soft: var(--wa-color-success-fill-quiet);
	--sonub-warning: var(--wa-color-warning-on-quiet);
	--sonub-warning-soft: var(--wa-color-warning-fill-quiet);
	--sonub-danger: var(--wa-color-danger-on-quiet);
	--sonub-danger-soft: var(--wa-color-danger-fill-quiet);
	--sonub-info: var(--wa-color-brand-on-quiet);
	--sonub-info-soft: var(--wa-color-brand-fill-quiet);
	--sonub-radius-sm: var(--wa-border-radius-s);
	--sonub-radius-control: var(--wa-border-radius-m);
	--sonub-radius-card: var(--wa-border-radius-l);
	--sonub-radius-panel: var(--wa-border-radius-xl, 1.5rem);
	--sonub-space-1: var(--wa-space-2xs);
	--sonub-space-2: var(--wa-space-xs);
	--sonub-space-3: var(--wa-space-s);
	--sonub-space-4: var(--wa-space-m);
	--sonub-space-6: var(--wa-space-l);
	--sonub-space-8: var(--wa-space-xl);
	--sonub-space-12: var(--wa-space-2xl);
	--sonub-reading-width: 54rem;
	--sonub-form-width: 42rem;
	--sonub-shadow-card: var(--wa-shadow-s);
	--sonub-shadow-hover: var(--wa-shadow-m);
	--sonub-shadow-overlay: var(--wa-shadow-l);
	--sonub-motion: 160ms ease;
	--sonub-motion-fast: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
	--sonub-motion-medium: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
	--sonub-motion-slow: 560ms cubic-bezier(0.16, 1, 0.3, 1);
	--sonub-lift: translateY(-2px);
	--sonub-lift-strong: translateY(-2px);

	/* 흐름 화살표 모양. 색은 background 로 칠하므로 테마를 그대로 따른다. */
	--dg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h19M15 1l6 5-6 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	.sonub-page *,
	.sonub-page *::before,
	.sonub-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ── 페이지 틀 ─────────────────────────────────── */
.sonub-page {
	inline-size: 100%;
	min-inline-size: 0;
	margin-inline: auto;
	padding-block: var(--sonub-space-4) var(--sonub-space-12);
	box-sizing: border-box;
	color: var(--sonub-ink);
}
.sonub-page-reading { max-inline-size: var(--sonub-reading-width); }
.sonub-page-form { max-inline-size: var(--sonub-form-width); }

.sonub-page h1 {
	margin: 0;
	font-size: calc(clamp(1.8rem, 2.4vw, 2.65rem) * var(--wa-font-size-scale, 1));
	line-height: 1.3;
	font-weight: 750;
	letter-spacing: -0.035em;
	text-wrap: balance;
	color: var(--sonub-ink);
}
.sonub-page :is(h2, h3, h4) { color: var(--sonub-ink); text-wrap: pretty; }
.sonub-page h2 { letter-spacing: -0.025em; }
.sonub-page p { text-wrap: pretty; }

.sonub-page-header {
	display: grid;
	min-inline-size: 0;
	gap: var(--wa-space-s);
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	margin: 0 0 var(--wa-space-s);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-panel);
	background: var(--sonub-surface);
	border-block-start: 3px solid var(--sonub-accent);
	box-shadow: var(--sonub-shadow-card);
	text-align: start;
}
.sonub-page-header > p,
.sonub-lead {
	margin: 0;
	font-size: calc(1rem * var(--wa-font-size-scale, 1));
	line-height: 1.8;
	color: var(--sonub-muted);
}
.sonub-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sonub-accent-ink);
	font-size: calc(0.78rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
	letter-spacing: 0.035em;
	line-height: 1.6;
}
.sonub-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.42rem 0.95rem;
	border-radius: var(--sonub-radius-sm);
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
	font-size: calc(0.8rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
	line-height: 1.5;
}
.sonub-heading-row,
.sonub-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}
.sonub-section-heading h2 {
	margin: 0.35rem 0 0;
	font-size: calc(clamp(1.3rem, 2vw, 1.75rem) * var(--wa-font-size-scale, 1));
	font-weight: 700;
}
.sonub-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.65rem;
}

/* ── 카드 · 아이콘 타일 ─────────────────────────── */
.sonub-card,
.sonub-panel {
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	color: var(--sonub-ink);
	box-shadow: var(--sonub-shadow-card);
	text-decoration: none;
	min-inline-size: 0;
}
.sonub-card {
	transition:
		border-color var(--sonub-motion),
		box-shadow var(--sonub-motion),
		transform var(--sonub-motion-fast);
}
:is(a, button).sonub-card:hover {
	border-color: color-mix(in srgb, var(--sonub-accent) 45%, var(--sonub-border));
	box-shadow: var(--sonub-shadow-hover);
	transform: var(--sonub-lift-strong);
}
.sonub-card-layout {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wa-space-s);
	padding: var(--sonub-space-6);
}
.sonub-card-compact { padding: var(--sonub-space-4); }
.sonub-card-layout h3 { margin: 0; font-size: calc(1.1rem * var(--wa-font-size-scale, 1)); font-weight: 700; line-height: 1.5; }
.sonub-card-layout p { margin: 0; font-size: calc(0.97rem * var(--wa-font-size-scale, 1)); color: var(--sonub-muted); line-height: 1.8; }
.sonub-card-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: auto;
	padding-block-start: 0.75rem;
	color: var(--sonub-accent-ink);
	font-size: calc(0.84rem * var(--wa-font-size-scale, 1));
	font-weight: 650;
}

.sonub-icon-tile {
	--tile-ink: var(--sonub-accent-ink);
	--tile-bg: var(--sonub-accent-soft);
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--sonub-radius-control);
	background: var(--tile-bg);
	color: var(--tile-ink);
	font-size: calc(1.15rem * var(--wa-font-size-scale, 1));
}
.sonub-icon-tile[data-tone='success'] { --tile-ink: var(--sonub-success); --tile-bg: var(--sonub-success-soft); }
.sonub-icon-tile[data-tone='warning'] { --tile-ink: var(--sonub-warning); --tile-bg: var(--sonub-warning-soft); }
.sonub-icon-tile[data-tone='info'] { --tile-ink: var(--sonub-info); --tile-bg: var(--sonub-info-soft); }

/* ── 버튼 · 입력 · 탭 · 알림 ─────────────────────── */
.sonub-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: 2.85rem;
	padding: 0.65rem 1.15rem;
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-surface);
	color: var(--sonub-ink);
	font: inherit;
	font-size: var(--wa-font-size-s);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition:
		background-color var(--sonub-motion),
		border-color var(--sonub-motion);
}
.sonub-button:not(:disabled):hover {
	border-color: var(--sonub-accent);
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
}
.sonub-button-primary { background: var(--sonub-accent); border-color: transparent; color: var(--sonub-on-accent); }
.sonub-button-primary:not(:disabled):hover { background: var(--sonub-accent-hover); color: var(--sonub-on-accent); }
.sonub-button:disabled { opacity: 0.5; cursor: not-allowed; }

.sonub-control {
	max-inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 2.75rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-control);
	background-color: var(--sonub-surface); /* background 줄임 속성은 Web Awesome select 의 꺾쇠(--icon-caret)를 지운다 */
	color: var(--sonub-ink);
	font: inherit;
	font-size: calc(0.94rem * var(--wa-font-size-scale, 1));
	line-height: 1.6;
	box-sizing: border-box;
}
.sonub-control::placeholder { color: var(--sonub-muted); opacity: 0.9; }
.sonub-control:focus { border-color: var(--sonub-accent); outline: 2px solid var(--sonub-accent-soft); outline-offset: 2px; }
.sonub-page input:is([type='checkbox'], [type='radio'], [type='range']) { accent-color: var(--sonub-accent); }

.sonub-tabs {
	display: flex;
	gap: 0.35rem;
	padding: 0.35rem;
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-subtle);
	overflow-x: auto;
}
.sonub-tab {
	min-block-size: 2.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--sonub-radius-sm);
	background: transparent;
	color: var(--sonub-muted);
	font: inherit;
	font-size: calc(0.87rem * var(--wa-font-size-scale, 1));
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.sonub-tab:is(.active, [aria-selected='true'], [aria-pressed='true'], [aria-current='page']) {
	background: var(--sonub-surface);
	border-color: var(--sonub-border);
	color: var(--sonub-accent-ink);
	box-shadow: var(--sonub-shadow-card);
}
.sonub-tab:hover { color: var(--sonub-accent-ink); }
.sonub-tab:has(.sonub-tab-number) { display: inline-flex; align-items: center; gap: var(--wa-space-s); }
.sonub-tab-number {
	display: inline-grid;
	place-items: center;
	flex: 0 0 2rem;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: var(--wa-border-radius-circle);
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
	font-weight: 700;
}

/* ── 읽기 · 키보드 탐색 ───────────────────────────── */
.sonub-page :is(p, li, dd) { line-height: 1.8; }
.sonub-page :is(h1, h2, h3, h4, p, li, dt, dd, blockquote, figcaption, small, summary) { overflow-wrap: break-word; }
.sonub-page :is(h1, h2, h3, h4, p, li, dt, dd, blockquote, figcaption, small, summary):lang(ko) { word-break: keep-all; }
/* 일본어·중국어는 띄어쓰기가 없어 keep-all 이면 문장이 한 덩어리로 넘친다 — 페이지 CSS 가 언어 구분 없이 keep-all 을 걸어도 여기서 푼다 */
.sonub-page :is(h1, h2, h3, h4, p, li, dt, dd, blockquote, figcaption, small, summary):is(:lang(ja), :lang(zh)) { word-break: normal; }
/* 기본 앵커 여백은 섹션의 실제 메뉴·탭 높이 규칙보다 우선하지 않는다. */
.sonub-page :where(h1, h2, h3, h4, section[id]) { scroll-margin-block-start: calc(var(--bar-height) + var(--wa-space-l)); }
.sonub-page :is(a, button, summary):focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 3px;
}
/* Web Awesome의 열린 details 후손 선택자가 닫힌 안쪽 summary까지 바꾸지 않게 한다(SSOT 11절).
   열린 요소는 기본 안쪽 여백과 음수 여백을 그대로 쓰고, 닫힌 요소만 자기 상태로 되돌린다. */
:where(.content, .site-content) details:not([open]) > summary {
	margin-inline: 0;
	border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
}
:where(.content, .site-content) details:not([open]) > summary::after { rotate: 0deg; }
:where(.content, .site-content) details:not([open]) > summary:dir(rtl)::after { rotate: 180deg; }

.sonub-page .sonub-button { max-inline-size: 100%; white-space: normal; }
.sonub-tabs { scrollbar-width: thin; }
.sonub-page-tabs[data-sticky-tabs].is-positioned > .sonub-tabs {
	position: sticky;
	inset-block-start: var(--sonub-header-height, var(--bar-height));
	z-index: 3;
}
.sonub-page-tabs[data-sticky-tabs] > .sonub-tab-panel,
.sonub-page-tabs[data-sticky-tabs] .sonub-tab-panel :is(h2[id], h3[id], section[id]) {
	scroll-margin-block-start: calc(var(--sonub-header-height, var(--bar-height)) + var(--sonub-tabs-height, 4rem) + 1rem);
}

.sonub-note {
	padding: 1rem 1.25rem;
	border: 1px solid var(--sonub-border);
	border-inline-start: 3px solid var(--sonub-accent);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-accent-soft);
	color: var(--sonub-ink);
	line-height: 1.75;
}

.sonub-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	margin-inline: auto;
	max-inline-size: 32rem;
	padding: 3rem 2rem;
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-panel);
	background: var(--sonub-surface);
	box-shadow: var(--sonub-shadow-card);
	text-align: center;
}
.sonub-empty-state h1 { margin: 0; font-size: calc(clamp(1.5rem, 2.2vw, 2rem) * var(--wa-font-size-scale, 1)); }
.sonub-empty-state p { margin: 0; color: var(--sonub-muted); line-height: 1.8; }
.sonub-empty-state .sonub-icon-tile { inline-size: 4rem; block-size: 4rem; font-size: calc(1.75rem * var(--wa-font-size-scale, 1)); }

/* 준비 중 화면 */
.wip { display: grid; place-content: center; min-block-size: 60vh; }
.wip-tag {
	padding: 0.15rem 0.75rem;
	border-radius: 999px;
	background: var(--sonub-subtle);
	color: var(--sonub-muted);
	font-size: calc(0.8rem * var(--wa-font-size-scale, 1));
	font-weight: 600;
}

.sonub-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 599px) {
	.sonub-page h1 { font-size: calc(1.8rem * var(--wa-font-size-scale, 1)); }
	.sonub-page-header { padding-block-end: 1.5rem; }
	.sonub-control { font-size: calc(1rem * var(--wa-font-size-scale, 1)); }
	.sonub-card-layout { padding: 1.25rem; }
	.sonub-empty-state { padding: 2rem 1.25rem; }
}
:lang(ur) .sonub-page :is(h1, h2, h3, h4),
:lang(ur) :is(.sonub-eyebrow, .sonub-button, .sonub-tab) {
	line-height: 2;
	letter-spacing: 0;
}

/* ── 도표 색 — data-dg-tone 이 고르고 컴포넌트는 --dg-* 만 쓴다 ─── */
[data-dg-tone] {
	--dg-fill: var(--wa-color-brand-fill-loud);
	--dg-soft: var(--wa-color-brand-fill-quiet);
	--dg-border: var(--wa-color-brand-border-normal);
	--dg-ink: var(--wa-color-brand-on-quiet);
	--dg-on-fill: var(--wa-color-brand-on-loud);
}
[data-dg-tone='success'] {
	--dg-fill: var(--wa-color-success-fill-loud);
	--dg-soft: var(--wa-color-success-fill-quiet);
	--dg-border: var(--wa-color-success-border-normal);
	--dg-ink: var(--wa-color-success-on-quiet);
	--dg-on-fill: var(--wa-color-success-on-loud);
}
[data-dg-tone='warning'] {
	--dg-fill: var(--wa-color-warning-fill-loud);
	--dg-soft: var(--wa-color-warning-fill-quiet);
	--dg-border: var(--wa-color-warning-border-normal);
	--dg-ink: var(--wa-color-warning-on-quiet);
	--dg-on-fill: var(--wa-color-warning-on-loud);
}
[data-dg-tone='danger'] {
	--dg-fill: var(--wa-color-danger-fill-loud);
	--dg-soft: var(--wa-color-danger-fill-quiet);
	--dg-border: var(--wa-color-danger-border-normal);
	--dg-ink: var(--wa-color-danger-on-quiet);
	--dg-on-fill: var(--wa-color-danger-on-loud);
}
[data-dg-tone='neutral'] {
	--dg-fill: var(--wa-color-text-quiet);
	--dg-soft: var(--wa-color-surface-lowered);
	--dg-border: var(--wa-color-surface-border);
	--dg-ink: var(--wa-color-text-normal);
	--dg-on-fill: var(--wa-color-surface-default);
}
/* 세 난이도 구간 — 초록 · 파랑 · 보라. 채움색은 아이콘·막대에만, 글자는 본문색. */
[data-dg-tone='beginner'],
[data-dg-tone='intermediate'],
[data-dg-tone='advanced'] {
	--dg-soft: color-mix(in srgb, var(--dg-fill) 13%, var(--wa-color-surface-default));
	--dg-border: color-mix(in srgb, var(--dg-fill) 42%, var(--wa-color-surface-border));
	--dg-ink: var(--wa-color-text-normal);
	--dg-on-fill: #fff;
}
[data-dg-tone='beginner'] { --dg-fill: #16a34a; }
[data-dg-tone='intermediate'] { --dg-fill: #2563eb; }
[data-dg-tone='advanced'] { --dg-fill: #7c3aed; }

/* 짧은 라벨의 줄바꿈 — 한국어는 어절을 지키고, 중국어·일본어는 기본 규칙 */
[data-dg-text] { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ja) [data-dg-text],
:lang(zh) [data-dg-text] { word-break: normal; }

/* 진행 방향 화살표는 오른쪽→왼쪽 언어에서 뒤집는다 */
[dir='rtl'] .dg-flip { transform: scaleX(-1); }

/* ── 도표: 순서도 <x-diagram.flow-steps> ──────────── */
.dg-flow { display: grid; gap: var(--wa-space-m); margin: 0; container-type: inline-size; min-inline-size: 0; }
.dg-flow figcaption,
.dg-bars figcaption,
.dg-stairs figcaption {
	margin-block-end: var(--wa-space-s);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
}
.dg-flow-list { display: flex; margin: 0; padding: 0; list-style: none; }
.dg-flow > figcaption { margin-block: 0; }
.dg-flow-item { flex: 1 1 0; min-inline-size: 0; display: flex; align-items: stretch; }
.dg-flow-arrow {
	flex: none;
	align-self: center;
	inline-size: 1.4rem;
	block-size: 0.8rem;
	margin-inline: 0.2rem;
	background: var(--wa-color-text-quiet);
	opacity: 0.6;
	mask: var(--dg-arrow) center / contain no-repeat;
}
[dir='rtl'] .dg-flow-arrow { transform: scaleX(-1); }
.dg-flow-node {
	flex: 1 1 0;
	min-inline-size: 0;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: var(--wa-space-m);
	padding: var(--wa-space-m);
	border: 1px solid var(--dg-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
	text-align: center;
}
.dg-flow-icon {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: 50%;
	background: var(--wa-color-surface-default);
	color: var(--dg-fill);
	font-size: calc(1.1rem * var(--wa-font-size-scale, 1));
	box-shadow: 0 0 0 1px var(--dg-border);
}
.dg-flow-n {
	position: absolute;
	inset-block-start: -0.35rem;
	inset-inline-end: -0.45rem;
	display: grid;
	place-items: center;
	min-inline-size: 1.2rem;
	block-size: 1.2rem;
	padding-inline: 0.2rem;
	border-radius: 999px;
	background: var(--dg-fill);
	color: var(--dg-on-fill);
	font-size: calc(0.68rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-bold);
	line-height: 1;
}
.dg-flow-text { display: grid; gap: 0.15rem; min-inline-size: 0; }
.dg-flow-label { color: var(--wa-color-text-normal); font-size: var(--wa-font-size-m); font-weight: var(--wa-font-weight-semibold); line-height: 1.5; }
.dg-flow-sub { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); line-height: 1.65; }
.dg-flow-loop {
	display: inline-flex;
	justify-self: start;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.3rem 0.8rem;
	border: 1px dashed var(--dg-border);
	border-radius: 999px;
	color: var(--dg-ink);
	font-size: calc(0.82rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-semibold);
}
/* 좁은 폭: 세로로 눕힌다. 칸 수가 많을수록 더 넓은 폭에서 바꾼다. */
@container (max-width: 26rem) {
	.dg-flow[data-size='s'] :is(.dg-flow-list, .dg-flow-item) { flex-direction: column; }
	.dg-flow[data-size='s'] .dg-flow-arrow { transform: rotate(90deg); margin-block: var(--wa-space-xs); }
	.dg-flow[data-size='s'] .dg-flow-node { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: start; }
}
@container (max-width: 38rem) {
	.dg-flow[data-size='m'] :is(.dg-flow-list, .dg-flow-item) { flex-direction: column; }
	.dg-flow[data-size='m'] .dg-flow-arrow { transform: rotate(90deg); margin-block: var(--wa-space-xs); }
	.dg-flow[data-size='m'] .dg-flow-node { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: start; }
}
@container (max-width: 50rem) {
	.dg-flow[data-size='l'] :is(.dg-flow-list, .dg-flow-item) { flex-direction: column; }
	.dg-flow[data-size='l'] .dg-flow-arrow { transform: rotate(90deg); margin-block: var(--wa-space-xs); }
	.dg-flow[data-size='l'] .dg-flow-node { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: start; }
}

/* ── 도표: 난이도 계단 <x-diagram.level-stairs> ────── */
.dg-stairs { display: grid; gap: var(--wa-space-m); margin: 0; container-type: inline-size; min-inline-size: 0; }
.dg-stairs figcaption { margin: 0; }
.dg-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.dg-legend li { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
.dg-legend strong { color: var(--wa-color-text-normal); font-weight: var(--wa-font-weight-semibold); }
.dg-swatch { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 0.2rem; background: var(--dg-fill); }
.dg-stair-list { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
/* 이름이 여러 줄이어도 막대의 바닥·아이콘·이름 시작선을 각각 맞춘다. */
.dg-stair { display: grid; grid-template-rows: subgrid; grid-row: span 3; min-inline-size: 0; }
.dg-stair a { display: grid; grid-template-rows: subgrid; grid-row: span 3; justify-items: center; gap: 0.35rem; color: inherit; text-decoration: none; }
.dg-stair-bar {
	position: relative;
	align-self: end;
	display: grid;
	align-content: start;
	justify-items: center;
	inline-size: 100%;
	block-size: calc(2.4rem + (var(--level, 1) - 1) * 1.05rem);
	overflow: hidden;
	border: 1px solid var(--dg-border);
	border-radius: 0.7rem 0.7rem 0.3rem 0.3rem;
	background: var(--dg-soft);
	transition: transform var(--sonub-motion), background-color var(--sonub-motion);
}
.dg-stair-score {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--pct, 0%);
	background: color-mix(in srgb, var(--dg-fill) 55%, transparent);
}
.dg-stair-n {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	margin-block-start: 0.35rem;
	border-radius: 50%;
	background: var(--dg-fill);
	color: var(--dg-on-fill);
	font-size: calc(0.78rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-bold);
}
.dg-stair a:hover .dg-stair-bar,
.dg-stair a:focus-visible .dg-stair-bar {
	transform: translateY(-4px);
	background: color-mix(in srgb, var(--dg-fill) 22%, var(--wa-color-surface-default));
}
.dg-stair a:focus-visible { outline: 2px solid var(--dg-fill); outline-offset: 3px; border-radius: 0.6rem; }
.dg-stair-icon { color: var(--dg-fill); font-size: calc(0.95rem * var(--wa-font-size-scale, 1)); }
.dg-stair-text { display: grid; align-self: start; justify-items: center; gap: 0.15rem; text-align: center; }
.dg-stair-title {
	color: var(--wa-color-text-normal);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.5;
}
.dg-stair-best {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	color: var(--dg-ink);
	font-size: var(--wa-font-size-s);
	font-variant-numeric: tabular-nums;
	font-weight: var(--wa-font-weight-bold);
}
.dg-stair-best:empty { display: none; }
.dg-stair-best i { color: var(--wa-color-success-fill-loud); }
.dg-stair-meter { display: none; }
/* 다른 단계도 이동할 수 있다. 글자·점수는 읽히게 두고 막대만 낮춰 현재 범위를 구분한다. */
.dg-stair.dim .dg-stair-bar { background: var(--wa-color-surface-lowered); border-color: var(--wa-color-surface-border); }
.dg-stair.dim :is(.dg-stair-n, .dg-stair-icon) { color: var(--wa-color-text-quiet); }
.dg-stair.dim .dg-stair-n { background: var(--wa-color-surface-default); }
@container (max-width: 40rem) {
	.dg-stair-list { grid-template-columns: 1fr; gap: 0.4rem; }
	.dg-stair { display: block; grid-row: auto; }
	.dg-stair a {
		grid-template-columns: auto auto minmax(0, 1fr) 3.5rem;
		grid-template-rows: auto;
		grid-row: auto;
		align-items: center;
		justify-items: start;
		gap: 0.6rem;
		padding: 0.45rem 0.7rem;
		border: 1px solid var(--dg-border);
		border-inline-start: 4px solid var(--dg-fill);
		border-radius: var(--wa-border-radius-m);
		background: var(--wa-color-surface-default);
	}
	.dg-stair-bar { order: 1; inline-size: auto; block-size: auto; overflow: visible; border: 0; background: none; }
	.dg-stair.dim .dg-stair-bar { border: 0; background: none; }
	.dg-stair-score { display: none; }
	.dg-stair-n { margin: 0; }
	.dg-stair-icon { order: 2; }
	.dg-stair-text { order: 3; justify-items: start; text-align: start; }
	.dg-stair-meter {
		order: 4;
		display: block;
		inline-size: 100%;
		block-size: 0.4rem;
		border-radius: 999px;
		background: linear-gradient(to right, var(--dg-fill) calc(var(--level, 1) / 9 * 100%), var(--wa-color-surface-border) 0);
	}
	[dir='rtl'] .dg-stair-meter { background: linear-gradient(to left, var(--dg-fill) calc(var(--level, 1) / 9 * 100%), var(--wa-color-surface-border) 0); }
	.dg-stair a:hover .dg-stair-bar,
	.dg-stair a:focus-visible .dg-stair-bar { transform: none; background: none; }
}

/* ── 도표: 단계 레일 <x-diagram.step-rail> ─────────── */
.dg-rail { display: grid; gap: var(--wa-space-m); min-inline-size: 0; container-type: inline-size; }
.dg-rail-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 여섯 칸 이하는 한 줄, 그보다 많으면 네 칸씩. 좁은 본문은 실제 폭으로 열 수를 정한다. */
.dg-rail-list:not(:has(> li:nth-child(7))) { grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr)); }
@container (max-width: 40rem) {
	.dg-rail-list { grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); }
}
.dg-rail-list li { min-inline-size: 0; }
.dg-rail-step {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.4rem;
	inline-size: 100%;
	min-inline-size: 0;
	block-size: 100%;
	padding: 0.7rem 0.4rem 0.75rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-normal);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--sonub-motion), background-color var(--sonub-motion), transform var(--sonub-motion);
}
.dg-rail-step:hover { border-color: var(--dg-border); background: var(--dg-soft); }
.dg-rail-step[aria-expanded='true'] { border-color: var(--dg-fill); background: var(--dg-soft); box-shadow: 0 0 0 1px var(--dg-fill) inset; }
.dg-rail-step:focus-visible { outline: 2px solid var(--dg-fill); outline-offset: 2px; }
.dg-rail-top { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--dg-fill); font-size: calc(1.05rem * var(--wa-font-size-scale, 1)); }
.dg-rail-n {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.35rem;
	block-size: 1.35rem;
	padding-inline: 0.25rem;
	border-radius: 999px;
	background: var(--dg-fill);
	color: var(--dg-on-fill);
	font-size: calc(0.72rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-bold);
	line-height: 1;
}
.dg-rail-title,
.dg-rail-badge { max-inline-size: 100%; white-space: normal; }
.dg-rail-title { font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-semibold); line-height: 1.5; }
.dg-rail-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.05rem 0.45rem;
	border: 1px dashed var(--dg-border);
	border-radius: 999px;
	color: var(--dg-ink);
	font-size: calc(0.68rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.5;
}
.dg-rail-panel {
	padding: var(--wa-space-l);
	border: 1px solid var(--dg-border);
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}
.dg-rail-head { display: flex; align-items: center; gap: 0.5rem; color: var(--dg-fill); }
.dg-rail-head h3 { margin: 0; color: var(--wa-color-text-normal); font-size: calc(1.05rem * var(--wa-font-size-scale, 1)); font-weight: var(--wa-font-weight-semibold); }
.dg-rail-panel > p { margin: var(--wa-space-s) 0 0; color: var(--wa-color-text-quiet); font-size: calc(0.93rem * var(--wa-font-size-scale, 1)); line-height: 1.75; }

/* ── 도표: 막대 그래프 <x-diagram.bar-chart> ───────── */
.dg-bars { margin: 0; container-type: inline-size; min-inline-size: 0; }
.dg-bars figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dg-example {
	padding: 0.05rem 0.5rem;
	border: 1px dashed var(--wa-color-warning-border-normal);
	border-radius: 999px;
	color: var(--wa-color-warning-on-quiet);
	background: var(--wa-color-warning-fill-quiet);
	font-size: calc(0.72rem * var(--wa-font-size-scale, 1));
}
.dg-bar-list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.dg-bar-row { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) minmax(3.2rem, auto); align-items: center; gap: 0.75rem; }
.dg-bar-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-inline-size: 0;
	color: var(--wa-color-text-normal);
	font-size: calc(0.88rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-semibold);
}
.dg-bar-label i { flex: none; color: var(--dg-fill); }
.dg-bar-track { display: block; block-size: 0.85rem; overflow: hidden; border-radius: 999px; background: var(--wa-color-surface-border); }
.dg-bar-fill { display: block; inline-size: var(--pct, 0%); block-size: 100%; border-radius: inherit; background: var(--dg-fill); }
.dg-bar-value {
	color: var(--wa-color-text-normal);
	font-size: calc(0.85rem * var(--wa-font-size-scale, 1));
	font-variant-numeric: tabular-nums;
	font-weight: var(--wa-font-weight-semibold);
	text-align: end;
	white-space: nowrap;
}
.dg-bar-label,
.dg-bar-value { unicode-bidi: plaintext; } /* ar·ur 에서 "4 B · 32 bit" 같은 값이 뒤집혀 보이지 않게 */
.dg-bar-note { margin: var(--wa-space-s) 0 0; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); line-height: 1.75; }
@container (max-width: 24rem) {
	.dg-bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.6rem; }
	.dg-bar-label { grid-column: 1 / -1; }
}

/* ── 도표: 비교표 <x-diagram.data-table> ───────────── */
.dg-table-wrap {
	position: relative; /* 표 안의 낭독용 글자(.sonub-sr, absolute)가 스크롤 틀 밖으로 나가 좁은 rtl 화면을 넘치게 하지 않게 */
	max-inline-size: 100%;
	overflow-x: auto;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}
.dg-table-wrap:focus-visible { outline: 2px solid var(--wa-color-brand-fill-loud); outline-offset: 2px; }
.dg-table { inline-size: 100%; border-collapse: collapse; font-size: var(--wa-font-size-m); }
.dg-table caption {
	padding: 0.75rem 1rem 0.5rem;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	text-align: start;
	caption-side: top;
}
.dg-table :is(th, td) {
	padding: var(--wa-space-s) var(--wa-space-m);
	border-block-start: 1px solid var(--wa-color-surface-border);
	text-align: start;
	vertical-align: middle;
}
.dg-table thead th {
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	white-space: normal;
}
.dg-table tbody th { color: var(--wa-color-text-normal); font-weight: var(--wa-font-weight-semibold); min-inline-size: 7rem; }
.dg-table td[data-dg-tone] { background: var(--dg-soft); }
.dg-table :is(.dg-head, .dg-cell) { display: inline-flex; align-items: center; gap: 0.4rem; line-height: 1.65; }
.dg-table :is(.dg-head, .dg-cell) > i { flex: none; color: var(--wa-color-brand-fill-loud); }
.dg-cell-content { min-inline-size: 0; }
.dg-cell-content code { white-space: normal; overflow-wrap: anywhere; }
.dg-cell-note { display: block; margin-block-start: var(--wa-space-2xs); color: var(--sonub-muted); font-size: var(--wa-font-size-s); }
/* 행·열의 접근성 관계를 유지하며 좁은 비교표를 행별 카드로 보여 준다. */
.dg-table-cards { container: table-cards / inline-size; border: 0; background: transparent; }
.dg-table-cards .dg-table { border: 1px solid var(--sonub-border); border-collapse: separate; border-spacing: 0; border-radius: var(--wa-border-radius-l); overflow: hidden; }
.dg-table-cards .dg-table thead th { border-block-start: 0; }
.dg-table-cards .dg-cell-label { display: none; }
@container table-cards (max-width: 38rem) {
	.dg-table-cards .dg-table { display: block; border: 0; }
	.dg-table-cards .dg-table caption:not(.sonub-sr) { display: block; inline-size: 100%; padding-inline: 0; margin-block-end: var(--wa-space-s); }
	.dg-table-cards .dg-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.dg-table-cards .dg-table tbody { display: grid; gap: var(--wa-space-m); }
	.dg-table-cards .dg-table tbody tr { display: flex; flex-wrap: wrap; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); overflow: hidden; background: var(--sonub-surface); }
	.dg-table-cards .dg-table tbody th { flex: 0 0 100%; min-inline-size: 0; border: 0; background: var(--wa-color-surface-lowered); }
	/* 열을 모두 한 줄에 압축하지 않고 이름·값을 한 쌍씩 읽는다. 긴 번역도 같은 열에서 비교한다. */
	.dg-table-cards .dg-table td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; gap: var(--wa-space-m); flex: 1 1 100%; min-inline-size: 0; text-align: start; }
	.dg-table-cards .dg-cell-label { display: block; color: var(--sonub-muted); font-size: var(--wa-font-size-s); overflow-wrap: break-word; }
	.dg-table-cards .dg-cell-label:lang(ko) { word-break: keep-all; }
	.dg-table-cards .dg-cell { min-inline-size: 0; }
}
.dg-mark {
	display: inline-grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	background: var(--dg-soft);
	color: var(--dg-fill);
	font-size: calc(0.8rem * var(--wa-font-size-scale, 1));
}

/* ── 도표: 칩 흐름 <x-diagram.chip-flow> ───────────── */
.dg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.dg-chips li { display: inline-flex; align-items: center; gap: 0.35rem; }
.dg-chips[data-mode='arrow'] li + li::before {
	content: '';
	inline-size: 0.9rem;
	block-size: 0.55rem;
	background: var(--wa-color-text-quiet);
	opacity: 0.55;
	mask: var(--dg-arrow) center / contain no-repeat;
}
[dir='rtl'] .dg-chips[data-mode='arrow'] li + li::before { transform: scaleX(-1); }
.dg-chip {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--dg-border);
	border-radius: 999px;
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-size: calc(0.8rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.45;
}
.dg-chips .last .dg-chip { border-color: var(--dg-fill); background: var(--dg-fill); color: var(--dg-on-fill); }
.dg-nest { margin: 0; padding: 0; list-style: none; }
.dg-nest li {
	display: grid;
	gap: 0.3rem;
	padding: 0.35rem 0.55rem 0.5rem;
	border: 1px dashed var(--dg-border);
	border-radius: 0.8rem;
	background: color-mix(in srgb, var(--dg-soft) 70%, transparent);
}
.dg-nest .dg-nest { margin-block-start: 0.1rem; }
.dg-nest .dg-nest li { background: var(--dg-soft); }
.dg-nest .dg-nest .dg-nest li { border-style: solid; border-color: var(--dg-fill); }
.dg-nest-label { color: var(--dg-ink); font-size: calc(0.78rem * var(--wa-font-size-scale, 1)); font-weight: var(--wa-font-weight-semibold); line-height: 1.35; }

/* ── 도표: 자세히 접기 <x-diagram.more> ────────────── */
.dg-more { border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); background: var(--wa-color-surface-default); }
.dg-more summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	color: var(--wa-color-text-quiet);
	font-size: calc(0.86rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-semibold);
	list-style: none;
	cursor: pointer;
}
.dg-more summary::-webkit-details-marker { display: none; }
.dg-more summary:hover { color: var(--wa-color-brand-on-quiet); }
.dg-more summary:focus-visible { outline: 2px solid var(--wa-color-brand-fill-loud); outline-offset: 2px; border-radius: var(--wa-border-radius-m); }
.dg-more summary::after { flex: none; margin-inline-start: auto; }
.dg-more-body { display: grid; gap: 0.6rem; padding: 0 0.9rem 0.9rem; color: var(--wa-color-text-quiet); font-size: calc(0.92rem * var(--wa-font-size-scale, 1)); line-height: 1.75; }
.dg-more-body p { margin: 0; }

/* ── 도표: 금지 표시 <x-diagram.ban-icon> ──────────── */
.dg-ban {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 1.7rem;
	block-size: 1.7rem;
	border-radius: 50%;
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-quiet);
	font-size: calc(0.8rem * var(--wa-font-size-scale, 1));
}
.dg-ban i { grid-area: 1 / 1; }
.dg-ban .dg-ban-slash { color: var(--wa-color-danger-fill-loud); font-size: calc(1.45rem * var(--wa-font-size-scale, 1)); }

/* ── 인공지능 학습 순서 <x-ai.path> ─────────────────── */
.ai-path { min-inline-size: 0; }
.ai-path ol {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	margin: 0;
	padding: 0.15rem 0.1rem 0.35rem;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}
.ai-path li { display: flex; align-items: center; flex: none; gap: 0.2rem; }
.ai-path li + li::before {
	content: '';
	inline-size: 1rem;
	block-size: 0.6rem;
	background: var(--wa-color-text-quiet);
	opacity: 0.45;
	mask: var(--dg-arrow) center / contain no-repeat;
}
[dir='rtl'] .ai-path li + li::before { transform: scaleX(-1); }
.ai-path a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding-block: 0.3rem;
	padding-inline: 0.35rem 0.7rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 999px;
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-quiet);
	font-size: calc(0.8rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--sonub-motion), color var(--sonub-motion);
}
.ai-path a:hover { border-color: var(--wa-color-brand-border-normal); color: var(--wa-color-brand-on-quiet); }
.ai-path a.on { border-color: var(--wa-color-brand-fill-loud); background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
.ai-path-n {
	display: inline-grid;
	place-items: center;
	inline-size: 1.3rem;
	block-size: 1.3rem;
	border-radius: 50%;
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-quiet);
	font-size: calc(0.7rem * var(--wa-font-size-scale, 1));
	font-weight: var(--wa-font-weight-bold);
}
.ai-path a.on .ai-path-n { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }

/* ── 코드 편집기 (public/js/code-editor.js 가 CodeMirror 를 붙이는 자리) ─── */
.code-editor {
	min-block-size: 12rem;
	overflow: hidden;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
	font-size: calc(0.9rem * var(--wa-font-size-scale, 1));
	text-align: start;
	direction: ltr; /* 코드는 오른쪽→왼쪽 언어에서도 왼쪽부터 쓴다 */
}
.code-editor .cm-editor { block-size: 100%; }
.code-editor .cm-editor.cm-focused { outline: 2px solid var(--wa-color-brand-fill-loud); outline-offset: -2px; }
.code-editor .cm-scroller { min-block-size: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code-editor .cm-editor { color: var(--sonub-ink); background: var(--sonub-canvas); }
.code-editor .cm-editor .cm-gutters { color: var(--sonub-muted); background: var(--sonub-subtle); border-color: var(--sonub-border); }
.code-editor .cm-editor :is(.cm-activeLine, .cm-activeLineGutter) { background: var(--wa-color-brand-fill-quiet); }
.code-editor .cm-editor .cm-cursor { border-inline-start-color: var(--sonub-ink); }
.code-editor .cm-editor .cm-selectionBackground { background: var(--wa-color-brand-fill-quiet); }
.code-editor .cm-editor :is(.cm-tooltip, .cm-panels) { color: var(--sonub-ink); background: var(--sonub-surface); border-color: var(--sonub-border); }
.code-editor .cm-editor .cm-panels { flex-shrink: 0; max-block-size: 65%; overflow: auto; overscroll-behavior: contain; }
.code-editor .cm-editor .cm-tooltip-autocomplete { max-inline-size: min(30rem, calc(100vw - 2rem)); }
.code-editor .cm-editor .cm-tooltip-autocomplete > ul { max-block-size: min(20rem, 50vh); max-inline-size: 100%; }
.code-editor .cm-editor .cm-tooltip-autocomplete > ul > li { min-block-size: 2.75rem; padding: 0.6rem; }
.code-editor .cm-editor .cm-tooltip-autocomplete > ul > li[aria-selected] { color: var(--sonub-on-accent); background: var(--sonub-accent); }
.code-editor .cm-panel:is(.cm-search, .cm-goto-line) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); padding: var(--wa-space-s); font-family: var(--wa-font-family-body); font-size: calc(0.85rem * var(--wa-font-size-scale, 1)); line-height: 1.5; }
.code-editor .cm-panel .cm-textfield { flex: 1 1 12rem; min-inline-size: 0; max-inline-size: 100%; min-block-size: 2.75rem; font: inherit; color: var(--sonub-ink); background: var(--sonub-canvas); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-s); }
.code-editor .cm-panel .cm-button { min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0.4rem 0.65rem; font: inherit; color: var(--sonub-ink); background: var(--sonub-subtle); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-s); }
.code-editor .cm-panel.cm-search label { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); min-block-size: 2.75rem; margin: 0; color: var(--sonub-ink); }
.code-editor .cm-panel.cm-search label input { flex: none; }
.code-editor .cm-panel.cm-search br { flex-basis: 100%; block-size: 0; }
.code-editor .cm-panel.cm-search [name='search'] { order: -2; flex-basis: 9rem; }
.code-editor .cm-panel.cm-search [name='close'] { position: static; order: -1; flex: none; inline-size: 2.75rem; min-block-size: 2.75rem; color: var(--sonub-ink); background: var(--sonub-subtle); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-s); }
.code-editor .cm-panel.cm-goto-line :is(form, label) { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--wa-space-xs); min-inline-size: 0; margin: 0; }
.code-editor .cm-panel.cm-goto-line .cm-textfield { flex-basis: 5rem; inline-size: 5rem; }
.code-editor .cm-panel .cm-dialog-close { position: static; flex: none; inline-size: 2.75rem; min-block-size: 2.75rem; color: var(--sonub-ink); background: var(--sonub-subtle); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-s); }
[dir='rtl'] .code-editor .cm-panel { direction: rtl; }
.code-editor .cm-panel .cm-textfield { direction: ltr; }
/* 로컬 번들의 문법 색을 테마별로 읽기 쉽게 보정한다. 원문·기호별 색 구분은 유지한다. */
.code-editor .cm-line > span { filter: brightness(0.85); }
[data-sonub-theme='dark'] .code-editor .cm-line > span { filter: invert(1) hue-rotate(180deg); }
@media (forced-colors: active) {
	.code-editor .cm-line > span,
	[data-sonub-theme='dark'] .code-editor .cm-line > span { filter: none; }
}

/* Web Awesome 기본 스타일(native.css)은 모든 li 에 들여쓰기(margin-inline-start)를 준다 — 공용 도표 목록에서는 없앤다 */
:is(.dg-flow-list, .dg-stair-list, .dg-rail-list, .dg-bar-list, .dg-legend, .dg-chips, .dg-nest, .ai-path ol) > li { margin: 0; }
/* 글머리표 없는 목록(role="list" — 카드·칩·단계 묶음)도 같다. 그 들여쓰기 때문에 카드 묶음이 절 제목보다 20px 밀리고
   격자 칸이 좁아졌다(/about·/learn/ai·/guide/kids, 2026-10-24 디자인 점검). :where 라 화면 CSS 가 일부러 준 들여쓰기는 그대로 이긴다 */
:where(ul, ol)[role='list'] > :where(li) { margin-inline-start: 0; }

/* ── 개념 그림 (x-ui.figure) — 글로 설명하기 어려운 개념을 그림 한 장 + 캡션으로 ─── */
.sonub-figure {
	display: grid;
	gap: var(--sonub-space-2);
	margin: var(--sonub-space-4) 0;
	max-inline-size: 40rem;
}
.sonub-figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	box-shadow: var(--sonub-shadow-card);
}
.sonub-figure.is-diagram { container-type: inline-size; }
.sonub-figure.is-diagram img {
	box-sizing: border-box;
	padding: clamp(var(--wa-space-m), 4cqi, var(--wa-space-xl));
}
.sonub-figure figcaption {
	padding-inline: var(--sonub-space-2);
	color: var(--sonub-muted);
	font-size: var(--wa-font-size-s);
	line-height: 1.7;
}

/* ── 문단 속 목록(x-ui.rich-text) ─────────────────
 * 번역 문장의 줄머리 "- " 를 목록으로 그린 것 — 한 문장에 이어 쓰던 나열을 한 줄에 하나씩 읽게 한다.
 */
.rich-list {
	display: grid;
	gap: var(--wa-space-2xs);
	margin: 0;
	padding-inline-start: var(--wa-space-l);
	line-height: 1.75;
}
.rich-list li::marker {
	color: var(--wa-color-brand-on-quiet);
}

/* ── 어디서나 실습 터미널(x-widget.terminal.*) ─────────────────
 * [터미널에서 실습] 단추와 오른쪽 터미널 서랍(SONUB-SSOT.md 23절 "어디서나 실습 터미널").
 * 터미널 색은 사이트 테마를 따른다 — public/js/terminal.js 가 .sonub-terminal-screen 의 색과 두 변수를 읽어 xterm 에 넘긴다.
 */
.sonub-terminal-run {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-block-size: 2.5rem;
	padding-inline: 0.85rem;
	border: 1px solid color-mix(in srgb, var(--sonub-accent) 45%, var(--sonub-border));
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
	font: inherit;
	font-size: calc(0.82rem * var(--wa-font-size-scale, 1));
	font-weight: 650;
	cursor: pointer;
	transition: border-color var(--sonub-motion), background var(--sonub-motion);
}
.sonub-terminal-run:hover {
	border-color: var(--sonub-accent);
	background: color-mix(in srgb, var(--sonub-accent) 18%, var(--sonub-surface));
}
.sonub-terminal-run:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
.sonub-terminal-drawer {
	--size: min(54rem, 100vw);
}
.sonub-terminal-drawer::part(body) {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-s);
	background: var(--wa-color-surface-default);
}
.sonub-terminal-note {
	margin: 0;
	color: var(--sonub-muted);
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
}
.sonub-terminal-status {
	margin: 0;
	font-size: var(--wa-font-size-s);
	font-weight: 600;
}
.sonub-terminal-screen {
	--sonub-terminal-accent: var(--wa-color-brand-on-quiet);
	--sonub-terminal-selection: var(--wa-color-brand-fill-quiet);
	flex: 1 1 auto;
	min-block-size: 22rem;
	padding: var(--wa-space-s);
	overflow: hidden;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-normal);
}
.sonub-terminal-screen .xterm {
	block-size: 100%;
}
/*
 * 터미널 한글 — 한글은 두 칸을 차지하는데, 고정폭 글꼴(Menlo·SF Mono·Consolas)에 한글이 없어 대신 쓰이는 시스템 한글 글꼴은
 * 두 칸보다 좁아 글자마다 틈이 벌어졌다("소 너 브  코 드", 15px 에서 두 칸 18px · 한글 13px, 2026-10-24 운영 실측).
 * 기기에 이미 있는 한글 글꼴(local — 내려받지 않는다)을 한글 범위에만 조금 키워 두 칸을 거의 채운다. 글꼴 순서는 public/js/shell/screen.js
 */
@font-face {
	font-family: 'Sonub Term Hangul Apple';
	src: local('AppleSDGothicNeo-Regular'), local('Apple SD Gothic Neo Regular');
	font-weight: 400;
	unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
	size-adjust: 125%;
}
@font-face {
	font-family: 'Sonub Term Hangul Apple';
	src: local('AppleSDGothicNeo-Bold'), local('Apple SD Gothic Neo Bold');
	font-weight: 700;
	unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
	size-adjust: 125%;
}
@font-face {
	font-family: 'Sonub Term Hangul Windows';
	src: local('Malgun Gothic'), local('MalgunGothic'), local('MalgunGothicRegular');
	font-weight: 400;
	unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
	size-adjust: 115%;
}
@font-face {
	font-family: 'Sonub Term Hangul Windows';
	src: local('Malgun Gothic Bold'), local('MalgunGothicBold'), local('MalgunGothic-Bold');
	font-weight: 700;
	unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
	size-adjust: 115%;
}
@font-face {
	font-family: 'Sonub Term Hangul Noto';
	src: local('NotoSansCJKkr-Regular'), local('Noto Sans CJK KR Regular'), local('NotoSansKR-Regular'), local('Noto Sans KR Regular'), local('NotoSansCJKjp-Regular');
	font-weight: 400;
	unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
	size-adjust: 118%;
}
@font-face {
	font-family: 'Sonub Term Hangul Noto';
	src: local('NotoSansCJKkr-Bold'), local('Noto Sans CJK KR Bold'), local('NotoSansKR-Bold'), local('Noto Sans KR Bold'), local('NotoSansCJKjp-Bold');
	font-weight: 700;
	unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
	size-adjust: 118%;
}
/* xterm.css 는 스크롤 칸을 검게 칠한다 — 줄을 다 채우고 남는 한 줄 미만의 틈이 화면 맨 아래 검은 막대로 보였다. 화면 칸 색을 그대로 비춘다 */
.sonub-terminal-screen .xterm .xterm-viewport {
	background-color: transparent;
}
.sonub-terminal-drawer .sonub-terminal-keys,
.sonub-lab .sonub-terminal-keys {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-2xs);
	direction: ltr;
}
.sonub-terminal-drawer .sonub-terminal-keys button,
.sonub-lab .sonub-terminal-keys button {
	min-block-size: 2.5rem;
	min-inline-size: 2.75rem;
	padding: var(--wa-space-xs) var(--wa-space-s);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-surface);
	color: var(--sonub-ink);
	font: inherit;
	font-family: var(--wa-font-family-code);
	font-size: calc(0.82rem * var(--wa-font-size-scale, 1));
	cursor: pointer;
}
.sonub-terminal-drawer .sonub-terminal-keys button:focus-visible,
.sonub-lab .sonub-terminal-keys button:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
@media (max-width: 599px) {
	.sonub-terminal-run span {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.sonub-terminal-screen {
		min-block-size: 18rem;
		padding: var(--wa-space-2xs);
	}
}
@media (prefers-reduced-motion: reduce) {
	.sonub-terminal-run {
		transition: none;
	}
}