diff --git a/src/components/common/ComingSoonPlaceholder.tsx b/src/components/common/ComingSoonPlaceholder.tsx
index 33a08a9..8011f96 100644
--- a/src/components/common/ComingSoonPlaceholder.tsx
+++ b/src/components/common/ComingSoonPlaceholder.tsx
@@ -52,7 +52,7 @@ const ComingSoonPlaceholder = memo(function ComingSoonPlaceholder({
       )}
     >
       <motion.div
-        className="flex w-full max-w-[420px] flex-col items-center rounded-[32px] bg-surface-100 px-8 py-12 text-center shadow-card transition-ui-smooth hover:shadow-card-hover tablet:px-6"
+        className="flex w-full max-w-[420px] flex-col items-center rounded-[32px] bg-surface-100 px-8 py-12 text-center shadow-Soft transition-ui-smooth tablet:px-6"
         role="status"
         aria-live="polite"
         initial="hidden"
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
index 43b9c6c..dc9968d 100644
--- a/src/components/common/button/Button.tsx
+++ b/src/components/common/button/Button.tsx
@@ -45,7 +45,7 @@ export default function Button({
     dangerSoft:
       "bg-info-red/10 text-info-red border border-info-red hover:bg-info-red/20 disabled:bg-surface-100 disabled:text-text-muted disabled:border-surface-400 disabled:hover:bg-surface-100",
     gradient:
-      "bg-gradient-to-r from-primary-400 to-primary-500 text-surface-100 border border-transparent hover:opacity-90 shadow-primary-500/30 disabled:bg-surface-200 disabled:text-text-muted disabled:border-surface-400 disabled:shadow-none disabled:hover:opacity-100",
+      "bg-linear-to-r from-primary-400 to-primary-500 text-surface-100 border border-transparent hover:opacity-90 shadow-Soft disabled:bg-surface-200 disabled:text-text-muted disabled:border-surface-400 disabled:shadow-none disabled:hover:opacity-100",
     tertiary:
       "h-7! border border-surface-400 text-text-auth-sub px-5 rounded-3xl bg-surface-100 font-body2 hover:bg-surface-200 transition-colors duration-200 ease-in-out disabled:text-text-muted disabled:bg-surface-200 disabled:hover:bg-surface-200",
     custom: "",
diff --git a/src/components/common/card/Card.tsx b/src/components/common/card/Card.tsx
index afc6b51..e498ba9 100644
--- a/src/components/common/card/Card.tsx
+++ b/src/components/common/card/Card.tsx
@@ -21,7 +21,7 @@ const Card = memo(function Card({
   return (
     <div
       className={twMerge(
-        "relative w-full rounded-3xl bg-surface-100 p-7 shadow-card transition-shadow duration-300 hover:shadow-card-hover",
+        "relative w-full rounded-3xl bg-surface-100 p-7 shadow-Soft",
         className,
       )}
       {...rest}
diff --git a/src/components/common/card/StatCard.tsx b/src/components/common/card/StatCard.tsx
index b82cb94..f498a15 100644
--- a/src/components/common/card/StatCard.tsx
+++ b/src/components/common/card/StatCard.tsx
@@ -66,7 +66,7 @@ const StatCard = memo(function StatCard({
   return (
     <div
       className={twMerge(
-        "bg-surface-100/80 backdrop-blur-sm rounded-3xl shadow-card p-7 flex flex-col gap-4 border border-surface-100/40 transition-shadow duration-300 hover:shadow-card-hover",
+        "bg-surface-100/80 backdrop-blur-sm rounded-3xl shadow-Soft p-7 flex flex-col gap-4 border border-surface-100/40",
         className,
       )}
       {...rest}
diff --git a/src/components/common/drawer/Drawer.tsx b/src/components/common/drawer/Drawer.tsx
index a7bc7a9..6110b19 100644
--- a/src/components/common/drawer/Drawer.tsx
+++ b/src/components/common/drawer/Drawer.tsx
@@ -111,7 +111,7 @@ export default function Drawer({
         ref={panelRef}
         className={twMerge(
           // [데스크톱] 우측 슬라이드
-          "relative w-full rounded-l-4xl overflow-hidden max-w-md bg-surface-100 shadow-2xl h-full flex flex-col transform transition-transform duration-300 ease-out",
+          "relative w-full rounded-l-4xl overflow-hidden max-w-md bg-surface-100 shadow-Soft h-full flex flex-col transform transition-transform duration-300 ease-out",
           // [태블릿] 하단 bottom sheet
           "tablet:rounded-t-4xl tablet:rounded-bl-none tablet:h-auto tablet:max-h-[85vh] tablet:max-w-none tablet:border-t tablet:border-surface-400",
           isOpen
diff --git a/src/components/common/dropdownmenu/DropdownMenu.tsx b/src/components/common/dropdownmenu/DropdownMenu.tsx
index 4bf3377..6ed9aa8 100644
--- a/src/components/common/dropdownmenu/DropdownMenu.tsx
+++ b/src/components/common/dropdownmenu/DropdownMenu.tsx
@@ -82,7 +82,7 @@ export function DropdownMenu({
               transformOrigin: fullWidth ? "top center" : "top right",
             }}
             className={twMerge(
-              "absolute z-50 mt-2 rounded-2xl border border-surface-300 bg-surface-100 py-3 px-1 shadow-Medium",
+              "absolute z-50 mt-2 rounded-2xl border border-surface-300 bg-surface-100 py-3 px-1 shadow-Soft",
               fullWidth
                 ? "left-0 right-0 top-full w-full"
                 : "right-0 top-full w-56 max-w-[calc(100vw-40px)]",
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index 50b7ab4..b6a95b7 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/src/components/common/modal/Modal.tsx
@@ -135,7 +135,7 @@ function Modal({
             <motion.div
               ref={modalRef}
               className={twMerge(
-                "relative w-full max-h-[90vh] overflow-auto rounded-2xl bg-surface-100 shadow-Medium",
+                "relative w-full max-h-[90vh] overflow-auto rounded-2xl bg-surface-100 shadow-Soft",
                 sizeClasses[size],
                 paddingClasses[padding],
                 className,
diff --git a/src/components/common/select/SearchSelect.tsx b/src/components/common/select/SearchSelect.tsx
index 7a16e44..369b67d 100644
--- a/src/components/common/select/SearchSelect.tsx
+++ b/src/components/common/select/SearchSelect.tsx
@@ -113,7 +113,7 @@ export default function SearchSelect<T>({
       </div>
 
       {isOpen && (
-        <div className="absolute left-0 top-[calc(100%+8px)] z-20 w-full overflow-hidden rounded-2xl border border-surface-400 bg-surface-100 shadow-sm">
+        <div className="absolute left-0 top-[calc(100%+8px)] z-20 w-full overflow-hidden rounded-2xl border border-surface-400 bg-surface-100 shadow-Soft">
           {filteredOptions.length > 0 ? (
             <ul
               id={listboxId}
diff --git a/src/components/common/toggle/Toggle.tsx b/src/components/common/toggle/Toggle.tsx
index 346a6c2..bf8771e 100644
--- a/src/components/common/toggle/Toggle.tsx
+++ b/src/components/common/toggle/Toggle.tsx
@@ -34,7 +34,7 @@ export default function Toggle({
     >
       <span
         className={twMerge(
-          "inline-block h-6 w-6 transform rounded-full bg-surface-100 shadow-sm transition-transform",
+          "inline-block h-6 w-6 transform rounded-full bg-surface-100 shadow-Soft transition-transform",
           checked ? "translate-x-7.5" : "translate-x-1.5",
           thumbClassName,
         )}
diff --git a/src/components/dashboard/overview/skeleton/OverviewSkeleton.tsx b/src/components/dashboard/overview/skeleton/OverviewSkeleton.tsx
index 485b575..fedeabe 100644
--- a/src/components/dashboard/overview/skeleton/OverviewSkeleton.tsx
+++ b/src/components/dashboard/overview/skeleton/OverviewSkeleton.tsx
@@ -7,7 +7,7 @@ import { PLATFORM_ROAS_TABLE_COL } from "@/components/dashboard/platform/Platfor
 /** KPI StatCard 1칸 */
 export function OverviewKpiCardSkeleton() {
   return (
-    <div className="flex flex-col gap-3 rounded-3xl border border-surface-100/40 bg-surface-100/80 px-7 py-5 shadow-card backdrop-blur-sm">
+    <div className="flex flex-col gap-3 rounded-3xl border border-surface-100/40 bg-surface-100/80 px-7 py-5 shadow-Soft backdrop-blur-sm">
       <Skeleton className="h-4 w-16" />
       <Skeleton className="h-6 w-24" />
       <Skeleton className="h-6 w-14 rounded-full" />
diff --git a/src/components/dashboard/platform/SinglePlatformView.tsx b/src/components/dashboard/platform/SinglePlatformView.tsx
index 75a4145..07d96ee 100644
--- a/src/components/dashboard/platform/SinglePlatformView.tsx
+++ b/src/components/dashboard/platform/SinglePlatformView.tsx
@@ -141,7 +141,7 @@ export default function SinglePlatformView({
           Array.from({ length: 4 }).map((_, i) => (
             <div
               key={i}
-              className="rounded-[24px] border border-surface-100/40 bg-surface-100/80 p-7 shadow-card backdrop-blur-sm flex flex-col gap-4"
+              className="rounded-[24px] border border-surface-100/40 bg-surface-100/80 p-7 shadow-Soft backdrop-blur-sm flex flex-col gap-4"
             >
               <Skeleton className="h-4 w-16" />
               <Skeleton className="h-8 w-24" />
@@ -244,7 +244,7 @@ export default function SinglePlatformView({
               className={twMerge(
                 "px-4 py-2 font-body2 transition-all duration-200",
                 viewRange === 7
-                  ? "bg-info-blue text-surface-100 shadow-sm"
+                  ? "bg-info-blue text-surface-100 shadow-Soft"
                   : "bg-surface-100 text-text-muted hover:bg-surface-200",
               )}
             >
@@ -256,7 +256,7 @@ export default function SinglePlatformView({
               className={twMerge(
                 "border-l border-surface-400 px-4 py-2 font-body2 transition-all duration-200",
                 viewRange === 30
-                  ? "bg-info-blue text-surface-100 shadow-sm"
+                  ? "bg-info-blue text-surface-100 shadow-Soft"
                   : "bg-surface-100 text-text-muted hover:bg-surface-200",
               )}
             >
diff --git a/src/components/landing/GuideOverviewChart.tsx b/src/components/landing/GuideOverviewChart.tsx
index 7265fb7..046bd55 100644
--- a/src/components/landing/GuideOverviewChart.tsx
+++ b/src/components/landing/GuideOverviewChart.tsx
@@ -35,7 +35,7 @@ export default function GuideOverviewChart() {
           }
         >
           <div className="relative flex-1 pt-12">
-            <div className="absolute right-2 top-0 z-20 rounded-2xl border border-surface-400/80 bg-surface-100/95 px-4 py-3 shadow-landing-pill">
+            <div className="absolute right-2 top-0 z-20 rounded-2xl border border-surface-400/80 bg-surface-100/95 px-4 py-3 shadow-Soft">
               <p className="font-caption text-text-title">광고 클릭수 추이</p>
               <p className="mt-1 font-caption text-text-auth-sub">
                 오후 12시 기준 클릭수 48,500
diff --git a/src/components/landing/GuidePlatform.tsx b/src/components/landing/GuidePlatform.tsx
index 24bbe52..3f9f4a8 100644
--- a/src/components/landing/GuidePlatform.tsx
+++ b/src/components/landing/GuidePlatform.tsx
@@ -90,7 +90,7 @@ export default function GuidePlatform() {
         </button>
 
         {isMenuOpen && (
-          <div className="bg-surface-100 border border-surface-400/70 rounded-2xl shadow-landing-dropdown overflow-hidden">
+          <div className="bg-surface-100 border border-surface-400/70 rounded-2xl shadow-Soft overflow-hidden">
             <div>
               {PLATFORMS.map((platform) => {
                 const isSelected = selectedIds.includes(platform.id);
diff --git a/src/components/landing/GuideTimeline.tsx b/src/components/landing/GuideTimeline.tsx
index 7cc2a3a..e494ef6 100644
--- a/src/components/landing/GuideTimeline.tsx
+++ b/src/components/landing/GuideTimeline.tsx
@@ -38,7 +38,7 @@ export default function GuideTimeline() {
           <span className="rounded-md px-3 py-1.5 font-caption text-text-muted select-none opacity-60">
             Day
           </span>
-          <span className="rounded-[6px] bg-surface-100 px-3 py-1.5 font-caption text-text-title shadow-landing-pill select-none">
+          <span className="rounded-[6px] bg-surface-100 px-3 py-1.5 font-caption text-text-title shadow-Soft select-none">
             Week
           </span>
           <span className="rounded-md px-3 py-1.5 font-caption text-text-muted select-none opacity-60">
@@ -124,7 +124,7 @@ export default function GuideTimeline() {
               return (
                 <div
                   key={card.id}
-                  className="absolute flex items-center px-3 gap-2.5 rounded-[12px] h-[52px] z-20 cursor-pointer border border-surface-400/80 bg-surface-100 shadow-landing-tooltip transition-transform hover:scale-[1.01] hover:z-30"
+                  className="absolute flex items-center px-3 gap-2.5 rounded-[12px] h-[52px] z-20 cursor-pointer border border-surface-400/80 bg-surface-100 shadow-Soft transition-transform hover:scale-[1.01] hover:z-30"
                   style={{ left: `${x}px`, top: `${y}px`, width: `${width}px` }}
                 >
                   {/* Left Indicator */}
diff --git a/src/components/landing/LandingFAQ.tsx b/src/components/landing/LandingFAQ.tsx
index 83ec945..78a1656 100644
--- a/src/components/landing/LandingFAQ.tsx
+++ b/src/components/landing/LandingFAQ.tsx
@@ -20,7 +20,7 @@ export default function LandingFAQ() {
           />
         </div>
 
-        <div className="mt-10 divide-y divide-surface-400 rounded-2xl border border-surface-400 overflow-hidden bg-surface-100 shadow-card">
+        <div className="mt-10 divide-y divide-surface-400 rounded-2xl border border-surface-400 overflow-hidden bg-surface-100 shadow-Soft">
           {LANDING_FAQ_ITEMS.map(({ q, a }) => (
             <details key={q} className="group px-5 md:px-6 py-5">
               <summary className="cursor-pointer list-none flex items-center justify-between gap-4 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/35 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-100">
diff --git a/src/components/landing/LandingFeatures.tsx b/src/components/landing/LandingFeatures.tsx
index d0440bc..6837329 100644
--- a/src/components/landing/LandingFeatures.tsx
+++ b/src/components/landing/LandingFeatures.tsx
@@ -28,9 +28,9 @@ function IntegrationGraphic() {
       viewport={{ once: true, amount: 0.45 }}
       transition={{ duration: 0.5, ease: "easeOut" }}
     >
-      <motion.div className="flex items-center justify-between px-4 py-3 bg-surface-100/80 rounded-2xl border border-surface-400/70 shadow-landing-pill opacity-60 blur-[0.5px] transition-all duration-300 relative z-0">
+      <motion.div className="flex items-center justify-between px-4 py-3 bg-surface-100/80 rounded-2xl border border-surface-400/70 shadow-Soft opacity-60 blur-[0.5px] transition-all duration-300 relative z-0">
         <div className="flex items-center gap-3">
-          <NaverLogo className="w-8 h-8 rounded-full shadow-landing-pill" />
+          <NaverLogo className="w-8 h-8 rounded-full shadow-Soft" />
           <div className="flex flex-col text-left">
             <span className="font-body2 text-text-muted">Naver</span>
           </div>
@@ -40,9 +40,9 @@ function IntegrationGraphic() {
         </div>
       </motion.div>
 
-      <motion.div className="-mt-3 flex items-center justify-between px-4 py-3.5 bg-surface-100 rounded-2xl shadow-landing-integration border border-surface-400/60 relative z-20 scale-[1.02]">
+      <motion.div className="-mt-3 flex items-center justify-between px-4 py-3.5 bg-surface-100 rounded-2xl shadow-Soft border border-surface-400/60 relative z-20 scale-[1.02]">
         <div className="flex items-center gap-3">
-          <div className="bg-surface-100 rounded-full w-8 h-8 flex items-center justify-center shrink-0 shadow-landing-pill overflow-hidden border border-surface-400/70">
+          <div className="bg-surface-100 rounded-full w-8 h-8 flex items-center justify-center shrink-0 shadow-Soft overflow-hidden border border-surface-400/70">
             <GoogleAdsLogo className="w-full h-full object-cover" />
           </div>
           <div className="flex flex-col text-left">
@@ -56,9 +56,9 @@ function IntegrationGraphic() {
         </div>
       </motion.div>
 
-      <motion.div className="-mt-3 flex items-center justify-between px-4 py-3 bg-surface-100/80 rounded-2xl border border-surface-400/70 shadow-landing-pill opacity-60 blur-[0.5px] transition-all duration-300 relative z-10">
+      <motion.div className="-mt-3 flex items-center justify-between px-4 py-3 bg-surface-100/80 rounded-2xl border border-surface-400/70 shadow-Soft opacity-60 blur-[0.5px] transition-all duration-300 relative z-10">
         <div className="flex items-center gap-3">
-          <KakaoLogo className="w-8 h-8 rounded-full shadow-landing-pill" />
+          <KakaoLogo className="w-8 h-8 rounded-full shadow-Soft" />
           <div className="flex flex-col text-left">
             <span className="font-body2 text-text-muted">Kakao</span>
           </div>
@@ -73,10 +73,10 @@ function IntegrationGraphic() {
 
 function WorkflowGraphic() {
   return (
-    <div className="absolute left-0 bg-surface-100 backdrop-blur-sm rounded-r-full rounded-l-none p-3 pl-4 pr-5 flex items-center gap-3 shadow-landing-float border border-surface-400/60">
+    <div className="absolute left-0 bg-surface-100 backdrop-blur-sm rounded-r-full rounded-l-none p-3 pl-4 pr-5 flex items-center gap-3 shadow-Soft border border-surface-400/60">
       <div
         aria-hidden
-        className="h-10 rounded-full flex items-center px-4 gap-2 shrink-0 mx-0.5 shadow-md shadow-primary-400/20 relative overflow-hidden select-none"
+        className="h-10 rounded-full flex items-center px-4 gap-2 shrink-0 mx-0.5 shadow-Soft relative overflow-hidden select-none"
         style={{
           background:
             "linear-gradient(135deg, var(--color-primary-400), var(--color-primary-500))",
@@ -156,7 +156,7 @@ function WorkspaceGraphic() {
   return (
     <div
       ref={containerRef}
-      className="bg-surface-100 rounded-3xl shadow-landing-card-deep w-70 p-4 flex flex-col gap-4 border border-surface-400/60"
+      className="bg-surface-100 rounded-3xl shadow-Soft w-70 p-4 flex flex-col gap-4 border border-surface-400/60"
     >
       <div className="flex gap-3">
         <div className="w-7 h-7 bg-color-primary-100 overflow-hidden shrink-0 mt-0.5 rounded-full flex items-center justify-center border border-surface-400/70">
@@ -187,7 +187,7 @@ function WorkspaceGraphic() {
         )}
         <div
           aria-hidden
-          className="w-7 h-7 rounded-full flex items-center justify-center bg-primary-500 shrink-0 shadow-landing-pill"
+          className="w-7 h-7 rounded-full flex items-center justify-center bg-primary-500 shrink-0 shadow-Soft"
         >
           <ChevronUp className="text-surface-100 w-3.5 h-3.5" />
         </div>
diff --git a/src/components/landing/LandingGuide.tsx b/src/components/landing/LandingGuide.tsx
index 0056fcf..d140fcc 100644
--- a/src/components/landing/LandingGuide.tsx
+++ b/src/components/landing/LandingGuide.tsx
@@ -46,7 +46,7 @@ export default function LandingGuide() {
                 className={`w-full md:w-3/5 rounded-3xl overflow-hidden ${
                   page.useTimeline || page.usePlatform || page.useOverview
                     ? "bg-transparent shadow-none"
-                    : "bg-surface-100 shadow-card border border-surface-400/70"
+                    : "bg-surface-100 shadow-Soft border border-surface-400/70"
                 }`}
                 initial={{ opacity: 0, x: page.reverse ? 42 : -42 }}
                 whileInView={{ opacity: 1, x: 0 }}
@@ -91,7 +91,7 @@ export default function LandingGuide() {
                   <span className="select-none font-heading1 leading-none text-primary-400">
                     {page.number}
                   </span>
-                  <span className="inline-flex items-center rounded-full bg-primary-300 px-3 py-1 font-caption text-surface-100 shadow-landing-pill tracking-wide">
+                  <span className="inline-flex items-center rounded-full bg-primary-300 px-3 py-1 font-caption text-surface-100 shadow-Soft tracking-wide">
                     {page.label}
                   </span>
                 </div>
diff --git a/src/components/landing/LandingHeader.tsx b/src/components/landing/LandingHeader.tsx
index 979d858..8cb5ec1 100644
--- a/src/components/landing/LandingHeader.tsx
+++ b/src/components/landing/LandingHeader.tsx
@@ -58,7 +58,7 @@ export default function LandingHeader() {
     <header
       className={`sticky top-0 w-full z-50 flex items-center justify-between px-6 md:px-12 transition-ui-smooth h-(--landing-header-height,64px) ${
         isScrolled
-          ? "bg-surface-100 shadow-landing-header border-transparent"
+          ? "bg-surface-100 shadow-Soft border-transparent"
           : "bg-surface-100/80 backdrop-blur-xl border-surface-400"
       }`}
     >
@@ -94,7 +94,7 @@ export default function LandingHeader() {
         </Link>
         <Link
           to="/signup"
-          className="rounded-xl bg-primary-400 px-3 py-2 font-label text-surface-100 shadow-landing-pill transition-colors hover:bg-primary-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-100 md:px-3.5"
+          className="rounded-xl bg-primary-400 px-3 py-2 font-label text-surface-100 shadow-Soft transition-colors hover:bg-primary-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-100 md:px-3.5"
         >
           회원가입
         </Link>
diff --git a/src/components/landing/LandingHero.tsx b/src/components/landing/LandingHero.tsx
index 474da9d..fd2bec7 100644
--- a/src/components/landing/LandingHero.tsx
+++ b/src/components/landing/LandingHero.tsx
@@ -43,7 +43,7 @@ export default function LandingHero() {
         />
       </picture>
       <div
-        className="pointer-events-none absolute inset-0 z-1 bg-landing-hero-scrim"
+        className="pointer-events-none absolute inset-0 z-1 bg-text-400/64"
         aria-hidden
       />
       <motion.div
diff --git a/src/components/landing/LandingMultiDevice.tsx b/src/components/landing/LandingMultiDevice.tsx
index ae7dd9a..f1b359e 100644
--- a/src/components/landing/LandingMultiDevice.tsx
+++ b/src/components/landing/LandingMultiDevice.tsx
@@ -23,7 +23,7 @@ export default function LandingMultiDevice() {
         </div>
 
         <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-          <article className="relative overflow-hidden rounded-3xl bg-surface-500 shadow-card min-h-[360px]">
+          <article className="relative overflow-hidden rounded-3xl bg-surface-500 shadow-Soft min-h-[360px]">
             <picture>
               <source type="image/avif" srcSet={Mobile640Avif} />
               <source type="image/webp" srcSet={Mobile640Webp} />
@@ -41,7 +41,7 @@ export default function LandingMultiDevice() {
             </div>
           </article>
 
-          <article className="relative overflow-hidden rounded-3xl bg-surface-500 shadow-card min-h-[360px]">
+          <article className="relative overflow-hidden rounded-3xl bg-surface-500 shadow-Soft min-h-[360px]">
             <picture>
               <source type="image/avif" srcSet={Tablet960Avif} />
               <source type="image/webp" srcSet={Tablet960Webp} />
@@ -59,7 +59,7 @@ export default function LandingMultiDevice() {
             </div>
           </article>
 
-          <article className="relative overflow-hidden rounded-3xl bg-surface-500 shadow-card min-h-[360px]">
+          <article className="relative overflow-hidden rounded-3xl bg-surface-500 shadow-Soft min-h-[360px]">
             <picture>
               <source type="image/avif" srcSet={Desktop960Avif} />
               <source type="image/webp" srcSet={Desktop960Webp} />
diff --git a/src/components/landing/LandingPricing.tsx b/src/components/landing/LandingPricing.tsx
index 49b3889..59577f7 100644
--- a/src/components/landing/LandingPricing.tsx
+++ b/src/components/landing/LandingPricing.tsx
@@ -68,12 +68,12 @@ export default function LandingPricing() {
               }}
               className={`bg-surface-100 rounded-[28px] p-7 lg:p-8 relative transition-[box-shadow,transform,border-color] duration-300 flex flex-col ${
                 plan.featured
-                  ? "order-first md:order-0 border border-primary-400/55 shadow-landing-featured-plan -translate-y-1"
-                  : "border border-surface-400/70 shadow-card hover:shadow-card-hover"
+                  ? "order-first md:order-0 border border-primary-400/55 shadow-Soft -translate-y-1"
+                  : "border border-surface-400/70 shadow-Soft"
               }`}
             >
               {plan.featured && (
-                <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[99px] bg-primary-400 px-4 py-1.5 font-caption text-surface-100 shadow-landing-pill">
+                <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[99px] bg-primary-400 px-4 py-1.5 font-caption text-surface-100 shadow-Soft">
                   인기 플랜
                 </div>
               )}
@@ -108,7 +108,7 @@ export default function LandingPricing() {
                   href={proMailtoHref}
                   className={`mb-4 inline-flex h-12 w-full items-center justify-center rounded-2xl font-heading4 transition-colors ${
                     plan.featured
-                      ? "bg-primary-400 text-surface-100 hover:bg-primary-500 shadow-landing-cta"
+                      ? "bg-primary-400 text-surface-100 hover:bg-primary-500 shadow-Soft"
                       : "bg-text-disabled text-text-title hover:brightness-95 active:brightness-90 border border-surface-400/70"
                   } focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/35 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-100`}
                 >
@@ -120,7 +120,7 @@ export default function LandingPricing() {
                   onClick={handleCta}
                   className={`mb-4 h-12 w-full rounded-2xl font-heading4 transition-colors ${
                     plan.featured
-                      ? "bg-primary-400 text-surface-100 hover:bg-primary-500 shadow-landing-cta"
+                      ? "bg-primary-400 text-surface-100 hover:bg-primary-500 shadow-Soft"
                       : "bg-text-disabled/50 text-text-title hover:brightness-95 active:brightness-90 border border-surface-400/70"
                   } focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/35 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-100`}
                 >
diff --git a/src/components/workspace/MemberManagementLoading.tsx b/src/components/workspace/MemberManagementLoading.tsx
index 54a1b2d..e412642 100644
--- a/src/components/workspace/MemberManagementLoading.tsx
+++ b/src/components/workspace/MemberManagementLoading.tsx
@@ -3,7 +3,7 @@ import { Skeleton, SkeletonCircle } from "../common/skeleton/Skeleton";
 
 function MemberRowSkeleton() {
   return (
-    <div className="flex items-center justify-between rounded-2xl border border-surface-400 bg-surface-100 px-6 py-5 shadow-card tablet:px-4 tablet:py-4">
+    <div className="flex items-center justify-between rounded-2xl border border-surface-400 bg-surface-100 px-6 py-5 shadow-Soft tablet:px-4 tablet:py-4">
       <div className="flex items-center gap-4 min-w-0">
         <SkeletonCircle className="w-12 h-12 shrink-0 tablet:w-10 tablet:h-10" />
         <div className="flex flex-col gap-2 min-w-0">
diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index 907678e..75968f3 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -28,9 +28,9 @@ function WorkspaceCard({ workspace: w, isSelected = false, onClick }: TProps) {
       <button
         type="button"
         className={twMerge(
-          "flex w-full items-center justify-between rounded-2xl border bg-surface-100 px-6 py-5 text-left shadow-card tablet:px-4 tablet:py-4 focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none",
+          "flex w-full items-center justify-between rounded-2xl border bg-surface-100 px-6 py-5 text-left shadow-Soft tablet:px-4 tablet:py-4 focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none",
           onClick &&
-            "cursor-pointer transition-all duration-300 ease-out hover:-translate-y-1 hover:border-primary-400/30 hover:bg-primary-100/50 hover:shadow-card-hover active:scale-[0.98]",
+            "cursor-pointer transition-all duration-300 ease-out hover:-translate-y-1 hover:border-primary-400/30 hover:bg-primary-100/50 active:scale-[0.98]",
           isSelected
             ? "border-primary-500/40 bg-primary-100/50"
             : "border-surface-400 focus-within:border-primary-400/50",
diff --git a/src/components/workspace/WorkspaceListLoading.tsx b/src/components/workspace/WorkspaceListLoading.tsx
index 316420b..55beb01 100644
--- a/src/components/workspace/WorkspaceListLoading.tsx
+++ b/src/components/workspace/WorkspaceListLoading.tsx
@@ -3,7 +3,7 @@ import { Skeleton } from "@/components/common/skeleton/Skeleton";
 function WorkspaceCardSkeleton() {
   return (
     <>
-      <li className="flex items-center justify-between rounded-2xl border border-surface-400 bg-surface-100 px-6 py-5 shadow-card tablet:px-4 tablet:py-4">
+      <li className="flex items-center justify-between rounded-2xl border border-surface-400 bg-surface-100 px-6 py-5 shadow-Soft tablet:px-4 tablet:py-4">
         <div className="flex items-center gap-5 min-w-0 tablet:gap-3">
           <Skeleton className="w-24 h-24 shrink-0 rounded-lg tablet:h-18 tablet:w-18" />
           <div className="flex flex-col gap-2 min-w-0">
diff --git a/src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx b/src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx
index 3164034..99e846c 100644
--- a/src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx
+++ b/src/pages/dashboard/overview/sections/OverviewBudgetSection.tsx
@@ -36,9 +36,9 @@ export function OverviewBudgetSection({
 }) {
   return (
     <div className="col-span-1 flex h-full min-h-0 min-w-0 flex-col gap-3 tablet:col-span-1">
-      <div className="flex min-h-0 flex-[2_1_0%] flex-col">
+      <div className="flex min-h-0 flex-1 flex-col">
         <Card
-          className="flex h-full min-h-0 min-w-0 flex-col pb-4!"
+          className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden pb-4!"
           title="예산 소진 현황"
           description={
             <ChartLegend
@@ -77,8 +77,8 @@ export function OverviewBudgetSection({
         </Card>
       </div>
 
-      <div className="flex min-h-60 flex-[1_1_0%] flex-col overflow-hidden">
-        <OverviewCampaignSnapshotCard className="h-full" />
+      <div className="shrink-0">
+        <OverviewCampaignSnapshotCard />
       </div>
     </div>
   );
diff --git a/src/pages/dashboard/overview/sections/OverviewCampaignSnapshotCard.tsx b/src/pages/dashboard/overview/sections/OverviewCampaignSnapshotCard.tsx
index f2c701d..3d1c912 100644
--- a/src/pages/dashboard/overview/sections/OverviewCampaignSnapshotCard.tsx
+++ b/src/pages/dashboard/overview/sections/OverviewCampaignSnapshotCard.tsx
@@ -100,7 +100,7 @@ export default memo(function OverviewCampaignSnapshotCard({
 
   return (
     <Card
-      className={twMerge("flex w-full min-w-0 flex-col pb-3!", className)}
+      className={twMerge("flex w-full min-w-0 flex-col", className)}
       title="캠페인 미리보기"
       description={
         isPending || isError ? undefined : (
diff --git a/src/pages/landing/LandingPage.tsx b/src/pages/landing/LandingPage.tsx
index 337a6d1..27d4ad5 100644
--- a/src/pages/landing/LandingPage.tsx
+++ b/src/pages/landing/LandingPage.tsx
@@ -17,8 +17,8 @@ const LandingFAQ = lazy(() => import("@/components/landing/LandingFAQ"));
 function SectionFallback({ height = 96 }: { height?: number }) {
   return (
     <div className="w-full" style={{ height }} aria-hidden>
-      <div className="h-full w-full rounded-[28px] border border-surface-400/60 bg-surface-100/55 backdrop-blur-sm shadow-card overflow-hidden">
-        <div className="h-full w-full animate-pulse bg-gradient-to-r from-primary-100/40 via-surface-100/40 to-primary-100/40" />
+      <div className="h-full w-full rounded-[28px] border border-surface-400/60 bg-surface-100/55 backdrop-blur-sm shadow-Soft overflow-hidden">
+        <div className="h-full w-full animate-pulse bg-linear-to-r from-primary-100/40 via-surface-100/40 to-primary-100/40" />
       </div>
     </div>
   );
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index 0c0b391..9cf40e0 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -214,7 +214,7 @@ export default function WorkspacePage() {
                 onClick={openFile}
                 className={`group relative flex h-40 w-40 flex-col items-center justify-center overflow-hidden rounded-3xl border-2 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:outline-none ${
                   logoPreview
-                    ? "border-transparent shadow-card"
+                    ? "border-transparent shadow-Soft"
                     : "border-dashed border-surface-400 bg-surface-200 hover:border-primary-400 hover:bg-primary-100/50"
                 }`}
               >
diff --git a/src/stories/Shadows.stories.tsx b/src/stories/Shadows.stories.tsx
index 407f4c0..ccbf731 100644
--- a/src/stories/Shadows.stories.tsx
+++ b/src/stories/Shadows.stories.tsx
@@ -4,12 +4,8 @@ const shadowTokens = [
   {
     className: "shadow-Soft",
     label: "Soft",
-    value: "0px 0px 16px 0px rgba(0, 0, 0, 0.1)",
-  },
-  {
-    className: "shadow-Medium",
-    label: "Medium",
-    value: "0px 0px 16px 0px rgba(0, 0, 0, 0.2)",
+    value:
+      "0 1px 2px color-mix(text-400 4%), 0 4px 20px color-mix(text-400 6%)",
   },
 ];
 
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index bdfb68c..32e30d5 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -55,6 +55,19 @@
     transparent
   );
 
+  /* 랜딩 섹션 배경 워시 — Guide·Pricing 오버레이 */
+  --background-image-landing-guide-wash:
+    radial-gradient(
+      900px 320px at 20% 0%,
+      color-mix(in srgb, var(--color-primary-300) 16%, transparent),
+      transparent 60%
+    ),
+    radial-gradient(
+      900px 320px at 80% 10%,
+      color-mix(in srgb, var(--color-primary-300) 12%, transparent),
+      transparent 60%
+    );
+
   /* 타이포 스케일 — 유틸(.font-*)은 여기 값만 참조 */
   --type-hero-size: 54px;
   --type-hero-weight: 700;
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index 213b3b1..c14eabe 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -63,98 +63,12 @@
 
   /* 그림자 */
   .shadow-Soft {
-    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 1px 2px color-mix(in srgb, var(--color-text-400) 4%, transparent),
+      0 4px 20px color-mix(in srgb, var(--color-text-400) 6%, transparent);
   }
 
-  .shadow-Medium {
-    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
-  }
-
-  .shadow-card {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
-  }
-
-  .shadow-card-hover {
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
-  }
-
-  /* 랜딩 — 배경 워시·그림자 (@theme 팔레트·텍스트 톤만 사용) */
-  .bg-landing-pricing-wash {
-    background-image:
-      radial-gradient(
-        900px 420px at 20% 0%,
-        color-mix(in srgb, var(--color-primary-300) 12%, transparent),
-        transparent 62%
-      ),
-      radial-gradient(
-        900px 420px at 85% 15%,
-        color-mix(in srgb, var(--color-primary-100) 14%, transparent),
-        transparent 60%
-      );
-  }
-
-  .bg-landing-guide-wash {
-    background-image:
-      radial-gradient(
-        900px 320px at 20% 0%,
-        color-mix(in srgb, var(--color-primary-300) 16%, transparent),
-        transparent 60%
-      ),
-      radial-gradient(
-        900px 320px at 80% 10%,
-        color-mix(in srgb, var(--color-primary-300) 12%, transparent),
-        transparent 60%
-      );
-  }
-
-  .shadow-landing-header {
-    box-shadow: 0 2px 8px 0 color-mix(in srgb, var(--color-text-400) 8%, transparent);
-  }
-
-  .shadow-landing-card-deep {
-    box-shadow: 0 14px 32px 0 color-mix(in srgb, var(--color-text-400) 6%, transparent);
-  }
-
-  .shadow-landing-float {
-    box-shadow: 0 18px 50px 0 color-mix(in srgb, var(--color-text-400) 8%, transparent);
-  }
-
-  .shadow-landing-integration {
-    box-shadow: 0 18px 40px 0 color-mix(in srgb, var(--color-text-400) 10%, transparent);
-  }
-
-  .shadow-landing-featured-plan {
-    box-shadow: 0 18px 55px 0
-      color-mix(in srgb, var(--color-primary-400) 14%, transparent);
-  }
-
-  .shadow-landing-cta {
-    box-shadow: 0 10px 24px 0
-      color-mix(in srgb, var(--color-primary-400) 28%, transparent);
-  }
-
-  .shadow-landing-dropdown {
-    box-shadow: 0 10px 24px 0 color-mix(in srgb, var(--color-text-400) 6%, transparent);
-  }
-
-  .shadow-landing-tooltip {
-    box-shadow: 0 4px 15px -3px color-mix(in srgb, var(--color-text-400) 5%, transparent);
-  }
-
-  .shadow-landing-pill {
-    box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--color-text-400) 6%, transparent);
-  }
-
-  /* 히어로 이미지 위 딤 — 순수 검정 대신 텍스트 톤 기반 */
-  .bg-landing-hero-scrim {
-    background-color: color-mix(in srgb, var(--color-text-400) 64%, transparent);
-  }
-
-  .bg-text-disabled {
-    background-color: var(--color-text-disabled);
-  }
-
-  /* UI 트랜지션 — @theme duration/ease; TS 상수 대신 클래스 한 줄로 사용 */
+  /* UI 트랜지션  */
   .transition-ui-smooth {
     transition-property: transform, opacity, background-color, border-color, color,
       box-shadow;