/* ===================================
   mrcc-apply-info.css
   의학연구협력센터(MRCC) 신청안내 페이지 전용 스타일
   범위: 08_mrcc/030_apply_info.html 한정
   목적: content-body__section 래퍼 사용 시 sibling 셀렉터로
         잡히지 않는 소제목 앞 여백 + 소제목과 카드 그리드 간 여백 보강
   =================================== */

/* 소제목 바로 아래 카드 그리드/표/도식 등 첫 자식 사이 여백 정리 */
.page-mrcc-apply-info .content-body__section .content-body__title + .icon-link-card-grid,
.page-mrcc-apply-info .content-body__section .content-body__title + .info-cards,
.page-mrcc-apply-info .content-body__section .content-body__title + .table-wrap,
.page-mrcc-apply-info .content-body__section .content-body__title + .process-steps {
  margin-top: var(--gap-card-icon-text);
}

/* ===================================
   기본요금 납부 안내 — 계좌 정보 박스
   (탭1 #4. 기본요금 영역에서만 사용)
   =================================== */
.page-mrcc-apply-info .bank-info-box {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--gap-card-icon-text) var(--gap-layout-tab-content);
  margin: var(--gap-layout-tab-content) 0;
  padding: 28px var(--space-8);
  background: var(--color-primary-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.page-mrcc-apply-info .bank-info-box__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-700);
  align-self: center;
}

.page-mrcc-apply-info .bank-info-box__value {
  font-size: var(--fs-block);
  font-weight: var(--fw-bold);
  color: var(--color-primary-700);
  letter-spacing: 0.02em;
  align-self: center;
}

.page-mrcc-apply-info .bank-info-box__value--text {
  font-size: var(--fs-body);
  color: var(--color-gray-900);
  font-weight: var(--fw-medium);
}

@media (max-width: 767px) {
  .page-mrcc-apply-info .bank-info-box {
    grid-template-columns: 1fr;
    gap: var(--gap-form-input-help) 0;
    padding: var(--space-5) var(--space-6);
  }
  .page-mrcc-apply-info .bank-info-box__label {
    margin-top: var(--gap-button-group);
  }
  .page-mrcc-apply-info .bank-info-box__label:first-child {
    margin-top: 0;
  }
}


/* 이용 개요 카드 설명 — 긴 한 줄 텍스트 widow(끝 1글자만 두 번째 줄로 떨어짐) 방지 */
/* 모든 카드 동일 font-size 유지, 자간만 축소 + 단어 단위 줄바꿈 */
/* line-clamp(3줄 ellipsis) 해제 — 본문+괄호 설명(small) 4줄 이상이어도 전체 노출 */
.page-mrcc-apply-info #apply-panel-1 .info-card__desc {
  letter-spacing: var(--ls);
  word-break: var(--word-break-base);
  display: block;
  -webkit-line-clamp: none;
  -webkit-box-orient: initial;
  overflow: visible;
  text-overflow: clip;
}

/* 괄호 부연 설명 — 본문 대비 살짝 작게, 줄바꿈 보장 */
.page-mrcc-apply-info #apply-panel-1 .info-card__desc small {
  display: inline-block;
  margin-top: var(--gap-form-input-help);
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  line-height: 1.5;
}


