/* apps/diagnostics/static/diagnostics/css/apply.css */
/* apps/diagnostics/static/diagnostics/css/apply.css */
/* KREDI 공공기관 톤 - diagnostics 신청 화면 전용
   - 공용(tokens/base/layout/components) 위에 “페이지 특화”만 얹음
   - Bootstrap을 유지하면서도 톤/간격/가독성을 안정화
*/

.diag-apply {
  /* 페이지 배경을 은은하게(공공기관 톤) */
  background: transparent; /* 전체 배경은 base(tokens)에서 관리 */
}

/* 기능형 페이지와 폭을 맞춘 신청 페이지 전용 컨테이너 */
.diag-apply .apply-container {
  max-width: 100%;
}

/* 제목 영역 */
.diag-apply h2 {
  letter-spacing: -0.2px;
}

/* 카드(섹션) 톤 정리: Bootstrap card 위에 살짝만 보정 */
.diag-apply .card {
  border-color: var(--color-border);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-1);
}

.diag-apply .card-header {
  background: var(--color-surface-2) !important;
  border-bottom: 1px solid var(--color-border);
  font-weight: 800;
  letter-spacing: -0.1px;
}

/* 카드 내부 여백: 너무 빡빡해 보이지 않게 */
.diag-apply .card-body {
  padding: 18px;
}

/* 섹션 사이 여백(카드 간) */
.diag-apply .card.mb-4 {
  margin-bottom: 18px !important;
}

/* 라벨: 공공기관형(차분/명료) */
.diag-apply .form-label {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 6px;
}

/* 입력 컨트롤: 포커스/높이/테두리 일관화 */
.diag-apply .form-control,
.diag-apply select,
.diag-apply input[type="text"],
.diag-apply input[type="email"],
.diag-apply input[type="tel"],
.diag-apply input[type="number"],
.diag-apply textarea {
  border-color: var(--color-border);
  border-radius: var(--radius-12);
  padding: 10px 12px;
  font-size: 14px;
  background: var(--color-surface);
}

.diag-apply textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* 포커스 링(접근성) */
.diag-apply .form-control:focus,
.diag-apply select:focus,
.diag-apply input:focus,
.diag-apply textarea:focus {
  border-color: rgba(29, 78, 216, 0.45);
  box-shadow: var(--focus-ring);
}

/* 숫자 입력: 정렬감(금액/수량 화면 느낌) */
.diag-apply input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* 오류 메시지: 너무 빨갛게만 보이지 않도록 정돈 */
.diag-apply .text-danger.small {
  font-size: 12px !important;
  margin-top: 6px !important;
}

/* 상단 non_field_errors 알림: 공공기관형(두꺼운 빨강보단 부드럽게) */
.diag-apply .alert.alert-danger {
  border-radius: var(--radius-12);
  border: 1px solid rgba(220, 38, 38, 0.25);
  background: var(--color-danger-50);
  color: var(--color-text);
  box-shadow: var(--shadow-1);
}

/* “0은 미신청” 안내문구: inline style(font-size:12px) 제거용 */
.diag-apply .help-note {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 8px;
}

/* hr 간격 통일 */
.diag-apply hr {
  border-top: 1px solid var(--color-border);
  opacity: 1;
}

/* 버튼 영역: 우측 정렬 + 간격 안정화 */
.diag-apply .actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

/* 버튼 톤: Bootstrap 버튼 위에 살짝 정리(이미 base에서 브릿지 가능) */
.diag-apply .btn {
  border-radius: var(--radius-12);
  padding: 10px 14px;
  box-shadow: var(--shadow-1);
}
.diag-apply .btn:focus-visible {
  box-shadow: var(--shadow-1), var(--focus-ring);
}

/* 모바일 최적화 */
@media (max-width: 575.98px) {
  .diag-apply .card-body { padding: 14px; }
  .diag-apply .actions { flex-direction: column; }
  .diag-apply .actions .btn { width: 100%; }
}

/* 숫자 input 스피너(▲▼) 완전 제거 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* ===============================
   체크박스 가독성 개선
================================= */

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;   /* KREDI 메인 블루 */
  cursor: pointer;
}

input[type="checkbox"]:hover {
  transform: scale(1.05);
}

.form-check-label {
  font-weight: 500;
  cursor: pointer;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #1e40af;
  border: 2px solid #9ca3af;
}

input[type="checkbox"]:checked {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}