.image-section { margin-bottom: 16px; }
.upload-form { margin-top: 20px; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-zone { display: grid; place-items: center; gap: 6px; border: 2px dashed #d1d6db; border-radius: 14px; padding: 28px; text-align: center; color: var(--muted); cursor: pointer; transition: .15s; }
.drop-zone strong { color: var(--text); font-size: 15px; }
.drop-zone:hover, .drop-zone:focus, .drop-zone.is-dragging { border-color: var(--blue); background: #f5f9ff; outline: none; }
.upload-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; }
.preview-item { min-width: 0; }
.preview-item img, .preview-item video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #f2f4f6; }
.preview-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; margin-top: 4px; }
.upload-submit { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.upload-submit span { color: var(--muted); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 22px; }
.image-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.image-frame { position: relative; background: #f2f4f6; }
.image-frame img, .image-frame video { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.media-type-mark { position: absolute; left: 10px; bottom: 10px; background: #101828dd; color: #fff; border-radius: 99px; padding: 4px 8px; font-size: 12px; }
.image-view-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.main-mark { position: absolute; left: 10px; top: 10px; background: var(--blue); color: #fff; border-radius: 99px; padding: 4px 8px; font-size: 12px; }
.image-info { display: flex; justify-content: space-between; gap: 8px; padding: 11px 12px 7px; }
.image-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-info span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.image-actions { display: flex; align-items: center; gap: 3px; padding: 5px 8px 10px; }
.image-actions form { margin: 0; }
.image-actions button { border: 0; background: #f2f4f6; border-radius: 7px; padding: 6px 8px; cursor: pointer; font-size: 12px; }
.image-actions .image-download { display: inline-flex; align-items: center; border-radius: 7px; padding: 6px 8px; background: #edf4ff; color: #1b64da; font-size: 12px; }
.image-actions button:disabled { opacity: .35; cursor: default; }
.image-actions .delete { color: var(--danger); }
.image-sort-status { margin-top: 18px; color: var(--muted); font-size: 12px; }
.image-sort-status.is-saving { color: var(--blue); }
.image-sort-status.is-error { color: var(--danger); }
.image-card { transition: opacity .15s, transform .15s, box-shadow .15s; }
.image-card.is-dragging { opacity: .45; transform: scale(.97); }
.image-card.is-drag-source { position: fixed; left: -10000px; top: -10000px; width: 1px; height: 1px; opacity: .01; pointer-events: none; }
.image-drag-ghost { position: fixed; z-index: 100; margin: 0; opacity: .9; pointer-events: none; transform: rotate(1.5deg) scale(1.02); box-shadow: 0 18px 45px #0004; }
.image-placeholder { min-height: 150px; border: 2px dashed var(--blue); background: #edf4ff; box-shadow: inset 0 0 0 4px #fff; animation: placeholder-pulse .8s ease-in-out infinite alternate; }
.image-placeholder::after { content: "여기에 이동"; display: grid; place-items: center; height: 100%; min-height: 146px; color: var(--blue); font-weight: 700; }
.image-card.is-drag-over { box-shadow: 0 0 0 2px var(--blue); }
.drag-handle { position: absolute; right: 9px; top: 9px; z-index: 2; padding: 6px 9px; border: 0; border-radius: 8px; background: #191f28dd; color: #fff; font-size: 11px; cursor: grab; touch-action: none; user-select: none; }
.drag-handle:active { cursor: grabbing; }
body.image-sorting { cursor: grabbing; user-select: none; }
body.lightbox-open { overflow: hidden; }
.image-lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 32px; background: #000c; opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; cursor: zoom-out; }
.image-lightbox.open { opacity: 1; visibility: visible; }
.lightbox-content { display: grid; place-items: center; max-width: 100%; max-height: 100%; cursor: default; }
.lightbox-content img { display: block; width: auto; height: auto; max-width: calc(100vw - 64px); max-height: calc(100vh - 100px); object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px #0008; background: #fff; }
.lightbox-content p { margin: 10px 0 0; color: #fff; text-align: center; }
.lightbox-close { position: fixed; right: 22px; top: 18px; z-index: 121; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff2; color: #fff; cursor: pointer; font-size: 30px; }
.lightbox-close:hover, .lightbox-close:focus { background: #fff4; outline: 2px solid #fff; }
@media (max-width: 600px) {
    .image-lightbox { padding: 16px; }
    .lightbox-content img { max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); }
    .lightbox-close { right: 12px; top: 10px; }
}
@keyframes placeholder-pulse { from { background: #f5f9ff; } to { background: #e5f0ff; } }