Handle 2D grid orientation for image list drag

The image grid wraps onto multiple rows, so picking the insertion
target by Y-axis alone meant horizontal moves within a row didn't
register. Add a 'grid' orientation that checks Y for row, then X for
column position within the row.

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

public/listEditor.js

@@ -198,11 +198,17 @@
         var c = container.children[i]
         if (c === drag.srcEl) continue
         var rect = c.getBoundingClientRect()
-        var mid = (orientation === 'horizontal')
-          ? rect.left + rect.width / 2
-          : rect.top + rect.height / 2
-        var pos = (orientation === 'horizontal') ? e.clientX : e.clientY
-        if (pos < mid) { target = c; break }
+        if (orientation === 'grid') {
+          // 2D 그리드: 위쪽 행에 있으면 그 행으로, 같은 행에서는 중앙 X 보다 왼쪽이면 이 카드 앞.
+          if (e.clientY < rect.top) { target = c; break }
+          if (e.clientY <= rect.bottom && e.clientX < rect.left + rect.width / 2) {
+            target = c; break
+          }
+        } else if (orientation === 'horizontal') {
+          if (e.clientX < rect.left + rect.width / 2) { target = c; break }
+        } else {
+          if (e.clientY < rect.top + rect.height / 2) { target = c; break }
+        }
       }
       if (target) {
         if (drag.srcEl.nextSibling !== target) container.insertBefore(drag.srcEl, target)
@@ -228,7 +234,7 @@
     })
   }
   bindContainerDnd('music-list', 'music', 'vertical')
-  bindContainerDnd('image-list', 'image', 'vertical')
+  bindContainerDnd('image-list', 'image', 'grid')
 
   function cleanupDrag() {
     if (!drag) return