Update app.py

app.py

@@ -588,17 +588,22 @@ def create_interface():
     }
 
     css = """
+        /* 모바일 뷰 */
         @media (max-width: 600px) {
-            .container { padding: 10px !important; }
-            .gradio-row { 
-                flex-direction: column !important;
-                gap: 10px !important;
+            #logo-container { 
+                padding: 20px 10px !important;
+                width: 100% !important;
             }
-            .gradio-button { 
-                width: 100% !important; 
-                margin: 5px 0 !important;
-                min-height: 44px !important;  /* 모바일 터치 영역 개선 */
+            #logo-image {
+                content: url('/static/DIGITAL_GUTPAN_LOGO_m.png') !important;
+                width: 100% !important;
+                height: auto !important;
+                max-width: 300px !important;
+                margin: 0 auto !important;
+                display: block !important;
             }
+            .container { padding: 10px !important; }
+            .gradio-button { width: 100% !important; }
             .gradio-textbox { width: 100% !important; }
             .gradio-audio { width: 100% !important; }
             .gradio-image { width: 100% !important; }
@@ -609,20 +614,45 @@ def create_interface():
                 max-width: 100% !important;
             }
         }
-    
-        /* 전반적인 UI 개선 */
+        
+        /* 데스크톱 뷰 */
+        @media (min-width: 601px) {
+            #logo-container { 
+                padding: 20px 0;
+                width: 100%;
+            }
+            #logo-image {
+                content: url('/static/DIGITAL_GUTPAN_LOGO_w.png');
+                width: 100%;
+                height: auto;
+                max-width: 600px;
+                margin: 0 auto;
+                display: block;
+            }
+        }
+        
+        /* 공통 스타일 */
         .gradio-button {
             transition: all 0.3s ease;
         }
         .gradio-button:active {
             transform: scale(0.98);
         }
+        #logo-container {
+            background: transparent !important;
+            text-align: center;
+        }
     """
 
     with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
         state = gr.State(value=initial_state)
         
-        gr.Markdown("# 디지털 굿판")
+        with gr.Row(elem_id="logo-container"):
+            gr.Image(value="/static/DIGITAL_GUTPAN_LOGO_w.png", 
+                    show_label=False,
+                    interactive=False,
+                    elem_id="logo-image")
+
         gr.Markdown("""
         1. 입장 → 2. 청신 → 3. 기원 → 4. 송신 
         순서대로 진행해주세요.