Update app.py

app.py

@@ -415,14 +415,22 @@ HTML = """
     --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(120deg, var(--tertiary-color) 0%, var(--bg-color) 100%);
-    background-attachment: fixed;
-  }
+
+    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 {
@@ -803,7 +811,7 @@ HTML = """
   /* 헤더 로고 및 타이틀 */
   .library-header {
     position: fixed;
-    top: 20px;
+    top: 12px;
     left: 0;
     right: 0;
     text-align: center;
@@ -811,21 +819,21 @@ HTML = """
     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;
-  }
+.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 {
@@ -879,7 +887,7 @@ HTML = """
   
   <!-- 센터 정렬된 타이틀 -->
   <div class="library-header">
-    <div class="title">FlipBook Library</div>
+    <div class="title">FlipBook Maker</div>
   </div>
 
   <section id="home" class="fade-in">