/* 슬롯 기반 파일 업로드 스타일 - 그누보드 UXC 스킨용 */
/* 파일 정보 */
.dropzone-file-info {display:flex; flex-wrap:wrap; color:var(--board-gray-600); font-size:13px; gap:15px;}
.dropzone-file-info .info-item {display:flex; align-items:center; gap:5px;}
.dropzone-file-info .info-item i {color:var(--color-prime);}
/* 슬롯 컨테이너 */
.file-slot-container {display:flex; flex-wrap:wrap; padding:10px; border:1px solid var(--board-gray-200); border-radius:var(--board-radius-lg); background:var(--board-gray-50); gap:9px;}
/* 멀티 드롭 박스 */
.multi-drop-box {display:flex; justify-content:center; align-items:center; flex-direction:column; position:relative; width:120px; min-height:130px; border:2px dashed var(--color-prime); border-radius:var(--board-radius); background:var(--board-white); color:var(--color-prime); cursor:pointer; transition:all 0.2s ease;}
.multi-drop-box i {margin-bottom:8px; font-size:32px;}
.multi-drop-box span {font-size:11px; text-align:center; line-height:1.4;}
.multi-drop-box:hover {border-style:solid; background:var(--board-gray-50);}
.multi-drop-box.drag-over {border-style:solid; background:var(--color-prime); color:#fff;}
/* 개별 슬롯 */
.file-slot {display:flex; flex-direction:column; position:relative; width:122px; min-height:130px; border:2px dashed var(--board-gray-300); border-radius:var(--board-radius); background:var(--board-white); transition:all 0.2s ease;}
.file-slot:hover {border-color:var(--color-prime);}
.file-slot.has-file {border-style:solid; border-color:var(--board-gray-300);}
.file-slot.drag-over {border-style:solid; border-color:var(--color-prime); background:var(--board-gray-100);}
/* 슬롯 번호 */
.file-slot .slot-number {display:flex; justify-content:center; align-items:center; position:absolute; z-index:5; top:-1px; left:-1px; width:20px; height:20px; border-radius:var(--board-radius) 0 var(--board-radius-sm) 0; background:var(--board-gray-400); color:#fff; font-size:11px; font-weight:600;}
.file-slot.has-file .slot-number {background:var(--color-prime);}
/* 빈 슬롯 */
.file-slot .slot-empty {display:flex; justify-content:center; align-items:center; flex-direction:column; padding:15px 10px; color:var(--board-gray-400); cursor:pointer; flex:1;}
.file-slot .slot-empty i {margin-bottom:5px; font-size:24px;}
.file-slot .slot-empty span {font-size:11px;}
.file-slot:hover .slot-empty {color:var(--color-prime);}
/* 파일 프리뷰 */
.file-slot .slot-preview {display:flex; flex-direction:column; padding:8px; padding-top:10px; flex:1;}
.file-slot .slot-preview .preview-image {display:flex; justify-content:center; align-items:center; width:100%; height:55px; margin-bottom:5px; overflow:hidden; border-radius:var(--board-radius-sm); background:var(--board-gray-100);}
.file-slot .slot-preview .preview-image img {max-width:100%; max-height:100%; object-fit:cover;}
.file-slot .slot-preview .preview-image i {color:var(--board-gray-400); font-size:24px;}
.file-slot .slot-preview .preview-info {margin-bottom:5px; text-align:center; flex:1;}
.file-slot .slot-preview .filename {display:block; margin-bottom:2px; overflow:hidden; color:var(--board-gray-700); font-size:10px; text-overflow:ellipsis; white-space:nowrap;}
.file-slot .slot-preview .filesize {display:block; color:var(--board-gray-400); font-size:9px;}
/* 삭제 버튼 */
.file-slot .btn-remove {display:block; width:100%; padding:3px; border:1px solid var(--board-gray-300); border-radius:var(--board-radius-sm); background:transparent; color:var(--board-gray-500); font-size:10px; cursor:pointer; transition:all 0.2s ease;}
.file-slot .btn-remove:hover {border-color:var(--board-danger); background:var(--board-danger); color:#fff;}
/* 삭제 예정 표시 */
.file-slot.marked-delete {border-color:var(--board-danger); opacity:0.5;}
.file-slot.marked-delete .slot-number {background:var(--board-danger);}
.file-slot.marked-delete::after {content:'삭제'; position:absolute; z-index:10; top:50%; left:50%; padding:3px 10px; border-radius:var(--board-radius-sm); background:var(--board-danger); color:#fff; font-size:11px; font-weight:500; transform:translate(-50%, -50%);}
.file-slot.marked-delete .btn-remove {display:none;}
/* 반응형 */
@media (max-width:768px) {
    .file-slot-container {padding:8px;}
    .multi-drop-box {width:calc(33% - 6px);}
    .multi-drop-box i {font-size:24px;}
    .file-slot {width:calc(33% - 6px);}
    .file-slot .slot-number {width:18px; height:18px; font-size:10px;}
    .file-slot .slot-preview .preview-image {height:45px;}
    .file-slot .slot-empty i {font-size:20px;}
    .dropzone-file-info {flex-direction:column; gap:5px;}
}