/* B01 대시보드 항목별 탭(92장) — 탭 줄 · 개요 · 프로젝트 · 회사 · 시스템. 색은 테마 변수만. */ .b01-dashboard__page { display: flex; flex-direction: column; gap: var(--spacing-24); } /* 탭 줄 — B08 위 탭과 같은 꼴 · 회사 고르기 알약은 오른쪽 끝 */ .b01-dashboard__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); padding-bottom: var(--spacing-8); border-bottom: 1px solid var(--color-border); } .b01-dashboard__tabs .b01-dashboard__company-pill { margin-right: 0; margin-left: auto; } /* 개요 — 눌러서 탭으로 가는 숫자 칸 */ .b01-dashboard__overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-8); } .b01-dashboard__metric--link { flex-direction: column; align-items: flex-start; justify-content: flex-start; color: inherit; font: inherit; text-align: left; cursor: pointer; } .b01-dashboard__metric--link:hover, .b01-dashboard__metric--link:focus-visible { border-color: var(--color-royal-amethyst); outline: none; } .b01-dashboard__metric--link .b01-dashboard__metric-value { font-size: var(--text-subheading); } .b01-dashboard__metric--alert .b01-dashboard__metric-value { color: var(--color-danger); } .b01-dashboard__overview-title { margin: 0 0 var(--spacing-8); color: var(--color-text-secondary); font-size: var(--text-caption); font-weight: var(--font-weight-medium); } .b01-dashboard__overview, .b01-dashboard__overview-block { display: flex; flex-direction: column; gap: var(--spacing-8); } /* 찾기 · 거르기 줄 */ .b01-dashboard__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-16); margin-bottom: var(--spacing-16); } .b01-dashboard__filters .ui-field { min-width: 180px; } /* 쪽 넘김 */ .b01-dashboard__pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); margin-top: var(--spacing-8); color: var(--color-text-secondary); font-size: var(--text-caption); } .b01-dashboard__pager-count { margin-right: auto; } /* 회사 정보 칸 */ .b01-dashboard__info { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-16); margin: 0 0 var(--spacing-16); } .b01-dashboard__info dt { color: var(--color-text-secondary); font-size: var(--text-caption); } .b01-dashboard__info dd { margin: var(--spacing-4) 0 0; font-size: var(--text-body-sm); overflow-wrap: anywhere; } .b01-dashboard__asset-thumb { display: block; max-height: 32px; max-width: 96px; object-fit: contain; } /* 시스템 — 기간 고르기 줄 */ .b01-dashboard__period { display: flex; align-items: center; gap: var(--spacing-8); margin-bottom: var(--spacing-8); } .b01-dashboard__period .ui-btn[aria-pressed="true"] { pointer-events: none; } .b01-dashboard__inquiry-state { white-space: nowrap; } @media (max-width: 720px) { .b01-dashboard__grid { grid-template-columns: minmax(0, 1fr); } .b01-dashboard__tabs .b01-dashboard__company-pill { margin-left: 0; } } .b01-dashboard__ellipsis { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }