feat(cafe24): 옵션/품목 편집을 별도 모달 창으로

380px 정보 패널은 옵션값·품목 표를 담기에 좁다. 패널에는 「팝업에서 관리」
버튼만 두고, 최대 1180px 모달(왼쪽 옵션 정의 / 오른쪽 품목 표: 이미지·옵션·
품목코드·자체코드·추가금액·진열·판매)에서 편집한다.
- 모달은 페이지에 하나(패널 조각 교체와 무관), 열 때마다 카페24에서 새로 읽음.
- 닫기: X · 배경 클릭 · Esc. 저장 안 한 변경(.is-dirty)이 있으면 확인창.
- 다른 상품을 고르면 열려 있던 창은 닫힘.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

app/static/cafe24.css

@@ -1106,24 +1106,143 @@
   font-size: 12px;
 }
 
-/* 품목 — 380px 패널에 표는 좁다(실측: 옵션값 이름이 아이콘 아래로 꺾여 "그/1개"로
-   잘렸다). 품목마다 2줄 카드로 그린다. 1줄: 아이콘 + 이름(남는 폭 전부),
-   2줄: 자체코드 · 추가금액 · 진열/판매 토글. */
-.cf24-v-item {
-  padding: 6px 0;
-  border-bottom: 1px solid var(--color-subtle-ash, #e5e5e5);
-}
-
-.cf24-v-head {
+/* ── 옵션/품목 모달 — 380px 패널은 품목 표를 담기에 좁아(실측: 옵션값 이름이
+   아이콘 아래로 꺾여 잘렸다) 넓은 창에서 편집한다. 왼쪽 옵션 정의 / 오른쪽 품목 표. */
+.cf24-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(10, 10, 10, 0.45);
+}
+
+.cf24-modal[hidden] {
+  display: none;
+}
+
+body.cf24-modal-open {
+  overflow: hidden; /* 뒤 화면 스크롤 잠금 */
+}
+
+.cf24-modal-box {
+  display: flex;
+  flex-direction: column;
+  width: min(1180px, 96vw);
+  max-height: 90vh;
+  background: var(--color-canvas-white, #fff);
+  border-radius: var(--r-xl, 14px);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.cf24-modal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--sp-12, 12px);
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--color-subtle-ash, #e5e5e5);
+  flex: 0 0 auto;
+}
+
+.cf24-modal-title {
+  margin: 0;
+  font-size: var(--text-heading, 18px);
+  letter-spacing: -0.45px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cf24-modal-close {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  font-size: 16px;
+  cursor: pointer;
+  color: var(--color-midtone-gray, #737373);
+}
+
+.cf24-modal-close:hover {
+  background: var(--color-ghost-gray, #f2f2f2);
+  color: var(--color-rich-black, #0a0a0a);
+}
+
+.cf24-modal-body {
+  padding: 16px 18px 20px;
+  overflow: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.cf24-modal-grid {
+  display: grid;
+  grid-template-columns: 400px minmax(0, 1fr);
+  gap: 24px;
+  align-items: start;
+}
+
+@media (max-width: 960px) {
+  .cf24-modal-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.cf24-modal-col {
   min-width: 0;
 }
 
+/* 옵션이 없는 상품의 생성 폼 — 넓은 모달에서 끝까지 늘어나지 않게 */
+.cf24-modal-body .cf24-opt-create {
+  max-width: 560px;
+}
+
+/* 품목 표 — 모달의 오른쪽 열(약 700px)에 맞춘다 */
+.cf24-variants {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.cf24-variants th,
+.cf24-variants td {
+  padding: 6px 6px;
+  border-bottom: 1px solid var(--color-subtle-ash, #e5e5e5);
+  vertical-align: middle;
+  text-align: left;
+}
+
+.cf24-variants th {
+  font-weight: 500;
+  font-size: 12px;
+  color: var(--color-midtone-gray, #737373);
+  white-space: nowrap;
+  position: sticky;
+  top: 0;
+  background: var(--color-canvas-white, #fff);
+}
+
+.cf24-variants-wrap {
+  max-height: 62vh;
+  overflow: auto;
+}
+
+.cf24-v-imgcol { width: 40px; }
+.cf24-v-syscode { width: 110px; }
+.cf24-v-syscode code { font-size: 11px; color: var(--color-midtone-gray, #737373); }
+.cf24-v-code { width: 150px; }
+.cf24-v-amount { width: 96px; }
+.cf24-v-amount input { text-align: right; }
+.cf24-v-flag { width: 58px; text-align: center; }
+
 .cf24-v-img {
-  flex: 0 0 auto;
   width: 32px;
   height: 32px;
   object-fit: cover;
@@ -1138,47 +1257,18 @@
 }
 
 .cf24-v-name {
-  flex: 1 1 auto;
-  min-width: 0;
-  font-size: 13px;
   font-weight: 500;
   word-break: break-word;
 }
 
-.cf24-v-row {
-  display: flex;
-  align-items: flex-end;
-  gap: 6px;
-}
-
-.cf24-v-row label {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 11px;
-  color: var(--color-midtone-gray, #737373);
-  min-width: 0;
-}
-
-.cf24-v-row input[type="text"] {
-  height: 28px;
+.cf24-variants input[type="text"] {
+  height: 30px;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 6px;
+  padding: 0 8px;
   border: 1px solid var(--color-subtle-ash, #e5e5e5);
   border-radius: var(--r-sm, 4px);
-  font-size: 12px;
-}
-
-.cf24-v-code { flex: 1 1 110px; }
-.cf24-v-amount { flex: 0 0 84px; }
-.cf24-v-amount input { text-align: right; }
-
-.cf24-v-flags {
-  flex: 0 0 auto;
-  display: flex;
-  gap: 4px;
-  padding-bottom: 3px; /* 토글을 입력칸 세로 중심에 맞춘다 */
+  font-size: 13px;
 }
 
 /* 진열/판매 토글 — 저장 전까지는 화면만 바뀐다(배지와 같은 색 규칙) */