@charset "utf-8";
/* ===================================================================
   차나와 리뉴얼 — 모션 레이어
   -------------------------------------------------------------------
   구조·색·타이포를 바꾸지 않고 '움직임'만 얹는다.
   '그대로 사용' 섹션의 마크업도 건드리지 않고 선택자로만 붙인다.
   빼고 싶으면 index.html 에서 이 파일 링크 한 줄만 제거하면 된다.

   원칙
   - transform / opacity 만 애니메이션 (레이아웃 리플로우 없음)
   - 접근성: prefers-reduced-motion 존중, focus-visible 링 제공
   =================================================================== */

:root{
  --ease-out: cubic-bezier(.22,.61,.36,1);   /* 빠르게 나갔다 부드럽게 안착 */
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .18s;
  --t-base: .28s;
  --t-slow: .55s;
}

/* ── 1. 차량 카드 ──────────────────────────────────────
   살짝 떠오르며 커지고, 썸네일은 그보다 느리게 확대되어 깊이를 만든다. */
.rw-card{
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  will-change: transform;
}
/* 명시도 주의: 아래 스크롤 등장 규칙 `.js-motion .reveal.is-in{transform:none}`
   은 0,3,0 이라 `.rw-card:hover`(0,2,0) 를 이긴다. 카드는 등장 후 계속
   .reveal.is-in 을 달고 있으므로, 이 선택자를 함께 쓰지 않으면 호버 확대가
   통째로 무효가 되고 이미지만 커지는 것처럼 보인다. */
.rw-card:hover,
.js-motion .rw-card.reveal.is-in:hover{
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 18px 36px rgba(42,136,255,.2);
  border-color: rgba(42,136,255,.45);
  z-index: 2;            /* 커질 때 옆 카드 위로 올라오도록 */
}
.rw-card:active,
.js-motion .rw-card.reveal.is-in:active{
  transform: translateY(-3px) scale(1.015); transition-duration: var(--t-fast);
}

/* 썸네일은 카드보다 약하게 — 카드 확대가 묻히지 않도록 */
.rw-card .thumb img{
  transition: transform var(--t-slow) var(--ease-out);
  will-change: transform;
}
.rw-card:hover .thumb img{ transform: scale(1.05) }

/* 카드 안 CTA 는 카드 호버에 같이 반응 */
.rw-card .cta{ transition: background-color var(--t-base) var(--ease-soft),
                           box-shadow var(--t-base) var(--ease-soft) }
.rw-card:hover .cta{ box-shadow: 0 6px 14px rgba(42,136,255,.35) }

/* 뱃지: 카드가 떠오를 때 아주 살짝 앞으로 */
.rw-badge{ transition: transform var(--t-base) var(--ease-out) }
.rw-card:hover .rw-badge{ transform: scale(1.06) }

/* 재고 임박 뱃지에 호흡(퍼지는 링) 효과를 넣었으나, 링이 잔상처럼 보여
   의도와 달리 렌더링 결함으로 읽혔다. 제거. 되살리려면 아래 주석을 풀 것.
@keyframes rw-breathe{
  0%,100%{ transform: scale(1);    box-shadow: 0 0 0 0 rgba(244,74,110,.45) }
  50%    { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(244,74,110,0) }
}
.rw-badge.stock-low{ animation: rw-breathe 2.4s var(--ease-soft) infinite }
*/

/* ── 상담 대기중 문구: 위를 가리키듯 통통 ────────────── */
@keyframes rw-hop{
  0%, 60%, 100%{ transform: translateY(0) }
  30%          { transform: translateY(-5px) }
  45%          { transform: translateY(-2px) }
}
.rw-waiting{ animation: rw-hop 1.6s var(--ease-out) infinite }

/* ── 2. 버튼 ───────────────────────────────────────────
   신규 + '그대로 사용' 섹션의 버튼을 함께 묶는다. */
