fix(cupang): 센터 분배 드롭 동작·수량 대화상자·센터 선택

드래그가 먹지 않던 원인: 드롭 대상이 점선 상자(.cpg-dist-drop) 안쪽으로
한정돼 센터 카드 여백에 놓으면 dragover 에서 preventDefault 가 걸리지
않았다 → 드롭 대상을 센터 패널 전체로 넓혔다. 카드를 클릭해도 같은
대화상자가 열리는 대체 경로도 추가.

- ③ 은 처음에 비어 있고, 셀렉트에서 고른 센터만 패널로 추가된다(✕ 로 제거,
  제거하면 담긴 박스는 잔여로 복귀)
- 드롭/클릭 시 대화상자에서 박스 수량을 입력한다. "잔여 전부 담기" 버튼으로
  남은 수량을 한 번에 담을 수 있고, Enter 로 확정 / Esc 로 취소
- 센터에 담긴 줄과 센터 합계에 박스 수와 상품 수(박스×입수량)를 함께 표시
- 요약 카드에도 잔여 개수(잔여 박스 × 입수량)를 표시

tests/js: jsdom 으로 계산→드래그→대화상자→수량 수정→제거까지 36개 항목을
검증하는 UI 테스트 추가(README 에 실행법). 전체 통과 확인.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

app/static/cupang.css

@@ -625,19 +625,25 @@
   margin-bottom: 8px;
   font-size: 14px;
 }
-.cpg-dist-drop {
-  border: 1.5px dashed var(--color-subtle-ash);
-  border-radius: 8px;
-  padding: 8px;
-  min-height: 52px;
-  transition: background .15s ease, border-color .15s ease;
-}
-.cpg-dist-drop.is-over {
+/* 드롭 대상은 센터 패널 전체 */
+.cpg-dist-center { transition: background .15s ease, border-color .15s ease; }
+.cpg-dist-center.is-over {
   border-color: var(--color-rich-black);
   background: var(--color-ghost-gray);
 }
-.cpg-dist-hint { font-size: 12px; color: var(--color-midtone-gray); }
-.cpg-dist-center.has-items .cpg-dist-hint { display: none; }
+.cpg-dist-hint {
+  margin: 0;
+  padding: 10px 8px;
+  border: 1.5px dashed var(--color-subtle-ash);
+  border-radius: 8px;
+  font-size: 12px;
+  color: var(--color-midtone-gray);
+  text-align: center;
+}
+.cpg-dist-sum { display: inline-flex; align-items: center; gap: 6px; }
+.cpg-dist-close { padding: 0 6px; line-height: 1.5; }
+.cpg-center-pick { display: flex; gap: 8px; 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-item {
   display: flex;
@@ -649,3 +655,23 @@
 .cpg-dist-qty { width: 62px; min-width: 0; text-align: right; padding: 2px 6px; }
 .cpg-dist-unit { font-size: 12px; color: var(--color-midtone-gray); }
 .cpg-dist-del { padding: 2px 8px; line-height: 1.4; }
+
+/* 박스 수량 입력 대화상자 */
+.cpg-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
+.cpg-modal[hidden] { display: none; }
+.cpg-modal-back { position: absolute; inset: 0; background: rgba(10, 10, 10, .45); }
+.cpg-modal-box {
+  position: relative;
+  width: min(420px, calc(100vw - 32px));
+  background: var(--color-canvas-white);
+  border-radius: 12px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.cpg-modal-box h3 { margin: 0; font-size: 17px; }
+.cpg-dlg-item { margin: 0; font-weight: 600; }
+.cpg-dlg-actions { margin: 4px 0 0; flex-wrap: wrap; }
+.cpg-modal-box .erp-input, .cpg-modal-box .erp-select { width: 100%; min-width: 0; }