<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>코드 그룹 정보</title>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <script th:src="@{/js/web/jquery.min.js}"></script>
    <style>
        .pop_wrap {
            max-width: 500px;
            margin: 0 auto;
        }

        .pop_wrap h3 {
            font-size: 16px;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3985EA;
            color: #333;
        }

        .board_write {
            width: 100%;
            border-collapse: collapse;
        }

        .board_write th {
            background: #f8f9fb;
            padding: 10px 12px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: #555;
            border: 1px solid #e9ecf0;
            white-space: nowrap;
        }

        .board_write td {
            padding: 8px 12px;
            border: 1px solid #e9ecf0;
        }

        .board_write input[type="text"] {
            width: 100%;
            height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0 8px;
            font-size: 13px;
            box-sizing: border-box;
        }

        .ess {
            color: #ff0000;
        }

        .pop_btn_area {
            text-align: center;
            margin-top: 20px;
        }

        .btn_blue {
            padding: 8px 24px;
            background: #3985EA;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        .btn_blue:hover {
            background: #2c6fd1;
        }

        .btn_gray {
            padding: 8px 24px;
            background: #fff;
            color: #666;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            margin-left: 6px;
        }

        .btn_gray:hover {
            background: #f5f5f5;
        }

        .btn_red {
            padding: 8px 24px;
            background: #ff4444;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-left: 6px;
        }

        .btn_red:hover {
            background: #cc0000;
        }

        textarea {
            width: 100%;
            height: 60px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px;
            font-size: 13px;
            box-sizing: border-box;
            resize: none;
        }

        select {
            height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0 8px;
            font-size: 13px;
        }
    </style>
</head>

<body style="padding: 20px;">
    <div class="pop_wrap">
        <h3 id="popTitle">코드 그룹 등록</h3>
        <input type="hidden" id="pid" value="">
        <input type="hidden" id="storePid" value="1">

        <table class="board_write">
            <colgroup>
                <col width="120px">
                <col width="*">
            </colgroup>
            <tbody>
                <tr>
                    <th><span class="ess">*</span> 그룹 ID</th>
                    <td><input type="text" id="grpCd" placeholder="영문/숫자 고유 ID (예: DEPTH_CD)"></td>
                </tr>
                <tr>
                    <th><span class="ess">*</span> 그룹 명칭</th>
                    <td><input type="text" id="grpNm" placeholder="예: 시술부위 분류"></td>
                </tr>
                <tr>
                    <th>설명</th>
                    <td><textarea id="grpDesc" placeholder="설명을 입력하세요"></textarea></td>
                </tr>
                <tr>
                    <th>사용 여부</th>
                    <td>
                        <select id="listUse">
                            <option value="y">사용 (Y)</option>
                            <option value="n">미사용 (N)</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="pop_btn_area">
            <button type="button" class="btn_blue" id="btn_save">저장</button>
            <button type="button" class="btn_red" id="btn_delete" style="display:none;">삭제</button>
            <button type="button" class="btn_gray" id="btn_close">닫기</button>
        </div>
    </div>

    <script th:src="@{/js/web/settings/code/popup/codeGroupPop.js}"></script>
</body>

</html>