/* ==========================================================================
   steps — 진행 단계 표시 (Cart → Send order → Order Completed)
   기능정의서 R3 의 단계 표시에도 같은 컴포넌트를 쓴다
   ========================================================================== */

.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.steps__item {
  color: var(--c-line-input);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  white-space: nowrap;
}
.steps__item.is-current { color: var(--c-blue-deep); }
.steps__item.is-done { color: var(--c-text-sub); }

.steps__line {
  width: 20px;
  height: 1px;
  background: var(--c-line-input);
}

@media (min-width: 560px) {
  .steps__line { width: 50px; }
}