/* 화면 공통: 사진 바탕·틀·유리 패널·누르는 것. 화면마다의 스타일은 따로 둔다(pin.css …). 색·크기는 tokens.css의 값만 쓴다.
   층은 사진 → 어두운 wash → 유리면 → 글자 순이다(docs/design/04_screens.md §2). 위 40%는 읽는 정보(사진 위 큰 글자와
   요약 상자), 아래 60%는 누르는 것(유리 패널 — 안에서만 스크롤하고 맨 아래 버튼은 고정). 장식 색·반복 움직임 없음. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg-base);
  /* 화면은 폰 한 장 크기에 고정이다 — 스크롤은 패널 안에서만. 미끄러진 엄지가 화면을 끌어내려 새로고침하거나
     두 번 눌러 확대하지 못하게. 두 손가락 확대는 그대로 된다. */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* body에는 배경을 칠하지 않는다 — 칠하면 아래의 사진(body::before, z-index -1)을 덮는다. 바탕색은 html이 캔버스에 칠한다. */
body {
  height: 100%;
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--type-family-ui);
  font-size: var(--type-size-sm);
  line-height: var(--type-lineHeight-sm);
  font-weight: var(--type-weight-body);
  font-variant-numeric: var(--type-numeric-variant);
  /* 한글은 낱말 가운데서 줄을 바꾸지 않는다("없습니/다"). 칸보다 긴 낱말만 끊는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 바탕 사진과 wash. 사진이 아직 안 왔거나 끊겨서 못 받아도 어두운 바탕은 그대로다 — 글자 대비는 wash 0.68이 보장한다. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--glass-wash), url("../public/images/photo_landscape_ui.jpg") 64% center / cover no-repeat var(--color-bg-base);
}

::selection {
  background: var(--color-text-primary);
  color: var(--color-text-onFill);
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 틀: 폰 한 화면. 노치·홈 막대 자리는 비운다 ─────────────────────────────── */

.app {
  /* 화면 맨 아래 여백. 유리 패널의 아래 모서리가 이 위에 선다. */
  --app-pad-bottom: max(var(--space-1), env(safe-area-inset-bottom, 0px));
  /* 쓸 수 있는 높이(노치·홈 막대 제외)와 그 40% — 조작 패널이 시작하는 자리. */
  --app-height: calc(100vh - env(safe-area-inset-top, 0px) - var(--app-pad-bottom));
  --panel-start: calc(var(--app-height) * var(--layout-thumb-startRatio));
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: var(--layout-content-maxWidth);
  margin: 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: max(var(--layout-gutter), env(safe-area-inset-right, 0px));
  padding-bottom: var(--app-pad-bottom);
  padding-left: max(var(--layout-gutter), env(safe-area-inset-left, 0px));
}

@supports (height: 1dvh) {
  .app {
    --app-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--app-pad-bottom));
    height: 100dvh;
  }
}

