diff --git a/web/admin/item/TabletDesigner.aspx b/web/admin/item/TabletDesigner.aspx
index 371d201..3722630 100644
--- a/web/admin/item/TabletDesigner.aspx
+++ b/web/admin/item/TabletDesigner.aspx
@@ -3,6 +3,11 @@
 <%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
 
 <asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
+    <style>
+        .canvas-area{
+            min-height: 100vw !important;
+        }
+    </style>
 </asp:Content>
 
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
diff --git a/web/admin/item/css/tablet-design.css b/web/admin/item/css/tablet-design.css
index 07d3992..6710085 100644
--- a/web/admin/item/css/tablet-design.css
+++ b/web/admin/item/css/tablet-design.css
@@ -1,7 +1,7 @@
 :host {
   display: block;
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
   --canvas-bg: #f8f9fa;
   --canvas-grid: #dee2e6;
   --paper-bg: #fffbf0;
@@ -27,7 +27,7 @@
     background-image: linear-gradient(45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(-45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--canvas-grid) 75%), linear-gradient(-45deg, transparent 75%, var(--canvas-grid) 75%);
     background-size: 20px 20px;
     transition: background-color 0.3s;
-    min-height: 100vw;
+/*    min-height: 100vw;*/
    
 }
 
diff --git a/web/admin/print/print_multi_new.aspx b/web/admin/print/print_multi_new.aspx
index 30a9ce0..6174aff 100644
--- a/web/admin/print/print_multi_new.aspx
+++ b/web/admin/print/print_multi_new.aspx
@@ -15,49 +15,71 @@
     <link href="~/admin/Templates/TBS5ADM001/css/Style.css" rel="stylesheet" />
     <link href="~/admin/item/css/floating.css" rel="stylesheet" />
     <link href="~/admin/item/css/tablet-design.css" rel="stylesheet" />
+    <style>
+         @media print {
+            /*@page {
+                size: 398mm 216mm portrait;
+                margin: 0;
+            }*/
+            html, body, form, .full-home, #printArea, .canvas-area {
+                height: auto !important;
+                width: 210mm !important;
+                overflow: visible !important;  /*必須為 visible */
+                margin: 0 !important;
+                padding: 0 !important;
+/*                display: block !important;*/
+            }
+            .no-print, #customMenu {
+                display: none !important;
+            }
+            
+        }
+    </style>
 </head>
 <body>
-    <form id="form1" runat="server">
-         <div class="d-flex overflow-hidden" style="height:1920px">
-      <div id="printArea" style="width: 100vw; height: 100vh">
-    
-      <%--   <div class="tablet-paper">
+   
+        <span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
+        <div class="d-flex  full-home" style="height: auto;width:100%;">
+            <div id="printArea" class="printArea" style="width: auto; height: auto">
+
+                <%--   <div class="tablet-paper">
          </div>--%>
-    <%-- </div>--%>
- </div>
-             </div>
-
-
-    <div id="customMenu" style="display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; z-index: 1000;opacity:1;">
-        <div class="container">
-            <div class="row">
-                <div class="col-6">
-                    <div class="form-floating mb-3">
-                        <input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
-                        <label class="small" for="textX">X軸位置</label>
-                    </div>
-                </div>
-                 <div class="col-6">
-                     <div class="form-floating mb-3">
-                         <input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
-                         <label class="small" for="textY">Y軸位置</label>
-                     </div>
-                 </div>
-                 <div class="col-6">
-                     <div class="form-floating mb-3">
-                         <input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSize()" />
-                         <label class="small" for="fontSize">字體大小</label>
-                     </div>
-                 </div>
-                 <div class="col-6">
-                     <div class="form-floating mb-3">
-                         <input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
-                         <label class="small" for="textWidth">文字寬度</label>
-                     </div>
-                 </div>
+                <%-- </div>--%>
             </div>
         </div>
