/* ===================================
   ctc-dept.css
   임상시험센터(CTC) 시설 페이지(070~077) 공통 스타일
   범위: page-ctc-dept body class를 가진 페이지 한정
   =================================== */

/* numbered-list 카드 안 텍스트 수직 중앙 정렬 (시설 페이지 한정)
   - align-items: center로 번호와 텍스트의 baseline 중앙 정렬
   - line-height 보정으로 라인 박스 ≈ 글리프 박스화 → 위아래 시각적 공백 동일
   - padding 좌우 유지, 상하만 시각 보정 */
.page-ctc-dept .numbered-list__item {
  align-items: center;
  /* 한국어 폰트 metrics(ascender < descender body)로 시각 baseline이 글리프 박스 중앙보다 위로 치우치는 현상 보정 */
  padding-top: var(--space-5);
  padding-bottom: 14px;
}

/* 핵심: components.css의 numbered-list__text는 display: flex(column) 라서
   <p> 안의 inline 콘텐츠(span, br, text)가 anonymous flex item으로 분할 → 줄 사이 의도하지 않은 gap + br/nowrap 무력화
   해결: display: block으로 오버라이드 → normal flow에서 br·white-space:nowrap이 정상 작동 */
.page-ctc-dept .numbered-list__text {
  display: block;
  line-height: 1.5;
}

/* 메일 링크 + 괄호가 한 덩어리로 줄바꿈되도록 — 한국어 keep-all과 영문 break-all 충돌 방지 */
.page-ctc-dept .numbered-list__text .nowrap-group {
  white-space: nowrap;
}

/* 전체 한 줄 강제 (modifier) — 텍스트가 카드 폭을 살짝 넘어도 줄바꿈하지 않음 */
.page-ctc-dept .numbered-list__text--inline {
  white-space: nowrap;
}

/* ===================================
   Working Flow 카드+화살표 다이어그램 (S-pattern)
   3-2 그리드: 1→2→3 ↓ 6←5←4 (둘째 줄은 시각 순서대로 HTML 작성)
   범위: page-ctc-dept 한정
   =================================== */
.page-ctc-dept .workflow-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

/* 한 행 — 기본 5칸 그리드 (카드3 + 화살표2) */
.page-ctc-dept .workflow-flow__row {
  display: grid;
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
  align-items: stretch;
  gap: 0;
}

/* 카드 개수별 그리드 modifier */
.page-ctc-dept .workflow-flow__row--cards-2 {
  grid-template-columns: 1fr 56px 1fr;
}
.page-ctc-dept .workflow-flow__row--cards-3 {
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
}
.page-ctc-dept .workflow-flow__row--cards-4 {
  grid-template-columns: 1fr 56px 1fr 56px 1fr 56px 1fr;
}

/* S-pattern 둘째 줄 정렬 modifier — 첫 줄과 같은 카드 폭 유지 위해 큰 그리드 안에 우측 정렬 */

/* 5단계 (3+2): 둘째 줄 2개 카드를 cards-3 그리드 우측 칸(3,4,5)에 배치
   ↓가 가리키는 column 5에 흐름 시작(작은 번호)이 오도록 좌→우 정순 매핑 */
.page-ctc-dept .workflow-flow__row--cards-2-in-3 {
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
}
.page-ctc-dept .workflow-flow__row--cards-2-in-3 > *:nth-child(1) { grid-column: 3; }
.page-ctc-dept .workflow-flow__row--cards-2-in-3 > *:nth-child(2) { grid-column: 4; }
.page-ctc-dept .workflow-flow__row--cards-2-in-3 > *:nth-child(3) { grid-column: 5; }

/* 7단계 (4+3): 둘째 줄 3개 카드를 cards-4 그리드 우측 칸(3~7)에 배치
   ↓가 가리키는 column 7에 흐름 시작(작은 번호)이 오도록 좌→우 정순 매핑 */
