feat(ui): 콘솔 재디자인 적용 (Toss 스타일) + Pico v2 호환 수정

디자인 핸드오프(design_handoff_console_redesign)를 실제 앱에 반영.
CSS 드롭인 교체 + 최소 마크업 추가, HTMX 훅·id·data 속성은 모두 보존.

- app.css: 재디자인 토큰/컴포넌트로 교체(요약카드 호버 리프트, 표
  제브라, 중앙 경고형 배포 모달, secondary/ghost/danger 버튼 체계,
  진행률·상태칩·스켈레톤 등).
- base.html: 브랜드 로고 큐브(.brand-mark) 추가 + 데모 배너.
- repo_list: 요약 카드 .card-top/.card-ico + 검색 돋보기 아이콘.
- table_wrap: 회전형 정렬 인디케이터, 동기화 버튼 아이콘.
- progress: .sync-head/.sync-pct/.is-active/.indeterminate 구조.
- deploy_modal: 중앙 경고형 + 현재→대상 프리뷰 카드 + 타입-투-컨펌
  체크/X 시각 상태.
- deploy_success: 그려지는 체크 원 배너.
- version_list: 표 → .version-item 카드 리스트.

Pico v2 호환(미리보기는 pico-shim 기준이라 안 드러났던 것):
- Pico 의 `:is(...).secondary`(0,2,0)·hover(0,4,0) 특정성을 이기도록
  오버라이드를 :is() 형태로 상향 → 동기화 버튼 흰배경+파란글씨 유지,
  hover 시 어두워지던 문제 해결.
- `input[type=search]` 의 Pico 기본 돋보기 배경 제거(아이콘 중복).
- `td` 배경을 투명 처리해 tr 제브라/hover 가 보이도록(Pico 의
  `td{background:var(--pico-background-color)}` 가 덮던 문제), 줄무늬
  색을 --bg-alt 로 또렷하게.
- .row-action 을 40px 고정 → 버튼↔진행률↔배지 교체 시 높이 흔들림·
  위아래 테두리 잘림 해소.

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

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);
+}