/*
 * 가이드라인(/guide, /guide/{트랙}) — 이전 사이트 routes/guide/+page.svelte · components/guide/GuideTrack.svelte ·
 * guide/kids/KidsCurriculum.svelte · guide/kids/kids-diagrams.css 를 옮겼다.
 * 선택자는 .guide-hub · .guide · .kids-cur 아래로 좁히고, 어린이 도표는 kd- 접두어로 따로 둔다.
 * 방향이 있는 속성은 논리 속성만 쓴다(ar·ur). 가운데 맞춤(left: 50% + translate)만 방향과 관계없어 그대로 둔다.
 */

.guide-hub [hidden],
.guide [hidden] {
	display: none !important;
}

/* ── 허브 ─────────────────────────────────────── */
.guide-hub {
	display: grid;
	gap: var(--pes-space-8);
}
.guide-hub-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pes-space-6);
}
.guide-hub-title {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.guide-hub-preview {
	display: grid;
	gap: 0.45rem;
	margin: 0.5rem 0;
	padding-inline-start: 1.2rem;
	font-size: 0.88rem;
	color: var(--pes-muted);
}
.guide-hub-preview li::marker {
	color: var(--pes-accent-ink);
	font-weight: 650;
}
.guide-hub-preview .more {
	list-style: none;
}
@media (max-width: 650px) {
	.guide-hub-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── 트랙 ─────────────────────────────────────── */
.guide {
	--accent: #f59e0b;
	--accent-2: #ef4444;
	max-inline-size: 62rem;
	display: grid;
	gap: var(--wa-space-2xl);
}
/* 트랙별 강조색 — 같은 틀이지만 한눈에 어느 가이드인지 구분된다. */
.guide[data-track='ai'] {
	--accent: #3b82f6;
	--accent-2: #7c3aed;
}
.guide[data-track='it'] {
	--accent: #10b981;
	--accent-2: #0ea5e9;
}
.guide[data-track='work'] {
	--accent: #8b5cf6;
	--accent-2: #ec4899;
}
.guide h2 {
	margin: 0 0 var(--wa-space-m);
	font-size: var(--wa-font-size-xl);
	font-weight: var(--wa-font-weight-bold);
}

.guide-hero {
	gap: var(--wa-space-2xs);
}
.guide-hero .pes-eyebrow {
	color: var(--accent);
	text-transform: uppercase;
}
.guide-hero h1 {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.guide-tagline {
	margin: 0;
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-semibold);
}
.guide-hero .guide-intro {
	margin: 0;
	max-inline-size: 44rem;
	line-height: 1.75;
	color: var(--wa-color-text-quiet);
}
.guide-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-s);
	margin: var(--wa-space-s) 0 0;
}
.guide-facts > div {
	display: grid;
	gap: 2px;
	padding: var(--wa-space-xs) var(--wa-space-m);
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background-color: var(--wa-color-surface-raised);
}
.guide-facts dt {
	font-size: var(--wa-font-size-xs);
	color: var(--wa-color-text-quiet);
}
.guide-facts dd {
	margin: 0;
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
}

/* 학습 순서 — 단계 사이를 잇는 세로선이 "이 순서대로" 를 눈으로 보인다. */
.guide-steps {
	display: grid;
	gap: var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}
.guide-steps > li {
	position: relative;
}
.guide-steps > li:not(:last-child)::after {
	content: '';
	position: absolute;
	inset-inline-start: 2.35rem;
	inset-block-end: calc(-1 * var(--wa-space-m));
	block-size: var(--wa-space-m);
	inline-size: 2px;
	background: linear-gradient(180deg, var(--accent), transparent);
}
.guide-step {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: var(--wa-space-m);
	padding: var(--wa-space-m) var(--wa-space-l);
	border-radius: var(--wa-border-radius-l);
	color: inherit;
}
/* 링크 없는 단계(라리아 대화·그룹)는 CTA 칸이 없다. */
div.guide-step {
	grid-template-columns: auto auto 1fr;
}
a.guide-step:hover {
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
	box-shadow: var(--wa-shadow-l);
	transform: translateY(-3px);
}
.guide-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #fff;
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-bold);
}
.guide-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--wa-border-radius-l);
	background-color: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
	font-size: 1.25rem;
}
.guide-step-body {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}
.guide-step-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wa-space-2xs);
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-semibold);
}
.guide-step-desc {
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
	color: var(--wa-color-text-quiet);
}
/* 세부 항목 — 한 단계 안에서 다룰 것(예: VSCode 의 인공지능 확장 3가지). */
.guide-step-bullets {
	display: grid;
	gap: 2px;
	margin-block-start: var(--wa-space-2xs);
}
.guide-step-bullets > span {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-3xs);
	font-size: var(--wa-font-size-s);
	line-height: 1.55;
	color: var(--wa-color-text-normal);
}
.guide-step-bullets i {
	flex: 0 0 auto;
	margin-block-start: 0.3rem;
	color: var(--accent);
}
.guide-badge {
	padding: 1px var(--wa-space-2xs);
	border-radius: var(--wa-border-radius-pill);
	background-color: var(--accent);
	color: #fff;
	font-size: var(--wa-font-size-2xs);
	font-weight: var(--wa-font-weight-bold);
}
.guide-badge.optional {
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	background-color: var(--wa-color-surface-raised);
	color: var(--wa-color-text-quiet);
}
.guide-step-go {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	white-space: nowrap;
	color: var(--accent);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
}

