/* 모니터 주사율 테스트(/tools/refresh-rate/) · 마우스 폴링레이트 테스트(/tools/polling-rate/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css 다음에 링크된다 — 토큰(--site-*, --bn-*)·.bn·.bn-doc·.gs-cta·.sv-links 를 그대로 쓴다.
 * 구조: 제목 → 측정 무대(읽은 값 | 측정 화면) → 낮게 나왔을 때 안내 → 설명.
 * 어떤 문구를 보일지는 루트 .mt 의 data-state · data-* 플래그로 고른다(tools-measure.js 가 바꾼다).
 * 모서리: 무대 20px · 칸 16px · 칩·버튼 10px(PC 부품 진단과 같은 단계).
 * ⚠ prefers-reduced-motion 은 CSS 전환만 끈다. 측정(막대 움직임 포함)은 막지 않는다.
 */
.page-mt { --mt-dot: var(--site-accent, #7aa5f2); }

/* ── 측정 무대 ─────────────────────────────────────────────────── */
.mt-stage {
    margin-top: 28px;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: stretch;
}
.mt-stage--poll { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mt-read, .mt-side {
    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);
}
.mt-read, .mt-live { display: flex; flex-direction: column; align-items: flex-start; }
.mt-live { align-self: stretch; }   /* 폴링레이트: 라이브 영역(결과·상태 문구만)을 감싸는 칸 */
.mt-label { font-size: .875rem; font-weight: 600; color: var(--site-text-2, #b0b0b0); }
.mt-big {
    margin-top: 6px !important; display: flex; align-items: baseline; gap: 6px;
    font-size: clamp(3.25rem, 2.2rem + 4vw, 5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1;
    color: var(--bn-gpu); white-space: nowrap;
}
.mt-big output { font-family: var(--bn-mono); font-weight: 800; }
.mt-unit { font-size: .38em; font-weight: 700; letter-spacing: 0; color: var(--site-text-2, #b0b0b0); }
.mt-approx { display: none; font-size: .34em; font-weight: 700; letter-spacing: 0; color: var(--site-text-2, #b0b0b0); }
.mt-plus { display: none; font-family: var(--bn-mono); }
.mt[data-state="done"]:not([data-match]) .mt-approx { display: inline; }
.mt[data-state="done"][data-above] .mt-plus { display: inline; }
.mt:not([data-state="done"]) .mt-big { color: var(--site-text-3, #949494); }

/* 상태 문구: 기본은 숨기고 상태에 맞는 줄만. */
.mt-msg { display: none; margin-top: 14px !important; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); max-width: 34em; }
.mt-msg--warn { color: var(--bn-warn); }
.mt-noscript { display: block; }
.mt[data-state="idle"] [data-for="idle"],
.mt[data-state="measuring"] [data-for="measuring"],
.mt[data-state="failed"] [data-for="failed"],
.mt[data-state="hidden"] [data-for="hidden"],
.mt[data-state="nosupport"] [data-for="nosupport"],
.mt[data-mt="hz"][data-state="done"][data-match] [data-for="done-match"],
.mt[data-mt="hz"][data-state="done"]:not([data-match]) [data-for="done-off"],
.mt[data-state="done"][data-slow] [data-for="slow"],
.mt[data-mt="poll"][data-state="done"]:not([data-below]):not([data-above]) [data-for="done"],
.mt[data-state="done"][data-below] [data-for="below"],
.mt[data-state="done"][data-above] [data-for="above"],
.mt[data-api="basic"] [data-for="basic"],
.mt[data-touch] [data-for="touch"],
.mt[data-hidden] [data-for="hidden"] { display: block; }

.mt-foot { margin-top: auto; padding-top: 22px; }
.mt-again {
    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;
}
.mt-again:hover { background: var(--site-surface-2, #2a2a2a); }
.mt-again:active { transform: translateY(1px) scale(.98); }
.mt-again:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
html:not(.mt-js) .mt-again { visibility: hidden; }
/* 측정 중에는 흐리게만(숨기지 않는다 — visibility:hidden 이면 키보드 초점이 BODY 로 빠지고 돌아오지 않는다). 클릭은 JS 가 무시한다. */
.mt-again[aria-disabled="true"] { opacity: .4; cursor: default; }
.mt-again[aria-disabled="true"]:hover { background: transparent; }
.mt-again[aria-disabled="true"]:active { transform: none; }

/* 주사율 측정 화면: 레인 위를 일정한 속도로 오가는 막대. 프레임이 많을수록 촘촘히(부드럽게) 그려진다.
 * 측정하는 동안만 움직이고, 매 프레임 화면이 실제로 바뀌게 해 브라우저가 갱신을 줄이지 않게 한다. */
.mt-side { display: grid; gap: 18px; align-content: start; }
.mt-lane {
    position: relative; height: 96px; border-radius: 16px; overflow: hidden;
    background:
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, .05) 39px 40px),
        var(--site-bg-raise, #1e1e1e);
}
.mt-ufo {
    position: absolute; left: 0; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 14px;
    background: var(--bn-gpu); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    will-change: transform;
}
.mt:not([data-state="measuring"]) .mt-ufo { opacity: .35; }
.mt-prog { height: 4px; border-radius: 2px; background: var(--site-bg-raise, #1e1e1e); overflow: hidden; }
.mt-prog span { display: block; height: 100%; background: var(--bn-gpu); transform: scaleX(0); transform-origin: left; }
.mt[data-state="done"] .mt-prog span { transform: scaleX(1) !important; }

.mt-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.mt-stage--poll .mt-stats { margin-top: 22px; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-stats dt { font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.mt-stats dd { margin: 4px 0 0; font-size: 1.25rem; font-weight: 700; color: var(--site-text, #f0f0f0); white-space: nowrap; }

.mt-chips-label { font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.mt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-side .mt-chips { margin-top: -10px !important; }
.mt-stage--poll .mt-chips { margin-top: 18px !important; }
.mt-chips li {
    display: inline-flex; align-items: baseline; gap: 1px; padding: 6px 10px; border-radius: 10px;
    border: 1px solid var(--site-line, rgba(255, 255, 255, .08));
    font-size: .8125rem; font-weight: 600; color: var(--site-text-3, #949494);
    transition: background-color .2s, color .2s, border-color .2s;
}
.mt-chips li.is-on { background: var(--bn-gpu); border-color: var(--bn-gpu); color: #111; }

/* 폴링레이트 측정 칸: 마우스를 움직이는 곳. 보고 하나 = 점 하나(캔버스). */
.mt-pad {
    position: relative; min-height: clamp(280px, 34vw, 380px); border-radius: 20px; overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, 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: crosshair; touch-action: none; user-select: none; -webkit-user-select: none;
}
.mt-pad:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.mt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mt-pad-hint {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(80%, 300px);
    text-align: center; font-weight: 600; color: var(--site-text-2, #b0b0b0); pointer-events: none;
    transition: opacity .25s;
}
.mt-pad-hint .bi { font-size: 1.75rem; color: var(--site-text, #f0f0f0); }
.mt:not([data-state="idle"]) .mt-pad-hint { opacity: 0; }
.mt-pad-meter { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.mt-pad-meter span { display: block; height: 100%; background: var(--bn-gpu); transform: scaleX(var(--mt-active, 0)); transform-origin: left; }
.mt[data-state="done"] .mt-pad-meter { opacity: 0; }

/* ── 낮게 나왔을 때(60Hz 등) ───────────────────────────────────── */
.mt-alert {
    display: none; margin-top: 16px; padding: 18px 20px; border-radius: 16px;
    grid-template-columns: auto minmax(0, 1fr); gap: 14px;
    background: var(--site-bg-raise, #1e1e1e); border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14));
}
.mt[data-state="done"][data-low] .mt-alert { display: grid; }
.mt-alert > .bi { font-size: 1.25rem; color: var(--bn-warn); margin-top: 1px; }
.mt-alert h2 { font-size: 1.0625rem; font-weight: 700; }
.mt-alert p { margin-top: 6px !important; color: var(--site-text-2, #b0b0b0); }
.mt-alert a { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--site-text, #f0f0f0); font-weight: 600; text-underline-offset: 3px; }

/* ── 설명: 점검 순서 ───────────────────────────────────────────── */
.mt-steps { margin-top: 18px !important; display: grid; gap: 10px; counter-reset: mt; }
.mt-steps li {
    counter-increment: mt; position: relative; display: grid; gap: 4px;
    padding: 14px 16px 14px 52px; border-radius: 16px; background: var(--site-surface, #232323);
}
.mt-steps li::before {
    content: counter(mt); 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);
}
.mt-steps strong { font-weight: 700; color: var(--site-text, #f0f0f0); }
.mt-steps span { font-size: .9375rem; line-height: 1.7; color: var(--site-text-2, #b0b0b0); }
#hz-check { scroll-margin-top: calc(var(--site-hdr-h, 64px) + 16px); }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .mt-stage, .mt-stage--poll { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .mt-stage--poll .mt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mt-steps li { padding-left: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .mt-again, .mt-chips li, .mt-pad-hint { transition: none !important; }
}

/* 도구 목록 카드 아이콘 색(tools-sensitivity.css 의 .tl-icon 규칙에 이어서). */
.tl-icon--hz { background: var(--site-accent, #7aa5f2); color: #111; }
.tl-icon--poll { background: var(--site-surface-3, #333); }
.tl-icon--reaction { background: var(--site-logo-sky, #00aaff); color: var(--site-bg, #1a1a1a); }
.tl-icon--pcspecs { background: var(--site-surface-3, #333); color: var(--site-logo-sky, #00aaff); }   /* 내 컴퓨터 사양 확인 — 반응속도(하늘색 면)와 구분 */

/* 주사율 테스트 SEO 보강(2026-11-08): FAQ 안 도구 링크. 출처 링크(.mt-src)는 화면에서 뺐다(오너 지시 2026-11-08). */
.mt-inline { color: var(--site-text, #f0f0f0); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.mt-inline { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
#hz-os { scroll-margin-top: calc(var(--site-hdr-h, 64px) + 16px); }

/* 입력 장치 도구 SEO 보강(2026-11-08): 문장 속 도구 링크(로케일 값의 <a class="tl-in">)와 h3 로 내린 광고 안내 제목.
   h3 는 .sv-cta h2(tools-sensitivity.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; }

/* ── 내 최고 기록(로그인 사용자만, 2026-11-08 — 반응속도·CPS 공용) ─────────────────────────────
 * 결과 칸 안의 작은 면. 새 기록이면 테두리·배지만 브랜드 파랑으로(움직임 없음). */
.my-best {
    margin-top: 16px; padding: 14px 16px; border-radius: 12px;
    background: var(--site-surface-2, #2a2a2a); border: 1px solid var(--site-line, rgba(255, 255, 255, .08));
    transition: border-color .2s;
}
.my-best.is-new { border-color: var(--site-accent, #7aa5f2); }
.my-best-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .875rem; font-weight: 700; color: var(--site-text, #f0f0f0); }
.my-best-h .bi { color: var(--site-warning, #f39c12); }
.my-best-new {
    margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700;
    background: var(--site-accent, #7aa5f2); color: var(--site-bg, #181818);
}
.my-best-new[hidden] { display: none; }
.my-best-stats { margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.my-best-stats dt { font-size: .8125rem; font-weight: 500; color: var(--site-text-3, #949494); }
.my-best-stats dd { margin: 4px 0 0; font-size: 1.125rem; font-weight: 700; color: var(--site-text, #f0f0f0); white-space: nowrap; }
.my-best-note { margin: 8px 0 0; font-size: .8125rem; color: var(--site-text-3, #949494); }
@media (prefers-reduced-motion: reduce) { .my-best { transition: none; } }