refactor: SQL 쿼리 관리 모듈화 및 메일 관리 UI/UX 고도화

backups/crawler_service_v1_dom.py.bak

@@ -1,141 +0,0 @@
-import os
-import re
-import asyncio
-import json
-from playwright.async_api import async_playwright
-from dotenv import load_dotenv
-
-load_dotenv()
-
-async def run_crawler_service():
-    """
-    Playwright를 이용해 데이터를 수집하고 SSE(Server-Sent Events)용 제너레이터를 반환합니다.
-    """
-    user_id = os.getenv("PM_USER_ID")
-    password = os.getenv("PM_PASSWORD")
-
-    if not user_id or not password:
-        yield f"data: {json.dumps({'type': 'log', 'message': '오류: .env 파일에 계정 정보가 없습니다.'})}\n\n"
-        return
-
-    results = []
-
-    async with async_playwright() as p:
-        browser = None
-        try:
-            yield f"data: {json.dumps({'type': 'log', 'message': '브라우저 실행 중...'})}\n\n"
-            browser = await p.chromium.launch(headless=True, args=[
-                "--no-sandbox", 
-                "--disable-dev-shm-usage",
-                "--disable-blink-features=AutomationControlled"
-            ])
-            context = await browser.new_context(
-                viewport={'width': 1920, 'height': 1080},
-                user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
-            )
-            page = await context.new_page()
-
-            yield f"data: {json.dumps({'type': 'log', 'message': '사이트 접속 및 로그인 중...'})}\n\n"
-            await page.goto("https://overseas.projectmastercloud.com/", wait_until="domcontentloaded")
-            
-            await page.click("#login-by-id", timeout=10000)
-            await page.fill("#user_id", user_id)
-            await page.fill("#user_pw", password)
-            await page.click("#login-btn")
-
-            yield f"data: {json.dumps({'type': 'log', 'message': '대시보드 목록 대기 중...'})}\n\n"
-            await page.wait_for_selector("h4.list__contents_aria_group_body_list_item_label", timeout=60000)
-
-            locators = page.locator("h4.list__contents_aria_group_body_list_item_label")
-            count = await locators.count()
-            yield f"data: {json.dumps({'type': 'log', 'message': f'총 {count}개의 프로젝트 발견. 수집 시작.'})}\n\n"
-
-            for i in range(count):
-                try:
-                    proj = page.locator("h4.list__contents_aria_group_body_list_item_label").nth(i)
-                    project_name = (await proj.inner_text()).strip()
-                    
-                    yield f"data: {json.dumps({'type': 'log', 'message': f'[{i+1}/{count}] {project_name} - 시작'})}\n\n"
-                    await proj.scroll_into_view_if_needed()
-                    await proj.click(force=True)
-                    
-                    await asyncio.sleep(5)
-                    await page.wait_for_selector("div.footer", state="visible", timeout=20000)
-                    
-                    recent_log = "기존데이터유지"
-                    file_count = 0
-                    
-                    # 로그 수집
-                    try:
-                        log_btn_sel = "body > div.footer > div.left > div.wrap.log-wrap > div.title.text"
-                        log_btn = page.locator(log_btn_sel).first
-                        if await log_btn.is_visible(timeout=5000):
-                            await log_btn.click(force=True)
-                            await asyncio.sleep(5)
-                            
-                            date_sel = "article.archive-modal .log-body .date .text"
-                            user_sel = "article.archive-modal .log-body .user .text"
-                            act_sel = "article.archive-modal .log-body .activity .text"
-                            
-                            if await page.locator(date_sel).count() > 0:
-                                raw_date = (await page.locator(date_sel).first.inner_text()).strip()
-                                user_name = (await page.locator(user_sel).first.inner_text()).strip()
-                                activity = (await page.locator(act_sel).first.inner_text()).strip()
-                                formatted_date = re.sub(r'[-/]', '.', raw_date)[:10]
-                                recent_log = f"{formatted_date}, {user_name}, {activity}"
-                                yield f"data: {json.dumps({'type': 'log', 'message': f'   - [로그] 수집 완료'})}\n\n"
-                            
-                            await page.click("article.archive-modal div.close", timeout=3000)
-                            await asyncio.sleep(1.5)
-                    except: pass
-                    
-                    # 구성 수집
-                    try:
-                        sitemap_btn_sel = "body > div.footer > div.left > div.wrap.site-map-wrap"
-                        sitemap_btn = page.locator(sitemap_btn_sel).first
-                        if await sitemap_btn.is_visible(timeout=5000):
-                            await sitemap_btn.click(force=True)
-                            
-                            popup_page = None
-                            for _ in range(20):
-                                for p_item in context.pages:
-                                    if "composition" in p_item.url:
-                                        popup_page = p_item
-                                        break
-                                if popup_page: break
-                                await asyncio.sleep(0.5)
-                            
-                            if popup_page:
-                                target_selector = "#composition-list h6:nth-child(3)"
-                                await asyncio.sleep(5) # 로딩 대기
-                                locators_h6 = popup_page.locator(target_selector)
-                                h6_count = await locators_h6.count()
-                                current_total = 0
-                                for j in range(h6_count):
-                                    text = (await locators_h6.nth(j).inner_text()).strip()
-                                    nums = re.findall(r'\d+', text.split('\n')[-1])
-                                    if nums: current_total += int(nums[0])
-                                file_count = current_total
-                                yield f"data: {json.dumps({'type': 'log', 'message': f'   - [구성] {file_count}개 확인'})}\n\n"
-                                await popup_page.close()
-                    except: pass
-
-                    results.append({"projectName": project_name, "recentLog": recent_log, "fileCount": file_count})
-                    
-                    # 홈 복귀
-                    await page.locator("div.header div.title div").first.click(force=True)
-                    await page.wait_for_selector("h4.list__contents_aria_group_body_list_item_label", timeout=20000)
-                    await asyncio.sleep(2)
-                    
-                except Exception:
-                    await page.goto("https://overseas.projectmastercloud.com/dashboard", wait_until="domcontentloaded")
-
-            yield f"data: {json.dumps({'type': 'done', 'data': results})}\n\n"
-            
-        except GeneratorExit:
-            # SSE 연결이 클라이언트 측에서 먼저 끊겼을 때 실행
-            if browser: await browser.close()
-        except Exception as e:
-            yield f"data: {json.dumps({'type': 'log', 'message': f'치명적 오류: {str(e)}'})}\n\n"
-        finally:
-            if browser: await browser.close()

crawler_service.py

@@ -10,6 +10,7 @@ import pymysql
 from datetime import datetime
 from playwright.async_api import async_playwright
 from dotenv import load_dotenv
+from sql_queries import CrawlerQueries
 
 load_dotenv(override=True)
 
@@ -108,14 +109,7 @@ def crawler_thread_worker(msg_queue, user_id, password):
                     try:
                         with conn.cursor() as cursor:
                             for p_info in captured_data["project_list"]:
-                                sql = """
+                                cursor.execute(CrawlerQueries.UPSERT_MASTER, (p_info.get("project_id"), p_info.get("project_nm"), 
-                                INSERT INTO projects_master (project_id, project_nm, short_nm, master, continent, country)
-                                VALUES (%s, %s, %s, %s, %s, %s)
-                                ON DUPLICATE KEY UPDATE 
-                                    project_nm = VALUES(project_nm), short_nm = VALUES(short_nm),
-                                    master = VALUES(master), continent = VALUES(continent), country = VALUES(country)
-                                """
-                                cursor.execute(sql, (p_info.get("project_id"), p_info.get("project_nm"), 
                                                    p_info.get("short_nm", "").strip(), p_info.get("master"), 
                                                    p_info.get("large_class"), p_info.get("mid_class")))
                             conn.commit()
@@ -168,7 +162,7 @@ def crawler_thread_worker(msg_queue, user_id, password):
                                     if dept and p_id:
                                         with get_db_connection() as conn:
                                             with conn.cursor() as cursor:
-                                                cursor.execute("UPDATE projects_master SET department = %s WHERE project_id = %s", (dept, p_id))
+                                                cursor.execute(CrawlerQueries.UPDATE_DEPARTMENT, (dept, p_id))
                                             conn.commit()
                             captured_data["last_project_data"] = None # 초기화
 
@@ -228,8 +222,7 @@ def crawler_thread_worker(msg_queue, user_id, password):
                         if current_p_id:
                             with get_db_connection() as conn:
                                 with conn.cursor() as cursor:
-                                    sql = "INSERT INTO projects_history (project_id, crawl_date, recent_log, file_count) VALUES (%s, CURRENT_DATE(), %s, %s) ON DUPLICATE KEY UPDATE recent_log=VALUES(recent_log), file_count=VALUES(file_count)"
+                                    cursor.execute(CrawlerQueries.UPSERT_HISTORY, (current_p_id, recent_log, file_count))
-                                    cursor.execute(sql, (current_p_id, recent_log, file_count))
                                 conn.commit()
                             msg_queue.put(json.dumps({'type': 'log', 'message': f'   - [성공] 로그: {recent_log[:20]}... / 파일: {file_count}개'}))
 

js/dashboard.js

@@ -197,7 +197,7 @@ function scrollToProject(name) {
             p = p.parentElement; 
         }
         target.parentElement.classList.add('active');
-        const pos = target.getBoundingClientRect().top + window.pageYOffset - 220;
+        const pos = target.getBoundingClientRect().top + window.pageYOffset - 260;
         window.scrollTo({ top: pos, behavior: 'smooth' });
         target.style.backgroundColor = 'var(--primary-lv-1)';
         setTimeout(() => target.style.backgroundColor = '', 2000);

js/inquiries.js

