/*
 * 스텝 진행 표시 (.ord-stepper) — 다단계 모달 공용
 *
 * 「① 파일 선택 › ② 매핑 › ③ 완료」 형태. 스펙은 원천DB 직접등록 모달(`.fdb-mi-stepper`,
 * 뷰 인라인 정의)과 동일하며, 새 모달은 이 공용 클래스를 쓴다.
 * ⏳`.fdb-mi-stepper` 도 이후 이 클래스로 이관 대상(지금은 동작 보존을 위해 그대로 둔다).
 *
 * 마크업:
 *   <div class="ord-stepper">
 *     <div class="ord-step active"><span class="ord-step-num">1</span> 캠페인</div>
 *     <div class="ord-step-arrow">›</div>
 *     <div class="ord-step"><span class="ord-step-num">2</span> 복사 항목</div>
 *   </div>
 */
.ord-stepper { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--ord-surface-2); border: 1px solid var(--ord-line); border-radius: 10px; flex-shrink: 0; flex-wrap: wrap; }
.ord-step { display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; font-size: 11.5px; color: var(--ord-text-4); font-weight: 500; }
.ord-step.active { background: var(--ord-tint-blue-bg); color: var(--ord-tint-blue-fg); font-weight: 700; }
.ord-step.done { color: var(--ord-tint-green-fg); }
.ord-step-num { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; background: var(--ord-surface); border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 700; }
.ord-step-arrow { color: var(--ord-line-2); font-size: 14px; }

@media (max-width: 640px) {
  .ord-stepper { gap: 4px; padding: 6px 8px; }
  .ord-step { padding: 3px 6px; font-size: 10.5px; }
  .ord-step-arrow { font-size: 12px; }
}