🎨 Palette: 카드 전체를 클릭할 수 있도록 클릭 영역 확대 (Fitts's Law)

.Jules/palette.md

@@ -17,3 +17,7 @@
 ## 2024-07-10 - prefers-reduced-motion 지원 추가
 **Learning:** 시스템 레벨에서 애니메이션 줄이기(prefers-reduced-motion)를 설정한 사용자를 위해 과도한 애니메이션과 부드러운 스크롤을 비활성화하는 것이 필요합니다. 이때 `0s` 대신 `0.01ms`를 사용하여 `transitionend`와 같은 브라우저 이벤트가 정상적으로 발생하도록 해야 자바스크립트 콜백이 멈추는(hanging) 문제를 방지할 수 있습니다.
 **Action:** 항상 `styles.css` 하단에 `prefers-reduced-motion: reduce` 미디어 쿼리를 추가하여 모든 요소의 `animation-duration`과 `transition-duration`을 `0.01ms`로 설정하고 `scroll-behavior: auto`를 적용합니다.
+
+## 2026-07-14 - Fitts's Law on Project Cards
+**Learning:** Links nested deeply inside distinct visual containers (like cards) violate Fitts's Law because they offer a tiny clickable target.
+**Action:** When styling card grids (`.project-grid`), use a pseudo-element (`::before` with `inset: 0`) on the primary link inside an `article` (with `position: relative`) to expand the clickable area to cover the entire card. Combine this with `:hover` and `:focus-within` transitions to provide adequate feedback to the user.

.gitignore

@@ -3,3 +3,4 @@ venv/
 .codegraph/
 __pycache__/
 *.py[cod]
+test_venv/

styles.css

@@ -505,6 +505,23 @@ h1 {
   line-height: 1.16;
 }
 
+.project-grid article {
+  position: relative;
+  transition: background-color 0.2s ease;
+}
+
+.project-grid article:hover,
+.project-grid article:focus-within {
+  background-color: var(--paper);
+}
+
+.project-grid h3 a::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
 .project-grid h3 a {
   color: inherit;
   text-decoration-thickness: 1px;