/* ===================================
   ctc-overview.css
   임상시험 정보 페이지(031 개요 · 033 윤리·참여 혜택) hub-spoke 다이어그램
   범위: page-ctc-overview(4-spoke) / page-ctc-ethics(3-spoke) 한정
   =================================== */

/* ===================================
   공통 — 풀 폭 배경 컨테이너
   .hub-diagram: 콘텐츠 영역 100% 채우는 회색 박스
   .hub-diagram__grid: 내부 다이어그램 그리드 (max-width 센터) */

.page-ctc-overview .hub-diagram,
.page-ctc-ethics .hub-diagram {
  margin-top: var(--gap-layout-h2-body);  /* var(--space-5): 위 텍스트와 간격 */
  margin-bottom: var(--space-0);          /* notice-box 자체 margin-top(space-6=var(--space-6))이 간격 담당 */
  padding: var(--space-10) 0;
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ===================================
   031 초기 임상시험 — 4-spoke
   - 3×3 CSS Grid: 중심 원 + 4방향(상·좌·우·하) 라벨 */

.page-ctc-overview .hub-diagram__grid {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  grid-template-rows: auto auto auto;
  /* col-gap 32px: 중심 ::after ring(inset -28px)보다 4px 여유 → 링과 라벨 분리 */
  gap: 36px var(--space-8);
  justify-items: center;
  align-items: center;
  padding: 0 var(--space-8);
  max-width: 760px;
  margin: 0 auto;
  position: relative; /* SVG 점선 컨테이너 절대 위치 기준 */
}

/* 4방향 라벨 박스 — primary 솔리드 + 둥근 모서리 (button = 클릭 시 모달 트리거) */
.page-ctc-overview .hub-diagram__label {
  padding: 14px 22px;
  background: var(--color-primary-500);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  border: none;
  border-radius: var(--radius-md);
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s ease;
}

/* button 변환 시 reset + hover/focus 인터랙션 (031, 033 공용) */
.page-ctc-overview button.hub-diagram__label,
.page-ctc-ethics button.hub-diagram__label {
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s ease;
}

.page-ctc-overview .hub-diagram__label:hover,
.page-ctc-overview .hub-diagram__label:focus-visible,
.page-ctc-ethics button.hub-diagram__label:hover,
.page-ctc-ethics button.hub-diagram__label:focus-visible {
  transform: translateY(-2px);
}

.page-ctc-overview .hub-diagram__label:focus-visible,
.page-ctc-ethics button.hub-diagram__label:focus-visible {
  outline: 3px solid var(--color-primary-500);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .page-ctc-overview .hub-diagram__label,
  .page-ctc-ethics button.hub-diagram__label {
    transition: none;
  }
  .page-ctc-overview .hub-diagram__label:hover,
  .page-ctc-overview .hub-diagram__label:focus-visible,
  .page-ctc-ethics button.hub-diagram__label:hover,
  .page-ctc-ethics button.hub-diagram__label:focus-visible {
    transform: none;
  }
}


.page-ctc-overview .hub-diagram__label--top    { grid-column: 2; grid-row: 1; }
.page-ctc-overview .hub-diagram__label--left   { grid-column: 1; grid-row: 2; justify-self: end; }
.page-ctc-overview .hub-diagram__label--right  { grid-column: 3; grid-row: 2; justify-self: start; }
.page-ctc-overview .hub-diagram__label--bottom { grid-column: 2; grid-row: 3; }

/* 중심 원 — PDF의 동심원 느낌을 ::before/::after pseudo-ring으로 표현 */
.page-ctc-overview .hub-diagram__center {
  grid-column: 2;
  grid-row: 2;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-text-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-block);
  text-align: center;
  line-height: 1.3;
  border: 3px solid var(--color-primary-500);
  position: relative;
  z-index: 2; /* SVG 점선 위에 표시 (점선 z:0, 라벨 z:1) */
}

.page-ctc-overview .hub-diagram__center::before,
.page-ctc-overview .hub-diagram__center::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.page-ctc-overview .hub-diagram__center::before {
  inset: -14px;
  border: 1px solid var(--color-primary-100);
}
.page-ctc-overview .hub-diagram__center::after {
  inset: -28px;
  border: 1px solid var(--color-primary-50);
}

