/* buy-steps — 납텍 사이클.

   메인 첫 화면 바로 아래에 사는 흐름을 다섯 칸으로 보인다 — 찾기 → 납이 상담 → 견적 요청 → 담당자 회신 → 발주 요청(사용자 결정 2026-09-16).
   납텍이 파는 것은 "사는 과정이 편하다" 이므로, 그 과정을 순서대로 먼저 보여 준다.
   단계는 실제 순서라 번호가 정보를 담는다(01–04).

   예전 사이트의 "견적에서 발주까지" 타임라인 배너(견적문의 · 제품상담 · 발주하기 · 납품받기)를
   지금의 흐름으로 고쳐 옮겼다. 테마의 timeline 블록(6단계 · 교정 · 입고)과는 쓰임이 달라 따로 둔다.

   칸 나누기 — 모바일 1열, 태블릿 3열(3 + 2), PC 한 줄에 단계 수만큼(--nb-bs-n, 지금 5).
   제목(h2)을 가진 블록이라 skin-95.css 가 창틀과 제목 표시줄을 두른다. */

.nb-bs__lead { margin: 0 0 var(--nb-s4); font-size: var(--nb-t-md); color: var(--nb-ink-2); }

.nb-bs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--nb-gutter);
  counter-reset: none;
}
.nb-bs__step {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--nb-s1);
  padding: var(--nb-s3) var(--nb-s4) var(--nb-s4);
  background: var(--nb-surface);
  border: var(--nb-bw) solid var(--nb-line);
}
/* 단계 머리 — 아이콘(남색) + 순서 번호 */
.nb-bs__head { display: flex; align-items: center; gap: var(--nb-s2); min-height: 24px; color: var(--nb-accent); }
.nb-bs__nabi { width: 24px; height: 24px; display: block; }
.nb-bs__no {
  font-family: var(--nb-mono); font-size: var(--nb-t-xs); font-weight: 700;
  color: var(--nb-accent); font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.nb-bs__title { margin: 0; font-size: var(--nb-t-lg); font-weight: 750; letter-spacing: -.01em; }
.nb-bs__desc { margin: 0; font-size: var(--nb-t-sm); color: var(--nb-ink-2); }
.nb-bs__go {
  justify-self: start; margin-top: var(--nb-s2);
  font-size: var(--nb-t-sm); font-weight: 700; color: var(--nb-accent); text-underline-offset: 3px;
}
.nb-bs__go { gap: var(--nb-s1); }
.nb-bs__go::after { content: "\2192"; }
/* 견적 문의도 공용 글 링크 하나 — 같은 줄의 다른 걸음 링크와 밑줄 · 화살표 간격을 맞춘다 */
.nb-bs__go.nb-quote-link { text-decoration: underline; text-underline-offset: 3px; }
/* 사람이 하는 단계 — 누를 것이 없다. 링크 자리에 누가 하는지를 적는다. */
.nb-bs__who { justify-self: start; margin-top: var(--nb-s2); font-size: var(--nb-t-xs); color: var(--nb-ink-3); }

@container nb-block (min-width: 640px) {
  .nb-bs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container nb-block (min-width: 1024px) {
  .nb-bs { grid-template-columns: repeat(var(--nb-bs-n, 5), minmax(0, 1fr)); }
  /* 단계 사이 화살표 — 틈(gutter) 한가운데에 선다 */
  .nb-bs__step { position: relative; }
  .nb-bs__step + .nb-bs__step::before {
    content: "\25B6"; position: absolute; top: 50%; left: calc(var(--nb-gutter) / -2);
    transform: translate(-50%, -50%);
    font-size: var(--nb-t-xs); line-height: 1; color: var(--nb-field);
  }
}