diff --git a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
index 842af452..e8a1e9b6 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
@@ -27,7 +27,11 @@ import {
 import type { PlanPlace } from "@/lib/plan/types";
 import { cn } from "@/lib/utils";
 import { useSelectedPlace } from "@/contexts/SelectedPlaceContext";
-import { usePlanMapFocusStore } from "@/stores/plan-map-focus-store";
+import {
+  PLAN_MAP_FOCUS_NO_LOCATION_MESSAGE,
+  planPlaceFocusTarget,
+  usePlanMapFocusStore,
+} from "@/stores/plan-map-focus-store";
 
 import { PlanItemMemoEditor, PlanItemMemoReadOnly } from "./PlanItemMemoForm";
 import { PlanItemTimeEditor } from "./PlanItemTimeForm";
@@ -80,9 +84,10 @@ export function PlanPlaceCard({
       s.focus.scheduleId === focusScheduleId &&
       s.focus.itemId === place.itemId,
   );
-  /** 지도 핀으로 고른 경우에만 값이 있다 — 그때 일정 목록을 이 카드로 스크롤한다 */
-  const focusSeqFromMap = usePlanMapFocusStore((s) =>
-    s.focus?.source === "map" &&
+  /** 카드가 아닌 곳(지도 핀·장소 이동 스테퍼)에서 고른 경우에만 값이 있다 — 그때 일정 목록을 이 카드로 스크롤한다 */
+  const focusSeqToReveal = usePlanMapFocusStore((s) =>
+    s.focus !== null &&
+    s.focus.source !== "card" &&
     s.focus.roomId === focusRoomId &&
     s.focus.scheduleId === focusScheduleId &&
     s.focus.itemId === place.itemId
@@ -91,10 +96,10 @@ export function PlanPlaceCard({
   );
   const articleRef = useRef<HTMLElement>(null);
   useEffect(() => {
-    if (focusSeqFromMap === null) return;
+    if (focusSeqToReveal === null) return;
     const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
     articleRef.current?.scrollIntoView({ behavior: reduceMotion ? "auto" : "smooth", block: "center" });
-  }, [focusSeqFromMap]);
+  }, [focusSeqToReveal]);
   const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
   const blockCardDragRef = useRef(false);
   const [thumbnailRef, thumbnailInViewport] = useInViewport<HTMLElement>();
@@ -202,24 +207,12 @@ export function PlanPlaceCard({
         setSelectedPlace(null);
         return;
       }
-      const loc = place.location;
-      const hasLocation =
-        loc != null &&
-        typeof loc.lat === "number" &&
-        typeof loc.lng === "number" &&
-        Number.isFinite(loc.lat) &&
-        Number.isFinite(loc.lng);
+      const target = planPlaceFocusTarget(place, focusRoomId, focusScheduleId, "card");
+      if (!target) return;
       // 일정에 넣은 장소는 상세를 보려는 게 아니라 위치를 보려는 것 — 상세(조회 포함) 대신 카드·지도 핀만 강조한다
       setSelectedPlace(null);
-      focusPlace({
-        roomId: focusRoomId,
-        scheduleId: focusScheduleId,
-        itemId: place.itemId,
-        googlePlaceId: place.googlePlaceId?.trim() || null,
-        location: hasLocation ? { lat: loc.lat, lng: loc.lng } : null,
-        source: "card",
-      });
-      if (!hasLocation) toast.info("지도에 표시할 위치 정보가 없어요.");
+      focusPlace(target);
+      if (!target.location) toast.info(PLAN_MAP_FOCUS_NO_LOCATION_MESSAGE);
     },
     [
       clearFocus,
@@ -227,9 +220,7 @@ export function PlanPlaceCard({
       focusRoomId,
       focusScheduleId,
       focused,
-      place.googlePlaceId,
-      place.itemId,
-      place.location,
+      place,
       setSelectedPlace,
     ],
   );
@@ -293,7 +284,7 @@ export function PlanPlaceCard({
       aria-label={hasTime ? `시간 ${timeRange} 수정` : "시간 설정"}
       className={cn(PLAN_PLACE_CARD_TW.actionButton, "tabular-nums")}
     >
-      <TimeClockIcon size={16} className={PLAN_PLACE_CARD_TW.actionIcon} />
+      <TimeClockIcon size={16} className={hasTime ? PLAN_PLACE_CARD_TW.actionIcon : PLAN_PLACE_CARD_TW.actionIconEmpty} />
       <span>{timeRange || "시간"}</span>
     </button>
   ) : null;
@@ -429,7 +420,8 @@ export function PlanPlaceCard({
                     label="비용"
                     // 금액이 길면 메모 버튼 앞에서 말줄임되도록 공통 버튼의 shrink-0를 푼다
                     className={cn(PLAN_PLACE_CARD_TW.actionButton, "min-w-0 shrink")}
-                    icon={<CoinIcon size={16} className={PLAN_PLACE_CARD_TW.actionIcon} />}
+                    // 금액이 있을 때만 파랑 — 버튼의 `data-filled`로 바꾼다
+                    icon={<CoinIcon size={16} className={cn(PLAN_PLACE_CARD_TW.actionIconEmpty, "group-data-filled:text-primary")} />}
                   />
                 )}
               </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index f2b1b243..84be1375 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -22,6 +22,11 @@
   overflow: auto !important; /* NOSONAR: S9423 — Google Maps의 인라인 overflow:scroll에 의한 불필요한 스크롤바를 제거한다. */
 }
 
+/* PC 지도 버튼은 지도 끝에서 아래·좌우 모두 24px — 확대·축소(+/−)의 아래는 저작권 줄과 기본 여백으로 이미 24px이라 오른쪽만 넓힌다. */
+[data-map-controls-inset] .gm-bundled-control {
+  margin-right: 24px !important; /* NOSONAR: S9423 — Google Maps가 주입하는 인라인 margin(10px)을 재정의한다. */
+}
+
 @layer base {
   html {
     @apply font-sans;
diff --git a/src/components/expenses/ExpenseProvider.tsx b/src/components/expenses/ExpenseProvider.tsx
index 6192dae9..7052cd46 100644
--- a/src/components/expenses/ExpenseProvider.tsx
+++ b/src/components/expenses/ExpenseProvider.tsx
@@ -446,6 +446,7 @@ export function ExpenseEntryButton({
       aria-label={`${scopeLabel} ${context.list.isSuccess && !scoped.length ? "비용 추가" : "비용 목록 열기"}`}
       aria-describedby={scheduleItemId === undefined ? undefined : summaryId}
       aria-haspopup="dialog"
+      data-filled={context.list.isSuccess && scoped.length > 0 ? "" : undefined}
       onMouseDown={(e) => e.stopPropagation()}
       onClick={(e) => {
         e.stopPropagation();
@@ -457,7 +458,7 @@ export function ExpenseEntryButton({
           context.openScope(scope);
         }
       }}
-      className={cn(className, "min-w-0 max-w-full text-left", "disabled:cursor-not-allowed disabled:opacity-50")}
+      className={cn(className, "group min-w-0 max-w-full text-left", "disabled:cursor-not-allowed disabled:opacity-50")}
     >
       {icon}<span id={scheduleItemId === undefined ? undefined : summaryId} className="min-w-0 truncate" title={scheduleItemId === undefined ? undefined : summaryLabel}>{summaryLabel}</span>
     </button>
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index 0192a6e1..2d8e7e5d 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/map/Map.tsx
@@ -21,6 +21,7 @@ import {
   MAP_MAX_ZOOM,
   MAP_MIN_ZOOM,
   MAP_PAN_RESTRICTION,
+  moveMapTo,
   normalizeGooglePlaceResourceId,
   panToWithinWorld,
   readDestinationLatLngFromSession,
@@ -35,6 +36,7 @@ import {
   readRoomMapViewport,
   writeRoomMapViewport,
 } from "@/lib/map-room-viewport-storage";
+import { MAP_DETAIL_PANEL_COVER_WIDTH_PX } from "@/lib/layout-tokens";
 import { isPlanPath } from "@/lib/layout/mainChromeLayoutWidth";
 import { isMobileMapPathname } from "@/lib/mobile-view";
 import { clampPlacesSearchRadiusMeters } from "@/lib/places/placesSearchRadius";
@@ -62,6 +64,8 @@ import { MapDiscoverToolbar } from "./MapDiscoverToolbar";
 import { RouteViewCameraController } from "./RouteViewCameraController";
 import { MapDiscoverPlaces } from "./MapDiscoverPlaces";
 import { PlanItineraryMapRoutes, type PlanItineraryRouteDay } from "./PlanItineraryMapRoutes";
+import { PlanRouteStepper } from "./PlanRouteStepper";
+import { useWebPlanRouteMode } from "./useWebPlanRouteMode";
 import type { OpenValue, RatingValue } from "./map-filters";
 
 /** 모바일 경로 보기 — 고른 일차만 그리고, 카드 선택에 맞춰 지도를 옮긴다 */
@@ -93,7 +97,10 @@ export type MapRouteView = PlanItineraryRouteDay & {
 
 // ─── 웹 일정에서 고른 장소로 지도 이동 ─────────────────────────────────────────
 
-/** 일정 카드·핀으로 고르면 줌은 그대로 두고 그 장소로 부드럽게 옮긴다(모바일 경로 보기의 카드 넘김과 같은 이동) */
+/**
+ * 일정 카드·핀·장소 이동 스테퍼로 고르면 줌은 그대로 두고 그 장소로 부드럽게 옮긴다(모바일 경로 보기의 카드 넘김과 같은 이동).
+ * 지도 핀으로 고르면 함께 연 상세(`SelectedPlaceController`)도 같은 곳으로 옮기는데, 같은 곳으로 가는 이동은 하나로 이어진다
+ */
 function PlanFocusCameraController({ roomId }: Readonly<{ roomId: string | null }>) {
   const map = useMap();
   const rid = typeof roomId === "string" ? roomId.trim() : "";
@@ -103,7 +110,7 @@ function PlanFocusCameraController({ roomId }: Readonly<{ roomId: string | null
 
   useEffect(() => {
     if (!map || focusSeq === null || lat === undefined || lng === undefined) return;
-    panToWithinWorld(map, { lat, lng });
+    return moveMapTo(map, { lat, lng });
   }, [map, focusSeq, lat, lng]);
 
   return null;
@@ -113,6 +120,7 @@ function PlanFocusCameraController({ roomId }: Readonly<{ roomId: string | null
 
 function SelectedPlaceController() {
   const map = useMap();
+  const { isMobileDevice } = useMobileView();
   const { selectedPlace, placeSelectionCameraRef } = useSelectedPlace();
 
   useEffect(() => {
@@ -121,17 +129,24 @@ function SelectedPlaceController() {
     placeSelectionCameraRef.current = "full";
 
     if (mode === "none") return;
-    panToWithinWorld(map, selectedPlace.location);
-    if (mode === "full") {
-      map.setZoom(16);
+    const zoom = mode === "full" ? 16 : undefined;
+    // 모바일은 아직 구글 이동(`panTo`)을 그대로 쓴다
+    if (isMobileDevice) {
+      panToWithinWorld(map, selectedPlace.location);
+      if (zoom !== undefined) map.setZoom(zoom);
+      return;
     }
-  }, [map, selectedPlace?.location, placeSelectionCameraRef]);
+    moveMapTo(map, selectedPlace.location, { zoom });
+  }, [map, isMobileDevice, selectedPlace?.location, placeSelectionCameraRef]);
 
   return null;
 }
 
 const VIEWPORT_PERSIST_DEBOUNCE_MS = 400;
 
+/** 오른쪽 아래 확대·축소(+/−) 자리 — 지도 끝 24 + 버튼 40 + 간격 12. 장소 이동 스테퍼가 이보다 오른쪽으로 가지 않는다 */
+const ZOOM_CONTROL_CLEARANCE_PX = 24 + 40 + 12;
+
 /** bootstrap 복원 직후 Zustand `mapCenter`·줌을 검색/일정 UI와 맞춤 */
 function MapBootstrapSync({
   ready,
@@ -185,9 +200,13 @@ function MapBootstrapSync({
   return null;
 }
 
-/** 가로 월드 래핑(지도 타일 무한 복제) 시 마지막 유효 중심으로 되돌림 */
+/**
+ * 가로 월드 래핑(지도 타일 무한 복제) 시 마지막 유효 중심으로 되돌림.
+ * 되돌리는 동안에도 `center_changed`가 계속 오지만 같은 곳으로 가는 이동은 새로 시작하지 않는다(`moveMapTo`)
+ */
 function MapPreventHorizontalWrap() {
   const map = useMap();
+  const { isMobileDevice } = useMobileView();
   const lastValidCenterRef = useRef<google.maps.LatLngLiteral | null>(null);
 
   useEffect(() => {
@@ -208,9 +227,10 @@ function MapPreventHorizontalWrap() {
       }
 
       const last = lastValidCenterRef.current;
-      if (last) {
-        panToWithinWorld(map, last);
-      }
+      if (!last) return;
+      // 모바일은 아직 구글 이동(`panTo`)을 그대로 쓴다
+      if (isMobileDevice) panToWithinWorld(map, last);
+      else moveMapTo(map, last);
     });
 
     const c = map.getCenter();
@@ -221,7 +241,7 @@ function MapPreventHorizontalWrap() {
     return () => {
       google.maps.event.removeListener(listener);
     };
-  }, [map]);
+  }, [map, isMobileDevice]);
 
   return null;
 }
@@ -319,8 +339,7 @@ function MapSearchResultPins() {
     if (!map || isMobileDevice || pinsFocus !== "search" || kind !== "whole" || status !== "done" || !items.length || usePlaceSearchStore.getState().selectedId || fittedItemsRef.current === items) return;
     fittedItemsRef.current = items;
     if (items.length === 1) {
-      panToWithinWorld(map, items[0].location);
-      map.setZoom(16);
+      moveMapTo(map, items[0].location, { zoom: 16 });
     } else {
       const bounds = new google.maps.LatLngBounds();
       items.forEach((item) => bounds.extend(item.location));
@@ -402,9 +421,10 @@ export default function TripMap({
   const isPlanPage = isPlanPath(pathname ?? "") || isMobileMapPathname(pathname ?? "");
   const planStopPlaceIds = usePlanItineraryStopNormalizedPlaceIds(isPlanPage);
 
-  const { setSelectedPlace } = useSelectedPlace();
+  const { selectedPlace, setSelectedPlace } = useSelectedPlace();
   const { isMobileDevice } = useMobileView();
   const clearPlanFocus = usePlanMapFocusStore((s) => s.clearFocus);
+  const planRouteMode = useWebPlanRouteMode();
   const setMapCamera = useMapCenterStore((s) => s.setMapCamera);
   const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(
     null,
@@ -557,7 +577,7 @@ export default function TripMap({
   );
 
   return (
-    <div className="relative h-full min-h-0 w-full min-w-0">
+    <div className="relative h-full min-h-0 w-full min-w-0" data-map-controls-inset={isMobileDevice ? undefined : ""}>
       <div className="absolute inset-0 min-h-0 overflow-hidden">
         {!bootstrap.ready ? (
           <div
@@ -612,18 +632,21 @@ export default function TripMap({
 
           {!routeView && <SelectedPlaceMarker />}
 
-          {/* PC는 확대·축소(+/−) 바로 위 — 같은 오른쪽 아래 컨트롤 자리에 넣으면 지도가 +/− 위로 쌓아 준다 */}
+          {/* PC는 확대·축소(+/−) 바로 위 — 같은 오른쪽 아래 컨트롤 자리에 넣으면 지도가 +/− 위로 쌓아 준다.
+              오른쪽은 +/−와 같이 지도 끝에서 24px(globals.css `[data-map-controls-inset]`) */}
           {routeView || isMobileDevice ? null : (
             <MapControl position={ControlPosition.RIGHT_BOTTOM}>
-              <div className="mr-2.5">{bookmarkToggle}</div>
+              <div className="mr-6">{bookmarkToggle}</div>
             </MapControl>
           )}
           </GoogleMap>
         )}
       </div>
 
+      {/* 웹 동선보기는 숨기기만 한다 — 상세 패널 위치를 계속 재서 필터 한 줄 아래(최솟값)에 두고, 풀면 고른 카테고리·필터 그대로 보인다 */}
       {routeView ? null : (
         <MapDiscoverToolbar
+          hidden={planRouteMode}
           selectedCategoryId={selectedCategoryId}
           onSelectCategory={setSelectedCategoryId}
           rating={rating}
@@ -633,9 +656,27 @@ export default function TripMap({
         />
       )}
 
+      {/* 웹 동선보기 장소 이동 — 지도 아래 가운데, 다른 지도 버튼처럼 아래 24px.
+          상세 패널이 열리면 패널 오른쪽 끝~지도 오른쪽 끝의 가운데로 옮긴다.
+          오른쪽 칸은 +/− 자리만큼 줄어들지 않아, 지도가 좁아지면 +/−에 밀려 왼쪽으로 넘치고(justify-end)
+          z-[16]이 상세 패널(`MapWithDetailPanel` z-20)보다 낮아 패널 뒤로 가려진다 */}
+      {bootstrap.ready && !routeView && !isMobileDevice && isPlanPage ? (
+        <div
+          style={{
+            paddingLeft: selectedPlace ? MAP_DETAIL_PANEL_COVER_WIDTH_PX : 0,
+            gridTemplateColumns: `minmax(0, 1fr) auto minmax(${ZOOM_CONTROL_CLEARANCE_PX}px, 1fr)`,
+          }}
+          className="pointer-events-none absolute inset-x-0 bottom-6 z-[16] grid justify-end transition-[padding] duration-300 ease-out"
+        >
+          <div className="col-start-2">
+            <PlanRouteStepper roomId={currentRoomId} />
+          </div>
+        </div>
+      ) : null}
+
       {!bootstrap.ready || routeView ? null : (
         <>
-          <MapSearchHereButton discoverCategoryId={selectedCategoryId} />
+          {planRouteMode ? null : <MapSearchHereButton discoverCategoryId={selectedCategoryId} />}
           {isMobileDevice ? (
             <div className="pointer-events-none absolute bottom-6 left-4 z-[16] flex flex-col items-center gap-3">
               {onOpenRouteView ? (
diff --git a/src/components/map/MapDiscoverToolbar.tsx b/src/components/map/MapDiscoverToolbar.tsx
index 9478bd1c..c5785c0b 100644
--- a/src/components/map/MapDiscoverToolbar.tsx
+++ b/src/components/map/MapDiscoverToolbar.tsx
@@ -22,6 +22,8 @@ import type { OpenValue, RatingValue } from "./map-filters";
 import { mapToolbarPanelMotion } from "./map-toolbar-motion";
 
 type MapDiscoverToolbarProps = {
+  /** 웹 동선보기에서 숨김 — 상세 패널은 최솟값(필터 한 줄 아래) 자리로 간다 */
+  hidden?: boolean;
   selectedCategoryId: string | null;
   onSelectCategory: (id: string | null) => void;
   rating: RatingValue;
@@ -31,6 +33,7 @@ type MapDiscoverToolbarProps = {
 };
 
 export function MapDiscoverToolbar({
+  hidden = false,
   selectedCategoryId,
   onSelectCategory,
   rating,
@@ -51,6 +54,7 @@ export function MapDiscoverToolbar({
   return (
     <div
       ref={setToolbarRef}
+      hidden={hidden}
       className={cn(
         "pointer-events-none absolute left-0 right-[312px] top-3 flex min-h-12 max-w-full flex-col justify-center overflow-visible px-4 mobile:right-0 mobile:block mobile:px-5",
         ratingDropdownOpen ? MAP_TOOLBAR_ELEVATED_Z_CLASS : MAP_TOOLBAR_Z_CLASS,
diff --git a/src/components/map/MapPlaceSearch.tsx b/src/components/map/MapPlaceSearch.tsx
index 0a51abc7..9d9a64c0 100644
--- a/src/components/map/MapPlaceSearch.tsx
+++ b/src/components/map/MapPlaceSearch.tsx
@@ -14,7 +14,11 @@ import { MobileSearchResultCarousel } from "./MobileSearchResultCarousel";
 import { useSelectedPlace } from "@/contexts/SelectedPlaceContext";
 import { useMapPinsFocusStore } from "@/stores/map-pins-focus-store";
 
-export function MapPlaceSearch({ mobile }: Readonly<{ mobile: boolean }>) {
+export function MapPlaceSearch({ mobile, hidden = false }: Readonly<{
+  mobile: boolean;
+  /** PC 검색창 숨김(웹 동선보기) — 입력값·자동완성을 지키려고 언마운트하지 않는다 */
+  hidden?: boolean;
+}>) {
   const { confirm, invalidate, clearSearch, scopeKey } = useMapPlaceSearch(mobile);
   const initialQuery = useSearchParams().get("q")?.trim() ?? "";
   const status = usePlaceSearchStore((s) => s.status);
@@ -59,6 +63,7 @@ export function MapPlaceSearch({ mobile }: Readonly<{ mobile: boolean }>) {
       ) : (
         <div
           data-tutorial-target="search"
+          hidden={hidden}
           className="absolute right-4 top-[18px] z-30"
         >
           <MapPlaceSearchInput
diff --git a/src/components/map/MapWithDetailPanel.tsx b/src/components/map/MapWithDetailPanel.tsx
index b1bc2f1a..a79d94d9 100644
--- a/src/components/map/MapWithDetailPanel.tsx
+++ b/src/components/map/MapWithDetailPanel.tsx
@@ -11,6 +11,7 @@ import { cn } from "@/lib/utils";
 
 import Map, { type MapRouteView } from "./Map";
 import { MapPlaceSearch } from "./MapPlaceSearch";
+import { useWebPlanRouteMode } from "./useWebPlanRouteMode";
 
 export function MapWithDetailPanel({
   mobileInline = false,
@@ -36,6 +37,7 @@ export function MapWithDetailPanel({
 
   const { setToolbarRef, panelTopPx } =
     useMapDiscoverToolbarOffset(mapSectionEl);
+  const planRouteMode = useWebPlanRouteMode();
 
   const visibleStyle = mobileInline ? undefined : { minWidth: MAIN_MAP_MIN_WIDTH_PX };
 
@@ -87,7 +89,8 @@ export function MapWithDetailPanel({
         )}
       </div>
 
-      {!routeView ? <MapPlaceSearch mobile={mobileInline} /> : null}
+      {/* 웹 동선보기에서는 숨기기만 한다 — 다시 마운트하면 입력값이 사라지고 주소의 검색어(`?q=`)로 다시 검색한다 */}
+      {!routeView ? <MapPlaceSearch mobile={mobileInline} hidden={planRouteMode} /> : null}
     </section>
   );
 }
diff --git a/src/components/map/PlanRouteStepper.test.tsx b/src/components/map/PlanRouteStepper.test.tsx
new file mode 100644
index 00000000..5a5730c5
--- /dev/null
+++ b/src/components/map/PlanRouteStepper.test.tsx
@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+import type { PlanPlace } from "@/lib/plan/types";
+import { scheduleItemsQueryKey } from "@/lib/query-keys";
+import { PLAN_MAP_FOCUS_NO_LOCATION_MESSAGE, usePlanMapFocusStore } from "@/stores/plan-map-focus-store";
+
+import { PlanRouteStepper } from "./PlanRouteStepper";
+
+const state = vi.hoisted(() => ({ select: vi.fn(), toast: vi.fn() }));
+vi.mock("@/hooks/useRooms", () => ({ useRoomSchedules: () => ({ isSuccess: true }) }));
+vi.mock("@/contexts/SelectedPlaceContext", () => ({ useSelectedPlace: () => ({ setSelectedPlace: state.select }) }));
+vi.mock("sonner", () => ({ toast: { info: state.toast } }));
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+const places: PlanPlace[] = [
+  { id: "a", title: "A", itemId: 1, googlePlaceId: "ga", location: { lat: 1, lng: 1 } },
+  { id: "b", title: "B", itemId: 2, googlePlaceId: "gb", location: { lat: 2, lng: 2 } },
+  { id: "c", title: "C", itemId: 3, googlePlaceId: "gc" },
+];
+let host: HTMLDivElement;
+let root: Root;
+const group = () => host.querySelector<HTMLElement>('[role="group"][aria-label="장소 이동"]');
+const button = (label: string) => group()!.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`)!;
+const position = () => group()!.querySelector("p > span[aria-hidden]")!.textContent;
+function focusItem(itemId: number) {
+  usePlanMapFocusStore.setState({
+    focus: { roomId: "room", scheduleId: 10, itemId, googlePlaceId: null, location: null, source: "card", seq: 1 },
+  });
+}
+
+beforeEach(async () => {
+  state.select.mockReset();
+  state.toast.mockReset();
+  const queryClient = new QueryClient();
+  queryClient.setQueryData(scheduleItemsQueryKey("room", 10), places);
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  usePlanMapFocusStore.setState({ focus: null });
+  await act(async () =>
+    root.render(
+      <QueryClientProvider client={queryClient}>
+        <PlanRouteStepper roomId="room" />
+      </QueryClientProvider>,
+    ),
+  );
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+it("is hidden until a place of the itinerary is focused", () => {
+  expect(group()).toBeNull();
+});
+
+it("shows the order within the day and disables the edge buttons", async () => {
+  await act(async () => focusItem(1));
+  expect(position()).toBe("1/3");
+  expect(button("이전 장소").disabled).toBe(true);
+  expect(button("다음 장소").disabled).toBe(false);
+  await act(async () => focusItem(3));
+  expect(position()).toBe("3/3");
+  expect(button("다음 장소").disabled).toBe(true);
+});
+
+it("moves the focus like a card click without opening the detail and asks the list to reveal it", async () => {
+  await act(async () => focusItem(1));
+  await act(async () => button("다음 장소").click());
+  expect(usePlanMapFocusStore.getState().focus).toMatchObject({
+    roomId: "room", scheduleId: 10, itemId: 2, googlePlaceId: "gb", location: { lat: 2, lng: 2 }, source: "stepper",
+  });
+  expect(state.select).toHaveBeenCalledWith(null);
+  expect(position()).toBe("2/3");
+  expect(state.toast).not.toHaveBeenCalled();
+});
+
+it("keeps places without a location in the order and tells the user the map cannot move", async () => {
+  await act(async () => focusItem(2));
+  await act(async () => button("다음 장소").click());
+  expect(usePlanMapFocusStore.getState().focus).toMatchObject({ itemId: 3, location: null, source: "stepper" });
+  expect(state.toast).toHaveBeenCalledWith(PLAN_MAP_FOCUS_NO_LOCATION_MESSAGE);
+});
diff --git a/src/components/map/PlanRouteStepper.tsx b/src/components/map/PlanRouteStepper.tsx
new file mode 100644
index 00000000..cb25a26d
--- /dev/null
+++ b/src/components/map/PlanRouteStepper.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { ChevronLeftIcon } from "@/assets/icons";
+import { useSelectedPlace } from "@/contexts/SelectedPlaceContext";
+import { useRoomSchedules } from "@/hooks/useRooms";
+import { readSchedulePlanPlacesFromCache } from "@/lib/plan/scheduleItemPlaces";
+import { scheduleItemsQueryKey } from "@/lib/query-keys";
+import {
+  PLAN_MAP_FOCUS_NO_LOCATION_MESSAGE,
+  planPlaceFocusTarget,
+  usePlanMapFocusStore,
+} from "@/stores/plan-map-focus-store";
+
+/** 좌우 버튼 — 누를 수 있는 영역이 숫자와 구분되도록 올리거나 누르면 둥근 배경을 깐다. 높이는 테두리 안쪽을 채운다 */
+const STEP_BUTTON_CLASS =
+  "flex h-full w-12 items-center justify-center rounded-full text-primary transition-colors enabled:cursor-pointer enabled:hover:bg-fill enabled:active:bg-fill-strong disabled:text-icon-disabled focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary";
+
+/**
+ * 웹 동선보기 장소 이동 — 일정에서 고른 장소의 일차 안에서 이전·다음 장소로 넘긴다(Figma 6035:865).
+ * 넘기면 카드를 누른 것처럼 카드·번호 핀 강조와 지도 중심을 바꾸고 상세는 열지 않는다. 일정 목록은 그 카드로 스크롤한다.
+ * 순서는 카드·번호 핀과 같은 일차 장소 순서다.
+ */
+export function PlanRouteStepper({ roomId }: Readonly<{ roomId: string | null }>) {
+  const rid = typeof roomId === "string" ? roomId.trim() : "";
+  const queryClient = useQueryClient();
+  const { isSuccess: schedulesHydrated } = useRoomSchedules(rid || null);
+  const { setSelectedPlace } = useSelectedPlace();
+  const focus = usePlanMapFocusStore((s) => (s.focus && s.focus.roomId === rid ? s.focus : null));
+  const focusPlace = usePlanMapFocusStore((s) => s.focusPlace);
+  const scheduleId = focus?.scheduleId ?? null;
+
+  // 지도 경로(`PlanItineraryMapRoutes`)와 같은 일정 항목 캐시를 읽는다 — 따로 조회하지 않는다
+  const { data: places = [] } = useQuery({
+    queryKey: scheduleItemsQueryKey(rid || null, scheduleId),
+    queryFn: () => (scheduleId === null ? [] : readSchedulePlanPlacesFromCache(queryClient, rid, scheduleId)),
+    enabled: rid.length > 0 && scheduleId !== null && schedulesHydrated,
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
+
+  const index = focus ? places.findIndex((place) => place.itemId === focus.itemId) : -1;
+  if (scheduleId === null || index < 0) return null;
+
+  const current = index + 1;
+  const total = places.length;
+  const moveTo = (nextIndex: number) => {
+    const place = places[nextIndex];
+    const target = place ? planPlaceFocusTarget(place, rid, scheduleId, "stepper") : null;
+    if (!target) return;
+    setSelectedPlace(null);
+    focusPlace(target);
+    if (!target.location) toast.info(PLAN_MAP_FOCUS_NO_LOCATION_MESSAGE);
+  };
+
+  return (
+    <div
+      role="group"
+      aria-label="장소 이동"
+      className="pointer-events-auto flex h-11 items-center gap-1 rounded-full border border-border bg-fill-elevate shadow-[0_2px_10px_rgba(0,0,0,0.1)]"
+    >
+      <button
+        type="button"
+        aria-label="이전 장소"
+        disabled={index === 0}
+        onClick={() => moveTo(index - 1)}
+        className={STEP_BUTTON_CLASS}
+      >
+        <ChevronLeftIcon size={20} />
+      </button>
+      <p aria-live="polite" className="whitespace-nowrap text-text">
+        <span aria-hidden className="flex items-center gap-1">
+          <span className="text-label-l-emphasis">{current}</span>
+          <span className="text-label-m-regular">/</span>
+          <span className="text-label-l-emphasis">{total}</span>
+        </span>
+        <span className="sr-only">
+          전체 {total}곳 중 {current}번째 장소
+        </span>
+      </p>
+      <button
+        type="button"
+        aria-label="다음 장소"
+        disabled={index === total - 1}
+        onClick={() => moveTo(index + 1)}
+        className={STEP_BUTTON_CLASS}
+      >
+        <ChevronLeftIcon size={20} className="rotate-180" />
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/map/useWebPlanRouteMode.ts b/src/components/map/useWebPlanRouteMode.ts
new file mode 100644
index 00000000..d397c64d
--- /dev/null
+++ b/src/components/map/useWebPlanRouteMode.ts
@@ -0,0 +1,21 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import { useMobileView } from "@/contexts/MobileViewContext";
+import { isPlanPath } from "@/lib/layout/mainChromeLayoutWidth";
+import { usePlanMapFocusStore } from "@/stores/plan-map-focus-store";
+import { useSessionStore } from "@/stores/session-store";
+
+/**
+ * 웹 동선보기 — PC 일정 화면에서 이 방의 장소를 골라 그 일차 경로를 보는 중(장소 이동 스테퍼가 뜨는 상태).
+ * 지도 상단 검색창·카테고리·필터와 재검색 버튼을 숨긴다(Figma 6115:807). 모바일은 경로 보기(`routeView`)가 따로 숨긴다.
+ * 번호 핀은 다른 탭에서도 눌러 고를 수 있어 일정 화면일 때만 본다.
+ */
+export function useWebPlanRouteMode(): boolean {
+  const pathname = usePathname();
+  const { isMobileDevice } = useMobileView();
+  const roomId = useSessionStore((s) => s.currentRoomId?.trim() ?? "");
+  const focused = usePlanMapFocusStore((s) => roomId.length > 0 && s.focus?.roomId === roomId);
+  return focused && !isMobileDevice && isPlanPath(pathname ?? "");
+}
diff --git a/src/hooks/useMapDiscoverToolbarOffset.ts b/src/hooks/useMapDiscoverToolbarOffset.ts
index 200830da..894217f4 100644
--- a/src/hooks/useMapDiscoverToolbarOffset.ts
+++ b/src/hooks/useMapDiscoverToolbarOffset.ts
@@ -9,16 +9,19 @@ import {
 
 import {
   MAP_DETAIL_PANEL_BELOW_TOOLBAR_GAP_PX,
-  MAP_DETAIL_PANEL_TOP_FALLBACK_PX,
+  MAP_DETAIL_PANEL_MIN_TOP_PX,
 } from "@/lib/layout/mapDetailPanelLayout";
 
-/** Map 섹션 상단 ~ 툴바 하단 + gap → PlaceDetailPanel `top`(px) */
+/**
+ * Map 섹션 상단 ~ 툴바 하단 + gap → PlaceDetailPanel `top`(px).
+ * 필터 한 줄 아래가 최솟값이라, 툴바를 숨기면(`hidden`, 높이 0) 그 자리로 돌아온다
+ */
 export function useMapDiscoverToolbarOffset(mapSectionEl: HTMLElement | null): {
   setToolbarRef: RefCallback<HTMLElement>;
   panelTopPx: number;
 } {
   const [toolbarEl, setToolbarEl] = useState<HTMLElement | null>(null);
-  const [panelTopPx, setPanelTopPx] = useState(MAP_DETAIL_PANEL_TOP_FALLBACK_PX);
+  const [panelTopPx, setPanelTopPx] = useState(MAP_DETAIL_PANEL_MIN_TOP_PX);
 
   const setToolbarRef: RefCallback<HTMLElement> = useCallback((el) => {
     setToolbarEl(el);
@@ -32,10 +35,12 @@ export function useMapDiscoverToolbarOffset(mapSectionEl: HTMLElement | null): {
     const update = () => {
       const mapTop = mapSectionEl.getBoundingClientRect().top;
       const toolbarBottom = toolbarEl.getBoundingClientRect().bottom;
-      const next = Math.ceil(
-        toolbarBottom - mapTop + MAP_DETAIL_PANEL_BELOW_TOOLBAR_GAP_PX,
+      setPanelTopPx(
+        Math.max(
+          MAP_DETAIL_PANEL_MIN_TOP_PX,
+          Math.ceil(toolbarBottom - mapTop + MAP_DETAIL_PANEL_BELOW_TOOLBAR_GAP_PX),
+        ),
       );
-      if (next > 0) setPanelTopPx(next);
     };
 
     update();
diff --git a/src/lib/layout-tokens.ts b/src/lib/layout-tokens.ts
index d2cc50c7..ad2bd9f4 100644
--- a/src/lib/layout-tokens.ts
+++ b/src/lib/layout-tokens.ts
@@ -15,6 +15,9 @@ export const CHAT_PANEL_DOCKED_WIDTH = width.s1;
  */
 export const MAIN_MAP_MIN_WIDTH_PX = 380 as const;
 
+/** 데스크톱 장소 상세 패널이 가리는 지도 왼쪽 폭 — `MapWithDetailPanel`의 `left-2.5`(10) + `w-[360px]`와 같게 유지 */
+export const MAP_DETAIL_PANEL_COVER_WIDTH_PX = 370 as const;
+
 /** 데스크톱 준비물 상세 패널 폭 — `PackingPage.module.css`의 `.detail`과 같게 유지 */
 export const PACKING_DETAIL_WIDTH_PX = 440 as const;
 
@@ -64,6 +67,7 @@ export const PLAN_PLACE_CARD_TW = {
   /** 메모 버튼만 Button Base 좌우 여백이 4다(디자인) */
   actionButtonTrailing: "px-1",
   actionIcon: "shrink-0 text-primary",
+  actionIconEmpty: "shrink-0 text-text",
   editorModule:
     "relative flex w-full items-start gap-3 rounded-2xl bg-gray-100/70 px-4 py-3 text-body-s-regular mobile:text-body-xs-regular text-gray-900",
   editorSideLabelWrapper:
diff --git a/src/lib/layout/mapDetailPanelLayout.ts b/src/lib/layout/mapDetailPanelLayout.ts
index 04b9c064..4e9c0914 100644
--- a/src/lib/layout/mapDetailPanelLayout.ts
+++ b/src/lib/layout/mapDetailPanelLayout.ts
@@ -1,9 +1,12 @@
-/** 패널 `top` 실측 전·초기값 — 기존 `top-15`(3.75rem) */
-export const MAP_DETAIL_PANEL_TOP_FALLBACK_PX = 60;
-
 /** 툴바 하단 ~ 패널 상단 간격(px) */
 export const MAP_DETAIL_PANEL_BELOW_TOOLBAR_GAP_PX = 12;
 
+/**
+ * 패널 `top` 최솟값·초기값(px) — 필터 한 줄 아래 자리(`MapDiscoverToolbar`의 `top-3` 12 + `min-h-12` 48 + 간격).
+ * 필터를 숨겨도(웹 동선보기) 이 자리를 지키고, 필터가 두 줄로 늘어날 때만 그 아래로 내려간다
+ */
+export const MAP_DETAIL_PANEL_MIN_TOP_PX = 12 + 48 + MAP_DETAIL_PANEL_BELOW_TOOLBAR_GAP_PX;
+
 /** PlaceDetailPanel(`z-20`) 위 — 평점 드롭다운 열림 시 툴바 스택 */
 export const MAP_TOOLBAR_ELEVATED_Z_CLASS = "z-[25]" as const;
 
diff --git a/src/lib/maps.ts b/src/lib/maps.ts
index 5c70a3de..1d2ab5f4 100644
--- a/src/lib/maps.ts
+++ b/src/lib/maps.ts
@@ -165,6 +165,92 @@ export function panToWithinWorld(
   map.panTo(target);
 }
 
+/** `panTo`가 애니메이션으로 옮기는 최대 거리 — 지도 한 화면(가로·세로) 대비 거리, 실측 1.5화면 */
+const PAN_ANIMATION_MAX_SCREENS = 1.5;
+/** `panTo`와 같은 이동 시간 — 화면 대비 거리에 비례한다(실측 0.66화면 약 0.55초, 1.4화면 약 1.1초) */
+const PAN_ANIMATION_BASE_MS = 100;
+const PAN_ANIMATION_MS_PER_SCREEN = 690;
+
+/** 지도마다 진행 중인 이동 — 새 이동이 오면 멈추고, 같은 곳으로 가는 중이면 이어서 둔다 */
+const activeMoves = new WeakMap<google.maps.Map, { target: google.maps.LatLngLiteral; stop: () => void }>();
+
+function isSameLatLng(a: google.maps.LatLngLiteral, b: google.maps.LatLngLiteral): boolean {
+  return Math.abs(a.lat - b.lat) < 1e-9 && Math.abs(a.lng - b.lng) < 1e-9;
+}
+
+/**
+ * PC 지도 이동은 모두 이 함수로 한다. 돌려준 함수로 멈춘다.
+ * - 줌을 바꾸면 구글 이동(`panTo` + `setZoom`)을 그대로 쓴다. 래스터 지도는 줌을 소수로 못 바꿔 직접 그릴 수 없다.
+ * - 경도 180도를 넘거나 1.5화면보다 멀면 바로 옮긴다({@link panToWithinWorld}, `panTo`와 같은 기준).
+ * - 그 밖에는 매 프레임 `moveCamera`로 옮긴다. `panTo` 애니메이션 중에는 지도가 화면 밖에서 숨겨 둔 Advanced Marker를
+ *   다시 보이지 않아 멀리 있던 핀이 도착한 뒤에야 켜지는데, 프레임마다 바로 옮기면 화면에 들어오는 대로 보인다.
+ *   범위·시간은 `panTo`와 같고, 사용자가 끌거나 확대·축소하거나 다른 곳에서 지도를 옮기면 멈춘다.
+ */
+export function moveMapTo(
+  map: google.maps.Map,
+  target: google.maps.LatLngLiteral,
+  { zoom }: { zoom?: number } = {},
+): () => void {
+  const currentZoom = map.getZoom();
+  const zoomChanges = zoom !== undefined && zoom !== currentZoom;
+  const active = activeMoves.get(map);
+  if (active && !zoomChanges && isSameLatLng(active.target, target)) return active.stop;
+  active?.stop();
+
+  const center = map.getCenter();
+  const projection = map.getProjection();
+  const from = center && projection ? projection.fromLatLngToPoint(center) : null;
+  const to = projection ? projection.fromLatLngToPoint(target) : null;
+  if (zoomChanges || currentZoom === undefined || !center || !projection || !from || !to || Math.abs(target.lng - center.lng()) > 180) {
+    panToWithinWorld(map, target);
+    // 같은 줌으로 `setZoom`하면 `panTo` 애니메이션이 끊겨 바로 옮겨지므로 줌이 바뀔 때만 부른다
+    if (zoomChanges) map.setZoom(zoom);
+    return () => {};
+  }
+  const div = map.getDiv();
+  const scale = 2 ** currentZoom;
+  const screens = Math.hypot(
+    ((to.x - from.x) * scale) / div.clientWidth,
+    ((to.y - from.y) * scale) / div.clientHeight,
+  );
+  // 숨겨진 지도(크기 0)면 NaN·무한대라 함께 바로 옮긴다
+  if (!(screens <= PAN_ANIMATION_MAX_SCREENS)) {
+    map.setCenter(target);
+    return () => {};
+  }
+  const duration = PAN_ANIMATION_BASE_MS + PAN_ANIMATION_MS_PER_SCREEN * screens;
+  const start = performance.now();
+  let frame = 0;
+  // 마지막으로 옮긴 위치 — 다음 프레임에 지도가 여기서 벗어나 있으면 다른 곳에서 옮긴 것
+  let placed = from;
+  const move = { target, stop: () => {} };
+  const stop = () => {
+    cancelAnimationFrame(frame);
+    listeners.forEach((listener) => listener.remove());
+    if (activeMoves.get(map) === move) activeMoves.delete(map);
+  };
+  move.stop = stop;
+  const step = (now: number) => {
+    const current = map.getCenter();
+    const at = current ? projection.fromLatLngToPoint(current) : null;
+    if (!at || Math.hypot(at.x - placed.x, at.y - placed.y) * scale > 2) {
+      stop();
+      return;
+    }
+    const t = Math.min(1, (now - start) / duration);
+    // 거의 일정하게 가다 끝에서 멈춘다(`panTo`의 감속과 비슷하게). 화면에서 직선으로 가도록 지도 좌표로 나눈다
+    const eased = 1 - (1 - t) ** 1.5;
+    placed = t < 1 ? new google.maps.Point(from.x + (to.x - from.x) * eased, from.y + (to.y - from.y) * eased) : to;
+    map.moveCamera({ center: t < 1 ? (projection.fromPointToLatLng(placed) ?? target) : target });
+    if (t < 1) frame = requestAnimationFrame(step);
+    else stop();
+  };
+  const listeners = [map.addListener("dragstart", stop), map.addListener("zoom_changed", stop)];
+  activeMoves.set(map, move);
+  frame = requestAnimationFrame(step);
+  return stop;
+}
+
 /** Google Places 리소스 id(`places/…`) 접두를 제거한 레거시 id */
 export function normalizeGooglePlaceResourceId(id: string): string {
   const prefix = "places/";
diff --git a/src/stores/plan-map-focus-store.ts b/src/stores/plan-map-focus-store.ts
index dfcbcf5e..ece6e15b 100644
--- a/src/stores/plan-map-focus-store.ts
+++ b/src/stores/plan-map-focus-store.ts
@@ -1,5 +1,7 @@
 import { create } from "zustand";
 
+import type { PlanPlace } from "@/lib/plan/types";
+
 /**
  * 웹 일정에서 고른 장소 — 카드 강조, 지도 이동, 번호 핀 키우기, 그 일차 경로만 보기에 쓴다.
  * 장소 상세(선택 장소)와는 따로다: 일정 카드로 고르면 상세를 열지 않고(조회도 없음), 지도 핀으로 고르면 상세와 함께 고른다.
@@ -11,8 +13,8 @@ export type PlanMapFocus = {
   /** 지도에서 같은 장소의 일반 선택 핀 대신 번호 핀을 보이려고 쓴다 */
   googlePlaceId: string | null;
   location: { lat: number; lng: number } | null;
-  /** 어디서 골랐는지 — 지도 핀으로 고르면 일정 목록을 그 카드로 스크롤한다 */
-  source: "card" | "map";
+  /** 어디서 골랐는지 — 지도 핀·장소 이동 스테퍼로 고르면 일정 목록을 그 카드로 스크롤한다 */
+  source: "card" | "map" | "stepper";
   /** 같은 장소를 다시 골라도 지도를 다시 옮기도록 고를 때마다 바뀐다 */
   seq: number;
 };
@@ -28,3 +30,25 @@ export const usePlanMapFocusStore = create<PlanMapFocusState>((set, get) => ({
   focusPlace: (target) => set({ focus: { ...target, seq: (get().focus?.seq ?? 0) + 1 } }),
   clearFocus: () => set({ focus: null }),
 }));
+
+export const PLAN_MAP_FOCUS_NO_LOCATION_MESSAGE = "지도에 표시할 위치 정보가 없어요.";
+
+/** 일정 장소를 고를 대상으로 바꾼다 — 좌표가 없으면 `location`이 null이라 지도는 그대로 두고 카드만 강조한다 */
+export function planPlaceFocusTarget(
+  place: PlanPlace,
+  roomId: string,
+  scheduleId: number,
+  source: PlanMapFocus["source"],
+): Omit<PlanMapFocus, "seq"> | null {
+  if (typeof place.itemId !== "number") return null;
+  const loc = place.location;
+  const hasLocation = loc != null && Number.isFinite(loc.lat) && Number.isFinite(loc.lng);
+  return {
+    roomId,
+    scheduleId,
+    itemId: place.itemId,
+    googlePlaceId: place.googlePlaceId?.trim() || null,
+    location: hasLocation ? { lat: loc.lat, lng: loc.lng } : null,
+    source,
+  };
+}