From a10158066a7c735da30d384dae5c3fefd79e4f3d Mon Sep 17 00:00:00 2001
From: bits-bytes-nn <aldente0630@gmail.com>
Date: Sun, 11 Oct 2026 18:59:52 +0900
Subject: [PATCH] fix(template): left-align the card title beside the logo; one
 title face

Raise the card title to 1.75rem (1.375rem on narrow screens) and give the
issue title, card titles, summary headings and the resources heading one
shared title rule. Meta and tags stay centered.
---
 app/templates/_styles.html       | 20 +++++++++++++-------
 app/templates/main_contents.html |  2 +-
 docs/CHANGELOG.md                |  2 +-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/templates/_styles.html b/app/templates/_styles.html
index 9f34f1a..df452dc 100644
--- a/app/templates/_styles.html
+++ b/app/templates/_styles.html
@@ -38,7 +38,6 @@
      issue, which cost tens of KB against the mail-client clip budget. If a
      client ignores <style>, text falls back to the client default — still
      perfectly legible, so the degradation is graceful. */
-  .card-title,
   .muted,
   .lede,
   .card-body,
@@ -46,13 +45,21 @@
   .resources {
     font-family: "Pretendard", "Inter", system-ui, sans-serif;
   }
-  .card-title {
+  /* One title face for every heading: the issue title, the card titles, the
+     summary's section headings and the resources heading. */
+  .hero-title,
+  .card-title,
+  .card-body h3,
+  .resources-title {
+    font-family: "Pretendard", "Inter", system-ui, sans-serif;
     font-weight: 700;
-    color: #16191f;
-    font-size: 1.5rem;
-    line-height: 1.35;
     letter-spacing: -0.02em;
   }
+  .card-title {
+    color: #16191f;
+    font-size: 1.75rem;
+    line-height: 1.3;
+  }
   .muted {
     color: #6c757d;
     font-size: 0.875rem;
@@ -157,7 +164,6 @@
     margin: 0;
   }
   .resources-title {
-    font-weight: 700;
     margin-bottom: 10px;
   }
   .resources {
@@ -244,7 +250,7 @@
       font-size: 1.5rem !important;
     }
     .card-title {
-      font-size: 1.25rem !important;
+      font-size: 1.375rem !important;
     }
     .thumb {
       width: 40px !important;
diff --git a/app/templates/main_contents.html b/app/templates/main_contents.html
index 63e3541..32fdcbc 100644
--- a/app/templates/main_contents.html
+++ b/app/templates/main_contents.html
@@ -24,7 +24,7 @@
                   alt="{{ article.source_label ~ ' logo' if article.source_label else '' }}"
                 />
               </td>
-              <td valign="middle" style="text-align: center">
+              <td valign="middle" style="text-align: left">
                 <div class="card-title">{{ article.title }}</div>
               </td>
             </tr>
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index f35f13f..3b93281 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -577,7 +577,7 @@
   `min-width: 800px` 요소와 고정 폭 표가 390px 화면에서도 문서 폭을 800px로 잡아, 기기가 전체를
   약 절반 크기로 줄였습니다. 본문 열을 `max-width` 유동 폭으로 바꿨습니다. 같은 점검에서 흰 배경
   위 주황 링크와 흰 글씨 버튼의 명암비가 2.1:1이라 링크 색과 버튼 글자색을 바꿨고, 캡션이 본문
-  단락처럼 보이던 `<figure>` 스타일과 32px 카드 제목을 정리했습니다. 카드 머리(제목·날짜·태그)를 한때 왼쪽으로 맞췄다가, 기존의 가운데 정렬이 낫다는 의견에 따라 되돌렸고 본문과 리드만 왼쪽 정렬입니다.
+  단락처럼 보이던 `<figure>` 스타일과 32px 카드 제목을 정리했습니다. 날짜와 태그는 가운데, 카드 제목은 로고 옆 왼쪽 정렬이며, 제목은 28px로 키우고 호 제목·카드 제목·요약 소제목·참고 자료 제목을 한 제목체 규칙(굵기 700, 자간 -0.02em)으로 묶었습니다. 본문과 리드는 왼쪽 정렬입니다.
 
 ## 오케스트레이션, 알림, 전달