/* AI·IT 공용 그림 단계·눈금·경로. SSOT 11·23절. */
.guide-editorial[data-guide-motion] {
	--sonub-journey-grid: color-mix(in srgb, var(--sonub-accent) 9%, transparent);
	gap: clamp(2rem, 4vw, 3.5rem);
	overflow-wrap: break-word;
}
.guide-editorial[data-guide-motion] .guide-editorial-cover {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--sonub-border);
	border-radius: var(--wa-border-radius-xl);
	background: radial-gradient(ellipse at 85% 20%, var(--wa-color-brand-fill-quiet), transparent 70%), var(--sonub-surface);
	box-shadow: var(--wa-shadow-s);
	align-items: start;
}
.guide-editorial[data-guide-motion] .guide-editorial-introduction { padding-block: 1rem; }
.guide-editorial[data-guide-motion] h1 { font-size: calc(clamp(2rem, 3.2vw, 2.8rem) * var(--wa-font-size-scale, 1)); }
.guide-editorial[data-guide-motion] .guide-editorial-intro { max-inline-size: 65ch; padding-inline-start: 1.2rem; border-inline-start: 3px solid var(--sonub-accent); }
.guide-editorial[data-guide-motion] .guide-facts { padding: 1.5rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.guide-journey-required { display: block; color: var(--sonub-muted); font-size: var(--wa-font-size-xs); }
.guide-journey-meter { display: flex; gap: 0.4rem; margin-block: 0.5rem; }
.guide-journey-meter > span { inline-size: 0.65rem; block-size: 0.65rem; border: 2px solid var(--sonub-accent); border-radius: 50%; background: var(--sonub-accent); }
.guide-journey-meter > .is-optional { background: transparent; border-style: dashed; }
.guide-editorial[data-guide-motion] .ig-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; z-index: 0; --webmovie-delay: 900ms; --webmovie-dur: 1200ms; }
.guide-editorial[data-guide-motion] .ig-line { fill: none; stroke: var(--sonub-accent); stroke-width: 2; stroke-linecap: round; }
.guide-editorial[data-guide-motion] .ig-line.is-dashed { stroke-dasharray: 6 7; }
.guide-editorial[data-guide-motion] .ig-arrow { fill: var(--sonub-accent); stroke: none; }
.guide-editorial[data-guide-motion] .guide-outcome { background: var(--sonub-surface); border: 1px solid var(--sonub-border); border-inline-start: 4px solid var(--sonub-accent); }
.guide-editorial[data-guide-motion] .guide-outcome li > i { padding-block-start: 0.4rem; }
.guide-editorial[data-guide-motion] .guide-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; color: var(--sonub-muted); font-size: var(--wa-font-size-s); }
.guide-editorial[data-guide-motion] .guide-legend > li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.guide-editorial[data-guide-motion] .guide-legend-line { inline-size: 2rem; border-block-start: 2px solid var(--sonub-accent); }
.guide-editorial[data-guide-motion] .guide-legend-line.is-dashed { border-block-start-style: dashed; }
.guide-journey-route { position: relative; isolation: isolate; }
.guide-editorial[data-guide-motion] .guide-steps { position: relative; gap: 3.25rem; }
.guide-editorial[data-guide-motion] .guide-steps > li { z-index: 1; }
.guide-editorial[data-guide-motion] .guide-step {
	grid-template-columns: 3rem minmax(0, 1fr) minmax(10rem, 32%);
	grid-template-areas: 'number body art' '. go art';
	gap: 1rem 1.25rem;
	align-items: start;
	background: linear-gradient(var(--sonub-journey-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sonub-journey-grid) 1px, transparent 1px), var(--sonub-surface);
	background-size: 1.5rem 1.5rem;
}
.guide-editorial[data-guide-motion] .guide-step:hover { transform: none; }
.guide-editorial[data-guide-motion] .guide-step-n { display: inline-flex; grid-area: number; background: var(--sonub-accent); color: var(--wa-color-brand-on-loud); box-shadow: 0 0 0 5px var(--wa-color-brand-fill-quiet); }
.guide-editorial[data-guide-motion] [data-ig-dash] .guide-step-n { background: var(--sonub-surface); color: var(--sonub-accent-ink); border: 2px dashed var(--sonub-accent); box-shadow: none; }
.guide-editorial[data-guide-motion] .guide-step-body { grid-area: body; }
.guide-editorial[data-guide-motion] .guide-step-go { grid-area: go; }
.guide-journey-step-art { grid-area: art; align-self: center; min-inline-size: 0; overflow: hidden; border-radius: var(--wa-border-radius-l); border: 1px solid var(--sonub-border); }
.guide-editorial .guide-journey-step-art img { border-radius: 0; }
.guide-editorial[data-guide-motion] .guide-step-title { font-size: calc(1.18rem * var(--wa-font-size-scale, 1)); }
.guide-editorial[data-guide-motion] .guide-step-desc { font-size: var(--wa-font-size-m); line-height: 1.9; }
.guide-journey-step-help { position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem; }
.guide-editorial[data-guide-motion] .guide-editorial-interlude { inline-size: 80%; margin-block: 2rem 0; overflow: hidden; border-radius: var(--wa-border-radius-xl); }
.guide-editorial[data-guide-motion] .guide-editorial-interlude img { aspect-ratio: 5 / 2; object-position: center 55%; }
.guide-editorial[data-guide-motion] .guide-tips li { border-inline-start: 3px solid var(--wa-color-brand-border-loud); }
@container guide-reading (max-width: 50rem) {
	.guide-editorial[data-guide-motion] .guide-editorial-cover { grid-template-columns: minmax(0, 1fr); }
	.guide-editorial[data-guide-motion] .guide-step { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: 'number body' '. art' '. go'; }
	.guide-editorial[data-guide-motion] .guide-step-n { inline-size: 2.5rem; block-size: 2.5rem; }
	.guide-journey-step-art { inline-size: min(100%, 22rem); }
}
@container guide-reading (max-width: 30rem) {
	.guide-editorial[data-guide-motion] .guide-editorial-cover { padding: 1.1rem; gap: 1.25rem; }
	.guide-editorial[data-guide-motion] h1 { font-size: calc(1.9rem * var(--wa-font-size-scale, 1)); }
	.guide-editorial[data-guide-motion] .guide-step { grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-areas: 'number body' 'art art' 'go go'; gap: 1rem; }
	.guide-editorial[data-guide-motion] .guide-step-n { inline-size: 2.2rem; block-size: 2.2rem; }
	.guide-editorial[data-guide-motion] .guide-step-desc { margin-inline-start: -3.2rem; padding-block-start: 0.5rem; }
	.guide-journey-step-art { inline-size: 100%; }
	.guide-editorial[data-guide-motion] .guide-editorial-interlude { inline-size: 100%; }
	.guide-editorial[data-guide-motion] .guide-editorial-interlude img { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
	.guide-editorial[data-guide-motion] .guide-step { animation: none !important; transition: none; }
}