/* 마우스 테스트(/tools/mouse-test/) · CPS 테스트(/tools/cps-test/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css · tools-measure.css 다음에 링크된다 — 토큰(--site-*, --bn-*)과
 * .bn·.bn-doc·.gs-cta·.sv-links·.mt-label·.mt-stats·.mt-again·.mt-steps·.mt-pad-meter 를 그대로 쓴다.
 * 구조: 제목 → (CPS: 시간·버튼 고르기) → 검사 무대(테스트 칸 | 읽은 값) → 설명.
 * 어떤 문구를 보일지는 루트 .ms 의 data-state · data-* 플래그로 고른다(tools-mouse.js 가 바꾼다).
 * 모서리: 무대 20px · 칸 16px · 칩·버튼 10px(다른 측정 도구와 같은 단계).
 * ⚠ prefers-reduced-motion 은 CSS 전환만 끈다. 검사 자체는 막지 않는다.
 */

/* ── 검사 무대 ─────────────────────────────────────────────────── */
.ms-stage {
    margin-top: 28px;
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 16px; align-items: stretch;
}
.ms-read {
    min-width: 0; padding: clamp(22px, 3vw, 30px); border-radius: 20px;
    background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    display: flex; flex-direction: column; align-items: flex-start;
}
.ms-big {
    margin-top: 6px !important; display: flex; align-items: baseline; gap: 8px;
    font-size: clamp(3.25rem, 2.2rem + 4vw, 5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1;
    color: var(--site-text-3, #949494); white-space: nowrap;
}
.ms-big output, .ms-big > .bn-mono { font-family: var(--bn-mono); font-weight: 800; }
.ms-live { width: 100%; }
.ms[data-state="active"] .ms-big, .ms[data-state="done"] .ms-big, .ms[data-state="running"] .ms-big { color: var(--bn-gpu); }
.ms[data-chatter] .ms-big { color: var(--bn-warn); }

/* 상태 문구: 기본은 숨기고 상태에 맞는 줄만. */
.ms-msg { display: none; margin-top: 14px !important; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); max-width: 36em; }
.ms-msg--warn { color: var(--bn-warn); }
.ms-noscript { display: block; }
.ms[data-state="idle"] [data-for="idle"],
.ms[data-state="active"]:not([data-chatter]) [data-for="active"],
.ms[data-chatter] [data-for="chatter"],
.ms[data-touch] [data-for="touch"],
.ms[data-state="running"] [data-for="running"],
.ms[data-state="done"] [data-for="done"] { display: block; }

/* ── 테스트 칸 ─────────────────────────────────────────────────── */
.ms-pad {
    position: relative; min-height: clamp(320px, 34vw, 400px); border-radius: 20px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px 20px;
    background:
        radial-gradient(circle at 50% 42%, rgba(122, 165, 242, .07), transparent 62%),
        var(--site-bg-raise, #1e1e1e);
    border: 1px dashed var(--site-line-2, rgba(255, 255, 255, .14));
    cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
}
.ms-pad:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.ms-pad-hint {
    display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 300px;
    text-align: center; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--site-text-2, #b0b0b0);
}
.ms-pad-hint .bi { font-size: 1.75rem; color: var(--site-text, #f0f0f0); }

/* 마우스 그림: 버튼 위치를 보여 주는 기능 요소(눌린 버튼이 켜진다). 실제 입력은 칸 전체에서 받는다. */
.ms-mouse { position: relative; width: clamp(150px, 15vw, 180px); aspect-ratio: 5 / 8; }
.ms-body {
    position: absolute; inset: 0; overflow: hidden;
    border-radius: 50% 50% 46% 46% / 32% 32% 38% 38%;
    background: var(--site-surface-2, #2a2a2a); border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ms-key {
    position: absolute; top: 0; height: 44%; width: 50%;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px;
    font-size: .75rem; font-weight: 700; color: var(--site-text-3, #949494);
    transition: background-color .12s, color .12s;
}
.ms-key--left { left: 0; border-right: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); padding-right: 14px; }
.ms-key--right { right: 0; padding-left: 14px; }
.ms-mouse::after {   /* 버튼과 몸통의 경계선 */
    content: ""; position: absolute; left: 6%; right: 6%; top: 44%; height: 1px; background: var(--site-line-2, rgba(255, 255, 255, .14));
}
.ms-wheel {
    position: absolute; left: 50%; top: 11%; width: 22px; height: 54px; margin-left: -11px; border-radius: 11px; overflow: hidden;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
    display: grid; grid-template-rows: 1fr 1fr; z-index: 1;
    transition: background-color .12s, border-color .12s;
}
.ms-wheel i { display: block; transition: background-color .35s; }
.ms-wheel i.is-on { animation: ms-wheel-flash .35s ease-out; }
@keyframes ms-wheel-flash { from { background: var(--bn-gpu); } to { background: transparent; } }
.ms-side {
    position: absolute; left: -9px; width: 9px; height: 15%; border-radius: 6px 0 0 6px;
    background: var(--site-surface-2, #2a2a2a); border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); border-right: 0;
    transition: background-color .12s;
}
.ms-side--forward { top: 46%; }
.ms-side--back { top: 63%; }
.ms-mouse .is-down { background: var(--bn-gpu); color: #111; border-color: var(--bn-gpu); }
.ms-mouse .is-chatter { animation: ms-chatter-flash .6s ease-out; }
@keyframes ms-chatter-flash { from { background: var(--bn-warn); color: #111; } }

/* ── 읽은 값: 버튼별 표 ─────────────────────────────────────────── */
.ms-table { margin-top: 20px; width: 100%; border-collapse: collapse; font-size: .875rem; }
.ms-table th, .ms-table td { padding: 8px 6px; text-align: right; white-space: nowrap; }
.ms-table th:first-child { text-align: left; padding-left: 0; }
.ms-table td:last-child, .ms-table th:last-child { padding-right: 0; }
.ms-table thead th { font-size: .75rem; font-weight: 500; color: var(--site-text-3, #949494); white-space: normal; vertical-align: bottom; }
.ms-table tbody th { font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.ms-table tbody td { font-weight: 700; color: var(--site-text, #f0f0f0); }
.ms-table tbody tr + tr { border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.ms-table tr.is-chatter td[data-v="chatter"], .ms-table tr.is-chatter th { color: var(--bn-warn); }
.ms-wheel-stats { margin-top: 16px !important; width: 100%; }
.ms-note { margin-top: 16px !important; font-size: .8125rem; line-height: 1.6; color: var(--site-text-3, #949494); }
.ms-side-note { margin-top: 12px !important; display: flex; gap: 8px; font-size: .8125rem; line-height: 1.6; color: var(--site-text-3, #949494); }
.ms-side-note .bi { flex: none; margin-top: 2px; }

/* ── CPS: 시간·버튼 고르기 ─────────────────────────────────────── */
.ms-opts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.ms-opt { margin: 0; padding: 0; border: 0; min-width: 0; }
.ms-opt legend { padding: 0; margin-bottom: 8px; font-size: .8125rem; font-weight: 600; color: var(--site-text-3, #949494); }
.ms-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chip { position: relative; display: inline-flex; cursor: pointer; }
.ms-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ms-chip > span {
    display: inline-flex; align-items: baseline; gap: 1px; min-height: 40px; padding: 10px 14px; border-radius: 10px;
    background: var(--site-surface-2, #2a2a2a); border: 1px solid transparent;
    font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--site-text-2, #b0b0b0);
    transition: background-color .15s, border-color .15s, color .15s;
}
.ms-chip:hover > span { background: var(--site-surface-3, #333); color: var(--site-text, #f0f0f0); }
.ms-chip input:checked + span { border-color: var(--site-accent, #7aa5f2); background: rgba(122, 165, 242, .1); color: var(--site-text, #f0f0f0); }
.ms-chip input:focus-visible + span { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.ms-chip:active > span { transform: translateY(1px); }

/* CPS 클릭 칸: 누른 수가 크게, 진행 막대가 아래에. */
.ms-stage--cps { margin-top: 16px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ms-pad--cps { gap: 6px; }
.ms-pad-count {
    font-size: clamp(3rem, 2rem + 4vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em;
    color: var(--site-text, #f0f0f0); display: none;
}
.ms:not([data-state="idle"]) .ms-pad--cps .ms-pad-count { display: block; }
.ms:not([data-state="idle"]) .ms-pad--cps .ms-pad-hint { display: none; }
.ms[data-state="done"] .ms-pad-count { color: var(--site-text-3, #949494); }
.ms-pad--cps:active { background-color: var(--site-bg, #1a1a1a); }
.ms-pad--cps .mt-pad-meter span { transform: scaleX(var(--ms-progress, 0)); }
/* 다시 하기 버튼: tools-measure.css 의 `html:not(.mt-js) .mt-again { visibility: hidden }` 은 이 페이지에 해당하지 않는다
 * (여기는 .ms-js). JS 가 없을 때만 숨긴다. */
html.ms-js .ms .mt-again { visibility: visible; }
html:not(.ms-js) .ms .mt-again { visibility: hidden; }
.ms-read > .mt-stats { margin-top: 20px; width: 100%; }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .ms-stage, .ms-stage--cps { grid-template-columns: minmax(0, 1fr); }
    .ms-pad { min-height: 300px; }
    .ms-pad--cps { min-height: 240px; }
}
@media (max-width: 420px) {
    .ms-table { font-size: .8125rem; }
    .ms-table th, .ms-table td { padding: 8px 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-key, .ms-side, .ms-wheel, .ms-wheel i, .ms-chip > span { transition: none !important; }
    .ms-wheel i.is-on, .ms-mouse .is-chatter { animation-duration: .01s; }
}

/* 도구 목록 카드 아이콘 색(tools-sensitivity.css 의 .tl-icon 규칙에 이어서). */
.tl-icon--mouse { background: var(--site-logo-sky, #00aaff); color: #111; }
.tl-icon--cps { background: var(--site-logo-blue, #2d5bff); }