// /config/config.php
// /config/database.php
에디터 컨트롤러 - 인덱스 메소드가 실행되었습니다.<br><div class="hangul-editor-container min-h-screen flex flex-col">
    <!-- 상단 메뉴바 -->
    <div class="top-menu flex items-center justify-between p-2 bg-gray-800 text-white">
        <div class="flex items-center space-x-2">
            <h1 class="text-xl font-bold">한글 폰트 편집기</h1>
            <div class="menu-divider">|</div>
            
            <!-- 파일 메뉴 -->
            <div class="dropdown relative inline-block">
                <button class="px-2 py-1 hover:bg-gray-700 rounded">파일</button>
                <div class="dropdown-content hidden absolute left-0 mt-1 bg-white shadow-lg rounded text-black z-10">
                    <a href="#" id="newProject" class="block px-4 py-2 hover:bg-gray-200">새 프로젝트</a>
                    <a href="#" id="openProject" class="block px-4 py-2 hover:bg-gray-200">프로젝트 열기</a>
                    <a href="#" id="saveProject" class="block px-4 py-2 hover:bg-gray-200">프로젝트 저장</a>
                    <hr class="my-1 border-gray-300">
                    <a href="#" id="exportFont" class="block px-4 py-2 hover:bg-gray-200">폰트 내보내기</a>
                </div>
            </div>
            
            <!-- 편집 메뉴 -->
            <div class="dropdown relative inline-block">
                <button class="px-2 py-1 hover:bg-gray-700 rounded">편집</button>
                <div class="dropdown-content hidden absolute left-0 mt-1 bg-white shadow-lg rounded text-black z-10">
                    <a href="#" id="undoAction" class="block px-4 py-2 hover:bg-gray-200">실행 취소 (Ctrl+Z)</a>
                    <a href="#" id="redoAction" class="block px-4 py-2 hover:bg-gray-200">다시 실행 (Ctrl+Shift+Z)</a>
                    <hr class="my-1 border-gray-300">
                    <a href="#" id="cutAction" class="block px-4 py-2 hover:bg-gray-200">잘라내기 (Ctrl+X)</a>
                    <a href="#" id="copyAction" class="block px-4 py-2 hover:bg-gray-200">복사 (Ctrl+C)</a>
                    <a href="#" id="pasteAction" class="block px-4 py-2 hover:bg-gray-200">붙여넣기 (Ctrl+V)</a>
                    <a href="#" id="deleteAction" class="block px-4 py-2 hover:bg-gray-200">삭제 (Del)</a>
                </div>
            </div>
            
            <!-- 보기 메뉴 -->
            <div class="dropdown relative inline-block">
                <button class="px-2 py-1 hover:bg-gray-700 rounded">보기</button>
                <div class="dropdown-content hidden absolute left-0 mt-1 bg-white shadow-lg rounded text-black z-10">
                    <a href="#" id="zoomIn" class="block px-4 py-2 hover:bg-gray-200">확대 (Ctrl++)</a>
                    <a href="#" id="zoomOut" class="block px-4 py-2 hover:bg-gray-200">축소 (Ctrl+-)</a>
                    <a href="#" id="resetZoom" class="block px-4 py-2 hover:bg-gray-200">원래 크기 (Ctrl+0)</a>
                    <hr class="my-1 border-gray-300">
                    <a href="#" id="toggleGrid" class="block px-4 py-2 hover:bg-gray-200">그리드 표시</a>
                    <a href="#" id="toggleGuides" class="block px-4 py-2 hover:bg-gray-200">가이드라인 표시</a>
                </div>
            </div>
            
            <!-- 도구 메뉴 -->
            <div class="dropdown relative inline-block">
                <button class="px-2 py-1 hover:bg-gray-700 rounded">도구</button>
                <div class="dropdown-content hidden absolute left-0 mt-1 bg-white shadow-lg rounded text-black z-10">
                    <a href="#" id="openSettings" class="block px-4 py-2 hover:bg-gray-200">설정</a>
                    <a href="#" id="openLibrary" class="block px-4 py-2 hover:bg-gray-200">컴포넌트 라이브러리</a>
                    <hr class="my-1 border-gray-300">
                    <a href="#" id="openHangulTester" class="block px-4 py-2 hover:bg-gray-200">한글 미리보기</a>
                </div>
            </div>
            
            <!-- 도움말 메뉴 -->
            <div class="dropdown relative inline-block">
                <button class="px-2 py-1 hover:bg-gray-700 rounded">도움말</button>
                <div class="dropdown-content hidden absolute left-0 mt-1 bg-white shadow-lg rounded text-black z-10">
                    <a href="#" id="openHelp" class="block px-4 py-2 hover:bg-gray-200">사용 설명서</a>
                    <a href="#" id="aboutProgram" class="block px-4 py-2 hover:bg-gray-200">프로그램 정보</a>
                </div>
            </div>
        </div>
        
        <!-- 빠른 액션 버튼 -->
        <div class="flex items-center space-x-2">
            <button id="undoButton" class="px-2 py-1 text-gray-400 hover:text-white disabled:text-gray-600" disabled>
                <i class="fas fa-undo"></i>
            </button>
            <button id="redoButton" class="px-2 py-1 text-gray-400 hover:text-white disabled:text-gray-600" disabled>
                <i class="fas fa-redo"></i>
            </button>
            <div class="menu-divider">|</div>
            <button id="saveButton" class="px-2 py-1 hover:bg-gray-700 rounded">
                <i class="fas fa-save"></i> 저장
            </button>
            <button id="exportButton" class="px-2 py-1 hover:bg-gray-700 rounded">
                <i class="fas fa-file-export"></i> 내보내기
            </button>
        </div>
    </div>
    
    <!-- 메인 작업 영역 -->
    <div class="main-workspace flex flex-1 overflow-hidden">
        <!-- 좌측 레이어 패널 -->
        <div class="left-panel w-52 bg-white border-r border-gray-300 flex flex-col">
            <div class="panel-header p-2 border-b border-gray-300 bg-gray-100">
                <h3 class="font-semibold">레이어</h3>
            </div>
            <div class="layer-controls flex space-x-1 p-2 border-b border-gray-300">
                <button id="addLayer" class="bg-gray-500 text-white px-2 py-1 rounded text-sm hover:bg-gray-600">
                    <i class="fas fa-plus"></i>
                </button>
                <button id="removeLayer" class="bg-red-500 text-white px-2 py-1 rounded text-sm hover:bg-red-600">
                    <i class="fas fa-minus"></i>
                </button>
                <button id="duplicateLayer" class="bg-blue-500 text-white px-2 py-1 rounded text-sm hover:bg-blue-600">
                    <i class="fas fa-copy"></i>
                </button>
                <button id="moveLayerUp" class="bg-gray-500 text-white px-2 py-1 rounded text-sm hover:bg-gray-600">
                    <i class="fas fa-arrow-up"></i>
                </button>
                <button id="moveLayerDown" class="bg-gray-500 text-white px-2 py-1 rounded text-sm hover:bg-gray-600">
                    <i class="fas fa-arrow-down"></i>
                </button>
            </div>
            <ul id="layerList" class="layer-list flex-1 overflow-y-auto p-1">
                <li id="guideLayerItem" class="flex items-center space-x-2 p-1 hover:bg-gray-200 rounded">
                    <input type="checkbox" checked data-layer="guideLayer">
                    <span class="cursor-pointer" ondblclick="editor.editLayerName(this)">가이드 선</span>
                </li>
                <!-- 레이어 항목은 자바스크립트로 동적 생성 -->
            </ul>
            
            <!-- 한글 자모 선택기 -->
            <div class="hangul-selector p-2 border-t border-gray-300 bg-gray-100">
                <h3 class="font-semibold mb-1">한글 선택</h3>
                <div class="flex space-x-1 mb-1">
                    <button id="prevChar" class="bg-gray-300 px-2 py-1 rounded hover:bg-gray-400">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <input type="text" id="currentChar" class="border px-2 py-1 w-12 text-center" value="가" maxlength="1">
                    <button id="nextChar" class="bg-gray-300 px-2 py-1 rounded hover:bg-gray-400">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="jamo-selector grid grid-cols-5 gap-1">
                    <!-- 초성 선택기 -->
                    <div class="jamo-group col-span-5 mb-1">
                        <div class="text-xs text-gray-600">초성</div>
                        <div class="grid grid-cols-5 gap-1">
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄱ">ㄱ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄲ">ㄲ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄴ">ㄴ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄷ">ㄷ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄸ">ㄸ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄹ">ㄹ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅁ">ㅁ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅂ">ㅂ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅃ">ㅃ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅅ">ㅅ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅆ">ㅆ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅇ">ㅇ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅈ">ㅈ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅉ">ㅉ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅊ">ㅊ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅋ">ㅋ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅌ">ㅌ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅍ">ㅍ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅎ">ㅎ</button>
                        </div>
                    </div>
                    
                    <!-- 중성 선택기 -->
                    <div class="jamo-group col-span-5 mb-1">
                        <div class="text-xs text-gray-600">중성</div>
                        <div class="grid grid-cols-5 gap-1">
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅏ">ㅏ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅐ">ㅐ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅑ">ㅑ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅒ">ㅒ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅓ">ㅓ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅔ">ㅔ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅕ">ㅕ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅖ">ㅖ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅗ">ㅗ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅘ">ㅘ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅙ">ㅙ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅚ">ㅚ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅛ">ㅛ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅜ">ㅜ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅝ">ㅝ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅞ">ㅞ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅟ">ㅟ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅠ">ㅠ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅡ">ㅡ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅢ">ㅢ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅣ">ㅣ</button>
                        </div>
                    </div>
                    
                    <!-- 종성 선택기 -->
                    <div class="jamo-group col-span-5">
                        <div class="text-xs text-gray-600">종성</div>
                        <div class="grid grid-cols-5 gap-1">
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="">없음</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄱ">ㄱ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄲ">ㄲ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄳ">ㄳ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄴ">ㄴ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄵ">ㄵ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄶ">ㄶ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄷ">ㄷ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄹ">ㄹ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄺ">ㄺ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄻ">ㄻ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄼ">ㄼ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄽ">ㄽ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄾ">ㄾ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㄿ">ㄿ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅀ">ㅀ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅁ">ㅁ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅂ">ㅂ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅄ">ㅄ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅅ">ㅅ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅆ">ㅆ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅇ">ㅇ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅈ">ㅈ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅊ">ㅊ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅋ">ㅋ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅌ">ㅌ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅍ">ㅍ</button>
                            <button class="jamo-btn bg-gray-200 px-1 py-0.5 rounded text-sm hover:bg-gray-300" data-jamo="ㅎ">ㅎ</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 중앙 캔버스 영역 -->
        <div class="center-workspace relative flex-1 bg-gray-100 overflow-auto">
            <!-- 툴바 -->
            <div class="toolbar fixed top-2 left-2 bg-white rounded shadow-md flex flex-col p-1 space-y-1 z-10">
                <button class="tool-button active p-2 rounded hover:bg-gray-200" data-tool="select" title="선택 도구 (V)">
                    <i class="fas fa-mouse-pointer"></i>
                </button>
                <button class="tool-button p-2 rounded hover:bg-gray-200" data-tool="pen" title="펜 도구 (P)">
                    <i class="fas fa-pen"></i>
                </button>
                <button class="tool-button p-2 rounded hover:bg-gray-200" data-tool="shape" title="도형 도구 (S)">
                    <i class="fas fa-shapes"></i>
                </button>
                <button class="tool-button p-2 rounded hover:bg-gray-200" data-tool="text" title="텍스트 도구 (T)">
                    <i class="fas fa-font"></i>
                </button>
                <button class="tool-button p-2 rounded hover:bg-gray-200" data-tool="transform" title="변형 도구 (Q)">
                    <i class="fas fa-vector-square"></i>
                </button>
                <button class="tool-button p-2 rounded hover:bg-gray-200" data-tool="hand" title="손 도구 (H)">
                    <i class="fas fa-hand-paper"></i>
                </button>
                <div class="border-t border-gray-300 my-1"></div>
                <button id="zoomInBtn" class="p-2 rounded hover:bg-gray-200" title="확대 (Ctrl++)">
                    <i class="fas fa-search-plus"></i>
                </button>
                <button id="zoomOutBtn" class="p-2 rounded hover:bg-gray-200" title="축소 (Ctrl+-)">
                    <i class="fas fa-search-minus"></i>
                </button>
                <button id="zoomResetBtn" class="p-2 rounded hover:bg-gray-200" title="100% (Ctrl+0)">
                    <i class="fas fa-expand"></i>
                </button>
            </div>
            
            <!-- 도형 유형 선택 툴바 (도형 도구 선택 시 표시) -->
            <div id="shapeToolbar" class="shape-toolbar absolute top-2 left-14 bg-white rounded shadow-md p-1 space-x-1 hidden">
                <button class="shape-type-button active p-2 rounded hover:bg-gray-200" data-shape="rect" title="사각형">
                    <i class="fas fa-square"></i>
                </button>
                <button class="shape-type-button p-2 rounded hover:bg-gray-200" data-shape="circle" title="원">
                    <i class="fas fa-circle"></i>
                </button>
                <button class="shape-type-button p-2 rounded hover:bg-gray-200" data-shape="line" title="선">
                    <i class="fas fa-slash"></i>
                </button>
                <button class="shape-type-button p-2 rounded hover:bg-gray-200" data-shape="triangle" title="삼각형">
                    <i class="fas fa-play"></i>
                </button>
            </div>
            
            <!-- 변형 모드 선택 툴바 (변형 도구 선택 시 표시) -->
            <div id="transformToolbar" class="transform-toolbar absolute top-2 left-14 bg-white rounded shadow-md flex p-1 space-x-1 hidden">
                <button class="transform-mode-button active p-2 rounded hover:bg-gray-200" data-mode="move" title="이동">
                    <i class="fas fa-arrows-alt"></i>
                </button>
                <button class="transform-mode-button p-2 rounded hover:bg-gray-200" data-mode="scale" title="크기 조정">
                    <i class="fas fa-expand-arrows-alt"></i>
                </button>
                <button class="transform-mode-button p-2 rounded hover:bg-gray-200" data-mode="rotate" title="회전">
                    <i class="fas fa-sync-alt"></i>
                </button>
                <button class="transform-mode-button p-2 rounded hover:bg-gray-200" data-mode="skew" title="비틀기">
                    <i class="fas fa-italic"></i>
                </button>
            </div>
            
            <!-- 배경격자 -->
            <div class="editor-background w-full h-full flex items-center justify-center p-4">
                <!-- SVG 에디터 -->
                <svg id="editor" class="border border-gray-400 shadow-lg bg-white" viewBox="0 0 400 500" width="800" height="1000">
                    <defs>
                        <pattern id="grid" width="15" height="15" patternUnits="userSpaceOnUse">
                            <path d="M 15 0 L 0 0 0 15" fill="none" stroke="blue" stroke-width="0.5" stroke-opacity="0.3"/>
                        </pattern>
                    </defs>
                    <rect width="100%" height="100%" fill="url(#grid)" />
                    
                    <!-- 가이드 레이어 -->
                    <g id="guideLayer">
                        <rect id="baseSizeBox" width="400" height="500" fill="none" stroke="black" />
                        <rect id="startMarker" x="0" y="0" width="10" height="10" fill="black" />
                        <rect id="endMarker" x="390" y="490" width="10" height="10" fill="none" stroke="black" stroke-width="1" />
                        <line id="baseline" class="stroke-red-500 stroke-2" x1="0" y1="333" x2="400" y2="333" />
                        <circle id="baselineHandle" class="handle" cx="200" cy="333" r="5" fill="white" stroke="red" />
                        <line id="topLine" class="stroke-blue-500 stroke-2" x1="0" y1="100" x2="400" y2="100" />
                        <circle id="topHandle" class="handle" cx="200" cy="100" r="5" fill="white" stroke="blue" />
                        <line id="leftLine" class="stroke-green-500 stroke-2" x1="100" y1="0" x2="100" y2="500" />
                        <circle id="leftHandle" class="handle" cx="100" cy="250" r="5" fill="white" stroke="green" />
                        <line id="rightLine" class="stroke-green-500 stroke-2" x1="300" y1="0" x2="300" y2="500" />
                        <circle id="rightHandle" class="handle" cx="300" cy="250" r="5" fill="white" stroke="green" />
                    </g>
                    
                    <!-- 작업 레이어 (컴포넌트들이 추가되는 곳) -->
                    <g id="layers">
                        <g id="layer1" class="characterBox">
                            <g id="chosung" data-shape="rect">
                                <rect class="box fill-white fill-opacity-50 stroke-black stroke-2 cursor-move" x="84" y="49" width="201" height="197" />
                                <rect class="resizeHandle fill-white stroke-black stroke-2 cursor-se-resize" x="275" y="236" width="10" height="10" />
                                <text x="94" y="69" class="pointer-events-none font-sans text-sm">초성</text>
                                <g class="rotationControl">
                                    <line class="garez stroke-black stroke-1" x1="275" y1="246" x2="295" y2="246" />
                                    <line class="seroz stroke-black stroke-1" x1="285" y1="236" x2="285" y2="256" />
                                    <circle class="rotateHandle" cx="285" cy="246" r="5" fill="white" stroke="black" cursor="pointer" />
                                </g>
                            </g>
                            <g id="jungsung1" data-shape="rect">
                                <rect class="box fill-white fill-opacity-50 stroke-black stroke-2 cursor-move" x="84" y="225" width="213" height="69" />
                                <rect class="resizeHandle fill-white stroke-black stroke-2 cursor-se-resize" x="287" y="284" width="10" height="10" />
                                <text x="94" y="245" class="pointer-events-none font-sans text-sm">중성1</text>
                                <g class="rotationControl">
                                    <line class="garez stroke-black stroke-1" x1="287" y1="294" x2="307" y2="294" />
                                    <line class="seroz stroke-black stroke-1" x1="297" y1="284" x2="297" y2="304" />
                                    <circle class="rotateHandle" cx="297" cy="294" r="5" fill="white" stroke="black" cursor="pointer" />
                                </g>
                            </g>
                            <g id="jungsung2" data-shape="rect" style="display:none;">
                                <rect class="box fill-white fill-opacity-50 stroke-black stroke-2 cursor-move" x="258" y="50" width="90" height="216" />
                                <rect class="resizeHandle fill-white stroke-black stroke-2 cursor-se-resize" x="338" y="256" width="10" height="10" />
                                <text x="268" y="70" class="pointer-events-none font-sans text-sm">중성2</text>
                                <g class="rotationControl">
                                    <line class="garez stroke-black stroke-1" x1="338" y1="266" x2="358" y2="266" />
                                    <line class="seroz stroke-black stroke-1" x1="348" y1="256" x2="348" y2="276" />
                                    <circle class="rotateHandle" cx="348" cy="266" r="5" fill="white" stroke="black" cursor="pointer" />
                                </g>
                            </g>
                            <g id="jongsung" data-shape="rect" style="display:none;">
                                <rect class="box fill-white fill-opacity-50 stroke-black stroke-2 cursor-move" x="163" y="277" width="175" height="111" />
                                <rect class="resizeHandle fill-white stroke-black stroke-2 cursor-se-resize" x="328" y="378" width="10" height="10" />
                                <text x="173" y="297" class="pointer-events-none font-sans text-sm">종성</text>
                                <g class="rotationControl">
                                    <line class="garez stroke-black stroke-1" x1="328" y1="388" x2="348" y2="388" />
                                    <line class="seroz stroke-black stroke-1" x1="338" y1="378" x2="338" y2="398" />
                                    <circle class="rotateHandle" cx="338" cy="388" r="5" fill="white" stroke="black" cursor="pointer" />
                                </g>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        
        <!-- 우측 속성 패널 -->
        <div class="right-panel w-52 bg-white border-l border-gray-300 flex flex-col">
            <div class="panel-header p-2 border-b border-gray-300 bg-gray-100">
                <h3 class="font-semibold">속성</h3>
            </div>
            
            <!-- 글꼴 설정 -->
            <div class="font-settings p-2 border-b border-gray-300">
                <h4 class="font-medium text-sm mb-1">폰트 기본 설정</h4>
                <div class="grid grid-cols-2 gap-1">
                    <label class="text-xs">
                        <span>너비:</span>
                        <input id="fontWidth" type="number" class="border p-1 w-full text-sm" value="400">
                    </label>
                    <label class="text-xs">
                        <span>높이:</span>
                        <input id="fontHeight" type="number" class="border p-1 w-full text-sm" value="500">
                    </label>
                    <label class="text-xs">
                        <span>폰트명:</span>
                        <input id="fontName" type="text" class="border p-1 w-full text-sm" value="한글폰트">
                    </label>
                    <label class="text-xs">
                        <span>제작자:</span>
                        <input id="authorName" type="text" class="border p-1 w-full text-sm" value="사용자">
                    </label>
                </div>
                <button id="applyFontSettings" class="mt-1 bg-blue-500 text-white px-2 py-1 rounded text-xs hover:bg-blue-600 w-full">
                    설정 적용
                </button>
            </div>
            
            <!-- 레이아웃 세트 -->
            <div class="layout-sets p-2 border-b border-gray-300">
                <h4 class="font-medium text-sm mb-1">레이아웃 세트</h4>
                <div class="grid grid-cols-3 gap-1">
                    <button id="loadSet1" class="bg-gray-200 px-2 py-1 rounded text-xs hover:bg-gray-300">세트 1</button>
                    <button id="loadSet2" class="bg-gray-200 px-2 py-1 rounded text-xs hover:bg-gray-300">세트 2</button>
                    <button id="loadSet3" class="bg-gray-200 px-2 py-1 rounded text-xs hover:bg-gray-300">세트 3</button>
                    <button id="loadSet4" class="bg-gray-200 px-2 py-1 rounded text-xs hover:bg-gray-300">세트 4</button>
                    <button id="loadSet5" class="bg-gray-200 px-2 py-1 rounded text-xs hover:bg-gray-300">세트 5</button>
                    <button id="loadSet6" class="bg-gray-200 px-2 py-1 rounded text-xs hover:bg-gray-300">세트 6</button>
                </div>
                <div class="flex mt-1 space-x-1">
                    <button id="saveCurrentSet" class="bg-green-500 text-white px-2 py-1 rounded text-xs hover:bg-green-600 flex-1">
                        현재 세트 저장
                    </button>
                    <button id="updateAllSets" class="bg-purple-500 text-white px-2 py-1 rounded text-xs hover:bg-purple-600 flex-1">
                        모든 세트 업데이트
                    </button>
                </div>
            </div>
            
            <!-- 컴포넌트 속성 (선택한 컴포넌트가 있을 때 표시) -->
            <div id="componentList" class="component-properties flex-1 overflow-y-auto p-2">
                <!-- 컴포넌트 속성 컨트롤은 자바스크립트로 동적 생성 -->
            </div>
            
            <!-- 작업 정보 -->
            <div class="work-info p-2 border-t border-gray-300 text-xs bg-gray-100">
                <div id="positionInfo">위치: x=0, y=0</div>
                <div id="selectionInfo">선택: 없음</div>
            </div>
        </div>
    </div>
    
    <!-- 하단 패널 -->
    <div class="bottom-panel flex items-center justify-center space-x-4 p-2 bg-gray-800 text-white">
        <button class="add-shape bg-gray-700 px-3 py-1 rounded hover:bg-gray-600" data-shape="line">선</button>
        <button class="add-shape bg-gray-700 px-3 py-1 rounded hover:bg-gray-600" data-shape="triangle">삼각형</button>
        <button class="add-shape bg-gray-700 px-3 py-1 rounded hover:bg-gray-600" data-shape="rect">사각형</button>
        <button class="add-shape bg-gray-700 px-3 py-1 rounded hover:bg-gray-600" data-shape="circle">원</button>
        <button id="addTextElement" class="bg-gray-700 px-3 py-1 rounded hover:bg-gray-600">텍스트</button>
        <div class="border-l border-gray-600 h-6 mx-2"></div>
        <button id="showJson" class="bg-blue-700 px-3 py-1 rounded hover:bg-blue-600">JSON 보기</button>
        <button id="saveJson" class="bg-green-700 px-3 py-1 rounded hover:bg-green-600">JSON 저장</button>
    </div>
    
    <!-- JSON 출력 영역 (기본적으로 숨김) -->
    <div id="jsonOutputContainer" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white p-4 rounded-lg shadow-lg w-3/4 max-w-4xl max-h-screen flex flex-col">
            <div class="flex justify-between items-center mb-2">
                <h3 class="text-lg font-bold">JSON 데이터</h3>
                <button id="closeJsonOutput" class="text-gray-700 hover:text-red-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <textarea id="jsonOutput" class="w-full h-96 border border-gray-300 p-2 text-sm font-mono" readonly></textarea>
            <div class="flex justify-end space-x-2 mt-2">
                <button id="copyJson" class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600">
                    <i class="fas fa-copy mr-1"></i> 복사
                </button>
                <button id="downloadJson" class="bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">
                    <i class="fas fa-download mr-1"></i> 다운로드
                </button>
            </div>
        </div>
    </div>
    
    <!-- 모달 대화상자 -->
    <div id="modalContainer" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white p-4 rounded-lg shadow-lg max-w-md w-full">
            <div class="flex justify-between items-center mb-4">
                <h3 id="modalTitle" class="text-lg font-bold">대화상자</h3>
                <button id="closeModal" class="text-gray-700 hover:text-red-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="modalContent" class="mb-4">
                <!-- 모달 내용은 자바스크립트로 동적 생성 -->
            </div>
            <div id="modalButtons" class="flex justify-end space-x-2">
                <button id="modalCancel" class="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400">취소</button>
                <button id="modalConfirm" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">확인</button>
            </div>
        </div>
    </div>