.page-ctc-dept .workflow-flow__row--cards-3-in-4 {
  grid-template-columns: 1fr 56px 1fr 56px 1fr 56px 1fr;
}
.page-ctc-dept .workflow-flow__row--cards-3-in-4 > *:nth-child(1) { grid-column: 3; }
.page-ctc-dept .workflow-flow__row--cards-3-in-4 > *:nth-child(2) { grid-column: 4; }
.page-ctc-dept .workflow-flow__row--cards-3-in-4 > *:nth-child(3) { grid-column: 5; }
.page-ctc-dept .workflow-flow__row--cards-3-in-4 > *:nth-child(4) { grid-column: 6; }
.page-ctc-dept .workflow-flow__row--cards-3-in-4 > *:nth-child(5) { grid-column: 7; }

/* 카드 — 그라데이션 배경 + 좌측 컬러 액센트 + 호버 인터랙션 */
.page-ctc-dept .workflow-flow__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-6) 28px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-ctc-dept .workflow-flow__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-primary-500), var(--color-primary-700));
}

.page-ctc-dept .workflow-flow__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 번호 — 그라데이션 원형 + 그림자 */
.page-ctc-dept .workflow-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  box-shadow: 0 4px 10px rgba(15, 134, 202, 0.35);
  flex-shrink: 0;
}

.page-ctc-dept .workflow-flow__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

/* 화살표 — 원형 옅은 배경 + 굵은 SVG stroke */
.page-ctc-dept .workflow-flow__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-500);
}

.page-ctc-dept .workflow-flow__arrow svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
}

/* 둘째 줄 ← 화살표 — SVG 좌우 반전 */
.page-ctc-dept .workflow-flow__arrow--left svg {
  transform: scaleX(-1);
}

/* 행 사이 ↓ 연결자 — 첫 줄 마지막 카드 위치에 정렬 */
.page-ctc-dept .workflow-flow__connector {
  display: grid;
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
}

/* connector grid를 첫 줄 카드 수에 맞춤 */
.page-ctc-dept .workflow-flow__connector--cards-2 {
  grid-template-columns: 1fr 56px 1fr;
}
.page-ctc-dept .workflow-flow__connector--cards-3 {
  grid-template-columns: 1fr 56px 1fr 56px 1fr;
}
.page-ctc-dept .workflow-flow__connector--cards-4 {
  grid-template-columns: 1fr 56px 1fr 56px 1fr 56px 1fr;
}

.page-ctc-dept .workflow-flow__connector-arrow {
  grid-column: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: var(--space-2) auto;
  border-radius: 50%;
  background: rgba(15, 134, 202, 0.10);
  color: var(--color-primary-700);
}

/* connector arrow의 grid-column을 첫 줄 마지막 카드 위치에 맞춤 */
.page-ctc-dept .workflow-flow__connector--cards-2 .workflow-flow__connector-arrow {
  grid-column: 3;
}
.page-ctc-dept .workflow-flow__connector--cards-3 .workflow-flow__connector-arrow {
  grid-column: 5;
}
.page-ctc-dept .workflow-flow__connector--cards-4 .workflow-flow__connector-arrow {
  grid-column: 7;
}

.page-ctc-dept .workflow-flow__connector-arrow svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
  transform: rotate(90deg);
}

/* prefers-reduced-motion 대응 — hover transform/그림자 전환 제거 */
@media (prefers-reduced-motion: reduce) {
  .page-ctc-dept .workflow-flow__card {
    transition: none;
  }
  .page-ctc-dept .workflow-flow__card:hover {
    transform: none;
  }
}

/* ===================================
   077 QI실 — Working Flow 제목 우측 안내 문구
   =================================== */
.page-ctc-dept .content-block__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.page-ctc-dept .content-block__head-note {
  color: var(--color-gray-600);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

/* 077 QI실 — process-step 카드 내 다운로드/업로드 버튼 */
.page-ctc-dept .process-steps__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-3);
  width: 100%;
}
/* label 형태의 업로드 버튼: 숨긴 file input을 감싸 클릭 가능하게 */
.page-ctc-dept .process-steps__upload {
  cursor: pointer;
}