/* 키보드 테스트(/tools/keyboard-test/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css 다음에 링크된다 — 토큰(--site-*, --bn-*)·.bn·.bn-doc·.gs-cta·.sv-links 를 그대로 쓴다.
 * 구조: 제목 → 테스트 무대(수치 · 상태 줄 · 화면 키보드 · 범례 · 배열 밖 키 · 채터링 의심 상자) → 관련 도구 → 설명.
 * 어떤 문구를 보일지는 루트 .kb 의 data-state · data-* 플래그로 고른다(tools-keyboard.js 가 바꾼다).
 * 화면 키보드 크기: 키 1칸 = --u. 넓은 화면은 본체 15칸 + 편집키 3칸 + 텐키 4칸 + 간격 2개(각 0.25칸) = 22.5칸을
 *   무대 폭에 맞추고(컨테이너 단위 cqi), 좁은 화면(600px 이하 무대)은 본체를 한 줄에 15칸으로 두고 편집키·텐키를 아래로 내린다.
 *   → 페이지에 가로 스크롤이 생기지 않는다.
 * 모서리: 무대 20px · 상자 16px · 버튼 10px(PC 부품 진단과 같은 단계). 키 모서리는 키 크기에 비례.
 * ⚠ prefers-reduced-motion 은 CSS 전환만 끈다. 입력 표시는 막지 않는다.
 */
.page-kb { --kb-done: rgba(122, 165, 242, .3); }   /* 사이트 강조색(--site-accent #7aa5f2)의 옅은 겹침 — .bn ::selection 과 같은 방식 */
.kb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 무대 ─────────────────────────────────────────────────────── */
.kb-stage {
    margin-top: 28px; padding: clamp(16px, 2.6vw, 28px); border-radius: 20px;
    background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.kb-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.kb-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 12px clamp(20px, 3.4vw, 44px); }
