/* =====================================================================
   한글 키보드 — 배열 좌표는 Section 3(22:74) 실측 그대로 두고, Section 4(33:639)
   에서 바뀐 것은 "위치와 배율"뿐이라 컨테이너를 옮기고 축소한다.
     Section 3: 원점 (84, 888) · 911.4×434.6
     Section 4: 원점 (115.4, 786.97) · 848.6×404.66  → 배율 0.93111
   키 하나하나의 좌표는 scripts/keyboard/layout-ko.json 이 CSSOM 으로 심는다.
   ===================================================================== */

.keyboard {
  position: absolute;
  left: 115.4px; top: 786.97px;
  width: 911.4px; height: 434.6px;
  transform: scale(0.93111);
  transform-origin: 0 0;
}

/* 행 래퍼 — 등장을 행 단위로 묶기 위한 것뿐이라 좌표계를 바꾸면 안 된다.
   inset:0 로 키보드와 같은 박스를 차지해 키의 절대좌표가 그대로 유지된다. */
.keyboard__row { position: absolute; inset: 0; pointer-events: none; }
/* ⚠ 래퍼는 히트테스트에서 뺀다. 4행 래퍼가 전부 inset:0 이라 마지막 래퍼(빈 div)가 1~3행 키 위에 얹혀
   실제 터치를 가로챘다 — 4행(123·한/영·space)만 눌리고, 한/영을 누르면 키보드가 다시 그려져(래퍼 소멸) 그제야 됐다.
   selftest 는 키 요소에 이벤트를 직접 주입해 히트테스트를 건너뛰어 못 잡았다 (실사고 2026-08-30 아침). */
.keyboard__row .key { pointer-events: auto; }

.key {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  border: 0;
  border-radius: var(--key-radius);
  box-shadow: var(--key-shadow);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  transition: translate 60ms ease, box-shadow 60ms ease, filter 60ms ease;
}
.key--dark  { background: var(--key-dark);  color: var(--key-dark-ink); }
.key--light { background: var(--key-light); color: var(--key-light-ink); }

/* 기능키(영 · 123 @ · space)는 글자키보다 작게 — 시안 그대로 */
.key--fn { font-size: 30px; font-weight: 500; }
.key--space { font-size: 28px; letter-spacing: 1px; }

.key--icon svg { width: 46px; height: 46px; display: block; }
.key--icon .key__img { width: 62px; height: auto; display: block; pointer-events: none; }   /* back_b.png 73×51 → 키(109×95) 안에 넉넉히 */

/* 눌리면 그림자만큼 내려앉는다 — 물리 키 느낌 */
.key.is-press {
  translate: 0 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  filter: brightness(1.12);
}

/* 쉬프트가 켜져 있으면 쉬프트 키를 반전해 상태를 알린다 */
.keyboard.is-shifted .key[data-action="shift"] {
  background: var(--ink);
  color: #FFF;
}

.keyboard__error {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; font-family: var(--f-sans); font-size: 36px; color: var(--sub);
}