Update app.py

app.py

@@ -31,11 +31,27 @@ pdf_cache: Dict[str, Dict[str, Any]] = {}
 # 캐싱 락
 cache_locks = {}
 
+###############################################################################
+# (1) 헬퍼 함수: /pdf/test.pdf 처럼 넘어오는 경로를 항상 BASE/pdf 내부로 보정
+###############################################################################
+def get_valid_pdf_path(path: str) -> pathlib.Path:
+    """
+    /pdf/test.pdf, pdf/test.pdf, test.pdf 등의 인자로 들어와도
+    무조건 BASE/pdf/test.pdf 형태의 경로를 돌려주어 파일을 찾도록 함.
+    """
+    # 선행/후행 슬래시 제거
+    sanitized = path.strip().lstrip("/")
+    # 최종 파일명만 사용 (디렉토리 역슬래시 등 방어)
+    filename = os.path.basename(sanitized)
+    return PDF_DIR / filename
+
+
 # PDF 파일 목록 가져오기
 def get_pdf_files():
     pdf_files = []
     if PDF_DIR.exists():
-        pdf_files = [f for f in PDF_DIR.glob("*.pdf")]
+        # pdf 디렉토리 내부의 *.pdf 목록
+        pdf_files = list(PDF_DIR.glob("*.pdf"))
     return pdf_files
 
 # PDF 썸네일 생성 및 프로젝트 데이터 준비
@@ -45,43 +61,40 @@ def generate_pdf_projects():
     
     for pdf_file in pdf_files:
         projects_data.append({
-            "path": str(pdf_file),
+            "path": str(pdf_file.relative_to(BASE)),  # 프론트엔드에는 상대경로로 넘겨줌
             "name": pdf_file.stem,
             "cached": pdf_file.stem in pdf_cache and pdf_cache[pdf_file.stem].get("status") == "completed"
         })
-    
     return projects_data
 
-# 캐시 파일 경로 생성
+# 캐시 파일 경로
 def get_cache_path(pdf_name: str):
     return CACHE_DIR / f"{pdf_name}_cache.json"
 
-# 최적화된 PDF 페이지 캐싱 함수
+# PDF 페이지 캐싱 함수
 async def cache_pdf(pdf_path: str):
     try:
         import fitz  # PyMuPDF
-        
-        pdf_file = pathlib.Path(pdf_path)
+
+        # pdf_path -> 실제 파일 경로
+        pdf_file = get_valid_pdf_path(pdf_path)
         pdf_name = pdf_file.stem
         
-        # 락 생성 - 동일한 PDF에 대해 동시 캐싱 방지
+        # 동일 PDF 동시 캐싱 방지
         if pdf_name not in cache_locks:
             cache_locks[pdf_name] = threading.Lock()
         
-        # 이미 캐싱 중이거나 캐싱 완료된 PDF는 건너뛰기
+        # 이미 처리중/완료된 경우
         if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") in ["processing", "completed"]:
             logger.info(f"PDF {pdf_name} 이미 캐싱 완료 또는 진행 중")
             return
         
         with cache_locks[pdf_name]:
-            # 이중 체크 - 락 획득 후 다시 확인
             if pdf_name in pdf_cache and pdf_cache[pdf_name].get("status") in ["processing", "completed"]:
                 return
             
-            # 캐시 상태 업데이트
             pdf_cache[pdf_name] = {"status": "processing", "progress": 0, "pages": []}
             
-            # 캐시 파일이 이미 존재하는지 확인
             cache_path = get_cache_path(pdf_name)
             if cache_path.exists():
                 try:
@@ -95,44 +108,33 @@ async def cache_pdf(pdf_path: str):
                 except Exception as e:
                     logger.error(f"캐시 파일 로드 실패: {e}")
             
-            # PDF 파일 열기
-            doc = fitz.open(pdf_path)
+            # PDF 열기
+            doc = fitz.open(pdf_file)
             total_pages = doc.page_count
             
-            # 미리 썸네일만 먼저 생성 (빠른 UI 로딩용)
+            # 첫 페이지 썸네일
             if total_pages > 0:
-                # 첫 페이지 썸네일 생성
                 page = doc[0]
-                pix_thumb = page.get_pixmap(matrix=fitz.Matrix(0.2, 0.2))  # 더 작은 썸네일
+                pix_thumb = page.get_pixmap(matrix=fitz.Matrix(0.2, 0.2))
                 thumb_data = pix_thumb.tobytes("png")
                 b64_thumb = base64.b64encode(thumb_data).decode('utf-8')
                 thumb_src = f"data:image/png;base64,{b64_thumb}"
                 
-                # 썸네일 페이지만 먼저 캐시
                 pdf_cache[pdf_name]["pages"] = [{"thumb": thumb_src, "src": ""}]
                 pdf_cache[pdf_name]["progress"] = 1
                 pdf_cache[pdf_name]["total_pages"] = total_pages
             
-            # 이미지 해상도 및 압축 품질 설정 (성능 최적화)
-            scale_factor = 1.0  # 기본 해상도 (낮출수록 로딩 빠름)
-            jpeg_quality = 80   # JPEG 품질 (낮출수록 용량 작아짐)
+            scale_factor = 1.0
+            jpeg_quality = 80
             
-            # 페이지 처리 작업자 함수 (병렬 처리용)
             def process_page(page_num):
                 try:
                     page = doc[page_num]
-                    
-                    # 이미지로 변환 시 매트릭스 스케일링 적용 (성능 최적화)
                     pix = page.get_pixmap(matrix=fitz.Matrix(scale_factor, scale_factor))
-                    
-                    # JPEG 형식으로 인코딩 (PNG보다 크기 작음)
                     img_data = pix.tobytes("jpeg", jpeg_quality)
                     b64_img = base64.b64encode(img_data).decode('utf-8')
                     img_src = f"data:image/jpeg;base64,{b64_img}"
-                    
-                    # 썸네일 (첫 페이지가 아니면 빈 문자열)
                     thumb_src = "" if page_num > 0 else pdf_cache[pdf_name]["pages"][0]["thumb"]
-                    
                     return {
                         "page_num": page_num,
                         "src": img_src,
@@ -140,54 +142,38 @@ async def cache_pdf(pdf_path: str):
                     }
                 except Exception as e:
                     logger.error(f"페이지 {page_num} 처리 오류: {e}")
-                    return {
-                        "page_num": page_num,
-                        "src": "",
-                        "thumb": "",
-                        "error": str(e)
-                    }
+                    return {"page_num": page_num, "src": "", "thumb": "", "error": str(e)}
             
-            # 병렬 처리로 모든 페이지 처리
             pages = [None] * total_pages
             processed_count = 0
-            
-            # 페이지 배치 처리 (메모리 관리)
-            batch_size = 5  # 한 번에 처리할 페이지 수
+            batch_size = 5
             
             for batch_start in range(0, total_pages, batch_size):
                 batch_end = min(batch_start + batch_size, total_pages)
                 current_batch = list(range(batch_start, batch_end))
                 
-                # 병렬 처리로 배치 페이지 렌더링
                 with concurrent.futures.ThreadPoolExecutor(max_workers=min(5, batch_size)) as executor:
                     batch_results = list(executor.map(process_page, current_batch))
                 
-                # 결과 저장
                 for result in batch_results:
                     page_num = result["page_num"]
-                    pages[page_num] = {
-                        "src": result["src"],
-                        "thumb": result["thumb"]
-                    }
-                    
+                    pages[page_num] = {"src": result["src"], "thumb": result["thumb"]}
                     processed_count += 1
                     progress = round(processed_count / total_pages * 100)
                     pdf_cache[pdf_name]["progress"] = progress
                 
-                # 중간 저장
                 pdf_cache[pdf_name]["pages"] = pages
                 try:
                     with open(cache_path, "w") as cache_file:
                         json.dump({
-                            "status": "processing", 
-                            "progress": pdf_cache[pdf_name]["progress"], 
+                            "status": "processing",
+                            "progress": pdf_cache[pdf_name]["progress"],
                             "pages": pdf_cache[pdf_name]["pages"],
                             "total_pages": total_pages
                         }, cache_file)
                 except Exception as e:
                     logger.error(f"중간 캐시 저장 실패: {e}")
             
-            # 캐싱 완료
             pdf_cache[pdf_name] = {
                 "status": "completed",
                 "progress": 100,
@@ -195,14 +181,12 @@ async def cache_pdf(pdf_path: str):
                 "total_pages": total_pages
             }
             
-            # 최종 캐시 파일 저장
             try:
                 with open(cache_path, "w") as cache_file:
                     json.dump(pdf_cache[pdf_name], cache_file)
                 logger.info(f"PDF {pdf_name} 캐싱 완료, {total_pages}페이지")
             except Exception as e:
                 logger.error(f"최종 캐시 저장 실패: {e}")
-            
     except Exception as e:
         import traceback
         logger.error(f"PDF 캐싱 오류: {str(e)}\n{traceback.format_exc()}")
@@ -215,7 +199,7 @@ async def init_cache_all_pdfs():
     logger.info("PDF 캐싱 작업 시작")
     pdf_files = get_pdf_files()
     
