/*
 * 가이드 허브(/guide) — 인포그래픽. SSOT 23절 "텍스트 인포그래픽"·11절. 계획과 검수: docs/infographics/guide/brief.md.
 * 읽는 순서: 주장 제목 → 갈림길(그림 → 네 노선 → 네 길 카드) → 길마다 노선도 → 결론.
 * 글자 네 단계: h1 2.4rem · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다).
 * 색: 길마다 고유색 하나(--track — 선 · 테두리 · 역) + 강조색 하나(warning 잉크, 예상 기간에만).
 * 선은 public/js/ig-lines.js 가 svg 로 그리고(.ig-line), 필수/선택은 실선/점선 + 낭독 글자로도 구분한다(색만으로 구분하지 않음).
 */
.guide-overview {
	--guide-body: calc(1rem * var(--wa-font-size-scale, 1));
	--guide-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--guide-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	--guide-gap-in: 0.75rem;
	--guide-gap-group: clamp(2.75rem, 5vw, 3.75rem);
	--track: var(--sonub-accent);
	display: grid;
	container: guide-overview / inline-size;
	max-inline-size: 70rem;
	padding-block: 1rem 3rem;
	gap: var(--guide-gap-group);
	color: var(--sonub-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.guide-overview :is(h1, h2, h3, p, ul, ol, li, figure) { margin: 0; }
.guide-overview :is(header, section, div, li, a) { min-inline-size: 0; }
.guide-overview :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
.guide-overview h2 { font-size: var(--guide-h2); font-weight: 750; line-height: 1.45; letter-spacing: -0.02em; }
.guide-overview :is(a, button):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }

/* 길마다 고유색 — 카드 테두리 · 노선 · 연결선이 같은 색을 쓴다 */
.guide-overview [data-track='kids'], .guide-overview :is(.ig-line, .ig-node).is-kids { --track: var(--wa-color-orange-50); }
.guide-overview [data-track='ai'], .guide-overview :is(.ig-line, .ig-node).is-ai { --track: var(--wa-color-purple-50); }
.guide-overview [data-track='it'], .guide-overview :is(.ig-line, .ig-node).is-it { --track: var(--wa-color-green-50); }
.guide-overview [data-track='work'], .guide-overview :is(.ig-line, .ig-node).is-work { --track: var(--wa-color-blue-50); }
.guide-overview .ig-line { fill: none; stroke: var(--track); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.guide-overview .ig-line.is-dashed { stroke-width: 2.5; stroke-dasharray: 2 7; }
.guide-overview .ig-line.is-trunk { stroke: var(--sonub-muted); }
.guide-overview .ig-node { r: 8px; fill: var(--track); stroke: var(--sonub-surface); stroke-width: 3; }

/* 1 주장 제목 */
.guide-overview .guide-overview-head { display: grid; justify-items: start; gap: var(--guide-gap-in); }
.guide-overview .sonub-eyebrow { font-size: var(--guide-note); color: var(--sonub-accent-ink); }
.guide-overview h1 { font-size: calc(2.4rem * var(--wa-font-size-scale, 1)); font-weight: 800; line-height: 1.3; letter-spacing: -0.035em; text-wrap: balance; }
.guide-overview .guide-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }

/* 범례 — 선 견본은 CSS 로 */
.guide-overview .guide-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; color: var(--sonub-muted); font-size: var(--guide-note); }
.guide-overview .guide-legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.guide-overview .guide-legend-line { inline-size: 1.9rem; border-block-start: 3px solid var(--sonub-ink); }
.guide-overview .guide-legend-line.is-dashed { border-block-start-style: dotted; }
.guide-overview .guide-legend-ring { inline-size: 0.85rem; block-size: 0.85rem; border-radius: 999px; background: var(--sonub-ink); box-shadow: 0 0 0 2px var(--sonub-surface), 0 0 0 4px var(--sonub-ink); }

