* {
  font-family: '맑은 고딕', 'Malgun Gothic', sans-serif !important;
  font-size: 11pt !important;
}

body {
  background-color: #f6f7f9;
}

/* 재고월수 기준관리 페이지의 카드 소제목: 기본 11pt보다 2pt 크게(13pt) + 볼드 */
.stock-threshold-subtitle {
  font-size: 13pt !important;
  font-weight: bold;
}

.navbar-brand {
  font-weight: 700;
}

.card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
}

table.table-sm td,
table.table-sm th {
  vertical-align: middle;
}

.remark-line {
  font-size: 8pt !important;
}

.material-status-table,
.material-status-table * {
  font-size: 10pt !important;
}

/* Aging 전환예상 상세(압축형 보고서) 페이지 전용 폰트 크기 */
.compact-report-page,
.compact-report-page * {
  font-size: 9pt !important;
}

.compact-report-page .group-row-1 {
  background-color: #e9ecef;
  font-weight: 700;
}

.compact-report-page .group-row-2 {
  background-color: #f4f5f6;
  font-weight: 600;
}

.compact-report-page .group-row-3 {
  font-weight: 600;
}

.compact-report-page .indent-1 {
  padding-left: 1.25rem !important;
}

.compact-report-page .indent-2 {
  padding-left: 2.5rem !important;
}

.compact-report-page .indent-3 {
  padding-left: 3.75rem !important;
}

/* MB51 증가/감소·이동유형별 상세내역 피벗 테이블 전용 폰트 크기 */
.mb51-pivot-table,
.mb51-pivot-table * {
  font-size: 10pt !important;
}

.mb51-pivot-table td,
.mb51-pivot-table th {
  white-space: nowrap;
}

/* 대시보드 박스 제목 줄: 버튼이 있는 제목(3,4번)과 없는 제목(1,2번)의 높이를 통일해
   같은 행에 있는 박스들의 윗변이 항상 나란히 정렬되도록 함.
   margin-bottom도 좁혀(기존 Bootstrap mb-2=0.5rem) 제목~박스 간 줄간격을 압축, 4개 박스가 화면에 잘리지 않게 함 */
.dash-box-title {
  min-height: 2.25rem;
  margin-bottom: 0.35rem !important;
}

/* "※ 안내문" 줄: 각 ※ 문장을 별도 줄로 나누되(부모 쪽에서 <p>를 분리), 줄바꿈된 본문은 ※ 뒤
   텍스트 시작 위치에 맞춰 정렬(행잉 인덴트)한다 — ※ 기호 자체는 줄바꿈되지 않는 폭만 차지. */
.note-line {
  display: flex;
  align-items: flex-start;
  gap: 0.3em;
}
.note-line > .note-mark {
  flex: 0 0 auto;
}
.note-line > .note-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* FCST 소진 예상 품목 표: "수량(kg)"/"금액(억원)" 탭 전환 시 해당하지 않는 열은 숨김 */
table.mode-qty .col-amt {
  display: none;
}
table.mode-amount .col-qty {
  display: none;
}

/* 전략재고 소진 예상 품목 표에서, 이번 달 FCST 계획이 없는 자재를 눈에 띄게 강조(하늘색) */
.table-nofcst > td,
.table-nofcst > th {
  background-color: #d6f0ff;
}

/* 목록 페이지의 표: 항목이 몇 개든 박스(카드) 높이는 항상 고정, 넘치는 항목은 박스 안에서(우측 스크롤바로)
   스크롤 처리해 페이지 레이아웃이 절대 바뀌지 않도록 한다. thead는 스크롤해도 계속 보이도록 상단 고정. */
.list-table-scroll {
  height: 420px;
  overflow-y: auto;
}
.list-table-scroll thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

/* 좌측 사이드바 네비게이션 */
.sidebar {
  width: 220px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.sidebar-brand {
  font-size: 1.25rem;
  font-weight: 700;
}

.sidebar-brand-sub {
  font-size: 8pt !important;
  opacity: 0.65;
  letter-spacing: 0.02em;
}

.sidebar-link {
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
}

.sidebar-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.15);
}

/* 사이드바 메뉴 그룹 제목(인사정보/재고자산 등): 클릭 불가, 하위 메뉴 구분용 */
.sidebar-section-title {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 11pt !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 0.75rem 0.2rem;
}

.sidebar-section-title:first-child {
  padding-top: 0;
}

/* 그룹 하위 메뉴: 살짝 들여쓰기해 상위 그룹과의 관계를 시각적으로 표시 */
.sidebar-sublink {
  padding-left: 1.5rem !important;
}

