style: implement complete Douzone ERP style overhaul for high-density desktop backoffice UI

2026-06-30 22:24:57 +09:00
parent 967a784d6e
commit c765db37b3
1 changed files with 201 additions and 0 deletions
@@ -1641,3 +1641,204 @@ textarea:focus-visible {
    margin-right: -8px;
  }
 }
+
+/* ============================================================================
+   더존 ERP 스타일 개벽 (Douzone ERP High-Density Desktop Style Overrides)
+   ============================================================================ */
+
+/* 1. 전역 플랫화 (No Shadow, No Rounding, 맑은 고딕) */
+* {
+  border-radius: 0px !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+}
+
+html, body {
+  background-color: #E2E8F0 !important; /* 회색의 단단한 느낌 */
+  color: #1A1D20 !important;
+  font-family: 'Malgun Gothic', '맑은 고딕', -apple-system, BlinkMacSystemFont, sans-serif !important;
+  font-size: 12px !important;
+}
+
+/* 2. 어드민 레이아웃 & 네비게이션 드로워 (더존 네이비 테마) */
+.mud-drawer {
+  background-color: #1E293B !important; /* 드로워 어두운 네이비 */
+  border-right: 2px solid #0F172A !important;
+}
+
+.mud-drawer-header {
+  background-color: #0F172A !important;
+  border-bottom: 1px solid #334155 !important;
+  padding: 8px 12px !important;
+  height: 48px !important;
+}
+
+.mud-nav-link {
+  height: 32px !important;
+  padding: 4px 12px !important;
+  font-size: 11px !important;
+  color: #94A3B8 !important;
+  border-bottom: 1px solid #334155 !important;
+}
+
+.mud-nav-link.active {
+  background-color: #1E3A8A !important; /* 선택 메뉴 어두운 블루 */
+  color: #FFFFFF !important;
+  font-weight: bold !important;
+}
+
+.mud-nav-link:hover {
+  background-color: #334155 !important;
+  color: #FFFFFF !important;
+}
+
+/* 3. 어드민 탑바 (Appbar) */
+.mud-appbar {
+  background-color: #F8FAFC !important;
+  color: #0F172A !important;
+  border-bottom: 1px solid #CBD5E1 !important;
+  height: 48px !important;
+}
+
+/* 4. ERP 격자형 스프레드시트 데이터그리드 (더존 ERP 핵심 그리드) */
+.admin-grid, .mud-table {
+  border: 1px solid #94A3B8 !important;
+  background-color: #FFFFFF !important;
+}
+
+/* 테이블 셀 테두리 선명화 (세로선 복구) */
+.mud-table-container th, 
+.mud-table-container td {
+  border-right: 1px solid #CBD5E1 !important;
+  border-bottom: 1px solid #CBD5E1 !important;
+  padding: 4px 6px !important;
+  font-size: 11px !important;
+  height: 24px !important;
+  line-height: 1.2 !important;
+}
+
+/* 헤더 셀 (회색 배경, 볼드, 센터정렬) */
+.mud-table-head th {
+  background-color: #E2E8F0 !important;
+  color: #1E293B !important;
+  font-weight: bold !important;
+  text-align: center !important;
+  border-bottom: 2px solid #64748B !important;
+}
+
+/* 번갈아 나오는 줄무늬 (Zebra Striping) */
+.mud-table-striped .mud-table-row:nth-of-type(odd) {
+  background-color: #F8FAFC !important;
+}
+
+/* 호버 시 블루 선택 효과 */
+.mud-table-row:hover {
+  background-color: #E0F2FE !important;
+}
+
+/* 5. ERP 입력 폼 필드 (셀 구조의 딱딱한 인풋) */
+.mud-dialog {
+  border: 3px solid #1E3A8A !important;
+  background-color: #F1F5F9 !important;
+}
+
+.mud-dialog-title {
+  background-color: #1E3A8A !important;
+  color: #FFFFFF !important;
+  padding: 8px 12px !important;
+  font-size: 13px !important;
+  font-weight: bold !important;
+}
+
+.mud-dialog-content {
+  padding: 12px !important;
+}
+
+/* ERP 입력 박스 (테두리 두껍게, 패딩 최소화) */
+.mud-input-control {
+  margin-bottom: 8px !important;
+}
+
+.mud-input-outlined-border {
+  border: 1px solid #94A3B8 !important;
+  background-color: #FFFFFF !important;
+}
+
+.mud-input-outlined.mud-input-adorned-end,
+.mud-input-input-control {
+  height: 28px !important;
+}
+
+.mud-input > input.mud-input-root,
+.mud-select-input {
+  font-size: 11px !important;
+  padding: 2px 6px !important;
+  height: 26px !important;
+}
+
+.mud-input-label {
+  font-size: 11px !important;
+  font-weight: bold !important;
+  color: #475569 !important;
+  transform: translate(8px, 6px) scale(1) !important;
+}
+
+.mud-input-label-inputcontrol {
+  margin-bottom: 2px !important;
+  position: static !important;
+  transform: none !important;
+}
+
+/* 6. ERP 공통 버튼 스타일 */
+.mud-button-root {
+  height: 26px !important;
+  padding: 2px 8px !important;
+  font-size: 11px !important;
+  font-weight: bold !important;
+  border: 1px solid #94A3B8 !important;
+}
+
+.mud-button-filled.mud-button-filled-primary {
+  background-color: #1E3A8A !important;
+  border-color: #1E3A8A !important;
+  color: #FFFFFF !important;
+}
+
+.mud-button-filled.mud-button-filled-primary:hover {
+  background-color: #1D4ED8 !important;
+}
+
+.mud-button-outlined {
+  background-color: #FFFFFF !important;
+  color: #1E293B !important;
+}
+
+/* 7. 치프(상태 칩) 슬림화 */
+.mud-chip {
+  height: 18px !important;
+  font-size: 10px !important;
+  padding: 0 4px !important;
+  border: 1px solid #CBD5E1 !important;
+}
+
+/* 8. 페이지 헤더 영역 압축 */
+.admin-page-hero {
+  padding: 8px 12px !important;
+  background-color: #F1F5F9 !important;
+  border-bottom: 1px solid #CBD5E1 !important;
+  margin-bottom: 0px !important;
+}
+
+.admin-page-title {
+  font-size: 16px !important;
+  font-weight: bold !important;
+}
+
+.admin-page-subtitle {
+  font-size: 11px !important;
+  color: #64748B !important;
+}
+
+.admin-eyebrow {
+  display: none !important; /* 잔가지 정보 숨김 */
+}