diff --git a/insta-lab/app/templates/default/card.html.j2 b/insta-lab/app/templates/default/card.html.j2
index 836c3cb..4a1c607 100644
--- a/insta-lab/app/templates/default/card.html.j2
+++ b/insta-lab/app/templates/default/card.html.j2
@@ -3,52 +3,84 @@
 <head>
 <meta charset="UTF-8">
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');
+  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
   * { margin: 0; padding: 0; box-sizing: border-box; }
-  html, body {
-    width: 1080px; height: 1350px;
-    font-family: 'Noto Sans KR', sans-serif;
+  html, body { width: 1080px; height: 1350px; }
+  body {
+    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
     background: #F7F7FA; color: #14171A;
+    -webkit-font-smoothing: antialiased;
   }
   .card {
-    width: 1080px; height: 1350px;
-    padding: 80px 72px;
-    display: flex; flex-direction: column; justify-content: space-between;
-    background: linear-gradient(180deg, #FFFFFF 0%, #F7F7FA 100%);
-    border-top: 16px solid {{ accent_color }};
+    position: relative; width: 1080px; height: 1350px; overflow: hidden;
+    padding: 96px 84px 72px;
+    display: flex; flex-direction: column;
+    background: #FFFFFF;
   }
+  .accent-bar { position: absolute; top: 0; left: 0; width: 100%; height: 14px; background: {{ accent_color }}; }
   .badge {
-    display: inline-block; padding: 8px 20px; border-radius: 999px;
+    align-self: flex-start; padding: 10px 24px; border-radius: 999px;
     background: {{ accent_color }}; color: #fff;
-    font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
+    font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
   }
+  .idx { font-size: 120px; font-weight: 800; line-height: 1; color: {{ accent_color }}; letter-spacing: -0.04em; }
+  .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
   .headline {
-    font-size: {{ 96 if page_type == 'cover' else 72 }}px;
-    font-weight: 900; line-height: 1.15; letter-spacing: -0.04em;
-    margin-top: 32px;
+    font-weight: 800; line-height: 1.18; letter-spacing: -0.04em; color: #14171A;
+    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
   }
-  .body {
-    font-size: 40px; font-weight: 400; line-height: 1.55;
-    margin-top: 40px; color: #2A2F35;
+  .cover .headline { font-size: 104px; -webkit-line-clamp: 4; }
+  .body-page .headline { font-size: 76px; -webkit-line-clamp: 3; }
+  .cta .headline { font-size: 88px; -webkit-line-clamp: 3; }
+  .sub {
+    font-size: 42px; font-weight: 400; line-height: 1.5; color: #3A4047;
+    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 8;
     white-space: pre-wrap;
   }
   .footer {
     display: flex; justify-content: space-between; align-items: center;
-    font-size: 28px; color: #6B7280; font-weight: 500;
+    font-size: 28px; color: #8A9099; font-weight: 600; margin-top: 40px;
   }
-  .cta { font-weight: 700; color: {{ accent_color }}; }
+  .cta-pill {
+    align-self: flex-start; margin-top: 8px; padding: 18px 40px; border-radius: 16px;
+    background: {{ accent_color }}; color: #fff; font-size: 40px; font-weight: 700;
+  }
+  .progress { display: flex; gap: 10px; }
+  .progress i { width: 14px; height: 14px; border-radius: 50%; background: #D8DCE0; display: inline-block; }
+  .progress i.on { background: {{ accent_color }}; }
 </style>
 </head>
 <body>
-<div class="card">
-  <div>
-    <span class="badge">{{ page_type|upper }}</span>
-    <h1 class="headline">{{ headline }}</h1>
-    <p class="body">{{ body }}</p>
-  </div>
+<div class="card {{ 'cover' if page_type=='cover' else ('cta' if page_type=='cta' else 'body-page') }}">
+  <div class="accent-bar"></div>
+
+  {% if page_type == 'cover' %}
+    <span class="badge">{{ category_label|default('') or '오늘의 이슈' }}</span>
+    <div class="content">
+      <h1 class="headline">{{ headline }}</h1>
+      <p class="sub">{{ body }}</p>
+    </div>
+  {% elif page_type == 'cta' %}
+    <div class="content">
+      <h1 class="headline">{{ headline }}</h1>
+      <p class="sub">{{ body }}</p>
+      {% if cta %}<div class="cta-pill">{{ cta }}</div>{% endif %}
+    </div>
+  {% else %}
+    <span class="idx">{{ '%02d'|format(page_no - 1) }}</span>
+    <div class="content">
+      <h1 class="headline">{{ headline }}</h1>
+      <p class="sub">{{ body }}</p>
+    </div>
+  {% endif %}
+
   <div class="footer">
-    <span>{{ page_no }} / {{ total_pages }}</span>
-    {% if cta %}<span class="cta">{{ cta }}</span>{% endif %}
+    {% if page_type == 'cover' or page_type == 'cta' %}
+      <span>{{ brand_handle|default('') }}</span><span>{{ page_no }} / {{ total_pages }}</span>
+    {% else %}
+      <div class="progress">{% for n in range(2, total_pages) %}<i class="{{ 'on' if n <= page_no }}"></i>{% endfor %}</div>
+      <span>{{ page_no }} / {{ total_pages }}</span>
+    {% endif %}
   </div>
 </div>
 </body>
