/* 반응속도 테스트(/tools/reaction-time/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css · tools-measure.css 다음에 링크된다 — 토큰(--site-*, --bn-*)과
 * .mt-stage · .mt-read · .mt-big · .mt-stats · .mt-again 을 그대로 쓴다.
 * 어떤 문구를 보일지는 루트 .rt 의 data-state(왼쪽 칸) · data-phase(오른쪽 패널) · data-* 플래그로 고른다(tools-reaction.js 가 바꾼다).
 * 모서리: 무대 20px · 칸 10px(주사율·폴링레이트 테스트와 같은 단계).
 * ⚠ 누르는 칸(.rt-pad)에는 배경 전환(transition)을 두지 않는다 — 색이 서서히 바뀌면 화면에 나온 시각보다 늦게 보여 기록이 틀어진다.
 * ⚠ 밝은 색(초록)은 go 상태에만 쓴다. 부정 출발·결과 화면은 어두운 칸 그대로 글자·테두리만 바꾼다(광과민성).
 */
/* 넓은 화면만 7:5. 860px 이하는 tools-measure.css 의 한 열 규칙을 그대로 따른다(같은 경계). */
@media (min-width: 861px) {
    .rt-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ── 누르는 칸 ─────────────────────────────────────────────────── */
.rt-pad {
    min-width: 0; min-height: clamp(300px, 36vw, 420px); padding: 28px 24px; border-radius: 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
    background:
        radial-gradient(circle at 50% 45%, rgba(122, 165, 242, .07), transparent 62%),
        var(--site-bg-raise, #1e1e1e);
    border: 1px dashed var(--site-line-2, rgba(255, 255, 255, .14));
    color: var(--site-text, #f0f0f0); font: inherit; cursor: pointer;
    transition: none;
    touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.rt-pad:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.rt-pad-icon { font-size: 2rem; line-height: 1; color: var(--site-text-2, #b0b0b0); }
.rt-pad-title {
    font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
}
.rt-pad-sub { max-width: 30em; min-height: 3.2em; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); }
.rt-pad-ms { display: inline-flex; align-items: baseline; gap: 6px; }
.rt-pad-ms output { font-family: var(--bn-mono); font-size: 1.6em; font-weight: 800; letter-spacing: -.035em; }
.rt-pad-unit { font-size: .6em; font-weight: 700; color: var(--site-text-2, #b0b0b0); }

/* 상태별 문구: 기본은 숨기고 지금 상태의 줄만. */
[data-pad] { display: none; }
.rt[data-state="idle"] [data-pad~="idle"],
.rt[data-state="wait"] [data-pad~="wait"],
.rt[data-state="go"] [data-pad~="go"],
.rt[data-state="early"] [data-pad~="early"],
.rt[data-state="fast"] [data-pad~="fast"],
.rt[data-state="late"] [data-pad~="late"],
.rt[data-state="hidden"] [data-pad~="hidden"],
.rt[data-state="shown"] [data-pad~="shown"],
.rt[data-state="done"] [data-pad~="done"] { display: inline; }
.rt[data-state="shown"] .rt-pad-ms,
.rt[data-state="done"] .rt-pad-ms { display: inline-flex; }

.rt[data-state="wait"] .rt-pad { border-style: solid; background: var(--site-bg-raise, #1e1e1e); }
.rt[data-state="wait"] .rt-pad-icon { color: var(--site-text-3, #949494); }
/* 신호: 칸 전체가 한 번에 초록으로. 글자는 어두운 색(대비 4.5:1 이상). */
.rt[data-state="go"] .rt-pad { background: var(--site-success, #2ecc71); border: 1px solid var(--site-success, #2ecc71); color: #111; }
.rt[data-state="go"] .rt-pad-icon,
.rt[data-state="go"] .rt-pad-sub { color: #111; }
.rt[data-state="early"] .rt-pad,
.rt[data-state="fast"] .rt-pad,
.rt[data-state="late"] .rt-pad,
.rt[data-state="hidden"] .rt-pad { border: 1px solid var(--bn-warn); background: var(--site-bg-raise, #1e1e1e); }
.rt[data-state="early"] .rt-pad-title,
.rt[data-state="fast"] .rt-pad-title,
.rt[data-state="late"] .rt-pad-title,
.rt[data-state="hidden"] .rt-pad-title,
.rt[data-state="early"] .rt-pad-icon,
.rt[data-state="fast"] .rt-pad-icon,
.rt[data-state="late"] .rt-pad-icon,
.rt[data-state="hidden"] .rt-pad-icon { color: var(--bn-warn); }
.rt[data-state="shown"] .rt-pad,
.rt[data-state="done"] .rt-pad { border-style: solid; }
.rt[data-state="shown"] .rt-pad-icon,
.rt[data-state="done"] .rt-pad-icon { display: none; }
.rt[data-state="done"] .rt-pad-ms output { color: var(--bn-gpu); }

/* ── 오른쪽 패널 ───────────────────────────────────────────────── */
.rt[data-phase="running"] [data-for="running"],
.rt[data-phase="done"][data-cmp="faster"] [data-for="faster"],
.rt[data-phase="done"][data-cmp="slower"] [data-for="slower"],
.rt[data-phase="done"][data-spread] [data-for="spread"] { display: block; }
.rt[data-phase="running"]:not([data-state="idle"]) [data-for="idle"] { display: none; }

.rt-stats { margin-top: 22px; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rt-trials { margin-top: 18px !important; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rt-trials li {
    display: grid; gap: 2px; padding: 8px 4px; border-radius: 10px; text-align: center;
    border: 1px solid var(--site-line, rgba(255, 255, 255, .08));
}
.rt-trial-n { font-size: .75rem; font-weight: 600; color: var(--site-text-3, #949494); }
.rt-trial-v { font-size: .9375rem; font-weight: 700; color: var(--site-text-3, #949494); }
.rt-trials li.is-done .rt-trial-v { color: var(--site-text, #f0f0f0); }
.rt-trials li.is-best { border-color: var(--bn-gpu); }
.rt-trials li.is-best .rt-trial-v { color: var(--bn-gpu); }

/* 설명·FAQ 안의 출처·도구 링크: 기본 링크색(진한 파랑)은 어두운 면에서 읽히지 않는다. */
.rt .bn-doc p a:not(.bn-go),
.rt .bn-doc li a { color: var(--site-accent, #7aa5f2); text-decoration: underline; text-underline-offset: 3px; }
.rt .bn-doc p a:not(.bn-go):hover,
.rt .bn-doc li a:hover { color: var(--site-text, #f0f0f0); }
.rt .bn-doc a:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 4px; }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 420px) {
    .rt-pad { min-height: 280px; padding: 24px 16px; }
    .rt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rt-stats > div:last-child { grid-column: 1 / -1; }
}

/* ── 나이대별 평균(Woods 2015 Table 2) · 내 나이대와 비교 ─────────────────
 * 표는 tools-sensitivity.css 의 .sv-table(고른 행 .is-active). 나이대 선택은 JS 가 있을 때만(mt-js). */
.rt .rt-age-pick { display: none; max-width: 280px; margin-top: 18px; }
html.mt-js .rt .rt-age-pick { display: block; }
.rt-age-pick.has-combo::after { content: none; }
.rt-age-pick::after {
    content: ""; position: absolute; right: 16px; top: 29px; width: 7px; height: 7px; margin-top: -2px;
    border-right: 2px solid var(--site-text-2, #b0b0b0); border-bottom: 2px solid var(--site-text-2, #b0b0b0);
    transform: translateY(-50%) rotate(45deg); pointer-events: none;
}
.rt-age-table td { font-size: .9375rem; }
.rt .bn-doc-sec .rt-age-src { font-size: .8125rem; color: var(--site-text-3, #949494); }
.rt .rt-age-read { margin-top: 14px; font-size: .875rem; color: var(--site-text-2, #b0b0b0); }
.rt .rt-age-read[hidden], .rt .rt-age-read [hidden] { display: none; }
.rt .rt-age-read #rt-age-diff { font-weight: 700; color: var(--site-text, #f0f0f0); }