/* 읽기용 글꼴 — 본문 화면에서 고르고, 집중 모드가 그 값을 그대로 따라온다.
 *
 * 집중 모드는 본문 요소 바깥(body 직속)에 그려지므로 CSS 로는 값이 닿지 않는다.
 * `focus-mode.js` 가 본문의 실제 글꼴을 읽어 오버레이에 옮긴다 —
 * `:has()` 같은 선택자에 기대지 않으므로 브라우저를 가리지 않는다.
 *
 * 읽기용 바탕체·명조는 구글 폰트에서 받는다(base.html). 한글 글꼴은 통째로 받으면
 * 수 MB 지만, 구글이 유니코드 구간별로 잘라 주어 화면에 실제로 나온 글자의 조각만
 * 내려온다. 화면 글자(Pretendard)는 같은 방식으로 **우리가** 잘라 들고 있다.
 */

:root {
  /* 화면 글자 — 단추·목록·표. 자체 호스팅(`pretendard.css`). */
  --font-ui: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
             'Malgun Gothic', sans-serif;

  --font-system: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic',
                 'Noto Sans KR', sans-serif;
  --font-gowun: 'Gowun Batang', 'Apple SD Gothic Neo', serif;
  --font-serif: 'Noto Serif KR', 'Apple SD Gothic Neo', serif;
  /* 고딕인데 기본 고딕보다 글자 폭이 고르고 획이 곧다 — 화면에서 또렷하다.
     이름은 '모던'. 쓰는 사람에게는 글꼴 이름이 아니라 **느낌**이 이름이다. */
  --font-plex: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

/* 긴 글을 오래 읽는 자리라 바탕체를 기본으로 둔다. */
.bible-content { font-family: var(--font-gowun); }

.bible-content.font-system { font-family: var(--font-system); }
.bible-content.font-gowun { font-family: var(--font-gowun); }
.bible-content.font-serif { font-family: var(--font-serif); }
.bible-content.font-plex { font-family: var(--font-plex); }

/* 제목도 본문과 같은 글꼴로 둔다 — 두 글꼴이 섞이면 산만하다. 굵기로만 가른다. */
.bible-content h1,
.bible-content h2,
.bible-content h3,
.bible-content h4 { font-family: inherit; }