/* 한글 타자 속도 — 앱 전용 스타일. 색·간격·둥글기는 전부 tokens.css 변수만 쓴다. */

.hero {
  margin-block: var(--s-5);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ── 통계 바 ─────────────────────────────────────────── */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.stat {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.stat--time {
  background: var(--accent-soft);
  border-color: transparent;
}
.stat__label {
  font-size: var(--t-xs);
  color: var(--text-dim);
  font-weight: 600;
}
.stat__value {
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat--time .stat__value { color: var(--accent); }
.stat__unit {
  font-size: var(--t-xs);
  color: var(--text-faint);
}

/* ── 안내 문구 ───────────────────────────────────────── */
.hint {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--text-dim);
}

/* ── 문장 표시 ───────────────────────────────────────── */
.sentence {
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
  line-height: 1.9;
  letter-spacing: 0.01em;
  /* keep-all 은 한글 글자 사이 줄바꿈을 막아 좁은 화면에서 가로로 넘친다 */
  word-break: normal;
  overflow-wrap: anywhere;
}
.ch {
  /* 공백 글자에서 줄이 바뀔 수 있어야 한다 (pre 는 그 지점 줄바꿈을 막음) */
  white-space: pre-wrap;
  border-bottom: 2px solid transparent;
  border-radius: 3px;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.ch--pending {
  color: var(--text-faint);
}
.ch--next {
  background: var(--accent-soft);
  border-bottom-color: var(--accent);
  animation: caret-blink 1s var(--ease) infinite;
}
.ch--correct {
  color: var(--accent-2);
  font-weight: 600;
  border-bottom-color: var(--accent-2);
}
.ch--wrong {
  color: var(--danger);
  font-weight: 800;
  text-decoration: underline wavy;
  text-decoration-color: var(--danger);
  text-underline-offset: 3px;
}
.ch--composing {
  color: var(--text);
  font-weight: 700;
  background: var(--accent-soft);
  border-bottom: 2px dotted var(--accent);
}
.ch--space.ch--pending {
  position: relative;
}
.ch--space.ch--pending::after {
  content: "·";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

@keyframes caret-blink {
  0%, 55% { border-bottom-color: var(--accent); }
  56%, 100% { border-bottom-color: transparent; }
}

/* ── 입력창 ──────────────────────────────────────────── */
.type-input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-solid);
  color: var(--text);
  font-size: var(--t-body);
}
.type-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.type-input:disabled {
  opacity: 0.5;
}

/* ── 결과 카드 ───────────────────────────────────────── */
.result {
  margin-block: var(--s-5);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
}
.result h2 {
  margin: 0;
  font-size: var(--t-h1);
}
.result-grid {
  width: 100%;
  max-width: 420px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.result-grid > div {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.result-grid dt {
  font-size: var(--t-xs);
  color: var(--text-dim);
  font-weight: 600;
}
.result-grid dd {
  margin: 0;
  font-size: var(--t-h2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.result-note {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--t-sm);
}
.result-actions {
  margin-top: var(--s-2);
}

@media (min-width: 640px) {
  .stat-row { flex-wrap: nowrap; }
}