/* 키보드 테스트 */
.kb-guide { font-size: var(--text-sm, .875rem); color: var(--text-secondary, #3d434d); margin: 0 0 var(--spacing-md, 1rem); line-height: 1.7; }
.kb-legend { display: inline-block; padding: .0625rem .375rem; border-radius: 4px; font-weight: 600; }
.kb-legend-down { background: var(--accent-primary, #3b6fe0); color: #fff; }
.kb-legend-pressed { background: var(--accent-soft-strong, #e0e9fb); color: var(--accent-text, #2c56b8); }

.kb-wrap { display: flex; gap: .75rem; align-items: flex-start; overflow-x: auto; padding-bottom: .5rem; }
.kb-main { flex: 0 0 auto; min-width: 40rem; }
.kb-side { flex: 0 0 auto; }
.kb-row { display: flex; gap: .1875rem; margin-bottom: .1875rem; }
.kb-row-gap { height: .75rem; }
.kb-key {
    flex: 1 1 0; min-width: 2rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-color, #d8dce3); border-radius: 5px;
    background: var(--bg-surface, #fff); color: var(--text-secondary, #3d434d);
    font-size: .6875rem; font-weight: 600; user-select: none;
    transition: background-color .08s ease, color .08s ease, transform .08s ease;
}
.kb-key-blank { border: 0; background: none; }
.kb-key.is-pressed { background: var(--accent-soft-strong, #e0e9fb); color: var(--accent-text, #2c56b8); border-color: var(--accent-primary-light, #5b88ea); }
.kb-key.is-down { background: var(--accent-primary, #3b6fe0); color: #fff; border-color: var(--accent-primary-strong, #2c56b8); transform: translateY(1px); }
.kb-nav .kb-key, .kb-numpad .kb-key { min-width: 2.25rem; }

.kb-stat { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); font-variant-numeric: tabular-nums; }

.kb-extras-box { margin-top: var(--spacing-lg, 1.5rem); padding: .75rem; background: var(--surface-2, #f1f3f7); border-radius: var(--radius-sm, 6px); }
.kb-extras-box h3 { font-size: var(--text-sm, .875rem); margin: 0 0 .25rem; }
.kb-extras-box p { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); margin: 0 0 .5rem; }
.kb-extra { display: inline-block; margin: .125rem; padding: .1875rem .5rem; border-radius: 4px; background: var(--accent-soft-strong, #e0e9fb); color: var(--accent-text, #2c56b8); font-size: var(--text-ui-sm, .8125rem); font-family: ui-monospace, monospace; }

.kb-last { display: flex; flex-direction: column; gap: .5rem; }
.kb-last > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .375rem 0; border-bottom: 1px solid var(--border-subtle, #eef0f4); }
.kb-last > div:last-child { border-bottom: 0; }
.kb-last-label { font-size: var(--text-sm, .875rem); color: var(--text-muted, #626977); }
.kb-last-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.0625rem; font-weight: 600; }

.kb-log { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow: auto; }
.kb-log li { display: flex; gap: .5rem; align-items: baseline; padding: .25rem 0; border-bottom: 1px solid var(--border-subtle, #eef0f4); font-size: var(--text-ui-sm, .8125rem); }
.kb-log code { font-family: ui-monospace, monospace; background: var(--surface-2, #f1f3f7); padding: .0625rem .375rem; border-radius: 4px; flex: 0 0 auto; }
.kb-log span { color: var(--text-muted, #626977); word-break: break-all; }

@media (max-width: 768px) { .kb-key { height: 2rem; min-width: 1.75rem; font-size: .625rem; } }