Update app.py

app.py

@@ -590,10 +590,9 @@ def create_interface():
     css = """
         @media (max-width: 600px) {
             .container { padding: 10px !important; }
-            .gradio-row { 
-                flex-direction: column !important;
-                gap: 10px !important;
-            }
+                    .gradio-button { width: 100% !important; }
+                    #main-image { width: 100% !important; height: auto !important; } /* Full width on mobile */
+                }
             .gradio-button { 
                 width: 100% !important; 
                 margin: 5px 0 !important;
@@ -628,51 +627,43 @@ def create_interface():
             text-align: center;
             margin-top: 20px;
         }
-        
+    
         .logo-image {
-            width: 150px; /* 로고 크기 */
+            width: 150px;
             margin: 0 auto;
-            display: block;
         }
-        
-        /* 메인 이미지 스타일 */
+    
         .main-image-container {
             text-align: center;
             margin-top: 20px;
             margin-bottom: 20px;
         }
-        
-        .main-image {
-            width: 100%; /* 화면 폭에 맞춤 */
-            max-width: 100%; /* 모바일 화면에도 맞추기 */
-            height: auto; /* 비율 유지 */
+    
+        #main-image {
+            width: 600px;
+            height: 600px;
             margin: 0 auto;
             display: block;
-            border-radius: 8px; /* 모서리 둥글게 */
+            border-radius: 8px;
         }
     """
 
     with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
         state = gr.State(value=initial_state)
-        
-        gr.Markdown("![디지털 굿판 로고](static/DIGITAL_GUTPAN_LOGO.png)")
-        gr.Markdown("""
-        1. 입장 → 2. 청신 → 3. 기원 → 4. 송신 
-        순서대로 진행해주세요.
-        """)
+        with gr.Row(elem_id="logo-container"):
+            gr.Image(value="static/DIGITAL_GUTPAN_LOGO.png", show_label=False, interactive=False, elem_id="logo-image")
 
         with gr.Tabs(selected=0) as tabs:
             # 입장 탭 (축원 포함)
             with gr.TabItem("입장") as tab_entrance:
                 # 1단계: 첫 화면
                 with gr.Column(visible=True) as welcome_section:
-                    # 로고 이미지 추가
+                    # Main image
                     gr.Image(
-                        value="static/main-image.png",  # 이미지 경로를 설정합니다.
-                        label=None,
+                        value="static/main-image.png",
                         show_label=False,
                         interactive=False,
-                        elem_id="main-image"  # CSS 스타일을 지정하기 위해 ID 설정
+                        elem_id="main-image"
                     )
         
                     # 기존 텍스트 및 다른 요소들