/* 반응속도 측정 — 앱 전용 스타일. 색상은 tokens.css 변수(및 그로부터의 color-mix 파생)만 쓴다. */

.rx__lead {
  margin: var(--s-5) 0 var(--s-4);
  color: var(--text-dim);
  font-size: var(--t-sm);
  text-align: center;
}

.rx__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, 62vh, 560px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  /* 배경색만은 즉시 전환 — 측정 정확도를 위해 색이 지연 없이 바뀌어야 한다 */
  transition: background-color 80ms linear, box-shadow var(--dur-2) var(--ease);
}
.rx__stage:hover { box-shadow: var(--shadow-2); }
.rx__stage:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.rx__stageInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  max-width: 34rem;
  text-align: center;
}

.rx__round {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.rx__big {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.rx__sub {
  margin: 0;
  font-size: var(--t-body);
  opacity: 0.9;
}

/* 상태별 색 — 기존 --danger / --accent-2 토큰에서만 파생(color-mix 로 명도 조정, 대비 4.5:1 이상 확보) */
.rx__stage[data-state="waiting"],
.rx__stage[data-state="toosoon"] {
  background: var(--danger);
  color: var(--accent-ink);
}
.rx__stage[data-state="go"] {
  background: color-mix(in srgb, var(--accent-2) 50%, black 50%);
  color: var(--accent-ink);
}
.rx__stage[data-state="toosoon"] .rx__big {
  animation: rxShake var(--dur-3) var(--ease);
}
.rx__stage[data-state="go"] .rx__big {
  animation: rxPop var(--dur-2) var(--ease);
}

@keyframes rxPop {
  from { transform: scale(0.85); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes rxShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.rx__panel {
  margin: var(--s-5) 0 var(--s-7);
  padding: var(--s-5);
}
.rx__panelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.rx__panelTitle {
  margin: 0;
  font-size: var(--t-h2);
}

.rx__list {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.rx__listItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t-sm);
}
.rx__listItem span:first-child { color: var(--text-dim); }
.rx__listValue { font-weight: 700; font-variant-numeric: tabular-nums; }
.rx__listItem.is-done { border-color: var(--line-strong); }

.rx__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}
.rx__stats > div { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.rx__statLabel { font-size: var(--t-xs); color: var(--text-dim); }
.rx__statValue { font-size: var(--t-h2); font-weight: 800; font-variant-numeric: tabular-nums; }

.rx__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 360px) {
  .rx__stageInner { padding: var(--s-5) var(--s-4); }
}