Update app.py

app.py

@@ -190,51 +190,47 @@ st.markdown(
 # 고정 이미지 URL
 #BG_URL = "https://plus.unsplash.com/premium_photo-1679830513869-cd3648acb1db?q=80&w=2127&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
 
-COLOR = "#F1F1F1"
-
-st.markdown(f"""
-<style>
-/* 기존 배경/레이어 정리 */
-.stApp {{ background: transparent !important; }}
-.stApp::after, .block-container::before, .block-container::after {{ content: none !important; }}
-
-/* 중앙 폭 변수 (페이지 레이아웃에 맞춰 필요시 1000~1200px 튜닝) */
-:root {{ --col-w: min(1200px, 95vw); }}
-
-/* 상단·배경 투명 처리 */
-header[data-testid="stHeader"],
-[data-testid="stAppViewContainer"],
-main, section.main {{ background: transparent !important; }}
-
-/* 남아있을 수 있는 레이어 제거 */
-.stApp::before, .stApp::after,
-.block-container::before, .block-container::after {{ content:none !important; }}
-
-/* ✅ 단색 배경: '한 장'을 viewport에 고정 → 스크롤해도 안 잘림
-   중앙 컬럼 폭만 보이도록 좌우를 clip-path로 잘라냄 */
-.stApp::before {{
-  content:"";
-  position: fixed;
-  inset: 0;                          /* 풀스크린 */
-  background: {COLOR};
-  pointer-events: none;
-  z-index: 0;
-
-  /* 가운데 정렬된 컬럼 폭만 남기고 좌우는 가림 */
-  clip-path: inset(0 calc((100vw - var(--col-w))/2) 0 calc((100vw - var(--col-w))/2));
-
-  /* 재합성 이음새 방지 보정 */
-  will-change: transform;
-  transform: translateZ(0);
-}}
-
-/* 실제 콘텐츠는 배경 위로 */
-.block-container, [data-testid="stSidebar"] {{
-  position: relative;
-  z-index: 1;
-}}
-</style>
-""", unsafe_allow_html=True)
+# === 배경 설정 UI === 
+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 이슈가 있어 고정 해제 */ 
+        
+        @media (max-width:768px){{ .stApp{{ background-attachment: initial; }} 
+        }}
+        </style> 
+        """, unsafe_allow_html=True) 
+    else: 
+        # ✅ 단색 배경 (끊김 없음: 요소 자체의 background-color 사용) 
+        color = st.session_state.get("bg_color", "#F1F1F1")
+        st.markdown(f""" 
+        <style>
+        .stApp{{ background-color: {color} !important; }} 
+        </style> 
+        """, unsafe_allow_html=True) 
+        
+# 호출 
+apply_background()