@@ -1,15 +1,6 @@
 
 async function loadInquiries() {
-    // Adjust sticky thead position based on header height
+    initStickyHeader();
-    const header = document.getElementById('stickyHeader');
-    const thead = document.querySelector('.inquiry-table thead');
-    if (header && thead) {
-        const headerHeight = header.offsetHeight;
-        const totalOffset = 36 + headerHeight; // topbar(36) + sticky header height
-        document.querySelectorAll('.inquiry-table thead th').forEach(th => {
-            th.style.top = totalOffset + 'px';
-        });
-    }
 
     const pmType = document.getElementById('filterPmType').value;
     const category = document.getElementById('filterCategory').value;
@@ -19,16 +10,42 @@ async function loadInquiries() {
     const params = new URLSearchParams({
         pm_type: pmType,
         category: category,
-        status: status,
         keyword: keyword
     });
-    const response = await fetch(`/api/inquiries?${params}`);
-    const data = await response.json();
 
+    try {
+        const response = await fetch(`/api/inquiries?${params}`);
+        const data = await response.json();
+
+        updateStats(data);
+
+        const filteredData = status ? data.filter(item => item.status === status) : data;
+        renderInquiryList(filteredData);
+    } catch (e) {
+        console.error("데이터 로딩 중 오류 발생:", e);
+    }
+}
+
+function initStickyHeader() {
+    const header = document.getElementById('stickyHeader');
+    const thead = document.querySelector('.inquiry-table thead');
+    if (header && thead) {
+        const headerHeight = header.offsetHeight;
+        const totalOffset = 36 + headerHeight; 
+        document.querySelectorAll('.inquiry-table thead th').forEach(th => {
+            th.style.top = totalOffset + 'px';
+        });
+    }
+}
+
+function renderInquiryList(data) {
     const tbody = document.getElementById('inquiryList');
     tbody.innerHTML = data.map(item => `
         <tr class="inquiry-row" onclick="toggleAccordion(${item.id})">
             <td title="${item.no}">${item.no}</td>
+            <td style="text-align:center;">
+                ${item.image_url ? `<img src="${item.image_url}" class="img-thumbnail" alt="thumbnail">` : '<span class="no-img">없음</span>'}
+            </td>
             <td title="${item.pm_type}">${item.pm_type}</td>
             <td title="${item.browser || 'Chrome'}">${item.browser || 'Chrome'}</td>
             <td title="${item.category}">${item.category}</td>
@@ -40,7 +57,7 @@ async function loadInquiries() {
             <td><span class="status-badge ${getStatusClass(item.status)}">${item.status}</span></td>
         </tr>
         <tr id="detail-${item.id}" class="detail-row">
-            <td colspan="10">
+            <td colspan="11">
                 <div class="detail-container">
                     <button class="btn-close-accordion" onclick="toggleAccordion(${item.id})">접기</button>
                     <div class="detail-content-wrapper">
@@ -50,10 +67,27 @@ async function loadInquiries() {
                             <div><span class="detail-label">시스템:</span> ${item.pm_type}</div>
                             <div><span class="detail-label">환경:</span> ${item.browser || 'Chrome'} / ${item.device || 'PC'}</div>
                         </div>
+                        
                         <div class="detail-q-section">
                             <h4 style="margin-top:0; margin-bottom:10px; color:#1e5149;">[질문 내용]</h4>
                             <div style="line-height:1.6; white-space: pre-wrap;">${item.content}</div>
                         </div>
+                        
+                        ${item.image_url ? `
+                        <div class="detail-image-section" id="img-section-${item.id}">
+                            <div class="image-section-header" onclick="toggleImageSection(${item.id})">
+                                <h4>
+                                    <span>🖼️</span> [첨부 이미지] 
+                                    <span style="font-size:11px; color:#888; font-weight:normal;">(클릭 시 크게 보기)</span>
+                                </h4>
+                                <span class="toggle-icon">▼</span>
+                            </div>
+                            <div class="image-section-content collapsed" id="img-content-${item.id}">
+                                <img src="${item.image_url}" class="preview-img" alt="Inquiry Image" style="cursor: pointer;" onclick="event.stopPropagation(); openImageModal(this.src)">
+                            </div>
+                        </div>
+                        ` : ''}
+
                         <div class="detail-a-section">
                             <h4 style="margin-top:0; margin-bottom:10px; color:#1e5149;">[조치 및 답변]</h4>
                             <div id="reply-form-${item.id}" class="reply-edit-form readonly">
@@ -94,18 +128,15 @@ async function loadInquiries() {
 
 function enableEdit(id) {
     const form = document.getElementById(`reply-form-${id}`);
-    form.classList.remove('readonly');
+    form.classList.replace('readonly', 'editable');
-    form.classList.add('editable');
     
-    document.getElementById(`reply-text-${id}`).disabled = false;
+    const elements = [`reply-text-${id}`, `reply-status-${id}`, `reply-handler-${id}`];
-    document.getElementById(`reply-status-${id}`).disabled = false;
+    elements.forEach(elId => document.getElementById(elId).disabled = false);
-    document.getElementById(`reply-handler-${id}`).disabled = false;
     document.getElementById(`reply-text-${id}`).focus();
 }
 
 async function cancelEdit(id) {
     try {
-        // 서버에서 해당 항목의 원래 데이터를 다시 가져옴
         const response = await fetch(`/api/inquiries/${id}`);
         const item = await response.json();
         
@@ -114,21 +145,14 @@ async function cancelEdit(id) {
         const status = document.getElementById(`reply-status-${id}`);
         const handler = document.getElementById(`reply-handler-${id}`);
         
-        // 데이터 원복
         txt.value = item.reply || '';
         status.value = item.status;
         handler.value = item.handler || '';
         
-        // UI 상태 원복 (비활성화 및 클래스 변경)
+        [txt, status, handler].forEach(el => el.disabled = true);
-        txt.disabled = true;
+        form.classList.replace('editable', 'readonly');
-        status.disabled = true;
-        handler.disabled = true;
-        
-        form.classList.remove('editable');
-        form.classList.add('readonly');
     } catch (e) {
-        console.error("취소 중 오류 발생:", e);
+        loadInquiries();
-        loadInquiries(); // 오류 시에는 전체 새로고침으로 대응
     }
 }
 
@@ -137,8 +161,7 @@ async function saveReply(id) {
     const status = document.getElementById(`reply-status-${id}`).value;
     const handler = document.getElementById(`reply-handler-${id}`).value;
 
-    if (!reply.trim()) return alert("답변 내용을 입력해 주세요.");
+    if (!reply.trim() || !handler.trim()) return alert("내용과 처리자를 모두 입력해 주세요.");
-    if (!handler.trim()) return alert("처리자 이름을 입력해 주세요.");
 
     try {
         const response = await fetch(`/api/inquiries/${id}/reply`, {
@@ -148,30 +171,26 @@ async function saveReply(id) {
         });
         const result = await response.json();
         if (result.success) {
-            alert("답변이 저장되었습니다.");
+            alert("저장되었습니다.");
             loadInquiries();
-        } else {
-            alert("저장에 실패했습니다: " + result.error);
         }
     } catch (e) {
-        alert("오류가 발생했습니다.");
+        alert("저장 중 오류가 발생했습니다.");
     }
 }
 
 async function deleteReply(id) {
-    if (!confirm("답변을 삭제하시겠습니까? (처리 상태가 '미확인'으로 초기화됩니다.)")) return;
+    if (!confirm("답변을 삭제하시겠습니까?")) return;
 
     try {
         const response = await fetch(`/api/inquiries/${id}/reply`, { method: 'DELETE' });
         const result = await response.json();
         if (result.success) {
-            alert("답변이 삭제되었습니다.");
+            alert("삭제되었습니다.");
             loadInquiries();
-        } else {
-            alert("삭제에 실패했습니다: " + result.error);
         }
     } catch (e) {
-        alert("오류가 발생했습니다.");
+        alert("삭제 중 오류가 발생했습니다.");
     }
 }
 
@@ -181,7 +200,6 @@ function toggleAccordion(id) {
     const inquiryRow = detailRow.previousElementSibling;
     const isActive = detailRow.classList.contains('active');
     
-    // Close all other active details and remove their row highlights
     document.querySelectorAll('.detail-row.active').forEach(row => {
         if (row.id !== `detail-${id}`) {
             row.classList.remove('active');
@@ -189,42 +207,72 @@ function toggleAccordion(id) {
         }
     });
 
-    // Toggle current
     if (isActive) {
         detailRow.classList.remove('active');
         inquiryRow.classList.remove('active-row');
     } else {
         detailRow.classList.add('active');
         inquiryRow.classList.add('active-row');
-
+        scrollToRow(inquiryRow);
-        // [추가] 펼쳐진 항목이 보기 편하도록 스크롤 위치 조정
-        setTimeout(() => {
-            const stickyHeader = document.getElementById('stickyHeader');
-            const thead = document.querySelector('.inquiry-table thead');
-            const topbarHeight = 36;
-            const stickyHeaderHeight = stickyHeader ? stickyHeader.offsetHeight : 0;
-            const theadHeight = thead ? thead.offsetHeight : 0;
-            
-            // 모든 고정 영역의 합 (Topbar + 필터영역 + 표 헤더)
-            const totalOffset = topbarHeight + stickyHeaderHeight + theadHeight;
-
-            const rowPosition = inquiryRow.getBoundingClientRect().top + window.pageYOffset;
-            const offsetPosition = rowPosition - totalOffset;
-
-            window.scrollTo({
-                top: offsetPosition,
-                behavior: 'smooth'
-            });
-        }, 100);
     }
 }
 
-function getStatusClass(status) {
+function scrollToRow(row) {
-    if (status === '완료') return 'status-complete';
+    setTimeout(() => {
-    if (status === '작업 중') return 'status-working';
+        const headerHeight = document.getElementById('stickyHeader').offsetHeight;
-    if (status === '확인 중') return 'status-checking';
+        const totalOffset = 36 + headerHeight + 40; 
-    return 'status-pending';
+        const offsetPosition = (row.getBoundingClientRect().top + window.pageYOffset) - totalOffset;
+        window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
+    }, 100);
 }
 
+function getStatusClass(status) {
+    const map = { '완료': 'status-complete', '작업 중': 'status-working', '확인 중': 'status-checking' };
+    return map[status] || 'status-pending';
+}
+
+function updateStats(data) {
+    const counts = {
+        Total: data.length,
+        Complete: data.filter(i => i.status === '완료').length,
+        Working: data.filter(i => i.status === '작업 중').length,
+        Checking: data.filter(i => i.status === '확인 중').length,
+        Pending: data.filter(i => i.status === '개발예정').length,
+        Unconfirmed: data.filter(i => i.status === '미확인').length
+    };
+    Object.keys(counts).forEach(k => {
+        const el = document.getElementById(`count${k}`);
+        if (el) el.textContent = counts[k].toLocaleString();
+    });
+}
+
+function openImageModal(src) {
+    const modal = document.getElementById('imageModal');
+    if (modal) {
+        document.getElementById('modalImage').src = src;
+        modal.style.display = 'flex';
+    }
+}
+
+function closeImageModal() {
+    const modal = document.getElementById('imageModal');
+    if (modal) modal.style.display = 'none';
+}
+
+function toggleImageSection(id) {
+    const section = document.getElementById(`img-section-${id}`);
+    const content = document.getElementById(`img-content-${id}`);
+    const icon = section.querySelector('.toggle-icon');
+    const isCollapsed = content.classList.toggle('collapsed');
+    section.classList.toggle('active', !isCollapsed);
+    icon.textContent = isCollapsed ? '▼' : '▲';
+}
+
+// Global Initialization
 document.addEventListener('DOMContentLoaded', loadInquiries);
-window.addEventListener('resize', loadInquiries);
+window.addEventListener('resize', initStickyHeader);
+
+// Global Key Events (ESC)
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeImageModal();
+});

js/mail.js

@@ -82,6 +82,7 @@ const MAIL_SAMPLES = {
 let currentMailTab = 'inbound';
 let filteredMails = [];
 
+// --- 첨부파일 데이터 로드 및 렌더링 ---
 async function loadAttachments() {
     try {
         const res = await fetch('/attachments');
@@ -116,16 +117,16 @@ function renderFiles() {
         }
 
         item.innerHTML = `
-            <div class="attachment-item" onclick="showPreview(${index}, event)">
+            <div class="attachment-item" onclick="showPreview(${index}, event)" style="position:relative;">
-                <span class="file-icon">📄</span>
+                <span class="file-icon" style="pointer-events:none;">📄</span>
-                <div class="file-details">
+                <div class="file-details" style="pointer-events:none;">
                     <div class="file-name" title="${file.name}">${file.name}</div>
                     <div class="file-size">${file.size}</div>
                 </div>
-                <div class="btn-group">
+                <div class="btn-group" onclick="event.stopPropagation()" style="position:relative; z-index:2;">
                     <span id="recommend-${index}" class="ai-recommend path-display ${modeClass}" onclick="openPathModal(${index}, event)">${pathText}</span>
                     ${isAiActive ? `<button class="btn-upload btn-ai" onclick="startAnalysis(${index}, event)">AI 분석</button>` : ''}
-                    <button class="btn-upload btn-normal" onclick="confirmUpload(${index}, event)">파일 업로드</button>
+                    <button class="btn-upload btn-normal" onclick="confirmUpload(${index}, event)">파일업로드</button>
                 </div>
             </div>
             <div id="log-area-${index}" class="file-log-area">
@@ -136,18 +137,71 @@ function renderFiles() {
     });
 }
 
+// --- 미리보기 제어 ---
+function togglePreviewAuto() {
+    const area = document.getElementById('mailPreviewArea');
+    const icon = document.getElementById('previewToggleIcon');
+    if (!area) return;
+    
+    const isActive = area.classList.toggle('active');
+    if (icon) icon.innerText = isActive ? '▶' : '◀';
+}
+
+function showPreview(index, event) {
+    // 버튼 클릭 시 미리보기 방지
+    if (event && (event.target.closest('.btn-group') || event.target.closest('.path-display'))) return;
+    
+    const file = currentFiles[index];
+    if (!file) return;
+
+    const previewContainer = document.getElementById('previewContainer');
+    const fullViewBtn = document.getElementById('fullViewBtn');
+    const previewArea = document.getElementById('mailPreviewArea');
+    const toggleIcon = document.getElementById('previewToggleIcon');
+
+    // UI 활성화
+    if (previewArea) {
+        previewArea.classList.add('active');
+        if (toggleIcon) toggleIcon.innerText = '▶';
+    }
+
+    // 파일 경로 및 유형 처리
+    const isPdf = file.name.toLowerCase().endsWith('.pdf');
+    const fileUrl = `/sample_files/${encodeURIComponent(file.name)}`;
+
+    if (fullViewBtn) {
+        fullViewBtn.style.display = 'block';
+        fullViewBtn.onclick = () => window.open(fileUrl, 'PMFullView', 'width=1000,height=800');
+    }
+
+    if (isPdf) {
+        previewContainer.innerHTML = `<iframe src="${fileUrl}#page=1" style="width:100%; height:100%; border:none;"></iframe>`;
+    } else {
+        previewContainer.innerHTML = `
+            <div style="width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center;">
+                <img src="/sample.png" style="max-width:80%; max-height:60%; margin-bottom:20px;">
+                <div style="font-weight:700; color:var(--primary-color);">${file.name}</div>
+            </div>`;
+    }
+
+    // 아이템 활성화 스타일
+    document.querySelectorAll('.attachment-item').forEach(item => item.classList.remove('active'));
+    if (event && event.currentTarget) event.currentTarget.classList.add('active');
+}
+
+// --- 메일 리스트 관리 ---
 function renderMailList(tabType, mailsToShow = null) {
     currentMailTab = tabType;
     const container = document.querySelector('.mail-items-container');
     if (!container) return;
     
     const mails = mailsToShow || MAIL_SAMPLES[tabType] || [];
-    filteredMails = mails; // 현재 보여지는 리스트 저장
+    filteredMails = mails;
     updateBulkActionBar();
 
     container.innerHTML = mails.map((mail, idx) => `
         <div class="mail-item ${mail.active ? 'active' : ''}" onclick="selectMailItem(this, ${idx})">
-            <input type="checkbox" class="mail-item-checkbox" onclick="handleCheckboxClick(event)" onchange="updateBulkActionBar()">
+            <input type="checkbox" class="mail-item-checkbox" onclick="event.stopPropagation()" onchange="updateBulkActionBar()">
             <div class="mail-item-content">
                 <div class="flex-between" style="margin-bottom:6px;">
                     <span style="font-weight:700; font-size:14px; color:${mail.active ? 'var(--primary-color)' : 'var(--text-main)'};">
@@ -166,23 +220,73 @@ function renderMailList(tabType, mailsToShow = null) {
         </div>
     `).join('');
 
-    // 초기 로드 시 active가 있다면 본문도 업데이트
     const activeIdx = mails.findIndex(m => m.active);
-    if (activeIdx !== -1) {
+    if (activeIdx !== -1) updateMailContent(mails[activeIdx]);
-        updateMailContent(mails[activeIdx]);
-    }
 }
 
-function handleCheckboxClick(event) {
+function selectMailItem(el, index) {
-    event.stopPropagation();
+    document.querySelectorAll('.mail-item').forEach(item => {
+        item.classList.remove('active');
+        const nameSpan = item.querySelector('.mail-item-content span:first-child');
+        if (nameSpan) nameSpan.style.color = 'var(--text-main)';
+    });
+    el.classList.add('active');
+    const currentNameSpan = el.querySelector('.mail-item-content span:first-child');
+    if (currentNameSpan) currentNameSpan.style.color = 'var(--primary-color)';
+
+    const mail = filteredMails[index];
+    if (mail) updateMailContent(mail);
 }
 
+function updateMailContent(mail) {
+    const headerTitle = document.querySelector('.mail-content-header h2');
+    const senderInfo = document.querySelectorAll('.mail-content-header div')[0];
+    const dateInfo = document.querySelectorAll('.mail-content-header div')[1];
+    const bodyInfo = document.querySelector('.mail-body');
+
+    if (headerTitle) headerTitle.innerText = mail.title;
+    if (senderInfo) senderInfo.innerHTML = `<strong>${currentMailTab === 'outbound' ? '받는사람' : '보낸사람'}</strong> ${mail.email} (${mail.person})`;
+    if (dateInfo) dateInfo.innerHTML = `<strong>날짜</strong> ${mail.time}`;
+    if (bodyInfo) bodyInfo.innerHTML = mail.summary.replace(/\n/g, '<br>') + "<br><br>본 내용은 샘플 데이터입니다.";
+}
+
+function switchMailTab(el, tabType) {
+    document.querySelectorAll('.mail-tab').forEach(tab => tab.classList.remove('active'));
+    el.classList.add('active');
+    MAIL_SAMPLES[tabType].forEach((m, idx) => m.active = (idx === 0));
+    renderMailList(tabType);
+}
+
+// --- 검색 및 필터 ---
+function searchMails() {
+    const query = document.querySelector('.search-bar input[type="text"]').value.toLowerCase();
+    const startDate = document.getElementById('startDate').value;
+    const endDate = document.getElementById('endDate').value;
+    
+    const results = (MAIL_SAMPLES[currentMailTab] || []).filter(mail => {
+        const matchQuery = mail.title.toLowerCase().includes(query) || 
+                           mail.person.toLowerCase().includes(query) || 
+                           mail.summary.toLowerCase().includes(query);
+        let matchDate = true;
+        if (startDate) matchDate = matchDate && (mail.time >= startDate);
+        if (endDate) matchDate = matchDate && (mail.time <= endDate);
+        return matchQuery && matchDate;
+    });
+    renderMailList(currentMailTab, results);
+}
+
+function resetSearch() {
+    document.querySelector('.search-bar input[type="text"]').value = '';
+    document.getElementById('startDate').value = '';
+    document.getElementById('endDate').value = '';
+    renderMailList(currentMailTab);
+}
+
+// --- 액션바 관리 ---
 function updateBulkActionBar() {
     const checkboxes = document.querySelectorAll('.mail-item-checkbox:checked');
     const actionBar = document.getElementById('mailBulkActions');
     const selectedCountSpan = document.getElementById('selectedCount');
-    const selectAllCheckbox = document.getElementById('selectAllMails');
-    
     if (!actionBar || !selectedCountSpan) return;
 
     if (checkboxes.length > 0) {
@@ -190,13 +294,13 @@ function updateBulkActionBar() {
         selectedCountSpan.innerText = `${checkboxes.length}개 선택됨`;
     } else {
         actionBar.classList.remove('active');
-        if (selectAllCheckbox) selectAllCheckbox.checked = false;
+        const selectAll = document.getElementById('selectAllMails');
+        if (selectAll) selectAll.checked = false;
     }
 }
 
 function toggleSelectAll(el) {
-    const checkboxes = document.querySelectorAll('.mail-item-checkbox');
+    document.querySelectorAll('.mail-item-checkbox').forEach(cb => cb.checked = el.checked);
-    checkboxes.forEach(cb => cb.checked = el.checked);
     updateBulkActionBar();
 }
 
@@ -222,145 +326,41 @@ function deleteSelectedMails() {
     renderMailList(currentMailTab);
 }
 
-function selectMailItem(el, index) {
+// --- 경로 선택 모달 ---
-    // UI 업데이트
-    document.querySelectorAll('.mail-item').forEach(item => {
-        item.classList.remove('active');
-        const nameSpan = item.querySelector('.mail-item-content span:first-child');
-        if (nameSpan) nameSpan.style.color = 'var(--text-main)';
-    });
-    el.classList.add('active');
-    const currentNameSpan = el.querySelector('.mail-item-content span:first-child');
-    if (currentNameSpan) currentNameSpan.style.color = 'var(--primary-color)';
-
-    // 본문 업데이트
-    const mail = filteredMails[index];
-    if (mail) {
-        updateMailContent(mail);
-    }
-}
-
-function updateMailContent(mail) {
-    const headerTitle = document.querySelector('.mail-content-header h2');
-    const senderInfo = document.querySelectorAll('.mail-content-header div')[0];
-    const dateInfo = document.querySelectorAll('.mail-content-header div')[1];
-    const bodyInfo = document.querySelector('.mail-body');
-
-    if (headerTitle) headerTitle.innerText = mail.title;
-    if (senderInfo) senderInfo.innerHTML = `<strong>${currentMailTab === 'outbound' ? '받는사람' : '보낸사람'}</strong> ${mail.email} (${mail.person})`;
-    if (dateInfo) dateInfo.innerHTML = `<strong>날짜</strong> ${mail.time}`;
-    if (bodyInfo) bodyInfo.innerHTML = mail.summary.replace(/\n/g, '<br>') + "<br><br>" + "본 내용은 샘플 데이터입니다.";
-}
-
-function switchMailTab(el, tabType) {
-    document.querySelectorAll('.mail-tab').forEach(tab => tab.classList.remove('active'));
-    el.classList.add('active');
-    
-    // 탭 이동 시 active 상태 초기화 (첫 번째 메일만 active 하거나 전부 해제)
-    MAIL_SAMPLES[tabType].forEach((m, idx) => m.active = (idx === 0));
-    
-    renderMailList(tabType);
-}
-
-// --- 검색 기능 ---
-function searchMails() {
-    const query = document.querySelector('.search-bar input[type="text"]').value.toLowerCase();
-    const startDate = document.getElementById('startDate').value;
-    const endDate = document.getElementById('endDate').value;
-    
-    const mails = MAIL_SAMPLES[currentMailTab];
-    const results = mails.filter(mail => {
-        const matchQuery = mail.title.toLowerCase().includes(query) || 
-                           mail.person.toLowerCase().includes(query) || 
-                           mail.summary.toLowerCase().includes(query);
-        
-        let matchDate = true;
-        if (startDate) matchDate = matchDate && (mail.time >= startDate);
-        if (endDate) matchDate = matchDate && (mail.time <= endDate);
-        
-        return matchQuery && matchDate;
-    });
-    
-    renderMailList(currentMailTab, results);
-}
-
-function resetSearch() {
-    document.querySelector('.search-bar input[type="text"]').value = '';
-    document.getElementById('startDate').value = '';
-    document.getElementById('endDate').value = '';
-    document.querySelector('.search-bar select').selectedIndex = 0;
-    
-    renderMailList(currentMailTab);
-}
-
-// --- 모달 및 기타 유틸리티 ---
-function togglePreview(show) {
-    const previewArea = document.getElementById('mailPreviewArea');
-    if (show) previewArea.classList.add('active');
-    else previewArea.classList.remove('active');
-}
-
-function showPreview(index, event) {
-    if (event.target.closest('.btn-group') || event.target.closest('.path-display')) return;
-    const file = currentFiles[index];
-    const previewContainer = document.getElementById('previewContainer');
-    const fullViewBtn = document.getElementById('fullViewBtn');
-    document.querySelectorAll('.attachment-item').forEach(item => item.classList.remove('active'));
-    event.currentTarget.classList.add('active');
-    togglePreview(true);
-    const isPdf = file.name.toLowerCase().endsWith('.pdf');
-    const fileUrl = `/sample_files/${encodeURIComponent(file.name)}`;
-    if (fullViewBtn) {
-        fullViewBtn.style.display = 'block';
-        fullViewBtn.onclick = () => window.open(fileUrl, 'PMFullView', 'width=1000,height=800');
-    }
-    if (isPdf) {
-        previewContainer.innerHTML = `<iframe src="${fileUrl}#page=1" style="width:100%; height:100%; border:none;"></iframe>`;
-    } else {
-        previewContainer.innerHTML = `<div style="width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center;"><img src="/sample.png" class="preview-image"><div style="margin-top:20px; font-weight:700; color:var(--primary-color);">${file.name}</div></div>`;
-    }
-}
-
 function openPathModal(index, event) {
     if (event) event.stopPropagation();
     editingIndex = index;
     const modal = document.getElementById('pathModal');
     const tabSelect = document.getElementById('tabSelect');
-    if (!tabSelect) return;
+    if (!modal || !tabSelect) return;
+    
     tabSelect.innerHTML = Object.keys(HIERARCHY).map(tab => `<option value="${tab}">${tab}</option>`).join('');
     updateCategories();
     modal.style.display = 'flex';
 }
 
 function updateCategories() {
-    const tabSelect = document.getElementById('tabSelect');
+    const tab = document.getElementById('tabSelect').value;
     const catSelect = document.getElementById('categorySelect');
-    if (!tabSelect || !catSelect) return;
+    if (!catSelect) return;
-    const tab = tabSelect.value;
+    catSelect.innerHTML = Object.keys(HIERARCHY[tab]).map(cat => `<option value="${cat}">${cat}</option>`).join('');
-    const cats = Object.keys(HIERARCHY[tab]);
-    catSelect.innerHTML = cats.map(cat => `<option value="${cat}">${cat}</option>`).join('');
     updateSubs();
 }
 
 function updateSubs() {
-    const tabSelect = document.getElementById('tabSelect');
+    const tab = document.getElementById('tabSelect').value;
-    const catSelect = document.getElementById('categorySelect');
+    const cat = document.getElementById('categorySelect').value;
     const subSelect = document.getElementById('subSelect');
-    if (!tabSelect || !catSelect || !subSelect) return;
+    if (!subSelect) return;
-    const tab = tabSelect.value;
+    subSelect.innerHTML = HIERARCHY[tab][cat].map(sub => `<option value="${sub}">${sub}</option>`).join('');
-    const cat = catSelect.value;
-    const subs = HIERARCHY[tab][cat];
-    subSelect.innerHTML = subs.map(sub => `<option value="${sub}">${sub}</option>`).join('');
 }
 
 function applyPathSelection() {
-    const tabSelect = document.getElementById('tabSelect');
+    const tab = document.getElementById('tabSelect').value;
-    const catSelect = document.getElementById('categorySelect');
+    const cat = document.getElementById('categorySelect').value;
-    const subSelect = document.getElementById('subSelect');
+    const sub = document.getElementById('subSelect').value;
-    const tab = tabSelect.value;
-    const cat = catSelect.value;
-    const sub = subSelect.value;
     const fullPath = `${tab} > ${cat} > ${sub}`;
+    
     if (!currentFiles[editingIndex].analysis) currentFiles[editingIndex].analysis = {};
     currentFiles[editingIndex].analysis.suggested_path = fullPath;
     currentFiles[editingIndex].analysis.isManual = true;
@@ -373,6 +373,7 @@ function closeModal() {
     if (modal) modal.style.display = 'none';
 }
 
+// --- AI 분석 및 업로드 ---
 async function startAnalysis(index, event) {
     if (event) event.stopPropagation();
     const file = currentFiles[index];
@@ -380,20 +381,21 @@ async function startAnalysis(index, event) {
     const logContent = document.getElementById(`log-content-${index}`);
     const recLabel = document.getElementById(`recommend-${index}`);
     if (!logArea || !logContent || !recLabel) return;
+
     logArea.classList.add('active');
-    logContent.innerHTML = '<div class="log-line log-info">>>> 3중 레이어 AI 분석 엔진 가동...</div>';
+    logContent.innerHTML = '<div class="log-line log-info">>>> AI 분석 엔진 가동 중...</div>';
     recLabel.innerText = '분석 중...';
+
     try {
         const res = await fetch(`/analyze-file?filename=${encodeURIComponent(file.name)}`);
         const analysis = await res.json();
         const result = analysis.final_result;
-        const steps = [`1. 파일 포맷 분석: ${file.name.split('.').pop().toUpperCase()} 감지`, `2. 페이지 스캔: 총 ${analysis.total_pages}페이지 분석 완료`, `3. 문맥 추론: ${result.reason}`];
+        
-        steps.forEach(step => {
+        logContent.innerHTML = `
-            const line = document.createElement('div');
+            <div class="log-line">1. 파일 포맷 분석: ${file.name.split('.').pop().toUpperCase()} 감지</div>
-            line.className = 'log-line';
+            <div class="log-line">2. 페이지 스캔: 총 ${analysis.total_pages}페이지 분석 완료</div>
-            line.innerText = "   " + step;
+            <div class="log-line">3. 문맥 추론: ${result.reason}</div>
-            logContent.appendChild(line);
+        `;
-        });
         currentFiles[index].analysis = { suggested_path: result.suggested_path, isManual: false };
         renderFiles();
     } catch (e) {
@@ -406,15 +408,13 @@ function confirmUpload(index, event) {
     if (event) event.stopPropagation();
     const file = currentFiles[index];
     if (!file.analysis || !file.analysis.suggested_path) { alert("경로를 설정해주세요."); return; }
-    if (confirm(`정해진 위치로 업로드하시겠습니까?\n\n위치: ${file.analysis.suggested_path}`)) alert("업로드가 완료되었습니다.");
+    if (confirm(`업로드하시겠습니까?\n위치: ${file.analysis.suggested_path}`)) alert("완료되었습니다.");
 }
 
-// --- 주소록 기능 ---
+// --- 주소록 ---
 let addressBookData = [
     { name: "이태훈", dept: "PM Overseas / 선임연구원", email: "th.lee@projectmaster.com", phone: "010-1234-5678" },
-    { name: "Pany S.", dept: "라오스 농림부 / 국장", email: "pany.s@lao.gov.la", phone: "+856-20-1234-5678" },
+    { name: "Pany S.", dept: "라오스 농림부 / 국장", email: "pany.s@lao.gov.la", phone: "+856-20-1234-5678" }
-    { name: "김철수", dept: "현대건설 / 현장소장", email: "cs.kim@hdec.co.kr", phone: "010-9876-5432" },
-    { name: "Nguyen Van A", dept: "베트남 전력청 / 팀장", email: "nva@evn.com.vn", phone: "+84-90-1234-5678" }
 ];
 let contactEditingIndex = -1;
 
@@ -425,33 +425,60 @@ function openAddressBook() {
 
 function closeAddressBook() {
     const modal = document.getElementById('addressBookModal');
-    if (modal) { modal.style.display = 'none'; document.getElementById('addContactForm').style.display = 'none'; contactEditingIndex = -1; }
+    if (modal) { modal.style.display = 'none'; document.getElementById('addContactForm').style.display = 'none'; }
+}
+
+function toggleAddContactForm() {
+    const form = document.getElementById('addContactForm');
+    if (!form) return;
+    if (form.style.display === 'none') {
+        form.style.display = 'block';
+    } else {
+        form.style.display = 'none';
+        contactEditingIndex = -1;
+        // 폼 초기화
+        document.getElementById('newContactName').value = '';
+        document.getElementById('newContactDept').value = '';
+        document.getElementById('newContactEmail').value = '';
+        document.getElementById('newContactPhone').value = '';
+    }
+}
+
+function editContact(index) {
+    const contact = addressBookData[index];
+    if (!contact) return;
+    contactEditingIndex = index;
+    
+    document.getElementById('newContactName').value = contact.name;
+    document.getElementById('newContactDept').value = contact.dept;
+    document.getElementById('newContactEmail').value = contact.email;
+    document.getElementById('newContactPhone').value = contact.phone;
+    
+    document.getElementById('addContactForm').style.display = 'block';
+}
+
+function deleteContact(index) {
+    if (!addressBookData[index]) return;
+    if (confirm(`'${addressBookData[index].name}'님을 주소록에서 삭제하시겠습니까?`)) {
+        addressBookData.splice(index, 1);
+        renderAddressBook();
+    }
 }
 
 function renderAddressBook() {
     const body = document.getElementById('addressBookBody');
     if (!body) return;
-    body.innerHTML = addressBookData.map((c, idx) => `<tr><td><strong>${c.name}</strong></td><td>${c.dept}</td><td>${c.email}</td><td>${c.phone}</td><td style="text-align:right;"><button class="_button-xsmall" onclick="editContact(${idx})">수정</button><button class="_button-xsmall" onclick="deleteContact(${idx})">삭제</button></td></tr>`).join('');
+    body.innerHTML = addressBookData.map((c, idx) => `
-}
+        <tr>
-
+            <td><strong>${c.name}</strong></td>
-function toggleAddContactForm() {
+            <td>${c.dept}</td>
-    const form = document.getElementById('addContactForm');
+            <td>${c.email}</td>
-    if (form.style.display === 'none') form.style.display = 'block';
+            <td>${c.phone}</td>
-    else { form.style.display = 'none'; contactEditingIndex = -1; }
+            <td style="text-align:right;">
-}
+                <button class="_button-xsmall" onclick="editContact(${idx})">수정</button>
-
+                <button class="_button-xsmall" style="color:var(--error-color); border-color:#feb2b2; background:#fff5f5;" onclick="deleteContact(${idx})">삭제</button>
-function editContact(index) {
+            </td>
-    const contact = addressBookData[index];
+        </tr>`).join('');
-    contactEditingIndex = index;
-    document.getElementById('newContactName').value = contact.name;
-    document.getElementById('newContactDept').value = contact.dept;
-    document.getElementById('newContactEmail').value = contact.email;
-    document.getElementById('newContactPhone').value = contact.phone;
-    document.getElementById('addContactForm').style.display = 'block';
-}
-
-function deleteContact(index) {
-    if (confirm(`'${addressBookData[index].name}'님을 주소록에서 삭제하시겠습니까?`)) { addressBookData.splice(index, 1); renderAddressBook(); }
 }
 
 function addContact() {
@@ -459,21 +486,17 @@ function addContact() {
     const dept = document.getElementById('newContactDept').value;
     const email = document.getElementById('newContactEmail').value;
     const phone = document.getElementById('newContactPhone').value;
-    if (!name) { alert("이름을 입력해주세요."); return; }
+    if (!name) return alert("이름을 입력해주세요.");
-    const newData = { name, dept, email, phone };
+
-    if (contactEditingIndex > -1) { addressBookData[contactEditingIndex] = newData; contactEditingIndex = -1; }
+    if (contactEditingIndex > -1) addressBookData[contactEditingIndex] = { name, dept, email, phone };
-    else addressBookData.push(newData);
+    else addressBookData.push({ name, dept, email, phone });
+    
     renderAddressBook();
-    toggleAddContactForm();
+    document.getElementById('addContactForm').style.display = 'none';
-}
+    contactEditingIndex = -1;
-
-function togglePreviewAuto() {
-    const area = document.getElementById('mailPreviewArea');
-    const icon = document.getElementById('previewToggleIcon');
-    const isActive = area.classList.toggle('active');
-    if (icon) icon.innerText = isActive ? '▶' : '◀';
 }
 
+// 초기화
 document.addEventListener('DOMContentLoaded', () => {
     loadAttachments();
     renderMailList('inbound');

migrate_db_history.py

@@ -1,43 +0,0 @@
-import pymysql
-import os
-
-def get_db():
-    return pymysql.connect(
-        host='localhost', user='root', password='45278434',
-        database=os.getenv('DB_NAME', 'PM_proto'), charset='utf8mb4'
-    )
-
-def migrate_to_timeseries():
-    conn = get_db()
-    try:
-        with conn.cursor() as cursor:
-            # 1. 기존 고유 제약 조건 제거 (project_id 중복 허용을 위함)
-            try:
-                cursor.execute("ALTER TABLE overseas_projects DROP INDEX project_id")
-                print(">>> 기존 project_id 고유 제약 제거")
-            except: pass
-
-            # 2. crawl_date 컬럼 추가 (날짜별 데이터 구분을 위함)
-            cursor.execute("DESCRIBE overseas_projects")
-            cols = [row[0] for row in cursor.fetchall()]
-            if 'crawl_date' not in cols:
-                cursor.execute("ALTER TABLE overseas_projects ADD COLUMN crawl_date DATE AFTER project_id")
-                print(">>> crawl_date 컬럼 추가")
-
-            # 3. 기존 데이터의 crawl_date를 오늘로 채움
-            cursor.execute("UPDATE overseas_projects SET crawl_date = DATE(updated_at) WHERE crawl_date IS NULL")
-
-            # 4. 새로운 복합 고유 제약 추가 (ID + 날짜 조합으로 중복 방지)
-            # 같은 날짜에 다시 크롤링하면 덮어쓰고, 날짜가 다르면 새로 생성됨
-            try:
-                cursor.execute("ALTER TABLE overseas_projects ADD UNIQUE INDEX idx_project_date (project_id, crawl_date)")
-                print(">>> 복합 고유 제약(project_id + crawl_date) 추가 완료")
-            except: pass
-
-        conn.commit()
-        print(">>> DB 시계열 마이그레이션 성공!")
-    finally:
-        conn.close()
-
-if __name__ == "__main__":
-    migrate_to_timeseries()

migrate_normalized.py

@@ -1,67 +0,0 @@
-import pymysql
-import os
-
-def get_db():
-    return pymysql.connect(
-        host='localhost', user='root', password='45278434',
-        database=os.getenv('DB_NAME', 'PM_proto'), charset='utf8mb4',
-        cursorclass=pymysql.cursors.DictCursor
-    )
-
-def migrate_to_normalized_tables():
-    conn = get_db()
-    try:
-        with conn.cursor() as cursor:
-            # 1. 마스터 테이블 생성 (고유 정보)
-            cursor.execute("""
-                CREATE TABLE IF NOT EXISTS projects_master (
-                    project_id VARCHAR(100) PRIMARY KEY,
-                    project_nm VARCHAR(255) NOT NULL,
-                    short_nm VARCHAR(255),
-                    department VARCHAR(255),
-                    continent VARCHAR(100),
-                    country VARCHAR(100),
-                    master VARCHAR(100),
-                    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
-                ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-            """)
-
-            # 2. 히스토리 테이블 생성 (일일 변동 정보)
-            cursor.execute("""
-                CREATE TABLE IF NOT EXISTS projects_history (
-                    id INT AUTO_INCREMENT PRIMARY KEY,
-                    project_id VARCHAR(100) NOT NULL,
-                    crawl_date DATE NOT NULL,
-                    recent_log VARCHAR(255),
-                    file_count INT DEFAULT 0,
-                    recorded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-                    UNIQUE KEY idx_proj_date (project_id, crawl_date),
-                    FOREIGN KEY (project_id) REFERENCES projects_master(project_id) ON DELETE CASCADE
-                ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-            """)
-
-            # 3. 기존 데이터 이전
-            # 3-1. 마스터 정보 이전
-            cursor.execute("""
-                INSERT IGNORE INTO projects_master (project_id, project_nm, short_nm, department, continent, country, master)
-                SELECT project_id, project_nm, short_nm, department, continent, country, master
-                FROM overseas_projects
-            """)
-            
-            # 3-2. 히스토리 정보 이전
-            cursor.execute("""
-                INSERT IGNORE INTO projects_history (project_id, crawl_date, recent_log, file_count)
-                SELECT project_id, crawl_date, recent_log, file_count
-                FROM overseas_projects
-            """)
-
-            # 4. 기존 단일 테이블 삭제 (성공 후 삭제)
-            # cursor.execute("DROP TABLE IF EXISTS overseas_projects") 
-            
-            conn.commit()
-            print(">>> DB 정규화 마이그레이션 완료 (Master / History 분리)")
-    finally:
-        conn.close()
-
-if __name__ == "__main__":
-    migrate_to_normalized_tables()

server.py

@@ -13,6 +13,7 @@ from fastapi.templating import Jinja2Templates
 
 from analyze import analyze_file_content
 from crawler_service import run_crawler_service, crawl_stop_event
+from sql_queries import InquiryQueries, DashboardQueries
 
 # --- 환경 설정 ---
 os.environ["PYTHONIOENCODING"] = "utf-8"
@@ -87,7 +88,7 @@ async def get_inquiries(pm_type: str = None, category: str = None, status: str =
     try:
         with get_db_connection() as conn:
             with conn.cursor() as cursor:
-                sql = "SELECT * FROM inquiries WHERE 1=1"
+                sql = InquiryQueries.SELECT_BASE
                 params = []
                 if pm_type:
                     sql += " AND pm_type = %s"
@@ -102,7 +103,7 @@ async def get_inquiries(pm_type: str = None, category: str = None, status: str =
                     sql += " AND (content LIKE %s OR author LIKE %s OR project_nm LIKE %s)"
                     params.extend([f"%{keyword}%", f"%{keyword}%", f"%{keyword}%"])
                 
-                sql += " ORDER BY no DESC"
+                sql += f" {InquiryQueries.ORDER_BY_DESC}"
                 cursor.execute(sql, params)
                 return cursor.fetchall()
     except Exception as e:
@@ -113,7 +114,7 @@ async def get_inquiry_detail(id: int):
     try:
         with get_db_connection() as conn:
             with conn.cursor() as cursor:
-                cursor.execute("SELECT * FROM inquiries WHERE id = %s", (id,))
+                cursor.execute(InquiryQueries.SELECT_BY_ID, (id,))
                 return cursor.fetchone()
     except Exception as e:
         return {"error": str(e)}
@@ -123,13 +124,8 @@ async def update_inquiry_reply(id: int, req: InquiryReplyRequest):
     try:
         with get_db_connection() as conn:
             with conn.cursor() as cursor:
-                handled_date = datetime.now().strftime("%Y. %m. %d")
+                handled_date = datetime.now().strftime("%Y.%m.%d")
-                sql = """
+                cursor.execute(InquiryQueries.UPDATE_REPLY, (req.reply, req.status, req.handler, handled_date, id))
-                    UPDATE inquiries 
-                    SET reply = %s, status = %s, handler = %s, handled_date = %s 
-                    WHERE id = %s
-                """
-                cursor.execute(sql, (req.reply, req.status, req.handler, handled_date, id))
                 conn.commit()
                 return {"success": True}
     except Exception as e:
@@ -140,12 +136,7 @@ async def delete_inquiry_reply(id: int):
     try:
         with get_db_connection() as conn:
             with conn.cursor() as cursor:
-                sql = """
+                cursor.execute(InquiryQueries.DELETE_REPLY, (id,))
-                    UPDATE inquiries 
-                    SET reply = '', status = '미확인', handled_date = '' 
-                    WHERE id = %s
-                """
-                cursor.execute(sql, (id,))
                 conn.commit()
                 return {"success": True}
     except Exception as e:
@@ -158,7 +149,7 @@ async def get_available_dates():
     try:
         with get_db_connection() as conn:
             with conn.cursor() as cursor:
-                cursor.execute("SELECT DISTINCT crawl_date FROM projects_history ORDER BY crawl_date DESC")
+                cursor.execute(DashboardQueries.GET_AVAILABLE_DATES)
                 rows = cursor.fetchall()
                 return [row['crawl_date'].strftime("%Y.%m.%d") for row in rows if row['crawl_date']]
     except Exception as e:
@@ -172,20 +163,13 @@ async def get_project_data(date: str = None):
         with get_db_connection() as conn:
             with conn.cursor() as cursor:
                 if not target_date:
-                    cursor.execute("SELECT MAX(crawl_date) as last_date FROM projects_history")
+                    cursor.execute(DashboardQueries.GET_LAST_CRAWL_DATE)
                     res = cursor.fetchone()
                     target_date = res['last_date']
                 
                 if not target_date: return {"projects": []}
 
-                sql = """
+                cursor.execute(DashboardQueries.GET_PROJECT_LIST, (target_date,))
-                    SELECT m.project_nm, m.short_nm, m.department, m.master, 
-                           h.recent_log, h.file_count, m.continent, m.country 
-                    FROM projects_master m
-                    LEFT JOIN projects_history h ON m.project_id = h.project_id AND h.crawl_date = %s
-                    ORDER BY m.project_id ASC
-                """
-                cursor.execute(sql, (target_date,))
                 rows = cursor.fetchall()
                 
                 projects = []
@@ -203,7 +187,7 @@ async def get_project_activity(date: str = None):
         with get_db_connection() as conn:
             with conn.cursor() as cursor:
                 if not date or date == "-":
-                    cursor.execute("SELECT MAX(crawl_date) as last_date FROM projects_history")
+                    cursor.execute(DashboardQueries.GET_LAST_CRAWL_DATE)
                     res = cursor.fetchone()
                     target_date_val = res['last_date'] if res['last_date'] else datetime.now().date()
                 else:
@@ -212,12 +196,7 @@ async def get_project_activity(date: str = None):
                 target_date_dt = datetime.combine(target_date_val, datetime.min.time())
                 
                 # 아코디언 리스트와 동일하게 마스터의 모든 프로젝트를 가져오되, 해당 날짜의 히스토리를 매칭
-                sql = """
+                cursor.execute(DashboardQueries.GET_PROJECT_LIST_FOR_ANALYSIS, (target_date_val,))
-                    SELECT m.project_id, m.project_nm, m.short_nm, h.recent_log, h.file_count
-                    FROM projects_master m
-                    LEFT JOIN projects_history h ON m.project_id = h.project_id AND h.crawl_date = %s
-                """
-                cursor.execute(sql, (target_date_val,))
                 rows = cursor.fetchall()
                 
                 analysis = {"summary": {"active": 0, "warning": 0, "stale": 0, "unknown": 0}, "details": []}

sql_queries.py

@@ -0,0 +1,67 @@
+class InquiryQueries:
+    """문의사항(Inquiries) 페이지 관련 쿼리"""
+    # 필터링을 위한 기본 쿼리 (WHERE 1=1 포함)
+    SELECT_BASE = "SELECT * FROM inquiries WHERE 1=1"
+    ORDER_BY_DESC = "ORDER BY no DESC"
+    
+    # 상세 조회
+    SELECT_BY_ID = "SELECT * FROM inquiries WHERE id = %s"
+    
+    # 답변 업데이트 (handled_date 포함)
+    UPDATE_REPLY = """
+        UPDATE inquiries 
+        SET reply = %s, status = %s, handler = %s, handled_date = %s 
+        WHERE id = %s
+    """
+    
+    # 답변 삭제 (초기화)
+    DELETE_REPLY = """
+        UPDATE inquiries 
+        SET reply = '', status = '미확인', handled_date = '' 
+        WHERE id = %s
+    """
+
+class DashboardQueries:
+    """대시보드(Dashboard) 및 프로젝트 현황 관련 쿼리"""
+    # 가용 날짜 목록 조회
+    GET_AVAILABLE_DATES = "SELECT DISTINCT crawl_date FROM projects_history ORDER BY crawl_date DESC"
+    
+    # 최신 수집 날짜 조회
+    GET_LAST_CRAWL_DATE = "SELECT MAX(crawl_date) as last_date FROM projects_history"
+    
+    # 특정 날짜 프로젝트 데이터 JOIN 조회
+    GET_PROJECT_LIST = """
+        SELECT m.project_nm, m.short_nm, m.department, m.master, 
+               h.recent_log, h.file_count, m.continent, m.country 
+        FROM projects_master m
+        LEFT JOIN projects_history h ON m.project_id = h.project_id AND h.crawl_date = %s
+        ORDER BY m.project_id ASC
+    """
+    
+    # 활성도 분석을 위한 프로젝트 목록 조회
+    GET_PROJECT_LIST_FOR_ANALYSIS = """
+        SELECT m.project_id, m.project_nm, m.short_nm, h.recent_log, h.file_count
+        FROM projects_master m
+        LEFT JOIN projects_history h ON m.project_id = h.project_id AND h.crawl_date = %s
+    """
+
+class CrawlerQueries:
+    """크롤러(Crawler) 데이터 동기화 관련 쿼리"""
+    # 마스터 정보 UPSERT (INSERT OR UPDATE)
+    UPSERT_MASTER = """
+        INSERT INTO projects_master (project_id, project_nm, short_nm, master, continent, country)
+        VALUES (%s, %s, %s, %s, %s, %s)
+        ON DUPLICATE KEY UPDATE 
+            project_nm = VALUES(project_nm), short_nm = VALUES(short_nm),
+            master = VALUES(master), continent = VALUES(continent), country = VALUES(country)
+    """
+    
+    # 부서 정보 업데이트
+    UPDATE_DEPARTMENT = "UPDATE projects_master SET department = %s WHERE project_id = %s"
+    
+    # 히스토리(로그/파일수) 저장
+    UPSERT_HISTORY = """
+        INSERT INTO projects_history (project_id, crawl_date, recent_log, file_count) 
+        VALUES (%s, CURRENT_DATE(), %s, %s) 
+        ON DUPLICATE KEY UPDATE recent_log=VALUES(recent_log), file_count=VALUES(file_count)
+    """

style/common.css

@@ -125,8 +125,21 @@ button { cursor: pointer; border: none; transition: all 0.2s ease; }
 .btn-danger:hover { background: #fecaca; }
 
 /* Existing Utils - Compatibility */
-._button-small { @extend .btn; padding: 6px 14px; font-size: 12px; background: var(--primary-color); color: #fff; border-radius: 6px; }
+._button-xsmall { 
-._button-medium { @extend .btn; padding: 10px 20px; background: var(--primary-color); color: #fff; border-radius: 6px; font-weight: 700; }
+    display: inline-flex; align-items: center; justify-content: center;
+    padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 4px; border: 1px solid var(--border-color);
+    background: #fff; color: var(--text-main); cursor: pointer; transition: 0.2s;
+}
+._button-xsmall:hover { background: var(--bg-muted); border-color: var(--primary-color); color: var(--primary-color); }
+
+._button-small { 
+    display: inline-flex; align-items: center; justify-content: center;
+    padding: 6px 14px; font-size: 12px; background: var(--primary-color); color: #fff; border-radius: 6px; border: none; cursor: pointer;
+}
+._button-medium { 
+    display: inline-flex; align-items: center; justify-content: center;
+    padding: 10px 20px; background: var(--primary-color); color: #fff; border-radius: 6px; font-weight: 700; border: none; cursor: pointer;
+}
 .sync-btn { background: var(--primary-color); color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; }
 
 /* Badges */

style/dashboard.css

@@ -1,45 +1,35 @@
+/* Dashboard Constants */
 :root {
-    --topbar-h: 36px;
     --header-h: 56px;
     --activity-h: 110px;
     --fixed-total-h: calc(var(--topbar-h) + var(--header-h) + var(--activity-h));
-    
-    --primary-color: #1E5149;
-    --primary-lv-0: #f0f7f4;
-    --primary-lv-1: #e1eee9;
-    --border-color: #e5e7eb;
-    --bg-muted: #F9FAFB;
-    --text-main: #111827;
-    --text-sub: #6B7280;
-    --error-color: #F21D0D;
 }
 
-/* Portal (Index) */
+/* 1. Portal (Index) */
 .portal-container {
-    display: flex;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
-    flex-direction: column;
+    height: calc(100vh - var(--topbar-h)); background: var(--bg-muted); padding: var(--space-lg); margin-top: var(--topbar-h);
-    align-items: center;
-    justify-content: center;
-    height: calc(100vh - var(--topbar-h));
-    background: var(--bg-muted);
-    padding: 32px;
-    margin-top: var(--topbar-h);
 }
-
 .portal-header { text-align: center; margin-bottom: 50px; }
 .portal-header h1 { font-size: 28px; color: var(--primary-color); margin-bottom: 10px; font-weight: 800; }
 .portal-header p { color: var(--text-sub); font-size: 15px; }
+
 .button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; width: 100%; max-width: 800px; }
-.portal-card { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 40px; text-align: center; transition: all 0.3s ease; width: 100%; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; gap: 20px; cursor: pointer; text-decoration: none; }
+.portal-card {
-.portal-card:hover { transform: translateY(-8px); border-color: var(--primary-color); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
+    background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 40px;
+    text-align: center; transition: all 0.3s ease; width: 100%; box-shadow: var(--box-shadow);
+    display: flex; flex-direction: column; align-items: center; gap: 20px;
+}
+.portal-card:hover { transform: translateY(-8px); border-color: var(--primary-color); box-shadow: var(--box-shadow-lg); }
 .portal-card i { font-size: 48px; color: var(--primary-color); }
 .portal-card h3 { font-size: 20px; color: var(--text-main); margin: 0; }
 .portal-card p { font-size: 14px; color: var(--text-sub); margin: 0; }
 
-/* Dashboard Fixed Elements */
+/* 2. Dashboard Header & Activity */
 header {
     position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 1001;
-    background: #fff; height: var(--header-h); display: flex; justify-content: space-between; align-items: center; padding: 0 32px; border-bottom: 1px solid #f5f5f5;
+    background: #fff; height: var(--header-h); display: flex; justify-content: space-between; align-items: center; 
+    padding: 0 var(--space-lg); border-bottom: 1px solid #f5f5f5;
 }
 
 .activity-dashboard-wrapper {
@@ -47,19 +37,22 @@ header {
     background: #fff; height: var(--activity-h); border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 6px rgba(0,0,0,0.03);
 }
 
-.activity-dashboard { max-width: 1200px; margin: 0 auto; height: 100%; display: flex; gap: 15px; padding: 10px 32px 20px 32px; }
+.activity-dashboard { max-width: 1200px; margin: 0 auto; height: 100%; display: flex; gap: 15px; padding: 10px 32px 20px; }
-.activity-card { flex: 1; padding: 12px 15px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-left: 5px solid transparent; }
+.activity-card { 
-.activity-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
+    flex: 1; padding: 12px 15px; border-radius: var(--radius-lg); cursor: pointer;
+    display: flex; flex-direction: column; justify-content: center; gap: 2px; border-left: 5px solid transparent; 
+}
+.activity-card:hover { transform: translateY(-2px); box-shadow: var(--box-shadow); }
 .activity-card.active { background: #e8f5e9; border-left-color: #4DB251; }
 .activity-card.warning { background: #fff8e1; border-left-color: #FFBF00; }
-.activity-card.stale { background: #ffebee; border-left-color: #F21D0D; }
+.activity-card.stale { background: #ffebee; border-left-color: var(--error-color); }
 .activity-card.unknown { background: #f5f5f5; border-left-color: #9e9e9e; }
 .activity-card .label { font-size: 11px; font-weight: 600; opacity: 0.7; }
 .activity-card .count { font-size: 20px; font-weight: 800; }
 
-.main-content { margin-top: var(--fixed-total-h); padding: 32px; max-width: 1400px; margin-left: auto; margin-right: auto; }
+.main-content { margin-top: var(--fixed-total-h); padding: var(--space-lg); max-width: 1400px; margin-left: auto; margin-right: auto; }
 
-/* 로그 콘솔 (Terminal Style) */
+/* 3. Log Console */
 .log-console {
     position: sticky; top: var(--fixed-total-h); z-index: 999;
     background: #000; color: #0f0; font-family: 'Consolas', monospace; padding: 15px; margin-bottom: 20px;
@@ -67,120 +60,64 @@ header {
 }
 .log-console-header { color: #fff; border-bottom: 1px solid #333; margin-bottom: 10px; padding-bottom: 5px; font-weight: bold; }
 
-/* 인증 모달 */
+/* 4. Auth Modal (Page Specific) */
-.activity-modal-overlay {
+.auth-modal-content { 
-    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+    background: #fff; width: 440px; border-radius: 16px; padding: 40px; text-align: center; 
-    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 3000;
+    box-shadow: var(--box-shadow-modal); display: flex; flex-direction: column; gap: 32px; 
-    display: flex; align-items: center; justify-content: center; padding: 20px;
 }
-.activity-modal-content { background: #fff; width: 600px; max-height: 85vh; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
+.input-group { display: flex; flex-direction: column; gap: 8px; text-align: left; }
-.auth-modal-content { background: #fff; width: 440px; border-radius: 16px; padding: 40px; text-align: center; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 32px; border: 1px solid rgba(0,0,0,0.05); }
-
-.auth-header i { font-size: 32px; color: var(--primary-color); margin-bottom: 16px; }
-.auth-header h3 { font-size: 20px; font-weight: 800; color: #111; margin-bottom: 8px; }
-.auth-header p { font-size: 13px; color: var(--text-sub); }
-
-.auth-body { display: flex; flex-direction: column; gap: 20px; text-align: left; }
-.input-group { display: flex; flex-direction: column; gap: 8px; }
 .input-group label { font-size: 12px; font-weight: 700; color: var(--text-main); }
 .input-group input { 
     height: 48px; padding: 0 16px; border: 1px solid var(--border-color); border-radius: 8px; 
-    font-size: 14px; transition: 0.2s; background: #f9f9f9;
+    font-size: 14px; background: #f9f9f9; width: 100%;
 }
-.input-group input:focus { border-color: var(--primary-color); background: #fff; box-shadow: 0 0 0 3px var(--primary-lv-0); outline: none; }
+.input-group input:focus { border-color: var(--primary-color); background: #fff; outline: none; }
 
-.error-text { color: var(--error-color); font-size: 12px; font-weight: 600; text-align: center; margin-top: -10px; }
+/* 5. Accordion & Data Tables */
-
-.auth-footer { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; }
-.auth-footer button { 
-    height: 48px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: 0.2s;
-}
-.cancel-btn { background: #f1f3f5; color: #495057; }
-.cancel-btn:hover { background: #e9ecef; }
-.login-btn { background: var(--primary-color); color: #fff; }
-.login-btn:hover { background: #153a34; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30,81,73,0.3); }
-.modal-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
-.modal-header h3 { margin: 0; font-size: 16px; color: var(--primary-color); }
-.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-sub); }
-.modal-body { padding: 20px; overflow-y: auto; }
-.modal-row { cursor: pointer; border-bottom: 1px solid #f5f5f5; }
-.modal-row:hover { background: var(--primary-lv-0); }
-
-/* Accordion Layout - 정밀 정렬 개선 */
 .accordion-list-header { 
     position: sticky; top: var(--fixed-total-h); background: #fff; z-index: 900; 
     font-size: 11px; font-weight: 700; color: var(--text-sub); 
-    padding: 12px 24px; /* 패딩 통일 */
+    padding: 12px 24px; border-bottom: 2px solid var(--primary-color); 
-    border-bottom: 2px solid var(--primary-color); 
+    display: grid; grid-template-columns: 2.5fr 1fr 1fr 0.8fr 2fr; gap: 16px; 
-    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
-    display: grid; grid-template-columns: 2.5fr 1fr 1fr 0.8fr 2fr; gap: 16px; align-items: center; 
 }
 
 .accordion-header { 
     display: grid; grid-template-columns: 2.5fr 1fr 1fr 0.8fr 2fr; gap: 16px; 
-    padding: 12px 24px; /* 패딩 통일 */
+    padding: 12px 24px; align-items: center; cursor: pointer; border-bottom: 1px solid var(--border-color); 
-    align-items: center; cursor: pointer; border-bottom: 1px solid var(--border-color); 
-    transition: background 0.1s; 
 }
 .accordion-item:hover .accordion-header { background: var(--primary-lv-0); }
 .accordion-item.active .accordion-header { background: var(--primary-lv-0); border-bottom: none; }
 
-.repo-title { font-weight: 700; color: var(--primary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.repo-title { font-weight: 700; color: var(--primary-color); @extend .text-truncate; }
-.repo-dept, .repo-admin { font-size: 12px; color: var(--text-main); }
 .repo-files { text-align: center; font-weight: 600; }
-.repo-log { font-size: 11px; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.repo-log { font-size: 11px; color: var(--text-sub); @extend .text-truncate; }
 
-.accordion-body {
+.accordion-body { display: none; padding: 24px; background: #fff; border-bottom: 1px solid var(--border-color); }
-    display: none;
-    padding: 24px 24px 32px 24px; /* 좌우 패딩을 행 헤더와 일치시킴 */
-    background: #fff; /* 일체감을 위해 흰색 배경 사용 가능 (필요시 var(--bg-muted)) */
-    border-bottom: 1px solid var(--border-color);
-}
 .accordion-item.active .accordion-body { display: block; }
 
-/* 상세 표 정밀 정렬 */
 .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
 .detail-section h4 { 
     font-size: 13px; margin-bottom: 12px; color: var(--text-main); 
-    border-left: 3px solid var(--primary-color); padding-left: 10px;
+    border-left: 3px solid var(--primary-color); padding-left: 10px; font-weight: 700;
-    font-weight: 700;
 }
 
-.data-table { 
+/* Personnel & Activity Tables */
-    width: 100%; border-collapse: collapse; font-size: 12px; 
+#personnel-table th:nth-child(1) { width: 25%; }
-    table-layout: fixed; /* 컬럼 너비 고정을 위해 필수 */
+#personnel-table th:nth-child(2) { width: 45%; }
-}
+#activity-table th:nth-child(1) { width: 20%; }
-.data-table th, .data-table td { 
+#activity-table th:nth-child(2) { width: 50%; }
-    padding: 10px 8px; border-bottom: 1px solid var(--border-color); 
-    text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.data-table th { color: var(--text-sub); font-weight: 600; background: #fcfcfc; }
-
-/* 컬럼별 너비 고정 (위아래 일치 및 정리) */
-/* 참여 인원 상세 표 비율 */
-#personnel-table th:nth-child(1), #personnel-table td:nth-child(1) { width: 25%; }
-#personnel-table th:nth-child(2), #personnel-table td:nth-child(2) { width: 45%; }
-#personnel-table th:nth-child(3), #personnel-table td:nth-child(3) { width: 30%; }
-
-/* 최근 활동 표 비율 */
-#activity-table th:nth-child(1), #activity-table td:nth-child(1) { width: 20%; }
-#activity-table th:nth-child(2), #activity-table td:nth-child(2) { width: 50%; }
-#activity-table th:nth-child(3), #activity-table td:nth-child(3) { width: 30%; }
-
-/* Status Styles */
-.status-warning { background: #fffcf0; }
-.status-error { background: #fff5f4; }
-.warning-text { color: var(--error-color) !important; font-weight: 700; }
 
+/* Location Groups */
 .continent-group, .country-group { margin-bottom: 15px; }
-.continent-header, .country-header { background: #fff; padding: 14px 20px; border: 1px solid var(--border-color); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 700; }
+.continent-header, .country-header { 
+    background: #fff; padding: 14px 20px; border: 1px solid var(--border-color); border-radius: 8px; 
+    display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 700; 
+}
 .continent-header { background: var(--primary-color); color: white; border: none; font-size: 15px; }
 .country-header { font-size: 14px; color: var(--text-main); margin-top: 8px; }
 .continent-body, .country-body { display: none; padding: 10px 0 10px 15px; }
 .active>.continent-body, .active>.country-body { display: block; }
 
-.sync-btn { display: flex; align-items: center; gap: 8px; background-color: var(--primary-color); color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: 0.2s; }
 .admin-info { font-size: 12px; color: var(--text-sub); margin-left: 16px; padding: 6px 12px; background: #f8f9fa; border-radius: 4px; border: 1px solid var(--border-color); }
 .admin-info strong { color: var(--primary-color); font-weight: 700; }
 .base-date-info { font-size: 13px; color: var(--text-sub); background: #fdfdfd; padding: 6px 15px; border-radius: 6px; border: 1px solid var(--border-color); }
-.base-date-info strong { color: #333; font-weight: 700; }

style/inquiries.css

@@ -1,29 +1,68 @@
-
+/* 1. Layout & Board Structure */
 .inquiry-board {
     padding: 0 20px 32px 20px;
-    max-width: 98%; /* Expanded from 1400px to use most of the screen */
+    max-width: 98%;
-    margin: 0 auto;
+    margin: 36px auto 0;
-    margin-top: 36px; /* topbar height */
 }
 
-/* Sticky Header Wrapper */
 .board-sticky-header {
     position: sticky;
     top: 36px;
     background: #fff;
     z-index: 1000;
-    padding-top: 15px;
+    padding: 15px 0 10px;
-    padding-bottom: 10px;
     border-bottom: 1px solid #eee;
 }
 
 .board-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-end;
     margin-bottom: 20px;
 }
 
+/* 2. Stats Dashboard */
+.header-stats {
+    display: flex;
+    gap: 12px;
+}
+
+.stat-item {
+    background: #fff;
+    border: 1px solid #eee;
+    padding: 8px 16px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 80px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.stat-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+
+.stat-label { font-size: 11px; font-weight: 600; color: #888; margin-bottom: 2px; }
+.stat-value { font-size: 18px; font-weight: 700; color: #333; }
+
+/* Status Border Colors */
+.stat-item.total { border-top: 3px solid #1e5149; }
+.stat-item.total .stat-value { color: #1e5149; }
+.stat-item.complete { border-top: 3px solid #2e7d32; }
+.stat-item.complete .stat-value { color: #2e7d32; }
+.stat-item.working { border-top: 3px solid #1565c0; }
+.stat-item.working .stat-value { color: #1565c0; }
+.stat-item.checking { border-top: 3px solid #ef6c00; }
+.stat-item.checking .stat-value { color: #ef6c00; }
+.stat-item.pending { border-top: 3px solid #673ab7; }
+.stat-item.pending .stat-value { color: #673ab7; }
+.stat-item.unconfirmed { border-top: 3px solid #9e9e9e; }
+.stat-item.unconfirmed .stat-value { color: #9e9e9e; }
+
+/* 3. Filters & Notice */
 .notice-container {
     background: #fdfdfd;
     padding: 20px;
@@ -42,26 +81,11 @@
     margin-top: 15px;
 }
 
-.filter-group {
+.filter-group { display: flex; flex-direction: column; gap: 4px; }
-    display: flex;
+.filter-group label { font-size: 12px; font-weight: 600; color: #666; }
-    flex-direction: column;
+.filter-group select, .filter-group input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
-    gap: 4px;
-}
-
-.filter-group label {
-    font-size: 12px;
-    font-weight: 600;
-    color: #666;
-}
-
-.filter-group select,
-.filter-group input {
-    padding: 8px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 14px;
-}
 
+/* 4. Table Styles */
 .inquiry-table {
     width: 100%;
     background: #fff;
@@ -74,7 +98,6 @@
 
 .inquiry-table thead th {
     position: sticky;
-    top: 310px; /* Adjust this value based on header height or use dynamic JS */
     background: #f8f9fa;
     padding: 14px 16px;
     text-align: left;
@@ -93,95 +116,43 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 0; /* Necessary for text-overflow to work in table-cells with percentage or flex-like behavior */
 }
 
-/* Specific overrides for columns that need more or less space */
+/* Table Row Hover & Active State */
+.inquiry-row:hover { background: #fcfcfc; cursor: pointer; }
+.inquiry-row.active-row { background-color: #f0f7f6 !important; }
+.inquiry-row.active-row td { font-weight: 600; color: #1e5149; border-bottom-color: transparent; }
+
+/* Status Badges */
+.status-badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; display: inline-block; }
+.status-complete { background: #e8f5e9; color: #2e7d32; }
+.status-working { background: #e3f2fd; color: #1565c0; }
+.status-checking { background: #fff3e0; color: #ef6c00; }
+.status-pending { background: #f5f5f5; color: #616161; }
+
+/* Table Columns Width & Truncation */
 .inquiry-table td:nth-child(1) { max-width: 50px; }  /* No */
-.inquiry-table td:nth-child(2) { max-width: 120px; } /* PM Type */
+.inquiry-table td:nth-child(2) { max-width: 80px; text-align: center; } /* Image */
-.inquiry-table td:nth-child(3) { max-width: 100px; } /* Env */
+.inquiry-table td:nth-child(3) { max-width: 120px; } /* PM Type */
-.inquiry-table td:nth-child(4) { max-width: 150px; } /* Category */
+.inquiry-table td:nth-child(4) { max-width: 100px; } /* Env */
-.inquiry-table td:nth-child(5) { max-width: 200px; } /* Project */
+.inquiry-table td:nth-child(5) { max-width: 150px; } /* Category */
-.inquiry-table td:nth-child(6) { max-width: 400px; } /* Content */
+.inquiry-table td:nth-child(6) { max-width: 200px; } /* Project */
-.inquiry-table td:nth-child(7) { max-width: 400px; } /* Reply */
+.inquiry-table td:nth-child(7), .inquiry-table td:nth-child(8) { max-width: 400px; } /* Content & Reply */
-.inquiry-table td:nth-child(8) { max-width: 100px; } /* Author */
+.inquiry-table td:nth-child(9) { max-width: 100px; } /* Author */
-.inquiry-table td:nth-child(9) { max-width: 120px; } /* Date */
+.inquiry-table td:nth-child(10) { max-width: 120px; } /* Date */
-.inquiry-table td:nth-child(10) { max-width: 100px; } /* Status */
+.inquiry-table td:nth-child(11) { max-width: 100px; } /* Status */
 
-/* Reset max-width for detail row to allow it to span full width */
+/* 5. Detail (Accordion) Styles */
-.detail-row td {
+.detail-row { display: none; background: #fdfdfd; }
-    max-width: none;
+.detail-row.active { display: table-row; }
-    white-space: normal;
+.detail-row td { max-width: none; white-space: normal; overflow: visible; }
-    overflow: visible;
-}
-
-.status-badge {
-    padding: 4px 10px;
-    border-radius: 20px;
-    font-size: 11px;
-    font-weight: 700;
-    display: inline-block;
-}
-
-.status-complete {
-    background: #e8f5e9;
-    color: #2e7d32;
-}
-
-.status-working {
-    background: #e3f2fd;
-    color: #1565c0;
-}
-
-.status-checking {
-    background: #fff3e0;
-    color: #ef6c00;
-}
-
-.status-pending {
-    background: #f5f5f5;
-    color: #616161;
-}
-
-.inquiry-row:hover {
-    background: #fcfcfc;
-    cursor: pointer;
-}
-
-/* Expanded Row Highlight */
-.inquiry-row.active-row {
-    background-color: #f0f7f6 !important; /* Very light mint gray */
-}
-
-.inquiry-row.active-row td {
-    font-weight: 600;
-    color: #1e5149;
-    border-bottom-color: transparent; /* Seamless connection with detail */
-}
-
-.content-preview {
-    max-width: 500px; /* Increased from 300px */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-/* Accordion Detail Row Style */
-.detail-row {
-    display: none;
-    background: #fdfdfd;
-}
-
-.detail-row.active {
-    display: table-row;
-}
 
 .detail-container {
     padding: 24px;
     border-left: 6px solid #1e5149;
-    background: #f9fafb; /* Slightly different background for grouping */
+    background: #f9fafb;
     box-shadow: inset 0 4px 15px rgba(0,0,0,0.08);
-    position: relative; /* For positioning the close button */
+    position: relative;
     border-bottom: 2px solid #eee;
 }
 
@@ -208,86 +179,38 @@
     font-weight: 600;
     color: #666;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    transition: all 0.2s;
     z-index: 10;
 }
+.btn-close-accordion::after { content: "▲"; font-size: 10px; margin-left: 5px; }
 
-.btn-close-accordion:hover {
+.detail-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px; font-size: 13px; color: #666; }
-    background: #e0e0e0;
+.detail-label { font-weight: 700; color: #888; margin-right: 8px; }
-    color: #333;
-}
 
-.btn-close-accordion::after {
+.detail-q-section { background: #f8f9fa; padding: 20px; border-radius: 8px; }
-    content: "▲";
+.detail-a-section { background: #f1f8f7; padding: 20px; border-radius: 8px; border-left: 5px solid #1e5149; }
-    font-size: 10px;
-}
 
-.detail-q-section {
+/* 6. Image Preview & Foldable Section */
-    background: #f8f9fa;
+.img-thumbnail { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; border: 1px solid #ddd; cursor: pointer; transition: transform 0.2s; }
-    padding: 20px;
+.img-thumbnail:hover { transform: scale(1.1); }
-    border-radius: 8px;
+.no-img { font-size: 10px; color: #ccc; font-style: italic; }
-}
 
-.detail-a-section {
+.detail-image-section { margin-bottom: 20px; background: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb; overflow: hidden; }
-    background: #f1f8f7;
+.image-section-header { padding: 12px 16px; background: #f1f5f9; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
-    padding: 20px;
+.image-section-header:hover { background: #e2e8f0; }
-    border-radius: 8px;
+.image-section-header h4 { margin: 0; color: #1e5149; display: flex; align-items: center; gap: 8px; }
-    border-left: 5px solid #1e5149;
+.image-section-content { padding: 20px; display: flex; justify-content: center; background: #fff; border-top: 1px solid #eee; }
-}
+.image-section-content.collapsed { display: none; }
+.toggle-icon { font-size: 12px; color: #64748b; transition: transform 0.3s; }
+.detail-image-section.active .toggle-icon { transform: rotate(180deg); }
 
-.detail-meta-grid {
+.preview-img { max-width: 100%; max-height: 400px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); object-fit: contain; }
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 15px;
-    margin-bottom: 15px;
-    font-size: 13px;
-    color: #666;
-}
 
-.detail-label {
+/* 7. Forms & Reply */
-    font-weight: 700;
-    color: #888;
-    margin-right: 8px;
-}
-
-/* Reply Form Enhancement */
 .reply-edit-form textarea {
-    width: 100%;
+    width: 100%; height: 120px; padding: 12px; border: 1px solid #ddd; border-radius: 6px;
-    height: 120px; /* Fixed height */
+    font-family: inherit; font-size: 14px; margin-bottom: 15px; resize: none; background: #fff;
-    padding: 12px;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    font-family: inherit;
-    font-size: 14px;
-    margin-bottom: 15px;
-    resize: none; /* Disable resizing */
-    background: #fff;
-    transition: all 0.2s;
-}
-
-.reply-edit-form textarea:disabled,
-.reply-edit-form select:disabled,
-.reply-edit-form input:disabled {
-    background: #fcfcfc;
-    color: #666;
-    border-color: #eee;
-    cursor: default;
-}
-
-.reply-edit-form.readonly .btn-save,
-.reply-edit-form.readonly .btn-delete,
-.reply-edit-form.readonly .btn-cancel {
-    display: none;
-}
-
-.reply-edit-form.editable .btn-edit {
-    display: none;
-}
-
-.reply-edit-form.editable textarea {
-    border-color: #1e5149;
-    box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1);
 }
+.reply-edit-form textarea:disabled, .reply-edit-form select:disabled, .reply-edit-form input:disabled { background: #fcfcfc; color: #666; border-color: #eee; }
+.reply-edit-form.readonly .btn-save, .reply-edit-form.readonly .btn-delete, .reply-edit-form.readonly .btn-cancel { display: none; }
+.reply-edit-form.editable .btn-edit { display: none; }
+.reply-edit-form.editable textarea { border-color: #1e5149; box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1); }

style/mail.css

@@ -1,477 +1,219 @@
-/* Mail Manager Layout */
+/* Mail Manager Layout (Vertical Split) */
 .mail-wrapper {
-    display: flex;
+    display: flex; height: calc(100vh - var(--topbar-h));
-    height: calc(100vh - 36px);
+    margin-top: var(--topbar-h); background: #fff; overflow: hidden;
-    margin-top: 36px;
-    background: #fff;
-    overflow: hidden;
-}
-
-.mail-sidebar {
-    display: none; /* 사이드바 삭제 */
 }
 
 .mail-list-area {
-    width: 400px;
+    width: 400px; border-right: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
+    display: flex; flex-direction: column; height: 100%; background: #fff; position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: #fff;
-    position: relative;
-}
-
-/* 탭 가로 배치 복구 */
-.mail-tabs {
-    display: flex;
-    border-bottom: 1px solid var(--border-color);
-    background: #f8f9fa;
-    flex-shrink: 0;
-    width: 100%;
 }
 
+/* 1. Tabs & Search */
+.mail-tabs { display: flex; border-bottom: 1px solid var(--border-color); background: #f8f9fa; flex-shrink: 0; }
 .mail-tab {
-    flex: 1;
+    flex: 1; padding: 12px 0; text-align: center; cursor: pointer;
-    padding: 12px 0;
+    font-weight: 700; color: #a0aec0; font-size: 11px; transition: all 0.2s ease;
-    text-align: center;
+    border-bottom: 2px solid transparent; display: flex; align-items: center; justify-content: center; gap: 6px;
-    cursor: pointer;
-    font-weight: 700;
-    color: #a0aec0;
-    font-size: 11px;
-    transition: all 0.2s ease;
-    border-bottom: 2px solid transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
 }
+.mail-tab:hover { background: #edf2f7; color: var(--primary-color); }
+.mail-tab.active { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); background: #fff; }
 
-.mail-tab:hover {
+.search-bar { padding: 16px 24px; border-bottom: 1px solid var(--border-color); background: #fff; flex-shrink: 0; }
-    background: #edf2f7;
-    color: var(--primary-color);
-}
 
-.mail-tab.active {
-    color: var(--primary-color);
-    border-bottom: 2px solid var(--primary-color);
-    background: #fff;
-}
-
-/* 검색창 여백 및 간격 조정 */
-.search-bar {
-    padding: 16px 24px;
-    border-bottom: 1px solid var(--border-color);
-    background: #fff;
-    flex-shrink: 0;
-    margin-bottom: 20px;
-}
-
-/* 상단 선택 액션바 */
 .mail-bulk-actions {
-    display: none;
+    display: none; padding: 8px 16px; background: #f7fafc; 
-    padding: 8px 16px;
+    border-bottom: 1px solid var(--border-color); align-items: center; justify-content: space-between; font-size: 12px;
-    background: #f7fafc;
-    border-bottom: 1px solid var(--border-color);
-    align-items: center;
-    justify-content: space-between;
-    font-size: 12px;
 }
+.mail-bulk-actions.active { display: flex; }
 
-.mail-bulk-actions.active {
+/* 2. Mail Items */
-    display: flex;
+.mail-items-container { flex: 1; overflow-y: auto; padding-bottom: 60px; }
-}
-
-/* 메일리스트 컨테이너 */
-.mail-items-container {
-    flex: 1;
-    overflow-y: auto;
-    padding-bottom: 60px; /* 하단 고정 버튼 공간 확보 */
-}
-
-/* 메일 아이템 스타일 */
 .mail-item {
-    padding: 16px;
+    padding: 16px; border-bottom: 1px solid var(--border-color); cursor: pointer;
-    border-bottom: 1px solid var(--border-color);
+    display: flex; align-items: flex-start; transition: 0.2s;
-    cursor: pointer;
-    transition: 0.2s;
-    display: flex;
-    align-items: flex-start;
 }
+.mail-item:hover { background: var(--bg-muted); }
+.mail-item.active { background: var(--primary-lv-0); border-left: 4px solid var(--primary-color); }
 
-.mail-item:hover {
+.mail-item-checkbox { width: 16px; height: 16px; cursor: pointer; margin-right: 12px; margin-top: 2px; }
-    background: var(--bg-muted);
+.mail-item-content { flex: 1; min-width: 0; }
-}
+.mail-item-info { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
+.mail-date { font-size: 11px; color: var(--text-sub); white-space: nowrap; }
 
-.mail-item.active {
-    background: #E9EEED;
-    border-left: 4px solid var(--primary-color);
-}
-
-.mail-item-checkbox {
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    margin-right: 12px;
-    margin-top: 2px;
-}
-
-.mail-item-content {
-    flex: 1;
-    min-width: 0;
-}
-
-.mail-item-info {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.mail-date {
-    font-size: 11px;
-    color: var(--text-sub);
-    white-space: nowrap;
-}
-
-/* 텍스트형 삭제 버튼 스타일 */
 .btn-mail-delete {
-    background: #f7fafc;
+    background: #f7fafc; border: 1px solid var(--border-color); color: #718096;
-    border: 1px solid var(--border-color);
+    font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600;
-    color: #718096;
-    cursor: pointer;
-    font-size: 10px;
-    padding: 2px 8px;
-    transition: all 0.2s;
-    border-radius: 4px;
-    font-weight: 600;
 }
+.btn-mail-delete:hover { color: var(--error-color); background: #fff5f5; border-color: #feb2b2; }
 
-.btn-mail-delete:hover {
+/* 3. Content Area */
-    color: #e53e3e;
+.mail-content-area { flex: 1; display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--border-color); }
-    background: #fff5f5;
+.mail-content-header { padding: var(--space-lg); border-bottom: 1px solid var(--border-color); }
-    border-color: #feb2b2;
+.mail-body { padding: var(--space-lg); line-height: 1.6; min-height: 200px; }
-}
-
-/* 하단 버튼 고정 */
-.address-book-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: 12px 16px;
-    border-top: 1px solid var(--border-color);
-    background: #fff;
-    flex-shrink: 0;
-    z-index: 5;
-    display: flex;
-    gap: 8px;
-}
-
-.mail-content-area {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    border-right: 1px solid var(--border-color);
-}
-
-/* Mail Preview & Toggle Handle */
-.mail-preview-area {
-    width: 0;
-    background: #f1f3f5;
-    display: flex;
-    flex-direction: column;
-    transition: all 0.3s ease;
-    overflow: visible;
-    position: relative;
-    border-left: 0px solid transparent;
-}
-
-.mail-preview-area.active {
-    width: 500px;
-    border-left: 1px solid var(--border-color);
-}
-
-.mail-preview-area > *:not(.preview-toggle-handle) {
-    opacity: 0;
-    transition: opacity 0.2s;
-    pointer-events: none;
-}
-
-.mail-preview-area.active > * {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.preview-toggle-handle {
-    position: absolute;
-    left: -20px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 20px;
-    height: 60px;
-    background: var(--primary-color);
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: 8px 0 0 8px;
-    font-size: 10px;
-    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
-    z-index: 10;
-}
-
-.preview-toggle-handle:hover {
-    background: var(--primary-lv-8);
-}
-
-.preview-header {
-    padding: 12px 16px;
-    background: #fff;
-    border-bottom: 1px solid var(--border-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.preview-header h3 {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--primary-color);
-}
-
-.preview-content {
-    flex: 1;
-    padding: 20px;
-    overflow-y: auto;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.a4-container {
-    width: 100%;
-    background: #fff;
-    box-shadow: 0 0 20px rgba(0,0,0,0.1);
-    position: relative;
-    aspect-ratio: 1 / 1.414; /* A4 Ratio */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.preview-placeholder {
-    color: var(--text-sub);
-    font-size: 13px;
-    text-align: center;
-    padding: 20px;
-}
-
-.preview-image {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-}
-
-.mail-content-header {
-    padding: var(--space-lg);
-    border-bottom: 1px solid var(--border-color);
-}
-
-.mail-body {
-    padding: var(--space-lg);
-    line-height: 1.6;
-    min-height: 200px;
-}
-
-/* Attachments & AI Analysis */
-.attachment-area {
-    padding: var(--space-lg);
-    border-top: 1px solid var(--border-color);
-    background: var(--bg-muted);
-}
 
+/* 4. Attachments & AI */
+.attachment-area { padding: var(--space-lg); border-top: 1px solid var(--border-color); background: var(--bg-muted); }
 .attachment-item {
-    display: flex;
+    display: flex; align-items: center; gap: var(--space-md); background: #fff;
-    align-items: center;
+    padding: 12px 20px; border-radius: var(--radius-lg);
-    gap: var(--space-md);
+    border: 1px solid var(--border-color); margin-bottom: var(--space-sm); cursor: pointer;
-    background: #fff;
-    padding: var(--space-sm) var(--space-md);
-    border-radius: var(--radius-lg);
-    border: 1px solid var(--border-color);
-    margin-bottom: var(--space-sm);
-    cursor: pointer;
     transition: 0.2s;
 }
+.attachment-item:hover { border-color: var(--primary-color); box-shadow: var(--box-shadow); }
+.attachment-item.active { background: var(--primary-lv-0); border-color: var(--primary-color); }
 
-.attachment-item:hover {
+.file-details { flex: 1; min-width: 0; }
-    border-color: var(--primary-color);
+.file-name { font-size: 13px; font-weight: 700; max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    box-shadow: var(--box-shadow);
+.file-size { font-size: 11px; color: var(--text-sub); }
-}
-
-.attachment-item.active {
-    background: var(--primary-lv-0);
-    border-color: var(--primary-color);
-}
-
-.file-icon {
-    font-size: 20px;
-    flex-shrink: 0;
-}
-
-.file-details {
-    flex: 1;
-    overflow: hidden;
-}
-
-.file-name {
-    font-size: 12px;
-    font-weight: 700;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.file-size {
-    font-size: 10px;
-    color: var(--text-sub);
-}
 
 .btn-group {
-    display: flex;
+    display: flex; align-items: center; gap: 12px; flex-shrink: 0; justify-content: flex-end;
-    gap: var(--space-xs);
-    flex: 1;
-    justify-content: flex-end;
 }
 
 .btn-upload {
-    padding: 6px 12px;
+    padding: 6px 14px; border-radius: 6px; font-size: 11px; font-weight: 700;
-    border-radius: 4px;
+    color: #fff; border: none; cursor: pointer; transition: 0.2s; height: 32px;
-    font-size: 11px;
-    font-weight: 700;
-    color: #fff;
 }
 
-.btn-ai {
+.btn-ai { background: var(--ai-gradient); }
-    background: var(--ai-gradient);
+.btn-ai:hover { filter: brightness(1.1); transform: translateY(-1px); }
-}
 
-.btn-normal {
+.btn-normal { background: var(--primary-color); }
-    background: var(--primary-color);
+.btn-normal:hover { background: var(--primary-hover); transform: translateY(-1px); }
-}
 
 .ai-recommend {
-    font-size: 11px;
+    font-size: 11px; padding: 6px 12px; border-radius: 6px; font-weight: 600;
-    padding: 2px 6px;
+    cursor: pointer; transition: 0.2s; display: inline-block;
-    border-radius: 4px;
+    max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-    font-weight: 700;
+}
-    margin-left: 10px;
+.ai-recommend.smart-mode { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
+.ai-recommend.manual-mode { background: #f1f5f9; color: #475569; border: 1px dashed #cbd5e1; }
+.ai-recommend:hover { transform: scale(1.02); }
+
+/* 5. Preview Area */
+.mail-preview-area {
+    width: 0; background: #f8f9fa; display: flex; flex-direction: column;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative;
+    border-left: 0 solid transparent;
 }
 
-.ai-recommend.smart-mode {
+.mail-preview-area.active { 
-    background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
+    width: 600px; 
-    color: #4a69bd;
+    border-left: 1px solid var(--border-color); 
-    border: 1px solid #d1d9ff;
+    visibility: visible;
 }
 
-.ai-recommend.manual-mode {
+.preview-header {
-    background: var(--hover-bg);
+    height: 56px; padding: 0 24px; border-bottom: 1px solid var(--border-color);
-    color: var(--text-sub);
+    display: flex; align-items: center; justify-content: space-between;
-    border: 1px dashed var(--border-color);
+    background: #fff; flex-shrink: 0;
-    font-weight: 400;
 }
 
-.path-display {
+.preview-header h3 { font-size: 15px; font-weight: 800; color: var(--primary-color); margin: 0; }
-    cursor: pointer;
+
-    padding: 4px 10px;
+#fullViewBtn {
-    border-radius: 6px;
+    background: var(--primary-lv-0) !important;
-    transition: all 0.2s ease;
+    color: var(--primary-color) !important;
+    border: 1px solid var(--primary-lv-1) !important;
+    font-weight: 700 !important;
+    padding: 4px 16px !important;
+    border-radius: 4px !important;
+    font-size: 11px !important;
+    transition: 0.2s !important;
+}
+#fullViewBtn:hover { background: var(--primary-lv-1) !important; }
+
+.preview-toggle-handle {
+    position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
+    width: 20px; height: 60px; background: var(--primary-color); color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 8px 0 0 8px; font-size: 10px; cursor: pointer;
+    box-shadow: -2px 0 5px rgba(0,0,0,0.1); z-index: 100;
+}
+.preview-toggle-handle:hover { background: var(--primary-hover); }
+
+.a4-container {
+    flex: 1; padding: 30px; overflow-y: auto; background: #e9ecef;
+    display: flex; justify-content: center;
+}
+
+.a4-container iframe, .a4-container .preview-placeholder {
+    width: 100%; height: 100%; background: #fff; 
+    box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-radius: 4px;
+}
+
+.preview-placeholder {
+    display: flex; align-items: center; justify-content: center;
+    text-align: center; color: var(--text-sub); font-size: 13px; line-height: 1.6;
+}
+
+.mail-preview-area.active > * { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
+.mail-preview-area > *:not(.preview-toggle-handle) { opacity: 0; visibility: hidden; pointer-events: none; transition: 0.2s; }
+
+/* 6. Footer & Others */
+.address-book-footer {
+    position: absolute; bottom: 0; left: 0; width: 100%; padding: 12px 16px;
+    border-top: 1px solid var(--border-color); background: #fff; display: flex; gap: 8px; z-index: 5;
 }
 
 .file-log-area {
-    display: none;
+    display: none; width: 100%; margin-top: 10px; background: #1a202c;
-    width: 100%;
+    border-radius: 4px; padding: 12px; font-family: monospace; font-size: 11px; color: #cbd5e0;
-    margin-top: 10px;
-    background: #1a202c;
-    border-radius: 4px;
-    padding: 12px;
-    font-family: monospace;
-    font-size: 11px;
-    color: #cbd5e0;
-}
-
-.file-log-area.active {
-    display: block;
-}
-
-.log-line {
-    margin-bottom: 2px;
-}
-
-.log-success {
-    color: #48bb78;
-    font-weight: 700;
-}
-
-.log-info {
-    color: #63b3ed;
-}
-
-/* Toggle Switch */
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 34px;
-    height: 20px;
-}
-
-.switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
 }
+.file-log-area.active { display: block; }
+.log-success { color: #48bb78; font-weight: 700; }
 
+.switch { position: relative; display: inline-block; width: 34px; height: 20px; }
+.switch input { opacity: 0; width: 0; height: 0; }
 .slider {
-    position: absolute;
+    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
-    cursor: pointer;
+    background-color: #ccc; transition: .4s; border-radius: 20px;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    transition: .4s;
-    border-radius: 20px;
 }
-
 .slider:before {
-    position: absolute;
+    position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px;
-    content: "";
+    background-color: white; transition: .4s; border-radius: 50%;
-    height: 14px;
-    width: 14px;
-    left: 3px;
-    bottom: 3px;
-    background-color: white;
-    transition: .4s;
-    border-radius: 50%;
 }
+input:checked+.slider { background: var(--ai-gradient); }
+input:checked+.slider:before { transform: translateX(14px); }
 
-input:checked+.slider {
+/* Restore Path Selector Modal Specific Styles */
-    background: var(--ai-gradient);
+.select-group {
-}
-
-input:checked+.slider:before {
-    transform: translateX(14px);
-}
-
-.ai-toggle-wrap {
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    gap: var(--space-sm);
+    gap: 8px;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--text-sub);
 }
 
-input:checked~.ai-label {
+.select-group label {
-    color: #6d3dc2;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-main);
+}
+
+.modal-select {
+    width: 100%;
+    height: 44px;
+    padding: 0 15px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    font-size: 14px;
+    color: #333;
+    outline: none;
+    transition: all 0.2s;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8L6 8z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 15px center;
+}
+
+.modal-select:focus {
+    border-color: var(--primary-color);
+    background-color: #fff;
+    box-shadow: 0 0 0 3px rgba(30, 81, 73, 0.1);
+}
+
+.modal-select option {
+    padding: 10px;
 }

templates/dashboard.html

@@ -60,15 +60,15 @@
         </div>
     </main>
 
-    <!-- 모달 레이어 (최외각 유지) -->
+    <!-- 모달 레이어 (공통 규격 적용) -->
-    <div id="authModal" class="activity-modal-overlay" style="display:none;">
+    <div id="authModal" class="modal-overlay">
-        <div class="auth-modal-content">
+        <div class="modal-content" style="max-width: 440px; padding: 40px; text-align: center;" onclick="event.stopPropagation()">
-            <div class="auth-header">
+            <div class="auth-header" style="margin-bottom: 32px;">
-                <i class="fas fa-lock"></i>
+                <i class="fas fa-lock" style="font-size: 32px; color: var(--primary-color); margin-bottom: 16px; display: block;"></i>
-                <h3>크롤링 권한 인증</h3>
+                <h3 style="font-size: 20px; font-weight: 800; color: #111; margin-bottom: 8px;">크롤링 권한 인증</h3>
-                <p>시스템 동기화를 위해 관리자 계정으로 로그인하세요.</p>
+                <p style="font-size: 13px; color: var(--text-sub);">시스템 동기화를 위해 관리자 계정으로 로그인하세요.</p>
             </div>
-            <div class="auth-body">
+            <div class="auth-body" style="display: flex; flex-direction: column; gap: 20px; text-align: left; margin-bottom: 32px;">
                 <div class="input-group">
                     <label>관리자 아이디</label>
                     <input type="text" id="authId" placeholder="아이디를 입력하세요">
@@ -78,23 +78,22 @@
                     <input type="password" id="authPw" placeholder="비밀번호를 입력하세요"
                         onkeyup="if(event.key==='Enter') submitAuth()">
                 </div>
-                <div id="authErrorMessage" class="error-text" style="display:none;">크롤링을 할 수 없습니다.</div>
+                <div id="authErrorMessage" class="error-text" style="display:none; color: var(--error-color); font-size: 12px; font-weight: 600; text-align: center; margin-top: -10px;">크롤링을 할 수 없습니다.</div>
             </div>
-            <div class="auth-footer">
+            <div class="auth-footer" style="display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px;">
-                <button class="cancel-btn" onclick="closeAuthModal()">취소</button>
+                <button class="btn btn-secondary" style="height: 48px;" onclick="closeAuthModal()">취소</button>
-                <button class="login-btn" onclick="submitAuth()">인증 및 실행</button>
+                <button class="btn btn-primary" style="height: 48px;" onclick="submitAuth()">인증 및 실행</button>
             </div>
         </div>
     </div>
 
-    <div id="activityDetailModal" class="activity-modal-overlay" style="display:none;"
+    <div id="activityDetailModal" class="modal-overlay" onclick="closeActivityModal()">
-        onclick="closeActivityModal(event)">
+        <div class="modal-content" style="max-width: 600px; padding: 0; overflow: hidden;" onclick="event.stopPropagation()">
-        <div class="activity-modal-content" onclick="event.stopPropagation()">
+            <div class="modal-header" style="padding: 20px; margin-bottom: 0;">
-            <div class="modal-header">
                 <h3 id="modalTitle">상세 목록</h3>
-                <button class="close-btn" onclick="closeActivityModal()">&times;</button>
+                <span class="modal-close" onclick="closeActivityModal()">&times;</span>
             </div>
-            <div class="modal-body">
+            <div class="modal-body" style="padding: 20px; max-height: 70vh; overflow-y: auto;">
                 <table class="data-table">
                     <thead>
                         <tr>
@@ -108,6 +107,9 @@
                     </tbody>
                 </table>
             </div>
+            <div style="padding: 16px 20px; border-top: 1px solid var(--border-color); text-align: right; background: #fdfdfd;">
+                <button class="btn btn-secondary" onclick="closeActivityModal()">닫기</button>
+            </div>
         </div>
     </div>
 

templates/inquiries.html

@@ -36,8 +36,31 @@
                     <h2>문의사항</h2>
                     <p style="font-size: 13px; color: #666; margin-top: 4px;">시스템 운영 관련 불편사항 및 개선 요청 관리</p>
                 </div>
-                <div class="header-actions">
+                <div class="header-stats" id="headerStats">
-                    <button class="sync-btn" onclick="loadInquiries()">새로고침</button>
+                    <div class="stat-item total">
+                        <span class="stat-label">전체</span>
+                        <span class="stat-value" id="countTotal">0</span>
+                    </div>
+                    <div class="stat-item complete">
+                        <span class="stat-label">완료</span>
+                        <span class="stat-value" id="countComplete">0</span>
+                    </div>
+                    <div class="stat-item working">
+                        <span class="stat-label">작업 중</span>
+                        <span class="stat-value" id="countWorking">0</span>
+                    </div>
+                    <div class="stat-item checking">
+                        <span class="stat-label">확인 중</span>
+                        <span class="stat-value" id="countChecking">0</span>
+                    </div>
+                    <div class="stat-item pending">
+                        <span class="stat-label">개발예정</span>
+                        <span class="stat-value" id="countPending">0</span>
+                    </div>
+                    <div class="stat-item unconfirmed">
+                        <span class="stat-label">미확인</span>
+                        <span class="stat-value" id="countUnconfirmed">0</span>
+                    </div>
                 </div>
             </div>
 
@@ -114,6 +137,7 @@
             <thead>
                 <tr>
                     <th width="50">No</th>
+                    <th width="80">이미지</th>
                     <th width="120">PM 종류</th>
                     <th width="100">환경</th>
                     <th width="150">구분</th>
@@ -131,6 +155,24 @@
         </table>
     </main>
 
+    <!-- 이미지 크게 보기 모달 (디자인 가이드 - 화이트 계열 및 우측 하단 닫기 적용) -->
+    <div id="imageModal" class="modal-overlay" onclick="closeImageModal()">
+        <div class="modal-content" style="max-width: 960px; width: 92%; padding: 0; overflow: hidden; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff;" onclick="event.stopPropagation()">
+            <div class="modal-header" style="padding: 16px 24px; margin-bottom: 0; border-bottom: 1px solid #f1f5f9; background: #fff;">
+                <h3 style="color: #1e5149; font-weight: 700; font-size: 16px;">첨부 이미지 확대 보기</h3>
+                <span class="modal-close" onclick="closeImageModal()" style="font-size: 24px; color: #94a3b8;">&times;</span>
+            </div>
+            <div style="padding: 32px; background: #fff; display: flex; justify-content: center; align-items: center; min-height: 300px; max-height: 75vh; overflow: auto;">
+                <img id="modalImage" style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);">
+            </div>
+            <div style="padding: 16px 24px; border-top: 1px solid #f1f5f9; text-align: right; background: #fff;">
+                <button class="_button-medium" style="background: #1e5149; color: #fff; border: none; padding: 10px 28px; border-radius: 8px; cursor: pointer; transition: background 0.2s;" 
+                        onmouseover="this.style.background='#163b36'" onmouseout="this.style.background='#1e5149'"
+                        onclick="closeImageModal()">닫기</button>
+            </div>
+        </div>
+    </div>
+
     <script src="js/common.js"></script>
     <script src="js/inquiries.js"></script>
 </body>

templates/mailTest.html

@@ -132,8 +132,7 @@
             <div class="a4-container" id="previewContainer">
                 <div class="preview-placeholder">파일을 클릭하면<br>미리보기가 표시됩니다.</div>
             </div>
-    </div>
+        </aside>
-    </aside>
     </div>
 
     {% include 'modals/address_book.html' %}

templates/modals/address_book.html

@@ -1,39 +1,45 @@
-<!-- 주소록 모달 -->
+<!-- 주소록 모달 (공통 규격 적용) -->
-<div id="addressBookModal" class="modal-overlay">
+<div id="addressBookModal" class="modal-overlay" onclick="closeAddressBook()">
-    <div class="modal-content" style="max-width: 850px;">
+    <div class="modal-content" style="max-width: 850px;" onclick="event.stopPropagation()">
         <div class="modal-header">
             <h3>공사 관계자 주소록</h3>
             <div class="flex-center" style="gap:10px;">
-                <button class="_button-small" style="border:none;" onclick="toggleAddContactForm()">+ 추가하기</button>
+                <button class="btn btn-primary" 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);">
+            style="display:none; background:var(--bg-muted); padding:20px; border-radius:12px; margin-bottom:20px; border:1px solid var(--border-color);">
-            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:10px;">
+            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:15px;">
-                <input type="text" id="newContactName" placeholder="성명"
+                <div class="input-group">
-                    style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                    <label style="font-size:11px; margin-bottom:4px; display:block;">성명</label>
-                <input type="text" id="newContactDept" placeholder="소속/직위"
+                    <input type="text" id="newContactName" placeholder="성명 입력" style="height:36px; padding:0 12px; border:1px solid #ddd; border-radius:6px; width:100%; font-size:13px;">
-                    style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                </div>
-                <input type="text" id="newContactEmail" placeholder="이메일"
+                <div class="input-group">
-                    style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                    <label style="font-size:11px; margin-bottom:4px; display:block;">소속/직위</label>
-                <input type="text" id="newContactPhone" placeholder="연락처"
+                    <input type="text" id="newContactDept" placeholder="소속/직위 입력" style="height:36px; padding:0 12px; border:1px solid #ddd; border-radius:6px; width:100%; font-size:13px;">
-                    style="padding:8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
+                </div>
+                <div class="input-group">
+                    <label style="font-size:11px; margin-bottom:4px; display:block;">이메일</label>
+                    <input type="text" id="newContactEmail" placeholder="이메일 입력" style="height:36px; padding:0 12px; border:1px solid #ddd; border-radius:6px; width:100%; font-size:13px;">
+                </div>
+                <div class="input-group">
+                    <label style="font-size:11px; margin-bottom:4px; display:block;">연락처</label>
+                    <input type="text" id="newContactPhone" placeholder="연락처 입력" style="height:36px; padding:0 12px; border:1px solid #ddd; border-radius:6px; width:100%; font-size:13px;">
+                </div>
             </div>
-            <div class="flex-center" style="gap:8px;">
+            <div class="flex-center" style="gap:10px;">
-                <button class="_button-medium" style="flex:1; background:var(--primary-color); color:#fff;"
+                <button class="btn btn-primary" style="flex:1;" onclick="addContact()">저장</button>
-                    onclick="addContact()">저장</button>
+                <button class="btn btn-secondary" style="flex:1;" onclick="toggleAddContactForm()">취소</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;">
+            <input type="text" placeholder="이름, 부서, 연락처 검색..." style="width:100%; height: 36px; padding:0 12px; border:1px solid var(--border-color); border-radius:6px;">
         </div>
-        <div style="max-height: 400px; overflow-y: auto;">
+        <div style="max-height: 400px; overflow-y: auto; border:1px solid var(--border-color); border-radius:8px;">
             <table class="data-table">
                 <thead>
                     <tr>
@@ -41,7 +47,7 @@
                         <th>소속/직위</th>
                         <th>이메일</th>
                         <th>연락처</th>
-                        <th style="text-align:right;">관리</th>
+                        <th style="text-align:right; padding-right:15px;">관리</th>
                     </tr>
                 </thead>
                 <tbody id="addressBookBody">
@@ -49,6 +55,8 @@
                 </tbody>
             </table>
         </div>
-        <button class="btn-confirm" style="margin-top:20px;" onclick="closeAddressBook()">닫기</button>
+        <div style="margin-top:20px; text-align:right;">
+            <button class="btn btn-secondary" style="padding: 8px 32px;" onclick="closeAddressBook()">닫기</button>
+        </div>
     </div>
 </div>

templates/modals/path_selector.html

@@ -1,22 +1,24 @@
-<!-- 경로 선택 모달 -->
+<!-- 경로 선택 모달 (공통 규격 적용) -->
-<div id="pathModal" class="modal-overlay">
+<div id="pathModal" class="modal-overlay" onclick="closeModal()">
-    <div class="modal-content">
+    <div class="modal-content" style="max-width: 500px;" onclick="event.stopPropagation()">
         <div class="modal-header">
             <h3>파일 보관 경로 선택</h3>
             <span class="modal-close" onclick="closeModal()">&times;</span>
         </div>
-        <div class="select-group">
+        <div style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px;">
-            <label>탭 (Tab)</label>
+            <div class="select-group" style="margin-bottom: 0;">
-            <select id="tabSelect" class="modal-select" onchange="updateCategories()"></select>
+                <label>탭 (Tab)</label>
+                <select id="tabSelect" class="modal-select" onchange="updateCategories()"></select>
+            </div>
+            <div class="select-group" style="margin-bottom: 0;">
+                <label>카테고리 (Category)</label>
+                <select id="categorySelect" class="modal-select" onchange="updateSubs()"></select>
+            </div>
+            <div class="select-group" style="margin-bottom: 0;">
+                <label>서브카테고리 (Sub-Category)</label>
+                <select id="subSelect" class="modal-select"></select>
+            </div>
         </div>
-        <div class="select-group">
+        <button class="btn btn-primary" style="width: 100%; height: 44px;" onclick="applyPathSelection()">경로 확정하기</button>
-            <label>카테고리 (Category)</label>
-            <select id="categorySelect" class="modal-select" onchange="updateSubs()"></select>
-        </div>
-        <div class="select-group">
-            <label>서브카테고리 (Sub-Category)</label>
-            <select id="subSelect" class="modal-select"></select>
-        </div>
-        <button class="btn-confirm" onclick="applyPathSelection()">경로 확정하기</button>
     </div>
 </div>