refactor: eliminate all hardcoded strings in TSX components, enforce project rules in AGENTS.md, lock body scroll in cookie modal

src/components/CustomCookieBanner.tsx

@@ -16,6 +16,17 @@ export function CustomCookieBanner() {
     setChoices(state)
   }, [state])
 
+  // Lock background page scroll while settings modal is open
+  useEffect(() => {
+    if (showSettings) {
+      const originalOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+      return () => {
+        document.body.style.overflow = originalOverflow
+      }
+    }
+  }, [showSettings])
+
   if (decided) {
     return null
   }
@@ -101,14 +112,21 @@ export function CustomCookieBanner() {
         </div>
       )}
 
-      {/* 2. Modal Window for Cookie Settings (Centered & Scrollable) */}
+      {/* 2. Modal Window for Cookie Settings (Scroll-locked backdrop & isolated modal scrolling) */}
       {showSettings && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-xs overflow-y-auto">
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-xs overflow-y-auto overscroll-contain"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setShowSettings(false)
+          }}
+          onWheel={(e) => e.stopPropagation()}
+        >
           <div
             role="dialog"
             aria-modal="true"
             aria-label={texts.settingsTitle}
-            className="w-full max-w-2xl bg-[#1f1f1f] text-white p-6 sm:p-8 border-t-4 border-[#FFED00] shadow-2xl my-auto max-h-[90vh] flex flex-col"
+            className="w-full max-w-2xl bg-[#1f1f1f] text-white p-6 sm:p-8 border-t-4 border-[#FFED00] shadow-2xl my-auto max-h-[90vh] flex flex-col overscroll-contain"
+            onClick={(e) => e.stopPropagation()}
           >
             {/* Modal Header */}
             <div className="flex items-center justify-between border-b border-[#333333] pb-4 mb-6 shrink-0">
@@ -131,7 +149,7 @@ export function CustomCookieBanner() {
             </div>
 
             {/* Scrollable Categories List */}
-            <div className="overflow-y-auto flex-1 pr-1 space-y-3.5">
+            <div className="overflow-y-auto flex-1 pr-1 space-y-3.5 overscroll-contain">
               {CONSENT_CATEGORIES.map((cat) => {
                 const isChecked = cat === 'necessary' ? true : !!choices[cat]
                 const isDisabled = cat === 'necessary'