/* motion.css — lumi 전역 부드러움 레이어
 *
 * 목적: 사장님이 어떤 액션을 하더라도 인터페이스가 살아 움직이는 느낌.
 * 정적·즉각 변화 없이 모든 hover/focus/state-change/page-transition 이 자연스러운 시간 곡선으로 흐름.
 *
 * 적용 범위:
 *   - 인터랙티브 요소 (a / button / [role=button] / input / textarea / select / .card / .chip)
 *     기본 트랜지션 (≤200ms, ease-toss/soft) — 컴포넌트별 추가 효과는 그 위에 누적.
 *   - 전체 문서 scroll-behavior smooth.
 *   - 페이지 첫 paint fade-in.
 *   - prefers-reduced-motion 시 전 모션 비활성.
 *
 * 의존: tokens.css (--duration-*, --ease-*, --shadow-glow-*, --pink-*, --gradient-*).
 * 로드: 모든 HTML 의 head 에 tokens.css 다음, base.css 다음에 link.
 */

/* ──────────────────────────────────────
 * 전역 스크롤 + 페이지 진입
 * ────────────────────────────────────── */
html { scroll-behavior: smooth; }

@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: page-enter 320ms var(--ease-soft) backwards;
}

/* ──────────────────────────────────────
 * View Transitions — MPA 몰입 전환 (몰입 R1, 2026-06-10)
 * @view-transition 으로 문서 간 이동도 SPA 처럼 흐르게 (Chrome 126+ / Safari 18.2+).
 * 구형 브라우저는 룰 무시 → 기존 body page-enter 페이드 유지 (점진적 향상).
 * 떠나는 화면은 살짝 위로 빠지고, 새 화면이 아래에서 떠오름 — 토스 내비게이션 감각.
 * ────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-leave 200ms var(--ease-soft) both;
}
::view-transition-new(root) {
  animation: vt-enter 320ms var(--ease-toss) both;
}
@keyframes vt-leave {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-enter {
  from { opacity: 0; transform: translateY(12px); }
}
/* VT 진행 중엔 body 자체 페이드 끔 — 이중 페이드 방지 (VT 지원 브라우저만 매칭) */
html:active-view-transition body { animation: none; }

/* ──────────────────────────────────────
 * 인터랙티브 요소 글로벌 default
 *   각 컴포넌트의 별도 transition 보다 약한 default — 충돌 시 컴포넌트가 우선.
 *   transform 은 ease-toss (살짝 통통), 색·그림자는 ease-soft (부드러움).
 * ────────────────────────────────────── */
a,
button,
[role="button"],
input,
textarea,
select,
.card,
.chip,
.kw-item,
.major-card,
.sub-chip,
.cta-button,
.cta-primary,
.cta-secondary,
.ig-step,
.ig-step__check,
.ig-step__link,
.tab,
.cat-tab,
.major-tab,
.kw-badge,
.sheet,
.sheet-backdrop,
.sheet__chip,
.sheet__source-chip,
.steps-dot,
.field__input,
.oauth-button,
.skip {
  transition:
    background-color var(--duration-snap) var(--ease-soft),
    color           var(--duration-snap) var(--ease-soft),
    border-color    var(--duration-snap) var(--ease-soft),
    fill            var(--duration-snap) var(--ease-soft),
    stroke          var(--duration-snap) var(--ease-soft),
    opacity         var(--duration-base) var(--ease-soft),
    box-shadow      var(--duration-base) var(--ease-soft),
    transform       var(--duration-snap) var(--ease-toss);
}

/* 입력 요소 focus ring — 모든 페이지 일관 적용 */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--pink-500);
  box-shadow: 0 0 0 4px rgba(255, 107, 139, 0.12);
}

/* 클릭 가능 요소 hover lift 기본 — 컴포넌트별 효과 위에 누적되지 않도록 약하게 */
a:hover:not(.no-lift),
button:not([disabled]):hover:not(.no-lift),
[role="button"]:not([aria-disabled="true"]):hover:not(.no-lift) {
  /* 기본 hover lift 는 의도된 컴포넌트만 — 너무 광범위하면 시각 노이즈 */
}
a:active,
button:not([disabled]):active,
[role="button"]:not([aria-disabled="true"]):active {
  /* v55: 0.98 → 0.96 (토스급 프레스 깊이). breathe/통통 애니메이션과 충돌 없음 —
     transform scale 은 누적이 아니라 마지막 규칙이 이김, :active 는 순간 상태라 안전. */
  transform: scale(0.96);
}

