Word 預覽：修正手機只能看第一頁、載入中遮罩無法關閉

- 預覽面板新增「開新分頁」按鈕，手機可完整瀏覽所有頁面
- 修正 [hidden] 被 CSS display:flex 覆蓋導致載入中遮罩卡住的問題
- 改用 generation counter 取代 AbortController signal 判斷載入狀態

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/app.js

@@ -8,6 +8,7 @@ const resultTitle = document.querySelector('#resultTitle');
 const connectionStatus = document.querySelector('#connectionStatus');
 const previewFrame = document.querySelector('#previewFrame');
 const previewLoading = document.querySelector('#previewLoading');
+const previewOpenBtn = document.querySelector('#previewOpenBtn');
 
 let currentPdfBlob = null;
 let currentPdfFileName = '租屋契約.pdf';
@@ -168,6 +169,8 @@ async function loadPreview() {
     if (previewBlobUrl) URL.revokeObjectURL(previewBlobUrl);
     previewBlobUrl = URL.createObjectURL(blob);
     previewFrame.src = `${previewBlobUrl}#toolbar=0`;
+    previewOpenBtn.href = previewBlobUrl;
+    previewOpenBtn.hidden = false;
   } catch {
     // AbortError 或其他錯誤都忽略，交給 finally 處理
   } finally {

public/index.html

@@ -81,7 +81,10 @@
 
         <div class="right-col">
           <div class="preview-panel">
+            <div class="preview-header">
               <p class="eyebrow">Word 預覽</p>
+              <a id="previewOpenBtn" class="secondary-button preview-open-btn" target="_blank" hidden>開新分頁</a>
+            </div>
             <div class="preview-wrap">
               <iframe id="previewFrame" src="about:blank" title="Word 範本預覽"></iframe>
               <div id="previewLoading" class="preview-loading" hidden>

public/styles.css

@@ -218,10 +218,26 @@ h2 {
   min-height: 400px;
 }
 
-.preview-panel .eyebrow {
+.preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.preview-header .eyebrow {
   margin: 0;
 }
 
+.preview-open-btn {
+  min-height: 32px;
+  padding: 0 12px;
+  font-size: 0.85rem;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+}
+
 .preview-wrap {
   flex: 1;
   position: relative;