</div>

<!-- 스크립트 파일 -->
<script src="/2/public/js/core/error-handler.js"></script>
<script src="/2/public/js/core/app.js"></script>
<script src="/2/public/js/editor/editor.js"></script>
<script src="/2/public/js/editor/component-manager.js"></script>
<script src="/2/public/js/editor/tools.js"></script>
<script src="/2/public/js/editor/hangul-layout-manager.js"></script>
<script src="/2/public/js/core/event-handler.js"></script>

<!-- 초기화 스크립트 -->
<script>
document.addEventListener('DOMContentLoaded', async function() {
    try {
        // 필요한 모든 스크립트가 로드될 때까지 대기
        while (typeof Editor === 'undefined' || typeof HangulLayoutManager === 'undefined') {
            await new Promise(resolve => setTimeout(resolve, 100));
        }
        
        // 에디터 초기화
        window.editor = new Editor({
            svgId: 'editor',
            width: 400,
            height: 500
        });
        
        // 한글 레이아웃 관리자 초기화
        window.hangulManager = new HangulLayoutManager(window.editor);
        
        // 도구 및 이벤트 초기화
        initializeEventHandlers();
        
        // 드롭다운 메뉴 초기화
        initializeDropdowns();
        
        // 초기 문자 설정
        const initialChar = document.getElementById('currentChar').value;
        if (initialChar) {
            hangulManager.setupForCharacter(initialChar);
        }
    } catch (err) {
        console.error('초기화 오류:', err);
        alert('에디터 초기화 중 오류가 발생했습니다.');
    }
});

