Improve result modal and Envato previews

frontend/index.html

@@ -158,23 +158,31 @@
           </div>
           <div class="flex items-center gap-2">
             <a id="resultModalOpenExternal" target="_blank" rel="noreferrer" class="rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-300">Open</a>
-            <button id="resultModalDownload" type="button" class="hidden rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-300">Direct Download</button>
             <button id="closeResultModal" type="button" class="rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-300">Close</button>
           </div>
         </div>
         <div class="grid min-h-0 flex-1 gap-0 lg:grid-cols-[1.5fr_0.85fr]">
           <div class="min-h-0 border-b border-white/10 lg:border-b-0 lg:border-r">
-            <iframe id="resultModalFrame" class="h-full w-full bg-white" referrerpolicy="no-referrer"></iframe>
+            <div id="resultModalMediaFrame" class="flex h-full min-h-[320px] items-center justify-center overflow-hidden bg-black/40 p-4">
+              <video id="resultModalVideo" class="hidden max-h-full w-full rounded-2xl bg-black object-contain" controls playsinline></video>
+              <img id="resultModalThumbnail" class="hidden max-h-full w-full rounded-2xl object-contain" alt="" />
+              <div id="resultModalEmbedNotice" class="max-w-md rounded-3xl border border-white/10 bg-white/[0.03] p-6 text-center text-sm leading-7 text-zinc-300">
+                외부 사이트 임베딩 차단 문제를 피하기 위해 내부 미리보기만 표시합니다.
+              </div>
+            </div>
           </div>
           <div class="min-h-0 overflow-auto px-5 py-5">
             <div class="space-y-5">
-              <div>
-                <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">Source Summary</p>
-                <p id="resultModalSnippet" class="mt-2 text-sm leading-7 text-zinc-300"></p>
-              </div>
               <div>
                 <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">AI Note</p>
                 <p id="resultModalReason" class="mt-2 whitespace-pre-wrap text-sm leading-7 text-zinc-200"></p>
+                <button id="resultModalDownload" type="button" class="mt-4 hidden w-full rounded-2xl border border-white bg-white px-4 py-3 text-sm font-medium text-black transition hover:bg-zinc-200">
+                  Direct Download
+                </button>
+              </div>
+              <div>
+                <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">Source Summary</p>
+                <p id="resultModalSnippet" class="mt-2 text-sm leading-7 text-zinc-300"></p>
               </div>
             </div>
           </div>