[DONE] 폰에서 저널 첫 글 제목이 낱말째로 꺾이고 줄 사이가 1.2 로 선다

web/src/app/globals.css

@@ -1861,8 +1861,15 @@
     .journal-section-label {
       font-size: 25px;
     }
+    /* The archive's first post is always the newest, so its title changes
+       with each post. With each of the 74 titles put there, three of the
+       four Korean ones on two lines at 360 broke inside a word, and the
+       letters of three English ones on two lines were 2.2px apart. */
     .journal-featured h1 {
       font-size: 36px;
+      line-height: 1.2;
+      word-break: keep-all;
+      overflow-wrap: break-word;
     }
     .journal-featured {
       grid-template-columns: 1fr;

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

@@ -532,3 +532,36 @@ describe("journal cover captions on a phone", () => {
     expect(last(caption, "overflow-wrap")).toMatch(/^(break-word|anywhere)$/);
   });
 });
+
+// Below 721px the archive's first post set its 36px title 1.06 apart and broke
+// Korean wherever the line ran out. No post sets `featured`, so the first post
+// is always the newest one. On 28 October, with each of the 74 titles put in
+// its place, three of the four Korean titles on two lines at 360 broke inside
+// a word ("성공과 실 / 패: 다음 단계"), and three English titles on two lines
+// had 2.2px between the letters of one line and the next.
+
+describe("journal first 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);
+  };
+  const title = ".journal-featured 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);
+  });
+});