<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- Main body -->
<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title"></div>
                <button type="button" id="btn_add" class="newbtn bg1">신규</button>
                <button type="button" id="btn_delete" class="newbtn bg2">삭제</button>
                <button type="button" id="btn_refresh" class="newbtn bg3">새로고침</button>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <div class="gs_booking">
            <div class="row">
                <!-- 메뉴 트리 영역 -->
                <div class="col-sm-4">
                    <div class="box_column">
                        <ul class="box_title">
                            <li class="tit">메뉴 트리</li>
                            <li class="rig">
                                <button id="expandAllBtn" class="newbtn bg1">전체 펼치기</button>
                                <button id="collapseAllBtn" class="newbtn bg1">전체 접기</button>
                            </li>
                        </ul>
                        <div class="containers">
                            <div class="menu-tree-wrapper">
                                <ul id="menuTree" class="ztree"></ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 메뉴 정보 영역 -->
                <div class="col-sm-8">
                    <div class="box_column">
                        <ul class="box_title">
                            <li class="tit">메뉴 정보</li>
                        </ul>
                        <div class="containers">
                            <div id="menuForm" style="display: none;">
                                <div class="forms_table_non">
                                    <form id="menuDataForm" name="menuDataForm">
                                        <table>
                                            <tr>
                                                <th class="th"><span class="required">*</span> 메뉴명</th>
                                                <td>
                                                    <input type="hidden" id="menuId" name="menuId" value="" />
                                                    <input type="text" id="menuNm" name="menuNm" class="input" maxlength="100" validation-check="required" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="th">메뉴 설명</th>
                                                <td>
                                                    <textarea id="menuDc" name="menuDc" class="input" maxlength="200"></textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="th"><span class="required">*</span> 상위 메뉴</th>
                                                <td>
                                                    <input type="hidden" id="upperMenuId" name="upperMenuId" validation-check="required" />
                                                    <input type="text" id="upperMenuNmText" name="upperMenuNmText" class="input" readonly />
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="th">메뉴 레벨</th>
                                                <td>
                                                    <input type="number" id="menuLevel" name="menuLevel" class="input" min="1" max="5" value="1" readonly />
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="th">메뉴 순서</th>
                                                <td>
                                                    <input type="number" id="sortOrdr" name="sortOrdr" class="input" min="1" value="1" validation-check="number" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="th">메뉴 URL</th>
                                                <td>
                                                    <input type="text" id="menuUrl" name="menuUrl" class="input" maxlength="200" validation-check="url" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="th">URL 패턴</th>
                                                <td>
                                                    <input type="text" id="urlPattern" name="urlPattern" class="input" maxlength="200" placeholder="예: /system/menu/*" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="th">메뉴 아이콘</th>
                                                <td>
                                                    <div class="icon-input-wrapper">
                                                        <input type="text" id="menuIcon" name="menuIcon" class="input" maxlength="100" readonly />
                                                        <div class="icon-select-layer" style="display: none;">
                                                            <div class="icon-select-header">
                                                                <input type="text" id="iconSearch" class="input" placeholder="아이콘 검색..." />
                                                                <button type="button" class="icon-close-btn">&times;</button>
                                                            </div>
                                                            <div class="icon-grid">
                                                                <!-- 아이콘 목록이 여기에 동적으로 추가됩니다 -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="th"><span class="required">*</span> 사용 여부</th>
                                                <td>
                                                    <label class="radio-inline">
                                                        <input type="radio" id="useYn_Y" name="useYn" value="Y" ${empty menu.useYn eq 'Y' ? 'checked' : ''} validation-check="required"> 사용
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input type="radio" id="useYn_N" name="useYn" value="N" ${menu.useYn eq 'N' ? 'checked' : ''} validation-check="required"> 미사용
                                                    </label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="th"><span class="required">*</span> 화면 표시 여부</th>
                                                <td>
                                                    <label class="radio-inline">
                                                        <input type="radio" id="viewYn_Y" name="viewYn" value="Y" ${empty menu.viewYn or menu.useYn eq 'Y' ? 'checked' : ''} validation-check="required"> 사용
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input type="radio" id="viewYn_N" name="viewYn" value="N" ${menu.viewYn eq 'N' ? 'checked' : ''} validation-check="required"> 미사용
                                                    </label>
                                                </td>
                                            </tr>
                                        </table>
                                        <div class="btn-group center">
                                            <button type="button" id="btn_save" class="newbtn bg4">저장</button>
                                            <button type="button" id="btn_cancel" class="newbtn bg1">취소</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Main body -->

