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

<!-- ===================================================================
     1. 모달 루트 컨테이너 & 프레임 (Modal Base Frame)
     ================================================================== -->
<div class="modal fade modal-image-library" 
     id="globeauImageModal" 
     tabindex="-1" 
     aria-labelledby="globeauImageModalLabel" 
     aria-hidden="true" 
     data-bs-backdrop="static" 
     data-is-shop="{{ auth()->user()?->shop_id ? 'true' : 'false' }}">
    <div class="modal-dialog modal-dialog-centered image-modal-dialog">        
        <div class="modal-content image-modal-content border-0 shadow-lg common-rounded-modal overflow-hidden position-relative">

            <!-- 1.1 모달 전역 딤 백드롭 -->
            <div id="imageModalGlobalDim" class="position-absolute top-0 start-0 w-100 h-100 d-none"></div>

            <!-- 1.2 외부 파일 드래그 앤 드롭존 오버레이 -->
            <div id="imageExternalDropZone" class="position-absolute top-0 start-0 w-100 h-100 d-none flex-column align-items-center justify-content-center p-3">
                <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center bg-white common-rounded-card shadow-lg image-dropzone-box">
                    <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-circle mb-3 d-flex align-items-center justify-content-center image-dropzone-icon-box">
                        <i class="fa-solid fa-cloud-arrow-up fs-2 text-primary"></i>
                    </div>
                    <h5 class="fw-bold mb-1 text-primary">여기에 파일을 떨어뜨리세요</h5>
                    <p class="text-secondary small m-0">현재 선택된 폴더로 즉시 업로드됩니다.</p>
                </div>
            </div>

            <!-- ===================================================================
                 2. 모달 최상단 타이틀 헤더 (Modal Title Header & Global Upload)
                 ================================================================== -->
            <div class="modal-header border-bottom bg-white px-3 px-md-4 py-2 py-md-3 flex-shrink-0">
                <!-- 2.1 좌측: 타이틀 및 안내 문구 -->
                <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 image-header-icon-box">
                        <i class="fa-solid fa-photo-film fs-5 text-primary"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-dark m-0 fs-6 fs-md-5" id="globeauImageModalLabel">이미지 라이브러리</h5>
                        <p class="text-muted small m-0 d-none d-sm-block image-header-subtext">이미지를 탐색, 분류 관리하거나 서비스 슬롯에 선택 적용합니다.</p>
                    </div>
                </div>

                <!-- 2.2 우측: 파일 업로드 트리거 및 모달 닫기 -->
                <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="imageModalUploadBtn" onclick="document.getElementById('imageModalFileInput').click()">
                        <i class="fa-solid fa-cloud-arrow-up me-1"></i> <span class="d-none d-sm-inline">파일 </span>업로드
                    </button>
                    <input type="file" id="imageModalFileInput" class="d-none" multiple accept="image/*">
                    <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>

            <!-- ===================================================================
                 3. 모바일 전용 단일 행 툴바 (Mobile Slim Toolbar: 767.98px 이하)
                 ================================================================== -->
            <div class="d-block d-md-none border-bottom bg-white flex-shrink-0 position-relative">
                <div class="d-flex align-items-center justify-content-between px-3 py-2 gap-2" id="mobileControlBar" style="height: 50px;">
                    <!-- [좌측 그룹]: 폴더 오프캔버스 버튼 + 전체선택 + 액션 메뉴 -->
                    <div class="d-flex align-items-center gap-2 flex-shrink-0">
                        <button type="button" class="btn btn-outline-secondary btn-sm px-2 py-1 d-flex align-items-center gap-1 bg-white common-rounded-xs shadow-xs"
                            data-bs-toggle="offcanvas" data-bs-target="#imageFolderOffcanvas" aria-controls="imageFolderOffcanvas" style="height: 30px;">
                            <i class="fa-solid fa-folder-tree text-primary" style="font-size: 0.8rem;"></i>
                            <span class="text-dark fw-semibold text-micro">폴더</span>
                        </button>

                        <div class="form-check m-0 d-flex align-items-center px-1">
                            <input class="form-check-input shadow-none cursor-pointer image-checkbox-input"
                                type="checkbox"
                                id="imageMasterCheckboxMobile"
                                onchange="toggleMasterSelect(this)"
                                style="width: 16px; height: 16px;">
                            <label class="form-check-label ms-1 text-dark fw-bold user-select-none text-micro"
                                for="imageMasterCheckboxMobile">
                                전체
                            </label>
                        </div>

                        <x-admin.image-menu-core type="dropdown" prefix="modal-mobile" />
                    </div>

                    <!-- [우측 그룹]: 보관함 선택 드롭다운 + 검색 버튼 -->
                    <div class="d-flex align-items-center gap-2 flex-shrink-0 ms-auto">
                        <div class="dropdown">
                            <button class="btn btn-light btn-sm border dropdown-toggle fw-semibold px-2 py-1 d-flex align-items-center gap-1 shadow-xs common-rounded-xs"
                                type="button" id="mobileVaultDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false" style="height: 30px;">
                                <i class="fa-solid fa-folder text-primary" id="mobileVaultIcon" style="font-size: 0.78rem;"></i>
                                <span id="mobileVaultLabel" class="text-truncate text-micro" style="max-width: 70px;">내 보관함</span>
                            </button>
                            <!-- 🌟 DAM_FEATURE_FLAGS가 감지할 수 있도록 vault-select-item 클래스 및 data-vault-tab 속성 추가 -->
                            <ul class="dropdown-menu dropdown-menu-end shadow-sm border py-1 common-rounded-dropdown" style="font-size: 0.8rem; z-index: 10075;">
                                <li>
                                    <button class="dropdown-item py-1 px-3 d-flex align-items-center gap-2 fw-semibold vault-select-item active" type="button" data-vault-tab="my" onclick="switchImageLibraryTab('my'); updateMobileVaultHeader('my');">
                                        <i class="fa-solid fa-folder text-primary"></i> 내 보관함
                                    </button>
                                </li>
                                <li>
                                    <button class="dropdown-item py-1 px-3 d-flex align-items-center gap-2 vault-select-item" type="button" data-vault-tab="library" onclick="switchImageLibraryTab('library'); updateMobileVaultHeader('library');">
                                        <i class="fa-solid fa-building-columns text-secondary"></i> 공식 라이브러리
                                    </button>
                                </li>
                                <li>
                                    <button class="dropdown-item py-1 px-3 d-flex align-items-center gap-2 vault-select-item" type="button" data-vault-tab="community" onclick="switchImageLibraryTab('community'); updateMobileVaultHeader('community');">
                                        <i class="fa-solid fa-users text-secondary"></i> 커뮤니티 공유함
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <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"
                            onclick="toggleMobileSearchBar(true)" title="파일 검색" style="width: 30px; height: 30px;">
                            <i class="fa-solid fa-magnifying-glass text-secondary text-micro"></i>
                        </button>
                    </div>
                </div>

                <!-- 모바일 검색 모드 오버레이 -->
                <div class="position-absolute top-0 start-0 w-100 h-100 bg-white d-none align-items-center px-3 gap-2" id="mobileSearchOverlay" style="z-index: 10;">
                    <div class="input-group input-group-sm flex-grow-1 shadow-xs" style="height: 34px;">
                        <span class="input-group-text bg-light border-end-0 text-muted ps-3 rounded-start-pill border-secondary border-opacity-25">
                            <i class="fa-solid fa-magnifying-glass text-micro"></i>
                        </span>
                        <input type="text" class="form-control form-control-sm border-start-0 border-end-0 shadow-none bg-light text-micro border-secondary border-opacity-25"
                            id="modalKeywordSearchMobile"
                            placeholder="검색할 파일명을 입력하세요..."
                            style="height: 34px;"
                            onkeyup="if(event.key==='Enter') fetchLibraryImages(true)">
                        <button class="btn btn-primary btn-sm px-3 fw-semibold text-micro rounded-end-pill" type="button" onclick="fetchLibraryImages(true)" style="height: 34px;">
                            검색
                        </button>
                    </div>
                    <button type="button" class="btn btn-light btn-sm border rounded-circle p-0 d-flex align-items-center justify-content-center flex-shrink-0 shadow-xs"
                        onclick="toggleMobileSearchBar(false)" title="검색 닫기" style="width: 30px; height: 30px;">
                        <i class="fa-solid fa-xmark text-secondary" style="font-size: 0.85rem;"></i>
                    </button>
                </div>
            </div>

            <!-- ===================================================================
                 4. 🌟 [PC 헤더 1단: 전체 폭 단일 행] (높이 44px)
                 - 좌측: 폴더 내비게이션(뒤로/앞으로/상위/최근) + 현재 위치 경로(여유로운 폭)
                 - 우측: 보관함 선택 드롭다운 + 보관함 상태 뱃지
                 ================================================================== -->
            <div class="d-none d-md-flex align-items-center justify-content-between px-3 border-bottom bg-white flex-shrink-0 image-top-header-row image-nav-bar-container" style="height: 44px;">
                <!-- 4.1 좌측: 폴더 내비 컨트롤 + 위치 경로 (overflow-hidden 제거!) -->
                <div class="d-flex align-items-center gap-2 flex-grow-1 me-3 position-relative" style="overflow: visible !important;">
                    <div class="d-flex align-items-center gap-1 flex-shrink-0" style="overflow: visible !important;">
                        <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 image-nav-btn"
                            id="imageNavBackBtn" onclick="navigateFolderHistory('back')" title="뒤로 가기" disabled>
                            <i class="fa-solid fa-arrow-left"></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 image-nav-btn"
                            id="imageNavForwardBtn" onclick="navigateFolderHistory('forward')" title="앞으로 가기" disabled>
                            <i class="fa-solid fa-arrow-right"></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 image-nav-btn"
                            id="imageNavUpBtn" onclick="navigateFolderUp()" title="상위 폴더로 이동" disabled>
                            <i class="fa-solid fa-arrow-up"></i>
                        </button>

                        <!-- 최근 위치 드롭다운 -->
                        <div class="dropdown d-inline-block nav-history-dropdown-group" style="overflow: visible !important;">
                            <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 image-nav-history-btn"
                                id="imageNavHistoryDropdownBtn" 
                                data-bs-toggle="dropdown" 
                                data-bs-display="static"
                                aria-expanded="false" 
                                title="최근 위치">
                                <i class="fa-solid fa-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu shadow border py-1 common-rounded-dropdown image-nav-history-menu" 
                                id="imageNavHistoryDropdownMenu">
                                <li><span class="dropdown-item-text text-muted py-2 px-3 small d-block text-center">최근 방문 위치 없음</span></li>
                            </ul>
                        </div>
                    </div>

                    <!-- 현재 폴더 위치 경로 (여기에만 overflow-hidden 및 text-truncate 유지) -->
                    <div class="text-truncate text-secondary fw-semibold px-2 flex-grow-1 image-breadcrumb-text" id="imageNavBreadcrumbText" title="현재 폴더 위치">
                        전체 이미지
                    </div>
                </div>

                <!-- 4.2 우측: 보관함 드롭다운 + 보관함 상태 안내 뱃지 -->
                <div class="d-flex align-items-center gap-2 flex-shrink-0 ms-auto">
                    <!-- 보관함 선택 드롭다운 -->
                    <div class="dropdown position-relative">
                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle fw-semibold px-3 py-1 d-flex align-items-center gap-2 bg-white common-rounded-xs shadow-xs"
                            type="button" 
                            id="pcVaultDropdownBtn" 
                            data-bs-toggle="dropdown" 
                            data-bs-display="static" 
                            aria-expanded="false" 
                            style="height: 30px;">
                            <i class="fa-solid fa-folder text-primary" id="pcVaultIcon" style="font-size: 0.8rem;"></i>
                            <span id="pcVaultLabel" class="text-dark small">내 보관함</span>
                        </button>
                        <!-- DAM_FEATURE_FLAGS가 감지할 수 있도록 vault-select-item 클래스 및 data-vault-tab 속성 추가 -->
                        <ul class="dropdown-menu dropdown-menu-end shadow-sm border py-1 common-rounded-dropdown" style="font-size: 0.82rem; z-index: 10075;">
                            <li>
                                <button class="dropdown-item py-1 px-3 d-flex align-items-center gap-2 fw-semibold vault-select-item active" type="button" data-vault-tab="my" onclick="switchImageLibraryTab('my')">
                                    <i class="fa-solid fa-folder text-primary"></i> 내 보관함
                                </button>
                            </li>
                            <li>
                                <button class="dropdown-item py-1 px-3 d-flex align-items-center gap-2 vault-select-item" type="button" data-vault-tab="library" onclick="switchImageLibraryTab('library')">
                                    <i class="fa-solid fa-building-columns text-secondary"></i> 공식 라이브러리
                                </button>
                            </li>
                            <li>
                                <button class="dropdown-item py-1 px-3 d-flex align-items-center gap-2 vault-select-item" type="button" data-vault-tab="community" onclick="switchImageLibraryTab('community')">
                                    <i class="fa-solid fa-users text-secondary"></i> 커뮤니티 공유함
                                </button>
                            </li>
                        </ul>
                    </div>

                    <!-- 권한/상태 뱃지 -->
                    <span id="imageTabPermissionBadge" 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>

            <!-- ===================================================================
                 5. 🌟 [2단 워크스페이스] 좌측 폴더 렌더링 + 우측 이미지 렌더링
                 ================================================================== -->
            <div class="modal-body p-0 d-flex overflow-hidden position-relative image-workspace-body">

                <!-- 5.0 실시간 진행 현황 오버레이 -->
                <div id="imageActionProgressOverlay" 
                    class="position-absolute top-50 start-50 translate-middle bg-white border shadow-lg p-3 text-center common-rounded-card d-none" 
                    style="z-index: 10065; min-width: 320px; pointer-events: auto;">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="small fw-bold text-dark" id="imageActionStatusText">처리 중 (0/0)...</span>
                        <span class="badge bg-danger-subtle text-danger small" id="imageActionPercentText">0%</span>
                    </div>
                    <div class="progress mb-2" style="height: 8px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" 
                            id="imageActionProgressBar" 
                            role="progressbar" 
                            style="width: 0%"></div>
                    </div>
                    <div class="text-muted text-truncate" style="font-size: 0.72rem;" id="imageActionFileName">준비 중...</div>
                </div>

                <!-- ===============================================================
                     5.1 ◀ [2단 좌측]: 폴더 렌더링 영역 (Folder Sidebar: 260px)
                     =============================================================== -->
                <div class="offcanvas-md offcanvas-start border-end bg-white d-flex flex-column flex-shrink-0 h-100 image-folder-sidebar"
                    id="imageFolderOffcanvas"
                    tabindex="-1"
                    data-is-shop="{{ auth()->user()?->shop_id ? 'true' : 'false' }}">

                    <!-- 모바일 오프캔버스 헤더 -->
                    <div class="offcanvas-header d-md-none border-bottom py-2 px-3 bg-light">
                        <h6 class="offcanvas-title fw-bold fs-6 mb-0 text-dark">
                            <i class="fa-solid fa-folder-tree me-1 text-primary"></i> 폴더 탐색
                        </h6>
                        <button type="button" class="btn-close shadow-none" data-bs-dismiss="offcanvas" data-bs-target="#imageFolderOffcanvas"></button>
                    </div>

                    <!-- 좌측 헤더: [전체 이미지] 고정 버튼 + 폴더 생성/새로고침 (높이 44px 고정) -->
                    <div class="px-2 border-bottom bg-white flex-shrink-0 d-flex align-items-center justify-content-between gap-1 image-folder-action-header" style="height: 44px;">
                        <div id="imageFolderFixedAllContainer" 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 image-nav-action-btn"
                                id="imageCreateFolderBtn" onclick="showCreateFolderInput()" title="새 폴더 생성">
                                <i class="fa-solid fa-plus text-primary"></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 image-nav-action-btn"
                                id="imageFolderRefreshBtn" onclick="fetchLibraryFolders()" title="새로고침">
                                <i class="fa-solid fa-rotate-right text-secondary"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 인라인 새 폴더 생성 박스 (동적 슬라이드) -->
                    <div id="imageCreateFolderBox" class="p-2 border-bottom bg-light d-none flex-shrink-0">
                        <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 class="flex-grow-1 overflow-auto p-2 image-folder-tree-scroll" id="imageFolderTreeContainer">
                        <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="imageFolderFixedOrphansContainer"></div>
                    </div>
                </div>

                <!-- ===============================================================
                     5.2 ▶ [2단 우측]: 이미지 렌더링 영역 (Canvas & Actionbar)
                     =============================================================== -->
                <div class="flex-grow-1 d-flex flex-column bg-transparent position-relative h-100 w-100 image-workspace-main">

                    <!-- 우측 헤더: [전체 선택] 마스터 체크박스 + 액션바 + 정렬/뷰/검색 (높이 44px 고정) -->
                    <div class="d-none d-md-flex align-items-center justify-content-between gap-2 px-1 border-bottom bg-white flex-shrink-0 image-pc-actionbar" style="height: 44px;">
                        <!-- 마스터 체크박스 & 작업 드롭다운 & 선택 카운트 -->
                        <div class="d-flex align-items-center gap-2">
                            <div class="form-check m-0 d-flex align-items-center me-2 flex-shrink-0 image-master-check-wrap">
                                <input class="form-check-input shadow-none cursor-pointer common-rounded-xs image-checkbox-input"
                                    type="checkbox"
                                    id="imageMasterCheckbox"
                                    onchange="toggleMasterSelect(this)">
                                <label class="form-check-label small ms-2 text-dark fw-semibold user-select-none image-checkbox-label"
                                    for="imageMasterCheckbox">
                                    전체 선택
                                </label>
                            </div>

                            <x-admin.image-menu-core type="dropdown" prefix="modal-pc" />

                            <span id="imageSelectedCountText" 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 ms-auto">
                            <!-- 정렬 토글 버튼 그룹 -->
                            <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="toggleImageSort('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="toggleImageSort('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="toggleImageSort('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="changeImageViewMode('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="changeImageViewMode('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="changeImageViewMode('list')" title="자세히 보기">
                                    <i class="fa-solid fa-list"></i>
                                </button>
                            </div>

                            <!-- 파일명 검색창 -->
                            <div class="input-group input-group-sm common-rounded-input image-pc-search-group" style="width: 175px; max-width: 175px; height: 30px;">
                                <input type="text" class="form-control common-rounded-start" id="modalKeywordSearch" placeholder="파일명 검색..." onkeyup="if(event.key==='Enter') fetchLibraryImages(true)">
                                <button class="btn btn-outline-secondary common-rounded-end" type="button" onclick="fetchLibraryImages(true)">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 메인 갤러리 렌더링 컨테이너 -->
                    <div class="flex-grow-1 position-relative w-100" id="modalImageContainer"></div>

                </div>
            </div>

            <!-- ===================================================================
                 6. 모달 푸터 (Modal Footer)
                 ================================================================== -->
            <div class="modal-footer border-top bg-white px-3 px-md-4 py-2 d-flex justify-content-between align-items-center flex-shrink-0">
                <!-- PC 인터랙션 단축키 안내 -->
                <div class="text-muted small d-none d-md-flex align-items-center gap-3 image-footer-interaction-guide">
                    <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-md-none text-muted small image-footer-mobile-count">
                    선택: <span class="fw-bold text-dark" id="mobileFooterCount">0</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="confirmImageSelection()">
                        선택 완료
                    </button>
                </div>
            </div>

        </div>
    </div>

    <!-- 7. 우클릭 컨텍스트 메뉴 컴포넌트 -->
    <x-admin.image-menu-core type="context" prefix="modal" />

</div>

<!-- 8. 모바일 전용 개별 이미지 액션 바텀시트 -->
<div class="offcanvas offcanvas-bottom d-md-none rounded-top-4 shadow-lg border-0 image-mobile-actionsheet"
    id="mobileImageActionSheet"
    tabindex="-1"
    aria-labelledby="mobileImageActionSheetLabel">

    <div class="d-flex justify-content-center pt-2 pb-1">
        <div class="bg-secondary bg-opacity-25 rounded-pill" style="width: 36px; height: 4px;"></div>
    </div>

    <div class="offcanvas-header py-2 px-3 border-bottom d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2 overflow-hidden me-2">
            <img id="sheetTargetThumb" src="" alt="썸네일" class="rounded border flex-shrink-0 image-actionsheet-thumb">
            <div class="overflow-hidden">
                <h6 class="offcanvas-title fw-bold text-dark text-truncate mb-0 image-actionsheet-title" id="sheetTargetFileName">파일명</h6>
                <span class="text-muted small image-actionsheet-meta" id="sheetTargetMeta">0 KB</span>
            </div>
        </div>
        <button type="button" class="btn-close shadow-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <div class="offcanvas-body p-2">
        <div class="list-group list-group-flush rounded-3">
            <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-2 px-3 border-0" onclick="triggerSheetAction('lightbox')">
                <div class="d-flex align-items-center justify-content-center text-primary rounded-circle bg-primary bg-opacity-10 image-actionsheet-icon-box">
                    <i class="fa-solid fa-expand image-actionsheet-item-icon"></i>
                </div>
                <div class="text-start">
                    <span class="fw-semibold text-dark d-block image-actionsheet-item-title">원본 크게 보기</span>
                    <span class="text-muted image-actionsheet-item-sub">라이트박스 뷰어에서 고화질 확대/축소</span>
                </div>
            </button>

            <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-2 px-3 border-0" onclick="triggerSheetAction('detail')">
                <div class="d-flex align-items-center justify-content-center text-info rounded-circle bg-info bg-opacity-10 image-actionsheet-icon-box">
                    <i class="fa-solid fa-circle-info image-actionsheet-item-icon"></i>
                </div>
                <div class="text-start">
                    <span class="fw-semibold text-dark d-block image-actionsheet-item-title">상세정보 & 메타 수정</span>
                    <span class="text-muted image-actionsheet-item-sub">타이틀, Alt 대체 텍스트, 태그, 메모 수정</span>
                </div>
            </button>

            <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-2 px-3 border-0" onclick="triggerSheetAction('rename')">
                <div class="d-flex align-items-center justify-content-center text-secondary rounded-circle bg-secondary bg-opacity-10 image-actionsheet-icon-box">
                    <i class="fa-solid fa-pen image-actionsheet-item-icon"></i>
                </div>
                <div class="text-start">
                    <span class="fw-semibold text-dark d-block image-actionsheet-item-title">이름 바꾸기</span>
                    <span class="text-muted image-actionsheet-item-sub">보관함에 표시될 파일명 변경</span>
                </div>
            </button>

            <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-2 px-3 border-0" onclick="triggerSheetAction('move')">
                <div class="d-flex align-items-center justify-content-center text-warning rounded-circle bg-warning bg-opacity-10 image-actionsheet-icon-box">
                    <i class="fa-solid fa-folder-tree image-actionsheet-item-icon"></i>
                </div>
                <div class="text-start">
                    <span class="fw-semibold text-dark d-block image-actionsheet-item-title">폴더 이동</span>
                    <span class="text-muted image-actionsheet-item-sub">지정한 하위 카테고리/폴더로 재분류</span>
                </div>
            </button>

            <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-2 px-3 border-0" onclick="triggerSheetAction('delete')">
                <div class="d-flex align-items-center justify-content-center text-danger rounded-circle bg-danger bg-opacity-10 image-actionsheet-icon-box">
                    <i class="fa-solid fa-trash-can image-actionsheet-item-icon"></i>
                </div>
                <div class="text-start">
                    <span class="fw-semibold text-danger d-block image-actionsheet-item-title">이미지 삭제</span>
                    <span class="text-muted image-actionsheet-item-sub">보관함에서 영구적으로 파일 제거</span>
                </div>
            </button>
        </div>
    </div>
</div>

<!-- 9. 상세정보 보기 & 메타 수정 독립 모달 -->
<div class="modal fade image-detail-modal-root" id="imageDetailModal" tabindex="-1" aria-labelledby="imageDetailModalLabel" aria-hidden="true">
    <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 image-nav-action-btn">
                        <i class="fa-solid fa-circle-info fs-6 text-primary"></i>
                    </div>
                    <h5 class="modal-title fw-bold text-dark m-0 fs-6" id="imageDetailModalLabel">이미지 상세정보 & 메타 수정</h5>
                </div>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

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

                <div class="modal-body p-3 p-md-4 bg-light bg-opacity-25 image-detail-modal-scroll">
                    <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 p-0 border-0 bg-transparent overflow-hidden">
                                <img id="detailPreviewImg" src="" alt="미리보기" class="rounded shadow-sm image-detail-preview-img">
                                <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">
                                <button type="button" id="detailViewOriginalBtn" class="btn btn-outline-secondary btn-sm py-1 px-2 text-decoration-none" onclick="openCurrentDetailLightbox()">
                                    <i class="fa-solid fa-expand me-1"></i>원본 크게 보기
                                </button>
                            </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 image-detail-slug-icon"></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-3 px-md-4 py-2 d-flex justify-content-between align-items-center">
                    <span class="text-muted small d-none d-sm-inline-block image-detail-notice-text">
                        <i class="fa-solid fa-shield-halved me-1 text-primary"></i> 변경된 메타데이터는 즉시 반영됩니다.
                    </span>
                    <div class="d-flex align-items-center gap-2 ms-auto">
                        <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-3 fw-semibold shadow-sm common-rounded d-none" id="btnDetailImportToVault">
                            <i class="fa-solid fa-download me-1"></i> 내 보관함으로 가져오기
                        </button>
                        <button type="submit" class="btn btn-primary btn-sm px-4 fw-semibold shadow-sm common-rounded" id="btnSubmitDetail">
                            <i class="fa-solid fa-floppy-disk me-1"></i> 수정 저장
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 10. 원본 인터랙티브 라이트박스 뷰어 모달 (컴포넌트) -->
<x-admin.image-lightbox />

<!-- 11. 카드 & 리스트 렌더링 템플릿 (컴포넌트) -->
<x-admin.image-card-templates />

<!-- 12. 모달 전역 라우트 초기화 스크립트 -->
<script>
    (function() {
        const rootEl = document.getElementById('globeauImageModal');
        const isShop = rootEl ? (rootEl.dataset.isShop === 'true' || rootEl.dataset.isShop === '1') : false;
        
        const defaultPrefix = isShop ? '/shop-admin' : '/admin';

        const propUpload = @json($uploadRoute);
        const propIndex  = @json($indexRoute);
        const propFolder = @json($folderRoute);

        // 🌟 기본 라우트(defaultImage*Route)와 현재 라우트(image*Route)를 모두 초기화하여
        //    openImageModal()이 인자 없이 호출되더라도 컴포넌트에 주입된 경로를 그대로 유지하도록 보장
        window.defaultImageUploadRoute = propUpload || window.defaultImageUploadRoute || `${defaultPrefix}/images`;
        window.defaultImageIndexRoute  = propIndex  || window.defaultImageIndexRoute  || `${defaultPrefix}/images/list`;
        window.defaultImageFolderRoute = propFolder || window.defaultImageFolderRoute || `${defaultPrefix}/image-folders`;

        window.imageUploadRoute = window.defaultImageUploadRoute;
        window.imageIndexRoute  = window.defaultImageIndexRoute;
        window.imageFolderRoute = window.defaultImageFolderRoute;
    })();
</script>