/*
 * 02 / ENGINEERING PROCESS: 5단계 번호·연결선·호버/터치 진행 효과
 * 수정 위치: 02 / ENGINEERING PROCESS의 01~05 연결선, 번호, 호버·터치 표시.
 */

/* 1. ENGINEERING PROCESS 섹션의 전체 높이·기본 레이아웃 */
.process-section {
  padding: 85px 0;
}

/* 2. 01~05 단계를 PC 화면에서 가로 5열로 나열 */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* PC 5단계의 동일 너비 5열 */
  margin-top: 52px;
}

/* 각 단계의 번호·제목·설명을 5열 셀 가운데에 정렬
   - 03번 번호가 전체 화면 가운데 오도록 각 셀의 중심에 맞춤
   - 연결선은 번호 원 바깥쪽부터 다음 번호 원 직전까지 연결 */
.process li {
  position: relative;
  padding-inline: 8px;
  text-align: center;
}

/* 단계별 원형 번호 버튼의 크기(40px)와 위치 */
.step {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px; /* 번호 원의 가로 크기 */
  height: 40px; /* 번호 원의 세로 크기 */
  margin-inline: auto; /* 각 열 중앙에 번호 원 배치: 03번이 화면 중앙 */
  border-radius: 50%;
  font-size: 12px;
}

/* 단계 원과 다음 단계 원 사이의 기본 연결선
   각 열 너비의 50% 지점을 중심으로, 원 반지름(20px)만큼 앞뒤 간격 유지 */
.process li:not(:last-child):after {
  content: "";
  position: absolute;
  left: calc(50% + 20px);  /* 현재 단계 원의 오른쪽 끝 */
  right: calc(-50% + 20px); /* 다음 단계 원의 왼쪽 끝 */
  top: 20px;
  height: 1px;
}

/* 각 단계의 영문 소제목: SYSTEM DESIGN 등 */
.process h3 {
  font-size: 10px;
  letter-spacing: 1.1px;
  margin-top: 28px;
}

/* 각 단계의 한국어 업무명: 시스템 설계 등 */
.process b {
  display: block;
  font-size: 15px;
  margin-top: 8px;
}

/* 각 단계의 두 줄 설명 */
.process p {
  font-size: 12px;
  margin-top: 11px;
}

/* 3. 모바일(760px 이하): 5단계를 세로로 표시하고 번호와 선을 왼쪽에 배치 */
@media (max-width: 760px) {
  .process-section {
      padding: 65px 0;
  }

  .process {
      grid-template-columns: 1fr;
      margin-top: 36px;
      gap: 0;
  }

  .process li {
      padding: 0 0 30px 65px;
      min-height: 127px;
      text-align: left; /* 모바일은 번호 오른쪽에 설명을 표시하는 기존 구조 유지 */
  }

  .step {
      position: absolute;
      left: 0;
      top: 0;
      margin-inline: 0; /* PC 원 가운데 정렬 해제: 모바일 번호는 왼쪽 */
  }

  .process li:not(:last-child):after {
      left: 20px;
      top: 40px;
      bottom: 0;
      width: 1px;
      height: auto;
  }

  .process h3 {
      margin: 0;
      padding-top: 3px;
  }

  .process p br {
      display: none;
  }

  .process p {
      margin-top: 7px;
  }

  .process li:last-child {
      padding-bottom: 0;
      min-height: 90px;
  }
}

/* 4. 프로세스 섹션의 배경과 번호·설명·연결선의 기본 색상 */
.process-section {
  background: rgba(4, 12, 26, 0.24);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}

/* 비활성/초기 번호 원의 배경·테두리·글자색 */
.step {
  background: #132b42;
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: var(--accent);
}

/* 번호 사이 기본 연결선의 은은한 파란색 */
.process li:not(:last-child):after {
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.5),
    rgba(56, 189, 248, 0.12)
  );
}

/* 단계 영문 소제목의 테마색 */
.process h3 {
  color: var(--accent);
}

/* 단계 상세 설명의 보조 글자색 */
.process p {
  color: var(--text-sub);
}

/* 모바일 기본 연결선의 색 */
@media (max-width: 760px) {
  .process li:not(:last-child):after {
      background: rgba(56, 189, 248, 0.25);
  }
}

/* 5. process.js와 연결되는 호버·클릭(터치) 효과: 해당 단계까지 선과 번호 활성화 */
/* 아래부터는 마우스 호버/터치 시 진행 표시를 위한 별도 스타일입니다. */
#process .process-flow li {
  cursor: pointer;
}

/* 진행선 아래의 어두운 바탕 선 */
#process .process-flow li:not(:last-child)::after {
  background: rgba(111, 156, 185, 0.22);
  height: 2px;
  top: 19px;
}

/* 진행선 위의 스카이블루 채움 선: process.js가 --process-fill 값을 0~1로 갱신 */
#process .process-flow li:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(50% + 20px);  /* PC에서 가운데 정렬된 현재 단계 원의 오른쪽 */
  right: calc(-50% + 20px); /* PC에서 다음 단계 원의 왼쪽 */
  top: 19px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.92), rgba(56, 189, 248, 0.56));
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.18);
  transform: scaleX(var(--process-fill, 0)); /* 0~1 진행량: PC 가로 진행선 */
  transform-origin: left center;
  pointer-events: none;
}

/* 단계 번호 버튼: 호버·터치 이벤트를 받을 수 있도록 클릭 커서 설정 */
#process .process-flow .step {
  padding: 0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

/* 상호작용 준비 후 기본(아직 도달하지 않은) 단계의 번호 색상 */
.has-process-interaction #process .process-flow .step {
  background: #14283d;
  border-color: rgba(56, 189, 248, 0.27);
  color: #94acc1;
  box-shadow: none;
  transition: background-color 240ms ease, border-color 240ms ease,
              color 240ms ease, box-shadow 240ms ease;
}

/* JS가 li에 is-reached를 추가하면 해당 단계 번호가 밝게 표시됨 */
.has-process-interaction #process .process-flow li.is-reached .step {
  background: #164263;
  border-color: rgba(56, 189, 248, 0.82);
  color: #d3f2ff;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.05),
              0 0 18px rgba(56, 189, 248, 0.12);
}

/* 아직 활성화되지 않은 단계의 영문 소제목 색상 */
.has-process-interaction #process .process-flow h3 {
  color: #80a4ba;
  transition: color 240ms ease;
}

/* 활성화된 단계의 영문 소제목을 스카이블루로 강조 */
.has-process-interaction #process .process-flow li.is-reached h3 {
  color: var(--accent);
}

/* 6. 모바일 진행선: PC의 가로 길이(scaleX) 대신 세로 길이(scaleY)로 채움 */
@media (max-width: 760px) {
  #process .process-flow li:not(:last-child)::after,
  #process .process-flow li:not(:last-child)::before {
      left: 19px;
      right: auto;
      top: 40px;
      bottom: 0;
      width: 2px;
      height: auto;
  }

  #process .process-flow li:not(:last-child)::before {
      transform: scaleY(var(--process-fill, 0)); /* 0~1 진행량: 모바일 세로 진행선 */
      transform-origin: center top;
  }

  #process .process-flow p br {
      display: initial;
  }
}

/* 7. 움직임 줄이기 접근성 옵션: 단계 색상 전환 애니메이션 제거 */
@media (prefers-reduced-motion: reduce) {
  .has-process-interaction #process .process-flow .step,
  .has-process-interaction #process .process-flow h3 {
      transition: none;
  }
}