/* =====================================================================
   오타 히트맵 전용 화면 — typo-heatmap.css
   ---------------------------------------------------------------------
   [2026-10-07] 새 시안대로 다시 짰다. 목표는 하나 —
     '어느 자리가 약한지 바로 보이고, 그 자리 연습으로 바로 넘어가게'.
     화면 순서: 머리 → 요약 3장 → 키보드(7) : 자리 패널(3) → 추천 훈련 → 변화 추이

   지키는 규칙
     · 이 파일의 이름은 모두 .th- 로 시작하고 .th-page 안에서만 쓴다. 공용 파일은 건드리지 않는다.
     · 카드는 흰 면 + 1px 테두리, 그림자 없음. 강조색은 제품 보라(#6c5ce7) 하나.
       오타 많고 적음만 호박색→주황 5단계로 칠한다.
     · 글자: 사장님은 작은 글자를 아주 싫어하신다. 시안(11~13px)보다 키웠다.
       본문 15px 이상, 보조 14px 이상, 아주 작은 꼬리표·키 글자·그래프 숫자도 13px 이상.
       바꾸기 전 화면의 같은 역할 글자보다 작아지지 않게 맞췄다.
       굵기는 100 단위, 자간은 정해 둔 단계만(typography-scale-test.js).
   ===================================================================== */

.th-page {
  --th-accent: #6c5ce7;
  --th-accent-strong: #5a4bd4;
  --th-accent-ink: #4c3fd6;
  --th-accent-soft: #f0edff;
  --th-accent-line: #d5d0ff;
  --th-ink: #182235;
  --th-ink-2: #2b3245;
  --th-ink-3: #5b6474;
  /* 시안의 라벨색(#98A2B3)은 흰 바탕에서 너무 흐려 한 단계 진하게 쓴다. */
  --th-faint: #727b8c;
  --th-line: #ececf3;
  --th-line-2: #efeff5;
  --th-soft: #f4f5f8;
  --th-canvas: #f5f7fb;
  --th-hot: #b45309;
  --th-good: #2f8a5c;
  --th-ring: rgba(91, 75, 232, .32);

  /* 오타 없음 · 표본 부족 · 히트 5단계 (면 / 테두리 / 글자) */
  --th-zero-bg: #ffffff; --th-zero-line: #e4e7ee; --th-zero-ink: #4b5563;
  --th-low-bg: #f4f5f8;  --th-low-line: #c9cfda;  --th-low-ink: #7d8696;
  --th-h1: #fff6e9; --th-h1-line: #f0e1c6; --th-h1-ink: #7a5a1e;
  --th-h2: #ffe7c4; --th-h2-line: #efd2a3; --th-h2-ink: #7a4a10;
  --th-h3: #ffce8e; --th-h3-line: #e9b267; --th-h3-ink: #6b3a08;
  --th-h4: #fba85c; --th-h4-line: #de8d3c; --th-h4-ink: #472304;
  --th-h5: #ee6c1e; --th-h5-line: #d25c13; --th-h5-ink: #fff7ee;
}