-    # 이미 캐시된 PDF 파일 로드 (빠른 시작을 위해 먼저 수행)
+    # 기존 캐시 로드
     for cache_file in CACHE_DIR.glob("*_cache.json"):
         try:
             pdf_name = cache_file.stem.replace("_cache", "")
@@ -228,139 +212,126 @@ async def init_cache_all_pdfs():
         except Exception as e:
             logger.error(f"캐시 파일 로드 오류: {str(e)}")
     
-    # 캐싱되지 않은 PDF 파일 병렬 처리
-    await asyncio.gather(*[asyncio.create_task(cache_pdf(str(pdf_file))) 
-                          for pdf_file in pdf_files 
-                          if pdf_file.stem not in pdf_cache 
-                          or pdf_cache[pdf_file.stem].get("status") != "completed"])
+    await asyncio.gather(*[
+        asyncio.create_task(cache_pdf(str(pdf_file.relative_to(BASE))))
+        for pdf_file in pdf_files
+        if pdf_file.stem not in pdf_cache or pdf_cache[pdf_file.stem].get("status") != "completed"
+    ])
 
-# 백그라운드 작업 시작 함수
 @app.on_event("startup")
 async def startup_event():
-    # 백그라운드 태스크로 캐싱 실행
     asyncio.create_task(init_cache_all_pdfs())
 
-# API 엔드포인트: PDF 프로젝트 목록
+###############################################################################
+# (2) API 라우트: path -> 항상 get_valid_pdf_path()로 실제 파일 찾기
+###############################################################################
 @app.get("/api/pdf-projects")
 async def get_pdf_projects_api():
     return generate_pdf_projects()
 
-# API 엔드포인트: PDF 썸네일 제공 (최적화)
 @app.get("/api/pdf-thumbnail")
 async def get_pdf_thumbnail(path: str):
     try:
-        pdf_file = pathlib.Path(path)
+        pdf_file = get_valid_pdf_path(path)
         pdf_name = pdf_file.stem
         
-        # 캐시에서 썸네일 가져오기
+        # 캐시에 썸네일이 있으면
         if pdf_name in pdf_cache and pdf_cache[pdf_name].get("pages"):
             if pdf_cache[pdf_name]["pages"][0].get("thumb"):
                 return {"thumbnail": pdf_cache[pdf_name]["pages"][0]["thumb"]}
-            
-        # 캐시에 없으면 생성 (더 작고 빠른 썸네일)
+        
+        # 없으면 직접 생성
         import fitz
-        doc = fitz.open(path)
+        if not pdf_file.exists():
+            return {"thumbnail": None, "error": "파일이 존재하지 않습니다"}
+        
+        doc = fitz.open(pdf_file)
         if doc.page_count > 0:
             page = doc[0]
-            pix = page.get_pixmap(matrix=fitz.Matrix(0.2, 0.2))  # 더 작은 썸네일
-            img_data = pix.tobytes("jpeg", 70)  # JPEG 압축 사용
+            pix = page.get_pixmap(matrix=fitz.Matrix(0.2, 0.2))
+            img_data = pix.tobytes("jpeg", 70)
             b64_img = base64.b64encode(img_data).decode('utf-8')
             
-            # 백그라운드에서 캐싱 시작
             asyncio.create_task(cache_pdf(path))
-            
             return {"thumbnail": f"data:image/jpeg;base64,{b64_img}"}
-        
         return {"thumbnail": None}
     except Exception as e:
         logger.error(f"썸네일 생성 오류: {str(e)}")
         return {"error": str(e), "thumbnail": None}
 
-# API 엔드포인트: 캐시 상태 확인
 @app.get("/api/cache-status")
 async def get_cache_status(path: str = None):
     if path:
-        pdf_file = pathlib.Path(path)
+        pdf_file = get_valid_pdf_path(path)
         pdf_name = pdf_file.stem
         if pdf_name in pdf_cache:
             return pdf_cache[pdf_name]
         return {"status": "not_cached"}
     else:
-        return {name: {"status": info["status"], "progress": info.get("progress", 0)} 
-                for name, info in pdf_cache.items()}
+        return {
+            name: {"status": info["status"], "progress": info.get("progress", 0)}
+            for name, info in pdf_cache.items()
+        }
 
-# API 엔드포인트: 캐시된 PDF 콘텐츠 제공 (점진적 로딩 지원)
 @app.get("/api/cached-pdf")
 async def get_cached_pdf(path: str, background_tasks: BackgroundTasks):
     try:
-        pdf_file = pathlib.Path(path)
+        pdf_file = get_valid_pdf_path(path)
         pdf_name = pdf_file.stem
         
-        # 캐시 확인
         if pdf_name in pdf_cache:
             status = pdf_cache[pdf_name].get("status", "")
             
-            # 완료된 경우 전체 데이터 반환
             if status == "completed":
                 return pdf_cache[pdf_name]
-            
-            # 처리 중인 경우 현재까지의 페이지 데이터 포함 (점진적 로딩)
             elif status == "processing":
                 progress = pdf_cache[pdf_name].get("progress", 0)
                 pages = pdf_cache[pdf_name].get("pages", [])
                 total_pages = pdf_cache[pdf_name].get("total_pages", 0)
-                
                 return {
-                    "status": "processing", 
+                    "status": "processing",
                     "progress": progress,
                     "pages": pages,
                     "total_pages": total_pages,
                     "available_pages": len([p for p in pages if p and p.get("src")])
                 }
         
-        # 캐시가 없는 경우 백그라운드에서 캐싱 시작
+        # 캐시가 없으면 백그라운드 처리
         background_tasks.add_task(cache_pdf, path)
         return {"status": "started", "progress": 0}
-        
     except Exception as e:
         logger.error(f"캐시된 PDF 제공 오류: {str(e)}")
         return {"error": str(e), "status": "error"}
 
-# API 엔드포인트: PDF 원본 콘텐츠 제공(캐시가 없는 경우)
 @app.get("/api/pdf-content")
 async def get_pdf_content(path: str, background_tasks: BackgroundTasks):
     try:
-        # 캐싱 상태 확인
-        pdf_file = pathlib.Path(path)
-        if not pdf_file.exists():
-            return JSONResponse(content={"error": f"파일을 찾을 수 없습니다: {path}"}, status_code=404)
-        
+        pdf_file = get_valid_pdf_path(path)
         pdf_name = pdf_file.stem
         
-        # 캐시된 경우 리다이렉트
-        if pdf_name in pdf_cache and (pdf_cache[pdf_name].get("status") == "completed" 
-                                     or (pdf_cache[pdf_name].get("status") == "processing" 
-                                         and pdf_cache[pdf_name].get("progress", 0) > 10)):
+        if not pdf_file.exists():
+            return JSONResponse(content={"error": f"파일을 찾을 수 없습니다: {pdf_file}"}, status_code=404)
+        
+        # 이미 캐시되었으면 리다이렉트
+        if pdf_name in pdf_cache and (
+            pdf_cache[pdf_name].get("status") == "completed"
+            or (pdf_cache[pdf_name].get("status") == "processing" and pdf_cache[pdf_name].get("progress", 0) > 10)
+        ):
             return JSONResponse(content={"redirect": f"/api/cached-pdf?path={path}"})
         
-        # 파일 읽기
-        with open(path, "rb") as pdf_file:
-            content = pdf_file.read()
-            
-        # 파일명 처리
+        with open(pdf_file, "rb") as f:
+            content = f.read()
+        
         import urllib.parse
         filename = pdf_file.name
         encoded_filename = urllib.parse.quote(filename)
         
-        # 백그라운드에서 캐싱 시작
         background_tasks.add_task(cache_pdf, path)
         
-        # 응답 헤더 설정
         headers = {
             "Content-Type": "application/pdf",
             "Content-Disposition": f"inline; filename=\"{encoded_filename}\"; filename*=UTF-8''{encoded_filename}"
         }
-        
         return Response(content=content, media_type="application/pdf", headers=headers)
     except Exception as e:
         import traceback
@@ -368,16 +339,19 @@ async def get_pdf_content(path: str, background_tasks: BackgroundTasks):
         logger.error(f"PDF 콘텐츠 로드 오류: {str(e)}\n{error_details}")
         return JSONResponse(content={"error": str(e)}, status_code=500)
 
-# HTML 파일 읽기 함수
+
+# HTML 템플릿 관련
 def get_html_content():
     html_path = BASE / "flipbook_template.html"
     if html_path.exists():
         with open(html_path, "r", encoding="utf-8") as f:
             return f.read()
-    return HTML  # 기본 HTML 사용
+    return HTML
 
-# HTML 문자열 (UI 수정 버전)
-HTML = """
+###############################################################################
+# (3) HTML: pdfjsLib 로드 에러 대비 (try/catch), .library-header의 pointer-events 제거
+###############################################################################
+HTML = r"""
 <!doctype html>
 <html lang="ko">
 <head>
