ContextualWisdomLab · seonghobae · Jul 3, 2026 · Jul 7, 2026 · Jul 7, 2026 · Jul 8, 2026
diff --git a/.Jules/palette.md b/.Jules/palette.md
@@ -9,7 +9,3 @@
 ## 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.
-
-## 2024-06-25 - Improve Color Contrast
-**Learning:** Found that using `--gold` for text on white or light backgrounds (like `--paper`) fails WCAG AA contrast standards, making the text difficult to read for some users.
-**Action:** Avoid using `--gold` on light backgrounds. Instead, use alternatives with better contrast like `--teal`. Retain `--gold` for dark backgrounds (like `--ink`) where it provides excellent contrast.
diff --git a/.jules/bolt.md b/.jules/bolt.md
@@ -4,6 +4,3 @@
 ## 2024-06-27 - 초기 언어 로드 시 불필요한 DOM 탐색 제거
 **Learning:** 초기 로드 시 요청된 언어가 HTML의 기본 언어(ko)와 동일한 경우, 모든 DOM 텍스트 노드를 탐색하고 치환하는 불필요한 작업을 생략하면 성능이 향상됨을 확인했습니다.
 **Action:** `isInitialDefault` 조건을 추가하여 초기 로드 시 불필요한 DOM 순회 코드가 실행되지 않도록 개선했습니다.
-## 2026-07-05 - content-visibility와 scrollbar jumping 방지
-**Learning:** 긴 단일 페이지(static site)에서 `content-visibility: auto`를 사용하여 오프스크린 섹션의 렌더링을 최적화할 때, `contain-intrinsic-size`를 함께 지정하지 않으면 스크롤바가 튀거나 레이아웃 시프트가 발생할 수 있습니다.
-**Action:** 항상 길이 기반 폴백(예: `contain-intrinsic-size: 600px;`)을 선행하고, 브라우저가 실제 높이를 기억할 수 있도록 `auto` 키워드를 포함한 속성을 설정합니다. 섹션별 실제 높이에 맞춰 크기를 조정합니다.
diff --git a/.jules/sentinel.md b/.jules/sentinel.md
@@ -14,3 +14,7 @@
 **Vulnerability:** 외부 링크(특히 참조문헌 링크 등)에 `target="_blank"` 속성을 사용하거나 새 탭으로 여는 동작을 유도할 때, `rel="noopener noreferrer"` 속성이 누락되어 Reverse Tabnabbing 공격에 노출될 수 있음.
 **Learning:** `rel="noopener noreferrer"`가 없으면 새로 열린 탭의 페이지가 `window.opener` 객체를 통해 원래 페이지의 `location`을 악의적인 사이트로 변경할 수 있습니다.
 **Prevention:** 외부 링크를 새 탭으로 열기 위해 `target="_blank"`를 사용할 때만 `rel="noopener noreferrer"`를 함께 추가하여 부모 창에 대한 접근을 차단해야 합니다.
+## 2026-07-03 - Native Trusted Types enforcement
+**Vulnerability:** Trusted Types 정책 부재로 인한 DOM 기반 XSS (Cross-Site Scripting) 취약점 위험.
+**Learning:** 이 정적 웹사이트는 `innerHTML` 같은 위험한 Sink를 사용하지 않고 `textContent`, `setAttribute` 등 안전한 DOM API만을 사용하고 있으므로, 별도의 Trusted Types 정책이나 외부 Sanitizer(예: DOMPurify) 없이도 CSP에서 `require-trusted-types-for 'script'`를 안전하게 기본 강제할 수 있음을 확인했습니다.
+**Prevention:** CSP에 `require-trusted-types-for 'script'`를 적용하여 XSS를 방어하고, 앞으로도 안전한 DOM API만 사용하도록 합니다. 부득이하게 `innerHTML`을 도입해야 할 경우에는 반드시 적절한 Sanitizer를 함께 구성해야 합니다.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self'; object-src 'none'; base-uri 'self'; form-action 'none'; upgrade-insecure-requests;">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self'; object-src 'none'; base-uri 'self'; form-action 'none'; upgrade-insecure-requests; require-trusted-types-for 'script';">
     <meta name="referrer" content="strict-origin-when-cross-origin">
     <title>맥락지혜 연구실 | Contextual Wisdom Lab</title>
     <meta

diff --git a/styles.css b/styles.css
@@ -297,15 +297,6 @@ h1 {
 .section {
   padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 72px);
   border-top: 1px solid var(--line);
-  /* ⚡ Bolt: Defer rendering of off-screen sections to improve initial page load performance */
-  content-visibility: auto;
-  contain-intrinsic-size: 600px;
-  contain-intrinsic-size: auto 600px;
-}
-
-.section.dikw, .section.projects {
-  contain-intrinsic-size: 1000px;
-  contain-intrinsic-size: auto 1000px;
 }
 
 .section-heading {
@@ -451,7 +442,7 @@ h1 {
 .dikw-grid span {
   display: block;
   margin-bottom: 38px;
-  color: var(--teal);
+  color: var(--gold);
   font-size: 14px;
   font-weight: 900;
 }