新增管理員頁面、Word PDF 預覽、租賃日期欄位、SSL docker-compose

- 新增 /admin.html：上傳/刪除範本，HTTP Basic Auth 保護
- Word 預覽改用 LibreOffice PDF 轉換，帶入表單參數即時顯示
- 新增租賃開始/結束年月日、租期年數佔位符支援
- 預覽 loading 遮罩，修正 hidden 被 CSS display:flex 覆蓋的問題
- 左右欄 UI 重構，右欄固定顯示 Word 預覽
- 新增 docker-compose.yml + nginx SSL reverse proxy
- admin 密碼改由 ADMIN_PASSWORD 環境變數設定

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

public/styles.css

@@ -8,7 +8,6 @@
   --muted: #64716b;
   --accent: #0f766e;
   --accent-hover: #0b5f59;
-  --warning: #9a5b00;
   --shadow: 0 18px 45px rgba(15, 35, 30, 0.08);
 }
 
@@ -16,6 +15,10 @@
   box-sizing: border-box;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
@@ -33,7 +36,7 @@ select {
 }
 
 .app-shell {
-  width: min(1080px, calc(100% - 32px));
+  width: min(1280px, calc(100% - 32px));
   margin: 0 auto;
   padding: 32px 0;
 }
@@ -82,31 +85,46 @@ h2 {
 
 .workspace {
   display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
+  grid-template-columns: 360px 1fr;
   gap: 20px;
   align-items: start;
 }
 
-.tool-panel,
-.result-panel {
+.left-col {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.right-col {
+  position: sticky;
+  top: 20px;
+}
+
+.tool-panel {
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--surface);
   box-shadow: var(--shadow);
-}
-
-.tool-panel {
   display: grid;
   gap: 18px;
   padding: 22px;
 }
 
+.fields-panel {
+  gap: 14px;
+}
+
 .field-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
 }
 
+.field-grid--2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .field {
   display: grid;
   gap: 8px;
@@ -166,16 +184,16 @@ h2 {
   opacity: 0.55;
 }
 
-.result-panel {
+.result-inline {
   display: grid;
-  gap: 24px;
-  min-height: 216px;
-  padding: 22px;
+  gap: 16px;
+  padding-top: 4px;
+  border-top: 1px solid var(--border);
 }
 
 .message {
-  min-height: 46px;
-  margin: 10px 0 0;
+  min-height: 40px;
+  margin: 8px 0 0;
   color: var(--muted);
   line-height: 1.6;
   overflow-wrap: anywhere;
@@ -185,21 +203,87 @@ h2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
-  align-self: end;
 }
 
-@media (max-width: 760px) {
+.preview-panel {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: calc(100vh - 120px);
+  min-height: 400px;
+}
+
+.preview-panel .eyebrow {
+  margin: 0;
+}
+
+.preview-wrap {
+  flex: 1;
+  position: relative;
+  min-height: 0;
+}
+
+#previewFrame {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: #fafafa;
+}
+
+.preview-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  background: rgba(246, 248, 247, 0.85);
+  border-radius: 4px;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.preview-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (max-width: 900px) {
+  .workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .right-col {
+    position: static;
+  }
+
+  .preview-panel {
+    height: 480px;
+  }
+}
+
+@media (max-width: 600px) {
   .app-shell {
     width: min(100% - 24px, 560px);
     padding: 20px 0;
   }
 
-  .topbar,
-  .workspace,
-  .field-grid {
-    grid-template-columns: 1fr;
-  }
-
   .topbar {
     display: grid;
   }
@@ -211,4 +295,9 @@ h2 {
   .primary-button {
     width: 100%;
   }
+
+  .field-grid,
+  .field-grid--2 {
+    grid-template-columns: 1fr;
+  }
 }