Update app.py

app.py

@@ -31,27 +31,11 @@ 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 디렉토리 내부의 *.pdf 목록
-        pdf_files = list(PDF_DIR.glob("*.pdf"))
+        pdf_files = [f for f in PDF_DIR.glob("*.pdf")]
     return pdf_files
 
 # PDF 썸네일 생성 및 프로젝트 데이터 준비
@@ -61,40 +45,43 @@ def generate_pdf_projects():
     
     for pdf_file in pdf_files:
         projects_data.append({
-            "path": str(pdf_file.relative_to(BASE)),  # 프론트엔드에는 상대경로로 넘겨줌
+            "path": str(pdf_file),
             "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_path -> 실제 파일 경로
-        pdf_file = get_valid_pdf_path(pdf_path)
+        
+        pdf_file = pathlib.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:
@@ -108,33 +95,44 @@ async def cache_pdf(pdf_path: str):
                 except Exception as e:
                     logger.error(f"캐시 파일 로드 실패: {e}")
             
-            # PDF 열기
-            doc = fitz.open(pdf_file)
+            # PDF 파일 열기
+            doc = fitz.open(pdf_path)
             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
+            # 이미지 해상도 및 압축 품질 설정 (성능 최적화)
+            scale_factor = 1.0  # 기본 해상도 (낮출수록 로딩 빠름)
+            jpeg_quality = 80   # JPEG 품질 (낮출수록 용량 작아짐)
             
+            # 페이지 처리 작업자 함수 (병렬 처리용)
             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,
@@ -142,38 +140,54 @@ 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,
@@ -181,16 +195,18 @@ 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()}")
-        if 'pdf_name' in locals() and pdf_name in pdf_cache:
+        if pdf_name in pdf_cache:
             pdf_cache[pdf_name]["status"] = "error"
             pdf_cache[pdf_name]["error"] = str(e)
 
@@ -199,7 +215,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", "")
@@ -212,126 +228,140 @@ async def init_cache_all_pdfs():
         except Exception as e:
             logger.error(f"캐시 파일 로드 오류: {str(e)}")
     
-    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"
-    ])
+    # 캐싱되지 않은 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"])
 
+# 백그라운드 작업 시작 함수
 @app.on_event("startup")
 async def startup_event():
+    # 백그라운드 태스크로 캐싱 실행
     asyncio.create_task(init_cache_all_pdfs())
 
-###############################################################################
-# (2) API 라우트: path -> 항상 get_valid_pdf_path()로 실제 파일 찾기
-###############################################################################
+# API 엔드포인트: PDF 프로젝트 목록
 @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 = get_valid_pdf_path(path)
+        pdf_file = pathlib.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
-        if not pdf_file.exists():
-            return {"thumbnail": None, "error": "파일이 존재하지 않습니다"}
-        
-        doc = fitz.open(pdf_file)
+        doc = fitz.open(path)
         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)
+            pix = page.get_pixmap(matrix=fitz.Matrix(0.2, 0.2))  # 더 작은 썸네일
+            img_data = pix.tobytes("jpeg", 70)  # JPEG 압축 사용
             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 = get_valid_pdf_path(path)
+        pdf_file = pathlib.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 = get_valid_pdf_path(path)
+        pdf_file = pathlib.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 = get_valid_pdf_path(path)
-        pdf_name = pdf_file.stem
-        
+        # 캐싱 상태 확인
+        pdf_file = pathlib.Path(path)
         if not pdf_file.exists():
-            return JSONResponse(content={"error": f"파일을 찾을 수 없습니다: {pdf_file}"}, status_code=404)
+            return JSONResponse(content={"error": f"파일을 찾을 수 없습니다: {path}"}, 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}"})
+        pdf_name = pdf_file.stem
         
-        with open(pdf_file, "rb") as f:
-            content = f.read()
+        # 캐시된 경우 리다이렉트
+        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()
+            
+        # 파일명 처리
         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
@@ -339,19 +369,16 @@ 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
+    return HTML  # 기본 HTML 사용
 
