diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
index 77eee2aad..c900fe2c2 100644
--- a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipePopupPage.tsx
@@ -205,16 +205,16 @@ export default function AgedPipePopupPage() {
   };
 
   return (
-    <main className="flex h-screen w-full max-w-full min-w-0 flex-col overflow-x-hidden overflow-y-hidden bg-white">
+    <main className="sn-popup-page w-full max-w-full overflow-x-hidden overflow-y-hidden">
       <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>
         <div className="flex items-center gap-2">
           <Button
             type="button"
             color="white"
             size="xs"
-            className="border border-white/30 px-3 py-1 text-[1.05rem] text-white"
+            className="sn-popup-header-button"
             onClick={handleMinimize}
           >
             최소화
@@ -223,17 +223,17 @@ export default function AgedPipePopupPage() {
       </header>
 
       {downloadProgressText ? (
-        <div className="border-b border-slate-200 bg-emerald-50 px-5 py-2 text-[1rem] text-emerald-700">
+        <div className="sn-popup-success-bar">
           {downloadProgressText}
         </div>
       ) : null}
 
       <section className="flex min-h-0 flex-1 flex-col overflow-x-hidden px-4 pb-3 pt-3">
-        <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-3 md:grid-cols-[140px_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
-          <label className="block min-w-0">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">경과년도</div>
+        <div className="sn-popup-filter-panel-compact grid grid-cols-1 gap-3 md:grid-cols-[140px_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
+          <label className="sn-popup-field">
+            <div className="sn-popup-field-label">경과년도</div>
             <Input
-              className="h-10 !text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               type="text"
               inputMode="numeric"
               pattern="[0-9]*"
@@ -252,10 +252,10 @@ export default function AgedPipePopupPage() {
             />
           </label>
 
-          <label className="block min-w-0">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
+          <label className="sn-popup-field">
+            <div className="sn-popup-field-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.ctpvCd}
               onChange={(event) =>
                 setFilters({
@@ -274,10 +274,10 @@ export default function AgedPipePopupPage() {
             </select>
           </label>
 
-          <label className="block min-w-0">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+          <label className="sn-popup-field">
+            <div className="sn-popup-field-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.sggCd}
               onChange={(event) => setFilters({ ...filters, sggCd: event.target.value })}
             >
@@ -290,12 +290,12 @@ export default function AgedPipePopupPage() {
             </select>
           </label>
 
-          <div className="flex flex-wrap items-end justify-end gap-2">
+          <div className="sn-popup-actions">
             <Button
               type="button"
               size="sm"
               color="primary"
-              className="h-10 px-5 !text-[1.1rem]"
+              className="sn-popup-primary-button !text-[1.1rem]"
               onClick={() => void handleSearch(1)}
             >
               조회
@@ -303,8 +303,8 @@ export default function AgedPipePopupPage() {
             <Button
               type="button"
               size="sm"
-              color="green"
-              className="h-10 px-5 !text-[1.1rem]"
+              color="primary"
+              className="sn-popup-primary-button !text-[1.1rem]"
               onClick={handleDownload}
             >
               다운로드
diff --git a/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx
index 346ee33ec..f9ae60995 100644
--- a/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/floodHistory/FloodHistoryPopupPage.tsx
@@ -193,19 +193,19 @@ export default function FloodHistoryPopupPage() {
   };
 
   return (
-    <main className="flex h-screen min-w-0 flex-col overflow-hidden bg-white">
-      <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>
+    <main className="sn-popup-page">
+      <header className="sn-popup-header">
+        <h1 className="sn-popup-title">침수흔적도 목록</h1>
         <div />
       </header>
 
-      <section className="flex min-h-0 flex-1 flex-col overflow-hidden p-4">
-        <div className="border-b border-slate-200 bg-slate-50 pb-4">
+      <section className="sn-popup-section">
+        <div className="sn-popup-filter-panel-compact">
           <div className="grid grid-cols-1 gap-3 md:grid-cols-[180px_180px_180px_minmax(0,1fr)_auto] md:items-end">
-          <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
+          <label className="sn-popup-field">
+            <div className="sn-popup-field-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.ctpvCd}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -224,10 +224,10 @@ export default function FloodHistoryPopupPage() {
             </select>
           </label>
 
-          <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+          <label className="sn-popup-field">
+            <div className="sn-popup-field-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.sggCd}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -245,10 +245,10 @@ export default function FloodHistoryPopupPage() {
             </select>
           </label>
 
-          <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">침수발생년도</div>
+          <label className="sn-popup-field">
+            <div className="sn-popup-field-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.floodYear}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -266,10 +266,10 @@ export default function FloodHistoryPopupPage() {
             </select>
           </label>
 
-          <label className="block">
-            <div className="mb-1 text-[1.05rem] font-medium text-slate-700">침수재해명</div>
+          <label className="sn-popup-field">
+            <div className="sn-popup-field-label">침수재해명</div>
             <Input
-              className="h-10 !text-[1.1rem]"
+              className="sn-popup-input !text-[1.1rem]"
               type="text"
               autoComplete="off"
               value={filters.disasterName}
@@ -285,12 +285,12 @@ export default function FloodHistoryPopupPage() {
             />
           </label>
 
-          <div className="flex flex-wrap justify-end gap-2 md:pr-3">
+          <div className="sn-popup-actions md:pr-3">
             <Button
               type="button"
               size="sm"
               color="primary"
-              className="h-10 px-5 !text-[1.1rem]"
+              className="sn-popup-primary-button !text-[1.1rem]"
               onClick={handleSearch}
             >
               조회
@@ -298,8 +298,8 @@ export default function FloodHistoryPopupPage() {
             <Button
               type="button"
               size="sm"
-              color="green"
-              className="h-10 px-5 !text-[1.1rem]"
+              color="primary"
+              className="sn-popup-primary-button !text-[1.1rem]"
               onClick={() => void handleDownload()}
             >
               다운로드
@@ -354,7 +354,7 @@ export default function FloodHistoryPopupPage() {
                     return (
                       <TableRow
                         key={row.historyId}
-                        className={`cursor-pointer ${isSelected ? "bg-blue-50" : "hover:bg-slate-50"}`}
+                        className={`cursor-pointer ${isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row-hover"}`}
                         onClick={() => handleRowClick(row)}
                         onDoubleClick={() => handleRowDoubleClick(row)}
                       >
@@ -380,7 +380,7 @@ export default function FloodHistoryPopupPage() {
                   })
                 ) : (
                   <TableRow>
-                    <TableCell colSpan={GRID_COLUMNS.length} className="h-24 text-center text-gray-500">
+                     <TableCell colSpan={GRID_COLUMNS.length} className="sn-popup-empty-cell h-24 text-center">
                       조회된 데이터가 없습니다.
                     </TableCell>
                   </TableRow>
@@ -398,7 +398,7 @@ export default function FloodHistoryPopupPage() {
             />
           ) : null}
 
-          <div className="mt-2 rounded-md border border-slate-200 bg-slate-50 px-4 py-3 text-[1.05rem] text-slate-600">
+          <div className="sn-popup-help-text">
             행 클릭 시 메인 지도에 미리 표시되고, 더블클릭하면 팝업을 닫습니다. 상세정보는 지도 위 침수흔적 영역을 클릭해 확인합니다.
           </div>
         </div>
diff --git a/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx
index a838764d8..fabd7c029 100644
--- a/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/gisManagement/GisManagementPopupPage.tsx
@@ -247,23 +247,23 @@ export default function GisManagementPopupPage() {
   };
 
   return (
-    <main className="flex h-screen items-start justify-center bg-[linear-gradient(180deg,#f7f9fc_0%,#eef4fa_100%)] px-[12px] py-[12px] text-[#202a36]">
-      <section className="w-full max-w-[920px] overflow-hidden rounded-[12px] border border-[#d8e3ef] bg-[rgba(255,255,255,0.96)] shadow-[0_16px_36px_rgba(31,59,87,0.10)] backdrop-blur-[2px]">
-        <header className="flex h-[44px] items-center border-b border-[#e2ebf5] bg-[linear-gradient(180deg,#ffffff_0%,#f3f8fd_100%)] px-[18px]">
-          <h1 className="text-[1.35rem] font-semibold tracking-[-0.01em] text-[#1f3b57]">
+    <main className="sn-popup-modal-page">
+      <section className="sn-popup-modal-shell max-w-[920px] shadow-[0_16px_36px_rgba(31,59,87,0.10)] backdrop-blur-[2px]">
+        <header className="sn-popup-modal-header">
+          <h1 className="sn-popup-modal-title">
             GIS 관리
           </h1>
         </header>
 
         <div className="px-[16px] pb-[16px] pt-[10px]">
-          <div className="mb-[10px] mt-[4px] text-[1.05rem] font-medium tracking-[-0.01em] text-slate-700">
+          <div className="sn-popup-panel-title mb-[10px] mt-[4px]">
             GIS 업로드
           </div>
 
           <div className="mb-[8px] flex items-center justify-between gap-[12px] px-[2px]">
             <div className="flex min-w-0 flex-1 items-center gap-[10px]">
               <select
-                className="h-[32px] w-[110px] shrink-0 rounded-[6px] border border-[#cad7e6] bg-[linear-gradient(180deg,#ffffff_0%,#f8fbff_100%)] px-[10px] text-[1.02rem] font-medium text-slate-700 outline-none transition focus:border-[#8bbef0] focus:shadow-[0_0_0_2px_rgba(47,126,196,0.12)]"
+                className="sn-popup-input-sm h-[32px] w-[110px] shrink-0"
                 value={selectedFacilityTypeCode}
                 onChange={handleFacilityTypeChange}
                 aria-label="시설구분"
@@ -284,7 +284,7 @@ export default function GisManagementPopupPage() {
                 placeholder="선택된 파일 없음"
                 readOnly
                 aria-label="선택 파일명"
-                className="h-[32px] min-w-0 flex-1 rounded-[6px] border-[#cad7e6] bg-[linear-gradient(180deg,#ffffff_0%,#f8fbff_100%)] px-[10px] py-0 !text-[1.02rem] font-medium text-slate-700 placeholder:text-[#9aa8b7] shadow-[inset_0_1px_0_rgba(255,255,255,0.7)] focus-visible:ring-0 focus-visible:ring-offset-0"
+                className="sn-popup-input-sm h-[32px] min-w-0 flex-1 py-0 !text-[1.02rem] shadow-[inset_0_1px_0_rgba(255,255,255,0.7)] focus-visible:ring-0 focus-visible:ring-offset-0"
               />
             </div>
 
@@ -292,7 +292,7 @@ export default function GisManagementPopupPage() {
               <Button
                 type="button"
                 size="sm"
-                className="h-[32px] min-w-[56px] rounded-sm bg-blue-600 px-0 py-2 text-sm font-medium text-white hover:bg-blue-700"
+                className="sn-popup-primary-button-sm h-[32px] min-w-[56px]"
                 onClick={handleOpenFilePicker}
               >
                 찾기
@@ -301,7 +301,7 @@ export default function GisManagementPopupPage() {
               <Button
                 type="button"
                 size="sm"
-                className="h-[32px] min-w-[64px] rounded-sm bg-blue-600 px-0 py-2 text-sm font-medium text-white hover:bg-blue-700"
+                className="sn-popup-primary-button-sm h-[32px] min-w-[64px]"
                 onClick={handleUpload}
               >
                 업로드
@@ -321,38 +321,38 @@ export default function GisManagementPopupPage() {
           />
 
           <div className="mb-[8px] flex items-center justify-between px-[2px]">
-            <div className="text-[1.05rem] font-medium tracking-[-0.01em] text-slate-700">
-              GIS 업로드 현황
-            </div>
+              <div className="sn-popup-panel-title">
+                GIS 업로드 현황
+              </div>
 
             <Button
               type="button"
               size="sm"
-              color="green"
-              className="h-[32px] min-w-[82px] rounded-sm px-[10px] py-2 text-sm font-medium text-white"
+              color="primary"
+              className="sn-popup-primary-button-sm h-[32px] min-w-[82px] px-[10px]"
               onClick={handleDownload}
             >
               다운로드
             </Button>
           </div>
 
-          <div className="overflow-hidden rounded-[10px] border border-[#d6e1ee] bg-[linear-gradient(180deg,#ffffff_0%,#f9fbfe_100%)] shadow-[0_6px_16px_rgba(31,59,87,0.06),inset_0_1px_0_rgba(255,255,255,0.78)]">
+          <div className="sn-popup-card shadow-[0_6px_16px_rgba(31,59,87,0.06),inset_0_1px_0_rgba(255,255,255,0.78)]">
             <Table variant="secondary" className="text-[1.02rem]">
             <TableHeader className="!static bg-transparent">
               <TableRow className="border-0">
-                <TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
                   no
                 </TableHead>
-                <TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
                   시설구분
                 </TableHead>
-                <TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
                   파일명
                 </TableHead>
-                <TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
                   등록일자
                 </TableHead>
-                <TableHead className="h-[32px] border border-[#d7e3ef] bg-[#eaf3fb] px-[12px] py-[5px] text-left text-[1.0rem] font-medium text-[#647784]">
+                <TableHead className="h-[32px] border border-border bg-secondary px-[12px] py-[5px] text-left text-[1rem] font-medium text-title">
                   등록자
                 </TableHead>
               </TableRow>
@@ -362,10 +362,10 @@ export default function GisManagementPopupPage() {
               {pagedUploadHistory.map((history, index) => {
                 const isSelected = history.uploadId === selectedUploadId;
                 const backgroundColor = isSelected
-                  ? "#eef6ff"
+                  ? "var(--primary-transparent)"
                   : index % 2 === 0
-                    ? "#ffffff"
-                    : "#f9fbfd";
+                    ? "var(--background)"
+                    : "var(--secondary)";
                 const rowNumber =
                   (currentPage - 1) * GIS_UPLOAD_PAGE_SIZE + index + 1;
 
@@ -376,19 +376,19 @@ export default function GisManagementPopupPage() {
                     onClick={() => setSelectedUploadId(history.uploadId)}
                     style={{ backgroundColor }}
                   >
-                    <TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
                       {rowNumber}
                     </TableCell>
-                    <TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
                       {history.facilityTypeName}
                     </TableCell>
-                    <TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
                       {history.fileName}
                     </TableCell>
-                    <TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
                       {history.registeredAt}
                     </TableCell>
-                    <TableCell className="h-[40px] border border-[#dde7f0] px-[12px] py-[8px] text-[1.0rem] font-normal text-[#43566b]">
+                    <TableCell className="h-[40px] border border-border px-[12px] py-[8px] text-[1rem] font-normal text-foreground">
                       {history.registeredBy}
                     </TableCell>
                   </TableRow>
diff --git a/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx b/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx
index 2eecde5a6..ed21c01d1 100644
--- a/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx
+++ b/apps/sn/app/(map-layout)/map/components/waterRisk/WaterRiskPopupPage.tsx
@@ -57,18 +57,18 @@ const DEFAULT_SETTING_FILTERS: SettingFilters = {
 };
 
 const TOOLBAR_INPUT_CLASS_NAME =
-  "h-10 rounded-md border border-slate-300 bg-white px-3 text-[1.05rem] text-slate-700 outline-none";
+  "sn-popup-input";
 
 const SECONDARY_BUTTON_CLASS_NAME =
-  "h-10 rounded-md border border-slate-300 bg-white px-5 text-[1.05rem] text-slate-700 hover:bg-slate-100";
+  "sn-popup-secondary-button";
 
 const ACTION_BUTTON_CLASS_NAME =
-  "h-10 px-5 !text-[1.05rem]";
+  "sn-popup-primary-button";
 const WATER_RISK_PAGE_SIZE = 10;
 const RESULT_TABLE_CONTAINER_CLASS_NAME =
-  "min-h-0 overflow-hidden border border-[#dbe2e6] bg-white";
+  "sn-popup-card min-h-0";
 const SETTING_TABLE_CONTAINER_CLASS_NAME =
-  "min-h-0 overflow-hidden border border-[#dbe2e6] bg-white";
+  "sn-popup-card min-h-0";
 
 const postMessageToOpener = (type: string, payload?: Record<string, unknown>) => {
   if (typeof window === "undefined" || !window.opener) return;
@@ -118,8 +118,8 @@ const buildSavePreview = (
 
 const getRiskBadgeClassName = (riskStatus: "DANGER" | "NORMAL") =>
   riskStatus === "DANGER"
-    ? "bg-[#ff1c15] text-white"
-    : "bg-white text-[#111827]";
+    ? "sn-popup-badge-danger"
+    : "sn-popup-badge-normal";
 
 export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
   const [activeView, setActiveView] = useState<WaterRiskView>("result");
@@ -393,28 +393,28 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
   };
 
   return (
-    <main className="flex h-screen flex-col overflow-hidden bg-white text-slate-800">
-      <header className="flex min-h-[44px] items-center border-b border-[#dbe2e6] bg-primary px-5 py-3">
+    <main className="sn-popup-page">
+      <header className="sn-popup-header justify-start">
         {activeView === "setting" ? (
           <button
             type="button"
-            className="mr-3 text-[1.05rem] font-medium text-white/90 hover:text-white"
+            className="sn-popup-header-link"
             onClick={handleReturnToResultView}
           >
             ← 결과조회
           </button>
         ) : null}
-        <h1 className="text-[1.45rem] font-semibold text-white">
+        <h1 className="sn-popup-title">
           {activeView === "result" ? "통수위험분석" : "통수위험분석 설정"}
         </h1>
       </header>
 
-      <section className="flex-1 overflow-y-auto p-4">
+      <section className="sn-popup-section overflow-y-auto">
         {activeView === "result" ? (
           <section className="flex h-full min-h-0 flex-col gap-3">
-            <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[160px_140px_140px_140px_180px_120px_auto] md:items-end">
-              <label className="block">
-                <div className="mb-1 text-[1.05rem] font-medium text-slate-700">기준일자</div>
+            <div className="sn-popup-filter-panel md:grid-cols-[160px_140px_140px_140px_180px_120px_auto] md:items-end">
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">기준일자</div>
                   <input
                     type="date"
                     value={draftResultFilters.analysisDate}
@@ -425,11 +425,11 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       }))
                     }
                     aria-label="년월일"
-                    className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
+                    className={TOOLBAR_INPUT_CLASS_NAME}
                   />
               </label>
-              <label className="block">
-                <div className="mb-1 text-[1.05rem] font-medium text-slate-700">기준시간</div>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">기준시간</div>
                   <input
                     type="time"
                     value={draftResultFilters.analysisTime}
@@ -440,11 +440,11 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       }))
                     }
                     aria-label="시간"
-                    className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
+                    className={TOOLBAR_INPUT_CLASS_NAME}
                   />
               </label>
-              <label className="block">
-                <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">시도</div>
                   <select
                     value={draftResultFilters.sidoName}
                     onChange={(event) =>
@@ -455,7 +455,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       }))
                     }
                     aria-label="시도"
-                    className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
+                    className={TOOLBAR_INPUT_CLASS_NAME}
                   >
                     {WATER_RISK_SIDO_OPTIONS.map((option) => (
                       <option key={option} value={option}>
@@ -464,8 +464,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                     ))}
                   </select>
               </label>
-              <label className="block">
-                <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">시군구</div>
                   <select
                     value={draftResultFilters.sggName}
                     onChange={(event) =>
@@ -475,7 +475,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       }))
                     }
                     aria-label="시군구"
-                    className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
+                    className={TOOLBAR_INPUT_CLASS_NAME}
                   >
                     {resultSggOptions.map((option) => (
                       <option key={option} value={option}>
@@ -484,8 +484,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                     ))}
                   </select>
               </label>
-              <label className="block">
-                <div className="mb-1 text-[1.05rem] font-medium text-slate-700">중점관리지역</div>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">중점관리지역</div>
                   <select
                     value={draftResultFilters.areaId}
                     onChange={(event) =>
@@ -495,7 +495,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       }))
                     }
                     aria-label="중점관리지역"
-                    className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
+                    className={TOOLBAR_INPUT_CLASS_NAME}
                   >
                     <option value="ALL">중점관리지역</option>
                     {resultAreaOptions.map((option) => (
@@ -505,8 +505,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                     ))}
                   </select>
               </label>
-              <label className="block">
-                <div className="mb-1 text-[1.05rem] font-medium text-slate-700">위험상태</div>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">위험상태</div>
                   <select
                     value={draftResultFilters.riskStatus}
                     onChange={(event) =>
@@ -516,19 +516,19 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       }))
                     }
                     aria-label="위험상태"
-                    className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
+                    className={TOOLBAR_INPUT_CLASS_NAME}
                   >
                     <option value="ALL">전체</option>
                     <option value="DANGER">위험</option>
                     <option value="NORMAL">정상</option>
                   </select>
               </label>
-              <div className="flex flex-wrap items-end justify-end gap-2">
+              <div className="sn-popup-actions">
                   <Button
                     type="button"
                     size="sm"
                     color="primary"
-                    className="h-10 px-5 !text-[1.05rem]"
+                    className="sn-popup-primary-button"
                     onClick={handleApplyResultFilters}
                   >
                     조회
@@ -554,32 +554,32 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
             <div className={RESULT_TABLE_CONTAINER_CLASS_NAME}>
               <div className="overflow-x-auto overflow-y-hidden">
                 <table
-                  className="border-collapse text-[1.05rem]"
+                  className="sn-popup-grid-table"
                   style={{ minWidth: `${resultTableMinWidth}px`, width: "100%" }}
                 >
                   <thead>
-                    <tr className="bg-[#eaf3fb] text-[#647784]">
-                      <th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">no</th>
-                      <th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">시도</th>
-                      <th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">시군구</th>
-                      <th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">중점관리지역</th>
-                      <th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">예측강우량(mm)</th>
+                    <tr className="sn-popup-grid-head-row">
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">no</th>
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">시도</th>
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">시군구</th>
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">중점관리지역</th>
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">예측강우량(mm)</th>
                       {Array.from({ length: maxPipeCount }).map((_, index) => (
                         <th
                           key={`pipe-group-${index + 1}`}
                           colSpan={2}
-                          className="border border-[#d1dae2] px-2 py-2"
+                          className="sn-popup-grid-head-cell"
                         >
                           관로 ID {index + 1}
                         </th>
                       ))}
-                      <th rowSpan={2} className="border border-[#d1dae2] px-2 py-2">통수위험</th>
+                      <th rowSpan={2} className="sn-popup-grid-head-cell">통수위험</th>
                     </tr>
-                    <tr className="bg-[#eaf3fb] text-[#647784]">
+                    <tr className="sn-popup-grid-head-row">
                       {Array.from({ length: maxPipeCount }).map((_, index) => (
                         <Fragment key={`pipe-sub-${index + 1}`}>
-                          <th className="border border-[#d1dae2] px-2 py-1">유출유량(㎥/hr)</th>
-                          <th className="border border-[#d1dae2] px-2 py-1">통수량(㎥/hr)</th>
+                          <th className="sn-popup-grid-head-cell-sub">유출유량(㎥/hr)</th>
+                          <th className="sn-popup-grid-head-cell-sub">통수량(㎥/hr)</th>
                         </Fragment>
                       ))}
                     </tr>
@@ -593,29 +593,29 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       return (
                         <tr
                           key={row.areaId}
-                          className={`cursor-pointer ${isSelected ? "bg-[#eef6ff]" : "bg-white"}`}
+                          className={`cursor-pointer ${isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row sn-popup-grid-row-hover"}`}
                           onClick={() => handleSelectResultRow(row)}
                         >
-                          <td className="border border-[#dbe4ec] px-2 py-2 text-center">{rowNumber}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2">{row.sidoName}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2">{row.sggName}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2 font-semibold">{row.areaName}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2 text-right">{row.forecastRainQty.toFixed(1)}</td>
+                          <td className="sn-popup-grid-cell text-center">{rowNumber}</td>
+                          <td className="sn-popup-grid-cell">{row.sidoName}</td>
+                          <td className="sn-popup-grid-cell">{row.sggName}</td>
+                          <td className="sn-popup-grid-cell font-semibold">{row.areaName}</td>
+                          <td className="sn-popup-grid-cell text-right">{row.forecastRainQty.toFixed(1)}</td>
                           {Array.from({ length: maxPipeCount }).map((_, pipeIndex) => {
                             const pipe = row.pipeSummaries[pipeIndex];
                             return (
                               <Fragment key={`${row.areaId}-pipe-${pipeIndex}`}>
-                                <td className="border border-[#dbe4ec] px-2 py-2 text-right">
+                                <td className="sn-popup-grid-cell text-right">
                                   {pipe ? pipe.runoffFlowQty.toFixed(1) : ""}
                                 </td>
-                                <td className="border border-[#dbe4ec] px-2 py-2 text-right">
+                                <td className="sn-popup-grid-cell text-right">
                                   {pipe ? pipe.conveyQty.toFixed(1) : ""}
                                 </td>
                               </Fragment>
                             );
                           })}
-                          <td className="border border-[#dbe4ec] px-2 py-2 text-center">
-                            <span className={`inline-flex min-w-[56px] items-center justify-center px-2 py-1 text-[12px] font-semibold ${getRiskBadgeClassName(row.riskStatus)}`}>
+                          <td className="sn-popup-grid-cell text-center">
+                            <span className={`sn-popup-badge min-w-[56px] ${getRiskBadgeClassName(row.riskStatus)}`}>
                               {buildWaterRiskStatusLabel(row.riskStatus)}
                             </span>
                           </td>
@@ -640,9 +640,9 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
           </section>
         ) : (
           <section className="flex h-full min-h-0 flex-col gap-3">
-            <div className="grid grid-cols-1 gap-3 border-b border-slate-200 bg-slate-50 pb-4 md:grid-cols-[160px_160px_220px_auto] md:items-end">
-              <label className="block">
-                <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시도</div>
+            <div className="sn-popup-filter-panel md:grid-cols-[160px_160px_220px_auto] md:items-end">
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">시도</div>
                   <select
                     value={draftSettingFilters.sidoName}
                     onChange={(event) =>
@@ -653,7 +653,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       }))
                     }
                     aria-label="시도"
-                    className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
+                    className={TOOLBAR_INPUT_CLASS_NAME}
                   >
                     {WATER_RISK_SIDO_OPTIONS.map((option) => (
                       <option key={option} value={option}>
@@ -662,8 +662,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                     ))}
                   </select>
               </label>
-              <label className="block">
-                <div className="mb-1 text-[1.05rem] font-medium text-slate-700">시군구</div>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">시군구</div>
                   <select
                     value={draftSettingFilters.sggName}
                     onChange={(event) =>
@@ -673,7 +673,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       }))
                     }
                     aria-label="시군구"
-                    className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
+                    className={TOOLBAR_INPUT_CLASS_NAME}
                   >
                     {settingSggOptions.map((option) => (
                       <option key={option} value={option}>
@@ -682,8 +682,8 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                     ))}
                   </select>
               </label>
-              <label className="block">
-                <div className="mb-1 text-[1.05rem] font-medium text-slate-700">중점관리지역</div>
+              <label className="sn-popup-field">
+                <div className="sn-popup-field-label">중점관리지역</div>
                   <select
                     value={draftSettingFilters.areaId}
                     onChange={(event) =>
@@ -693,7 +693,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       }))
                     }
                     aria-label="중점관리지역"
