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

/* ── 토큰 ─────────────────────────────────────── */
:root {
	--pes-font: var(--wa-font-family-body);
	--pes-canvas: var(--wa-color-surface-default);
	--pes-surface: var(--wa-color-surface-raised);
	--pes-subtle: var(--wa-color-surface-lowered);
	--pes-border: var(--wa-color-surface-border);
	--pes-ink: var(--wa-color-text-normal);
	--pes-muted: var(--wa-color-text-quiet);
	--pes-accent: var(--wa-color-brand-fill-loud);
	--pes-accent-hover: color-mix(in srgb, var(--wa-color-brand-fill-loud) 86%, #000);
	--pes-accent-soft: var(--wa-color-brand-fill-quiet);
	--pes-accent-ink: var(--wa-color-brand-on-quiet);
	--pes-on-accent: var(--wa-color-brand-on-loud);
	--pes-success: var(--wa-color-success-on-quiet);
	--pes-success-soft: var(--wa-color-success-fill-quiet);
	--pes-warning: var(--wa-color-warning-on-quiet);
	--pes-warning-soft: var(--wa-color-warning-fill-quiet);
	--pes-danger: var(--wa-color-danger-on-quiet);
	--pes-danger-soft: var(--wa-color-danger-fill-quiet);
	--pes-info: var(--wa-color-brand-on-quiet);
	--pes-info-soft: var(--wa-color-brand-fill-quiet);
	--pes-radius-sm: var(--wa-border-radius-s);
	--pes-radius-control: var(--wa-border-radius-m);
	--pes-radius-card: var(--wa-border-radius-l);
	--pes-radius-panel: var(--wa-border-radius-xl, 1.5rem);
	--pes-space-1: var(--wa-space-2xs);
	--pes-space-2: var(--wa-space-xs);
	--pes-space-3: var(--wa-space-s);
	--pes-space-4: var(--wa-space-m);
	--pes-space-6: var(--wa-space-l);
	--pes-space-8: var(--wa-space-xl);
	--pes-space-12: var(--wa-space-2xl);
	--pes-reading-width: 54rem;
	--pes-form-width: 42rem;
	--pes-shadow-card: var(--wa-shadow-s);
	--pes-shadow-hover: var(--wa-shadow-m);
	--pes-shadow-overlay: var(--wa-shadow-l);
	--pes-motion: 160ms ease;
	--pes-motion-fast: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
	--pes-motion-medium: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
	--pes-motion-slow: 560ms cubic-bezier(0.16, 1, 0.3, 1);
	--pes-lift: translateY(-2px);
	--pes-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) {
	.pes-page *,
	.pes-page *::before,
	.pes-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

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

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

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

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

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

/* ── 버튼 · 입력 · 탭 · 알림 ─────────────────────── */
.pes-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(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	color: var(--pes-ink);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition:
		background-color var(--pes-motion),
		border-color var(--pes-motion),
		transform var(--pes-motion-fast);
}
.pes-button:not(:disabled):hover {
	border-color: var(--pes-accent);
	background: var(--pes-accent-soft);
	color: var(--pes-accent-ink);
	transform: var(--pes-lift);
}
.pes-button-primary { background: var(--pes-accent); border-color: transparent; color: var(--pes-on-accent); }
.pes-button-primary:not(:disabled):hover { background: var(--pes-accent-hover); color: var(--pes-on-accent); }
.pes-button:disabled { opacity: 0.5; cursor: not-allowed; }

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

.pes-tabs {
	display: flex;
	gap: 0.35rem;
	padding: 0.35rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-subtle);
	overflow-x: auto;
}
.pes-tab {
	min-block-size: 2.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--pes-radius-sm);
	background: transparent;
	color: var(--pes-muted);
	font: inherit;
	font-size: 0.87rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.pes-tab:is(.active, [aria-selected='true'], [aria-pressed='true'], [aria-current='page']) {
	background: var(--pes-surface);
	border-color: var(--pes-border);
	color: var(--pes-accent-ink);
	box-shadow: var(--pes-shadow-card);
}
.pes-tab:hover { color: var(--pes-accent-ink); }

/* ── 읽기 · 키보드 탐색 ───────────────────────────── */
.pes-page :is(p, li, dd) { line-height: 1.8; }
.pes-page :is(h1, h2, h3, h4, p, li, dd) { overflow-wrap: anywhere; }
.pes-page :is(h1, h2, h3, h4, section[id]) { scroll-margin-block-start: calc(var(--bar-height) + var(--wa-space-l)); }
.pes-page :is(a, button, summary):focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 3px;
}
.pes-page .pes-button { max-inline-size: 100%; white-space: normal; }
.pes-tabs { scrollbar-width: thin; }

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

