colors, fonts, dropdown problems

components/leaderboard_components.py

@@ -5,8 +5,8 @@ These are stable components that don't change frequently
 
 def get_chart_colors():
     return {
-        "Private": "#1098F7",  # Airglow Blue for Proprietary
-        "Open source": "#58BC82",  # Green for Open source
+        "Private": "#593B1D",  # Rich brown for API
+        "Open source": "#FACC15",  # Warm amber for OSS
         "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"],
         "text": "white",
         "background": "#01091A",
@@ -16,10 +16,12 @@ def get_chart_colors():
 
 def get_rank_badge(rank):
     """Generate HTML for rank badge with appropriate styling"""
+    tag_background = "#593B1D"
+    tag_text_color = "#FFFFFF"
     badge_styles = {
-        1: ("1st", "linear-gradient(145deg, #ffd700, #ffc400)", "#000"),
-        2: ("2nd", "linear-gradient(145deg, #9ca3af, #787C7E)", "#fff"),
-        3: ("3rd", "linear-gradient(145deg, #CD7F32, #b36a1d)", "#fff"),
+        1: ("1st", tag_background, tag_text_color),
+        2: ("2nd", tag_background, tag_text_color),
+        3: ("3rd", tag_background, tag_text_color),
     }
 
     if rank in badge_styles:
@@ -59,24 +61,25 @@ def get_type_badge(model_type):
     """Generate HTML for model type badge"""
     colors = get_chart_colors()
     color_map = {
-        "Open source": colors.get("Open source", "#58BC82"),
-        "Proprietary": colors.get("Private", "#1098F7"),
-        "Private": colors.get("Private", "#1098F7"),
+        "Open source": colors.get("Open source", "#FACC15"),
+        "Proprietary": colors.get("Private", "#593B1D"),
+        "Private": colors.get("Private", "#593B1D"),
     }
     label_map = {
         "Open source": "OSS",
         "Proprietary": "API",
         "Private": "API",
     }
-    bg_color = color_map.get(model_type, "#4F46E5")
+    bg_color = color_map.get(model_type, "#593B1D")
     display_label = label_map.get(model_type, model_type)
+    text_color = "#111827" if display_label == "OSS" else "#FFFFFF"
     return f"""
         <div style="
             display: inline-flex;
             align-items: center;
             padding: 4px 8px;
             background: {bg_color};
-            color: white;
+            color: {text_color};
             border-radius: 4px;
             font-size: 0.85em;
             font-weight: 500;

styles/leaderboard_styles.py

@@ -34,9 +34,9 @@ def get_leaderboard_css():
         --border-subtle: rgba(245, 246, 247, 0.08);
         --border-default: rgba(245, 246, 247, 0.12);
         --border-strong: rgba(245, 246, 247, 0.2);
-        --text-primary: #F5F6F7;
-        --text-secondary: #94A3B8;
-        --text-muted: #64748B;
+        --text-primary: #FFFFFF;
+        --text-secondary: #E2E8F0;
+        --text-muted: #94A3B8;
         --accent-primary: #ffd21e;
         --accent-secondary: #1098F7;
         --accent-tertiary: #F5F6F7;
@@ -44,12 +44,38 @@ def get_leaderboard_css():
         --glow-secondary: rgba(16, 152, 247, 0.4);
         --glow-tertiary: rgba(245, 246, 247, 0.3);
     }
+
+    html.light,
+    html.light body,
+    html.light .gradio-container {
+        --bg-primary: #F8FAFC;
+        --bg-secondary: rgba(15, 23, 42, 0.06);
+        --bg-card: rgba(255, 255, 255, 0.92);
+        --border-subtle: rgba(15, 23, 42, 0.08);
+        --border-default: rgba(15, 23, 42, 0.12);
+        --border-strong: rgba(15, 23, 42, 0.18);
+        --text-primary: #0B1120;
+        --text-secondary: #1E293B;
+        --text-muted: #475569;
+        --accent-primary: #F59E0B;
+        --accent-secondary: #2563EB;
+        --accent-tertiary: #111827;
+        --glow-primary: rgba(245, 158, 11, 0.25);
+        --glow-secondary: rgba(37, 99, 235, 0.2);
+        --glow-tertiary: rgba(15, 23, 42, 0.18);
+    }
+
+    html.light [style*="color: white"],
+    html.light [style*="color:white"],
+    html.light [style*="#FFFFFF"],
+    html.light [style*="#ffffff"] {
+        color: var(--text-primary) !important;
+    }
     
     /* Global font and background */
-    .gradio-container {
+    html, body, .gradio-container {
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
         background: var(--bg-primary) !important;
-        color: var(--text-primary) !important;
     }
     
     /* Headers and text */
@@ -60,18 +86,15 @@ def get_leaderboard_css():
     }
     
     p, span, div, li, ul li {
-        color: white !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
     }
     
     /* Labels and info text */
     label {
-        color: white !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
     }
     
     .gr-box label {
-        color: white !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
     }
     
@@ -158,7 +181,7 @@ def get_leaderboard_css():
     
     /* Radio button labels */
     input[type="radio"] + label {
-        color: white !important;
+        color: var(--text-primary) !important;
     }
     
     input[type="radio"]:checked {
@@ -171,26 +194,22 @@ def get_leaderboard_css():
     .dropdown {
         border-color: var(--border-default) !important;
         background: var(--bg-card) !important;
-        color: white !important;
         transition: all 0.2s ease !important;
     }
     
     /* Dropdown option styling */
     .dropdown option {
         background: var(--bg-card) !important;
-        color: white !important;
     }
     
     /* Gradio dropdown specific styling */
     .gradio-dropdown select,
     .gradio-dropdown [role="combobox"],
     .gradio-dropdown input {
-        color: white !important;
         background: var(--bg-card) !important;
     }
     
     .gradio-dropdown option {
-        color: white !important;
         background: var(--bg-card) !important;
     }
     
@@ -210,19 +229,16 @@ def get_leaderboard_css():
         overflow-y: auto !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
-        color: white !important;
     }
     
     /* Table cells and headers */
     .dataframe td,
     .dataframe th {
-        color: white !important;
     }
     
     /* Button styling */
     button {
         background: var(--bg-card) !important;
-        color: white !important;
         border: 1px solid var(--border-default) !important;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
     }
@@ -363,7 +379,7 @@ def get_leaderboard_css():
         display: inline-block !important;
         padding: 14px 28px !important;
         background: #ffd21e !important;
-        color: #FFFFFF !important;
+        color: var(--text-primary) !important;
         text-decoration: none !important;
         border-radius: 16px !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
@@ -382,7 +398,7 @@ def get_leaderboard_css():
         transform: translateY(-3px) !important;
         box-shadow: 0 12px 32px rgba(255, 210, 30, 0.5), 0 8px 16px rgba(0, 0, 0, 0.4) !important;
         background: #ffd21e !important;
-        color: #FFFFFF !important;
+        color: var(--text-primary) !important;
         text-decoration: none !important;
         text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
     }
@@ -424,24 +440,46 @@ def get_leaderboard_css():
         border-color: #ffd21e !important;
         box-shadow: 0 8px 24px rgba(255, 210, 30, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
         text-decoration: none !important;
+        color: var(--text-primary) !important;
+    }
+
+    /* Ensure key hero/body text stays bright */
+    .hero-subtitle,
+    .section-lead,
+    .section-subtitle,
+    .criteria-card li,
+    .scenario-body,
+    .hero-action-button,
+    .hero-action-button span {
+        color: #FFFFFF !important;
+    }
+
+    /* Language toggle button */
+    #lang-toggle-btn button,
+    #lang-toggle-btn {
         color: #FFFFFF !important;
+        border-color: #ffd21e !important;
+    }
+
+    .hero-action-button {
+        border-color: #ffd21e !important;
     }
 
     /* Numeric content styling */
     .numeric-cell, .metric-value, .rank-value,
     .level-tile-score, .core-metric-card .metric-value {
-        color: white !important;
+        color: var(--text-primary) !important;
         font-family: 'Geist Mono', monospace !important;
     }
 
     /* Table content */
     td, th, table * {
-        color: white !important;
+        color: var(--text-primary) !important;
     }
 
     /* All numeric and data elements */
     .performance-card *, .v2-styled-table *, .dataframe * {
-        color: white !important;
+        color: var(--text-primary) !important;
     }
 
     /* Enhanced dropdown styling - more specific selectors
@@ -454,20 +492,18 @@ def get_leaderboard_css():
     .model-dropdown [role="combobox"],
     .model-dropdown button {
         background: rgba(1, 9, 26, 0.95) !important;
-        color: white !important;
         border: 1px solid var(--border-default) !important;
         border-radius: 8px !important;
     }
-
+    
     .gradio-dropdown option,
     .model-dropdown option {
         background: rgba(1, 9, 26, 0.95) !important;
-        color: white !important;
     }
 
     /* Force dropdown text color */
     /* .gradio-dropdown *, .model-dropdown * {
-        color: white !important;
+        color: var(--text-primary) !important;
     } */
 
     /* Gradio 5.x compatible dropdown styling */
@@ -475,22 +511,31 @@ def get_leaderboard_css():
     .gradio-container [data-testid="dropdown"],
     .gradio-container select {
         background-color: rgba(1, 9, 26, 0.95) !important;
-        color: white !important;
         border: 1px solid rgba(245, 246, 247, 0.12) !important;
     }
-
+    
     .gradio-container .gradio-dropdown option,
     .gradio-container select option {
         background-color: rgba(1, 9, 26, 0.95) !important;
-        color: white !important;
     }
-
+    
     /* Target the actual visible text in dropdown */
     .gradio-container [role="combobox"],
     .gradio-container .gradio-dropdown .wrap > div {
-        color: white !important;
         background-color: rgba(1, 9, 26, 0.95) !important;
     }
 
+    html.light .model-dropdown .gradio-dropdown,
+    html.light .model-dropdown [role="combobox"],
+    html.light .model-dropdown button,
+    html.light .gradio-container [data-testid="dropdown"],
+    html.light .gradio-container select,
+    html.light .gradio-container [role="combobox"],
+    html.light .gradio-container .gradio-dropdown .wrap > div {
+        background-color: rgba(255, 255, 255, 0.95) !important;
+        border-color: rgba(15, 23, 42, 0.12) !important;
+        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
+    }
+
     </style>
     """