-    </div>
+
+
+        <div id="customMenu" style="display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
+            <div class="container">
+                <div class="row">
+                    <div class="col-6">
+                        <div class="form-floating mb-3">
+                            <input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
+                            <label class="small" for="textX">X軸位置</label>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="form-floating mb-3">
+                            <input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
+                            <label class="small" for="textY">Y軸位置</label>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="form-floating mb-3">
+                            <input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSize()" />
+                            <label class="small" for="fontSize">字體大小</label>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="form-floating mb-3">
+                            <input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
+                            <label class="small" for="textWidth">文字寬度</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+     <form id="form1" runat="server">
     </form>
 </body>
 <script src="<%=ResolveUrl("~/js/bootstrap5/js/bootstrap.bundle.min.js")%>"></script>
@@ -71,11 +93,11 @@
 <script src="<%=ResolveUrl("~/admin/item/jquery-ui/jquery-ui.min.js")%>"></script>
 <script>
     const Printer = {
-        selected:null,
+        selected: null,
         http_host: "",
         allStyle: [],
         allSize: [],
-        allStyleDetails:[],
+        allStyleDetails: [],
         printData: [],
         tabletElement: [],
         bg: [
@@ -121,7 +143,7 @@
                     if (response.status == "200") {
                         let data = response.data;
                         this.allSize = data.data;
-                    
+
                     }
                 }
                 )
