feat(installer-rp): auto-start install with progress card grid

2단계 페이지 진입 즉시 설치를 시작하고, 음악·사진을 1번부터 카드 그리드로
한눈에 볼 수 있게 만든다. 다운로드는 % 게이지로, 완료/실패는 색상으로 표시.

- main: prep/item/package phase 의 ProgressEvent 를 renderer 로 송신
- music.ts: yt-dlp stdout 의 [download] X% 라인을 파싱해 onProgress 호출
- preload: onProgress 채널 구독 함수 노출
- renderer: 다음 버튼 제거, prep chip + music/image 카드 그리드 + 빌드 상태
- styles: progressCard / prepChip / progressGrid 스타일 추가

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

installer/styles.css

@@ -221,3 +221,85 @@ main {
 .statusBadge.ok { background: rgba(63, 185, 80, 0.2); color: var(--success); }
 .statusBadge.warn { background: rgba(248, 197, 49, 0.2); color: #f0c244; }
 .statusBadge.fail { background: rgba(248, 81, 73, 0.2); color: var(--danger); }
+
+/* 설치 진행 카드 그리드 */
+.progressSection { margin: 18px 0 8px; }
+.progressSection h3 { margin: 0 0 10px; font-size: 15px; }
+.progressSection .sectionSub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
+
+.progressGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+  gap: 8px;
+}
+
+.progressCard {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 10px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 72px;
+  transition: border-color 0.15s, background 0.15s;
+}
+.progressCard.running { border-color: var(--accent); background: rgba(47, 129, 247, 0.10); }
+.progressCard.done { border-color: var(--success); background: rgba(63, 185, 80, 0.10); }
+.progressCard.error { border-color: var(--danger); background: rgba(248, 81, 73, 0.10); }
+
+.progressCard .cardTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 600;
+}
+.progressCard .cardTop .label { color: var(--text); }
+.progressCard .cardTop .icon { font-size: 14px; }
+.progressCard.pending .cardTop .icon { color: var(--text-muted); }
+.progressCard.running .cardTop .icon { color: var(--accent); }
+.progressCard.done .cardTop .icon { color: var(--success); }
+.progressCard.error .cardTop .icon { color: var(--danger); }
+
+.progressCard .bar {
+  height: 6px;
+  background: #2a2f37;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.progressCard .bar > span {
+  display: block;
+  height: 100%;
+  width: 0%;
+  background: var(--accent);
+  transition: width 0.18s linear;
+}
+.progressCard.done .bar > span { background: var(--success); }
+.progressCard.error .bar > span { background: var(--danger); }
+
+.progressCard .pct {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-align: right;
+}
+
+.prepRow {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.prepChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.prepChip.active { border-color: var(--accent); color: var(--text); }
+.prepChip.done { border-color: var(--success); color: var(--success); }