/* ============================================================
   pc-motion.css — 마이크로 인터랙션 + 모션 레이어
   원칙:
   - var(--dur-*), var(--ease-*) 토큰 사용
   - prefers-reduced-motion 존중
   - 기존 컴포넌트 무수정, 룰만 추가
   ============================================================ */

/* 1. 모달 등장 애니메이션
   대상: .mo, .mb (모달 컨테이너), .mo-bg, .mo-ov (백드롭)
   hidden 클래스가 없을 때(표시 중)만 애니메이션 실행 */
@keyframes pmf-modal-in {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pmf-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mo:not(.hidden), .mb:not(.hidden) {
  animation: pmf-modal-in var(--dur-base, 140ms) var(--ease-enter, ease-out);
}
.mo-bg:not(.hidden), .mo-ov:not(.hidden) {
  animation: pmf-backdrop-in var(--dur-base, 140ms) var(--ease-enter, ease-out);
}

/* 2. 토스트 슬라이드 인
   상단 중앙 위치(transform: translate(-50%,...)) 기준으로 위에서 내려오는 효과 */
@keyframes pmf-toast-in {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast {
  animation: pmf-toast-in var(--dur-base, 140ms) var(--ease-enter, ease-out);
}

/* 3. 카드 hover lift
   .card, .d-card: hover 시 1px 위로 부상 + 그림자 강화
   .sb: transition만 부여 (클릭 피드백은 섹션 5에서)
   주의: transition shorthand가 기존 룰을 덮을 수 있으나
         80ms로 짧게 유지해 시각적 간섭 최소화 */
.card, .d-card, .sb {
  transition: transform var(--dur-fast, 80ms) var(--ease-ui, ease),
              box-shadow var(--dur-fast, 80ms) var(--ease-ui, ease);
}
.card:hover, .d-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

/* onclick 속성이 있는 요소에 pointer cursor 부여 */
[onclick] { cursor: pointer; }

/* 4. KPI 카드 펄스 (대시보드 진입 시 순차적 등장)
   backwards: 애니메이션 시작 전에도 from 상태 유지 */
@keyframes pmf-pulse-in {
  0%   { transform: scale(.98); opacity: 0; }
  60%  { transform: scale(1.01); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.dh-kpi-c {
  animation: pmf-pulse-in var(--dur-slow, 220ms) var(--ease-enter, ease-out) backwards;
}
.dh-kpi-c:nth-child(1) { animation-delay: 0ms; }
.dh-kpi-c:nth-child(2) { animation-delay: 40ms; }
.dh-kpi-c:nth-child(3) { animation-delay: 80ms; }
.dh-kpi-c:nth-child(4) { animation-delay: 120ms; }
.dh-kpi-c:nth-child(5) { animation-delay: 160ms; }

/* 5. 사이드바 아이템 클릭 피드백
   :active 시 오른쪽으로 2px 이동해 눌린 느낌 전달 */
.sb-item:active:not([disabled]) {
  transform: translateX(2px);
  transition: transform var(--dur-fast, 80ms) var(--ease-ui, ease);
}

/* 6. 테이블 행 클릭 피드백
   onclick 있는 행만 적용, 아주 미세한 스케일로 눌림 감각 */
.dt tbody tr[onclick]:active {
  transform: scale(.998);
  transition: transform 60ms ease;
}

/* 7. 뱃지 상태 변경 transition
   background, color 변경 시 부드러운 전환 */
.bd {
  transition: background var(--dur-base, 140ms), color var(--dur-base, 140ms);
}

/* 8. 입력 필드 focus glow
   border-color는 style.css에서 제어하므로 box-shadow만 추가
   주의: style.css 에 .fg input:focus 룰이 있을 경우 specificity 동일,
         나중에 선언된 이 파일이 우선 적용됨 */
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  box-shadow: 0 0 0 3px rgba(30, 58, 95, .08);
  transition: box-shadow var(--dur-fast, 80ms) ease,
              border-color var(--dur-fast, 80ms) ease;
}

/* 9. 버튼 transition
   .btn:active 에서 scale(.98)이 이미 적용되어 있음.
   여기서는 transition만 추가해 부드럽게 만듦.
   주의: all 을 사용하면 기존 hover color transition과 합산될 수 있으나
         80ms로 짧아 시각적 차이 거의 없음 */
.btn {
  transition: all var(--dur-fast, 80ms) var(--ease-ui, ease);
}

/* 10. prefers-reduced-motion — 모든 모션 비활성화
   접근성 설정 존중. 이 블록은 파일의 모든 위 룰을 덮으므로 맨 끝에 위치. */
@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;
  }
}