{{-- 사용자 정보 모달 --}}
<div id="user-modal"
     class="hidden fixed inset-0 z-50 overflow-y-auto"
     aria-labelledby="user-modal-title"
     role="dialog"
     aria-modal="true">

    {{-- 배경 오버레이 --}}
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

    {{-- 모달 컨테이너 --}}
    <div class="flex min-h-full items-start justify-center p-4 pt-16">
        <div class="relative bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[85vh] flex flex-col">

            {{-- 모달 헤더 --}}
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 flex-shrink-0">
                <h2 id="user-modal-title" class="text-xl font-semibold text-gray-800">
                    사용자 정보
                </h2>
                <button type="button"
                        onclick="UserModal.close()"
                        class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            {{-- 모달 콘텐츠 --}}
            <div id="user-modal-content" class="flex-1 overflow-y-auto">
                {{-- 콘텐츠는 JS로 로드됨 --}}
                <div class="flex items-center justify-center h-64">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                </div>
            </div>

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