Stable drop-preview drag + image captions

Drag-and-drop UX rewrite:
- The old "highlight target row + margin-grow animation" approach was
  driven by per-row dragenter/dragleave events. Those fire in a noisy
  enter/leave/enter cascade as the pointer crosses sub-elements and as
  the row itself grows under the pointer, which is why the gap was
  pulsing open/closed.
- New approach: a single container-level dragover handler. On dragstart
  the source row is briefly cloned into a translucent "placeholder"
  element (dashed outline, 45% opacity, pointer-events:none) inserted in
  the source's slot; the original is then hidden (display:none) right
  after dragstart so the browser can still capture it as the drag image.
  As the cursor moves over the container we compute which sibling's
  midpoint the pointer just crossed and insertBefore the placeholder
  accordingly. The list length stays constant the whole time, so there
  is no growing/shrinking gap to fight with — what the user sees is the
  dragged item itself shown semi-transparently at the exact drop slot.
  On drop, splice the array using the placeholder's index among the
  non-source children, then re-render.
- The bindContainerDnd helper handles both lists; image grid uses
  vertical Y math (same midpoint rule as the track list since cards
  flow row-by-row in the auto-fill grid). attachDraggable now only sets
  up dragstart/dragend/contextmenu per row; no more dragenter/dragleave.

Image grid:
- Image cards now have a caption below the thumbnail. When the same
  URL appears in the music list, the music entry's title/artist are
  borrowed via captionForImage(url); otherwise "(제목 없음)" muted text.
  Layout changed from a square aspect-ratio card to a flex column:
  .imgWrap holds the square thumbnail, .cardCaption sits underneath
  with single-line title + smaller muted artist line.

CSS cleanup:
- Drop the old .dropAbove margin-grow rules and .dragOver border rule
  on .trackRow/.imageCard. Replaced with .dragPlaceholder +
  .hiddenWhileDragging.
- .imageCard no longer uses aspect-ratio on itself; aspect lives on
  .imgWrap so caption can extend the card vertically.

public/styles.css

@@ -412,11 +412,7 @@ body.siteBody.centerLayout {
   padding: 8px 12px; background: var(--bg-card);
   border: 1px solid var(--border); border-radius: 8px;
   cursor: grab; user-select: none;
-  transition: margin-top 0.18s ease, border-color 0.12s ease;
 }
-.trackRow.dragging { opacity: 0.5; }
-/* 드래그 중 hover 표시: 위쪽으로 64px 공간이 벌어지며 "여기 끼울 수 있다" 를 표현 */
-.trackRow.dropAbove { margin-top: 64px; border-color: var(--accent); }
 .rowNum { color: var(--text-muted); font-size: 14px; text-align: center; }
 .rowThumb { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; background: #000; }
 .rowMeta { min-width: 0; }
@@ -436,7 +432,6 @@ body.siteBody.centerLayout {
   box-shadow: 0 0 0 1px var(--accent);
   white-space: normal; cursor: text;
 }
-/* placeholder 효과: 비어 있을 때 회색 안내 텍스트 */
 .rowTitle[contenteditable="true"]:empty::before,
 .rowSub[contenteditable="true"]:empty::before {
   content: attr(data-placeholder);
@@ -445,6 +440,17 @@ body.siteBody.centerLayout {
 }
 .rowDur { color: var(--text-muted); font-size: 13px; }
 
+/* 드래그 시스템 공통: 원본은 잠시 숨기고, 같은 모양의 placeholder 가 들어갈 자리에서 반투명하게 보임 */
+.hiddenWhileDragging { display: none !important; }
+.dragPlaceholder {
+  opacity: 0.45;
+  pointer-events: none;
+  outline: 2px dashed var(--accent);
+  outline-offset: -2px;
+  background: rgba(47, 129, 247, 0.08);
+}
+.dragPlaceholder * { pointer-events: none !important; }
+
 /* 사진 그리드 */
 .imageGrid {
   display: grid;
@@ -452,14 +458,14 @@ body.siteBody.centerLayout {
   gap: 12px;
 }
 .imageCard {
-  position: relative; aspect-ratio: 1 / 1; background: var(--bg-card);
+  background: var(--bg-card);
   border: 1px solid var(--border); border-radius: 10px;
   overflow: hidden; cursor: grab; user-select: none;
-  transition: margin-left 0.18s ease, border-color 0.12s ease;
+  display: flex; flex-direction: column;
+}
+.imageCard .imgWrap {
+  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
 }
-.imageCard.dragging { opacity: 0.5; }
-/* 사진 그리드도 동일하게 "옆이 벌어진다" 표현 */
-.imageCard.dropAbove { margin-left: 80px; border-color: var(--accent); }
 .imageCard img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .cardNum {
   position: absolute; top: 6px; left: 6px;
@@ -467,6 +473,21 @@ body.siteBody.centerLayout {
   padding: 2px 8px; border-radius: 999px;
   font-size: 12px; font-weight: 600;
 }
+.cardCaption {
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-card);
+}
+.cardTitle {
+  font-size: 13px; color: var(--text);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.cardSub {
+  font-size: 11px; color: var(--text-muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  margin-top: 2px;
+}
+.cardTitle .muted { color: var(--text-muted); }
 
 /* 컨텍스트 메뉴 */
 .ctxMenu {