/* =========================================================================
   제작 프로세스 — 스크롤 연동 프로그레스 인터랙션 (process.php 전용)
   기본(JS無/완료): 모든 단계 정상 노출. 숨김은 .js 환경에서만.
   ========================================================================= */
.proc-track { position: relative; }

/* 좌측 세로 연결선: 기존 .proc-item::before 배경 라인은 유지(레일),
   그 위에 골드 fill 막대를 노드 중심축(left:31px)에 정렬해 올린다. */
.proc-progress {
  position: absolute;
  left: 31px; top: 32px; bottom: 32px;
  width: 2px; transform: translateX(-50%);
  z-index: 1; pointer-events: none;
}
.proc-progress-fill {
  display: block; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--accent), var(--gold-600));
  border-radius: 2px;
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: height .18s linear;
}
@media (max-width: 560px) {
  .proc-progress { left: 26px; }
}
/* 모바일(<=860px): 스크롤 진행바 계산이 노드 중심축과 어긋날 수 있어,
   애니메이션 진행바를 숨기고 전체 단계를 점등된 상태로 단순 표시(폴백). */
@media (max-width: 860px) {
  .proc-progress { display: none; }
  .js .proc-track .proc-item .pn { background: var(--navy); color: #fff; }
  .js .proc-track .proc-item.accent .pn { background: var(--accent); }
  .proc-track .proc-item.is-current .pn { transform: none; }
}

/* 노드(번호 원형) — .js 환경에서만 미점등 상태로 시작, fallback 시 항상 점등 */
.proc-track .proc-item .pn {
  transition: background .5s var(--ease-soft), transform .5s var(--ease-soft),
              box-shadow .5s var(--ease-soft), color .5s var(--ease-soft);
}
.js .proc-track .proc-item .pn {
  background: color-mix(in srgb, var(--navy) 22%, #fff);
  color: color-mix(in srgb, var(--navy) 55%, #fff);
}
.js .proc-track .proc-item.accent .pn {
  background: color-mix(in srgb, var(--navy) 22%, #fff);
}
/* 활성(점등) — 진입 시 골드로 켜짐 + 펄스 */
.proc-track .proc-item.is-active .pn {
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 85%, #000),
              0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
}
.proc-track .proc-item.accent.is-active .pn { background: var(--accent); }
/* 뷰포트 중앙의 현재 단계 — 살짝 강조 */
.proc-track .proc-item.is-current .pn {
  transform: scale(1.06);
}
.proc-track .proc-item.is-current .proc-body h3 {
  color: var(--navy-700);
}
@keyframes procPulse {
  0%   { box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 85%, #000), 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 85%, #000), 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.proc-track .proc-item.just-lit .pn { animation: procPulse .7s var(--ease-soft) 1; }

@media (prefers-reduced-motion: reduce) {
  /* 모션 최소화: 진행 fill 즉시, 노드는 모두 점등 상태로 보이게 */
  .proc-progress-fill { transition: none; }
  .js .proc-track .proc-item .pn { background: var(--navy); color: #fff; }
  .js .proc-track .proc-item.accent .pn { background: var(--accent); }
  .proc-track .proc-item.just-lit .pn { animation: none; }
  .proc-track .proc-item.is-current .pn { transform: none; }
}

/* fix: .reveal의 will-change/transform가 .proc-item에 스태킹 컨텍스트를 생성 →
   .pn(z-index:2)이 .proc-progress(z-index:1) 위로 못 올라오던 문제.
   아이템 자체를 진행바보다 위로 올려 번호가 라인에 덮이지 않게 한다.
   (.proc-item은 styles-sub.css에서 position:relative 이미 설정됨) */
.proc-track .proc-item { z-index: 2; }