-                    className={`${TOOLBAR_INPUT_CLASS_NAME} w-full`}
+                    className={TOOLBAR_INPUT_CLASS_NAME}
                   >
                     <option value="ALL">중점관리지역</option>
                     {settingAreaOptions.map((option) => (
@@ -703,12 +703,12 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                     ))}
                   </select>
               </label>
-              <div className="flex flex-wrap items-end justify-end gap-2">
+              <div className="sn-popup-actions">
                   <Button
                     type="button"
                     size="sm"
                     color="primary"
-                    className="h-10 px-5 !text-[1.05rem]"
+                    className="sn-popup-primary-button"
                     onClick={handleApplySettingFilters}
                   >
                     조회
@@ -727,20 +727,20 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
             >
               <div className="overflow-x-auto overflow-y-hidden">
                 <table
-                  className="border-collapse text-[1.05rem]"
+                  className="sn-popup-grid-table"
                   style={{ minWidth: `${settingTableMinWidth}px`, width: "100%" }}
                 >
-                  <thead className="bg-[#eaf3fb] text-[#647784]">
+                  <thead className="sn-popup-grid-head-row">
                     <tr>
-                      <th className="border border-[#d1dae2] px-2 py-2">시도</th>
-                      <th className="border border-[#d1dae2] px-2 py-2">시군구</th>
-                      <th className="border border-[#d1dae2] px-2 py-2">중점관리지역</th>
-                      <th className="border border-[#d1dae2] px-2 py-2">유출관로ID</th>
-                      <th className="border border-[#d1dae2] px-2 py-2">관경</th>
-                      <th className="border border-[#d1dae2] px-2 py-2">연장</th>
-                      <th className="border border-[#d1dae2] px-2 py-2">재질</th>
-                      <th className="border border-[#d1dae2] px-2 py-2">설정순번</th>
-                      <th className="border border-[#d1dae2] px-2 py-2">설정완료여부</th>
+                      <th className="sn-popup-grid-head-cell">시도</th>
+                      <th className="sn-popup-grid-head-cell">시군구</th>
+                      <th className="sn-popup-grid-head-cell">중점관리지역</th>
+                      <th className="sn-popup-grid-head-cell">유출관로ID</th>
+                      <th className="sn-popup-grid-head-cell">관경</th>
+                      <th className="sn-popup-grid-head-cell">연장</th>
+                      <th className="sn-popup-grid-head-cell">재질</th>
+                      <th className="sn-popup-grid-head-cell">설정순번</th>
+                      <th className="sn-popup-grid-head-cell">설정완료여부</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -751,18 +751,18 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                       return (
                         <tr
                           key={`${row.areaId}-${row.pipeId}`}
-                          className={`cursor-pointer ${isSelected ? "bg-[#eef6ff]" : "bg-white"}`}
+                          className={`cursor-pointer ${isSelected ? "sn-popup-grid-row-selected" : "sn-popup-grid-row sn-popup-grid-row-hover"}`}
                           onClick={() => handleSelectSettingArea(row.areaId)}
                         >
-                          <td className="border border-[#dbe4ec] px-2 py-2">{row.sidoName}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2">{row.sggName}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2 font-semibold">{row.areaName}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2">{row.pipeId}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2">{row.pipeDia}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2">{row.pipeLen}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2">{row.pipeMaterial}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2 text-center">{row.setSeq}</td>
-                          <td className="border border-[#dbe4ec] px-2 py-2 text-center">
+                          <td className="sn-popup-grid-cell">{row.sidoName}</td>
+                          <td className="sn-popup-grid-cell">{row.sggName}</td>
+                          <td className="sn-popup-grid-cell font-semibold">{row.areaName}</td>
+                          <td className="sn-popup-grid-cell">{row.pipeId}</td>
+                          <td className="sn-popup-grid-cell">{row.pipeDia}</td>
+                          <td className="sn-popup-grid-cell">{row.pipeLen}</td>
+                          <td className="sn-popup-grid-cell">{row.pipeMaterial}</td>
+                          <td className="sn-popup-grid-cell text-center">{row.setSeq}</td>
+                          <td className="sn-popup-grid-cell text-center">
                             {row.setCompleteYn === "Y" ? "완료" : "미완료"}
                           </td>
                         </tr>
@@ -785,10 +785,10 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
             ) : null}
 
             {showSettingEditor ? (
-              <div className="min-h-0 flex-1 overflow-hidden border border-[#dbe2e6] bg-white">
+              <div className="sn-popup-card min-h-0 flex-1">
                 <div className="flex h-full min-h-0 flex-col">
-                  <div className="flex items-center justify-between border-b border-slate-200 bg-slate-50 px-4 py-3">
-                    <div className="text-[1.05rem] font-medium text-slate-700">
+                  <div className="flex items-center justify-between border-b border-border bg-secondary px-4 py-3">
+                    <div className="sn-popup-panel-title">
                       설정 편집 대상: {currentSettingAreaName || "선택 전"}
                     </div>
                     <div className="flex items-center gap-2">
@@ -796,7 +796,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                         type="button"
                         size="sm"
                         color="white"
-                        className="h-9 rounded-md border border-slate-300 bg-white px-4 text-[1.05rem] text-slate-700 hover:bg-slate-100"
+                        className="sn-popup-secondary-button-sm"
                         onClick={handleStopSettingEdit}
                       >
                         편집 종료
@@ -805,7 +805,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                         type="button"
                         size="sm"
                         color="white"
-                        className="h-9 rounded-md border border-slate-300 bg-white px-4 text-[1.05rem] text-slate-700 hover:bg-slate-100"
+                        className="sn-popup-secondary-button-sm"
                         onClick={handleClearStagedPipes}
                         disabled={snapshot.stagedPipes.length === 0}
                       >
@@ -824,16 +824,16 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                   </div>
 
                   <div className="min-h-0 flex-1 overflow-auto">
-                    <table className="w-full border-collapse text-[1.05rem]">
-                      <thead className="bg-[#e1ebf5] text-[#24364d]">
+                    <table className="sn-popup-grid-table">
+                      <thead className="sn-popup-grid-head-row-strong">
                         <tr>
-                          <th className="border border-[#dbe4ec] px-2 py-2">순번</th>
-                          <th className="border border-[#dbe4ec] px-2 py-2">유출관로ID</th>
-                          <th className="border border-[#dbe4ec] px-2 py-2">관경</th>
-                          <th className="border border-[#dbe4ec] px-2 py-2">연장</th>
-                          <th className="border border-[#dbe4ec] px-2 py-2">재질</th>
-                          <th className="border border-[#dbe4ec] px-2 py-2">선택원천</th>
-                          <th className="border border-[#dbe4ec] px-2 py-2">조작</th>
+                          <th className="sn-popup-grid-head-cell">순번</th>
+                          <th className="sn-popup-grid-head-cell">유출관로ID</th>
+                          <th className="sn-popup-grid-head-cell">관경</th>
+                          <th className="sn-popup-grid-head-cell">연장</th>
+                          <th className="sn-popup-grid-head-cell">재질</th>
+                          <th className="sn-popup-grid-head-cell">선택원천</th>
+                          <th className="sn-popup-grid-head-cell">조작</th>
                         </tr>
                       </thead>
                       <tbody>
@@ -841,7 +841,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                           <tr>
                             <td
                               colSpan={7}
-                              className="border border-[#dbe4ec] px-3 py-6 text-center text-[#64748b]"
+                              className="sn-popup-grid-cell sn-popup-empty-cell px-3 py-6 text-center"
                             >
                               staged 유출관로가 없습니다. 지도에서 하수관로를 선택하세요.
                             </td>
@@ -850,21 +850,21 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                           snapshot.stagedPipes.map((pipe, index) => (
                             <tr
                               key={pipe.pipeId}
-                              className="bg-white"
+                              className="sn-popup-grid-row"
                             >
-                              <td className="border border-[#dbe4ec] px-2 py-2 text-center">{index + 1}</td>
-                              <td className="border border-[#dbe4ec] px-2 py-2 font-semibold">{pipe.pipeId}</td>
-                              <td className="border border-[#dbe4ec] px-2 py-2">{pipe.pipeDia}</td>
-                              <td className="border border-[#dbe4ec] px-2 py-2">{pipe.pipeLen}</td>
-                              <td className="border border-[#dbe4ec] px-2 py-2">{pipe.pipeMaterial}</td>
-                              <td className="border border-[#dbe4ec] px-2 py-2">{pipe.source}</td>
-                              <td className="border border-[#dbe4ec] px-2 py-2">
+                              <td className="sn-popup-grid-cell text-center">{index + 1}</td>
+                              <td className="sn-popup-grid-cell font-semibold">{pipe.pipeId}</td>
+                              <td className="sn-popup-grid-cell">{pipe.pipeDia}</td>
+                              <td className="sn-popup-grid-cell">{pipe.pipeLen}</td>
+                              <td className="sn-popup-grid-cell">{pipe.pipeMaterial}</td>
+                              <td className="sn-popup-grid-cell">{pipe.source}</td>
+                              <td className="sn-popup-grid-cell">
                                 <div className="flex items-center gap-1">
                                   <Button
                                     type="button"
                                     size="sm"
                                     color="white"
-                                    className="h-9 rounded-md border border-slate-300 bg-white px-4 text-[1.05rem] text-slate-700 hover:bg-slate-100"
+                                    className="sn-popup-secondary-button-sm"
                                     onClick={() => handleMoveStagedPipe(pipe.pipeId, "UP")}
                                     disabled={index === 0}
                                   >
@@ -874,7 +874,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                                     type="button"
                                     size="sm"
                                     color="white"
-                                    className="h-9 rounded-md border border-slate-300 bg-white px-4 text-[1.05rem] text-slate-700 hover:bg-slate-100"
+                                    className="sn-popup-secondary-button-sm"
                                     onClick={() => handleMoveStagedPipe(pipe.pipeId, "DOWN")}
                                     disabled={index === snapshot.stagedPipes.length - 1}
                                   >
@@ -884,7 +884,7 @@ export default function WaterRiskPopupPage(_props: WindowPopupContentProps) {
                                     type="button"
                                     size="sm"
                                     color="white"
-                                    className="h-9 rounded-md border border-[#e7b7b7] bg-white px-4 text-[1.05rem] text-[#c62828] hover:bg-[#fff8f8]"
+                                    className="sn-popup-danger-button-sm"
                                     onClick={() => handleRemoveStagedPipe(pipe.pipeId)}
                                   >
                                     삭제
diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx
index 082460f20..c02bd2887 100644
--- a/apps/sn/app/(map-layout)/map/page.tsx
+++ b/apps/sn/app/(map-layout)/map/page.tsx
@@ -7129,7 +7129,7 @@ const Map = () => {
           }
           waterDepth={undefined}
           layerSettingView={ActiveLayerSettingView}
-          treeSectionClassName="rounded-sm border border-slate-300 px-1 py-2"
+          treeSectionClassName="rounded-sm border border-border bg-background px-1 py-2 text-foreground"
           detachedTreeToggleButton={true}
           isPlaying={isPlaying}
           setIsPlaying={setIsPlaying as any}
diff --git a/apps/sn/src/app/styles/components-black.css b/apps/sn/src/app/styles/components-black.css
index 4dc30bafd..d6378dad4 100644
--- a/apps/sn/src/app/styles/components-black.css
+++ b/apps/sn/src/app/styles/components-black.css
@@ -2,28 +2,19 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
-  }
-
-  [data-theme="black"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
   }
 }
diff --git a/apps/sn/src/app/styles/components-blue.css b/apps/sn/src/app/styles/components-blue.css
index 7c1e9db27..d6378dad4 100644
--- a/apps/sn/src/app/styles/components-blue.css
+++ b/apps/sn/src/app/styles/components-blue.css
@@ -2,28 +2,19 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
-  }
-
-  [data-theme="blue"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
   }
 }
diff --git a/apps/sn/src/app/styles/components-green.css b/apps/sn/src/app/styles/components-green.css
index 4b4cc770e..d6378dad4 100644
--- a/apps/sn/src/app/styles/components-green.css
+++ b/apps/sn/src/app/styles/components-green.css
@@ -2,28 +2,19 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
-  }
-
-  [data-theme="green"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
   }
 }
