Update app.py

app.py

@@ -555,69 +555,48 @@ def create_interface():
 
     css = """
         @media (max-width: 600px) {
-            .container { padding: 10px !important; }
-            .gradio-button { width: 100% !important; }
-            #main-image { width: 100% !important; height: auto !important; }
             #logo-image {
-                content: url('/static/DIGITAL_GUTPAN_LOGO_m.png'); /* Mobile logo */
-                width: 75px !important; /* 50% of the desktop size for mobile */
-                height: auto;
+                content: url('/static/DIGITAL_GUTPAN_LOGO_m.png') !important;
+                width: 75px !important;
+                height: auto !important;
             }
+            .container { padding: 10px !important; }
             .gradio-button { 
                 width: 100% !important; 
                 margin: 5px 0 !important;
-                min-height: 44px !important;  /* Improved touch area for mobile */
+                min-height: 44px !important;
+            }
+            .gradio-textbox, 
+            .gradio-audio, 
+            .gradio-image { 
+                width: 100% !important;
             }
-            .gradio-textbox { width: 100% !important; }
-            .gradio-audio { width: 100% !important; }
-            .gradio-image { width: 100% !important; }
-            #audio-recorder { width: 100% !important; }
-            #result-image { width: 100% !important; }
             .gradio-dataframe {
                 overflow-x: auto !important;
                 max-width: 100% !important;
             }
         }
         
-        /* Desktop view */
+        /* 데스크톱 뷰 */
         @media (min-width: 601px) {
             #logo-image {
-                content: url('/static/DIGITAL_GUTPAN_LOGO_w.png'); /* Desktop logo */
-                width: auto; /* Use the image's original width */
+                content: url('/static/DIGITAL_GUTPAN_LOGO_w.png');
+                width: auto;
                 height: auto;
-                display: block;
-                margin: 0 auto;
             }
         }
         
-        /* Overall UI Enhancements */
+        /* 공통 스타일 */
         .gradio-button {
             transition: all 0.3s ease;
         }
         .gradio-button:active {
             transform: scale(0.98);
         }
-        /* Logo Container Styling */
         #logo-container {
-            background: transparent !important;
-            padding: 0;
-            margin: 0 auto;
             text-align: center;
-        }
-        
-        /* Main Image Styling */
-        .main-image-container {
-            background: none;
-            text-align: center;
-            margin-top: 20px;
-            margin-bottom: 80px;
-        }
-        #main-image {
-            width: 600px;
-            height: 600px;
             margin: 0 auto;
-            display: block;
-            border-radius: 8px;
+            padding: 20px 0;
         }
     """
 
@@ -628,7 +607,10 @@ def create_interface():
         logo_image_path = "/static/DIGITAL_GUTPAN_LOGO_m.png" if request.user_agent.platform == 'mobile' else "/static/DIGITAL_GUTPAN_LOGO_w.png"
         
         with gr.Row(elem_id="logo-container"):
-            gr.Image(value=logo_image_path, show_label=False, interactive=False, elem_id="logo-image")
+            gr.Image(value="/static/DIGITAL_GUTPAN_LOGO_w.png", 
+                    show_label=False, 
+                    interactive=False,
+                    elem_id="logo-image")
 
         with gr.Tabs(selected=0) as tabs:
             # 입장 탭 (축원 포함)