@@ -385,498 +359,241 @@ HTML = """
   <title>FlipBook Space</title>
   <link rel="stylesheet" href="/static/flipbook.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  
+  <!-- pdf.js 및 기타 스크립트 -->
   <script src="/static/three.js"></script>
   <script src="/static/iscroll.js"></script>
   <script src="/static/mark.js"></script>
   <script src="/static/mod3d.js"></script>
   <script src="/static/pdf.js"></script>
+  <script>
+  // pdfjsLib 로드 실패 시 전체 스크립트가 중단되지 않도록 방어
+  try {
+    pdfjsLib.GlobalWorkerOptions.workerSrc = '/static/pdf.worker.js';
+  } catch(e) {
+    console.warn("⚠️ pdfjsLib not loaded: " + e);
+  }
+  </script>
+  
   <script src="/static/flipbook.js"></script>
   <script src="/static/flipbook.book3.js"></script>
   <script src="/static/flipbook.scroll.js"></script>
   <script src="/static/flipbook.swipe.js"></script>
   <script src="/static/flipbook.webgl.js"></script>
+  
   <style>
-  /* 전체 사이트 파스텔톤 테마 */
-  :root {
-    --primary-color: #a5d8ff; /* 파스텔 블루 */
-    --secondary-color: #ffd6e0; /* 파스텔 핑크 */
-    --tertiary-color: #c3fae8; /* 파스텔 민트 */
-    --accent-color: #d0bfff; /* 파스텔 퍼플 */
-    --bg-color: #f8f9fa; /* 밝은 배경 */
-    --text-color: #495057; /* 부드러운 어두운 색 */
-    --card-bg: #ffffff; /* 카드 배경색 */
-    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
-    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
-    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
-    --radius-sm: 8px;
-    --radius-md: 12px;
-    --radius-lg: 16px;
-    --transition: all 0.3s ease;
-  }
-
   body {
     margin: 0;
-    /* ▼ 고급진 블루 계열 그라디에이션으로 변경 */
     background-image: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
     background-attachment: fixed;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: var(--text-color);
+    color: #495057;
   }
-
-  /* 헤더 제목 제거 및 Home 버튼 레이어 처리 */
   .floating-home {
-    position: fixed;
-    top: 20px;
-    left: 20px;
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
+    position: fixed; top: 20px; left: 20px;
+    width: 60px; height: 60px; border-radius: 50%;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
-    box-shadow: var(--shadow-md);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
     z-index: 9999;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    transition: var(--transition);
-    overflow: hidden;
-  }
-  
-  .floating-home:hover {
-    transform: scale(1.05);
-    box-shadow: var(--shadow-lg);
+    display: flex; justify-content: center; align-items: center;
+    cursor: pointer; transition: 0.3s; overflow: hidden;
   }
-  
+  .floating-home:hover { transform: scale(1.05); }
   .floating-home .icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    font-size: 22px;
-    color: var(--primary-color);
-    transition: var(--transition);
-  }
-  
-  .floating-home:hover .icon {
-    color: #8bc5f8;
+    width: 100%; height: 100%;
+    font-size: 22px; color: #a5d8ff; transition: 0.3s;
+    display: flex; justify-content: center; align-items: center;
   }
-  
+  .floating-home:hover .icon { color: #8bc5f8; }
   .floating-home .title {
-    position: absolute;
-    left: 70px;
+    position: absolute; left: 70px;
     background: rgba(255, 255, 255, 0.95);
-    padding: 8px 20px;
-    border-radius: 20px;
-    box-shadow: var(--shadow-sm);
-    font-weight: 600;
-    font-size: 14px;
-    white-space: nowrap;
-    pointer-events: none;
-    opacity: 0;
-    transform: translateX(-10px);
-    transition: all 0.3s ease;
+    padding: 8px 20px; border-radius: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    font-weight: 600; font-size: 14px;
+    white-space: nowrap; pointer-events: none; opacity: 0;
+    transform: translateX(-10px); transition: all 0.3s ease;
   }
-  
   .floating-home:hover .title {
-    opacity: 1;
-    transform: translateX(0);
+    opacity: 1; transform: translateX(0);
+  }
+  /* ▼ pointer-events: none 제거! 버튼 클릭을 막지 않는다. */
+  .library-header {
+    position: fixed; top: 10px; left:0; right:0;
+    text-align: center; z-index: 100;
+  }
+  .library-header .title {
+    display: inline-block;
+    padding: 8px 20px;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(10px);
+    border-radius: 30px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    font-size: 1.2rem; font-weight: 600;
+    background-image: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
   }
-  
   #home, #viewerPage {
-    padding-top: 100px;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding-bottom: 60px;
-    padding-left: 30px;
-    padding-right: 30px;
-    position: relative;
+    padding-top: 100px; max-width: 1200px; margin: 0 auto;
+    padding-bottom: 60px; padding-left: 30px; padding-right: 30px; position: relative;
   }
-
-  /* 업로드 버튼 스타일 */
   .upload-container {
-    display: flex;
-    margin-bottom: 30px;
-    justify-content: center;
+    display: flex; margin-bottom: 30px; justify-content: center;
   }
-
   button.upload {
-    all: unset;
-    cursor: pointer;
-    padding: 12px 20px;
-    border-radius: var(--radius-md);
-    background: white;
-    margin: 0 10px;
-    font-weight: 500;
-    display: inline-flex;
-    align-items: center;
-    box-shadow: var(--shadow-sm);
-    transition: var(--transition);
-    position: relative;
-    overflow: hidden;
+    all: unset; cursor: pointer; padding: 12px 20px; border-radius: 12px;
+    background: white; margin: 0 10px; font-weight: 500;
+    display: inline-flex; align-items: center; position: relative;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    transition: 0.3s; overflow: hidden;
   }
-
   button.upload::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
-    opacity: 0.08;
-    z-index: -1;
+    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
+    background: linear-gradient(120deg, #a5d8ff, #ffd6e0);
+    opacity: 0.08; z-index: -1;
   }
-
   button.upload:hover {
     transform: translateY(-3px);
-    box-shadow: var(--shadow-md);
-  }
-
-  button.upload:hover::before {
-    opacity: 0.15;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   }
+  button.upload:hover::before { opacity: 0.15; }
+  button.upload i { margin-right: 8px; font-size: 20px; }
 
-  button.upload i {
-    margin-right: 8px;
-    font-size: 20px;
+  .section-title {
+    font-size: 1.3rem; font-weight:600; margin:30px 0 15px; color:#495057;
   }
-
-  /* 그리드 및 카드 스타일 */
   .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 24px;
-    margin-top: 36px;
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
+    gap:24px; margin-top:36px;
+  }
+  .no-projects {
+    text-align:center; margin:40px 0; font-size:16px; color:#495057;
   }
-
   .card {
-    background: var(--card-bg);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    box-shadow: var(--shadow-sm);
-    width: 100%;
-    height: 280px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    transition: var(--transition);
-    overflow: hidden;
+    background: #ffffff; border-radius:12px; cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05); width:100%; height:280px;
+    position:relative; display:flex; flex-direction:column;
+    align-items:center; justify-content:center; transition: 0.3s; overflow:hidden;
   }
-
   .card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
-    opacity: 0.06;
-    z-index: 1;
+    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
+    background: linear-gradient(135deg, #ffd6e0 0%, #a5d8ff 100%);
+    opacity:0.06; z-index:1;
   }
-
   .card::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 30%;
+    content:''; position:absolute; top:0; left:0; width:100%; height:30%;
     background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
-    z-index: 2;
+    z-index:2;
   }
-
   .card img {
-    width: 65%;
-    height: auto;
-    object-fit: contain;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -65%);
-    border: 1px solid rgba(0,0,0,0.05);
-    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
-    z-index: 3;
-    transition: var(--transition);
+    width:65%; height:auto; object-fit: contain; position:absolute;
+    top:50%; left:50%; transform: translate(-50%, -65%);
+    border:1px solid rgba(0,0,0,0.05);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.08); z-index:3; transition:0.3s;
   }
-
   .card:hover {
     transform: translateY(-5px);
-    box-shadow: var(--shadow-md);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   }
-
   .card:hover img {
     transform: translate(-50%, -65%) scale(1.03);
     box-shadow: 0 8px 20px rgba(0,0,0,0.12);
   }
-
   .card p {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(255, 255, 255, 0.9);
-    padding: 8px 16px;
-    border-radius: 30px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-    width: 80%;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--text-color);
-    z-index: 4;
-    transition: var(--transition);
+    position: absolute; bottom:20px; left:50%; transform:translateX(-50%);
+    background: rgba(255,255,255,0.9); padding:8px 16px;
+    border-radius:30px; box-shadow:0 2px 10px rgba(0,0,0,0.05);
+    width:80%; text-align:center; white-space:nowrap; overflow:hidden;
+    text-overflow:ellipsis; font-size:14px; font-weight:500; color:#495057; z-index:4;
   }
-
   .card:hover p {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(255,255,255,0.95);
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   }
-
-  /* 캐시 상태 뱃지 */
   .cached-status {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: var(--accent-color);
-    color: white;
-    font-size: 11px;
-    padding: 3px 8px;
-    border-radius: 12px;
-    z-index: 5;
-    box-shadow: var(--shadow-sm);
+    position:absolute; top:10px; right:10px;
+    background:#d0bfff; color:white; font-size:11px; padding:3px 8px;
+    border-radius:12px; z-index:5; box-shadow:0 2px 8px rgba(0,0,0,0.05);
   }
-
-  /* 뷰어 스타일 */
   #viewer {
-    width: 90%;
-    height: 90vh;
-    max-width: 90%;
-    margin: 0;
-    background: var(--card-bg);
-    border: none;
-    border-radius: var(--radius-lg);
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1000;
-    box-shadow: var(--shadow-lg);
-    max-height: calc(90vh - 40px);
-    aspect-ratio: auto;
-    object-fit: contain;
-    overflow: hidden;
+    width:90%; height:90vh; max-width:90%; margin:0;
+    background:#fff; border:none; border-radius:16px; position:fixed;
+    top:50%; left:50%; transform:translate(-50%,-50%);
+    z-index:1000; box-shadow:0 8px 24px rgba(0,0,0,0.12);
+    max-height:calc(90vh - 40px); aspect-ratio:auto; object-fit:contain; overflow:hidden;
   }
-
-  /* FlipBook 컨트롤바 스타일 */
   .flipbook-container .fb3d-menu-bar {
-    z-index: 2000 !important;
-    opacity: 1 !important;
-    bottom: 0 !important;
-    background-color: rgba(255,255,255,0.9) !important;
-    backdrop-filter: blur(10px) !important;
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
-    padding: 12px 0 !important;
-    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
+    z-index:2000 !important; opacity:1 !important; bottom:0 !important;
+    background-color:rgba(255,255,255,0.9) !important; backdrop-filter:blur(10px) !important;
+    border-radius:0 0 16px 16px !important; padding:12px 0 !important;
+    box-shadow:0 -4px 20px rgba(0,0,0,0.1) !important;
+  }
+  .flipbook-container .fb3d-menu-bar > ul > li {
+    margin:0 12px !important;
   }
-
   .flipbook-container .fb3d-menu-bar > ul > li > img,
   .flipbook-container .fb3d-menu-bar > ul > li > div {
-    opacity: 1 !important;
-    transform: scale(1.2) !important;
-    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)) !important;
-  }
-
-  .flipbook-container .fb3d-menu-bar > ul > li {
-    margin: 0 12px !important;
+    opacity:1 !important; transform:scale(1.2) !important;
+    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.1)) !important;
   }
-
-  /* 메뉴 툴팁 스타일 */
   .flipbook-container .fb3d-menu-bar > ul > li > span {
-    background-color: rgba(0,0,0,0.7) !important;
-    color: white !important;
-    border-radius: var(--radius-sm) !important;
-    padding: 8px 12px !important;
-    font-size: 13px !important;
-    bottom: 55px !important;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    letter-spacing: 0.3px !important;
+    background-color:rgba(0,0,0,0.7) !important; color:white !important;
+    border-radius:8px !important; padding:8px 12px !important; font-size:13px !important;
+    bottom:55px !important; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+    letter-spacing:0.3px !important;
   }
-
-  /* 뷰어 모드일 때 배경 오버레이 */
   .viewer-mode {
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
   }
-
-  /* 뷰어 페이지 배경 */
   #viewerPage {
-    background: transparent;
+    background:transparent;
   }
-
-  /* 로딩 애니메이션 */
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
+  @keyframes spin { 0%{transform:rotate(0deg);}100%{transform:rotate(360deg);} }
   .loading-spinner {
-    border: 4px solid rgba(255,255,255,0.3);
-    border-top: 4px solid var(--primary-color);
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    margin: 0 auto;
-    animation: spin 1.5s ease-in-out infinite;
+    border:4px solid rgba(255,255,255,0.3);
+    border-top:4px solid #a5d8ff; border-radius:50%;
+    width:50px; height:50px; margin:0 auto; animation:spin 1.5s ease-in-out infinite;
   }
-
   .loading-container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(10px);
-    padding: 30px;
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-md);
-    z-index: 9999;
+    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
+    text-align:center; background:rgba(255,255,255,0.85);
+    backdrop-filter:blur(10px); padding:30px; border-radius:12px;
+    box-shadow:0 4px 12px rgba(0,0,0,0.08); z-index:9999;
   }
-
   .loading-text {
-    margin-top: 20px;
-    font-size: 16px;
-    color: var(--text-color);
-    font-weight: 500;
-  }
-
-  /* 페이지 전환 애니메이션 */
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  .fade-in {
-    animation: fadeIn 0.5s ease-out;
-  }
-
-  /* 추가 스타일 */
-  .section-title {
-    font-size: 1.3rem;
-    font-weight: 600;
-    margin: 30px 0 15px;
-    color: var(--text-color);
+    margin-top:20px; font-size:16px; color:#495057; font-weight:500;
   }
-
-  .no-projects {
-    text-align: center;
-    margin: 40px 0;
-    color: var(--text-color);
-    font-size: 16px;
-  }
-
-  /* 프로그레스 바 */
+  @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
+  .fade-in { animation:fadeIn 0.5s ease-out; }
   .progress-bar-container {
-    width: 100%;
-    height: 6px;
-    background-color: rgba(0,0,0,0.1);
-    border-radius: 3px;
-    margin-top: 15px;
-    overflow: hidden;
+    width:100%; height:6px; background-color:rgba(0,0,0,0.1);
+    border-radius:3px; margin-top:15px; overflow:hidden;
   }
-
   .progress-bar {
-    height: 100%;
-    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
-    border-radius: 3px;
-    transition: width 0.3s ease;
+    height:100%; background:linear-gradient(to right, #a5d8ff, #d0bfff);
+    border-radius:3px; transition:width 0.3s ease;
   }
-
-  /* 헤더 로고 및 타이틀 */
-  /* ▼ pointer-events: none 제거, 높이와 패딩 조정하여 제목을 더 위로 */
-  .library-header {
-    position: fixed;
-    top: 10px;  /* 기존 20px -> 10px으로 */
-    left: 0;
-    right: 0;
-    text-align: center;
-    z-index: 100;
-  }
-  
-  .library-header .title {
-    display: inline-block;
-    /* 높이 줄이기 위한 패딩/폰트 크기 조정 */
-    padding: 8px 20px; /* 기존 12px 30px -> 8px 20px */
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(10px);
-    border-radius: 30px;
-    box-shadow: var(--shadow-md);
-    font-size: 1.2rem; /* 기존 1.5rem -> 1.2rem */
-    font-weight: 600;
-    background-image: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-  }
-  
-  /* 점진적 로딩 표시 */
   .loading-pages {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(255, 255, 255, 0.9);
-    padding: 10px 20px;
-    border-radius: 20px;
-    box-shadow: var(--shadow-md);
-    font-size: 14px;
-    color: var(--text-color);
-    z-index: 9998;
-    text-align: center;
+    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
+    background:rgba(255,255,255,0.9); padding:10px 20px; border-radius:20px;
+    box-shadow:0 4px 12px rgba(0,0,0,0.08); font-size:14px; color:#495057;
+    z-index:9998; text-align:center;
   }
-
-  /* 반응형 디자인 */
-  @media (max-width: 768px) {
-    .grid {
-      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-      gap: 16px;
-    }
-    
-    .card {
-      height: 240px;
-    }
-    
-    .library-header .title {
-      font-size: 1rem;
-      padding: 6px 16px;
-    }
-    
-    .floating-home {
-      width: 50px;
-      height: 50px;
-    }
-    
-    .floating-home .icon {
-      font-size: 18px;
-    }
+  @media (max-width:768px){
+    .grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:16px; }
+    .card { height:240px; }
+    .library-header .title { font-size:1rem; padding:6px 16px; }
+    .floating-home { width:50px; height:50px; }
+    .floating-home .icon { font-size:18px; }
   }
   </style>
 </head>
 <body>
-  <!-- 제목을 Home 버튼과 함께 레이어로 처리 -->
   <div id="homeButton" class="floating-home" style="display:none;">
     <div class="icon"><i class="fas fa-home"></i></div>
     <div class="title">홈으로 돌아가기</div>
   </div>
-  
-  <!-- 센터 정렬된 타이틀 -->
   <div class="library-header">
     <div class="title">FlipBook Library</div>
   </div>
@@ -894,139 +611,107 @@ HTML = """
     </div>
     
     <div class="section-title">내 프로젝트</div>
