/* ============================================================
   study-edit.css — 공부끝판왕 마감 손질 (2026-08-15 · LG-총괄)

   ★ 이 파일이 왜 생겼나
     index.html 이 이 파일을 링크하는데 **파일이 없었습니다.** 매 방문마다 404 가 한 번씩 났습니다.
     링크를 지우는 대신, 이 사이트에 필요한 손질을 여기 담아 404 를 없앱니다.

   ★ 이 사이트의 상태 (6개 북플랫폼 실측 비교)
     모서리 12~18px · 그림자 실사용 · 회색 9단계 — **디자인 완성도는 6개 중 최고**였습니다.
     그런데 Pretendard 웹폰트가 안 실려 윈도우에서 맑은 고딕으로 떨어지고 있었습니다.
     (그건 index.html 에서 고쳤습니다)

   ★ 그래서 여기서는 글자만 만집니다
     레이아웃·색·구조는 건드리지 않습니다. 이미 좋습니다.
     한글은 자간을 조금 좁히고 숫자를 고정폭으로 두면 훨씬 단정해집니다.
   ============================================================ */

/* 한글 제목은 자간이 넓으면 흩어져 보입니다. 크기가 클수록 더 좁힙니다. */
h1, .h1, .hero-title { letter-spacing: -.45px; }
h2, .h2             { letter-spacing: -.35px; }
h3, h4, .card-title { letter-spacing: -.25px; }

/* 본문은 반대로 아주 살짝 벌려야 읽힙니다 */
p, li, .desc, .muted { letter-spacing: -.05px; }

/* 숫자는 고정폭으로 — 점수·기간·개수가 바뀔 때 글자가 덜컹거리지 않습니다 */
.num, .stat, .score, .count, .kpi, time,
[class*="-num"], [class*="-count"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 줄바꿈 — 한국어는 단어 중간에서 끊기면 읽기 어렵습니다 */
h1, h2, h3, .card-title, .lead { word-break: keep-all; overflow-wrap: anywhere; }

/* 긴 문단은 한 줄이 너무 길면 눈이 되돌아올 자리를 잃습니다 */
.lead, .desc, article p { max-width: 68ch; }

/* 키보드로 다니는 사람에게 지금 어디인지 분명히 보이게.
   outline:none 만 있고 대체 표시가 없는 곳이 흔한 실수입니다. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2a78d6;
  outline-offset: 2px;
  border-radius: 8px;
}

/* 누를 수 있는 것은 44px 이상 — 손가락으로 눌러야 합니다 */
@media (pointer: coarse) {
  button, .btn, a.btn, [role="button"] { min-height: 44px; }
}

/* 움직임을 불편해하는 분들 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}