style: mono data font, compact actions, polish, favicon; slow status poll to 30s

- JetBrains Mono(로컬 동봉) → 저장소명/버전/패키지수/시각 등 영문·숫자 데이터에 적용
- 동기화/배포 버튼 컴팩트(btn-sm) + 액션 셀 높이 고정(row-action)으로 행 점프 제거
- 표 행 높이/hover, 요약 카드 강조(동기화중=blue, GPG통과=mint) + hover, 버튼 누름 피드백
- 연결 상태 폴링 10s → 30s
- SVG favicon (Toss blue 라운드 사각 + 스냅샷 레이어)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/static/app.css

@@ -8,6 +8,13 @@
   font-display: swap;
   src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations");
 }
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 100 800;
+  font-style: normal;
+  font-display: swap;
+  src: url("/static/fonts/JetBrainsMono.woff2") format("woff2-variations");
+}
 
 :root {
   /* palette (design-ref §2) */
@@ -25,12 +32,13 @@
   --accent-hover: #1b64da;
   --accent-deep: #1e40af;
   --accent-soft: #e8f3ff;
-  /* 밝은 상태색은 옅은 배경 위 대비 위해 텍스트용으로 약간 어둡게 */
   --success-text: #00a37a;
   --warning-text: #c5700a;
   --danger: #f04452;
 
   --radius-card: 12px;
+  /* 영문/숫자(저장소명·버전·패키지수·시각)는 모노 — 도구다운 가독성 (design-ref §3) */
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 
   /* Pico 매핑 */
   --pico-font-family-sans-serif: "Pretendard Variable", -apple-system,
@@ -38,7 +46,7 @@
     system-ui, sans-serif;
   --pico-font-family: var(--pico-font-family-sans-serif);
   --pico-line-height: 1.55;
-  --pico-border-radius: 7px; /* 버튼/인풋 (design-ref §4) */
+  --pico-border-radius: 7px;
   --pico-background-color: var(--bg-alt);
   --pico-color: var(--text-secondary);
   --pico-h1-color: var(--text);
@@ -58,11 +66,12 @@
 body {
   background: var(--bg-alt);
   color: var(--text-secondary);
+  -webkit-font-smoothing: antialiased;
 }
 
 main.container {
   max-width: 1040px;
-  padding-block: 32px;
+  padding-block: 40px;
 }
 
 h1,
@@ -70,32 +79,37 @@ h2,
 h3 {
   color: var(--text);
   font-weight: 700;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
 }
 h2 {
-  font-size: 20px;
+  font-size: 22px;
   margin: 0;
 }
 
 section {
-  margin-bottom: 40px;
+  margin-bottom: 44px;
 }
 
-/* 상단 내비 (design-ref §4 web top nav: white, 1px bottom border) */
+.mono {
+  font-family: var(--font-mono);
+  font-feature-settings: "tnum" 1;
+}
+
+/* 상단 내비 */
 .app-nav {
   background: var(--bg);
   border-bottom: 1px solid var(--border);
 }
 .app-nav .container {
   max-width: 1040px;
-  padding-block: 16px;
+  padding-block: 18px;
 }
 .app-nav .brand {
   margin: 0;
-  font-size: 17px;
+  font-size: 18px;
   font-weight: 700;
   color: var(--text);
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
 }
 .app-nav .brand .accent {
   color: var(--accent);
@@ -105,7 +119,46 @@ section {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
+}
+
+/* 버튼 — Toss: radius 7, weight 600, 누름 피드백 scale(0.98) (design-ref §4·§6) */
+button,
+[role="button"] {
+  font-weight: 600;
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease,
+    transform 0.096s ease;
+}
+button:active,
+[role="button"]:active {
+  transform: scale(0.98);
+}
+button.secondary,
+[role="button"].secondary,
+a.secondary {
+  --pico-background-color: var(--surface-2);
+  --pico-border-color: var(--surface-2);
+  --pico-color: var(--accent-hover);
+  font-weight: 600;
+}
+button.danger,
+[role="button"].danger {
+  --pico-background-color: var(--danger);
+  --pico-border-color: var(--danger);
+  --pico-color: #ffffff;
+}
+button:disabled,
+[role="button"]:disabled {
+  opacity: 0.45;
+}
+/* 표 안 액션 버튼: 컴팩트 */
+.btn-sm {
+  padding: 7px 14px;
+  font-size: 13px;
+  margin: 0;
+  width: auto;
 }
 
 /* 요약 카드 */
@@ -119,24 +172,36 @@ section {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-card);
-  padding: 20px;
+  padding: 20px 22px;
   box-shadow: 0 1px 3px rgba(25, 31, 40, 0.04);
+  transition: border-color 0.12s ease;
+}
+.summary .card:hover {
+  border-color: var(--border-strong);
 }
 .summary .value {
-  font-size: 32px;
-  font-weight: 700;
+  font-family: var(--font-mono);
+  font-size: 34px;
+  font-weight: 600;
   color: var(--text);
   line-height: 1.1;
-  font-variant-numeric: tabular-nums; /* 숫자 정렬 (design-ref §3) */
+  letter-spacing: -0.02em;
+  font-feature-settings: "tnum" 1;
+}
+.summary .value.is-accent {
+  color: var(--accent);
+}
+.summary .value.is-success {
+  color: var(--success-text);
 }
 .summary .label {
-  margin-top: 6px;
+  margin-top: 8px;
   font-size: 13px;
   font-weight: 500;
   color: var(--text-muted);
 }
 
-/* 저장소 표 (카드로 감싸기, hairline 행) */
+/* 표 (카드로 감싸기, hairline 행, hover) */
 .table-card {
   background: var(--bg);
   border: 1px solid var(--border);
@@ -152,29 +217,50 @@ section {
   font-weight: 600;
   color: var(--text-dim);
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.04em;
+  background: var(--bg-alt);
   border-bottom: 1px solid var(--border);
+  padding-block: 14px;
 }
 .table-card tbody td {
+  height: 56px;
   border-bottom: 1px solid var(--border);
-  padding-block: 16px;
+  padding-block: 12px;
   vertical-align: middle;
 }
 .table-card tbody tr:last-child td {
   border-bottom: none;
 }
-.repo-name {
+.table-card tbody tr:hover {
+  background: var(--bg-alt);
+}
+.repo-name a {
+  font-family: var(--font-mono);
   font-weight: 600;
   color: var(--text);
+  text-decoration: none;
 }
-.num {
-  font-variant-numeric: tabular-nums;
+.repo-name a:hover {
+  color: var(--accent);
+}
+/* 숫자/버전/시각: 모노 + tabular */
+.num,
+.mono {
+  font-family: var(--font-mono);
+  font-feature-settings: "tnum" 1;
 }
 td.num,
 th.num {
   text-align: right;
 }
 
+/* 액션 셀: swap(버튼→진행률) 시 행 높이 안 흔들리게 고정 */
+.row-action {
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+}
+
 /* 검증 배지 칩 (dot + 라벨, 이모지 없음) */
 .badge {
   display: inline-flex;
@@ -219,6 +305,7 @@ th.num {
 }
 .verify-detail small {
   color: var(--text-muted);
+  font-family: var(--font-mono);
 }
 
 /* 패키지 증감 */
@@ -229,35 +316,12 @@ th.num {
   color: var(--danger);
 }
 
-/* 보조 버튼: 틴티드 블루 (design-ref §4 two-step blue) */
-button.secondary,
-[role="button"].secondary,
-a.secondary {
-  --pico-background-color: var(--surface-2);
-  --pico-border-color: var(--surface-2);
-  --pico-color: var(--accent-hover);
-  font-weight: 500;
-}
-button:disabled,
-[role="button"]:disabled {
-  opacity: 0.45;
-}
-
-/* 위험 버튼: 배포 확정 등 확인 모달에서만 (design-ref §4) */
-button.danger,
-[role="button"].danger {
-  --pico-background-color: var(--danger);
-  --pico-border-color: var(--danger);
-  --pico-color: #ffffff;
-  font-weight: 500;
-}
-
 /* 동기화 진행률 바 */
 .sync-progress {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  min-width: 160px;
+  gap: 5px;
+  min-width: 150px;
 }
 .sync-progress progress {
   margin: 0;
@@ -265,27 +329,34 @@ button.danger,
 }
 .sync-progress small {
   color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
 }
 
-/* 연결 상태 표시 (dot + 텍스트) */
+/* 연결 상태 칩 (dot + 텍스트) */
 .status-line {
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  padding: 6px 12px;
+  border-radius: 999px;
   font-weight: 500;
+  background: var(--surface);
 }
 .status-line::before {
   content: "";
-  width: 9px;
-  height: 9px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background: currentColor;
 }
 .status-ok {
   color: var(--success-text);
+  background: rgba(0, 200, 150, 0.1);
 }
 .status-bad {
   color: var(--danger);
+  background: rgba(240, 68, 82, 0.1);
 }
 .status-loading {
   color: var(--text-muted);

app/static/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#3182f6"/>
+  <g fill="#ffffff">
+    <rect x="8" y="9" width="16" height="4" rx="2"/>
+    <rect x="8" y="14.5" width="16" height="4" rx="2" opacity="0.7"/>
+    <rect x="8" y="20" width="16" height="4" rx="2" opacity="0.45"/>
+  </g>
+</svg>

app/templates/base.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}Pulp 패치 관리 콘솔{% endblock %}</title>
+  <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
   <!-- 정적 자산은 폐쇄망 대비 local 동봉 (CDN 의존 금지, 스펙 §9) -->
   <link rel="stylesheet" href="/static/pico.min.css">
   <link rel="stylesheet" href="/static/app.css">

app/templates/dashboard.html

@@ -4,7 +4,7 @@
 <section>
   <h2>상태</h2>
   <!-- 로드 시 1회 + 10초마다 Pulp 연결 상태 폴링 -->
-  <div hx-get="/pulp-status" hx-trigger="load, every 10s" hx-swap="innerHTML" style="margin-top:12px;">
+  <div hx-get="/pulp-status" hx-trigger="load, every 30s" hx-swap="innerHTML" style="margin-top:12px;">
     <span class="status-line status-loading">연결 확인 중…</span>
   </div>
 </section>

app/templates/partials/repo_list.html

@@ -4,8 +4,8 @@
   {% else %}
     <div class="summary">
       <div class="card"><div class="value">{{ summary.total }}</div><div class="label">전체 저장소</div></div>
-      <div class="card"><div class="value">{{ summary.syncing }}</div><div class="label">동기화 중</div></div>
-      <div class="card"><div class="value">{{ summary.gpg_pass }}</div><div class="label">GPG 검증 통과</div></div>
+      <div class="card"><div class="value{% if summary.syncing %} is-accent{% endif %}">{{ summary.syncing }}</div><div class="label">동기화 중</div></div>
+      <div class="card"><div class="value is-success">{{ summary.gpg_pass }}</div><div class="label">GPG 검증 통과</div></div>
       <div class="card"><div class="value">{{ summary.total_packages }}</div><div class="label">총 패키지</div></div>
     </div>
 
@@ -29,10 +29,10 @@
             <td><span class="badge badge-{{ repo.gpg.level }}">{{ repo.gpg.label }}</span></td>
             <td class="num">{% if repo.latest_version is not none %}v{{ repo.latest_version }}{% else %}—{% endif %}</td>
             <td class="num">{% if repo.package_count is not none %}{{ repo.package_count }}{% else %}—{% endif %}</td>
-            <td>{{ repo.last_sync or "—" }}</td>
+            <td class="mono">{{ repo.last_sync or "—" }}</td>
             <td>
-              <div id="sync-{{ repo.uuid }}">
-                <button class="secondary"
+              <div id="sync-{{ repo.uuid }}" class="row-action">
+                <button class="secondary btn-sm"
                         hx-post="/repos/{{ repo.uuid }}/sync"
                         hx-target="#sync-{{ repo.uuid }}"
                         hx-swap="innerHTML"

app/templates/partials/version_list.html

@@ -16,7 +16,7 @@
       {% for v in versions %}
       <tr>
         <td class="num">v{{ v.number }}</td>
-        <td>{{ v.created or "—" }}</td>
+        <td class="mono">{{ v.created or "—" }}</td>
         <td class="num">{{ v.package_count }}</td>
         <td class="num">
           {%- if v.added %}<span class="delta-add">+{{ v.added }}</span>{% endif -%}
@@ -29,11 +29,11 @@
           {% if v.is_deployed %}
             {# 배포 상태 칸에 배지 표시 #}
           {% elif v.deployable %}
-          <button class="secondary"
+          <button class="secondary btn-sm"
                   hx-get="/repos/{{ uuid }}/deploy/confirm?version_href={{ v.href | urlencode }}"
                   hx-target="#modal" hx-swap="innerHTML">이 버전 배포</button>
           {% else %}
-          <button class="secondary" disabled title="검증을 통과하지 못해 배포할 수 없습니다">이 버전 배포</button>
+          <button class="secondary btn-sm" disabled title="검증을 통과하지 못해 배포할 수 없습니다">이 버전 배포</button>
           {% endif %}
         </td>
       </tr>