|
|
| Línea 1: |
Línea 1: |
| /* ===============================================
| |
| * Minerva 모바일 헤더 커스텀
| |
| * - 문서 제목: 여러 줄 허용 + 길면 … 처리 (2줄)
| |
| * - 언어 선택(지구) + 검색 아이콘: 오른쪽 상단 고정
| |
| * =============================================== */
| |
|
| |
|
| /* 1. 헤더를 아이콘 absolute 기준으로 사용 */
| |
| .minerva-header {
| |
| position: relative;
| |
| align-items: flex-start; /* 제목이 여러 줄일 때 위쪽 정렬 */
| |
| }
| |
|
| |
| /* 2. 제목(span) 여러 줄 허용 + 2줄까지만 표시하고 … 처리 */
| |
| .minerva-header .branding-box span {
| |
| display: -webkit-box;
| |
| -webkit-line-clamp: 2; /* 보여줄 줄 수 (2줄). 3줄 원하면 3으로 변경 */
| |
| -webkit-box-orient: vertical;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| white-space: normal; /* 줄바꿈 허용 */
| |
| line-height: 1.2;
| |
| padding-right: 4rem; /* 오른쪽 아이콘 자리 확보 (필요하면 값 조정) */
| |
| }
| |
|
| |
| /* 3. 제목 영역이 남는 공간을 차지하도록 */
| |
| .minerva-header .branding-box {
| |
| flex: 1 1 auto;
| |
| }
| |
|
| |
| /* 4. 검색 + 언어 아이콘을 오른쪽 상단에 고정 */
| |
| .minerva-header .minerva-user-navigation {
| |
| position: absolute;
| |
| top: 4px; /* 위 여백 – 필요하면 0~8px 정도로 조정 */
| |
| right: 8px; /* 오른쪽 여백 */
| |
| display: flex;
| |
| gap: 8px;
| |