/* 병원 응답 화면(B20·B21, v10 배치 B38c). 위 = 읽는 정보: 머리 줄의 지난 초·집계, 지금 상태 한마디(.answer),
   병원별 답(.status-board — 발신한 순서 고정, 읽기만), 병원이 전화로 들은 환자 값.
   아래 = 추천 칸(slot.css) · [병원 선택] · 버튼 줄(decide.css). [병원 선택] 시트의 행은 call-card.css.
   수용이 와도 줄과 버튼은 움직이지 않는다 — 추천 칸의 글자만 바뀐다(v10). */

.responses {
  --row-height: 104px;
}

/* 위 영역은 패널에 8px만 비운다 — 390×844에서 답 한 줄 + 병원 세 줄(72×3)이 다 들어오게. */
.status-top {
  padding-bottom: var(--space-1);
}

/* 머리 줄 왼쪽(다른 화면의 표식 자리): "42초 경과 · 불가 1곳". 자릿수가 바뀌어도 글자가 흔들리지 않게 숫자 폭을 맞춘다. */
.status-progress {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── 지금 상태 한마디: 이 화면에서 가장 큰 글자다("수용 1곳") ────────────────────────────── */

.answer {
  margin: calc(var(--space-1) / 2) 0 0;
  font-size: var(--type-size-xl);
  line-height: var(--type-lineHeight-xl);
  font-weight: var(--type-weight-heading);
  letter-spacing: var(--type-tracking-heading);
}

/* ── 병원별 답: 사진 위에 뜬 어두운 유리 한 장(glass.status — #080E15·0.82·흐림 18). 행은 선으로만 나뉜다 ─────── */

.status-board {
  margin: var(--space-1) 0 0;
  padding: 0 var(--space-2);
  list-style: none;
  border: var(--border-control-width) solid var(--glass-status-edge);
  border-radius: var(--radius-glass-status);
  background: var(--glass-status-fill);
  backdrop-filter: var(--glass-status-filter);
  -webkit-backdrop-filter: var(--glass-status-filter);
  box-shadow: var(--shadow-glass-status);
}

/* 한 줄 = 병원 이름과 배지(위), 표·도착 분·거리(아래). 68px(v10 72에서 4 줄임 — 390×844에서 세 줄이 패널 유리에 닿지 않게).
   버튼이 아니라 읽는 줄이다. */
.status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name mark"
    "far far";
  gap: 0 var(--space-1);
  align-content: center;
  min-height: 68px;
  padding: calc(var(--space-1) * 0.75) 0;
}

.status-row + .status-row {
  border-top: var(--border-control-width) solid var(--color-border-divider);
}

.status-numbers {
  grid-area: far;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums lining-nums;
}

/* 수용 없이 끝난 전화(불가·무응답·발신 실패·종료): 이름이 흐리고 가늘어진다. 밝기만으로 가르지 않는다 — 배지의 그림과 글자가 같이 바뀐다. */
.status-row[data-out="true"] .hospital-name {
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-body);
}

/* 병원이 넷 이상이면 줄 여백만 줄인다(64px). 그래도 넘치면 위 영역 안에서 스크롤한다 — 아래 버튼은 덮지 않는다. */
.status-top[data-density="compact"] .status-row {
  min-height: 64px;
  padding: calc(var(--space-1) / 2) 0;
}

/* 병원이 전화로 들은 환자 값. 수용은 이 값에 대한 답이다. 목록 아래 — 3초 훑기에서는 읽지 않아도 되는 줄이다. */
.answer-sent {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

/* ── 추천 병원이 생기거나 바뀐 순간: 추천 칸이 한 번 초록으로 번쩍인다(토큰 motion.flash.scope, 160ms) ──────
   화면 전체를 쓰지 않는다(v10 — 전체 화면 섬광 없음). 번쩍임이 지나가도 답은 남는다: 위의 "수용 1곳"과 초록 배지,
   추천 칸의 병원 이름과 분. 소리는 chime.js. */

.accept-flash {
  position: absolute;
  inset: calc(-1 * var(--space-1));
  z-index: -1;
  border-radius: var(--radius-card);
  background: var(--color-state-accept);
  opacity: 0;
  pointer-events: none;
}

@keyframes accept-flash {
  0%,
  60% {
    opacity: 0.55;
  }
}

.accept-flash.is-flashing {
  animation: accept-flash var(--motion-state-ms) linear 1;
}

/* 움직임을 줄인 폰: 번쩍이지 않는다(v10). 답은 글자와 배지로 그대로 남고, 소리는 따로 난다. */
@media (prefers-reduced-motion: reduce) {
  .accept-flash.is-flashing {
    animation: none;
  }
}

/* ── 패널 안 ────────────────────────────────────────────────────────── */

/* 연결 끊김 알림은 추천 칸 바로 위에 둔다(parts.css의 .alert-line) — 믿으면 안 되는 것이 그 아래의 "미확인"이다. */
.responses .panel-scroll > .alert-line {
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
}

/* 끊긴 지 몇 초인지는 알림 글 뒤에 가늘게 적는다 — 머리 줄의 "n초 경과"(발신 뒤 지난 시간)와 다른 시계다. */
.alert-wait {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-body);
}

/* ── 화면에 맞추기. 글자와 터치 크기는 줄이지 않는다 ────────────────────────────── */

/* 시트의 행이 넷 이상이면 빈 여백만 줄인다(88px). */
.responses[data-density="compact"] {
  --row-height: 88px;
}

/* 글자를 크게 키우면(약 150% 이상) 병원 줄을 세로로 쌓는다 — 이름이 배지 폭에 밀려 글자 두 개씩 끊기지 않게. */
@container view (max-width: 15rem) {
  .status-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "mark"
      "far";
  }

  .status-row .badge {
    justify-self: start;
  }
}

/* 낮은 화면(사파리 탭 안의 아이폰 390×664, 작은 안드로이드 360×640): 답을 한 단계 줄이고 병원 줄을 64px로 낮춘다. */
@media (max-height: 699px) {
  .answer {
    font-size: var(--type-size-lg);
    line-height: var(--type-lineHeight-lg);
  }

  .status-row,
  .status-top[data-density="compact"] .status-row {
    min-height: 64px;
    padding: calc(var(--space-1) / 2) 0;
  }

  .responses,
  .responses[data-density="compact"] {
    --row-height: 80px;
  }
}