-###############################################################################
-# (3) HTML: pdfjsLib 로드 에러 대비 (try/catch), .library-header의 pointer-events 제거
-###############################################################################
-HTML = r"""
+# HTML 문자열 (UI 수정 버전)
+HTML = """
 <!doctype html>
 <html lang="ko">
 <head>
@@ -359,743 +386,1369 @@ HTML = r"""
   <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;
+    background: var(--bg-color);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    color: #495057;
+    color: var(--text-color);
+    background-image: linear-gradient(120deg, var(--tertiary-color) 0%, var(--bg-color) 100%);
+    background-attachment: fixed;
   }
+
+  /* 헤더 제목 제거 및 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: 0 4px 12px rgba(0,0,0,0.08);
+    box-shadow: var(--shadow-md);
     z-index: 9999;
-    display: flex; justify-content: center; align-items: center;
-    cursor: pointer; transition: 0.3s; overflow: hidden;
+    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);
   }
-  .floating-home:hover { transform: scale(1.05); }
+  
   .floating-home .icon {
-    width: 100%; height: 100%;
-    font-size: 22px; color: #a5d8ff; transition: 0.3s;
-    display: flex; justify-content: center; align-items: center;
+    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; }
+  
+  .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: 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;
+    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;
   }
+  
   .floating-home:hover .title {
-    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;
+    opacity: 1;
+    transform: translateX(0);
   }
+
   #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: 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;
+    all: unset;
+    cursor: pointer;
+    padding: 12px 20px;
+    border-radius: var(--radius-md);
+    background: white;
+    margin: 0 10px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    box-shadow: var(--shadow-sm);
+    transition: var(--transition);
+    position: relative;
+    overflow: hidden;
   }
+
   button.upload::before {
-    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
-    background: linear-gradient(120deg, #a5d8ff, #ffd6e0);
-    opacity: 0.08; z-index: -1;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(120deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    opacity: 0.08;
+    z-index: -1;
   }
+
   button.upload:hover {
     transform: translateY(-3px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    box-shadow: var(--shadow-md);
   }
-  button.upload:hover::before { opacity: 0.15; }
-  button.upload i { margin-right: 8px; font-size: 20px; }
 
-  .section-title {
-    font-size: 1.3rem; font-weight:600; margin:30px 0 15px; color:#495057;
+  button.upload:hover::before {
+    opacity: 0.15;
   }
-  .grid {
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
-    gap:24px; margin-top:36px;
+
+  button.upload i {
+    margin-right: 8px;
+    font-size: 20px;
   }
-  .no-projects {
-    text-align:center; margin:40px 0; font-size:16px; color:#495057;
+
+  /* 그리드 및 카드 스타일 */
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 24px;
+    margin-top: 36px;
   }
+
   .card {
-    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;
+    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;
   }
+
   .card::before {
-    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;
+    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;
   }
+
   .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:0.3s;
+    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);
   }
+
   .card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    box-shadow: var(--shadow-md);
   }
+
   .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:#495057; z-index:4;
+    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);
   }
+
   .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:#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);
+    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);
   }
+
+  /* 뷰어 스타일 */
   #viewer {
-    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;
+    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;
   }
+
+  /* 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 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;
+    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;
   }
+
   .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;
+    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;
+  }
+
+  /* 메뉴 툴팁 스타일 */
   .flipbook-container .fb3d-menu-bar > ul > li > span {
-    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;
+    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;
   }
+
+  /* 뷰어 모드일 때 배경 오버레이 */
   .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 #a5d8ff; 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 var(--primary-color);
+    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:12px;
-    box-shadow:0 4px 12px rgba(0,0,0,0.08); 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: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    z-index: 9999;
   }
+
   .loading-text {
-    margin-top:20px; font-size:16px; color:#495057; font-weight:500;
+    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; }
+
+  /* 페이지 전환 애니메이션 */
+  @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);
+  }
+
+  .no-projects {
+    text-align: center;
+    margin: 40px 0;
+    color: var(--text-color);
+    font-size: 16px;
+  }
+
+  /* 프로그레스 바 */
   .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, #a5d8ff, #d0bfff);
-    border-radius:3px; transition:width 0.3s ease;
+    height: 100%;
+    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  /* 헤더 로고 및 타이틀 */
+  .library-header {
+    position: fixed;
+    top: 20px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    z-index: 100;
+    pointer-events: none;
   }
+  
+  .library-header .title {
+    display: inline-block;
+    padding: 12px 30px;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(10px);
+    border-radius: 30px;
+    box-shadow: var(--shadow-md);
+    font-size: 1.5rem;
+    font-weight: 600;
+    background-image: linear-gradient(120deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    pointer-events: all;
+  }
+  
+  /* 점진적 로딩 표시 */
   .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:0 4px 12px rgba(0,0,0,0.08); font-size:14px; color:#495057;
-    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: var(--shadow-md);
+    font-size: 14px;
+    color: var(--text-color);
+    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: 1.25rem;
+      padding: 10px 20px;
+    }
+    
+    .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>
 
   <section id="home" class="fade-in">
     <div class="upload-container">
-      <button class="upload" id="imageUploadBtn">
-        <i class="fas fa-images"></i> 이미지 추가
-        <input id="imgInput" type="file" accept="image/*" multiple hidden>
-      </button>
-      <button class="upload" id="pdfUploadBtn">
-        <i class="fas fa-file-pdf"></i> PDF 추가
-        <input id="pdfInput" type="file" accept="application/pdf" hidden>
+
+        <button class="upload" id="imageUploadBtn" onclick="document.getElementById('imgInput').click(); return false;">
+          <i class="fas fa-images"></i> 이미지 추가
+          <input id="imgInput" type="file" accept="image/*" multiple hidden>
+        </button>
+        <button class="upload" id="pdfUploadBtn" onclick="document.getElementById('pdfInput').click(); return false;">
+          <i class="fas fa-file-pdf"></i> PDF 추가
+          <input id="pdfInput" type="file" accept="application/pdf" hidden>
+
       </button>
     </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;
+    let projects=[], fb=null;
+    const grid=$id('grid'), viewer=$id('viewer');
+    pdfjsLib.GlobalWorkerOptions.workerSrc='/static/pdf.worker.js';
+
+    // 서버에서 미리 로드된 PDF 프로젝트
     let serverProjects = [];
+    
+    // 현재 페이지 로딩 상태
     let currentLoadingPdfPath = null;
     let pageLoadingInterval = null;
 
-    function $id(id){return document.getElementById(id)}
-
+    /* 🔊 오디오 unlock – 내장 Audio 와 같은 MP3 경로 사용 */
     ['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 setupDirectEvents() {
-      const imageBtn = $id('imageUploadBtn');
-      const imageInput = $id('imgInput');
-      if (imageBtn && imageInput) {
-        imageBtn.onclick = (e)=>{
-          e.preventDefault(); e.stopPropagation();
-          imageInput.click();
-        };
-      }
-      const pdfBtn = $id('pdfUploadBtn');
-      const pdfInput = $id('pdfInput');
-      if (pdfBtn && pdfInput) {
-        pdfBtn.onclick = (e)=>{
-          e.preventDefault(); e.stopPropagation();
-          pdfInput.click();
-        };
-      }
+    
+    // 업로드 버튼 이벤트 연결 함수
+    function setupUploadButtons() {
+      // 모든 업로드 버튼에 이벤트 리스너 추가
+      document.querySelectorAll('.upload').forEach(button => {
+        button.addEventListener('click', function(e) {
+          // 버튼 내부의 input 요소 찾기
+          const inputElement = this.querySelector('input[type="file"]');
+          if (inputElement) {
+            // input 요소 클릭 (파일 선택 다이얼로그 열기)
+            inputElement.click();
+            e.preventDefault(); // 버튼 기본 동작 방지
+          }
+        });
+      });
     }
 
-    function addCard(i, thumb, title, isCached=false) {
+    /* ── 유틸 ── */
+    function $id(id){return document.getElementById(id)}
+    
+    // 직접 이벤트 리스너 설정 (더 확실한 방법)
+// 수정된 이벤트 설정 함수
+function setupDirectEvents() {
+  console.log('이벤트 설정 시작');
+  
+  // 이미지 업로드 버튼
+  const imageBtn = document.getElementById('imageUploadBtn');
+  const imageInput = document.getElementById('imgInput');
+  
+  if (imageBtn && imageInput) {
+    console.log('이미지 버튼 찾음:', imageBtn);
+    // 이벤트 리스너를 명시적으로 제거하고 다시 추가
+    imageBtn.removeEventListener('click', imageClickHandler);
+    imageBtn.addEventListener('click', imageClickHandler);
+    
+    function imageClickHandler(e) {
+      console.log('이미지 버튼 클릭됨');
+      e.preventDefault();
+      e.stopPropagation();
+      imageInput.click();
+    }
+  } else {
+    console.error('이미지 버튼 또는 인풋을 찾을 수 없음');
+  }
+  
+  // PDF 업로드 버튼
+  const pdfBtn = document.getElementById('pdfUploadBtn');
+  const pdfInput = document.getElementById('pdfInput');
+  
+  if (pdfBtn && pdfInput) {
+    console.log('PDF 버튼 찾음:', pdfBtn);
+    // 이벤트 리스너를 명시적으로 제거하고 다시 추가
+    pdfBtn.removeEventListener('click', pdfClickHandler);
+    pdfBtn.addEventListener('click', pdfClickHandler);
+    
+    function pdfClickHandler(e) {
+      console.log('PDF 버튼 클릭됨');
+      e.preventDefault();
+      e.stopPropagation();
+      pdfInput.click();
+    }
+  } else {
+    console.error('PDF 버튼 또는 인풋을 찾을 수 없음');
+  }
+  
+  // 파일 선택 이벤트 재설정
+  if (imageInput) {
+    imageInput.onchange = function(e) {
+      console.log('이미지 파일 선택됨:', e.target.files.length);
+      const files = [...e.target.files]; 
+      if (!files.length) return;
+      
+      showLoading("이미지 로딩 중...");
+      
+      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();
+          }
+        };
+        r.readAsDataURL(f);
+      });
+    };
+  }
+  
+  if (pdfInput) {
+    pdfInput.onchange = function(e) {
+      console.log('PDF 파일 선택됨:', e.target.files.length);
+      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++) {
+            updateLoading(`PDF 페이지 로딩 중... (${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;
+            pages.push({src: c.toDataURL(), thumb: c.toDataURL()});
+          }
+          
+          hideLoading();
+          save(pages, file.name.replace('.pdf', ''));
+        }).catch(error => {
+          console.error("PDF 로딩 오류:", error);
+          hideLoading();
+          showError("PDF 로��� 중 오류가 발생했습니다.");
+        });
+      };
+      fr.readAsArrayBuffer(file);
+    };
+  }
+  
+  console.log('이벤트 설정 완료');
+}
+    
+    function addCard(i, thumb, title, isCached = false) {
       const d = document.createElement('div');
       d.className = 'card fade-in';
-      d.onclick = ()=> open(i);
-      const displayTitle = title.length>15 ? title.substring(0,15)+'...' : title;
-      const cachedBadge = isCached ? `<div class="cached-status">캐시됨</div>` : '';
+      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.innerHTML = `
         <div class="card-inner">
           ${cachedBadge}
           <img src="${thumb}" alt="${displayTitle}" loading="lazy">
-          <p title="${title}">${displayTitle}</p>
+          <p title="${title || '프로젝트 ' + (i+1)}">${displayTitle}</p>
         </div>
       `;
-      $id('grid').appendChild(d);
+      grid.appendChild(d);
+      
+      // 프로젝트가 있으면 '프로젝트 없음' 메시지 숨기기
       $id('noProjects').style.display = 'none';
     }
 
-    $id('imgInput').onchange = e => {
-      const files = [...e.target.files]; if(!files.length) return;
+    /* ── 이미지 업로드 ── */
+    $id('imgInput').onchange=e=>{
+      const files=[...e.target.files]; if(!files.length) return;
+      
+      // 로딩 표시 추가
       showLoading("이미지 로딩 중...");
-      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(); }
-        };
-        r.readAsDataURL(f);
-      });
+      
+      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();
+          }
+        };r.readAsDataURL(f);});
     };
 
-    $id('pdfInput').onchange = e => {
+    /* ── PDF 업로드 ── */
+    $id('pdfInput').onchange=e=>{
       const file=e.target.files[0]; if(!file) return;
+      
+      // 로딩 표시 추가
       showLoading("PDF 로딩 중...");
+      
       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})\`);
+            // 로딩 상태 업데이트
+            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()});
+            pages.push({src:c.toDataURL(),thumb:c.toDataURL()});
           }
+          
           hideLoading();
-          save(pages, file.name.replace('.pdf',''));
-        }).catch(err=>{
-          console.error("PDF 로딩 오류:", err);
+          save(pages, file.name.replace('.pdf', ''));
+        }).catch(error => {
+          console.error("PDF 로딩 오류:", error);
           hideLoading();
           showError("PDF 로딩 중 오류가 발생했습니다.");
         });
-      };
-      fr.readAsArrayBuffer(file);
+      };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 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){
+        
+        // 먼저 캐시 상태 확인
+        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) {
           hideLoading();
-          $id('noProjects').style.display='block';
+          $id('noProjects').style.display = 'block';
           return;
         }
-        const thumbPromises = serverProjects.map(async (proj,idx)=>{
-          updateLoading(\`PDF 프로젝트 로딩 중... (\${idx+1}/\${serverProjects.length})\`);
-          const pdfName = proj.name;
+        
+        // 서버 PDF 로드 및 썸네일 생성 (병렬 처리로 최적화)
+        const thumbnailPromises = serverProjects.map(async (project, index) => {
+          updateLoading(`PDF 프로젝트 로딩 중... (${index+1}/${serverProjects.length})`);
+          
+          const pdfName = project.name;
           const isCached = cacheStatus[pdfName] && cacheStatus[pdfName].status === "completed";
+          
           try {
-            const resp2 = await fetch(\`/api/pdf-thumbnail?path=\${encodeURIComponent(proj.path)}\`);
-            const data = await resp2.json();
-            if(data.thumbnail){
+            // 썸네일 가져오기
+            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:[{
-                  src:data.thumbnail,
-                  thumb:data.thumbnail,
-                  path:proj.path,
-                  cached:isCached
-                }],
-                name:proj.name,
+                pages,
+                name: project.name,
                 isCached
               };
             }
-          } catch(e) {
-            console.error(\`썸네일 로드 오류 (\${proj.name}):\`, e);
+          } catch (err) {
+            console.error(`썸네일 로드 오류 (${project.name}):`, err);
           }
+          
           return null;
         });
-        const results = await Promise.all(thumbPromises);
-        results.filter(r=>r).forEach(r=>{
-          save(r.pages, r.name, r.isCached);
+        
+        // 모든 썸네일 요청 기다리기
+        const results = await Promise.all(thumbnailPromises);
+        
+        // 성공적으로 가져온 결과만 표시
+        results.filter(result => result !== null).forEach(result => {
+          save(result.pages, result.name, result.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(e) {
-        console.error("서버 PDF 로드 실패:", e);
+      } catch(error) {
+        console.error('서버 PDF 로드 실패:', error);
         hideLoading();
         showError("라이브러리 로딩 중 오류가 발생했습니다.");
       }
     }
 
-    async function checkCacheStatus(){
+    /* ── 캐시 상태 정기적으로 확인 ── */
+    async function checkCacheStatus() {
       try {
-        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','');
+        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', '');
+            
+            // 캐시 상태 뱃지 업데이트
             let badgeEl = cards[i].querySelector('.cached-status');
-            if(cacheStatus[pdfName]?.status==="completed"){
-              if(!badgeEl){
-                badgeEl=document.createElement('div');
-                badgeEl.className='cached-status';
-                badgeEl.textContent='캐시됨';
+            
+            if(cacheStatus[pdfName] && 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='#d0bfff';
+              } else if (badgeEl.textContent !== '캐시됨') {
+                badgeEl.textContent = '캐시됨';
+                badgeEl.style.background = 'var(--accent-color)';
               }
-              projects[i][0].cached=true;
-            } else if(cacheStatus[pdfName]?.status==="processing"){
-              if(!badgeEl){
-                badgeEl=document.createElement('div');
-                badgeEl.className='cached-status';
+              projects[i][0].cached = true;
+            } else if(cacheStatus[pdfName] && 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='#ffd6e0';
+              badgeEl.textContent = `${cacheStatus[pdfName].progress}%`;
+              badgeEl.style.background = 'var(--secondary-color)';
             }
           }
         }
-        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"){
+        
+        // 현재 로딩 중인 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") {
+              // 캐싱 완료 시
               clearInterval(pageLoadingInterval);
-              $id('loadingPages').style.display='none';
-              currentLoadingPdfPath=null;
+              $id('loadingPages').style.display = 'none';
+              currentLoadingPdfPath = null;
+              
+              // 완료된 캐시로 플립북 다시 로드
               refreshFlipBook();
-            } else if(st==="processing"){
-              $id('loadingPages').style.display='block';
-              $id('loadingPagesCount').textContent=\`\${pr}%\`;
+            } else if (status === "processing") {
+              // 진행 중일 때 표시 업데이트
+              $id('loadingPages').style.display = 'block';
+              $id('loadingPagesCount').textContent = `${progress}%`;
             }
           }
         }
-      } catch(e){
-        console.error("캐시 상태 확인 오류:", e);
+        
+      } catch(error) {
+        console.error('캐시 상태 확인 오류:', error);
       }
     }
 
-    async function open(i){
+    /* ── 카드 → FlipBook ── */
+    async function open(i) {
       toggle(false);
-      const pages=projects[i];
-      if(fb){fb.destroy();viewer.innerHTML='';}
-      if(pages[0]?.path){
+      const pages = projects[i];
+      
+      // 기존 FlipBook 정리
+      if(fb) {
+        fb.destroy();
+        viewer.innerHTML = '';
+      }
+      
+      // 서버 PDF 또는 로컬 프로젝트 처리
+      if(pages[0].path) {
         const pdfPath = pages[0].path;
-        let progressive=false;
-        currentLoadingPdfPath=pdfPath;
-        if(pages[0].cached){
+        
+        // 점진적 로딩 플래그 초기화
+        let progressiveLoading = false;
+        currentLoadingPdfPath = pdfPath;
+        
+        // 캐시 여부 확인
+        if(pages[0].cached) {
+          // 캐시된 PDF 데이터 가져오기
           showLoading("캐시된 PDF 로딩 중...");
+          
           try {
-            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);
+            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);
             }
-          }catch(e){console.error("캐시 데이터 로드 오류:", e);}
+          } catch(error) {
+            console.error("캐시 데이터 로드 오류:", error);
+            // 캐시 로딩 실패 시 원본 PDF로 대체
+          }
         }
-        if(!progressive){
+        
+        if (!progressiveLoading) {
+          // 캐시가 없거나 로딩 실패 시 서버 PDF 로드
           showLoading("PDF 준비 중...");
+          
           try {
-            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);
+            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);
                 return;
               }
             }
-            // 실제 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);
+            
+            // 원본 PDF 로드 (ArrayBuffer 형태)
+            const pdfResponse = await fetch(`/api/pdf-content?path=${encodeURIComponent(pdfPath)}`);
+            
+            // JSON 응답인 경우 (리다이렉트 등)
+            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);
                   } else {
-                    currentLoadingPdfPath=null;
+                    currentLoadingPdfPath = null;
                   }
                   return;
                 }
               }
-            }catch(e){}
-            // ArrayBuffer → pdf.js 로드
-            const pdfData=await pdfResp.arrayBuffer();
-            if(!window.pdfjsLib){
-              hideLoading();
-              showError("pdf.js가 로드되지 않아 PDF 처리를 할 수 없습니다.");
-              return;
+            } catch (e) {
+              // JSON 파싱 실패 시 원본 PDF 데이터로 처리
             }
-            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()});
+            
+            // ArrayBuffer 형태의 PDF 데이터
+            const pdfData = await pdfResponse.arrayBuffer();
+            
+            // PDF 로드 및 페이지 렌더링
+            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()});
             }
+            
             hideLoading();
             createFlipBook(pdfPages);
-            currentLoadingPdfPath=null;
-          } catch(err){
-            console.error("PDF 처리 오류:", err);
+            currentLoadingPdfPath = null;
+            
+          } catch(error) {
+            console.error('PDF 처리 중 오류 발생:', error);
             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);
+      }
+      
+      // 주기적으로 캐시 상태 확인 (2초마다)
+      pageLoadingInterval = setInterval(async () => {
+        if (!currentLoadingPdfPath) {
           clearInterval(pageLoadingInterval);
-          $id('loadingPages').style.display='none';
+          $id('loadingPages').style.display = 'none';
           return;
         }
+        
         try {
-          const r=await fetch(\`/api/cache-status?path=\${encodeURIComponent(currentLoadingPdfPath)}\`);
-          const st=await r.json();
-          if(st.status==="completed"){
+          const response = await fetch(`/api/cache-status?path=${encodeURIComponent(currentLoadingPdfPath)}`);
+          const status = await response.json();
+          
+          // 상태 업데이트
+          if (status.status === "completed") {
             clearInterval(pageLoadingInterval);
-            $id('loadingPages').style.display='none';
-            refreshFlipBook();
-            currentLoadingPdfPath=null;
-          } else if(st.status==="processing"){
-            $id('loadingPagesCount').textContent=\`\${st.progress}%\`;
+            $id('loadingPages').style.display = 'none';
+            refreshFlipBook();  // 완료된 데이터로 새로고침
+            currentLoadingPdfPath = null;
+          } else if (status.status === "processing") {
+            $id('loadingPagesCount').textContent = `${status.progress}%`;
           }
-        }catch(e){console.error("캐시 상태 확인 오류:", e);}
+        } catch (e) {
+          console.error("캐시 상태 확인 오류:", e);
+        }
       }, 1000);
     }
 
-    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;
+    /* ── 플립북 새로고침 ── */
+    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;
         }
-      } catch(e){console.error("플립북 새로고침 오류:", e);}
+      } catch (e) {
+        console.error("플립북 새로고침 오류:", e);
+      }
     }
 
-    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 {
-            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;}
+    function createFlipBook(pages) {
+      console.log('FlipBook 생성 시작. 페이지 수:', pages.length);
+      
+      try {
+        // 화면 비율 계산
+        const calculateAspectRatio = () => {
+          const windowWidth = window.innerWidth;
+          const windowHeight = window.innerHeight;
+          const aspectRatio = windowWidth / windowHeight;
+          
+          // 너비 또는 높이 기준으로 최대 90% 제한
+          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);
+            }
+          } 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;
+            }
           }
-          return {width:Math.round(w), height:Math.round(h)};
+          
+          // 최적 사이즈 반환
+          return {
+            width: Math.round(width),
+            height: Math.round(height)
+          };
         };
-        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:''};
+        
+        // 초기 화면 비율 계산
+        const size = calculateAspectRatio();
+        viewer.style.width = size.width + 'px';
+        viewer.style.height = size.height + 'px';
+        
+        // 페이지 데이터 정제 (빈 페이지 처리)
+        const validPages = pages.map(page => {
+          // src가 없는 페이지는 로딩 중 이미지로 대체
+          if (!page || !page.src) {
+            return {
+              src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iIGZpbGw9IiM1NTUiPkxvYWRpbmcuLi48L3RleHQ+PC9zdmc+',
+              thumb: page && page.thumb ? page.thumb : ''
+            };
           }
-          return p;
+          return page;
         });
-        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 s=calcSize();
-            viewer.style.width=s.width+'px'; viewer.style.height=s.height+'px';
+        
+        // 화면 크기 변경 시 FlipBook 크기 조정
+        window.addEventListener('resize', () => {
+          if (fb) {
+            const newSize = calculateAspectRatio();
+            viewer.style.width = newSize.width + 'px';
+            viewer.style.height = newSize.height + 'px';
             fb.resize();
           }
         });
-        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 생성 중 오류가 발생했습니다.");
+        
+        // FlipBook 생성 후 컨트롤바 강제 표시
+        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을 생성하는 중 오류가 발생했습니다.");
       }
     }
 
+    /* ── 네비게이션 ── */
     $id('homeButton').onclick=()=>{
-      if(fb){fb.destroy();viewer.innerHTML='';fb=null;}
+      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(msg, progress=-1){
+    /* -- 로딩 및 오류 표시 -- */
+    function showLoading(message, progress = -1) {
+      // 기존 로딩 컨테이너가 있다면 제��
       hideLoading();
-      const c=document.createElement('div'); c.className='loading-container fade-in'; c.id='loadingContainer';
-      let pb='';
-      if(progress>=0){
-        pb=`
+      
+      const loadingContainer = document.createElement('div');
+      loadingContainer.className = 'loading-container fade-in';
+      loadingContainer.id = 'loadingContainer';
+      
+      let progressBarHtml = '';
+      if (progress >= 0) {
+        progressBarHtml = `
           <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>
         `;
       }
-      c.innerHTML=`
+      
+      loadingContainer.innerHTML = `
         <div class="loading-spinner"></div>
-        <p class="loading-text" id="loadingText">${msg||'로딩 중...'}</p>
-        ${pb}
+        <p class="loading-text" id="loadingText">${message || '로딩 중...'}</p>
+        ${progressBarHtml}
       `;
-      document.body.appendChild(c);
+      
+      document.body.appendChild(loadingContainer);
     }
-    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');
+    
+    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');
           }
         } else {
-          bar.style.width=`${progress}%`;
+          progressBar.style.width = `${progress}%`;
         }
       }
     }
-    function hideLoading(){
-      const lc=$id('loadingContainer');
-      if(lc) lc.remove();
+    
+    function hideLoading() {
+      const loadingContainer = $id('loadingContainer');
+      if (loadingContainer) {
+        loadingContainer.remove();
+      }
     }
-    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>
+    
+    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>
       `;
-      document.body.appendChild(c);
-      $id('errorCloseBtn').onclick=()=> c.remove();
-      setTimeout(()=>{ if($id('errorContainer')) $id('errorContainer').remove(); },5000);
+      
+      document.body.appendChild(errorContainer);
+      
+      // 확인 버튼 클릭 이벤트
+      $id('errorCloseBtn').onclick = () => {
+        errorContainer.remove();
+      };
+      
+      // 5초 후 자동으로 닫기
+      setTimeout(() => {
+        if ($id('errorContainer')) {
+          $id('errorContainer').remove();
+        }
+      }, 5000);
     }
 
-    window.addEventListener('DOMContentLoaded', ()=>{
+
+// 페이지 로드 시 서버 PDF 로드
+    window.addEventListener('DOMContentLoaded', () => {
+      console.log('DOM 로드됨');
+  
+  // 직접 이벤트 리스너 설정 (더 확실한 방법)
       setupDirectEvents();
+  
+  // 약간의 지연 후 다시 한번 이벤트 설정 (DOM 완전 로드 보장)
+      setTimeout(() => {
+        console.log('지연 후 이벤트 재설정');
+        setupDirectEvents();
+      }, 500);
+  
       loadServerPDFs();
-      setInterval(checkCacheStatus,3000);
+  
+  // 캐시 상태를 주기적으로 확인 (3초마다)
+      setInterval(checkCacheStatus, 3000);
     });
+
+
   </script>
 </body>
 </html>
@@ -1106,4 +1759,4 @@ async def root():
     return get_html_content()
 
 if __name__ == "__main__":
-    uvicorn.run("app:app", host="0.0.0.0", port=int(os.getenv("PORT", 7860)))
+    uvicorn.run("app:app", host="0.0.0.0", port=int(os.getenv("PORT", 7860)))