tabs/leaderboard_v1_en.py

@@ -224,36 +224,36 @@ def create_leaderboard_v2_tab():
     # Level metadata for the 7-stage task framework
     level_details = {
         "ALL": {
-            "title": "<span style='font-family: \"Gowun Dodum\", sans-serif !important;'>ALL · All Tasks</span>",
-            "description": "<span style='font-family: \"Nanum Gothic\", sans-serif !important;'>See average performance across all seven tasks and use it as a baseline for per-level comparison.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>ALL · All Tasks</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>First, observe the overall average performance across all seven tasks. This average should then be utilized as a baseline to conduct a more detailed per-level comparison.</span>"
         },
         "L1": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L1 · Single Tool Call</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>Evaluates single tool invocation capability and basic command execution accuracy.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L1 · Single Tool Call</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>Evaluates single tool invocation capability and basic command execution accuracy.</span>"
         },
         "L2": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L2 · Tool Selection</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>Measures the ability to choose the right tool and invoke it with appropriate parameters.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L2 · Tool Selection</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>Measures the ability to choose the right tool and invoke it with appropriate parameters.</span>"
         },
         "L3": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L3 · Sequential Tool Reasoning</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>Validates multi-step sequential reasoning for solving tasks.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L3 · Sequential Tool Reasoning</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>Validates multi-step sequential reasoning for solving tasks.</span>"
         },
         "L4": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L4 · Parallel Tool Reasoning</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>Evaluates the ability to integrate and summarize information from multiple sources in parallel.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L4 · Parallel Tool Reasoning</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>Evaluates the ability to integrate and summarize information from multiple sources in parallel.</span>"
         },
         "L5": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L5 · Error Handling & Robustness</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>Checks awareness of unexpected failures and the strategies used to recover.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L5 · Error Handling & Robustness</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>Checks awareness of unexpected failures and the strategies used to recover.</span>"
         },
         "L6": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L6 · Efficient Tool Utilization</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>Examines operational efficiency in achieving goals with minimal calls and cost.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L6 · Efficient Tool Utilization</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>Examines operational efficiency in achieving goals with minimal calls and cost.</span>"
         },
         "L7": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L7 · Long-Context Memory</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>Analyzes the ability to retain and leverage long conversational context.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L7 · Long-Context Memory</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>Analyzes the ability to retain and leverage long conversational context.</span>"
         }
     }
     default_level = "ALL"
@@ -291,7 +291,7 @@ def create_leaderboard_v2_tab():
                 border-collapse: collapse;
                 font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
                 background: var(--bg-card);
-                color: white;
+                color: #FFFFFF;
             }
             
             .v2-styled-table thead {
@@ -305,7 +305,7 @@ def create_leaderboard_v2_tab():
                 padding: 14px 12px;
                 text-align: left;
                 font-weight: 600;
-                color: white;
+                color: #FFFFFF;
                 border-bottom: 2px solid var(--accent-primary);
                 font-size: 13px;
                 text-transform: uppercase;
@@ -319,7 +319,7 @@ def create_leaderboard_v2_tab():
             .v2-styled-table td {
                 padding: 12px;
                 border-bottom: 1px solid var(--border-subtle);
-                color: white;
+                color: #FFFFFF;
                 transition: all 0.2s ease;
             }
             
@@ -339,30 +339,30 @@ def create_leaderboard_v2_tab():
             
             .model-name {
                 font-weight: 500;
-                color: white;
+                color: #FFFFFF;
                 transition: color 0.2s ease;
             }
             
             /* Keep model name color consistent on hover to emphasize row highlight */
             .v2-styled-table tr:hover .model-name {
-                color: white;
+                color: #FFFFFF;
             }
             
             .numeric-cell {
                 font-family: 'Geist Mono', monospace;
                 font-size: 13px;
                 text-align: center;
-                color: white;
+                color: #FFFFFF;
             }
             
             .highlight-header {
                 background: rgba(255, 210, 30, 0.14);
-                color: white;
+                color: #FFFFFF;
             }
             
             .highlight-cell {
                 background: rgba(255, 210, 30, 0.08);
-                color: white;
+                color: #FFFFFF;
                 font-weight: 600;
             }
         </style>
@@ -460,8 +460,8 @@ def create_leaderboard_v2_tab():
         return f"""
         <div class="domain-selector-container leaderboard-intro">
             <div class="domain-header">
-                <h2 class="domain-title" style="color: white;">Agent Leaderboard · {level_title}</h2>
-                <p class="domain-subtitle" style="color: white;">{level_description}</p>
+                <h2 class="domain-title" >Agent Leaderboard · {level_title}</h2>
+                <p class="domain-subtitle" >{level_description}</p>
             </div>
             <div class="dataframe-container">
         """
@@ -511,6 +511,14 @@ def create_leaderboard_v2_tab():
     # Load initial data
     initial_table = filter_and_sort_data(default_level, "All", "Overall Success", "Descending")
     initial_df = load_leaderboard_data()  # Load raw data for model selector
+    if not initial_df.empty:
+        overall_success_numeric = pd.to_numeric(initial_df.get('Overall Success'), errors='coerce')
+        if overall_success_numeric.notna().any():
+            initial_df = initial_df.assign(**{'Overall Success': overall_success_numeric}).sort_values(
+                'Overall Success', ascending=False, na_position='last'
+            )
+        else:
+            initial_df = initial_df.sort_values('Model')
     initial_selected_models = initial_df['Model'].tolist()[:5] if len(initial_df) > 0 else []
     initial_heatmap_models = initial_df['Model'].tolist()[:12] if len(initial_df) > 0 else []
     initial_heatmap = create_performance_heatmap(initial_df, initial_heatmap_models)
@@ -601,7 +609,7 @@ def create_leaderboard_v2_tab():
         border-collapse: collapse;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
         background: var(--bg-card);
-        color: var(--text-primary);
+        color: #FFFFFF;
     }
     
     .v2-styled-table thead {
@@ -615,7 +623,7 @@ def create_leaderboard_v2_tab():
         padding: 14px 12px;
         text-align: left;
         font-weight: 600;
-        color: var(--text-primary);
+        color: #FFFFFF;
         border-bottom: 2px solid var(--accent-primary);
         font-size: 14px;
         text-transform: uppercase;
@@ -626,7 +634,7 @@ def create_leaderboard_v2_tab():
     .v2-styled-table td {
         padding: 12px;
         border-bottom: 1px solid var(--border-subtle);
-        color: var(--text-primary);
+        color: #FFFFFF;
         font-size: 14px;
         transition: all 0.2s ease;
     }
@@ -792,25 +800,35 @@ def create_leaderboard_v2_tab():
         filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
     }
     
-    #hero-banner {
-        width: 100vw !important;
-        margin: 0 calc(-50vw + 50%) 20px calc(-50vw + 50%) !important;
+    .hero-banner-wrapper {
+        position: relative;
+        width: 100vw;
+        margin: 0 calc(-50vw + 50%) 20px calc(-50vw + 50%);
         border-radius: 0 !important;
         overflow: hidden !important;
         box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
-        position: relative !important;
-        left: 50% !important;
-        right: 50% !important;
-        margin-left: -50vw !important;
-        margin-right: -50vw !important;
-        max-width: none !important;
     }
