diff --git a/app/static/app.css b/app/static/app.css
index b55177e..7b58005 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -1,5 +1,11 @@
 /* 커스텀 스타일 — design-ref.md (Toss 스타일) 기반. Pico 뒤에 로드해 변수 오버라이드.
-   폰트는 폐쇄망 대비 로컬 동봉(static/fonts), CDN 의존 없음. */
+   폰트는 폐쇄망 대비 로컬 동봉(static/fonts), CDN 의존 없음.
+
+   [재디자인 노트]
+   - 토큰(그림자/모션/포커스)을 추가해 라이트·다크가 함께 정돈되도록 함.
+   - hover/press/정렬/진행/모달 진입에 절제된 마이크로 인터랙션 추가.
+   - 확정 스타일: 요약카드=화이트+호버리프트, 표=제브라, 배포모달=중앙 경고형.
+   - 모든 모션은 prefers-reduced-motion 에서 비활성화(파일 맨 끝). */
 
 @font-face {
   font-family: "Pretendard Variable";
@@ -28,15 +34,33 @@
   --text-dim: #8b95a1;
   --border: #e5e8eb;
   --border-strong: #d1d6db;
-  --accent: #3182f6;
-  --accent-hover: #1b64da;
+  --accent: oklch(0.63 0.147 255); /* Toss Blue 계열이되 채도를 낮춰 눈부심(쨍) 완화 */
+  --accent-hover: oklch(0.55 0.16 255);
   --accent-deep: #1e40af;
   --accent-soft: #e8f3ff;
   --success-text: #00a37a;
+  --success-soft: rgba(0, 200, 150, 0.12);
   --warning-text: #c5700a;
+  --warning-soft: rgba(197, 112, 10, 0.12);
   --danger: #f04452;
+  --danger-hover: #e0313f;
+  --danger-soft: rgba(240, 68, 82, 0.1);
 
   --radius-card: 12px;
+
+  /* 그림자 — 단계형. design-ref §6: 얇은 카드 그림자 + 무거운 모달 그림자 */
+  --shadow-sm: 0 1px 2px rgba(25, 31, 40, 0.04);
+  --shadow-card: 0 1px 3px rgba(25, 31, 40, 0.05);
+  --shadow-card-hover: 0 4px 16px rgba(25, 31, 40, 0.09);
+  --shadow-modal: 0 12px 40px rgba(25, 31, 40, 0.18);
+
+  /* 모션 토큰 — 도구답게 짧고 자연스럽게 */
+  --ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --dur-fast: 0.12s;
+  --dur: 0.2s;
+  --dur-slow: 0.32s;
+  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
+
   /* 영문/숫자(저장소명·버전·패키지수·시각)는 모노 — 도구다운 가독성 (design-ref §3).
      혹시 섞이는 한글은 모노에 글리프가 없으니 한글 sans 로 폴백. */
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
@@ -48,7 +72,7 @@
     system-ui, sans-serif;
   --pico-font-family: var(--pico-font-family-sans-serif);
   --pico-line-height: 1.55;
-  --pico-border-radius: 7px;
+  --pico-border-radius: 8px;
   --pico-background-color: var(--bg-alt);
   --pico-color: var(--text-secondary);
   --pico-h1-color: var(--text);
@@ -62,7 +86,7 @@
   --pico-primary-hover-border: var(--accent-hover);
   --pico-card-background-color: var(--bg);
   --pico-card-border-color: var(--border);
-  --pico-card-box-shadow: 0 1px 3px rgba(25, 31, 40, 0.04);
+  --pico-card-box-shadow: var(--shadow-card);
   color-scheme: light;
 }
 
@@ -85,8 +109,18 @@
   --accent-deep: #2f6fd0;
   --accent-soft: #1e2b44;
   --success-text: #2ee0a8;
+  --success-soft: rgba(46, 224, 168, 0.14);
   --warning-text: #ffb454;
+  --warning-soft: rgba(255, 180, 84, 0.14);
   --danger: #ff6b78;
+  --danger-hover: #ff8591;
+  --danger-soft: rgba(255, 107, 120, 0.14);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-card-hover: 0 4px 18px rgba(0, 0, 0, 0.45);
+  --shadow-modal: 0 12px 44px rgba(0, 0, 0, 0.6);
+  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
 
   --pico-background-color: var(--bg-alt);
   --pico-color: var(--text-secondary);
@@ -101,23 +135,20 @@
   --pico-primary-hover-border: var(--accent-hover);
   --pico-card-background-color: var(--bg);
   --pico-card-border-color: var(--border);
-  --pico-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --pico-card-box-shadow: var(--shadow-card);
   --pico-form-element-background-color: var(--surface);
   --pico-form-element-border-color: var(--border);
   --pico-form-element-color: var(--text);
   --pico-progress-background-color: var(--surface);
 }
 
-body {
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
-}
-
 body {
   background: var(--bg-alt);
   color: var(--text-secondary);
   -webkit-font-smoothing: antialiased;
+  transition:
+    background-color var(--dur) ease,
+    color var(--dur) ease;
 }
 
 main.container {
@@ -131,6 +162,7 @@ h3 {
   color: var(--text);
   font-weight: 700;
   letter-spacing: -0.02em;
+  text-wrap: balance;
 }
 h2 {
   font-size: 22px;
@@ -146,18 +178,55 @@ section {
   font-feature-settings: "tnum" 1;
 }
 
-/* 상단 내비 */
+/* 공통 포커스 링 — 키보드 접근성. 마우스 클릭엔 안 뜨게 focus-visible. */
+:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* 상단 내비 — 스크롤해도 상단 고정, 미세한 그림자로 레이어 분리 */
 .app-nav {
-  background: var(--bg);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: color-mix(in srgb, var(--bg) 88%, transparent);
+  backdrop-filter: saturate(1.4) blur(10px);
   border-bottom: 1px solid var(--border);
 }
 .app-nav .container {
   max-width: 1040px;
-  padding-block: 18px;
+  padding-block: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+.app-nav .brand {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.02em;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+}
+.app-nav .brand .accent {
+  color: var(--accent);
+}
+/* 브랜드 앞 로고 마크 — 차분한 단색(그라디언트 제거로 눈부심 완화) */
+.app-nav .brand .brand-mark {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  background: var(--accent);
+  display: inline-grid;
+  place-items: center;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 800;
+  box-shadow: var(--shadow-sm);
+  flex: none;
+}
 
 /* 테마 토글 (아이콘 버튼) */
 .theme-toggle {
@@ -166,17 +235,29 @@ section {
   --pico-color: var(--text-secondary);
   width: auto;
   margin: 0;
-  padding: 7px 9px;
+  padding: 8px 10px;
   line-height: 0;
+  border-radius: 9px;
+  transition:
+    background-color var(--dur-fast) ease,
+    border-color var(--dur-fast) ease,
+    transform var(--dur-fast) var(--ease);
 }
 .theme-toggle:hover {
   --pico-background-color: var(--surface);
   --pico-border-color: var(--text-dim);
   --pico-color: var(--text);
 }
+.theme-toggle:active {
+  transform: scale(0.94);
+}
 .theme-toggle .icon {
   width: 18px;
   height: 18px;
+  transition: transform var(--dur) var(--ease);
+}
+.theme-toggle:hover .icon {
+  transform: rotate(20deg);
 }
 .theme-toggle .sun {
   display: none;
@@ -190,16 +271,6 @@ section {
 [data-theme="dark"] .theme-toggle .sun {
   display: inline-block;
 }
-.app-nav .brand {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--text);
-  letter-spacing: -0.02em;
-}
-.app-nav .brand .accent {
-  color: var(--accent);
-}
 
 .section-head {
   display: flex;
@@ -224,34 +295,66 @@ section {
   font-size: 14px;
 }
 
-/* 버튼 — Toss: radius 7, weight 600, 누름 피드백 scale(0.98) (design-ref §4·§6) */
+/* ── 버튼 — Toss: radius 7~8, weight 600, 누름 피드백 (design-ref §4·§6) ── */
 button,
 [role="button"] {
   font-weight: 600;
+  letter-spacing: -0.01em;
+  border-radius: 8px;
+  white-space: nowrap;
   transition:
-    background-color 0.12s ease,
-    border-color 0.12s ease,
-    opacity 0.15s ease,
-    transform 0.096s ease;
+    background-color var(--dur-fast) ease,
+    border-color var(--dur-fast) ease,
+    box-shadow var(--dur-fast) ease,
+    opacity var(--dur) ease,
+    transform var(--dur-fast) var(--ease);
 }
-button:active,
-[role="button"]:active {
-  transform: scale(0.98);
+button:not(:disabled):hover,
+[role="button"]:not(:disabled):hover {
+  box-shadow: var(--shadow-sm);
 }
-button.secondary,
-[role="button"].secondary,
-a.secondary {
-  --pico-background-color: var(--surface-2);
-  --pico-border-color: var(--surface-2);
-  --pico-color: var(--accent-hover);
+button:not(:disabled):active,
+[role="button"]:not(:disabled):active {
+  transform: scale(0.97);
+  box-shadow: none;
+}
+/* primary 눌림 시 더 짙은 파랑 (design-ref: pressed=accent-deep) */
+button[type="submit"]:not(.secondary):not(.ghost):not(.danger):active,
+button:not(.secondary):not(.ghost):not(.danger):not([role]):active {
+  --pico-primary-background: var(--accent-deep);
+  --pico-primary-border: var(--accent-deep);
+}
+/* 동기화 등 반복 노출 액션: 흰 배경 + 파란 글씨 + 옅은 파란 테두리.
+   표에 여러 개 떠도 번잡하지 않고, ghost(새로고침)와 확실히 구분됨.
+   Pico v2 는 `:is(button,[type=submit],[type=button],[role=button]).secondary`
+   (특정성 0,2,0)로 secondary 를 칠하므로, 같은 :is() 형태로 특정성을 맞춰
+   뒤에 로드되는 app.css 가 이기게 한다(단순 `button.secondary`=0,1,1 은 짐). */
+:is(button, [role="button"], a).secondary {
+  --pico-background-color: var(--bg);
+  --pico-border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
+  --pico-color: var(--accent);
   font-weight: 600;
 }
+/* Pico 의 secondary hover 는 `:is(button,…).secondary:is([aria-current]…,:hover,…)`
+   = 특정성 (0,4,0) 이라 어두운 배경 + 흰 글씨로 덮어쓴다. 같은 (0,4,0) :is() 형태로
+   맞춰(뒤에 로드되어 우선) 밝은 파랑 hover 를 유지한다. 글씨색(--pico-color)도
+   함께 지정하지 않으면 Pico 가 흰색으로 만들어 옅은 배경 위에서 글씨가 사라진다. */
+:is(button, [role="button"], a).secondary:hover:not(:disabled) {
+  --pico-background-color: var(--accent-soft);
+  --pico-border-color: var(--accent);
+  --pico-color: var(--accent);
+}
 button.danger,
 [role="button"].danger {
   --pico-background-color: var(--danger);
   --pico-border-color: var(--danger);
   --pico-color: #ffffff;
 }
+button.danger:not(:disabled):hover,
+[role="button"].danger:not(:disabled):hover {
+  --pico-background-color: var(--danger-hover);
+  --pico-border-color: var(--danger-hover);
+}
 /* 유틸리티(새로고침 등): 중립 ghost — 동기화(틴티드 블루)와 구분 */
 button.ghost,
 [role="button"].ghost {
@@ -263,7 +366,7 @@ button.ghost:hover,
 [role="button"].ghost:hover {
   --pico-background-color: var(--surface);
   --pico-border-color: var(--text-dim);
-  --pico-color: var(--text); /* 호버 시 글자 하얘짐 방지 */
+  --pico-color: var(--text);
 }
 /* 아이콘 + 글자 버튼 */
 .btn-icon {
@@ -277,6 +380,7 @@ button.ghost:hover,
 button:disabled,
 [role="button"]:disabled {
   opacity: 0.45;
+  cursor: not-allowed;
 }
 /* 표 안 액션 버튼: 컴팩트하되 글자는 또렷하게 */
 .btn-sm {
@@ -286,7 +390,32 @@ button:disabled,
   width: auto;
 }
 
-/* 요약 카드 */
+/* 버튼 로딩 상태 — 텍스트를 스피너로 교체. .is-loading 토글로 사용.
+   (HTMX hx-disabled-elt 로 비활성화될 때 함께 붙이면 자연스러움) */
+button.is-loading,
+[role="button"].is-loading {
+  color: transparent !important;
+  position: relative;
+  pointer-events: none;
+}
+button.is-loading::after,
+[role="button"].is-loading::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 15px;
+  height: 15px;
+  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-top-color: var(--pico-color, #fff);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── 요약 카드 ── */
 .summary {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -294,15 +423,50 @@ button:disabled,
   margin-bottom: 24px;
 }
 .summary .card {
+  position: relative;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-card);
   padding: 20px 22px;
-  box-shadow: 0 1px 3px rgba(25, 31, 40, 0.04);
-  transition: border-color 0.12s ease;
+  box-shadow: var(--shadow-card);
+  transition:
+    border-color var(--dur) ease,
+    box-shadow var(--dur) ease,
+    transform var(--dur) var(--ease);
 }
 .summary .card:hover {
   border-color: var(--border-strong);
+  box-shadow: var(--shadow-card-hover);
+  transform: translateY(-2px);
+}
+/* 카드 상단 라벨 + 아이콘 칩 한 줄 */
+.summary .card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.summary .card-ico {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  background: var(--surface);
+  color: var(--text-muted);
+  flex: none;
+}
+.summary .card-ico .icon {
+  width: 18px;
+  height: 18px;
+}
+.summary .card.is-accent .card-ico {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.summary .card.is-success .card-ico {
+  background: var(--success-soft);
+  color: var(--success-text);
 }
 .summary .value {
   font-family: var(--font-mono);
@@ -326,26 +490,28 @@ button:disabled,
   color: var(--text-muted);
 }
 
-/* 표 (카드로 감싸기, hairline 행, hover) */
+/* ── 표 (카드로 감싸기, hairline 행, hover) ── */
 .table-card {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-card);
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(25, 31, 40, 0.04);
+  box-shadow: var(--shadow-card);
 }
 .table-card table {
   margin: 0;
 }
 .table-card thead th {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: var(--text-dim);
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
   background: var(--bg-alt);
   border-bottom: 1px solid var(--border);
-  padding-block: 14px;
+  padding-block: 13px;
+  position: sticky;
+  top: 0;
 }
 .table-card tbody td {
   height: 56px;
@@ -353,18 +519,32 @@ button:disabled,
   border-bottom: 1px solid var(--border);
   padding-block: 12px;
   vertical-align: middle;
+  /* Pico 의 `td,th{background-color:var(--pico-background-color)}`(흰색)이 td 자신의
+     배경으로 칠해져 tr 의 제브라/hover 배경을 덮어버린다(특정성이 아니라 페인트 순서 문제).
+     td 배경을 투명으로 돌려 tr 배경이 보이게 한다. */
+  background: transparent;
+}
+.table-card tbody tr {
+  transition: background-color var(--dur-fast) ease;
 }
 .table-card tbody tr:last-child td {
   border-bottom: none;
 }
-.table-card tbody tr:hover {
+/* 2B안(확정): 제브라 스트라이프 + 틴티드 블루 hover.
+   짝수 행에 연한 회색(--bg-alt)을 깔아 넓은 표에서도 행이 눈으로 잘 따라감.
+   (기존 color-mix 값은 거의 흰색이라 실제로 안 보였음 → bg-alt 로 또렷하되 은은하게) */
+.table-card tbody tr:nth-child(even) {
   background: var(--bg-alt);
 }
+.table-card tbody tr:hover {
+  background: var(--surface-2);
+}
 .repo-name a {
   font-family: var(--font-mono);
   font-weight: 600;
   color: var(--text);
   text-decoration: none;
+  transition: color var(--dur-fast) ease;
 }
 .repo-name a:hover {
   color: var(--accent);
@@ -387,20 +567,23 @@ th.num {
   display: flex;
   align-items: center;
   width: 172px;
-  height: 36px;
-  overflow: hidden;
+  /* 버튼(테두리 포함 ~37.7px)↔진행률↔배지로 내용이 바뀌어도 높이가 안 흔들리도록
+     40px 로 고정하고 가운데 정렬(td 는 56px 고정이라 여유). 이전 36px 는 버튼보다
+     낮아 위아래 테두리가 잘리거나(overflow:hidden) 높이가 튀었다(min-height). */
+  height: 40px;
 }
 
-/* 검증 배지 칩 (dot + 라벨, 이모지 없음) */
+/* ── 검증 배지 칩 (dot + 라벨, 이모지 없음) ── */
 .badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 11px;
   border-radius: 999px;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 600;
   white-space: nowrap;
+  border: 1px solid transparent;
 }
 .badge::before {
   content: "";
@@ -408,14 +591,25 @@ th.num {
   height: 7px;
   border-radius: 50%;
   background: currentColor;
+  flex: none;
 }
 .badge-pass {
   color: var(--success-text);
-  background: rgba(0, 200, 150, 0.12);
+  background: var(--success-soft);
+}
+/* PASS 배지의 dot 은 살짝 은은한 펄스 (통과했음을 안심시키는 신호) */
+.badge-pass::before {
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-text) 55%, transparent);
+  animation: dot-pulse 2.4s var(--ease) infinite;
+}
+@keyframes dot-pulse {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-text) 45%, transparent); }
+  60%  { box-shadow: 0 0 0 5px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
 }
 .badge-warn {
   color: var(--warning-text);
-  background: rgba(255, 149, 0, 0.13);
+  background: var(--warning-soft);
 }
 .badge-unset {
   color: var(--text-muted);
@@ -445,26 +639,127 @@ th.num {
   font-family: var(--font-mono);
 }
 
+/* 버전 스냅샷 리스트 */
+.version-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+  background: var(--bg);
+  box-shadow: var(--shadow-card);
+  margin-bottom: 12px;
+  transition:
+    border-color var(--dur) ease,
+    box-shadow var(--dur) ease;
+}
+.version-item:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-card-hover);
+}
+.version-item .ver-no {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--text);
+}
+.version-item .ver-meta {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+.version-item .spacer {
+  margin-left: auto;
+}
+
 /* 패키지 증감 */
 .delta-add {
   color: var(--success-text);
+  font-weight: 600;
 }
 .delta-del {
   color: var(--danger);
+  font-weight: 600;
 }
 
-/* 배포 완료 배너 (#flash) */
+/* ── 데모(가짜 데이터) 모드 경고 배너 — 전 페이지 최상단. 실연동 오인 방지. ── */
+.demo-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  background: var(--warning-soft);
+  color: var(--warning-text);
+  font-size: 14px;
+  font-weight: 500;
+  border-bottom: 1px solid color-mix(in srgb, var(--warning-text) 28%, transparent);
+}
+.demo-banner strong {
+  font-weight: 700;
+}
+.demo-banner .demo-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: dot-pulse-warn 2s var(--ease) infinite;
+}
+@keyframes dot-pulse-warn {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning-text) 45%, transparent); }
+  60%  { box-shadow: 0 0 0 6px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+/* 연결 배지의 데모 변형 */
+.status-demo {
+  color: var(--warning-text);
+  background: var(--warning-soft);
+}
+
+/* ── 배포 완료 배너 (#flash) ── */
 .flash-banner {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 4px 0 22px;
-  padding: 12px 16px;
+  padding: 13px 16px;
   border-radius: 10px;
-  background: rgba(0, 200, 150, 0.1);
+  background: var(--success-soft);
   color: var(--success-text);
   font-size: 15px;
   font-weight: 600;
+  border: 1px solid color-mix(in srgb, var(--success-text) 24%, transparent);
+  animation: flash-in var(--dur-slow) var(--ease);
+}
+@keyframes flash-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+/* 성공 체크 원 — dot 대신 그려지는 체크 애니메이션 */
+.flash-banner .flash-check {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--success-text);
+  display: grid;
+  place-items: center;
+}
+.flash-banner .flash-check svg {
+  width: 12px;
+  height: 12px;
+  stroke: #fff;
+  stroke-width: 3;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 20;
+  stroke-dashoffset: 20;
+  animation: check-draw 0.4s var(--ease) 0.12s forwards;
+}
+@keyframes check-draw {
+  to { stroke-dashoffset: 0; }
 }
 .flash-banner .flash-dot {
   flex: none;
@@ -485,64 +780,229 @@ th.num {
   font-size: 13px;
 }
 
-/* 배포 확인 모달 — 본문/표/라벨 15px 로 통일 */
-.deploy-modal h3 {
-  font-size: 20px;
+/* ── 배포 확인 모달 ── */
+#modal[open],
+dialog.deploy-dialog[open] {
+  animation: backdrop-in var(--dur) ease;
+}
+@keyframes backdrop-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+/* 모달이 열릴 때 배경 스크롤 잠금 + 다이얼로그 overflow 허용 → 순간 스크롤바 깜뱡임 제거 */
+html:has(dialog[open]) {
+  overflow: hidden;
+}
+dialog.deploy-dialog,
+dialog#modal {
+  overflow: visible;
+}
+.deploy-modal {
+  width: min(520px, 92vw);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-modal);
+  padding: 0;
+  overflow: hidden;
+  animation: modal-in var(--dur-slow) var(--ease);
+}
+@keyframes modal-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}
+/* 위험 확인 아이콘 — 중앙 정렬 원형(의식적·경고적). 모달 헤더. */
+.deploy-modal .modal-head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+  padding: 26px 24px 6px;
+}
+.deploy-modal .modal-head .warn-ico {
+  flex: none;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+.deploy-modal .modal-head .warn-ico svg {
+  width: 26px;
+  height: 26px;
+}
+.deploy-modal .modal-head h3 {
+  font-size: 21px;
+  margin: 0;
+  color: var(--text);
+}
+.deploy-modal .modal-head .head-sub {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--danger);
+  margin-top: 2px;
+}
+.deploy-modal .modal-body {
+  padding: 20px 24px 24px;
 }
 .deploy-note {
-  font-size: 17px;
+  font-size: 15px;
   color: var(--text-secondary);
-  margin-bottom: 14px;
+  margin-bottom: 16px;
 }