body:has(.th-page) { background: #f5f7fb; }

.main-content.th-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px clamp(20px, 2.4vw, 40px) 48px;
  background: var(--th-canvas);
  color: var(--th-ink-2);
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* [2026-11-03] 1320px 로 묶어 두었더니 1920 모니터에서 양옆이 180px 씩 비었다(사장님: "가로 여백이 너무 남는다").
   보통 큰 모니터(1920)에서는 옆 메뉴를 뺀 폭을 다 쓰고, 그보다 더 넓은 화면에서만 멈춘다. */
.th-page > * {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  min-width: 0;
}

.th-page p { margin: 0; }
.th-page h1, .th-page h2, .th-page h3 { margin: 0; }

.th-page :is(button, a, select, input, [tabindex]):focus-visible {
  outline: 3px solid var(--th-ring);
  outline-offset: 2px;
}

/* [2026-10-07 사장님] 사이트 공통 '문의 메일 보내기' 줄이 카드에 너무 가까웠다(다른 화면).
   여기서는 처음부터 카드와 넉넉히 띄운다. */
.th-page > footer.contact-mail-footer { margin: 80px auto 8px; }

/* ── 단추 ─────────────────────────────────────────────────────────── */
.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.th-btn-p { background: var(--th-accent); color: #fff; }
.th-btn-p:hover { background: var(--th-accent-strong); }
.th-btn-s { background: #fff; border-color: #cbd5e1; color: #344054; }
.th-btn-s:hover { background: #faf9ff; border-color: var(--th-accent-line); color: var(--th-accent-strong); }
.th-btn:disabled { background: #e7e9f0; border-color: #e7e9f0; color: #727b8c; cursor: not-allowed; }

.th-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--th-accent-strong);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.th-text-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

.th-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--th-accent-line);
  background: var(--th-accent-soft);
  color: var(--th-accent-strong);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.th-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--th-soft);
  font-size: 18px;
  line-height: 1;
}

.th-loading,
.th-empty {
  color: var(--th-faint);
  font-size: 15px;
  line-height: 1.6;
}
.th-loading { padding: 28px 8px; text-align: center; }
.th-empty { padding: 14px 16px; border-radius: 12px; background: #fafafd; border: 1px dashed #dfe3ec; }
.th-error { color: #b42318; }

/* ── 머리 ─────────────────────────────────────────────────────────── */
.th-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.th-head-copy { min-width: 0; flex: 1 1 360px; }
.th-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--th-faint);
  font-size: 14px;
  font-weight: 600;
}
.th-crumb b { color: var(--th-ink-3); font-weight: 600; }
.th-page h1.th-title {
  color: var(--th-ink);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.2;
}
.th-lead {
  margin-top: 8px !important;
  color: var(--th-ink-3);
  font-size: 17px;
  line-height: 1.55;
}

.th-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.th-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.th-filter > span { color: var(--th-faint); font-size: 14px; font-weight: 600; }
.th-filter select {
  min-height: 44px;
  padding: 0 34px 0 12px;
  border: 1px solid #dfe5ef;
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  appearance: none;
  color: #344054;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.th-filter select:hover { border-color: var(--th-accent-line); }

/* ── 요약 3장 ─────────────────────────────────────────────────────── */
.th-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.th-sum {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--th-line);
  border-radius: 16px;
  background: #fff;
}
.th-sum.is-focus { border-color: #ddd6f7; background: #fcfbff; }
.th-sum-h { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.th-sum-label { color: var(--th-faint); font-size: 15px; font-weight: 600; }
.th-sum-val {
  color: var(--th-ink-2);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.th-sum-val.good-txt { color: var(--th-good); }
.th-sum-val.bad-txt { color: #b42318; }
.th-sum-name-row { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.th-sum-name {
  color: #2c2550;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.th-sum-rate { color: var(--th-hot); font-size: 19px; font-weight: 700; font-style: normal; }
.th-sum-wait { color: #2c2550; font-size: 20px; font-weight: 700; line-height: 1.35; }
.th-sum-sub { color: var(--th-ink-3); font-size: 15px; line-height: 1.55; }
.th-sum-sub b { color: var(--th-ink-2); font-weight: 700; }
.th-sum-foot { margin-top: auto; padding-top: 10px; }
.th-sum-foot .th-btn { width: 100%; }

/* ── 카드 공통 ────────────────────────────────────────────────────── */
.th-card {
  min-width: 0;
  border: 1px solid var(--th-line);
  border-radius: 16px;
  background: #fff;
}
.th-card-head { display: flex; flex-direction: column; gap: 6px; }
.th-h2 {
  color: var(--th-ink);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.35;
}
.th-card-lead { color: var(--th-ink-3); font-size: 15px; font-weight: 500; line-height: 1.6; }
.th-card-lead b { color: var(--th-accent-ink); font-weight: 700; }

/* ── 키보드(7) : 자리 패널(3) ─────────────────────────────────────── */
/* [2026-11-03] 오른쪽 '취약 자리 순위' 칸을 바로 위 요약 카드 한 장('최근 변화')과 같은 폭으로 맞춘다.
   위 요약은 3칸 + 칸 사이 14px 두 번이라 한 장 폭이 (전체 - 28px) / 3 이다. 7:3 으로 나누면
   위아래 오른쪽 끝선이 어긋나 보였다. 왼쪽 키보드 칸은 나머지(위 카드 두 장 + 사이)를 쓴다. */
.th-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc((100% - 28px) / 3));
  gap: 14px;
  align-items: start;
}

.th-kb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 22px;
}
.th-kb-stage {
  padding: 16px 14px 14px;
  border: 1px solid #f1f1f7;
  border-radius: 14px;
  background: #fcfcfe;
  container-type: inline-size;
}
.th-kb-host { position: relative; border-radius: 12px; }

/* 키 크기는 --th-k 하나로 정한다. 카드 폭에 맞춰 스스로 줄어 가로로 넘치지 않는다.
   (키보드 전체 폭은 키 한 변의 약 12배다)
   [2026-11-03] 화면이 넓어진 만큼 키도 더 커지게 상한을 64px → 76px 로 올렸다.
     64px 에 멈추면 넓은 카드 안에서 키보드 양옆이 비어 보인다. */
.th-kb {
  --th-k: 44px;
  --th-k: clamp(18px, 8.1cqw, 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--th-k) * .26) calc(var(--th-k) * .2) 0;
}
.th-kb-rows { display: flex; align-items: flex-start; gap: calc(var(--th-k) * .79); }
.th-kb-half { display: flex; align-items: flex-start; gap: calc(var(--th-k) * .143); }
.th-kb-outer {
  display: flex;
  flex-direction: column;
  gap: calc(var(--th-k) * .111);
  margin-top: calc(var(--th-k) * .317);
}
.th-kb-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--th-k));
  grid-auto-rows: var(--th-k);
  gap: calc(var(--th-k) * .095);
}
.th-kb-thumb {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--th-k) * .127);
  margin-top: calc(var(--th-k) * .8);
}

