From 4c7eb9467f83b755fa6356da521e8403dd8a52a9 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Sun, 14 Jun 2026 16:41:41 +0900
Subject: [PATCH] =?UTF-8?q?style(malaysia):=20=EB=9E=99=20=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=84=B8=EB=A1=9C=20=EC=A0=81=EC=B8=B5=20+=20?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EC=A0=95=EB=B3=B4=EB=B0=94=20=ED=95=9C=20?=
 =?UTF-8?q?=EC=A4=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Side A/B 를 세로로 적층(각 면 풀폭) → 칸·입력란 넓게, 한 화면 활용
- 상단 정보(날짜/창고/상태/안내/저장)를 mys-info-bar 로 한 줄 고정
  (erp-card 중앙정렬에 먹혀 세로로 쌓이던 문제 해결)
- 칸 넓어진 만큼 입력란 폭·폰트 확대

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../templates/malaysia/stocktake_detail.html  | 53 ++++++++++++-------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/app/modules/malaysia/templates/malaysia/stocktake_detail.html b/app/modules/malaysia/templates/malaysia/stocktake_detail.html
index 9bf222a..be9e61b 100644
--- a/app/modules/malaysia/templates/malaysia/stocktake_detail.html
+++ b/app/modules/malaysia/templates/malaysia/stocktake_detail.html
@@ -23,30 +23,43 @@
 <style>
   .mys-compact .erp-table th,
   .mys-compact .erp-table td { padding-top:4px; padding-bottom:4px; }
-  /* 랙 보드 — 두 면을 한 화면에 나란히 */
-  .rack-board { display:flex; gap:16px; flex-wrap:wrap; }
-  .rack-side { flex:1 1 460px; min-width:0; }
+  /* 상단 정보 바 — 한 줄 */
+  .mys-info-bar {
+    display:flex; align-items:center; gap:16px; flex-wrap:nowrap;
+    border:1px solid #e2e8f0; border-radius:10px; background:#fff; padding:10px 14px;
+  }
+  .mys-info-bar h2 { margin:0; white-space:nowrap; }
+  .mys-info-bar > div { white-space:nowrap; }
+  .mys-info-bar .mys-hint {
+    flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
+    white-space:nowrap; font-size:12px;
+  }
+  .mys-info-bar > button { flex:0 0 auto; }
+
+  /* 랙 보드 — 두 면을 세로로 적층(각 면 풀폭 → 칸 넓게) */
+  .rack-board { display:flex; flex-direction:column; gap:18px; }
+  .rack-side { width:100%; }
   .rack-side h3 { text-align:center; margin:0 0 8px; }
-  .rack-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; margin-bottom:5px; }
+  .rack-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin-bottom:6px; }
   .rack-cell {
-    border:1px solid #cbd5e1; border-radius:6px; padding:3px;
-    background:#f8fafc; min-height:78px; display:flex; flex-direction:column; min-width:0;
+    border:1px solid #cbd5e1; border-radius:6px; padding:4px;
+    background:#f8fafc; min-height:70px; display:flex; flex-direction:column; min-width:0;
   }
   .rack-cell-head {
-    display:flex; align-items:center; gap:3px; justify-content:space-between;
-    font-size:10px; font-weight:600; color:#475569; margin-bottom:3px;
+    display:flex; align-items:center; gap:4px; justify-content:space-between;
+    font-size:11px; font-weight:600; color:#475569; margin-bottom:4px;
   }
   .rack-cell-head .rk-cell-total { color:#0f172a; white-space:nowrap; }
   .rack-cell-head .rk-add {
     border:1px solid #94a3b8; background:#fff; border-radius:4px;
-    width:18px; height:18px; line-height:1; padding:0; cursor:pointer; font-weight:700; flex:0 0 auto;
+    width:20px; height:20px; line-height:1; padding:0; cursor:pointer; font-weight:700; flex:0 0 auto;
   }
-  .rk-rows { display:flex; flex-direction:column; gap:3px; }
-  .rk-row { display:grid; grid-template-columns: minmax(0,1fr) 34px 7px 30px 26px 14px; gap:2px; align-items:center; }
-  .rk-row .rk-sku { font-size:10px; padding:1px 2px; min-width:0; }
-  .rk-row .rk-upb, .rk-row .rk-box { font-size:10px; padding:1px 2px; text-align:right; min-width:0; }
-  .rk-row .rk-x { font-size:10px; color:#94a3b8; text-align:center; }
-  .rk-row .rk-sub { font-size:10px; text-align:right; color:#2563eb; font-weight:600; }
+  .rk-rows { display:flex; flex-direction:column; gap:4px; }
+  .rk-row { display:grid; grid-template-columns: minmax(0,1fr) 52px 8px 44px 38px 16px; gap:4px; align-items:center; }
+  .rk-row .rk-sku { font-size:12px; padding:2px 4px; min-width:0; }
+  .rk-row .rk-upb, .rk-row .rk-box { font-size:12px; padding:2px 4px; text-align:right; min-width:0; }
+  .rk-row .rk-x { font-size:11px; color:#94a3b8; text-align:center; }
+  .rk-row .rk-sub { font-size:12px; text-align:right; color:#2563eb; font-weight:600; }
   .rk-row .rk-del {
     border:none; background:transparent; color:#dc2626; cursor:pointer;
     font-size:13px; line-height:1; padding:0;
@@ -62,9 +75,9 @@
   </div>
 
   <form method="post" action="/malaysia/stocktakes/{{ stocktake.id }}/rack/bulk">
-    <!-- 상단 정보 스트립 -->
-    <div class="erp-card" style="display:flex;align-items:center;gap:18px;flex-wrap:wrap;">
-      <h2 style="margin:0;"><span class="i18n">재고조사</span> #{{ stocktake.id }}</h2>
+    <!-- 상단 정보 스트립 (한 줄) -->
+    <div class="mys-info-bar">
+      <h2><span class="i18n">재고조사</span> #{{ stocktake.id }}</h2>
       <div><span class="erp-muted">날짜</span> {{ stocktake.stocktake_date }}</div>
       <div><span class="erp-muted">창고</span> {{ stocktake.warehouse_code }}</div>
       <div><span class="erp-muted">상태</span>
@@ -73,8 +86,8 @@
         {% else %}<span class="erp-badge erp-badge-inverse">작성중</span>{% endif %}
       </div>
       {% if stocktake.finalized_at %}<div><span class="erp-muted">확정시각</span> {{ stocktake.finalized_at }}</div>{% endif %}
-      {% if missing_bom %}<span style="color:#b91c1c;font-weight:600;">⚠ BOM 없는 콤보: {{ missing_bom|join(', ') }}</span>{% endif %}
-      <span class="erp-muted i18n" style="flex:1 1 220px;font-size:12px;">랙 칸에 아이템·입수량(박스당 개수)·박스 수를 입력하면 낱개/콤보 수량이 자동 집계됩니다. 한 칸에 여러 아이템은 + 로 추가하세요.</span>
+      {% if missing_bom %}<span style="color:#b91c1c;font-weight:600;white-space:nowrap;">⚠ BOM 누락: {{ missing_bom|join(', ') }}</span>{% endif %}
+      <span class="erp-muted i18n mys-hint">랙 칸에 아이템·입수량(박스당 개수)·박스 수를 입력하면 낱개/콤보 수량이 자동 집계됩니다. 한 칸에 여러 아이템은 + 로 추가하세요.</span>
       {% if is_draft %}<button type="submit" class="erp-btn erp-btn-primary">입력 저장</button>{% endif %}
     </div>