Sync from GitHub via hub-sync

main/app/_utils/generatedRouteDetails.ts

@@ -60,12 +60,29 @@ export type GeneratedRouteDetailRecord = {
 const GENERATED_ROUTE_DETAILS_STORAGE_KEY = "tranimal-generated-route-details";
 const MAX_STORED_ROUTE_DETAILS = 30;
 
-export const formatGeneratedRouteLabel = (raw: string): string =>
-  raw
+const ROUTE_LABELS: Record<string, string> = {
+  apple: "사과",
+  candle: "양초",
+  cloud: "구름",
+  cup: "컵",
+  face: "얼굴",
+  fish: "물고기",
+  ice_cream: "아이스크림",
+  t_shirt: "티셔츠",
+};
+
+export const formatGeneratedRouteLabel = (raw: string): string => {
+  const normalized = raw.trim().toLowerCase().replace(/[\s-]+/g, "_");
+  if (ROUTE_LABELS[normalized]) {
+    return ROUTE_LABELS[normalized];
+  }
+
+  return raw
     .replace(/_/g, " ")
     .split(" ")
     .map((part) => (part ? part[0].toUpperCase() + part.slice(1) : part))
     .join(" ");
+};
 
 const routeScoreValue = (row: RouteScore): number =>
   typeof row.rerank_score === "number" ? row.rerank_score : row.score;

main/app/community/new/page.tsx

@@ -189,11 +189,11 @@ function CommunityNewPageContent() {
   };
 
   return (
-    <main className="min-h-screen bg-white">
+    <main className="rts-page">
       <TopBar />
 
-      <section className="mx-auto w-full max-w-3xl px-6 sm:px-10 py-8 flex flex-col gap-6">
-        <div className="flex items-center justify-between">
+      <section className="rts-shell rts-shell-narrow flex flex-col gap-6">
+        <div className="rts-page-header justify-between">
           <h2 className="text-2xl font-bold text-black">러닝 결과 공유</h2>
           <Link
             href="/recent-shared-routes"
@@ -210,7 +210,7 @@ function CommunityNewPageContent() {
               type="text"
               value={nickname}
               onChange={(event) => setNickname(event.target.value)}
-              className="h-11 rounded-xl border border-black/10 bg-white px-4 text-sm"
+              className="rts-input"
             />
           </label>
 
@@ -220,7 +220,7 @@ function CommunityNewPageContent() {
               type="text"
               value={title}
               onChange={(event) => setTitle(event.target.value)}
-              className="h-11 rounded-xl border border-black/10 bg-white px-4 text-sm"
+              className="rts-input"
             />
           </label>
 
@@ -231,11 +231,11 @@ function CommunityNewPageContent() {
               onChange={(event) => setContent(event.target.value)}
               rows={4}
               placeholder="오늘 러닝 어땠는지 적어보세요."
-              className="rounded-xl border border-black/10 bg-white px-4 py-3 text-sm resize-none"
+              className="rts-textarea"
             />
           </label>
 
-          <article className="rounded-2xl border border-black/10 bg-white overflow-hidden shadow-sm">
+          <article className="rts-card rts-card-clip overflow-hidden">
             <div className="px-4 py-3 border-b border-black/10">
               <div className="text-sm font-semibold text-black">{nickname}</div>
               <div className="text-xs text-[#7f7f7f]">{locationLabel}</div>
@@ -267,7 +267,7 @@ function CommunityNewPageContent() {
 
           <button
             type="submit"
-            className="mt-1 h-12 rounded-full bg-black text-white text-base font-semibold"
+            className="rts-primary-button mt-1 h-12 text-base"
           >
             게시판에 올리기
           </button>

main/app/globals.css

@@ -53,6 +53,402 @@
 
 :root {
   --animate-spin: spin 1s linear infinite;
+  --rts-bg: #ffffff;
+  --rts-bg-soft: #f6f6f6;
+  --rts-text: #111111;
+  --rts-muted: #777777;
+  --rts-muted-2: #8a8a8a;
+  --rts-line: #e5e5e5;
+  --rts-line-strong: #111111;
+  --rts-accent: #bfdcff;
+  --rts-accent-soft: #f1f6ff;
+  --rts-card-radius: 28px;
+  --rts-inner-radius: 18px;
+  --rts-shell: 1120px;
+  --rts-shell-narrow: 760px;
+}
+
+.rts-page {
+  min-height: 100vh;
+  background: var(--rts-bg);
+  color: var(--rts-text);
+  font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  overflow-x: hidden;
+}
+
+.rts-page-soft {
+  background: var(--rts-bg-soft);
+}
+
+.rts-shell {
+  width: 100%;
+  max-width: var(--rts-shell);
+  margin: 0 auto;
+  padding: 22px 18px 48px;
+  box-sizing: border-box;
+}
+
+.rts-shell-narrow {
+  max-width: var(--rts-shell-narrow);
+}
+
+.rts-page-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 18px 0 20px;
+  border-bottom: 1px solid var(--rts-line-strong);
+  box-sizing: border-box;
+}
+
+.rts-title-block {
+  min-width: 0;
+  flex: 1;
+}
+
+.rts-eyebrow {
+  margin: 0 0 4px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  color: var(--rts-muted-2);
+}
+
+.rts-page-header h1 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+.rts-subtitle {
+  margin: 6px 0 0;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--rts-muted);
+}
+
+.rts-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.rts-back-button {
+  width: 36px;
+  height: 36px;
+  border: 1px solid #dedede;
+  border-radius: 999px;
+  background: #ffffff;
+  color: var(--rts-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.rts-card,
+.rts-stat-card {
+  border: 1px solid var(--rts-line);
+  border-radius: var(--rts-card-radius);
+  background: #ffffff;
+  padding: 22px;
+  box-sizing: border-box;
+}
+
+.rts-card-clip {
+  overflow: hidden;
+  padding: 0;
+}
+
+.rts-inner-panel {
+  border-radius: var(--rts-inner-radius);
+  background: #f7f7f7;
+  padding: 14px;
+  box-sizing: border-box;
+}
+
+.rts-map-frame {
+  overflow: hidden;
+  border: 1px solid var(--rts-line);
+  border-radius: 22px;
+  background: #f5f5f5;
+}
+
+.rts-section-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+
+.rts-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--rts-text);
+}
+
+.rts-muted {
+  color: var(--rts-muted);
+}
+
+.rts-input,
+.rts-select,
+.rts-textarea {
+  width: 100%;
+  border: 1px solid var(--rts-line);
+  border-radius: var(--rts-inner-radius);
+  background: #ffffff;
+  color: var(--rts-text);
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+.rts-input,
+.rts-select {
+  height: 44px;
+  padding: 0 14px;
+  font-size: 14px;
+}
+
+.rts-textarea {
+  min-height: 128px;
+  padding: 14px;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+.rts-input:focus,
+.rts-select:focus,
+.rts-textarea:focus {
+  border-color: #4a90e2;
+  box-shadow: 0 0 0 3px rgba(191, 220, 255, 0.8);
+}
+
+.rts-primary-button,
+.rts-secondary-button {
+  min-height: 40px;
+  border-radius: 999px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+.rts-primary-button {
+  border: 0;
+  background: var(--rts-accent);
+  color: var(--rts-text);
+}
+
+.rts-primary-button:active,
+.rts-secondary-button:active {
+  transform: scale(0.98);
+}
+
+.rts-primary-button:disabled,
+.rts-secondary-button:disabled {
+  cursor: not-allowed;
+}
+
+.rts-secondary-button {
+  border: 1px solid var(--rts-line);
+  background: #ffffff;
+  color: #555555;
+}
+
+.rts-empty-state {
+  border: 1px dashed #d8d8d8;
+  border-radius: 24px;
+  background: #ffffff;
+  padding: 36px 24px;
+  text-align: center;
+  color: var(--rts-muted);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.rts-data-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.rts-data-item {
+  min-width: 0;
+  border-radius: var(--rts-inner-radius);
+  background: #f7f7f7;
+  padding: 14px;
+  box-sizing: border-box;
+}
+
+.rts-data-value {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--rts-text);
+}
+
+.rts-data-label {
+  margin: 0;
+  font-size: 12px;
+  color: #555555;
+}
+
+.rts-mobile-sticky-cta {
+  display: none;
+}
+
+.rts-result-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.rts-result-summary-grid div {
+  min-width: 0;
+  border-radius: 16px;
+  background: #f7f7f7;
+  padding: 12px;
+}
+
+.rts-result-summary-grid strong,
+.rts-result-summary-grid span {
+  display: block;
+}
+
+.rts-result-summary-grid strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  color: var(--rts-text);
+}
+
+.rts-result-summary-grid span {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--rts-muted);
+}
+
+.rts-route-map-stage {
+  position: relative;
+  overflow: hidden;
+}
+
+.rts-route-rank {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  z-index: 500;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.72);
+  color: #ffffff;
+  padding: 7px 11px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.rts-route-card-enter {
+  animation: rts-card-enter 420ms ease both;
+}
+
+@media (max-width: 900px) {
+  .rts-shell {
+    max-width: 430px;
+    padding: 0 8px 36px;
+  }
+
+  .rts-mobile-cta-page .rts-shell {
+    padding-bottom: 118px;
+  }
+
+  .rts-page-header {
+    min-height: 78px;
+    align-items: flex-end;
+    padding: 0 2px 14px;
+  }
+
+  .rts-eyebrow {
+    display: none;
+  }
+
+  .rts-page-header h1 {
+    font-size: 20px;
+    line-height: 1.25;
+    letter-spacing: 0;
+    word-break: keep-all;
+  }
+
+  .rts-card,
+  .rts-stat-card {
+    border-radius: 24px;
+    padding: 18px;
+  }
+
+  .rts-data-grid {
+    gap: 8px;
+  }
+
+  .rts-data-item {
+    padding: 12px 8px;
+  }
+
+  .rts-data-value {
+    font-size: 11.5px;
+  }
+
+  .rts-data-label {
+    font-size: 11px;
+  }
+
+  .rts-desktop-submit {
+    display: none;
+  }
+
+  .rts-mobile-sticky-cta {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 900;
+    display: grid;
+    gap: 8px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    background: rgba(255, 255, 255, 0.94);
+    padding: 10px max(14px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
+    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.08);
+    backdrop-filter: blur(12px);
+  }
+
+  .rts-mobile-sticky-cta p {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    font-size: 12px;
+    font-weight: 700;
+    color: #555555;
+  }
 }
 
 .animate-fade-in {
@@ -125,6 +521,18 @@
   }
 }
 
+@keyframes rts-card-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 @keyframes shimmer {
   0%,
   90%,

main/app/loading-preview/page.tsx

@@ -19,7 +19,7 @@ const ROUTE_STEPS = [
   "OSM 도로망 불러오는 중",
   "템플릿 윤곽 분석 중",
   "후보 경로 생성 중",
-  "CLIP 유사도 평가 중",
+  "경로 모양 확인 중",
   "결과 정리 중",
 ];
 

main/app/lobby/page.tsx

@@ -1,21 +1,15 @@
 "use client";
 
-import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import TopBar from "../_components/TopBar";
 import LeafletMap from "../_components/LeafletMap";
+import { PageContainer, PageHeader, SectionCard } from "../_components/RunShapeUI";
 import { FLOW_KEYS, issueUiFlowPermit } from "../_utils/uiFlowGuard";
 
 const RECENT_ROUTE_LIMIT = 2;
 const DEFAULT_CENTER: [number, number] = [37.5665, 126.978];
 
-const features = [
-  "동물 모양 러닝 루트",
-  "실제 지도 기반 경로",
-  "AI 유사도 분석 추천",
-];
-
 type Point = [number, number];
 
 type RecentRoute = {
@@ -116,10 +110,11 @@ function formatCompletedAt(value: string | null): string {
 }
 
 function RatingStars({ rating }: { rating: number | null }) {
-  const normalized =
+  const normalizedRating =
     typeof rating === "number"
-      ? Math.max(0, Math.min(5, Math.round(rating)))
-      : 0;
+      ? Math.max(0, Math.min(5, rating))
+      : 4;
+  const filledStars = Math.round(normalizedRating);
 
   return (
     <div className="flex items-center gap-1">
@@ -127,49 +122,19 @@ function RatingStars({ rating }: { rating: number | null }) {
         {Array.from({ length: 5 }).map((_, index) => (
           <span
             key={index}
-            className={index < normalized ? "text-[#bfdcff]" : "text-[#d1d5db]"}
+            className={index < filledStars ? "text-[#1E40AF]" : "text-[#d1d5db]"}
           >
             ★
           </span>
         ))}
       </div>
       <span className="text-xs text-[#666]">
-        {normalized > 0 ? `${normalized}점` : "별점 미설정"}
+        별점 {normalizedRating.toFixed(1)}점
       </span>
     </div>
   );
 }
 
-function TagButton({
-  title,
-  subtitle,
-  icon,
-  onClick,
-}: {
-  title: string;
-  subtitle: string;
-  icon: ReactNode;
-  onClick?: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="relative h-[50px] w-full rounded-xl border border-black/10 bg-white px-4 py-2 text-left shadow-sm transition-shadow hover:shadow-md"
-    >
-      <div className="flex items-center gap-3">
-        <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#f2f4f8]">
-          {icon}
-        </div>
-        <div className="flex flex-col">
-          <span className="text-xs font-semibold text-black">{title}</span>
-          <span className="text-[10px] text-[#7f7f7f]">{subtitle}</span>
-        </div>
-      </div>
-    </button>
-  );
-}
-
 export default function Page() {
   const router = useRouter();
   const [displayName, setDisplayName] = useState("러너");
@@ -263,184 +228,175 @@ export default function Page() {
     router.push(`/route-search?flowToken=${encodeURIComponent(flowToken)}`);
   };
 
-  const handleStartManualRoute = () => {
-    const flowToken = issueUiFlowPermit(FLOW_KEYS.manualRoute);
-    router.push(`/manual-route?flowToken=${encodeURIComponent(flowToken)}`);
-  };
-
   return (
-    <main className="min-h-screen bg-white">
+    <main className="rts-page">
       <TopBar userName={displayName} title="Run The Shape" largeBrand />
 
-      <section className="mx-auto grid w-full max-w-6xl items-center gap-8 px-6 py-8 sm:px-10 md:grid-cols-2">
-        <div className="flex flex-col gap-4">
-          <h2 className="[font-family:'Inter-Bold',Helvetica] text-2xl font-bold leading-snug text-black sm:text-3xl">
-            안녕, {displayName}!
-            <br />
-            같이 뛰자
-          </h2>
-
-          <div className="flex items-center gap-2">
-            <div className="flex items-center justify-center text-2xl leading-none">
-              🏃
+      <PageContainer className="flex flex-col gap-5">
+        <PageHeader
+          title={`안녕하세요, ${displayName}님`}
+          subtitle="지역, 거리, 모양을 고르면 달릴 경로를 바로 생성할 수 있어요."
+        />
+
+        <SectionCard className="p-5 sm:p-6">
+          <div className="flex flex-col gap-5">
+            <div>
+              <h2
+                className="text-[22px] font-bold leading-[1.25] text-black sm:text-3xl"
+                style={{ wordBreak: "keep-all" }}
+              >
+                원하는 모양으로 달릴 경로 만들기
+              </h2>
+              <p className="mt-3 text-sm leading-6 text-[#666] sm:max-w-2xl sm:text-base">
+                위치와 목표 거리, 그리고 원하는 모양을 선택하면 지도 위에 러닝 경로를 생성합니다.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-3 gap-2 text-center text-xs sm:max-w-lg">
+              <div className="rounded-[16px] bg-[#f7f7f7] px-2 py-3">
+                <strong className="block text-black">지역</strong>
+                <span className="mt-1 block text-[#666]">동네 선택</span>
+              </div>
+              <div className="rounded-[16px] bg-[#f7f7f7] px-2 py-3">
+                <strong className="block text-black">모양</strong>
+                <span className="mt-1 block text-[#666]">그릴 형태</span>
+              </div>
+              <div className="rounded-[16px] bg-[#f7f7f7] px-2 py-3">
+                <strong className="block text-black">거리</strong>
+                <span className="mt-1 block text-[#666]">목표 km</span>
+              </div>
             </div>
-            <span className="[font-family:'Inter-SemiBold',Helvetica] text-base font-semibold text-black">
-              루트를 추천해드려요!
-            </span>
-          </div>
 
-          <ul className="flex flex-col gap-2">
-            {features.map((text) => (
-              <li key={text} className="flex items-center gap-2">
-                <span className="h-2 w-2 rounded-full bg-black" />
-                <span className="[font-family:'Inter-SemiBold',Helvetica] text-sm font-semibold text-black sm:text-base">
-                  {text}
-                </span>
-              </li>
-            ))}
-          </ul>
+            <button
+              type="button"
+              onClick={handleStartRouteSearch}
+              className="flex h-12 w-full items-center justify-center rounded-full bg-[#1E40AF] text-base font-bold text-white shadow-[0_12px_28px_rgba(30,64,175,0.28)] transition active:scale-[0.98]"
+            >
+              경로 생성하기
+            </button>
+          </div>
+        </SectionCard>
 
+        <section className="grid gap-3 sm:grid-cols-2">
           <button
             type="button"
-            onClick={handleStartRouteSearch}
-            className="mt-2 inline-flex w-full items-center justify-center rounded-full bg-[#bfdcff] px-6 py-3 font-semibold text-black shadow-sm transition-shadow hover:shadow-md sm:w-[320px]"
+            className="rts-card flex min-h-[76px] items-center justify-between gap-4 px-5 py-4 text-left"
+            onClick={() => router.push("/recent-shared-routes")}
           >
-            루트 찾기 시작하기
+            <div>
+              <h2 className="text-base font-bold text-black">최근 공유 루트</h2>
+              <p className="mt-1 text-sm text-[#777]">다른 러너가 공유한 경로 보기</p>
+            </div>
+            <span className="text-sm font-semibold text-[#777]">보기</span>
           </button>
+
           <button
             type="button"
-            onClick={handleStartManualRoute}
-            className="inline-flex w-full items-center justify-center rounded-full bg-[#bfdcff] px-6 py-3 font-semibold text-black shadow-sm transition-shadow hover:shadow-md sm:w-[320px]"
+            className="rts-card flex min-h-[76px] items-center justify-between gap-4 px-5 py-4 text-left"
+            onClick={() => router.push("/trend-routes")}
           >
-            직접 만들기
+            <div>
+              <h2 className="text-base font-bold text-black">인기 루트</h2>
+              <p className="mt-1 text-sm text-[#777]">이번 주 많이 본 경로 보기</p>
+            </div>
+            <span className="text-sm font-semibold text-[#777]">보기</span>
           </button>
-        </div>
-
-        <div className="flex items-center justify-center">
-          <div className="relative aspect-[1.25] w-[320px] max-w-full">
-            <video
-              className="h-full w-full rounded-3xl object-cover"
-              src="/loading/lobbyrunning.mp4"
-              autoPlay
-              muted
-              loop
-              playsInline
-              preload="metadata"
-            />
-          </div>
-        </div>
-      </section>
-
-      <section className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 pb-10 sm:px-10">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold sm:text-xl">최근 러닝 루트</h3>
-        </div>
-
-        <div className="grid gap-4 sm:grid-cols-2">
-          {isRecentLoading &&
-            Array.from({ length: RECENT_ROUTE_LIMIT }).map((_, index) => (
-              <article
-                key={`recent-loading-${index}`}
-                className="overflow-hidden rounded-2xl border border-black/10 bg-white shadow-sm"
-              >
-                <div className="h-28 w-full animate-pulse bg-[#f2f4f8]" />
-                <div className="px-4 py-3">
-                  <div className="h-3 w-32 animate-pulse rounded bg-[#f2f4f8]" />
-                </div>
-              </article>
-            ))}
-
-          {!isRecentLoading &&
-            recentRoutes.map((route) => {
-              const hasCenter =
-                Number.isFinite(route.center_lat) &&
-                Number.isFinite(route.center_lng);
-
-              const hasPolyline = route.polyline.length > 1;
-
-              const mapCenter: Point = hasCenter
-                ? [route.center_lat as number, route.center_lng as number]
-                : hasPolyline
-                  ? route.polyline[0]
-                  : DEFAULT_CENTER;
-
-              return (
+        </section>
+
+        <section className="flex w-full flex-col gap-3">
+          <h3 className="rts-section-title">최근 러닝 루트</h3>
+
+          <div className="grid gap-3 sm:grid-cols-2">
+            {isRecentLoading &&
+              Array.from({ length: RECENT_ROUTE_LIMIT }).map((_, index) => (
                 <article
-                  key={`recent-route-${route.run_session_id}`}
-                  className="overflow-hidden rounded-2xl border border-black/10 bg-white shadow-sm"
+                  key={`recent-loading-${index}`}
+                  className="rts-card rts-card-clip"
                 >
-                  <div className="relative h-28 w-full overflow-hidden bg-[#f2f4f8]">
-                    {hasPolyline ? (
-                      <LeafletMap
-                        center={mapCenter}
-                        route={route.polyline}
-                        className="lobby-route-map h-full w-full pointer-events-none"
-                        zoom={14}
-                      />
-                    ) : (
-                      <img
-                        src={resolveMapImage(route.map_image_url)}
-                        alt={route.route_title}
-                        className="h-full w-full object-cover"
-                        onError={(event) => {
-                          const target = event.currentTarget;
-                          target.onerror = null;
-                          target.src = "/icon.svg";
-                        }}
-                      />
-                    )}
-
-                    <div className="absolute inset-0 z-[500] bg-gradient-to-t from-black/55 via-transparent to-transparent" />
-                    <div className="absolute bottom-2 right-2 z-[500] rounded-md bg-black/65 px-2 py-1 text-xs font-semibold text-white">
-                      {route.route_title}
-                    </div>
-                  </div>
-
+                  <div className="h-28 w-full animate-pulse bg-[#f2f4f8]" />
                   <div className="px-4 py-3">
-                    <div className="flex items-center gap-3 text-sm text-black">
-                      <span className="[font-family:'Inter-SemiBold',Helvetica] font-semibold">
-                        {route.actual_distance_km.toFixed(2)}km
-                      </span>
-                      <span className="h-4 w-px bg-black/10" />
-                      <span className="[font-family:'Inter-SemiBold',Helvetica] font-semibold">
-                        코스 {route.route_length_km.toFixed(2)}km
-                      </span>
-                    </div>
-
-                    <div className="mt-1">
-                      <RatingStars rating={route.user_rating} />
-                    </div>
-
-                    <p className="mt-1 text-xs text-[#666]">
-                      {formatCompletedAt(route.completed_at)}
-                    </p>
+                    <div className="h-3 w-32 animate-pulse rounded bg-[#f2f4f8]" />
                   </div>
                 </article>
-              );
-            })}
+              ))}
+
+            {!isRecentLoading &&
+              recentRoutes.map((route) => {
+                const hasCenter =
+                  Number.isFinite(route.center_lat) &&
+                  Number.isFinite(route.center_lng);
+
+                const hasPolyline = route.polyline.length > 1;
+
+                const mapCenter: Point = hasCenter
+                  ? [route.center_lat as number, route.center_lng as number]
+                  : hasPolyline
+                    ? route.polyline[0]
+                    : DEFAULT_CENTER;
+
+                return (
+                  <article
+                    key={`recent-route-${route.run_session_id}`}
+                    className="rts-card rts-card-clip"
+                  >
+                    <div className="relative h-32 w-full overflow-hidden bg-[#f2f4f8] sm:h-28">
+                      {hasPolyline ? (
+                        <LeafletMap
+                          center={mapCenter}
+                          route={route.polyline}
+                          className="lobby-route-map h-full w-full pointer-events-none"
+                          zoom={14}
+                        />
+                      ) : (
+                        <img
+                          src={resolveMapImage(route.map_image_url)}
+                          alt={route.route_title}
+                          className="h-full w-full object-cover"
+                          onError={(event) => {
+                            const target = event.currentTarget;
+                            target.onerror = null;
+                            target.src = "/icon.svg";
+                          }}
+                        />
+                      )}
+
+                      <div className="absolute inset-0 z-[500] bg-gradient-to-t from-black/55 via-transparent to-transparent" />
+                      <div className="absolute bottom-2 right-2 z-[500] rounded-md bg-black/65 px-2 py-1 text-xs font-semibold text-white">
+                        {route.route_title}
+                      </div>
+                    </div>
 
-          {!isRecentLoading && recentRoutes.length === 0 && (
-            <div className="col-span-full rounded-2xl border border-dashed border-black/20 px-4 py-8 text-center text-sm text-[#666]">
-              아직 저장된 러닝 코스가 없습니다. 루트를 완주하면 여기에 자동으로 표시됩니다.
-            </div>
-          )}
-        </div>
-
-        <div className="grid gap-4 pt-2 sm:grid-cols-2">
-          <TagButton
-            title="실시간 최근 공유 된 루트"
-            subtitle="Top 10"
-            icon={<span className="text-sm">★</span>}
-            onClick={() => router.push("/recent-shared-routes")}
-          />
-          <TagButton
-            title="이번 주 인기 루트"
-            subtitle="Top 3"
-            icon={<span className="text-sm">▲</span>}
-            onClick={() => router.push("/trend-routes")}
-          />
-        </div>
-      </section>
+                    <div className="px-4 py-3">
+                      <div className="flex items-center gap-3 text-sm text-black">
+                        <span className="font-semibold">
+                          내 기록 {route.actual_distance_km.toFixed(2)}km
+                        </span>
+                        <span className="h-4 w-px bg-black/10" />
+                        <span className="font-semibold">
+                          코스 총 {route.route_length_km.toFixed(2)}km
+                        </span>
+                      </div>
+
+                      <div className="mt-1">
+                        <RatingStars rating={route.user_rating} />
+                      </div>
+
+                      <p className="mt-1 text-xs text-[#666]">
+                        {formatCompletedAt(route.completed_at)}
+                      </p>
+                    </div>
+                  </article>
+                );
+              })}
+
+            {!isRecentLoading && recentRoutes.length === 0 && (
+              <div className="rts-empty-state col-span-full">
+                아직 저장된 러닝 코스가 없습니다. 루트를 완주하면 여기에 자동으로 표시됩니다.
+              </div>
+            )}
+          </div>
+        </section>
+      </PageContainer>
 
       <style jsx global>{`
         .lobby-route-map .leaflet-control-container {
@@ -449,4 +405,4 @@ export default function Page() {
       `}</style>
     </main>
   );
-}
+}

main/app/manual-route/page.tsx

@@ -574,7 +574,7 @@ function ManualRoutePageContent() {
           : "그리기 대기";
 
   return (
-    <main className="min-h-screen bg-[#f7f9fc]">
+    <main className="rts-page">
       <TopBar />
       <RunStartNoticeModal
         open={isRunNoticeOpen}
@@ -585,8 +585,8 @@ function ManualRoutePageContent() {
         }}
       />
 
-      <section className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-6 sm:px-10">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+      <section className="rts-shell flex flex-col gap-4">
+        <div className="rts-page-header flex-col items-start sm:flex-row sm:items-end sm:justify-between">
           <div>
             <h1 className="text-2xl font-bold text-black">직접 만들기</h1>
             <p className="mt-1 text-sm text-[#666]">
@@ -602,8 +602,8 @@ function ManualRoutePageContent() {
               onClick={() => setDrawingEnabled(true)}
               className={`h-10 rounded-full px-4 text-sm font-semibold ${
                 drawingEnabled
-                  ? "bg-black text-white"
-                  : "border border-black/15 bg-white text-black"
+                  ? "bg-[#bfdcff] text-black"
+                  : "border border-[#e5e5e5] bg-white text-black"
               }`}
             >
               그리기
@@ -613,8 +613,8 @@ function ManualRoutePageContent() {
               onClick={() => setDrawingEnabled(false)}
               className={`h-10 rounded-full px-4 text-sm font-semibold ${
                 !drawingEnabled
-                  ? "bg-black text-white"
-                  : "border border-black/15 bg-white text-black"
+                  ? "bg-[#bfdcff] text-black"
+                  : "border border-[#e5e5e5] bg-white text-black"
               }`}
             >
               지도 이동
@@ -622,7 +622,7 @@ function ManualRoutePageContent() {
           </div>
         </div>
 
-        <div className="relative h-[62dvh] min-h-[420px] overflow-hidden rounded-2xl border border-black/10 bg-white shadow-sm">
+        <div className="relative h-[62dvh] min-h-[420px] overflow-hidden rounded-[28px] border border-[#e5e5e5] bg-white">
           <ManualRouteMap
             center={currentPosition ?? center}
             currentPosition={currentPosition}
@@ -636,13 +636,13 @@ function ManualRoutePageContent() {
             className="h-full w-full"
           />
 
-          <div className="pointer-events-none absolute left-3 top-3 z-[500] rounded-xl border border-black/10 bg-white/95 px-3 py-2 text-xs font-semibold text-[#444] shadow-sm">
+          <div className="pointer-events-none absolute left-3 top-3 z-[500] rounded-full border border-[#e5e5e5] bg-white/95 px-4 py-2 text-xs font-semibold text-[#444]">
             {statusText} · {formatDistance(displayLengthKm)}
           </div>
         </div>
 
         <div className="grid gap-3 md:grid-cols-[1fr_auto] md:items-start">
-          <div className="rounded-2xl border border-black/10 bg-white px-4 py-3 shadow-sm">
+          <div className="rts-card px-4 py-3">
             <div className="grid gap-2 text-sm sm:grid-cols-3">
               <div>
                 <p className="text-xs text-[#777]">획</p>
@@ -671,14 +671,14 @@ function ManualRoutePageContent() {
               type="button"
               onClick={locateCurrentPosition}
               disabled={isLocating}
-              className="h-11 rounded-full border border-black/15 bg-white px-4 text-sm font-semibold text-black disabled:opacity-60"
+              className="rts-secondary-button h-11 px-4 disabled:opacity-60"
             >
               {isLocating ? "확인 중" : "내 위치"}
             </button>
             <button
               type="button"
               onClick={handleClear}
-              className="h-11 rounded-full border border-black/15 bg-white px-4 text-sm font-semibold text-black"
+              className="rts-secondary-button h-11 px-4"
             >
               지우기
             </button>
@@ -691,7 +691,7 @@ function ManualRoutePageContent() {
                 isCreatingRoute ||
                 snapStatus === "creating"
               }
-              className="h-11 rounded-full bg-black px-4 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50 sm:col-auto"
+              className="rts-primary-button h-11 px-4 disabled:cursor-not-allowed disabled:opacity-50 sm:col-auto"
             >
               {isCreatingRoute || snapStatus === "creating" ? "생성 중" : "완료"}
             </button>

main/app/my-posts/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import Link from "next/link";
 import dynamic from "next/dynamic";
+import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import TopBar from "../_components/TopBar";
 import {
   DEFAULT_MAP_CENTER,
-  formatRelativeKoreanTime,
   readCommunityPostsFromStorage,
+  writeCommunityPostsToStorage,
   type CommunityPost,
 } from "../_utils/communityPosts";
 import { fetchCommunityPostsFromApi } from "../_utils/communityApi";
@@ -37,9 +37,7 @@ type SafePostStats = {
 };
 
 function getCookieValue(name: string): string | null {
-  if (typeof document === "undefined") {
-    return null;
-  }
+  if (typeof document === "undefined") return null;
 
   return (
     document.cookie
@@ -50,10 +48,7 @@ function getCookieValue(name: string): string | null {
 }
 
 function getAccessToken(): string | null {
-  if (typeof window === "undefined") {
-    return null;
-  }
-
+  if (typeof window === "undefined") return null;
   return localStorage.getItem("access_token") ?? getCookieValue("access_token");
 }
 
@@ -61,6 +56,18 @@ function normalizeText(value: unknown): string {
   return String(value ?? "").trim().toLowerCase();
 }
 
+function formatDate(value?: string): string {
+  if (!value) return "작성일 없음";
+
+  const parsed = new Date(value);
+  if (!Number.isFinite(parsed.getTime())) return "작성일 없음";
+
+  return parsed.toLocaleDateString("ko-KR", {
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+
 function getPostNumber(post: CommunityPost, keys: string[]): number {
   const record = post as unknown as Record<string, unknown>;
 
@@ -73,7 +80,6 @@ function getPostNumber(post: CommunityPost, keys: string[]): number {
 
     if (typeof value === "string") {
       const parsed = Number(value);
-
       if (Number.isFinite(parsed)) {
         return Math.max(0, Math.round(parsed));
       }
@@ -84,14 +90,8 @@ function getPostNumber(post: CommunityPost, keys: string[]): number {
 }
 
 function formatCount(value: number): string {
-  if (value >= 10000) {
-    return `${(value / 10000).toFixed(1)}만`;
-  }
-
-  if (value >= 1000) {
-    return `${(value / 1000).toFixed(1)}천`;
-  }
-
+  if (value >= 10000) return `${(value / 10000).toFixed(1)}만`;
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}천`;
   return `${value}`;
 }
 
@@ -140,13 +140,7 @@ function getSafePostStats(post: CommunityPost): SafePostStats {
     record.speed ??
     "-";
 
-  const calories =
-    stats.calories ??
-    record.calories ??
-    record.calorie ??
-    record.kcal ??
-    "-";
-
+  const calories = stats.calories ?? record.calories ?? record.calorie ?? record.kcal ?? "-";
   const bpm =
     stats.bpm ??
     record.bpm ??
@@ -168,13 +162,11 @@ function getSafePostStats(post: CommunityPost): SafePostStats {
 
 function getDistanceText(post: CommunityPost): string {
   const stats = getSafePostStats(post);
-
   return /km/i.test(stats.distance) ? stats.distance : `${stats.distance}km`;
 }
 
 function getAchievementText(post: CommunityPost): string {
   const stats = getSafePostStats(post);
-
   return stats.achievement.includes("%") ? stats.achievement : `${stats.achievement}%`;
 }
 
@@ -182,19 +174,11 @@ function isMyPost(post: CommunityPost, user: CurrentUser | null): boolean {
   if (!user) return false;
 
   const record = post as unknown as Record<string, unknown>;
-
   const userIds = [user.id, user.user_id]
     .filter((value) => value !== undefined && value !== null)
     .map((value) => normalizeText(value));
-
   const userEmails = [user.email].filter(Boolean).map((value) => normalizeText(value));
-
-  const userNames = [
-    user.first_name,
-    user.nickname,
-    user.username,
-    user.email?.split("@")[0],
-  ]
+  const userNames = [user.first_name, user.nickname, user.username, user.email?.split("@")[0]]
     .filter(Boolean)
     .map((value) => normalizeText(value));
 
@@ -208,7 +192,6 @@ function isMyPost(post: CommunityPost, user: CurrentUser | null): boolean {
     record.owner_id,
     record.ownerId,
   ].map((value) => normalizeText(value));
-
   const postEmailCandidates = [
     record.email,
     record.user_email,
@@ -216,7 +199,6 @@ function isMyPost(post: CommunityPost, user: CurrentUser | null): boolean {
     record.author_email,
     record.authorEmail,
   ].map((value) => normalizeText(value));
-
   const postNameCandidates = [
     post.nickname,
     record.author,
@@ -226,19 +208,11 @@ function isMyPost(post: CommunityPost, user: CurrentUser | null): boolean {
     record.userName,
   ].map((value) => normalizeText(value));
 
-  if (userIds.some((id) => id && postIdCandidates.includes(id))) {
-    return true;
-  }
-
-  if (userEmails.some((email) => email && postEmailCandidates.includes(email))) {
-    return true;
-  }
-
-  if (userNames.some((name) => name && postNameCandidates.includes(name))) {
-    return true;
-  }
-
-  return false;
+  return (
+    userIds.some((id) => id && postIdCandidates.includes(id)) ||
+    userEmails.some((email) => email && postEmailCandidates.includes(email)) ||
+    userNames.some((name) => name && postNameCandidates.includes(name))
+  );
 }
 
 async function fetchCurrentUser(token: string): Promise<CurrentUser | null> {
@@ -247,17 +221,11 @@ async function fetchCurrentUser(token: string): Promise<CurrentUser | null> {
     cache: "no-store",
   });
 
-  if (!response.ok) {
-    return null;
-  }
-
+  if (!response.ok) return null;
   return response.json();
 }
 
-async function fetchMyPosts(
-  token: string,
-  user: CurrentUser | null,
-): Promise<CommunityPost[]> {
+async function fetchMyPosts(token: string, user: CurrentUser | null): Promise<CommunityPost[]> {
   const myPostEndpoints = [
     `${apiBase}/api/v1/community/posts/me`,
     `${apiBase}/api/v1/community/my-posts`,
@@ -275,10 +243,7 @@ async function fetchMyPosts(
 
       const data = await response.json();
       const posts = Array.isArray(data) ? data : data.posts ?? data.routes ?? [];
-
-      if (Array.isArray(posts)) {
-        return posts;
-      }
+      if (Array.isArray(posts)) return posts;
     } catch {
       continue;
     }
@@ -316,9 +281,7 @@ async function requestUpdatePost(
           body: JSON.stringify(payload),
         });
 
-        if (response.ok) {
-          return true;
-        }
+        if (response.ok) return true;
       } catch {
         continue;
       }
@@ -328,10 +291,7 @@ async function requestUpdatePost(
   return false;
 }
 
-async function requestDeletePost(
-  postId: string | number,
-  token: string | null,
-): Promise<boolean> {
+async function requestDeletePost(postId: string | number, token: string | null): Promise<boolean> {
   if (!token) return false;
 
   const endpoints = [
@@ -346,9 +306,7 @@ async function requestDeletePost(
         headers: { Authorization: `Bearer ${token}` },
       });
 
-      if (response.ok) {
-        return true;
-      }
+      if (response.ok) return true;
     } catch {
       continue;
     }
@@ -369,38 +327,17 @@ function MyPostCard({
   const center = post.map?.center ?? DEFAULT_MAP_CENTER;
   const route = post.map?.polyline;
   const safeStats = getSafePostStats(post);
-
   const placeLabel =
     post.map?.mode === "manual"
-      ? post.map.address || "설정한 지역"
-      : "내 주변 러닝 코스";
-
-  const viewCount = getPostNumber(post, [
-    "view_count",
-    "views",
-    "viewCount",
-    "hit",
-    "hits",
-    "readCount",
-  ]);
-
-  const likeCount = getPostNumber(post, [
-    "like_count",
-    "likes",
-    "likeCount",
-    "likedCount",
-    "heartCount",
-  ]);
+      ? post.map.address || "설정한 위치"
+      : post.map?.address || "내 주변 러닝 코스";
+  const viewCount = getPostNumber(post, ["view_count", "views", "viewCount", "hit", "hits", "readCount"]);
+  const likeCount = getPostNumber(post, ["like_count", "likes", "likeCount", "likedCount", "heartCount"]);
 
   return (
-    <article className="relative z-0 overflow-hidden rounded-2xl border border-black/10 bg-white shadow-sm">
-      <div className="relative z-0 h-36 w-full overflow-hidden bg-[#f2f4f8]">
-        <LeafletMap
-          center={center}
-          route={route}
-          className="relative z-0 h-full w-full"
-          zoom={14}
-        />
+    <article className="rts-card rts-card-clip relative z-0">
+      <div className="relative z-0 h-40 w-full overflow-hidden bg-[#f2f4f8]">
+        <LeafletMap center={center} route={route} className="relative z-0 h-full w-full" zoom={14} />
       </div>
 
       <div className="h-px w-full bg-black/10" />
@@ -412,7 +349,7 @@ function MyPostCard({
           </h3>
 
           <div className="flex shrink-0 items-center gap-1 rounded-full bg-[#eef7ff] px-2 py-1 text-[11px] font-semibold text-black">
-            <span className="text-[#6aaee8]">♥</span>
+            <span>좋아요</span>
             <span>{formatCount(likeCount)}</span>
           </div>
         </div>
@@ -423,15 +360,14 @@ function MyPostCard({
           <span className="font-semibold text-black">완주율 {getAchievementText(post)}</span>
         </div>
 
-        <p className="text-sm text-[#4a4a4a]">
-          {post.content || "작성된 코스 설명이 없습니다."}
+        <p className="line-clamp-2 text-sm text-[#4a4a4a]">
+          {post.content || "작성한 코스 설명이 없습니다."}
         </p>
 
         <div className="flex flex-wrap items-center gap-2">
           <span className="inline-flex items-center gap-1 rounded-full bg-[#f7f8fb] px-2.5 py-1 text-xs font-semibold text-[#555]">
-            조회수 <strong className="text-black">{formatCount(viewCount)}</strong>
+            조회 <strong className="text-black">{formatCount(viewCount)}</strong>
           </span>
-
           <span className="inline-flex items-center gap-1 rounded-full bg-[#eef7ff] px-2.5 py-1 text-xs font-semibold text-[#555]">
             좋아요 <strong className="text-black">{formatCount(likeCount)}</strong>
           </span>
@@ -441,15 +377,12 @@ function MyPostCard({
           <div className="text-xs text-[#555]">
             시간 <span className="ml-1 font-semibold text-black">{safeStats.time}</span>
           </div>
-
           <div className="text-xs text-[#555]">
-            속도 <span className="ml-1 font-semibold text-black">{safeStats.pace}</span>
+            페이스 <span className="ml-1 font-semibold text-black">{safeStats.pace}</span>
           </div>
-
           <div className="text-xs text-[#555]">
             칼로리 <span className="ml-1 font-semibold text-black">{safeStats.calories}</span>
           </div>
-
           <div className="text-xs text-[#555]">
             BPM <span className="ml-1 font-semibold text-black">{safeStats.bpm}</span>
           </div>
@@ -463,31 +396,20 @@ function MyPostCard({
             <span className="truncate text-xs text-[#7f7f7f]">{placeLabel}</span>
           </div>
 
-          <span className="shrink-0 text-xs text-[#7f7f7f]">
-            {post.createdAt ? formatRelativeKoreanTime(post.createdAt) : "작성일 없음"}
-          </span>
+          <span className="shrink-0 text-xs text-[#7f7f7f]">{formatDate(post.createdAt)}</span>
         </div>
 
         <div className="grid grid-cols-3 gap-2">
-          <Link
-            href={`/route/${post.id}`}
-            className="inline-flex h-10 items-center justify-center rounded-xl bg-[#bfdcff] px-3 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
-          >
+          <Link href={`/route/${post.id}`} className="rts-primary-button h-10 px-3 text-sm">
             보기
           </Link>
-
-          <button
-            type="button"
-            onClick={() => onEdit(post)}
-            className="inline-flex h-10 items-center justify-center rounded-xl border border-black/10 bg-white px-3 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
-          >
+          <button type="button" onClick={() => onEdit(post)} className="rts-secondary-button h-10 px-3 text-sm">
             수정
           </button>
-
           <button
             type="button"
             onClick={() => onDelete(post)}
-            className="inline-flex h-10 items-center justify-center rounded-xl border border-red-200 bg-red-50 px-3 text-sm font-semibold text-red-600 shadow-sm transition-shadow hover:shadow-md"
+            className="inline-flex h-10 items-center justify-center rounded-full border border-red-200 bg-red-50 px-3 text-sm font-semibold text-red-600"
           >
             삭제
           </button>
@@ -523,7 +445,6 @@ export default function MyPostsPage() {
       setErrorMessage("");
 
       const token = getAccessToken();
-
       if (!token) {
         setPosts([]);
         setIsLoading(false);
@@ -532,23 +453,18 @@ export default function MyPostsPage() {
 
       try {
         const user = await fetchCurrentUser(token);
-
         if (cancelled) return;
 
         const myPosts = await fetchMyPosts(token, user);
-
         if (cancelled) return;
 
         setPosts(myPosts);
       } catch {
         if (cancelled) return;
-
         setErrorMessage("내 게시글을 불러오지 못했습니다.");
         setPosts([]);
       } finally {
-        if (!cancelled) {
-          setIsLoading(false);
-        }
+        if (!cancelled) setIsLoading(false);
       }
     };
 
@@ -568,7 +484,6 @@ export default function MyPostsPage() {
 
   const closeEditModal = () => {
     if (isSaving) return;
-
     setEditingPost(null);
     setEditTitle("");
     setEditContent("");
@@ -579,7 +494,6 @@ export default function MyPostsPage() {
 
     const title = editTitle.trim();
     const content = editContent.trim();
-
     if (!title) {
       setErrorMessage("제목을 입력해주세요.");
       return;
@@ -593,21 +507,17 @@ export default function MyPostsPage() {
 
     if (!success) {
       setIsSaving(false);
-      setErrorMessage("게시글 수정에 실패했습니다. 서버 API 경로를 확인해주세요.");
+      setErrorMessage("게시글 수정에 실패했습니다. 잠시 뒤 다시 시도해주세요.");
       return;
     }
 
-    setPosts((prev) =>
-      prev.map((post) =>
-        post.id === editingPost.id
-          ? ({
-              ...post,
-              title,
-              content,
-            } as CommunityPost)
-          : post,
-      ),
-    );
+    setPosts((prev) => {
+      const next = prev.map((post) =>
+        post.id === editingPost.id ? ({ ...post, title, content } as CommunityPost) : post,
+      );
+      writeCommunityPostsToStorage(next);
+      return next;
+    });
 
     setIsSaving(false);
     closeEditModal();
@@ -623,50 +533,42 @@ export default function MyPostsPage() {
     const success = await requestDeletePost(post.id, token);
 
     if (!success) {
-      setErrorMessage("게시글 삭제에 실패했습니다. 서버 API 경로를 확인해주세요.");
+      setErrorMessage("게시글 삭제에 실패했습니다. 잠시 뒤 다시 시도해주세요.");
       return;
     }
 
-    setPosts((prev) => prev.filter((item) => item.id !== post.id));
+    setPosts((prev) => {
+      const next = prev.filter((item) => item.id !== post.id);
+      writeCommunityPostsToStorage(next);
+      return next;
+    });
   };
 
   return (
-    <main className="min-h-screen bg-white">
+    <main className="rts-page">
       <TopBar />
 
-      <section className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-8 sm:px-10">
-        <section className="rounded-2xl bg-[#f1f6ff] px-6 py-8 sm:px-8">
+      <section className="rts-shell flex flex-col gap-6">
+        <section className="rts-card bg-[#f1f6ff]">
           <div className="flex flex-col gap-3">
-            <p className="text-xs font-bold tracking-[0.14em] text-[#6b7280]">
-              MY COMMUNITY
-            </p>
-
             <h1 className="text-2xl font-bold leading-snug text-black sm:text-3xl">
               내 게시글
             </h1>
-
             <p className="text-sm leading-relaxed text-[#5d5d5d] sm:text-base">
               내가 공유한 러닝 루트를 확인하고, 게시글을 수정하거나 삭제할 수 있습니다.
             </p>
           </div>
         </section>
 
-        {errorMessage && (
-          <div className="rounded-xl border border-[#bfdcff] bg-[#eef7ff] px-4 py-3 text-sm text-[#2459a8]">
+        {errorMessage ? (
+          <div className="rounded-[18px] border border-[#bfdcff] bg-[#eef7ff] px-4 py-3 text-sm text-[#2459a8]">
             {errorMessage}
           </div>
-        )}
+        ) : null}
 
         <section className="flex items-center justify-between gap-3">
-          <div>
-            <p className="text-xs font-bold tracking-[0.14em] text-[#9b9b9b]">RECENT</p>
-            <h2 className="text-xl font-bold text-black">작성한 게시글</h2>
-          </div>
-
-          <Link
-            href="/community/new"
-            className="inline-flex h-10 items-center rounded-full bg-[#bfdcff] px-4 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
-          >
+          <h2 className="text-xl font-bold text-black">작성한 게시글</h2>
+          <Link href="/community/new" className="rts-primary-button h-10">
             새 글 작성
           </Link>
         </section>
@@ -674,10 +576,7 @@ export default function MyPostsPage() {
         {isLoading ? (
           <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {Array.from({ length: 3 }).map((_, index) => (
-              <article
-                key={index}
-                className="overflow-hidden rounded-2xl border border-black/10 bg-white shadow-sm"
-              >
+              <article key={index} className="rts-card rts-card-clip">
                 <div className="h-36 w-full animate-pulse bg-[#f2f4f8]" />
                 <div className="flex flex-col gap-3 px-4 py-4">
                   <div className="h-4 w-2/3 animate-pulse rounded bg-[#f2f4f8]" />
@@ -690,51 +589,37 @@ export default function MyPostsPage() {
         ) : sortedPosts.length > 0 ? (
           <section className="relative z-0 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {sortedPosts.map((post) => (
-              <MyPostCard
-                key={post.id}
-                post={post}
-                onEdit={openEditModal}
-                onDelete={handleDeletePost}
-              />
+              <MyPostCard key={post.id} post={post} onEdit={openEditModal} onDelete={handleDeletePost} />
             ))}
           </section>
         ) : (
-          <section className="rounded-2xl border border-dashed border-black/20 bg-[#fafafa] px-6 py-14 text-center">
+          <section className="rts-empty-state">
             <p className="text-base font-semibold text-black">
               아직 작성한 게시글이 없습니다.
             </p>
-
             <p className="mt-2 text-sm text-[#666]">
-              러닝 루트를 공유하면 이곳에서 내가 올린 게시글을 확인할 수 있습니다.
+              완주한 러닝 루트를 공유하면 여기에서 내가 올린 게시글을 확인할 수 있습니다.
             </p>
-
-            <Link
-              href="/community/new"
-              className="mt-5 inline-flex h-11 items-center rounded-full bg-[#bfdcff] px-5 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
-            >
+            <Link href="/community/new" className="rts-primary-button mt-5 h-11 px-5">
               첫 게시글 작성하기
             </Link>
           </section>
         )}
       </section>
 
-      {editingPost && (
+      {editingPost ? (
         <div className="fixed inset-0 z-[6000] flex items-center justify-center bg-black/45 px-5">
-          <section className="w-full max-w-lg rounded-2xl bg-white p-5 shadow-xl">
+          <section className="rts-card w-full max-w-lg">
             <div className="flex items-start justify-between gap-4">
-              <div>
-                <p className="text-xs font-bold tracking-[0.14em] text-[#9b9b9b]">
-                  EDIT POST
-                </p>
-                <h2 className="mt-1 text-xl font-bold text-black">게시글 수정</h2>
-              </div>
+              <h2 className="text-xl font-bold text-black">게시글 수정</h2>
 
               <button
                 type="button"
                 onClick={closeEditModal}
                 className="flex h-9 w-9 items-center justify-center rounded-full border border-black/10 text-xl"
+                aria-label="닫기"
               >
-                ×
+                x
               </button>
             </div>
 
@@ -744,7 +629,7 @@ export default function MyPostsPage() {
                 <input
                   value={editTitle}
                   onChange={(event) => setEditTitle(event.target.value)}
-                  className="h-11 rounded-xl border border-black/10 px-3 text-sm font-normal outline-none focus:border-[#bfdcff]"
+                  className="rts-input font-normal"
                   placeholder="제목을 입력하세요"
                 />
               </label>
@@ -754,18 +639,14 @@ export default function MyPostsPage() {
                 <textarea
                   value={editContent}
                   onChange={(event) => setEditContent(event.target.value)}
-                  className="min-h-[130px] rounded-xl border border-black/10 px-3 py-3 text-sm font-normal outline-none focus:border-[#bfdcff]"
+                  className="rts-textarea font-normal"
                   placeholder="게시글 내용을 입력하세요"
                 />
               </label>
             </div>
 
             <div className="mt-5 grid grid-cols-2 gap-2">
-              <button
-                type="button"
-                onClick={closeEditModal}
-                className="h-11 rounded-xl border border-black/10 bg-white text-sm font-semibold text-black"
-              >
+              <button type="button" onClick={closeEditModal} className="rts-secondary-button h-11">
                 취소
               </button>
 
@@ -773,14 +654,14 @@ export default function MyPostsPage() {
                 type="button"
                 onClick={handleSaveEdit}
                 disabled={isSaving}
-                className="h-11 rounded-xl bg-[#bfdcff] text-sm font-semibold text-black disabled:opacity-60"
+                className="rts-primary-button h-11 disabled:opacity-60"
               >
                 {isSaving ? "저장 중..." : "저장"}
               </button>
             </div>
           </section>
         </div>
-      )}
+      ) : null}
 
       <style jsx global>{`
         .leaflet-control-container {

main/app/mypage/page.tsx

@@ -8,6 +8,11 @@ import {
   pickAudioDirectoryAndReadFiles,
   writeAudioStoragePermissionStatus,
 } from "../_utils/audioStoragePermission";
+import {
+  getStoredProfileImage,
+  notifyProfileImageChanged,
+  PROFILE_IMAGE_STORAGE_KEY,
+} from "../_utils/profileImage";
 
 type MeResponse = {
   email?: string;
@@ -18,8 +23,6 @@ type MeResponse = {
 };
 
 const FALLBACK_SIGNUP_DATE = "2026.01.01";
-const PROFILE_IMAGE_STORAGE_KEY = "run_the_shape_profile_image_v1";
-const PROFILE_IMAGE_UPDATED_EVENT = "profile-image-updated";
 
 function getCookieValue(name: string): string | null {
   const value = document.cookie
@@ -76,14 +79,6 @@ function formatSignupDate(value?: string) {
   ).padStart(2, "0")}`;
 }
 
-function getStoredProfileImage(): string {
-  if (typeof window === "undefined") {
-    return "";
-  }
-
-  return window.localStorage.getItem(PROFILE_IMAGE_STORAGE_KEY) ?? "";
-}
-
 export default function Page() {
   const router = useRouter();
   const profileInputRef = useRef<HTMLInputElement | null>(null);
@@ -157,10 +152,6 @@ export default function Page() {
     };
   }, [apiBase]);
 
-  const notifyProfileImageChanged = () => {
-    window.dispatchEvent(new Event(PROFILE_IMAGE_UPDATED_EVENT));
-  };
-
   const handleProfileImageChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
 
@@ -333,6 +324,27 @@ export default function Page() {
                 <path d="M4 22c1.5-4 14.5-4 16 0" />
               </svg>
             )}
+            <button
+              type="button"
+              className="profileCameraButton"
+              aria-label="프로필 사진 변경"
+              onClick={() => profileInputRef.current?.click()}
+            >
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M14.5 4 16 6h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3l1.5-2h5z" />
+                <circle cx="12" cy="13" r="3.5" />
+              </svg>
+            </button>
           </div>
 
           <div className="profileInfo">
@@ -456,13 +468,20 @@ export default function Page() {
       <style jsx>{`
         .page {
           min-height: 100vh;
-          background: #f0f2f5;
+          background: #ffffff;
+          color: #111111;
+          font-family:
+            Arial,
+            -apple-system,
+            BlinkMacSystemFont,
+            "Segoe UI",
+            sans-serif;
         }
 
         .container {
-          max-width: 480px;
+          max-width: 1120px;
           margin: 0 auto;
-          padding: 24px 16px 40px;
+          padding: 22px 18px 48px;
           display: flex;
           flex-direction: column;
         }
@@ -471,7 +490,9 @@ export default function Page() {
           display: flex;
           align-items: center;
           gap: 12px;
-          margin-bottom: 16px;
+          padding: 18px 0 20px;
+          margin-bottom: 24px;
+          border-bottom: 1px solid #111111;
         }
 
         .header h1 {
@@ -481,24 +502,34 @@ export default function Page() {
         }
 
         .back {
+          width: 34px;
+          height: 34px;
+          border: 1px solid #dedede;
+          border-radius: 999px;
+          background: #ffffff;
+          color: #111111;
           font-size: 24px;
-          background: none;
-          border: none;
+          line-height: 1;
           cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 0 2px;
         }
 
         .profileCard {
           background: #fff;
-          border-radius: 18px;
-          padding: 16px;
+          border: 1px solid #e5e5e5;
+          border-radius: 28px;
+          padding: 22px;
           display: flex;
-          gap: 14px;
+          gap: 18px;
           align-items: center;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
           margin-bottom: 16px;
         }
 
         .profileImageBox {
+          position: relative;
           width: 82px;
           height: 82px;
           border-radius: 999px;
@@ -512,6 +543,22 @@ export default function Page() {
           flex-shrink: 0;
         }
 
+        .profileCameraButton {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 28px;
+          height: 28px;
+          border: 1px solid #e5e5e5;
+          border-radius: 999px;
+          background: #bfdcff;
+          color: #111111;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+        }
+
         .profileImageBox img {
           width: 100%;
           height: 100%;
@@ -582,18 +629,18 @@ export default function Page() {
         }
 
         .cardsGrid {
-          display: flex;
-          flex-direction: column;
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 16px;
         }
 
         .card {
           background: #fff;
-          border-radius: 16px;
+          border: 1px solid #e5e5e5;
+          border-radius: 28px;
           padding: 16px;
           display: flex;
           flex-direction: column;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
         }
 
         .card label {
@@ -604,8 +651,8 @@ export default function Page() {
         }
 
         .valueBox {
-          background: #f5f5f5;
-          border-radius: 10px;
+          background: #f7f7f7;
+          border-radius: 18px;
           padding: 10px 12px;
           font-size: 15px;
         }
@@ -618,31 +665,35 @@ export default function Page() {
         }
 
         .changePasswordButton {
-          padding: 12px 20px;
-          border-radius: 10px;
-          background-color: #2d8cff;
-          color: #fff;
+          height: 40px;
+          padding: 0 16px;
+          border-radius: 999px;
+          background-color: #bfdcff;
+          color: #111111;
           border: none;
-          font-weight: 500;
+          font-size: 14px;
+          font-weight: 700;
           cursor: pointer;
         }
 
         .changePasswordButton:hover {
-          background-color: #1a6ed8;
+          opacity: 0.9;
         }
 
         .audioFolderButton {
-          padding: 12px 20px;
-          border-radius: 10px;
-          background-color: #1f1f1f;
-          color: #fff;
-          border: none;
-          font-weight: 500;
+          height: 40px;
+          padding: 0 16px;
+          border-radius: 999px;
+          background-color: #ffffff;
+          color: #555555;
+          border: 1px solid #e5e5e5;
+          font-size: 14px;
+          font-weight: 700;
           cursor: pointer;
         }
 
         .audioFolderButton:hover {
-          background-color: #000;
+          background-color: #f7f7f7;
         }
 
         .audioFolderButton:disabled {
@@ -695,12 +746,11 @@ export default function Page() {
           width: 100%;
           background: #fff;
           border: 1px solid #f0d4d4;
-          border-radius: 12px;
+          border-radius: 18px;
           padding: 14px;
           display: flex;
           flex-direction: column;
           gap: 8px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
         }
 
         .withdrawTitle {
@@ -753,6 +803,21 @@ export default function Page() {
         }
 
         @media (max-width: 640px) {
+          .container {
+            max-width: 430px;
+            padding: 0 8px 36px;
+          }
+
+          .header {
+            min-height: 78px;
+            align-items: flex-end;
+            padding: 0 2px 14px;
+          }
+
+          .cardsGrid {
+            grid-template-columns: 1fr;
+          }
+
           .card {
             padding: 14px;
           }
@@ -795,4 +860,4 @@ export default function Page() {
       `}</style>
     </main>
   );
-}
+}

main/app/recent-shared-routes/page.tsx

@@ -91,8 +91,8 @@ function RouteCard({ post }: { post: CommunityPost }) {
   ]);
 
   return (
-    <article className="relative z-0 overflow-hidden rounded-2xl border border-black/10 bg-white shadow-sm">
-      <div className="relative z-0 h-32 w-full overflow-hidden bg-[#f2f4f8]">
+    <article className="rts-card rts-card-clip relative z-0">
+      <div className="relative z-0 h-40 w-full overflow-hidden bg-[#f2f4f8]">
         <LeafletMap
           center={center}
           route={route}
@@ -164,7 +164,7 @@ function RouteCard({ post }: { post: CommunityPost }) {
 
         <Link
           href={`/route/${post.id}`}
-          className="inline-flex h-10 items-center justify-center rounded-xl bg-[#bfdcff] px-4 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
+          className="rts-primary-button h-10"
         >
           해당 루트 보러가기
         </Link>
@@ -243,11 +243,11 @@ function RecentSharedRoutesPageContent() {
   }, [posts, searchKeyword, sortType]);
 
   return (
-    <main className="min-h-screen bg-white">
+    <main className="rts-page">
       <TopBar />
 
-      <section className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-8 sm:px-10">
-        <section className="w-full rounded-2xl bg-[#f1f6ff] px-6 py-8 sm:px-8">
+      <section className="rts-shell flex flex-col gap-6">
+        <section className="rts-card bg-[#f1f6ff]">
           <div className="grid items-center gap-6 md:grid-cols-2">
             <div className="flex flex-col gap-3">
               <h2 className="text-2xl font-bold leading-snug text-black sm:text-3xl">
@@ -262,22 +262,22 @@ function RecentSharedRoutesPageContent() {
             </div>
 
             <div className="flex items-center justify-center">
-              <div className="flex h-[180px] w-full max-w-sm items-center justify-center rounded-2xl bg-white text-6xl">
-                🗺️
+              <div className="rts-inner-panel flex h-[180px] w-full max-w-sm items-center justify-center">
+                <span className="text-sm font-semibold text-[#777]">Shared routes</span>
               </div>
             </div>
           </div>
         </section>
 
         {posted && (
-          <div className="rounded-xl border border-[#bfdcff] bg-[#eef7ff] px-4 py-3 text-sm text-[#2459a8]">
+          <div className="rounded-[18px] border border-[#bfdcff] bg-[#eef7ff] px-4 py-3 text-sm text-[#2459a8]">
             게시글이 저장되었습니다.
           </div>
         )}
 
         <section className="flex w-full flex-col gap-4">
           <div className="relative z-[1000] flex flex-col gap-3 sm:flex-row">
-            <div className="flex h-[44px] flex-1 items-center gap-2 rounded-xl border border-black/10 bg-white px-4 shadow-sm">
+            <div className="flex h-[44px] flex-1 items-center gap-2 rounded-full border border-[#e5e5e5] bg-white px-4">
               <span className="text-sm text-[#7f7f7f]">🔍</span>
 
               <input
@@ -294,13 +294,13 @@ function RecentSharedRoutesPageContent() {
               <button
                 type="button"
                 onClick={() => setIsSortOpen((prev) => !prev)}
-                className="h-[44px] min-w-[120px] rounded-xl border border-black/10 bg-white px-4 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
+                className="h-[44px] min-w-[120px] rounded-full border border-[#e5e5e5] bg-white px-4 text-sm font-semibold text-black transition hover:bg-[#f7f7f7]"
               >
                 {sortType === "latest" ? "최신순" : "완주율순"} ▼
               </button>
 
               {isSortOpen ? (
-                <div className="absolute right-0 top-[52px] z-[9999] w-[140px] overflow-hidden rounded-xl border border-black/10 bg-white shadow-md">
+                <div className="absolute right-0 top-[52px] z-[9999] w-[140px] overflow-hidden rounded-[18px] border border-[#e5e5e5] bg-white">
                   <button
                     type="button"
                     onClick={() => {
@@ -343,7 +343,7 @@ function RecentSharedRoutesPageContent() {
 
               <Link
                 href="/community/new"
-                className="inline-flex h-10 items-center rounded-full bg-[#bfdcff] px-4 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
+                className="rts-primary-button h-10"
               >
                 새 글 작성
               </Link>
@@ -351,7 +351,7 @@ function RecentSharedRoutesPageContent() {
           </div>
 
           {filteredRoutes.length === 0 ? (
-            <div className="relative z-0 rounded-2xl border border-dashed border-black/20 bg-[#fafafa] px-6 py-12 text-center">
+            <div className="rts-empty-state relative z-0">
               <p className="text-base font-semibold text-black">공유된 루트가 아직 없습니다.</p>
 
               <p className="mt-2 text-sm text-[#666]">
@@ -360,7 +360,7 @@ function RecentSharedRoutesPageContent() {
 
               <Link
                 href="/community/new"
-                className="mt-5 inline-flex h-11 items-center rounded-full bg-[#bfdcff] px-5 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
+                className="rts-primary-button mt-5 h-11 px-5"
               >
                 첫 게시글 작성하기
               </Link>

main/app/route-results/[id]/page.tsx

@@ -5,22 +5,25 @@ import { Suspense, useEffect, useMemo, useState } from "react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import TopBar from "../../_components/TopBar";
 import RunStartNoticeModal from "../../_components/RunStartNoticeModal";
+import { PageContainer, PageHeader, SectionCard, EmptyState } from "../../_components/RunShapeUI";
 import { FLOW_KEYS, issueUiFlowPermit } from "../../_utils/uiFlowGuard";
 import {
   findGeneratedRouteDetail,
   formatGeneratedRouteLabel,
   getGeneratedRouteAiShapeScore,
-  getGeneratedRouteClipScore,
   type GeneratedRouteDetailRecord,
 } from "../../_utils/generatedRouteDetails";
+import {
+  readSavedRoutesFromStorage,
+  removeSavedRoute,
+  type SavedRouteRecord,
+  upsertSavedRoute,
+} from "../../_utils/savedRoutes";
 import {
   dismissRunStartNoticeForCurrentAccount,
   shouldShowRunStartNotice,
 } from "../../_utils/runStartNotice";
-import {
-  isNativeAppEnvironment,
-  sendNativeWearRouteSelection,
-} from "../../_utils/nativeWearBridge";
+import { sendNativeWearRouteSelection } from "../../_utils/nativeWearBridge";
 
 const LeafletMap = dynamic(() => import("../../_components/LeafletMap"), {
   ssr: false,
@@ -29,33 +32,72 @@ const LeafletMap = dynamic(() => import("../../_components/LeafletMap"), {
 const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL ?? "";
 const DEFAULT_MAP_CENTER: [number, number] = [37.5665, 126.978];
 
-const getCookieValue = (name: string): string | null => {
-  if (typeof document === "undefined") {
-    return null;
-  }
+function getCookieValue(name: string): string | null {
+  if (typeof document === "undefined") return null;
   return (
     document.cookie
       .split("; ")
       .find((row) => row.startsWith(`${name}=`))
       ?.split("=")[1] ?? null
   );
-};
+}
+
+function hashText(input: string): string {
+  let hash = 5381;
+  for (let index = 0; index < input.length; index += 1) {
+    hash = (hash * 33) ^ input.charCodeAt(index);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+function createSavedRouteId(detail: GeneratedRouteDetailRecord): string {
+  const coords = (detail.route.route_coords ?? [])
+    .map(([lat, lng]) => `${lat.toFixed(5)},${lng.toFixed(5)}`)
+    .join("|");
+  return `saved_${hashText(`${detail.place}|${detail.route.top1}|${detail.route.length_km.toFixed(3)}|${coords}`)}`;
+}
+
+function formatEstimatedTime(distanceKm: number): string {
+  if (!Number.isFinite(distanceKm) || distanceKm <= 0) return "-";
+  const minutes = Math.max(1, Math.round((distanceKm / 6.5) * 60));
+  if (minutes < 60) return `약 ${minutes}분`;
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest > 0 ? `약 ${hours}시간 ${rest}분` : `약 ${hours}시간`;
+}
+
+function getCompletionLabel(score: number | null): string {
+  if (score === null) return "형태 확인 필요";
+  if (score >= 78) return "형태 완성도 높음";
+  if (score >= 58) return "모양이 비교적 선명한 경로";
+  return "일부 구간에서 모양이 달라질 수 있음";
+}
+
+function getDifficulty(distanceKm: number): string {
+  if (distanceKm < 4) return "쉬움";
+  if (distanceKm < 8) return "보통";
+  return "어려움";
+}
 
-function formatScore(score: number | null): string {
-  return score === null ? "-" : score.toFixed(6);
+function getRouteFeatures(detail: GeneratedRouteDetailRecord): string[] {
+  const features: string[] = [];
+  if (detail.route.is_loop) {
+    features.push("출발지로 돌아오는 경로예요.");
+  }
+  if ((detail.route.route_coords?.length ?? 0) > 20) {
+    features.push("지도 위에서 모양을 비교적 세밀하게 따라가는 코스예요.");
+  }
+  if (detail.place) {
+    features.push(`${detail.place.split(",")[0]} 주변에서 시작할 수 있어요.`);
+  }
+  return features;
 }
 
-function RouteStat({
-  label,
-  value,
-}: {
-  label: string;
-  value: string | number;
-}) {
+function DetailStat({ label, value }: { label: string; value: string }) {
   return (
-    <div className="rounded-xl bg-[#f7f8fc] p-4">
-      <p className="text-xs font-semibold text-[#666]">{label}</p>
-      <p className="mt-1 text-sm font-semibold text-black">{value}</p>
+    <div className="rts-data-item">
+      <span className="rts-data-value">{value}</span>
+      <p className="rts-data-label">{label}</p>
     </div>
   );
 }
@@ -72,43 +114,47 @@ function GeneratedRouteDetailPageContent() {
   const [isStarting, setIsStarting] = useState(false);
   const [isRunNoticeOpen, setIsRunNoticeOpen] = useState(false);
   const [pendingRunStart, setPendingRunStart] = useState<{ simulate: boolean } | null>(null);
+  const [isSaved, setIsSaved] = useState(false);
 
   useEffect(() => {
-    setRecord(findGeneratedRouteDetail(routeId));
+    const detail = findGeneratedRouteDetail(routeId);
+    setRecord(detail);
     setHasLoaded(true);
+    if (detail) {
+      const routeIdForSave = createSavedRouteId(detail);
+      setIsSaved(readSavedRoutesFromStorage().some((route) => route.id === routeIdForSave));
+    }
   }, [routeId]);
 
   const routeCoords = record?.route.route_coords ?? [];
   const center = record?.route.center ?? routeCoords[0] ?? DEFAULT_MAP_CENTER;
-  const aiShapeScore = record ? getGeneratedRouteAiShapeScore(record.route) : null;
-  const clipScore = record ? getGeneratedRouteClipScore(record.route) : null;
-  const gatv2Score =
-    typeof record?.route.selected_label_gatv2 === "number"
-      ? record.route.selected_label_gatv2
-      : typeof record?.route.top1_gatv2 === "number"
-        ? record.route.top1_gatv2
-        : null;
-  const routePointCount = routeCoords.length;
-
-  const actionOrder = useMemo(
-    () =>
-      initialIntent === "simulate"
-        ? [
-            { label: "시뮬레이션 시작", simulate: true },
-            { label: "러닝 시작", simulate: false },
-          ]
-        : [
-            { label: "러닝 시작", simulate: false },
-            { label: "시뮬레이션 시작", simulate: true },
-          ],
-    [initialIntent]
-  );
+  const shapeScore = record ? getGeneratedRouteAiShapeScore(record.route) : null;
+  const features = record ? getRouteFeatures(record) : [];
+  const encodedBackParams = searchParams.get("back");
+  const resultsBackHref = useMemo(() => {
+    if (encodedBackParams) {
+      return `/route-results?${encodedBackParams}`;
+    }
 
-  const persistRunRoutePayload = (detail: GeneratedRouteDetailRecord) => {
-    if (typeof window === "undefined") {
-      return;
+    if (!record) {
+      return "/route-results";
     }
 
+    const fallbackParams = new URLSearchParams({
+      place: record.place,
+      source: "place",
+      label: record.routeLabel,
+      routeCount: "8",
+      targetDistanceKm: String(Math.max(1, Math.round(record.route.length_km))),
+      selectedTopK: "8",
+      radiusKm: "2.5",
+    });
+    return `/route-results?${fallbackParams.toString()}`;
+  }, [encodedBackParams, record]);
+
+  const persistRunRoutePayload = (detail: GeneratedRouteDetailRecord) => {
+    if (typeof window === "undefined") return;
+
     const coords = detail.route.route_coords ?? [];
     const payload = {
       place: detail.place,
@@ -120,18 +166,11 @@ function GeneratedRouteDetailPageContent() {
     window.sessionStorage.setItem("latest_run_route", serialized);
   };
 
-  const notifyWatchRouteSelection = async (
-    detail: GeneratedRouteDetailRecord,
-    openNativeRun: boolean
-  ) => {
-    if (typeof window === "undefined") {
-      return;
-    }
+  const notifyWatchRouteSelection = async (detail: GeneratedRouteDetailRecord) => {
+    if (typeof window === "undefined") return;
 
     const coords = detail.route.route_coords ?? [];
-    if (coords.length < 2) {
-      return;
-    }
+    if (coords.length < 2) return;
 
     const routeCenter = detail.route.center ?? coords[0];
     const payload = {
@@ -151,17 +190,10 @@ function GeneratedRouteDetailPageContent() {
       updatedAt: new Date().toISOString(),
     };
 
-    sendNativeWearRouteSelection(payload, { openNativeRun });
-
-    if (openNativeRun) {
-      return;
-    }
+    sendNativeWearRouteSelection(payload);
 
-    const token =
-      window.localStorage.getItem("access_token") ?? getCookieValue("access_token");
-    if (!token) {
-      return;
-    }
+    const token = window.localStorage.getItem("access_token") ?? getCookieValue("access_token");
+    if (!token) return;
 
     try {
       await fetch(`${apiBase}/api/v1/auth/watch/route-selection`, {
@@ -179,15 +211,11 @@ function GeneratedRouteDetailPageContent() {
   };
 
   const continueStartRun = async (simulate: boolean) => {
-    if (!record || routeCoords.length < 2) {
-      return;
-    }
+    if (!record || routeCoords.length < 2) return;
 
     setIsStarting(true);
     persistRunRoutePayload(record);
-    // Keep the TWA on the web running screen. This is where MeloTTS and the
-    // server-backed sensor coach run; the native layer only relays commands.
-    await notifyWatchRouteSelection(record, false);
+    await notifyWatchRouteSelection(record);
 
     const nextParams = new URLSearchParams(record.runParams);
     nextParams.set("runKey", record.runKey);
@@ -203,11 +231,6 @@ function GeneratedRouteDetailPageContent() {
   };
 
   const startRun = async (simulate: boolean) => {
-    if (!simulate && isNativeAppEnvironment()) {
-      await continueStartRun(simulate);
-      return;
-    }
-
     if (!simulate && shouldShowRunStartNotice()) {
       setPendingRunStart({ simulate });
       setIsRunNoticeOpen(true);
@@ -231,9 +254,34 @@ function GeneratedRouteDetailPageContent() {
     }
   };
 
+  const toggleSaved = () => {
+    if (!record || routeCoords.length < 2) return;
+
+    const saveId = createSavedRouteId(record);
+    if (isSaved) {
+      removeSavedRoute(saveId);
+      setIsSaved(false);
+      return;
+    }
+
+    const savedRecord: SavedRouteRecord = {
+      id: saveId,
+      title: record.title,
+      place: record.place,
+      distanceKm: record.route.length_km,
+      label: record.routeLabel,
+      clipScore: null,
+      center: record.route.center ?? routeCoords[0] ?? null,
+      routeCoords,
+      createdAt: new Date().toISOString(),
+    };
+    upsertSavedRoute(savedRecord);
+    setIsSaved(true);
+  };
+
   if (!hasLoaded) {
     return (
-      <main className="min-h-screen bg-[#f7f8fc]">
+      <main className="rts-page">
         <TopBar />
       </main>
     );
@@ -241,29 +289,19 @@ function GeneratedRouteDetailPageContent() {
 
   if (!record) {
     return (
-      <main className="min-h-screen bg-[#f7f8fc]">
+      <main className="rts-page">
         <TopBar />
-        <section className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-8 sm:px-10">
-          <section className="rounded-2xl bg-white p-8 shadow-sm">
-            <h1 className="text-2xl font-bold text-black">경로 정보를 찾을 수 없습니다.</h1>
-            <p className="mt-2 text-sm text-[#666]">
-              생성 결과 화면에서 다시 경로를 선택해 주세요.
-            </p>
-            <button
-              type="button"
-              onClick={() => router.back()}
-              className="mt-6 inline-flex h-11 items-center justify-center rounded-xl bg-black px-5 text-sm font-semibold text-white"
-            >
-              이전 화면으로
-            </button>
-          </section>
-        </section>
+        <PageContainer>
+          <EmptyState>
+            경로 정보를 찾을 수 없습니다. 추천 결과 화면에서 다시 경로를 선택해주세요.
+          </EmptyState>
+        </PageContainer>
       </main>
     );
   }
 
   return (
-    <main className="min-h-screen bg-[#f7f8fc]">
+    <main className="rts-page">
       <TopBar />
       <RunStartNoticeModal
         open={isRunNoticeOpen}
@@ -277,116 +315,64 @@ function GeneratedRouteDetailPageContent() {
         }}
       />
 
-      <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-8 sm:px-10">
-        <section className="rounded-2xl bg-white p-6 shadow-sm sm:p-8">
-          <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
-            <div>
-              <p className="text-sm font-semibold text-[#666]">{record.place}</p>
-              <h1 className="mt-2 text-3xl font-bold text-black">{record.title}</h1>
-              <p className="mt-2 text-sm text-[#666]">
-                {formatGeneratedRouteLabel(record.routeLabel)} 기준으로 생성된 추천 경로입니다.
-              </p>
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-              {actionOrder.map((action, index) => (
-                <button
-                  key={action.label}
-                  type="button"
-                  onClick={() => void startRun(action.simulate)}
-                  disabled={isStarting}
-                  className={`inline-flex h-11 items-center justify-center rounded-xl px-5 text-sm font-semibold transition disabled:opacity-60 ${
-                    index === 0
-                      ? "bg-black text-white hover:opacity-90"
-                      : "border border-black/10 bg-white text-black hover:bg-[#f5f5f5]"
-                  }`}
-                >
-                  {isStarting && index === 0 ? "시작 준비 중" : action.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        </section>
+      <PageContainer className="flex flex-col gap-6">
+        <PageHeader
+          title={record.title}
+          subtitle={`${record.place.split(",")[0]} 주변 ${formatGeneratedRouteLabel(record.routeLabel)} 모양 경로`}
+          backHref={resultsBackHref}
+        />
 
-        <section className="overflow-hidden rounded-2xl bg-white shadow-sm">
-          <div className="h-[420px] w-full bg-[#eef1f4]">
-            <LeafletMap
-              center={center}
-              route={routeCoords}
-              className="h-full w-full"
-              zoom={14}
-            />
+        <SectionCard className="rts-card-clip">
+          <div className="h-[330px] w-full bg-[#f5f5f5] sm:h-[460px]">
+            <LeafletMap center={center} route={routeCoords} className="h-full w-full" zoom={14} />
           </div>
-        </section>
+        </SectionCard>
 
-        <section className="grid gap-4 lg:grid-cols-[1.3fr_0.7fr]">
-          <div className="rounded-2xl bg-white p-6 shadow-sm sm:p-8">
-            <h2 className="text-xl font-bold text-black">경로 상세</h2>
-
-            <div className="mt-4 grid grid-cols-2 gap-3 text-sm md:grid-cols-3">
-              <RouteStat label="거리" value={record.distanceText} />
-              <RouteStat
-                label="AI 형태 점수"
-                value={aiShapeScore === null ? "-" : `${aiShapeScore}점 / 100`}
-              />
-              <RouteStat label="CLIP 점수" value={formatScore(clipScore)} />
-              <RouteStat
-                label="GATv2"
-                value={gatv2Score === null ? "-" : gatv2Score.toFixed(3)}
-              />
-              <RouteStat
-                label="모델 분류"
-                value={formatGeneratedRouteLabel(record.modelTopLabel)}
-              />
-              <RouteStat label="좌표 수" value={`${routePointCount}개`} />
+        <section className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
+          <SectionCard>
+            <div>
+              <h2 className="rts-section-title">
+                {formatGeneratedRouteLabel(record.routeLabel)} 모양
+              </h2>
             </div>
-          </div>
 
-          <div className="rounded-2xl bg-white p-6 shadow-sm sm:p-8">
-            <h2 className="text-xl font-bold text-black">선택 정보</h2>
-            <div className="mt-4 space-y-3 text-sm text-[#555]">
-              <p>
-                <span className="font-semibold text-black">코스 번호</span>{" "}
-                #{record.routeNumber}
-              </p>
-              <p>
-                <span className="font-semibold text-black">루프 여부</span>{" "}
-                {record.route.is_loop ? "루프형" : "일반형"}
-              </p>
-              <p>
-                <span className="font-semibold text-black">중심 좌표</span>{" "}
-                {center[0].toFixed(5)}, {center[1].toFixed(5)}
-              </p>
+            <div className="rts-data-grid mt-5">
+              <DetailStat label="거리" value={record.distanceText} />
+              <DetailStat label="예상 시간" value={formatEstimatedTime(record.route.length_km)} />
+              <DetailStat label="난이도" value={getDifficulty(record.route.length_km)} />
+              <DetailStat label="형태 완성도" value={getCompletionLabel(shapeScore)} />
+              <DetailStat label="경로 유형" value={record.route.is_loop ? "순환 코스" : "일반 코스"} />
+              <DetailStat label="지도 지점" value={`${routeCoords.length}개`} />
             </div>
 
-            {record.route.quickdraw_preview_data_url ||
-            record.route.quickdraw_preview_image_path ? (
-              <div className="mt-5">
-                <p className="mb-2 text-sm font-semibold text-black">기반 스케치</p>
-                <img
-                  src={
-                    record.route.quickdraw_preview_data_url ??
-                    record.route.quickdraw_preview_image_path ??
-                    ""
-                  }
-                  alt="quickdraw preview"
-                  className="h-28 w-28 rounded-xl border border-black/10 bg-white object-contain p-2"
-                />
+            {features.length > 0 ? (
+              <div className="mt-6 border-t border-[#e5e5e5] pt-5">
+                <h3 className="text-base font-semibold text-black">경로 특징</h3>
+                <ul className="mt-3 grid gap-2 text-sm leading-6 text-[#555]">
+                  {features.map((feature) => (
+                    <li key={feature}>{feature}</li>
+                  ))}
+                </ul>
               </div>
             ) : null}
-          </div>
-        </section>
+          </SectionCard>
 
-        <section className="flex flex-wrap items-center gap-3">
-          <button
-            type="button"
-            onClick={() => router.back()}
-            className="inline-flex h-11 items-center justify-center rounded-xl bg-white px-5 text-sm font-semibold text-black shadow-sm transition hover:bg-[#f5f5f5]"
-          >
-            결과 목록으로
-          </button>
+          <aside className="grid content-start gap-3">
+            <button type="button" onClick={() => void startRun(false)} disabled={isStarting} className="rts-primary-button h-12 w-full text-base disabled:opacity-60">
+              {isStarting && initialIntent === "run" ? "시작 준비 중" : "달리기 시작"}
+            </button>
+            <button type="button" onClick={toggleSaved} className="rts-secondary-button h-11 w-full">
+              {isSaved ? "저장 해제" : "경로 저장"}
+            </button>
+            <button type="button" onClick={() => void startRun(true)} disabled={isStarting} className="rts-secondary-button h-11 w-full disabled:opacity-60">
+              시뮬레이션으로 보기
+            </button>
+            <button type="button" onClick={() => router.push(resultsBackHref)} className="rts-secondary-button h-11 w-full">
+              결과 목록으로
+            </button>
+          </aside>
         </section>
-      </section>
+      </PageContainer>
     </main>
   );
 }

main/app/route-results/page.tsx

@@ -4,65 +4,28 @@ import { Suspense, useEffect, useMemo, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import TopBar from "../_components/TopBar";
 import LeafletMap from "../_components/LeafletMap";
+import { PageContainer, PageHeader, SectionCard, EmptyState } from "../_components/RunShapeUI";
+import {
+  endNavigationLoading,
+  startNavigationLoading,
+  updateNavigationLoading,
+} from "../_components/navigationLoadingBus";
 import {
   readSavedRoutesFromStorage,
   removeSavedRoute,
-  SavedRouteRecord,
+  type SavedRouteRecord,
   upsertSavedRoute,
 } from "../_utils/savedRoutes";
 import {
   createGeneratedRouteDetailId,
+  formatGeneratedRouteLabel,
+  getGeneratedRouteAiShapeScore,
+  getModelTopGeneratedRouteLabel,
+  getPrimaryGeneratedRouteLabel,
   upsertGeneratedRouteDetail,
+  type GeneratedRoute,
   type GeneratedRouteDetailRecord,
 } from "../_utils/generatedRouteDetails";
-import {
-  endNavigationLoading,
-  startNavigationLoading,
-  updateNavigationLoading,
-} from "../_components/navigationLoadingBus";
-
-type RouteScore = {
-  label: string;
-  score: number;
-  rerank_score?: number;
-  clip?: number;
-  clip_image?: number;
-  clip_text?: number;
-  shape?: number;
-  gatv2?: number;
-  gatv2_coverage?: number;
-};
-
-type GeneratedRoute = {
-  image_path: string;
-  top1: string;
-  top1_score: number;
-  top1_rerank_score?: number;
-  top1_clip?: number;
-  top1_clip_image?: number;
-  top1_clip_text?: number;
-  top1_shape?: number;
-  top1_gatv2?: number;
-  top1_gatv2_coverage?: number;
-  selected_label?: string | null;
-  selected_label_score?: number | null;
-  selected_label_rerank_score?: number | null;
-  selected_label_clip?: number | null;
-  selected_label_clip_image?: number | null;
-  selected_label_clip_text?: number | null;
-  selected_label_gatv2?: number | null;
-  selected_label_gatv2_coverage?: number | null;
-  selected_label_margin?: number | null;
-  quickdraw_preview_label?: string | null;
-  quickdraw_preview_image_path?: string | null;
-  quickdraw_preview_data_url?: string | null;
-  quickdraw_preview_similarity?: number | null;
-  is_loop?: boolean;
-  length_km: number;
-  route_coords?: [number, number][];
-  center?: [number, number] | null;
-  results: RouteScore[];
-};
 
 type OSMClipResult = {
   place: string;
@@ -72,21 +35,6 @@ type OSMClipResult = {
   generated_count: number;
   target_distance_km: number;
   radius_km?: number;
-  clip_source?:
-    | "quickdraw_prototype"
-    | "pgvector_prototype"
-    | "pgvector_hybrid"
-    | "prototype_prompt_hybrid"
-    | "quickdraw_head"
-    | "text_prompts";
-  weights?: { clip?: number; shape?: number; gatv2?: number };
-  clip_components?: {
-    image_proto_weight?: number;
-    text_proto_weight?: number;
-    text_proto_source?: string;
-    representative_per_label?: number;
-    representative_top_k?: number;
-  };
   labels: string[];
   selected_label?: string | null;
   selected_top_k?: number | null;
@@ -95,118 +43,61 @@ type OSMClipResult = {
 };
 
 const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8000";
-const AVAILABLE_LABELS = [
-  "cup",
-  "face",
-  "cloud",
-  "ice_cream",
-  "t_shirt",
-  "fish",
-  "apple",
-  "candle",
-] as const;
-const FILTER_OPTIONS = ["all", ...AVAILABLE_LABELS] as const;
-const ALL_FILTER_KEY = FILTER_OPTIONS[0];
-const ROUTE_GENERATE_LOADING_STEPS = [
-  "OSM 도로망을 확인하고 있습니다.",
-  "후보 경로를 생성하고 점수화하고 있습니다.",
-  "결과 카드와 지도를 구성하고 있습니다.",
+const AVAILABLE_LABELS = ["cup", "face", "cloud", "ice_cream", "t_shirt", "fish", "apple", "candle"];
+const ROUTE_GENERATION_STEPS = [
+  "선택한 지역을 확인하고 있어요.",
+  "지도 위에 달릴 수 있는 경로를 만들고 있어요.",
+  "모양이 잘 보이는 경로를 정리하고 있어요.",
 ];
 
-const parseNumberParam = (value: string | null): number => {
-  if (value === null || value.trim() === "") {
-    return Number.NaN;
-  }
+function parseNumberParam(value: string | null): number {
+  if (!value || value.trim() === "") return Number.NaN;
   return Number(value);
-};
-
-const parseNumericInput = (value: string): number | null => {
-  const trimmed = value.trim();
-  if (trimmed === "") {
-    return null;
-  }
-  const parsed = Number(trimmed);
-  if (!Number.isFinite(parsed)) {
-    return null;
-  }
-  return parsed;
-};
-
-const formatLabel = (raw: string): string =>
-  raw
-    .replace(/_/g, " ")
-    .split(" ")
-    .map((part) => (part ? part[0].toUpperCase() + part.slice(1) : part))
-    .join(" ");
-
-const normalizeLabelKey = (raw: string): string =>
-  raw.trim().toLowerCase().replace(/[\s-]+/g, "_");
-
-const normalizeLabel = (
-  raw: string | null,
-  allowedLabels: readonly string[] = AVAILABLE_LABELS
-): string | null => {
-  if (!raw) return null;
-  const normalized = normalizeLabelKey(raw);
-  return allowedLabels.includes(normalized) ? normalized : null;
-};
-
-const routeScoreValue = (row: RouteScore): number =>
-  typeof row.rerank_score === "number" ? row.rerank_score : row.score;
-
-const getPrimaryRouteLabel = (route: GeneratedRoute): string => {
-  if (route.selected_label) {
-    return route.selected_label;
-  }
-  if (!Array.isArray(route.results) || route.results.length === 0) {
-    return route.top1;
-  }
-  const top = route.results.reduce((best, current) =>
-    routeScoreValue(current) > routeScoreValue(best) ? current : best
-  );
-  return top.label || route.top1;
-};
-
-const getModelTopRouteLabel = (route: GeneratedRoute): string => {
-  if (!Array.isArray(route.results) || route.results.length === 0) {
-    return route.top1;
-  }
-  const top = route.results.reduce((best, current) =>
-    routeScoreValue(current) > routeScoreValue(best) ? current : best
-  );
-  return top.label || route.top1;
-};
+}
 
-const getAiShapeScore = (route: GeneratedRoute): number | null => {
-  const score =
-    typeof route.selected_label_clip === "number"
-      ? route.selected_label_clip
-      : typeof route.top1_clip === "number"
-        ? route.top1_clip
-        : typeof route.selected_label_score === "number"
-          ? route.selected_label_score
-          : typeof route.top1_score === "number"
-          ? route.top1_score
-          : null;
-  return score === null ? null : Math.round(Math.max(0, Math.min(1, score)) * 100);
-};
+function normalizeLabelKey(raw: string): string {
+  return raw.trim().toLowerCase().replace(/[\s-]+/g, "_");
+}
 
-const hashText = (input: string): string => {
+function hashText(input: string): string {
   let hash = 5381;
   for (let index = 0; index < input.length; index += 1) {
     hash = (hash * 33) ^ input.charCodeAt(index);
   }
   return (hash >>> 0).toString(36);
-};
+}
 
-const createSavedRouteId = (route: GeneratedRoute, placeText: string): string => {
+function createSavedRouteId(route: GeneratedRoute, placeText: string): string {
   const coords = (route.route_coords ?? [])
     .map(([lat, lng]) => `${lat.toFixed(5)},${lng.toFixed(5)}`)
     .join("|");
-  return `saved_${hashText(
-    `${placeText}|${route.top1}|${route.length_km.toFixed(3)}|${coords}`
-  )}`;
-};
+  return `saved_${hashText(`${placeText}|${route.top1}|${route.length_km.toFixed(3)}|${coords}`)}`;
+}
+
+function formatDistance(distanceKm: number): string {
+  if (!Number.isFinite(distanceKm) || distanceKm <= 0) return "-";
+  return `${distanceKm.toFixed(distanceKm >= 10 ? 1 : 2)}km`;
+}
+
+function formatEstimatedTime(distanceKm: number): string {
+  if (!Number.isFinite(distanceKm) || distanceKm <= 0) return "-";
+  const minutes = Math.max(1, Math.round((distanceKm / 6.5) * 60));
+  if (minutes < 60) return `약 ${minutes}분`;
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest > 0 ? `약 ${hours}시간 ${rest}분` : `약 ${hours}시간`;
+}
+
+function getCompletionLabel(score: number | null): string {
+  if (score === null) return "형태 확인 필요";
+  if (score >= 78) return "형태 완성도 높음";
+  if (score >= 58) return "모양이 비교적 선명한 경로";
+  return "일부 구간에서 모양이 달라질 수 있음";
+}
+
+function getRouteTitle(routeNumber: number, routeLabel: string): string {
+  return `${formatGeneratedRouteLabel(routeLabel)} 코스 ${routeNumber}`;
+}
 
 function BookmarkIcon({ filled }: { filled: boolean }) {
   return (
@@ -214,7 +105,6 @@ function BookmarkIcon({ filled }: { filled: boolean }) {
       width="18"
       height="18"
       viewBox="0 0 24 24"
-      className={filled ? "text-[#f5c542]" : "text-[#7a7a7a]"}
       fill={filled ? "currentColor" : "none"}
       stroke="currentColor"
       strokeWidth="1.8"
@@ -230,11 +120,8 @@ function BookmarkIcon({ filled }: { filled: boolean }) {
 function RouteResultsPageContent() {
   const searchParams = useSearchParams();
   const router = useRouter();
-  const cacheKey = useMemo(
-    () => `route-results:${searchParams.toString()}`,
-    [searchParams]
-  );
 
+  const cacheKey = useMemo(() => `route-results:${searchParams.toString()}`, [searchParams]);
   const initialPlace = searchParams.get("place") || "Gangnam-gu, Seoul, South Korea";
   const initialSource = (searchParams.get("source") as "place" | "current" | null) ?? "place";
   const initialLatitude = parseNumberParam(searchParams.get("latitude"));
@@ -243,86 +130,32 @@ function RouteResultsPageContent() {
   const initialCount = parseNumberParam(searchParams.get("routeCount"));
   const initialDistance = parseNumberParam(searchParams.get("targetDistanceKm"));
   const initialSelectedTopK = parseNumberParam(searchParams.get("selectedTopK"));
-  const selectedLabel = useMemo(
-    () => normalizeLabel(searchParams.get("label"), AVAILABLE_LABELS) ?? "cloud",
-    [searchParams]
-  );
+  const selectedLabel = normalizeLabelKey(searchParams.get("label") || "cloud");
 
-  const [source, setSource] = useState<"place" | "current">(initialSource);
   const [place, setPlace] = useState(initialPlace);
-  const [latitude, setLatitude] = useState<number | null>(
-    Number.isFinite(initialLatitude) ? initialLatitude : null
-  );
-  const [longitude, setLongitude] = useState<number | null>(
-    Number.isFinite(initialLongitude) ? initialLongitude : null
-  );
-  const [radiusKm, setRadiusKm] = useState(
-    Number.isFinite(initialRadiusKm) ? initialRadiusKm : 5
-  );
-  const [routeCountInput, setRouteCountInput] = useState(
-    Number.isFinite(initialCount) ? String(initialCount) : "8"
-  );
-  const [targetDistanceInput, setTargetDistanceInput] = useState(
-    Number.isFinite(initialDistance) ? String(initialDistance) : "6"
-  );
-  const [selectedTopK] = useState(
-    Number.isFinite(initialSelectedTopK) ? initialSelectedTopK : 5
-  );
-  const [activeFilter, setActiveFilter] = useState<string>(ALL_FILTER_KEY);
-  const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const [routeCountInput, setRouteCountInput] = useState(Number.isFinite(initialCount) ? String(initialCount) : "8");
+  const [targetDistanceInput, setTargetDistanceInput] = useState(Number.isFinite(initialDistance) ? String(initialDistance) : "5");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [result, setResult] = useState<OSMClipResult | null>(null);
   const [savedRouteIds, setSavedRouteIds] = useState<Set<string>>(new Set());
 
-  const labels = useMemo(() => [...AVAILABLE_LABELS], []);
-
-  const openRouteDetail = (
-    route: GeneratedRoute,
-    routeNumber: number,
-    runKey: string,
-    placeText: string,
-    baseParams: URLSearchParams,
-    intent: "run" | "simulate",
-    routeLabel: string
-  ) => {
-    if (!route.route_coords || route.route_coords.length < 2) {
-      return;
-    }
-
-    const detailId = createGeneratedRouteDetailId(route, placeText, routeNumber);
-    const record: GeneratedRouteDetailRecord = {
-      id: detailId,
-      routeNumber,
-      runKey,
-      place: placeText,
-      routeLabel,
-      modelTopLabel: getModelTopRouteLabel(route),
-      title: `#${routeNumber} ${formatLabel(routeLabel)} 코스`,
-      distanceText: `${route.length_km.toFixed(2)}km`,
-      runParams: baseParams.toString(),
-      route,
-      createdAt: new Date().toISOString(),
-    };
-
-    upsertGeneratedRouteDetail(record);
-    router.push(`/route-results/${detailId}?intent=${intent}`);
-  };
+  const source = initialSource;
+  const latitude = Number.isFinite(initialLatitude) ? initialLatitude : null;
+  const longitude = Number.isFinite(initialLongitude) ? initialLongitude : null;
+  const radiusKm = Number.isFinite(initialRadiusKm) ? initialRadiusKm : 5;
+  const selectedTopK = Number.isFinite(initialSelectedTopK) ? initialSelectedTopK : 3;
 
   const fetchRoutes = async () => {
-    const parsedRouteCount = parseNumericInput(routeCountInput);
-    if (parsedRouteCount === null || parsedRouteCount < 5 || parsedRouteCount > 100) {
-      setError("경로 수는 5~100 사이 숫자로 입력해 주세요.");
+    const routeCount = Number(routeCountInput);
+    const targetDistanceKm = Number(targetDistanceInput);
+
+    if (!Number.isFinite(routeCount) || routeCount < 5 || routeCount > 100) {
+      setError("경로 수는 5~100 사이로 입력해주세요.");
       return;
     }
-
-    const parsedTargetDistance = parseNumericInput(targetDistanceInput);
-    if (
-      parsedTargetDistance === null ||
-      parsedTargetDistance < 1 ||
-      parsedTargetDistance > 30
-    ) {
-      setError("거리(km)는 1~30 사이 숫자로 입력해 주세요.");
+    if (!Number.isFinite(targetDistanceKm) || targetDistanceKm < 1 || targetDistanceKm > 30) {
+      setError("목표 거리는 1~30km 사이로 입력해주세요.");
       return;
     }
 
@@ -330,25 +163,24 @@ function RouteResultsPageContent() {
     setError(null);
 
     const loadingId = startNavigationLoading({
-      title: "경로 생성 중입니다",
-      steps: ROUTE_GENERATE_LOADING_STEPS,
+      title: "추천 경로를 찾고 있어요",
+      steps: ROUTE_GENERATION_STEPS,
       visual: "mascot-progress",
       expectedDurationMs: 90000,
     });
-
     updateNavigationLoading({
       id: loadingId,
       progress: 12,
       stepIndex: 0,
-      step: ROUTE_GENERATE_LOADING_STEPS[0],
+      step: ROUTE_GENERATION_STEPS[0],
     });
 
     try {
       updateNavigationLoading({
         id: loadingId,
-        progress: 42,
+        progress: 36,
         stepIndex: 1,
-        step: ROUTE_GENERATE_LOADING_STEPS[1],
+        step: ROUTE_GENERATION_STEPS[1],
       });
 
       const response = await fetch(`${apiBase}/api/v1/ai/routes/generate`, {
@@ -360,30 +192,31 @@ function RouteResultsPageContent() {
           latitude,
           longitude,
           radiusKm,
-          routeCount: parsedRouteCount,
-          targetDistanceKm: parsedTargetDistance,
-          labels,
+          routeCount,
+          targetDistanceKm,
+          labels: AVAILABLE_LABELS,
           selectedLabel,
           selectedTopK,
         }),
       });
 
+      updateNavigationLoading({
+        id: loadingId,
+        progress: 82,
+        stepIndex: 2,
+        step: ROUTE_GENERATION_STEPS[2],
+      });
+
       const data = await response.json();
       if (!response.ok) {
-        throw new Error(data?.detail || data?.error || "OSM-CLIP 요청 실패");
+        throw new Error(data?.detail || data?.error || "경로를 찾지 못했습니다.");
       }
 
+      updateNavigationLoading({ id: loadingId, progress: 100 });
       setResult(data as OSMClipResult);
-
-      updateNavigationLoading({
-        id: loadingId,
-        progress: 100,
-        stepIndex: 2,
-        step: ROUTE_GENERATE_LOADING_STEPS[2],
-      });
-    } catch (e) {
+    } catch (caught) {
       setResult(null);
-      setError(e instanceof Error ? e.message : String(e));
+      setError(caught instanceof Error ? caught.message : String(caught));
     } finally {
       endNavigationLoading(loadingId);
       setLoading(false);
@@ -392,57 +225,32 @@ function RouteResultsPageContent() {
 
   useEffect(() => {
     if (typeof window === "undefined") {
-      fetchRoutes();
+      void fetchRoutes();
       return;
     }
 
     const cached = window.sessionStorage.getItem(cacheKey);
     if (!cached) {
-      fetchRoutes();
+      void fetchRoutes();
       return;
     }
 
     try {
-      const parsed = JSON.parse(cached) as OSMClipResult;
-      setResult(parsed);
+      setResult(JSON.parse(cached) as OSMClipResult);
     } catch {
       window.sessionStorage.removeItem(cacheKey);
-      fetchRoutes();
+      void fetchRoutes();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cacheKey]);
 
   useEffect(() => {
-    if (!result || typeof window === "undefined") {
-      return;
-    }
+    if (!result || typeof window === "undefined") return;
     window.sessionStorage.setItem(cacheKey, JSON.stringify(result));
   }, [cacheKey, result]);
 
-  const filterOptions = useMemo(() => {
-    const modelTopLabels = result?.routes.map((route) => getModelTopRouteLabel(route)) ?? [];
-    const sourceLabels = [...labels, ...(result?.labels ?? []), selectedLabel, ...modelTopLabels];
-    const labelSet = new Set<string>();
-    for (const label of sourceLabels) {
-      const normalized = normalizeLabelKey(label);
-      if (normalized) {
-        labelSet.add(normalized);
-      }
-    }
-    labelSet.add(selectedLabel);
-    return [ALL_FILTER_KEY, ...Array.from(labelSet)];
-  }, [labels, result?.labels, result?.routes, selectedLabel]);
-
   useEffect(() => {
-    if (!filterOptions.includes(activeFilter)) {
-      setActiveFilter(ALL_FILTER_KEY);
-    }
-  }, [activeFilter, filterOptions]);
-
-  useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
+    if (typeof window === "undefined") return;
 
     const syncSavedRouteIds = () => {
       const saved = readSavedRoutesFromStorage();
@@ -451,61 +259,67 @@ function RouteResultsPageContent() {
 
     syncSavedRouteIds();
     window.addEventListener("storage", syncSavedRouteIds);
-    return () => {
-      window.removeEventListener("storage", syncSavedRouteIds);
-    };
+    return () => window.removeEventListener("storage", syncSavedRouteIds);
   }, []);
 
-  const filteredRoutes = useMemo(() => {
-    if (!result) return [];
-    if (activeFilter === ALL_FILTER_KEY) return result.routes;
-    return result.routes.filter(
-      (route) => normalizeLabelKey(getModelTopRouteLabel(route)) === activeFilter
-    );
-  }, [result, activeFilter]);
-
-  const activeFilterLabel =
-    activeFilter === ALL_FILTER_KEY ? "전체" : formatLabel(activeFilter);
-
-  const bestClipOnly = useMemo(() => {
-    if (!result) return null;
-    const best = result.best_route;
-    const score =
-      typeof best.selected_label_clip === "number"
-        ? best.selected_label_clip
-        : typeof best.top1_clip === "number"
-          ? best.top1_clip
-          : null;
-    const label = best.selected_label ?? best.top1;
-    if (score === null) return null;
-    return { label, score };
-  }, [result]);
-
-  const handleToggleSavedRoute = (route: GeneratedRoute, routeNumber: number, placeText: string) => {
-    if (!route.route_coords || route.route_coords.length < 2) {
-      return;
-    }
+  const openRouteDetail = (
+    route: GeneratedRoute,
+    routeNumber: number,
+    intent: "run" | "simulate",
+  ) => {
+    if (!route.route_coords || route.route_coords.length < 2 || !result) return;
+
+    const routeLabel = getPrimaryGeneratedRouteLabel(route);
+    const runKey = `route_${result.place}_${routeNumber}`.replace(/[^a-zA-Z0-9_]/g, "_");
+    const params = new URLSearchParams({
+      animal: routeLabel,
+      distance: `${route.length_km.toFixed(2)}km`,
+      place: result.place,
+      image: route.image_path,
+      runKey,
+    });
 
-    const routeId = createSavedRouteId(route, placeText);
+    const detailId = createGeneratedRouteDetailId(route, result.place, routeNumber);
+    const record: GeneratedRouteDetailRecord = {
+      id: detailId,
+      routeNumber,
+      runKey,
+      place: result.place,
+      routeLabel,
+      modelTopLabel: getModelTopGeneratedRouteLabel(route),
+      title: getRouteTitle(routeNumber, routeLabel),
+      distanceText: formatDistance(route.length_km),
+      runParams: params.toString(),
+      route,
+      createdAt: new Date().toISOString(),
+    };
+
+    upsertGeneratedRouteDetail(record);
+    const detailParams = new URLSearchParams({
+      intent,
+      back: searchParams.toString(),
+    });
+    router.push(`/route-results/${detailId}?${detailParams.toString()}`);
+  };
+
+  const handleToggleSavedRoute = (route: GeneratedRoute, routeNumber: number) => {
+    if (!route.route_coords || route.route_coords.length < 2 || !result) return;
+
+    const routeId = createSavedRouteId(route, result.place);
     if (savedRouteIds.has(routeId)) {
       const next = removeSavedRoute(routeId);
       setSavedRouteIds(new Set(next.map((item) => item.id)));
       return;
     }
 
-    const clipOnlyScore =
-      typeof route.selected_label_clip === "number"
-        ? route.selected_label_clip
-        : typeof route.top1_clip === "number"
-          ? route.top1_clip
-          : null;
+    const routeLabel = getPrimaryGeneratedRouteLabel(route);
     const record: SavedRouteRecord = {
       id: routeId,
-      title: `#${routeNumber} ${formatLabel(route.top1)} 코스`,
-      place: placeText,
+      title: getRouteTitle(routeNumber, routeLabel),
+      place: result.place,
       distanceKm: route.length_km,
-      label: route.selected_label ?? route.top1,
-      clipScore: clipOnlyScore,
+      label: routeLabel,
+      clipScore: null,
       center: route.center ?? route.route_coords[0] ?? null,
       routeCoords: route.route_coords,
       createdAt: new Date().toISOString(),
@@ -514,407 +328,144 @@ function RouteResultsPageContent() {
     setSavedRouteIds(new Set(next.map((item) => item.id)));
   };
 
+  const routes = result?.routes ?? [];
+  const placeTitle = result?.place.split(",")[0] ?? place.split(",")[0];
+
   return (
-    <main className="min-h-screen bg-white">
+    <main className="rts-page">
       <TopBar />
 
-      <section className="mx-auto w-full max-w-6xl px-6 py-8 sm:px-10">
-        <div className="rounded-2xl border border-black/10 p-4 sm:p-6">
-          <div className="grid gap-3 sm:grid-cols-[1fr_120px_120px_auto] sm:items-end">
-            <div className="flex flex-col gap-2">
-              <label className="text-sm font-medium">지역(Place)</label>
-              <input
-                value={place}
-                onChange={(e) => setPlace(e.target.value)}
-                disabled={source === "current"}
-                className="h-10 rounded-lg border border-black/15 px-3 text-sm"
-              />
-            </div>
-
-            <div className="flex flex-col gap-2">
-              <label className="text-sm font-medium">경로 수</label>
-              <input
-                type="number"
-                min={5}
-                max={100}
-                value={routeCountInput}
-                onChange={(e) => setRouteCountInput(e.target.value)}
-                className="h-10 rounded-lg border border-black/15 px-3 text-sm"
-              />
-            </div>
-
-            <div className="flex flex-col gap-2">
-              <label className="text-sm font-medium">거리(km)</label>
-              <input
-                type="number"
-                min={1}
-                max={30}
-                step={0.5}
-                value={targetDistanceInput}
-                onChange={(e) => setTargetDistanceInput(e.target.value)}
-                className="h-10 rounded-lg border border-black/15 px-3 text-sm"
-              />
-            </div>
-
-            <button
-              type="button"
-              onClick={fetchRoutes}
-              disabled={loading}
-              className="h-10 rounded-full bg-black px-5 text-sm font-semibold text-white disabled:opacity-60"
-            >
-              {loading ? (
-                <span className="inline-flex items-center gap-2">
-                  <img
-                    src="/loading/login-running-dog.svg"
-                    alt=""
-                    aria-hidden="true"
-                    className="h-4 w-4 rounded-full object-cover"
-                  />
-                  생성 중...
-                </span>
-              ) : (
-                "다시 생성"
-              )}
+      <PageContainer className="flex flex-col gap-6">
+        <PageHeader
+          title="추천 경로"
+          subtitle={`${placeTitle} 주변에서 ${formatGeneratedRouteLabel(selectedLabel)} 모양에 가까운 경로를 찾고 있어요.`}
+          backHref="/lobby"
+          actions={
+            <button type="button" onClick={() => void fetchRoutes()} disabled={loading} className="rts-secondary-button h-10">
+              {loading ? "찾는 중" : "다시 찾기"}
             </button>
-
-            {source === "current" && (
-              <>
-                <div className="flex flex-col gap-2">
-                  <label className="text-sm font-medium">위도</label>
-                  <input
-                    type="number"
-                    value={latitude ?? ""}
-                    onChange={(e) => setLatitude(Number(e.target.value))}
-                    className="h-10 rounded-lg border border-black/15 px-3 text-sm"
-                  />
-                </div>
-
-                <div className="flex flex-col gap-2">
-                  <label className="text-sm font-medium">경도</label>
-                  <input
-                    type="number"
-                    value={longitude ?? ""}
-                    onChange={(e) => setLongitude(Number(e.target.value))}
-                    className="h-10 rounded-lg border border-black/15 px-3 text-sm"
-                  />
-                </div>
-
-                <div className="flex flex-col gap-2">
-                  <label className="text-sm font-medium">반경(km)</label>
-                  <input
-                    type="number"
-                    min={0.5}
-                    max={10}
-                    step={0.5}
-                    value={radiusKm}
-                    onChange={(e) => setRadiusKm(Number(e.target.value || 5))}
-                    className="h-10 rounded-lg border border-black/15 px-3 text-sm"
-                  />
-                </div>
-              </>
-            )}
+          }
+        />
+
+        <SectionCard>
+          <div className="grid gap-3 sm:grid-cols-[1fr_120px_120px] sm:items-end">
+            <label className="grid gap-2">
+              <span className="rts-label">지역</span>
+              <input value={place} onChange={(event) => setPlace(event.target.value)} className="rts-input" />
+            </label>
+            <label className="grid gap-2">
+              <span className="rts-label">경로 수</span>
+              <input type="number" min={5} max={100} value={routeCountInput} onChange={(event) => setRouteCountInput(event.target.value)} className="rts-input" />
+            </label>
+            <label className="grid gap-2">
+              <span className="rts-label">목표 거리</span>
+              <input type="number" min={1} max={30} step={0.5} value={targetDistanceInput} onChange={(event) => setTargetDistanceInput(event.target.value)} className="rts-input" />
+            </label>
           </div>
 
-          {error && <p className="mt-4 text-sm text-red-600">오류: {error}</p>}
-        </div>
-
-        {result && (
-          <div className="relative z-10 mt-5 space-y-4 overflow-visible">
-            <div className="rounded-2xl border border-black/10 bg-[#fafafa] p-4 sm:p-5">
-              <p className="text-2xl font-bold text-black">
-                {result.place.split(",")[0]} 주변 {(result.radius_km ?? radiusKm).toFixed(1)}km
-              </p>
-
-              <p className="mt-1 text-sm text-[#666]">
-                생성 {result.generated_count}/{result.requested_count}
-                {result.candidate_count ? ` (후보 ${result.candidate_count})` : ""} | 목표 거리{" "}
-                {result.target_distance_km}km
-                {bestClipOnly
-                  ? ` | CLIP 단독 ${formatLabel(bestClipOnly.label)}: ${bestClipOnly.score.toFixed(6)}`
-                  : ""}
-              </p>
-
-              <p className="mt-1 text-xs text-[#666]">
-                선택 모양: {formatLabel(selectedLabel)} | 표시 개수:{" "}
-                {result.selected_top_k ?? selectedTopK}
-              </p>
-
-              <details className="mt-2">
-                <summary className="cursor-pointer text-xs text-[#666]">
-                  분류 상세(개발용)
-                </summary>
-                <p className="mt-1 text-xs text-[#666]">
-                  vector_source: {result.clip_source ?? "unknown"} | weights: clip{" "}
-                  {result.weights?.clip ?? "-"}, shape {result.weights?.shape ?? "-"}, gatv2{" "}
-                  {result.weights?.gatv2 ?? "-"}
-                </p>
-                <p className="mt-1 text-xs text-[#666]">
-                  clip_components: image{" "}
-                  {result.clip_components?.image_proto_weight ?? "-"}, text{" "}
-                  {result.clip_components?.text_proto_weight ?? "-"} (
-                  {result.clip_components?.text_proto_source ?? "none"}) | representative top-k{" "}
-                  {result.clip_components?.representative_top_k ?? "-"}
-                </p>
-              </details>
-            </div>
+          {error ? <p className="mt-3 text-sm text-red-600">{error}</p> : null}
 
-            <div className="border-b border-black/10 pb-3 overflow-visible">
-              <div className="relative w-full max-w-xs overflow-visible">
-                <button
-                  type="button"
-                  onClick={() => setIsFilterOpen((prev) => !prev)}
-                  className="flex h-11 w-full items-center justify-between rounded-xl border border-black/10 bg-white px-4 text-sm font-medium text-black shadow-sm transition hover:bg-[#fafafa]"
-                >
-                  <span>{activeFilterLabel}</span>
-                  <span
-                    className={`text-[#666] transition-transform duration-200 ${
-                      isFilterOpen ? "rotate-180" : ""
-                    }`}
-                  >
-                    ▼
-                  </span>
-                </button>
-
-                {isFilterOpen && (
-                  <div className="absolute left-0 top-[calc(100%+8px)] z-[1000] w-full overflow-hidden rounded-xl border border-black/10 bg-white shadow-lg">
-                    {filterOptions.map((label) => {
-                      const isActive = activeFilter === label;
-                      const displayLabel =
-                        label === ALL_FILTER_KEY ? "전체" : formatLabel(label);
-
-                      return (
-                        <button
-                          key={label}
-                          type="button"
-                          onClick={() => {
-                            setActiveFilter(label);
-                            setIsFilterOpen(false);
-                          }}
-                          className={`flex h-11 w-full items-center justify-between px-4 text-sm transition ${
-                            isActive
-                              ? "bg-[#f5f5f5] font-medium text-black"
-                              : "bg-white text-[#444] hover:bg-[#f8f8f8]"
-                          }`}
-                        >
-                          <span>{displayLabel}</span>
-                          {isActive && <span className="text-[#666]">●</span>}
-                        </button>
-                      );
-                    })}
-                  </div>
-                )}
+          {result ? (
+            <div className="rts-result-summary-grid mt-4">
+              <div>
+                <strong>{routes.length}개</strong>
+                <span>추천 경로</span>
+              </div>
+              <div>
+                <strong>{formatDistance(result.target_distance_km)}</strong>
+                <span>목표 거리</span>
+              </div>
+              <div>
+                <strong>{formatGeneratedRouteLabel(selectedLabel)}</strong>
+                <span>선택 모양</span>
               </div>
             </div>
+          ) : null}
+        </SectionCard>
+
+        {loading && !result ? (
+          <EmptyState>지도 위에 표시할 경로를 찾는 중입니다.</EmptyState>
+        ) : null}
+
+        {result ? (
+          <section className="grid gap-4 sm:grid-cols-2">
+            {routes.map((route, index) => {
+              const routeNumber = index + 1;
+              const routeLabel = getPrimaryGeneratedRouteLabel(route);
+              const hasRouteCoords = Boolean(route.route_coords && route.route_coords.length > 1);
+              const score = getGeneratedRouteAiShapeScore(route);
+              const savedRouteId = createSavedRouteId(route, result.place);
+              const isBookmarked = savedRouteIds.has(savedRouteId);
+
+              return (
+                <article key={`${route.image_path}-${index}`} className="rts-card rts-card-clip rts-route-card-enter">
+                  <div className="rts-route-map-stage h-64 w-full bg-[#f5f5f5]">
+                    <div className="rts-route-rank">추천 {routeNumber}</div>
+                    {hasRouteCoords ? (
+                      <LeafletMap
+                        center={route.center ?? route.route_coords![0]}
+                        route={route.route_coords}
+                        className="h-full w-full"
+                        zoom={14}
+                      />
+                    ) : (
+                      <div className="flex h-full w-full items-center justify-center px-5 text-center text-sm text-[#666]">
+                        지도에 표시할 좌표가 없습니다. 다시 찾아주세요.
+                      </div>
+                    )}
+                  </div>
 
-            <div className="grid gap-4 sm:grid-cols-2">
-              {filteredRoutes.map((route, idx) => {
-                const routeLabel = getPrimaryRouteLabel(route);
-                const modelTopLabel = getModelTopRouteLabel(route);
-                const routeNumber = result.routes.indexOf(route) + 1;
-                const runKey = `route_${result.place}_${routeNumber}`.replace(
-                  /[^a-zA-Z0-9_]/g,
-                  "_"
-                );
-                const params = new URLSearchParams({
-                  animal: routeLabel,
-                  distance: `${route.length_km.toFixed(2)}km`,
-                  place: result.place,
-                  image: route.image_path,
-                  runKey,
-                });
-                const hasRouteCoords = !!(
-                  route.route_coords && route.route_coords.length > 1
-                );
-                const savedRouteId = createSavedRouteId(route, result.place);
-                const isBookmarked = savedRouteIds.has(savedRouteId);
-
-                return (
-                  <div
-                    key={`${route.image_path}-${idx}`}
-                    className="overflow-hidden rounded-2xl border border-black/10 bg-white shadow-sm"
-                  >
-                    <div className="relative z-0 h-56 w-full overflow-hidden bg-[#f5f5f5]">
-                      {hasRouteCoords ? (
-                        <LeafletMap
-                          center={route.center ?? route.route_coords![0]}
-                          route={route.route_coords}
-                          className="h-full w-full"
-                          zoom={14}
-                        />
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center px-4 text-center text-xs text-[#666]">
-                          지도 좌표가 없어 윤곽만 생성되었습니다. 다시 생성해 주세요.
-                        </div>
-                      )}
-                    </div>
-
-                    <div className="hidden">
-                      <p className="mb-1 text-[11px] text-[#666]">
-                        기반 QuickDraw (
-                        {formatLabel(route.quickdraw_preview_label ?? routeLabel)})
-                        {typeof route.quickdraw_preview_similarity === "number"
-                          ? ` · 유사도 ${route.quickdraw_preview_similarity.toFixed(6)}`
-                          : ""}
-                      </p>
-
-                      {route.quickdraw_preview_data_url ||
-                      route.quickdraw_preview_image_path ? (
-                        <div className="flex items-center gap-2">
-                          <img
-                            src={
-                              route.quickdraw_preview_data_url ??
-                              route.quickdraw_preview_image_path ??
-                              ""
-                            }
-                            alt="quickdraw preview"
-                            className="h-16 w-16 rounded border border-black/10 bg-white object-contain p-1"
-                          />
-                        </div>
-                      ) : (
-                        <p className="text-[11px] text-[#999]">
-                          기반 이미지를 찾지 못했습니다.
-                        </p>
-                      )}
+                  <div className="grid gap-4 p-5">
+                    <div className="flex items-start justify-between gap-3">
+                      <div>
+                        <h2 className="text-xl font-bold text-black sm:text-2xl">
+                          {getRouteTitle(routeNumber, routeLabel)}
+                        </h2>
+                        <p className="mt-1 text-sm text-[#666]">{formatGeneratedRouteLabel(routeLabel)} 모양</p>
+                      </div>
+                      <button
+                        type="button"
+                        disabled={!hasRouteCoords}
+                        onClick={() => handleToggleSavedRoute(route, routeNumber)}
+                        aria-label={isBookmarked ? "저장 해제" : "경로 저장"}
+                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-[#e5e5e5] bg-white text-[#555] disabled:opacity-50"
+                      >
+                        <BookmarkIcon filled={isBookmarked} />
+                      </button>
                     </div>
 
-                    <div className="hidden">
-                      <p className="text-[11px] text-[#666]">
-                        AI 판독 기준: {formatLabel(routeLabel)}
-                        {modelTopLabel !== routeLabel
-                          ? ` · 모델 분류 ${formatLabel(modelTopLabel)}`
-                          : ""}
-                        {typeof route.selected_label_gatv2 === "number" &&
-                        route.selected_label_gatv2 > 0
-                          ? ` · GATv2 ${route.selected_label_gatv2.toFixed(3)}`
-                          : ""}
-                      </p>
+                    <div className="rts-data-grid">
+                      <div className="rts-data-item">
+                        <span className="rts-data-value">{formatDistance(route.length_km)}</span>
+                        <p className="rts-data-label">거리</p>
+                      </div>
+                      <div className="rts-data-item">
+                        <span className="rts-data-value">{formatEstimatedTime(route.length_km)}</span>
+                        <p className="rts-data-label">예상 시간</p>
+                      </div>
+                      <div className="rts-data-item">
+                        <span className="rts-data-value">{getCompletionLabel(score)}</span>
+                        <p className="rts-data-label">형태 완성도</p>
+                      </div>
                     </div>
 
-                    <div className="p-3">
-                      {(() => {
-                        const clipOnlyScore =
-                          typeof route.selected_label_clip === "number"
-                            ? route.selected_label_clip
-                            : typeof route.top1_clip === "number"
-                              ? route.top1_clip
-                              : null;
-                        const clipOnlyLabel =
-                          typeof route.selected_label_clip === "number" &&
-                          route.selected_label
-                            ? route.selected_label
-                            : routeLabel;
-                        const aiShapeScore = getAiShapeScore(route);
-                        const gatv2Score =
-                          typeof route.selected_label_gatv2 === "number"
-                            ? route.selected_label_gatv2
-                            : typeof route.top1_gatv2 === "number"
-                              ? route.top1_gatv2
-                              : null;
-
-                        return (
-                          <>
-                            <div className="flex items-start justify-between gap-3">
-                              <p className="text-[28px] font-semibold leading-none text-black">
-                                #{routeNumber} {formatLabel(routeLabel)} 코스
-                              </p>
-                              <button
-                                type="button"
-                                disabled={!hasRouteCoords}
-                                onClick={() => {
-                                  handleToggleSavedRoute(route, routeNumber, result.place);
-                                }}
-                                aria-label={
-                                  isBookmarked
-                                    ? "저장된 루트에서 제거"
-                                    : "저장된 루트에 추가"
-                                }
-                                title={
-                                  isBookmarked
-                                    ? "저장된 루트에서 제거"
-                                    : "저장된 루트에 추가"
-                                }
-                                className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-black/10 bg-white disabled:cursor-not-allowed disabled:opacity-50"
-                              >
-                                <BookmarkIcon filled={isBookmarked} />
-                              </button>
-                            </div>
-                            <p className="mt-2 text-sm text-[#666]">
-                              거리 {route.length_km.toFixed(2)}km
-                            </p>
-                            <p className="mt-1 text-sm text-[#666]">
-                              CLIP 단독: {formatLabel(clipOnlyLabel)}{" "}
-                              {clipOnlyScore !== null ? clipOnlyScore.toFixed(6) : "-"}
-                            </p>
-                            <p className="mt-1 text-sm font-medium text-black">
-                              AI 형태 점수: {aiShapeScore !== null ? `${aiShapeScore}점 / 100` : "-"}
-                              {gatv2Score !== null && gatv2Score > 0
-                                ? ` | GATv2 ${gatv2Score.toFixed(3)}`
-                                : ""}
-                            </p>
-                            <div className="mt-2 flex flex-wrap gap-1">
-                              <span className="rounded-full bg-black/5 px-2 py-0.5 text-[11px] text-[#444]">
-                                {formatLabel(routeLabel)}
-                              </span>
-                            </div>
-                          </>
-                        );
-                      })()}
-
-                      <div className="mt-3 grid grid-cols-2 gap-2">
-                        <button
-                          type="button"
-                          disabled={!hasRouteCoords}
-                          onClick={() => {
-                            openRouteDetail(
-                              route,
-                              routeNumber,
-                              runKey,
-                              result.place,
-                              params,
-                              "run",
-                              routeLabel
-                            );
-                          }}
-                          className="inline-flex h-9 w-full items-center justify-center rounded-full bg-black text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50"
-                        >
-                          코스 상세
-                        </button>
-
-                        <button
-                          type="button"
-                          disabled={!hasRouteCoords}
-                          onClick={() => {
-                            openRouteDetail(
-                              route,
-                              routeNumber,
-                              runKey,
-                              result.place,
-                              params,
-                              "simulate",
-                              routeLabel
-                            );
-                          }}
-                          className="inline-flex h-9 w-full items-center justify-center rounded-full border border-[#c11f1f] bg-[#fff4f4] text-sm font-semibold text-[#a01919] disabled:cursor-not-allowed disabled:opacity-50"
-                        >
-                          시뮬레이션 상세
-                        </button>
-                      </div>
+                    <div className="grid gap-2 sm:grid-cols-2">
+                      <button type="button" disabled={!hasRouteCoords} onClick={() => openRouteDetail(route, routeNumber, "run")} className="rts-primary-button h-11 disabled:opacity-50">
+                        상세 보기
+                      </button>
+                      <button type="button" disabled={!hasRouteCoords} onClick={() => openRouteDetail(route, routeNumber, "run")} className="rts-secondary-button h-11 disabled:opacity-50">
+                        달리기 시작
+                      </button>
                     </div>
                   </div>
-                );
-              })}
-            </div>
-
-            {filteredRoutes.length === 0 && (
-              <div className="rounded-xl border border-dashed border-black/20 p-6 text-center text-sm text-[#666]">
-                {activeFilter === ALL_FILTER_KEY
-                  ? "표시할 경로가 없습니다. 다시 생성해 주세요."
-                  : `선택한 라벨(${formatLabel(activeFilter)})에 해당하는 경로가 없습니다. 다시 생성해 주세요.`}
-              </div>
-            )}
-          </div>
-        )}
-      </section>
+                </article>
+              );
+            })}
+
+            {routes.length === 0 ? <EmptyState className="sm:col-span-2">표시할 경로가 없습니다. 조건을 바꿔 다시 찾아주세요.</EmptyState> : null}
+          </section>
+        ) : null}
+      </PageContainer>
     </main>
   );
 }

main/app/route-search/page.tsx

@@ -3,14 +3,10 @@
 import { Suspense, useEffect, useMemo, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import TopBar from "../_components/TopBar";
+import LeafletMap from "../_components/LeafletMap";
 import { FLOW_KEYS, isUiFlowPermitValid, issueUiFlowPermit } from "../_utils/uiFlowGuard";
 
-const formatLabel = (raw: string): string =>
-  raw
-    .replace(/_/g, " ")
-    .split(" ")
-    .map((part) => (part ? part[0].toUpperCase() + part.slice(1) : part))
-    .join(" ");
+type Point = [number, number];
 
 type DistrictOption = {
   label: string;
@@ -20,13 +16,21 @@ type DistrictOption = {
 type RegionOption = {
   key: string;
   label: string;
+  center: Point;
   districts: DistrictOption[];
 };
 
+type ShapeOption = {
+  key: string;
+  label: string;
+  offsets: Point[];
+};
+
 const REGION_OPTIONS: RegionOption[] = [
   {
     key: "seoul",
     label: "서울특별시",
+    center: [37.5665, 126.978],
     districts: [
       { label: "강남구", query: "강남구, 서울특별시, 대한민국" },
       { label: "마포구", query: "마포구, 서울특별시, 대한민국" },
@@ -41,6 +45,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "busan",
     label: "부산광역시",
+    center: [35.1796, 129.0756],
     districts: [
       { label: "부산진구", query: "부산진구, 부산광역시, 대한민국" },
       { label: "해운대구", query: "해운대구, 부산광역시, 대한민국" },
@@ -54,6 +59,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "daegu",
     label: "대구광역시",
+    center: [35.8714, 128.6014],
     districts: [
       { label: "수성구", query: "수성구, 대구광역시, 대한민국" },
       { label: "중구", query: "중구, 대구광역시, 대한민국" },
@@ -66,6 +72,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "incheon",
     label: "인천광역시",
+    center: [37.4563, 126.7052],
     districts: [
       { label: "연수구", query: "연수구, 인천광역시, 대한민국" },
       { label: "남동구", query: "남동구, 인천광역시, 대한민국" },
@@ -78,6 +85,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "gwangju",
     label: "광주광역시",
+    center: [35.1595, 126.8526],
     districts: [
       { label: "동구", query: "동구, 광주광역시, 대한민국" },
       { label: "서구", query: "서구, 광주광역시, 대한민국" },
@@ -89,6 +97,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "daejeon",
     label: "대전광역시",
+    center: [36.3504, 127.3845],
     districts: [
       { label: "유성구", query: "유성구, 대전광역시, 대한민국" },
       { label: "서구", query: "서구, 대전광역시, 대한민국" },
@@ -100,6 +109,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "ulsan",
     label: "울산광역시",
+    center: [35.5384, 129.3114],
     districts: [
       { label: "남구", query: "남구, 울산광역시, 대한민국" },
       { label: "중구", query: "중구, 울산광역시, 대한민국" },
@@ -111,6 +121,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "sejong",
     label: "세종특별자치시",
+    center: [36.4801, 127.289],
     districts: [
       { label: "나성동", query: "나성동, 세종특별자치시, 대한민국" },
       { label: "어진동", query: "어진동, 세종특별자치시, 대한민국" },
@@ -121,6 +132,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "gyeonggi",
     label: "경기도",
+    center: [37.4138, 127.5183],
     districts: [
       { label: "수원시 영통구", query: "수원시 영통구, 경기도, 대한민국" },
       { label: "성남시 분당구", query: "성남시 분당구, 경기도, 대한민국" },
@@ -134,6 +146,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "gangwon",
     label: "강원특별자치도",
+    center: [37.8228, 128.1555],
     districts: [
       { label: "춘천시", query: "춘천시, 강원특별자치도, 대한민국" },
       { label: "원주시", query: "원주시, 강원특별자치도, 대한민국" },
@@ -145,6 +158,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "chungbuk",
     label: "충청북도",
+    center: [36.8, 127.7],
     districts: [
       { label: "청주시 상당구", query: "청주시 상당구, 충청북도, 대한민국" },
       { label: "충주시", query: "충주시, 충청북도, 대한민국" },
@@ -156,6 +170,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "chungnam",
     label: "충청남도",
+    center: [36.5184, 126.8],
     districts: [
       { label: "천안시 서북구", query: "천안시 서북구, 충청남도, 대한민국" },
       { label: "아산시", query: "아산시, 충청남도, 대한민국" },
@@ -167,6 +182,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "jeonbuk",
     label: "전북특별자치도",
+    center: [35.7175, 127.153],
     districts: [
       { label: "전주시 완산구", query: "전주시 완산구, 전북특별자��도, 대한민국" },
       { label: "군산시", query: "군산시, 전북특별자치도, 대한민국" },
@@ -178,6 +194,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "jeonnam",
     label: "전라남도",
+    center: [34.8161, 126.463],
     districts: [
       { label: "목포시", query: "목포시, 전라남도, 대한민국" },
       { label: "여수시", query: "여수시, 전라남도, 대한민국" },
@@ -189,6 +206,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "gyeongbuk",
     label: "경상북도",
+    center: [36.4919, 128.8889],
     districts: [
       { label: "포항시 남구", query: "포항시 남구, 경상북도, 대한민국" },
       { label: "구미시", query: "구미시, 경상북도, 대한민국" },
@@ -200,6 +218,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "gyeongnam",
     label: "경상남도",
+    center: [35.4606, 128.2132],
     districts: [
       { label: "창원시 성산구", query: "창원시 성산구, 경상남도, 대한민국" },
       { label: "김해시", query: "김해시, 경상남도, 대한민국" },
@@ -211,6 +230,7 @@ const REGION_OPTIONS: RegionOption[] = [
   {
     key: "jeju",
     label: "제주특별자치도",
+    center: [33.4996, 126.5312],
     districts: [
       { label: "제주시", query: "제주시, 제주특별자치도, 대한민국" },
       { label: "서귀포시", query: "서귀포시, 제주특별자치도, 대한민국" },
@@ -218,6 +238,120 @@ const REGION_OPTIONS: RegionOption[] = [
   },
 ];
 
+const SHAPE_OPTIONS: ShapeOption[] = [
+  {
+    key: "cloud",
+    label: "구름",
+    offsets: [
+      [0.0016, -0.0028],
+      [0.0035, -0.0012],
+      [0.0032, 0.0017],
+      [0.0013, 0.0031],
+      [-0.0016, 0.0028],
+      [-0.0033, 0.0007],
+      [-0.0025, -0.002],
+      [0.0016, -0.0028],
+    ],
+  },
+  {
+    key: "cup",
+    label: "컵",
+    offsets: [
+      [0.003, -0.002],
+      [-0.0027, -0.002],
+      [-0.0027, 0.0016],
+      [0.0028, 0.0016],
+      [0.003, -0.002],
+      [0.0002, 0.0016],
+      [0.0002, 0.004],
+    ],
+  },
+  {
+    key: "face",
+    label: "얼굴",
+    offsets: [
+      [0.0032, 0],
+      [0.0021, 0.0025],
+      [0, 0.0034],
+      [-0.0021, 0.0025],
+      [-0.0032, 0],
+      [-0.0021, -0.0025],
+      [0, -0.0034],
+      [0.0021, -0.0025],
+      [0.0032, 0],
+    ],
+  },
+  {
+    key: "ice_cream",
+    label: "아이스크림",
+    offsets: [
+      [0.0032, 0],
+      [0.0012, 0.0026],
+      [-0.0031, 0],
+      [0.0012, -0.0026],
+      [0.0032, 0],
+    ],
+  },
+  {
+    key: "t_shirt",
+    label: "티셔츠",
+    offsets: [
+      [0.0032, -0.0022],
+      [0.0012, -0.0034],
+      [0, -0.0015],
+      [-0.0012, -0.0034],
+      [-0.0032, -0.0022],
+      [-0.0024, 0.0028],
+      [0.0024, 0.0028],
+      [0.0032, -0.0022],
+    ],
+  },
+  {
+    key: "fish",
+    label: "물고기",
+    offsets: [
+      [0, -0.0033],
+      [0.0028, -0.0002],
+      [0, 0.0033],
+      [-0.0028, -0.0002],
+      [0, -0.0033],
+      [-0.0028, -0.0002],
+      [-0.0041, -0.0019],
+      [-0.0041, 0.0019],
+      [-0.0028, -0.0002],
+    ],
+  },
+  {
+    key: "apple",
+    label: "사과",
+    offsets: [
+      [0.0025, -0.0025],
+      [0.0035, 0.001],
+      [0.0012, 0.0035],
+      [-0.0016, 0.0031],
+      [-0.0033, 0.0009],
+      [-0.0024, -0.0024],
+      [0.0006, -0.0034],
+      [0.0025, -0.0025],
+      [0.0033, -0.0034],
+    ],
+  },
+  {
+    key: "candle",
+    label: "양초",
+    offsets: [
+      [0.0034, 0],
+      [0.0015, -0.0018],
+      [0, -0.0035],
+      [-0.0015, -0.0018],
+      [-0.0034, 0],
+      [-0.0024, 0.0024],
+      [0.0024, 0.0024],
+      [0.0034, 0],
+    ],
+  },
+];
+
 const normalizeLocationText = (value: string): string =>
   value.toLowerCase().replace(/\s+/g, "").replace(/[.,\-()]/g, "");
 
@@ -271,6 +405,13 @@ const findRegionDistrictByPlace = (
   return null;
 };
 
+function buildPreviewRoute(center: Point, shape: ShapeOption): Point[] {
+  return shape.offsets.map(([latOffset, lngOffset]) => [
+    center[0] + latOffset,
+    center[1] + lngOffset,
+  ]);
+}
+
 function RouteSearchPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -284,8 +425,8 @@ function RouteSearchPageContent() {
   const [latitude, setLatitude] = useState<number | null>(null);
   const [longitude, setLongitude] = useState<number | null>(null);
   const [radiusKm, setRadiusKm] = useState(2.5);
-  const [routeCountInput, setRouteCountInput] = useState("5");
-  const [targetDistanceInput, setTargetDistanceInput] = useState("6");
+  const [routeCountInput, setRouteCountInput] = useState("8");
+  const [targetDistanceInput, setTargetDistanceInput] = useState("5");
   const [selectedLabel, setSelectedLabel] = useState("cloud");
   const [geoError, setGeoError] = useState<string | null>(null);
   const [formError, setFormError] = useState<string | null>(null);
@@ -303,10 +444,8 @@ function RouteSearchPageContent() {
   const routeCountPresets = [5, 8, 16];
   const distancePresets = [3, 5, 10];
   const radiusPresets = [2.5, 5, 10];
-  const labelOptions = useMemo(
-    () => ["cup", "face", "cloud", "ice_cream", "t_shirt", "fish", "apple", "candle"],
-    []
-  );
+  const selectedShape =
+    SHAPE_OPTIONS.find((shape) => shape.key === selectedLabel) ?? SHAPE_OPTIONS[0];
 
   const selectedDistrictLabel = useMemo(() => {
     const allDistricts = REGION_OPTIONS.flatMap((region) => region.districts);
@@ -314,6 +453,18 @@ function RouteSearchPageContent() {
     return found?.label ?? place.split(",")[0];
   }, [place, selectedDistrict]);
 
+  const mapCenter: Point =
+    source === "current" && latitude !== null && longitude !== null
+      ? [latitude, longitude]
+      : activeRegion.center;
+  const previewRoute = useMemo(
+    () => buildPreviewRoute(mapCenter, selectedShape),
+    [mapCenter, selectedShape]
+  );
+  const summaryPlace = source === "current" ? "현재 위치" : selectedDistrictLabel;
+  const selectedSummary = `${summaryPlace} · ${selectedShape.label} · ${targetDistanceInput || "-"}km`;
+  const routePlanText = `${summaryPlace}에서 ${selectedShape.label} 모양에 가까운 ${targetDistanceInput || "-"}km 경로를 ${routeCountInput || "-"}개 추천합니다.`;
+
   useEffect(() => {
     const isValid = isUiFlowPermitValid(FLOW_KEYS.routeSearch, flowToken);
     if (!isValid) {
@@ -380,7 +531,7 @@ function RouteSearchPageContent() {
     const routeCount = Number(routeCountInput);
     const targetDistanceKm = Number(targetDistanceInput);
     if (!Number.isFinite(routeCount) || routeCount < 5 || routeCount > 100) {
-      setFormError("생성 경로 수는 5~100 사이 숫자로 입력해 주세요.");
+      setFormError("추천 경로 수는 5~100 사이 숫자로 입력해 주세요.");
       return;
     }
     if (
@@ -445,247 +596,245 @@ function RouteSearchPageContent() {
   }
 
   return (
-    <main className="min-h-screen bg-[#f7f9fc]">
+    <main
+      className="min-h-screen bg-[#fbfbf8] pb-28 text-[#111111]"
+      style={{ fontFamily: "Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" }}
+    >
       <TopBar />
 
-      <section className="mx-auto w-full max-w-6xl px-6 py-8 sm:px-10">
-        <div className="grid gap-4 sm:gap-5">
-          <div className="rounded-2xl border border-black/10 bg-white p-5 sm:p-6">
-            <h2 className="text-lg font-semibold text-black">OSM 도로망 경로 생성</h2>
-            <p className="mt-1 text-sm text-[#666]">
-              위치와 목표를 설정하면 다수 경로를 생성하고 형태 유사도를 분석합니다.
-            </p>
+      <div className="fixed inset-x-0 top-[72px] z-[2200] border-b border-black/10 bg-[#fbfbf8]/95 px-4 py-2 backdrop-blur">
+        <div className="mx-auto max-w-[1120px] rounded-[22px] border border-[#1E40AF]/15 bg-[#f3f7ff] px-4 py-3 text-left shadow-[0_10px_24px_rgba(30,64,175,0.10)] sm:flex sm:items-center sm:justify-between sm:gap-5">
+          <div className="flex min-w-0 items-center justify-between gap-3 sm:w-[320px] sm:shrink-0">
+            <p className="shrink-0 text-[11px] font-bold text-[#1E40AF]">생성 예정</p>
+            <p className="min-w-0 truncate text-right text-[11px] font-bold text-[#516177]">{selectedSummary}</p>
           </div>
-
-          <div className="rounded-2xl border border-black/10 bg-white p-5 sm:p-6">
-            <h3 className="text-base font-semibold text-black">위치 설정</h3>
-            <div className="mt-3 grid gap-3 sm:grid-cols-2">
-              <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-black">시/도 선택</label>
-                <div className="relative">
-                  <select
-                    value={selectedRegion}
-                    onChange={(e) => {
-                      setSelectedRegion(e.target.value);
-                      setSource("place");
-                      setLatitude(null);
-                      setLongitude(null);
-                    }}
-                    className="h-11 w-full appearance-none rounded-lg border border-black/15 bg-white px-3 pr-10 text-sm"
-                  >
-                    {REGION_OPTIONS.map((region) => (
-                      <option key={region.key} value={region.key}>
-                        {region.label}
-                      </option>
-                    ))}
-                  </select>
-                  <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 leading-none text-lg text-[#6b7280]">
-                    ⌄
-                  </span>
-                </div>
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-black">구/군 선택</label>
-                <div className="relative">
-                  <select
-                    value={selectedDistrict}
-                    onChange={(e) => {
-                      const nextDistrict = e.target.value;
-                      setSelectedDistrict(nextDistrict);
-                      setPlace(nextDistrict);
-                      setSource("place");
-                      setLatitude(null);
-                      setLongitude(null);
-                    }}
-                    className="h-11 w-full appearance-none rounded-lg border border-black/15 bg-white px-3 pr-10 text-sm"
-                  >
-                    {districtOptions.map((district) => (
-                      <option key={district.query} value={district.query}>
-                        {district.label}
-                      </option>
-                    ))}
-                  </select>
-                  <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 leading-none text-lg text-[#6b7280]">
-                    ⌄
-                  </span>
-                </div>
+          <p className="mt-1 text-sm font-bold leading-5 text-[#111] sm:mt-0">{routePlanText}</p>
+        </div>
+      </div>
+
+      <section className="mx-auto grid w-full max-w-[1120px] gap-5 px-4 pb-8 pt-[168px] sm:px-8 lg:grid-cols-[minmax(0,1fr)_390px] lg:items-start lg:pb-12">
+        <div className="contents lg:grid lg:gap-5">
+          <section className="order-3 overflow-hidden rounded-[28px] border border-black/10 bg-white shadow-[0_18px_45px_rgba(0,0,0,0.06)] lg:order-none">
+            <div className="relative h-[330px] bg-[#e9edf0] sm:h-[420px]">
+              <LeafletMap
+                center={mapCenter}
+                route={previewRoute}
+                className="h-full w-full"
+                zoom={14}
+              />
+              <div className="pointer-events-none absolute left-3 top-3 z-[500] rounded-full bg-black/72 px-3 py-2 text-xs font-bold text-white">
+                경로 미리보기
               </div>
             </div>
+          </section>
+        </div>
 
-            <div className="mt-3">
+        <aside className="order-2 grid gap-4 lg:sticky lg:top-[168px] lg:order-none">
+          <section className="rounded-[28px] border border-black/10 bg-white p-5 shadow-[0_18px_45px_rgba(0,0,0,0.06)]">
+            <div className="flex items-center justify-between gap-3">
+              <h2 className="text-xl font-bold">어디서 달릴까요?</h2>
               <button
                 type="button"
                 onClick={handleUseCurrentLocation}
-                className={`h-9 rounded-full px-4 text-sm transition-colors ${
+                className={`h-9 shrink-0 rounded-full px-4 text-xs font-bold transition-colors ${
                   source === "current"
                     ? "bg-black text-white"
-                    : "border border-black/20 text-black hover:bg-black/5"
+                    : "border border-black/10 bg-[#f7f7f7] text-black"
                 }`}
               >
-                현재 위치 사용
+                현재 위치
               </button>
-              <p className="mt-2 text-xs text-[#666]">
-                현재 위치를 사용하면 선택 박스가 자동으로 가장 가까운 시/도·구군으로 동기화됩니다.
-              </p>
             </div>
 
-            {source === "current" && (
-              <div className="mt-4 grid gap-3 sm:grid-cols-2">
-                <div className="rounded-lg bg-[#f4f6fa] px-3 py-3 text-xs text-[#555]">
+            <div className="mt-4 grid gap-3">
+              <label className="grid gap-2">
+                <span className="text-sm font-bold">시·도</span>
+                <select
+                  value={selectedRegion}
+                  onChange={(e) => {
+                    setSelectedRegion(e.target.value);
+                    const nextRegion =
+                      REGION_OPTIONS.find((region) => region.key === e.target.value) ??
+                      REGION_OPTIONS[0];
+                    const nextDistrict = nextRegion.districts[0]?.query;
+                    if (nextDistrict) {
+                      setSelectedDistrict(nextDistrict);
+                      setPlace(nextDistrict);
+                    }
+                    setSource("place");
+                    setLatitude(null);
+                    setLongitude(null);
+                  }}
+                  className="h-12 w-full rounded-2xl border border-black/10 bg-[#f7f7f7] px-4 text-sm font-semibold"
+                >
+                  {REGION_OPTIONS.map((region) => (
+                    <option key={region.key} value={region.key}>
+                      {region.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+
+              <label className="grid gap-2">
+                <span className="text-sm font-bold">지역</span>
+                <select
+                  value={selectedDistrict}
+                  onChange={(e) => {
+                    const nextDistrict = e.target.value;
+                    setSelectedDistrict(nextDistrict);
+                    setPlace(nextDistrict);
+                    setSource("place");
+                    setLatitude(null);
+                    setLongitude(null);
+                  }}
+                  className="h-12 w-full rounded-2xl border border-black/10 bg-[#f7f7f7] px-4 text-sm font-semibold"
+                >
+                  {districtOptions.map((district) => (
+                    <option key={district.query} value={district.query}>
+                      {district.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+
+              {source === "current" ? (
+                <div className="rounded-2xl bg-[#f7f7f7] px-4 py-3 text-xs leading-5 text-[#555]">
                   {latitude !== null && longitude !== null
-                    ? `현재 좌표: ${latitude.toFixed(6)}, ${longitude.toFixed(6)}`
+                    ? `현재 좌표 ${latitude.toFixed(5)}, ${longitude.toFixed(5)}`
                     : "현재 위치를 먼저 받아주세요."}
                 </div>
-                <div className="flex flex-col gap-2">
-                  <label className="text-sm font-medium text-black">검색 반경 (km)</label>
-                  <input
-                    type="number"
-                    min={0.5}
-                    max={10}
-                    step={0.5}
-                    value={radiusKm}
-                    onChange={(e) => setRadiusKm(Number(e.target.value || 5))}
-                    className="h-11 rounded-lg border border-black/15 px-3 text-sm"
-                  />
-                  <div className="flex flex-wrap gap-2">
-                    {radiusPresets.map((radius) => (
-                      <button
-                        key={radius}
-                        type="button"
-                        onClick={() => setRadiusKm(radius)}
-                        className={`h-7 rounded-full px-3 text-xs ${
-                          radiusKm === radius
-                            ? "bg-black text-white"
-                            : "border border-black/15 text-black hover:bg-black/5"
-                        }`}
-                      >
-                        {radius}km
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-
-          <div className="rounded-2xl border border-black/10 bg-white p-5 sm:p-6">
-            <h3 className="text-base font-semibold text-black">경로 옵션</h3>
-            <div className="mt-4 grid gap-3 sm:grid-cols-2">
-              <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-black">생성 경로 수 (5~100)</label>
-                <input
-                  type="text"
-                  inputMode="numeric"
-                  value={routeCountInput}
-                  onChange={(e) => setRouteCountInput(e.target.value)}
-                  className="h-11 rounded-lg border border-black/15 px-3 text-sm"
-                />
-                <div className="flex flex-wrap gap-2">
-                  {routeCountPresets.map((count) => (
-                    <button
-                      key={count}
-                      type="button"
-                      onClick={() => setRouteCountInput(String(count))}
-                      className={`h-7 rounded-full px-3 text-xs ${
-                        routeCountInput === String(count)
-                          ? "bg-black text-white"
-                          : "border border-black/15 text-black hover:bg-black/5"
-                      }`}
-                    >
-                      {count}개
-                    </button>
+              ) : null}
+              {geoError ? <p className="text-sm text-red-600">{geoError}</p> : null}
+            </div>
+          </section>
+
+          <section className="rounded-[28px] border border-black/10 bg-white p-5 shadow-[0_18px_45px_rgba(0,0,0,0.06)]">
+            <h2 className="text-xl font-bold">모양과 거리</h2>
+
+            <div className="mt-4 grid gap-4">
+              <label className="grid gap-2">
+                <span className="text-sm font-bold">모양</span>
+                <select
+                  value={selectedLabel}
+                  onChange={(e) => setSelectedLabel(e.target.value)}
+                  className="h-12 w-full rounded-2xl border border-black/10 bg-[#f7f7f7] px-4 text-sm font-semibold"
+                >
+                  {SHAPE_OPTIONS.map((shape) => (
+                    <option key={shape.key} value={shape.key}>
+                      {shape.label}
+                    </option>
                   ))}
-                </div>
-              </div>
-              <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-black">목표 거리 (1~30km)</label>
+                </select>
+              </label>
+
+              <label className="grid gap-2">
+                <span className="text-sm font-bold">목표 거리</span>
                 <input
                   type="text"
                   inputMode="decimal"
                   value={targetDistanceInput}
                   onChange={(e) => setTargetDistanceInput(e.target.value)}
-                  className="h-11 rounded-lg border border-black/15 px-3 text-sm"
+                  className="h-12 rounded-2xl border border-black/10 bg-[#f7f7f7] px-4 text-sm font-semibold"
                 />
-                <div className="flex flex-wrap gap-2">
-                  {distancePresets.map((distance) => (
-                    <button
-                      key={distance}
-                      type="button"
-                      onClick={() => setTargetDistanceInput(String(distance))}
-                      className={`h-7 rounded-full px-3 text-xs ${
-                        targetDistanceInput === String(distance)
-                          ? "bg-black text-white"
-                          : "border border-black/15 text-black hover:bg-black/5"
-                      }`}
-                    >
-                      {distance}km
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </div>
-            <div className="mt-4 flex flex-col gap-2">
-              <label className="text-sm font-medium text-black">찾을 모양 (1개 선택)</label>
-              <div className="flex flex-wrap gap-2">
-                {labelOptions.map((label) => (
+              </label>
+              <div className="grid grid-cols-3 gap-2">
+                {distancePresets.map((distance) => (
                   <button
-                    key={label}
+                    key={distance}
                     type="button"
-                    onClick={() => setSelectedLabel(label)}
-                    className={`h-8 rounded-full px-3 text-xs transition-colors ${
-                      selectedLabel === label
+                    onClick={() => setTargetDistanceInput(String(distance))}
+                    className={`h-10 rounded-full text-sm font-bold ${
+                      targetDistanceInput === String(distance)
                         ? "bg-black text-white"
-                        : "border border-black/15 text-black hover:bg-black/5"
+                        : "border border-black/10 bg-white text-black"
                     }`}
                   >
-                    {formatLabel(label)}
+                    {distance}km
                   </button>
                 ))}
               </div>
-            </div>
-          </div>
 
-          <div className="rounded-2xl border border-black/10 bg-white p-4 sm:p-5">
-            <p className="text-xs font-medium text-[#666]">선택 요약</p>
-            <p className="mt-1 text-sm text-black">
-              {source === "current" ? "현재 위치 기반" : selectedDistrictLabel} · 경로{" "}
-              {routeCountInput || "-"}개 · 목표 {targetDistanceInput || "-"}km · 반경 {radiusKm}km · 모양{" "}
-              {formatLabel(selectedLabel)}
-            </p>
-            {geoError && <p className="mt-2 text-sm text-red-600">{geoError}</p>}
-            {formError && <p className="mt-2 text-sm text-red-600">{formError}</p>}
-          </div>
+              <details className="rounded-2xl bg-[#f7f7f7] p-4">
+                <summary className="cursor-pointer text-sm font-bold">세부 설정</summary>
+                <div className="mt-4 grid gap-4">
+                  <label className="grid gap-2">
+                    <span className="text-sm font-bold">추천 경로 수</span>
+                    <input
+                      type="text"
+                      inputMode="numeric"
+                      value={routeCountInput}
+                      onChange={(e) => setRouteCountInput(e.target.value)}
+                      className="h-11 rounded-2xl border border-black/10 bg-white px-4 text-sm font-semibold"
+                    />
+                  </label>
+                  <div className="grid grid-cols-3 gap-2">
+                    {routeCountPresets.map((count) => (
+                      <button
+                        key={count}
+                        type="button"
+                        onClick={() => setRouteCountInput(String(count))}
+                        className={`h-9 rounded-full text-xs font-bold ${
+                          routeCountInput === String(count)
+                            ? "bg-black text-white"
+                            : "border border-black/10 bg-white text-black"
+                        }`}
+                      >
+                        {count}개
+                      </button>
+                    ))}
+                  </div>
 
-          <div className="sticky bottom-4">
-            <button
-              type="button"
-              onClick={handleRouteSearch}
-              disabled={isNavigating}
-              className="h-12 w-full rounded-full bg-black text-base font-semibold text-white shadow-lg disabled:opacity-60"
-            >
-              {isNavigating ? (
-                <span className="inline-flex items-center justify-center gap-2">
-                  <img
-                    src="/loading/login-running-dog.svg"
-                    alt=""
-                    aria-hidden="true"
-                    className="h-5 w-5 rounded-full object-cover"
-                  />
-                  생성 중...
-                </span>
-              ) : (
-                "경로 생성하고 동물 찾기"
-              )}
-            </button>
-          </div>
-        </div>
+                  <label className="grid gap-2">
+                    <span className="text-sm font-bold">검색 반경</span>
+                    <input
+                      type="number"
+                      min={0.5}
+                      max={10}
+                      step={0.5}
+                      value={radiusKm}
+                      onChange={(e) => setRadiusKm(Number(e.target.value || 5))}
+                      className="h-11 rounded-2xl border border-black/10 bg-white px-4 text-sm font-semibold"
+                    />
+                  </label>
+                  <div className="grid grid-cols-3 gap-2">
+                    {radiusPresets.map((radius) => (
+                      <button
+                        key={radius}
+                        type="button"
+                        onClick={() => setRadiusKm(radius)}
+                        className={`h-9 rounded-full text-xs font-bold ${
+                          radiusKm === radius
+                            ? "bg-black text-white"
+                            : "border border-black/10 bg-white text-black"
+                        }`}
+                      >
+                        {radius}km
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </details>
+
+              {formError ? <p className="text-sm text-red-600">{formError}</p> : null}
+            </div>
+          </section>
+        </aside>
       </section>
+
+      <div className="fixed inset-x-0 bottom-0 z-[900] border-t border-black/10 bg-white/95 px-4 py-3 shadow-[0_-12px_30px_rgba(0,0,0,0.08)] backdrop-blur">
+        <button
+          type="button"
+          onClick={handleRouteSearch}
+          disabled={isNavigating}
+          className="mx-auto flex h-12 w-full max-w-[390px] items-center justify-center rounded-full bg-[#1E40AF] text-base font-bold text-white shadow-[0_10px_24px_rgba(30,64,175,0.28)] disabled:opacity-60"
+        >
+          {isNavigating ? "경로 생성 중..." : "경로 생성하기"}
+        </button>
+      </div>
     </main>
   );
 }
 
-
 export default function Page() {
   return (
     <Suspense fallback={null}>

main/app/route/[id]/page.tsx

@@ -163,11 +163,11 @@ export default function Page() {
 
   if (!route) {
     return (
-      <main className="min-h-screen bg-[#f7f8fc]">
+      <main className="rts-page">
         <TopBar userName="러너" title="Run The Shape" largeBrand />
 
-        <section className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-8 sm:px-10">
-          <section className="rounded-2xl bg-white p-8 shadow-sm">
+        <section className="rts-shell">
+          <section className="rts-card p-8">
             <h1 className="text-2xl font-bold text-[#222]">루트를 찾을 수 없습니다.</h1>
             <p className="mt-2 text-sm text-[#666]">
               요청한 루트 정보가 없거나 삭제된 루트입니다.
@@ -177,7 +177,7 @@ export default function Page() {
               <button
                 type="button"
                 onClick={() => router.back()}
-                className="inline-flex h-[44px] items-center justify-center rounded-xl bg-black px-5 text-sm font-semibold text-white transition hover:opacity-90"
+                className="rts-primary-button h-[44px] px-5"
               >
                 이전 페이지로 돌아가기
               </button>
@@ -208,11 +208,11 @@ export default function Page() {
     (route as CommunityPost & { difficulty?: string }).difficulty ?? "정보 없음";
 
   return (
-    <main className="min-h-screen bg-[#f7f8fc]">
+    <main className="rts-page">
       <TopBar userName="러너" title="Run The Shape" largeBrand />
 
-      <section className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-8 sm:px-10">
-        <section className="rounded-2xl bg-white p-8 shadow-sm">
+      <section className="rts-shell flex flex-col gap-6">
+        <section className="rts-card p-8">
           <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
             <div>
               <p className="text-sm text-[#666]">{placeLabel}</p>
@@ -252,7 +252,7 @@ export default function Page() {
                       type="button"
                       onClick={() => void handleUpdate()}
                       disabled={isSubmittingAction}
-                      className="inline-flex h-[40px] items-center justify-center rounded-xl bg-black px-4 text-sm font-semibold text-white transition hover:opacity-90 disabled:opacity-60"
+                      className="rts-primary-button h-[40px] px-4 disabled:opacity-60"
                     >
                       저장
                     </button>
@@ -282,7 +282,7 @@ export default function Page() {
           </div>
         </section>
 
-        <section className="overflow-hidden rounded-2xl bg-white shadow-sm">
+        <section className="rts-card rts-card-clip">
           <div className="h-[320px] w-full bg-[#eef1f4]">
             <LeafletMap
               center={route.map?.center ?? DEFAULT_MAP_CENTER}
@@ -293,7 +293,7 @@ export default function Page() {
           </div>
         </section>
 
-        <section className="rounded-2xl bg-white p-8 shadow-sm">
+        <section className="rts-card p-8">
           <h2 className="mb-4 text-xl font-bold text-[#222]">러닝 기록</h2>
 
           <div className="grid grid-cols-2 gap-3 text-sm md:grid-cols-3">
@@ -344,7 +344,7 @@ export default function Page() {
           </div>
         </section>
 
-        <section className="rounded-2xl bg-white p-8 shadow-sm">
+        <section className="rts-card p-8">
           <h2 className="text-xl font-bold text-[#222]">루트 설명</h2>
           {isEditing ? (
             <textarea
@@ -390,14 +390,14 @@ export default function Page() {
 
           <button
             type="button"
-            className="inline-flex h-[44px] items-center justify-center rounded-xl bg-black px-5 text-sm font-semibold text-white transition hover:opacity-90"
+            className="rts-primary-button h-[44px] px-5"
           >
             이 루트로 달리기
           </button>
 
           <button
             type="button"
-            className="inline-flex h-[44px] items-center justify-center rounded-xl bg-white px-5 text-sm font-semibold text-[#222] shadow-sm transition hover:opacity-90"
+            className="rts-secondary-button h-[44px] px-5"
           >
             좋아요 {likes}
           </button>

main/app/saved-routes/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import TopBar from "../_components/TopBar";
 import LeafletMap from "../_components/LeafletMap";
+import { PageContainer } from "../_components/RunShapeUI";
 import {
   readSavedRoutesFromStorage,
   removeSavedRoute,
@@ -59,8 +60,8 @@ function RouteCard({
   const hasRouteCoords = route.routeCoords.length > 1;
 
   return (
-    <article className="overflow-hidden rounded-2xl border border-black/10 bg-white shadow-sm">
-      <div className="h-36 w-full overflow-hidden bg-[#f2f4f8]">
+    <article className="rts-card rts-card-clip">
+      <div className="h-40 w-full overflow-hidden bg-[#f2f4f8]">
         {hasRouteCoords ? (
           <LeafletMap
             center={route.center ?? route.routeCoords[0]}
@@ -74,15 +75,15 @@ function RouteCard({
           </div>
         )}
       </div>
-      <div className="flex flex-col gap-2 px-4 py-3">
+      <div className="flex flex-col gap-3 px-5 py-4">
         <div className="flex items-start justify-between gap-3">
-          <h4 className="font-semibold text-black text-base leading-tight">{route.title}</h4>
+          <h4 className="text-base font-semibold leading-tight text-black">{route.title}</h4>
           <button
             type="button"
             onClick={() => onRemove(route.id)}
             aria-label="저장된 루트에서 제거"
             title="저장된 루트에서 제거"
-            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-black/10 bg-white"
+            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-[#e5e5e5] bg-white"
           >
             <BookmarkIcon filled />
           </button>
@@ -90,12 +91,12 @@ function RouteCard({
         <div className="text-sm text-[#666]">거리 {route.distanceKm.toFixed(2)}km</div>
         <div className="text-sm text-[#666]">{route.place}</div>
         <div className="text-xs text-[#777]">저장 시각 {formatSavedAt(route.createdAt)}</div>
-        <div className="mt-1 flex flex-wrap items-center gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-2 border-t border-[#e5e5e5] pt-3">
           <span className="rounded-full bg-black/5 px-2 py-0.5 text-[11px] text-[#444]">
             {formatLabel(route.label)}
           </span>
           <span className="text-[11px] text-[#666]">
-            CLIP 단독 {route.clipScore !== null ? route.clipScore.toFixed(6) : "-"}
+            형태 점수 {route.clipScore !== null ? Math.round(route.clipScore * 100) : "-"}
           </span>
         </div>
       </div>
@@ -140,22 +141,22 @@ export default function SavedRoutesPage() {
   }, [routeCards, searchTerm]);
 
   return (
-    <main className="min-h-screen bg-white">
+    <main className="rts-page">
       <TopBar userName="러너" />
 
-      <section className="px-6 py-8">
-        <header className="flex items-center gap-4 mb-6">
-          <button onClick={() => router.push("/lobby")} className="text-2xl">‹</button>
-          <h1 className="text-2xl font-semibold">저장된 루트</h1>
+      <PageContainer>
+        <header className="rts-page-header">
+          <button onClick={() => router.push("/lobby")} className="rts-back-button">‹</button>
+          <h1>저장된 루트</h1>
         </header>
 
-        <div className="mb-4">
+        <div className="my-5">
           <input
             type="text"
             placeholder="루트 검색"
             value={searchTerm}
             onChange={e => setSearchTerm(e.target.value)}
-            className="w-full rounded-xl border border-black/10 px-4 py-2 focus:outline-none"
+            className="rts-input"
           />
         </div>
 
@@ -164,14 +165,14 @@ export default function SavedRoutesPage() {
             <RouteCard key={card.id} route={card} onRemove={handleRemove} />
           ))}
           {filteredCards.length === 0 && (
-            <p className="text-center text-gray-500 col-span-2">
+            <p className="rts-empty-state col-span-2">
               {routeCards.length === 0
                 ? "저장된 루트가 없습니다. 코스 결과 화면에서 북마크를 눌러 저장해 주세요."
                 : "검색 결과가 없습니다."}
             </p>
           )}
         </div>
-      </section>
+      </PageContainer>
     </main>
   );
 }

main/app/stats/complete-number/page.tsx

@@ -329,7 +329,6 @@ export default function CompleteCalendarPage() {
           </button>
 
           <div className="titleBox">
-            <p className="eyebrow">RUNNING STATS</p>
             <h1>완주 캘린더</h1>
             <p className="subText">완주한 날짜에 루트 모양이 자동으로 기록됩니다.</p>
           </div>
@@ -419,7 +418,6 @@ export default function CompleteCalendarPage() {
               <article className="selectedPanel">
                 <div className="panelHeader">
                   <div>
-                    <p className="panelEyebrow">SELECTED DAY</p>
                     <h2>{formatKoreanDate(viewYear, viewMonth, selectedDay)}</h2>
                     <p className="routeName">
                       {selectedRouteRecord?.routeTitle ?? "완주한 루트 기록 없음"}
@@ -532,12 +530,6 @@ export default function CompleteCalendarPage() {
           min-height: 100vh;
           background: #ffffff;
           color: #111111;
-          font-family:
-            Arial,
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            sans-serif;
           overflow-x: hidden;
         }
 
@@ -586,20 +578,10 @@ export default function CompleteCalendarPage() {
           min-width: 0;
         }
 
-        .eyebrow,
-        .panelEyebrow {
-          margin: 0 0 4px;
-          font-size: 11px;
-          font-weight: 700;
-          letter-spacing: 0.1em;
-          color: #8a8a8a;
-        }
-
         .topHeader h1 {
           margin: 0;
           font-size: 24px;
           font-weight: 700;
-          letter-spacing: -0.03em;
         }
 
         .subText {
@@ -641,7 +623,6 @@ export default function CompleteCalendarPage() {
           margin: 0;
           font-size: 28px;
           font-weight: 800;
-          letter-spacing: -0.04em;
         }
 
         .monthTitle p {
@@ -816,7 +797,6 @@ export default function CompleteCalendarPage() {
           margin: 0;
           font-size: 22px;
           font-weight: 800;
-          letter-spacing: -0.04em;
         }
 
         .routeName {
@@ -970,7 +950,6 @@ export default function CompleteCalendarPage() {
           line-height: 1.5;
           resize: vertical;
           outline: none;
-          font-family: inherit;
         }
 
         textarea:focus {
@@ -1078,10 +1057,6 @@ export default function CompleteCalendarPage() {
             padding: 0 2px 14px;
           }
 
-          .eyebrow {
-            display: none;
-          }
-
           .topHeader h1 {
             font-size: 22px;
           }
@@ -1210,4 +1185,4 @@ export default function CompleteCalendarPage() {
       `}</style>
     </main>
   );
-}
+}

main/app/stats/page.tsx

@@ -329,7 +329,6 @@ export default function StatsPage() {
           </button>
 
           <div>
-            <p className="eyebrow">RUNNING STATS</p>
             <h1>활동</h1>
           </div>
         </header>
@@ -424,7 +423,6 @@ export default function StatsPage() {
             <aside className="sideColumn">
               <section className="detailSection">
                 <div className="sectionHeader">
-                  <p className="sectionEyebrow">RECENT</p>
                   <h2>전체 활동 통계</h2>
                 </div>
 
@@ -477,12 +475,6 @@ export default function StatsPage() {
           min-height: 100vh;
           background: #f6f6f6;
           color: #111111;
-          font-family:
-            Arial,
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            sans-serif;
         }
 
         .shell {
@@ -519,19 +511,10 @@ export default function StatsPage() {
           flex-shrink: 0;
         }
 
-        .eyebrow {
-          margin: 0 0 4px;
-          font-size: 11px;
-          font-weight: 700;
-          letter-spacing: 0.1em;
-          color: #8a8a8a;
-        }
-
         .header h1 {
           margin: 0;
           font-size: 28px;
           font-weight: 700;
-          letter-spacing: -0.04em;
         }
 
         .dashboardGrid {
@@ -561,7 +544,6 @@ export default function StatsPage() {
           font-size: 22px;
           font-weight: 500;
           color: #111111;
-          letter-spacing: -0.03em;
         }
 
         .mainDistance {
@@ -579,8 +561,7 @@ export default function StatsPage() {
         .distanceNumber {
           font-size: clamp(64px, 10vw, 118px);
           line-height: 0.9;
-          font-weight: 900;
-          letter-spacing: -0.08em;
+          font-weight: 800;
         }
 
         .distanceUnit {
@@ -615,7 +596,6 @@ export default function StatsPage() {
           margin-bottom: 8px;
           font-size: clamp(20px, 3vw, 34px);
           font-weight: 800;
-          letter-spacing: -0.04em;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -718,19 +698,10 @@ export default function StatsPage() {
           margin-bottom: 22px;
         }
 
-        .sectionEyebrow {
-          margin: 0 0 4px;
-          font-size: 11px;
-          font-weight: 700;
-          letter-spacing: 0.1em;
-          color: #9b9b9b;
-        }
-
         .detailSection h2 {
           margin: 0;
           font-size: 26px;
           font-weight: 700;
-          letter-spacing: -0.04em;
         }
 
         .detailCard {
@@ -771,7 +742,6 @@ export default function StatsPage() {
           font-size: clamp(30px, 4vw, 48px);
           line-height: 1;
           font-weight: 800;
-          letter-spacing: -0.06em;
         }
 
         .errorBox {
@@ -814,8 +784,7 @@ export default function StatsPage() {
             border-bottom: 1px solid #d9d9d9;
           }
 
-          .backButton,
-          .eyebrow {
+          .backButton {
             display: none;
           }
 
@@ -907,10 +876,6 @@ export default function StatsPage() {
             font-size: 16px;
           }
 
-          .sectionEyebrow {
-            display: none;
-          }
-
           .detailSection h2 {
             font-size: 28px;
           }
@@ -966,4 +931,4 @@ export default function StatsPage() {
       `}</style>
     </main>
   );
-}
+}

main/app/stats/total-length/page.tsx

@@ -400,7 +400,6 @@ export default function TotalLengthPage() {
           </button>
 
           <div>
-            <p className="eyebrow">RUNNING STATS</p>
             <h1>이동 거리</h1>
           </div>
         </header>
@@ -586,7 +585,6 @@ export default function TotalLengthPage() {
             <aside className="sideColumn">
               <section className="recentSection">
                 <div className="sectionHeader">
-                  <p className="sectionEyebrow">RECENT</p>
                   <h2>최근 활동</h2>
                 </div>
 
@@ -629,12 +627,6 @@ export default function TotalLengthPage() {
           min-height: 100vh;
           background: #ffffff;
           color: #111111;
-          font-family:
-            Arial,
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            sans-serif;
           overflow-x: hidden;
         }
 
@@ -679,19 +671,10 @@ export default function TotalLengthPage() {
           flex-shrink: 0;
         }
 
-        .eyebrow {
-          margin: 0 0 4px;
-          font-size: 11px;
-          font-weight: 700;
-          letter-spacing: 0.1em;
-          color: #8a8a8a;
-        }
-
         .topHeader h1 {
           margin: 0;
           font-size: 24px;
           font-weight: 600;
-          letter-spacing: -0.03em;
         }
 
         .dashboardGrid {
@@ -826,9 +809,7 @@ export default function TotalLengthPage() {
           margin: 0;
           font-size: clamp(34px, 5vw, 56px);
           line-height: 1;
-          font-weight: 900;
-          font-style: italic;
-          letter-spacing: -0.06em;
+          font-weight: 800;
         }
 
         .unitToggle {
@@ -1004,19 +985,10 @@ export default function TotalLengthPage() {
           margin-bottom: 22px;
         }
 
-        .sectionEyebrow {
-          margin: 0 0 4px;
-          font-size: 11px;
-          font-weight: 700;
-          letter-spacing: 0.1em;
-          color: #9b9b9b;
-        }
-
         .recentSection h2 {
           margin: 0;
           font-size: 22px;
           font-weight: 600;
-          letter-spacing: -0.03em;
         }
 
         .activityCard,
@@ -1047,10 +1019,8 @@ export default function TotalLengthPage() {
         .activityDistance {
           margin: 0 0 18px;
           font-size: 20px;
-          font-weight: 900;
-          font-style: italic;
+          font-weight: 800;
           color: #111111;
-          letter-spacing: -0.04em;
         }
 
         .activityImage,
@@ -1117,8 +1087,6 @@ export default function TotalLengthPage() {
             margin-top: 28px;
           }
 
-          .eyebrow,
-          .sectionEyebrow,
           .summaryLabel {
             display: none;
           }
@@ -1231,4 +1199,4 @@ export default function TotalLengthPage() {
       `}</style>
     </main>
   );
-}
+}

main/app/stats/total-time/page.tsx

@@ -407,7 +407,6 @@ export default function TotalTimePage() {
           </button>
 
           <div>
-            <p className="eyebrow">RUNNING STATS</p>
             <h1>총 시간</h1>
           </div>
         </header>
@@ -601,7 +600,6 @@ export default function TotalTimePage() {
             <aside className="sideColumn">
               <section className="recentSection">
                 <div className="sectionHeader">
-                  <p className="sectionEyebrow">RECENT</p>
                   <h2>최근 활동</h2>
                 </div>
 
@@ -644,12 +642,6 @@ export default function TotalTimePage() {
           min-height: 100vh;
           background: #ffffff;
           color: #111111;
-          font-family:
-            Arial,
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            sans-serif;
           overflow-x: hidden;
         }
 
@@ -694,19 +686,10 @@ export default function TotalTimePage() {
           flex-shrink: 0;
         }
 
-        .eyebrow {
-          margin: 0 0 4px;
-          font-size: 11px;
-          font-weight: 700;
-          letter-spacing: 0.1em;
-          color: #8a8a8a;
-        }
-
         .topHeader h1 {
           margin: 0;
           font-size: 24px;
           font-weight: 600;
-          letter-spacing: -0.03em;
         }
 
         .dashboardGrid {
@@ -841,9 +824,7 @@ export default function TotalTimePage() {
           margin: 0;
           font-size: clamp(34px, 5vw, 56px);
           line-height: 1;
-          font-weight: 900;
-          font-style: italic;
-          letter-spacing: -0.06em;
+          font-weight: 800;
         }
 
         .unitToggle {
@@ -1019,19 +1000,10 @@ export default function TotalTimePage() {
           margin-bottom: 22px;
         }
 
-        .sectionEyebrow {
-          margin: 0 0 4px;
-          font-size: 11px;
-          font-weight: 700;
-          letter-spacing: 0.1em;
-          color: #9b9b9b;
-        }
-
         .recentSection h2 {
           margin: 0;
           font-size: 22px;
           font-weight: 600;
-          letter-spacing: -0.03em;
         }
 
         .activityCard,
@@ -1062,10 +1034,8 @@ export default function TotalTimePage() {
         .activityDuration {
           margin: 0 0 18px;
           font-size: 20px;
-          font-weight: 900;
-          font-style: italic;
+          font-weight: 800;
           color: #111111;
-          letter-spacing: -0.04em;
         }
 
         .activityImage,
@@ -1132,8 +1102,6 @@ export default function TotalTimePage() {
             margin-top: 28px;
           }
 
-          .eyebrow,
-          .sectionEyebrow,
           .summaryLabel {
             display: none;
           }
@@ -1246,4 +1214,4 @@ export default function TotalTimePage() {
       `}</style>
     </main>
   );
-}
+}

main/app/trend-routes/page.tsx

@@ -173,7 +173,7 @@ function TopRouteCard({
 
   return (
     <article
-      className={`rounded-2xl border border-black/10 bg-white shadow-sm ${
+      className={`rts-card ${
         large ? "p-8" : "p-6"
       }`}
     >
@@ -232,7 +232,7 @@ function TopRouteCard({
       <div className="mt-6">
         <Link
           href={`/route/${route.id}`}
-          className="inline-flex h-[44px] items-center justify-center rounded-xl bg-[#bfdcff] px-5 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
+          className="rts-primary-button h-[44px] px-5"
         >
           해당 루트 보러가기
         </Link>
@@ -292,17 +292,17 @@ export default function Page() {
   }, [posts, sortType]);
 
   return (
-    <main className="min-h-screen bg-[#f6f6f6]">
+    <main className="rts-page rts-page-soft">
       <TopBar userName="러너" title="Run The Shape" largeBrand />
 
-      <section className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-8 sm:px-10">
+      <section className="rts-shell flex flex-col gap-6">
         {loadError ? (
-          <div className="rounded-xl border border-[#bfdcff] bg-[#eef7ff] px-4 py-3 text-sm text-[#2459a8]">
+          <div className="rounded-[18px] border border-[#bfdcff] bg-[#eef7ff] px-4 py-3 text-sm text-[#2459a8]">
             {loadError}
           </div>
         ) : null}
 
-        <section className="rounded-2xl border border-black/10 bg-white p-8 shadow-sm">
+        <section className="rts-card p-8">
           <div className="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
             <div>
               <p className="text-xs font-bold tracking-[0.14em] text-[#8a8a8a]">
@@ -344,7 +344,7 @@ export default function Page() {
         </section>
 
         {topRoutes.length === 0 ? (
-          <section className="rounded-2xl border border-black/10 bg-white p-8 text-center shadow-sm">
+          <section className="rts-empty-state">
             <h2 className="text-2xl font-bold text-black">인기 루트가 아직 없습니다.</h2>
 
             <p className="mt-2 text-sm text-[#666]">
@@ -354,7 +354,7 @@ export default function Page() {
             <div className="mt-6">
               <Link
                 href="/recent-shared-routes"
-                className="inline-flex h-[44px] items-center justify-center rounded-xl bg-[#bfdcff] px-5 text-sm font-semibold text-black shadow-sm transition-shadow hover:shadow-md"
+                className="rts-primary-button h-[44px] px-5"
               >
                 최근 공유 루트 보러가기
               </Link>