Update app.py

app.py

@@ -194,58 +194,42 @@ BG_URL = "https://plus.unsplash.com/premium_photo-1679830513869-cd3648acb1db?q=8
 st.sidebar.subheader("🎨 배경 설정")
 use_img = st.sidebar.toggle("배경 이미지 사용", key="bg_on", value=True)
 
-# ✅ 배경(둘 중 하나만 적용)
+# 배경 CSS (둘 중 하나만 적용)
 bg_layer_css = (
     f"""
-    /* 이미지 모드: 15%만 보이도록 흰색 85% 오버레이 */
+    /* ✅ 이미지: center 45%, cover, 고정 + 15%만 보이도록 반투명 흰색 오버레이 */
     background-image:
-      linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
+      linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),  /* ← 이미지 투명도 효과 */
       url('{BG_URL}');
     background-position: center 45%, center 45%;
     background-size: cover, cover;
     background-repeat: no-repeat, no-repeat;
+    background-attachment: fixed, fixed;  /* 스크롤해도 끊김 없음 */
     """
-    if use_img else
+    if use_img
+    else
     """
-    /* 단색 모드 */
-    background: #F1F1F1;
+    /* ✅ 단색: 중앙 컬럼에만 적용 + 스크롤 고정 */
+    background-color: #F1F1F1;
+    background-attachment: fixed;  /* 요소 배경을 뷰포트에 고정 */
     """
 )
 
 st.markdown(f"""
 <style>
-/* ⚠ 기존에 .stApp::before 를 끄던 코드가 있으면 삭제(또는 아래가 마지막에 오게) */
-
-/* 중앙 폭 변수: 페이지 전체(뷰포트) 기준 중앙에 이 폭만 보이도록 클립 */
-:root {{
-  --col-w: min(1100px, 95vw);
-}}
-
-/* ✅ 배경은 '뷰포트 고정' 단일 레이어 (끊김 없음) */
-.stApp::before {{
-  content: "" !important;
-  position: fixed;
-  inset: 0;                     /* 풀스크린 */
+/* 전역 배경 리셋만 수행 (컬럼 pseudo는 건드리지 않음) */
+.stApp::before, .stApp::after {{ content: none !important; }}
+.stApp {{ background: transparent !important; }}
+
+/* 중앙 컬럼 */
+.block-container {{
+  position: relative;
+  min-height: 100vh;
   {bg_layer_css}
-  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 > * {{ position: relative; z-index: 1; }}
-
-/* 모바일에서 성능 이슈가 있으면 여기서 이미지 모드만 스크롤형으로 전환 가능
-@media (max-width: 768px){{
-  .stApp::before {{ background-attachment: scroll; }}
-}}
-*/
+/* 콘텐츠가 배경 위에 보이도록 보정 (z-index 필요 없음) */
+.block-container > * {{ position: relative; }}
 </style>
 """, unsafe_allow_html=True)