.typing-workspace { max-width: 1100px; margin: 0 auto; }
.typing-mode-tabs { display: inline-flex; gap: 4px; padding: 5px; background: #eaece3; border: 1px solid #d9ddcf; border-radius: 10px; margin-bottom: 13px; }
.typing-mode-tabs button { background: transparent; color: #758069; padding: 10px 23px; min-height: 40px; font-family: inherit; font-weight: 600; font-size: 13px; border-radius: 6px; }
.typing-mode-tabs button[aria-selected=true], .typing-mode-tabs button[aria-pressed=true], .typing-mode-tabs button.active { color: #26372a; background: #fffdf9; box-shadow: 0 2px 6px #26312212; }
.typing-mode-tabs button:disabled { opacity: .5; cursor: default; }
.test-page .typing-controls { padding: 14px 17px; border: 1px solid var(--line); border-radius: 10px; background: #eeeee780; gap: 15px; margin: 0; }
.test-page .typing-controls .field { gap: 4px; min-width: 110px; font-size: 11px; }
.test-page .typing-controls select { margin-top: 0; border-radius: 6px; background: #fffdf9; }
.test-page .typing-controls [data-reset] { margin-left: auto; }
.typing-controls input[type=number] { width: 112px; min-height: 38px; font-size: 13px; padding: 7px 10px; }
.test-page .typing-workspace .stat-grid { margin-block: 12px; gap: 12px; }
.test-page .typing-workspace .stat { background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 8px 20px; }
.test-page .typing-workspace .stat:last-child { border: 0; }
.test-page .typing-workspace .stat-value { font-size: 32px; }
.test-page .typing-workspace .stat-label { font-size: 11px; margin-top: 4px; }
.test-page .typing-panel { padding: 20px 26px; margin: 0; border-radius: 12px; box-shadow: 0 3px 12px #33432804; }
.test-page .typing-caption { margin-bottom: 14px; }
.test-page .typing-passage { font-size: 23px; line-height: 1.85; max-height: 128px; scrollbar-gutter: stable; }
.test-page .typing-input { margin-top: 17px; min-height: 66px; height: 66px; resize: none; font-size: 18px; padding: 13px 15px; line-height: 1.8; border-radius: 8px; }
.test-page .typing-feedback { margin-top: 11px; }
.test-page .typing-progress { margin-top: 12px; height: 4px; }
.typing-word-header, [data-word-header] { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 12px; color: #78836a; margin-bottom: 8px; }
.test-page .typing-passage.is-word { font-size: clamp(32px, 4.5vw, 52px); font-weight: 650; line-height: 1.6; letter-spacing: .04em; text-align: center; min-height: 78px; max-height: 100px; padding-block: 8px; }
.typing-word-preview, [data-word-preview] { display: flex; align-items: center; justify-content: center; gap: 20px; color: #a2aa97; min-height: 24px; font-size: 14px; margin: 5px 0 12px; }
.typing-word-preview span, [data-word-preview] span { white-space: nowrap; }
.typing-word-preview .next-word { color: #849177; }
.test-page .typing-panel:has(.is-word) .typing-input { text-align: center; font-size: 22px; line-height: 1.4; }
.typing-analysis { margin-top: 12px; background: #fffdf9; border: 1px solid var(--line); border-radius: 8px; padding: 0 18px; }
.typing-analysis > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 12px; color: #6f7e60; }
.typing-analysis > summary::after { content: '+'; font-size: 19px; }
.typing-analysis[open] > summary::after { content: '−'; }
.typing-analysis .insight-panel { margin-top: 0; border: 0; padding: 14px 0; }
.typing-method { font-size: 12px; margin-top: 12px; }
.typing-method > summary { cursor: pointer; min-height: 38px; }
.test-page .typing-workspace .typing-recap { margin-top: 12px; padding: 16px; }
.typing-mode-help { font-size: 12px; color: #849078; line-height: 1.6; }

@media (min-width: 900px) {
  .test-page .typing-controls .field { flex-direction: row; align-items: center; gap: 9px; }
}

@media (min-width: 900px) and (max-height: 760px) {
  .test-page .typing-controls { padding: 10px 14px; }
  .typing-mode-tabs { margin-bottom: 9px; }
  .test-page .typing-workspace .stat-grid { margin-block: 9px; }
  .test-page .typing-workspace .stat { padding-block: 4px; }
  .test-page .typing-panel { padding: 16px 22px; }
  .test-page .typing-passage { max-height: 100px; font-size: 21px; }
  .test-page .typing-input { min-height: 58px; height: 58px; margin-top: 12px; padding-block: 10px; }
  .test-page .typing-caption { margin-bottom: 8px; }
  .test-page .typing-passage.is-word { font-size: 44px; line-height: 1.5; min-height: 72px; max-height: 78px; padding-block: 3px; }
  [data-word-header] { margin-bottom: 3px; }
  [data-word-preview] { margin-bottom: 7px; }
}
@media (max-width: 650px) {
  .typing-mode-tabs { display: flex; width: 100%; }
  .typing-mode-tabs button { flex: 1; padding: 9px 6px; font-size: 12px; min-height: 44px; }
  .test-page .typing-controls { padding: 10px; gap: 10px; }
  .test-page .typing-controls .field { min-width: 100px; flex: 1; }
  .test-page .typing-controls [data-reset] { padding-inline: 12px; }
  .test-page .typing-workspace .stat-grid { gap: 0; }
  .test-page .typing-workspace .stat { padding: 5px 10px; }
  .test-page .typing-workspace .stat-value { font-size: 27px; }
  .test-page .typing-panel { padding: 15px; }
  .test-page .typing-passage { font-size: 20px; max-height: 112px; }
  .test-page .typing-input { font-size: 17px; }
  .test-page .typing-passage.is-word { min-height: 70px; font-size: 36px; }
  [data-word-preview] { gap: 14px; font-size: 12px; }
}