/* "대시보드" 메뉴: 그룹 제목(인사정보 등)과 동일한 폰트 크기/굵기, 색상만 흰색.
   nav-link 기본 좌측 padding(1rem)이 section-title(0.75rem)보다 넓어 살짝 밀려 보이던 것을 맞춤 */
.sidebar-link-top {
  font-size: 11pt !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff !important;
  padding-left: 0.75rem !important;
}

.main-content {
  min-width: 0;
}

/* 대시보드 박스4 차트 제목줄: 기존 11pt보다 2pt 크게 */
.dash-chart-title {
  font-size: 13pt !important;
}

/* 재고자산 차트 제목 좌우의 전략재고/일반재고 합계: 기본 11pt보다 1pt 작게, 줄간격을 좁혀 3줄이 컴팩트하게 보이도록 */
.dash-stock-summary-block {
  font-size: 10pt !important;
  line-height: 1.3;
  white-space: nowrap;
}

.dash-stock-summary-date {
  font-weight: 700;
  text-decoration: underline;
}

/* 전월/당월 전략재고·일반재고 요약 표를 감싸는 박스: 그래프와 겹치지 않도록 별도 흐름으로 분리하고
   외곽선으로 시각적으로 구분(2026-08) */
.dash-stock-summary-box {
  display: inline-block;
  align-self: flex-start;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 2px 4px;
}

/* 재고자산 차트 좌측 상단에 얹는 전월/당월 전략재고·일반재고 요약 표: 기본 11pt보다 1pt 작게,
   촘촘한 여백으로 차트 위에 겹쳐 보이지 않을 만큼 컴팩트하게 표시 */
.dash-stock-summary-table {
  font-size: 10pt !important;
  border-collapse: collapse;
}
.dash-stock-summary-table th,
.dash-stock-summary-table td {
  padding: 1px 6px;
  white-space: nowrap;
}
.dash-stock-summary-table .dash-stock-summary-total td {
  border-top: 1px solid #333;
}

/* 전 페이지 공통 좌측 상단 제목: 기존 11pt보다 2pt 크게(13pt) + 볼드. 모든 화면에 동일 적용 */
.page-title,
.dash-page-title,
.fcst-material-title {
  font-size: 13pt !important;
  font-weight: 700 !important;
}

/* 대시보드 본문 배율. zoom은 transform과 달리 레이아웃이 실제로 다시 계산되어 반응형 그리드
   (col-md-6 등)도 축소된 크기 기준으로 정상 동작한다(Chromium/Edge 계열 지원). */
.dash-zoom {
  zoom: 90%;
}

/* 대시보드 표 배경을 박스 배경(투명 → body 배경 노출)과 동일하게: Bootstrap .table 기본값
   (--bs-table-bg: #fff)을 표 단위로 덮어씀 */
.dash-table-flat {
  --bs-table-bg: transparent;
}

/* 대시보드 일부 표의 글자크기를 기본 11pt보다 1pt 작게 */
.dash-table-sm10,
.dash-table-sm10 * {
  font-size: 10pt !important;
}

/* 대시보드 표 셀 텍스트가 줄바꿈되지 않도록: 컬럼이 좁아도 내용 폭만큼 늘어나고, 그래도 넘치면
   부모 스크롤 컨테이너(overflow:auto)가 가로 스크롤을 대신 처리한다 */
.dash-table-nowrap td,
.dash-table-nowrap th {
  white-space: nowrap;
}

/* 세부품목 증감사항 표: 구분(첫 컬럼) 그룹이 바뀌는 경계를 검정 이중선으로 표시해 가독성을 높임 */
.dash-group-divider {
  border-top: 4px double #000 !important;
}

/* 세부품목 증감사항 표: 총계 행 + 열 제목 행 2단 모두 틀고정 + 가운데 정렬(대시보드 박스/상세페이지 공용).
   대시보드 박스 안에서는 배경이 박스 배경(#f6f7f9)과 같아야 하고, 별도 상세페이지의 흰 카드 안에서는
   흰 배경이어야 스크롤되는 본문 위로 자연스럽게 덮인다 */
.dash-detail-table thead th {
  position: sticky;
  z-index: 2;
  box-shadow: inset 0 -1px 0 #dee2e6;
  text-align: center;
}
.dash-detail-table thead tr:first-child th {
  top: 0;
}
.dash-detail-table thead tr:nth-child(2) th {
  top: var(--thead-row1-h, 28px);
}
.dash-detail-table.dash-detail-table-dash thead th {
  background-color: #f6f7f9;
}
.dash-detail-table:not(.dash-detail-table-dash) thead th {
  background-color: #fff;
}

/* 총계 행: 네이비 배경 + 흰 글씨로 강조(재고자산 그래프의 정상재고-전략재고 계열과 동일한 네이비 톤) */
.dash-total-row th {
  background-color: #002b57 !important;
  color: #fff !important;
}

/* 구분별 소계 행 강조 */
.dash-subtotal-row td {
  background-color: rgba(0, 0, 0, 0.03);
}

/* 증감사유 칸: GAP 등 인접 칸과 붙어 보이지 않도록 좌측에 2글자(2em) 들여쓰기 */
.dash-reason-cell {
  padding-left: calc(0.5rem + 2em) !important;
}

/* 네이비 배경의 총계 행에서도 음수 GAP은 빨간색이 눈에 띄도록 별도 톤 사용 */
.dash-total-row th.text-danger {
  color: #ff8080 !important;
}

/* 대시보드 박스 2단 배치: Bootstrap col-md-6은 "실제 브라우저 뷰포트" 기준 미디어쿼리로만 줄바꿈되어,
   화면 비율(줌)이 올라가 박스 내부 그래프/범례가 비좁아지는 상황에서는 반응하지 못하고 그대로 찌그러진
   채 표시될 수 있다. 대신 flex-wrap을 써서 "이 행에 실제로 렌더링되는 폭"이 부족해지면(줌이든 창
   크기든 원인과 무관하게) 두 박스가 자동으로 아래로 줄바꿈되어, 내용이 깨져 보이는 대신 세로로
   쌓이도록 한다. */
.dash-flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.dash-flex-col {
  flex: 1 1 700px;
  min-width: 700px;
  max-width: 100%;
}

/* 대시보드 박스1(인원현황): 좁은 열에서도 글자가 줄바꿈되지 않도록 함 */
.dash-hc-box,
.dash-hc-box * {
  white-space: nowrap;
}

/* 박스1 좌우 폭 비율: 박스를 5등분했을 때 T/O·P/O는 2/5, 부서별 인원수는 3/5 */
.dash-hc-left {
  flex: 0 0 40%;
  max-width: 40%;
}

.dash-hc-right {
  flex: 0 0 60%;
  max-width: 60%;
}

/* 좌측 T/O·P/O 표: 기존보다 2pt 크게(가운데 정렬은 dash-hc-left의 flex 중앙 배치로 처리) */
.dash-hc-to-po {
  width: 190px;
}

.dash-hc-to-po,
.dash-hc-to-po * {
  font-size: 13pt !important;
}

/* 박스2(기술직 인건비 현황) 좌측 상단 단위 표기: 기존보다 2pt 작게 */
.dash-hc-unit {
  font-size: 9pt !important;
}

.dash-hc-div-table,
.dash-hc-div-table * {
  font-size: 11pt !important;
}

.dash-hc-div-table {
  --bs-table-bg: #f6f7f9;
  --bs-table-border-color: #f6f7f9;
  background-color: #f6f7f9;
}

.dash-hc-div-table th,
.dash-hc-div-table td {
  vertical-align: middle;
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
  line-height: 1.1;
}

/* 부서(사업부/센터) 그룹 사이를 한 줄 띄워 시각적으로 구분 */
.dash-hc-div-table .dash-hc-spacer-row td {
  padding-top: 0.35rem;
  padding-bottom: 0;
  border: none;
}

/* 부서명은 왼쪽 정렬, 하위 조직(팀/파트)은 상위 조직보다 3pt 더 들여쓰기 */
.dash-hc-div-table .dash-hc-div-label {
  text-align: left;
  padding-left: 0;
}

.dash-hc-div-table .dash-hc-child-label {
  padding-left: 15pt;
}

/* 박스 우측 상단 단위 표기: 차트 제목줄(13pt)의 1/2 크기 */
.dash-chart-unit-badge {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 6.5pt !important;
  color: #6c757d;
}

/* 인원현황 상세표: 열 너비를 내용에 맞춰 고정(구분/부서/파트는 글자 수에 맞춰,
   T/O·P/O·증감의 9개 열은 "사무직" 글자 폭 기준으로 모두 동일하게, 비고는 엑셀 열너비 45 기준) */
.headcount-table {
  table-layout: fixed;
}

.headcount-table .col-label {
  width: 95px;
}

.headcount-table .col-num {
  width: 56px;
}

.headcount-table .col-remark {
  width: 320px;
}

