/* ===================================
   ctc-research.css
   임상시험센터(CTC) 연구성과 페이지 전용 스타일
   범위: 02_ctc/013_research.html 한정
   규칙: 인라인 style 금지(높이 %는 CSS custom property --h만 허용),
         <style> 태그 금지, 색상은 디자인 토큰 사용
   =================================== */

/* ============================================
   §페이지 전용 색상 변수
   (디자인 토큰에 없는 노랑/오렌지/마젠타/cyan은 페이지 prefix 안에서만 정의)
   ============================================ */
.page-ctc-research {
  --ctc-chart-yellow:  #F4B400;
  --ctc-chart-orange:  #F4811F;
  --ctc-chart-magenta: #C9305C;
  --ctc-chart-cyan:    #2BB3D1;
}

/* ============================================
   §공용 차트 래퍼
   ============================================ */
.page-ctc-research .ctc-chart {
  margin: var(--gap-card-icon-text) 0 var(--gap-layout-tab-content);
  padding: var(--space-5) var(--space-5) var(--space-4);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.page-ctc-research .ctc-chart__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--gap-layout-h3-body);
  padding-top: var(--gap-layout-tab-content);
  border-bottom: 1px solid var(--color-gray-300);
  position: relative;
}

/* 혈액종양내과(gridded) 차트: Y축 눈금(0~max)·가로 그리드선 — 1상 차트처럼 보조축 표시 */
.page-ctc-research .ctc-chart--gridded .ctc-chart__inner {
  height: 280px;
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(20% - 1px),
    var(--color-gray-200) calc(20% - 1px),
    var(--color-gray-200) 20%
  );
}

.page-ctc-research .ctc-chart--gridded .ctc-chart__y-axis {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 36px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  padding: 0 var(--space-1) 0 0;
  pointer-events: none;
}
.page-ctc-research .ctc-chart--gridded .ctc-chart__y-tick {
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  line-height: 1;
  transform: translateY(50%);
}

/* 차트 1·2 — 막대 위 데이터 라벨용 여백 */
.page-ctc-research .ctc-chart--grouped .ctc-chart__inner {
  height: 260px;
}
.page-ctc-research .ctc-chart--mix .ctc-chart__inner {
  height: 280px;
}

/* 신규개시(grouped) 값 라벨: 항상 표시 + 3자리(154 등) 겹침 방지
   — 라벨 폰트 축소(16→14) + 막대 간격 확대(3→10)로 인접 라벨 이격 확보 */
.page-ctc-research .ctc-chart--grouped .ctc-chart__bar-value {
  opacity: 1;
  font-size: var(--fs-tag);
}
.page-ctc-research .ctc-chart--grouped .ctc-chart__group-bars {
  gap: 10px;
}

/* ============================================
   §X축 그룹 (연도별)
   ============================================ */
.page-ctc-research .ctc-chart__group {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.page-ctc-research .ctc-chart__group-bars {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.page-ctc-research .ctc-chart__year {
  margin-top: var(--gap-layout-h3-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-800);
  line-height: 1;
}

/* ============================================
   §단일 막대(그룹 막대용)
   높이는 inline custom property --h(0~100%)로 지정
   ============================================ */
.page-ctc-research .ctc-chart__bar {
  position: relative;
  width: 14px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background-color: var(--color-primary-500);
}

.page-ctc-research .ctc-chart__bar--p1 { background-color: var(--color-primary-300); }
.page-ctc-research .ctc-chart__bar--p2 { background-color: var(--color-primary-700); }
.page-ctc-research .ctc-chart__bar--p3 { background-color: var(--color-gray-400); }
.page-ctc-research .ctc-chart__bar--total { background-color: var(--color-gray-300); }

/* 막대 위 값 라벨 */
.page-ctc-research .ctc-chart__bar-value {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -4px);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  white-space: nowrap;
  line-height: 1;
}
.page-ctc-research .ctc-chart__bar--p1 .ctc-chart__bar-value { color: var(--color-primary-700); }
.page-ctc-research .ctc-chart__bar--p2 .ctc-chart__bar-value { color: var(--color-primary-900); }
.page-ctc-research .ctc-chart__bar--p3 .ctc-chart__bar-value { color: var(--color-gray-700); }
.page-ctc-research .ctc-chart__bar--total .ctc-chart__bar-value { color: var(--color-gray-800); }

/* ============================================
   §누적 막대(stacked) — column-reverse + segment 높이 %
   ============================================ */
.page-ctc-research .ctc-chart__bar-stack {
  position: relative;
  width: 22px;
  min-height: 2px;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 3px 3px 0 0;
  overflow: visible;
  background-color: var(--color-gray-100);
}

/* 누적 막대 100% 채우는 차트(차트3)는 top segment에 border-radius 적용 */
.page-ctc-research .ctc-chart--gridded .ctc-chart__bar-stack > .ctc-chart__segment:last-child {
  border-radius: 3px 3px 0 0;
}

.page-ctc-research .ctc-chart__segment {
  width: 100%;
  min-height: 1px;
}

/* 1상 차트 — 4-segment 누적 (약리/그외/FIH/GFIH) */
.page-ctc-research .ctc-chart__segment--pharm { background-color: var(--color-primary-900); }
.page-ctc-research .ctc-chart__segment--etc   { background-color: var(--color-primary-500); }
.page-ctc-research .ctc-chart__segment--fih   { background-color: var(--ctc-chart-yellow); }
.page-ctc-research .ctc-chart__segment--gfih  { background-color: var(--ctc-chart-magenta); }

/* 혈종 차트 — 1상/2상/3상 누적 */
.page-ctc-research .ctc-chart__segment--p1 { background-color: var(--color-primary-700); }
.page-ctc-research .ctc-chart__segment--p2 { background-color: var(--ctc-chart-orange); }
.page-ctc-research .ctc-chart__segment--p3 { background-color: var(--color-gray-400); }

/* 누적 segment 안의 값 라벨 (가운데) */
.page-ctc-research .ctc-chart__segment {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-ctc-research .ctc-chart__segment-value {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  line-height: 1;
}

/* 누적 막대 위 합계 값(차트 3) */
.page-ctc-research .ctc-chart__stack-total {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -4px);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-gray-700);
  white-space: nowrap;
  line-height: 1;
}

