/* 여러 화면이 같이 쓰는 조각: 위쪽의 요약 상자(.brief)와 환자 값 되읽기, 조작 묶음과 그 이름표, 유리 목록과 병원 행의 글자,
   알림 줄, 패널 맨 아래에 고정된 버튼 줄. */

/* ── 위쪽 요약 상자: 사진 위에 뜬 작은 유리면. 입력 화면은 고른 값·위치, 후보 화면은 병원이 듣게 될 값,
      응답 화면은 집계와 보낸 값을 담는다 ───────────────────────────────────── */
.brief {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border: var(--border-control-width) solid var(--glass-info-edge);
  border-radius: var(--radius-glass-info);
  background: var(--glass-info-fill);
  backdrop-filter: var(--glass-info-filter);
  -webkit-backdrop-filter: var(--glass-info-filter);
  box-shadow: var(--shadow-glass-info);
}

.brief > * + * {
  margin-top: calc(var(--space-1) / 2);
}

/* 환자 값을 되읽는다. 고르기 전에는 항목 이름이 흐리게(20px), 고른 줄은 흰 굵은 글자로 한 단계 크게(24px). */
.readout {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-size-md);
  line-height: var(--type-lineHeight-md);
}

.readout-line {
  display: block;
}

.readout-line:has(.is-set) {
  font-size: var(--type-size-lg);
  line-height: var(--type-lineHeight-lg);
  letter-spacing: var(--type-tracking-recommendation);
}

.readout .is-set {
  color: var(--color-text-primary);
  font-weight: var(--type-weight-control);
}

/* 요약 상자 안의 보조 줄: 숫자를 읽는 법(수용 미확인 · 줄 세운 기준 · 도착 분의 기준). */
.brief-note {
  margin: 0;
  color: var(--color-text-secondary);
}

/* 조작 묶음(<fieldset>)과 그 위의 이름표(<legend>). 브라우저가 그리는 테두리·여백은 없앤다. */
.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field-label {
  display: block;
  width: 100%;
  margin: 0 0 calc(var(--space-1) / 2);
  padding: 0;
  color: var(--color-text-secondary);
  line-height: 1.5rem;
}

/* 글자 입력 칸(입력 화면의 메모, 로그인 화면의 ID). */
.text-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  margin: 0;
  padding: 0 var(--space-2);
  border: var(--border-control-width) solid var(--color-border-control);
  border-radius: var(--radius-control);
  background: var(--glass-textarea-fill);
  color: var(--color-text-primary);
  font: inherit;
  caret-color: var(--color-text-primary);
}

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

.text-input:disabled {
  border-color: var(--glass-control-ghostBorder);
  color: var(--color-text-secondary);
  -webkit-text-fill-color: var(--color-text-secondary);
  opacity: 1;
}

/* ── 유리 목록(후보·응답 화면의 병원 행): 한 면 위에 행이 선으로 나뉜다 — 카드 속 카드를 쌓지 않는다 ──────── */
.glass-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius-card);
  outline: var(--border-control-width) solid var(--glass-list-edge);
  outline-offset: calc(-1 * var(--border-control-width));
  /* 흐림은 쓰지 않는다 — 목록은 늘 유리 패널 안에 있어 뒤에 보이는 것이 이미 흐린 패널 면뿐이다(비용만 든다). */
  background: var(--glass-list-fill);
  box-shadow: var(--shadow-glass-list);
}

/* 행 = 진짜 입력(보이지 않게 행 전체를 덮는다 — 체크박스 또는 라디오) + 그 아래에 그린 면.
   왼쪽 위 = 어느 병원, 오른쪽 위 = 그 병원의 표(체크·배지), 왼쪽 아래 = 둘째 줄, 오른쪽 아래 = 얼마나 먼가. */
.glass-list > li {
  position: relative;
  /* 행의 폭을 rem으로 재면 글자를 얼마나 키웠는지 알 수 있다(아래 @container) — 패널은 px, 글자는 rem이라서. */
  container: row / inline-size;
}

.glass-list > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--space-2);
  left: var(--space-2);
  height: var(--border-control-width);
  background: var(--color-border-divider);
}

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

.row-input:disabled {
  cursor: default;
}

