/* 환자 정보 입력 화면. 위 = 읽는 정보(단계·고른 값 되읽기·위치 — 요약 상자), 아래 = 누르는 것.
   한 폼 안의 두 단계(B38b): 1단계 KTAS(5칸 한 줄)·주증상(8칸 두 열) → [다음: 연령·성별] / 2단계 메모·연령대·성별·[이전: 중증도] → [후보 보기].
   390×844에서 패널 안 스크롤 영역은 414px: 1단계 = 이름표 28+8 · KTAS 56 · 사이 16 · 이름표 28+8 · 주증상 56×4+8×3 = 392(스크롤 없음),
   2단계 = 메모 28+8+48 · 16 · 연령대 92 · 16 · 성별 92 · 16 · [이전] 56 = 372. 칸은 56px(v10), 묶음 사이 16px, 고른 칸은 글자 옆 24px 체크.
   넘치는 경우(낮은 폰·큰 글자·위치 재시도 버튼)는 패널 안에서 스크롤하고 아래 가장자리가 흐려진다(app.css .is-overflowing). */

/* ── 위: 읽는 정보. 되읽기(.readout)와 요약 상자(.brief)는 parts.css에 있다 ──────────── */

.place {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--type-lineHeight-sm);
  margin: 0;
  color: var(--color-text-secondary);
}

.place svg {
  flex: none;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
}

/* 위치를 얻지 못했거나 오차가 크다: 위아래로 흰 선을 그은 경보 줄. 평소 화면과 한눈에 달라 보여야 한다.
   상자로 두르지 않는다 — 둥근 테두리 상자는 누르는 것에만 쓴다. 빨강도 쓰지 않는다(빨강 = "불가"·"틀림"). */
.place.is-alert {
  padding: calc(var(--space-1) / 2) 0;
  border: solid var(--color-text-primary);
  border-width: var(--border-selected-width) 0;
  color: var(--color-text-primary);
  font-weight: var(--type-weight-control);
}

.place.is-alert .place-pin,
.place:not(.is-alert) .place-warn {
  display: none;
}

/* ── 아래: 누르는 것. 묶음(.field)과 그 이름표(.field-label)는 후보 화면도 같이 써서 parts.css에 있다 ──────── */

.intake {
  --choice-height: var(--touch-preferred);
}

/* 묶음 사이 16px(v10: KTAS/증상 사이 16, 같은 묶음 안의 칸 사이 8). */
.intake .panel-scroll > * + * {
  margin-top: var(--space-2);
}

/* 이름표는 18/28에 아래 8px(v10 legend). 후보·응답 화면의 이름표(parts.css 24px)는 B38c에서 맞춘다. */
.intake .field-label {
  margin-bottom: var(--space-1);
  line-height: var(--type-lineHeight-sm);
}

.choices {
  display: grid;
  gap: var(--touch-gap);
}

.choices-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choices-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choices-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 선택 칸 = 진짜 라디오 입력(보이지 않게 칸 전체를 덮는다) + 그 아래에 그린 유리면.
   자판의 화살표·화면 읽기 프로그램은 브라우저의 라디오 동작을 그대로 쓴다. */
.choice {
  position: relative;
  display: block;
}

.choice input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.choice-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-1) / 2);
  min-height: var(--choice-height);
  padding: calc(var(--space-1) / 2) var(--space-1);
  border: var(--border-control-width) solid var(--glass-control-ghostBorder);
  border-radius: var(--radius-control);
  background: linear-gradient(180deg, var(--glass-control-sheen), transparent), var(--glass-control-fill);
  box-shadow: inset 0 -1px 0 var(--color-border-control);
  color: var(--color-text-primary);
  font-weight: var(--type-weight-body);
  line-height: var(--type-lineHeight-sm);
  text-align: center;
  /* 낱말 가운데서는 끊지 않는다. 글자를 크게 키워 낱말이 칸보다 길어졌을 때만 끊는다(옆 칸으로 넘치지 않게). */
  overflow-wrap: anywhere;
  user-select: none;
  -webkit-user-select: none;
}

