Improve UI design with modern sophisticated styling

- Add Pretendard font for better Korean typography
- Update color palette with gradient primary colors
- Add glassmorphism effect to sidebar and main content
- Improve button styles with hover animations
- Add smooth transitions and shadows
- Update dark mode with better colors
- Improve player card and vote button styling
- Add subtle backdrop blur effects

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

templates/arena.html

@@ -108,16 +108,17 @@
     .input-group {
         display: flex;
         width: 100%;
-        border-radius: 12px;
+        border-radius: var(--radius-lg);
         border: 2px solid var(--border-color);
         overflow: hidden;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-        transition: all 0.3s ease;
+        box-shadow: var(--shadow);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        background: white;
     }
-    
+
     .input-group:focus-within {
         border-color: var(--primary-color);
-        box-shadow: 0 4px 20px rgba(80, 70, 229, 0.15);
+        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
     }
     
     /* Override base styles to remove duplicate borders */
@@ -168,16 +169,18 @@
     }
     
     .synth-btn {
-        padding: 0 28px;
-        font-weight: 600;
+        padding: 0 32px;
+        font-weight: 700;
         border-left: 1px solid var(--border-color);
-        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
+        background: var(--gradient-primary);
         color: white;
-        font-size: 1em;
+        font-size: 15px;
+        letter-spacing: 0.3px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     }
-    
+
     .synth-btn:hover {
-        background: linear-gradient(135deg, #4038c7 0%, #4f46e5 100%);
+        background: var(--gradient-primary-hover);
     }
     
     .random-btn:hover {
@@ -203,10 +206,11 @@
         justify-content: center;
         align-items: center;
         margin: 48px 0;
-        padding: 40px;
-        background: linear-gradient(135deg, #fafbff 0%, #f5f7ff 100%);
-        border-radius: 16px;
-        border: 1px solid #e8ecf4;
+        padding: 48px;
+        background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.05) 100%);
+        border-radius: var(--radius-lg);
+        border: 1px solid rgba(99, 102, 241, 0.1);
+        backdrop-filter: blur(10px);
     }
     
     .loader-wrapper {
@@ -277,33 +281,34 @@
     
     .vote-btn {
         position: relative;
-        color: #333;
-        font-size: 1rem;
-        font-weight: 500;
-        padding: 14px 24px;
-        border-radius: 10px;
+        color: var(--text-color);
+        font-size: 15px;
+        font-weight: 600;
+        padding: 16px 24px;
+        border-radius: var(--radius);
         border: 2px solid var(--border-color);
         background: white;
-        transition: all 0.3s ease;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: var(--shadow-sm);
     }
-    
+
     .vote-btn:not(:disabled):hover {
         border-color: var(--primary-color);
-        background: #fafaff;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(80, 70, 229, 0.15);
+        background: var(--primary-light);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2);
     }
-    
+
     .vote-btn.selected {
-        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
+        background: var(--gradient-primary);
         color: white;
         border-color: transparent;
-        box-shadow: 0 4px 12px rgba(80, 70, 229, 0.3);
+        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
+        transform: translateY(-2px);
     }
-    
+
     .vote-btn:disabled {
-        opacity: 0.6;
+        opacity: 0.5;
         cursor: not-allowed;
     }
     
@@ -334,41 +339,49 @@
     }
     
     .next-round-btn {
-        padding: 14px 28px;
-        background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
+        padding: 18px 32px;
+        background: var(--gradient-primary);
         color: white;
         border: none;
-        border-radius: 12px;
-        font-weight: 600;
+        border-radius: var(--radius);
+        font-weight: 700;
         cursor: pointer;
         position: relative;
         width: 100%;
-        font-size: 1rem;
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 12px rgba(80, 70, 229, 0.25);
+        font-size: 16px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
+        letter-spacing: 0.3px;
     }