.th-key {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--th-k);
  height: var(--th-k);
  padding: 0;
  border: 1.5px solid var(--th-zero-line);
  border-radius: calc(var(--th-k) * .17);
  background: var(--th-zero-bg);
  color: var(--th-zero-ink);
  font: inherit;
  /* 키 글자는 휴대폰에서도 13px 아래로 내려가지 않는다 */
  font-size: max(13px, calc(var(--th-k) * .4));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, opacity .14s ease;
}
.th-key:hover { transform: translateY(-2px); }
.th-key:disabled { cursor: default; transform: none; }
.th-kb-thumb .th-key {
  height: calc(var(--th-k) * 1.38);
  border-radius: calc(var(--th-k) * .17) calc(var(--th-k) * .17) calc(var(--th-k) * .44) calc(var(--th-k) * .44);
}
.th-kb-thumb .th-key:nth-child(1),
.th-kb-thumb .th-key:nth-child(6) { margin-top: calc(var(--th-k) * .54); }
.th-kb-thumb .th-key:nth-child(2),
.th-kb-thumb .th-key:nth-child(5) { margin-top: calc(var(--th-k) * .206); }

.th-key.is-low { background: var(--th-low-bg); border-style: dashed; border-color: var(--th-low-line); color: var(--th-low-ink); }
.th-key.b-h1 { background: var(--th-h1); border-color: var(--th-h1-line); color: var(--th-h1-ink); }
.th-key.b-h2 { background: var(--th-h2); border-color: var(--th-h2-line); color: var(--th-h2-ink); }
.th-key.b-h3 { background: var(--th-h3); border-color: var(--th-h3-line); color: var(--th-h3-ink); }
.th-key.b-h4 { background: var(--th-h4); border-color: var(--th-h4-line); color: var(--th-h4-ink); }
.th-key.b-h5 { background: var(--th-h5); border-color: var(--th-h5-line); color: var(--th-h5-ink); }
.th-key.is-dim { opacity: .22; }
.th-key.is-top { box-shadow: 0 0 0 2px var(--th-accent); }
.th-key.is-top:hover { box-shadow: 0 0 0 2px var(--th-accent), 0 6px 14px rgba(108, 78, 240, .18); }
.th-key.is-sel { opacity: 1; z-index: 2; outline: 3px solid rgba(108, 92, 231, .5); outline-offset: 3px; }
.th-key:focus-visible { outline: 3px solid var(--th-ring); outline-offset: 3px; }

/* 취약 순위 배지 — 숫자가 13px 아래로 내려가지 않게 동그라미도 함께 지킨다 */
.th-rank {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: max(20px, calc(var(--th-k) * .44));
  height: max(20px, calc(var(--th-k) * .44));
  border-radius: 999px;
  background: var(--th-accent);
  color: #fff;
  font-size: max(13px, calc(var(--th-k) * .26));
  font-weight: 700;
  line-height: 1;
}

