/* AI 학습 가이드 — 과학 실험 노트와 개념 신호. SSOT 11·23절. */
.guide-ai-lab { display: grid; position: relative; gap: 1rem; min-inline-size: 0; }
.guide-ai-photo-frame { position: relative; overflow: hidden; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); }
.guide-editorial .guide-ai-photo { border-radius: 0; --webmovie-focus: 72% 60%; }
.guide-ai-scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 35%, color-mix(in srgb, var(--wa-color-brand-fill-loud) 22%, transparent) 50%, transparent 65%); opacity: 0; }
.guide-ai-signal { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 1.7rem; padding-block: 1rem; isolation: isolate; }
.guide-ai-station { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.15rem; min-inline-size: 0; border: 1px solid var(--sonub-border); background: var(--sonub-surface); border-radius: var(--wa-border-radius-m); padding: 0.7rem 0.25rem; }
.guide-ai-station > a { display: grid; justify-items: center; gap: 0.5rem; inline-size: 100%; min-block-size: 2.5rem; color: var(--sonub-accent-ink); font-size: var(--wa-font-size-xs); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.guide-ai-station > a > i { font-size: var(--wa-font-size-xl); }
.guide-ai-station > a:hover { text-decoration: underline; }
.guide-ai-model { background: var(--wa-color-brand-fill-quiet); border-color: var(--wa-color-brand-border-loud); }
.guide-ai-orbit { position: absolute; inset: -0.55rem; border: 1px dashed var(--sonub-accent); border-radius: var(--wa-border-radius-l); pointer-events: none; }
.guide-ai-orbit::before, .guide-ai-orbit::after { content: ''; position: absolute; inline-size: 0.4rem; block-size: 0.4rem; background: var(--sonub-accent); border-radius: 50%; }
.guide-ai-orbit::before { inset-block-start: -0.2rem; inset-inline-start: 30%; }
.guide-ai-orbit::after { inset-block-end: -0.2rem; inset-inline-end: 30%; }
.guide-ai-lab .guide-ai-replay { justify-self: end; min-block-size: 2.5rem; font-size: var(--wa-font-size-xs); padding: 0.4rem 0.8rem; }
.guide-ai-lab figcaption { font-size: var(--wa-font-size-xs); line-height: 1.7; }
@container guide-reading (max-width: 50rem) {
	.guide-ai-lab { max-inline-size: 38rem; inline-size: 100%; justify-self: center; }
}
@container guide-reading (max-width: 30rem) {
	.guide-ai-signal { gap: 1.4rem; }
	.guide-ai-station { padding-block: 0.6rem; }
}
@media screen and (prefers-reduced-motion: no-preference) {
	.webmovie-js .guide-ai-scan.webmovie-in { animation: guide-ai-scan 1600ms ease both; animation-delay: var(--webmovie-delay, 300ms); }
	.webmovie-js .guide-ai-orbit.webmovie-in { animation: guide-ai-orbit 1800ms ease both; animation-delay: var(--webmovie-delay, 1300ms); }
}
@keyframes guide-ai-scan { 0% { translate: -100% 0; opacity: 0; } 25% { opacity: 1; } 85% { opacity: 1; } 100% { translate: 100% 0; opacity: 0; } }
@keyframes guide-ai-orbit { 0% { rotate: -160deg; scale: 0.5; opacity: 0; } 55% { rotate: 20deg; scale: 1.15; opacity: 1; } 100% { rotate: 0deg; scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.guide-ai-lab * { animation: none !important; transition: none; }
}