.headcount-table .headcount-input {
  width: 46px;
  display: inline-block;
  margin: 0 auto;
  padding-left: 2px;
  padding-right: 2px;
}

.headcount-table th,
.headcount-table td {
  vertical-align: middle;
}

/* 인원현황 "조직도" 탭: 순수 CSS 조직도(중첩 리스트 + 연결선). 자식이 하나뿐인 노드는
   headcountRosterAnalysis.js에서 이미 평탄화되어 오므로 여기서는 트리 그리기만 담당 */
.org-chart,
.org-chart ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.org-chart {
  text-align: center;
  overflow-x: auto;
  padding-bottom: 8px;
}

.org-chart ul {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  position: relative;
}

.org-chart li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 8px 0 8px;
  position: relative;
}

.org-chart li::before,
.org-chart li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid #b7c3d6;
  width: 50%;
  height: 20px;
}

.org-chart li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid #b7c3d6;
}

.org-chart li:only-child::before,
.org-chart li:only-child::after {
  display: none;
}

.org-chart li:only-child {
  padding-top: 0;
}

.org-chart li:first-child::before,
.org-chart li:last-child::after {
  border: 0 none;
}

.org-chart li:last-child::before {
  border-right: 2px solid #b7c3d6;
  border-radius: 0 6px 0 0;
}

.org-chart li:first-child::after {
  border-radius: 6px 0 0 0;
}

.org-chart ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #b7c3d6;
  width: 0;
  height: 20px;
}

.org-box {
  display: inline-block;
  border-radius: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #4472c4, #7ba0dd);
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  min-width: 88px;
  white-space: nowrap;
  font-size: 8.5pt !important;
}

.org-box .org-box-count {
  font-weight: 400;
  font-size: 7.5pt !important;
}

/* 인원현황표(명부 기반) 탭1 표: 열 너비를 내용에 맞춰 고정 */
.roster-headcount-table {
  table-layout: fixed;
}

.roster-headcount-table .col-label {
  width: 150px;
  white-space: nowrap;
}

.roster-headcount-table .col-num {
  width: 62px;
}

.roster-headcount-table .col-remark {
  width: 260px;
}

.roster-headcount-table th,
.roster-headcount-table td {
  vertical-align: middle;
}

.roster-headcount-table .remark-input {
  width: 100%;
  padding-left: 4px;
  padding-right: 4px;
}

/* 직위별 인원 현황(rank-table): 구분/직위 열은 글자 폭 수준으로 좁게, 인원수 열은 전부 동일한 너비로 고정 */
.rank-table {
  table-layout: fixed;
}

.rank-table .col-group {
  width: 48px;
}

.rank-table .col-rank {
  width: 64px;
  white-space: nowrap;
}

.rank-table .col-num {
  width: 56px;
}

.rank-table th,
.rank-table td {
  vertical-align: middle;
}

.org-box.org-box-root {
  background: linear-gradient(135deg, #1f3864, #2f5597);
}

/* 인건비 현황 상세표 */
.laborcost-table th,
.laborcost-table td {
  vertical-align: middle;
  white-space: nowrap;
}

/* 예산 대비 실적 요약표의 "예산(연간) :" / "실적(누적) :" 라벨: 기본 11pt보다 2pt 크게 했다가(13pt),
   너무 커 보인다는 피드백으로 1.5pt 다시 줄임(11.5pt) + 볼드 유지 */
.laborcost-summary-label {
  font-size: 11.5pt !important;
  font-weight: bold;
}

.laborcost-table .laborcost-highlight {
  background-color: #dbe5f1;
}

.laborcost-table .laborcost-input {
  width: 64px;
  display: inline-block;
  margin: 0 auto;
  padding-left: 2px;
  padding-right: 2px;
}

/* FCST 품목상세 재고내역 표: "대상제품 재고내역"·"BOM 구성품 재고 내역" 두 표의 열너비를 동일하게 고정 */
.fcst-stock-table {
  table-layout: fixed;
}

.fcst-stock-table .col-code {
  width: 110px;
}

.fcst-stock-table .col-category {
  width: 80px;
}

.fcst-stock-table .col-family {
  width: 160px;
}

.fcst-stock-table .col-qty {
  width: 130px;
}

.fcst-stock-table .col-eq {
  width: 170px;
}

/* 제목줄(헤더)까지 틀고정: 표를 아래로 스크롤해도 <thead>가 화면 상단에 고정되어 항상 보임 */
.sticky-header-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #dee2e6;
}

