/* IT 전문 가이드 — 도구가 조립되는 작업실. 색은 세 테마 토큰, 연출은 webmovie 한 번. SSOT 11·23절. */
.guide-editorial[data-track='it'] {
	--webmovie-burst: var(--sonub-accent), var(--wa-color-success-fill-loud), var(--wa-color-warning-fill-loud);
	--webmovie-x: -60px;
	--webmovie-y: 50px;
	--webmovie-s: 0.6;
}
.guide-editorial[data-track='it'] .guide-editorial-cover {
	position: relative;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	background: radial-gradient(ellipse at 15% 10%, var(--wa-color-brand-fill-quiet), transparent 65%), var(--sonub-surface);
	border-block-start: 4px solid var(--sonub-accent);
	box-shadow: var(--wa-shadow-m);
}
.guide-editorial[data-track='it'] h1 { color: var(--sonub-accent-ink); font-size: calc(clamp(2.1rem, 3.5vw, 3.2rem) * var(--wa-font-size-scale, 1)); }
.guide-editorial[data-track='it'] .guide-editorial-introduction > .sonub-eyebrow { padding: 0.4rem 0.75rem; background: var(--wa-color-brand-fill-quiet); border-radius: var(--wa-border-radius-pill); }
.guide-it-workshop { display: grid; gap: 1rem; min-inline-size: 0; }
.guide-it-stage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 2rem 1.25rem 1.5rem;
	border-radius: var(--wa-border-radius-xl);
	background: radial-gradient(ellipse at 10% 10%, color-mix(in srgb, var(--wa-color-success-fill-loud) 55%, transparent), transparent 60%), linear-gradient(135deg, var(--sonub-accent), color-mix(in srgb, var(--sonub-accent) 65%, var(--sonub-ink)));
	box-shadow: var(--wa-shadow-l);
	perspective: 70rem;
}
.guide-it-camera { position: relative; z-index: 1; --webmovie-focus: 70% 50%; }
.guide-it-rig { position: relative; z-index: 1; }
.guide-it-window { position: relative; overflow: hidden; border: 1px solid var(--wa-color-brand-on-loud); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); box-shadow: var(--wa-shadow-l); }
.guide-it-window-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.8rem; color: var(--sonub-accent-ink); background: var(--sonub-surface); }
.guide-it-window-bar > span { inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: var(--wa-color-brand-fill-loud); }
.guide-it-window-bar > span:nth-child(2) { background: var(--wa-color-warning-fill-loud); }
.guide-it-window-bar > span:nth-child(3) { background: var(--wa-color-success-fill-loud); }
.guide-it-window-bar > i { margin-inline-start: auto; }
.guide-editorial .guide-it-window img { border-radius: 0; aspect-ratio: 8 / 5; }
.guide-it-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 20%, color-mix(in srgb, var(--wa-color-brand-on-loud) 60%, transparent), transparent 80%); }
.guide-it-halo, .guide-it-orbit { position: absolute; pointer-events: none; border-radius: 50%; z-index: 0; }
.guide-it-halo { inline-size: 85%; aspect-ratio: 1; inset-inline-start: 7%; inset-block-start: 5%; border: 2rem solid color-mix(in srgb, var(--wa-color-brand-on-loud) 12%, transparent); }
.guide-it-orbit { inline-size: 80%; aspect-ratio: 1; inset-inline-end: 8%; inset-block-end: 6%; border: 1px dashed color-mix(in srgb, var(--wa-color-brand-on-loud) 65%, transparent); box-shadow: 0 0 0 0.8rem color-mix(in srgb, var(--wa-color-brand-on-loud) 6%, transparent); }
.guide-it-tools { position: relative; margin-block-start: 1.7rem; isolation: isolate; }
.guide-it-toolchain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem; list-style: none; padding: 0; margin: 0; }
.guide-it-toolchain > li { margin: 0; }
.guide-it-tool { position: relative; z-index: 1; min-inline-size: 0; padding-block: 0.7rem; padding-inline: 0.6rem 1.6rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); color: var(--sonub-accent-ink); box-shadow: var(--wa-shadow-m); }
.guide-it-tool:nth-child(2) { color: var(--wa-color-success-on-quiet); background: var(--wa-color-success-fill-quiet); }
.guide-it-tool:nth-child(3) { color: var(--wa-color-warning-on-quiet); background: var(--wa-color-warning-fill-quiet); }
.guide-it-tool:nth-child(4) { background: var(--wa-color-brand-fill-quiet); }
.guide-it-tool > a { display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.5rem; color: inherit; font-size: var(--wa-font-size-xs); font-weight: 750; text-decoration: none; overflow-wrap: anywhere; }
.guide-it-tool > a > i { flex: 0 0 auto; font-size: var(--wa-font-size-l); }
.guide-it-tool > a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.guide-it-tool > .glossary-info { position: absolute; inset-inline-end: 0.3rem; inset-block-start: 0.3rem; }
.guide-editorial[data-track='it'] .guide-it-tools > .ig-svg { --webmovie-delay: 1500ms; --webmovie-dur: 1800ms; }
.guide-editorial[data-track='it'] .guide-it-tools .ig-line { stroke: var(--wa-color-brand-on-loud); }
.guide-it-workshop figcaption { font-size: var(--wa-font-size-s); line-height: 1.7; }
.guide-it-workshop .guide-it-replay { justify-self: end; font-size: var(--wa-font-size-s); min-block-size: 2.5rem; padding: 0.4rem 0.8rem; }
.guide-editorial[data-track='it'] .guide-facts { border: 0; background: var(--wa-color-brand-fill-quiet); box-shadow: var(--wa-shadow-s); }
.guide-editorial[data-track='it'] .guide-journey-meter { display: grid; grid-template-columns: repeat(6, 0.65rem); inline-size: max-content; max-inline-size: 100%; }
.guide-editorial[data-track='it'] .guide-outcome { border: 0; box-shadow: var(--wa-shadow-s); background: linear-gradient(125deg, var(--wa-color-success-fill-quiet), var(--sonub-surface) 70%); }
.guide-editorial[data-track='it'] .guide-steps > li { --sonub-it-step: var(--sonub-accent); }
.guide-editorial[data-track='it'] .guide-steps > li:nth-child(3n + 2) { --sonub-it-step: var(--wa-color-success-fill-loud); }
.guide-editorial[data-track='it'] .guide-steps > li:nth-child(3n) { --sonub-it-step: var(--wa-color-warning-fill-loud); }
.guide-editorial[data-track='it'] .guide-step { border-block-start: 4px solid var(--sonub-it-step); background: linear-gradient(145deg, color-mix(in srgb, var(--sonub-it-step) 6%, var(--sonub-surface)), var(--sonub-surface) 65%); box-shadow: var(--wa-shadow-s); }
.guide-editorial[data-track='it'] .guide-step:hover { box-shadow: var(--wa-shadow-m); border-color: var(--sonub-it-step); }
.guide-editorial[data-track='it'] .guide-step-n { --webmovie-burst: var(--sonub-it-step), var(--sonub-accent); }
.guide-editorial[data-track='it'] .guide-journey-step-art { border: 0; box-shadow: var(--wa-shadow-s); }
.guide-editorial[data-track='it'] .guide-step-bullets { grid-column: auto; }
.guide-editorial[data-track='it'] .guide-step-bullets > span { font-size: var(--wa-font-size-s); }
.guide-editorial[data-track='it'] .guide-tips li { box-shadow: var(--wa-shadow-xs); }
@container guide-reading (max-width: 50rem) {
	.guide-it-workshop { inline-size: 100%; max-inline-size: 38rem; justify-self: center; }
}
@container guide-reading (max-width: 30rem) {
	.guide-editorial[data-track='it'] h1 { font-size: calc(2.05rem * var(--wa-font-size-scale, 1)); }
	.guide-it-stage { padding: 1.25rem 0.85rem; }
	.guide-it-tool > a { flex-direction: column; align-items: start; }
}
@media screen and (prefers-reduced-motion: no-preference) {
	.webmovie-js .guide-it-sweep.webmovie-in { animation: guide-it-sweep 1300ms ease var(--webmovie-delay, 800ms) both; }
}
@keyframes guide-it-sweep {
	0% { translate: -100% 0; opacity: 0; }
	30%, 70% { opacity: 0.8; }
	100% { translate: 100% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.guide-it-workshop * { animation: none !important; transition: none; }
}