/*
 * 학생 기본정보 입력 공통 모듈 C-1 — app/templates/common/_student_profile_fields.html 전용.
 * 값은 분석검사 public-invite-profile.css(.form-grid·.profile-date-field·input/select)와 같게 맞췄다.
 * 전 규칙 `.sp-fields` 스코프 — 이 partial을 쓰지 않는 화면에는 영향 0.
 * 분석검사 전환(SDQ-08) 때 public-invite-profile.css의 같은 규칙을 이 파일로 일원화한다.
 * 브레이크포인트 560 = tokens.css 대장(habit/invite_profile.html)과 같은 값.
 */

.sp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sp-fields .form-group { min-width: 0; }
.sp-fields .form-group.full { grid-column: 1 / -1; }

.sp-fields label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a2030;
  margin-bottom: 6px;
}

.sp-fields .sp-optional {
  font-weight: 500;
  color: #718096;
}

.sp-fields input,
.sp-fields select {
  scroll-margin-block: 24px;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #1a2030;
  background: #f8fafc;
}

.sp-fields input:focus,
.sp-fields select:focus {
  outline: 0;
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.16);
}

/* 학교명 + 오른쪽 학교 구분 select (01:14 — 라벨 없음) */
.sp-fields .sp-school-row {
  display: flex;
  gap: 8px;
}

.sp-fields .sp-school-row input { flex: 1 1 auto; }
.sp-fields .sp-school-row select { flex: 0 0 128px; font-weight: 700; }

.sp-fields .profile-date-field {
  height: 44px;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.sp-fields .profile-date-field svg {
  width: 18px;
  height: 18px;
  color: #718096;
  flex: 0 0 auto;
  stroke-width: 1.9;
}

.sp-fields .profile-date-field select {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: #1a2030;
  font-weight: 700;
  appearance: auto;
}

.sp-fields .profile-date-field .date-separator {
  color: #8a97aa;
  font-size: 0.8rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.sp-fields .profile-grade-field .grade-level { flex: 3 1 0; }
.sp-fields .profile-grade-field .grade-year { flex: 2 1 0; }

.sp-fields .profile-date-field:focus-within {
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.16);
}

.sp-fields .sp-invalid,
.sp-fields .profile-date-field.sp-invalid {
  border-color: #e53e3e;
}

@media (max-width: 560px) {
  .sp-fields { grid-template-columns: 1fr; }
  .sp-fields .form-group.full { grid-column: auto; }
  .sp-fields .sp-school-row select { flex-basis: 112px; }
}