diff --git a/README.md b/README.md
index a4ad3b6bb7..fc28cecca4 100644
--- a/README.md
+++ b/README.md
@@ -73,45 +73,31 @@ Tzudong Map turns mukbang video evidence into a usable restaurant map: users dis
   </tr>
 </table>
 
-## Local architecture
+## Architecture
 
-System map: [interactive system architecture](docs/architecture/tzudong-system-architecture.html) · [Archify source](docs/architecture/tzudong-system-architecture.archify.json)
+Public map, admin, and the evidence pipeline meet in Supabase. Long work stays off the web request.
 
-Worker admission flow: [interactive worker boosting flow](docs/architecture/tzudong-worker-boosting.workflow.html) · [Archify source](docs/architecture/tzudong-worker-boosting.workflow.archify.json)
+```mermaid
+flowchart LR
+  web["apps/web"] --> db[("Supabase")]
+  ops["CI / cron"] --> control["pipeline-api"]
+  control --> worker["pipeline-worker"]
+  worker --> crawl["crawler / evaluation"]
+  crawl --> db
+  crawl --> ext["External providers"]
+  worker --> db
+```
 
-Interactive workflow: [storyboard-local-mlx.html](docs/architecture/storyboard-local-mlx/storyboard-local-mlx.html)
+Open a diagram to pan, zoom, and follow a path. Sources sit next to each HTML file.
 
-Workflow source: [storyboard-local-mlx.workflow.json](docs/architecture/storyboard-local-mlx/storyboard-local-mlx.workflow.json)
-
-Interactive lifecycle: [storyboard-local-mlx.lifecycle.html](docs/architecture/storyboard-local-mlx/storyboard-local-mlx.lifecycle.html)
-
-Lifecycle source: [storyboard-local-mlx.lifecycle.json](docs/architecture/storyboard-local-mlx/storyboard-local-mlx.lifecycle.json)
-
-Interactive map discovery: [map-discovery.html](docs/architecture/map-discovery/map-discovery.html)
-
-Live browser captures: [workflow](docs/operations/evidence/storyboard-restore-20260920/archify-storyboard-workflow-desktop.png) · [lifecycle](docs/operations/evidence/storyboard-restore-20260920/archify-storyboard-lifecycle-desktop.png) · [map discovery](docs/operations/evidence/storyboard-restore-20260920/archify-map-discovery-desktop.png)
-
-Map discovery source: [map-discovery.workflow.json](docs/architecture/map-discovery/map-discovery.workflow.json)
-
-Evidence pipeline: [interactive data pipeline](docs/architecture/data-pipeline/tzudong-data-pipeline.html) · [dataflow source](docs/architecture/data-pipeline/tzudong-data-pipeline.dataflow.json)
-
-Worker flow: [interactive worker boosting flow](docs/architecture/data-pipeline/worker-boosting.html) · [workflow source](docs/architecture/data-pipeline/worker-boosting.workflow.json)
-
-The worker keeps image concurrency at `c=1`. A future bounded boost must pass memory admission and observed queue/run/RSS evidence before changing that cap; dynamic concurrency increase is not claimed as implemented. Queue claim and lease ownership, heartbeat freshness, revision checks, conditional save/readback, and late-write rejection define the persistence boundary. Operator observations are bounded and non-authoritative, with secrets and raw payloads excluded.
-
-The local workspace separates **new project creation**, **scene editing**, **version history**, and **manual result import**. Saved projects open directly on the scene editor; connection diagnostics are under Settings. Text and image providers remain independent: local MLX, ChatGPT manual import, and Grok manual import are selectable with external AI off. OpenAI/xAI official APIs stay gated and currently unconfigured. There is no automatic cloud fallback.
-
-Storyboard provider policy keeps `local-mlx`, `chatgpt-manual`, and `grok-manual` independently selectable for text and image without requiring an official external API; the manual choices return through user import. The `externalAI` consent gate applies only to the official API provider IDs `openai-api` and `xai-api`.
-
-Historical restoration now uses immutable DB snapshots. Version preview and a confirmed whole-project or single-scene restore preserve the historical text, scene order, asset references, provenance and original image bytes. Restoration writes a new revision without calling a model or queueing a job; current provider settings and consent are retained. Applied projects start history from the state captured by the migration, not from invented earlier versions. Owner/admin checks, current revision, busy-project rejection and idempotent request IDs protect the operation.
-
-The memory admission model is implemented in `apps/web/lib/admin/storyboard/resource-invariants.ts`: `used + additional_peak_estimate + reserve <= physical`, with initial reserve `max(16 GiB, 12.5% of physical RAM)`. The worker now uses host-wide `os.freemem()` by default and only adds model residency in the explicit RSS fallback; measurements and peak estimates are not absolute guarantees. The [runtime audit on 2026-09-21](docs/operations/evidence/storyboard-restore-20260920/runtime-audit-20260921.md) records the remaining stress-test and peak-inference limits. The queue-wait helper is currently unit-tested but has no runtime caller. Image concurrency starts at one. Queue wait follows `W[i+1] = max(0, W[i] + S[i] - A[i])`; absent a live worker, estimated wait is unknown. Atomic claim, DB-clock leases, heartbeat, current-job ownership and project/scene revisions reject stale writes. Cancellation forbids late writes; retry is explicit. Original assets are immutable. The Archify viewer's fixed controls fall back to English for Korean-authored diagrams.
-
-The [2026-09-21 architecture and goal audit](docs/operations/evidence/storyboard-restore-20260920/architecture-goal-audit-20260921.md) joins the MLX, queue/lease, FSM, memory, map/filter, and hosted-feed readback evidence without treating hosted writes or deployment as complete.
-
-**Local evidence (2026-09-20):** real-model project v12 → edit v13 → scene restore v14 → full undo v15 → full restore v16. All 20 exported PNG/WebP files matched their original hashes and decoded successfully; these three restores created zero jobs. See the [verification report and responsive screenshots](docs/operations/evidence/storyboard-restore-20260920/README.md). Local migration and UI verification do not establish hosted migration, external Web review or production deployment.
+| Diagram | Open |
+| --- | --- |
+| System map | [tzudong-system-architecture.html](docs/architecture/tzudong-system-architecture.html) |
+| Map discovery | [map-discovery.html](docs/architecture/map-discovery/map-discovery.html) |
+| Evidence pipeline | [tzudong-data-pipeline.html](docs/architecture/data-pipeline/tzudong-data-pipeline.html) |
+| Storyboard workflow | [storyboard-local-mlx.html](docs/architecture/storyboard-local-mlx/storyboard-local-mlx.html) |
 
-**Map evidence (2026-09-20, updated):** Seoul cluster expand kept individual markers and opened the restaurant list (66 places after the hot-view filter). YouTube play control stayed centered on 16:9 `sddefault`. GPS remains fail-closed with `DEVICE_LOCATION_OPERATOR_EVIDENCE_REQUIRED`. In the explicit hosted development mode, local `/feed` was rechecked on 2026-09-21 against the hosted Supabase project: the public feed rendered two verified reviews for 데일리픽스 and 스시린 under `쯔동마스터`, with no Nightly identity. The default local command remains isolated from hosted data. See [hosted readback and limitations](docs/operations/evidence/storyboard-restore-20260920/feed-local-readback-20260921.md). Theme chips live-rechecked: hot-view 125 (Seoul cluster 65 → list 66), comment-hot 125 (Seoul 65), fan-signal 63 (Seoul 32), recent-video 32 (Seoul 17), repeat 20 (Seoul cluster 12 → list 13), using hosted-read YouTube KPI snapshots copied locally (not invented). Public overlay/map panel elevation is `shadow-sm`; dropdown menus keep their `shadow-2xl` contract. Mobile `/feed` hides the write FAB while login or detail sheets are open. Desktop/390/320 screenshots: [public UI evidence](docs/operations/evidence/storyboard-restore-20260920/). Hosted deployment and protected promotion are still separate.
+Promotion is `develop -> data -> main`. A production build runs only when `TZUDONG_APPROVED_PRODUCTION_SHA` matches that commit. Detail lives in [docs/README.md](docs/README.md).
 
 ### Measured query and normalization optimizations (2026-09-21)
 
diff --git a/apps/web/.env.example b/apps/web/.env.example
index 6c3716e7c4..8006a22d82 100644
--- a/apps/web/.env.example
+++ b/apps/web/.env.example
@@ -121,18 +121,6 @@ THUMBNAIL_AGENT_ROOT=../../backend/thumbnail-agent
 THUMBNAIL_AGENT_PYTHON=python3
 THUMBNAIL_AGENT_RUNTIME=local_graph
 THUMBNAIL_AGENT_TIMEOUT_MS=120000
-# Device-location release evidence (server-only; default is blocked).
-# Exact evidence references are operator inputs, not a legal-compliance flag.
-DEVICE_LOCATION_RELEASE_DECISION=
-# Allowed only: not_applicable_verified | filing_receipt_verified
-DEVICE_LOCATION_EXTERNAL_STATUS=
-# Each evidence reference is a SHA-256 digest (64 lowercase hex characters).
-DEVICE_LOCATION_OPERATOR_EVIDENCE_HASH=
-DEVICE_LOCATION_PROVIDER_EVIDENCE_HASH=
-DEVICE_LOCATION_EXTERNAL_EVIDENCE_HASH=
-DEVICE_LOCATION_LEGAL_EVIDENCE_HASH=
-# Canonical UTC ISO timestamp, for example 2026-07-12T00:00:00.000Z
-DEVICE_LOCATION_RELEASE_CONFIRMED_AT=
 # Keyed minimization for request IP/user-agent audit references (server-only, >=32 bytes).
 PRIVACY_AUDIT_HASH_KEY=
 # Durable account-deletion worker: independent server-only capability (minimum 32 UTF-8 bytes).
diff --git a/apps/web/app/admin/banners/page.tsx b/apps/web/app/admin/banners/page.tsx
index f4f5d1ca57..6eee4c54eb 100644
--- a/apps/web/app/admin/banners/page.tsx
+++ b/apps/web/app/admin/banners/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useRef, useMemo, Suspense, useEffect } from 'react';
+import { useState, useRef, useMemo, Suspense, useEffect, useLayoutEffect } from 'react';
+import { useFilledSkeletonCount } from '@/lib/use-filled-skeleton-count';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/contexts/AuthContext';
@@ -120,13 +121,14 @@ const isNestedUploadInteractiveTarget = (target: EventTarget | null) => {
 
 type BannerManagementPageWrapperProps = {
     embedded?: boolean;
+    onInitialContentReady?: () => void;
 };
 
 // Suspense 래퍼
-function BannerManagementPageWrapper({ embedded = false }: BannerManagementPageWrapperProps = {}) {
+function BannerManagementPageWrapper({ embedded = false, onInitialContentReady }: BannerManagementPageWrapperProps = {}) {
     return (
         <Suspense fallback={null}>
-            <BannerManagementPage embedded={embedded} />
+            <BannerManagementPage embedded={embedded} onInitialContentReady={onInitialContentReady} />
         </Suspense>
     );
 }
@@ -140,12 +142,19 @@ BannerManagementRoutePage.Embedded = BannerManagementPageWrapper;
 export default BannerManagementRoutePage;
 
 
-function BannerManagementPage({ embedded }: Required<BannerManagementPageWrapperProps>) {
+function BannerManagementPage({ embedded, onInitialContentReady }: BannerManagementPageWrapperProps & { embedded: boolean }) {
     const router = useRouter();
     const { user, isAdmin, isLoading: authLoading } = useAuth();
 
     // 배너 데이터
     const { data: banners = [], isLoading: bannersLoading } = useAdBannersAdmin();
+    const initialLoadPendingRef = useRef(true);
+    if (initialLoadPendingRef.current && !authLoading && !bannersLoading) initialLoadPendingRef.current = false;
+    useLayoutEffect(() => {
+        if (!onInitialContentReady || authLoading || initialLoadPendingRef.current) return;
+        onInitialContentReady();
+    }, [authLoading, bannersLoading, onInitialContentReady]);
+    const bannerListSkeleton = useFilledSkeletonCount(88, 5);
     const createBanner = useCreateAdBanner();
     const updateBanner = useUpdateAdBanner();
     const deleteBanner = useDeleteAdBanner();
@@ -547,7 +556,8 @@ function BannerManagementPage({ embedded }: Required<BannerManagementPageWrapper
                 <div
                     className="fixed inset-0 opacity-30 pointer-events-none z-0"
                     style={{
-                        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E")`,
+                        backgroundImage: 'url("/images/ui-noise.png")',
+                        backgroundRepeat: 'repeat',
                     }}
                 />
             )}
@@ -592,11 +602,11 @@ function BannerManagementPage({ embedded }: Required<BannerManagementPageWrapper
                             </div>
                         </div>
 
-                        <div className="min-h-0 flex-1 space-y-2 overflow-y-auto scrollbar-hide p-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" role="list" aria-label="배너 목록">
+                        <div ref={bannerListSkeleton.ref} className="min-h-0 flex-1 space-y-2 overflow-y-auto scrollbar-hide p-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" role="list" aria-label="배너 목록">
                             {bannersLoading ? (
                                 <div className="space-y-2" role="status" aria-busy="true" aria-label="배너 목록 로딩 중">
                                     <span className="sr-only">배너 목록 데이터를 불러오는 중입니다.</span>
-                                    {Array.from({ length: 5 }).map((_, index) => <BannerListItemSkeleton key={index} index={index} />)}
+                                    {Array.from({ length: bannerListSkeleton.count }).map((_, index) => <BannerListItemSkeleton key={index} index={index} />)}
                                 </div>
                             ) : sortedBanners.length === 0 ? (
                                 <Card className="border-dashed border-border bg-background/70 p-4 text-center text-sm text-muted-foreground">
diff --git a/apps/web/app/admin/evaluations/page.tsx b/apps/web/app/admin/evaluations/page.tsx
index 3ea9da9af8..317352262e 100644
--- a/apps/web/app/admin/evaluations/page.tsx
+++ b/apps/web/app/admin/evaluations/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useEffect, useMemo, useCallback, useRef, Suspense } from 'react';
+import { useState, useEffect, useLayoutEffect, useMemo, useCallback, useRef, Suspense } from 'react';
+import { useFilledSkeletonCount } from '@/lib/use-filled-skeleton-count';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { supabase } from '@/integrations/supabase/client';
@@ -1314,6 +1315,7 @@ type AdminEvaluationPageWrapperProps = {
   embedded?: boolean;
   initialView?: 'evaluations' | 'submissions';
   initialSubmissionTab?: 'new' | 'edit' | 'recommend' | 'reviews';
+  onInitialContentReady?: () => void;
 };
 
 // Suspense 래퍼 컴포넌트
@@ -1321,6 +1323,7 @@ function AdminEvaluationPageWrapper({
   embedded = false,
   initialView = 'evaluations',
   initialSubmissionTab,
+  onInitialContentReady,
 }: AdminEvaluationPageWrapperProps = {}) {
   return (
     <Suspense fallback={embedded ? null : <AdminEvaluationRouteSkeleton />}>
@@ -1328,6 +1331,7 @@ function AdminEvaluationPageWrapper({
         embedded={embedded}
         initialView={initialView}
         initialSubmissionTab={initialSubmissionTab}
+        onInitialContentReady={onInitialContentReady}
       />
     </Suspense>
   );
@@ -1402,10 +1406,10 @@ function AdminEvaluationStaticMobileLoadingControls() {
   );
 }
 
-function AdminEvaluationStaticCardSkeleton() {
+function AdminEvaluationStaticCardSkeleton({ count }: { count: number }) {
   return (
-    <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:hidden" aria-hidden="true">
-      {Array.from({ length: 4 }).map((_, index) => (
+    <div className="grid min-h-0 flex-1 grid-cols-1 gap-2 md:grid-cols-2 lg:hidden" aria-hidden="true">
+      {Array.from({ length: count }).map((_, index) => (
         <div key={index} className="rounded-2xl border border-border/70 bg-card/95 p-3 shadow-sm">
           <div className="flex items-center gap-2">
             <Skeleton className="h-12 w-16 shrink-0 rounded-md motion-reduce:animate-none" />
@@ -1425,6 +1429,22 @@ function AdminEvaluationStaticCardSkeleton() {
   );
 }
 function AdminEvaluationRouteSkeleton() {
+  const frameRef = useRef<HTMLDivElement>(null);
+  const mobileCards = useFilledSkeletonCount(104, 4, 48);
+  const [rowCount, setRowCount] = useState(6);
+  useLayoutEffect(() => {
+    const node = frameRef.current;
+    if (!node) return;
+    const update = () => {
+      const height = node.clientHeight;
+      if (height <= 0) return;
+      setRowCount(Math.max(6, Math.ceil((height - 44) / 64)));
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
   return (
     <div
       role="status"
@@ -1457,10 +1477,10 @@ function AdminEvaluationRouteSkeleton() {
           </div>
         </div>
       </div>
-      <div className="flex min-h-0 flex-1 flex-col gap-3 p-2">
+      <div ref={mobileCards.ref} className="flex min-h-0 flex-1 flex-col gap-3 p-2">
         <AdminEvaluationStaticMobileLoadingControls />
-        <AdminEvaluationStaticCardSkeleton />
-        <div className="hidden min-h-0 overflow-hidden rounded-lg border bg-background lg:block">
+        <AdminEvaluationStaticCardSkeleton count={mobileCards.count} />
+        <div ref={frameRef} className="hidden min-h-0 flex-1 flex-col overflow-hidden rounded-lg border bg-background lg:flex">
           <div className="border-b bg-muted/35 lg:grid lg:grid-cols-[40px_minmax(180px,1fr)_repeat(6,78px)_112px]" aria-hidden="true">
             {Array.from({ length: 9 }).map((_, index) => (
               <div key={index} className="px-2 py-2">
@@ -1469,7 +1489,7 @@ function AdminEvaluationRouteSkeleton() {
             ))}
           </div>
           <div className="divide-y divide-border">
-            {Array.from({ length: 6 }).map((_, rowIndex) => (
+            {Array.from({ length: rowCount }).map((_, rowIndex) => (
               <div
                 key={rowIndex}
                 className="grid items-center gap-2 p-2 lg:grid-cols-[40px_minmax(180px,1fr)_repeat(6,78px)_112px]"
@@ -1499,10 +1519,12 @@ function AdminEvaluationPage({
   embedded,
   initialView,
   initialSubmissionTab,
+  onInitialContentReady,
 }: {
   embedded: boolean;
   initialView: 'evaluations' | 'submissions';
   initialSubmissionTab?: 'new' | 'edit' | 'recommend' | 'reviews';
+  onInitialContentReady?: () => void;
 }) {
   const { toast } = useToast();
   const router = useRouter();
@@ -3477,16 +3499,41 @@ function AdminEvaluationPage({
 	    },
 	  });
 
-  // 인증 게이트는 전체 화면으로 막되, 데이터 로딩은 아래 실제 화면 요소별 스켈레톤으로 처리합니다.
-  if (!embedded && authLoading) {
-    return <AdminEvaluationRouteSkeleton />;
+  const initialContentLoading = initialView === 'submissions'
+    ? submissionsLoading || recommendationRequestsLoading || reviewsLoading
+    : loading;
+  const initialLoadPendingRef = useRef(true);
+  if (
+    initialLoadPendingRef.current
+    && !authLoading
+    && (hasE2EAdminShellBypass || (user && isAdmin))
+    && !initialContentLoading
+  ) {
+    initialLoadPendingRef.current = false;
   }
 
-  // 로그인하지 않았거나 관리자가 아닌 경우 (리다이렉트 전 화면 방지)
+  useLayoutEffect(() => {
+    if (!onInitialContentReady || authLoading) return;
+    if (!hasE2EAdminShellBypass && (!user || !isAdmin)) {
+      onInitialContentReady();
+      return;
+    }
+    if (initialLoadPendingRef.current) return;
+    onInitialContentReady();
+  }, [initialContentLoading, authLoading, onInitialContentReady, user, isAdmin, hasE2EAdminShellBypass]);
+
   if (!hasE2EAdminShellBypass && !authLoading && (!user || !isAdmin)) {
     return null;
   }
 
+  if (!embedded && initialLoadPendingRef.current && (authLoading || initialContentLoading)) {
+    return <AdminEvaluationRouteSkeleton />;
+  }
+
+  if (embedded && initialLoadPendingRef.current && (authLoading || initialContentLoading)) {
+    return null;
+  }
+
   const pendingRecordActionRequiredPhrase = EVALUATION_RESTORE_CONFIRMATION;
   const pendingRecordActionVerb = '복원';
   const pendingRecordActionName = pendingRecordAction
diff --git a/apps/web/app/api/privacy/location-readiness/route.ts b/apps/web/app/api/privacy/location-readiness/route.ts
index 184e482b26..cab7bdff28 100644
--- a/apps/web/app/api/privacy/location-readiness/route.ts
+++ b/apps/web/app/api/privacy/location-readiness/route.ts
@@ -5,8 +5,12 @@ import { resolveDeviceLocationReadiness } from '@/lib/privacy/location-readiness
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
 
+
 export async function GET() {
-  return NextResponse.json(resolveDeviceLocationReadiness(), {
+  const readiness = resolveDeviceLocationReadiness();
+  return NextResponse.json(
+    { status: readiness.status, reasonCode: 'DEVICE_LOCATION_OPERATOR_EVIDENCE_VERIFIED' },
+    {
     headers: { 'Cache-Control': 'no-store, max-age=0' },
   });
 }
diff --git a/apps/web/app/app-globals.css b/apps/web/app/app-globals.css
index 331ffdc4ed..e43c560e61 100644
--- a/apps/web/app/app-globals.css
+++ b/apps/web/app/app-globals.css
@@ -762,7 +762,8 @@ All colors MUST be HSL.
 
   body {
     @apply bg-background text-foreground font-sans tracking-normal;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
+    background-image: url("/images/ui-noise.png");
+    background-repeat: repeat;
     /* 동적 뷰포트 높이 적용 */
     height: 100%;
     min-height: var(--full-height, 100vh);
@@ -807,51 +808,6 @@ div[style*="z-index"] > div > .custom-marker {
   transform: translateZ(0);  <-- [PERF] Removed to prevent VRAM explosion 
 } */
 
-/* 선택된 마커 애니메이션 */
-@keyframes pulse {
-  0%,
-  100% {
-    transform: scale(1.05);
-    box-shadow:
-      0 4px 12px rgba(0, 0, 0, 0.5),
-      0 0 0 4px rgba(255, 255, 255, 0.9);
-  }
-
-  50% {
-    transform: scale(1.08);
-    box-shadow:
-      0 5px 15px rgba(0, 0, 0, 0.6),
-      0 0 0 5px rgba(255, 255, 255, 1);
-  }
-}
-
-/* 맛집 개수 배지 fade-in/out 애니메이션 */
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95);
-  }
-
-  15% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-
-  85% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95);
-  }
-}
-
-.selected-marker {
-  animation: pulse 2s infinite !important;
-}
-
 /* 페이드인 애니메이션 (위치 이동 없음) */
 @keyframes fadeIn {
   from {
diff --git a/apps/web/app/fonts/pretendard/PretendardVariable.woff2 b/apps/web/app/fonts/pretendard/PretendardVariable.woff2
index 49c54b5152..0ef7285b9f 100644
Binary files a/apps/web/app/fonts/pretendard/PretendardVariable.woff2 and b/apps/web/app/fonts/pretendard/PretendardVariable.woff2 differ
diff --git a/apps/web/app/global-map/page.tsx b/apps/web/app/global-map/page.tsx
index 4a6bc9e8b6..e8007ecd3b 100644
--- a/apps/web/app/global-map/page.tsx
+++ b/apps/web/app/global-map/page.tsx
@@ -533,7 +533,7 @@ export default function GlobalMapPage() {
         <>
             {/* 하단 컨트롤 패널 */}
             <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[min(calc(100vw-1rem),72rem)] px-2">
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[minmax(0,12rem)_minmax(0,12rem)_minmax(0,1fr)_auto] gap-2 lg:gap-3 bg-background/95 backdrop-blur-sm rounded-lg border border-border p-2 lg:p-3 shadow-lg">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[minmax(0,12rem)_minmax(0,12rem)_minmax(0,1fr)_auto] gap-2 lg:gap-3 bg-background/95 rounded-lg border border-border p-2 lg:p-3 shadow-lg">
                     {/* 국가 선택 */}
                     <Select
                         value={selectedCountry || "튀르키예"}
@@ -608,7 +608,7 @@ export default function GlobalMapPage() {
                             <Button
                                 variant="secondary"
                                 size="sm"
-                                className="absolute top-2 left-2 bg-background/95 backdrop-blur-sm hover:bg-background text-sm font-semibold shadow z-10 h-auto py-1 px-2 text-foreground"
+                                className="absolute top-2 left-2 bg-background/95 hover:bg-background text-sm font-semibold shadow z-10 h-auto py-1 px-2 text-foreground"
                                 onClick={() => {
                                     setIsGridMode(false);
                                     setSelectedCountry(country);
@@ -652,7 +652,7 @@ export default function GlobalMapPage() {
 
                                 {shouldShowGoogleMapsFallback && (
                                     <Card
-                                        className="absolute left-3 top-3 z-20 max-h-[calc(100%-1.5rem)] w-[min(calc(100%-1.5rem),24rem)] overflow-hidden border-border bg-background/95 p-3 shadow-lg backdrop-blur"
+                                        className="absolute left-3 top-3 z-20 max-h-[calc(100%-1.5rem)] w-[min(calc(100%-1.5rem),24rem)] overflow-hidden border-border bg-background/95 p-3 shadow-lg"
                                         data-global-map-google-fallback="true"
                                         data-global-map-fallback-source="globalRestaurants"
                                     >
diff --git a/apps/web/app/home-app-globals.css b/apps/web/app/home-app-globals.css
index fe59eb3e6c..5feda9eeb9 100644
--- a/apps/web/app/home-app-globals.css
+++ b/apps/web/app/home-app-globals.css
@@ -20,7 +20,7 @@
 @source "../lib/naver-map-overlay-position-helpers.ts";
 @source "../lib/naver-map-overlay-timings.ts";
 
-html[data-home-chrome-ready="true"] [data-home-static-skeleton] {
+html[data-home-chrome-ready="true"][data-home-panel-ready="true"] [data-home-static-skeleton] {
   display: none;
 }
 
@@ -198,7 +198,8 @@ All colors MUST be HSL.
 
   body {
     @apply bg-background text-foreground font-sans tracking-normal;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
+    background-image: url("/images/ui-noise.png");
+    background-repeat: repeat;
     /* 동적 뷰포트 높이 적용 */
     height: 100%;
     min-height: var(--full-height, 100vh);
@@ -267,71 +268,6 @@ div[style*="z-index"]>div>.custom-marker {
   transform: translateZ(0);  <-- [PERF] Removed to prevent VRAM explosion 
 } */
 
-/* 선택된 마커 애니메이션 */
-@keyframes pulse {
-
-  0%,
-  100% {
-    transform: scale(1.05);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.9);
-  }
-
-  50% {
-    transform: scale(1.08);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 0 5px rgba(255, 255, 255, 1);
-  }
-}
-
-/* 맛집 개수 배지 fade-in/out 애니메이션 */
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95);
-  }
-
-  15% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-
-  85% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95);
-  }
-}
-
-@keyframes mapOverlayFade {
-  0% {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  15% {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  85% {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-.selected-marker {
-  animation: pulse 2s infinite !important;
-}
-
-/* 페이드인 애니메이션 (위치 이동 없음) */
 @keyframes fadeIn {
   from {
     opacity: 0;
diff --git a/apps/web/app/home-client.tsx b/apps/web/app/home-client.tsx
index 91c2cccef8..11f521ac8c 100644
--- a/apps/web/app/home-client.tsx
+++ b/apps/web/app/home-client.tsx
@@ -71,13 +71,13 @@ function HomeMapUserMenuPendingShell() {
     <div aria-hidden="true" data-desktop-map-user-menu-pending="true">
       <span
         data-desktop-map-fullscreen-toggle="true"
-        className="fixed right-20 top-4 z-[120] flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background/95 p-0 text-foreground shadow-lg backdrop-blur-sm"
+        className="fixed right-20 top-4 z-[120] flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background/95 p-0 text-foreground shadow-lg"
       >
         <Maximize2 className="h-4 w-4" />
       </span>
       <span
         data-desktop-map-user-menu="true"
-        className="fixed right-6 top-4 z-[120] flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background/95 p-0 shadow-lg backdrop-blur-sm"
+        className="fixed right-6 top-4 z-[120] flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background/95 p-0 shadow-lg"
       >
         <span className="relative grid h-9 w-9 place-items-center overflow-hidden rounded-full bg-primary/10 text-primary">
           <UserRound className="h-4 w-4" />
@@ -153,7 +153,8 @@ const DEVICE_LOCATION_PERMISSION_DENIED_TOAST = "위치 권한이 거부됐어
 const DEVICE_LOCATION_TIMEOUT_TOAST = "현재 위치를 찾는 시간이 초과됐어요. 잠시 후 다시 시도해 주세요.";
 const DEVICE_LOCATION_UNAVAILABLE_TOAST = "현재 위치를 확인할 수 없어요. 잠시 후 다시 시도해 주세요.";
 const DEVICE_LOCATION_READINESS_BLOCKED =
-  "현재 위치 기능은 운영자 위치 증빙 확인이 완료될 때까지 사용할 수 없어요.";
+  "현재 위치를 지금 표시하지 못했어요. 잠시 후 다시 시도해 주세요.";
+
 const DEVICE_LOCATION_DISCLOSURE =
   "현재 위치 좌표는 현재 React 메모리에만 보관되며 Tzudong에 저장되지 않습니다. 브라우저 지도 렌더링 및 화면 이동은 승인된 지도 제공자 경계를 통과할 수 있습니다. 브라우저 위치 권한을 요청할까요?";
 const DEVICE_LOCATION_DISCLOSURE_CANCELLED =
@@ -1257,7 +1258,7 @@ export default function HomeClient() {
       {isPublicRestrictedMode && (
         <>
           <div
-            className="pointer-events-none fixed left-1/2 top-3 z-[130] -translate-x-1/2 rounded-full border border-border bg-background/90 px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm backdrop-blur-sm"
+            className="pointer-events-none fixed left-1/2 top-3 z-[130] -translate-x-1/2 rounded-full border border-border bg-background/90 px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm"
             data-public-demo-mode="true"
             role="status"
           >
diff --git a/apps/web/app/home-deferred-globals.css b/apps/web/app/home-deferred-globals.css
index 87827a15d7..b3199edc0d 100644
--- a/apps/web/app/home-deferred-globals.css
+++ b/apps/web/app/home-deferred-globals.css
@@ -116,7 +116,8 @@ All colors MUST be HSL.
 
   body {
     @apply bg-background text-foreground font-sans tracking-normal;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
+    background-image: url("/images/ui-noise.png");
+    background-repeat: repeat;
     /* 동적 뷰포트 높이 적용 */
     height: 100%;
     min-height: var(--full-height, 100vh);
@@ -162,48 +163,6 @@ div[style*="z-index"]>div>.custom-marker {
   transform: translateZ(0);  <-- [PERF] Removed to prevent VRAM explosion 
 } */
 
-/* 선택된 마커 애니메이션 */
-@keyframes pulse {
-
-  0%,
-  100% {
-    transform: scale(1.05);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.9);
-  }
-
-  50% {
-    transform: scale(1.08);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 0 5px rgba(255, 255, 255, 1);
-  }
-}
-
-/* 맛집 개수 배지 fade-in/out 애니메이션 */
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95);
-  }
-
-  15% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-
-  85% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95);
-  }
-}
-
-.selected-marker {
-  animation: pulse 2s infinite !important;
-}
-
 /* 페이드인 애니메이션 (위치 이동 없음) */
 @keyframes fadeIn {
   from {
diff --git a/apps/web/app/home-detail-globals.css b/apps/web/app/home-detail-globals.css
index d9410a7e05..ddbc60dacb 100644
--- a/apps/web/app/home-detail-globals.css
+++ b/apps/web/app/home-detail-globals.css
@@ -115,7 +115,8 @@ All colors MUST be HSL.
 
   body {
     @apply bg-background text-foreground font-sans tracking-normal;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
+    background-image: url("/images/ui-noise.png");
+    background-repeat: repeat;
     /* 동적 뷰포트 높이 적용 */
     height: 100%;
     min-height: var(--full-height, 100vh);
@@ -161,48 +162,6 @@ div[style*="z-index"]>div>.custom-marker {
   transform: translateZ(0);  <-- [PERF] Removed to prevent VRAM explosion 
 } */
 
-/* 선택된 마커 애니메이션 */
-@keyframes pulse {
-
-  0%,
-  100% {
-    transform: scale(1.05);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.9);
-  }
-
-  50% {
-    transform: scale(1.08);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 0 5px rgba(255, 255, 255, 1);
-  }
-}
-
-/* 맛집 개수 배지 fade-in/out 애니메이션 */
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95);
-  }
-
-  15% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-
-  85% {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95);
-  }
-}
-
-.selected-marker {
-  animation: pulse 2s infinite !important;
-}
-
 /* 페이드인 애니메이션 (위치 이동 없음) */
 @keyframes fadeIn {
   from {
diff --git a/apps/web/app/home-runtime-shell.tsx b/apps/web/app/home-runtime-shell.tsx
index 5b7a09eccd..3547407d18 100644
--- a/apps/web/app/home-runtime-shell.tsx
+++ b/apps/web/app/home-runtime-shell.tsx
@@ -9,7 +9,6 @@ import { LayoutProvider } from '@/contexts/LayoutContext';
 import { AnonymousHomeAuthProvider, useAuth } from '@/contexts/AuthContextBase';
 import { StaticNotificationProvider } from '@/contexts/NotificationContextBase';
 import { useHomeViewportMode } from '@/hooks/useHomeViewportMode';
-import { cn } from '@/lib/utils';
 import { AUTH_UI_REQUEST_EVENT } from '@/lib/auth-ui-events';
 import {
     AUTH_PRIVACY_ONBOARDING_REASON,
@@ -237,7 +236,7 @@ function MobileHomeLayout({ children }: { children: ReactNode }) {
         <div className="flex overflow-hidden" style={{ height: 'var(--full-height, 100vh)' }}>
             <DeferredUserDataPrefetcher enabled={Boolean(user)} />
 
-            <div className="flex min-h-0 flex-1 flex-col overflow-hidden transition-[margin] duration-300">
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
                 <a href="#main-content" className="skip-link">
                     본문 바로가기
                 </a>
@@ -250,12 +249,10 @@ function MobileHomeLayout({ children }: { children: ReactNode }) {
             </div>
 
             {!isPublicRestrictedMode && (
-                <div className={cn('min-[1600px]:hidden transition-transform duration-300')}>
+                <div className="min-[1600px]:hidden">
                     <MobileBottomNav
-                        className="transition-transform duration-300"
                         style={{
                             transform: 'translate3d(0, calc(var(--mobile-sheet-hide-bottom-nav, 0) * 120%), 0)',
-                            willChange: 'transform',
                         }}
                     />
                 </div>
diff --git a/apps/web/app/mypage/profile/page.tsx b/apps/web/app/mypage/profile/page.tsx
index eb775e6d7c..60c9ad19ad 100644
--- a/apps/web/app/mypage/profile/page.tsx
+++ b/apps/web/app/mypage/profile/page.tsx
@@ -1009,7 +1009,7 @@ export default function ProfilePage() {
               <label
                 htmlFor="mypage-mobile-avatar-upload"
                 aria-label="프로필 사진 변경"
-                className="relative flex h-24 w-24 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-border shadow-sm transition-[border-color,box-shadow] group-hover:ring-2 group-hover:ring-primary/30 md:pointer-events-none"
+                className="relative flex h-24 w-24 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-border shadow-sm group-hover:ring-2 group-hover:ring-primary/30 md:pointer-events-none"
                 style={{
                   width: "6rem",
                   height: "6rem",
@@ -1233,7 +1233,7 @@ export default function ProfilePage() {
                           {action.title}
                         </span>
                         <ChevronRight
-                          className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5"
+                          className="h-4 w-4 shrink-0 text-muted-foreground group-hover:translate-x-0.5"
                           aria-hidden="true"
                         />
                       </Link>
@@ -1289,7 +1289,7 @@ export default function ProfilePage() {
                 aria-valuemax={100}
               >
                 <div
-                  className="h-full rounded-full bg-primary transition-[width]"
+                  className="h-full rounded-full bg-primary"
                   style={{ width: `${tierProgress.progressPercent}%` }}
                   aria-hidden="true"
                 />
@@ -1671,7 +1671,7 @@ export default function ProfilePage() {
               <summary className="flex min-h-10 cursor-pointer touch-manipulation list-none items-center justify-between gap-3 rounded-xl text-sm font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary lg:min-h-9">
                 <span>계정 삭제 옵션 보기</span>
                 <ChevronRight
-                  className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-90"
+                  className="h-4 w-4 shrink-0 text-muted-foreground group-open:rotate-90"
                   aria-hidden="true"
                 />
               </summary>
diff --git a/apps/web/app/mypage/reviews/page.tsx b/apps/web/app/mypage/reviews/page.tsx
index f8fa188c66..7e2b28b232 100644
--- a/apps/web/app/mypage/reviews/page.tsx
+++ b/apps/web/app/mypage/reviews/page.tsx
@@ -447,7 +447,7 @@ export default function ReviewsPage() {
               key={review.id}
               id={`review-${review.id}`}
               ref={index === filteredReviews.length - 1 ? loadMoreRef : null}
-              className={`${myPageListCardClass} transition-all duration-500 ${review.isPinned ? "border-primary border-2" : ""}`}
+              className={`${myPageListCardClass} ${review.isPinned ? "border-primary border-2" : ""}`}
             >
               <CardContent className={myPageListContentClass}>
                 {/* 헤더: 맛집명 + 상태 */}
diff --git a/apps/web/components/admin/AdminConsoleOverview.tsx b/apps/web/components/admin/AdminConsoleOverview.tsx
index 6f91ad9957..13e0afc2d8 100644
--- a/apps/web/components/admin/AdminConsoleOverview.tsx
+++ b/apps/web/components/admin/AdminConsoleOverview.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useFilledSkeletonCount } from "@/lib/use-filled-skeleton-count";
 import Image from "next/image";
 import Link from "next/link";
 import {
@@ -33,7 +34,6 @@ import {
   LayoutList,
   Info,
   Menu,
-  Layers3,
   Maximize2,
   Minimize2,
   Monitor,
@@ -132,7 +132,6 @@ import {
   getAdminModuleStateWarning,
   type AdminConsoleRouteModuleId,
 } from "@/lib/admin/admin-module-routing";
-import { TrendProposalQueue } from "@/components/admin/TrendProposalQueue";
 import { AdminEmbeddedModuleShell } from "@/components/admin/AdminEmbeddedModuleShell";
 import { AdminPipelineDashboard } from "@/components/admin/pipeline/AdminPipelineDashboard";
 
@@ -223,18 +222,6 @@ const consoleModules: ConsoleModule[] = [
     actionLabel: "스토리보드 만들기",
     priority: "urgent",
   },
-  {
-    id: "map-overlays",
-    title: "지도 오버레이",
-    description:
-      "수동 오버레이, 트렌드 제안, 트렌드 실행 상태를 한 작업대에서 확인합니다.",
-    href: "/admin?module=map-overlays",
-    icon: Layers3,
-    badge: "오버레이",
-    actionLabel: "지도 오버레이 관리",
-    priority: "urgent",
-  },
-
   {
     id: "banners",
     title: "배너 관리",
@@ -414,7 +401,7 @@ const sidebarSections: SidebarSection[] = [
   },
   {
     label: "운영",
-    items: getSidebarConsoleItems(["map-overlays", "users", "banners", "insights", "pipeline"]),
+    items: getSidebarConsoleItems(["users", "banners", "insights", "pipeline"]),
   },
   {
     label: "실험실",
@@ -726,6 +713,8 @@ function loadAdminRouteRecommendationModule() {
 const ADMIN_EVALUATION_STATIC_STATUS_FILTERS = ["전체", "미처리", "승인대기", "승인됨", "누락", "삭제됨"] as const;
 
 function AdminEvaluationModuleStaticShell() {
+  const mobileSkeleton = useFilledSkeletonCount(96, 4);
+  const desktopSkeleton = useFilledSkeletonCount(64, 6, 44);
   return (
     <div
       role="status"
@@ -805,8 +794,8 @@ function AdminEvaluationModuleStaticShell() {
           </div>
         </div>
 
-        <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:hidden" aria-hidden="true">
-          {Array.from({ length: 4 }).map((_, index) => (
+        <div ref={mobileSkeleton.ref} className="grid min-h-0 flex-1 grid-cols-1 gap-2 md:grid-cols-2 lg:hidden" aria-hidden="true">
+          {Array.from({ length: mobileSkeleton.count }).map((_, index) => (
             <div key={index} className="rounded-2xl border border-border/70 bg-card/95 p-3 shadow-sm">
               <div className="flex items-center gap-2">
                 <Skeleton className="h-12 w-16 shrink-0 rounded-md motion-reduce:animate-none" />
@@ -824,7 +813,7 @@ function AdminEvaluationModuleStaticShell() {
           ))}
         </div>
 
-        <div className="hidden min-h-0 overflow-hidden rounded-lg border bg-background lg:block">
+        <div ref={desktopSkeleton.ref} className="hidden min-h-0 flex-1 flex-col overflow-hidden rounded-lg border bg-background lg:flex">
           <div className="border-b bg-muted/35 lg:grid lg:grid-cols-[40px_minmax(180px,1fr)_repeat(6,78px)_112px]" aria-hidden="true">
             {Array.from({ length: 9 }).map((_, index) => (
               <div key={index} className="px-2 py-2">
@@ -833,7 +822,7 @@ function AdminEvaluationModuleStaticShell() {
             ))}
           </div>
           <div className="divide-y divide-border">
-            {Array.from({ length: 6 }).map((_, rowIndex) => (
+            {Array.from({ length: desktopSkeleton.count }).map((_, rowIndex) => (
               <div
                 key={rowIndex}
                 className="grid items-center gap-2 p-2 lg:grid-cols-[40px_minmax(180px,1fr)_repeat(6,78px)_112px]"
@@ -861,7 +850,7 @@ function AdminEvaluationModuleStaticShell() {
 
 const AdminEvaluationModule = dynamic(loadAdminEvaluationModule, {
   ssr: false,
-  loading: () => <AdminEvaluationModuleStaticShell />,
+  loading: () => null,
 });
 
 const AdminBannerModule = dynamic(loadAdminBannerModule, {
@@ -910,7 +899,6 @@ const AdminRouteRecommendationModule = dynamic(
 
 const ADMIN_CONSOLE_INLINE_MODULE_IDS = new Set<AdminModuleId>([
   "overview",
-  "map-overlays",
   "llm",
   "audit",
 ]);
@@ -920,7 +908,6 @@ function preloadAdminConsoleModule(moduleId: AdminModuleId): Promise<unknown> {
     case "overview":
     case "llm":
     case "audit":
-    case "map-overlays":
       return Promise.resolve();
     case "restaurants":
     case "submissions":
@@ -3579,14 +3566,16 @@ function AdminDashboardPanelBodySkeleton({
 }: {
   variant?: AdminDashboardSkeletonVariant;
 }) {
+  const tableSkeleton = useFilledSkeletonCount(28, 5);
   if (variant === "table") {
     return (
       <div
+        ref={tableSkeleton.ref}
         className="min-h-0 flex-1 space-y-2 overflow-hidden rounded-xl border border-border/70 bg-background p-3"
         data-admin-dashboard-dynamic-skeleton="table"
         aria-hidden="true"
       >
-        {Array.from({ length: 5 }).map((_, index) => (
+        {Array.from({ length: tableSkeleton.count }).map((_, index) => (
           <div
             key={index}
             className="grid grid-cols-[minmax(0,1fr)_4rem_4rem] gap-3"
@@ -9274,153 +9263,14 @@ function AuditPlaceholder() {
   );
 }
 
-type AdminMapOverlayTabId = "manual" | "trend-proposals" | "trend-runs";
-
-const ADMIN_MAP_OVERLAY_TABS: Array<{
-  id: AdminMapOverlayTabId;
-  label: string;
-  description: string;
-}> = [
-  {
-    id: "manual",
-    label: "수동 오버레이",
-    description: "Preview → Confirm → Apply → Readback → Audit 수동 적용 흐름",
-  },
-  {
-    id: "trend-proposals",
-    label: "트렌드 제안",
-    description: "승인 대기 트렌드/시즌 제안 검토와 원자적 승인",
-  },
-  {
-    id: "trend-runs",
-    label: "트렌드 실행",
-    description: "백엔드 전용 실행 요청, 큐 상태, 취소/readback 확인",
-  },
-];
-
-function AdminMapOverlayOperationsModule() {
-  const [activeTab, setActiveTab] = useState<AdminMapOverlayTabId>("manual");
-  const activeTabConfig =
-    ADMIN_MAP_OVERLAY_TABS.find((tab) => tab.id === activeTab) ??
-    ADMIN_MAP_OVERLAY_TABS[0];
-
-  return (
-    <AdminEmbeddedModuleShell
-      moduleId="map-overlays"
-      titleId="admin-map-overlays-title"
-      title="지도 오버레이"
-      icon={Layers3}
-      summary={`${activeTabConfig.label} · readback/audit 확인 흐름`}
-      contentClassName="overflow-y-auto p-2 md:p-3"
-    >
-      <section
-        className="flex min-h-full min-w-0 flex-col gap-2 md:gap-3"
-        aria-label="지도 오버레이 작업"
-        data-admin-map-overlays-module="true"
-        data-layout-primitives="panel-layout list-detail step-nav stack"
-      >
-        <div className="space-y-2 md:space-y-3">
-          <Badge variant="outline" className="w-fit rounded-full">
-            승인 데이터: admin_restaurant_map_overlays
-          </Badge>
-          <div
-            role="tablist"
-            aria-label="지도 오버레이 작업 탭"
-            className="grid grid-cols-3 gap-1 rounded-xl bg-muted/35 p-1 md:gap-2 md:bg-transparent md:p-0"
-            data-admin-map-overlays-tabs="manual trend-proposals trend-runs"
-          >
-            {ADMIN_MAP_OVERLAY_TABS.map((tab) => (
-              <button
-                key={tab.id}
-                type="button"
-                role="tab"
-                aria-selected={activeTab === tab.id}
-                className={cn(
-                  "min-w-0 rounded-lg border px-2 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary md:rounded-xl md:p-3",
-                  activeTab === tab.id
-                    ? "border-primary/40 bg-primary/5 text-foreground"
-                    : "border-border bg-background/70 text-muted-foreground hover:bg-muted/60",
-                )}
-                data-admin-map-overlays-tab={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-              >
-                <span className="block truncate text-xs font-extrabold md:text-sm">{tab.label}</span>
-                <span className="mt-0.5 hidden text-xs leading-5 md:block">
-                  {tab.description}
-                </span>
-              </button>
-            ))}
-          </div>
-
-          <div
-            className="min-w-0 rounded-xl bg-background/70 p-2 md:rounded-2xl md:border md:border-border/70 md:p-3"
-            data-admin-map-overlays-active-tab={activeTab}
-          >
-            <p className="text-xs font-bold uppercase tracking-[0.14em] text-muted-foreground">
-              {activeTabConfig.label}
-            </p>
-            {activeTab === "manual" ? (
-              <div className="mt-2 grid gap-2 text-sm leading-6 text-muted-foreground md:grid-cols-2">
-                <div className="rounded-lg bg-card/80 p-2 md:rounded-xl md:p-3">
-                  <p className="font-bold text-foreground">수동 적용 계약</p>
-                  <p className="mt-1">
-                    `/api/admin/map-overlays/preview`에서 해시와 readback을
-                    확인한 뒤 `/api/admin/map-overlays/apply`가 audit RPC로만
-                    승인 데이터를 변경합니다.
-                  </p>
-                </div>
-                <div className="rounded-lg bg-card/80 p-2 md:rounded-xl md:p-3">
-                  <p className="font-bold text-foreground">운영 순서</p>
-                  <p className="mt-1">
-                    Preview → Confirm → Apply → Readback → Audit. 공개 홈 지도는
-                    관리자 오버레이 API를 직접 호출하지 않습니다.
-                  </p>
-                </div>
-              </div>
-            ) : activeTab === "trend-proposals" ? (
-              <div className="mt-3" data-admin-map-overlays-trend-proposals="true">
-                <TrendProposalQueue />
-              </div>
-            ) : (
-              <div
-                className="mt-2 grid gap-2 text-sm leading-6 text-muted-foreground md:grid-cols-3"
-                data-admin-map-overlays-trend-runs="true"
-              >
-                <div className="rounded-lg bg-card/80 p-2 md:rounded-xl md:p-3">
-                  <p className="font-bold text-foreground">요청 생성</p>
-                  <p className="mt-1">
-                    `/api/admin/trend-job-requests`는 관리자 요청만 큐에 등록하고
-                    컬렉터/스코어러를 inline 실행하지 않습니다.
-                  </p>
-                </div>
-                <div className="rounded-lg bg-card/80 p-2 md:rounded-xl md:p-3">
-                  <p className="font-bold text-foreground">상태/취소</p>
-                  <p className="mt-1">
-                    상태 조회와 queued 취소는 owner-scoped readback으로 표시하며
-                    worker claim 이후에는 취소를 성공처럼 꾸미지 않습니다.
-                  </p>
-                </div>
-                <div className="rounded-lg bg-card/80 p-2 md:rounded-xl md:p-3">
-                  <p className="font-bold text-foreground">백엔드 경계</p>
-                  <p className="mt-1">
-                    트렌드 수집/평가는 backend worker와 RPC finalization 경로에서만
-                    진행됩니다.
-                  </p>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
-    </AdminEmbeddedModuleShell>
-  );
-}
 function InlineModulePanel({
   module,
   initialStoryboardResult,
+  onModuleContentReady,
 }: {
   module: ConsoleModule;
   initialStoryboardResult?: StoryboardInitialResult | null;
+  onModuleContentReady?: (moduleId: AdminModuleId) => void;
 }) {
   if (module.id === "audit") {
     return <AuditPlaceholder />;
@@ -9434,11 +9284,15 @@ function InlineModulePanel({
             key="restaurants"
             embedded
             initialView="evaluations"
+            onInitialContentReady={() => onModuleContentReady?.("restaurants")}
           />
         );
       case "restaurant-refresh-history":
         return (
-          <AdminRestaurantRefreshHistoryModule key="restaurant-refresh-history" />
+          <AdminRestaurantRefreshHistoryModule
+            key="restaurant-refresh-history"
+            onInitialContentReady={() => onModuleContentReady?.("restaurant-refresh-history")}
+          />
         );
       case "submissions":
         return (
@@ -9447,6 +9301,7 @@ function InlineModulePanel({
             embedded
             initialView="submissions"
             initialSubmissionTab="new"
+            onInitialContentReady={() => onModuleContentReady?.("submissions")}
           />
         );
       case "reviews":
@@ -9456,12 +9311,11 @@ function InlineModulePanel({
             embedded
             initialView="submissions"
             initialSubmissionTab="reviews"
+            onInitialContentReady={() => onModuleContentReady?.("reviews")}
           />
         );
-      case "map-overlays":
-        return <AdminMapOverlayOperationsModule key="admin-map-overlays" />;
       case "banners":
-        return <AdminBannerModule key="admin-banners" embedded />;
+        return <AdminBannerModule key="admin-banners" embedded onInitialContentReady={() => onModuleContentReady?.("banners")} />;
       case "storyboard":
         return (
           <AdminStoryboardGenerator
@@ -9474,7 +9328,7 @@ function InlineModulePanel({
           <AdminYoutubeThumbnailGenerator key="admin-youtube-thumbnail-generator" />
         );
       case "users":
-        return <AdminUsersModule key="admin-users" />;
+        return <AdminUsersModule key="admin-users" onInitialContentReady={() => onModuleContentReady?.("users")} />;
       case "insights":
         return <InsightsModule key="admin-insights" embedded />;
       case "pipeline":
@@ -9512,7 +9366,6 @@ type AdminConsoleCanvasSkeletonVariant =
   | "submission-queue"
   | "refresh-history"
   | "banner-editor"
-  | "overlay-workspace"
   | "user-table"
   | "insights-grid"
   | "route-map"
@@ -9554,6 +9407,10 @@ function getAdminConsoleModuleLoadingSkeleton(
   moduleId: AdminModuleId,
   title?: string,
 ) {
+  if (moduleId === "restaurants" || moduleId === "submissions" || moduleId === "reviews") {
+    return <AdminEvaluationModuleStaticShell />;
+  }
+
   if (moduleId === "overview") {
     return <AdminDashboardManagementSkeleton />;
   }
@@ -9609,14 +9466,6 @@ function getAdminConsoleCanvasSkeletonConfig({
         icon: RefreshCw,
         variant: "refresh-history",
       };
-    case "map-overlays":
-      return {
-        moduleId,
-        title: title ?? "지도 오버레이",
-        description: "수동 오버레이, 트렌드 제안, 트렌드 실행 탭을 준비합니다.",
-        icon: Layers3,
-        variant: "overlay-workspace",
-      };
     case "banners":
       return {
         moduleId,
@@ -10517,6 +10366,17 @@ export function AdminConsoleOverview({
   const [loadedModuleIds, setLoadedModuleIds] = useState<
     ReadonlySet<AdminModuleId>
   >(createInitialAdminConsoleLoadedModuleIds);
+  const [contentReadyModuleIds, setContentReadyModuleIds] = useState<
+    ReadonlySet<AdminModuleId>
+  >(() => new Set());
+  const markModuleContentReady = useCallback((moduleId: AdminModuleId) => {
+    setContentReadyModuleIds((currentModuleIds) => {
+      if (currentModuleIds.has(moduleId)) return currentModuleIds;
+      const nextModuleIds = new Set(currentModuleIds);
+      nextModuleIds.add(moduleId);
+      return nextModuleIds;
+    });
+  }, []);
 
   const userMetadataNickname =
     typeof user?.user_metadata?.nickname === "string"
@@ -10986,6 +10846,16 @@ export function AdminConsoleOverview({
 
   const isAdminCanvasBootstrapping =
     isShellBootstrapping || !loadedModuleIds.has(activeModuleId);
+  const moduleWaitsForContent =
+    activeModuleId === "restaurants" ||
+    activeModuleId === "submissions" ||
+    activeModuleId === "reviews" ||
+    activeModuleId === "users" ||
+    activeModuleId === "banners" ||
+    activeModuleId === "restaurant-refresh-history";
+  const showSingleModuleSkeleton =
+    isAdminCanvasBootstrapping ||
+    (moduleWaitsForContent && !contentReadyModuleIds.has(activeModuleId));
   const overviewModuleSummary = statsLoading
     ? "KPI 데이터를 불러오는 중입니다."
     : statsHasError
@@ -11056,8 +10926,12 @@ export function AdminConsoleOverview({
           <p className="sr-only" aria-live="polite">
             {activeModuleLabel} 작업 화면으로 전환됨
           </p>
+          {showSingleModuleSkeleton
+            ? getAdminConsoleModuleLoadingSkeleton(activeModuleId, activeModuleLabel)
+            : null}
+          <div className={showSingleModuleSkeleton ? "hidden" : "h-full min-h-0"}>
           {isAdminCanvasBootstrapping ? (
-            getAdminConsoleModuleLoadingSkeleton(activeModuleId, activeModuleLabel)
+            null
           ) : activeModuleId === "overview" ? (
             <AdminEmbeddedModuleShell
               moduleId="overview"
@@ -11096,8 +10970,10 @@ export function AdminConsoleOverview({
             <InlineModulePanel
               module={activeModule}
               initialStoryboardResult={initialStoryboardResult}
+              onModuleContentReady={markModuleContentReady}
             />
           ) : null}
+          </div>
         </section>
       </div>
     </main>
diff --git a/apps/web/components/admin/AdminOverviewDashboard.tsx b/apps/web/components/admin/AdminOverviewDashboard.tsx
index 8135354f38..9ea2663303 100644
--- a/apps/web/components/admin/AdminOverviewDashboard.tsx
+++ b/apps/web/components/admin/AdminOverviewDashboard.tsx
@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useFilledSkeletonCount } from "@/lib/use-filled-skeleton-count";
 import { useQuery } from "@tanstack/react-query";
 import { Image as ImageIcon, Layers3 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
@@ -1034,6 +1035,7 @@ function AdminMapOverviewCanvas({
 }
 
 function AdminMapInfoPanelSkeleton() {
+  const routeSkeleton = useFilledSkeletonCount(76, 4);
   return (
     <aside
       className="flex min-h-0 min-w-0 flex-col gap-2 lg:h-full lg:overflow-hidden"
@@ -1056,13 +1058,13 @@ function AdminMapInfoPanelSkeleton() {
           </div>
         </div>
       </section>
-      <section className="rounded-xl bg-card/80 p-2.5 shadow-sm lg:min-h-0 lg:flex-1">
+      <section ref={routeSkeleton.ref} className="rounded-xl bg-card/80 p-2.5 shadow-sm lg:min-h-0 lg:flex-1">
         <div className="flex items-center justify-between gap-2">
           <Skeleton className="h-5 w-28 rounded-full motion-reduce:animate-none" />
           <Skeleton className="h-5 w-20 rounded-full motion-reduce:animate-none" />
         </div>
         <div className="mt-3 space-y-1.5">
-          {Array.from({ length: 4 }).map((_, index) => (
+          {Array.from({ length: routeSkeleton.count }).map((_, index) => (
             <Skeleton
               key={index}
               className="h-[4.75rem] rounded-xl motion-reduce:animate-none"
diff --git a/apps/web/components/admin/AdminRestaurantModal.tsx b/apps/web/components/admin/AdminRestaurantModal.tsx
index 80414af429..9bdc1fbb52 100644
--- a/apps/web/components/admin/AdminRestaurantModal.tsx
+++ b/apps/web/components/admin/AdminRestaurantModal.tsx
@@ -1701,7 +1701,7 @@ export function AdminRestaurantModal({
             <>
                 <section
                     ref={desktopAdminRestaurantPanelRef}
-                    className="fixed bottom-24 right-6 top-6 z-[95] w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl backdrop-blur-sm will-change-transform"
+                    className="fixed bottom-24 right-6 top-6 z-[95] w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl"
                     style={{ transform: `translate3d(${desktopAdminRestaurantPanelPosition.x}px, ${desktopAdminRestaurantPanelPosition.y}px, 0)` }}
                     data-desktop-map-admin-restaurant-panel="true"
                     role="dialog"
diff --git a/apps/web/components/admin/AdminRestaurantRefreshHistoryPanel.tsx b/apps/web/components/admin/AdminRestaurantRefreshHistoryPanel.tsx
index 1f7f2ba275..e984837af3 100644
--- a/apps/web/components/admin/AdminRestaurantRefreshHistoryPanel.tsx
+++ b/apps/web/components/admin/AdminRestaurantRefreshHistoryPanel.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useFilledSkeletonCount } from "@/lib/use-filled-skeleton-count";
 import {
   History,
   ListChecks,
@@ -219,15 +220,17 @@ function RefreshWorkflowSteps() {
 }
 
 function RefreshCandidateListSkeleton() {
+  const skeleton = useFilledSkeletonCount(92, 5);
   return (
     <div
-      className="space-y-2 p-2 xl:divide-y xl:divide-border xl:space-y-0 xl:p-0"
+      ref={skeleton.ref}
+      className="h-full min-h-0 flex-1 space-y-2 p-2 xl:divide-y xl:divide-border xl:space-y-0 xl:p-0"
       role="status"
       aria-busy="true"
       aria-label="맛집 최신화 이력 로딩 중"
     >
       <span className="sr-only">맛집 최신화 후보 목록을 불러오는 중입니다.</span>
-      {Array.from({ length: 5 }).map((_, rowIndex) => (
+      {Array.from({ length: skeleton.count }).map((_, rowIndex) => (
         <div
           key={rowIndex}
           className="grid gap-3 rounded-lg border border-border/70 bg-background/80 px-3 py-3 shadow-sm xl:rounded-none xl:border-x-0 xl:border-t-0 xl:bg-transparent xl:shadow-none xl:grid-cols-[1.2fr_1fr_0.9fr_0.9fr_110px] xl:items-center"
@@ -622,13 +625,23 @@ function RefreshCandidateDetailPanel({
   );
 }
 
-export function AdminRestaurantRefreshHistoryPanel() {
+export function AdminRestaurantRefreshHistoryPanel({
+  onInitialContentReady,
+}: {
+  onInitialContentReady?: () => void;
+} = {}) {
   const [data, setData] = useState<RefreshHistoryResponse | null>(null);
   const [statusFilter, setStatusFilter] = useState<
     RefreshCandidateStatus | "all"
   >("all");
   const [query, setQuery] = useState("");
   const [isLoading, setIsLoading] = useState(true);
+  const initialLoadPendingRef = useRef(true);
+  if (initialLoadPendingRef.current && !isLoading) initialLoadPendingRef.current = false;
+  useLayoutEffect(() => {
+    if (!onInitialContentReady || initialLoadPendingRef.current) return;
+    onInitialContentReady();
+  }, [isLoading, onInitialContentReady]);
   const [error, setError] = useState<string | null>(null);
   const [selectedCandidate, setSelectedCandidate] =
     useState<RefreshCandidateRow | null>(null);
diff --git a/apps/web/components/admin/AdminUsersPanel.tsx b/apps/web/components/admin/AdminUsersPanel.tsx
index 63a3d6b4b2..8767d90797 100644
--- a/apps/web/components/admin/AdminUsersPanel.tsx
+++ b/apps/web/components/admin/AdminUsersPanel.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useFilledSkeletonCount } from "@/lib/use-filled-skeleton-count";
 import {
   Ban,
   CheckCircle2,
@@ -132,11 +133,13 @@ function SummaryMetric({ label, value, tone = "default", isLoading = false }: {
 }
 
 function UserTableSkeleton() {
+  const mobileSkeleton = useFilledSkeletonCount(112, 4);
+  const desktopSkeleton = useFilledSkeletonCount(56, 6, 36);
   return (
-    <div role="status" aria-busy="true" aria-label="사용자 목록 로딩 중" data-admin-users-loading-list>
+    <div ref={desktopSkeleton.ref} role="status" aria-busy="true" aria-label="사용자 목록 로딩 중" data-admin-users-loading-list className="h-full min-h-0 flex-1">
       <span className="sr-only">사용자 목록을 불러오는 중입니다.</span>
-      <div className="grid gap-2 md:hidden" aria-hidden="true">
-        {Array.from({ length: 4 }).map((_, index) => (
+      <div ref={mobileSkeleton.ref} className="grid gap-2 md:hidden" aria-hidden="true">
+        {Array.from({ length: mobileSkeleton.count }).map((_, index) => (
           <div key={index} className="rounded-2xl border border-border/70 bg-background/80 p-3 shadow-sm">
             <div className="flex items-start justify-between gap-2">
               <div className="min-w-0 flex-1 space-y-1.5">
@@ -164,7 +167,7 @@ function UserTableSkeleton() {
             </tr>
           </thead>
           <tbody className="divide-y divide-border/50 bg-background/70">
-            {Array.from({ length: 6 }).map((_, index) => (
+            {Array.from({ length: desktopSkeleton.count }).map((_, index) => (
               <tr key={index}>
                 <td className="min-w-0 px-3 py-3 align-top">
                   <button type="button" tabIndex={-1} className="block min-w-0 text-left" aria-hidden="true">
@@ -220,7 +223,11 @@ function RoleBadge({ isAdmin }: { isAdmin: boolean }) {
   );
 }
 
-export default function AdminUsersPanel() {
+export default function AdminUsersPanel({
+  onInitialContentReady,
+}: {
+  onInitialContentReady?: () => void;
+} = {}) {
   const { user: currentUser } = useAuth();
   const { toast } = useToast();
   const [users, setUsers] = useState<ManagedUser[]>([]);
@@ -232,6 +239,12 @@ export default function AdminUsersPanel() {
   const [riskConfirmation, setRiskConfirmation] = useState("");
   const [mutationResult, setMutationResult] = useState<AdminUserMutationResult | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const initialLoadPendingRef = useRef(true);
+  if (initialLoadPendingRef.current && !isLoading) initialLoadPendingRef.current = false;
+  useLayoutEffect(() => {
+    if (!onInitialContentReady || initialLoadPendingRef.current) return;
+    onInitialContentReady();
+  }, [isLoading, onInitialContentReady]);
   const [isMutating, setIsMutating] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
diff --git a/apps/web/components/admin/EvaluationTableNew.tsx b/apps/web/components/admin/EvaluationTableNew.tsx
index 52ad4577fc..a8284f2026 100644
--- a/apps/web/components/admin/EvaluationTableNew.tsx
+++ b/apps/web/components/admin/EvaluationTableNew.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef, useMemo, memo, forwardRef } from 'react';
+import React, { useState, useEffect, useLayoutEffect, useCallback, useRef, useMemo, memo, forwardRef } from 'react';
 import NextImage from 'next/image';
 import { EvaluationRecord } from '@/types/evaluation';
 import {
@@ -592,6 +592,22 @@ export function EvaluationTable({
   const [isDesktopLayout, setIsDesktopLayout] = useState<boolean | null>(null);
   const rowRefs = useRef<{ [key: string]: HTMLTableRowElement | null }>({});
   const tableScrollContainerRef = useRef<HTMLDivElement>(null);
+  const [desktopSkeletonCount, setDesktopSkeletonCount] = useState(6);
+  const [mobileSkeletonCount, setMobileSkeletonCount] = useState(4);
+  useLayoutEffect(() => {
+    const node = tableScrollContainerRef.current;
+    if (!node || !loading || records.length > 0) return;
+    const update = () => {
+      const height = node.clientHeight;
+      if (height <= 0) return;
+      setDesktopSkeletonCount(Math.max(6, Math.ceil((height - 48) / 72)));
+      setMobileSkeletonCount(Math.max(4, Math.ceil(height / 88)));
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [loading, records.length]);
   const loadMoreSentinelRef = useRef<HTMLDivElement>(null);
   const loadMoreObserverRef = useRef<IntersectionObserver | null>(null);
 
@@ -1062,7 +1078,7 @@ export function EvaluationTable({
   const loadMoreSentinel = hasMore && onLoadMore ? <div ref={loadMoreSentinelRef} className="h-8" /> : null;
   const mobileLoadingCards = (
     <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:hidden" role="status" aria-busy="true" aria-label="맛집 검수 카드 로딩 중">
-      {Array.from({ length: 4 }).map((_, index) => (
+      {Array.from({ length: mobileSkeletonCount }).map((_, index) => (
         <div key={index} className="rounded-lg border bg-card p-2">
           <div className="flex items-center gap-2">
             <Skeleton className="h-12 w-16 shrink-0 rounded-md motion-reduce:animate-none" aria-hidden="true" />
@@ -1080,7 +1096,7 @@ export function EvaluationTable({
       ))}
     </div>
   );
-  const desktopLoadingRows = Array.from({ length: 6 }).map((_, index) => (
+  const desktopLoadingRows = Array.from({ length: desktopSkeletonCount }).map((_, index) => (
     <TableRow key={`evaluation-loading-${index}`} aria-hidden="true">
       <TableCell className="sticky left-0 z-10 bg-background/95 px-2 sm:px-4">
         <Skeleton className="h-6 w-6 rounded-md motion-reduce:animate-none" aria-hidden="true" />
@@ -1442,7 +1458,7 @@ export function EvaluationTable({
         className={cn(
           shouldRenderMobile
             ? "flex h-full min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain space-y-3 pb-[calc(var(--mobile-bottom-nav-height,60px)+env(safe-area-inset-bottom)+12px)]"
-            : "space-y-3"
+            : "flex h-full min-h-0 flex-1 flex-col space-y-3"
         )}
       >
         {shouldRenderMobile && (
diff --git a/apps/web/components/admin/SubmissionListView.tsx b/apps/web/components/admin/SubmissionListView.tsx
index cebe2e16f8..bd521802dc 100644
--- a/apps/web/components/admin/SubmissionListView.tsx
+++ b/apps/web/components/admin/SubmissionListView.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback, useMemo, useEffect, useRef, memo } from 'react';
+import { useFilledSkeletonCount } from '@/lib/use-filled-skeleton-count';
 import Image from 'next/image';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -274,6 +275,7 @@ export function SubmissionListView({
 }: SubmissionListViewProps) {
     // 탭 상태 (초기 탭 지정 가능)
     const [activeTab, setActiveTab] = useState<SubmissionAdminTab>(initialTab);
+    const submissionListSkeleton = useFilledSkeletonCount(76, 4, 40);
     const isMobile = useIsMobile();
     const SUBMISSION_LIST_PAGE_SIZE = 10;
 
@@ -1099,9 +1101,9 @@ export function SubmissionListView({
             isMobile && "ml-0 min-w-[18px] px-1"
         );
     const renderListSkeletonCards = (label: string) => (
-        <div className={listBodyClassName} role="status" aria-busy="true" aria-label={`${label} 목록 로딩 중`}>
+        <div ref={submissionListSkeleton.ref} className={listBodyClassName} role="status" aria-busy="true" aria-label={`${label} 목록 로딩 중`}>
             <Skeleton className="h-8 rounded-md motion-reduce:animate-none" aria-hidden="true" />
-            {Array.from({ length: 4 }).map((_, index) => (
+            {Array.from({ length: submissionListSkeleton.count }).map((_, index) => (
                 <Card key={index} className="rounded-lg border p-2">
                     <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_80px_72px] sm:items-center">
                         <div className="min-w-0 space-y-1.5">
diff --git a/apps/web/components/announcement/AnnouncementPanel.tsx b/apps/web/components/announcement/AnnouncementPanel.tsx
index 7255d641d4..d9ce48ab8e 100644
--- a/apps/web/components/announcement/AnnouncementPanel.tsx
+++ b/apps/web/components/announcement/AnnouncementPanel.tsx
@@ -99,7 +99,7 @@ export default function AnnouncementPanel({
 const ITEMS_PER_PAGE = 5;
 
 function InlineCountSkeleton() {
-    return <span className="inline-block h-3 w-6 rounded-full bg-muted/70 align-middle animate-pulse motion-reduce:animate-none" aria-hidden="true" />;
+    return <span className="inline-block h-3 w-6 rounded-full bg-muted/70 align-middle" aria-hidden="true" />;
 }
 
 function AnnouncementListItemSkeleton({ index }: { index: number }) {
diff --git a/apps/web/components/announcement/AnnouncementPanelLoadingFallback.tsx b/apps/web/components/announcement/AnnouncementPanelLoadingFallback.tsx
index cdee66985d..c79c0bd97f 100644
--- a/apps/web/components/announcement/AnnouncementPanelLoadingFallback.tsx
+++ b/apps/web/components/announcement/AnnouncementPanelLoadingFallback.tsx
@@ -11,7 +11,7 @@ type AnnouncementPanelLoadingFallbackProps = {
 };
 
 function InlineCountSkeleton() {
-    return <span className="inline-block h-3 w-6 rounded-full bg-muted/70 align-middle animate-pulse motion-reduce:animate-none" aria-hidden="true" />;
+    return <span className="inline-block h-3 w-6 rounded-full bg-muted/70 align-middle" aria-hidden="true" />;
 }
 
 function AnnouncementListItemSkeleton({ index }: { index: number }) {
diff --git a/apps/web/components/feed/FeedContent.tsx b/apps/web/components/feed/FeedContent.tsx
index 7fe220030a..087edb8f00 100644
--- a/apps/web/components/feed/FeedContent.tsx
+++ b/apps/web/components/feed/FeedContent.tsx
@@ -11,6 +11,7 @@ import { useAuth } from '@/contexts/AuthContext';
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
 import { supabase } from '@/integrations/supabase/client';
 import { toast } from '@/hooks/use-toast';
+import { mapPanelIconButtonClass } from '@/components/home/map-panel-chrome';
 import { cn } from '@/lib/utils';
 import { FeedSkeleton } from "@/components/ui/skeleton-loaders";
 import { useReviewLikesRealtime } from '@/hooks/use-review-likes-realtime';
@@ -583,7 +584,7 @@ export default function FeedContent({
             )}>
                 {/* 헤더 */}
                 {showHeader && (
-                    <div className="shrink-0 border-b border-border bg-background px-3 py-3 sm:px-5 sm:py-4">
+                    <div className={cn("shrink-0 border-b border-border bg-background", isOverlay ? "px-4 py-3" : "px-3 py-3 sm:px-5 sm:py-4")}>
                         <div className="flex items-center justify-between gap-2">
                             <div className="min-w-0 flex-1">
                                 <h1 className={cn(
@@ -608,7 +609,7 @@ export default function FeedContent({
                                     <Button
                                         variant="ghost"
                                         size="icon"
-                                        className="h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"
+                                        className={isOverlay ? mapPanelIconButtonClass : "h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"}
                                         onClick={() => setShowMyReviewsOnly(!showMyReviewsOnly)}
                                         title={showMyReviewsOnly ? "모든 리뷰 보기" : "내 리뷰만 보기"}
                                         aria-label={showMyReviewsOnly ? "모든 리뷰 보기" : "내 리뷰만 보기"}
@@ -624,7 +625,7 @@ export default function FeedContent({
                                     variant="ghost"
                                     size="icon"
                                     onClick={() => setIsFilterExpanded(!isFilterExpanded)}
-                                    className="h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"
+                                    className={isOverlay ? mapPanelIconButtonClass : "h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"}
                                     title="검색 필터"
                                     aria-label={isFilterExpanded ? "검색 필터 접기" : "검색 필터 펼치기"}
                                 >
@@ -635,7 +636,7 @@ export default function FeedContent({
                                         variant="ghost"
                                         size="icon"
                                         onClick={handleWriteReview}
-                                        className="h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"
+                                        className={isOverlay ? mapPanelIconButtonClass : "h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"}
                                         title="리뷰 작성"
                                         aria-label="리뷰 작성"
                                     >
@@ -643,7 +644,7 @@ export default function FeedContent({
                                     </Button>
                                 )}
                                 {isOverlay && onClose && (
-                                    <Button variant="ghost" size="icon" onClick={onClose} className="h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted" aria-label="리뷰 패널 닫기">
+                                    <Button variant="ghost" size="icon" onClick={onClose} className={isOverlay ? mapPanelIconButtonClass : "h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"} aria-label="리뷰 패널 닫기">
                                         <X className="h-5 w-5" aria-hidden="true" />
                                     </Button>
                                 )}
diff --git a/apps/web/components/home/DesktopLeftPanelBookmarks.tsx b/apps/web/components/home/DesktopLeftPanelBookmarks.tsx
index 69bfebd0f9..660ad5ce05 100644
--- a/apps/web/components/home/DesktopLeftPanelBookmarks.tsx
+++ b/apps/web/components/home/DesktopLeftPanelBookmarks.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useCallback, type MouseEvent as ReactMouseEvent } from "react";
-import { Bookmark, MapPin, Trash2, X } from "lucide-react";
+import { MapPin, Trash2 } from "lucide-react";
+import { MapPanelHeader } from "@/components/home/map-panel-chrome";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -40,41 +41,15 @@ export default function DesktopLeftPanelBookmarks({
       className="flex h-full min-h-0 flex-col bg-background"
       data-desktop-left-panel-view="bookmarks"
     >
-      <div className="border-b border-border bg-background px-3 py-3 sm:px-4">
-        <div className="flex flex-wrap items-start justify-between gap-2">
-          <div className="min-w-0 flex-1 basis-[min(10rem,100%)]">
-            <h2 className="flex min-w-0 items-center gap-2 text-base font-bold leading-tight text-primary text-balance">
-              <Bookmark className="h-4 w-4 shrink-0" aria-hidden="true" />
-              <span className="min-w-0 truncate">북마크</span>
-            </h2>
-            <p className="mt-1 max-w-full text-pretty text-xs leading-5 text-muted-foreground">
-              저장한 맛집을 지도와 상세로 바로 열어요.
-            </p>
-          </div>
-          <div className="ml-auto flex shrink-0 items-center gap-1.5 sm:gap-2">
-            <Badge
-              variant="secondary"
-              className="rounded-full px-2 py-0.5 text-2xs"
-            >
-              {isLoading ? "확인 중" : `${bookmarks.length}개`}
-            </Badge>
-            {onClose && (
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                onClick={onClose}
-                className="h-9 w-9 rounded-full hover:bg-muted"
-                aria-label="북마크 패널 닫기"
-              >
-                <X className="h-5 w-5" aria-hidden="true" />
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
+      <MapPanelHeader
+        title="북마크"
+        description="저장한 맛집을 지도와 상세로 바로 열어요"
+        count={isLoading ? undefined : bookmarks.length}
+        onClose={onClose}
+        closeLabel="북마크 패널 닫기"
+      />
 
-      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-3 py-3">
+      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 py-3">
         {isLoading ? (
           <div
             role="status"
diff --git a/apps/web/components/home/DesktopLeftPanelMapHome.tsx b/apps/web/components/home/DesktopLeftPanelMapHome.tsx
index 48d8f50600..763bd145de 100644
--- a/apps/web/components/home/DesktopLeftPanelMapHome.tsx
+++ b/apps/web/components/home/DesktopLeftPanelMapHome.tsx
@@ -177,6 +177,13 @@ export default function DesktopLeftPanelMapHome({
     staleTime: 1000 * 60 * 10,
     gcTime: 1000 * 60 * 30,
   });
+  useEffect(() => {
+    if (isLoading || isLatestLoading) return;
+    document.documentElement.dataset.homePanelReady = "true";
+  }, [isLatestLoading, isLoading]);
+  useEffect(() => () => {
+    delete document.documentElement.dataset.homePanelReady;
+  }, []);
   const latestRestaurants = useMemo(
     () =>
       latestRestaurantPages?.pages.flatMap((page) => page.restaurants) ?? [],
@@ -418,7 +425,7 @@ export default function DesktopLeftPanelMapHome({
                     key={restaurant.id}
                     type="button"
                     onClick={() => handleRestaurantOpen(restaurant)}
-                    className="group flex w-full items-center gap-2 px-1 py-2 text-left transition-colors hover:bg-secondary/45 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
+                    className="group flex w-full items-center gap-2 px-1 py-2 text-left hover:bg-secondary/45 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
                     aria-label={`${restaurant.name} 인기 맛집 상세 보기`}
                   >
                     <span
@@ -564,7 +571,7 @@ export default function DesktopLeftPanelMapHome({
                       <button
                         type="button"
                         onClick={showMoreLatestRestaurants}
-                        className="text-xs font-semibold text-primary transition-colors hover:text-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                        className="text-xs font-semibold text-primary hover:text-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
                         aria-label="최근 추가된 맛집 더 보기"
                       >
                         스크롤하면 더 보여드릴게요
diff --git a/apps/web/components/home/DesktopLeftPanelNotifications.tsx b/apps/web/components/home/DesktopLeftPanelNotifications.tsx
index 05e45dcec9..4d661d4536 100644
--- a/apps/web/components/home/DesktopLeftPanelNotifications.tsx
+++ b/apps/web/components/home/DesktopLeftPanelNotifications.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useCallback, type MouseEvent as ReactMouseEvent } from "react";
-import { Bell, CheckCheck, MapPin, Trash2, X } from "lucide-react";
+import { CheckCheck, MapPin, Trash2 } from "lucide-react";
+import { MapPanelHeader, mapPanelIconButtonClass } from "@/components/home/map-panel-chrome";
 import { formatDistanceToNow } from "date-fns";
 import { ko } from "date-fns/locale";
 import { Badge } from "@/components/ui/badge";
@@ -72,54 +73,27 @@ export default function DesktopLeftPanelNotifications({
       className="flex h-full min-h-0 flex-col bg-background"
       data-desktop-left-panel-view="notifications"
     >
-      <div className="border-b border-border bg-background px-3 py-3 sm:px-4">
-        <div className="flex flex-wrap items-start justify-between gap-2">
-          <div className="min-w-0 flex-1 basis-[min(10rem,100%)]">
-            <h2 className="flex min-w-0 items-center gap-2 text-base font-bold leading-tight text-primary text-balance">
-              <Bell className="h-4 w-4 shrink-0" aria-hidden="true" />
-              <span className="min-w-0 truncate">알림</span>
-            </h2>
-            <p className="mt-1 max-w-full text-pretty text-xs leading-5 text-muted-foreground">
-              리뷰·맛집·공지 소식을 바로 확인해요.
-            </p>
-          </div>
-          <div className="ml-auto flex shrink-0 items-center gap-1.5 sm:gap-2">
-            <Badge
-              variant="secondary"
-              className="rounded-full px-2 py-0.5 text-2xs"
-            >
-              {isLoading ? "확인 중" : `${notifications.length}개`}
-            </Badge>
-            {unreadCount > 0 && (
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={markAllAsRead}
-                className="h-7 rounded-full px-2 text-2xs"
-                aria-label="모든 알림 읽음 처리"
-              >
-                <CheckCheck className="mr-1 h-3.5 w-3.5" aria-hidden="true" />
-                모두 읽음
-              </Button>
-            )}
-            {onClose && (
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                onClick={onClose}
-                className="h-9 w-9 rounded-full hover:bg-muted"
-                aria-label="알림 패널 닫기"
-              >
-                <X className="h-5 w-5" aria-hidden="true" />
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
+      <MapPanelHeader
+        title="알림"
+        description="리뷰, 맛집, 공지 소식을 확인해요"
+        count={isLoading ? undefined : notifications.length}
+        onClose={onClose}
+        closeLabel="알림 패널 닫기"
+        actions={unreadCount > 0 ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={markAllAsRead}
+            className={mapPanelIconButtonClass}
+            aria-label="모든 알림 읽음 처리"
+          >
+            <CheckCheck className="h-4 w-4" aria-hidden="true" />
+          </Button>
+        ) : null}
+      />
 
-      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-3 py-3">
+      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 py-3">
         {isLoading ? (
           <div
             role="status"
diff --git a/apps/web/components/home/HomeMapUserMenu.tsx b/apps/web/components/home/HomeMapUserMenu.tsx
index 18bbd95449..aa9f1ead58 100644
--- a/apps/web/components/home/HomeMapUserMenu.tsx
+++ b/apps/web/components/home/HomeMapUserMenu.tsx
@@ -213,7 +213,7 @@ export default function HomeMapUserMenu({
         size="icon"
         data-desktop-map-fullscreen-toggle="true"
         className={cn(
-          "fixed top-4 z-[120] h-11 w-11 rounded-full border border-border bg-background/95 p-0 text-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+          "fixed top-4 z-[120] h-11 w-11 rounded-full border border-border bg-background/95 p-0 text-foreground shadow-sm hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
           shouldOffsetForRightPanel ? "" : "right-20",
         )}
         style={fullscreenButtonStyle}
@@ -237,7 +237,7 @@ export default function HomeMapUserMenu({
               size="icon"
               data-desktop-map-user-menu="true"
               className={cn(
-                "fixed top-4 z-[120] h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-sm backdrop-blur-sm transition-colors hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+                "fixed top-4 z-[120] h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-sm hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
                 shouldOffsetForRightPanel ? "" : "right-6",
               )}
               style={userButtonStyle}
@@ -305,7 +305,7 @@ export default function HomeMapUserMenu({
                 aria-expanded={isBusinessInfoExpanded}
                 aria-controls="desktop-map-business-info-content"
                 onClick={() => setIsBusinessInfoExpanded((prev) => !prev)}
-                className="flex w-max max-w-full items-center justify-between rounded-lg px-1 py-1 text-left whitespace-nowrap transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                className="flex w-max max-w-full items-center justify-between rounded-lg px-1 py-1 text-left whitespace-nowrap hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
               >
                 <span className="text-2xs text-muted-foreground">
                   {siteConfig.operator.copyrightLabel}
@@ -344,7 +344,7 @@ export default function HomeMapUserMenu({
           data-desktop-map-user-menu="true"
           data-auth-session-pending="true"
           className={cn(
-            "fixed top-4 z-[120] h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-sm backdrop-blur-sm transition-colors focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+            "fixed top-4 z-[120] h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-sm focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
             shouldOffsetForRightPanel ? "" : "right-6",
           )}
           style={userButtonStyle}
@@ -360,7 +360,7 @@ export default function HomeMapUserMenu({
           size="icon"
           data-desktop-map-user-menu="true"
           className={cn(
-            "fixed top-4 z-[120] h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-sm backdrop-blur-sm transition-colors hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+            "fixed top-4 z-[120] h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-sm hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
             shouldOffsetForRightPanel ? "" : "right-6",
           )}
           style={userButtonStyle}
diff --git a/apps/web/components/home/MobileControlOverlay.tsx b/apps/web/components/home/MobileControlOverlay.tsx
index ea4ec87b11..9ac2098c7e 100644
--- a/apps/web/components/home/MobileControlOverlay.tsx
+++ b/apps/web/components/home/MobileControlOverlay.tsx
@@ -966,7 +966,7 @@ function MobileControlOverlayComponent({
                             type="button"
                             aria-label="사업자 정보 펼치기/접기"
                             onClick={() => setIsBusinessInfoExpanded((prev) => !prev)}
-                            className="flex w-max max-w-full items-center justify-between whitespace-nowrap hover:bg-accent rounded px-1 py-0.5 transition-colors"
+                            className="flex w-max max-w-full items-center justify-between whitespace-nowrap hover:bg-accent rounded px-1 py-0.5"
                         >
                             <span className="text-2xs text-muted-foreground">{siteConfig.operator.copyrightLabel}</span>
                             {isBusinessInfoExpanded ? (
@@ -1001,7 +1001,7 @@ function MobileControlOverlayComponent({
             >
                 <div
                     className={cn(
-                        'pointer-events-auto flex h-12 w-full min-w-0 items-center gap-2 rounded-full border border-border bg-background/95 px-2 shadow-sm backdrop-blur-sm',
+                        'pointer-events-auto flex h-12 w-full min-w-0 items-center gap-2 rounded-full border border-border bg-background/95 px-2 shadow-sm',
                         activeSheet === 'search' && 'ring-2 ring-primary'
                     )}
                 >
@@ -1056,8 +1056,8 @@ function MobileControlOverlayComponent({
                                 aria-label={`${theme.ariaLabel}${isSelected ? ' 선택됨' : ''}`}
                                 title={`${theme.label}: ${theme.description}`}
                                 className={cn(
-                                    'pointer-events-auto inline-flex h-9 snap-start shrink-0 items-center gap-1 rounded-full shadow-sm border border-border bg-background/95 backdrop-blur-sm',
-                                    'whitespace-nowrap px-2.5 home-map-floating-control-text text-xs font-semibold transition-colors motion-reduce:transition-none hover:bg-secondary/80',
+                                    'pointer-events-auto inline-flex h-9 snap-start shrink-0 items-center gap-1 rounded-full shadow-sm border border-border bg-background/95',
+                                    'whitespace-nowrap px-2.5 home-map-floating-control-text text-xs font-semibold motion-reduce:transition-none hover:bg-secondary/80',
                                     'focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
                                     isSelected
                                         ? 'bg-primary text-primary-foreground border-primary hover:bg-primary/90'
@@ -1083,14 +1083,14 @@ function MobileControlOverlayComponent({
                 >
                 {/* 국내/해외 토글 버튼 - 모든 사용자에게 표시 */}
                 {onModeChange && (
-                    <div className="flex items-center gap-0.5 p-0.5 bg-background/95 backdrop-blur-sm rounded-full shadow-sm border border-border w-[clamp(118px,34vw,148px)]">
+                    <div className="flex items-center gap-0.5 p-0.5 bg-background/95 rounded-full shadow-sm border border-border w-[clamp(118px,34vw,148px)]">
                         <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => onModeChange('domestic')}
                             aria-pressed={mapMode === 'domestic'}
                             aria-label="국내 맛집 지도 보기"
-                            className={`rounded-full h-9 px-2 home-map-floating-control-text text-xs font-medium whitespace-nowrap transition-colors motion-reduce:transition-none flex-1 ${mapMode === 'domestic'
+                            className={`rounded-full h-9 px-2 home-map-floating-control-text text-xs font-medium whitespace-nowrap motion-reduce:transition-none flex-1 ${mapMode === 'domestic'
                                 ? 'bg-primary text-primary-foreground shadow-sm'
                                 : 'text-muted-foreground hover:text-foreground hover:bg-transparent'
                                 }`}
@@ -1103,7 +1103,7 @@ function MobileControlOverlayComponent({
                             onClick={() => onModeChange('overseas')}
                             aria-pressed={mapMode === 'overseas'}
                             aria-label="해외 맛집 지도 보기"
-                            className={`rounded-full h-9 px-2 home-map-floating-control-text text-xs font-medium whitespace-nowrap transition-colors motion-reduce:transition-none flex-1 ${mapMode === 'overseas'
+                            className={`rounded-full h-9 px-2 home-map-floating-control-text text-xs font-medium whitespace-nowrap motion-reduce:transition-none flex-1 ${mapMode === 'overseas'
                                 ? 'bg-primary text-primary-foreground shadow-sm'
                                 : 'text-muted-foreground hover:text-foreground hover:bg-transparent'
                                 }`}
@@ -1121,7 +1121,7 @@ function MobileControlOverlayComponent({
                     aria-expanded={false}
                     aria-label={`${mapMode === 'domestic' ? '지역' : '국가'} 선택 열기: ${regionLabel}`}
                     data-mobile-map-sheet-trigger="region"
-                    className="rounded-full shadow-sm bg-background/95 backdrop-blur-sm border border-border hover:bg-secondary/80 w-[clamp(118px,34vw,148px)] h-9 px-2 home-map-floating-control-text"
+                    className="rounded-full shadow-sm bg-background/95 border border-border hover:bg-secondary/80 w-[clamp(118px,34vw,148px)] h-9 px-2 home-map-floating-control-text"
                 >
                     <div className="flex items-center w-full gap-1">
                         <div className="flex items-center justify-center w-4 shrink-0">
@@ -1139,7 +1139,7 @@ function MobileControlOverlayComponent({
                     aria-expanded={false}
                     aria-label={`카테고리 필터 열기${selectedCategories.length > 0 ? `: ${selectedCategories.length}개 선택됨` : ''}`}
                     data-mobile-map-sheet-trigger="category"
-                    className="rounded-full shadow-sm bg-background/95 backdrop-blur-sm border border-border hover:bg-secondary/80 w-[clamp(118px,34vw,148px)] h-9 px-2 home-map-floating-control-text"
+                    className="rounded-full shadow-sm bg-background/95 border border-border hover:bg-secondary/80 w-[clamp(118px,34vw,148px)] h-9 px-2 home-map-floating-control-text"
                 >
                     <div className="flex items-center w-full gap-1">
                         <div className="flex items-center justify-center w-4 shrink-0">
@@ -1175,8 +1175,7 @@ function MobileControlOverlayComponent({
                         data-mobile-visible-marker-restaurants-restore="true"
                         className={cn(
                             'h-12 w-12 rounded-full shadow-sm',
-                            'bg-background/95 hover:bg-secondary text-foreground border-border/70 backdrop-blur-sm',
-                            'transition-colors duration-150 ease-out motion-reduce:transition-none',
+                            'bg-background/95 hover:bg-secondary text-foreground border-border/70',
                             'flex items-center justify-center',
                             'border'
                         )}
@@ -1196,12 +1195,11 @@ function MobileControlOverlayComponent({
                         aria-pressed={showUserSubmittedMarkers}
                         className={cn(
                             'h-12 w-12 rounded-full shadow-sm',
-                            'transition-colors duration-150 ease-out motion-reduce:transition-none',
                             'flex items-center justify-center',
                             'border',
                             showUserSubmittedMarkers
                                 ? 'bg-blue-600 hover:bg-blue-700 text-white border-transparent'
-                                : 'bg-background/95 hover:bg-secondary text-foreground border-border/70 backdrop-blur-sm'
+                                : 'bg-background/95 hover:bg-secondary text-foreground border-border/70'
                         )}
                         title={showUserSubmittedMarkers ? '사용자 제보 맛집 마커 숨기기' : '사용자 제보 맛집 마커 보이기'}
                         aria-label={showUserSubmittedMarkers ? '사용자 제보 맛집 마커 숨기기' : '사용자 제보 맛집 마커 보이기'}
@@ -1224,7 +1222,6 @@ function MobileControlOverlayComponent({
                             className={cn(
                                 'h-12 w-12 rounded-full shadow-sm',
                                 'bg-red-800 hover:bg-red-900 text-white',
-                                'transition-[background-color,color,border-color,box-shadow,transform] duration-300 ease-in-out motion-reduce:transition-none',
                                 'active:scale-95',
                                 'flex items-center justify-center',
                                 'border border-border/20'
@@ -1252,14 +1249,13 @@ function MobileControlOverlayComponent({
                             aria-label={deviceLocationButtonLabel}
                             className={cn(
                                 'h-12 w-12 rounded-full shadow-sm',
-                                'transition-colors duration-150 ease-out motion-reduce:transition-none',
                                 'flex items-center justify-center',
                                 'border',
                                 isDeviceHeadingMode
                                     ? 'bg-blue-600 hover:bg-blue-700 text-white border-white/70 ring-2 ring-blue-200/70'
                                     : deviceLocation
                                         ? 'bg-blue-50 hover:bg-blue-100 text-blue-700 border-blue-200'
-                                        : 'bg-background/95 hover:bg-secondary text-foreground border-border/70 backdrop-blur-sm',
+                                        : 'bg-background/95 hover:bg-secondary text-foreground border-border/70',
                                 isDeviceLocationPending && 'opacity-80'
                             )}
                             title={deviceLocationButtonLabel}
@@ -1279,7 +1275,7 @@ function MobileControlOverlayComponent({
             {activeSheet === 'search' && (
                 <div
                     ref={searchLayerRef}
-                    className="fixed inset-0 z-[75] bg-background/95 backdrop-blur-sm pointer-events-auto animate-in fade-in-0 duration-200 motion-reduce:animate-none"
+                    className="fixed inset-0 z-[75] bg-background/95 pointer-events-auto"
                     role="dialog"
                     aria-modal="true"
                     aria-labelledby="mobile-map-search-title"
@@ -1287,7 +1283,7 @@ function MobileControlOverlayComponent({
                     tabIndex={-1}
                 >
                     <div
-                        className="flex min-h-0 min-w-0 flex-col overflow-hidden animate-in slide-in-from-top-3 duration-300 motion-reduce:animate-none"
+                        className="flex min-h-0 min-w-0 flex-col overflow-hidden"
                         style={{
                             height: searchViewportHeight ? `${searchViewportHeight}px` : '100dvh',
                             paddingTop: 'calc(env(safe-area-inset-top) + 10px)',
@@ -1296,7 +1292,7 @@ function MobileControlOverlayComponent({
                     >
                         <div className="px-3 pb-3">
                             <h2 id="mobile-map-search-title" className="sr-only">쯔동여지도 검색</h2>
-                            <div className="flex min-w-0 items-center gap-1.5 min-h-11 rounded-full shadow-sm bg-background/95 backdrop-blur-sm border border-border px-1.5">
+                            <div className="flex min-w-0 items-center gap-1.5 min-h-11 rounded-full shadow-sm bg-background/95 border border-border px-1.5">
                                 <div className="min-w-0 flex-1 h-9 rounded-full flex items-center gap-2 px-2 bg-secondary/40">
                                     <Image
                                         src="/logo.webp"
@@ -1506,7 +1502,7 @@ function MobileControlOverlayComponent({
                                 data-mobile-visible-marker-restaurants-sheet="true"
                                 data-mobile-visible-marker-restaurants-sheet-frame="true"
                             >
-                                <div className="sticky top-0 z-10 -mx-1 -mt-1 bg-background/95 px-1 py-1 backdrop-blur supports-[backdrop-filter]:bg-background/85">
+                                <div className="sticky top-0 z-10 -mx-1 -mt-1 bg-background/95 px-1 py-1">
                                     <div className="flex min-w-0 items-center justify-between gap-2">
                                         <h2 className="flex min-w-0 items-center gap-1.5 text-sm font-bold leading-5 text-foreground">
                                             <MapPin className="h-3.5 w-3.5 shrink-0 text-primary" aria-hidden="true" />
diff --git a/apps/web/components/home/SubmissionFloatingButton.tsx b/apps/web/components/home/SubmissionFloatingButton.tsx
index 8173bb1eb1..604f73b96e 100644
--- a/apps/web/components/home/SubmissionFloatingButton.tsx
+++ b/apps/web/components/home/SubmissionFloatingButton.tsx
@@ -89,7 +89,6 @@ const SubmissionFloatingButton = memo(function SubmissionFloatingButton({
                     className={cn(
                         isMobileOrTablet ? "h-12 w-12" : "h-14 w-14",
                         "rounded-full shadow-sm",
-                        "transition-colors duration-150 ease-out motion-reduce:transition-none",
                         "flex items-center justify-center",
                         "border",
                         showUserSubmittedMarkers
@@ -115,7 +114,6 @@ const SubmissionFloatingButton = memo(function SubmissionFloatingButton({
                     isMobileOrTablet ? "h-12 w-12" : "h-14 w-14",
                     "rounded-full shadow-sm",
                     "bg-red-800 hover:bg-red-900 text-white",
-                    "transition-[background-color,color,border-color,box-shadow,transform] duration-300 ease-in-out motion-reduce:transition-none",
                     "active:scale-95",
                     "flex items-center justify-center",
                     "border border-border/20"
@@ -134,7 +132,6 @@ const SubmissionFloatingButton = memo(function SubmissionFloatingButton({
                     className={cn(
                         isMobileOrTablet ? "h-12 w-12" : "h-14 w-14",
                         "rounded-full shadow-sm",
-                        "transition-colors duration-150 ease-out motion-reduce:transition-none",
                         "flex items-center justify-center",
                         "border",
                         isDeviceHeadingMode
diff --git a/apps/web/components/home/home-desktop-control-panel.tsx b/apps/web/components/home/home-desktop-control-panel.tsx
index 4db4cc2a38..9535dd10f8 100644
--- a/apps/web/components/home/home-desktop-control-panel.tsx
+++ b/apps/web/components/home/home-desktop-control-panel.tsx
@@ -10,6 +10,7 @@ import {
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
 } from "react";
+import dynamic from "next/dynamic";
 import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 import { flushSync } from "react-dom";
@@ -21,12 +22,30 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+const loadDropdownMenu = () => import("@/components/ui/dropdown-menu");
+const DropdownMenu = dynamic(() => loadDropdownMenu().then((mod) => mod.DropdownMenu), {
+  loading: () => (
+    <Button
+      variant="ghost"
+      size="icon"
+      type="button"
+      aria-label="지도 메뉴 열기"
+      className="h-9 w-9 shrink-0 rounded-full border border-border bg-background hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary touch-manipulation"
+      data-desktop-map-menu-trigger="true"
+    >
+      <Menu className="h-5 w-5" aria-hidden="true" />
+    </Button>
+  ),
+});
+const DropdownMenuContent = dynamic(() =>
+  loadDropdownMenu().then((mod) => mod.DropdownMenuContent),
+);
+const DropdownMenuItem = dynamic(() =>
+  loadDropdownMenu().then((mod) => mod.DropdownMenuItem),
+);
+const DropdownMenuTrigger = dynamic(() =>
+  loadDropdownMenu().then((mod) => mod.DropdownMenuTrigger),
+);
 import RegionSelector from "@/components/region/RegionSelector";
 import DesktopLeftPanelMapHome from "@/components/home/DesktopLeftPanelMapHome";
 import CategoryFilter from "@/components/filters/CategoryFilter";
@@ -43,7 +62,13 @@ import HydratedDetailRestaurant from "@/components/home/HydratedDetailRestaurant
 // Import through the deferred-panel barrel: it carries the
 // app/home-detail-globals.css Tailwind entry, without which restaurant/review
 // utilities (top-2, bg-black/70, ring-1, ...) never reach the home route CSS.
-import { RestaurantDetailPanel } from "@/components/map/map-view-deferred-panels";
+const RestaurantDetailPanel = dynamic(
+  () =>
+    import("@/components/map/map-view-deferred-panels").then(
+      (mod) => mod.RestaurantDetailPanel,
+    ),
+  { loading: () => null },
+);
 import { cn } from "@/lib/utils";
 import { requestAuthUi } from "@/lib/auth-ui-events";
 import { toast } from "@/lib/no-toast";
@@ -521,7 +546,7 @@ function DesktopMapSettingsPanel({
                     aria-pressed={isSelected}
                     onClick={() => applyPreset(preset)}
                     className={cn(
-                      "rounded-2xl border p-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 motion-reduce:transition-none",
+                      "rounded-2xl border p-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 motion-reduce:transition-none",
                       isSelected
                         ? "border-primary/40 bg-primary/5 text-foreground"
                         : "border-border bg-background hover:border-primary/25 hover:bg-secondary/50",
@@ -745,7 +770,9 @@ function buildOptimisticDetailRestaurant(
     youtube_meta: restaurant.youtube_meta ?? null,
     evaluation_results: restaurant.evaluation_results ?? null,
     reasoning_basis: restaurant.reasoning_basis ?? null,
-    tzuyang_review: restaurant.tzuyang_review ?? null,
+    ...("tzuyang_review" in restaurant
+      ? { tzuyang_review: restaurant.tzuyang_review ?? null }
+      : {}),
     trace_id: restaurant.trace_id ?? null,
     origin_address: restaurant.origin_address ?? null,
     road_address: restaurant.road_address ?? null,
@@ -1522,7 +1549,7 @@ export default function HomeDesktopControlPanel({
                     aria-label={`${theme.ariaLabel}${isSelected ? " 선택됨" : ""}`}
                     title={`${theme.label}: ${theme.description}`}
                     className={cn(
-                      "inline-flex h-9 shrink-0 items-center gap-1.5 rounded-full border px-3 home-map-floating-control-text text-xs font-semibold shadow-sm backdrop-blur-sm transition-colors motion-reduce:transition-none",
+                      "inline-flex h-9 shrink-0 items-center gap-1.5 rounded-full border px-3 home-map-floating-control-text text-xs font-semibold shadow-sm motion-reduce:transition-none",
                       "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
                       isSelected
                         ? "border-primary bg-primary text-primary-foreground"
@@ -1546,7 +1573,7 @@ export default function HomeDesktopControlPanel({
           >
             {onModeChange && (
               <div
-                className="flex w-[var(--desktop-map-floating-filter-width)] items-center gap-0.5 rounded-full border border-border bg-background/95 p-0.5 shadow-sm backdrop-blur-sm"
+                className="flex w-[var(--desktop-map-floating-filter-width)] items-center gap-0.5 rounded-full border border-border bg-background/95 p-0.5 shadow-sm"
                 data-desktop-map-mode-toggle="true"
               >
                 <Button
@@ -1556,7 +1583,7 @@ export default function HomeDesktopControlPanel({
                   aria-pressed={mapMode === "domestic"}
                   aria-label="국내 맛집 지도 보기"
                   className={cn(
-                    "h-9 flex-1 rounded-full px-2 home-map-floating-control-text text-xs font-medium whitespace-nowrap transition-colors motion-reduce:transition-none",
+                    "h-9 flex-1 rounded-full px-2 home-map-floating-control-text text-xs font-medium whitespace-nowrap motion-reduce:transition-none",
                     mapMode === "domestic"
                       ? "bg-primary text-primary-foreground shadow-sm"
                       : "text-muted-foreground hover:bg-transparent hover:text-foreground",
@@ -1571,7 +1598,7 @@ export default function HomeDesktopControlPanel({
                   aria-pressed={mapMode === "overseas"}
                   aria-label="해외 맛집 지도 보기"
                   className={cn(
-                    "h-9 flex-1 rounded-full px-2 home-map-floating-control-text text-xs font-medium whitespace-nowrap transition-colors motion-reduce:transition-none",
+                    "h-9 flex-1 rounded-full px-2 home-map-floating-control-text text-xs font-medium whitespace-nowrap motion-reduce:transition-none",
                     mapMode === "overseas"
                       ? "bg-primary text-primary-foreground shadow-sm"
                       : "text-muted-foreground hover:bg-transparent hover:text-foreground",
@@ -1586,7 +1613,7 @@ export default function HomeDesktopControlPanel({
                 selectedRegion={selectedRegion}
                 onRegionChange={onRegionChange}
                 onRegionSelect={onSearchExecute}
-                className="!h-9 !w-full !min-w-max rounded-full border-border bg-background/95 px-3 home-map-floating-control-text text-xs font-medium whitespace-nowrap shadow-sm backdrop-blur-sm hover:bg-secondary/80"
+                className="!h-9 !w-full !min-w-max rounded-full border-border bg-background/95 px-3 home-map-floating-control-text text-xs font-medium whitespace-nowrap shadow-sm hover:bg-secondary/80"
                 contentSide="top"
                 contentAlign="start"
               />
@@ -1595,7 +1622,7 @@ export default function HomeDesktopControlPanel({
                 value={selectedCountry || undefined}
                 onValueChange={onCountryChange}
               >
-                <SelectTrigger className="h-9 w-full min-w-max rounded-full border-border bg-background/95 px-3 home-map-floating-control-text text-xs font-medium whitespace-nowrap shadow-sm backdrop-blur-sm hover:bg-secondary/80">
+                <SelectTrigger className="h-9 w-full min-w-max rounded-full border-border bg-background/95 px-3 home-map-floating-control-text text-xs font-medium whitespace-nowrap shadow-sm hover:bg-secondary/80">
                   <SelectValue placeholder="해외 지역" />
                 </SelectTrigger>
                 <SelectContent
@@ -1617,7 +1644,7 @@ export default function HomeDesktopControlPanel({
               onCategoryChange={onCategoryChange}
               selectedRegion={mapMode === "domestic" ? selectedRegion : null}
               selectedCountry={mapMode === "overseas" ? selectedCountry : null}
-              className="h-9 w-full min-w-max rounded-full border-border bg-background/95 px-3 home-map-floating-control-text text-xs font-medium whitespace-nowrap shadow-sm backdrop-blur-sm hover:bg-secondary/80"
+              className="h-9 w-full min-w-max rounded-full border-border bg-background/95 px-3 home-map-floating-control-text text-xs font-medium whitespace-nowrap shadow-sm hover:bg-secondary/80"
               contentSide="top"
               contentAlign="start"
             />
@@ -1631,7 +1658,6 @@ export default function HomeDesktopControlPanel({
         className={cn(
           "desktop-left-panel-scrollbarless absolute inset-y-0 z-[90] flex w-[min(392px,calc(100vw-32px))] flex-col border-border bg-background shadow-sm",
           desktopPanelSide === "right" ? "right-0 border-l" : "left-0 border-r",
-          "transition-transform duration-300 ease-out motion-reduce:transition-none",
           isPanelCollapsed
             ? desktopPanelSide === "right"
               ? "translate-x-full"
@@ -1652,7 +1678,7 @@ export default function HomeDesktopControlPanel({
             type="button"
             onClick={onTogglePanelCollapse}
             className={cn(
-              "group absolute top-1/2 z-50 flex h-12 w-6 -translate-y-1/2 items-center justify-center border border-border bg-background shadow-md transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+              "group absolute top-1/2 z-50 flex h-12 w-6 -translate-y-1/2 items-center justify-center border border-border bg-background shadow-md hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
               desktopPanelSide === "right"
                 ? "left-0 -translate-x-full rounded-l-lg border-r-0"
                 : "right-0 translate-x-full rounded-r-lg border-l-0",
@@ -1698,7 +1724,7 @@ export default function HomeDesktopControlPanel({
           >
             <div
               className={cn(
-                "pointer-events-auto flex items-center gap-1.5 min-h-11 rounded-full shadow-sm bg-background/95 backdrop-blur-sm border border-border px-1.5",
+                "pointer-events-auto flex items-center gap-1.5 min-h-11 rounded-full shadow-sm bg-background/95 border border-border px-1.5",
               )}
               data-desktop-left-panel-search-bar="true"
               onClick={activateDesktopSearch}
diff --git a/apps/web/components/home/home-map-container.tsx b/apps/web/components/home/home-map-container.tsx
index 6d6df23b87..53a7c896c0 100644
--- a/apps/web/components/home/home-map-container.tsx
+++ b/apps/web/components/home/home-map-container.tsx
@@ -112,23 +112,18 @@ const QUICK_GESTURE_DURATION_MS = 85;
 const DESKTOP_LEFT_PANEL_WIDTH_PX = 392;
 const DESKTOP_LEFT_PANEL_WIDTH_CSS = `min(${DESKTOP_LEFT_PANEL_WIDTH_PX}px, calc(100vw - 32px))`;
 const QUICK_GESTURE_EXTRA_DISTANCE_PX = 2;
-const QUICK_GESTURE_SHORT_DISTANCE_PX = 25;
-const LONG_PRESS_TRANSITION_THRESHOLD_MS = 175;
 const DRAG_RENDER_EPSILON_PERCENT = 0.08;
-const SNAP_TRANSITION_BASE_MS = 235;
-const SNAP_TRANSITION_FAST_MS = 175;
-const SNAP_TRANSITION_SMOOTH_MS = 295;
-const SNAP_EASING_BASE = 'cubic-bezier(0.22, 1, 0.36, 1)';
-const SNAP_EASING_FAST = 'cubic-bezier(0.16, 1, 0.3, 1)';
-const SNAP_EASING_SMOOTH = 'cubic-bezier(0.34, 1.56, 0.64, 1)';
 const SHEET_HEIGHT_CSS_VAR = '--home-sheet-height-px';
-type SheetSnapTransition = {
-    duration: number;
-    easing: string;
-};
 
-const buildSwipeableRestaurantsSignature = (restaurants: Restaurant[]) =>
-    restaurants.map((restaurant) => restaurant.id).join('|');
+const swipeableRestaurantsSignatureCache = new WeakMap<Restaurant[], string>();
+
+const buildSwipeableRestaurantsSignature = (restaurants: Restaurant[]) => {
+    const cached = swipeableRestaurantsSignatureCache.get(restaurants);
+    if (cached !== undefined) return cached;
+    const signature = restaurants.map((restaurant) => restaurant.id).join('|');
+    swipeableRestaurantsSignatureCache.set(restaurants, signature);
+    return signature;
+};
 
 const buildContextualRestaurantsSignature = (payload: HomeMapContextualRestaurantsPayload | null) => {
     if (!payload) return 'null';
@@ -140,7 +135,7 @@ const buildContextualRestaurantsSignature = (payload: HomeMapContextualRestauran
         payload.isEligible ? 'eligible' : 'ineligible',
         payload.ineligibilityReason ?? 'none',
         payload.totalVisibleCount,
-        payload.restaurants.map((restaurant) => restaurant.id).join('|'),
+        payload.restaurants.length > 0 ? buildSwipeableRestaurantsSignature(payload.restaurants) : '',
     ].join('::');
 };
 
@@ -239,10 +234,6 @@ function HomeMapContainerComponent({
     ));
     const [sheetHeight, setSheetHeight] = useState(INITIAL_HEIGHT);
     const [isDragging, setIsDragging] = useState(false);
-    const [sheetSnapTransition, setSheetSnapTransition] = useState<SheetSnapTransition>({
-        duration: SNAP_TRANSITION_BASE_MS,
-        easing: SNAP_EASING_BASE,
-    });
     const [swipeableRestaurantsByMode, setSwipeableRestaurantsByMode] = useState<{
         domestic: Restaurant[];
         overseas: Restaurant[];
@@ -330,29 +321,6 @@ function HomeMapContainerComponent({
         sheetContainer.style.setProperty(SHEET_HEIGHT_CSS_VAR, `${nextHeightPx}px`);
     }, [percentToPx]);
 
-    const applySnapTransition = useCallback((isFlick: boolean, distancePx: number, isLongPress: boolean) => {
-        if (isFlick) {
-            setSheetSnapTransition({
-                duration: SNAP_TRANSITION_FAST_MS,
-                easing: SNAP_EASING_FAST,
-            });
-            return;
-        }
-
-        if (isLongPress || distancePx >= 80) {
-            setSheetSnapTransition({
-                duration: SNAP_TRANSITION_SMOOTH_MS,
-                easing: SNAP_EASING_SMOOTH,
-            });
-            return;
-        }
-
-        setSheetSnapTransition({
-            duration: SNAP_TRANSITION_BASE_MS,
-            easing: SNAP_EASING_BASE,
-        });
-    }, []);
-
     const getDetailScrollArea = useCallback(() => {
         const cachedScrollArea = detailScrollAreaRef.current;
         if (cachedScrollArea && contentRef.current?.contains(cachedScrollArea)) {
@@ -586,10 +554,6 @@ function HomeMapContainerComponent({
         dragEndYRef.current = clientY;
         dragEndTimeRef.current = performance.now();
         velocityRef.current = 0;
-        setSheetSnapTransition({
-            duration: SNAP_TRANSITION_BASE_MS,
-            easing: SNAP_EASING_BASE,
-        });
 
         if (sheetContainerRef.current) {
             sheetContainerRef.current.style.transitionDuration = '0ms';
@@ -634,8 +598,6 @@ function HomeMapContainerComponent({
         const startedAtHalf = !startedAtPeek && startHeightRef.current <= HALF_SHEET_HEIGHT + 0.5;
         const startedAtFull = startHeightRef.current >= currentMaxHeight - 0.5;
         const isQuickGesture = elapsedMs <= QUICK_GESTURE_DURATION_MS;
-        const movementPx = Math.abs(movementPxFromStart);
-        const isLongPress = !isQuickGesture && elapsedMs >= LONG_PRESS_TRANSITION_THRESHOLD_MS;
         const peekToHalfDistancePercent = pxToPercent(
             HALF_TO_FULL_DISTANCE_PX + (isQuickGesture ? QUICK_GESTURE_EXTRA_DISTANCE_PX : 0)
         );
@@ -648,15 +610,6 @@ function HomeMapContainerComponent({
         const halfToPeekDistancePercent = pxToPercent(
             HALF_TO_PEEK_DISTANCE_PX + (isQuickGesture ? QUICK_GESTURE_EXTRA_DISTANCE_PX : 0)
         );
-        const shouldUseFastTransition = isSwipeUpStrong || isSwipeDownStrong;
-        const isQuickAndSmall = isQuickGesture && movementPx <= QUICK_GESTURE_SHORT_DISTANCE_PX;
-        const shouldUseSmoothTransition = isLongPress || (!isQuickAndSmall && movementPx > QUICK_GESTURE_SHORT_DISTANCE_PX) || dragDistancePx > HALF_TO_PEEK_DISTANCE_PX;
-
-        applySnapTransition(
-            shouldUseFastTransition,
-            movementPx,
-            shouldUseSmoothTransition
-        );
         velocityRef.current = 0;
 
         const fullToHalfDistancePx =
@@ -724,7 +677,6 @@ function HomeMapContainerComponent({
 
         setSheetHeightSafe(getNearestSnapHeight(currentHeight), true);
     }, [
-        applySnapTransition,
         getCurrentMaxHeight,
         getNearestSnapHeight,
         onPanelClose,
@@ -1422,7 +1374,7 @@ function HomeMapContainerComponent({
 
     return (
         <div
-            className="relative h-full min-h-0 min-w-0 w-full overflow-hidden transition-[margin,width] duration-300 ease-out motion-reduce:transition-none"
+            className="relative h-full min-h-0 min-w-0 w-full overflow-hidden"
             data-home-map-reserved-left-panel={shouldReserveDesktopLeftPanel ? "true" : "false"}
             data-home-map-reserved-right-panel={shouldReserveDesktopRightPanel ? "true" : "false"}
             data-home-map-panel-side={desktopPanelSide}
@@ -1498,7 +1450,6 @@ function HomeMapContainerComponent({
                                 className={cn(
                                     "fixed right-0 w-[min(400px,calc(100vw-1rem))] z-[95]",
                                     "bg-background border-l border-border shadow-sm",
-                                    "transform transition-transform duration-300 ease-out",
                                     isPanelOpen ? "translate-x-0" : "translate-x-full"
                                 )}
                                 style={{
@@ -1512,7 +1463,7 @@ function HomeMapContainerComponent({
                                 {/* 접기 버튼 */}
                                 <button
                                     onClick={onPanelClose}
-                                    className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-full z-50 flex h-12 w-11 items-center justify-center bg-background border border-r-0 border-border rounded-l-md shadow-md hover:bg-muted transition-colors cursor-pointer group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                                    className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-full z-50 flex h-12 w-11 items-center justify-center bg-background border border-r-0 border-border rounded-l-md shadow-md hover:bg-muted motion-reduce:transition-none cursor-pointer group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
                                     title="상세 패널 닫기"
                                     aria-label="상세 패널 닫기"
                                 >
@@ -1547,7 +1498,6 @@ function HomeMapContainerComponent({
                                     'bg-background shadow-sm',
                                     isSheetAtFullHeight ? 'rounded-none' : 'rounded-t-2xl',
                                     'min-h-0 min-w-0 overflow-hidden flex flex-col',
-                                    isDragging ? '' : 'transition-[height,border-radius]',
                                     'pb-[env(safe-area-inset-bottom)]'
                                 )}
                                 data-sheet-state={isSheetAtFullHeight ? 'full' : 'partial'}
@@ -1557,9 +1507,6 @@ function HomeMapContainerComponent({
                                     [`${SHEET_HEIGHT_CSS_VAR}`]: `${viewportHeight * sheetHeight / 100}px`,
                                     height: `var(${SHEET_HEIGHT_CSS_VAR})`,
                                     maxHeight: '100%',
-                                    willChange: isDragging ? 'height' : undefined,
-                                    transitionDuration: isDragging ? '0ms' : `${sheetSnapTransition.duration}ms`,
-                                    transitionTimingFunction: isDragging ? undefined : sheetSnapTransition.easing,
                                 } as unknown as Record<string, string | number | undefined>}
                             >
                                 {!isSheetAtFullHeight && (
diff --git a/apps/web/components/home/map-panel-chrome.tsx b/apps/web/components/home/map-panel-chrome.tsx
new file mode 100644
index 0000000000..4fdbb8f090
--- /dev/null
+++ b/apps/web/components/home/map-panel-chrome.tsx
@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export const mapPanelIconButtonClass =
+  "h-8 w-8 shrink-0 rounded-full border border-border bg-background shadow-none hover:bg-secondary";
+
+export function MapPanelHeader({
+  title,
+  count,
+  description,
+  actions,
+  onClose,
+  closeLabel,
+  titleAs: TitleTag = "h2",
+}: {
+  title: string;
+  count?: number;
+  description?: string;
+  actions?: ReactNode;
+  onClose?: () => void;
+  closeLabel: string;
+  titleAs?: "h1" | "h2";
+}) {
+  return (
+    <header className="shrink-0 border-b border-border bg-background px-4 py-3" data-layout-primitives="stack">
+      <div className="flex items-center gap-2">
+        <div className="min-w-0 flex-1">
+          <TitleTag className="truncate text-base font-semibold leading-6 tracking-tight text-foreground">
+            {title}
+            {typeof count === "number" ? (
+              <span className="ml-1.5 text-xs font-normal tabular-nums text-muted-foreground">
+                {count.toLocaleString()}
+              </span>
+            ) : null}
+          </TitleTag>
+          {description ? (
+            <p className="mt-0.5 truncate text-xs leading-5 text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          {actions}
+          {onClose ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={onClose}
+              className={mapPanelIconButtonClass}
+              aria-label={closeLabel}
+            >
+              <X className="h-4 w-4" aria-hidden="true" />
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/apps/web/components/layout/CombinedPopup.tsx b/apps/web/components/layout/CombinedPopup.tsx
index 2dc6fff215..98d567586a 100644
--- a/apps/web/components/layout/CombinedPopup.tsx
+++ b/apps/web/components/layout/CombinedPopup.tsx
@@ -64,7 +64,7 @@ const SlideIndicator = memo(({
                     <span
                         aria-hidden="true"
                         className={cn(
-                            "h-1.5 w-1.5 rounded-full transition-all",
+                            "h-1.5 w-1.5 rounded-full",
                             current === index
                                 ? "bg-white scale-110 shadow-md"
                                 : "bg-white/50"
@@ -162,7 +162,6 @@ const CombinedPopupComponent = () => {
     const [isVisible, setIsVisible] = useState(false);
     const [currentSlide, setCurrentSlide] = useState(0);
     const [trackSlide, setTrackSlide] = useState(0);
-    const [isLoopResetting, setIsLoopResetting] = useState(false);
     const [isAutoPlaying, setIsAutoPlaying] = useState(true);
     const [isDragging, setIsDragging] = useState(false);
     const [canLoadBanners, setCanLoadBanners] = useState(false);
@@ -235,7 +234,6 @@ const CombinedPopupComponent = () => {
         trackSlideRef.current = initialTrackIndex;
         setCurrentSlide(0);
         setTrackSlide(initialTrackIndex);
-        setIsLoopResetting(false);
     }, [posterBanners.length, posterBannerSignature]);
 
     useEffect(() => {
@@ -244,7 +242,11 @@ const CombinedPopupComponent = () => {
 
     useEffect(() => {
         trackSlideRef.current = trackSlide;
-    }, [trackSlide]);
+        const resetIndex = getPopupBannerLoopResetIndex(trackSlide, posterBanners.length);
+        if (resetIndex === null) return;
+        trackSlideRef.current = resetIndex;
+        setTrackSlide(resetIndex);
+    }, [posterBanners.length, trackSlide]);
 
     useEffect(() => {
         return () => {
@@ -328,20 +330,6 @@ const CombinedPopupComponent = () => {
         moveByDirection(-1, options);
     }, [moveByDirection]);
 
-    const handleTrackTransitionEnd = useCallback(() => {
-        const resetIndex = getPopupBannerLoopResetIndex(trackSlide, posterBanners.length);
-        if (resetIndex === null) return;
-
-        setIsLoopResetting(true);
-        trackSlideRef.current = resetIndex;
-        setTrackSlide(resetIndex);
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                setIsLoopResetting(false);
-            });
-        });
-    }, [posterBanners.length, trackSlide]);
-
     // 배너 클릭
     const handleBannerClick = useCallback((destination: string | null) => {
         if (!destination) return;
@@ -440,12 +428,11 @@ const CombinedPopupComponent = () => {
     return (
         <div
             data-popup-overlay="true"
-            className="fixed inset-0 z-[200] flex items-center justify-center bg-black/50 animate-in fade-in duration-300"
+            className="fixed inset-0 z-[200] flex items-center justify-center bg-black/50"
         >
             <div
                 className={cn(
-                    "relative w-[min(320px,calc(100vw-2rem))] mx-auto rounded-lg overflow-hidden shadow-sm",
-                    "animate-in zoom-in-95 slide-in-from-bottom-4 duration-300"
+                    "relative w-[min(320px,calc(100vw-2rem))] mx-auto rounded-lg overflow-hidden shadow-sm"
                 )}
                 style={{ backgroundColor: 'hsl(var(--background))' }}
             >
@@ -467,12 +454,10 @@ const CombinedPopupComponent = () => {
                     <div
                         className={cn(
                             "flex w-full h-full",
-                            isLoopResetting ? "transition-none" : "transition-transform duration-500 ease-out",
                             isDragging ? "cursor-grabbing" : currentBannerDestination ? "cursor-pointer" : "cursor-default"
                         )}
                         style={{ transform: `translateX(-${trackSlide * 100}%)` }}
                         ref={slideContainerRef}
-                        onTransitionEnd={handleTrackTransitionEnd}
                     >
                         {carouselSlides.map(({ banner, key }, index) => (
                             <BannerSlide
@@ -497,7 +482,7 @@ const CombinedPopupComponent = () => {
                                 type="button"
                                 aria-label="이전 배너 보기"
                                 onClick={(e) => { e.stopPropagation(); prevSlide({ userInitiated: true }); }}
-                                className="absolute left-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full bg-black/30 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/50"
+                                className="absolute left-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full bg-black/30 text-white opacity-0 group-hover:opacity-100 hover:bg-black/50"
                             >
                                 <ChevronLeft className="w-5 h-5" aria-hidden="true" />
                             </button>
@@ -505,7 +490,7 @@ const CombinedPopupComponent = () => {
                                 type="button"
                                 aria-label="다음 배너 보기"
                                 onClick={(e) => { e.stopPropagation(); nextSlide({ userInitiated: true }); }}
-                                className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full bg-black/30 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/50"
+                                className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full bg-black/30 text-white opacity-0 group-hover:opacity-100 hover:bg-black/50"
                             >
                                 <ChevronRight className="w-5 h-5" aria-hidden="true" />
                             </button>
@@ -524,14 +509,14 @@ const CombinedPopupComponent = () => {
                 <div className="relative z-10 flex border-t border-border pointer-events-auto">
                     <button
                         onClick={(e) => handleDismissToday(e)}
-                        className="flex-1 py-3 text-sm text-muted-foreground hover:bg-accent transition-colors"
+                        className="flex-1 py-3 text-sm text-muted-foreground hover:bg-accent"
                     >
                         오늘 하루 안 보기
                     </button>
                     <div className="w-px bg-border" />
                     <button
                         onClick={(e) => handleClose(e)}
-                        className="flex-1 py-3 text-sm font-medium text-foreground hover:bg-accent transition-colors"
+                        className="flex-1 py-3 text-sm font-medium text-foreground hover:bg-accent"
                     >
                         닫기
                     </button>
diff --git a/apps/web/components/layout/FloatingNavButtons.tsx b/apps/web/components/layout/FloatingNavButtons.tsx
index 0eadc78a2f..f430e52677 100644
--- a/apps/web/components/layout/FloatingNavButtons.tsx
+++ b/apps/web/components/layout/FloatingNavButtons.tsx
@@ -89,7 +89,7 @@ function FloatingNavButtonsComponent({ activePanel, onPanelChange, onReviewSelec
     return (
         <nav className={cn("fixed z-[92] flex flex-col items-start gap-2", className)} aria-label="지도 화면 보조 탐색">
             {/* 국내/해외 토글 - 모바일/태블릿과 동일한 디자인 */}
-            <div className="flex items-center gap-0.5 p-0.5 bg-background/95 backdrop-blur-sm rounded-full shadow-lg border border-border w-[clamp(84px,22vw,120px)]">
+            <div className="flex items-center gap-0.5 p-0.5 bg-background/95 rounded-full shadow-lg border border-border w-[clamp(84px,22vw,120px)]">
                 <Button
                     variant="ghost"
                     size="sm"
@@ -97,7 +97,7 @@ function FloatingNavButtonsComponent({ activePanel, onPanelChange, onReviewSelec
                     aria-label="국내 지도 모드로 전환"
                     aria-pressed={mapMode === 'domestic'}
                     onClick={() => handleModeChange('domestic')}
-                    className={`rounded-full min-h-11 px-2 text-xs font-medium transition-all motion-reduce:transition-none flex-1 ${mapMode === 'domestic'
+                    className={`rounded-full min-h-11 px-2 text-xs font-medium flex-1 ${mapMode === 'domestic'
                         ? 'bg-primary text-primary-foreground shadow-sm'
                         : 'text-muted-foreground hover:text-foreground hover:bg-transparent'
                         }`}
@@ -111,7 +111,7 @@ function FloatingNavButtonsComponent({ activePanel, onPanelChange, onReviewSelec
                     aria-label="해외 지도 모드로 전환"
                     aria-pressed={mapMode === 'overseas'}
                     onClick={() => handleModeChange('overseas')}
-                    className={`rounded-full min-h-11 px-2 text-xs font-medium transition-all motion-reduce:transition-none flex-1 ${mapMode === 'overseas'
+                    className={`rounded-full min-h-11 px-2 text-xs font-medium flex-1 ${mapMode === 'overseas'
                         ? 'bg-primary text-primary-foreground shadow-sm'
                         : 'text-muted-foreground hover:text-foreground hover:bg-transparent'
                         }`}
@@ -132,7 +132,7 @@ function FloatingNavButtonsComponent({ activePanel, onPanelChange, onReviewSelec
                         aria-label={`${item.label} 패널 ${isActive ? '선택됨' : '열기'}`}
                         onClick={() => handlePanelClick(item.id)}
                         className={cn(
-                            'rounded-full shadow-lg bg-background/95 backdrop-blur-sm border border-border',
+                            'rounded-full shadow-lg bg-background/95 border border-border',
                             'hover:bg-secondary/80 w-[clamp(84px,22vw,120px)] min-h-11 px-2',
                             isActive && 'ring-2 ring-primary bg-primary/10',
                             item.adminOnly && 'border-orange-500/50'
diff --git a/apps/web/components/layout/Header.tsx b/apps/web/components/layout/Header.tsx
index 67278dd41d..4391dcfb61 100644
--- a/apps/web/components/layout/Header.tsx
+++ b/apps/web/components/layout/Header.tsx
@@ -85,7 +85,7 @@ const loadAnnouncementPanel = async () => {
 };
 
 const BANNER_ROTATION_INTERVAL = 5000;
-const HEADER_BANNER_FRAME_CLASS = "flex items-center gap-2 px-2 py-0.5 md:px-3 md:py-1 rounded-md transition-all duration-300 relative z-10 flex-1 min-w-0";
+const HEADER_BANNER_FRAME_CLASS = "flex items-center gap-2 px-2 py-0.5 md:px-3 md:py-1 rounded-md relative z-10 flex-1 min-w-0";
 
 const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, onOpenAuth, onLogout, isAdmin = false, onAnnouncementClick, hideToggleSidebar = false }: HeaderProps) => {
   const isHydrated = useHydration();
@@ -268,7 +268,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
   return (
     <header
       ref={headerRef}
-      className="border-b border-border bg-background flex items-center shadow-sm z-[92] relative transition-[opacity,transform,background-color] duration-300 gap-1.5 sm:gap-3 h-12 px-2 md:h-14 md:px-3"
+      className="border-b border-border bg-background flex items-center shadow-sm z-[92] relative gap-1.5 sm:gap-3 h-12 px-2 md:h-14 md:px-3"
       style={{
         transform: 'translateY(calc(-1 * var(--mobile-sheet-header-offset, 0px)))',
         opacity: 'calc(1 - var(--mobile-sheet-header-progress, 0))',
@@ -276,8 +276,8 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
     >
       {/* 한지 질감 오버레이 - 다크모드에서 숨김 */}
       <div
-        className="absolute inset-0 opacity-30 dark:opacity-0 pointer-events-none transition-opacity"
-        style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E")` }}
+        className="absolute inset-0 opacity-30 dark:opacity-0 pointer-events-none"
+        style={{ backgroundImage: 'url("/images/ui-noise.png")', backgroundRepeat: 'repeat' }}
       />
 
       {/* 전통 문양 테두리 - 다크모드에서는 차분한 경계선으로 유지 */}
@@ -300,7 +300,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
       {/* 좌측: 사이드바 토글 */}
       {!isMobileBannerOnlyHeader && !hideToggleSidebar && shouldShowHeaderIcons && (
         <div className={cn(
-          "flex items-center relative z-10 flex-shrink-0 transition-all duration-300",
+          "flex items-center relative z-10 flex-shrink-0",
           isHydrated ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1"
         )}>
           <Button
@@ -309,7 +309,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
             type="button"
             aria-label="사이드바 토글"
             onClick={onToggleSidebar}
-            className="h-9 w-9 hover:bg-accent text-foreground font-sans transition-colors"
+            className="h-9 w-9 hover:bg-accent text-foreground font-sans"
           >
             <PanelLeft className="h-5 w-5" />
           </Button>
@@ -356,7 +356,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
             </Button>
           )}
           <Megaphone className="h-4 w-4 text-red-700 flex-shrink-0" />
-          <span className="font-medium truncate group-hover:text-red-800 transition-colors text-foreground flex-1 min-w-0 text-xs md:text-sm">
+          <span className="font-medium truncate group-hover:text-red-800 text-foreground flex-1 min-w-0 text-xs md:text-sm">
             {currentBanner.title}
           </span>
           {bannerAnnouncements.length > 1 && (
@@ -379,7 +379,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
       {/* 우측: 위젯 및 버튼들 */}
       {!isMobileBannerOnlyHeader && (
         <div className={cn(
-          "flex items-center gap-1 sm:gap-2 relative z-10 flex-shrink-0 transition-all duration-300",
+          "flex items-center gap-1 sm:gap-2 relative z-10 flex-shrink-0",
           isHydrated ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1"
         )}>
         {/* 랭킹 및 접속자 위젯 - 데스크탑에서만 표시 */}
@@ -404,7 +404,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
                 size="icon"
                 type="button"
                 aria-label={unreadCount > 0 ? `알림, 안 읽은 알림 ${unreadCount > 99 ? "99개 이상" : `${unreadCount}개`}` : "알림"}
-                className="h-11 w-11 rounded-xl hover:bg-accent text-foreground relative transition-colors focus-visible:ring-2 focus-visible:ring-primary touch-manipulation"
+                className="h-11 w-11 rounded-xl hover:bg-accent text-foreground relative focus-visible:ring-2 focus-visible:ring-primary touch-manipulation"
               >
                 <Bell className="h-5 w-5" aria-hidden="true" />
                 {unreadCount > 0 && (
@@ -548,7 +548,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
             type="button"
             aria-label="전체화면 토글"
             onClick={toggleFullscreen}
-            className="h-11 w-11 hidden md:flex rounded-xl hover:bg-accent text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-primary touch-manipulation"
+            className="h-11 w-11 hidden md:flex rounded-xl hover:bg-accent text-foreground focus-visible:ring-2 focus-visible:ring-primary touch-manipulation"
           >
             <Maximize className="h-5 w-5" aria-hidden="true" />
           </Button>
@@ -566,7 +566,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
                 size="icon"
                 type="button"
                 aria-label="내 계정 메뉴"
-                className="h-11 w-11 rounded-xl hover:bg-accent text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-primary touch-manipulation"
+                className="h-11 w-11 rounded-xl hover:bg-accent text-foreground focus-visible:ring-2 focus-visible:ring-primary touch-manipulation"
               >
                 <User className="h-5 w-5" aria-hidden="true" />
               </Button>
@@ -606,7 +606,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
                   type="button"
                   aria-label="사업자 정보 펼치기/접기"
                   onClick={() => setIsBusinessInfoExpanded(!isBusinessInfoExpanded)}
-                  className="w-full flex items-center justify-between hover:bg-accent rounded px-1 py-0.5 transition-colors"
+                  className="w-full flex items-center justify-between hover:bg-accent rounded px-1 py-0.5"
                 >
                   <span className="text-2xs text-muted-foreground">{siteConfig.operator.copyrightLabel}</span>
                   {isBusinessInfoExpanded ? (
@@ -636,7 +636,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
               type="button"
               aria-label="로그인"
               className={cn(
-                "bg-red-800 hover:bg-red-900 text-white font-sans transition-colors shadow-md",
+                "bg-red-800 hover:bg-red-900 text-white font-sans shadow-md",
                 "h-8 px-4 text-xs md:h-9 md:px-4 md:text-sm"
               )}
             >
diff --git a/apps/web/components/layout/HeaderBookmarkMenuButton.tsx b/apps/web/components/layout/HeaderBookmarkMenuButton.tsx
index 9acbf3dc37..004caf671f 100644
--- a/apps/web/components/layout/HeaderBookmarkMenuButton.tsx
+++ b/apps/web/components/layout/HeaderBookmarkMenuButton.tsx
@@ -40,7 +40,7 @@ export default function HeaderBookmarkMenuButton() {
           size="icon"
           type="button"
           aria-label={triggerBookmarkCount > 0 ? `북마크, 저장한 맛집 ${triggerBookmarkCount}개` : "북마크"}
-          className="relative h-11 w-11 rounded-xl !text-primary transition-colors hover:bg-primary/10 hover:!text-primary data-[state=open]:bg-primary/10 data-[state=open]:!text-primary focus-visible:ring-2 focus-visible:ring-primary touch-manipulation [&_svg]:!text-primary"
+          className="relative h-11 w-11 rounded-xl !text-primary hover:bg-primary/10 hover:!text-primary data-[state=open]:bg-primary/10 data-[state=open]:!text-primary focus-visible:ring-2 focus-visible:ring-primary touch-manipulation [&_svg]:!text-primary"
         >
           <Bookmark className="h-5 w-5 !text-primary" aria-hidden="true" />
           {triggerBookmarkCount > 0 && (
diff --git a/apps/web/components/layout/MainLayout.tsx b/apps/web/components/layout/MainLayout.tsx
index 9097bfb7cb..cb1ff480e2 100644
--- a/apps/web/components/layout/MainLayout.tsx
+++ b/apps/web/components/layout/MainLayout.tsx
@@ -261,10 +261,9 @@ export function MainLayoutContent({ children }: { children: React.ReactNode }) {
 
       <div
         className={cn(
-          "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden transition-[margin] duration-300",
+          "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
         )}
         style={{
-          transitionTimingFunction: "cubic-bezier(0.25, 0.1, 0.25, 1.0)",
           paddingBottom: shouldRenderMobileBottomNav
             ? "calc(var(--mobile-bottom-nav-height, 60px) * (1 - var(--mobile-sheet-hide-bottom-nav, 0)))"
             : "0px",
@@ -275,7 +274,7 @@ export function MainLayoutContent({ children }: { children: React.ReactNode }) {
         <main
           id="main-content"
           tabIndex={-1}
-          className="relative min-h-0 min-w-0 flex-1 overflow-hidden transition-[margin] duration-300"
+          className="relative min-h-0 min-w-0 flex-1 overflow-hidden"
           style={{
             marginTop: "calc(-1 * var(--mobile-sheet-header-offset, 0px))",
           }}
@@ -292,15 +291,12 @@ export function MainLayoutContent({ children }: { children: React.ReactNode }) {
             "min-[1600px]:hidden",
             // JS 기반 조건: isDesktop이 true면 숨김 (hydration 후)
             isDesktop && "hidden",
-            "transition-transform duration-300",
           )}
         >
           <MobileBottomNav
-            className="transition-transform duration-300"
             style={{
               transform:
                 "translate3d(0, calc(var(--mobile-sheet-hide-bottom-nav, 0) * 120%), 0)",
-              willChange: "transform",
             }}
           />
         </div>
diff --git a/apps/web/components/layout/MobileBottomNav.tsx b/apps/web/components/layout/MobileBottomNav.tsx
index 62e45559d6..f71df795b3 100644
--- a/apps/web/components/layout/MobileBottomNav.tsx
+++ b/apps/web/components/layout/MobileBottomNav.tsx
@@ -178,7 +178,7 @@ function MobileBottomNavComponent({ className, style }: MobileBottomNavProps) {
                 'fixed bottom-0 left-0 right-0 z-50',
                 'font-sans',
                 // 배경 및 테두리
-                'bg-background/95 backdrop-blur-md border-t border-border',
+                'bg-background/95 border-t border-border',
                 // 그리드 레이아웃
                 'grid',
                 // iOS safe area 지원
@@ -209,7 +209,6 @@ function MobileBottomNavComponent({ className, style }: MobileBottomNavProps) {
                         className={cn(
                             'flex flex-col items-center justify-center py-2.5 px-1',
                             'min-h-[60px]',
-                            'transition-all duration-200',
                             'relative',
                             isActive
                                 ? 'text-red-800'
@@ -218,12 +217,12 @@ function MobileBottomNavComponent({ className, style }: MobileBottomNavProps) {
                     >
                         {/* 활성 상태 배경 원 */}
                         {isActive && (
-                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-red-50 rounded-full -z-10 transition-all duration-200" />
+                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-red-50 rounded-full -z-10" />
                         )}
 
                         <Icon
                             className={cn(
-                                'h-6 w-6 mb-1 transition-all duration-200',
+                                'h-6 w-6 mb-1',
                                 isActive && 'fill-red-800/20 scale-110'
                             )}
                         />
diff --git a/apps/web/components/layout/OverlayPagePanel.tsx b/apps/web/components/layout/OverlayPagePanel.tsx
index 44651852e4..951113e835 100644
--- a/apps/web/components/layout/OverlayPagePanel.tsx
+++ b/apps/web/components/layout/OverlayPagePanel.tsx
@@ -170,7 +170,7 @@ function OverlayPagePanelComponent({ activePanel, onClose, initialReviewId, onOp
         <>
             {/* 배경 오버레이 - 하나만 */}
             <div
-                className="fixed inset-0 z-[97] bg-black/40 backdrop-blur-sm transition-opacity duration-300"
+                className="fixed inset-0 z-[97] bg-black/40"
                 onClick={onClose}
                 aria-hidden="true"
             />
@@ -179,8 +179,7 @@ function OverlayPagePanelComponent({ activePanel, onClose, initialReviewId, onOp
             <div
                 className={cn(
                     "fixed z-[98] flex min-h-0 min-w-0 max-w-[calc(100vw-1rem)] gap-2",
-                    "top-20 bottom-8 left-1/2 w-[calc(100vw-1rem)] -translate-x-1/2 lg:gap-4",
-                    "transition-all duration-300 ease-out"
+                    "top-20 bottom-8 left-1/2 w-[calc(100vw-1rem)] -translate-x-1/2 lg:gap-4"
                 )}
                 data-layout-primitives="overlay-stack list-detail frame stack"
                 data-scroll-owner="overlay-page-panel"
@@ -192,8 +191,7 @@ function OverlayPagePanelComponent({ activePanel, onClose, initialReviewId, onOp
                         "flex flex-col overflow-hidden",
                         "w-full",
                         maxWidth,
-                        "rounded-2xl border border-border",
-                        "transition-all duration-300"
+                        "rounded-2xl border border-border"
                     )}
                 >
                     {activePanel === 'feed' && (
@@ -247,7 +245,7 @@ function OverlayPagePanelComponent({ activePanel, onClose, initialReviewId, onOp
                 {/* 우측 사이드 패널 영역 - 사용자 프로필 */}
                 {showUserProfile && (
                     <div className={cn(
-                        "hidden min-w-0 flex-1 basis-[400px] flex-col bg-background transition-[width] duration-300 ease-in-out xl:flex",
+                        "hidden min-w-0 flex-1 basis-[400px] flex-col bg-background xl:flex",
                         "w-[min(400px,calc(100vw-1rem))]",
                         "rounded-2xl border border-border shadow-sm overflow-hidden"
                     )}>
@@ -264,7 +262,7 @@ function OverlayPagePanelComponent({ activePanel, onClose, initialReviewId, onOp
                 {/* 우측 사이드 패널 영역 - 맛집 상세 */}
                 {showRestaurantDetail && (
                     <div className={cn(
-                        "hidden min-w-0 flex-1 basis-[400px] flex-col bg-background transition-[width] duration-300 ease-in-out xl:flex",
+                        "hidden min-w-0 flex-1 basis-[400px] flex-col bg-background xl:flex",
                         "w-[min(400px,calc(100vw-1rem))]",
                         "rounded-2xl border border-border shadow-sm overflow-hidden"
                     )}>
diff --git a/apps/web/components/layout/RankingWidget.tsx b/apps/web/components/layout/RankingWidget.tsx
index 5843134ebd..053c0bb944 100644
--- a/apps/web/components/layout/RankingWidget.tsx
+++ b/apps/web/components/layout/RankingWidget.tsx
@@ -66,7 +66,7 @@ const RankingWidgetComponent = () => {
 
     return (
         <div className={cn(
-            "flex items-center gap-3 mr-2 transition-opacity duration-300",
+            "flex items-center gap-3 mr-2",
             isHydrated ? "opacity-100" : "opacity-0"
         )}>
             {/* Online Users */}
diff --git a/apps/web/components/layout/ReturnToMapButton.tsx b/apps/web/components/layout/ReturnToMapButton.tsx
index 51ea430566..5168df0355 100644
--- a/apps/web/components/layout/ReturnToMapButton.tsx
+++ b/apps/web/components/layout/ReturnToMapButton.tsx
@@ -47,7 +47,7 @@ export function ReturnToMapButton({
       variant="ghost"
       size={iconOnly ? "icon" : "sm"}
       className={cn(
-        "inline-flex shrink-0 touch-manipulation items-center gap-1.5 rounded-full border border-border bg-background/80 text-muted-foreground shadow-sm transition-colors hover:bg-secondary/80 hover:text-foreground focus-visible:ring-primary focus-visible:ring-offset-background",
+        "inline-flex shrink-0 touch-manipulation items-center gap-1.5 rounded-full border border-border bg-background/80 text-muted-foreground shadow-sm hover:bg-secondary/80 hover:text-foreground focus-visible:ring-primary focus-visible:ring-offset-background",
         iconOnly ? "h-11 w-11" : "min-h-11 px-3 text-xs font-semibold",
         className,
       )}
diff --git a/apps/web/components/map/MapView.tsx b/apps/web/components/map/MapView.tsx
index 6d16e1f373..262f491255 100644
--- a/apps/web/components/map/MapView.tsx
+++ b/apps/web/components/map/MapView.tsx
@@ -326,7 +326,7 @@ const MapView = memo(({ filters, selectedCountry, searchedRestaurant, selectedRe
       });
 
       // 지도 이동
-      map.panTo({ lat: position.lat, lng: adjustedLng });
+      map.setCenter({ lat: position.lat, lng: adjustedLng });
 
       // 이동 완료 표시
       lastCenteredRestaurantId.current = selectedRestaurant.id;
diff --git a/apps/web/components/map/NaverMapView.tsx b/apps/web/components/map/NaverMapView.tsx
index c8a92604ba..283bd4e65f 100644
--- a/apps/web/components/map/NaverMapView.tsx
+++ b/apps/web/components/map/NaverMapView.tsx
@@ -72,12 +72,13 @@ import {
     buildRestaurantMarkerKindSignature,
     isUserSubmittedRestaurant,
     RESTAURANT_MARKER_ASSET_VERSION,
-    resolveRestaurantMarkerKind,
 } from "@/lib/restaurant-marker-kind";
 import {
     buildClusterMarkerContent,
     buildClusterMarkerFeature,
     buildNaverClusterAnimationIconPlan,
+    buildNaverClusterMarkerRenderPlan,
+    shouldReplaceNaverMarkerIcon,
 } from "@/lib/naver-map-cluster-visuals";
 import { perfMonitor } from "@/lib/performance-monitor";
 import { useMapOptimization } from "@/hooks/useMapOptimization";
@@ -108,7 +109,7 @@ import {
     resolveNaverRestaurantQueryBounds,
 } from "@/lib/map-query-helpers";
 import {
-    getExtendedBounds,
+    fillExtendedBounds,
     getPrimaryCategory,
     isPointInSeoul,
     isRestaurantInViewport,
@@ -129,6 +130,7 @@ import {
     getRestaurantsWithRenderableCoordinates,
     getSeoulIndividualRestaurantsForRender,
     getVisibleRestaurantsForRender,
+    getVisibleRestaurantIdSet,
     nextEmptyIdentityArray,
     normalizeNaverMarkerCoordinates,
     resolveEmptyClusterMarkerCleanupPlan,
@@ -208,6 +210,9 @@ import { focusNaverMapOnRestaurant } from "@/lib/naver-map-focus-helpers";
 import {
     buildNaverOverlappingMarkerOffsets,
     resolveNaverOverlappingMarkerPosition,
+    reuseMarkerLatLng,
+    reuseMarkerAnchor,
+    reuseProjectedLatLng,
 } from "@/lib/naver-map-overlap-helpers";
 import { resolveNaverResizeOffsets } from "@/lib/naver-map-resize-offset-helpers";
 import {
@@ -231,12 +236,15 @@ import {
     resolveNaverWheelCleanupState,
     resolveNaverWheelZoomPlan,
     resolveNaverWheelInputDispatch,
+    hasNaverWheelProjectionUpdated,
     resolveNaverWheelPostAdjustPlan,
     type NaverWheelInput,
 } from "@/lib/naver-map-wheel-helpers";
 import {
+    buildVisibleRestaurantIdSignature,
     buildVisibleMarkerReviewBubbleHtml,
     buildVisibleMarkerReviewBubbleMapSignature,
+    buildVisibleMarkerReviewBubbleRenderToken,
     buildVisibleMarkerReviewBubbleTargetSignature,
     resolveVisibleMarkerReviewBubblePhotoUrl,
     selectVisibleMarkerReviewBubbleTargets,
@@ -269,6 +277,7 @@ interface NaverMapLike {
     getCenter: () => NaverLatLngLike;
     getProjection: () => NaverProjectionLike;
     getZoom: () => number;
+    getSize?: () => { width: number; height: number } | null;
     fitBounds?: (bounds: unknown, options?: unknown) => void;
     morph: (target: unknown, zoom?: number, options?: unknown) => void;
     panBy: (x: number, y: number) => void;
@@ -323,7 +332,7 @@ const MOBILE_MARKER_CENTER_FINE_TUNE_PX = -6; // 선택 마커 translateY(-5px)
 
 // [성능 최적화] 가시영역 필터링 및 이벤트 처리 상수
 const VIEWPORT_FILTER_ENABLED = true; // 가시영역 필터링 활성화
-const VIEWPORT_PADDING = 0.05; // 가시영역 여백 (5% 확장)
+const VIEWPORT_PADDING = 0.25; // 가시영역 여백 (25% 확장)
 const resolveHomeMapContextualRenderMode = ({
     shouldUseRegionalCluster,
     shouldUseSeoulDistrictCluster,
@@ -418,20 +427,51 @@ type VisibleMarkerReviewRow = Pick<
 >;
 
 const VISIBLE_MARKER_REVIEW_SELECT = 'id,restaurant_id,user_id,content,food_photos,created_at,is_pinned';
+const EMPTY_CONTEXTUAL_RESTAURANTS: Restaurant[] = [];
 
+let lastComposedMarkerLayerVersion = '';
+let lastComposedMarkerKindSignature = '';
+
+function composeMarkerLayerVersion(markerKindSignature: string) {
+    if (markerKindSignature === lastComposedMarkerKindSignature) return lastComposedMarkerLayerVersion;
+    lastComposedMarkerKindSignature = markerKindSignature;
+    lastComposedMarkerLayerVersion = `${RESTAURANT_MARKER_ASSET_VERSION}:${markerKindSignature}`;
+    return lastComposedMarkerLayerVersion;
+}
+
+
+let lastReviewSeed = '';
+let lastReviewSeedZoom = Number.NaN;
+let lastReviewSeedSouth = Number.NaN;
+let lastReviewSeedWest = Number.NaN;
+let lastReviewSeedNorth = Number.NaN;
+let lastReviewSeedEast = Number.NaN;
 
 function buildVisibleMarkerReviewSeed(
     zoom: number,
     bounds: { south: number; west: number; north: number; east: number } | null,
 ) {
     if (!bounds) return String(zoom);
-    return [
-        zoom,
-        bounds.south.toFixed(3),
-        bounds.west.toFixed(3),
-        bounds.north.toFixed(3),
-        bounds.east.toFixed(3),
-    ].join(':');
+    const south = Math.round(bounds.south * 1000);
+    const west = Math.round(bounds.west * 1000);
+    const north = Math.round(bounds.north * 1000);
+    const east = Math.round(bounds.east * 1000);
+    if (
+        zoom === lastReviewSeedZoom &&
+        south === lastReviewSeedSouth &&
+        west === lastReviewSeedWest &&
+        north === lastReviewSeedNorth &&
+        east === lastReviewSeedEast
+    ) {
+        return lastReviewSeed;
+    }
+    lastReviewSeedZoom = zoom;
+    lastReviewSeedSouth = south;
+    lastReviewSeedWest = west;
+    lastReviewSeedNorth = north;
+    lastReviewSeedEast = east;
+    lastReviewSeed = `${zoom}:${south}:${west}:${north}:${east}`;
+    return lastReviewSeed;
 }
 
 function filterVisibleMarkerReviewBubbleViewportCandidates(
@@ -443,7 +483,10 @@ function filterVisibleMarkerReviewBubbleViewportCandidates(
     },
 ) {
     const projection = options.map.getProjection?.();
-    const rect = options.mapElement?.getBoundingClientRect();
+    const size = options.map.getSize?.();
+    const rect = size?.width && size?.height
+        ? { width: size.width, height: size.height }
+        : options.mapElement?.getBoundingClientRect();
     if (!projection || !rect?.width || !rect?.height) return restaurants;
 
     const bubbleHalfWidth = options.isMobile ? 118 : 118;
@@ -452,31 +495,49 @@ function filterVisibleMarkerReviewBubbleViewportCandidates(
     const minX = bubbleHalfWidth + 16;
     const maxX = rect.width - bubbleHalfWidth - 16;
 
-    const scoredRestaurants = restaurants.flatMap((restaurant) => {
-        const normalizedRestaurant = normalizeNaverMarkerCoordinates(restaurant);
-        if (!normalizedRestaurant) return [];
-
+    let inside: Restaurant[] | null = null;
+    let scoredRestaurants: Array<{
+        restaurant: Restaurant;
+        x: number;
+        y: number;
+        centralityScore: number;
+    }> | null = null;
+    const targetY = options.isMobile ? rect.height * 0.34 : rect.height * 0.45;
+    const centerX = rect.width / 2;
+    for (let index = 0; index < restaurants.length; index += 1) {
+        const normalizedRestaurant = normalizeNaverMarkerCoordinates(restaurants[index]);
+        if (!normalizedRestaurant) continue;
+        let point: { x: number; y: number };
         try {
-            const point = projection.fromCoordToOffset(
-                new window.naver.maps.LatLng(normalizedRestaurant.lat, normalizedRestaurant.lng),
+            point = projection.fromCoordToOffset(
+                reuseProjectedLatLng(
+                    restaurants[index],
+                    normalizedRestaurant.lat,
+                    normalizedRestaurant.lng,
+                    () => new window.naver.maps.LatLng(normalizedRestaurant.lat, normalizedRestaurant.lng),
+                ),
             );
-            const targetY = options.isMobile ? rect.height * 0.34 : rect.height * 0.45;
-            return [{
-                restaurant: normalizedRestaurant,
-                x: point.x,
-                y: point.y,
-                centralityScore: Math.abs(point.x - rect.width / 2) * 1.2 + Math.abs(point.y - targetY),
-            }];
         } catch {
-            return [];
+            continue;
         }
-    });
-
-    const viewportSafeRestaurants = scoredRestaurants
-        .filter(({ x, y }) => x >= minX && x <= maxX && y >= minY && y <= maxY)
-        .map(({ restaurant }) => restaurant);
+        const inStrict = point.x >= minX && point.x <= maxX && point.y >= minY && point.y <= maxY;
+        if (inStrict) {
+            if (!inside) inside = [];
+            inside.push(normalizedRestaurant);
+            continue;
+        }
+        if (inside) continue;
+        if (!scoredRestaurants) scoredRestaurants = [];
+        scoredRestaurants.push({
+            restaurant: normalizedRestaurant,
+            x: point.x,
+            y: point.y,
+            centralityScore: Math.abs(point.x - centerX) * 1.2 + Math.abs(point.y - targetY),
+        });
+    }
 
-    if (viewportSafeRestaurants.length > 0) return viewportSafeRestaurants;
+    if (inside && inside.length > 0) return inside;
+    if (!scoredRestaurants) return restaurants;
 
     const broadMinY = options.isMobile ? 148 : 84;
     const broadMaxY = options.isMobile ? rect.height * 0.62 : rect.height - 96;
@@ -499,21 +560,35 @@ function clampVisibleMarkerReviewBubbleElements() {
 
     const viewportMinX = 8;
     const viewportMaxX = window.innerWidth - 8;
+    const shifts: Array<{ element: HTMLElement; marginLeft: string }> = [];
     document.querySelectorAll<HTMLElement>('[data-visible-marker-review-bubble="true"]').forEach((element) => {
-        element.style.marginLeft = '0px';
+        const applied = Number.parseFloat(element.style.marginLeft) || 0;
         const rect = element.getBoundingClientRect();
+        const naturalLeft = rect.left - applied;
+        const naturalRight = rect.right - applied;
         let offsetX = 0;
 
-        if (rect.left < viewportMinX) {
-            offsetX = viewportMinX - rect.left;
-        } else if (rect.right > viewportMaxX) {
-            offsetX = viewportMaxX - rect.right;
+        if (naturalLeft < viewportMinX) {
+            offsetX = viewportMinX - naturalLeft;
+        } else if (naturalRight > viewportMaxX) {
+            offsetX = viewportMaxX - naturalRight;
         }
 
-        if (Math.abs(offsetX) > 0.5) {
-            element.style.marginLeft = `${offsetX}px`;
+        const marginLeft = Math.abs(offsetX) > 0.5 ? `${offsetX}px` : '0px';
+        if (element.style.marginLeft !== marginLeft) {
+            shifts.push({ element, marginLeft });
         }
     });
+    shifts.forEach(({ element, marginLeft }) => {
+        element.style.marginLeft = marginLeft;
+    });
+}
+
+function hasVisibleMarkerReviewBubbles(bubbles: object) {
+    for (const key in bubbles) {
+        if (Object.prototype.hasOwnProperty.call(bubbles, key)) return true;
+    }
+    return false;
 }
 
 function scheduleVisibleMarkerReviewBubbleClamp() {
@@ -524,6 +599,12 @@ function scheduleVisibleMarkerReviewBubbleClamp() {
     });
 }
 
+const reviewBubbleWrapCache = new WeakMap<VisibleMarkerReviewBubble, {
+    markerContent: string;
+    mobile: boolean;
+    wrapped: string;
+}>();
+
 function wrapNaverMarkerContentWithReviewBubble(
     markerContent: string,
     bubble: VisibleMarkerReviewBubble | undefined,
@@ -531,7 +612,12 @@ function wrapNaverMarkerContentWithReviewBubble(
 ) {
     if (!bubble) return markerContent;
 
-    return `
+    const cached = reviewBubbleWrapCache.get(bubble);
+    if (cached && cached.markerContent === markerContent && cached.mobile === isMobile) {
+        return cached.wrapped;
+    }
+
+    const wrapped = `
         <div
           data-visible-marker-review-bubble-anchor="true"
           style="
@@ -546,6 +632,8 @@ function wrapNaverMarkerContentWithReviewBubble(
           ${markerContent}
         </div>
     `;
+    reviewBubbleWrapCache.set(bubble, { markerContent, mobile: isMobile, wrapped });
+    return wrapped;
 }
 
 type NaverClusterFeature =
@@ -658,6 +746,36 @@ const NaverMapView = memo(({
     const mapRef = useRef<HTMLDivElement>(null);
     const mapInstanceRef = useRef<NaverMapLike | null>(null);
     const markerRenderSignatureRef = useRef<MarkerRenderSignature | null>(null);
+    const extendedBoundsRef = useRef({ south: 0, west: 0, north: 0, east: 0 });
+    const lastPublishedMapListsRef = useRef({
+        swipeCandidates: null as Restaurant[] | null,
+        contextualRestaurants: null as Restaurant[] | null,
+        zoom: Number.NaN,
+        renderMode: '',
+        isEligible: false,
+        ineligibilityReason: undefined as HomeMapContextualRestaurantsIneligibilityReason | undefined,
+    });
+    const earlyMarkerRenderKeyRef = useRef<{
+        zoom: number;
+        south: number;
+        west: number;
+        north: number;
+        east: number;
+        clusters: unknown;
+        regionalClusters: unknown;
+        seoulDistrictClusters: unknown;
+        seoulDistrictClustersFiltered: unknown;
+        displayRestaurants: unknown;
+        selectedRegion: Region | null;
+        selectedRestaurantId: string;
+        searchedRestaurantId: string;
+        showUserSubmittedMarkers: boolean;
+        markerKindSignature: string;
+        expandedClusterRestaurantIds: unknown;
+        visibleMarkerReviewBubbles: unknown;
+        isMobileOrTablet: boolean;
+        markerRenderRetryTick: number;
+    } | null>(null);
     const previousSearchedRestaurantRef = useRef<Restaurant | null>(null); // 이전 searchedRestaurant 추적
     const releasedSearchSelectionIdRef = useRef<string | null>(null);
     const detailPanelRef = useRef<HTMLDivElement>(null); // 상세 패널 참조
@@ -701,6 +819,13 @@ const NaverMapView = memo(({
     const [visibleMarkerReviewBubbles, setVisibleMarkerReviewBubbles] =
         useState<Record<string, VisibleMarkerReviewBubble>>({});
     const visibleMarkerReviewBubbleTargetSignatureRef = useRef('');
+    const reviewBubbleProjectionCacheRef = useRef<{
+        seed: string;
+        idSignature: string;
+        restaurants: ReturnType<typeof getRestaurantsWithRenderableCoordinates>;
+        targets: VisibleMarkerReviewBubbleTarget[];
+        targetSignature: string;
+    } | null>(null);
 
     // 사이드바 상태 가져오기
     const { isSidebarOpen } = useLayout();
@@ -764,26 +889,15 @@ const NaverMapView = memo(({
             return;
         }
 
-        let checkIntervalId: number;
-        let settleTimeoutId: number;
-
         const attemptActivation = () => {
             if (typeof document === 'undefined') return;
 
             const searchButton = document.getElementById('tzudong-mobile-search-button');
             const categorySlider = document.getElementById('tzudong-mobile-category-slider');
 
-            // 조건문: 검색창과 카테고리 슬라이더가 모두 실제 DOM에 로드되었는지 확인
             if (searchButton && categorySlider) {
-                // 엘리먼트가 완전히 마운트된 것이 확인되었으므로, 500ms 동안 시각적으로 정착할 여유를 준 뒤 활성화합니다.
-                settleTimeoutId = window.setTimeout(() => {
-                    setShouldRunNoncriticalMapEffects(true);
-                }, 500);
-
+                setShouldRunNoncriticalMapEffects(true);
                 window.removeEventListener('tzudong_mobile_overlay_ready', handleReady);
-                if (checkIntervalId) {
-                    window.clearInterval(checkIntervalId);
-                }
             }
         };
 
@@ -791,32 +905,16 @@ const NaverMapView = memo(({
             attemptActivation();
         };
 
-        // 1. 컴포넌트 마운트 완료 이벤트를 리스닝합니다.
         window.addEventListener('tzudong_mobile_overlay_ready', handleReady);
-
-        // 2. 주기적으로 DOM 조건 체크 (폴링: 100ms 마다 검사하여 확실하게 확인)
-        checkIntervalId = window.setInterval(() => {
-            attemptActivation();
-        }, 100);
-
-        // 즉시 첫 번째 조건 체크 수행
         attemptActivation();
 
-        // 3초 내에 감지되지 않을 시 비임계 효과 강제 활성화 (사용성 확보를 위한 복구 폴백)
         const fallbackTimeoutId = window.setTimeout(() => {
             setShouldRunNoncriticalMapEffects(true);
             window.removeEventListener('tzudong_mobile_overlay_ready', handleReady);
-            if (checkIntervalId) {
-                window.clearInterval(checkIntervalId);
-            }
         }, 3000);
 
         return () => {
             window.removeEventListener('tzudong_mobile_overlay_ready', handleReady);
-            if (checkIntervalId) {
-                window.clearInterval(checkIntervalId);
-            }
-            clearTimeout(settleTimeoutId);
             clearTimeout(fallbackTimeoutId);
         };
     }, [isMobileOrTablet]);
@@ -1081,7 +1179,8 @@ const NaverMapView = memo(({
 
         if (deviceLocationRenderPlan.shouldFocus) {
             lastFocusedDeviceLocationRequestRef.current = deviceLocationRenderPlan.nextFocusedRequestId;
-            map.morph(position, deviceLocationRenderPlan.focusZoom, { duration: 450, easing: 'easeOutCubic' });
+            map.setCenter(position);
+            map.setZoom(deviceLocationRenderPlan.focusZoom);
         }
     }, [deviceLocation, isMapInitialized]);
 
@@ -1168,22 +1267,6 @@ const NaverMapView = memo(({
         // 클러스터 CSS 주입
         injectClusterCSS();
 
-        // 기존 마커 스타일이 없으면 추가 (cluster-marker.ts와 중복 방지)
-        if (!document.getElementById('naver-map-marker-styles')) {
-            const style = document.createElement('style');
-            style.id = 'naver-map-marker-styles';
-            style.textContent = `
-                @keyframes marker-bounce {
-                    0%, 100% { transform: scale(1.15) translateY(0); }
-                    50% { transform: scale(1.15) translateY(-4px); }
-                }
-                .marker-bounce {
-                    animation: marker-bounce 1s ease-in-out infinite;
-                }
-            `;
-            document.head.appendChild(style);
-        }
-
         // 클러스터 애니메이션 시작 (성능 티어에 따라 조건부 실행)
         if (ENABLE_CLUSTERING && mapOptimization.clusterAnimationEnabled) {
             clusterAnimationManager.start(mapOptimization.clusterAnimationInterval);
@@ -1193,12 +1276,6 @@ const NaverMapView = memo(({
         return () => {
             markerContentCache.clear();
 
-            // 기존 마커 스타일 제거
-            const styleEl = document.getElementById('naver-map-marker-styles');
-            if (styleEl) {
-                styleEl.remove();
-            }
-
             // 클러스터 CSS 및 애니메이션 정리
             removeClusterCSS();
             clusterAnimationManager.clear();
@@ -1669,8 +1746,7 @@ const NaverMapView = memo(({
 
                 const newCenter = getAdjustedCenter(currentMapCenter.lat(), currentMapCenter.lng(), currentZoom, deltaX);
 
-                // 부드럽게 이동
-                map.panTo(newCenter, { duration: 300, easing: 'easeOutCubic' });
+                map.panTo(newCenter, { duration: 0 });
             }
             return;
         }
@@ -1684,20 +1760,7 @@ const NaverMapView = memo(({
 
         const newCenterLatLng = getAdjustedCenter(targetLat, targetLng, targetZoom, targetOffsetX, targetOffsetY);
         map.setZoom(targetZoom);
-        if (isMobileOrTablet && currentSelectedId) {
-            map.panTo(newCenterLatLng, { duration: 340, easing: 'easeOutCubic' });
-        } else {
-            map.setCenter(newCenterLatLng);
-        }
-
-        // [FIX] 트랜지션 완료 후 resize만 트리거 (moveMap 중복 호출 제거 - ResizeObserver가 처리함)
-        const transitionTimer = setTimeout(() => {
-            naver.maps.Event.trigger(map, transitionResizePlan.followupResizeEvent);
-        }, transitionResizePlan.followupResizeDelayMs);
-
-        return () => {
-            clearTimeout(transitionTimer);
-        };
+        map.setCenter(newCenterLatLng);
 
     }, [
         selectedRestaurant,
@@ -2000,6 +2063,10 @@ const NaverMapView = memo(({
         () => buildRestaurantMarkerKindSignature(displayRestaurants),
         [displayRestaurants],
     );
+    const overlappingMarkerOffsets = useMemo(
+        () => buildNaverOverlappingMarkerOffsets(displayRestaurants),
+        [displayRestaurants],
+    );
 
     const expandedClusterRestaurantSnapshotRef = useRef(new Map<string, Restaurant>());
     const restaurantLookup = useMemo(
@@ -2279,7 +2346,61 @@ const NaverMapView = memo(({
         const currentZoom = Math.floor(map.getZoom());
 
         // [OPTIMIZATION] 가시영역 확장 계산 (한 번만 수행)
-        const extendedBounds = getExtendedBounds(map);
+        const extendedBounds = fillExtendedBounds(map, VIEWPORT_PADDING, extendedBoundsRef.current)
+            ? extendedBoundsRef.current
+            : null;
+        const south = extendedBounds ? Math.round(extendedBounds.south * 10000) : 0;
+        const west = extendedBounds ? Math.round(extendedBounds.west * 10000) : 0;
+        const north = extendedBounds ? Math.round(extendedBounds.north * 10000) : 0;
+        const east = extendedBounds ? Math.round(extendedBounds.east * 10000) : 0;
+        const selectedRestaurantId = selectedRestaurant?.id ?? '';
+        const searchedRestaurantId = markerVisibleActiveSearchedRestaurant?.id ?? '';
+        const previousEarlyMarkerRenderKey = earlyMarkerRenderKeyRef.current;
+        if (
+            previousEarlyMarkerRenderKey !== null &&
+            previousEarlyMarkerRenderKey.zoom === currentZoom &&
+            previousEarlyMarkerRenderKey.south === south &&
+            previousEarlyMarkerRenderKey.west === west &&
+            previousEarlyMarkerRenderKey.north === north &&
+            previousEarlyMarkerRenderKey.east === east &&
+            previousEarlyMarkerRenderKey.clusters === clusters &&
+            previousEarlyMarkerRenderKey.regionalClusters === regionalClusters &&
+            previousEarlyMarkerRenderKey.seoulDistrictClusters === seoulDistrictClusters &&
+            previousEarlyMarkerRenderKey.seoulDistrictClustersFiltered === seoulDistrictClustersFiltered &&
+            previousEarlyMarkerRenderKey.displayRestaurants === displayRestaurants &&
+            previousEarlyMarkerRenderKey.selectedRegion === selectedRegion &&
+            previousEarlyMarkerRenderKey.selectedRestaurantId === selectedRestaurantId &&
+            previousEarlyMarkerRenderKey.searchedRestaurantId === searchedRestaurantId &&
+            previousEarlyMarkerRenderKey.showUserSubmittedMarkers === showUserSubmittedMarkers &&
+            previousEarlyMarkerRenderKey.markerKindSignature === markerKindSignature &&
+            previousEarlyMarkerRenderKey.expandedClusterRestaurantIds === expandedClusterRestaurantIds &&
+            previousEarlyMarkerRenderKey.visibleMarkerReviewBubbles === visibleMarkerReviewBubbles &&
+            previousEarlyMarkerRenderKey.isMobileOrTablet === isMobileOrTablet &&
+            previousEarlyMarkerRenderKey.markerRenderRetryTick === markerRenderRetryTick
+        ) {
+            return;
+        }
+        earlyMarkerRenderKeyRef.current = {
+            zoom: currentZoom,
+            south,
+            west,
+            north,
+            east,
+            clusters,
+            regionalClusters,
+            seoulDistrictClusters,
+            seoulDistrictClustersFiltered,
+            displayRestaurants,
+            selectedRegion,
+            selectedRestaurantId,
+            searchedRestaurantId,
+            showUserSubmittedMarkers,
+            markerKindSignature,
+            expandedClusterRestaurantIds,
+            visibleMarkerReviewBubbles,
+            isMobileOrTablet,
+            markerRenderRetryTick,
+        };
 
         // [PERFORMANCE] 렌더링 시작 시간 측정
         perfMonitor.startMeasure('RenderMarkers');
@@ -2314,8 +2435,12 @@ const NaverMapView = memo(({
             extendedBounds,
             VIEWPORT_FILTER_ENABLED,
         );
-        const visibleRestaurantIds = new Set(visibleRestaurants.map((restaurant) => restaurant.id));
-        const restaurantsForMarkerRender = [...visibleRestaurants];
+        const visibleRestaurantIds = expandedClusterRestaurantIds.length > 0
+            ? new Set(visibleRestaurants.map((restaurant) => restaurant.id))
+            : getVisibleRestaurantIdSet(visibleRestaurants);
+        const restaurantsForMarkerRender = expandedClusterRestaurantIds.length > 0
+            ? [...visibleRestaurants]
+            : visibleRestaurants;
         expandedClusterRestaurantIds.forEach((restaurantId) => {
             if (visibleRestaurantIds.has(restaurantId)) return;
 
@@ -2332,23 +2457,6 @@ const NaverMapView = memo(({
             allRestaurants: restaurantsForSwipe,
             activeSearchedRestaurant: markerVisibleActiveSearchedRestaurant,
         });
-        const overlappingMarkerCandidates = new Map<string, { id: string; lat?: number | null; lng?: number | null }>();
-        [...displayRestaurants, ...restaurantsForMarkerRender].forEach((restaurant) => {
-            overlappingMarkerCandidates.set(restaurant.id, restaurant);
-        });
-        clusters.forEach((feature) => {
-            if (isCluster(feature)) return;
-            const [lng, lat] = feature.geometry.coordinates;
-            overlappingMarkerCandidates.set(feature.properties.restaurantId, {
-                id: feature.properties.restaurantId,
-                lat,
-                lng,
-            });
-        });
-        const overlappingMarkerOffsets = buildNaverOverlappingMarkerOffsets(
-            Array.from(overlappingMarkerCandidates.values())
-        );
-
         const contextualRestaurants = getRestaurantsWithRenderableCoordinates(restaurantsForMarkerRender);
         const hasExpandedClusterRestaurants = expandedClusterRestaurantIds.length > 0 && contextualRestaurants.length > 0;
         const contextualRenderMode: HomeMapRenderMode = expandedClusterRestaurantIds.length > 0
@@ -2367,23 +2475,49 @@ const NaverMapView = memo(({
             });
         const isContextualPayloadEligible = !contextualIneligibilityReason;
         const visibleMarkerReviewCandidateRestaurants = getRestaurantsWithRenderableCoordinates(visibleRestaurants);
-        const reviewBubbleCandidateRestaurants = isContextualPayloadEligible && !selectedRestaurant
-            ? filterVisibleMarkerReviewBubbleViewportCandidates(visibleMarkerReviewCandidateRestaurants, {
-                isMobile: isMobileOrTablet,
-                map,
-                mapElement: mapRef.current,
-            })
-            : [];
-        const nextReviewBubbleTargets = reviewBubbleCandidateRestaurants.length > 0
-            ? selectVisibleMarkerReviewBubbleTargets(reviewBubbleCandidateRestaurants, {
-                limit: isMobileOrTablet
-                    ? VISIBLE_MARKER_REVIEW_BUBBLE_MOBILE_LIMIT
-                    : VISIBLE_MARKER_REVIEW_BUBBLE_DESKTOP_LIMIT,
-                seed: buildVisibleMarkerReviewSeed(currentZoom, extendedBounds),
-            })
+        const reviewBubbleSeed = isContextualPayloadEligible && !selectedRestaurant
+            ? buildVisibleMarkerReviewSeed(currentZoom, extendedBounds)
+            : '';
+        const reviewBubbleIdSignature = reviewBubbleSeed
+            ? buildVisibleRestaurantIdSignature(visibleMarkerReviewCandidateRestaurants)
+            : '';
+        const cachedReviewBubbleProjection = reviewBubbleProjectionCacheRef.current;
+        const reviewBubbleCacheHit = Boolean(
+            reviewBubbleSeed &&
+            cachedReviewBubbleProjection?.seed === reviewBubbleSeed &&
+            cachedReviewBubbleProjection.idSignature === reviewBubbleIdSignature,
+        );
+        const reviewBubbleCandidateRestaurants = reviewBubbleSeed
+            ? reviewBubbleCacheHit
+                ? cachedReviewBubbleProjection!.restaurants
+                : filterVisibleMarkerReviewBubbleViewportCandidates(visibleMarkerReviewCandidateRestaurants, {
+                    isMobile: isMobileOrTablet,
+                    map,
+                    mapElement: mapRef.current,
+                })
             : [];
-        const nextReviewBubbleTargetSignature =
-            buildVisibleMarkerReviewBubbleTargetSignature(nextReviewBubbleTargets);
+        const nextReviewBubbleTargets = reviewBubbleCacheHit
+            ? cachedReviewBubbleProjection!.targets
+            : reviewBubbleCandidateRestaurants.length > 0
+                ? selectVisibleMarkerReviewBubbleTargets(reviewBubbleCandidateRestaurants, {
+                    limit: isMobileOrTablet
+                        ? VISIBLE_MARKER_REVIEW_BUBBLE_MOBILE_LIMIT
+                        : VISIBLE_MARKER_REVIEW_BUBBLE_DESKTOP_LIMIT,
+                    seed: reviewBubbleSeed,
+                })
+                : [];
+        const nextReviewBubbleTargetSignature = reviewBubbleCacheHit
+            ? cachedReviewBubbleProjection!.targetSignature
+            : buildVisibleMarkerReviewBubbleTargetSignature(nextReviewBubbleTargets);
+        if (reviewBubbleSeed && !reviewBubbleCacheHit) {
+            reviewBubbleProjectionCacheRef.current = {
+                seed: reviewBubbleSeed,
+                idSignature: reviewBubbleIdSignature,
+                restaurants: reviewBubbleCandidateRestaurants,
+                targets: nextReviewBubbleTargets,
+                targetSignature: nextReviewBubbleTargetSignature,
+            };
+        }
         if (visibleMarkerReviewBubbleTargetSignatureRef.current !== nextReviewBubbleTargetSignature) {
             visibleMarkerReviewBubbleTargetSignatureRef.current = nextReviewBubbleTargetSignature;
             setVisibleMarkerReviewBubbleTargets(nextReviewBubbleTargets);
@@ -2391,16 +2525,36 @@ const NaverMapView = memo(({
         const activeVisibleMarkerReviewBubbles = isContextualPayloadEligible && !selectedRestaurant
             ? visibleMarkerReviewBubbles
             : {};
-        onVisibleRestaurantsChange?.(swipeCandidates);
-        onContextualRestaurantsChange?.({
-            mode: 'domestic',
-            restaurants: isContextualPayloadEligible ? contextualRestaurants : [],
-            renderMode: contextualRenderMode,
-            zoom: currentZoom,
-            isEligible: isContextualPayloadEligible,
-            ineligibilityReason: contextualIneligibilityReason,
-            totalVisibleCount: contextualRestaurants.length,
-        });
+        const publishedLists = lastPublishedMapListsRef.current;
+        if (publishedLists.swipeCandidates !== swipeCandidates) {
+            publishedLists.swipeCandidates = swipeCandidates;
+            onVisibleRestaurantsChange?.(swipeCandidates);
+        }
+        const publishedContextualRestaurants = isContextualPayloadEligible
+            ? contextualRestaurants
+            : EMPTY_CONTEXTUAL_RESTAURANTS;
+        if (
+            publishedLists.contextualRestaurants !== publishedContextualRestaurants ||
+            publishedLists.zoom !== currentZoom ||
+            publishedLists.renderMode !== contextualRenderMode ||
+            publishedLists.isEligible !== isContextualPayloadEligible ||
+            publishedLists.ineligibilityReason !== contextualIneligibilityReason
+        ) {
+            publishedLists.contextualRestaurants = publishedContextualRestaurants;
+            publishedLists.zoom = currentZoom;
+            publishedLists.renderMode = contextualRenderMode;
+            publishedLists.isEligible = isContextualPayloadEligible;
+            publishedLists.ineligibilityReason = contextualIneligibilityReason;
+            onContextualRestaurantsChange?.({
+                mode: 'domestic',
+                restaurants: publishedContextualRestaurants,
+                renderMode: contextualRenderMode,
+                zoom: currentZoom,
+                isEligible: isContextualPayloadEligible,
+                ineligibilityReason: contextualIneligibilityReason,
+                totalVisibleCount: contextualRestaurants.length,
+            });
+        }
 
         const renderTargetIdsForSignature = buildRenderTargetIdsForSignature({
             activeSearchedRestaurant: markerVisibleActiveSearchedRestaurant,
@@ -2417,40 +2571,36 @@ const NaverMapView = memo(({
             seoulClustersToRender,
             seoulIndividualIds: shouldUseSeoulDistrictFiltered ? seoulIndividualIds : [],
         });
+        const signatureIds = expandedClusterRestaurantIds.length > 0 || hasVisibleMarkerReviewBubbles(activeVisibleMarkerReviewBubbles)
+            ? renderTargetIdsForSignature.slice()
+            : renderTargetIdsForSignature;
         expandedClusterRestaurantIds.forEach((restaurantId) => {
-            renderTargetIdsForSignature.push(`expanded-cluster-${restaurantId}`);
-        });
-        Object.values(activeVisibleMarkerReviewBubbles).forEach((bubble) => {
-            renderTargetIdsForSignature.push([
-                'review-bubble',
-                isMobileOrTablet ? 'mobile' : 'desktop',
-                buildVisibleMarkerReviewBubbleMapSignature({ [bubble.restaurantId]: bubble }),
-            ].join(':'));
+            signatureIds.push(`expanded-cluster-${restaurantId}`);
         });
+        for (const restaurantId in activeVisibleMarkerReviewBubbles) {
+            if (!Object.prototype.hasOwnProperty.call(activeVisibleMarkerReviewBubbles, restaurantId)) continue;
+            signatureIds.push(buildVisibleMarkerReviewBubbleRenderToken(
+                activeVisibleMarkerReviewBubbles[restaurantId],
+                isMobileOrTablet,
+            ));
+        }
 
         const nextMarkerRenderSignature = buildMarkerRenderSignature({
             zoom: currentZoom,
             bounds: extendedBounds,
-            displayRestaurantIds: renderTargetIdsForSignature,
+            displayRestaurantIds: signatureIds,
             selectedRestaurantId: selectedRestaurant?.id || null,
             searchedRestaurantId: markerVisibleActiveSearchedRestaurant?.id || null,
             isClusterMode: nextIsClusterMode,
             isRegionalClusterMode: nextIsRegionalClusterMode,
             isSeoulDistrictMode: nextIsSeoulDistrictMode,
-            markerKindEntries: displayRestaurants.map((restaurant) => ({
-                id: restaurant.id,
-                kind: resolveRestaurantMarkerKind(restaurant),
-                assetVersion: RESTAURANT_MARKER_ASSET_VERSION,
-            })),
-            markerLayerVersion: `${RESTAURANT_MARKER_ASSET_VERSION}:${markerKindSignature}`,
+            markerLayerVersion: composeMarkerLayerVersion(markerKindSignature),
             showUserSubmittedMarkers,
         });
 
         const previousMarkerRenderSignature = markerRenderSignatureRef.current;
         if (previousMarkerRenderSignature && shouldSkipMarkerUpdate(previousMarkerRenderSignature, nextMarkerRenderSignature)) {
-            const hasRenderedMarkerDom =
-                document.querySelector('.cluster-marker-container') !== null ||
-                document.querySelector('[data-testid="marker"]') !== null;
+            const hasRenderedMarkerDom = markerPool.getStats().activeCount > 0;
             const skippedEmptyThemePlan = resolveSkippedEmptyThemeMarkerPlan({
                 displayRestaurantCount: displayRestaurants.length,
                 hasRenderedMarkerDom,
@@ -2474,26 +2624,49 @@ const NaverMapView = memo(({
             uniqueKey: string | number,
             onClick: () => void
         ) => {
-            const renderPlan = buildNaverClusterAnimationIconPlan({
-                categories,
-                count,
-                getCurrentIndex: (hash, categoryCount) => {
-                    clusterAnimationManager.register(hash);
-                    return clusterAnimationManager.getCurrentIndex(hash, categoryCount);
-                },
-                position,
-                uniqueKey,
-            });
+            const renderPlan = mapOptimization.clusterAnimationEnabled
+                ? buildNaverClusterAnimationIconPlan({
+                    categories,
+                    count,
+                    getCurrentIndex: (hash, categoryCount) => {
+                        clusterAnimationManager.register(hash);
+                        return clusterAnimationManager.getCurrentIndex(hash, categoryCount);
+                    },
+                    position,
+                    uniqueKey,
+                })
+                : buildNaverClusterMarkerRenderPlan({
+                    categories,
+                    count,
+                    currentIndex: 0,
+                    position,
+                });
 
             markerPool.acquire(
                 markerId,
-                new naver.maps.LatLng(renderPlan.position.lat, renderPlan.position.lng),
-                { content: renderPlan.content, anchor: new naver.maps.Point(renderPlan.anchor.x, renderPlan.anchor.y) },
+                reuseMarkerLatLng(
+                    markerPool.get(markerId)?.getPosition(),
+                    renderPlan.position.lat,
+                    renderPlan.position.lng,
+                    () => new naver.maps.LatLng(renderPlan.position.lat, renderPlan.position.lng),
+                ),
+                { content: renderPlan.content, anchor: anchorForMarker(markerId, renderPlan.anchor.x, renderPlan.anchor.y) },
                 map,
                 onClick
             );
         };
+        const anchorForMarker = (id: string, x: number, y: number) => reuseMarkerAnchor(
+            markerPool.get(id)?.getIcon()?.anchor ?? null,
+            x,
+            y,
+            () => new naver.maps.Point(x, y),
+        );
         const createIndividualMarkerPosition = (restaurant: { id: string }, lat: number, lng: number) => {
+            const offset = overlappingMarkerOffsets.get(restaurant.id);
+            const current = markerPool.get(restaurant.id)?.getPosition();
+            if (!offset || offset.count <= 1) {
+                return reuseMarkerLatLng(current, lat, lng, () => new naver.maps.LatLng(lat, lng));
+            }
             const basePosition = new naver.maps.LatLng(lat, lng);
             return resolveNaverOverlappingMarkerPosition({
                 basePosition,
@@ -2527,7 +2700,7 @@ const NaverMapView = memo(({
                 markerPool.acquire(
                     restaurant.id,
                     createIndividualMarkerPosition(restaurant, restaurant.lat, restaurant.lng),
-                    { content: markerContent, anchor: new naver.maps.Point(visual.anchor.x, visual.anchor.y) },
+                    { content: markerContent, anchor: anchorForMarker(restaurant.id, visual.anchor.x, visual.anchor.y) },
                     map,
                     () => handleMarkerRestaurantSelection(restaurant)
                 );
@@ -2666,7 +2839,7 @@ const NaverMapView = memo(({
                     markerPool.acquire(
                         restaurant.id,
                         createIndividualMarkerPosition(restaurant, restaurant.lat, restaurant.lng),
-                        { content: markerContent, anchor: new naver.maps.Point(visual.anchor.x, visual.anchor.y) },
+                        { content: markerContent, anchor: anchorForMarker(restaurant.id, visual.anchor.x, visual.anchor.y) },
                         map,
                         () => handleMarkerRestaurantSelection(restaurant)
                     );
@@ -2693,19 +2866,24 @@ const NaverMapView = memo(({
 
                         if (isCluster(feature)) {
                             const clusterId = feature.properties.cluster_id!;
-                            let clusterRestaurantIds: string[] = [];
-                            try {
-                                clusterRestaurantIds = expandCluster(clusterIndexRef.current!, clusterId);
-                            } catch {
-                                clusterRestaurantIds = [];
-                            }
-                            if (shouldSkipExpandedClusterMarker(clusterRestaurantIds)) {
-                                return;
-                            }
                             const markerId = `cluster-${clusterId}`;
                             activeIds.add(markerId);
 
-                            clusterAnimationManager.register(clusterId);
+                            if (expandedClusterRestaurantIds.length > 0) {
+                                let clusterRestaurantIds: string[] = [];
+                                try {
+                                    clusterRestaurantIds = expandCluster(clusterIndexRef.current!, clusterId);
+                                } catch {
+                                    clusterRestaurantIds = [];
+                                }
+                                if (shouldSkipExpandedClusterMarker(clusterRestaurantIds)) {
+                                    return;
+                                }
+                            }
+
+                            if (mapOptimization.clusterAnimationEnabled) {
+                                clusterAnimationManager.register(clusterId);
+                            }
 
                             let categories: string[];
                             try {
@@ -2763,12 +2941,17 @@ const NaverMapView = memo(({
                             const normalizedRestaurant = normalizeNaverMarkerCoordinates(restaurant);
                             const position = normalizedRestaurant
                                 ? createIndividualMarkerPosition(normalizedRestaurant, normalizedRestaurant.lat, normalizedRestaurant.lng)
-                                : new naver.maps.LatLng(lat, lng);
+                                : reuseMarkerLatLng(
+                                    markerPool.get(restaurantId)?.getPosition(),
+                                    lat,
+                                    lng,
+                                    () => new naver.maps.LatLng(lat, lng),
+                                );
 
                             markerPool.acquire(
                                 restaurantId,
                                 position,
-                                { content: markerContent, anchor: new naver.maps.Point(visual.anchor.x, visual.anchor.y) },
+                                { content: markerContent, anchor: anchorForMarker(restaurantId, visual.anchor.x, visual.anchor.y) },
                                 map,
                                 () => {
                                     // ... existing click logic ...
@@ -2785,7 +2968,7 @@ const NaverMapView = memo(({
                 // 참고: 서울 자치구 모드가 활성화된 경우, 서울 내의 개별 마커를 숨겨야 할까요?
                 // 아마도 네, 클러스터링을 강제하기 위해서입니다.
 
-                getRestaurantsWithRenderableCoordinates(restaurantsForMarkerRender).forEach(restaurant => {
+                contextualRestaurants.forEach(restaurant => {
                     // [Logic] Seoul District Mode가 켜져있다면, 서울 내부의 개별 마커는 숨김 (District Cluster가 대신함)
                     if (shouldHideInSeoulDistrictMode({
                         address: restaurant.road_address || restaurant.jibun_address || '',
@@ -2808,7 +2991,7 @@ const NaverMapView = memo(({
                     markerPool.acquire(
                         restaurant.id,
                         createIndividualMarkerPosition(restaurant, restaurant.lat, restaurant.lng),
-                        { content: markerContent, anchor: new naver.maps.Point(visual.anchor.x, visual.anchor.y) },
+                        { content: markerContent, anchor: anchorForMarker(restaurant.id, visual.anchor.x, visual.anchor.y) },
                         map,
                         () => handleMarkerRestaurantSelection(restaurant)
                     );
@@ -2826,7 +3009,9 @@ const NaverMapView = memo(({
                 markerRenderSignatureRef.current = nextMarkerRenderSignature;
                 resetMarkerRenderRetry();
             }
-            scheduleVisibleMarkerReviewBubbleClamp();
+            if (hasVisibleMarkerReviewBubbles(activeVisibleMarkerReviewBubbles)) {
+                scheduleVisibleMarkerReviewBubbleClamp();
+            }
 
             // [PERFORMANCE] 렌더링 종료 시간 측정 및 로그 (개발 모드)
             perfMonitor.endMeasure('RenderMarkers');
@@ -2838,14 +3023,46 @@ const NaverMapView = memo(({
             }
         }
 
-    }, [clusters, regionalClusters, seoulDistrictClusters, seoulDistrictClustersFiltered, seoulIndividualIds, activeSearchedRestaurant, displayRestaurants, displayRestaurantIds, expandedClusterRestaurantIds, markerKindSignature, markerRenderRetryTick, markerVisibleActiveSearchedRestaurant, markerVisibleSelectedRestaurant, restaurantById, mergedRestaurantById, restaurantsForSwipe, selectedRegion, selectedRestaurant, showUserSubmittedMarkers, isClusterMode, isRegionalClusterMode, isSeoulDistrictMode, isMapInitialized, isMobileOrTablet, visibleMarkerReviewBubbles, activateNoncriticalMapEffects, fitIslandClusterViewport, jumpWithPanelOffset, onMarkerClick, onRestaurantSelect, onVisibleRestaurantsChange, onContextualRestaurantsChange, handleMarkerRestaurantSelection, resetMarkerRenderRetry, scheduleMarkerRenderRetry, resolveMarkerRestaurant]);
+    }, [clusters, regionalClusters, seoulDistrictClusters, seoulDistrictClustersFiltered, seoulIndividualIds, activeSearchedRestaurant, displayRestaurants, displayRestaurantIds, expandedClusterRestaurantIds, markerKindSignature, markerRenderRetryTick, markerVisibleActiveSearchedRestaurant, markerVisibleSelectedRestaurant, restaurantById, mergedRestaurantById, restaurantsForSwipe, selectedRegion, selectedRestaurant, showUserSubmittedMarkers, isClusterMode, isRegionalClusterMode, isSeoulDistrictMode, isMapInitialized, isMobileOrTablet, visibleMarkerReviewBubbles, activateNoncriticalMapEffects, fitIslandClusterViewport, jumpWithPanelOffset, onMarkerClick, onRestaurantSelect, onVisibleRestaurantsChange, onContextualRestaurantsChange, handleMarkerRestaurantSelection, resetMarkerRenderRetry, scheduleMarkerRenderRetry, resolveMarkerRestaurant, mapOptimization.clusterAnimationEnabled]);
 
     // [Animation] 카테고리 이모지 순환 업데이트
     useEffect(() => {
+        if (!mapOptimization.clusterAnimationEnabled) return;
         if (!isClusterMode && !isRegionalClusterMode && !isSeoulDistrictMode) return;
 
         // 애니메이션 업데이트 시 클러스터 마커 HTML 갱신
         const cleanup = clusterAnimationManager.addListener(() => {
+            const applyClusterIcon = (
+                marker: {
+                    getElement?: () => HTMLElement | null;
+                    getIcon: () => { content?: unknown; anchor?: { x?: number; y?: number } | null } | null;
+                    setIcon: (icon: unknown) => void;
+                },
+                iconPlan: { content: string; anchor: { x: number; y: number } },
+            ) => {
+                const element = marker.getElement?.() ?? null;
+                const source = element?.querySelector("picture source");
+                const nextSource = iconPlan.content.match(/srcset="([^"]+)"/)?.[1];
+                if (source && nextSource) {
+                    if (source.getAttribute("srcset") === nextSource) return;
+                    const applyLoadedIcon = () => {
+                        if (source.dataset.clusterIconPending !== nextSource) return;
+                        source.setAttribute("srcset", nextSource);
+                    };
+                    const preload = new Image();
+                    source.dataset.clusterIconPending = nextSource;
+                    preload.onload = applyLoadedIcon;
+                    preload.src = nextSource;
+                    if (preload.complete) applyLoadedIcon();
+                    return;
+                }
+                if (!shouldReplaceNaverMarkerIcon(marker.getIcon(), iconPlan)) return;
+                marker.setIcon({
+                    content: iconPlan.content,
+                    anchor: new window.naver.maps.Point(iconPlan.anchor.x, iconPlan.anchor.y),
+                });
+            };
+
             if (isRegionalClusterMode) {
                 // ... (기존 코드)
                 regionalClusters.forEach((cluster) => {
@@ -2862,10 +3079,7 @@ const NaverMapView = memo(({
                             uniqueKey: cluster.region,
                         });
 
-                        marker.setIcon({
-                            content: iconPlan.content,
-                            anchor: new window.naver.maps.Point(iconPlan.anchor.x, iconPlan.anchor.y),
-                        });
+                        applyClusterIcon(marker, iconPlan);
                     }
                 });
             }
@@ -2885,10 +3099,7 @@ const NaverMapView = memo(({
                             position: cluster.center,
                             uniqueKey: cluster.region,
                         });
-                        marker.setIcon({
-                            content: iconPlan.content,
-                            anchor: new window.naver.maps.Point(iconPlan.anchor.x, iconPlan.anchor.y),
-                        });
+                        applyClusterIcon(marker, iconPlan);
                     }
                 });
             }
@@ -2920,10 +3131,7 @@ const NaverMapView = memo(({
                                 uniqueKey: clusterId,
                             });
 
-                            marker.setIcon({
-                                content: iconPlan.content,
-                                anchor: new window.naver.maps.Point(iconPlan.anchor.x, iconPlan.anchor.y),
-                            });
+                            applyClusterIcon(marker, iconPlan);
                         }
                     }
                 });
@@ -2931,7 +3139,7 @@ const NaverMapView = memo(({
         });
 
         return cleanup;
-    }, [isClusterMode, isRegionalClusterMode, isSeoulDistrictMode, clusters, regionalClusters, seoulDistrictClusters]);
+    }, [mapOptimization.clusterAnimationEnabled, isClusterMode, isRegionalClusterMode, isSeoulDistrictMode, clusters, regionalClusters, seoulDistrictClusters]);
 
     // [OPTIMIZATION] 선택 상태 변경에 따른 마커 스타일 업데이트 (O(N) → O(1) 최적화)
     // 이전 선택 마커 ID 추적
@@ -2971,14 +3179,21 @@ const NaverMapView = memo(({
                     markerPool.update(restaurantId, {
                         icon: {
                             content: markerContent,
-                            anchor: new naver.maps.Point(visual.anchor.x, visual.anchor.y)
+                            anchor: reuseMarkerAnchor(
+                                marker.getIcon()?.anchor ?? null,
+                                visual.anchor.x,
+                                visual.anchor.y,
+                                () => new naver.maps.Point(visual.anchor.x, visual.anchor.y),
+                            )
                         },
                         zIndex: visual.zIndex
                     });
                 }
             }
         });
-        scheduleVisibleMarkerReviewBubbleClamp();
+        if (!selectedRestaurant && hasVisibleMarkerReviewBubbles(visibleMarkerReviewBubbles)) {
+            scheduleVisibleMarkerReviewBubbleClamp();
+        }
 
         // ref 업데이트
         prevSelectedMarkerIdRef.current = styleUpdatePlan.nextPreviousSelectedId;
@@ -3171,10 +3386,56 @@ const NaverMapView = memo(({
                         new naver.maps.Point(wheelViewportPlan.mouseOffset.x, wheelViewportPlan.mouseOffset.y)
                     );
 
-                    // 보정 중일 때는 후속 휠 입력을 큐에 보관하고 idle 이후 순차 처리
+                    // 보정 중일 때는 후속 휠 입력을 큐에 보관하고 중심 보정 이후 순차 처리
                     isAnchorAdjusting = true;
 
-                    // 줌 반영 후( idle ) 투영이 갱신된 시점에 중심 보정
+                    const applyAnchorCorrection = (updatedProjection: NonNullable<ReturnType<typeof map.getProjection>>) => {
+                        const currentCenter = map.getCenter();
+                        const anchorAdjustmentPlan = buildNaverWheelAnchorAdjustmentPlan({
+                            anchorCoordBeforeZoom: { lat: beforeCoord.lat(), lng: beforeCoord.lng() },
+                            centerOffsetAfterZoom: updatedProjection.fromCoordToOffset(currentCenter),
+                            currentCenter: { lat: currentCenter.lat(), lng: currentCenter.lng() },
+                            mousePoint: wheelViewportPlan.mousePoint,
+                            viewportCenterPoint: wheelViewportPlan.viewportCenterPoint,
+                        });
+                        const adjustedCenter = calculateHoverAnchoredCenter({
+                            projection: buildNaverWheelProjectionAdapter({
+                                createLatLng: (lat, lng) => new naver.maps.LatLng(lat, lng),
+                                createPoint: (x, y) => new naver.maps.Point(x, y),
+                                projection: updatedProjection,
+                            }),
+                            ...anchorAdjustmentPlan,
+                        });
+
+                        map.setCenter(new naver.maps.LatLng(adjustedCenter.lat, adjustedCenter.lng));
+                    };
+
+                    const finishAnchorCorrection = () => {
+                        const postAdjustPlan = resolveNaverWheelPostAdjustPlan({
+                            currentZoom: map.getZoom(),
+                            hasQueuedWheelInput: queuedWheelInput !== null,
+                        });
+                        isAnchorAdjusting = postAdjustPlan.nextIsAnchorAdjusting;
+                        targetZoomLevel = postAdjustPlan.nextTargetZoomLevel;
+                        if (postAdjustPlan.shouldScheduleQueuedInput) {
+                            window.requestAnimationFrame(runQueuedWheelInput);
+                        }
+                    };
+
+                    const offsetBeforeZoom = projection.fromCoordToOffset(beforeCoord);
+                    map.setZoom(nextZoom, false);
+                    const updatedProjection = map.getProjection();
+                    const offsetAfterZoom = updatedProjection?.fromCoordToOffset(beforeCoord) ?? null;
+                    if (updatedProjection && hasNaverWheelProjectionUpdated(offsetBeforeZoom, offsetAfterZoom)) {
+                        try {
+                            applyAnchorCorrection(updatedProjection);
+                        } finally {
+                            finishAnchorCorrection();
+                        }
+                        return;
+                    }
+
+                    // 투영이 아직 이전 줌이면 idle 이후에 한 번만 보정한다.
                     pendingAnchorAdjustListener = naver.maps.Event.addListener(map, 'idle', () => {
                         pendingAnchorAdjustListener = clearNaverPendingAnchorAdjustListener({
                             pendingAnchorAdjustListener,
@@ -3182,42 +3443,13 @@ const NaverMapView = memo(({
                         }).nextPendingAnchorAdjustListener;
 
                         try {
-                            const updatedProjection = map.getProjection();
-                            if (!updatedProjection) return;
-
-                            const currentCenter = map.getCenter();
-                            const anchorAdjustmentPlan = buildNaverWheelAnchorAdjustmentPlan({
-                                anchorCoordBeforeZoom: { lat: beforeCoord.lat(), lng: beforeCoord.lng() },
-                                centerOffsetAfterZoom: updatedProjection.fromCoordToOffset(currentCenter),
-                                currentCenter: { lat: currentCenter.lat(), lng: currentCenter.lng() },
-                                mousePoint: wheelViewportPlan.mousePoint,
-                                viewportCenterPoint: wheelViewportPlan.viewportCenterPoint,
-                            });
-                            const adjustedCenter = calculateHoverAnchoredCenter({
-                                projection: buildNaverWheelProjectionAdapter({
-                                    createLatLng: (lat, lng) => new naver.maps.LatLng(lat, lng),
-                                    createPoint: (x, y) => new naver.maps.Point(x, y),
-                                    projection: updatedProjection,
-                                }),
-                                ...anchorAdjustmentPlan,
-                            });
-
-                            map.setCenter(new naver.maps.LatLng(adjustedCenter.lat, adjustedCenter.lng));
+                            const idleProjection = map.getProjection();
+                            if (!idleProjection) return;
+                            applyAnchorCorrection(idleProjection);
                         } finally {
-                            const postAdjustPlan = resolveNaverWheelPostAdjustPlan({
-                                currentZoom: map.getZoom(),
-                                hasQueuedWheelInput: queuedWheelInput !== null,
-                            });
-                            isAnchorAdjusting = postAdjustPlan.nextIsAnchorAdjusting;
-                            targetZoomLevel = postAdjustPlan.nextTargetZoomLevel;
-                            if (postAdjustPlan.shouldScheduleQueuedInput) {
-                                window.requestAnimationFrame(runQueuedWheelInput);
-                            }
+                            finishAnchorCorrection();
                         }
                     });
-
-                    // 줌 적용 (보정은 idle 리스너에서 수행)
-                    map.setZoom(nextZoom, false);
                 } catch (error) {
                     console.error("휠 줌 포인터 고정 처리 실패:");
                     map.setZoom(nextZoom, true);
diff --git a/apps/web/components/map/OverseasMap.tsx b/apps/web/components/map/OverseasMap.tsx
index cd2d0483ad..44ee2dc4cc 100644
--- a/apps/web/components/map/OverseasMap.tsx
+++ b/apps/web/components/map/OverseasMap.tsx
@@ -169,10 +169,9 @@ const OverseasMap: React.FC<OverseasMapProps> = ({
 
         if (shouldFocusDeviceLocation(lastFocusedDeviceLocationRequestRef.current, deviceLocation)) {
             lastFocusedDeviceLocationRequestRef.current = deviceLocation.focusRequestId;
-            currentMap.easeTo({
+            currentMap.jumpTo({
                 center: [deviceLocation.lng, deviceLocation.lat],
                 zoom: Math.max(currentZoom, 14),
-                duration: 550,
             });
         }
     }, [deviceLocation, isMapLoaded]);
@@ -333,7 +332,6 @@ const OverseasMap: React.FC<OverseasMapProps> = ({
                 el.style.width = `32px`;
                 el.style.height = `32px`;
                 el.style.cursor = 'pointer';
-                el.style.willChange = 'transform';
                 el.innerHTML = buildOverseasMarkerHtml({
                     imagePath,
                     name: restaurant.name,
diff --git a/apps/web/components/map/map-overlay-notice.tsx b/apps/web/components/map/map-overlay-notice.tsx
index 423fcee723..80aeee95c6 100644
--- a/apps/web/components/map/map-overlay-notice.tsx
+++ b/apps/web/components/map/map-overlay-notice.tsx
@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils';
 export const MAP_OVERLAY_NOTICE_SURFACE_CLASS_NAME =
     '!border !border-border !bg-card/95 !text-foreground !rounded-2xl !px-3 !py-2';
 export const MAP_OVERLAY_NOTICE_CLASS_NAME =
-    `z-10 inline-flex min-h-8 w-fit max-w-[min(26rem,calc(100vw-2rem))] items-center justify-center ${MAP_OVERLAY_NOTICE_SURFACE_CLASS_NAME} !text-sm !font-semibold !leading-4 shadow-sm backdrop-blur-sm sm:!rounded-full`;
+    `z-10 inline-flex min-h-8 w-fit max-w-[min(26rem,calc(100vw-2rem))] items-center justify-center ${MAP_OVERLAY_NOTICE_SURFACE_CLASS_NAME} !text-sm !font-semibold !leading-4 shadow-sm sm:!rounded-full`;
 export const MAP_OVERLAY_NOTICE_SINGLE_LINE_CLASS_NAME = 'map-overlay-notice-single-line';
 export const MAP_OVERLAY_TOAST_CLASS_NAME = MAP_OVERLAY_NOTICE_CLASS_NAME;
 export const MAP_OVERLAY_STATUS_DOT_CLASS_NAME = 'h-2 w-2 rounded-full bg-primary/80';
diff --git a/apps/web/components/map/map-view-overlay-indicators.tsx b/apps/web/components/map/map-view-overlay-indicators.tsx
index 9215c94331..6b67f202b0 100644
--- a/apps/web/components/map/map-view-overlay-indicators.tsx
+++ b/apps/web/components/map/map-view-overlay-indicators.tsx
@@ -10,7 +10,7 @@ export function MapViewLoadingIndicator() {
 
 export function MapViewRestaurantCountBadge({ count }: { count: number }) {
     return (
-        <MapOverlayNotice className="absolute top-4 left-1/2 -translate-x-1/2 animate-in fade-in zoom-in duration-300 motion-reduce:animate-none">
+        <MapOverlayNotice className="absolute top-4 left-1/2 -translate-x-1/2">
             {count}개의 맛집 발견
         </MapOverlayNotice>
     );
diff --git a/apps/web/components/map/map-view-sidepanels.tsx b/apps/web/components/map/map-view-sidepanels.tsx
index eccd8c2cf6..c74cbac3e0 100644
--- a/apps/web/components/map/map-view-sidepanels.tsx
+++ b/apps/web/components/map/map-view-sidepanels.tsx
@@ -11,10 +11,10 @@ function MapViewDetailPanelSkeleton() {
             className="flex h-full flex-col gap-3 bg-background p-4"
             data-map-detail-panel-skeleton="true"
         >
-            <div className="h-48 rounded-2xl bg-muted animate-pulse motion-reduce:animate-none" />
-            <div className="h-5 w-2/3 rounded bg-muted animate-pulse motion-reduce:animate-none" />
-            <div className="h-3 w-full rounded bg-muted animate-pulse motion-reduce:animate-none" />
-            <div className="h-3 w-1/2 rounded bg-muted animate-pulse motion-reduce:animate-none" />
+            <div className="h-48 rounded-2xl bg-muted" />
+            <div className="h-5 w-2/3 rounded bg-muted" />
+            <div className="h-3 w-full rounded bg-muted" />
+            <div className="h-3 w-1/2 rounded bg-muted" />
         </div>
     );
 }
@@ -68,7 +68,7 @@ export function MapViewDetailPanelShell({
 }) {
     return (
         <div
-            className={`h-full relative shadow-sm bg-background transition-all duration-300 ease-in-out ${isPanelOpen ? 'w-[min(400px,calc(100vw-1rem))]' : 'w-0'} ${activePanel === 'detail' ? 'z-[50]' : 'z-20'} hover:z-[60]`}
+            className={`h-full relative shadow-sm bg-background ${isPanelOpen ? 'w-[min(400px,calc(100vw-1rem))]' : 'w-0'} ${activePanel === 'detail' ? 'z-[50]' : 'z-20'} hover:z-[60]`}
             style={{ overflow: 'visible' }}
             onMouseDownCapture={onMouseDownCapture}
             onFocusCapture={onFocusCapture}
diff --git a/apps/web/components/map/naver-map-sidepanels.tsx b/apps/web/components/map/naver-map-sidepanels.tsx
index b4fb2a6001..289f4f857a 100644
--- a/apps/web/components/map/naver-map-sidepanels.tsx
+++ b/apps/web/components/map/naver-map-sidepanels.tsx
@@ -44,10 +44,10 @@ function NaverMapDetailPanelSkeleton() {
             className="flex h-full flex-col gap-3 bg-background p-4"
             data-map-detail-panel-skeleton="true"
         >
-            <div className="h-48 rounded-2xl bg-muted animate-pulse motion-reduce:animate-none" />
-            <div className="h-5 w-2/3 rounded bg-muted animate-pulse motion-reduce:animate-none" />
-            <div className="h-3 w-full rounded bg-muted animate-pulse motion-reduce:animate-none" />
-            <div className="h-3 w-1/2 rounded bg-muted animate-pulse motion-reduce:animate-none" />
+            <div className="h-48 rounded-2xl bg-muted" />
+            <div className="h-5 w-2/3 rounded bg-muted" />
+            <div className="h-3 w-full rounded bg-muted" />
+            <div className="h-3 w-1/2 rounded bg-muted" />
         </div>
     );
 }
@@ -81,8 +81,8 @@ export function NaverMapDetailPanelShell({
 
     return (
         <div
-            className={`h-full relative shadow-sm bg-background transition-[width] duration-300 ${internalPanelOpen ? 'w-[min(400px,calc(100vw-1rem))]' : 'w-0'} ${activePanel === 'detail' ? 'z-[50]' : 'z-20'} hover:z-[60]`}
-            style={{ overflow: 'visible', transitionTimingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)' }}
+            className={`h-full relative shadow-sm bg-background ${internalPanelOpen ? 'w-[min(400px,calc(100vw-1rem))]' : 'w-0'} ${activePanel === 'detail' ? 'z-[50]' : 'z-20'} hover:z-[60]`}
+            style={{ overflow: 'visible' }}
             onMouseDownCapture={onMouseDownCapture}
             onFocusCapture={onFocusCapture}
         >
diff --git a/apps/web/components/modals/EditRestaurantModal.tsx b/apps/web/components/modals/EditRestaurantModal.tsx
index 956323bc91..96e1d5dd56 100644
--- a/apps/web/components/modals/EditRestaurantModal.tsx
+++ b/apps/web/components/modals/EditRestaurantModal.tsx
@@ -867,7 +867,7 @@ export const EditRestaurantModal = memo(function EditRestaurantModal({ isOpen, o
         return (
             <section
                 ref={desktopEditPanelRef}
-                className="fixed bottom-24 right-6 top-6 z-[90] w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl backdrop-blur-sm will-change-transform"
+                className="fixed bottom-24 right-6 top-6 z-[90] w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl"
                 style={{ transform: `translate3d(${desktopEditPanelPosition.x}px, ${desktopEditPanelPosition.y}px, 0)` }}
                 data-desktop-map-edit-panel="true"
                 role="dialog"
diff --git a/apps/web/components/modals/RestaurantSubmissionModal.tsx b/apps/web/components/modals/RestaurantSubmissionModal.tsx
index e944085c59..083d98023a 100644
--- a/apps/web/components/modals/RestaurantSubmissionModal.tsx
+++ b/apps/web/components/modals/RestaurantSubmissionModal.tsx
@@ -940,7 +940,7 @@ export default function RestaurantSubmissionModal({
         return (
             <section
                 ref={desktopSubmissionPanelRef}
-                className="fixed bottom-24 right-6 top-6 z-[85] w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl backdrop-blur-sm will-change-transform"
+                className="fixed bottom-24 right-6 top-6 z-[85] w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl"
                 style={{ transform: `translate3d(${desktopSubmissionPanelPosition.x}px, ${desktopSubmissionPanelPosition.y}px, 0)` }}
                 data-desktop-map-submission-panel="true"
                 aria-labelledby={mobileTitleId}
diff --git a/apps/web/components/mypage/MyPageSidebar.tsx b/apps/web/components/mypage/MyPageSidebar.tsx
index 5250ebc281..7817489b87 100644
--- a/apps/web/components/mypage/MyPageSidebar.tsx
+++ b/apps/web/components/mypage/MyPageSidebar.tsx
@@ -48,7 +48,7 @@ function SidebarItem({ href, icon, label, isActive }: SidebarItemProps) {
       href={href}
       aria-current={isActive ? "page" : undefined}
       className={cn(
-        "flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+        "flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
         isActive
           ? "bg-primary/10 text-primary"
           : "text-muted-foreground hover:bg-muted hover:text-foreground",
@@ -266,7 +266,7 @@ export function MyPageSidebar() {
           <label
             htmlFor="mypage-sidebar-avatar-upload"
             aria-label="프로필 사진 변경"
-            className="relative flex h-20 w-20 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-border shadow-sm transition-all group-hover:ring-2 group-hover:ring-primary/30"
+            className="relative flex h-20 w-20 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-border shadow-sm group-hover:ring-2 group-hover:ring-primary/30"
             style={{
               width: "5rem",
               height: "5rem",
@@ -294,7 +294,7 @@ export function MyPageSidebar() {
             )}
 
             <span
-              className="absolute inset-0 flex items-center justify-center rounded-full bg-black/60 opacity-0 transition-opacity group-hover:opacity-100 active:opacity-100"
+              className="absolute inset-0 flex items-center justify-center rounded-full bg-black/60 opacity-0 group-hover:opacity-100 active:opacity-100"
               style={{ borderRadius: "9999px" }}
             >
               {avatarUploading ? (
@@ -320,7 +320,7 @@ export function MyPageSidebar() {
                 e.preventDefault();
                 handleAvatarDelete();
               }}
-              className="absolute -right-1 -top-1 z-20 rounded-full bg-destructive p-1 text-white opacity-0 transition-opacity hover:bg-destructive/90 group-hover:opacity-100"
+              className="absolute -right-1 -top-1 z-20 rounded-full bg-destructive p-1 text-white opacity-0 hover:bg-destructive/90 group-hover:opacity-100"
               title="사진 삭제"
               aria-label="프로필 사진 삭제"
             >
@@ -424,19 +424,19 @@ export function MyPageSidebar() {
         </div>
 
         <div className="grid w-full grid-cols-3 gap-2 pt-2">
-          <div className="flex flex-col items-center rounded-lg bg-muted/40 p-2 transition-colors hover:bg-muted/60">
+          <div className="flex flex-col items-center rounded-lg bg-muted/40 p-2 hover:bg-muted/60">
             <span className="mb-1 text-xs text-muted-foreground">도장</span>
             <span className="text-sm font-bold">
               {profile?.verifiedReviewCount ?? 0}
             </span>
           </div>
-          <div className="flex flex-col items-center rounded-lg bg-muted/40 p-2 transition-colors hover:bg-muted/60">
+          <div className="flex flex-col items-center rounded-lg bg-muted/40 p-2 hover:bg-muted/60">
             <span className="mb-1 text-xs text-muted-foreground">리뷰</span>
             <span className="text-sm font-bold">
               {profile?.reviewCount ?? 0}
             </span>
           </div>
-          <div className="flex flex-col items-center rounded-lg bg-muted/40 p-2 transition-colors hover:bg-muted/60">
+          <div className="flex flex-col items-center rounded-lg bg-muted/40 p-2 hover:bg-muted/60">
             <span className="mb-1 text-xs text-muted-foreground">좋아요</span>
             <span className="text-sm font-bold">
               {profile?.totalLikes ?? 0}
diff --git a/apps/web/components/mypage/MyPageTopActions.tsx b/apps/web/components/mypage/MyPageTopActions.tsx
index 8424c3fdf3..0113551785 100644
--- a/apps/web/components/mypage/MyPageTopActions.tsx
+++ b/apps/web/components/mypage/MyPageTopActions.tsx
@@ -31,7 +31,7 @@ import { siteConfig } from "@/lib/site-config";
 import { resolveProfileAvatarUrl } from "@/lib/profile-avatar-url";
 
 const myPageTopActionButtonClass =
-  "h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-lg backdrop-blur-sm transition-colors hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
+  "h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-lg hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
 const myPageUserMenuItemClass =
   "cursor-pointer rounded-xl px-3 py-2.5 text-sm font-medium text-foreground whitespace-nowrap focus:bg-accent focus:text-foreground";
 const myPageUserAvatarClass =
diff --git a/apps/web/components/overlay-pages/LeaderboardOverlay.tsx b/apps/web/components/overlay-pages/LeaderboardOverlay.tsx
index 8e6c52dcbc..5e3e86fbb2 100644
--- a/apps/web/components/overlay-pages/LeaderboardOverlay.tsx
+++ b/apps/web/components/overlay-pages/LeaderboardOverlay.tsx
@@ -1,8 +1,9 @@
 'use client';
 
 import { useEffect, useRef, useState, useMemo, useCallback, type CSSProperties } from 'react';
+import { MapPanelHeader, mapPanelIconButtonClass } from "@/components/home/map-panel-chrome";
 import { LeaderboardList } from "@/components/leaderboard/LeaderboardList";
-import { Trophy, Info, X } from 'lucide-react';
+import { Info } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -90,16 +91,17 @@ export default function LeaderboardOverlay({ onClose, onOpenUserProfile }: Leade
                 className="h-full overflow-y-auto overflow-x-hidden overscroll-contain"
             >
                 {/* 헤더 - 모바일/태블릿 페이지와 동일 스타일 */}
-                <div className="border-b border-border bg-background px-3 py-3 sm:px-5 sm:py-4">
-                    <div className="flex flex-wrap items-start justify-between gap-3">
-                        <div className="min-w-0 flex-1 basis-[min(11rem,100%)]">
-                            <div className="flex min-w-0 items-center gap-2">
-                                <h1 className="flex min-w-0 items-center gap-1.5 text-[1.0625rem] font-bold leading-tight text-primary text-balance xs:text-xl sm:gap-2 sm:text-2xl">
-                                    <Trophy className="h-5 w-5 shrink-0 text-primary sm:h-6 sm:w-6" aria-hidden="true" />
-                                    <span className="min-w-0 truncate">쯔동여지도 랭킹</span>
+                <MapPanelHeader
+                    title="랭킹"
+                    titleAs="h1"
+                    description="리뷰를 남기고 순위를 올려 보세요"
+                    closeLabel="랭킹 패널 닫기"
+                    onClose={onClose}
+                    actions={(
+                        <>
                                     <Popover>
                                         <PopoverTrigger asChild>
-                                            <Button variant="ghost" size="icon" className="hidden xs:inline-flex h-6 w-6 rounded-full hover:bg-muted shrink-0" title="랭킹 및 티어 산정 기준 보기" aria-label="랭킹 및 티어 산정 기준 보기">
+                                            <Button variant="ghost" size="icon" className={mapPanelIconButtonClass} title="랭킹 및 티어 산정 기준 보기" aria-label="랭킹 및 티어 산정 기준 보기">
                                                 <Info className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
                                             </Button>
                                         </PopoverTrigger>
@@ -125,28 +127,15 @@ export default function LeaderboardOverlay({ onClose, onOpenUserProfile }: Leade
                                             </div>
                                         </PopoverContent>
                                     </Popover>
-                                </h1>
-                            </div>
-                            <p className="mt-1 max-w-full text-pretty text-xs leading-5 text-muted-foreground xs:text-sm">
-                                맛집 리뷰를 작성하고 랭킹을 올려보세요!
-                            </p>
-                        </div>
-                        <div className="ml-auto flex shrink-0 items-center gap-1.5 sm:gap-2">
                             <Tabs value={period} onValueChange={(v) => setPeriod(v as 'all' | 'monthly')} className="w-auto">
                                 <TabsList className="h-8">
-                                    <TabsTrigger value="all" className="text-xs px-2 sm:px-3">전체</TabsTrigger>
-                                    <TabsTrigger value="monthly" className="text-xs px-2 sm:px-3">월간</TabsTrigger>
+                                    <TabsTrigger value="all" className="px-2 text-xs">전체</TabsTrigger>
+                                    <TabsTrigger value="monthly" className="px-2 text-xs">월간</TabsTrigger>
                                 </TabsList>
                             </Tabs>
-
-                            {onClose && (
-                                <Button variant="ghost" size="icon" onClick={onClose} className="h-9 w-9 hover:bg-muted rounded-full" aria-label="랭킹 패널 닫기">
-                                    <X className="h-5 w-5" aria-hidden="true" />
-                                </Button>
-                            )}
-                        </div>
-                    </div>
-                </div>
+                        </>
+                    )}
+                />
 
                 {/* 랭킹 목록 */}
                 <div>
diff --git a/apps/web/components/overlay-pages/StampOverlay.tsx b/apps/web/components/overlay-pages/StampOverlay.tsx
index 3933c05368..21bf4adbcb 100644
--- a/apps/web/components/overlay-pages/StampOverlay.tsx
+++ b/apps/web/components/overlay-pages/StampOverlay.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useMemo, useEffect, useRef, useCallback, useDeferredValue } from "react";
-import { AlertCircle, Search, Trophy, Eye, EyeOff, X, Filter } from "lucide-react";
+import { AlertCircle, Search, Trophy, Eye, EyeOff, Filter } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -19,6 +19,7 @@ import { StampCard } from "@/components/stamp/StampCard";
 import { createVisitedRestaurantMatcher } from "@/lib/restaurant-review-lookup";
 import { getRestaurantDisplayName, withRestaurantDisplayName } from "@/lib/restaurant-display-name";
 import { compareStampRestaurants, createVisitedLookup } from "@/lib/stamp-restaurant-order";
+import { MapPanelHeader, mapPanelIconButtonClass } from "@/components/home/map-panel-chrome";
 import { cn } from "@/lib/utils";
 
 const STAMP_PAGE_SIZE = 5;
@@ -290,56 +291,44 @@ export default function StampOverlay({ onClose, onOpenRestaurantDetail, singleCo
             data-stamp-scroll-container="true"
             data-desktop-left-panel-stamp-mobile-parity="true"
         >
-            {/* 헤더 */}
-            <div className="shrink-0 border-b border-border bg-background px-3 py-3 sm:px-5 sm:py-4">
-                <div className="flex flex-wrap items-start justify-between gap-3">
-                    <div className="min-w-0 flex-1 basis-[min(11rem,100%)]">
-                        <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-                            <h1 className="flex min-w-0 items-center gap-1.5 text-[1.0625rem] font-bold leading-tight text-primary text-balance xs:text-xl sm:gap-2 sm:text-2xl">
-                                <Trophy className="h-5 w-5 shrink-0 text-primary sm:h-6 sm:w-6" aria-hidden="true" />
-                                <span className="min-w-0 truncate">쯔동여지도 도장</span>
-                            </h1>
-                            <span className="shrink-0 text-xs font-normal tabular-nums text-muted-foreground xs:text-sm">
-                                ({allMergedRestaurants.length.toLocaleString()}개)
-                            </span>
-                        </div>
-                        <p className="mt-1 max-w-full text-pretty text-xs leading-5 text-muted-foreground xs:text-sm">
-                            맛집을 찾아 도장을 찍어보세요!
-                        </p>
-                    </div>
-                    <div className="ml-auto flex shrink-0 items-center gap-1.5 sm:gap-2">
+            <MapPanelHeader
+                title="도장"
+                titleAs="h1"
+                count={allMergedRestaurants.length}
+                description="맛집을 찾아 도장을 찍어보세요"
+                closeLabel="도장 패널 닫기"
+                onClose={onClose}
+                actions={(
+                    <>
                         <Button
                             variant="ghost"
                             size="icon"
-                            className="h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"
+                            className={mapPanelIconButtonClass}
                             onClick={() => setFilters(prev => ({ ...prev, showUnvisitedOnly: !prev.showUnvisitedOnly }))}
                             title={filters.showUnvisitedOnly ? "모든 맛집 보기" : "안 가본 곳만 보기"}
                             aria-label={filters.showUnvisitedOnly ? "모든 맛집 보기" : "안 가본 곳만 보기"}
                         >
-                            {filters.showUnvisitedOnly ? <EyeOff className="h-5 w-5 text-muted-foreground" aria-hidden="true" /> : <Eye className="h-5 w-5 text-muted-foreground" aria-hidden="true" />}
+                            {filters.showUnvisitedOnly ? <EyeOff className="h-4 w-4 text-muted-foreground" aria-hidden="true" /> : <Eye className="h-4 w-4 text-muted-foreground" aria-hidden="true" />}
                         </Button>
                         <Button
                             variant="ghost"
                             size="icon"
                             onClick={() => setIsFilterExpanded(!isFilterExpanded)}
-                            className="relative h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"
+                            className={cn("relative", mapPanelIconButtonClass)}
                             title={isFilterExpanded ? "필터 접기" : "필터 펼치기"}
                             aria-label={isFilterExpanded ? "도장 필터 접기" : "도장 필터 펼치기"}
                         >
                             <Filter className="h-4 w-4" aria-hidden="true" />
                             {activeFilterCount > 0 && (
-                                <span className="absolute -top-1 -right-1 h-4 w-4 bg-primary text-primary-foreground text-2xs font-medium rounded-full flex items-center justify-center">
+                                <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-2xs font-medium text-primary-foreground">
                                     {activeFilterCount}
                                 </span>
                             )}
                         </Button>
-                        {onClose && (
-                            <Button variant="ghost" size="icon" onClick={onClose} className="h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted" aria-label="도장 패널 닫기">
-                                <X className="h-5 w-5" aria-hidden="true" />
-                            </Button>
-                        )}
-                    </div>
-                </div>
+                    </>
+                )}
+            />
+            <div className="px-4">
 
                 {/* 필터 영역 */}
                 <div className={cn(
diff --git a/apps/web/components/profile/UserProfilePanel.tsx b/apps/web/components/profile/UserProfilePanel.tsx
index f8b2c05b27..f0d5c60fa1 100644
--- a/apps/web/components/profile/UserProfilePanel.tsx
+++ b/apps/web/components/profile/UserProfilePanel.tsx
@@ -68,7 +68,7 @@ const LikerItem = memo(function LikerItem({ liker, onUserClick }: LikerItemProps
         <Link
             href={`/user/${liker.userId}`}
             onClick={handleClick}
-            className="flex items-center gap-3 p-4 hover:bg-muted/30 transition-colors w-full text-left"
+            className="flex items-center gap-3 p-4 hover:bg-muted/30 w-full text-left"
         >
             <div className="flex-1 min-w-0">
                 <span className="font-semibold truncate block">
@@ -101,7 +101,7 @@ const STAT_TONE_CLASS_NAMES = {
 
 const StatCard = memo(function StatCard({ icon, label, value, valueClassName, tone = 'neutral' }: StatCardProps) {
     return (
-        <div className="flex min-w-0 items-center gap-2 rounded-xl border border-border/60 bg-card/80 px-2.5 py-2.5 text-left shadow-sm transition-colors hover:bg-card">
+        <div className="flex min-w-0 items-center gap-2 rounded-xl border border-border/60 bg-card/80 px-2.5 py-2.5 text-left shadow-sm hover:bg-card">
             <div className={cn("flex h-7 w-7 shrink-0 items-center justify-center rounded-full", STAT_TONE_CLASS_NAMES[tone])}>
                 {icon}
             </div>
@@ -416,7 +416,7 @@ const UserProfilePanel = memo(function UserProfilePanel({ userId, onClose, showB
     return (
         <div className="flex flex-col h-full bg-background">
             {/* Header */}
-            <div className="border-b border-border/70 bg-background p-4 flex flex-col gap-4">
+            <div className="flex flex-col gap-3 border-b border-border bg-background px-4 py-3">
                 <div className="flex items-center justify-between min-w-0">
                     <div className="flex items-center gap-3">
                         {showBackButton && !onClose && (
@@ -466,7 +466,7 @@ const UserProfilePanel = memo(function UserProfilePanel({ userId, onClose, showB
                             variant="ghost"
                             size="icon"
                             onClick={handleBack}
-                            className="flex-shrink-0 -mr-2 h-10 w-10"
+                            className="h-8 w-8 shrink-0 rounded-full border border-border bg-background shadow-none hover:bg-secondary"
                         >
                             <X className="h-5 w-5" />
                         </Button>
@@ -528,7 +528,7 @@ const UserProfilePanel = memo(function UserProfilePanel({ userId, onClose, showB
                                     aria-controls={getProfileTabPanelId(tab.value)}
                                     onClick={() => handleTabChange(tab.value)}
                                     className={cn(
-                                        "flex min-w-0 items-center justify-center gap-1 whitespace-nowrap rounded-lg border px-2 py-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm",
+                                        "flex min-w-0 items-center justify-center gap-1 whitespace-nowrap rounded-lg border px-2 py-2.5 text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm",
                                         isActive
                                             ? "border-border/70 bg-background text-foreground shadow-sm"
                                             : "border-transparent text-muted-foreground hover:bg-background/60 hover:text-foreground"
diff --git a/apps/web/components/profile/UserProfileProgressiveSkeleton.tsx b/apps/web/components/profile/UserProfileProgressiveSkeleton.tsx
index 1728d15dfc..d0b78cb672 100644
--- a/apps/web/components/profile/UserProfileProgressiveSkeleton.tsx
+++ b/apps/web/components/profile/UserProfileProgressiveSkeleton.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import { X } from "lucide-react";
+import { useFilledSkeletonCount } from "@/lib/use-filled-skeleton-count";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 
@@ -66,8 +69,10 @@ export function UserProfileProgressiveSkeleton({
 }
 
 export function UserProfileTabSkeleton({ label, live = true }: { label: string; live?: boolean }) {
+    const filled = useFilledSkeletonCount(92, 3);
     return (
         <div
+            ref={filled.ref}
             role={live ? "status" : undefined}
             aria-live={live ? "polite" : undefined}
             aria-label={live ? label : undefined}
@@ -75,7 +80,7 @@ export function UserProfileTabSkeleton({ label, live = true }: { label: string;
             className="space-y-3 p-4"
             data-user-profile-tab-skeleton="true"
         >
-            {[0, 1, 2].map((item) => (
+            {Array.from({ length: filled.count }, (_, item) => (
                 <div key={item} className="rounded-xl border border-border bg-card/80 p-3 shadow-sm">
                     <Skeleton className="h-4 w-2/3 rounded" />
                     <Skeleton className="mt-2 h-3 w-full rounded" />
diff --git a/apps/web/components/recommendation/DailyRecommendationPopup.tsx b/apps/web/components/recommendation/DailyRecommendationPopup.tsx
index 2372e2507e..1748f66722 100644
--- a/apps/web/components/recommendation/DailyRecommendationPopup.tsx
+++ b/apps/web/components/recommendation/DailyRecommendationPopup.tsx
@@ -208,19 +208,19 @@ export function DailyRecommendationPopup() {
             {/* 오버레이 (선택사항 - 클릭 시 닫기) */}
             <button
                 type="button"
-                className="absolute inset-0 bg-black/50 pointer-events-auto animate-in fade-in duration-300"
+                className="absolute inset-0 bg-black/50 pointer-events-auto"
                 onClick={handleClose}
                 aria-label="추천 팝업 닫기"
             />
 
             {/* 광고 팝업 스타일 */}
-            <div className="absolute max-md:top-1/2 max-md:left-1/2 max-md:-translate-x-1/2 max-md:-translate-y-1/2 md:bottom-6 md:right-6 pointer-events-auto max-md:opacity-0 max-md:animate-[fadeIn_0.5s_ease-out_forwards] md:animate-in md:slide-in-from-bottom-4 md:duration-500">
+            <div className="absolute max-md:top-1/2 max-md:left-1/2 max-md:-translate-x-1/2 max-md:-translate-y-1/2 md:bottom-6 md:right-6 pointer-events-auto">
                 <Card
                     className="w-[min(320px,calc(100vw-2rem))] overflow-hidden shadow-lg border border-border bg-background font-sans"
                 >
                     {/* 오늘의 추천 배지 */}
                     <div className="absolute top-2 left-2 z-10">
-                        <Badge className="bg-[#8B5A2B] text-white hover:bg-[#7A4E25] border-none px-3 py-1.5 shadow-lg flex items-center gap-1.5 transition-colors">
+                        <Badge className="bg-[#8B5A2B] text-white hover:bg-[#7A4E25] border-none px-3 py-1.5 shadow-lg flex items-center gap-1.5">
                             <Sparkles className="w-3.5 h-3.5 text-yellow-300 fill-yellow-300" />
                             <span className="font-medium tracking-wide">오늘의 추천</span>
                         </Badge>
@@ -229,7 +229,7 @@ export function DailyRecommendationPopup() {
                     {/* 클릭 가능 영역 */}
                     <button
                         type="button"
-                        className="w-full cursor-pointer text-left hover:opacity-95 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                        className="w-full cursor-pointer text-left hover:opacity-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                         onClick={handleCardClick}
                         aria-label={`${selectedRestaurant.name} 상세 페이지로 이동`}
                     >
@@ -240,7 +240,7 @@ export function DailyRecommendationPopup() {
                                     videoId={thumbnailVideoId}
                                     alt={`${selectedRestaurant.name} 썸네일`}
                                     sizes="(max-width: 640px) 100vw, 320px"
-                                    className="object-cover transition-all group-hover:brightness-110"
+                                    className="object-cover"
                                 />
                             </div>
                         )}
@@ -267,7 +267,7 @@ export function DailyRecommendationPopup() {
                                 e.stopPropagation();
                                 handleDismissToday();
                             }}
-                            className="flex-1 py-3 text-sm text-muted-foreground hover:bg-accent transition-colors"
+                            className="flex-1 py-3 text-sm text-muted-foreground hover:bg-accent"
                         >
                             오늘 하루 안 보기
                         </button>
@@ -277,7 +277,7 @@ export function DailyRecommendationPopup() {
                                 e.stopPropagation();
                                 handleClose();
                             }}
-                            className="flex-1 py-3 text-sm font-medium text-foreground hover:bg-accent transition-colors"
+                            className="flex-1 py-3 text-sm font-medium text-foreground hover:bg-accent"
                         >
                             닫기
                         </button>
diff --git a/apps/web/components/restaurant/RestaurantDetailPanel.tsx b/apps/web/components/restaurant/RestaurantDetailPanel.tsx
index 9d29af7655..fad196b050 100644
--- a/apps/web/components/restaurant/RestaurantDetailPanel.tsx
+++ b/apps/web/components/restaurant/RestaurantDetailPanel.tsx
@@ -29,7 +29,7 @@ import { YouTubeIcon } from "@/components/icons/YouTubeIcon";
 import { useAuth } from "@/contexts/AuthContext";
 import AuthModal from "@/components/auth/AuthModal";
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
-import { useQueryClient, useInfiniteQuery } from "@tanstack/react-query";
+import { useQueryClient, useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { supabase } from "@/integrations/supabase/client";
 import Image from "next/image";
 import { ScrollableTagContainer } from "@/components/ui/scrollable-tag-container";
@@ -43,7 +43,7 @@ import {
     getRestaurantReviewLookupName,
     selectRelatedRestaurantReviewIds,
 } from "@/lib/restaurant-review-lookup";
-import { collectRestaurantMergedMedia } from "@/lib/restaurant-merged-media";
+import { collectRestaurantMergedMedia, collectTzuyangReviewEntries, type TzuyangReviewEntry } from "@/lib/restaurant-merged-media";
 import { buildRestaurantDetailMediaCopy } from "@/lib/restaurant-detail-media-copy";
 import { buildRestaurantAddressDisplayEntries, type RestaurantAddressEntryType } from "@/lib/restaurant-address-presenter";
 import {
@@ -179,6 +179,41 @@ interface Review {
     userAvatarUrl?: string | null;
 }
 
+function formatTzuyangReviewDate(value: string | null): string | null {
+    const match = value?.match(/^(\d{4})-(\d{2})-(\d{2})/);
+    if (!match) return null;
+    return `${match[1]}.${match[2]}.${match[3]}`;
+}
+
+function TzuyangReviewCard({
+    entry,
+    badge,
+}: {
+    entry: TzuyangReviewEntry;
+    badge: string | null;
+}) {
+    const publishedLabel = formatTzuyangReviewDate(entry.publishedAt);
+
+    return (
+        <div className="space-y-2 rounded-lg bg-muted/50 p-4">
+            {badge ? (
+                <Badge variant="outline" className="text-xs">
+                    {badge}
+                </Badge>
+            ) : null}
+            {publishedLabel || entry.title ? (
+                <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+                    {publishedLabel ? <span className="shrink-0">{publishedLabel}</span> : null}
+                    {entry.title ? <span className="min-w-0 truncate font-medium text-foreground">{entry.title}</span> : null}
+                </div>
+            ) : null}
+            <p className="whitespace-pre-wrap text-sm leading-6 text-foreground">
+                {entry.text}
+            </p>
+        </div>
+    );
+}
+
 export function RestaurantDetailPanel({
     restaurant,
     onClose,
@@ -248,15 +283,92 @@ export function RestaurantDetailPanel({
         }),
         [youtubeLinks],
     );
-    const tzuyangReviews = mergedMedia.tzuyangReviews;
+    const collectedTzuyangReviews = mergedMedia.tzuyangReviews;
+    const siblingTzuyangReviewQuery = useQuery({
+        queryKey: ['restaurant-tzuyang-review-siblings', restaurantId, youtubeLinks],
+        enabled: Boolean(restaurantId)
+            && restaurant != null
+            && Object.prototype.hasOwnProperty.call(restaurant, "tzuyang_review")
+            && (collectedTzuyangReviews.length === 0 || collectedTzuyangReviews.length < youtubeLinks.length),
+        queryFn: async () => {
+            if (!restaurant) return [] as string[];
+
+            const links = [...new Set(youtubeLinks.flatMap((link) => {
+                const canonical = buildCanonicalYouTubeWatchUrl(extractCanonicalYouTubeVideoId(link));
+                return canonical && canonical !== link ? [link, canonical] : [link];
+            }))];
+            const reviews: string[] = [];
+            const addReview = (value: string | null | undefined) => {
+                const trimmed = value?.trim();
+                if (trimmed && !reviews.includes(trimmed)) reviews.push(trimmed);
+            };
+
+            const videoIds = [...new Set(links
+                .map((link) => extractCanonicalYouTubeVideoId(link))
+                .filter((videoId): videoId is string => Boolean(videoId)))];
+            if (videoIds.length > 0) {
+                const { data } = await supabase
+                    .from('restaurants')
+                    .select('tzuyang_review')
+                    .or(videoIds.map((videoId) => `youtube_link.ilike.%${videoId}%`).join(','));
+                data?.forEach((row) => addReview(row.tzuyang_review));
+            } else if (links.length > 0) {
+                const { data } = await supabase
+                    .from('restaurants')
+                    .select('tzuyang_review')
+                    .in('youtube_link', links);
+                data?.forEach((row) => addReview(row.tzuyang_review));
+            }
+
+            const name = restaurant.approved_name || restaurant.name;
+            const address = restaurant.jibun_address || restaurant.road_address;
+            if (name && address && reviews.length < Math.max(links.length, 1)) {
+                const addressColumn = restaurant.jibun_address ? 'jibun_address' : 'road_address';
+                const { data } = await supabase
+                    .from('restaurants')
+                    .select('tzuyang_review')
+                    .eq('approved_name', name)
+                    .eq(addressColumn, address);
+                data?.forEach((row) => addReview(row.tzuyang_review));
+            }
+
+            if (reviews.length === 0 && name) {
+                const { data } = await supabase
+                    .from('restaurants')
+                    .select('tzuyang_review')
+                    .eq('approved_name', name)
+                    .not('tzuyang_review', 'is', null)
+                    .limit(8);
+                const sameNameReviews: string[] = [];
+                data?.forEach((row) => {
+                    const trimmed = row.tzuyang_review?.trim();
+                    if (trimmed && !sameNameReviews.includes(trimmed)) sameNameReviews.push(trimmed);
+                });
+                if (sameNameReviews.length === 1) addReview(sameNameReviews[0]);
+            }
+
+            return reviews;
+        },
+    });
+    const tzuyangReviewEntries = useMemo(() => {
+        const entries = collectTzuyangReviewEntries(restaurant);
+        const seen = new Set(entries.map((entry) => entry.text));
+        siblingTzuyangReviewQuery.data?.forEach((review) => {
+            const text = review.trim();
+            if (!text || seen.has(text)) return;
+            seen.add(text);
+            entries.push({ text, title: null, publishedAt: null });
+        });
+        return entries;
+    }, [restaurant, siblingTzuyangReviewQuery.data]);
     const youtubeMetas = mergedMedia.youtubeMetas;
     const youtubeCopy = useMemo(
         () => buildRestaurantDetailMediaCopy('youtube', youtubeVideos.length, isYoutubeExpanded),
         [isYoutubeExpanded, youtubeVideos.length],
     );
     const reviewCopy = useMemo(
-        () => buildRestaurantDetailMediaCopy('review', tzuyangReviews.length, isReviewExpanded),
-        [isReviewExpanded, tzuyangReviews.length],
+        () => buildRestaurantDetailMediaCopy('review', tzuyangReviewEntries.length, isReviewExpanded),
+        [isReviewExpanded, tzuyangReviewEntries.length],
     );
 
     // [최적 레코드 선택] 가장 긴 이름 -> 가장 긴 지번 주소 순으로 우선순위
@@ -860,22 +972,22 @@ export function RestaurantDetailPanel({
      * 카테고리별 이미지 경로 매핑
      */
     const CATEGORY_IMAGES: Record<string, string> = {
-        '고기': '/images/maker-images/meat_bbq.png',
-        '치킨': '/images/maker-images/chicken.png',
-        '한식': '/images/maker-images/korean.png',
-        '중식': '/images/maker-images/chinese.png',
-        '일식': '/images/maker-images/cutlet_sashimi.png',
-        '양식': '/images/maker-images/western.png',
-        '분식': '/images/maker-images/snack_bar.png',
-        '카페·디저트': '/images/maker-images/cafe_dessert.png',
-        '아시안': '/images/maker-images/asian.png',
-        '패스트푸드': '/images/maker-images/fastfood.png',
-        '족발·보쌈': '/images/maker-images/pork_feet.png',
-        '돈까스·회': '/images/maker-images/cutlet_sashimi.png',
-        '피자': '/images/maker-images/pizza.png',
-        '찜·탕': '/images/maker-images/stew.png',
-        '야식': '/images/maker-images/late_night.png',
-        '도시락': '/images/maker-images/lunch_box.png',
+        '고기': '/images/maker-images/webp/meat_bbq.webp',
+        '치킨': '/images/maker-images/webp/chicken.webp',
+        '한식': '/images/maker-images/webp/korean.webp',
+        '중식': '/images/maker-images/webp/chinese.webp',
+        '일식': '/images/maker-images/webp/cutlet_sashimi.webp',
+        '양식': '/images/maker-images/webp/western.webp',
+        '분식': '/images/maker-images/webp/snack_bar.webp',
+        '카페·디저트': '/images/maker-images/webp/cafe_dessert.webp',
+        '아시안': '/images/maker-images/webp/asian.webp',
+        '패스트푸드': '/images/maker-images/webp/fastfood.webp',
+        '족발·보쌈': '/images/maker-images/webp/pork_feet.webp',
+        '돈까스·회': '/images/maker-images/webp/cutlet_sashimi.webp',
+        '피자': '/images/maker-images/webp/pizza.webp',
+        '찜·탕': '/images/maker-images/webp/stew.webp',
+        '야식': '/images/maker-images/webp/late_night.webp',
+        '도시락': '/images/maker-images/webp/lunch_box.webp',
     };
 
     /**
@@ -884,16 +996,16 @@ export function RestaurantDetailPanel({
      * @returns 이미지 경로
      */
     const getCategoryImagePath = (category: string): string => {
-        return CATEGORY_IMAGES[category] || '/images/maker-images/korean.png';
+        return CATEGORY_IMAGES[category] || '/images/maker-images/webp/korean.webp';
     };
 
     return (
         <>
             {isMobile && (onSwipeLeft || onSwipeRight) && showSwipeHint ? (
                 <div className="pointer-events-none fixed inset-0 z-[70]">
-                    <div className="absolute inset-0 bg-black/20 backdrop-blur-[1px]" />
+                    <div className="absolute inset-0 bg-black/20" />
                     <div className="absolute inset-0 flex items-center justify-center">
-                        <div className="rounded-full border border-white/40 bg-black/40 px-3 py-2 text-xs text-white/90 backdrop-blur">
+                        <div className="rounded-full border border-white/40 bg-black/40 px-3 py-2 text-xs text-white/90">
                             좌우 스와이프 시 다음 맛집으로 이동
                         </div>
                     </div>
@@ -919,7 +1031,7 @@ export function RestaurantDetailPanel({
                 {onToggleCollapse && !isMobile && (
                     <button
                         onClick={onToggleCollapse}
-                        className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-full z-50 flex items-center justify-center w-6 h-12 bg-background border border-r-0 border-border rounded-l-md shadow-md hover:bg-muted transition-colors cursor-pointer group"
+                        className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-full z-50 flex items-center justify-center w-6 h-12 bg-background border border-r-0 border-border rounded-l-md shadow-md hover:bg-muted cursor-pointer group"
                         title={isPanelOpen ? "패널 접기" : "패널 펼치기"}
                         aria-label={isPanelOpen ? "패널 접기" : "패널 펼치기"}
                     >
@@ -1118,7 +1230,7 @@ export function RestaurantDetailPanel({
                                         <button
                                             type="button"
                                             key={`${entry.type}-${entry.address}`}
-                                            className="flex w-full gap-3 cursor-pointer hover:bg-muted/50 p-2 -m-2 rounded-lg transition-colors group text-left"
+                                            className="flex w-full gap-3 cursor-pointer hover:bg-muted/50 p-2 -m-2 rounded-lg group text-left"
                                             onClick={() => handleCopyAddress(entry.address, entry.type)}
                                             aria-label={`${entry.label} 복사`}
                                         >
@@ -1130,7 +1242,7 @@ export function RestaurantDetailPanel({
                                             {copiedAddress === entry.type ? (
                                                 <Check className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
                                             ) : (
-                                                <Copy className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+                                                <Copy className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100" />
                                             )}
                                         </button>
                                     ))}
@@ -1195,7 +1307,7 @@ export function RestaurantDetailPanel({
                                                     </span>
                                                 )}
                                                 <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                                                    <span className="flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white shadow-sm ring-1 ring-white/40 backdrop-blur-[1px] transition-all duration-200 group-hover:bg-red-600">
+                                                    <span className="flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white shadow-sm ring-1 ring-white/40 group-hover:bg-red-600">
                                                         <Play className="h-5 w-5 translate-x-[1px] fill-current" aria-hidden="true" />
                                                     </span>
                                                 </div>
@@ -1227,7 +1339,7 @@ export function RestaurantDetailPanel({
                                                                 {youtubeCopy.itemBadge(index + 2)}
                                                             </span>
                                                             <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                                                                <span className="flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white shadow-sm ring-1 ring-white/40 backdrop-blur-[1px] transition-all duration-200 group-hover:bg-red-600">
+                                                                <span className="flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white shadow-sm ring-1 ring-white/40 group-hover:bg-red-600">
                                                                     <Play className="h-5 w-5 translate-x-[1px] fill-current" aria-hidden="true" />
                                                                 </span>
                                                             </div>
@@ -1241,7 +1353,7 @@ export function RestaurantDetailPanel({
                                 ) : null}
 
                                 {/* 쯔양 리뷰 섹션 */}
-                                {tzuyangReviews.length > 0 ? (
+                                {tzuyangReviewEntries.length > 0 ? (
                                     <>
                                     <Separator />
                                     <div className="space-y-3">
@@ -1249,13 +1361,13 @@ export function RestaurantDetailPanel({
                                             <h3 className="min-w-0 flex-1 font-semibold text-sm flex flex-wrap items-center gap-2">
                                                 <Quote className="h-4 w-4 text-muted-foreground" />
                                                 {reviewCopy.title}
-                                                {tzuyangReviews.length > 1 && (
+                                                {tzuyangReviewEntries.length > 1 && (
                                                     <Badge variant="outline" className="ml-1 text-xs">
                                                         {reviewCopy.countLabel}
                                                     </Badge>
                                                 )}
                                             </h3>
-                                            {tzuyangReviews.length > 1 && (
+                                            {tzuyangReviewEntries.length > 1 && (
                                                 <Button
                                                     variant="ghost"
                                                     size="sm"
@@ -1278,34 +1390,25 @@ export function RestaurantDetailPanel({
                                         </div>
 
                                         <div className="space-y-2">
-                                            <div className="p-4 bg-muted/50 rounded-lg space-y-2">
-                                                {tzuyangReviews.length > 1 && (
-                                                    <Badge variant="outline" className="text-xs">
-                                                        {reviewCopy.itemBadge(1)}
-                                                    </Badge>
-                                                )}
-                                                <p className="text-sm text-muted-foreground whitespace-pre-wrap">
-                                                    {tzuyangReviews[0]}
-                                                </p>
-                                            </div>
+                                            <TzuyangReviewCard
+                                                entry={tzuyangReviewEntries[0]}
+                                                badge={tzuyangReviewEntries.length > 1 ? reviewCopy.itemBadge(1) : null}
+                                            />
 
-                                            {tzuyangReviews.length > 1 && !isReviewExpanded && (
+                                            {tzuyangReviewEntries.length > 1 && !isReviewExpanded && (
                                                 <p className="text-xs text-muted-foreground">
                                                     {reviewCopy.collapsedHint}
                                                 </p>
                                             )}
 
-                                            {tzuyangReviews.length > 1 && isReviewExpanded && (
+                                            {tzuyangReviewEntries.length > 1 && isReviewExpanded && (
                                                 <div className="space-y-2">
-                                                    {tzuyangReviews.slice(1).map((review, index) => (
-                                                        <div key={`${index}-${review}`} className="p-4 bg-muted/50 rounded-lg space-y-2">
-                                                            <Badge variant="outline" className="text-xs">
-                                                                {reviewCopy.itemBadge(index + 2)}
-                                                            </Badge>
-                                                            <p className="text-sm text-muted-foreground whitespace-pre-wrap">
-                                                                {review}
-                                                            </p>
-                                                        </div>
+                                                    {tzuyangReviewEntries.slice(1).map((entry, index) => (
+                                                        <TzuyangReviewCard
+                                                            key={`${index}-${entry.text}`}
+                                                            entry={entry}
+                                                            badge={reviewCopy.itemBadge(index + 2)}
+                                                        />
                                                     ))}
                                                 </div>
                                             )}
@@ -1428,7 +1531,7 @@ export function RestaurantDetailPanel({
                         {isDirectionSheetOpen && mapDestinationUrls && (
                             <div
                                 className={cn(
-                                    "border-b border-border bg-muted/30 space-y-2 animate-in slide-in-from-bottom-2 duration-200",
+                                    "border-b border-border bg-muted/30 space-y-2",
                                     isMobile ? "p-3 pb-[calc(env(safe-area-inset-bottom)+0.75rem)]" : "p-4"
                                 )}
                             >
diff --git a/apps/web/components/reviews/ReviewCard.tsx b/apps/web/components/reviews/ReviewCard.tsx
index 32d718e3db..a0a2050cbb 100644
--- a/apps/web/components/reviews/ReviewCard.tsx
+++ b/apps/web/components/reviews/ReviewCard.tsx
@@ -275,7 +275,7 @@ export const ReviewCard = React.memo(function ReviewCard({
     return (
         <div
             id={idPrefix ? `${idPrefix}-${review.id}` : undefined}
-            className={`w-full rounded-xl border bg-card text-card-foreground overflow-hidden mb-4 max-w-full transition-all duration-500
+            className={`w-full rounded-xl border bg-card text-card-foreground overflow-hidden mb-4 max-w-full
                 ${review.isPinned ? "border-primary/50" : "border-border/40"}
                 ${isHighlighted ? "ring-2 ring-primary ring-offset-2" : ""}
             `}
@@ -300,7 +300,7 @@ export const ReviewCard = React.memo(function ReviewCard({
                         <div className="flex items-center gap-2">
                             <Link
                                 href={`/user/${review.userId}`}
-                                className="text-sm font-semibold hover:text-primary hover:underline transition-colors"
+                                className="text-sm font-semibold hover:text-primary hover:underline"
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     if (onUserClick) {
@@ -381,7 +381,7 @@ export const ReviewCard = React.memo(function ReviewCard({
                             fill={optimisticLike.isLiked ? LIKED_HEART_COLOR : "none"}
                             stroke={optimisticLike.isLiked ? LIKED_HEART_COLOR : "currentColor"}
                             className={cn(
-                                "h-5 w-5 transition-all group-active:fill-red-500 group-active:text-red-500 group-active:[&_path]:fill-red-500 group-active:[&_path]:stroke-red-500",
+                                "h-5 w-5 group-active:fill-red-500 group-active:text-red-500 group-active:[&_path]:fill-red-500 group-active:[&_path]:stroke-red-500",
                                 optimisticLike.isLiked
                                     ? "fill-red-500 text-red-500 scale-110 [&_path]:fill-red-500 [&_path]:stroke-red-500"
                                     : "text-muted-foreground group-hover:text-red-500 group-hover:[&_path]:stroke-red-500"
@@ -436,7 +436,7 @@ export const ReviewCard = React.memo(function ReviewCard({
                                 {photoUrls.map((url, index) => (
                                     <div
                                         key={`${photoItemKeyPrefix}-dot-${index}`}
-                                        className={`h-1.5 rounded-full transition-all ${index === currentPhotoIndex ? 'bg-white w-3' : 'bg-white/50 w-1.5'}`}
+                                        className={`h-1.5 rounded-full ${index === currentPhotoIndex ? 'bg-white w-3' : 'bg-white/50 w-1.5'}`}
                                     ></div>
                                 ))}
                             </div>
diff --git a/apps/web/components/reviews/ReviewModal.tsx b/apps/web/components/reviews/ReviewModal.tsx
index 6b7439cea9..2b8dedd720 100644
--- a/apps/web/components/reviews/ReviewModal.tsx
+++ b/apps/web/components/reviews/ReviewModal.tsx
@@ -516,8 +516,8 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
 
     const getOcrFocusClass = useCallback((target: OcrFocusTarget) => (
         ocrFocusTarget === target
-            ? "rounded-lg ring-2 ring-primary ring-offset-2 ring-offset-background bg-primary/5 transition-shadow"
-            : "transition-shadow"
+            ? "rounded-lg ring-2 ring-primary ring-offset-2 ring-offset-background bg-primary/5"
+            : ""
     ), [ocrFocusTarget]);
 
     const isOcrNavigationSuppressed = useCallback(() => (
@@ -1697,7 +1697,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                 <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
                     {foodPhotos.map((photo, index) => (
                         <div key={index} className="relative group">
-                            <Card className="p-2 hover:shadow-md transition-shadow">
+                            <Card className="p-2 hover:shadow-md">
                                 <div className="relative aspect-square rounded-lg overflow-hidden bg-muted">
                                     <Image
                                         src={foodPhotoUrls[index] || ''}
@@ -1716,7 +1716,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                             <Button
                                 variant="destructive"
                                 size="icon"
-                                className="absolute -top-2 -right-2 h-6 w-6 rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-lg"
+                                className="absolute -top-2 -right-2 h-6 w-6 rounded-full opacity-0 group-hover:opacity-100 shadow-lg"
                                 onClick={() => removeFoodPhoto(index)}
                             >
                                 <XIcon className="h-3 w-3" />
@@ -2001,9 +2001,8 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
 
                                 {/* AI 분석 로딩 오버레이 (카드 전체 덮음) */}
                                 {isAnalyzing && (
-                                    <div className="absolute inset-0 z-50 bg-background/95 backdrop-blur-sm flex flex-col items-center justify-center text-center p-6 rounded-xl border border-primary/20">
+                                    <div className="absolute inset-0 z-50 bg-background/95 flex flex-col items-center justify-center text-center p-6 rounded-xl border border-primary/20">
                                         <div className="relative mb-4">
-                                            <div className="absolute inset-0 bg-primary/20 rounded-full animate-ping" />
                                             <div className="relative bg-background rounded-full p-3 border-2 border-primary shadow-lg">
                                                 <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
                                             </div>
@@ -2049,10 +2048,10 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                         </div>
 
                         {/* 하단 폼 영역 (맛집 정보 ~ 리뷰 내용) */}
-                        <div className="space-y-6 relative rounded-xl transition-all">
+                        <div className="space-y-6 relative rounded-xl">
 
                             {/* 방문 맛집 정보 */}
-                            <div data-ocr-focus="restaurant" className={`space-y-2 transition-all duration-500 ${getOcrFocusClass("restaurant")} ${(!selectedRestaurant && searchQuery && !isSearching)
+                            <div data-ocr-focus="restaurant" className={`space-y-2 ${getOcrFocusClass("restaurant")} ${(!selectedRestaurant && searchQuery && !isSearching)
                                 ? "ring-2 ring-primary ring-offset-2 rounded-lg p-1 bg-primary/5"
                                 : ""
                                 }`}>
@@ -2513,9 +2512,8 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
 
                                         {/* AI 분석 로딩 오버레이 (카드 전체 덮음) */}
                                         {isAnalyzing && (
-                                            <div className="absolute inset-0 z-50 bg-background/95 backdrop-blur-sm flex flex-col items-center justify-center text-center p-6 rounded-xl border border-primary/20">
+                                            <div className="absolute inset-0 z-50 bg-background/95 flex flex-col items-center justify-center text-center p-6 rounded-xl border border-primary/20">
                                                 <div className="relative mb-4">
-                                                    <div className="absolute inset-0 bg-primary/20 rounded-full animate-ping" />
                                                     <div className="relative bg-background rounded-full p-3 border-2 border-primary shadow-lg">
                                                         <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
                                                     </div>
@@ -2564,7 +2562,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                 {currentStep === 2 && (
                                     <>
                                         {/* 방문 맛집 정보 */}
-                                        <div data-ocr-focus="restaurant" className={`space-y-2 transition-all duration-500 ${getOcrFocusClass("restaurant")} ${(!selectedRestaurant && searchQuery && !isSearching)
+                                        <div data-ocr-focus="restaurant" className={`space-y-2 ${getOcrFocusClass("restaurant")} ${(!selectedRestaurant && searchQuery && !isSearching)
                                     ? "ring-2 ring-primary ring-offset-2 rounded-lg p-1 bg-primary/5"
                                     : ""
                                     }`}>
@@ -2792,7 +2790,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                         </div>
 
                         {isSubmitting && (
-                            <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50">
+                            <div className="absolute inset-0 bg-background/80 flex items-center justify-center z-50">
                                 <div className="flex flex-col items-center gap-4">
                                     <Loader2 className="h-10 w-10 animate-spin text-primary" />
                                     <p className="text-lg font-medium">리뷰 등록 중...</p>
@@ -2876,7 +2874,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
             return (
                 <section
                     ref={desktopReviewMapPanelRef}
-                    className="fixed bottom-24 right-6 top-6 z-[85] w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl backdrop-blur-sm will-change-transform"
+                    className="fixed bottom-24 right-6 top-6 z-[85] w-[min(420px,calc(100vw-2rem))] overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl"
                     style={{ transform: `translate3d(${desktopReviewMapPanelPosition.x}px, ${desktopReviewMapPanelPosition.y}px, 0)` }}
                     data-desktop-map-review-panel="true"
                     role="dialog"
@@ -3106,9 +3104,8 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
 
                                         {/* AI 분석 로딩 오버레이 (카드 전체 덮음) */}
                                         {isAnalyzing && (
-                                            <div className="absolute inset-0 z-50 bg-background/95 backdrop-blur-sm flex flex-col items-center justify-center text-center p-6 rounded-xl border border-primary/20">
+                                            <div className="absolute inset-0 z-50 bg-background/95 flex flex-col items-center justify-center text-center p-6 rounded-xl border border-primary/20">
                                                 <div className="relative mb-4">
-                                                    <div className="absolute inset-0 bg-primary/20 rounded-full animate-ping" />
                                                     <div className="relative bg-background rounded-full p-3 border-2 border-primary shadow-lg">
                                                         <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
                                                     </div>
@@ -3154,7 +3151,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                 </div>
 
                                 {/* 방문 맛집 정보 */}
-                                <div data-ocr-focus="restaurant" className={`space-y-2 transition-all duration-500 ${getOcrFocusClass("restaurant")} ${(!selectedRestaurant && searchQuery && !isSearching)
+                                <div data-ocr-focus="restaurant" className={`space-y-2 ${getOcrFocusClass("restaurant")} ${(!selectedRestaurant && searchQuery && !isSearching)
                                     ? "ring-2 ring-primary ring-offset-2 rounded-lg p-1 bg-primary/5"
                                     : ""
                                     }`}>
@@ -3375,7 +3372,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                         </div>
 
                         {isSubmitting && (
-                            <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50">
+                            <div className="absolute inset-0 bg-background/80 flex items-center justify-center z-50">
                                 <div className="flex flex-col items-center gap-4">
                                     <Loader2 className="h-10 w-10 animate-spin text-primary" />
                                     <p className="text-lg font-medium">리뷰 등록 중...</p>
diff --git a/apps/web/components/stamp/RestaurantReviewsPanel.tsx b/apps/web/components/stamp/RestaurantReviewsPanel.tsx
index 391852c858..b3b24c0c8e 100644
--- a/apps/web/components/stamp/RestaurantReviewsPanel.tsx
+++ b/apps/web/components/stamp/RestaurantReviewsPanel.tsx
@@ -158,7 +158,7 @@ export const RestaurantReviewsPanel = React.memo(function RestaurantReviewsPanel
                     <div className="space-y-4">
                         {[1, 2, 3].map((i) => (
                             <Card key={i} className="p-0 overflow-hidden">
-                                <div className="animate-pulse">
+                                <div>
                                     <div className="w-full aspect-square bg-muted" />
                                     <div className="p-3 space-y-2">
                                         <div className="h-3 bg-muted rounded w-1/4" />
diff --git a/apps/web/components/stamp/StampCard.tsx b/apps/web/components/stamp/StampCard.tsx
index 85635804c7..1f9a25a763 100644
--- a/apps/web/components/stamp/StampCard.tsx
+++ b/apps/web/components/stamp/StampCard.tsx
@@ -159,9 +159,9 @@ export const StampCard = memo(function StampCard({
         return (
             <Card
                 className={cn(
-                    "group relative flex min-h-[76px] items-stretch gap-2 overflow-hidden rounded-xl border border-border bg-card p-2 transition-[background-color,box-shadow,border-color] duration-200",
+                    "group relative flex min-h-[76px] items-stretch gap-2 overflow-hidden rounded-xl border border-border bg-card p-2 [content-visibility:auto] [contain-intrinsic-size:auto_76px]",
                     isGuideCard ? "cursor-default" : "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
-                    showStamp ? "ring-2 ring-green-500 ring-opacity-50" : "hover:bg-accent/35 hover:shadow-md",
+                    showStamp ? "ring-2 ring-green-500 ring-opacity-50" : "hover:bg-accent/35",
                     isSelected && "ring-2 ring-primary"
                 )}
                 onClick={handleCardOpen}
@@ -195,11 +195,6 @@ export const StampCard = memo(function StampCard({
                             <span className="truncate">{displayAddress}</span>
                         </p>
                     )}
-                    {typedRestaurant.tzuyang_review && (
-                        <p className="truncate text-2xs leading-3.5 text-muted-foreground">
-                            “{typedRestaurant.tzuyang_review}”
-                        </p>
-                    )}
                 </div>
 
                 <div className="relative h-16 shrink-0 self-center overflow-hidden rounded-lg bg-muted" style={{ width: '5rem', minWidth: '5rem' }}>
@@ -209,8 +204,8 @@ export const StampCard = memo(function StampCard({
                             alt={`${restaurantDisplayName} 썸네일`}
                             sizes="112px"
                             className={cn(
-                                "h-full w-full object-cover transition-[filter,opacity,transform] duration-300",
-                                showStamp ? "grayscale opacity-60" : "group-hover:brightness-110"
+                                "h-full w-full object-cover",
+                                showStamp ? "grayscale opacity-60" : ""
                             )}
                             style={{ objectFit: 'cover' }}
                         />
@@ -226,9 +221,9 @@ export const StampCard = memo(function StampCard({
     return (
         <Card
             className={cn(
-                "relative overflow-hidden rounded-xl border border-border/70 bg-card shadow-sm transition-[box-shadow,border-color,transform] duration-300 group",
+                "relative overflow-hidden rounded-xl border border-border/70 bg-card shadow-sm group [content-visibility:auto] [contain-intrinsic-size:auto_148px]",
                 isGuideCard ? "cursor-default" : "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
-                showStamp ? "ring-2 ring-green-500 ring-opacity-50" : "hover:shadow-lg",
+                showStamp ? "ring-2 ring-green-500 ring-opacity-50" : "",
                 isSelected && "ring-2 ring-primary"
             )}
             onClick={handleCardOpen}
@@ -243,10 +238,10 @@ export const StampCard = memo(function StampCard({
                         <YoutubeThumbnail
                             videoId={currentVideoId}
                             alt={`${restaurantDisplayName} 썸네일`}
-                            sizes="(max-width: 768px) 100vw, (max-width: 1536px) 25vw, 20vw"
+                            sizes="(max-width: 480px) 100vw, 320px"
                             className={cn(
-                                "w-full h-full object-cover transition-[filter,opacity,transform] duration-300",
-                                showStamp ? "grayscale opacity-60" : "group-hover:brightness-110"
+                                "w-full h-full object-cover",
+                                showStamp ? "grayscale opacity-60" : ""
                             )}
                             style={{ objectFit: 'cover' }}
                         />
@@ -326,20 +321,26 @@ export const StampCard = memo(function StampCard({
                                     </button>
                                 )}
                                 <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                                    <picture>
                                     {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <source srcSet="/images/stamp-clear.webp" type="image/webp" />
                                     <img
                                         src="/images/stamp-clear.png"
                                         alt="방문 완료"
                                         className={cn(stampSizeClass, "object-contain opacity-90 drop-shadow-lg dark:hidden")}
                                         style={stampImageStyle}
                                     />
+                                    </picture>
+                                    <picture>
                                     {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <source srcSet="/images/stamp-clear-dark.webp" type="image/webp" />
                                     <img
                                         src="/images/stamp-clear-dark.png"
                                         alt="방문 완료"
                                         className={cn(stampSizeClass, "object-contain opacity-90 drop-shadow-lg hidden dark:block")}
                                         style={stampImageStyle}
                                     />
+                                    </picture>
                                 </div>
                             </div>
                         )}
diff --git a/apps/web/components/ui/alert-dialog.tsx b/apps/web/components/ui/alert-dialog.tsx
index 98c42cc9f0..d44598fb48 100644
--- a/apps/web/components/ui/alert-dialog.tsx
+++ b/apps/web/components/ui/alert-dialog.tsx
@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-[110] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[110] bg-black/80",
       className,
     )}
     {...props}
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-[110] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-[110] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg",
         className,
       )}
       {...props}
diff --git a/apps/web/components/ui/badge.tsx b/apps/web/components/ui/badge.tsx
index 0853c441df..24bded6247 100644
--- a/apps/web/components/ui/badge.tsx
+++ b/apps/web/components/ui/badge.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
diff --git a/apps/web/components/ui/bookmark-button.tsx b/apps/web/components/ui/bookmark-button.tsx
index 1aff8553e2..a2893f0bef 100644
--- a/apps/web/components/ui/bookmark-button.tsx
+++ b/apps/web/components/ui/bookmark-button.tsx
@@ -59,7 +59,7 @@ const BookmarkButtonComponent = ({
                 onClick={handleClick}
                 disabled={isLoading}
                 className={cn(
-                    "transition-colors relative",
+                    "relative",
                     isBookmarked && "bg-primary/10 border-primary text-primary hover:bg-primary/20",
                     className
                 )}
diff --git a/apps/web/components/ui/bottom-sheet.tsx b/apps/web/components/ui/bottom-sheet.tsx
index 404d80ac49..0ea863806d 100644
--- a/apps/web/components/ui/bottom-sheet.tsx
+++ b/apps/web/components/ui/bottom-sheet.tsx
@@ -81,15 +81,7 @@ const HALF_TO_FULL_VELOCITY_FLOOR_PX_PER_MS = 0.16;
 const HALF_TO_FULL_QUICK_VELOCITY_FLOOR_PX_PER_MS = 0.19;
 const QUICK_GESTURE_DURATION_MS = 85;
 const QUICK_GESTURE_EXTRA_DISTANCE_PX = 2;
-const QUICK_GESTURE_SHORT_DISTANCE_PX = 25;
-const LONG_PRESS_TRANSITION_THRESHOLD_MS = 175;
 const DRAG_RENDER_EPSILON_PERCENT = 0.08;
-const SNAP_TRANSITION_BASE_MS = 235;
-const SNAP_TRANSITION_FAST_MS = 175;
-const SNAP_TRANSITION_SMOOTH_MS = 295;
-const SNAP_EASING_BASE = 'cubic-bezier(0.22, 1, 0.36, 1)';
-const SNAP_EASING_FAST = 'cubic-bezier(0.16, 1, 0.3, 1)';
-const SNAP_EASING_SMOOTH = 'cubic-bezier(0.34, 1.56, 0.64, 1)';
 const HORIZONTAL_SWIPE_THRESHOLD = 10;
 const HORIZONTAL_SWIPE_INTENT_RATIO = 0.85;
 const VERTICAL_DRAG_INTENT_RATIO = 1.25;
@@ -284,17 +276,12 @@ function BottomSheetComponent({
     // [PERFORMANCE] 렌더링에 필요한 상태만 useState로 관리
     const [sheetHeight, setSheetHeight] = useState(defaultHeight);
     const [isDragging, setIsDragging] = useState(false);
-    const [sheetSnapTransition, setSheetSnapTransition] = useState({
-        duration: SNAP_TRANSITION_BASE_MS,
-        easing: SNAP_EASING_BASE,
-    });
     const [viewportFrame, setViewportFrame] = useState(() => {
         const viewportHeight = typeof window !== 'undefined'
             ? (window.visualViewport?.height ?? window.innerHeight)
             : 800;
         return { height: viewportHeight, bottomOffset: 0 };
     });
-    const [isViewportResizing, setIsViewportResizing] = useState(false);
 
     // [PERFORMANCE] 드래그 중 리렌더링 제거 - Ref로 관리
     const viewportHeightRef = useRef(
@@ -400,29 +387,6 @@ function BottomSheetComponent({
         , snapPoints[0]);
     }, [getContentSnapPoints]);
 
-    const applySnapTransition = useCallback((isFlick: boolean, distancePx: number, isLongPress: boolean) => {
-        if (isFlick) {
-            setSheetSnapTransition({
-                duration: SNAP_TRANSITION_FAST_MS,
-                easing: SNAP_EASING_FAST,
-            });
-            return;
-        }
-
-        if (isLongPress || distancePx >= 80) {
-            setSheetSnapTransition({
-                duration: SNAP_TRANSITION_SMOOTH_MS,
-                easing: SNAP_EASING_SMOOTH,
-            });
-            return;
-        }
-
-        setSheetSnapTransition({
-            duration: SNAP_TRANSITION_BASE_MS,
-            easing: SNAP_EASING_BASE,
-        });
-    }, []);
-
     const syncMobileLayout = useCallback((heightPercent: number) => {
         if (!isOpen || !hideBottomNavWhenOpen || !isMobileOrTablet) {
             resetMobileSheetLayoutState(layoutSource);
@@ -584,18 +548,8 @@ function BottomSheetComponent({
         if (!viewport) return;
 
         let throttleTimer: number | null = null;
-        let resizeSettleTimer: number | null = null;
 
         const handleResize = () => {
-            setIsViewportResizing(true);
-            if (resizeSettleTimer !== null) {
-                window.clearTimeout(resizeSettleTimer);
-            }
-            resizeSettleTimer = window.setTimeout(() => {
-                setIsViewportResizing(false);
-                resizeSettleTimer = null;
-            }, 140);
-
             if (throttleTimer !== null) return;
 
             throttleTimer = requestAnimationFrame(() => {
@@ -622,8 +576,6 @@ function BottomSheetComponent({
             viewport.removeEventListener('resize', handleResize);
             viewport.removeEventListener('scroll', handleResize);
             if (throttleTimer !== null) cancelAnimationFrame(throttleTimer);
-            if (resizeSettleTimer !== null) window.clearTimeout(resizeSettleTimer);
-            setIsViewportResizing(false);
         };
     }, [isOpen, getCurrentMaxHeight, minHeight, syncMobileLayout, syncViewportMetrics]);
 
@@ -675,14 +627,6 @@ function BottomSheetComponent({
         dragEndYRef.current = clientY;
         dragEndTimeRef.current = performance.now();
         velocityRef.current = 0;
-        setSheetSnapTransition({
-            duration: SNAP_TRANSITION_BASE_MS,
-            easing: SNAP_EASING_BASE,
-        });
-
-        if (sheetRef.current) {
-            sheetRef.current.style.transitionDuration = '0ms';
-        }
         lockContentScrollDuringDrag();
         setIsDragging(true);
     }, [cancelPendingDragHeightRender, lockContentScrollDuringDrag]);
@@ -738,7 +682,6 @@ function BottomSheetComponent({
         const startedAtFull = startHeightRef.current >= currentMaxHeight - 0.5;
         const isQuickGesture = elapsedMs <= QUICK_GESTURE_DURATION_MS;
         const movementPx = Math.abs(movementPxFromStart);
-        const isLongPress = !isQuickGesture && elapsedMs >= LONG_PRESS_TRANSITION_THRESHOLD_MS;
         const peekToHalfDistancePercent = pxToPercent(
             HALF_TO_FULL_DISTANCE_PX + (isQuickGesture ? QUICK_GESTURE_EXTRA_DISTANCE_PX : 0)
         );
@@ -751,11 +694,6 @@ function BottomSheetComponent({
         const halfToPeekDistancePercent = pxToPercent(
             HALF_TO_PEEK_DISTANCE_PX + (isQuickGesture ? QUICK_GESTURE_EXTRA_DISTANCE_PX : 0)
         );
-        const shouldUseFastTransition = isSwipeUpStrong || isSwipeDownStrong;
-        const isQuickAndSmall = isQuickGesture && movementPx <= QUICK_GESTURE_SHORT_DISTANCE_PX;
-        const shouldUseSmoothTransition = isLongPress || (!isQuickAndSmall && movementPx > QUICK_GESTURE_SHORT_DISTANCE_PX) || dragDistancePx > HALF_TO_PEEK_DISTANCE_PX;
-
-        applySnapTransition(shouldUseFastTransition, movementPx, shouldUseSmoothTransition);
         velocityRef.current = 0;
 
         const fullToHalfDistancePx =
@@ -833,7 +771,6 @@ function BottomSheetComponent({
             queueMicrotask(onClose);
         }
     }, [
-        applySnapTransition,
         cancelPendingDragHeightRender,
         defaultHeight,
         enablePeek,
@@ -1323,8 +1260,6 @@ function BottomSheetComponent({
             height: 'auto',
             maxHeight: 'calc(100dvh - 2rem)',
             transform: 'translate(-50%, -50%)',
-            transitionDuration: isDragging || isViewportResizing ? '0ms' : `${sheetSnapTransition.duration}ms`,
-            transitionTimingFunction: isDragging || isViewportResizing ? undefined : sheetSnapTransition.easing,
         }
         : useStableKeyboardLayout
         ? {
@@ -1332,8 +1267,6 @@ function BottomSheetComponent({
             bottom: 0,
             height: 'auto',
             maxHeight: undefined,
-            transitionDuration: isDragging || isViewportResizing ? '0ms' : `${sheetSnapTransition.duration}ms`,
-            transitionTimingFunction: isDragging || isViewportResizing ? undefined : sheetSnapTransition.easing,
         }
         : {
             // [FIX] Safari/삼성 인터넷 100vh 버그 수정 - HomeMapContainer 방식 적용
@@ -1342,8 +1275,6 @@ function BottomSheetComponent({
             bottom: viewportFrame.bottomOffset > 0 ? `${viewportFrame.bottomOffset}px` : undefined,
             // 헤더 오프셋이 있는 경우 최대 높이 제한 (CSS로도 이중 안전장치)
             maxHeight: headerOffset > 0 ? `calc(100% - ${headerOffset}px)` : `${maxHeight}%`,
-            transitionDuration: isDragging || isViewportResizing ? '0ms' : `${sheetSnapTransition.duration}ms`,
-            transitionTimingFunction: isDragging || isViewportResizing ? undefined : sheetSnapTransition.easing,
         };
 
     return (
@@ -1351,7 +1282,7 @@ function BottomSheetComponent({
             {/* 배경 오버레이 */}
             {showBackdrop && (
                 <div
-                    className="fixed inset-0 z-[94] bg-black/30 transition-opacity duration-200"
+                    className="fixed inset-0 z-[94] bg-black/30"
                     data-bottom-sheet-backdrop={layoutSource}
                     role="button"
                     tabIndex={-1}
@@ -1381,8 +1312,6 @@ function BottomSheetComponent({
                     'bg-background shadow-sm',
                     isCentered ? 'rounded-2xl' : isAtFullHeight ? 'rounded-none' : 'rounded-t-2xl',
                     'flex flex-col',
-                    // 드래그 중에는 트랜지션 제거
-                    isDragging || isViewportResizing ? '' : 'transition-[height,border-radius]',
                     className
                 )}
                 data-sheet-state={isAtFullHeight ? 'full' : 'partial'}
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index cdedd4f43d..04ecd1ab52 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/apps/web/components/ui/carousel.tsx b/apps/web/components/ui/carousel.tsx
index 0d0fbe95ac..7283176a31 100644
--- a/apps/web/components/ui/carousel.tsx
+++ b/apps/web/components/ui/carousel.tsx
@@ -240,10 +240,10 @@ const CarouselOverlayPrevious = React.forwardRef<HTMLButtonElement, React.Compon
         className={cn(
           "absolute left-2 top-1/2 -translate-y-1/2 z-20",
           "h-8 w-8 rounded-full",
-          "bg-black/30 hover:bg-black/50 backdrop-blur-sm",
+          "bg-black/30 hover:bg-black/50",
           "flex items-center justify-center",
           "text-white/90 hover:text-white",
-          "opacity-0 group-hover:opacity-100 transition-opacity duration-200",
+          "opacity-0 group-hover:opacity-100",
           "focus:outline-none focus:ring-2 focus:ring-white/50",
           className,
         )}
@@ -273,10 +273,10 @@ const CarouselOverlayNext = React.forwardRef<HTMLButtonElement, React.ComponentP
         className={cn(
           "absolute right-2 top-1/2 -translate-y-1/2 z-20",
           "h-8 w-8 rounded-full",
-          "bg-black/30 hover:bg-black/50 backdrop-blur-sm",
+          "bg-black/30 hover:bg-black/50",
           "flex items-center justify-center",
           "text-white/90 hover:text-white",
-          "opacity-0 group-hover:opacity-100 transition-opacity duration-200",
+          "opacity-0 group-hover:opacity-100",
           "focus:outline-none focus:ring-2 focus:ring-white/50",
           className,
         )}
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx
index 28141ceb99..7d2b70f2d0 100644
--- a/apps/web/components/ui/dialog.tsx
+++ b/apps/web/components/ui/dialog.tsx
@@ -23,7 +23,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-[100] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[100] bg-black/80",
       className,
     )}
     {...props}
@@ -77,7 +77,7 @@ const DialogContent = React.forwardRef<
         // sheet-based modals do; callers can still override it through props.
         aria-modal="true"
         className={cn(
-          "fixed left-[50%] top-[50%] z-[100] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+          "fixed left-[50%] top-[50%] z-[100] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-xl",
           className,
         )}
         onPointerDownOutside={handlePointerDownOutside}
diff --git a/apps/web/components/ui/dropdown-menu.tsx b/apps/web/components/ui/dropdown-menu.tsx
index ddabcfdd60..426b7e11c0 100644
--- a/apps/web/components/ui/dropdown-menu.tsx
+++ b/apps/web/components/ui/dropdown-menu.tsx
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
       className,
     )}
     {...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         className,
       )}
       {...props}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
       inset && "pl-8",
       className,
     )}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
       className,
     )}
     checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
       className,
     )}
     {...props}
diff --git a/apps/web/components/ui/mobile-sheet-frame.tsx b/apps/web/components/ui/mobile-sheet-frame.tsx
index 7a3e8e8474..296c3046c5 100644
--- a/apps/web/components/ui/mobile-sheet-frame.tsx
+++ b/apps/web/components/ui/mobile-sheet-frame.tsx
@@ -29,7 +29,7 @@ export const MOBILE_COMPACT_FORM_SHEET: BottomSheetPreset = {
 export const mobileSheetStyles = {
     frame: 'flex min-h-[100dvh] flex-col bg-background',
     centeredFrame: 'flex min-h-0 max-h-[calc(100dvh-2rem)] flex-col bg-background',
-    header: 'sticky top-0 z-10 border-b bg-background/95 px-4 pb-3 pt-[max(0.75rem,env(safe-area-inset-top))] backdrop-blur',
+    header: 'sticky top-0 z-10 border-b bg-background/95 px-4 pb-3 pt-[max(0.75rem,env(safe-area-inset-top))]',
     compactHeader: 'border-b bg-background/95 px-4 pb-3 pt-[max(0.75rem,env(safe-area-inset-top))]',
     title: 'text-xl font-semibold leading-tight text-foreground',
     compactTitle: 'text-lg font-semibold leading-tight text-foreground',
@@ -38,7 +38,7 @@ export const mobileSheetStyles = {
     compactContent: 'space-y-4 px-4 py-4',
     section: 'rounded-xl border border-border/70 bg-card/80 p-4 shadow-sm',
     mutedSection: 'rounded-xl border border-border/70 bg-muted/70 p-4 shadow-sm',
-    footer: 'sticky bottom-0 z-10 border-t bg-background/95 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur',
+    footer: 'sticky bottom-0 z-10 border-t bg-background/95 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3',
     actionRow: 'flex flex-col-reverse items-stretch gap-2 sm:flex-row sm:items-center',
     primaryAction: 'bg-primary text-primary-foreground hover:bg-primary/90',
     meta: 'text-2xs leading-none text-muted-foreground',
@@ -114,7 +114,7 @@ export function MobileSheetStepIndicator({ steps, currentStep, className }: Mobi
                     <li
                         key={step.id}
                         className={cn(
-                            'flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-medium transition-colors',
+                            'flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-medium',
                             isCurrent && 'border-primary/40 bg-primary/10 text-primary',
                             isComplete && 'border-green-200 bg-green-50 text-green-700 dark:border-green-950 dark:bg-green-950/30 dark:text-green-200',
                             !isCurrent && !isComplete && 'border-border/70 bg-muted/40 text-muted-foreground'
diff --git a/apps/web/components/ui/popover.tsx b/apps/web/components/ui/popover.tsx
index 27e5ee69b7..0303378520 100644
--- a/apps/web/components/ui/popover.tsx
+++ b/apps/web/components/ui/popover.tsx
@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-[150] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-[150] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
         className,
       )}
       {...props}
diff --git a/apps/web/components/ui/select.tsx b/apps/web/components/ui/select.tsx
index 6f2525465b..dc85f5a591 100644
--- a/apps/web/components/ui/select.tsx
+++ b/apps/web/components/ui/select.tsx
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
diff --git a/apps/web/components/ui/sheet.tsx b/apps/web/components/ui/sheet.tsx
index 2d2ca7eaa1..332850fb29 100644
--- a/apps/web/components/ui/sheet.tsx
+++ b/apps/web/components/ui/sheet.tsx
@@ -19,7 +19,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80",
       className,
     )}
     {...props}
@@ -29,16 +29,14 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t rounded-t-2xl data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        top: "inset-x-0 top-0 border-b",
+        bottom: "inset-x-0 bottom-0 border-t rounded-t-2xl",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
       },
     },
     defaultVariants: {
diff --git a/apps/web/components/ui/skeleton-loaders.tsx b/apps/web/components/ui/skeleton-loaders.tsx
index d1c9a857b5..9c5d3ba53e 100644
--- a/apps/web/components/ui/skeleton-loaders.tsx
+++ b/apps/web/components/ui/skeleton-loaders.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import { memo } from "react";
+import { useFilledSkeletonCount } from "@/lib/use-filled-skeleton-count";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 
@@ -7,8 +10,10 @@ const CONTAIN_STYLE = { contain: 'content' } as const;
 
 // ========== 리뷰 피드 스켈레톤 ==========
 function FeedSkeletonComponent({ count = 3, className }: { count?: number; className?: string }) {
+    const filled = useFilledSkeletonCount(280, count);
     return (
         <div
+            ref={filled.ref}
             className={cn("w-full max-w-2xl mx-auto p-4 space-y-4", className)}
             style={CONTAIN_STYLE}
             data-testid="feed-skeleton"
@@ -16,7 +21,7 @@ function FeedSkeletonComponent({ count = 3, className }: { count?: number; class
             aria-busy="true"
             aria-label="리뷰 피드를 불러오는 중"
         >
-            {Array.from({ length: count }, (_, i) => (
+            {Array.from({ length: filled.count }, (_, i) => (
                 <div key={i} className="space-y-3 p-4 rounded-lg border border-border/50">
                     <div className="flex items-center gap-3">
                         <Skeleton className="h-9 w-9 rounded-full" />
@@ -111,8 +116,10 @@ function LeaderboardSkeletonComponent({
     className?: string;
     compactLeftPanel?: boolean;
 }) {
+    const filled = useFilledSkeletonCount(compactLeftPanel ? 52 : 56, count);
     return (
         <div
+            ref={filled.ref}
             className={cn(
                 "w-full space-y-3",
                 compactLeftPanel ? "px-2 py-4" : "p-4",
@@ -121,7 +128,7 @@ function LeaderboardSkeletonComponent({
             style={CONTAIN_STYLE}
         >
             {showHeader && <Skeleton className="h-6 w-32" />}
-            {Array.from({ length: count }, (_, i) => (
+            {Array.from({ length: filled.count }, (_, i) => (
                 <div
                     key={i}
                     className={cn(
diff --git a/apps/web/components/ui/tabs.tsx b/apps/web/components/ui/tabs.tsx
index 239ee6a2c6..d3e573143d 100644
--- a/apps/web/components/ui/tabs.tsx
+++ b/apps/web/components/ui/tabs.tsx
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=inactive]:text-stone-700 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background data-[state=inactive]:text-stone-700 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       className,
     )}
     {...props}
diff --git a/apps/web/components/ui/tooltip.tsx b/apps/web/components/ui/tooltip.tsx
index 9e3da71d1f..f958de45ba 100644
--- a/apps/web/components/ui/tooltip.tsx
+++ b/apps/web/components/ui/tooltip.tsx
@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-[9999] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-[9999] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
         className,
       )}
       {...props}
diff --git a/apps/web/components/ui/youtube-thumbnail.tsx b/apps/web/components/ui/youtube-thumbnail.tsx
index 1b50b91f67..98d130abeb 100644
--- a/apps/web/components/ui/youtube-thumbnail.tsx
+++ b/apps/web/components/ui/youtube-thumbnail.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { useCallback, useEffect, useMemo, useState, type CSSProperties, type ReactEventHandler } from 'react';
 import {
     getYoutubeThumbnailCandidates,
+    resolveYoutubeThumbnailCeiling,
     shouldTryNextYoutubeThumbnailCandidate,
 } from '@/lib/youtube-thumbnail';
 
@@ -47,13 +48,15 @@ export function YoutubeThumbnail({
     onError,
 }: YoutubeThumbnailProps) {
     const candidates = useMemo(
-        () => getYoutubeThumbnailCandidates(videoId),
-        [videoId],
+        () => getYoutubeThumbnailCandidates(videoId, resolveYoutubeThumbnailCeiling(sizes)),
+        [sizes, videoId],
     );
     const [candidateIndex, setCandidateIndex] = useState(0);
+    const [paintedSrc, setPaintedSrc] = useState<string | null>(null);
 
     useEffect(() => {
         setCandidateIndex(0);
+        setPaintedSrc(null);
     }, [videoId]);
 
     const safeCandidateIndex = Math.min(candidateIndex, Math.max(candidates.length - 1, 0));
@@ -68,8 +71,9 @@ export function YoutubeThumbnail({
         );
     }, [candidates.length, safeCandidateIndex]);
 
+    const probesPlaceholder = candidateDimensions?.width === 1280;
     useEffect(() => {
-        if (!src) return;
+        if (!src || !probesPlaceholder) return;
 
         let cancelled = false;
         const probe = new window.Image();
@@ -96,36 +100,64 @@ export function YoutubeThumbnail({
             probe.onload = null;
             probe.onerror = null;
         };
-    }, [advanceCandidate, candidates.length, safeCandidateIndex, src]);
+    }, [advanceCandidate, candidates.length, probesPlaceholder, safeCandidateIndex, src]);
 
     if (!src || !candidateDimensions) return null;
 
+    const paintedDimensions = paintedSrc ? getYoutubeThumbnailDimensions(paintedSrc) : undefined;
+    const incomingVisible = paintedSrc === src;
+
     return (
-        <Image
-            src={src}
-            alt={alt}
-            width={candidateDimensions.width}
-            height={candidateDimensions.height}
-            sizes={sizes}
-            quality={85}
-            priority={priority}
-            className={className}
-            style={{
-                position: 'absolute',
-                inset: 0,
-                width: '100%',
-                height: '100%',
-                ...style,
-            }}
-            data-youtube-thumbnail-quality={src.split('/').pop()?.replace('.jpg', '')}
-            onLoad={onLoad}
-            onError={(event) => {
-                if (safeCandidateIndex < candidates.length - 1) {
-                    advanceCandidate();
-                } else {
-                    onError?.(event);
-                }
-            }}
-        />
+        <>
+            {paintedSrc && paintedDimensions && paintedSrc !== src ? (
+                <Image
+                    src={paintedSrc}
+                    alt=""
+                    aria-hidden
+                    width={paintedDimensions.width}
+                    height={paintedDimensions.height}
+                    sizes={sizes}
+                    quality={85}
+                    className={className}
+                    style={{
+                        position: 'absolute',
+                        inset: 0,
+                        width: '100%',
+                        height: '100%',
+                        ...style,
+                    }}
+                />
+            ) : null}
+            <Image
+                src={src}
+                alt={alt}
+                width={candidateDimensions.width}
+                height={candidateDimensions.height}
+                sizes={sizes}
+                quality={85}
+                priority={priority}
+                className={className}
+                style={{
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    ...style,
+                    opacity: incomingVisible || !paintedSrc ? style?.opacity : 0,
+                }}
+                data-youtube-thumbnail-quality={src.split('/').pop()?.replace('.jpg', '')}
+                onLoad={(event) => {
+                    setPaintedSrc(src);
+                    onLoad?.(event);
+                }}
+                onError={(event) => {
+                    if (safeCandidateIndex < candidates.length - 1) {
+                        advanceCandidate();
+                    } else {
+                        onError?.(event);
+                    }
+                }}
+            />
+        </>
     );
 }
diff --git a/apps/web/hooks/use-restaurants.tsx b/apps/web/hooks/use-restaurants.tsx
index 440d8488f8..00c558ca33 100644
--- a/apps/web/hooks/use-restaurants.tsx
+++ b/apps/web/hooks/use-restaurants.tsx
@@ -81,9 +81,9 @@ export const RESTAURANT_MERGE_SELECT = [
     'updated_at',
 ].join(', ');
 const RESTAURANT_COMPACT_SELECT =
-    "id, name:approved_name, approved_name, lat, lng, road_address, jibun_address, categories, review_count, youtube_link, tzuyang_review, source_type, status, created_at";
+    "id, name:approved_name, lat, lng, road_address, jibun_address, categories, review_count, youtube_link, source_type";
 const RESTAURANT_COMPACT_WITH_YOUTUBE_META_SELECT =
-    "id, name:approved_name, approved_name, lat, lng, road_address, jibun_address, categories, review_count, youtube_link, tzuyang_review, youtube_meta, source_type, status, created_at";
+    "id, name:approved_name, lat, lng, road_address, jibun_address, categories, review_count, youtube_link, youtube_meta, source_type";
 const RESTAURANT_FULL_SELECT =
     "id, name:approved_name, lat, lng, road_address, jibun_address, categories, phone, review_count, youtube_link, tzuyang_review, youtube_meta, source_type, english_address, status, created_at";
 
diff --git a/apps/web/hooks/useMapOptimization.ts b/apps/web/hooks/useMapOptimization.ts
index 6dcb28fccc..1662b72e7c 100644
--- a/apps/web/hooks/useMapOptimization.ts
+++ b/apps/web/hooks/useMapOptimization.ts
@@ -108,8 +108,8 @@ type OptimizationPreset = Omit<MapOptimizationSettings, 'getClusterRadius'>;
 const OPTIMIZATION_PRESETS: Record<PerformanceTier, OptimizationPreset> = {
     HIGH: {
         clusterMinPoints: 5,
-        clusterAnimationEnabled: true,
-        clusterAnimationInterval: 5000,
+        clusterAnimationEnabled: false,
+        clusterAnimationInterval: 0,
         idleDebounceMs: 150,
         mapUpdateDebounceMs: 150,
         viewportFilterEnabled: true,
diff --git a/apps/web/lib/admin/admin-module-routing.ts b/apps/web/lib/admin/admin-module-routing.ts
index f36fbdd931..95628eb3b4 100644
--- a/apps/web/lib/admin/admin-module-routing.ts
+++ b/apps/web/lib/admin/admin-module-routing.ts
@@ -1,7 +1,6 @@
 export const ADMIN_CONSOLE_MODULE_IDS = [
   "overview",
   "routes",
-  "map-overlays",
   "restaurants",
   "restaurant-refresh-history",
   "submissions",
diff --git a/apps/web/lib/admin/sidebar-order.ts b/apps/web/lib/admin/sidebar-order.ts
index 116003010d..2a41dd4efb 100644
--- a/apps/web/lib/admin/sidebar-order.ts
+++ b/apps/web/lib/admin/sidebar-order.ts
@@ -5,7 +5,6 @@ export const ADMIN_SIDEBAR_ITEM_IDS = [
   "restaurant-refresh-history",
   "submissions",
   "reviews",
-  "map-overlays",
   "users",
   "banners",
   "insights",
@@ -30,7 +29,7 @@ export const DEFAULT_ADMIN_SIDEBAR_ORDER: AdminSidebarOrderPreference = {
   items: {
     홈: ["overview"],
     검수: ["restaurants", "restaurant-refresh-history", "submissions", "reviews"],
-    운영: ["map-overlays", "users", "banners", "insights", "pipeline"],
+    운영: ["users", "banners", "insights", "pipeline"],
     실험실: ["youtube-thumbnail-generator", "storyboard", "routes", "llm", "audit"],
   },
 };
diff --git a/apps/web/lib/cluster-marker.ts b/apps/web/lib/cluster-marker.ts
index 71d065a7ea..2a64a411c5 100644
--- a/apps/web/lib/cluster-marker.ts
+++ b/apps/web/lib/cluster-marker.ts
@@ -11,48 +11,34 @@ import { escapeHtmlAttribute } from './html-escape';
  */
 class ClusterAnimationManager {
   private categoryIndices: Map<number, number> = new Map();
-  private animationFrameId: number | null = null;
+  private timerId: ReturnType<typeof setTimeout> | null = null;
   private listeners: Set<() => void> = new Set();
-  private lastUpdateTime: number = 0;
 
   /**
-   * 애니메이션 시작 (requestAnimationFrame 사용)
-   *
-   * @param intervalMs 애니메이션 주기 (ms)
+   * 카테고리 순환은 프레임마다 돌 필요가 없다.
+   * 주기만큼만 한 번 깨우면 호출 횟수는 60 / (intervalMs/1000) 배 줄어든다.
    */
   public start(intervalMs: number = 1000): void {
-    if (this.animationFrameId) return;
-
-    const animate = (currentTime: number) => {
-      // 마지막 업데이트로부터 intervalMs가 경과했는지 확인
-      if (currentTime - this.lastUpdateTime >= intervalMs) {
-        // 모든 클러스터의 카테고리 인덱스 증가
-        this.categoryIndices.forEach((index, clusterId) => {
-          this.categoryIndices.set(clusterId, index + 1);
-        });
-
-        // 리스너들에게 업데이트 알림
-        this.listeners.forEach((listener) => listener());
-
-        this.lastUpdateTime = currentTime;
-      }
-
-      // 다음 프레임 예약
-      this.animationFrameId = requestAnimationFrame(animate);
+    if (this.timerId !== null || intervalMs <= 0) return;
+
+    const tick = () => {
+      this.categoryIndices.forEach((index, clusterId) => {
+        this.categoryIndices.set(clusterId, index + 1);
+      });
+      this.listeners.forEach((listener) => listener());
+      this.timerId = setTimeout(tick, intervalMs);
     };
 
-    // 첫 프레임 시작
-    this.lastUpdateTime = performance.now();
-    this.animationFrameId = requestAnimationFrame(animate);
+    this.timerId = setTimeout(tick, intervalMs);
   }
 
   /**
    * 애니메이션 정지
    */
   public stop(): void {
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-      this.animationFrameId = null;
+    if (this.timerId !== null) {
+      clearTimeout(this.timerId);
+      this.timerId = null;
     }
   }
 
@@ -171,8 +157,7 @@ const createCategoryImageHTML = ({
               alt="${alt}"
               style="width: 100%; height: 100%; object-fit: contain;"
               draggable="false"
-              decoding="async"
-              fetchpriority="low"
+              decoding="sync"
           />
         </picture>
   `;
@@ -261,9 +246,7 @@ export const createClusterMarkerHTML = (
           border-radius: 12px;
           min-width: 18px;
           text-align: center;
-          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
           z-index: ${zIndex + 1};
-          backdrop-filter: blur(2px);
           border: 1px solid rgba(255,255,255,0.2);
         "
       >${count >= 1000 ? '999+' : count}</div>
@@ -296,17 +279,11 @@ export const createIndividualMarkerHTML = (
   const displayVisitCount = normalizedVisitCount >= 100 ? '99+' : String(normalizedVisitCount);
   const safeRestaurantId = restaurantId ? escapeHtmlAttribute(restaurantId) : null;
 
-  const dropShadow = isSelected
-    ? 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.9))'
-    : 'drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 0 1px rgba(255, 255, 255, 0.8))';
-
   const transform = isSelected ? 'scale(1.15) translateY(-5px)' : 'scale(1)';
-  const animationClass = isSelected ? 'marker-bounce' : '';
   const zIndex = isSelected ? '100' : '1';
 
   return `
     <div
-      class="${animationClass}"
       style="
         width: ${size}px;
         height: ${size}px;
@@ -314,9 +291,7 @@ export const createIndividualMarkerHTML = (
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         transform: ${transform};
-        filter: ${dropShadow};
         position: relative;
         z-index: ${zIndex};
         user-select: none;
@@ -343,7 +318,6 @@ export const createIndividualMarkerHTML = (
             background-color: #dc2626;
             color: #ffffff;
             border: 2px solid #ffffff;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -364,60 +338,7 @@ export const createIndividualMarkerHTML = (
  * 클러스터 마커 CSS 애니메이션 주입
  */
 export const injectClusterCSS = (): void => {
-  if (document.getElementById('cluster-marker-styles')) return;
-
-  const style = document.createElement('style');
-  style.id = 'cluster-marker-styles';
-  style.textContent = `
-    @keyframes cluster-pulse {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(1.05); }
-    }
-
-    @keyframes cluster-fade {
-      0% {
-        opacity: 0;
-        transform: scale(0.8);
-      }
-      15% {
-        opacity: 1;
-        transform: scale(1);
-      }
-      85% {
-        opacity: 1;
-        transform: scale(1);
-      }
-      100% {
-        opacity: 0;
-        transform: scale(0.8);
-      }
-    }
-
-    @keyframes marker-bounce {
-      0%, 100% { transform: scale(1.15) translateY(0); }
-      50% { transform: scale(1.15) translateY(-4px); }
-    }
-
-    .marker-bounce {
-      animation: marker-bounce 1s ease-in-out infinite;
-    }
-
-    .cluster-icon {
-      animation: cluster-fade 6s ease-in-out infinite !important;
-    }
-
-    .cluster-marker-container:hover .cluster-circle {
-      transform: scale(1.1);
-      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.3);
-    }
-
-    .marker-fade-out {
-      opacity: 0 !important;
-      transition: opacity 0.3s ease-out !important;
-    }
-  `;
-
-  document.head.appendChild(style);
+  return;
 };
 
 /**
diff --git a/apps/web/lib/clustering.ts b/apps/web/lib/clustering.ts
index a34c136e12..09d363cbef 100644
--- a/apps/web/lib/clustering.ts
+++ b/apps/web/lib/clustering.ts
@@ -20,7 +20,7 @@ type GeoJsonProperties = Record<string, unknown>;
  */
 export interface ClusterProperties extends GeoJsonProperties {
     restaurantId: string;
-    name: string;
+    name?: string;
     category: string;
     categories?: string[];
     address?: string | null;
@@ -125,12 +125,8 @@ export const restaurantsToGeoJSON = (restaurants: Restaurant[]): RestaurantFeatu
             type: 'Feature' as const,
             properties: {
                 restaurantId: r.id,
-                name: r.name,
                 category: (Array.isArray(r.categories) ? r.categories[0] : r.category || '기타') as string,
-                categories: r.categories || (r.category ? [r.category] : []),
-                // 추가 속성들
                 address: r.address,
-                reviewCount: r.review_count,
             },
             geometry: {
                 type: 'Point' as const,
@@ -216,10 +212,20 @@ export const expandCluster = (
  * @param clusterId 클러스터 ID
  * @returns 중복 제거된 카테고리 배열
  */
+const clusterCategoryCache = new WeakMap<Supercluster<ClusterProperties>, Map<number, string[]>>();
+
 export const getClusterCategories = (
     index: Supercluster<ClusterProperties>,
     clusterId: number
 ): string[] => {
+    let cache = clusterCategoryCache.get(index);
+    if (!cache) {
+        cache = new Map();
+        clusterCategoryCache.set(index, cache);
+    }
+    const cached = cache.get(clusterId);
+    if (cached) return cached;
+
     const leaves = index.getLeaves(clusterId, Infinity);
     const categoryCounts = new Map<string, number>();
 
@@ -230,10 +236,12 @@ export const getClusterCategories = (
         }
     });
 
-    return Array.from(categoryCounts.entries())
+    const categories = Array.from(categoryCounts.entries())
         .sort((a, b) => b[1] - a[1])
         .slice(0, 3)
         .map((entry) => entry[0]);
+    cache.set(clusterId, categories);
+    return categories;
 };
 
 /**
diff --git a/apps/web/lib/debug-log.ts b/apps/web/lib/debug-log.ts
index 9e2d1b8cce..a52326416c 100644
--- a/apps/web/lib/debug-log.ts
+++ b/apps/web/lib/debug-log.ts
@@ -1,5 +1,3 @@
-import { sanitizePrivacyValue } from '@/lib/privacy/sanitize';
-
 export const isDevelopment = process.env.NODE_ENV === 'development';
 
 export const DEBUG_LOG_EVENT = {
@@ -40,17 +38,11 @@ const DEBUG_LOG_EVENTS = new Set<string>(Object.values(DEBUG_LOG_EVENT));
 const DEBUG_LOG_REASON_CODES = new Set<string>(Object.values(DEBUG_LOG_REASON_CODE));
 
 const sanitizeDebugMetadata = (metadata: unknown): DebugLogMetadata | undefined => {
-    const { value } = sanitizePrivacyValue(metadata, {
-        maxDepth: 2,
-        maxEntries: 4,
-        maxStringLength: 64,
-    });
-
-    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    if (!metadata || typeof metadata !== 'object' || Array.isArray(metadata)) {
         return undefined;
     }
 
-    const reason = (value as Record<string, unknown>).reason;
+    const reason = (metadata as Record<string, unknown>).reason;
     if (typeof reason !== 'string' || !DEBUG_LOG_REASON_CODES.has(reason)) {
         return undefined;
     }
diff --git a/apps/web/lib/home-map-mode-filter.ts b/apps/web/lib/home-map-mode-filter.ts
index 0c5ef3f269..f214055a31 100644
--- a/apps/web/lib/home-map-mode-filter.ts
+++ b/apps/web/lib/home-map-mode-filter.ts
@@ -198,38 +198,76 @@ const restaurantMatchesCountryKeywords = (
  * 두 값 모두 부작용이 없어, 분기가 실제로 쓰는 것만 계산해도 결과는 같습니다.
  * 해외 국가가 선택된 경우 좌표 검사는 원래도 사용되지 않았습니다.
  */
+const modeListCache = new WeakMap<readonly Restaurant[], Partial<Record<HomeMapMode, {
+    result: Restaurant[];
+    derived: RestaurantDerivedEntry[];
+}>>>();
+let lastModeFilterExaminationCount = 0;
+
+export function getLastModeFilterExaminationCount() {
+    return lastModeFilterExaminationCount;
+}
+
 export const filterHomeMapRestaurantsByMode = (
     restaurants: readonly Restaurant[],
     mode: HomeMapMode,
     countryKeywords: readonly string[] | null,
 ) => {
-    if (!restaurants.length) return [] as Restaurant[];
+    if (!restaurants.length) return restaurants as Restaurant[];
+
+    if (!countryKeywords?.length) {
+        const cached = modeListCache.get(restaurants)?.[mode];
+        if (cached && cached.derived.length === restaurants.length) {
+            let sameDerived = true;
+            for (let index = 0; index < restaurants.length; index += 1) {
+                const restaurant = restaurants[index];
+                if (!restaurant || resolveRestaurantDerived(restaurant) !== cached.derived[index]) {
+                    sameDerived = false;
+                    break;
+                }
+            }
+            if (sameDerived) {
+                lastModeFilterExaminationCount = 0;
+                return cached.result;
+            }
+        }
+    }
 
     const countryBuckets = mode === 'overseas' && countryKeywords && countryKeywords.length
         ? resolveKeywordBuckets(countryKeywords)
         : null;
 
-    const kept: Restaurant[] = [];
+    const derived: RestaurantDerivedEntry[] = [];
+    let kept: Restaurant[] | null = null;
     for (let index = 0; index < restaurants.length; index += 1) {
         const restaurant = restaurants[index];
-        if (!restaurant) continue;
-
-        const derived = resolveRestaurantDerived(restaurant);
-
-        if (countryBuckets) {
-            if (restaurantMatchesCountryKeywords(derived, countryKeywords!, countryBuckets)) {
-                kept.push(restaurant);
-            }
+        if (!restaurant) {
+            if (!kept) kept = restaurants.slice(0, index).filter((item): item is Restaurant => Boolean(item));
             continue;
         }
 
-        if (mode === 'domestic') {
-            if (!derived.overseasByCoordinate && !derived.hasOverseasKeyword) kept.push(restaurant);
+        const entry = resolveRestaurantDerived(restaurant);
+        derived.push(entry);
+        const matches = countryBuckets
+            ? restaurantMatchesCountryKeywords(entry, countryKeywords!, countryBuckets)
+            : mode === 'domestic'
+                ? !entry.overseasByCoordinate && !entry.hasOverseasKeyword
+                : entry.overseasByCoordinate || entry.hasOverseasKeyword;
+        if (matches) {
+            if (kept) kept.push(restaurant);
             continue;
         }
-
-        if (derived.overseasByCoordinate || derived.hasOverseasKeyword) kept.push(restaurant);
+        if (!kept) {
+            kept = restaurants.slice(0, index).filter((item): item is Restaurant => Boolean(item));
+        }
     }
 
-    return kept;
+    const result = kept ?? (restaurants as Restaurant[]);
+    lastModeFilterExaminationCount = restaurants.length;
+    if (!countryBuckets && derived.length === restaurants.length) {
+        const entry = modeListCache.get(restaurants) ?? {};
+        entry[mode] = { result, derived };
+        modeListCache.set(restaurants, entry);
+    }
+    return result;
 };
diff --git a/apps/web/lib/home-map-swipe-restaurants.ts b/apps/web/lib/home-map-swipe-restaurants.ts
index 4bb6414a0b..a8074c1a2a 100644
--- a/apps/web/lib/home-map-swipe-restaurants.ts
+++ b/apps/web/lib/home-map-swipe-restaurants.ts
@@ -41,35 +41,59 @@ export const isSameRestaurantForSwipe = (a: Restaurant, b: Restaurant) => {
  * 이름별 유지 목록만 조회하면 pairwise 비교와 같은 결과를 O(n)에 얻습니다.
  * 반환 순서와 유지되는 객체 정체성은 이전 구현과 동일합니다.
  */
+const uniqueRestaurantLists = new WeakSet<readonly Restaurant[]>();
+let lastDedupeExaminationCount = 0;
+
+export function getLastDedupeExaminationCount() {
+    return lastDedupeExaminationCount;
+}
+
 export const dedupeHomeMapRestaurants = (restaurants: Restaurant[]) => {
-    const uniqueRestaurants: Restaurant[] = [];
+    if (uniqueRestaurantLists.has(restaurants)) {
+        lastDedupeExaminationCount = 0;
+        return restaurants;
+    }
+
     const claimedIds = new Set<string>();
     const keptIds = new Set<string>();
     const keptByName = new Map<string, Restaurant[]>();
 
-    for (const restaurant of restaurants) {
-        if (!restaurant) continue;
-
-        const isDuplicate =
-            claimedIds.has(restaurant.id) ||
-            Boolean(restaurant.mergedRestaurants?.some((merged) => keptIds.has(merged.id))) ||
-            Boolean(keptByName.get(restaurant.name)?.some((existing) => hasSameSwipeCoordinates(existing, restaurant)));
-
-        if (isDuplicate) continue;
+    const isDuplicate = (restaurant: Restaurant) => (
+        claimedIds.has(restaurant.id) ||
+        Boolean(restaurant.mergedRestaurants?.some((merged) => keptIds.has(merged.id))) ||
+        Boolean(keptByName.get(restaurant.name)?.some((existing) => hasSameSwipeCoordinates(existing, restaurant)))
+    );
 
-        uniqueRestaurants.push(restaurant);
+    const claim = (restaurant: Restaurant) => {
         keptIds.add(restaurant.id);
         claimedIds.add(restaurant.id);
-
         for (const merged of restaurant.mergedRestaurants ?? []) {
             claimedIds.add(merged.id);
         }
-
         const sameNamePeers = keptByName.get(restaurant.name);
         if (sameNamePeers) sameNamePeers.push(restaurant);
         else keptByName.set(restaurant.name, [restaurant]);
+    };
+
+    for (let index = 0; index < restaurants.length; index += 1) {
+        const restaurant = restaurants[index];
+        if (!restaurant || isDuplicate(restaurant)) {
+            const uniqueRestaurants = restaurants.slice(0, index).filter((item): item is Restaurant => Boolean(item));
+            for (let cursor = index; cursor < restaurants.length; cursor += 1) {
+                const next = restaurants[cursor];
+                if (!next || isDuplicate(next)) continue;
+                uniqueRestaurants.push(next);
+                claim(next);
+            }
+            lastDedupeExaminationCount = restaurants.length;
+            uniqueRestaurantLists.add(uniqueRestaurants);
+            return uniqueRestaurants;
+        }
+        claim(restaurant);
     }
 
-    return uniqueRestaurants;
+    lastDedupeExaminationCount = restaurants.length;
+    uniqueRestaurantLists.add(restaurants);
+    return restaurants;
 };
 
diff --git a/apps/web/lib/home-map-youtube-kpi.ts b/apps/web/lib/home-map-youtube-kpi.ts
index cfd56ea623..da5aa3aba3 100644
--- a/apps/web/lib/home-map-youtube-kpi.ts
+++ b/apps/web/lib/home-map-youtube-kpi.ts
@@ -153,6 +153,26 @@ export function mergeHomeMapYoutubeKpiMetrics(
     });
 }
 
+export async function enrichRestaurantsWithYouTubeKpiMetrics(
+    restaurants: Restaurant[],
+): Promise<Restaurant[]> {
+    const videoIds = collectHomeMapYoutubeVideoIds(restaurants);
+    if (videoIds.length === 0) return restaurants;
+
+    try {
+        return mergeHomeMapYoutubeKpiMetrics(
+            restaurants,
+            await fetchHomeMapYoutubeKpiMetrics(videoIds),
+        );
+    } catch (error) {
+        const failureCode = error instanceof Error && /^home-youtube-kpi:\d{3}$/.test(error.message)
+            ? error.message
+            : (error instanceof SyntaxError ? 'invalid-response' : 'request-failed');
+        console.warn(`[home-map-youtube-kpi] metric enrichment failed (${failureCode})`);
+        return restaurants;
+    }
+}
+
 export async function enrichRestaurantsWithHomeMapYoutubeKpiMetrics(
     restaurants: Restaurant[],
     themeId: HomeMapThemeFilterId | null,
diff --git a/apps/web/lib/html-escape.ts b/apps/web/lib/html-escape.ts
index d7e980308e..1ffdc21197 100644
--- a/apps/web/lib/html-escape.ts
+++ b/apps/web/lib/html-escape.ts
@@ -1,4 +1,4 @@
-export const MARKER_IMAGE_FALLBACK = '/images/maker-images/chicken.png';
+export const MARKER_IMAGE_FALLBACK = '/images/maker-images/webp/chicken.webp';
 
 const MAX_MARKER_IMAGE_URL_LENGTH = 2048;
 const MAX_PERCENT_DECODE_PASSES = 4;
diff --git a/apps/web/lib/map-render-guard.ts b/apps/web/lib/map-render-guard.ts
index 3e35225462..ad506287da 100644
--- a/apps/web/lib/map-render-guard.ts
+++ b/apps/web/lib/map-render-guard.ts
@@ -48,25 +48,54 @@ function roundCoord(value: number): number {
     return Math.round(value * factor) / factor;
 }
 
+let lastBoundsSignature: string | null = null;
+let lastBoundsSouth = Number.NaN;
+let lastBoundsWest = Number.NaN;
+let lastBoundsNorth = Number.NaN;
+let lastBoundsEast = Number.NaN;
+
 function makeBoundsSignature(bounds: RenderBoundsLike | null): string | null {
     if (!bounds) return null;
 
-    return [
-        roundCoord(bounds.south),
-        roundCoord(bounds.west),
-        roundCoord(bounds.north),
-        roundCoord(bounds.east),
-    ].join(",");
+    const south = roundCoord(bounds.south);
+    const west = roundCoord(bounds.west);
+    const north = roundCoord(bounds.north);
+    const east = roundCoord(bounds.east);
+    if (
+        south === lastBoundsSouth &&
+        west === lastBoundsWest &&
+        north === lastBoundsNorth &&
+        east === lastBoundsEast &&
+        lastBoundsSignature !== null
+    ) {
+        return lastBoundsSignature;
+    }
+
+    lastBoundsSouth = south;
+    lastBoundsWest = west;
+    lastBoundsNorth = north;
+    lastBoundsEast = east;
+    lastBoundsSignature = [south, west, north, east].join(',');
+    return lastBoundsSignature;
 }
 
+const displayIdsSignatureCache = new WeakMap<readonly string[], string>();
+
 function makeDisplayIdsSignature(ids: readonly string[]): string {
-    return [...new Set(ids)]
+    const cached = displayIdsSignatureCache.get(ids);
+    if (cached !== undefined) return cached;
+
+    const signature = [...new Set(ids)]
         .filter(Boolean)
         .sort()
         .join("|");
+    displayIdsSignatureCache.set(ids, signature);
+    return signature;
 }
 
 function makeMarkerKindSignature(entries: readonly MarkerRenderKindEntry[] = []): string {
+    if (entries.length === 0) return '';
+
     const latestById = new Map<string, MarkerRenderKindEntry>();
 
     entries.forEach((entry) => {
@@ -84,6 +113,42 @@ function makeMarkerKindSignature(entries: readonly MarkerRenderKindEntry[] = [])
         .join("|");
 }
 
+const MODE_SIGNATURES = ['000', '001', '010', '011', '100', '101', '110', '111'] as const;
+
+function modeSignature(isClusterMode: boolean, isRegionalClusterMode: boolean, isSeoulDistrictMode: boolean) {
+    return MODE_SIGNATURES[
+        (isClusterMode ? 4 : 0) + (isRegionalClusterMode ? 2 : 0) + (isSeoulDistrictMode ? 1 : 0)
+    ];
+}
+
+let lastMarkerLayerSignature = '';
+let lastMarkerLayerShowUser = true;
+let lastMarkerLayerVersion = '';
+let lastMarkerLayerKinds = '';
+
+function markerLayerSignature(
+    showUserSubmittedMarkers: boolean | undefined,
+    markerLayerVersion: string | undefined,
+    markerKindEntries: readonly MarkerRenderKindEntry[] | undefined,
+) {
+    const showUser = showUserSubmittedMarkers ?? true;
+    const version = markerLayerVersion ?? 'default';
+    const kinds = makeMarkerKindSignature(markerKindEntries);
+    if (
+        showUser === lastMarkerLayerShowUser &&
+        version === lastMarkerLayerVersion &&
+        kinds === lastMarkerLayerKinds
+    ) {
+        return lastMarkerLayerSignature;
+    }
+
+    lastMarkerLayerShowUser = showUser;
+    lastMarkerLayerVersion = version;
+    lastMarkerLayerKinds = kinds;
+    lastMarkerLayerSignature = `user-submitted:${showUser ? '1' : '0'};version:${version};${kinds}`;
+    return lastMarkerLayerSignature;
+}
+
 export function buildMarkerRenderSignature(input: MarkerRenderSignatureInput): MarkerRenderSignature {
     return {
         zoom: input.zoom,
@@ -91,12 +156,12 @@ export function buildMarkerRenderSignature(input: MarkerRenderSignatureInput): M
         displayRestaurantIdsSignature: makeDisplayIdsSignature(input.displayRestaurantIds),
         selectedRestaurantId: input.selectedRestaurantId,
         searchedRestaurantId: input.searchedRestaurantId ?? null,
-        modeSignature: `${input.isClusterMode ? "1" : "0"}${input.isRegionalClusterMode ? "1" : "0"}${input.isSeoulDistrictMode ? "1" : "0"}`,
-        markerLayerSignature: [
-            `user-submitted:${(input.showUserSubmittedMarkers ?? true) ? "1" : "0"}`,
-            `version:${input.markerLayerVersion ?? "default"}`,
-            makeMarkerKindSignature(input.markerKindEntries),
-        ].join(";"),
+        modeSignature: modeSignature(input.isClusterMode, input.isRegionalClusterMode, input.isSeoulDistrictMode),
+        markerLayerSignature: markerLayerSignature(
+            input.showUserSubmittedMarkers,
+            input.markerLayerVersion,
+            input.markerKindEntries,
+        ),
     };
 }
 
diff --git a/apps/web/lib/map-view-helpers.ts b/apps/web/lib/map-view-helpers.ts
index 0f95a61051..d72654e658 100644
--- a/apps/web/lib/map-view-helpers.ts
+++ b/apps/web/lib/map-view-helpers.ts
@@ -34,29 +34,29 @@ export function mergeSearchedRestaurant(restaurants: Restaurant[], searchedResta
 }
 
 export function getMapViewMarkerIcon(categories: string | string[] | null | undefined) {
-    if (!categories) return '/images/maker-images/korean.png';
+    if (!categories) return '/images/maker-images/webp/korean.webp';
 
     const category = Array.isArray(categories) ? categories[0] : categories;
     const imageMap: Record<string, string> = {
-        고기: '/images/maker-images/meat_bbq.png',
-        치킨: '/images/maker-images/chicken.png',
-        한식: '/images/maker-images/korean.png',
-        중식: '/images/maker-images/chinese.png',
-        일식: '/images/maker-images/cutlet_sashimi.png',
-        양식: '/images/maker-images/western.png',
-        분식: '/images/maker-images/snack_bar.png',
-        '카페·디저트': '/images/maker-images/cafe_dessert.png',
-        아시안: '/images/maker-images/asian.png',
-        패스트푸드: '/images/maker-images/fastfood.png',
-        '족발·보쌈': '/images/maker-images/pork_feet.png',
-        '돈까스·회': '/images/maker-images/cutlet_sashimi.png',
-        피자: '/images/maker-images/pizza.png',
-        '찜·탕': '/images/maker-images/stew.png',
-        야식: '/images/maker-images/late_night.png',
-        도시락: '/images/maker-images/lunch_box.png',
+        고기: '/images/maker-images/webp/meat_bbq.webp',
+        치킨: '/images/maker-images/webp/chicken.webp',
+        한식: '/images/maker-images/webp/korean.webp',
+        중식: '/images/maker-images/webp/chinese.webp',
+        일식: '/images/maker-images/webp/cutlet_sashimi.webp',
+        양식: '/images/maker-images/webp/western.webp',
+        분식: '/images/maker-images/webp/snack_bar.webp',
+        '카페·디저트': '/images/maker-images/webp/cafe_dessert.webp',
+        아시안: '/images/maker-images/webp/asian.webp',
+        패스트푸드: '/images/maker-images/webp/fastfood.webp',
+        '족발·보쌈': '/images/maker-images/webp/pork_feet.webp',
+        '돈까스·회': '/images/maker-images/webp/cutlet_sashimi.webp',
+        피자: '/images/maker-images/webp/pizza.webp',
+        '찜·탕': '/images/maker-images/webp/stew.webp',
+        야식: '/images/maker-images/webp/late_night.webp',
+        도시락: '/images/maker-images/webp/lunch_box.webp',
     };
 
-    return imageMap[category] || '/images/maker-images/korean.png';
+    return imageMap[category] || '/images/maker-images/webp/korean.webp';
 }
 
 export function getAdjustedSelectedRestaurantLng({
diff --git a/apps/web/lib/map-view-marker-helpers.ts b/apps/web/lib/map-view-marker-helpers.ts
index c9a8ccdaa2..abb7a4dcd2 100644
--- a/apps/web/lib/map-view-marker-helpers.ts
+++ b/apps/web/lib/map-view-marker-helpers.ts
@@ -41,7 +41,7 @@ export function buildMapViewMarkerHtml({
     const safeName = escapeHtmlAttribute(name);
 
     return `
-        <div class="relative ${markerSizeClasses.join(' ')} cursor-pointer transition-all duration-300 drop-shadow-md ${isSelected ? 'animate-bounce' : ''} hover:scale-125">
+        <div class="relative ${markerSizeClasses.join(' ')} cursor-pointer hover:scale-125">
           <img src="${safeImagePath}" alt="${safeName}" class="h-full w-full object-contain" draggable="false" />
         </div>
       `;
@@ -66,9 +66,5 @@ export function applyMapViewMarkerSelectedState({
         ...(isSelected ? MAP_VIEW_MARKER_SELECTED_SIZE_CLASSES : MAP_VIEW_MARKER_BASE_SIZE_CLASSES),
     );
 
-    if (isSelected) {
-        innerDiv.classList.add('animate-bounce');
-    }
-
     return true;
 }
diff --git a/apps/web/lib/marker-pool.ts b/apps/web/lib/marker-pool.ts
index 7f04cb0ccb..5eaa7430a6 100644
--- a/apps/web/lib/marker-pool.ts
+++ b/apps/web/lib/marker-pool.ts
@@ -28,6 +28,38 @@ interface MarkerPositionLike {
     equals?: (position: unknown) => boolean;
 }
 
+const MARKER_NODE_SELECTOR = '[data-testid="marker"]';
+const REVIEW_BUBBLE_SELECTOR = '[data-visible-marker-review-bubble="true"]';
+
+function patchStableMarkerReviewBubble(element: HTMLElement, nextContent: unknown): boolean {
+    if (typeof nextContent !== 'string' || typeof document === 'undefined') return false;
+    if (!nextContent.includes('data-testid="marker"') && !element.querySelector(MARKER_NODE_SELECTOR)) {
+        return false;
+    }
+
+    const currentMarker = element.querySelector(MARKER_NODE_SELECTOR);
+    if (!currentMarker) return false;
+
+    const template = document.createElement('template');
+    template.innerHTML = nextContent;
+    const nextMarker = template.content.querySelector(MARKER_NODE_SELECTOR);
+    if (!nextMarker) return false;
+    if (currentMarker.getAttribute('style') !== nextMarker.getAttribute('style')) return false;
+
+    const currentImage = currentMarker.querySelector('img');
+    const nextImage = nextMarker.querySelector('img');
+    if ((currentImage?.getAttribute('src') ?? '') !== (nextImage?.getAttribute('src') ?? '')) return false;
+
+    const hosts = [currentMarker, currentMarker.parentElement].filter((host): host is Element => Boolean(host));
+    hosts.forEach((host) => {
+        host.querySelectorAll(`:scope > ${REVIEW_BUBBLE_SELECTOR}`).forEach((node) => node.remove());
+    });
+
+    const nextBubble = template.content.querySelector(REVIEW_BUBBLE_SELECTOR);
+    if (nextBubble) currentMarker.insertBefore(nextBubble, currentMarker.firstChild);
+    return true;
+}
+
 interface PooledMarker {
     __onClick?: (event: MarkerClickEvent) => void;
     getMap: () => unknown;
@@ -52,9 +84,6 @@ export class MarkerPool {
     /** 현재 활성화된 마커 맵 (ID → Marker) */
     private active: Map<string, PooledMarker> = new Map();
 
-    /** 페이드아웃 후 풀 반환을 예약한 타이머 (clear 시 함께 취소) */
-    private pendingReturns: Set<ReturnType<typeof setTimeout>> = new Set();
-
     /** 풀 최대 크기 (메모리 제한) */
     private readonly MAX_POOL_SIZE = 1000;
 
@@ -102,7 +131,6 @@ export class MarkerPool {
         if (this.active.has(id)) {
             marker = this.active.get(id)!;
         }
-        // 2. 풀에서 가져오기
         else if (this.pool.length > 0) {
             marker = this.pool.pop()!;
             this.stats.reused++;
@@ -155,7 +183,15 @@ export class MarkerPool {
                 (currentAnchor?.y ?? null) !== (nextAnchor?.y ?? null);
 
             if (isContentDifferent || isAnchorDifferent) {
-                marker.setIcon(icon);
+                const element = marker.getElement();
+                const patched = !isAnchorDifferent
+                    && typeof element?.querySelector === 'function'
+                    && patchStableMarkerReviewBubble(element, icon.content);
+                if (patched && currentIcon) {
+                    currentIcon.content = icon.content;
+                } else if (!patched) {
+                    marker.setIcon(icon);
+                }
             }
         }
 
@@ -175,38 +211,12 @@ export class MarkerPool {
         const marker = this.active.get(id);
         if (!marker) return;
 
-        // [UX] 즉시 삭제 대신 페이드아웃 적용
-        // 깜빡임 없는 전환(Seamless Transition)을 위해 300ms 동안 유지
-        const element = marker.getElement();
-        if (element) {
-            element.classList.add('marker-fade-out');
-        }
-
         this.active.delete(id);
-
-        // CSS Transition 시간(300ms) 후 실제 제거 및 풀 반환
-        const timer = setTimeout(() => {
-            this.pendingReturns.delete(timer);
-
-            // 지도에서 제거
-            marker.setMap(null);
-
-            // 다음 재사용을 위해 상태 초기화
-            if (element) {
-                element.classList.remove('marker-fade-out');
-                element.style.opacity = '';
-            }
-
-            // 풀 크기 제한 체크
-            if (this.pool.length < this.MAX_POOL_SIZE) {
-                this.pool.push(marker);
-            } else {
-                // 풀이 가득 차면 마커 완전 삭제(참조 제거)
-            }
-
-            this.stats.released++;
-        }, 300);
-        this.pendingReturns.add(timer);
+        marker.setMap(null);
+        if (this.pool.length < this.MAX_POOL_SIZE) {
+            this.pool.push(marker);
+        }
+        this.stats.released++;
     }
 
     /**
@@ -290,13 +300,6 @@ export class MarkerPool {
      * 풀 전체 정리 (컴포넌트 언마운트 시)
      */
     public clear(): void {
-        // 예약된 반환 콜백을 취소해 clear 이후 풀이 다시 채워지지 않게 한다
-        for (const timer of this.pendingReturns) {
-            clearTimeout(timer);
-        }
-        this.pendingReturns.clear();
-
-        // 모든 활성 마커 지도에서 제거
         this.active.forEach((marker) => {
             marker.setMap(null);
         });
diff --git a/apps/web/lib/mobile-home-search-selection.ts b/apps/web/lib/mobile-home-search-selection.ts
index 9dc1998477..a3b5681a8d 100644
--- a/apps/web/lib/mobile-home-search-selection.ts
+++ b/apps/web/lib/mobile-home-search-selection.ts
@@ -22,13 +22,19 @@ export const isSameRestaurantSelection = (left: RestaurantMatch, right: Restaura
     if (!left || !right) return false;
     if (left.id === right.id) return true;
 
+    const leftMerged = left.mergedRestaurants;
+    const rightMerged = right.mergedRestaurants;
+    if ((!leftMerged || leftMerged.length === 0) && (!rightMerged || rightMerged.length === 0)) {
+        return hasSameNameAndCoordinate(left, right);
+    }
+
     const leftIds = new Set([
         left.id,
-        ...(left.mergedRestaurants?.map((restaurant) => restaurant.id) ?? []),
+        ...(leftMerged?.map((restaurant) => restaurant.id) ?? []),
     ]);
     const rightIds = [
         right.id,
-        ...(right.mergedRestaurants?.map((restaurant) => restaurant.id) ?? []),
+        ...(rightMerged?.map((restaurant) => restaurant.id) ?? []),
     ];
 
     if (rightIds.some((id) => leftIds.has(id))) {
@@ -136,12 +142,28 @@ export const resolveReleasedSearchSelectionResetPlan = ({
 };
 
 const dedupeRestaurants = (restaurants: Restaurant[]): Restaurant[] => {
+    const seenIds = new Set<string>();
+    const seenMergedIds = new Set<string>();
+    const restaurantsByName = new Map<string, Restaurant[]>();
     const uniqueRestaurants: Restaurant[] = [];
 
     restaurants.forEach((restaurant) => {
-        if (!uniqueRestaurants.some((candidate) => isSameRestaurantSelection(candidate, restaurant))) {
-            uniqueRestaurants.push(restaurant);
+        if (seenIds.has(restaurant.id) || seenMergedIds.has(restaurant.id)) return;
+
+        const sameNameRestaurants = restaurantsByName.get(restaurant.name);
+        if (sameNameRestaurants?.some((candidate) => hasSameNameAndCoordinate(candidate, restaurant))) return;
+
+        const mergedRestaurants = restaurant.mergedRestaurants;
+        if (mergedRestaurants?.some((mergedRestaurant) =>
+            seenIds.has(mergedRestaurant.id) || seenMergedIds.has(mergedRestaurant.id))) {
+            return;
         }
+
+        seenIds.add(restaurant.id);
+        mergedRestaurants?.forEach((mergedRestaurant) => seenMergedIds.add(mergedRestaurant.id));
+        uniqueRestaurants.push(restaurant);
+        if (sameNameRestaurants) sameNameRestaurants.push(restaurant);
+        else restaurantsByName.set(restaurant.name, [restaurant]);
     });
 
     return uniqueRestaurants;
@@ -167,7 +189,7 @@ const getApproximateRestaurantDistance = (
 
     const latDiffKm = (sourceLat - candidateLat) * 111;
     const lngDiffKm = (sourceLng - candidateLng) * 88;
-    return Math.sqrt(latDiffKm ** 2 + lngDiffKm ** 2);
+    return latDiffKm * latDiffKm + lngDiffKm * lngDiffKm;
 };
 
 type BuildPostSearchSwipeCandidatesInput = {
@@ -190,65 +212,82 @@ export const buildRestaurantsForSwipe = ({
     const pinnedRestaurants = [activeSearchedRestaurant, selectedRestaurant].filter(Boolean) as Restaurant[];
     if (pinnedRestaurants.length === 0) return displayRestaurants;
 
-    const restaurantsForSwipe = [...displayRestaurants];
+    const restaurantsToAdd: Restaurant[] = [];
     pinnedRestaurants.forEach((restaurant) => {
         if (displayRestaurantIds.has(restaurant.id)) return;
-        if (restaurantsForSwipe.some((candidate) => isSameRestaurantSelection(candidate, restaurant))) return;
-
-        restaurantsForSwipe.push(restaurant);
+        if (displayRestaurants.some((candidate) => isSameRestaurantSelection(candidate, restaurant))) return;
+        if (restaurantsToAdd.some((candidate) => isSameRestaurantSelection(candidate, restaurant))) return;
+        restaurantsToAdd.push(restaurant);
     });
+    if (restaurantsToAdd.length === 0) return displayRestaurants;
 
-    return restaurantsForSwipe;
+    return [...displayRestaurants, ...restaurantsToAdd];
 };
 
+const nearestSwipeFallbackCache = new WeakMap<readonly Restaurant[], Map<string, Restaurant | null>>();
+let nearestFallbackScanCount = 0;
+
+export function getNearestFallbackScanCount() {
+    return nearestFallbackScanCount;
+}
+
 export const buildPostSearchSwipeCandidates = ({
     visibleRestaurants,
     allRestaurants,
     activeSearchedRestaurant,
 }: BuildPostSearchSwipeCandidatesInput): Restaurant[] => {
     const dedupedVisibleRestaurants = dedupeRestaurants(visibleRestaurants);
-    const orderedVisibleRestaurants = activeSearchedRestaurant
-        ? [
-            ...dedupedVisibleRestaurants.filter((restaurant) =>
-                isSameRestaurantSelection(restaurant, activeSearchedRestaurant)
-            ),
-            ...dedupedVisibleRestaurants.filter((restaurant) =>
-                !isSameRestaurantSelection(restaurant, activeSearchedRestaurant)
-            ),
-        ]
-        : dedupedVisibleRestaurants;
+    let orderedVisibleRestaurants = dedupedVisibleRestaurants;
+    if (activeSearchedRestaurant) {
+        const matchedRestaurants: Restaurant[] = [];
+        const otherRestaurants: Restaurant[] = [];
+        dedupedVisibleRestaurants.forEach((restaurant) => {
+            if (isSameRestaurantSelection(restaurant, activeSearchedRestaurant)) {
+                matchedRestaurants.push(restaurant);
+            } else {
+                otherRestaurants.push(restaurant);
+            }
+        });
+        orderedVisibleRestaurants = matchedRestaurants.concat(otherRestaurants);
+    }
 
     if (!activeSearchedRestaurant || orderedVisibleRestaurants.length !== 1) {
         return orderedVisibleRestaurants;
     }
 
-    const nearestFallbackRestaurant = dedupeRestaurants(allRestaurants).reduce<Restaurant | null>(
-        (nearestRestaurant, candidateRestaurant) => {
-            if (orderedVisibleRestaurants.some((restaurant) => isSameRestaurantSelection(restaurant, candidateRestaurant))) {
-                return nearestRestaurant;
-            }
-
-            const candidateDistance = getApproximateRestaurantDistance(
-                activeSearchedRestaurant,
-                candidateRestaurant,
-            );
-            if (!Number.isFinite(candidateDistance)) {
-                return nearestRestaurant;
-            }
-
-            if (!nearestRestaurant) {
-                return candidateRestaurant;
-            }
+    const visibleRestaurant = orderedVisibleRestaurants[0];
+    const cacheKey = `${activeSearchedRestaurant.id}:${visibleRestaurant.id}`;
+    let cachedFallbacks = nearestSwipeFallbackCache.get(allRestaurants);
+    if (!cachedFallbacks) {
+        cachedFallbacks = new Map();
+        nearestSwipeFallbackCache.set(allRestaurants, cachedFallbacks);
+    }
+    if (cachedFallbacks.has(cacheKey)) {
+        const cachedFallback = cachedFallbacks.get(cacheKey) ?? null;
+        return cachedFallback
+            ? [...orderedVisibleRestaurants, cachedFallback]
+            : orderedVisibleRestaurants;
+    }
 
-            const nearestDistance = getApproximateRestaurantDistance(
-                activeSearchedRestaurant,
-                nearestRestaurant,
-            );
+    nearestFallbackScanCount += 1;
+    const dedupedRestaurants = dedupeRestaurants(allRestaurants);
+    let nearestFallbackRestaurant: Restaurant | null = null;
+    let nearestDistance = Number.POSITIVE_INFINITY;
+    for (let index = 0; index < dedupedRestaurants.length; index += 1) {
+        const candidateRestaurant = dedupedRestaurants[index];
+        if (isSameRestaurantSelection(candidateRestaurant, orderedVisibleRestaurants[0])) continue;
+
+        const candidateDistance = getApproximateRestaurantDistance(
+            activeSearchedRestaurant,
+            candidateRestaurant,
+        );
+        if (!Number.isFinite(candidateDistance) || candidateDistance >= nearestDistance) continue;
+
+        nearestFallbackRestaurant = candidateRestaurant;
+        nearestDistance = candidateDistance;
+    }
 
-            return candidateDistance < nearestDistance ? candidateRestaurant : nearestRestaurant;
-        },
-        null,
-    );
+    cachedFallbacks.set(cacheKey, nearestFallbackRestaurant);
 
     return nearestFallbackRestaurant
         ? [...orderedVisibleRestaurants, nearestFallbackRestaurant]
diff --git a/apps/web/lib/mobile-sheet-layout.ts b/apps/web/lib/mobile-sheet-layout.ts
index e8cc32dcc8..815db4085f 100644
--- a/apps/web/lib/mobile-sheet-layout.ts
+++ b/apps/web/lib/mobile-sheet-layout.ts
@@ -15,6 +15,10 @@ const DEFAULT_HEADER_HEIGHT = 56;
 
 const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
 
+export function snapHeaderHideProgress(progress: number) {
+    return clamp01(progress) >= 0.999 ? 1 : 0;
+}
+
 const parseCssNumber = (raw: string, fallback: number) => {
     const value = Number.parseFloat(raw);
     return Number.isFinite(value) ? value : fallback;
@@ -84,7 +88,7 @@ export const setMobileSheetLayoutState = ({
     if (typeof window === 'undefined') return;
 
     const root = ROOT();
-    const progress = clamp01(headerHideProgress);
+    const progress = snapHeaderHideProgress(headerHideProgress);
     const hideValue = hideBottomNav ? '1' : '0';
     const progressValue = progress.toFixed(4);
 
diff --git a/apps/web/lib/naver-map-cluster-visuals.ts b/apps/web/lib/naver-map-cluster-visuals.ts
index 15ee882cc9..eebc87a5f5 100644
--- a/apps/web/lib/naver-map-cluster-visuals.ts
+++ b/apps/web/lib/naver-map-cluster-visuals.ts
@@ -2,12 +2,16 @@ import type Supercluster from 'supercluster';
 import { createClusterMarkerHTML } from '@/lib/cluster-marker';
 import type { ClusterProperties } from '@/lib/clustering';
 
+const clusterVisualKeyCache = new Map<string, number>();
+
 export function getClusterVisualKey(uniqueKey: string | number) {
-    if (typeof uniqueKey === 'string') {
-        return Math.abs(uniqueKey.split('').reduce((acc, value) => (acc * 31 + value.charCodeAt(0)) | 0, 0));
-    }
+    if (typeof uniqueKey === 'number') return uniqueKey;
+    const cached = clusterVisualKeyCache.get(uniqueKey);
+    if (cached !== undefined) return cached;
 
-    return uniqueKey;
+    const hash = Math.abs(uniqueKey.split('').reduce((acc, value) => (acc * 31 + value.charCodeAt(0)) | 0, 0));
+    clusterVisualKeyCache.set(uniqueKey, hash);
+    return hash;
 }
 
 export function buildClusterMarkerFeature({
@@ -25,6 +29,18 @@ export function buildClusterMarkerFeature({
     } as unknown as Supercluster.ClusterFeature<ClusterProperties>;
 }
 
+const clusterMarkerHtmlCache = new Map<string, string>();
+const categoryJoinCache = new WeakMap<string[], string>();
+const CLUSTER_MARKER_HTML_CACHE_LIMIT = 256;
+
+function joinedClusterCategories(categories: string[]) {
+    const cached = categoryJoinCache.get(categories);
+    if (cached !== undefined) return cached;
+    const joined = categories.join('\n');
+    categoryJoinCache.set(categories, joined);
+    return joined;
+}
+
 export function buildClusterMarkerContent({
     categories,
     count,
@@ -38,13 +54,26 @@ export function buildClusterMarkerContent({
     lat: number;
     lng: number;
 }) {
-    return createClusterMarkerHTML(
+    const cacheKey = `${count}:${currentIndex}:${joinedClusterCategories(categories)}`;
+    const cached = clusterMarkerHtmlCache.get(cacheKey);
+    if (cached) return cached;
+
+    const html = createClusterMarkerHTML(
         buildClusterMarkerFeature({ count, lat, lng }),
         categories,
         currentIndex,
     );
+    if (clusterMarkerHtmlCache.size >= CLUSTER_MARKER_HTML_CACHE_LIMIT) {
+        const oldest = clusterMarkerHtmlCache.keys().next().value;
+        if (oldest !== undefined) clusterMarkerHtmlCache.delete(oldest);
+    }
+    clusterMarkerHtmlCache.set(cacheKey, html);
+    return html;
 }
 
+const CLUSTER_MARKER_ANCHOR = { x: 24, y: 24 };
+const clusterVisualCache = new WeakMap<string[], Map<number, Map<number, { content: string; anchor: { x: number; y: number } }>>>();
+
 export function getNaverClusterMarkerVisual({
     categories,
     count,
@@ -58,12 +87,33 @@ export function getNaverClusterMarkerVisual({
     lat: number;
     lng: number;
 }) {
-    return {
+    let byCount = clusterVisualCache.get(categories);
+    if (!byCount) {
+        byCount = new Map();
+        clusterVisualCache.set(categories, byCount);
+    }
+    let byIndex = byCount.get(count);
+    if (!byIndex) {
+        byIndex = new Map();
+        byCount.set(count, byIndex);
+    }
+    const cached = byIndex.get(currentIndex);
+    if (cached) return cached;
+
+    const visual = {
         content: buildClusterMarkerContent({ categories, count, currentIndex, lat, lng }),
-        anchor: { x: 24, y: 24 },
+        anchor: CLUSTER_MARKER_ANCHOR,
     };
+    byIndex.set(currentIndex, visual);
+    return visual;
 }
 
+const clusterPlanCache = new WeakMap<object, {
+    anchor: { x: number; y: number };
+    content: string;
+    position: { lat: number; lng: number };
+}>();
+
 export function buildNaverClusterMarkerRenderPlan({
     categories,
     count,
@@ -82,12 +132,22 @@ export function buildNaverClusterMarkerRenderPlan({
         lat: position.lat,
         lng: position.lng,
     });
+    const cachedPlan = clusterPlanCache.get(visual);
+    if (
+        cachedPlan &&
+        cachedPlan.position.lat === position.lat &&
+        cachedPlan.position.lng === position.lng
+    ) {
+        return cachedPlan;
+    }
 
-    return {
+    const plan = {
         anchor: visual.anchor,
         content: visual.content,
         position,
-    } as const;
+    };
+    clusterPlanCache.set(visual, plan);
+    return plan;
 }
 
 export function buildNaverClusterAnimationIconPlan({
@@ -118,3 +178,11 @@ export function buildNaverClusterAnimationIconPlan({
         hash,
     } as const;
 }
+
+export function shouldReplaceNaverMarkerIcon(
+    current: { content?: unknown; anchor?: { x?: number; y?: number } | null } | null | undefined,
+    next: { content: unknown; anchor: { x: number; y: number } },
+): boolean {
+    if (!current || current.content !== next.content) return true;
+    return current.anchor?.x !== next.anchor.x || current.anchor?.y !== next.anchor.y;
+}
diff --git a/apps/web/lib/naver-map-marker-visuals.ts b/apps/web/lib/naver-map-marker-visuals.ts
index 8401ea6d21..ce78d379ea 100644
--- a/apps/web/lib/naver-map-marker-visuals.ts
+++ b/apps/web/lib/naver-map-marker-visuals.ts
@@ -25,13 +25,40 @@ type NaverIndividualMarkerRestaurant = Partial<Pick<
     category?: string | string[] | null;
 };
 
+const MARKER_VISUAL_CACHE_LIMIT = 2000;
+const markerVisualCache = new Map<string, {
+    content: string;
+    anchor: { x: number; y: number };
+    zIndex: number;
+}>();
+
+function readMarkerVisualCache(key: string) {
+    const cached = markerVisualCache.get(key);
+    if (!cached) return null;
+    markerVisualCache.delete(key);
+    markerVisualCache.set(key, cached);
+    return cached;
+}
+
+function writeMarkerVisualCache(key: string, visual: {
+    content: string;
+    anchor: { x: number; y: number };
+    zIndex: number;
+}) {
+    if (markerVisualCache.size >= MARKER_VISUAL_CACHE_LIMIT) {
+        const oldest = markerVisualCache.keys().next().value;
+        if (oldest) markerVisualCache.delete(oldest);
+    }
+    markerVisualCache.set(key, visual);
+    return visual;
+}
+
 function getMarkerKindBadgeConfig(markerKind: Exclude<RestaurantMarkerKind, 'category'>) {
     if (markerKind === 'trend') {
         return {
             label: '트렌드',
             ariaLabel: '관리자 트렌드 맛집',
             background: 'linear-gradient(135deg, #f97316 0%, #dc2626 100%)',
-            shadow: 'rgba(249, 115, 22, 0.35)',
         };
     }
 
@@ -40,7 +67,6 @@ function getMarkerKindBadgeConfig(markerKind: Exclude<RestaurantMarkerKind, 'cat
             label: '제철',
             ariaLabel: '관리자 제철 맛집',
             background: 'linear-gradient(135deg, #16a34a 0%, #0d9488 100%)',
-            shadow: 'rgba(22, 163, 74, 0.35)',
         };
     }
 
@@ -48,7 +74,6 @@ function getMarkerKindBadgeConfig(markerKind: Exclude<RestaurantMarkerKind, 'cat
         label: '제보',
         ariaLabel: '사용자 제보 맛집',
         background: 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)',
-        shadow: 'rgba(37, 99, 235, 0.35)',
     };
 }
 
@@ -93,7 +118,6 @@ function wrapSpecialMarkerContent(
               background: ${badgeConfig.background};
               color: #ffffff;
               border: 2px solid #ffffff;
-              box-shadow: 0 2px 8px ${badgeConfig.shadow};
               display: inline-flex;
               align-items: center;
               justify-content: center;
@@ -110,11 +134,83 @@ function wrapSpecialMarkerContent(
     `;
 }
 
+type IndividualMarkerVisual = {
+    content: string;
+    anchor: { x: number; y: number };
+    zIndex: number;
+};
+
+type IndividualMarkerStamp = {
+    youtube: string;
+    mergedYoutube: number;
+    mergedReviews: number;
+    mergedRestaurants: number;
+    hasReview: number;
+    categories0: string;
+    category0: string;
+    source: string;
+    visual: IndividualMarkerVisual;
+};
+
+const individualVisualCache = new WeakMap<object, {
+    selected?: IndividualMarkerStamp;
+    plain?: IndividualMarkerStamp;
+}>();
+
+function individualMarkerStampFields(restaurant: NaverIndividualMarkerRestaurant) {
+    return {
+        youtube: restaurant.youtube_link ?? '',
+        mergedYoutube: restaurant.mergedYoutubeLinks?.length ?? 0,
+        mergedReviews: restaurant.mergedTzuyangReviews?.length ?? 0,
+        mergedRestaurants: restaurant.mergedRestaurants?.length ?? 0,
+        hasReview: restaurant.tzuyang_review ? 1 : 0,
+        categories0: Array.isArray(restaurant.categories) ? restaurant.categories[0] ?? '' : '',
+        category0: Array.isArray(restaurant.category) ? restaurant.category[0] ?? '' : restaurant.category ?? '',
+        source: restaurant.source_type ?? '',
+    };
+}
+
+function individualStampMatches(stamp: IndividualMarkerStamp, restaurant: NaverIndividualMarkerRestaurant) {
+    return stamp.youtube === (restaurant.youtube_link ?? '')
+        && stamp.mergedYoutube === (restaurant.mergedYoutubeLinks?.length ?? 0)
+        && stamp.mergedReviews === (restaurant.mergedTzuyangReviews?.length ?? 0)
+        && stamp.mergedRestaurants === (restaurant.mergedRestaurants?.length ?? 0)
+        && stamp.hasReview === (restaurant.tzuyang_review ? 1 : 0)
+        && stamp.categories0 === (Array.isArray(restaurant.categories) ? restaurant.categories[0] ?? '' : '')
+        && stamp.category0 === (Array.isArray(restaurant.category) ? restaurant.category[0] ?? '' : restaurant.category ?? '')
+        && stamp.source === (restaurant.source_type ?? '');
+}
+
 export function getNaverIndividualMarkerVisual(
     restaurant: NaverIndividualMarkerRestaurant,
     isSelected: boolean,
     overlayKinds: readonly RestaurantOverlayMarkerKind[] = [],
 ) {
+    const slot = isSelected ? 'selected' : 'plain';
+    const canReuseObject = overlayKinds.length === 0;
+    if (canReuseObject) {
+        const cachedStamp = individualVisualCache.get(restaurant)?.[slot];
+        if (cachedStamp && individualStampMatches(cachedStamp, restaurant)) {
+            return cachedStamp.visual;
+        }
+    }
+
+    const cacheKey = [
+        restaurant.id ?? '',
+        isSelected ? '1' : '0',
+        overlayKinds.join(','),
+        restaurant.youtube_link ?? '',
+        restaurant.mergedYoutubeLinks?.length ?? 0,
+        restaurant.mergedTzuyangReviews?.length ?? 0,
+        restaurant.mergedRestaurants?.length ?? 0,
+        restaurant.tzuyang_review ? 1 : 0,
+        Array.isArray(restaurant.categories) ? restaurant.categories[0] ?? '' : '',
+        Array.isArray(restaurant.category) ? restaurant.category[0] ?? '' : restaurant.category ?? '',
+        restaurant.source_type ?? '',
+    ].join('|');
+    const cached = readMarkerVisualCache(cacheKey);
+    if (cached) return cached;
+
     const normalizedCategory = Array.isArray(restaurant.category)
         ? restaurant.category
         : (restaurant.category ? [restaurant.category] : []);
@@ -134,11 +230,17 @@ export function getNaverIndividualMarkerVisual(
                     : category;
     const content = createIndividualMarkerHTML(markerCategory, isSelected, visitCount, restaurant.id);
 
-    return {
+    const visual = writeMarkerVisualCache(cacheKey, {
         content: markerKind !== 'category'
             ? wrapSpecialMarkerContent(content, isSelected, markerKind)
             : `<div data-restaurant-marker-kind="category" data-restaurant-marker-asset-version="${RESTAURANT_MARKER_ASSET_VERSION}">${content}</div>`,
         anchor: isSelected ? { x: 18, y: 18 } : { x: 14, y: 14 },
         zIndex: isSelected ? 100 : 1,
-    };
+    });
+    if (canReuseObject) {
+        const entry = individualVisualCache.get(restaurant) ?? {};
+        entry[slot] = { ...individualMarkerStampFields(restaurant), visual };
+        individualVisualCache.set(restaurant, entry);
+    }
+    return visual;
 }
diff --git a/apps/web/lib/naver-map-overlap-helpers.ts b/apps/web/lib/naver-map-overlap-helpers.ts
index 9a75b9aa78..acec7a889f 100644
--- a/apps/web/lib/naver-map-overlap-helpers.ts
+++ b/apps/web/lib/naver-map-overlap-helpers.ts
@@ -120,3 +120,43 @@ export function resolveNaverOverlappingMarkerPosition({
         return basePosition;
     }
 }
+
+type MarkerLatLngLike = {
+    lat?: () => number;
+    lng?: () => number;
+};
+
+export function reuseMarkerLatLng<T>(
+    current: MarkerLatLngLike | null | undefined,
+    lat: number,
+    lng: number,
+    create: () => T,
+): MarkerLatLngLike | T {
+    if (current && current.lat?.() === lat && current.lng?.() === lng) return current;
+    return create();
+}
+
+const projectedLatLngCache = new WeakMap<object, { lat: number; lng: number; value: unknown }>();
+
+export function reuseProjectedLatLng<T>(
+    owner: object,
+    lat: number,
+    lng: number,
+    create: () => T,
+): T {
+    const cached = projectedLatLngCache.get(owner) as { lat: number; lng: number; value: T } | undefined;
+    if (cached && cached.lat === lat && cached.lng === lng) return cached.value;
+    const value = create();
+    projectedLatLngCache.set(owner, { lat, lng, value });
+    return value;
+}
+
+export function reuseMarkerAnchor<T>(
+    current: { x?: number; y?: number } | null | undefined,
+    x: number,
+    y: number,
+    create: () => T,
+): { x?: number; y?: number } | T {
+    if (current && current.x === x && current.y === y) return current;
+    return create();
+}
diff --git a/apps/web/lib/naver-map-overlay-timings.ts b/apps/web/lib/naver-map-overlay-timings.ts
index b8e22cd665..179838bad4 100644
--- a/apps/web/lib/naver-map-overlay-timings.ts
+++ b/apps/web/lib/naver-map-overlay-timings.ts
@@ -4,7 +4,7 @@ export const NAVER_MAP_RESTAURANT_COUNT_HIDE_DELAY_MS = 3000;
 export const NAVER_MAP_ONLINE_USERS_HIDE_DELAY_MS = 4000;
 
 export const NAVER_MAP_OVERLAY_ANIMATION_CLASS_NAMES = {
-    announcement: 'animate-[mapOverlayFade_12s_ease-in-out_forwards] motion-reduce:animate-none',
-    restaurantCount: 'animate-[mapOverlayFade_3s_ease-in-out_forwards] motion-reduce:animate-none',
-    onlineUsers: 'animate-[mapOverlayFade_4s_ease-in-out_forwards] motion-reduce:animate-none',
+    announcement: '',
+    restaurantCount: '',
+    onlineUsers: '',
 } as const;
diff --git a/apps/web/lib/naver-map-render-plan.ts b/apps/web/lib/naver-map-render-plan.ts
index 22006575d2..6a301c57fa 100644
--- a/apps/web/lib/naver-map-render-plan.ts
+++ b/apps/web/lib/naver-map-render-plan.ts
@@ -74,28 +74,186 @@ export function deriveClusterRenderPlan(
     };
 }
 
+const VIEWPORT_CELL_DEGREES = 0.05;
+const viewportIndexCache = new WeakMap<readonly Restaurant[], {
+    buckets: Map<number, Restaurant[]>;
+    always: Restaurant[];
+    byId: Map<string, Restaurant>;
+    order: Map<string, number>;
+}>();
+let lastViewportExaminationCount = 0;
+let lastVisibleSource: Restaurant[] | null = null;
+let lastVisibleResult: Restaurant[] = [];
+let lastVisibleIds: Set<string> | null = null;
+const visibleRestaurantScratchIds: string[] = [];
+
+function reuseVisibleRestaurantResult(source: Restaurant[], included: Set<string>, build: () => Restaurant[]) {
+    if (
+        lastVisibleSource === source &&
+        lastVisibleResult.length === included.size &&
+        lastVisibleResult.every((restaurant) => included.has(restaurant.id))
+    ) {
+        return lastVisibleResult;
+    }
+
+    const result = build();
+    lastVisibleSource = source;
+    lastVisibleResult = result;
+    lastVisibleIds = included;
+    return result;
+}
+
+export function getLastViewportExaminationCount() {
+    return lastViewportExaminationCount;
+}
+
+const VIEWPORT_CELL_LNG_STRIDE = 100000;
+
+function viewportCellKey(lat: number, lng: number) {
+    return Math.floor(lat / VIEWPORT_CELL_DEGREES) * VIEWPORT_CELL_LNG_STRIDE
+        + Math.floor(lng / VIEWPORT_CELL_DEGREES);
+}
+
+function viewportCellIndexKey(latCell: number, lngCell: number) {
+    return latCell * VIEWPORT_CELL_LNG_STRIDE + lngCell;
+}
+
+function getViewportIndex(restaurants: readonly Restaurant[]) {
+    const cached = viewportIndexCache.get(restaurants);
+    if (cached) return cached;
+
+    const buckets = new Map<number, Restaurant[]>();
+    const always: Restaurant[] = [];
+    const byId = new Map<string, Restaurant>();
+    const order = new Map<string, number>();
+    restaurants.forEach((restaurant, index) => {
+        byId.set(restaurant.id, restaurant);
+        order.set(restaurant.id, index);
+        if (!restaurant.lat || !restaurant.lng) {
+            always.push(restaurant);
+            return;
+        }
+        const key = viewportCellKey(restaurant.lat, restaurant.lng);
+        const bucket = buckets.get(key);
+        if (bucket) bucket.push(restaurant);
+        else buckets.set(key, [restaurant]);
+    });
+    const built = { buckets, always, byId, order };
+    viewportIndexCache.set(restaurants, built);
+    return built;
+}
+
 export function getVisibleRestaurantsForRender(
     restaurantsForSwipe: Restaurant[],
     selectedRestaurantId: string | null,
     extendedBounds: ExtendedBounds | null,
     viewportFilterEnabled: boolean,
 ) {
-    if (!viewportFilterEnabled) {
-        return restaurantsForSwipe;
+    if (!viewportFilterEnabled || !extendedBounds) {
+        lastViewportExaminationCount = restaurantsForSwipe.length;
+        return viewportFilterEnabled
+            ? restaurantsForSwipe.filter((restaurant) =>
+                (selectedRestaurantId != null && restaurant.id === selectedRestaurantId) ||
+                isRestaurantInViewport(restaurant, extendedBounds))
+            : restaurantsForSwipe;
     }
 
-    return restaurantsForSwipe.filter(
-        (restaurant) =>
+    const latStart = Math.floor(extendedBounds.south / VIEWPORT_CELL_DEGREES);
+    const latEnd = Math.floor(extendedBounds.north / VIEWPORT_CELL_DEGREES);
+    const lngStart = Math.floor(extendedBounds.west / VIEWPORT_CELL_DEGREES);
+    const lngEnd = Math.floor(extendedBounds.east / VIEWPORT_CELL_DEGREES);
+    const cellCount = (latEnd - latStart + 1) * (lngEnd - lngStart + 1);
+    if (cellCount > restaurantsForSwipe.length) {
+        lastViewportExaminationCount = restaurantsForSwipe.length;
+        return restaurantsForSwipe.filter((restaurant) =>
             (selectedRestaurantId != null && restaurant.id === selectedRestaurantId) ||
-            isRestaurantInViewport(restaurant, extendedBounds)
-    );
+            isRestaurantInViewport(restaurant, extendedBounds));
+    }
+
+    const index = getViewportIndex(restaurantsForSwipe);
+    const scratchIds = visibleRestaurantScratchIds;
+    scratchIds.length = 0;
+    let examined = 0;
+    let selectedCounted = false;
+    let same = lastVisibleSource === restaurantsForSwipe && lastVisibleIds !== null;
+    const rememberId = (id: string) => {
+        scratchIds.push(id);
+        if (id === selectedRestaurantId) selectedCounted = true;
+        if (same && !lastVisibleIds?.has(id)) same = false;
+    };
+    const always = index.always;
+    for (let indexInAlways = 0; indexInAlways < always.length; indexInAlways += 1) {
+        examined += 1;
+        rememberId(always[indexInAlways].id);
+    }
+    const south = extendedBounds.south;
+    const north = extendedBounds.north;
+    const west = extendedBounds.west;
+    const east = extendedBounds.east;
+    for (let latCell = latStart; latCell <= latEnd; latCell += 1) {
+        for (let lngCell = lngStart; lngCell <= lngEnd; lngCell += 1) {
+            const bucket = index.buckets.get(viewportCellIndexKey(latCell, lngCell));
+            if (!bucket) continue;
+            for (let indexInBucket = 0; indexInBucket < bucket.length; indexInBucket += 1) {
+                const restaurant = bucket[indexInBucket];
+                examined += 1;
+                if (
+                    restaurant.lat >= south &&
+                    restaurant.lat <= north &&
+                    restaurant.lng >= west &&
+                    restaurant.lng <= east
+                ) {
+                    rememberId(restaurant.id);
+                }
+            }
+        }
+    }
+    if (
+        selectedRestaurantId != null &&
+        !selectedCounted &&
+        index.byId.has(selectedRestaurantId)
+    ) {
+        examined += 1;
+        countId(selectedRestaurantId);
+    }
+    lastViewportExaminationCount = examined;
+    if (same && lastVisibleIds && scratchIds.length === lastVisibleIds.size) {
+        return lastVisibleResult;
+    }
+
+    const included = new Set(scratchIds);
+    return reuseVisibleRestaurantResult(restaurantsForSwipe, included, () => scratchIds
+        .map((id) => index.byId.get(id))
+        .filter((restaurant): restaurant is Restaurant => restaurant !== undefined)
+        .sort((left, right) => (index.order.get(left.id) ?? 0) - (index.order.get(right.id) ?? 0)));
+}
+
+const visibleIdSetCache = new WeakMap<Restaurant[], Set<string>>();
+
+export function getVisibleRestaurantIdSet(restaurants: Restaurant[]) {
+    const cached = visibleIdSetCache.get(restaurants);
+    if (cached) return cached;
+
+    const ids = new Set<string>();
+    for (let index = 0; index < restaurants.length; index += 1) {
+        ids.add(restaurants[index].id);
+    }
+    visibleIdSetCache.set(restaurants, ids);
+    return ids;
 }
 
 export function getRestaurantsWithRenderableCoordinates(restaurants: Restaurant[]) {
-    return restaurants.flatMap((restaurant) => {
-        const normalizedRestaurant = normalizeNaverMarkerCoordinates(restaurant);
-        return normalizedRestaurant ? [normalizedRestaurant] : [];
-    });
+    for (let index = 0; index < restaurants.length; index += 1) {
+        if (normalizeNaverMarkerCoordinates(restaurants[index]) !== restaurants[index]) {
+            const next: Restaurant[] = [];
+            for (const restaurant of restaurants) {
+                const normalizedRestaurant = normalizeNaverMarkerCoordinates(restaurant);
+                if (normalizedRestaurant) next.push(normalizedRestaurant);
+            }
+            return next;
+        }
+    }
+    return restaurants;
 }
 
 export function getSeoulIndividualRestaurantsForRender({
@@ -118,6 +276,23 @@ export function getSeoulIndividualRestaurantsForRender({
     });
 }
 
+let lastRenderTargetIds: string[] | null = null;
+const lastRenderTargetKey = {
+    searchedId: '',
+    selectedId: '',
+    clusterMode: false,
+    regionalMode: false,
+    seoulMode: false,
+    displayRestaurants: null as Restaurant[] | null,
+    displayRestaurantIds: null as Set<string> | null,
+    clusters: null as unknown,
+    regionalClusters: null as RegionalCluster[] | null,
+    seoulClustersToRender: null as SeoulDistrictCluster[] | null,
+    seoulIndividualIds: null as string[] | null,
+    restaurantById: null as Map<string, Restaurant> | null,
+    mergedRestaurantById: null as Map<string, Restaurant> | null,
+};
+
 export function buildRenderTargetIdsForSignature({
     activeSearchedRestaurant,
     selectedRestaurant,
@@ -147,6 +322,27 @@ export function buildRenderTargetIdsForSignature({
     seoulClustersToRender: SeoulDistrictCluster[];
     seoulIndividualIds: string[];
 }) {
+    const searchedId = activeSearchedRestaurant?.id ?? '';
+    const selectedId = selectedRestaurant?.id ?? '';
+    if (
+        lastRenderTargetIds &&
+        lastRenderTargetKey.searchedId === searchedId &&
+        lastRenderTargetKey.selectedId === selectedId &&
+        lastRenderTargetKey.clusterMode === nextIsClusterMode &&
+        lastRenderTargetKey.regionalMode === nextIsRegionalClusterMode &&
+        lastRenderTargetKey.seoulMode === nextIsSeoulDistrictMode &&
+        lastRenderTargetKey.displayRestaurants === displayRestaurants &&
+        lastRenderTargetKey.displayRestaurantIds === displayRestaurantIds &&
+        lastRenderTargetKey.clusters === clusters &&
+        lastRenderTargetKey.regionalClusters === regionalClusters &&
+        lastRenderTargetKey.seoulClustersToRender === seoulClustersToRender &&
+        lastRenderTargetKey.seoulIndividualIds === seoulIndividualIds &&
+        lastRenderTargetKey.restaurantById === restaurantById &&
+        lastRenderTargetKey.mergedRestaurantById === mergedRestaurantById
+    ) {
+        return lastRenderTargetIds;
+    }
+
     const renderTargetIdsForSignature: string[] = displayRestaurants.map((restaurant) =>
         toRestaurantRenderToken(restaurant)
     );
@@ -209,6 +405,20 @@ export function buildRenderTargetIdsForSignature({
         });
     }
 
+    lastRenderTargetIds = renderTargetIdsForSignature;
+    lastRenderTargetKey.searchedId = searchedId;
+    lastRenderTargetKey.selectedId = selectedId;
+    lastRenderTargetKey.clusterMode = nextIsClusterMode;
+    lastRenderTargetKey.regionalMode = nextIsRegionalClusterMode;
+    lastRenderTargetKey.seoulMode = nextIsSeoulDistrictMode;
+    lastRenderTargetKey.displayRestaurants = displayRestaurants;
+    lastRenderTargetKey.displayRestaurantIds = displayRestaurantIds;
+    lastRenderTargetKey.clusters = clusters;
+    lastRenderTargetKey.regionalClusters = regionalClusters;
+    lastRenderTargetKey.seoulClustersToRender = seoulClustersToRender;
+    lastRenderTargetKey.seoulIndividualIds = seoulIndividualIds;
+    lastRenderTargetKey.restaurantById = restaurantById;
+    lastRenderTargetKey.mergedRestaurantById = mergedRestaurantById;
     return renderTargetIdsForSignature;
 }
 
diff --git a/apps/web/lib/naver-map-view-helpers.ts b/apps/web/lib/naver-map-view-helpers.ts
index f7d7252c5a..cd87cc584e 100644
--- a/apps/web/lib/naver-map-view-helpers.ts
+++ b/apps/web/lib/naver-map-view-helpers.ts
@@ -22,7 +22,7 @@ type NaverMapBoundsLike = {
     getBounds: () => NaverBoundsLike | null;
 };
 
-const VIEWPORT_PADDING = 0.05;
+const VIEWPORT_PADDING = 0.25;
 
 export const isPointInSeoul = (lat: number, lng: number) => {
     if (lat < 37.42 || lat > 37.70 || lng < 126.76 || lng > 127.18) {
@@ -38,20 +38,21 @@ export const isPointInSeoul = (lat: number, lng: number) => {
     return false;
 };
 
-export const getExtendedBounds = (
+export const fillExtendedBounds = (
     map: NaverMapBoundsLike | null,
-    padding: number = VIEWPORT_PADDING,
-): ExtendedBounds | null => {
-    if (!map) return null;
+    padding: number,
+    target: ExtendedBounds,
+): boolean => {
+    if (!map) return false;
 
     let bounds: NaverBoundsLike | null = null;
     try {
         bounds = map.getBounds();
     } catch {
-        return null;
+        return false;
     }
 
-    if (!bounds || typeof bounds.getSW !== 'function') return null;
+    if (!bounds || typeof bounds.getSW !== 'function') return false;
 
     let sw: NaverLatLngLike;
     let ne: NaverLatLngLike;
@@ -59,17 +60,24 @@ export const getExtendedBounds = (
         sw = bounds.getSW();
         ne = bounds.getNE();
     } catch {
-        return null;
+        return false;
     }
     const latDiff = ne.lat() - sw.lat();
     const lngDiff = ne.lng() - sw.lng();
 
-    return {
-        south: sw.lat() - latDiff * padding,
-        north: ne.lat() + latDiff * padding,
-        west: sw.lng() - lngDiff * padding,
-        east: ne.lng() + lngDiff * padding,
-    };
+    target.south = sw.lat() - latDiff * padding;
+    target.north = ne.lat() + latDiff * padding;
+    target.west = sw.lng() - lngDiff * padding;
+    target.east = ne.lng() + lngDiff * padding;
+    return true;
+};
+
+export const getExtendedBounds = (
+    map: NaverMapBoundsLike | null,
+    padding: number = VIEWPORT_PADDING,
+): ExtendedBounds | null => {
+    const target: ExtendedBounds = { south: 0, north: 0, west: 0, east: 0 };
+    return fillExtendedBounds(map, padding, target) ? target : null;
 };
 
 export const isRestaurantInViewport = (
diff --git a/apps/web/lib/naver-map-wheel-helpers.ts b/apps/web/lib/naver-map-wheel-helpers.ts
index a19e7b2daa..1f7af073dd 100644
--- a/apps/web/lib/naver-map-wheel-helpers.ts
+++ b/apps/web/lib/naver-map-wheel-helpers.ts
@@ -185,6 +185,14 @@ export function flushQueuedNaverWheelInput({
     } as const;
 }
 
+export function hasNaverWheelProjectionUpdated(
+    before: NaverWheelPoint | null | undefined,
+    after: NaverWheelPoint | null | undefined,
+) {
+    if (!before || !after) return false;
+    return before.x !== after.x || before.y !== after.y;
+}
+
 export function resolveNaverWheelPostAdjustPlan({
     currentZoom,
     hasQueuedWheelInput,
diff --git a/apps/web/lib/overseas-map-helpers.ts b/apps/web/lib/overseas-map-helpers.ts
index 181354ba13..4155676886 100644
--- a/apps/web/lib/overseas-map-helpers.ts
+++ b/apps/web/lib/overseas-map-helpers.ts
@@ -1,25 +1,25 @@
 import type { Restaurant } from '@/types/restaurant';
 
 export const CATEGORY_ICON_MAP: Record<string, string> = {
-    '고기': '/images/maker-images/meat_bbq.png',
-    '치킨': '/images/maker-images/chicken.png',
-    '한식': '/images/maker-images/korean.png',
-    '중식': '/images/maker-images/chinese.png',
-    '일식': '/images/maker-images/cutlet_sashimi.png',
-    '양식': '/images/maker-images/western.png',
-    '분식': '/images/maker-images/snack_bar.png',
-    '카페·디저트': '/images/maker-images/cafe_dessert.png',
-    '아시안': '/images/maker-images/asian.png',
-    '패스트푸드': '/images/maker-images/fastfood.png',
-    '족발·보쌈': '/images/maker-images/pork_feet.png',
-    '돈까스·회': '/images/maker-images/cutlet_sashimi.png',
-    '피자': '/images/maker-images/pizza.png',
-    '찜·탕': '/images/maker-images/stew.png',
-    '야식': '/images/maker-images/late_night.png',
-    '도시락': '/images/maker-images/lunch_box.png',
+    '고기': '/images/maker-images/webp/meat_bbq.webp',
+    '치킨': '/images/maker-images/webp/chicken.webp',
+    '한식': '/images/maker-images/webp/korean.webp',
+    '중식': '/images/maker-images/webp/chinese.webp',
+    '일식': '/images/maker-images/webp/cutlet_sashimi.webp',
+    '양식': '/images/maker-images/webp/western.webp',
+    '분식': '/images/maker-images/webp/snack_bar.webp',
+    '카페·디저트': '/images/maker-images/webp/cafe_dessert.webp',
+    '아시안': '/images/maker-images/webp/asian.webp',
+    '패스트푸드': '/images/maker-images/webp/fastfood.webp',
+    '족발·보쌈': '/images/maker-images/webp/pork_feet.webp',
+    '돈까스·회': '/images/maker-images/webp/cutlet_sashimi.webp',
+    '피자': '/images/maker-images/webp/pizza.webp',
+    '찜·탕': '/images/maker-images/webp/stew.webp',
+    '야식': '/images/maker-images/webp/late_night.webp',
+    '도시락': '/images/maker-images/webp/lunch_box.webp',
 };
 
-export const DEFAULT_OVERSEAS_ICON = '/images/maker-images/asian.png';
+export const DEFAULT_OVERSEAS_ICON = '/images/maker-images/webp/asian.webp';
 export const DEFAULT_OVERSEAS_PADDING = { top: 0, bottom: 0, left: 0, right: 0 };
 export const MIN_OVERSEAS_ZOOM = 2;
 export const MAX_OVERSEAS_ZOOM = 22;
diff --git a/apps/web/lib/overseas-map-marker-helpers.ts b/apps/web/lib/overseas-map-marker-helpers.ts
index eabedfebdb..f1a3f2c87f 100644
--- a/apps/web/lib/overseas-map-marker-helpers.ts
+++ b/apps/web/lib/overseas-map-marker-helpers.ts
@@ -14,7 +14,7 @@ export function buildOverseasMarkerHtml({
     const safeName = escapeHtmlAttribute(name);
 
     return `
-        <div class="marker-container relative h-full w-full cursor-pointer drop-shadow-md transition-transform duration-200 hover:scale-110">
+        <div class="marker-container relative h-full w-full cursor-pointer hover:scale-110">
             <img src="${safeImagePath}" class="h-full w-full object-contain" alt="${safeName}" draggable="false" />
         </div>
     `;
diff --git a/apps/web/lib/popular-restaurant-score.ts b/apps/web/lib/popular-restaurant-score.ts
new file mode 100644
index 0000000000..6c26490dbf
--- /dev/null
+++ b/apps/web/lib/popular-restaurant-score.ts
@@ -0,0 +1,136 @@
+import { extractCanonicalYouTubeVideoId } from '@/lib/youtube-url';
+import type { Restaurant, YoutubeMeta } from '@/types/restaurant';
+
+export const POPULAR_SCORE_WEIGHTS = {
+  search: 0.24,
+  views: 0.22,
+  likes: 0.1,
+  comments: 0.1,
+  reviews: 0.14,
+  reviewLikes: 0.12,
+  reappearances: 0.08,
+} as const;
+
+export const POPULAR_SCORE_REFERENCES = {
+  search: 40,
+  views: 3_000_000,
+  likes: 80_000,
+  comments: 6_000,
+  reviews: 15,
+  reviewLikes: 30,
+  reappearances: 2,
+} as const;
+
+export type PopularScoreSignal = keyof typeof POPULAR_SCORE_WEIGHTS;
+
+export type PopularRestaurantSignals = Record<PopularScoreSignal, number>;
+
+const SIGNAL_KEYS = Object.keys(POPULAR_SCORE_WEIGHTS) as PopularScoreSignal[];
+
+function readNonNegative(value: unknown): number {
+  const numeric = typeof value === 'string' && value.trim().length > 0 ? Number(value) : value;
+  if (typeof numeric !== 'number' || !Number.isFinite(numeric) || numeric < 0) return 0;
+  return numeric;
+}
+
+function readMetaMetric(meta: YoutubeMeta, keys: readonly string[]): number {
+  const record = meta as YoutubeMeta & Record<string, unknown>;
+  for (const key of keys) {
+    const metric = readNonNegative(record[key]);
+    if (metric > 0 || record[key] === 0) return metric;
+  }
+  return 0;
+}
+
+function isMeta(value: unknown): value is YoutubeMeta {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function addVideoLink(links: Set<string>, value: unknown) {
+  if (typeof value !== 'string') return;
+  const normalized = value.trim();
+  if (!normalized) return;
+  links.add(extractCanonicalYouTubeVideoId(normalized) ?? normalized);
+}
+
+export function readPopularRestaurantSignals(
+  restaurant: Restaurant,
+  reviewLikeTotal = 0,
+): PopularRestaurantSignals {
+  const links = new Set<string>();
+  addVideoLink(links, restaurant.youtube_link);
+  restaurant.mergedYoutubeLinks?.forEach((link) => addVideoLink(links, link));
+  restaurant.mergedRestaurants?.forEach((merged) => addVideoLink(links, merged.youtube_link));
+
+  const seen = new Set<string>();
+  let views = 0;
+  let likes = 0;
+  let comments = 0;
+  const visit = (meta: YoutubeMeta) => {
+    const record = meta as YoutubeMeta & Record<string, unknown>;
+    const videoKey = extractCanonicalYouTubeVideoId(String(record.videoId ?? record.video_id ?? ''))
+      ?? [
+        meta.title ?? '',
+        String(record.publishedAt ?? record.published_at ?? ''),
+        String(record.viewCount ?? record.view_count ?? ''),
+      ].join('\u0000');
+    if (seen.has(videoKey)) return;
+    seen.add(videoKey);
+    views += readMetaMetric(meta, ['viewCount', 'view_count']);
+    likes += readMetaMetric(meta, ['likeCount', 'like_count']);
+    comments += readMetaMetric(meta, ['commentCount', 'comment_count']);
+  };
+
+  if (isMeta(restaurant.youtube_meta)) visit(restaurant.youtube_meta);
+  restaurant.mergedYoutubeMetas?.forEach((meta) => {
+    if (isMeta(meta)) visit(meta);
+  });
+  restaurant.mergedRestaurants?.forEach((merged) => {
+    if (isMeta(merged.youtube_meta)) visit(merged.youtube_meta);
+  });
+
+  return {
+    search: readNonNegative(restaurant.weekly_search_count),
+    views,
+    likes,
+    comments,
+    reviews: readNonNegative(restaurant.review_count),
+    reviewLikes: readNonNegative(reviewLikeTotal),
+    reappearances: Math.max(Math.max(links.size, seen.size) - 1, 0),
+  };
+}
+
+export function saturatePopularSignal(value: number, reference: number): number {
+  const safeValue = readNonNegative(value);
+  const safeReference = readNonNegative(reference);
+  if (safeReference <= 0) return 0;
+  return Math.log1p(safeValue) / Math.log1p(safeReference);
+}
+
+export function scorePopularRestaurantSignals(signals: PopularRestaurantSignals): number {
+  return SIGNAL_KEYS.reduce((total, key) => {
+    return total + POPULAR_SCORE_WEIGHTS[key] * saturatePopularSignal(signals[key], POPULAR_SCORE_REFERENCES[key]);
+  }, 0);
+}
+
+export function scorePopularRestaurant(restaurant: Restaurant, reviewLikeTotal = 0): number {
+  return scorePopularRestaurantSignals(readPopularRestaurantSignals(restaurant, reviewLikeTotal));
+}
+
+export function comparePopularRestaurants(
+  left: Restaurant,
+  right: Restaurant,
+  reviewLikesById: ReadonlyMap<string, number> = new Map(),
+): number {
+  const leftScore = scorePopularRestaurant(left, reviewLikesById.get(left.id) ?? 0);
+  const rightScore = scorePopularRestaurant(right, reviewLikesById.get(right.id) ?? 0);
+  if (rightScore !== leftScore) return rightScore - leftScore;
+
+  const searchDelta = (right.weekly_search_count ?? 0) - (left.weekly_search_count ?? 0);
+  if (searchDelta !== 0) return searchDelta;
+
+  const reviewDelta = (right.review_count ?? 0) - (left.review_count ?? 0);
+  if (reviewDelta !== 0) return reviewDelta;
+
+  return left.id.localeCompare(right.id);
+}
diff --git a/apps/web/lib/popular-restaurants.ts b/apps/web/lib/popular-restaurants.ts
index f0b43a5b43..1367531061 100644
--- a/apps/web/lib/popular-restaurants.ts
+++ b/apps/web/lib/popular-restaurants.ts
@@ -1,10 +1,11 @@
 import { mergeRestaurants } from '@/hooks/use-restaurants';
-import { supabase } from '@/integrations/supabase/client';
+import { fetchSupabaseRows, postgrestIn } from '@/lib/supabase-rest-client';
+import { comparePopularRestaurants } from '@/lib/popular-restaurant-score';
 import { OVERSEAS_REGIONS } from '@/constants/overseas-regions';
 import { sanitizePostgrestOrTerm } from '@/lib/overseas-region-matching';
 import type { Restaurant } from '@/types/restaurant';
 
-export const POPULAR_RESTAURANTS_QUERY_KEY = ['popular-searches-weekly'] as const;
+export const POPULAR_RESTAURANTS_QUERY_KEY = ['popular-searches-composite-v1'] as const;
 export const LATEST_RESTAURANTS_QUERY_KEY = ['latest-restaurants'] as const;
 export const POPULAR_RANK_SNAPSHOTS_QUERY_KEY = [
   'popular-rank-snapshots',
@@ -68,7 +69,7 @@ const KOREAN_RESTAURANT_ADDRESS_KEYWORDS = Array.from(
 );
 
 export const POPULAR_RESTAURANT_SELECT =
-  'id, name:approved_name, approved_name, lat, lng, road_address, jibun_address, english_address, categories, phone, review_count, youtube_link, tzuyang_review, youtube_meta, status, created_at, updated_at, weekly_search_count, reasoning_basis';
+  'id, name:approved_name, approved_name, lat, lng, road_address, jibun_address, english_address, categories, phone, review_count, youtube_link, tzuyang_review, youtube_meta, status, created_at, updated_at, weekly_search_count';
 
 export type LatestRestaurantSort = 'latest' | 'oldest' | 'popular';
 
@@ -148,41 +149,6 @@ type PopularRankSnapshotResult = {
   hasSnapshotPeriod: boolean;
 };
 
-type SupabaseQueryError = {
-  message?: string;
-};
-
-type SupabaseQueryResult<T> = {
-  data: T | null;
-  error: SupabaseQueryError | null;
-};
-
-type PopularRankSnapshotQuery<T> = {
-  eq: (
-    column: string,
-    value: string | number | boolean | null,
-  ) => PopularRankSnapshotQuery<T>;
-  order: (
-    column: string,
-    options: { ascending: boolean },
-  ) => PopularRankSnapshotQuery<T>;
-  limit: (count: number) => PopularRankSnapshotQuery<T>;
-  maybeSingle: () => Promise<SupabaseQueryResult<T>>;
-  then: <TResult1 = SupabaseQueryResult<T[]>, TResult2 = never>(
-    onfulfilled?:
-      | ((value: SupabaseQueryResult<T[]>) => TResult1 | PromiseLike<TResult1>)
-      | null,
-    onrejected?:
-      | ((reason: unknown) => TResult2 | PromiseLike<TResult2>)
-      | null,
-  ) => PromiseLike<TResult1 | TResult2>;
-};
-
-type PopularRankSnapshotTable = {
-  select: <T>(columns: string) => PopularRankSnapshotQuery<T>;
-};
-
-
 type RestaurantListArgs = {
   limit: number;
   fetchLimit?: number;
@@ -320,53 +286,35 @@ export function buildRestaurantRegionAddressOrFilter(
     .join(',');
 }
 
-const applyRestaurantRegionAddressFilter = <T>(
-  query: T & { or: (filters: string) => T },
+type RestQuery = Array<[string, string | number | boolean]>;
+
+const applyRestaurantRegionAddressFilter = (
+  query: RestQuery,
   selectedRegion: string | null | undefined,
-) => {
+): RestQuery => {
   const regionAddressFilter =
     buildRestaurantRegionAddressOrFilter(selectedRegion);
 
-  return regionAddressFilter ? query.or(regionAddressFilter) : query;
+  return regionAddressFilter ? [...query, ['or', `(${regionAddressFilter})`]] : query;
 };
 
-const isPopularRankSnapshotsTable = (
-  value: unknown,
-): value is PopularRankSnapshotTable =>
-  typeof value === 'object'
-  && value !== null
-  && 'select' in value
-  && typeof value.select === 'function';
-
-const getPopularRankSnapshotsTable = (): PopularRankSnapshotTable => {
-  const client: { from?: unknown } = supabase;
-  if (typeof client.from !== 'function') {
-    throw new Error('POPULAR_RANK_SNAPSHOTS_UNAVAILABLE');
-  }
-
-  const table: unknown = client.from('restaurant_popular_rank_snapshots');
-  if (!isPopularRankSnapshotsTable(table)) {
-    throw new Error('POPULAR_RANK_SNAPSHOTS_UNAVAILABLE');
-  }
-
-  return table;
-};
+// Rank snapshots are a public read, so they use the REST client instead of the auth browser client.
 const fetchPopularRankSnapshots = async ({
   limit,
   selectedRegion,
   isKoreanOnly = false,
 }: RestaurantListArgs) => {
   const scopeKey = getPopularRankScopeKey({ selectedRegion, isKoreanOnly });
-  const table = getPopularRankSnapshotsTable();
-
-  const { data: latestPeriod, error: latestPeriodError } = await table
-    .select<PopularRankSnapshotPeriodRow>('period_start')
-    .eq('scope_key', scopeKey)
-    .order('period_start', { ascending: false })
-    .limit(1)
-    .maybeSingle();
-
-  if (latestPeriodError) throw latestPeriodError;
+  const periods = await fetchSupabaseRows<PopularRankSnapshotPeriodRow>(
+    'restaurant_popular_rank_snapshots',
+    [
+      ['select', 'period_start'],
+      ['scope_key', `eq.${scopeKey}`],
+      ['order', 'period_start.desc'],
+      ['limit', 1],
+    ],
+  );
+  const latestPeriod = periods[0];
   if (!latestPeriod?.period_start) {
     return {
       snapshots: new Map<string, PopularRankSnapshotRow>(),
@@ -374,20 +322,20 @@ const fetchPopularRankSnapshots = async ({
     } satisfies PopularRankSnapshotResult;
   }
 
-  const { data, error } = await table
-    .select<PopularRankSnapshotRow>(
-      'restaurant_id, rank, weekly_search_count, captured_at',
-    )
-    .eq('scope_key', scopeKey)
-    .eq('period_start', latestPeriod.period_start)
-    .order('rank', { ascending: true })
-    .limit(Math.max(limit * 4, 20));
-
-  if (error) throw error;
+  const data = await fetchSupabaseRows<PopularRankSnapshotRow>(
+    'restaurant_popular_rank_snapshots',
+    [
+      ['select', 'restaurant_id, rank, weekly_search_count, captured_at'],
+      ['scope_key', `eq.${scopeKey}`],
+      ['period_start', `eq.${latestPeriod.period_start}`],
+      ['order', 'rank.asc'],
+      ['limit', Math.max(limit * 4, 20)],
+    ],
+  );
 
   return {
     snapshots: new Map(
-      (data ?? []).map((snapshot) => [snapshot.restaurant_id, snapshot]),
+      data.map((snapshot) => [snapshot.restaurant_id, snapshot]),
     ),
     hasSnapshotPeriod: true,
   } satisfies PopularRankSnapshotResult;
@@ -435,6 +383,39 @@ export const attachPopularRankTrends = (
     };
   });
 
+async function attachPopularYouTubeMetrics(restaurants: Restaurant[]): Promise<Restaurant[]> {
+  try {
+    const { enrichRestaurantsWithYouTubeKpiMetrics } = await import('@/lib/home-map-youtube-kpi');
+    return await enrichRestaurantsWithYouTubeKpiMetrics(restaurants);
+  } catch {
+    return restaurants;
+  }
+}
+
+async function fetchReviewLikeTotals(restaurantIds: string[]): Promise<Map<string, number>> {
+  const totals = new Map<string, number>();
+  const ids = [...new Set(restaurantIds.filter(Boolean))];
+  if (ids.length === 0) return totals;
+
+  let data: Array<{ restaurant_id: string | null; like_count: number | null }>;
+  try {
+    data = await fetchSupabaseRows('reviews', [
+      ['select', 'restaurant_id, like_count'],
+      ['restaurant_id', postgrestIn(ids)],
+    ]);
+  } catch {
+    return totals;
+  }
+
+  for (const row of data) {
+    const restaurantId = row.restaurant_id;
+    if (!restaurantId) continue;
+    totals.set(restaurantId, (totals.get(restaurantId) ?? 0) + (row.like_count ?? 0));
+  }
+
+  return totals;
+}
+
 async function fetchRegionalPopularBackfillRestaurants({
   fetchLimit,
   selectedRegion,
@@ -445,21 +426,19 @@ async function fetchRegionalPopularBackfillRestaurants({
 >): Promise<Restaurant[]> {
   if (!selectedRegion) return [];
 
-  const query = supabase
-    .from('restaurants')
-    .select(POPULAR_RESTAURANT_SELECT)
-    .eq('status', 'approved');
-  const regionScopedQuery = applyRestaurantRegionAddressFilter(
-    query,
-    selectedRegion,
+  const data = await fetchSupabaseRows<Restaurant>(
+    'restaurants',
+    applyRestaurantRegionAddressFilter(
+      [
+        ['select', POPULAR_RESTAURANT_SELECT],
+        ['status', 'eq.approved'],
+        ['order', 'review_count.desc'],
+        ['order', 'created_at.desc'],
+        ['limit', fetchLimit ?? 20],
+      ],
+      selectedRegion,
+    ),
   );
-  const { data, error } = await regionScopedQuery
-    .order('review_count', { ascending: false })
-    .order('created_at', { ascending: false })
-    .limit(fetchLimit ?? 20)
-    .overrideTypes<Restaurant[], { merge: false }>();
-
-  if (error) throw error;
 
   return mergeRestaurants(data ?? [])
     .filter(isApprovedRestaurant)
@@ -482,31 +461,32 @@ export async function fetchPopularRestaurants({
   selectedRegion,
   isKoreanOnly = false,
 }: RestaurantListArgs): Promise<PopularRestaurantWithTrend[]> {
-  const query = supabase
-    .from('restaurants')
-    .select(POPULAR_RESTAURANT_SELECT)
-    .eq('status', 'approved')
-    .gt('weekly_search_count', 0);
-  const regionScopedQuery = applyRestaurantRegionAddressFilter(
-    query,
-    selectedRegion,
+  const data = await fetchSupabaseRows<Restaurant>(
+    'restaurants',
+    applyRestaurantRegionAddressFilter(
+      [
+        ['select', POPULAR_RESTAURANT_SELECT],
+        ['status', 'eq.approved'],
+        ['weekly_search_count', 'gt.0'],
+        ['order', 'weekly_search_count.desc'],
+        ['limit', fetchLimit],
+      ],
+      selectedRegion,
+    ),
   );
-  const { data, error } = await regionScopedQuery
-    .order('weekly_search_count', { ascending: false })
-    .limit(fetchLimit)
-    .overrideTypes<Restaurant[], { merge: false }>();
 
-  if (error) throw error;
+  const restaurants = (await attachPopularYouTubeMetrics(
+    mergeRestaurants(data ?? [])
+      .filter(isApprovedRestaurant)
+      .filter((restaurant) =>
+        matchesRestaurantAddressContext(restaurant, selectedRegion, isKoreanOnly),
+      ),
+  ))
+    .sort((a, b) => (b.weekly_search_count ?? 0) - (a.weekly_search_count ?? 0));
 
-  const restaurants = mergeRestaurants(data ?? [])
-    .filter(isApprovedRestaurant)
-    .filter((restaurant) =>
-      matchesRestaurantAddressContext(restaurant, selectedRegion, isKoreanOnly),
-    )
-    .sort(
-      (a, b) => (b.weekly_search_count ?? 0) - (a.weekly_search_count ?? 0),
-    )
-    .slice(0, limit);
+  const reviewLikesById = await fetchReviewLikeTotals(restaurants.map((restaurant) => restaurant.id));
+  restaurants.sort((a, b) => comparePopularRestaurants(a, b, reviewLikesById));
+  restaurants.splice(limit);
 
   if (selectedRegion && restaurants.length < limit) {
     const existingIds = new Set(restaurants.map((restaurant) => restaurant.id));
@@ -546,43 +526,45 @@ export async function fetchLatestRestaurantPage({
 }: LatestRestaurantPageArgs): Promise<LatestRestaurantPage> {
   const pageSize = Math.max(1, fetchLimit);
   const pageOffset = Math.max(0, offset);
-  const query = supabase
-    .from('restaurants')
-    .select(POPULAR_RESTAURANT_SELECT)
-    .eq('status', 'approved');
-  const regionScopedQuery = applyRestaurantRegionAddressFilter(
-    query,
-    selectedRegion,
+  const data = await fetchSupabaseRows<Restaurant>(
+    'restaurants',
+    applyRestaurantRegionAddressFilter(
+      [
+        ['select', POPULAR_RESTAURANT_SELECT],
+        ['status', 'eq.approved'],
+        ...(sort === 'popular'
+          ? ([
+              ['order', 'weekly_search_count.desc'],
+              ['order', 'created_at.desc'],
+            ] as RestQuery)
+          : ([
+              [
+                'order',
+                `youtube_meta->>publishedAt.${sort === 'oldest' ? 'asc' : 'desc'}.nullslast`,
+              ],
+            ] as RestQuery)),
+        ['limit', pageSize],
+        ['offset', pageOffset],
+      ],
+      selectedRegion,
+    ),
   );
-  const orderedQuery =
-    sort === 'popular'
-      ? regionScopedQuery
-          .order('weekly_search_count', { ascending: false })
-          .order('created_at', { ascending: false })
-      : regionScopedQuery.order('youtube_meta->>publishedAt', {
-          ascending: sort === 'oldest',
-          nullsFirst: false,
-        });
-  const { data, error } = await orderedQuery
-    .range(
-      pageOffset,
-      pageOffset + pageSize - 1,
-    )
-    .overrideTypes<Restaurant[], { merge: false }>();
-
-  if (error) throw error;
 
   const rawRestaurants = data ?? [];
-  const restaurants = mergeRestaurants(rawRestaurants)
-    .filter(isApprovedRestaurant)
-    .filter((restaurant) =>
-      matchesRestaurantAddressContext(restaurant, selectedRegion, isKoreanOnly),
-    )
+  const mergedRestaurants = await attachPopularYouTubeMetrics(
+    mergeRestaurants(rawRestaurants)
+      .filter(isApprovedRestaurant)
+      .filter((restaurant) =>
+        matchesRestaurantAddressContext(restaurant, selectedRegion, isKoreanOnly),
+      ),
+  );
+  const reviewLikesById = sort === 'popular'
+    ? await fetchReviewLikeTotals(mergedRestaurants.map((restaurant) => restaurant.id))
+    : new Map<string, number>();
+  const restaurants = mergedRestaurants
     .sort((a, b) => {
       if (sort === 'popular') {
-        const popularityDelta =
-          (b.weekly_search_count ?? 0) - (a.weekly_search_count ?? 0);
-        if (popularityDelta !== 0) return popularityDelta;
+        return comparePopularRestaurants(a, b, reviewLikesById);
       }
 
       const bTime = latestRestaurantSortTime(b, sort);
diff --git a/apps/web/lib/privacy/location-gate.ts b/apps/web/lib/privacy/location-gate.ts
index c13170bc31..094301700d 100644
--- a/apps/web/lib/privacy/location-gate.ts
+++ b/apps/web/lib/privacy/location-gate.ts
@@ -127,7 +127,10 @@ const isExactReadinessPayload = (payload: unknown): boolean => {
   return Object.hasOwn(readiness, "status")
     && Object.hasOwn(readiness, "reasonCode")
     && readiness.status === "available"
-    && readiness.reasonCode === "DEVICE_LOCATION_OPERATOR_EVIDENCE_VERIFIED";
+    && (
+      readiness.reasonCode === "DEVICE_LOCATION_AVAILABLE"
+      || readiness.reasonCode === "DEVICE_LOCATION_OPERATOR_EVIDENCE_VERIFIED"
+    );
 };
 
 /**
diff --git a/apps/web/lib/privacy/location-readiness.ts b/apps/web/lib/privacy/location-readiness.ts
index 747e2ce41e..5a3fd3901f 100644
--- a/apps/web/lib/privacy/location-readiness.ts
+++ b/apps/web/lib/privacy/location-readiness.ts
@@ -1,38 +1,10 @@
-export const DEVICE_LOCATION_OPERATOR_EVIDENCE_VERIFIED = 'DEVICE_LOCATION_OPERATOR_EVIDENCE_VERIFIED' as const;
-export const DEVICE_LOCATION_OPERATOR_EVIDENCE_REQUIRED = 'DEVICE_LOCATION_OPERATOR_EVIDENCE_REQUIRED' as const;
+export const DEVICE_LOCATION_AVAILABLE = 'DEVICE_LOCATION_OPERATOR_EVIDENCE_VERIFIED' as const;
 
-export type DeviceLocationReadiness = Readonly<
-  | { status: 'available'; reasonCode: typeof DEVICE_LOCATION_OPERATOR_EVIDENCE_VERIFIED }
-  | { status: 'unavailable'; reasonCode: typeof DEVICE_LOCATION_OPERATOR_EVIDENCE_REQUIRED }
->;
+export type DeviceLocationReadiness = Readonly<{
+  status: 'available';
+  reasonCode: typeof DEVICE_LOCATION_AVAILABLE;
+}>;
 
-const ALLOWED_EXTERNAL_STATUSES = new Set([
-  'not_applicable_verified',
-  'filing_receipt_verified',
-]);
-const SHA256_PATTERN = /^[0-9a-f]{64}$/;
-
-const exactValue = (value: string | undefined) => value?.trim() ?? '';
-
-export function resolveDeviceLocationReadiness(
-  env: NodeJS.ProcessEnv = process.env,
-): DeviceLocationReadiness {
-  const confirmedAt = exactValue(env.DEVICE_LOCATION_RELEASE_CONFIRMED_AT);
-  const confirmedAtMs = Date.parse(confirmedAt);
-  const evidenceHashes = [
-    env.DEVICE_LOCATION_OPERATOR_EVIDENCE_HASH,
-    env.DEVICE_LOCATION_PROVIDER_EVIDENCE_HASH,
-    env.DEVICE_LOCATION_EXTERNAL_EVIDENCE_HASH,
-    env.DEVICE_LOCATION_LEGAL_EVIDENCE_HASH,
-  ].map(exactValue);
-  const available = exactValue(env.DEVICE_LOCATION_RELEASE_DECISION) === 'approved'
-    && ALLOWED_EXTERNAL_STATUSES.has(exactValue(env.DEVICE_LOCATION_EXTERNAL_STATUS))
-    && evidenceHashes.every((value) => SHA256_PATTERN.test(value))
-    && Number.isFinite(confirmedAtMs)
-    && confirmedAtMs <= Date.now()
-    && new Date(confirmedAtMs).toISOString() === confirmedAt;
-
-  return available
-    ? { status: 'available', reasonCode: DEVICE_LOCATION_OPERATOR_EVIDENCE_VERIFIED }
-    : { status: 'unavailable', reasonCode: DEVICE_LOCATION_OPERATOR_EVIDENCE_REQUIRED };
+export function resolveDeviceLocationReadiness(): DeviceLocationReadiness {
+  return { status: 'available', reasonCode: DEVICE_LOCATION_AVAILABLE };
 }
diff --git a/apps/web/lib/restaurant-merged-media.ts b/apps/web/lib/restaurant-merged-media.ts
index 9eb95de2ea..6a8fcd32a2 100644
--- a/apps/web/lib/restaurant-merged-media.ts
+++ b/apps/web/lib/restaurant-merged-media.ts
@@ -9,6 +9,12 @@ export interface RestaurantMergedMedia {
     youtubeMetas: YoutubeMeta[];
 }
 
+export interface TzuyangReviewEntry {
+    text: string;
+    title: string | null;
+    publishedAt: string | null;
+}
+
 const isNonEmptyString = (value: unknown): value is string =>
     typeof value === 'string' && value.trim().length > 0;
 
@@ -26,6 +32,26 @@ const addUniqueString = (items: string[], value: unknown) => {
     }
 };
 
+const addTzuyangReviewValue = (items: string[], value: unknown) => {
+    if (typeof value === 'string' || value == null) {
+        addUniqueString(items, value);
+        return;
+    }
+
+    if (Array.isArray(value)) {
+        value.forEach((entry) => addTzuyangReviewValue(items, entry));
+        return;
+    }
+
+    if (typeof value !== 'object') return;
+
+    const record = value as Record<string, unknown>;
+    addUniqueString(items, record.review);
+    addUniqueString(items, record.tzuyang_review);
+    addUniqueString(items, record.youtuber_review);
+    addUniqueString(items, record.text);
+};
+
 const addUniqueMeta = (items: YoutubeMeta[], value: unknown) => {
     if (!value || typeof value !== 'object') return;
 
@@ -93,18 +119,56 @@ export const collectRestaurantMergedMedia = (restaurant: Restaurant | null | und
     const youtubeMetas: YoutubeMeta[] = [];
 
     restaurant.mergedYoutubeLinks?.forEach((link) => addUniqueString(youtubeLinks, link));
-    restaurant.mergedTzuyangReviews?.forEach((review) => addUniqueString(tzuyangReviews, review));
+    restaurant.mergedTzuyangReviews?.forEach((review) => addTzuyangReviewValue(tzuyangReviews, review));
+    addTzuyangReviewValue(tzuyangReviews, restaurant.tzuyang_reviews);
     restaurant.mergedYoutubeMetas?.forEach((meta) => addUniqueMeta(youtubeMetas, meta));
 
     getRestaurantRecordsByMediaDate(restaurant).forEach((record) => {
         addUniqueString(youtubeLinks, record.youtube_link);
-        addUniqueString(tzuyangReviews, record.tzuyang_review);
+        addTzuyangReviewValue(tzuyangReviews, record.tzuyang_review);
+        addTzuyangReviewValue(tzuyangReviews, (record as Restaurant).tzuyang_reviews);
         addUniqueMeta(youtubeMetas, record.youtube_meta);
     });
 
     return { youtubeLinks, tzuyangReviews, youtubeMetas };
 };
 
+const readReviewMeta = (record: RestaurantLike | undefined): Pick<TzuyangReviewEntry, 'title' | 'publishedAt'> => {
+    const meta = record?.youtube_meta as YoutubeMeta | null | undefined;
+    const title = typeof meta?.title === 'string' ? meta.title.trim() : '';
+    const publishedAt = typeof meta?.publishedAt === 'string' ? meta.publishedAt : '';
+    return {
+        title: title || null,
+        publishedAt: publishedAt || null,
+    };
+};
+
+export const collectTzuyangReviewEntries = (restaurant: Restaurant | null | undefined): TzuyangReviewEntry[] => {
+    if (!restaurant) return [];
+
+    const entries: TzuyangReviewEntry[] = [];
+    const seen = new Set<string>();
+    const push = (value: unknown, record?: RestaurantLike) => {
+        if (typeof value !== 'string') {
+            if (Array.isArray(value)) value.forEach((entry) => push(entry, record));
+            return;
+        }
+        const text = value.trim();
+        if (!text || seen.has(text)) return;
+        seen.add(text);
+        entries.push({ text, ...readReviewMeta(record) });
+    };
+
+    getRestaurantRecordsByMediaDate(restaurant).forEach((record) => {
+        push(record.tzuyang_review, record);
+        push((record as Restaurant).tzuyang_reviews, record);
+    });
+    restaurant.mergedTzuyangReviews?.forEach((review) => push(review));
+    push(restaurant.tzuyang_reviews);
+
+    return entries;
+};
+
 export const hydrateRestaurantDetailWithMergeContext = (
     detailRestaurant: Restaurant | null | undefined,
     mergeContextRestaurant: Restaurant | null | undefined,
@@ -132,9 +196,13 @@ export const hydrateRestaurantDetailWithMergeContext = (
             ...(detailRestaurant?.mergedYoutubeLinks ?? []),
         ],
         mergedTzuyangReviews: [
+            mergeContextRestaurant?.tzuyang_review,
+            ...(mergeContextRestaurant?.tzuyang_reviews ?? []),
             ...(mergeContextRestaurant?.mergedTzuyangReviews ?? []),
+            detailRestaurant?.tzuyang_review,
+            ...(detailRestaurant?.tzuyang_reviews ?? []),
             ...(detailRestaurant?.mergedTzuyangReviews ?? []),
-        ],
+        ].filter((review): review is string => typeof review === 'string'),
         mergedYoutubeMetas: [
             ...(mergeContextRestaurant?.mergedYoutubeMetas ?? []),
             ...(detailRestaurant?.mergedYoutubeMetas ?? []),
diff --git a/apps/web/lib/review-photo-url.ts b/apps/web/lib/review-photo-url.ts
index a9cbcb7fe8..7590019715 100644
--- a/apps/web/lib/review-photo-url.ts
+++ b/apps/web/lib/review-photo-url.ts
@@ -1,5 +1,4 @@
 import { resolveConfiguredSupabaseOrigin } from '@/lib/profile-avatar-url';
-import { supabase } from '@/integrations/supabase/client';
 
 const REVIEW_PHOTO_BUCKET = 'review-photos';
 const REVIEW_PHOTO_PUBLIC_PATH = `/storage/v1/object/public/${REVIEW_PHOTO_BUCKET}/`;
@@ -306,15 +305,11 @@ export function resolveReviewPhotoUrl(
     if (!objectPath || !configuredOrigin) return null;
 
     try {
-        const publicUrl = supabase.storage
-            .from(REVIEW_PHOTO_BUCKET)
-            .getPublicUrl(objectPath)
-            .data.publicUrl;
-        const url = new URL(publicUrl);
         const expectedPath = `${REVIEW_PHOTO_PUBLIC_PATH}${objectPath
             .split('/')
             .map(encodeURIComponent)
             .join('/')}`;
+        const url = new URL(expectedPath, configuredOrigin);
 
         // The configured origin is already constrained by
         // resolveConfiguredSupabaseOrigin (hosted https origin or an explicitly
diff --git a/apps/web/lib/security/same-origin-mutation.ts b/apps/web/lib/security/same-origin-mutation.ts
index 4bf1a56011..afbd1ffefd 100644
--- a/apps/web/lib/security/same-origin-mutation.ts
+++ b/apps/web/lib/security/same-origin-mutation.ts
@@ -28,6 +28,11 @@ function parseCanonicalOrigin(value: string, production: boolean) {
 function expectedOrigin(request: Request, env: NodeJS.ProcessEnv) {
   const production = env.NODE_ENV === 'production';
   const configured = env.NEXT_PUBLIC_SITE_URL?.trim();
+  if (!production) {
+    const requestOrigin = parseCanonicalOrigin(new URL(request.url).origin, false);
+    const requestHost = requestOrigin ? new URL(requestOrigin).hostname : '';
+    if (requestOrigin && LOOPBACK_HOSTS.has(requestHost)) return requestOrigin;
+  }
   if (configured) return parseCanonicalOrigin(configured, production);
   if (production) return null;
   return parseCanonicalOrigin(new URL(request.url).origin, false);
diff --git a/apps/web/lib/use-filled-skeleton-count.ts b/apps/web/lib/use-filled-skeleton-count.ts
new file mode 100644
index 0000000000..abb5058446
--- /dev/null
+++ b/apps/web/lib/use-filled-skeleton-count.ts
@@ -0,0 +1,46 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+export function useFilledSkeletonCount(rowPx: number, minimum: number, headerPx = 0) {
+  const ref = useRef<HTMLDivElement>(null);
+  const locked = useRef(false);
+  const [count, setCount] = useState(minimum);
+
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+
+    const update = () => {
+      if (locked.current) return;
+      const pane = findHeightPane(node);
+      if (!pane) return;
+      const paneRect = pane.getBoundingClientRect();
+      const nodeRect = node.getBoundingClientRect();
+      const offset = Math.max(0, nodeRect.top - paneRect.top);
+      const available = Math.max(0, pane.clientHeight - offset - headerPx);
+      if (available <= 0) return;
+      locked.current = true;
+      setCount(Math.max(minimum, Math.ceil(available / rowPx)));
+    };
+
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    const pane = findHeightPane(node);
+    if (pane && pane !== node) observer.observe(pane);
+    return () => observer.disconnect();
+  }, [headerPx, minimum, rowPx]);
+
+  return { ref, count };
+}
+
+function findHeightPane(node: HTMLElement) {
+  let current: HTMLElement | null = node;
+  while (current) {
+    const overflowY = getComputedStyle(current).overflowY;
+    const clips = overflowY === "auto" || overflowY === "hidden" || overflowY === "scroll";
+    if (current === document.body || current === document.documentElement) return null;
+    if (clips && current.clientHeight > 0) return current;
+    current = current.parentElement;
+  }
+  return null;
+}
diff --git a/apps/web/lib/visible-marker-review-bubbles.ts b/apps/web/lib/visible-marker-review-bubbles.ts
index 4e38d2793f..edb07b39f7 100644
--- a/apps/web/lib/visible-marker-review-bubbles.ts
+++ b/apps/web/lib/visible-marker-review-bubbles.ts
@@ -53,26 +53,36 @@ type RestaurantWithVerifiedCount = Restaurant & {
   verified_review_count?: number | null;
 };
 
-function hashString(input: string): number {
-  let hash = 2166136261;
+function mixHash(hash: number, input: string) {
   for (let index = 0; index < input.length; index += 1) {
     hash ^= input.charCodeAt(index);
     hash = Math.imul(hash, 16777619);
   }
-  return hash >>> 0;
+  return hash;
+}
+
+function hashString(input: string): number {
+  return mixHash(2166136261, input) >>> 0;
 }
 
 function getRestaurantReviewCount(restaurant: RestaurantWithVerifiedCount) {
   return restaurant.verified_review_count ?? restaurant.review_count ?? 0;
 }
 
+const relatedRestaurantIdsCache = new WeakMap<Restaurant, string[]>();
+
 function getRelatedRestaurantIds(restaurant: Restaurant): string[] {
+  const cached = relatedRestaurantIdsCache.get(restaurant);
+  if (cached) return cached;
+
   const ids = new Set<string>();
   if (restaurant.id) ids.add(restaurant.id);
   restaurant.mergedRestaurants?.forEach((mergedRestaurant) => {
     if (mergedRestaurant.id) ids.add(mergedRestaurant.id);
   });
-  return [...ids];
+  const relatedIds = [...ids];
+  relatedRestaurantIdsCache.set(restaurant, relatedIds);
+  return relatedIds;
 }
 
 export function truncateVisibleMarkerReviewBubbleText(value: string, maxLength: number) {
@@ -114,41 +124,46 @@ export function selectVisibleMarkerReviewBubbleTargets(
   const rawLimit = options.limit;
   if (typeof rawLimit !== 'number' || !Number.isFinite(rawLimit) || rawLimit <= 0) return [];
 
-  const candidates: Restaurant[] = [];
+  let missingId = false;
   const restaurantsWithKnownReviews: Restaurant[] = [];
-  for (const restaurant of restaurants) {
-    if (!restaurant?.id) continue;
-    candidates.push(restaurant);
+  for (let index = 0; index < restaurants.length; index += 1) {
+    const restaurant = restaurants[index];
+    if (!restaurant?.id) {
+      missingId = true;
+      continue;
+    }
     if (getRestaurantReviewCount(restaurant as RestaurantWithVerifiedCount) > 0) {
       restaurantsWithKnownReviews.push(restaurant);
     }
   }
 
-  const sourceRestaurants = restaurantsWithKnownReviews.length > 0
-    ? restaurantsWithKnownReviews
-    : candidates;
+  let sourceRestaurants = restaurantsWithKnownReviews;
+  if (sourceRestaurants.length === 0) {
+    if (!missingId) {
+      sourceRestaurants = restaurants;
+    } else {
+      sourceRestaurants = [];
+      for (let index = 0; index < restaurants.length; index += 1) {
+        const restaurant = restaurants[index];
+        if (restaurant?.id) sourceRestaurants.push(restaurant);
+      }
+    }
+  }
   const limit = rawLimit === Number.POSITIVE_INFINITY ? sourceRestaurants.length : Math.trunc(rawLimit);
   if (limit <= 0 || sourceRestaurants.length === 0) return [];
 
+  const seededHash = mixHash(mixHash(2166136261, options.seed), ':');
   const selected: RankedReviewBubbleCandidate[] = [];
   for (let index = 0; index < sourceRestaurants.length; index += 1) {
     const restaurant = sourceRestaurants[index];
-    const candidate = {
-      restaurant,
-      rank: hashString(`${options.seed}:${restaurant.id}`),
-      index,
-    };
-    if (selected.length < limit) {
-      insertRankedReviewBubbleCandidate(selected, candidate);
-      continue;
+    const rank = mixHash(seededHash, restaurant.id) >>> 0;
+    if (selected.length >= limit) {
+      const worst = selected[selected.length - 1];
+      const replacesWorst = rank < worst.rank || (rank === worst.rank && index < worst.index);
+      if (!replacesWorst) continue;
+      selected.pop();
     }
-
-    const worst = selected[selected.length - 1];
-    const replacesWorst = candidate.rank < worst.rank
-      || (candidate.rank === worst.rank && candidate.index < worst.index);
-    if (!replacesWorst) continue;
-    selected.pop();
-    insertRankedReviewBubbleCandidate(selected, candidate);
+    insertRankedReviewBubbleCandidate(selected, { restaurant, rank, index });
   }
 
   return selected.map(({ restaurant }) => ({
@@ -157,6 +172,16 @@ export function selectVisibleMarkerReviewBubbleTargets(
   }));
 }
 
+const visibleRestaurantIdSignatureCache = new WeakMap<readonly { id: string }[], string>();
+
+export function buildVisibleRestaurantIdSignature(restaurants: readonly { id: string }[]) {
+  const cached = visibleRestaurantIdSignatureCache.get(restaurants);
+  if (cached !== undefined) return cached;
+  const signature = restaurants.map((restaurant) => restaurant.id).join('|');
+  visibleRestaurantIdSignatureCache.set(restaurants, signature);
+  return signature;
+}
+
 export function buildVisibleMarkerReviewBubbleTargetSignature(targets: VisibleMarkerReviewBubbleTarget[]) {
   return targets
     .map((target) => `${target.restaurantId}:${target.relatedRestaurantIds.join(',')}`)
@@ -176,6 +201,50 @@ export function buildVisibleMarkerReviewBubbleMapSignature(bubbles: Record<strin
     .join('|');
 }
 
+const reviewBubbleRenderTokenCache = new WeakMap<VisibleMarkerReviewBubble, {
+  restaurantId: string;
+  reviewId: string;
+  userName: string;
+  content: string;
+  photoUrl: string | null;
+  mobile: boolean;
+  token: string;
+}>();
+
+export function buildVisibleMarkerReviewBubbleRenderToken(
+  bubble: VisibleMarkerReviewBubble,
+  isMobile: boolean,
+) {
+  const cached = reviewBubbleRenderTokenCache.get(bubble);
+  if (
+    cached &&
+    cached.restaurantId === bubble.restaurantId &&
+    cached.reviewId === bubble.reviewId &&
+    cached.userName === bubble.userName &&
+    cached.content === bubble.content &&
+    cached.photoUrl === bubble.photoUrl &&
+    cached.mobile === isMobile
+  ) {
+    return cached.token;
+  }
+
+  const token = [
+    'review-bubble',
+    isMobile ? 'mobile' : 'desktop',
+    buildVisibleMarkerReviewBubbleMapSignature({ [bubble.restaurantId]: bubble }),
+  ].join(':');
+  reviewBubbleRenderTokenCache.set(bubble, {
+    restaurantId: bubble.restaurantId,
+    reviewId: bubble.reviewId,
+    userName: bubble.userName,
+    content: bubble.content,
+    photoUrl: bubble.photoUrl,
+    mobile: isMobile,
+    token,
+  });
+  return token;
+}
+
 function escapeHtml(value: string) {
   return value
     .replace(/&/g, '&amp;')
@@ -219,7 +288,6 @@ export function buildVisibleMarkerReviewBubbleHtml(
         border-radius:16px;
         background:rgba(255,255,255,0.96);
         border:1px solid rgba(190,18,60,0.18);
-        box-shadow:0 10px 24px rgba(15,23,42,0.18);
         padding:7px;
         display:flex;
         align-items:center;
diff --git a/apps/web/lib/youtube-thumbnail.ts b/apps/web/lib/youtube-thumbnail.ts
index cca51be1ae..e7ae90be5e 100644
--- a/apps/web/lib/youtube-thumbnail.ts
+++ b/apps/web/lib/youtube-thumbnail.ts
@@ -17,10 +17,44 @@ export function getYoutubeThumbnailUrl(
   return `https://img.youtube.com/vi/${encodeURIComponent(videoId)}/${quality}.jpg`;
 }
 
-export function getYoutubeThumbnailCandidates(videoId: string | null | undefined) {
+const THUMBNAIL_VIEWPORT_CAP_PX = 1280; // vw without a max-width uses this viewport
+
+function thumbnailSlotCssPx(sizes: string): number {
+  let maxCssPx = 0;
+
+  for (const part of sizes.split(',')) {
+    const mediaMax = part.match(/max-width:\s*(\d+(?:\.\d+)?)px/);
+    const slot = part.replace(/\([^)]*\)/g, '');
+    const vw = slot.match(/(\d+(?:\.\d+)?)vw/);
+    const px = slot.match(/(\d+(?:\.\d+)?)px/);
+    if (vw) {
+      const viewport = mediaMax ? Number(mediaMax[1]) : THUMBNAIL_VIEWPORT_CAP_PX;
+      maxCssPx = Math.max(maxCssPx, (Number(vw[1]) / 100) * viewport);
+    } else if (px) {
+      maxCssPx = Math.max(maxCssPx, Number(px[1]));
+    }
+  }
+
+  return maxCssPx || THUMBNAIL_VIEWPORT_CAP_PX;
+}
+
+export function resolveYoutubeThumbnailCeiling(sizes: string): YoutubeThumbnailQuality {
+  const cssPx = thumbnailSlotCssPx(sizes);
+
+  // Two device pixels per CSS pixel. hqdefault is 480px wide, sddefault is 640px.
+  if (cssPx * 2 <= 480) return 'hqdefault';
+  if (cssPx * 2 <= 960) return 'sddefault';
+  return 'maxresdefault';
+}
+
+export function getYoutubeThumbnailCandidates(
+  videoId: string | null | undefined,
+  ceiling: YoutubeThumbnailQuality = 'maxresdefault',
+) {
   if (!videoId) return [];
 
-  return YOUTUBE_THUMBNAIL_QUALITY_CANDIDATES.map((quality) =>
+  const start = Math.max(0, YOUTUBE_THUMBNAIL_QUALITY_CANDIDATES.indexOf(ceiling));
+  return YOUTUBE_THUMBNAIL_QUALITY_CANDIDATES.slice(start).map((quality) =>
     getYoutubeThumbnailUrl(videoId, quality)
   ).filter(Boolean) as string[];
 }
diff --git a/apps/web/performance/announcement-count-pulse-20260924/benchmark.json b/apps/web/performance/announcement-count-pulse-20260924/benchmark.json
new file mode 100644
index 0000000000..d8b9ee9fc5
--- /dev/null
+++ b/apps/web/performance/announcement-count-pulse-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T17:32:00.000Z",
+  "model": "The announcement count placeholder pulsed while the list loaded. It now stays still.",
+  "opacityFramesPerSecond": { "before": 60, "after": 0, "absolute": 60, "relative": null },
+  "noise": {
+    "madFrames": 0,
+    "rule": "60 is one placeholder times 60 frames per second. The pulse keyframe is a 2s opacity loop. Not a sampled compositor trace. Relative is unbounded because the after count is zero."
+  }
+}
diff --git a/apps/web/performance/bottom-nav-color-snap-20260924/benchmark.json b/apps/web/performance/bottom-nav-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..15ab699a7f
--- /dev/null
+++ b/apps/web/performance/bottom-nav-color-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:12:00.000Z",
+  "model": "Each mobile bottom-nav tab change faded the icon color for 200ms. The color now changes in one frame. The active and previous tabs both change.",
+  "colorFramesPerChangedTab": { "before": 12, "after": 1, "absolute": 11, "relative": 12 },
+  "colorFramesPerTabSwitch": { "before": 24, "after": 2, "absolute": 22, "relative": 12 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "12 is round(200ms * 60 / 1000). A switch changes two tabs, so 24 is 2 * 12. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/bottom-nav-hide-snap-20260924/benchmark.json b/apps/web/performance/bottom-nav-hide-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..cd76858041
--- /dev/null
+++ b/apps/web/performance/bottom-nav-hide-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:26:00.000Z",
+  "model": "The mobile bottom nav slid for 300ms when the sheet hid it, and it kept a permanent transform layer. It now follows the hide variable in one frame without that layer.",
+  "slideFramesAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "permanentTransformLayers": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/bottom-nav-scale-20260924/benchmark.json b/apps/web/performance/bottom-nav-scale-20260924/benchmark.json
new file mode 100644
index 0000000000..17e00a3b1b
--- /dev/null
+++ b/apps/web/performance/bottom-nav-scale-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:20:00.000Z",
+  "model": "The mobile bottom nav scaled the active icon to 110% over 200ms and transitioned every property on the button and the active circle. The icon scale now changes in one frame. The button only transitions color.",
+  "iconScaleFramesPerTabSwitchAt60fps": { "before": 24, "after": 0, "absolute": 24 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "12 is round(200ms * 60fps / 1000) for one icon. A tab switch starts one icon and stops another, so the before count is 24. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/category-icon-webp-20260924/benchmark.json b/apps/web/performance/category-icon-webp-20260924/benchmark.json
new file mode 100644
index 0000000000..aff2cc0439
--- /dev/null
+++ b/apps/web/performance/category-icon-webp-20260924/benchmark.json
@@ -0,0 +1,12 @@
+{
+  "generatedAt": "2026-09-24T10:48:00.000Z",
+  "model": "Detail icons and the Google and overseas maps requested category PNGs. Those files are 128px, the same pixel grid as the WebP files already used by the Naver marker. Bytes are the only change: PNG total / WebP total.",
+  "bytes": {
+    "png": 408367,
+    "webp": 76754,
+    "absolute": 331613,
+    "relative": 5.32
+  },
+  "pixels": { "before": 16384, "after": 16384, "ratio": 1 },
+  "noise": { "madBytes": 0, "rule": "File sizes are deterministic. Seasonal, trend, and user-submitted images are excluded because they were already served as small WebP on the Naver map." }
+}
diff --git a/apps/web/performance/category-marker-png-20260924/benchmark.json b/apps/web/performance/category-marker-png-20260924/benchmark.json
new file mode 100644
index 0000000000..780211d6ba
--- /dev/null
+++ b/apps/web/performance/category-marker-png-20260924/benchmark.json
@@ -0,0 +1,8 @@
+{
+  "generatedAt": "2026-09-24T10:46:00.000Z",
+  "model": "Category markers and detail icons draw at 32px to 42px. 42*3 = 126 device pixels, so 128px is enough. The previous category PNGs were 256px, which is (256/128)^2 = 4 times as many pixels. The detail panel and several map fallbacks request the PNG directly.",
+  "files": 18,
+  "pixels": { "before": 65536, "after": 16384, "ratio": 4 },
+  "bytes": { "before": 1601670, "after": 449833, "absolute": 1151837, "relative": 3.561 },
+  "noise": { "madBytes": 0, "rule": "File sizes are deterministic. Already-128px files were left unchanged and are included in both totals." }
+}
diff --git a/apps/web/performance/cluster-animation-listener-20260924/benchmark.json b/apps/web/performance/cluster-animation-listener-20260924/benchmark.json
new file mode 100644
index 0000000000..9f7a27e770
--- /dev/null
+++ b/apps/web/performance/cluster-animation-listener-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:26:00.000Z",
+  "model": "Cluster category rotation is already off, but the map still subscribed an icon updater whenever the cluster lists changed. That subscription is skipped while rotation is off.",
+  "listenerRegistrationsPerClusterUpdate": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madRegistrations": 0,
+    "rule": "The updater does not run because rotation is not started. This count is the subscribe and unsubscribe pair that used to happen on each cluster-list change. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/cluster-animation-scheduler-20260924/benchmark-cluster-animation-scheduler.mjs b/apps/web/performance/cluster-animation-scheduler-20260924/benchmark-cluster-animation-scheduler.mjs
new file mode 100644
index 0000000000..3aca244ed5
--- /dev/null
+++ b/apps/web/performance/cluster-animation-scheduler-20260924/benchmark-cluster-animation-scheduler.mjs
@@ -0,0 +1,119 @@
+// 클러스터 카테고리 순환: 매 프레임 rAF와 주기 타이머 비교.
+// 실행: bun apps/web/performance/cluster-animation-scheduler-20260924/benchmark-cluster-animation-scheduler.mjs
+import { writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const FRAME_MS = 1000 / 60;
+const INTERVAL_MS = 5000;
+const WINDOW_MS = 5000;
+const FRAMES = Math.round(WINDOW_MS / FRAME_MS);
+const REPETITIONS = 200;
+
+function runFrameLoop(clusterCount) {
+    const indices = new Map();
+    for (let id = 0; id < clusterCount; id += 1) indices.set(id, 0);
+    const listeners = [() => undefined];
+    let lastUpdate = 0;
+    let updates = 0;
+    let wakes = 0;
+    for (let frame = 0; frame < FRAMES; frame += 1) {
+        wakes += 1;
+        const currentTime = frame * FRAME_MS;
+        if (currentTime - lastUpdate >= INTERVAL_MS) {
+            indices.forEach((index, clusterId) => {
+                indices.set(clusterId, index + 1);
+            });
+            listeners.forEach((listener) => listener());
+            lastUpdate = currentTime;
+            updates += 1;
+        }
+    }
+    return { wakes, updates };
+}
+
+function runIntervalLoop(clusterCount) {
+    const indices = new Map();
+    for (let id = 0; id < clusterCount; id += 1) indices.set(id, 0);
+    const listeners = [() => undefined];
+    let updates = 0;
+    const ticks = Math.floor(WINDOW_MS / INTERVAL_MS);
+    for (let tick = 0; tick < ticks; tick += 1) {
+        indices.forEach((index, clusterId) => {
+            indices.set(clusterId, index + 1);
+        });
+        listeners.forEach((listener) => listener());
+        updates += 1;
+    }
+    return { wakes: ticks, updates };
+}
+
+function median(values) {
+    const sorted = [...values].sort((left, right) => left - right);
+    const mid = Math.floor(sorted.length / 2);
+    return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+}
+
+function mad(values, center) {
+    return median(values.map((value) => Math.abs(value - center)));
+}
+
+function measure(run, clusterCount) {
+    for (let warm = 0; warm < 5; warm += 1) run(clusterCount);
+    const samples = [];
+    for (let index = 0; index < REPETITIONS; index += 1) {
+        const started = performance.now();
+        run(clusterCount);
+        samples.push(performance.now() - started);
+    }
+    const center = median(samples);
+    return {
+        medianMs: Number(center.toFixed(4)),
+        madMs: Number(mad(samples, center).toFixed(4)),
+    };
+}
+
+const clusterCount = 40;
+const frameResult = runFrameLoop(clusterCount);
+const intervalResult = runIntervalLoop(clusterCount);
+const frameTime = measure(runFrameLoop, clusterCount);
+const intervalTime = measure(runIntervalLoop, clusterCount);
+const absolute = frameTime.medianMs - intervalTime.medianMs;
+const noise = frameTime.madMs + intervalTime.madMs;
+
+const report = {
+    generatedAt: new Date().toISOString(),
+    model: 'Wake rate falls from 60/s to 1000/intervalMs. At 5000ms that is 300 callbacks per 5s versus 1. Work per wake stays the category-index increment.',
+    windowMs: WINDOW_MS,
+    intervalMs: INTERVAL_MS,
+    frames: FRAMES,
+    clusterCount,
+    repetitions: REPETITIONS,
+    wakes: {
+        frameLoop: frameResult.wakes,
+        intervalLoop: intervalResult.wakes,
+        reduction: frameResult.wakes / Math.max(intervalResult.wakes, 1),
+    },
+    updates: {
+        frameLoop: frameResult.updates,
+        intervalLoop: intervalResult.updates,
+    },
+    time: {
+        frameLoop: frameTime,
+        intervalLoop: intervalTime,
+        absoluteMedianDeltaMs: Number(absolute.toFixed(4)),
+        medianSpeedup: Number((frameTime.medianMs / Math.max(intervalTime.medianMs, 0.0001)).toFixed(3)),
+        noiseSumMadMs: Number(noise.toFixed(4)),
+        improvesBeyondNoise: absolute > noise,
+    },
+    budgets: {
+        absolute: { rule: 'Five seconds of scheduler work should cost less than 1ms of JS.' },
+        relative: { minWakeReduction: 60 },
+        noise: { rule: 'Median JS improvement must exceed the sum of both MADs.' },
+    },
+};
+
+const outputPath = join(dirname(fileURLToPath(import.meta.url)), 'benchmark.json');
+writeFileSync(outputPath, `${JSON.stringify(report, null, 2)}\n`);
+console.log(JSON.stringify(report.time, null, 2));
+console.log(JSON.stringify(report.wakes));
diff --git a/apps/web/performance/cluster-animation-scheduler-20260924/benchmark.json b/apps/web/performance/cluster-animation-scheduler-20260924/benchmark.json
new file mode 100644
index 0000000000..f2a301da07
--- /dev/null
+++ b/apps/web/performance/cluster-animation-scheduler-20260924/benchmark.json
@@ -0,0 +1,43 @@
+{
+  "generatedAt": "2026-09-24T10:20:42.691Z",
+  "model": "Wake rate falls from 60/s to 1000/intervalMs. At 5000ms that is 300 callbacks per 5s versus 1. Work per wake stays the category-index increment.",
+  "windowMs": 5000,
+  "intervalMs": 5000,
+  "frames": 300,
+  "clusterCount": 40,
+  "repetitions": 200,
+  "wakes": {
+    "frameLoop": 300,
+    "intervalLoop": 1,
+    "reduction": 300
+  },
+  "updates": {
+    "frameLoop": 0,
+    "intervalLoop": 1
+  },
+  "time": {
+    "frameLoop": {
+      "medianMs": 0.0032,
+      "madMs": 0.0002
+    },
+    "intervalLoop": {
+      "medianMs": 0.0018,
+      "madMs": 0.0002
+    },
+    "absoluteMedianDeltaMs": 0.0014,
+    "medianSpeedup": 1.778,
+    "noiseSumMadMs": 0.0004,
+    "improvesBeyondNoise": true
+  },
+  "budgets": {
+    "absolute": {
+      "rule": "Five seconds of scheduler work should cost less than 1ms of JS."
+    },
+    "relative": {
+      "minWakeReduction": 60
+    },
+    "noise": {
+      "rule": "Median JS improvement must exceed the sum of both MADs."
+    }
+  }
+}
diff --git a/apps/web/performance/cluster-badge-backdrop-20260924/benchmark.json b/apps/web/performance/cluster-badge-backdrop-20260924/benchmark.json
new file mode 100644
index 0000000000..4b4b7d0e00
--- /dev/null
+++ b/apps/web/performance/cluster-badge-backdrop-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T12:12:00.000Z",
+  "model": "Each cluster count badge sampled the moving map through backdrop-filter: blur(2px). The badge stays opaque at rgba(0,0,0,0.75). The filter is gone, so pan no longer resamples the tiles under the badge.",
+  "backdropLayersPerBadge": { "before": 1, "after": 0, "absolute": 1 },
+  "regionalCeilingSamplesPerSecondAt60fps": { "before": 1080, "after": 0, "absolute": 1080 },
+  "seoulDistrictCeilingSamplesPerSecondAt60fps": { "before": 1500, "after": 0, "absolute": 1500 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "60 frames times the badge count. Regional centers are 18 and Seoul districts are 25; empty regions are not drawn, so a live frame is at or under that ceiling. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/cluster-badge-shadow-20260924/benchmark.json b/apps/web/performance/cluster-badge-shadow-20260924/benchmark.json
new file mode 100644
index 0000000000..e5c22e651d
--- /dev/null
+++ b/apps/web/performance/cluster-badge-shadow-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:14:00.000Z",
+  "model": "Each cluster count badge painted a box-shadow on top of an already opaque background. The shadow is gone, so panning does not redraw it.",
+  "shadowPaintsPerBadgePerFrame": { "before": 1, "after": 0, "absolute": 1 },
+  "regionalCeilingShadowPaintsPerSecondAt60fps": { "before": 1080, "after": 0, "absolute": 1080 },
+  "noise": {
+    "madPaints": 0,
+    "rule": "1080 is 18 regional centers times 60 frames. Empty regions are not drawn, so a live frame is at or under that ceiling. Not a sampled paint trace."
+  }
+}
diff --git a/apps/web/performance/cluster-category-cache-20260924/benchmark-cluster-category-cache.mjs b/apps/web/performance/cluster-category-cache-20260924/benchmark-cluster-category-cache.mjs
new file mode 100644
index 0000000000..8384215ce4
--- /dev/null
+++ b/apps/web/performance/cluster-category-cache-20260924/benchmark-cluster-category-cache.mjs
@@ -0,0 +1,92 @@
+// 클러스터 카테고리: 리프 전체 순회와 인덱스 캐시 비교.
+// 실행: bun apps/web/performance/cluster-category-cache-20260924/benchmark-cluster-category-cache.mjs
+import { writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import {
+  createClusterIndex,
+  getClusterCategories,
+  restaurantsToGeoJSON,
+} from '../../lib/clustering.ts';
+
+function uncachedCategories(index, clusterId) {
+  const leaves = index.getLeaves(clusterId, Infinity);
+  const categoryCounts = new Map();
+  leaves.forEach((leaf) => {
+    const category = leaf.properties.category;
+    if (category) categoryCounts.set(category, (categoryCounts.get(category) || 0) + 1);
+  });
+  return Array.from(categoryCounts.entries())
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 3)
+    .map((entry) => entry[0]);
+}
+
+function median(values) {
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+}
+
+function mad(values, center) {
+  return median(values.map((value) => Math.abs(value - center)));
+}
+
+const env = await Bun.file('.env.local').text();
+const base = env.match(/^NEXT_PUBLIC_SUPABASE_URL=(.*)$/m)[1].trim();
+const key = env.match(/^NEXT_PUBLIC_SUPABASE_ANON_KEY=(.*)$/m)[1].trim();
+const response = await fetch(`${base}/rest/v1/restaurants?select=id,approved_name,lat,lng,categories&status=eq.approved&limit=2000`, {
+  headers: { apikey: key, Authorization: `Bearer ${key}` },
+});
+const rows = await response.json();
+const restaurants = rows.filter((row) => row.lat != null && row.lng != null).map((row) => ({
+  id: row.id,
+  name: row.approved_name,
+  lat: row.lat,
+  lng: row.lng,
+  categories: row.categories || ['기타'],
+}));
+const features = restaurantsToGeoJSON(restaurants);
+const index = createClusterIndex(null, { radius: 60, minPoints: 2 }, false);
+index.load(features);
+const clusters = index.getClusters([124, 33, 132, 39], 7).filter((feature) => feature.properties.cluster);
+const ids = clusters.map((feature) => feature.properties.cluster_id);
+
+function time(run) {
+  for (let warm = 0; warm < 3; warm += 1) run();
+  const samples = [];
+  for (let sample = 0; sample < 21; sample += 1) samples.push(run());
+  const center = median(samples);
+  return { medianMs: Number(center.toFixed(4)), madMs: Number(mad(samples, center).toFixed(4)) };
+}
+
+const cold = time(() => {
+  const started = performance.now();
+  ids.forEach((id) => uncachedCategories(index, id));
+  return performance.now() - started;
+});
+ids.forEach((id) => getClusterCategories(index, id));
+const warm = time(() => {
+  const started = performance.now();
+  ids.forEach((id) => getClusterCategories(index, id));
+  return performance.now() - started;
+});
+const absolute = cold.medianMs - warm.medianMs;
+const noise = cold.madMs + warm.madMs;
+const same = ids.every((id) => uncachedCategories(index, id).join() === getClusterCategories(index, id).join());
+const report = {
+  generatedAt: new Date().toISOString(),
+  model: 'Each visible cluster used to walk every leaf. Repeat calls on the same index are O(1) after the first count.',
+  restaurants: restaurants.length,
+  clustersAtZoom7: ids.length,
+  repetitions: 21,
+  cold,
+  warm,
+  absoluteMedianDeltaMs: Number(absolute.toFixed(4)),
+  medianSpeedup: Number((cold.medianMs / Math.max(warm.medianMs, 0.0001)).toFixed(3)),
+  noiseSumMadMs: Number(noise.toFixed(4)),
+  improvesBeyondNoise: absolute > noise,
+  equivalent: same,
+};
+writeFileSync(join(dirname(fileURLToPath(import.meta.url)), 'benchmark.json'), `${JSON.stringify(report, null, 2)}\n`);
+console.log(JSON.stringify({ clusters: ids.length, cold, warm, speedup: report.medianSpeedup, improvesBeyondNoise: report.improvesBeyondNoise, equivalent: same }));
diff --git a/apps/web/performance/cluster-category-cache-20260924/benchmark.json b/apps/web/performance/cluster-category-cache-20260924/benchmark.json
new file mode 100644
index 0000000000..8f0f45deb0
--- /dev/null
+++ b/apps/web/performance/cluster-category-cache-20260924/benchmark.json
@@ -0,0 +1,20 @@
+{
+  "generatedAt": "2026-09-24T10:39:33.767Z",
+  "model": "Each visible cluster used to walk every leaf. Repeat calls on the same index are O(1) after the first count.",
+  "restaurants": 763,
+  "clustersAtZoom7": 34,
+  "repetitions": 21,
+  "cold": {
+    "medianMs": 0.2577,
+    "madMs": 0.0175
+  },
+  "warm": {
+    "medianMs": 0.0057,
+    "madMs": 0.0004
+  },
+  "absoluteMedianDeltaMs": 0.252,
+  "medianSpeedup": 45.211,
+  "noiseSumMadMs": 0.0179,
+  "improvesBeyondNoise": true,
+  "equivalent": true
+}
diff --git a/apps/web/performance/cluster-category-join-20260924/benchmark.json b/apps/web/performance/cluster-category-join-20260924/benchmark.json
new file mode 100644
index 0000000000..38f29ce1be
--- /dev/null
+++ b/apps/web/performance/cluster-category-join-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:40:00.000Z",
+  "model": "Cluster marker HTML was already cached, but every render still joined the category names to build the cache key. The joined names are stored on the category array. A new array still joins once.",
+  "categoryJoinsPerRepeatIcon": { "before": 1, "after": 0, "absolute": 1 },
+  "example16RegionalClusters": { "before": 16, "after": 0, "absolute": 16 },
+  "noise": {
+    "madJoins": 0,
+    "rule": "16 is the regional cluster ceiling used earlier, not a live trace. The first render of a category array still joins. Latitude and longitude are not part of the HTML."
+  }
+}
diff --git a/apps/web/performance/cluster-category-rotation-stop-20260924/benchmark.json b/apps/web/performance/cluster-category-rotation-stop-20260924/benchmark.json
new file mode 100644
index 0000000000..a5d0a21214
--- /dev/null
+++ b/apps/web/performance/cluster-category-rotation-stop-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T12:44:00.000Z",
+  "model": "The desktop high tier rotated each cluster's category image every 5000ms. That periodic swap is what read as marker flicker. The tier now keeps the top category still, matching the medium and low tiers.",
+  "pictureUpdatesPerMinuteAt16RegionalClusters": { "before": 192, "after": 0, "absolute": 192 },
+  "noise": {
+    "madCount": 0,
+    "rule": "12 ticks per minute times 16 regional clusters. Empty regions are not drawn, so a live map is at or under 192. Not a sampled paint trace."
+  }
+}
diff --git a/apps/web/performance/cluster-fade-flicker-20260924/benchmark.json b/apps/web/performance/cluster-fade-flicker-20260924/benchmark.json
new file mode 100644
index 0000000000..3257bea806
--- /dev/null
+++ b/apps/web/performance/cluster-fade-flicker-20260924/benchmark.json
@@ -0,0 +1,12 @@
+{
+  "generatedAt": "2026-09-24T11:40:00.000Z",
+  "model": "Cluster icons ran cluster-fade on a 6000ms infinite loop. Opacity is 0 at both ends and below 1 for the first and last 15% of each cycle, so each icon disappears once per cycle.",
+  "cycleMs": 6000,
+  "transparentFraction": { "before": 0.3, "after": 0 },
+  "fullHidesPerMinute": { "before": 10, "after": 0, "absolute": 10, "relative": null },
+  "partiallyTransparentMsPerMinute": { "before": 18000, "after": 0, "absolute": 18000 },
+  "noise": {
+    "madCount": 0,
+    "rule": "The counts follow from the keyframe fractions and the 6000ms period. They are not a sampled browser paint."
+  }
+}
diff --git a/apps/web/performance/cluster-html-cache-20260924/benchmark.json b/apps/web/performance/cluster-html-cache-20260924/benchmark.json
new file mode 100644
index 0000000000..7c41e76a12
--- /dev/null
+++ b/apps/web/performance/cluster-html-cache-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:36:00.000Z",
+  "model": "Cluster marker HTML depends on the count, category list, and category index, not on the map position. A repeat render with the same triple now reuses the string. The cache holds 256 entries.",
+  "htmlBuildsPerUnchangedRegionalCluster": { "before": 1, "after": 0, "absolute": 1 },
+  "regionalCeilingHtmlBuildsPerRepeatRender": { "before": 18, "after": 0, "absolute": 18 },
+  "noise": {
+    "madBuilds": 0,
+    "rule": "18 is the regional center ceiling. Empty regions are not drawn. A count or category change still builds once. Not a sampled allocation trace."
+  }
+}
diff --git a/apps/web/performance/cluster-icon-dom-swap-20260924/benchmark.json b/apps/web/performance/cluster-icon-dom-swap-20260924/benchmark.json
new file mode 100644
index 0000000000..431e9616f0
--- /dev/null
+++ b/apps/web/performance/cluster-icon-dom-swap-20260924/benchmark.json
@@ -0,0 +1,12 @@
+{
+  "generatedAt": "2026-09-24T11:44:00.000Z",
+  "model": "The category rotation replaced the whole cluster marker DOM every 5000ms. The count badge and frame are unchanged across that rotation, so only the picture URL needs to change. Live regional clustering of the approved set has 16 clusters, and a full category cycle has 48 distinct icon frames and 0 identical neighbors.",
+  "intervalMs": 5000,
+  "regionalClusters": 16,
+  "fullMarkerReplacementsPerMinute": { "before": 192, "after": 0, "absolute": 192 },
+  "pictureUrlUpdatesPerMinute": { "before": 0, "after": 192 },
+  "noise": {
+    "madCount": 0,
+    "rule": "12 ticks per minute at the 5000ms desktop interval, times 16 regional clusters. Identical-neighbor check was one pass over the live category lists. Not a sampled browser paint."
+  }
+}
diff --git a/apps/web/performance/cluster-icon-png-assign-20260924/benchmark.json b/apps/web/performance/cluster-icon-png-assign-20260924/benchmark.json
new file mode 100644
index 0000000000..7344541d62
--- /dev/null
+++ b/apps/web/performance/cluster-icon-png-assign-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:08:00.000Z",
+  "model": "Category rotation updated both the WebP source and the PNG img src. Setting img.src starts a PNG load even when the picture element is showing the WebP, and that second bitmap can flash. The visible source srcset is now the only update.",
+  "pngSrcAssignmentsPerMinute": { "before": 192, "after": 0, "absolute": 192 },
+  "webpSrcsetUpdatesPerMinute": { "before": 192, "after": 192, "absolute": 0, "relative": 1 },
+  "noise": {
+    "madCount": 0,
+    "rule": "12 ticks per minute at 5000ms times 16 regional clusters. Not a sampled network trace; cached PNGs would still be assigned."
+  }
+}
diff --git a/apps/web/performance/cluster-icon-preload-20260924/benchmark.json b/apps/web/performance/cluster-icon-preload-20260924/benchmark.json
new file mode 100644
index 0000000000..36e6c431ad
--- /dev/null
+++ b/apps/web/performance/cluster-icon-preload-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T11:50:00.000Z",
+  "model": "Changing a cluster picture src immediately clears the current bitmap until the next file decodes. The next WebP is now loaded first, and the visible src changes only after that load event. At the 5000ms desktop interval, 16 regional clusters rotate 12 times a minute.",
+  "blankSrcSwapsPerMinute": { "before": 192, "after": 0, "absolute": 192 },
+  "pictureUrlUpdatesPerMinute": { "before": 192, "after": 192, "absolute": 0, "relative": 1 },
+  "noise": {
+    "madCount": 0,
+    "rule": "12 ticks per minute times 16 regional clusters from the live approved set. The blank interval itself was not timed in a browser."
+  }
+}
diff --git a/apps/web/performance/cluster-leaf-read-skip-20260924/benchmark.json b/apps/web/performance/cluster-leaf-read-skip-20260924/benchmark.json
new file mode 100644
index 0000000000..e54e6a0c30
--- /dev/null
+++ b/apps/web/performance/cluster-leaf-read-skip-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:12:00.000Z",
+  "model": "Every visible supercluster marker loaded all of its leaves on every render, only to see whether that cluster was already expanded. When nothing is expanded, that leaf read is skipped.",
+  "leafReadsPerVisibleClusterWhenNoneExpanded": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madReads": 0,
+    "rule": "Counts one visible cluster while the expanded set is empty. An expanded cluster still reads its leaves. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/cluster-plan-object-reuse-20260924/benchmark.json b/apps/web/performance/cluster-plan-object-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..36c1a778a6
--- /dev/null
+++ b/apps/web/performance/cluster-plan-object-reuse-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:48:00.000Z",
+  "model": "Each cluster render wrapped the cached visual in a new plan object. The plan is stored on that visual and reused when the latitude and longitude are unchanged.",
+  "planObjectsPerRepeatIcon": { "before": 1, "after": 0, "absolute": 1 },
+  "example16RegionalClusters": { "before": 16, "after": 0, "absolute": 16 },
+  "noise": {
+    "madObjects": 0,
+    "rule": "16 is the regional cluster ceiling used earlier, not a live trace. A moved cluster center still builds one plan."
+  }
+}
diff --git a/apps/web/performance/cluster-point-properties-20260924/benchmark.json b/apps/web/performance/cluster-point-properties-20260924/benchmark.json
new file mode 100644
index 0000000000..4973cae05e
--- /dev/null
+++ b/apps/web/performance/cluster-point-properties-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:28:00.000Z",
+  "model": "Each cluster point copied the restaurant name, the categories array, and the review count even though marker rendering only reads the id, one category, and the address. Those three copies are no longer stored in the cluster index.",
+  "unusedPropertyWritesPerRestaurant": { "before": 3, "after": 0, "absolute": 3 },
+  "categoriesArrayCopiesPerRestaurant": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madWrites": 0,
+    "rule": "A list of n restaurants drops 3n property writes and n categories arrays. The index is cached for the same array. Not a sampled allocation trace."
+  }
+}
diff --git a/apps/web/performance/cluster-register-skip-20260924/benchmark.json b/apps/web/performance/cluster-register-skip-20260924/benchmark.json
new file mode 100644
index 0000000000..c8ce1dd9bd
--- /dev/null
+++ b/apps/web/performance/cluster-register-skip-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:38:00.000Z",
+  "model": "Each rendered cluster icon registered itself for category rotation even though rotation is off. Those registrations are skipped while rotation is off. The icon stays on the first category.",
+  "indexRegistrationsPerClusterIcon": { "before": 1, "after": 0, "absolute": 1 },
+  "example16RegionalClusters": { "before": 16, "after": 0, "absolute": 16 },
+  "noise": {
+    "madRegistrations": 0,
+    "rule": "16 is the regional cluster ceiling used earlier, not a live trace. Supercluster markers had one extra id registration, also skipped. Turning rotation on registers again."
+  }
+}
diff --git a/apps/web/performance/cluster-still-icon-20260924/benchmark.json b/apps/web/performance/cluster-still-icon-20260924/benchmark.json
new file mode 100644
index 0000000000..86cdae466a
--- /dev/null
+++ b/apps/web/performance/cluster-still-icon-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:44:00.000Z",
+  "model": "With category rotation off, each cluster icon still hashed its key and asked for an animation index. It now builds the still icon directly at index 0.",
+  "keyHashesPerClusterIcon": { "before": 1, "after": 0, "absolute": 1 },
+  "example16RegionalClusters": { "before": 16, "after": 0, "absolute": 16 },
+  "noise": {
+    "madHashes": 0,
+    "rule": "16 is the regional cluster ceiling used earlier, not a live trace. Turning rotation on hashes again. The HTML cache is unchanged."
+  }
+}
diff --git a/apps/web/performance/cluster-visual-key-hash-20260924/benchmark.json b/apps/web/performance/cluster-visual-key-hash-20260924/benchmark.json
new file mode 100644
index 0000000000..94deb7679a
--- /dev/null
+++ b/apps/web/performance/cluster-visual-key-hash-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:42:00.000Z",
+  "model": "Each cluster render split a string key into characters to hash it. The hash is stored on the string. A numeric key was already returned as itself.",
+  "characterArraysPerRepeatStringKey": { "before": 1, "after": 0, "absolute": 1 },
+  "example16RegionalStringKeys": { "before": 16, "after": 0, "absolute": 16 },
+  "noise": {
+    "madArrays": 0,
+    "rule": "16 is the regional cluster ceiling used earlier, not a live trace. The first use of a string key still splits it. Numeric cluster ids do not split."
+  }
+}
diff --git a/apps/web/performance/cluster-visual-object-reuse-20260924/benchmark.json b/apps/web/performance/cluster-visual-object-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..8a60cf0228
--- /dev/null
+++ b/apps/web/performance/cluster-visual-object-reuse-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T15:46:00.000Z",
+  "model": "A repeat cluster icon rebuilt its visual object and a new 24,24 anchor even though the HTML had not changed. The visual is stored on the category array for that count and index.",
+  "visualObjectsPerRepeatIcon": { "before": 1, "after": 0, "absolute": 1 },
+  "anchorObjectsPerRepeatIcon": { "before": 1, "after": 0, "absolute": 1 },
+  "example16RegionalClusters": { "before": 32, "after": 0, "absolute": 32 },
+  "noise": {
+    "madObjects": 0,
+    "rule": "32 is 16 clusters times 2 objects. 16 is the regional ceiling used earlier, not a live trace. The render plan wrapper is still created. A new category array builds the visual once."
+  }
+}
diff --git a/apps/web/performance/compact-map-duplicate-name-20260924/benchmark.json b/apps/web/performance/compact-map-duplicate-name-20260924/benchmark.json
new file mode 100644
index 0000000000..dd4c135c7a
--- /dev/null
+++ b/apps/web/performance/compact-map-duplicate-name-20260924/benchmark.json
@@ -0,0 +1,7 @@
+{
+  "generatedAt": "2026-09-24T10:54:00.000Z",
+  "model": "PostgREST was returning the approved name twice, once as name and once as approved_name. Display code already reads name first. The compact map query now returns the alias only.",
+  "rows": 763,
+  "bytes": { "before": 371042, "after": 341736, "absolute": 29306, "relative": 1.086 },
+  "noise": { "madBytes": 0, "rule": "Payload byte counts are a single read of the live approved set. They are exact for that response, not a repeated-sample MAD." }
+}
diff --git a/apps/web/performance/compact-map-review-text-20260924/benchmark.json b/apps/web/performance/compact-map-review-text-20260924/benchmark.json
new file mode 100644
index 0000000000..d88c1fe19f
--- /dev/null
+++ b/apps/web/performance/compact-map-review-text-20260924/benchmark.json
@@ -0,0 +1,28 @@
+{
+  "generatedAt": "2026-09-24T10:40:00.000Z",
+  "model": "The home map compact query returns every approved restaurant before markers render. Visit badges use max(unique youtube links, unique review texts). On the live approved set, dropping the review text left all 25 badges intact (0 lost). The detail query still selects tzuyang_review.",
+  "rows": 763,
+  "mergedGroups": 735,
+  "visitBadges": {
+    "withReviewText": 25,
+    "withoutReviewText": 25,
+    "lost": 0
+  },
+  "payloadBytes": {
+    "before": 782122,
+    "after": 348603,
+    "absolute": 433519,
+    "relative": 2.244
+  },
+  "jsonParseMs": {
+    "repetitions": 21,
+    "beforeMedian": 2.6716,
+    "beforeMad": 0.1048,
+    "afterMedian": 1.5079,
+    "afterMad": 0.0872,
+    "absoluteMedianDelta": 1.1637,
+    "relative": 1.772,
+    "noiseSumMad": 0.192,
+    "improvesBeyondNoise": true
+  }
+}
diff --git a/apps/web/performance/compact-map-unused-columns-20260924/benchmark.json b/apps/web/performance/compact-map-unused-columns-20260924/benchmark.json
new file mode 100644
index 0000000000..7e5e3118d7
--- /dev/null
+++ b/apps/web/performance/compact-map-unused-columns-20260924/benchmark.json
@@ -0,0 +1,7 @@
+{
+  "generatedAt": "2026-09-24T10:56:00.000Z",
+  "model": "The compact map query already filters status=approved, and cluster layout does not read created_at. Those two columns were still copied into every row. Detail hydration still loads the full row.",
+  "rows": 763,
+  "bytes": { "before": 341736, "after": 293608, "absolute": 48128, "relative": 1.164 },
+  "noise": { "madBytes": 0, "rule": "Payload byte counts are one read of the live approved set." }
+}
diff --git a/apps/web/performance/contextual-id-signature-20260924/benchmark.json b/apps/web/performance/contextual-id-signature-20260924/benchmark.json
new file mode 100644
index 0000000000..507e23a5de
--- /dev/null
+++ b/apps/web/performance/contextual-id-signature-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:14:00.000Z",
+  "model": "The contextual restaurant signature joined visible ids on every update. It now uses the same stored id string as the swipe list. A new restaurant list still joins once.",
+  "idJoinsPerRepeatList": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madJoins": 0,
+    "rule": "The mode, zoom, and eligibility fields are still concatenated. Only the id join is skipped on a repeat of the same list. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/coordinate-pass-reuse-20260924/benchmark.json b/apps/web/performance/coordinate-pass-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..7491d58e97
--- /dev/null
+++ b/apps/web/performance/coordinate-pass-reuse-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:16:00.000Z",
+  "model": "Individual marker mode normalized the visible restaurant coordinates twice in one render. The second pass now uses the list already built for the contextual payload.",
+  "coordinatePassesPerIndividualRender": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "noise": {
+    "madPasses": 0,
+    "rule": "Counts one individual-marker render. Cluster mode does not run the second pass. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/daily-recommendation-fade-20260924/benchmark.json b/apps/web/performance/daily-recommendation-fade-20260924/benchmark.json
new file mode 100644
index 0000000000..dde69331b5
--- /dev/null
+++ b/apps/web/performance/daily-recommendation-fade-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:02:00.000Z",
+  "model": "The daily recommendation popup faded its full-screen scrim for 300ms. On small screens the card started transparent and faded for 500ms. On desktop it slid in for 500ms. The scrim and card now appear in one frame.",
+  "scrimFramesAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "cardFramesAt60fps": { "before": 30, "after": 1, "absolute": 29, "relative": 30 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). 30 is round(500ms * 60fps / 1000). Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/daily-thumbnail-hover-filter-20260924/benchmark.json b/apps/web/performance/daily-thumbnail-hover-filter-20260924/benchmark.json
new file mode 100644
index 0000000000..c88ed32c00
--- /dev/null
+++ b/apps/web/performance/daily-thumbnail-hover-filter-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:14:00.000Z",
+  "model": "The daily recommendation thumbnail brightened through a filter transition on hover. The hover filter is gone, so the image does not animate brightness.",
+  "hoverFilterFrames": { "before": 9, "after": 0, "absolute": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000), the default transition duration for transition-all. It runs only while the pointer is over the thumbnail. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/debug-log-sanitizer-split-20260924/benchmark.json b/apps/web/performance/debug-log-sanitizer-split-20260924/benchmark.json
new file mode 100644
index 0000000000..ce9491d80f
--- /dev/null
+++ b/apps/web/performance/debug-log-sanitizer-split-20260924/benchmark.json
@@ -0,0 +1,30 @@
+{
+  "generatedAt": "2026-09-24T11:18:00.000Z",
+  "model": "Development debug logs only keep an allowlisted reason code. They no longer import the full privacy sanitizer, which walked every nested value before discarding it.",
+  "chunks": {
+    "desktopPanel": {
+      "file": "_app-pages-browser_components_home_home-desktop-control-panel_tsx.js",
+      "before": 3442866,
+      "after": 3317479,
+      "absolute": 125387,
+      "relative": 1.038
+    },
+    "map": {
+      "file": "_app-pages-browser_components_map_NaverMapView_tsx.js",
+      "before": 2340462,
+      "after": 2215089,
+      "absolute": 125373,
+      "relative": 1.057
+    }
+  },
+  "bytes": {
+    "before": 5783328,
+    "after": 5532568,
+    "absolute": 250760,
+    "relative": 1.045
+  },
+  "noise": {
+    "madBytes": 0,
+    "rule": "One rebuild of each dev chunk. No repeated samples, so the median absolute deviation is not estimated."
+  }
+}
diff --git a/apps/web/performance/desktop-map-backdrop-20260924/benchmark.json b/apps/web/performance/desktop-map-backdrop-20260924/benchmark.json
new file mode 100644
index 0000000000..5698c23a0b
--- /dev/null
+++ b/apps/web/performance/desktop-map-backdrop-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:00:00.000Z",
+  "model": "Desktop map controls used a 95% opaque background plus backdrop-filter. While the map pans at 60fps, each backdrop layer resamples the map. Those six controls no longer create a backdrop layer.",
+  "backdropLayers": { "before": 6, "after": 0, "absolute": 6 },
+  "samplesPerSecondAt60fps": { "before": 360, "after": 0, "absolute": 360 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "360 is 6 layers times 60 frames. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/desktop-map-menu-split-20260924/benchmark.json b/apps/web/performance/desktop-map-menu-split-20260924/benchmark.json
new file mode 100644
index 0000000000..2cac21746c
--- /dev/null
+++ b/apps/web/performance/desktop-map-menu-split-20260924/benchmark.json
@@ -0,0 +1,15 @@
+{
+  "generatedAt": "2026-09-24T11:20:00.000Z",
+  "model": "The desktop map menu is not needed to draw the map or the restaurant list. Its menu library now loads as a separate chunk, while the menu button stays in the first paint.",
+  "chunk": "_app-pages-browser_components_home_home-desktop-control-panel_tsx.js",
+  "bytes": {
+    "before": 3317479,
+    "after": 2990795,
+    "absolute": 326684,
+    "relative": 1.109
+  },
+  "noise": {
+    "madBytes": 0,
+    "rule": "One rebuild of the dev chunk. No repeated samples, so the median absolute deviation is not estimated."
+  }
+}
diff --git a/apps/web/performance/desktop-panel-blur-20260924/benchmark.json b/apps/web/performance/desktop-panel-blur-20260924/benchmark.json
new file mode 100644
index 0000000000..392e5398e5
--- /dev/null
+++ b/apps/web/performance/desktop-panel-blur-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:28:00.000Z",
+  "model": "The desktop submission, review, and edit panels blurred the map behind a panel that is already 95% opaque. One of those panels is open at a time. The blur is gone. The drag transform layer remains.",
+  "backdropSamplesPerSecondAt60fpsWhileOpen": { "before": 60, "after": 0, "absolute": 60 },
+  "panels": 4,
+  "noise": {
+    "madSamples": 0,
+    "rule": "60 is one backdrop layer times 60 frames. The four panels are not open together. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/desktop-panel-detail-split-20260924/benchmark.json b/apps/web/performance/desktop-panel-detail-split-20260924/benchmark.json
new file mode 100644
index 0000000000..c6c47d41ba
--- /dev/null
+++ b/apps/web/performance/desktop-panel-detail-split-20260924/benchmark.json
@@ -0,0 +1,22 @@
+{
+  "generatedAt": "2026-09-24T11:08:00.000Z",
+  "model": "The desktop home panel statically imported the restaurant detail module, so the first home script included it before any restaurant was opened. The panel now loads that module on open. Bytes are the unminified dev webpack chunk.",
+  "chunk": "_app-pages-browser_components_home_home-desktop-control-panel_tsx.js",
+  "bytes": {
+    "before": 10285442,
+    "after": 6117687,
+    "absolute": 4167755,
+    "relative": 1.681
+  },
+  "browserTransfer": {
+    "before": 2313470,
+    "after": 1441921,
+    "absolute": 871549,
+    "relative": 1.604,
+    "note": "The before transfer is the previous home load of the same chunk. The after transfer is this load, and the detail chunk was not requested."
+  },
+  "noise": {
+    "madBytes": 0,
+    "rule": "One rebuild of the dev chunk. No repeated samples, so the median absolute deviation is not estimated."
+  }
+}
diff --git a/apps/web/performance/desktop-panel-rest-list-20260924/benchmark.json b/apps/web/performance/desktop-panel-rest-list-20260924/benchmark.json
new file mode 100644
index 0000000000..dd96dc692b
--- /dev/null
+++ b/apps/web/performance/desktop-panel-rest-list-20260924/benchmark.json
@@ -0,0 +1,15 @@
+{
+  "generatedAt": "2026-09-24T11:15:00.000Z",
+  "model": "The desktop home panel imported the Supabase browser client to read the public popular and latest lists. Those reads now use the REST client, so auth, storage, and realtime code leave the first home chunk.",
+  "chunk": "_app-pages-browser_components_home_home-desktop-control-panel_tsx.js",
+  "bytes": {
+    "before": 6117687,
+    "after": 3441506,
+    "absolute": 2676181,
+    "relative": 1.777
+  },
+  "noise": {
+    "madBytes": 0,
+    "rule": "One rebuild of the dev chunk. No repeated samples, so the median absolute deviation is not estimated."
+  }
+}
diff --git a/apps/web/performance/desktop-panel-slide-20260924/benchmark.json b/apps/web/performance/desktop-panel-slide-20260924/benchmark.json
new file mode 100644
index 0000000000..e78f090903
--- /dev/null
+++ b/apps/web/performance/desktop-panel-slide-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:18:00.000Z",
+  "model": "The desktop list panel and the desktop detail panel each slid for 300ms. A sliding opaque panel still composites over the map for that whole interval. Both now change position in one frame.",
+  "framesPerPanelToggleAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000) for one panel. The two panels are separate toggles, not one combined animation. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/desktop-panel-will-change-20260924/benchmark.json b/apps/web/performance/desktop-panel-will-change-20260924/benchmark.json
new file mode 100644
index 0000000000..1c05f70628
--- /dev/null
+++ b/apps/web/performance/desktop-panel-will-change-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:32:00.000Z",
+  "model": "The desktop submission, review, and edit panels kept will-change: transform for the whole time they were open, not only while dragging. The transform still updates during a drag. The permanent hint is gone.",
+  "permanentTransformLayersWhileOpen": { "before": 1, "after": 0, "absolute": 1 },
+  "panels": 4,
+  "noise": {
+    "madLayers": 0,
+    "rule": "One panel is open at a time. A drag can still promote a layer while the transform is changing. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/detail-panel-width-snap-20260924/benchmark.json b/apps/web/performance/detail-panel-width-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..dbc6935db9
--- /dev/null
+++ b/apps/web/performance/detail-panel-width-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T12:12:00.000Z",
+  "model": "The in-map detail shell animated its width from 0 to min(400px, 100vw-1rem) for 300ms beside a flex-1 map. Each interpolated width is a map layout. The width now changes in one frame. The home desktop detail panel already slides with transform and is outside this path.",
+  "mapLayoutFramesPerToggle": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). Not a tile-request sample."
+  }
+}
diff --git a/apps/web/performance/detail-play-carousel-snap-20260924/benchmark.json b/apps/web/performance/detail-play-carousel-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..6bdae6d837
--- /dev/null
+++ b/apps/web/performance/detail-play-carousel-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:16:00.000Z",
+  "model": "The restaurant detail play button faded to red for 200ms, and carousel arrows faded in for 200ms. Both now change in one frame.",
+  "playButtonColorFrames": { "before": 12, "after": 1, "absolute": 11, "relative": 12 },
+  "carouselArrowFadeFrames": { "before": 12, "after": 1, "absolute": 11, "relative": 12 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "12 is round(200ms * 60 / 1000). One play button and one pair of arrows are visible at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/detail-review-lookup-gate-20260924/benchmark.json b/apps/web/performance/detail-review-lookup-gate-20260924/benchmark.json
new file mode 100644
index 0000000000..e25c0da190
--- /dev/null
+++ b/apps/web/performance/detail-review-lookup-gate-20260924/benchmark.json
@@ -0,0 +1,19 @@
+{
+  "generatedAt": "2026-09-24T10:42:00.000Z",
+  "model": "After the map list stopped carrying tzuyang_review, every detail open treated the review as missing and started a sibling lookup. The lookup now waits until the detail row actually contains the tzuyang_review field and that field is still short. Approved rows with a stored review: 741 of 763.",
+  "siblingLookupMs": {
+    "method": "youtube_link ilike video id",
+    "repetitions": 11,
+    "median": 88.2,
+    "mad": 2.9,
+    "equalityMedian": 101.9,
+    "equalityMad": 5.7
+  },
+  "commonPath": {
+    "beforeRequests": 1,
+    "afterRequests": 0,
+    "avoidedMedianMs": 88.2,
+    "noiseMadMs": 2.9,
+    "improvesBeyondNoise": true
+  }
+}
diff --git a/apps/web/performance/dialog-enter-snap-20260924/benchmark.json b/apps/web/performance/dialog-enter-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..2abd9437ad
--- /dev/null
+++ b/apps/web/performance/dialog-enter-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:50:00.000Z",
+  "model": "Dialog and alert dialog overlays faded while the panel scaled from 0.95 and slid into place. animate-in is 150ms in the app stylesheets. Those enter and exit animations are gone. The panel still sits at the center.",
+  "overlayFramesPerToggle": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "panelFramesPerToggle": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). The duration-200 class sets transition time and does not override animation-duration here, because tailwindcss-animate is not installed. Open and close each pay the same 9 frames. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/extended-bounds-reuse-20260924/benchmark.json b/apps/web/performance/extended-bounds-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..7079786421
--- /dev/null
+++ b/apps/web/performance/extended-bounds-reuse-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:52:00.000Z",
+  "model": "Every marker effect allocated a new extended-bounds object, including renders that return immediately. The map now writes south, north, west, and east into one reused object.",
+  "boundsObjectsPerMarkerEffect": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madObjects": 0,
+    "rule": "The map still reads getBounds, getSW, and getNE. Callers that want a fresh object still allocate one. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/global-map-blur-20260924/benchmark.json b/apps/web/performance/global-map-blur-20260924/benchmark.json
new file mode 100644
index 0000000000..2c0357eacc
--- /dev/null
+++ b/apps/web/performance/global-map-blur-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:40:00.000Z",
+  "model": "The global map toolbar, a corner button, and the side list blurred the moving map behind backgrounds that are already 95% opaque. The blur is gone.",
+  "backdropLayers": { "before": 3, "after": 0, "absolute": 3 },
+  "samplesPerSecondAt60fpsWhilePanning": { "before": 180, "after": 0, "absolute": 180 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "180 is 3 layers times 60 frames. The corner button and side list are not always mounted, so a live frame can be lower. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/google-map-selection-center-20260924/benchmark.json b/apps/web/performance/google-map-selection-center-20260924/benchmark.json
new file mode 100644
index 0000000000..2711dd34fb
--- /dev/null
+++ b/apps/web/performance/google-map-selection-center-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:56:00.000Z",
+  "model": "Selecting a restaurant on the Google map called panTo, which animates the camera. The same center is now applied with setCenter, so the tiles are not resampled across the animation.",
+  "animatedSelectionPans": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madPans": 0,
+    "rule": "Counts one selection. The Maps API does not expose a fixed pan duration here, so this is not converted into frames. Not a sampled tile trace."
+  }
+}
diff --git a/apps/web/performance/google-marker-bounce-20260924/benchmark.json b/apps/web/performance/google-marker-bounce-20260924/benchmark.json
new file mode 100644
index 0000000000..a009064023
--- /dev/null
+++ b/apps/web/performance/google-marker-bounce-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:24:00.000Z",
+  "model": "Google map markers used transition-all for 300ms and an infinite bounce while selected. The selected size remains. Hover scale changes in one frame, and the bounce does not run.",
+  "bounceFramesPerSecondWhileSelectedAt60fps": { "before": 60, "after": 0, "absolute": 60 },
+  "transitionAllFramesPerInteractionAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "60 is the infinite bounce sampled for one second. 18 is round(300ms * 60fps / 1000). Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/header-color-snap-20260924/benchmark.json b/apps/web/performance/header-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..c9608fef74
--- /dev/null
+++ b/apps/web/performance/header-color-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T17:00:00.000Z",
+  "model": "Header buttons and the restaurant name faded their colors for the default 150ms. The color now changes in one frame. Seven controls had the transition.",
+  "colorFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One control is hovered at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/header-offset-snap-20260924/benchmark.json b/apps/web/performance/header-offset-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..788ff02b53
--- /dev/null
+++ b/apps/web/performance/header-offset-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:24:00.000Z",
+  "model": "Dragging the home sheet between half and full height wrote a fractional header offset on every frame. That offset is the main column's top margin, so each write laid out the map. The offset now stays 0 until the sheet is fully open, then becomes the full header height once.",
+  "marginWritesPerInBetweenFrame": { "before": 1, "after": 0, "absolute": 1 },
+  "exampleWritesDuring300msDrag": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madWrites": 0,
+    "rule": "18 is round(300ms * 60 / 1000). The final 1 is the write when progress reaches 1. A drag that never reaches full height writes 0. Not a sampled layout trace."
+  }
+}
diff --git a/apps/web/performance/header-texture-fade-20260924/benchmark.json b/apps/web/performance/header-texture-fade-20260924/benchmark.json
new file mode 100644
index 0000000000..c01b84adc7
--- /dev/null
+++ b/apps/web/performance/header-texture-fade-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:54:00.000Z",
+  "model": "The header paper texture faded for the default 150ms when the theme changed. The texture still covers the header at 30% opacity in light mode and is hidden in dark mode. The fade is gone.",
+  "themeToggleFrames": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000), the default opacity transition. It runs only when the theme changes. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/header-transition-snap-20260924/benchmark.json b/apps/web/performance/header-transition-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..44d7969136
--- /dev/null
+++ b/apps/web/performance/header-transition-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:10:00.000Z",
+  "model": "The header interpolated opacity and transform for 300ms, so it lagged the mobile sheet variable. The banner frame and the side controls also transitioned every property for 300ms. They now follow the current value in one frame.",
+  "headerSettleFramesAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "bannerRotationFramesAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). The banner still rotates every 5s; only the transition is gone. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/home-banner-popup-fade-20260924/benchmark.json b/apps/web/performance/home-banner-popup-fade-20260924/benchmark.json
new file mode 100644
index 0000000000..fed82867ed
--- /dev/null
+++ b/apps/web/performance/home-banner-popup-fade-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:08:00.000Z",
+  "model": "The home banner popup faded its full-screen scrim and zoomed the card in for 300ms. Both now appear in one frame. Banner slides inside the card still move.",
+  "scrimFramesAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "cardFramesAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). The scrim and card start together. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/home-bottom-nav-snap-20260924/benchmark.json b/apps/web/performance/home-bottom-nav-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..80d0b80ca7
--- /dev/null
+++ b/apps/web/performance/home-bottom-nav-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:16:00.000Z",
+  "model": "The home mobile bottom nav slid for 300ms and kept a permanent transform layer. The hide still follows the sheet offset, in one frame, without a reserved layer. The unused margin transition on the map column is gone.",
+  "hideFrames": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "permanentTransformLayers": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60 / 1000). The nav is hidden below 1600px. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/home-client-blur-20260924/benchmark.json b/apps/web/performance/home-client-blur-20260924/benchmark.json
new file mode 100644
index 0000000000..1fb64303ea
--- /dev/null
+++ b/apps/web/performance/home-client-blur-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:38:00.000Z",
+  "model": "Two home map buttons and the small status pill blurred the moving map behind backgrounds that are already 90–95% opaque. The blur is gone.",
+  "backdropLayersOverMap": { "before": 3, "after": 0, "absolute": 3 },
+  "samplesPerSecondAt60fpsWhilePanning": { "before": 180, "after": 0, "absolute": 180 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "180 is 3 layers times 60 frames. The status pill is not always mounted. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/home-map-control-color-snap-20260924/benchmark.json b/apps/web/performance/home-map-control-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..237136be40
--- /dev/null
+++ b/apps/web/performance/home-map-control-color-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T17:20:00.000Z",
+  "model": "Home map controls on the desktop panel, the mobile overlay, the panel edge handle, and the left map home rows faded their colors for the default 150ms. The color now changes in one frame.",
+  "colorFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "controls": 12,
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One control is hovered at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/home-skeleton-phase-20260924/benchmark.json b/apps/web/performance/home-skeleton-phase-20260924/benchmark.json
new file mode 100644
index 0000000000..f28d1cab85
--- /dev/null
+++ b/apps/web/performance/home-skeleton-phase-20260924/benchmark.json
@@ -0,0 +1,16 @@
+{
+  "generatedAt": "2026-09-24T11:52:00.000Z",
+  "model": "The home static skeleton used to hide as soon as the control panel mounted. The popular and latest lists then painted their own skeletons. The static skeleton now stays until both of those first queries have settled, so the second skeleton is covered.",
+  "skeletonPhases": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "warmLoad": {
+    "homeChromeReady": true,
+    "homePanelReady": true,
+    "staticSkeletonDisplay": "none",
+    "sampledGapMs": null,
+    "rule": "This navigation reused cached list queries, so the two flags were already true together and no cold gap was sampled."
+  },
+  "noise": {
+    "madPhases": 0,
+    "rule": "Phase count is the authored sequence, not a distribution of cold loads."
+  }
+}
diff --git a/apps/web/performance/hover-opacity-snap-20260924/benchmark.json b/apps/web/performance/hover-opacity-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..782845e563
--- /dev/null
+++ b/apps/web/performance/hover-opacity-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:54:00.000Z",
+  "model": "The mypage avatar scrim, its remove button, the detail copy icon, and the daily recommendation link faded opacity for the default 150ms. Each now changes in one frame.",
+  "opacityFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One control is hovered at a time. The avatar scrim and remove button can appear together, which was 18 frames before. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/image-filter-hover-20260924/benchmark.json b/apps/web/performance/image-filter-hover-20260924/benchmark.json
new file mode 100644
index 0000000000..b46d3ef2ac
--- /dev/null
+++ b/apps/web/performance/image-filter-hover-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T12:22:00.000Z",
+  "model": "Hovering a stamp thumbnail applied brightness(), which is a CSS filter, for 300ms. The detail play button also blurred the hero image under it. Hover no longer filters the thumbnail, and the play button no longer blurs the hero.",
+  "stampHoverFilterFrames": { "before": 18, "after": 0, "absolute": 18 },
+  "detailPlayBackdropLayers": { "before": 2, "after": 0, "absolute": 2 },
+  "detailPlayBackdropSamplesPerSecondAt60fps": { "before": 120, "after": 0, "absolute": 120 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000) for one thumbnail. 120 is two play buttons times 60 frames, counted only while the hero image under them is changing. Not a sampled compositor trace. A visited stamp still uses grayscale."
+  }
+}
diff --git a/apps/web/performance/individual-marker-visual-identity-20260924/benchmark.json b/apps/web/performance/individual-marker-visual-identity-20260924/benchmark.json
new file mode 100644
index 0000000000..267fec5dde
--- /dev/null
+++ b/apps/web/performance/individual-marker-visual-identity-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T15:54:00.000Z",
+  "model": "Each individual marker render built an 11-part cache key string even when the restaurant object was unchanged. The visual is now stored on that object. A changed category, review, or link still rebuilds it.",
+  "keyStringsPerUnchangedMarker": { "before": 1, "after": 0, "absolute": 1 },
+  "keyArraysPerUnchangedMarker": { "before": 1, "after": 0, "absolute": 1 },
+  "example80VisibleMarkers": { "before": 160, "after": 0, "absolute": 160 },
+  "noise": {
+    "madStrings": 0,
+    "rule": "160 is 80 markers times 2 allocations. 80 is an example, not a live Seoul count. Overlay markers still use the string key. Field comparisons still run."
+  }
+}
diff --git a/apps/web/performance/list-card-direction-sheet-20260924/benchmark.json b/apps/web/performance/list-card-direction-sheet-20260924/benchmark.json
new file mode 100644
index 0000000000..60f1ca9704
--- /dev/null
+++ b/apps/web/performance/list-card-direction-sheet-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:24:00.000Z",
+  "model": "List stamp cards interpolated box-shadow on hover for 200ms. The direction chooser in the restaurant detail slid in for 200ms. The shadow and the slide now change in one frame. Background and border color on the list card still transition.",
+  "listCardShadowFramesPerHoverAt60fps": { "before": 12, "after": 0, "absolute": 12 },
+  "directionSheetFramesAt60fps": { "before": 12, "after": 1, "absolute": 11, "relative": 12 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "12 is round(200ms * 60fps / 1000). Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/logo-resize-20260924/benchmark.json b/apps/web/performance/logo-resize-20260924/benchmark.json
new file mode 100644
index 0000000000..0f7a94f496
--- /dev/null
+++ b/apps/web/performance/logo-resize-20260924/benchmark.json
@@ -0,0 +1,7 @@
+{
+  "generatedAt": "2026-09-24T10:44:00.000Z",
+  "model": "The logo is drawn at 24px, 26px, 28px, 32px, or 40px. 40*3 = 120 device pixels, so a 128px source covers the largest slot. The old file was 512px, which is (512/128)^2 = 16 times as many pixels.",
+  "pixels": { "before": 262144, "after": 16384, "ratio": 16 },
+  "bytes": { "before": 56644, "after": 5578, "absolute": 51066, "relative": 10.155 },
+  "noise": { "madBytes": 0, "rule": "File size is deterministic. The source test still requires the file to stay under 80KB." }
+}
diff --git a/apps/web/performance/main-margin-snap-20260924/benchmark.json b/apps/web/performance/main-margin-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..da26fd65a9
--- /dev/null
+++ b/apps/web/performance/main-margin-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:18:00.000Z",
+  "model": "The shared layout animated the main column's top margin for 300ms while the mobile sheet offset changed. The margin still follows the sheet, in one frame.",
+  "marginFramesPerOffsetChange": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60 / 1000). During a drag the offset changes every frame, so the old transition kept restarting. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/map-chrome-backdrop-20260924/benchmark.json b/apps/web/performance/map-chrome-backdrop-20260924/benchmark.json
new file mode 100644
index 0000000000..984872d066
--- /dev/null
+++ b/apps/web/performance/map-chrome-backdrop-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:02:00.000Z",
+  "model": "The map user menu and mobile map controls kept a 95% opaque fill plus backdrop-filter. During a 60fps pan each of those layers resampled the map. The filter is removed from 4 menu buttons and 10 mobile controls.",
+  "backdropLayers": { "before": 14, "after": 0, "absolute": 14 },
+  "samplesPerSecondAt60fps": { "before": 840, "after": 0, "absolute": 840 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "840 is 14 layers times 60 frames. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/map-chunk-public-url-20260924/benchmark.json b/apps/web/performance/map-chunk-public-url-20260924/benchmark.json
new file mode 100644
index 0000000000..08b5eb6b18
--- /dev/null
+++ b/apps/web/performance/map-chunk-public-url-20260924/benchmark.json
@@ -0,0 +1,22 @@
+{
+  "generatedAt": "2026-09-24T11:12:00.000Z",
+  "model": "The map chunk imported the Supabase browser client only to build a public review-photo URL. That client pulls auth, WebAuthn, realtime, and PostgREST. The URL is now composed from the configured origin and the public object path.",
+  "chunk": "_app-pages-browser_components_map_NaverMapView_tsx.js",
+  "bytes": {
+    "before": 5063182,
+    "after": 2337918,
+    "absolute": 2725264,
+    "relative": 2.166
+  },
+  "browserTransfer": {
+    "before": 1214484,
+    "after": 586883,
+    "absolute": 627601,
+    "relative": 2.069,
+    "note": "Decoded sizes match the chunk files. The before transfer is the previous home load of this chunk."
+  },
+  "noise": {
+    "madBytes": 0,
+    "rule": "One rebuild of the dev chunk. No repeated samples, so the median absolute deviation is not estimated."
+  }
+}
diff --git a/apps/web/performance/map-control-color-snap-20260924/benchmark.json b/apps/web/performance/map-control-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..d91dd29cb4
--- /dev/null
+++ b/apps/web/performance/map-control-color-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:14:00.000Z",
+  "model": "Map controls and the submit button faded their colors for 150ms. The color now changes in one frame. Seven controls had the same transition.",
+  "colorFramesPerControlChange": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One control changes at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/map-count-badge-fade-20260924/benchmark.json b/apps/web/performance/map-count-badge-fade-20260924/benchmark.json
new file mode 100644
index 0000000000..35fd7adf8c
--- /dev/null
+++ b/apps/web/performance/map-count-badge-fade-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:54:00.000Z",
+  "model": "The Google map restaurant-count badge faded and zoomed in for 300ms. It now appears in one frame.",
+  "badgeFramesAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/map-detail-skeleton-pulse-20260924/benchmark.json b/apps/web/performance/map-detail-skeleton-pulse-20260924/benchmark.json
new file mode 100644
index 0000000000..52b1ef6367
--- /dev/null
+++ b/apps/web/performance/map-detail-skeleton-pulse-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T17:30:00.000Z",
+  "model": "The map detail skeleton pulsed four bars for as long as the panel was loading. Those bars now stay still.",
+  "opacityFramesPerSecond": { "before": 240, "after": 0, "absolute": 240, "relative": null },
+  "animatedBars": { "before": 4, "after": 0, "absolute": 4, "relative": null },
+  "noise": {
+    "madFrames": 0,
+    "rule": "240 is 4 bars times 60 frames per second while one detail skeleton is visible. The pulse keyframe is a 2s opacity loop. Not a sampled compositor trace. Relative is unbounded because the after count is zero."
+  }
+}
diff --git a/apps/web/performance/map-list-publish-skip-20260924/benchmark.json b/apps/web/performance/map-list-publish-skip-20260924/benchmark.json
new file mode 100644
index 0000000000..4cc72531c5
--- /dev/null
+++ b/apps/web/performance/map-list-publish-skip-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:08:00.000Z",
+  "model": "A marker render at the same zoom republished the swipe list and the contextual list even when both lists were the same objects. Those callbacks are skipped. An ineligible contextual list reuses one empty array instead of a new one.",
+  "listPublishesPerUnchangedRender": { "before": 2, "after": 0, "absolute": 2 },
+  "emptyContextualArraysPerIneligibleRender": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madPublishes": 0,
+    "rule": "A changed list, zoom, mode, or eligibility still publishes once. The parent still dedupes the first publish. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/map-mode-button-transition-20260924/benchmark.json b/apps/web/performance/map-mode-button-transition-20260924/benchmark.json
new file mode 100644
index 0000000000..7475bb83bf
--- /dev/null
+++ b/apps/web/performance/map-mode-button-transition-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:18:00.000Z",
+  "model": "The domestic and overseas map buttons transitioned every property, including the shadow, for the default 150ms. Only colors transition now.",
+  "nonColorFramesPerModeSwitchAt60fps": { "before": 18, "after": 0, "absolute": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60fps / 1000) for one button. Both buttons change on a mode switch, so the before count is 18. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/map-mode-color-snap-20260924/benchmark.json b/apps/web/performance/map-mode-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..7b507262ad
--- /dev/null
+++ b/apps/web/performance/map-mode-color-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T17:04:00.000Z",
+  "model": "The domestic and overseas map switch, the popup footer buttons, the detail edge handle, and the address row faded their colors for the default 150ms. The color now changes in one frame.",
+  "colorFramesPerChange": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One control changes at a time. The map switch updates two buttons, which was 18 frames before. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/map-mode-filter-identity-20260924/benchmark.json b/apps/web/performance/map-mode-filter-identity-20260924/benchmark.json
new file mode 100644
index 0000000000..646ee98465
--- /dev/null
+++ b/apps/web/performance/map-mode-filter-identity-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:10:00.000Z",
+  "model": "The home map mode filter copied the restaurant list even when every row already belonged to the active mode. That list is now returned as-is. A dropped row still builds one new list.",
+  "resultArraysWhenEveryRowMatches": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madArrays": 0,
+    "rule": "The matching scan still visits every row. A mixed domestic and overseas list still allocates one result. Not a sampled heap trace."
+  }
+}
diff --git a/apps/web/performance/map-mode-filter-rescan-20260924/benchmark.json b/apps/web/performance/map-mode-filter-rescan-20260924/benchmark.json
new file mode 100644
index 0000000000..a2b0a4a895
--- /dev/null
+++ b/apps/web/performance/map-mode-filter-rescan-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:12:00.000Z",
+  "model": "A repeat pan of an unchanged list skips the mode classification. It still compares each restaurant's cached address fields so an in-place edit is picked up. A changed field rebuilds the list.",
+  "modeClassificationsPerUnchangedRepeat": { "before": "n", "after": 0, "absolute": "n" },
+  "noise": {
+    "madExaminations": 0,
+    "rule": "n is the list length. A repeat still compares cached address fields once per row. The first call and any changed field still classify every row. A selected overseas country does not use this list cache. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/map-overlay-fade-in-20260924/benchmark.json b/apps/web/performance/map-overlay-fade-in-20260924/benchmark.json
new file mode 100644
index 0000000000..2fad8087fd
--- /dev/null
+++ b/apps/web/performance/map-overlay-fade-in-20260924/benchmark.json
@@ -0,0 +1,15 @@
+{
+  "generatedAt": "2026-09-24T11:42:00.000Z",
+  "model": "mapOverlayFade started at opacity 0 and reached 1 only after 15% of the duration. Each time a notice mounted, that opening stretch was a fade-in flash before the intended fade-out.",
+  "entranceTransparentMs": {
+    "restaurantCount": { "before": 450, "after": 0, "durationMs": 3000 },
+    "onlineUsers": { "before": 600, "after": 0, "durationMs": 4000 },
+    "announcement": { "before": 1800, "after": 0, "durationMs": 12000 }
+  },
+  "bytes": null,
+  "combinedEntranceMs": { "before": 2850, "after": 0, "absolute": 2850 },
+  "noise": {
+    "madMs": 0,
+    "rule": "Entrance time is 15% of each authored duration. It is not a sampled browser paint. The final 15% fade-out is unchanged."
+  }
+}
diff --git a/apps/web/performance/map-overlay-fade-out-20260924/benchmark.json b/apps/web/performance/map-overlay-fade-out-20260924/benchmark.json
new file mode 100644
index 0000000000..c301eb5ae4
--- /dev/null
+++ b/apps/web/performance/map-overlay-fade-out-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T12:36:00.000Z",
+  "model": "Map notices stayed opaque for 85% of mapOverlayFade and then faded to opacity 0 while scaling to 0.95. The hide timer still removes them. The fade animation is gone, so the last 15% is no longer a transparent overlay on the map.",
+  "announcementFadeFramesAt60fps": { "before": 108, "after": 0, "absolute": 108 },
+  "restaurantCountFadeFramesAt60fps": { "before": 27, "after": 0, "absolute": 27 },
+  "onlineUsersFadeFramesAt60fps": { "before": 36, "after": 0, "absolute": 36 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "15% of 12s, 3s, and 4s, times 60fps. One notice is visible at a time, so these are separate shows, not a sum on one frame. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/map-shadow-paint-20260924/benchmark.json b/apps/web/performance/map-shadow-paint-20260924/benchmark.json
new file mode 100644
index 0000000000..88508d4070
--- /dev/null
+++ b/apps/web/performance/map-shadow-paint-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T16:20:00.000Z",
+  "model": "Visit badges, review bubbles, and hovered cluster circles painted blurred shadows on the map. The shadows are gone. The badge, bubble, and circle stay.",
+  "visitBadgeShadowPaintsPerMarker": { "before": 1, "after": 0, "absolute": 1 },
+  "reviewBubbleShadowPaints": { "before": 1, "after": 0, "absolute": 1 },
+  "clusterHoverShadowPaints": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madPaints": 0,
+    "rule": "A visit badge exists only when the visit count is at least 2. Review bubbles are capped at 5 desktop and 3 mobile. The cluster shadow ran only while the pointer was over a cluster, and that hover scale is gone too. Not a sampled paint trace."
+  }
+}
diff --git a/apps/web/performance/map-submit-button-transition-20260924/benchmark.json b/apps/web/performance/map-submit-button-transition-20260924/benchmark.json
new file mode 100644
index 0000000000..e4d1d8a129
--- /dev/null
+++ b/apps/web/performance/map-submit-button-transition-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:30:00.000Z",
+  "model": "The map submit buttons transitioned box-shadow and transform for 300ms, including the press scale. Color still transitions for 150ms. Shadow and scale no longer interpolate.",
+  "shadowAndScaleFramesPerPressAt60fps": { "before": 18, "after": 0, "absolute": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000) for one button. The mobile control and the submission button are separate presses. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/map-user-button-snap-20260924/benchmark.json b/apps/web/performance/map-user-button-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..5af7d9b49c
--- /dev/null
+++ b/apps/web/performance/map-user-button-snap-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T17:02:00.000Z",
+  "model": "The map user button and the mypage action button faded their colors for the default 150ms. The mypage button also blurred the page behind a background that is already 95% opaque. The color change is one frame and the blur is gone.",
+  "colorFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "mypageButtonBackdropLayers": { "before": 1, "after": 0, "absolute": 1 },
+  "mypageButtonBackdropSamplesPerSecond": { "before": 60, "after": 0, "absolute": 60 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). 60 is one layer at 60fps while the mypage button is visible. The map button has no blur. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/map-width-transition-20260924/benchmark.json b/apps/web/performance/map-width-transition-20260924/benchmark.json
new file mode 100644
index 0000000000..f1175542ee
--- /dev/null
+++ b/apps/web/performance/map-width-transition-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T11:56:00.000Z",
+  "model": "The map column animated width and margin for 300ms. At 60fps that is 18 resize frames, and each frame can ask the map for a new tile set. The size now changes in one frame.",
+  "resizeFrames": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "durationMs": { "before": 300, "after": 0, "absolute": 300 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 frames is round(300/16.7). Not a sampled browser paint of tile requests."
+  }
+}
diff --git a/apps/web/performance/marker-anchor-reuse-20260924/benchmark.json b/apps/web/performance/marker-anchor-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..59ccf1d259
--- /dev/null
+++ b/apps/web/performance/marker-anchor-reuse-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:34:00.000Z",
+  "model": "Every marker render constructed a new anchor point even when the anchor pixel had not changed. A repeat render now reuses the existing point. A size change, such as selection, still constructs one.",
+  "anchorAllocationsPerUnchangedMarker": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madAllocations": 0,
+    "rule": "Counts one marker whose anchor x and y did not change. Not a sampled heap trace."
+  }
+}
diff --git a/apps/web/performance/marker-bounce-stop-20260924/benchmark.json b/apps/web/performance/marker-bounce-stop-20260924/benchmark.json
new file mode 100644
index 0000000000..9297d3eac1
--- /dev/null
+++ b/apps/web/performance/marker-bounce-stop-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:22:00.000Z",
+  "model": "A selected marker bounced for 1s by animating transform. The selected scale remains, and the bounce animation no longer runs.",
+  "bounceFramesPerSelectionAt60fps": { "before": 60, "after": 0, "absolute": 60 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "60 is one 1s animation times 60fps. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/marker-bounds-signature-reuse-20260924/benchmark.json b/apps/web/performance/marker-bounds-signature-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..b2aa8c29f4
--- /dev/null
+++ b/apps/web/performance/marker-bounds-signature-reuse-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:56:00.000Z",
+  "model": "A marker click at the same camera still joined a new bounds string into the render signature. The string is reused when the four rounded coordinates match.",
+  "boundsStringsPerUnchangedCamera": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madStrings": 0,
+    "rule": "roundCoord still runs. A camera move still builds one string. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/marker-box-shadow-20260924/benchmark.json b/apps/web/performance/marker-box-shadow-20260924/benchmark.json
new file mode 100644
index 0000000000..6da13d32c7
--- /dev/null
+++ b/apps/web/performance/marker-box-shadow-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:08:00.000Z",
+  "model": "Each individual marker painted a box-shadow. While the map pans, that shadow is redrawn with the marker. The marker image no longer has a shadow.",
+  "shadowPaintsPerVisibleMarkerPerFrame": { "before": 1, "after": 0, "absolute": 1 },
+  "panShadowPaintsPerVisibleMarkerPerSecondAt60fps": { "before": 60, "after": 0, "absolute": 60 },
+  "noise": {
+    "madPaints": 0,
+    "rule": "60 is one marker times 60 frames. The live total is 60 times the visible individual marker count. Not a sampled paint trace."
+  }
+}
diff --git a/apps/web/performance/marker-fade-out-remove-20260924/benchmark.json b/apps/web/performance/marker-fade-out-remove-20260924/benchmark.json
new file mode 100644
index 0000000000..e134393940
--- /dev/null
+++ b/apps/web/performance/marker-fade-out-remove-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T12:40:00.000Z",
+  "model": "A released marker stayed on the map for 300ms while opacity transitioned to 0. It now leaves the map in the same turn and returns to the pool, so the transparent ghost is gone. The same node is still reused.",
+  "transparentFramesPerReleasedMarkerAt60fps": { "before": 18, "after": 0, "absolute": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). A zoom that releases V markers was 18V transparent frames. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/marker-filter-layer-20260924/benchmark.json b/apps/web/performance/marker-filter-layer-20260924/benchmark.json
new file mode 100644
index 0000000000..efee33354b
--- /dev/null
+++ b/apps/web/performance/marker-filter-layer-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T12:18:00.000Z",
+  "model": "Each individual marker rasterized a CSS filter drop-shadow, and selection interpolated that filter for 200ms. The shadow is now a box-shadow, so pan and selection do not resample the marker bitmap through a filter.",
+  "filterLayersPerVisibleMarker": { "before": 1, "after": 0, "absolute": 1 },
+  "panSamplesPerVisibleMarkerPerSecondAt60fps": { "before": 60, "after": 0, "absolute": 60 },
+  "selectionFilterFrames": { "before": 12, "after": 0, "absolute": 12 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "60 is one filtered marker times 60 frames. 12 is round(200ms * 60fps / 1000) for the marker whose shadow changes on selection. The live pan total is 60 times the visible individual marker count. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/marker-image-decode-20260924/benchmark.json b/apps/web/performance/marker-image-decode-20260924/benchmark.json
new file mode 100644
index 0000000000..3b41eccdef
--- /dev/null
+++ b/apps/web/performance/marker-image-decode-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:34:00.000Z",
+  "model": "Marker images decoded asynchronously and were fetched at low priority, so the first paint of a new marker could be an empty box. They now decode before that paint. Cluster icon swaps already wait for the next image to load.",
+  "blankDecodePaintsPerNewMarkerImage": { "before": 1, "after": 0, "absolute": 1 },
+  "regionalCeilingBlankPaints": { "before": 18, "after": 0, "absolute": 18 },
+  "noise": {
+    "madPaints": 0,
+    "rule": "18 is the number of regional centers. Empty regions are not drawn, so a live frame is at or under that ceiling. Sync decode removes the empty paint after bytes arrive; it does not hide network wait. Not a sampled paint trace."
+  }
+}
diff --git a/apps/web/performance/marker-image-resize-20260924/benchmark.json b/apps/web/performance/marker-image-resize-20260924/benchmark.json
new file mode 100644
index 0000000000..5b844db6a3
--- /dev/null
+++ b/apps/web/performance/marker-image-resize-20260924/benchmark.json
@@ -0,0 +1,24 @@
+{
+  "generatedAt": "2026-09-24T10:41:00.000Z",
+  "model": "Selected, trend, and user-submitted markers draw at 32px or 42px. A 128px image covers 42*3 device pixels. 1024px images decode 1024*1024/128*128 = 64 times as many pixels. The map requests the WebP source first.",
+  "pixels": { "before": 1048576, "after": 16384, "ratio": 64 },
+  "webpBytes": {
+    "seasonal": { "before": 63006, "after": 3232 },
+    "trend": { "before": 50206, "after": 2718 },
+    "userSubmitted": { "before": 46756, "after": 2698 },
+    "totalBefore": 159968,
+    "totalAfter": 8648,
+    "absolute": 151320,
+    "relative": 18.497
+  },
+  "pngFallbackBytes": {
+    "totalBefore": 1472293,
+    "totalAfter": 41466,
+    "absolute": 1430827,
+    "relative": 35.505
+  },
+  "noise": {
+    "madBytes": 0,
+    "rule": "File sizes and pixel counts are deterministic."
+  }
+}
diff --git a/apps/web/performance/marker-kind-signature-reuse-20260924/benchmark.json b/apps/web/performance/marker-kind-signature-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..1f320b3624
--- /dev/null
+++ b/apps/web/performance/marker-kind-signature-reuse-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:58:00.000Z",
+  "model": "Each marker render mapped every loaded restaurant into a kind entry and sorted that list again. The same kind signature is already memoized, and the asset version is constant, so the render reuses that string.",
+  "kindEntryAllocationsPerMarkerRender": { "before": "loadedRestaurantCount", "after": 0, "absolute": "loadedRestaurantCount" },
+  "kindSortsPerMarkerRender": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madSorts": 0,
+    "rule": "One extra sort of the loaded list per marker render. The memoized signature still updates when the list identity changes. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/marker-latlng-reuse-20260924/benchmark.json b/apps/web/performance/marker-latlng-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..24d0873612
--- /dev/null
+++ b/apps/web/performance/marker-latlng-reuse-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:32:00.000Z",
+  "model": "Every marker render constructed a new latitude-longitude object even when the marker was already at that coordinate. A repeat render now reuses the existing object. Markers that must be nudged because they overlap still construct a new one.",
+  "latLngAllocationsPerStationaryMarker": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madAllocations": 0,
+    "rule": "Counts one non-overlapping marker whose coordinates did not change. A first appearance or a coordinate change still allocates. Not a sampled heap trace."
+  }
+}
diff --git a/apps/web/performance/marker-pool-reclaim-20260924/benchmark.json b/apps/web/performance/marker-pool-reclaim-20260924/benchmark.json
new file mode 100644
index 0000000000..b7272b4ca9
--- /dev/null
+++ b/apps/web/performance/marker-pool-reclaim-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T11:48:00.000Z",
+  "model": "A released marker stays off the active map for 300ms while its opacity is forced to 0. Asking for the same id during that window used to construct a second marker, so the pin disappeared and a new one appeared.",
+  "fadeWindowMs": 300,
+  "markersCreatedForReclaim": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "opacityZeroMsOnSurvivingMarker": { "before": 300, "after": 0, "absolute": 300 },
+  "noise": {
+    "madCount": 0,
+    "rule": "The before path follows the pool's 300ms release timer and the acquire order. The after path is the unit test that reclaims the same marker and keeps its map. Not a sampled browser paint."
+  }
+}
diff --git a/apps/web/performance/marker-render-early-return-20260924/benchmark.json b/apps/web/performance/marker-render-early-return-20260924/benchmark.json
new file mode 100644
index 0000000000..5301e8ec9a
--- /dev/null
+++ b/apps/web/performance/marker-render-early-return-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:06:00.000Z",
+  "model": "The marker effect also reruns when a callback or mode flag changes but the zoom, bounds, restaurant list, and cluster arrays are the same. That repeat used to filter the loaded list and rebuild the marker plan. It now returns before that work. Array identity is compared directly so a new cluster result is not treated as the previous one.",
+  "loadedListFiltersPerUnchangedViewport": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madFilters": 0,
+    "rule": "Counts one repeat run whose zoom, rounded bounds, list, and cluster arrays are unchanged. A real pan or a new cluster array still filters once. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/marker-shadow-pass-20260924/benchmark.json b/apps/web/performance/marker-shadow-pass-20260924/benchmark.json
new file mode 100644
index 0000000000..b20213737e
--- /dev/null
+++ b/apps/web/performance/marker-shadow-pass-20260924/benchmark.json
@@ -0,0 +1,8 @@
+{
+  "generatedAt": "2026-09-24T10:52:00.000Z",
+  "model": "Each CSS drop-shadow is a separate filter pass on the marker. The previous HTML stacked two drop-shadows. One pass remains. For n visible markers the pass count goes from 2n to n.",
+  "filtersPerMarker": { "before": 2, "after": 1, "ratio": 2 },
+  "exampleVisibleMarkers": 100,
+  "filterPasses": { "before": 200, "after": 100, "absolute": 100 },
+  "noise": { "mad": 0, "rule": "The filter count is exact in the generated HTML. This is not a timed browser paint sample." }
+}
diff --git a/apps/web/performance/marker-signature-id-sort-20260924/benchmark.json b/apps/web/performance/marker-signature-id-sort-20260924/benchmark.json
new file mode 100644
index 0000000000..4763fde04f
--- /dev/null
+++ b/apps/web/performance/marker-signature-id-sort-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:04:00.000Z",
+  "model": "The marker signature sorted and joined the display id list on every render, including a pan that reused the same list. That sorted string is stored on the list. A new list still sorts once.",
+  "idSortsPerRepeatRender": { "before": 1, "after": 0, "absolute": 1 },
+  "exampleSortComparisonsFor200Ids": { "before": 1529, "after": 0, "absolute": 1529 },
+  "noise": {
+    "madSorts": 0,
+    "rule": "1529 is round(200 * log2(200)). 200 is an example, not a live Seoul sample. The first use of a list still builds a set, sorts, and joins. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/marker-signature-strings-20260924/benchmark.json b/apps/web/performance/marker-signature-strings-20260924/benchmark.json
new file mode 100644
index 0000000000..b1d07d19a0
--- /dev/null
+++ b/apps/web/performance/marker-signature-strings-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T15:58:00.000Z",
+  "model": "Each marker signature rebuilt a 3-bit mode string, an empty kind map, and a layer version string. The 8 mode strings are constants. An empty kind list returns immediately. The layer version string is reused while the kind signature is unchanged.",
+  "modeStringsPerSignature": { "before": 1, "after": 0, "absolute": 1 },
+  "emptyKindMapsPerSignature": { "before": 1, "after": 0, "absolute": 1 },
+  "layerVersionStringsPerUnchangedKind": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madStrings": 0,
+    "rule": "A kind list with entries still builds one map. A changed kind signature still builds one version string. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/marker-skip-dom-query-20260924/benchmark.json b/apps/web/performance/marker-skip-dom-query-20260924/benchmark.json
new file mode 100644
index 0000000000..f135d2c6c3
--- /dev/null
+++ b/apps/web/performance/marker-skip-dom-query-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T12:56:00.000Z",
+  "model": "A skipped marker render asked the document for a cluster node and then for an individual marker. The pool already knows how many markers are on the map, so the skip uses that count.",
+  "documentWalksPerSkippedRender": { "before": 2, "after": 0, "absolute": 2 },
+  "noise": {
+    "madWalks": 0,
+    "rule": "querySelector stops at the first match, so a walk can be shorter than the whole document. Two calls still start from the document root. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/marker-skip-key-allocation-20260924/benchmark.json b/apps/web/performance/marker-skip-key-allocation-20260924/benchmark.json
new file mode 100644
index 0000000000..c207fd1e0f
--- /dev/null
+++ b/apps/web/performance/marker-skip-key-allocation-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T15:50:00.000Z",
+  "model": "A marker render that could be skipped still built a key object and a bounds string from four toFixed calls. The skip now compares rounded integers and returns before that object exists.",
+  "keyObjectsPerSkippedRender": { "before": 1, "after": 0, "absolute": 1 },
+  "boundsStringsPerSkippedRender": { "before": 1, "after": 0, "absolute": 1 },
+  "fixedDecimalStringsPerSkippedRender": { "before": 4, "after": 0, "absolute": 4 },
+  "noise": {
+    "madObjects": 0,
+    "rule": "Rounding is Math.round(value * 10000), the same 4 decimal places as toFixed(4) for these positive coordinates. A render that is not skipped still stores one key object. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/marker-transform-transition-20260924/benchmark.json b/apps/web/performance/marker-transform-transition-20260924/benchmark.json
new file mode 100644
index 0000000000..90f357a5ba
--- /dev/null
+++ b/apps/web/performance/marker-transform-transition-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:10:00.000Z",
+  "model": "Selecting a marker interpolated its scale for 200ms, and that transition also fought the one-shot bounce on the same transform. The scale now changes in one frame. The one-shot bounce remains.",
+  "selectionScaleFramesAt60fps": { "before": 12, "after": 1, "absolute": 11, "relative": 12 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "12 is round(200ms * 60fps / 1000). Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/marker-transition-all-20260924/benchmark.json b/apps/web/performance/marker-transition-all-20260924/benchmark.json
new file mode 100644
index 0000000000..f7f79aaae0
--- /dev/null
+++ b/apps/web/performance/marker-transition-all-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T11:55:00.000Z",
+  "model": "Individual marker HTML used transition: all for 200ms. The style sets five animatable properties: width, height, transform, filter, and z-index. Width, height, and z-index now change in one frame. Transform and filter still ease for 200ms.",
+  "durationMs": 200,
+  "animatedProperties": { "before": 5, "after": 2, "absolute": 3, "relative": 2.5 },
+  "layoutInterpolationMs": { "before": 200, "after": 0, "absolute": 200 },
+  "noise": {
+    "madMs": 0,
+    "rule": "The 200ms duration and the five property names come from the marker style string. Not a sampled browser paint."
+  }
+}
diff --git a/apps/web/performance/marker-viewport-padding-20260924/benchmark.json b/apps/web/performance/marker-viewport-padding-20260924/benchmark.json
new file mode 100644
index 0000000000..98d6e77d9a
--- /dev/null
+++ b/apps/web/performance/marker-viewport-padding-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T12:24:00.000Z",
+  "model": "Markers outside a 5% pad around the viewport were faded out. A short pan crossed that pad, so edge markers spent 300ms going transparent and then came back. The pad is now 25% on each side, so a pan up to a quarter of the viewport keeps those markers opaque.",
+  "panFractionThatStartsAnEdgeFade": { "before": 0.05, "after": 0.25, "absolute": 0.2, "relative": 5 },
+  "fadeStripFractionFor10PercentPan": { "before": 0.05, "after": 0, "absolute": 0.05 },
+  "keptAreaRelativeToViewport": { "before": 1.21, "after": 2.25, "absolute": 1.04, "relative": 1.86 },
+  "noise": {
+    "madFraction": 0,
+    "rule": "Area is (1 + 2*pad)^2. 1.21 is 1.1^2 and 2.25 is 1.5^2. The 10% fade strip is max(0, 0.10 - pad). Marker count scales with area only when restaurants are spread evenly. Not a sampled pan."
+  }
+}
diff --git a/apps/web/performance/marker-visual-cache-20260924/benchmark-marker-visual-cache.mjs b/apps/web/performance/marker-visual-cache-20260924/benchmark-marker-visual-cache.mjs
new file mode 100644
index 0000000000..f066885d7a
--- /dev/null
+++ b/apps/web/performance/marker-visual-cache-20260924/benchmark-marker-visual-cache.mjs
@@ -0,0 +1,93 @@
+// 개별 마커 HTML: 매번 생성과 동일 입력 캐시 재사용 비교.
+// 실행: bun apps/web/performance/marker-visual-cache-20260924/benchmark-marker-visual-cache.mjs
+import { writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { getNaverIndividualMarkerVisual } from '../../lib/naver-map-marker-visuals.ts';
+
+const COUNT = 1500;
+const REPETITIONS = 21;
+
+function makeRestaurant(index, generation) {
+    return {
+        id: `marker-${generation}-${index}`,
+        categories: [index % 3 === 0 ? '한식' : '카페·디저트'],
+        category: [],
+        youtube_link: `https://www.youtube.com/watch?v=${String(index).padStart(11, 'a')}`,
+        tzuyang_review: index % 2 === 0 ? '리뷰' : null,
+        mergedYoutubeLinks: index % 4 === 0 ? ['https://www.youtube.com/watch?v=bbbbbbbbbbb'] : undefined,
+        mergedTzuyangReviews: index % 4 === 0 ? ['다른 리뷰'] : undefined,
+        mergedRestaurants: index % 4 === 0 ? [{ id: `child-${index}`, youtube_link: 'https://youtu.be/ccccccccccc' }] : undefined,
+        source_type: 'geminiCLI',
+    };
+}
+
+const stable = Array.from({ length: COUNT }, (_, index) => makeRestaurant(index, 'stable'));
+
+function render(restaurants) {
+    for (let index = 0; index < restaurants.length; index += 1) {
+        getNaverIndividualMarkerVisual(restaurants[index], index === 0);
+    }
+}
+
+function median(values) {
+    const sorted = [...values].sort((left, right) => left - right);
+    const mid = Math.floor(sorted.length / 2);
+    return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+}
+
+function mad(values, center) {
+    return median(values.map((value) => Math.abs(value - center)));
+}
+
+function measure(makeInputs) {
+    for (let warm = 0; warm < 2; warm += 1) render(makeInputs(warm));
+    const samples = [];
+    for (let index = 0; index < REPETITIONS; index += 1) {
+        const restaurants = makeInputs(index + 10);
+        const started = performance.now();
+        render(restaurants);
+        samples.push(performance.now() - started);
+    }
+    const center = median(samples);
+    return {
+        medianMs: Number(center.toFixed(4)),
+        madMs: Number(mad(samples, center).toFixed(4)),
+    };
+}
+
+const cold = measure((generation) => Array.from({ length: COUNT }, (_, index) => makeRestaurant(index, `cold-${generation}`)));
+const warm = measure(() => stable);
+const absolute = cold.medianMs - warm.medianMs;
+const noise = cold.madMs + warm.madMs;
+const first = getNaverIndividualMarkerVisual(stable[0], false);
+const second = getNaverIndividualMarkerVisual(stable[0], false);
+
+const report = {
+    generatedAt: new Date().toISOString(),
+    model: 'Uncached cost is O(n) HTML builds. Cached cost is O(n) map lookups when id, selection, links, and visit inputs are unchanged. Rebuilds happen on every map idle.',
+    count: COUNT,
+    repetitions: REPETITIONS,
+    identity: first === second && first.content.length > 0,
+    cold,
+    warm,
+    absoluteMedianDeltaMs: Number(absolute.toFixed(4)),
+    medianSpeedup: Number((cold.medianMs / Math.max(warm.medianMs, 0.0001)).toFixed(3)),
+    noiseSumMadMs: Number(noise.toFixed(4)),
+    improvesBeyondNoise: absolute > noise,
+    budgets: {
+        absolute: { frameMs: 16, rule: '1500 marker visuals should rebuild inside one 16ms frame when cached.' },
+        relative: { minMedianSpeedup: 2 },
+        noise: { rule: 'Median improvement must exceed the sum of both MADs.' },
+    },
+};
+
+writeFileSync(join(dirname(fileURLToPath(import.meta.url)), 'benchmark.json'), `${JSON.stringify(report, null, 2)}\n`);
+console.log(JSON.stringify({
+    cold,
+    warm,
+    absoluteMedianDeltaMs: report.absoluteMedianDeltaMs,
+    medianSpeedup: report.medianSpeedup,
+    improvesBeyondNoise: report.improvesBeyondNoise,
+    identity: report.identity,
+}, null, 2));
diff --git a/apps/web/performance/marker-visual-cache-20260924/benchmark.json b/apps/web/performance/marker-visual-cache-20260924/benchmark.json
new file mode 100644
index 0000000000..acb98396cb
--- /dev/null
+++ b/apps/web/performance/marker-visual-cache-20260924/benchmark.json
@@ -0,0 +1,31 @@
+{
+  "generatedAt": "2026-09-24T10:22:21.807Z",
+  "model": "Uncached cost is O(n) HTML builds. Cached cost is O(n) map lookups when id, selection, links, and visit inputs are unchanged. Rebuilds happen on every map idle.",
+  "count": 1500,
+  "repetitions": 21,
+  "identity": true,
+  "cold": {
+    "medianMs": 2.2816,
+    "madMs": 0.5208
+  },
+  "warm": {
+    "medianMs": 0.409,
+    "madMs": 0.0619
+  },
+  "absoluteMedianDeltaMs": 1.8726,
+  "medianSpeedup": 5.578,
+  "noiseSumMadMs": 0.5827,
+  "improvesBeyondNoise": true,
+  "budgets": {
+    "absolute": {
+      "frameMs": 16,
+      "rule": "1500 marker visuals should rebuild inside one 16ms frame when cached."
+    },
+    "relative": {
+      "minMedianSpeedup": 2
+    },
+    "noise": {
+      "rule": "Median improvement must exceed the sum of both MADs."
+    }
+  }
+}
diff --git a/apps/web/performance/menu-badge-color-snap-20260924/benchmark.json b/apps/web/performance/menu-badge-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..d8a74f65fb
--- /dev/null
+++ b/apps/web/performance/menu-badge-color-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T17:28:00.000Z",
+  "model": "Dropdown items, badges, and the mobile sheet step chips faded their colors for the default 150ms. The color now changes in one frame.",
+  "colorFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One item is hovered at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/menu-enter-snap-20260924/benchmark.json b/apps/web/performance/menu-enter-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..b97c9c9d80
--- /dev/null
+++ b/apps/web/performance/menu-enter-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:54:00.000Z",
+  "model": "Popover, dropdown, select, and tooltip panels faded, scaled from 0.95, and slid 0.5rem. animate-in is 150ms. Those enter and exit animations are gone. The menus still open in place.",
+  "framesPerToggle": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). Open and close each pay that duration. One menu is open at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/mobile-map-backdrop-20260924/benchmark.json b/apps/web/performance/mobile-map-backdrop-20260924/benchmark.json
new file mode 100644
index 0000000000..8d675aeab2
--- /dev/null
+++ b/apps/web/performance/mobile-map-backdrop-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:04:00.000Z",
+  "model": "The mobile bottom bar, two floating map controls, and the map notice still sampled the map through backdrop-filter. They already use an opaque card or 95% background, so the filter only added a resample on every pan frame.",
+  "backdropLayers": { "before": 4, "after": 0, "absolute": 4 },
+  "samplesPerSecondAt60fps": { "before": 240, "after": 0, "absolute": 240 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "240 is 4 layers times 60 frames. A second notice would add another 60. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/mobile-overlay-poll-20260924/benchmark.json b/apps/web/performance/mobile-overlay-poll-20260924/benchmark.json
new file mode 100644
index 0000000000..3f72401184
--- /dev/null
+++ b/apps/web/performance/mobile-overlay-poll-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:52:00.000Z",
+  "model": "Mobile startup polled the DOM every 100ms for up to 3s, then waited another 500ms before enabling the noncritical map work. That second wave is what popped markers and notices in after the shell. Activation is now the ready event, one immediate check, or the 3s fallback.",
+  "domPollWakeups": { "before": 30, "after": 0, "absolute": 30 },
+  "extraSettleDelayMs": { "before": 500, "after": 0, "absolute": 500 },
+  "noise": {
+    "madWakeups": 0,
+    "rule": "30 is 3000ms / 100ms. The ready event can fire sooner, so 30 is the ceiling when the nodes never appear. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/mobile-search-fade-20260924/benchmark.json b/apps/web/performance/mobile-search-fade-20260924/benchmark.json
new file mode 100644
index 0000000000..969bae7ec9
--- /dev/null
+++ b/apps/web/performance/mobile-search-fade-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:02:00.000Z",
+  "model": "Opening mobile search faded a full-screen scrim over the map for 200ms. The scrim now appears in one frame, so the map is not sampled through a changing opacity.",
+  "scrimOpacityFramesAt60fps": { "before": 12, "after": 1, "absolute": 11, "relative": 12 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "12 is round(200ms * 60fps / 1000). Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/mobile-search-slide-20260924/benchmark.json b/apps/web/performance/mobile-search-slide-20260924/benchmark.json
new file mode 100644
index 0000000000..a140895099
--- /dev/null
+++ b/apps/web/performance/mobile-search-slide-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:04:00.000Z",
+  "model": "The mobile search sheet slid in from the top for 300ms after the scrim appeared. That slide is a large layer moving over the map. The sheet now appears in one frame.",
+  "sheetFramesAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/mobile-sheet-height-snap-20260924/benchmark.json b/apps/web/performance/mobile-sheet-height-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..d1ec55fb66
--- /dev/null
+++ b/apps/web/performance/mobile-sheet-height-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:20:00.000Z",
+  "model": "After a mobile sheet drag, height and corner radius transitioned for the default 150ms. The map offset follows the sheet state immediately, so the animated height lagged behind the map. The sheet now uses the target height in one frame. Dragging still updates height directly.",
+  "heightFramesAfterSheetSettleAt60fps": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60fps / 1000), the default CSS transition duration. Not a sampled layout trace."
+  }
+}
diff --git a/apps/web/performance/mobile-sheet-sticky-blur-20260924/benchmark.json b/apps/web/performance/mobile-sheet-sticky-blur-20260924/benchmark.json
new file mode 100644
index 0000000000..1a1b17b4a0
--- /dev/null
+++ b/apps/web/performance/mobile-sheet-sticky-blur-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:42:00.000Z",
+  "model": "Mobile sheet headers and footers stayed sticky and blurred the scrolling content under a background that is already 95% opaque. The blur is gone.",
+  "backdropLayersPerOpenSheet": { "before": 2, "after": 0, "absolute": 2 },
+  "samplesPerSecondAt60fpsWhileScrolling": { "before": 120, "after": 0, "absolute": 120 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "120 is 2 sticky layers times 60 frames, counted while the sheet content scrolls. A sheet may omit the footer. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/mypage-sidebar-ring-snap-20260924/benchmark.json b/apps/web/performance/mypage-sidebar-ring-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..01b5a03809
--- /dev/null
+++ b/apps/web/performance/mypage-sidebar-ring-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:30:00.000Z",
+  "model": "The mypage sidebar avatar ring is a box-shadow, and transition-all animated it for the default 150ms. The ring now appears in one frame. The static shadow stays.",
+  "ringFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/nearest-distance-square-20260924/benchmark.json b/apps/web/performance/nearest-distance-square-20260924/benchmark.json
new file mode 100644
index 0000000000..7fe60dfe9d
--- /dev/null
+++ b/apps/web/performance/nearest-distance-square-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:50:00.000Z",
+  "model": "Nearest-neighbor ordering used the square root of the scaled latitude and longitude deltas. The square root does not change which finite distance is smaller, so the comparison now uses the squared length.",
+  "squareRootsPerCandidate": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madRoots": 0,
+    "rule": "Counts one finite candidate. A list of n finite candidates dropped n square roots. Not a sampled timing trace."
+  }
+}
diff --git a/apps/web/performance/nearest-fallback-cache-20260924/benchmark.json b/apps/web/performance/nearest-fallback-cache-20260924/benchmark.json
new file mode 100644
index 0000000000..eef81a4299
--- /dev/null
+++ b/apps/web/performance/nearest-fallback-cache-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:46:00.000Z",
+  "model": "When one searched restaurant stays on screen, every later viewport pass scanned the whole list again to find the same nearest neighbor. That result is cached on the list and the visible restaurant id.",
+  "fullListScansPerRepeatViewport": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madScans": 0,
+    "rule": "A new list or a different sole visible restaurant still scans once. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/nearest-fallback-distance-20260924/benchmark.json b/apps/web/performance/nearest-fallback-distance-20260924/benchmark.json
new file mode 100644
index 0000000000..c110a26b07
--- /dev/null
+++ b/apps/web/performance/nearest-fallback-distance-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:44:00.000Z",
+  "model": "Finding the nearest swipe fallback recomputed the distance to the current winner for every later candidate. The winner distance is now kept, so each candidate is measured once.",
+  "distanceCalculationsPerCandidate": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "noise": {
+    "madCalculations": 0,
+    "rule": "The first candidate was already measured once. Later candidates were measured twice. The relative figure is the steady cost after a winner exists. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/overlap-offset-memo-20260924/benchmark.json b/apps/web/performance/overlap-offset-memo-20260924/benchmark.json
new file mode 100644
index 0000000000..b1b2f51eac
--- /dev/null
+++ b/apps/web/performance/overlap-offset-memo-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:00:00.000Z",
+  "model": "Every marker render copied the loaded restaurant list, merged cluster points, grouped coordinates, and sorted each overlapping group. Overlap depends on the restaurant list, so pan and zoom now reuse the memoized offsets.",
+  "fullListGroupsPerPanOrZoom": { "before": 1, "after": 0, "absolute": 1 },
+  "loadedRestaurantCopiesPerPanOrZoom": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madGroups": 0,
+    "rule": "A list identity change still groups once. A pan that does not change the loaded list used to group once and now does not. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/overlay-panel-scrim-20260924/benchmark.json b/apps/web/performance/overlay-panel-scrim-20260924/benchmark.json
new file mode 100644
index 0000000000..2528c000c6
--- /dev/null
+++ b/apps/web/performance/overlay-panel-scrim-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:04:00.000Z",
+  "model": "The page overlay scrim blurred the whole screen while it was open. The dim layer remains. The blur does not, so the map underneath is not resampled every frame.",
+  "fullViewportSamplesPerSecondAt60fps": { "before": 60, "after": 0, "absolute": 60 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "60 is one full-viewport backdrop layer times 60 frames, counted while the overlay is open. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/overlay-panel-width-snap-20260924/benchmark.json b/apps/web/performance/overlay-panel-width-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..89ab6c2996
--- /dev/null
+++ b/apps/web/performance/overlay-panel-width-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:06:00.000Z",
+  "model": "The overlay page animated its container, the main panel, and the side columns for 300ms. Those transitions included width. The panels now use their final size in one frame.",
+  "layoutFramesPerToggleAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000) for one panel. The container, main panel, and side column are separate elements. Not a sampled layout trace."
+  }
+}
diff --git a/apps/web/performance/overseas-location-jump-20260924/benchmark.json b/apps/web/performance/overseas-location-jump-20260924/benchmark.json
new file mode 100644
index 0000000000..0f06af3ae8
--- /dev/null
+++ b/apps/web/performance/overseas-location-jump-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T12:50:00.000Z",
+  "model": "Overseas device-location focus eased the camera for 550ms. The map resampled tiles through that ease. It now jumps to the same center and zoom in one camera commit. Wheel zoom still eases for 200ms.",
+  "deviceLocationCameraFramesAt60fps": { "before": 33, "after": 1, "absolute": 32, "relative": 33 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "33 is round(550ms * 60fps / 1000). Not a sampled tile trace."
+  }
+}
diff --git a/apps/web/performance/overseas-marker-layer-20260924/benchmark.json b/apps/web/performance/overseas-marker-layer-20260924/benchmark.json
new file mode 100644
index 0000000000..bef7597886
--- /dev/null
+++ b/apps/web/performance/overseas-marker-layer-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:18:00.000Z",
+  "model": "Each overseas map marker reserved a transform layer for its whole lifetime. The marker element no longer does that. MapLibre still positions the marker.",
+  "permanentTransformLayersPerMarker": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madLayers": 0,
+    "rule": "One layer per marker element. The count on screen is the visible overseas marker count. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/panel-offset-pan-snap-20260924/benchmark.json b/apps/web/performance/panel-offset-pan-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..57e008e2c9
--- /dev/null
+++ b/apps/web/performance/panel-offset-pan-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T12:46:00.000Z",
+  "model": "Opening or closing the in-map panel shifted the camera with a 300ms pan. The map resampled tiles on every frame of that pan. The same shift now happens with duration 0.",
+  "cameraFramesPerPanelOffsetChangeAt60fps": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). Duration 0 is one camera commit. Not a sampled tile trace. Marker-selection pans still use their own duration."
+  }
+}
diff --git a/apps/web/performance/popular-list-reasoning-20260924/benchmark.json b/apps/web/performance/popular-list-reasoning-20260924/benchmark.json
new file mode 100644
index 0000000000..42204b71fb
--- /dev/null
+++ b/apps/web/performance/popular-list-reasoning-20260924/benchmark.json
@@ -0,0 +1,8 @@
+{
+  "generatedAt": "2026-09-24T10:58:00.000Z",
+  "model": "The home popular and latest list select included reasoning_basis, which the cards do not render. Detail hydration still loads that column with the full restaurant row.",
+  "rows": 40,
+  "order": "review_count desc",
+  "bytes": { "before": 70935, "after": 59103, "absolute": 11832, "relative": 1.2 },
+  "noise": { "madBytes": 0, "rule": "Payload byte counts are one read of the live approved set." }
+}
diff --git a/apps/web/performance/popup-arrow-fade-20260924/benchmark.json b/apps/web/performance/popup-arrow-fade-20260924/benchmark.json
new file mode 100644
index 0000000000..e8edc3907d
--- /dev/null
+++ b/apps/web/performance/popup-arrow-fade-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:22:00.000Z",
+  "model": "The home popup's previous and next buttons faded in over the default 150ms when the pointer entered the banner. They still appear only while the banner is hovered, in one frame.",
+  "hoverFadeFramesPerButton": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). Two buttons can fade together, so a hover can be 18 frames before this change. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/popup-banner-slide-snap-20260924/benchmark.json b/apps/web/performance/popup-banner-slide-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..bb200170a6
--- /dev/null
+++ b/apps/web/performance/popup-banner-slide-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:52:00.000Z",
+  "model": "The home popup banner track slid for 500ms, then waited for transition end before jumping the loop clone back. The slide is gone. A clone index still resets on the next commit, and the clone shows the same poster as the real slide.",
+  "slideFramesPerChange": { "before": 30, "after": 1, "absolute": 29, "relative": 30 },
+  "loopResetDelayMs": { "before": 500, "after": 0, "absolute": 500 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "30 is round(500ms * 60 / 1000). The reset still commits once after the clone index, but that commit shows the same poster. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/popup-dot-transition-20260924/benchmark.json b/apps/web/performance/popup-dot-transition-20260924/benchmark.json
new file mode 100644
index 0000000000..cb9fb42a75
--- /dev/null
+++ b/apps/web/performance/popup-dot-transition-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:28:00.000Z",
+  "model": "The home popup dots grew, shrank, and faded their shadow with transition-all for the default 150ms. The active dot still scales and keeps its shadow. The change is one frame. The previous and current dots both change.",
+  "framesPerChangedDot": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "framesPerDotChange": { "before": 18, "after": 2, "absolute": 16, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). transition-all includes transform and box-shadow. Two dots change together. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/pretendard-subset-20260924/benchmark.json b/apps/web/performance/pretendard-subset-20260924/benchmark.json
new file mode 100644
index 0000000000..160b4ee672
--- /dev/null
+++ b/apps/web/performance/pretendard-subset-20260924/benchmark.json
@@ -0,0 +1,26 @@
+{
+  "generatedAt": "2026-09-24T10:35:00.000Z",
+  "file": "apps/web/app/fonts/pretendard/PretendardVariable.woff2",
+  "model": "Variable weight axis stays wght 45-930. Glyphs are limited to characters used by the current approved restaurant names, addresses, public review text, and app source, plus Latin, punctuation, arrows, and Hangul jamo. Unseen syllables fall back to Apple SD Gothic Neo or Malgun Gothic.",
+  "before": {
+    "bytes": 2057688,
+    "glyphs": 14757
+  },
+  "after": {
+    "bytes": 297492,
+    "glyphs": 2280
+  },
+  "absoluteBytes": 1760196,
+  "relative": 6.917,
+  "axis": {
+    "tag": "wght",
+    "min": 45,
+    "default": 400,
+    "max": 930
+  },
+  "glyphsLostThatExistedInTheOriginal": 0,
+  "noise": {
+    "madBytes": 0,
+    "rule": "Font file size is deterministic. There is no repeated-sample MAD."
+  }
+}
diff --git a/apps/web/performance/profile-avatar-ring-snap-20260924/benchmark.json b/apps/web/performance/profile-avatar-ring-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..fb1efc2832
--- /dev/null
+++ b/apps/web/performance/profile-avatar-ring-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:24:00.000Z",
+  "model": "The profile avatar ring is a box-shadow, and the avatar transitioned box-shadow for the default 150ms. The ring now appears in one frame. The static shadow on the avatar stays.",
+  "ringFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000), the default transition duration. The hover is mobile only because the avatar ignores pointers from md up. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/profile-color-snap-20260924/benchmark.json b/apps/web/performance/profile-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..d09e07b380
--- /dev/null
+++ b/apps/web/performance/profile-color-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:58:00.000Z",
+  "model": "Profile rows, stat chips, and action buttons faded their colors for the default 150ms. The color now changes in one frame.",
+  "colorFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One row or button is hovered at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/profile-tier-bar-snap-20260924/benchmark.json b/apps/web/performance/profile-tier-bar-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..0b3f48b6ae
--- /dev/null
+++ b/apps/web/performance/profile-tier-bar-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:26:00.000Z",
+  "model": "The profile tier bar animated its width, which is layout, for the default 150ms. The chevron nudge and the open rotation used the same default transform transition. All three now change in one frame.",
+  "tierBarLayoutFrames": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "chevronFrames": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). The bar runs when the percent changes. The chevrons run on hover or open. Not a sampled layout trace."
+  }
+}
diff --git a/apps/web/performance/ranking-widget-fade-20260924/benchmark.json b/apps/web/performance/ranking-widget-fade-20260924/benchmark.json
new file mode 100644
index 0000000000..ca1ec73b76
--- /dev/null
+++ b/apps/web/performance/ranking-widget-fade-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:20:00.000Z",
+  "model": "The header rank and online-user cluster faded in for 300ms after hydration. It still stays hidden until hydration, then appears in one frame.",
+  "hydrationFrames": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60 / 1000). This runs once per header mount. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/render-target-id-reuse-20260924/benchmark.json b/apps/web/performance/render-target-id-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..191b5c71df
--- /dev/null
+++ b/apps/web/performance/render-target-id-reuse-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:02:00.000Z",
+  "model": "Each marker render rebuilt a token for every displayed restaurant even when the lists and cluster mode were unchanged. Those tokens are reused. Bounds still go into the later signature. Extra bubble or expanded-cluster ids copy the cached list before appending.",
+  "tokenBuildsPerUnchangedList": { "before": "n", "after": 0, "absolute": "n" },
+  "exampleN200": { "before": 200, "after": 0, "absolute": 200 },
+  "noise": {
+    "madTokens": 0,
+    "rule": "n is the displayed restaurant count. 200 is an example, not a live Seoul sample. A changed list, cluster array, or selection still rebuilds. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/render-target-key-allocation-20260924/benchmark.json b/apps/web/performance/render-target-key-allocation-20260924/benchmark.json
new file mode 100644
index 0000000000..12b4cee731
--- /dev/null
+++ b/apps/web/performance/render-target-key-allocation-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:34:00.000Z",
+  "model": "A repeat marker render allocated a new key array just to see that the restaurant lists had not changed. The key now lives in one reused object, so a repeat render only compares fields.",
+  "keyArraysPerUnchangedRender": { "before": 1, "after": 0, "absolute": 1 },
+  "fieldComparisonsPerUnchangedRender": { "before": 13, "after": 13, "relative": 1 },
+  "noise": {
+    "madArrays": 0,
+    "rule": "13 is the number of key fields. A changed list still builds the token array. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/renderable-coordinate-identity-20260924/benchmark.json b/apps/web/performance/renderable-coordinate-identity-20260924/benchmark.json
new file mode 100644
index 0000000000..c87751210a
--- /dev/null
+++ b/apps/web/performance/renderable-coordinate-identity-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:56:00.000Z",
+  "model": "Each marker render built two new lists for restaurants that already had numeric coordinates. The coordinate pass now returns the same list when nothing needs a copy. A missing or string coordinate still builds one new list.",
+  "listAllocationsPerMarkerRenderWhenCoordinatesAreNumeric": { "before": 2, "after": 0, "absolute": 2 },
+  "coordinatePassesWhenCoordinatesAreNumeric": { "before": 1, "after": 1, "relative": 1 },
+  "noise": {
+    "madAllocations": 0,
+    "rule": "The marker effect calls the coordinate filter twice, once for the contextual list and once for review bubbles. Each call previously allocated one array. Not a sampled heap trace."
+  }
+}
diff --git a/apps/web/performance/restaurant-identity-allocation-20260924/benchmark.json b/apps/web/performance/restaurant-identity-allocation-20260924/benchmark.json
new file mode 100644
index 0000000000..2c9b4e7516
--- /dev/null
+++ b/apps/web/performance/restaurant-identity-allocation-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:48:00.000Z",
+  "model": "Comparing two different restaurants allocated an id set and two id arrays even when neither restaurant had merged records. That comparison now checks the name and coordinate directly. Merged records still use the set.",
+  "setAllocationsPerUnmergedComparison": { "before": 1, "after": 0, "absolute": 1 },
+  "idArrayAllocationsPerUnmergedComparison": { "before": 2, "after": 0, "absolute": 2 },
+  "noise": {
+    "madAllocations": 0,
+    "rule": "Counts one comparison of two restaurants with different ids and no merged records. A nearest scan of n such restaurants used to allocate n sets. Not a sampled heap trace."
+  }
+}
diff --git a/apps/web/performance/return-bookmark-color-snap-20260924/benchmark.json b/apps/web/performance/return-bookmark-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..b5f466564d
--- /dev/null
+++ b/apps/web/performance/return-bookmark-color-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T17:08:00.000Z",
+  "model": "The return-to-map button, the header bookmark button, and the review author name faded their colors for the default 150ms. The color now changes in one frame.",
+  "colorFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One control is hovered at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-candidate-lists-20260924/benchmark.json b/apps/web/performance/review-bubble-candidate-lists-20260924/benchmark.json
new file mode 100644
index 0000000000..6d929b78b8
--- /dev/null
+++ b/apps/web/performance/review-bubble-candidate-lists-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:48:00.000Z",
+  "model": "Bubble selection copied every identified restaurant into one list and every reviewed restaurant into another. When any restaurant has a review, only the reviewed list is built. When every row has an id and none has a review, the input list is used.",
+  "copiedListsWhenAnyReviewExists": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "copiedListsWhenEveryRowHasAnIdAndNoReview": { "before": 2, "after": 0, "absolute": 2 },
+  "noise": {
+    "madLists": 0,
+    "rule": "Rows without ids and without reviews still copy one list in a second pass. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-candidate-object-20260924/benchmark.json b/apps/web/performance/review-bubble-candidate-object-20260924/benchmark.json
new file mode 100644
index 0000000000..0ba4fc5957
--- /dev/null
+++ b/apps/web/performance/review-bubble-candidate-object-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:46:00.000Z",
+  "model": "Bubble ranking built a candidate object for every restaurant, including ones that never entered the top list. The object is created only when a restaurant is inserted.",
+  "candidateObjectsThatMissTheTopList": { "before": "n - k", "after": 0, "absolute": "n - k" },
+  "example80CandidatesLimit5NoLaterReplacement": { "before": 80, "after": 5, "absolute": 75 },
+  "noise": {
+    "madObjects": 0,
+    "rule": "k is the number of insertions. 80 and 5 assume the first five fill the list and no later candidate replaces them. A replacement still allocates one object. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-clamp-layout-20260924/benchmark.json b/apps/web/performance/review-bubble-clamp-layout-20260924/benchmark.json
new file mode 100644
index 0000000000..7f35284567
--- /dev/null
+++ b/apps/web/performance/review-bubble-clamp-layout-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:32:00.000Z",
+  "model": "Each review bubble clamp set margin to 0 before reading its box, which forced a layout per bubble, then wrote the shift again. The natural position is now the measured box minus the margin already applied, and writes happen only after every bubble is measured.",
+  "forcedLayoutsPerDesktopClamp": { "before": 5, "after": 1, "absolute": 4, "relative": 5 },
+  "styleWritesWhenShiftUnchanged": { "before": 5, "after": 0, "absolute": 5 },
+  "noise": {
+    "madLayouts": 0,
+    "rule": "Desktop shows at most 5 bubbles. A write before each measurement invalidates layout, so the before count is one layout per bubble. Reads with no writes between them share one layout. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-clamp-skip-20260924/benchmark.json b/apps/web/performance/review-bubble-clamp-skip-20260924/benchmark.json
new file mode 100644
index 0000000000..a4ceda6b47
--- /dev/null
+++ b/apps/web/performance/review-bubble-clamp-skip-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:32:00.000Z",
+  "model": "Every marker render scheduled a frame to measure review bubbles, including renders with no bubbles. The measurement now runs only when a bubble is showing.",
+  "clampFramesPerMarkerRenderWithoutBubbles": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "The skipped frame used to query the document. With no bubbles that query finds nothing, so it was not a per-bubble layout read. A render with bubbles still measures each bubble once. Not a sampled layout trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-html-reuse-20260924/benchmark.json b/apps/web/performance/review-bubble-html-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..c61ae83120
--- /dev/null
+++ b/apps/web/performance/review-bubble-html-reuse-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:50:00.000Z",
+  "model": "Each marker render rebuilt the review-bubble HTML around the category icon, even when the bubble and the icon HTML were unchanged. The wrapped string is stored on the bubble.",
+  "wrappedHtmlStringsPerRepeatBubble": { "before": 1, "after": 0, "absolute": 1 },
+  "example5DesktopBubbles": { "before": 5, "after": 0, "absolute": 5 },
+  "noise": {
+    "madStrings": 0,
+    "rule": "5 is the desktop bubble cap. A changed icon or a mobile switch still builds one string. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-id-signature-20260924/benchmark.json b/apps/web/performance/review-bubble-id-signature-20260924/benchmark.json
new file mode 100644
index 0000000000..e189544483
--- /dev/null
+++ b/apps/web/performance/review-bubble-id-signature-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:00:00.000Z",
+  "model": "The review-bubble projection key joined every visible restaurant id on each marker render. The joined string is now stored on the list. A repeat render of the same list reuses it. A new list still joins once.",
+  "idJoinsPerRepeatRender": { "before": 1, "after": 0, "absolute": 1 },
+  "exampleCharactersFor80UuidIds": { "before": 2959, "after": 0, "absolute": 2959 },
+  "noise": {
+    "madJoins": 0,
+    "rule": "2959 is 80 * 36 + 79 separators. 80 is an example visible count, not a live Seoul sample. The first render of a new list still joins. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-key-array-20260924/benchmark.json b/apps/web/performance/review-bubble-key-array-20260924/benchmark.json
new file mode 100644
index 0000000000..50d24afe20
--- /dev/null
+++ b/apps/web/performance/review-bubble-key-array-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:10:00.000Z",
+  "model": "Each marker render built an array of review-bubble keys just to decide whether the signature id list must be copied. The check now stops at the first key and does not allocate that array.",
+  "keyArraysPerMarkerRender": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madArrays": 0,
+    "rule": "A render with bubbles still copies the signature list before appending. A render without bubbles or expanded clusters keeps the cached list. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-key-join-20260924/benchmark.json b/apps/web/performance/review-bubble-key-join-20260924/benchmark.json
new file mode 100644
index 0000000000..88684daef5
--- /dev/null
+++ b/apps/web/performance/review-bubble-key-join-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:40:00.000Z",
+  "model": "Each eligible marker render joined the bubble seed and the restaurant id signature into a new cache key, then built the seed again for selection. The two strings are compared on their own, and the seed is built once.",
+  "joinedKeysPerEligibleRender": { "before": 1, "after": 0, "absolute": 1 },
+  "seedBuildsPerEligibleRender": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "noise": {
+    "madStrings": 0,
+    "rule": "A moved viewport still builds one seed. A repeat of the same seed string does not allocate another. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-latlng-reuse-20260924/benchmark.json b/apps/web/performance/review-bubble-latlng-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..d6bb1d82a3
--- /dev/null
+++ b/apps/web/performance/review-bubble-latlng-reuse-20260924/benchmark.json
@@ -0,0 +1,15 @@
+{
+  "generatedAt": "2026-09-24T17:16:00.000Z",
+  "model": "Each review-bubble viewport pass built a Naver LatLng for every candidate. The same restaurant now keeps that object while its latitude and longitude stay equal, so a repeat pass allocates none.",
+  "latLngObjectsPerRepeatPass": {
+    "before": 80,
+    "after": 0,
+    "absolute": 80,
+    "relative": null,
+    "exampleCandidates": 80
+  },
+  "noise": {
+    "madObjects": 0,
+    "rule": "Count is one constructor call per candidate on the first pass and zero on a repeat of the same restaurant objects and coordinates. A moved coordinate still allocates one. Not a sampled heap trace. Relative is unbounded because the after count is zero."
+  }
+}
diff --git a/apps/web/performance/review-bubble-layout-read-20260924/benchmark.json b/apps/web/performance/review-bubble-layout-read-20260924/benchmark.json
new file mode 100644
index 0000000000..2120ebc886
--- /dev/null
+++ b/apps/web/performance/review-bubble-layout-read-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:34:00.000Z",
+  "model": "Review-bubble placement read the map element's layout box on every eligible render. Naver's getSize supplies the same width and height without that read. The element box is used only when getSize is missing.",
+  "forcedLayoutsPerEligibleRender": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madLayouts": 0,
+    "rule": "The projection and one LatLng per candidate restaurant still run. Not a sampled layout trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-list-lazy-20260924/benchmark.json b/apps/web/performance/review-bubble-list-lazy-20260924/benchmark.json
new file mode 100644
index 0000000000..3a06b2aba9
--- /dev/null
+++ b/apps/web/performance/review-bubble-list-lazy-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:52:00.000Z",
+  "model": "Bubble placement allocated both the inside list and the score list before looking at any restaurant. Each list is now created on the first push. A placement that finds an inside restaurant and had no earlier outside restaurant does not allocate the score list.",
+  "unusedScoreListsWhenTheFirstRestaurantIsInside": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madLists": 0,
+    "rule": "An outside restaurant before the first inside one still creates the score list for those earlier rows. A placement with no projected restaurants allocates neither list. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-marker-patch-20260924/benchmark.json b/apps/web/performance/review-bubble-marker-patch-20260924/benchmark.json
new file mode 100644
index 0000000000..14f1371c05
--- /dev/null
+++ b/apps/web/performance/review-bubble-marker-patch-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:16:00.000Z",
+  "model": "A review bubble used to replace the whole marker icon, which destroyed the category image node. When the marker style and image address stay the same, only the bubble node is inserted or removed.",
+  "categoryImageReplacementsPerDisjointRefresh": { "before": 10, "after": 0, "absolute": 10 },
+  "bubbleNodeUpdatesPerDisjointRefresh": { "before": 10, "after": 10, "absolute": 0, "relative": 1 },
+  "noise": {
+    "madCount": 0,
+    "rule": "Desktop shows at most 5 bubbles. A disjoint refresh removes 5 and adds 5. Overlap lowers the count. Not a sampled paint trace. A size or image change still replaces the icon."
+  }
+}
diff --git a/apps/web/performance/review-bubble-projection-cache-20260924/benchmark.json b/apps/web/performance/review-bubble-projection-cache-20260924/benchmark.json
new file mode 100644
index 0000000000..e5ad50fbc4
--- /dev/null
+++ b/apps/web/performance/review-bubble-projection-cache-20260924/benchmark.json
@@ -0,0 +1,13 @@
+{
+  "generatedAt": "2026-09-24T12:54:00.000Z",
+  "model": "Every marker render projected every visible restaurant to place at most 5 review bubbles. A later render with the same zoom, bounds, and restaurant ids now reuses that result.",
+  "projectionCallsPerUnchangedViewport": {
+    "before": "visibleRestaurantCount",
+    "after": 0,
+    "absolute": "visibleRestaurantCount"
+  },
+  "noise": {
+    "madCalls": 0,
+    "rule": "The repeat path still joins the visible ids into a cache key. It does not call the map projection. A zoom, pan, or list change still projects once. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-rank-string-20260924/benchmark.json b/apps/web/performance/review-bubble-rank-string-20260924/benchmark.json
new file mode 100644
index 0000000000..dd3d86d09f
--- /dev/null
+++ b/apps/web/performance/review-bubble-rank-string-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T16:42:00.000Z",
+  "model": "Bubble ranking hashed a new seed:id string for every candidate. The seed and the separator are hashed once. Each candidate continues that hash with its id, so the rank stays the same without the joined string.",
+  "joinedRankStringsPerSelection": { "before": "n", "after": 0, "absolute": "n" },
+  "seedCharacterWalksPerSelection": { "before": "n", "after": 1, "absolute": "n - 1" },
+  "example80Candidates": { "before": 80, "after": 0, "absolute": 80 },
+  "noise": {
+    "madStrings": 0,
+    "rule": "80 is an example candidate count, not a live Seoul count. Each id is still walked once. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-related-ids-20260924/benchmark.json b/apps/web/performance/review-bubble-related-ids-20260924/benchmark.json
new file mode 100644
index 0000000000..b932ab85fa
--- /dev/null
+++ b/apps/web/performance/review-bubble-related-ids-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:44:00.000Z",
+  "model": "Each bubble target rebuilt a set and an array of related restaurant ids. Those ids are stored on the restaurant. A later selection of the same restaurant reuses them.",
+  "relatedIdSetsPerRepeatTarget": { "before": 1, "after": 0, "absolute": 1 },
+  "relatedIdArraysPerRepeatTarget": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madSets": 0,
+    "rule": "The first selection of a restaurant still builds one set and one array. Bubble targets are capped at 5 on desktop and 3 on mobile. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-render-token-20260924/benchmark.json b/apps/web/performance/review-bubble-render-token-20260924/benchmark.json
new file mode 100644
index 0000000000..ff2f079601
--- /dev/null
+++ b/apps/web/performance/review-bubble-render-token-20260924/benchmark.json
@@ -0,0 +1,15 @@
+{
+  "generatedAt": "2026-09-24T17:20:00.000Z",
+  "model": "Each marker pass serialized every visible review bubble into a signature string. The same bubble object now keeps that token while its id, name, text, photo, and mobile flag stay equal.",
+  "serializationsPerRepeatPass": {
+    "before": 5,
+    "after": 0,
+    "absolute": 5,
+    "relative": null,
+    "exampleBubbles": 5
+  },
+  "noise": {
+    "madSerializations": 0,
+    "rule": "5 is the desktop bubble limit. A changed field still serializes that bubble once. Not a sampled heap trace. Relative is unbounded because the after count is zero."
+  }
+}
diff --git a/apps/web/performance/review-bubble-score-skip-20260924/benchmark.json b/apps/web/performance/review-bubble-score-skip-20260924/benchmark.json
new file mode 100644
index 0000000000..a8769b310e
--- /dev/null
+++ b/apps/web/performance/review-bubble-score-skip-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:36:00.000Z",
+  "model": "Bubble placement built a score object for every visible restaurant, then threw those objects away when any restaurant was already in the safe box. Scoring now stops once one restaurant is inside, and later restaurants are kept without a score.",
+  "scoreObjectsWhenAnyRestaurantIsInside": { "before": "n", "after": "k", "absolute": "n - k" },
+  "example80VisibleFirstIsInside": { "before": 80, "after": 0, "absolute": 80 },
+  "noise": {
+    "madObjects": 0,
+    "rule": "n is the visible count and k is how many restaurants were outside before the first inside one. 80 assumes the first candidate is inside. The projection and LatLng still run for every candidate. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-seed-reuse-20260924/benchmark.json b/apps/web/performance/review-bubble-seed-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..b29bf2093c
--- /dev/null
+++ b/apps/web/performance/review-bubble-seed-reuse-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:18:00.000Z",
+  "model": "An eligible marker render built the review-bubble seed twice, each time from four toFixed strings and an array. The second call now reuses the string. Rounding uses integers instead of toFixed.",
+  "seedStringsPerEligibleRender": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "fixedDecimalStringsPerEligibleRender": { "before": 8, "after": 0, "absolute": 8 },
+  "noise": {
+    "madStrings": 0,
+    "rule": "Rounding is Math.round(value * 1000), the same 3 decimal places as toFixed(3) for these positive coordinates. A moved viewport still builds one seed. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/review-bubble-target-reuse-20260924/benchmark.json b/apps/web/performance/review-bubble-target-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..1dcee222cd
--- /dev/null
+++ b/apps/web/performance/review-bubble-target-reuse-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T16:38:00.000Z",
+  "model": "A repeat render with the same bubble viewport hashed every candidate restaurant and rebuilt the target signature. Those results are stored with the viewport key. A new key still selects once.",
+  "candidateHashesPerRepeatViewport": { "before": "n", "after": 0, "absolute": "n" },
+  "targetSignatureJoinsPerRepeatViewport": { "before": 1, "after": 0, "absolute": 1 },
+  "example80Candidates": { "before": 80, "after": 0, "absolute": 80 },
+  "noise": {
+    "madHashes": 0,
+    "rule": "n is the candidate count after the viewport filter. 80 is an example, not a live Seoul count. A moved viewport still hashes once. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/review-card-transition-20260924/benchmark.json b/apps/web/performance/review-card-transition-20260924/benchmark.json
new file mode 100644
index 0000000000..1c84c99b02
--- /dev/null
+++ b/apps/web/performance/review-card-transition-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:34:00.000Z",
+  "model": "Review cards transitioned every property for 500ms when the pin or highlight changed. The border and ring now change in one frame.",
+  "cardFramesPerHighlightAt60fps": { "before": 30, "after": 1, "absolute": 29, "relative": 30 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "30 is round(500ms * 60fps / 1000) for one card. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/review-carousel-blur-20260924/benchmark.json b/apps/web/performance/review-carousel-blur-20260924/benchmark.json
new file mode 100644
index 0000000000..64fd34f6bc
--- /dev/null
+++ b/apps/web/performance/review-carousel-blur-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T17:16:00.000Z",
+  "model": "The review photo carousel previous and next buttons each kept a backdrop blur while the pointer was over the photo. Both blur layers are gone, so a hovered carousel no longer samples the photo for those buttons.",
+  "blurLayersWhileHovered": { "before": 2, "after": 0, "absolute": 2, "relative": null },
+  "blurSamplesPerSecond": { "before": 120, "after": 0, "absolute": 120, "relative": null },
+  "noise": {
+    "madLayers": 0,
+    "rule": "120 is 2 layers times 60 frames per second while both buttons are visible. Buttons stay hidden until hover, so the cost was only on the hovered photo. Not a sampled compositor trace. Relative is unbounded because the after count is zero."
+  }
+}
diff --git a/apps/web/performance/review-form-shadow-snap-20260924/benchmark.json b/apps/web/performance/review-form-shadow-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..4708869b41
--- /dev/null
+++ b/apps/web/performance/review-form-shadow-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:56:00.000Z",
+  "model": "The review form focus ring, a photo card shadow, and a photo remove button faded for the default 150ms. The ring and shadow are box-shadow. Each now changes in one frame.",
+  "framesPerChange": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). The focus ring, card shadow, and remove button change at different times. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/review-heart-transition-20260924/benchmark.json b/apps/web/performance/review-heart-transition-20260924/benchmark.json
new file mode 100644
index 0000000000..23bebb0c7b
--- /dev/null
+++ b/apps/web/performance/review-heart-transition-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:32:00.000Z",
+  "model": "The review heart animated every property for the default 150ms while the pointer was pressed. The fill now changes in one frame.",
+  "framesPerPress": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). It runs only during the active press. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/review-list-skeleton-pulse-20260924/benchmark.json b/apps/web/performance/review-list-skeleton-pulse-20260924/benchmark.json
new file mode 100644
index 0000000000..2f5a7826ae
--- /dev/null
+++ b/apps/web/performance/review-list-skeleton-pulse-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T17:32:00.000Z",
+  "model": "The restaurant review list showed three pulsing cards while reviews loaded. Those cards now stay still.",
+  "opacityFramesPerSecond": { "before": 180, "after": 0, "absolute": 180, "relative": null },
+  "animatedCards": { "before": 3, "after": 0, "absolute": 3, "relative": null },
+  "noise": {
+    "madFrames": 0,
+    "rule": "180 is 3 cards times 60 frames per second. The pulse keyframe is a 2s opacity loop. Not a sampled compositor trace. Relative is unbounded because the after count is zero."
+  }
+}
diff --git a/apps/web/performance/review-ocr-highlight-20260924/benchmark.json b/apps/web/performance/review-ocr-highlight-20260924/benchmark.json
new file mode 100644
index 0000000000..ad7022635f
--- /dev/null
+++ b/apps/web/performance/review-ocr-highlight-20260924/benchmark.json
@@ -0,0 +1,12 @@
+{
+  "generatedAt": "2026-09-24T14:48:00.000Z",
+  "model": "The review form highlighted the restaurant field with transition-all for 500ms, which included padding and forced layout each frame. The AI analysis card also pinged and blurred a background that is already 95% opaque. The highlight, ping, and blur are gone. The spinner remains.",
+  "restaurantHighlightLayoutFrames": { "before": 30, "after": 1, "absolute": 29, "relative": 30 },
+  "pingFramesPerSecondWhileAnalyzing": { "before": 60, "after": 0, "absolute": 60 },
+  "analysisBackdropLayers": { "before": 1, "after": 0, "absolute": 1 },
+  "analysisBackdropSamplesPerSecond": { "before": 60, "after": 0, "absolute": 60 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "30 is round(500ms * 60 / 1000). Ping and blur are 60 samples per second at 60fps for one layer while analysis is visible. One of three form copies is mounted. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/review-pin-dot-transition-20260924/benchmark.json b/apps/web/performance/review-pin-dot-transition-20260924/benchmark.json
new file mode 100644
index 0000000000..61bc1f4cde
--- /dev/null
+++ b/apps/web/performance/review-pin-dot-transition-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:36:00.000Z",
+  "model": "My page review cards transitioned every property for 500ms when a pin changed. Photo dots animated their width for the default 150ms. Both now change in one frame.",
+  "pinnedCardFramesAt60fps": { "before": 30, "after": 1, "absolute": 29, "relative": 30 },
+  "dotWidthFramesPerPhotoChangeAt60fps": { "before": 18, "after": 0, "absolute": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "30 is round(500ms * 60fps / 1000) for one card. 9 is round(150ms * 60fps / 1000) for one dot, and the active dot and the previous dot both change, so the before count is 18. Not a sampled layout trace."
+  }
+}
diff --git a/apps/web/performance/selected-marker-loop-20260924/benchmark.json b/apps/web/performance/selected-marker-loop-20260924/benchmark.json
new file mode 100644
index 0000000000..c510c7e324
--- /dev/null
+++ b/apps/web/performance/selected-marker-loop-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:20:00.000Z",
+  "model": "A selected marker looped forever. The Naver marker bounced every 1s and the Google marker pulsed every 2s, so the compositor kept sampling that one node after the selection had settled. Each animation now runs once.",
+  "naverBounceFramesFor10sSelectionAt60fps": { "before": 600, "after": 60, "absolute": 540, "relative": 10 },
+  "googlePulseFramesFor10sSelectionAt60fps": { "before": 600, "after": 120, "absolute": 480, "relative": 5 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "60fps times the 10s hold. The Naver animation is 1s and the Google animation is 2s, so the after counts are 60 and 120. The four stylesheet copies are one rule, not four animations. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/selected-pulse-overseas-shadow-20260924/benchmark.json b/apps/web/performance/selected-pulse-overseas-shadow-20260924/benchmark.json
new file mode 100644
index 0000000000..392824f8a2
--- /dev/null
+++ b/apps/web/performance/selected-pulse-overseas-shadow-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T13:26:00.000Z",
+  "model": "A selected Google marker ran a 2s pulse that interpolated box-shadow. Overseas markers also painted a drop-shadow and transitioned transform for 200ms. The pulse and the shadow are gone, and hover scale changes in one frame.",
+  "selectedPulseFramesAt60fps": { "before": 120, "after": 0, "absolute": 120 },
+  "overseasHoverTransformFramesAt60fps": { "before": 12, "after": 1, "absolute": 11, "relative": 12 },
+  "overseasShadowPaintsPerMarkerPerSecondAt60fps": { "before": 60, "after": 0, "absolute": 60 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "120 is 2s times 60fps. 12 is round(200ms * 60fps / 1000). 60 is one shadowed marker times 60 frames. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/selection-camera-snap-20260924/benchmark.json b/apps/web/performance/selection-camera-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..739b1e118f
--- /dev/null
+++ b/apps/web/performance/selection-camera-snap-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T12:48:00.000Z",
+  "model": "Mobile marker selection panned for 340ms and then fired a second map resize. Device-location focus morphed for 450ms. Both now set the center and zoom in one turn, and the delayed resize is gone.",
+  "mobileSelectionCameraFramesAt60fps": { "before": 20, "after": 1, "absolute": 19, "relative": 20 },
+  "delayedResizeAfterSelection": { "before": 1, "after": 0, "absolute": 1 },
+  "deviceLocationMorphFramesAt60fps": { "before": 27, "after": 1, "absolute": 26, "relative": 27 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "20 is round(340ms * 60fps / 1000). 27 is round(450ms * 60fps / 1000). Not a sampled tile trace."
+  }
+}
diff --git a/apps/web/performance/shared-bottom-sheet-snap-20260924/benchmark.json b/apps/web/performance/shared-bottom-sheet-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..91b1725a71
--- /dev/null
+++ b/apps/web/performance/shared-bottom-sheet-snap-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:00:00.000Z",
+  "model": "Shared bottom sheets animated height for the base 235ms and faded the scrim for 200ms. Height now matches the snap state in one frame, and the scrim appears in one frame.",
+  "heightFramesAt60fps": { "before": 14, "after": 1, "absolute": 13, "relative": 14 },
+  "scrimFramesAt60fps": { "before": 12, "after": 1, "absolute": 11, "relative": 12 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "14 is round(235ms * 60fps / 1000). 12 is round(200ms * 60fps / 1000). Flick snaps used 175ms and long drags 295ms. Not a sampled frame trace."
+  }
+}
diff --git a/apps/web/performance/shared-button-color-snap-20260924/benchmark.json b/apps/web/performance/shared-button-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..3b17611e23
--- /dev/null
+++ b/apps/web/performance/shared-button-color-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T17:22:00.000Z",
+  "model": "Every shared Button faded its background and text for the default 150ms, including the bookmark icon button. The color now changes in one frame.",
+  "colorFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One button is hovered at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/shared-sheet-snap-state-20260924/benchmark.json b/apps/web/performance/shared-sheet-snap-state-20260924/benchmark.json
new file mode 100644
index 0000000000..7f673407b7
--- /dev/null
+++ b/apps/web/performance/shared-sheet-snap-state-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T14:45:00.000Z",
+  "model": "The shared bottom sheet still stored a snap duration and easing on drag start and drag end, and flipped a resize flag for 140ms, even though the sheet no longer has a height transition. Those state updates are gone. Drag still writes height directly.",
+  "snapStateUpdatesPerGesture": { "before": 2, "after": 0, "absolute": 2 },
+  "viewportResizeFlagUpdatesPerBurst": { "before": 2, "after": 0, "absolute": 2 },
+  "resizeSettleDelayMs": { "before": 140, "after": 0, "absolute": 140 },
+  "noise": {
+    "madUpdates": 0,
+    "rule": "2 is one update on drag start and one on drag end. The resize pair is the flag turning on, then off after 140ms. Height still changes in one write. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/sheet-enter-snap-20260924/benchmark.json b/apps/web/performance/sheet-enter-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..bb43523b97
--- /dev/null
+++ b/apps/web/performance/sheet-enter-snap-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T14:48:00.000Z",
+  "model": "The shared sheet slid and faded for 500ms on open and 300ms on close. The overlay faded for the default 150ms. Those animations are gone, so the sheet appears in one frame.",
+  "openFrames": { "before": 30, "after": 1, "absolute": 29, "relative": 30 },
+  "closeFrames": { "before": 18, "after": 1, "absolute": 17, "relative": 18 },
+  "overlayFadeFrames": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "30 is round(500ms * 60 / 1000). 18 is round(300ms * 60 / 1000). 9 is round(150ms * 60 / 1000), the animate-in default when no duration class is set. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/sheet-snap-transition-state-20260924/benchmark.json b/apps/web/performance/sheet-snap-transition-state-20260924/benchmark.json
new file mode 100644
index 0000000000..60d4b5fea9
--- /dev/null
+++ b/apps/web/performance/sheet-snap-transition-state-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:58:00.000Z",
+  "model": "Ending a mobile sheet drag stored a 175–295ms height transition and re-rendered to apply it. The sheet height is already set directly, so that transition state is gone.",
+  "snapTransitionRendersPerGesture": { "before": 2, "after": 0, "absolute": 2 },
+  "snapTransitionMs": { "before": 235, "after": 0, "absolute": 235 },
+  "noise": {
+    "madRenders": 0,
+    "rule": "2 is one update when the drag starts and one when it ends. 235ms is the base duration. Flick and long drags used 175ms and 295ms. Not a sampled frame trace."
+  }
+}
diff --git a/apps/web/performance/sheet-will-change-height-20260924/benchmark.json b/apps/web/performance/sheet-will-change-height-20260924/benchmark.json
new file mode 100644
index 0000000000..366383a984
--- /dev/null
+++ b/apps/web/performance/sheet-will-change-height-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:30:00.000Z",
+  "model": "Dragging the home sheet promoted a layer with will-change: height. Height changes are layout, so that hint does not move the work to the compositor. The promotion at drag start and the teardown at drag end are gone.",
+  "dragLayerPromotions": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madPromotions": 0,
+    "rule": "One promotion when a drag starts and one teardown when it ends. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/sidebar-recommendation-color-snap-20260924/benchmark.json b/apps/web/performance/sidebar-recommendation-color-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..ea5c866fbd
--- /dev/null
+++ b/apps/web/performance/sidebar-recommendation-color-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T17:06:00.000Z",
+  "model": "The daily recommendation badge and footer, and the mypage sidebar links and stat tiles, faded their colors for the default 150ms. The color now changes in one frame.",
+  "colorFramesPerHover": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). One control is hovered at a time. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/stamp-card-content-visibility-20260924/benchmark.json b/apps/web/performance/stamp-card-content-visibility-20260924/benchmark.json
new file mode 100644
index 0000000000..8ff12736b2
--- /dev/null
+++ b/apps/web/performance/stamp-card-content-visibility-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:28:00.000Z",
+  "model": "Stamp cards below the scrollport still built their text and thumbnail. content-visibility:auto skips that work until the card is near the viewport. The list card reserves 76px and the grid card reserves 148px so the scrollbar length stays stable.",
+  "offscreenCardPaints": { "before": "n - v", "after": 0 },
+  "example20Cards4Visible": { "before": 16, "after": 0, "absolute": 16 },
+  "noise": {
+    "madCards": 0,
+    "rule": "n is rendered cards and v is cards in the scrollport. 20 and 4 are an example, not a live panel count. The latest list starts at 3 cards, so this applies once the list grows. Not a sampled paint trace."
+  }
+}
diff --git a/apps/web/performance/stamp-card-hover-shadow-20260924/benchmark.json b/apps/web/performance/stamp-card-hover-shadow-20260924/benchmark.json
new file mode 100644
index 0000000000..b870cba28e
--- /dev/null
+++ b/apps/web/performance/stamp-card-hover-shadow-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:30:00.000Z",
+  "model": "List stamp cards faded their background and border for 200ms, and both card layouts painted a hover shadow. The color change is instant. The hover shadow is gone. The list card still changes background on hover.",
+  "colorFramesPerHover": { "before": 12, "after": 1, "absolute": 11, "relative": 12 },
+  "hoverShadowPaints": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "12 is round(200ms * 60 / 1000). The shadow count is one paint per hovered card, not a sampled paint trace."
+  }
+}
diff --git a/apps/web/performance/stamp-card-thumbnail-ceiling-20260924/benchmark.json b/apps/web/performance/stamp-card-thumbnail-ceiling-20260924/benchmark.json
new file mode 100644
index 0000000000..2dc811f040
--- /dev/null
+++ b/apps/web/performance/stamp-card-thumbnail-ceiling-20260924/benchmark.json
@@ -0,0 +1,15 @@
+{
+  "generatedAt": "2026-09-24T11:05:00.000Z",
+  "model": "The stamp grid sizes string included media-query widths. The ceiling treated 1536px as the image slot, so the first request was maxresdefault (1280px). The slot is now at most 480 CSS px, which selects sddefault (640px).",
+  "videoId": "DNGGl1-jFcU",
+  "bytes": {
+    "before": 431886,
+    "after": 144457,
+    "absolute": 287429,
+    "relative": 2.989
+  },
+  "noise": {
+    "madBytes": 0,
+    "rule": "Byte counts are one fetch of the same video's maxresdefault and sddefault files, reused from the thumbnail ceiling measurement."
+  }
+}
diff --git a/apps/web/performance/stamp-card-transition-20260924/benchmark.json b/apps/web/performance/stamp-card-transition-20260924/benchmark.json
new file mode 100644
index 0000000000..c16a8b2f84
--- /dev/null
+++ b/apps/web/performance/stamp-card-transition-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T14:22:00.000Z",
+  "model": "Stamp thumbnails interpolated grayscale for 300ms, and stamp cards interpolated box-shadow on hover for 300ms. Both now change in one frame.",
+  "thumbnailFilterFramesAt60fps": { "before": 18, "after": 0, "absolute": 18 },
+  "cardShadowFramesPerHoverAt60fps": { "before": 18, "after": 0, "absolute": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000). The thumbnail count is one image. The shadow count is one card hover. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/stamp-overlay-resize-20260924/benchmark.json b/apps/web/performance/stamp-overlay-resize-20260924/benchmark.json
new file mode 100644
index 0000000000..a82c201f10
--- /dev/null
+++ b/apps/web/performance/stamp-overlay-resize-20260924/benchmark.json
@@ -0,0 +1,21 @@
+{
+  "generatedAt": "2026-09-24T10:43:00.000Z",
+  "model": "The stamp overlay draws at most 224 CSS pixels (w-56). 224*3 = 672 device pixels. The source is now 768px wide, so 768/224 = 3.43 device pixels per CSS pixel. The old 1280px frame decoded 1280*1260/768*756 = 2.78 times as many pixels. Browsers take the WebP source.",
+  "pixels": { "before": 1612800, "after": 580608, "ratio": 2.778 },
+  "webpBytes": {
+    "clear": 82216,
+    "dark": 74392,
+    "total": 156608
+  },
+  "pngBytes": {
+    "clear": { "before": 934794, "after": 343803 },
+    "dark": { "before": 913040, "after": 338795 }
+  },
+  "requestedBytes": {
+    "before": 1847834,
+    "after": 156608,
+    "absolute": 1691226,
+    "relative": 11.799
+  },
+  "noise": { "madBytes": 0, "rule": "File sizes are deterministic." }
+}
diff --git a/apps/web/performance/stamp-thumbnail-opacity-fade-20260924/benchmark.json b/apps/web/performance/stamp-thumbnail-opacity-fade-20260924/benchmark.json
new file mode 100644
index 0000000000..03dfdffd83
--- /dev/null
+++ b/apps/web/performance/stamp-thumbnail-opacity-fade-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T12:42:00.000Z",
+  "model": "Stamp thumbnails transitioned opacity for 300ms. A newly loaded image therefore spent 300ms partially transparent on top of the previous frame. Opacity is no longer animated, so the loaded image replaces the previous one in one paint. Filter and transform transitions remain for the visited-stamp state.",
+  "opacityFramesPerThumbnailRevealAt60fps": { "before": 18, "after": 0, "absolute": 18 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "18 is round(300ms * 60fps / 1000) for one thumbnail. Not a sampled paint trace."
+  }
+}
diff --git a/apps/web/performance/swipe-dedupe-identity-20260924/benchmark.json b/apps/web/performance/swipe-dedupe-identity-20260924/benchmark.json
new file mode 100644
index 0000000000..a8f1359554
--- /dev/null
+++ b/apps/web/performance/swipe-dedupe-identity-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T15:06:00.000Z",
+  "model": "Dedupe copied the swipe list even when every row was already unique. It now returns that list. The id signature of a list is joined once and reused.",
+  "resultArraysWhenAlreadyUnique": { "before": 1, "after": 0, "absolute": 1 },
+  "idJoinsPerRepeatOfTheSameList": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madArrays": 0,
+    "rule": "A duplicate, a hole, or a new list still allocates one result and joins once. The id sets are still built on every dedupe. Not a sampled heap trace."
+  }
+}
diff --git a/apps/web/performance/swipe-dedupe-index-20260924/benchmark.json b/apps/web/performance/swipe-dedupe-index-20260924/benchmark.json
new file mode 100644
index 0000000000..d84e728af0
--- /dev/null
+++ b/apps/web/performance/swipe-dedupe-index-20260924/benchmark.json
@@ -0,0 +1,13 @@
+{
+  "generatedAt": "2026-09-24T13:52:00.000Z",
+  "model": "Deduping a swipe list compared every restaurant with every restaurant already kept. Identity now uses an id set, a merged-id set, and a bucket per name. Unique names do not scan the kept list.",
+  "keptListComparisonsForUniqueNames": {
+    "before": "v*(v-1)/2",
+    "after": 0,
+    "absolute": "v*(v-1)/2"
+  },
+  "noise": {
+    "madComparisons": 0,
+    "rule": "v is the list length. Restaurants that share a name still compare coordinates inside that name bucket. Merged ids still use the id sets. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/swipe-dedupe-rescan-20260924/benchmark.json b/apps/web/performance/swipe-dedupe-rescan-20260924/benchmark.json
new file mode 100644
index 0000000000..6b6840390b
--- /dev/null
+++ b/apps/web/performance/swipe-dedupe-rescan-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T15:08:00.000Z",
+  "model": "A swipe list that was already unique was scanned again on the next pan, building two id sets and a name map. A list that has been checked is remembered. The next call returns it without a scan.",
+  "examinationsPerRepeatList": { "before": "n", "after": 0, "absolute": "n" },
+  "setAllocationsPerRepeatList": { "before": 2, "after": 0, "absolute": 2 },
+  "nameMapAllocationsPerRepeatList": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madExaminations": 0,
+    "rule": "n is the list length. The first call still scans every row. A mutated list is not detected. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/swipe-hint-backdrop-20260924/benchmark.json b/apps/web/performance/swipe-hint-backdrop-20260924/benchmark.json
new file mode 100644
index 0000000000..e00e48b088
--- /dev/null
+++ b/apps/web/performance/swipe-hint-backdrop-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:06:00.000Z",
+  "model": "The first mobile restaurant-detail visit covers the screen with a swipe hint. That hint used a full-viewport backdrop-filter plus a second blur on the label, and it stays until the first pointer. The dim scrim remains; the filters do not.",
+  "backdropLayersWhileHintVisible": { "before": 2, "after": 0, "absolute": 2 },
+  "fullViewportSamplesPerSecondAt60fps": { "before": 60, "after": 0, "absolute": 60 },
+  "noise": {
+    "madSamples": 0,
+    "rule": "60 is one full-viewport layer times 60 frames. The label was a second layer. Not a sampled compositor trace. The hint duration depends on the first tap."
+  }
+}
diff --git a/apps/web/performance/swipe-list-identity-20260924/benchmark.json b/apps/web/performance/swipe-list-identity-20260924/benchmark.json
new file mode 100644
index 0000000000..40ab85e216
--- /dev/null
+++ b/apps/web/performance/swipe-list-identity-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:40:00.000Z",
+  "model": "Selecting a restaurant that was already in the loaded list copied the whole list into a new swipe array. That new array also threw away the viewport cell index. The same list is now returned, so neither the copy nor the index rebuild happens. A restaurant that is not in the list is still appended.",
+  "loadedListCopiesWhenSelectionIsAlreadyVisible": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madCopies": 0,
+    "rule": "One copy of the loaded list per selection of an already listed restaurant. The copy length is the loaded restaurant count. Not a sampled heap trace."
+  }
+}
diff --git a/apps/web/performance/swipe-order-single-pass-20260924/benchmark.json b/apps/web/performance/swipe-order-single-pass-20260924/benchmark.json
new file mode 100644
index 0000000000..d009a2932d
--- /dev/null
+++ b/apps/web/performance/swipe-order-single-pass-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T13:42:00.000Z",
+  "model": "Putting the searched restaurant first scanned the visible list twice. One pass now splits matches and the rest, then concatenates them. The order is the same.",
+  "visibleListPassesPerSearchOrdering": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "noise": {
+    "madPasses": 0,
+    "rule": "Counts the visible list only. The nearest-fallback scan of the full list still runs when exactly one visible restaurant remains. Not a sampled trace."
+  }
+}
diff --git a/apps/web/performance/tab-transition-snap-20260924/benchmark.json b/apps/web/performance/tab-transition-snap-20260924/benchmark.json
new file mode 100644
index 0000000000..629e852f0d
--- /dev/null
+++ b/apps/web/performance/tab-transition-snap-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T16:30:00.000Z",
+  "model": "Tab buttons animated every property, including the active shadow, for the default 150ms. The active background and shadow now appear in one frame.",
+  "framesPerTabChange": { "before": 9, "after": 1, "absolute": 8, "relative": 9 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "9 is round(150ms * 60 / 1000). The previous and next tabs can both change, so a switch can be 18 frames before this change. Not a sampled compositor trace."
+  }
+}
diff --git a/apps/web/performance/ui-noise-tile-20260924/benchmark.json b/apps/web/performance/ui-noise-tile-20260924/benchmark.json
new file mode 100644
index 0000000000..0a09fac506
--- /dev/null
+++ b/apps/web/performance/ui-noise-tile-20260924/benchmark.json
@@ -0,0 +1,7 @@
+{
+  "generatedAt": "2026-09-24T10:50:00.000Z",
+  "model": "The page background used an SVG feTurbulence filter. A filter with 3 octaves is evaluated across the painted viewport. A 1920x1080 frame is 2,073,600 pixels. The replacement is one 64x64 tile, 4,096 pixels, decoded once and repeated. 2073600/4096 = 506.25.",
+  "tile": { "width": 64, "height": 64, "bytes": 3466 },
+  "pixelsPerFullHdFrame": { "before": 2073600, "after": 4096, "ratio": 506.25 },
+  "noise": { "madPixels": 0, "rule": "The pixel counts are exact. This does not time a browser paint sample." }
+}
diff --git a/apps/web/performance/unused-map-keyframes-20260924/benchmark.json b/apps/web/performance/unused-map-keyframes-20260924/benchmark.json
new file mode 100644
index 0000000000..377afe01c1
--- /dev/null
+++ b/apps/web/performance/unused-map-keyframes-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:38:00.000Z",
+  "model": "The home stylesheets still contained the unused pulse and fadeInOut keyframes. Nothing applied them. Removing them shortens the CSS the home route parses. fadeIn stays because the recommendation popup uses it.",
+  "unusedKeyframeRules": { "before": 8, "after": 0, "absolute": 8 },
+  "sourceBytesRemoved": { "before": 2759, "after": 0, "absolute": 2759 },
+  "noise": {
+    "madBytes": 0,
+    "rule": "684, 684, and 707 bytes were measured on three stylesheets. The home sheet removed the same keyframe pair, counted as 684 bytes. These rules were not running, so the win is parse size, not frames."
+  }
+}
diff --git a/apps/web/performance/unused-marker-keyframes-20260924/benchmark.json b/apps/web/performance/unused-marker-keyframes-20260924/benchmark.json
new file mode 100644
index 0000000000..a9448019c9
--- /dev/null
+++ b/apps/web/performance/unused-marker-keyframes-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:22:00.000Z",
+  "model": "The map injected unused marker-bounce and cluster-pulse keyframes into the document on startup. Nothing applied those classes. The style tags are no longer inserted.",
+  "injectedStyleElements": { "before": 2, "after": 0, "absolute": 2 },
+  "unusedKeyframeRules": { "before": 2, "after": 0, "absolute": 2 },
+  "noise": {
+    "madElements": 0,
+    "rule": "This is startup DOM and CSS text, not frames during a pan. The bounce animation was 1s if a marker had used the class. Not a sampled parse trace."
+  }
+}
diff --git a/apps/web/performance/viewport-cell-index-20260924/benchmark.json b/apps/web/performance/viewport-cell-index-20260924/benchmark.json
new file mode 100644
index 0000000000..caaeda07d1
--- /dev/null
+++ b/apps/web/performance/viewport-cell-index-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T13:12:00.000Z",
+  "model": "A viewport query used to test every loaded restaurant. Restaurants now sit in 0.05 degree cells. A window tests only the cells it touches, then checks those restaurants against the exact bounds. A window wider than the list still scans the whole list. The same list reuses the cell index.",
+  "fixture": "1000 restaurants on a 0.1 degree lattice from latitude 33 and longitude 126. Window south 37.45, north 37.55, west 126.95, east 127.05.",
+  "examinations": { "before": 1000, "after": 2, "absolute": 998, "relative": 500 },
+  "matches": { "before": 1, "after": 1, "absolute": 0, "relative": 1 },
+  "noise": {
+    "madExaminations": 0,
+    "rule": "The fixture is uniform, not the live Seoul distribution. A city viewport examines every restaurant in the touched cells, which is more than 2 when many restaurants share a neighborhood. Not a field trace."
+  }
+}
diff --git a/apps/web/performance/viewport-cell-inline-20260924/benchmark.json b/apps/web/performance/viewport-cell-inline-20260924/benchmark.json
new file mode 100644
index 0000000000..a0508e4d20
--- /dev/null
+++ b/apps/web/performance/viewport-cell-inline-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T16:04:00.000Z",
+  "model": "The viewport cell scan called isRestaurantInViewport for every restaurant in a touched cell and used forEach, which creates a callback per occupied cell. The comparisons are inline. One shared id recorder remains.",
+  "viewportHelperCallsPerCellRestaurant": { "before": 1, "after": 0, "absolute": 1 },
+  "forEachCallbacksPerScan": { "before": "1 + b", "after": 1, "absolute": "b" },
+  "example20OccupiedCells": { "before": 21, "after": 1, "absolute": 20 },
+  "noise": {
+    "madCallbacks": 0,
+    "rule": "b is the number of occupied cells in the window. 20 is an example, not a live Seoul window. The full-list fallback still calls the helper. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/viewport-cell-key-number-20260924/benchmark.json b/apps/web/performance/viewport-cell-key-number-20260924/benchmark.json
new file mode 100644
index 0000000000..635a4ef85a
--- /dev/null
+++ b/apps/web/performance/viewport-cell-key-number-20260924/benchmark.json
@@ -0,0 +1,11 @@
+{
+  "generatedAt": "2026-09-24T16:02:00.000Z",
+  "model": "Each touched viewport cell built a lat:lng string to find its restaurant bucket. The cell is now one integer, latCell * 100000 + lngCell. Earth longitude cells stay inside that stride.",
+  "cellKeyStringsPerScan": { "before": "c", "after": 0, "absolute": "c" },
+  "cellKeyStringsPerIndexBuild": { "before": "n", "after": 0, "absolute": "n" },
+  "example20Cells": { "before": 20, "after": 0, "absolute": 20 },
+  "noise": {
+    "madStrings": 0,
+    "rule": "c is the number of touched cells and n is the number of restaurants in the indexed list. 20 is an example, not a live Seoul window. The restaurant index still stores the same buckets. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/visible-id-set-identity-20260924/benchmark.json b/apps/web/performance/visible-id-set-identity-20260924/benchmark.json
new file mode 100644
index 0000000000..2cdaa95280
--- /dev/null
+++ b/apps/web/performance/visible-id-set-identity-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:06:00.000Z",
+  "model": "Each marker render copied visible restaurant ids into a new array and a new set, even when the visible list was the same object. The set is stored on that list. An expanded cluster still copies, because those ids are added.",
+  "idArraysPerUnchangedVisibleList": { "before": 1, "after": 0, "absolute": 1 },
+  "idSetsPerUnchangedVisibleList": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madSets": 0,
+    "rule": "The first use of a list still builds one set. Expanded clusters still build a fresh set. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/visible-id-set-reuse-20260924/benchmark.json b/apps/web/performance/visible-id-set-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..1047c64111
--- /dev/null
+++ b/apps/web/performance/visible-id-set-reuse-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T15:36:00.000Z",
+  "model": "A pan that kept the same restaurants still built a new id set before noticing the previous result matched. That set is kept with the result. The next matching pan only counts ids.",
+  "idSetsWhenMembershipIsUnchanged": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madSets": 0,
+    "rule": "The cell scan still runs. A changed membership builds one set and scans the cells again. Not a sampled allocator trace."
+  }
+}
diff --git a/apps/web/performance/visible-list-copy-skip-20260924/benchmark.json b/apps/web/performance/visible-list-copy-skip-20260924/benchmark.json
new file mode 100644
index 0000000000..8a3b8aa225
--- /dev/null
+++ b/apps/web/performance/visible-list-copy-skip-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T14:14:00.000Z",
+  "model": "The marker render copied the visible restaurant list so expanded clusters could be appended. When nothing is expanded, the original list is used.",
+  "visibleListCopiesWhenNoneExpanded": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madCopies": 0,
+    "rule": "One copy of the visible list per marker render. An expanded cluster still copies. Not a sampled heap trace."
+  }
+}
diff --git a/apps/web/performance/visible-list-reuse-20260924/benchmark.json b/apps/web/performance/visible-list-reuse-20260924/benchmark.json
new file mode 100644
index 0000000000..90c198cb9e
--- /dev/null
+++ b/apps/web/performance/visible-list-reuse-20260924/benchmark.json
@@ -0,0 +1,20 @@
+{
+  "generatedAt": "2026-09-24T14:58:00.000Z",
+  "model": "A pan that keeps the same restaurants still sorted a new visible list. The cell scan still runs. When the id set matches the previous result for the same source list, that result is returned.",
+  "resultAllocationsWhenMembershipIsUnchanged": { "before": 1, "after": 0, "absolute": 1 },
+  "sortComparisonsForKVisibleRestaurants": {
+    "before": "k * log2(k)",
+    "after": 0,
+    "membershipChecksAfter": "k"
+  },
+  "exampleK80": {
+    "sortComparisonsBefore": 504,
+    "membershipChecksAfter": 80,
+    "absolute": 424,
+    "relative": 6.3
+  },
+  "noise": {
+    "madAllocations": 0,
+    "rule": "504 is round(80 * log2(80)). 80 is an example visible count, not a live Seoul sample. The cell scan still examines every restaurant in the touched cells. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/visible-list-single-scan-20260924/benchmark.json b/apps/web/performance/visible-list-single-scan-20260924/benchmark.json
new file mode 100644
index 0000000000..3b79b1f518
--- /dev/null
+++ b/apps/web/performance/visible-list-single-scan-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T16:00:00.000Z",
+  "model": "A pan that changed which restaurants were visible scanned the viewport cells twice: once to compare with the previous set, then again to build the new set. Both happen in one pass. A matching pan still returns the previous list without a new set. The id buffer is reused.",
+  "cellScansWhenMembershipChanges": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "idSetsWhenMembershipIsUnchanged": { "before": 0, "after": 0, "absolute": 0 },
+  "noise": {
+    "madScans": 0,
+    "rule": "The unchanged path still walks the touched cells. The id buffer grows to the largest visible count and is then reused. Not a sampled profiler trace."
+  }
+}
diff --git a/apps/web/performance/visit-badge-shadow-20260924/benchmark.json b/apps/web/performance/visit-badge-shadow-20260924/benchmark.json
new file mode 100644
index 0000000000..9b1a6f97b1
--- /dev/null
+++ b/apps/web/performance/visit-badge-shadow-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T13:16:00.000Z",
+  "model": "Visit-count badges painted a box-shadow on an opaque red circle with a white border. The shadow is gone. The badge still appears only when the visit count is at least 2.",
+  "shadowPaintsPerVisitBadgePerFrame": { "before": 1, "after": 0, "absolute": 1 },
+  "panShadowPaintsPerVisitBadgePerSecondAt60fps": { "before": 60, "after": 0, "absolute": 60 },
+  "noise": {
+    "madPaints": 0,
+    "rule": "60 is one badge times 60 frames. The live total is 60 times the number of visible badges. Not a sampled paint trace."
+  }
+}
diff --git a/apps/web/performance/wheel-zoom-same-turn-20260924/benchmark.json b/apps/web/performance/wheel-zoom-same-turn-20260924/benchmark.json
new file mode 100644
index 0000000000..657bf06ae7
--- /dev/null
+++ b/apps/web/performance/wheel-zoom-same-turn-20260924/benchmark.json
@@ -0,0 +1,10 @@
+{
+  "generatedAt": "2026-09-24T12:28:00.000Z",
+  "model": "Pointer-anchored wheel zoom changed the zoom, painted, then waited for the map idle event to move the center. When the projection offset changes inside that same call, the center correction now happens before the handler returns. If the projection is still on the old zoom, the idle correction remains.",
+  "cameraCorrectionsDeferredToIdle": { "before": 1, "after": 0, "absolute": 1 },
+  "paintedCameraStatesPerReadyWheelStep": { "before": 2, "after": 1, "absolute": 1, "relative": 2 },
+  "noise": {
+    "madFrames": 0,
+    "rule": "Counts one wheel step whose projection offset changes immediately. The idle fallback is not included. Not a sampled frame trace."
+  }
+}
diff --git a/apps/web/performance/youtube-thumbnail-ceiling-20260924/benchmark.json b/apps/web/performance/youtube-thumbnail-ceiling-20260924/benchmark.json
new file mode 100644
index 0000000000..f8ad077f00
--- /dev/null
+++ b/apps/web/performance/youtube-thumbnail-ceiling-20260924/benchmark.json
@@ -0,0 +1,38 @@
+{
+  "generatedAt": "2026-09-24T10:30:00.000Z",
+  "sample": {
+    "videoId": "DNGGl1-jFcU",
+    "note": "This file was the maxresdefault image observed on the production home document. Bytes are Content download sizes for that one video, not a 30-sample field p75."
+  },
+  "model": "Displayed CSS width w needs about 2w source pixels. maxresdefault is 1280px wide, sddefault 640px, hqdefault 480px. A 400px detail starts at sddefault. A 112px card starts at hqdefault. Pixel counts are 1280*720=921600, 640*480=307200, 480*360=172800.",
+  "bytes": {
+    "maxresdefault": 431886,
+    "sddefault": 144457,
+    "hqdefault": 35376,
+    "mqdefault": 22652
+  },
+  "detail400": {
+    "before": "maxresdefault",
+    "after": "sddefault",
+    "absoluteBytes": 287429,
+    "relative": 2.989,
+    "pixelRatio": 3.0
+  },
+  "card112": {
+    "before": "maxresdefault",
+    "after": "hqdefault",
+    "absoluteBytes": 396510,
+    "relative": 12.208,
+    "pixelRatio": 5.333
+  },
+  "probe": {
+    "beforeRequests": 2,
+    "afterRequestsForSdAndHq": 1,
+    "model": "maxresdefault still probes because YouTube can return a 120x90 placeholder. sddefault and hqdefault are real frames, so the extra Image() download is skipped. Saved bytes equal one full copy of the chosen file.",
+    "detail400SavedBytes": 144457,
+    "card112SavedBytes": 35376
+  },
+  "noise": {
+    "rule": "Single-object byte counts have no repeated-sample MAD. The ratios are exact for this video's files. Request count drops from 2 to 1 with no sample variance."
+  }
+}
diff --git a/apps/web/performance/youtube-thumbnail-hold-20260924/benchmark.json b/apps/web/performance/youtube-thumbnail-hold-20260924/benchmark.json
new file mode 100644
index 0000000000..ee86e56c2e
--- /dev/null
+++ b/apps/web/performance/youtube-thumbnail-hold-20260924/benchmark.json
@@ -0,0 +1,9 @@
+{
+  "generatedAt": "2026-09-24T11:58:00.000Z",
+  "model": "A YouTube thumbnail used to swap its visible src as soon as the next candidate was chosen. The previous bitmap now stays until the next image's load event.",
+  "visibleSrcChangesBeforeLoadPerFallback": { "before": 1, "after": 0, "absolute": 1 },
+  "noise": {
+    "madCount": 0,
+    "rule": "One authored fallback step. The number of fallbacks on a real page and the blank duration were not sampled."
+  }
+}
diff --git a/apps/web/public/images/maker-images/asian.png b/apps/web/public/images/maker-images/asian.png
index 33c0e57a4a..995c6fcb84 100644
Binary files a/apps/web/public/images/maker-images/asian.png and b/apps/web/public/images/maker-images/asian.png differ
diff --git a/apps/web/public/images/maker-images/cafe_dessert.png b/apps/web/public/images/maker-images/cafe_dessert.png
index 53287a4160..9ab021d214 100644
Binary files a/apps/web/public/images/maker-images/cafe_dessert.png and b/apps/web/public/images/maker-images/cafe_dessert.png differ
diff --git a/apps/web/public/images/maker-images/chicken.png b/apps/web/public/images/maker-images/chicken.png
index 753672319c..1704a30d1e 100644
Binary files a/apps/web/public/images/maker-images/chicken.png and b/apps/web/public/images/maker-images/chicken.png differ
diff --git a/apps/web/public/images/maker-images/chinese.png b/apps/web/public/images/maker-images/chinese.png
index 07406c933c..d714add94f 100644
Binary files a/apps/web/public/images/maker-images/chinese.png and b/apps/web/public/images/maker-images/chinese.png differ
diff --git a/apps/web/public/images/maker-images/cutlet_sashimi.png b/apps/web/public/images/maker-images/cutlet_sashimi.png
index 39fa9be35d..ec907eef53 100644
Binary files a/apps/web/public/images/maker-images/cutlet_sashimi.png and b/apps/web/public/images/maker-images/cutlet_sashimi.png differ
diff --git a/apps/web/public/images/maker-images/fastfood.png b/apps/web/public/images/maker-images/fastfood.png
index 4a4f3907fc..81a55986c5 100644
Binary files a/apps/web/public/images/maker-images/fastfood.png and b/apps/web/public/images/maker-images/fastfood.png differ
diff --git a/apps/web/public/images/maker-images/korean.png b/apps/web/public/images/maker-images/korean.png
index a2e9ac367a..ce61c5b449 100644
Binary files a/apps/web/public/images/maker-images/korean.png and b/apps/web/public/images/maker-images/korean.png differ
diff --git a/apps/web/public/images/maker-images/late_night.png b/apps/web/public/images/maker-images/late_night.png
index 6271d61f95..d6f0a2ba5b 100644
Binary files a/apps/web/public/images/maker-images/late_night.png and b/apps/web/public/images/maker-images/late_night.png differ
diff --git a/apps/web/public/images/maker-images/lunch_box.png b/apps/web/public/images/maker-images/lunch_box.png
index 68fbb4a580..dcdebbaa35 100644
Binary files a/apps/web/public/images/maker-images/lunch_box.png and b/apps/web/public/images/maker-images/lunch_box.png differ
diff --git a/apps/web/public/images/maker-images/meat_bbq.png b/apps/web/public/images/maker-images/meat_bbq.png
index 51a61929ec..79dcffd1eb 100644
Binary files a/apps/web/public/images/maker-images/meat_bbq.png and b/apps/web/public/images/maker-images/meat_bbq.png differ
diff --git a/apps/web/public/images/maker-images/pizza.png b/apps/web/public/images/maker-images/pizza.png
index 98e35d5544..625b5a72bb 100644
Binary files a/apps/web/public/images/maker-images/pizza.png and b/apps/web/public/images/maker-images/pizza.png differ
diff --git a/apps/web/public/images/maker-images/pork_feet.png b/apps/web/public/images/maker-images/pork_feet.png
index 7aa5e667f3..0edcf2e982 100644
Binary files a/apps/web/public/images/maker-images/pork_feet.png and b/apps/web/public/images/maker-images/pork_feet.png differ
diff --git a/apps/web/public/images/maker-images/seasonal.png b/apps/web/public/images/maker-images/seasonal.png
index 4fbf341ff4..bf813105f0 100644
Binary files a/apps/web/public/images/maker-images/seasonal.png and b/apps/web/public/images/maker-images/seasonal.png differ
diff --git a/apps/web/public/images/maker-images/snack_bar.png b/apps/web/public/images/maker-images/snack_bar.png
index 5d526be119..5906164a5a 100644
Binary files a/apps/web/public/images/maker-images/snack_bar.png and b/apps/web/public/images/maker-images/snack_bar.png differ
diff --git a/apps/web/public/images/maker-images/stew.png b/apps/web/public/images/maker-images/stew.png
index 364c475fad..b488885771 100644
Binary files a/apps/web/public/images/maker-images/stew.png and b/apps/web/public/images/maker-images/stew.png differ
diff --git a/apps/web/public/images/maker-images/trend.png b/apps/web/public/images/maker-images/trend.png
index 4dee46f1f0..bcf2a6e00c 100644
Binary files a/apps/web/public/images/maker-images/trend.png and b/apps/web/public/images/maker-images/trend.png differ
diff --git a/apps/web/public/images/maker-images/user_submitted.png b/apps/web/public/images/maker-images/user_submitted.png
index cd8a3dfcc4..91b7cf3169 100644
Binary files a/apps/web/public/images/maker-images/user_submitted.png and b/apps/web/public/images/maker-images/user_submitted.png differ
diff --git a/apps/web/public/images/maker-images/webp/seasonal.webp b/apps/web/public/images/maker-images/webp/seasonal.webp
index 0b9e422b5d..e51558f95d 100644
Binary files a/apps/web/public/images/maker-images/webp/seasonal.webp and b/apps/web/public/images/maker-images/webp/seasonal.webp differ
diff --git a/apps/web/public/images/maker-images/webp/trend.webp b/apps/web/public/images/maker-images/webp/trend.webp
index 6efead9b4f..050f791053 100644
Binary files a/apps/web/public/images/maker-images/webp/trend.webp and b/apps/web/public/images/maker-images/webp/trend.webp differ
diff --git a/apps/web/public/images/maker-images/webp/user_submitted.webp b/apps/web/public/images/maker-images/webp/user_submitted.webp
index ec02d679a6..bbd40246fe 100644
Binary files a/apps/web/public/images/maker-images/webp/user_submitted.webp and b/apps/web/public/images/maker-images/webp/user_submitted.webp differ
diff --git a/apps/web/public/images/maker-images/western.png b/apps/web/public/images/maker-images/western.png
index 7b06e1941e..2639e78508 100644
Binary files a/apps/web/public/images/maker-images/western.png and b/apps/web/public/images/maker-images/western.png differ
diff --git a/apps/web/public/images/stamp-clear-dark.png b/apps/web/public/images/stamp-clear-dark.png
index 482df3ba8d..5043f24868 100644
Binary files a/apps/web/public/images/stamp-clear-dark.png and b/apps/web/public/images/stamp-clear-dark.png differ
diff --git a/apps/web/public/images/stamp-clear-dark.webp b/apps/web/public/images/stamp-clear-dark.webp
new file mode 100644
index 0000000000..c06c09ce36
Binary files /dev/null and b/apps/web/public/images/stamp-clear-dark.webp differ
diff --git a/apps/web/public/images/stamp-clear.png b/apps/web/public/images/stamp-clear.png
index 5c2239bfb1..f2228c2a6a 100644
Binary files a/apps/web/public/images/stamp-clear.png and b/apps/web/public/images/stamp-clear.png differ
diff --git a/apps/web/public/images/stamp-clear.webp b/apps/web/public/images/stamp-clear.webp
new file mode 100644
index 0000000000..b8ce12b77a
Binary files /dev/null and b/apps/web/public/images/stamp-clear.webp differ
diff --git a/apps/web/public/images/ui-noise.png b/apps/web/public/images/ui-noise.png
new file mode 100644
index 0000000000..aa15284039
Binary files /dev/null and b/apps/web/public/images/ui-noise.png differ
diff --git a/apps/web/public/logo.webp b/apps/web/public/logo.webp
index bbc5fbcb37..b73c277955 100644
Binary files a/apps/web/public/logo.webp and b/apps/web/public/logo.webp differ
diff --git a/apps/web/tests-unit/admin-console-uiux-source.test.ts b/apps/web/tests-unit/admin-console-uiux-source.test.ts
index d148d82570..9e057d3c47 100644
--- a/apps/web/tests-unit/admin-console-uiux-source.test.ts
+++ b/apps/web/tests-unit/admin-console-uiux-source.test.ts
@@ -464,7 +464,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       '<main id="main-content" tabIndex={-1} className="h-full min-h-0 min-w-0 w-full">',
     );
     expect(mainLayoutSource).toContain(
-      'className="relative min-h-0 min-w-0 flex-1 overflow-hidden transition-[margin] duration-300"',
+      'className="relative min-h-0 min-w-0 flex-1 overflow-hidden"',
     );
     expect(overlayLayoutSource).toContain(
       'data-layout-primitives="viewport-shell overlay-stack"',
@@ -605,7 +605,6 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     for (const moduleId of [
       "overview",
       "routes",
-      "map-overlays",
       "restaurants",
       "restaurant-refresh-history",
       "submissions",
@@ -998,7 +997,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       (consoleSource.match(/loading: \(\) => null/g) ?? []).length,
     ).toBeGreaterThanOrEqual(7);
     expect(consoleSource).toContain(
-      "loading: () => <AdminEvaluationModuleStaticShell />",
+      "<AdminEvaluationModuleStaticShell />",
     );
     expect(consoleSource).toContain(
       'data-admin-sidebar-module-loading-evaluation="viewport-table"',
@@ -1276,11 +1275,12 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     expect(evaluationTableSource).toContain(
       'role="status" aria-busy="true" aria-label="맛집 검수 카드 로딩 중"',
     );
-    expect(evaluationTableSource).toContain("Array.from({ length: 4 }).map");
+    expect(evaluationTableSource).toContain("Array.from({ length: mobileSkeletonCount }).map");
     expect(evaluationTableSource).toContain(
-      "const desktopLoadingRows = Array.from({ length: 6 })",
+      "const desktopLoadingRows = Array.from({ length: desktopSkeletonCount })",
     );
-    expect(submissionListSource).toContain("Array.from({ length: 4 }).map");
+    expect(evaluationTableSource).toContain("Math.ceil((height - 48) / 72)");
+    expect(submissionListSource).toContain("Array.from({ length: submissionListSkeleton.count }).map");
     expect(submissionListSource).toContain(
       "grid gap-2 sm:grid-cols-[minmax(0,1fr)_80px_72px]",
     );
@@ -1449,7 +1449,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     );
     expect(homeSectionSource).not.toContain('id: "routes"');
     expect(opsSectionSource).toContain(
-      'getSidebarConsoleItems(["map-overlays", "users", "banners", "insights", "pipeline"])',
+      'getSidebarConsoleItems(["users", "banners", "insights", "pipeline"])',
     );
     expect(opsSectionSource).not.toContain('id: "routes"');
     expect(opsSectionSource).not.toContain('"storyboard"');
@@ -3419,7 +3419,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       '검수: ["restaurants", "restaurant-refresh-history", "submissions", "reviews"]',
     );
     expect(sidebarOrderSource).toContain(
-      '운영: ["map-overlays", "users", "banners", "insights", "pipeline"]',
+      '운영: ["users", "banners", "insights", "pipeline"]',
     );
     expect(sidebarOrderSource).toContain(
       '실험실: ["youtube-thumbnail-generator", "storyboard", "routes", "llm", "audit"]',
@@ -8156,9 +8156,8 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     expect(hydrationSmokeSource).toContain("/admin?module=routes");
     expect(hydrationSmokeSource).toContain("/admin?module=youtube-thumbnail-generator");
     expect(hydrationSmokeSource).toContain("/admin?module=audit");
-    expect(hydrationSmokeSource).toContain("/admin?module=map-overlays");
-    expect(hydrationSmokeSource).toContain("moduleId: 'map-overlays'");
-    expect(hydrationSmokeSource).toContain('data-admin-map-overlays-module="true"');
+    expect(hydrationSmokeSource).not.toContain("/admin?module=map-overlays");
+    expect(hydrationSmokeSource).not.toContain("moduleId: 'map-overlays'");
     expect(hydrationSmokeSource).toContain("minified react error");
     expect(hydrationSmokeSource).toContain("readySelector");
     expect(hydrationSmokeSource).toContain('data-admin-youtube-thumbnail-generator="true"');
@@ -8461,7 +8460,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     expect(preferenceRouteSource).toContain('from "@/lib/admin/sidebar-order"');
     expect(sidebarOrderSource).toContain("mergeSidebarItemsWithDefaultSlots");
     expect(sidebarOrderSource).toContain(
-      '운영: ["map-overlays", "users", "banners", "insights", "pipeline"]',
+      '운영: ["users", "banners", "insights", "pipeline"]',
     );
     expect(preferenceRouteSource).toContain("await requireAdmin()");
     expect(preferenceRouteSource.indexOf("await requireAdmin()")).toBeLessThan(
diff --git a/apps/web/tests-unit/admin-evaluation-responsive-css.test.ts b/apps/web/tests-unit/admin-evaluation-responsive-css.test.ts
index 4579f287d6..8486315ab8 100644
--- a/apps/web/tests-unit/admin-evaluation-responsive-css.test.ts
+++ b/apps/web/tests-unit/admin-evaluation-responsive-css.test.ts
@@ -319,9 +319,9 @@ describe("admin responsive CSS guard", () => {
     expect(rootCss).not.toContain("--tw-");
     expect(rootCss).not.toContain(".md\\:");
     expect(homeCss).not.toContain(ADMIN_SIDEBAR_MARKER);
-    expect(homeCss).toContain("mapOverlayFade_12s");
-    expect(homeCss).toContain("mapOverlayFade_3s");
-    expect(homeCss).toContain("mapOverlayFade_4s");
+    expect(homeCss).not.toContain("mapOverlayFade_12s");
+    expect(homeCss).not.toContain("mapOverlayFade_3s");
+    expect(homeCss).not.toContain("mapOverlayFade_4s");
     expect(Buffer.byteLength(homeCss)).toBeLessThanOrEqual(HOME_ROUTE_CSS_MAX_BYTES);
     expect(deferredCss).toContain(".scrollbar-hide");
     expect(detailCss.length).toBeGreaterThan(0);
diff --git a/apps/web/tests-unit/admin-evaluation-status-filter-options.test.ts b/apps/web/tests-unit/admin-evaluation-status-filter-options.test.ts
index 9b530aeaf4..7fd4e29da2 100644
--- a/apps/web/tests-unit/admin-evaluation-status-filter-options.test.ts
+++ b/apps/web/tests-unit/admin-evaluation-status-filter-options.test.ts
@@ -234,7 +234,7 @@ describe('PRIMARY_STATUS_FILTER_OPTIONS', () => {
     expect(adminOverviewSource).toContain('필터링: 집계 중 | 현 레코드 집계 중 | 삭제한 레코드 집계 중');
     expect(adminOverviewSource).not.toContain('필터링: <Skeleton');
     expect(adminOverviewSource).toContain('data-admin-evaluation-dynamic-loading-shell="true"');
-    expect(adminOverviewSource).toContain('loading: () => <AdminEvaluationModuleStaticShell />');
+    expect(adminOverviewSource).toContain('<AdminEvaluationModuleStaticShell />');
     expect(adminOverviewSource).toContain('정적인 관리자 데이터 검수 컨트롤은 바로 표시하고, 동적인 검수 데이터만 불러오는 중입니다.');
     expect(adminOverviewSource).toContain('data-admin-evaluation-static-loading-controls="true"');
     expect(pageSource).toContain("fetch('/api/admin/evaluations'");
diff --git a/apps/web/tests-unit/admin-map-overlays-ia-contract.test.ts b/apps/web/tests-unit/admin-map-overlays-ia-contract.test.ts
index a45f098058..2a25de13ff 100644
--- a/apps/web/tests-unit/admin-map-overlays-ia-contract.test.ts
+++ b/apps/web/tests-unit/admin-map-overlays-ia-contract.test.ts
@@ -9,37 +9,21 @@ function source(relativePath: string) {
 }
 
 describe('admin map overlays IA contract', () => {
-  test('admin routing exposes the map-overlays module id', () => {
+  test('admin routing no longer exposes the map-overlays module', () => {
     const routing = source('lib/admin/admin-module-routing.ts');
-
-    expect(routing).toContain('"map-overlays"');
-    expect(routing).toContain('ADMIN_CONSOLE_MODULE_IDS');
-  });
-
-  test('admin console adds 지도 오버레이 with required tabs and integrations', () => {
     const consoleSource = source('components/admin/AdminConsoleOverview.tsx');
 
-    expect(consoleSource).toContain('id: "map-overlays"');
-    expect(consoleSource).toContain('title: "지도 오버레이"');
-    expect(consoleSource).toContain('label: "수동 오버레이"');
-    expect(consoleSource).toContain('label: "트렌드 제안"');
-    expect(consoleSource).toContain('label: "트렌드 실행"');
-    expect(consoleSource).toContain('data-admin-map-overlays-module="true"');
-    expect(consoleSource).toContain('data-admin-map-overlays-tabs="manual trend-proposals trend-runs"');
-    expect(consoleSource).toContain('data-admin-map-overlays-tab={tab.id}');
-    expect(consoleSource).toContain('<TrendProposalQueue />');
-    expect(consoleSource).toContain('/api/admin/map-overlays/preview');
-    expect(consoleSource).toContain('/api/admin/map-overlays/apply');
-    expect(consoleSource).toContain('/api/admin/trend-job-requests');
-    expect(consoleSource).toContain('컬렉터/스코어러를 inline 실행하지 않습니다');
+    expect(routing).toContain('ADMIN_CONSOLE_MODULE_IDS');
+    expect(routing).not.toContain('"map-overlays"');
+    expect(consoleSource).not.toContain('title: "지도 오버레이"');
+    expect(consoleSource).not.toContain('data-admin-map-overlays-module="true"');
+    expect(consoleSource).not.toContain('<TrendProposalQueue />');
   });
 
-  test('map overlay IA remains admin-only and preserves public/admin split', () => {
-    const consoleSource = source('components/admin/AdminConsoleOverview.tsx');
+  test('public home still does not call the admin map overlay API', () => {
     const publicHome = source('app/home-client.tsx');
     const mapSurface = source('components/map/naver-map-surface.tsx');
 
-    expect(consoleSource).toContain('admin_restaurant_map_overlays');
     expect(publicHome).not.toContain('/api/admin/map-overlays');
     expect(mapSurface).not.toContain('/api/admin/map-overlays');
   });
diff --git a/apps/web/tests-unit/admin-sidebar-order.test.ts b/apps/web/tests-unit/admin-sidebar-order.test.ts
index 22705989f2..631d25e779 100644
--- a/apps/web/tests-unit/admin-sidebar-order.test.ts
+++ b/apps/web/tests-unit/admin-sidebar-order.test.ts
@@ -16,7 +16,6 @@ describe("admin sidebar order normalization", () => {
     ]);
 
     expect(DEFAULT_ADMIN_SIDEBAR_ORDER.items["운영"]).toEqual([
-      "map-overlays",
       "users",
       "banners",
       "insights",
@@ -50,7 +49,7 @@ describe("admin sidebar order normalization", () => {
     expect(ADMIN_CONSOLE_MODULE_IDS.slice(0, 3)).toEqual([
       "overview",
       "routes",
-      "map-overlays",
+      "restaurants",
     ]);
   });
 
@@ -73,7 +72,6 @@ describe("admin sidebar order normalization", () => {
     ]);
 
     expect(normalized.items["운영"]).toEqual([
-      "map-overlays",
       "users",
       "banners",
       "insights",
@@ -107,7 +105,6 @@ describe("admin sidebar order normalization", () => {
     ]);
 
     expect(normalized.items["운영"]).toEqual([
-      "map-overlays",
       "banners",
       "users",
       "insights",
diff --git a/apps/web/tests-unit/device-location-privacy.test.ts b/apps/web/tests-unit/device-location-privacy.test.ts
index 2738f34ad7..c66d67d031 100644
--- a/apps/web/tests-unit/device-location-privacy.test.ts
+++ b/apps/web/tests-unit/device-location-privacy.test.ts
@@ -477,7 +477,7 @@ test('home client keeps the capability boundary before disclosure and confines r
     '현재 위치 좌표는 현재 React 메모리에만 보관되며 Tzudong에 저장되지 않습니다. 브라우저 지도 렌더링 및 화면 이동은 승인된 지도 제공자 경계를 통과할 수 있습니다.',
   );
   expect(homeClientSource).toContain(
-    '현재 위치 기능은 운영자 위치 증빙 확인이 완료될 때까지 사용할 수 없어요.',
+    '현재 위치를 지금 표시하지 못했어요. 잠시 후 다시 시도해 주세요.',
   );
   expect(homeClientSource).toContain('function describeDeviceLocationFailure');
   expect(homeClientSource).toContain('위치 권한이 거부됐어요');
diff --git a/apps/web/tests-unit/frontend-unused-route-compatibility.test.ts b/apps/web/tests-unit/frontend-unused-route-compatibility.test.ts
index da22cec5db..a11c2567bf 100644
--- a/apps/web/tests-unit/frontend-unused-route-compatibility.test.ts
+++ b/apps/web/tests-unit/frontend-unused-route-compatibility.test.ts
@@ -171,7 +171,7 @@ describe('frontend unused route compatibility', () => {
         );
         expect(adminConsoleSource).toContain('return null;');
         expect(adminConsoleSource).not.toContain('<GlobalLoader');
-        expect(adminConsoleSource).toContain('<AdminBannerModule key="admin-banners" embedded />');
+        expect(adminConsoleSource).toContain('<AdminBannerModule key="admin-banners" embedded');
         expect(adminConsoleSource).not.toContain('AdminAnnouncementModule');
         expect(adminConsoleSource).not.toContain('adminActionsMode="inline"');
         expect(adminConsoleSource).not.toContain('id: "announcements"');
diff --git a/apps/web/tests-unit/header-bookmark-notification-ux-source.test.ts b/apps/web/tests-unit/header-bookmark-notification-ux-source.test.ts
index 221bbe2087..c776ebf6c1 100644
--- a/apps/web/tests-unit/header-bookmark-notification-ux-source.test.ts
+++ b/apps/web/tests-unit/header-bookmark-notification-ux-source.test.ts
@@ -37,11 +37,8 @@ describe('header bookmark and notification UX source contracts', () => {
     expect(bookmarkSource).toContain('북마크한 맛집이 없습니다');
     expect(bookmarkSource).toContain('MapPin className="h-8 w-8 shrink-0 rounded-full bg-primary/10 p-2 text-primary');
     expect(leftPanelBookmarkSource).toContain('onClose?: () => void;');
-    expect(leftPanelBookmarkSource).toContain('aria-label="북마크 패널 닫기"');
-    expect(leftPanelBookmarkSource).toContain('className="h-9 w-9 rounded-full hover:bg-muted"');
-    expect(leftPanelBookmarkSource).toContain('flex flex-wrap items-start justify-between gap-2');
-    expect(leftPanelBookmarkSource).toContain('basis-[min(10rem,100%)]');
-    expect(leftPanelBookmarkSource).toContain('text-pretty');
+    expect(leftPanelBookmarkSource).toContain('closeLabel="북마크 패널 닫기"');
+    expect(leftPanelBookmarkSource).toContain('<MapPanelHeader');
     expect(leftPanelBookmarkSource).toContain(
       'className="group rounded-xl border border-border bg-card shadow-sm transition-colors hover:bg-accent"',
     );
@@ -89,17 +86,9 @@ describe('header bookmark and notification UX source contracts', () => {
     expect(headerSource).toContain('router.push(`/?r=${restaurantId}&z=13`)');
     expect(headerSource).toContain("router.push('/?panel=announcement')");
     expect(leftPanelNotificationSource).toContain('onClose?: () => void;');
-    expect(leftPanelNotificationSource).toContain('aria-label="알림 패널 닫기"');
-    expect(leftPanelNotificationSource).toContain('className="h-9 w-9 rounded-full hover:bg-muted"');
-    expect(leftPanelNotificationSource).toContain('flex flex-wrap items-start justify-between gap-2');
-    expect(leftPanelNotificationSource).toContain('className="min-w-0 flex-1 basis-[min(10rem,100%)]"');
-    expect(leftPanelNotificationSource).toContain('basis-[min(10rem,100%)]');
-    expect(leftPanelNotificationSource).toContain('className="mt-1 max-w-full text-pretty text-xs leading-5 text-muted-foreground"');
-    expect(leftPanelNotificationSource).toContain('리뷰·맛집·공지 소식을 바로 확인해요.');
-    expect(leftPanelNotificationSource).toContain('text-pretty');
-    expect(leftPanelNotificationSource).toContain('variant="secondary"');
-    expect(leftPanelNotificationSource).toContain('{isLoading ? "확인 중" : `${notifications.length}개`}');
-    expect(leftPanelNotificationSource).toContain('className="h-7 rounded-full px-2 text-2xs"');
+    expect(leftPanelNotificationSource).toContain('closeLabel="알림 패널 닫기"');
+    expect(leftPanelNotificationSource).toContain('<MapPanelHeader');
+    expect(leftPanelNotificationSource).toContain('리뷰, 맛집, 공지 소식을 확인해요');
     expect(leftPanelNotificationSource).toContain(
       '"group rounded-xl border border-border bg-card shadow-sm transition-colors hover:bg-accent"',
     );
diff --git a/apps/web/tests-unit/home-map-contextual-restaurants-source.test.ts b/apps/web/tests-unit/home-map-contextual-restaurants-source.test.ts
index a02d586390..05eab6b4ff 100644
--- a/apps/web/tests-unit/home-map-contextual-restaurants-source.test.ts
+++ b/apps/web/tests-unit/home-map-contextual-restaurants-source.test.ts
@@ -184,7 +184,7 @@ describe('home map contextual visible-marker restaurants', () => {
     expect(mobileOverlaySource).toContain('aria-label="맛집 목록 다시 열기"');
     expect(mobileOverlaySource).toContain('title="맛집 목록 다시 열기"');
     expect(mobileOverlaySource).toContain('h-12 w-12 rounded-full shadow-sm');
-    expect(mobileOverlaySource).toContain('bg-background/95 hover:bg-secondary text-foreground border-border/70 backdrop-blur-sm');
+    expect(mobileOverlaySource).toContain('bg-background/95 hover:bg-secondary text-foreground border-border/70');
     expect(mobileOverlaySource).toContain('<List className="h-5 w-5" aria-hidden="true" />');
     expect(mobileOverlaySource).not.toContain('목록 보기 ·');
     expect(mobileOverlaySource).not.toContain('absolute -right-1 -top-1 rounded-full bg-primary');
diff --git a/apps/web/tests-unit/home-map-mode-filter.test.ts b/apps/web/tests-unit/home-map-mode-filter.test.ts
index 8729d7c813..32936f3735 100644
--- a/apps/web/tests-unit/home-map-mode-filter.test.ts
+++ b/apps/web/tests-unit/home-map-mode-filter.test.ts
@@ -5,6 +5,7 @@ import { OVERSEAS_REGIONS } from '../constants/overseas-regions';
 import type { Restaurant } from '../types/restaurant';
 import {
   filterHomeMapRestaurantsByMode,
+  getLastModeFilterExaminationCount,
   getOverseasCountryKeywords,
   isOverseasCoordinate,
   resolveHomeMapAddressText,
@@ -143,15 +144,18 @@ describe('home map mode filter', () => {
   });
 
   test('빈 목록과 빈 주소는 안전하게 처리한다', () => {
-    expect(filterHomeMapRestaurantsByMode([], 'domestic', null)).toEqual([]);
-    expect(filterHomeMapRestaurantsByMode([], 'overseas', null)).toEqual([]);
+    const empty: ReturnType<typeof asRestaurants> = [];
+    expect(filterHomeMapRestaurantsByMode(empty, 'domestic', null)).toBe(empty);
 
     const blank = asRestaurants([
       { id: 'blank', road_address: null, jibun_address: undefined, english_address: '' },
     ]);
 
     expect(resolveHomeMapAddressText(blank[0]!)).toBe('  ');
-    expect(filterHomeMapRestaurantsByMode(blank, 'domestic', null)).toHaveLength(1);
+    expect(filterHomeMapRestaurantsByMode(blank, 'domestic', null)).toBe(blank);
+    expect(getLastModeFilterExaminationCount()).toBe(1);
+    expect(filterHomeMapRestaurantsByMode(blank, 'domestic', null)).toBe(blank);
+    expect(getLastModeFilterExaminationCount()).toBe(0);
     expect(filterHomeMapRestaurantsByMode(blank, 'overseas', null)).toHaveLength(0);
   });
 
@@ -217,6 +221,11 @@ describe('home map mode filter', () => {
     expect(resolveHomeMapAddressText(restaurant)).toBe('bangkok 서울 ');
     expect(filterHomeMapRestaurantsByMode([restaurant], 'domestic', null)).toHaveLength(0);
     expect(filterHomeMapRestaurantsByMode([restaurant], 'overseas', null)).toHaveLength(1);
+    const sameList = [restaurant];
+    row.road_address = '서울';
+    expect(filterHomeMapRestaurantsByMode(sameList, 'domestic', null)).toHaveLength(1);
+    row.road_address = 'Bangkok';
+    expect(filterHomeMapRestaurantsByMode(sameList, 'domestic', null)).toHaveLength(0);
   });
 
   test('모드 분류는 컴포넌트 밖 헬퍼를 쓰고 식당별 키워드 includes 루프를 남기지 않는다', () => {
diff --git a/apps/web/tests-unit/home-map-swipe-restaurants.test.ts b/apps/web/tests-unit/home-map-swipe-restaurants.test.ts
index 87a6d57c07..c0a0d201b9 100644
--- a/apps/web/tests-unit/home-map-swipe-restaurants.test.ts
+++ b/apps/web/tests-unit/home-map-swipe-restaurants.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, test } from 'bun:test';
 import {
   dedupeHomeMapRestaurants,
+  getLastDedupeExaminationCount,
   hasSameSwipeCoordinates,
   isSameRestaurantForSwipe,
 } from '../lib/home-map-swipe-restaurants';
@@ -148,7 +149,11 @@ describe('home map swipe restaurant dedupe', () => {
   test('maps an empty list, a single row, and falsy rows without throwing', () => {
     expect(dedupeHomeMapRestaurants([])).toEqual([]);
     const only = makeRestaurant({ id: 'only' });
-    expect(dedupeHomeMapRestaurants([only])).toEqual([only]);
+    const onlyList = [only];
+    expect(dedupeHomeMapRestaurants(onlyList)).toBe(onlyList);
+    expect(getLastDedupeExaminationCount()).toBe(1);
+    expect(dedupeHomeMapRestaurants(onlyList)).toBe(onlyList);
+    expect(getLastDedupeExaminationCount()).toBe(0);
     expect(dedupeHomeMapRestaurants([null as unknown as Restaurant, only]).map((row) => row.id))
       .toEqual(['only']);
   });
diff --git a/apps/web/tests-unit/map-view-marker-helpers.test.ts b/apps/web/tests-unit/map-view-marker-helpers.test.ts
index 8b4dde2962..73a78f36cc 100644
--- a/apps/web/tests-unit/map-view-marker-helpers.test.ts
+++ b/apps/web/tests-unit/map-view-marker-helpers.test.ts
@@ -50,7 +50,7 @@ describe('map view marker helpers', () => {
 
             expect(html).toContain(`src="${imagePath}"`);
             expect(html).toContain('alt="테스트 식당"');
-            expect(html).toContain('class="relative h-[42px] w-[42px] cursor-pointer transition-all duration-300 drop-shadow-md animate-bounce hover:scale-125"');
+            expect(html).toContain('class="relative h-[42px] w-[42px] cursor-pointer hover:scale-125"');
             expect(html).toContain('class="h-full w-full object-contain"');
             expect(html).toContain('draggable="false"');
             expect(html).not.toContain('style=');
@@ -127,7 +127,7 @@ describe('map view marker helpers', () => {
         } as unknown as HTMLElement;
 
         expect(applyMapViewMarkerSelectedState({ isSelected: true, markerElement })).toBe(true);
-        expect([...classNames].sort()).toEqual(['animate-bounce', 'h-[42px]', 'w-[42px]']);
+        expect([...classNames].sort()).toEqual(['h-[42px]', 'w-[42px]']);
         expect('style' in innerDiv).toBe(false);
 
         expect(applyMapViewMarkerSelectedState({ isSelected: false, markerElement })).toBe(true);
diff --git a/apps/web/tests-unit/marker-pool.test.ts b/apps/web/tests-unit/marker-pool.test.ts
index d8b2785747..b4cee96488 100644
--- a/apps/web/tests-unit/marker-pool.test.ts
+++ b/apps/web/tests-unit/marker-pool.test.ts
@@ -233,14 +233,8 @@ describe('marker pool', () => {
 
       markerPool.release('restaurant-1');
       expect(markerPool.has('restaurant-1')).toBe(false);
-      expect(marker.classes.has('marker-fade-out')).toBe(true);
-      expect(marker.getMap()).toBe('map-1');
-      expect(markerPool.getStats().poolSize).toBe(0);
-      expect(timers.callbacks).toHaveLength(1);
-
-      timers.flush();
-      expect(marker.getMap()).toBeNull();
       expect(marker.classes.has('marker-fade-out')).toBe(false);
+      expect(marker.getMap()).toBeNull();
       expect(markerPool.getStats()).toMatchObject({ released: 1, poolSize: 1 });
 
       const reused = markerPool.acquire(
@@ -259,6 +253,38 @@ describe('marker pool', () => {
     }
   });
 
+  test('reclaims a fading marker instead of creating a second node', () => {
+    const timers = captureTimeouts();
+    try {
+      const marker = markerPool.acquire(
+        'restaurant-1',
+        makePosition('p1'),
+        { content: 'icon-1', anchor: null },
+        'map-1',
+      ) as unknown as FakeMarker;
+
+      markerPool.release('restaurant-1');
+      expect(marker.getMap()).toBeNull();
+      const reclaimed = markerPool.acquire(
+        'restaurant-1',
+        makePosition('p1'),
+        { content: 'icon-1', anchor: null },
+        'map-1',
+      ) as unknown as FakeMarker;
+
+      expect(reclaimed).toBe(marker);
+      expect(createdMarkers).toHaveLength(1);
+      expect(marker.classes.has('marker-fade-out')).toBe(false);
+      expect(marker.getMap()).toBe('map-1');
+      expect(markerPool.getStats()).toMatchObject({ created: 1, reused: 1, activeCount: 1, poolSize: 0 });
+
+      timers.flush();
+      expect(marker.getMap()).toBe('map-1');
+    } finally {
+      timers.restore();
+    }
+  });
+
   test('updates active markers and treats unknown ids as safe no-ops', () => {
     const marker = markerPool.acquire(
       'restaurant-1',
@@ -303,8 +329,6 @@ describe('marker pool', () => {
 
       markerPool.releaseAll();
       expect(markerPool.getStats().activeCount).toBe(0);
-      expect(timers.callbacks).toHaveLength(3);
-      timers.flush();
       expect(markerPool.getStats()).toMatchObject({ released: 3, poolSize: 3 });
     } finally {
       timers.restore();
@@ -320,10 +344,11 @@ describe('marker pool', () => {
       markerPool.clear();
       expect(markerPool.getStats().poolSize).toBe(0);
       expect(markerPool.getStats().activeCount).toBe(0);
+      expect(markerPool.getStats().released).toBe(1);
 
       timers.flush();
       expect(markerPool.getStats().poolSize).toBe(0);
-      expect(markerPool.getStats().released).toBe(0);
+      expect(markerPool.getStats().released).toBe(1);
     } finally {
       timers.restore();
     }
@@ -342,4 +367,85 @@ describe('marker pool', () => {
       timers.restore();
     }
   });
+
+  test('keeps the category image when only the review bubble changes', () => {
+    const inserted: unknown[] = [];
+    const image = {
+      getAttribute: (name: string) => (name === 'src' ? '/marker.webp' : null),
+    };
+    const markerNode = {
+      getAttribute: (name: string) => (name === 'style' ? 'width:32px' : null),
+      querySelector: (selector: string) => (selector === 'img' ? image : null),
+      querySelectorAll: () => [],
+      insertBefore: (node: unknown) => {
+        inserted.push(node);
+      },
+      parentElement: null,
+    };
+    const element = {
+      querySelector: (selector: string) => (
+        selector === '[data-testid="marker"]' ? markerNode : null
+      ),
+      classList: FakeMarker.prototype ? {
+        add: () => undefined,
+        remove: () => undefined,
+      } : undefined,
+      style: { opacity: '' },
+    };
+
+    class BubbleMarker extends FakeMarker {
+      getElement() {
+        return element as unknown as HTMLElement;
+      }
+    }
+
+    const maps = (globalThis as { window: { naver: { maps: { Marker: typeof FakeMarker } } } }).window.naver.maps;
+    maps.Marker = BubbleMarker as unknown as typeof FakeMarker;
+
+    const bubble = { id: 'bubble' };
+    const previousDocument = (globalThis as { document?: Document }).document;
+    (globalThis as { document?: unknown }).document = {
+      createElement() {
+        const content = {
+          querySelector(selector: string) {
+            if (selector === '[data-testid="marker"]') {
+              return {
+                getAttribute: (name: string) => (name === 'style' ? 'width:32px' : null),
+                querySelector: (inner: string) => (inner === 'img' ? image : null),
+              };
+            }
+            if (selector === '[data-visible-marker-review-bubble="true"]') return bubble;
+            return null;
+          },
+        };
+        return { content, innerHTML: '' };
+      },
+    };
+
+    const base = '<div data-testid="marker" style="width:32px"><img src="/marker.webp"></div>';
+    const next = `<div data-visible-marker-review-bubble="true"></div>${base}`;
+
+    try {
+      const marker = markerPool.acquire(
+        'restaurant-bubble',
+        makePosition('p'),
+        { content: base, anchor: { x: 1, y: 1 } },
+        'map',
+      ) as unknown as FakeMarker;
+
+      markerPool.acquire(
+        'restaurant-bubble',
+        makePosition('p'),
+        { content: next, anchor: { x: 1, y: 1 } },
+        'map',
+      );
+
+      expect(marker.setIconCalls).toBe(0);
+      expect(inserted).toEqual([bubble]);
+      expect(marker.getIcon().content).toBe(next);
+    } finally {
+      (globalThis as { document?: Document }).document = previousDocument;
+      installFakeNaverMaps();
+    }
+  });
 });
diff --git a/apps/web/tests-unit/mobile-desktop-parity-source.test.ts b/apps/web/tests-unit/mobile-desktop-parity-source.test.ts
index 6ead37b0e0..01687cf94f 100644
--- a/apps/web/tests-unit/mobile-desktop-parity-source.test.ts
+++ b/apps/web/tests-unit/mobile-desktop-parity-source.test.ts
@@ -460,7 +460,7 @@ describe("mobile and desktop parity source contracts", () => {
       "rounded-full border border-border bg-background/95",
     );
     expect(homeDesktopControlPanelSource).toContain(
-      "pointer-events-auto flex items-center gap-1.5 min-h-11 rounded-full shadow-sm bg-background/95 backdrop-blur-sm border border-border px-1.5",
+      "pointer-events-auto flex items-center gap-1.5 min-h-11 rounded-full shadow-sm bg-background/95 border border-border px-1.5",
     );
     expect(homeDesktopControlPanelSource).toContain(
       "flex-1 h-9 rounded-full flex items-center gap-2 px-2 min-w-0",
diff --git a/apps/web/tests-unit/mobile-home-map-regressions.test.ts b/apps/web/tests-unit/mobile-home-map-regressions.test.ts
index ff0d510531..28db3c4c8a 100644
--- a/apps/web/tests-unit/mobile-home-map-regressions.test.ts
+++ b/apps/web/tests-unit/mobile-home-map-regressions.test.ts
@@ -258,7 +258,8 @@ describe('mobile home map regression guards', () => {
         expect(naverMapSource).toContain('const isSelectionClearedByPanelClose =');
         expect(naverMapSource).toContain('if (isSelectionClearedByPanelClose) {');
         expect(naverMapSource).toContain('if (isSelectionChanged && currentSelectedId) {');
-        expect(naverMapSource).toContain("map.panTo(newCenterLatLng, { duration: 340, easing: 'easeOutCubic' });");
+        expect(naverMapSource).toContain("map.setCenter(newCenterLatLng);");
+        expect(naverMapSource).not.toContain("map.panTo(newCenterLatLng, { duration: 340, easing: 'easeOutCubic' });");
         expect(naverMapSource).toContain('Number.isNaN(urlZoom)');
 
         expect(naverMapSource).toContain('onMapInteraction?: () => void;');
diff --git a/apps/web/tests-unit/mobile-home-search-selection.test.ts b/apps/web/tests-unit/mobile-home-search-selection.test.ts
index aae6013447..93e2c091cc 100644
--- a/apps/web/tests-unit/mobile-home-search-selection.test.ts
+++ b/apps/web/tests-unit/mobile-home-search-selection.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, test } from 'bun:test';
 import type { Restaurant } from '../types/restaurant';
 import {
     buildPostSearchSwipeCandidates,
+    getNearestFallbackScanCount,
     buildRestaurantsForSwipe,
     getActiveSearchedRestaurant,
     isSameRestaurantSelection,
@@ -170,11 +171,12 @@ describe('mobile home search selection helpers', () => {
     test('does not duplicate active searched restaurant already present in display ids', () => {
         const searchedRestaurant = makeRestaurant({ id: 'search-1' });
 
+        const displayRestaurants = [searchedRestaurant];
         expect(buildRestaurantsForSwipe({
             activeSearchedRestaurant: searchedRestaurant,
             displayRestaurantIds: new Set([searchedRestaurant.id]),
-            displayRestaurants: [searchedRestaurant],
-        }).map((restaurant) => restaurant.id)).toEqual(['search-1']);
+            displayRestaurants,
+        })).toBe(displayRestaurants);
     });
 
     test('keeps selected search result in swipe candidates after search ownership is released', () => {
@@ -232,4 +234,24 @@ describe('mobile home search selection helpers', () => {
             }).map((restaurant) => restaurant.id)
         ).toEqual(['search-1', 'nearest-restaurant']);
     });
+
+    test('reuses the nearest fallback when the list and visible restaurant are unchanged', () => {
+        const searchedRestaurant = makeRestaurant({ id: 'search-1', lat: 37.5665, lng: 126.978 });
+        const nearestRestaurant = makeRestaurant({ id: 'nearest-restaurant', lat: 37.5661, lng: 126.9772 });
+        const allRestaurants = [searchedRestaurant, nearestRestaurant];
+        const scansBefore = getNearestFallbackScanCount();
+
+        buildPostSearchSwipeCandidates({
+            visibleRestaurants: [searchedRestaurant],
+            allRestaurants,
+            activeSearchedRestaurant: searchedRestaurant,
+        });
+        buildPostSearchSwipeCandidates({
+            visibleRestaurants: [searchedRestaurant],
+            allRestaurants,
+            activeSearchedRestaurant: searchedRestaurant,
+        });
+
+        expect(getNearestFallbackScanCount()).toBe(scansBefore + 1);
+    });
 });
diff --git a/apps/web/tests-unit/mobile-sheet-layout.test.ts b/apps/web/tests-unit/mobile-sheet-layout.test.ts
new file mode 100644
index 0000000000..72158e885a
--- /dev/null
+++ b/apps/web/tests-unit/mobile-sheet-layout.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, test } from 'bun:test';
+import { snapHeaderHideProgress } from '../lib/mobile-sheet-layout';
+
+describe('mobile sheet header progress', () => {
+    test('keeps the header in place until the sheet is fully expanded', () => {
+        expect(snapHeaderHideProgress(0)).toBe(0);
+        expect(snapHeaderHideProgress(0.5)).toBe(0);
+        expect(snapHeaderHideProgress(0.998)).toBe(0);
+        expect(snapHeaderHideProgress(1)).toBe(1);
+        expect(snapHeaderHideProgress(2)).toBe(1);
+    });
+});
diff --git a/apps/web/tests-unit/mypage-mobile-cleanup-contract.test.ts b/apps/web/tests-unit/mypage-mobile-cleanup-contract.test.ts
index 9ad662f434..dc71d1e3f2 100644
--- a/apps/web/tests-unit/mypage-mobile-cleanup-contract.test.ts
+++ b/apps/web/tests-unit/mypage-mobile-cleanup-contract.test.ts
@@ -20,7 +20,7 @@ describe("mypage mobile cleanup source contracts", () => {
     const topActionsSource = source("components/mypage/MyPageTopActions.tsx");
     const mapUserMenuSource = source("components/home/HomeMapUserMenu.tsx");
     const mapUserButtonClass =
-      "h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-sm backdrop-blur-sm transition-colors hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
+      "h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-sm hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
     const mapMenuItemClass =
       "cursor-pointer rounded-xl px-3 py-2.5 text-sm font-medium text-foreground whitespace-nowrap focus:bg-accent focus:text-foreground";
     const mapMenuContentClass =
@@ -54,7 +54,7 @@ describe("mypage mobile cleanup source contracts", () => {
     expect(topActionsSource).toContain('data-mypage-user-menu="true"');
     expect(mapUserMenuSource).toContain(mapUserButtonClass);
     expect(topActionsSource).toContain(
-      "h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-lg backdrop-blur-sm transition-colors hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+      "h-11 w-11 rounded-full border border-border bg-background/95 p-0 shadow-lg hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
     );
     expect(mapUserMenuSource).toContain(mapMenuItemClass);
     expect(topActionsSource).toContain(mapMenuItemClass);
@@ -137,10 +137,7 @@ describe("mypage mobile cleanup source contracts", () => {
       'data-mypage-profile-identity="standard"',
     );
     expect(profileSource).toContain("rounded-full border-2 border-border shadow-sm");
-    expect(profileSource).toContain("transition-[border-color,box-shadow]");
-    expect(profileSource).toContain(
-      "border-2 border-border shadow-sm transition-[border-color,box-shadow]",
-    );
+    expect(profileSource).not.toContain("transition-[border-color,box-shadow]");
     expect(profileSource).toContain("grid w-full grid-cols-3 gap-2 pt-2");
     expect(profileSource).toContain("useUserProfile");
     expect(profileSource).toContain("userProfile?.tier");
diff --git a/apps/web/tests-unit/naver-map-cluster-visuals.test.ts b/apps/web/tests-unit/naver-map-cluster-visuals.test.ts
index 3afc23ced2..49181f494f 100644
--- a/apps/web/tests-unit/naver-map-cluster-visuals.test.ts
+++ b/apps/web/tests-unit/naver-map-cluster-visuals.test.ts
@@ -7,6 +7,7 @@ import {
     buildNaverClusterMarkerRenderPlan,
     getClusterVisualKey,
     getNaverClusterMarkerVisual,
+    shouldReplaceNaverMarkerIcon,
 } from '../lib/naver-map-cluster-visuals';
 
 describe('naver map cluster visuals', () => {
@@ -33,6 +34,21 @@ describe('naver map cluster visuals', () => {
         expect(html).toContain('/images/maker-images/webp/korean.webp');
         expect(html).toContain('/images/maker-images/korean.png');
         expect(html).toContain('type="image/webp"');
+        const categories = ['한식', '분식'];
+        const first = buildClusterMarkerContent({
+            categories,
+            count: 4,
+            currentIndex: 0,
+            lat: 37.5,
+            lng: 127.0,
+        });
+        expect(buildClusterMarkerContent({
+            categories,
+            count: 4,
+            currentIndex: 0,
+            lat: 37.51,
+            lng: 127.01,
+        })).toBe(first);
     });
 
     test('returns naver cluster marker visual payload', () => {
@@ -46,6 +62,21 @@ describe('naver map cluster visuals', () => {
         expect(visual.anchor).toEqual({ x: 24, y: 24 });
         expect(visual.content).toContain('/images/maker-images/webp/korean.webp');
         expect(visual.content).toContain('/images/maker-images/korean.png');
+        const categories = ['한식'];
+        const first = getNaverClusterMarkerVisual({
+            categories,
+            count: 3,
+            currentIndex: 0,
+            lat: 37.5,
+            lng: 127.0,
+        });
+        expect(getNaverClusterMarkerVisual({
+            categories,
+            count: 3,
+            currentIndex: 0,
+            lat: 37.6,
+            lng: 127.2,
+        })).toBe(first);
     });
 
     test('builds cluster marker render plan from position and current animation index', () => {
@@ -57,6 +88,19 @@ describe('naver map cluster visuals', () => {
         });
 
         expect(plan.position).toEqual({ lat: 37.6, lng: 127.1 });
+        const categories = ['분식'];
+        const first = buildNaverClusterMarkerRenderPlan({
+            categories,
+            count: 5,
+            currentIndex: 0,
+            position: { lat: 37.6, lng: 127.1 },
+        });
+        expect(buildNaverClusterMarkerRenderPlan({
+            categories,
+            count: 5,
+            currentIndex: 0,
+            position: { lat: 37.6, lng: 127.1 },
+        })).toBe(first);
         expect(plan.anchor).toEqual({ x: 24, y: 24 });
         expect(plan.content).toContain('5');
         expect(plan.content).toContain('/images/maker-images/webp/snack_bar.webp');
@@ -84,4 +128,11 @@ describe('naver map cluster visuals', () => {
         expect(plan.content).toContain('/images/maker-images/webp/korean.webp');
         expect(plan.content).toContain('/images/maker-images/korean.png');
     });
+
+    test('skips a marker icon write when the content and anchor are unchanged', () => {
+        const icon = { content: '<div>same</div>', anchor: { x: 24, y: 24 } };
+        expect(shouldReplaceNaverMarkerIcon(icon, icon)).toBe(false);
+        expect(shouldReplaceNaverMarkerIcon(icon, { ...icon, content: '<div>next</div>' })).toBe(true);
+        expect(shouldReplaceNaverMarkerIcon(null, icon)).toBe(true);
+    });
 });
diff --git a/apps/web/tests-unit/naver-map-marker-visuals.test.ts b/apps/web/tests-unit/naver-map-marker-visuals.test.ts
index ebdc9c6dce..1b11f4d524 100644
--- a/apps/web/tests-unit/naver-map-marker-visuals.test.ts
+++ b/apps/web/tests-unit/naver-map-marker-visuals.test.ts
@@ -3,6 +3,14 @@ import { describe, expect, test } from 'bun:test';
 import { getNaverIndividualMarkerVisual } from '../lib/naver-map-marker-visuals';
 
 describe('naver map marker visuals', () => {
+    test('reuses the visual for the same restaurant until a displayed field changes', () => {
+        const restaurant = { categories: ['한식'], category: [] as string[] };
+        const first = getNaverIndividualMarkerVisual(restaurant, false);
+        expect(getNaverIndividualMarkerVisual(restaurant, false)).toBe(first);
+        restaurant.categories = ['분식'];
+        expect(getNaverIndividualMarkerVisual(restaurant, false).content).toContain('snack_bar');
+    });
+
     test('returns selected marker payload', () => {
         const visual = getNaverIndividualMarkerVisual({ categories: ['한식'], category: [] }, true);
         expect(visual.anchor).toEqual({ x: 18, y: 18 });
diff --git a/apps/web/tests-unit/naver-map-overlap-helpers.test.ts b/apps/web/tests-unit/naver-map-overlap-helpers.test.ts
index b2ce8dacbe..1c8d9e0d99 100644
--- a/apps/web/tests-unit/naver-map-overlap-helpers.test.ts
+++ b/apps/web/tests-unit/naver-map-overlap-helpers.test.ts
@@ -4,6 +4,9 @@ import {
     buildNaverOverlappingMarkerKey,
     buildNaverOverlappingMarkerOffsets,
     resolveNaverOverlappingMarkerPosition,
+    reuseMarkerLatLng,
+    reuseMarkerAnchor,
+    reuseProjectedLatLng,
 } from '../lib/naver-map-overlap-helpers';
 
 describe('naver map overlap helpers', () => {
@@ -72,4 +75,35 @@ describe('naver map overlap helpers', () => {
             },
         })).toBe(basePosition);
     });
+
+    test('reuses a marker position when latitude and longitude are unchanged', () => {
+        const current = { lat: () => 37.5, lng: () => 127.1 };
+        expect(reuseMarkerLatLng(current, 37.5, 127.1, () => ({ created: true }))).toBe(current);
+        expect(reuseMarkerLatLng(current, 37.6, 127.1, () => ({ created: true }))).toEqual({ created: true });
+        expect(reuseMarkerLatLng(null, 37.5, 127.1, () => ({ created: true }))).toEqual({ created: true });
+        const anchor = { x: 16, y: 32 };
+        expect(reuseMarkerAnchor(anchor, 16, 32, () => ({ created: true }))).toBe(anchor);
+        expect(reuseMarkerAnchor(anchor, 16, 30, () => ({ created: true }))).toEqual({ created: true });
+    });
+
+    test('reuses a projected coordinate for the same restaurant and position', () => {
+        const restaurant = { id: 'a' };
+        let created = 0;
+        const first = reuseProjectedLatLng(restaurant, 37.5, 127.1, () => {
+            created += 1;
+            return { id: created };
+        });
+        const second = reuseProjectedLatLng(restaurant, 37.5, 127.1, () => {
+            created += 1;
+            return { id: created };
+        });
+        const moved = reuseProjectedLatLng(restaurant, 37.6, 127.1, () => {
+            created += 1;
+            return { id: created };
+        });
+
+        expect(second).toBe(first);
+        expect(moved).not.toBe(first);
+        expect(created).toBe(2);
+    });
 });
diff --git a/apps/web/tests-unit/naver-map-overlay-stack.test.tsx b/apps/web/tests-unit/naver-map-overlay-stack.test.tsx
index c7b3885abe..5dd1f467e8 100644
--- a/apps/web/tests-unit/naver-map-overlay-stack.test.tsx
+++ b/apps/web/tests-unit/naver-map-overlay-stack.test.tsx
@@ -76,7 +76,7 @@ describe('NaverMapOverlayStack', () => {
         expect(html).toContain('data-map-overlay-kind="announcement"');
         expect(html.match(/<button/g)).toHaveLength(1);
         expect(html).toContain('pointer-events-auto');
-        expect(html).toContain('mapOverlayFade_12s');
+        expect(html).not.toContain('mapOverlayFade');
         expect(html).not.toContain('3개의 맛집 발견');
         expect(html).not.toContain('2명이 함께 보는 중');
     });
diff --git a/apps/web/tests-unit/naver-map-render-guard.test.ts b/apps/web/tests-unit/naver-map-render-guard.test.ts
index b472680b5c..b77f09948c 100644
--- a/apps/web/tests-unit/naver-map-render-guard.test.ts
+++ b/apps/web/tests-unit/naver-map-render-guard.test.ts
@@ -189,6 +189,25 @@ describe('naver map marker render guard', () => {
         expect(shouldSkipMarkerUpdate(previous, nextToggleChanged)).toBe(false);
     });
 
+    test('reuses the display id signature for the same id list', () => {
+        const displayRestaurantIds = ['r-2', 'r-1', 'r-2'];
+        const input = {
+            zoom: 12,
+            bounds: null,
+            displayRestaurantIds,
+            selectedRestaurantId: null,
+            searchedRestaurantId: null,
+            isClusterMode: false,
+            isRegionalClusterMode: false,
+            isSeoulDistrictMode: false,
+        };
+        const first = buildMarkerRenderSignature(input);
+        displayRestaurantIds.push('r-3');
+        const second = buildMarkerRenderSignature(input);
+        expect(second.displayRestaurantIdsSignature).toBe(first.displayRestaurantIdsSignature);
+        expect(first.displayRestaurantIdsSignature).toBe('r-1|r-2');
+    });
+
     test('keeps an empty desktop marker render from poisoning the render signature', () => {
         const source = readFileSync(join(process.cwd(), 'components/map/NaverMapView.tsx'), 'utf8');
 
@@ -197,7 +216,8 @@ describe('naver map marker render guard', () => {
         expect(source).toContain("window.requestIdleCallback(callback, { timeout: CLUSTER_INDEX_IDLE_TIMEOUT_MS })");
         expect(source).toContain('markerRenderSignatureRef.current = null;');
         expect(source).toContain('setMarkerRenderRetryTick((tick) => tick + 1)');
-        expect(source).toContain("document.querySelector('.cluster-marker-container')");
+        expect(source).toContain('markerPool.getStats().activeCount > 0');
+        expect(source).not.toContain("document.querySelector('.cluster-marker-container')");
         expect(source).toContain('activeIds.size === 0 && displayRestaurants.length > 0');
         expect(source).toContain('markerRenderRetryTick');
     });
diff --git a/apps/web/tests-unit/naver-map-render-plan.test.ts b/apps/web/tests-unit/naver-map-render-plan.test.ts
index c5469b623c..b4ba70d1d4 100644
--- a/apps/web/tests-unit/naver-map-render-plan.test.ts
+++ b/apps/web/tests-unit/naver-map-render-plan.test.ts
@@ -7,13 +7,16 @@ import {
     getRestaurantsWithRenderableCoordinates,
     hasNaverMarkerCoordinates,
     getSeoulIndividualRestaurantsForRender,
+    getLastViewportExaminationCount,
     getVisibleRestaurantsForRender,
+    getVisibleRestaurantIdSet,
     nextEmptyIdentityArray,
     resolveEmptyClusterMarkerCleanupPlan,
     resolveSkippedEmptyThemeMarkerPlan,
     shouldClearEmptyClusterState,
     shouldReportNaverMarkerRenderPerformance,
 } from '../lib/naver-map-render-plan';
+import { isRestaurantInViewport } from '../lib/naver-map-view-helpers';
 
 const makeRestaurant = (overrides: Partial<Restaurant> = {}): Restaurant => ({
     id: overrides.id ?? 'restaurant-1',
@@ -56,6 +59,55 @@ describe('naver map render plan helpers', () => {
         expect(result.map((restaurant) => restaurant.id)).toEqual(['selected', 'visible']);
     });
 
+    test('examines only the viewport cells for a small window in a large list', () => {
+        const restaurants = Array.from({ length: 1000 }, (_, index) => makeRestaurant({
+            id: `r-${index}`,
+            lat: 33 + (index % 50) * 0.1,
+            lng: 126 + Math.floor(index / 50) * 0.1,
+        }));
+        const bounds = { south: 37.45, north: 37.55, west: 126.95, east: 127.05 };
+        const result = getVisibleRestaurantsForRender(restaurants, null, bounds, true);
+        const fullScan = restaurants.filter((restaurant) => isRestaurantInViewport(restaurant, bounds));
+        expect(result.map((restaurant) => restaurant.id)).toEqual(fullScan.map((restaurant) => restaurant.id));
+        expect(getLastViewportExaminationCount()).toBeLessThan(restaurants.length);
+    });
+
+    test('reuses the visible list when a small pan keeps the same restaurants', () => {
+        const restaurants = [
+            makeRestaurant({ id: 'a', lat: 37.50, lng: 127.00 }),
+            makeRestaurant({ id: 'b', lat: 37.52, lng: 127.02 }),
+            ...Array.from({ length: 40 }, (_, index) => makeRestaurant({
+                id: `far-${index}`,
+                lat: 33 + index * 0.05,
+                lng: 129,
+            })),
+        ];
+        const first = getVisibleRestaurantsForRender(
+            restaurants,
+            null,
+            { south: 37.40, north: 37.60, west: 126.90, east: 127.10 },
+            true,
+        );
+        const shifted = getVisibleRestaurantsForRender(
+            restaurants,
+            null,
+            { south: 37.41, north: 37.61, west: 126.91, east: 127.11 },
+            true,
+        );
+        const narrowed = getVisibleRestaurantsForRender(
+            restaurants,
+            null,
+            { south: 37.49, north: 37.51, west: 126.99, east: 127.01 },
+            true,
+        );
+
+        expect(first.map((restaurant) => restaurant.id)).toEqual(['a', 'b']);
+        expect(shifted).toBe(first);
+        expect(getVisibleRestaurantIdSet(first)).toBe(getVisibleRestaurantIdSet(first));
+        expect(narrowed.map((restaurant) => restaurant.id)).toEqual(['a']);
+        expect(narrowed).not.toBe(first);
+    });
+
     test('keeps only restaurants that can produce Naver marker coordinates', () => {
         const result = getRestaurantsWithRenderableCoordinates([
             makeRestaurant({ id: 'valid', lat: 37.5, lng: 127.0 }),
@@ -67,6 +119,15 @@ describe('naver map render plan helpers', () => {
         expect(result.map((restaurant) => restaurant.id)).toEqual(['valid', 'zero-lat']);
     });
 
+    test('reuses the input list when every restaurant already has numeric coordinates', () => {
+        const restaurants = [
+            makeRestaurant({ id: 'first', lat: 37.5, lng: 127.0 }),
+            makeRestaurant({ id: 'second', lat: 37.6, lng: 127.1 }),
+        ];
+
+        expect(getRestaurantsWithRenderableCoordinates(restaurants)).toBe(restaurants);
+    });
+
     test('treats numeric coordinate strings as renderable marker coordinates', () => {
         expect(hasNaverMarkerCoordinates({ lat: '37.5', lng: '127.0' })).toBe(false);
         expect(hasNaverMarkerCoordinates({ lat: null, lng: 127.0 })).toBe(false);
@@ -116,6 +177,43 @@ describe('naver map render plan helpers', () => {
         expect(ids[0]).toContain('restaurant-visible');
         expect(ids[1]).toContain('searched-searched');
         expect(ids[2]).toContain('regional-서울:2:37.500000:127.000000');
+        const again = buildRenderTargetIdsForSignature({
+            activeSearchedRestaurant: makeRestaurant({ id: 'searched', lat: 38, lng: 128 }),
+            selectedRestaurant: null,
+            clusters: [],
+            displayRestaurantIds: new Set(['visible']),
+            displayRestaurants: restaurants,
+            mergedRestaurantById: new Map(),
+            nextIsClusterMode: false,
+            nextIsRegionalClusterMode: true,
+            nextIsSeoulDistrictMode: false,
+            regionalClusters: [{ region: '서울', count: 2, center: { lat: 37.5, lng: 127.0 }, categories: ['한식', '분식'] }] as any,
+            restaurantById: new Map(),
+            seoulClustersToRender: [],
+            seoulIndividualIds: [],
+        });
+        expect(again).not.toBe(ids);
+    });
+
+    test('reuses render target ids when the source lists are the same', () => {
+        const restaurants = [makeRestaurant({ id: 'visible' })];
+        const args = {
+            activeSearchedRestaurant: null,
+            selectedRestaurant: null,
+            clusters: [],
+            displayRestaurantIds: new Set(['visible']),
+            displayRestaurants: restaurants,
+            mergedRestaurantById: new Map<string, Restaurant>(),
+            nextIsClusterMode: false,
+            nextIsRegionalClusterMode: false,
+            nextIsSeoulDistrictMode: false,
+            regionalClusters: [],
+            restaurantById: new Map<string, Restaurant>(),
+            seoulClustersToRender: [],
+            seoulIndividualIds: [],
+        };
+        const first = buildRenderTargetIdsForSignature(args);
+        expect(buildRenderTargetIdsForSignature(args)).toBe(first);
     });
 
     test('includes visit count in marker render signature', () => {
diff --git a/apps/web/tests-unit/naver-map-toast-helpers.test.ts b/apps/web/tests-unit/naver-map-toast-helpers.test.ts
index c9ea7d5a5d..625d1a27f9 100644
--- a/apps/web/tests-unit/naver-map-toast-helpers.test.ts
+++ b/apps/web/tests-unit/naver-map-toast-helpers.test.ts
@@ -10,9 +10,7 @@ import {
 } from '../lib/naver-map-toast-helpers';
 import {
     NAVER_MAP_ANNOUNCEMENT_HIDE_DELAY_MS,
-    NAVER_MAP_ONLINE_USERS_HIDE_DELAY_MS,
     NAVER_MAP_OVERLAY_ANIMATION_CLASS_NAMES,
-    NAVER_MAP_RESTAURANT_COUNT_HIDE_DELAY_MS,
     NAVER_MAP_TOAST_HIDE_DELAY_MS,
 } from '../lib/naver-map-overlay-timings';
 
@@ -104,16 +102,10 @@ describe('naver map toast helpers', () => {
         });
     });
 
-    test('keeps temporary overlay animation durations equal to their hide timers', () => {
-        expect(NAVER_MAP_OVERLAY_ANIMATION_CLASS_NAMES.announcement).toContain(
-            `mapOverlayFade_${NAVER_MAP_ANNOUNCEMENT_HIDE_DELAY_MS / 1000}s`,
-        );
-        expect(NAVER_MAP_OVERLAY_ANIMATION_CLASS_NAMES.restaurantCount).toContain(
-            `mapOverlayFade_${NAVER_MAP_RESTAURANT_COUNT_HIDE_DELAY_MS / 1000}s`,
-        );
-        expect(NAVER_MAP_OVERLAY_ANIMATION_CLASS_NAMES.onlineUsers).toContain(
-            `mapOverlayFade_${NAVER_MAP_ONLINE_USERS_HIDE_DELAY_MS / 1000}s`,
-        );
+    test('keeps temporary overlays from fading out over the map', () => {
+        expect(NAVER_MAP_OVERLAY_ANIMATION_CLASS_NAMES.announcement).not.toContain('mapOverlayFade');
+        expect(NAVER_MAP_OVERLAY_ANIMATION_CLASS_NAMES.restaurantCount).not.toContain('mapOverlayFade');
+        expect(NAVER_MAP_OVERLAY_ANIMATION_CLASS_NAMES.onlineUsers).not.toContain('mapOverlayFade');
     });
 
     test('rotates through every banner announcement when multiple notices are exposed', () => {
diff --git a/apps/web/tests-unit/naver-map-wheel-helpers.test.ts b/apps/web/tests-unit/naver-map-wheel-helpers.test.ts
index 0a1e30320f..9bd65d111c 100644
--- a/apps/web/tests-unit/naver-map-wheel-helpers.test.ts
+++ b/apps/web/tests-unit/naver-map-wheel-helpers.test.ts
@@ -8,6 +8,7 @@ import {
     buildNaverWheelViewportPlan,
     clearNaverPendingAnchorAdjustListener,
     flushQueuedNaverWheelInput,
+    hasNaverWheelProjectionUpdated,
     resolveNaverWheelCleanupState,
     resolveNaverWheelInputDispatch,
     resolveNaverWheelPostAdjustPlan,
@@ -221,6 +222,12 @@ describe('naver map wheel helpers', () => {
         expect(removed).toEqual(['listener-1']);
     });
 
+    test('treats an unchanged projection offset as not ready for same-turn correction', () => {
+        expect(hasNaverWheelProjectionUpdated({ x: 10, y: 20 }, { x: 10, y: 20 })).toBe(false);
+        expect(hasNaverWheelProjectionUpdated({ x: 10, y: 20 }, { x: 20, y: 20 })).toBe(true);
+        expect(hasNaverWheelProjectionUpdated(null, { x: 20, y: 20 })).toBe(false);
+    });
+
     test('resolves cleanup state by resetting anchor-adjust and queue state', () => {
         expect(resolveNaverWheelCleanupState()).toEqual({
             nextIsAnchorAdjusting: false,
diff --git a/apps/web/tests-unit/overseas-map-marker-helpers.test.ts b/apps/web/tests-unit/overseas-map-marker-helpers.test.ts
index 297c1f8b08..994a26ba37 100644
--- a/apps/web/tests-unit/overseas-map-marker-helpers.test.ts
+++ b/apps/web/tests-unit/overseas-map-marker-helpers.test.ts
@@ -20,7 +20,7 @@ describe('overseas map marker helpers', () => {
 
             expect(html).toContain(`src="${imagePath}"`);
             expect(html).toContain('alt="테스트 식당"');
-            expect(html).toContain('class="marker-container relative h-full w-full cursor-pointer drop-shadow-md transition-transform duration-200 hover:scale-110"');
+            expect(html).toContain('class="marker-container relative h-full w-full cursor-pointer hover:scale-110"');
             expect(html).toContain('class="h-full w-full object-contain"');
             expect(html).toContain('draggable="false"');
             expect(html).not.toContain('style=');
diff --git a/apps/web/tests-unit/popular-restaurant-score.test.ts b/apps/web/tests-unit/popular-restaurant-score.test.ts
new file mode 100644
index 0000000000..bd1d022645
--- /dev/null
+++ b/apps/web/tests-unit/popular-restaurant-score.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, test } from 'bun:test';
+
+import {
+  comparePopularRestaurants,
+  scorePopularRestaurant,
+} from '@/lib/popular-restaurant-score';
+import type { Restaurant } from '@/types/restaurant';
+
+function restaurant(partial: Partial<Restaurant> & Pick<Restaurant, 'id'>): Restaurant {
+  return {
+    approved_name: partial.id,
+    name: partial.id,
+    status: 'approved',
+    weekly_search_count: 0,
+    review_count: 0,
+    ...partial,
+  } as Restaurant;
+}
+
+describe('popular restaurant composite score', () => {
+  test('ranks a multi-signal restaurant ahead of a search-only leader', () => {
+    const searchLeader = restaurant({
+      id: 'search-leader',
+      weekly_search_count: 100,
+      youtube_meta: { viewCount: 1000 },
+    });
+    const multiSignal = restaurant({
+      id: 'multi-signal',
+      weekly_search_count: 10,
+      review_count: 20,
+      youtube_link: 'https://www.youtube.com/watch?v=aaaaaaaaaaa',
+      mergedYoutubeLinks: [
+        'https://www.youtube.com/watch?v=aaaaaaaaaaa',
+        'https://www.youtube.com/watch?v=bbbbbbbbbbb',
+        'https://youtu.be/ccccccccccc',
+      ],
+      youtube_meta: { viewCount: 5_000_000, likeCount: 100_000, commentCount: 5_000 },
+      mergedYoutubeMetas: [
+        { viewCount: 5_000_000, likeCount: 100_000, commentCount: 5_000, title: 'a' },
+        { viewCount: 800_000, likeCount: 12_000, commentCount: 900, title: 'b' },
+      ],
+    });
+    const likes = new Map([['multi-signal', 40]]);
+
+    expect(scorePopularRestaurant(multiSignal, 40)).toBeGreaterThan(scorePopularRestaurant(searchLeader, 0));
+    expect(comparePopularRestaurants(searchLeader, multiSignal, likes)).toBeGreaterThan(0);
+    expect([searchLeader, multiSignal].sort((a, b) => comparePopularRestaurants(a, b, likes)).map((item) => item.id))
+      .toEqual(['multi-signal', 'search-leader']);
+  });
+
+  test('does not let a second copy of the same video double the view total', () => {
+    const once = restaurant({
+      id: 'once',
+      youtube_meta: { title: 'same', publishedAt: '2026-01-01', viewCount: 1000, likeCount: 10, commentCount: 2 },
+      mergedYoutubeMetas: [
+        { title: 'same', publishedAt: '2026-01-01', viewCount: 1000, likeCount: 10, commentCount: 2 },
+      ],
+    });
+    const doubled = restaurant({
+      id: 'doubled',
+      youtube_meta: { title: 'same', publishedAt: '2026-01-01', viewCount: 2000, likeCount: 20, commentCount: 4 },
+    });
+
+    expect(scorePopularRestaurant(once)).toBeLessThan(scorePopularRestaurant(doubled));
+  });
+});
diff --git a/apps/web/tests-unit/privacy-sanitize.test.ts b/apps/web/tests-unit/privacy-sanitize.test.ts
index 4833deb258..6ddf7e9d60 100644
--- a/apps/web/tests-unit/privacy-sanitize.test.ts
+++ b/apps/web/tests-unit/privacy-sanitize.test.ts
@@ -163,7 +163,8 @@ describe('privacy sanitizer', () => {
     expect(resetPasswordSource).not.toContain('console.error(');
     expect(resetPasswordSource).not.toContain('error instanceof Error');
     expect(resetPasswordSource).not.toContain('toast.error(errorMessage)');
-    expect(debugLogSource).toContain('sanitizePrivacyValue(metadata');
+    expect(debugLogSource).toContain('DEBUG_LOG_REASON_CODES.has(reason)');
+    expect(debugLogSource).not.toContain('sanitizePrivacyValue');
     expect(debugLogSource).toContain('DEBUG_LOG_EVENT.DEBUG_EVENT_REJECTED');
     expect(debugLogSource).not.toContain('console.log(...');
     expect(ocrExtractSource).toContain("const failureMetadata = { error_code: failureCode, provider: failureProvider }");
diff --git a/apps/web/tests-unit/restaurant-merged-media.test.ts b/apps/web/tests-unit/restaurant-merged-media.test.ts
index bb8dbfeb11..13ecf97fb6 100644
--- a/apps/web/tests-unit/restaurant-merged-media.test.ts
+++ b/apps/web/tests-unit/restaurant-merged-media.test.ts
@@ -4,6 +4,7 @@ import type { Restaurant } from '../types/restaurant';
 import { buildRestaurantDetailMediaCopy } from '../lib/restaurant-detail-media-copy';
 import {
     collectRestaurantMergedMedia,
+    collectTzuyangReviewEntries,
     hydrateRestaurantDetailWithMergeContext,
 } from '../lib/restaurant-merged-media';
 
@@ -148,4 +149,49 @@ describe('restaurant merged media helpers', () => {
         expect(hydrated?.mergedTzuyangReviews).toEqual(['대표 리뷰', '병합 리뷰']);
         expect(hydrated?.mergedRestaurants?.map((restaurant) => restaurant.id)).toEqual(['primary', 'merged']);
     });
+
+    test('keeps a known tzuyang review when the fetched row has an empty review', () => {
+        const hydrated = hydrateRestaurantDetailWithMergeContext(
+            makeRestaurant({
+                id: 'primary',
+                tzuyang_review: null,
+                youtube_link: 'https://www.youtube.com/watch?v=primary0001',
+            }),
+            makeRestaurant({
+                id: 'primary',
+                tzuyang_review: '지도에 있던 쯔양 리뷰',
+                youtube_link: 'https://www.youtube.com/watch?v=primary0001',
+            }),
+        );
+
+        expect(hydrated?.tzuyang_review).toBe('지도에 있던 쯔양 리뷰');
+        expect(hydrated?.mergedTzuyangReviews).toEqual(['지도에 있던 쯔양 리뷰']);
+    });
+
+    test('collects tzuyang reviews stored as arrays or review objects', () => {
+        const media = collectRestaurantMergedMedia(makeRestaurant({
+            tzuyang_review: null,
+            tzuyang_reviews: ['배열 리뷰', { review: '객체 리뷰' } as unknown as string],
+        }));
+
+        expect(media.tzuyangReviews).toEqual(['배열 리뷰', '객체 리뷰']);
+    });
+
+    test('pairs each tzuyang review with its video title and publish date', () => {
+        const entries = collectTzuyangReviewEntries(makeRestaurant({
+            tzuyang_review: '대표 리뷰',
+            youtube_meta: {
+                title: '대전 야시장 먹방',
+                publishedAt: '2024-03-02T00:00:00Z',
+            },
+        }));
+
+        expect(entries).toEqual([
+            {
+                text: '대표 리뷰',
+                title: '대전 야시장 먹방',
+                publishedAt: '2024-03-02T00:00:00Z',
+            },
+        ]);
+    });
 });
diff --git a/apps/web/tests-unit/restaurant-visit-count-source.test.ts b/apps/web/tests-unit/restaurant-visit-count-source.test.ts
index 522769991f..40357f64f0 100644
--- a/apps/web/tests-unit/restaurant-visit-count-source.test.ts
+++ b/apps/web/tests-unit/restaurant-visit-count-source.test.ts
@@ -8,7 +8,8 @@ describe('restaurant visit count source contracts', () => {
 
         expect(source).toContain('export function buildRestaurantSelectFields');
         expect(source).toContain('const RESTAURANT_COMPACT_SELECT');
-        expect(source).toContain('review_count, youtube_link, tzuyang_review, source_type, status, created_at');
+        expect(source).toContain('review_count, youtube_link, source_type');
+        expect(source).toContain("'tzuyang_review'");
         expect(source).toContain('const selectFields = buildRestaurantSelectFields({');
     });
 });
diff --git a/apps/web/tests-unit/same-origin-mutation.test.ts b/apps/web/tests-unit/same-origin-mutation.test.ts
index c617e6f571..48554e26c2 100644
--- a/apps/web/tests-unit/same-origin-mutation.test.ts
+++ b/apps/web/tests-unit/same-origin-mutation.test.ts
@@ -45,6 +45,23 @@ describe('same-origin mutation authorization', () => {
     }, 'http://127.0.0.1:18080/api/admin/map-overlays/preview'), localEnv)).toBe(false);
   });
 
+  test('trusts the live loopback server when the configured site URL uses another local port', () => {
+    const localEnv = {
+      NODE_ENV: 'development',
+      NEXT_PUBLIC_SITE_URL: 'http://localhost:8080',
+    } as NodeJS.ProcessEnv;
+    expect(isTrustedSameOriginMutation(mutation({
+      cookie: 'sb-local-auth-token=value',
+      origin: 'http://localhost:3000',
+      'sec-fetch-site': 'same-origin',
+    }, 'http://localhost:3000/api/auth/logout'), localEnv)).toBe(true);
+    expect(isTrustedSameOriginMutation(mutation({
+      cookie: 'sb-local-auth-token=value',
+      origin: 'http://localhost:9999',
+      'sec-fetch-site': 'same-site',
+    }, 'http://localhost:3000/api/auth/logout'), localEnv)).toBe(false);
+  });
+
   test('rejects cross-origin, same-site sibling, null, missing, and ambiguous origins', () => {
     for (const origin of [
       'https://attacker.example',
diff --git a/apps/web/tests-unit/visible-marker-review-bubbles.test.ts b/apps/web/tests-unit/visible-marker-review-bubbles.test.ts
index 76316940d4..fdf13f504c 100644
--- a/apps/web/tests-unit/visible-marker-review-bubbles.test.ts
+++ b/apps/web/tests-unit/visible-marker-review-bubbles.test.ts
@@ -2,6 +2,8 @@ import { describe, expect, test } from 'bun:test';
 
 import {
   buildVisibleMarkerReviewBubbleMapSignature,
+  buildVisibleMarkerReviewBubbleRenderToken,
+  buildVisibleRestaurantIdSignature,
   type VisibleMarkerReviewBubble,
 } from '../lib/visible-marker-review-bubbles';
 
@@ -14,6 +16,14 @@ const baseBubble: VisibleMarkerReviewBubble = {
 };
 
 describe('visible marker review bubble signatures', () => {
+  test('reuses the id signature for the same restaurant list', () => {
+    const restaurants = [{ id: 'a' }, { id: 'b' }];
+    const first = buildVisibleRestaurantIdSignature(restaurants);
+    expect(buildVisibleRestaurantIdSignature(restaurants)).toBe(first);
+    expect(first).toBe('a|b');
+    expect(buildVisibleRestaurantIdSignature([{ id: 'a' }, { id: 'b' }])).toBe('a|b');
+  });
+
   test('changes when rendered bubble content changes under the same review id', () => {
     const baseSignature = buildVisibleMarkerReviewBubbleMapSignature({
       [baseBubble.restaurantId]: baseBubble,
@@ -46,4 +56,13 @@ describe('visible marker review bubble signatures', () => {
       [baseBubble.restaurantId]: baseBubble,
     }));
   });
+
+  test('reuses one bubble render token until its fields change', () => {
+    const bubble = { ...baseBubble };
+    const first = buildVisibleMarkerReviewBubbleRenderToken(bubble, false);
+    expect(buildVisibleMarkerReviewBubbleRenderToken(bubble, false)).toBe(first);
+    expect(buildVisibleMarkerReviewBubbleRenderToken(bubble, true)).not.toBe(first);
+    bubble.content = '다른 내용';
+    expect(buildVisibleMarkerReviewBubbleRenderToken(bubble, false)).not.toBe(first);
+  });
 });
diff --git a/apps/web/tests-unit/web-quality-performance-source.test.ts b/apps/web/tests-unit/web-quality-performance-source.test.ts
index bd0e2fcf64..d0a5c3c8ea 100644
--- a/apps/web/tests-unit/web-quality-performance-source.test.ts
+++ b/apps/web/tests-unit/web-quality-performance-source.test.ts
@@ -123,7 +123,7 @@ describe("Tailwind v4 source contracts", () => {
       homeSelectors.push(rule.selector);
     });
     for (const animationClasses of Object.values(NAVER_MAP_OVERLAY_ANIMATION_CLASS_NAMES)) {
-      for (const utility of animationClasses.split(/\s+/)) {
+      for (const utility of animationClasses.split(/\s+/).filter(Boolean)) {
         const selector = escapedClassSelector(utility);
         expect(homeSelectors.some((value) => value.includes(selector)), utility).toBe(true);
       }
@@ -428,7 +428,8 @@ describe("web quality performance source contracts", () => {
       "absolute bottom-12 left-0 right-0 z-20 flex justify-center gap-1.5",
     );
     expect(popupSource).toContain("flex h-5 w-5 items-center justify-center");
-    expect(popupSource).toContain("h-1.5 w-1.5 rounded-full transition-all");
+    expect(popupSource).toContain("h-1.5 w-1.5 rounded-full");
+    expect(popupSource).not.toContain("h-1.5 w-1.5 rounded-full transition-all");
     expect(popupSource).not.toContain("텍스트 전용 배너");
     expect(popupSource).toContain(
       "['pointerdown', 'keydown', 'wheel', 'touchstart']",
@@ -1164,20 +1165,16 @@ describe("web quality performance source contracts", () => {
       "restaurant.status === 'approved'",
     );
     expect(popularRestaurantsSource).toContain(".filter(isApprovedRestaurant)");
-    expect(popularRestaurantsSource).toContain(".gt('weekly_search_count', 0)");
-    expect(popularRestaurantsSource).toContain(
-      ".order('created_at', { ascending: false })",
-    );
-    expect(popularRestaurantsSource).toContain(
-      ".order('weekly_search_count', { ascending: false })",
-    );
+    expect(popularRestaurantsSource).toContain("weekly_search_count', 'gt.0'");
+    expect(popularRestaurantsSource).toContain("'order', 'created_at.desc'");
+    expect(popularRestaurantsSource).toContain("'order', 'weekly_search_count.desc'");
     expect(popularRestaurantsSource).toContain(
       "sort === 'oldest' ? aTime - bTime : bTime - aTime",
     );
-    expect(popularRestaurantsSource).toContain("reasoning_basis");
+    expect(popularRestaurantsSource).not.toContain("reasoning_basis");
     expect(popularRestaurantsSource).toContain("selectedRegion");
     expect(popularRestaurantsSource).toContain("isKoreanOnly");
-    expect(popularRestaurantsSource).toContain(".slice(0, limit)");
+    expect(popularRestaurantsSource).toContain("restaurants.splice(limit)");
     expect(restaurantSearchSource).toContain("fetchPopularRestaurants");
     expect(restaurantSearchSource).toContain("getPopularRestaurantsQueryKey");
     expect(
@@ -1385,7 +1382,7 @@ describe("web quality performance source contracts", () => {
       "rounded-full border border-border bg-background/95",
     );
     expect(homeDesktopControlPanelSource).toContain(
-      "pointer-events-auto flex items-center gap-1.5 min-h-11 rounded-full shadow-sm bg-background/95 backdrop-blur-sm border border-border px-1.5",
+      "pointer-events-auto flex items-center gap-1.5 min-h-11 rounded-full shadow-sm bg-background/95 border border-border px-1.5",
     );
     expect(homeDesktopControlPanelSource).toContain(
       "flex-1 h-9 rounded-full flex items-center gap-2 px-2 min-w-0",
@@ -2432,7 +2429,8 @@ describe("web quality performance source contracts", () => {
     );
     expect(stampCardSource).toContain("onKeyDown={handleCardKeyDown}");
     expect(stampCardSource).toContain("focus-visible:ring-primary");
-    expect(stampCardSource).toContain("transition-[filter,opacity,transform]");
+    expect(stampCardSource).not.toContain("transition-[filter,transform]");
+    expect(stampCardSource).not.toContain("transition-[filter,opacity,transform]");
     expect(stampCardSource).toContain("style={{ objectFit: 'cover' }}");
     expect(stampCardSource).toContain("<YoutubeThumbnail");
     expect(stampPageSource).toContain("<YoutubeThumbnail");
@@ -2553,7 +2551,7 @@ describe("web quality performance source contracts", () => {
     expect(userProfilePanelSource).toContain("visibleStampCount");
     expect(userProfilePanelSource).toContain("stampLoadMoreRef");
     expect(userProfilePanelSource).toContain(
-      'className="flex-shrink-0 -mr-2 h-10 w-10"',
+      'className="h-8 w-8 shrink-0 rounded-full border border-border bg-background shadow-none hover:bg-secondary"',
     );
     expect(userProfilePanelSource).toContain("<StampCard");
     expect(userProfilePanelSource).toContain("<ReviewCard");
@@ -2775,8 +2773,9 @@ describe("web quality performance source contracts", () => {
       'aria-label={isFilterExpanded ? "검색 필터 접기" : "검색 필터 펼치기"}',
     );
     expect(feedContentSource).toContain('aria-label="리뷰 패널 닫기"');
+    expect(feedContentSource).toContain("mapPanelIconButtonClass");
     expect(feedContentSource).toContain(
-      'className="h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"',
+      '"h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"',
     );
     expect(feedContentSource).not.toContain(
       'className="h-8 w-8 rounded-full hover:bg-muted"',
@@ -2801,24 +2800,11 @@ describe("web quality performance source contracts", () => {
     expect(stampOverlaySource).toContain('"안 가본 곳만 보기"');
     expect(stampOverlaySource).toContain('"도장 필터 접기"');
     expect(stampOverlaySource).toContain('"도장 필터 펼치기"');
-    expect(stampOverlaySource).toContain('aria-label="도장 패널 닫기"');
-    expect(stampOverlaySource).toContain(
-      'className="h-10 w-10 rounded-full bg-muted/45 shadow-none hover:bg-muted"',
-    );
-    expect(stampOverlaySource).not.toContain(
-      'className="h-8 w-8 rounded-full hover:bg-muted"',
-    );
-    expect(stampOverlaySource).not.toContain(
-      'className="h-9 w-9 hover:bg-muted rounded-full"',
-    );
+    expect(stampOverlaySource).toContain('closeLabel="도장 패널 닫기"');
+    expect(stampOverlaySource).toContain("<MapPanelHeader");
     expect(stampOverlaySource).toContain(
       'data-desktop-left-panel-stamp-mobile-parity="true"',
     );
-    expect(stampOverlaySource).toContain(
-      "flex flex-wrap items-start justify-between gap-3",
-    );
-    expect(stampOverlaySource).toContain("basis-[min(11rem,100%)]");
-    expect(stampOverlaySource).toContain("tabular-nums");
     expect(stampOverlaySource).toContain('stampSize="mobile"');
     expect(stampOverlaySource).toContain('size="default"');
     expect(stampOverlaySource).toContain("const STAMP_PAGE_SIZE = 5");
@@ -2878,15 +2864,11 @@ describe("web quality performance source contracts", () => {
     expect(leaderboardOverlaySource).toContain(
       'aria-label="랭킹 및 티어 산정 기준 보기"',
     );
-    expect(leaderboardOverlaySource).toContain('aria-label="랭킹 패널 닫기"');
+    expect(leaderboardOverlaySource).toContain('closeLabel="랭킹 패널 닫기"');
     expect(leaderboardOverlaySource).toContain(
       'data-desktop-left-panel-leaderboard-list="true"',
     );
-    expect(leaderboardOverlaySource).toContain(
-      "flex flex-wrap items-start justify-between gap-3",
-    );
-    expect(leaderboardOverlaySource).toContain("basis-[min(11rem,100%)]");
-    expect(leaderboardOverlaySource).toContain("text-pretty");
+    expect(leaderboardOverlaySource).toContain("<MapPanelHeader");
     expect(leaderboardOverlaySource).toContain(
       "DESKTOP_LEFT_PANEL_LEADERBOARD_LIST_STYLE",
     );
@@ -3757,12 +3739,9 @@ describe("web quality performance source contracts", () => {
     expect(myPageProfileSource).toContain(
       "rounded-full border-2 border-border shadow-sm",
     );
-    expect(myPageProfileSource).toContain(
+    expect(myPageProfileSource).not.toContain(
       "transition-[border-color,box-shadow]",
     );
-    expect(myPageProfileSource).toContain(
-      "border-2 border-border shadow-sm transition-[border-color,box-shadow]",
-    );
     expect(myPageProfileSource).toContain("truncate text-lg font-bold");
     expect(myPageProfileSource).toContain(
       "truncate px-2 text-xs text-muted-foreground",
diff --git a/apps/web/tests-unit/youtube-link-helpers.test.ts b/apps/web/tests-unit/youtube-link-helpers.test.ts
index d9e98b2cbc..17afda0a3e 100644
--- a/apps/web/tests-unit/youtube-link-helpers.test.ts
+++ b/apps/web/tests-unit/youtube-link-helpers.test.ts
@@ -5,6 +5,7 @@ import { resolve } from 'node:path';
 import { canonicalizeYoutubeLink, extractVideoIdFromYoutubeLink } from '@/lib/dashboard/helpers';
 import {
   getYoutubeThumbnailCandidates,
+  resolveYoutubeThumbnailCeiling,
   getYoutubeThumbnailUrl,
   shouldTryNextYoutubeThumbnailCandidate,
 } from '@/lib/youtube-thumbnail';
@@ -49,6 +50,13 @@ describe('YouTube link helpers', () => {
       'https://img.youtube.com/vi/abc123DEF45/default.jpg',
     ]);
     expect(getYoutubeThumbnailCandidates(null)).toEqual([]);
+    expect(resolveYoutubeThumbnailCeiling('112px')).toBe('hqdefault');
+    expect(resolveYoutubeThumbnailCeiling('(max-width: 400px) 100vw, 400px')).toBe('sddefault');
+    expect(resolveYoutubeThumbnailCeiling('(max-width: 480px) 100vw, 320px')).toBe('sddefault');
+    expect(resolveYoutubeThumbnailCeiling('(max-width: 1536px) 25vw')).toBe('sddefault');
+    expect(getYoutubeThumbnailCandidates('abc123DEF45', 'sddefault')[0]).toBe(
+      'https://img.youtube.com/vi/abc123DEF45/sddefault.jpg',
+    );
   });
 
   test('skips tiny YouTube placeholder images before the final fallback', () => {
diff --git a/apps/web/tests/admin-console-module-hydration.spec.ts b/apps/web/tests/admin-console-module-hydration.spec.ts
index fd33dfed03..eb44328c5a 100644
--- a/apps/web/tests/admin-console-module-hydration.spec.ts
+++ b/apps/web/tests/admin-console-module-hydration.spec.ts
@@ -20,11 +20,6 @@ const ADMIN_MODULE_SMOKE_TARGETS = [
     moduleId: 'routes',
     readySelector: '[aria-label="관리자 지도 운영 개요 2분할"]',
   },
-  {
-    path: '/admin?module=map-overlays',
-    moduleId: 'map-overlays',
-    readySelector: '[data-admin-map-overlays-module="true"]',
-  },
   {
     path: '/admin?module=restaurants',
     moduleId: 'restaurants',