@props([
    'uploadRoute' => '',
    'indexRoute'  => '',
    'folderRoute' => '',
])

<!-- 중앙 집중형 이미지 라이브러리 모달 컴포넌트 -->
<div class="modal fade" id="globeauMediaModal" tabindex="-1" aria-labelledby="globeauMediaModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" style="max-width: 1240px;">
        <div class="modal-content border-0 shadow-lg common-rounded-modal overflow-hidden" style="height: 85vh; background-color: #f8fafc;">

            <!-- 모달창 전체를 어둡게 가리는 백드롭 딤 -->
            <div id="mediaModalGlobalDim" class="position-absolute top-0 start-0 w-100 h-100 d-none"
                style="background-color: rgba(15, 23, 42, 0.45); z-index: 10030; backdrop-filter: blur(1px); pointer-events: none;">
            </div>

            <!-- 1. [모달 헤더] 메인 타이틀 & 파일 업로드 액션 -->
            <div class="modal-header border-bottom bg-white px-4 py-3 flex-shrink-0">
                <div class="d-flex align-items-center gap-2">
                    <div class="bg-primary bg-opacity-10 text-primary p-2 common-rounded-sm d-flex align-items-center justify-content-center" style="width: 38px; height: 38px;">
                        <i class="fa-solid fa-photo-film fs-5"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-dark m-0" id="globeauMediaModalLabel">이미지 라이브러리</h5>
                        <p class="text-muted small m-0" style="font-size: 0.75rem;">이미지를 탐색, 분류 관리하거나 서비스 슬롯에 선택 적용합니다.</p>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-primary btn-sm px-3 shadow-sm common-rounded fw-semibold" id="mediaModalUploadBtn" onclick="document.getElementById('mediaModalFileInput').click()">
                        <i class="fa-solid fa-cloud-arrow-up me-1"></i> 파일 업로드
                    </button>
                    <!-- 🌟 [핵심 수정]: 인라인 onchange 제거 완료 (image_library.js 단일 리스너와 충돌 방지) -->
                    <input type="file" id="mediaModalFileInput" class="d-none" multiple accept="image/*">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>

            <!-- 2. [전폭 3대 보관함 탭 바] 서브헤더 내비게이션 -->
            <div class="border-bottom bg-white px-4 py-2 flex-shrink-0 d-flex align-items-center justify-content-between">
                <ul class="nav nav-pills gap-1" id="mediaLibraryMainTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active py-1 px-3 common-rounded fw-semibold small d-flex align-items-center gap-2"
                                id="tab-btn-my"
                                data-tab="my"
                                onclick="switchImageTab('my')"
                                type="button">
                            <i class="fa-solid fa-folder"></i>
                            <span>내 보관함</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link py-1 px-3 common-rounded fw-semibold small d-flex align-items-center gap-2 text-secondary"
                                id="tab-btn-library"
                                data-tab="library"
                                onclick="switchImageTab('library')"
                                type="button">
                            <i class="fa-solid fa-building-columns"></i>
                            <span>공식 라이브러리</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link py-1 px-3 common-rounded fw-semibold small d-flex align-items-center gap-2 text-secondary"
                                id="tab-btn-community"
                                data-tab="community"
                                onclick="switchImageTab('community')"
                                type="button">
                            <i class="fa-solid fa-users"></i>
                            <span>커뮤니티 공유함</span>
                        </button>
                    </li>
                </ul>

                <!-- 탭 권한 상태 안내 뱃지 -->
                <div class="d-none d-md-flex align-items-center gap-2">
                    <span id="mediaTabPermissionBadge" class="badge bg-light text-muted border common-rounded-badge px-2 py-1 small fw-normal">
                        <i class="fa-solid fa-user-shield me-1 text-primary"></i> 내 보관함 (자유 관리 가능)
                    </span>
                </div>
            </div>

            <!-- 3. [모달 본문] 2단 레이아웃 (좌: 트리 / 우: 그리드) -->
            <div class="modal-body p-0 d-flex overflow-hidden" style="min-height: 0; flex: 1 1 auto;">

                <!-- 좌측 사이드바: 계층형 폴더 트리 (너비 260px 고정) -->
                <div class="border-end bg-white d-flex flex-column flex-shrink-0 h-100" style="width: 260px; min-width: 260px; min-height: 0;" data-is-shop="{{ auth()->user()?->shop_id ? 'true' : 'false' }}">

                    <!-- [상단 고정 헤더: 내비게이션 툴바 & 경로 표시] -->
                    <div class="p-2 border-bottom bg-light bg-opacity-50 flex-shrink-0">
                        <div class="d-flex align-items-center justify-content-between gap-1 mb-2 pb-1 border-bottom border-secondary border-opacity-10">
                            <div class="d-flex align-items-center gap-1">
                                <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                                    id="mediaNavBackBtn" style="width: 26px; height: 26px;" onclick="navigateMediaFolderHistory('back')" title="뒤로 가기" disabled>
                                    <i class="fa-solid fa-arrow-left" style="font-size: 0.72rem;"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                                    id="mediaNavForwardBtn" style="width: 26px; height: 26px;" onclick="navigateMediaFolderHistory('forward')" title="앞으로 가기" disabled>
                                    <i class="fa-solid fa-arrow-right" style="font-size: 0.72rem;"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                                    id="mediaNavUpBtn" style="width: 26px; height: 26px;" onclick="navigateMediaFolderUp()" title="상위 폴더로 이동" disabled>
                                    <i class="fa-solid fa-arrow-up" style="font-size: 0.72rem;"></i>
                                </button>

                                <!-- 최근 방문 위치 드롭다운 -->
                                <div class="dropdown d-inline-block">
                                    <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                                        id="mediaNavHistoryDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false" style="width: 20px; height: 26px;" title="최근 위치">
                                        <i class="fa-solid fa-chevron-down" style="font-size: 0.65rem;"></i>
                                    </button>
                                    <ul class="dropdown-menu shadow border-0 py-1 common-rounded-dropdown" id="mediaNavHistoryDropdownMenu" style="font-size: 0.78rem; min-width: 190px; max-height: 280px; overflow-y: auto; z-index: 10075;">
                                        <li><span class="dropdown-item-text text-muted py-1 px-3 small">최근 방문 위치 없음</span></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="text-truncate text-secondary fw-semibold px-1 text-end flex-grow-1" id="mediaNavBreadcrumbText" style="font-size: 0.75rem;">
                                전체 이미지
                            </div>
                        </div>

                        <!-- 전체 이미지 + 폴더 생성/새로고침 버튼 -->
                        <div class="d-flex align-items-center justify-content-between gap-1">
                            <div id="mediaFolderFixedAllContainer" class="flex-grow-1"></div>
                            <div class="d-flex align-items-center gap-1 flex-shrink-0">
                                <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                                    id="mediaCreateFolderBtn" style="width: 28px; height: 28px;" onclick="showCreateFolderInput()" title="새 폴더 생성">
                                    <i class="fa-solid fa-plus text-primary" style="font-size: 0.75rem;"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                                    style="width: 28px; height: 28px;" onclick="fetchMediaFolders()" title="새로고침">
                                    <i class="fa-solid fa-rotate-right text-secondary" style="font-size: 0.75rem;"></i>
                                </button>
                            </div>
                        </div>

                        <!-- 새 폴더 생성 인라인 입력 박스 -->
                        <div id="mediaCreateFolderBox" class="mt-2 d-none">
                            <div class="input-group input-group-sm">
                                <input type="text" id="newFolderNameInput" class="form-control common-rounded-start" placeholder="폴더명 입력..." maxlength="30" onkeydown="if(event.key==='Enter') submitCreateFolder()">
                                <button class="btn btn-primary common-rounded-end px-2" type="button" onclick="submitCreateFolder()">
                                    <i class="fa-solid fa-check"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 하위 계층 폴더 트리 스크롤 영역 -->
                    <div class="flex-grow-1 overflow-auto p-2" id="mediaFolderTreeList" style="white-space: nowrap; min-height: 0;">
                        <div class="text-center py-4 text-muted small">
                            <div class="spinner-border spinner-border-sm text-primary mb-2" role="status"></div>
                            <div>폴더 목록 불러오는 중...</div>
                        </div>
                    </div>

                    <!-- 하단 푸터 (임시 파일) -->
                    <div class="p-2 border-top bg-light bg-opacity-25 flex-shrink-0">
                        <div id="mediaFolderFixedOrphansContainer"></div>
                    </div>
                </div>

                <!-- 우측 메인 영역: 툴바 + 이미지 그리드 -->
                <div class="flex-grow-1 d-flex flex-column bg-transparent position-relative h-100" style="min-width: 0; min-height: 0; overflow: hidden !important;">

                    <!-- 상단 통합 툴바 (고정) -->
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 px-3 py-2 border-bottom bg-white flex-shrink-0" style="z-index: 5;">
                        <div class="d-flex align-items-center gap-3">
                            <div class="form-check m-0 d-flex align-items-center">
                                <input class="form-check-input shadow-none cursor-pointer common-rounded-xs" type="checkbox" id="mediaMasterCheckbox" onchange="toggleSelectAllMedia(this)">
                                <label class="form-check-label small ms-2 text-dark fw-semibold cursor-pointer" for="mediaMasterCheckbox">전체 선택</label>
                            </div>
                            <span id="mediaSelectedCountText" class="badge bg-primary-subtle text-primary border border-primary-subtle common-rounded-badge px-2 py-1 small fw-normal">
                                선택된 이미지: 0개
                            </span>
                        </div>

                        <!-- 우측: 정렬 + 뷰 모드 + 검색 -->
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <div class="btn-group-sm common-rounded-btn-group overflow-hidden" role="group">
                                <button type="button" class="btn btn-outline-secondary py-1 px-2 sort-toggle-btn active" id="sort-btn-date" onclick="toggleMediaSort('date')">
                                    <span>날짜순</span> <i class="fa-solid fa-arrow-down-short-wide ms-1 sort-icon"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary py-1 px-2 sort-toggle-btn" id="sort-btn-name" onclick="toggleMediaSort('name')">
                                    <span>파일이름</span> <i class="fa-solid fa-sort ms-1 sort-icon text-muted"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary py-1 px-2 sort-toggle-btn" id="sort-btn-size" onclick="toggleMediaSort('size')">
                                    <span>파일용량</span> <i class="fa-solid fa-sort ms-1 sort-icon text-muted"></i>
                                </button>
                            </div>

                            <div class="btn-group-sm common-rounded-btn-group overflow-hidden" role="group">
                                <button type="button" class="btn btn-outline-secondary py-1 px-2 view-mode-btn active" id="view-mode-large" onclick="changeMediaViewMode('large')" title="큰 아이콘">
                                    <i class="fa-solid fa-table-cells-large"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary py-1 px-2 view-mode-btn" id="view-mode-small" onclick="changeMediaViewMode('small')" title="중간 아이콘">
                                    <i class="fa-solid fa-table-cells"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary py-1 px-2 view-mode-btn" id="view-mode-list" onclick="changeMediaViewMode('list')" title="자세히 보기">
                                    <i class="fa-solid fa-list"></i>
                                </button>
                            </div>

                            <div class="input-group input-group-sm common-rounded-input" style="width: 180px;">
                                <input type="text" class="form-control common-rounded-start" id="mediaKeywordSearch" placeholder="파일명 검색..." onkeyup="if(event.key==='Enter') fetchMediaLibraryImages(true)">
                                <button class="btn btn-outline-secondary common-rounded-end" type="button" onclick="fetchMediaLibraryImages(true)">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 이미지 그리드 캔버스 -->
                    <div class="flex-grow-1 p-3 position-relative" id="mediaImageContainer" 
                        style="background-color: transparent; overflow-y: scroll !important; overflow-x: hidden; height: 100%; min-height: 0; -webkit-overflow-scrolling: touch;">
                    </div>

                    <!-- 외부 드래그 앤 드롭존 -->
                    <div id="mediaExternalDropZone" class="position-absolute top-0 start-0 w-100 h-100 d-none flex-column align-items-center justify-content-center p-3" style="z-index: 10040; pointer-events: none;">
                        <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center bg-white common-rounded-card shadow-lg" style="border: 2.5px dashed #0d6efd; background-color: rgba(255, 255, 255, 0.96) !important;">
                            <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-circle mb-3 d-flex align-items-center justify-content-center" style="width: 65px; height: 65px;">
                                <i class="fa-solid fa-cloud-arrow-up fs-2"></i>
                            </div>
                            <h5 class="fw-bold text-primary mb-1">여기에 파일을 떨어뜨리세요</h5>
                            <p class="text-secondary small m-0">현재 선택된 폴더로 즉시 업로드됩니다.</p>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 4. [모달 푸터] 조작 팁 & 최종 선택 완료 액션 -->
            <div class="modal-footer border-top bg-white px-4 py-2 d-flex justify-content-between align-items-center flex-shrink-0">
                <div class="text-muted small d-flex align-items-center gap-3" style="font-size: 0.75rem;">
                    <span><i class="fa-solid fa-computer-mouse me-1 text-primary"></i> <strong>더블클릭</strong>: 적용</span>
                    <span><i class="fa-solid fa-arrow-pointer me-1 text-primary"></i> <strong>영역 드래그</strong>: 다중 선택</span>
                    <span><i class="fa-solid fa-keyboard me-1 text-primary"></i> <strong>Ctrl + A</strong>: 전체 선택</span>
                    <span><i class="fa-solid fa-hand-pointer me-1 text-primary"></i> <strong>우클릭</strong>: 상세 메뉴</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-light btn-sm px-3 border common-rounded" data-bs-dismiss="modal">취소</button>
                    <button type="button" class="btn btn-primary btn-sm px-4 fw-semibold shadow-sm common-rounded" onclick="confirmMediaSelection()">
                        선택 완료
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- 마우스 우클릭 커스텀 컨텍스트 메뉴 -->
<div id="mediaFileContextMenu" class="dropdown-menu shadow-lg py-1 border-0 common-rounded-card" style="display: none; position: fixed; z-index: 10070; min-width: 195px; font-size: 0.82rem;">
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" id="contextMenuPublishBtn" href="javascript:void(0)" onclick="contextMenuAction('publish')" style="display:none;">
        <i class="fa-solid fa-building-columns me-2 text-primary"></i> 공식 라이브러리 배포
    </a>
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" id="contextMenuUnpublishBtn" href="javascript:void(0)" onclick="contextMenuAction('unpublish')" style="display:none;">
        <i class="fa-solid fa-eye-slash me-2 text-secondary"></i> 공식 라이브러리 회수
    </a>
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" id="contextMenuImportBtn" href="javascript:void(0)" onclick="contextMenuAction('import')" style="display:none;">
        <i class="fa-solid fa-cloud-arrow-down me-2 text-success"></i> 내 보관함으로 가져오기
    </a>
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" id="contextMenuCopyBtn" href="javascript:void(0)" onclick="contextMenuAction('copy')">
        <i class="fa-solid fa-copy me-2 text-secondary"></i> 복사 (Ctrl+C)
    </a>
    <div class="dropdown-divider my-1" id="contextMenuDynamicDivider"></div>
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" id="contextMenuSelectBtn" href="javascript:void(0)" onclick="contextMenuAction('select')">
        <i class="fa-solid fa-check text-primary me-2"></i> 선택 완료
    </a>
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" id="contextMenuInfoBtn" href="javascript:void(0)" onclick="contextMenuAction('info')">
        <i class="fa-solid fa-circle-info me-2 text-primary"></i> 상세정보 보기 & 수정
    </a>
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" href="javascript:void(0)" onclick="contextMenuAction('view')">
        <i class="fa-solid fa-arrow-up-right-from-square me-2 text-secondary"></i> 원본 새 탭 보기
    </a>
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" href="javascript:void(0)" onclick="contextMenuAction('rename')">
        <i class="fa-solid fa-pen me-2 text-secondary"></i> 이름 바꾸기
    </a>
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" id="contextMenuProtectBtn" href="javascript:void(0)" onclick="contextMenuAction('protect')">
        <i class="fa-solid fa-lock me-2 text-warning"></i> 보호 잠금 설정
    </a>
    <div class="dropdown-divider my-1" id="contextMenuDeleteDivider"></div>
    <a class="dropdown-item py-1 px-3 d-flex align-items-center" id="contextMenuDeleteBtn" href="javascript:void(0)" onclick="contextMenuAction('delete')">
        <i class="fa-solid fa-trash me-2 text-danger"></i> 삭제하기
    </a>
