/* 모니터 주사율 테스트(refresh-rate-test) — 계측 패널. 작업면 컨테이너 rrtw: 어두운 패널(상태 · 큰 Hz | 지표 3 · 간격 테이프 · 움직임 트랙 · 트랙 조절) → 판정 줄 → 카메라 칸 → 화면 정보.
   패널은 사이트 테마와 따로 정한 고정 색(라이트에서도 어두움). 강조색은 패널 안(지금 측정 점 · 놓친 프레임 막대 · 최대 fps 줄)에만 쓴다.
   640 이하: 지표 3칸을 큰 숫자 아래로, 판정 줄 한 열(선택 위 · 문장 아래) / 560 이하: 카메라 칸 위아래 / 420 이하: 큰 숫자 · 줄 이름 칸 줄임. */
.rrt{container:rrtw / inline-size;--rrt-bg:#1a1208;--rrt-fg:#f7ead1;--rrt-dim:rgba(247,234,209,.74);--rrt-mut:rgba(247,234,209,.5);--rrt-ln:rgba(247,234,209,.2);--rrt-acc:#ea7a40;--rrt-tone:color-mix(in srgb, var(--wash) 70%, var(--paper))}
:root[data-theme="dark"] .rrt{--rrt-bg:#110b06}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .rrt{--rrt-bg:#110b06} }
.rrt [hidden]{display:none !important}
.rrt p{margin:0}

/* ---------- 패널 ---------- */
.rrt-scope{display:grid;gap:12px;padding:12px 16px 16px;background:var(--rrt-bg);color:var(--rrt-fg);border-radius:var(--radius) var(--radius) 0 0}
.rrt-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.rrt-chip{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--rrt-dim)}
.rrt-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrt-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--rrt-mut)}
.rrt[data-st="run"] .rrt-dot{background:var(--rrt-acc)}
.rrt[data-st="wait"] .rrt-dot{animation:rrt-blink 1s ease-in-out infinite}
@keyframes rrt-blink{50%{opacity:.15}}
.rrt-full{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px 0 10px;border:1px solid var(--rrt-ln);border-radius:var(--radius);background:transparent;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--rrt-fg);cursor:pointer;transition:background var(--ease)}
.rrt-full:hover{background:rgba(247,234,209,.1)}
.rrt-full:focus-visible,.rrt-scope :focus-visible{outline:2px solid var(--rrt-acc);outline-offset:2px}
.rrt-full .i{width:15px;height:15px}
.rrt-full kbd{padding:1px 5px 0;border:1px solid var(--rrt-ln);border-radius:var(--radius);font-family:var(--mono);font-size:10.5px;line-height:1.3;color:var(--rrt-dim)}

