/* 조달안내 나라장터 구매 절차 5단계(.flow) 모션 — 섹션에 class "kom kom-flow" 추가
   배경 흰색 → 코발트 밤 설계도(격자). 번호를 선 위의 동그라미 노드로 바꾸고, 빛이 선을 따라 1→5 로 흐른다.
   폰·태블릿(900 이하)은 세로 한 줄(왼쪽 세로 선 + 노드) */
.flow.kom-flow { overflow: clip; color: #fff; border-top-color: transparent;
  background: radial-gradient(ellipse 80% 75% at 18% 22%, #1f3fae 0%, #12297f 40%, #0a1a55 75%, #07123d 100%); }
.kom-flow .sec-head .eyebrow { color: #a8c2ff; }
.kom-flow .sec-head h2 { color: #fff; position: relative; }
.kom-flow .sec-head h2 b { color: #b4cbff; }
.kom-flow .sec-head p { color: rgba(228, 236, 255, .76); }
.kom-flow .flow-grid { border-top-color: transparent; position: relative; overflow: visible; }
.kom-flow .step { position: relative; padding-top: 52px; }
.kom-flow .step .no { position: absolute; left: 0; top: -19px; width: 38px; height: 38px; margin: 0; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(170, 200, 255, .55); background: #0b1b5a; color: #cfe0ff;
  font-size: 14px; font-weight: 700; letter-spacing: 0; z-index: 2; }
.kom-flow .step h4 { color: #fff; }
.kom-flow .step p { color: rgba(220, 230, 255, .72); }
.kom-flow .kom-halo { position: absolute; inset: -14px -10px -14px -14px; border-radius: 8px; pointer-events: none; opacity: 0; z-index: -1;
  background: radial-gradient(ellipse closest-side at 40% 42%, rgba(90, 140, 255, .26), rgba(90, 140, 255, 0)); }
@media (max-width: 900px) {
  .kom-flow .flow-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .kom-flow .step { padding: 0 0 0 58px; }
  .kom-flow .step .no { top: -6px; }
  .kom-flow .kom-halo { inset: -16px -8px -16px 40px; }
}
/* JS 준비 전 깜빡임 방지 */
html.kom-js .kom-flow :is(.eyebrow, h2, .sec-head p, .step .no, .step h4, .step p) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.kom-js .kom-flow :is(.eyebrow, h2, .sec-head p, .step .no, .step h4, .step p) { opacity: 1; }
  .kom-flow .flow-grid { border-top-color: rgba(170, 200, 255, .3); }
}