@@ -134,20 +156,20 @@
                     if (response.status == "200") {
                         let data = response.data;
                         this.tabletElement = data.data;
-                       
+
                     }
                 }
                 );
         },
         async getTabletStyles() {
             await axios
-                .post(this.http_host  + 'api/tablet/GetStyleData', {})
+                .post(this.http_host + 'api/tablet/GetStyleData', {})
                 .then(response => {
                     //if (response.result=="Y") {
                     if (response.status == "200") {
                         let data = response.data;
                         this.allStyle = data.data;
-                      
+
                     }
                 }
                 );
@@ -162,10 +184,10 @@
             await axios
                 .post(this.http_host + 'api/orderdetail/GetDetailToPrint', { param: param })
                 .then(response => {
-                  
+
                     if (response.status == 200) {
                         this.printData = response.data;
-                       
+
                         this.render();
 
                         this.print();
@@ -174,28 +196,32 @@
         },
         render() {
             let self = this;
+            let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
             this.printData.forEach(x => {
-            
                 let style = this.allStyle.find(y => y.styleID == x.style);
-                console.log("style:",style);
+                console.log("style:", style);
                 let size = this.allSize.find(y => y.paperID == style.paperSize);
-                let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-column align-items-center position-relative" ></div>`)
+
+
                 let tabletpaper = $(` <div class="tablet-paper">
                 </div>`)
-                let img = self.bg.find(y=>y.name==style.backendImg);
+                let img = self.bg.find(y => y.name == style.backendImg);
                 tabletpaper.css({
                     "background-color": "white",
-                    width:  size.width + 'mm',
-                    height:size.height + 'mm',
-                    position: "absolute",
-
-                    "background-image": `url(${img.path})`, 'background-size': '100% 100%',
+                    width: size.width + 'mm',
+                    height: size.height + 'mm',
+                    position: "relative",
+                    "margin-bottom": "0",
+                    "background-image": `url(${img.path})`,
+                    'background-size': '100% 100%',
+                    "break-after": "page",
+                    "page-break-after": "always"
                 });
                 let tablet = JSON.parse(x.f_num_tablet);
-              
+
                 let mid_items = tablet.mid_items;
                 let left_items = tablet.left_items;
-                console.log("mid_items:",mid_items)
+                console.log("mid_items:", mid_items)
                 let details = this.allStyleDetails.filter(y => y.styleID == x.style);
                 let mid = [];
                 mid_items.forEach(y => {
@@ -204,7 +230,7 @@
                 details.forEach(d => {
                     if (d.isActive != "hidden") {
                         console.log(d);
-                        let html="";
+                        let html = "";
                         if (d.elementID = 'title1') {
                             let $namelist = $(`<div class='nameList'></div>`).css({
                                 "writing-mode": "vertical rl",
@@ -216,7 +242,7 @@
                                 height: `${d.height}px`,
                                 border: "0px solid #ccc",
                                 padding: "1px",
-                                "font-family": "BiauKai",
+                                "font-family": "Kaiti",
                                 "letter-spacing": "0.1em",
                                 "column-gap": "1px",
                                 "row-gap": "1px",
@@ -230,28 +256,58 @@
                                     width: `${d.textWidth}px`,
                                     "text-align": "justify",
                                     "text-align-last": "justify",
-                                    "margin-bottom": "40px",
+                                    "margin-bottom": "20px",
                                     "margin-left": "5px",
                                     "text-justify": "inter-character",
                                     "z-index": 10000,
                                 });
                                 $namelist.append($span);
                             });
-                            
+
                             html = $namelist;
                         }
 
                         let content = $(`<div class="tablet-element vertical-text "></div>`)
-                        .css({
-                            position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: d.fontSize + 'pt', fontFamily: d.fontFamily, "z-index": 9999, visibility: d.isActive
-                            //position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
-                        })
+                            .css({
+                                position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: d.fontSize + 'pt', fontFamily: d.fontFamily, "z-index": 9999, visibility: d.isActive
+                                //position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
+                            })
                             .html(html);
                         tabletpaper.append(content);
                     }
-                    
+
                 })
                 $(canvas).append(tabletpaper);
+                console.log(size.width,size.height);
+                let pageStyle = `<style id="pageStyle">
+                   
+
+                    @media print{
+                        :host {
+                            width:auto !important;
+                            height:auto !important;
+                        }
+                        @page {
+                            size:210mm 297mm !important;
+                            margin:0;
+                        }
+                        .tablet-paper {
+                            width: ${size.width}mm ;
+                            height: ${size.height}mm;
+                            position: relative !important;
+                            display: block !important;
+                            break-after: page !important;
+                            page-break-after: always !important;
+                            margin: 0 !important;
+                            border: none !important;
+                        }
+                    }
+                `
+                $("#pageStyle").remove();
+                $("head").append(pageStyle
+                );
+                $(canvas).css("width", "210" + "mm");
+                $(canvas).css("height","297"+ "mm");
                 $("#printArea").append(canvas);
                 //this.bindKeyEvent();
             });
@@ -286,11 +342,11 @@
                 console.log(fontSize, fontFamily, left, top);
                 $("#customMenu").css({
                     top: e.pageY + "px",
-                    left: (e.pageX+30) + "px"
+                    left: (e.pageX + 30) + "px"
                 });
                 left = left.replace("px", "");
                 top = top.replace("px", "");
-                $("#textX").val(self.fix2(left*0.265));
+                $("#textX").val(self.fix2(left * 0.265));
                 $("#textY").val(self.fix2(top * 0.265));
                 $("#fontSize").val(fontSize);
                 //$("#textWidth").val("");
@@ -303,8 +359,8 @@
         },
         async changeLocation() {
             console.log(this.selected);
-            $(this.selected).css("left", $("#textX").val()+"mm");
-            $(this.selected).css("top", $("#textY").val()+"mm");
+            $(this.selected).css("left", $("#textX").val() + "mm");
+            $(this.selected).css("top", $("#textY").val() + "mm");
         },
         async changeSize() {
             $(this.selected).css("fontSize", $("#fontSize").val())
@@ -312,21 +368,23 @@
         async changeWidth() {
             let nameList = $(this.selected).find(".nameList").first();
             console.log("nameList:", nameList);
-           
+
             if (nameList) {
                 let spans = $(nameList).find("span");
                 console.log(spans);
                 if (spans) {
-                    spans.each(function(index,x) {
-                        $(x).css("width",$("#textWidth").val())
+                    spans.each(function (index, x) {
+                        $(x).css("width", $("#textWidth").val())
                     });
 
                 }
             }
         },
         print() {
-            //let s = this.allStyle.find(x => x.styleID == this.styleID)
-            let size = this.allSize.find(x => x.paperID = "0001")
+
+            //setTimeout(() => { window.print(); }, 1000); 
+            let s = this.allStyle.find(x => x.styleID == this.styleID)
+            let size = this.allSize.find(x => x.paperID = "20260311160935")
             let w = window.open('', '_blank');
             if (!w) {
                 alert("請允許瀏覽器開啟彈出式視窗！");
@@ -351,119 +409,175 @@
                 <title>預覽列印 - 牌位設計</title>
                 <meta charset="utf-8">
                
-  
-                <style>
-                
-            /* 名單金字塔佈局容器 */
-            .roster-container {
-              width: 100%; height: 100%;
-              writing-mode: vertical-rl; /* 直書 */
-              display: flex;
-              /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
-              flex-direction: row;     /* 上下分層 (Top / Bottom) */
-              align-items: center;    /* 左右置中對齊 */
-              justify-content: center;
-              gap: 20px;               /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
+               
+                   <style>
+        /* 基礎變數與強制背景列印 */
+        * {
+            -webkit-print-color-adjust: exact !important;
+            print-color-adjust: exact !important;
+            color-adjust: exact !important;
+        }
+
+        /* 螢幕預覽樣式 */
+        @media screen {
+            body {
+                background-color: #525659;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 20px 0;
             }
-
-            .roster-row {
-              display: flex;
-              flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
-              justify-content: center;
-              gap: 8px; /* 名字之間的間距 */
-              margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
+            #printArea {
+                width: auto !important;
+                height: auto !important; /* 移除 100vh 限制 */
             }
-
-            .name-group {
-              display: flex;
-              flex-direction: column;  /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
-              justify-content: center;
-              align-items: center;
-              /* gap 由 HTML 動態綁定 */
+            .tablet-paper {
+                margin-bottom: 30px;
+                box-shadow: 0 0 10px rgba(0,0,0,0.5);
+                background-color: white;
             }
+        }
 
-            .roster-name {
-              text-orientation: upright;
-             /*font-weight: bold;*/
-              white-space: nowrap;
-              line-height: 1.2;
-              font-family: 'Kaiti', serif;
-              /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
-              width: fit-content;
-            }   
-            .vertical-text {
-                writing-mode: vertical-rl !important;
-                -webkit-writing-mode: vertical-rl !important;
-                text-orientation: mixed !important;
+        /* 關鍵：修正 Ctrl+P 空白問題 */
+        @media print {
+            @page {
+                size: 210mm 272mm portrait;
+                margin: 0;
             }
-
-            /* 【修復底圖沒出現】強制印出背景設定 */
-            * {
-                -webkit-print-color-adjust: exact !important;
-                print-color-adjust: exact !important;
-                color-adjust: exact !important;
+            html, body, form, .full-home, #printArea, .canvas-area {
+                height: auto !important;
+                width: auto !important;
+                overflow: visible !important; /* 必須為 visible */
+                margin: 0 !important;
+                padding: 0 !important;
+                display: block !important;
+            }
+            .canvas-area{
+                display:flex !important;
+                flex-direction: row !important;
+            }
+            .no-print, #customMenu {
+                display: none !important;
             }
-
-
-            /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
             .tablet-paper {
                 position: relative !important;
-                margin: 0 auto !important;
+                display: block !important;
+                break-after: page !important;
                 page-break-after: always !important;
-                box-shadow: none !important;
-                width: var(--page-w);
-                height: var(--page-h);
+                margin: 0 !important;
+                border: none !important;
             }
-
-            .tablet-element {
-                position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
-                color: black !important; /* 確保文字是黑色的 */
         }
 
-
-         .ancestor-wrapper {
-            /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
-            writing-mode: horizontal-tb;
-            display: flex;
-            flex-direction: column;
-            align-items: center; /* 水平置中 */
-            justify-content: center;
-            width: fit-content;
+        /* 元素排版樣式 */
+        .tablet-paper {
+            position: relative;
+            overflow: hidden;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
         }
-
-        .main-name {
-            line-height: 1.2;
-            /* 保持大字 */
+        .tablet-element {
+            position: absolute !important;
+            white-space: nowrap;
         }
-
-        .sub-text {
-            font-size: 0.6em; /* 縮小字體 */
-            line-height: 1.2;
-            margin-top: 4px; /* 與上方林張的間距 */
-            white-space: nowrap; /* 避免自動換行 */
-            writing-mode:vertical-rl
+        .vertical-text {
+            writing-mode: vertical-rl !important;
+            -webkit-writing-mode: vertical-rl !important;
         }
+    </style>
+    <style>
 
-        /* 列印時的紙張大小與頁面歸零 */
-                    @media print {
-                        @page {
-                            /* 動態套用您設定的紙張寬高 */
-                            size: ${size.width}mm ${size.height}mm portrait; 
-                            margin: 0;
-                        }
-                        body, html {
-                            margin: 0 !important;
-                            padding: 0 !important;
-                
-                        }
-                        body{
-                             --page-w: ${size.width}mm;
-                             --page-h: ${size.height}mm;
-                             --font-max: 22pt;
-                             --bg-padding: 0;
-                        }
-                    }
-                </style>
+    /* 名單金字塔佈局容器 */
+    .roster-container {
+      width: 100%; height: 100%;
+      writing-mode: vertical-rl; /* 直書 */
+      display: flex;
+      /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
+      flex-direction: row;     /* 上下分層 (Top / Bottom) */
+      align-items: center;    /* 左右置中對齊 */
+      justify-content: center;
+      gap: 20px;               /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
+    }
+
+    .roster-row {
+      display: flex;
+      flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
+      justify-content: center;
+      gap: 8px; /* 名字之間的間距 */
+      margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
+    }
+
+    .name-group {
+      display: flex;
+      flex-direction: column;  /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
+      justify-content: center;
+      align-items: center;
+      /* gap 由 HTML 動態綁定 */
+    }
+
+    .roster-name {
+      text-orientation: upright;
+     /*font-weight: bold;*/
+      white-space: nowrap;
+      line-height: 1.2;
+      font-family: 'Kaiti', serif;
+      /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
+      width: fit-content;
+    }
+    .vertical-text {
+        writing-mode: vertical-rl !important;
+        -webkit-writing-mode: vertical-rl !important;
+        text-orientation: mixed !important;
+    }
+
+    /* 【修復底圖沒出現】強制印出背景設定 */
+    * {
+        -webkit-print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
+        color-adjust: exact !important;
+    }
+
+
+    /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
+    .tablet-paper {
+        position: relative !important;
+        margin: 0 auto !important;
+        page-break-after: always !important;
+        box-shadow: none !important;
+        width: var(--page-w);
+        height: var(--page-h);
+    }
+
+    .tablet-element {
+        position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
+        color: black !important; /* 確保文字是黑色的 */
+}
+
+
+ .ancestor-wrapper {
+    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
+    writing-mode: horizontal-tb;
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* 水平置中 */
+    justify-content: center;
+    width: fit-content;
+}
+
+.main-name {
+    line-height: 1.2;
+    /* 保持大字 */
+}
+
+.sub-text {
+    font-size: 0.6em; /* 縮小字體 */
+    line-height: 1.2;
+    margin-top: 4px; /* 與上方林張的間距 */
+    white-space: nowrap; /* 避免自動換行 */
+    writing-mode:vertical-rl
+}
+
+</style>
             </head>
             <body>
                 ${canvasHtml}
@@ -489,7 +603,7 @@
         //            e.preventDefault();
         //            let top = parseInt(y.style.top);
         //            let left = parseInt(y.style.left);
-                    
+
         //            switch (e.key) {
         //                case 'ArrowUp': top = top - 10; break;
         //                case 'ArrowDown': top = top + 10; break;
