/* =====================================================================
   한올 — Motion Layer (모든 페이지 공용)
   원칙: ① transform 우선(opacity-0 진입 지양 → 어떤 상황에도 콘텐츠가 사라지지 않음)
        ② prefers-reduced-motion 존중  ③ 짧고 자연스러운 ease-out  ④ 과하지 않게
   ===================================================================== */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }
html { scroll-behavior: smooth; }

/* ---------- 활성 스텝 강조: 펄스 링 ---------- */
.stepper .step.current .node { animation: hnlPulse 2s ease-out infinite; }
@keyframes hnlPulse {
  0%   { box-shadow: 0 0 0 4px var(--primary-100), 0 0 0 0 rgba(63,63,174,.45); }
  70%  { box-shadow: 0 0 0 4px var(--primary-100), 0 0 0 11px rgba(63,63,174,0); }
  100% { box-shadow: 0 0 0 4px var(--primary-100), 0 0 0 0 rgba(63,63,174,0); }
}
/* 활성 스텝 라벨 살짝 떠오르기 + 커넥터 채워지는 느낌 */
.stepper .step.current .cap { animation: hnlStepCap .4s var(--ease-out) both; }
@keyframes hnlStepCap { from { transform: translateY(2px); } to { transform: none; } }

/* 통관 타임라인 현재 단계 점 펄스 */
.tl-item.current .tl-dot { animation: hnlPulseSm 2s ease-out infinite; }
@keyframes hnlPulseSm {
  0%   { box-shadow: 0 0 0 4px var(--primary-100), 0 0 0 0 rgba(63,63,174,.45); }
  70%  { box-shadow: 0 0 0 4px var(--primary-100), 0 0 0 8px rgba(63,63,174,0); }
  100% { box-shadow: 0 0 0 4px var(--primary-100), 0 0 0 0 rgba(63,63,174,0); }
}

/* 완료 노드 체크 — 들어올 때 살짝 팝 */
.stepper .step.done .node { animation: hnlPop .34s var(--ease-spring) both; }
@keyframes hnlPop { from { transform: scale(.6); } to { transform: scale(1); } }

@media all {
  /* 화면 전환/진입: route-view 가 라우트 변경마다 재마운트되며 모션 재생.
     transform-only(불투명도 0 진입 지양) — 어떤 상황에도 콘텐츠가 사라지지 않음 */
  .route-view { animation: hnlRise .42s var(--ease-out) both; }
  .route-view[data-dir="fwd"]  { animation: hnlRouteFwd .4s var(--ease-out) both; }
  .route-view[data-dir="back"] { animation: hnlRouteBack .4s var(--ease-out) both; }
  .ddrawer-bd { animation: hnlRiseSm .34s var(--ease-out) both; }

  /* 런처 카드 스태거 */
  .cards .card-svc { animation: hnlRise .5s var(--ease-out) both; }
  .cards .card-svc:nth-child(2) { animation-delay: .07s; }
  .cards .card-svc:nth-child(3) { animation-delay: .14s; }

  /* 데이터 테이블 행 스태거(상위 몇 행만) */
  .dt tbody tr { animation: hnlRiseSm .4s var(--ease-out) both; }
  .dt tbody tr:nth-child(2) { animation-delay: .03s; }
  .dt tbody tr:nth-child(3) { animation-delay: .06s; }
  .dt tbody tr:nth-child(4) { animation-delay: .09s; }
  .dt tbody tr:nth-child(5) { animation-delay: .12s; }
  .dt tbody tr:nth-child(n+6) { animation-delay: .15s; }
}
@keyframes hnlRise   { from { transform: translateY(11px); } to { transform: none; } }
@keyframes hnlRiseSm { from { transform: translateY(6px); } to { transform: none; } }
/* 앞으로(push): 오른쪽에서 / 뒤로(pop): 왼쪽에서 슬라이드 — 방향감 있는 네비게이션 전환 */
@keyframes hnlRouteFwd  { from { transform: translateX(26px); } to { transform: none; } }
@keyframes hnlRouteBack { from { transform: translateX(-26px); } to { transform: none; } }
/* 슬라이드 중 가로 스크롤 방지 (overflow-x:clip 은 내부 position:sticky 를 깨지 않음) */
.route-view { overflow-x: clip; }

/* ---------- 미세 인터랙션 보강 ---------- */
.dstat { transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s; }
.dstat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dt tbody tr { transition: background .13s, box-shadow .13s; }
.dside-item, .chip, .btn, .badge, .pill-link, .tier-table tr { transition: all .16s var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.tier-table tr.active { animation: hnlRowGlow .5s var(--ease-out); }
@keyframes hnlRowGlow { from { background: var(--primary-100); } to { background: var(--primary-50); } }

/* 톱바/사이드 진입 시 미세 등장(데스크톱) */
@media all {
  .dside { animation: hnlSlideL .4s var(--ease-out) both; }
}
@keyframes hnlSlideL { from { transform: translateX(-8px); } to { transform: none; } }

/* =====================================================================
   확장 모션 (연구 기반): 진입 100–200ms / 전환 300–500ms, ease-out 진입,
   stagger 40–100ms, transform·opacity만(컴포지터 스레드), 마찰점 우선.
   ===================================================================== */

/* ---------- 제품 사진 줌 (카드 호버) ---------- */
.photo-img { transition: transform .55s var(--ease-out); will-change: transform; }
.photo-d, .src-photo { background-size: cover; }

/* ---------- 카드 호버 리프트 (스프링 felt) ---------- */
.catalog-card { transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-out), border-color .16s; }
.catalog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }
.catalog-card:hover .photo-img { transform: scale(1.07); }
.catalog-card:active { transform: translateY(-1px); }
.branch-card, .quote-card { transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-out); }
.branch-card:hover, .quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rfqlist-card .dpanel { transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-out), border-color .16s; }
.rfqlist-card:hover .dpanel { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }
.rfqlist-card:active .dpanel { transform: translateY(-1px); }

