/* ============================================================
   visit.css — 내방 신청 + 온라인 안전교육 전용  [2026-08-10 신설]

   style.css 를 건드리지 않고 따로 뒀다. 그 파일은 캐시 버전(?v=...)이
   약 30개 페이지에 각각 박혀 있어, 한 줄만 고쳐도 전부 올려야 한다.
   이 파일은 내방 관련 페이지에서만 부르므로 그럴 일이 없다.

   색·글꼴은 style.css 의 :root 변수를 그대로 쓴다(--brand-main 등).
   방문자 상당수가 휴대폰으로 보므로 좁은 화면을 기준으로 짰다.
   ============================================================ */

/* ---- 공통 카드 ---- */
.visit-wrap { max-width: 860px; margin: 0 auto; }

.visit-card {
  background: #fff;
  border: 1px solid var(--gray-200, #e8e8ec);
  border-radius: var(--radius-lg, 4px);
  padding: 28px;
  margin-bottom: 20px;
}
@media (max-width: 640px) { .visit-card { padding: 18px 16px; } }

.visit-card h2 {
  font-size: 21px; font-weight: 800; color: var(--brand-deep, #2B2C2F);
  margin: 0 0 14px; line-height: 1.4;
}
.visit-card h3 {
  font-size: 17px; font-weight: 700; color: var(--brand-deep, #2B2C2F);
  margin: 0 0 10px;
}
.visit-card p { color: var(--gray-700, #4a4a52); line-height: 1.75; margin: 0 0 12px; }
.visit-card p:last-child { margin-bottom: 0; }

/* ---- 안내 상자 ---- */
.visit-note {
  border-left: 3px solid var(--brand-main, #FA7D21);
  background: var(--brand-pale, #FEF8F3);
  padding: 14px 16px; border-radius: 0 4px 4px 0;
  font-size: 15px; line-height: 1.7; color: var(--gray-800, #33333a);
}
.visit-note.is-warn { border-left-color: #C0392B; background: #fdeceb; }
.visit-note.is-ok   { border-left-color: #2c8a4b; background: #eef7ee; }
.visit-note strong { font-weight: 800; }

/* ---- 진행 막대 (교육 N/M) ---- */
.edu-progress { margin-bottom: 22px; }
.edu-progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; color: var(--gray-600, #6b6b75); margin-bottom: 8px;
}
.edu-progress-head b { color: var(--brand-main, #FA7D21); font-size: 16px; font-weight: 800; }
.edu-progress-bar {
  height: 6px; background: var(--gray-100, #f0f0f4);
  border-radius: 3px; overflow: hidden;
}
.edu-progress-fill {
  height: 100%; background: var(--brand-main, #FA7D21);
  border-radius: 3px; transition: width .3s ease;
}

/* ---- 슬라이드 ---- */
.edu-slide-cat {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--brand-main, #FA7D21); background: var(--brand-light, #FEF2E9);
  padding: 4px 10px; border-radius: 3px; margin-bottom: 10px;
}
.edu-slide-img {
  display: block; width: auto; max-width: 260px; height: auto;
  border: 1px solid var(--gray-200, #e8e8ec); border-radius: 4px;
  margin: 16px auto;
}
@media (max-width: 400px) { .edu-slide-img { max-width: 220px; } }
.edu-slide-body {
  font-size: 16px; line-height: 1.85; color: var(--gray-800, #33333a);
  white-space: pre-line;   /* 관리자가 넣은 줄바꿈을 그대로 보여 준다 */
}

/* ---- 퀴즈 ---- */
.quiz-item { padding: 20px 0; border-bottom: 1px solid var(--gray-100, #f0f0f4); }
.quiz-item:last-of-type { border-bottom: 0; }
.quiz-q {
  font-size: 16px; font-weight: 700; line-height: 1.6;
  color: var(--brand-deep, #2B2C2F); margin: 0 0 14px;
}
.quiz-q .no {
  display: inline-block; min-width: 26px; height: 26px; line-height: 26px;
  text-align: center; background: var(--brand-main, #FA7D21); color: #fff;
  border-radius: 50%; font-size: 13px; font-weight: 800; margin-right: 8px;
}
.quiz-choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; margin-bottom: 8px;
  border: 1px solid var(--gray-200, #e8e8ec); border-radius: 4px;
  cursor: pointer; line-height: 1.6; font-size: 15px;
  transition: border-color .15s, background .15s;
}
.quiz-choice:hover { border-color: var(--brand-bright, #FA9450); background: var(--brand-pale, #FEF8F3); }
.quiz-choice input { margin-top: 4px; flex-shrink: 0; }
.quiz-choice.is-wrong { border-color: #e8a9a3; background: #fdeceb; }
.quiz-choice.is-answer { border-color: #8dc79c; background: #eef7ee; }
.quiz-explain {
  margin-top: 10px; padding: 11px 14px; border-radius: 4px;
  background: var(--gray-50, #F8F8FA); font-size: 14px; line-height: 1.7;
  color: var(--gray-700, #4a4a52);
}
.quiz-explain b { color: #C0392B; }

/* ---- 버튼 줄 ---- */
.visit-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.visit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border: 0; border-radius: var(--radius, 3px);
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  background: var(--gray-100, #f0f0f4); color: var(--gray-800, #33333a);
  text-decoration: none; line-height: 1.2;
}
.visit-btn:hover { background: var(--gray-200, #e8e8ec); }
.visit-btn--primary { background: var(--brand-main, #FA7D21); color: #fff; }
.visit-btn--primary:hover { background: var(--brand-mid, #EA530D); }
.visit-btn--primary:disabled { background: var(--gray-300, #d5d5dd); cursor: not-allowed; }
.visit-btn--wide { flex: 1 1 100%; }
@media (max-width: 640px) {
  .visit-btn { flex: 1 1 100%; padding: 15px 20px; }
}

/* 전송 중 표시(2026-09-03) — 접수 처리에 몇 초 걸릴 수 있어(문자 발송 포함),
   버튼을 눌러도 반응이 없는 것처럼 보이지 않도록 작은 원을 돌린다. */
.btn-spinner {
  display: inline-block; width: 15px; height: 15px; margin-right: 8px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; vertical-align: -2px;
  animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; }
}

/* ---- 접수 완료 : 접수번호 ---- */
.receipt-box {
  text-align: center; padding: 30px 20px;
  background: var(--brand-pale, #FEF8F3);
  border: 1px solid var(--brand-light, #FEF2E9); border-radius: 4px;
  margin: 20px 0;
}
.receipt-label { font-size: 14px; color: var(--gray-600, #6b6b75); margin-bottom: 8px; }
.receipt-no {
  font-size: 30px; font-weight: 800; letter-spacing: .06em;
  color: var(--brand-main, #FA7D21);
  font-family: "Consolas", "Menlo", monospace;
  word-break: break-all;
}
@media (max-width: 480px) { .receipt-no { font-size: 24px; } }

/* ---- 인증번호 입력 ---- */
.otp-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.otp-row input[type="text"] { flex: 1 1 140px; min-width: 0; }
.otp-row .visit-btn { flex: 0 0 auto; padding: 12px 18px; font-size: 15px; }
.otp-msg { font-size: 14px; line-height: 1.6; margin-top: 8px; }
.otp-msg.is-ok  { color: #2c662d; }
.otp-msg.is-err { color: #C0392B; }
.otp-code-input {
  font-size: 22px; letter-spacing: .3em; text-align: center;
  font-family: "Consolas", "Menlo", monospace;
}

/* ---- 이수 이력 안내 ---- */
.edu-valid-box {
  border: 1px solid #cfe8cf; background: #eef7ee;
  border-radius: 4px; padding: 16px 18px; margin-bottom: 20px;
  font-size: 15px; line-height: 1.7; color: #2c662d;
}

/* ---- 조회 결과 ---- */
.visit-result-row {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--gray-100, #f0f0f4);
  font-size: 15px; line-height: 1.6;
}
.visit-result-row:last-child { border-bottom: 0; }
.visit-result-row .k {
  flex: 0 0 110px; color: var(--gray-600, #6b6b75); font-weight: 700;
}
.visit-result-row .v { flex: 1 1 auto; color: var(--gray-800, #33333a); word-break: break-word; }
@media (max-width: 520px) {
  .visit-result-row { flex-direction: column; gap: 4px; }
  .visit-result-row .k { flex: none; font-size: 13px; }
}

.visit-status {
  display: inline-block; padding: 5px 13px; border-radius: 3px;
  font-size: 14px; font-weight: 800;
}
.visit-status.s-new      { background: var(--gray-100, #f0f0f4); color: var(--gray-700, #4a4a52); }
.visit-status.s-read     { background: #eaf2fb; color: #24619e; }
.visit-status.s-approved { background: #eef7ee; color: #2c662d; }
.visit-status.s-rejected { background: #fdeceb; color: #C0392B; }
.visit-status.s-done     { background: var(--gray-100, #f0f0f4); color: var(--gray-600, #6b6b75); }

/* ---- 출입 기간 · 차량 (2026-08-10 추가) ---- */

/* 시작일·종료일·시간을 한 줄에 놓는다. 기본 .form-row 는 2단이라 따로 둔다. */
body.page-visit .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* 차량 이용에 체크해야 번호 입력칸이 열린다.
   차 없이 오는 방문자가 대부분이라 빈칸을 계속 보여 줄 이유가 없다. */
.visit-car-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border: 1.5px solid var(--gray-200, #e2e2e8);
  border-radius: 3px; background: var(--gray-50, #fafafc); cursor: pointer;
}
.visit-car-toggle input { width: 18px; height: 18px; flex: none; cursor: pointer; }
.visit-car-toggle span { font-size: 15px; font-weight: 700; color: var(--gray-700, #4a4a52); }
.visit-car-fields { margin-top: 14px; }
.visit-car-fields[hidden] { display: none; }

@media(max-width:860px) {
  body.page-visit .form-row-3 { grid-template-columns: 1fr; }
}

/* ---- 모바일 (2026-08-10) ----
   내방 신청은 협력사 담당자가 현장에서 휴대폰으로 넣는 경우가 많다.
   5단계 진행 막대와 카드 여백이 좁은 화면에서 그대로면 글자가 뭉개진다. */
@media (max-width: 640px) {
  body.page-visit .step-bar { margin-bottom: 30px; }
  body.page-visit .step-num { width: 30px; height: 30px; font-size: 13px; margin-bottom: 6px; }
  body.page-visit .step-item:not(:last-child)::after { top: 15px; }
  /* keep-all : 한글이 '신청서 작' / '성' 처럼 낱글자로 쪼개지는 것을 막는다 */
  body.page-visit .step-lbl { font-size: 11px; line-height: 1.35; letter-spacing: -.2px; word-break: keep-all; padding: 0 3px; }
  body.page-visit .form-card { padding: 22px 16px; }
  body.page-visit .form-card h3 { font-size: 17px; margin-bottom: 18px; }
  body.page-visit .info-card { padding: 20px 18px; }
  body.page-visit .visit-layout { gap: 28px; }
  .visit-car-toggle { padding: 12px 14px; }
}
@media (max-width: 380px) {
  body.page-visit .step-lbl { font-size: 10px; padding: 0 1px; }
  body.page-visit .step-num { width: 27px; height: 27px; font-size: 12px; }
  body.page-visit .step-item:not(:last-child)::after { top: 13px; }
}

/* ---- 차량 여러 대 (2026-08-10) ---- */
.car-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.car-row input { flex: 1 1 auto; min-width: 0; }
.car-row[hidden] { display: none; }
.car-del {
  flex: none; padding: 9px 12px; font-size: 13px; font-weight: 700;
  color: var(--gray-600, #6b6b75); background: var(--gray-50, #fafafc);
  border: 1.5px solid var(--gray-200, #e2e2e8); border-radius: 3px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.car-del:hover { color: #C0392B; border-color: #f0c4bf; background: #fdeceb; }
.car-add {
  display: inline-block; margin-top: 2px; padding: 9px 14px;
  font-size: 14px; font-weight: 700; color: var(--brand-main, #FA7D21);
  background: #fff; border: 1.5px dashed var(--brand-light, #FEF2E9);
  border-radius: 3px; cursor: pointer; font-family: inherit;
}
.car-add:hover { background: var(--brand-pale, #FEF8F3); border-style: solid; }
.car-add[hidden] { display: none; }
.car-limit-msg { font-size: 13px; color: var(--gray-500, #8a8a94); margin-top: 8px; }
.car-limit-msg[hidden] { display: none; }
.car-warn {
  font-size: 13px; line-height: 1.6; color: #B45309;
  background: #FEF2E9; border-radius: 3px; padding: 11px 13px; margin-top: 12px;
}
.car-fmt-warn {
  display: block; font-size: 12.5px; line-height: 1.5; color: #C0392B;
  margin: -4px 0 8px 2px;
}
.car-fmt-warn[hidden] { display: none; }