/* 2 핵심 — 갈림길: 그림 아래 가장자리의 출발점 하나에서 줄기 한 줄이 시작 쪽 여백(--fork-gutter)의 가운데를 따라 내려가고, 카드마다 줄기 위
   길 색 점(역)에서 짧은 가지가 카드로 들어간다(ig-lines.js data-ig-tree). 선을 여러 가닥 나란히 몰지 않는다 — 가지 사이가 카드 하나 높이. */
.guide-overview .guide-fork { --fork-gutter: 3.5rem; display: grid; gap: 1.75rem; }
.guide-overview .guide-fork-start { position: relative; }
.guide-overview .guide-fork-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-s); }
/* 그림 무비 — 3:2 그림(캔버스)을 16:9 띠로 보인다: 초점 55% → 캔버스를 띠 높이의 10.2% 만큼 올린다(소년의 발 · 하늘의 새가 띠 안).
   조각 자리(--x · --y · --w)는 원본 1536×1024 에서 잰 그림 좌표 %(왼쪽 · 위 — 그림은 RTL 에서 뒤집지 않는다) */
.guide-overview .guide-movie { position: absolute; inset-inline: 0; inset-block-start: -10.2%; }
.guide-overview .guide-movie .webmovie-camera { --webmovie-focus: 45% 70%; } /* dolly: 소년에게 다가간 데서 물러난다 */
.guide-overview .guide-movie-cloud-a { --x: 1%; --y: 9%; --w: 14%; }
.guide-overview .guide-movie-cloud-b { --x: 44%; --y: 8.5%; --w: 10%; --webmovie-x: 6cqw; }
.guide-overview .guide-movie-cloud-c { --x: 81%; --y: 9%; --w: 12%; --webmovie-x: -5cqw; }
.guide-overview .guide-movie-birds { --x: 74.5%; --y: 10.5%; --w: 4.5%; }
.guide-overview .guide-movie-robot { --x: 88.9%; --y: 45.9%; --w: 3.9%; }
.guide-overview .guide-movie-sign { --webmovie-burst: var(--sign), #fff, var(--sign); }
.guide-overview .guide-movie-sign.is-purple { --sign: var(--wa-color-purple-50); --x: 40%; --y: 43%; --w: 9.8%; transform-origin: 100% 50%; }
.guide-overview .guide-movie-sign.is-yellow { --sign: var(--wa-color-yellow-70); --x: 50.6%; --y: 45.9%; --w: 9.6%; transform-origin: 0 50%; }
.guide-overview .guide-movie-sign.is-blue { --sign: var(--wa-color-blue-50); --x: 39.7%; --y: 50.8%; --w: 10.1%; transform-origin: 100% 50%; }
.guide-overview .guide-movie-sign.is-green { --sign: var(--wa-color-green-50); --x: 50.6%; --y: 54.7%; --w: 10.1%; transform-origin: 0 50%; }
.guide-overview .guide-movie-boy { --x: 40.2%; --y: 60%; --w: 9%; }
/* 네 목적지 — 길 색 점과 이름표(놀이터 · 관측소 · 작업실 · 사무실) */
.guide-overview .guide-movie-ping { --webmovie-ping: var(--track); --webmovie-ping-size: 16px; --webmovie-ping-loops: 1; --webmovie-burst: var(--track), #fff; }
.guide-overview .guide-movie-ping[data-track='kids'] { --x: 13%; --y: 30%; }
.guide-overview .guide-movie-ping[data-track='ai'] { --x: 25%; --y: 15.5%; }
.guide-overview .guide-movie-ping[data-track='it'] { --x: 63.8%; --y: 24%; }
.guide-overview .guide-movie-ping[data-track='work'] { --x: 87%; --y: 41%; }
.guide-overview .guide-movie-label { --webmovie-cue-color: var(--track); padding: 0.2rem 0.65rem; border: 2px solid var(--track); border-radius: 999px; background: color-mix(in srgb, var(--sonub-surface) 92%, transparent); box-shadow: var(--wa-shadow-s); color: var(--sonub-ink); font-size: var(--guide-note); font-weight: 750; line-height: 1.35; white-space: nowrap; text-decoration: none; }
.guide-overview .guide-movie-label:hover { background: color-mix(in srgb, var(--track) 16%, var(--sonub-surface)); text-decoration: underline; text-underline-offset: 0.2em; }
.guide-overview .guide-movie-label:focus-visible { outline: 3px solid var(--track); outline-offset: 3px; }
.guide-overview .guide-movie-label[data-track='kids'] { --x: 4%; --y: 34.5%; }
.guide-overview .guide-movie-label[data-track='ai'] { --x: 27.5%; --y: 12.5%; }
.guide-overview .guide-movie-label[data-track='it'] { --x: 66.5%; --y: 21%; }
.guide-overview .guide-movie-label[data-track='work'] { left: auto; right: 15.5%; --y: 38%; }
/* 차례 강조 — 이름표와 함께 같은 길 카드의 [이 가이드 보기] 단추가 튄다 */
.guide-overview .guide-fork-go { --webmovie-cue-partner: webmovie-cue-jelly; }
.guide-overview .guide-common strong { --webmovie-cue-color: var(--wa-color-brand-fill-loud); }
.guide-overview .guide-movie-replay { position: absolute; inset-block-end: 0.75rem; inset-inline-end: 0.75rem; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border: 0; border-radius: 999px; background: rgb(20 18 30 / 0.55); color: #fff; font-size: var(--guide-note); font-weight: 700; cursor: pointer; }
.guide-overview .guide-movie-replay:hover { background: rgb(20 18 30 / 0.75); }
.guide-overview .guide-movie-replay:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.guide-overview .guide-fork-origin { position: absolute; inset-block-end: -1.6rem; inset-inline-start: calc(var(--fork-gutter) / 2); inline-size: 1.2rem; block-size: 1.2rem; margin-inline-start: -0.6rem; border-radius: 999px; background: var(--sonub-muted); box-shadow: 0 0 0 3px var(--sonub-surface); }
.guide-overview .guide-fork-paths { display: grid; gap: 1rem; padding-inline-start: var(--fork-gutter); }
.guide-overview .guide-fork-path { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: 'pic title go' 'pic facts facts'; gap: 0.75rem 1.25rem; align-items: center; padding: 1.1rem 1.25rem; border: 1px solid var(--sonub-border); border-inline-start: 5px solid var(--track); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); }
.guide-overview .guide-fork-pic { grid-area: pic; align-self: start; inline-size: 100%; block-size: auto; aspect-ratio: 1; border-radius: var(--wa-border-radius-l); }
.guide-overview .guide-fork-title { grid-area: title; font-size: calc(1.2rem * var(--wa-font-size-scale, 1)); line-height: 1.35; }
.guide-overview .guide-fork-title a { color: var(--sonub-ink); text-decoration: none; }
.guide-overview .guide-fork-title a:hover { color: var(--sonub-accent-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.guide-overview .guide-fork-go { grid-area: go; min-block-size: 2.4rem; gap: 0.4rem; padding-inline: 0.9rem; font-size: var(--guide-note); white-space: nowrap; }
/* 이름표 목록 — 이름표 칸(max-content)이 네 카드에서 같아 값이 같은 세로 줄에서 시작한다. 값은 본문 크기 · 진한 글자, 이름표는 작은 흐린 글자 */
.guide-overview .guide-fork-facts { grid-area: facts; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1rem; align-items: baseline; margin: 0; }
.guide-overview .guide-fork-facts > div { display: contents; }
.guide-overview .guide-fork-facts dt { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--sonub-muted); font-size: var(--guide-note); font-weight: 650; line-height: 1.6; }
.guide-overview .guide-fork-facts dt i { inline-size: 1.1em; color: var(--track); text-align: center; }
.guide-overview .guide-fork-facts dd { margin: 0; font-size: var(--guide-body); line-height: 1.6; }
.guide-overview .guide-fork-time dd { color: var(--sonub-warning); font-weight: 750; }
/* 단계 눈금 — 단계마다 점 하나: 필수 = 길 색으로 채운 점, 선택 = 점선 테두리의 빈 점(노선도 역과 같은 모양). 점 사이 4px 넘게 띄운다 */
.guide-overview .guide-steps-meter { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block-start: 0.4rem; --webmovie-y: 0px; --webmovie-s: 0.3; --webmovie-dur: 420ms; --webmovie-stagger: 45ms; --webmovie-delay: 500ms; }
.guide-overview .guide-steps-meter i { inline-size: 0.8rem; block-size: 0.8rem; border: 2px solid var(--track); border-radius: 999px; background: var(--track); }
.guide-overview .guide-steps-meter i.is-optional { border-style: dashed; background: var(--sonub-surface); }
/* 움직임 — 선 묶음은 이어 주는 칸(카드·역)이 자리 잡은 뒤 그려진다(webmovie wipe, 끝나면 ig-lines.js 가 마지막 자리로 다시 그림) */
.guide-overview .guide-fork > .ig-svg { --webmovie-delay: 700ms; }
.guide-overview .guide-map-row > .ig-svg { --webmovie-delay: 650ms; --webmovie-dur: 1100ms; }

/* 3 가이드 별 순서 — 노선도: 역을 길의 색 선으로 잇는다 */
.guide-overview .guide-map { display: grid; gap: 1rem; }
/* 길 하나 = 위에 머리(그림 · 이름 · 단계 수), 아래에 역. 역은 같은 폭 칸(줄마다 위치가 맞는다)에 놓고 칸 사이 틈으로 선이 지난다 */
.guide-overview .guide-map-row { display: grid; gap: 0.9rem; padding-block: 1.25rem; border-block-start: 1px solid var(--sonub-border); }
.guide-overview .guide-map-row h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; font-size: calc(1.2rem * var(--wa-font-size-scale, 1)); font-weight: 750; line-height: 1.4; }
.guide-overview .guide-map-row h3 img { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 999px; box-shadow: 0 0 0 2px var(--track); }
.guide-overview .guide-map-row h3 a { color: var(--sonub-ink); text-decoration: none; }
.guide-overview .guide-map-row h3 a:hover { color: var(--sonub-accent-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.guide-overview .guide-map-row h3 span { color: var(--sonub-muted); font-size: var(--guide-note); font-weight: 400; }
.guide-overview .guide-route-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 2.4rem 1.75rem; }
.guide-overview .guide-route-step { display: flex; border: 2px solid var(--track); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); font-size: var(--guide-body); line-height: 1.4; }
/* 역 = 그 단계 페이지로 가는 링크. 칩 전체가 눌리는 곳이고, 마우스·초점은 칩 안 색과 바깥 고리로만 보인다(이어진 선은 그대로) */
.guide-overview .guide-route-link { display: flex; flex: 1; align-items: center; gap: 0.55rem; min-block-size: 2.75rem; padding: 0.35rem 0.8rem 0.35rem 0.4rem; border-radius: inherit; color: inherit; text-decoration: none; }
.guide-overview a.guide-route-link:hover { background: color-mix(in srgb, var(--track) 12%, var(--sonub-surface)); }
.guide-overview a.guide-route-link:hover .guide-route-name { text-decoration: underline; text-underline-offset: 0.2em; }
.guide-overview a.guide-route-link:focus-visible { outline: 3px solid var(--track); outline-offset: 4px; }
.guide-overview .guide-route-mark { flex: none; margin-inline-start: auto; color: var(--sonub-muted); font-size: var(--guide-note); }
.guide-overview .guide-route-step.is-optional { border-style: dashed; color: var(--sonub-muted); }
.guide-overview .guide-route-stop { flex: none; white-space: nowrap; display: inline-grid; place-items: center; min-inline-size: 1.65rem; block-size: 1.65rem; padding-inline: 0.2rem; border: 2px solid var(--track); border-radius: 999px; background: var(--track); color: #fff; font-size: var(--guide-note); font-weight: 800; font-variant-numeric: tabular-nums; }
.guide-overview .is-optional .guide-route-stop { background: var(--sonub-surface); color: var(--sonub-ink); }
.guide-overview .is-shared .guide-route-stop { box-shadow: 0 0 0 2px var(--sonub-surface), 0 0 0 4px var(--sonub-ink); }

/* 4 결론 — 시작 방법 · 막히면 · 일대일 화상 강의 */
.guide-overview .guide-end { display: grid; gap: 1.25rem; }
.guide-overview .guide-end-strip { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.4rem; border-radius: var(--wa-border-radius-l); background: var(--sonub-accent); color: var(--sonub-on-accent); font-size: var(--guide-h2); font-weight: 750; line-height: 1.45; }
.guide-overview .guide-end-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
.guide-overview .guide-common { display: grid; gap: var(--guide-gap-in); }
.guide-overview .guide-common ul { display: grid; gap: 0.75rem; }
.guide-overview .guide-common li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0; border: 0; background: none; }
.guide-overview .guide-common li .sonub-icon-tile { inline-size: 2.25rem; block-size: 2.25rem; }
.guide-overview .guide-common li p { font-size: var(--guide-body); line-height: 1.75; color: var(--sonub-muted); }
.guide-overview .guide-common li strong { color: var(--sonub-ink); }
.guide-overview .guide-teacher { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1rem; padding: 1.25rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: none; }
.guide-overview .guide-teacher > .sonub-icon-tile { grid-row: 1 / 4; }
.guide-overview .guide-teacher > :is(p, .sonub-card-link) { grid-column: 2; }
.guide-overview .guide-teacher .guide-hub-title { font-size: var(--guide-body); }
.guide-overview .guide-teacher p { color: var(--sonub-muted); font-size: var(--guide-body); line-height: 1.7; }
.guide-overview .guide-teacher .sonub-card-link { font-size: var(--guide-note); }

/* 좁은 본문 — 카드 그림을 줄이고, 더 좁으면 그림은 제목 옆 · 이름표 목록은 카드 전체 폭 · 단추는 맨 아래 */
@container guide-overview (max-width: 46rem) {
	.guide-overview .guide-fork-frame { aspect-ratio: 3 / 2; }
	.guide-overview .guide-movie { inset-block-start: 0; }
	.guide-overview .guide-fork-path { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
	.guide-overview .guide-end-pair { grid-template-columns: minmax(0, 1fr); }
	.guide-overview .guide-map-row { grid-template-columns: minmax(0, 1fr); }
}
@container guide-overview (max-width: 34rem) {
	.guide-overview .guide-movie-label { display: none; } /* 좁은 그림에서는 이름표가 장면을 가린다 — 같은 이름이 바로 아래 카드에 있다. 점은 남긴다 */
	.guide-overview .guide-fork { --fork-gutter: 2.75rem; }
	.guide-overview .guide-fork-path { grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: 'pic title' 'facts facts' 'go go'; gap: 0.7rem 0.75rem; padding: 0.9rem; }
	.guide-overview .guide-fork-go { justify-self: start; }
	.guide-overview .guide-fork-facts { grid-template-columns: minmax(0, 1fr); row-gap: 0.7rem; }
	.guide-overview .guide-fork-facts > div { display: grid; gap: 0.1rem; }
	.guide-overview h1 { font-size: calc(1.9rem * var(--wa-font-size-scale, 1)); }
	.guide-overview .guide-end-strip { font-size: var(--guide-body); }
	.guide-overview .guide-teacher { grid-template-columns: minmax(0, 1fr); }
	.guide-overview .guide-teacher > .sonub-icon-tile { grid-row: auto; }
	.guide-overview .guide-teacher > :is(p, .sonub-card-link) { grid-column: auto; }
}
:is(:lang(ar), :lang(ur)) .guide-overview :is(p, li) { line-height: 1.95; }
:is(:lang(ar), :lang(ur)) .guide-overview .guide-route-step { line-height: 1.6; }