/*
 * 타자연습 전용 스타일. 토큰은 static/fro/css/devin.css 가 출처다.
 * 새 디자인 언어를 만들지 않고 기존 카드·버튼 위에 연습판만 얹는다.
 */

.tp-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.tp-metric {
  flex: 1 1 110px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: center;
}

.tp-metric__label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.tp-metric__value {
  /* 숫자가 바뀔 때 폭이 흔들리면 옆 칸까지 밀린다. 고정폭 숫자로 막는다. */
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

/* 지문 칸 */
.tp-target {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.22rem;
  line-height: 2;
  letter-spacing: 0.01em;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
  word-break: break-all;
  white-space: pre-wrap;
  min-height: 92px;
}

.tp-ch {
  border-radius: 3px;
  transition: none; /* 입력마다 트랜지션이 돌면 긴 지문에서 렌더가 밀린다 */
}

.tp-ch.is-ok {
  color: #1c6b4a;
  background: rgba(103, 213, 189, 0.22);
}

.tp-ch.is-bad {
  color: #a32020;
  background: rgba(220, 70, 70, 0.18);
  text-decoration: underline wavy currentColor;
}

.tp-ch.is-cursor {
  box-shadow: inset 0 -3px 0 0 var(--accent);
}

.tp-input {
  width: 100%;
  margin-top: 12px;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  /* input·textarea 는 색을 상속하지 않는다. 다크모드에서 흰 상자가 튀는 것을 막는다. */
  background: var(--surface); color: var(--text);
}
.tp-input::placeholder { color: var(--text-faint); }

.tp-progress {
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--surface-muted, var(--border));
  overflow: hidden;
}

.tp-progress__bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  /* 폭만 바꾸므로 레이아웃을 다시 계산하지 않는다 */
  transition: width 120ms linear;
}

/* 여정 */
.tp-question {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 6px;
}

.tp-hint {
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  min-height: 1.5em;
}

.tp-hint.is-answer {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0;
}

.tp-explain {
  min-height: 1.5em;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.tp-modes {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.tp-modes label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* 전체 학습 맵 — 이 표가 검색에 색인되는 본문이다. 숨기거나 JS로 그리지 마라. */
.tp-map {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tp-map th,
.tp-map td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.tp-map th {
  white-space: nowrap;
  color: var(--text-muted);
  font-weight: 600;
}

.tp-map td:first-child {
  width: 3.2rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tp-map code {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

.tp-journeys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tp-journeys a {
  display: block;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
}

.tp-journeys a:hover {
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .tp-target {
    font-size: 1.05rem;
    line-height: 1.9;
  }
  .tp-metric__value {
    font-size: 1.3rem;
  }
}

/* ── vim 연습 ─────────────────────────────────────────────── */
.vim-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .3rem; }
.vim-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.vim-stage {
  border: 1px solid var(--border); border-radius: 8px;
  background: #1c2733; padding: .6rem .7rem; min-height: 120px;
  outline-offset: 2px; cursor: text;
}
.vim-stage:focus-visible { outline: 3px solid var(--accent); }
.vim-buffer {
  margin: 0; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #d7e2ee; white-space: pre-wrap; overflow-wrap: anywhere;
}
.vim-buffer.is-goal {
  color: #1c2733; background: #eef5ee; border: 1px solid var(--border);
  border-radius: 8px; padding: .6rem .7rem; min-height: 120px;
}
.vim-row { min-height: 1.6em; }
.vim-cursor { background: #67d5bd; color: #10202c; border-radius: 2px; }
.vim-cursor.is-insert { background: none; box-shadow: inset 2px 0 0 0 #67d5bd; color: inherit; }
.vim-status { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.vim-mode { font: 600 .78rem ui-monospace, monospace; padding: .1rem .4rem; border-radius: 4px; }
.vim-mode.is-normal { background: var(--accent-soft); color: var(--accent); }
.vim-mode.is-insert { background: #dff3e6; color: #1c6b4a; }
.vim-mode.is-visual, .vim-mode.is-visual-line { background: #f6ecd8; color: #7a5a1e; }
.vim-message { min-height: 1.5em; margin: .6rem 0 0; font-size: .9rem; }
.vim-message.is-solved { color: #1c6b4a; font-weight: 600; }
.vim-message.is-warn { color: #a35a20; }
@media (max-width: 720px) { .vim-panes { grid-template-columns: minmax(0, 1fr); } }

/*
 * 다크모드 — 정타/오타처럼 의미를 담은 색만 밝기를 맞춘다.
 * 구조색은 devin.css 토큰을 쓰므로 자동으로 따라온다.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tp-ch.is-ok { color: #7fe3c8; }
  :root:not([data-theme="light"]) .tp-ch.is-bad { color: #ff9a9a; }
  :root:not([data-theme="light"]) .vim-buffer.is-goal { color: #d7e2ee; background: #1b2a22; border-color: #2f4a3a; }
  :root:not([data-theme="light"]) .vim-mode.is-normal { background: #1e2a3a; color: #a8c4e6; }
  :root:not([data-theme="light"]) .vim-mode.is-insert { background: #1b2f24; color: #8fe0b0; }
  :root:not([data-theme="light"]) .vim-mode.is-visual,
  :root:not([data-theme="light"]) .vim-mode.is-visual-line { background: #33291a; color: #e0c48f; }
  :root:not([data-theme="light"]) .vim-message.is-solved { color: #7fe3c8; }
  :root:not([data-theme="light"]) .vim-message.is-warn { color: #e8a96a; }
}
:root[data-theme="dark"] .tp-ch.is-ok { color: #7fe3c8; }
:root[data-theme="dark"] .tp-ch.is-bad { color: #ff9a9a; }
:root[data-theme="dark"] .vim-buffer.is-goal { color: #d7e2ee; background: #1b2a22; border-color: #2f4a3a; }
:root[data-theme="dark"] .vim-mode.is-normal { background: #1e2a3a; color: #a8c4e6; }
:root[data-theme="dark"] .vim-mode.is-insert { background: #1b2f24; color: #8fe0b0; }
:root[data-theme="dark"] .vim-mode.is-visual,
:root[data-theme="dark"] .vim-mode.is-visual-line { background: #33291a; color: #e0c48f; }
:root[data-theme="dark"] .vim-message.is-solved { color: #7fe3c8; }
:root[data-theme="dark"] .vim-message.is-warn { color: #e8a96a; }