diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7fb6a23..346f670 100644
--- a/.Jules/palette.md
+++ b/.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.
diff --git a/.gitignore b/.gitignore
index 07f2933..892cac3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ venv/
 .codegraph/
 __pycache__/
 *.py[cod]
+test_venv/
diff --git a/styles.css b/styles.css
index 02cfeb6..9f5f7e6 100644
--- a/styles.css
+++ b/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;