fix(cupang): 스크롤 영역 높이를 rAF 후 JS 로 지정 + 진단 로그

CSS flex 체인만으로 잡히지 않는 환경 대비. render() 이후 다음 프레임에
각 영역의 화면 위치를 재서 max-height 를 !important 로 지정한다.
window.CPG_DEBUG = true 후 window.cpgFit() 으로 계산값 확인 가능.

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=20260901y" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901z" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -1066,7 +1066,42 @@
       syncConfirm();
     }
 
-    function render() { renderSummary(); renderDist(); }
+    // ── 스크롤 영역 높이 (CSS 만으로 안 잡히는 경우 대비) ──
+    //  각 영역의 화면상 위치를 재서 "창 아래까지" 높이를 직접 준다.
+    //  window.CPG_DEBUG = true 로 두면 계산값을 콘솔에 찍는다.
+    function fitScrollAreas() {
+      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")],
+        ["#cpg-dist-list", distList]
+      ];
+      panes.forEach(function (pair) {
+        var el = pair[1];
+        if (!el) return;
+        var top = el.getBoundingClientRect().top;
+        var avail = Math.floor(window.innerHeight - top - 16);
+        var h = avail > 200 ? avail : Math.round(window.innerHeight * 0.6);
+        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,
+                      "set=", h, "client=", el.clientHeight, "scroll=", el.scrollHeight);
+        }
+      });
+    }
+
+    window.addEventListener("resize", fitScrollAreas);
+    window.cpgFit = fitScrollAreas;   // 콘솔에서 수동 확인용
+
+    function render() {
+      renderSummary();
+      renderDist();
+      // 레이아웃이 확정된 다음 프레임에 높이를 잡는다
+      if (window.requestAnimationFrame) { window.requestAnimationFrame(fitScrollAreas); }
+      else { 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=20260901y" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901z" />{% 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=20260901y" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901z" />{% 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=20260901y" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901z" />{% 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=20260901y" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901z" />{% 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=20260901y" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260901z" />{% endblock %}
 
 {% block content %}
 {# 출고 묶음 보기 — 상자 계산 화면과 같은 3열 구성. 읽기 전용(수정 없음). #}