-    
+
+    .hero-banner-wrapper::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: #01091A;
+        z-index: 0;
+    }
+
+    #hero-banner {
+        position: relative;
+        width: 100% !important;
+        height: auto !important;
+        z-index: 1;
+    }
+
     #hero-banner img {
-        width: 100%;
-        height: auto;
-        display: block;
-        object-fit: cover;
+        width: 100% !important;
+        height: auto !important;
+        display: block !important;
+        object-fit: cover !important;
     }
     
     .hero-title {
@@ -821,13 +839,13 @@ def create_leaderboard_v2_tab():
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         margin-bottom: 1rem;
-        font-family: 'Do Hyeon', sans-serif !important;
+        font-family: 'Nanum Gothic', sans-serif !important;
     }
     
     .hero-subtitle {
         color: var(--text-secondary);
         font-size: 3rem;
-        font-family: 'Do Hyeon', sans-serif !important;
+        font-family: 'Nanum Gothic', sans-serif !important;
         margin-top: 0;
     }
     
@@ -849,7 +867,7 @@ def create_leaderboard_v2_tab():
         background: rgba(245, 246, 247, 0.06) !important;
         border: 1px solid var(--border-subtle) !important;
         border-radius: 999px !important;
-        color: var(--text-primary) !important;
+        color: #FFFFFF !important;
         text-decoration: none !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         font-weight: 600 !important;
