feat(malaysia): 창고 POG를 면별 A4 1장(Side A/B/Ground)으로 분리

전체 1장 → 면마다 한 페이지로 출력. 행을 flex 균등 분배해
칸·글자 크게(cqh 2배) 한눈에 보이게. 시트별 page-break 적용.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/modules/malaysia/templates/malaysia/rack_view.html

@@ -125,37 +125,39 @@
     align-items:center; margin-bottom:16px;
   }
   .pog-toolbar .pog-title { margin-right:auto; color:#fff; font-weight:700; font-size:16px; }
-  .pog-pages { display:flex; justify-content:center; }
-  /* A4 가로(297:210) 시트. container-type:size → 자식이 cqh/cqw 로 시트에 맞춰 축소 */
+  .pog-pages { display:flex; flex-direction:column; gap:18px; align-items:center; }
+  /* A4 가로(297:210) 시트 — 면(Side A/B/Ground)마다 1장.
+     container-type:size → 자식이 cqh/cqw 로 시트 크기에 맞춰 확대/축소 */
   .pog-sheet {
     background:#fff; width:min(100%, 1180px); aspect-ratio:297/210;
     box-shadow:0 8px 24px rgba(0,0,0,.3); border-radius:4px;
-    padding:1.6cqh 1.4cqw; box-sizing:border-box;
+    padding:2.5cqh 2cqw; box-sizing:border-box;
     display:flex; flex-direction:column; overflow:hidden;
     container-type:size;
   }
   .pog-sheet .pog-sheet-head {
     display:flex; justify-content:space-between; align-items:baseline;
-    font-weight:800; color:#0f172a; margin-bottom:1cqh; flex:0 0 auto;
+    font-weight:800; color:#0f172a; margin-bottom:2cqh; flex:0 0 auto;
   }
-  .pog-sheet .pog-sheet-head .pog-t { font-size:2.4cqh; }
-  .pog-sheet .pog-sheet-head .pog-meta { font-size:1.6cqh; color:#475569; font-weight:600; }
-  .pog-sheet .rv-board { gap:1cqh; flex:1 1 auto; min-height:0; }
-  .pog-sheet .rv-side { display:flex; flex-direction:column; min-height:0; }
-  .pog-sheet .rv-side h3 { font-size:1.7cqh; margin:0 0 0.4cqh; }
-  .pog-sheet .rv-row { gap:0.6cqw; margin-bottom:0.6cqh; }
+  .pog-sheet .pog-sheet-head .pog-t { font-size:4.2cqh; }
+  .pog-sheet .pog-sheet-head .pog-meta { font-size:2.6cqh; color:#475569; font-weight:600; }
+  /* 면 1개가 시트 높이를 꽉 채운다(행 flex 균등 분배 → 칸 커짐) */
+  .pog-sheet .rv-side { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
+  .pog-sheet .rv-side h3 { display:none; }
+  .pog-sheet .rv-row { flex:1 1 0; gap:1.4cqw; margin:0 0 1.4cqh; min-height:0; }
+  .pog-sheet .rv-row:last-child { margin-bottom:0; }
   .pog-sheet .rv-cell {
-    min-height:0; height:9.2cqh; padding:0.5cqh 0.6cqw; border-radius:3px;
-    cursor:default; overflow:hidden; background:#f8fafc;
+    height:auto; min-height:0; padding:1.2cqh 1.2cqw; border-radius:5px;
+    cursor:default; overflow:hidden; background:#f8fafc; justify-content:flex-start;
   }
   .pog-sheet .rv-cell.is-empty { background:#fff; }
   .pog-sheet .rv-cell-head {
-    font-size:1.25cqh; font-weight:700; margin-bottom:0.3cqh; padding-bottom:0.2cqh;
+    font-size:2.6cqh; font-weight:800; margin-bottom:1cqh; padding-bottom:0.6cqh;
   }
   .pog-sheet .rv-pick { display:none !important; }
-  .pog-sheet .rv-items { gap:0.3cqh; }
-  .pog-sheet .rv-item { font-size:1.25cqh; line-height:1.2; }
-  .pog-sheet .rv-empty-note { font-size:1.25cqh; }
+  .pog-sheet .rv-items { gap:0.8cqh; }
+  .pog-sheet .rv-item { font-size:2.6cqh; line-height:1.3; }
+  .pog-sheet .rv-empty-note { font-size:2.6cqh; }
 
   @media print {
     body.printing-pog .erp-sidebar, body.printing-pog .erp-topbar { display:none !important; }
@@ -166,12 +168,13 @@
     }
     body.printing-pog .pog-toolbar { display:none !important; }
     body.printing-pog .pog-pages { display:block !important; }
-    /* 한 장에 전체 도면. height:100vh → 컨테이너 높이=페이지 높이라 cqh 가 그대로 맞음 */
+    /* 면(시트)마다 한 장. height:100vh → 컨테이너=페이지라 cqh 가 그대로 맞음 */
     body.printing-pog .pog-sheet {
       width:100% !important; height:100vh !important; aspect-ratio:auto !important;
       box-shadow:none !important; border-radius:0 !important;
-      page-break-after:avoid; page-break-inside:avoid;
+      page-break-inside:avoid; break-before:page; page-break-before:always;
     }
+    body.printing-pog .pog-sheet:first-child { break-before:auto; page-break-before:auto; }
   }
 </style>
 {% endblock %}
@@ -261,5 +264,5 @@
     <div class="pog-pages" id="pog-pages"></div>
   </div>
 </section>
-<script src="/static/malaysia_rack_view.js?v=20260619a"></script>
+<script src="/static/malaysia_rack_view.js?v=20260619b"></script>
 {% endblock %}

app/static/malaysia_rack_view.js

@@ -212,34 +212,37 @@
     document.body.classList.remove("printing-cells");
   }
 
-  // ── 창고 POG (전체 도면 A4 가로 1장) 미리보기 ──
+  // ── 창고 POG: 면(Side A/B/Ground)마다 A4 가로 1장 미리보기 ──
   function openPOG() {
     var board = document.getElementById("rv-board");
     var pages = document.getElementById("pog-pages");
     if (!board || !pages) return;
 
+    var wh = board.getAttribute("data-wh") || "";
+    var st = board.getAttribute("data-stocktake") || "";
+    var metaTxt = [wh, st].filter(Boolean).join("  |  ");
+
+    pages.innerHTML = "";
+    [].slice.call(board.querySelectorAll(".rv-side")).forEach(function (side) {
       var sheet = document.createElement("div");
       sheet.className = "pog-sheet";
 
-    // 머리말: 제목 + 창고/기준 재고조사
+      // 머리말: 면 이름(Side A/B/Ground) + 창고/기준 재고조사
       var head = document.createElement("div");
       head.className = "pog-sheet-head";
       var ttl = document.createElement("span");
       ttl.className = "pog-t";
-    ttl.textContent = t("창고 POG", "Warehouse POG");
+      var h3 = side.querySelector("h3");
+      ttl.textContent = h3 ? h3.textContent.trim() : t("창고 POG", "Warehouse POG");
       var meta = document.createElement("span");
       meta.className = "pog-meta";
-    var wh = board.getAttribute("data-wh") || "";
-    var st = board.getAttribute("data-stocktake") || "";
-    meta.textContent = [wh, st].filter(Boolean).join("  |  ");
+      meta.textContent = metaTxt;
       head.appendChild(ttl);
       head.appendChild(meta);
       sheet.appendChild(head);
 
-    // 보드 통째로 복제 → 인터랙티브 요소 제거(체크박스/드래그)
-    var clone = board.cloneNode(true);
-    clone.removeAttribute("id");
-    clone.removeAttribute("style");
+      // 면 복제 → 인터랙티브 요소 제거(체크박스/드래그)
+      var clone = side.cloneNode(true);
       [].slice.call(clone.querySelectorAll(".rv-cell")).forEach(function (c) {
         c.removeAttribute("draggable");
         c.classList.remove("is-selected", "is-dragover", "dragging");
@@ -248,9 +251,9 @@
         cb.parentNode && cb.parentNode.removeChild(cb);
       });
       sheet.appendChild(clone);
-
-    pages.innerHTML = "";
       pages.appendChild(sheet);
+    });
+
     document.body.classList.add("printing-pog");
     document.getElementById("pog-overlay").classList.add("is-open");
   }