/* motion.css — 동작·포커스 표준 (2026-10-10)
   근거: 이밀 코왈스키 design-engineering 규칙(속도·곡선·scale 0.97) + Vercel Web Interface Guidelines(포커스·동작 줄이기).
   typography.css 다음에 붙인다. 사이트가 따로 정한 값이 있으면 그 사이트 덮어쓰기 칸에서 바꾼다.
   토큰만 정의하고, 아래 「기본 규칙」은 사이트에 같은 선언이 없을 때만 효과가 난다. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* 들어오고 나가는 것·기본 */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* 화면 안에서 움직이는 것 */
  --dur-press: 140ms;   /* 단추 눌림 100~160 */
  --dur-ui: 200ms;      /* 툴팁·드롭다운·호버 150~250 */
  --dur-panel: 320ms;   /* 모달·서랍·챗 패널 200~500 */
  --focus-ring: var(--brand, currentColor);
}
/* 노년: 움직임은 상태를 알리는 것만. 시차(parallax)·스크롤 연동 효과는 끈다 */
:root[data-age="senior"] { --dur-ui: 120ms; --dur-panel: 200ms; }

/* 포커스: 지우지 말고 바꿔 그린다. 마우스 클릭에는 안 보이고 키보드에만 보인다 */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* 눌림 피드백: 누르는 순간 0.97배. 호버는 터치 기기에서 끈다 */
:is(button, .btn, [role="button"], summary):active { transform: scale(0.97); }
:is(button, .btn, [role="button"]) { transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, opacity var(--dur-ui) ease; }

/* 새로 나타나는 것: 0이 아니라 0.95에서 시작 + 투명도 */
.enter { opacity: 0; transform: scale(0.95); }
.enter.on { opacity: 1; transform: none; transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }

/* 동작 줄이기 설정을 켠 손님: 움직임 사실상 없음. 시차 효과 JS 도 이 설정이면 꺼야 한다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}