@@ -908,10 +926,10 @@ def create_leaderboard_v2_tab():
     .section-title {
         font-size: 3.75rem; 
         font-weight: 700;
-        color: var(--text-primary);
+        color: #FFFFFF;
         margin-bottom: 12px;
         text-align: center !important;
-        font-family: 'Gowun Dodum', sans-serif !important;
+        font-family: 'Nanum Gothic', sans-serif !important;
     }
     
     .section-lead, .section-subtitle {
@@ -943,7 +961,7 @@ def create_leaderboard_v2_tab():
     
     .phase-card h3 {
         font-size: 1.44rem !important;
-        color: var(--text-primary);
+        color: #FFFFFF;
         margin-bottom: 20px;
         font-weight: 700;
         font-family: 'Nanum Gothic', sans-serif !important;
@@ -976,7 +994,7 @@ def create_leaderboard_v2_tab():
         position: relative;
         font-size: 1.2rem !important;
         font-weight: 700;
-        color: white !important;
+        color: #FFFFFF !important;
         font-family: 'Nanum Gothic', sans-serif !important;
     }
     
@@ -1054,7 +1072,7 @@ def create_leaderboard_v2_tab():
     .criteria-card h3 {
         font-size: 1.25rem;
         font-weight: 700;
-        color: var(--text-primary);
+        color: #FFFFFF;
         margin: 0;
     }
     
@@ -1110,6 +1128,7 @@ def create_leaderboard_v2_tab():
     </style>
     """)
 
+    gr.HTML("<div class='hero-banner-wrapper'>")
     gr.Image(
         value="banner_wide.png",
         show_label=False,
@@ -1117,6 +1136,7 @@ def create_leaderboard_v2_tab():
         type="filepath",
         elem_id="hero-banner"
     )
+    gr.HTML("</div>")
     
     gr.HTML("""
     <div style="text-align: center; padding: 20px 0;">
@@ -1129,21 +1149,21 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="hero-actions">
         <a href="https://hugging-face-krew.github.io/" target="_blank" rel="noopener noreferrer" class="hero-action-button">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"/>
                 <line x1="8" y1="12" x2="16" y2="12"/>
             </svg>
             <span>Blog</span>
         </a>
         <a href="https://github.com/Hugging-Face-KREW/Ko-AgentBench" target="_blank" rel="noopener noreferrer" class="hero-action-button">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M9 19c-5 1.5-5-2.5-7-3"/>
                 <path d="M20 21v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
             </svg>
             <span>GitHub</span>
         </a>
         <a href="https://huggingface.co/datasets/huggingface-KREW/Ko-AgentBench" target="_blank" rel="noopener noreferrer" class="hero-action-button">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                 <polyline points="7 10 12 15 17 10"/>
                 <line x1="12" y1="15" x2="12" y2="3"/>
@@ -1151,7 +1171,7 @@ def create_leaderboard_v2_tab():
             <span>Dataset</span>
         </a>
         <a href="https://github.com/Hugging-Face-KREW/Ko-AgentBench/blob/main/evaluate_model_run.py#L55" target="_blank" rel="noopener noreferrer" class="hero-action-button">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M3 3v18h18"/>
                 <path d="M7 17v-6"/>
                 <path d="M12 17V7"/>
@@ -1166,7 +1186,7 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="dashboard-section">
         <div class="section-header">
-            <h2 class="section-title" style="font-family: 'Gowun Dodum', sans-serif; font-size: 2.5rem;">7-Level Task Design</h2>
+            <h2 class="section-title" style="font-family: 'Nanum Gothic', sans-serif; font-size: 2.5rem;">7-Level Task Design</h2>
         </div>
         <p class="section-lead" style="text-align: center; margin: 0 auto 24px auto; max-width: 720px; line-height: 1.7; word-break: keep-all;">We analyzed agent capabilities across seven stages—from simple tool calls to long-context retention and robustness.</p>
         <div class="phase-grid">
@@ -1176,11 +1196,11 @@ def create_leaderboard_v2_tab():
                     <span style="color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important; font-weight: 700 !important;">80%</span>
                 </div>
                 <ul class="phase-list">
-                    <li style="color: white;">L1: Single Tool Call</li>
-                    <li style="color: white;">L2: Tool Selection</li>
-                    <li style="color: white;">L3: Sequential Tool Reasoning</li>
-                    <li style="color: white;">L4: Parallel Tool Reasoning</li>
-                    <li style="color: white;">L5: Error Handling & Robustness</li>
+                    <li style="color: #FFFFFF;">L1: Single Tool Call</li>
+                    <li style="color: #FFFFFF;">L2: Tool Selection</li>
+                    <li style="color: #FFFFFF;">L3: Sequential Tool Reasoning</li>
+                    <li style="color: #FFFFFF;">L4: Parallel Tool Reasoning</li>
+                    <li style="color: #FFFFFF;">L5: Error Handling & Robustness</li>
                 </ul>
             </div>
             <div class="phase-card">
@@ -1189,8 +1209,8 @@ def create_leaderboard_v2_tab():
                     <span style="color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important; font-weight: 700 !important;">20%</span>
                 </div>
                 <ul class="phase-list">
-                    <li style="color: white;">L6: Efficient Tool Utilization</li>
-                    <li style="color: white;">L7: Long-Context Memory</li>
+                    <li style="color: #FFFFFF;">L6: Efficient Tool Utilization</li>
+                    <li style="color: #FFFFFF;">L7: Long-Context Memory</li>
                 </ul>
             </div>
         </div>
@@ -1204,7 +1224,7 @@ def create_leaderboard_v2_tab():
             <h2 class="section-title" style="font-size: 2.0rem;">High-quality scenario design tailored to 18 Korea-specific APIs and real-world use cases.</h2>
         </div>
         <div class="scenario-body">
-            <p>We built realistic scenarios—such as appointment booking and blog review search—by integrating APIs widely used in Korea including Naver Maps, Kakao services, and local websites.</p>
+            <p style="color: var(--text-primary);">We built realistic scenarios—such as appointment booking and blog review search—by integrating APIs widely used in Korea including Naver Maps, Kakao services, and local websites.</p>
         </div>
         
     </div>
@@ -1357,7 +1377,7 @@ def create_leaderboard_v2_tab():
         filter: drop-shadow(0 0 2px rgba(255, 210, 30, 0.06));
         letter-spacing: 0.02em;
         animation: title-shimmer 1.25s ease-in-out infinite;
-        font-family: 'Gowun Dodum', sans-serif !important;
+        font-family: 'Nanum Gothic', sans-serif !important;
     }
 
     @keyframes title-shimmer {
@@ -1497,7 +1517,7 @@ def create_leaderboard_v2_tab():
     .filter-group .gr-input-label {
         font-size: 1rem !important;
         font-weight: 600 !important;
-        color: var(--text-primary) !important;
+        color: #FFFFFF !important;
         text-align: center !important;
         margin-bottom: 12px !important;
     }
@@ -1505,7 +1525,7 @@ def create_leaderboard_v2_tab():
     .filter-group-label {
         font-size: 1rem !important;
         font-weight: 600 !important;
-        color: var(--text-primary) !important;
+        color: #FFFFFF !important;
         text-align: left !important;
         margin: 0 !important;
         font-family: 'Geist', sans-serif !important;
@@ -1536,7 +1556,7 @@ def create_leaderboard_v2_tab():
         text-align: center !important;
         position: relative !important;
         overflow: hidden !important;
-        color: var(--text-primary) !important;
+        color: #FFFFFF !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         font-weight: 600 !important;
         font-size: 0.95rem !important;
@@ -1649,7 +1669,7 @@ def create_leaderboard_v2_tab():
         border: 1px solid #333333 !important;
         border-radius: 999px !important;
         padding: 12px 24px !important;
-        color: #ffffff !important;
+        color: #FFFFFF !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         font-weight: 600 !important;
         font-size: 1rem !important;
@@ -1680,7 +1700,7 @@ def create_leaderboard_v2_tab():
         background: #000000 !important;
         border: 1px solid #333333 !important;
         border-radius: 999px !important;
-        color: #ffffff !important;
+        color: #FFFFFF !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         font-weight: 600 !important;
         font-size: 0.95rem !important;
@@ -1707,7 +1727,7 @@ def create_leaderboard_v2_tab():
     .model-dropdown .tag {
         background: rgba(255, 210, 30, 0.18) !important;
         border: 1px solid rgba(255, 210, 30, 0.35) !important;
-        color: var(--text-primary) !important;
+        color: #FFFFFF !important;
         border-radius: 999px !important;
         padding: 4px 10px !important;
         font-size: 0.85rem !important;
@@ -1782,7 +1802,7 @@ def create_leaderboard_v2_tab():
         font-size: 1.5rem;
         margin-bottom: 4px;
         display: block;
-        filter: drop-shadow(0 0 10px currentColor);
+        filter: drop-shadow(0 0 10px white);
     }
     
     .domain-name {
@@ -1797,7 +1817,7 @@ def create_leaderboard_v2_tab():
         top: 8px;
         right: 8px;
         background: var(--accent-primary);
-        color: white;
+        color: #FFFFFF;
         font-size: 0.75rem;
         padding: 2px 8px;
         border-radius: 12px;
@@ -1888,7 +1908,7 @@ def create_leaderboard_v2_tab():
         font-size: 0.85rem !important;
         margin-bottom: 8px !important;
         font-weight: 600 !important;
-        color: var(--text-primary) !important;
+        color: #FFFFFF !important;
         display: block !important;
     }
     
@@ -1921,7 +1941,7 @@ def create_leaderboard_v2_tab():
     .compact-radio .wrap > label:has(input[type="radio"]:checked) {
         background: transparent !important;
         border-color: var(--accent-primary) !important;
-        color: var(--text-primary) !important;
+        color: #FFFFFF !important;
         font-weight: 600 !important;
     }
     
@@ -1942,7 +1962,7 @@ def create_leaderboard_v2_tab():
     .domain-radio label[aria-checked="true"] {
         background: transparent !important;
         border-color: var(--accent-primary) !important;
-        color: var(--text-primary) !important;
+        color: #FFFFFF !important;
         font-weight: 600 !important;
     }
     
@@ -2031,7 +2051,7 @@ def create_leaderboard_v2_tab():
         border: 1px solid var(--border-subtle) !important;
         border-radius: 20px !important;
         font-size: 0.85rem !important;
-        color: var(--text-primary) !important;
+        color: #FFFFFF !important;
         transition: all 0.2s ease !important;
         cursor: pointer !important;
     }
@@ -2045,7 +2065,7 @@ def create_leaderboard_v2_tab():
     .inline-radio label[aria-checked="true"] {
         background: rgba(255, 210, 30, 0.2) !important;
         border-color: var(--accent-primary) !important;
-        color: white !important;
+        color: #FFFFFF !important;
         font-weight: 600 !important;
     }
     </style>
@@ -2058,7 +2078,7 @@ def create_leaderboard_v2_tab():
     leaderboard_title = gr.HTML(update_leaderboard_title(default_level))
     
     # Integrated controls within leaderboard section - stacked vertically
-    gr.HTML("<p style='color: white; margin: 5px 0 5px 0; font-size: 1.2rem;'>Select Task Level</p>")
+    gr.HTML("<p style='color: var(--text-primary); margin: 5px 0 5px 0; font-size: 1.2rem;'>Select Task Level</p>")
     domain_filter = gr.Radio(
         choices=level_options,
         value=default_level,
@@ -2068,10 +2088,10 @@ def create_leaderboard_v2_tab():
         elem_classes=["domain-radio", "inline-radio"]
     )
 
-    gr.HTML("<p style='color: white; margin: 5px 0 0px 0; font-size: 1.2rem;'>🔍 Filters & Sorting</p>")
+    gr.HTML("<p style='color: var(--text-primary); margin: 5px 0 0px 0; font-size: 1.2rem;'>🔍 Filters & Sorting</p>")
     with gr.Row():
         with gr.Column(scale=1):
-            gr.HTML("<span style='color: white; font-size: 1.2rem; margin-bottom: 5px; display: block;'>Model Access</span>")
+            gr.HTML("<span style='color: var(--text-primary); font-size: 1.2rem; margin-bottom: 5px; display: block;'>Model Access</span>")
             model_type_filter = gr.Radio(
                 choices=["All", "OSS", "API"],
                 value="All",
@@ -2080,7 +2100,7 @@ def create_leaderboard_v2_tab():
                 container=False
             )
         with gr.Column(scale=1):
-            gr.HTML("<span style='color: white; font-size: 1.2rem; margin-bottom: 5px; display: block;'>Sort Order</span>")
+            gr.HTML("<span style='color: var(--text-primary);>Sort Order</span>")
             sort_order = gr.Radio(
                 choices=["Descending", "Ascending"],
                 value="Descending",
@@ -2095,12 +2115,12 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container domain-performance-container">
         <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">Core Capability Radar</h2>
-            <p class="domain-subtitle" style="color: white;">Track six essential axes: success, execution, reasoning, robustness, efficiency, and call validity.</p>
+            <h2 class="domain-title" >Core Capability Radar</h2>
+            <p class="domain-subtitle" style="color: var(--text-primary);">Track six essential axes: <br>success, execution, reasoning, robustness, efficiency, and call validity.</p>
         </div>
     """)
 
-    gr.HTML("<p style='color: white; margin: 10px 0 0 0; font-size: 1.2rem; font-family: \"Nanum Gothic\", sans-serif;'>Select models to compare (up to 5).</p>")
+    gr.HTML("<p >Select models to compare (up to 5).</p>")
     # gr.HTML("<p style='color: #b0b0b0; margin: 0 0 10px 0; font-size: 0.9rem;'>You can select up to five models.</p>")
     model_selector = gr.Dropdown(
         choices=initial_df['Model'].tolist()[:10],
@@ -2278,8 +2298,8 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container performance-card-container">
         <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">Model Performance Card</h2>
-            <p class="domain-subtitle" style="color: white;">
+            <h2 class="domain-title" >Model Performance Card</h2>
+            <p class="domain-subtitle" style="color: var(--text-primary);">
                 Explore detailed performance cards that visualize six core metrics plus overall SR across L1–L7 levels.
             </p>
             <p class="domain-note" style="color: #bdbdbd; font-size: 0.85em; margin-top: 4px;">
@@ -2292,7 +2312,7 @@ def create_leaderboard_v2_tab():
    
     with gr.Column(elem_classes=["domain-selector-container", "model-selector-container"], elem_id="model-selector-box"):
         gr.HTML("""
-        <p class="domain-subtitle" style="color: white;">Choose a model to generate its analysis card.</p>     
+        <p class="domain-subtitle" style="color: var(--text-primary);">Choose a model to generate its analysis card.</p>     
 
         """)
         card_model_selector = gr.Dropdown(
@@ -2329,15 +2349,11 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container domain-performance-container level-metrics-wrapper">
         <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">Level-specific Metrics</h2>
-            <p class="domain-subtitle" style="color: white;">Compare model scores with each Ko-AgentBench level's dedicated metrics for deeper insights.</p>
+            <h2 class="domain-title" >Level-specific Metrics</h2>
+            <p class="domain-subtitle" style="color: var(--text-primary);">Compare model scores with each Ko-AgentBench level's dedicated metrics for deeper insights.</p>
         </div>
     """)
     
-    gr.HTML("""
-    <p style="color: white; text-align: center; margin: 0 0 20px 0; font-size: 1.2rem; font-family: \'Nanum Gothic\', sans-serif;">Select a level and up to five models to explore detailed metrics.</p>
-    """)
-    
     with gr.Column(elem_classes=["domain-selector-container", "level-selector-container"], elem_id="level-selector-box"):
         level_metric_selector = gr.Dropdown(
             choices=level_ids,
@@ -2373,8 +2389,8 @@ def create_leaderboard_v2_tab():
     # gr.HTML("""
     # <div class="domain-selector-container domain-performance-container heatmap-wrapper">
     #     <div class="domain-header">
-    #         <h2 class="domain-title" style="color: white;">Comprehensive Performance Heatmap</h2>
-    #         <p class="domain-subtitle" style="color: white;">See each model's L1–L7 SR scores at a glance.</p>
+    #         <h2 class="domain-title" >Comprehensive Performance Heatmap</h2>
+    #         <p class="domain-subtitle" >See each model's L1–L7 SR scores at a glance.</p>
     #     </div>
     #     <div class="chart-container heatmap-chart-container">
     # """)
@@ -2665,7 +2681,7 @@ def create_leaderboard_v2_tab():
         font-size: 1.9rem;
         font-weight: 800;
         letter-spacing: 0.01em;
-        color: var(--text-primary);
+        color: #FFFFFF;
     }
     
     .meta-line {
@@ -2677,7 +2693,7 @@ def create_leaderboard_v2_tab():
     }
     
     .meta-line span {
-        color: var(--text-primary);
+        color: #FFFFFF;
         font-weight: 600;
     }
     
@@ -2717,7 +2733,7 @@ def create_leaderboard_v2_tab():
     .rank-value {
         font-size: 2.4rem;
         font-weight: 800;
-        color: var(--text-primary);
+        color: #FFFFFF;
         letter-spacing: 0.04em;
     }
     
@@ -2822,7 +2838,7 @@ def create_leaderboard_v2_tab():
         border: 1px solid #333333 !important;
         border-radius: 999px !important;
         padding: 12px 20px !important;
-        color: #ffffff !important;
+        color: #FFFFFF !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         font-weight: 600 !important;
         font-size: 0.95rem !important;
@@ -2851,7 +2867,7 @@ def create_leaderboard_v2_tab():
     .level-model-dropdown button {
         background: #000000 !important;
         border: 1px solid #333333 !important;
-        color: #ffffff !important;
+        color: #FFFFFF !important;
     }
     
     .radar-placeholder {
@@ -2912,7 +2928,7 @@ def create_leaderboard_v2_tab():
     .core-metric-card .metric-value {
         font-size: 1.8rem;
         font-weight: 700;
-        color: var(--text-primary);
+        color: #FFFFFF;
         font-family: 'Geist Mono', monospace;
     }
     
@@ -2945,7 +2961,7 @@ def create_leaderboard_v2_tab():
     .level-tile-score {
         font-size: 1.25rem;
         font-weight: 700;
-        color: var(--text-primary);
+        color: #FFFFFF;
         font-family: 'Geist Mono', monospace;
     }
     @media (max-width: 980px) {
@@ -3029,20 +3045,20 @@ def create_leaderboard_v2_tab():
     h2.section-title,
     .dashboard-section .section-title,
     .section-header .section-title {
-        font-family: "Gowun Dodum", sans-serif !important;
+        font-family: "Nanum Gothic", sans-serif !important;
     }
     
     .domain-title,
     h2.domain-title,
     .domain-header .domain-title {
-        font-family: "Gowun Dodum", sans-serif !important;
+        font-family: "Nanum Gothic", sans-serif !important;
     }
     
     .hero-title,
     .hero-subtitle,
     h1.hero-title,
     p.hero-subtitle {
-        font-family: "Do Hyeon", sans-serif !important; 
+        font-family: "Nanum Gothic", sans-serif !important; 
         font-size: 2rem; !important;
     }
     
@@ -3236,8 +3252,8 @@ def create_domain_radar_chart(df, selected_models=None, max_models=5):
     palette = [
         {'fill': 'rgba(255, 210, 30, 0.25)', 'line': '#ffd21e'},
         {'fill': 'rgba(255, 138, 60, 0.22)', 'line': '#FF8A3C'},
-        {'fill': 'rgba(249, 112, 185, 0.22)', 'line': '#F970B9'},
-        {'fill': 'rgba(139, 92, 246, 0.20)', 'line': '#8B5CF6'},
+        {'fill': 'rgba(161, 98, 7, 0.22)', 'line': '#A16207'},
+        {'fill': 'rgba(220, 38, 38, 0.20)', 'line': '#DC2626'},
         {'fill': 'rgba(248, 250, 252, 0.20)', 'line': '#F8FAFC'},
     ]
     
@@ -3362,16 +3378,7 @@ def create_domain_radar_chart(df, selected_models=None, max_models=5):
         width=900,
         margin=dict(t=30, b=50, l=10, r=10),
         autosize=True,
-        annotations=[
-            dict(
-                text="Galileo Agent Leaderboard",
-                xref="paper", yref="paper",
-                x=0.98, y=0.02,
-                xanchor='right', yanchor='bottom',
-                font=dict(size=10, color='#64748B'),
-                showarrow=False
-            )
-        ]
+        annotations=[]
     )
     
     return fig
@@ -3630,8 +3637,8 @@ def create_level_metric_chart(df, level, selected_models=None, max_models=5):
     model_palette = [
         '#ffd21e',
         '#FF8A3C',
-        '#F970B9',
-        '#8B5CF6',
+        '#A16207',
+        '#DC2626',
         '#F8FAFC',
         '#38BDF8',
     ]

tabs/leaderboard_v1_kr.py

@@ -224,36 +224,36 @@ def create_leaderboard_v2_tab():
     # Level metadata for the 7-stage task framework
     level_details = {
         "ALL": {
-            "title": "<span style='font-family: \"Gowun Dodum\", sans-serif !important;'>ALL · 전체 태스크</span>",
-            "description": "<span style='font-family: \"Nanum Gothic\", sans-serif !important;'>7개의 태스크 전반의 평균 성능을 한눈에 살펴보고 각 레벨 비교를 위한 기준점을 제공합니다.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>ALL · 전체 태스크</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>7개의 태스크 전반의 평균 성능을 한눈에 살펴보고 각 레벨 비교를 위한 기준점을 제공합니다.</span>"
         },
         "L1": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L1 · 단일 도구 호출</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>단일 도구 호출 능력과 기본적인 명령 수행 정확도를 평가합니다.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L1 · 단일 도구 호출</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>단일 도구 호출 능력과 기본적인 명령 수행 정확도를 평가합니다.</span>"
         },
         "L2": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L2 · 도구 선택</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>요구 사항에 맞는 도구를 고르고 적절한 파라미터로 호출하는 능력을 측정합니다.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L2 · 도구 선택</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>요구 사항에 맞는 도구를 고르고 적절한 파라미터로 호출하는 능력을 측정합니다.</span>"
         },
         "L3": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L3 · 도구 순차 추론</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>복수 단계의 순차적 reasoning을 통해 문제를 해결하는 과정을 검증합니다.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L3 · 도구 순차 추론</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>복수 단계의 순차적 reasoning을 통해 문제를 해결하는 과정을 검증합니다.</span>"
         },
         "L4": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L4 · 도구 병렬 추론</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>여러 소스의 정보를 병렬적으로 통합하고 요약하는 능력을 평가합니다.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L4 · 도구 병렬 추론</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>여러 소스의 정보를 병렬적으로 통합하고 요약하는 능력을 평가합니다.</span>"
         },
         "L5": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L5 · 오류 처리와 강건성</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>예상치 못한 오류나 실패 상황에 대한 인지와 대응 전략을 확인합니다.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L5 · 오류 처리와 강건성</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>예상치 못한 오류나 실패 상황에 대한 인지와 대응 전략을 확인합니다.</span>"
         },
         "L6": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L6 · 효율적인 도구 활용</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>최소한의 호출과 비용으로 목표를 달성하는 운영 효���을 살펴봅니다.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L6 · 효율적인 도구 활용</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>최소한의 호출과 비용으로 목표를 달성하는 운영 효율을 살펴봅니다.</span>"
         },
         "L7": {
-            "title": "<span style='color: white; font-family: \"Gowun Dodum\", sans-serif !important;'>L7 · 장기 컨텍스트 기억</span>",
-            "description": "<span style='color: white; font-family: \"Nanum Gothic\", sans-serif !important;'>장기 대화 맥락을 유지하고 적절히 활용하는 능력을 집중적으로 분석합니다.</span>"
+            "title": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>L7 · 장기 컨텍스트 기억</span>",
+            "description": "<span style='color: var(--text-primary); font-family: \"Nanum Gothic\", sans-serif !important;'>장기 대화 맥락을 유지하고 적절히 활용하는 능력을 집중적으로 분석합니다.</span>"
         }
     }
     default_level = "ALL"