+.deploy-note .repo-hl {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: var(--text);
+}
+/* 현재 → 대상 프리뷰: 카드형 before/after */
 .deploy-preview {
-  margin: 0 0 18px;
-  font-size: 17px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: stretch;
+  gap: 10px;
+  margin: 0 0 20px;
 }
-.deploy-preview,
-.deploy-preview tr,
-.deploy-preview th,
-.deploy-preview td {
-  border: none;
-  background: none;
+.deploy-preview .pv-box {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px 14px;
 }
-.deploy-preview th {
-  width: 30%;
-  padding: 8px 0;
-  text-align: left;
-  font-weight: 500;
+.deploy-preview .pv-box.pv-target {
+  background: var(--accent-soft);
+  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
+}
+.deploy-preview .pv-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+}
+.deploy-preview .pv-target .pv-label {
+  color: var(--accent);
+}
+.deploy-preview .pv-ver {
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1.15;
+}
+.deploy-preview .pv-pkg {
+  font-family: var(--font-mono);
+  font-size: 12px;
   color: var(--text-muted);
+  margin-top: 4px;
 }
-.deploy-preview td {
-  padding: 8px 0;
-  text-align: right;
+.deploy-preview .pv-arrow {
+  align-self: center;
+  color: var(--text-dim);
+  display: grid;
+  place-items: center;
 }
+.deploy-preview .pv-arrow svg {
+  width: 22px;
+  height: 22px;
+}
+
+/* 타입-투-컨펌 — 저장소 이름을 정확히 입력해야 확정 버튼이 열림 */
 .confirm-label {
   display: block;
-  font-size: 17px;
-}
-/* 입력란만 작게 (본문보다 4px 작은 14px + 컴팩트 높이) */
-.confirm-label input {
-  margin-top: 8px;
   font-size: 14px;
-  --pico-form-element-spacing-vertical: 0.5rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+.confirm-label .repo-hl {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: var(--text);
+  background: var(--surface);
+  padding: 1px 7px;
+  border-radius: 5px;
+}
+.confirm-field {
+  position: relative;
+  margin-top: 8px;
+}
+.confirm-label input {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  --pico-form-element-spacing-vertical: 0.6rem;
   height: auto;
+  padding-right: 40px;
+}
+/* 입력 상태 시각화: 비어있음(중립) → 불일치(빨강) → 일치(초록 체크) */
+.confirm-field .confirm-state {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  opacity: 0;
+  transition: opacity var(--dur) ease;
+}
+.confirm-field.is-valid input {
+  border-color: var(--success-text);
+  box-shadow: 0 0 0 3px var(--success-soft);
+}
+.confirm-field.is-valid .confirm-state.ok {
+  opacity: 1;
+  color: var(--success-text);
+}
+.confirm-field.is-invalid input {
+  border-color: var(--danger);
+}
+.confirm-field.is-invalid .confirm-state.bad {
+  opacity: 1;
+  color: var(--danger);
+}
+.confirm-hint {
+  font-size: 12px;
+  margin-top: 6px;
+  min-height: 1em;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+.confirm-field.is-invalid ~ .confirm-hint {
+  color: var(--danger);
+}
+.confirm-field.is-valid ~ .confirm-hint {
+  color: var(--success-text);
+}
+/* 불일치로 확정 버튼 누르려 하면 흔들림 (JS 로 .shake 토글) */
+.confirm-field.shake {
+  animation: shake 0.32s var(--ease);
+}
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-6px); }
+  40% { transform: translateX(6px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(4px); }
 }
 .modal-actions {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 10px;
-  margin-top: 20px;
+  margin-top: 22px;
 }
-/* 모달 버튼: 편안한 표준 크기, 한 줄, 너비 auto */
 .modal-actions button {
   width: auto;
   margin: 0;
   padding: 11px 20px;
-  font-size: 16px;
+  font-size: 15px;
 }
 
-/* 동기화 진행률 바 */
+/* ── 동기화 진행률 바 ── */
 .sync-progress {
   display: flex;
   flex-direction: column;
@@ -553,21 +1013,53 @@ th.num {
   margin: 0;
   width: 100%;
   height: 6px;
+  border-radius: 999px;
 }
 .sync-progress small {
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 12px;
+  font-feature-settings: "tnum" 1;
+}
+/* 진행 중인 결정형 바 위에 흐르는 shimmer — 값(width)은 progress 가 담당,
+   shimmer 는 "지금 살아있음"을 보여주는 오버레이 */
+.sync-progress {
+  position: relative;
+}
+.sync-progress.is-active progress::after {
+  content: "";
+}
+.sync-progress .sync-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.sync-progress .sync-pct {
+  color: var(--accent);
+  font-weight: 700;
+}
+/* 값을 모르는 초기 상태용 인디터미닛 바 */
+.sync-progress.indeterminate progress {
+  background:
+    linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat,
+    var(--pico-progress-background-color, var(--surface));
+  background-size: 40% 100%;
+  animation: indeterminate 1.2s var(--ease) infinite;
+}
+@keyframes indeterminate {
+  0%   { background-position: -40% 0; }
+  100% { background-position: 140% 0; }
 }
 
-/* 연결 상태 칩 (dot + 텍스트) */
+/* ── 연결 상태 칩 (dot + 텍스트) ── */
 .status-line {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
   border-radius: 999px;
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 14px;
   background: var(--surface);
 }
 .status-line::before {
@@ -576,30 +1068,56 @@ th.num {
   height: 8px;
   border-radius: 50%;
   background: currentColor;
+  flex: none;
 }
 .status-ok {
   color: var(--success-text);
-  background: rgba(0, 200, 150, 0.1);
+  background: var(--success-soft);
+}
+.status-ok::before {
+  animation: dot-pulse 2.4s var(--ease) infinite;
 }
 .status-bad {
   color: var(--danger);
-  background: rgba(240, 68, 82, 0.1);
+  background: var(--danger-soft);
 }
 .status-loading {
   color: var(--text-muted);
 }
+.status-loading::before {
+  animation: blink 1s steps(2, start) infinite;
+}
+@keyframes blink {
+  50% { opacity: 0.3; }
+}
 
-/* 검색 툴바 / 정렬 헤더 / 페이저 */
+/* ── 검색 툴바 / 정렬 헤더 / 페이저 ── */
 .list-toolbar {
   margin-bottom: 14px;
+  position: relative;
 }
-.repo-search {
+/* 선택자에 input[type=search] 를 포함해 특정성 (0,3,1) 확보.
+   Pico v2 의 검색 아이콘/패딩 규칙(input:not(...)[type=search], 0,2,1)을 이겨야
+   기본 돋보기 배경이 사라지고 인라인 .search-ico 만 남는다(아이콘 중복 제거). */
+.list-toolbar input[type="search"].repo-search {
   width: 100%;
   margin: 0;
   font-size: 14px;
-  /* 세로로 얇게 */
-  --pico-form-element-spacing-vertical: 0.5rem;
   height: auto;
+  /* 좌측 돋보기 아이콘 자리 확보 (아이콘 left:13 + 16px → 텍스트 40px 부터) */
+  padding: 0.62rem 14px 0.62rem 40px;
+  /* Pico 기본 [type=search] 돋보기 배경 아이콘 제거 (인라인 .search-ico 사용) */
+  background-image: none;
+}
+.list-toolbar .search-ico {
+  position: absolute;
+  left: 13px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: var(--text-dim);
+  pointer-events: none;
 }
 .table-card thead th a.th-sort {
   display: inline-flex;
@@ -608,6 +1126,7 @@ th.num {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
+  transition: color var(--dur-fast) ease;
 }
 .table-card thead th a.th-sort:hover {
   color: var(--text-secondary);
@@ -617,6 +1136,11 @@ th.num {
 }
 .sort-ind {
   font-size: 11px;
+  transition: transform var(--dur) var(--ease);
+  display: inline-block;
+}
+.th-sort.is-active.desc .sort-ind {
+  transform: rotate(180deg);
 }
 .pager {
   display: flex;
@@ -628,13 +1152,100 @@ th.num {
   color: var(--text-muted);
   font-size: 13px;
 }
+.pager button {
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+/* ── 빈 상태 / 에러 상태 ── */
 .empty-note {
-  padding: 16px;
+  padding: 48px 16px;
   color: var(--text-muted);
+  text-align: center;
+}
+.empty-note .empty-ico {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 12px;
+  color: var(--text-dim);
+  display: grid;
+  place-items: center;
+}
+.empty-note .empty-title {
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: 15px;
+}
+.empty-note .empty-sub {
+  font-size: 13px;
+  margin-top: 4px;
+}
+.error-note {
+  padding: 20px;
+  border-radius: 10px;
+  background: var(--danger-soft);
+  color: var(--danger);
+  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ── 스켈레톤 로딩 (표 초기/재조회) ── */
+.skeleton {
+  background: linear-gradient(
+      90deg,
+      var(--surface) 25%,
+      color-mix(in srgb, var(--surface) 60%, var(--bg)) 37%,
+      var(--surface) 63%
+    );
+  background-size: 400% 100%;
+  border-radius: 6px;
+  animation: skeleton 1.4s ease infinite;
+}
+@keyframes skeleton {
+  0% { background-position: 100% 0; }
+  100% { background-position: 0 0; }
+}
+.skeleton-row {
+  height: 16px;
+}
+
+/* HTMX 요청 중 페이드 (hx-swap 대상에 자동 적용) */
+.htmx-swapping {
+  opacity: 0.4;
+  transition: opacity var(--dur) ease;
+}
+tr.htmx-request .row-action button {
+  opacity: 0.6;
 }
 
 @media (max-width: 640px) {
   .summary {
     grid-template-columns: repeat(2, 1fr);
   }
+  .deploy-preview {
+    grid-template-columns: 1fr;
+  }
+  .deploy-preview .pv-arrow {
+    transform: rotate(90deg);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   모션 최소화 선호 존중 (design-ref §6 취지)
+   ───────────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+  .summary .card:hover {
+    transform: none;
+  }
 }
diff --git a/app/templates/base.html b/app/templates/base.html
index 0b924a4..dc61801 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -24,9 +24,16 @@
   <script src="/static/htmx.min.js" defer></script>
 </head>
 <body>
+  {% if demo_mode %}
+  <div class="demo-banner" role="alert">
+    <span class="demo-dot"></span>
+    <span>데모 모드 — 화면의 저장소·버전·배포는 모두 <strong>가짜 데이터</strong>입니다.
+      실제 Pulp 에 연결되어 있지 않습니다.</span>
+  </div>
+  {% endif %}
   <nav class="app-nav">
     <div class="container">
-      <p class="brand"><span class="accent">Pulp</span> 패치 관리 콘솔</p>
+      <p class="brand"><span class="brand-mark">P</span>Pulp <span class="accent">패치 관리 콘솔</span></p>
       <button class="theme-toggle" type="button" onclick="toggleTheme()"
               aria-label="라이트/다크 전환" title="라이트/다크 전환">
         <svg class="icon moon" viewBox="0 0 24 24" width="18" height="18" fill="none"
diff --git a/app/templates/partials/deploy_modal.html b/app/templates/partials/deploy_modal.html
index 158d97c..d2156a3 100644
--- a/app/templates/partials/deploy_modal.html
+++ b/app/templates/partials/deploy_modal.html
@@ -1,50 +1,65 @@
-<dialog open>
+<dialog open class="deploy-dialog">
   <article class="deploy-modal">
-    <header>
-      <h3>이 버전을 운영망에 배포</h3>
-    </header>
-
-    {% if error %}
-    <p class="status-line status-bad">{{ error }}</p>
-    {% endif %}
-
-    <p class="deploy-note">운영 서버(yum/dnf)가 실제로 내려받는 버전이 바뀝니다. 신중히 확인하세요.</p>
-
-    {% if preview %}
-    <table class="deploy-preview">
-      <tbody>
-        <tr>
-          <th>현재 운영</th>
-          <td class="num">{% if preview.current_version is not none %}v{{ preview.current_version }} · {{ preview.current_count }}개{% else %}없음{% endif %}</td>
-        </tr>
-        <tr>
-          <th>배포 대상</th>
-          <td class="num">v{{ preview.target_version }} · {{ preview.target_count }}개</td>
-        </tr>
-        <tr>
-          <th>순 변화</th>
-          <td class="num">
-            <span class="{{ 'delta-add' if preview.net_sign == '+' else 'delta-del' }}">{{ preview.net_sign }}{{ preview.net }}개</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    {% endif %}
-
-    <form hx-post="/repos/{{ uuid }}/deploy" hx-target="#modal" hx-swap="innerHTML">
-      <input type="hidden" name="version_href" value="{{ version_href }}">
-      <label class="confirm-label">
-        확인을 위해 저장소 이름 <strong class="mono">{{ repo_name }}</strong> 을(를) 입력하세요
-        <input type="text" name="confirm_name" autocomplete="off" required class="mono"
-               data-confirm="{{ repo_name }}"
-               oninput="document.getElementById('deploy-confirm-btn').disabled = (this.value !== this.dataset.confirm)">
-      </label>
-      {# TODO(auth): 로그인 도입 시 배포 비밀번호 재확인 입력 추가 #}
-      <div class="modal-actions">
-        <button type="button" class="ghost"
-                onclick="document.getElementById('modal').innerHTML=''">취소</button>
-        <button type="submit" id="deploy-confirm-btn" class="danger" disabled>배포 확정</button>
+    <div class="modal-head">
+      <span class="warn-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg></span>
+      <div>
+        <h3>운영 배포 확인</h3>
+        <span class="head-sub">되돌리기 어려운 작업입니다</span>
       </div>
-    </form>
+    </div>
+
+    <div class="modal-body">
+      {% if error %}
+      <p class="error-note" role="alert">
+        <svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg>
+        <span>{{ error }}</span>
+      </p>
+      {% endif %}
+
+      <p class="deploy-note" style="text-align:center">
+        <span class="repo-hl">{{ repo_name }}</span> 저장소를 운영망에 배포합니다.
+        운영 서버(yum/dnf)가 실제로 내려받는 버전이 바뀝니다.
+      </p>
+
+      {% if preview %}
+      <div class="deploy-preview">
+        <div class="pv-box">
+          <div class="pv-label">현재 (운영)</div>
+          {% if preview.current_version is not none %}
+          <div class="pv-ver">v{{ preview.current_version }}</div>
+          <div class="pv-pkg">{{ preview.current_count }} pkgs</div>
+          {% else %}
+          <div class="pv-ver">없음</div>
+          <div class="pv-pkg">—</div>
+          {% endif %}
+        </div>
+        <div class="pv-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div>
+        <div class="pv-box pv-target">
+          <div class="pv-label">대상</div>
+          <div class="pv-ver">v{{ preview.target_version }}</div>
+          <div class="pv-pkg">{{ preview.target_count }} pkgs · <span class="{{ 'delta-add' if preview.net_sign == '+' else 'delta-del' }}">{{ preview.net_sign }}{{ preview.net }}</span></div>
+        </div>
+      </div>
+      {% endif %}
+
+      <form hx-post="/repos/{{ uuid }}/deploy" hx-target="#modal" hx-swap="innerHTML">
+        <input type="hidden" name="version_href" value="{{ version_href }}">
+        <label class="confirm-label">확인을 위해 저장소 이름 <span class="repo-hl">{{ repo_name }}</span> 을(를) 입력하세요.
+          <div class="confirm-field" data-confirm="{{ repo_name }}">
+            <input type="text" name="confirm_name" autocomplete="off" required class="mono"
+                   placeholder="{{ repo_name }}"
+                   oninput="var f=this.closest('.confirm-field');var v=this.value.trim();var ok=(v===f.dataset.confirm);f.classList.toggle('is-valid',ok&&v!=='');f.classList.toggle('is-invalid',!ok&&v!=='');document.getElementById('deploy-confirm-btn').disabled=!ok;">
+            <svg class="confirm-state ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 13 4 4L19 7"/></svg>
+            <svg class="confirm-state bad" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
+          </div>
+        </label>
+        {# TODO(auth): 로그인 도입 시 배포 비밀번호 재확인 입력 추가 #}
+        <div class="modal-actions">
+          <button type="button" class="ghost"
+                  onclick="document.getElementById('modal').innerHTML=''">취소</button>
+          <button type="submit" id="deploy-confirm-btn" class="danger" disabled>배포 확정</button>
+        </div>
+      </form>
+    </div>
   </article>
 </dialog>
diff --git a/app/templates/partials/deploy_success.html b/app/templates/partials/deploy_success.html
index 6663111..4802a81 100644
--- a/app/templates/partials/deploy_success.html
+++ b/app/templates/partials/deploy_success.html
@@ -5,8 +5,9 @@
 
 <div id="flash" hx-swap-oob="true">
   <div class="flash-banner">
-    <span class="flash-dot"></span>
-    <span>배포 완료 · <strong class="mono">v{{ to_version }}</strong>{% if from_version is not none %} <span class="flash-sub">(이전 v{{ from_version }})</span>{% endif %}</span>
+    <span class="flash-check"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 13 4 4L19 7"/></svg></span>
+    <span>배포 완료 · <strong class="mono">v{{ to_version }}</strong></span>
+    {% if from_version is not none %}<span class="flash-sub">이전 v{{ from_version }} · 되돌리기: 이전 버전 재배포</span>{% endif %}
     {% if not audit_ok %}<span class="flash-warn">감사 로그 기록 실패</span>{% endif %}
   </div>
 </div>
diff --git a/app/templates/partials/progress.html b/app/templates/partials/progress.html
index da60b82..34e256a 100644
--- a/app/templates/partials/progress.html
+++ b/app/templates/partials/progress.html
@@ -9,14 +9,21 @@
   {% elif progress.idle %}
     {# 추적 중인 작업 없음 — 빈 조각 #}
   {% else %}
-    <div class="sync-progress">
-      {% if progress.total %}
-        <progress value="{{ progress.done }}" max="{{ progress.total }}"></progress>
-        <small class="num">{{ progress.done }}/{{ progress.total }} · {{ progress.percent }}%</small>
-      {% else %}
-        <progress></progress>
-        <small>준비 중…</small>
-      {% endif %}
+    {% if progress.total %}
+    <div class="sync-progress is-active">
+      <div class="sync-head">
+        <small>동기화 중</small>
+        <small class="sync-pct">{{ progress.percent }}%</small>
+      </div>
+      <progress value="{{ progress.done }}" max="{{ progress.total }}"></progress>
     </div>
+    {% else %}
+    <div class="sync-progress is-active indeterminate">
+      <div class="sync-head">
+        <small>준비 중…</small>
+      </div>
+      <progress></progress>
+    </div>
+    {% endif %}
   {% endif %}
 </div>
diff --git a/app/templates/partials/repo_list.html b/app/templates/partials/repo_list.html
index d0342a0..60fd6c7 100644
--- a/app/templates/partials/repo_list.html
+++ b/app/templates/partials/repo_list.html
@@ -3,14 +3,39 @@
     <p role="alert" class="status-line status-bad">저장소 목록을 불러오지 못했습니다: {{ error }}</p>
   {% else %}
     <div class="summary">
-      <div class="card"><div class="value">{{ summary.total }}</div><div class="label">전체 저장소</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 class="card is-accent">
+        <div class="card-top">
+          <span class="label">전체 저장소</span>
+          <span class="card-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span>
+        </div>
+        <div class="value is-accent">{{ summary.total }}</div>
+      </div>
+      <div class="card">
+        <div class="card-top">
+          <span class="label">동기화 중</span>
+          <span class="card-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg></span>
+        </div>
+        <div class="value">{{ summary.syncing }}</div>
+      </div>
+      <div class="card is-success">
+        <div class="card-top">
+          <span class="label">GPG 검증 통과</span>
+          <span class="card-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2 4 5v6c0 5 3.4 8.5 8 10 4.6-1.5 8-5 8-10V5z"/><path d="m9 12 2 2 4-4"/></svg></span>
+        </div>
+        <div class="value is-success">{{ summary.gpg_pass }}</div>
+      </div>
+      <div class="card">
+        <div class="card-top">
+          <span class="label">총 패키지</span>
+          <span class="card-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.3 7 8.7 5 8.7-5M12 22V12"/></svg></span>
+        </div>
+        <div class="value">{{ summary.total_packages }}</div>
+      </div>
     </div>
 
     <div class="list-toolbar">
       <!-- 검색창은 표 바깥에 둬서 입력 중 포커스 유지. 정렬 상태([data-state])를 함께 전송 -->
+      <svg class="search-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
       <input id="repo-search" class="repo-search" type="search" name="q" value="{{ q }}"
              placeholder="저장소 이름 검색"
              hx-get="/repos/table" hx-target="#repo-table-wrap" hx-swap="outerHTML"
diff --git a/app/templates/partials/table_wrap.html b/app/templates/partials/table_wrap.html
index c4ae6c3..53bd5e7 100644
--- a/app/templates/partials/table_wrap.html
+++ b/app/templates/partials/table_wrap.html
@@ -9,11 +9,11 @@
 
   {% macro sorth(col, label, extra="") %}
   <th class="{{ extra }}">
-    <a href="#" class="th-sort{% if sort == col %} is-active{% endif %}"
+    <a href="#" class="th-sort{% if sort == col %} is-active{% if dir == 'desc' %} desc{% endif %}{% endif %}"
        hx-get="/repos/table" hx-target="#repo-table-wrap" hx-swap="outerHTML"
        hx-include="#repo-search"
        hx-vals='{"sort": "{{ col }}", "dir": "{{ 'desc' if (sort == col and dir == 'asc') else 'asc' }}"}'>
-      {{ label }}{% if sort == col %} <span class="sort-ind">{{ '↑' if dir == 'asc' else '↓' }}</span>{% endif %}
+      {{ label }}{% if sort == col %} <span class="sort-ind">▲</span>{% endif %}
     </a>
   </th>
   {% endmacro %}
@@ -41,11 +41,14 @@
           <td class="mono">{{ repo.last_sync or "—" }}</td>
           <td>
             <div id="sync-{{ repo.uuid }}" class="row-action">
-              <button class="secondary btn-sm"
+              <button class="secondary btn-sm btn-icon"
                       hx-post="/repos/{{ repo.uuid }}/sync"
                       hx-target="#sync-{{ repo.uuid }}"
                       hx-swap="innerHTML"
-                      hx-disabled-elt="this">동기화</button>
+                      hx-disabled-elt="this">
+                <svg class="icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>
+                동기화
+              </button>
             </div>
           </td>
         </tr>
diff --git a/app/templates/partials/version_list.html b/app/templates/partials/version_list.html
index c09be37..6b66b68 100644
--- a/app/templates/partials/version_list.html
+++ b/app/templates/partials/version_list.html
@@ -1,46 +1,27 @@
-<div id="version-list" class="table-card"{% if oob %} hx-swap-oob="true"{% endif %}>
+<div id="version-list" class="version-list"{% if oob %} hx-swap-oob="true"{% endif %}>
   {% if versions %}
-  <table>
-    <thead>
-      <tr>
-        <th class="num">버전</th>
-        <th>생성일시</th>
-        <th class="num">패키지</th>
-        <th class="num">증감</th>
-        <th>검증</th>
-        <th>배포 상태</th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for v in versions %}
-      <tr>
-        <td class="num">v{{ v.number }}</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 -%}
-          {%- if v.removed %} <span class="delta-del">−{{ v.removed }}</span>{% endif -%}
-          {%- if not v.added and not v.removed %}—{% endif -%}
-        </td>
-        <td>{% if v.gpg %}<span class="badge badge-{{ v.gpg.level }}">{{ v.gpg.label }}</span>{% endif %}</td>
-        <td>{% if v.is_deployed %}<span class="badge badge-deployed">운영 배포 중</span>{% endif %}</td>
-        <td>
-          {% if v.is_deployed %}
-            {# 배포 상태 칸에 배지 표시 #}
-          {% elif v.deployable %}
-          <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 btn-sm" disabled title="검증을 통과하지 못해 배포할 수 없습니다">이 버전 배포</button>
-          {% endif %}
-        </td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+  {% for v in versions %}
+  <div class="version-item">
+    <span class="ver-no">v{{ v.number }}</span>
+    {% if v.is_deployed %}<span class="badge badge-deployed">운영 배포 중</span>{% endif %}
+    {% if v.gpg %}<span class="badge badge-{{ v.gpg.level }}">{{ v.gpg.label }}</span>{% endif %}
+    <span class="ver-meta">{{ v.created or "—" }} · {{ v.package_count }} pkgs
+      {%- if v.added %} · <span class="delta-add">+{{ v.added }}</span>{% endif -%}
+      {%- if v.removed %} <span class="delta-del">−{{ v.removed }}</span>{% endif -%}
+    </span>
+    <span class="spacer"></span>
+    {% if v.is_deployed %}
+    <button class="ghost btn-sm" disabled>현재 운영 버전</button>
+    {% elif v.deployable %}
+    <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 btn-sm" disabled title="검증을 통과하지 못해 배포할 수 없습니다">이 버전 배포</button>
+    {% endif %}
+  </div>
+  {% endfor %}
   {% else %}
-  <p style="padding:16px;">버전이 없습니다. 먼저 동기화를 실행하세요.</p>
+  <p class="empty-note">버전이 없습니다. 먼저 동기화를 실행하세요.</p>
   {% endif %}
 </div>
diff --git a/design_handoff_console_redesign/README.md b/design_handoff_console_redesign/README.md
new file mode 100644
index 0000000..2426ce0
--- /dev/null
+++ b/design_handoff_console_redesign/README.md
@@ -0,0 +1,237 @@
+# Handoff: 폐쇄망 Pulp 운영 콘솔 — 시각 디자인 개선
+
+## Overview
+한국은행 IT전략부 클라우드팀의 폐쇄망(인터넷 차단) Pulp 3 관리 웹 UI의 **시각 디자인 개선**입니다.
+운영자가 저장소를 동기화 → 버전 스냅샷 확인 → 검증 → 운영 배포하는 도구로, "관공서 기본 폼"
+느낌을 벗고 Toss 스타일의 신뢰감 있고 정돈된 운영 도구로 끌어올리는 것이 목표입니다.
+
+기능/스택 변경 없이 **CSS(토큰 + 컴포넌트) + 최소한의 마크업 추가**만으로 개선했습니다.
+
+## About the Design Files
+이 번들의 파일은 **HTML로 만든 디자인 레퍼런스**입니다. 다만 이 프로젝트는 특수하게도
+**타깃 환경이 이미 정해져 있고, 산출물이 그 환경에 그대로 들어가는 CSS**입니다:
+
+- `app.css` — **실제 산출물.** 기존 앱의 `app/static/app.css`를 이 파일로 교체하면 됩니다.
+  (Pico.css v2 뒤에 로드되어 변수를 오버라이드하는 커스텀 스타일. 순수 CSS, 외부 의존 0.)
+- `preview.html` — **렌더링 참고용.** 개선안이 실제로 어떻게 보이는지 확인하는 하니스입니다.
+  앱에 넣지 마세요.
+- `pico-shim.css` — **미리보기 전용, 앱에 넣지 마세요.** 폐쇄망에서 CDN 없이 preview.html을
+  렌더링하려고 Pico의 최소 기본 스타일만 흉내 낸 파일입니다. 실제 앱은 진짜 Pico.css v2를 씁니다.
+
+**작업의 본질:** `app.css`를 교체하고, 아래 "컴포넌트별 변경 + 필요 마크업"에 적힌 소량의
+템플릿 마크업(Jinja2)을 추가/조정하는 것입니다. 프레임워크를 바꾸지 않습니다.
+
+## Fidelity
+**High-fidelity.** 최종 색/타이포/간격/인터랙션이 확정된 목업입니다. 아래 값 그대로 구현하세요.
+
+## 절대 지켜야 할 기술 제약
+1. **빌드 단계 없음.** React/Vue/Vite/npm/Tailwind 금지. 순수 HTML + HTMX + Jinja2 +
+   Pico.css v2 + 커스텀 CSS(`app.css`)만.
+2. **폐쇄망.** 런타임에 외부 네트워크(구글폰트/CDN/원격 아이콘/fetch) 참조 금지. 모든 자원 로컬 동봉.
+   새 `@import`(원격)/CDN `<link>`/`<script>` 추가 금지. **아이콘은 인라인 SVG.**
+3. **폰트는 이미 로컬 동봉:** 본문 `Pretendard Variable`, 코드/숫자 `JetBrains Mono`
+   (`@font-face`로 `/static/fonts/*.woff2` 로드). 새 폰트 추가 금지. (`app.css`에 @font-face 포함됨)
+4. **크롬에 장식용 이모지 금지.** 상태는 색 있는 chip/dot으로.
+5. 뷰는 HTML 조각(fragment)을 반환, HTMX가 swap. 라이트 모드 기본, 다크는 토글 옵션.
+
+### 보존해야 하는 훅 (바꾸면 기능 깨짐)
+- 모든 HTMX 속성: `hx-get/hx-post/hx-target/hx-swap/hx-trigger/hx-include/hx-vals/hx-disabled-elt`
+  (값·타깃 셀렉터 유지).
+- element id: `#repo-list`, `#repo-table-wrap`, `#repo-search`, `#modal`, `#flash`,
+  `#sync-{uuid}`, `#deploy-confirm-btn`.
+- data 속성: `data-state`(정렬), `data-confirm`(타입-투-컨펌), `data-theme`(테마).
+- 배포 확정 버튼의 `oninput` 비활성화 로직, 테마 토글/FOUC 방지 인라인 스크립트.
+- 클래스명을 리네임하려면 CSS와 템플릿 **양쪽 다** 맞춰 바꿀 것.
+
+> 주: `preview.html`의 검색 input은 데모라 id가 없습니다. 실제 앱에서는 `#repo-search`를
+> 그대로 두고 `.repo-search` 클래스만 유지하세요.
+
+---
+
+## 컴포넌트별 변경 + 필요 마크업
+대부분은 기존 마크업 그대로 두고 CSS만 바뀌면 됩니다. 아래는 **새 요소/구조가 필요한 부분**만
+정리했습니다. 각 스니펫은 `preview.html`에서 실제로 렌더되는 형태입니다.
+
+### 0. 상단 내비 브랜드 마크 (선택)
+차분한 단색 사각 로고 큐브. 인라인 SVG 없이 CSS만으로.
+```html
+<p class="brand"><span class="brand-mark">P</span>Pulp <span class="accent">Console</span></p>
+```
+
+### 1. 요약 카드 (대시보드)
+카드 상단에 **라벨 + 아이콘 칩** 한 줄(`.card-top`)을 추가. 값은 그대로 `.value`.
+`.is-accent`(전체 저장소=파랑), `.is-success`(GPG 통과=민트)로 강조.
+```html
+<div class="card is-accent">
+  <div class="card-top">
+    <span class="label">전체 저장소</span>
+    <span class="card-ico"><svg class="icon" viewBox="0 0 24 24" ...>…</svg></span>
+  </div>
+  <div class="value is-accent">18</div>
+</div>
+```
+호버 시 살짝 떠오름(translateY -2px)+그림자. (reduced-motion에서 자동 비활성)
+
+### 2. 검색 툴바
+`.list-toolbar`를 relative 래퍼로 두고 왼쪽에 돋보기 인라인 SVG(`.search-ico`).
+input(`#repo-search`, `.repo-search`)의 왼쪽 패딩을 아이콘 자리만큼(40px) 확보(→ CSS가 처리).
+```html
+<div class="list-toolbar">
+  <svg class="search-ico" viewBox="0 0 24 24" ...><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+  <input id="repo-search" class="repo-search" type="search" placeholder="저장소 이름으로 검색…"
+         hx-get="..." hx-target="#repo-table-wrap" hx-trigger="input changed delay:300ms" ...>
+</div>
+```
+
+### 3. 저장소 표
+- 카드로 감싸기(`.table-card`) — 기존 유지.
+- 확정안 = **제브라 스트라이프**: 짝수 행에 옅은 톤(CSS `tbody tr:nth-child(even)`), hover는 틴티드 블루.
+- 정렬 헤더: `a.th-sort`(활성 시 `.is-active`), 방향 인디케이터 `.sort-ind`(desc면 `.th-sort.is-active.desc`가 화살표 회전).
+- 검증 배지: `.badge.badge-pass|warn|unset|deployed`(dot + 라벨, 이모지 없음).
+- 저장소명 셀: `.repo-name > a`(모노, hover 시 accent).
+- 액션 셀: 폭·높이 고정 박스 `.row-action`(버튼↔진행률↔배지로 내용이 바뀌어도 레이아웃 안 흔들림).
+```html
+<td><div class="row-action"> …버튼/진행률/배지… </div></td>
+```
+
+### 4. 버튼 색 체계 (중요)
+- **동기화(반복 노출)** = `.secondary` → **흰 배경 + 파란 글씨 + 옅은 파란 테두리.** 표에 여러 개 떠도 안 번잡.
+- **새로고침 등 유틸리티** = `.ghost` → 중립(투명 배경 + 회색 테두리). 동기화와 확실히 구분.
+- **위험(배포 확정)** = `.danger` → 빨강 채움 + 흰 글씨.
+- 공통: press 시 `scale(0.97)`, hover 시 옅은 그림자.
+- **로딩 상태**: 버튼에 `.is-loading` 클래스를 붙이면 텍스트가 스피너로 대체됨. HTMX 요청 시
+  `hx-disabled-elt`와 함께 `.is-loading`을 토글하면 자연스럽다.
+```html
+<button class="secondary btn-sm btn-icon" hx-post="/sync/{{ repo.id }}"
+        hx-target="#sync-{{ repo.id }}" hx-disabled-elt="this">
+  <svg class="icon" ...>…</svg> 동기화
+</button>
+```
+
+### 5. 동기화 진행률
+```html
+<div class="sync-progress is-active">
+  <div class="sync-head"><small>동기화 중</small><small class="sync-pct">64%</small></div>
+  <progress value="64" max="100"></progress>
+</div>
+```
+값을 모르는 초기 단계엔 `.sync-progress.indeterminate`(움직이는 인디터미닛 바)를 쓸 수 있음.
+
+### 6. 배포 확인 모달 (`<dialog id="modal">`) — 위험 강조 + 타입-투-컨펌
+확정안 = **중앙 경고형.** 헤더 밴드 대신 상단 중앙에 원형 경고 아이콘.
+```html
+<dialog id="modal">
+  <article class="deploy-modal">
+    <div class="modal-head">
+      <span class="warn-ico"><svg viewBox="0 0 24 24" ...>△!</svg></span>
+      <div><h3>운영 배포 확인</h3><span class="head-sub">되돌리기 어려운 작업입니다</span></div>
+    </div>
+    <div class="modal-body">
+      <p class="deploy-note" style="text-align:center"><span class="repo-hl">rhel8-baseos</span> 저장소를 운영에 배포합니다.</p>
+
+      <!-- 현재 → 대상 카드형 프리뷰 -->
+      <div class="deploy-preview">
+        <div class="pv-box"><div class="pv-label">현재 (운영)</div><div class="pv-ver">v140</div><div class="pv-pkg">9,001 pkgs</div></div>
+        <div class="pv-arrow"><svg ...>→</svg></div>
+        <div class="pv-box pv-target"><div class="pv-label">대상</div><div class="pv-ver">v142</div><div class="pv-pkg">9,204 pkgs · <span class="delta-add">+203</span></div></div>
+      </div>
+
+      <!-- 타입-투-컨펌: 이름이 정확히 일치해야 확정 버튼 열림 -->
+      <label class="confirm-label">확인을 위해 저장소 이름 <span class="repo-hl">rhel8-baseos</span> 을 입력하세요.
+        <div class="confirm-field" data-confirm="rhel8-baseos">
+          <input type="text" autocomplete="off" placeholder="rhel8-baseos"
+                 oninput="document.getElementById('deploy-confirm-btn').disabled = (this.value.trim() !== this.closest('.confirm-field').dataset.confirm)">
+          <svg class="confirm-state ok" ...>✓</svg>
+          <svg class="confirm-state bad" ...>✕</svg>
+        </div>
+      </label>
+      <!-- 힌트 문구 없음: 상태는 초록 체크/초록 테두리(일치) · 빨강 X/빨강 테두리(불일치)로만 표시 -->
+
+      <div class="modal-actions">
+        <button class="ghost" onclick="this.closest('dialog').close()">취소</button>
+        <button class="danger" id="deploy-confirm-btn" disabled>운영에 배포</button>
+      </div>
+    </div>
+  </article>
+</dialog>
+```
+입력 상태 시각화는 **`.confirm-field`에 `.is-valid` / `.is-invalid` 클래스**로 제어됩니다.
+- 순수 오조작 방지만 필요하면 위 `oninput`처럼 `#deploy-confirm-btn.disabled`만 토글해도 됨.
+- 체크/X 아이콘·테두리 색까지 원하면 값 일치 여부에 따라 `.confirm-field`에
+  `is-valid`/`is-invalid`도 함께 토글(입력이 비면 둘 다 제거).
+- 열릴 때 배경 스크롤 잠금은 CSS `html:has(dialog[open]){overflow:hidden}` + 진입 애니메이션을
+  translate 없이 scale/opacity로만 처리해 **순간 스크롤바 깜빡임이 없음.**
+
+### 7. 버전 목록 (저장소 상세 — 저장소명 클릭 시 화면)
+```html
+<a href="{{ url_for('dashboard') }}" role="button" class="ghost btn-sm btn-icon back-btn">
+  <svg class="icon" ...>←</svg> 대시보드
+</a>
+<div class="verify-detail"><span class="badge badge-pass">GPG 통과</span><small>서명 검증 통과 · … · 키 0x3A9F…</small></div>
+<div class="version-list">
+  <div class="version-item">
+    <span class="ver-no">v142</span>
+    <span class="badge badge-deployed">운영 중</span>
+    <span class="ver-meta">2026-07-09 04:12 · 9,204 pkgs</span>
+    <span class="spacer"></span>
+    <button class="ghost btn-sm" disabled>현재 운영 버전</button>
+  </div>
+  <div class="version-item">
+    <span class="ver-no">v141</span>
+    <span class="ver-meta">… · <span class="delta-add">+40</span> <span class="delta-del">−16</span></span>
+    <span class="spacer"></span>
+    <button class="secondary btn-sm" hx-get="/deploy_modal/{{ repo }}/{{ v }}" hx-target="#modal">이 버전 배포</button>
+  </div>
+</div>
+```
+
+### 8. 상태 조각들
+- **배포 완료 배너 `#flash`** (`.flash-banner`): 성공 체크 원(`.flash-check`, 그려지는 SVG 체크) +
+  본문 + `.flash-sub` + `.flash-warn`(되돌리기 안내). 등장 시 페이드-업.
+- **데모 배너** (`.demo-banner`): 가짜 데이터 경고, 앰버 톤, 펄스 dot.
+- **연결 상태 칩** (`.status-line.status-ok|bad|loading|demo`): dot + 텍스트. ok는 펄스, loading은 blink.
+- **빈 상태** (`.empty-note` + `.empty-ico`/`.empty-title`/`.empty-sub`).
+- **에러 상태** (`.error-note`): 경고 아이콘 + 메시지, danger 톤.
+- **스켈레톤** (`.skeleton.skeleton-row`): 셔머 로딩. 표 초기/재조회 자리표시.
+- HTMX 스왑 중 페이드: `.htmx-swapping{opacity:.4}` 자동 적용(이미 CSS에 포함).
+
+---
+
+## Design Tokens (라이트 / `:root`)
+색은 `app.css`의 `:root`(라이트)와 `[data-theme="dark"]`(다크) 두 곳에서 정의되고, 컴포넌트는
+전부 이 변수를 참조하므로 **토큰만 손보면 라이트/다크가 함께 따라옵니다.**
+
+- 배경: `--bg #ffffff` · `--bg-alt #f9fafb` · `--surface #f2f4f6` · `--surface-2 #e8f3ff`(틴티드 블루)
+- 텍스트: `--text #191f28` · `--text-secondary #333d4b` · `--text-muted #6b7684` · `--text-dim #8b95a1`
+- 테두리: `--border #e5e8eb` · `--border-strong #d1d6db`
+- 액센트(Toss Blue를 살짝 톤다운): `--accent oklch(0.63 0.147 255)` · `--accent-hover oklch(0.55 0.16 255)`
+  · `--accent-soft #e8f3ff`
+- 상태: `--success-text #00a37a` · `--warning-text #c5700a` · `--danger #f04452` (+ `*-soft` 반투명 배경)
+- 라운드: 카드 `--radius-card 12px`, 버튼 8px(`--pico-border-radius`)
+- 그림자: `--shadow-card`(얇게) · `--shadow-card-hover` · `--shadow-modal`(무겁게)
+- 모션: `--ease cubic-bezier(0.32,0.72,0,1)` · `--dur-fast .12s` · `--dur .2s` · `--dur-slow .32s`
+- 타이포: 본문 `Pretendard Variable`, 숫자/버전/시각/저장소명은 `JetBrains Mono`(+ `tnum` tabular).
+  헤더 th는 한글 라벨이라 모노 제외.
+
+**모든 애니메이션은 `prefers-reduced-motion: reduce`에서 자동 비활성**(파일 맨 끝 미디어쿼리).
+
+## Interactions & Behavior
+- 버튼: hover 그림자, active `scale(0.97)`. `.is-loading`으로 스피너 교체.
+- 표: 행 hover 배경 전환, 정렬 화살표 회전, 검증 dot(pass)·연결 dot(ok) 은은한 펄스.
+- 진행률: 결정형 `<progress>` width 트랜지션, 초기엔 인디터미닛 바.
+- 모달: 배경 페이드 + 본문 scale/opacity 진입, 배경 스크롤 잠금(스크롤바 깜빡임 방지),
+  타입-투-컨펌(이름 일치 시에만 확정 활성 + 초록 체크 / 불일치 시 빨강 X).
+- 성공 배너: 체크 SVG stroke-dash 그리기 애니메이션.
+
+## 적용 순서 (Claude Code에게)
+1. 기존 `app/static/app.css`를 이 번들의 `app.css`로 교체.
+2. 위 "컴포넌트별 변경 + 필요 마크업"에 따라 각 Jinja2 템플릿에 새 요소(.card-top/.card-ico,
+   .search-ico, .modal-head/.warn-ico/.pv-box/.confirm-state 등)를 추가. **HTMX 훅·id·data 속성은 그대로.**
+3. `preview.html`을 브라우저로 열어 렌더 기준과 대조(라이트/다크 토글).
+4. `PULP_DEMO=true`로 데모 데이터 띄워 표/검색/정렬/모달 실동작 확인.
+5. 회귀 확인: `pytest -q`(현행 58 통과), `ruff check app`.
+
+## Files
+- `app.css` — 실제 산출물 (drop-in).
+- `preview.html` — 렌더 참고 하니스 (앱에 넣지 말 것).
+- `pico-shim.css` — 미리보기 전용 Pico 최소 흉내 (앱에 넣지 말 것).
diff --git a/design_handoff_console_redesign/app.css b/design_handoff_console_redesign/app.css
new file mode 100644
index 0000000..b8f537e
--- /dev/null
+++ b/design_handoff_console_redesign/app.css
@@ -0,0 +1,1234 @@
+/* 커스텀 스타일 — design-ref.md (Toss 스타일) 기반. Pico 뒤에 로드해 변수 오버라이드.
+   폰트는 폐쇄망 대비 로컬 동봉(static/fonts), CDN 의존 없음.
+
+   [재디자인 노트]
+   - 토큰(그림자/모션/포커스)을 추가해 라이트·다크가 함께 정돈되도록 함.
+   - hover/press/정렬/진행/모달 진입에 절제된 마이크로 인터랙션 추가.
+   - 확정 스타일: 요약카드=화이트+호버리프트, 표=제브라, 배포모달=중앙 경고형.
+   - 모든 모션은 prefers-reduced-motion 에서 비활성화(파일 맨 끝). */
+
+@font-face {
+  font-family: "Pretendard Variable";
+  font-weight: 45 920;
+  font-style: normal;
+  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) */
+  --bg: #ffffff;
+  --bg-alt: #f9fafb;
+  --surface: #f2f4f6;
+  --surface-2: #e8f3ff;
+  --text: #191f28;
+  --text-secondary: #333d4b;
+  --text-muted: #6b7684;
+  --text-dim: #8b95a1;
+  --border: #e5e8eb;
+  --border-strong: #d1d6db;
+  --accent: oklch(0.63 0.147 255); /* Toss Blue 계열이되 채도를 낮춰 눈부심(쨍) 완화 */
+  --accent-hover: oklch(0.55 0.16 255);
+  --accent-deep: #1e40af;
+  --accent-soft: #e8f3ff;
+  --success-text: #00a37a;
+  --success-soft: rgba(0, 200, 150, 0.12);
+  --warning-text: #c5700a;
+  --warning-soft: rgba(197, 112, 10, 0.12);
+  --danger: #f04452;
+  --danger-hover: #e0313f;
+  --danger-soft: rgba(240, 68, 82, 0.1);
+
+  --radius-card: 12px;
+
+  /* 그림자 — 단계형. design-ref §6: 얇은 카드 그림자 + 무거운 모달 그림자 */
+  --shadow-sm: 0 1px 2px rgba(25, 31, 40, 0.04);
+  --shadow-card: 0 1px 3px rgba(25, 31, 40, 0.05);
+  --shadow-card-hover: 0 4px 16px rgba(25, 31, 40, 0.09);
+  --shadow-modal: 0 12px 40px rgba(25, 31, 40, 0.18);
+
+  /* 모션 토큰 — 도구답게 짧고 자연스럽게 */
+  --ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --dur-fast: 0.12s;
+  --dur: 0.2s;
+  --dur-slow: 0.32s;
+  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
+
+  /* 영문/숫자(저장소명·버전·패키지수·시각)는 모노 — 도구다운 가독성 (design-ref §3).
+     혹시 섞이는 한글은 모노에 글리프가 없으니 한글 sans 로 폴백. */
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
+    "Apple SD Gothic Neo", "Noto Sans KR", monospace;
+
+  /* Pico 매핑 */
+  --pico-font-family-sans-serif: "Pretendard Variable", -apple-system,
+    BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR",
+    system-ui, sans-serif;
+  --pico-font-family: var(--pico-font-family-sans-serif);
+  --pico-line-height: 1.55;
+  --pico-border-radius: 8px;
+  --pico-background-color: var(--bg-alt);
+  --pico-color: var(--text-secondary);
+  --pico-h1-color: var(--text);
+  --pico-h2-color: var(--text);
+  --pico-h3-color: var(--text);
+  --pico-muted-color: var(--text-muted);
+  --pico-primary: #ffffff;
+  --pico-primary-background: var(--accent);
+  --pico-primary-hover-background: var(--accent-hover);
+  --pico-primary-border: var(--accent);
+  --pico-primary-hover-border: var(--accent-hover);
+  --pico-card-background-color: var(--bg);
+  --pico-card-border-color: var(--border);
+  --pico-card-box-shadow: var(--shadow-card);
+  color-scheme: light;
+}
+
+/* 다크 테마 — 토큰만 교체하면 컴포넌트는 자동으로 따라온다.
+   design-ref 는 다크를 기본으로 쓰지 말라 하므로 토글 옵션으로만 제공. */
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #1b1d23;
+  --bg-alt: #131419;
+  --surface: #262a33;
+  --surface-2: #1e2b44;
+  --text: #eceef2;
+  --text-secondary: #c3c9d2;
+  --text-muted: #8b95a1;
+  --text-dim: #6b7480;
+  --border: #2b2f39;
+  --border-strong: #3a404c;
+  --accent: #4d94ff;
+  --accent-hover: #6aa6ff;
+  --accent-deep: #2f6fd0;
+  --accent-soft: #1e2b44;
+  --success-text: #2ee0a8;
+  --success-soft: rgba(46, 224, 168, 0.14);
+  --warning-text: #ffb454;
+  --warning-soft: rgba(255, 180, 84, 0.14);
+  --danger: #ff6b78;
+  --danger-hover: #ff8591;
+  --danger-soft: rgba(255, 107, 120, 0.14);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-card-hover: 0 4px 18px rgba(0, 0, 0, 0.45);
+  --shadow-modal: 0 12px 44px rgba(0, 0, 0, 0.6);
+  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
+
+  --pico-background-color: var(--bg-alt);
+  --pico-color: var(--text-secondary);
+  --pico-h1-color: var(--text);
+  --pico-h2-color: var(--text);
+  --pico-h3-color: var(--text);
+  --pico-muted-color: var(--text-muted);
+  --pico-primary: #ffffff;
+  --pico-primary-background: var(--accent);
+  --pico-primary-hover-background: var(--accent-hover);
+  --pico-primary-border: var(--accent);
+  --pico-primary-hover-border: var(--accent-hover);
+  --pico-card-background-color: var(--bg);
+  --pico-card-border-color: var(--border);
+  --pico-card-box-shadow: var(--shadow-card);
+  --pico-form-element-background-color: var(--surface);
+  --pico-form-element-border-color: var(--border);
+  --pico-form-element-color: var(--text);
+  --pico-progress-background-color: var(--surface);
+}
+
+body {
+  background: var(--bg-alt);
+  color: var(--text-secondary);
+  -webkit-font-smoothing: antialiased;
+  transition:
+    background-color var(--dur) ease,
+    color var(--dur) ease;
+}
+
+main.container {
+  max-width: 1040px;
+  padding-block: 40px;
+}
+
+h1,
+h2,
+h3 {
+  color: var(--text);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+h2 {
+  font-size: 22px;
+  margin: 0;
+}
+
+section {
+  margin-bottom: 44px;
+}
+
+.mono {
+  font-family: var(--font-mono);
+  font-feature-settings: "tnum" 1;
+}
+
+/* 공통 포커스 링 — 키보드 접근성. 마우스 클릭엔 안 뜨게 focus-visible. */
+:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* 상단 내비 — 스크롤해도 상단 고정, 미세한 그림자로 레이어 분리 */
+.app-nav {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: color-mix(in srgb, var(--bg) 88%, transparent);
+  backdrop-filter: saturate(1.4) blur(10px);
+  border-bottom: 1px solid var(--border);
+}
+.app-nav .container {
+  max-width: 1040px;
+  padding-block: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.app-nav .brand {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.02em;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+}
+.app-nav .brand .accent {
+  color: var(--accent);
+}
+/* 브랜드 앞 로고 마크 — 차분한 단색(그라디언트 제거로 눈부심 완화) */
+.app-nav .brand .brand-mark {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  background: var(--accent);
+  display: inline-grid;
+  place-items: center;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 800;
+  box-shadow: var(--shadow-sm);
+  flex: none;
+}
+
+/* 테마 토글 (아이콘 버튼) */
+.theme-toggle {
+  --pico-background-color: transparent;
+  --pico-border-color: var(--border-strong);
+  --pico-color: var(--text-secondary);
+  width: auto;
+  margin: 0;
+  padding: 8px 10px;
+  line-height: 0;
+  border-radius: 9px;
+  transition:
+    background-color var(--dur-fast) ease,
+    border-color var(--dur-fast) ease,
+    transform var(--dur-fast) var(--ease);
+}
+.theme-toggle:hover {
+  --pico-background-color: var(--surface);
+  --pico-border-color: var(--text-dim);
+  --pico-color: var(--text);
+}
+.theme-toggle:active {
+  transform: scale(0.94);
+}
+.theme-toggle .icon {
+  width: 18px;
+  height: 18px;
+  transition: transform var(--dur) var(--ease);
+}
+.theme-toggle:hover .icon {
+  transform: rotate(20deg);
+}
+.theme-toggle .sun {
+  display: none;
+}
+.theme-toggle .moon {
+  display: inline-block;
+}
+[data-theme="dark"] .theme-toggle .moon {
+  display: none;
+}
+[data-theme="dark"] .theme-toggle .sun {
+  display: inline-block;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+/* 상태: 라벨 + 배지 한 줄 */
+.status-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.status-label {
+  font-size: 22px; /* 저장소 h2 와 동일 */
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text);
+}
+.status-row .status-line {
+  font-size: 14px;
+}
+
+/* ── 버튼 — Toss: radius 7~8, weight 600, 누름 피드백 (design-ref §4·§6) ── */
+button,
+[role="button"] {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  border-radius: 8px;
+  white-space: nowrap;
+  transition:
+    background-color var(--dur-fast) ease,
+    border-color var(--dur-fast) ease,
+    box-shadow var(--dur-fast) ease,
+    opacity var(--dur) ease,
+    transform var(--dur-fast) var(--ease);
+}
+button:not(:disabled):hover,
+[role="button"]:not(:disabled):hover {
+  box-shadow: var(--shadow-sm);
+}
+button:not(:disabled):active,
+[role="button"]:not(:disabled):active {
+  transform: scale(0.97);
+  box-shadow: none;
+}
+/* primary 눌림 시 더 짙은 파랑 (design-ref: pressed=accent-deep) */
+button[type="submit"]:not(.secondary):not(.ghost):not(.danger):active,
+button:not(.secondary):not(.ghost):not(.danger):not([role]):active {
+  --pico-primary-background: var(--accent-deep);
+  --pico-primary-border: var(--accent-deep);
+}
+/* 동기화 등 반복 노출 액션: 흰 배경 + 파란 글씨 + 옅은 파란 테두리.
+   표에 여러 개 떠도 번잡하지 않고, ghost(새로고침)와 확실히 구분됨. */
+button.secondary,
+[role="button"].secondary,
+a.secondary {
+  --pico-background-color: var(--bg);
+  --pico-border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
+  --pico-color: var(--accent);
+  font-weight: 600;
+}
+button.secondary:not(:disabled):hover,
+[role="button"].secondary:not(:disabled):hover {
+  --pico-background-color: var(--accent-soft);
+  --pico-border-color: var(--accent);
+}
+button.danger,
+[role="button"].danger {
+  --pico-background-color: var(--danger);
+  --pico-border-color: var(--danger);
+  --pico-color: #ffffff;
+}
+button.danger:not(:disabled):hover,
+[role="button"].danger:not(:disabled):hover {
+  --pico-background-color: var(--danger-hover);
+  --pico-border-color: var(--danger-hover);
+}
+/* 유틸리티(새로고침 등): 중립 ghost — 동기화(틴티드 블루)와 구분 */
+button.ghost,
+[role="button"].ghost {
+  --pico-background-color: transparent;
+  --pico-border-color: var(--border-strong);
+  --pico-color: var(--text-secondary);
+}
+button.ghost:hover,
+[role="button"].ghost:hover {
+  --pico-background-color: var(--surface);
+  --pico-border-color: var(--text-dim);
+  --pico-color: var(--text);
+}
+/* 아이콘 + 글자 버튼 */
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.btn-icon .icon {
+  flex: none;
+}
+button:disabled,
+[role="button"]:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+/* 표 안 액션 버튼: 컴팩트하되 글자는 또렷하게 */
+.btn-sm {
+  padding: 7px 14px;
+  font-size: 14px;
+  margin: 0;
+  width: auto;
+}
+
+/* 버튼 로딩 상태 — 텍스트를 스피너로 교체. .is-loading 토글로 사용.
+   (HTMX hx-disabled-elt 로 비활성화될 때 함께 붙이면 자연스러움) */
+button.is-loading,
+[role="button"].is-loading {
+  color: transparent !important;
+  position: relative;
+  pointer-events: none;
+}
+button.is-loading::after,
+[role="button"].is-loading::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 15px;
+  height: 15px;
+  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-top-color: var(--pico-color, #fff);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── 요약 카드 ── */
+.summary {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+}
+.summary .card {
+  position: relative;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+  padding: 20px 22px;
+  box-shadow: var(--shadow-card);
+  transition:
+    border-color var(--dur) ease,
+    box-shadow var(--dur) ease,
+    transform var(--dur) var(--ease);
+}
+.summary .card:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-card-hover);
+  transform: translateY(-2px);
+}
+/* 카드 상단 라벨 + 아이콘 칩 한 줄 */
+.summary .card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.summary .card-ico {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  background: var(--surface);
+  color: var(--text-muted);
+  flex: none;
+}
+.summary .card-ico .icon {
+  width: 18px;
+  height: 18px;
+}
+.summary .card.is-accent .card-ico {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.summary .card.is-success .card-ico {
+  background: var(--success-soft);
+  color: var(--success-text);
+}
+.summary .value {
+  font-family: var(--font-mono);
+  font-size: 34px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.1;
+  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: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+/* ── 표 (카드로 감싸기, hairline 행, hover) ── */
+.table-card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  box-shadow: var(--shadow-card);
+}
+.table-card table {
+  margin: 0;
+}
+.table-card thead th {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--bg-alt);
+  border-bottom: 1px solid var(--border);
+  padding-block: 13px;
+  position: sticky;
+  top: 0;
+}
+.table-card tbody td {
+  height: 56px;
+  font-size: 14px;
+  border-bottom: 1px solid var(--border);
+  padding-block: 12px;
+  vertical-align: middle;
+}
+.table-card tbody tr {
+  transition: background-color var(--dur-fast) ease;
+}
+.table-card tbody tr:last-child td {
+  border-bottom: none;
+}
+/* 2B안(확정): 제브라 스트라이프 + 틴티드 블루 hover.
+   짝수 행에 아주 옅은 톤을 깔아 넓은 표에서도 행이 눈으로 잘 따라감. */
+.table-card tbody tr:nth-child(even) {
+  background: color-mix(in srgb, var(--bg-alt) 55%, var(--bg));
+}
+.table-card tbody tr:hover {
+  background: var(--surface-2);
+}
+.repo-name a {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--text);
+  text-decoration: none;
+  transition: color var(--dur-fast) ease;
+}
+.repo-name a:hover {
+  color: var(--accent);
+}
+/* 숫자/버전/시각: 모노 + tabular — 본문 셀(td)과 .mono 에만 적용.
+   헤더(th)는 한글 라벨이라 모노 제외(Pretendard 유지). */
+.mono,
+td.num {
+  font-family: var(--font-mono);
+  font-feature-settings: "tnum" 1;
+}
+td.num,
+th.num {
+  text-align: right;
+}
+
+/* 액션 셀: 버튼↔진행률↔완료배지로 내용이 바뀌어도 행 높이·열 너비가 안 변하게
+   너비·높이를 고정한 박스로 만든다. 넘치는 내용은 클립. */
+.row-action {
+  display: flex;
+  align-items: center;
+  width: 172px;
+  height: 36px;
+  overflow: hidden;
+}
+
+/* ── 검증 배지 칩 (dot + 라벨, 이모지 없음) ── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 11px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+.badge::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  flex: none;
+}
+.badge-pass {
+  color: var(--success-text);
+  background: var(--success-soft);
+}
+/* PASS 배지의 dot 은 살짝 은은한 펄스 (통과했음을 안심시키는 신호) */
+.badge-pass::before {
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-text) 55%, transparent);
+  animation: dot-pulse 2.4s var(--ease) infinite;
+}
+@keyframes dot-pulse {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-text) 45%, transparent); }
+  60%  { box-shadow: 0 0 0 5px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+.badge-warn {
+  color: var(--warning-text);
+  background: var(--warning-soft);
+}
+.badge-unset {
+  color: var(--text-muted);
+  background: var(--surface);
+}
+.badge-deployed {
+  color: var(--accent-hover);
+  background: var(--accent-soft);
+}
+
+/* 뒤로가기(대시보드) 버튼 — ghost, 제목과 간격 확보 */
+.back-btn {
+  margin-bottom: 20px;
+  text-decoration: none;
+}
+
+/* 버전 검증 상세 */
+.verify-detail {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.verify-detail small {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+/* 버전 스냅샷 리스트 */
+.version-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+  background: var(--bg);
+  box-shadow: var(--shadow-card);
+  margin-bottom: 12px;
+  transition:
+    border-color var(--dur) ease,
+    box-shadow var(--dur) ease;
+}
+.version-item:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-card-hover);
+}
+.version-item .ver-no {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--text);
+}
+.version-item .ver-meta {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+.version-item .spacer {
+  margin-left: auto;
+}
+
+/* 패키지 증감 */
+.delta-add {
+  color: var(--success-text);
+  font-weight: 600;
+}
+.delta-del {
+  color: var(--danger);
+  font-weight: 600;
+}
+
+/* ── 데모(가짜 데이터) 모드 경고 배너 — 전 페이지 최상단. 실연동 오인 방지. ── */
+.demo-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  background: var(--warning-soft);
+  color: var(--warning-text);
+  font-size: 14px;
+  font-weight: 500;
+  border-bottom: 1px solid color-mix(in srgb, var(--warning-text) 28%, transparent);
+}
+.demo-banner strong {
+  font-weight: 700;
+}
+.demo-banner .demo-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: dot-pulse-warn 2s var(--ease) infinite;
+}
+@keyframes dot-pulse-warn {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning-text) 45%, transparent); }
+  60%  { box-shadow: 0 0 0 6px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+/* 연결 배지의 데모 변형 */
+.status-demo {
+  color: var(--warning-text);
+  background: var(--warning-soft);
+}
+
+/* ── 배포 완료 배너 (#flash) ── */
+.flash-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 4px 0 22px;
+  padding: 13px 16px;
+  border-radius: 10px;
+  background: var(--success-soft);
+  color: var(--success-text);
+  font-size: 15px;
+  font-weight: 600;
+  border: 1px solid color-mix(in srgb, var(--success-text) 24%, transparent);
+  animation: flash-in var(--dur-slow) var(--ease);
+}
+@keyframes flash-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+/* 성공 체크 원 — dot 대신 그려지는 체크 애니메이션 */
+.flash-banner .flash-check {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--success-text);
+  display: grid;
+  place-items: center;
+}
+.flash-banner .flash-check svg {
+  width: 12px;
+  height: 12px;
+  stroke: #fff;
+  stroke-width: 3;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 20;
+  stroke-dashoffset: 20;
+  animation: check-draw 0.4s var(--ease) 0.12s forwards;
+}
+@keyframes check-draw {
+  to { stroke-dashoffset: 0; }
+}
+.flash-banner .flash-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.flash-banner .flash-sub {
+  color: var(--text-muted);
+  font-weight: 500;
+  font-size: 13px;
+}
+.flash-banner .flash-warn {
+  margin-left: auto;
+  color: var(--warning-text);
+  font-weight: 500;
+  font-size: 13px;
+}
+
+/* ── 배포 확인 모달 ── */
+#modal[open],
+dialog.deploy-dialog[open] {
+  animation: backdrop-in var(--dur) ease;
+}
+@keyframes backdrop-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+/* 모달이 열릴 때 배경 스크롤 잠금 + 다이얼로그 overflow 허용 → 순간 스크롤바 깜뱡임 제거 */
+html:has(dialog[open]) {
+  overflow: hidden;
+}
+dialog.deploy-dialog,
+dialog#modal {
+  overflow: visible;
+}
+.deploy-modal {
+  width: min(520px, 92vw);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-modal);
+  padding: 0;
+  overflow: hidden;
+  animation: modal-in var(--dur-slow) var(--ease);
+}
+@keyframes modal-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}
+/* 위험 확인 아이콘 — 중앙 정렬 원형(의식적·경고적). 모달 헤더. */
+.deploy-modal .modal-head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+  padding: 26px 24px 6px;
+}
+.deploy-modal .modal-head .warn-ico {
+  flex: none;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+.deploy-modal .modal-head .warn-ico svg {
+  width: 26px;
+  height: 26px;
+}
+.deploy-modal .modal-head h3 {
+  font-size: 21px;
+  margin: 0;
+  color: var(--text);
+}
+.deploy-modal .modal-head .head-sub {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--danger);
+  margin-top: 2px;
+}
+.deploy-modal .modal-body {
+  padding: 20px 24px 24px;
+}
+.deploy-note {
+  font-size: 15px;
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+}
+.deploy-note .repo-hl {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: var(--text);
+}
+/* 현재 → 대상 프리뷰: 카드형 before/after */
+.deploy-preview {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: stretch;
+  gap: 10px;
+  margin: 0 0 20px;
+}
+.deploy-preview .pv-box {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px 14px;
+}
+.deploy-preview .pv-box.pv-target {
+  background: var(--accent-soft);
+  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
+}
+.deploy-preview .pv-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+}
+.deploy-preview .pv-target .pv-label {
+  color: var(--accent);
+}
+.deploy-preview .pv-ver {
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1.15;
+}
+.deploy-preview .pv-pkg {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+.deploy-preview .pv-arrow {
+  align-self: center;
+  color: var(--text-dim);
+  display: grid;
+  place-items: center;
+}
+.deploy-preview .pv-arrow svg {
+  width: 22px;
+  height: 22px;
+}
+
+/* 타입-투-컨펌 — 저장소 이름을 정확히 입력해야 확정 버튼이 열림 */
+.confirm-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+.confirm-label .repo-hl {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: var(--text);
+  background: var(--surface);
+  padding: 1px 7px;
+  border-radius: 5px;
+}
+.confirm-field {
+  position: relative;
+  margin-top: 8px;
+}
+.confirm-label input {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  --pico-form-element-spacing-vertical: 0.6rem;
+  height: auto;
+  padding-right: 40px;
+}
+/* 입력 상태 시각화: 비어있음(중립) → 불일치(빨강) → 일치(초록 체크) */
+.confirm-field .confirm-state {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  opacity: 0;
+  transition: opacity var(--dur) ease;
+}
+.confirm-field.is-valid input {
+  border-color: var(--success-text);
+  box-shadow: 0 0 0 3px var(--success-soft);
+}
+.confirm-field.is-valid .confirm-state.ok {
+  opacity: 1;
+  color: var(--success-text);
+}
+.confirm-field.is-invalid input {
+  border-color: var(--danger);
+}
+.confirm-field.is-invalid .confirm-state.bad {
+  opacity: 1;
+  color: var(--danger);
+}
+.confirm-hint {
+  font-size: 12px;
+  margin-top: 6px;
+  min-height: 1em;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+.confirm-field.is-invalid ~ .confirm-hint {
+  color: var(--danger);
+}
+.confirm-field.is-valid ~ .confirm-hint {
+  color: var(--success-text);
+}
+/* 불일치로 확정 버튼 누르려 하면 흔들림 (JS 로 .shake 토글) */
+.confirm-field.shake {
+  animation: shake 0.32s var(--ease);
+}
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-6px); }
+  40% { transform: translateX(6px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(4px); }
+}
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  margin-top: 22px;
+}
+.modal-actions button {
+  width: auto;
+  margin: 0;
+  padding: 11px 20px;
+  font-size: 15px;
+}
+
+/* ── 동기화 진행률 바 ── */
+.sync-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 150px;
+}
+.sync-progress progress {
+  margin: 0;
+  width: 100%;
+  height: 6px;
+  border-radius: 999px;
+}
+.sync-progress small {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-feature-settings: "tnum" 1;
+}
+/* 진행 중인 결정형 바 위에 흐르는 shimmer — 값(width)은 progress 가 담당,
+   shimmer 는 "지금 살아있음"을 보여주는 오버레이 */
+.sync-progress {
+  position: relative;
+}
+.sync-progress.is-active progress::after {
+  content: "";
+}
+.sync-progress .sync-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.sync-progress .sync-pct {
+  color: var(--accent);
+  font-weight: 700;
+}
+/* 값을 모르는 초기 상태용 인디터미닛 바 */
+.sync-progress.indeterminate progress {
+  background:
+    linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat,
+    var(--pico-progress-background-color, var(--surface));
+  background-size: 40% 100%;
+  animation: indeterminate 1.2s var(--ease) infinite;
+}
+@keyframes indeterminate {
+  0%   { background-position: -40% 0; }
+  100% { background-position: 140% 0; }
+}
+
+/* ── 연결 상태 칩 (dot + 텍스트) ── */
+.status-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 14px;
+  background: var(--surface);
+}
+.status-line::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  flex: none;
+}
+.status-ok {
+  color: var(--success-text);
+  background: var(--success-soft);
+}
+.status-ok::before {
+  animation: dot-pulse 2.4s var(--ease) infinite;
+}
+.status-bad {
+  color: var(--danger);
+  background: var(--danger-soft);
+}
+.status-loading {
+  color: var(--text-muted);
+}
+.status-loading::before {
+  animation: blink 1s steps(2, start) infinite;
+}
+@keyframes blink {
+  50% { opacity: 0.3; }
+}
+
+/* ── 검색 툴바 / 정렬 헤더 / 페이저 ── */
+.list-toolbar {
+  margin-bottom: 14px;
+  position: relative;
+}
+.list-toolbar .repo-search {
+  width: 100%;
+  margin: 0;
+  font-size: 14px;
+  height: auto;
+  /* 좌측 돋보기 아이콘 자리 확보 (아이콘 left:13 + 16px → 텍스트 40px 부터) */
+  padding: 0.62rem 14px 0.62rem 40px;
+}
+.list-toolbar .search-ico {
+  position: absolute;
+  left: 13px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: var(--text-dim);
+  pointer-events: none;
+}
+.table-card thead th a.th-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--dur-fast) ease;
+}
+.table-card thead th a.th-sort:hover {
+  color: var(--text-secondary);
+}
+.table-card thead th a.th-sort.is-active {
+  color: var(--accent);
+}
+.sort-ind {
+  font-size: 11px;
+  transition: transform var(--dur) var(--ease);
+  display: inline-block;
+}
+.th-sort.is-active.desc .sort-ind {
+  transform: rotate(180deg);
+}
+.pager {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 14px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 13px;
+}
+.pager button {
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+/* ── 빈 상태 / 에러 상태 ── */
+.empty-note {
+  padding: 48px 16px;
+  color: var(--text-muted);
+  text-align: center;
+}
+.empty-note .empty-ico {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 12px;
+  color: var(--text-dim);
+  display: grid;
+  place-items: center;
+}
+.empty-note .empty-title {
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: 15px;
+}
+.empty-note .empty-sub {
+  font-size: 13px;
+  margin-top: 4px;
+}
+.error-note {
+  padding: 20px;
+  border-radius: 10px;
+  background: var(--danger-soft);
+  color: var(--danger);
+  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* ── 스켈레톤 로딩 (표 초기/재조회) ── */
+.skeleton {
+  background: linear-gradient(
+      90deg,
+      var(--surface) 25%,
+      color-mix(in srgb, var(--surface) 60%, var(--bg)) 37%,
+      var(--surface) 63%
+    );
+  background-size: 400% 100%;
+  border-radius: 6px;
+  animation: skeleton 1.4s ease infinite;
+}
+@keyframes skeleton {
+  0% { background-position: 100% 0; }
+  100% { background-position: 0 0; }
+}
+.skeleton-row {
+  height: 16px;
+}
+
+/* HTMX 요청 중 페이드 (hx-swap 대상에 자동 적용) */
+.htmx-swapping {
+  opacity: 0.4;
+  transition: opacity var(--dur) ease;
+}
+tr.htmx-request .row-action button {
+  opacity: 0.6;
+}
+
+@media (max-width: 640px) {
+  .summary {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .deploy-preview {
+    grid-template-columns: 1fr;
+  }
+  .deploy-preview .pv-arrow {
+    transform: rotate(90deg);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   모션 최소화 선호 존중 (design-ref §6 취지)
+   ───────────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+  .summary .card:hover {
+    transform: none;
+  }
+}
diff --git a/design_handoff_console_redesign/pico-shim.css b/design_handoff_console_redesign/pico-shim.css
new file mode 100644
index 0000000..0a08361
--- /dev/null
+++ b/design_handoff_console_redesign/pico-shim.css
@@ -0,0 +1,142 @@
+/* ─────────────────────────────────────────────────────────────
+   pico-shim.css — 미리보기 전용 (배포 대상 아님)
+   실제 앱은 Pico.css v2를 로드합니다. 폐쇄망 미리보기에서
+   외부 CDN 없이 화면을 재현하려고, app.css가 참조하는 --pico-*
+   변수 위에서 동작하는 최소 기본 스타일만 담았습니다.
+   ───────────────────────────────────────────────────────────── */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html {
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+  font-family: var(--pico-font-family, system-ui, sans-serif);
+  font-size: 16px;
+  line-height: var(--pico-line-height, 1.5);
+  background: var(--pico-background-color);
+  color: var(--pico-color);
+}
+.container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: 20px;
+}
+h1, h2, h3, h4 {
+  margin: 0 0 0.4em;
+  line-height: 1.2;
+}
+h1 { color: var(--pico-h1-color); }
+h2 { color: var(--pico-h2-color); }
+h3 { color: var(--pico-h3-color); }
+p { margin: 0 0 1rem; }
+a { color: var(--accent); }
+small { font-size: 0.8125em; }
+
+/* 폼 요소 */
+input, button, select, textarea {
+  font-family: inherit;
+  font-size: 1rem;
+}
+input[type="search"],
+input[type="text"],
+input:not([type]) {
+  display: block;
+  width: 100%;
+  padding: calc(var(--pico-form-element-spacing-vertical, 0.75rem)) 0.875rem;
+  background: var(--pico-form-element-background-color, var(--surface));
+  color: var(--pico-form-element-color, var(--text));
+  border: 1px solid var(--pico-form-element-border-color, var(--border));
+  border-radius: var(--pico-border-radius, 7px);
+  outline: none;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+input::placeholder { color: var(--text-dim); }
+input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+/* 버튼 기본 (app.css가 세부를 오버라이드).
+   버튼 요소에서 --pico-background-color 등을 primary 로 "리셋"해 두면,
+   app.css 의 .secondary/.ghost/.danger 가 이 변수를 덮어써서 실제 Pico처럼 동작. */
+button,
+[role="button"] {
+  display: inline-block;
+  padding: 11px 18px;
+  --pico-background-color: var(--pico-primary-background, var(--accent));
+  --pico-border-color: var(--pico-primary-border, var(--accent));
+  --pico-color: var(--pico-primary, #fff);
+  background: var(--pico-background-color);
+  color: var(--pico-color);
+  border: 1px solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius, 7px);
+  cursor: pointer;
+  font-size: 1rem;
+}
+button:hover,
+[role="button"]:hover {
+  --pico-background-color: var(--pico-primary-hover-background, var(--accent-hover));
+  --pico-border-color: var(--pico-primary-hover-border, var(--accent-hover));
+}
+
+/* 표 */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+th, td {
+  padding: 0.75rem 1rem;
+}
+
+/* 진행바 */
+progress {
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: 6px;
+  border: none;
+  border-radius: 999px;
+  background: var(--pico-progress-background-color, var(--surface));
+  overflow: hidden;
+}
+progress::-webkit-progress-bar {
+  background: var(--pico-progress-background-color, var(--surface));
+  border-radius: 999px;
+}
+progress::-webkit-progress-value {
+  background: var(--accent);
+  border-radius: 999px;
+  transition: width 0.3s ease;
+}
+progress::-moz-progress-bar {
+  background: var(--accent);
+  border-radius: 999px;
+}
+
+/* 카드/아티클 */
+article {
+  background: var(--pico-card-background-color, var(--bg));
+  border: 1px solid var(--pico-card-border-color, var(--border));
+  border-radius: var(--pico-border-radius, 7px);
+  padding: 1.25rem;
+}
+
+/* 다이얼로그 */
+dialog {
+  margin: auto;
+  border: none;
+  padding: 0;
+  background: transparent;
+  color: var(--pico-color);
+  max-width: 90vw;
+}
+dialog::backdrop {
+  background: rgba(15, 20, 30, 0.45);
+}
diff --git a/design_handoff_console_redesign/preview.html b/design_handoff_console_redesign/preview.html
new file mode 100644
index 0000000..34d9942
--- /dev/null
+++ b/design_handoff_console_redesign/preview.html
@@ -0,0 +1,425 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>폐쇄망 콘솔 — 재디자인 미리보기</title>
+  <!-- FOUC 방지 + 테마 복원 (실제 base.html 의 인라인 스크립트와 동일 동작) -->
+  <script>
+    (function () {
+      var t = localStorage.getItem("theme");
+      if (t) document.documentElement.setAttribute("data-theme", t);
+    })();
+  </script>
+  <link rel="stylesheet" href="pico-shim.css" />
+  <link rel="stylesheet" href="app.css" />
+  <style>
+    /* 미리보기 하니스 전용 (배포 CSS 아님) */
+    .demo-note {
+      max-width: 1040px;
+      margin: 28px auto 0;
+      padding: 0 20px;
+    }
+    .demo-note .callout {
+      background: var(--surface-2);
+      color: var(--accent-hover);
+      border-radius: 12px;
+      padding: 14px 18px;
+      font-size: 14px;
+      line-height: 1.6;
+    }
+    .state-grid { display: grid; gap: 18px; }
+    hr.sep { border: none; border-top: 1px solid var(--border); margin: 0 0 28px; }
+  </style>
+</head>
+<body>
+  <!-- 데모 배너 -->
+  <div class="demo-banner">
+    <span class="demo-dot"></span>
+    <span><strong>데모 모드</strong> · 가짜 저장소 데이터입니다. 실제 Pulp 서버와 연동되어 있지 않습니다.</span>
+  </div>
+
+  <!-- 상단 내비 -->
+  <nav class="app-nav">
+    <div class="container">
+      <p class="brand"><span class="brand-mark">P</span>Pulp <span class="accent">Console</span></p>
+      <button class="theme-toggle" id="theme-toggle" aria-label="테마 전환">
+        <svg class="icon moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        <svg class="icon sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+      </button>
+    </div>
+  </nav>
+
+  <div class="demo-note">
+    <div class="callout">
+      <b>재디자인 미리보기 (확정안).</b> 요약 카드 = 화이트+호버 리프트, 저장소 표 = 제브라, 배포 모달 = 중앙 경고형.
+      동기화 버튼은 흰 배경·파란 글씨로, 새로고침(중립 아웃라인)과 구분됩니다. 우상단 아이콘으로 라이트·다크를 전환해 보세요.
+    </div>
+  </div>
+
+  <main class="container">
+
+    <!-- ═══════════ 대시보드 ═══════════ -->
+    <section>
+      <div class="status-row" style="margin-bottom:24px">
+        <span class="status-label">연결 상태</span>
+        <span class="status-line status-ok">Pulp 서버 연결됨</span>
+        <span class="status-line status-demo">데모 데이터</span>
+      </div>
+
+      <div class="summary">
+        <div class="card is-accent">
+          <div class="card-top">
+            <span class="label">전체 저장소</span>
+            <span class="card-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span>
+          </div>
+          <div class="value is-accent">18</div>
+        </div>
+        <div class="card">
+          <div class="card-top">
+            <span class="label">동기화 중</span>
+            <span class="card-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg></span>
+          </div>
+          <div class="value">2</div>
+        </div>
+        <div class="card is-success">
+          <div class="card-top">
+            <span class="label">GPG 통과</span>
+            <span class="card-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.4 8.5 8 10 4.6-1.5 8-5 8-10V5z"/><path d="m9 12 2 2 4-4"/></svg></span>
+          </div>
+          <div class="value is-success">16</div>
+        </div>
+        <div class="card">
+          <div class="card-top">
+            <span class="label">총 패키지</span>
+            <span class="card-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.3 7 8.7 5 8.7-5M12 22V12"/></svg></span>
+          </div>
+          <div class="value">48,120</div>
+        </div>
+      </div>
+
+      <div class="section-head">
+        <h2>저장소</h2>
+        <button class="ghost btn-sm btn-icon" id="refresh-btn">
+          <svg class="icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>
+          새로고침
+        </button>
+      </div>
+
+      <div class="list-toolbar">
+        <svg class="search-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+        <input class="repo-search" type="search" placeholder="저장소 이름으로 검색…" />
+      </div>
+
+      <div class="table-card" id="repo-table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th><a class="th-sort is-active" href="#">저장소 <span class="sort-ind">▲</span></a></th>
+              <th>검증</th>
+              <th><a class="th-sort" href="#">최신 버전</a></th>
+              <th class="num"><a class="th-sort" href="#">패키지</a></th>
+              <th><a class="th-sort" href="#">마지막 동기화</a></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody id="repo-list">
+            <tr>
+              <td class="repo-name"><a href="#versions">rhel8-baseos</a></td>
+              <td><span class="badge badge-pass">GPG 통과</span></td>
+              <td class="mono">v142</td>
+              <td class="num">9,204</td>
+              <td class="mono">2026-07-09 04:12</td>
+              <td>
+                <div class="row-action">
+                  <button class="secondary btn-sm btn-icon" onclick="document.getElementById('modal').showModal()">
+                    <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>
+                    동기화
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td class="repo-name"><a href="#versions">rhel8-appstream</a></td>
+              <td><span class="badge badge-pass">GPG 통과</span></td>
+              <td class="mono">v98</td>
+              <td class="num">12,880</td>
+              <td class="mono">동기화 중…</td>
+              <td>
+                <div class="row-action">
+                  <div class="sync-progress is-active">
+                    <div class="sync-head">
+                      <small>동기화 중</small>
+                      <small class="sync-pct">64%</small>
+                    </div>
+                    <progress value="64" max="100"></progress>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td class="repo-name"><a href="#versions">ubuntu2204-main</a></td>
+              <td><span class="badge badge-warn">서명 확인 필요</span></td>
+              <td class="mono">v51</td>
+              <td class="num">6,412</td>
+              <td class="mono">2026-07-08 23:40</td>
+              <td>
+                <div class="row-action">
+                  <button class="secondary btn-sm btn-icon" onclick="document.getElementById('modal').showModal()">
+                    <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>
+                    동기화
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td class="repo-name"><a href="#versions">epel8-extras</a></td>
+              <td><span class="badge badge-deployed">운영 배포됨</span></td>
+              <td class="mono">v220</td>
+              <td class="num">3,051</td>
+              <td class="mono">2026-07-09 01:05</td>
+              <td>
+                <div class="row-action">
+                  <button class="secondary btn-sm btn-icon" onclick="document.getElementById('modal').showModal()">
+                    <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>
+                    동기화
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td class="repo-name"><a href="#versions">centos-stream9</a></td>
+              <td><span class="badge badge-unset">미검증</span></td>
+              <td class="mono">v7</td>
+              <td class="num">1,120</td>
+              <td class="mono">2026-07-07 18:22</td>
+              <td>
+                <div class="row-action">
+                  <button class="secondary btn-sm btn-icon" onclick="document.getElementById('modal').showModal()">
+                    <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>
+                    동기화
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="pager">
+          <button class="ghost btn-sm" disabled>이전</button>
+          <span class="mono">1–5 / 18</span>
+          <button class="ghost btn-sm">다음</button>
+        </div>
+      </div>
+    </section>
+
+    <hr class="sep" />
+
+    <!-- ═══════════ 상태 · 인터랙션 데모 ═══════════ -->
+    <section>
+      <div class="section-head"><h2>상태 · 인터랙션 데모</h2></div>
+      <div class="state-grid">
+        <div class="flash-banner">
+          <span class="flash-check"><svg viewBox="0 0 24 24"><path d="m5 13 4 4L19 7"/></svg></span>
+          <span>운영 배포 완료 · <span class="mono">rhel8-baseos v142</span></span>
+          <span class="flash-sub">3,204개 패키지 반영</span>
+          <span class="flash-warn">되돌리기: 이전 버전 재배포</span>
+        </div>
+
+        <div class="table-card" style="padding:20px">
+          <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap">
+            <button class="secondary" id="sync-demo-btn">동기화 시작 (진행 애니메이션)</button>
+            <div class="sync-progress" id="sync-demo" style="width:220px;display:none">
+              <div class="sync-head"><small id="sync-demo-label">준비 중</small><small class="sync-pct" id="sync-demo-pct">0%</small></div>
+              <progress id="sync-demo-bar" value="0" max="100"></progress>
+            </div>
+            <button class="secondary" style="width:auto" id="loading-demo">로딩 상태</button>
+          </div>
+        </div>
+
+        <div class="table-card">
+          <div class="empty-note">
+            <span class="empty-ico"><svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></span>
+            <div class="empty-title">검색 결과가 없습니다</div>
+            <div class="empty-sub"><span class="mono">"nginx"</span> 와 일치하는 저장소가 없어요. 다른 키워드로 검색해 보세요.</div>
+          </div>
+        </div>
+
+        <div class="error-note">
+          <svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg>
+          <span>Pulp 서버에 연결할 수 없습니다. 네트워크 및 서비스 상태를 확인하세요.</span>
+        </div>
+
+        <div class="table-card" style="padding:18px">
+          <div style="display:flex;flex-direction:column;gap:14px">
+            <div class="skeleton skeleton-row" style="width:40%"></div>
+            <div class="skeleton skeleton-row" style="width:70%"></div>
+            <div class="skeleton skeleton-row" style="width:55%"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <hr class="sep" />
+
+    <!-- ═══════════ 버전 목록 (저장소 상세 — 저장소 이름 클릭 시 화면) ═══════════ -->
+    <section id="versions">
+      <a href="#" role="button" class="ghost btn-sm btn-icon back-btn">
+        <svg class="icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+        대시보드
+      </a>
+      <div class="section-head">
+        <h2 class="mono">rhel8-baseos</h2>
+        <button class="secondary btn-sm btn-icon" onclick="document.getElementById('modal').showModal()">
+          <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>
+          동기화
+        </button>
+      </div>
+
+      <div class="verify-detail">
+        <span class="badge badge-pass">GPG 통과</span>
+        <small>서명 검증 통과 · 2026-07-09 04:12 · 키 0x3A9F&hellip;C21</small>
+      </div>
+
+      <div class="version-list">
+        <div class="version-item">
+          <span class="ver-no">v142</span>
+          <span class="badge badge-deployed">운영 중</span>
+          <span class="ver-meta">2026-07-09 04:12 · 9,204 pkgs</span>
+          <span class="spacer"></span>
+          <button class="ghost btn-sm" disabled>현재 운영 버전</button>
+        </div>
+        <div class="version-item">
+          <span class="ver-no">v141</span>
+          <span class="ver-meta">2026-07-08 22:03 · 9,180 pkgs · <span class="delta-add">+40</span> <span class="delta-del">−16</span></span>
+          <span class="spacer"></span>
+          <button class="secondary btn-sm" onclick="document.getElementById('modal').showModal()">이 버전 배포</button>
+        </div>
+        <div class="version-item">
+          <span class="ver-no">v140</span>
+          <span class="ver-meta">2026-07-08 09:15 · 9,001 pkgs · <span class="delta-add">+112</span></span>
+          <span class="spacer"></span>
+          <button class="secondary btn-sm" onclick="document.getElementById('modal').showModal()">이 버전 배포</button>
+        </div>
+        <div class="version-item">
+          <span class="ver-no">v139</span>
+          <span class="ver-meta">2026-07-07 20:41 · 8,889 pkgs</span>
+          <span class="spacer"></span>
+          <button class="secondary btn-sm" onclick="document.getElementById('modal').showModal()">이 버전 배포</button>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- ═══════════ 배포 확인 모달 (중앙 경고형) ═══════════ -->
+  <dialog id="modal">
+    <article class="deploy-modal">
+      <div class="modal-head">
+        <span class="warn-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg></span>
+        <div>
+          <h3>운영 배포 확인</h3>
+          <span class="head-sub">되돌리기 어려운 작업입니다</span>
+        </div>
+      </div>
+      <div class="modal-body">
+        <p class="deploy-note" style="text-align:center"><span class="repo-hl">rhel8-baseos</span> 저장소를 운영에 배포합니다.</p>
+        <div class="deploy-preview">
+          <div class="pv-box">
+            <div class="pv-label">현재 (운영)</div>
+            <div class="pv-ver">v140</div>
+            <div class="pv-pkg">9,001 pkgs</div>
+          </div>
+          <div class="pv-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div>
+          <div class="pv-box pv-target">
+            <div class="pv-label">대상</div>
+            <div class="pv-ver">v142</div>
+            <div class="pv-pkg">9,204 pkgs · <span class="delta-add">+203</span></div>
+          </div>
+        </div>
+        <label class="confirm-label">확인을 위해 저장소 이름 <span class="repo-hl">rhel8-baseos</span> 을 입력하세요.
+          <div class="confirm-field" data-confirm="rhel8-baseos">
+            <input type="text" autocomplete="off" placeholder="rhel8-baseos" />
+            <svg class="confirm-state ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>
+            <svg class="confirm-state bad" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+          </div>
+        </label>
+        <div class="modal-actions">
+          <button class="ghost" onclick="this.closest('dialog').close()">취소</button>
+          <button class="danger" id="deploy-confirm-btn" disabled>운영에 배포</button>
+        </div>
+      </div>
+    </article>
+  </dialog>
+
+  <script>
+    // 테마 토글 (실제 base.html 동작과 동일)
+    document.getElementById("theme-toggle").addEventListener("click", function () {
+      var el = document.documentElement;
+      var next = el.getAttribute("data-theme") === "dark" ? "light" : "dark";
+      el.setAttribute("data-theme", next);
+      localStorage.setItem("theme", next);
+    });
+
+    // 타입-투-컨펌: 입력값이 data-confirm 과 일치하면 확정 버튼 활성 + 시각 상태
+    (function () {
+      var field = document.querySelector("#modal .confirm-field");
+      var input = field.querySelector("input");
+      var target = field.getAttribute("data-confirm");
+      var btn = document.getElementById("deploy-confirm-btn");
+      input.addEventListener("input", function () {
+        var v = input.value.trim();
+        field.classList.remove("is-valid", "is-invalid");
+        if (v === "") { btn.disabled = true; return; }
+        if (v === target) {
+          field.classList.add("is-valid");
+          btn.disabled = false;
+        } else {
+          field.classList.add("is-invalid");
+          btn.disabled = true;
+        }
+      });
+      btn.addEventListener("click", function () {
+        if (btn.disabled) return;
+        btn.classList.add("is-loading");
+        btn.textContent = "배포 중";
+        setTimeout(function () {
+          btn.closest("dialog").close();
+          btn.classList.remove("is-loading");
+          btn.textContent = "운영에 배포";
+          btn.disabled = true;
+          field.classList.remove("is-valid", "is-invalid");
+          input.value = "";
+        }, 1400);
+      });
+    })();
+
+    // 진행바 데모
+    document.getElementById("sync-demo-btn").addEventListener("click", function () {
+      var wrap = document.getElementById("sync-demo");
+      var bar = document.getElementById("sync-demo-bar");
+      var pct = document.getElementById("sync-demo-pct");
+      var label = document.getElementById("sync-demo-label");
+      wrap.style.display = "flex";
+      wrap.classList.add("indeterminate");
+      label.textContent = "연결 중…";
+      var v = 0;
+      setTimeout(function () {
+        wrap.classList.remove("indeterminate");
+        label.textContent = "패키지 내려받는 중";
+        var t = setInterval(function () {
+          v += Math.max(1, Math.round((100 - v) * 0.12));
+          if (v >= 100) { v = 100; clearInterval(t); label.textContent = "완료"; }
+          bar.value = v;
+          pct.textContent = v + "%";
+        }, 240);
+      }, 900);
+    });
+
+    // 로딩 버튼 데모
+    document.getElementById("loading-demo").addEventListener("click", function () {
+      var b = this;
+      b.classList.add("is-loading");
+      setTimeout(function () { b.classList.remove("is-loading"); }, 1600);
+    });
+  </script>
+</body>
+</html>