/* 범례 · 설명 */
.th-legend-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--th-line-2);
}
.th-legend {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.th-leg { display: inline-flex; align-items: center; gap: 7px; color: var(--th-ink-3); font-size: 14px; font-weight: 500; }
.th-leg i {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--th-zero-line);
  background: #fff;
}
.th-leg.low i { background: var(--th-low-bg); border-style: dashed; border-color: var(--th-low-line); }
.th-leg.h1 i { background: var(--th-h1); border-color: var(--th-h1-line); }
.th-leg.h3 i { background: var(--th-h3); border-color: var(--th-h3-line); }
.th-leg.h5 i { background: var(--th-h5); border-color: var(--th-h5-line); }
.th-leg.top i { border-color: var(--th-accent); box-shadow: 0 0 0 2px rgba(108, 92, 231, .35); }

.th-help {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #f0eff7;
  border-radius: 12px;
  background: #f8f8fc;
  color: var(--th-ink-3);
  font-size: 15px;
  line-height: 1.7;
}
.th-help[hidden] { display: none; }
.th-help b { color: var(--th-ink-2); font-weight: 700; }

/* ── 오른쪽 자리 패널 ─────────────────────────────────────────────── */
.th-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 18px;
}
.th-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.th-side-lead { color: var(--th-ink-3); font-size: 15px; line-height: 1.6; }
.th-side-foot { color: var(--th-faint); font-size: 14px; line-height: 1.6; }

