/* 누르는 것 공통: 숫자 키·주 버튼(흰 채움 64px)·보조 버튼(유리면 56px). 화면 틀은 app.css, 색·크기는 tokens.css의 값만 쓴다.
   흰 채움은 그 화면에서 앞으로 가는 일 하나에만 — 다시 해 보는 일(recover)과 조심해서 가는 일(caution)은 유리면 + 흰 2px 선이다. */

/* ── 누르는 것 공통 ─────────────────────────────────────────────────────── */

.key,
.button-primary,
.button-secondary {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border: var(--border-control-width) solid var(--glass-control-ghostBorder);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  font-family: inherit;
  font-variant-numeric: inherit;
  font-weight: var(--type-weight-control);
  /* 줄이 바뀌지 않는 공백으로 묶은 병원명도 칸보다 길면 끊는다 — 좁은 폰에서 글자를 키웠을 때 글자가 화면 밖으로 나가지 않게. */
  overflow-wrap: anywhere;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.key:focus-visible,
.button-primary:focus-visible,
.button-secondary:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

/* 보조 버튼: 어두운 유리면 + 아래쪽 구조선 한 줄(유리 테두리만으로는 어디까지가 버튼인지 안 보인다). */
.button-secondary {
  width: 100%;
  min-height: var(--button-secondary-height);
  padding: var(--space-1) var(--space-2);
  background: var(--glass-button-secondary-fill);
  box-shadow: inset 0 -1px 0 var(--color-border-control);
  font-size: var(--type-size-sm);
  line-height: var(--type-lineHeight-sm);
  font-weight: var(--type-weight-body);
}

@media (hover: hover) {
  .key:not([aria-disabled="true"]):hover,
  .button-secondary:not([aria-disabled="true"]):hover {
    border-color: var(--color-text-primary);
  }
}

/* 눌림: 안쪽에 흰 2px 선. 색을 어둡게 흘리거나 줄어드는 움직임은 쓰지 않는다. */
.button-secondary:active {
  border-color: var(--color-text-primary);
  box-shadow: inset 0 0 0 var(--border-control-width) var(--color-text-primary);
}

/* 지금은 누를 수 없다(요청을 보내는 중): 면을 더 내리고 글자를 흐리게 한다. 투명도는 쓰지 않는다. */
.button-secondary[aria-disabled="true"] {
  border-color: var(--glass-control-ghostBorder);
  background: var(--glass-button-disabled-fill);
  box-shadow: inset 0 -1px 0 var(--color-border-control);
  color: var(--color-text-secondary);
}

/* 되돌아가는 보조 버튼([이전: 중증도]): 앞에 왼쪽 꺾쇠(Lucide chevron-left) — 같은 유리면의 선택 칸과 한눈에 다르게. */
.button-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-1) / 2);
}

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

/* [잠금]·[새 환자]: 머리 줄 오른쪽 끝. 엄지가 닿지 않는 자리에 둔다 — 누르면 기억한 PIN과 입력하던 값이 지워진다. */
.header-action {
  flex: none;
  width: auto;
  min-height: var(--touch-min);
  padding: 0 var(--space-2);
}

/* 머리 줄의 복귀 버튼(B40): "→ 후보 병원" / "→ 수용 1곳". ←로 돌아간 뒤에만 보인다. */
.header-forward {
  display: flex;
  align-items: center;
  gap: calc(var(--space-1) / 2);
  padding-left: calc(var(--space-1) * 1.5);
}

/* 주 버튼(흰 채움 64px): 그 화면에서 지금 할 일 하나. 화면에 하나만 둔다. */
.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: var(--button-primary-height);
  padding: var(--space-1) var(--space-2);
  border-color: var(--color-text-primary);
  background: var(--color-text-primary);
  color: var(--color-text-onFill);
  font-size: var(--type-size-md);
  line-height: var(--type-lineHeight-md);
  box-shadow: var(--shadow-button-primary);
  /* 좁은 폰에서 두 줄이 되면 줄 길이를 맞춘다("…선택 / 필요"처럼 한 낱말만 떨어지지 않게). */
  text-wrap: balance;
}

.button-primary:active {
  box-shadow: inset 0 0 0 var(--border-selected-width) var(--color-text-onFill);
}

/* 아직 누를 수 없을 때: 어두운 유리면 + 흐린 글자. 까닭은 버튼 글자가 말한다. 투명도는 쓰지 않는다.
   조심하는 버튼이 누를 수 없을 때(기준 위치를 받는 중)도 같은 모습이다 — 흰 선이 남아 있으면 눌리는 것처럼 보인다. */
.button-primary[aria-disabled="true"],
.button-primary:is([data-tone="recover"], [data-tone="caution"])[aria-disabled="true"] {
  border-color: var(--glass-control-ghostBorder);
  background: var(--glass-button-disabled-fill);
  box-shadow: inset 0 -1px 0 var(--color-border-control);
  color: var(--color-text-secondary);
}

/* 다시 해 보는 일(recover: 재시도)과 조심해서 가는 일(caution: 수용하지 않은 병원으로 이송 결정): 흰 채움은 앞으로 가는
   주 버튼에만 쓴다. 이 둘은 유리면 + 흰 2px 선 + 경고 표식 — 글자를 읽기 전에 "평소와 다르다"가 보이게. */
.button-primary:is([data-tone="recover"], [data-tone="caution"]) {
  background: var(--glass-control-fill);
  box-shadow: inset 0 0 0 var(--border-control-width) var(--color-text-primary);
  color: var(--color-text-primary);
}

.button-primary:is([data-tone="recover"], [data-tone="caution"]):active {
  background: var(--color-text-primary);
  color: var(--color-text-onFill);
}

.button-mark {
  display: none;
  flex: none;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
}

.button-primary:is([data-tone="recover"], [data-tone="caution"]) .button-mark {
  display: block;
}

/* 움직임은 이것 하나다: 상태가 바뀐 순간을 한 번 알린다(160ms) — 못 보내 재시도 버튼이 됐을 때, 수용하지 않은 병원을 골라
   조심하는 버튼이 됐을 때, 아직 누를 수 없는 버튼을 눌렀을 때. 흰 면에서 제 모습으로 돌아온다. 되풀이하지 않는다. */
@keyframes state-flash {
  from {
    border-color: var(--color-text-primary);
    background: var(--color-text-primary);
    color: var(--color-text-onFill);
  }
}

.button-primary:is([data-tone="recover"], [data-tone="caution"]),
.button-primary.is-refusing,
.button-secondary.is-refusing {
  animation: state-flash var(--motion-state-ms) ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .button-primary:is([data-tone="recover"], [data-tone="caution"]),
  .button-primary.is-refusing,
  .button-secondary.is-refusing {
    animation: none;
  }
}