/* IT 기초 — 제목 착지 → 도구 비행 → 개념 그림 → 학습 경로. SSOT 11·23절. */
[data-study-motion] {
	--study-accent: var(--wa-color-brand-fill-loud);
	--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);
}
[data-study-motion='shell'] { --study-accent: var(--wa-color-success-fill-loud); }
[data-study-motion='python'] { --study-accent: var(--wa-color-warning-fill-loud); }
[data-study-motion] .coding-title-stage { --coding-accent: var(--study-accent); }
[data-study-motion] .coding-title-stage .page-title-card { background: transparent; box-shadow: none; border: 0; padding: 0; }
.study-cover-visual { position: relative; margin: 0; padding: 1rem; }
.study-cover-visual img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-l); }
.study-cover-tool { position: absolute; display: grid; place-items: center; inline-size: 3.1rem; block-size: 3.1rem; border: 2px solid var(--sonub-surface); border-radius: var(--wa-border-radius-l); background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); box-shadow: var(--wa-shadow-m); font-size: var(--wa-font-size-xl); }
.study-cover-tool:nth-of-type(1) { inset-block-start: 0; inset-inline-end: 0; rotate: 10deg; }
.study-cover-tool:nth-of-type(2) { inset-block-end: 0; inset-inline-end: 20%; background: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud); rotate: -8deg; }
.study-cover-tool:nth-of-type(3) { inset-block-start: 30%; inset-inline-start: 0; background: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud); rotate: -12deg; }
[data-study-motion] :is(.py-card, .git-step-card, .ai-course-part, .lesson-card, .tb-point, .games-skills, .info-card) { box-shadow: var(--wa-shadow-m); }
[data-study-motion] :is(.py-card, .git-step-card) { border-block-start: 3px solid var(--study-accent); }
[data-study-motion] :is(.py-lesson-head, .ai-lesson-head, .git-goals, .git-easy, .git-mistake) { border-inline-start: 4px solid var(--study-accent); background: color-mix(in srgb, var(--study-accent) 7%, var(--sonub-surface)); border-radius: var(--wa-border-radius-l); padding: 1.3rem; }
[data-study-motion] :is(.py-figure, .shell-figure, .ai-course-easy .sonub-figure, .git-body .sonub-figure, .tb-point .sonub-figure) { overflow: hidden; border-radius: var(--wa-border-radius-l); box-shadow: var(--wa-shadow-m); }
[data-study-motion] .ai-course-level-head { border-block-end: 2px solid var(--study-accent); padding-block-end: 1rem; }
[data-study-motion] .ai-course-part ol { position: relative; }
[data-study-motion] .ai-course-toc .ai-course-no { color: var(--sonub-accent-ink); }
.study-route { position: relative; isolation: isolate; }
.study-route > .ig-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.study-route .ig-line { fill: none; stroke: var(--study-accent); stroke-width: 2; }
.study-route .ig-node { fill: var(--study-accent); }
.study-route [data-ig-chain] > li { position: relative; z-index: 1; }
[data-study-motion='shell'] .hero-console .cursor { animation: none; }
[data-study-motion^='typing'] .lv-ladder li[data-state='next'] { animation-iteration-count: 2; }
[data-study-motion^='typing'] :is(.gc-best, .ec-go) { color: var(--sonub-accent-ink); }
[data-study-motion='typing-test'] .th-hero::before { content: none; }
[data-study-motion='typing-test'] .th-hero :is(h1, p, .hero-kicker, .page-guide-ask, .hero-keyboard span, .hg-copy, .hg-copy strong) { color: var(--sonub-ink); }
[data-study-motion='typing-test'] .th-hero :is(.hg-copy small, .hg-acc) { color: var(--sonub-muted); }
[data-study-motion='typing-test'] .th-hero :is(.hero-grades, .hero-keyboard span, .page-guide-ask) { background: var(--sonub-surface); border-color: var(--sonub-border); }
[data-study-motion='typing-test'] .hero-grade { background: color-mix(in srgb, var(--study-accent) 8%, var(--sonub-surface)); }
[data-study-motion='typing-test'] .gd .gd-rank { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	[data-study-motion] :is(.py-card, .git-step-card, .ai-course-part a) { transition: translate 160ms ease, box-shadow 160ms ease; }
	[data-study-motion] :is(.py-card, .git-step-card, .ai-course-part a):hover { translate: 0 -0.3rem; box-shadow: var(--wa-shadow-l); }
}
@media (max-width: 599px) { .study-cover-tool { inline-size: 2.6rem; block-size: 2.6rem; } }
@media (prefers-reduced-motion: reduce) {
	[data-study-motion] [data-webmovie], [data-study-motion] [data-webmovie]::before, [data-study-motion] [data-webmovie]::after { animation: none !important; transition: none !important; }
}