.guide-tips ul {
	display: grid;
	gap: var(--wa-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}
.guide-tips li {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-m);
	border: var(--wa-border-width-s) solid color-mix(in srgb, var(--accent) 22%, var(--wa-color-surface-border));
	border-radius: var(--wa-border-radius-l);
	background-color: color-mix(in srgb, var(--accent) 8%, var(--wa-color-surface-default));
	line-height: 1.65;
}
.guide-tips li > i {
	flex: 0 0 auto;
	margin-block-start: 0.3rem;
	color: var(--accent);
}

.guide-others-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wa-space-m);
}
.guide-other {
	display: grid;
	align-content: start;
	gap: var(--wa-space-3xs);
	padding: var(--wa-space-l);
	color: inherit;
}
.guide-other .pes-icon-tile {
	--tile-ink: var(--other, var(--pes-accent-ink));
	--tile-bg: color-mix(in srgb, var(--other, var(--pes-accent)) 12%, transparent);
	font-size: 1.5rem;
}
.guide-other[data-track='kids'] { --other: #f59e0b; }
.guide-other[data-track='ai'] { --other: #3b82f6; }
.guide-other[data-track='it'] { --other: #10b981; }
.guide-other[data-track='work'] { --other: #8b5cf6; }
.guide-other small {
	color: var(--wa-color-text-quiet);
	line-height: 1.5;
}

@media (max-width: 800px) {
	.guide-step,
	div.guide-step {
		grid-template-columns: auto 1fr;
		gap: var(--wa-space-s);
	}
	.guide-step-icon {
		display: none;
	}
	.guide-step-go {
		grid-column: 1 / -1;
	}
	.guide-steps > li:not(:last-child)::after {
		inset-inline-start: 1.6rem;
	}
	.guide-others-grid {
		grid-template-columns: 1fr;
	}
}

/* ── 어린이 커리큘럼(4주 · 10수업) ─────────────────── */
.kids-cur {
	display: grid;
	gap: var(--pes-space-8);
	min-inline-size: 0;
}
.kids-cur-head {
	display: grid;
	gap: var(--pes-space-2);
}
.kids-cur-head h2 {
	margin: 0;
}
.kids-cur-head p,
.kids-cur .kids-legend-intro {
	margin: 0;
	max-inline-size: 48rem;
	line-height: 1.75;
	color: var(--pes-muted);
}
.kids-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--pes-space-4);
	align-items: start;
}

.kids-week {
	display: grid;
	gap: var(--pes-space-6);
}
.kids-week-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.8rem;
	padding-block-end: 0.6rem;
	border-block-end: 3px solid var(--kd-line);
}
.kids-week-head h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1.35rem;
	font-weight: 750;
}
.kids-week-head h3 i {
	color: var(--kd-ink);
}
.kids-week-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-inline-start: auto;
	color: var(--kd-ink);
	font-size: 0.9rem;
	font-weight: 650;
	text-decoration: none;
}
.kids-week-link:hover {
	text-decoration: underline;
}

