/* 업무 전문 가이드 — 문서가 날아와 정리되는 보드. 공용 경로는 guide-journey.css. SSOT 11·23절. */
.guide-editorial[data-track='work'] {
	--webmovie-burst: var(--sonub-accent), var(--wa-color-success-fill-loud), var(--wa-color-warning-fill-loud);
	--webmovie-x: -65px;
	--webmovie-y: 55px;
	--webmovie-s: 0.55;
}
.guide-editorial[data-track='work'] .guide-editorial-cover {
	position: relative;
	background: radial-gradient(ellipse at 95% 0%, var(--wa-color-brand-fill-quiet), transparent 65%), linear-gradient(135deg, var(--sonub-surface) 65%, var(--wa-color-warning-fill-quiet));
	border-block-start: 4px solid var(--sonub-accent);
	box-shadow: var(--wa-shadow-m);
}
.guide-editorial[data-track='work'] h1 { color: var(--sonub-accent-ink); font-size: calc(clamp(2.1rem, 3.4vw, 3.15rem) * var(--wa-font-size-scale, 1)); }
.guide-editorial[data-track='work'] .guide-editorial-introduction > .sonub-eyebrow { padding: 0.4rem 0.75rem; border-radius: var(--wa-border-radius-pill); background: var(--wa-color-brand-fill-quiet); }
.guide-work-desk { display: grid; gap: 1.25rem; min-inline-size: 0; }
.guide-work-scene { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--wa-border-radius-xl); padding: 3.7rem 1.3rem 1.5rem; background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--wa-color-warning-fill-loud) 50%, transparent), transparent 65%), linear-gradient(140deg, var(--sonub-accent), color-mix(in srgb, var(--sonub-accent) 80%, var(--sonub-ink))); box-shadow: var(--wa-shadow-l); }
.guide-work-scene .guide-work-replay { position: absolute; z-index: 3; inset-block-start: 0.7rem; inset-inline-end: 0.8rem; min-block-size: 2.5rem; padding: 0.35rem 0.7rem; font-size: var(--wa-font-size-xs); background: var(--sonub-surface); color: var(--sonub-accent-ink); border: 0; }
.guide-work-halo { position: absolute; inset-block-start: 12%; inset-inline-start: 7%; inline-size: 85%; aspect-ratio: 1; border: 1px dashed color-mix(in srgb, var(--wa-color-brand-on-loud) 55%, transparent); border-radius: 50%; pointer-events: none; }
.guide-work-rig { position: relative; z-index: 1; }
.guide-work-photo-frame { position: relative; overflow: hidden; border: 1px solid var(--wa-color-brand-on-loud); border-radius: var(--wa-border-radius-l); box-shadow: var(--wa-shadow-m); }
.guide-editorial .guide-work-photo-frame img { border-radius: 0; aspect-ratio: 4 / 3; --webmovie-focus: 65% 60%; }
.guide-work-sweep { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--wa-color-brand-on-loud) 65%, transparent), transparent 80%); }
.guide-work-papers { position: relative; inline-size: 66%; block-size: 8rem; margin-block-start: -3.4rem; margin-inline-start: auto; pointer-events: none; }
.guide-work-sheet { position: absolute; display: grid; justify-items: start; align-content: center; gap: 0.4rem; inline-size: 72%; block-size: 6.6rem; padding: 0.8rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); box-shadow: var(--wa-shadow-m); }
.guide-work-sheet-back { inset-block-start: 0; inset-inline-start: 0; background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); transform: rotate(-9deg); }
.guide-work-sheet-front { inset-block-start: 0.65rem; inset-inline-start: 14%; background: var(--sonub-surface); color: var(--sonub-accent-ink); transform: rotate(5deg); }
.guide-work-sheet > i { font-size: var(--wa-font-size-xl); }
.guide-work-sheet > span { inline-size: 100%; block-size: 0.25rem; border-radius: var(--wa-border-radius-pill); background: var(--wa-color-brand-fill-quiet); }
.guide-work-sheet > span:last-child { inline-size: 62%; }
.guide-work-seal { position: absolute; inset-inline-end: 0.2rem; inset-block-end: 0.35rem; display: inline-flex; align-items: center; justify-content: center; inline-size: 3.6rem; block-size: 3.6rem; border: 3px solid var(--wa-color-success-fill-loud); border-radius: 50%; background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); box-shadow: var(--wa-shadow-s); font-size: var(--wa-font-size-xl); --webmovie-burst: var(--wa-color-success-fill-loud), var(--wa-color-brand-on-loud); }
.guide-work-flow { position: relative; isolation: isolate; margin-block-start: 0.9rem; }
.guide-work-stations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.guide-work-stations > li { position: relative; z-index: 1; margin: 0; padding: 0.7rem 0.3rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); box-shadow: var(--wa-shadow-s); }
.guide-work-stations > li:nth-child(2) { background: var(--wa-color-warning-fill-quiet); }
.guide-work-stations > li:nth-child(3) { background: var(--wa-color-success-fill-quiet); }
.guide-work-stations a { display: grid; justify-items: center; gap: 0.5rem; min-block-size: 2.5rem; color: var(--sonub-accent-ink); text-align: center; text-decoration: none; font-weight: 750; font-size: var(--wa-font-size-xs); overflow-wrap: anywhere; }
.guide-work-stations a > i { font-size: var(--wa-font-size-xl); }
.guide-work-stations a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.guide-work-stations .glossary-info { display: flex; margin-inline: auto; margin-block-start: 0.4rem; }
.guide-editorial[data-track='work'] .guide-work-flow > .ig-svg { --webmovie-delay: 2500ms; --webmovie-dur: 1400ms; }
.guide-editorial[data-track='work'] .guide-work-flow .ig-line { stroke: var(--wa-color-brand-on-loud); }
.guide-work-desk figcaption { font-size: var(--wa-font-size-s); line-height: 1.7; }
.guide-editorial[data-track='work'] .guide-facts { background: var(--wa-color-brand-fill-quiet); border: 0; box-shadow: var(--wa-shadow-s); }
.guide-editorial[data-track='work'] .guide-journey-meter { flex-wrap: wrap; }
.guide-editorial[data-track='work'] .guide-outcome { background: linear-gradient(125deg, var(--wa-color-success-fill-quiet), var(--sonub-surface) 70%); border: 0; box-shadow: var(--wa-shadow-s); }
.guide-editorial[data-track='work'] .guide-steps > li { --sonub-work-tone: var(--sonub-accent); }
.guide-editorial[data-track='work'] .guide-steps > li:nth-child(3n + 2) { --sonub-work-tone: var(--wa-color-success-fill-loud); }
.guide-editorial[data-track='work'] .guide-steps > li:nth-child(3n) { --sonub-work-tone: var(--wa-color-warning-fill-loud); }
.guide-editorial[data-track='work'] .guide-step { border-inline-start: 5px solid var(--sonub-work-tone); background: linear-gradient(135deg, color-mix(in srgb, var(--sonub-work-tone) 7%, var(--sonub-surface)), var(--sonub-surface) 65%); box-shadow: var(--wa-shadow-s); }
.guide-editorial[data-track='work'] [data-ig-dash] .guide-step { border-inline-start-style: dashed; }
.guide-editorial[data-track='work'] a.guide-step:hover { border-color: var(--sonub-work-tone); box-shadow: var(--wa-shadow-m); }
.guide-editorial[data-track='work'] .guide-step-n { --webmovie-burst: var(--sonub-work-tone), var(--sonub-accent); }
.guide-editorial[data-track='work'] .guide-journey-step-art { box-shadow: var(--wa-shadow-s); border: 0; }
.guide-editorial[data-track='work'] .guide-step-soon { padding: 0.35rem 0.65rem; border-radius: var(--wa-border-radius-m); color: var(--wa-color-warning-on-quiet); background: var(--wa-color-warning-fill-quiet); }
.guide-editorial[data-track='work'] div.guide-step { cursor: default; }
.guide-editorial[data-track='work'] .guide-tips li { box-shadow: var(--wa-shadow-xs); }
@container guide-reading (max-width: 50rem) {
	.guide-work-desk { inline-size: 100%; max-inline-size: 38rem; justify-self: center; }
}
@container guide-reading (max-width: 30rem) {
	.guide-editorial[data-track='work'] h1 { font-size: calc(2rem * var(--wa-font-size-scale, 1)); }
	.guide-work-scene { padding-inline: 0.85rem; }
	.guide-work-stations { gap: 1.2rem; }
	.guide-work-papers { inline-size: 74%; }
	.guide-work-seal { inline-size: 3rem; block-size: 3rem; }
}
@media screen and (prefers-reduced-motion: no-preference) {
	.webmovie-js .guide-work-sweep.webmovie-in { animation: guide-work-sweep 1300ms ease var(--webmovie-delay, 1100ms) both; }
}
@keyframes guide-work-sweep { 0% { translate: -100% 0; opacity: 0; } 30%, 70% { opacity: 0.8; } 100% { translate: 100% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.guide-work-desk * { animation: none !important; transition: none; }
}