<link rel="stylesheet" type="text/css" href="<c:url value='/css/zTreeStyle.css' />">
<script type="text/javascript" src="<c:url value='/js/jquery.ztree.core-3.5.js' />" ></script>
<script type="text/javascript" src="<c:url value='/js/jquery.ztree.excheck-3.5.js' />" ></script>
<script type="text/javascript" src="<c:url value='/js/jquery.ztree.exedit-3.5.js' />" ></script>
<!-- Feather Icons -->
<script src="<c:url value='/plugins/feather-icons/feather.min.js'/>"></script>
<script src="<c:url value='/xit/feather-icons.js'/>"></script>

<script type="text/javascript">
/**
 * 메뉴 목록 관리 모듈
 * 메뉴 목록을 트리 구조로 표시하고 관리하는 기능을 제공합니다.
 */
(function(window, $) {
    'use strict';

    /**
     * 메뉴 목록 관리 네임스페이스
     */
    var MenuList = {
        /**
         * 현재 선택된 메뉴 노드
         */
        selectedNode: null,

        /**
         * 트리 설정
         */
        treeSetting: {
            view: {
                selectedMulti: false,
                nameIsHTML: false,
                showLine: true,
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "menuId",
                    pIdKey: "upperMenuId",
                    rootPId: null
                },
                key: {
                    name: "menuNm"
                }
            },
            callback: {
                onClick: function(event, treeId, treeNode) {
                    MenuList.selectNode(treeNode);
                }
            }
        },

        /**
         * 메뉴 트리 초기화
         */
        initMenuTree: function() {
            var self = this;

            // 메뉴 트리 데이터 로드
            $.ajax({
                url: '<c:url value="/system/menu/tree.ajax"/>',
                type: 'POST',
                data: $('#schForm').serialize(),
                dataType: 'json',
                success: function(response) {
                    if (response.result) {
                        // 트리 초기화
                        var zTreeObj = $.fn.zTree.init($("#menuTree"), self.treeSetting, unescapeHtml(response.data));

                        // 트리 전체 펼치기
                        zTreeObj.expandAll(true);

                    } else {
                        alert(response.message || '메뉴 트리 로드에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 노드 선택 처리
         */
        selectNode: function(treeNode) {
            this.selectedNode = treeNode;
            this.showMenuForm(treeNode);

            // 에러 메시지 초기화
            $('.error-message').remove();
            $('.input-error').removeClass('input-error');

            // ROOT 메뉴 선택 시 수정, 삭제, 저장 버튼 비활성화
            if (treeNode && treeNode.menuId === 'ROOT') {
                $('#btn_delete').addClass('disabled').prop('disabled', true);
                //$('#btn_save').addClass('disabled').prop('disabled', true);
            } else {
                $('#btn_delete').removeClass('disabled').prop('disabled', false);
                //$('#btn_save').removeClass('disabled').prop('disabled', false);
            }
        },

        /**
         * 메뉴 폼 표시
         */
        showMenuForm: function(menuData) {
            // 폼 초기화
            this.resetMenuForm();

            // 에러 메시지 초기화
            $('.error-message').remove();
            $('.input-error').removeClass('input-error');

            // 메뉴 데이터가 있으면 폼에 데이터 설정
            if (menuData) {
                var isNew = !menuData.menuId;
                var upperMenuId = menuData.upperMenuId || '';
                var upperMenuNm = '';

                $('#menuId').val(menuData.menuId);
                $('#menuNm').val(menuData.menuNm);
                $('#menuDc').val(menuData.menuDc);
                $('#upperMenuId').val(upperMenuId);
                $('#menuLevel').val(menuData.menuLevel);
                $('#sortOrdr').val(menuData.sortOrdr);
                $('#menuUrl').val(unescapeHtml(menuData.menuUrl));
                $('#urlPattern').val(unescapeHtml(menuData.urlPattern));
                $('#menuIcon').val(menuData.menuIcon);

                // 상위 메뉴 텍스트 설정
                if (upperMenuId === 'ROOT') {
                    upperMenuNm = 'ROOT';
                } else if (upperMenuId) {
                    // 상위 메뉴 이름 찾기
                    var zTreeObj = $.fn.zTree.getZTreeObj("menuTree");
                    if (zTreeObj) {
                        var node = zTreeObj.getNodeByParam("menuId", upperMenuId);
                        if (node) {
                            upperMenuNm = node.menuNm;
                        }
                    }

                    // 상위 메뉴 이름이 없으면 menuData에서 가져오기
                    if (!upperMenuNm && menuData.upperMenuNm) {
                        upperMenuNm = menuData.upperMenuNm;
                    }
                }

                // upperMenuNmText만 표출
                $('#upperMenuNmText').val(upperMenuNm);

                // 라디오 버튼 설정
                $('input[name="useYn"][value="' + (menuData.useYn || 'Y') + '"]').prop('checked', true);
                $('input[name="viewYn"][value="' + (menuData.viewYn || 'Y') + '"]').prop('checked', true);

                // 메뉴 레벨에 따라 메뉴 아이콘 행 표시/숨김 처리
                var menuLevel = parseInt(menuData.menuLevel) || 0;
                if (menuLevel === 1) {
                    // ROOT 바로 아래 depth(1단계)일 경우에만 메뉴 아이콘 입력 가능
                    $('tr:has(#menuIcon)').show();
                } else {
                    // 그 외의 경우(2단계 이상)에는 메뉴 아이콘 항목 숨김
                    $('tr:has(#menuIcon)').hide();
                }
            }

            // 폼 표시
            $('#menuForm').show();
        },

        /**
         * 메뉴 폼 초기화
         */
        resetMenuForm: function() {
            $('#menuDataForm')[0].reset();
            $('#menuId').val('');
        },

        /**
         * 메뉴 저장
         */
        saveMenu: function() {
            var self = this;
            var menuId = $('#menuId').val();
            var isNew = !menuId;

            // 폼 유효성 검사
            if (!validateFormByAttributes('menuDataForm')) {
                return;
            }

            // 폼 데이터
            var formData = {
                menuId: menuId,
                menuNm: $('#menuNm').val(),
                menuDc: $('#menuDc').val(),
                upperMenuId: $('#upperMenuId').val() || null,
                upperMenuNm: $('#upperMenuNmText').val() || null,
                menuLevel: $('#menuLevel').val(),
                sortOrdr: $('#sortOrdr').val(),
                menuUrl: $('#menuUrl').val(),
                urlPattern: $('#urlPattern').val(),
                menuIcon: $('#menuIcon').val(),
                useYn: $('input[name="useYn"]:checked').val(),
                viewYn: $('input[name="viewYn"]:checked').val()
            };

            // AJAX 요청 URL 설정
            var url = isNew ? 
                '<c:url value="/system/menu/register.ajax"/>' : 
                '<c:url value="/system/menu/edit.ajax"/>';

            // AJAX 요청
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.result) {
                        alert(response.message || (isNew ? '메뉴가 성공적으로 등록되었습니다.' : '메뉴 정보가 성공적으로 수정되었습니다.'));
                        self.refreshMenuTree();
                    } else {
                        alert(response.message || '메뉴 저장에 실패했습니다.');
                    }
                }
            });
        },

        /**
         * 메뉴 삭제
         */
        deleteMenu: function() {
            var self = this;

            if (!this.selectedNode) {
                alert('삭제할 메뉴를 선택해주세요.');
                return;
            }

            if (confirm('선택한 메뉴를 삭제하시겠습니까?')) {
                $.ajax({
                    url: '<c:url value="/system/menu/delete.ajax"/>',
                    type: 'POST',
                    data: { menuId: this.selectedNode.menuId },
                    dataType: 'json',
                    success: function(response) {
                        if (response.result) {
                            alert('메뉴가 성공적으로 삭제되었습니다.');
                            self.refreshMenuTree();
                        } else {
                            alert(response.message || '메뉴 삭제에 실패했습니다.');
                        }
                    }
                });
            }
        },

        /**
         * 메뉴 트리 새로고침
         */
        refreshMenuTree: function() {
            this.selectedNode = null;
            $('#menuForm').hide();
            this.initMenuTree();
        },

        /**
         * 상위 메뉴 선택에 따른 메뉴 레벨 설정
         */
        setMenuLevelByUpperMenu: function() {
            var upperMenuId = $('#upperMenuId').val();

            if (upperMenuId === 'ROOT') {
                // 상위 메뉴가 ROOT이면 1레벨
                $('#menuLevel').val(1);
            } else if (!upperMenuId) {
                // 상위 메뉴가 없으면 0레벨 (ROOT 메뉴)
                $('#menuLevel').val(0);
            } else {
                // 상위 메뉴가 있으면 상위 메뉴의 레벨 + 1
                // 트리에서 상위 메뉴 노드를 찾아 레벨 정보를 가져옴
                var zTreeObj = $.fn.zTree.getZTreeObj("menuTree");
                var upperMenuLevel = 1; // 기본값

                if (zTreeObj) {
                    var node = zTreeObj.getNodeByParam("menuId", upperMenuId);
                    if (node) {
                        upperMenuLevel = node.menuLevel || 1;
                    }
                }

                $('#menuLevel').val(upperMenuLevel + 1);
            }
        },

        /**
         * 이벤트 핸들러 설정
         */
        bindEvents: function() {
            var self = this;

            // 검색 버튼 클릭 이벤트
            $('#search_btn').on('click', function() {
                self.refreshMenuTree();
            });

            // 전체 펼치기 버튼 클릭 이벤트
            $('#expandAllBtn').on('click', function() {
                var zTreeObj = $.fn.zTree.getZTreeObj("menuTree");
                if (zTreeObj) {
                    zTreeObj.expandAll(true);
                }
            });

            // 전체 접기 버튼 클릭 이벤트
            $('#collapseAllBtn').on('click', function() {
                var zTreeObj = $.fn.zTree.getZTreeObj("menuTree");
                if (zTreeObj) {
                    zTreeObj.expandAll(false);
                }
            });

            // 등록 버튼 클릭 이벤트
            $('#btn_add').on('click', function() {
                // 현재 선택된 노드가 있으면 그 노드를 상위 메뉴로 설정
                var upperMenuId = 'ROOT';
                var upperMenuNm = 'ROOT';
                var menuLevel = 1;
                var menuId = $.trim($("#menuId").val());
                var menuNm = $.trim($("#menuNm").val());
                if ((self.selectedNode && self.selectedNode.menuId !== 'ROOT') ||
                    (self.selectedNode && menuId && menuNm
                    && menuId !== "ROOT" && menuNm !== "ROOT")
                ) {
                    upperMenuId = self.selectedNode.menuId;
                    upperMenuNm = self.selectedNode.menuNm;
                    menuLevel = self.selectedNode.menuLevel + 1;
                }

                // 신규 등록 모드로 설정
                self.selectedNode = null;

                // 폼 표시
                self.showMenuForm({
                    upperMenuId: upperMenuId,
                    upperMenuNm: upperMenuNm,
                    menuLevel: menuLevel,
                    sortOrdr: 1,
                    useYn: 'Y',
                    viewYn: 'Y'
                });
            });

            // 삭제 버튼 클릭 이벤트
            $('#btn_delete').on('click', function() {
                self.deleteMenu();
            });

            // 새로고침 버튼 클릭 이벤트
            $('#btn_refresh').on('click', function() {
                self.refreshMenuTree();
            });

            // 저장 버튼 클릭 이벤트
            $('#btn_save').on('click', function() {
                self.saveMenu();
            });

            // 취소 버튼 클릭 이벤트
            $('#btn_cancel').on('click', function() {
                if (self.selectedNode) {
                    self.showMenuForm(self.selectedNode);
                } else {
                    $('#menuForm').hide();
                }
            });

            // 상위 메뉴 선택 시 메뉴 레벨 자동 설정
            $('#upperMenuId').on('change', function() {
                self.setMenuLevelByUpperMenu();
            });
        },

        /**
         * 모듈 초기화
         */
        init: function() {
            // 메뉴 트리 초기화
            this.initMenuTree();

            // 이벤트 핸들러 설정
            this.bindEvents();

            // 초기 상태에서는 버튼 활성화 (메뉴 선택 전)
            $('#btn_delete').removeClass('disabled').prop('disabled', false);
            $('#btn_save').removeClass('disabled').prop('disabled', false);
        }
    };

    // 페이지 로드 시 초기화
    $(function() {
        MenuList.init();
    });

    // 전역 네임스페이스에 모듈 노출
    window.MenuList = MenuList;

})(window, jQuery);

/**
 * Feather 아이콘 관리 모듈
 */
(function(window, $) {
    'use strict';

    var FeatherIconManager = {
        /**
         * 아이콘 목록
         */
        icons: FeatherIcons.icons,

        /**
         * 아이콘 카드 초기화
         */
        init: function() {
            // 오버레이 추가
            if (!$('.icon-overlay').length) {
                $('body').append('<div class="icon-overlay"></div>');
            }
            this.renderIcons();
            this.bindEvents();
            feather.replace();
        },

        /**
         * 아이콘 목록 렌더링
         */
        renderIcons: function(filterText) {
            var self = this;
            var $iconGrid = $('.icon-grid');
            $iconGrid.empty();

            var filteredIcons = this.icons;
            if (filterText) {
                filterText = filterText.toLowerCase();
                filteredIcons = this.icons.filter(function(icon) {
                    return icon.name.toLowerCase().includes(filterText) || 
                           icon.title.toLowerCase().includes(filterText);
                });
            }

            // 그리드 컨테이너 생성
            var $gridContainer = $('<div>');

            filteredIcons.forEach(function(icon) {
                var $iconItem = $('<div>')
                    .addClass('icon-item')
                    .attr('title', icon.title)
                    .click(function(e) {
                        e.stopPropagation();
                        $('#menuIcon').val(icon.name);
                        $('.icon-item.selected').removeClass('selected');
                        $(this).addClass('selected');
                        self.hideIconLayer();
                    });

                var $icon = $('<i>')
                    .attr('data-feather', icon.name);

                var $title = $('<div>')
                    .addClass('icon-title')
                    .text(icon.title);

                $iconItem.append($icon).append($title);
                $gridContainer.append($iconItem);
            });

            $iconGrid.append($gridContainer);
            feather.replace();
        },

        /**
         * 아이콘 레이어 표시
         */
        showIconLayer: function() {
            $('.icon-overlay').fadeIn(200);
            $('.icon-select-layer').fadeIn(200);
            // 현재 선택된 아이콘이 있으면 하이라이트
            var currentIcon = $('#menuIcon').val();
            if (currentIcon) {
                $('.icon-item').removeClass('selected');
                $('.icon-item').each(function() {
                    if ($(this).find('i').attr('data-feather') === currentIcon) {
                        $(this).addClass('selected');
                    }
                });
            }
        },

        /**
         * 아이콘 레이어 숨기기
         */
        hideIconLayer: function() {
            $('.icon-select-layer').fadeOut(200);
            $('.icon-overlay').fadeOut(200);
        },

        /**
         * 이벤트 바인딩
         */
        bindEvents: function() {
            var self = this;
            var $iconLayer = $('.icon-select-layer');
            var $menuIcon = $('#menuIcon');

            // 메뉴 아이콘 입력 필드 클릭 시 레이어 표시
            $menuIcon.on('click', function(e) {
                e.stopPropagation();
                self.showIconLayer();
            });

            // 아이콘 검색
            $('#iconSearch').on('input', function(e) {
                e.stopPropagation();
                self.renderIcons($(this).val());
            });

            // 닫기 버튼 클릭
            $('.icon-close-btn').on('click', function(e) {
                e.stopPropagation();
                self.hideIconLayer();
            });

            // 오버레이 클릭 시 레이어 닫기
            $('.icon-overlay').on('click', function() {
                self.hideIconLayer();
            });

            // ESC 키 입력 시 레이어 닫기
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape' && $iconLayer.is(':visible')) {
                    self.hideIconLayer();
                }
            });
        }
    };

    // 페이지 로드 시 초기화
    $(function() {
        FeatherIconManager.init();
    });

    // 전역 네임스페이스에 모듈 노출
    window.FeatherIconManager = FeatherIconManager;

})(window, jQuery);
</script>

