/*
 * 스텝 진행 표시 (.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: #f8fafc; border: 1px solid #e2e8f0; 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: #94a3b8; font-weight: 500; }
.ord-step.active { background: #dbeafe; color: #1e40af; font-weight: 700; }
.ord-step.done { color: #059669; }
.ord-step-num { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; background: white; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 700; }
.ord-step-arrow { color: #cbd5e1; 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; }
}

html.dark .ord-stepper { background: #0f172a; border-color: #334155; }
html.dark .ord-step { color: #64748b; }
html.dark .ord-step.active { background: #1e3a5f; color: #bfdbfe; }
html.dark .ord-step-num { background: #0f172a; }