.rw-submit,
.rw-chip,
.rw-card .cta,
.btn-preview,                       /* 견적 미리보기 */
.btn-quickform, .btn_request_exe,   /* PC 빠른상담신청 */
.m-btn-quickform, .m-btn-quickcall, /* 모바일 하단 고정 */
#navbar .btn-download a{            /* 헤더 앱 다운받기 */
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-soft),
              color var(--t-base) var(--ease-soft);
}
.rw-submit:hover,
.rw-chip:hover,
.btn-preview:hover,
.btn-quickform:hover, .btn_request_exe:hover,
.m-btn-quickform:hover, .m-btn-quickcall:hover,
#navbar .btn-download a:hover{
  transform: translateY(-2px) scale(1.03);
}
.rw-submit:active,
.rw-chip:active,
.btn-preview:active,
.btn-quickform:active, .btn_request_exe:active,
.m-btn-quickform:active, .m-btn-quickcall:active{
  transform: translateY(0) scale(.97);
  transition-duration: var(--t-fast);
}
.rw-submit:hover{ box-shadow: 0 10px 24px rgba(42,136,255,.4) }

/* 입력 필드 포커스도 부드럽게 */
.rw-form input[type=text], .rw-form input[type=tel]{
  transition: border-color var(--t-base) var(--ease-soft),
              background-color var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft);
}
.rw-form input:focus{ box-shadow: 0 0 0 4px rgba(42,136,255,.14) }

/* ── 3. '그대로 사용' 섹션의 카드성 요소 ────────────────
   구조는 그대로 두고 호버 반응만 통일감 있게 얹는다. */
.merit-wrap li,                 /* 컨설팅 3카드 */
.homereview li{                 /* 고객 후기 카드 */
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
/* 위와 같은 명시도 문제. 이 카드들도 .reveal.is-in 을 달고 있다. */
.merit-wrap li:hover,
.homereview li:hover,
.js-motion .merit-wrap li.reveal.is-in:hover,
.js-motion .homereview li.reveal.is-in:hover{
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 18px 36px rgba(42,136,255,.18);
  z-index: 2;
}
.merit-wrap li, .homereview li{ position: relative }

/* 헤더 메뉴: 밑줄이 가운데서 번지듯 */
#navbar .p-navbar-r > ul > li > a{ position: relative; transition: color var(--t-base) var(--ease-soft) }
#navbar .p-navbar-r > ul > li:not(.btn-download) > a::after{
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 0; height: 2px; background: var(--rw-blue, #2a88ff);
  transform: translateX(-50%);
  transition: width var(--t-base) var(--ease-out);
}
#navbar .p-navbar-r > ul > li:not(.btn-download) > a:hover::after{ width: 100% }

/* ── 4. 스크롤 등장 ────────────────────────────────────
   motion.js 가 뷰포트에 들어온 요소에 .is-in 을 붙인다.
   JS 가 실패하면 .reveal 이 그대로 보이도록 no-js 대비를 둔다. */
.js-motion .reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js-motion .reveal.is-in{ opacity: 1; transform: none }

/* ── 5. 헤더: 스크롤하면 그림자 ────────────────────────*/
#navbar{ transition: box-shadow var(--t-base) var(--ease-soft),
                     background-color var(--t-base) var(--ease-soft) }
#navbar.is-scrolled{ box-shadow: 0 4px 20px rgba(17,24,39,.08) }

/* ── 6. 히어로 첫 등장 ─────────────────────────────────*/
@keyframes rw-rise{ from{ opacity:0; transform: translateY(24px) } to{ opacity:1; transform:none } }
.js-motion .rw-hero-left > *,
.js-motion .rw-form{
  animation: rw-rise .7s var(--ease-out) both;
}
.js-motion .rw-hero-left > *:nth-child(1){ animation-delay: .05s }
.js-motion .rw-hero-left > *:nth-child(2){ animation-delay: .15s }
.js-motion .rw-form{ animation-delay: .25s }

/* ── 7. 접근성 ─────────────────────────────────────────*/
.rw-card:focus-visible,
.rw-submit:focus-visible,
.rw-chip:focus-visible,
#navbar .btn-download a:focus-visible{
  outline: 3px solid rgba(42,136,255,.55);
  outline-offset: 3px;
}

/* 움직임을 줄이도록 설정한 사용자에게는 전부 끈다 (등장 요소는 보이게 유지) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-motion .reveal{ opacity: 1 !important; transform: none !important }
}