From 865580813cce0dc910772bb2ae54fc647d1ae66f Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 9 Jul 2026 13:57:26 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20styles.css=EC=97=90=20conte?=
 =?UTF-8?q?nt-visibility=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=84=B1=EB=8A=A5=20=EC=B5=9C?=
 =?UTF-8?q?=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/bolt.md |  4 ++++
 styles.css     | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index 8de11f5..96199f7 100644
--- a/.jules/bolt.md
+++ b/.jules/bolt.md
@@ -4,3 +4,7 @@
 ## 2024-06-27 - 초기 언어 로드 시 불필요한 DOM 탐색 제거
 **Learning:** 초기 로드 시 요청된 언어가 HTML의 기본 언어(ko)와 동일한 경우, 모든 DOM 텍스트 노드를 탐색하고 치환하는 불필요한 작업을 생략하면 성능이 향상됨을 확인했습니다.
 **Action:** `isInitialDefault` 조건을 추가하여 초기 로드 시 불필요한 DOM 순회 코드가 실행되지 않도록 개선했습니다.
+
+## 2024-07-09 - content-visibility 최적화와 레이아웃 시프트 방지
+**Learning:** 긴 페이지에서 화면 밖 섹션에 `content-visibility: auto`를 적용하면 렌더링 성능이 향상되지만, 스크롤바 점핑이나 레이아웃 시프트가 발생할 수 있습니다.
+**Action:** 이를 방지하기 위해 `contain-intrinsic-size`를 항상 함께 적용하고, 구형 브라우저 호환성을 위해 `auto <size>` 값 앞에 단일 길이 폴백 값을 제공합니다.
diff --git a/styles.css b/styles.css
index 3cca9f9..73b8b3f 100644
--- a/styles.css
+++ b/styles.css
@@ -297,7 +297,20 @@ h1 {
 .section {
   padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 72px);
   border-top: 1px solid var(--line);
-}
+  content-visibility: auto;
+}
+
+/* ⚡ Bolt: Provide fallback and auto sizing for content-visibility to prevent scroll jumping */
+.principles { contain-intrinsic-size: 1650px; contain-intrinsic-size: auto 1650px; }
+.problem { contain-intrinsic-size: 900px; contain-intrinsic-size: auto 900px; }
+.dikw { contain-intrinsic-size: 1515px; contain-intrinsic-size: auto 1515px; }
+.evidence { contain-intrinsic-size: 1100px; contain-intrinsic-size: auto 1100px; }
+.references { contain-intrinsic-size: 810px; contain-intrinsic-size: auto 810px; }
+.logo-story { contain-intrinsic-size: 1000px; contain-intrinsic-size: auto 1000px; }
+.naruon { contain-intrinsic-size: 950px; contain-intrinsic-size: auto 950px; }
+.projects { contain-intrinsic-size: 1350px; contain-intrinsic-size: auto 1350px; }
+.forks { contain-intrinsic-size: 870px; contain-intrinsic-size: auto 870px; }
+.work { contain-intrinsic-size: 890px; contain-intrinsic-size: auto 890px; }
 
 .section-heading {
   max-width: 900px;