// 드롭다운 메뉴 초기화
function initializeDropdowns() {
    document.querySelectorAll('.dropdown > button').forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation(); // 이벤트 전파 중단
            const content = this.nextElementSibling;
            
            // 현재 드롭다운의 상태
            const isHidden = content.classList.contains('hidden');
            
            // 모든 드롭다운 닫기
            document.querySelectorAll('.dropdown-content').forEach(dropdown => {
                dropdown.classList.add('hidden');
            });
            
            // 현재 드롭다운 토글
            if (isHidden) {
                content.classList.remove('hidden');
            }
        });
    });
    
    // 문서 클릭 시 모든 드롭다운 닫기
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.dropdown')) {
            document.querySelectorAll('.dropdown-content').forEach(dropdown => {
                dropdown.classList.add('hidden');
            });
        }
    });
    
    // 드롭다운 항목 클릭 시 메뉴 닫기
    document.querySelectorAll('.dropdown-content a').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            this.closest('.dropdown-content').classList.add('hidden');
        });
    });
}

// 이벤트 초기화
function initializeEventHandlers() {
    // 도구 선택 버튼
    document.querySelectorAll('.tool-button').forEach(button => {
        button.addEventListener('click', function() {
            const tool = this.dataset.tool;
            editor.setActiveTool(tool);
            updateToolbarState(tool);
        });
    });
    
    // 도형 유형 선택 버튼
    document.querySelectorAll('.shape-type-button').forEach(button => {
        button.addEventListener('click', function() {
            const shape = this.dataset.shape;
            editor.tools.shape.setShapeType(shape);
            
            // 버튼 활성화 상태 변경
            document.querySelectorAll('.shape-type-button').forEach(btn => {
                btn.classList.toggle('active', btn === this);
            });
        });
    });
    
    // 변형 모드 선택 버튼
    document.querySelectorAll('.transform-mode-button').forEach(button => {
        button.addEventListener('click', function() {
            const mode = this.dataset.mode;
            editor.tools.transform.setMode(mode);
            
            // 버튼 활성화 상태 변경
            document.querySelectorAll('.transform-mode-button').forEach(btn => {
                btn.classList.toggle('active', btn === this);
            });
        });
    });
    
    // 줌 버튼
    document.getElementById('zoomInBtn').addEventListener('click', () => {
        editor.zoomCanvas(1.1);
    });
    
    document.getElementById('zoomOutBtn').addEventListener('click', () => {
        editor.zoomCanvas(0.9);
    });
    
    document.getElementById('zoomResetBtn').addEventListener('click', () => {
        const viewBox = editor.svg.viewBox.baseVal;
        editor.svg.setAttribute('viewBox', `0 0 ${editor.config.width} ${editor.config.height}`);
    });
    
    // 저장 및 JSON 관련 버튼
    document.getElementById('showJson').addEventListener('click', () => {
        try {
            const jsonData = editor.generateJsonData();
            const jsonOutput = document.getElementById('jsonOutput');
            jsonOutput.value = JSON.stringify(JSON.parse(jsonData), null, 2); // 포맷팅 적용
            document.getElementById('jsonOutputContainer').classList.remove('hidden');
        } catch (err) {
            console.error('JSON 생성 오류:', err);
            alert('JSON 데이터 생성 중 오류가 발생했습니다.');
        }
    });
    
    document.getElementById('closeJsonOutput').addEventListener('click', () => {
        document.getElementById('jsonOutputContainer').classList.add('hidden');
    });
    
    document.getElementById('copyJson').addEventListener('click', () => {
        const jsonOutput = document.getElementById('jsonOutput');
        jsonOutput.select();
        document.execCommand('copy');
        alert('JSON이 클립보드에 복사되었습니다.');
    });
    
    document.getElementById('downloadJson').addEventListener('click', () => {
        const jsonData = document.getElementById('jsonOutput').value;
        const fontName = document.getElementById('fontName').value || '한글폰트';
        const filename = `${fontName.replace(/\s+/g, '_')}_${Date.now()}.json`;
        
        const blob = new Blob([jsonData], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    });
    
    document.getElementById('saveJson').addEventListener('click', async () => {
        try {
            await editor.saveJson();
        } catch (err) {
            console.error('JSON 저장 오류:', err);
            alert('JSON 저장 중 오류가 발생했습니다.');
        }
    });
    
    // 레이아웃 세트 버튼
    for (let i = 1; i <= 6; i++) {
        const button = document.getElementById(`loadSet${i}`);
        if (button) {
            button.addEventListener('click', () => {
                hangulManager.applyLayoutSet(`set${i}`);
            });
        }
    }
    
    document.getElementById('saveCurrentSet').addEventListener('click', () => {
        // 현재 선택된 세트에 저장
        const currentSet = hangulManager.currentSet;
        const layout = hangulManager.saveLayoutSet(currentSet);
        alert(`현재 레이아웃이 ${currentSet}에 저장되었습니다.`);
    });
    
    document.getElementById('updateAllSets').addEventListener('click', () => {
        if (confirm('현재 레이아웃을 모든 세트에 적용하시겠습니까?')) {
            const layout = hangulManager.getCurrentLayout();
            
            for (let i = 1; i <= 6; i++) {
                hangulManager.layoutSets[`set${i}`] = JSON.parse(JSON.stringify(layout));
            }
            
            alert('모든 세트가 업데이트되었습니다.');
        }
    });
    
    // 폰트 설정 적용 버튼
    document.getElementById('applyFontSettings').addEventListener('click', () => {
        const width = parseInt(document.getElementById('fontWidth').value);
        const height = parseInt(document.getElementById('fontHeight').value);
        
        // 에디터 크기 업데이트
        editor.config.width = width;
        editor.config.height = height;
        
        // 기본 상자 크기 업데이트
        document.getElementById('baseSizeBox').setAttribute('width', width);
        document.getElementById('baseSizeBox').setAttribute('height', height);
        
        // 가이드라인 업데이트
        document.getElementById('baseline').setAttribute('x2', width);
        document.getElementById('topLine').setAttribute('x2', width);
        document.getElementById('leftLine').setAttribute('y2', height);
        document.getElementById('rightLine').setAttribute('y2', height);
        
        // 마커 위치 업데이트
        document.getElementById('endMarker').setAttribute('x', width - 10);
        document.getElementById('endMarker').setAttribute('y', height - 10);
        
        // 뷰포트 업데이트
        editor.svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
        
        alert('폰트 설정이 적용되었습니다.');
    });
    
    // 한글 문자 변경 관련
    document.getElementById('currentChar').addEventListener('input', function(e) {
        const value = this.value;
        if (!value) return;
        
        // 한글 유효성 검사
        const lastChar = value.charAt(value.length - 1);
        if (!/[가-힣]/.test(lastChar)) {
            this.value = value.length > 1 ? value.charAt(0) : '가';
            return;
        }
        
        // 한 글자 제한
        if (value.length > 1) {
            this.value = lastChar;
        }
        
        // 한글 처리
        if (/[가-힣]/.test(this.value)) {
            try {
                hangulManager.setupForCharacter(this.value);
            } catch (err) {
                console.error('한글 처리 오류:', err);
                this.value = '가';
                hangulManager.setupForCharacter('가');
            }
        }
    });
    
    document.getElementById('prevChar').addEventListener('click', () => {
        const current = document.getElementById('currentChar').value;
        if (current && current.length === 1) {
            const code = current.charCodeAt(0);
            if (code > 0xAC00) { // '가'보다 크면
                const prevChar = String.fromCharCode(code - 1);
                document.getElementById('currentChar').value = prevChar;
                hangulManager.setupForCharacter(prevChar);
            }
        }
    });
    
    document.getElementById('nextChar').addEventListener('click', () => {
        const current = document.getElementById('currentChar').value;
        if (current && current.length === 1) {
            const code = current.charCodeAt(0);
            if (code < 0xD7A3) { // '힣'보다 작으면
                const nextChar = String.fromCharCode(code + 1);
                document.getElementById('currentChar').value = nextChar;
                hangulManager.setupForCharacter(nextChar);
            }
        }
    });
    
    // 자모 버튼 클릭 시 문자 조합
    document.querySelectorAll('.jamo-btn').forEach(button => {
        button.addEventListener('click', function() {
            const jamo = this.dataset.jamo;
            const jamoType = this.closest('.jamo-group').querySelector('.text-gray-600').textContent.trim();
            
            // 현재 문자 분해
            const currentChar = document.getElementById('currentChar').value;
            if (!currentChar || !/[가-힣]/.test(currentChar)) {
                // 유효한 한글이 아니면 기본 문자로 시작
                document.getElementById('currentChar').value = '가';
                hangulManager.setupForCharacter('가');
                return;
            }
            
            const decomposed = hangulManager.decomposeHangul(currentChar);
            if (!decomposed) return;
            
            // 새 자모로 업데이트
            if (jamoType === '초성') {
                decomposed.chosung = jamo;
            } else if (jamoType === '중성') {
                decomposed.jungsung = jamo;
                decomposed.jungsungType = hangulManager.getJungsungType(jamo);
            } else if (jamoType === '종성') {
                decomposed.jongsung = jamo;
                decomposed.hasJongsung = jamo !== '';
            }
            
            // 새 문자 합성 (간단한 방식으로 구현, 실제로는 더 복잡함)
            const chosungIndex = hangulManager.jamoCode.chosung.indexOf(decomposed.chosung);
            const jungsungIndex = hangulManager.jamoCode.jungsung.indexOf(decomposed.jungsung);
            const jongsungIndex = hangulManager.jamoCode.jongsung.indexOf(decomposed.jongsung);
            
            if (chosungIndex !== -1 && jungsungIndex !== -1 && jongsungIndex !== -1) {
                const code = 0xAC00 + chosungIndex * 21 * 28 + jungsungIndex * 28 + jongsungIndex;
                const newChar = String.fromCharCode(code);
                document.getElementById('currentChar').value = newChar;
                
                // 적절한 레이아웃 세트 선택 및 적용
                const setName = hangulManager.selectLayoutSet(decomposed);
                hangulManager.applyLayoutSet(setName);
            }
        });
    });
    
    // 텍스트 요소 추가 버튼
    document.getElementById('addTextElement').addEventListener('click', () => {
        editor.setActiveTool('text');
        const center = {
            x: editor.config.width / 2 - 50,
            y: editor.config.height / 2 - 15
        };
        editor.tools.text.addTextElement(center.x, center.y);
    });
}

// 툴바 상태 관리 개선
function updateToolbarState(tool) {
    // 모든 툴바 숨기기
    document.getElementById('shapeToolbar').classList.add('hidden');
    document.getElementById('transformToolbar').classList.add('hidden');
    
    // 활성 도구에 따라 해당 툴바 표시
    if (tool === 'shape') {
        document.getElementById('shapeToolbar').classList.remove('hidden');
    } else if (tool === 'transform') {
        document.getElementById('transformToolbar').classList.remove('hidden');
    }
    
    // 도구 버튼 상태 업데이트
    document.querySelectorAll('.tool-button').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.tool === tool);
    });
}
</script>