@@ -291,7 +291,7 @@ def create_leaderboard_v2_tab():
                 border-collapse: collapse;
                 font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
                 background: var(--bg-card);
-                color: white;
+                color: var(--text-primary);
             }
             
             .v2-styled-table thead {
@@ -305,7 +305,7 @@ def create_leaderboard_v2_tab():
                 padding: 14px 12px;
                 text-align: left;
                 font-weight: 600;
-                color: white;
+                color: var(--text-primary);
                 border-bottom: 2px solid var(--accent-primary);
                 font-size: 13px;
                 text-transform: uppercase;
@@ -319,7 +319,7 @@ def create_leaderboard_v2_tab():
             .v2-styled-table td {
                 padding: 12px;
                 border-bottom: 1px solid var(--border-subtle);
-                color: white;
+                color: var(--text-primary);
                 transition: all 0.2s ease;
             }
             
@@ -339,30 +339,30 @@ def create_leaderboard_v2_tab():
             
             .model-name {
                 font-weight: 500;
-                color: white;
+                color: var(--text-primary);
                 transition: color 0.2s ease;
             }
             
             /* Keep model name color consistent on hover to emphasize row highlight */
             .v2-styled-table tr:hover .model-name {
-                color: white;
+                color: var(--text-primary);
             }
             
             .numeric-cell {
                 font-family: 'Geist Mono', monospace;
                 font-size: 13px;
                 text-align: center;
-                color: white;
+                color: var(--text-primary);
             }
             
             .highlight-header {
                 background: rgba(255, 210, 30, 0.14);
-                color: white;
+                color: var(--text-primary);
             }
             
             .highlight-cell {
                 background: rgba(255, 210, 30, 0.08);
-                color: white;
+                color: var(--text-primary);
                 font-weight: 600;
             }
         </style>
@@ -460,8 +460,8 @@ def create_leaderboard_v2_tab():
         return f"""
         <div class="domain-selector-container leaderboard-intro">
             <div class="domain-header">
-                <h2 class="domain-title" style="color: white;">Agent Leaderboard · {level_title}</h2>
-                <p class="domain-subtitle" style="color: white;">{level_description}</p>
+                <h2 class="domain-title" style="color: var(--text-primary);">Agent Leaderboard · {level_title}</h2>
+                <p class="domain-subtitle" style="color: var(--text-primary);">{level_description}</p>
             </div>
             <div class="dataframe-container">
         """
@@ -511,6 +511,14 @@ def create_leaderboard_v2_tab():
     # Load initial data
     initial_table = filter_and_sort_data(default_level, "All", "Overall Success", "Descending")
     initial_df = load_leaderboard_data()  # Load raw data for model selector
+    if not initial_df.empty:
+        overall_success_numeric = pd.to_numeric(initial_df.get('Overall Success'), errors='coerce')
+        if overall_success_numeric.notna().any():
+            initial_df = initial_df.assign(**{'Overall Success': overall_success_numeric}).sort_values(
+                'Overall Success', ascending=False, na_position='last'
+            )
+        else:
+            initial_df = initial_df.sort_values('Model')
     initial_selected_models = initial_df['Model'].tolist()[:5] if len(initial_df) > 0 else []
     initial_heatmap_models = initial_df['Model'].tolist()[:12] if len(initial_df) > 0 else []
     initial_heatmap = create_performance_heatmap(initial_df, initial_heatmap_models)
@@ -743,7 +751,7 @@ def create_leaderboard_v2_tab():
         display: inline-block !important;
         padding: 14px 28px !important;
         background: #ffd21e !important;
-        color: #FFFFFF !important;
+        color: var(--text-primary) !important;
         text-decoration: none !important;
         border-radius: 16px !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
@@ -777,7 +785,7 @@ def create_leaderboard_v2_tab():
         transform: translateY(-3px) !important;
         box-shadow: 0 12px 32px rgba(255, 210, 30, 0.5), 0 8px 16px rgba(0, 0, 0, 0.4) !important;
         background: #ffd21e !important;
-        color: #FFFFFF !important;
+        color: var(--text-primary) !important;
         text-decoration: none !important;
         text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
     }
