fix(cupang): 3열 프레임 높이를 그리드 행(1fr)로 고정 — ③ 목록만 스크롤

원인: .cpg-calc3 의 행 높이가 auto 라 카드가 화면 아래로 넘치도록 늘어났고,
페이지 스크롤도 없어서 아래쪽(마지막 상자, [+ 새 혼합 상자])이 잘렸다.

- grid-template-rows: minmax(0,1fr) 로 행을 컨테이너 높이에 고정
- 카드 overflow:hidden, ①표/②목록/③센터목록만 내부 스크롤
- 그동안 덧댄 !important 패치와 JS 높이 강제 지정 제거(충돌 정리)
- 2열/1열로 접히면 행이 여러 개라 카드 max-height(76vh)로 처리

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=20260901x" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901y" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -1066,29 +1066,7 @@
       syncConfirm();
     }
 
-    // ── ①②③ 스크롤 영역 높이 ────────────────────────
+    function render() { renderSummary(); renderDist(); }
-    //  세 영역 모두 화면 안에서만 스크롤한다(문서 전체는 스크롤하지 않음).
-    function fitScrollAreas() {
-      var panes = [
-        document.querySelector(".cpg-calc-card .erp-table-wrap"),
-        document.querySelector(".cpg-calc-sum .cpg-sum-scroll"),
-        distList
-      ];
-      panes.forEach(function (el) {
-        if (!el) return;
-        var top = el.getBoundingClientRect().top;
-        var avail = window.innerHeight - top - 24;
-        var h = avail > 260 ? avail : Math.round(window.innerHeight * 0.6);
-        el.style.setProperty("max-height", h + "px", "important");
-        el.style.setProperty("overflow-y", "auto", "important");
-      });
-    }
-
-    window.addEventListener("resize", fitScrollAreas);
-    var pageScroller = document.querySelector(".erp-page");
-    if (pageScroller) pageScroller.addEventListener("scroll", fitScrollAreas, { passive: true });
-
-    function render() { renderSummary(); renderDist(); fitScrollAreas(); }
 
     // ── 수량 대화상자 ─────────────────────────────────
     function openDialog(key, centerId) {

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=20260901x" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901y" />{% 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=20260901x" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901y" />{% 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=20260901x" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901y" />{% 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=20260901x" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901y" />{% 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=20260901x" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901y" />{% endblock %}
 
 {% block content %}
 {# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #}

app/static/cupang.css

@@ -1466,55 +1466,39 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
 /* 용량 초과 표시 */
 .cpg-mix-fill.is-over { color: var(--color-callout-red); font-weight: 600; }
 
-/* ── 스크롤 확실히 (부모 높이 계산 실패해도 동작하도록 이중 안전장치) ── */
+/* ══════════════════════════════════════════════════════════════
-/* 카드마다 최대 높이 → 넘치면 카드 자체가 스크롤된다 */
+   상자 계산 3열 — 프레임 높이/스크롤 (한 곳에서만 정의)
-.cpg-calc3 > .erp-card { max-height: min(82vh, 900px); }
+   · .cpg-calc3 는 남은 화면 높이를 채우고 행 높이를 1fr 로 고정한다.
-.cpg-dist-card { overflow-y: auto; overflow-x: hidden; }
+     (기본 auto 행이면 카드가 화면 밖까지 늘어나 잘려 보인다)
-/* 안쪽 목록은 스크롤바 자리를 항상 확보해 두어 눈에 보이게 */
+   · 카드는 넘치는 부분을 감추고, 안쪽 목록만 스크롤한다.
-.cpg-dist-card .cpg-dist-list,
+   ══════════════════════════════════════════════════════════════ */
+.cpg-calc3 { grid-template-rows: minmax(0, 1fr); }
+.cpg-calc3 > .erp-card { min-height: 0; overflow: hidden; }
+
+.cpg-calc-card .erp-table-wrap,
 .cpg-calc-sum .cpg-sum-scroll,
-.cpg-calc-card .erp-table-wrap {
+.cpg-dist-card .cpg-dist-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
+  overflow-x: hidden;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 }
-/* 크롬/웨일에서 오버레이 스크롤바가 숨지 않도록 폭을 지정 */
-.cpg-dist-card .cpg-dist-list::-webkit-scrollbar,
-.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar,
 .cpg-calc-card .erp-table-wrap::-webkit-scrollbar,
-.cpg-dist-card::-webkit-scrollbar { width: 10px; }
+.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar,
-.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb,
+.cpg-dist-card .cpg-dist-list::-webkit-scrollbar { width: 10px; }
-.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar-thumb,
 .cpg-calc-card .erp-table-wrap::-webkit-scrollbar-thumb,
-.cpg-dist-card::-webkit-scrollbar-thumb {
+.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar-thumb,
-  background: var(--color-subtle-ash);
+.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb {
-  border-radius: 999px;
+  background: var(--color-subtle-ash); border-radius: 999px;
 }
-.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb:hover,
+.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); }
-.cpg-dist-card::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); }
 
-/* ── 스크롤 최종 보정 — id 선택자 + !important 로 확정 ── */
+/* 3열이 2열/1열로 접히면 행이 여러 개라 1fr 고정이 통하지 않는다.
-/* ③ 센터 목록은 카드 안에서만 스크롤 */
+   그때는 카드마다 최대 높이를 준다. */
-#cpg-dist-list {
+@media (max-width: 1500px) {
-  min-height: 0 !important;
+  .cpg-calc3 { grid-template-rows: none; }
-  overflow-y: auto !important;
+  .cpg-calc3 > .erp-card { max-height: min(76vh, 820px); }
 }
-.cpg-calc-card .erp-table-wrap {
-  max-height: 52vh !important;
-  overflow-y: auto !important;
-}
-.cpg-calc-sum .cpg-sum-scroll {
-  max-height: 52vh !important;
-  overflow-y: auto !important;
-}
-.cpg-calc3 > .erp-card { max-height: 86vh !important; }
-
-/* ③ 센터 분배 — 카드는 잘라내고 목록만 스크롤 */
-.cpg-dist-card { overflow: hidden !important; }
-.cpg-dist-card .cpg-dist-list {
-  flex: 1 1 auto;
-  min-height: 0 !important;
-  overflow-y: auto !important;
-  overflow-x: hidden;
-}
-