/* 본문 내 외부 링크 — 밑줄 + primary 컬러 */
.page-mrcc-apply-info .process-steps__text a[href^="http"],
.page-mrcc-apply-info .content-block__text a[href^="http"] {
  color: var(--color-primary-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-mrcc-apply-info .process-steps__text a[href^="http"]:hover,
.page-mrcc-apply-info .content-block__text a[href^="http"]:hover {
  color: var(--color-primary-900);
}

/* ===================================
   연구지원 수행 체계 도식 (mrcc-flow)
   참고 시안 기반 절대배치 + SVG 연결선
   캔버스 1034x380 비율, % 좌표로 반응형 스케일
   =================================== */
.page-mrcc-apply-info .mrcc-flow {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: var(--gap-card-icon-text) auto 0;
  aspect-ratio: 1034 / 380;
}

/* SVG 연결선 — 캔버스에 꽉 차게, 비율 무시 스케일 */
.page-mrcc-apply-info .mrcc-flow__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-gray-500);
  pointer-events: none;
}
.page-mrcc-apply-info .mrcc-flow__lines line {
  stroke: var(--color-gray-500);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.page-mrcc-apply-info .mrcc-flow__start,
.page-mrcc-apply-info .mrcc-flow__label,
.page-mrcc-apply-info .mrcc-flow__node,
.page-mrcc-apply-info .mrcc-flow__detail {
  position: absolute;
  box-sizing: border-box;
}

/* 시작 박스 — 1/3 크기, 수직 가운데, 그라데이션 배경 + 기존 테두리 유지 */
.page-mrcc-apply-info .mrcc-flow__start {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18.18%;
  padding: 22px 14px;
  text-align: center;
  background: linear-gradient(135deg, var(--color-gray-50), var(--color-primary-50));
  border: 2px solid var(--color-primary-700);
  border-radius: var(--radius-lg);
}
.page-mrcc-apply-info .mrcc-flow__start-title {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.45;
}
.page-mrcc-apply-info .mrcc-flow__start-sub {
  display: block;
  margin-top: var(--gap-form-input-help);
  font-size: var(--fs-tag);
  color: var(--color-gray-600);
}

/* 분기 라벨 (공동연구 / 부분지원) */
.page-mrcc-apply-info .mrcc-flow__label {
  left: 26%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-gray-700);
  white-space: nowrap;
}
.page-mrcc-apply-info .mrcc-flow__label--top { top: 31.58%; }
.page-mrcc-apply-info .mrcc-flow__label--bottom { top: 68.42%; }

/* 결과 박스 (파란 그라데이션) */
.page-mrcc-apply-info .mrcc-flow__node {
  left: 34.82%;
  width: 18.38%;
  transform: translateY(-50%);
  padding: 16px 12px;
  text-align: center;
  color: var(--color-white);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
  border-radius: var(--radius-md);
}
.page-mrcc-apply-info .mrcc-flow__node--top { top: 31.58%; }
.page-mrcc-apply-info .mrcc-flow__node--bottom { top: 68.42%; }

/* 오른쪽 세부 리스트 — 테두리만, 텍스트 nowrap 폭 */
.page-mrcc-apply-info .mrcc-flow__detail {
  left: 56.67%;
  top: 31.58%;
  transform: translateY(-50%);
  padding: 16px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.page-mrcc-apply-info .mrcc-flow__detail ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-button-group);
}
.page-mrcc-apply-info .mrcc-flow__detail li {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-small);
  color: var(--color-gray-700);
  line-height: 1.5;
  white-space: nowrap;
}
.page-mrcc-apply-info .mrcc-flow__detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary-700);
}

/* 모바일: 절대배치 해제 → 세로 스택 */
@media (max-width: 767px) {
  .page-mrcc-apply-info .mrcc-flow {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-button-group);
    max-width: none;
  }
  .page-mrcc-apply-info .mrcc-flow__lines { display: none; }
  .page-mrcc-apply-info .mrcc-flow__start,
  .page-mrcc-apply-info .mrcc-flow__label,
  .page-mrcc-apply-info .mrcc-flow__node,
  .page-mrcc-apply-info .mrcc-flow__detail {
    position: static;
    transform: none;
    width: auto;
    left: auto;
    top: auto;
  }
  .page-mrcc-apply-info .mrcc-flow__label {
    text-align: center;
    margin-top: var(--gap-button-group);
  }
}

/* ===================================
   연구지원 방식 비교표 / 기본 수가 산정표 — 폭 2/3, 열 비율
   =================================== */
