fix(cupang): 좁은 화면에서는 카드가 늘고 페이지가 스크롤되게 분기

진단 결과 1열로 접힌 상태에서 .cpg-calc3 가 704px 를 세 카드가 나눠
가져(224px씩) 내용이 잘렸고, JS 가 준 높이(561px)는 카드보다 커서
무용지물이었다.

- 1501px 이상: 카드 안쪽만 스크롤. 높이는 "카드 아래끝 − 영역 top" 으로 계산
- 1500px 이하: 카드/영역 높이 제한 해제, .cpg 를 flex:0 0 auto 로 두어
  내용만큼 늘고 페이지(.erp-page)가 스크롤

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=20260901z" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260902a" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -1066,10 +1066,13 @@
       syncConfirm();
     }
 
-    // ── 스크롤 영역 높이 (CSS 만으로 안 잡히는 경우 대비) ──
-    //  각 영역의 화면상 위치를 재서 "창 아래까지" 높이를 직접 준다.
-    //  window.CPG_DEBUG = true 로 두면 계산값을 콘솔에 찍는다.
+    // ── 스크롤 영역 높이 ──────────────────────────────
+    //  넓은 화면(3열): 카드 안쪽에서만 스크롤 → 카드 아래끝까지를 높이로 준다.
+    //  좁은 화면(2열/1열): 카드가 세로로 쌓이므로 높이를 풀고 페이지가 스크롤.
+    var FRAME_MIN_WIDTH = 1501;
+
     function fitScrollAreas() {
+      var wide = window.innerWidth >= FRAME_MIN_WIDTH;
       var panes = [
         [".cpg-calc-card .erp-table-wrap", document.querySelector(".cpg-calc-card .erp-table-wrap")],
         [".cpg-sum-scroll", document.querySelector(".cpg-calc-sum .cpg-sum-scroll")],
@@ -1078,15 +1081,22 @@
       panes.forEach(function (pair) {
         var el = pair[1];
         if (!el) return;
+        if (!wide) {                      // 좁은 화면: 제한 해제(페이지가 스크롤)
+          el.style.removeProperty("max-height");
+          el.style.removeProperty("overflow-y");
+          el.removeAttribute("data-fit");
+          return;
+        }
+        var card = el.closest(".erp-card");
         var top = el.getBoundingClientRect().top;
-        var avail = Math.floor(window.innerHeight - top - 16);
-        var h = avail > 200 ? avail : Math.round(window.innerHeight * 0.6);
+        var bottom = card ? card.getBoundingClientRect().bottom - 16 : window.innerHeight - 16;
+        var h = Math.max(160, Math.floor(Math.min(bottom, window.innerHeight - 16) - top));
         el.style.setProperty("max-height", h + "px", "important");
         el.style.setProperty("overflow-y", "auto", "important");
         el.style.setProperty("min-height", "0", "important");
         el.setAttribute("data-fit", h);
         if (window.CPG_DEBUG) {
-          console.log("[cpg fit]", pair[0], "top=", Math.round(top), "avail=", avail,
+          console.log("[cpg fit]", pair[0], "top=", Math.round(top), "cardBottom=", Math.round(bottom),
                       "set=", h, "client=", el.clientHeight, "scroll=", el.scrollHeight);
         }
       });

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=20260901z" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260902a" />{% 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=20260901z" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260902a" />{% 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=20260901z" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260902a" />{% 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=20260901z" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260902a" />{% endblock %}
 
 {% block content %}
 <section class="cpg">

app/modules/cupang/templates/cupang/view.html

@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901z" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260902a" />{% endblock %}
 
 {% block content %}
 {# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #}

app/static/cupang.css

@@ -1496,9 +1496,19 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
 }
 .cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); }
 
-/* 3열이 2열/1열로 접히면 행이 여러 개라 1fr 고정이 통하지 않는다.
-   그때는 카드마다 최대 높이를 준다. */
+/* 3열이 2열/1열로 접히면 카드가 세로로 쌓여 화면 높이를 나눠 갖게 된다.
+   그때는 높이 제한을 풀고 내용만큼 늘어나게 두어 페이지가 스크롤되게 한다. */
 @media (max-width: 1500px) {
-  .cpg-calc3 { grid-template-rows: none; }
-  .cpg-calc3 > .erp-card { max-height: min(76vh, 820px); }
+  .erp-page > .cpg { flex: 0 0 auto; min-height: auto; }
+  .cpg-calc3 {
+    grid-template-rows: none;
+    flex: 0 0 auto;
+  }
+  .cpg-calc3 > .erp-card { max-height: none; overflow: visible; }
+  .cpg-calc-card .erp-table-wrap,
+  .cpg-calc-sum .cpg-sum-scroll,
+  .cpg-dist-card .cpg-dist-list {
+    max-height: none;
+    overflow: visible;
+  }
 }