diff --git a/apps/sn/src/app/styles/components-red.css b/apps/sn/src/app/styles/components-red.css
index cadffac52..d6378dad4 100644
--- a/apps/sn/src/app/styles/components-red.css
+++ b/apps/sn/src/app/styles/components-red.css
@@ -2,28 +2,19 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
-  }
-
-  [data-theme="red"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
   }
 }
diff --git a/apps/sn/src/app/styles/components.css b/apps/sn/src/app/styles/components.css
index e7a0d904d..a92f6ad27 100644
--- a/apps/sn/src/app/styles/components.css
+++ b/apps/sn/src/app/styles/components.css
@@ -2,20 +2,193 @@
 
 @layer components {
   .card {
-    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
   }
   .card-border {
-    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+    @apply border border-border bg-background shadow-blur;
   }
   .card-header {
-    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
   }
   .card-footer {
-    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
   }
 
   input[type="file"] {
-    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
+  }
+
+  .sn-popup-page {
+    @apply flex h-screen min-w-0 flex-col overflow-hidden bg-background text-foreground;
+  }
+
+  .sn-popup-modal-page {
+    @apply flex h-screen items-start justify-center bg-container px-3 py-3 text-foreground;
+  }
+
+  .sn-popup-shell {
+    @apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
+  }
+
+  .sn-popup-modal-shell {
+    @apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
+  }
+
+  .sn-popup-header {
+    @apply flex min-h-[44px] items-center justify-between border-b border-border bg-primary px-5 py-3;
+  }
+
+  .sn-popup-modal-header {
+    @apply flex h-[44px] items-center border-b border-border bg-secondary px-[18px];
+  }
+
+  .sn-popup-title {
+    @apply text-[1.45rem] font-semibold text-primary-foreground;
+  }
+
+  .sn-popup-modal-title {
+    @apply text-[1.35rem] font-semibold tracking-[-0.01em] text-foreground;
+  }
+
+  .sn-popup-header-link {
+    @apply mr-3 text-[1.05rem] font-medium text-primary-foreground hover:text-primary-foreground;
+    opacity: 0.9;
+  }
+
+  .sn-popup-header-button {
+    @apply border px-3 py-1 text-[1.05rem] text-primary-foreground;
+    border-color: color-mix(in srgb, var(--primary-foreground) 30%, transparent);
+  }
+
+  .sn-popup-section {
+    @apply flex min-h-0 flex-1 flex-col overflow-hidden p-4;
+  }
+
+  .sn-popup-filter-panel {
+    @apply grid grid-cols-1 gap-3 border-b border-border bg-secondary pb-4;
+  }
+
+  .sn-popup-filter-panel-compact {
+    @apply border-b border-border bg-secondary pb-3;
+  }
+
+  .sn-popup-field {
+    @apply block min-w-0;
+  }
+
+  .sn-popup-field-label {
+    @apply mb-1 text-[1.05rem] font-medium text-label;
+  }
+
+  .sn-popup-input {
+    @apply h-10 w-full rounded-md border border-input bg-field px-3 text-[1.05rem] text-foreground outline-none placeholder:text-placeholder focus:ring-2 focus:ring-ring;
+  }
+
+  .sn-popup-input-sm {
+    @apply h-[32px] rounded-[6px] border border-input bg-field px-[10px] text-[1.02rem] font-medium text-foreground outline-none transition placeholder:text-placeholder focus:ring-2 focus:ring-ring;
+  }
+
+  .sn-popup-actions {
+    @apply flex flex-wrap items-end justify-end gap-2;
+  }
+
+  .sn-popup-primary-button {
+    @apply h-10 px-5 !text-[1.05rem];
+  }
+
+  .sn-popup-secondary-button {
+    @apply h-10 rounded-md border border-input bg-background px-5 text-[1.05rem] text-foreground hover:bg-accent;
+  }
+
+  .sn-popup-secondary-button-sm {
+    @apply h-9 rounded-md border border-input bg-background px-4 text-[1.05rem] text-foreground hover:bg-accent;
+  }
+
+  .sn-popup-danger-button-sm {
+    @apply h-9 rounded-md border border-destructive bg-background px-4 text-[1.05rem] text-destructive;
+  }
+
+  .sn-popup-danger-button-sm:hover {
+    background-color: color-mix(in srgb, var(--destructive) 10%, var(--background));
+  }
+
+  .sn-popup-primary-button-sm {
+    @apply h-[32px] min-w-[56px] rounded-sm bg-primary px-0 py-2 text-sm font-medium text-primary-foreground hover:opacity-90;
+  }
+
+  .sn-popup-status-bar {
+    @apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-label;
+  }
+
+  .sn-popup-success-bar {
+    @apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-foreground;
+  }
+
+  .sn-popup-card {
+    @apply overflow-hidden rounded-[10px] border border-border bg-background;
+  }
+
+  .sn-popup-panel-title {
+    @apply text-[1.05rem] font-medium tracking-[-0.01em] text-label;
+  }
+
+  .sn-popup-grid-table {
+    @apply w-full border-collapse text-[1.05rem];
+  }
+
+  .sn-popup-grid-head-row {
+    @apply bg-secondary text-title;
+  }
+
+  .sn-popup-grid-head-row-strong {
+    @apply bg-muted text-foreground;
+  }
+
+  .sn-popup-grid-head-cell {
+    @apply border border-border px-2 py-2;
+  }
+
+  .sn-popup-grid-head-cell-sub {
+    @apply border border-border px-2 py-1;
+  }
+
+  .sn-popup-grid-cell {
+    @apply border border-border px-2 py-2 text-foreground;
+  }
+
+  .sn-popup-grid-row {
+    @apply bg-background;
+  }
+
+  .sn-popup-grid-row-hover {
+  }
+
+  .sn-popup-grid-row-hover:hover {
+    background-color: color-mix(in srgb, var(--secondary) 60%, var(--background));
+  }
+
+  .sn-popup-grid-row-selected {
+    @apply bg-primary-transparent;
+  }
+
+  .sn-popup-empty-cell {
+    @apply text-label;
+  }
+
+  .sn-popup-badge {
+    @apply inline-flex items-center justify-center px-2 py-1 text-[12px] font-semibold;
+  }
+
+  .sn-popup-badge-danger {
+    @apply bg-destructive text-destructive-foreground;
+  }
+
+  .sn-popup-badge-normal {
+    @apply border border-border bg-background text-foreground;
+  }
+
+  .sn-popup-help-text {
+    @apply mt-2 rounded-md border border-border bg-secondary px-4 py-3 text-[1.05rem] text-label;
   }
 }
 /* `I/I 분석 > 침입수 분석결과`는 나중에 다시 사용할 수 있도록 라우트는 유지하고 LNB에서만 임시 숨김 처리한다. */
@@ -25,4 +198,4 @@
 }
 [data-sidebar="menu"] > *:nth-child(2) [data-sidebar="menu-sub"] > li:nth-child(4) {
   display: none;
-}
\ No newline at end of file
+}