/* AI 활용·게임 개발 — 실험·업무·사업·로봇·출시의 강한 무대. SSOT 11·23절. */
[data-aiuse-motion] {
	--webmovie-burst: var(--wa-color-brand-fill-loud), var(--wa-color-warning-fill-loud), var(--wa-color-success-fill-loud);
	--webmovie-cascade: 65ms;
	--webmovie-cue-color: var(--wa-color-brand-fill-loud);
	--aiuse-motion-accent: var(--wa-color-brand-fill-loud);
}
[data-aiuse-scene='work'], [data-aiuse-scene='robot'] { --aiuse-motion-accent: var(--wa-color-success-fill-loud); }
[data-aiuse-scene='business'] { --aiuse-motion-accent: var(--wa-color-warning-fill-loud); }
[data-aiuse-motion] .coding-title-stage { --coding-accent: var(--aiuse-motion-accent); }
.aiuse-opening { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.aiuse-opening-copy { display: grid; gap: 1.5rem; min-inline-size: 0; }
[data-aiuse-motion] .aiuse-intro h2 { font-size: calc(clamp(1.6rem, 3vw, 2.2rem) * var(--wa-font-size-scale, 1)); color: var(--sonub-accent-ink); text-wrap: balance; }
[data-aiuse-motion] .aiuse-core { border-inline-start: 5px solid var(--aiuse-motion-accent); background: linear-gradient(120deg, color-mix(in srgb, var(--aiuse-motion-accent) 13%, var(--sonub-surface)), var(--sonub-surface)); box-shadow: var(--wa-shadow-s); }
.aiuse-hero-media { position: relative; overflow: hidden; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-l); }
.aiuse-hero-media img { border-radius: 0; box-shadow: none; }
.aiuse-opening .aiuse-hero img { aspect-ratio: 3 / 2; }
.aiuse-hero-seal { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--wa-border-radius-m); color: var(--wa-color-brand-on-loud); background: var(--wa-color-brand-fill-loud); box-shadow: var(--wa-shadow-m); font-size: var(--wa-font-size-l); }
.aiuse-hero-replay { position: absolute; z-index: 2; inset-block-end: 0.8rem; inset-inline-end: 0.8rem; background: var(--sonub-surface); color: var(--sonub-accent-ink); box-shadow: var(--wa-shadow-s); font-size: var(--wa-font-size-xs); }
[data-aiuse-motion] :is(.aiuse-card, .aiuse-stop-card, .aiuse-fork-row) { box-shadow: var(--wa-shadow-m); background: linear-gradient(130deg, color-mix(in srgb, var(--aiuse-motion-accent) 6%, var(--sonub-surface)), var(--sonub-surface) 65%); }
[data-aiuse-motion] .aiuse-card { border-block-start: 3px solid var(--aiuse-motion-accent); }
[data-aiuse-motion] .aiuse-stop-value { background: color-mix(in srgb, var(--aiuse-motion-accent) 10%, var(--sonub-surface)); border-radius: var(--wa-border-radius-l); padding: 0.7rem; }
[data-aiuse-motion] .aiuse-stats > li { box-shadow: var(--wa-shadow-m); border-block-start: 4px solid var(--aiuse-motion-accent); }
[data-aiuse-motion] .aiuse-stats strong { color: var(--sonub-accent-ink); }
[data-aiuse-motion] .aiuse-quote-box { box-shadow: var(--wa-shadow-m); }
[data-aiuse-motion] .aiuse-quote blockquote { border-inline-start: 4px solid var(--aiuse-motion-accent); }
[data-aiuse-motion] .aiuse-robot-pins > li { box-shadow: var(--wa-shadow-s); }
[data-aiuse-motion] .aiuse-robot-parts .dg-table tbody tr:last-child .dg-head { white-space: nowrap; }
[data-aiuse-motion] .aiuse-tab > .ig-svg { --webmovie-dur: 1200ms; }
.aiuse-flow { position: relative; isolation: isolate; }
.aiuse-flow > .ig-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.aiuse-flow .ig-line { fill: none; stroke: var(--aiuse-motion-accent); stroke-width: 2; }
.aiuse-flow .ig-node { fill: var(--aiuse-motion-accent); }
.aiuse-flow [data-ig-chain] > li { position: relative; z-index: 1; }
/* 기존 게임의 끝없는 장식은 멈추고, 등장·도장은 webmovie가 재생한다. */
.game-page[data-aiuse-motion] .game-stage > span,
.game-page[data-aiuse-motion] .game-kicker-dot,
.game-page[data-aiuse-motion] .game-flow li + li::before,
.game-page[data-aiuse-motion] .game-quick-steps li + li::before,
.game-page[data-aiuse-motion] .game-wire-line::after { animation: none; }
.game-page[data-aiuse-motion] .game-hero { box-shadow: var(--wa-shadow-l); }
.game-page[data-aiuse-motion] .game-motion-replay { display: flex; justify-content: flex-end; margin-block-start: 1rem; }
.game-page[data-aiuse-motion] .game-motion-replay button { background: var(--sonub-surface); color: var(--sonub-accent-ink); }
.game-page[data-aiuse-motion] :is(.g-card, .game-stack-card, .game-choice-card, .game-steps > li) { box-shadow: var(--wa-shadow-m); }
.game-page[data-aiuse-motion] .g-section > h2 { color: var(--sonub-accent-ink); text-wrap: balance; }
.game-page[data-aiuse-motion] .g-note > strong { color: var(--wa-color-warning-on-quiet); }
.game-page[data-aiuse-motion] .sonub-figure { overflow: hidden; border-radius: var(--wa-border-radius-l); box-shadow: var(--wa-shadow-m); }
.game-hub[data-aiuse-motion] .game-card { box-shadow: var(--wa-shadow-m); }
.game-hub[data-aiuse-motion] :is(.game-card-step, .game-card-go) { color: var(--sonub-accent-ink); }
.game-page[data-aiuse-motion] .game-cp-steps b { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	[data-aiuse-motion] :is(.aiuse-card, .aiuse-fork-row) { transition: translate 160ms ease, box-shadow 160ms ease; }
	[data-aiuse-motion] :is(.aiuse-card, .aiuse-fork-row):hover { translate: 0 -0.3rem; box-shadow: var(--wa-shadow-l); }
}
@media (max-width: 1199px) { .aiuse-opening { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
	[data-aiuse-motion] [data-webmovie], [data-aiuse-motion] [data-webmovie]::before, [data-aiuse-motion] [data-webmovie]::after { animation: none !important; transition: none !important; }
}