/* ===========================================================================
   제품소개 — PostalNexus 흐름

   제품소개 페이지의 검은 소프트웨어 구간에서 우편물 한 통이 지나가는 여섯 단계를
   칸으로 늘어놓는다. 파란 칸이 AI 가 판단하는 단계다 — 소프트웨어 페이지의 모듈
   지도와 같은 약속이다. 번호가 순서를 말하므로 줄이 바뀌어도 읽힌다.

   products.css 가 줄 수 한도에 닿아 떼어 둔다. 같은 페이지만 받는다.
   =========================================================================== */

.pn-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--nx-sp-5);
}

.pn-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--nx-sp-4) var(--nx-sp-4) var(--nx-sp-5);
  border-radius: var(--nx-r-lg);
  background: var(--nx-s-dark);
}

.pn-flow__step i {
  margin-bottom: var(--nx-sp-3);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fs-xs);
  font-style: normal;
  color: var(--nx-text-invert-2);
}

.pn-flow__step b {
  font-size: var(--nx-fs-base);
  font-weight: 600;
  letter-spacing: var(--nx-tracking);
  color: var(--nx-text-invert);
}

.pn-flow__step > span {
  font-family: var(--nx-font-mono);
  font-size: 13px;
  color: var(--nx-text-invert-2);
}

/* 파랑 위에서는 회색 글은 물론 어두운 구간의 흰 글(#f5f5f7, 4.31:1)도 4.5:1 에
   못 미친다. 순백(4.68:1)으로 올린다. */
.pn-flow__step.is-ai {
  background: var(--nx-accent);
}

.pn-flow__step.is-ai i,
.pn-flow__step.is-ai b,
.pn-flow__step.is-ai > span {
  color: var(--nx-text-on-accent);
}

/* 한 줄일 때만 칸 사이에 갈매기를 그린다. 칸 사이 틈(20px)의 한가운데다.
   줄이 바뀌면 갈매기가 엉뚱한 칸을 가리키므로 아래에서 지운다. */
.pn-flow__step + .pn-flow__step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--nx-text-invert-2);
  border-right: 1.5px solid var(--nx-text-invert-2);
  transform: translateY(-50%) rotate(45deg);
}

.pn-flow__key {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-sp-2);
  margin: var(--nx-sp-5) 0 var(--nx-sp-20);
  font-size: var(--nx-fs-sm);
  color: var(--nx-text-invert-2);
}

.pn-flow__key i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--nx-accent);
}

@media (max-width: 1100px) {
  .pn-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pn-flow__step::before {
    display: none;
  }
}

/* 휴대폰에서는 구간 머리가 왼쪽에 붙는다(layout.css). 범례도 같은 선에서 시작한다. */
@media (max-width: 720px) {
  .pn-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-sp-2);
  }
  .pn-flow__key {
    justify-content: flex-start;
    margin-bottom: var(--nx-sp-16);
  }
}