fix(redesign): 게임 카드 위계·여백 강화 (변경안 B)

시각 프리뷰 비교 후 사용자 선택(B). 카드 body 위계 또렷하게.
- .card__game-name 13px/600 → 15px/700, line-height 1.35→1.25 (제목 지배력↑)
- .card__likes 600/--text → 500/--text-muted, margin-top 0.15→0.45rem (stat 약화·분리)
  + 좋아요 카운트 <b> 래핑 → --accent 골드 강조 (숫자 시선)
- .card__body padding 0.5·0.625·0.625 → 0.7·0.75·0.75, gap 0.2→0.15rem

런타임 스모크: 재기동 후 GET / 200, 라이트/다크 육안 PASS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0162BaZnrbiYgWc9JJMZ9Czb

.atp/work-session/20260701-083240/report.md

@@ -0,0 +1,64 @@
+---
+schema_version: 2
+sid: 20260701-083240
+started_at: 2026-07-01T08:32:40
+user_request: |
+  "[Image] 게임 카드는 다시 봐야겠는데" — 직전 세션 4:3 적용 후 게임 카드 재검토.
+  이미지는 더미(fallback) 상태: 4:3 다크 미디어 + 중앙 흰 로고박스.
+Invocations: []
+Summary: ''
+Decisions: []
+user_signals:
+  positive: []
+  negative: []
+graph_refresh: ''
+open_items: []
+verified_by_me: []
+needs_user_verification: []
+---
+
+# Advisor Invocation Decision Log
+
+- advisor: requirements
+  decision: skip(직접)
+  rationale: '"다시 봐야겠는데" 열린 요청 — 단독 협소화 금지(직전 교훈). 계획게이트로 축 합의 선행.'
+  checked_at: 2026-07-01T08:33
+
+- advisor: verification
+  decision: call(self)
+  rationale: 'JSP 변경 → §291 런타임 스모크. 재기동+육안 라이트/다크.'
+  checked_at: 2026-07-01T09:35
+
+---
+
+## Summary
+게임 카드 재검토(사용자 축 선택: 위계·여백). 텍스트 diff 로는 예측 어렵다는 피드백 → 실제 카드 CSS·토큰으로 현재/A/B 시각 프리뷰를 앱 정적경로(/css/)에 서빙해 사용자·에이전트 공동 확인. 사용자 B 선택 → index.jsp 적용 → 런타임 스모크 PASS.
+
+## Decisions
+- 축: "카드 전반 위계·여백" (사용자 multiSelect 선택; fallback/비율/배경 미선택)
+- 변경안 **B** 채택 (제목 15px·700, 좋아요 muted+숫자 골드, 여백↑) — 시각 프리뷰 비교 후 사용자 선택
+- 프리뷰 검증 방식: private SendUserFile(텍스트 한계) 대신 앱 정적경로 서빙 → 새로고침 공동 확인 (사용자 제안)
+
+## verified_by_me
+- L2 런타임 스모크(PASS): bibimbap-app 재기동 → GET / 200 (좋아요 <b> 마크업 반영) → 브라우저 육안 라이트+다크.
+  - 카드 제목 15px·700 지배력↑, 좋아요 숫자 골드 강조, 여백↑ — zoom 확정.
+- 정적 프리뷰 mojibake 발견·수정: 서버가 .html 에 charset 미부착 → <meta charset=utf-8> 추가로 해소(§299 정적파일 확장 케이스).
+
+## needs_user_verification
+- 실게임 가로 썸네일 업로드 시 4:3 + B 위계 최종 인상(더미는 폴백 로고).
+- fallback 로고 "작게" 는 의도된 placeholder 신호(브랜드 로고≠게임아트, 흰박스 글레어 회피). 빈 인상 완화 원하면 별도 "fallback 표현" 축 작업(로고확대/모노그램/배경틴트) — 사용자 이번 미선택.
+
+## graph_refresh
+skip: no-scope-change — 변경=index.jsp 카드 CSS값+<b> 마크업, JSP/CSS 정적자산은 graph 스캔 외(§285). 그래프 30분 전 클린 풀 재생성(20789a2). 구조 0델타.
+
+## user_signals
+positive:
+- quote: "나도 B가 괜찮아보이네"
+  note: "시각 프리뷰 공동 확인 후 1라운드 수락. 프리뷰-in-page 접근이 결정 마찰 낮춤."
+negative:
+- quote: "(프리뷰 한글 mojibake 노출)"
+  structural: false
+  note: "정적 프리뷰 .html 에 meta charset 누락 → 사용자 화면서 mojibake. 사용자가 스샷으로 표면화. 단발(§299 는 .jspf만 명시, 정적 .html 서빙은 사각). meta charset 추가로 즉시 해소."
+
+## ended_at
+2026-07-01T09:36 (KST)

src/main/webapp/WEB-INF/views/index.jsp

@@ -613,18 +613,18 @@
         filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
       }
       .card__body {
-        padding: 0.5rem 0.625rem 0.625rem;
+        padding: 0.7rem 0.75rem 0.75rem;
         flex: 1;
         min-height: 0;
         display: flex;
         flex-direction: column;
-        gap: 0.2rem;
+        gap: 0.15rem;
       }
       .card__game-name {
         margin: 0;
-        font-size: 0.8125rem;
+        font-size: 0.9375rem;
-        font-weight: 600;
+        font-weight: 700;
-        line-height: 1.35;
+        line-height: 1.25;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
@@ -642,13 +642,17 @@
         overflow: hidden;
       }
       .card__likes {
-        margin: 0.15rem 0 0;
+        margin: 0.45rem 0 0;
         font-size: 0.6875rem;
-        font-weight: 600;
+        font-weight: 500;
-        color: var(--text);
+        color: var(--text-muted);
         letter-spacing: -0.01em;
         font-variant-numeric: tabular-nums;
       }
+      .card__likes b {
+        color: var(--accent);
+        font-weight: 700;
+      }
       .card__badges {
         display: flex;
         flex-wrap: wrap;
@@ -929,7 +933,7 @@
                         <% } %>
                     </div>
                     <% } %>
-                    <p class="card__likes">좋아요 <%= String.format("%,d", likeCount) %></p>
+                    <p class="card__likes">좋아요 <b><%= String.format("%,d", likeCount) %></b></p>
                 </div>
             </a>
             <%