{{-- Canvas Editor Modal (Fabric.js 기반) --}}
<dialog id="ce-dialog" class="rounded-lg shadow-2xl p-0 backdrop:bg-black/50" style="max-width:90vw; max-height:90vh; border:none;">
    {{-- 헤더 --}}
    <div class="flex items-center justify-between px-3 py-2 bg-gray-100 border-b">
        <span class="text-sm font-bold text-gray-700">이미지 편집기</span>
        <div class="flex gap-1">
            <button type="button" id="ce-applyBtn" class="px-3 py-1 bg-green-600 text-white rounded text-xs hover:bg-green-700">적용</button>
            <button type="button" id="ce-closeBtn" class="px-3 py-1 bg-gray-400 text-white rounded text-xs hover:bg-gray-500">닫기</button>
        </div>
    </div>

    {{-- 도구 모음 --}}
    <div class="flex items-center gap-1 px-3 py-2 bg-gray-50 border-b flex-wrap">
        <button type="button" id="ce-polyBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="폴리라인">
            <i class="ri-pen-nib-line"></i> Poly
        </button>
        <button type="button" id="ce-freeBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="자유선">
            <i class="ri-brush-line"></i> Free
        </button>
        <button type="button" id="ce-lineBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="직선 (L키)">
            <i class="ri-subtract-line"></i> Line
        </button>
        <button type="button" id="ce-textBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="문자입력">
            <i class="ri-text"></i> Text
        </button>
        <button type="button" id="ce-eraserBtn" class="ce-tool-btn px-2 py-1 border border-yellow-400 rounded text-xs hover:bg-yellow-100" title="지우개">
            <i class="ri-eraser-line"></i> Eraser
        </button>
        <button type="button" id="ce-selectBtn" class="ce-tool-btn px-2 py-1 border rounded text-xs hover:bg-gray-200" title="선택 (Delete로 삭제)">
            <i class="ri-cursor-line"></i> Select
        </button>

        <span class="mx-1 text-gray-300">|</span>

        <label class="flex items-center gap-1 text-xs cursor-pointer">
            <input type="checkbox" id="ce-rightAngle" checked class="rounded border-gray-300">
            직각고정
        </label>

        <span class="mx-1 text-gray-300">|</span>

        <button type="button" id="ce-clearBtn" class="px-2 py-1 border border-red-300 text-red-600 rounded text-xs hover:bg-red-50">
            전체지우기
        </button>
    </div>

    {{-- 색상 + 지우개 크기 --}}
    <div class="flex items-center gap-2 px-3 py-1.5 bg-gray-50 border-b">
        <div id="ce-colors" class="flex gap-1">
            <button type="button" class="ce-color-btn w-5 h-5 rounded-full ring-2 ring-offset-1 ring-gray-800" data-color="#000000" style="background:#000"></button>
            <button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#ff0000" style="background:#f00"></button>
            <button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#0000ff" style="background:#00f"></button>
            <button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#00aa00" style="background:#0a0"></button>
            <button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#ff8800" style="background:#f80"></button>
            <button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#800080" style="background:#808"></button>
            <button type="button" class="ce-color-btn w-5 h-5 rounded-full" data-color="#888888" style="background:#888"></button>
        </div>
        <span class="text-gray-300">|</span>
        <label class="text-xs text-gray-500">지우개:</label>
        <input type="range" id="ce-eraserRange" min="5" max="100" value="20" class="w-20 h-1">
        <span id="ce-eraserSize" class="text-xs font-bold">20</span><span class="text-xs text-gray-400">px</span>
    </div>

    {{-- 캔버스 영역 --}}
    <div id="ce-body" class="relative overflow-auto bg-white" style="max-height: calc(90vh - 130px);">
        <canvas id="ce-canvas" width="400" height="300"></canvas>
    </div>
</dialog>