.pes-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(--pes-border);
	border-radius: var(--pes-radius-panel);
	background: var(--pes-surface);
	box-shadow: var(--pes-shadow-card);
	text-align: center;
}
.pes-empty-state h1 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.pes-empty-state p { margin: 0; color: var(--pes-muted); line-height: 1.8; }
.pes-empty-state .pes-icon-tile { inline-size: 4rem; block-size: 4rem; font-size: 1.75rem; }

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

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

@media (max-width: 599px) {
	.pes-page h1 { font-size: 1.8rem; }
	.pes-page-header { padding-block-end: 1.5rem; }
	.pes-control { font-size: 1rem; }
	.pes-card-layout { padding: 1.25rem; }
	.pes-empty-state { padding: 2rem 1.25rem; }
}
:lang(ur) .pes-page :is(h1, h2, h3, h4),
:lang(ur) :is(.pes-eyebrow, .pes-button, .pes-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 { 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: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
}
.dg-flow-list { display: flex; margin: 0; padding: 0; list-style: none; }
.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: 0.45rem;
	padding: 0.9rem 0.5rem;
	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: 1.1rem;
	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: 0.68rem;
	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: 0.88rem; font-weight: var(--wa-font-weight-semibold); line-height: 1.35; }
.dg-flow-sub { color: var(--wa-color-text-quiet); font-size: 0.76rem; line-height: 1.35; }
.dg-flow-loop {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: var(--wa-space-m) 0 0;
	padding: 0.3rem 0.8rem;
	border: 1px dashed var(--dg-border);
	border-radius: 999px;
	color: var(--dg-ink);
	font-size: 0.82rem;
	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: 0.15rem; }
	.dg-flow[data-size='s'] .dg-flow-node { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: start; padding: 0.6rem 0.8rem; }
}
@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: 0.15rem; }
	.dg-flow[data-size='m'] .dg-flow-node { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: start; padding: 0.6rem 0.8rem; }
}
@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: 0.15rem; }
	.dg-flow[data-size='l'] .dg-flow-node { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: start; padding: 0.6rem 0.8rem; }
}

/* ── 도표: 난이도 계단 <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; gap: 0.4rem; color: var(--wa-color-text-quiet); font-size: 0.8rem; }
.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)); align-items: end; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.dg-stair a { display: grid; justify-items: center; gap: 0.35rem; color: inherit; text-decoration: none; }
.dg-stair-bar {
	position: relative;
	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(--pes-motion), background-color var(--pes-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: 0.78rem;
	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: 0.95rem; }
.dg-stair-text { display: grid; justify-items: center; gap: 0.15rem; text-align: center; }
.dg-stair-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wa-color-text-normal);
	font-size: 0.72rem;
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.3;
}
.dg-stair-best {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	color: var(--dg-ink);
	font-size: 0.72rem;
	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 { opacity: 0.42; }
.dg-stair.dim:hover,
.dg-stair.dim:focus-within { opacity: 1; }
@container (max-width: 40rem) {
	.dg-stair-list { grid-template-columns: 1fr; gap: 0.4rem; }
	.dg-stair a {
		grid-template-columns: auto auto minmax(0, 1fr) 3.5rem;
		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-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-title { font-size: 0.85rem; -webkit-line-clamp: 2; line-clamp: 2; }
	.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(var(--cols, 4), minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
@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(--pes-motion), background-color var(--pes-motion), transform var(--pes-motion);
}
.dg-rail-step:hover { border-color: var(--dg-border); transform: translateY(-2px); }
.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: 1.05rem; }
.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: 0.72rem;
	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: 0.8rem; font-weight: var(--wa-font-weight-semibold); line-height: 1.35; }
.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: 0.68rem;
	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: 1.05rem; 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: 0.93rem; 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: 0.72rem;
}
.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: 0.88rem;
	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: 0.85rem;
	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: 0.8rem; line-height: 1.6; }
@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; /* 표 안의 낭독용 글자(.pes-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: 0.88rem; }
.dg-table caption {
	padding: 0.75rem 1rem 0.5rem;
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
	text-align: start;
	caption-side: top;
}
.dg-table :is(th, td) {
	padding: 0.6rem 0.9rem;
	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: 0.8rem;
	font-weight: var(--wa-font-weight-semibold);
	white-space: nowrap;
}
.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.4; }
.dg-table :is(.dg-head, .dg-cell) > i { flex: none; color: var(--wa-color-brand-fill-loud); }
.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: 0.8rem;
}

/* ── 도표: 칩 흐름 <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: 0.8rem;
	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: 0.78rem; 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: 0.86rem;
	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: 0.92rem; 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: 0.8rem;
}
.dg-ban i { grid-area: 1 / 1; }
.dg-ban .dg-ban-slash { color: var(--wa-color-danger-fill-loud); font-size: 1.45rem; }

/* ── 인공지능 학습 순서 <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: 0.8rem;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--pes-motion), color var(--pes-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: 0.7rem;
	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: 0.9rem;
	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 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* 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; }