diff --git a/src/components/SubLayout.jsx b/src/components/SubLayout.jsx
index ad26696..87657a0 100644
--- a/src/components/SubLayout.jsx
+++ b/src/components/SubLayout.jsx
@@ -1,8 +1,30 @@
+import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import Header from "./Header";
 import Footer from "./Footer";
 
 function SubLayout() {
+  useEffect(() => {
+    // 서브 히어로가 다크 배경이므로 헤더 다크 모드 적용
+    document.body.classList.add("is-dark-hero");
+
+    // 스크롤 감지 — 서브 히어로 높이(520px) 지나면 다크 해제
+    const handleScroll = () => {
+      if (window.scrollY > 400) {
+        document.body.classList.remove("is-dark-hero");
+      } else {
+        document.body.classList.add("is-dark-hero");
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      document.body.classList.remove("is-dark-hero");
+    };
+  }, []);
+
   return (
     <>
       <Header />