🎨 Palette: [UX improvement] 스티키 헤더를 고려한 앵커 링크 스크롤 패딩 추가

.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.
+
+## 2024-06-24 - Anchor Link Scroll Padding
+**Learning:** 스티키 헤더가 적용된 페이지에서 앵커 링크로 이동 시, 기본 스크롤 동작은 타겟 요소의 상단을 브라우저 상단에 맞추기 때문에 콘텐츠가 헤더에 가려지는 문제가 발생함을 확인했습니다.
+**Action:** 스티키 헤더의 높이만큼 `html` 요소에 `scroll-padding-top` 속성을 추가하여 앵커 링크 이동 시에도 적절한 여백을 확보하고 접근성을 개선합니다.

opencode.jsonc

@@ -0,0 +1,108 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "model": "github-models/openai/gpt-5",
+  "small_model": "github-models/deepseek/deepseek-v3-0324",
+  "enabled_providers": ["github-models"],
+  "mcp": {
+    "codegraph": {
+      "type": "local",
+      "command": [
+        "npx",
+        "-y",
+        "@colbymchenry/codegraph@0.9.9",
+        "serve", "--mcp"
+      ],
+      "enabled": true,
+      "environment": {
+        "NPM_CONFIG_IGNORE_SCRIPTS": "true",
+        "NPM_CONFIG_LOGLEVEL": "error"
+      }
+    },
+    "deepwiki": {
+      "type": "remote",
+      "url": "https://mcp.deepwiki.com/mcp",
+      "enabled": true,
+      "timeout": 10000
+    },
+    "context7": {
+      "type": "local",
+      "command": [
+        "npx",
+        "-y",
+        "@upstash/context7-mcp@3.1.0",
+        "--transport",
+        "stdio"
+      ],
+      "enabled": true,
+      "timeout": 10000,
+      "environment": {
+        "NPM_CONFIG_IGNORE_SCRIPTS": "true",
+        "NPM_CONFIG_LOGLEVEL": "error"
+      }
+    },
+    "web_search": {
+      "type": "local",
+      "command": [
+        "npx",
+        "-y",
+        "@guhcostan/web-search-mcp@1.0.5"
+      ],
+      "enabled": true,
+      "timeout": 10000,
+      "environment": {
+        "NPM_CONFIG_IGNORE_SCRIPTS": "true",
+        "NPM_CONFIG_LOGLEVEL": "error"
+      }
+    }
+  },
+  "permission": {
+    "edit": "deny",
+    "bash": "deny",
+    "read": "allow",
+    "grep": "allow",
+    "glob": "allow",
+    "list": "allow",
+    "task": "deny",
+    "webfetch": "deny",
+    "websearch": "deny",
+    "lsp": "deny",
+    "external_directory": "allow"
+  },
+  "provider": {
+    "github-models": {
+      "npm": "@ai-sdk/openai-compatible",
+      "name": "GitHub Models",
+      "options": {
+        "baseURL": "https://models.github.ai/inference",
+        "apiKey": "{env:STRIX_GITHUB_MODELS_TOKEN}"
+      },
+      "models": {
+        "openai/gpt-5": {
+          "name": "OpenAI GPT-5",
+          "tool_call": true,
+          "limit": {
+            "context": 200000,
+            "output": 100000
+          }
+        },
+        "deepseek/deepseek-r1-0528": {
+          "name": "DeepSeek R1 0528",
+          "tool_call": true,
+          "reasoning": true,
+          "limit": {
+            "context": 128000,
+            "output": 4096
+          }
+        },
+        "deepseek/deepseek-v3-0324": {
+          "name": "DeepSeek V3 0324",
+          "tool_call": true,
+          "limit": {
+            "context": 128000,
+            "output": 4096
+          }
+        }
+      }
+    }
+  }
+}

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