.

src/components/SubLayout.jsx

@@ -1,4 +1,4 @@
-// import { useEffect } from "react";
+import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import Header from "./Header";
 import Footer from "./Footer";
@@ -24,7 +24,10 @@ function SubLayout() {
   //     document.body.classList.remove("is-dark-hero");
   //   };
   // }, []);
-
+  useEffect(() => {
+    document.body.classList.add("is-sub");
+    return () => document.body.classList.remove("is-sub");
+  }, []);
   return (
     <>
       <Header />

src/css/header.css

@@ -1,14 +1,19 @@
 /*header.*/
-.pal-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:box-shadow .45s cubic-bezier(.22,1,.36,1);}
+.pal-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:top .4s cubic-bezier(.22,1,.36,1),padding .4s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1);}
-.pal-header::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.3);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.22,1,.36,1),background .45s cubic-bezier(.22,1,.36,1),backdrop-filter .45s cubic-bezier(.22,1,.36,1);}
+.pal-header::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.5);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.22,1,.36,1),background .45s cubic-bezier(.22,1,.36,1),backdrop-filter .45s cubic-bezier(.22,1,.36,1);}
 .pal-header.is-scrolled::before,.pal-header.is-open::before,.pal-header.is-mobile-open::before{opacity:1;}
 .pal-header.is-scrolled,.pal-header.is-open,.pal-header.is-mobile-open{box-shadow:0 10px 30px rgba(15,23,42,.04);}
 
+/*서브 전용 floating pill*/
+body.is-sub .pal-header.is-scrolled{top:12px;padding:0 16px;box-shadow:none;}
+body.is-sub .pal-header.is-scrolled::before{opacity:0;}
+body.is-sub .pal-header.is-scrolled .pal-header-inner{height:64px;background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:20px;border:1px solid rgba(17,17,17,.07);box-shadow:0 8px 32px rgba(15,23,42,.1);padding:0 28px;}
+body.is-sub .pal-header.is-scrolled .pal-header-logo img{width:140px;}
 
-.pal-header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:1440px;height:96px;margin:0 auto;z-index:2;}
+.pal-header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:1440px;height:96px;margin:0 auto;z-index:2;transition:height .4s cubic-bezier(.22,1,.36,1),background .4s cubic-bezier(.22,1,.36,1),border-radius .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),padding .4s cubic-bezier(.22,1,.36,1);}
 .pal-header-logo{flex:0 0 auto;margin:0;font-size:0;line-height:1;}
 .pal-header-logo a{display:inline-flex;align-items:center;font-size:28px;font-weight:800;line-height:1;color:#111;text-decoration:none;letter-spacing:-0.03em;}
-.pal-header-logo img{width:180px;display:block;}
+.pal-header-logo img{width:160px;display:block;transition:width .4s cubic-bezier(.22,1,.36,1);}
 
 .pal-gnb{flex:1 1 auto;display:flex;justify-content:center;height:100%;}
 .pal-gnb-depth1{display:flex;align-items:center;gap:4px;height:100%;margin:0;padding:0;list-style:none;}
@@ -16,7 +21,7 @@
 .pal-gnb-link{position:relative;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0 20px;border:0;background:none;color:#111;text-decoration:none;cursor:pointer;transition:color .3s ease,transform .3s ease;}
 .pal-gnb-link:hover,.pal-gnb-link:focus-visible{color:var(--color-primary);transform:translateY(-2px);outline:none;}
 .pal-gnb-link-text{position:relative;z-index:1;font-size:16px;font-weight:700;line-height:1;letter-spacing:-0.02em;text-transform:uppercase;}
-.pal-gnb-link-line{position:absolute;left:20px;right:20px;bottom:26px;height:2px;border-radius:999px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .32s ease;}
+.pal-gnb-link-line{position:absolute;left:20px;right:20px;bottom:16px;height:2px;border-radius:999px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .32s ease;}
 .pal-gnb-item.is-active .pal-gnb-link{color:var(--color-primary);transform:translateY(-2px);}
 .pal-gnb-item.is-active .pal-gnb-link-line{transform:scaleX(1);}