feat(playlist): show download progress page after import instead of navigating away

플레이리스트 등록 후 폴더로 바로 나가지 않고, 각 다운로드 잡을 폴링하며
항목별/전체 진행률을 보여주는 진행 화면을 추가. 단일 영상 추가 흐름과 동일하게
/op/job/:id 를 폴링하고, 모두 끝나면 "폴더로 이동" 버튼을 노출한다.

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>

public/styles.css

@@ -467,3 +467,36 @@ body.siteBody.centerLayout { display: flex; align-items: center; justify-content
   display: flex; align-items: center; justify-content: space-between;
   gap: 12px; flex-wrap: wrap; margin-top: 8px;
 }
+
+/* ─── 플레이리스트 다운로드 진행 화면 ─────────────────────────────── */
+.playlistProgressSection {
+  margin-top: 18px;
+  display: flex; flex-direction: column; gap: 14px;
+}
+.progressHeader {
+  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 10px; padding: 12px 16px;
+}
+.progressHeader #progressSummary { font-size: 14px; color: var(--text); }
+.progressHeader #progressOverall { flex: 1; min-width: 200px; height: 12px; }
+.progressList { list-style: none; margin: 0; padding: 0;
+  display: flex; flex-direction: column; gap: 8px; }
+.progressRow {
+  display: grid; grid-template-columns: 1fr 180px auto; align-items: center;
+  gap: 12px; background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 10px; padding: 10px 14px;
+}
+.progressName {
+  color: var(--text); font-size: 14px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.progressBar { width: 100%; height: 10px; }
+.progressBar.progressBarError::-webkit-progress-value { background: #e5534b; }
+.progressMsg { font-size: 12px; white-space: nowrap; text-align: right; }
+.progressRowDone { border-color: #2ea043; }
+.progressRowError { border-color: #e5534b; }
+@media (max-width: 640px) {
+  .progressRow { grid-template-columns: 1fr; gap: 6px; }
+  .progressMsg { text-align: left; }
+}