From 039bc4c5a3b52f484e4572fc6a279354a7b2dd1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=98=9C=EC=9D=B8?= <hikim2@samaneng.com>
Date: Wed, 6 May 2026 09:03:39 +0900
Subject: [PATCH] style: improve visibility of selected management category
 item

---
 PTC/management_dashboard_preview.html | 97 ++++++++++++++-------------
 1 file changed, 51 insertions(+), 46 deletions(-)

diff --git a/PTC/management_dashboard_preview.html b/PTC/management_dashboard_preview.html
index 83e0502..e3546c5 100644
--- a/PTC/management_dashboard_preview.html
+++ b/PTC/management_dashboard_preview.html
@@ -6452,52 +6452,57 @@
                                         </div>
                                     </div>
                                     <div style={{ display: "grid", gap: 8, marginTop: 14 }}>
-                                        {(yearItem.categories || []).map((category) => (
-                                            <button
-                                                key={`${yearItem.year}-${category.name}`}
-                                                type="button"
-                                                className="button-muted"
-                                                onClick={() => {
-                                                    setSelectedManagementYear(yearItem.year);
-                                                    setSelectedManagementCategory(category.name);
-                                                    setSelectedManagementExcludedYear("");
-                                                }}
-                                                style={{
-                                                    display: "flex",
-                                                    justifyContent: "space-between",
-                                                    gap: 12,
-                                                    alignItems: "baseline",
-                                                    width: "100%",
-                                                    height: "auto",
-                                                    minHeight: 40,
-                                                    boxSizing: "border-box",
-                                                    padding: "8px 10px",
-                                                    borderColor:
-                                                        selectedManagementYear === yearItem.year &&
-                                                        selectedManagementCategory === category.name
-                                                            ? "#d8e4ef"
-                                                            : "transparent",
-                                                    color:
-                                                        selectedManagementYear === yearItem.year &&
-                                                        selectedManagementCategory === category.name
-                                                            ? "var(--blue-700)"
-                                                            : "var(--text)",
-                                                    background:
-                                                        selectedManagementYear === yearItem.year &&
-                                                        selectedManagementCategory === category.name
-                                                            ? "#f8fbfe"
-                                                            : "transparent",
-                                                    boxShadow:
-                                                        selectedManagementYear === yearItem.year &&
-                                                        selectedManagementCategory === category.name
-                                                            ? "inset 3px 0 0 var(--blue)"
-                                                            : "none",
-                                                }}
-                                            >
-                                                <span className="subtle" style={{ color: "inherit" }}>{category.name}</span>
-                                                <strong>{fmtEokManagement(category.amount || 0)}</strong>
-                                            </button>
-                                        ))}
+                                        {(yearItem.categories || []).map((category) => {
+                                            const isSelected =
+                                                selectedManagementYear === yearItem.year &&
+                                                selectedManagementCategory === category.name;
+                                            return (
+                                                <button
+                                                    key={`${yearItem.year}-${category.name}`}
+                                                    type="button"
+                                                    className="button-muted"
+                                                    onClick={() => {
+                                                        setSelectedManagementYear(yearItem.year);
+                                                        setSelectedManagementCategory(category.name);
+                                                        setSelectedManagementExcludedYear("");
+                                                    }}
+                                                    style={{
+                                                        display: "flex",
+                                                        justifyContent: "space-between",
+                                                        gap: 12,
+                                                        alignItems: "center",
+                                                        width: "100%",
+                                                        height: "auto",
+                                                        minHeight: 44,
+                                                        boxSizing: "border-box",
+                                                        padding: "9px 11px",
+                                                        borderRadius: 12,
+                                                        border: isSelected ? "1px solid #0e4f84" : "1px solid transparent",
+                                                        color: isSelected ? "#0a2a43" : "var(--text)",
+                                                        background: isSelected ? "linear-gradient(180deg, #eef6fd 0%, #e2f0fb 100%)" : "transparent",
+                                                        boxShadow: isSelected ? "inset 4px 0 0 #0f5e9c" : "none",
+                                                    }}
+                                                >
+                                                    <span style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+                                                        <span
+                                                            className="subtle"
+                                                            style={{
+                                                                color: isSelected ? "#0f5e9c" : "var(--subtle)",
+                                                                fontWeight: isSelected ? 700 : 500,
+                                                            }}
+                                                        >
+                                                            {category.name}
+                                                        </span>
+                                                        {isSelected && (
+                                                            <span style={{ fontSize: 11, fontWeight: 700, color: "#0f5e9c", background: "#d7ebfb", borderRadius: 999, padding: "2px 7px" }}>
+                                                                선택됨
+                                                            </span>
+                                                        )}
+                                                    </span>
+                                                    <strong style={{ color: isSelected ? "#083454" : "var(--text)" }}>{fmtEokManagement(category.amount || 0)}</strong>
+                                                </button>
+                                            );
+                                        })}
                                         <div
                                                 style={{
                                                     marginTop: 4,