main,
.view {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* 화면 폭을 rem으로 재면 글자를 얼마나 키웠는지 알 수 있다(패널·사진은 px, 글자는 rem) — 아래 @container(머리 줄 뒤). */
.view {
  container: view / inline-size;
}

/* 위 40%: 읽는 정보. 넘치면 여기서만 스크롤한다 — 아래 패널은 자리를 지킨다. */
.view-top {
  flex: none;
  height: var(--panel-start);
  padding-bottom: var(--space-2);
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.view-top::-webkit-scrollbar {
  display: none;
}

/* 글자를 키워 한 줄에 안 들어오면 버튼들이 둘째 줄 오른쪽으로 내려간다(표식을 덮지 않는다). */
.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-height: var(--touch-min);
  margin-top: var(--space-1);
}

/* 표식(흰 GT·심전도)과 이탤릭 워드마크 — 원본 SVG 그대로, 본문에 이탤릭을 쓰지 않는다. */
/* 표식은 줄어들지 않는다(flex-shrink 0) — 자리가 모자라면 버튼이 다음 줄로 간다. */
.brand {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: var(--space-1);
}

.brand-mark {
  flex: none;
  width: 52px;
  height: 26px;
}

.brand-wordmark {
  flex: none;
  width: 108px;
  height: 24px;
}

/* 복귀 버튼이 보이는 동안은 워드마크를 접는다(B40): 390px에서 표식 + [→ 후보 병원] + [잠금]이 한 줄에 들어가게(둘째 줄로 꺾이면 위 영역이 밀린다). */
.app-header:has(.header-forward:not([hidden])) .brand-wordmark {
  display: none;
}

.brand-mark,
.brand-wordmark {
  display: block;
  object-fit: contain;
}

/* 머리 줄의 버튼([잠금]·[새 환자])은 오른쪽 끝 — 엄지에서 먼 자리. 좁은 폰에서는 워드마크를 숨겨 자리를 준다. */
@media (max-width: 359px) {
  .brand-wordmark {
    display: none;
  }
}

/* 글자를 키워(390px 폰에서 약 112% 이상) 화면이 20rem보다 좁아지면 워드마크와 눈썹 제목을 접는다 —
   위 40%는 답("수용 1곳"과 병원·분)이 먼저다. 320px 폰은 글자 100%에서도 여기 든다. */
@container view (max-width: 20rem) {
  .brand-wordmark {
    display: none;
  }

  .view-title--eyebrow {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 글자를 아주 크게 키우면(약 150% 이상 — 화면이 15rem보다 좁다) 위 영역을 내용만큼(최대 35%)으로 줄여 패널에 자리를 준다 —
   버튼 두 개가 각각 세 줄이 돼 패널 안 스크롤 창이 사라지지 않게. 이때만 "위 40%" 규칙을 접는다(390×844·200%에서 답 두 줄이 다 보인다). */
@container view (max-width: 15rem) {
  .view-top {
    flex: 0 0 auto;
    height: auto;
    max-height: calc(var(--app-height) * 0.35);
  }

  /* 표식도 접는다 — 그 자리에 답("수용 1곳"과 병원·분)이 들어온다. */
  .brand {
    display: none;
  }
}

/* 낮은 화면에 글자까지 아주 크면(320×600·200%) 버튼 줄만으로 패널이 찬다 — 그때는 버튼 줄이 스스로 스크롤해(최대 패널의 60%)
   행에 닿을 자리를 남긴다. 주 버튼이 늘 다 보이는 것보다 행을 누를 수 있는 것이 먼저다. */
@media (max-height: 699px) {
  @container view (max-width: 15rem) {
    .submit-bar {
      max-height: 60%;
      overflow: hidden auto;
      overscroll-behavior: contain;
    }
  }
}

.view-title {
  margin: var(--space-1) 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);
}

/* 응답 화면의 제목("병원 응답")은 작은 눈썹 글자다 — 그 아래 답("수용 1곳")이 이 화면에서 가장 커야 한다. */
.view-title--eyebrow {
  font-size: var(--type-size-sm);
  line-height: var(--type-lineHeight-sm);
  font-weight: var(--type-weight-body);
  letter-spacing: 0;
  color: var(--color-text-secondary);
}

/* 화면이 바뀔 때 제목으로, 입력 단계가 바뀔 때 그 아래 줄로 초점을 옮긴다(스크린리더가 읽게). 눌러서 고르는 대상은 아니다. */
.view-title:focus,
.view-lede:focus {
  outline: none;
}

.view-lede {
  margin: calc(var(--space-1) / 2) 0 0;
  font-size: var(--type-size-md);
  line-height: var(--type-lineHeight-md);
}

/* 제목 줄의 ←(후보·응답 화면, 리플렛대로 — B39): 제목 왼쪽의 48px 표적. 앞 화면으로 돌아간다 — 고른 값·결과는 남는다.
   유리면 없이 화살표만 — 선택지가 아니라 되돌아가는 길이다. 왼쪽으로 8px 당겨 화살표가 제목·표식과 같은 선에 선다. */
.title-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.title-row .view-title {
  min-width: 0;
  margin-top: 0;
}

.title-back {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  margin: 0 0 0 calc(-1 * var(--space-1));
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-primary);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.title-back svg {
  width: var(--icon-size-action);
  height: var(--icon-size-action);
}

.title-back:active {
  background: var(--glass-control-fill);
}

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

/* 지금은 돌아갈 수 없다(요청을 보내는 중): 화살표를 흐리게 한다. 투명도는 쓰지 않는다. */
.title-back[aria-disabled="true"] {
  color: var(--color-text-secondary);
}
/* 응답 화면은 제목 자리가 "수용 1곳"(.answer)이다 — ←는 그 옆(B40). */
.title-row .answer {
  margin-top: 0;
}

/* 발신한 뒤 입력 화면 맨 위의 띠(B40): "발신 진행 중 · 결과 보기 →". 발신중 색 테두리의 넓은 버튼 —
   이 화면은 읽기만 하고 결과는 저기 있다는 표시. 머리 줄 바로 아래, 제목 위에 둔다. */
.band {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  width: 100%;
  min-height: var(--touch-min);
  margin: var(--space-1) 0 0;
  padding: var(--space-1) var(--space-2);
  border: var(--border-selected-width) solid var(--color-state-calling);
  border-radius: var(--radius-control);
  background: var(--glass-info-fill);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--type-size-sm);
  line-height: var(--type-lineHeight-sm);
  font-weight: var(--type-weight-control);
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.band svg {
  flex: none;
  color: var(--color-state-calling);
}
.band:active {
  background: var(--glass-control-selected-fill);
}
.band:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

/* ── 아래 60%: 유리 패널. 누르는 것은 전부 이 안에 있다 ─────────────────────────── */

.view-controls {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding-bottom: var(--space-1);
}

/* 패널의 면은 뒤에 따로 그린다(backdrop-filter가 사진을 흐린다). 좌우로 8px, 위로 16px 더 넓다 — 글자는 16px 안쪽에서 시작한다. */
.view-controls::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-2)) calc(-1 * var(--space-1)) calc(-1 * var(--space-1));
  z-index: -1;
  pointer-events: none;
  border: var(--border-control-width) solid var(--glass-panel-edge);
  border-radius: var(--radius-glass-panel);
  background: var(--glass-panel-fill);
  backdrop-filter: var(--glass-panel-filter);
  -webkit-backdrop-filter: var(--glass-panel-filter);
  box-shadow: var(--shadow-glass-panel);
}

/* 패널 안에서 넘치는 것만 스크롤한다. 맨 아래 버튼 줄(.submit-bar)은 밀리지 않는다. */
.panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: calc(var(--space-1) / 2);
  overflow: hidden auto;
  overscroll-behavior: contain;
  scroll-padding-block: var(--space-1);
  scrollbar-width: thin;
}

/* 아래로 더 있다(view-kit의 markOverflow가 붙인다): 아래 가장자리를 흐려 잘린 칸이 "끝"이 아니라 "이어짐"으로 읽히게.
   폰에는 스크롤바가 없다. 끝까지 내리면 흐림이 걷힌다. */
.panel-scroll.is-overflowing {
  -webkit-mask-image: linear-gradient(#000 calc(100% - var(--space-3)), transparent);
  mask-image: linear-gradient(#000 calc(100% - var(--space-3)), transparent);
}

.notice {
  margin: var(--space-3) 0 0;
  color: var(--color-error-text);
}