feat(cupang): 센터 즉시 추가·대화상자 센터 버튼 선택

- ③ 센터 분배: 목록에서 센터를 고르는 즉시 추가된다. "+ 센터 추가" 버튼
  제거. 고른 뒤 선택값을 비워 같은 센터를 다시 고를 수 있게 한다.
- 담기 대화상자: 센터 select 를 추가된 센터 버튼 목록으로 바꿔 한 번에
  대상을 고른다(현재 대상은 검은 버튼 + aria-pressed).

tests/js: 센터 추가를 change 이벤트로, 대화상자 센터 버튼 표시·전환·
선택한 센터로 담기는지까지 검증. 전체 통과.

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=20260829g" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260829h" />{% endblock %}
 
 {% block content %}
 <section class="cpg">
@@ -87,13 +87,13 @@
         등록된 입고센터가 없습니다. <a href="/cupang/centers">입고센터 관리</a>에서 먼저 센터를 추가하세요.
       </p>
       {% else %}
-      <div class="cpg-inline-form cpg-center-pick">
-        <select class="erp-select" id="cpg-center-pick">
+      <div class="cpg-center-pick">
+        <select class="erp-select" id="cpg-center-pick" aria-label="센터 추가">
+          <option value="">— 센터를 고르면 바로 추가 —</option>
           {% for c in centers %}
           <option value="{{ c.id }}">{{ c.name }}</option>
           {% endfor %}
         </select>
-        <button type="button" class="erp-btn erp-btn-primary" id="cpg-center-add">+ 센터 추가</button>
       </div>
       <div class="cpg-dist-list" id="cpg-dist-list"></div>
       <p class="erp-muted" id="cpg-dist-empty">추가한 센터가 여기에 표시됩니다.</p>
@@ -108,8 +108,8 @@
     <div class="cpg-modal-box" role="dialog" aria-modal="true" aria-labelledby="cpg-dlg-title">
       <h3 id="cpg-dlg-title">센터에 담기</h3>
       <p class="cpg-dlg-item" id="cpg-dlg-item"></p>
-      <label class="erp-field"><span>센터</span>
-        <select class="erp-select" id="cpg-dlg-center"></select></label>
+      <div class="erp-field"><span>센터</span>
+        <div class="cpg-dlg-centers" id="cpg-dlg-centers" role="group" aria-label="담을 센터"></div></div>
       <label class="erp-field"><span>박스 수량</span>
         <input class="erp-input" type="number" id="cpg-dlg-qty" min="1" step="1" /></label>
       <p class="erp-muted" id="cpg-dlg-hint"></p>
@@ -146,10 +146,10 @@
     var distCard = document.querySelector(".cpg-dist-card");
     var distEmpty = document.getElementById("cpg-dist-empty");
     var centerPick = document.getElementById("cpg-center-pick");
-    var centerAdd = document.getElementById("cpg-center-add");
     var dlg = document.getElementById("cpg-dlg");
     var dlgItem = document.getElementById("cpg-dlg-item");
-    var dlgCenter = document.getElementById("cpg-dlg-center");
+    var dlgCenters = document.getElementById("cpg-dlg-centers");
+    var dlgCenterId = null;   // 대화상자에서 고른 센터
     var dlgQty = document.getElementById("cpg-dlg-qty");
     var dlgHint = document.getElementById("cpg-dlg-hint");
     var dlgOk = document.getElementById("cpg-dlg-ok");
@@ -435,10 +435,8 @@
 
       pending = { key: key };
       dlgItem.textContent = (labels[key] || key) + " — 잔여 " + remain + "박스 (" + (remain * (units[key] || 0)) + "개)";
-      dlgCenter.innerHTML = openCenters.map(function (cid) {
-        return '<option value="' + esc(cid) + '"' + (String(cid) === String(centerId) ? " selected" : "") + ">" +
-               esc(centerName(cid)) + "</option>";
-      }).join("");
+      dlgCenterId = String(centerId != null ? centerId : openCenters[0]);
+      renderDialogCenters();
       dlgQty.max = remain;
       dlgQty.value = key.indexOf("m:") === 0 ? 1 : remain;
       dlgHint.textContent = "1박스 = " + (units[key] || 0) + "개 · 최대 " + remain + "박스";
@@ -447,12 +445,28 @@
       dlgQty.select();
     }
 
+    function renderDialogCenters() {
+      dlgCenters.innerHTML = openCenters.map(function (cid) {
+        var on = String(cid) === String(dlgCenterId);
+        return '<button type="button" class="erp-btn ' + (on ? "erp-btn-primary" : "erp-btn-outline") +
+               ' cpg-dlg-center-btn" data-center="' + esc(cid) + '"' + (on ? ' aria-pressed="true"' : '') + ">" +
+               esc(centerName(cid)) + "</button>";
+      }).join("");
+    }
+
+    dlgCenters.addEventListener("click", function (e) {
+      var btn = e.target.closest(".cpg-dlg-center-btn");
+      if (!btn) return;
+      dlgCenterId = btn.getAttribute("data-center");
+      renderDialogCenters();
+    });
+
     function closeDialog() { dlg.hidden = true; pending = null; }
 
     function commitDialog(all) {
       if (!pending) return;
       var key = pending.key;
-      var cid = dlgCenter.value;
+      var cid = dlgCenterId;
       var want = all ? remainFor(key) : parseInt(dlgQty.value, 10);
       var got = addAlloc(cid, key, want);
       closeDialog();
@@ -629,13 +643,16 @@
       if (badges[1]) badges[1].textContent = pieces + "개";
     }
 
-    if (centerAdd) {
-      centerAdd.addEventListener("click", function () {
+    if (centerPick) {
+      // 목록에서 센터를 고르는 즉시 ③ 에 추가한다(별도 추가 버튼 없음).
+      centerPick.addEventListener("change", function () {
         var cid = centerPick.value;
+        centerPick.value = "";        // 같은 센터를 다시 고를 수 있게 초기화
         if (!cid) return;
         if (openCenters.indexOf(cid) >= 0) { msg.textContent = "이미 추가된 센터입니다."; return; }
         openCenters.push(cid);
         renderDist();
+        msg.textContent = centerName(cid) + " 추가됨";
       });
     }
 

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

app/static/cupang.css

@@ -658,7 +658,7 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
 }
 .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 { 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 {
@@ -695,3 +695,13 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
 /* 드래그 중일 때 ③ 영역을 강조 — 어디에 놓아야 하는지 보이게 */
 .cpg-dist-card.is-drop-ready { outline: 2px dashed var(--color-rich-black); outline-offset: 2px; }
 .cpg-dist-card.is-drop-ready .cpg-dist-center { border-color: var(--color-midtone-gray); }
+
+/* 대화상자 센터 버튼 목록 */
+.cpg-dlg-centers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 132px;
+  overflow-y: auto;
+}
+.cpg-dlg-center-btn { padding: 4px 12px; }