Update app.py

app.py

@@ -194,42 +194,74 @@ BG_URL = "https://plus.unsplash.com/premium_photo-1679830513869-cd3648acb1db?q=8
 st.sidebar.subheader("🎨 배경 설정") 
 st.sidebar.toggle("배경 이미지 사용", key="bg_on", value=True) 
 
-def apply_background(): # 보호: 기존 ::before 배경이 있으면 끄기 (겹침/끊김 방지)
-    base_reset_css = """ 
-    <style> 
-    .stApp::before, .block-container::before{ content:none !important; } 
-    /* 컨텐츠/사이드바는 배경 레이어 위에 오도록 */ 
-    .block-container, [data-testid="stSidebar"]{ position:relative; z-index:1; } 
-    /* 입력박스 아래 여백 (요청 2번) */ 
-    div[data-testid="stTextInput"]{ margin-bottom:18px !important; } 
-    </style> 
-    """ 
-    
-    st.markdown(base_reset_css, unsafe_allow_html=True) 
-    if st.session_state.get("bg_on") and st.session_state.get("bg_url"): 
-        url = st.session_state["bg_url"] # 0~1 로 변환 (흰 오버레이로 밝기/가독성 조절) 
-        overlay_alpha = float(st.session_state.get("bg_overlay_pct", 15)) / 100.0 # ✅ 이미지 배경 (끊김 방지: 페이지 전체 .stApp에 고정 배경) 
-        st.markdown(f""" 
-        <style> 
-        .stApp{{ background: url('{url}') center / cover no-repeat fixed; }} 
-        /* 오버레이: 이미지 위에 흰색 막을 얹어 가독성 확보 (투명도 조절 가능) */ 
-        .stApp::after{{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: rgba(255,255,255,{overlay_alpha}); }} 
-        /* 모바일은 fixed 이슈가 있어 고정 해제 */ 
+# 나머지 상세 설정은 expander 안에 넣어 깔끔하게 관리합니다.
+with st.expander("배경 옵션 펼치기"):
+    st.text_input("배경 이미지 URL", key="bg_url", value="https://images.unsplash.com/photo-1506744038136-46273834b3fb")
+    st.slider("배경 이미지 오버레이 (%)", 0, 100, 15, key="bg_overlay_pct")
+    st.color_picker("단색 배경 색상", key="bg_color", value="#F1F1F1")
+
+
+def apply_background():
+    # 보호: 기존 ::before 배경이 있으면 끄기 (겹침/끊김 방지)
+    base_reset_css = """
+    <style>
+    .stApp::before, .block-container::before { content:none !important; }
+    /* 입력박스 아래 여백 */
+    div[data-testid="stTextInput"] { margin-bottom:18px !important; }
+    </style>
+    """
+    st.markdown(base_reset_css, unsafe_allow_html=True)
+
+    if st.session_state.get("bg_on") and st.session_state.get("bg_url"):
+        url = st.session_state["bg_url"]
+        overlay_alpha = float(st.session_state.get("bg_overlay_pct", 15)) / 100.0
         
-        @media (max-width:768px){{ .stApp{{ background-attachment: initial; }} 
+        # ✅ 이미지 배경 (메인 컨텐츠 영역에만 고정 배경 적용)
+        st.markdown(f"""
+        <style>
+        [data-testid="stAppViewContainer"] {{
+            background: url('{url}') center / cover no-repeat fixed;
+            position: relative; /* 오버레이의 기준점이 되도록 설정 */
+            z-index: 0; /* 컨텐츠가 위에 오도록 */
+        }}
+
+        /* 오버레이: 이미지 위에 흰색 막을 얹어 가독성 확보 */
+        [data-testid="stAppViewContainer"]::after {{
+            content: "";
+            position: absolute; /* 부모(stAppViewContainer)를 기준으로 위치 */
+            inset: 0;
+            background: rgba(255, 255, 255, {overlay_alpha});
+            z-index: -1; /* 배경 이미지 바로 위에 오도록 */
+            pointer-events: none;
         }}
-        </style> 
-        """, unsafe_allow_html=True) 
-    else: 
-        # ✅ 단색 배경 (끊김 없음: 요소 자체의 background-color 사용) 
+
+        /* 컨텐츠와 사이드바가 배경보다 위에 오도록 */
+        .block-container, [data-testid="stSidebar"] {{
+            position: relative;
+            z-index: 1;
+        }}
+        
+        /* 모바일은 fixed 이슈가 있어 고정 해제 */
+        @media (max-width: 768px) {{
+            [data-testid="stAppViewContainer"] {{
+                background-attachment: initial;
+            }}
+        }}
+        </style>
+        """, unsafe_allow_html=True)
+
+    else:
+        # ✅ 단색 배경 (메인 컨텐츠 영역에만 적용)
         color = st.session_state.get("bg_color", "#F1F1F1")
-        st.markdown(f""" 
+        st.markdown(f"""
         <style>
-        .stApp{{ background-color: {color} !important; }} 
-        </style> 
-        """, unsafe_allow_html=True) 
-        
-# 호출 
+        [data-testid="stAppViewContainer"] {{
+            background-color: {color} !important;
+        }}
+        </style>
+        """, unsafe_allow_html=True)
+
+# 함수 호출
 apply_background()