Update app.py

app.py

@@ -194,7 +194,7 @@ 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% 오버레이 */
@@ -204,33 +204,48 @@ bg_layer_css = (
     background-position: center 45%, center 45%;
     background-size: cover, cover;
     background-repeat: no-repeat, no-repeat;
-    background-attachment: fixed, fixed;   /* 스크롤 고정 */
     """
     if use_img else
     """
     /* 단색 모드 */
-    background-color: #F1F1F1;
+    background: #F1F1F1;
     """
 )
 
 st.markdown(f"""
 <style>
-/* 전역 배경 리셋 */
-.stApp::before, .stApp::after {{ content: none !important; }}
-.stApp {{ background: transparent !important; }}
-
-/* 중앙 컬럼에만 배경 적용 */
-.block-container {{
-  position: relative;
-  min-height: 100vh;
+/* ⚠ 기존에 .stApp::before 를 끄던 코드가 있으면 삭제(또는 아래가 마지막에 오게) */
+
+/* 중앙 폭 변수: 페이지 전체(뷰포트) 기준 중앙에 이 폭만 보이도록 클립 */
+:root {{
+  --col-w: min(1100px, 95vw);
+}}
+
+/* ✅ 배경은 '뷰포트 고정' 단일 레이어 (끊김 없음) */
+.stApp::before {{
+  content: "" !important;
+  position: fixed;
+  inset: 0;                     /* 풀스크린 */
   {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);
 }}
 
-/* 불필요한 pseudo 레이어 제거 (충돌 방지) */
-.block-container::before, .block-container::after {{ content: none; }}
+/* 본문은 배경 위에 */
+.block-container > * {{ position: relative; z-index: 1; }}
 
-/* 콘텐츠는 그대로 */
-.block-container > * {{ position: relative; }}
+/* 모바일에서 성능 이슈가 있으면 여기서 이미지 모드만 스크롤형으로 전환 가능
+@media (max-width: 768px){{
+  .stApp::before {{ background-attachment: scroll; }}
+}}
+*/
 </style>
 """, unsafe_allow_html=True)