/*
 * 타자연습 전용 스타일. 토큰은 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; }

/* Typing academy */
.tp-academy{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;border-radius:24px;padding:clamp(26px,5vw,58px);background:#132c3d;color:#eff7f6;overflow:hidden}.tp-academy h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.24;letter-spacing:-.05em;margin:18px 0}.tp-academy p{line-height:1.85;color:#bcd6d8}.tp-eyebrow{letter-spacing:.16em;font-size:.68rem;font-weight:800}.tp-keyboard{transform:rotate(-7deg);padding:24px 18px;border-radius:22px;background:#203f50;box-shadow:0 18px 0 #0c1e2a,0 35px 45px #091a2780}.tp-keyboard>div{display:flex;justify-content:center;gap:8px;margin:9px 0}.tp-keyboard kbd{display:grid;place-items:center;width:48px;height:48px;border-radius:9px;background:#e8eeeb;color:#203c4d;box-shadow:0 5px 0 #9dadae;font-size:1.1rem}.tp-keyboard .tp-enter{width:112px;background:#e5b76e}.tp-keyboard p{text-align:center;font-size:.75rem}.tp-course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0}.tp-course-grid>a{position:relative;overflow:hidden;display:block;padding:26px 22px;border-radius:18px;border:1px solid var(--border,#d8e1e3);color:var(--text);text-decoration:none;background:var(--surface,#f6f8fa);transition:transform .15s}.tp-course-grid>a:hover{transform:translateY(-4px);border-color:#789ca8}.tp-course-grid span{font-size:.65rem;letter-spacing:.12em;color:#66838a}.tp-course-grid strong{display:block;font-size:1.2rem;margin:20px 0 12px}.tp-course-grid p{line-height:1.8;font-size:.85rem}.tp-course-grid b{display:block;margin-top:24px;font:700 1.8rem monospace;color:#73948f}.tp-course-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.tp-course-tabs button{padding:12px 17px;border:1px solid var(--border,#d8e1e3);background:var(--surface,#f6f8fa);color:var(--text);border-radius:12px;font:inherit;cursor:pointer}.tp-course-tabs button:hover{border-color:#547d87}.tp-key-help{font-size:.82rem;line-height:1.8;color:var(--text-muted,#637584)}.tp-key-help kbd{display:inline-block;border:1px solid var(--border,#ccd4df);border-bottom-width:3px;border-radius:6px;padding:1px 7px}.tp-target{padding:28px!important;font-size:clamp(1.2rem,2vw,1.65rem)!important;line-height:2!important}.tp-input{min-height:60px;border-radius:12px!important}.tp-metrics{padding:20px;border-radius:16px;background:var(--surface,#f2f7f7);margin-bottom:24px}
@media(max-width:800px){.tp-academy{grid-template-columns:1fr}.tp-keyboard{max-width:340px;width:100%;margin:10px auto}.tp-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:400px){.tp-course-grid{grid-template-columns:1fr}.tp-keyboard kbd{width:38px;height:38px}}@media(prefers-reduced-motion:reduce){.tp-course-grid>a{transition:none}}

/* 연습 설정 — 2026-09-29 컴팩트화. 예전 카드형(그림 96px)은 390px 에서 607px 을 차지해
   지문이 두 화면 아래로 밀렸다. 이제 PC 는 두 줄(언어+버튼 / 단계 5칸), 모바일은 칩 두 줄이다.
   입력은 그대로 네이티브 radio 라서 data-tp-mode·data-tp-kind 와 키보드 조작이 그대로 동작한다. */
.tp-settings{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;margin:0 0 14px}
.tp-settings fieldset{min-width:0;border:0;padding:0;margin:0}
.tp-settings legend{float:left;padding:0;margin:0 10px 0 0;font-weight:750;font-size:.86rem;line-height:34px}
.tp-settings legend small{display:none}
.tp-language{grid-column:1}.tp-settings__footer{grid-column:2;grid-row:1}.tp-practice{grid-column:1/-1}
.tp-language__options{display:flex;gap:6px;flex-wrap:wrap}
.tp-option{position:relative;cursor:pointer;display:block;min-width:0}
.tp-option input{position:absolute;width:1px;height:1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.tp-option>span{display:flex;align-items:center;gap:6px;border:1px solid var(--border,#d8e1e3);border-radius:10px;padding:6px 12px;min-height:34px;box-sizing:border-box;background:var(--surface,#f6f8fa);color:var(--text,#243c47);font-size:.84rem;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.tp-option b{font-size:.74rem;color:var(--text-muted,#637584)}
.tp-option input:checked+span{border-color:var(--accent,#347d80);box-shadow:inset 0 0 0 1px var(--accent,#347d80);background:var(--accent-soft,#e5f2ef);font-weight:650}
.tp-option input:focus-visible+span{outline:3px solid var(--accent,#347d80);outline-offset:3px}
.tp-option:hover>span{border-color:var(--accent,#347d80)}
.tp-practice__options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tp-option--course>span{height:100%;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:0 8px;padding:7px 10px;white-space:normal}
.tp-option--course svg{grid-row:span 2;width:34px;height:30px;color:var(--accent,#347d80);fill:var(--accent-soft,#e5f2ef);stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tp-option--course strong{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-option--course small{font-size:.68rem;line-height:1.35;color:var(--text-muted,#637584);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-settings__footer{display:flex;align-items:center;gap:10px}
.tp-settings__footer p{font-size:.74rem;color:var(--text-muted,#637584);margin:0}
.tp-settings__footer button{flex-shrink:0}
@media(max-width:1100px){.tp-settings__footer p{display:none}}
@media(max-width:900px){.tp-option--course small{display:none}.tp-option--course>span{grid-template-columns:26px minmax(0,1fr);padding:6px 8px}.tp-option--course svg{grid-row:auto;width:26px;height:24px}}
/* 모바일: 제목(legend)은 화면에서만 숨기고(스크린리더는 읽는다) 칩만 남긴다. 단계는 가로로 넘겨 본다. */
@media(max-width:700px){
  .tp-settings{gap:6px 8px;margin:0 0 8px}
  .tp-settings legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tp-language__options{flex-wrap:nowrap;gap:4px}
  .tp-language .tp-option{flex:1 1 0}
  .tp-option>span{justify-content:center;padding:4px 8px;min-height:32px;font-size:.8rem;border-radius:8px}
  .tp-option b{display:none}
  .tp-practice__options{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:1px}
  .tp-practice__options::-webkit-scrollbar{display:none}
  .tp-option--course{flex:0 0 auto}
  .tp-option--course>span{display:flex;padding:4px 10px}
  .tp-option--course svg,.tp-option--course small{display:none}
  .tp-option--course strong{font-size:.8rem;font-weight:inherit}
  .tp-settings__footer .btn{padding:4px 10px;min-height:32px;font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){.tp-option>span{transition:none}}

/* Reserve the same reading and result geometry for every exercise type. */
[data-tp-title]{height:24px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:8px 0}
/* 지문은 단락처럼 이어 보여주고 현재 줄만 강조한다(PLAN-TYPING-ENGINE §8.1 연습판).
   줄 높이를 픽셀로 못 박지 않는 이유: 한글 36자는 좁은 화면에서 두 줄로 접히므로
   칸을 고정하면 글자가 잘린다. 대신 창 높이만 줄 수(--tp-rows)로 고정해 입력창 위치를 지킨다. */
.tp-reading{--tp-rows:5;--tp-row:2.45em;border:1px solid var(--border,#d8e1e3);border-radius:16px;overflow:hidden;padding:10px 0;background:var(--surface-alt,#f5f8f8);font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:clamp(1.02rem,1.7vw,1.32rem);letter-spacing:.01em}
.tp-lines{position:relative;height:calc(var(--tp-rows)*var(--tp-row));overflow:hidden;scroll-behavior:smooth;overscroll-behavior:contain}
.tp-reading.is-single .tp-lines{display:flex;flex-direction:column;justify-content:center}
.tp-line{box-sizing:border-box;min-height:var(--tp-row);padding:.22em 16px .22em 13px;border-left:3px solid transparent;line-height:2;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-muted,#637584);opacity:.72}
.tp-line.is-done{opacity:.42}
.tp-line.is-current{opacity:1;color:var(--text,#243c47);border-left-color:var(--accent,#347d80);background:var(--accent-soft,#e5f2ef)}
.tp-reading .tp-target{margin:0;border:0;border-radius:0;background:none;height:auto;min-height:0;max-height:none;padding:0!important;font-family:inherit;font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.tp-reading .tp-ch{white-space:pre-wrap}
.tp-line-status{height:36px;line-height:18px;font-size:.75rem;color:var(--text-muted,#637584);margin:10px 0;overflow:hidden}
@media(max-width:700px){.tp-reading{--tp-rows:4;font-size:1rem}}
@media(prefers-reduced-motion:reduce){.tp-lines{scroll-behavior:auto}}.tp-result-slot{height:200px;margin-top:16px}.tp-result-slot>.card{height:100%;box-sizing:border-box;overflow:auto}.tp-result-slot h2{font-size:1.15rem}.tp-result-slot p{font-size:.86rem}

/* Live numbers stay next to the input, while exercise settings remain above. */
.tp-metrics.tp-metrics--near-input{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 12px;padding:12px 8px;border:1px solid var(--border,#d8e1e3);border-radius:12px}.tp-metrics--near-input .tp-metric{min-width:0;padding:0 10px;border-left:1px solid var(--border,#d8e1e3)}.tp-metrics--near-input .tp-metric:first-child{border-left:0}.tp-metrics--near-input .tp-metric__label{font-size:.72rem;line-height:1.5;white-space:nowrap}.tp-metrics--near-input .tp-metric__label small{font-size:.62rem;font-weight:400}.tp-metrics--near-input .tp-metric__value{font-size:1.55rem;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}.tp-metrics--near-input .tp-metric:first-child .tp-metric__value{color:var(--accent,#347d80)}@media(max-width:480px){.tp-metrics.tp-metrics--near-input{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px;padding:10px 6px}.tp-metrics--near-input .tp-metric:nth-child(3){border-left:0}.tp-metrics--near-input .tp-metric__value{font-size:1.3rem}.tp-metrics--near-input .tp-metric__label{font-size:.68rem}}

/* A reserved progress companion never moves the typing surface as data arrives. */
.tp-practice-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}.tp-practice-main{min-width:0}.tp-ranking{height:760px;box-sizing:border-box;overflow:hidden;padding:20px;display:flex;flex-direction:column;gap:12px}.tp-ranking__head .tp-eyebrow{font-size:.58rem;color:var(--accent,#347d80);margin:0 0 6px}.tp-ranking__head h2{font-size:1.4rem;margin:0 0 6px}.tp-ranking__head>p:last-child{font-size:.76rem;color:var(--text-muted,#637584);margin:0}.tp-ranking__period{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border-radius:10px;padding:4px;background:var(--surface,#f2f7f7)}.tp-ranking__period button{padding:8px 4px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted,#637584);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer}.tp-ranking__period button[aria-pressed=true]{background:var(--accent-soft,#e5f2ef);border-color:var(--accent,#347d80);color:var(--text,#243c47)}.tp-ranking__period button:focus-visible{outline:2px solid var(--accent,#347d80);outline-offset:2px}.tp-ranking__personal-slot{height:172px;flex-shrink:0;padding:14px 0;box-sizing:border-box}.tp-ranking__personal-slot h3{font-size:.95rem;margin:0 0 8px}.tp-ranking__personal-slot p{font-size:.77rem;line-height:1.65;margin:0 0 12px;color:var(--text-muted,#637584)}.tp-ranking__personal-slot .btn{font-size:.75rem}.tp-personal-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tp-personal-stats span{display:block;font-size:.65rem;white-space:nowrap;color:var(--text-muted,#637584)}.tp-personal-stats small{font-size:.57rem}.tp-personal-stats strong{display:block;font-size:1.25rem;font-variant-numeric:tabular-nums}.tp-ranking__personal-slot .tp-personal-rank{margin:10px 0 6px;color:var(--accent,#347d80)}.tp-ranking__personal-slot .tp-goal-text{font-size:.71rem;min-height:24px;margin:0 0 6px}.tp-goal-track{height:7px;background:var(--surface,#e9eeed);border-radius:5px;overflow:hidden}.tp-goal-track>div{height:100%;width:0;background:var(--accent,#347d80);border-radius:5px}.tp-ranking__list-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.tp-ranking__list-head h3{font-size:.84rem;margin:0}.tp-ranking__list-head>span{font-size:.58rem;white-space:nowrap;color:var(--text-muted,#637584)}.tp-ranking__board{height:218px;flex-shrink:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--border,#d8e1e3);border-bottom:1px solid var(--border,#d8e1e3)}.tp-ranking__board>p{font-size:.72rem;line-height:1.6;color:var(--text-muted,#637584);margin:10px 0}.tp-ranking__board ol{list-style:none;margin:0;padding:0}.tp-ranking__board li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 0;border-top:1px solid var(--border,#d8e1e3);font-size:.77rem}.tp-ranking__board li>span{color:var(--accent,#347d80);font-variant-numeric:tabular-nums}.tp-ranking__board li>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.tp-ranking__board li>b{font-size:.73rem;font-variant-numeric:tabular-nums}.tp-ranking__criteria{font-size:.66rem;line-height:1.6;color:var(--text-muted,#637584);margin:0}.tp-ranking__save{height:92px;flex-shrink:0;overflow:auto}.tp-ranking__save p{font-size:.7rem;line-height:1.6;margin:0 0 8px;color:var(--text-muted,#637584)}@media(min-width:1200px){.tp-practice-layout{grid-template-columns:minmax(0,1fr) 280px}.tp-ranking{position:sticky;top:84px}.tp-practice-layout .tp-practice__options{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:480px){.tp-ranking{padding:18px;height:760px}}

.tp-ranking{display:grid;grid-template-rows:70px 40px 162px 24px minmax(0,1fr) 48px 88px;gap:10px}.tp-ranking__personal-slot,.tp-ranking__board,.tp-ranking__save{height:auto;min-height:0}.tp-ranking__criteria{overflow:hidden}

/* Author-level .btn display must not override the retry control's hidden state. */
[data-tp-ranking-retry][hidden]{display:none}
.tp-ranking__personal-slot .tp-ranking__guest{margin:10px 0 6px;font-size:.72rem;color:var(--text-muted,#637584)}.tp-ranking__guest a{color:var(--accent,#347d80);font-weight:600}
/* 2026-09-23 어디에 입력하는지 한눈에: 입력 중이면 지문 창과 입력창을 강조색으로 묶는다 */
.tp-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.tp-input:not(:focus):not([readonly]):not(:disabled){border:2px dashed var(--accent)}
.tp-is-typing .tp-reading{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
[data-tp-reading]{cursor:text}

/* ── 2026-09-29 연습판 재배치: 지문 → 입력창을 바로 붙이고 나머지는 입력창 아래로 ──
   모바일 화면 키보드가 올라와도 지문과 입력창이 함께 보여야 한다(운영자 보고).
   app.js 가 입력 중 visualViewport 높이에 맞춰 --tp-lines-max 를 넣어 지문 창을 줄인다. */
[data-tp-speed]>.toolhead{min-height:0!important;padding-top:18px!important;padding-bottom:18px!important;margin-bottom:14px}
[data-tp-speed]>.toolhead h1{font-size:clamp(1.3rem,2.4vw,1.8rem)!important;margin:2px 0 4px!important}
[data-tp-speed]>.toolhead .muted{margin:0}
.tp-board .tp-title{height:20px;line-height:20px;margin:0 0 6px;font-size:.78rem}
.tp-reading{position:relative}
.tp-lines{max-height:var(--tp-lines-max,none)}
.tp-reading .tp-progress{position:absolute;left:0;right:0;bottom:0;height:3px;margin:0;border-radius:0;background:transparent}
.tp-input-wrap{position:relative;margin-top:8px}
.tp-input-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.tp-board .tp-input{margin-top:0;min-height:52px;display:block}
.tp-ime-hint{position:absolute;right:10px;top:-11px;z-index:1;margin:0;padding:1px 9px;border-radius:999px;border:1px solid #e0c48f;background:#f6ecd8;color:#7a5a1e;font-size:.72rem;line-height:1.6;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.tp-ime-hint[hidden]{display:none}
.tp-board .tp-metrics.tp-metrics--near-input{margin:10px 0 6px;padding:8px 6px}
.tp-board .tp-metrics--near-input .tp-metric__value{font-size:1.3rem}
.tp-board .tp-line-status{height:auto;min-height:18px;line-height:18px;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-board .tp-key-help{margin:0}
.tp-result-slot{height:auto;min-height:196px;margin-top:12px}
.tp-result-slot>.card{height:auto}
.tp-result-slot h2{font-size:1.02rem;margin:0 0 8px}
.tp-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:8px}
.tp-result-block{padding:10px 12px;border:1px solid var(--border,#d8e1e3);border-radius:10px;min-width:0}
.tp-result-block h3{font-size:.8rem;margin:0 0 4px;color:var(--text-muted,#637584)}
.tp-result-block h3 small{display:block;font-weight:400;font-size:.7rem}
.tp-result-block p{margin:0;font-size:.84rem;line-height:1.7}
.tp-result-block strong{font-variant-numeric:tabular-nums}
.tp-result-block:first-child strong:first-child{font-size:1.25rem;color:var(--accent,#347d80)}
.tp-result-slot .tp-result-note{font-size:.7rem;color:var(--text-muted,#637584);margin:4px 0 8px}
@media(max-width:700px){
  [data-tp-speed]>.toolhead{padding:10px 14px!important;margin-bottom:10px;border-radius:14px!important}
  [data-tp-speed]>.toolhead:after{display:none}
  [data-tp-speed]>.toolhead h1{font-size:1.2rem!important;margin:0!important}
  [data-tp-speed]>.toolhead .muted,[data-tp-speed]>.toolhead .localbadge{display:none!important}
  [data-tp-speed]>.toolhead .small{margin:0;font-size:.72rem}
  .tp-practice-main>.card__body{padding:12px}
  .tp-reading{--tp-rows:4;--tp-row:2.3em;padding:6px 0;border-radius:12px;font-size:1rem}
  .tp-line{padding-left:10px;padding-right:10px}
  .tp-board .tp-input{min-height:46px;padding:10px 12px;font-size:1rem}
  .tp-input-wrap{margin-top:6px}
  /* 지표는 한 줄짜리 숫자띠로. 자세한 값은 끝낸 뒤 결과 카드에 나온다. */
  .tp-board .tp-metrics.tp-metrics--near-input{display:flex;justify-content:space-between;gap:6px;margin:6px 0 0;padding:2px 2px;border:0;border-radius:0;background:none}
  .tp-board .tp-metrics--near-input .tp-metric{display:flex;align-items:baseline;gap:3px;flex:0 1 auto;padding:0;border:0;background:none;text-align:left}
  .tp-board .tp-metrics--near-input .tp-metric::before{content:attr(data-short);font-size:.66rem;color:var(--text-muted,#637584);white-space:nowrap}
  .tp-board .tp-metrics--near-input .tp-metric__label{display:none}
  .tp-board .tp-metrics--near-input .tp-metric__value{font-size:.92rem;line-height:1.5}
  .tp-board .tp-line-status{font-size:.7rem;margin:2px 0 0;white-space:normal}
  .tp-board .tp-key-help{display:none}
  .tp-result-slot{min-height:0}
  .tp-result-grid{gap:6px}
  .tp-result-block{padding:8px}
}

/* 순위 칸 — 언어×길이 종류 탭, 기간 평균·누적, 최근 기록 스파크라인 */
/* 1200px 이상에서는 sticky 라서 화면(900px) - 헤더 오프셋(84px) 안에 들어와야 아래 저장 안내가 보인다. */
.tp-ranking{height:800px;grid-template-rows:62px 38px 70px 200px 22px minmax(0,1fr) auto 72px;gap:9px}
.tp-ranking__category{display:grid;gap:4px}
.tp-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border-radius:9px;background:var(--surface,#f2f7f7)}
.tp-seg button{padding:4px 2px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-muted,#637584);font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap}
.tp-seg button[aria-pressed=true]{background:var(--accent-soft,#e5f2ef);border-color:var(--accent,#347d80);color:var(--text,#243c47)}
.tp-seg button:focus-visible{outline:2px solid var(--accent,#347d80);outline-offset:2px}
.tp-ranking__personal-slot{padding:4px 0 0}
.tp-personal-stats span{white-space:normal;line-height:1.35;min-height:2.7em}
.tp-personal-stats em{font-style:normal}
.tp-ranking__personal-slot .tp-personal-total{font-size:.7rem;margin:4px 0 4px;line-height:1.5}
.tp-recent{display:flex;align-items:center;gap:6px;height:24px;margin:0 0 4px;font-size:.66rem;color:var(--text-muted,#637584)}
.tp-recent[hidden]{display:none}
.tp-recent svg{flex:1 1 auto;height:22px;min-width:0}
.tp-recent polyline{fill:none;stroke:var(--accent,#347d80);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tp-recent b{font-variant-numeric:tabular-nums;color:var(--text,#243c47)}
.tp-ranking__personal-slot .tp-personal-rank,.tp-ranking__personal-slot .tp-ranking__guest{margin:2px 0 4px}
.tp-ranking__criteria{font-size:.64rem}
@media(max-width:1199px){
  .tp-ranking{height:auto;grid-template-rows:none;display:flex}
  .tp-ranking__board{height:220px;flex-shrink:0}
  .tp-ranking__personal-slot{min-height:190px}
}
@media(min-width:1200px){.tp-practice-layout .tp-practice__options{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tp-ime-hint{background:#33291a;color:#e0c48f}}
:root[data-theme="dark"] .tp-ime-hint{background:#33291a;color:#e0c48f}
/* 늘 보이는 세 숫자(이번 지문·세션 평균·종합 평균)+정확도. PC 는 6칸, 모바일은 4칸 숫자띠(현재 줄·시간은 결과 카드로). */
.tp-board .tp-metrics.tp-metrics--near-input{grid-template-columns:repeat(6,minmax(0,1fr))}
.tp-metric__count{margin-left:3px;font-size:.62rem;font-weight:500;color:var(--text-muted,#637584)}
.tp-board .tp-metrics--near-input .tp-metric:first-child .tp-metric__value{color:inherit}
.tp-board .tp-metrics--near-input .tp-metric--main .tp-metric__value{color:var(--accent,#347d80)}
.tp-result-grid{grid-template-columns:1.2fr 1fr 1fr}
.tp-result-block p strong{font-size:1.15rem}
.tp-result-block--main{border-color:var(--accent,#347d80);background:var(--accent-soft,#e5f2ef)}
.tp-result-block--main p strong{font-size:1.5rem;color:var(--accent,#347d80)}
@media(max-width:700px){
  .tp-board .tp-metrics--near-input .tp-metric--line,.tp-board .tp-metrics--near-input .tp-metric--time{display:none}
  .tp-board .tp-metrics.tp-metrics--near-input{gap:4px;flex-wrap:nowrap;white-space:nowrap}
  .tp-board .tp-metrics--near-input .tp-metric::before{font-size:.62rem}
  .tp-board .tp-metrics--near-input [data-tp-overall-count]{display:none}
  .tp-board .tp-metrics--near-input .tp-metric__value{font-size:.88rem}
  .tp-metric__count{font-size:.58rem;margin-left:1px}
  .tp-board .tp-metrics.tp-metrics--near-input{column-gap:8px}
  .tp-result-grid{grid-template-columns:1fr 1fr}
  .tp-result-block--main{grid-column:1/-1}
  .tp-result-block p{font-size:.74rem}
  .tp-result-block p strong{font-size:1rem}
  .tp-result-block--main p strong{font-size:1.2rem}
  .tp-result-block h3{font-size:.72rem}
}
@media(min-width:701px){.tp-board .tp-metrics--near-input .tp-metric{border:0;border-left:1px solid var(--border,#d8e1e3);border-radius:0;background:none;padding:0 8px}.tp-board .tp-metrics--near-input .tp-metric:first-child{border-left:0}.tp-board .tp-metrics--near-input .tp-metric__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}