diff --git a/package-lock.json b/package-lock.json
index 4f7b759..eddb174 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.18.0",
+        "recharts": "^3.9.2",
         "tailwindcss": "^4.3.0",
         "vite": "^6.3.5"
       },
@@ -789,6 +790,32 @@
       "integrity": "sha512-XSJlaNzj3j+uSNfGkkkxw6hyKw+d8fuZd/N1/NrxvTJIiUhVMXQ1PE30JRu5yWzbvmezKSCmloz8wbq4sWsrFw==",
       "license": "MIT"
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1159,6 +1186,18 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.1.tgz",
@@ -1529,6 +1568,69 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -1539,7 +1641,7 @@
       "version": "19.2.17",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1555,6 +1657,12 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -1658,6 +1766,15 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1681,9 +1798,130 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1701,6 +1939,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1729,6 +1973,16 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.49.0.tgz",
+      "integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -1779,6 +2033,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1825,6 +2085,25 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/immer": {
+      "version": "11.1.11",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.11.tgz",
+      "integrity": "sha512-qzXuyXAkPySAGYkfsAwodDPWT8Zm7/Uo5BNt4BjhMhG5WlWyZZ4wQqnWwdS8kjlQ1Cwu6gjw3A6+0gTQwlyYtw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -2256,6 +2535,36 @@
         "react": "^19.2.7"
       }
     },
+    "node_modules/react-is": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
+      "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2303,6 +2612,57 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.9.2.tgz",
+      "integrity": "sha512-G4fy+Pk46RaXgwWMh+Nzhyo/lbFAVqXo9gtetlyehe6Ehge9CsgDuOTwQDD+i1+llaLktNBiNq4bhnGlDRXFtw==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^11.1.8",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.2.0",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
+      "license": "MIT"
+    },
     "node_modules/rollup": {
       "version": "4.62.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.0.tgz",
@@ -2396,6 +2756,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -2456,6 +2822,37 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "6.4.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
diff --git a/package.json b/package.json
index c76ef32..e69acf0 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.18.0",
+    "recharts": "^3.9.2",
     "tailwindcss": "^4.3.0",
     "vite": "^6.3.5"
   },
diff --git a/src/App.tsx b/src/App.tsx
index fa328f9..316689f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -47,6 +47,7 @@ import {
   InfrastructureStoragePage,
   InfrastructureWorkloadsPage
 } from './pages/infrastructure/InfrastructurePages';
