/* ============================================================
   반응속도 테스트 전용 스타일
   - 패널 색이 곧 게임이다: 대기(붉은색) → 신호(초록)가 규칙 그 자체.
     숫자·소리 신호는 어두운 남회색 판에서 숫자·소리만 신호가 된다.
   - 패널 전체가 버튼: 어디를 눌러도 반응으로 잰다. 크게, 높게.
   ============================================================ */

:root {
  --rt-wait: #c0453a;        /* 대기: 누르면 안 되는 붉은색 */
  --rt-wait-deep: #a93a30;
  --rt-go: #2f9e52;          /* 신호: 지금 눌러야 하는 초록 */
  --rt-go-deep: #268246;
  --rt-decoy: #3a6fb0;       /* 가짜 신호: 파랑 */
  --rt-calm: #3d4351;        /* 숫자·소리 대기판: 남회색 */
  --rt-calm-deep: #333846;
  --rt-on-strong: #fdfbf6;   /* 색판 위 글자 */
  --rt-bad: #c0392b;
  --rt-bad-weak: #f6dcd6;
  --rt-fast: #2e7d3c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rt-wait: #9e3d34;
    --rt-wait-deep: #8a342c;
    --rt-go: #2c8447;
    --rt-go-deep: #256e3c;
    --rt-decoy: #38598a;
    --rt-calm: #2b303c;
    --rt-calm-deep: #232834;
    --rt-bad: #ff8f7d;
    --rt-bad-weak: #4a231c;
    --rt-fast: #7fd694;
  }
}
:root[data-theme="dark"] {
  --rt-wait: #9e3d34;
  --rt-wait-deep: #8a342c;
  --rt-go: #2c8447;
  --rt-go-deep: #256e3c;
  --rt-decoy: #38598a;
  --rt-calm: #2b303c;
  --rt-calm-deep: #232834;
  --rt-bad: #ff8f7d;
  --rt-bad-weak: #4a231c;
  --rt-fast: #7fd694;
}

/* ---- 도입부 ---- */
.tool-intro { padding: clamp(30px, 5vw, 56px) 0 clamp(18px, 3vw, 30px); }
.tool-intro h1 { margin: 0 0 var(--space-4); }
.tool-intro .lead {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--color-text-sub);
  max-width: 52ch;
  margin: 0;
}
.tool-intro .lead strong { color: var(--color-text); }
.tool-intro .lead-note {
  margin: var(--space-3) 0 0;
  font-size: .88rem;
  color: var(--color-text-sub);
}