.row-face {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name mark"
    "line far";
  gap: calc(var(--space-1) / 2) var(--space-2);
  align-items: start;
  min-height: var(--row-height, 104px);
  padding: var(--space-2);
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  user-select: none;
  -webkit-user-select: none;
}

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

/* 병원 행의 글자: 이름 20px, 도착 분이 행에서 가장 큰 글자(24px 굵게 — 여러 행을 세로로 훑어 비교한다, 자릿수 맞춤). */
.hospital-name {
  grid-area: name;
  display: block;
  font-size: var(--type-size-md);
  line-height: var(--type-lineHeight-md);
  font-weight: var(--type-weight-control);
}

/* 거리와 분은 한 줄에(거리 앞, 분 뒤 — 여러 행의 분이 한 세로줄에 선다). 글자를 키워 좁아지면 두 줄로 쌓인다 —
   병원 이름 칸을 글자 하나 폭으로 밀어내지 않게. */
.hospital-far {
  grid-area: far;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 var(--space-1);
  align-self: end;
  text-align: right;
}

.hospital-eta,
.hospital-distance {
  white-space: nowrap;
}

.hospital-distance {
  order: -1;
}

.hospital-minutes {
  font-size: var(--type-size-lg);
  line-height: var(--type-lineHeight-lg);
  font-weight: var(--type-weight-strong);
  letter-spacing: var(--type-tracking-recommendation);
}

.hospital-distance {
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-body);
}

/* 알림 줄: 지금 화면의 값을 그대로 믿으면 안 될 때(서버가 발신을 거절했다, 연결이 끊겼다). 알릴 것이 있을 때만 보인다.
   위아래 흰 선 — 상자로 두르지 않는다. 빨강도 쓰지 않는다(빨강 = 병원의 "불가"). */
.alert-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: var(--space-1) 0;
  border: solid var(--color-text-primary);
  border-width: var(--border-selected-width) 0;
  font-weight: var(--type-weight-control);
}

.alert-line svg {
  flex: none;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  margin-top: calc((var(--type-lineHeight-sm) - var(--icon-size-base)) / 2);
}

/* 패널 맨 아래에 고정된 버튼 줄. 위의 것이 넘쳐 스크롤돼도 버튼은 남는다. 위 칸과의 사이는 16px(다른 일을 하는 버튼과의
   간격) — 스크롤 영역 끝의 4px 여백은 마지막 칸의 초점 선(2px + 2px)이 잘리지 않게. 두 버튼 사이도 16px(빗맞아도 옆의 것이 안 눌린다). */
.submit-bar {
  flex: none;
  padding-top: var(--touch-criticalGap);
}

.submit-bar > .button-primary + .button-primary,
.submit-bar > .button-secondary:not([hidden]) + .button-primary,
.submit-bar > .button-secondary:not([hidden]) + .button-secondary {
  margin-top: var(--touch-criticalGap);
}

/* 좁은 폰(행이 20rem보다 좁다 — 375px 이하, 또는 390px에서 글자 110% 이상): 종별 줄과 거리·분 줄을 가로로 펴서
   이름 칸이 체크·배지 폭만 내주게 한다 — "원주세브란스기독병원"이 낱말 가운데서 끊기지 않게. 행은 28px 높아진다. */
@container row (max-width: 20rem) {
  .row-face {
    grid-template-areas:
      "name mark"
      "line line"
      "far far";
  }
}

/* 글자를 크게 키워(약 150% 이상) 행이 15rem보다 좁아지면 네 칸을 세로로 쌓는다 — 두 열이면 병원 이름이 글자 두 개 폭으로
   밀려 다섯 줄이 된다. 글자·터치 크기는 그대로다. */
@container row (max-width: 15rem) {
  .row-face {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "mark"
      "line"
      "far";
  }

  .hospital-far {
    justify-content: flex-start;
  }
}

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

/* 낮은 화면(사파리 탭 안의 아이폰, 작은 안드로이드): 요약 상자를 좁히고 되읽기를 한 줄로 줄인다. */
@media (max-height: 699px) {
  .brief {
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-2);
  }

  .readout-line,
  .readout-line:has(.is-set) {
    display: inline;
    font-size: var(--type-size-md);
    line-height: var(--type-lineHeight-md);
  }

  .readout-line + .readout-line::before {
    content: " · ";
  }
}