/* app-motion.css — 손글씨 진단 데모 모션 재작업 (2026-10-12, ADR 0065 Amend (3)).
 * index.html 의 <style> 뒤, mk/motion-kit.css 뒤에 읽는다.
 * 바닥 1: 모든 애니메이션·전환은 index.html·motion-kit.css 의 prefers-reduced-motion / body.capture-mode 블록이 0으로 만든다.
 * 바닥 2: 여기서 기본 상태로 숨기는 것은 없다. 숨김(.m1-pre, WAAPI 시작 프레임)은 JS가 모션이 켜졌을 때만 붙인다.
 */

/* ── 상단바: 스크롤이 시작될 때만 경계선 (§10-4) ── */
.topbar { border-bottom-color:transparent; transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.topbar.is-scrolled { border-bottom-color:var(--line); box-shadow:var(--elev-1); }

/* ── 슬라이딩 인디케이터 (JS가 모션 켜짐일 때만 .mk-ind 를 붙인다) ── */
.tb-nav > .mk-indicator { height:3px; background:var(--accent); border-radius:3px; }
.tabs > .mk-indicator { height:3px; background:var(--accent); }
.tabs.mk-ind .tab[aria-selected="true"] { border-bottom-color:transparent; }

/* ── 대화상자·시트·메뉴: 열림·닫힘 양방향 (닫힘은 .open 제거 → 같은 전환이 거꾸로) ── */
.dlg-backdrop, .menu-backdrop, .guide-backdrop { transition:opacity var(--dur-3) var(--ease-out); }
.dlg { transform:translateY(22px) scale(.94); opacity:.4;
       transition:transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-out); }
.dlg-backdrop.open .dlg { transform:none; opacity:1; }
.sheet-backdrop .dlg { transform:translateY(100%); opacity:1; transition:transform var(--dur-3) var(--ease-expo); }
.sheet-backdrop.open .dlg { transform:none; }
.menu-sheet { transform:translateX(100%); transition:transform var(--dur-3) var(--ease-expo); }
.guide-modal { transform:translateY(28px) scale(.95); opacity:.3;
               transition:transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-out); }
.guide-backdrop.open .guide-modal { transform:none; opacity:1; }
/* 닫히는 중에는 화면 조작을 막지 않는다 */
.dlg-backdrop.closing, .menu-backdrop.closing, .guide-backdrop.closing, #unsupTip.closing { pointer-events:none; }
.dlg-backdrop.closing .dlg, .guide-backdrop.closing .guide-modal { transition-timing-function:var(--ease-in, cubic-bezier(.4,0,1,1)); }

/* 미지원 고지 팝오버: 튀어나오고, 닫힐 때도 줄어들며 사라진다 */
#unsupTip { transform:translateY(-8px) scale(.96); transform-origin:top left;
            transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring); }
#unsupTip.open { transform:none; }