@@ -792,25 +800,35 @@ def create_leaderboard_v2_tab():
         filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
     }
     
-    #hero-banner {
-        width: 100vw !important;
-        margin: 0 calc(-50vw + 50%) 20px calc(-50vw + 50%) !important;
+    .hero-banner-wrapper {
+        position: relative;
+        width: 100vw;
+        margin: 0 calc(-50vw + 50%) 20px calc(-50vw + 50%);
         border-radius: 0 !important;
         overflow: hidden !important;
         box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
-        position: relative !important;
-        left: 50% !important;
-        right: 50% !important;
-        margin-left: -50vw !important;
-        margin-right: -50vw !important;
-        max-width: none !important;
     }
-    
+
+    .hero-banner-wrapper::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: #01091A;
+        z-index: 0;
+    }
+
+    #hero-banner {
+        position: relative;
+        width: 100% !important;
+        height: auto !important;
+        z-index: 1;
+    }
+
     #hero-banner img {
-        width: 100%;
-        height: auto;
-        display: block;
-        object-fit: cover;
+        width: 100% !important;
+        height: auto !important;
+        display: block !important;
+        object-fit: cover !important;
     }
     
     .hero-title {
@@ -821,13 +839,13 @@ def create_leaderboard_v2_tab():
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         margin-bottom: 1rem;
-        font-family: 'Do Hyeon', sans-serif !important;
+        font-family: 'Nanum Gothic', sans-serif !important;
     }
     
     .hero-subtitle {
         color: var(--text-secondary);
         font-size: 3rem;
-        font-family: 'Do Hyeon', sans-serif !important;
+        font-family: 'Nanum Gothic', sans-serif !important;
         margin-top: 0;
     }
     
@@ -911,7 +929,7 @@ def create_leaderboard_v2_tab():
         color: var(--text-primary);
         margin-bottom: 12px;
         text-align: center !important;
-        font-family: 'Gowun Dodum', sans-serif !important;
+        font-family: 'Nanum Gothic', sans-serif !important;
     }
     
     .section-lead, .section-subtitle {
@@ -976,19 +994,19 @@ def create_leaderboard_v2_tab():
         position: relative;
         font-size: 1.2rem !important;
         font-weight: 700;
-        color: white !important;
+        color: var(--text-primary) !important;
         font-family: 'Nanum Gothic', sans-serif !important;
     }
     
     /* 추가적인 구체적 선택자 */
     .phase-card .phase-chart span {
-        color: #FFFFFF !important;
+        color: var(--text-primary) !important;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
         font-family: 'Nanum Gothic', sans-serif !important;
     }
     
     .phase-grid .phase-chart span {
-        color: #FFFFFF !important;
+        color: var(--text-primary) !important;
         z-index: 10 !important;
         font-family: 'Nanum Gothic', sans-serif !important;
     }
@@ -1110,6 +1128,7 @@ def create_leaderboard_v2_tab():
     </style>
     """)
 
+    gr.HTML("<div class='hero-banner-wrapper'>")
     gr.Image(
         value="banner_wide.png",
         show_label=False,
@@ -1117,6 +1136,7 @@ def create_leaderboard_v2_tab():
         type="filepath",
         elem_id="hero-banner"
     )
+    gr.HTML("</div>")
     
     gr.HTML("""
     <div style="text-align: center; padding: 20px 0;">
@@ -1129,21 +1149,21 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="hero-actions">
         <a href="https://hugging-face-krew.github.io/" target="_blank" rel="noopener noreferrer" class="hero-action-button">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"/>
                 <line x1="8" y1="12" x2="16" y2="12"/>
             </svg>
             <span>블로그</span>
         </a>
         <a href="https://github.com/Hugging-Face-KREW/Ko-AgentBench" target="_blank" rel="noopener noreferrer" class="hero-action-button">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M9 19c-5 1.5-5-2.5-7-3"/>
                 <path d="M20 21v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
             </svg>
             <span>GitHub</span>
         </a>
         <a href="https://huggingface.co/datasets/huggingface-KREW/Ko-AgentBench" target="_blank" rel="noopener noreferrer" class="hero-action-button">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                 <polyline points="7 10 12 15 17 10"/>
                 <line x1="12" y1="15" x2="12" y2="3"/>
@@ -1151,7 +1171,7 @@ def create_leaderboard_v2_tab():
             <span>데이터셋</span>
         </a>
         <a href="https://github.com/Hugging-Face-KREW/Ko-AgentBench/blob/main/evaluate_model_run.py#L55" target="_blank" rel="noopener noreferrer" class="hero-action-button">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M3 3v18h18"/>
                 <path d="M7 17v-6"/>
                 <path d="M12 17V7"/>
@@ -1166,31 +1186,31 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="dashboard-section">
         <div class="section-header">
-            <h2 class="section-title" style="font-family: 'Gowun Dodum', sans-serif; font-size: 2.5rem;">단계별 태스크 설계</h2>
+            <h2 class="section-title" style="font-family: 'Nanum Gothic', sans-serif; font-size: 2.5rem;">단계별 태스크 설계</h2>
         </div>
         <p class="section-lead" style="text-align: center; margin: 0 auto 24px auto; max-width: 720px; line-height: 1.7; word-break: keep-all;">단순 도구 호출부터 장기적 맥락 능력, 강건성 처리 능력까지 에이전트의 능력을 7단계로 입체적으로 분석하였습니다.</p>
         <div class="phase-grid">
             <div class="phase-card">
                 <h3>단일 턴</h3>
                 <div class="phase-chart" style="--progress:80%;">
