/* ========================================================= ERP HEADER FINAL - 슬림한 상단 정보바 - 날짜/회계기수 가독성 강화 - 기존 header.css / common.css 최종 override ========================================================= */ /* ========================================================= 1. HEADER SHELL ========================================================= */ .erp-app-main > .header { position: sticky !important; top: 0 !important; width: 100% !important; min-height: 52px !important; height: 52px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #dce7f1 !important; background: linear-gradient( 90deg, #f7fbff 0%, #edf5fc 55%, #f8fbfe 100% ) !important; color: #243b53 !important; box-shadow: 0 2px 8px rgba(31, 61, 89, .055) !important; z-index: 11000 !important; } /* ========================================================= 2. INNER ========================================================= */ .erp-app-main > .header > .header-inner { width: 100% !important; max-width: none !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 0 18px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; } /* ========================================================= 3. LEFT BRAND ========================================================= */ .erp-app-main .header-brand { display: inline-flex !important; align-items: center !important; min-width: 0 !important; gap: 9px !important; color: #17324d !important; text-decoration: none !important; } .erp-app-main .header-logo { width: 28px !important; height: 28px !important; object-fit: contain !important; border-radius: 6px !important; background: #fff !important; padding: 2px !important; box-sizing: border-box !important; box-shadow: 0 1px 4px rgba(33, 67, 96, .08) !important; } .erp-app-main .header-title { overflow: hidden !important; color: #173b59 !important; font-size: 13px !important; font-weight: 850 !important; letter-spacing: -.02em !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ========================================================= 4. RIGHT INFORMATION ========================================================= */ .erp-app-main .header-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; color: #506b82 !important; white-space: nowrap !important; } /* 날짜 / 시계 */ .erp-app-main .header-date, .erp-app-main .live-clock { color: #304f68 !important; font-size: 11px !important; font-weight: 750 !important; letter-spacing: -.01em !important; } /* 구분선 */ .erp-app-main .header-sep { color: #b7c7d5 !important; font-size: 10px !important; font-weight: 400 !important; } /* ========================================================= 5. FISCAL BADGE ========================================================= */ .erp-app-main .header-fiscal { display: inline-flex !important; align-items: center !important; height: 27px !important; padding: 0 9px !important; box-sizing: border-box !important; border: 1px solid #c7dbea !important; border-radius: 999px !important; background: #ffffff !important; color: #285d87 !important; font-size: 10px !important; font-weight: 850 !important; box-shadow: 0 1px 3px rgba(40, 93, 135, .04) !important; } /* ========================================================= 6. LOGIN / LOGOUT ========================================================= */ .erp-app-main .header-right .logout { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 28px !important; padding: 0 10px !important; box-sizing: border-box !important; border: 1px solid #ccdce8 !important; border-radius: 6px !important; background: #fff !important; color: #3d5f78 !important; font-size: 10px !important; font-weight: 800 !important; text-decoration: none !important; transition: background .15s ease, border-color .15s ease, color .15s ease !important; } .erp-app-main .header-right .logout:hover { border-color: #9fc1da !important; background: #f2f8fd !important; color: #1f669b !important; } /* ========================================================= 7. HOME 홈에서는 상단바를 조금 더 강조 ========================================================= */ body:has(.erp-home-dashboard) .erp-app-main > .header { background: linear-gradient( 90deg, #f1f8fe 0%, #e7f2fb 48%, #f6faff 100% ) !important; border-bottom-color: #cbddeb !important; } /* ========================================================= 8. RESPONSIVE ========================================================= */ @media (max-width: 1000px) { .erp-app-main .header-title { max-width: 250px !important; } } @media (max-width: 760px) { .erp-app-main > .header, .erp-app-main > .header > .header-inner { height: 48px !important; min-height: 48px !important; } .erp-app-main > .header > .header-inner { padding: 0 10px !important; } .erp-app-main .header-title { display: none !important; } .erp-app-main .header-sep { display: none !important; } .erp-app-main .header-right { gap: 5px !important; } } /* ========================================================= ERP HEADER - FINAL ALIGNMENT TUNING ========================================================= */ /* 좌측 브랜드 세로 정렬 */ .erp-app-main .header-brand { min-height: 34px !important; } /* 로고 위치 보정 */ .erp-app-main .header-logo { transform: translateY(-1px); } /* 제목 line-height 안정화 */ .erp-app-main .header-title { line-height: 1.15 !important; } /* 우측 정보 정렬 */ .erp-app-main .header-right { min-height: 32px !important; } /* 날짜 / 시간 더 선명하게 */ .erp-app-main .header-date, .erp-app-main .live-clock { color: #294b66 !important; font-size: 11.5px !important; font-weight: 800 !important; } /* 회계기수 Badge 약간 축소 */ .erp-app-main .header-fiscal { height: 25px !important; padding: 0 8px !important; font-size: 9.5px !important; } /* 로그아웃 버튼도 높이 맞춤 */ .erp-app-main .header-right .logout { height: 26px !important; padding: 0 9px !important; } /* 구분선 조금 연하게 */ .erp-app-main .header-sep { color: #c3d0da !important; } /* ========================================================= HEADER BRAND - FULL TITLE DISPLAY ========================================================= */ .erp-app-main .header-brand { flex: 0 1 auto !important; max-width: 520px !important; } .erp-app-main .header-title { display: block !important; max-width: 460px !important; overflow: visible !important; font-size: 14px !important; font-weight: 900 !important; text-overflow: clip !important; white-space: nowrap !important; } .erp-app-main .header-right { flex: 0 0 auto !important; }