fix(cupang): 박스 계산표 가로 스크롤 제거·좌우 카드 높이 정렬

.erp-input 의 min-width:240px 때문에 수량 칸이 넓어져 표가 가로로
넘쳤다. 계산표를 table-layout:fixed + colgroup 고정폭으로 바꾸고
수량/선택 입력의 min-width 를 해제, 셀 여백을 8px 6px 로 축소.

박스명·입수량 열을 "박스 / 입수량" 한 열로 합치고(쿠팡 2호 · 8개),
헤더를 박스/낱개/필요 로 줄이고 삭제 버튼을 ✕ 아이콘으로 바꿔 열 수를
8 → 7 로 줄였다.

2열 그리드를 align-items:stretch 로 두고 카드를 flex column 으로 만들어
좌우 카드 높이를 맞춘다.

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

app/modules/cupang/templates/cupang/box_calc.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828v" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -29,16 +29,24 @@
 
     <div class="erp-table-wrap">
       <table class="erp-table cpg-calc-table">
+        <colgroup>
+          <col />
+          <col class="cpg-col-qty" />
+          <col class="cpg-col-box" />
+          <col class="cpg-col-n" />
+          <col class="cpg-col-n" />
+          <col class="cpg-col-n" />
+          <col class="cpg-col-act" />
+        </colgroup>
         <thead>
           <tr>
             <th>제품명</th>
             <th class="cpg-calc-num">수량</th>
-            <th>박스명</th>
+            <th>박스 / 입수량</th>
-            <th class="cpg-calc-num">입수량</th>
+            <th class="cpg-calc-num">박스</th>
-            <th class="cpg-calc-num">박스 수</th>
+            <th class="cpg-calc-num">낱개</th>
-            <th class="cpg-calc-num">남은 낱개</th>
+            <th class="cpg-calc-num">필요</th>
-            <th class="cpg-calc-num">총 필요 박스</th>
+            <th></th>
-            <th>동작</th>
           </tr>
         </thead>
         <tbody id="cpg-calc-rows"></tbody>
@@ -106,11 +114,10 @@
         '<td><select class="erp-select cpg-calc-name">' + optionsHtml + "</select></td>" +
         '<td class="cpg-calc-num"><input class="erp-input cpg-calc-qty" type="number" min="0" step="1" value="' + (qty || 0) + '" /></td>' +
         '<td class="cpg-calc-box">—</td>' +
-        '<td class="cpg-calc-num cpg-calc-upb">—</td>' +
         '<td class="cpg-calc-num cpg-calc-boxes">—</td>' +
         '<td class="cpg-calc-num cpg-calc-rem">—</td>' +
         '<td class="cpg-calc-num cpg-calc-req">—</td>' +
-        '<td><button type="button" class="erp-btn erp-btn-danger cpg-calc-del">삭제</button></td>';
+        '<td class="cpg-calc-act"><button type="button" class="erp-btn erp-btn-danger cpg-calc-del" title="행 삭제" aria-label="행 삭제">✕</button></td>';
       tbody.appendChild(tr);
       if (code) tr.querySelector(".cpg-calc-name").value = code;
       return tr;
@@ -119,7 +126,6 @@
     function clearResults() {
       Array.prototype.forEach.call(tbody.querySelectorAll(".cpg-calc-row"), function (tr) {
         tr.querySelector(".cpg-calc-box").textContent = "—";
-        tr.querySelector(".cpg-calc-upb").textContent = "—";
         tr.querySelector(".cpg-calc-boxes").textContent = "—";
         tr.querySelector(".cpg-calc-rem").textContent = "—";
         tr.querySelector(".cpg-calc-req").textContent = "—";
@@ -158,12 +164,13 @@
           results.forEach(function (res, i) {
             var tr = items[i] && items[i]._tr;
             if (!tr) return;
-            tr.querySelector(".cpg-calc-box").textContent = res.box_name || "—";
+            tr.querySelector(".cpg-calc-box").textContent = res.units_per_box
-            tr.querySelector(".cpg-calc-upb").textContent = res.units_per_box ? res.units_per_box + "개" : "미설정";
+              ? (res.box_name || "-") + " · " + res.units_per_box + "개"
+              : "미설정";
             if (res.configured) {
-              tr.querySelector(".cpg-calc-boxes").textContent = res.full_boxes + "박스";
+              tr.querySelector(".cpg-calc-boxes").textContent = res.full_boxes;
-              tr.querySelector(".cpg-calc-rem").textContent = res.remainder_units + "개";
+              tr.querySelector(".cpg-calc-rem").textContent = res.remainder_units;
-              tr.querySelector(".cpg-calc-req").textContent = res.required_boxes + "박스";
+              tr.querySelector(".cpg-calc-req").textContent = res.required_boxes;
               tr.classList.remove("cpg-calc-warn");
             } else {
               tr.querySelector(".cpg-calc-boxes").textContent = "—";

app/modules/cupang/templates/cupang/box_rules.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828v" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/centers.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828v" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/detail.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828v" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/form.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828v" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/index.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828v" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/products.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828v" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/static/cupang.css

@@ -327,11 +327,20 @@
 .cpg-sort.is-asc .cpg-sort-ind::after  { content: "▲"; opacity: 1; }
 .cpg-sort.is-desc .cpg-sort-ind::after { content: "▼"; opacity: 1; }
 
-/* 박스 계산기 */
+/* 박스 계산기 — 가로 스크롤이 생기지 않게 열 폭·여백을 좁게 잡는다. */
+.cpg-calc-table { table-layout: fixed; width: 100%; }
+.cpg-calc-table th, .cpg-calc-table td { padding: 8px 6px; }
 .cpg-calc-table .cpg-calc-num { text-align: right; white-space: nowrap; }
 .cpg-calc-table th.cpg-calc-num { text-align: right; }
-.cpg-calc-table .cpg-calc-name { min-width: 240px; }
+.cpg-calc-table .cpg-calc-name { width: 100%; min-width: 0; }
-.cpg-calc-table .cpg-calc-qty { width: 96px; text-align: right; }
+.cpg-calc-table .cpg-calc-qty { width: 100%; min-width: 0; text-align: right; padding-left: 6px; padding-right: 6px; }
+.cpg-calc-table .cpg-calc-box { white-space: nowrap; font-size: 13px; }
+.cpg-calc-table .cpg-calc-act { text-align: center; }
+.cpg-calc-table .cpg-calc-del { padding: 2px 8px; line-height: 1.4; }
+.cpg-calc-table col.cpg-col-qty { width: 76px; }
+.cpg-calc-table col.cpg-col-box { width: 108px; }
+.cpg-calc-table col.cpg-col-n   { width: 54px; }
+.cpg-calc-table col.cpg-col-act { width: 40px; }
 .cpg-calc-row.cpg-calc-warn { background: color-mix(in srgb, var(--color-callout-red) 8%, transparent); }
 .cpg-calc-actions { margin-top: 12px; gap: 8px; align-items: center; }
 .cpg-calc-sum { margin-top: 16px; }
@@ -514,3 +523,9 @@
   background: var(--color-canvas-white);
 }
 .cpg-calc-actions { flex-wrap: wrap; }
+
+/* 1열/2열 카드 높이를 맞춘다(요약이 비어 있을 때는 왼쪽만 표시). */
+.cpg-calc-layout { align-items: stretch; }
+.cpg-calc-layout > .erp-card { display: flex; flex-direction: column; }
+.cpg-calc-card .erp-table-wrap { flex: 1 1 auto; }
+.cpg-calc-sum { overflow: auto; max-height: min(78vh, 900px); }