diff --git a/ADMIN_PLAN.md b/ADMIN_PLAN.md
new file mode 100644
index 0000000..800be20
--- /dev/null
+++ b/ADMIN_PLAN.md
@@ -0,0 +1,31 @@
+# 데이터 분석 관리자 페이지 기획안
+
+## 1. 프로젝트 개요
+본 프로젝트는 데이터 분석 프로세스 및 프로젝트 리소스를 통합 관리하기 위한 관리자 대시보드입니다. 사용자 인터랙션 관리부터 시스템 로그, 리소스 현황을 한눈에 파악하는 것을 목표로 합니다.
+
+## 2. 주요 기능 상세
+
+### ① 문의 및 요구사항 관리 (Inquiry Management)
+- 사용자의 분석 요청 및 시스템 문의 사항 리스트업
+- 상태값(대기, 처리중, 완료) 관리 및 답변 등록 기능
+
+### ② 로그 관리 (Log Management)
+- **최근 로그**: 실시간으로 발생하는 시스템 및 분석 작업 로그 출력
+- **전체 로그**: 날짜별, 프로젝트별 필터링을 통한 로그 기록 조회 및 내보내기
+
+### ③ 파일 관리 (File Management)
+- 프로젝트별 데이터셋, 분석 결과물 파일 개수 및 용량 통계
+- 파일 확장자별 구성 비율(CSV, JSON, Python 등) 시각화 지표 제공
+
+### ④ 인원 관리 (Personnel Management)
+- 프로젝트 참여 인원 현황 조회
+- 사용자별 권한(관리자, 분석가, 뷰어) 부여 및 수정 기능
+
+### ⑤ 공지사항 (Notice & Patch Notes)
+- 분석 모델 업데이트, 시스템 점검, 패치 내역 공유
+- 사용자 대상 공지사항 작성 및 게시판 관리
+
+## 3. UI/UX 가이드라인
+- **Layout**: 좌측 내비게이션 바(Sidebar) + 상단 헤더(Header) + 중앙 컨텐츠 영역
+- **Theme**: 신뢰감을 주는 Dark Blue / White 톤의 깨끗한 디자인
+- **Responsiveness**: 다양한 해상도에 대응하는 반응형 레이아웃 구성
diff --git a/crawler_api.py b/crawler_api.py
new file mode 100644
index 0000000..e47383e
--- /dev/null
+++ b/crawler_api.py
@@ -0,0 +1,165 @@
+import os
+import re
+import asyncio
+import json
+import traceback
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse
+from playwright.async_api import async_playwright
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=False,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+@app.get("/sync")
+async def sync_data():
+    async def event_generator():
+        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
+
+        TIMEOUT_MS = 600000 
+        results = []
+
+        async with async_playwright() as p:
+            yield f"data: {json.dumps({'type': 'log', 'message': '브라우저 실행 중...'})}\n\n"
+            browser = await p.chromium.launch(headless=True, args=["--no-sandbox", "--disable-dev-shm-usage"])
+            context = await browser.new_context(viewport={'width': 1920, 'height': 1080})
+            context.set_default_timeout(60000) 
+            page = await context.new_page()
+
+            try:
+                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 page.wait_for_selector("div.footer", timeout=20000)
+                        
+                        recent_log = "없음"
+                        file_count = 0
+                        
+                        # 1단계: 활동로그 수집
+                        try:
+                            log_btn = page.locator("div.wrap.log-wrap > div.title.text").first
+                            if await log_btn.is_visible(timeout=5000):
+                                await log_btn.click()
+                                await page.wait_for_timeout(2000) # 로그 로딩 여유
+                                log_content = page.locator("div.wrap.log-wrap .content-area").first
+                                if await log_content.is_visible(timeout=5000):
+                                    content = await log_content.inner_text()
+                                    lines = [l.strip() for l in content.split("\n") if len(l.strip()) > 2]
+                                    if lines: recent_log = lines[0]
+                                await page.locator("body > article.archive-modal div.close").first.click()
+                                await page.wait_for_timeout(1000)
+                        except: pass
+                        
+                        # 2단계: 구성(파일 수) 수집 - 안정성 대폭 강화
+                        try:
+                            sitemap_btn = page.locator("div.wrap.site-map-wrap > div").first
+                            if await sitemap_btn.is_visible(timeout=5000):
+                                await sitemap_btn.click()
+                                
+                                popup_page = None
+                                for _ in range(20):
+                                    for p_item in context.pages:
+                                        if "composition-tab.html" in p_item.url:
+                                            popup_page = p_item
+                                            break
+                                    if popup_page: break
+                                    await asyncio.sleep(0.5)
+                                
+                                if popup_page:
+                                    yield f"data: {json.dumps({'type': 'log', 'message': f'[{i+1}/{count}] 구성 데이터 로딩 대기 중 (여유있게)...'})}\n\n"
+                                    await popup_page.wait_for_load_state("domcontentloaded")
+                                    
+                                    # 데이터가 로드될 때까지 점진적으로 대기 (최대 7초)
+                                    for _ in range(7):
+                                        h6_check = popup_page.locator("#composition-list li h6:nth-child(3)")
+                                        if await h6_check.count() > 0:
+                                            break
+                                        await asyncio.sleep(1)
+                                    
+                                    # 최종 데이터를 가져오기 전 마지막 2초 추가 대기 (완전한 렌더링 확인)
+                                    await asyncio.sleep(2)
+                                    
+                                    target_h6_locators = popup_page.locator("#composition-list li h6:nth-child(3)")
+                                    h6_count = await target_h6_locators.count()
+                                    
+                                    yield f"data: {json.dumps({'type': 'log', 'message': f'[{i+1}/{count}] 총 {h6_count}개의 항목 로드됨. 합산 중...'})}\n\n"
+                                    
+                                    current_total = 0
+                                    for j in range(h6_count):
+                                        text = (await target_h6_locators.nth(j).inner_text()).strip()
+                                        last_line = text.split('\n')[-1]
+                                        nums = re.findall(r'\d+', last_line)
+                                        if nums:
+                                            val = int(nums[0])
+                                            if val < 10000: # 1만개 미만만 합산 (연도 필터링)
+                                                current_total += val
+                                    
+                                    file_count = current_total
+                                    await popup_page.close()
+                                    await page.bring_to_front()
+                        except Exception as e:
+                            yield f"data: {json.dumps({'type': 'log', 'message': f'!!! 구성 수집 지연: {str(e)[:30]}'})}\n\n"
+
+                        summary_msg = f"[{i+1}/{count}] 수집 완료 - 파일: {file_count}개, 최근로그: {recent_log[:40]}..."
+                        yield f"data: {json.dumps({'type': 'log', 'message': summary_msg})}\n\n"
+
+                        results.append({"projectName": project_name, "recentLog": recent_log, "fileCount": file_count})
+                        
+                        # 3단계: 복귀
+                        home_btn = page.locator("div.header div.title div").first
+                        try:
+                            await home_btn.click(force=True, timeout=10000)
+                            await page.wait_for_selector("h4.list__contents_aria_group_body_list_item_label", timeout=20000)
+                        except:
+                            await page.goto("https://overseas.projectmastercloud.com/dashboard", wait_until="domcontentloaded")
+                            await page.wait_for_selector("h4.list__contents_aria_group_body_list_item_label", timeout=20000)
+                        await page.wait_for_timeout(1500)
+                        
+                    except Exception as e_proj:
+                        yield f"data: {json.dumps({'type': 'log', 'message': f'!!! {i+1}번째 프로젝트 실패 (건너뜀)'})}\n\n"
+                        await page.goto("https://overseas.projectmastercloud.com/", wait_until="domcontentloaded")
+                        await page.wait_for_timeout(3000)
+
+                yield f"data: {json.dumps({'type': 'done', 'data': results})}\n\n"
+                
+            except Exception as e:
+                yield f"data: {json.dumps({'type': 'log', 'message': f'치명적 오류: {str(e)}'})}\n\n"
+            finally:
+                await browser.close()
+    
+    return StreamingResponse(event_generator(), media_type="text_event-stream")
diff --git a/dashboard.html b/dashboard.html
new file mode 100644
index 0000000..8f74889
--- /dev/null
+++ b/dashboard.html
@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project Master Overseas 관리자</title>
+    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
+    <link rel="stylesheet" href="style/style.css">
+</head>
+<body>
+
+    <nav class="topbar">
+        <div class="topbar-header">
+            <h2>Project Master Overseas</h2>
+        </div>
+        <ul class="nav-list">
+            <li class="nav-item active">대시보드</li>
+            <li class="nav-item">문의사항 <span class="badge" style="background:#FFFFFF;color:var(--primary-color); border-radius:10px; font-weight: bold; padding: 2px 5px;">12</span></li>
+            <li class="nav-item">로그관리</li>
+            <li class="nav-item">파일관리</li>
+            <li class="nav-item">인원관리</li>
+            <li class="nav-item">공지사항</li>
+        </ul>
+    </nav>
+
+    <main class="main-content">
+        <header>
+            <div style="display:flex; align-items:center;">
+                <h1>대시보드 현황</h1>
+            </div>
+            <div style="display:flex; align-items:center;">
+                <button id="syncBtn" class="sync-btn" onclick="syncData()">
+                    <span class="spinner"></span>
+                    데이터 동기화 (크롤링)
+                </button>
+                <div class="admin-info">접속자: <strong>이태훈[전체관리자]</strong></div>
+            </div>
+        </header>
+
+        <!-- 실시간 로그 콘솔 추가 -->
+        <div id="logConsole" style="display:none; background:#000; color:#0f0; font-family:monospace; padding:15px; margin-bottom:20px; border-radius:4px; max-height:200px; overflow-y:auto; font-size:12px; line-height:1.5;">
+            <div style="color:#fff; border-bottom:1px solid #333; margin-bottom:10px; padding-bottom:5px; font-weight:bold;">실시간 수집 로그 [PM Overseas]</div>
+            <div id="logBody"></div>
+        </div>
+
+        <div id="projectAccordion">
+            <!-- Multi-level Accordion items will be generated here -->
+        </div>
+    </main>
+
+    <script>
+        const rawData = [
+            ["라오스 ITTC 관개 교육센터 PMC", "수자원1부", "방노성", "2026.01.29, 폴더 삭제", 16],
+            ["라오스 비엔티안 메콩강 관리 2차 DD", "수자원1부", "방노성", "2025.12.07, 파일업로드", 260],
+            ["미얀마 만달레이 철도 개량 감리 CS", "철도사업부", "김태헌", "2025.11.17, 폴더이름변경", 298],
+            ["베트남 푸옥호아 양수 발전 FS", "수력부", "이철호", "2026.02.23, 폴더이름변경", 139],
+            ["사우디아라비아 아시르 지잔 고속도로 FS", "도로부", "공태원", "2026.02.09, 파일다운로드", 73],
+            ["우즈베키스탄 타슈켄트 철도 FS", "철도사업부", "김태헌", "2026.02.05, 파일업로드", 51],
+            ["우즈베키스탄 지방 도로 복원 MP", "도로부", "장진영", "X", 0],
+            ["이라크 Habbaniyah Shuaiba AirBase PD", "도로부", "강동구", "X", 0],
+            ["캄보디아 반테 민체이 관개 홍수저감 MP", "수자원1부", "이대주", "2025.12.07, 파일업로드", 44],
+            ["캄보디아 시엠립 하수처리 개선 DD", "물환경사업1부", "변역근", "2026.02.06, AI 요약", 221],
+            ["메콩유역 수자원 관리 기후적응 MP", "수자원1부", "정귀한", "X", 0],
+            ["키르기스스탄 잘랄아바드 상수도 계획 MP", "물환경사업1부", "변기상", "2026.02.12, 파일업로드", 60],
+            ["파키스탄 CAREC 도로 감리 DD", "도로부", "황효섭", "X", 0],
+            ["파키스탄 펀잡 홍수 방재 PMC", "수자원1부", "방노성", "2025.12.08, 폴더삭제", 0],
+            ["파키스탄 KP 아보타바드 상수도 PMC", "물환경사업2부", "변기상", "2026.02.12, 파일업로드", 234],
+            ["필리핀 홍수 관리 Package5B MP", "수자원1부", "이희철", "2025.12.02, 폴더이름변경", 14],
+            ["필리핀 PGN 해상교량 BID2 IDC", "구조부", "이상희", "2026.02.11, 파일다운로드", 631],
+            ["필리핀 홍수 복원 InFRA2 DD", "수자원1부", "이대주", "2025.12.01, 폴더삭제", 6],
+            ["가나 테치만 상수도 확장 DS", "물환경사업2부", "-", "X", 0],
+            ["기니 벼 재배단지 PMC", "수자원1부", "이대주", "2025.12.08, 파일업로드", 43],
+            ["우간다 벼 재배단지 PMC", "수자원1부", "방노성", "2025.12.08, 파일업로드", 52],
+            ["우간다 부수쿠마 분뇨 자원화 2단계 PMC", "물환경사업2부", "변기상", "2026.02.05, 파일업로드", 9],
+            ["에티오피아 지하수 관개 환경설계 DD", "물환경사업2부", "변기상", "X", 0],
+            ["에티오피아 도도타군 관개 PMC", "수자원1부", "방노성", "2025.12.01, 폴더이름변경", 144],
+            ["에티오피아 Adeaa-Becho 지하수 관개 MP", "수자원1부", "방노성", "2025.11.21, 파일업로드", 146],
+            ["탄자니아 Iringa 상하수도 개선 CS", "물환경사업1부", "백운영", "2026.02.03, 폴더 생성", 0],
+            ["탄자니아 Dodoma 하수 설계감리 DD", "물환경사업2부", "변기상", "2026.02.04, 폴더삭제", 32],
+            ["탄자니아 잔지바르 쌀 생산 PMC", "수자원1부", "방노성", "2025.12.08, 파일 업로드", 23],
+            ["탄자니아 도도마 유수율 상수도개선 PMC", "물환경사업1부", "박순석", "2026.02.12, 부관리자권한추가", 35],
+            ["아르헨티나 SALDEORO 수력발전 28MW DD", "플랜트1부", "양정모", "X", 0],
+            ["온두라스 LaPaz Danli 상수도 CS", "물환경사업2부", "-", "2026.01.29, 파일 삭제", 60],
+            ["볼리비아 에스꼬마 차라짜니 도로 CS", "도로부", "전홍찬", "2026.02.06, 파일업로드", 1],
+            ["볼리비아 마모레 교량도로 FS", "도로부", "황효섭", "2026.02.06, 파일업로드", 120],
+            ["볼리비아 Bombeo-Colomi 도로설계 DD", "도로부", "황효섭", "2025.12.05, 파일삭제", 48],
+            ["콜롬비아 AI 폐기물 FS", "플랜트1부", "서재희", "X", 0],
+            ["파라과이 도로 통행료 현대화 MP", "교통계획부", "오제훈", "X", 0],
+            ["페루 Barranca 상하수도 확장 DD", "물환경사업2부", "변기상", "2025.11.14, 파일업로드", 44],
+            ["엘살바도르 태평양 철도 FS", "철도사업부", "김태헌", "2026.02.04, 파일이름변경", 102],
+            ["필리핀 사무소", "해외사업부", "한형남", "2026.02.23, 파일업로드", 813]
+        ];
+
+        const continentMap = {
+            "라오스": "아시아", "미얀마": "아시아", "베트남": "아시아", "사우디아라비아": "아시아", 
+            "우즈베키스탄": "아시아", "이라크": "아시아", "캄보디아": "아시아", 
+            "키르기스스탄": "아시아", "파키스탄": "아시아", "필리핀": "아시아",
+            "아르헨티나": "아메리카", "온두라스": "아메리카", "볼리비아": "아메리카", "콜롬비아": "아메리카",
+            "파라과이": "아메리카", "페루": "아메리카", "엘살바도르": "아메리카",
+            "가나": "아프리카", "기니": "아프리카", "우간다": "아프리카", "에티오피아": "아프리카", "탄자니아": "아프리카"
+        };
+
+        const continentOrder = {
+            "아시아": 1,
+            "아프리카": 2,
+            "아메리카": 3,
+            "지사": 4
+        };
+
+        function init() {
+            const container = document.getElementById('projectAccordion');
+            const groupedData = {};
+
+            // 1. 데이터 파싱 및 그룹화
+            rawData.forEach((item, index) => {
+                const projectName = item[0];
+                let continent = "";
+                let country = "";
+                
+                if (projectName.endsWith("사무소")) {
+                    continent = "지사";
+                    country = projectName.split(" ")[0];
+                } else if (projectName.startsWith("메콩유역")) {
+                    country = "캄보디아";
+                    continent = "아시아";
+                } else {
+                    country = projectName.split(" ")[0];
+                    continent = continentMap[country] || "기타";
+                }
+                
+                if (!groupedData[continent]) groupedData[continent] = {};
+                if (!groupedData[continent][country]) groupedData[continent][country] = [];
+                
+                groupedData[continent][country].push({ item, index });
+            });
+
+            // 2. 대륙 정렬 (아시아 - 아프리카 - 아메리카 - 지사)
+            const sortedContinents = Object.keys(groupedData).sort((a, b) => (continentOrder[a] || 99) - (continentOrder[b] || 99));
+
+            // 3. HTML 생성
+            sortedContinents.forEach(continent => {
+                const continentGroup = document.createElement('div');
+                continentGroup.className = 'continent-group';
+                
+                let continentHtml = `
+                    <div class="continent-header" onclick="toggleGroup(this)">
+                        <span>${continent}</span>
+                        <span class="toggle-icon">▼</span>
+                    </div>
+                    <div class="continent-body">
+                `;
+
+                const sortedCountries = Object.keys(groupedData[continent]).sort((a, b) => a.localeCompare(b));
+
+                sortedCountries.forEach(country => {
+                    continentHtml += `
+                        <div class="country-group">
+                            <div class="country-header" onclick="toggleGroup(this)">
+                                <span>${country}</span>
+                                <span class="toggle-icon">▼</span>
+                            </div>
+                            <div class="country-body">
+                                <div class="accordion-container">
+                    `;
+
+                    const sortedProjects = groupedData[continent][country].sort((a, b) => a.item[0].localeCompare(b.item[0]));
+
+                    sortedProjects.forEach(({item, index}) => {
+                        const projectName = item[0];
+                        const dept = item[1];
+                        const admin = item[2];
+                        const recentLogRaw = item[3];
+                        const fileCount = item[4];
+                        const personnelCount = Math.floor(Math.random()*15)+3; // 인원은 시트에 없으므로 임의 할당 유지
+                        
+                        const recentLog = recentLogRaw === "X" ? "기록 없음" : recentLogRaw;
+                        const logTime = recentLog !== "기록 없음" ? recentLog.split(',')[0] : "기록 없음";
+
+                        continentHtml += `
+                            <div class="accordion-item">
+                                <div class="accordion-header" onclick="toggleAccordion(this)">
+                                    <div>
+                                        <span class="header-label">프로젝트 명</span>
+                                        <span class="header-value" title="${projectName}">${projectName}</span>
+                                    </div>
+                                    <div>
+                                        <span class="header-label">담당부서</span>
+                                        <span class="header-value">${dept}</span>
+                                    </div>
+                                    <div>
+                                        <span class="header-label">관리자</span>
+                                        <span class="header-value">${admin}</span>
+                                    </div>
+                                    <div>
+                                        <span class="header-label">파일 수</span>
+                                        <span class="header-value">${fileCount}</span>
+                                    </div>
+                                    <div>
+                                        <span class="header-label">인원</span>
+                                        <span class="header-value">${personnelCount}명</span>
+                                    </div>
+                                    <div>
+                                        <span class="header-label">최근 로그</span>
+                                        <span class="header-value" style="color:var(--text-sub); font-size:11px;" title="${recentLog}">${recentLog}</span>
+                                    </div>
+                                </div>
+                                <div class="accordion-body">
+                                    <div class="detail-grid">
+                                        <div class="detail-section">
+                                            <h4>참여 인원 상세</h4>
+                                            <table class="data-table">
+                                                <thead><tr><th>이름</th><th>소속</th><th>사용자권한</th></tr></thead>
+                                                <tbody>
+                                                    <tr><td>${admin}</td><td>${dept}</td><td>관리자</td></tr>
+                                                    <tr><td>김철수</td><td>${dept}</td><td>부관리자</td></tr>
+                                                    <tr><td>박지민</td><td>${dept}</td><td>일반참여자</td></tr>
+                                                    <tr><td>최유리</td><td>${dept}</td><td>참관자</td></tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                        <div class="detail-section">
+                                            <h4>최근 문의사항 및 파일 변경 로그</h4>
+                                            <table class="data-table">
+                                                <thead><tr><th>유형</th><th>내용</th><th>일시</th></tr></thead>
+                                                <tbody>
+                                                    <tr><td><span class="badge">로그</span></td><td>데이터 동기화 완료</td><td>${logTime}</td></tr>
+                                                    <tr><td><span class="badge" style="background:var(--hover-bg); border: 1px solid var(--border-color); color:var(--primary-color);">문의</span></td><td>프로젝트 접근 권한 요청</td><td>2026-02-23</td></tr>
+                                                    <tr><td><span class="badge" style="background:var(--primary-color); color:white;">파일</span></td><td>설계도면 v2.pdf 업로드</td><td>2026-02-22</td></tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                    });
+
+                    continentHtml += `
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                });
+
+                continentHtml += `
+                    </div>
+                `;
+                
+                continentGroup.innerHTML = continentHtml;
+                container.appendChild(continentGroup);
+            });
+            
+            const allContinents = container.querySelectorAll('.continent-group');
+            allContinents.forEach(continent => {
+                continent.classList.add('active');
+                continent.querySelector('.continent-header .toggle-icon').textContent = '▲';
+            });
+
+            const allCountries = container.querySelectorAll('.country-group');
+            allCountries.forEach(country => {
+                country.classList.add('active');
+                country.querySelector('.country-header .toggle-icon').textContent = '▲';
+            });
+        }
+
+        function toggleGroup(header) {
+            const group = header.parentElement;
+            const icon = header.querySelector('.toggle-icon');
+            group.classList.toggle('active');
+            if (group.classList.contains('active')) {
+                icon.textContent = '▲';
+            } else {
+                icon.textContent = '▼';
+            }
+        }
+
+        function toggleAccordion(header) {
+            const item = header.parentElement;
+            const container = item.parentElement;
+            
+            const allItems = container.querySelectorAll('.accordion-item');
+            allItems.forEach(el => {
+                if(el !== item) el.classList.remove('active');
+            });
+            
+            item.classList.toggle('active');
+        }
+
+        async function syncData() {
+            const btn = document.getElementById('syncBtn');
+            const logConsole = document.getElementById('logConsole');
+            const logBody = document.getElementById('logBody');
+            
+            btn.classList.add('loading');
+            btn.innerHTML = `<span class="spinner"></span> 동기화 중 (진행 상황 확인 중...)`;
+            btn.disabled = true;
+            
+            logConsole.style.display = 'block';
+            logBody.innerHTML = ''; // 이전 로그 삭제
+
+            function addLog(msg) {
+                const logItem = document.createElement('div');
+                logItem.innerText = `[${new Date().toLocaleTimeString()}] ${msg}`;
+                logBody.appendChild(logItem);
+                logConsole.scrollTop = logConsole.scrollHeight; // 자동 스크롤
+            }
+
+            try {
+                const apiHost = window.location.hostname;
+                const response = await fetch(`http://${apiHost}:8001/sync`);
+                
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+                    
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            const payload = JSON.parse(line.substring(6));
+                            
+                            if (payload.type === 'log') {
+                                addLog(payload.message);
+                            } else if (payload.type === 'done') {
+                                const newData = payload.data;
+                                newData.forEach(scrapedItem => {
+                                    const target = rawData.find(item => 
+                                        item[0].replace(/\s/g,'').includes(scrapedItem.projectName.replace(/\s/g,'')) || 
+                                        scrapedItem.projectName.replace(/\s/g,'').includes(item[0].replace(/\s/g,''))
+                                    );
+                                    
+                                    if (target) {
+                                        target[3] = scrapedItem.recentLog;
+                                        target[4] = scrapedItem.fileCount;
+                                    }
+                                });
+                                
+                                document.getElementById('projectAccordion').innerHTML = '';
+                                init();
+                                addLog(">>> 모든 동기화 작업이 완료되었습니다!");
+                                alert(`총 ${newData.length}개 프로젝트 동기화 완료!`);
+                                logConsole.style.display = 'none'; // 성공 시 콘솔 숨김
+                            }
+                        }
+                    }
+                }
+            } catch (e) {
+                addLog(`오류 발생: ${e.message}`);
+                alert("서버 연결 실패. 백엔드 서버가 실행 중인지 확인하세요.");
+                console.error(e);
+            } finally {
+                btn.classList.remove('loading');
+                btn.innerHTML = `<span class="spinner"></span> 데이터 동기화 (크롤링)`;
+                btn.disabled = false;
+            }
+        }
+
+        init();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..23b8545
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,4 @@
+fastapi==0.110.0
+uvicorn==0.29.0
+playwright==1.42.0
+python-dotenv==1.0.1
\ No newline at end of file
diff --git a/sample.png b/sample.png
new file mode 100644
index 0000000..74c6b47
Binary files /dev/null and b/sample.png differ
diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..a59542c
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,412 @@
+:root {
+    --primary-color: #1E5149;
+    --bg-color: #FFFFFF;
+    --text-main: #222222;
+    --text-sub: #666666;
+    --border-color: #E5E7EB;
+    /* 매우 연한 회색 라인 */
+    --hover-bg: #F9FAFB;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Pretendard', sans-serif;
+    font-size: 13px;
+    color: var(--text-main);
+    background-color: var(--bg-color);
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Topbar */
+.topbar {
+    width: 100%;
+    background-color: #1E5149;
+    /* sample.png 탑바 다크 슬레이트 배경색 */
+    color: #FFFFFF;
+    padding: 0 1.5rem;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    z-index: 100;
+}
+
+.topbar-header {
+    margin-right: 2.5rem;
+}
+
+.topbar-header h2 {
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: -0.3px;
+}
+
+.nav-list {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.nav-item {
+    padding: 0 1rem;
+    height: 28px;
+    border-radius: 4px;
+    margin: 0 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: rgba(255, 255, 255, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+}
+
+.nav-item:hover,
+.nav-item.active {
+    background-color: #E9EEED;
+    color: #1E5149;
+    font-weight: 500;
+}
+
+/* Main Content */
+.main-content {
+    margin-top: 36px;
+    flex: 1;
+    padding: 2rem 2.5rem;
+    width: 100%;
+    max-width: 1400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+header {
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 0.8rem;
+    border-bottom: 1px solid var(--border-color);
+    /* 선 굵기와 색상 얇게 */
+}
+
+header h1 {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+.admin-info {
+    color: var(--text-sub);
+    font-size: 12px;
+}
+
+/* Multi-level Accordion (Minimalist/No Box Design) */
+.continent-group {
+    margin-bottom: 3rem;
+}
+
+.continent-header {
+    color: var(--text-main);
+    padding: 0.5rem 0;
+    font-size: 16px;
+    font-weight: 700;
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 2px solid var(--text-main);
+    margin-bottom: 1rem;
+}
+
+.continent-body {
+    display: none;
+}
+
+.continent-group.active > .continent-body {
+    display: block;
+}
+
+.country-group {
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px dashed var(--border-color); /* 국가 사이 구분선 */
+}
+
+.country-group:last-child {
+    margin-bottom: 1rem;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.country-header {
+    color: var(--primary-color);
+    padding: 0.5rem 0;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.country-body {
+    display: none;
+    padding-left: 0.5rem; /* Slight indent instead of borders */
+}
+
+.country-group.active > .country-body {
+    display: block;
+}
+
+.toggle-icon {
+    font-size: 10px;
+    margin-left: 8px;
+    color: #999;
+}
+
+/* Accordion Styles (Projects - Row Based) */
+.accordion-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.accordion-item {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.accordion-item:last-child {
+    border-bottom: none;
+}
+
+.accordion-header {
+    display: grid;
+    grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 2fr;
+    gap: 1rem;
+    padding: 1rem 0;
+    cursor: pointer;
+    align-items: center;
+    background-color: transparent;
+    transition: opacity 0.2s;
+}
+
+.accordion-item:hover .accordion-header {
+    opacity: 0.7;
+}
+
+.accordion-item.active .accordion-header {
+    /* No border-bottom or background change for active */
+}
+
+.accordion-header > div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.header-label {
+    font-size: 11px;
+    color: var(--text-sub);
+    margin-bottom: 3px;
+    display: block;
+    font-weight: 400;
+}
+
+.header-value {
+    font-weight: 500;
+    font-size: 13px;
+    color: var(--text-main);
+}
+
+.accordion-body {
+    display: none;
+    padding: 1.5rem 0;
+    background-color: transparent;
+}
+
+.accordion-item.active .accordion-body {
+    display: block;
+}
+
+.detail-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+}
+
+.detail-section h4 {
+    margin-bottom: 1rem;
+    color: var(--text-main);
+    font-size: 13px;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0.5rem;
+}
+
+/* Table Styles - Super Minimal Line Style */
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+    padding: 8px 4px;
+    border-bottom: 1px solid var(--border-color);
+    text-align: left;
+}
+
+.data-table th {
+    color: var(--text-sub);
+    font-weight: 400;
+    font-size: 12px;
+}
+
+.data-table td {
+    font-size: 12px;
+    color: var(--text-main);
+}
+
+.data-table tr:last-child td {
+    border-bottom: none;
+}
+
+/* General Utilities */
+.badge {
+    background: #EEEEEE;
+    color: #555555;
+    padding: 2px 6px;
+    border-radius: 2px;
+    /* 라운드 거의 없앰 */
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.status-up {
+    color: #D32F2F;
+    font-weight: 500;
+}
+
+.status-down {
+    color: #1976D2;
+    font-weight: 500;
+}
+
+/* Sync Button */
+.sync-btn {
+    background-color: var(--primary-color);
+    color: #FFFFFF;
+    border: 1px solid var(--primary-color);
+    padding: 6px 14px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s, opacity 0.2s;
+    margin-right: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.sync-btn:hover {
+    background-color: #153A34;
+}
+
+.sync-btn:disabled {
+    background-color: #A0B2AF;
+    border-color: #A0B2AF;
+    cursor: not-allowed;
+}
+
+/* Spinner */
+.spinner {
+    display: none;
+    width: 12px;
+    height: 12px;
+    border: 2px solid rgba(255,255,255,0.3);
+    border-radius: 50%;
+    border-top-color: #fff;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.sync-btn.loading .spinner {
+    display: inline-block;
+}
+
+/* --- Responsive Design --- */
+@media screen and (max-width: 1024px) {
+    .accordion-header {
+        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.5fr;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .topbar {
+        overflow-x: auto;
+        white-space: nowrap;
+        padding: 0 1rem;
+    }
+    /* 스크롤바 숨김 */
+    .topbar::-webkit-scrollbar {
+        display: none; 
+    }
+    .main-content {
+        padding: 1.5rem 1rem;
+    }
+    header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    .detail-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+    /* 모바일에서 아코디언 헤더를 다단으로 배치 */
+    .accordion-header {
+        grid-template-columns: 1fr 1fr;
+        row-gap: 1rem;
+    }
+    /* 프로젝트 명과 최근 로그는 공간을 넓게 쓰도록 설정 */
+    .accordion-header > div:nth-child(1),
+    .accordion-header > div:nth-child(6) {
+        grid-column: span 2;
+    }
+    .continent-header {
+        font-size: 15px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    /* 아주 작은 화면에서는 1열로 배치 */
+    .accordion-header {
+        grid-template-columns: 1fr;
+    }
+    .accordion-header > div {
+        grid-column: span 1 !important;
+    }
+    .topbar-header h2 {
+        font-size: 13px;
+        margin-right: 1rem;
+    }
+    .nav-item {
+        padding: 0 0.5rem;
+        font-size: 12px;
+    }
+}
\ No newline at end of file