+import { MonitoringPage } from './pages/system/MonitoringPage';
 import { LoadingModal, useMinimumLoading } from './pages/operations/operation-utils';
 import {
   AgentCommandsPage as AgentCommandsRestoredPage,
@@ -92,6 +93,7 @@ type ViewKey =
   | 'infraWorkloads'
   | 'infraNetwork'
   | 'infraStorage'
+  | 'monitoring'
   | 'agentRegistration'
   | 'agentInstallStatus'
   | 'agentSshKeys'
@@ -129,6 +131,7 @@ const viewByLabel: Record<string, ViewKey> = {
   워크로드: 'infraWorkloads',
   네트워크: 'infraNetwork',
   스토리지: 'infraStorage',
+  모니터링: 'monitoring',
   '장비 등록': 'agentRegistration',
   '설치 상태': 'agentInstallStatus',
   'SSH 키 배포': 'agentSshKeys',
@@ -172,6 +175,7 @@ const pathByView: Record<ViewKey, string> = {
   infraWorkloads: '/infrastructure/workloads',
   infraNetwork: '/infrastructure/network',
   infraStorage: '/infrastructure/storage',
+  monitoring: '/system/monitoring',
   agentRegistration: '/agents/registration',
   agentInstallStatus: '/agents/install-status',
   agentSshKeys: '/agents/ssh-keys',
@@ -1766,6 +1770,8 @@ function App() {
         return <InfrastructureNetworkPage />;
       case 'infraStorage':
         return <InfrastructureStoragePage />;
+      case 'monitoring':
+        return <MonitoringPage />;
       case 'agentRegistration':
         return <AgentRegistrationRestoredPage />;
       case 'agentInstallStatus':
diff --git a/src/pages/operations/NoticesPage.tsx b/src/pages/operations/NoticesPage.tsx
index 3e7bc0d..66e2f9f 100644
--- a/src/pages/operations/NoticesPage.tsx
+++ b/src/pages/operations/NoticesPage.tsx
@@ -21,6 +21,7 @@ type NoticeForm = {
   title: string;
   body: string;
   linkUrl: string;
+  exposureEnabled: boolean;
   startsAt: string;
   endsAt: string;
   priority: string;
@@ -32,6 +33,7 @@ const emptyForm: NoticeForm = {
   title: '',
   body: '',
   linkUrl: '',
+  exposureEnabled: false,
   startsAt: '',
   endsAt: '',
   priority: '0',
@@ -77,6 +79,7 @@ function toForm(notice: LauncherNotice): NoticeForm {
     title: notice.title,
     body: notice.body,
     linkUrl: notice.linkUrl ?? '',
+    exposureEnabled: Boolean(notice.startsAt || notice.endsAt),
     startsAt: toDateTimeInputValue(notice.startsAt),
     endsAt: toDateTimeInputValue(notice.endsAt),
     priority: String(notice.priority ?? 0),
@@ -181,8 +184,8 @@ export function NoticesPage() {
     title: form.title.trim(),
     body: form.body.trim(),
     linkUrl: form.linkUrl.trim(),
-    startsAt: toApiDateTime(form.startsAt),
-    endsAt: toApiDateTime(form.endsAt),
+    startsAt: form.exposureEnabled ? toApiDateTime(form.startsAt) : undefined,
+    endsAt: form.exposureEnabled ? toApiDateTime(form.endsAt) : undefined,
     priority: Number(form.priority) || 0,
     isActive: form.isActive
   });
@@ -382,15 +385,32 @@ export function NoticesPage() {
             <span className="text-xs font-medium text-muted-foreground">링크주소</span>
             <input className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.linkUrl} onChange={(event) => setForm((prev) => ({ ...prev, linkUrl: event.target.value }))} />
           </label>
-          <div className="grid gap-4 md:grid-cols-2">
-            <label className="block">
-              <span className="text-xs font-medium text-muted-foreground">노출 시작 일시</span>
-              <input type="datetime-local" className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.startsAt} onChange={(event) => setForm((prev) => ({ ...prev, startsAt: event.target.value }))} />
-            </label>
-            <label className="block">
-              <span className="text-xs font-medium text-muted-foreground">노출 종료 일시</span>
-              <input type="datetime-local" className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.endsAt} onChange={(event) => setForm((prev) => ({ ...prev, endsAt: event.target.value }))} />
+          <div className="rounded-md border border-border bg-muted/20 p-3">
+            <label className="inline-flex items-center gap-2 text-sm font-medium text-foreground">
+              <input
+                type="checkbox"
+                checked={form.exposureEnabled}
+                onChange={(event) => setForm((prev) => ({
+                  ...prev,
+                  exposureEnabled: event.target.checked,
+                  startsAt: event.target.checked ? prev.startsAt : '',
+                  endsAt: event.target.checked ? prev.endsAt : ''
+                }))}
+              />
+              노출기간 설정
             </label>
+            {form.exposureEnabled ? (
+              <div className="mt-3 grid gap-4 md:grid-cols-2">
+                <label className="block">
+                  <span className="text-xs font-medium text-muted-foreground">노출 시작 일시</span>
+                  <input type="datetime-local" className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.startsAt} onChange={(event) => setForm((prev) => ({ ...prev, startsAt: event.target.value }))} />
+                </label>
+                <label className="block">
+                  <span className="text-xs font-medium text-muted-foreground">노출 종료 일시</span>
+                  <input type="datetime-local" className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring" value={form.endsAt} onChange={(event) => setForm((prev) => ({ ...prev, endsAt: event.target.value }))} />
+                </label>
+              </div>
+            ) : null}
           </div>
         </form>
       </Modal>
diff --git a/src/pages/system/MonitoringPage.tsx b/src/pages/system/MonitoringPage.tsx
new file mode 100644
index 0000000..f764d23
--- /dev/null
+++ b/src/pages/system/MonitoringPage.tsx
@@ -0,0 +1,294 @@
+import { Activity, AlertTriangle, RotateCcw, Server } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from 'recharts';
+import { Badge, Button, Card, CardHeader } from '../../components/ui';
+import { PageTitle } from '../../layout/AppLayout';
+import { runtimeStatusDotClass } from '../../lib/status-dot';
+import { cn } from '../../lib/utils';
+import type { ApiApp, RuntimeEvent, RuntimePodMetric, RuntimeResource } from '../../types/runtime';
+import { loadApps, loadRuntimeEvents, loadRuntimePodMetrics, loadRuntimeResources } from '../runtime/runtime-api';
+import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
+
+type ResourceRow = RuntimeResource & {
+  metric?: RuntimePodMetric;
+};
+
+const chartColors = ['#34d399', '#60a5fa', '#fbbf24', '#fb7185', '#a78bfa'];
+
+function parseCpuMillicores(value?: string) {
+  if (!value) return 0;
+  if (value.endsWith('m')) return Number(value.slice(0, -1)) || 0;
+  return (Number(value) || 0) * 1000;
+}
+
+function parseMemoryMi(value?: string) {
+  if (!value) return 0;
+  const matched = value.match(/^([0-9.]+)([A-Za-z]+)?$/);
+  if (!matched) return 0;
+  const amount = Number(matched[1]);
+  const unit = matched[2] ?? '';
+  if (!Number.isFinite(amount)) return 0;
+  if (unit === 'Ki') return amount / 1024;
+  if (unit === 'Gi') return amount * 1024;
+  if (unit === 'Ti') return amount * 1024 * 1024;
+  if (unit === 'Mi' || unit === 'M') return amount;
+  return amount / 1024 / 1024;
+}
+
+function isHealthy(resource: RuntimeResource) {
+  if (['Error', 'CrashLoopBackOff', 'Failed'].includes(resource.status)) return false;
+  if (!resource.ready.includes('/')) return ['Running', 'Bound', 'ClusterIP', 'LoadBalancer'].includes(resource.status);
+  const [ready, total] = resource.ready.split('/').map((value) => Number(value));
+  return Number.isFinite(ready) && Number.isFinite(total) && total > 0 && ready === total;
+}
+
+function statusTone(status: string): 'neutral' | 'green' | 'amber' | 'red' | 'blue' {
+  if (isHealthy({ kind: '', name: '', status, ready: status === 'Running' ? '1/1' : '-', restarts: null, age: '', detail: '' })) return 'green';
+  if (['Pending', 'ContainerCreating'].includes(status)) return 'amber';
+  if (['Error', 'CrashLoopBackOff', 'Failed'].includes(status)) return 'red';
+  return 'neutral';
+}
+
+export function MonitoringPage() {
+  const [apps, setApps] = useState<ApiApp[]>([]);
+  const [selectedAppId, setSelectedAppId] = useState('');
+  const [resources, setResources] = useState<ResourceRow[]>([]);
+  const [events, setEvents] = useState<RuntimeEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const loadingVisible = useMinimumLoading(loading);
+
+  const selectedApp = apps.find((app) => app.id === selectedAppId) ?? apps[0];
+
+  const refresh = () => {
+    setLoading(true);
+    loadApps()
+      .then(async (nextApps) => {
+        const appItems = nextApps.filter((app) => app.namespace);
+        const app = appItems.find((item) => item.id === selectedAppId) ?? appItems[0];
+        setApps(appItems);
+        setSelectedAppId(app?.id ?? '');
+
+        if (!app?.namespace) {
+          setResources([]);
+          setEvents([]);
+          return;
+        }
+
+        const [runtime, metrics, eventItems] = await Promise.all([
+          loadRuntimeResources(app.namespace),
+          loadRuntimePodMetrics(app.namespace).catch(() => []),
+          loadRuntimeEvents(app.namespace).catch(() => [])
+        ]);
+        const metricByPod = new Map(metrics.map((metric) => [metric.pod, metric]));
+        setResources((runtime.resources ?? []).map((resource) => ({
+          ...resource,
+          metric: resource.kind === 'Pod' ? metricByPod.get(resource.name) : undefined
+        })));
+        setEvents(eventItems);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  useEffect(() => {
+    if (!selectedApp?.namespace) return;
+    setLoading(true);
+    Promise.all([
+      loadRuntimeResources(selectedApp.namespace),
+      loadRuntimePodMetrics(selectedApp.namespace).catch(() => []),
+      loadRuntimeEvents(selectedApp.namespace).catch(() => [])
+    ])
+      .then(([runtime, metrics, eventItems]) => {
+        const metricByPod = new Map(metrics.map((metric) => [metric.pod, metric]));
+        setResources((runtime.resources ?? []).map((resource) => ({
+          ...resource,
+          metric: resource.kind === 'Pod' ? metricByPod.get(resource.name) : undefined
+        })));
+        setEvents(eventItems);
+      })
+      .finally(() => setLoading(false));
+  }, [selectedAppId]);
+
+  useEffect(() => {
+    if (!selectedApp?.namespace) return;
+    const namespace = selectedApp.namespace;
+    const timer = window.setInterval(() => {
+      Promise.all([
+        loadRuntimeResources(namespace),
+        loadRuntimePodMetrics(namespace).catch(() => []),
+        loadRuntimeEvents(namespace).catch(() => [])
+      ])
+        .then(([runtime, metrics, eventItems]) => {
+          const metricByPod = new Map(metrics.map((metric) => [metric.pod, metric]));
+          setResources((runtime.resources ?? []).map((resource) => ({
+            ...resource,
+            metric: resource.kind === 'Pod' ? metricByPod.get(resource.name) : undefined
+          })));
+          setEvents(eventItems);
+        })
+        .catch(() => undefined);
+    }, 10000);
+
+    return () => window.clearInterval(timer);
+  }, [selectedApp?.namespace]);
+
+  const summary = useMemo(() => {
+    const runtimeResources = resources.filter((resource) => ['Pod', 'Deployment', 'StatefulSet', 'DaemonSet'].includes(resource.kind));
+    const healthy = runtimeResources.filter(isHealthy).length;
+    const warnings = events.filter((event) => event.type === 'Warning').length;
+    const restarts = resources.reduce((sum, resource) => sum + (resource.restarts ?? 0), 0);
+    return { total: runtimeResources.length, healthy, warnings, restarts };
+  }, [events, resources]);
+
+  const podMetrics = useMemo(() => resources
+    .filter((resource) => resource.kind === 'Pod' && resource.metric)
+    .map((resource) => ({
+      name: resource.name.replace(`${selectedApp?.key?.toLowerCase() ?? ''}-`, ''),
+      cpu: parseCpuMillicores(resource.metric?.cpu),
+      memory: Math.round(parseMemoryMi(resource.metric?.memory))
+    })), [resources, selectedApp?.key]);
+
+  const statusData = useMemo(() => {
+    const byStatus = new Map<string, number>();
+    resources.forEach((resource) => byStatus.set(resource.status || '-', (byStatus.get(resource.status || '-') ?? 0) + 1));
+    return [...byStatus.entries()].map(([name, value]) => ({ name, value }));
+  }, [resources]);
+
+  return (
+    <>
+      <PageTitle
+        eyebrow="시스템"
+        title="모니터링"
+        description="선택한 앱 서비스의 런타임 상태, 리소스 사용량, 최근 이벤트를 확인합니다."
+        actions={
+          <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
+            <RotateCcw className={cn('size-4', loading && 'animate-spin')} />
+            새로고침
+          </Button>
+        }
+      />
+
+      <Card className="mb-4 p-4">
+        <label className="block max-w-md">
+          <span className="text-xs font-medium text-muted-foreground">앱</span>
+          <select
+            className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
+            value={selectedAppId}
+            onChange={(event) => setSelectedAppId(event.target.value)}
+          >
+            {apps.map((app) => (
+              <option key={app.id} value={app.id}>{app.name} · {app.namespace}</option>
+            ))}
+          </select>
+        </label>
+      </Card>
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <MetricCard icon={Server} label="워크로드" value={`${summary.healthy}/${summary.total}`} hint="Pod/Deployment/StatefulSet 기준" tone={summary.healthy === summary.total ? 'green' : 'amber'} />
+        <MetricCard icon={Activity} label="Pod" value={String(resources.filter((resource) => resource.kind === 'Pod').length)} hint="실행 Pod 수" tone="blue" />
+        <MetricCard icon={AlertTriangle} label="Warning 이벤트" value={String(summary.warnings)} hint="현재 네임스페이스 기준" tone={summary.warnings > 0 ? 'amber' : 'green'} />
+        <MetricCard icon={RotateCcw} label="재시작" value={String(summary.restarts)} hint="Pod 재시작 합계" tone={summary.restarts > 0 ? 'amber' : 'green'} />
+      </div>
+
+      <div className="mt-4 grid gap-4 xl:grid-cols-[minmax(0,1.25fr)_minmax(360px,0.75fr)]">
+        <Card className="min-w-0 overflow-hidden">
+          <CardHeader title="Pod 리소스" description="선택한 앱 네임스페이스의 Pod CPU/Memory 사용량입니다." />
+          <div className="h-80 p-5">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={podMetrics}>
+                <CartesianGrid stroke="rgba(148,163,184,0.16)" vertical={false} />
+                <XAxis dataKey="name" tick={{ fill: '#94a3b8', fontSize: 11 }} tickLine={false} axisLine={false} />
+                <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} tickLine={false} axisLine={false} />
+                <Tooltip contentStyle={{ backgroundColor: 'hsl(224 20% 10%)', border: '1px solid hsl(222 15% 20%)', borderRadius: 8 }} />
+                <Bar dataKey="cpu" name="CPU(m)" fill="#60a5fa" radius={[4, 4, 0, 0]} />
+                <Bar dataKey="memory" name="Memory(Mi)" fill="#34d399" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </Card>
+
+        <Card className="min-w-0 overflow-hidden">
+          <CardHeader title="상태 분포" description="런타임 리소스 상태별 개수입니다." />
+          <div className="h-80 p-5">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie data={statusData} dataKey="value" nameKey="name" innerRadius={62} outerRadius={100} paddingAngle={3}>
+                  {statusData.map((entry, index) => <Cell key={entry.name} fill={chartColors[index % chartColors.length]} />)}
+                </Pie>
+                <Tooltip contentStyle={{ backgroundColor: 'hsl(224 20% 10%)', border: '1px solid hsl(222 15% 20%)', borderRadius: 8 }} />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        </Card>
+      </div>
+
+      <div className="mt-4 grid gap-4 xl:grid-cols-2">
+        <Card className="overflow-hidden">
+          <CardHeader title="리소스 상태" description="선택한 앱 네임스페이스의 주요 리소스입니다." />
+          <div className="max-h-[420px] divide-y divide-border overflow-y-auto">
+            {resources.map((resource) => (
+              <div key={`${resource.kind}-${resource.name}`} className="flex items-center justify-between gap-4 px-5 py-3 text-sm">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className={cn('size-2.5 shrink-0 rounded-full', runtimeStatusDotClass(resource.status))} />
+                    <p className="truncate font-medium">{resource.kind}/{resource.name}</p>
+                  </div>
+                  <p className="mt-1 text-xs text-muted-foreground">{resource.ready || '-'} · 재시작 {resource.restarts ?? 0}</p>
+                </div>
+                <Badge tone={statusTone(resource.status)}>{resource.status || '-'}</Badge>
+              </div>
+            ))}
+          </div>
+        </Card>
+
+        <Card className="overflow-hidden">
+          <CardHeader title="최근 이벤트" description="Warning 이벤트를 우선 확인합니다." />
+          <div className="max-h-[420px] divide-y divide-border overflow-y-auto">
+            {events.slice(0, 12).map((event, index) => (
+              <div key={`${event.involvedObject}-${event.reason}-${index}`} className="px-5 py-3 text-sm">
+                <div className="flex items-center gap-2">
+                  <Badge tone={event.type === 'Warning' ? 'amber' : 'neutral'}>{event.type ?? '-'}</Badge>
+                  <p className="truncate font-medium">{event.reason ?? '-'}</p>
+                </div>
+                <p className="mt-2 line-clamp-2 text-xs leading-5 text-muted-foreground">{event.message ?? '-'}</p>
+              </div>
+            ))}
+            {!events.length ? <div className="px-5 py-12 text-center text-sm text-muted-foreground">표시할 이벤트가 없습니다.</div> : null}
+          </div>
+        </Card>
+      </div>
+
+      <LoadingModal open={loadingVisible} />
+    </>
+  );
+}
+
+function MetricCard({ icon: Icon, label, value, hint, tone }: { icon: typeof Server; label: string; value: string; hint: string; tone: 'green' | 'amber' | 'red' | 'blue' | 'neutral' }) {
+  return (
+    <Card className="p-5">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">{label}</p>
+        <Icon className="size-4 text-muted-foreground" />
+      </div>
+      <div className="mt-4 flex items-end justify-between gap-3">
+        <p className="text-3xl font-semibold tracking-tight">{value}</p>
+        <Badge tone={tone}>{tone === 'green' ? '정상' : tone === 'amber' ? '주의' : tone === 'red' ? '장애' : '정보'}</Badge>
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">{hint}</p>
+    </Card>
+  );
+}