</div>

<!-- 상세정보 보기 & 수정 전용 독립 서브 모달 -->
<div class="modal fade" id="mediaDetailModal" tabindex="-1" aria-labelledby="mediaDetailModalLabel" aria-hidden="true" style="z-index: 10085;">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg common-rounded-modal overflow-hidden">
            <div class="modal-header border-bottom bg-white px-4 py-3">
                <div class="d-flex align-items-center gap-2">
                    <div class="bg-primary bg-opacity-10 text-primary p-2 common-rounded-sm d-flex align-items-center justify-content-center" style="width: 34px; height: 34px;">
                        <i class="fa-solid fa-circle-info fs-6"></i>
                    </div>
                    <h5 class="modal-title fw-bold text-dark m-0" id="mediaDetailModalLabel">이미지 상세정보 & 메타 수정</h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="mediaDetailForm" onsubmit="event.preventDefault(); submitMediaDetailUpdate();">
                <input type="hidden" id="detailImageId" name="id">

                <div class="modal-body p-4 bg-light bg-opacity-25" style="max-height: 70vh; overflow-y: auto;">
                    <div class="row g-3">
                        <div class="col-md-5 text-center d-flex flex-column align-items-center justify-content-start">
                            <div class="position-relative w-100 mb-2 text-center" style="padding: 0 !important; border: none !important; background: transparent !important; overflow: hidden;">
                                <img id="detailPreviewImg" src="" alt="미리보기" class="rounded shadow-sm" 
                                     style="max-width: 100% !important; max-height: 75vh !important; width: auto !important; height: auto !important; object-fit: contain !important; display: inline-block !important; vertical-align: middle;">
                                <span id="detailProtectedBadge" class="position-absolute top-0 end-0 badge bg-warning text-dark m-2 shadow-sm d-none">
                                    <i class="fa-solid fa-lock"></i> 보호 중
                                </span>
                            </div>
                            <div class="d-flex flex-wrap align-items-center justify-content-center gap-1 mb-2">
                                <span class="badge bg-light text-dark border small" id="detailDimensions">-</span>
                                <span class="badge bg-light text-dark border small" id="detailSize">-</span>
                                <span class="badge bg-light text-dark border small" id="detailExt">-</span>
                                <span id="detailUsageArea" class="d-inline-block"></span>
                            </div>
                            <div class="mt-1">
                                <a id="detailViewOriginalBtn" href="#" target="_blank" class="btn btn-outline-secondary btn-sm py-0 px-2 text-decoration-none" style="font-size: 0.73rem;">
                                    <i class="fa-solid fa-arrow-up-right-from-square me-1"></i>원본 새 탭 보기
                                </a>
                            </div>
                        </div>

                        <div class="col-md-7">
                            <div class="mb-2">
                                <label for="detailTitle" class="form-label small fw-bold text-dark mb-1">이미지 타이틀</label>
                                <input type="text" id="detailTitle" name="title" class="form-control form-control-sm common-rounded" placeholder="타이틀 입력">
                            </div>

                            <div class="mb-2">
                                <label for="detailAltText" class="form-label small fw-bold text-dark mb-1">대체 텍스트 (Alt)</label>
                                <input type="text" id="detailAltText" name="alt_text" class="form-control form-control-sm common-rounded" placeholder="스크린리더 및 SEO용 대체 텍스트">
                            </div>

                            <div class="mb-2">
                                <label for="detailSeoSlug" class="form-label small fw-bold text-dark mb-1">
                                    SEO 식별자 (Slug)
                                    <small class="text-muted fw-normal">(검색엔진 친화적 URL 식별자)</small>
                                </label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text bg-white text-muted border-end-0"><i class="fa-solid fa-link" style="font-size: 0.75rem;"></i></span>
                                    <input type="text" id="detailSeoSlug" name="seo_slug" class="form-control form-control-sm border-start-0 ps-0" placeholder="예: gangnam-nail-art-2026">
                                </div>
                            </div>

                            <div class="mb-2">
                                <label for="detailCredit" class="form-label small fw-bold text-dark mb-1">저작권 / 출처 (Credit)</label>
                                <input type="text" id="detailCredit" name="credit" class="form-control form-control-sm common-rounded" placeholder="예: GLOBEAU 본사, 원장 직찍, 게티이미지">
                            </div>

                            <div class="mb-2">
                                <label for="detailTags" class="form-label small fw-bold text-dark mb-1">검색 태그 (쉼표 구분)</label>
                                <input type="text" id="detailTags" name="tags" class="form-control form-control-sm common-rounded tag-input-field" placeholder="예: 네일, 프로모션, 가을신상">
                            </div>

                            <div class="mb-2">
                                <label for="detailDescription" class="form-label small fw-bold text-dark mb-1">상세 설명 및 메모</label>
                                <textarea id="detailDescription" name="description" class="form-control form-control-sm common-rounded" rows="3" placeholder="이미지에 대한 상세 설명, 용도 메모 등을 자유롭게 기입하세요..."></textarea>
                            </div>

                            <div class="mb-0">
                                <label for="detailOriginalName" class="form-label small fw-bold text-dark mb-1">파일명</label>
                                <input type="text" id="detailOriginalName" name="original_name" class="form-control form-control-sm common-rounded">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer border-top bg-white px-4 py-2 d-flex justify-content-between align-items-center">
                    <span class="text-muted small" style="font-size: 0.72rem;">
                        <i class="fa-solid fa-shield-halved me-1 text-primary"></i> 변경된 메타데이터는 전사 검색 인덱스에 즉시 반영됩니다.
                    </span>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-light btn-sm px-3 border common-rounded" data-bs-dismiss="modal">닫기</button>
                        <button type="submit" class="btn btn-primary btn-sm px-4 fw-semibold shadow-sm common-rounded">
                            <i class="fa-solid fa-floppy-disk me-1"></i> 수정 저장
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 전역 라우트 및 초기화 브릿지 스크립트 (빈 값 덮어쓰기 방어 완비) -->
<script>
    (function () {
        const propUpload = @json($uploadRoute);
        const propIndex  = @json($indexRoute);
        const propFolder = @json($folderRoute);

        if (propUpload) window.defaultImageUploadRoute = propUpload;
        if (propIndex)  window.defaultImageIndexRoute  = propIndex;
        if (propFolder) window.defaultImageFolderRoute = propFolder;

        window.imageUploadRoute = window.imageUploadRoute || window.defaultImageUploadRoute || '/admin/images';
        window.imageIndexRoute  = window.imageIndexRoute  || window.defaultImageIndexRoute  || '/admin/images/list';
        window.imageFolderRoute = window.imageFolderRoute || window.defaultImageFolderRoute || '/admin/image-folders';
    })();
</script>