/* =============================================================================
   KSL Motion — 전 페이지 공용 모션 스타일 (ksl-motion.js 짝)
   -----------------------------------------------------------------------------
   theme-overrides.css **다음**에 로드됩니다. 그 파일의 !important 블랭킷은
   color/font/letter-spacing/border-radius/min-height 를 덮지만 transform·opacity·
   animation 은 건드리지 않으므로, 모션 속성만 쓰는 이 파일은 안전하게 살아남습니다.

   JS 가 꺼져 있거나(=.ksl-motion-ready 미부여) 실패해도 콘텐츠는 항상 보입니다:
   등장 애니메이션은 html.ksl-motion-ready 가 붙은 뒤에만 '숨김' 상태를 갖습니다.
   ========================================================================== */

/* ── 1. reveal ───────────────────────────────────────────────────────────────
   중요: [data-ksl-reveal] 자체를 숨기지 않습니다. JS 가 .ksl-m-armed 를 붙인
   요소만 숨깁니다. JS 실패 = 전부 그냥 보임(콘텐츠 유실 없음). */
.ksl-m-armed {
  opacity: 0;
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.ksl-m-armed[data-ksl-reveal="up"],
.ksl-m-armed[data-ksl-reveal=""]      { transform: translate3d(0, 26px, 0); }
.ksl-m-armed[data-ksl-reveal="left"]  { transform: translate3d(-30px, 0, 0); }
.ksl-m-armed[data-ksl-reveal="right"] { transform: translate3d(30px, 0, 0); }
.ksl-m-armed[data-ksl-reveal="scale"] { transform: scale(0.94); }
.ksl-m-armed[data-ksl-reveal="blur"]  { filter: blur(9px); transform: translate3d(0, 14px, 0); }

.ksl-m-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto;
}

/* ── 2. 카운트업 / 오도미터 ─────────────────────────────────────────────────── */
[data-ksl-count],
[data-ksl-odometer] {
  font-variant-numeric: tabular-nums;
}
.ksl-m-odo {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.ksl-m-odo-slot {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: bottom;
}
.ksl-m-odo-reel {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
}
.ksl-m-odo-cell {
  display: block;
  height: 1em;
  line-height: 1;
}
.ksl-m-odo-suffix { margin-left: 2px; }

/* ── 3. 3D 틸트 ─────────────────────────────────────────────────────────────
   .ksl-m-tilt 는 JS(포인터 정밀 기기)에서만 부여됩니다. 모바일엔 아예 안 붙습니다. */
.ksl-m-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
}
.ksl-m-tilt:hover {
  box-shadow: 0 26px 60px rgba(10, 15, 30, 0.18);
  z-index: 2;
}
/* 마우스를 따라다니는 광택 — 카드 위에 얇게 얹습니다 */
.ksl-m-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
  background: radial-gradient(
    420px circle at var(--ksl-glare-x, 50%) var(--ksl-glare-y, 50%),
    rgba(212, 171, 78, 0.16),
    rgba(212, 171, 78, 0) 62%
  );
}
.ksl-m-tilt:hover::after { opacity: 1; }

/* ── 4. 스크롤 진행바 ───────────────────────────────────────────────────────── */
.ksl-m-progress {
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
/* 페이지 상단 고정 진행바로 쓰고 싶을 때의 기본 껍데기 */
.ksl-m-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1200;
  background: linear-gradient(90deg, var(--gold, #b8924a), var(--gold-light, #d4ab4e));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ── 5. 타임라인 선 그리기 ──────────────────────────────────────────────────── */
.ksl-m-draw {
  transform: scaleY(0);
  transform-origin: 50% 0;
  will-change: transform;
}

/* ── 6. 마퀴 ───────────────────────────────────────────────────────────────── */
.ksl-m-marquee-wrap {
  display: flex;
  overflow: hidden;
  gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ksl-m-marquee {
  display: flex;
  flex: none;
  gap: inherit;
  animation: ksl-marquee 40s linear infinite;
}
.ksl-m-marquee-wrap:hover .ksl-m-marquee { animation-play-state: paused; }
@keyframes ksl-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* ── 7. 골드 스윕 ──────────────────────────────────────────────────────────── */
.ksl-m-shine {
  position: relative;
  background-image: linear-gradient(
    100deg,
    currentColor 0%, currentColor 38%,
    var(--gold-light, #d4ab4e) 50%,
    currentColor 62%, currentColor 100%
  );
  background-size: 260% 100%;
  background-position: 140% 0;
  -webkit-background-clip: text;
          background-clip: text;
}
.ksl-m-shine-run {
  animation: ksl-shine 1.5s cubic-bezier(0.5, 0, 0.2, 1) 0.15s 1 forwards;
}
@keyframes ksl-shine {
  to { background-position: -40% 0; }
}

/* ── 8. 입자 캔버스 ────────────────────────────────────────────────────────── */
[data-ksl-particles] { position: relative; }
.ksl-m-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
/* 입자 위의 콘텐츠는 반드시 위로 올라와야 합니다.
   position은 모든 자식에 강제하지 않습니다. 홈 히어로의 장식 span처럼 이미
   absolute인 요소를 relative로 바꾸면 레이어 배치가 무너지기 때문입니다. */
[data-ksl-particles] > *:not(.ksl-m-particles) { z-index: 1; }
[data-ksl-particles] > :where(.inner, .container, .ksl-c-hero__inner, .qc-hook, .qc-tabs, h2, p, a) {
  position: relative;
}

/* ── 9. 골드 그라디언트 텍스트 (정적 강조) ─────────────────────────────────── */
.ksl-m-gold-text {
  background-image: linear-gradient(96deg, var(--gold, #b8924a), var(--gold-light, #d4ab4e) 45%, #f0dca6 70%, var(--gold, #b8924a));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;   /* theme-overrides 의 color !important 를 이겨야 합니다 */
  -webkit-text-fill-color: transparent;
}

/* ── 10. 은은한 떠오름 (배지/아이콘) ───────────────────────────────────────── */
.ksl-m-float { animation: ksl-float 5.5s ease-in-out infinite; }
@keyframes ksl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ── 11. 골드 펄스 링 (상담 CTA 강조) ──────────────────────────────────────── */
.ksl-m-pulse { position: relative; }
.ksl-m-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--gold, #b8924a);
  animation: ksl-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes ksl-pulse {
  0%   { opacity: 0.75; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.13); }
  100% { opacity: 0;    transform: scale(1.13); }
}

/* =============================================================================
   접근성: 움직임 최소화 — 모든 모션을 끄고 '최종 상태'로 고정합니다.
   (JS 도 REDUCE 분기에서 .ksl-m-in 을 즉시 붙이므로 이중으로 안전합니다)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ksl-m-armed,
  .ksl-m-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .ksl-m-tilt { transition: none !important; }
  .ksl-m-tilt::after { display: none; }
  .ksl-m-marquee { animation: none !important; }
  .ksl-m-marquee-clone { display: none !important; }
  .ksl-m-shine-run { animation: none !important; }
  .ksl-m-shine { background-image: none; }
  .ksl-m-float { animation: none !important; }
  .ksl-m-pulse::before { animation: none !important; opacity: 0; }
  .ksl-m-progress { transform: scaleX(1) !important; }
  .ksl-m-draw { transform: scaleY(1) !important; }
  .ksl-m-particles { display: none !important; }
}