/* motion.css — motion.js 짝 스타일 (ADR 0065 Amend (3), 2026-10-12).
   html.am-on 은 motion.js 가 모션이 켜져 있을 때만 붙인다(축소 모션·capture-mode 에서는 붙지 않는다).
   이 파일은 정지 화면의 배치를 바꾸지 않는다 — 고스트·썸·추적선은 모션 중에만 잠깐 생겼다 사라지는 덧그림이다. */

/* JS 가 화면 진입·시트 열림을 맡으므로 CSS 쪽 기본 연출은 겹치지 않게 끈다 */
html.am-on .screen { animation: none; }
html.am-on .sheet, html.am-on .sheet::backdrop { transition: none; }
html.am-on .toast { animation: am-toast-in var(--dur-4) var(--ease-spring) both; }
@keyframes am-toast-in { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
html.am-on .toast .ico-ok { stroke-dasharray: 30; animation: am-draw var(--dur-4) var(--ease-out) var(--dur-2) both; }
@keyframes am-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }

/* 메뉴 항목: 손가락·커서 아래에서 살짝 밀려난다 */
html.am-on .nav-a { transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (min-width: 700px) { html.am-on .side-nav .nav-a:hover:not(:active) { transform: translateX(3px); } }
html.am-on .wcard { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
@media (hover: hover) { html.am-on .wcard:hover:not(:active) { transform: translateY(-2px); } }
html.am-on .wcard:active { transform: scale(.97); }

/* 닫히는 오버레이·빠지는 항목의 복제본 */
.am-ghost { position: fixed !important; margin: 0 !important; inset: auto !important; max-width: none !important; max-height: none !important;
  pointer-events: none !important; z-index: 95; animation: none !important; overflow: hidden; box-sizing: border-box; }
.am-ghost[hidden] { display: block !important; }
.am-ghost-bd { position: fixed; inset: 0; z-index: 94; pointer-events: none; background: hsl(var(--brand-h) 30% 8% / .5); }

/* 미끄러지는 선택 표시 — 선택 배경을 잠시 썸에 넘긴다 */
.am-gliding { isolation: isolate; }
.am-gliding > .am-sel { background: transparent !important; box-shadow: none !important; border-bottom-color: transparent !important; }
.am-thumb { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; will-change: transform, width; }

/* S7 시그니처 추적선 */
.am-trace { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 2; }
.am-trace path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.am-trace path.bad { stroke: var(--bad); }
.am-trace path.heal { stroke: var(--ok); stroke-width: 3.5; opacity: 1; }
.am-trace path.broken { stroke: var(--bad); stroke-dasharray: 3 5; stroke-width: 1.5; }
.am-trace circle { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.am-trace circle.bad { fill: var(--bad); }
.am-trace circle.heal, .am-trace circle.runner { fill: var(--ok); }
.am-trace circle.runner { filter: drop-shadow(0 0 6px var(--ok)); transform-box: view-box; transform-origin: 0 0; }
.am-trace circle.burst { fill: none; stroke: var(--ok); stroke-width: 2; }
.am-trace .spark line { stroke: var(--bad); stroke-width: 2; stroke-linecap: round; }

/* 바닥: 남은 덧그림은 축소 모션·캡처에서 보이지 않는다 */
@media (prefers-reduced-motion: reduce) { .am-ghost, .am-ghost-bd, .am-thumb, .am-trace { display: none !important; } }
body.capture-mode .am-ghost, body.capture-mode .am-ghost-bd, body.capture-mode .am-thumb, body.capture-mode .am-trace { display: none !important; }

/* 움직이는 동안만 본문의 가로 넘침을 자른다 — 360 폭에서 진입 슬라이드가 페이지를 축소시키지 않게 (motion.js clipWhile) */
#main.am-clip-x { overflow-x: clip; }