/* =====================================================================
   화면 키보드 — 입력창 + 5줄 자판 (숫자 · 3줄 문자 · 기능줄), 폭 1032px 안에 맞춘다
   키 높이 128px (어린이 손가락 기준) · 누름 피드백은 pointerdown 즉시 (.is-down)
   ===================================================================== */

.typein {
  position: relative; height: 120px; box-sizing: border-box; display: flex; align-items: center; gap: 18px; padding: 0 28px;
  border-radius: 28px; background: var(--c-white); border: 3px solid var(--c-blue-soft);
}
.typein__text { flex: 1; min-width: 0; font-size: 44px; line-height: 56px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.typein.is-long .typein__text { font-size: 33px; line-height: 44px; white-space: normal; word-break: break-all; max-height: 88px; }
.typein__placeholder { color: var(--c-ink-dim); font-weight: 500; }
.typein__caret { display: inline-block; width: 4px; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: var(--c-blue); animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
.typein__count { flex: none; font-size: 26px; font-weight: 700; color: var(--c-ink-dim); }
.typein__count.is-full { color: var(--c-red); }

.kb { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.kb__row { display: flex; gap: 10px; justify-content: center; }
.kb__key {
  flex: 0 0 94px; height: 128px; border-radius: var(--r-key); background: var(--c-white); box-shadow: var(--shadow-key);
  font-size: 46px; font-weight: 700; line-height: 1; color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform 80ms var(--ease-soft), background-color 80ms var(--ease-soft);
}
.kb__key.is-down { transform: translateY(3px); box-shadow: none; background: var(--c-blue-pale); }
.kb__key--digit { height: 104px; font-size: 38px; color: var(--c-ink-soft); background: var(--c-silver-1); }
.kb__key--fn { flex-basis: 140px; font-size: 30px; background: var(--c-silver-2); color: var(--c-ink-soft); }
.kb__key--lang { flex-basis: 150px; }
.kb__key--space { flex: 1 1 auto; font-size: 30px; color: var(--c-ink-dim); }
.kb__key--send { flex-basis: 220px; background: var(--c-red); color: var(--c-white); font-size: 36px; }
.kb__key--send.is-disabled { opacity: .38; }
.kb__key--shift.is-on { background: var(--c-blue); color: var(--c-white); }
.kb__key svg { width: 44px; height: 44px; }