From c774351a36423d056cae4116692ab1cb2ccb0cee Mon Sep 17 00:00:00 2001
From: twoimo <32544727+twoimo@users.noreply.github.com>
Date: Thu, 24 Sep 2026 17:13:22 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EC=B2=AB=20=ED=99=94=EB=A9=B4?=
 =?UTF-8?q?=EC=9D=84=20=EC=A0=95=EC=A0=81=20=EC=8A=A4=EC=BC=88=EB=A0=88?=
 =?UTF-8?q?=ED=86=A4=EC=9C=BC=EB=A1=9C=20=EA=B3=A0=EC=A0=95=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0=20=EC=8A=A4=ED=83=80=EC=9D=BC=EA=B3=BC=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=EC=9E=90=20=EC=A7=80=ED=91=9C=EB=A5=BC=20=EB=A7=9E?=
 =?UTF-8?q?=EC=B6=98=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

홈은 뷰포트가 정해지기 전에 같은 크기의 스켈레톤을 그리고, 테두리·글자 스케일·관리자 배너 조회와 로컬 3000 포트를 맞춘다.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/app/admin/banners/page.tsx           |  16 +-
 apps/web/app/admin/evaluations/page.tsx       |   9 +-
 apps/web/app/api/admin/banners/route.ts       |  39 +++
 apps/web/app/app-globals.css                  |  15 +-
 apps/web/app/global-map/page.tsx              |   2 +-
 apps/web/app/globals.css                      |  10 +
 apps/web/app/home-app-globals.css             |   8 +
 apps/web/app/home-deferred-globals.css        |   8 +
 apps/web/app/home-detail-globals.css          |   8 +
 apps/web/app/home-runtime-shell.tsx           |  31 ++-
 apps/web/app/insights/insights-client.tsx     |  28 +-
 apps/web/app/leaderboard/page.tsx             |   2 +
 apps/web/app/mypage/mypage-layout-content.tsx |   3 +
 apps/web/app/mypage/profile/page.tsx          |  20 +-
 apps/web/app/privacy/page.tsx                 |   7 +-
 apps/web/app/stamp/page.tsx                   |   4 +-
 .../components/admin/AdminConsoleOverview.tsx | 259 ++++++++++--------
 .../admin/AdminEmbeddedModuleShell.tsx        |   2 +-
 .../admin/AdminOverviewDashboard.tsx          |  30 +-
 .../components/admin/AdminRestaurantModal.tsx |   6 +-
 .../AdminRestaurantRefreshHistoryPanel.tsx    |   8 +-
 .../web/components/admin/AdminReviewPanel.tsx |   4 +-
 apps/web/components/admin/AdminUsersPanel.tsx |   4 +-
 apps/web/components/admin/CategorySidebar.tsx |  16 +-
 .../components/admin/EvaluationDetailView.tsx |  24 +-
 .../components/admin/EvaluationSlideView.tsx  |   2 +-
 .../components/admin/EvaluationTableNew.tsx   |  18 +-
 .../components/admin/SubmissionDetailView.tsx |  20 +-
 .../components/admin/SubmissionListView.tsx   |  48 ++--
 .../components/admin/TrendProposalQueue.tsx   |  22 +-
 .../admin/evaluation-status-filter-options.ts |   2 +-
 .../admin/pipeline/AdminPipelineDashboard.tsx |   2 +-
 .../storyboard/AdminStoryboardGenerator.tsx   | 132 ++++-----
 .../system-status/AdminSystemStatusCenter.tsx |  12 +-
 .../AdminYoutubeThumbnailGenerator.tsx        |  94 +++----
 .../announcement/AnnouncementPanel.tsx        |   2 +-
 apps/web/components/feed/FeedContent.tsx      |   2 +
 .../web/components/filters/CategoryFilter.tsx |   4 +-
 .../home/DesktopLeftPanelBookmarks.tsx        |   6 +-
 .../home/DesktopLeftPanelMapHome.tsx          |  14 +-
 .../home/DesktopLeftPanelNotifications.tsx    |   8 +-
 apps/web/components/home/HomeMapUserMenu.tsx  |   4 +-
 .../home/MobileBookmarkMenuButton.tsx         |   4 +-
 .../components/home/MobileControlOverlay.tsx  |  10 +-
 .../home/MobileNotificationMenuButton.tsx     |   4 +-
 .../home/home-desktop-control-panel.tsx       |   4 +-
 apps/web/components/layout/Header.tsx         |   8 +-
 .../layout/HeaderBookmarkMenuButton.tsx       |   4 +-
 .../leaderboard/LeaderboardList.tsx           |   2 +-
 .../web/components/map/map-overlay-notice.tsx |   4 +-
 .../components/modals/EditRestaurantModal.tsx |   6 +-
 .../modals/RestaurantSubmissionModal.tsx      |  13 +-
 .../components/mypage/MyPageSectionFrame.tsx  |   2 +-
 apps/web/components/mypage/MyPageSidebar.tsx  |   7 +-
 .../components/mypage/MyPageTopActions.tsx    |   4 +-
 .../components/overlay-pages/StampOverlay.tsx |   2 +-
 .../components/profile/UserProfilePanel.tsx   |   6 +-
 .../restaurant/RestaurantDetailPanel.tsx      |  12 +-
 apps/web/components/reviews/ReviewCard.tsx    |   4 +-
 .../components/reviews/ReviewEditModal.tsx    |   4 +-
 apps/web/components/reviews/ReviewModal.tsx   |  34 +--
 .../stamp/RestaurantReviewsPanel.tsx          |   2 +-
 apps/web/components/stamp/StampCard.tsx       |  26 +-
 apps/web/components/ui/bookmark-button.tsx    |   2 +-
 apps/web/components/ui/card.tsx               |   2 +-
 apps/web/components/ui/dialog.tsx             |   4 +-
 apps/web/components/ui/mobile-sheet-frame.tsx |   4 +-
 apps/web/components/ui/sheet.tsx              |   2 +-
 apps/web/components/ui/toast.tsx              |   4 +-
 apps/web/hooks/use-ad-banners.tsx             |  23 +-
 apps/web/package.json                         |  20 +-
 apps/web/playwright.config.ts                 |   2 +-
 apps/web/stylegallery-adoption.v1.json        |   6 +-
 apps/web/tailwind.config.ts                   |   3 +
 .../admin-console-uiux-source.test.ts         |  39 ++-
 ...n-evaluation-status-filter-options.test.ts |   4 +-
 ...er-bookmark-notification-ux-source.test.ts |  16 +-
 .../tests-unit/local-supabase-runtime.test.ts |   8 +-
 .../mobile-desktop-parity-source.test.ts      |   4 +-
 .../mypage-mobile-cleanup-contract.test.ts    |   8 +-
 .../naver-live-provider-smoke-source.test.ts  |   2 +-
 .../public-surface-design-contract.test.ts    |   2 +-
 .../standalone-static-source.test.ts          |   2 +-
 .../stylegallery-primitive-taxonomy.test.ts   |   6 +-
 .../web-quality-performance-source.test.ts    |   8 +-
 apps/web/tests/mobile-home-map-helpers.ts     |   2 +-
 apps/web/tests/nightly/nightly-test.ts        |   4 +-
 docs/product/DESIGN.md                        |  13 +-
 88 files changed, 739 insertions(+), 568 deletions(-)
 create mode 100644 apps/web/app/api/admin/banners/route.ts