/* 혈종 단독 막대 위 값(차트 2: 혈종은 단일 막대) */
.page-ctc-research .ctc-chart__bar--blood {
  background-color: var(--ctc-chart-cyan);
  width: 22px;
}
.page-ctc-research .ctc-chart__bar--blood .ctc-chart__bar-value { color: var(--ctc-chart-cyan); }

/* 차트 2(mix) 전용 — 4개 막대 구조 (혈종 / 약리 / 그외 / 누적="총") */
.page-ctc-research .ctc-chart--mix .ctc-chart__group-bars { gap: 3px; }
.page-ctc-research .ctc-chart--mix .ctc-chart__bar { width: 18px; }
.page-ctc-research .ctc-chart--mix .ctc-chart__bar-stack { width: 22px; }

/* 단독 막대 색상 (1상 차트 한정) */
.page-ctc-research .ctc-chart--mix .ctc-chart__bar--blood { background-color: var(--ctc-chart-cyan); }
.page-ctc-research .ctc-chart--mix .ctc-chart__bar--blood .ctc-chart__bar-value { color: var(--ctc-chart-cyan); }

.page-ctc-research .ctc-chart--mix .ctc-chart__bar--pharm { background-color: var(--color-primary-900); }
.page-ctc-research .ctc-chart--mix .ctc-chart__bar--pharm .ctc-chart__bar-value { color: var(--color-primary-900); }

.page-ctc-research .ctc-chart--mix .ctc-chart__bar--etc { background-color: var(--color-primary-500); }
.page-ctc-research .ctc-chart--mix .ctc-chart__bar--etc .ctc-chart__bar-value { color: var(--color-primary-700); }

/* 누적 막대 = "총". 배경은 gray(나머지 영역), 안에 GFIH/FIH segment 누적 */
.page-ctc-research .ctc-chart--mix .ctc-chart__bar-stack { background-color: var(--color-gray-300); }

/* 차트 2 누적 segment 색 재정의 (단독 막대 색과 분리) */
.page-ctc-research .ctc-chart--mix .ctc-chart__segment--gfih { background-color: var(--ctc-chart-magenta); }
.page-ctc-research .ctc-chart--mix .ctc-chart__segment--fih  { background-color: var(--ctc-chart-yellow); }

/* segment value 가독성 — 흰색 + shadow */
.page-ctc-research .ctc-chart--mix .ctc-chart__segment-value {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* 누적 막대 위 합계(총) 라벨 */
.page-ctc-research .ctc-chart--mix .ctc-chart__stack-total {
  color: var(--color-gray-700);
}

/* ============================================
   §범례
   ============================================ */
.page-ctc-research .ctc-chart__legend {
  list-style: none;
  margin: var(--gap-card-icon-text) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-layout-h2-body);
}

.page-ctc-research .ctc-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-button-group);
  font-size: var(--fs-small);
  color: var(--color-gray-800);
}

