Delete app-BACKUP-LAST.py

app-BACKUP-LAST.py

@@ -1,1645 +0,0 @@
-from fastapi import FastAPI, BackgroundTasks
-from fastapi.responses import HTMLResponse, JSONResponse, Response
-from fastapi.staticfiles import StaticFiles
-import pathlib, os, uvicorn, base64, json
-from typing import Dict, List, Any
-import asyncio
-import logging
-import threading
-import concurrent.futures
-
-# 로깅 설정
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
-logger = logging.getLogger(__name__)
-
-BASE = pathlib.Path(__file__).parent
-app = FastAPI()
-app.mount("/static", StaticFiles(directory=BASE), name="static")
-
-# PDF 디렉토리 설정
-PDF_DIR = BASE / "pdf"
-if not PDF_DIR.exists():
-    PDF_DIR.mkdir(parents=True)
-
-# 캐시 디렉토리 설정
-CACHE_DIR = BASE / "cache"
-if not CACHE_DIR.exists():
-    CACHE_DIR.mkdir(parents=True)
-
-# 전역 캐시 객체
-pdf_cache: Dict[str, Dict[str, Any]] = {}
-# 캐싱 락
-cache_locks = {}
-
-# PDF 파일 목록 가져오기
-def get_pdf_files():
-    pdf_files = []
-    if PDF_DIR.exists():
-        pdf_files = [f for f in PDF_DIR.glob("*.pdf")]
-    return pdf_files
-
-# PDF 썸네일 생성 및 프로젝트 데이터 준비
-def generate_pdf_projects():
-    projects_data = []
-    pdf_files = get_pdf_files()
-    
-    for pdf_file in pdf_files:
-        projects_data.append({
-            "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 페이지 캐싱 함수
-async def cache_pdf(pdf_path: str):
-    try:
-        import fitz  # PyMuPDF
-        
-        pdf_file = pathlib.Path(pdf_path)
-        pdf_name = pdf_file.stem
-        
-        # 락 생성 - 동일한 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:
-                    with open(cache_path, "r") as cache_file:
-                        cached_data = json.load(cache_file)
-                        if cached_data.get("status") == "completed" and cached_data.get("pages"):
-                            pdf_cache[pdf_name] = cached_data
-                            pdf_cache[pdf_name]["status"] = "completed"
-                            logger.info(f"캐시 파일에서 {pdf_name} 로드 완료")
-                            return
-                except Exception as e:
-                    logger.error(f"캐시 파일 로드 실패: {e}")
-            
-            # 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))  # 더 작은 썸네일
-                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 품질 (낮출수록 용량 작아짐)
-            
-            # 페이지 처리 작업자 함수 (병렬 처리용)
-            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,
-                        "thumb": thumb_src
-                    }
-                except Exception as e:
-                    logger.error(f"페이지 {page_num} 처리 오류: {e}")
-                    return {
-                        "page_num": page_num,
-                        "src": "",
-                        "thumb": "",
-                        "error": str(e)
-                    }
-            
-            # 병렬 처리로 모든 페이지 처리
-            pages = [None] * total_pages
-            processed_count = 0
-            
-            # 페이지 배치 처리 (메모리 관리)
-            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"]
-                    }
-                    
-                    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"], 
-                            "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,
-                "pages": pages,
-                "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 pdf_cache:
-            pdf_cache[pdf_name]["status"] = "error"
-            pdf_cache[pdf_name]["error"] = str(e)
-
-# 시작 시 모든 PDF 파일 캐싱
-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", "")
-            with open(cache_file, "r") as f:
-                cached_data = json.load(f)
-                if cached_data.get("status") == "completed" and cached_data.get("pages"):
-                    pdf_cache[pdf_name] = cached_data
-                    pdf_cache[pdf_name]["status"] = "completed"
-                    logger.info(f"기존 캐시 로드: {pdf_name}")
-        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"])
-
-# 백그라운드 작업 시작 함수
-@app.on_event("startup")
-async def startup_event():
-    # 백그라운드 태스크로 캐싱 실행
-    asyncio.create_task(init_cache_all_pdfs())
-
-# 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 = 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
-        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)  # 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 = 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()}
-
-# API 엔드포인트: 캐시된 PDF 콘텐츠 제공 (점진적 로딩 지원)
-@app.get("/api/cached-pdf")
-async def get_cached_pdf(path: str, background_tasks: BackgroundTasks):
-    try:
-        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", 
-                    "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_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)):
-            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
-        error_details = traceback.format_exc()
-        logger.error(f"PDF 콘텐츠 로드 오류: {str(e)}\n{error_details}")
-        return JSONResponse(content={"error": str(e)}, status_code=500)
-
-# 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 사용
-
-# HTML 문자열 (UI 수정 버전)
-HTML = """
-<!doctype html>
-<html lang="ko">
-<head>
-  <meta charset="utf-8">
-  <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">
-  <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 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: var(--bg-color);
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      color: var(--text-color);
-      /* 새로운 퍼플 계통 고급스러운 그라디에이션 배경 */
-      background-image: linear-gradient(135deg, #2a0845 0%, #6441a5 50%, #c9a8ff 100%);
-      background-attachment: fixed;
-    }
-
-    /* 뷰어 모드일 때 배경 변경 */
-    .viewer-mode {
-      background-image: linear-gradient(135deg, #30154e 0%, #6b47ad 50%, #d5b8ff 100%) !important;
-    }
-
-
-  /* 헤더 제목 제거 및 Home 버튼 레이어 처리 */
-  .floating-home {
-    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);
-    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);
-  }
-  
-  .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;
-  }
-  
-  .floating-home .title {
-    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;
-  }
-  
-  .floating-home:hover .title {
-    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;
-  }
-
-  /* 업로드 버튼 스타일 */
-  .upload-container {
-    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: 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, var(--primary-color) 0%, var(--secondary-color) 100%);
-    opacity: 0.08;
-    z-index: -1;
-  }
-
-  button.upload:hover {
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-md);
-  }
-
-  button.upload:hover::before {
-    opacity: 0.15;
-  }
-
-  button.upload i {
-    margin-right: 8px;
-    font-size: 20px;
-  }
-
-  /* 그리드 및 카드 스타일 */
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 24px;
-    margin-top: 36px;
-  }
-
-  .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;
-  }
-
-  .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;
-  }
-
-  .card::after {
-    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;
-  }
-
-  .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);
-  }
-
-  .card:hover {
-    transform: translateY(-5px);
-    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: var(--text-color);
-    z-index: 4;
-    transition: var(--transition);
-  }
-
-  .card:hover p {
-    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);
-  }
-
-  /* 뷰어 스타일 */
-  #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;
-  }
-
-  /* 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;
-  }
-
-  .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;
-  }
-
-  /* 메뉴 툴팁 스타일 */
-  .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;
-  }
-
-  /* 뷰어 모드일 때 배경 오버레이 */
-  .viewer-mode {
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
-  }
-
-  /* 뷰어 페이지 배경 */
-  #viewerPage {
-    background: transparent;
-  }
-
-  /* 로딩 애니메이션 */
-  @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;
-  }
-
-  .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;
-  }
-
-  .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);
-  }
-
-  .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;
-  }
-
-  .progress-bar {
-    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: 12px;
-    left: 0;
-    right: 0;
-    text-align: center;
-    z-index: 100;
-    pointer-events: none;
-  }
-  
-.library-header .title {
-  display: inline-block;
-  padding: 8px 24px; /* 패딩 축소 */
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(10px);
-  border-radius: 25px; /* 테두리 모서리 축소 */
-  box-shadow: var(--shadow-md);
-  font-size: 1.25rem; /* 글자 크기 축소 (1.5rem에서 1.25rem으로) */
-  font-weight: 600;
-  background-image: linear-gradient(120deg, #8e74eb 0%, #9d66ff 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: 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: 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 Maker</div>
-  </div>
-
-  <section id="home" class="fade-in">
-    <div class="upload-container">
-      <button class="upload" id="pdfUploadBtn">
-        <i class="fas fa-file-pdf"></i> PDF 추가
-      </button>
-      <input id="pdfInput" type="file" accept="application/pdf" style="display:none">
-    </div>
-    
-    <div class="section-title">내 프로젝트</div>
-    <div class="grid" id="grid">
-      <!-- 카드가 여기에 동적으로 추가됩니다 -->
-    </div>
-    <div id="noProjects" class="no-projects" style="display: none;">
-      프로젝트가 없습니다. PDF를 추가하여 시작하세요.
-    </div>
-  </section>
-
-  <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>
-  </section>
-
-  <script>
-    let projects=[], fb=null;
-    const grid=document.getElementById('grid'), viewer=document.getElementById('viewer');
-    pdfjsLib.GlobalWorkerOptions.workerSrc='/static/pdf.worker.js';
-
-    // 서버에서 미리 로드된 PDF 프로젝트
-    let serverProjects = [];
-    
-    // 현재 페이지 로딩 상태
-    let currentLoadingPdfPath = null;
-    let pageLoadingInterval = null;
-
-    /* 🔊 오디오 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});
-    });
-    
-    /* ── 유틸 ── */
-    function $id(id){return document.getElementById(id)}
-    
-    // 파일 업로드 이벤트 처리
-    document.addEventListener("DOMContentLoaded", function() {
-      console.log("DOM 로드 완료, 이벤트 설정 시작");
-      
-      // PDF 업로드 버튼
-      const pdfBtn = document.getElementById('pdfUploadBtn');
-      const pdfInput = document.getElementById('pdfInput');
-      
-      if (pdfBtn && pdfInput) {
-        console.log("PDF 업로드 버튼 찾음");
-        
-        // 버튼 클릭 시 파일 입력 트리거
-        pdfBtn.addEventListener('click', function() {
-          console.log("PDF 버튼 클릭됨");
-          pdfInput.click();
-        });
-        
-        // 파일 선택 시 처리
-        pdfInput.addEventListener('change', function(e) {
-          console.log("PDF 파일 선택됨:", e.target.files.length);
-          const file = e.target.files[0];
-          if (!file) return;
-          
-          showLoading("PDF 로딩 중...");
-          
-          const reader = new FileReader();
-          reader.onload = function(event) {
-            pdfjsLib.getDocument({data: event.target.result}).promise.then(async function(pdf) {
-              const pages = [];
-              
-              for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
-                updateLoading(`PDF 페이지 로딩 중... (${pageNum}/${pdf.numPages})`);
-                
-                const page = await pdf.getPage(pageNum);
-                const viewport = page.getViewport({scale: 1});
-                const canvas = document.createElement('canvas');
-                canvas.width = viewport.width;
-                canvas.height = viewport.height;
-                
-                await page.render({
-                  canvasContext: canvas.getContext('2d'),
-                  viewport: viewport
-                }).promise;
-                
-                pages.push({
-                  src: canvas.toDataURL(),
-                  thumb: canvas.toDataURL()
-                });
-              }
-              
-              hideLoading();
-              save(pages, file.name.replace('.pdf', ''));
-            }).catch(function(error) {
-              console.error("PDF 로딩 오류:", error);
-              hideLoading();
-              showError("PDF 로딩 중 오류가 발생했습니다: " + error.message);
-            });
-          };
-          
-          reader.onerror = function(error) {
-            console.error("파일 읽기 오류:", error);
-            hideLoading();
-            showError("파일을 읽는 중 오류가 발생했습니다.");
-          };
-          
-          reader.readAsArrayBuffer(file);
-        });
-      } else {
-        console.error("PDF 업로드 요소를 찾을 수 없음");
-      }
-      
-      // 서버 PDF 로드 및 캐시 상태 확인
-      loadServerPDFs();
-      
-      // 캐시 상태를 주기적으로 확인
-      setInterval(checkCacheStatus, 3000);
-    });
-    
-    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.innerHTML = `
-        <div class="card-inner">
-          ${cachedBadge}
-          <img src="${thumb}" alt="${displayTitle}" loading="lazy">
-          <p title="${title || '프로젝트 ' + (i+1)}">${displayTitle}</p>
-        </div>
-      `;
-      grid.appendChild(d);
-      
-      // 프로젝트가 있으면 '프로젝트 없음' 메시지 숨기기
-      $id('noProjects').style.display = 'none';
-    }
-
-    /* ── 프로젝트 저장 ── */
-    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) {
-          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) {
-          hideLoading();
-          $id('noProjects').style.display = 'block';
-          return;
-        }
-        
-        // 서버 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 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
-              };
-            }
-          } catch (err) {
-            console.error(`썸네일 로드 오류 (${project.name}):`, err);
-          }
-          
-          return null;
-        });
-        
-        // 모든 썸네일 요청 기다리기
-        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';
-        }
-      } catch(error) {
-        console.error('서버 PDF 로드 실패:', error);
-        hideLoading();
-        showError("라이브러리 로딩 중 오류가 발생했습니다.");
-      }
-    }
-
-    /* ── 캐시 상태 정기적으로 확인 ── */
-    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', '');
-            
-            // 캐시 상태 뱃지 업데이트
-            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 = '캐시됨';
-                cards[i].querySelector('.card-inner')?.appendChild(badgeEl);
-              } else if (badgeEl.textContent !== '캐시됨') {
-                badgeEl.textContent = '캐시됨';
-                badgeEl.style.background = 'var(--accent-color)';
-              }
-              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 = 'var(--secondary-color)';
-            }
-          }
-        }
-        
-        // 현재 로딩 중인 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;
-              
-              // 완료된 캐시로 플립북 다시 로드
-              refreshFlipBook();
-            } else if (status === "processing") {
-              // 진행 중일 때 표시 업데이트
-              $id('loadingPages').style.display = 'block';
-              $id('loadingPagesCount').textContent = `${progress}%`;
-            }
-          }
-        }
-        
-      } catch(error) {
-        console.error('캐시 상태 확인 오류:', error);
-      }
-    }
-
-    /* ── 카드 → FlipBook ── */
-    async function open(i) {
-      toggle(false);
-      const pages = projects[i];
-      
-      // 기존 FlipBook 정리
-      if(fb) {
-        fb.destroy();
-        viewer.innerHTML = '';
-      }
-      
-      // 서버 PDF 또는 로컬 프로젝트 처리
-      if(pages[0].path) {
-        const pdfPath = pages[0].path;
-        
-        // 점진적 로딩 플래그 초기화
-        let progressiveLoading = false;
-        currentLoadingPdfPath = pdfPath;
-        
-        // 캐시 여부 확인
-        if(pages[0].cached) {
-          // 캐시된 PDF 데이터 가져오기
-          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);
-            }
-          } catch(error) {
-            console.error("캐시 데이터 로드 오류:", error);
-            // 캐시 로딩 실패 시 원본 PDF로 대체
-          }
-        }
-        
-        if (!progressiveLoading) {
-          // 캐시가 없거나 로딩 실패 시 서버 PDF 로드
-          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);
-                return;
-              }
-            }
-            
-            // 원본 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;
-                  }
-                  return;
-                }
-              }
-            } catch (e) {
-              // JSON 파싱 실패 시 원본 PDF 데이터로 처리
-            }
-            
-            // 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(error) {
-            console.error('PDF 처리 중 오류 발생:', error);
-            hideLoading();
-            showError("PDF를 로드하는 중 오류가 발생했습니다.");
-            currentLoadingPdfPath = null;
-          }
-        }
-      } else {
-        // 로컬 업로드된 프로젝트 실행
-        createFlipBook(pages);
-        currentLoadingPdfPath = null;
-      }
-    }
-
-    /* ── 점진적 로딩 인디케이터 시작 ── */
-    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';
-          return;
-        }
-        
-        try {
-          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 (status.status === "processing") {
-            $id('loadingPagesCount').textContent = `${status.progress}%`;
-          }
-        } 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;
-        }
-      } 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;
-          
-          // 너비 또는 높이 기준으로 최대 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(width),
-            height: Math.round(height)
-          };
-        };
-        
-        // 초기 화면 비율 계산
-        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 page;
-        });
-        
-        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 // 컨트롤 표시 시간 연장
-          }
-        });
-        
-        // 화면 크기 변경 시 FlipBook 크기 조정
-        window.addEventListener('resize', () => {
-          if (fb) {
-            const newSize = calculateAspectRatio();
-            viewer.style.width = newSize.width + 'px';
-            viewer.style.height = newSize.height + 'px';
-            fb.resize();
-          }
-        });
-        
-        // 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;
-      }
-      toggle(true);
-      
-      // 로딩 인디케이터 정리
-      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');
-      }
-    }
-
-    /* -- 로딩 및 오류 표시 -- */
-    function showLoading(message, progress = -1) {
-      // 기존 로딩 컨테이너가 있다면 제거
-      hideLoading();
-      
-      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>
-        `;
-      }
-      
-      loadingContainer.innerHTML = `
-        <div class="loading-spinner"></div>
-        <p class="loading-text" id="loadingText">${message || '로딩 중...'}</p>
-        ${progressBarHtml}
-      `;
-      
-      document.body.appendChild(loadingContainer);
-    }
-    
-    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 {
-          progressBar.style.width = `${progress}%`;
-        }
-      }
-    }
-    
-    function hideLoading() {
-      const loadingContainer = $id('loadingContainer');
-      if (loadingContainer) {
-        loadingContainer.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>
-      `;
-      
-      document.body.appendChild(errorContainer);
-      
-      // 확인 버튼 클릭 이벤트
-      $id('errorCloseBtn').onclick = () => {
-        errorContainer.remove();
-      };
-      
-      // 5초 후 자동으로 닫기
-      setTimeout(() => {
-        if ($id('errorContainer')) {
-          $id('errorContainer').remove();
-        }
-      }, 5000);
-    }
-  </script>
-</body>
-</html>
-"""
-
-@app.get("/", response_class=HTMLResponse)
-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)))