[DONE] 폰에서 두 줄이 된 저널 글 제목이 낱말째로 꺾이고 줄 사이가 벌어진다

web/src/app/globals.css

@@ -1871,8 +1871,15 @@
     .journal-index-thumb {
       width: 100%;
     }
+    /* A title on two lines breaks between words, and its lines stand apart.
+       At 390, three of the four Korean titles on two lines broke inside a
+       word ("성공과 실 / 패"), and at 1.02 the glyphs of the two lines of
+       those and of 13 English titles were 0.8px apart. */
     .journal-article-header h1 {
       font-size: 42px;
+      line-height: 1.2;
+      word-break: keep-all;
+      overflow-wrap: break-word;
     }
     .journal-article-header > p {
       font-size: 18px;

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

@@ -413,3 +413,35 @@ describe("journal words on a phone", () => {
     expect(last(".journal-reading", "overflow-wrap")).toMatch(/^(break-word|anywhere)$/);
   });
 });
+
+// Below 721px a post's 42px title broke Korean wherever its line ran out, and
+// its lines stood 1.02 apart. On 28 October, at 390, three of the four Korean
+// titles on two lines broke inside a word ("성공과 실 / 패: 다음 단계"), and
+// the two lines of those four and of 13 English titles were 0.8px apart.
+
+describe("journal titles on a phone", () => {
+  const desktop = rules(withoutMedia(css));
+  const phone = mediaBlocks(css, "(max-width: 720px)").flatMap(rules);
+  /** The value the last rule for `selector` gives `property` on a phone, the phone's own rules first. */
+  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);
+  };
+  const title = ".journal-article-header h1";
+
+  it("breaks a Korean title only between words", () => {
+    expect(last(title, "word-break")).toBe("keep-all");
+    expect(last(title, "overflow-wrap")).toMatch(/^(break-word|anywhere)$/);
+  });
+
+  it("keeps a title's lines 1.2 to 1.4 apart", () => {
+    const value = Number(last(title, "line-height"));
+    expect(value).toBeGreaterThanOrEqual(1.2);
+    expect(value).toBeLessThanOrEqual(1.4);
+  });
+});