/*
 * 스크리닝 검사 화면 껍데기 — 홈페이지와 같은 톤으로 다시 입힌다. 2026-09-17 (범위 축소 2026-09-18).
 *
 * **마크업과 스크립트는 하나도 건드리지 않는다.** 기존 클래스(.page.card, .question, .answer,
 * .form-check, .btn-next 등)에 색과 크기만 덮어쓴다. input 의 name 과 id, 폼 전송, 단계 이동
 * 스크립트가 그대로라 검사 동작에는 영향이 없다.
 *
 * 적용: 이 파일을 서버의 public/css/ 에 올리고 레이아웃 블레이드의 </head> 앞에
 *   <link rel="stylesheet" href="/css/dst-skin.css">
 * 한 줄을 넣는다. 되돌리기는 그 한 줄을 지우는 것.
 *
 * 이 앱은 250개 호스트가 공유하고 레이아웃(layouts/app.blade.php)도 모든 페이지가 함께 쓴다.
 * 그래서 **모든 규칙을 `div#dst_input_basic_form:has(.answer)` 으로 시작하게** 했다.
 * - 같은 id 가 여섯 화면(DST 등록/입력/시작, DBT 입력, DIT 시작, 검색)에서 재사용되고, DST 입력
 *   화면에서는 div 와 form 에 두 번 붙어 있다. 그래서 `div` 타입으로 안쪽 form 을 빼고,
 *   보기(.answer)가 있는 문항 화면에서만 걸리게 `:has(.answer)` 로 묶는다. 시작/검색/DBT 동의
 *   화면은 보기가 없어서 아무것도 안 바뀐다.
 * - 문서 전체 규칙(body 배경, 글꼴, 머리말)도 `body:has(div#dst_input_basic_form .answer)` 로 같은 조건.
 * :has() 를 모르는 아주 옛 브라우저에서는 이 파일 전체가 적용되지 않고 원래 화면이 나온다.
 */

:root {
  --ic-bg: #f5fff5;
  --ic-surface: #ffffff;
  --ic-tint: #eaf5ec;
  --ic-line: #d6e5d8;
  --ic-line-strong: #bfd3c4;
  --ic-ink: #043a1a;
  --ic-sub: #526151;
  --ic-lime: #c8d935;
  --ic-focus: #608723;
}

body:has(div#dst_input_basic_form .answer) {
  background: var(--ic-bg);
  color: var(--ic-ink);
  font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", system-ui, sans-serif;
  letter-spacing: -0.015em;
}

/* ── 머리말 ── */

body:has(div#dst_input_basic_form .answer) #header,
body:has(div#dst_input_basic_form .answer) #header .navbar {
  background: var(--ic-surface);
  border-bottom: 1px solid var(--ic-line);
  box-shadow: none;
}

body:has(div#dst_input_basic_form .answer) #header a.home {
  color: var(--ic-ink);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* ── 제목 띠 — 스톡 사진 대신 브랜드 색 ── */

div#dst_input_basic_form:has(.answer) {
  /* 원본이 인라인 style 로 사진을 깔아 둬서 같은 속성을 !important 로 덮는다.
     background 단축 속성으로는 못 이긴다 — 앞선 !important 선언이 이긴다 */
  /* 위 220px 만 진한 띠, 그 아래는 홈페이지와 같은 민트 바탕.
     이 요소가 폼 전체를 감싸고 있어서 한 요소 안에서 두 색을 내려면 이 방법뿐이다 */
  background-image: linear-gradient(to bottom, #043a1a 0, #043a1a 220px, #f5fff5 220px) !important;
  background-color: #f5fff5;
  background-repeat: no-repeat;
  padding-top: 48px;
  padding-bottom: 72px;
  border-radius: 0;
}

div#dst_input_basic_form:has(.answer) > h1 {
  max-width: 720px;
  margin: 0 auto 8px;
  padding: 0 4px;
  color: #ffffff;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 650;
  letter-spacing: -0.035em;
  text-align: left;
  text-shadow: none;
  word-break: keep-all;
}

/* 제목 아래 한 줄 — 원본에 없는 문구라 가상 요소로 붙인다 */
div#dst_input_basic_form:has(.answer) > h1::after {
  content: "보호자가 답해 주시면 아이의 식생활을 진단해 드립니다.";
  display: block;
  margin-top: 12px;
  color: rgb(255 255 255 / 78%);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

/* ── 단계 카드 ── */

div#dst_input_basic_form:has(.answer) .page.card {
  max-width: 720px;
  margin: 0 auto 16px;
  border: 1px solid var(--ic-line);
  border-radius: 20px;
  background: var(--ic-surface);
  box-shadow: 0 18px 48px rgb(4 58 26 / 7%);
}

div#dst_input_basic_form:has(.answer) .page.card .card-body {
  padding: 30px clamp(18px, 3vw, 34px) 34px;
}

div#dst_input_basic_form:has(.answer) .card-body h5 {
  margin-bottom: 20px;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--ic-ink);
  word-break: keep-all;
}

/* 원본이 [걱정] 같은 말머리에 하늘색을 직접 박아 둬서 그것만 되돌린다 */
div#dst_input_basic_form:has(.answer) .card-body h5 b[style] {
  color: var(--ic-ink) !important;
}

/* ── 진행 표시 ── */

div#dst_input_basic_form:has(.answer) .progress {
  height: 26px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--ic-tint);
}

div#dst_input_basic_form:has(.answer) .progress-bar {
  border-radius: 999px;
  background: var(--ic-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── 문항과 보기 ── */

div#dst_input_basic_form:has(.answer) .question {
  margin: 26px 0 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ic-ink);
  word-break: keep-all;
}

div#dst_input_basic_form:has(.answer) .question,
div#dst_input_basic_form:has(.answer) .answer {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

