diff --git a/src/components/ui/SheetSelect.vue b/src/components/ui/SheetSelect.vue index 03963f9..5403a26 100644 --- a/src/components/ui/SheetSelect.vue +++ b/src/components/ui/SheetSelect.vue @@ -31,17 +31,13 @@ function pick(o) { - +
+ +

{{ emptyText }}

@@ -79,31 +75,29 @@ function pick(o) { font-size: 0.8rem; flex-shrink: 0; } -.ss-list { - list-style: none; - margin: 0; - padding: 0; -} -.ss-opt { +/* CategoryPicker 스타일의 칩 그리드 */ +.ss-chips { display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 0.85rem 0.4rem; - border: 0; - border-bottom: 1px solid var(--color-border); - background: transparent; + flex-wrap: wrap; + gap: 0.4rem; + 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); color: var(--color-text); - font-size: 0.95rem; + font-size: 0.9rem; + font-weight: 500; cursor: pointer; - text-align: left; + line-height: 1.4; + transition: border-color 0.12s, background 0.12s, color 0.12s; } -.ss-opt.active { - color: hsla(160, 100%, 37%, 1); - font-weight: 700; -} -.ss-check { - color: hsla(160, 100%, 37%, 1); +.ss-chip.active { + border-color: hsla(160, 100%, 37%, 1); + background: hsla(160, 100%, 37%, 1); + color: #fff; } .ss-empty { padding: 1.2rem 0.4rem;