From 2d70fced79103e468762690ebc422ee29be68519 Mon Sep 17 00:00:00 2001
From: sb <sb@MacBook-Pro.local>
Date: Thu, 9 Jul 2026 23:19:35 +0900
Subject: [PATCH] =?UTF-8?q?style(ui):=20SheetSelect=20=EC=B9=A9=EC=9D=84?=
 =?UTF-8?q?=20CategoryPicker=20=EA=B7=B8=EB=A6=AC=EB=93=9C(4=EC=97=B4=20?=
 =?UTF-8?q?=EA=B7=A0=EC=9D=BC=20=EB=B0=95=EC=8A=A4)=EB=A1=9C=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- pill 칩 → 4열 균일 박스(.acc-chip 동일), 활성은 연한 초록. 목록/셀렉트보다 깔끔

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/ui/SheetSelect.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/ui/SheetSelect.vue b/src/components/ui/SheetSelect.vue
index 5403a26..13b03aa 100644
--- a/src/components/ui/SheetSelect.vue
+++ b/src/components/ui/SheetSelect.vue
@@ -75,29 +75,33 @@ function pick(o) {
   font-size: 0.8rem;
   flex-shrink: 0;
 }
-/* CategoryPicker 스타일의 칩 그리드 */
+/* CategoryPicker(.acc-chip)와 동일한 4열 균일 박스 그리드 */
 .ss-chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.4rem;
+  gap: 0.35rem;
   padding: 0.2rem 0 0.4rem;
 }
 .ss-chip {
-  padding: 0.4rem 0.85rem;
-  border: 1.5px solid var(--color-border);
-  border-radius: 100px;
-  background: var(--color-background-soft);
+  flex: 1 1 calc(25% - 0.35rem);
+  min-width: 0;
+  padding: 0.5rem 0.4rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: transparent;
   color: var(--color-text);
-  font-size: 0.9rem;
-  font-weight: 500;
+  font-size: 0.82rem;
   cursor: pointer;
-  line-height: 1.4;
-  transition: border-color 0.12s, background 0.12s, color 0.12s;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .ss-chip.active {
   border-color: hsla(160, 100%, 37%, 1);
-  background: hsla(160, 100%, 37%, 1);
-  color: #fff;
+  background: hsla(160, 100%, 37%, 0.1);
+  color: hsla(160, 100%, 37%, 1);
+  font-weight: 600;
 }
 .ss-empty {
   padding: 1.2rem 0.4rem;