From c58c1f2106fb985992afe07bcb18fe3f69ea6dea Mon Sep 17 00:00:00 2001
From: ysCha <yscha@interplug.co.kr>
Date: Mon, 29 Sep 2025 11:37:28 +0900
Subject: [PATCH] =?UTF-8?q?[1195]=20DESIGN=20=EB=B0=9C=EC=A0=84=20?=
 =?UTF-8?q?=EC=8B=9C=EB=AE=AC=EB=A0=88=EC=9D=B4=EC=85=98=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/simulator/Simulator.jsx | 47 +++++++++++---------------
 1 file changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/components/simulator/Simulator.jsx b/src/components/simulator/Simulator.jsx
index d59eabe1..5d6a7e3d 100644
--- a/src/components/simulator/Simulator.jsx
+++ b/src/components/simulator/Simulator.jsx
@@ -49,34 +49,25 @@ export default function Simulator() {
           return isNaN(num) ? 0 : num
         }),
 
-        backgroundColor: [
-          'rgba(255, 99, 132, 0.2)',
-          'rgba(54, 162, 235, 0.2)',
-          'rgba(255, 206, 86, 0.2)',
-          'rgba(75, 192, 192, 0.2)',
-          'rgba(153, 102, 255, 0.2)',
-          'rgba(255, 159, 64, 0.2)',
-          'rgba(0, 99, 132, 0.2)',
-          'rgba(0, 162, 235, 0.2)',
-          'rgba(0, 206, 86, 0.2)',
-          'rgba(0, 192, 192, 0.2)',
-          'rgba(0, 102, 255, 0.2)',
-          'rgba(0, 159, 64, 0.2)',
-        ],
-        borderColor: [
-          'rgba(255, 99, 132, 0.2)',
-          'rgba(54, 162, 235, 0.2)',
-          'rgba(255, 206, 86, 0.2)',
-          'rgba(75, 192, 192, 0.2)',
-          'rgba(153, 102, 255, 0.2)',
-          'rgba(255, 159, 64, 0.2)',
-          'rgba(0, 99, 132, 0.2)',
-          'rgba(0, 162, 235, 0.2)',
-          'rgba(0, 206, 86, 0.2)',
-          'rgba(0, 192, 192, 0.2)',
-          'rgba(0, 102, 255, 0.2)',
-          'rgba(0, 159, 64, 0.2)',
-        ],
+        backgroundColor: (context) => {
+          const chart = context.chart
+          const { ctx, chartArea } = chart
+
+          if (!chartArea) {
+            // This case happens on initial chart load
+            return null
+          }
+
+          const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top)
+          gradient.addColorStop(0, '#4FC3F7')  // Light blue at bottom
+          gradient.addColorStop(0.3, '#2FA8E0') // Original blue
+          gradient.addColorStop(0.7, '#1976D2') // Medium blue
+          gradient.addColorStop(1, '#0D47A1')   // Dark blue at top
+
+
+          return gradient
+        },
+        borderColor: '#2FA8E0' ,
         borderWidth: 1,
       },
     ],