/* 직장인 타자 스프린트 — 전용 스타일 (다크 테마, 반응형) */

.ot-screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 시작 화면 */
#screen-start { text-align: center; }
.ot-title { font-size: 24px; font-weight: 800; }
.ot-desc { color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.ot-desc strong { color: var(--text); }
.ot-hl { color: var(--accent); font-weight: 700; }
.ot-start-btn { align-self: center; padding: 14px 28px; font-size: 16px; }

/* HUD */
.ot-hud {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
}

/* 목표 용어 표시 — 짧은 단어이므로 중앙 정렬로 강조 */
.ot-target {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.5px;
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  word-break: keep-all;
}
.ot-target .ot-correct { color: var(--good); }
.ot-target .ot-wrong { color: var(--bad); }
.ot-target .ot-pending { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ot-target .ot-todo { color: var(--text-dim); }
.ot-target .ot-over {
  color: var(--bad);
  text-decoration: underline wavy var(--bad);
  text-underline-offset: 4px;
}
/* 띄어쓰기도 정답의 일부 — 좁은 공백 문자 대신 뚜렷한 폭의 구분자로 표시해
   "안 보이는 함정"이 되지 않게 한다. 아직 입력 전(색 클래스 없음)에는 점선 테두리로 위치를 암시. */
.ot-target .ot-space {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: middle;
  border-bottom: 2px dotted var(--text-dim);
  margin: 0 1px;
}
.ot-target .ot-space.ot-correct { border-bottom-color: var(--good); }
.ot-target .ot-space.ot-wrong { border-bottom-color: var(--bad); }

/* 타이핑 중 함께 노출되는 학습 설명 — 단어를 외우기 전에 읽도록 유도 */
.ot-desc-hint {
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
  padding: 0 8px;
  min-height: 2.6em;
}

/* 입력값이 목표와 정확히 일치하면(Enter 제출 대기) 초록 테두리로 안내 */
.ot-input.ot-ready { border-color: var(--good); }

/* 입력창 */
.ot-input {
  width: 100%;
  padding: 16px 18px;
  font-size: 20px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ot-input:focus { border-color: var(--accent-2); }
.ot-input::placeholder { color: var(--text-dim); }

/* 불일치 제출 시 흔들림 */
.ot-shake {
  animation: ot-shake 0.32s cubic-bezier(.36,.07,.19,.97) both;
  border-color: var(--bad) !important;
}
@keyframes ot-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* 하단 */
.ot-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ot-hint { color: var(--text-dim); font-size: 13px; text-align: right; }

/* 결과 오버레이 */
.ot-over-title { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.ot-record-badge {
  display: inline-block;
  color: var(--accent);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
}
.ot-wpm-big {
  font-size: 52px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1.1;
  margin: 8px 0 4px;
}
.ot-wpm-unit { font-size: 20px; font-weight: 700; color: var(--text-dim); margin-left: 6px; }
.ot-over-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 18px 0 22px;
}
.ot-over-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.ot-over-actions .gl-btn { flex: 1; }

/* 모바일 (360px) 대응 */
@media (max-width: 400px) {
  .ot-title { font-size: 21px; }
  .ot-target { font-size: 24px; }
  .ot-desc-hint { font-size: 13px; }
  .ot-input { font-size: 18px; padding: 14px; }
  .ot-hud .value { font-size: 17px; }
  .ot-wpm-big { font-size: 44px; }
  .ot-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ot-hint { text-align: left; }
}