[Refactor/#227] shadow-Soft 통일 및 랜딩·대시보드 레이아웃 정리

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"

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: "",

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}

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}

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

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)]",

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,

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}

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,
         )}

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" />

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",
               )}
             >

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

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);

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 */}

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">

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>

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>

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>

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

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} />