-    <div class="grid" id="grid">
-      <!-- 카드가 여기에 동적으로 추가됩니다 -->
-    </div>
-    <div id="noProjects" class="no-projects" style="display: none;">
+    <div class="grid" id="grid"></div>
+    <div id="noProjects" class="no-projects" style="display:none;">
       프로젝트가 없습니다. 이미지나 PDF를 추가하여 시작하세요.
     </div>
   </section>
 
-  <section id="viewerPage" style="display:none">
+  <section id="viewerPage" style="display:none;">
     <div id="viewer"></div>
-    <div id="loadingPages" class="loading-pages" style="display:none;">페이지 로딩 중... <span id="loadingPagesCount">0/0</span></div>
+    <div id="loadingPages" class="loading-pages" style="display:none;">
+      페이지 로딩 중... <span id="loadingPagesCount">0/0</span>
+    </div>
   </section>
 
   <script>
-    let projects=[], fb=null;
-    const grid=$id('grid'), viewer=$id('viewer');
-    pdfjsLib.GlobalWorkerOptions.workerSrc='/static/pdf.worker.js';
-
-    // 서버에서 미리 로드된 PDF 프로젝트
+    let projects = [], fb = null;
     let serverProjects = [];
-    
-    // 현재 페이지 로딩 상태
     let currentLoadingPdfPath = null;
     let pageLoadingInterval = null;
 
