diff --git a/src/app/layout/MainLayout.tsx b/src/app/layout/MainLayout.tsx
index 508ba677..a9e814ee 100644
--- a/src/app/layout/MainLayout.tsx
+++ b/src/app/layout/MainLayout.tsx
@@ -5,7 +5,9 @@ const MainLayout = () => {
   return (
     <div className="min-h-screen bg-white">
       <Header />
-      <Outlet />
+      <div className="mt-header-total">
+        <Outlet />
+      </div>
     </div>
   );
 };
diff --git a/src/app/styles/index.css b/src/app/styles/index.css
index 1fbead8c..f50729aa 100644
--- a/src/app/styles/index.css
+++ b/src/app/styles/index.css
@@ -94,7 +94,9 @@
   --radius-s: 8px;
 
   /* Layout */
+  --header-height: 92px;
   --spacing-header-content: 54px;
+  --spacing-header-total: calc(var(--header-height) + var(--spacing-header-content));
 }
 
 @layer base {
diff --git a/src/pages/buy-detail/ui/BuyDetailPage.tsx b/src/pages/buy-detail/ui/BuyDetailPage.tsx
index 21fd10b7..6aa8c88f 100644
--- a/src/pages/buy-detail/ui/BuyDetailPage.tsx
+++ b/src/pages/buy-detail/ui/BuyDetailPage.tsx
@@ -40,7 +40,7 @@ const BuyDetailPage = () => {
   }
 
   return (
-    <main className="mx-auto flex w-[1200px] flex-col items-start gap-[157px] pt-10">
+    <main className="md:px-xxxl mx-auto flex w-full max-w-[1200px] flex-col items-start gap-10 px-(--margin-l) pt-10 lg:gap-[157px] lg:px-0">
       <div className="flex flex-col items-start justify-center gap-[30px] self-stretch">
         <div className="grid gap-6 lg:grid-cols-[590px_590px]">
           <div className="h-[568px] w-[590px] overflow-hidden rounded-(--radius-l) bg-gray-50">
diff --git a/src/pages/buy/ui/BuyFilter.tsx b/src/pages/buy/ui/BuyFilter.tsx
new file mode 100644
index 00000000..ff03a431
--- /dev/null
+++ b/src/pages/buy/ui/BuyFilter.tsx
@@ -0,0 +1,136 @@
+import { Checkbox } from '@shared/ui/Checkbox';
+import { cn } from '@shared/utils/cn';
+import { useState, type ReactNode } from 'react';
+
+const FilterSection = ({ title, children }: { title: string; children: ReactNode }) => {
+  return (
+    <section className="flex flex-col gap-3 pb-4">
+      <h3 className="typo-body-2 text-gray-900">{title}</h3>
+      <div className="flex flex-col gap-2">{children}</div>
+      <div className="h-px w-full bg-gray-100" />
+    </section>
+  );
+};
+
+type FilterItem = {
+  id: string;
+  label: string;
+};
+
+export type BuyFilterProps = {
+  manufacturers: FilterItem[];
+  models: FilterItem[];
+  priceRanges: FilterItem[];
+  selectedManufacturers: string[];
+  selectedModels: string[];
+  selectedPrices: string[];
+  availableOnly: boolean;
+  showAllModels: boolean;
+  onToggleManufacturer: (id: string) => void;
+  onToggleModel: (id: string) => void;
+  onTogglePrice: (id: string) => void;
+  onSetAvailableOnly: (value: boolean) => void;
+  onSetShowAllModels: (value: boolean) => void;
+  onReset: () => void;
+  defaultModelCount?: number;
+};
+
+export const BuyFilter = ({
+  manufacturers,
+  models,
+  priceRanges,
+  selectedManufacturers,
+  selectedModels,
+  selectedPrices,
+  availableOnly,
+  showAllModels,
+  onToggleManufacturer,
+  onToggleModel,
+  onTogglePrice,
+  onSetAvailableOnly,
+  onSetShowAllModels,
+  onReset,
+  defaultModelCount = 8,
+}: BuyFilterProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <aside className="flex w-full shrink-0 flex-col items-start gap-[21px] lg:h-[702px] lg:w-[183px]">
+      {/* 모바일: 토글 버튼 */}
+      <button
+        type="button"
+        className="flex w-full cursor-pointer items-center justify-between self-stretch lg:hidden"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <h2 className="typo-body-2 text-gray-900">필터</h2>
+        <span className={cn('typo-caption-2 transition-transform', isOpen && 'rotate-180')}>▼</span>
+      </button>
+
+      {/* 데스크탑: 기존 헤더 */}
+      <div className="hidden items-center justify-between self-stretch lg:flex">
+        <h2 className="typo-body-2 text-gray-900">필터</h2>
+        <button type="button" className="typo-caption-2 font-medium text-gray-400" onClick={onReset}>
+          초기화
+        </button>
+      </div>
+
+      {/* 모바일: 토글 콘텐츠 / 데스크탑: 항상 표시 */}
+      <div className={cn('w-full flex-col gap-[21px] lg:flex', isOpen ? 'flex' : 'hidden')}>
+        {/* 모바일용 초기화 버튼 */}
+        <div className="flex items-center justify-end self-stretch lg:hidden">
+          <button type="button" className="typo-caption-2 font-medium text-gray-400" onClick={onReset}>
+            초기화
+          </button>
+        </div>
+
+        <Checkbox
+          label="구매가능만 보기"
+          checked={availableOnly}
+          onChange={(e) => onSetAvailableOnly(e.target.checked)}
+        />
+
+        <div className="flex flex-col gap-[21px] self-stretch">
+          <FilterSection title="제조사">
+            {manufacturers.map((item) => (
+              <Checkbox
+                key={item.id}
+                label={item.label}
+                checked={selectedManufacturers.includes(item.id)}
+                onChange={() => onToggleManufacturer(item.id)}
+              />
+            ))}
+          </FilterSection>
+
+          <FilterSection title="모델명">
+            {(showAllModels ? models : models.slice(0, defaultModelCount)).map((item) => (
+              <Checkbox
+                key={item.id}
+                label={item.label}
+                checked={selectedModels.includes(item.id)}
+                onChange={() => onToggleModel(item.id)}
+              />
+            ))}
+            <button
+              type="button"
+              className="typo-caption-1 mt-2 text-left text-green-700"
+              onClick={() => onSetShowAllModels(!showAllModels)}
+            >
+              {showAllModels ? '접기' : '더보기'}
+            </button>
+          </FilterSection>
+
+          <FilterSection title="가격">
+            {priceRanges.map((item) => (
+              <Checkbox
+                key={item.id}
+                label={item.label}
+                checked={selectedPrices.includes(item.id)}
+                onChange={() => onTogglePrice(item.id)}
+              />
+            ))}
+          </FilterSection>
+        </div>
+      </div>
+    </aside>
+  );
+};
diff --git a/src/pages/buy/ui/BuyPage.tsx b/src/pages/buy/ui/BuyPage.tsx
index fd37c0f2..38e72a71 100644
--- a/src/pages/buy/ui/BuyPage.tsx
+++ b/src/pages/buy/ui/BuyPage.tsx
@@ -1,23 +1,12 @@
 import { useBuyFilter } from '@pages/buy/model/useBuyFilter';
+import { BuyFilter } from '@pages/buy/ui/BuyFilter';
 import { CloseIcon } from '@shared/assets/icons';
 import { ROUTES } from '@shared/constants';
 import { MANUFACTURERS, MODELS, PRICE_RANGES } from '@shared/mocks/data/buy';
 import { Card } from '@shared/ui/Card';
-import { Checkbox } from '@shared/ui/Checkbox';
 import { SearchBar } from '@shared/ui/SearchBar';
 import { cn } from '@shared/utils/cn';
 import { Link } from 'react-router';
-import type { ReactNode } from 'react';
-
-const FilterSection = ({ title, children }: { title: string; children: ReactNode }) => {
-  return (
-    <section className="flex flex-col gap-3 pb-4">
-      <h3 className="typo-body-2 text-gray-900">{title}</h3>
-      <div className="flex flex-col gap-2">{children}</div>
-      <div className="h-px w-full bg-gray-100" />
-    </section>
-  );
-};
 
 const FilterChip = ({ label, onRemove }: { label: string; onRemove: () => void }) => {
   return (
@@ -32,8 +21,6 @@ const FilterChip = ({ label, onRemove }: { label: string; onRemove: () => void }
   );
 };
 
-const DEFAULT_MODEL_COUNT = 8;
-
 const BuyPage = () => {
   const {
     query,
@@ -57,7 +44,7 @@ const BuyPage = () => {
   const showEmpty = filteredItems.length === 0;
 
   return (
-    <main className="mx-auto flex w-[1200px] flex-col items-center gap-[68px]">
+    <main className="md:px-xxxl mx-auto flex w-full max-w-[1200px] flex-col items-center gap-6 px-(--margin-l) md:gap-10 lg:gap-[68px] lg:px-0">
       <SearchBar
         placeholder="어떤 제품을 찾으시나요?"
         onSearch={(value) => setQuery(value)}
@@ -66,76 +53,36 @@ const BuyPage = () => {
       />
 
       <div className="flex w-full flex-col gap-8 lg:flex-row lg:gap-[22px]">
-        <aside className="flex w-full shrink-0 flex-col items-start gap-[21px] lg:h-[702px] lg:w-[183px]">
-          <div className="flex items-center justify-between self-stretch">
-            <h2 className="typo-body-2 text-gray-900">필터</h2>
-            <button type="button" className="typo-caption-2 font-medium text-gray-400" onClick={resetFilters}>
-              초기화
-            </button>
-          </div>
-
-          <Checkbox
-            label="구매가능만 보기"
-            checked={availableOnly}
-            onChange={(e) => setAvailableOnly(e.target.checked)}
-          />
-
-          <div className="flex flex-col gap-[21px] self-stretch">
-            <FilterSection title="제조사">
-              {MANUFACTURERS.map((item) => (
-                <Checkbox
-                  key={item.id}
-                  label={item.label}
-                  checked={selectedManufacturers.includes(item.id)}
-                  onChange={() => toggleManufacturer(item.id)}
-                />
-              ))}
-            </FilterSection>
-
-            <FilterSection title="모델명">
-              {(showAllModels ? MODELS : MODELS.slice(0, DEFAULT_MODEL_COUNT)).map((item) => (
-                <Checkbox
-                  key={item.id}
-                  label={item.label}
-                  checked={selectedModels.includes(item.id)}
-                  onChange={() => toggleModel(item.id)}
-                />
-              ))}
-              <button
-                type="button"
-                className="typo-caption-1 mt-2 text-left text-green-700"
-                onClick={() => setShowAllModels((prev) => !prev)}
-              >
-                {showAllModels ? '접기' : '더보기'}
-              </button>
-            </FilterSection>
-
-            <FilterSection title="가격">
-              {PRICE_RANGES.map((item) => (
-                <Checkbox
-                  key={item.id}
-                  label={item.label}
-                  checked={selectedPrices.includes(item.id)}
-                  onChange={() => togglePrice(item.id)}
-                />
-              ))}
-            </FilterSection>
-          </div>
-        </aside>
+        <BuyFilter
+          manufacturers={MANUFACTURERS}
+          models={MODELS}
+          priceRanges={PRICE_RANGES}
+          selectedManufacturers={selectedManufacturers}
+          selectedModels={selectedModels}
+          selectedPrices={selectedPrices}
+          availableOnly={availableOnly}
+          showAllModels={showAllModels}
+          onToggleManufacturer={toggleManufacturer}
+          onToggleModel={toggleModel}
+          onTogglePrice={togglePrice}
+          onSetAvailableOnly={setAvailableOnly}
+          onSetShowAllModels={setShowAllModels}
+          onReset={resetFilters}
+        />
 
-        <section className="flex w-[1008px] flex-col items-start gap-[17px]">
-          <div className="min-h-xxl flex items-start gap-[18px] self-stretch">
+        <section className="flex w-full flex-1 flex-col items-start gap-[17px]">
+          <div className="min-h-xxl flex flex-wrap items-start gap-2 self-stretch md:gap-[18px]">
             {activeChips.map((chip) => (
               <FilterChip key={`${chip.type}-${chip.id}`} label={chip.label} onRemove={() => removeChip(chip)} />
             ))}
           </div>
 
           {showEmpty ? (
-            <div className="rounded-m flex h-[992px] w-full items-center justify-center bg-gray-50 text-gray-500">
+            <div className="rounded-m flex min-h-[400px] w-full flex-1 items-center justify-center bg-gray-50 text-gray-500 lg:min-h-[992px]">
               관련된 상품이 없어요.
             </div>
           ) : (
-            <div className="lg:gap-xl grid w-full grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-[repeat(5,180px)]">
+            <div className="lg:gap-xl grid w-full grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-5 md:grid-cols-4 md:gap-6 lg:grid-cols-5">
               {filteredItems.map((item) => (
                 <Link key={item.id} to={`${ROUTES.BUY}/${item.id}`} className="block focus-visible:outline-none">
                   <Card
diff --git a/src/pages/chatbot/ui/ChatMessageList.tsx b/src/pages/chatbot/ui/ChatMessageList.tsx
index 6718a55a..27a8d04c 100644
--- a/src/pages/chatbot/ui/ChatMessageList.tsx
+++ b/src/pages/chatbot/ui/ChatMessageList.tsx
@@ -18,7 +18,7 @@ export const ChatMessageList = ({ messages }: ChatMessageListProps) => {
           return (
             <div key={message.id} className="flex w-full justify-start">
               {message.status === 'loading' ? (
-                <div className="inline-flex min-h-[60px] items-center justify-start gap-[var(--spacing-xxxs)] rounded-(--radius-l) bg-gray-100 px-[31px] py-[18px]">
+                <div className="gap-xxxs inline-flex min-h-[60px] items-center justify-start rounded-(--radius-l) bg-gray-100 px-[31px] py-[18px]">
                   <span className="h-[6px] w-[6px] animate-bounce rounded-full bg-gray-400 [animation-delay:-0.2s]" />
                   <span className="h-[6px] w-[6px] animate-bounce rounded-full bg-gray-400 [animation-delay:-0.1s]" />
                   <span className="h-[6px] w-[6px] animate-bounce rounded-full bg-gray-400" />
diff --git a/src/pages/chatbot/ui/ChatbotPage.tsx b/src/pages/chatbot/ui/ChatbotPage.tsx
index 88e48cab..180d37a4 100644
--- a/src/pages/chatbot/ui/ChatbotPage.tsx
+++ b/src/pages/chatbot/ui/ChatbotPage.tsx
@@ -13,7 +13,7 @@ const INITIAL_BOT_MESSAGE = `루핏이 예상 수리비를 빠르게 계산해
 
 보험/케어 가입 여부: 예) 애플케어 O/X, 통신사 보험 O/X
 
-가능하면\u00A0원하는\u00A0방향도\u00A0한\u00A0줄로\u00A0적어주세요:\u00A0“정품\u00A0우선”\u00A0/\u00A0“최대한\u00A0저렴하\u2060게”\u00A0/\u00A0“빨리”
+가능하면 원하는 방향도 한 줄로 적어주세요: "정품 우선" / "최대한 저렴하게" / "빨리"
 
 예시) “아이폰 15, 액정 깨짐, 애플케어 X, 최대한 저렴하게”
 
@@ -80,18 +80,18 @@ const ChatbotPage = () => {
   return (
     <div className="w-full bg-white">
       <div className="mx-auto flex min-h-screen w-full max-w-[1440px] flex-col bg-white xl:min-h-[1024px]">
-        <main className="flex flex-1 flex-col px-[var(--margin-l)] md:px-[var(--spacing-xxxl)] xl:px-0">
+        <main className="md:px-xxxl flex flex-1 flex-col px-(--margin-l) xl:px-0">
           <section className="mx-auto flex w-full max-w-full flex-col items-start gap-[19px] self-stretch pb-[140px] xl:max-w-[1200px]">
-            <div className="flex items-center gap-[var(--spacing-m)] md:gap-[var(--spacing-xl)] xl:gap-[36px]">
-              <div className="flex h-[64px] w-[64px] flex-shrink-0 flex-col items-center justify-center gap-[10px] rounded-full bg-black pt-[var(--padding-xl)] pr-[10px] pb-[var(--padding-xl)] pl-[14px] md:h-[72px] md:w-[72px] md:pt-[26px] md:pr-[11px] md:pb-[28px] md:pl-[15px] xl:h-[80px] xl:w-[80px] xl:pt-[31px] xl:pr-[13px] xl:pb-[33px] xl:pl-[17px]">
-                <Logo4 className="h-[80px] w-[80px] flex-shrink-0" aria-hidden="true" />
+            <div className="gap-m md:gap-xl flex items-center xl:gap-[36px]">
+              <div className="gap-xxs pt-xl pr-xxs pb-xl flex h-[64px] w-[64px] shrink-0 flex-col items-center justify-center rounded-full bg-black pl-[14px] md:h-[72px] md:w-[72px] md:pt-[26px] md:pr-[11px] md:pb-[28px] md:pl-[15px] xl:h-[80px] xl:w-[80px] xl:pt-[31px] xl:pr-[13px] xl:pb-[33px] xl:pl-[17px]">
+                <Logo4 className="h-[80px] w-[80px] shrink-0" aria-hidden="true" />
               </div>
               <h1 className="typo-title-2 text-black">루핏봇</h1>
             </div>
             <ChatMessageList messages={messages} />
             <div ref={endOfMessagesRef} className="scroll-mb-[96px]" />
           </section>
-          <div className="fixed inset-x-0 bottom-[var(--margin-s)] z-50 px-[var(--margin-l)] md:px-[var(--spacing-xxxl)] xl:px-[120px]">
+          <div className="md:px-xxxl fixed inset-x-0 bottom-0 z-50 bg-white px-(--margin-l) pt-4 pb-(--margin-s) xl:px-[120px]">
             <div className="mx-auto w-full max-w-full xl:max-w-[1200px]">
               <ChatInput
                 placeholder="무슨 견적을 원하시나요?"
diff --git a/src/pages/main/ui/CarouselSlides.tsx b/src/pages/main/ui/CarouselSlides.tsx
index 4c029bfe..6a5fc9e7 100644
--- a/src/pages/main/ui/CarouselSlides.tsx
+++ b/src/pages/main/ui/CarouselSlides.tsx
@@ -10,7 +10,14 @@ export const CAROUSEL_SLIDES = [
   },
   {
     id: 2,
-    content: <CarouselImageSlide imageSrc={Carousel2Image} title="중고폰 구매" subtitle="합리적인 가격, 검증된 상품" />,
+    content: (
+      <CarouselImageSlide
+        imageSrc={Carousel2Image}
+        title="중고폰 구매"
+        subtitle="합리적인 가격, 검증된 상품"
+        href="/buy"
+      />
+    ),
   },
   {
     id: 3,
@@ -19,13 +26,19 @@ export const CAROUSEL_SLIDES = [
         imageSrc={Carousel3Image}
         title="나의 폰 판매"
         subtitle="나는 쓰지 않는 폰, 다른 사람은 쓰기 좋은 폰"
+        href="/sell"
       />
     ),
   },
   {
     id: 4,
     content: (
-      <CarouselImageSlide imageSrc={Carousel4Image} title="수리점 찾기" subtitle="내 집 근처 수리점 어디에 있을까?" />
+      <CarouselImageSlide
+        imageSrc={Carousel4Image}
+        title="수리점 찾기"
+        subtitle="내 집 근처 수리점 어디에 있을까?"
+        href="/repair"
+      />
     ),
   },
   {
diff --git a/src/pages/main/ui/MainPage.tsx b/src/pages/main/ui/MainPage.tsx
index b86095e3..260eb5db 100644
--- a/src/pages/main/ui/MainPage.tsx
+++ b/src/pages/main/ui/MainPage.tsx
@@ -11,7 +11,7 @@ const MainPage = () => {
   const navigate = useNavigate();
 
   return (
-    <main className="flex w-full flex-col items-center gap-[68px] px-4 pb-24">
+    <main className="md:px-xxxl flex w-full flex-col items-center gap-6 px-(--margin-l) pb-24 md:gap-10 lg:gap-[68px] lg:px-0">
       <section className="h-[317px] w-full max-w-[1200px]" aria-label="메인 슬로건 영역">
         <ClientOnly>
           <Carousel3D slides={CAROUSEL_SLIDES} />
diff --git a/src/pages/mypage/ui/CommonTabs.tsx b/src/pages/mypage/ui/CommonTabs.tsx
index 841bcf98..958f244d 100644
--- a/src/pages/mypage/ui/CommonTabs.tsx
+++ b/src/pages/mypage/ui/CommonTabs.tsx
@@ -35,14 +35,14 @@ export const CommonTabs = <TId extends string>({
     <section className="mt-10">
       <h2 className="typo-title-3 text-gray-900">{title}</h2>
       <div className="mt-6 border-b border-gray-200">
-        <div className={cn('grid', gridClassName)}>
+        <div className={cn('items-center self-stretch', gridClassName)}>
           {tabs.map((tab) => (
             <button
               key={tab.id}
               type="button"
               onClick={() => onChange(tab.id)}
               className={cn(
-                'relative flex flex-col items-center gap-1 pb-4 text-center transition-colors',
+                'relative flex cursor-pointer flex-col items-center gap-1 pb-4 text-center transition-colors',
                 itemClassName,
                 activeId === tab.id
                   ? 'text-gray-900 after:absolute after:-bottom-px after:left-1/2 after:h-0.5 after:w-29.5 after:-translate-x-1/2 after:bg-black'
diff --git a/src/pages/mypage/ui/MyPage.tsx b/src/pages/mypage/ui/MyPage.tsx
index 363b6bb1..13c8d144 100644
--- a/src/pages/mypage/ui/MyPage.tsx
+++ b/src/pages/mypage/ui/MyPage.tsx
@@ -66,12 +66,12 @@ const MyPage = () => {
               tabs={favoriteTabs}
               activeId={favoriteCategory}
               onChange={setFavoriteCategory}
-              gridClassName="w-full grid-cols-2 px-[434.5px]"
+              gridClassName="w-full grid grid-cols-2 lg:flex lg:justify-center lg:gap-[261px] lg:px-[434.5px]"
               labelClassName="typo-body-1"
               countClassName="typo-title-3"
               countActiveClassName="text-green-700"
               countInactiveClassName="text-gray-900"
-              itemClassName="first:justify-self-start last:justify-self-end"
+              itemClassName="lg:first:justify-self-start lg:last:justify-self-end"
             />
             {favoriteCategory === 'product' ? (
               <TradeItemList items={favoriteProductItems} emptyMessage="찜한 목록이 아직 없어요." />
@@ -91,12 +91,12 @@ const MyPage = () => {
               tabs={currentStatusTabs}
               activeId={currentStatus}
               onChange={handleStatusChange}
-              gridClassName="w-full grid-cols-3 px-[276px]"
+              gridClassName="w-full grid grid-cols-3 lg:flex lg:justify-center lg:gap-[261px] lg:px-[276px]"
               labelClassName="typo-body-1"
               countClassName="typo-title-3"
               countActiveClassName="text-green-700"
               countInactiveClassName="text-gray-900"
-              itemClassName="first:justify-self-start last:justify-self-end"
+              itemClassName="lg:first:justify-self-start lg:last:justify-self-end"
             />
             <TradeItemList items={currentFilteredItems} emptyMessage="선택한 조건에 해당하는 상품은 없어요." />
           </>
diff --git a/src/pages/mypage/ui/MyPageTabs.tsx b/src/pages/mypage/ui/MyPageTabs.tsx
index e2d8d998..e9bc4ddf 100644
--- a/src/pages/mypage/ui/MyPageTabs.tsx
+++ b/src/pages/mypage/ui/MyPageTabs.tsx
@@ -21,7 +21,7 @@ export const MyPageTabs = <TId extends string>({ tabs, activeId, onChange }: MyP
             type="button"
             onClick={() => onChange(tab.id)}
             className={cn(
-              'flex items-center justify-center transition-colors',
+              'flex cursor-pointer items-center justify-center transition-colors',
               activeId === tab.id ? 'text-gray-900' : 'text-gray-500'
             )}
             aria-pressed={activeId === tab.id}
diff --git a/src/pages/mypage/ui/PageContainer.tsx b/src/pages/mypage/ui/PageContainer.tsx
index c5fcfb14..ce7e9f47 100644
--- a/src/pages/mypage/ui/PageContainer.tsx
+++ b/src/pages/mypage/ui/PageContainer.tsx
@@ -2,5 +2,10 @@ import { cn } from '@shared/utils/cn';
 import type { ComponentPropsWithoutRef } from 'react';
 
 export const PageContainer = ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => {
-  return <div className={cn('mx-auto w-full max-w-300 px-4 pt-10 pb-20 md:px-8', className)} {...props} />;
+  return (
+    <div
+      className={cn('md:px-xxxl mx-auto w-full max-w-300 px-(--margin-l) pt-10 pb-20 lg:px-0', className)}
+      {...props}
+    />
+  );
 };
diff --git a/src/pages/repair/model/useRepairMap.ts b/src/pages/repair/model/useRepairMap.ts
index 89d38f8b..9db9e91d 100644
--- a/src/pages/repair/model/useRepairMap.ts
+++ b/src/pages/repair/model/useRepairMap.ts
@@ -3,10 +3,12 @@ import { buildKakaoRouteUrl, getKakaoMaps } from './kakaoMapUtils';
 import type { KakaoMapInstance, KakaoMarker, KakaoOverlay, RepairShop } from './types';
 
 const buildOverlayContent = (shop: RepairShop) => {
-  const phoneLink = shop.phone ? `<a href="tel:${shop.phone}">전화</a>` : '';
+  const phoneDisplay = shop.phone
+    ? `<a href="tel:${shop.phone}" style="color:var(--color-green-800); text-decoration:none;">${shop.phone}</a>`
+    : '';
   const routeLink = buildKakaoRouteUrl(shop.name, shop.lat, shop.lng);
   const detailLink = shop.placeUrl ? `<a href="${shop.placeUrl}" target="_blank" rel="noreferrer">상세</a>` : '';
-  const actions = [phoneLink, detailLink, `<a href="${routeLink}" target="_blank" rel="noreferrer">길찾기</a>`]
+  const actions = [detailLink, `<a href="${routeLink}" target="_blank" rel="noreferrer">길찾기</a>`]
     .filter(Boolean)
     .join(' · ');
 
@@ -14,7 +16,8 @@ const buildOverlayContent = (shop: RepairShop) => {
     <div style="position:relative; transform:translateY(-8px);">
       <div style="padding:var(--padding-m) var(--spacing-s); font-size:12px; line-height:1.4; width:260px; background:var(--color-green-100); border-radius:var(--radius-m); border:2px solid var(--color-green-700); box-shadow:0 8px 20px rgba(17,203,176,0.18);">
         <div style="font-weight:700; margin-bottom:var(--spacing-xxxxs); word-break:break-word; color:var(--color-green-900);">${shop.name}</div>
-        <div style="color:var(--color-green-800); margin-bottom:6px; word-break:break-word;">${shop.address}</div>
+        <div style="color:var(--color-green-800); margin-bottom:4px; word-break:break-word;">${shop.address}</div>
+        ${phoneDisplay ? `<div style="color:var(--color-green-800); margin-bottom:6px; word-break:break-word;">${phoneDisplay}</div>` : '<div style="margin-bottom:6px;"></div>'}
         <div style="color:var(--color-green-900); font-weight:600; word-break:keep-all;">${actions}</div>
       </div>
       <div style="position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid var(--color-green-100);"></div>
diff --git a/src/pages/repair/model/useRepairSearch.ts b/src/pages/repair/model/useRepairSearch.ts
index 1291b146..78063430 100644
--- a/src/pages/repair/model/useRepairSearch.ts
+++ b/src/pages/repair/model/useRepairSearch.ts
@@ -16,7 +16,7 @@ const SEARCH_KEYWORDS = [
   '휴대폰 사설 수리',
 ];
 
-const SEARCH_RADIUS_METERS = 5000;
+const SEARCH_RADIUS_METERS = 2500;
 
 export const useRepairSearch = () => {
   const { mapRef, isMapReady, setCenter, setMarkers, clearMarkers, openOverlayForShop } = useRepairMap();
diff --git a/src/pages/repair/ui/RepairPage.tsx b/src/pages/repair/ui/RepairPage.tsx
index 2663fcd7..5d9d2592 100644
--- a/src/pages/repair/ui/RepairPage.tsx
+++ b/src/pages/repair/ui/RepairPage.tsx
@@ -44,7 +44,7 @@ const RepairPage = () => {
   };
 
   return (
-    <main className="mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[47px] px-4 pt-8 pb-16 md:pt-[47px]">
+    <main className="md:px-xxxl mx-auto flex w-full max-w-[1440px] flex-col items-center gap-6 px-(--margin-l) md:gap-8 lg:gap-[45px] lg:px-0">
       <section
         className={cn(
           containerClass,
@@ -62,14 +62,14 @@ const RepairPage = () => {
         </div>
       </section>
 
-      <section className={cn(containerClass, 'flex flex-col gap-[45px]')} aria-label="수리점 목록">
+      <section className={cn(containerClass, 'flex flex-col gap-4')} aria-label="수리점 목록">
         <div className="flex items-center justify-between">
           <span className="typo-title-2 text-black">총 {shops.length}개</span>
           <button type="button" className="typo-body-1 text-gray-300">
             거리순
           </button>
         </div>
-        <div className="flex flex-col gap-6">{renderShopList()}</div>
+        <div className="flex flex-col items-start gap-5">{renderShopList()}</div>
       </section>
     </main>
   );
diff --git a/src/pages/repair/ui/RepairShopCard.tsx b/src/pages/repair/ui/RepairShopCard.tsx
index 722fce22..9163dbda 100644
--- a/src/pages/repair/ui/RepairShopCard.tsx
+++ b/src/pages/repair/ui/RepairShopCard.tsx
@@ -10,7 +10,6 @@ export type RepairShopCardProps = {
   lat?: number;
   lng?: number;
   placeUrl?: string;
-  onContact?: () => void;
   onFindRoute?: () => void;
   onSelect?: () => void;
 };
@@ -27,19 +26,9 @@ export const RepairShopCard = ({
   lat,
   lng,
   placeUrl,
-  onContact,
   onFindRoute,
   onSelect,
 }: RepairShopCardProps) => {
-  const handleContact = () => {
-    if (onContact) {
-      return onContact();
-    }
-    if (phone) {
-      window.location.href = `tel:${phone}`;
-    }
-  };
-
   const handleFindRoute = () => {
     if (onFindRoute) {
       return onFindRoute();
@@ -66,8 +55,15 @@ export const RepairShopCard = ({
       className="flex w-full flex-col items-start justify-between gap-6 rounded-(--radius-l) bg-gray-900 px-6 py-8 text-left md:flex-row md:items-center md:gap-[31px] md:px-[42px] md:py-[44px]"
     >
       <div className="flex flex-1 flex-col items-start gap-[5px]">
-        <span className="text-l leading-m font-bold text-white">{name}</span>
-        <span className="text-m leading-s text-brand-primary font-semibold">{address}</span>
+        <span className="typo-title-3 text-white">{name}</span>
+        <span className="typo-body-2 text-brand-primary">{address}</span>
+        {phone ? (
+          <a href={`tel:${phone}`} onClick={(e) => e.stopPropagation()} className="typo-body-2 text-brand-primary">
+            {phone}
+          </a>
+        ) : (
+          <span className="typo-body-2">&nbsp;</span>
+        )}
       </div>
 
       <div className="flex w-full items-center justify-between gap-4 md:w-auto md:gap-[31px]">
@@ -76,16 +72,6 @@ export const RepairShopCard = ({
           <Button
             variant="light"
             size="full"
-            onClick={(e) => {
-              e.stopPropagation();
-              handleContact();
-            }}
-          >
-            연락하기
-          </Button>
-          <Button
-            variant="lightOutline"
-            size="full"
             onClick={(e) => {
               e.stopPropagation();
               handleFindRoute();
diff --git a/src/pages/sell-confirm/ui/SellConfirmPage.tsx b/src/pages/sell-confirm/ui/SellConfirmPage.tsx
index 6872c005..b280479c 100644
--- a/src/pages/sell-confirm/ui/SellConfirmPage.tsx
+++ b/src/pages/sell-confirm/ui/SellConfirmPage.tsx
@@ -55,7 +55,7 @@ const SellConfirmPage = () => {
 
   return (
     <div className="w-full bg-white">
-      <div className="mx-auto flex min-h-screen w-full max-w-[1440px] flex-col items-center bg-white px-4">
+      <div className="md:px-xxxl mx-auto flex min-h-screen w-full max-w-[1440px] flex-col items-center bg-white px-(--margin-l) lg:px-0">
         <main className="gap-l mt-[90px] flex items-start">
           {showImage ? (
             <img
diff --git a/src/pages/sell/ui/SellPage.tsx b/src/pages/sell/ui/SellPage.tsx
index bc5278d6..bea53aee 100644
--- a/src/pages/sell/ui/SellPage.tsx
+++ b/src/pages/sell/ui/SellPage.tsx
@@ -4,7 +4,7 @@ import { SellPageHeader } from '@pages/sell/ui/SellPageHeader';
 const SellPage = () => {
   return (
     <div className="w-full bg-white">
-      <div className="mx-auto min-h-screen w-full max-w-[1440px] bg-white px-4 pb-[112px] md:px-[120px]">
+      <div className="md:px-xxxl mx-auto min-h-screen w-full max-w-[1440px] bg-white px-(--margin-l) lg:px-[120px]">
         <main className="flex flex-col">
           <SellPageHeader />
           <SellForm />
diff --git a/src/pages/seller-profile/ui/SellerProfilePage.tsx b/src/pages/seller-profile/ui/SellerProfilePage.tsx
index 62814011..0c1b1773 100644
--- a/src/pages/seller-profile/ui/SellerProfilePage.tsx
+++ b/src/pages/seller-profile/ui/SellerProfilePage.tsx
@@ -6,7 +6,7 @@ const SellerProfilePage = () => {
   const productRows = chunkArray(MOCK_SELLER_PRODUCTS, 4);
 
   return (
-    <main className="mx-auto flex w-full max-w-[1200px] flex-col items-start gap-[93px] px-4 md:px-0">
+    <main className="md:px-xxxl mx-auto flex w-full max-w-[1200px] flex-col items-start gap-10 px-(--margin-l) lg:gap-[93px] lg:px-0">
       <section className="flex flex-col items-start justify-center gap-[30px] self-stretch">
         <div className="flex w-[184px] items-center gap-[23px]">
           <img src="/profile.jpg" alt="판매자 프로필" className="h-20 w-20 shrink-0 rounded-full object-cover" />
diff --git a/src/shared/assets/icons/common/chatbot.svg b/src/shared/assets/icons/common/chatbot.svg
new file mode 100644
index 00000000..8fda76ea
--- /dev/null
+++ b/src/shared/assets/icons/common/chatbot.svg
@@ -0,0 +1,59 @@
+<svg width="47" height="38" viewBox="0 0 47 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1774_6321)">
+<path d="M6.60703 28.6507C10.256 28.6507 13.2141 25.984 13.2141 22.6944C13.2141 19.4048 10.256 16.738 6.60703 16.738C2.95807 16.738 0 19.4048 0 22.6944C0 25.984 2.95807 28.6507 6.60703 28.6507Z" fill="url(#paint0_linear_1774_6321)"/>
+<path d="M40.3932 28.6507C44.0421 28.6507 47.0002 25.984 47.0002 22.6944C47.0002 19.4048 44.0421 16.738 40.3932 16.738C36.7442 16.738 33.7861 19.4048 33.7861 22.6944C33.7861 25.984 36.7442 28.6507 40.3932 28.6507Z" fill="url(#paint1_linear_1774_6321)"/>
+<path d="M23.7254 38C34.6723 38 43.5465 31.1812 43.5465 22.7698C43.5465 14.3584 34.6723 7.53967 23.7254 7.53967C12.7785 7.53967 3.9043 14.3584 3.9043 22.7698C3.9043 31.1812 12.7785 38 23.7254 38Z" fill="url(#paint2_linear_1774_6321)"/>
+<path d="M8.06543 8.13371L11.8195 5.95715C11.7762 6.21896 11.6498 7.17588 12.2186 8.16533C12.7875 9.15479 13.6763 9.52386 13.9234 9.61655L10.1693 11.7931C10.1962 11.474 10.2302 10.5743 9.68855 9.63225C9.14694 8.69017 8.3541 8.26985 8.06543 8.13371Z" fill="black"/>
+<path d="M35.3697 5.9939L39.1645 8.09798C38.9189 8.19597 38.0376 8.58147 37.4877 9.58167C36.9378 10.5819 37.0821 11.5367 37.1306 11.7971L33.3359 9.69302C33.6218 9.55136 34.4066 9.1159 34.9302 8.16359C35.4538 7.21128 35.4027 6.31243 35.3697 5.9939Z" fill="black"/>
+<path d="M5.63176 6.46142C6.5857 8.12064 8.69379 8.69182 10.3403 7.73719C11.9868 6.78255 12.5483 4.66359 11.5944 3.00437C10.6404 1.34513 8.53235 0.773945 6.88584 1.72859C5.2393 2.68322 4.67784 4.80217 5.63176 6.46142Z" fill="url(#paint3_linear_1774_6321)"/>
+<path d="M35.5378 3.0369C34.6155 4.71413 35.2172 6.82193 36.8818 7.74478C38.5461 8.66764 40.643 8.0561 41.5651 6.37885C42.4872 4.70162 41.8855 2.59382 40.2212 1.67097C38.5568 0.74811 36.46 1.35966 35.5378 3.0369Z" fill="url(#paint4_linear_1774_6321)"/>
+<path d="M23.7249 36.0396C31.6863 36.0396 38.1402 31.0437 38.1402 24.8809C38.1402 18.7181 31.6863 13.7222 23.7249 13.7222C15.7635 13.7222 9.30957 18.7181 9.30957 24.8809C9.30957 31.0437 15.7635 36.0396 23.7249 36.0396Z" fill="url(#paint5_linear_1774_6321)"/>
+<path d="M18.6195 28.1984C19.5318 28.1984 20.2713 27.152 20.2713 25.8611C20.2713 24.5702 19.5318 23.5238 18.6195 23.5238C17.7073 23.5238 16.9678 24.5702 16.9678 25.8611C16.9678 27.152 17.7073 28.1984 18.6195 28.1984Z" fill="url(#paint6_linear_1774_6321)"/>
+<path d="M28.2299 28.1984C29.1421 28.1984 29.8816 27.152 29.8816 25.8611C29.8816 24.5702 29.1421 23.5238 28.2299 23.5238C27.3176 23.5238 26.5781 24.5702 26.5781 25.8611C26.5781 27.152 27.3176 28.1984 28.2299 28.1984Z" fill="url(#paint7_linear_1774_6321)"/>
+<path d="M19.3706 27.746C19.5366 27.746 19.671 27.611 19.671 27.4444C19.671 27.2778 19.5366 27.1428 19.3706 27.1428C19.2047 27.1428 19.0703 27.2778 19.0703 27.4444C19.0703 27.611 19.2047 27.746 19.3706 27.746Z" fill="#13FFD0"/>
+<path d="M28.8306 27.8969C28.9965 27.8969 29.1309 27.7619 29.1309 27.5953C29.1309 27.4287 28.9965 27.2937 28.8306 27.2937C28.6647 27.2937 28.5303 27.4287 28.5303 27.5953C28.5303 27.7619 28.6647 27.8969 28.8306 27.8969Z" fill="#13FFD0"/>
+<path d="M18.6198 21.1111C19.7808 21.1111 20.7221 20.7398 20.7221 20.2818C20.7221 19.8237 19.7808 19.4524 18.6198 19.4524C17.4588 19.4524 16.5176 19.8237 16.5176 20.2818C16.5176 20.7398 17.4588 21.1111 18.6198 21.1111Z" fill="#B5FFE6"/>
+<path d="M28.8308 21.1111C29.9918 21.1111 30.933 20.7398 30.933 20.2818C30.933 19.8237 29.9918 19.4524 28.8308 19.4524C27.6697 19.4524 26.7285 19.8237 26.7285 20.2818C26.7285 20.7398 27.6697 21.1111 28.8308 21.1111Z" fill="#B5FFE6"/>
+<path d="M33.2703 27.7361L31.9201 27.6771C30.8845 27.6319 30.0084 28.4383 29.9634 29.4784C29.9183 30.5184 30.7214 31.3982 31.757 31.4434L33.1072 31.5024C34.1428 31.5476 35.0189 30.7412 35.064 29.7011C35.109 28.6611 34.306 27.7813 33.2703 27.7361Z" fill="black"/>
+<path d="M44.0462 25.3334C42.1772 30.9067 34.88 30.2361 34.0322 29.5903" stroke="black" stroke-linecap="round"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1774_6321" x1="6.60703" y1="16.738" x2="6.60703" y2="28.6507" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C1C1E"/>
+<stop offset="1" stop-color="#636366"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1774_6321" x1="40.3932" y1="16.738" x2="40.3932" y2="28.6507" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C1C1E"/>
+<stop offset="1" stop-color="#636366"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1774_6321" x1="23.7254" y1="7.53967" x2="23.7254" y2="38" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8CFFDD"/>
+<stop offset="1" stop-color="#04D9B5"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1774_6321" x1="11.5944" y1="3.00437" x2="5.61923" y2="6.43962" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-color="#C7C7CC"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1774_6321" x1="41.5651" y1="6.37885" x2="35.526" y2="3.05843" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-color="#C7C7CC"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1774_6321" x1="23.7249" y1="13.7222" x2="23.7249" y2="36.0396" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C1C1E"/>
+<stop offset="1" stop-color="#636366"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1774_6321" x1="18.6195" y1="23.5238" x2="18.6195" y2="28.1984" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6FFF6"/>
+<stop offset="0.5" stop-color="#13FFD0"/>
+<stop offset="1" stop-color="#00B39B"/>
+</linearGradient>
+<linearGradient id="paint7_linear_1774_6321" x1="28.2299" y1="23.5238" x2="28.2299" y2="28.1984" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6FFF6"/>
+<stop offset="0.5" stop-color="#13FFD0"/>
+<stop offset="1" stop-color="#00B39B"/>
+</linearGradient>
+<clipPath id="clip0_1774_6321">
+<rect width="47" height="38" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/shared/assets/icons/common/chatbot.webp b/src/shared/assets/icons/common/chatbot.webp
index 2c1bdbc6..322ce848 100644
Binary files a/src/shared/assets/icons/common/chatbot.webp and b/src/shared/assets/icons/common/chatbot.webp differ
diff --git a/src/shared/assets/icons/common/index.ts b/src/shared/assets/icons/common/index.ts
index d8d43f1a..d0dcdaa6 100644
--- a/src/shared/assets/icons/common/index.ts
+++ b/src/shared/assets/icons/common/index.ts
@@ -11,5 +11,5 @@ export { default as CloseIcon } from './close.svg?react';
 export { default as HamburgerIcon } from './hamburger-md.svg?react';
 export { default as PictureIcon } from './picture.svg?react';
 export { default as kakaoLoginImg } from './kakao.png';
-export { default as chatbotImg } from './chatbot.webp';
+export { default as ChatbotIcon } from './chatbot.svg?react';
 export { default as ChevronRightIcon } from './chevron-right.svg?react';
diff --git a/src/shared/assets/icons/index.ts b/src/shared/assets/icons/index.ts
index 5a835022..c5a3be31 100644
--- a/src/shared/assets/icons/index.ts
+++ b/src/shared/assets/icons/index.ts
@@ -12,7 +12,7 @@ export {
   PictureIcon,
   SearchMagnifyingGlassIcon,
   SendIcon,
-  chatbotImg,
+  ChatbotIcon,
   ChevronRightIcon,
 } from './common';
 export { GearIcon, ShoppingIcon, SellIcon } from './banner';
diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts
index 2a59fc13..1999058e 100644
--- a/src/shared/hooks/index.ts
+++ b/src/shared/hooks/index.ts
@@ -1,6 +1,8 @@
+export { useBodyScrollLock } from './useBodyScrollLock';
 export { useClickOutside } from './useClickOutside';
 export { useFocusTrap } from './useFocusTrap';
 export { useImageUpload } from './useImageUpload';
 export { useModal } from './useModal';
+export { useScrolled } from './useScrolled';
 export { useToast } from './useToast';
 export { useToastProvider } from './useToastProvider';
diff --git a/src/shared/hooks/useBodyScrollLock.ts b/src/shared/hooks/useBodyScrollLock.ts
new file mode 100644
index 00000000..8a5bc980
--- /dev/null
+++ b/src/shared/hooks/useBodyScrollLock.ts
@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export const useBodyScrollLock = (isLocked: boolean) => {
+  useEffect(() => {
+    if (!isLocked) {
+      return;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isLocked]);
+};
diff --git a/src/shared/hooks/useScrolled.ts b/src/shared/hooks/useScrolled.ts
new file mode 100644
index 00000000..d92d440d
--- /dev/null
+++ b/src/shared/hooks/useScrolled.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export const useScrolled = (threshold = 0) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > threshold);
+    };
+
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [threshold]);
+
+  return isScrolled;
+};
diff --git a/src/shared/ui/Card/Card.variants.ts b/src/shared/ui/Card/Card.variants.ts
index 489d3897..dc2aee3a 100644
--- a/src/shared/ui/Card/Card.variants.ts
+++ b/src/shared/ui/Card/Card.variants.ts
@@ -32,8 +32,8 @@ export const cardVariants = tv({
   variants: {
     variant: {
       default: {
-        root: ['w-[180px]', 'h-[299px]'],
-        imageWrapper: ['py-[10px]', 'px-[var(--padding-s)]', 'flex-[1_0_0]'],
+        root: ['w-full', 'h-auto', 'lg:w-[180px]', 'lg:h-[299px]'],
+        imageWrapper: ['py-[10px]', 'px-[var(--padding-s)]', 'aspect-square', 'lg:aspect-auto', 'lg:flex-[1_0_0]'],
         image: ['absolute', 'inset-0'],
         title: ['line-clamp-2', 'text-gray-900'],
         price: ['text-gray-900'],
diff --git a/src/shared/ui/Carousel3D/CarouselImageSlide.tsx b/src/shared/ui/Carousel3D/CarouselImageSlide.tsx
index 69823b04..c2219128 100644
--- a/src/shared/ui/Carousel3D/CarouselImageSlide.tsx
+++ b/src/shared/ui/Carousel3D/CarouselImageSlide.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router';
 import { carousel3DVariants } from './Carousel3D.variants';
 import type { ComponentPropsWithoutRef } from 'react';
 
@@ -7,23 +8,39 @@ export interface CarouselImageSlideProps extends ComponentPropsWithoutRef<'div'>
   imageSrc: string;
   title: string;
   subtitle?: string;
+  href?: string;
 }
 
 export const CarouselImageSlide = ({
   imageSrc,
   title: titleText,
   subtitle,
+  href,
   className,
   ...props
 }: CarouselImageSlideProps) => {
-  return (
-    <div className={imageSlide({ className })} {...props}>
+  const content = (
+    <>
       <img src={imageSrc} alt="" className={imageBackground()} loading="lazy" />
       <div className={imageOverlay()} />
       <div className={imageContent()}>
         <h3 className={imageTitle()}>{titleText}</h3>
         {subtitle && <p className={imageSubtitle()}>{subtitle}</p>}
       </div>
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link to={href} viewTransition className={imageSlide({ className: `block cursor-pointer ${className ?? ''}` })}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <div className={imageSlide({ className })} {...props}>
+      {content}
     </div>
   );
 };
diff --git a/src/shared/ui/ChatBubble/ChatBubble.variants.ts b/src/shared/ui/ChatBubble/ChatBubble.variants.ts
index c1edf249..e3f5a687 100644
--- a/src/shared/ui/ChatBubble/ChatBubble.variants.ts
+++ b/src/shared/ui/ChatBubble/ChatBubble.variants.ts
@@ -11,7 +11,8 @@ export const chatBubbleVariants = tv({
       'px-[31px]',
       'py-[18px]',
       'rounded-[var(--radius-l)]',
-      'max-w-[559px]',
+      'max-w-full',
+      'xl:max-w-[559px]',
     ],
     text: ['typo-body-1', 'whitespace-pre-wrap', 'break-words'],
     meta: ['typo-caption-2', 'text-gray-400'],
@@ -33,7 +34,7 @@ export const chatBubbleVariants = tv({
       },
       chatbotNotice: {
         root: ['justify-start'],
-        bubble: ['bg-gray-100', 'max-w-[720px]'],
+        bubble: ['bg-gray-100', 'max-w-full', 'xl:max-w-[720px]'],
         text: ['text-gray-900', 'whitespace-pre-line', 'break-keep'],
         meta: ['order-last'],
       },
diff --git a/src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.tsx b/src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.tsx
index 710b6786..a00a28d0 100644
--- a/src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.tsx
+++ b/src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.tsx
@@ -1,4 +1,4 @@
-import { chatbotImg } from '@shared/assets/icons';
+import { ChatbotIcon } from '@shared/assets/icons';
 import { chatbotFloatingButtonVariants } from './ChatbotFloatingButton.variants';
 import type { ComponentPropsWithoutRef } from 'react';
 
@@ -17,7 +17,7 @@ export const ChatbotFloatingButton = ({
   return (
     <button type={type} className={styles.root({ className })} aria-label={label} {...props}>
       <span className={styles.content()}>
-        <img src={chatbotImg} alt="" className={styles.icon()} aria-hidden="true" />
+        <ChatbotIcon className={styles.icon()} aria-hidden="true" />
         <span className={styles.label()}>{label}</span>
       </span>
     </button>
diff --git a/src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.variants.ts b/src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.variants.ts
index 0a276a1b..93b6e76a 100644
--- a/src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.variants.ts
+++ b/src/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.variants.ts
@@ -3,12 +3,12 @@ import { tv } from 'tailwind-variants';
 export const chatbotFloatingButtonVariants = tv({
   slots: {
     root: [
-      'group flex items-center',
+      'group flex flex-col justify-center items-center',
       'w-[80px] h-[80px]',
       'rounded-full',
       'bg-gray-50',
       'shadow-[0_4px_4px_0_var(--color-gray-100)]',
-      'p-0',
+      'py-[9px] px-[8px]',
       'overflow-hidden',
       'transition-[width,background-color,box-shadow] duration-200 ease-out',
       'hover:py-[9px] hover:pl-[8px] hover:pr-[19px]',
@@ -19,12 +19,11 @@ export const chatbotFloatingButtonVariants = tv({
     content: [
       'flex items-center justify-center w-full h-full',
       'gap-0 transition-[gap] duration-200 ease-out',
-      'group-hover:justify-start group-focus-visible:justify-start',
-      'group-hover:gap-0 group-focus-visible:gap-0',
-      'group-hover:w-[144px] group-hover:h-[67px] group-focus-visible:w-[144px] group-focus-visible:h-[67px]',
-      'group-hover:mx-auto group-focus-visible:mx-auto',
+      'group-hover:justify-center group-focus-visible:justify-center',
+      'group-hover:gap-[8px] group-focus-visible:gap-[8px]',
+      'group-hover:w-[144px] group-focus-visible:w-[144px]',
     ],
-    icon: ['w-[74px] h-[67px] shrink-0'],
+    icon: ['w-[47px] h-[38px] shrink-0'],
     label: [
       'typo-title-3 text-black whitespace-nowrap',
       'opacity-0 max-w-0 translate-x-2',
diff --git a/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts b/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts
index c7217e79..1e1f3b9b 100644
--- a/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts
+++ b/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const favoriteButtonVariants = tv({
   slots: {
-    root: ['group inline-flex items-center justify-center', 'w-[44px] h-[44px]', 'transition-colors'],
+    root: ['group inline-flex items-center justify-center', 'w-[44px] h-[44px]', 'cursor-pointer', 'transition-colors'],
     icon: ['w-[33px] h-[29.26px]', 'transition-colors', '[--icon-fill-active:var(--color-brand-primary)]'],
   },
 
diff --git a/src/shared/ui/Header/Header.variants.ts b/src/shared/ui/Header/Header.variants.ts
index 4c140b0a..83749727 100644
--- a/src/shared/ui/Header/Header.variants.ts
+++ b/src/shared/ui/Header/Header.variants.ts
@@ -6,12 +6,16 @@ export const headerVariants = tv({
   slots: {
     // Layout
     root: [
+      'fixed',
+      'top-0',
+      'left-0',
+      'right-0',
+      'z-50',
       'flex',
       'w-full',
       'max-w-[1440px]',
       'mx-auto',
-      'h-[92px]',
-      'mb-(--spacing-header-content)',
+      'h-(--header-height)',
       'justify-between',
       'items-center',
       'bg-white',
diff --git a/src/shared/ui/Modal/Modal.tsx b/src/shared/ui/Modal/Modal.tsx
index 0782d1f0..02269f16 100644
--- a/src/shared/ui/Modal/Modal.tsx
+++ b/src/shared/ui/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { useFocusTrap } from '@shared/hooks';
+import { useBodyScrollLock, useFocusTrap } from '@shared/hooks';
 import { Button } from '@shared/ui/Button/Button';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { modalStyles } from './Modal.styles';
@@ -24,6 +24,7 @@ export const Modal = ({
   const modalRef = useRef<HTMLDivElement>(null);
 
   useFocusTrap(modalRef, !closing);
+  useBodyScrollLock(true);
 
   const handleClose = useCallback(
     (callback: () => void) => {
diff --git a/src/shared/ui/TradeItem/TradeItem.tsx b/src/shared/ui/TradeItem/TradeItem.tsx
index 6adcae7d..5caa7a1b 100644
--- a/src/shared/ui/TradeItem/TradeItem.tsx
+++ b/src/shared/ui/TradeItem/TradeItem.tsx
@@ -43,20 +43,24 @@ export const TradeItem = ({
   const resolvedStatusLabel = statusLabel ?? statusConfig?.text;
 
   return (
-    <div className="gap-xxs flex w-full max-w-[1200px] flex-col rounded-(--radius-l) bg-gray-900 px-[42px] py-[44px]">
+    <div className="gap-xxs flex w-full max-w-[1200px] flex-col rounded-(--radius-l) bg-gray-900 px-4 py-6 md:px-[42px] md:py-[44px]">
       <div className="flex w-full items-center justify-between">
-        <div className="flex items-center gap-[36px]">
+        <div className="flex items-center gap-4 md:gap-[36px]">
           {imageUrl ? (
-            <img src={imageUrl} alt={modelName} className="rounded-m h-[79px] w-[79px] shrink-0 object-cover" />
+            <img
+              src={imageUrl}
+              alt={modelName}
+              className="rounded-m h-16 w-16 shrink-0 object-cover md:h-[79px] md:w-[79px]"
+            />
           ) : (
             <div
               role="img"
               aria-label={`${modelName} 이미지 없음`}
-              className="rounded-m h-[79px] w-[79px] shrink-0 bg-gray-200"
+              className="rounded-m h-16 w-16 shrink-0 bg-gray-200 md:h-[79px] md:w-[79px]"
             />
           )}
 
-          <div className="flex flex-col gap-[4px]">
+          <div className="gap-xxxxs flex flex-col">
             <span className="typo-body-1 text-white">{modelName}</span>
             <span className="typo-body-2 text-white">{price}</span>
             <span className="typo-caption-2 text-white">{date}</span>
@@ -66,7 +70,7 @@ export const TradeItem = ({
         {status === 'favorite' ? (
           <FavoriteButton defaultActive={favoriteActive} onToggle={onToggleFavorite} variant="inverse" />
         ) : (
-          <span className={statusConfig?.className}>{resolvedStatusLabel}</span>
+          <span className={`${statusConfig?.className} whitespace-nowrap`}>{resolvedStatusLabel}</span>
         )}
       </div>
     </div>
diff --git a/tests/unit/shared/ui/Card/Card.test.tsx b/tests/unit/shared/ui/Card/Card.test.tsx
index ee418aaf..3e23a911 100644
--- a/tests/unit/shared/ui/Card/Card.test.tsx
+++ b/tests/unit/shared/ui/Card/Card.test.tsx
@@ -48,7 +48,7 @@ describe('Card', () => {
       const { container } = render(<Card {...defaultProps} />);
 
       const card = container.firstChild;
-      expect(card).toHaveClass('w-[180px]', 'h-[299px]');
+      expect(card).toHaveClass('w-full', 'h-auto', 'lg:w-[180px]', 'lg:h-[299px]');
     });
 
     it('seller variant 적용', () => {
diff --git a/tests/unit/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.test.tsx b/tests/unit/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.test.tsx
index 050c4193..c1689db0 100644
--- a/tests/unit/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.test.tsx
+++ b/tests/unit/shared/ui/ChatbotFloatingButton/ChatbotFloatingButton.test.tsx
@@ -19,10 +19,10 @@ describe('ChatbotFloatingButton', () => {
       expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
-    it('아이콘 이미지 렌더링', () => {
+    it('아이콘 렌더링', () => {
       const { container } = render(<ChatbotFloatingButton />);
-      const img = container.querySelector('img');
-      expect(img).toBeInTheDocument();
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
     });
   });
 
@@ -46,8 +46,8 @@ describe('ChatbotFloatingButton', () => {
 
     it('아이콘에 aria-hidden 적용', () => {
       const { container } = render(<ChatbotFloatingButton />);
-      const img = container.querySelector('img');
-      expect(img).toHaveAttribute('aria-hidden', 'true');
+      const icon = container.querySelector('svg');
+      expect(icon).toHaveAttribute('aria-hidden', 'true');
     });
 
     it('키보드로 클릭 가능', async () => {