.kids-lesson {
	display: grid;
	gap: var(--pes-space-4);
	padding: var(--pes-space-6);
	border: 1px solid var(--pes-border);
	border-block-start: 5px solid var(--kd-hue);
	border-radius: var(--pes-radius-panel);
	background: var(--pes-surface);
	box-shadow: var(--pes-shadow-card);
	/* 지도의 번호를 눌러 내려왔을 때 상단 메뉴에 제목이 가리지 않게 한다. */
	scroll-margin-block-start: 6rem;
}
.kids-lesson-head {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.kids-lesson-n {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: 50%;
	background: var(--kd-strong);
	color: var(--kd-on-strong);
	font-size: 1.15rem;
	font-weight: 800;
}
.kids-lesson-titles {
	display: grid;
	flex: 1 1 auto;
	gap: 0.1rem;
	min-inline-size: 0;
}
.kids-lesson-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--kd-ink);
}
.kids-lesson-head h4 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 750;
	line-height: 1.35;
}
.kids-cur .kids-lesson-icon {
	flex: 0 0 auto;
	inline-size: 3rem;
	block-size: 3rem;
	font-size: 1.35rem;
}
.kids-goal {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0;
	padding: 0.7rem 0.9rem;
	border-radius: var(--pes-radius-control);
	background: var(--kd-soft);
	line-height: 1.6;
}
.kids-goal > i {
	flex: 0 0 auto;
	margin-block-start: 0.3rem;
	color: var(--kd-ink);
}
.kids-text {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.8;
}
.kids-example {
	display: grid;
	gap: 0.4rem;
	padding: 0.8rem 1rem;
	border-radius: var(--pes-radius-control);
	background: var(--kd-soft);
}
.kids-example strong {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--kd-ink);
}
.kids-example q {
	line-height: 1.75;
}
.kids-box {
	display: grid;
	justify-items: start;
	gap: 0.5rem;
	padding: 0.9rem 1rem;
	border: 1px dashed var(--kd-line);
	border-radius: var(--pes-radius-control);
}
.kids-box.kids-check {
	border-style: solid;
	background: var(--pes-canvas);
}
.kids-box-title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--kd-ink);
}
.kids-box details summary {
	cursor: pointer;
	font-weight: 650;
	color: var(--kd-ink);
}
.kids-box details[open] summary {
	margin-block-end: 0.4rem;
}

.kids-panel {
	display: grid;
	gap: 0.7rem;
	padding: var(--pes-space-6);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-panel);
	background: var(--pes-surface);
}
.kids-panel h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1.15rem;
	font-weight: 750;
}
.kids-panel h3 i {
	color: var(--kd-ink);
}
.kids-panel ul {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kids-panel li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	line-height: 1.6;
}
.kids-panel li > i {
	flex: 0 0 auto;
	margin-block-start: 0.35rem;
	color: var(--kd-ink);
}

@media (max-width: 600px) {
	.kids-lesson {
		padding: var(--pes-space-4);
	}
	.kids-cur .kids-lesson-icon {
		display: none;
	}
}

/* ── 어린이 도표 공용(kd-) ─────────────────────────
 * 색은 주차 색(--kd-hue)을 테마 토큰(--pes-surface·--pes-ink·--pes-border)과 섞는다.
 * 파생 색(--kd-ink 등)은 --kd-hue 를 바꾸는 요소에 .kd-hue 를 함께 달아야 그 색으로 다시 계산된다
 * (커스텀 속성의 var() 는 선언된 요소에서 치환된다). 주차 색은 data-week 가 고른다. */