-    /* 🔊 오디오 unlock – 내장 Audio 와 같은 MP3 경로 사용 */
+    function $id(id){return document.getElementById(id)}
+
     ['click','touchstart'].forEach(evt=>{
-      document.addEventListener(evt,function u(){new Audio('static/turnPage2.mp3')
-            .play().then(a=>a.pause()).catch(()=>{});document.removeEventListener(evt,u,{capture:true});},
-            {once:true,capture:true});
+      document.addEventListener(evt,function u(){
+        new Audio('static/turnPage2.mp3').play().then(a=>a.pause()).catch(()=>{});
+        document.removeEventListener(evt,u,{capture:true});
+      }, {once:true,capture:true});
     });
-    
-    /* ── 유틸 ── */
-    function $id(id){return document.getElementById(id)}
-    
-    // 직접 이벤트 리스너 설정 (업로드 버튼 클릭시 파일 선택창 열기)
+
     function setupDirectEvents() {
-      // 이미지 업로드 버튼
       const imageBtn = $id('imageUploadBtn');
       const imageInput = $id('imgInput');
       if (imageBtn && imageInput) {
-        console.log('이미지 업로드 버튼 이벤트 설정');
-        imageBtn.onclick = function(e) {
-          e.preventDefault();
-          e.stopPropagation();
+        imageBtn.onclick = (e)=>{
+          e.preventDefault(); e.stopPropagation();
           imageInput.click();
         };
       }
-      
-      // PDF 업로드 버튼
       const pdfBtn = $id('pdfUploadBtn');
       const pdfInput = $id('pdfInput');
       if (pdfBtn && pdfInput) {
-        console.log('PDF 업로드 버튼 이벤트 설정');
-        pdfBtn.onclick = function(e) {
-          e.preventDefault();
-          e.stopPropagation();
+        pdfBtn.onclick = (e)=>{
+          e.preventDefault(); e.stopPropagation();
           pdfInput.click();
         };
       }
     }
 
-    function addCard(i, thumb, title, isCached = false) {
+    function addCard(i, thumb, title, isCached=false) {
       const d = document.createElement('div');
       d.className = 'card fade-in';
-      d.onclick = () => open(i);
-      
-      const displayTitle = title ? 
-        (title.length > 15 ? title.substring(0, 15) + '...' : title) : 
-        '프로젝트 ' + (i+1);
-      
-      const cachedBadge = isCached ? 
-        '<div class="cached-status">캐시됨</div>' : '';
-      
+      d.onclick = ()=> open(i);
+      const displayTitle = title.length>15 ? title.substring(0,15)+'...' : title;
+      const cachedBadge = isCached ? `<div class="cached-status">캐시됨</div>` : '';
       d.innerHTML = `
         <div class="card-inner">
           ${cachedBadge}
           <img src="${thumb}" alt="${displayTitle}" loading="lazy">
-          <p title="${title || '프로젝트 ' + (i+1)}">${displayTitle}</p>
+          <p title="${title}">${displayTitle}</p>
         </div>
       `;
-      grid.appendChild(d);
-      
-      // 프로젝트가 있으면 '프로젝트 없음' 메시지 숨기기
+      $id('grid').appendChild(d);
       $id('noProjects').style.display = 'none';
     }
 
-    /* ── 이미지 업로드 ── */
     $id('imgInput').onchange = e => {
-      const files = [...e.target.files];
-      if(!files.length) return;
-      
+      const files = [...e.target.files]; if(!files.length) return;
       showLoading("이미지 로딩 중...");
-      
-      const pages=[], tot = files.length; 
-      let done = 0;
-      files.forEach((f,i)=> {
+      const pages=[], tot=files.length; let done=0;
+      files.forEach((f,i)=>{
         const r=new FileReader();
         r.onload=x=>{
-          pages[i] = {src: x.target.result, thumb: x.target.result};
-          if(++done===tot) {
-            save(pages, '이미지 컬렉션');
-            hideLoading();
-          }
+          pages[i] = {src:x.target.result, thumb:x.target.result};
+          if(++done===tot){ save(pages,'이미지 컬렉션'); hideLoading(); }
         };
         r.readAsDataURL(f);
       });
     };
 
-    /* ── PDF 업로드 ── */
     $id('pdfInput').onchange = e => {
-      const file = e.target.files[0];
-      if(!file) return;
-      
+      const file=e.target.files[0]; if(!file) return;
       showLoading("PDF 로딩 중...");
-      
-      const fr = new FileReader();
-      fr.onload = v => {
-        pdfjsLib.getDocument({data: v.target.result}).promise.then(async pdf=>{
-          const pages = [];
-          
-          for(let p=1; p <= pdf.numPages; p++){
+      const fr=new FileReader();
+      fr.onload=v=>{
+        if(!window.pdfjsLib) {
+          hideLoading();
+          showError("pdf.js가 로드되지 않아 PDF 처리를 할 수 없습니다.");
+          return;
+        }
+        pdfjsLib.getDocument({data:v.target.result}).promise.then(async pdf=>{
+          const pages=[];
+          for(let p=1;p<=pdf.numPages;p++){
             updateLoading(\`PDF 페이지 로딩 중... (\${p}/\${pdf.numPages})\`);
             const pg=await pdf.getPage(p), vp=pg.getViewport({scale:1});
-            const c=document.createElement('canvas');
-            c.width=vp.width;c.height=vp.height;
+            const c=document.createElement('canvas'); c.width=vp.width; c.height=vp.height;
             await pg.render({canvasContext:c.getContext('2d'),viewport:vp}).promise;
             pages.push({src:c.toDataURL(), thumb:c.toDataURL()});
           }
           hideLoading();
-          save(pages, file.name.replace('.pdf', ''));
-        }).catch(error => {
-          console.error("PDF 로딩 오류:", error);
+          save(pages, file.name.replace('.pdf',''));
+        }).catch(err=>{
+          console.error("PDF 로딩 오류:", err);
           hideLoading();
           showError("PDF 로딩 중 오류가 발생했습니다.");
         });
@@ -1034,527 +719,382 @@ HTML = """
       fr.readAsArrayBuffer(file);
     };
 
-    function save(pages, title, isCached = false){
+    function save(pages,title,isCached=false){
       const id=projects.push(pages)-1;
       addCard(id, pages[0].thumb, title, isCached);
     }
 
-    /* ── 서버 PDF 로드 및 캐시 상태 확인 ── */
     async function loadServerPDFs() {
       try {
-        if (document.querySelectorAll('.card').length === 0) {
+        if(document.querySelectorAll('.card').length===0){
           showLoading("라이브러리 로딩 중...");
         }
-        
-        // 먼저 캐시 상태 확인
-        const cacheStatusRes = await fetch('/api/cache-status');
-        const cacheStatus = await cacheStatusRes.json();
-        
-        // PDF 프로젝트 목록 가져오기
-        const response = await fetch('/api/pdf-projects');
-        serverProjects = await response.json();
-        
-        if (serverProjects.length === 0) {
+        // 캐��� 상태
+        const csRes = await fetch('/api/cache-status');
+        const cacheStatus = await csRes.json();
+
+        // PDF 프로젝트 목록
+        const resp = await fetch('/api/pdf-projects');
+        serverProjects = await resp.json();
+        if(serverProjects.length===0){
           hideLoading();
-          $id('noProjects').style.display = 'block';
+          $id('noProjects').style.display='block';
           return;
         }
-        
-        const thumbnailPromises = serverProjects.map(async (project, index) => {
-          updateLoading(\`PDF 프로젝트 로딩 중... (\${index+1}/\${serverProjects.length})\`);
-          
-          const pdfName = project.name;
+        const thumbPromises = serverProjects.map(async (proj,idx)=>{
+          updateLoading(\`PDF 프로젝트 로딩 중... (\${idx+1}/\${serverProjects.length})\`);
+          const pdfName = proj.name;
           const isCached = cacheStatus[pdfName] && cacheStatus[pdfName].status === "completed";
-          
           try {
-            // 썸네일 가져오기
-            const response = await fetch(\`/api/pdf-thumbnail?path=\${encodeURIComponent(project.path)}\`);
-            const data = await response.json();
-            
-            if(data.thumbnail) {
-              const pages = [{
-                src: data.thumbnail,
-                thumb: data.thumbnail,
-                path: project.path,
-                cached: isCached
-              }];
-              return { pages, name: project.name, isCached };
+            const resp2 = await fetch(\`/api/pdf-thumbnail?path=\${encodeURIComponent(proj.path)}\`);
+            const data = await resp2.json();
+            if(data.thumbnail){
+              return {
+                pages:[{
+                  src:data.thumbnail,
+                  thumb:data.thumbnail,
+                  path:proj.path,
+                  cached:isCached
+                }],
+                name:proj.name,
+                isCached
+              };
             }
-          } catch (err) {
-            console.error(\`썸네일 로드 오류 (\${project.name}):\`, err);
+          } catch(e) {
+            console.error(\`썸네일 로드 오류 (\${proj.name}):\`, e);
           }
-          
           return null;
         });
-        
-        const results = await Promise.all(thumbnailPromises);
-        
-        results.filter(result => result !== null).forEach(result => {
-          save(result.pages, result.name, result.isCached);
+        const results = await Promise.all(thumbPromises);
+        results.filter(r=>r).forEach(r=>{
+          save(r.pages, r.name, r.isCached);
         });
-        
         hideLoading();
-        
-        if (document.querySelectorAll('.card').length === 0) {
-          $id('noProjects').style.display = 'block';
+        if(document.querySelectorAll('.card').length===0){
+          $id('noProjects').style.display='block';
         }
-      } catch(error) {
-        console.error('서버 PDF 로드 실패:', error);
+      } catch(e) {
+        console.error("서버 PDF 로드 실패:", e);
         hideLoading();
         showError("라이브러리 로딩 중 오류가 발생했습니다.");
       }
     }
 
-    /* ── 캐시 상태 정기적으로 확인 ── */
-    async function checkCacheStatus() {
+    async function checkCacheStatus(){
       try {
-        const response = await fetch('/api/cache-status');
-        const cacheStatus = await response.json();
-        
-        // 현재 카드 상태 업데이트
-        const cards = document.querySelectorAll('.card');
-        
-        for(let i = 0; i < cards.length; i++) {
-          if(projects[i] && projects[i][0] && projects[i][0].path) {
-            const pdfPath = projects[i][0].path;
-            const pdfName = pdfPath.split('/').pop().replace('.pdf', '');
-            
+        const res=await fetch('/api/cache-status');
+        const cacheStatus=await res.json();
+        const cards=document.querySelectorAll('.card');
+        for(let i=0;i<cards.length;i++){
+          if(projects[i]?.[0]?.path){
+            const pdfPath=projects[i][0].path;
+            const pdfName = pdfPath.split('/').pop().replace('.pdf','');
             let badgeEl = cards[i].querySelector('.cached-status');
-            
-            if(cacheStatus[pdfName] && cacheStatus[pdfName].status === "completed") {
-              if(!badgeEl) {
-                badgeEl = document.createElement('div');
-                badgeEl.className = 'cached-status';
-                badgeEl.textContent = '캐시됨';
+            if(cacheStatus[pdfName]?.status==="completed"){
+              if(!badgeEl){
+                badgeEl=document.createElement('div');
+                badgeEl.className='cached-status';
+                badgeEl.textContent='캐시됨';
                 cards[i].querySelector('.card-inner')?.appendChild(badgeEl);
-              } else if (badgeEl.textContent !== '캐시됨') {
-                badgeEl.textContent = '캐시됨';
-                badgeEl.style.background = 'var(--accent-color)';
+              } else if(badgeEl.textContent!=='캐시됨'){
+                badgeEl.textContent='캐시됨';
+                badgeEl.style.background='#d0bfff';
               }
-              projects[i][0].cached = true;
-            } else if(cacheStatus[pdfName] && cacheStatus[pdfName].status === "processing") {
-              if(!badgeEl) {
-                badgeEl = document.createElement('div');
-                badgeEl.className = 'cached-status';
+              projects[i][0].cached=true;
+            } else if(cacheStatus[pdfName]?.status==="processing"){
+              if(!badgeEl){
+                badgeEl=document.createElement('div');
+                badgeEl.className='cached-status';
                 cards[i].querySelector('.card-inner')?.appendChild(badgeEl);
               }
-              badgeEl.textContent = \`\${cacheStatus[pdfName].progress}%\`;
-              badgeEl.style.background = 'var(--secondary-color)';
+              badgeEl.textContent=\`\${cacheStatus[pdfName].progress}%\`;
+              badgeEl.style.background='#ffd6e0';
             }
           }
         }
-        
-        // 현재 로딩 중인 PDF가 있으면 상태 확인
-        if (currentLoadingPdfPath && pageLoadingInterval) {
-          const pdfName = currentLoadingPdfPath.split('/').pop().replace('.pdf', '');
-          if (cacheStatus[pdfName]) {
-            const status = cacheStatus[pdfName].status;
-            const progress = cacheStatus[pdfName].progress || 0;
-            
-            if (status === "completed") {
+        if(currentLoadingPdfPath && pageLoadingInterval){
+          const pdfName = currentLoadingPdfPath.split('/').pop().replace('.pdf','');
+          if(cacheStatus[pdfName]){
+            const st=cacheStatus[pdfName].status;
+            const pr=cacheStatus[pdfName].progress||0;
+            if(st==="completed"){
               clearInterval(pageLoadingInterval);
-              $id('loadingPages').style.display = 'none';
-              currentLoadingPdfPath = null;
+              $id('loadingPages').style.display='none';
+              currentLoadingPdfPath=null;
               refreshFlipBook();
-            } else if (status === "processing") {
-              $id('loadingPages').style.display = 'block';
-              $id('loadingPagesCount').textContent = \`\${progress}%\`;
+            } else if(st==="processing"){
+              $id('loadingPages').style.display='block';
+              $id('loadingPagesCount').textContent=\`\${pr}%\`;
             }
           }
         }
-      } catch(error) {
-        console.error('캐시 상태 확인 오류:', error);
+      } catch(e){
+        console.error("캐시 상태 확인 오류:", e);
       }
     }
 
-    /* ── 카드 → FlipBook ── */
-    async function open(i) {
+    async function open(i){
       toggle(false);
-      const pages = projects[i];
-      
-      if(fb) {
-        fb.destroy();
-        viewer.innerHTML = '';
-      }
-      
-      if(pages[0].path) {
+      const pages=projects[i];
+      if(fb){fb.destroy();viewer.innerHTML='';}
+      if(pages[0]?.path){
         const pdfPath = pages[0].path;
-        let progressiveLoading = false;
-        currentLoadingPdfPath = pdfPath;
-        
-        if(pages[0].cached) {
+        let progressive=false;
+        currentLoadingPdfPath=pdfPath;
+        if(pages[0].cached){
           showLoading("캐시된 PDF 로딩 중...");
           try {
-            const response = await fetch(\`/api/cached-pdf?path=\${encodeURIComponent(pdfPath)}\`);
-            const cachedData = await response.json();
-            
-            if(cachedData.status === "completed" && cachedData.pages) {
-              hideLoading();
-              createFlipBook(cachedData.pages);
-              currentLoadingPdfPath = null;
-              return;
-            } else if(cachedData.status === "processing" && cachedData.pages && cachedData.pages.length > 0) {
-              hideLoading();
-              createFlipBook(cachedData.pages);
-              progressiveLoading = true;
-              startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
+            const resp=await fetch(\`/api/cached-pdf?path=\${encodeURIComponent(pdfPath)}\`);
+            const cData=await resp.json();
+            if(cData.status==="completed" && cData.pages){
+              hideLoading(); createFlipBook(cData.pages); currentLoadingPdfPath=null; return;
+            } else if(cData.status==="processing" && cData.pages && cData.pages.length>0){
+              hideLoading(); createFlipBook(cData.pages);
+              progressive=true;
+              startProgressiveLoadingIndicator(cData.progress,cData.total_pages);
             }
-          } catch(error) {
-            console.error("캐시 데이터 로드 오류:", error);
-          }
+          }catch(e){console.error("캐시 데이터 로드 오류:", e);}
         }
-        
-        if(!progressiveLoading) {
+        if(!progressive){
           showLoading("PDF 준비 중...");
           try {
-            const response = await fetch(\`/api/pdf-content?path=\${encodeURIComponent(pdfPath)}\`);
-            const data = await response.json();
-            
-            if(data.redirect) {
-              const redirectRes = await fetch(data.redirect);
-              const cachedData = await redirectRes.json();
-              
-              if(cachedData.status === "completed" && cachedData.pages) {
-                hideLoading();
-                createFlipBook(cachedData.pages);
-                currentLoadingPdfPath = null;
-                return;
-              } else if(cachedData.status === "processing" && cachedData.pages && cachedData.pages.length > 0) {
-                hideLoading();
-                createFlipBook(cachedData.pages);
-                startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
+            const resp=await fetch(\`/api/pdf-content?path=\${encodeURIComponent(pdfPath)}\`);
+            const d=await resp.json();
+            if(d.redirect){
+              const r2=await fetch(d.redirect);
+              const c2=await r2.json();
+              if(c2.status==="completed" && c2.pages){
+                hideLoading(); createFlipBook(c2.pages); currentLoadingPdfPath=null; return;
+              } else if(c2.status==="processing" && c2.pages && c2.pages.length>0){
+                hideLoading(); createFlipBook(c2.pages);
+                startProgressiveLoadingIndicator(c2.progress,c2.total_pages);
                 return;
               }
             }
-            
-            const pdfResponse = await fetch(\`/api/pdf-content?path=\${encodeURIComponent(pdfPath)}\`);
-            
-            try {
-              const jsonData = await pdfResponse.clone().json();
-              if (jsonData.redirect) {
-                const redirectRes = await fetch(jsonData.redirect);
-                const cachedData = await redirectRes.json();
-                
-                if(cachedData.pages && cachedData.pages.length > 0) {
-                  hideLoading();
-                  createFlipBook(cachedData.pages);
-                  if(cachedData.status === "processing") {
-                    startProgressiveLoadingIndicator(cachedData.progress, cachedData.total_pages);
+            // 실제 PDF 데이터 (arrayBuffer)
+            const pdfResp = await fetch(\`/api/pdf-content?path=\${encodeURIComponent(pdfPath)}\`);
+            // 혹시 JSON 형태로 리다이렉트가 오는지 체크
+            try{
+              const testJson=await pdfResp.clone().json();
+              if(testJson.redirect){
+                const rr=await fetch(testJson.redirect);
+                const cc=await rr.json();
+                if(cc.pages && cc.pages.length>0){
+                  hideLoading(); createFlipBook(cc.pages);
+                  if(cc.status==="processing") {
+                    startProgressiveLoadingIndicator(cc.progress,cc.total_pages);
                   } else {
-                    currentLoadingPdfPath = null;
+                    currentLoadingPdfPath=null;
                   }
                   return;
                 }
               }
-            } catch (e) {
-              // JSON 파싱 실패 -> PDF 원본 데이터로 처리
+            }catch(e){}
+            // ArrayBuffer → pdf.js 로드
+            const pdfData=await pdfResp.arrayBuffer();
+            if(!window.pdfjsLib){
+              hideLoading();
+              showError("pdf.js가 로드되지 않아 PDF 처리를 할 수 없습니다.");
+              return;
             }
-            
-            const pdfData = await pdfResponse.arrayBuffer();
-            const pdf = await pdfjsLib.getDocument({data: pdfData}).promise;
-            const pdfPages = [];
-            
-            for(let p=1; p <= pdf.numPages; p++) {
+            const pdf=await pdfjsLib.getDocument({data:pdfData}).promise;
+            const pdfPages=[];
+            for(let p=1;p<=pdf.numPages;p++){
               updateLoading(\`페이지 준비 중... (\${p}/\${pdf.numPages})\`);
-              const pg = await pdf.getPage(p);
-              const vp = pg.getViewport({scale: 1});
-              const c = document.createElement('canvas');
-              c.width = vp.width;
-              c.height = vp.height;
-              await pg.render({canvasContext: c.getContext('2d'), viewport: vp}).promise;
-              pdfPages.push({src: c.toDataURL(), thumb: c.toDataURL()});
+              const pg=await pdf.getPage(p);
+              const vp=pg.getViewport({scale:1});
+              const c=document.createElement('canvas');
+              c.width=vp.width; c.height=vp.height;
+              await pg.render({canvasContext:c.getContext('2d'),viewport:vp}).promise;
+              pdfPages.push({src:c.toDataURL(), thumb:c.toDataURL()});
             }
             hideLoading();
             createFlipBook(pdfPages);
-            currentLoadingPdfPath = null;
-          } catch(error) {
-            console.error('PDF 처리 중 오류:', error);
+            currentLoadingPdfPath=null;
+          } catch(err){
+            console.error("PDF 처리 오류:", err);
             hideLoading();
-            showError("PDF를 로드하는 중 오류가 발생했습니다.");
-            currentLoadingPdfPath = null;
+            showError("PDF 로드 중 오류가 발생했습니다.");
+            currentLoadingPdfPath=null;
           }
         }
       } else {
         createFlipBook(pages);
-        currentLoadingPdfPath = null;
+        currentLoadingPdfPath=null;
       }
     }
 
-    function startProgressiveLoadingIndicator(progress, totalPages) {
-      $id('loadingPages').style.display = 'block';
-      $id('loadingPagesCount').textContent = \`\${progress}%\`;
-      
-      if (pageLoadingInterval) {
-        clearInterval(pageLoadingInterval);
-      }
-      pageLoadingInterval = setInterval(async () => {
-        if (!currentLoadingPdfPath) {
+    function startProgressiveLoadingIndicator(progress, totalPages){
+      $id('loadingPages').style.display='block';
+      $id('loadingPagesCount').textContent=\`\${progress}%\`;
+      if(pageLoadingInterval){ clearInterval(pageLoadingInterval); }
+      pageLoadingInterval = setInterval(async()=>{
+        if(!currentLoadingPdfPath){
           clearInterval(pageLoadingInterval);
-          $id('loadingPages').style.display = 'none';
+          $id('loadingPages').style.display='none';
           return;
         }
         try {
-          const response = await fetch(\`/api/cache-status?path=\${encodeURIComponent(currentLoadingPdfPath)}\`);
-          const status = await response.json();
-          
-          if (status.status === "completed") {
+          const r=await fetch(\`/api/cache-status?path=\${encodeURIComponent(currentLoadingPdfPath)}\`);
+          const st=await r.json();
+          if(st.status==="completed"){
             clearInterval(pageLoadingInterval);
-            $id('loadingPages').style.display = 'none';
+            $id('loadingPages').style.display='none';
             refreshFlipBook();
-            currentLoadingPdfPath = null;
-          } else if (status.status === "processing") {
-            $id('loadingPagesCount').textContent = \`\${status.progress}%\`;
+            currentLoadingPdfPath=null;
+          } else if(st.status==="processing"){
+            $id('loadingPagesCount').textContent=\`\${st.progress}%\`;
           }
-        } catch (e) {
-          console.error("캐시 상태 확인 오류:", e);
-        }
+        }catch(e){console.error("캐시 상태 확인 오류:", e);}
       }, 1000);
     }
 
-    async function refreshFlipBook() {
-      if (!currentLoadingPdfPath || !fb) return;
-      try {
-        const response = await fetch(\`/api/cached-pdf?path=\${encodeURIComponent(currentLoadingPdfPath)}\`);
-        const cachedData = await response.json();
-        
-        if(cachedData.status === "completed" && cachedData.pages) {
-          fb.destroy();
-          viewer.innerHTML = '';
-          createFlipBook(cachedData.pages);
-          currentLoadingPdfPath = null;
+    async function refreshFlipBook(){
+      if(!currentLoadingPdfPath || !fb)return;
+      try{
+        const r=await fetch(\`/api/cached-pdf?path=\${encodeURIComponent(currentLoadingPdfPath)}\`);
+        const cData=await r.json();
+        if(cData.status==="completed" && cData.pages){
+          fb.destroy(); viewer.innerHTML='';
+          createFlipBook(cData.pages);
+          currentLoadingPdfPath=null;
         }
-      } catch (e) {
-        console.error("플립북 새로고침 오류:", e);
-      }
+      } catch(e){console.error("플립북 새로고침 오류:", e);}
     }
 
-    function createFlipBook(pages) {
-      console.log('FlipBook 생성 시작. 페이지 수:', pages.length);
-      try {
-        const calculateAspectRatio = () => {
-          const windowWidth = window.innerWidth;
-          const windowHeight = window.innerHeight;
-          const aspectRatio = windowWidth / windowHeight;
-          
-          let width, height;
-          if (aspectRatio > 1) {
-            height = Math.min(windowHeight * 0.9, windowHeight - 40);
-            width = height * aspectRatio * 0.8;
-            if (width > windowWidth * 0.9) {
-              width = windowWidth * 0.9;
-              height = width / (aspectRatio * 0.8);
-            }
+    function createFlipBook(pages){
+      try{
+        const calcSize=()=>{
+          const ww=window.innerWidth, wh=window.innerHeight;
+          const ar=ww/wh; let w,h;
+          if(ar>1){
+            h=Math.min(wh*0.9,wh-40);
+            w=h*ar*0.8;
+            if(w>ww*0.9){w=ww*0.9; h=w/(ar*0.8);}
           } else {
-            width = Math.min(windowWidth * 0.9, windowWidth - 40);
-            height = width / aspectRatio * 0.9;
-            if (height > windowHeight * 0.9) {
-              height = windowHeight * 0.9;
-              width = height * aspectRatio * 0.9;
-            }
+            w=Math.min(ww*0.9,ww-40);
+            h=w/ar*0.9;
+            if(h>wh*0.9){h=wh*0.9; w=h*ar*0.9;}
           }
-          return {
-            width: Math.round(width),
-            height: Math.round(height)
-          };
+          return {width:Math.round(w), height:Math.round(h)};
         };
-        
-        const size = calculateAspectRatio();
-        viewer.style.width = size.width + 'px';
-        viewer.style.height = size.height + 'px';
-        
-        const validPages = pages.map(page => {
-          if (!page || !page.src) {
-            return {
-              src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iIGZpbGw9IiM1NTUiPkxvYWRpbmcuLi48L3RleHQ+PC9zdmc+',
-              thumb: page && page.thumb ? page.thumb : ''
-            };
+        const size=calcSize();
+        viewer.style.width=size.width+'px';
+        viewer.style.height=size.height+'px';
+
+        const validPages = pages.map(p=>{
+          if(!p || !p.src){
+            return {src:'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iIGZpbGw9IiM1NTUiPkxvYWRpbmcuLi48L3RleHQ+PC9zdmc+', thumb:''};
           }
-          return page;
+          return p;
         });
-        
-        fb = new FlipBook(viewer, {
+        fb=new FlipBook(viewer,{
           pages: validPages,
-          viewMode: 'webgl',
-          autoSize: true,
-          flipDuration: 800,
-          backgroundColor: '#fff',
-          sound: true,
-          assets: {flipMp3: 'static/turnPage2.mp3', hardFlipMp3: 'static/turnPage2.mp3'},
-          controlsProps: {
-            enableFullscreen: true,
-            enableToc: true,
-            enableDownload: false,
-            enablePrint: false,
-            enableZoom: true,
-            enableShare: false,
-            enableSearch: true,
-            enableAutoPlay: true,
-            enableAnnotation: false,
-            enableSound: true,
-            enableLightbox: false,
-            layout: 10,
-            skin: 'light',
-            autoNavigationTime: 3600,
-            hideControls: false,
-            paddingTop: 10,
-            paddingLeft: 10,
-            paddingRight: 10,
-            paddingBottom: 10,
-            pageTextureSize: 1024,
-            thumbnails: true,
-            autoHideControls: false,
-            controlsTimeout: 8000
+          viewMode:'webgl', autoSize:true, flipDuration:800, backgroundColor:'#fff',
+          sound:true,
+          assets:{flipMp3:'static/turnPage2.mp3',hardFlipMp3:'static/turnPage2.mp3'},
+          controlsProps:{
+            enableFullscreen:true, enableToc:true, enableDownload:false,
+            enablePrint:false, enableZoom:true, enableShare:false,
+            enableSearch:true, enableAutoPlay:true, enableAnnotation:false,
+            enableSound:true, enableLightbox:false,
+            layout:10, skin:'light', autoNavigationTime:3600, hideControls:false,
+            paddingTop:10, paddingLeft:10, paddingRight:10, paddingBottom:10,
+            pageTextureSize:1024, thumbnails:true, autoHideControls:false, controlsTimeout:8000
           }
         });
-        
-        window.addEventListener('resize', () => {
-          if (fb) {
-            const newSize = calculateAspectRatio();
-            viewer.style.width = newSize.width + 'px';
-            viewer.style.height = newSize.height + 'px';
+        window.addEventListener('resize',()=>{
+          if(fb){
+            const s=calcSize();
+            viewer.style.width=s.width+'px'; viewer.style.height=s.height+'px';
             fb.resize();
           }
         });
-        
-        setTimeout(() => {
-          try {
-            const menuBars = document.querySelectorAll('.flipbook-container .fb3d-menu-bar');
-            if (menuBars && menuBars.length > 0) {
-              menuBars.forEach(menuBar => {
-                menuBar.style.display = 'block';
-                menuBar.style.opacity = '1';
-                menuBar.style.visibility = 'visible';
-                menuBar.style.zIndex = '9999';
-              });
-            }
-          } catch (e) {
-            console.warn('컨트롤바 스타일 적용 중 오류:', e);
-          }
-        }, 1000);
-        
-        console.log('FlipBook 생성 완료');
-      } catch (error) {
-        console.error('FlipBook 생성 중 오류 발생:', error);
-        showError("FlipBook을 생성하는 중 오류가 발생했습니다.");
+        setTimeout(()=>{
+          try{
+            const bars=document.querySelectorAll('.flipbook-container .fb3d-menu-bar');
+            bars.forEach(b=>{b.style.display='block'; b.style.opacity='1'; b.style.visibility='visible'; b.style.zIndex='9999';});
+          }catch(e){console.warn("컨트롤바 스타일 적용 중 오류:", e);}
+        },1000);
+      } catch(e){
+        console.error("FlipBook 생성 중 오류:", e);
+        showError("FlipBook 생성 중 오류가 발생했습니다.");
       }
     }
 
-    $id('homeButton').onclick = () => {
-      if(fb) {
-        fb.destroy();
-        viewer.innerHTML = '';
-        fb = null;
-      }
+    $id('homeButton').onclick=()=>{
+      if(fb){fb.destroy();viewer.innerHTML='';fb=null;}
       toggle(true);
-      if (pageLoadingInterval) {
-        clearInterval(pageLoadingInterval);
-        pageLoadingInterval = null;
-      }
-      $id('loadingPages').style.display = 'none';
-      currentLoadingPdfPath = null;
+      if(pageLoadingInterval){clearInterval(pageLoadingInterval); pageLoadingInterval=null;}
+      $id('loadingPages').style.display='none';
+      currentLoadingPdfPath=null;
     };
 
     function toggle(showHome){
-      $id('home').style.display = showHome?'block':'none';
-      $id('viewerPage').style.display = showHome?'none':'block';
-      $id('homeButton').style.display = showHome?'none':'block';
-      
-      if(!showHome) {
-        document.body.classList.add('viewer-mode');
-      } else {
-        document.body.classList.remove('viewer-mode');
-      }
+      $id('home').style.display= showHome?'block':'none';
+      $id('viewerPage').style.display= showHome?'none':'block';
+      $id('homeButton').style.display= showHome?'none':'block';
+      if(!showHome){ document.body.classList.add('viewer-mode'); }
+      else { document.body.classList.remove('viewer-mode'); }
     }
 
-    function showLoading(message, progress = -1) {
+    function showLoading(msg, progress=-1){
       hideLoading();
-      const loadingContainer = document.createElement('div');
-      loadingContainer.className = 'loading-container fade-in';
-      loadingContainer.id = 'loadingContainer';
-      
-      let progressBarHtml = '';
-      if (progress >= 0) {
-        progressBarHtml = `
+      const c=document.createElement('div'); c.className='loading-container fade-in'; c.id='loadingContainer';
+      let pb='';
+      if(progress>=0){
+        pb=`
           <div class="progress-bar-container">
-            <div id="progressBar" class="progress-bar" style="width: ${progress}%;"></div>
+            <div id="progressBar" class="progress-bar" style="width:${progress}%;"></div>
           </div>
         `;
       }
-      
-      loadingContainer.innerHTML = `
+      c.innerHTML=`
         <div class="loading-spinner"></div>
-        <p class="loading-text" id="loadingText">${message || '로딩 중...'}</p>
-        ${progressBarHtml}
+        <p class="loading-text" id="loadingText">${msg||'로딩 중...'}</p>
+        ${pb}
       `;
-      
-      document.body.appendChild(loadingContainer);
+      document.body.appendChild(c);
     }
-    
-    function updateLoading(message, progress = -1) {
-      const loadingText = $id('loadingText');
-      if (loadingText) {
-        loadingText.textContent = message;
-      }
-      
-      if (progress >= 0) {
-        let progressBar = $id('progressBar');
-        if (!progressBar) {
-          const loadingContainer = $id('loadingContainer');
-          if (loadingContainer) {
-            const progressContainer = document.createElement('div');
-            progressContainer.className = 'progress-bar-container';
-            progressContainer.innerHTML = `<div id="progressBar" class="progress-bar" style="width: ${progress}%;"></div>`;
-            loadingContainer.appendChild(progressContainer);
-            progressBar = $id('progressBar');
+    function updateLoading(msg, progress=-1){
+      const t=$id('loadingText');
+      if(t) t.textContent=msg;
+      if(progress>=0){
+        let bar=$id('progressBar');
+        if(!bar){
+          const lc=$id('loadingContainer');
+          if(lc){
+            const pc=document.createElement('div');
+            pc.className='progress-bar-container';
+            pc.innerHTML=`<div id="progressBar" class="progress-bar" style="width:${progress}%;"></div>`;
+            lc.appendChild(pc);
+            bar=$id('progressBar');
           }
         } else {
-          progressBar.style.width = \`\${progress}%\`;
+          bar.style.width=`${progress}%`;
         }
       }
     }
-    
-    function hideLoading() {
-      const loadingContainer = $id('loadingContainer');
-      if (loadingContainer) {
-        loadingContainer.remove();
-      }
+    function hideLoading(){
+      const lc=$id('loadingContainer');
+      if(lc) lc.remove();
     }
-    
-    function showError(message) {
-      const existingError = $id('errorContainer');
-      if (existingError) {
-        existingError.remove();
-      }
-      
-      const errorContainer = document.createElement('div');
-      errorContainer.className = 'loading-container fade-in';
-      errorContainer.id = 'errorContainer';
-      errorContainer.innerHTML = `
-        <p class="loading-text" style="color: #e74c3c;">${message}</p>
-        <button id="errorCloseBtn" style="margin-top: 15px; padding: 8px 16px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;">확인</button>
+    function showError(msg){
+      const ex=$id('errorContainer'); if(ex) ex.remove();
+      const c=document.createElement('div'); c.className='loading-container fade-in'; c.id='errorContainer';
+      c.innerHTML=`
+        <p class="loading-text" style="color:#e74c3c;">${msg}</p>
+        <button id="errorCloseBtn" style="margin-top:15px; padding:8px 16px; background:#3498db; color:white; border:none; border-radius:4px; cursor:pointer;">확인</button>
       `;
-      
-      document.body.appendChild(errorContainer);
-      
-      $id('errorCloseBtn').onclick = () => {
-        errorContainer.remove();
-      };
-      
-      setTimeout(() => {
-        if ($id('errorContainer')) {
-          $id('errorContainer').remove();
-        }
-      }, 5000);
+      document.body.appendChild(c);
+      $id('errorCloseBtn').onclick=()=> c.remove();
+      setTimeout(()=>{ if($id('errorContainer')) $id('errorContainer').remove(); },5000);
     }
 
-    window.addEventListener('DOMContentLoaded', () => {
-      // 업로드 버튼이 정상 동작하도록 직접 이벤트 설정
+    window.addEventListener('DOMContentLoaded', ()=>{
       setupDirectEvents();
-      
       loadServerPDFs();
-      
-      // 캐시 상태를 주기적으로 확인
-      setInterval(checkCacheStatus, 3000);
+      setInterval(checkCacheStatus,3000);
     });
   </script>
 </body>