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;