[DONE] 폰에서 저널 그림 설명 끝 줄에 낱말 하나만 남지 않는다

web/src/app/globals.css

@@ -1898,6 +1898,14 @@
       word-break: keep-all;
       overflow-wrap: break-word;
     }
+    /* A caption sits centred under its picture, so its lines share the
+       words, as a title's do. Filled line by line, 8 of the 41 English
+       captions on two lines or more at 360 ended on one word ("A PDM mic
+       wired onto the ESP32. It / works."). No caption gains a line. */
+    .journal-hero-cover figcaption,
+    .journal-md-figure figcaption {
+      text-wrap: balance;
+    }
     /* Korean breaks between words, as English does. At 390, 2,640 of the
        4,458 line breaks in the 37 Korean posts fell inside a word. A word
        longer than the line still breaks rather than running off it.

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

@@ -590,3 +590,26 @@ describe("journal headings in a post on a phone", () => {
     expect(value).toBeLessThanOrEqual(1.4);
   });
 });
+
+// Below 721px a figure's caption, centred under its picture, filled each line
+// and left what was over on the last one. On 28 October, of the multi-line
+// English captions in the 74 posts, 8 of 41 at 360, 6 of 40 at 390 and 7 of
+// 37 at 430 ended on one word ("A PDM mic wired onto the ESP32. It / works.").
+
+describe("journal captions 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-md-figure figcaption", ".journal-hero-cover figcaption"])("balances the lines of %s", (caption) => {
+    expect(last(caption, "text-wrap")).toBe("balance");
+  });
+});