From 127f396366d33f6337a49468775f07a6c5e733c1 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Fri, 28 Aug 2026 12:31:33 +0900
Subject: [PATCH] =?UTF-8?q?fix(cupang):=20=EB=B0=95=EC=8A=A4=20=EA=B3=84?=
 =?UTF-8?q?=EC=82=B0=20=ED=99=94=EB=A9=B4=202=EC=97=B4=20=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98=C2=B7=ED=91=9C=20=EC=9E=98=EB=A6=BC=20=EB=B0=A9?=
 =?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

입력표와 요약을 좌우 2열 그리드로 배치(1280px 이하는 세로 쌓기).
입력표는 자체 스크롤(max-height + sticky thead)로 행이 늘어도 카드가
잘리지 않게 하고, 요약 그리드 최소 폭을 줄여 좁은 열에서도 카드가
한 줄에 맞게 조정.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../cupang/templates/cupang/box_calc.html     |  6 +++-
 .../cupang/templates/cupang/box_rules.html    |  2 +-
 .../cupang/templates/cupang/centers.html      |  2 +-
 .../cupang/templates/cupang/detail.html       |  2 +-
 app/modules/cupang/templates/cupang/form.html |  2 +-
 .../cupang/templates/cupang/index.html        |  2 +-
 .../cupang/templates/cupang/products.html     |  2 +-
 app/static/cupang.css                         | 31 +++++++++++++++++--
 8 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/app/modules/cupang/templates/cupang/box_calc.html b/app/modules/cupang/templates/cupang/box_calc.html
index 0abaad1..2eca0a5 100644
--- a/app/modules/cupang/templates/cupang/box_calc.html
+++ b/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=20260828t" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -19,6 +19,8 @@
   </div>
   {% else %}
 
+  <div class="cpg-calc-layout">
+
   <div class="erp-card cpg-form-card cpg-calc-card">
     <div class="cpg-card-head">
       <h2>박스 계산</h2>
@@ -66,6 +68,8 @@
     <div class="cpg-sum-boxes" id="cpg-sum-boxes"></div>
   </div>
 
+  </div><!-- /cpg-calc-layout -->
+
   <script type="application/json" id="cpg-calc-rules">{{ box_rules | tojson }}</script>
   <script>
   // 박스 계산기 — 행 추가/삭제, 수량 수정 후 재계산.
diff --git a/app/modules/cupang/templates/cupang/box_rules.html b/app/modules/cupang/templates/cupang/box_rules.html
index b6769db..6f5c78a 100644
--- a/app/modules/cupang/templates/cupang/box_rules.html
+++ b/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=20260828t" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/centers.html b/app/modules/cupang/templates/cupang/centers.html
index 3e9cca3..3f8d552 100644
--- a/app/modules/cupang/templates/cupang/centers.html
+++ b/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=20260828t" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/detail.html b/app/modules/cupang/templates/cupang/detail.html
index 3aead7a..74f3a88 100644
--- a/app/modules/cupang/templates/cupang/detail.html
+++ b/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=20260828t" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/form.html b/app/modules/cupang/templates/cupang/form.html
index e258325..77b3d32 100644
--- a/app/modules/cupang/templates/cupang/form.html
+++ b/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=20260828t" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/index.html b/app/modules/cupang/templates/cupang/index.html
index 1ef8ad3..2198f10 100644
--- a/app/modules/cupang/templates/cupang/index.html
+++ b/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=20260828t" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/modules/cupang/templates/cupang/products.html b/app/modules/cupang/templates/cupang/products.html
index f36f2a2..92e8fb7 100644
--- a/app/modules/cupang/templates/cupang/products.html
+++ b/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=20260828t" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828u" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
diff --git a/app/static/cupang.css b/app/static/cupang.css
index f64eb3a..f8325c3 100644
--- a/app/static/cupang.css
+++ b/app/static/cupang.css
@@ -346,7 +346,7 @@
 
 .cpg-sum-kpis {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 10px;
 }
 .cpg-kpi {
@@ -364,7 +364,7 @@
 
 .cpg-sum-prods {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   gap: 8px;
 }
 .cpg-sum-prod {
@@ -394,7 +394,7 @@
 /* 혼합 박스 카드 */
 .cpg-sum-boxes {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 12px;
 }
 .cpg-box-card {
@@ -489,3 +489,28 @@
   }
   .cpg-box-fill { opacity: .16; }
 }
+
+/* 박스 계산 2열 레이아웃 — 왼쪽 입력표 / 오른쪽 요약. 좁으면 세로로 쌓임. */
+.cpg-calc-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+.cpg-calc-layout > .erp-card { margin-bottom: 0; }
+@media (max-width: 1280px) {
+  .cpg-calc-layout { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* 행이 많아도 카드가 잘리지 않도록 표 자체를 스크롤시킨다. */
+.cpg-calc-card .erp-table-wrap {
+  overflow: auto;
+  max-height: min(58vh, 560px);
+}
+.cpg-calc-card .cpg-calc-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--color-canvas-white);
+}
+.cpg-calc-actions { flex-wrap: wrap; }