diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html index d461fb0..c4dab9d 100644 --- a/design/uiux/prototype/02-대시보드.html +++ b/design/uiux/prototype/02-대시보드.html @@ -429,44 +429,42 @@ pointer-events: all; } - .fab-menu-item { + /* FAB 메뉴 아이템 & FAB 버튼 공통 스타일 */ + .fab-menu-item, + .fab { display: flex; align-items: center; - gap: var(--space-sm); - background: var(--primary); /* FAB와 동일한 Primary 색상 */ - border-radius: var(--radius-full); - padding: var(--space-sm) var(--space-lg); - box-shadow: var(--shadow-fab); + justify-content: center; + min-width: 100px; + height: 56px; + background: var(--primary); + border: none; + border-radius: 28px; + padding: 0 var(--space-md); cursor: pointer; transition: all var(--transition-fast); + color: var(--white); + font-size: 14px; + font-weight: var(--font-weight-semibold); + box-shadow: var(--shadow-fab); white-space: nowrap; - min-height: 48px; /* 터치 영역 확보 */ } - .fab-menu-item:hover { - background: var(--primary-dark); /* FAB hover와 동일 */ - transform: translateX(-4px); + .fab-menu-item:hover, + .fab:hover { + background: var(--primary-dark); + transform: translateY(-2px); box-shadow: var(--shadow-lg); } - .fab-menu-item:active { - transform: translateX(-4px) scale(0.98); + .fab-menu-item:active, + .fab:active { + transform: translateY(0) scale(0.98); } - .fab-menu-item-icon { - font-size: 20px; - color: var(--white); - } - - .fab-menu-item-text { - font-weight: var(--font-weight-medium); - font-size: var(--font-body); - color: var(--white); /* 흰색 텍스트 */ - } - - /* FAB 회전 효과 */ + /* FAB 회전 효과 제거 */ .fab.active { - transform: rotate(45deg); + transform: rotate(0deg); } /* 오버레이 */ @@ -506,15 +504,15 @@ @@ -601,38 +599,32 @@ - +
- + - - + +