/* =========================================================================
   pricing-polish.css — 가격 섹션 폴리시 (토스/페이히어 감성)
   -------------------------------------------------------------------------
   인라인 <style> 뒤에 로드된다(소스 순서 우위). 모든 규칙은 .pricing-* 스코프.
   특정도 확보를 위해 필요한 곳은 `.pricing-section` 조상 선택자로 (0,2,0)를 만들어
   인라인 base/미디어쿼리 규칙(0,1,0)을 안정적으로 이긴다. 단 width/min-height 등
   반응형 값은 건드리지 않아 모바일 오버라이드(width:100%)가 그대로 살아있게 둔다.

   콘텐츠는 CSS 기본값으로 숨기지 않는다:
     - 가격 숫자는 HTML에 "9,900"이 그대로. JS 없어도 최종값이 보인다.
     - 카드 lift 초기상태(prep)도 opacity는 항상 1 — transform/box-shadow만 변한다.
       (JS가 실패해도 카드는 항상 완전히 보인다.)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) pill CTA — 히어로 pill 버튼과 톤 통일
   ------------------------------------------------------------------------- */
.pricing-section .pricing-cta {
  border-radius: 999px;
  border: 1px solid rgba(249, 115, 22, .42);
  background: var(--orange, #f97316);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(249, 115, 22, .22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.pricing-section .pricing-cta:hover,
.pricing-section .pricing-cta:focus-visible {
  background: var(--orange-deep, #e85d0c);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(249, 115, 22, .3);
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   2) 가격 카운트업 — 숫자 폭 흔들림 방지(고정폭 숫자)
   실제 카운트업은 JS. 여기선 폭 안정화만.
   ------------------------------------------------------------------------- */
.pricing-section .pricing-price strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -------------------------------------------------------------------------
   3) 상품 카드 강조 — 진입 시 은은한 lift + 오렌지 보더 강조
   초기(prep)/최종(lift) 상태 클래스는 JS가 부여한다. 클래스가 없으면
   인라인 기본 스타일 그대로(자연 위치, 완전 표시).
   ------------------------------------------------------------------------- */
.pricing-section .pricing-product-card.pricing-card-prep,
.pricing-section .pricing-product-card.pricing-card-lift {
  transition:
    transform .7s cubic-bezier(.16, .84, .34, 1),
    box-shadow .7s cubic-bezier(.16, .84, .34, 1),
    border-color .7s ease;
  will-change: transform;
}

/* 진입 전 대기: 살짝 아래 + 섀도 약하게. opacity는 건드리지 않음(항상 1). */
.pricing-section .pricing-product-card.pricing-card-prep {
  transform: translateY(12px);
  box-shadow: 0 14px 44px rgba(15, 23, 42, .12), 0 10px 30px rgba(17, 17, 17, .07);
  border-color: rgba(249, 115, 22, .3);
}

/* 진입 후 착지: 살짝 떠오르며 섀도·오렌지 보더 강조. */
.pricing-section .pricing-product-card.pricing-card-lift {
  transform: translateY(-4px);
  box-shadow:
    0 28px 80px rgba(15, 23, 42, .22),
    0 20px 52px rgba(17, 17, 17, .12),
    0 0 0 1px rgba(249, 115, 22, .16);
  border-color: rgba(249, 115, 22, .5);
}

/* -------------------------------------------------------------------------
   모션 최소화 선호 — 카드 이동/전이 제거, 최종 정지 상태로.
   (카운트업 생략은 JS가 처리. 여기선 카드 transform 무력화.)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pricing-section .pricing-cta {
    transition: background .18s ease, color .18s ease;
  }
  .pricing-section .pricing-cta:hover,
  .pricing-section .pricing-cta:focus-visible {
    transform: none;
  }
  .pricing-section .pricing-product-card.pricing-card-prep,
  .pricing-section .pricing-product-card.pricing-card-lift {
    transform: none;
    transition: none;
    will-change: auto;
  }
}