/* 메인 서비스 01~03(.svc) 모션 — 섹션에 class "kom kom-svc" 추가. 흰 바탕 그대로, 빛은 코아스 코발트 */
.svc.kom-svc { overflow: clip; }
.kom-svc .svc-head h2 { position: relative; }
.kom-svc .svc-item { border-top-color: transparent; position: relative; }       /* 윗선은 캔버스가 빛 꼬리로 그린다 */
.kom-svc .svc-item .n { display: inline-block; color: var(--cobalt); }
.kom-svc .svc-item .ph { position: relative; overflow: hidden; background: transparent; box-shadow: 0 30px 60px -34px rgba(14, 35, 112, .55); }
.kom-svc .svc-item .ph > img { transition: none; will-change: transform, clip-path; }
.kom-svc .svc-item:hover .ph img { transform: none; }
.kom-svc .kom-phin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.kom-svc .kom-sweep { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) no-repeat; background-size: 250% 100%; }
.kom-svc .kom-run { border-radius: 0; inset: 0; }
.kom-svc .svc-item li { position: relative; }
.kom-svc .svc-item li::before { opacity: 0; }
.kom-svc .kom-dot { position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; pointer-events: none;
  background: var(--cobalt); box-shadow: 0 0 0 0 rgba(22, 51, 158, .0); opacity: 0; }
/* JS 준비 전 깜빡임 방지 */
html.kom-js .kom-svc :is(.eyebrow, h2, .svc-item .n, .svc-item h3, .svc-item p, .svc-item li) { opacity: 0; }
html.kom-js .kom-svc .svc-item .ph > img { clip-path: inset(0 0 100% 0); }
@media (prefers-reduced-motion: reduce) {
  html.kom-js .kom-svc :is(.eyebrow, h2, .svc-item .n, .svc-item h3, .svc-item p, .svc-item li) { opacity: 1; }
  html.kom-js .kom-svc .svc-item .ph > img { clip-path: none; }
  .kom-svc .svc-item { border-top-color: var(--ink); }
  .kom-svc .svc-item li::before { opacity: 1; }
}