Update app.py

app.py

@@ -199,56 +199,78 @@ if not st.session_state.get("bg_on"):
 
 # === 중앙 컨테이너에만 배경 적용 ===
 def apply_background_center_only():
-    # 베이스 리셋: 앱 전체 배경 제거 + 기본 레이아웃 정리
     st.markdown("""
     <style>
-      .stApp { background: none !important; }                    /* 전체 배경 제거 */
+      /* 0) 앱 전체 배경 제거 (사이드바 제외) */
+      .stApp { background: none !important; }
       .stApp::before, .block-container::before { content: none !important; }
-      [data-testid="stSidebar"] { position: relative; z-index: 1; }
 
-      /* 중앙 컨테이너가 자체 레이어를 갖도록(의도치 않은 겹침 방지) */
-      [data-testid="stAppViewContainer"] > .main .block-container {
+      /* 1) 중앙 컨테이너(버전별 모든 케이스 포괄) */
+      /*   - 최신/구버전 DOM을 모두 커버하도록 :is()와 data-testid를 병행 */
+      :is(
+        [data-testid="stAppViewContainer"] [data-testid="block-container"],
+        [data-testid="stAppViewContainer"] > .main .block-container,
+        section.main > div.block-container,
+        div[data-testid="block-container"]
+      ){
         position: relative;
         isolation: isolate;
-        overflow: hidden;          
-        min-height: 100vh;      
+        overflow: hidden;
+        min-height: 100vh;                 /* 전체 화면 채움 */
+        /* 필요 시: border-radius: 12px;  */
+        /* 모바일/GPU 가속 힌트 */
+        transform: translateZ(0);
+        will-change: background-position, background-image;
       }
 
-      /* 입력박스 하단 여백(요청사항 유지) */
-      div[data-testid="stTextInput"] { margin-bottom: 18px !important; }
+      /* 2) 입력박스 하단 여백 */
+      div[data-testid="stTextInput"]{ margin-bottom: 18px !important; }
     </style>
     """, unsafe_allow_html=True)
 
+    # 3) 이미지/단색 분기
     if st.session_state.get("bg_on"):
-        # 이미지 배경: 중앙 컨테이너에만 적용
         st.markdown(f"""
         <style>
-          [data-testid="stAppViewContainer"] > .main .block-container {{
+          :is(
+            [data-testid="stAppViewContainer"] [data-testid="block-container"],
+            [data-testid="stAppViewContainer"] > .main .block-container,
+            section.main > div.block-container,
+            div[data-testid="block-container"]
+          ){{
             background-image:
               linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
-              url('{BG_URL}');
-            background-position: center 45%;
-            background-size: cover;
-            background-repeat: no-repeat;
-
-            /* 레이어별 attachment: 오버레이는 scroll, 이미지는 fixed */
-            background-attachment: scroll, fixed;
+              url('{BG_URL}') !important;
+            background-position: center 45% !important;
+            background-size: cover !important;
+            background-repeat: no-repeat !important;
+            /* 오버레이는 스크롤, 이미지는 고정(패럴랙스가 싫으면 fixed→scroll) */
+            background-attachment: scroll, fixed !important;
           }}
 
-          /* 모바일에서 fixed 이슈 회피 */
-          @media (max-width: 768px) {{
-            [data-testid="stAppViewContainer"] > .main .block-container {{
-              background-attachment: scroll, scroll;
+          /* 모바일에서 fixed 문제 회피 */
+          @media (max-width: 768px){{
+            :is(
+              [data-testid="stAppViewContainer"] [data-testid="block-container"],
+              [data-testid="stAppViewContainer"] > .main .block-container,
+              section.main > div.block-container,
+              div[data-testid="block-container"]
+            ){{
+              background-attachment: scroll, scroll !important;
             }}
           }}
         </style>
         """, unsafe_allow_html=True)
     else:
-        # 단색 배경: 중앙 컨테이너에만 색상 적용
         color = st.session_state.get("bg_color", "#F1F1F1")
         st.markdown(f"""
         <style>
-          [data-testid="stAppViewContainer"] > .main .block-container {{
+          :is(
+            [data-testid="stAppViewContainer"] [data-testid="block-container"],
+            [data-testid="stAppViewContainer"] > .main .block-container,
+            section.main > div.block-container,
+            div[data-testid="block-container"]
+          ){{
             background-image: none !important;
             background-color: {color} !important;
           }}