/* ──────────────────────────────────────
 * 모바일 sticky-hover 방어
 *   터치 디바이스에서 :hover 가 탭 후 다음 인터랙션까지 남는 문제(iOS Safari/Chrome).
 *   모든 :hover 효과를 hover 가능한 디바이스(데스크톱)로만 한정.
 *   컴포넌트별 :hover 규칙을 매번 @media (hover: hover) 로 감싸지 않아도 되도록,
 *   터치 환경에서는 transition 으로 부드럽게 원래 상태로 복귀시킨다.
 *   ※ 컴포넌트가 :hover 자체를 무효화하려면 자체 @media (hover: hover) 으로 감싸세요.
 * ────────────────────────────────────── */
@media (hover: none) {
  /* 터치-only: hover 색/배경/박스섀도 변화는 transition 으로 짧게라도 복원되게 한다.
     이미 위에서 transition 잡혀있어서 일반 컴포넌트는 자동 복원됨.
     개별 컴포넌트가 sticky 하게 보이면 그 규칙을 @media (hover: hover) 로 감싸 fix. */
}

/* ──────────────────────────────────────
 * is-open / is-closed 표준 패턴
 *   기존 [hidden] 토글을 부드럽게 마이그레이션 할 때 사용.
 *   요소에 .smooth-toggle 클래스 + is-closed/is-open 클래스 토글.
 * ────────────────────────────────────── */
.smooth-toggle {
  transition:
    opacity   var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-toss),
    max-height var(--duration-base) var(--ease-soft);
  overflow: hidden;
}
.smooth-toggle.is-closed {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  pointer-events: none;
}
.smooth-toggle.is-open {
  opacity: 1;
  transform: translateY(0);
  max-height: 1000px;
}

/* ──────────────────────────────────────
 * 스켈레톤 — 로딩 중 빈 자리 shimmer (공통 유틸, v55)
 *   dashboard 의 keyword-chip--skeleton shimmer 를 전역 유틸로 승격.
 *   사용: 로딩 placeholder 요소에 .skeleton 추가, 데이터 도착 시 제거.
 *   transform/opacity 가 아닌 background-position 이동 (저비용, reflow 없음).
 *   .skeleton--text 는 한 줄 텍스트 자리(둥근 모서리), 기본은 요소 모양 따름.
 * ────────────────────────────────────── */
.skeleton {
  color: transparent !important;
  background: linear-gradient(90deg,
    var(--bg-soft) 0%,
    var(--neutral-100, #ececec) 50%,
    var(--bg-soft) 100%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.4s var(--ease-soft) infinite;
  border-color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton--text {
  border-radius: var(--radius-sm);
  min-height: 1em;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* reduce 시 흐르는 shimmer 끄고 정적 회색 자리만 */
  .skeleton { animation: none; }
}

/* ──────────────────────────────────────
 * 스크롤 리빌 (몰입 R1) — js/immersive.js 가 .rv 부여 + 뷰포트 진입 시 .rv-in.
 *   JS 미실행/미지원/reduced-motion 이면 .rv 자체가 안 붙음 → 콘텐츠 항상 보임 (안전 기본값).
 *   스태거는 --rv-delay (JS 가 CSSOM 으로 세팅 — CSP 인라인 style 금지 준수).
 * ────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   620ms var(--ease-soft),
    transform 620ms var(--ease-toss);
  transition-delay: var(--rv-delay, 0ms);
  will-change: opacity, transform;
}
.rv.rv-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ──────────────────────────────────────
 * 카드 hover lift (몰입 R1) — 데스크톱(hover 가능 기기)만.
 *   js/immersive.js 가 스태거 카드에 .hover-lift 부여 (자체 transform 애니메이션
 *   있는 컴포넌트와의 충돌 방지를 위해 JS 쪽 선별 목록으로만 적용).
 * ────────────────────────────────────── */
@media (hover: hover) {
  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

/* ──────────────────────────────────────
 * 성공 마이크로 피드백 (몰입 R1) — 복사/저장 성공 순간 1회 통통.
 *   사용: el.classList.add('tick-pop') → animationend 시 제거.
 * ────────────────────────────────────── */
@keyframes tick-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.tick-pop { animation: tick-pop 360ms var(--ease-spring); }

/* ──────────────────────────────────────
 * 접근성 — 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;
  }
}