refactor(cupang): 입고센터 관리 UI 단순화

센터 목록은 이름 등록·조회·관리가 목적이므로 "사용중" 표시를 없애고
활성/비활성/삭제만 남긴다. 좌우 2단(추가 카드 360px + 900px 고정 목록)
대신 상단 추가·검색 바 + 다중 컬럼 그리드로 바꿔 29개 이상 센터를
한 화면에서 훑을 수 있게 했다.

- 행마다 폼 하나(formaction/name=active)로 저장·토글·삭제 처리
- 상태는 배지 대신 좌측 점(활성 초록 / 비활성 회색+흐리게)
- 클라이언트 검색 필터, 카운트 실시간 갱신
- 라우터에서 center_in_use 조회 제거(화면에서 미사용)

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

app/static/cupang.css

@@ -169,45 +169,41 @@
 .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-layout {
-  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
-}
-.cpg-center-add {
-  width: 360px; flex: 0 0 auto;
-  padding: 16px;
-}
-.cpg-center-listcard {
-  flex: 1 1 480px; min-width: 0;
-  height: 900px;
-  display: flex; flex-direction: column; overflow: hidden;
-}
-@media (max-width: 820px) {
-  .cpg-center-add, .cpg-center-listcard { width: 100%; flex-basis: 100%; }
-}
+/* ── 입고센터 관리 (상단: 추가·검색 / 아래: 목록 그리드) ── */
+.cpg-center-card { padding: 16px; }
 
-.cpg-center-add-title { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
-.cpg-btn-sm { padding: 3px 8px; font-size: 12px; }
+.cpg-center-bar {
+  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
+  padding-bottom: 12px; border-bottom: 1px solid var(--color-subtle-ash);
+}
+.cpg-center-addform { display: flex; gap: 6px; align-items: center; margin: 0; flex: 1 1 320px; min-width: 0; }
+.cpg-center-addinput { flex: 1 1 auto; min-width: 0; }
+.cpg-center-search { flex: 0 1 240px; min-width: 0; }
 
-/* 목록: 카드 높이 채우고 내부 스크롤 */
-.cpg-center-list {
-  flex: 1 1 auto; min-height: 0; overflow-y: auto;
-  display: flex; flex-direction: column; gap: 6px;
+.cpg-center-head { margin: 12px 0 8px; }
+
+.cpg-center-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 6px;
+  max-height: 70vh; overflow-y: auto;
   padding-right: 4px;
 }
 
 .cpg-center-row {
-  display: flex; align-items: center; gap: 8px;
-  padding: 5px 8px;
+  display: flex; align-items: center; gap: 6px;
+  margin: 0; padding: 5px 8px;
   border: 1px solid var(--color-subtle-ash); border-radius: 10px;
   min-width: 0;
 }
+.cpg-center-dot {
+  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
+  background: var(--color-success-green, #10c22b);
+}
 .cpg-center-row.is-inactive { opacity: .55; }
-.cpg-center-edit { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
+.cpg-center-row.is-inactive .cpg-center-dot { background: var(--color-subtle-ash); }
 .cpg-center-name { flex: 1 1 auto; min-width: 0; }
-.cpg-center-sort { width: 56px; flex: 0 0 auto; }
-.cpg-center-state { display: inline-flex; gap: 4px; flex: 0 0 auto; }
-.cpg-center-act { display: inline-flex; gap: 4px; flex: 0 0 auto; }
+.cpg-btn-sm { padding: 3px 8px; font-size: 12px; flex: 0 0 auto; }
 
 /* ── 라인 테이블 ── */
 .cpg-lines td { vertical-align: middle; }