diff --git a/apps/web/app/admin/banners/page.tsx b/apps/web/app/admin/banners/page.tsx
index a6f17c84fa..f4f5d1ca57 100644
--- a/apps/web/app/admin/banners/page.tsx
+++ b/apps/web/app/admin/banners/page.tsx
@@ -69,7 +69,7 @@ function BannerListItemSkeleton({ index }: { index: number }) {
                         <p className="min-w-0 flex-1 truncate text-sm font-bold text-foreground">
                             <Skeleton className={cn("h-5 rounded-full motion-reduce:animate-none", index % 2 === 0 ? "w-32" : "w-24")} />
                         </p>
-                        <Badge variant="outline" className="shrink-0 rounded-full text-[10px]">
+                        <Badge variant="outline" className="shrink-0 rounded-full text-2xs">
                             <Skeleton className="h-3 w-6 rounded-full motion-reduce:animate-none" />
                         </Badge>
                     </div>
@@ -77,14 +77,14 @@ function BannerListItemSkeleton({ index }: { index: number }) {
                         <Skeleton className="h-4 w-4/5 rounded-full motion-reduce:animate-none" />
                     </p>
                     <div className="mt-1 flex flex-wrap gap-1">
-                        <Badge variant="secondary" className="rounded-full text-[10px]">
+                        <Badge variant="secondary" className="rounded-full text-2xs">
                             <Skeleton className="h-3 w-14 rounded-full motion-reduce:animate-none" />
                         </Badge>
-                        <Badge variant="secondary" className="rounded-full text-[10px]">
+                        <Badge variant="secondary" className="rounded-full text-2xs">
                             <Skeleton className="h-3 w-12 rounded-full motion-reduce:animate-none" />
                         </Badge>
                         {index % 2 === 0 && (
-                            <span className="inline-flex items-center text-[10px] text-primary">
+                            <span className="inline-flex items-center text-2xs text-primary">
                                 <ExternalLink className="mr-0.5 h-3 w-3" aria-hidden="true" />
                                 <Skeleton className="h-3 w-6 rounded-full motion-reduce:animate-none" />
                             </span>
@@ -626,13 +626,13 @@ function BannerManagementPage({ embedded }: Required<BannerManagementPageWrapper
                                             <div className="min-w-0 flex-1">
                                                 <div className="flex min-w-0 items-start justify-between gap-2">
                                                     <p className="min-w-0 truncate text-sm font-bold text-foreground">{banner.title}</p>
-                                                    <Badge variant={banner.is_active ? "default" : "outline"} className="shrink-0 rounded-full text-[10px]">{banner.is_active ? '활성' : '비활성'}</Badge>
+                                                    <Badge variant={banner.is_active ? "default" : "outline"} className="shrink-0 rounded-full text-2xs">{banner.is_active ? '활성' : '비활성'}</Badge>
                                                 </div>
                                                 <p className="mt-0.5 truncate text-xs text-muted-foreground">{banner.description || '설명 없음'} · 우선순위 {banner.priority}</p>
                                                 <div className="mt-1 flex min-w-0 flex-nowrap gap-1 overflow-x-auto scrollbar-hide [scrollbar-width:none] sm:flex-wrap sm:overflow-visible [&::-webkit-scrollbar]:hidden">
-                                                    {banner.display_target.includes('sidebar') && <Badge variant="secondary" className="shrink-0 rounded-full text-[10px]">데스크톱 배너</Badge>}
-                                                    {banner.display_target.includes('mobile_popup') && <Badge variant="secondary" className="shrink-0 rounded-full text-[10px]">모바일 팝업</Badge>}
-                                                    {resolvedUrls?.link_url && <span className="inline-flex shrink-0 items-center text-[10px] text-primary"><ExternalLink className="mr-0.5 h-3 w-3" aria-hidden="true" />링크</span>}
+                                                    {banner.display_target.includes('sidebar') && <Badge variant="secondary" className="shrink-0 rounded-full text-2xs">데스크톱 배너</Badge>}
+                                                    {banner.display_target.includes('mobile_popup') && <Badge variant="secondary" className="shrink-0 rounded-full text-2xs">모바일 팝업</Badge>}
+                                                    {resolvedUrls?.link_url && <span className="inline-flex shrink-0 items-center text-2xs text-primary"><ExternalLink className="mr-0.5 h-3 w-3" aria-hidden="true" />링크</span>}
                                                 </div>
                                             </div>
                                         </div>
diff --git a/apps/web/app/admin/evaluations/page.tsx b/apps/web/app/admin/evaluations/page.tsx
index b12b53550c..3ea9da9af8 100644
--- a/apps/web/app/admin/evaluations/page.tsx
+++ b/apps/web/app/admin/evaluations/page.tsx
@@ -3522,7 +3522,11 @@ function AdminEvaluationPage({
             <div className="flex items-center gap-2">
               <AdminEvaluationTitleIcon embedded={embedded} />
               <h1 className={embedded ? "whitespace-nowrap bg-gradient-primary bg-clip-text text-base font-bold text-transparent" : "whitespace-nowrap bg-gradient-primary bg-clip-text text-lg font-bold text-transparent sm:text-2xl"}>
-                관리자 데이터 검수
+                {embeddedModuleId === 'submissions'
+                  ? '제보 관리'
+                  : embeddedModuleId === 'reviews'
+                    ? '리뷰 관리'
+                    : '관리자 데이터 검수'}
               </h1>
             </div>
             {deepLinkFilter && (
@@ -3564,6 +3568,7 @@ function AdminEvaluationPage({
               stats={stats}
               selectedStatuses={selectedStatuses}
               onSelectStatuses={setSelectedStatuses}
+              showStatusChips={!showSubmissionView}
             >
               <div className="ml-auto flex items-center justify-end gap-1.5 lg:gap-1" data-admin-evaluation-view-actions="top-right" data-admin-module-actions={embedded ? "top-right" : undefined}>
                 {canSwitchEvaluationView && (
@@ -3618,7 +3623,7 @@ function AdminEvaluationPage({
                       <span className="lg:hidden">제보</span>
                       {totalPendingCount > 0 && (
                         <>
-                          <span className="inline-flex md:inline-flex min-w-[18px] items-center justify-center rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-white lg:hidden">
+                          <span className="inline-flex md:inline-flex min-w-[18px] items-center justify-center rounded-full bg-red-500 px-1.5 py-0.5 text-2xs font-semibold leading-none text-white lg:hidden">
                             {totalPendingCount > 99 ? '99+' : totalPendingCount}
                           </span>
                           <span className="absolute -right-1 top-0 hidden h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white lg:flex">
diff --git a/apps/web/app/api/admin/banners/route.ts b/apps/web/app/api/admin/banners/route.ts
new file mode 100644
index 0000000000..be01e6ffce
--- /dev/null
+++ b/apps/web/app/api/admin/banners/route.ts
@@ -0,0 +1,39 @@
+import { NextResponse } from "next/server";
+
+import { requireAdmin } from "@/lib/auth/require-admin";
+import { createSupabaseServiceRoleClient } from "@/lib/supabase/service-role";
+
+export const runtime = "nodejs";
+
+const AD_BANNER_SELECT = [
+  "id",
+  "title",
+  "description",
+  "image_url",
+  "video_url",
+  "media_type",
+  "link_url",
+  "is_active",
+  "priority",
+  "display_target",
+  "created_at",
+  "updated_at",
+  "created_by",
+].join(",");
+
+export async function GET() {
+  const auth = await requireAdmin();
+  if (!auth.ok) return auth.response;
+
+  const supabase = createSupabaseServiceRoleClient();
+  const { data, error } = await supabase
+    .from("ad_banners")
+    .select(AD_BANNER_SELECT)
+    .order("priority", { ascending: false });
+
+  if (error) {
+    return NextResponse.json({ code: "banner_read_failed" }, { status: 500 });
+  }
+
+  return NextResponse.json({ banners: data ?? [] });
+}
diff --git a/apps/web/app/app-globals.css b/apps/web/app/app-globals.css
index 51cea9868a..331ffdc4ed 100644
--- a/apps/web/app/app-globals.css
+++ b/apps/web/app/app-globals.css
@@ -10,8 +10,8 @@
 @source not "../{tests-unit,test,tests,fixtures}/**";
 /* Tailwind v4 explicit retention for utilities assembled outside scanned route source. */
 @source inline("lg:block lg:flex lg:hidden lg:table-cell");
-@source inline("lg:border-r lg:grid lg:overflow-y-auto lg:px-0 lg:sticky sm:col-span-2 sm:grid-cols-2 sm:grid-cols-5 lg:col-span-2 lg:col-span-3 lg:col-span-4 lg:col-span-5 lg:flex-row lg:grid-cols-10 lg:flex-1 lg:grid-rows-[auto_minmax(0,1.15fr)_minmax(0,1fr)] lg:grid-cols-[minmax(0,1.05fr)_minmax(360px,0.95fr)] lg:h-full lg:justify-between lg:min-h-0 lg:overflow-hidden lg:overflow-visible xl:grid-cols-3 xl:grid-cols-4 xl:grid-cols-[1.1fr_0.9fr]");
-@source inline("font-sans font-black font-extrabold gap-0 flex-nowrap justify-end md:justify-end md:p-4 md:border-y-0 overflow-visible overflow-y-visible px-0.5 grid-cols-[5.5rem_minmax(0,1fr)_3rem] grid-rows-2 grid-rows-[auto_minmax(0,1fr)_auto] grid-rows-[minmax(0,1fr)_auto] min-h-[132px] min-h-[190px] min-h-[220px] min-h-[230px] min-h-[280px] min-w-[8%] min-w-fit sm:max-w-none sm:min-w-fit sm:p-1.5 sm:p-3.5 text-[13px] text-lg sm:text-xl tracking-[-0.035em] tracking-[0.01em] tracking-[0.04em] bg-border/70 bg-muted-foreground/25 bg-muted-foreground/28 bg-muted-foreground/30 bg-muted-foreground/35 bg-muted-foreground/45 bg-muted-foreground/55 bg-muted/25 bg-muted/35 bg-muted/45 bg-teal-50 bg-teal-500/55 bg-teal-500/75 border-teal-500/25 dark:bg-muted-foreground/35 dark:bg-muted/20 dark:bg-muted/35 dark:bg-teal-400/55 dark:bg-teal-400/75 dark:bg-teal-950/35 dark:border-teal-400/30 dark:text-emerald-300 md:block md:flex md:hidden md:flex-row md:flex-wrap md:items-start md:justify-between md:gap-1 md:w-auto md:overflow-visible md:pb-0 sm:inline bg-sky-50 bg-sky-50/20 bg-sky-500 bg-teal-500 bg-rose-50 bg-rose-500 bg-orange-50 bg-amber-500 bg-amber-600 text-white text-teal-700 text-sky-700 text-rose-700 text-amber-700 border-sky-500/35 dark:bg-sky-400 dark:bg-sky-950/20 dark:bg-teal-400 dark:bg-teal-500 dark:bg-rose-400 dark:bg-rose-500 dark:bg-amber-400 dark:bg-amber-500 dark:text-white dark:text-teal-300 dark:text-sky-300 dark:text-rose-300 dark:text-amber-300 dark:border-sky-400/30 dark:border-sky-400/45");
+@source inline("lg:border-r lg:grid lg:overflow-y-auto lg:px-0 lg:sticky sm:col-span-2 sm:grid-cols-2 sm:grid-cols-5 lg:col-span-2 lg:col-span-3 lg:col-span-4 lg:col-span-5 lg:col-span-6 lg:flex-row lg:grid-cols-10 lg:flex-1 lg:grid-rows-[auto_minmax(0,1.15fr)_minmax(0,1fr)] lg:grid-cols-[minmax(0,1.05fr)_minmax(360px,0.95fr)] lg:h-full lg:justify-between lg:min-h-0 lg:overflow-hidden lg:overflow-visible xl:grid-cols-3 xl:grid-cols-4 xl:grid-cols-[1.1fr_0.9fr]");
+@source inline("font-sans font-black font-extrabold gap-0 flex-nowrap justify-end md:justify-end md:p-4 md:border-y-0 overflow-visible overflow-y-visible px-0.5 grid-cols-[5.5rem_minmax(0,1fr)_3rem] grid-rows-2 grid-rows-[auto_minmax(0,1fr)_auto] grid-rows-[minmax(0,1fr)_auto] min-h-[132px] min-h-[190px] min-h-[220px] min-h-[230px] min-h-[280px] min-w-[8%] min-w-fit sm:max-w-none sm:min-w-fit sm:p-1.5 sm:p-3.5 text-sm text-lg sm:text-xl tracking-[-0.035em] tracking-[0.01em] tracking-[0.04em] bg-border/70 bg-muted-foreground/25 bg-muted-foreground/28 bg-muted-foreground/30 bg-muted-foreground/35 bg-muted-foreground/45 bg-muted-foreground/55 bg-muted/25 bg-muted/35 bg-muted/45 bg-teal-50 bg-teal-500/55 bg-teal-500/75 border-teal-500/25 dark:bg-muted-foreground/35 dark:bg-muted/20 dark:bg-muted/35 dark:bg-teal-400/55 dark:bg-teal-400/75 dark:bg-teal-950/35 dark:border-teal-400/30 dark:text-emerald-300 md:block md:flex md:hidden md:flex-row md:flex-wrap md:items-start md:justify-between md:gap-1 md:w-auto md:overflow-visible md:pb-0 sm:inline bg-sky-50 bg-sky-50/20 bg-sky-500 bg-teal-500 bg-rose-50 bg-rose-500 bg-orange-50 bg-amber-500 bg-amber-600 text-white text-teal-700 text-sky-700 text-rose-700 text-amber-700 border-sky-500/35 dark:bg-sky-400 dark:bg-sky-950/20 dark:bg-teal-400 dark:bg-teal-500 dark:bg-rose-400 dark:bg-rose-500 dark:bg-amber-400 dark:bg-amber-500 dark:text-white dark:text-teal-300 dark:text-sky-300 dark:text-rose-300 dark:text-amber-300 dark:border-sky-400/30 dark:border-sky-400/45");
 @source inline("-z-10 text-red-800 fill-red-800/20 scale-110 text-foreground/65 active:text-foreground text-[12px] font-medium font-semibold leading-none tracking-normal");
 @source inline("text-yellow-500 text-muted-foreground text-amber-600");
 @source inline("top-[calc(env(safe-area-inset-top)_+_126px)] bottom-[calc(var(--mobile-bottom-nav-effective-height,var(--mobile-bottom-nav-height,60px))_+_env(safe-area-inset-bottom)_+_0.75rem)] z-[61] z-[70]");
@@ -688,12 +688,21 @@ All colors MUST be HSL.
 @layer base {
   @import "../styles/light-root-tokens.css";
 
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: hsl(var(--border));
+  }
+
   :root {
     --font-sans: var(--font-pretendard, "Pretendard"), "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
     --font-display-fallback: "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", ui-serif, Georgia, serif;
     --font-noto-serif-kr: var(--font-display, "Noto Serif KR"), "Apple SD Gothic Neo", "Malgun Gothic", ui-serif, Georgia, serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --admin-sidebar-expanded-width: 14rem;
+    --phi: 1.618;
+    --admin-sidebar-expanded-width: calc(8.75rem * var(--phi));
     --admin-sidebar-expanded-max-width: min(17.5rem, 27vw);
   }
 
diff --git a/apps/web/app/global-map/page.tsx b/apps/web/app/global-map/page.tsx
index 33f46d6055..4a6bc9e8b6 100644
--- a/apps/web/app/global-map/page.tsx
+++ b/apps/web/app/global-map/page.tsx
@@ -694,7 +694,7 @@ export default function GlobalMapPage() {
                                                                 {categories.length > 0 && (
                                                                     <span className="mt-2 flex flex-wrap gap-1">
                                                                         {categories.slice(0, 3).map((category) => (
-                                                                            <Badge key={category} variant="secondary" className="text-[10px]">
+                                                                            <Badge key={category} variant="secondary" className="text-2xs">
                                                                                 {category}
                                                                             </Badge>
                                                                         ))}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 1a3f89ccfe..5c964f5a7e 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -88,6 +88,16 @@ html[data-local-workspace="true"] [data-local-workspace-app="true"] {
 }
 
 @layer base {
+  /* `border` sets width only. Without this, the preflight shorthand paints every
+     unspecified edge with currentColor, so chips and toasts look black. */
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: hsl(var(--border));
+  }
+
   button,
   input,
   textarea,
diff --git a/apps/web/app/home-app-globals.css b/apps/web/app/home-app-globals.css
index ee635bccdf..049b654924 100644
--- a/apps/web/app/home-app-globals.css
+++ b/apps/web/app/home-app-globals.css
@@ -171,6 +171,14 @@ All colors MUST be HSL.
 
 @layer base {
   @import "../styles/light-root-tokens.css";
+
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: hsl(var(--border));
+  }
 }
 
 @layer base {
diff --git a/apps/web/app/home-deferred-globals.css b/apps/web/app/home-deferred-globals.css
index 95f19b8896..87827a15d7 100644
--- a/apps/web/app/home-deferred-globals.css
+++ b/apps/web/app/home-deferred-globals.css
@@ -93,6 +93,14 @@ All colors MUST be HSL.
 
 @layer base {
   @import "../styles/light-root-tokens.css";
+
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: hsl(var(--border));
+  }
 }
 
 @layer base {
diff --git a/apps/web/app/home-detail-globals.css b/apps/web/app/home-detail-globals.css
index 3e2828c19e..d9410a7e05 100644
--- a/apps/web/app/home-detail-globals.css
+++ b/apps/web/app/home-detail-globals.css
@@ -92,6 +92,14 @@ All colors MUST be HSL.
 
 @layer base {
   @import "../styles/light-root-tokens.css";
+
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: hsl(var(--border));
+  }
 }
 
 @layer base {
diff --git a/apps/web/app/home-runtime-shell.tsx b/apps/web/app/home-runtime-shell.tsx
index 3479425845..5b7a09eccd 100644
--- a/apps/web/app/home-runtime-shell.tsx
+++ b/apps/web/app/home-runtime-shell.tsx
@@ -241,7 +241,8 @@ function MobileHomeLayout({ children }: { children: ReactNode }) {
                 <a href="#main-content" className="skip-link">
                     본문 바로가기
                 </a>
-                <main id="main-content" className="flex-1 relative overflow-hidden" aria-label="쯔동여지도 지도 본문">
+                <main id="main-content" className="relative flex-1 overflow-hidden" aria-label="쯔동여지도 지도 본문">
+                    <HomeStaticSkeleton />
                     <div className="h-full w-full">
                         {children}
                     </div>
@@ -317,13 +318,39 @@ function HomeLayoutContent({ children }: { children: ReactNode }) {
     );
 }
 
+function HomeStaticSkeleton() {
+    return (
+        <div
+            className="pointer-events-none absolute inset-0 z-[20]"
+            data-home-static-skeleton="true"
+            aria-hidden="true"
+        >
+            <div className="h-full max-xl:hidden">
+                <div className="h-full w-[min(392px,calc(100vw-32px))] border-r border-border bg-card p-4">
+                    <div className="h-11 animate-pulse rounded-full bg-muted" />
+                    <div className="mt-4 space-y-3">
+                        {Array.from({ length: 6 }, (_, index) => (
+                            <div key={index} className="h-16 animate-pulse rounded-xl bg-muted" />
+                        ))}
+                    </div>
+                </div>
+            </div>
+            <div className="xl:hidden">
+                <div className="mx-3 mt-[calc(env(safe-area-inset-top)+10px)] h-12 animate-pulse rounded-full border border-border bg-muted" />
+                <div className="absolute inset-x-3 bottom-[calc(env(safe-area-inset-bottom)+0.75rem)] h-14 animate-pulse rounded-2xl bg-muted" />
+            </div>
+        </div>
+    );
+}
+
 function HomeRuntimePendingShell({ children }: { children: ReactNode }) {
     return (
         <div className="flex flex-col bg-background text-foreground" style={{ height: 'var(--full-height, 100vh)' }}>
             <a href="#main-content" className="skip-link">
                 본문 바로가기
             </a>
-            <main id="main-content" className="h-full min-h-0 w-full flex-1 bg-background" aria-label="쯔동여지도 지도 본문">
+            <main id="main-content" className="relative h-full min-h-0 w-full flex-1 bg-background" aria-label="쯔동여지도 지도 본문">
+                <HomeStaticSkeleton />
                 {children}
             </main>
         </div>
diff --git a/apps/web/app/insights/insights-client.tsx b/apps/web/app/insights/insights-client.tsx
index 03d24338df..4ba29ee889 100644
--- a/apps/web/app/insights/insights-client.tsx
+++ b/apps/web/app/insights/insights-client.tsx
@@ -1335,7 +1335,7 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                                 <p className="text-xs md:text-sm text-muted-foreground whitespace-nowrap self-center">전체 {selectedCount.toLocaleString()}개</p>
 
                                 <div className="inline-flex items-center gap-1 sm:gap-2 shrink-0">
-                                    <span className="text-[11px] text-muted-foreground">모드</span>
+                                    <span className="text-2xs text-muted-foreground">모드</span>
                                     <div className="inline-flex items-center rounded-lg border border-border overflow-hidden">
                                         {VIEW_MODE_OPTIONS.map((option) => (
                                             <Button
@@ -1343,7 +1343,7 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                                                 size="sm"
                                                 variant={viewMode === option.value ? 'default' : 'ghost'}
                                                 onClick={() => handleSetViewMode(option.value)}
-                                                className="rounded-none h-8 px-2.5 text-[11px] whitespace-nowrap"
+                                                className="rounded-none h-8 px-2.5 text-2xs whitespace-nowrap"
                                             >
                                                 {option.label}
                                             </Button>
@@ -1352,7 +1352,7 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                                 </div>
 
                                 <div className="inline-flex items-center gap-1 sm:gap-2 shrink-0">
-                                    <span className="text-[11px] text-muted-foreground">지표</span>
+                                    <span className="text-2xs text-muted-foreground">지표</span>
                                     <div className="inline-flex items-center rounded-lg border border-border overflow-hidden">
                                         {METRIC_OPTIONS.map((option) => (
                                             <Button
@@ -1360,7 +1360,7 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                                                 size="sm"
                                                 variant={metricMode === option.value ? 'default' : 'ghost'}
                                                 onClick={() => handleSetMetricMode(option.value)}
-                                                className="rounded-none h-8 px-2.5 text-[11px] whitespace-nowrap"
+                                                className="rounded-none h-8 px-2.5 text-2xs whitespace-nowrap"
                                             >
                                                 {option.label}
                                             </Button>
@@ -1369,7 +1369,7 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                                 </div>
 
                                 <div className="inline-flex items-center gap-1 sm:gap-2 shrink-0">
-                                    <span className="text-[11px] text-muted-foreground">기준</span>
+                                    <span className="text-2xs text-muted-foreground">기준</span>
                                     <div className="inline-flex items-center rounded-lg border border-border overflow-hidden">
                                         {periodOptionsForView.map((option) => (
                                             <Button
@@ -1377,7 +1377,7 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                                                 size="sm"
                                                 variant={period === option.value ? 'default' : 'ghost'}
                                                 onClick={() => handleSetPeriod(option.value)}
-                                                className="rounded-none h-8 px-2.5 text-[11px] whitespace-nowrap"
+                                                className="rounded-none h-8 px-2.5 text-2xs whitespace-nowrap"
                                             >
                                                 {option.label}
                                             </Button>
@@ -1386,13 +1386,13 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                                 </div>
 
                                 <div className="inline-flex items-center gap-1 sm:gap-2 shrink-0">
-                                    <span className="text-[11px] text-muted-foreground">클러스터</span>
+                                    <span className="text-2xs text-muted-foreground">클러스터</span>
                                     <div className="inline-flex items-center rounded-lg border border-border overflow-hidden">
                                         <Button
                                             size="sm"
                                             variant={clusterStep === null ? 'default' : 'ghost'}
                                             onClick={() => handleSetClusterStep(null)}
-                                            className="rounded-none h-8 px-2.5 text-[11px] whitespace-nowrap"
+                                            className="rounded-none h-8 px-2.5 text-2xs whitespace-nowrap"
                                         >
                                             전체
                                         </Button>
@@ -1402,7 +1402,7 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                                                 size="sm"
                                                 variant={clusterStep === step ? 'default' : 'ghost'}
                                                 onClick={() => handleSetClusterStep(step)}
-                                                className="rounded-none h-8 px-2.5 text-[11px] whitespace-nowrap"
+                                                className="rounded-none h-8 px-2.5 text-2xs whitespace-nowrap"
                                             >
                                                 {formatClusterValueByMode(metricMode, step)}
                                             </Button>
@@ -1411,7 +1411,7 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                                 </div>
 
                                 <div className="ml-auto flex items-center gap-1 sm:gap-2 shrink-0 self-center order-99">
-                                    <span className="text-[11px] text-muted-foreground">색상</span>
+                                    <span className="text-2xs text-muted-foreground">색상</span>
                                     <div className="inline-flex overflow-hidden rounded-md border border-border shrink-0">
                                         <div
                                             className="flex items-center justify-center h-6 px-2 text-2xs text-white font-normal"
@@ -1460,7 +1460,7 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
                         <div
                             id="insights-treemap-context"
                             data-insights-treemap-context="true"
-                            className="flex flex-col gap-0.5 border-t border-border/60 pt-2 text-[11px] leading-snug text-muted-foreground md:flex-row md:flex-wrap md:items-center md:gap-x-3"
+                            className="flex flex-col gap-0.5 border-t border-border/60 pt-2 text-2xs leading-snug text-muted-foreground md:flex-row md:flex-wrap md:items-center md:gap-x-3"
                         >
                             <p className="font-medium text-foreground/80">{treemapContextText}</p>
                             <p>{treemapLegendText}</p>
@@ -1525,7 +1525,11 @@ export default function InsightsClient({ embedded = false }: { embedded?: boolea
     }
 
     return (
-        <div className="flex h-full min-h-0 flex-col bg-background overflow-hidden">
+        <div
+            className="flex h-full min-h-0 flex-col bg-background overflow-hidden"
+            data-layout-primitives="card-grid stack"
+            data-scroll-owner="insights-dashboard"
+        >
             <div className="flex-1 min-h-0 overflow-hidden p-2 md:p-4">
                 {insightsContent}
             </div>
diff --git a/apps/web/app/leaderboard/page.tsx b/apps/web/app/leaderboard/page.tsx
index c7c05c6c99..d46c464547 100644
--- a/apps/web/app/leaderboard/page.tsx
+++ b/apps/web/app/leaderboard/page.tsx
@@ -106,6 +106,8 @@ export default function LeaderboardPage() {
             <div
                 ref={scrollRef}
                 className="h-full overflow-y-auto"
+                data-layout-primitives="stack"
+                data-scroll-owner="leaderboard-list"
                 onScroll={leaderboardBottomNavAutoHide.onScroll}
                 onTouchStart={leaderboardBottomNavAutoHide.onTouchStart}
                 onTouchMove={leaderboardBottomNavAutoHide.onTouchMove}
diff --git a/apps/web/app/mypage/mypage-layout-content.tsx b/apps/web/app/mypage/mypage-layout-content.tsx
index e857ad2712..b3bdcbb31c 100644
--- a/apps/web/app/mypage/mypage-layout-content.tsx
+++ b/apps/web/app/mypage/mypage-layout-content.tsx
@@ -211,6 +211,7 @@ export function MyPageLayoutContent({
       <div
         className="flex h-full min-h-0 w-full max-w-none"
         data-mypage-viewport-layout="edge-to-edge"
+        data-layout-primitives="fixed-sidenav-shell scroll-body-shell sidebar"
       >
         {/* 사이드바는 자체 높이를 가지며 레이아웃 내에 고정됨 */}
         {shouldShowSidebarFrame &&
@@ -224,6 +225,8 @@ export function MyPageLayoutContent({
         <div
           ref={scrollRef}
           className="flex-1 h-full min-h-0 overflow-y-auto min-w-0 overscroll-contain"
+          data-layout-primitives="scroll-body-shell"
+          data-scroll-owner="mypage-content"
           onScroll={myPageBottomNavAutoHide.onScroll}
           onTouchStart={myPageBottomNavAutoHide.onTouchStart}
           onTouchMove={myPageBottomNavAutoHide.onTouchMove}
diff --git a/apps/web/app/mypage/profile/page.tsx b/apps/web/app/mypage/profile/page.tsx
index 1f315fceaa..eb775e6d7c 100644
--- a/apps/web/app/mypage/profile/page.tsx
+++ b/apps/web/app/mypage/profile/page.tsx
@@ -1136,7 +1136,7 @@ export default function ProfilePage() {
                     <Badge
                       variant="outline"
                       className={cn(
-                        "h-5 shrink-0 whitespace-nowrap border-0 px-1.5 py-0 text-[10px]",
+                        "h-5 shrink-0 whitespace-nowrap border-0 px-1.5 py-0 text-2xs",
                         userProfile.tier.color,
                         userProfile.tier.bgColor,
                       )}
@@ -1148,7 +1148,7 @@ export default function ProfilePage() {
                     type="button"
                     size="sm"
                     variant="ghost"
-                    className="h-7 rounded-full px-2 text-[11px] text-muted-foreground"
+                    className="h-7 rounded-full px-2 text-2xs text-muted-foreground"
                     onClick={() => {
                       setMobileNicknameInput(displayName);
                       setIsMobileNicknameEditing(true);
@@ -1253,7 +1253,7 @@ export default function ProfilePage() {
                 <Badge
                   variant="outline"
                   className={cn(
-                    "h-5 shrink-0 whitespace-nowrap border-0 px-1.5 py-0 text-[10px]",
+                    "h-5 shrink-0 whitespace-nowrap border-0 px-1.5 py-0 text-2xs",
                     userProfile.tier.color,
                     userProfile.tier.bgColor,
                   )}
@@ -1275,7 +1275,7 @@ export default function ProfilePage() {
                 </p>
                 <p className="shrink-0 text-sm font-bold tabular-nums">
                   {(userProfile?.qualityScore ?? 0).toFixed(1)}
-                  <span className="ml-0.5 text-[11px] font-semibold text-muted-foreground">
+                  <span className="ml-0.5 text-2xs font-semibold text-muted-foreground">
                     점
                   </span>
                 </p>
@@ -1294,7 +1294,7 @@ export default function ProfilePage() {
                   aria-hidden="true"
                 />
               </div>
-              <div className="mt-1 flex items-center justify-between gap-3 text-[11px] text-muted-foreground">
+              <div className="mt-1 flex items-center justify-between gap-3 text-2xs text-muted-foreground">
                 <span className="min-w-0 truncate">
                   현재 {currentTierName} · 남은 점수 {tierRemainingLabel}
                 </span>
@@ -1308,13 +1308,13 @@ export default function ProfilePage() {
               data-mypage-desktop-tier-action-guide="true"
             >
               <div className="min-w-0">
-                <dt className="text-[11px] text-muted-foreground">인증 리뷰</dt>
+                <dt className="text-2xs text-muted-foreground">인증 리뷰</dt>
                 <dd className="truncate text-xs font-semibold">
                   {tierProgress.nextTier ? `${tierVerifiedReviewsNeeded}개 더 필요` : "목표 달성"}
                 </dd>
               </div>
               <div className="min-w-0">
-                <dt className="text-[11px] text-muted-foreground">받은 좋아요</dt>
+                <dt className="text-2xs text-muted-foreground">받은 좋아요</dt>
                 <dd className="truncate text-xs font-semibold">
                   {tierProgress.nextTier
                     ? hasVerifiedReviews && tierLikesNeeded !== null
@@ -1381,6 +1381,7 @@ export default function ProfilePage() {
             <form
               className="min-h-0 space-y-4 md:flex md:flex-1 md:flex-col lg:space-y-3"
               onSubmit={handlePasswordChange}
+              data-layout-primitives="form-flow stack"
             >
               <div className="space-y-1.5">
                 <Label htmlFor="current-password">현재 비밀번호</Label>
@@ -1550,7 +1551,7 @@ export default function ProfilePage() {
                 <h2 id="ordinary-marketing-consent-title" className="text-sm font-semibold">
                   일반 마케팅 수신
                 </h2>
-                <span className="text-[11px] font-medium text-muted-foreground">
+                <span className="text-2xs font-medium text-muted-foreground">
                   선택
                 </span>
               </div>
@@ -1606,7 +1607,7 @@ export default function ProfilePage() {
                 <h2 id="night-marketing-consent-title" className="text-sm font-semibold">
                   야간 마케팅 수신
                 </h2>
-                <span className="text-[11px] font-semibold text-amber-600">
+                <span className="text-2xs font-semibold text-amber-600">
                   별도 선택
                 </span>
               </div>
@@ -1659,6 +1660,7 @@ export default function ProfilePage() {
           id="account-deletion"
           className="min-w-0 rounded-2xl border-0 bg-muted/35 shadow-none md:order-4 md:flex md:flex-col lg:col-start-2 lg:row-start-2 lg:h-full lg:min-h-0 lg:overflow-hidden"
           data-mypage-danger-zone="true"
+          data-layout-primitives="form-flow stack"
           data-mypage-danger-zone-layout="matrix-bottom-right"
         >
           <CardContent className="min-h-0 p-3 md:flex md:flex-1 md:flex-col lg:p-3">
diff --git a/apps/web/app/privacy/page.tsx b/apps/web/app/privacy/page.tsx
index bb7bf1080d..4bc32f49d8 100644
--- a/apps/web/app/privacy/page.tsx
+++ b/apps/web/app/privacy/page.tsx
@@ -14,7 +14,12 @@ export const metadata: Metadata = buildPublicMetadata({
 
 export default function PrivacyPage() {
   return (
-    <main className="min-h-screen min-w-0 overflow-x-hidden bg-muted/30 px-4 py-10 text-foreground" data-legal-page="true">
+    <main
+      className="min-h-screen min-w-0 overflow-x-hidden bg-muted/30 px-4 py-10 text-foreground"
+      data-legal-page="true"
+      data-layout-primitives="form-flow stack"
+      data-scroll-owner="privacy-document"
+    >
       <article className="mx-auto w-full min-w-0 max-w-3xl overflow-x-hidden rounded-2xl border border-border bg-background p-5 shadow-sm sm:p-8">
         <header className="mb-6 border-b pb-5">
           <p className="text-sm font-medium text-primary">{siteConfig.name}</p>
diff --git a/apps/web/app/stamp/page.tsx b/apps/web/app/stamp/page.tsx
index 462d1c7cd4..15724d068c 100644
--- a/apps/web/app/stamp/page.tsx
+++ b/apps/web/app/stamp/page.tsx
@@ -874,6 +874,8 @@ export default function StampPage() {
                         ref={mainScrollRef}
                         className="h-full overflow-y-auto flex flex-col [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']"
                         data-stamp-scroll-container="true"
+                        data-layout-primitives="list-detail stack"
+                        data-scroll-owner="stamp-list"
                         onScroll={handleMainScroll}
                         onTouchStart={stampBottomNavAutoHide.onTouchStart}
                         onTouchMove={stampBottomNavAutoHide.onTouchMove}
@@ -930,7 +932,7 @@ export default function StampPage() {
                                         >
                                             <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-[10px] font-medium rounded-full flex items-center justify-center">
+                                                <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">
                                                     {activeFilterCount}
                                                 </span>
                                             )}
diff --git a/apps/web/components/admin/AdminConsoleOverview.tsx b/apps/web/components/admin/AdminConsoleOverview.tsx
index f6e06cc151..6f91ad9957 100644
--- a/apps/web/components/admin/AdminConsoleOverview.tsx
+++ b/apps/web/components/admin/AdminConsoleOverview.tsx
@@ -3004,7 +3004,7 @@ const adminDashboardFocusPalette = {
 const adminDashboardControlGroupClassName =
   "inline-flex h-7 shrink-0 items-center rounded-full border border-border bg-muted/25 p-0.5";
 const adminDashboardControlButtonClassName =
-  "inline-flex h-6 shrink-0 items-center justify-center gap-1 rounded-full px-2 text-[10px] font-extrabold leading-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary";
+  "inline-flex h-6 shrink-0 items-center justify-center gap-1 rounded-full px-2 text-2xs font-extrabold leading-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary";
 const adminDashboardFullscreenCardClassName =
   "fixed inset-2 z-[80] h-[calc(100dvh-1rem)] max-h-[calc(100dvh-1rem)] overflow-auto scrollbar-hide rounded-3xl border-primary/35 bg-card p-4 shadow-2xl sm:inset-4 sm:h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-2rem)]";
 
@@ -3098,7 +3098,7 @@ function AdminDashboardTooltipPanel({
                 {row.value}
               </span>
               {row.note ? (
-                <span className="col-start-2 col-end-4 truncate text-[10px] font-semibold leading-3 text-muted-foreground">
+                <span className="col-start-2 col-end-4 truncate text-2xs font-semibold leading-3 text-muted-foreground">
                   {row.note}
                 </span>
               ) : null}
@@ -3107,7 +3107,7 @@ function AdminDashboardTooltipPanel({
         </div>
       ) : null}
       {footer ? (
-        <p className="border-t border-border/70 pt-0.5 text-[10px] font-semibold leading-3 text-muted-foreground [text-wrap:pretty]">
+        <p className="border-t border-border/70 pt-0.5 text-2xs font-semibold leading-3 text-muted-foreground [text-wrap:pretty]">
           {footer}
         </p>
       ) : null}
@@ -3360,7 +3360,7 @@ function AdminDashboardFullscreenButton({
 function AdminDashboardDiagnosisMeta({ periodLabel }: { periodLabel: string }) {
   return (
     <div
-      className="hidden min-w-0 max-w-[28rem] items-center justify-end gap-1.5 text-[11px] font-bold leading-none text-muted-foreground lg:flex"
+      className="hidden min-w-0 max-w-[28rem] items-center justify-end gap-1.5 text-2xs font-bold leading-none text-muted-foreground lg:flex"
       aria-label={`성과 진단 기준 ${periodLabel}, 비교 채널 평균`}
       data-admin-dashboard-diagnosis-meta="header-inline"
     >
@@ -3453,7 +3453,7 @@ function AdminDashboardImpactRankLegend() {
     <div
       className={cn(
         adminDashboardControlGroupClassName,
-        "gap-1 px-2 text-[10px] font-extrabold leading-none text-muted-foreground shadow-sm",
+        "gap-1 px-2 text-2xs font-extrabold leading-none text-muted-foreground shadow-sm",
       )}
       aria-label="상위 영상 영향도 색상 범례: 순위 구분"
       data-admin-dashboard-rank-legend="impact"
@@ -3519,7 +3519,7 @@ function AdminDashboardScrollTable<Row>({
                 key={column.key}
                 scope="col"
                 className={cn(
-                  "min-w-0 border-b border-border/70 px-2.5 py-2 text-left text-[10px] font-extrabold text-muted-foreground",
+                  "min-w-0 border-b border-border/70 px-2.5 py-2 text-left text-2xs font-extrabold text-muted-foreground",
                   column.align === "right" && "text-right",
                   column.className,
                 )}
@@ -3550,7 +3550,7 @@ function AdminDashboardScrollTable<Row>({
         </tbody>
       </table>
       {hasMoreRows ? (
-        <div className="sticky bottom-0 border-t border-border/70 bg-background/95 px-2.5 py-1.5 text-right text-[11px] font-extrabold tabular-nums text-muted-foreground backdrop-blur">
+        <div className="sticky bottom-0 border-t border-border/70 bg-background/95 px-2.5 py-1.5 text-right text-2xs font-extrabold tabular-nums text-muted-foreground backdrop-blur">
           추가 행 표시 중 {formatNumber(rows.length)}/{formatNumber(totalRows)}
         </div>
       ) : null}
@@ -3829,7 +3829,7 @@ function AdminDashboardManagementSkeleton() {
               type="button"
               variant="outline"
               size="sm"
-              className="h-7 shrink-0 rounded-full px-2 text-[10px]"
+              className="h-7 shrink-0 rounded-full px-2 text-2xs"
               disabled
             >
               카드 순서
@@ -3838,7 +3838,7 @@ function AdminDashboardManagementSkeleton() {
               type="button"
               variant="outline"
               size="sm"
-              className="h-7 shrink-0 rounded-full px-2 text-[10px]"
+              className="h-7 shrink-0 rounded-full px-2 text-2xs"
               disabled
             >
               초기화
@@ -3852,7 +3852,7 @@ function AdminDashboardManagementSkeleton() {
               type="button"
               variant="outline"
               size="sm"
-              className="h-7 shrink-0 gap-1 rounded-full px-2 text-[10px] font-bold"
+              className="h-7 shrink-0 gap-1 rounded-full px-2 text-2xs font-bold"
               disabled
             >
               <FileDown className="h-3.5 w-3.5" aria-hidden="true" />
@@ -3873,7 +3873,7 @@ function AdminDashboardManagementSkeleton() {
             type="button"
             variant="outline"
             size="sm"
-            className="order-3 h-7 shrink-0 gap-1 rounded-full px-2 text-[10px] font-extrabold text-muted-foreground md:hidden"
+            className="order-3 h-7 shrink-0 gap-1 rounded-full px-2 text-2xs font-extrabold text-muted-foreground md:hidden"
             aria-label="대시보드 타임프레임 로딩 중: 1개월"
             disabled
           >
@@ -3890,7 +3890,7 @@ function AdminDashboardManagementSkeleton() {
                 type="button"
                 variant={option.value === "1M" ? "default" : "outline"}
                 size="sm"
-                className="h-7 shrink-0 rounded-full px-2 text-[10px]"
+                className="h-7 shrink-0 rounded-full px-2 text-2xs"
                 aria-pressed={option.value === "1M"}
                 disabled
               >
@@ -3901,7 +3901,7 @@ function AdminDashboardManagementSkeleton() {
         </div>
       </div>
       <p
-        className="mb-2 rounded-xl border border-border/70 bg-muted/30 px-3 py-2 text-[11px] font-semibold leading-5 text-muted-foreground md:hidden"
+        className="mb-2 rounded-xl border border-border/70 bg-muted/30 px-3 py-2 text-2xs font-semibold leading-5 text-muted-foreground md:hidden"
         data-admin-dashboard-mobile-loading-prompt="true"
       >
         KPI 데이터를 불러오는 중입니다. 모바일에서는 핵심 카드부터 순서대로 표시됩니다.
@@ -4157,7 +4157,7 @@ function AdminDashboardCardTitle({
         data-admin-dashboard-card-title-row="single-line"
       >
         <div className="flex min-w-0 max-w-full flex-1 items-center gap-1.5">
-          <p className="truncate whitespace-nowrap text-[11px] font-extrabold leading-none text-foreground">
+          <p className="truncate whitespace-nowrap text-2xs font-extrabold leading-none text-foreground">
             {title}
             {metric ? (
               <span
@@ -4215,7 +4215,7 @@ function AdminDashboardQualityBadges({
           label={`${badge.label} 데이터 신호`}
           lines={[badge.description]}
           className={cn(
-            "inline-flex max-w-[7rem] items-center rounded-full border px-1.5 py-0.5 text-[10px] font-black leading-none outline-none focus-visible:ring-2 focus-visible:ring-primary",
+            "inline-flex max-w-[7rem] items-center rounded-full border px-1.5 py-0.5 text-2xs font-black leading-none outline-none focus-visible:ring-2 focus-visible:ring-primary",
             toneClass[badge.severity],
           )}
         >
@@ -4326,7 +4326,7 @@ function AdminDashboardKpiCard({
           data-admin-dashboard-kpi-title-row="single-line"
         >
           <div className="flex min-w-0 flex-1 items-center gap-1.5">
-            <p className="truncate whitespace-nowrap text-[11px] font-extrabold tracking-[0.04em] text-muted-foreground">
+            <p className="truncate whitespace-nowrap text-2xs font-extrabold tracking-[0.04em] text-muted-foreground">
               {title}
             </p>
             {infoLines.length > 0 ? (
@@ -4356,7 +4356,7 @@ function AdminDashboardKpiCard({
                   "계산식: 기간 대비 = (현재값 - 이전값) / 이전값 × 100",
                 ]}
                 className={cn(
-                  "inline-flex shrink-0 items-center gap-1 rounded-full bg-muted/45 px-2 py-0.5 text-[11px] font-black leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-primary dark:bg-muted/35",
+                  "inline-flex shrink-0 items-center gap-1 rounded-full bg-muted/45 px-2 py-0.5 text-2xs font-black leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-primary dark:bg-muted/35",
                   toneClass.text,
                 )}
               >
@@ -4385,7 +4385,7 @@ function AdminDashboardKpiCard({
               {value}
             </p>
             {caption ? (
-              <p className="mt-1.5 truncate text-[11px] font-semibold leading-none text-muted-foreground">
+              <p className="mt-1.5 line-clamp-2 text-2xs font-semibold leading-4 text-muted-foreground">
                 {caption}
               </p>
             ) : null}
@@ -4616,7 +4616,7 @@ function AdminDashboardOpsSummaryCard({
                             style={{ width: `${rowPercent}%` }}
                           />
                         </div>
-                        <span className="shrink-0 text-right text-[12px] font-extrabold tabular-nums text-foreground sm:text-[13px]">
+                        <span className="shrink-0 text-right text-[12px] font-extrabold tabular-nums text-foreground sm:text-sm">
                           {row.value}
                         </span>
                       </div>
@@ -5150,13 +5150,13 @@ function AdminDashboardGroupedBarChart({
               <div className="flex min-w-0 flex-col items-start gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
                 <span
                   className={cn(
-                    "inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-black leading-none",
+                    "inline-flex items-center rounded-full border px-2 py-0.5 text-2xs font-black leading-none",
                     metric.labelClass,
                   )}
                 >
                   {metric.label}
                 </span>
-                <span className="max-w-full truncate text-[10px] font-black tabular-nums text-muted-foreground sm:shrink-0 sm:text-[11px]">
+                <span className="max-w-full truncate text-2xs font-black tabular-nums text-muted-foreground sm:shrink-0 sm:text-2xs">
                   합계 {formatCompactNumber(total)} · 전체 평균{" "}
                   {formatCompactNumber(average)}
                 </span>
@@ -5190,7 +5190,7 @@ function AdminDashboardGroupedBarChart({
                             ]
                       }
                       className={cn(
-                        "flex min-w-[8%] items-center justify-center px-0.5 text-[11px] font-black leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-primary",
+                        "flex min-w-[8%] items-center justify-center px-0.5 text-2xs font-black leading-none tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-primary",
                         rankColors[index]?.barClass ??
                           "bg-muted-foreground/28 text-foreground dark:bg-muted-foreground/35 dark:text-foreground",
                       )}
@@ -5228,11 +5228,11 @@ function AdminDashboardGroupedBarChart({
                 )}
                 aria-hidden="true"
               />
-              <span className="shrink-0 text-[10px] font-black tabular-nums text-muted-foreground">
+              <span className="shrink-0 text-2xs font-black tabular-nums text-muted-foreground">
                 {index + 1}위
               </span>
               <span
-                className="min-w-0 truncate text-[11px] font-extrabold text-foreground"
+                className="min-w-0 truncate text-2xs font-extrabold text-foreground"
                 title={row.label}
               >
                 {row.label}
@@ -5241,7 +5241,7 @@ function AdminDashboardGroupedBarChart({
             <AdminDashboardInlineTooltip
               label={`${row.label} 성과 기여`}
               lines={row.viewBenchmarkTooltipLines}
-              className="mt-0.5 block truncate text-[10px] font-semibold tabular-nums text-foreground/70 outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              className="mt-0.5 block truncate text-2xs font-semibold tabular-nums text-foreground/70 outline-none focus-visible:ring-2 focus-visible:ring-primary"
             >
               {formatDashboardContribution(row.performanceContributionPercent)} ·{" "}
               {row.viewTopPercentLabel}
@@ -5327,10 +5327,10 @@ function AdminDashboardDiagnosisBoard({
                   aria-label={tooltipLines.join(" ")}
                 >
                   <div className="flex items-center justify-between gap-2">
-                    <span className="truncate text-[10px] font-black text-primary">
+                    <span className="truncate text-2xs font-black text-primary">
                       {insight.label}
                     </span>
-                    <span className="shrink-0 rounded-full bg-background px-2 py-0.5 text-[10px] font-black text-muted-foreground">
+                    <span className="shrink-0 rounded-full bg-background px-2 py-0.5 text-2xs font-black text-muted-foreground">
                       {modeLabel}
                     </span>
                   </div>
@@ -5347,7 +5347,7 @@ function AdminDashboardDiagnosisBoard({
                       <AdminDashboardQualityBadges badges={insight.qualityBadges} />
                     </div>
                   </UiTooltipTrigger>
-                  <p className="mt-1 truncate text-[11px] font-semibold text-muted-foreground">
+                  <p className="mt-1 truncate text-2xs font-semibold text-muted-foreground">
                     {insight.description}
                   </p>
                   <div
@@ -5365,7 +5365,7 @@ function AdminDashboardDiagnosisBoard({
                         }}
                       />
                     </div>
-                    <div className="flex items-center justify-between gap-2 text-[10px] font-black leading-none text-muted-foreground">
+                    <div className="flex items-center justify-between gap-2 text-2xs font-black leading-none text-muted-foreground">
                       <span>신호 강도</span>
                       <span className="min-w-0 truncate text-foreground">
                         {insight.scoreLabel}
@@ -5568,7 +5568,7 @@ function AdminDashboardPdfReportButton({ onExport }: { onExport: () => void }) {
       type="button"
       variant="outline"
       size="sm"
-      className="h-7 shrink-0 gap-1 rounded-full px-2 text-[11px] font-bold text-muted-foreground hover:text-foreground"
+      className="h-7 shrink-0 gap-1 rounded-full px-2 text-2xs font-bold text-muted-foreground hover:text-foreground"
       aria-label="KPI 대시보드를 PDF 보고서로 내보내기"
       data-admin-dashboard-kpi-pdf-export-trigger="true"
       onClick={onExport}
@@ -5607,7 +5607,7 @@ function AdminDashboardPeriodSelector({
               type="button"
               variant={isSelected ? "default" : "outline"}
               size="sm"
-              className="h-7 shrink-0 rounded-full px-2 text-[10px] font-bold"
+              className="h-7 shrink-0 rounded-full px-2 text-2xs font-bold"
               aria-pressed={isSelected}
               data-admin-dashboard-period-option={option.value}
               onClick={() => onChange(option.value)}
@@ -5623,7 +5623,7 @@ function AdminDashboardPeriodSelector({
             type="button"
             variant="outline"
             size="sm"
-            className="order-3 h-7 shrink-0 gap-1 rounded-full px-2 text-[10px] font-extrabold text-muted-foreground hover:text-foreground md:hidden"
+            className="order-3 h-7 shrink-0 gap-1 rounded-full px-2 text-2xs font-extrabold text-muted-foreground hover:text-foreground md:hidden"
             aria-label={`대시보드 타임프레임 설정: ${selectedOption.label}`}
             data-admin-dashboard-period-select-trigger="true"
           >
@@ -5640,7 +5640,7 @@ function AdminDashboardPeriodSelector({
         >
           <div className="mb-2 px-1">
             <p className="text-xs font-bold text-foreground">기간 설정</p>
-            <p className="mt-0.5 text-[11px] leading-4 text-muted-foreground">
+            <p className="mt-0.5 text-2xs leading-4 text-muted-foreground">
               KPI와 차트에 적용할 조회 기간을 선택합니다.
             </p>
           </div>
@@ -5657,7 +5657,7 @@ function AdminDashboardPeriodSelector({
                   type="button"
                   variant={isSelected ? "default" : "ghost"}
                   size="sm"
-                  className="h-11 min-h-11 min-w-[44px] rounded-xl px-2 text-[10px] font-bold"
+                  className="h-11 min-h-11 min-w-[44px] rounded-xl px-2 text-2xs font-bold"
                   style={{ minWidth: 44 }}
                   aria-pressed={isSelected}
                   data-admin-dashboard-period-option={option.value}
@@ -5704,14 +5704,14 @@ function AdminDashboardCollectionLogPopover({
     : "저장 확인 필요";
   const collectionStatusClassName = hasSavedSnapshot
     ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-400/30 dark:bg-emerald-950/40 dark:text-emerald-300"
-    : "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-400/30 dark:bg-amber-950/40 dark:text-amber-300";
+    : "border-border bg-secondary text-foreground";
   const workflowStatusLabel = !logs?.workflow.available
     ? "로그 권한 필요"
     : latestRun
       ? getCollectionLogStatusLabel(latestRun.status, latestRun.conclusion)
       : "실행 없음";
   const workflowStatusClassName = !logs?.workflow.available
-    ? "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-400/30 dark:bg-amber-950/40 dark:text-amber-300"
+    ? "border-border bg-secondary text-foreground"
     : getCollectionLogStatusClassName(
         latestRun?.status ?? "completed",
         latestRun?.conclusion ?? (isWorkflowHealthy ? "success" : "failure"),
@@ -5745,7 +5745,7 @@ function AdminDashboardCollectionLogPopover({
             <p className="text-sm font-extrabold text-foreground">
               데이터 수집 상태
             </p>
-            <p className="mt-0.5 truncate text-[11px] font-semibold text-muted-foreground">
+            <p className="mt-0.5 truncate text-2xs font-semibold text-muted-foreground">
               Supabase 저장 기준 ·{" "}
               {logs?.workflow.workflowId ?? "youtube-kpi-snapshot.yml"}
             </p>
@@ -5754,7 +5754,7 @@ function AdminDashboardCollectionLogPopover({
             type="button"
             variant="ghost"
             size="sm"
-            className="h-11 min-h-11 min-w-[44px] shrink-0 rounded-full px-2 text-[11px] font-bold md:h-7 md:min-h-0 md:min-w-0"
+            className="h-11 min-h-11 min-w-[44px] shrink-0 rounded-full px-2 text-2xs font-bold md:h-7 md:min-h-0 md:min-w-0"
             disabled={isFetching}
             onClick={onRefresh}
           >
@@ -5795,7 +5795,7 @@ function AdminDashboardCollectionLogPopover({
                         ? "최근 스냅샷 저장됨"
                         : "저장된 스냅샷 없음"}
                     </p>
-                    <p className="mt-1 text-[11px] leading-5 text-muted-foreground">
+                    <p className="mt-1 text-2xs leading-5 text-muted-foreground">
                       {hasSavedSnapshot
                         ? `마지막 저장: ${formatDashboardDateTime(snapshot?.fetchedAt)}`
                         : "수집 결과가 아직 저장되지 않았습니다."}
@@ -5804,7 +5804,7 @@ function AdminDashboardCollectionLogPopover({
                   <Badge
                     variant="outline"
                     className={cn(
-                      "shrink-0 rounded-full px-2 py-0.5 text-[10px]",
+                      "shrink-0 rounded-full px-2 py-0.5 text-2xs",
                       collectionStatusClassName,
                     )}
                   >
@@ -5813,7 +5813,7 @@ function AdminDashboardCollectionLogPopover({
                 </div>
 
                 {hasSavedSnapshot ? (
-                  <div className="mt-3 grid grid-cols-2 gap-2 text-[11px]">
+                  <div className="mt-3 grid grid-cols-2 gap-2 text-2xs">
                     <div className="rounded-xl bg-background/70 px-2 py-1.5">
                       <span className="block text-muted-foreground">영상</span>
                       <span className="mt-0.5 block font-bold text-foreground">
@@ -5854,7 +5854,7 @@ function AdminDashboardCollectionLogPopover({
                     <p className="text-xs font-extrabold text-foreground">
                       GitHub Actions 로그
                     </p>
-                    <p className="mt-1 text-[11px] leading-5 text-muted-foreground">
+                    <p className="mt-1 text-2xs leading-5 text-muted-foreground">
                       {logs?.workflow.available
                         ? latestRun
                           ? `최근 실행: #${latestRun.runNumber ?? "—"} · ${formatDashboardDateTime(latestRun.startedAt ?? latestRun.createdAt)}`
@@ -5866,7 +5866,7 @@ function AdminDashboardCollectionLogPopover({
                     <Badge
                       variant="outline"
                       className={cn(
-                        "rounded-full px-2 py-0.5 text-[10px]",
+                        "rounded-full px-2 py-0.5 text-2xs",
                         workflowStatusClassName,
                       )}
                     >
@@ -5890,7 +5890,7 @@ function AdminDashboardCollectionLogPopover({
                 </div>
 
                 {!logs?.workflow.available ? (
-                  <p className="mt-2 rounded-xl bg-muted/40 px-2 py-1.5 text-[10px] leading-4 text-muted-foreground">
+                  <p className="mt-2 rounded-xl bg-muted/40 px-2 py-1.5 text-2xs leading-4 text-muted-foreground">
                     서버 환경 변수에 GitHub 읽기 토큰이 없거나 권한이
                     부족합니다. GITHUB_ACTIONS_TOKEN 또는 GH_TOKEN을 설정하면
                     실행 로그도 표시됩니다.
@@ -5904,7 +5904,7 @@ function AdminDashboardCollectionLogPopover({
                       <span
                         key={job.id ?? job.name}
                         className={cn(
-                          "rounded-full border px-2 py-0.5 text-[10px] font-bold",
+                          "rounded-full border px-2 py-0.5 text-2xs font-bold",
                           getCollectionLogStatusClassName(
                             job.status,
                             job.conclusion,
@@ -5922,7 +5922,7 @@ function AdminDashboardCollectionLogPopover({
                 ) : null}
               </div>
 
-              <p className="text-[10px] leading-4 text-muted-foreground">
+              <p className="text-2xs leading-4 text-muted-foreground">
                 판정 기준: 최신 스냅샷이 저장되어 있으면 대시보드 데이터 수집은
                 정상으로 봅니다.
               </p>
@@ -6459,10 +6459,11 @@ function AdminDashboardManagementPanel({
     ],
   );
 
-  const videos = useMemo(
-    () => insightQuery.data?.videos ?? [],
-    [insightQuery.data?.videos],
-  );
+  const videos = useMemo(() => {
+    const cohortVideos = insightQuery.data?.videos ?? [];
+    if (cohortVideos.length > 0) return cohortVideos;
+    return growthInsightQuery.data?.videos ?? [];
+  }, [growthInsightQuery.data?.videos, insightQuery.data?.videos]);
   const growthVideos = useMemo(
     () => growthInsightQuery.data?.videos ?? [],
     [growthInsightQuery.data?.videos],
@@ -6489,12 +6490,37 @@ function AdminDashboardManagementPanel({
       }),
     [growthVideos],
   );
-  const hasPeriodGrowthComparison =
+  const periodViewValue = getDashboardPeriodMetricValue(
+    growthVideos,
+    period,
+    (video) => video.viewCount,
+    (video) => video.previousViewCount,
+  );
+  const periodLikeValue = getDashboardPeriodMetricValue(
+    growthVideos,
+    period,
+    (video) => video.likeCount,
+    (video) => video.previousLikeCount,
+  );
+  const periodCommentValue = getDashboardPeriodMetricValue(
+    growthVideos,
+    period,
+    (video) => video.commentCount,
+    (video) => video.previousCommentCount,
+  );
+  const videoSnapshotComparisonAvailable =
     period !== "ALL" &&
     hasDashboardSnapshotComparison(
       growthVideos,
       (video) => video.previousViewCount,
     );
+  const videoPeriodDeltasAreFlat =
+    videoSnapshotComparisonAvailable &&
+    periodViewValue === 0 &&
+    periodLikeValue === 0 &&
+    periodCommentValue === 0;
+  const hasPeriodGrowthComparison =
+    videoSnapshotComparisonAvailable && !videoPeriodDeltasAreFlat;
   const videosByInsightScore = useMemo(() => {
     if (!hasPeriodGrowthComparison) return videosByViews;
 
@@ -6510,24 +6536,6 @@ function AdminDashboardManagementPanel({
       )
     : videosByInsightScore;
   const topContentMetricMode = hasPeriodGrowthComparison ? "delta" : "current";
-  const periodViewValue = getDashboardPeriodMetricValue(
-    growthVideos,
-    period,
-    (video) => video.viewCount,
-    (video) => video.previousViewCount,
-  );
-  const periodLikeValue = getDashboardPeriodMetricValue(
-    growthVideos,
-    period,
-    (video) => video.likeCount,
-    (video) => video.previousLikeCount,
-  );
-  const periodCommentValue = getDashboardPeriodMetricValue(
-    growthVideos,
-    period,
-    (video) => video.commentCount,
-    (video) => video.previousCommentCount,
-  );
   const viewChange = calculateDashboardPeriodMetricChange(
     growthVideos,
     period,
@@ -6658,10 +6666,15 @@ function AdminDashboardManagementPanel({
     (sum, video) => sum + video.commentCount,
     0,
   );
-  const periodViewDisplayValue = periodViewValue ?? periodCohortViewValue;
-  const periodLikeDisplayValue = periodLikeValue ?? periodCohortLikeValue;
-  const periodCommentDisplayValue =
-    periodCommentValue ?? periodCohortCommentValue;
+  const periodViewDisplayValue = videoPeriodDeltasAreFlat
+    ? periodCohortViewValue
+    : (periodViewValue ?? periodCohortViewValue);
+  const periodLikeDisplayValue = videoPeriodDeltasAreFlat
+    ? periodCohortLikeValue
+    : (periodLikeValue ?? periodCohortLikeValue);
+  const periodCommentDisplayValue = videoPeriodDeltasAreFlat
+    ? periodCohortCommentValue
+    : (periodCommentValue ?? periodCohortCommentValue);
   const likeRate = getDashboardRatio(
     periodLikeDisplayValue,
     periodViewDisplayValue,
@@ -6718,6 +6731,25 @@ function AdminDashboardManagementPanel({
     ? "조회 증가 대비"
     : "조회수 대비";
   const channelStats = youtubeChannelQuery.data;
+  const channelViewDelta =
+    period !== "ALL" &&
+    typeof channelStats?.viewCount === "number" &&
+    typeof channelStats.previousViewCount === "number"
+      ? channelStats.viewCount - channelStats.previousViewCount
+      : null;
+  const viewCardValue =
+    videoPeriodDeltasAreFlat && channelViewDelta != null
+      ? channelViewDelta
+      : periodViewDisplayValue;
+  const viewCardChange =
+    videoPeriodDeltasAreFlat &&
+    typeof channelStats?.viewCount === "number" &&
+    typeof channelStats.previousViewCount === "number"
+      ? calculateDashboardChange(
+          channelStats.viewCount,
+          channelStats.previousViewCount,
+        )
+      : viewChange;
   const subscriberSparklinePoints = useMemo(
     () =>
       buildAdminDashboardChannelGrowthSparklinePoints(
@@ -7262,7 +7294,7 @@ function AdminDashboardManagementPanel({
               type="button"
               variant={isDashboardOrderEditorOpen ? "default" : "outline"}
               size="sm"
-              className="h-7 shrink-0 rounded-full px-2 text-[10px]"
+              className="h-7 shrink-0 rounded-full px-2 text-2xs"
               aria-label="KPI 카드 직접 드래그 순서 설정"
               aria-pressed={isDashboardOrderEditorOpen}
               disabled={isDashboardOrderLoading}
@@ -7283,7 +7315,7 @@ function AdminDashboardManagementPanel({
               type="button"
               variant="outline"
               size="sm"
-              className="h-7 shrink-0 rounded-full px-2 text-[10px]"
+              className="h-7 shrink-0 rounded-full px-2 text-2xs"
               disabled={
                 isDashboardOrderLoading ||
                 isDashboardOrderSaving ||
@@ -7324,7 +7356,7 @@ function AdminDashboardManagementPanel({
       </div>
       {shouldShowMobileDashboardLoadingPrompt ? (
         <p
-          className="mb-2 rounded-xl border border-border/70 bg-muted/30 px-3 py-2 text-[11px] font-semibold leading-5 text-muted-foreground md:hidden"
+          className="mb-2 rounded-xl border border-border/70 bg-muted/30 px-3 py-2 text-2xs font-semibold leading-5 text-muted-foreground md:hidden"
           data-admin-dashboard-mobile-loading-prompt="live"
         >
           KPI 데이터를 불러오는 중입니다. 모바일에서는 핵심 카드부터 순서대로 표시됩니다.
@@ -7333,7 +7365,7 @@ function AdminDashboardManagementPanel({
 
       {isDashboardOrderEditorOpen ? (
         <p
-          className="mb-2 shrink-0 text-[11px] font-semibold text-muted-foreground"
+          className="mb-2 shrink-0 text-2xs font-semibold text-muted-foreground"
           data-admin-dashboard-order-live-status="true"
         >
           {dashboardOrderMessage}
@@ -7392,11 +7424,11 @@ function AdminDashboardManagementPanel({
           )}
           style={getDashboardCardOrderStyle("views")}
           reorderProps={getDashboardCardReorderProps("views")}
-          value={isChartLoading ? "—" : formatNumber(periodViewDisplayValue)}
-          caption={`${periodMetricCaption} · 현재 전체 누적 ${formatNumber(cumulativeViewValue)}`}
-          delta={formatDashboardChangeLabel(viewChange)}
+          value={isChartLoading ? "—" : formatNumber(viewCardValue)}
+          caption={`${videoPeriodDeltasAreFlat ? `${selectedPeriodLabel} · 채널 조회 순증` : periodMetricCaption} · 현재 전체 누적 ${formatNumber(channelStats?.viewCount ?? cumulativeViewValue)}`}
+          delta={formatDashboardChangeLabel(viewCardChange)}
           deltaLabel="기간 대비"
-          progress={getDashboardChangeProgress(viewChange)}
+          progress={getDashboardChangeProgress(viewCardChange)}
           tone="sky"
           emphasis="primary"
           sparklineData={viewSparklineDisplayPoints}
@@ -8191,7 +8223,7 @@ function AdminSidebar({
         className={cn(
           "group relative flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap border text-left transition touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-reduce:transition-none",
           isDropdown
-            ? "min-h-9 w-full rounded-lg px-2 py-1.5 text-[13px]"
+            ? "min-h-9 w-full rounded-lg px-2 py-1.5 text-sm"
             : "min-h-9 w-full rounded-lg px-2 py-1 text-sm",
           !isDropdown &&
             isCollapsed &&
@@ -8218,31 +8250,20 @@ function AdminSidebar({
         </span>
         <span
           className={cn(
-            "min-w-0 flex-1 overflow-hidden whitespace-nowrap transition-opacity duration-100 motion-reduce:transition-none",
+            "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden whitespace-nowrap transition-opacity duration-100 motion-reduce:transition-none",
             !isDropdown &&
               (!showLabels || isCollapsed) &&
               "md:hidden md:w-0 md:flex-none md:opacity-0",
           )}
         >
-          <span className="block truncate font-semibold leading-5">
+          <span className="min-w-0 truncate font-semibold leading-5">
             {item.title}
           </span>
-          {item.badge && (
-            <span
-              className={cn(
-                "mt-0.5 block truncate text-[11px] font-semibold leading-4",
-                getSidebarBadgeClassName(section.label, isActive),
-              )}
-              data-admin-sidebar-badge-tone={section.label}
-            >
-              {item.badge}
-            </span>
-          )}
         </span>
         {itemStatus && (
           <span
             className={cn(
-              "ml-auto shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-bold leading-4 transition-all duration-100 motion-reduce:transition-none",
+              "ml-auto shrink-0 rounded-full border px-2 py-0.5 text-2xs font-bold leading-4 transition-all duration-100 motion-reduce:transition-none",
               itemStatus.urgent
                 ? isActive
                   ? "border-primary-foreground/30 bg-primary-foreground/15 text-primary-foreground"
@@ -8274,7 +8295,7 @@ function AdminSidebar({
               data-admin-sidebar-collapsed-tooltip="true"
             >
               <AdminDashboardTooltipLinesPanel
-                lines={item.badge ? [item.title, item.badge] : [item.title]}
+                lines={[item.title]}
                 dataAttribute="sidebar-collapsed"
                 className="max-w-[14rem]"
               />
@@ -8307,7 +8328,7 @@ function AdminSidebar({
             type="button"
             variant={isSidebarOrderEditMode ? "default" : "outline"}
             size="sm"
-            className="h-6 shrink-0 rounded-full px-2 text-[11px] font-bold"
+            className="h-6 shrink-0 rounded-full px-2 text-2xs font-bold"
             aria-pressed={isSidebarOrderEditMode}
             data-admin-sidebar-order-edit-toggle="true"
             onClick={() => {
@@ -8325,7 +8346,7 @@ function AdminSidebar({
             type="button"
             variant="outline"
             size="sm"
-            className="h-6 shrink-0 rounded-full px-2 text-[11px] font-bold"
+            className="h-6 shrink-0 rounded-full px-2 text-2xs font-bold"
             disabled={
               !isSidebarOrderEditMode ||
               !canLoadPreferences ||
@@ -8347,7 +8368,7 @@ function AdminSidebar({
 
       {!isSidebarOrderEditMode && (
         <p
-          className="mb-1.5 rounded-lg border border-dashed border-border bg-muted/25 px-2 py-1 text-[11px] leading-5 text-muted-foreground"
+          className="mb-1.5 rounded-lg border border-dashed border-border bg-muted/25 px-2 py-1 text-2xs leading-5 text-muted-foreground"
           data-admin-sidebar-order-edit-lock-message="true"
         >
           순서 편집을 켜야 이동 버튼이 활성화됩니다.
@@ -8362,7 +8383,7 @@ function AdminSidebar({
             data-admin-sidebar-order-section="compact"
           >
             <div className="flex h-5 items-center justify-between gap-1.5 px-1">
-              <span className="truncate text-[11px] font-semibold text-muted-foreground">
+              <span className="truncate text-2xs font-semibold text-muted-foreground">
                 {section.label}
               </span>
               <div className="flex shrink-0 gap-1">
@@ -8370,7 +8391,7 @@ function AdminSidebar({
                   type="button"
                   variant="ghost"
                   size="sm"
-                  className="h-5 w-5 rounded-md border-0 bg-transparent p-0 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
+                  className="h-5 w-5 rounded-md border-0 bg-transparent p-0 text-2xs text-muted-foreground hover:bg-muted hover:text-foreground"
                   aria-label={`${section.label} 섹션 앞으로`}
                   disabled={
                     !canLoadPreferences ||
@@ -8392,7 +8413,7 @@ function AdminSidebar({
                   type="button"
                   variant="ghost"
                   size="sm"
-                  className="h-5 w-5 rounded-md border-0 bg-transparent p-0 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
+                  className="h-5 w-5 rounded-md border-0 bg-transparent p-0 text-2xs text-muted-foreground hover:bg-muted hover:text-foreground"
                   aria-label={`${section.label} 섹션 뒤로`}
                   disabled={
                     !canLoadPreferences ||
@@ -8428,7 +8449,7 @@ function AdminSidebar({
                       type="button"
                       variant="ghost"
                       size="sm"
-                      className="h-5 w-5 rounded-md border-0 bg-transparent p-0 text-[11px] text-muted-foreground hover:bg-background/80 hover:text-foreground"
+                      className="h-5 w-5 rounded-md border-0 bg-transparent p-0 text-2xs text-muted-foreground hover:bg-background/80 hover:text-foreground"
                       aria-label={`${item.title} 메뉴 앞으로`}
                       disabled={
                         !canLoadPreferences ||
@@ -8455,7 +8476,7 @@ function AdminSidebar({
                       type="button"
                       variant="ghost"
                       size="sm"
-                      className="h-5 w-5 rounded-md border-0 bg-transparent p-0 text-[11px] text-muted-foreground hover:bg-background/80 hover:text-foreground"
+                      className="h-5 w-5 rounded-md border-0 bg-transparent p-0 text-2xs text-muted-foreground hover:bg-background/80 hover:text-foreground"
                       aria-label={`${item.title} 메뉴 뒤로`}
                       disabled={
                         !canLoadPreferences ||
@@ -8487,7 +8508,7 @@ function AdminSidebar({
       </div>
 
       <p
-        className="mt-2 rounded-lg bg-muted/30 px-2 py-1 text-[11px] leading-5 text-muted-foreground"
+        className="mt-2 rounded-lg bg-muted/30 px-2 py-1 text-2xs leading-5 text-muted-foreground"
         aria-live="polite"
       >
         {sidebarOrderMessage}
@@ -8533,7 +8554,7 @@ function AdminSidebar({
         </span>
         <span
           className={cn(
-            "ml-auto shrink-0 text-[10px] font-semibold text-muted-foreground",
+            "ml-auto shrink-0 text-2xs font-semibold text-muted-foreground",
             isCompactSidebar && "sr-only",
           )}
           aria-hidden="true"
@@ -8575,7 +8596,7 @@ function AdminSidebar({
           <p className="truncate text-sm font-extrabold text-foreground">
             관리자 콘솔
           </p>
-          <p className="mt-0.5 truncate text-[11px] text-muted-foreground">
+          <p className="mt-0.5 truncate text-2xs text-muted-foreground">
             현재 화면 · {activeSidebarLabel}
           </p>
         </div>
@@ -8584,7 +8605,7 @@ function AdminSidebar({
       <nav className="grid gap-1.5" aria-label="관리자 통합 메뉴">
         {orderedSidebarSections.map((section) => (
           <div key={section.label} className="min-w-0 rounded-xl bg-background/45 p-1">
-            <p className="px-1.5 pb-1 text-[10px] font-extrabold tracking-[0.08em] text-muted-foreground">
+            <p className="px-1.5 pb-1 text-2xs font-extrabold tracking-[0.08em] text-muted-foreground">
               {section.label}
             </p>
             {section.items.map((item) =>
@@ -8628,14 +8649,14 @@ function AdminSidebar({
           <p className="truncate text-sm font-extrabold text-foreground">
             {accountDisplayName}
           </p>
-          <p className="mt-0.5 truncate text-[11px] text-muted-foreground">
+          <p className="mt-0.5 truncate text-2xs text-muted-foreground">
             {accountEmail}
           </p>
         </div>
       </div>
 
       <div className="space-y-2" data-admin-sidebar-account-theme-section="true">
-        <p className="px-1 text-[11px] font-bold tracking-[0.08em] text-muted-foreground">
+        <p className="px-1 text-2xs font-bold tracking-[0.08em] text-muted-foreground">
           표시 모드
         </p>
         {renderThemeControls("sidebar", { compact: false })}
@@ -8678,7 +8699,7 @@ function AdminSidebar({
             <span className="block truncate text-xs font-extrabold text-foreground">
               {accountDisplayName}
             </span>
-            <span className="block truncate text-[10px] font-semibold text-muted-foreground">
+            <span className="block truncate text-2xs font-semibold text-muted-foreground">
               계정·표시·메뉴 설정
             </span>
           </span>
@@ -8726,7 +8747,7 @@ function AdminSidebar({
             <p className="truncate text-sm font-extrabold text-foreground">
               관리자 콘솔
             </p>
-            <p className="mt-0.5 truncate text-[11px] leading-4 text-muted-foreground">
+            <p className="mt-0.5 truncate text-2xs leading-4 text-muted-foreground">
               현재 화면 · {activeSidebarLabel}
             </p>
           </div>
@@ -8796,7 +8817,7 @@ function AdminSidebar({
             <h2 className="truncate whitespace-nowrap text-sm font-bold tracking-normal text-foreground text-pretty">
               관리자 콘솔
             </h2>
-            <p className="mt-0.5 whitespace-nowrap text-[11px] leading-4 text-muted-foreground">
+            <p className="mt-0.5 whitespace-nowrap text-2xs leading-4 text-muted-foreground">
               현재 화면 · {activeSidebarLabel}
             </p>
           </div>
@@ -8878,7 +8899,7 @@ function AdminSidebar({
               >
                 <p
                   className={cn(
-                    "px-2.5 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground transition-opacity duration-100 motion-reduce:transition-none",
+                    "px-2.5 text-2xs font-semibold tracking-[0.08em] text-muted-foreground transition-opacity duration-100 motion-reduce:transition-none",
                     (!showLabels || isCollapsed) &&
                       "md:h-px md:px-0 md:opacity-0",
                   )}
@@ -9041,7 +9062,7 @@ function getAdminAuditStatusClassName(status: string) {
     case "failed":
       return "border-destructive/20 bg-destructive/10 text-destructive";
     default:
-      return "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-400/30 dark:bg-amber-950/40 dark:text-amber-300";
+      return "border-border bg-secondary text-foreground";
   }
 }
 
@@ -9205,14 +9226,14 @@ function AuditPlaceholder() {
                   <Badge
                     variant="outline"
                     className={cn(
-                      "w-fit shrink-0 rounded-full px-2 py-0.5 text-[10px]",
+                      "w-fit shrink-0 rounded-full px-2 py-0.5 text-2xs",
                       getAdminAuditStatusClassName(event.status),
                     )}
                   >
                     {event.status}
                   </Badge>
                 </div>
-                <dl className="mt-2 grid gap-1 text-[11px] leading-5 text-muted-foreground sm:grid-cols-2">
+                <dl className="mt-2 grid gap-1 text-2xs leading-5 text-muted-foreground sm:grid-cols-2">
                   <div>
                     <dt className="font-semibold text-foreground">감사 ID</dt>
                     <dd className="break-all font-mono">{event.id}</dd>
@@ -10258,7 +10279,7 @@ function AdminYoutubeThumbnailModuleLoadingSkeleton() {
               </CardTitle>
               <Badge
                 variant="outline"
-                className="h-6 shrink-0 rounded-full px-2 text-[10px]"
+                className="h-6 shrink-0 rounded-full px-2 text-2xs"
               >
                 준비 중
               </Badge>
diff --git a/apps/web/components/admin/AdminEmbeddedModuleShell.tsx b/apps/web/components/admin/AdminEmbeddedModuleShell.tsx
index a2248d7651..23d7d48bc0 100644
--- a/apps/web/components/admin/AdminEmbeddedModuleShell.tsx
+++ b/apps/web/components/admin/AdminEmbeddedModuleShell.tsx
@@ -71,7 +71,7 @@ export function AdminEmbeddedModuleShell({
                 </h2>
               </div>
               <div
-                className="mt-0.5 min-w-0 truncate text-[11px] text-muted-foreground"
+                className="mt-0.5 min-w-0 truncate text-2xs text-muted-foreground"
                 data-admin-module-summary="true"
               >
                 {summary}
diff --git a/apps/web/components/admin/AdminOverviewDashboard.tsx b/apps/web/components/admin/AdminOverviewDashboard.tsx
index 2e035f9e19..8135354f38 100644
--- a/apps/web/components/admin/AdminOverviewDashboard.tsx
+++ b/apps/web/components/admin/AdminOverviewDashboard.tsx
@@ -982,7 +982,7 @@ function AdminMapOverviewCanvas({
             {showAdminMapOverlays && (
               <span
                 className={cn(
-                  "rounded-full border px-2 py-0.5 text-[10px] font-semibold shadow-sm backdrop-blur sm:px-2.5 sm:py-1 sm:text-[11px]",
+                  "rounded-full border px-2 py-0.5 text-2xs font-semibold shadow-sm backdrop-blur sm:px-2.5 sm:py-1 sm:text-2xs",
                   hasOverlayError
                     ? "border-destructive/30 bg-destructive/10 text-destructive"
                     : "border-border/70 bg-card/90 text-muted-foreground"
@@ -1232,7 +1232,7 @@ function AdminMapInfoPanel({
 
               <div className="absolute inset-x-0 bottom-0 bg-black/75 p-2.5 text-white">
                 <div className="min-w-0">
-                  <p className="text-[10px] font-bold tracking-[0.14em] text-white/75">
+                  <p className="text-2xs font-bold tracking-[0.14em] text-white/75">
                     선택한 마커
                   </p>
                   <h2
@@ -1247,7 +1247,7 @@ function AdminMapInfoPanel({
                   {selectedRestaurant.address ?? "주소 정보 확인 필요"}
                 </p>
 
-                <div className="mt-1.5 flex flex-wrap gap-1 text-[11px] font-semibold">
+                <div className="mt-1.5 flex flex-wrap gap-1 text-2xs font-semibold">
                   <span className="max-w-full break-words rounded-full bg-white/15 px-2 py-0.5 text-white backdrop-blur [overflow-wrap:anywhere]">
                     {selectedRestaurant.category ?? "카테고리 확인"}
                   </span>
@@ -1267,7 +1267,7 @@ function AdminMapInfoPanel({
         ) : (
           <div className="flex items-start justify-between gap-3">
             <div className="min-w-0">
-              <p className="text-[11px] font-bold tracking-[0.12em] text-primary">
+              <p className="text-2xs font-bold tracking-[0.12em] text-primary">
                 선택한 마커
               </p>
               <h2
@@ -1307,7 +1307,7 @@ function AdminMapInfoPanel({
         data-admin-route-export="tzudong-json-v1"
       >
         <div className="flex items-center justify-between gap-2">
-          <p className="text-[11px] font-bold tracking-[0.12em] text-muted-foreground">
+          <p className="text-2xs font-bold tracking-[0.12em] text-muted-foreground">
             촬영 동선
           </p>
           {isLoading ? (
@@ -1370,7 +1370,7 @@ function AdminMapInfoPanel({
               <span className="block text-xs font-bold text-foreground">
                 {preset.label}
               </span>
-              <span className="mt-0.5 block text-[11px] leading-4 text-muted-foreground">
+              <span className="mt-0.5 block text-2xs leading-4 text-muted-foreground">
                 {preset.description}
               </span>
             </button>
@@ -1411,7 +1411,7 @@ function AdminMapInfoPanel({
           data-admin-route-readiness-panel="local-heuristic"
         >
           <div className="flex items-center justify-between gap-2">
-            <p className="text-[11px] font-bold tracking-[0.12em] text-primary">
+            <p className="text-2xs font-bold tracking-[0.12em] text-primary">
               동선 준비도
             </p>
             <Badge
@@ -1426,7 +1426,7 @@ function AdminMapInfoPanel({
               {routeAhpAssessment.score.toFixed(1)}점 후보
             </Badge>
           </div>
-          <p className="mt-1 text-[11px] leading-4 text-muted-foreground">
+          <p className="mt-1 text-2xs leading-4 text-muted-foreground">
             로컬 후보 품질, 도로 경로 확보, 좌표 데이터 충분성 기준의
             준비도입니다.
             {routeModeOption
@@ -1434,7 +1434,7 @@ function AdminMapInfoPanel({
               : null}
           </p>
           {routeAhpAssessment.blockers.length > 0 && (
-            <ul className="mt-1.5 space-y-0.5 text-[11px] leading-4 text-muted-foreground">
+            <ul className="mt-1.5 space-y-0.5 text-2xs leading-4 text-muted-foreground">
               {routeAhpAssessment.blockers.map((blocker) => (
                 <li key={blocker}>• {blocker}</li>
               ))}
@@ -1443,7 +1443,7 @@ function AdminMapInfoPanel({
         </div>
 
         <div
-          className="mt-1.5 grid grid-cols-2 gap-1.5 rounded-xl bg-background/70 p-1.5 text-[11px] text-muted-foreground"
+          className="mt-1.5 grid grid-cols-2 gap-1.5 rounded-xl bg-background/70 p-1.5 text-2xs text-muted-foreground"
           data-admin-route-quality-panel="true"
         >
           <div>
@@ -1478,7 +1478,7 @@ function AdminMapInfoPanel({
 
         {directionsStatus === "fallback" && directionsFallbackMessage ? (
           <div
-            className="mt-1.5 rounded-xl border border-amber-200 bg-amber-50/80 p-2 text-[11px] leading-4 text-amber-900"
+            className="mt-1.5 rounded-xl border border-amber-200 bg-amber-50/80 p-2 text-2xs leading-4 text-amber-900"
             data-admin-directions-unavailable="true"
             role="status"
           >
@@ -1489,7 +1489,7 @@ function AdminMapInfoPanel({
 
         {routePlan.warnings.length > 0 ? (
           <div
-            className="mt-1.5 rounded-xl bg-amber-50 p-1.5 text-[11px] leading-4 text-amber-900"
+            className="mt-1.5 rounded-xl bg-amber-50 p-1.5 text-2xs leading-4 text-amber-900"
             data-admin-route-warning-list="true"
           >
             <p className="font-bold">동선 주의사항</p>
@@ -1525,7 +1525,7 @@ function AdminMapInfoPanel({
                         {restaurant.category ?? "카테고리 확인"}
                       </p>
                       {index > 0 && routePlan.legs[index - 1] && (
-                        <p className="mt-0.5 text-[11px] font-semibold text-primary">
+                        <p className="mt-0.5 text-2xs font-semibold text-primary">
                           이전 지점에서{" "}
                           {routePlan.legs[index - 1].distanceKm.toFixed(1)}km ·
                           약{" "}
@@ -1546,7 +1546,7 @@ function AdminMapInfoPanel({
               데이터가 부족하면 임의 동선을 만들지 않습니다.
             </p>
           )}
-          <p className="mt-2 text-[11px] leading-4 text-muted-foreground">
+          <p className="mt-2 text-2xs leading-4 text-muted-foreground">
             {directionsStatus === "ready"
               ? "네이버 Directions 5 기준 실제 도로 주행 경로를 지도에 표시합니다."
               : routeMode === "driving"
@@ -1554,7 +1554,7 @@ function AdminMapInfoPanel({
                 : "네이버 Directions 5는 자동차만 지원하므로 도보·혼합은 근거리 촬영 초안으로 표시합니다."}
           </p>
           <div
-            className="mt-2 rounded-xl bg-background/70 p-2 text-[11px] leading-4 text-muted-foreground"
+            className="mt-2 rounded-xl bg-background/70 p-2 text-2xs leading-4 text-muted-foreground"
             data-admin-route-export="tzudong-json-v1"
             data-admin-route-provider-cache={routeDirectionsReadback.providerCache}
             data-admin-route-candidate-source={routeCandidateReadback.candidateSource}
diff --git a/apps/web/components/admin/AdminRestaurantModal.tsx b/apps/web/components/admin/AdminRestaurantModal.tsx
index b7c5102a32..80414af429 100644
--- a/apps/web/components/admin/AdminRestaurantModal.tsx
+++ b/apps/web/components/admin/AdminRestaurantModal.tsx
@@ -1137,7 +1137,7 @@ export function AdminRestaurantModal({
                     </p>
                     <div className="mt-3 flex flex-wrap gap-1.5" aria-label="맛집 수정 상태 요약">
                         {adminRestaurantStatusChips.map((chip) => (
-                            <Badge key={chip} variant="outline" className="rounded-full bg-background/70 text-[11px]">
+                            <Badge key={chip} variant="outline" className="rounded-full bg-background/70 text-2xs">
                                 {chip}
                             </Badge>
                         ))}
@@ -1151,7 +1151,7 @@ export function AdminRestaurantModal({
                 {adminRestaurantProgressSteps.map((step) => (
                     <div key={step.label} className="space-y-1">
                         <div className={cn("h-1.5 rounded-full", step.isComplete ? "bg-red-800" : "bg-muted")} />
-                        <span className={cn("block text-center text-[11px]", step.isComplete ? "font-semibold text-foreground" : "text-muted-foreground")}>
+                        <span className={cn("block text-center text-2xs", step.isComplete ? "font-semibold text-foreground" : "text-muted-foreground")}>
                             {step.label}
                         </span>
                     </div>
@@ -1178,7 +1178,7 @@ export function AdminRestaurantModal({
                     <p className="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>
                 </div>
                 {badge && (
-                    <Badge variant="secondary" className="shrink-0 rounded-full text-[11px]">
+                    <Badge variant="secondary" className="shrink-0 rounded-full text-2xs">
                         {badge}
                     </Badge>
                 )}
diff --git a/apps/web/components/admin/AdminRestaurantRefreshHistoryPanel.tsx b/apps/web/components/admin/AdminRestaurantRefreshHistoryPanel.tsx
index f5a0ff2b67..1f7f2ba275 100644
--- a/apps/web/components/admin/AdminRestaurantRefreshHistoryPanel.tsx
+++ b/apps/web/components/admin/AdminRestaurantRefreshHistoryPanel.tsx
@@ -200,7 +200,7 @@ function ManagementStatusSummary({ items }: { items: StatusSummaryItem[] }) {
 
 function RefreshWorkflowSteps() {
   return (
-    <div className="grid grid-cols-2 gap-1 text-[11px] text-muted-foreground sm:flex sm:flex-wrap">
+    <div className="grid grid-cols-2 gap-1 text-2xs text-muted-foreground sm:flex sm:flex-wrap">
       {[
         "1. 승인 맛집 스냅샷 수집",
         "2. 외부 후보와 현재값 비교",
@@ -526,13 +526,13 @@ function RefreshCandidateDetailPanel({
                   {readbackLabel(selectedCandidate.readback_state)}
                 </Badge>
                 {selectedCandidate.readback_state.checked_at ? (
-                  <span className="text-[11px] text-muted-foreground">
+                  <span className="text-2xs text-muted-foreground">
                     {formatDate(selectedCandidate.readback_state.checked_at)}
                   </span>
                 ) : null}
               </div>
               <p
-                className="mt-2 text-[11px]"
+                className="mt-2 text-2xs"
                 data-admin-restaurant-refresh-evidence-summary="true"
               >
                 근거:{" "}
@@ -571,7 +571,7 @@ function RefreshCandidateDetailPanel({
               />
               <span>
                 승인과 동시에 현재 맛집 값 guarded apply
-                <span className="block text-[11px]">
+                <span className="block text-2xs">
                   상호·전화·주소·좌표 변경 후보만 적용됩니다. 폐업 의심 후보는
                   자동 적용할 수 없습니다.
                 </span>
diff --git a/apps/web/components/admin/AdminReviewPanel.tsx b/apps/web/components/admin/AdminReviewPanel.tsx
index 42c68aefcf..b0c4c948d1 100644
--- a/apps/web/components/admin/AdminReviewPanel.tsx
+++ b/apps/web/components/admin/AdminReviewPanel.tsx
@@ -698,7 +698,7 @@ export default function AdminReviewPanel({ isOpen, onClose, onToggleCollapse, is
                                         <div className="flex items-center gap-3 text-xs text-muted-foreground">
                                             <span className="flex items-center gap-1">
                                                 <Avatar className="h-4 w-4">
-                                                    <AvatarFallback className="text-[10px]">
+                                                    <AvatarFallback className="text-2xs">
                                                         {selectedReview.profiles?.nickname?.[0] || '익'}
                                                     </AvatarFallback>
                                                 </Avatar>
@@ -780,7 +780,7 @@ const ReviewCard = forwardRef<HTMLDivElement, ReviewCardProps>(
                             <div className="flex items-center gap-2 text-xs text-muted-foreground">
                                 <span className="flex items-center gap-1">
                                     <Avatar className="h-4 w-4">
-                                        <AvatarFallback className="text-[10px]">
+                                        <AvatarFallback className="text-2xs">
                                             {review.profiles?.nickname?.[0] || '익'}
                                         </AvatarFallback>
                                     </Avatar>
diff --git a/apps/web/components/admin/AdminUsersPanel.tsx b/apps/web/components/admin/AdminUsersPanel.tsx
index 057cc468f4..63a3d6b4b2 100644
--- a/apps/web/components/admin/AdminUsersPanel.tsx
+++ b/apps/web/components/admin/AdminUsersPanel.tsx
@@ -123,7 +123,7 @@ function SummaryMetric({ label, value, tone = "default", isLoading = false }: {
       )}
       data-admin-users-summary-metric={label}
     >
-      <p className="truncate text-[11px] font-medium leading-4 text-muted-foreground sm:text-xs">{label}</p>
+      <p className="truncate text-2xs font-medium leading-4 text-muted-foreground sm:text-xs">{label}</p>
       <p className="mt-0.5 text-lg font-bold leading-6 tracking-[-0.04em] text-foreground sm:text-xl">
         {isLoading ? <span className="inline-block h-5 w-10 rounded-full bg-muted/70 align-middle animate-pulse motion-reduce:animate-none sm:h-6 sm:w-12" aria-hidden="true" /> : value}
       </p>
@@ -384,7 +384,7 @@ export default function AdminUsersPanel() {
           </div>
           <div className="flex flex-wrap gap-1.5 sm:gap-2" aria-label="사용자 관리 안전 원칙" data-admin-module-actions="top-right">
             {['관리자 확인 필수', '자기 잠금 방지', '상태 재확인', '삭제 대신 비활성화'].map((label) => (
-              <Badge key={label} variant="outline" className="max-w-full rounded-full border-primary/25 bg-background px-2.5 text-[11px] text-primary sm:text-xs">{label}</Badge>
+              <Badge key={label} variant="outline" className="max-w-full rounded-full border-primary/25 bg-background px-2.5 text-2xs text-primary sm:text-xs">{label}</Badge>
             ))}
           </div>
         </div>
diff --git a/apps/web/components/admin/CategorySidebar.tsx b/apps/web/components/admin/CategorySidebar.tsx
index 064e93e521..9ba2d9cb4a 100644
--- a/apps/web/components/admin/CategorySidebar.tsx
+++ b/apps/web/components/admin/CategorySidebar.tsx
@@ -4,11 +4,13 @@ interface CategorySidebarProps {
   stats: CategoryStats;
   selectedStatuses: EvaluationRecordStatus[];
   onSelectStatuses: (statuses: EvaluationRecordStatus[]) => void;
+  showStatusChips?: boolean;
   children?: React.ReactNode;
 }
 
 export function CategorySidebar({
   stats,
+  showStatusChips = true,
   children,
 }: CategorySidebarProps) {
   // 그룹 1: 전체, 미처리, 승인됨, 삭제 (통계만 표시)
@@ -23,7 +25,7 @@ export function CategorySidebar({
   const statCategoriesGroup2 = [
     { label: '승인 대기', count: stats.ready_for_approval },
     { label: '미확정 좌표', count: stats.unconfirmed_map },
-    { label: 'Missing', count: stats.missing },
+    { label: '누락', count: stats.missing },
     { label: '평가 미대상', count: stats.not_selected },
   ];
   const statCategoriesDesktop = [...statCategoriesGroup1, ...statCategoriesGroup2];
@@ -46,11 +48,13 @@ export function CategorySidebar({
         </div>
       )}
 
-      <div className="hidden lg:flex lg:w-auto lg:items-center lg:justify-end lg:gap-2 lg:overflow-x-auto lg:pb-0">
-        {statCategoriesDesktop.map((category, index) =>
-          renderStatChip(category.label, category.count, `desktop-${index}`)
-        )}
-      </div>
+      {showStatusChips ? (
+        <div className="hidden lg:flex lg:w-auto lg:items-center lg:justify-end lg:gap-2 lg:overflow-x-auto lg:pb-0">
+          {statCategoriesDesktop.map((category, index) =>
+            renderStatChip(category.label, category.count, `desktop-${index}`)
+          )}
+        </div>
+      ) : null}
 
     </div>
   );
diff --git a/apps/web/components/admin/EvaluationDetailView.tsx b/apps/web/components/admin/EvaluationDetailView.tsx
index 79a4e648c8..72e293334e 100644
--- a/apps/web/components/admin/EvaluationDetailView.tsx
+++ b/apps/web/components/admin/EvaluationDetailView.tsx
@@ -109,7 +109,7 @@ function NumberBadge({ index, tone }: { index: number; tone: EvaluationTone }) {
         <Badge
             variant="outline"
             className={cn(
-                'flex h-6 w-6 shrink-0 items-center justify-center rounded-lg p-0 text-[11px] font-bold',
+                'flex h-6 w-6 shrink-0 items-center justify-center rounded-lg p-0 text-2xs font-bold',
                 evaluationToneClasses[tone].badge,
             )}
         >
@@ -163,7 +163,7 @@ function SourceNameRow({
         <div className="grid grid-cols-[86px_minmax(0,1fr)_auto] items-start gap-2 rounded-lg bg-muted/35 px-2 py-1.5">
             <span className="text-xs font-medium text-muted-foreground">{label}</span>
             <span className={cn('min-w-0 overflow-wrap-anywhere text-xs font-bold text-foreground', valueClassName)}>{value}</span>
-            <Badge variant="outline" className="h-5 shrink-0 px-1.5 text-[10px] text-muted-foreground">
+            <Badge variant="outline" className="h-5 shrink-0 px-1.5 text-2xs text-muted-foreground">
                 {provider}
             </Badge>
         </div>
@@ -185,21 +185,21 @@ function BooleanBadge({ value, rerunNeeded = false }: { value: boolean | null |
     if (value === undefined || value === null) {
         if (!rerunNeeded) {
             return (
-                <Badge variant="outline" className="h-6 px-2 text-[11px] font-bold text-muted-foreground">
+                <Badge variant="outline" className="h-6 px-2 text-2xs font-bold text-muted-foreground">
                     -
                 </Badge>
             );
         }
 
         return (
-            <Badge variant="outline" className="h-6 px-2 text-[11px] font-bold text-muted-foreground">
+            <Badge variant="outline" className="h-6 px-2 text-2xs font-bold text-muted-foreground">
                 -
             </Badge>
         );
     }
 
     return (
-        <Badge className={cn('h-6 px-2 text-[11px] font-bold', value ? 'bg-emerald-600' : 'bg-destructive')}>
+        <Badge className={cn('h-6 px-2 text-2xs font-bold', value ? 'bg-emerald-600' : 'bg-destructive')}>
             {value ? '일치' : '불일치'}
         </Badge>
     );
@@ -208,7 +208,7 @@ function BooleanBadge({ value, rerunNeeded = false }: { value: boolean | null |
 function InfoItem({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) {
     return (
         <div className={cn('min-w-0 rounded-xl border border-border/70 bg-background/70 px-3 py-2', className)}>
-            <dt className="text-[11px] font-semibold text-muted-foreground">{label}</dt>
+            <dt className="text-2xs font-semibold text-muted-foreground">{label}</dt>
             <dd className="mt-1 overflow-wrap-anywhere text-sm leading-5 text-foreground">{children}</dd>
         </div>
     );
@@ -389,7 +389,7 @@ export const EvaluationDetailView = memo(function EvaluationDetailView({ record,
 
             <SectionPanel title="검수 결과" description="영상 근거와 상호·주소 근거를 기준으로 승인 전 확인해야 할 항목입니다.">
                 <div className="space-y-3">
-                    <EvalItem index={0} title="맛집명 검증" tone="pink" value={record.approved_name ? <Badge className="bg-emerald-600 text-[11px]">승인됨 · {record.approved_name}</Badge> : null}>
+                    <EvalItem index={0} title="맛집명 검증" tone="pink" value={record.approved_name ? <Badge className="bg-emerald-600 text-2xs">승인됨 · {record.approved_name}</Badge> : null}>
                         <div className="space-y-1.5">
                             <SourceNameRow
                                 label="원본 이름"
@@ -464,7 +464,7 @@ export const EvaluationDetailView = memo(function EvaluationDetailView({ record,
                         index={5}
                         title="주소 정합성"
                         tone="orange"
-                        value={<Badge className={cn('h-6 px-2 text-[11px] font-bold', getAddressConsistencyBadgeClass(record))}>{addressConsistency.label}</Badge>}
+                        value={<Badge className={cn('h-6 px-2 text-2xs font-bold', getAddressConsistencyBadgeClass(record))}>{addressConsistency.label}</Badge>}
                     >
                         <div className="space-y-2">
                             <p className="font-semibold text-foreground">{addressConsistency.headline}</p>
@@ -474,7 +474,7 @@ export const EvaluationDetailView = memo(function EvaluationDetailView({ record,
                                     <span className="text-xs font-bold text-orange-950">운영 분류</span>
                                     <Badge
                                         variant="outline"
-                                        className={cn('h-6 px-2 text-[11px] font-bold', addressGuidanceToneClasses[addressGuidance.tone])}
+                                        className={cn('h-6 px-2 text-2xs font-bold', addressGuidanceToneClasses[addressGuidance.tone])}
                                     >
                                         {addressGuidance.label}
                                     </Badge>
@@ -491,7 +491,7 @@ export const EvaluationDetailView = memo(function EvaluationDetailView({ record,
                                     <Badge
                                         variant="outline"
                                         className={cn(
-                                            'h-6 px-2 text-[11px] font-bold',
+                                            'h-6 px-2 text-2xs font-bold',
                                             addressAhp.score !== null && addressAhp.score >= 98
                                                 ? 'border-emerald-300 bg-emerald-50 text-emerald-700'
                                                 : 'border-sky-300 bg-background/70 text-sky-700',
@@ -508,7 +508,7 @@ export const EvaluationDetailView = memo(function EvaluationDetailView({ record,
                                 {addressAhp.evidenceFamilies.length > 0 && (
                                     <div className="mt-2 flex flex-wrap gap-1.5">
                                         {addressAhp.evidenceFamilies.map((family) => (
-                                            <Badge key={`${record.id}-ahp-family-${family}`} variant="outline" className="bg-background/70 text-[10px]">
+                                            <Badge key={`${record.id}-ahp-family-${family}`} variant="outline" className="bg-background/70 text-2xs">
                                                 {family}
                                             </Badge>
                                         ))}
@@ -523,7 +523,7 @@ export const EvaluationDetailView = memo(function EvaluationDetailView({ record,
                                             <Badge
                                                 key={`${record.id}-address-signal-${signal.kind}`}
                                                 variant="outline"
-                                                className={cn('h-6 px-2 text-[11px] font-bold', addressGuidanceToneClasses[signal.tone])}
+                                                className={cn('h-6 px-2 text-2xs font-bold', addressGuidanceToneClasses[signal.tone])}
                                             >
                                                 {signal.label}
                                             </Badge>
diff --git a/apps/web/components/admin/EvaluationSlideView.tsx b/apps/web/components/admin/EvaluationSlideView.tsx
index 3ece5fd8f0..23ef1d81a0 100644
--- a/apps/web/components/admin/EvaluationSlideView.tsx
+++ b/apps/web/components/admin/EvaluationSlideView.tsx
@@ -219,7 +219,7 @@ export function EvaluationSlideView({
             pending: { label: '미처리', variant: 'secondary' },
             approved: { label: '승인됨', variant: 'default' },
             hold: { label: '보류', variant: 'outline' },
-            missing: { label: 'Missing', variant: 'destructive' },
+            missing: { label: '누락', variant: 'destructive' },
             geocoding_failed: { label: '지오코딩 실패', variant: 'destructive' },
             not_selected: { label: '평가 미대상', variant: 'outline' },
             deleted: { label: '삭제됨', variant: 'destructive' },
diff --git a/apps/web/components/admin/EvaluationTableNew.tsx b/apps/web/components/admin/EvaluationTableNew.tsx
index 8bdfcd3f7a..52ad4577fc 100644
--- a/apps/web/components/admin/EvaluationTableNew.tsx
+++ b/apps/web/components/admin/EvaluationTableNew.tsx
@@ -392,7 +392,7 @@ const EvaluationTableRow = memo(forwardRef<HTMLTableRowElement, EvaluationTableR
               <div className="line-clamp-2 text-xs font-medium sm:text-sm">
                 {getAdminEvaluationVideoLabel(record)}
               </div>
-              <div className="mt-1 text-[11px] text-muted-foreground sm:text-xs">
+              <div className="mt-1 text-2xs text-muted-foreground sm:text-xs">
                 {hasAdminEvaluationYoutubeTitle(record) ? null : '제목 없음 · '}
                 {new Date(record.youtube_meta?.publishedAt || record.created_at).toLocaleDateString('ko-KR')}
               </div>
@@ -1163,7 +1163,7 @@ export function EvaluationTable({
                 <h2 id={titleId} className="line-clamp-2 text-sm font-semibold">
                   {record.restaurant_name || record.name || '이름 없음'}
                 </h2>
-                <p className="mt-0.5 text-[11px] text-muted-foreground">
+                <p className="mt-0.5 text-2xs text-muted-foreground">
                   {publishedAt} | ID {record.id.slice(0, 8)}
                 </p>
               </div>
@@ -1209,14 +1209,14 @@ export function EvaluationTable({
                   {getAdminEvaluationVideoLabel(record)}
                 </p>
                 {!hasAdminEvaluationYoutubeTitle(record) && (
-                  <p className="mt-1 text-[11px] text-amber-700">제목 없음 · 메타 백필 필요</p>
+                  <p className="mt-1 text-2xs text-amber-700">제목 없음 · 메타 백필 필요</p>
                 )}
                 {canonicalYoutubeUrl && (
                   <a
                     href={canonicalYoutubeUrl}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="mt-1 inline-flex items-center gap-1 truncate text-[11px] text-blue-600 hover:underline"
+                    className="mt-1 inline-flex items-center gap-1 truncate text-2xs text-blue-600 hover:underline"
                     onClick={(e) => e.stopPropagation()}
                   >
                     영상 열기
@@ -1228,10 +1228,10 @@ export function EvaluationTable({
 
             <div className="-mx-1 mt-3 overflow-x-auto px-1 scrollbar-hide [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
               <div className="flex min-w-max flex-nowrap gap-1.5">
-                <Badge variant="outline" className="shrink-0 rounded-full text-[11px]">방문 {visitValue}</Badge>
-                <Badge variant="outline" className="shrink-0 rounded-full text-[11px]">추론 {inferenceValue}</Badge>
-                <Badge variant="outline" className="shrink-0 rounded-full text-[11px]">근거 {groundingValue}</Badge>
-                <Badge variant="outline" className="shrink-0 rounded-full text-[11px]">주소 {geocodingText}</Badge>
+                <Badge variant="outline" className="shrink-0 rounded-full text-2xs">방문 {visitValue}</Badge>
+                <Badge variant="outline" className="shrink-0 rounded-full text-2xs">추론 {inferenceValue}</Badge>
+                <Badge variant="outline" className="shrink-0 rounded-full text-2xs">근거 {groundingValue}</Badge>
+                <Badge variant="outline" className="shrink-0 rounded-full text-2xs">주소 {geocodingText}</Badge>
               </div>
             </div>
 
@@ -1339,7 +1339,7 @@ export function EvaluationTable({
             </Button>
 
             {isExpanded && (
-              <div className="mt-2 space-y-2 rounded-xl bg-muted/35 p-2.5 text-[11px]">
+              <div className="mt-2 space-y-2 rounded-xl bg-muted/35 p-2.5 text-2xs">
                 <div>
                   <p className="font-semibold text-foreground">평가 항목</p>
                   <dl className="mt-2 grid grid-cols-2 gap-x-3 gap-y-1.5">
diff --git a/apps/web/components/admin/SubmissionDetailView.tsx b/apps/web/components/admin/SubmissionDetailView.tsx
index 69b9f35bb5..4566d97fc5 100644
--- a/apps/web/components/admin/SubmissionDetailView.tsx
+++ b/apps/web/components/admin/SubmissionDetailView.tsx
@@ -720,12 +720,12 @@ export function SubmissionDetailView({
                                     <div>
                                         <p className="font-medium text-gray-900">{sanitizePlainText(result.title)}</p>
                                         <p className="text-gray-500 mt-0.5">{result.address}</p>
-                                        {result.roadAddress && <p className="text-gray-400 text-[10px]">{result.roadAddress}</p>}
+                                        {result.roadAddress && <p className="text-gray-400 text-2xs">{result.roadAddress}</p>}
                                     </div>
                                     {result.isMatch ? (
-                                        <Badge variant="default" className="bg-green-600 text-[10px] shrink-0">주소 일치</Badge>
+                                        <Badge variant="default" className="bg-green-600 text-2xs shrink-0">주소 일치</Badge>
                                     ) : (
-                                        <Badge variant="outline" className="text-gray-500 text-[10px] shrink-0">불일치</Badge>
+                                        <Badge variant="outline" className="text-gray-500 text-2xs shrink-0">불일치</Badge>
                                     )}
                                 </div>
                             ))}
@@ -927,18 +927,18 @@ export function SubmissionDetailView({
                                                     <p className="font-medium line-clamp-2">{metaData.title}</p>
                                                     <p className="text-muted-foreground">
                                                         {new Date(metaData.publishedAt).toLocaleDateString('ko-KR')} · {formatDuration(metaData.duration)}
-                                                        {metaData.is_shorts && <Badge variant="outline" className="ml-1 text-[10px]">Shorts</Badge>}
+                                                        {metaData.is_shorts && <Badge variant="outline" className="ml-1 text-2xs">Shorts</Badge>}
                                                     </p>
                                                     <div className="flex items-center gap-1">
                                                         {metaData.ads_info.is_ads ? (
                                                             <>
-                                                                <Badge variant="destructive" className="text-[10px]">광고</Badge>
+                                                                <Badge variant="destructive" className="text-2xs">광고</Badge>
                                                                 {metaData.ads_info.what_ads && metaData.ads_info.what_ads.length > 0 && (
                                                                     <span className="text-muted-foreground">({metaData.ads_info.what_ads.join(', ')})</span>
                                                                 )}
                                                             </>
                                                         ) : (
-                                                            <Badge variant="secondary" className="text-[10px]">광고 아님</Badge>
+                                                            <Badge variant="secondary" className="text-2xs">광고 아님</Badge>
                                                         )}
                                                     </div>
                                                 </div>
@@ -1011,18 +1011,18 @@ export function SubmissionDetailView({
                                                                 <p className="text-muted-foreground">
                                                                     {originalMeta.published_at ? new Date(originalMeta.published_at).toLocaleDateString('ko-KR') : '-'}
                                                                     {originalMeta.duration && ` · ${formatDuration(originalMeta.duration)}`}
-                                                                    {originalMeta.is_shorts && <Badge variant="outline" className="ml-1 text-[10px]">Shorts</Badge>}
+                                                                    {originalMeta.is_shorts && <Badge variant="outline" className="ml-1 text-2xs">Shorts</Badge>}
                                                                 </p>
                                                                 <div className="flex items-center gap-1">
                                                                     {originalMeta.is_ads ? (
                                                                         <>
-                                                                            <Badge variant="destructive" className="text-[10px]">광고</Badge>
+                                                                            <Badge variant="destructive" className="text-2xs">광고</Badge>
                                                                             {originalMeta.what_ads && originalMeta.what_ads.length > 0 && (
                                                                                 <span className="text-muted-foreground">({originalMeta.what_ads.join(', ')})</span>
                                                                             )}
                                                                         </>
                                                                     ) : (
-                                                                        <Badge variant="secondary" className="text-[10px]">광고 아님</Badge>
+                                                                        <Badge variant="secondary" className="text-2xs">광고 아님</Badge>
                                                                     )}
                                                                 </div>
                                                             </div>
@@ -1039,7 +1039,7 @@ export function SubmissionDetailView({
                                                                         {originalYoutubeUrl}
                                                                     </a>
                                                                 ) : <span className="text-gray-400 text-xs">기존 YouTube 링크 없음</span>}
-                                                                <p className="text-[10px] text-gray-400 mt-1">메타데이터 없음</p>
+                                                                <p className="text-2xs text-gray-400 mt-1">메타데이터 없음</p>
                                                             </div>
                                                         )}
                                                     </div>
diff --git a/apps/web/components/admin/SubmissionListView.tsx b/apps/web/components/admin/SubmissionListView.tsx
index 4631dbabe8..cebe2e16f8 100644
--- a/apps/web/components/admin/SubmissionListView.tsx
+++ b/apps/web/components/admin/SubmissionListView.tsx
@@ -220,7 +220,7 @@ const ReviewPhotoItem = memo(function ReviewPhotoItem({
             <Badge
                 variant={labelVariant === 'receipt' ? 'default' : 'secondary'}
                 className={cn(
-                    "absolute top-1 left-1 text-[10px] px-1",
+                    "absolute top-1 left-1 text-2xs px-1",
                     labelVariant === 'receipt' && "bg-yellow-600"
                 )}
             >
@@ -1070,7 +1070,7 @@ export function SubmissionListView({
         reviews.length,
     ]);
     const tabTriggerClassName = cn(
-        "h-8 gap-1.5 px-2 text-[11px] xl:h-9 xl:min-w-[128px] xl:justify-center xl:px-3 xl:text-sm",
+        "h-8 gap-1.5 px-2 text-2xs xl:h-9 xl:min-w-[128px] xl:justify-center xl:px-3 xl:text-sm",
         isMobile && "justify-center gap-1"
     );
     const listContainerClassName = "h-full min-h-0 overflow-hidden rounded-lg border bg-card";
@@ -1082,19 +1082,19 @@ export function SubmissionListView({
     );
     const listSearchInputClassName = "h-9 pl-8 pr-8 text-sm xl:h-9 xl:text-sm";
     const listCardBaseClassName = "cursor-pointer rounded-lg border p-3 transition-colors hover:bg-muted/40 xl:p-3.5";
-    const listTitleClassName = "truncate text-sm font-semibold xl:text-[15px]";
-    const listSubTextClassName = "mt-1 line-clamp-2 text-xs text-muted-foreground xl:text-[13px]";
-    const listMetaClassName = "mt-2 flex items-center justify-between text-[11px] text-muted-foreground xl:text-xs";
+    const listTitleClassName = "truncate text-sm font-semibold xl:text-sm";
+    const listSubTextClassName = "mt-1 line-clamp-2 text-xs text-muted-foreground xl:text-sm";
+    const listMetaClassName = "mt-2 flex items-center justify-between text-2xs text-muted-foreground xl:text-xs";
     const listActionButtonClassName = "h-8 px-2 text-xs xl:h-8 xl:px-2.5 xl:text-xs";
     const listActionIconButtonClassName = "ml-auto h-8 w-8 p-0";
-    const listCategoryBadgeClassName = "px-1.5 py-0 text-[10px] xl:text-[11px]";
-    const summaryBadgeBaseClassName = "px-2 py-0 text-[11px] leading-none tabular-nums xl:px-2.5 xl:text-sm";
+    const listCategoryBadgeClassName = "px-1.5 py-0 text-2xs xl:text-2xs";
+    const summaryBadgeBaseClassName = "px-2 py-0 text-2xs leading-none tabular-nums xl:px-2.5 xl:text-sm";
     const summaryBadgeWithIconClassName = cn(summaryBadgeBaseClassName, "gap-1");
-    const summaryLabelClassName = "text-[11px] text-muted-foreground xl:text-sm";
+    const summaryLabelClassName = "text-2xs text-muted-foreground xl:text-sm";
     const getTabCountBadgeVariant = (count: number) => (count > 0 ? "secondary" : "outline");
     const getTabCountBadgeClassName = (count: number) =>
         cn(
-            "ml-1 min-w-[20px] justify-center px-1.5 py-0 text-[11px] leading-none tabular-nums xl:text-sm",
+            "ml-1 min-w-[20px] justify-center px-1.5 py-0 text-2xs leading-none tabular-nums xl:text-sm",
             count > 0 ? "bg-yellow-100 text-yellow-700" : "border-border bg-muted text-muted-foreground",
             isMobile && "ml-0 min-w-[18px] px-1"
         );
@@ -1290,9 +1290,9 @@ export function SubmissionListView({
     };
     const getSubmissionQueueReasonBadgeClassName = (reason: AdminSubmissionQueueReason) =>
         cn(
-            "max-w-full rounded-full px-2 py-0 text-[10px] font-semibold leading-5 xl:text-[11px]",
+            "max-w-full rounded-full px-2 py-0 text-2xs font-semibold leading-5 xl:text-2xs",
             reason.severity === 'danger' && "border-red-200 bg-red-50 text-red-700 dark:border-red-900/70 dark:bg-red-950/25 dark:text-red-200",
-            reason.severity === 'warning' && "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/70 dark:bg-amber-950/25 dark:text-amber-200",
+            reason.severity === 'warning' && "border-border bg-secondary text-foreground",
             reason.severity === 'info' && "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900/70 dark:bg-blue-950/25 dark:text-blue-200"
         );
 
@@ -1324,7 +1324,7 @@ export function SubmissionListView({
                 {placement === 'card' && summary.reasons.length > reasons.length && (
                     <Badge
                         variant="outline"
-                        className="rounded-full px-2 py-0 text-[10px] leading-5 text-muted-foreground xl:text-[11px]"
+                        className="rounded-full px-2 py-0 text-2xs leading-5 text-muted-foreground xl:text-2xs"
                         data-admin-submission-safety-badge="more"
                     >
                         +{summary.reasons.length - reasons.length}
@@ -2049,7 +2049,7 @@ export function SubmissionListView({
         >
             <div className="flex min-h-12 items-center justify-between gap-2 border-b px-3 py-2">
                 <div className="min-w-0">
-                    <p className="text-[11px] font-semibold text-primary">제보 상세 작업</p>
+                    <p className="text-2xs font-semibold text-primary">제보 상세 작업</p>
                     <h3 className="truncate text-sm font-bold">{selectedSubmission?.restaurant_name || '왼쪽 목록에서 제보를 선택하세요'}</h3>
                 </div>
                 {selectedSubmission && (
@@ -2214,7 +2214,7 @@ export function SubmissionListView({
                 </Button>
             </Label>
             {ocrRerunningIds.has(review.id) && !review.ocr_processed_at && (
-                <Card className="border-amber-200 bg-amber-50 p-3 text-sm text-amber-700 shadow-none dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
+                <Card className="border-border bg-secondary p-3 text-sm text-foreground shadow-none">
                     <Loader2 className="mr-2 inline h-4 w-4 animate-spin motion-reduce:animate-none" />
                     OCR 처리 중... {ocrCountdowns[review.id] || 0}초 후 완료 예정
                 </Card>
@@ -2281,7 +2281,7 @@ export function SubmissionListView({
         >
             <div className="flex min-h-12 items-center justify-between gap-2 border-b px-3 py-2">
                 <div className="min-w-0">
-                    <p className="text-[11px] font-semibold text-primary">리뷰 상세 작업</p>
+                    <p className="text-2xs font-semibold text-primary">리뷰 상세 작업</p>
                     <h3 className="truncate text-sm font-bold">{selectedReview?.restaurants?.name || '왼쪽 목록에서 리뷰를 선택하세요'}</h3>
                 </div>
                 {selectedReview && (
@@ -2325,7 +2325,7 @@ export function SubmissionListView({
                                 <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
                                     <span className="flex items-center gap-1">
                                         <Avatar className="h-4 w-4">
-                                            <AvatarFallback className="text-[10px]">
+                                            <AvatarFallback className="text-2xs">
                                                 {selectedReview.profiles?.nickname?.[0] || '?'}
                                             </AvatarFallback>
                                         </Avatar>
@@ -2661,7 +2661,7 @@ export function SubmissionListView({
                                     variant="outline"
                                     onClick={handleRunOcr}
                                     disabled={isOcrRunning || (ocrStatus?.pending === 0)}
-                                    className="h-8 justify-center gap-1 text-[11px]"
+                                    className="h-8 justify-center gap-1 text-2xs"
                                 >
                                     {isOcrRunning ? (
                                         <Loader2 className="h-3 w-3 animate-spin motion-reduce:animate-none" />
@@ -2676,7 +2676,7 @@ export function SubmissionListView({
                                     onClick={handleResetAllOcr}
                                     disabled={isOcrRunning}
                                     className={cn(
-                                        "h-8 justify-center gap-1 text-[11px] text-orange-600 border-orange-300 hover:bg-orange-50 dark:text-orange-400 dark:border-orange-700 dark:hover:bg-orange-950/30"
+                                        "h-8 justify-center gap-1 text-2xs text-orange-600 border-orange-300 hover:bg-orange-50 dark:text-orange-400 dark:border-orange-700 dark:hover:bg-orange-950/30"
                                     )}
                                 >
                                     <RefreshCw className="h-3 w-3" />
@@ -2879,7 +2879,7 @@ export function SubmissionListView({
                                                 type="button"
                                                 variant={isSelected ? "default" : "outline"}
                                                 size="sm"
-                                                className="h-7 rounded-full px-2 text-[11px]"
+                                                className="h-7 rounded-full px-2 text-2xs"
                                                 aria-pressed={isSelected}
                                                 disabled={isUnavailable}
                                                 data-admin-submission-queue-reason-filter-option={option.value}
@@ -2887,7 +2887,7 @@ export function SubmissionListView({
                                             >
                                                 {option.label}
                                                 <span className={cn(
-                                                    "ml-1 rounded-full px-1.5 py-0 text-[10px] leading-4 tabular-nums",
+                                                    "ml-1 rounded-full px-1.5 py-0 text-2xs leading-4 tabular-nums",
                                                     isSelected ? "bg-primary-foreground/15 text-primary-foreground" : "bg-muted text-muted-foreground"
                                                 )}>
                                                     {option.count}
@@ -2917,7 +2917,7 @@ export function SubmissionListView({
                                                 <div className="flex items-start justify-between gap-2">
                                                     <div className="min-w-0">
                                                         <p className={listTitleClassName}>{submission.restaurant_name}{submission.submission_type === 'recommend' && <span className="ml-1 text-xs font-normal text-primary">쯔양 제보</span>}</p>
-                                                        <p className="mt-1 line-clamp-1 text-xs text-muted-foreground xl:text-[13px]">
+                                                        <p className="mt-1 line-clamp-1 text-xs text-muted-foreground xl:text-sm">
                                                             {submission.restaurant_address || '-'}
                                                         </p>
                                                     </div>
@@ -2937,7 +2937,7 @@ export function SubmissionListView({
                                                         </Badge>
                                                     ))}
                                                     {!submission.restaurant_categories?.length && (
-                                                        <span className="text-[11px] text-muted-foreground">카테고리 없음</span>
+                                                        <span className="text-2xs text-muted-foreground">카테고리 없음</span>
                                                     )}
                                                 </div>
 
@@ -2948,7 +2948,7 @@ export function SubmissionListView({
                                                                 {submission.recommendation_reason || submission.items[0]?.tzuyang_review || '추천 사유 없음'}
                                                             </p>
                                                             {submission.items[0]?.youtube_link && (
-                                                                <p className="line-clamp-1 text-[11px] text-primary">{submission.items[0].youtube_link}</p>
+                                                                <p className="line-clamp-1 text-2xs text-primary">{submission.items[0].youtube_link}</p>
                                                             )}
                                                         </>
                                                     ) : (
@@ -2959,7 +2959,7 @@ export function SubmissionListView({
                                                                 </p>
                                                             ))}
                                                             {submission.items.length > 2 && (
-                                                                <span className="text-[10px] text-muted-foreground">
+                                                                <span className="text-2xs text-muted-foreground">
                                                                     +{submission.items.length - 2}개 리뷰
                                                                 </span>
                                                             )}
diff --git a/apps/web/components/admin/TrendProposalQueue.tsx b/apps/web/components/admin/TrendProposalQueue.tsx
index 7f0c37d6cb..f25a2c3aaa 100644
--- a/apps/web/components/admin/TrendProposalQueue.tsx
+++ b/apps/web/components/admin/TrendProposalQueue.tsx
@@ -219,7 +219,7 @@ export function TrendProposalQueue() {
     >
       <div className="flex min-w-0 items-start justify-between gap-2">
         <div className="min-w-0">
-          <p className="text-[11px] font-bold tracking-[0.12em] text-primary">트렌드 제안</p>
+          <p className="text-2xs font-bold tracking-[0.12em] text-primary">트렌드 제안</p>
           <h3 className="break-words text-sm font-bold text-foreground [overflow-wrap:anywhere]">오버레이 제안 검토</h3>
         </div>
         <Badge variant="outline" className="shrink-0 rounded-full border-primary/25 text-primary">
@@ -249,11 +249,11 @@ export function TrendProposalQueue() {
                   <p className="break-words text-sm font-bold text-foreground [overflow-wrap:anywhere]">{proposal.label}</p>
                   <p className="mt-0.5 break-words text-xs text-muted-foreground [overflow-wrap:anywhere]">{proposal.restaurant.name}</p>
                 </div>
-                <Badge variant="outline" className="shrink-0 rounded-full text-[10px]">
+                <Badge variant="outline" className="shrink-0 rounded-full text-2xs">
                   {formatScore(proposal.score)}
                 </Badge>
               </div>
-              <div className="mt-1 flex flex-wrap gap-1 text-[10px] font-semibold text-muted-foreground">
+              <div className="mt-1 flex flex-wrap gap-1 text-2xs font-semibold text-muted-foreground">
                 <span className="max-w-full break-words rounded-full bg-primary/5 px-2 py-0.5 text-primary [overflow-wrap:anywhere]">{proposal.overlayType}</span>
                 <span className="max-w-full break-words rounded-full bg-muted px-2 py-0.5 [overflow-wrap:anywhere]">{formatWindow(proposal)}</span>
                 <span className="max-w-full break-words rounded-full bg-muted px-2 py-0.5 [overflow-wrap:anywhere]">근거 {proposal.evidenceSummary.observationCount}개</span>
@@ -270,7 +270,7 @@ export function TrendProposalQueue() {
             <div className="space-y-2">
               <div className="flex items-start justify-between gap-2">
                 <div className="min-w-0">
-                  <p className="text-[11px] font-bold tracking-[0.12em] text-muted-foreground">선택 제안</p>
+                  <p className="text-2xs font-bold tracking-[0.12em] text-muted-foreground">선택 제안</p>
                   <h4 className="break-words text-base font-bold text-foreground [overflow-wrap:anywhere]">{selectedProposal.label}</h4>
                 </div>
                 <Badge variant="outline" className="rounded-full">
@@ -278,7 +278,7 @@ export function TrendProposalQueue() {
                 </Badge>
               </div>
               <p className="break-words text-xs leading-5 text-muted-foreground [overflow-wrap:anywhere]">{selectedProposal.description ?? "설명 없음"}</p>
-              <div className="grid grid-cols-2 gap-1.5 text-[11px] text-muted-foreground">
+              <div className="grid grid-cols-2 gap-1.5 text-2xs text-muted-foreground">
                 <div className="rounded-lg bg-muted/35 p-1.5">
                   <p className="font-bold text-foreground">근거 신선도</p>
                   <p>{selectedProposal.evidenceSummary.freshness}</p>
@@ -295,9 +295,9 @@ export function TrendProposalQueue() {
               >
                 <p className="text-xs font-bold text-primary">미리보기 해시</p>
                 {previewQuery.isFetching ? (
-                  <p className="mt-1 text-[11px] text-muted-foreground">오버레이 미리보기를 계산하는 중입니다.</p>
+                  <p className="mt-1 text-2xs text-muted-foreground">오버레이 미리보기를 계산하는 중입니다.</p>
                 ) : previewQuery.data ? (
-                  <dl className="mt-1 space-y-1 text-[11px] text-muted-foreground">
+                  <dl className="mt-1 space-y-1 text-2xs text-muted-foreground">
                     <div className="min-w-0">
                       <dt className="font-bold text-foreground">previewHash</dt>
                       <dd className="break-all font-mono">{previewQuery.data.confirmation.previewHash}</dd>
@@ -308,7 +308,7 @@ export function TrendProposalQueue() {
                     </div>
                   </dl>
                 ) : (
-                  <p className="mt-1 text-[11px] text-muted-foreground">미리보기 생성 실패 시 승인하지 않습니다.</p>
+                  <p className="mt-1 text-2xs text-muted-foreground">미리보기 생성 실패 시 승인하지 않습니다.</p>
                 )}
               </div>
 
@@ -366,16 +366,16 @@ export function TrendProposalQueue() {
                     제안 승인
                   </Button>
                 </div>
-                <p className="text-[11px] leading-4 text-muted-foreground">
+                <p className="text-2xs leading-4 text-muted-foreground">
                   승인하려면 정확히 “오버레이 적용”을 입력합니다. 승인은 오버레이 적용, 감사 이벤트, 제안 상태 변경을 하나의 원자 RPC로 처리합니다.
                 </p>
                 {rejectMutation.data ? (
-                  <p className="break-all rounded-lg bg-emerald-50 p-1.5 text-[11px] font-semibold text-emerald-900">
+                  <p className="break-all rounded-lg bg-emerald-50 p-1.5 text-2xs font-semibold text-emerald-900">
                     검토 이벤트 {rejectMutation.data.reviewEvent.eventId} 기록 완료 · {rejectMutation.data.status}
                   </p>
                 ) : null}
                 {approveMutation.data ? (
-                  <p className="break-all rounded-lg bg-emerald-50 p-1.5 text-[11px] font-semibold text-emerald-900" data-trend-proposal-approval-readback="true">
+                  <p className="break-all rounded-lg bg-emerald-50 p-1.5 text-2xs font-semibold text-emerald-900" data-trend-proposal-approval-readback="true">
                     승인 감사 {approveMutation.data.proposal.overlayAuditId} 기록 완료 · {approveMutation.data.status}
                   </p>
                 ) : null}
diff --git a/apps/web/components/admin/evaluation-status-filter-options.ts b/apps/web/components/admin/evaluation-status-filter-options.ts
index 76b6810785..f1c9c3eb02 100644
--- a/apps/web/components/admin/evaluation-status-filter-options.ts
+++ b/apps/web/components/admin/evaluation-status-filter-options.ts
@@ -5,7 +5,7 @@ export const PRIMARY_STATUS_FILTER_OPTIONS = [
   { value: 'deleted', label: '삭제됨' },
   { value: 'ready_for_approval', label: '승인 대기' },
   { value: 'unconfirmed_map', label: '미확정 좌표' },
-  { value: 'missing', label: 'Missing' },
+  { value: 'missing', label: '누락' },
   { value: 'not_selected', label: '평가 미대상' },
 ] as const;
 
diff --git a/apps/web/components/admin/pipeline/AdminPipelineDashboard.tsx b/apps/web/components/admin/pipeline/AdminPipelineDashboard.tsx
index 522a02a459..d3605db7cb 100644
--- a/apps/web/components/admin/pipeline/AdminPipelineDashboard.tsx
+++ b/apps/web/components/admin/pipeline/AdminPipelineDashboard.tsx
@@ -195,7 +195,7 @@ export function AdminPipelineDashboard() {
           로컬 control-plane이 없으면 GitHub Actions 크롤러 최근 실행을 보여 줍니다. enqueue는 로컬 API가 있을 때만 동작합니다.
         </p>
       </header>
-      <div className="flex flex-wrap gap-2 text-[11px]">
+      <div className="flex flex-wrap gap-2 text-2xs">
         <span data-admin-pipeline-hardware={query.data?.hardware ?? "unknown"}>
           hardware: {query.data?.hardware ?? "unknown"}
         </span>
diff --git a/apps/web/components/admin/storyboard/AdminStoryboardGenerator.tsx b/apps/web/components/admin/storyboard/AdminStoryboardGenerator.tsx
index 83158938d9..793bab55c5 100644
--- a/apps/web/components/admin/storyboard/AdminStoryboardGenerator.tsx
+++ b/apps/web/components/admin/storyboard/AdminStoryboardGenerator.tsx
@@ -2185,7 +2185,7 @@ function StoryboardThinkingTracePanel({
 
   return (
     <details
-      className="mt-2 rounded-xl border border-border/70 bg-muted/35 px-2.5 py-2 text-[11px]"
+      className="mt-2 rounded-xl border border-border/70 bg-muted/35 px-2.5 py-2 text-2xs"
       data-storyboard-thinking-trace="true"
     >
       <summary className="flex cursor-pointer list-none items-center justify-between gap-2 font-semibold">
@@ -2224,7 +2224,7 @@ function StoryboardThinkingTracePanel({
                 <span className="min-w-0 break-words font-medium [overflow-wrap:anywhere]">
                   {entry.label}
                 </span>
-                <span className="shrink-0 text-[10px] text-muted-foreground">
+                <span className="shrink-0 text-2xs text-muted-foreground">
                   {statusText}
                 </span>
               </div>
@@ -2253,7 +2253,7 @@ function StoryboardImageGenerationProgressPanel({
 
   return (
     <div
-      className="mt-2 rounded-xl border border-border/70 bg-background/80 p-2 text-[11px] text-foreground shadow-sm dark:bg-slate-950/35"
+      className="mt-2 rounded-xl border border-border/70 bg-background/80 p-2 text-2xs text-foreground shadow-sm dark:bg-slate-950/35"
       data-storyboard-image-generation-progress="true"
       aria-label={`${progress.label} ${progress.completed}/${progress.total}컷 완료`}
     >
@@ -2298,7 +2298,7 @@ function StoryboardImageGenerationProgressPanel({
               <span className="font-medium">{cut.label}</span>
               <span
                 className={cn(
-                  "inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium",
+                  "inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-2xs font-medium",
                   cut.status === "done" &&
                     "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
                   cut.status === "failed" &&
@@ -8198,7 +8198,7 @@ function LegacyAdminStoryboardGenerator({
                             <span>스토리보드 기록</span>
                             <Badge
                               variant="secondary"
-                              className="px-1.5 text-[10px]"
+                              className="px-1.5 text-2xs"
                               data-storyboard-history-status-label="true"
                             >
                               {storyboardHistoryStatus === "loading"
@@ -8210,7 +8210,7 @@ function LegacyAdminStoryboardGenerator({
                                     : "없음"}
                             </Badge>
                           </div>
-                          <p className="mt-0.5 truncate text-[11px] text-muted-foreground">
+                          <p className="mt-0.5 truncate text-2xs text-muted-foreground">
                             이전에 만든 결과를 이 페이지에서 다시 불러옵니다.
                           </p>
                         </div>
@@ -8258,7 +8258,7 @@ function LegacyAdminStoryboardGenerator({
                       {storyboardHistoryError ? (
                         <div
                           className={cn(
-                            "rounded-xl px-2.5 py-2 text-[11px]",
+                            "rounded-xl px-2.5 py-2 text-2xs",
                             storyboardHistoryStatus === "stale"
                               ? "bg-amber-500/10 text-amber-800 dark:text-amber-200"
                               : "bg-destructive/10 text-destructive",
@@ -8279,7 +8279,7 @@ function LegacyAdminStoryboardGenerator({
 
                       {storyboardHistoryStatus === "empty" ? (
                         <div
-                          className="rounded-xl bg-muted/40 px-2.5 py-2 text-[11px] text-muted-foreground"
+                          className="rounded-xl bg-muted/40 px-2.5 py-2 text-2xs text-muted-foreground"
                           data-storyboard-history-empty="true"
                         >
                           아직 저장된 실제 생성 기록이 없습니다. 채팅에서
@@ -8311,7 +8311,7 @@ function LegacyAdminStoryboardGenerator({
                               <div
                                 key={historyCase.id}
                                 className={cn(
-                                  "grid gap-2 rounded-xl p-2 text-[11px] sm:grid-cols-[72px_minmax(0,1fr)]",
+                                  "grid gap-2 rounded-xl p-2 text-2xs sm:grid-cols-[72px_minmax(0,1fr)]",
                                   isSelectedHistory
                                     ? "bg-primary/5 ring-1 ring-primary/30"
                                     : "bg-muted/35",
@@ -8335,7 +8335,7 @@ function LegacyAdminStoryboardGenerator({
                                       data-storyboard-history-preview-image="true"
                                     />
                                   ) : (
-                                    <div className="grid h-full place-items-center bg-muted/50 text-[10px] font-semibold text-muted-foreground">
+                                    <div className="grid h-full place-items-center bg-muted/50 text-2xs font-semibold text-muted-foreground">
                                       이미지 없음
                                     </div>
                                   )}
@@ -8362,7 +8362,7 @@ function LegacyAdminStoryboardGenerator({
                                           ? "secondary"
                                           : "outline"
                                       }
-                                      className="shrink-0 px-1.5 text-[10px]"
+                                      className="shrink-0 px-1.5 text-2xs"
                                       data-storyboard-history-source-label="true"
                                     >
                                       {historyTrace.mode === "actual"
@@ -8375,7 +8375,7 @@ function LegacyAdminStoryboardGenerator({
                                       type="button"
                                       variant="secondary"
                                       size="sm"
-                                      className="h-7 rounded-full px-2 text-[11px]"
+                                      className="h-7 rounded-full px-2 text-2xs"
                                       onClick={() => {
                                         void applyStoryboardHistoryResult(
                                           historyCase,
@@ -8415,7 +8415,7 @@ function LegacyAdminStoryboardGenerator({
                                       type="button"
                                       variant="ghost"
                                       size="sm"
-                                      className="h-7 rounded-full px-2 text-[11px]"
+                                      className="h-7 rounded-full px-2 text-2xs"
                                       disabled={proofSummaries.length === 0}
                                       onClick={() =>
                                         setOpenStoryboardHistoryProofId(
@@ -8431,20 +8431,20 @@ function LegacyAdminStoryboardGenerator({
                                   </div>
                                   {isProofOpen && proofSummaries.length ? (
                                     <div
-                                      className="rounded-lg border border-border/70 bg-background/80 p-2 text-[10px] leading-4"
+                                      className="rounded-lg border border-border/70 bg-background/80 p-2 text-2xs leading-4"
                                       data-storyboard-history-proof-panel="true"
                                     >
                                       <div className="flex flex-wrap items-center gap-1.5">
                                         <Badge
                                           variant="secondary"
-                                          className="px-1.5 text-[10px]"
+                                          className="px-1.5 text-2xs"
                                           data-storyboard-history-proof-provider="true"
                                         >
                                           이미지 확인 완료
                                         </Badge>
                                         <Badge
                                           variant="outline"
-                                          className="px-1.5 text-[10px]"
+                                          className="px-1.5 text-2xs"
                                           data-storyboard-history-proof-model="true"
                                         >
                                           안전 확인됨
@@ -8532,7 +8532,7 @@ function LegacyAdminStoryboardGenerator({
                           <p className="truncate text-sm font-bold">
                             이미지 설정
                           </p>
-                          <p className="text-[11px] text-muted-foreground">
+                          <p className="text-2xs text-muted-foreground">
                             기본 OAuth · 고급 로컬 · API Key 백업
                           </p>
                         </div>
@@ -8579,10 +8579,10 @@ function LegacyAdminStoryboardGenerator({
                           }
                           data-storyboard-api-router-oauth-transport="server"
                         >
-                          <span className="block text-[11px] font-bold">
+                          <span className="block text-2xs font-bold">
                             기본
                           </span>
-                          <span className="block text-[10px] opacity-80">
+                          <span className="block text-2xs opacity-80">
                             {storyboardImageProviderReadiness.status ===
                               "ready" &&
                             storyboardImageProviderReadiness.providerId ===
@@ -8620,10 +8620,10 @@ function LegacyAdminStoryboardGenerator({
                           }
                           data-storyboard-api-router-oauth-transport="local-bridge"
                         >
-                          <span className="block text-[11px] font-bold">
+                          <span className="block text-2xs font-bold">
                             고급 로컬
                           </span>
-                          <span className="block text-[10px] opacity-80">
+                          <span className="block text-2xs opacity-80">
                             {storyboardLocalBridgeStatus === "connected"
                               ? "연결됨"
                               : storyboardLocalBridgeStatus === "checking"
@@ -8650,13 +8650,13 @@ function LegacyAdminStoryboardGenerator({
                       >
                         <div className="min-w-0">
                           <p
-                            className="truncate text-[11px] font-semibold"
+                            className="truncate text-2xs font-semibold"
                             data-storyboard-api-router-status="true"
                           >
                             사용: {storyboardImageApiRouterView.label}
                           </p>
                           <p
-                            className="truncate text-[10px] text-muted-foreground"
+                            className="truncate text-2xs text-muted-foreground"
                             data-storyboard-api-router-summary="true"
                             data-storyboard-codex-oauth-copy="true"
                           >
@@ -8678,7 +8678,7 @@ function LegacyAdminStoryboardGenerator({
                         </div>
                         <Badge
                           variant="secondary"
-                          className="h-6 shrink-0 rounded-full px-2 text-[10px]"
+                          className="h-6 shrink-0 rounded-full px-2 text-2xs"
                           data-storyboard-api-router-label="true"
                         >
                           gpt-image-2
@@ -8697,13 +8697,13 @@ function LegacyAdminStoryboardGenerator({
                         <div className="flex items-center justify-between gap-2">
                           <Label
                             htmlFor="storyboard-browser-openai-api-key"
-                            className="text-[11px] font-semibold"
+                            className="text-2xs font-semibold"
                           >
                             API Key 백업
                           </Label>
                           <button
                             type="button"
-                            className={`h-6 shrink-0 rounded-full px-2 text-[10px] font-semibold transition motion-reduce:transition-none ${
+                            className={`h-6 shrink-0 rounded-full px-2 text-2xs font-semibold transition motion-reduce:transition-none ${
                               storyboardImageRouteChoice ===
                               "browser-openai-api-key"
                                 ? "bg-primary text-primary-foreground"
@@ -8767,7 +8767,7 @@ function LegacyAdminStoryboardGenerator({
                               </Button>
                             </div>
                             <p
-                              className="text-[10px] leading-4 text-muted-foreground"
+                              className="text-2xs leading-4 text-muted-foreground"
                               data-storyboard-browser-api-key-memory-only-copy="true"
                               data-storyboard-browser-api-key-model-policy="gpt-image-2-only"
                             >
@@ -8776,7 +8776,7 @@ function LegacyAdminStoryboardGenerator({
                             </p>
                             <div className="flex flex-wrap items-center gap-2">
                               <p
-                                className="min-w-0 flex-1 text-[11px] text-muted-foreground"
+                                className="min-w-0 flex-1 text-2xs text-muted-foreground"
                                 data-storyboard-browser-api-key-status={
                                   isStoryboardBrowserOpenAIApiKeyApplied
                                     ? "memory-active"
@@ -8798,7 +8798,7 @@ function LegacyAdminStoryboardGenerator({
                                   type="button"
                                   variant="outline"
                                   size="sm"
-                                  className="h-7 shrink-0 rounded-full px-2 text-[11px]"
+                                  className="h-7 shrink-0 rounded-full px-2 text-2xs"
                                   onClick={handleClearStoryboardBrowserOpenAIApiKey}
                                   data-storyboard-browser-api-key-clear="true"
                                 >
@@ -8807,7 +8807,7 @@ function LegacyAdminStoryboardGenerator({
                               ) : null}
                               {storyboardBrowserOpenAIApiKeyError ? (
                                 <p
-                                  className="basis-full text-[11px] text-destructive"
+                                  className="basis-full text-2xs text-destructive"
                                   data-storyboard-browser-api-key-error="true"
                                 >
                                   {storyboardBrowserOpenAIApiKeyError}
@@ -8816,7 +8816,7 @@ function LegacyAdminStoryboardGenerator({
                               {storyboardBrowserOpenAIApiKeyMessage &&
                               !storyboardBrowserOpenAIApiKeyError ? (
                                 <p
-                                  className="basis-full text-[11px] text-muted-foreground"
+                                  className="basis-full text-2xs text-muted-foreground"
                                   data-storyboard-browser-api-key-message="true"
                                 >
                                   {storyboardBrowserOpenAIApiKeyMessage}
@@ -8826,7 +8826,7 @@ function LegacyAdminStoryboardGenerator({
                           </>
                         ) : (
                           <p
-                            className="text-[10px] leading-4 text-muted-foreground"
+                            className="text-2xs leading-4 text-muted-foreground"
                             data-storyboard-browser-api-key-memory-only-copy="true"
                             data-storyboard-browser-api-key-model-policy="gpt-image-2-only"
                           >
@@ -8847,13 +8847,13 @@ function LegacyAdminStoryboardGenerator({
                           <div className="flex items-center justify-between gap-2">
                             <Label
                               htmlFor="storyboard-local-bridge-url"
-                              className="text-[11px] font-semibold"
+                              className="text-2xs font-semibold"
                             >
                               고급 로컬 브릿지
                             </Label>
                             <Badge
                               variant="outline"
-                              className="h-5 shrink-0 rounded-full px-1.5 text-[10px]"
+                              className="h-5 shrink-0 rounded-full px-1.5 text-2xs"
                               data-storyboard-local-bridge-status={
                                 storyboardLocalBridgeStatus
                               }
@@ -8871,14 +8871,14 @@ function LegacyAdminStoryboardGenerator({
                             </Badge>
                           </div>
                           <p
-                            className="text-[10px] leading-4 text-muted-foreground"
+                            className="text-2xs leading-4 text-muted-foreground"
                             data-storyboard-local-bridge-guidance="true"
                           >
                             사용자 PC helper의 loopback 브릿지만 호출합니다.
                             토큰 입력값은 적용 직후 비우며 컴포넌트 ref에만 있고 Web Storage에 저장되지 않습니다. 페이지 전환·복원·닫기 때 제거됩니다.
                           </p>
                           <details
-                            className="rounded-lg bg-background/80 p-2 text-[10px] leading-4 text-foreground"
+                            className="rounded-lg bg-background/80 p-2 text-2xs leading-4 text-foreground"
                             data-storyboard-local-bridge-pairing-guide="true"
                           >
                             <summary className="flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden">
@@ -8887,7 +8887,7 @@ function LegacyAdminStoryboardGenerator({
                                 type="button"
                                 variant="ghost"
                                 size="sm"
-                                className="h-6 shrink-0 rounded-full px-2 text-[10px]"
+                                className="h-6 shrink-0 rounded-full px-2 text-2xs"
                                 onClick={(event) => {
                                   event.preventDefault();
                                   event.stopPropagation();
@@ -8899,7 +8899,7 @@ function LegacyAdminStoryboardGenerator({
                               </Button>
                             </summary>
                             <div
-                              className="mt-1 rounded-md bg-muted/45 px-2 py-1 font-mono text-[10px] text-muted-foreground"
+                              className="mt-1 rounded-md bg-muted/45 px-2 py-1 font-mono text-2xs text-muted-foreground"
                               data-storyboard-local-bridge-command="true"
                             >
                               {STORYBOARD_LOCAL_BRIDGE_TERMINAL_COMMAND}
@@ -8959,7 +8959,7 @@ function LegacyAdminStoryboardGenerator({
                             <Button
                               type="button"
                               size="sm"
-                              className="h-7 justify-center rounded-full px-2 text-[11px]"
+                              className="h-7 justify-center rounded-full px-2 text-2xs"
                               onClick={() =>
                                 void handleApplyStoryboardLocalBridge()
                               }
@@ -8971,7 +8971,7 @@ function LegacyAdminStoryboardGenerator({
                               type="button"
                               variant="secondary"
                               size="sm"
-                              className="h-7 justify-center rounded-full px-2 text-[11px]"
+                              className="h-7 justify-center rounded-full px-2 text-2xs"
                               onClick={() =>
                                 void handleAutoConnectStoryboardLocalBridge()
                               }
@@ -8983,7 +8983,7 @@ function LegacyAdminStoryboardGenerator({
                               type="button"
                               variant="outline"
                               size="sm"
-                              className="h-7 justify-center rounded-full px-2 text-[11px]"
+                              className="h-7 justify-center rounded-full px-2 text-2xs"
                               onClick={() =>
                                 void handleConnectStoryboardLocalBridgeHelper()
                               }
@@ -8998,7 +8998,7 @@ function LegacyAdminStoryboardGenerator({
                                 type="button"
                                 variant="outline"
                                 size="sm"
-                                className="h-7 justify-center rounded-full px-2 text-[11px]"
+                                className="h-7 justify-center rounded-full px-2 text-2xs"
                                 onClick={
                                   handleClearStoryboardLocalBridge
                                 }
@@ -9008,7 +9008,7 @@ function LegacyAdminStoryboardGenerator({
                               </Button>
                             ) : null}
                             <p
-                              className={`col-span-2 text-[11px] ${
+                              className={`col-span-2 text-2xs ${
                                 storyboardLocalBridgeError
                                   ? "text-destructive"
                                   : "text-muted-foreground"
@@ -9050,7 +9050,7 @@ function LegacyAdminStoryboardGenerator({
                       ? "destructive"
                       : "secondary"
                   }
-                  className="shrink-0 px-1.5 text-[10px]"
+                  className="shrink-0 px-1.5 text-2xs"
                   data-storyboard-job-readback-label="true"
                 >
                   {formatStoryboardJobStatusLabel(acceptedStoryboardJob.status)}
@@ -9157,7 +9157,7 @@ function LegacyAdminStoryboardGenerator({
                       >
                         {messageProgressLabel ? (
                           <div
-                            className="flex items-center gap-1.5 px-1 text-[10px] font-medium text-muted-foreground"
+                            className="flex items-center gap-1.5 px-1 text-2xs font-medium text-muted-foreground"
                             data-storyboard-chat-message-progress="outside-bubble"
                           >
                             {message.status === "streaming" ? (
@@ -9207,7 +9207,7 @@ function LegacyAdminStoryboardGenerator({
                                   무엇부터 만들까요?
                                 </h4>
                                 <p
-                                  className="mx-auto max-w-[17rem] text-[11px] leading-5 text-muted-foreground"
+                                  className="mx-auto max-w-[17rem] text-2xs leading-5 text-muted-foreground"
                                   data-storyboard-chat-starter-guide-copy="true"
                                 >
                                   <span className="block">
@@ -9246,14 +9246,14 @@ function LegacyAdminStoryboardGenerator({
                                       preset.id
                                     }
                                   >
-                                    <span className="block truncate text-[11px] font-semibold text-foreground">
+                                    <span className="block truncate text-2xs font-semibold text-foreground">
                                       {preset.label}
                                     </span>
-                                    <span className="mt-0.5 block text-[10px] font-medium text-primary">
+                                    <span className="mt-0.5 block text-2xs font-medium text-primary">
                                       {preset.segmentCount}컷 ·{" "}
                                       {preset.targetLengthMinutes}분
                                     </span>
-                                    <span className="mt-1 block line-clamp-2 text-[10px] leading-4 text-muted-foreground">
+                                    <span className="mt-1 block line-clamp-2 text-2xs leading-4 text-muted-foreground">
                                       {preset.description}
                                     </span>
                                   </button>
@@ -9289,7 +9289,7 @@ function LegacyAdminStoryboardGenerator({
                                     type="button"
                                     variant="outline"
                                     size="sm"
-                                    className="h-8 rounded-full px-3 text-[11px]"
+                                    className="h-8 rounded-full px-3 text-2xs"
                                     onClick={handleStoryboardUsageGuideClick}
                                     disabled={
                                       isGenerating ||
@@ -9305,7 +9305,7 @@ function LegacyAdminStoryboardGenerator({
                                   <Button
                                     type="button"
                                     size="sm"
-                                    className="h-8 rounded-full px-3 text-[11px]"
+                                    className="h-8 rounded-full px-3 text-2xs"
                                     onClick={() =>
                                       void handleStoryboardGuidedExampleGenerate()
                                     }
@@ -9362,7 +9362,7 @@ function LegacyAdminStoryboardGenerator({
                 />
                 {storyboardCanvasFocus ? (
                   <div
-                    className="flex min-h-8 items-center justify-between gap-2 rounded-2xl bg-muted/45 px-2.5 py-1.5 text-[11px]"
+                    className="flex min-h-8 items-center justify-between gap-2 rounded-2xl bg-muted/45 px-2.5 py-1.5 text-2xs"
                     data-storyboard-chat-canvas-context="true"
                     data-storyboard-chat-canvas-context-kind={
                       storyboardCanvasFocus.kind
@@ -9378,7 +9378,7 @@ function LegacyAdminStoryboardGenerator({
                     <div className="flex min-w-0 items-center gap-1.5">
                       <Badge
                         variant="outline"
-                        className="h-5 shrink-0 rounded-full border-primary/20 bg-background/70 px-2 text-[10px] text-primary"
+                        className="h-5 shrink-0 rounded-full border-primary/20 bg-background/70 px-2 text-2xs text-primary"
                         data-storyboard-canvas-focus-label="true"
                       >
                         {storyboardCanvasFocus.label}
@@ -9398,7 +9398,7 @@ function LegacyAdminStoryboardGenerator({
                       type="button"
                       size="sm"
                       variant="ghost"
-                      className="h-6 shrink-0 rounded-full px-2 text-[11px] text-muted-foreground hover:text-foreground"
+                      className="h-6 shrink-0 rounded-full px-2 text-2xs text-muted-foreground hover:text-foreground"
                       onClick={() => setStoryboardCanvasFocus(null)}
                       data-storyboard-clear-canvas-context="true"
                     >
@@ -9436,7 +9436,7 @@ function LegacyAdminStoryboardGenerator({
                       type="button"
                       variant="outline"
                       size="sm"
-                      className="h-7 shrink-0 rounded-full px-2 text-[10px]"
+                      className="h-7 shrink-0 rounded-full px-2 text-2xs"
                       onClick={() =>
                         void handleStoryboardGuidedExampleGenerate(preset)
                       }
@@ -9501,7 +9501,7 @@ function LegacyAdminStoryboardGenerator({
                             {attachment.name}
                           </span>
                           <span
-                            className="block text-[10px] text-muted-foreground"
+                            className="block text-2xs text-muted-foreground"
                             data-storyboard-chat-attachment-size="true"
                           >
                             {formatStoryboardChatAttachmentBytes(
@@ -9760,7 +9760,7 @@ function LegacyAdminStoryboardGenerator({
               </span>
               <Badge
                 variant="outline"
-                className="h-6 shrink-0 rounded-full px-2 text-[11px]"
+                className="h-6 shrink-0 rounded-full px-2 text-2xs"
                 data-storyboard-generated-image-count="title"
                 title={`현재 페이지 ${activePageGeneratedCount}/${activeStoryboardImageGenerationTargetScenes.length || storyboardFramePageSize} · 전체 ${generatedImageCount}/${totalCutCount}`}
               >
@@ -9790,7 +9790,7 @@ function LegacyAdminStoryboardGenerator({
                         ? "secondary"
                         : "ghost"
                     }
-                    className="h-6 shrink-0 rounded px-2 text-[11px]"
+                    className="h-6 shrink-0 rounded px-2 text-2xs"
                     onClick={() =>
                       handleStoryboardFramePageSizeChange(pageSize)
                     }
@@ -10058,7 +10058,7 @@ function LegacyAdminStoryboardGenerator({
                             }}
                           >
                             <Badge
-                              className="rounded-full px-2 py-0.5 text-[11px] font-bold shadow-sm"
+                              className="rounded-full px-2 py-0.5 text-2xs font-bold shadow-sm"
                               data-storyboard-cut-badge="true"
                               data-storyboard-cut-badge-background="visible"
                               style={{
@@ -10069,7 +10069,7 @@ function LegacyAdminStoryboardGenerator({
                               CUT {String(scene.sceneNo).padStart(2, "0")}
                             </Badge>
                             <Badge
-                              className="rounded-full px-2 py-0.5 text-[11px] font-bold shadow-sm"
+                              className="rounded-full px-2 py-0.5 text-2xs font-bold shadow-sm"
                               data-storyboard-cut-time-badge="true"
                               data-storyboard-cut-time-badge-background="visible"
                               style={{
@@ -10095,14 +10095,14 @@ function LegacyAdminStoryboardGenerator({
                           data-storyboard-frame-script-layout="stacked-rows"
                         >
                           <div
-                            className="grid min-w-0 items-start gap-2 rounded-lg bg-muted/15 px-2 py-0.5 text-[11px] leading-4"
+                            className="grid min-w-0 items-start gap-2 rounded-lg bg-muted/15 px-2 py-0.5 text-2xs leading-4"
                             data-storyboard-frame-audio="true"
                             data-storyboard-frame-audio-row="true"
                             style={{
                               gridTemplateColumns: "58px minmax(0, 1fr)",
                             }}
                           >
-                            <span className="rounded-full bg-muted/65 px-2 py-0.5 text-center text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
+                            <span className="rounded-full bg-muted/65 px-2 py-0.5 text-center text-2xs font-bold uppercase tracking-wide text-muted-foreground">
                               오디오
                             </span>
                             <span
@@ -10114,14 +10114,14 @@ function LegacyAdminStoryboardGenerator({
                             </span>
                           </div>
                           <div
-                            className="grid min-w-0 items-start gap-2 rounded-lg bg-rose-500/[0.045] px-2 py-0.5 text-[11px] leading-4"
+                            className="grid min-w-0 items-start gap-2 rounded-lg bg-rose-500/[0.045] px-2 py-0.5 text-2xs leading-4"
                             data-storyboard-frame-subtitle="true"
                             data-storyboard-frame-subtitle-row="true"
                             style={{
                               gridTemplateColumns: "58px minmax(0, 1fr)",
                             }}
                           >
-                            <span className="rounded-full bg-rose-100/70 px-2 py-0.5 text-center text-[10px] font-bold uppercase tracking-wide text-rose-700 dark:bg-rose-500/15 dark:text-rose-200">
+                            <span className="rounded-full bg-rose-100/70 px-2 py-0.5 text-center text-2xs font-bold uppercase tracking-wide text-rose-700 dark:bg-rose-500/15 dark:text-rose-200">
                               자막
                             </span>
                             <span
@@ -10133,14 +10133,14 @@ function LegacyAdminStoryboardGenerator({
                             </span>
                           </div>
                           <div
-                            className="grid min-w-0 items-start gap-2 rounded-lg bg-amber-400/[0.10] px-2 py-0.5 text-[11px] leading-4"
+                            className="grid min-w-0 items-start gap-2 rounded-lg bg-amber-400/[0.10] px-2 py-0.5 text-2xs leading-4"
                             data-storyboard-frame-production-note="true"
                             data-storyboard-frame-production-note-row="true"
                             style={{
                               gridTemplateColumns: "58px minmax(0, 1fr)",
                             }}
                           >
-                            <span className="rounded-full bg-amber-100/75 px-2 py-0.5 text-center text-[10px] font-bold uppercase tracking-wide text-amber-800 dark:bg-amber-500/15 dark:text-amber-200">
+                            <span className="rounded-full bg-amber-100/75 px-2 py-0.5 text-center text-2xs font-bold uppercase tracking-wide text-amber-800 dark:bg-amber-500/15 dark:text-amber-200">
                               촬영
                             </span>
                             <span
diff --git a/apps/web/components/admin/system-status/AdminSystemStatusCenter.tsx b/apps/web/components/admin/system-status/AdminSystemStatusCenter.tsx
index 9678ef6643..b746f84de6 100644
--- a/apps/web/components/admin/system-status/AdminSystemStatusCenter.tsx
+++ b/apps/web/components/admin/system-status/AdminSystemStatusCenter.tsx
@@ -62,7 +62,7 @@ export function AdminSystemStatusCenter({
               run_daily, 나이틀리 회귀, GDrive 후속, 검수 대기 상태를 한 곳에서 fail-closed로 봅니다.
             </p>
           </div>
-          <Badge className={cn('rounded-full px-2 py-1 text-[11px] font-semibold', tone.badge)}>
+          <Badge className={cn('rounded-full px-2 py-1 text-2xs font-semibold', tone.badge)}>
             <StatusIcon className="mr-1 h-3.5 w-3.5" />
             {viewModel.overallLabel}
           </Badge>
@@ -84,7 +84,7 @@ export function AdminSystemStatusCenter({
             >
               <p className="text-xs font-semibold">{viewModel.summary}</p>
               {hasError ? (
-                <p className="mt-1 text-[11px] text-muted-foreground">
+                <p className="mt-1 text-2xs text-muted-foreground">
                   일부 API 응답을 읽지 못해 보수적으로 표시 중입니다.
                 </p>
               ) : null}
@@ -104,8 +104,8 @@ export function AdminSystemStatusCenter({
                     data-admin-system-status-pending-counts={metric.id === 'pending' ? 'true' : undefined}
                   >
                     <div className="flex items-center justify-between gap-2">
-                      <p className="text-[11px] font-semibold text-muted-foreground">{metric.label}</p>
-                      <Badge className={cn('rounded-full px-2 py-0.5 text-[10px]', metricTone.badge)}>
+                      <p className="text-2xs font-semibold text-muted-foreground">{metric.label}</p>
+                      <Badge className={cn('rounded-full px-2 py-0.5 text-2xs', metricTone.badge)}>
                         {metric.value}
                       </Badge>
                     </div>
@@ -116,8 +116,8 @@ export function AdminSystemStatusCenter({
             </div>
             <div className="rounded-2xl border border-border/70 bg-muted/20 px-3 py-2.5" data-admin-system-status-checklist="true">
               <div className="flex items-center justify-between gap-2">
-                <p className="text-[11px] font-semibold text-muted-foreground">즉시 확인할 체크리스트</p>
-                <span className="text-[10px] text-muted-foreground">
+                <p className="text-2xs font-semibold text-muted-foreground">즉시 확인할 체크리스트</p>
+                <span className="text-2xs text-muted-foreground">
                   as of {systemStatusQuery.data?.asOf ?? '—'}
                 </span>
               </div>
diff --git a/apps/web/components/admin/thumbnail-generator/AdminYoutubeThumbnailGenerator.tsx b/apps/web/components/admin/thumbnail-generator/AdminYoutubeThumbnailGenerator.tsx
index 942987a104..d8beb5339f 100644
--- a/apps/web/components/admin/thumbnail-generator/AdminYoutubeThumbnailGenerator.tsx
+++ b/apps/web/components/admin/thumbnail-generator/AdminYoutubeThumbnailGenerator.tsx
@@ -5966,7 +5966,7 @@ export function AdminYoutubeThumbnailGenerator() {
         <div className="flex items-center justify-between gap-2">
           <div className="min-w-0">
             <p className="truncate text-sm font-bold">이미지 생성 설정</p>
-            <p className="text-[11px] text-muted-foreground">
+            <p className="text-2xs text-muted-foreground">
               기본 OAuth · 고급 로컬 · API Key 백업
             </p>
           </div>
@@ -6006,8 +6006,8 @@ export function AdminYoutubeThumbnailGenerator() {
             }
             data-thumbnail-api-router-oauth-transport="server"
           >
-            <span className="block text-[11px] font-bold">기본 OAuth</span>
-            <span className="block text-[10px] opacity-80">
+            <span className="block text-2xs font-bold">기본 OAuth</span>
+            <span className="block text-2xs opacity-80">
               {readiness?.providers.localCodex.available
                 ? "사용 가능"
                 : readiness
@@ -6030,8 +6030,8 @@ export function AdminYoutubeThumbnailGenerator() {
             }
             data-thumbnail-api-router-oauth-transport="local-bridge"
           >
-            <span className="block text-[11px] font-bold">고급 로컬</span>
-            <span className="block text-[10px] opacity-80">
+            <span className="block text-2xs font-bold">고급 로컬</span>
+            <span className="block text-2xs opacity-80">
               {formatThumbnailLocalBridgeStatusLabel(
                 thumbnailLocalBridgeStatus,
                 isThumbnailLocalBridgePaired,
@@ -6053,8 +6053,8 @@ export function AdminYoutubeThumbnailGenerator() {
             }
             data-thumbnail-api-router-fallback="browser-api-key"
           >
-            <span className="block text-[11px] font-bold">API Key</span>
-            <span className="block text-[10px] opacity-80">
+            <span className="block text-2xs font-bold">API Key</span>
+            <span className="block text-2xs opacity-80">
               {isBrowserOpenAIApiKeyApplied ? "이 탭 사용" : "키 필요"}
             </span>
           </button>
@@ -6070,13 +6070,13 @@ export function AdminYoutubeThumbnailGenerator() {
         >
           <div className="min-w-0">
             <p
-              className="truncate text-[11px] font-semibold"
+              className="truncate text-2xs font-semibold"
               data-thumbnail-api-router-status="true"
             >
               사용: {thumbnailImageApiRouterView.label}
             </p>
             <p
-              className="truncate text-[10px] text-muted-foreground"
+              className="truncate text-2xs text-muted-foreground"
               data-thumbnail-api-router-summary="true"
               data-thumbnail-codex-oauth-copy="true"
             >
@@ -6094,7 +6094,7 @@ export function AdminYoutubeThumbnailGenerator() {
           </div>
           <Badge
             variant="secondary"
-            className="h-6 shrink-0 rounded-full px-2 text-[10px]"
+            className="h-6 shrink-0 rounded-full px-2 text-2xs"
             data-thumbnail-api-router-label="true"
           >
             gpt-image-2
@@ -6113,13 +6113,13 @@ export function AdminYoutubeThumbnailGenerator() {
           <div className="flex items-center justify-between gap-2">
             <Label
               htmlFor="thumbnail-browser-openai-api-key"
-              className="text-[11px] font-semibold"
+              className="text-2xs font-semibold"
             >
               API Key 백업
             </Label>
             <button
               type="button"
-              className={`h-6 shrink-0 rounded-full px-2 text-[10px] font-semibold transition ${
+              className={`h-6 shrink-0 rounded-full px-2 text-2xs font-semibold transition ${
                 thumbnailImageRouteChoice === "browser-openai-api-key"
                   ? "bg-primary text-primary-foreground"
                   : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground"
@@ -6166,7 +6166,7 @@ export function AdminYoutubeThumbnailGenerator() {
             </Button>
           </div>
           <p
-            className="text-[10px] leading-4 text-muted-foreground"
+            className="text-2xs leading-4 text-muted-foreground"
             data-thumbnail-api-key-memory-only-copy="true"
             data-thumbnail-browser-api-key-memory-only-copy="true"
             data-thumbnail-api-key-model-policy="gpt-image-2-only"
@@ -6176,7 +6176,7 @@ export function AdminYoutubeThumbnailGenerator() {
           </p>
           <div className="flex flex-wrap items-center gap-2">
             <p
-              className="min-w-0 flex-1 text-[11px] text-muted-foreground"
+              className="min-w-0 flex-1 text-2xs text-muted-foreground"
               data-thumbnail-api-key-session-status="true"
               data-thumbnail-browser-api-key-status={
                 isBrowserOpenAIApiKeyApplied ? "memory-active" : "empty"
@@ -6195,7 +6195,7 @@ export function AdminYoutubeThumbnailGenerator() {
                 type="button"
                 variant="outline"
                 size="sm"
-                className="h-7 shrink-0 rounded-full px-2 text-[11px]"
+                className="h-7 shrink-0 rounded-full px-2 text-2xs"
                 onClick={handleClearThumbnailBrowserOpenAIApiKey}
                 data-thumbnail-api-key-clear="true"
                 data-thumbnail-browser-api-key-clear="true"
@@ -6205,7 +6205,7 @@ export function AdminYoutubeThumbnailGenerator() {
             ) : null}
             {browserOpenAIApiKeyMessage ? (
               <p
-                className="basis-full text-[11px] text-muted-foreground"
+                className="basis-full text-2xs text-muted-foreground"
                 data-thumbnail-api-key-message="true"
                 data-thumbnail-browser-api-key-message="true"
               >
@@ -6228,13 +6228,13 @@ export function AdminYoutubeThumbnailGenerator() {
             <div className="flex items-center justify-between gap-2">
               <Label
                 htmlFor="thumbnail-local-bridge-url"
-                className="text-[11px] font-semibold"
+                className="text-2xs font-semibold"
               >
                 고급 로컬 브릿지
               </Label>
               <Badge
                 variant="outline"
-                className="h-5 shrink-0 rounded-full px-1.5 text-[10px]"
+                className="h-5 shrink-0 rounded-full px-1.5 text-2xs"
                 data-thumbnail-local-bridge-status={thumbnailLocalBridgeStatus}
               >
                 {formatThumbnailLocalBridgeStatusLabel(
@@ -6244,7 +6244,7 @@ export function AdminYoutubeThumbnailGenerator() {
               </Badge>
             </div>
             <p
-              className="text-[10px] leading-4 text-muted-foreground"
+              className="text-2xs leading-4 text-muted-foreground"
               data-thumbnail-local-bridge-guidance="true"
             >
               pairing token은 이 화면 메모리에만 있고 Web Storage에 저장되지 않으며, 화면을 닫으면 제거됩니다. 실제 bridge 호출은 loopback helper 창에서 처리하며 앱 서버 relay는 사용하지 않습니다.
@@ -6287,7 +6287,7 @@ export function AdminYoutubeThumbnailGenerator() {
               <Button
                 type="button"
                 size="sm"
-                className="h-7 shrink-0 rounded-full px-2 text-[11px]"
+                className="h-7 shrink-0 rounded-full px-2 text-2xs"
                 onClick={() => void handleApplyThumbnailLocalBridge()}
                 data-thumbnail-local-bridge-apply="true"
               >
@@ -6297,7 +6297,7 @@ export function AdminYoutubeThumbnailGenerator() {
                 type="button"
                 variant="outline"
                 size="sm"
-                className="h-7 shrink-0 rounded-full px-2 text-[11px]"
+                className="h-7 shrink-0 rounded-full px-2 text-2xs"
                 onClick={() => void handleConnectThumbnailLocalBridgeHelper()}
                 data-thumbnail-local-bridge-connect="true"
               >
@@ -6308,7 +6308,7 @@ export function AdminYoutubeThumbnailGenerator() {
                   type="button"
                   variant="outline"
                   size="sm"
-                  className="h-7 shrink-0 rounded-full px-2 text-[11px]"
+                  className="h-7 shrink-0 rounded-full px-2 text-2xs"
                   onClick={handleClearThumbnailLocalBridge}
                   data-thumbnail-local-bridge-clear="true"
                 >
@@ -6316,7 +6316,7 @@ export function AdminYoutubeThumbnailGenerator() {
                 </Button>
               ) : null}
               <p
-                className={`basis-full text-[11px] ${
+                className={`basis-full text-2xs ${
                   thumbnailLocalBridgeError ? "text-destructive" : "text-muted-foreground"
                 }`}
                 data-thumbnail-local-bridge-message="true"
@@ -6346,14 +6346,14 @@ export function AdminYoutubeThumbnailGenerator() {
             <div className="flex items-center gap-1.5 text-xs font-semibold">
               <History className="h-3.5 w-3.5" />
               <span>생성 히스토리</span>
-              <Badge variant="secondary" className="px-1.5 text-[10px]">
+              <Badge variant="secondary" className="px-1.5 text-2xs">
                 {historyStatus === "loading" ? "불러오는 중" : `${historyRuns.length}건`}
               </Badge>
-              <Badge variant="outline" className="px-1.5 text-[10px]" data-thumbnail-history-source-label="true">
+              <Badge variant="outline" className="px-1.5 text-2xs" data-thumbnail-history-source-label="true">
                 {getThumbnailInitialPreviewSourceLabel(initialPreviewSource)}
               </Badge>
             </div>
-            <p className="mt-0.5 truncate text-[11px] text-muted-foreground">
+            <p className="mt-0.5 truncate text-2xs text-muted-foreground">
               정적 HTML 대신 이 페이지에서 실제 생성 기록을 관리합니다.
             </p>
           </div>
@@ -6385,13 +6385,13 @@ export function AdminYoutubeThumbnailGenerator() {
         </div>
 
         {historyStatus === "error" ? (
-          <div className="rounded-xl bg-destructive/10 px-2.5 py-2 text-[11px] text-destructive" data-thumbnail-history-error="true">
+          <div className="rounded-xl bg-destructive/10 px-2.5 py-2 text-2xs text-destructive" data-thumbnail-history-error="true">
             히스토리를 불러오지 못했습니다. {historyError ?? "API 상태를 확인하세요."}
           </div>
         ) : null}
 
         {historyStatus === "empty" ? (
-          <div className="rounded-xl bg-muted/40 px-2.5 py-2 text-[11px] text-muted-foreground" data-thumbnail-history-empty="true">
+          <div className="rounded-xl bg-muted/40 px-2.5 py-2 text-2xs text-muted-foreground" data-thumbnail-history-empty="true">
             아직 저장된 실제 생성 기록이 없습니다. 생성 완료 후 다시 새로고침하세요.
           </div>
         ) : null}
@@ -6401,7 +6401,7 @@ export function AdminYoutubeThumbnailGenerator() {
             {historyRuns.map((run) => (
               <div
                 key={run.id ?? run.timestamp ?? run.imagePath}
-                className="grid gap-2 rounded-xl bg-muted/35 p-2 text-[11px] sm:grid-cols-[56px_minmax(0,1fr)]"
+                className="grid gap-2 rounded-xl bg-muted/35 p-2 text-2xs sm:grid-cols-[56px_minmax(0,1fr)]"
                 data-thumbnail-history-run="true"
               >
                 <div className="aspect-video overflow-hidden rounded-lg bg-background/80 ring-1 ring-border/60">
@@ -6422,10 +6422,10 @@ export function AdminYoutubeThumbnailGenerator() {
                       <p className="truncate text-muted-foreground">{run.topic || run.completedAt || run.timestamp || "주제 없음"}</p>
                     </div>
                     <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
-                      <Badge variant="outline" className="px-1.5 text-[10px]" data-thumbnail-history-source-label="true">
+                      <Badge variant="outline" className="px-1.5 text-2xs" data-thumbnail-history-source-label="true">
                         {getThumbnailHistoryRunSourceLabel(run)}
                       </Badge>
-                      <Badge variant="outline" className="px-1.5 text-[10px]" data-thumbnail-history-provenance-label="true">
+                      <Badge variant="outline" className="px-1.5 text-2xs" data-thumbnail-history-provenance-label="true">
                         {formatThumbnailModelProvenance(run.modelProvenance)}
                       </Badge>
                     </div>
@@ -6435,7 +6435,7 @@ export function AdminYoutubeThumbnailGenerator() {
                       type="button"
                       variant="secondary"
                       size="sm"
-                      className="h-7 rounded-full px-2 text-[11px]"
+                      className="h-7 rounded-full px-2 text-2xs"
                       onClick={() => {
                         applyThumbnailHistoryRun(run);
                         setIsHistoryPanelOpen(false);
@@ -6448,7 +6448,7 @@ export function AdminYoutubeThumbnailGenerator() {
                       type="button"
                       variant="ghost"
                       size="sm"
-                      className="h-7 rounded-full px-2 text-[11px]"
+                      className="h-7 rounded-full px-2 text-2xs"
                       onClick={() => void copyThumbnailHistoryRun(run)}
                       data-thumbnail-history-copy-json={run.id ?? run.timestamp ?? "history-run"}
                     >
@@ -6514,7 +6514,7 @@ export function AdminYoutubeThumbnailGenerator() {
                       ? "secondary"
                       : "outline"
                   }
-                  className="h-6 max-w-[6.5rem] shrink-0 truncate rounded-full px-2 text-[10px]"
+                  className="h-6 max-w-[6.5rem] shrink-0 truncate rounded-full px-2 text-2xs"
                   title={thumbnailChatStatusLabel}
                   data-thumbnail-chat-status-badge="true"
                   data-thumbnail-chat-status={thumbnailChatStatusState}
@@ -6640,7 +6640,7 @@ export function AdminYoutubeThumbnailGenerator() {
                               무엇부터 만들까요?
                             </h4>
                             <p
-                              className="mx-auto max-w-[18rem] text-[11px] leading-5 text-muted-foreground"
+                              className="mx-auto max-w-[18rem] text-2xs leading-5 text-muted-foreground"
                               data-thumbnail-chat-starter-guide-copy="true"
                             >
                               <span className="block">
@@ -6669,13 +6669,13 @@ export function AdminYoutubeThumbnailGenerator() {
                                 data-thumbnail-chat-example-card="true"
                                 data-thumbnail-chat-example-headline={preset.headline}
                               >
-                                <span className="block truncate text-[11px] font-semibold text-foreground">
+                                <span className="block truncate text-2xs font-semibold text-foreground">
                                   {preset.headline}
                                 </span>
-                                <span className="mt-0.5 block truncate text-[10px] font-medium text-primary">
+                                <span className="mt-0.5 block truncate text-2xs font-medium text-primary">
                                   {preset.subHeadline}
                                 </span>
-                                <span className="mt-1 block line-clamp-2 text-[10px] leading-4 text-muted-foreground">
+                                <span className="mt-1 block line-clamp-2 text-2xs leading-4 text-muted-foreground">
                                   {preset.topic}
                                 </span>
                               </button>
@@ -6690,7 +6690,7 @@ export function AdminYoutubeThumbnailGenerator() {
                               type="button"
                               size="sm"
                               variant="outline"
-                              className="h-7 rounded-full bg-background/80 px-2 text-[11px] shadow-sm"
+                              className="h-7 rounded-full bg-background/80 px-2 text-2xs shadow-sm"
                               onClick={handleThumbnailUsageGuideClick}
                               disabled={isGenerating || isChatAgentStreaming}
                               data-thumbnail-chat-guide-button="true"
@@ -6701,7 +6701,7 @@ export function AdminYoutubeThumbnailGenerator() {
                             <Button
                               type="button"
                               size="sm"
-                              className="h-7 rounded-full px-2 text-[11px] shadow-sm"
+                              className="h-7 rounded-full px-2 text-2xs shadow-sm"
                               onClick={handleThumbnailGuidedExampleClick}
                               disabled={isGenerating || isChatAgentStreaming}
                               data-thumbnail-chat-guide-example="true"
@@ -6728,7 +6728,7 @@ export function AdminYoutubeThumbnailGenerator() {
                             }`}
                           >
                             <div
-                              className={`text-[10px] font-medium uppercase tracking-wide ${
+                              className={`text-2xs font-medium uppercase tracking-wide ${
                                 message.role === "user"
                                   ? "text-primary"
                                   : "text-muted-foreground"
@@ -6787,7 +6787,7 @@ export function AdminYoutubeThumbnailGenerator() {
                       {isChatAgentStreaming ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <MessageCircle className="h-3.5 w-3.5" />}
                     </div>
                     <div className="max-w-[86%] space-y-1">
-                      <div className="text-[10px] font-medium uppercase tracking-wide text-sky-700 dark:text-sky-200">
+                      <div className="text-2xs font-medium uppercase tracking-wide text-sky-700 dark:text-sky-200">
                         {currentThumbnailStreamingLabel}
                       </div>
                       <div className="rounded-2xl rounded-bl-md border border-dashed border-sky-400/70 bg-sky-500/10 px-3 py-2 text-xs leading-5 text-sky-950 shadow-sm whitespace-pre-wrap break-keep [overflow-wrap:anywhere] dark:text-sky-100">
@@ -6809,7 +6809,7 @@ export function AdminYoutubeThumbnailGenerator() {
 
                 {shouldShowThumbnailCanvasContext ? (
                   <div
-                    className="flex min-h-8 items-center justify-between gap-2 rounded-full border border-primary/20 bg-primary/5 px-2.5 py-1 text-[11px]"
+                    className="flex min-h-8 items-center justify-between gap-2 rounded-full border border-primary/20 bg-primary/5 px-2.5 py-1 text-2xs"
                     data-thumbnail-chat-canvas-context="true"
                     data-thumbnail-chat-canvas-context-state={canvasContextState}
                     data-thumbnail-chat-canvas-context-visibility="selected-only"
@@ -6817,7 +6817,7 @@ export function AdminYoutubeThumbnailGenerator() {
                     <div className="flex min-w-0 items-center gap-1.5">
                       <Badge
                         variant={canvasContextState === "editing" ? "secondary" : "outline"}
-                        className="h-6 shrink-0 rounded-full px-2 text-[11px]"
+                        className="h-6 shrink-0 rounded-full px-2 text-2xs"
                       >
                         {canvasContextState === "editing" ? "수정 중" : "선택됨"}
                       </Badge>
@@ -6843,7 +6843,7 @@ export function AdminYoutubeThumbnailGenerator() {
                       type="button"
                       variant="ghost"
                       size="sm"
-                      className="h-6 shrink-0 rounded-full px-2 text-[11px]"
+                      className="h-6 shrink-0 rounded-full px-2 text-2xs"
                       onClick={useCanvasContextInChat}
                       data-thumbnail-chat-canvas-context-ask="true"
                     >
@@ -7008,7 +7008,7 @@ export function AdminYoutubeThumbnailGenerator() {
                   data-thumbnail-text-transform-metrics="visual-bounds"
                 >
                   <span
-                    className="pointer-events-none absolute -top-7 left-0 rounded-md bg-slate-950/85 px-2 py-1 text-[11px] font-bold leading-none text-white shadow-sm"
+                    className="pointer-events-none absolute -top-7 left-0 rounded-md bg-slate-950/85 px-2 py-1 text-2xs font-bold leading-none text-white shadow-sm"
                     data-thumbnail-selected-text-transform-label="true"
                   >
                     {getTextLayerSelectionLabel(activeLayer)}
@@ -7123,7 +7123,7 @@ export function AdminYoutubeThumbnailGenerator() {
                       key={tool.id}
                       type="button"
                       variant="ghost"
-                      className="h-8 w-full min-w-0 gap-1 rounded-lg bg-background/80 px-1.5 text-[11px] leading-none shadow-sm hover:bg-background [&_span]:min-w-0 [&_span]:truncate [&_svg]:h-3.5 [&_svg]:w-3.5"
+                      className="h-8 w-full min-w-0 gap-1 rounded-lg bg-background/80 px-1.5 text-2xs leading-none shadow-sm hover:bg-background [&_span]:min-w-0 [&_span]:truncate [&_svg]:h-3.5 [&_svg]:w-3.5"
                       onClick={() => applyThumbnailEditorTool(tool.id)}
                       title={tool.description}
                       data-thumbnail-editor-tool={tool.id}
diff --git a/apps/web/components/announcement/AnnouncementPanel.tsx b/apps/web/components/announcement/AnnouncementPanel.tsx
index 3f3c4ab128..7255d641d4 100644
--- a/apps/web/components/announcement/AnnouncementPanel.tsx
+++ b/apps/web/components/announcement/AnnouncementPanel.tsx
@@ -425,7 +425,7 @@ function AnnouncementListItemSkeleton({ index }: { index: number }) {
                                                 </div>
                                             </div>
                                             {canManageInline && (
-                                                <div className="flex shrink-0 flex-col items-end gap-1 text-[10px] font-semibold">
+                                                <div className="flex shrink-0 flex-col items-end gap-1 text-2xs font-semibold">
                                                     <span className={`rounded-full px-2 py-0.5 ${announcement.isActive ? 'bg-emerald-50 text-emerald-800' : 'bg-muted text-muted-foreground'}`}>
                                                         {announcement.isActive ? '게시' : '비활성'}
                                                     </span>
diff --git a/apps/web/components/feed/FeedContent.tsx b/apps/web/components/feed/FeedContent.tsx
index e5f243f299..7fe220030a 100644
--- a/apps/web/components/feed/FeedContent.tsx
+++ b/apps/web/components/feed/FeedContent.tsx
@@ -571,6 +571,8 @@ export default function FeedContent({
                 !isOverlay && "bg-muted/30 overflow-y-auto"
             )}
             data-testid="feed-content-container"
+            data-layout-primitives="stack"
+            data-scroll-owner="feed-list"
             onScroll={feedBottomNavAutoHide.onScroll}
             onTouchStart={feedBottomNavAutoHide.onTouchStart}
             onTouchMove={feedBottomNavAutoHide.onTouchMove}
diff --git a/apps/web/components/filters/CategoryFilter.tsx b/apps/web/components/filters/CategoryFilter.tsx
index beb6188434..1df55b5531 100644
--- a/apps/web/components/filters/CategoryFilter.tsx
+++ b/apps/web/components/filters/CategoryFilter.tsx
@@ -192,7 +192,7 @@ const CategoryFilter = ({
                             <div className="flex items-center justify-between px-2 py-2">
                                 <span className="text-xs font-medium text-muted-foreground">전체 {totalCount}개</span>
                                 {selectedCategories.length > 0 && (
-                                    <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-medium text-primary">
+                                    <span className="rounded-full bg-primary/10 px-2 py-0.5 text-2xs font-medium text-primary">
                                         {selectedCategories.length}개 선택
                                     </span>
                                 )}
@@ -216,7 +216,7 @@ const CategoryFilter = ({
                                             />
                                             <span className="truncate text-sm font-medium">{category}</span>
                                         </div>
-                                        <span className="ml-3 shrink-0 rounded-full bg-muted px-2 py-0.5 text-[11px] tabular-nums text-muted-foreground">
+                                        <span className="ml-3 shrink-0 rounded-full bg-muted px-2 py-0.5 text-2xs tabular-nums text-muted-foreground">
                                             {count}개
                                         </span>
                                     </CommandItem>
diff --git a/apps/web/components/home/DesktopLeftPanelBookmarks.tsx b/apps/web/components/home/DesktopLeftPanelBookmarks.tsx
index 09ec5ef709..69bfebd0f9 100644
--- a/apps/web/components/home/DesktopLeftPanelBookmarks.tsx
+++ b/apps/web/components/home/DesktopLeftPanelBookmarks.tsx
@@ -54,7 +54,7 @@ export default function DesktopLeftPanelBookmarks({
           <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-[11px]"
+              className="rounded-full px-2 py-0.5 text-2xs"
             >
               {isLoading ? "확인 중" : `${bookmarks.length}개`}
             </Badge>
@@ -157,7 +157,7 @@ export default function DesktopLeftPanelBookmarks({
                       {bookmark.restaurant.category?.[0] && (
                         <Badge
                           variant="secondary"
-                          className="h-5 shrink-0 px-1.5 text-[10px] font-normal"
+                          className="h-5 shrink-0 px-1.5 text-2xs font-normal"
                         >
                           {bookmark.restaurant.category[0]}
                         </Badge>
@@ -165,7 +165,7 @@ export default function DesktopLeftPanelBookmarks({
                     </span>
                   </span>
                 </button>
-                <div className="flex items-center justify-between gap-2 border-t border-border/60 px-3 py-2 text-[11px] text-muted-foreground">
+                <div className="flex items-center justify-between gap-2 border-t border-border/60 px-3 py-2 text-2xs text-muted-foreground">
                   <span>리뷰 {bookmark.restaurant.review_count || 0}개</span>
                   <Button
                     type="button"
diff --git a/apps/web/components/home/DesktopLeftPanelMapHome.tsx b/apps/web/components/home/DesktopLeftPanelMapHome.tsx
index fba148b116..48d8f50600 100644
--- a/apps/web/components/home/DesktopLeftPanelMapHome.tsx
+++ b/apps/web/components/home/DesktopLeftPanelMapHome.tsx
@@ -330,12 +330,12 @@ export default function DesktopLeftPanelMapHome({
             data-desktop-left-panel-visible-marker-restaurants="true"
           >
             <div className="mb-1 flex min-w-0 items-center justify-between gap-2 px-1">
-              <h2 className="flex min-w-0 items-center gap-1.5 text-[13px] font-bold leading-5 text-foreground">
+              <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" />
                 <span className="truncate">맛집 목록</span>
               </h2>
               <span
-                className="shrink-0 rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold leading-4 text-primary-foreground"
+                className="shrink-0 rounded-full bg-primary px-2 py-0.5 text-2xs font-semibold leading-4 text-primary-foreground"
                 aria-label={`맛집 목록 ${visibleMarkerRestaurantCount}곳`}
               >
                 {visibleMarkerRestaurantCount}곳
@@ -375,11 +375,11 @@ export default function DesktopLeftPanelMapHome({
                 <TrendingUp className="h-4 w-4 text-primary" aria-hidden="true" />
                 <span>인기 검색 맛집</span>
               </h2>
-              <p className="mt-0.5 text-[11px] leading-4 text-muted-foreground">
+              <p className="mt-0.5 text-2xs leading-4 text-muted-foreground">
                 처음 방문해도 바로 눌러볼 만한 맛집 5곳
               </p>
             </div>
-            <span className="shrink-0 rounded-full bg-primary/10 px-2 py-1 text-[11px] font-semibold text-primary">
+            <span className="shrink-0 rounded-full bg-primary/10 px-2 py-1 text-2xs font-semibold text-primary">
               TOP 5
             </span>
           </div>
@@ -434,7 +434,7 @@ export default function DesktopLeftPanelMapHome({
                         </span>
                         {trendBadge ? (
                           <span
-                            className={`shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-bold leading-none ${trendBadge.className}`}
+                            className={`shrink-0 rounded-full px-1.5 py-0.5 text-2xs font-bold leading-none ${trendBadge.className}`}
                             title={trendBadge.title}
                             aria-label={trendBadge.title}
                           >
@@ -471,7 +471,7 @@ export default function DesktopLeftPanelMapHome({
                 <Clock className="h-4 w-4 text-primary" aria-hidden="true" />
                 <span>최근 추가된 맛집</span>
               </h2>
-              <p className="mt-0.5 text-[11px] leading-4 text-muted-foreground">
+              <p className="mt-0.5 text-2xs leading-4 text-muted-foreground">
                 먼저 3곳을 보여주고 스크롤하면 이어서 불러와요
               </p>
             </div>
@@ -482,7 +482,7 @@ export default function DesktopLeftPanelMapHome({
               }
             >
               <SelectTrigger
-                className="!h-7 !w-[4.75rem] shrink-0 gap-1 rounded-full border-primary/15 bg-primary/10 !px-2 !text-[10px] !leading-none font-semibold text-primary shadow-none hover:bg-primary/15 focus:ring-1 focus:ring-primary [&>span]:line-clamp-1 [&>span]:text-[10px] [&>svg]:!h-3 [&>svg]:!w-3"
+                className="!h-7 !w-[4.75rem] shrink-0 gap-1 rounded-full border-primary/15 bg-primary/10 !px-2 !text-2xs !leading-none font-semibold text-primary shadow-none hover:bg-primary/15 focus:ring-1 focus:ring-primary [&>span]:line-clamp-1 [&>span]:text-2xs [&>svg]:!h-3 [&>svg]:!w-3"
                 aria-label="최근 맛집 정렬"
               >
                 <SelectValue placeholder="정렬" />
diff --git a/apps/web/components/home/DesktopLeftPanelNotifications.tsx b/apps/web/components/home/DesktopLeftPanelNotifications.tsx
index 7269b26148..05e45dcec9 100644
--- a/apps/web/components/home/DesktopLeftPanelNotifications.tsx
+++ b/apps/web/components/home/DesktopLeftPanelNotifications.tsx
@@ -86,7 +86,7 @@ export default function DesktopLeftPanelNotifications({
           <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-[11px]"
+              className="rounded-full px-2 py-0.5 text-2xs"
             >
               {isLoading ? "확인 중" : `${notifications.length}개`}
             </Badge>
@@ -96,7 +96,7 @@ export default function DesktopLeftPanelNotifications({
                 variant="outline"
                 size="sm"
                 onClick={markAllAsRead}
-                className="h-7 rounded-full px-2 text-[11px]"
+                className="h-7 rounded-full px-2 text-2xs"
                 aria-label="모든 알림 읽음 처리"
               >
                 <CheckCheck className="mr-1 h-3.5 w-3.5" aria-hidden="true" />
@@ -200,7 +200,7 @@ export default function DesktopLeftPanelNotifications({
                       {!notification.isRead && (
                         <Badge
                           variant="secondary"
-                          className="h-5 shrink-0 px-1.5 text-[10px] font-normal"
+                          className="h-5 shrink-0 px-1.5 text-2xs font-normal"
                         >
                           새 알림
                         </Badge>
@@ -211,7 +211,7 @@ export default function DesktopLeftPanelNotifications({
                     </span>
                   </span>
                 </button>
-                <div className="flex items-center justify-between gap-2 border-t border-border/60 px-3 py-2 text-[11px] text-muted-foreground">
+                <div className="flex items-center justify-between gap-2 border-t border-border/60 px-3 py-2 text-2xs text-muted-foreground">
                   <span>
                     {formatDistanceToNow(notification.createdAt, {
                       addSuffix: true,
diff --git a/apps/web/components/home/HomeMapUserMenu.tsx b/apps/web/components/home/HomeMapUserMenu.tsx
index 9875a8ad43..18bbd95449 100644
--- a/apps/web/components/home/HomeMapUserMenu.tsx
+++ b/apps/web/components/home/HomeMapUserMenu.tsx
@@ -307,7 +307,7 @@ export default function HomeMapUserMenu({
                 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"
               >
-                <span className="text-[10px] text-muted-foreground">
+                <span className="text-2xs text-muted-foreground">
                   {siteConfig.operator.copyrightLabel}
                 </span>
                 {isBusinessInfoExpanded ? (
@@ -325,7 +325,7 @@ export default function HomeMapUserMenu({
               {isBusinessInfoExpanded && (
                 <div
                   id="desktop-map-business-info-content"
-                  className="mt-1 space-y-0.5 border-t border-border px-1 pt-1 text-[9px] leading-4 text-muted-foreground whitespace-nowrap"
+                  className="mt-1 space-y-0.5 border-t border-border px-1 pt-1 text-2xs leading-4 text-muted-foreground whitespace-nowrap"
                 >
                   <p className="font-medium text-foreground">{siteConfig.operator.companyName}</p>
                   <p>대표: {siteConfig.operator.representative}</p>
diff --git a/apps/web/components/home/MobileBookmarkMenuButton.tsx b/apps/web/components/home/MobileBookmarkMenuButton.tsx
index d5ef7a6cf0..9dc467b8a1 100644
--- a/apps/web/components/home/MobileBookmarkMenuButton.tsx
+++ b/apps/web/components/home/MobileBookmarkMenuButton.tsx
@@ -57,7 +57,7 @@ export default function MobileBookmarkMenuButton({ user, defaultOpen = false, op
                         <Badge
                             variant="secondary"
                             aria-hidden="true"
-                            className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full border border-primary/20 bg-primary px-1.5 py-0 text-[10px] font-bold leading-none tabular-nums text-primary-foreground shadow-sm"
+                            className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full border border-primary/20 bg-primary px-1.5 py-0 text-2xs font-bold leading-none tabular-nums text-primary-foreground shadow-sm"
                         >
                             {visibleBookmarkCount > 99 ? '99+' : visibleBookmarkCount}
                         </Badge>
@@ -143,7 +143,7 @@ export default function MobileBookmarkMenuButton({ user, defaultOpen = false, op
                                                 {bookmark.restaurant.name}
                                             </span>
                                             {bookmark.restaurant.category?.[0] && (
-                                                <Badge variant="secondary" className="text-[10px] shrink-0 h-5 px-1.5 font-normal">
+                                                <Badge variant="secondary" className="text-2xs shrink-0 h-5 px-1.5 font-normal">
                                                     {bookmark.restaurant.category[0]}
                                                 </Badge>
                                             )}
diff --git a/apps/web/components/home/MobileControlOverlay.tsx b/apps/web/components/home/MobileControlOverlay.tsx
index 063a84d9fe..ea4ec87b11 100644
--- a/apps/web/components/home/MobileControlOverlay.tsx
+++ b/apps/web/components/home/MobileControlOverlay.tsx
@@ -968,7 +968,7 @@ function MobileControlOverlayComponent({
                             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"
                         >
-                            <span className="text-[10px] text-muted-foreground">{siteConfig.operator.copyrightLabel}</span>
+                            <span className="text-2xs text-muted-foreground">{siteConfig.operator.copyrightLabel}</span>
                             {isBusinessInfoExpanded ? (
                                 <ChevronUp className="h-3 w-3 text-muted-foreground ml-1" />
                             ) : (
@@ -976,7 +976,7 @@ function MobileControlOverlayComponent({
                             )}
                         </button>
                         {isBusinessInfoExpanded && (
-                            <div className="mt-1 w-max max-w-[calc(100vw-2rem)] border-t border-border pt-1 text-[9px] text-muted-foreground space-y-0.5 px-1">
+                            <div className="mt-1 w-max max-w-[calc(100vw-2rem)] border-t border-border pt-1 text-2xs text-muted-foreground space-y-0.5 px-1">
                                 <p className="font-medium text-foreground">{siteConfig.operator.companyName}</p>
                                 <p>대표: {siteConfig.operator.representative}</p>
                                 <p>사업자: {siteConfig.operator.businessRegistrationNumber}</p>
@@ -1022,7 +1022,7 @@ function MobileControlOverlayComponent({
                             className="rounded-md object-contain shrink-0"
                         />
                         <span className={cn(
-                            'text-[15px] truncate',
+                            'text-sm truncate',
                             searchQuery.trim() ? 'text-foreground' : 'text-muted-foreground'
                         )}>
                             {searchQuery.trim() || '쯔동여지도 검색하기'}
@@ -1508,11 +1508,11 @@ function MobileControlOverlayComponent({
                             >
                                 <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="flex min-w-0 items-center justify-between gap-2">
-                                        <h2 className="flex min-w-0 items-center gap-1.5 text-[13px] font-bold leading-5 text-foreground">
+                                        <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" />
                                             <span className="truncate">맛집 목록</span>
                                             <span
-                                                className="shrink-0 rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold leading-4 text-primary-foreground"
+                                                className="shrink-0 rounded-full bg-primary px-2 py-0.5 text-2xs font-semibold leading-4 text-primary-foreground"
                                                 aria-label={`맛집 목록 ${visibleMarkerRestaurantCount}곳`}
                                             >
                                                 {visibleMarkerRestaurantCount}곳
diff --git a/apps/web/components/home/MobileNotificationMenuButton.tsx b/apps/web/components/home/MobileNotificationMenuButton.tsx
index a7b224be58..2f5f4eb647 100644
--- a/apps/web/components/home/MobileNotificationMenuButton.tsx
+++ b/apps/web/components/home/MobileNotificationMenuButton.tsx
@@ -104,7 +104,7 @@ export default function MobileNotificationMenuButton({
             <Badge
               variant="destructive"
               aria-hidden="true"
-              className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-800 px-1.5 py-0 text-[10px] font-bold leading-none tabular-nums text-white"
+              className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-800 px-1.5 py-0 text-2xs font-bold leading-none tabular-nums text-white"
             >
               {unreadCount > 99 ? "99+" : unreadCount}
             </Badge>
@@ -212,7 +212,7 @@ export default function MobileNotificationMenuButton({
                     <p className="text-xs text-muted-foreground truncate">
                       {notification.message}
                     </p>
-                    <p className="text-[11px] text-muted-foreground/70 mt-0.5">
+                    <p className="text-2xs text-muted-foreground/70 mt-0.5">
                       {formatDistanceToNow(notification.createdAt, {
                         addSuffix: true,
                         locale: ko,
diff --git a/apps/web/components/home/home-desktop-control-panel.tsx b/apps/web/components/home/home-desktop-control-panel.tsx
index 58cd6c8991..4db4cc2a38 100644
--- a/apps/web/components/home/home-desktop-control-panel.tsx
+++ b/apps/web/components/home/home-desktop-control-panel.tsx
@@ -466,7 +466,7 @@ function DesktopMapSettingsPanel({
     >
       <header className="flex shrink-0 items-start justify-between gap-3 border-b border-border px-4 py-3">
         <div className="min-w-0">
-          <p className="flex items-center gap-1.5 text-[11px] font-bold tracking-[0.12em] text-primary">
+          <p className="flex items-center gap-1.5 text-2xs font-bold tracking-[0.12em] text-primary">
             <SlidersHorizontal className="h-3.5 w-3.5" aria-hidden="true" />
             계정별 환경설정
           </p>
@@ -1703,7 +1703,7 @@ export default function HomeDesktopControlPanel({
               data-desktop-left-panel-search-bar="true"
               onClick={activateDesktopSearch}
             >
-              <div className="flex-1 h-9 rounded-full flex items-center gap-2 px-2 bg-secondary/40 min-w-0">
+              <div className="flex-1 h-9 rounded-full flex items-center gap-2 px-2 min-w-0">
                 <Image
                   src="/logo.webp"
                   alt="로고"
diff --git a/apps/web/components/layout/Header.tsx b/apps/web/components/layout/Header.tsx
index fc61a65627..67278dd41d 100644
--- a/apps/web/components/layout/Header.tsx
+++ b/apps/web/components/layout/Header.tsx
@@ -411,7 +411,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
                   <Badge
                     variant="destructive"
                     aria-hidden="true"
-                    className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-800 px-1.5 py-0 text-[10px] font-bold leading-none tabular-nums text-white"
+                    className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-800 px-1.5 py-0 text-2xs font-bold leading-none tabular-nums text-white"
                   >
                     {unreadCount > 99 ? '99+' : unreadCount}
                   </Badge>
@@ -491,7 +491,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
                               {notification.title}
                             </p>
                             {!notification.isRead && (
-                              <span className="shrink-0 rounded-full bg-red-800 px-1.5 py-0.5 text-[10px] font-bold leading-none text-white">새 알림</span>
+                              <span className="shrink-0 rounded-full bg-red-800 px-1.5 py-0.5 text-2xs font-bold leading-none text-white">새 알림</span>
                             )}
                           </div>
                           <p className="text-xs text-muted-foreground truncate">
@@ -608,7 +608,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
                   onClick={() => setIsBusinessInfoExpanded(!isBusinessInfoExpanded)}
                   className="w-full flex items-center justify-between hover:bg-accent rounded px-1 py-0.5 transition-colors"
                 >
-                  <span className="text-[10px] text-muted-foreground">{siteConfig.operator.copyrightLabel}</span>
+                  <span className="text-2xs text-muted-foreground">{siteConfig.operator.copyrightLabel}</span>
                   {isBusinessInfoExpanded ? (
                     <ChevronUp className="h-3 w-3 text-muted-foreground ml-1" />
                   ) : (
@@ -616,7 +616,7 @@ const HeaderComponent = ({ onToggleSidebar, isLoggedIn, isAuthLoading = true, on
                   )}
                 </button>
                 {isBusinessInfoExpanded && (
-                  <div className="mt-1 pt-1 border-t border-border text-[9px] text-muted-foreground space-y-0.5 px-1">
+                  <div className="mt-1 pt-1 border-t border-border text-2xs text-muted-foreground space-y-0.5 px-1">
                     <p className="font-medium text-foreground">{siteConfig.operator.companyName}</p>
                     <p>대표: {siteConfig.operator.representative}</p>
                     <p>사업자: {siteConfig.operator.businessRegistrationNumber}</p>
diff --git a/apps/web/components/layout/HeaderBookmarkMenuButton.tsx b/apps/web/components/layout/HeaderBookmarkMenuButton.tsx
index 577c813f42..9acbf3dc37 100644
--- a/apps/web/components/layout/HeaderBookmarkMenuButton.tsx
+++ b/apps/web/components/layout/HeaderBookmarkMenuButton.tsx
@@ -47,7 +47,7 @@ export default function HeaderBookmarkMenuButton() {
             <Badge
               variant="secondary"
               aria-hidden="true"
-              className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full border border-primary/20 bg-primary px-1.5 py-0 text-[10px] font-bold leading-none tabular-nums text-primary-foreground shadow-sm"
+              className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full border border-primary/20 bg-primary px-1.5 py-0 text-2xs font-bold leading-none tabular-nums text-primary-foreground shadow-sm"
             >
               {triggerBookmarkCount > 99 ? '99+' : triggerBookmarkCount}
             </Badge>
@@ -135,7 +135,7 @@ export default function HeaderBookmarkMenuButton() {
                         {bookmark.restaurant.name}
                       </span>
                       {bookmark.restaurant.category?.[0] && (
-                        <Badge variant="secondary" className="text-[10px] shrink-0 h-5 px-1.5 font-normal">
+                        <Badge variant="secondary" className="text-2xs shrink-0 h-5 px-1.5 font-normal">
                           {bookmark.restaurant.category[0]}
                         </Badge>
                       )}
diff --git a/apps/web/components/leaderboard/LeaderboardList.tsx b/apps/web/components/leaderboard/LeaderboardList.tsx
index df115d10de..45cbf8965b 100644
--- a/apps/web/components/leaderboard/LeaderboardList.tsx
+++ b/apps/web/components/leaderboard/LeaderboardList.tsx
@@ -107,7 +107,7 @@ export function LeaderboardList({
                         <div
                             className={cn(
                                 "ml-auto flex min-w-max shrink-0 items-center gap-1.5 text-base tabular-nums sm:gap-3 sm:text-base md:gap-4",
-                                compactLeftPanel && "gap-1.5 text-[15px] sm:gap-2 md:gap-2",
+                                compactLeftPanel && "gap-1.5 text-sm sm:gap-2 md:gap-2",
                                 mobilePanel && "gap-1.5"
                             )}
                             data-leaderboard-mobile-stats="no-clip"
diff --git a/apps/web/components/map/map-overlay-notice.tsx b/apps/web/components/map/map-overlay-notice.tsx
index 8667892d47..423fcee723 100644
--- a/apps/web/components/map/map-overlay-notice.tsx
+++ b/apps/web/components/map/map-overlay-notice.tsx
@@ -5,14 +5,14 @@ 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-[13px] !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 backdrop-blur-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';
 
 const noticeContentClass = 'grid max-w-full min-w-0 grid-cols-[1rem_minmax(0,max-content)] items-center gap-1.5';
 const noticeIconClass = 'flex h-4 w-4 shrink-0 items-center justify-center';
-const noticeTextClass = 'min-w-0 whitespace-nowrap break-keep text-center !text-[13px] !font-semibold !leading-4';
+const noticeTextClass = 'min-w-0 whitespace-nowrap break-keep text-center !text-sm !font-semibold !leading-4';
 
 export function MapOverlayStatusDot() {
     return <span className={MAP_OVERLAY_STATUS_DOT_CLASS_NAME} />;
diff --git a/apps/web/components/modals/EditRestaurantModal.tsx b/apps/web/components/modals/EditRestaurantModal.tsx
index 1d15800e9c..956323bc91 100644
--- a/apps/web/components/modals/EditRestaurantModal.tsx
+++ b/apps/web/components/modals/EditRestaurantModal.tsx
@@ -444,7 +444,7 @@ export const EditRestaurantModal = memo(function EditRestaurantModal({ isOpen, o
     };
 
     const draftStatus = lastSavedAt && (
-        <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+        <div className="flex items-center gap-1 text-2xs text-muted-foreground">
             {isSaving ? (
                 <>
                     <div className="animate-spin h-2.5 w-2.5 border border-primary border-t-transparent rounded-full" />
@@ -803,7 +803,7 @@ export const EditRestaurantModal = memo(function EditRestaurantModal({ isOpen, o
                     {EDIT_RESTAURANT_REQUEST_STEPS.map((step) => (
                         <div key={step.id} className="space-y-1">
                             <div className={`h-1.5 rounded-full ${step.id <= currentStep ? 'bg-red-800' : 'bg-muted'}`} />
-                            <span className={`block text-center text-[11px] ${step.id === currentStep ? 'font-semibold text-foreground' : 'text-muted-foreground'}`}>
+                            <span className={`block text-center text-2xs ${step.id === currentStep ? 'font-semibold text-foreground' : 'text-muted-foreground'}`}>
                                 {step.shortTitle}
                             </span>
                         </div>
@@ -906,7 +906,7 @@ export const EditRestaurantModal = memo(function EditRestaurantModal({ isOpen, o
                     <DialogHeader className="relative">
                         {/* 자동 저장 상태 표시 - 좌측 상단 */}
                         {lastSavedAt && (
-                            <div className="absolute -top-1 left-0 flex items-center gap-1 text-[10px] text-muted-foreground">
+                            <div className="absolute -top-1 left-0 flex items-center gap-1 text-2xs text-muted-foreground">
                                 {isSaving ? (
                                     <>
                                         <div className="animate-spin h-2.5 w-2.5 border border-primary border-t-transparent rounded-full" />
diff --git a/apps/web/components/modals/RestaurantSubmissionModal.tsx b/apps/web/components/modals/RestaurantSubmissionModal.tsx
index 5145ebf123..e944085c59 100644
--- a/apps/web/components/modals/RestaurantSubmissionModal.tsx
+++ b/apps/web/components/modals/RestaurantSubmissionModal.tsx
@@ -409,7 +409,7 @@ export default function RestaurantSubmissionModal({
     };
 
     const draftStatus = lastSavedAt && (
-        <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+        <div className="flex items-center gap-1 text-2xs text-muted-foreground">
             {isSaving ? (
                 <>
                     <div className="animate-spin h-2.5 w-2.5 border border-primary border-t-transparent rounded-full" />
@@ -534,7 +534,7 @@ export default function RestaurantSubmissionModal({
                 className="h-auto min-h-11 flex-col gap-0.5 whitespace-normal px-2 py-2"
             >
                 <span>쯔양이 다녀간 맛집</span>
-                <span className="text-[11px] font-normal opacity-80">영상 링크 필수</span>
+                <span className="text-2xs font-normal opacity-80">영상 링크 필수</span>
             </Button>
             <Button
                 type="button"
@@ -543,7 +543,7 @@ export default function RestaurantSubmissionModal({
                 className="h-auto min-h-11 flex-col gap-0.5 whitespace-normal px-2 py-2"
             >
                 <span>쯔양에게 맛집 제보</span>
-                <span className="text-[11px] font-normal opacity-80">추천 이유 필수</span>
+                <span className="text-2xs font-normal opacity-80">추천 이유 필수</span>
             </Button>
         </div>
     );
@@ -812,7 +812,7 @@ export default function RestaurantSubmissionModal({
     };
 
     const renderDesktopForm = () => (
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4" data-layout-primitives="form-flow stack">
             {draftRestorePrompt}
             {renderModeSelector()}
             {renderBasicFields()}
@@ -846,6 +846,7 @@ export default function RestaurantSubmissionModal({
             ref={mobileFormRef}
             onSubmit={handleSubmit}
             className={mobileSheetStyles.frame}
+            data-layout-primitives="form-flow sticky-footer stack"
         >
             <div
                 className={`${mobileSheetStyles.header}${shouldRenderMapPanel ? ' cursor-move select-none touch-none' : ''}`}
@@ -875,7 +876,7 @@ export default function RestaurantSubmissionModal({
                     {RESTAURANT_SUBMISSION_STEPS.map((step) => (
                         <div key={step.id} className="space-y-1">
                             <div className={`h-1.5 rounded-full ${step.id <= currentStep ? 'bg-red-800' : 'bg-muted'}`} />
-                            <span className={`block text-center text-[11px] ${step.id === currentStep ? 'font-semibold text-foreground' : 'text-muted-foreground'}`}>
+                            <span className={`block text-center text-2xs ${step.id === currentStep ? 'font-semibold text-foreground' : 'text-muted-foreground'}`}>
                                 {step.shortTitle}
                             </span>
                         </div>
@@ -888,7 +889,7 @@ export default function RestaurantSubmissionModal({
                 {renderMobileStepContent()}
             </div>
 
-            <div className={mobileSheetStyles.footer}>
+            <div className={mobileSheetStyles.footer} data-layout-primitives="sticky-footer">
                 {validationMessage && <div className="pb-2">{renderValidationMessage()}</div>}
                 <div className="flex gap-2">
                     {currentStep > 1 ? (
diff --git a/apps/web/components/mypage/MyPageSectionFrame.tsx b/apps/web/components/mypage/MyPageSectionFrame.tsx
index c8d782c097..cc9e415509 100644
--- a/apps/web/components/mypage/MyPageSectionFrame.tsx
+++ b/apps/web/components/mypage/MyPageSectionFrame.tsx
@@ -70,7 +70,7 @@ export function MyPageSectionFrame({
               <Icon className="h-5 w-5" />
             </span>
             <div className="min-w-0">
-              <p className="text-[11px] font-semibold text-primary sm:text-xs">
+              <p className="text-2xs font-semibold text-primary sm:text-xs">
                 {eyebrow}
               </p>
               <h1 className="mt-0.5 truncate text-lg font-bold tracking-tight sm:mt-1 sm:text-2xl">
diff --git a/apps/web/components/mypage/MyPageSidebar.tsx b/apps/web/components/mypage/MyPageSidebar.tsx
index b2919aae75..5250ebc281 100644
--- a/apps/web/components/mypage/MyPageSidebar.tsx
+++ b/apps/web/components/mypage/MyPageSidebar.tsx
@@ -259,6 +259,7 @@ export function MyPageSidebar() {
     <aside
       className="hidden h-full w-64 shrink-0 flex-col border-r border-border bg-card md:flex"
       data-mypage-left-panel-expanded="true"
+      data-layout-primitives="sidebar"
     >
       <div className="flex flex-col items-center space-y-4 p-6 text-center">
         <div className="group relative h-20 w-20 shrink-0 rounded-full">
@@ -379,7 +380,7 @@ export function MyPageSidebar() {
                   취소
                 </Button>
               </div>
-              <p className="text-[11px] text-muted-foreground">
+              <p className="text-2xs text-muted-foreground">
                 닉네임은 2-20자 사이로 입력해주세요
               </p>
             </div>
@@ -393,7 +394,7 @@ export function MyPageSidebar() {
                 <Badge
                   variant="outline"
                   className={cn(
-                    "h-5 shrink-0 whitespace-nowrap border-0 px-1.5 py-0 text-[10px]",
+                    "h-5 shrink-0 whitespace-nowrap border-0 px-1.5 py-0 text-2xs",
                     profile.tier.color,
                     profile.tier.bgColor,
                   )}
@@ -405,7 +406,7 @@ export function MyPageSidebar() {
                 type="button"
                 size="sm"
                 variant="ghost"
-                className="h-8 rounded-full px-2.5 text-[11px] text-muted-foreground"
+                className="h-8 rounded-full px-2.5 text-2xs text-muted-foreground"
                 onClick={() => {
                   setNicknameInput(displayName);
                   setIsNicknameEditing(true);
diff --git a/apps/web/components/mypage/MyPageTopActions.tsx b/apps/web/components/mypage/MyPageTopActions.tsx
index 473b37bd0b..8424c3fdf3 100644
--- a/apps/web/components/mypage/MyPageTopActions.tsx
+++ b/apps/web/components/mypage/MyPageTopActions.tsx
@@ -217,7 +217,7 @@ export function MyPageTopActions() {
               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"
             >
-              <span className="text-[10px] text-muted-foreground">
+              <span className="text-2xs text-muted-foreground">
                 {siteConfig.operator.copyrightLabel}
               </span>
               {isBusinessInfoExpanded ? (
@@ -235,7 +235,7 @@ export function MyPageTopActions() {
             {isBusinessInfoExpanded && (
               <div
                 id="desktop-map-business-info-content"
-                className="mt-1 space-y-0.5 border-t border-border px-1 pt-1 text-[9px] leading-4 text-muted-foreground whitespace-nowrap"
+                className="mt-1 space-y-0.5 border-t border-border px-1 pt-1 text-2xs leading-4 text-muted-foreground whitespace-nowrap"
               >
                 <p className="font-medium text-foreground">{siteConfig.operator.companyName}</p>
                 <p>대표: {siteConfig.operator.representative}</p>
diff --git a/apps/web/components/overlay-pages/StampOverlay.tsx b/apps/web/components/overlay-pages/StampOverlay.tsx
index 6a5d14a16a..3933c05368 100644
--- a/apps/web/components/overlay-pages/StampOverlay.tsx
+++ b/apps/web/components/overlay-pages/StampOverlay.tsx
@@ -328,7 +328,7 @@ export default function StampOverlay({ onClose, onOpenRestaurantDetail, singleCo
                         >
                             <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-[10px] font-medium rounded-full flex items-center justify-center">
+                                <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">
                                     {activeFilterCount}
                                 </span>
                             )}
diff --git a/apps/web/components/profile/UserProfilePanel.tsx b/apps/web/components/profile/UserProfilePanel.tsx
index a55d01dae7..f8b2c05b27 100644
--- a/apps/web/components/profile/UserProfilePanel.tsx
+++ b/apps/web/components/profile/UserProfilePanel.tsx
@@ -106,7 +106,7 @@ const StatCard = memo(function StatCard({ icon, label, value, valueClassName, to
                 {icon}
             </div>
             <div className="min-w-0 flex-1">
-                <span className="block truncate text-[11px] font-medium leading-none text-muted-foreground">{label}</span>
+                <span className="block truncate text-2xs font-medium leading-none text-muted-foreground">{label}</span>
                 <span className={cn("mt-1 block max-w-full truncate text-base font-bold leading-none", valueClassName)}>{value}</span>
             </div>
         </div>
@@ -128,7 +128,7 @@ const ProfileSectionHeader = memo(function ProfileSectionHeader({ title, descrip
             </div>
             <Badge
                 variant="secondary"
-                className="shrink-0 rounded-full bg-background/80 px-2 py-0.5 text-[11px] font-medium text-muted-foreground shadow-sm"
+                className="shrink-0 rounded-full bg-background/80 px-2 py-0.5 text-2xs font-medium text-muted-foreground shadow-sm"
             >
                 {count}개
             </Badge>
@@ -446,7 +446,7 @@ const UserProfilePanel = memo(function UserProfilePanel({ userId, onClose, showB
                                 <Badge
                                     variant="outline"
                                     className={cn(
-                                        "text-[10px] px-1.5 h-5 whitespace-nowrap flex-shrink-0",
+                                        "text-2xs px-1.5 h-5 whitespace-nowrap flex-shrink-0",
                                         profile.tier.bgColor,
                                         profile.tier.color,
                                         "border-current bg-background/80 shadow-sm"
diff --git a/apps/web/components/restaurant/RestaurantDetailPanel.tsx b/apps/web/components/restaurant/RestaurantDetailPanel.tsx
index 82ce5bce36..9d29af7655 100644
--- a/apps/web/components/restaurant/RestaurantDetailPanel.tsx
+++ b/apps/web/components/restaurant/RestaurantDetailPanel.tsx
@@ -1463,9 +1463,9 @@ export function RestaurantDetailPanel({
                                         <div className="flex-1 text-left">
                                             <div className="flex items-center gap-2 mb-0.5">
                                                 <span className="text-sm font-semibold">네이버 지도</span>
-                                                <Badge className="bg-primary/10 text-primary hover:bg-primary/10 text-[10px] px-1.5 py-0 border-0">추천</Badge>
+                                                <Badge className="bg-primary/10 text-primary hover:bg-primary/10 text-2xs px-1.5 py-0 border-0">추천</Badge>
                                             </div>
-                                            <p className="text-[11px] text-muted-foreground">국내 상세한 길안내 · 실시간 교통정보</p>
+                                            <p className="text-2xs text-muted-foreground">국내 상세한 길안내 · 실시간 교통정보</p>
                                         </div>
                                     </div>
                                 </Button>
@@ -1484,7 +1484,7 @@ export function RestaurantDetailPanel({
                                         <MapProviderLogo provider="kakao" />
                                         <div className="flex-1 text-left">
                                             <div className="text-sm font-semibold text-foreground mb-0.5">카카오맵</div>
-                                            <p className="text-[11px] text-muted-foreground">대중교통 · 주차 정보</p>
+                                            <p className="text-2xs text-muted-foreground">대중교통 · 주차 정보</p>
                                         </div>
                                     </div>
                                 </Button>
@@ -1503,7 +1503,7 @@ export function RestaurantDetailPanel({
                                         <MapProviderLogo provider="google" />
                                         <div className="flex-1 text-left">
                                             <div className="text-sm font-semibold text-foreground mb-0.5">구글 지도</div>
-                                            <p className="text-[11px] text-muted-foreground">글로벌 지도 · 위성 뷰</p>
+                                            <p className="text-2xs text-muted-foreground">글로벌 지도 · 위성 뷰</p>
                                         </div>
                                     </div>
                                 </Button>
@@ -1524,7 +1524,7 @@ export function RestaurantDetailPanel({
                                         variant="outline"
                                         size="sm"
                                         className={cn(
-                                            "h-14 min-w-0 flex-col gap-1 px-1.5 text-[11px] font-semibold leading-tight",
+                                            "h-14 min-w-0 flex-col gap-1 px-1.5 text-2xs font-semibold leading-tight",
                                             isMobile ? "rounded-lg" : "rounded-xl"
                                         )}
                                     >
@@ -1550,7 +1550,7 @@ export function RestaurantDetailPanel({
                                         variant="outline"
                                         size="sm"
                                         className={cn(
-                                            "h-14 min-w-0 flex-col gap-1 px-1.5 text-[11px] font-semibold leading-tight",
+                                            "h-14 min-w-0 flex-col gap-1 px-1.5 text-2xs font-semibold leading-tight",
                                             isMobile ? "rounded-lg" : "rounded-xl"
                                         )}
                                     >
diff --git a/apps/web/components/reviews/ReviewCard.tsx b/apps/web/components/reviews/ReviewCard.tsx
index 75107aad44..32d718e3db 100644
--- a/apps/web/components/reviews/ReviewCard.tsx
+++ b/apps/web/components/reviews/ReviewCard.tsx
@@ -312,7 +312,7 @@ export const ReviewCard = React.memo(function ReviewCard({
                                 {review.userName}
                             </Link>
                             {review.isVerified && (
-                                <Badge variant="default" className="h-4 px-1 text-[10px] bg-green-600">
+                                <Badge variant="default" className="h-4 px-1 text-2xs bg-green-600">
                                     <CheckCircle className="h-2 w-2 mr-0.5" />
                                     인증
                                 </Badge>
@@ -324,7 +324,7 @@ export const ReviewCard = React.memo(function ReviewCard({
                             aria-label={`${review.restaurantName} 맛집 상세 보기`}
                         >
                             <MapPin className="w-3 h-3" />
-                            <span className="text-[11px] leading-tight">{review.restaurantName}</span>
+                            <span className="text-2xs leading-tight">{review.restaurantName}</span>
                         </button>
                     </div>
                 </div>
diff --git a/apps/web/components/reviews/ReviewEditModal.tsx b/apps/web/components/reviews/ReviewEditModal.tsx
index 4b5647cc06..7112f215f8 100644
--- a/apps/web/components/reviews/ReviewEditModal.tsx
+++ b/apps/web/components/reviews/ReviewEditModal.tsx
@@ -679,7 +679,7 @@ export function ReviewEditModal({ isOpen, onClose, review, onSuccess }: ReviewEd
                                 </Button>
                             )}
                         >
-                            <div className="mb-1 flex items-center gap-1 text-[10px] text-muted-foreground">
+                            <div className="mb-1 flex items-center gap-1 text-2xs text-muted-foreground">
                                 {lastSavedAt && (
                                     <>
                                         <CheckCircle2 className="h-2.5 w-2.5 text-green-600" />
@@ -1003,7 +1003,7 @@ export function ReviewEditModal({ isOpen, onClose, review, onSuccess }: ReviewEd
                     <div className="flex flex-col h-full max-h-[calc(100dvh-2rem)]">
                         <DialogHeader className="px-6 pt-6 pb-4 border-b relative shrink-0">
                             {/* 자동 저장 상태 표시 */}
-                            <div className="absolute top-1.5 left-6 flex items-center gap-1 text-[10px] text-muted-foreground">
+                            <div className="absolute top-1.5 left-6 flex items-center gap-1 text-2xs text-muted-foreground">
                                 {lastSavedAt && (
                                     <>
                                         <CheckCircle2 className="h-2.5 w-2.5 text-green-600" />
diff --git a/apps/web/components/reviews/ReviewModal.tsx b/apps/web/components/reviews/ReviewModal.tsx
index 72fc584aa0..6b7439cea9 100644
--- a/apps/web/components/reviews/ReviewModal.tsx
+++ b/apps/web/components/reviews/ReviewModal.tsx
@@ -540,7 +540,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
 
     const renderAiFilledBadge = useCallback((field: ReviewOcrFieldKey) => (
         aiFilledFields.has(field) ? (
-            <Badge variant="secondary" className="h-5 rounded-full bg-primary/10 px-2 text-[10px] font-medium text-primary">
+            <Badge variant="secondary" className="h-5 rounded-full bg-primary/10 px-2 text-2xs font-medium text-primary">
                 AI 입력 · 확인 필요
             </Badge>
         ) : null
@@ -1598,7 +1598,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
         const isTerminalError = ocrFallbackNotice.type === 'error';
 
         return (
-            <div className={`rounded-lg border px-3 py-2 text-xs ${isTerminalError ? 'border-destructive/30 bg-destructive/5 text-destructive' : 'border-amber-200 bg-amber-50 text-amber-700'}`} role="status" aria-live="polite">
+            <div className={`rounded-lg border px-3 py-2 text-xs ${isTerminalError ? 'border-destructive/30 bg-destructive/5 text-destructive' : 'border-border bg-secondary text-foreground'}`} role="status" aria-live="polite">
                 <p className="font-semibold">{ocrFallbackNotice.message}</p>
                 {ocrFallbackNotice.detail ? <p className="mt-1 opacity-80">{ocrFallbackNotice.detail}</p> : null}
                 {isTerminalError ? (
@@ -1651,7 +1651,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
         return (
             <button
                 type="button"
-                className={`inline-flex w-fit items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] transition-colors ${forceOcrRefresh
+                className={`inline-flex w-fit items-center gap-1.5 rounded-full border px-2.5 py-1 text-2xs transition-colors ${forceOcrRefresh
                     ? 'border-primary bg-primary/10 text-primary'
                     : 'border-border bg-muted/40 text-muted-foreground hover:bg-muted'}`}
                 onClick={() => setForceOcrRefresh(value => !value)}
@@ -1818,7 +1818,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                 {/* 헤더 */}
                 <div className="px-6 pt-6 pb-4 border-b relative shrink-0">
                     {lastSavedAt && (
-                        <div className="absolute top-1.5 left-6 flex items-center gap-1 text-[10px] text-muted-foreground">
+                        <div className="absolute top-1.5 left-6 flex items-center gap-1 text-2xs text-muted-foreground">
                             {isSaving ? (
                                 <>
                                     <div className="animate-spin h-2.5 w-2.5 border border-primary border-t-transparent rounded-full" />
@@ -2026,7 +2026,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                                 {OCR_PROGRESS_STEPS.map((step) => {
                                                     const isDone = getOcrProgressRank(ocrProgress.stage) >= getOcrProgressRank(step.stage);
                                                     return (
-                                                        <div key={step.stage} className={`rounded-full px-2 py-1 text-[10px] font-medium ${isDone ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
+                                                        <div key={step.stage} className={`rounded-full px-2 py-1 text-2xs font-medium ${isDone ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
                                                             {step.label}
                                                         </div>
                                                     );
@@ -2034,10 +2034,10 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                             </div>
                                         ) : null}
                                         {ocrProgress?.model ? (
-                                            <p className="mb-3 text-[10px] text-muted-foreground">분석 모델: {ocrProgress.model}</p>
+                                            <p className="mb-3 text-2xs text-muted-foreground">분석 모델: {ocrProgress.model}</p>
                                         ) : null}
                                         {ocrProgress?.fallbackUsed ? (
-                                            <p className="mb-3 rounded-md bg-amber-50 px-2 py-1 text-[10px] text-amber-700">실시간 연결 대신 일반 분석으로 계속 진행 중입니다.</p>
+                                            <p className="mb-3 rounded-md bg-secondary px-2 py-1 text-2xs text-foreground">실시간 연결 대신 일반 분석으로 계속 진행 중입니다.</p>
                                         ) : null}
                                         <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full">
                                             <CheckCircle2 className="w-3 h-3 text-green-600" />
@@ -2335,7 +2335,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                     {REVIEW_FORM_STEPS.map((step) => (
                                         <div key={step.id} className="space-y-1">
                                             <div className={`h-1.5 rounded-full ${step.id <= currentStep ? 'bg-red-800' : 'bg-muted'}`} />
-                                            <span className={`block text-center text-[11px] ${step.id === currentStep ? 'font-semibold text-foreground' : 'text-muted-foreground'}`}>
+                                            <span className={`block text-center text-2xs ${step.id === currentStep ? 'font-semibold text-foreground' : 'text-muted-foreground'}`}>
                                                 {step.label}
                                             </span>
                                         </div>
@@ -2343,7 +2343,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                 </div>
                                 <div className="mt-2 min-h-4">
                                     {lastSavedAt ? (
-                                        <div className="flex items-center gap-1 text-[10px] leading-none text-muted-foreground" aria-live="polite">
+                                        <div className="flex items-center gap-1 text-2xs leading-none text-muted-foreground" aria-live="polite">
                                             {isSaving ? (
                                                 <>
                                                     <div className="h-2.5 w-2.5 animate-spin rounded-full border border-primary border-t-transparent" />
@@ -2538,7 +2538,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                                         {OCR_PROGRESS_STEPS.map((step) => {
                                                             const isDone = getOcrProgressRank(ocrProgress.stage) >= getOcrProgressRank(step.stage);
                                                             return (
-                                                                <div key={step.stage} className={`rounded-full px-2 py-1 text-[10px] font-medium ${isDone ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
+                                                                <div key={step.stage} className={`rounded-full px-2 py-1 text-2xs font-medium ${isDone ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
                                                                     {step.label}
                                                                 </div>
                                                             );
@@ -2546,10 +2546,10 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                                     </div>
                                                 ) : null}
                                                 {ocrProgress?.model ? (
-                                                    <p className="mb-3 text-[10px] text-muted-foreground">분석 모델: {ocrProgress.model}</p>
+                                                    <p className="mb-3 text-2xs text-muted-foreground">분석 모델: {ocrProgress.model}</p>
                                                 ) : null}
                                                 {ocrProgress?.fallbackUsed ? (
-                                                    <p className="mb-3 rounded-md bg-amber-50 px-2 py-1 text-[10px] text-amber-700">실시간 연결 대신 일반 분석으로 계속 진행 중입니다.</p>
+                                                    <p className="mb-3 rounded-md bg-secondary px-2 py-1 text-2xs text-foreground">실시간 연결 대신 일반 분석으로 계속 진행 중입니다.</p>
                                                 ) : null}
                                                 <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full">
                                                     <CheckCircle2 className="w-3 h-3 text-green-600" />
@@ -2913,7 +2913,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                         <DialogHeader className="relative space-y-3">
                             {/* 자동 저장 상태 표시 - 좌측 상단 */}
                             {lastSavedAt && (
-                                <div className="absolute top-1.5 left-6 flex items-center gap-1 text-[10px] text-muted-foreground">
+                                <div className="absolute top-1.5 left-6 flex items-center gap-1 text-2xs text-muted-foreground">
                                     {isSaving ? (
                                         <>
                                             <div className="animate-spin h-2.5 w-2.5 border border-primary border-t-transparent rounded-full" />
@@ -2947,7 +2947,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                 {REVIEW_FORM_STEPS.map((step) => (
                                     <div key={step.id} className="space-y-1">
                                         <div className="h-1.5 rounded-full bg-red-800" />
-                                        <span className="block text-center text-[11px] font-medium text-muted-foreground">
+                                        <span className="block text-center text-2xs font-medium text-muted-foreground">
                                             {step.label}
                                         </span>
                                     </div>
@@ -3131,7 +3131,7 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                                         {OCR_PROGRESS_STEPS.map((step) => {
                                                             const isDone = getOcrProgressRank(ocrProgress.stage) >= getOcrProgressRank(step.stage);
                                                             return (
-                                                                <div key={step.stage} className={`rounded-full px-2 py-1 text-[10px] font-medium ${isDone ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
+                                                                <div key={step.stage} className={`rounded-full px-2 py-1 text-2xs font-medium ${isDone ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}>
                                                                     {step.label}
                                                                 </div>
                                                             );
@@ -3139,10 +3139,10 @@ export function ReviewModal({ isOpen, onClose, restaurant, onSuccess, inline = f
                                                     </div>
                                                 ) : null}
                                                 {ocrProgress?.model ? (
-                                                    <p className="mb-3 text-[10px] text-muted-foreground">분석 모델: {ocrProgress.model}</p>
+                                                    <p className="mb-3 text-2xs text-muted-foreground">분석 모델: {ocrProgress.model}</p>
                                                 ) : null}
                                                 {ocrProgress?.fallbackUsed ? (
-                                                    <p className="mb-3 rounded-md bg-amber-50 px-2 py-1 text-[10px] text-amber-700">실시간 연결 대신 일반 분석으로 계속 진행 중입니다.</p>
+                                                    <p className="mb-3 rounded-md bg-secondary px-2 py-1 text-2xs text-foreground">실시간 연결 대신 일반 분석으로 계속 진행 중입니다.</p>
                                                 ) : null}
                                                 <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full">
                                                     <CheckCircle2 className="w-3 h-3 text-green-600" />
diff --git a/apps/web/components/stamp/RestaurantReviewsPanel.tsx b/apps/web/components/stamp/RestaurantReviewsPanel.tsx
index 057f584cb2..391852c858 100644
--- a/apps/web/components/stamp/RestaurantReviewsPanel.tsx
+++ b/apps/web/components/stamp/RestaurantReviewsPanel.tsx
@@ -93,7 +93,7 @@ export const RestaurantReviewsPanel = React.memo(function RestaurantReviewsPanel
                                     {restaurant.name}
                                 </h2>
                                 {category && (
-                                    <Badge variant="secondary" className="text-[10px] px-1.5 h-5 font-normal bg-secondary/50 text-secondary-foreground/90">
+                                    <Badge variant="secondary" className="text-2xs px-1.5 h-5 font-normal bg-secondary/50 text-secondary-foreground/90">
                                         {category}
                                     </Badge>
                                 )}
diff --git a/apps/web/components/stamp/StampCard.tsx b/apps/web/components/stamp/StampCard.tsx
index 2e3ed6d10b..85635804c7 100644
--- a/apps/web/components/stamp/StampCard.tsx
+++ b/apps/web/components/stamp/StampCard.tsx
@@ -173,14 +173,14 @@ export const StampCard = memo(function StampCard({
                 <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5 pr-1">
                     <div className="flex min-w-0 items-start justify-between gap-2">
                         <div className="min-w-0">
-                            <h3 className="truncate text-[14px] font-semibold leading-5 text-foreground" title={restaurantDisplayName}>
+                            <h3 className="truncate text-sm font-semibold leading-5 text-foreground" title={restaurantDisplayName}>
                                 {restaurantDisplayName}
                             </h3>
-                            <div className="mt-0 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[10px] leading-3.5 text-muted-foreground">
+                            <div className="mt-0 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-2xs leading-3.5 text-muted-foreground">
                                 {category && (
                                     <Badge
                                         variant="secondary"
-                                        className="h-4 shrink-0 border-transparent bg-secondary/50 px-1 text-[9px] font-normal text-secondary-foreground/90 hover:bg-secondary/60"
+                                        className="h-4 shrink-0 border-transparent bg-secondary/50 px-1 text-2xs font-normal text-secondary-foreground/90 hover:bg-secondary/60"
                                     >
                                         {category}
                                     </Badge>
@@ -190,13 +190,13 @@ export const StampCard = memo(function StampCard({
                         </div>
                     </div>
                     {showAddress && displayAddress && (
-                        <p className="flex min-w-0 items-center gap-1 text-[11px] leading-3.5 text-muted-foreground">
+                        <p className="flex min-w-0 items-center gap-1 text-2xs leading-3.5 text-muted-foreground">
                             <MapPin className="h-3 w-3 shrink-0" aria-hidden="true" />
                             <span className="truncate">{displayAddress}</span>
                         </p>
                     )}
                     {typedRestaurant.tzuyang_review && (
-                        <p className="truncate text-[11px] leading-3.5 text-muted-foreground">
+                        <p className="truncate text-2xs leading-3.5 text-muted-foreground">
                             “{typedRestaurant.tzuyang_review}”
                         </p>
                     )}
@@ -296,7 +296,7 @@ export const StampCard = memo(function StampCard({
                                     <span
                                         className={cn(
                                             "absolute top-2 left-2 z-10 leading-none rounded-full bg-black/65 text-white font-medium",
-                                            isCompact ? "text-[10px] px-2 py-1" : "text-xs px-2.5 py-1.5"
+                                            isCompact ? "text-2xs px-2 py-1" : "text-xs px-2.5 py-1.5"
                                         )}
                                         data-stamp-guide-badge="true"
                                     >
@@ -306,7 +306,7 @@ export const StampCard = memo(function StampCard({
                                 {isGuideCard && guideDescription && (
                                     <p className={cn(
                                         "absolute left-0 right-0 bottom-0 z-10 px-2 pb-2 pt-3 text-center bg-gradient-to-t from-black/80 via-black/55 to-transparent text-white/95 leading-snug pointer-events-none",
-                                        isCompact ? "text-[10px]" : "text-xs sm:text-sm"
+                                        isCompact ? "text-2xs" : "text-xs sm:text-sm"
                                     )}>
                                         {guideDescription}
                                     </p>
@@ -365,7 +365,7 @@ export const StampCard = memo(function StampCard({
                                     variant="secondary"
                                     className={cn(
                                         "font-normal shrink-0 bg-secondary/50 text-secondary-foreground/90 hover:bg-secondary/60",
-                                        isCompact ? "text-[9px] px-1 h-4" : "text-[10px] px-1.5 h-5"
+                                        isCompact ? "text-2xs px-1 h-4" : "text-2xs px-1.5 h-5"
                                     )}
                                 >
                                     {category}
@@ -374,7 +374,7 @@ export const StampCard = memo(function StampCard({
                         </div>
                         <span className={cn(
                             "text-muted-foreground whitespace-nowrap shrink-0",
-                            isCompact ? "text-[11px]" : "text-xs"
+                            isCompact ? "text-2xs" : "text-xs"
                         )}>
                             리뷰 {reviewCount}
                         </span>
@@ -383,7 +383,7 @@ export const StampCard = memo(function StampCard({
                     <div className={cn("min-w-0", showAddress && displayAddress ? (isDense ? "space-y-0.5" : "space-y-1.5") : "")}>
                         <div className="flex items-center justify-between gap-2">
                             <div className="flex items-center gap-2 min-w-0">
-                                <h3 className={cn("font-medium truncate", isCompact ? (isDense ? "text-[13px]" : "text-xs") : "text-sm")} title={restaurantDisplayName}>
+                                <h3 className={cn("font-medium truncate", isCompact ? (isDense ? "text-sm" : "text-xs") : "text-sm")} title={restaurantDisplayName}>
                                     {restaurantDisplayName}
                                 </h3>
                                 {category && (
@@ -391,7 +391,7 @@ export const StampCard = memo(function StampCard({
                                         variant="secondary"
                                         className={cn(
                                             "font-normal shrink-0 bg-secondary/50 text-secondary-foreground/90 hover:bg-secondary/60",
-                                            isCompact ? "text-[9px] px-1 h-4" : "text-[10px] px-1.5 h-5"
+                                            isCompact ? "text-2xs px-1 h-4" : "text-2xs px-1.5 h-5"
                                         )}
                                     >
                                         {category}
@@ -399,13 +399,13 @@ export const StampCard = memo(function StampCard({
                                 )}
                             </div>
                             {(!isCompact || showAddress) && (
-                                <span className={cn("text-muted-foreground whitespace-nowrap shrink-0", isDense ? "text-[11px]" : "text-xs")}>
+                                <span className={cn("text-muted-foreground whitespace-nowrap shrink-0", isDense ? "text-2xs" : "text-xs")}>
                                     리뷰 {reviewCount}
                                 </span>
                             )}
                         </div>
                         {showAddress && displayAddress && (
-                            <p className={cn("flex min-w-0 items-center gap-1 text-muted-foreground", isDense ? "text-[11px] leading-3.5" : "text-xs leading-4")}>
+                            <p className={cn("flex min-w-0 items-center gap-1 text-muted-foreground", isDense ? "text-2xs leading-3.5" : "text-xs leading-4")}>
                                 <MapPin className="h-3 w-3 shrink-0" aria-hidden="true" />
                                 <span className="truncate">{displayAddress}</span>
                             </p>
diff --git a/apps/web/components/ui/bookmark-button.tsx b/apps/web/components/ui/bookmark-button.tsx
index 05bd4899e6..1aff8553e2 100644
--- a/apps/web/components/ui/bookmark-button.tsx
+++ b/apps/web/components/ui/bookmark-button.tsx
@@ -67,7 +67,7 @@ const BookmarkButtonComponent = ({
             >
                 <Bookmark className={cn("h-4 w-4", isBookmarked && "fill-current")} />
                 {showCount && bookmarkCount > 0 && (
-                    <span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[10px] font-bold bg-primary text-primary-foreground rounded-full flex items-center justify-center">
+                    <span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-2xs font-bold bg-primary text-primary-foreground rounded-full flex items-center justify-center">
                         {formatCount(bookmarkCount)}
                     </span>
                 )}
diff --git a/apps/web/components/ui/card.tsx b/apps/web/components/ui/card.tsx
index d1dc45fe3a..913c1d303e 100644
--- a/apps/web/components/ui/card.tsx
+++ b/apps/web/components/ui/card.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("rounded-lg border border-border/70 bg-card text-card-foreground shadow-sm", className)} {...props} />
+    <div ref={ref} className={cn("rounded-xl border border-border/70 bg-card text-card-foreground shadow-sm", className)} {...props} />
 ));
 Card.displayName = "Card";
 
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx
index 0032f27329..28141ceb99 100644
--- a/apps/web/components/ui/dialog.tsx
+++ b/apps/web/components/ui/dialog.tsx
@@ -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-lg",
+          "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",
           className,
         )}
         onPointerDownOutside={handlePointerDownOutside}
@@ -85,7 +85,7 @@ const DialogContent = React.forwardRef<
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-md opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
diff --git a/apps/web/components/ui/mobile-sheet-frame.tsx b/apps/web/components/ui/mobile-sheet-frame.tsx
index 2818d437fd..7a3e8e8474 100644
--- a/apps/web/components/ui/mobile-sheet-frame.tsx
+++ b/apps/web/components/ui/mobile-sheet-frame.tsx
@@ -41,7 +41,7 @@ export const mobileSheetStyles = {
     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',
     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-[10px] leading-none text-muted-foreground',
+    meta: 'text-2xs leading-none text-muted-foreground',
 } as const;
 
 type MobileSheetHeaderProps = {
@@ -123,7 +123,7 @@ export function MobileSheetStepIndicator({ steps, currentStep, className }: Mobi
                     >
                         <span
                             className={cn(
-                                'flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[11px] font-bold',
+                                'flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-2xs font-bold',
                                 isCurrent && 'bg-primary text-primary-foreground',
                                 isComplete && 'bg-green-600 text-white',
                                 !isCurrent && !isComplete && 'bg-background text-muted-foreground'
diff --git a/apps/web/components/ui/sheet.tsx b/apps/web/components/ui/sheet.tsx
index 93420ab11e..2d2ca7eaa1 100644
--- a/apps/web/components/ui/sheet.tsx
+++ b/apps/web/components/ui/sheet.tsx
@@ -57,7 +57,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
       <SheetOverlay />
       <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
         {children}
-        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-md opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
diff --git a/apps/web/components/ui/toast.tsx b/apps/web/components/ui/toast.tsx
index 52466aa2df..85074ef0df 100644
--- a/apps/web/components/ui/toast.tsx
+++ b/apps/web/components/ui/toast.tsx
@@ -27,7 +27,7 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
+        default: "border border-border bg-background text-foreground",
         destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
     },
@@ -52,7 +52,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50",
       className,
     )}
     {...props}
diff --git a/apps/web/hooks/use-ad-banners.tsx b/apps/web/hooks/use-ad-banners.tsx
index 86166a07ae..8a4b55cff4 100644
--- a/apps/web/hooks/use-ad-banners.tsx
+++ b/apps/web/hooks/use-ad-banners.tsx
@@ -161,20 +161,23 @@ export function useAdBannersAdmin(enabled = true) {
     const { isAdmin } = useAuth();
 
     return useQuery({
-        queryKey: [...AD_BANNERS_QUERY_KEY, 'admin'],
+        queryKey: [...AD_BANNERS_QUERY_KEY, 'admin-api'],
         queryFn: async (): Promise<AdBanner[]> => {
-            const { data, error } = await supabase
-                .from('ad_banners')
-                .select(AD_BANNER_SELECT)
-                .order('priority', { ascending: false })
-                .overrideTypes<AdBannerDatabaseRow[], { merge: false }>();
+            const response = await fetch('/api/admin/banners', {
+                headers: { Accept: 'application/json' },
+                cache: 'no-store',
+            });
 
-            if (error) {
-                console.error('광고 배너 조회 실패:');
-                throw error;
+            if (!response.ok) {
+                throw new Error('admin-banners-failed');
             }
 
-            return mapAdBannerRows(data);
+            const payload = await response.json() as { banners?: unknown };
+            const rows = Array.isArray(payload.banners) ? payload.banners : [];
+            return rows.flatMap((row) => {
+                const banner = mapAdBannerRow(row);
+                return banner ? [banner] : [];
+            });
         },
         enabled: isAdmin && enabled,
         staleTime: 5 * 60 * 1000, // 5분
diff --git a/apps/web/package.json b/apps/web/package.json
index fb26d0d99f..5b2ea139eb 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -8,15 +8,15 @@
   },
   "packageManager": "npm@11.6.2",
   "scripts": {
-    "dev": "node scripts/run-local-dev.mjs --port 8080",
-    "dev:local": "node scripts/run-local-dev.mjs --port 8080",
-    "dev:hosted": "node scripts/dev-prewarm.mjs --port 8080 --hosted",
-    "dev:clean": "node scripts/run-local-dev.mjs --port 8080 --clean",
-    "dev:playwright": "node scripts/run-local-dev.mjs --port 8080",
-    "dev:playwright:naver-live": "node scripts/run-local-dev.mjs --port 8080 --live-naver-provider-smoke",
+    "dev": "node scripts/run-local-dev.mjs --port 3000",
+    "dev:local": "node scripts/run-local-dev.mjs --port 3000",
+    "dev:hosted": "node scripts/dev-prewarm.mjs --port 3000 --hosted",
+    "dev:clean": "node scripts/run-local-dev.mjs --port 3000 --clean",
+    "dev:playwright": "node scripts/run-local-dev.mjs --port 3000",
+    "dev:playwright:naver-live": "node scripts/run-local-dev.mjs --port 3000 --live-naver-provider-smoke",
     "build": "node scripts/clean-next.mjs -- node node_modules/next/dist/bin/next build --webpack && node scripts/verify-route-css-boundaries.mjs",
     "start": "node scripts/start-standalone.mjs",
-    "start:playwright": "node scripts/start-standalone.mjs --port 8080 --hostname localhost",
+    "start:playwright": "node scripts/start-standalone.mjs --port 3000 --hostname localhost",
     "lint": "node scripts/run-web-tool.mjs eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0",
     "lint:fix": "node scripts/run-web-tool.mjs eslint . --ext .js,.jsx,.ts,.tsx --fix",
     "analyze": "node scripts/run-web-tool.mjs next-analyze",
@@ -40,9 +40,9 @@
     "test:dependency-modernization:browser": "node scripts/run-dependency-modernization-browser.mjs",
     "test:responsive": "node scripts/run-responsive-tests.mjs",
     "test:naver-live-provider": "node scripts/run-naver-live-provider-smoke.mjs",
-    "dev:webpack": "node scripts/run-local-dev.mjs --port 8080",
-    "dev:webpack:clean": "node scripts/run-local-dev.mjs --port 8080 --clean",
-    "dev:turbopack": "node scripts/run-local-dev.mjs --port 8080 --turbopack",
+    "dev:webpack": "node scripts/run-local-dev.mjs --port 3000",
+    "dev:webpack:clean": "node scripts/run-local-dev.mjs --port 3000 --clean",
+    "dev:turbopack": "node scripts/run-local-dev.mjs --port 3000 --turbopack",
     "bench:dev": "node scripts/measure-dev-compile.mjs",
     "bench:routes": "node scripts/measure-dev-routes.mjs",
     "bench:compare": "node scripts/compare-dev-route-reports.mjs",
diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
index 045533a361..ecd9c3dcca 100644
--- a/apps/web/playwright.config.ts
+++ b/apps/web/playwright.config.ts
@@ -27,7 +27,7 @@ const PLAYWRIGHT_WEB_SERVER_COMMAND =
         : process.env.PLAYWRIGHT_WEB_SERVER_COMMAND
             ?? (runsDependencyModernizationSpec ? 'bun run start:playwright' : 'bun run dev:playwright');
 const PLAYWRIGHT_BASE_URL =
-    process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:8080';
+    process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:3000';
 const PLAYWRIGHT_WEB_SERVER_URL =
     process.env.PLAYWRIGHT_WEB_SERVER_URL ??
     new URL('/api/health', PLAYWRIGHT_BASE_URL).toString();
diff --git a/apps/web/stylegallery-adoption.v1.json b/apps/web/stylegallery-adoption.v1.json
index 0d8d329e1e..1f72bd82e6 100644
--- a/apps/web/stylegallery-adoption.v1.json
+++ b/apps/web/stylegallery-adoption.v1.json
@@ -2,9 +2,9 @@
   "schemaVersion": 1,
   "source": {
     "repository": "changeroa/StyleGallery",
-    "commit": "775430bbaf4ee208a642220f440f6926d79c90a3",
-    "licenseStatus": "unlicensed",
-    "usageBoundary": "High-level spatial questions only; no upstream code, CSS, prose, names, tests, assets, screenshots, labels, or distinctive sequences copied or translated."
+    "commit": "2a9ae14e1ed1e6ebc9ec525a7c305a7cc9830b34",
+    "licenseStatus": "MIT source, CC-BY-4.0 documentation",
+    "usageBoundary": "Recipe and scroll-ownership questions only; no upstream code, CSS, prose, names, tests, assets, screenshots, labels, or distinctive sequences copied or translated."
   },
   "entries": [
     {
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index bdd9d80d6a..d1127cb621 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -7,6 +7,9 @@ const config: Config = {
       screens: {
         xs: "375px",
       },
+      fontSize: {
+        "2xs": ["0.6875rem", { lineHeight: "0.875rem" }],
+      },
       fontFamily: {
         sans: [
           "var(--font-sans)",
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 e0f1c6af3a..d148d82570 100644
--- a/apps/web/tests-unit/admin-console-uiux-source.test.ts
+++ b/apps/web/tests-unit/admin-console-uiux-source.test.ts
@@ -433,13 +433,13 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       "...(hosted ? { TZUDONG_HOSTED_DEV: '1' } : {}),",
     );
     expect(packageSource).toContain(
-      '"dev:clean": "node scripts/run-local-dev.mjs --port 8080 --clean"',
+      '"dev:clean": "node scripts/run-local-dev.mjs --port 3000 --clean"',
     );
     expect(packageSource).toContain(
-      '"dev:playwright": "node scripts/run-local-dev.mjs --port 8080"',
+      '"dev:playwright": "node scripts/run-local-dev.mjs --port 3000"',
     );
     expect(packageSource).toContain(
-      '"dev:turbopack": "node scripts/run-local-dev.mjs --port 8080 --turbopack"',
+      '"dev:turbopack": "node scripts/run-local-dev.mjs --port 3000 --turbopack"',
     );
   });
   test("keeps admin module state URL-backed and easy to recover", () => {
@@ -875,7 +875,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       'className="mt-1.5 rounded-xl bg-primary/5 p-1.5"',
     );
     expect(overviewSource).toContain(
-      'className="mt-1.5 grid grid-cols-2 gap-1.5 rounded-xl bg-background/70 p-1.5 text-[11px] text-muted-foreground"',
+      'className="mt-1.5 grid grid-cols-2 gap-1.5 rounded-xl bg-background/70 p-1.5 text-2xs text-muted-foreground"',
     );
     expect(overviewSource).not.toContain(
       'className="rounded-xl border border-border bg-card p-2.5 shadow-sm lg:min-h-0 lg:flex-1 lg:overflow-y-auto"',
@@ -1632,7 +1632,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     expect(consoleSource).toContain("function AdminDashboardTooltipPanel");
     expect(consoleSource).toContain("min-w-44 space-y-1");
     expect(consoleSource).toContain(
-      "text-[10px] font-semibold leading-3 text-muted-foreground",
+      "text-2xs font-semibold leading-3 text-muted-foreground",
     );
     expect(consoleSource).toContain(
       "rounded-xl border border-border bg-popover px-2.5 py-1.5",
@@ -1656,7 +1656,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     expect(consoleSource).not.toContain("dark:text-slate-950");
     expect(consoleSource).toContain("bg-teal-500 text-white dark:bg-teal-500 dark:text-white");
     expect(consoleSource).toContain("bg-muted-foreground/42 text-foreground");
-    expect(consoleSource).toContain("text-[11px] font-black leading-none");
+    expect(consoleSource).toContain("text-2xs font-black leading-none");
     expect(consoleSource).toContain(
       "bg-muted text-foreground ring-1 ring-inset ring-border/60",
     );
@@ -1709,7 +1709,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       'const adminDashboardControlGroupClassName =\n  "inline-flex h-7 shrink-0 items-center rounded-full border border-border bg-muted/25 p-0.5"',
     );
     expect(consoleSource).toContain(
-      'const adminDashboardControlButtonClassName =\n  "inline-flex h-6 shrink-0 items-center justify-center gap-1 rounded-full px-2 text-[10px] font-extrabold leading-none transition',
+      'const adminDashboardControlButtonClassName =\n  "inline-flex h-6 shrink-0 items-center justify-center gap-1 rounded-full px-2 text-2xs font-extrabold leading-none transition',
     );
     expect(consoleSource).toContain(
       '"h-7 w-7 border border-border bg-background p-0 text-muted-foreground shadow-sm hover:text-foreground"',
@@ -1731,7 +1731,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       'data-admin-dashboard-card-title-row="single-line"',
     );
     expect(consoleSource).toContain(
-      "truncate whitespace-nowrap text-[11px] font-extrabold leading-none text-foreground",
+      "truncate whitespace-nowrap text-2xs font-extrabold leading-none text-foreground",
     );
     expect(consoleSource).toContain(
       'data-admin-dashboard-card-title-actions="single-line-scroll"',
@@ -1923,7 +1923,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       "flex min-w-fit flex-nowrap items-center justify-end gap-1",
     );
     expect(consoleSource).not.toContain(
-      "grid grid-cols-3 gap-2 rounded-xl border border-border/70 bg-background/80 p-2 text-[11px]",
+      "grid grid-cols-3 gap-2 rounded-xl border border-border/70 bg-background/80 p-2 text-2xs",
     );
     expect(consoleSource).toContain("영상 성과 신호 진단");
     expect(consoleSource).toContain("score: number");
@@ -2171,13 +2171,13 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     expect(topContentMetricSource).toContain("<AdminDashboardInlineTooltip");
     expect(topContentMetricSource).not.toContain('aria-hidden="true"');
     expect(consoleSource).not.toContain(
-      "mt-1 block truncate text-[11px] font-extrabold leading-4 tabular-nums text-teal-800",
+      "mt-1 block truncate text-2xs font-extrabold leading-4 tabular-nums text-teal-800",
     );
     expect(consoleSource).not.toContain(
-      "mt-0.5 block truncate text-[10px] font-black tabular-nums text-foreground/75",
+      "mt-0.5 block truncate text-2xs font-black tabular-nums text-foreground/75",
     );
     expect(consoleSource).toContain(
-      "mt-0.5 block truncate text-[10px] font-semibold tabular-nums text-foreground/70",
+      "mt-0.5 block truncate text-2xs font-semibold tabular-nums text-foreground/70",
     );
     expect(consoleSource).toContain("...row.viewBenchmarkTooltipLines");
     expect(consoleSource).toContain(
@@ -2582,7 +2582,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     expect(consoleSource).toContain("calculateDashboardMetricChange");
     expect(consoleSource).toContain("calculateRecentWindowChange");
     expect(consoleSource).toContain(
-      "delta={formatDashboardChangeLabel(viewChange)}",
+      "delta={formatDashboardChangeLabel(viewCardChange)}",
     );
     expect(consoleSource).toContain(
       "delta={formatDashboardChangeLabel(likeChange)}",
@@ -2711,7 +2711,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       'data-admin-dashboard-kpi-title-row="single-line"',
     );
     expect(consoleSource).toContain(
-      "truncate whitespace-nowrap text-[11px] font-extrabold tracking-[0.04em] text-muted-foreground",
+      "truncate whitespace-nowrap text-2xs font-extrabold tracking-[0.04em] text-muted-foreground",
     );
     expect(consoleSource).toContain(
       'data-admin-dashboard-kpi-title-actions="single-line-scroll"',
@@ -2741,7 +2741,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     expect(consoleSource).toContain(
       "flex h-full min-h-[320px] flex-col p-3 text-xs sm:min-h-[280px]",
     );
-    expect(consoleSource).toContain("text-[12px] font-extrabold tabular-nums text-foreground sm:text-[13px]");
+    expect(consoleSource).toContain("text-[12px] font-extrabold tabular-nums text-foreground sm:text-sm");
     expect(consoleSource).toContain(
       'data-admin-dashboard-ops-summary-visual="progress-bars"',
     );
@@ -3247,7 +3247,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       "--admin-sidebar-expanded-max-width: min(17.5rem, 27vw);",
     );
     expect(appGlobalsSource).toContain(
-      "--admin-sidebar-expanded-width: 14rem;",
+      "--admin-sidebar-expanded-width: calc(8.75rem * var(--phi));",
     );
     expect(appGlobalsSource).toContain(
       "width: max-content;",
@@ -4774,7 +4774,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     );
     expect(componentSource).toContain('variant="ghost"');
     expect(componentSource).toContain(
-      "h-8 w-full min-w-0 gap-1 rounded-lg bg-background/80 px-1.5 text-[11px] leading-none shadow-sm hover:bg-background",
+      "h-8 w-full min-w-0 gap-1 rounded-lg bg-background/80 px-1.5 text-2xs leading-none shadow-sm hover:bg-background",
     );
     expect(componentSource).toContain(
       "[&_span]:min-w-0 [&_span]:truncate [&_svg]:h-3.5 [&_svg]:w-3.5",
@@ -8324,9 +8324,8 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
     expect(consoleSource).toContain("adminDashboardTooltipPortalClassName");
     expect(consoleSource).toContain('side="right"');
     expect(consoleSource).toContain('dataAttribute="sidebar-collapsed"');
-    expect(consoleSource).toContain("getSidebarBadgeClassName");
     expect(consoleSource).toContain('sectionLabel === "실험실"');
-    expect(consoleSource).toContain(
+    expect(consoleSource).not.toContain(
       "data-admin-sidebar-badge-tone={section.label}",
     );
     expect(appGlobalsSource).toContain(".dark {");
@@ -8783,7 +8782,7 @@ describe("admin console beginner-friendly UI/UX source contract", () => {
       "relative h-12 w-16 shrink-0 overflow-hidden rounded-md border border-border",
     );
     expect(bannersSource).toContain(
-      'Badge variant="secondary" className="rounded-full text-[10px]"',
+      'Badge variant="secondary" className="rounded-full text-2xs"',
     );
     expect(bannersSource).not.toContain("bannersLoading && <Loader2");
     expect(bannersSource).toContain(
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 2e0cb3c0c4..9b530aeaf4 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
@@ -35,7 +35,7 @@ describe('PRIMARY_STATUS_FILTER_OPTIONS', () => {
       '삭제됨',
       '승인 대기',
       '미확정 좌표',
-      'Missing',
+      '누락',
       '평가 미대상',
     ]);
   });
@@ -210,7 +210,7 @@ describe('PRIMARY_STATUS_FILTER_OPTIONS', () => {
     expect(tableSource).toContain('data-layout-primitives="stack frame"');
     expect(tableSource).toContain('<article');
     expect(tableSource).toContain('flex min-w-max flex-nowrap gap-1.5');
-    expect(tableSource).toContain('rounded-xl bg-muted/35 p-2.5 text-[11px]');
+    expect(tableSource).toContain('rounded-xl bg-muted/35 p-2.5 text-2xs');
     expect(pageSource).toContain('data-admin-evaluation-view-actions="top-right"');
     expect(pageSource).toContain('data-admin-evaluation-title-icon="true"');
     expect(pageSource).toContain('inline-flex h-6 w-6 shrink-0 items-center justify-center text-primary');
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 1017e9fa44..221bbe2087 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
@@ -25,7 +25,7 @@ describe('header bookmark and notification UX source contracts', () => {
     expect(bookmarkSource).toContain('`북마크, 저장한 맛집 ${triggerBookmarkCount}개`');
     expect(bookmarkSource).toContain('hover:bg-primary/10 hover:!text-primary data-[state=open]:bg-primary/10 data-[state=open]:!text-primary');
     expect(bookmarkSource).toContain('[&_svg]:!text-primary');
-    expect(bookmarkSource).toContain('flex h-5 min-w-5 items-center justify-center rounded-full border border-primary/20 bg-primary px-1.5 py-0 text-[10px] font-bold leading-none tabular-nums text-primary-foreground shadow-sm');
+    expect(bookmarkSource).toContain('flex h-5 min-w-5 items-center justify-center rounded-full border border-primary/20 bg-primary px-1.5 py-0 text-2xs font-bold leading-none tabular-nums text-primary-foreground shadow-sm');
     expect(bookmarkSource).toContain("triggerBookmarkCount > 99 ? '99+' : triggerBookmarkCount");
     expect(bookmarkSource).toContain('w-[min(calc(100vw-1rem),22rem)] rounded-2xl border-border bg-card p-2 font-sans shadow-primary');
     expect(bookmarkSource).toContain('flex items-start justify-between gap-3 px-1 py-1 text-foreground');
@@ -49,7 +49,7 @@ describe('header bookmark and notification UX source contracts', () => {
       'className="flex w-full items-start gap-3 rounded-t-xl p-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"',
     );
     expect(leftPanelBookmarkSource).toContain(
-      'className="flex items-center justify-between gap-2 border-t border-border/60 px-3 py-2 text-[11px] text-muted-foreground"',
+      'className="flex items-center justify-between gap-2 border-t border-border/60 px-3 py-2 text-2xs text-muted-foreground"',
     );
     expect(leftPanelBookmarkSource).not.toContain(
       'className="group flex w-full items-start gap-3 rounded-xl border border-border bg-card p-3 text-left shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"',
@@ -63,7 +63,7 @@ describe('header bookmark and notification UX source contracts', () => {
     expect(headerSource).toContain('isLoading: isNotificationsLoading');
     expect(headerSource).toContain('isError: isNotificationsError');
     expect(headerSource).toContain('aria-label={unreadCount > 0 ? `알림, 안 읽은 알림');
-    expect(headerSource).toContain('absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-800 px-1.5 py-0 text-[10px] font-bold leading-none tabular-nums text-white');
+    expect(headerSource).toContain('absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-800 px-1.5 py-0 text-2xs font-bold leading-none tabular-nums text-white');
     expect(headerSource).toContain("unreadCount > 99 ? '99+' : unreadCount");
     expect(headerSource).toContain('aria-label="알림 목록 로딩 중"');
     expect(headerSource).toContain('알림을 불러오지 못했습니다');
@@ -99,7 +99,7 @@ describe('header bookmark and notification UX source contracts', () => {
     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-[11px]"');
+    expect(leftPanelNotificationSource).toContain('className="h-7 rounded-full px-2 text-2xs"');
     expect(leftPanelNotificationSource).toContain(
       '"group rounded-xl border border-border bg-card shadow-sm transition-colors hover:bg-accent"',
     );
@@ -112,10 +112,10 @@ describe('header bookmark and notification UX source contracts', () => {
     expect(leftPanelNotificationSource).toContain(
       'className="mt-0.5 h-9 w-9 shrink-0 rounded-full bg-primary/10 p-2 text-primary"',
     );
-    expect(leftPanelNotificationSource).toContain('className="h-5 shrink-0 px-1.5 text-[10px] font-normal"');
+    expect(leftPanelNotificationSource).toContain('className="h-5 shrink-0 px-1.5 text-2xs font-normal"');
     expect(leftPanelNotificationSource).toContain('새 알림');
     expect(leftPanelNotificationSource).toContain(
-      'className="flex items-center justify-between gap-2 border-t border-border/60 px-3 py-2 text-[11px] text-muted-foreground"',
+      'className="flex items-center justify-between gap-2 border-t border-border/60 px-3 py-2 text-2xs text-muted-foreground"',
     );
     expect(leftPanelNotificationSource).toContain('className="h-7 rounded-full px-2 text-muted-foreground hover:text-destructive"');
     expect(leftPanelNotificationSource).toContain('className="sr-only">삭제</span>');
@@ -141,7 +141,7 @@ describe('header bookmark and notification UX source contracts', () => {
     expect(mobileBookmarkSource).toContain('hover:border-primary/40 hover:bg-primary/10 hover:!text-primary');
     expect(mobileBookmarkSource).toContain('data-[state=open]:border-primary/50 data-[state=open]:bg-primary/10 data-[state=open]:!text-primary');
     expect(mobileBookmarkSource).toContain('[&_svg]:!text-primary');
-    expect(mobileBookmarkSource).toContain('flex h-5 min-w-5 items-center justify-center rounded-full border border-primary/20 bg-primary px-1.5 py-0 text-[10px] font-bold leading-none tabular-nums text-primary-foreground shadow-sm');
+    expect(mobileBookmarkSource).toContain('flex h-5 min-w-5 items-center justify-center rounded-full border border-primary/20 bg-primary px-1.5 py-0 text-2xs font-bold leading-none tabular-nums text-primary-foreground shadow-sm');
     expect(mobileBookmarkSource).toContain("visibleBookmarkCount > 99 ? '99+' : visibleBookmarkCount");
     expect(mobileBookmarkSource).toContain('flex items-start justify-between gap-3 px-1 py-1 text-foreground');
     expect(mobileBookmarkSource).toContain('h-8 shrink-0 rounded-full px-2.5 text-xs text-muted-foreground hover:bg-transparent hover:text-foreground');
@@ -181,7 +181,7 @@ describe('header bookmark and notification UX source contracts', () => {
     expect(mobileNotificationSource).toContain('h-8 shrink-0 rounded-full px-2.5 text-xs text-muted-foreground hover:bg-transparent hover:text-foreground');
     expect(mobileNotificationSource).not.toContain('rounded-xl bg-muted/40 px-3 py-2.5 text-foreground');
     expect(mobileNotificationSource).toContain('알림, 안 읽은 알림');
-    expect(mobileNotificationSource).toContain('absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-800 px-1.5 py-0 text-[10px] font-bold leading-none tabular-nums text-white');
+    expect(mobileNotificationSource).toContain('absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-800 px-1.5 py-0 text-2xs font-bold leading-none tabular-nums text-white');
     expect(mobileNotificationSource).toContain('unreadCount > 99 ? "99+" : unreadCount');
     expect(mobileNotificationSource).toContain('aria-label="알림 목록 로딩 중"');
     expect(mobileNotificationSource).toContain('알림을 불러오지 못했습니다');
diff --git a/apps/web/tests-unit/local-supabase-runtime.test.ts b/apps/web/tests-unit/local-supabase-runtime.test.ts
index fe73bdba1a..ac820334ad 100644
--- a/apps/web/tests-unit/local-supabase-runtime.test.ts
+++ b/apps/web/tests-unit/local-supabase-runtime.test.ts
@@ -283,9 +283,9 @@ describe('local Supabase runtime source contract', () => {
     const localDevRunner = readFileSync(path.resolve(import.meta.dir, '../scripts/run-local-dev.mjs'), 'utf8');
     const gitignore = readFileSync(path.resolve(import.meta.dir, '../.gitignore'), 'utf8');
     const eslintConfig = readFileSync(path.resolve(import.meta.dir, '../eslint.config.mjs'), 'utf8');
-    expect(packageSource).toContain('"dev": "node scripts/run-local-dev.mjs --port 8080"');
-    expect(packageSource).toContain('"dev:local": "node scripts/run-local-dev.mjs --port 8080"');
-    expect(packageSource).toContain('"dev:hosted": "node scripts/dev-prewarm.mjs --port 8080 --hosted"');
+    expect(packageSource).toContain('"dev": "node scripts/run-local-dev.mjs --port 3000"');
+    expect(packageSource).toContain('"dev:local": "node scripts/run-local-dev.mjs --port 3000"');
+    expect(packageSource).toContain('"dev:hosted": "node scripts/dev-prewarm.mjs --port 3000 --hosted"');
     expect(packageSource).toContain('"supabase:gen-types:local": "node scripts/run-local-supabase-types.mjs"');
     const localTypeRunner = readFileSync(
       path.resolve(import.meta.dir, '../scripts/run-local-supabase-types.mjs'),
@@ -385,7 +385,7 @@ describe('local Supabase runtime source contract', () => {
         || source.includes('nightlyRun');
       expect(admitted, name).toBe(true);
     }
-    expect(packageSource).toContain('"dev:hosted": "node scripts/dev-prewarm.mjs --port 8080 --hosted"');
+    expect(packageSource).toContain('"dev:hosted": "node scripts/dev-prewarm.mjs --port 3000 --hosted"');
     const cleanNext = readFileSync(path.resolve(import.meta.dir, '../scripts/clean-next.mjs'), 'utf8');
     const prewarm = readFileSync(path.resolve(import.meta.dir, '../scripts/dev-prewarm.mjs'), 'utf8');
     const localDev = readFileSync(path.resolve(import.meta.dir, '../scripts/run-local-dev.mjs'), 'utf8');
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 0a65f108ba..6ead37b0e0 100644
--- a/apps/web/tests-unit/mobile-desktop-parity-source.test.ts
+++ b/apps/web/tests-unit/mobile-desktop-parity-source.test.ts
@@ -463,7 +463,7 @@ describe("mobile and desktop parity source contracts", () => {
       "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",
     );
     expect(homeDesktopControlPanelSource).toContain(
-      "flex-1 h-9 rounded-full flex items-center gap-2 px-2 bg-secondary/40 min-w-0",
+      "flex-1 h-9 rounded-full flex items-center gap-2 px-2 min-w-0",
     );
     expect(homeDesktopControlPanelSource).toContain(
       "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",
@@ -513,7 +513,7 @@ describe("mobile and desktop parity source contracts", () => {
     expect(homeDesktopControlPanelSource).toContain(
       "text-sm text-foreground outline-none placeholder:text-foreground/70",
     );
-    expect(homeDesktopControlPanelSource).toContain("bg-secondary/40");
+    expect(homeDesktopControlPanelSource).not.toContain("bg-secondary/40");
     expect(homeDesktopControlPanelSource).toContain("hideSearchControls");
     expect(homeDesktopControlPanelSource).toContain(
       'className="h-full min-h-0 px-0 py-0"',
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 f24ae484be..9ad662f434 100644
--- a/apps/web/tests-unit/mypage-mobile-cleanup-contract.test.ts
+++ b/apps/web/tests-unit/mypage-mobile-cleanup-contract.test.ts
@@ -183,7 +183,7 @@ describe("mypage mobile cleanup source contracts", () => {
     expect(profileSource).toContain('id="mypage-mobile-nickname"');
     expect(profileSource).toContain("handleMobileNicknameChange");
     expect(profileSource).toContain(
-      'className="h-7 rounded-full px-2 text-[11px] text-muted-foreground"',
+      'className="h-7 rounded-full px-2 text-2xs text-muted-foreground"',
     );
     expect(profileSource).toContain('className="w-full space-y-2 md:hidden"');
     expect(profileSource).not.toContain("user.user_metadata?.full_name");
@@ -343,7 +343,7 @@ describe("mypage mobile cleanup source contracts", () => {
     expect(profileSource).not.toContain("안전한 비밀번호 기준");
     expect(profileSource).not.toContain("bg-amber-600 text-white");
     expect(profileSource).toContain("space-y-1 pt-2");
-    expect(profileSource).toContain('text-[11px] font-semibold text-amber-600');
+    expect(profileSource).toContain('text-2xs font-semibold text-amber-600');
     for (const tonalPanelClass of [
       "rounded-2xl bg-muted/40 px-3 py-2.5",
       "rounded-xl bg-muted/40 px-2.5 py-1.5",
@@ -716,10 +716,10 @@ describe("mypage mobile cleanup source contracts", () => {
     // The sidebar nickname edit control was the smallest button on desktop at
     // 35x28; it now matches the 32px touch rhythm used elsewhere.
     expect(sidebarSource).toContain(
-      'className="h-8 rounded-full px-2.5 text-[11px] text-muted-foreground"',
+      'className="h-8 rounded-full px-2.5 text-2xs text-muted-foreground"',
     );
     expect(sidebarSource).not.toContain(
-      'className="h-7 rounded-full px-2 text-[11px] text-muted-foreground"',
+      'className="h-7 rounded-full px-2 text-2xs text-muted-foreground"',
     );
   });
 });
diff --git a/apps/web/tests-unit/naver-live-provider-smoke-source.test.ts b/apps/web/tests-unit/naver-live-provider-smoke-source.test.ts
index 117e114012..e5188ac982 100644
--- a/apps/web/tests-unit/naver-live-provider-smoke-source.test.ts
+++ b/apps/web/tests-unit/naver-live-provider-smoke-source.test.ts
@@ -13,7 +13,7 @@ describe('Naver live-provider Playwright smoke source contract', () => {
         const spec = source('tests/naver-live-marker.spec.ts');
 
         expect(packageSource).toContain(
-            '"dev:playwright:naver-live": "node scripts/run-local-dev.mjs --port 8080 --live-naver-provider-smoke"',
+            '"dev:playwright:naver-live": "node scripts/run-local-dev.mjs --port 3000 --live-naver-provider-smoke"',
         );
         expect(packageSource).toContain(
             '"test:naver-live-provider": "node scripts/run-naver-live-provider-smoke.mjs"',
diff --git a/apps/web/tests-unit/public-surface-design-contract.test.ts b/apps/web/tests-unit/public-surface-design-contract.test.ts
index f0e6413028..e9d87b5e64 100644
--- a/apps/web/tests-unit/public-surface-design-contract.test.ts
+++ b/apps/web/tests-unit/public-surface-design-contract.test.ts
@@ -436,7 +436,7 @@ describe('public surface design contract', () => {
     }
 
     expect(readApp('app/app-globals.css')).toContain('--primary: 0 74% 50%');
-    expect(readApp('app/app-globals.css')).toContain('--admin-sidebar-expanded-width: 14rem');
+    expect(readApp('app/app-globals.css')).toContain('--admin-sidebar-expanded-width: calc(8.75rem * var(--phi))');
   });
 
   test('horizontal allowlist enumerates data-horizontal-scroll-owner values only', () => {
diff --git a/apps/web/tests-unit/standalone-static-source.test.ts b/apps/web/tests-unit/standalone-static-source.test.ts
index e911ee5351..0619a4f85d 100644
--- a/apps/web/tests-unit/standalone-static-source.test.ts
+++ b/apps/web/tests-unit/standalone-static-source.test.ts
@@ -9,7 +9,7 @@ const startScript = readFileSync(join(import.meta.dir, '..', 'scripts', 'start-s
 describe('standalone static sync source contract', () => {
     test('start scripts copy static and public assets before launching standalone server', () => {
         expect(packageJson).toContain('"start": "node scripts/start-standalone.mjs"');
-        expect(packageJson).toContain('"start:playwright": "node scripts/start-standalone.mjs --port 8080 --hostname localhost"');
+        expect(packageJson).toContain('"start:playwright": "node scripts/start-standalone.mjs --port 3000 --hostname localhost"');
         expect(startScript).toContain("spawnSync(process.execPath, ['scripts/sync-standalone-static.mjs']");
         expect(startScript).toContain("'--skip-clean'");
         expect(startScript).toContain("'.next/standalone/apps/web/server.js'");
diff --git a/apps/web/tests-unit/stylegallery-primitive-taxonomy.test.ts b/apps/web/tests-unit/stylegallery-primitive-taxonomy.test.ts
index 3860881e27..692b85c2d3 100644
--- a/apps/web/tests-unit/stylegallery-primitive-taxonomy.test.ts
+++ b/apps/web/tests-unit/stylegallery-primitive-taxonomy.test.ts
@@ -494,7 +494,7 @@ describe('StyleGallery primitive taxonomy source contract', () => {
     expect(responsiveOverflowSource).not.toContain('admin-module-header-actions');
     expect(responsiveOverflowSource).toContain('unapprovedPolicyExceptions');
   });
-  test('records the pinned unlicensed clean-room adoption boundary', () => {
+  test('records the pinned clean-room adoption boundary', () => {
     const matrix = JSON.parse(readSource('stylegallery-adoption.v1.json')) as {
       schemaVersion: number;
       source: {
@@ -514,8 +514,8 @@ describe('StyleGallery primitive taxonomy source contract', () => {
 
     expect(matrix.schemaVersion).toBe(1);
     expect(matrix.source.repository).toBe('changeroa/StyleGallery');
-    expect(matrix.source.commit).toBe('775430bbaf4ee208a642220f440f6926d79c90a3');
-    expect(matrix.source.licenseStatus).toBe('unlicensed');
+    expect(matrix.source.commit).toBe('2a9ae14e1ed1e6ebc9ec525a7c305a7cc9830b34');
+    expect(matrix.source.licenseStatus).toBe('MIT source, CC-BY-4.0 documentation');
     expect(matrix.source.usageBoundary).toContain('no upstream code, CSS, prose, names, tests, assets');
     expect(matrix.entries).toHaveLength(4);
 
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 cbe01b2caf..bd0e2fcf64 100644
--- a/apps/web/tests-unit/web-quality-performance-source.test.ts
+++ b/apps/web/tests-unit/web-quality-performance-source.test.ts
@@ -1388,7 +1388,7 @@ describe("web quality performance source contracts", () => {
       "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",
     );
     expect(homeDesktopControlPanelSource).toContain(
-      "flex-1 h-9 rounded-full flex items-center gap-2 px-2 bg-secondary/40 min-w-0",
+      "flex-1 h-9 rounded-full flex items-center gap-2 px-2 min-w-0",
     );
     expect(homeDesktopControlPanelSource).toContain(
       "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",
@@ -1438,7 +1438,7 @@ describe("web quality performance source contracts", () => {
     expect(homeDesktopControlPanelSource).toContain(
       "text-sm text-foreground outline-none placeholder:text-foreground/70",
     );
-    expect(homeDesktopControlPanelSource).toContain("bg-secondary/40");
+    expect(homeDesktopControlPanelSource).not.toContain("bg-secondary/40");
     expect(homeDesktopControlPanelSource).toContain("hideSearchControls");
     expect(homeDesktopControlPanelSource).toContain(
       'className="h-full min-h-0 px-0 py-0"',
@@ -2685,10 +2685,10 @@ describe("web quality performance source contracts", () => {
       "aria-label={`좋아요 ${review.likeCount}개`}",
     );
     expect(reviewCardSource).not.toContain(
-      "absolute inset-0 flex items-center justify-center text-[9px]",
+      "absolute inset-0 flex items-center justify-center text-2xs",
     );
     expect(reviewCardSource).not.toContain(
-      "text-[10px] font-bold leading-none tabular-nums",
+      "text-2xs font-bold leading-none tabular-nums",
     );
     expect(feedContentSource).toContain(
       "onLike={(reviewId, currentIsLiked, currentCount) => toggleLike(reviewId, currentIsLiked, currentCount)}",
diff --git a/apps/web/tests/mobile-home-map-helpers.ts b/apps/web/tests/mobile-home-map-helpers.ts
index 5a4c188347..05a0a473a0 100644
--- a/apps/web/tests/mobile-home-map-helpers.ts
+++ b/apps/web/tests/mobile-home-map-helpers.ts
@@ -29,7 +29,7 @@ const HOSTED_NIGHTLY_MODE = process.env.NIGHTLY_MODE === 'hosted';
 const LOOPBACK_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]', '::1']);
 const LOCAL_APP_ORIGIN = (() => {
     try {
-        const value = new URL(process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:8080');
+        const value = new URL(process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:3000');
         if (
             (value.protocol === 'http:' || value.protocol === 'https:')
             && LOOPBACK_HOSTS.has(value.hostname)
diff --git a/apps/web/tests/nightly/nightly-test.ts b/apps/web/tests/nightly/nightly-test.ts
index 3af36580dd..02c39b7fe0 100644
--- a/apps/web/tests/nightly/nightly-test.ts
+++ b/apps/web/tests/nightly/nightly-test.ts
@@ -30,7 +30,7 @@ const LOCAL_SUPABASE_ORIGIN = (() => {
 })();
 const LOCAL_APP_ORIGIN = (() => {
     try {
-        const value = new URL(process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:8080');
+        const value = new URL(process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:3000');
         if (
             (value.protocol === 'http:' || value.protocol === 'https:')
             && LOOPBACK_HOSTS.has(value.hostname)
@@ -495,7 +495,7 @@ function isAllowedSupabaseFixturePath(url: URL): boolean {
 }
 function isAllowedApplicationUrl(url: URL): boolean {
     const appPort = process.env.APP_PORT?.trim()
-        || configuredUrlPort(process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:8080');
+        || configuredUrlPort(process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:3000');
     if (!isLoopbackUrl(url) || !appPort || url.port !== appPort) return false;
     return LOCAL_APP_PATHS.has(url.pathname)
         || url.pathname.startsWith('/_next/')
diff --git a/docs/product/DESIGN.md b/docs/product/DESIGN.md
index 123bc90b12..6dc770a1c5 100644
--- a/docs/product/DESIGN.md
+++ b/docs/product/DESIGN.md
@@ -14,12 +14,12 @@
   - `apps/web/app/admin/evaluations/page.tsx`, `apps/web/app/admin/banners/page.tsx`, `apps/web/app/insights/insights-client.tsx`: canonical admin modules embedded into `/admin`; standalone routes must stay stable.
   - `apps/web/design/pencil/reports/admin-unified-console-design-brief-20260512T133359Z.md`: warm editorial operations hub, clear entry flows, status summaries, guarded destructive operations.
   - `apps/web/docs/pencil-storyboard-sync.md`, `apps/web/tests-unit/pencil-storyboard-contract.test.ts`: design artifacts should be reviewable, manifest-backed, and tied to repo source.
-  - `https://github.com/changeroa/StyleGallery/tree/775430bbaf4ee208a642220f440f6926d79c90a3`: unlicensed, immutable question checklist only; no upstream code, CSS, prose, names, tests, or assets are copied or translated.
+  - `https://github.com/changeroa/StyleGallery/tree/2a9ae14e1ed1e6ebc9ec525a7c305a7cc9830b34`: recipe and scroll-ownership checklist only; no upstream code, CSS, prose, names, tests, or assets are copied or translated.
   - `apps/web/stylegallery-adoption.v1.json`, `apps/web/components/home/home-map-container.tsx`, `apps/web/components/home/MobileControlOverlay.tsx`: Tzudong-owned layout vocabulary, scroll ownership, safe-area controls, and clean-room adoption evidence.
   - `apps/web/components/ui/table.tsx`, `apps/web/tests/responsive-overflow.spec.ts`: owner-gated horizontal-scroll policy via `data-horizontal-scroll-owner` and responsive overflow guard allowlisting.
   - `apps/web/performance/*`: canonical performance inputs, scorer/validator outputs, frozen-tree evidence, and artifact-map references only; the artifact-map SHA is recorded out of band.
   - `backend/naming-renames.v1.json`: bounded high-confidence taxonomy and rename evidence, not authorization for all-path naming churn.
-  - StyleGallery commit `775430bbaf4ee208a642220f440f6926d79c90a3` is unlicensed and question-only; `apps/web/stylegallery-adoption.v1.json` records clean-room, no-copy adoption. Neither reference implies affiliation.
+  - StyleGallery commit `2a9ae14e1ed1e6ebc9ec525a7c305a7cc9830b34` is used as a recipe and scroll-ownership checklist; `apps/web/stylegallery-adoption.v1.json` records clean-room, no-copy adoption. Neither reference implies affiliation.
 
 ## Brand
 - Personality: warm Korean food-map product, editorial, trustworthy, calm, operationally clear.
@@ -72,9 +72,10 @@
 
 ## Visual language
 - Color: warm ivory/off-white surfaces (`hsl(38 30% 98%)`), red primary (`hsl(0 74% 42%)`) for high-emphasis actions/active states, muted border/status colors for secondary information.
-- Typography: Pretendard for Korean UI/body density; Noto Serif KR remains the intentional display/editorial role. Compact strong headings are allowed, but avoid sterile enterprise typography and avoid global serif body text.
+- Typography: Pretendard for Korean UI/body density; Noto Serif KR remains the intentional display/editorial role. Compact strong headings are allowed, but avoid sterile enterprise typography and avoid global serif body text. Meta chips use `text-2xs` (11px). Readable copy uses `text-xs`, `text-sm`, or `text-base`. Do not introduce `text-[9px]` through `text-[15px]`.
+- Status surfaces use `bg-secondary text-foreground` with `border-border`. Photo indicators and Naver, Kakao, and Google brand marks keep their own colors.
 - Spacing/layout rhythm: full-width admin viewport, tight but readable operational density, `min-h-0` and layout-owned scroll containers.
-- Shape/radius/elevation: rounded cards/pills/sidebar controls (`rounded-xl`/`rounded-2xl`), subtle borders, soft shadow/glow only for hierarchy.
+- Shape/radius/elevation: controls use `rounded-md`, cards use `rounded-xl`, chips use `rounded-full`. Sidebar controls may use `rounded-2xl`. Subtle borders and soft shadow stay for hierarchy.
 - Motion: subtle transitions; collapse/expand should not show text squeezing or awkward reflow.
 - Imagery/iconography: lucide icons are supporting cues; text remains the source of meaning.
 
@@ -93,6 +94,10 @@
   - Mobile home theme filters are the only current home `reel cluster`; the approved horizontal owner is `mobile-theme-filter-reel`.
   - Admin KPI dashboard management uses the `command-surface` recipe for the order/report/period command row.
   - Shared table horizontal scrolling is owner-gated: `allowHorizontalScroll` may preserve visual overflow, but policy allowlisting requires an explicit `data-horizontal-scroll-owner` such as `stamp-restaurant-list-table` or `admin-evaluation-table`.
+  - My Page content scrolls at `mypage-content`; the sidebar does not.
+  - Stamp, leaderboard, and feed lists scroll at `stamp-list`, `leaderboard-list`, and `feed-list`.
+  - Insights keeps the metric grid and chart inside `insights-dashboard`.
+  - Submission, account, and privacy forms use `form-flow`; submit actions stay at the end of the form.
 
 ## Accessibility
 - Target standard: WCAG 2.2 AA for new UI and regressions; it is a target, not a certification claim.

From 0dd54267d9d8075768a538751cbbba2aaab02dff Mon Sep 17 00:00:00 2001
From: twoimo <32544727+twoimo@users.noreply.github.com>
Date: Thu, 24 Sep 2026 17:25:48 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=8B=A4=EC=A0=9C=20=ED=81=AC?=
 =?UTF-8?q?=EB=A1=AC=EC=9D=B4=20=EC=98=AC=EB=9D=BC=EC=98=A4=EB=A9=B4=20?=
 =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=EC=9D=84=20=EC=88=A8?=
 =?UTF-8?q?=EA=B8=B0=EA=B3=A0=20=EB=B0=B0=EB=84=88=20=EC=8B=A4=ED=8C=A8?=
 =?UTF-8?q?=EB=A5=BC=20=EA=B3=A0=EC=A0=95=20=EC=BD=94=EB=93=9C=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B0=98=ED=99=98=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

접힌 패널이 지도를 가리지 않게 하고, 서비스 롤 설정 실패도 banner_read_failed로 막는다.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/app/api/admin/banners/route.ts       | 19 ++++++++++++-------
 apps/web/app/home-app-globals.css             |  4 ++++
 .../components/home/home-control-panel.tsx    |  6 ++++++
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/api/admin/banners/route.ts b/apps/web/app/api/admin/banners/route.ts
index be01e6ffce..4cf1f7515e 100644
--- a/apps/web/app/api/admin/banners/route.ts
+++ b/apps/web/app/api/admin/banners/route.ts
@@ -25,15 +25,20 @@ export async function GET() {
   const auth = await requireAdmin();
   if (!auth.ok) return auth.response;
 
-  const supabase = createSupabaseServiceRoleClient();
-  const { data, error } = await supabase
-    .from("ad_banners")
-    .select(AD_BANNER_SELECT)
-    .order("priority", { ascending: false });
+  try {
+    const supabase = createSupabaseServiceRoleClient();
+    const { data, error } = await supabase
+      .from("ad_banners")
+      .select(AD_BANNER_SELECT)
+      .order("priority", { ascending: false });
 
-  if (error) {
+    if (error) {
+      return NextResponse.json({ code: "banner_read_failed" }, { status: 500 });
+    }
+
+    return NextResponse.json({ banners: data ?? [] });
+  } catch {
     return NextResponse.json({ code: "banner_read_failed" }, { status: 500 });
   }
 
-  return NextResponse.json({ banners: data ?? [] });
 }
diff --git a/apps/web/app/home-app-globals.css b/apps/web/app/home-app-globals.css
index 049b654924..fe59eb3e6c 100644
--- a/apps/web/app/home-app-globals.css
+++ b/apps/web/app/home-app-globals.css
@@ -20,6 +20,10 @@
 @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] {
+  display: none;
+}
+
 @media (max-width: 1279px) {
   html[data-mobile-search-open] .mobile-map-status-badge {
     display: none;
diff --git a/apps/web/components/home/home-control-panel.tsx b/apps/web/components/home/home-control-panel.tsx
index 9aeb798378..7b34c15b75 100644
--- a/apps/web/components/home/home-control-panel.tsx
+++ b/apps/web/components/home/home-control-panel.tsx
@@ -152,6 +152,12 @@ function HomeControlPanelComponent({
     activeRightPanel = null,
     selectedAnnouncement = null,
 }: HomeControlPanelProps) {
+    useEffect(() => {
+        document.documentElement.dataset.homeChromeReady = "true";
+        return () => {
+            delete document.documentElement.dataset.homeChromeReady;
+        };
+    }, []);
     const { isMobileOrTablet } = useDeviceType();
     const shouldRenderMobile = isMobileOrTablet || (
         typeof window !== 'undefined' && window.innerWidth <= BREAKPOINTS.tabletMax