/* ===================================
   apply-form.css — 신청/문의/지원 폼 공통 스타일
   적용 대상: 모든 *_apply / *_apply_form / support_apply / *_consult_apply
   - 좌라벨 + 우필드 가로 구분선 패턴 (.member-form)
   - 신청 폼 전반에서 일관된 입력 경험 제공
   - 페이지 전용 룰은 각 페이지 CSS에서 확장 (예: mrcc-apply.css의 .researcher-grid)
   =================================== */

/* ===================================
   .member-form — 좌라벨 + 우필드 가로 구분선
   =================================== */
.member-form > .form-group {
  display: flex;
  align-items: center;
  gap: var(--space-4); /* var(--space-4) */
  padding: var(--space-3) 0; /* var(--space-3) 0 */
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-gray-300);
}

.member-form > .form-group:last-child {
  border-bottom: none;
}

/* display:flex 가 UA [hidden] 규칙을 덮어써서, hidden 속성 토글이 무시되는 것을 방지 */
.member-form > .form-group[hidden] {
  display: none;
}

.member-form > .form-group > .form-label {
  flex: 0 0 160px;
  margin-bottom: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-700);
}

.member-form > .form-group > .form-control,
.member-form > .form-group > .form-check-group,
.member-form > .form-group > div:not(.form-label) {
  flex: 1;
  min-width: 0;
}

/* textarea/체크그룹/그리드/파일업로드 — 상단 정렬 */
.member-form > .form-group:has(textarea),
.member-form > .form-group:has(.form-check-group--vertical),
.member-form > .form-group:has(.file-upload) {
  align-items: flex-start;
}

.member-form > .form-group:has(textarea) > .form-label,
.member-form > .form-group:has(.form-check-group--vertical) > .form-label,
.member-form > .form-group:has(.file-upload) > .form-label {
  padding-top: var(--space-3); /* var(--space-3) */
}

/* 체크 그룹 세로 변형 — 부모 form-check-group의 center 상속 차단 */
.form-check-group--vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 0; /* form-check min-height 48px이 자체 간격 제공 */
}

/* 좁은 input 그룹 (전화번호·과제번호 등 짧은 형식) */
.apply__input--narrow {
  max-width: 320px;
}

/* tooltip-trigger 안의 info 아이콘 — 22px (기본 form-message__icon 18px 보다 키움) */
.tooltip-trigger .form-message__icon {
  width: 22px;
  height: 22px;
}

/* member-form 안의 form-message--help는 인라인 (뱃지·값 옆에 자연스럽게) */
.member-form > .form-group .form-message--help {
  display: inline;
  margin-top: 0;
  margin-left: var(--space-1); /* var(--space-1) */
}

/* 모바일 — 라벨 상단, 필드 하단 */
@media (max-width: 767px) {
  .member-form > .form-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .member-form > .form-group > .form-label {
    flex: none;
  }
  .member-form > .form-group:has(textarea) > .form-label,
  .member-form > .form-group:has(.form-check-group--vertical) > .form-label,
  .member-form > .form-group:has(.file-upload) > .form-label {
    padding-top: 0;
  }
}