.page-ctc-research .ctc-chart__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-ctc-research .ctc-chart__legend-dot--p1     { background-color: var(--color-primary-300); }
.page-ctc-research .ctc-chart__legend-dot--p2     { background-color: var(--color-primary-700); }
.page-ctc-research .ctc-chart__legend-dot--p3     { background-color: var(--color-gray-400); }
.page-ctc-research .ctc-chart__legend-dot--total  { background-color: var(--color-gray-300); }
.page-ctc-research .ctc-chart__legend-dot--blood  { background-color: var(--color-primary-500); }
.page-ctc-research .ctc-chart__legend-dot--pharm  { background-color: var(--color-primary-900); }
.page-ctc-research .ctc-chart__legend-dot--etc    { background-color: var(--color-primary-500); }
.page-ctc-research .ctc-chart__legend-dot--fih    { background-color: var(--ctc-chart-yellow); }
.page-ctc-research .ctc-chart__legend-dot--gfih   { background-color: var(--ctc-chart-magenta); }
.page-ctc-research .ctc-chart__legend-dot--blood-p1 { background-color: var(--color-primary-700); }
.page-ctc-research .ctc-chart__legend-dot--blood-p2 { background-color: var(--ctc-chart-orange); }
.page-ctc-research .ctc-chart__legend-dot--blood-p3 { background-color: var(--color-gray-400); }

/* ============================================
   §동적 막대 — 높이는 --h(custom property)로 지정
   평소 0 → 차트가 뷰포트 진입 시 .is-animated로 var(--h)까지 차오름
   ============================================ */
.page-ctc-research .ctc-chart__bar,
.page-ctc-research .ctc-chart__bar-stack {
  height: 0;
  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-ctc-research .ctc-chart.is-animated .ctc-chart__bar,
.page-ctc-research .ctc-chart.is-animated .ctc-chart__bar-stack {
  height: var(--h);
}
/* 누적 막대 내부 segment: 부모(stack) 높이에 비례 — 부모가 차오르면 함께 차오름 */
.page-ctc-research .ctc-chart__segment {
  height: var(--h);
}

/* ============================================
   §값 라벨 — 평소 숨김, 막대 hover·focus 시 표시(호버 수치)
   ============================================ */
.page-ctc-research .ctc-chart__bar-value,
.page-ctc-research .ctc-chart__stack-total,
.page-ctc-research .ctc-chart__segment-value {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.page-ctc-research .ctc-chart__bar:hover .ctc-chart__bar-value,
.page-ctc-research .ctc-chart__bar:focus-visible .ctc-chart__bar-value,
.page-ctc-research .ctc-chart__bar-stack:hover .ctc-chart__stack-total,
.page-ctc-research .ctc-chart__bar-stack:focus-within .ctc-chart__stack-total,
.page-ctc-research .ctc-chart__bar-stack:hover .ctc-chart__segment-value,
.page-ctc-research .ctc-chart__segment:hover .ctc-chart__segment-value {
  opacity: 1;
}
/* 막대 hover 시 가독성 강조 */
.page-ctc-research .ctc-chart__bar:hover,
.page-ctc-research .ctc-chart__bar-stack:hover {
  filter: brightness(0.93);
}

/* 모션 최소화 선호 시 — 차오름/페이드 전환 제거(값은 즉시 토글) */
@media (prefers-reduced-motion: reduce) {
  .page-ctc-research .ctc-chart__bar,
  .page-ctc-research .ctc-chart__bar-stack,
  .page-ctc-research .ctc-chart__bar-value,
  .page-ctc-research .ctc-chart__stack-total,
  .page-ctc-research .ctc-chart__segment-value {
    transition: none;
  }
}

/* ============================================
   §모바일 — 가로 스크롤 허용
   ============================================ */
@media (max-width: 767px) {
  .page-ctc-research .ctc-chart {
    overflow-x: auto;
  }
  .page-ctc-research .ctc-chart__inner {
    min-width: 720px;
  }
  .page-ctc-research .ctc-chart--mix .ctc-chart__inner {
    min-width: 900px;
  }
}

/* ============================================
   §요청 반영: 값 라벨 상시표시 + 보조선/보조축
   ============================================ */

/* R1) 신규 개시(grouped) 차트 — 값 라벨을 항상 표시 (hover 불필요) */
.page-ctc-research .ctc-chart--grouped .ctc-chart__bar-value {
  opacity: 1;
}

/* R2) 신규개시(grouped)·1상연구(mix) — Y축 보조선/보조축 (research-results.js가 눈금 생성) */
.page-ctc-research .ctc-chart--grouped .ctc-chart__inner,
.page-ctc-research .ctc-chart--mix .ctc-chart__inner {
  padding-left: 36px;
}
/* 막대(그룹)를 보조선 위로 */
.page-ctc-research .ctc-chart__group {
  position: relative;
  z-index: 1;
}
.page-ctc-research .ctc-chart__gridline {
  position: absolute;
  left: 36px;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--color-gray-300);
  pointer-events: none;
  z-index: 0;
}
.page-ctc-research .ctc-chart__axis-num {
  position: absolute;
  left: 0;
  width: 30px;
  text-align: right;
  font-size: var(--fs-small);
  line-height: 1;
  color: var(--color-gray-500);
  transform: translateY(50%);
  pointer-events: none;
  z-index: 0;
}