/* 모바일 (768px 미만) — 수직 스택으로 전환 */
@media (max-width: 767px) {
  .page-ctc-overview .hub-diagram {
    padding: var(--space-6) 0;
    border-radius: var(--radius-md);
  }
  .page-ctc-overview .hub-diagram__grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    gap: var(--space-3);
    padding: 0 var(--space-5);
  }
  .page-ctc-overview .hub-diagram__label--top,
  .page-ctc-overview .hub-diagram__label--left,
  .page-ctc-overview .hub-diagram__label--right,
  .page-ctc-overview .hub-diagram__label--bottom {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    white-space: normal;
  }
  .page-ctc-overview .hub-diagram__center {
    grid-column: 1;
    grid-row: auto;
    width: 150px;
    height: 150px;
    margin: var(--space-1) auto;
  }
}

/* ===================================
   033 임상시험 윤리·참여 혜택 — 3-spoke 변형
   - 2-column 그리드: 상단(좌·우 라벨) + 중간(중심 ellipse — 본문) + 하단(중앙 라벨) */

.page-ctc-ethics .hub-diagram__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-10) 36px;
  justify-items: center;
  align-items: center;
  padding: 0 var(--space-8);
  max-width: 760px;
  margin: 0 auto;
  position: relative; /* SVG 점선 컨테이너 절대 위치 기준 */
}

.page-ctc-ethics .hub-diagram__label {
  padding: 22px 36px;
  min-width: 200px;
  background: var(--color-primary-500);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  border-radius: var(--radius-md);
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.page-ctc-ethics .hub-diagram__label--top-left  { grid-column: 1; grid-row: 1; }
.page-ctc-ethics .hub-diagram__label--top-right { grid-column: 2; grid-row: 1; }
.page-ctc-ethics .hub-diagram__label--bottom    { grid-column: 1 / -1; grid-row: 3; justify-self: center; }

/* 중심 원 — 본문 들어가도록 직경 키움 */
.page-ctc-ethics .hub-diagram__center {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 300px;
  height: 300px;
  padding: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-text-primary);
  font-size: var(--fs-block);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  text-align: center;
  border: 3px solid var(--color-primary-500);
  position: relative;
  z-index: 2;
}

.page-ctc-ethics .hub-diagram__center::before,
.page-ctc-ethics .hub-diagram__center::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.page-ctc-ethics .hub-diagram__center::before {
  inset: -14px;
  border: 1px solid var(--color-primary-100);
}
.page-ctc-ethics .hub-diagram__center::after {
  inset: -28px;
  border: 1px solid var(--color-primary-50);
}

@media (max-width: 767px) {
  .page-ctc-ethics .hub-diagram {
    padding: var(--space-6) 0;
    border-radius: var(--radius-md);
  }
  .page-ctc-ethics .hub-diagram__grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    gap: 14px;
    padding: 0 var(--space-5);
  }
  .page-ctc-ethics .hub-diagram__label--top-left,
  .page-ctc-ethics .hub-diagram__label--top-right,
  .page-ctc-ethics .hub-diagram__label--bottom {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    white-space: normal;
  }
  .page-ctc-ethics .hub-diagram__center {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: var(--radius-xl);
  }
}

/* ===================================
   공유 — Hub-diagram 점선 연결선 (031/033 공통)
   - SVG inline: <svg class="hub-diagram__lines"> + <line>들
   - hub-diagram__grid(position:relative) 기준으로 absolute 배치
   - z-index 0: 점선이 라벨(z:1)·중심원(z:2) 아래 → 라벨/원 영역에서 자동으로 가려짐
   =================================== */
.page-ctc-overview .hub-diagram__lines,
.page-ctc-ethics .hub-diagram__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.page-ctc-overview .hub-diagram__lines line,
.page-ctc-ethics .hub-diagram__lines line {
  stroke: var(--color-primary-300);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  fill: none;
}

/* 모바일(<768px)은 수직 스택이라 점선 숨김 */
@media (max-width: 767px) {
  .page-ctc-overview .hub-diagram__lines,
  .page-ctc-ethics .hub-diagram__lines {
    display: none;
  }
}