/* ---- 설정 줄 ---- */
.rt-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.rt-field { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rt-lab { font-size: .95rem; font-weight: 700; color: var(--color-text-sub); }
.rt-field-note {
  flex-basis: 100%;
  font-size: .85rem;
  color: var(--color-text-sub);
}
.rt-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rt-chip {
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.rt-chip small {
  font-size: .78em;
  font-weight: 400;
  opacity: .75;
  margin-left: 2px;
}
.rt-chip:hover { border-color: var(--color-primary); }
.rt-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.rt-chip-ghost { font-size: .92rem; color: var(--color-text-sub); }
.rt-chip-ghost:hover { color: var(--color-text); }

/* ---- 상태 줄 ---- */
.rt-stage { max-width: 640px; margin: 0 auto; }
.rt-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.rt-stat {
  font-size: 1.05rem;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
}
.rt-stat:last-child { text-align: right; }
.rt-stat b { font-size: 1.2rem; color: var(--color-text); }
.rt-target {
  font-size: .95rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
}

/* ---- 반응 패널: 전체가 버튼 ---- */
.rt-panel-wrap { display: grid; }
.rt-panel-wrap > * { grid-area: 1 / 1; }
.rt-panel {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: clamp(300px, 58vw, 400px);
  padding: clamp(16px, 4vw, 24px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  transition: background .12s ease;
}
.rt-panel:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }

.rt-panel-sub {
  min-height: 1.4em;
  font-size: 1.02rem;
  font-weight: 700;
  opacity: .85;
}
.rt-panel-main {
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.rt-panel-note {
  min-height: 1.4em;
  font-size: 1rem;
  opacity: .8;
}

/* 숫자 신호: 숫자 하나가 화면을 채운다 */
.rt-panel.is-digit .rt-panel-main {
  font-size: clamp(6rem, 30vw, 10rem);
  line-height: 1;
}

/* 대기: 색 신호는 붉은 판, 숫자·소리는 차분한 남회색 판 */
.rt-panel[data-phase="armed"] { border-color: transparent; color: var(--rt-on-strong); }
.rt-panel[data-mode="color"][data-phase="armed"] {
  background: linear-gradient(160deg, var(--rt-wait), var(--rt-wait-deep));
}
.rt-panel[data-mode="number"][data-phase="armed"],
.rt-panel[data-mode="sound"][data-phase="armed"] {
  background: linear-gradient(160deg, var(--rt-calm), var(--rt-calm-deep));
}

/* 가짜 신호 */
.rt-panel[data-phase="decoy"] { border-color: transparent; color: var(--rt-on-strong); }
.rt-panel[data-mode="color"][data-phase="decoy"] { background: var(--rt-decoy); }
.rt-panel[data-mode="number"][data-phase="decoy"],
.rt-panel[data-mode="sound"][data-phase="decoy"] {
  background: linear-gradient(160deg, var(--rt-calm), var(--rt-calm-deep));
}

/* 진짜 신호: 색 신호는 초록으로 반전, 숫자·소리는 판 유지(숫자·소리가 신호) */
.rt-panel[data-phase="go"] { border-color: transparent; color: var(--rt-on-strong); }
.rt-panel[data-mode="color"][data-phase="go"] {
  background: linear-gradient(160deg, var(--rt-go), var(--rt-go-deep));
}
.rt-panel[data-mode="number"][data-phase="go"],
.rt-panel[data-mode="sound"][data-phase="go"] {
  background: linear-gradient(160deg, var(--rt-calm), var(--rt-calm-deep));
}

/* 시도 사이: 결과 숫자는 크게, 실패는 붉은 테두리 */
.rt-panel[data-phase="between"] .rt-panel-main { color: var(--color-primary); }
.rt-panel[data-phase="between"].is-bad { box-shadow: 0 0 0 3px var(--rt-bad); }
.rt-panel[data-phase="between"].is-bad .rt-panel-main { color: var(--rt-bad); }
.rt-panel[data-phase="between"].is-bad .rt-panel-sub { color: var(--rt-bad); opacity: 1; }

/* ---- 이번 세션 기록 칩 ---- */
.rt-tries {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-3);
  min-height: 34px;
  flex-wrap: wrap;
}
.rt-try {
  min-width: 56px;
  padding: 6px 10px;
  text-align: center;
  font-size: .98rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-sub);
}
.rt-try.is-done { color: var(--color-text); }
.rt-try.is-fast { border-color: var(--rt-fast); color: var(--rt-fast); }

/* ---- 안내 문구 ---- */
.rt-msg {
  min-height: 1.8em;
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ---- 종료 오버레이 ---- */
.rt-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .rt-overlay { background: rgba(243, 240, 232, .88); }
  :root[data-theme="dark"] .rt-overlay { background: rgba(23, 19, 14, .88); }
}
.rt-overlay-panel {
  text-align: center;
  padding: var(--space-4) var(--space-5);
  max-width: 100%;
}
.rt-over-label { margin: 0; font-size: 1.02rem; color: var(--color-text-sub); }
.rt-over-avg {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}
.rt-over-avg b { font-size: 3.6rem; color: var(--color-primary); }
.rt-unit { font-size: 1.3rem; margin-left: 4px; color: var(--color-text-sub); }
.rt-over-grade {
  margin: var(--space-1) 0 var(--space-3);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}
.rt-overlay .rt-times {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.rt-over-line {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
  color: var(--color-text-sub);
}
.rt-over-line b { color: var(--color-text); }
.rt-new { color: var(--color-primary); font-weight: 700; }
.rt-over-bench {
  margin: var(--space-2) 0 var(--space-4);
  font-size: .9rem;
  color: var(--color-text-sub);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.rt-btn-big {
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 18px 44px;
  border-radius: 999px;
  border: 0;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.rt-btn-big:hover { filter: brightness(1.06); }
.rt-btn-big:active { transform: scale(.97); }

/* ---- 본문 ---- */
.prose { max-width: 720px; margin: clamp(40px, 6vw, 64px) auto 0; }
.prose h2 { margin: 0 0 var(--space-3); }
.prose p { margin: 0 0 var(--space-3); color: var(--color-text); }
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose li strong { color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  .rt-panel, .rt-btn-big { transition: none; }
}

@media (max-width: 420px) {
  .rt-stat { font-size: .95rem; }
  .rt-target { font-size: .85rem; padding: 6px 12px; }
}