docs(rework): 사용법 모달에 '원본 다운로드' 이미지 가이드 추가

재가공 사용법 모달 상단에 실제 화면 캡쳐 3장으로 단계별 안내 추가:
1) 원본 다운로드 버튼  2) 자동 전사된 시간싱크 자막  3) 내보내기(업로드 불필요).
?help=1 딥링크로 사용법을 바로 펼칠 수 있게 함.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/main/resources/templates/rework.html

@@ -26,6 +26,47 @@
             <div class="modal-card">
                 <div class="modal-head"><h3>📖 재가공 사용법</h3><button class="modal-close" onclick="closeHelp()">&times;</button></div>
                 <div class="modal-body">
+                    <!-- 이미지 중심: 원본 다운로드 → 전사 → 내보내기 한 번에 (NEW) -->
+                    <div class="usage-guide">
+                        <div class="ug-title">🎬 원본 다운로드 한 번에 <span class="ug-new">NEW</span></div>
+                        <p class="ug-lead">유튜브에서 직접 받아 올릴 필요 없이, <b>버튼 한 번</b>으로 원본을 받아
+                            <b>자동 전사</b>하고 그대로 <b>컷편집·내보내기</b>까지 이어집니다.</p>
+
+                        <div class="ug-step">
+                            <span class="ug-badge">1</span>
+                            <div class="ug-step-body">
+                                <div class="ug-step-t">‘원본 다운로드’ 클릭</div>
+                                <div class="ug-step-d">저장된 영상 URL로 <b>yt-dlp</b>가 원본을 받아 서버에 보관합니다.
+                                    URL을 따로 입력할 필요가 없어요. (언어가 틀리면 왼쪽 <b>자동감지</b>에서 ko/en/zh/ja 선택)</div>
+                                <img class="ug-img" th:src="@{/img/usage/dl-1-button.png}" alt="원본 다운로드 버튼" loading="lazy">
+                            </div>
+                        </div>
+
+                        <div class="ug-step">
+                            <span class="ug-badge">2</span>
+                            <div class="ug-step-body">
+                                <div class="ug-step-t">자동 전사 완료 → 시간 싱크 자막 생성</div>
+                                <div class="ug-step-d">다운로드가 끝나면 <b>Whisper</b>가 바로 전사해 <b>[00:00] 자막</b> 세그먼트가 만들어집니다.
+                                    줄을 클릭하면 영상이 그 지점으로 이동해요.</div>
+                                <img class="ug-img" th:src="@{/img/usage/dl-2-segments.png}" alt="자동 생성된 시간 싱크 자막" loading="lazy">
+                            </div>
+                        </div>
+
+                        <div class="ug-step">
+                            <span class="ug-badge">3</span>
+                            <div class="ug-step-body">
+                                <div class="ug-step-t">내보내기 (업로드 불필요)</div>
+                                <div class="ug-step-d"><b>말 없는 구간 제거</b>·<b>배속</b>을 적용하고 <b>SRT / 영상</b>을 내보내면 CapCut에 그대로 import.
+                                    렌더는 <b>방금 받은 원본을 그대로 재사용</b>하므로 다시 업로드할 필요가 없습니다.</div>
+                                <img class="ug-img" th:src="@{/img/usage/dl-3-export.png}" alt="내보내기(배속·말없는구간 제거·SRT/영상)" loading="lazy">
+                            </div>
+                        </div>
+
+                        <p class="ug-tip">💡 직접 받은 파일을 쓰고 싶으면 옆의 <b>‘영상 업로드·전사’</b>로 올리면 됩니다(기존 방식 그대로).</p>
+                    </div>
+
+                    <div class="ug-divider"></div>
+
                     <div class="help-item">
                         <div class="hi-ic"><i data-lucide="upload"></i></div>
                         <div><div class="hi-t">영상 업로드 · 전사</div><div class="hi-d">영상 파일을 올리면 <b>Whisper</b>가 말소리를 <b>시간 싱크 자막</b>으로 추출합니다. 언어는 자동감지(틀리면 옆에서 ko/en/zh/ja 선택). ‘URL자막’은 YouTube 자막을 평문으로(시간 없음) 가져옵니다.</div></div>
@@ -50,6 +91,26 @@
             </div>
         </div>
 
+        <style>
+            .usage-guide { margin-bottom: 6px; }
+            .ug-title { font-size: 1.05rem; font-weight: 800; display:flex; align-items:center; gap:8px; margin-bottom: 6px; }
+            .ug-new { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em; color:#fff;
+                background:#f97316; padding: 2px 7px; border-radius: 999px; }
+            .ug-lead { color: var(--text-2); font-size: 0.9rem; line-height: 1.6; margin-bottom: 14px; }
+            .ug-step { display:flex; gap: 12px; margin-bottom: 16px; }
+            .ug-badge { flex-shrink:0; width: 26px; height: 26px; border-radius: 50%;
+                background:#f97316; color:#fff; font-weight: 800; font-size: 0.85rem;
+                display:flex; align-items:center; justify-content:center; margin-top: 1px; }
+            .ug-step-body { flex: 1; min-width: 0; }
+            .ug-step-t { font-weight: 700; font-size: 0.95rem; margin-bottom: 3px; }
+            .ug-step-d { color: var(--text-2); font-size: 0.85rem; line-height: 1.6; margin-bottom: 9px; }
+            .ug-img { display:block; width: 100%; border: 1px solid var(--glass-border);
+                border-radius: var(--radius-md); box-shadow: 0 2px 10px rgba(0,0,0,0.10); }
+            .ug-tip { font-size: 0.85rem; color: var(--text-2); background: var(--surface-2);
+                border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 9px 12px; margin-top: 4px; }
+            .ug-divider { height:1px; background: var(--glass-border); margin: 18px 0; }
+        </style>
+
         <div style="display:grid; grid-template-columns: 360px 1fr; gap:1.5rem; align-items:start;">
             <!-- 좌: 영상 + 정보 -->
             <div class="card">
@@ -579,6 +640,9 @@
             function closeHelp(){ document.getElementById('helpModal').classList.remove('open'); }
             document.addEventListener('keydown', e => { if(e.key === 'Escape') closeHelp(); });
 
+            // ?help=1 딥링크로 들어오면 사용법을 바로 펼친다(공유/안내용).
+            if (new URLSearchParams(location.search).get('help') === '1') openHelp();
+
             (async ()=>{ await load(); await loadPublish(document.getElementById('vTitle').textContent); })();
             /*]]>*/
         </script>