diff --git a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
index 37061b293..62fabdbd7 100644
--- a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
+++ b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx
@@ -29,7 +29,7 @@ type MenuIconProps = {
 const InftwtMenuIcon = ({ isActive }: MenuIconProps) => (
   <svg
     viewBox="0 0 24 24"
-    className={`h-[15px] w-[15px] shrink-0 ${isActive ? "text-[#1e88e5]" : "text-[#64748b]"}`}
+    className={`h-[15px] w-[15px] shrink-0 ${isActive ? "text-primary" : "text-label"}`}
     aria-hidden="true"
     fill="none"
   >
@@ -93,10 +93,10 @@ export default function AnalysisPopupMenu({
     <div className="absolute right-[0.55rem] top-[20px] z-[45]">
       <div className="relative">
         {isOpen ? (
-          <div className="absolute right-[28px] w-[154px] overflow-hidden rounded-[6px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] shadow-[0_8px_18px_rgba(15,23,42,0.14)]">
-            <div className="flex h-[36px] items-center gap-2 border-b border-[#e5eaf1] bg-[#f8fafc] px-[10px] text-[13px] font-bold text-[#1f2937]">
+          <div className="absolute right-[28px] w-[154px] overflow-hidden rounded-[6px] border border-border bg-background shadow-[0_8px_18px_rgba(15,23,42,0.14)]">
+            <div className="flex h-[36px] items-center gap-2 border-b border-border bg-secondary px-[10px] text-[13px] font-bold text-foreground">
               <div className="flex items-center gap-2">
-                <PanelsTopLeft className="h-4 w-4 text-[#1e88e5]" />
+                <PanelsTopLeft className="h-4 w-4 text-primary" />
                 <span>분석도구</span>
               </div>
             </div>
@@ -114,8 +114,8 @@ export default function AnalysisPopupMenu({
                     type="button"
                     className={`relative flex h-[34px] items-center gap-[7px] rounded-[5px] border px-[8px] pl-[10px] text-left text-[12px] font-semibold transition ${
                       isActive
-                        ? "border-[#b9dcff] bg-[#eaf4ff] font-bold text-[#0f5fa8] before:absolute before:left-0 before:top-[7px] before:bottom-[7px] before:w-[3px] before:rounded-r-[2px] before:bg-[#1e88e5]"
-                        : "border-transparent bg-white text-[#374151] hover:border-[#cfe5ff] hover:bg-[#eef6ff] hover:text-[#1e3a5f]"
+                        ? "border-primary bg-secondary font-bold text-primary before:absolute before:left-0 before:top-[7px] before:bottom-[7px] before:w-[3px] before:rounded-r-[2px] before:bg-primary"
+                        : "border-transparent bg-background text-foreground hover:border-border hover:bg-accent hover:text-primary"
                     }`}
                     onClick={() => {
                       if (item.key === "gisEditPopup" && onToggleGisEdit) {
@@ -150,7 +150,7 @@ export default function AnalysisPopupMenu({
                     {Icon ? (
                       <Icon
                         className={`h-[15px] w-[15px] shrink-0 ${
-                          isActive ? "text-[#1e88e5]" : "text-[#64748b]"
+                          isActive ? "text-primary" : "text-label"
                         }`}
                       />
                     ) : null}
@@ -164,7 +164,7 @@ export default function AnalysisPopupMenu({
 
         <button
           type="button"
-          className="absolute right-0 top-0 flex h-[36px] w-[20px] items-center justify-center rounded-[4px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] text-[#64748b] shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-[#eaf4ff] hover:text-[#1e88e5]"
+          className="absolute right-0 top-0 flex h-[36px] w-[20px] items-center justify-center rounded-[4px] border border-border bg-background text-label shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-accent hover:text-primary"
           onClick={() => setIsOpen((value) => !value)}
           title={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
           aria-label={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
diff --git a/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx
index 9de542912..af579fc67 100644
--- a/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/inftwtResult/InftwtResultPopupPage.tsx
@@ -192,17 +192,17 @@ export default function InftwtResultPopupPage() {
   };
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <main className="sn-popup-page">
       <LoadingOverlay isLoading={isLoading} />
-      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.45rem] font-semibold text-white">침입수 분석결과</h1>
+      <header className="sn-popup-header">
+        <h1 className="sn-popup-title">침입수 분석결과</h1>
       </header>
 
-      <section className="overflow-y-auto p-4">
-        <div className="rounded-md border border-slate-200 bg-slate-50 p-4">
+      <section className="sn-popup-section overflow-y-auto">
+        <div className="rounded-md border border-border bg-secondary p-4">
           <div className="flex flex-wrap items-center gap-3">
             <div className="flex items-center gap-2">
-              <span className="whitespace-nowrap text-[1.05rem] font-medium text-slate-700">상수사용기간</span>
+              <span className="whitespace-nowrap text-[1.05rem] font-medium text-label">상수사용기간</span>
               <DateMonthPicker
                 field={{
                   value: filters.aplcnYmFrom,
@@ -216,7 +216,7 @@ export default function InftwtResultPopupPage() {
                 selectClass="w-[145px]"
                 startYear={1900}
               />
-              <span className="text-[1.1rem] font-semibold text-slate-500">~</span>
+              <span className="text-[1.1rem] font-semibold text-muted-foreground">~</span>
               <DateMonthPicker
                 field={{
                   value: filters.aplcnYmTo,
@@ -314,9 +314,9 @@ export default function InftwtResultPopupPage() {
         </div>
 
         {selectedRow ? (
-          <div className="mt-3 rounded-md border border-slate-200 bg-slate-50 px-4 py-3 text-[1rem] text-slate-600">
+          <div className="mt-3 rounded-md border border-border bg-secondary px-4 py-3 text-[1rem] text-label">
             {"선택 분석: "}
-            <span className="font-semibold text-slate-800">{selectedRow.anlsInfo}</span>
+            <span className="font-semibold text-foreground">{selectedRow.anlsInfo}</span>
           </div>
         ) : null}
       </section>
diff --git a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
index 9572c1ffa..eb436b1fb 100644
--- a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisDetailPopupPage.tsx
@@ -247,18 +247,18 @@ export default function PipeAnalysisDetailPopupPage() {
   }, [baseAnalysisType, baseElapsedYearBucket, baseMaterialCode, ctpv, filters.ctpvCd, filters.sggCd, filters.swtrmtZoneNm, rows, sgg]);
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <main className="sn-popup-page">
       <LoadingOverlay isLoading={isLoading} />
-      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.45rem] font-semibold text-white">관로현황{titleSuffix}</h1>
+      <header className="sn-popup-header">
+        <h1 className="sn-popup-title">관로현황{titleSuffix}</h1>
       </header>
 
-      <section className="overflow-y-auto p-4">
-        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_110px_110px_auto] md:items-end">
+      <section className="sn-popup-section overflow-y-auto">
+        <div className="grid grid-cols-1 gap-3 border-b border-border bg-secondary pb-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_110px_110px_auto] md:items-end">
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">용도</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">용도</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.useCd}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -276,9 +276,9 @@ export default function PipeAnalysisDetailPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관재질</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">관재질</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.materialCode}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -296,9 +296,9 @@ export default function PipeAnalysisDetailPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관경 시작</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">관경 시작</div>
             <Input
-              className="h-10 !text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.diameterFrom}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -313,9 +313,9 @@ export default function PipeAnalysisDetailPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">관경 종료</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">관경 종료</div>
             <Input
-              className="h-10 !text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={filters.diameterTo}
               onChange={(event) =>
                 setFilters((current) => ({
diff --git a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
index 819351b63..921dcf04c 100644
--- a/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/pipeAnalysis/PipeAnalysisPopupPage.tsx
@@ -316,18 +316,18 @@ export default function PipeAnalysisPopupPage() {
   );
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <main className="sn-popup-page">
       <LoadingOverlay isLoading={isLoading} />
-      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.45rem] font-semibold text-white">관로분석</h1>
+      <header className="sn-popup-header">
+        <h1 className="sn-popup-title">관로분석</h1>
       </header>
 
-      <section className="overflow-y-auto p-4">
-        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
+      <section className="sn-popup-section overflow-y-auto">
+        <div className="grid grid-cols-1 gap-3 border-b border-border bg-secondary pb-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">시도</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={draftFilters.ctpvCd}
               disabled={scope.ctpvLocked}
               onChange={(event) =>
@@ -349,9 +349,9 @@ export default function PipeAnalysisPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">시군구</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={draftFilters.sggCd}
               disabled={scope.sggLocked}
               onChange={(event) =>
@@ -372,9 +372,9 @@ export default function PipeAnalysisPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">처리구역</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">처리구역</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={draftFilters.swtrmtZoneNm}
               onChange={(event) =>
                 setDraftFilters((current) => ({
@@ -392,9 +392,9 @@ export default function PipeAnalysisPopupPage() {
           </label>
 
           <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">분석구분</div>
+            <div className="mb-1 text-[1.05rem] font-medium text-label">분석구분</div>
             <select
-              className="h-10 w-full rounded-md border border-slate-300 px-3 text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               value={draftFilters.analysisType}
               onChange={(event) =>
                 setDraftFilters((current) => ({
@@ -447,7 +447,7 @@ export default function PipeAnalysisPopupPage() {
                     {headList.map((head) => (
                       <TableHead
                         key={head.id}
-                        className={`border border-border bg-[#eaf3fb] px-4 py-[1.2rem] text-[1.3rem] font-medium text-[#647784] ${
+                        className={`border border-border bg-secondary px-4 py-[1.2rem] text-[1.3rem] font-medium text-label ${
                           head.align === "right" ? "text-right" : "text-center"
                         }`}
                       >
@@ -490,7 +490,7 @@ export default function PipeAnalysisPopupPage() {
                               <TableCell
                                 key={`${group.base.ctpvCd}-${group.base.sggCd}-${group.base.swtrmtZoneNm}-${yearRow.elapsedYearBucket}-${column.key}`}
                                 className={`border border-border px-2 py-[1.2rem] text-right text-[1.3rem] ${
-                                  isClickable ? "cursor-pointer font-semibold text-blue-700 underline underline-offset-2" : ""
+                                  isClickable ? "cursor-pointer font-semibold text-primary underline underline-offset-2" : ""
                                 }`}
                                 onClick={() => {
                                   if (isClickable) {
@@ -507,7 +507,7 @@ export default function PipeAnalysisPopupPage() {
                     )
                   ) : (
                     <TableRow>
-                      <TableCell colSpan={headList.length} className="h-24 border border-border text-center text-[1.3rem] text-gray-500">
+                      <TableCell colSpan={headList.length} className="h-24 border border-border text-center text-[1.3rem] text-label">
                         조회 결과가 없습니다.
                       </TableCell>
                     </TableRow>
diff --git a/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx
index bcda216de..6cab754a6 100644
--- a/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/rdiiResult/RdiiResultPopupPage.tsx
@@ -194,17 +194,17 @@ export default function RdiiResultPopupPage() {
   };
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
+    <main className="sn-popup-page">
       <LoadingOverlay isLoading={isLoading} />
-      <header className="flex min-h-[44px] items-center justify-between border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.45rem] font-semibold text-white">RDII 분석결과</h1>
+      <header className="sn-popup-header">
+        <h1 className="sn-popup-title">RDII 분석결과</h1>
       </header>
 
-      <section className="overflow-y-auto p-4">
-        <div className="rounded-md border border-slate-200 bg-slate-50 p-4">
+      <section className="sn-popup-section overflow-y-auto">
+        <div className="rounded-md border border-border bg-secondary p-4">
           <div className="flex flex-wrap items-center gap-3">
             <div className="flex items-center gap-2">
-              <span className="whitespace-nowrap text-[1.05rem] font-medium text-slate-700">상수사용기간</span>
+              <span className="whitespace-nowrap text-[1.05rem] font-medium text-label">상수사용기간</span>
               <DateMonthPicker
                 field={{
                   value: filters.aplcnYmFrom,
@@ -218,7 +218,7 @@ export default function RdiiResultPopupPage() {
                 selectClass="w-[145px]"
                 startYear={1900}
               />
-              <span className="text-[1.1rem] font-semibold text-slate-500">~</span>
+              <span className="text-[1.1rem] font-semibold text-muted-foreground">~</span>
               <DateMonthPicker
                 field={{
                   value: filters.aplcnYmTo,
@@ -316,12 +316,12 @@ export default function RdiiResultPopupPage() {
         </div>
 
         {selectedRow ? (
-          <div className="mt-3 rounded-md border border-slate-200 bg-slate-50 px-4 py-3 text-[1rem] text-slate-600">
+          <div className="mt-3 rounded-md border border-border bg-secondary px-4 py-3 text-[1rem] text-label">
             {"선택 분석: "}
-            <span className="font-semibold text-slate-800">{selectedRow.anlsInfo}</span>
+            <span className="font-semibold text-foreground">{selectedRow.anlsInfo}</span>
           </div>
         ) : null}
       </section>
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx
index c02bd2887..05c277cae 100644
--- a/apps/sn/app/(map-layout)/map/page.tsx
+++ b/apps/sn/app/(map-layout)/map/page.tsx
@@ -5066,10 +5066,10 @@ const Map = () => {
         label: "침수심 범례",
         order: resolveSettingOrder("waterDepthLegend", 9997),
         content: (
-          <div className="overflow-hidden rounded-sm border border-sky-100 bg-sky-50/40">
+          <div className="overflow-hidden rounded-sm border border-border bg-secondary">
             <div className="px-3 py-2">
-              <div className="rounded-sm border border-slate-200 bg-white px-3 py-3">
-                <div className="mb-2 bg-blue-900 py-1 text-center text-[1.1rem] font-semibold text-white">
+              <div className="rounded-sm border border-border bg-background px-3 py-3">
+                <div className="mb-2 bg-primary py-1 text-center text-[1.1rem] font-semibold text-primary-foreground">
                   침수심 범례
                 </div>
                 <div className="space-y-1">
@@ -5082,7 +5082,7 @@ const Map = () => {
                           border: `1px solid ${item.borderColor}`,
                         }}
                       />
-                      <span className="text-[1rem] font-medium text-slate-700">{item.label}</span>
+                      <span className="text-[1rem] font-medium text-label">{item.label}</span>
                     </div>
                   ))}
                 </div>
@@ -5117,17 +5117,17 @@ const Map = () => {
     if (activeLayerSettingItems.length === 0) return null;
 
     return (
-      <div className="mt-3 overflow-hidden rounded-sm border border-slate-200 bg-white shadow-[0_4px_14px_rgba(15,23,42,0.08)]">
-        <div className="border-b border-slate-200 bg-slate-50 px-3 py-2">
+      <div className="mt-3 overflow-hidden rounded-sm border border-border bg-background shadow-[0_4px_14px_rgba(15,23,42,0.08)]">
+        <div className="border-b border-border bg-secondary px-3 py-2">
           <div className="flex items-center justify-between gap-2">
-            <span className="text-[1.2rem] font-semibold text-slate-700">선택 레이어 설정</span>
-            <span className="text-[1rem] text-slate-500">{activeLayerSettingItems.length}건</span>
+            <span className="text-[1.2rem] font-semibold text-label">선택 레이어 설정</span>
+            <span className="text-[1rem] text-muted-foreground">{activeLayerSettingItems.length}건</span>
           </div>
           <div className="mt-1 flex flex-wrap gap-1">
             {activeLayerSettingItems.map((item) => (
               <span
                 key={item.key}
-                className="rounded-full border border-slate-200 bg-white px-2 py-[1px] text-[1rem] text-slate-600"
+                className="rounded-full border border-border bg-background px-2 py-[1px] text-[1rem] text-label"
               >
                 {item.label}
               </span>
diff --git a/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
index c21dc8ca4..631ba12fb 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
@@ -34,14 +34,14 @@ const BasicTab: React.FC = () => {
   const { basicType, setBasicType } = useSearchModalStore();
 
   return (
-    <div className="relative border rounded-lg pt-5 px-5 w-full min-h-[10vh]">
+    <div className="relative w-full min-h-[10vh] rounded-lg border border-border bg-background px-5 pt-5">
       {/* 구분 */}
       <div className="mb-3 flex items-center justify-between gap-4">
         <div className="flex items-center">
-          <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구분</Label>
+          <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">구분</Label>
           <SelectBox
             className="w-[150px] mr-3"
-            selectClass="rounded-lg bg-white"
+            selectClass="rounded-lg bg-field text-foreground"
             label=""
             selectArray={BASIC_TYPES}
             onSelectValue={(value: string | number) =>
@@ -63,4 +63,4 @@ const BasicTab: React.FC = () => {
   );
 };
 
-export default React.memo(BasicTab);
\ No newline at end of file
+export default React.memo(BasicTab);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
index 63c18875d..8ef37730e 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
@@ -37,12 +37,12 @@ const OperationTab: React.FC = () => {
   }));
 
   return (
-    <div className="relative flex flex-col border rounded-lg pt-5 px-5 w-full min-h-[10vh]">
+    <div className="relative flex min-h-[10vh] w-full flex-col rounded-lg border border-border bg-background px-5 pt-5">
       <div className="flex items-center mb-3">
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">업무구분</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">업무구분</Label>
         <SelectBox
           className="w-40 mr-8"
-          selectClass="rounded-lg bg-white text-xl"
+          selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={WORK_TYPES.map((w) => ({
             val: w.val,
@@ -54,7 +54,7 @@ const OperationTab: React.FC = () => {
         />
       </div>
       <div className="flex items-center mb-6">
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업명</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">사업명</Label>
         <Input
           className="w-[100px] !text-xl placeholder:text-center mr-8"
           placeholder="입력"
@@ -74,10 +74,10 @@ const OperationTab: React.FC = () => {
           startLabel="수행기간"
           endLabel=""
         />
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업 유형</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">사업 유형</Label>
         <SelectBox
           className="w-60 mr-8"
-          selectClass="rounded-lg bg-white text-xl"
+          selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={[{ val: "0", text: "전체" }, ...BIZ_TY_CD_SELECT_ARRAY]}
           value={var2}
@@ -95,4 +95,4 @@ const OperationTab: React.FC = () => {
   )
 };
 
-export default React.memo(OperationTab);
\ No newline at end of file
+export default React.memo(OperationTab);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
index b7659604e..8ce577d8f 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
@@ -242,7 +242,7 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
             )}
             <YearRangeSelectBox
               className="shrink-0 !mr-1"
-              selectClass="rounded-lg bg-white flex-shrink-0 w-[78px]"
+              selectClass="w-[78px] flex-shrink-0 rounded-lg bg-field text-foreground"
               start={yearFilter.start}
               end={yearFilter.end}
               onChange={(range) => setYearFilter({
@@ -252,20 +252,20 @@ const ReportTab: React.FC<ReportTabProps> = ({ open, isSearch = true, ctpvNm, sg
               startLabel="승인년도"
               endLabel=""
             />
-            <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구분</Label>
+            <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">구분</Label>
             <SelectBox
               className="w-36 shrink-0"
-              selectClass="rounded-lg bg-white"
+              selectClass="rounded-lg bg-field text-foreground"
               label=""
               selectArray={plantZoneOptions}
               value={plantZoneGubun}
               onSelectValue={(val) => setPlantZoneGubun(String(val))}
               selectContentClass="z-[101]"
             />
-            <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">보고서 구분</Label>
+            <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">보고서 구분</Label>
             <SelectBox
               className="w-36 shrink-0"
-              selectClass="rounded-lg bg-white"
+              selectClass="rounded-lg bg-field text-foreground"
               label=""
               selectArray={[...REPORT_TYPES]}
               value={reportGubun}
diff --git a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
index a4cd3caca..2fda54625 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
@@ -247,9 +247,9 @@ const SearchModal: React.FC<SearchModalProps> = ({ renderMode = 'launcher', auto
   }
 
   return (
-    <div className='h-dvh overflow-x-auto overflow-y-hidden bg-white p-4'>
-      <h1 className="mb-3 text-2xl font-semibold text-gray-900">관망도 검색</h1>
-      <div className="h-[calc(100dvh-5.6rem)] w-full overflow-y-hidden rounded-lg border bg-white p-4">
+    <div className='h-dvh overflow-x-auto overflow-y-hidden bg-container p-4 text-foreground'>
+      <h1 className="mb-3 text-2xl font-semibold text-foreground">관망도 검색</h1>
+      <div className="h-[calc(100dvh-5.6rem)] w-full overflow-y-hidden rounded-lg border border-border bg-background p-4">
         {renderBody()}
       </div>
       <Toaster position="top-center" />
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
index aade9662a..c176dda2a 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
@@ -97,10 +97,10 @@ const SwageMhl: React.FC = () => {
           endLabel=""
         />
         {/* 용도 */}
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">용도</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">용도</Label>
         <SelectBox
           className="w-48 mr-8"
-          selectClass="rounded-lg bg-white text-xl"
+          selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={[{ val: "0", text: "전체" }, ...MS_SWAGE_MHL_USE_CODES]}
           value={var1}
@@ -110,7 +110,7 @@ const SwageMhl: React.FC = () => {
           selectContentClass="z-[101]"
         />
         {/* 하수맨홀 구경 */}
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구경(mm)</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">구경(mm)</Label>
         <Input
           className="w-[100px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -153,4 +153,4 @@ const SwageMhl: React.FC = () => {
   );
 };
 
-export default React.memo(SwageMhl);
\ No newline at end of file
+export default React.memo(SwageMhl);
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
index 9378c779b..4615a7c60 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
@@ -102,10 +102,10 @@ const SwagePpl: React.FC = () => {
           endLabel=""
         />
         {/* 용도 */}
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">용도</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">용도</Label>
         <SelectBox
           className="w-32 mr-8"
-          selectClass="rounded-lg bg-white text-xl"
+          selectClass="rounded-lg bg-field text-xl text-foreground"
           label=""
           selectArray={[{ val: "0", text: "전체" }, ...MS_SWAGE_PPL_USE_CODES]}
           value={var1}
@@ -128,7 +128,7 @@ const SwagePpl: React.FC = () => {
           selectContentClass="z-[101]"
         /> */}
         {/* 관경 */}
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">관경(mm)</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">관경(mm)</Label>
         <Input
           className="w-[60px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -206,4 +206,4 @@ const SwagePpl: React.FC = () => {
   );
 };
 
-export default React.memo(SwagePpl);
\ No newline at end of file
+export default React.memo(SwagePpl);
diff --git a/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
index e05b3b6b5..a38a8b46b 100644
--- a/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/FeaturePlaceholderPopupContent.tsx
@@ -4,18 +4,18 @@ type Props = {
 
 export default function FeaturePlaceholderPopupContent({ title }: Props) {
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white">
-      <header className="flex min-h-[44px] items-center border-b border-[#dbe2e6] bg-primary px-5 py-3">
-        <h1 className="text-[1.45rem] font-semibold text-white">{title}</h1>
+    <main className="sn-popup-page">
+      <header className="sn-popup-header">
+        <h1 className="sn-popup-title">{title}</h1>
       </header>
 
-      <section className="flex flex-1 items-center justify-center bg-slate-50 p-8">
-        <div className="w-full max-w-[520px] rounded-md border border-slate-200 bg-white p-8 text-center shadow-sm">
-          <h2 className="text-[1.35rem] font-semibold text-slate-800">{title}</h2>
-          <p className="mt-4 text-[1.1rem] leading-7 text-slate-600">
+      <section className="flex flex-1 items-center justify-center bg-container p-8">
+        <div className="w-full max-w-[520px] rounded-md border border-border bg-background p-8 text-center shadow-sm">
+          <h2 className="text-[1.35rem] font-semibold text-foreground">{title}</h2>
+          <p className="mt-4 text-[1.1rem] leading-7 text-label">
             현재는 팝업 창 구조만 우선 연결했습니다.
           </p>
-          <p className="mt-2 text-[1.05rem] leading-7 text-slate-500">
+          <p className="mt-2 text-[1.05rem] leading-7 text-muted-foreground">
             상세 기능은 추후 단계에서 구현될 예정입니다.
           </p>
         </div>
diff --git a/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx b/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx
index bb71a6da3..e85b8fb1d 100644
--- a/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx
+++ b/apps/sn/src/features/windowPopup/ui/SearchModalPopupContent.tsx
@@ -37,7 +37,7 @@ export default function SearchModalPopupContent() {
   }, [BIZ_SE_CD.length, BIZ_TY_CD.length, fetchBIZ_SE_CD, fetchBIZ_TY_CD, isMounted]);
 
   if (!isMounted) {
-    return <div className="h-dvh bg-white" suppressHydrationWarning />;
+    return <div className="h-dvh bg-background" suppressHydrationWarning />;
   }
 
   return <SearchModal renderMode="popup" autoSearchReady={ctpv.length > 0 && sgg.length > 0} />;