/* 로그인 화면(B08): ID 칸 + PIN 자리 여섯 칸 + 숫자 키. 전부 아래 유리 패널 안에 있다.
   위 40%는 리플렛 표지와 같은 말(B39): 슬로건 · 한 줄 설명 · 작은 글씨(무엇을 위한 앱인지 · 로그인 유지 시간). */

/* 슬로건은 두 줄이 된다(390px) — 줄 길이를 맞춰 "동시에." 한 낱말만 떨어지지 않게. */
.pin-slogan {
  text-wrap: balance;
}

.pin-tagline {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

/* 무엇을 누를지는 자리 칸 바로 위에 적는다 — 화면 맨 위에 두면 칸과 200px 떨어져 따로 읽힌다. */
.pin-label {
  display: block;
  margin: 0 0 calc(var(--space-1) / 2);
  color: var(--color-text-secondary);
}

/* ID 칸과 PIN 이름표 사이. ID는 보통 채워져 있어 눈이 바로 PIN으로 내려간다. */
.login-id {
  margin-bottom: var(--space-2);
}

/* ID 없이 PIN을 눌렀다: 고칠 곳이 ID 칸이다. 틀림(denied)은 ID·PIN 어느 쪽인지 모르니 칸을 칠하지 않는다. */
[data-phase="noid"] .login-id {
  border-color: var(--color-error-text);
}

/* 자리 여섯 칸은 키 세 열에 두 칸씩 맞물린다. 누르는 것이 아니라서 상자가 아닌 밑줄로 그린다. */
.slots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--touch-gap);
}

.slot {
  display: grid;
  place-items: center;
  height: var(--touch-preferred);
  border-bottom: var(--border-selected-width) solid var(--color-border-control);
  font-size: var(--type-size-xl);
  line-height: var(--type-lineHeight-xl);
  font-weight: var(--type-weight-control);
}

.slot.is-filled::after {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: var(--color-text-primary);
}

[data-phase="denied"] .slot,
[data-phase="locked"] .slot {
  border-bottom-color: var(--color-state-decline);
}

/* 다음에 채워질 칸. */
.slots .slot.is-next {
  border-bottom-color: var(--color-text-primary);
}

/* 한 줄 자리를 늘 차지한다 — 문구가 생길 때 키가 밀려 내려가 엄지 밑에서 움직이지 않게.
   안의 칸(진행 상태·초·알림)은 비어 있어도 숨기지 않는다: 숨겼다 드러낸 칸은 화면 읽기 프로그램이 못 읽을 수 있다. */
.pin-message {
  min-height: var(--type-lineHeight-sm);
  margin: var(--space-1) 0 var(--space-2);
  color: var(--color-text-secondary);
}

[data-phase="denied"] .pin-message,
[data-phase="locked"] .pin-message,
[data-phase="noid"] .pin-message {
  color: var(--color-error-text);
}

/* 서버에 묻지 못했거나 PIN이 바뀌었다: 이 화면에서 가장 먼저 읽혀야 한다. 빨강은 "틀림"에만 쓴다. */
[data-phase="offline"] .pin-message,
[data-phase="error"] .pin-message,
[data-phase="revoked"] .pin-message {
  color: var(--color-text-primary);
  font-weight: var(--type-weight-control);
}

.pin-mark {
  display: none;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  margin-right: calc(var(--space-1) / 2);
  color: var(--color-text-secondary);
  vertical-align: middle;
}

[data-phase="offline"] .pin-mark,
[data-phase="error"] .pin-mark,
[data-phase="revoked"] .pin-mark {
  display: inline-block;
}

.keypad {
  /* 키 높이는 패널에 남는 자리(ID 칸 아래)를 네 줄로 나눈 값(48~76px): 844px 폰에서 약 57px.
     그보다 낮아 48px 아래로 내려가면 줄이지 않고 패널 안에서 스크롤한다. */
  --key-height: clamp(var(--touch-min), calc((var(--app-height) * 0.6 - 280px) / 4), 76px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--touch-gap);
}

/* 키 = 유리 선택기 면(choice와 같은 모습). */
.key {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--key-height);
  padding: 0 var(--space-1);
  background: linear-gradient(180deg, var(--glass-control-sheen), transparent), var(--glass-control-fill);
  box-shadow: inset 0 -1px 0 var(--color-border-control);
  font-size: var(--type-size-xl);
  line-height: var(--type-lineHeight-xl);
}

/* 눌림: 키가 통째로 뒤집힌다. 키는 고른 채로 남는 상태가 없어서, 닿은 순간의 표시가 전부다 —
   손가락에 가려도 가장자리로 보이도록 테두리 선이 아니라 면을 바꾼다. */
.key:active {
  border-color: var(--color-text-primary);
  background: var(--color-text-primary);
  box-shadow: none;
  color: var(--color-text-onFill);
}

/* 맨 아랫줄: [재시도] [0] [지우기]. 재시도는 서버에 못 물어봤을 때만 나타나고, 없어도 0은 가운데다. */
.key[data-key="retry"] {
  grid-column: 1;
}

.key[data-key="0"] {
  grid-column: 2;
}

.key[data-key="erase"] {
  grid-column: 3;
}

/* 글자 키는 아이콘 아래에 이름을 둔다. 옆으로 나란히 두면 좁은 폰(320px)에서 "지우 / 기"로 끊긴다. */
.key-action {
  flex-direction: column;
  gap: 0;
  font-size: var(--type-size-sm);
  line-height: 1.5rem;
  white-space: nowrap;
}

.key-action svg {
  flex: none;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
}

/* 재시도는 나타났을 때 화면에서 가장 밝다 — 그 순간 할 일은 이것 하나다. */
.key[data-key="retry"] {
  border-color: var(--color-text-primary);
  background: var(--color-text-primary);
  box-shadow: var(--shadow-button-primary);
  color: var(--color-text-onFill);
}

.key[data-key="retry"]:active {
  box-shadow: inset 0 0 0 var(--border-selected-width) var(--color-text-onFill);
}

/* 먹지 않는 키(확인 중의 모든 키, 못 물어본 동안의 숫자 키): 면을 더 내리고 글자를 흐리게 한다.
   눌러도 뒤집히지 않는다. 투명도로 흐리게 하지는 않는다. */
.keypad .key[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);
}