.page-mrcc-apply-info .mrcc-method-table,
.page-mrcc-apply-info .mrcc-fee-table {
  width: 66.66%;
}
/* 비교표 내용 셀: 말줄임(nowrap) 해제 → 여러 줄 줄바꿈 + 상단 정렬 */
.page-mrcc-apply-info .mrcc-method-table tbody td,
.page-mrcc-apply-info .mrcc-method-table tbody th {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
}
/* 내용 셀: 열 제목(16px)과 동일 크기, 굵지 않게 */
.page-mrcc-apply-info .mrcc-method-table td .content-block__text {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-gray-600);
  line-height: var(--lh-small);
}
/* 기본 수가 산정표: 지원내용 : 기본수가 = 2 : 1 */
.page-mrcc-apply-info .mrcc-fee-table col:first-child { width: 66.66%; }
.page-mrcc-apply-info .mrcc-fee-table col:last-child { width: 33.34%; }

/* 기본접수료 납부표 / 연구지원 원칙표 — 긴 값 셀 말줄임 해제 → 줄바꿈 */
.page-mrcc-apply-info .mrcc-pay-table tbody td,
.page-mrcc-apply-info .mrcc-principle-table tbody td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .page-mrcc-apply-info .mrcc-method-table,
  .page-mrcc-apply-info .mrcc-fee-table {
    width: 100%;
  }
}

/* ===================================
   연구지원 절차 — 6단계 ㄹ자(스네이크) 플로우
   1→2→3 (상단) · ↓ (우측) · 4→5→6 (하단, 우→좌)
   카드 시각은 process-steps__card 재사용, 배치만 grid로 제어
   =================================== */
.page-mrcc-apply-info .mrcc-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--gap-layout-h2-body);
}
/* 1행 */
.page-mrcc-apply-info .mrcc-flow__card--1 { grid-column: 1; grid-row: 1; }
.page-mrcc-apply-info .mrcc-flow__arrow--r1 { grid-column: 2; grid-row: 1; }
.page-mrcc-apply-info .mrcc-flow__card--2 { grid-column: 3; grid-row: 1; }
.page-mrcc-apply-info .mrcc-flow__arrow--r2 { grid-column: 4; grid-row: 1; }
.page-mrcc-apply-info .mrcc-flow__card--3 { grid-column: 5; grid-row: 1; }
/* 우측 하향 연결 */
.page-mrcc-apply-info .mrcc-flow__down { grid-column: 5; grid-row: 2; justify-self: center; }
/* 2행 (우→좌): 4=우, 5=중, 6=좌 */
.page-mrcc-apply-info .mrcc-flow__card--4 { grid-column: 5; grid-row: 3; }
.page-mrcc-apply-info .mrcc-flow__arrow--r3 { grid-column: 4; grid-row: 3; }
.page-mrcc-apply-info .mrcc-flow__card--5 { grid-column: 3; grid-row: 3; }
.page-mrcc-apply-info .mrcc-flow__arrow--r4 { grid-column: 2; grid-row: 3; }
.page-mrcc-apply-info .mrcc-flow__card--6 { grid-column: 1; grid-row: 3; }
/* 화살표 글리프 */
.page-mrcc-apply-info .mrcc-flow__arrow,
.page-mrcc-apply-info .mrcc-flow__down {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-300);
}
.page-mrcc-apply-info .mrcc-flow__arrow svg,
.page-mrcc-apply-info .mrcc-flow__down svg {
  width: 28px;
  height: 28px;
}
/* 카드: 그리드 셀 높이 채워 한 행 카드 높이 통일 */
.page-mrcc-apply-info .mrcc-flow__card {
  height: 100%;
  margin: 0;
}

/* 모바일: 단일 열 수직 스택, 모든 화살표 하향 */
@media (max-width: 768px) {
  .page-mrcc-apply-info .mrcc-flow {
    grid-template-columns: 1fr;
  }
  .page-mrcc-apply-info .mrcc-flow > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .page-mrcc-apply-info .mrcc-flow__arrow--r1 svg,
  .page-mrcc-apply-info .mrcc-flow__arrow--r2 svg {
    transform: rotate(90deg);
  }
  .page-mrcc-apply-info .mrcc-flow__arrow--r3 svg,
  .page-mrcc-apply-info .mrcc-flow__arrow--r4 svg {
    transform: rotate(-90deg);
  }
}