-                    <span style="color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important; font-weight: 700 !important;">80%</span>
+                    <span style="color: var(--text-primary) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important; font-weight: 700 !important;">80%</span>
                 </div>
                 <ul class="phase-list">
-                    <li style="color: white;">L1: 단일 도구 호출</li>
-                    <li style="color: white;">L2: 도구 선택</li>
-                    <li style="color: white;">L3: 도구 순차 추론</li>
-                    <li style="color: white;">L4: 도구 병렬 추론</li>
-                    <li style="color: white;">L5: 오류 처리와 강건성</li>
+                    <li style="color: var(--text-primary);">L1: 단일 도구 호출</li>
+                    <li style="color: var(--text-primary);">L2: 도구 선택</li>
+                    <li style="color: var(--text-primary);">L3: 도구 순차 추론</li>
+                    <li style="color: var(--text-primary);">L4: 도구 병렬 추론</li>
+                    <li style="color: var(--text-primary);">L5: 오류 처리와 강건성</li>
                 </ul>
             </div>
             <div class="phase-card">
                 <h3>다중 턴</h3>
                 <div class="phase-chart" style="--progress:20%;">
-                    <span style="color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important; font-weight: 700 !important;">20%</span>
+                    <span style="color: var(--text-primary) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important; font-weight: 700 !important;">20%</span>
                 </div>
                 <ul class="phase-list">
-                    <li style="color: white;">L6: 효율적인 도구 활용</li>
-                    <li style="color: white;">L7: 장기 컨텍스트 기억</li>
+                    <li style="color: var(--text-primary);">L6: 효율적인 도구 활용</li>
+                    <li style="color: var(--text-primary);">L7: 장기 컨텍스트 기억</li>
                 </ul>
             </div>
         </div>
@@ -1204,7 +1224,7 @@ def create_leaderboard_v2_tab():
             <h2 class="section-title" style="font-size: 2.0rem;">18가지 한국형 API 사용 및 실생활 환경에 특화된 고품질 시나리오 구성</h2>
         </div>
         <div class="scenario-body">
-            <p>네이버, 지도, 카카오, 웹사이트 등 한국 실사용 환경 기반의 API를 기반으로<br> 국내 사용자의 일상과 밀접한 '약속 예약', '블로그 후기 검색'과 같은 현실적인 문제 해결 시나리오를 구현했습니다.</p>
+            <p style="color: var(--text-primary);">네이버, 카카오 등 국내 실사용 API를 기반으로, '약속 예약', '블로그 후기 검색'처럼 일상에 유용한 현실적인 문제 해결 시나리오를 구현했습니다.</p>
         </div>
         
     </div>
@@ -1357,7 +1377,7 @@ def create_leaderboard_v2_tab():
         filter: drop-shadow(0 0 2px rgba(255, 210, 30, 0.06));
         letter-spacing: 0.02em;
         animation: title-shimmer 1.25s ease-in-out infinite;