.kd-hue {
	--kd-ink: color-mix(in srgb, var(--kd-hue, #f59e0b) 55%, var(--pes-ink));
	--kd-soft: color-mix(in srgb, var(--kd-hue, #f59e0b) 13%, var(--pes-surface));
	--kd-line: color-mix(in srgb, var(--kd-hue, #f59e0b) 45%, var(--pes-border));
	--kd-wash: color-mix(in srgb, var(--kd-hue, #f59e0b) 5%, var(--pes-canvas));
	/* 흰 글자를 올리는 진한 면(칩·번호). 밝은 주차 색(노랑)도 흰 글자 대비가 나오도록 검정과 섞는다. */
	--kd-strong: color-mix(in srgb, var(--kd-hue, #f59e0b) 62%, #000);
	--kd-on-strong: #fff;
}
.kd-hue[data-week='1'] { --kd-hue: #f59e0b; }
.kd-hue[data-week='2'] { --kd-hue: #8b5cf6; }
.kd-hue[data-week='3'] { --kd-hue: #0ea5e9; }
.kd-hue[data-week='4'] { --kd-hue: #10b981; }
/* 어두운 테마에서는 반대로 밝은 면 위에 어두운 글자를 올린다. */
.wa-dark .kd-hue {
	--kd-strong: color-mix(in srgb, var(--kd-hue, #f59e0b) 78%, #fff);
	--kd-on-strong: #121622;
}

/* 우르두 나스탈리크는 글자가 위아래로 길어, 좁은 줄 높이에서는 칸 제목이 아이콘 원에 닿는다. */
:lang(ur) .kd-hue :is(.kd-node, .kd-map-stop) {
	gap: 0.5rem;
}
:lang(ur) .kd-hue :is(.kd-node strong, .kd-node small, .kd-diamond > *, .kd-map-stop strong, .kd-loop-chip, .kd-branch-label, .kd-piece-head, .kd-light li) {
	line-height: 1.95;
}

/* 도표 틀 */
.kd-figure {
	display: grid;
	gap: var(--pes-space-4);
	min-inline-size: 0;
	margin: 0;
	padding: var(--pes-space-4);
	border: 1px solid var(--kd-line);
	border-radius: var(--pes-radius-card);
	background: var(--kd-wash);
}
.kd-figure > figcaption {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--kd-ink);
}
.kd-note {
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.55;
	color: var(--pes-muted);
}

/* 순서도 칸 */
.kd-node {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.25rem;
	min-inline-size: 0;
	padding: 0.75rem 0.85rem;
	border: 2px solid var(--kd-line);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	color: var(--pes-ink);
	text-align: center;
	transition:
		border-color var(--pes-motion),
		box-shadow var(--pes-motion),
		background-color var(--pes-motion);
}
/* 시작·끝 칸. 999px 로 두면 좁은 화면에서 두 줄로 접힐 때 원처럼 부풀어 고정 반경을 쓴다. */
.kd-node[data-shape='terminal'] {
	border-radius: 1.75rem;
	padding-inline: 1.25rem;
}
.kd-node strong {
	font-weight: 700;
	line-height: 1.35;
}
.kd-node small {
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--pes-muted);
}
.kd-node-icon {
	display: inline-grid;
	place-items: center;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	border-radius: 50%;
	background: var(--kd-soft);
	color: var(--kd-ink);
	font-size: 1.1rem;
}
.kd-node.is-lit {
	border-color: var(--kd-hue);
	background: var(--kd-soft);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--kd-hue) 28%, transparent);
}
.kd-here {
	position: absolute;
	inset-block-start: -0.7rem;
	inset-inline-end: 0.5rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--kd-strong);
	color: var(--kd-on-strong);
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
}

/* 마름모(질문) — 테두리까지 마름모로 보이도록 두 겹을 잘라 겹친다. */
.kd-diamond {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 100%;
	aspect-ratio: 2 / 1.15;
	min-block-size: 6rem;
	text-align: center;
}
.kd-diamond::before,
.kd-diamond::after {
	content: '';
	position: absolute;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.kd-diamond::before {
	inset: 0;
	background: var(--kd-line);
}
.kd-diamond::after {
	inset: 3px 5px;
	background: var(--kd-soft);
}
/* 글자 폭은 마름모 자신의 폭 기준으로 줄인다(padding-inline 퍼센트는 부모 폭 기준이라 쓰지 않는다). */
.kd-diamond > * {
	position: relative;
	z-index: 1;
	max-inline-size: 58%;
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
}
.kd-diamond.is-lit::before {
	background: var(--kd-hue);
}

.kd-arrow {
	display: grid;
	place-items: center;
	color: var(--kd-ink);
	font-size: 1.05rem;
}

/* 예/아니요 갈래 표시 — 색만으로 구분하지 않도록 글자를 함께 쓴다. */
.kd-branch-label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
}
.kd-branch-label[data-branch='yes'] {
	background: var(--pes-success-soft);
	color: var(--pes-success);
}
.kd-branch-label[data-branch='no'] {
	background: var(--pes-danger-soft);
	color: var(--pes-danger);
}

/* 한 줄 순서도 — 좁으면 세로, 넓으면 가로. 칸 수는 --n */
.kd-flow {
	container: kd-flow / inline-size;
}
.kd-flow-row {
	position: relative;
	display: grid;
	gap: 1.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kd-flow-item {
	position: relative;
	display: grid;
}
.kd-flow-item > .kd-node {
	block-size: 100%;
}
.kd-flow-item > .kd-arrow {
	position: absolute;
	left: 50%;
	inset-block-end: -1.7rem;
	translate: -50% 0;
}
.kd-arrow-h,
.kd-rail-up {
	display: none;
}
.kd-flow[data-loop] .kd-flow-row {
	padding-inline-end: 2rem;
}
/* 되돌아가는 길: 세로 배치에서는 끝 칸에서 옆으로 돌아 첫 칸으로 올라간다. */
.kd-flow[data-loop] .kd-flow-row::after {
	content: '';
	position: absolute;
	inset-inline-end: 0.35rem;
	inset-block: 1.6rem;
	inline-size: 1.2rem;
	border: 2px dashed var(--kd-line);
	border-inline-start: 0;
	border-start-end-radius: 14px;
	border-end-end-radius: 14px;
}
/* 화살촉은 첫 칸(li) 안에 있다 — 세로 배치에서는 칸 끝과 옆길 사이 틈에서 첫 칸을 가리킨다. */
.kd-rail-head {
	position: absolute;
	inset-inline-end: -0.85rem;
	inset-block-start: 1.6rem;
	translate: 0 -50%;
	color: var(--kd-ink);
	font-size: 0.8rem;
	line-height: 1;
}
.kd-loop {
	display: flex;
	justify-content: center;
	margin: 0;
}
.kd-loop-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.85rem;
	border: 2px dashed var(--kd-line);
	border-radius: 999px;
	background: var(--pes-surface);
	color: var(--kd-ink);
	font-size: 0.88rem;
	font-weight: 650;
}

@container kd-flow (min-width: 34rem) {
	.kd-flow-row {
		grid-template-columns: repeat(var(--n), minmax(0, 1fr));
		gap: 2.2rem;
	}
	.kd-flow-item > .kd-arrow {
		left: auto;
		inset-block: 50% auto;
		inset-inline-end: -1.75rem;
		translate: 0 -50%;
	}
	.kd-arrow-v,
	.kd-rail-side {
		display: none;
	}
	.kd-arrow-h,
	.kd-rail-up {
		display: inline-block;
	}
	.kd-flow[data-loop] .kd-flow-row {
		margin-block-end: 1.5rem;
		padding-inline-end: 0;
	}
	/* 가로 배치에서는 칸들 아래로 U 자를 그려 첫 칸으로 돌아간다.
	   칸 사이 간격(2.2rem)을 빼야 U 자의 양 끝이 첫 칸·끝 칸의 한가운데에 온다. */
	.kd-flow[data-loop] .kd-flow-row::after {
		inset-inline: calc((100% - (var(--n) - 1) * 2.2rem) / var(--n) / 2);
		inset-block: auto -1.5rem;
		inline-size: auto;
		block-size: 1.5rem;
		border: 2px dashed var(--kd-line);
		border-block-start: 0;
		border-radius: 0 0 14px 14px;
	}
	.kd-rail-head {
		left: 50%;
		inset-inline-end: auto;
		inset-block-start: auto;
		inset-block-end: -0.95rem;
		translate: -50% 0;
	}
}

/* 4주 지도 */
.kd-map {
	container: kd-map / inline-size;
}
.kd-map-row {
	display: grid;
	gap: 1.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kd-map-stop {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	padding: 0.9rem 0.75rem;
	border: 2px solid var(--kd-line);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
	text-align: center;
}
.kd-map-stop > .kd-arrow {
	position: absolute;
	left: 50%;
	inset-block-end: -1.65rem;
	translate: -50% 0;
}
.kd-week-chip {
	display: inline-block;
	padding: 0.1rem 0.65rem;
	border-radius: 999px;
	background: var(--kd-strong);
	color: var(--kd-on-strong);
	font-size: 0.78rem;
	font-weight: 700;
}
.kd-map-stop strong {
	line-height: 1.35;
}
.kd-map-lessons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
}
.kd-map-lessons a {
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 2px solid var(--kd-line);
	border-radius: 50%;
	background: var(--kd-soft);
	color: var(--kd-ink);
	font-weight: 700;
	text-decoration: none;
}
.kd-map-lessons a:hover,
.kd-map-lessons a:focus-visible {
	border-color: var(--kd-strong);
	background: var(--kd-strong);
	color: var(--kd-on-strong);
}
@container kd-map (min-width: 40rem) {
	.kd-map-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}
	.kd-map-stop > .kd-arrow {
		left: auto;
		inset-block: 50% auto;
		inset-inline-end: -1.6rem;
		translate: 0 -50%;
	}
	.kd-map .kd-arrow-v {
		display: none;
	}
	.kd-map .kd-arrow-h {
		display: inline-block;
	}
}

/* 하루 20분 막대 — 칸 길이는 분(--min). 흰 글자 대비가 나오는 진한 색(떠올리기 · 배우기 · 해 보기 · 확인하기). */
.kd-day-bar {
	display: flex;
	overflow: hidden;
	min-block-size: 2.4rem;
	border: 2px solid var(--kd-line);
	border-radius: 999px;
}
[data-part='recall'] { --part: #b45309; }
[data-part='learn'] { --part: #6d28d9; }
[data-part='try'] { --part: #0369a1; }
[data-part='check'] { --part: #047857; }
.kd-day-seg {
	display: grid;
	place-items: center;
	flex: var(--min, 1) 1 0;
	min-inline-size: 0;
	padding-inline: 0.25rem;
	background: var(--part);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}
.kd-day-legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kd-day-legend li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.15rem 0.6rem;
}
.kd-day-dot {
	display: inline-grid;
	place-items: center;
	grid-row: span 2;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--part);
	color: #fff;
}
.kd-day-legend strong {
	line-height: 1.3;
}
.kd-day-legend small {
	color: var(--pes-muted);
	line-height: 1.45;
}

/* 순서도 기호 읽는 법 */
.kd-legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kd-legend li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	line-height: 1.45;
}
.kd-legend-shape {
	flex: 0 0 auto;
	inline-size: 3.4rem;
	block-size: 2rem;
	border: 2px solid var(--kd-line);
	background: var(--pes-surface);
}
.kd-legend-shape[data-shape='terminal'] {
	border-radius: 999px;
}
.kd-legend-shape[data-shape='step'] {
	border-radius: 6px;
}
.kd-legend-shape[data-shape='ask'] {
	border: 0;
	background: var(--kd-line);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.kd-legend-shape[data-shape='arrow'] {
	display: grid;
	place-items: center;
	border: 0;
	background: none;
	color: var(--kd-ink);
	font-size: 1.3rem;
}

/* 수업 3 비교 차트 */
.kd-table-wrap {
	overflow-x: auto;
}
.kd-compare {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0 0.4rem;
}
.kd-compare th,
.kd-compare td {
	padding: 0.55rem 0.7rem;
	text-align: center;
	vertical-align: middle;
}
.kd-compare thead th {
	font-size: 0.9rem;
	color: var(--kd-ink);
}
.kd-compare thead th i {
	display: block;
	margin-inline: auto;
	margin-block-end: 0.2rem;
	font-size: 1.3rem;
}
.kd-compare tbody th {
	background: var(--pes-surface);
	font-weight: 600;
	line-height: 1.45;
	text-align: start;
	border-start-start-radius: var(--pes-radius-control);
	border-end-start-radius: var(--pes-radius-control);
}
.kd-compare tbody td {
	background: var(--pes-surface);
}
.kd-compare tbody td:last-child {
	border-start-end-radius: var(--pes-radius-control);
	border-end-end-radius: var(--pes-radius-control);
}
.kd-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}
.kd-mark[data-yes='true'] {
	background: var(--pes-success-soft);
	color: var(--pes-success);
}
.kd-mark[data-yes='false'] {
	background: var(--pes-subtle);
	color: var(--pes-muted);
}

/* 수업 5 다음 낱말 막대 차트 — 막대 길이(--pct)와 옆 점수 글자는 같은 값이다. */
.kd-sentence {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 0.8rem 1rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
}
.kd-sentence-label {
	font-size: 0.8rem;
	color: var(--pes-muted);
}
.kd-sentence-text {
	font-size: 1.2rem;
	font-weight: 650;
	line-height: 1.8;
}
.kd-blank {
	display: inline-block;
	min-inline-size: 3.5em;
	margin-inline: 0.15em;
	padding-inline: 0.3em;
	border-block-end: 3px solid var(--kd-hue);
	color: var(--kd-ink);
	text-align: center;
}
.kd-bars {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kd-bar {
	display: grid;
	grid-template-columns: minmax(5.5rem, auto) 1fr 3.5rem;
	align-items: center;
	gap: 0.7rem;
	inline-size: 100%;
	padding: 0.45rem 0.7rem;
	border: 2px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	color: var(--pes-ink);
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.kd-bar:hover {
	border-color: var(--kd-line);
}
.kd-bar[aria-pressed='true'] {
	border-color: var(--kd-hue);
	background: var(--kd-soft);
}
.kd-bar-word {
	font-weight: 700;
}
.kd-bar-track {
	overflow: hidden;
	block-size: 0.9rem;
	border-radius: 999px;
	background: var(--pes-subtle);
}
.kd-bar-fill {
	display: block;
	inline-size: var(--pct, 0%);
	min-inline-size: 0.35rem;
	block-size: 100%;
	border-radius: 999px;
	background: var(--kd-hue);
}
.kd-bar-score {
	color: var(--kd-ink);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: end;
}
.kd-result,
.kd-hint {
	margin: 0;
	line-height: 1.6;
}
.kd-result {
	padding: 0.6rem 0.9rem;
	border-inline-start: 4px solid var(--kd-hue);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
}
.kd-hint {
	color: var(--pes-muted);
}
.kd-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* 수업 6 확인 순서도 */
.kd-decide {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	inline-size: 100%;
	max-inline-size: 36rem;
	margin-inline: auto;
}
.kd-decide > .kd-diamond {
	inline-size: min(100%, 17rem);
}
.kd-diamond-text {
	display: grid;
	gap: 0.15rem;
	margin: 0;
}
.kd-diamond-text small {
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--pes-muted);
}
.kd-branches {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	inline-size: 100%;
	padding-block-start: 1.4rem;
}
/* 마름모 아래에서 두 갈래로 나뉘는 선 */
.kd-branches::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 25%;
	block-size: 1.4rem;
	border: 2px solid var(--kd-line);
	border-block-end: 0;
	border-radius: 12px 12px 0 0;
}
.kd-branch {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.45rem;
	min-inline-size: 0;
}
.kd-branch > .kd-node {
	inline-size: 100%;
}

/* 수업 7 좋은 질문 조립 */
.kd-recipe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kd-piece {
	display: grid;
	justify-items: start;
	gap: 0.4rem;
	padding: 0.75rem 0.85rem;
	border: 2px solid var(--kd-line);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
}
.kd-piece-head {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	line-height: 1.35;
}
.kd-piece-num {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	background: var(--kd-strong);
	color: var(--kd-on-strong);
	font-size: 0.8rem;
}
.kd-piece-ex {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--kd-soft);
	color: var(--kd-ink);
	font-size: 0.88rem;
	font-weight: 650;
}
.kd-prompts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.7rem;
}
.kd-prompt {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--pes-border);
	border-inline-start-width: 4px;
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
}
.kd-prompt .kd-branch-label {
	justify-self: start;
}
.kd-prompt[data-kind='bad'] {
	border-inline-start-color: var(--pes-danger);
}
.kd-prompt[data-kind='good'] {
	border-inline-start-color: var(--pes-success);
}
.kd-prompt q {
	font-size: 1.02rem;
	line-height: 1.6;
}

/* 수업 8 신호등 차트 */
.kd-lights {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.75rem;
}
.kd-light {
	--light: #ef4444;
	display: grid;
	align-content: start;
	gap: 0.6rem;
	padding: 0.85rem;
	border: 2px solid color-mix(in srgb, var(--light) 50%, var(--pes-border));
	border-radius: var(--pes-radius-card);
	background: color-mix(in srgb, var(--light) 9%, var(--pes-surface));
}
.kd-light[data-light='yellow'] {
	--light: #eab308;
}
.kd-light[data-light='green'] {
	--light: #22c55e;
}
.kd-light-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	color: color-mix(in srgb, var(--light) 50%, var(--pes-ink));
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}
.kd-light-lamp {
	flex: 0 0 auto;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	background: var(--light);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--light) 25%, transparent);
}
.kd-light ul {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kd-light li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	line-height: 1.45;
}
.kd-light li > i {
	flex: 0 0 auto;
	color: color-mix(in srgb, var(--light) 55%, var(--pes-ink));
}

/* 수업 9 숫자 맞히기 순서도 + 게임 */
.kd-guess {
	container: kd-guess / inline-size;
}
.kd-guess-layout {
	display: grid;
	gap: 1.25rem;
}
@container kd-guess (min-width: 44rem) {
	.kd-guess-layout {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: start;
	}
}
.kd-gflow {
	--gap: 2.4rem;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: stretch;
	column-gap: var(--gap);
	row-gap: 0.25rem;
}
.kd-gflow > .kd-node,
.kd-gflow > .kd-diamond,
.kd-gflow > .kd-arrow {
	grid-column: 1;
}
.kd-gflow > .kd-arrow {
	grid-auto-flow: column;
	justify-content: center;
	gap: 0.25rem;
	min-block-size: 1.6rem;
}
/* 되돌아가는 길의 윗부분: "내가 고르기" 칸 옆에서 시작해 아래로 꺾인다. */
.kd-rail-top,
.kd-rail-mid {
	position: relative;
	grid-column: 2;
	min-block-size: 1.6rem;
}
.kd-rail-top::before {
	content: '';
	position: absolute;
	inset-block: 50% 0;
	inset-inline-start: calc(-1 * var(--gap));
	inset-inline-end: 50%;
	border-block-start: 2px dashed var(--kd-line);
	border-inline-end: 2px dashed var(--kd-line);
	border-start-end-radius: 14px;
}
.kd-rail-top .kd-rail-arrow {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: calc(-1 * var(--gap) - 0.2rem);
	translate: 0 -50%;
	color: var(--kd-ink);
	font-size: 0.85rem;
	line-height: 1;
}
.kd-rail-mid {
	display: grid;
	place-items: center;
}
.kd-rail-mid::before {
	content: '';
	position: absolute;
	inset-block: 0;
	left: calc(50% - 1px);
	border-inline-start: 2px dashed var(--kd-line);
}
.kd-rail-mid .kd-loop-chip {
	position: relative;
	padding: 0.15rem 0.55rem;
	font-size: 0.78rem;
}
.kd-gflow[data-state='hint'] :is(.kd-rail-top, .kd-rail-mid, .kd-hint-cell) {
	--kd-line: var(--kd-hue);
}
.kd-hint-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	grid-column: 2;
}
.kd-hint-cell > .kd-node {
	inline-size: 100%;
}
.kd-hint-cell > .kd-spacer {
	position: relative;
	flex: 1 1 0;
	min-block-size: 0.5rem;
}
/* 알려 주기 칸 위로 옆길을 이어 올린다(첫 자식은 .kd-no-link 라 그 바로 뒤 칸을 잡는다). */
.kd-hint-cell > .kd-no-link + .kd-spacer::before {
	content: '';
	position: absolute;
	inset-block: 0;
	left: calc(50% - 1px);
	border-inline-start: 2px dashed var(--kd-line);
}
/* 마름모 → "아니요" → 알려 주기 칸 */
.kd-no-link {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: calc(-1 * var(--gap));
	inline-size: var(--gap);
	border-block-start: 2px solid var(--kd-line);
}
.kd-no-link .kd-branch-label {
	position: absolute;
	inset-block-end: 0.2rem;
	left: 50%;
	translate: -50% 0;
	padding: 0 0.35rem;
	font-size: 0.72rem;
}
.kd-game {
	display: grid;
	gap: 0.7rem;
	padding: 0.9rem;
	border: 2px solid var(--kd-line);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
}
.kd-game-title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
}
.kd-game-feedback {
	min-block-size: 1.6em;
	margin: 0;
	color: var(--kd-ink);
	font-weight: 700;
	line-height: 1.5;
}
.kd-numpad {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.4rem;
}
.kd-num {
	display: grid;
	place-items: center;
	gap: 0.05rem;
	min-block-size: 3rem;
	border: 2px solid var(--kd-line);
	border-radius: var(--pes-radius-control);
	background: var(--kd-soft);
	color: var(--pes-ink);
	font: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	cursor: pointer;
}
.kd-num:hover:not(:disabled) {
	border-color: var(--kd-strong);
	background: var(--kd-strong);
	color: var(--kd-on-strong);
}
.kd-num:disabled {
	cursor: default;
	opacity: 0.55;
}
.kd-num small {
	font-size: 0.7rem;
	line-height: 1;
}
.kd-num[data-result='correct'] {
	border-color: var(--pes-success);
	background: var(--pes-success-soft);
	color: var(--pes-success);
	opacity: 1;
}
.kd-game-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	color: var(--pes-muted);
	font-size: 0.88rem;
}

/* ── 가이드 — 본문 대비 · 단계 제목 ───────────────────── */
.guide .guide-hero h1 { background: none; color: var(--pes-ink); }
.guide .guide-hero .pes-eyebrow { color: color-mix(in srgb, var(--accent) 55%, var(--pes-ink)); }
.guide-hub .guide-hub-preview { font-size: 0.94rem; line-height: 1.8; }
.guide .guide-step { box-shadow: var(--pes-shadow-card); }
@media (min-width: 1100px) and (max-width: 1399px) { .guide-hub .guide-hub-grid { grid-template-columns: minmax(0, 1fr); } }