fix(cafe24): 옵션값 썸네일 탐색 확대 + 품목을 2줄 카드로

- 옵션값 썸네일이 option_image_file 만 봐서 "없음"으로 나왔다. 카페24
  관리자에서 "옵션 연결 이미지"로만 등록한 상품은 그 필드가 비어 있고 품목
  image 에만 나타난다(실물). option_image_file → option_link_image → 해당
  옵션값을 가진 품목의 image 순으로 찾는다.
- 품목 표가 380px 패널에 좁아 옵션값 이름이 아이콘 아래로 꺾여 잘렸다.
  품목마다 2줄 카드(아이콘+이름 / 자체코드·추가금액·진열·판매)로 교체.

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

app/static/cafe24.css

@@ -1106,33 +1106,61 @@
   font-size: 12px;
 }
 
-/* 품목 표 — 좁은 칸에 맞춘 작은 글자 */
-.cf24-variants {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-  table-layout: fixed;
-}
-
-.cf24-variants th,
-.cf24-variants td {
-  padding: 4px 4px;
+/* 품목 — 380px 패널에 표는 좁다(실측: 옵션값 이름이 아이콘 아래로 꺾여 "그/1개"로
+   잘렸다). 품목마다 2줄 카드로 그린다. 1줄: 아이콘 + 이름(남는 폭 전부),
+   2줄: 자체코드 · 추가금액 · 진열/판매 토글. */
+.cf24-v-item {
+  padding: 6px 0;
   border-bottom: 1px solid var(--color-subtle-ash, #e5e5e5);
-  vertical-align: middle;
-  text-align: left;
 }
 
-.cf24-variants th {
+.cf24-v-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+  min-width: 0;
+}
+
+.cf24-v-img {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+  border: 1px solid var(--color-subtle-ash, #e5e5e5);
+  border-radius: var(--r-sm, 4px);
+  background: var(--color-ghost-gray, #f6f8fa);
+  display: block;
+}
+
+.cf24-v-img-empty {
+  border-style: dashed;
+}
+
+.cf24-v-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 13px;
   font-weight: 500;
-  color: var(--color-midtone-gray, #737373);
-  white-space: nowrap;
-}
-
-.cf24-variants td.cf24-v-name {
   word-break: break-word;
 }
 
-.cf24-variants input[type="text"] {
+.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;
   box-sizing: border-box;
   width: 100%;
@@ -1142,11 +1170,16 @@
   font-size: 12px;
 }
 
-.cf24-variants .cf24-v-amount input { text-align: right; }
-/* "미진열"(3글자)이 한 줄에 들어가는 폭. 실측: 44px 에서는 두 줄로 꺾였다. */
-.cf24-variants .cf24-v-flag { text-align: center; width: 54px; }
-.cf24-variants .cf24-v-code { width: 92px; }
-.cf24-variants .cf24-v-amount { width: 76px; }
+.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; /* 토글을 입력칸 세로 중심에 맞춘다 */
+}
 
 /* 진열/판매 토글 — 저장 전까지는 화면만 바뀐다(배지와 같은 색 규칙) */
 .cf24-v-toggle {