/* 고른 칸의 체크(24px, Lucide check) — 글자 앞에 선다(v10 .choice-check). 선택은 흰 2px 선·밝은 면·굵은 글자가 먼저 말하고 체크는 거든다.
   고르지 않은 칸에는 자리를 비워 두지 않는다 — 글자가 칸 가운데 그대로다. */
.choice-face::before {
  content: "";
  flex: none;
  display: none;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  background: currentColor;
  -webkit-mask: var(--icon-check-mask) center / contain no-repeat;
  mask: var(--icon-check-mask) center / contain no-repeat;
}

/* KTAS는 잘못 누르면 병원 종별이 달라진다 — 숫자를 한 단계 크게. */
.field-ktas .choice-face {
  font-size: var(--type-size-lg);
  line-height: var(--type-lineHeight-lg);
  font-weight: var(--type-weight-strong);
}

/* 연령대·성별은 20px(v10 .age·.sex). */
.step-person .choice-face {
  font-size: var(--type-size-md);
  line-height: var(--type-lineHeight-md);
}

/* 고른 칸: 흰 2px 선 + 밝은 유리면 + 굵은 글자 + 체크. 통째로 뒤집지 않는다 — 흰 면이 여럿이면 주 버튼이 묻힌다.
   닿은 순간에는 선만 굵어진다. */
.choice input:checked + .choice-face {
  border-color: var(--color-text-primary);
  background: var(--glass-control-selected-fill);
  box-shadow: inset 0 0 0 var(--border-control-width) var(--color-text-primary), var(--shadow-control-selected);
  font-weight: var(--type-weight-control);
}

.choice input:checked + .choice-face::before {
  display: block;
}

.choice input:active + .choice-face {
  border-color: var(--color-text-primary);
  box-shadow: inset 0 0 0 var(--border-control-width) var(--color-text-primary);
}

.choice input:focus-visible + .choice-face {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

@media (hover: hover) {
  .choice input:not(:disabled):hover + .choice-face {
    border-color: var(--color-text-primary);
  }
}

/* 보내는 동안: 고르지 않은 칸은 면을 내리고 글자를 흐리게 한다. 고른 칸은 그대로 — 무엇을 보냈는지 보여야 한다. */
.choice input:disabled {
  cursor: default;
}

.choice input:disabled:not(:checked) + .choice-face {
  background: var(--glass-button-disabled-fill);
  color: var(--color-text-secondary);
}

/* ── 메모: 선택 입력. 식별정보 금지 문구는 칸 위에 늘 보인다(PRD F1.4) ─────────────── */

.note-label {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-2);
}

.note-count {
  margin-left: auto;
}

/* 서버가 메모를 거절했다(전화번호·긴 숫자). 고쳐야 넘어가는 "틀림"이라 빨강이다. 색만이 아니라 선도 2px로 굵어진다. */
.field-note.is-rejected .note-input {
  border-color: var(--color-error-text);
  box-shadow: inset 0 0 0 var(--border-control-width) var(--color-error-text);
}

.note-alert {
  margin: calc(var(--space-1) / 2) 0 0;
  color: var(--color-error-text);
}

.note-alert:empty {
  display: none;
}

/* ── 글자를 키웠을 때. 글자와 터치 크기는 줄이지 않는다 ─────────────────────────── */

/* 글자를 아주 크게 키우면(약 150% 이상 — 화면이 15rem보다 좁다) 체크를 칸의 오른쪽 위 모서리로 보내 글자 자리를 지킨다
   (v10 large-type) — 다섯 칸짜리 KTAS 줄에서 숫자와 체크가 한 줄에 안 들어온다. */
@container view (max-width: 15rem) {
  .choice-face::before {
    position: absolute;
    top: calc(var(--space-1) / 2);
    right: calc(var(--space-1) / 2);
    width: var(--icon-size-mark);
    height: var(--icon-size-mark);
  }
}

/* 낮은 화면(사파리 탭 안의 아이폰, 작은 안드로이드): 되읽기가 한 줄로 줄고(parts.css), 위치 줄은 문제가 있을 때만
   보인다(찾는 중이라는 것은 버튼이 말한다). 패널 안은 넘치는 만큼 스크롤한다 — 버튼은 남는다. */
@media (max-height: 699px) {
  .place:not(.is-alert) {
    display: none;
  }
}