.kb-stats dt { font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); white-space: nowrap; }
.kb-stats dd { margin: 4px 0 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--site-text, #f0f0f0); white-space: nowrap; }
.kb-of { font-family: var(--bn-mono); font-size: .55em; font-weight: 600; color: var(--site-text-3, #949494); }
.kb[data-chat] .kb-stat-chat dd { color: var(--bn-warn); }

.kb-reset {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); border-radius: 10px;
    background: transparent; color: var(--site-text, #f0f0f0); font: 600 .9375rem/1 var(--bn-font); cursor: pointer;
    transition: background-color .15s;
}
.kb-reset:hover { background: var(--site-surface-2, #2a2a2a); }
.kb-reset:active { transform: translateY(1px) scale(.98); }
.kb-reset:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
html:not(.kb-js) .kb-reset { visibility: hidden; }

/* 상태 줄: 기본은 숨기고 상태에 맞는 줄만. */
.kb-status { margin-top: 18px; min-height: 1.6em; }
.kb-msg { display: none; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); }
.kb-msg code { font-size: .9375em; color: var(--site-text, #f0f0f0); }
.kb-msg--warn { color: var(--bn-warn); }
.kb-noscript { display: block; }
.kb[data-state="idle"] [data-for="idle"],
.kb[data-state="active"] [data-for="active"],
.kb[data-blur] [data-for="blur"] { display: block; }
.kb[data-blur] [data-for="active"] { display: none; }
.kb:not([data-gap]) .kb-gap { display: none; }

/* 키보드로 빠져나가는 방법(WCAG 2.1.2): 테스트 중에는 늘 보이고, 멈추면 '계속하기' 상자로 바뀐다. */
.kb-esc { display: none; margin-top: 8px !important; align-items: flex-start; gap: 8px; font-size: .875rem; line-height: 1.6; color: var(--site-text-3, #949494); }
.kb-esc .bi { margin-top: .2em; }
html.kb-js .kb:not([data-paused]) .kb-esc { display: flex; }
.kb-paused {
    display: none; margin-top: 12px; padding: 12px 14px; border-radius: 16px; align-items: center; flex-wrap: wrap; gap: 10px 16px;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
}
.kb-paused p { font-size: .9375rem; color: var(--site-text, #f0f0f0); }
.kb[data-paused] .kb-paused { display: flex; }
.kb[data-paused] .kb-board { opacity: .55; cursor: pointer; }
/* 마우스 없는 터치 기기: 화면 키보드로는 키 사건이 오지 않는다 → 실물 키보드 연결 안내. */
.kb-touch { display: none; font-size: .9375rem; line-height: 1.6; color: var(--bn-warn); }
@media (hover: none) and (pointer: coarse) {
    .kb-touch { display: block; margin-top: 6px !important; }
}
.kb[data-gap-chat] #kb-gap { color: var(--bn-warn); }

/* ── 화면 키보드 ───────────────────────────────────────────────── */
.kb-board { margin-top: 14px; container-type: inline-size; }
.kb-wrap { --u: calc(100cqi / 22.5); display: flex; align-items: flex-start; gap: calc(var(--u) * .25); }
.kb-block {
    display: grid; flex: none;
    grid-template-rows: var(--u) calc(var(--u) * .4) repeat(5, var(--u));
}
.kb-block--main { grid-template-columns: repeat(60, calc(var(--u) / 4)); }
.kb-block--nav { grid-template-columns: repeat(12, calc(var(--u) / 4)); }
.kb-block--num { grid-template-columns: repeat(16, calc(var(--u) / 4)); }
@container (max-width: 600px) {
    .kb-wrap { --u: calc(100cqi / 15); flex-wrap: wrap; row-gap: calc(var(--u) * .3); column-gap: calc(var(--u) * .5); }
    .kb-block--main { flex-basis: 100%; }
    /* 아래로 내린 편집키(3칸)·텐키(4칸)는 간격(본체 0.5칸 = 폭/30)을 빼고 한 줄 폭을 나눠 쓴다 → 본체 키의 약 2배.
     * 본체 키 크기 그대로면 375px 에서 PrtSc·ScrLk·Home·PgUp·PgDn 글자가 칸 밖으로 넘쳤다(2026-11-08 QA). */
    .kb-block--nav, .kb-block--num { --u: calc(100cqi / 7.3); }
    /* 본체 키(약 17px)에서는 오른쪽 위 채터링 횟수가 글자와 겹친다 → 테두리만 두고 횟수는 아래 목록에서 본다. */
    .kb-block--main .kb-k.is-chat::after { display: none; }
}

.kb-k {
    position: relative; margin: max(1.5px, calc(var(--u) * .045));
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border-radius: min(8px, calc(var(--u) * .16));
    background: var(--bn-cell, #2f2f2f); color: var(--site-text-2, #b0b0b0);   /* #b0b0b0 on #2f2f2f ≈ 6:1 (text-3 은 4.41:1 로 AA 미달) */
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
    font: 600 clamp(8px, calc(var(--u) * .27), 13px)/1 var(--bn-font); white-space: nowrap; letter-spacing: 0;
    user-select: none; -webkit-user-select: none;
    transition: background-color .12s, color .12s, transform .06s;
}
.kb-k .bi { font-size: 1.2em; line-height: 1; }
/* 한 번이라도 눌린 키: 강조색을 옅게. 지금 눌린 키: 강조색으로 채우고 살짝 눌린 모양. */
/* 강조색을 키 바탕(--bn-cell) 위에 겹친다 — 반투명만 쓰면 무대 바탕이 비쳐 기본 키보다 어두워 보인다. */
.kb-k.is-done { background: linear-gradient(var(--kb-done), var(--kb-done)), var(--bn-cell, #2f2f2f); color: var(--site-text, #f0f0f0); }
.kb-k.is-down { background: var(--bn-gpu); color: #111; transform: translateY(1px); box-shadow: none; }
/* 채터링 의심: 경고색 테두리 + 오른쪽 위 횟수. */
.kb-k.is-chat { box-shadow: inset 0 0 0 2px var(--bn-warn); }
.kb-k.is-chat::after {
    content: attr(data-n); position: absolute; top: 3px; right: 4px;
    font: 700 max(7px, .72em)/1 var(--bn-mono); color: var(--bn-warn);
}
.kb-k.is-down.is-chat::after { color: #111; }

/* ── 범례 ─────────────────────────────────────────────────────── */
.kb-legend { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .8125rem; color: var(--site-text-3, #949494); }
.kb-legend li { display: inline-flex; align-items: center; gap: 8px; }
.kb-sw { width: 14px; height: 14px; border-radius: 4px; background: var(--bn-cell, #2f2f2f); }
.kb-sw--done { background: linear-gradient(var(--kb-done), var(--kb-done)), var(--bn-cell, #2f2f2f); }
.kb-sw--down { background: var(--bn-gpu); }
.kb-sw--chat { box-shadow: inset 0 0 0 2px var(--bn-warn); }

/* ── 배열 밖 키(한/영 별도 키·일본어 자판 키·멀티미디어 키 등) ─────────── */
.kb-extra { display: none; margin-top: 16px; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.kb[data-extra] .kb-extra { display: flex; }
.kb-extra-label { font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.kb-extra-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-extra-list li {
    padding: 5px 9px; border-radius: 8px; background: linear-gradient(var(--kb-done), var(--kb-done)), var(--bn-cell, #2f2f2f);
    font: 600 .8125rem/1.2 var(--bn-mono); color: var(--site-text, #f0f0f0);
}
.kb-extra-list li.is-down { background: var(--bn-gpu); color: #111; }

/* ── 채터링 의심 상자 ─────────────────────────────────────────── */
.kb-chatbox {
    display: none; margin-top: 18px; padding: 18px 20px; border-radius: 16px;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--bn-warn);
}
.kb[data-chat] .kb-chatbox { display: block; }
.kb-chatbox h3 { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 700; }
.kb-chatbox h3 .bi { color: var(--bn-warn); }
.kb-chatbox > p { margin-top: 6px !important; color: var(--site-text-2, #b0b0b0); max-width: 46em; }
.kb-chat-list { margin-top: 12px !important; display: grid; gap: 6px; }
.kb-chat-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: .9375rem; color: var(--site-text-2, #b0b0b0); }
.kb-chat-key { min-width: 2.2em; font-weight: 700; color: var(--site-text, #f0f0f0); }
.kb-chat-key:empty { display: none; }
.kb-chat-code { font-size: .8125rem; color: var(--site-text-3, #949494); }
.kb-chat-n { font-weight: 700; color: var(--bn-warn); }
.kb-chatbox a { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--site-text, #f0f0f0); font-weight: 600; text-underline-offset: 3px; }

/* ── 설명: 점검 순서 ───────────────────────────────────────────── */
.kb-steps { margin-top: 18px !important; display: grid; gap: 10px; counter-reset: kb; }
.kb-steps li {
    counter-increment: kb; position: relative; display: grid; gap: 4px;
    padding: 14px 16px 14px 52px; border-radius: 16px; background: var(--site-surface, #232323);
}
.kb-steps li::before {
    content: counter(kb); position: absolute; left: 16px; top: 14px; width: 24px; height: 24px; border-radius: 8px;
    display: grid; place-items: center; background: var(--site-bg-raise, #1e1e1e);
    font: 700 .8125rem/1 var(--bn-mono); color: var(--site-text, #f0f0f0);
}
.kb-steps strong { font-weight: 700; color: var(--site-text, #f0f0f0); }
.kb-steps span { font-size: .9375rem; line-height: 1.7; color: var(--site-text-2, #b0b0b0); }
#kb-fix { scroll-margin-top: calc(var(--site-hdr-h, 64px) + 16px); }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .kb-top { align-items: stretch; }
    .kb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .kb-reset { width: 100%; justify-content: center; }
    .kb-steps li { padding-left: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .kb-k, .kb-reset { transition: none !important; }
}

/* SEO 보강(2026-11-08): 문장 속 도구 링크(로케일 값의 <a class="tl-in">)와 h3 로 내린 광고 안내 제목.
   tools-measure.css 의 같은 규칙과 값이 같다(이 페이지는 그 파일을 불러오지 않는다). */
.tl-in { color: var(--site-text, #f0f0f0); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.tl-in:hover { color: var(--site-accent, #7aa5f2); }
.sv-cta h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 750; letter-spacing: -.02em; }
.bn-not a { color: var(--site-text, #f0f0f0); text-decoration: underline; text-underline-offset: 3px; }