style(cupang): 센터 분배 헤더/목록 구분, 박스 수량 입력란 축소

센터 이름과 담긴 품목이 같은 평면에 있어 경계가 흐렸다. 헤더를 바로 만들어
분리하고(담긴 센터는 검정 바 + 흰 배지) 품목은 패널 안쪽에서 구분선으로
나눈다.

박스 수량은 세 자리를 넘지 않으므로 입력란을 62px → 46px 로 줄이고,
자리만 차지하던 number 스피너를 숨겼다. 고정폭 글꼴로 자릿수 정렬,
max=999·inputmode=numeric 추가.

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=20260831d" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260831e" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -446,7 +446,7 @@
           items += '<li class="cpg-dist-item" data-entry="' + a.id + '">' +
                      '<div class="cpg-dist-line">' +
                        '<span class="cpg-dist-name">' + esc(labels[a.key] || a.key) + "</span>" +
-                       '<input class="erp-input cpg-dist-qty" type="number" min="1" step="1" value="' + a.count + '" />' +
+                       '<input class="erp-input cpg-dist-qty" type="number" min="1" max="999" step="1" inputmode="numeric" value="' + a.count + '" />' +
                        '<span class="cpg-dist-unit">박스 · ' + (a.count * per) + "개</span>" +
                        '<button type="button" class="erp-btn erp-btn-danger cpg-dist-del" title="빼기" aria-label="빼기">✕</button>' +
                      "</div>" +

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

app/static/cupang.css

@@ -705,16 +705,44 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
 .cpg-dist-center {
   border: 1px solid var(--color-subtle-ash);
   border-radius: 10px;
-  padding: 10px 12px;
+  overflow: hidden;
+  background: var(--color-canvas-white);
 }
 .cpg-dist-center.has-items { border-color: var(--color-rich-black); }
+
+/* 센터 헤더 = 회색 바, 아래 목록과 확실히 분리 */
 .cpg-dist-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  margin-bottom: 8px;
+  padding: 7px 10px;
-  font-size: 14px;
+  background: var(--color-ghost-gray);
+  border-bottom: 1px solid var(--color-subtle-ash);
+  font-size: 13px;
+}
+.cpg-dist-head > strong {
+  flex: 1 1 auto; min-width: 0;
+  font-size: 13px; font-weight: 700; letter-spacing: .02em;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.cpg-dist-center.has-items .cpg-dist-head {
+  background: var(--color-rich-black);
+  border-bottom-color: var(--color-rich-black);
+  color: var(--color-canvas-white);
+}
+.cpg-dist-center.has-items .cpg-dist-head .erp-badge {
+  background: rgba(255, 255, 255, .14);
+  border-color: rgba(255, 255, 255, .28);
+  color: var(--color-canvas-white);
+}
+.cpg-dist-center.has-items .cpg-dist-close {
+  border-color: rgba(255, 255, 255, .35);
+  color: var(--color-canvas-white);
+  background: transparent;
+}
+.cpg-dist-center.has-items .cpg-dist-close:hover {
+  background: rgba(255, 255, 255, .16);
 }
 /* 드롭 대상은 센터 패널 전체 */
 .cpg-dist-center { transition: background .15s ease, border-color .15s ease; }
@@ -723,7 +751,7 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
   background: var(--color-ghost-gray);
 }
 .cpg-dist-hint {
-  margin: 0;
+  margin: 10px;
   padding: 10px 8px;
   border: 1.5px dashed var(--color-subtle-ash);
   border-radius: 8px;
@@ -735,15 +763,25 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
 .cpg-dist-close { padding: 0 6px; line-height: 1.5; }
 .cpg-center-pick { margin-bottom: 10px; }
 .cpg-center-pick .erp-select { flex: 1 1 auto; min-width: 0; }
-.cpg-dist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.cpg-dist-items { list-style: none; margin: 0; padding: 4px 10px 6px; display: flex; flex-direction: column; }
 .cpg-dist-item {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
+  padding: 5px 0;
 }
+.cpg-dist-item + .cpg-dist-item { border-top: 1px solid var(--color-ghost-gray); }
 .cpg-dist-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.cpg-dist-qty { width: 62px; min-width: 0; text-align: right; padding: 2px 6px; }
+/* 박스 수량: 최대 세 자리 → 좁게. 스피너는 자리만 차지해 숨긴다. */
+.cpg-dist-qty {
+  width: 46px; min-width: 0; flex: 0 0 auto;
+  text-align: center; padding: 2px 4px;
+  font-family: var(--font-geist-mono);
+  -moz-appearance: textfield;
+}
+.cpg-dist-qty::-webkit-outer-spin-button,
+.cpg-dist-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 .cpg-dist-unit { font-size: 12px; color: var(--color-midtone-gray); }
 .cpg-dist-del { padding: 2px 8px; line-height: 1.4; }