/* 응답 화면의 버튼 줄과 확인 창(B21). 추천 칸의 병원(고르지 않았으면 추천, [병원 선택]으로 고른 병원)으로 할 일이 여기 있다.
   버튼 줄은 둘이다: [직접 전화] 위, [이송 결정] 아래(엄지에 가장 가까운 자리). 확정한 뒤에는 그 자리에 내비 링크가 온다.
   흰 채움은 늘 맨 아래 하나다. 이 환자를 떠나는 [새 환자]는 머리 줄에 있다([잠금] 옆 — 엄지에서 먼 자리).
   버튼 사이 16px은 parts.css의 .submit-bar 규칙이 준다(빗맞아도 옆의 것이 안 눌린다). */

/* [새 환자]와 [잠금] 사이는 16px(머리 줄 간격 8 + 이 8) — 둘 다 이 화면을 떠나는 일이라 빗맞아 다른 쪽이 눌리지 않게. */
#status-next,
#status-cancel {
  margin-right: var(--space-1);
}

/* 전화·지도 앱을 여는 것은 진짜 링크다(손가락이 직접 누른 링크라야 폰이 앱을 열어 준다). 모양은 버튼과 같다. */
a.button-secondary,
a.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
}

/* 서버가 확정을 거절한 까닭은 행 바로 아래, 버튼 줄 바로 위에 둔다 — 방금 누른 자리 가까이. */
.responses .refusal-line {
  margin: var(--space-2) 0 0;
}

/* ── 확인 창: 화면 아래에 떠 있는 유리 한 장. 움직임은 없다 — 뜨고, 닫힌다 ──────────────────────
   되돌릴 수 없는 일에만 뜬다(이송 확정, 결정 없이 떠나기). 뒤의 화면은 누를 수 없고 어둡게 가린다.
   글은 위에서부터: 무엇을 묻는가(작게) · 어느 병원(크게) · 몇 분·거리·그 병원의 답 · 알아야 할 것 — 길면 이 부분만 스크롤한다.
   누를 것은 아래 둘이고 고정이다: [돌아가기] 56px 위, 확정 64px 아래, 사이 16px. */

.sheet {
  position: fixed;
  inset: auto max(var(--layout-gutter), env(safe-area-inset-right, 0px)) max(var(--layout-gutter), env(safe-area-inset-bottom, 0px))
    max(var(--layout-gutter), env(safe-area-inset-left, 0px));
  width: auto;
  max-width: calc(var(--layout-content-maxWidth) - 2 * var(--layout-gutter));
  max-height: calc(100vh - 2 * var(--layout-gutter));
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: var(--border-control-width) solid var(--glass-sheet-edge);
  border-radius: var(--radius-sheet);
  background: var(--glass-sheet-fill);
  backdrop-filter: var(--glass-sheet-filter);
  -webkit-backdrop-filter: var(--glass-sheet-filter);
  box-shadow: var(--shadow-sheet);
  color: var(--color-text-primary);
}

@supports (height: 1dvh) {
  .sheet {
    max-height: calc(100dvh - 2 * var(--layout-gutter));
  }
}

/* 닫힌 창은 브라우저가 숨긴다 — 열렸을 때만 배치를 준다. */
.sheet[open] {
  display: flex;
  flex-direction: column;
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.sheet-scroll {
  min-height: 0;
  padding: var(--space-3) var(--space-2) var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* [병원 선택] 시트: 병원 행이 패널의 행만큼 넓게(좌우 8px) — 긴 병원 이름이 배지 옆에서 글자 하나씩 끊기지 않게. */
#status-picker .sheet-scroll {
  padding-inline: var(--space-1);
}

#status-picker .sheet-title,
#status-picker .field-label {
  padding-inline: var(--space-1);
}

.sheet-actions {
  flex: none;
  padding: var(--space-2);
  background: var(--glass-sheet-actions-fill);
}

.sheet-actions > .button-primary {
  margin-top: var(--touch-criticalGap);
}

.sheet-title {
  margin: 0;
  font-size: var(--type-size-lg);
  line-height: var(--type-lineHeight-lg);
  font-weight: var(--type-weight-heading);
  letter-spacing: var(--type-tracking-recommendation);
}

/* 창이 뜨면 제목으로 초점을 옮긴다(화면 읽기 프로그램이 병원 이름부터 읽게). 눌러서 고르는 대상은 아니다. */
.sheet-title:focus {
  outline: none;
}

.sheet-fact {
  margin: 0;
  font-size: var(--type-size-md);
  line-height: var(--type-lineHeight-md);
  font-weight: var(--type-weight-control);
}

.sheet-basis {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-size-sm);
  line-height: var(--type-lineHeight-sm);
}

.sheet-cautions {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 한 번 묻는 창(B34)의 병원 목록: 걸 곳(발신 순서) 또는 끊을 곳. 줄마다 병원 이름 · 도착 분. */
.sheet-items {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-size-md);
  line-height: var(--type-lineHeight-md);
}

.sheet-items > li + li {
  border-top: var(--border-control-width) solid var(--glass-sheet-edge);
}

.sheet-items > li {
  padding: var(--space-1) 0;
}

.sheet-items + .alert-line {
  margin-top: var(--space-1);
}