@media all {
  /* 카탈로그 카드 스태거 진입 */
  .catalog-card { animation: hnlRise .46s var(--ease-out) both; }
  .catalog-card:nth-child(2) { animation-delay: .04s; }
  .catalog-card:nth-child(3) { animation-delay: .08s; }
  .catalog-card:nth-child(4) { animation-delay: .12s; }
  .catalog-card:nth-child(5) { animation-delay: .16s; }
  .catalog-card:nth-child(n+6) { animation-delay: .2s; }
  /* 소싱 분기 3카드 스태거 */
  .branch-card { animation: hnlRiseSm .44s var(--ease-out) both; }
  .branch-card:nth-child(2) { animation-delay: .07s; }
  .branch-card:nth-child(3) { animation-delay: .14s; }
  /* 견적 비교 카드 스태거 */
  .quote-card { animation: hnlRiseSm .44s var(--ease-out) both; }
  .quote-card:nth-child(2) { animation-delay: .06s; }
  .quote-card:nth-child(3) { animation-delay: .12s; }
  /* RFQ 목록 카드 스태거 */
  .rfqlist-card { animation: hnlRise .46s var(--ease-out) both; }
  .rfqlist-card:nth-child(2) { animation-delay: .05s; }
  .rfqlist-card:nth-child(3) { animation-delay: .1s; }
  .rfqlist-card:nth-child(n+4) { animation-delay: .15s; }
  /* 공장별 카드 스태거 */
  .factory-card { animation: hnlRise .46s var(--ease-out) both; }
  .factory-card:nth-child(2) { animation-delay: .06s; }
  .factory-card:nth-child(3) { animation-delay: .12s; }
  .factory-card:nth-child(n+4) { animation-delay: .18s; }
}

/* ---------- 폼 검증 마이크로 인터랙션 (마찰점) ---------- */
.rfield-error { animation: hnlErrIn .26s var(--ease-out) both; }
@keyframes hnlErrIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.rfield[data-invalid="true"] .input,
.rfield[data-invalid="true"] .select,
.rfield[data-invalid="true"] .textarea { animation: hnlShake .34s ease both; }
@keyframes hnlShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ---------- 랜딩코스트 합계 변경 시 가격 pop ---------- */
.lc-total { animation: hnlValuePop .32s var(--ease-spring); }
@keyframes hnlValuePop { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ---------- §1 제작 전환 제안 · §2 검품 등 신규 컴포넌트 모션 ---------- */
.conv-teaser { transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-out), border-color .16s; }
.conv-teaser:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary-300); }
.conv-teaser:active { transform: translateY(0); }
.conv-calc { transition: box-shadow .2s var(--ease-out); }
.conv-card:hover .conv-calc { box-shadow: var(--shadow-sm); }

/* 버튼 — 살짝 떠오르며 그림자 (이미 transform 트랜지션 있음, 그림자만 보강) */
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover { box-shadow: var(--shadow-md); }
/* 사이드 네비 — 호버 시 미세 우측 이동으로 활성 방향감 */
.dside-item:hover { transform: translateX(2px); }

/* 접근성 — 키보드 포커스 링 (best practice) */
:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: 5px; }
.dside-item:focus-visible { outline-color: #fff; outline-offset: -2px; }

@media all {
  /* 전환 제안 카드 스태거 진입 */
  .conv-card { animation: hnlRise .46s var(--ease-out) both; }
  .conv-card + .conv-card { animation-delay: .08s; }
  .conv-teaser { animation: hnlRiseSm .4s var(--ease-out) both; }
}

/* ---------- 부드러운 페이드 (reduced-motion 대체 모션) ---------- */
@keyframes hnlFade { from { opacity: 0; } to { opacity: 1; } }

/* ≤1024px 오프캔버스 사이드바: 데스크톱 진입 애니메이션(hnlSlideL)의 transform(both 채움)이
   offcanvas 의 translateX(-100%) 를 덮어써 사이드바가 '항상 열림'으로 보이던 버그 방지.
   → 모바일에서는 진입 애니메이션을 끄고 desktop.css 의 transform/transition 이 드로어를 제어. */
@media (max-width: 1024px) { .dside { animation: none !important; } }

@media not all {
  /* 베스트 프랙티스: 모션을 '제거'가 아니라 '완화'.
     큰 이동·무한 루프는 끄되, 페이지 전환·진입은 부드러운 페이드로 대체하고
     호버·프레스 같은 사용자 주도 피드백 트랜지션은 유지한다. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* 페이지/드로어/카드 진입 → 이동 없는 페이드 */
  .route-view, .route-view[data-dir="fwd"], .route-view[data-dir="back"] { animation: hnlFade .3s var(--ease-out) both !important; }
  .ddrawer { animation: hnlFade .24s var(--ease-out) both !important; }
  .ddrawer-bd, .cards .card-svc, .catalog-card, .branch-card, .quote-card, .rfqlist-card,
  .factory-card, .conv-card, .conv-teaser, .dt tbody tr, .dside { animation: hnlFade .32s var(--ease-out) both !important; }
  /* 호버 리프트는 과하지 않게(살짝만) 유지 */
  .catalog-card:hover, .branch-card:hover, .quote-card:hover, .rfqlist-card:hover .dpanel,
  .conv-teaser:hover, .dstat:hover { transform: translateY(-2px); }
  .dside-item:hover { transform: none; }
}