/* 키보드 · 키캡 렌더링 (DESIGN.md §4.3) — 좌표는 render.js가 % 인라인으로 지정 */

.kb-scroll { overflow-x: auto; padding-bottom: 6px; }

.kb-case {
  min-width: 880px;
  background: linear-gradient(180deg, var(--surface), #12151d);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(12px, 1.7vw, 24px);
  box-shadow:
    0 34px 70px -34px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.kb {
  position: relative;
  aspect-ratio: 22.5 / 6.5;
  container-type: inline-size;
}

.key { position: absolute; }

/* 키캡 본체 — 상단면 그라데이션 + 스커트(하단 두께) + 드리운 그림자 */
.cap {
  position: absolute;
  inset: 2px;
  inset: 0.17cqw;
  border-radius: 6px;
  border-radius: 0.52cqw;
  background: linear-gradient(180deg, var(--keycap-hi), var(--keycap-lo));
  box-shadow:
    0 3px 0 var(--skirt),
    0 6px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  box-shadow:
    0 0.3cqw 0 var(--skirt),
    0 0.55cqw 1cqw rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.06cqw;
  user-select: none;
  transition: transform 70ms ease, box-shadow 70ms ease, color 0.15s ease;
}

.key.m .cap {
  background: linear-gradient(180deg, var(--keycap-mod-hi), var(--keycap-mod-lo));
}

/* 각인 */
.cap .l { font-size: 12px; font-size: 1.12cqw; font-weight: 600; letter-spacing: 0.02em; line-height: 1.15; }
.cap .u { font-size: 8px; font-size: 0.78cqw; opacity: 0.72; line-height: 1.1; }
.cap .s { font-size: 8px; font-size: 0.74cqw; opacity: 0.5; line-height: 1.1; }
.key.txt .cap .l { font-size: 8px; font-size: 0.72cqw; font-weight: 700; letter-spacing: 0.03em; }

/* 테스트 완료 — 은은한 민트로 유지되어 "안 눌러본 키"가 한눈에 남음 */
.key.tested .cap {
  color: var(--tested);
  background: linear-gradient(180deg, #1e2b28, #17211e);
  box-shadow:
    0 0.3cqw 0 var(--skirt),
    0 0.55cqw 1cqw rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(62, 207, 142, 0.38);
}

/* 눌림 — 물리적으로 내려가며 앰버 발광 (.tested보다 뒤에 선언해 우선) */
.key.down .cap {
  transform: translateY(0.24cqw);
  color: var(--accent-hi);
  background: linear-gradient(180deg, #3b3322, #2b2514);
  box-shadow:
    0 0.08cqw 0 var(--skirt),
    0 0 1.5cqw rgba(245, 165, 36, 0.55),
    inset 0 0 0 1px var(--accent);
}

/* 채터링 의심 — 붉은 링 (tested보다 우선) */
.key.suspect .cap {
  color: var(--danger);
  background: linear-gradient(180deg, #2e1d22, #241619);
  box-shadow:
    0 0.3cqw 0 var(--skirt),
    0 0.55cqw 1cqw rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(240, 85, 95, 0.55);
}

/* 이벤트가 오지 않는 키 (Fn·Touch ID) */
.key.dead .cap { opacity: 0.4; }

/* 화면 폭에 맞춤 (키캡 시뮬레이터 등 터치 우선 페이지) */
.kb-case.fit { min-width: 0; }

/* 로드 시 키캡 순차 등장 (지연은 render.js가 --d로 지정) */
.key {
  animation: key-in 0.36s ease both;
  animation-delay: var(--d, 0s);
}
@keyframes key-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}