-    
+
     .next-round-btn:hover {
-        background: linear-gradient(135deg, #4038c7 0%, #4f46e5 100%);
-        box-shadow: 0 6px 16px rgba(80, 70, 229, 0.35);
-        transform: translateY(-1px);
+        background: var(--gradient-primary-hover);
+        box-shadow: 0 12px 28px rgba(99, 102, 241, 0.4);
+        transform: translateY(-2px);
     }
-    
+
+    .next-round-btn:active {
+        transform: translateY(0);
+    }
+
     /* Vote results styling */
     .vote-results {
-        background: linear-gradient(135deg, #f0f4ff 0%, #e8ecff 100%);
-        border: 1px solid #d0d7f7;
-        border-radius: 12px;
-        padding: 20px 24px;
+        background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
+        border: 1px solid rgba(99, 102, 241, 0.15);
+        border-radius: var(--radius);
+        padding: 24px 28px;
         margin: 24px 0;
-        box-shadow: 0 2px 8px rgba(80, 70, 229, 0.08);
+        box-shadow: var(--shadow-sm);
     }
-    
+
     .results-heading {
-        color: var(--primary-color);
-        margin-bottom: 12px;
-        font-size: 18px;
-        font-weight: 600;
+        background: var(--gradient-primary);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 14px;
+        font-size: 20px;
+        font-weight: 700;
     }
     
     .results-content {
@@ -409,13 +422,14 @@
     /* Keyboard shortcut hint */
     .keyboard-hint {
         text-align: center;
-        margin-top: 16px;
-        padding: 12px 20px;
+        margin-top: 20px;
+        padding: 16px 24px;
         font-size: 14px;
-        color: #666;
-        background: linear-gradient(135deg, #fafbff 0%, #f5f7ff 100%);
-        border-radius: 10px;
-        border: 1px dashed #d4d9f7;
+        color: var(--text-secondary);
+        background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.05) 100%);
+        border-radius: var(--radius);
+        border: 1px dashed rgba(99, 102, 241, 0.2);
+        line-height: 1.6;
     }
 
     .keyboard-hint kbd {

templates/base.html

@@ -8,31 +8,42 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
     {% block extra_head %}{% endblock %}
     <style>
         :root {
-            --primary-color: #5046e5;
-            --secondary-color: #f0f0f0;
-            --text-color: #333;
-            --light-gray: #f5f5f5;
-            --border-color: #e0e0e0;
-            --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            --radius: 8px;
+            --primary-color: #6366f1;
+            --primary-hover: #4f46e5;
+            --primary-light: #eef2ff;
+            --secondary-color: #f8fafc;
+            --text-color: #1e293b;
+            --text-secondary: #64748b;
+            --light-gray: #f8fafc;
+            --border-color: #e2e8f0;
+            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            --radius: 12px;
+            --radius-lg: 16px;
             --success-color: #10b981;
             --info-color: #3b82f6;
             --warning-color: #f59e0b;
             --error-color: #ef4444;
+            --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+            --gradient-primary-hover: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
         }
 
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Inter', sans-serif;
+            font-family: 'Pretendard Variable', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
         }
 
         body {
             color: var(--text-color);
+            background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
             display: flex;
             min-height: 100vh;
             height: 100vh;
@@ -44,27 +55,35 @@
         }
 
         .sidebar {
-            width: 240px;
-            background-color: var(--light-gray);
-            padding: 24px 16px;
-            border-right: 1px solid var(--border-color);
+            width: 260px;
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            padding: 28px 20px;
+            border-right: 1px solid rgba(255, 255, 255, 0.5);
             display: flex;
             flex-direction: column;
             height: 100vh;
             z-index: 1000;
-            transition: transform 0.3s ease-in-out;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             flex-shrink: 0;
+            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.03);
         }
 
         .logo-container {
-            margin-bottom: 32px;
+            margin-bottom: 36px;
+            padding: 0 4px;
         }
 
         .logo {
-            font-size: 22px;
-            font-weight: 700;
-            color: var(--primary-color);
-            margin-bottom: 8px;
+            font-size: 24px;
+            font-weight: 800;
+            background: var(--gradient-primary);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 10px;
+            letter-spacing: -0.5px;
         }
 
         .supported-by {
@@ -98,42 +117,60 @@
         .nav-item {
             display: flex;
             align-items: center;
-            padding: 12px 16px;
-            margin-bottom: 8px;
+            padding: 14px 16px;
+            margin-bottom: 6px;
             border-radius: var(--radius);
             cursor: pointer;
-            transition: background-color 0.2s;
-            color: var(--text-color);
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            color: var(--text-secondary);
             text-decoration: none;
+            font-weight: 500;
+            font-size: 15px;
         }
 
         .nav-item.active {
-            background-color: rgba(80, 70, 229, 0.1);
-            color: var(--primary-color);
-            font-weight: 500;
+            background: var(--gradient-primary);
+            color: white;
+            font-weight: 600;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
         }
 
         .nav-item:hover:not(.active) {
-            background-color: rgba(0, 0, 0, 0.05);
+            background-color: var(--primary-light);
+            color: var(--primary-color);
+            transform: translateX(4px);
         }
 
         .nav-item svg {
-            margin-right: 12px;
+            margin-right: 14px;
+            flex-shrink: 0;
+        }
+
+        .nav-item.active svg {
+            color: white;
         }
 
         .main-content {
             flex: 1;
-            padding: 32px;
+            padding: 40px;
             width: 100%;
             margin: 0 auto;
             overflow-y: auto;
             height: 100vh;
+            background: transparent;
         }
 
         .main-content-inner {
-            max-width: 1200px;
+            max-width: 1100px;
             width: 100%;
             margin: 0 auto;
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-radius: var(--radius-lg);
+            padding: 32px;
+            box-shadow: var(--shadow-lg);
+            border: 1px solid rgba(255, 255, 255, 0.8);
         }
 
         .tabs {
@@ -185,19 +222,26 @@
         }
 
         .btn {
-            background-color: var(--primary-color);
+            background: var(--gradient-primary);
             color: white;
             border: none;
             border-radius: var(--radius);
-            padding: 12px 24px;
+            padding: 14px 28px;
             margin-left: 12px;
             cursor: pointer;
-            font-weight: 500;
-            transition: background-color 0.2s;
+            font-weight: 600;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
         }
 
         .btn:hover {
-            background-color: #4038c7;
+            background: var(--gradient-primary-hover);
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
+        }
+
+        .btn:active {
+            transform: translateY(0);
         }
 
         .icon-btn {
@@ -232,14 +276,23 @@
         .player {
             flex: 1;
             border: 1px solid var(--border-color);
-            border-radius: var(--radius);
-            padding: 16px;
+            border-radius: var(--radius-lg);
+            padding: 24px;
+            background: white;
             box-shadow: var(--shadow);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .player:hover {
+            box-shadow: var(--shadow-lg);
+            border-color: rgba(99, 102, 241, 0.2);
         }
 
         .player-label {
-            font-weight: 600;
-            margin-bottom: 12px;
+            font-weight: 700;
+            margin-bottom: 16px;
+            font-size: 16px;
+            color: var(--text-color);
         }
 
         .audio-player {
@@ -249,25 +302,29 @@
 
         .vote-btn {
             width: 100%;
-            padding: 12px;
+            padding: 16px;
             background-color: white;
-            border: 1px solid var(--border-color);
+            border: 2px solid var(--border-color);
             border-radius: var(--radius);
-            font-weight: 500;
+            font-weight: 600;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
+            font-size: 15px;
         }
 
         .vote-btn:hover {
-            background-color: var(--light-gray);
-            border-color: #ccc;
+            background-color: var(--primary-light);
+            border-color: var(--primary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
         }
 
         .vote-btn.selected {
-            background-color: var(--primary-color);
+            background: var(--gradient-primary);
             color: white;
-            border-color: var(--primary-color);
+            border-color: transparent;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
         }
 
         .shortcut-key {
@@ -441,13 +498,16 @@
         .toast {
             display: flex;
             align-items: center;
-            padding: 12px 16px;
-            border-radius: 8px;
-            background-color: white;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-            animation: slideIn 0.3s ease-out forwards;
+            padding: 16px 20px;
+            border-radius: var(--radius);
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            box-shadow: var(--shadow-xl);
+            animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
             position: relative;
             overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.8);
         }
 
         .toast.slide-out {
@@ -680,26 +740,46 @@
         /* Dark mode styles */
         @media (prefers-color-scheme: dark) {
             :root {
-                --primary-color: #6c63ff;
-                --secondary-color: #2d2b38;
-                --text-color: #e0e0e0;
-                --light-gray: #1e1e24;
-                --border-color: #3a3a45;
-                --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-                --success-color: #10b981;
+                --primary-color: #818cf8;
+                --primary-hover: #6366f1;
+                --primary-light: rgba(129, 140, 248, 0.15);
+                --secondary-color: #1e1b2e;
+                --text-color: #f1f5f9;
+                --text-secondary: #94a3b8;
+                --light-gray: #1e1b2e;
+                --border-color: #334155;
+                --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+                --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+                --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+                --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+                --gradient-primary: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
+                --gradient-primary-hover: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                --success-color: #34d399;
                 --info-color: #60a5fa;
-                --warning-color: #f59e0b;
-                --error-color: #ef4444;
+                --warning-color: #fbbf24;
+                --error-color: #f87171;
             }
 
             body {
-                background-color: #121218;
+                background: linear-gradient(135deg, #0f0d1a 0%, #1a1625 100%);
                 color: var(--text-color);
             }
 
             .sidebar {
-                background-color: var(--light-gray);
-                border-right-color: var(--border-color);
+                background: rgba(30, 27, 46, 0.8);
+                backdrop-filter: blur(20px);
+                -webkit-backdrop-filter: blur(20px);
+                border-right-color: rgba(255, 255, 255, 0.05);
+            }
+
+            .main-content-inner {
+                background: rgba(30, 27, 46, 0.6);
+                border-color: rgba(255, 255, 255, 0.05);
+            }
+
+            .player {
+                background: rgba(30, 27, 46, 0.8);
+                border-color: var(--border-color);
             }
 
             .nav-item.active {