div#dst_input_basic_form:has(.answer) .answer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

/* 작은 라디오 점 대신 손가락으로 누르는 카드. 라디오는 접근성을 위해 남겨 두고 숨긴다 */
div#dst_input_basic_form:has(.answer) .answer .form-check {
  flex: 1 1 104px;
  margin: 0;
  padding: 0;
  min-height: 0;
}

div#dst_input_basic_form:has(.answer) .answer .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

div#dst_input_basic_form:has(.answer) .answer .form-check-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 10px;
  border: 1px solid var(--ic-line);
  border-radius: 14px;
  background: var(--ic-surface);
  color: var(--ic-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  word-break: keep-all;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

div#dst_input_basic_form:has(.answer) .answer .form-check-label:hover {
  border-color: var(--ic-line-strong);
  background: var(--ic-tint);
}

div#dst_input_basic_form:has(.answer) .answer .form-check-input:checked + .form-check-label {
  border-color: var(--ic-ink);
  background: var(--ic-ink);
  color: #ffffff;
}

div#dst_input_basic_form:has(.answer) .answer .form-check-input:focus-visible + .form-check-label {
  outline: 2px solid var(--ic-focus);
  outline-offset: 2px;
}

/* 성별·관계처럼 한 줄에 나오는 라디오도 같은 모양으로 */
div#dst_input_basic_form:has(.answer) .form-check-inline {
  margin: 0 8px 8px 0;
}

/* ── 입력칸 ── */

/* 원본 CSS 가 더 구체적이라 클래스만으로는 글자 크기를 못 이긴다 — 아이디로 특정한다 */
div#dst_input_basic_form:has(.answer) .form-control,
div#dst_input_basic_form:has(.answer) .form-select,
div#dst_input_basic_form:has(.answer) input[type="text"],
div#dst_input_basic_form:has(.answer) input[type="password"],
div#dst_input_basic_form:has(.answer) input[type="number"],
div#dst_input_basic_form:has(.answer) input[type="tel"],
div#dst_input_basic_form:has(.answer) input[type="date"] {
  min-height: 50px;
  border: 1px solid #94ad9a;
  border-radius: 12px;
  background: #ffffff;
  color: var(--ic-ink);
  /* 16px 아래면 휴대폰이 입력할 때 화면을 확대한다.
     원본이 `.form-control { font-size:.9rem !important }` 로 박아 둬서 여기도 !important 가 필요하다 */
  font-size: 16px !important;
  box-shadow: none;
}

div#dst_input_basic_form:has(.answer) .form-control:focus,
div#dst_input_basic_form:has(.answer) .form-select:focus {
  border-color: var(--ic-focus);
  box-shadow: 0 0 0 3px rgb(96 135 35 / 18%);
}

div#dst_input_basic_form:has(.answer) label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ic-ink);
}

div#dst_input_basic_form:has(.answer) .form-control-plaintext {
  color: var(--ic-sub);
  font-size: 15px;
}

/* 원본이 안내 문구에 하늘색을 쓴다 — 읽기 쉬운 회색으로 */
div#dst_input_basic_form:has(.answer) small,
div#dst_input_basic_form:has(.answer) .text-info,
div#dst_input_basic_form:has(.answer) [style*="color:#29b1da"],
div#dst_input_basic_form:has(.answer) [style*="color: #29b1da"] {
  color: var(--ic-sub) !important;
  font-size: 13px;
  line-height: 1.7;
}

/* ── 단추 ── */

div#dst_input_basic_form:has(.answer) .btn,
div#dst_input_basic_form:has(.answer) .btn-primary,
div#dst_input_basic_form:has(.answer) .btn-success,
div#dst_input_basic_form:has(.answer) .btn-secondary {
  min-height: 50px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  box-shadow: none;
}

div#dst_input_basic_form:has(.answer) .btn-primary,
div#dst_input_basic_form:has(.answer) .btn-success.btn-next {
  background: var(--ic-ink);
  color: #ffffff;
}

div#dst_input_basic_form:has(.answer) .btn-primary:hover,
div#dst_input_basic_form:has(.answer) .btn-success.btn-next:hover {
  background: #15552e;
  color: #ffffff;
}

div#dst_input_basic_form:has(.answer) .btn-success.btn-before,
div#dst_input_basic_form:has(.answer) .btn-secondary {
  border: 1px solid var(--ic-line-strong);
  background: var(--ic-surface);
  color: var(--ic-ink);
}

div#dst_input_basic_form:has(.answer) .btn-success.btn-before:hover,
div#dst_input_basic_form:has(.answer) .btn-secondary:hover {
  background: var(--ic-tint);
  color: var(--ic-ink);
}

/* 맨 아래 이동 단추 묶음 */
div#dst_input_basic_form:has(.answer) .row.mt-3,
div#dst_input_basic_form:has(.answer) .text-center.mt-3 {
  max-width: 720px;
  margin-inline: auto;
}

/* ── 동의 ── */

div#dst_input_basic_form:has(.answer) .form-check-input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid #94ad9a;
  border-radius: 5px;
  accent-color: var(--ic-ink);
}

div#dst_input_basic_form:has(.answer) .form-check-input[type="checkbox"]:checked {
  background-color: var(--ic-ink);
  border-color: var(--ic-ink);
}

@media (prefers-reduced-motion: reduce) {
  div#dst_input_basic_form:has(.answer) .answer .form-check-label {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  div#dst_input_basic_form:has(.answer) {
    padding-top: 36px;
    padding-bottom: 64px;
  }

  div#dst_input_basic_form:has(.answer) .answer .form-check {
    flex: 1 1 100%;
  }

  div#dst_input_basic_form:has(.answer) .answer .form-check-label {
    justify-content: flex-start;
    text-align: left;
  }
}