/* 서비스(#service) 진행 5단계 모션 — 섹션에 class "scm scm-steps" 추가 */
#service.scm-steps { position: relative; overflow: clip; }
.scm-steps .svc-hero, .scm-steps .svc-body { position: relative; }
.scm-steps .svc-hero-inner, .scm-steps .svc-body-inner { position: relative; z-index: 2; }
/* 히어로 배경 사진 천천히 확대(Ken Burns) — 값은 JS 가 --scm-kb 로 줌 */
.scm-steps .svc-hero::before { transform: scale(var(--scm-kb, 1)); transform-origin: 60% 40%; }
.scm-steps .svc-hero-rule { transform-origin: 0 50%; }
/* 사이트의 카드 슬라이드(.in-view 트랜지션)는 우리 모션과 겹치므로 배경색 전환만 남김 */
.scm-steps .service-card { transition: background .3s; }
#service.scm-steps.in-view .service-card { transition-delay: 0s; }
.scm-steps .service-card > .scm-halo { background: radial-gradient(120% 90% at 30% 0%, rgba(232, 200, 144, .28) 0%, rgba(232, 200, 144, .06) 45%, transparent 70%); z-index: 0; }
.scm-steps .service-card > :not(.scm-halo):not(.scm-run) { position: relative; z-index: 1; }
.scm-steps .svc-cat { position: relative; }
/* JS 준비 전 깜빡임 방지 */
html.scm-js .scm-steps :is(.svc-hero-eyebrow, .svc-hero h1, .svc-hero p, .svc-cat, .service-card) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.scm-js .scm-steps :is(.svc-hero-eyebrow, .svc-hero h1, .svc-hero p, .svc-cat, .service-card) { opacity: 1; }
  .scm-steps .service-card { opacity: 1; transform: none; }
}