[DONE] 폰에서 저널 글 안 두 줄 제목이 1.15 대신 1.25 로 서서 덜 붙는다

web/src/app/globals.css

@@ -1908,6 +1908,14 @@
       word-break: keep-all;
       overflow-wrap: break-word;
     }
+    /* The letters of a heading's two lines stand at least 0.2em apart, as a
+       title's do. At 1.15 the five two-line headings, all English at 19px,
+       were 1.9 to 2.9px apart at 390. The archive's titles keep 1.25. */
+    .journal-reading h1,
+    .journal-reading h2,
+    .journal-reading h3 {
+      line-height: 1.25;
+    }
     .journal-reading h1,
     .journal-reading h2 {
       font-size: 19px;

web/src/components/journal/journalCss.test.ts

@@ -565,3 +565,28 @@ describe("journal first post on a phone", () => {
     expect(value).toBeLessThanOrEqual(1.4);
   });
 });
+
+// Below 721px the headings in a post set their lines 1.15 apart. On 28 October
+// the five two-line headings in the 74 posts, all English and all 19px Inter,
+// had 1.9 to 2.9px between the letters of one line and the next at 360 and 390
+// ("The question — stop everything and / throw myself in?").
+
+describe("journal headings in a post on a phone", () => {
+  const desktop = rules(withoutMedia(css));
+  const phone = mediaBlocks(css, "(max-width: 720px)").flatMap(rules);
+  const last = (selector: string, property: string) => {
+    const from = (list: ReturnType<typeof rules>) =>
+      list
+        .filter((r) => r.selectors.includes(selector))
+        .map((r) => declaration(r.body, property))
+        .filter(Boolean)
+        .at(-1);
+    return from(phone) ?? from(desktop);
+  };
+
+  it.each([".journal-reading h2", ".journal-reading h3"])("keeps the lines of %s 1.2 to 1.4 apart", (heading) => {
+    const value = Number(last(heading, "line-height"));
+    expect(value).toBeGreaterThanOrEqual(1.2);
+    expect(value).toBeLessThanOrEqual(1.4);
+  });
+});