/* progress-inline.css — 공유 진행바(`progress-inline.js`)의 **스타일 정본**.
 *
 * ★2026-09-05 `T-192` 로 여기로 옮겼다. 원래 자리는 `sourcing.css` 였는데,
 *   그 파일은 **기존 앱(`index.html`)만** 싣는다. 그래서 같은 컴포넌트를
 *   반자동 작업대(`/fast`)에 붙였더니 **채움 막대 높이가 0px** 이었다(실측) —
 *   마크업은 다 그려지는데 트랙·채움이 통째로 안 보였다.
 * ★교훈: **컴포넌트의 스타일은 그 컴포넌트와 같이 산다.** 화면 하나의 CSS 에 얹어 두면
 *   그 화면 밖에서 쓰는 순간 조용히 반쪽이 된다(= 이 리포의 «만들었다 ≠ 닿는다»).
 * ★싣는 곳 = `static/index.html`(평범한 link) · `static/fast.html`(`layer(legacy)`).
 *   ★`/fast` 에서 **레이어 밖으로 실으면 안 된다** — `app.css` 의
 *     `#global-progress-root .pbar { border:0; background:transparent }`(껍데기 벗기기)가
 *     레이어라서 지고, 진행바에 **테두리가 이중으로** 생긴다.
 * ★색은 `tokens.css` 변수만 쓴다(§11-L). 여기에 새 hex 를 타이핑하지 마라.
 */

/* ── 인라인 진행바 (공유 컴포넌트 progress-inline.js, 2026-07-21) ────────────────
   워크샵 "최종 생성" 진행바 스타일을 공유한다(사장님 요청). 재수집·배치 등이 같이 쓴다.
   ★색은 tokens.css var(--*) 만. 채움바 그라데이션만 워크샵과 동일하게 맞춘다. */
.pbar {
  margin-bottom: 12px; padding: 11px 14px; border-radius: 10px; word-break: keep-all;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
}
.pbar.done { border-color: var(--color-success); }
.pbar.bad  { border-color: var(--color-banned-text); }
.pbar-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.pbar-title { font-weight: 700; color: var(--color-text-primary); }
.pbar-count { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pbar-count b { color: var(--color-primary); font-size: 15px; }
.pbar.done .pbar-count b { color: var(--color-success); }
/* ⏱ 경과 = 오른쪽으로 민다. 그 뒤 버튼과 사이를 벌린다. */
.pbar-elapsed { margin-left: auto; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pbar-elapsed b { color: var(--color-text-primary); font-weight: 700; }
.pbar-right { display: flex; align-items: center; gap: 6px; }
.pbar-track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--color-bg-section);
}
.pbar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-progress-end));
  transition: width .4s ease;
}
.pbar.done .pbar-fill { background: linear-gradient(90deg, var(--color-success), var(--color-progress-end-done)); }
.pbar.bad  .pbar-fill { background: linear-gradient(90deg, var(--color-banned-text), var(--color-progress-end-bad)); }
.pbar-sub {
  margin-top: 7px; font-size: 12px; color: var(--color-text-muted); word-break: keep-all;
}
.pbar-sub b { color: var(--color-primary); font-weight: 700; }
.pbar-sub .bad { color: var(--color-banned-text); font-weight: 700; }
/* total 을 모를 때 = 흐르는 애니메이션(무엇이 도는 중이라는 신호). */
.pbar.indet .pbar-fill {
  width: 40% !important;
  animation: pbar-slide 1.3s ease-in-out infinite;
}
@keyframes pbar-slide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pbar.indet .pbar-fill { animation: none; }
}