🎨 Palette: [UX 개선] 고정 헤더 앵커 가림 현상 해결을 위한 스크롤 패딩 추가

.Jules/palette.md

@@ -5,3 +5,7 @@
 ## 2024-06-21 - Added skip-to-content link
 **Learning:** Found a missing skip-to-content link, which is a key accessibility feature to help keyboard and screen reader users bypass navigation. Additionally learned that giving `<main>` `tabindex="-1"` and removing its outline when `:focus-visible` ensures proper focus handling after clicking the skip link without disruptive visual outlines.
 **Action:** Always include a skip-to-content link near the start of the `body` and manage target focus appropriately.
+
+## 2026-06-25 - Fix Header Overlap
+**Learning:** When using a sticky header, clicking anchor links can cause the target element to scroll under the header, hindering the user experience.
+**Action:** Use `scroll-padding-top` on the `html` element with the height of the sticky header to ensure anchor links scroll to a position just below the header.

.gitignore

@@ -1 +1,2 @@
 node_modules
+venv/

styles.css

@@ -15,6 +15,7 @@
   --line: #d6dad8;
   --white: #ffffff;
   --shadow: 0 24px 70px rgba(22, 38, 61, 0.12);
+  --header-offset: 81px;
 }
 
 * {
@@ -23,6 +24,7 @@
 
 html {
   scroll-behavior: smooth;
+  scroll-padding-top: var(--header-offset);
 }
 
 body {
@@ -113,7 +115,7 @@ a {
 }
 
 .hero {
-  min-height: min(620px, calc(100vh - 81px));
+  min-height: min(620px, calc(100vh - var(--header-offset)));
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
   gap: clamp(32px, 5vw, 72px);