/* ===================================
   mrcc-status.css
   의학연구협력센터(MRCC) 현황안내 페이지 전용 스타일
   범위: 08_mrcc/020_status.html 한정
   =================================== */

/* 년도 필터는 표준 .board-search 컴포넌트 사용 — 페이지 고유 룰 없음 */

/* 섹션 제목 옆 부제 (전체 N건 표기용) */
.page-mrcc-status .content-block__title-sub {
  margin-left: var(--gap-button-group);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--color-gray-600);
  vertical-align: middle;
}


/* stat-card 표준 컴포넌트는 sub-page.css에 정의 — 페이지 고유 룰 없음 */


/* ============================================
   §년도별 누적 막대 차트 — 표 대체용
   bar-chart > __inner (flex bottom-align) > __bar > __col(.height=%)
   막대 위에 값 표기는 ::before content: attr(data-value)
   ============================================ */
.page-mrcc-status .bar-chart {
  margin: var(--gap-layout-h2-body) 0 var(--gap-layout-tab-content);
  padding: var(--space-5) var(--space-4) var(--space-3);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.page-mrcc-status .bar-chart__inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--gap-inline-icon);
  height: 240px;
  padding-top: 28px;
  border-bottom: 1px solid var(--color-gray-300);
}

.page-mrcc-status .bar-chart__bar {
  flex: 1 1 0;
  min-width: 20px;
  max-width: 36px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.page-mrcc-status .bar-chart__col {
  display: block;
  width: 100%;
  background-color: var(--color-primary-500);
  background-image: linear-gradient(to top, var(--color-primary-700), var(--color-primary-400));
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 6px;
  box-sizing: border-box;
  /* 동적 막대 높이: JS가 데이터 기반으로 --bar-h(%)를 주입 (정적 sem-style 클래스 대체) */
  height: var(--bar-h, 0%);
}

.page-mrcc-status .bar-chart__col::before {
  content: attr(data-value);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-primary-700);
  white-space: nowrap;
}

.page-mrcc-status .bar-chart__labels {
  display: flex;
  justify-content: center;
  gap: var(--gap-inline-icon);
  margin-top: var(--gap-button-group);
}

.page-mrcc-status .bar-chart__label {
  flex: 1 1 0;
  min-width: 20px;
  max-width: 36px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-gray-700);
}

@media (max-width: 767px) {
  .page-mrcc-status .bar-chart {
    overflow-x: auto;
  }
  .page-mrcc-status .bar-chart__inner,
  .page-mrcc-status .bar-chart__labels {
    min-width: 600px;
  }
}

/* ===================================
   월별 현황 표 — 데이터 셀(건수) 가운데 정렬
   (헤더는 가운데인데 값만 좌측 치우침 보정)
   =================================== */
.page-mrcc-status table[data-monthly] tbody td {
  text-align: center;
}

/* ===================================
   월별 현황 표 — 지난 기간(경과한 월) 컬럼 강조
   회색 기본 배경과 구분되도록 파란 톤으로 표시 (JS가 .is-past 부여)
   =================================== */
.page-mrcc-status table[data-monthly] thead th.is-past {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
}
.page-mrcc-status table[data-monthly] tbody td.is-past {
  background-color: var(--color-primary-50);
  font-weight: var(--fw-semibold);
}