From b89bca605a97186dd830112ab24959274a605113 Mon Sep 17 00:00:00 2001
From: shinalok <shinalok357@gmail.com>
Date: Tue, 2 Jun 2026 17:48:46 +0900
Subject: [PATCH] fix: remove excessive blue focus borders from containers

Restrict :focus-visible outline to only button/a/select.
Remove outline from textarea/input (uses border instead).
Suppress div, .block, .wrap, #main-chatbot focus outlines.
Override Gradio default .block:focus-within box-shadow globally.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app.py | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/app.py b/app.py
index 143e204..11b7687 100644
--- a/app.py
+++ b/app.py
@@ -463,6 +463,11 @@ _JS = """
 _CUSTOM_CSS = """
 footer { display: none !important; }
 
+/* Gradio 기본 focus 테두리 전역 제거 */
+.gradio-container *:focus:not(button):not(a):not(select) { outline: none !important; }
+.gradio-container .block:focus,
+.gradio-container .block:focus-within { box-shadow: none !important; border-color: var(--border-color-primary) !important; }
+
 /* ── 전체 레이아웃 (D4-1) ── */
 .app-layout {
     min-height: calc(100vh - 60px) !important;
@@ -660,11 +665,31 @@ footer { display: none !important; }
     .youlbot-sidebar.collapsed { width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; }
 }
 
-/* ── 접근성 ── */
-:focus-visible {
-    outline: 3px solid #3b82f6 !important;
+/* ── 접근성: 포커스 테두리를 인터랙티브 요소에만 적용 ── */
+button:focus-visible,
+a:focus-visible,
+select:focus-visible {
+    outline: 2px solid #3b82f6 !important;
     outline-offset: 2px !important;
-    border-radius: 4px;
+    border-radius: 6px;
+}
+/* textarea/input은 border로 포커스 표시하므로 outline 제거 */
+textarea:focus-visible,
+input:focus-visible {
+    outline: none !important;
+}
+/* 컨테이너 div에 생기는 파란 테두리 제거 */
+div:focus-visible,
+div:focus,
+.block:focus,
+.block:focus-within,
+.wrap:focus,
+.wrap:focus-within,
+#main-chatbot:focus,
+#main-chatbot:focus-within {
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: transparent !important;
 }
 
 /* ── 다크 모드 오버라이드 ── */