1014

app.py

@@ -117,9 +117,73 @@ for cls, files in EXAMPLES.items():
         except Exception as e:
             print(f"[WARN] example missing: {cls} {kind} -> {fname}: {e}")
 
+GLOBAL_CSS = """
+/* ===== 공통 변수 투명화 (v3/v4 둘다) ===== */
+:root, .gradio-container {
+  --body-background-fill: transparent !important;
+  --background-fill-primary: transparent !important;
+  --background-fill-secondary: transparent !important;
+  --block-background-fill: transparent !important;
+  --block-border-color: transparent !important;
+  --panel-background-fill: transparent !important;
+  --panel-border-color: transparent !important;
+  --section-header-background-fill: transparent !important;
+  --shadow-drop: 0 0 0 rgba(0,0,0,0) !important;
+  --shadow-spread: 0 0 0 rgba(0,0,0,0) !important;
+}
+
+/* ===== v4(Tailwind 기반)에서 자주 쓰이는 배경/테두리/그림자 제거 ===== */
+.gradio-container .bg-white,
+.gradio-container .bg-gray-50,
+.gradio-container .bg-gray-100,
+.gradio-container .bg-slate-50,
+.gradio-container .bg-neutral-50,
+.gradio-container .bg-secondary,
+.gradio-container .border,
+.gradio-container .shadow,
+.gradio-container .shadow-sm,
+.gradio-container .shadow-md,
+.gradio-container .ring-1,
+.gradio-container .ring,
+.gradio-container .gr-card,
+.gradio-container .prose > *:where(hr) {
+  background: transparent !important;
+  box-shadow: none !important;
+  border-color: transparent !important;
+}
+
+/* ===== v3 컴포넌트 계열 ===== */
+.gradio-container .gr-panel,
+.gradio-container .gr-group,
+.gradio-container .gr-box,
+.gradio-container .gr-row,
+.gradio-container .gr-column,
+.gradio-container .gr-accordion,
+.gradio-container .gr-block,
+.gradio-container .gr-form,
+.gradio-container .gr-tabs,
+.gradio-container .gr-tabitem,
+.gradio-container .gr-section-header {
+  background: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+/* 구분선/헤더 바 제거 */
+.gradio-container hr,
+.gradio-container .gr-divider,
+.gradio-container .gr-accordion .label {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* 바깥쪽 페이지 배경도 강제로 투명/흰색으로 */
+html, body, .gradio-container { background: transparent !important; }
+"""
 
 # -------------------- UI --------------------
-with gr.Blocks(fill_height=True) as demo:
+with gr.Blocks(fill_height=True, css=GLOBAL_CSS) as demo:
     # ------------------ PAGE 1: Intro + Examples ------------------
     page_intro = gr.Group(visible=True)
     with page_intro: