<!-- 주소록 모달 -->
<div id="addressBookModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 850px;">
        <div class="modal-header">
            <h3>공사 관계자 주소록</h3>
            <div class="flex-center" style="gap:10px;">
                <button class="_button-small" style="border:none;" onclick="toggleAddContactForm()">+ 추가하기</button>
                <span class="modal-close" onclick="closeAddressBook()">&times;</span>
            </div>
        </div>

        <!-- 주소록 추가 폼 (기본 숨김) -->
        <div id="addContactForm"
            style="display:none; background:var(--bg-muted); padding:15px; border-radius:8px; margin-bottom:15px; border:1px solid var(--border-color);">
            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:10px;">
                <input type="text" id="newContactName" placeholder="성명"
                    style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                <input type="text" id="newContactDept" placeholder="소속/직위"
                    style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                <input type="text" id="newContactEmail" placeholder="이메일"
                    style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
                <input type="text" id="newContactPhone" placeholder="연락처"
                    style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
            </div>
            <div class="flex-center" style="gap:8px;">
                <button class="_button-medium" style="flex:1; background:var(--primary-color); color:#fff;"
                    onclick="addContact()">저장</button>
                <button class="_button-medium" style="flex:1; background:#718096; color:#fff;"
                    onclick="toggleAddContactForm()">취소</button>
            </div>
        </div>

        <div class="search-bar" style="background:#fff; padding:0 0 15px 0;">
            <input type="text" placeholder="이름, 부서, 연락처 검색..." style="margin-bottom:8px; height: 32px;">
        </div>
        <div style="max-height: 400px; overflow-y: auto;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>성명</th>
                        <th>소속/직위</th>
                        <th>이메일</th>
                        <th>연락처</th>
                        <th style="text-align:right;">관리</th>
                    </tr>
                </thead>
                <tbody id="addressBookBody">
                    <!-- 동적으로 렌더링됨 -->
                </tbody>
            </table>
        </div>
        <button class="btn-confirm" style="margin-top:20px;" onclick="closeAddressBook()">닫기</button>
    </div>
</div>