-        font-family: 'Gowun Dodum', sans-serif !important;
+        font-family: 'Nanum Gothic', sans-serif !important;
     }
 
     @keyframes title-shimmer {
@@ -1649,7 +1669,7 @@ def create_leaderboard_v2_tab():
         border: 1px solid #333333 !important;
         border-radius: 999px !important;
         padding: 12px 24px !important;
-        color: #ffffff !important;
+        color: var(--text-primary) !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         font-weight: 600 !important;
         font-size: 1rem !important;
@@ -1680,7 +1700,7 @@ def create_leaderboard_v2_tab():
         background: #000000 !important;
         border: 1px solid #333333 !important;
         border-radius: 999px !important;
-        color: #ffffff !important;
+        color: var(--text-primary) !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         font-weight: 600 !important;
         font-size: 0.95rem !important;
@@ -1735,7 +1755,7 @@ def create_leaderboard_v2_tab():
         background: #ffd21e !important;
         border: 1px solid rgba(255, 210, 30, 0.6) !important;
         border-radius: 999px !important;
-        color: #FFFFFF !important;
+        color: var(--text-primary) !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         font-weight: 600 !important;
         font-size: 0.95rem !important;
@@ -1782,7 +1802,7 @@ def create_leaderboard_v2_tab():
         font-size: 1.5rem;
         margin-bottom: 4px;
         display: block;
-        filter: drop-shadow(0 0 10px currentColor);
+        filter: drop-shadow(0 0 10px white);
     }
     
     .domain-name {
@@ -1797,7 +1817,7 @@ def create_leaderboard_v2_tab():
         top: 8px;
         right: 8px;
         background: var(--accent-primary);
-        color: white;
+        color: var(--text-primary);
         font-size: 0.75rem;
         padding: 2px 8px;
         border-radius: 12px;
@@ -2045,7 +2065,7 @@ def create_leaderboard_v2_tab():
     .inline-radio label[aria-checked="true"] {
         background: rgba(255, 210, 30, 0.2) !important;
         border-color: var(--accent-primary) !important;
-        color: white !important;
+        color: var(--text-primary) !important;
         font-weight: 600 !important;
     }
     </style>
@@ -2058,7 +2078,7 @@ def create_leaderboard_v2_tab():
     leaderboard_title = gr.HTML(update_leaderboard_title(default_level))
     
     # Integrated controls within leaderboard section - stacked vertically
-    gr.HTML("<p style='color: white; margin: 5px 0 5px 0; font-size: 1.2rem;'>태스크 레벨 선택</p>")
+    gr.HTML("<p style='color: var(--text-primary); margin: 5px 0 5px 0; font-size: 1.2rem;'>태스크 레벨 선택</p>")
     domain_filter = gr.Radio(
         choices=level_options,
         value=default_level,
@@ -2068,10 +2088,10 @@ def create_leaderboard_v2_tab():
         elem_classes=["domain-radio", "inline-radio"]
     )
 
-    gr.HTML("<p style='color: white; margin: 5px 0 0px 0; font-size: 1.2rem;'>🔍 필터 및 정렬</p>")
+    gr.HTML("<p style='color: var(--text-primary); margin: 5px 0 0px 0; font-size: 1.2rem;'>🔍 필터 및 정렬</p>")
     with gr.Row():
         with gr.Column(scale=1):
-            gr.HTML("<span style='color: white; font-size: 1.2rem; margin-bottom: 5px; display: block;'>모델 접근</span>")
+            gr.HTML("<span style='color: var(--text-primary); font-size: 1.2rem; margin-bottom: 5px; display: block;'>모델 접근</span>")
             model_type_filter = gr.Radio(
                 choices=["All", "OSS", "API"],
                 value="All",
@@ -2080,7 +2100,7 @@ def create_leaderboard_v2_tab():
                 container=False
             )
         with gr.Column(scale=1):
-            gr.HTML("<span style='color: white; font-size: 1.2rem; margin-bottom: 5px; display: block;'>정렬 순서</span>")
+            gr.HTML("<span style='color: var(--text-primary); font-size: 1.2rem; margin-bottom: 5px; display: block;'>정렬 순서</span>")
             sort_order = gr.Radio(
                 choices=["Descending", "Ascending"],
                 value="Descending",
@@ -2095,12 +2115,12 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container domain-performance-container">
         <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">핵심 역량 레이더</h2>
-            <p class="domain-subtitle" style="color: white;">6가지 필수 핵심 요소(성공, 실행, 추론, 강건성, 효율성, 호출 유효성)를 추적합니다.</p>
+            <h2 class="domain-title" style="color: var(--text-primary);">핵심 역량 레이더</h2>
+            <p class="domain-subtitle" style="color: var(--text-primary);">6가지 필수 핵심 요소(성공, 실행, 추론, 강건성, 효율성, 호출 유효성)를 추적합니다.</p>
         </div>
     """)
 
-    gr.HTML("<p style='color: white; margin: 10px 0 0 0; font-size: 1.2rem; font-family: \"Nanum Gothic\", sans-serif;'>비교할 모델을 선택하세요. 최대 5개까지 가능합니다.</p>")
+    gr.HTML("<p style='color: var(--text-primary); margin: 10px 0 0 0; font-size: 1.2rem; font-family: \"Nanum Gothic\", sans-serif;'>비교할 모델을 선택하세요. 최대 5개까지 가능합니다.</p>")
     # gr.HTML("<p style='color: #b0b0b0; margin: 0 0 10px 0; font-size: 0.9rem;'>모델은 최대 5개까지 선택 가능 합니다.</p>")
     model_selector = gr.Dropdown(
         choices=initial_df['Model'].tolist()[:10],
@@ -2278,8 +2298,8 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container performance-card-container">
         <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">모델 성능 카드</h2>
-            <p class="domain-subtitle" style="color: white;">
+            <h2 class="domain-title" style="color: var(--text-primary);">모델 성능 카드</h2>
+            <p class="domain-subtitle" style="color: var(--text-primary);">
                 모델의 성능 스펙트럼을 6대 핵심 지표와 L1~L7 단계별 종합 성공률(SR)로 시각화한 정밀 분석 카드를 확인해보세요.
             </p>
             <p class="domain-note" style="color: #bdbdbd; font-size: 0.85em; margin-top: 4px;">
@@ -2292,7 +2312,7 @@ def create_leaderboard_v2_tab():
    
     with gr.Column(elem_classes=["domain-selector-container", "model-selector-container"], elem_id="model-selector-box"):
         gr.HTML("""
-        <p class="domain-subtitle" style="color: white;">분석 카드를 생성할 모델을 선택하세요.</p>     
+        <p class="domain-subtitle" style="color: var(--text-primary);">분석 카드를 생성할 모델을 선택하세요.</p>     
 
         """)
         card_model_selector = gr.Dropdown(
@@ -2329,15 +2349,11 @@ def create_leaderboard_v2_tab():
     gr.HTML("""
     <div class="domain-selector-container domain-performance-container level-metrics-wrapper">
         <div class="domain-header">
-            <h2 class="domain-title" style="color: white;">레벨별 상세 지표</h2>
-            <p class="domain-subtitle" style="color: white;">각 Ko-AgentBench 단계별 고유 평가 지표를 통해 모델 점수를 비교하고 더 자세히 살펴보세요.</p>
+            <h2 class="domain-title" style="color: var(--text-primary);">레벨별 상세 지표</h2>
+            <p class="domain-subtitle" style="color: var(--text-primary);">각 Ko-AgentBench 단계별 고유 평가 지표를 통해 모델 점수를 비교하고 더 자세히 살펴보세요.</p>
         </div>
     """)
     
-    gr.HTML("""
-    <p style="color: white; text-align: center; margin: 0 0 20px 0; font-size: 1.2rem; font-family: \'Nanum Gothic\', sans-serif;">태스크 레벨과 모델(최대 5개)을 선택하여 상세 지표를 탐색하세요.</p>
-    """)
-    
     with gr.Column(elem_classes=["domain-selector-container", "level-selector-container"], elem_id="level-selector-box"):
         level_metric_selector = gr.Dropdown(
             choices=level_ids,
@@ -2373,8 +2389,8 @@ def create_leaderboard_v2_tab():
     # gr.HTML("""
     # <div class="domain-selector-container domain-performance-container heatmap-wrapper">
     #     <div class="domain-header">
-    #         <h2 class="domain-title" style="color: white;">종합 성능 히트맵</h2>
-    #         <p class="domain-subtitle" style="color: white;">각 모델의 L1~L7 Ko-AgentBench SR(성공률) 점수를 한눈에 보세요.</p>
+    #         <h2 class="domain-title" style="color: var(--text-primary);">종합 성능 히트맵</h2>
+    #         <p class="domain-subtitle" style="color: var(--text-primary);">각 모델의 L1~L7 Ko-AgentBench SR(성공률) 점수를 한눈에 보세요.</p>
     #     </div>
     #     <div class="chart-container heatmap-chart-container">
     # """)
@@ -2822,7 +2838,7 @@ def create_leaderboard_v2_tab():
         border: 1px solid #333333 !important;
         border-radius: 999px !important;
         padding: 12px 20px !important;
-        color: #ffffff !important;
+        color: var(--text-primary) !important;
         font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
         font-weight: 600 !important;
         font-size: 0.95rem !important;
@@ -2851,7 +2867,7 @@ def create_leaderboard_v2_tab():
     .level-model-dropdown button {
         background: #000000 !important;
         border: 1px solid #333333 !important;
-        color: #ffffff !important;
+        color: var(--text-primary) !important;
     }
     
     .radar-placeholder {
@@ -3029,20 +3045,20 @@ def create_leaderboard_v2_tab():
     h2.section-title,
     .dashboard-section .section-title,
     .section-header .section-title {
-        font-family: "Gowun Dodum", sans-serif !important;
+        font-family: "Nanum Gothic", sans-serif !important;
     }
     
     .domain-title,
     h2.domain-title,
     .domain-header .domain-title {
-        font-family: "Gowun Dodum", sans-serif !important;
+        font-family: "Nanum Gothic", sans-serif !important;
     }
     
     .hero-title,
     .hero-subtitle,
     h1.hero-title,
     p.hero-subtitle {
-        font-family: "Do Hyeon", sans-serif !important; 
+        font-family: "Nanum Gothic", sans-serif !important; 
         font-size: 2rem; !important;
     }
     
@@ -3236,8 +3252,8 @@ def create_domain_radar_chart(df, selected_models=None, max_models=5):
     palette = [
         {'fill': 'rgba(255, 210, 30, 0.25)', 'line': '#ffd21e'},
         {'fill': 'rgba(255, 138, 60, 0.22)', 'line': '#FF8A3C'},
-        {'fill': 'rgba(249, 112, 185, 0.22)', 'line': '#F970B9'},
-        {'fill': 'rgba(139, 92, 246, 0.20)', 'line': '#8B5CF6'},
+        {'fill': 'rgba(161, 98, 7, 0.22)', 'line': '#A16207'},
+        {'fill': 'rgba(220, 38, 38, 0.20)', 'line': '#DC2626'},
         {'fill': 'rgba(248, 250, 252, 0.20)', 'line': '#F8FAFC'},
     ]
     
@@ -3362,16 +3378,7 @@ def create_domain_radar_chart(df, selected_models=None, max_models=5):
         width=900,
         margin=dict(t=30, b=50, l=10, r=10),
         autosize=True,
-        annotations=[
-            dict(
-                text="Galileo Agent Leaderboard",
-                xref="paper", yref="paper",
-                x=0.98, y=0.02,
-                xanchor='right', yanchor='bottom',
-                font=dict(size=10, color='#64748B'),
-                showarrow=False
-            )
-        ]
+        annotations=[]
     )
     
     return fig
@@ -3630,8 +3637,8 @@ def create_level_metric_chart(df, level, selected_models=None, max_models=5):
     model_palette = [
         '#ffd21e',
         '#FF8A3C',
-        '#F970B9',
-        '#8B5CF6',
+        '#A16207',
+        '#DC2626',
         '#F8FAFC',
         '#38BDF8',
     ]

utils.py

@@ -9,8 +9,8 @@ def get_chart_colors():
     #         "grid": (1, 1, 1, 0.1),  # RGBA tuple for grid
     #     }
     return {
-        "Private": "#3F78FA",  # accent-blue light
-        "Open source": "#A13AE2",  # accent-purple light
+        "Private": "#593B1D",  # rich brown for API
+        "Open source": "#FACC15",  # warm amber for OSS
         "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"],
         "text": "#111827",
         "background": "#FFFFFF",
@@ -20,10 +20,12 @@ def get_chart_colors():
 
 def get_rank_badge(rank):
     """Generate HTML for rank badge with appropriate styling"""
+    tag_background = "#593B1D"
+    tag_text_color = "#FFFFFF"
     badge_styles = {
-        1: ("1st", "linear-gradient(145deg, #ffd700, #ffc400)", "#000"),
-        2: ("2nd", "linear-gradient(145deg, #9ca3af, #787C7E)", "#fff"),
-        3: ("3rd", "linear-gradient(145deg, #CD7F32, #b36a1d)", "#fff"),
+        1: ("1st", tag_background, tag_text_color),
+        2: ("2nd", tag_background, tag_text_color),
+        3: ("3rd", tag_background, tag_text_color),
     }
 
     if rank in badge_styles:
@@ -63,24 +65,25 @@ def get_type_badge(model_type):
     """Generate HTML for model type badge"""
     colors = get_chart_colors()
     color_map = {
-        "Open source": colors.get("Open source", "#A13AE2"),
-        "Proprietary": colors.get("Private", "#3F78FA"),
-        "Private": colors.get("Private", "#3F78FA"),
+        "Open source": colors.get("Open source", "#FACC15"),
+        "Proprietary": colors.get("Private", "#593B1D"),
+        "Private": colors.get("Private", "#593B1D"),
     }
     label_map = {
         "Open source": "OSS",
         "Proprietary": "API",
         "Private": "API",
     }
-    bg_color = color_map.get(model_type, "#4F46E5")
+    bg_color = color_map.get(model_type, "#593B1D")
     display_label = label_map.get(model_type, model_type)
+    text_color = "#111827" if display_label == "OSS" else "#FFFFFF"
     return f"""
         <div style="
             display: inline-flex;
             align-items: center;
             padding: 4px 8px;
             background: {bg_color};
-            color: white;
+            color: {text_color};
             border-radius: 4px;
             font-size: 0.85em;
             font-weight: 500;