Update app.py

app.py

@@ -686,54 +686,75 @@ def create_interface():
             box-shadow: 0 0 0 2px rgba(123,97,255,0.2);
             background: linear-gradient(135deg, #ffffff, #f0f3ff);
         }
-/* 정렬 라디오 버튼 컨테이너 수정 */
+        /* 정렬 버튼 컨테이너 수정 */
         .sort-radio { 
             display: flex !important;
-            justify-content: center !important;  /* 중앙 정렬 */
-            gap: 10px !important;
-            background: linear-gradient(135deg, #f5f5ff, #f0f0ff);
-            padding: 12px;
-            border-radius: 10px;
-            width: 150% !important;  /* 너비 50% 증가 */
-            margin-right: -25% !important;  /* 오른쪽 여백 조정 */
+            justify-content: flex-start !important;
+            gap: 15px !important;
+            width: auto !important;
+            background: transparent !important;
+            padding: 0 !important;
         }
+        
+        /* 라디오 버튼 그룹 컨테이너 */
         .sort-radio > div {
             display: flex !important;
-            gap: 10px !important;
-            width: 100% !important;
-            justify-content: space-between !important;  /* 버튼 간격 균등 분배 */
-        }        
+            gap: 15px !important;
+            width: auto !important;
+        }
+        
+        /* 각 라디오 버튼 항목 */
         .sort-radio > div > div {
-            flex: 1 !important;  /* 균등 분배 */
-            max-width: 120px !important;  /* 최대 너비 제한 */
+            width: 120px !important;
+            height: 80px !important;
         }
+        
+        /* 라디오 버튼을 버튼처럼 스타일링 */
         .sort-radio label {
-            width: 100% !important;  /* 부모 너비에 맞춤 */
-            padding: 8px 5px !important;
+            width: 120px !important;
+            height: 80px !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            color: white !important;
+            border: none !important;
+            border-radius: 10px !important;
+            cursor: pointer !important;
+            transition: all 0.3s ease !important;
+            font-size: 1.2em !important;
             text-align: center !important;
-            background: linear-gradient(135deg, #ffffff, #f8f9ff);
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            border: 1px solid rgba(123,97,255,0.1);
-            white-space: nowrap !important;
-            font-size: 0.9em !important;
-            display: block !important;
+            padding: 10px !important;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
         }
-
         
+        /* 첫 번째 버튼 (rank) */
+        .sort-radio > div > div:nth-child(1) label {
+            background: linear-gradient(135deg, #4CAF50, #45a049) !important;
+        }
+        
+        /* 두 번째 버튼 (rising_rate) */
+        .sort-radio > div > div:nth-child(2) label {
+            background: linear-gradient(135deg, #2196F3, #1976D2) !important;
+        }
+        
+        /* 세 번째 버튼 (popularity) */
+        .sort-radio > div > div:nth-child(3) label {
+            background: linear-gradient(135deg, #9C27B0, #7B1FA2) !important;
+        }
+        
+        /* 호버 효과 */
         .sort-radio label:hover {
-            background: linear-gradient(135deg, #f0f3ff, #e8ecff);
-            border-color: rgba(123,97,255,0.3);
+            transform: translateY(-2px) !important;
+            box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important;
         }
         
+        /* 선택된 버튼 스타일 */
         .sort-radio input:checked + label {
-            background: linear-gradient(135deg, #7b61ff, #6366f1);
-            color: white;
-            border-color: transparent;
+            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
+            transform: translateY(1px) !important;
         }
 
-        /* 리프레시 버튼 스타일 수정 */
+        /* 리프레시 버튼 스타일 */
         .refresh-btn {
             background: linear-gradient(135deg, #7b61ff, #6366f1);
             color: white;
@@ -743,19 +764,20 @@ def create_interface():
             cursor: pointer;
             transition: all 0.3s ease;
             width: 120px;
-            height: 80px !important;  /* 높이 2배로 증가 */
+            height: 80px !important;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-left: auto;
-            font-size: 1.2em !important;  /* 폰트 크기 증가 */
+            font-size: 1.2em !important;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
         }
+        
         .refresh-btn:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
             background: linear-gradient(135deg, #8b71ff, #7376f1);
         }
-
     """) as interface:
         
         gr.Markdown("""