/* ============================================================================
   motion.css — 애플 디자인 원칙 중 "즉시 적용 가능한 층"

   출처: Apple, Designing Fluid Interfaces (WWDC 2018) /
         The Details of UI Typography (WWDC 2020) / Principles of Great Design

   이 파일은 기존 스타일을 덮어쓰지 않고 '빠져 있던 것만' 채운다.
   시각 디자인(색·레이아웃)은 건드리지 않으므로 어떤 테마 위에도 얹힌다.

   채우는 것
     1) 접근성 3종 — 앱에 전혀 없었다 (reduced-motion / reduced-transparency / contrast)
     2) 눌림 피드백 — :hover 95곳 대비 :active 16곳뿐이었다.
        터치 기기에서 hover 는 의미가 없고, 피드백은 누르는 순간 나와야 한다.
     3) 탭 지연 제거 — touch-action 선언이 하나도 없었다.

   로드 순서: 다른 CSS 보다 나중에 (보강 레이어이므로)
   ========================================================================== */

/* ── 1. 즉시 반응 ─────────────────────────────────────────────────────────
   "지연이 생기는 순간 직접 조작하는 느낌이 절벽처럼 무너진다."
   touch-action:manipulation 은 더블탭 확대를 끄고 그에 딸린 탭 지연을 없앤다. */
button,
a,
[role="button"],
input[type="submit"],
input[type="button"],
label,
summary,
.btn,
.pill,
.chip,
.tab,
.card[onclick],
[onclick] {
  touch-action: manipulation;
}

/* 텍스트 입력은 제외 — 확대가 필요한 경우가 있다 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  touch-action: auto;
}

/* ── 2. 눌림 피드백 ───────────────────────────────────────────────────────
   피드백은 pointer-down 에 나와야 한다. release 를 기다리면 죽은 느낌이 난다.
   이미 :active 를 정의한 요소는 그 값이 이긴다(뒤에 오는 선언이 우선).
   여기서는 '아무 반응도 없던' 요소에만 최소한의 반응을 준다. */
button:active,
[role="button"]:active,
input[type="submit"]:active,
input[type="button"]:active,
.btn:active {
  transform: scale(0.97);
  transition: transform 90ms cubic-bezier(0.2, 0, 0, 1);
}

/* 전체 폭 버튼은 같은 배율이 과하게 보인다 — 눌림을 약하게 */
.btn-block:active,
.btn-submit:active,
.btn-search:active,
.btn-book:active,
.btn-next:active {
  transform: scale(0.985);
}

/* 위치가 고정된 요소는 transform 을 건드리면 레이아웃이 튄다 — 제외 */
.modal:active,
.modal-dialog:active,
.bottom-bar:active,
.header:active,
.linebar:active {
  transform: none;
}

/* 누르는 동안 텍스트가 선택되면 조작감이 깨진다 */
button,
[role="button"],
.btn,
.pill,
.tab {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── 3. 접근성 — 세 가지 신호를 각각 존중한다 ─────────────────────────── */

/* 3-1. 모션 줄이기.
   "모션을 줄인다는 건 피드백을 없앤다는 뜻이 아니라, 전정기관을 자극하지 않는
   더 부드러운 등가물로 바꾼다는 뜻이다." → 이동·회전·튕김은 끄고 불투명도는 남긴다. */
@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;
  }

  /* 이해를 돕는 불투명도 변화는 남긴다 (짧은 크로스페이드) */
  .step,
  .modal,
  .toast,
  .dd-list,
  [class*="overlay"],
  [class*="panel"] {
    transition: opacity 150ms ease !important;
    transform: none !important;
  }

  /* 눌림 축소도 전정기관 자극이 되므로 끈다 */
  button:active,
  [role="button"]:active,
  .btn:active {
    transform: none;
  }
}

/* 3-2. 투명도 줄이기.
   반투명 재질을 불투명하게 바꾼다. blur 는 비용도 크고 가독성도 떨어뜨린다.
   (이 앱은 backdrop-filter 를 155곳에서 쓴다) */
@media (prefers-reduced-transparency: reduce) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* 3-3. 대비 높이기.
   "거의 불투명한 배경 + 뚜렷한 경계선." */
@media (prefers-contrast: more) {
  button,
  .btn,
  input,
  select,
  textarea,
  .card,
  .panel,
  [class*="card"] {
    border-width: 2px !important;
  }

  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── 4. 타이포 — 트래킹은 크기에 따라 달라져야 한다 ──────────────────────
   "고정 letter-spacing 은 어느 크기에선가는 반드시 틀리다."
   큰 글자는 음수 트래킹, 본문은 0 근처, 아주 작은 글자는 약간 양수.
   기존에 letter-spacing 을 명시한 요소는 그 값이 유지된다(더 구체적인 선택자). */
h1,
.display,
.hero h1,
.brand-title {
  letter-spacing: -0.021em;
  line-height: 1.08;
}

h2,
.step-heading,
.page-title {
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h3,
h4 {
  letter-spacing: -0.008em;
  line-height: 1.3;
}

/* 아주 작은 라벨은 살짝 벌려야 읽힌다 */
small,
.caption,
.label,
.form-label,
.pax-age,
.pax-note {
  letter-spacing: 0.005em;
}