/* ===========================================================================
   처리 흐름도 — 우편물 한 통이 지나가는 단계와, 단계마다 넘기는 것

   목록이 아니라 흐름도로 읽혀야 한다. 그래서 세로 레일 하나를 긋고, 단계를
   그 위에 매달고, 단계와 단계 사이에 "무엇이 넘어가는가"를 적는다. 그것이
   흐름도와 번호 매긴 목록의 차이다.

   AI 가 개입하는 단계만 점을 파랗게 채운다. 어디까지가 사람이 짠 규칙이고
   어디부터가 모델의 판단인지 한눈에 보이게 하려는 것이다.

   먼저 읽히는 것은 한국어 단계 이름이다. 모듈 이름(Vision 등)은 그 아래에
   작게 둔다 — 설비 담당자에게 영문 모듈명은 제목이 아니라 부연이다.
   =========================================================================== */

.flow {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  /* 한 바퀴 도는 시간과, 단계 하나를 지나는 데 걸리는 시간.
     레일 길이를 단계 수로 나눈 값에 맞춘 것이다. */
  --flow-cycle: 7.6s;
  --flow-gap: 0.82s;
}

/* 처음부터 끝까지 끊기지 않는 한 줄. 점들이 여기에 매달린다. */
.flow::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(0, 113, 227, 0.06),
    rgba(0, 113, 227, 0.32) 8%,
    rgba(0, 113, 227, 0.32) 92%,
    rgba(0, 113, 227, 0.06)
  );
}

.section--dark .flow::before,
.on-dark .flow::before {
  background: linear-gradient(
    180deg,
    rgba(41, 151, 255, 0.05),
    rgba(41, 151, 255, 0.38) 8%,
    rgba(41, 151, 255, 0.38) 92%,
    rgba(41, 151, 255, 0.05)
  );
}

/* ── 들어오는 것 · 나가는 것 ─────────────────────────────── */

.flow__end {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--nx-sp-6);
  align-items: center;
}

.flow__cap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--nx-bg-base);
  box-shadow: inset 0 0 0 1px var(--nx-border-strong);
  color: var(--nx-text-muted);
  font-size: 13px;
  line-height: 1;
}

.section--dark .flow__cap,
.on-dark .flow__cap {
  background: var(--nx-s-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: var(--nx-text-invert-2);
}

.flow__end span {
  justify-self: start;
  font-size: var(--nx-fs-sm);
  font-weight: 500;
  color: var(--nx-text-2);
}

.on-dark .flow__end span,
.section--dark .flow__end span {
  color: var(--nx-text-invert-2);
}

.flow__end--in {
  margin-bottom: var(--nx-sp-8);
}

.flow__end--out {
  margin-top: var(--nx-sp-4);
}

/* ── 단계 ─────────────────────────────────────────────────── */

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--nx-sp-6);
  align-items: start;
  padding-bottom: var(--nx-sp-10);
}

.flow__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--nx-bg-base);
  box-shadow: inset 0 0 0 1px var(--nx-border-strong);
  color: var(--nx-text-2);
  font-size: var(--nx-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.section--sunken .flow__dot {
  background: var(--nx-bg-sunken);
}

.section--dark .flow__dot,
.on-dark .flow__dot {
  background: var(--nx-s-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: var(--nx-text-invert-2);
}

/* AI 가 판단하는 단계. 여기만 채운다. */
.flow__step.is-ai .flow__dot,
.section--dark .flow__step.is-ai .flow__dot,
.on-dark .flow__step.is-ai .flow__dot {
  background: var(--nx-accent);
  box-shadow: none;
  color: var(--nx-text-on-accent);
}

.flow__main {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--nx-sp-8);
  align-items: start;
}

/* 마크업은 모듈명 → 제목 순이다(blocks.html). 화면에서만 제목을 위로 올린다.
   스크린리더는 여전히 모듈명을 먼저 읽는다. */
.flow__main > div:first-child {
  display: flex;
  flex-direction: column;
}

.flow__module {
  order: 2;
  margin-top: var(--nx-sp-1);
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-sm);
  font-weight: 400;
  color: var(--nx-text-2);
}

.flow__module::before {
  content: "담당 소프트웨어 · ";
}

.section--dark .flow__module,
.on-dark .flow__module {
  color: var(--nx-text-invert-2);
}

/* 점(36px)의 가운데 높이에 제목 첫 줄이 오게 한다. */
.flow__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--nx-sp-2);
  margin-top: 3px;
  font-size: var(--nx-fs-lg);
  font-weight: 600;
  letter-spacing: var(--nx-tracking);
}

/* 34em 은 한 줄에 눈이 편히 따라가는 길이다. pretty 는 마지막 줄에 한 글자만
   떨어지는 것을 막는다. */
.flow__text {
  max-width: 34em;
  text-wrap: pretty;
  font-size: var(--nx-fs-base);
  line-height: 1.55;
  color: var(--nx-text-2);
}

.on-dark .flow__text,
.section--dark .flow__text {
  color: var(--nx-text-invert-2);
}

/* 다음 단계로 넘기는 것. 이 줄이 있어야 목록이 아니라 흐름이 된다. */
.flow__out {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-sp-2);
  margin-top: var(--nx-sp-4);
  font-size: var(--nx-fs-sm);
  color: var(--nx-text-muted);
}

/* 검정 위에 muted 는 흐리다. 밝은 보조색으로 올린다. */
.on-dark .flow__out,
.section--dark .flow__out {
  color: var(--nx-text-invert-2);
}

.flow__out::before {
  content: "↓";
  color: var(--nx-accent);
  font-size: 13px;
  line-height: 1;
}

.section--dark .flow__out::before,
.on-dark .flow__out::before {
  color: var(--nx-accent-dark);
}

/* 설명을 접은 휴대폰에서만 '더 보기'를 낸다. 넓은 화면은 이미 전문을 보여 준다. */
.flow-compact__more {
  display: none;
}

@media (max-width: 900px) {
  .flow__main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-sp-3);
  }
}

@media (max-width: 680px) {
  .flow__step,
  .flow__end {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--nx-sp-4);
  }
  .flow__dot,
  .flow__cap {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .flow::before {
    left: 13px;
  }
  .flow__step {
    padding-bottom: var(--nx-sp-8);
  }
  .flow__title {
    margin-top: 0;
  }

  /* 홈의 흐름도는 휴대폰에서 단계 이름만 남긴다. 설명은 /ai 에서 읽는다. */
  .flow-compact .flow__main > div + div {
    display: none;
  }
  .flow-compact .flow__step {
    padding-bottom: var(--nx-sp-5);
  }
  .flow-compact__more {
    display: block;
    margin-top: var(--nx-sp-6);
    padding-left: calc(28px + var(--nx-sp-4));
  }
}