/* 반응속도 테스트 전용 CSS (2026-10-21). 무대(설정 줄 + 반응판 + 회차 구슬)·결과(중앙값 | 반응 눈금 + 지난 세트) rt-*. 공용 부품은 assets/v2.css
   반응판은 두 테마 모두 같은 고정색이다: 대기(어두운 빨강, 상대 밝기 0.03) → 신호(밝은 초록, 0.47)로 밝기가 크게 바뀌고, 문구와 모양(빈 원 → 꽉 찬 네모)도 함께 바뀐다(색만으로 구별하지 않음).
   글자 대비(실측 계산): 대기 10.4:1·신호 8.6:1·너무 일찍 7.9:1·기본 15:1. 신호 전환에는 전환 효과를 넣지 않는다(바뀌는 순간이 늦어지지 않게). */
.rtt{container:rtw / inline-size}
.rt-stage{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px 18px 18px;border-bottom:1px solid var(--soft)}
.rt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.rt-set{display:flex;align-items:center;gap:8px}
.rt-set .v2-label{margin:0}
.rt-env{display:flex;flex-wrap:wrap;gap:2px 12px;margin:0;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rt-btns{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.rt-pad{--pad:#1b150f;--pad-ink:#f4e8d0;--pad-mut:#b3a283;--pad-line:rgba(244,232,208,.2);position:relative;display:flex;flex-direction:column;min-height:300px;padding:12px 14px 14px;background:var(--pad);color:var(--pad-ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rt-pad:focus{outline:none}
.rt-pad:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rt-pad[data-ph="wait"]{--pad:#5a140c;--pad-ink:#ffd9cf;--pad-mut:#e9a493;--pad-line:rgba(255,217,207,.24)}
.rt-pad[data-ph="go"]{--pad:#3fd06c;--pad-ink:#06210f;--pad-mut:#0d3a1b;--pad-line:rgba(6,33,15,.26)}
.rt-pad[data-ph="early"]{--pad:#e3a23a;--pad-ink:#2a1700;--pad-mut:#5a3a08;--pad-line:rgba(42,23,0,.26)}
.rt-top{display:flex;justify-content:space-between;gap:8px;min-height:18px;margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--pad-mut);font-variant-numeric:tabular-nums}
.rt-msg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 6px 16px;text-align:center}
.rt-msg::before{content:none}
.rt-pad[data-ph="wait"] .rt-msg::before{content:"";width:38px;height:38px;box-sizing:border-box;border:4px solid currentColor;border-radius:50%;opacity:.85}
.rt-pad[data-ph="go"] .rt-msg::before{content:"";width:46px;height:46px;background:currentColor;border-radius:4px}
.rt-pad[data-ph="early"] .rt-msg::before{content:"!";width:38px;height:38px;border-radius:50%;background:var(--pad-ink);color:var(--pad);font:800 26px/38px var(--sans)} /* 원 = 글자색, ! = 반응판색(검토 R1: currentColor 가 반응판색이 되어 안 보였음) */
.rt-h{display:block;font-family:var(--sans);font-size:clamp(26px,5.2cqi,40px);font-weight:800;line-height:1.15;letter-spacing:-.01em}
.rt-h.is-big{font-size:clamp(44px,10.5cqi,84px);font-variant-numeric:tabular-nums lining-nums}
.rt-s{display:block;max-width:34em;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--pad-mut)}
.rt-beads{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.rt-beads li{flex:1 1 0;min-width:0;height:26px;display:grid;place-items:center;border:1px solid var(--pad-line);border-radius:13px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--pad-ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.rt-beads li.is-now{border-color:var(--pad-mut);box-shadow:inset 0 0 0 1px var(--pad-mut)}
.rt-beads li.is-done{background:var(--pad-line);border-color:transparent}
.rt-beads li.is-in{animation:rt-bead .3s ease-out}
@keyframes rt-bead{from{transform:scale(.6);opacity:.2}}
.rt-help{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.rt-live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 전체 화면(R46): 무대만 크게. API 가 없으면 화면을 덮는 고정 보기 */
.rt-stage:fullscreen{padding:16px clamp(16px,4vw,48px) 24px;background:var(--paper);overflow:auto}
.rt-stage:-webkit-full-screen{padding:16px clamp(16px,4vw,48px) 24px;background:var(--paper);overflow:auto}
.rt-stage.is-full{position:fixed;inset:0;z-index:1000;padding:16px clamp(16px,4vw,48px) 24px;background:var(--paper);overflow:auto}
.rt-stage:fullscreen .rt-pad,.rt-stage.is-full .rt-pad{flex:1;min-height:0}
.rt-stage:-webkit-full-screen .rt-pad{flex:1;min-height:0}
html.rt-lock{overflow:hidden}

/* 결과 */
.rt-res{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.rt-box{min-width:0;padding:16px 18px 18px}
.rt-hero{border-right:1px solid var(--soft)}
.rt-side{display:flex;flex-direction:column;min-width:0}
.rt-side .rt-box+.rt-box{flex:1;border-top:1px solid var(--soft)}
.rt-tag{margin:0 0 8px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.rt-tag.is-ex,.rt-tag.is-shared{color:var(--accent)}
.rt-hero .v2-big{margin:4px 0 8px}
.rt-hero .v2-sub{margin:0 0 12px}
.rt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:14px}
.rt-bhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 6px}
.rt-bhead .v2-label{margin:0}
.rt-legend{display:flex;flex-wrap:wrap;gap:2px 10px;margin-left:auto;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.rt-legend .lg::before{content:"";display:inline-block;margin-right:4px;vertical-align:-1px}
.rt-legend .lg-dot::before{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.rt-legend .lg-med::before{width:2px;height:11px;background:var(--accent)}
.rt-legend .lg-best::before{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--muted)}
.rt-legend .lg-shared::before{width:7px;height:7px;background:var(--ink);transform:rotate(45deg)}
.rt-scale{min-height:140px}
.rt-scale svg{display:block;width:100%;height:auto;overflow:visible}
.rt-axis{stroke:var(--line);stroke-width:1}
.rt-tick{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.rt-hatch{stroke:var(--soft);stroke-width:2}
.rt-lapse{fill:var(--accent-wash)}
.rt-ref{stroke:var(--muted);stroke-width:1}
.rt-lead{stroke:var(--soft);stroke-width:1;stroke-dasharray:2 2}
.rt-reflab{font-family:var(--sans);font-size:11px;fill:var(--muted)}
.rt-medline{stroke:var(--accent);stroke-width:2}
.rt-medlab{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--accent);font-variant-numeric:tabular-nums}
.rt-med.is-move{transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.rt-dot{fill:var(--ink)}
.rt-dot.is-ex{fill:var(--card);stroke:var(--muted);stroke-width:1.5}
.rt-dot.is-new{transform-box:fill-box;transform-origin:center;animation:rt-drop .32s ease-out}
@keyframes rt-drop{from{transform:translateY(-16px);opacity:.15}}
.rt-best{fill:var(--muted)}
.rt-shared{fill:var(--ink)}
.rt-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.rt-hc{font-family:var(--sans);font-size:12px;color:var(--muted)}
.rt-hb{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rt-bhead .rt-clr{margin-left:auto;height:28px;padding:0 10px;font-size:12px}
.rt-hist{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 10px;margin:0;padding:0;list-style:none}
.rt-hist li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;min-height:27px;font-family:var(--sans);font-size:12.5px;font-variant-numeric:tabular-nums}
.rt-hist li+li{border-top:1px solid var(--soft)}
.rt-hist span{color:var(--muted);white-space:nowrap}
.rt-hist em{font-style:normal;font-weight:700;color:var(--accent)}
.rt-hist i{display:block;height:8px;background:var(--soft);border-radius:1px;overflow:hidden}
.rt-hist s{display:block;height:100%;background:var(--ink);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.rt-hist li.is-best s{background:var(--accent)}
.rt-hist b{font-weight:700;color:var(--ink);white-space:nowrap}

@container rtw (max-width:640px){
  .rt-res{grid-template-columns:minmax(0,1fr)}
  .rt-hero{border-right:0;border-bottom:1px solid var(--soft)}
  .rt-pad{min-height:260px}
  .rt-btns{margin-left:0}
}
@container rtw (max-width:420px){
  .rt-stage{padding:12px 12px 14px}
  .rt-box{padding:14px 12px 16px}
  .rt-beads{gap:4px}
  .rt-beads li{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .rt-med.is-move,.rt-hist s{transition:none}
  .rt-dot.is-new,.rt-beads li.is-in{animation:none}
}
.rt-hist.is-ex s,.rt-hist.is-ex li.is-best s{background:var(--line)}
.rt-hist.is-ex b,.rt-hist.is-ex em{color:var(--muted)}