/* ── 토스트: 스프링으로 올라오고, 사라질 때 내려가며 흐려진다 ── */
.toast { animation:toast-in2 var(--dur-3) var(--ease-spring) both; }
.toast.out { animation:toast-out var(--dur-2) cubic-bezier(.4,0,1,1) both; pointer-events:none; }
@keyframes toast-in2 { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes toast-out { to { opacity:0; transform:translateY(12px) scale(.97); } }

/* ── 누름 깊이 보강 (이미 있는 :active 와 같은 가족) ── */
.btn-primary:active { transform:scale(.96); box-shadow:inset 0 2px 6px hsl(var(--brand-h) 40% 10% / .25); }
.sample:active, .q-item:active, .xbadge:active { transform:scale(.97); }
.photo-zoom:active, .back-btn:active { transform:scale(.96); }
.lane-toggle:active .chev { transform:translateY(2px) rotate(var(--chev-rot, 0deg)); }
.lane-toggle[aria-expanded="true"] { --chev-rot:180deg; }
select:active, input[type="text"]:focus-visible { border-color:var(--accent); }

/* ── 완료 체크 (JS가 저장·승인 직후에만 끼워 넣는다) ── */
.mk-done-check { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
                 background:var(--ok); color:#fff; margin-right:var(--sp-2); vertical-align:middle; }
:root[data-theme="dark"] .mk-done-check { color:hsl(var(--brand-h) 30% 10%); }

/* ── S1·S2 스캔 빔: 사진을 위에서 아래로 훑는다 (JS가 모션 켜짐일 때만 만든다) ── */
.scan { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.scan-beam { position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px;
             background:var(--accent);
             box-shadow:0 0 12px 3px color-mix(in srgb, var(--accent) 55%, transparent),
                        0 -40px 50px -10px color-mix(in srgb, var(--accent) 22%, transparent); }
.scan-grid { position:absolute; inset:0;
             background-image:linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px),
                              linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px);
             background-size:24px 24px; }
.outline.mk-ring { box-shadow:0 0 0 0 hsl(354 80% 55% / .55); }

/* ── S4 시그니처: 검증 게이트 흐름도 오버레이 ── */
#lanes { position:relative; }
.vflow { position:absolute; left:0; top:0; pointer-events:none; z-index:4; overflow:visible; }
.vflow .vf-path { fill:none; stroke-width:2; stroke-linecap:round; opacity:.55; }
.vflow .vf-path.pass { stroke:var(--ok); }
.vflow .vf-path.bad { stroke:var(--bad); }
.vflow .vf-path.na { stroke:var(--warn); }
.vflow .vf-gate { fill:var(--surface); stroke:var(--line-strong); stroke-width:1.5; }
.vflow .vf-gate.ok { fill:var(--ok); stroke:var(--ok); }
.vflow .vf-gate.bad { fill:var(--bad); stroke:var(--bad); }
.vflow .vf-gate.na { fill:var(--warn); stroke:var(--warn); }
.vflow .vf-tok { stroke:var(--surface); stroke-width:2; }
.vflow .vf-tok.pass { fill:var(--accent); }
.vflow .vf-tok.bad { fill:var(--bad); }
.vflow .vf-tok.na { fill:var(--warn); }
.vflow .vf-ring { fill:none; stroke-width:2; }
.vflow .vf-ring.pass { stroke:var(--ok); }
.vflow .vf-ring.bad { stroke:var(--bad); }
.vflow .vf-ring.na { stroke:var(--warn); }
.vflow .vf-lbl { font:600 10px/1 var(--font-ui); fill:var(--text-2); letter-spacing:.02em; }
.vflow .vf-src { fill:none; stroke:var(--accent); stroke-width:2; }
/* 흐름도가 함께 돌 때 카드는 토큰이 닿을 즈음 자리 잡는다 */
.m1-play.has-flow .vcard { transition-delay:calc(var(--i, 0) * 90ms + 560ms); }
.m1-play.has-flow .dot-mark { transition-delay:calc(var(--i, 0) * 90ms + 820ms + var(--j, 0) * 110ms); }
.m1-play.has-flow .dot-reason { transition-delay:calc(var(--i, 0) * 90ms + 900ms + var(--j, 0) * 110ms); }
.m1-play .dot-mark { transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring); }
.m1-pre .dot-mark { transform:scale(.4); }

/* ── S5: 막대 그려지기 원점 ── */
.bar-fill { transform-origin:left center; }
.meter-bar > span { transform-origin:left center; }

/* ── 첫 화면 히어로 리빌용 원점 ── */
.s-head .t-screen { transform-origin:left bottom; }

/* ── 테마 전환 원형 리빌 (View Transitions) — 키트의 기본 화면 전환 키프레임 대신 JS가 clip-path 원을 키운다 ── */
:root.vt-theme::view-transition-old(root), :root.vt-theme::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
:root.vt-theme::view-transition-old(root) { z-index:1; }
:root.vt-theme::view-transition-new(root) { z-index:2; }