feat(header): add smart sticky scroll animation and styling refinements

- Implement RAF-throttled smart sticky scroll interaction on app header - Add flow-root BFC isolation, vertical margin, and mobile menu scroll container - Update brand logo kicker hover color to primary accent (cobalt-dark) - Fix theme script hydration warning with suppressHydrationWarning - Add favicon.ico and icon.svg to resolve root /favicon.ico 404 - Add MAM orchestration guidelines, env generation script, and templates
2026-08-21 10:51:26 +09:00
parent a838af4b94
commit 1470806e06
10 changed files with 424 additions and 8 deletions
@@ -172,6 +172,14 @@ body {
  .draw-underline:hover {
    background-size: 100% 2px;
  }
+
+  /* Mobile menu scroll container for low-height / landscape viewports (F4) */
+  .mobile-menu-panel {
+    max-height: calc(100vh - 6rem);    /* Fallback: browsers without dvh support */
+    max-height: calc(100dvh - 6rem);   /* Modern: dynamic viewport height */
+    overflow-y: auto;
+    overscroll-behavior: contain;      /* Prevent chaining scroll to main page */
+  }
 }

 /* ==================================================================
@@ -217,6 +225,11 @@ body {
  [class*="animate-"] {
    animation: none !important;
  }
+  /* 스마트 스티키: 모션 줄임 사용자에게는 항상 펼친 상태 유지 */
+  header[data-smart-sticky] {
+    transform: none !important;
+    transition: none !important;
+  }
  html {
    scroll-behavior: auto;
  }
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <defs>
+    <linearGradient id="cobaltGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#4E77FF"/>
+      <stop offset="100%" stop-color="#2B4CDE"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="7" fill="url(#cobaltGrad)"/>
+  <!-- Network Agent Nodes & Graph -->
+  <circle cx="16" cy="9" r="2.5" fill="#FFFFFF"/>
+  <circle cx="9" cy="22" r="2.5" fill="#FFFFFF"/>
+  <circle cx="23" cy="22" r="2.5" fill="#FFFFFF"/>
+  <circle cx="16" cy="17" r="2" fill="#FFD666"/>
+  
+  <path d="M16 9 L9 22 M16 9 L23 22 M9 22 L23 22 M16 9 L16 17 M9 22 L16 17 M23 22 L16 17" 
+        stroke="#FFFFFF" stroke-width="1.2" stroke-opacity="0.8" stroke-linecap="round"/>
+</svg>
@@ -34,7 +34,7 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html lang="ko">
+    <html lang="ko" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
        {/* No-JS fallback for the .reveal scroll-reveal: without this, every