.th-rank-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.th-rank-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--th-line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.th-rank-row:hover { border-color: var(--th-accent-line); background: #fbfaff; transform: translateY(-1px); }
.th-rk {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--th-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.th-rank-list li:nth-child(2) .th-rk { background: #8e7cff; }
.th-rank-list li:nth-child(3) .th-rk { background: #a497ee; }
.th-rank-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-rank-name { color: var(--th-ink-2); font-size: 17px; font-weight: 700; line-height: 1.3; }
.th-jm { font-size: 23px; font-weight: 800; }
.th-rank-main small { color: var(--th-faint); font-size: 14px; font-weight: 500; line-height: 1.45; }
.th-rank-rate { color: var(--th-hot); font-size: 17px; font-weight: 700; white-space: nowrap; }

/* 자리 자세히 보기 */
.th-detail-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.th-cap {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--th-zero-line);
  border-radius: 14px;
  background: #fff;
  color: var(--th-zero-ink);
  font-size: 26px;
  font-weight: 700;
}
.th-cap.is-low { background: var(--th-low-bg); border-style: dashed; border-color: var(--th-low-line); color: var(--th-low-ink); }
.th-cap.b-h1 { background: var(--th-h1); border-color: var(--th-h1-line); color: var(--th-h1-ink); }
.th-cap.b-h2 { background: var(--th-h2); border-color: var(--th-h2-line); color: var(--th-h2-ink); }
.th-cap.b-h3 { background: var(--th-h3); border-color: var(--th-h3-line); color: var(--th-h3-ink); }
.th-cap.b-h4 { background: var(--th-h4); border-color: var(--th-h4-line); color: var(--th-h4-ink); }
.th-cap.b-h5 { background: var(--th-h5); border-color: var(--th-h5-line); color: var(--th-h5-ink); }
.th-detail-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-detail-name b { color: var(--th-ink-2); font-size: 31px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.th-detail-name small { color: var(--th-faint); font-size: 14px; font-weight: 500; line-height: 1.45; }
.th-detail-cmp { color: var(--th-ink-3); font-size: 15px; line-height: 1.6; }
.th-detail-cmp b { color: var(--th-ink-2); font-weight: 700; }
.th-detail-cmp b.hi { color: #b42318; }

.th-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.th-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--th-line);
  border-radius: 12px;
  background: #fcfcfe;
}
.th-metric > span { color: var(--th-faint); font-size: 14px; font-weight: 600; }
.th-metric > b { color: var(--th-ink-2); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.th-metric > b.hot { color: var(--th-hot); }
.th-metric > b u { margin-left: 2px; color: var(--th-faint); font-size: 15px; font-weight: 600; text-decoration: none; }
.th-metric > em { color: var(--th-faint); font-size: 14px; font-weight: 600; font-style: normal; }

.th-block { display: flex; flex-direction: column; gap: 8px; }
.th-block-t { color: var(--th-ink-2); font-size: 15px; font-weight: 700; }
.th-block-note { color: var(--th-faint); font-size: 14px; line-height: 1.6; }
.th-err-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.th-err {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid #f1f1f7;
  border-radius: 10px;
  background: #fbfbfc;
  color: var(--th-ink-2);
  font-size: 15px;
  font-weight: 500;
}
.th-err b { font-size: 20px; font-weight: 800; }
.th-err em { color: var(--th-hot); font-weight: 700; font-style: normal; white-space: nowrap; }
.th-ex {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 6px 2px;
  border-bottom: 1px dashed #eceef3;
  font-size: 16px;
}
.th-ex:last-child { border-bottom: 0; }
.th-ex .src { color: var(--th-ink-2); font-weight: 600; }
.th-ex .arw { color: var(--th-faint); }
.th-ex .typ { color: #b42318; }
.th-ex .cnt { margin-left: auto; color: var(--th-faint); font-size: 14px; }

.th-pos-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.th-pos-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--th-line);
  border-radius: 999px;
  background: #fff;
  color: var(--th-ink-3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.th-pos-chip:hover { border-color: var(--th-accent-line); color: var(--th-ink-2); }
.th-pos-chip.on { border-color: #c9bffb; background: var(--th-accent-soft); color: var(--th-accent-ink); font-weight: 700; cursor: default; }
.th-pos-chip u { text-decoration: none; font-weight: 700; }

.th-train-one {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--th-line);
  border-radius: 12px;
  background: #fff;
}
.th-train-one .th-tile { width: 42px; height: 42px; border-radius: 12px; }
.th-detail-cta { display: flex; gap: 8px; }
.th-detail-cta .th-btn { flex: 1 1 0; padding: 0 10px; }

/* ── 추천 훈련 ────────────────────────────────────────────────────── */
.th-train-card { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; }
.th-train-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.th-train {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--th-line);
  border-radius: 14px;
  background: #fff;
}
.th-train.on { border-color: #d8d1f5; background: #fcfbff; }
.th-train .th-tile, .th-train-one .th-tile { font-size: 20px; }
.th-train-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.th-train-body b { color: var(--th-ink-2); font-size: 17px; font-weight: 700; line-height: 1.4; }
.th-train-body small { color: var(--th-ink-3); font-size: 14px; font-weight: 500; line-height: 1.55; }
.th-train-meta { margin-top: 3px; color: var(--th-accent-ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.th-train-cta { display: flex; gap: 6px; flex: none; }
.th-train-cta .th-btn { min-height: 42px; padding: 0 14px; font-size: 15px; }

/* 맞춤 드릴 (이 화면 안에서 바로 치는 연습) */
.th-drill {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid #e6e2fb;
  border-radius: 14px;
  background: #fbfaff;
}
.th-drill-head { display: flex; flex-direction: column; gap: 4px; }
.th-drill-title { color: var(--th-ink); font-size: 17px; font-weight: 700; }
.th-drill-lead { color: var(--th-ink-3); font-size: 15px; line-height: 1.6; }
.th-words-wrap { position: relative; }
.th-words { display: flex; flex-wrap: wrap; gap: 6px; }
.th-word {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #e3e6ee;
  border-radius: 999px;
  background: #fff;
  color: var(--th-ink-2);
  font-size: 15px;
  font-weight: 500;
}
.th-word.is-wrong { border-color: #f0d9b5; background: #fff8ec; font-weight: 700; }
.th-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.th-drill-zone { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid #ebe8fb; }
.th-drill-progress { color: var(--th-ink-3); font-size: 15px; text-align: center; }
.th-drill-target { padding: 18px 10px 4px; color: var(--th-ink); font-size: 32px; font-weight: 800; text-align: center; letter-spacing: -0.02em; }
.th-drill-feedback { min-height: 24px; color: var(--th-ink-3); font-size: 15px; text-align: center; }
.th-drill-feedback.ok { color: var(--th-good); }
.th-drill-feedback.bad { color: #b42318; }
.th-drill-input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid #dcd7f7;
  border-radius: 12px;
  background: #fff;
  color: var(--th-ink);
  font: inherit;
  font-size: 20px;
  text-align: center;
}
.th-drill-input:focus { outline: none; border-color: var(--th-accent); }
.th-drill-zone .th-actions { justify-content: center; }

/* ── 변화 추이 ────────────────────────────────────────────────────── */
.th-trend { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 18px; }
.th-chart { width: 100%; min-width: 0; }
.th-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.th-chart text { font-family: inherit; font-weight: 500; }
.th-chart-note {
  padding-top: 12px;
  border-top: 1px solid var(--th-line-2);
  color: var(--th-ink-3);
  font-size: 14px;
  line-height: 1.6;
}
.th-chart-note b { color: var(--th-ink-2); font-weight: 700; }
.th-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.th-compare-box { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--th-line); border-radius: 12px; }
.th-compare-box h3 { color: var(--th-ink-2); font-size: 16px; font-weight: 700; }
.th-compare-box .th-words { gap: 6px; }
.th-compare-none { color: var(--th-faint); font-size: 15px; }

.th-note { color: var(--th-ink-3); font-size: 15px; line-height: 1.6; padding: 0 4px; }

/* ── 미리보기(잠금) — 해제 전에도 생김새는 보이게 일부만 흐린다 ──────── */
body.typo-heatmap-preview-locked #keyboardHost {
  filter: blur(7px) saturate(.92);
  transform: scale(1.01);
  pointer-events: none;
  user-select: none;
}
body.typo-heatmap-preview-locked #wrongWordChips { filter: blur(1.9px); user-select: none; }
body.typo-heatmap-preview-locked .th-rank-row :is(.th-jm, small),
body.typo-heatmap-preview-locked .th-train[data-rank] :is(b, .th-train-meta) { filter: blur(5px); user-select: none; }
body.typo-heatmap-preview-locked #drillZone { pointer-events: none; user-select: none; }
.th-preview-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid #ffd4a8;
  border-radius: 999px;
  background: #fff4e8;
  color: #8a4b12;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
}
.th-preview-lock-card {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: min(380px, calc(100% - 36px));
  padding: 24px 24px 22px;
  border: 1px solid rgba(229, 232, 230, .96);
  border-radius: 20px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 24px 50px rgba(15, 23, 42, .16);
  text-align: center;
}
.th-preview-lock-card .lock { margin-bottom: 8px; font-size: 34px; line-height: 1; }
.th-preview-lock-card h4 { margin: 0; color: #111827; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
.th-preview-lock-card p { margin: 8px 0 16px; color: #5b6474; font-size: 15px; line-height: 1.6; }
.th-preview-lock-card .hint { display: block; margin-top: 10px; color: #727b8c; font-size: 14px; line-height: 1.5; }
.th-preview-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 11px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #7c4a03;
  font-size: 13px;
  font-weight: 700;
}
.th-preview-unlock-btn {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 14px;
  background: #ff8a3d;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.th-preview-word-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
}
.th-preview-word-note { margin-top: 8px !important; color: var(--th-faint); font-size: 14px; text-align: center; }

/* ── 화면 폭에 따라 ───────────────────────────────────────────────── */
/* 메뉴가 서랍으로 바뀌어 왼쪽 위에 ☰ 단추가 뜨는 폭에서는 제목이 그 단추에 가리지 않게 위를 비운다. */
@media (max-width: 900px), (min-width: 901px) and (max-width: 1366px) and (pointer: coarse) {
  .main-content.th-page { padding-top: 70px; }
}

@media (max-width: 1180px) {
  .th-page h1.th-title { font-size: 36px; }
  .th-split { grid-template-columns: minmax(0, 1fr); }
  .th-train-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .th-summary { grid-template-columns: minmax(0, 1fr); }
  .th-preview-lock-card { position: static; transform: none; width: 100%; margin-top: 4px; }
}

@media (max-width: 900px) {
  .th-page h1.th-title { font-size: 34px; }
}

@media (max-width: 760px) {
  .main-content.th-page { gap: 14px; padding: 74px 16px 36px; }
  .th-head { flex-direction: column; align-items: stretch; }
  .th-head-copy { flex-basis: auto; }
  .th-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-filter select { width: 100%; }
  .th-kb-card, .th-side, .th-train-card, .th-trend { padding: 18px 16px; }
  .th-kb-stage { padding: 12px 6px 10px; }
  .th-train { grid-template-columns: 42px minmax(0, 1fr); }
  .th-train-cta { grid-column: 1 / -1; }
  .th-train-cta .th-btn { flex: 1 1 0; }
  .th-compare { grid-template-columns: minmax(0, 1fr); }
  .th-drill { padding: 14px; }
}

@media (max-width: 400px) {
  .th-metrics { grid-template-columns: minmax(0, 1fr); }
  .th-filters { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .th-page *,
  .th-page *::before,
  .th-page *::after { transition: none !important; animation: none !important; }
  .th-key:hover, .th-rank-row:hover { transform: none; }
}