/* 예산집행현황: 엑셀 원본처럼 월별 컬럼을 모두 펼치면 표가 매우 넓어져 가로 스크롤이 필요함.
   첫 컬럼(비목/부서)은 가로 스크롤 중에도 항상 보이도록 좌측 고정하고, 헤더는 2단(그룹행+월행) 모두
   세로 스크롤 중 상단에 고정한다. 2행 헤더의 두번째 행 top 오프셋은 첫 행 실제 높이에 맞춰 JS가
   --thead-row1-h로 설정한다(폰트/줌 배율에 따라 높이가 달라질 수 있어 하드코딩하지 않음). */
.budget-wide-table,
.budget-wide-table * {
  font-size: 8.5pt !important;
}
/* 비목/부서, 차이 사유를 뺀 나머지 열은 colgroup에 지정한 폭(76px)을 그대로 따르도록 고정 레이아웃 사용.
   (기본 auto 레이아웃은 내용에 따라 열 폭이 제각각 늘어나 GAP/월별/년계 열 폭이 서로 안 맞았다.) */
.budget-wide-table {
  table-layout: fixed;
}
.budget-wide-table thead th {
  position: sticky;
  z-index: 3;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #dee2e6;
  text-align: center;
}
.budget-wide-table thead tr:first-child th {
  top: 0;
}
.budget-wide-table thead tr:nth-child(2) th {
  top: var(--thead-row1-h, 34px);
}
.budget-wide-table th:first-child,
.budget-wide-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--bs-table-bg, #fff);
  box-shadow: inset -1px 0 0 #dee2e6;
}
.budget-wide-table thead th:first-child {
  z-index: 4;
}

/* 월별/년계 보기 전환: "년계" 모드에서는 월별 상세 컬럼(1~12월)을 모두 숨기고 년계 합계 컬럼만 남긴다.
   <col>과 셀(th/td) 양쪽 다 숨겨야 숨긴 컬럼 자리에 빈 폭이 남지 않는다. */
.budget-wide-table.view-annual .month-col {
  display: none;
}

/* 년계(합계) 컬럼은 다른 월별 상세 컬럼과 구분되도록 글자를 조금 더 크게, 파란색으로 강조 */
.budget-wide-table .col-annual-total {
  font-size: 9.5pt !important;
  color: #0d6efd !important;
}

/* 열 대분류(GAP/계획/Target/실적) 경계를 이중선(검정)으로 명확히 구분 */
.budget-wide-table .grp-div {
  border-left: 4px double #000 !important;
}

/* 로그인 직후 첫 화면(오프닝): 좌측 메뉴는 그대로 두고, 콘텐츠 영역에 회사 공식 보고서 표지 이미지를 그대로 표시.
   이미지 원본(public/img/opening-cover.png, 1536x1024)에서 "관리월보"→"관리일보", "2025"→"2026" 두 글자와
   로딩 스피너/문구를 보정한다. 패치는 flat 배경색 대신 backdrop-filter: blur()로 그 자리의 원본 배경을
   흐려서 원문을 지우고(색상은 원본 그대로라 이음새가 거의 안 보임), 그 위에 새 텍스트를 얹는 방식이라
   patch임이 티가 나지 않는다. 흐림 정도/글자 크기는 opening.ejs의 스크립트가 이미지 렌더 폭에 비례해 JS로 계산한다.
   자동 전환 없이 사용자가 좌측 메뉴를 클릭할 때까지 이 화면에 머무른다. */
.opening-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 6rem);
}

.opening-hero-image-wrap {
  position: relative;
  width: min(1360px, 82%);
}

.opening-hero-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(20, 40, 80, 0.12);
}

.opening-hero-patch {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opening-hero-patch-title {
  left: 29.5%;
  top: 43%;
  width: 41.5%;
  height: 14%;
  background: #f6f8fc;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #16233f;
  white-space: nowrap;
}

.opening-hero-patch-year {
  left: 31.5%;
  top: 92.9%;
  width: 3.9%;
  height: 2.5%;
  background: #e7eefb;
  color: #8896ab;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.opening-hero-patch-loading {
  left: 44.5%;
  top: 72.3%;
  width: 10.6%;
  height: 15.2%;
  background: #f9fbfd;
}

.opening-hero-patch-hint {
  left: 10%;
  top: 74.5%;
  width: 80%;
  height: 6%;
  text-align: center;
  color: #6b7a94;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-size: 13pt !important;
}

/* FCST 전체 재고자산 소진 추이: 완제품 FCST 반영 현황 + 상세버튼을 노란 음영으로 강조 */
.fcst-coverage-highlight {
  background-color: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  color: #664d03 !important;
}