feat(cupang): 센터 중복 등록 알림 + 목록 지역별 그룹화

추가 시 같은 이름이 있으면 조용히 재활성되던 동작(ON CONFLICT DO UPDATE)
때문에 사용자가 중복을 알 수 없었다. 등록 전에 먼저 조회해서 이미 있으면
만들지 않고 알림(활성/비활성 구분)을 띄운다.

목록은 29개가 가로 4열로 흩어져 훑기 어려웠다. 센터명 앞 지역 접두사로
묶고(인천14 → "인천") CSS 멀티컬럼으로 한 열을 위→아래로 읽게 바꿨다.
숫자는 자연 정렬(인천4 < 인천14). 행 액션은 hover/focus 시에만 노출해
이름이 먼저 눈에 들어오게 했다.

- 라우터: _center_group / _center_sort_key / _group_centers 추가
- 검색은 그룹 단위로 접히고 결과 0건이면 안내 표시

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

app/static/cupang.css

@@ -169,7 +169,7 @@
 .cpg-inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
 .cpg-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
 
-/* ── 입고센터 관리 (상단: 추가·검색 / 아래: 목록 그리드) ── */
+/* ── 입고센터 관리 (상단: 추가·검색 / 아래: 지역 그룹 목록) ── */
 .cpg-center-card { padding: 16px; }
 
 .cpg-center-bar {
@@ -180,33 +180,69 @@
 .cpg-center-addinput { flex: 1 1 auto; min-width: 0; }
 .cpg-center-search { flex: 0 1 240px; min-width: 0; }
 
-.cpg-center-head { margin: 12px 0 8px; }
+.cpg-center-head { margin: 12px 0 10px; }
 
-.cpg-center-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 6px;
-  max-height: 70vh; overflow-y: auto;
-  padding-right: 4px;
+/* 멀티컬럼: 한 열을 위→아래로 읽고, 다 차면 다음 열로 */
+.cpg-center-cols {
+  columns: 4 220px;
+  column-gap: 20px;
+}
+.cpg-center-group {
+  break-inside: avoid; page-break-inside: avoid;
+  margin: 0 0 16px;
+}
+.cpg-center-gtitle {
+  display: flex; align-items: center; gap: 6px;
+  padding: 0 4px 4px;
+  border-bottom: 2px solid var(--color-rich-black);
+  margin-bottom: 4px;
+}
+.cpg-center-gname { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
+.cpg-center-gcount {
+  font-size: 11px; font-weight: 600; line-height: 1;
+  padding: 2px 6px; border-radius: 999px;
+  background: var(--color-subtle-ash); color: var(--color-midtone-gray);
 }
 
 .cpg-center-row {
-  display: flex; align-items: center; gap: 6px;
-  margin: 0; padding: 7px 10px;
-  border: 1px solid var(--color-subtle-ash); border-radius: 10px;
+  display: flex; align-items: center; gap: 7px;
+  padding: 5px 4px;
+  border-bottom: 1px solid var(--color-subtle-ash);
   min-width: 0;
 }
+.cpg-center-row:last-child { border-bottom: none; }
 .cpg-center-dot {
-  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
+  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
   background: var(--color-success-green, #10c22b);
 }
-.cpg-center-row.is-inactive { opacity: .55; }
+.cpg-center-row.is-inactive { opacity: .5; }
 .cpg-center-row.is-inactive .cpg-center-dot { background: var(--color-subtle-ash); }
 .cpg-center-name {
   flex: 1 1 auto; min-width: 0;
   font-size: 14px; font-weight: 500;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
+
+/* 행 액션: 평소엔 흐리게, hover/focus 시 또렷하게 */
+.cpg-center-acts {
+  display: inline-flex; gap: 2px; flex: 0 0 auto;
+  opacity: 0; transition: opacity .12s ease;
+}
+.cpg-center-row:hover .cpg-center-acts,
+.cpg-center-row:focus-within .cpg-center-acts { opacity: 1; }
+@media (hover: none) {
+  .cpg-center-acts { opacity: .7; }
+}
+.cpg-icon-btn {
+  border: 0; background: none; cursor: pointer;
+  font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 6px;
+  color: var(--color-midtone-gray);
+}
+.cpg-icon-btn:hover { background: var(--color-subtle-ash); color: var(--color-rich-black); }
+.cpg-icon-btn.is-danger:hover { background: var(--color-ghost-gray); color: var(--color-callout-red); }
+
+.cpg-center-empty { margin: 8px 0 0; }
+
 .cpg-btn-sm { padding: 3px 8px; font-size: 12px; flex: 0 0 auto; }
 
 /* ── 라인 테이블 ── */