<style>
.icon-input-wrapper {
    position: relative;
    display: inline-block;
}

.icon-select-layer {
    position: fixed;  /* absolute에서 fixed로 변경 */
    top: 50%;        /* 중앙 정렬을 위한 위치 조정 */
    left: 50%;
    transform: translate(-50%, -50%);  /* 정확한 중앙 정렬 */
    z-index: 9999;   /* 최상위 레이어로 표시 */
    width: 800px;    /* 너비 증가 */
    height: 600px;   /* 높이 지정 */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.icon-select-header {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.icon-select-header input {
    flex: 1;
    margin-right: 10px;
    padding: 8px 12px;
    font-size: 14px;
}

.icon-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.icon-close-btn:hover {
    color: #333;
}

.icon-grid {
    height: calc(100% - 60px);  /* 헤더 높이를 제외한 나머지 영역 */
    overflow-y: auto;
    padding: 20px;
}

.icon-grid::-webkit-scrollbar {
    width: 8px;
}

.icon-grid::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.icon-grid::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}

.icon-grid::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;  /* 아이콘 아이템 크기 증가 */
    text-align: center;
    padding: 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: all 0.2s;
    background: #fff;
}

.icon-item:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.icon-item.selected {
    background-color: #e3f2fd !important;
    border-color: #2196f3 !important;
    box-shadow: 0 2px 12px rgba(33,150,243,0.2);
}

.icon-item i {
    color: #666;
    width: 32px;     /* 아이콘 크기 증가 */
    height: 32px;
    stroke-width: 1.5;
}

.icon-item:hover i {
    color: #2196f3;
}

.icon-item.selected i {
    color: #2196f3;
}

.icon-item .icon-title {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    word-break: break-word;
    max-width: 100%;
}

/* 그리드 컨테이너 스타일 */
.icon-grid > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));  /* 아이템 크기 증가 */
    gap: 15px;
    padding: 5px;
}

/* 반투명 오버레이 추가 */
.icon-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
}

/* 메뉴 트리 스타일 추가 */
.menu-tree-wrapper {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
}

.menu-tree-wrapper::-webkit-scrollbar {
    width: 8px;
}

.menu-tree-wrapper::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.menu-tree-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}

.menu-tree-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
}

.btn-group {
    display: flex;
    gap: 5px;
}

.btn-group .newbtn {
    padding: 5px 10px;
    font-size: 12px;
}
</style>