.rrt-read{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px 18px;align-items:end}
.rrt-hz{display:flex;align-items:baseline;gap:8px;font-family:var(--sans);line-height:1}
.rrt-hz b{font-size:72px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}
.rrt-hz span{font-size:22px;font-weight:700;color:var(--rrt-dim)}
.rrt[data-st="wait"] .rrt-hz b{color:var(--rrt-mut)}
.rrt-sub{min-height:1.45em;margin-top:8px;font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.45;color:var(--rrt-dim);font-variant-numeric:tabular-nums}
.rrt-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.rrt-st div{min-width:0;padding:2px 0 2px 12px;border-left:1px solid var(--rrt-ln)}
.rrt-st dt{font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.3;color:var(--rrt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrt-st dd{margin:5px 0 3px;font-family:var(--sans);font-size:26px;font-weight:750;line-height:1.05;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rrt-st small{display:block;font-family:var(--sans);font-size:11px;line-height:1.3;color:var(--rrt-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrt[data-miss]:not([data-miss=""]):not([data-miss="0"]) #rrtMiss{color:var(--rrt-acc)}

.rrt-tph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--rrt-dim)}
.rrt-tph > span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrt-leg{flex:none;display:inline-flex;align-items:center;gap:5px}
.rrt-leg i{display:inline-block;width:8px;height:8px;border-radius:1px;background:var(--rrt-mut)}
.rrt-leg i.ms{margin-left:8px;background:var(--rrt-acc)}
.rrt-tbox{position:relative;height:64px;border-bottom:1px solid var(--rrt-ln)}
.rrt-tbox canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.rrt-y{position:absolute;left:0;padding:0 5px 0 0;background:var(--rrt-bg);font-family:var(--mono);font-size:10.5px;font-style:normal;line-height:1.2;color:var(--rrt-dim);transform:translateY(-50%);font-variant-numeric:tabular-nums}
.rrt-y1{top:66.667%}
.rrt-y2{top:33.333%}
.rrt-y:empty{display:none}

/* 움직임 트랙: 줄 이름 칸 | 그림(3줄). 그림 바탕은 '바탕' 선택값(tool.js BG) */
.rrt-stage{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:198px;border:1px solid var(--rrt-ln);border-radius:var(--radius);overflow:hidden}
.rrt-lab{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border-right:1px solid var(--rrt-ln)}
.rrt-lab li{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;padding:0 10px;border-top:1px solid var(--rrt-ln)}
.rrt-lab li:first-child{border-top:0}
.rrt-lab em,.rrt-lab b,.rrt-lab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrt-lab em{font-family:var(--sans);font-size:10.5px;font-style:normal;font-weight:600;line-height:1.3;color:var(--rrt-mut)}
.rrt-lab b{font-family:var(--sans);font-size:16px;font-weight:750;line-height:1.25;font-variant-numeric:tabular-nums}
.rrt-lab li:first-child b{color:var(--rrt-acc)}
.rrt-lab span{font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.35;color:var(--rrt-dim);font-variant-numeric:tabular-nums}
.rrt-stage canvas{display:block;width:100%;height:100%;min-width:0;min-height:0}

/* 트랙 조절(패널 안, 트랙 바로 아래): 속도 · 바탕 · 움직이기/멈추기 한 줄(좁으면 줄바꿈) + 안내 */
.rrt-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:-2px}
.rrt-cr{display:flex;align-items:center;gap:8px;min-width:0}
.rrt-cl{flex:none;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--rrt-dim);white-space:nowrap}
.rrt-ctl .v2-seg{flex-wrap:nowrap;min-width:0}
.rrt-ctl .v2-seg button{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:0 9px;border-color:var(--rrt-ln);background:transparent;color:var(--rrt-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.rrt-ctl .v2-seg button:hover{background:rgba(247,234,209,.1);color:var(--rrt-fg)}
.rrt-ctl .v2-seg button[aria-pressed="true"]{background:var(--rrt-fg);border-color:var(--rrt-fg);color:var(--rrt-bg)}
.rrt-ctl .sw{flex:none;width:10px;height:10px;border:1px solid var(--rrt-mut);border-radius:50%}
.rrt-ctl .sw-dark{background:#0d0d0d}.rrt-ctl .sw-gray{background:#7f7f7f}.rrt-ctl .sw-light{background:#f2f2f2}
.rrt-play{height:30px;margin-left:auto;border-color:var(--rrt-ln);background:transparent;color:var(--rrt-fg)}
.rrt-play:hover{background:rgba(247,234,209,.1)}
.rrt-play .i{width:14px;height:14px}
.rrt-play[aria-pressed="true"] .i-play,.rrt-play[aria-pressed="false"] .i-stop{display:none} /* 움직이는 중이면 멈춤 모양 */
.rrt-hint,.rrt-rm{flex:1 0 100%;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--rrt-dim)}
.rrt-rm{color:var(--rrt-fg)}

/* ---------- 판정 줄: 설정한 주사율 | 판정 문장 ---------- */
.rrt-desk{border-bottom:1px solid var(--soft);background:var(--rrt-tone)}
.rrt-judge{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:end;gap:10px 18px;padding:14px 16px 16px}
.rrt-judge .v2-input select{flex:1 1 auto;width:100%;min-width:0;height:calc(var(--v2-ctl) - 2px);padding:0 8px 0 10px;border:0;background:none;outline:0;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.rrt-judge .v2-input select option{background:var(--paper);color:var(--ink)}
.rrt-vd{position:relative;min-height:42px;padding-left:26px;font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink);align-self:center}
.rrt-vd::before{content:"…";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--soft);font-size:11px;font-weight:800;line-height:18px;text-align:center;color:var(--ink)}
.rrt[data-v="ok"] .rrt-vd::before{content:"✓";background:var(--fill);color:var(--on-fill)}
.rrt[data-v="auto"] .rrt-vd::before{content:"i";font-style:italic}
.rrt:is([data-v="sixty"],[data-v="thirty"],[data-v="half"],[data-v="low"],[data-v="high"]) .rrt-vd::before{content:"!";background:var(--ink);color:var(--paper)}
.rrt-vd a{font-weight:650;color:var(--ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* ---------- 카메라로 프레임 건너뜀 ---------- */
.rrt-skip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;padding:16px;border-bottom:1px solid var(--soft)}
.rrt-cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;align-self:start;padding:8px;background:#000;border-radius:var(--radius)}
.rrt-cells i{position:relative;aspect-ratio:1;background:#262626}
.rrt-cells i.on{background:#fff}
.rrt-cells b{position:absolute;left:3px;top:2px;font-family:var(--mono);font-size:9.5px;font-weight:600;line-height:1;color:#8a8a8a}
.rrt-cells i.on b{color:#000}
.rrt-sk{display:flex;flex-direction:column;gap:9px;min-width:0}
.rrt-skt{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink)}
.rrt-ex{display:grid;gap:5px}
.rrt-ex p{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.rrt-run{flex:none;display:inline-flex;gap:2px;padding:3px;background:#000;border-radius:var(--radius)}
.rrt-run i{width:11px;height:11px;background:#262626}
.rrt-run i.on{background:#fff}
.rrt-skw{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.rrt-cam{align-self:flex-start;margin-top:auto}
.rrt-cam[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

/* ---------- 화면 정보 · 복사 ---------- */
.rrt-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 16px}
.rrt-scr{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.rrt-msg{flex:1 0 100%}
.rrt-msg:empty{display:none}
.rrt-nojs{padding:12px 16px;font-family:var(--sans);font-size:13px;color:var(--ink)}

/* ---------- 전체 화면(작업면 전체). .is-full = 요소 전체 화면이 없는 브라우저의 창 덮기 ---------- */
.rrt:fullscreen,.rrt.is-full{display:flex;flex-direction:column;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;overflow:auto;background:var(--card)}
.rrt.is-full{position:fixed;inset:0;z-index:2147483000;height:100dvh}
html.rrt-lock,html.rrt-lock body{overflow:hidden}
.rrt:fullscreen .rrt-scope,.rrt.is-full .rrt-scope{flex:1 0 auto;grid-template-rows:auto auto auto minmax(0,1fr) auto;border-radius:0}
.rrt:fullscreen .rrt-stage,.rrt.is-full .rrt-stage{height:auto;min-height:198px}
.rrt:fullscreen .rrt-tbox,.rrt.is-full .rrt-tbox{height:88px}

/* ---------- 좁은 폭 ---------- */
@container rrtw (max-width:640px){
  .rrt-read{grid-template-columns:minmax(0,1fr)}
  .rrt-st div:first-child{padding-left:0;border-left:0}
  .rrt-judge{grid-template-columns:minmax(0,1fr)}
  .rrt-vd{min-height:0}
}
@container rrtw (max-width:560px){
  .rrt-skip{grid-template-columns:minmax(0,1fr)}
  .rrt-cells{max-width:360px}
  .rrt-cam{margin-top:2px}
}
@container rrtw (max-width:420px){
  .rrt-scope{padding:10px 12px 12px;gap:10px}
  .rrt-hz b{font-size:58px}
  .rrt-st dd{font-size:22px}
  .rrt-st div{padding-left:9px}
  .rrt-stage{grid-template-columns:90px minmax(0,1fr);height:168px}
  .rrt-lab li{padding:0 7px}
  .rrt-lab b{font-size:14px}
  .rrt-lab span{font-size:10.5px}
  .rrt-judge,.rrt-skip{padding-left:12px;padding-right:12px}
  .rrt-ctl{gap:8px 12px}
  .rrt-foot{padding-left:12px;padding-right:12px}
  .rrt-full kbd{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rrt[data-st="wait"] .rrt-dot{animation:none}
}