diff --git a/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx b/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx
index ec150d55b..f67175f9e 100644
--- a/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx
+++ b/apps/dm/app/(landing)/reuse/cases/_components/RainStatusSection.tsx
@@ -1,133 +1,99 @@
-"use client";
+'use client';
 
-import React from "react";
+import React from 'react';
 
 // 공통 섹션 타이틀 컴포넌트
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    <div className='flex items-center gap-3'>
+      <span className='h-5 w-[3px] bg-sky-500' />
+      <h3 className='text-[24px] font-bold text-neutral-900'>{children}</h3>
     </div>
   );
 }
 
 // 구분선
-function Hr({ className = "" }: { className?: string }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 // 출처 텍스트
 function SourceText() {
-  return (
-    <p className="mt-7 text-center text-[13px] text-neutral-500">
-      자료: 환경부(2024), 「2023 하수도 통계」
-    </p>
-  );
+  return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 환경부(2024), 「2023 하수도 통계」</p>;
 }
 
 const tableStyles = {
-  container: "w-[1000px] mx-auto overflow-hidden",
-  table: "w-full table-fixed border-collapse text-center text-[16px]",
-  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
-  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
-  headerBg: "bg-[#E3E7EA]",
+  container: 'w-[1000px] mx-auto overflow-hidden',
+  table: 'w-full table-fixed border-collapse text-center text-[16px]',
+  th: 'border border-[#858F98] py-3 font-bold text-neutral-800',
+  td: 'border border-[#858F98] py-3 text-neutral-700 font-medium break-keep',
+  headerBg: 'bg-[#E3E7EA]',
 };
 
 export default function RainStatusSection() {
-  const title = "빗물이용시설(현황)";
+  const title = '빗물이용시설(현황)';
 
   return (
-    <div className="bg-white">
+    <div className='bg-white'>
       {/* 상단 타이틀 */}
-      <div className="inline-block">
-        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
-            <span className="relative z-10">{title}</span>
-            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+      <div className='inline-block'>
+        <h2 className='relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900'>
+          <span className='relative z-10'>{title}</span>
+          <span className='absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300' />
         </h2>
       </div>
 
-      <div className="mt-10 pb-[120px]">
+      <div className='mt-10 pb-[120px]'>
         {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
-        <section id="status-rain-building" className="mt-10 scroll-mt-[120px]">
+        <section id='status-rain-building' className='mt-10 scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
 
-          <div className="mt-10">
+          <div className='mt-10'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "160px" }}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                       구분
                     </th>
-                    <th
-                      colSpan={6}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
-                    >
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       빗물이용량 (천m³/년)
                     </th>
                   </tr>
                   <tr>
-                    <th
-                      className={`${tableStyles.th} bg-[#01ACE5] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`} style={{ width: '140px' }}>
                       2018
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#17AFC7] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#17AFC7] text-white`} style={{ width: '140px' }}>
                       2019
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#2CB2A9] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#2CB2A9] text-white`} style={{ width: '140px' }}>
                       2020
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#42B58B] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#42B58B] text-white`} style={{ width: '140px' }}>
                       2021
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#57B86D] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#57B86D] text-white`} style={{ width: '140px' }}>
                       2022
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#81C784] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#81C784] text-white`} style={{ width: '140px' }}>
                       2023
                     </th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    ["골프장", "6,771.8", "6,417.4", "8,371.6", "10,215.4", "11,360", "10,191.6"],
-                    ["공공시설", "364", "325.2", "201.9", "244.6", "209.9", "299.6"],
-                    ["공동주택", "291", "840.5", "804.2", "2,393.0", "2,386", "2,428.4"],
-                    ["대규모점포", "169.9", "214.4", "58.4", "427.2", "371", "293.3"],
-                    ["체육시설", "52.6", "44.7", "48.6", "75.3", "71.8", "77.6"],
-                    ["학교", "33", "25.5", "22", "155.8", "165.4", "32.6"],
-                    ["기타", "311.6", "901.2", "344.5", "537.8", "564", "621.2"],
+                    ['골프장', '6,771.8', '6,417.4', '8,371.6', '10,215.4', '11,360', '10,191.6'],
+                    ['공공시설', '364', '325.2', '201.9', '244.6', '209.9', '299.6'],
+                    ['공동주택', '291', '840.5', '804.2', '2,393.0', '2,386', '2,428.4'],
+                    ['대규모점포', '169.9', '214.4', '58.4', '427.2', '371', '293.3'],
+                    ['체육시설', '52.6', '44.7', '48.6', '75.3', '71.8', '77.6'],
+                    ['학교', '33', '25.5', '22', '155.8', '165.4', '32.6'],
+                    ['기타', '311.6', '901.2', '344.5', '537.8', '564', '621.2'],
                   ].map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {row.map((val, i) => (
-                        <td
-                          key={i}
-                          className={`${tableStyles.td} ${
-                            i === 0 ? "!font-bold !text-neutral-900" : ""
-                          } ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
-                        >
+                        <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 5].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                           {val}
                         </td>
                       ))}
@@ -141,129 +107,79 @@ export default function RainStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */}
-        <section
-          id="status-rain-purpose-distribution"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-rain-purpose-distribution' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "160px" }}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                       용도
                     </th>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "84px" }}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
                       개소수
                       <br />
                       (개소)
                     </th>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "84px" }}
-                    >
-                      저류용량
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      저류조용량
                       <br />
                       (천m³)
                     </th>
-                    <th
-                      colSpan={8}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
-                    >
+                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       빗물이용량 (천m³/년)
                     </th>
                   </tr>
                   <tr>
-                    <th
-                      className={`${tableStyles.th} bg-[#01ACE5] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#01ACE5] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       총사용량
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#10AED0] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#10AED0] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       공공시설
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#20B0BA] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#20B0BA] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       공동주택
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#2FB2A5] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#2FB2A5] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       대규모점포
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#3FB58F] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#3FB58F] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       체육시설
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#4EB77A] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#4EB77A] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       학교
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#5EB964] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#5EB964] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       골프장
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#6DBB4F] py-2 text-[13px] text-white`}
-                      style={{ width: "84px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] py-2 text-[13px] text-white`} style={{ width: '84px' }}>
                       기타
                     </th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    ["청소·환경정화용수", "195", "32.7", "108.8", "24.9", "5.8", "2.6", "4.4", "2.9", "-", "68.1"],
-                    ["세척·살수용수", "12", "1.4", "37", "35", "-", "-", "1.9", "-", "-", "0.2"],
-                    ["조경용수", "3,165", "7,440.8", "13,554.1", "168.1", "2,421.9", "290.7", "66.2", "29", "10,044", "534.3"],
-                    ["냉·난방수", "8", "1.6", "0.1", "-", "-", "-", "-", "0.1", "-", "-"],
-                    ["공업용수", "6", "14.9", "53.2", "52.8", "-", "-", "-", "-", "-", "0.4"],
-                    ["농업용수", "6.0", "0.5", "0.6", "-", "-", "-", "-", "-", "-", "0.6"],
-                    ["기타", "48", "306.1", "155.6", "2.8", "-", "-", "0.6", "0.5", "147.5", "4.2"],
-                    ["미기재", "103", "22.9", "34.8", "16.0", "0.6", "-", "4.6", "0.2", "-", "13.5"],
-                    ["합계", "3,543", "7,820.8", "13,944.7", "299.6", "2,428.4", "293.3", "77.6", "32.6", "10,191.6", "621.2"],
+                    ['청소·환경정화용수', '195', '32.7', '108.8', '24.9', '5.8', '2.6', '4.4', '2.9', '-', '68.1'],
+                    ['세척·살수용수', '12', '1.4', '37', '35', '-', '-', '1.9', '-', '-', '0.2'],
+                    ['조경용수', '3,165', '7,440.8', '13,554.1', '168.1', '2,421.9', '290.7', '66.2', '29', '10,044', '534.3'],
+                    ['냉·난방수', '8', '1.6', '0.1', '-', '-', '-', '-', '0.1', '-', '-'],
+                    ['공업용수', '6', '14.9', '53.2', '52.8', '-', '-', '-', '-', '-', '0.4'],
+                    ['농업용수', '6.0', '0.5', '0.6', '-', '-', '-', '-', '-', '-', '0.6'],
+                    ['기타', '48', '306.1', '155.6', '2.8', '-', '-', '0.6', '0.5', '147.5', '4.2'],
+                    ['미기재', '103', '22.9', '34.8', '16.0', '0.6', '-', '4.6', '0.2', '-', '13.5'],
+                    ['합계', '3,543', '7,820.8', '13,944.7', '299.6', '2,428.4', '293.3', '77.6', '32.6', '10,191.6', '621.2'],
                   ].map((row, idx) => (
-                    <tr
-                      key={idx}
-                      className={idx === 8 ? "bg-white font-bold" : "bg-white"}
-                    >
+                    <tr key={idx} className={idx === 8 ? 'bg-white font-bold' : 'bg-white'}>
                       {row.map((val, i) => {
                         const isHighlightedCol = [1, 2].includes(i);
 
                         return (
-                          <td
-                            key={i}
-                            className={`${tableStyles.td} ${
-                              i === 0 ? "!font-bold !text-neutral-900" : ""
-                            } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
-                          >
+                          <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}>
                             {val}
                           </td>
                         );
@@ -278,91 +194,58 @@ export default function RainStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
-        <section
-          id="status-rain-purpose-usage"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-rain-purpose-usage' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                      style={{ width: "160px" }}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                       용도
                     </th>
-                    <th
-                      colSpan={6}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
-                    >
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       빗물이용량 (천m³/년)
                     </th>
                   </tr>
                   <tr>
-                    <th
-                      className={`${tableStyles.th} bg-[#01ACE5] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`} style={{ width: '140px' }}>
                       2018
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#14AFCD] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`} style={{ width: '140px' }}>
                       2019
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#28B2B4] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`} style={{ width: '140px' }}>
                       2020
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#3CB59A] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`} style={{ width: '140px' }}>
                       2021
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#50B880] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`} style={{ width: '140px' }}>
                       2022
                     </th>
-                    <th
-                      className={`${tableStyles.th} bg-[#6DBB4F] text-white`}
-                      style={{ width: "140px" }}
-                    >
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`} style={{ width: '140px' }}>
                       2023
                     </th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    ["청소·화장실용수", "126.5", "134.1", "96.5", "153.9", "140.5", "108.8"],
-                    ["세척·살수용수", "14.8", "14.6", "9.5", "49.8", "49.7", "37.0"],
-                    ["조경용수", "7,629.8", "8,496.2", "9,415.4", "13,360.4", "14,466.3", "13,554.1"],
-                    ["친수용수", "1.0", "0.1", "0.1", "0.1", "0.1", "0.1"],
-                    ["공업용수", "152.0", "77.0", "77.0", "75.4", "0.4", "53.2"],
-                    ["농업용수", "4.4", "4.3", "4.3", "4.3", "0.6", "0.6"],
-                    ["기타", "37.7", "42.6", "230.7", "394.3", "463.2", "155.6"],
+                    ['청소·화장실용수', '126.5', '134.1', '96.5', '153.9', '140.5', '108.8'],
+                    ['세척·살수용수', '14.8', '14.6', '9.5', '49.8', '49.7', '37.0'],
+                    ['조경용수', '7,629.8', '8,496.2', '9,415.4', '13,360.4', '14,466.3', '13,554.1'],
+                    ['친수용수', '1.0', '0.1', '0.1', '0.1', '0.1', '0.1'],
+                    ['공업용수', '152.0', '77.0', '77.0', '75.4', '0.4', '53.2'],
+                    ['농업용수', '4.4', '4.3', '4.3', '4.3', '0.6', '0.6'],
+                    ['기타', '37.7', '42.6', '230.7', '394.3', '463.2', '155.6'],
                   ].map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {row.map((val, i) => (
-                        <td
-                          key={i}
-                          className={`${tableStyles.td} ${
-                            i === 0 ? "!font-bold !text-neutral-900" : ""
-                          } ${[1, 3, 5].includes(i) ? "bg-[#EAF5F5]" : ""}`}
-                        >
+                        <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 5].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                           {val}
                         </td>
                       ))}
@@ -378,4 +261,4 @@ export default function RainStatusSection() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx b/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx
index 0a2b34d5d..5a953e2c3 100644
--- a/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx
+++ b/apps/dm/app/(landing)/reuse/cases/_components/SewageStatusSection.tsx
@@ -1,60 +1,56 @@
-"use client";
+'use client';
 
-import React from "react";
+import React from 'react';
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    <div className='flex items-center gap-3'>
+      <span className='h-5 w-[3px] bg-sky-500' />
+      <h3 className='text-[24px] font-bold text-neutral-900'>{children}</h3>
     </div>
   );
 }
 
-function Hr({ className = "" }: { className?: string }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 function SourceText() {
-  return (
-    <p className="mt-7 text-center text-[13px] text-neutral-500">
-      자료: 환경부(2024), 「2023 하수도 통계」
-    </p>
-  );
+  return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 환경부(2024), 「2023 하수도 통계」</p>;
 }
 
 const tableStyles = {
-  container: "w-[1000px] mx-auto overflow-hidden",
-  table: "w-full table-fixed border-collapse text-center text-[16px]",
-  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
-  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
-  headerBg: "bg-[#E3E7EA]",
+  container: 'w-[1000px] mx-auto overflow-hidden',
+  table: 'w-full table-fixed border-collapse text-center text-[16px]',
+  th: 'border border-[#858F98] py-3 font-bold text-neutral-800',
+  td: 'border border-[#858F98] py-3 text-neutral-700 font-medium break-keep',
+  headerBg: 'bg-[#E3E7EA]',
 };
 
 export default function SewageStatusSection() {
-  const title = "하수처리수 재이용시설(현황)";
+  const title = '하수처리수 재이용시설(현황)';
 
   return (
-    <div className="relative bg-white">
+    <div className='relative bg-white'>
       {/* 상단 타이틀 */}
-      <div className="inline-block">
-        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
-            <span className="relative z-10">{title}</span>
-            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+      <div className='inline-block'>
+        <h2 className='relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900'>
+          <span className='relative z-10'>{title}</span>
+          <span className='absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300' />
         </h2>
       </div>
 
-      <div className="mt-10">
+      <div className='mt-10'>
         {/* 1) 연도별 하수처리수 재이용 현황 */}
-        <section id="status-treated-year" className="mt-10 scroll-mt-[120px]">
+        <section id='status-treated-year' className='mt-10 scroll-mt-[120px]'>
           <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-10">
+          <div className='mt-10'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "130px" }} />
-                  <col style={{ width: "180px" }} />
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '180px' }} />
                   <col />
                   <col />
                   <col />
@@ -64,166 +60,52 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th
-                      colSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       구분
                     </th>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
-                      2018
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
-                      2019
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
-                      2020
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
-                      2021
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
-                      2022
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
-                      2023
-                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
                     {
-                      group: "전체",
+                      group: '전체',
                       rows: [
-                        [
-                          "개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "671",
-                          "681",
-                          "698",
-                          "704",
-                          "714",
-                          "717",
-                        ],
-                        [
-                          "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "7,163.7",
-                          "7,140.4",
-                          "7,375.6",
-                          "7,335.8",
-                          "7,378.9",
-                          "7,537.2",
-                        ],
-                        [
-                          "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "1,112.7",
-                          "1,148.7",
-                          "1,148.7",
-                          "1,127.0",
-                          "1,136.8",
-                          "1,137.5",
-                        ],
-                        [
-                          "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
-                          "17.4",
-                          "16.5",
-                          "15.5",
-                          "14.1",
-                          "14.3",
-                          "14.4",
-                        ],
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '671', '681', '698', '704', '714', '717'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '7,163.7', '7,140.4', '7,375.6', '7,335.8', '7,378.9', '7,537.2'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '1,112.7', '1,148.7', '1,148.7', '1,127.0', '1,136.8', '1,137.5'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '17.4', '16.5', '15.5', '14.1', '14.3', '14.4'],
                       ],
                     },
                     {
-                      group: "법적 대상",
+                      group: '법적 대상',
                       rows: [
-                        [
-                          "개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "68",
-                          "82",
-                          "94",
-                          "97",
-                          "101",
-                          "118",
-                        ],
-                        [
-                          "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "761.2",
-                          "839.0",
-                          "935.3",
-                          "1,158.7",
-                          "1,220.6",
-                          "1,473.6",
-                        ],
-                        [
-                          "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "162.2",
-                          "190.6",
-                          "218.5",
-                          "244.6",
-                          "247.2",
-                          "324.9",
-                        ],
-                        [
-                          "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
-                          "24.7",
-                          "25.4",
-                          "27.8",
-                          "25.7",
-                          "24.2",
-                          "24.1",
-                        ],
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '68', '82', '94', '97', '101', '118'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '761.2', '839.0', '935.3', '1,158.7', '1,220.6', '1,473.6'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '162.2', '190.6', '218.5', '244.6', '247.2', '324.9'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '24.7', '25.4', '27.8', '25.7', '24.2', '24.1'],
                       ],
                     },
                     {
-                      group: "법적 미대상",
+                      group: '법적 미대상',
                       rows: [
-                        [
-                          "개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "603",
-                          "599",
-                          "604",
-                          "607",
-                          "613",
-                          "599",
-                        ],
-                        [
-                          "하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "6,402.5",
-                          "6,301.4",
-                          "6,440.3",
-                          "6,177.1",
-                          "6,158.3",
-                          "6,063.5",
-                        ],
-                        [
-                          "재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>",
-                          "950.6",
-                          "958.1",
-                          "926.2",
-                          "882.4",
-                          "889.5",
-                          "812.7",
-                        ],
-                        [
-                          "재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>",
-                          "16.5",
-                          "15.3",
-                          "13.6",
-                          "12.2",
-                          "12.6",
-                          "12.5",
-                        ],
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '603', '599', '604', '607', '613', '599'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '6,402.5', '6,301.4', '6,440.3', '6,177.1', '6,158.3', '6,063.5'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '950.6', '958.1', '926.2', '882.4', '889.5', '812.7'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '16.5', '15.3', '13.6', '12.2', '12.6', '12.5'],
                       ],
                     },
                   ].map((section, sIdx) => (
                     <React.Fragment key={sIdx}>
                       {section.rows.map((row, rIdx) => (
-                        <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                        <tr key={`${sIdx}-${rIdx}`} className='bg-white'>
                           {rIdx === 0 && (
-                            <td
-                              rowSpan={section.rows.length}
-                              className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
-                            >
+                            <td rowSpan={section.rows.length} className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}>
                               {section.group}
                             </td>
                           )}
@@ -234,9 +116,7 @@ export default function SewageStatusSection() {
                             return (
                               <td
                                 key={i}
-                                className={`${tableStyles.td} ${
-                                  isFirstCol ? "!font-bold !text-neutral-900" : ""
-                                } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                                className={`${tableStyles.td} ${isFirstCol ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}
                                 dangerouslySetInnerHTML={{ __html: val }}
                               />
                             );
@@ -253,17 +133,17 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 용도별 하수처리수 재이용 현황 */}
-        <section id="status-treated-usage" className="scroll-mt-[120px]">
+        <section id='status-treated-usage' className='scroll-mt-[120px]'>
           <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "180px" }} />
+                  <col style={{ width: '180px' }} />
                   <col />
                   <col />
                   <col />
@@ -273,88 +153,59 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>
-                      구분
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
-                      2018
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
-                      2019
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
-                      2020
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
-                      2021
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
-                      2022
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
-                      2023
-                    </th>
+                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    { label: "총 재이용량", type: "total", values: ["1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"] },
-                    { label: "장내 재이용", type: "category", values: ["520.6", "519.8", "513.9", "520.3", "502.2", "490.0"] },
-                    { label: "세척수", type: "red-item", values: ["177.9", "174.4", "169.4", "180.9", "196.8", "191.2"] },
-                    { label: "냉각수", type: "red-item", values: ["45.5", "46.8", "50.4", "40.6", "38.3", "41.7"] },
-                    { label: "청소수", type: "red-item", values: ["17.6", "21.2", "21.2", "21.7", "20.8", "20.5"] },
-                    { label: "조경용수", type: "red-item", values: ["0.1", "0.1", "-", "-", "-", "-"] },
-                    { label: "회생용수", type: "red-item", values: ["15.8", "16.7", "17.8", "15.7", "14.4", "14.0"] },
-                    { label: "장내급수도", type: "red-item", values: ["2.4", "-", "-", "-", "-", "-"] },
-                    { label: "장내기타용수", type: "red-item", values: ["261.3", "260.6", "255.0", "261.1", "231.8", "222.6"] },
-                    { label: "장외 재이용", type: "category", values: ["592.1", "628.9", "630.8", "606.7", "634.6", "647.5"] },
-                    { label: "청소·화장실용수", type: "blue-item", values: ["0.6", "0.4", "0.4", "0.4", "0.4", "0.4"] },
-                    { label: "세척·살수용수", type: "blue-item", values: ["5.6", "9.9", "2.9", "2.1", "3.0", "3.6"] },
-                    { label: "조경용수", type: "blue-item", values: ["10.3", "16.4", "5.9", "4.5", "8.9", "9.5"] },
-                    { label: "친수용수", type: "blue-item", values: ["7.8", "3.1", "3.1", "3.0", "10.9", "10.5"] },
-                    { label: "하천유지용수", type: "blue-item", values: ["480.5", "482.5", "496.2", "442.7", "471.7", "484.0"] },
-                    { label: "농업용수", type: "blue-item", values: ["12.2", "11.9", "13.4", "10.7", "10.6", "11.4"] },
-                    { label: "지하수 충전", type: "blue-item", values: ["0.0", "0.0", "0.0", "13.4", "0.0", "0.0"] },
-                    { label: "공업용수", type: "blue-item", values: ["75.2", "104.6", "108.9", "129.9", "129.0", "128.1"] },
+                    { label: '총 재이용량', type: 'total', values: ['1,112.7', '1,148.7', '1,144.7', '1,127.0', '1,136.8', '1,137.5'] },
+                    { label: '장내 재이용', type: 'category', values: ['520.6', '519.8', '513.9', '520.3', '502.2', '490.0'] },
+                    { label: '세척수', type: 'red-item', values: ['177.9', '174.4', '169.4', '180.9', '196.8', '191.2'] },
+                    { label: '냉각수', type: 'red-item', values: ['45.5', '46.8', '50.4', '40.6', '38.3', '41.7'] },
+                    { label: '청소수', type: 'red-item', values: ['17.6', '21.2', '21.2', '21.7', '20.8', '20.5'] },
+                    { label: '조경용수', type: 'red-item', values: ['0.1', '0.1', '-', '-', '-', '-'] },
+                    { label: '회생용수', type: 'red-item', values: ['15.8', '16.7', '17.8', '15.7', '14.4', '14.0'] },
+                    { label: '장내급수도', type: 'red-item', values: ['2.4', '-', '-', '-', '-', '-'] },
+                    { label: '장내기타용수', type: 'red-item', values: ['261.3', '260.6', '255.0', '261.1', '231.8', '222.6'] },
+                    { label: '장외 재이용', type: 'category', values: ['592.1', '628.9', '630.8', '606.7', '634.6', '647.5'] },
+                    { label: '청소·화장실용수', type: 'blue-item', values: ['0.6', '0.4', '0.4', '0.4', '0.4', '0.4'] },
+                    { label: '세척·살수용수', type: 'blue-item', values: ['5.6', '9.9', '2.9', '2.1', '3.0', '3.6'] },
+                    { label: '조경용수', type: 'blue-item', values: ['10.3', '16.4', '5.9', '4.5', '8.9', '9.5'] },
+                    { label: '친수용수', type: 'blue-item', values: ['7.8', '3.1', '3.1', '3.0', '10.9', '10.5'] },
+                    { label: '하천유지용수', type: 'blue-item', values: ['480.5', '482.5', '496.2', '442.7', '471.7', '484.0'] },
+                    { label: '농업용수', type: 'blue-item', values: ['12.2', '11.9', '13.4', '10.7', '10.6', '11.4'] },
+                    { label: '지하수 충전', type: 'blue-item', values: ['0.0', '0.0', '0.0', '13.4', '0.0', '0.0'] },
+                    { label: '공업용수', type: 'blue-item', values: ['75.2', '104.6', '108.9', '129.9', '129.0', '128.1'] },
                   ].map((row, idx) => {
-                    const isSubItem = row.type === "red-item" || row.type === "blue-item";
+                    const isSubItem = row.type === 'red-item' || row.type === 'blue-item';
                     const isLastInGroup = idx === 8 || idx === 17;
 
                     return (
-                      <tr key={idx} className="bg-white">
+                      <tr key={idx} className='bg-white'>
                         <td className={`${tableStyles.td} relative`}>
                           {isSubItem ? (
                             <>
+                              <div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
                               <div
-                                className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${
-                                  isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
+                                className={`absolute left-[16px] w-[4px] z-20 ${row.type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${
+                                  isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'
                                 }`}
                               />
-                              <div
-                                className={`absolute left-[16px] w-[4px] z-20 ${
-                                  row.type === "red-item" ? "bg-[#FF8B8B]" : "bg-[#4ECBFF]"
-                                } top-[-2px] ${
-                                  isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
-                                }`}
-                              />
-                              <span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">
-                                {row.label}
-                              </span>
+                              <span className='text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]'>{row.label}</span>
                             </>
                           ) : (
-                            <span className="font-bold text-neutral-900 block w-full text-center">
-                              {row.label}
-                            </span>
+                            <span className='font-bold text-neutral-900 block w-full text-center'>{row.label}</span>
                           )}
                         </td>
 
                         {row.values.map((val, i) => (
-                          <td
-                            key={i}
-                            className={`${tableStyles.td} ${
-                              [0, 2, 4].includes(i) ? "bg-[#EAF5F5]" : ""
-                            }`}
-                          >
+                          <td key={i} className={`${tableStyles.td} ${[0, 2, 4].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                             {val}
                           </td>
                         ))}
@@ -369,18 +220,18 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 하수처리시설 설치 및 이용 현황 */}
-        <section id="status-treated-facility" className="scroll-mt-[120px]">
+        <section id='status-treated-facility' className='scroll-mt-[120px]'>
           <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "130px" }} />
-                  <col style={{ width: "160px" }} />
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '160px' }} />
                   <col />
                   <col />
                   <col />
@@ -390,139 +241,49 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th
-                      colSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       구분
                     </th>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>
-                      2018
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>
-                      2019
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>
-                      2020
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>
-                      2021
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>
-                      2022
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>
-                      2023
-                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
                     {
-                      group: "전체",
+                      group: '전체',
                       rows: [
-                        [
-                          "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "671",
-                          "681",
-                          "698",
-                          "704",
-                          "714",
-                          "717",
-                        ],
-                        [
-                          "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "25,846",
-                          "26,067",
-                          "26,244",
-                          "26,492",
-                          "26,586",
-                          "26,766",
-                        ],
-                        [
-                          "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "1,112.7",
-                          "1,148.7",
-                          "1,144.7",
-                          "1,127.0",
-                          "1,136.8",
-                          "1,137.5",
-                        ],
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '671', '681', '698', '704', '714', '717'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '25,846', '26,067', '26,244', '26,492', '26,586', '26,766'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '1,112.7', '1,148.7', '1,144.7', '1,127.0', '1,136.8', '1,137.5'],
                       ],
                     },
                     {
-                      group: "법적 대상",
+                      group: '법적 대상',
                       rows: [
-                        [
-                          "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "68",
-                          "82",
-                          "94",
-                          "97",
-                          "101",
-                          "118",
-                        ],
-                        [
-                          "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "3,088.9",
-                          "3,359.2",
-                          "3,612.6",
-                          "4,412.2",
-                          "4,692.3",
-                          "5,503.8",
-                        ],
-                        [
-                          "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "162.2",
-                          "190.6",
-                          "218.5",
-                          "244.6",
-                          "247.2",
-                          "324.9",
-                        ],
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '68', '82', '94', '97', '101', '118'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '3,088.9', '3,359.2', '3,612.6', '4,412.2', '4,692.3', '5,503.8'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '162.2', '190.6', '218.5', '244.6', '247.2', '324.9'],
                       ],
                     },
                     {
-                      group: "법적 미대상",
+                      group: '법적 미대상',
                       rows: [
-                        [
-                          "시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>",
-                          "603",
-                          "599",
-                          "604",
-                          "607",
-                          "613",
-                          "599",
-                        ],
-                        [
-                          "시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "22,757",
-                          "22,708",
-                          "22,631",
-                          "22,080",
-                          "21,894",
-                          "21,262",
-                        ],
-                        [
-                          "처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>",
-                          "950.6",
-                          "958.1",
-                          "926.2",
-                          "882.4",
-                          "889.5",
-                          "812.7",
-                        ],
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '603', '599', '604', '607', '613', '599'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '22,757', '22,708', '22,631', '22,080', '21,894', '21,262'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '950.6', '958.1', '926.2', '882.4', '889.5', '812.7'],
                       ],
                     },
                   ].map((section, sIdx) => (
                     <React.Fragment key={sIdx}>
                       {section.rows.map((row, rIdx) => (
-                        <tr key={`${sIdx}-${rIdx}`} className="bg-white">
+                        <tr key={`${sIdx}-${rIdx}`} className='bg-white'>
                           {rIdx === 0 && (
-                            <td
-                              rowSpan={section.rows.length}
-                              className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
-                            >
+                            <td rowSpan={section.rows.length} className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}>
                               {section.group}
                             </td>
                           )}
@@ -533,9 +294,7 @@ export default function SewageStatusSection() {
                             return (
                               <td
                                 key={i}
-                                className={`${tableStyles.td} ${
-                                  isFirstCol ? "!font-bold !text-neutral-900" : ""
-                                } ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
+                                className={`${tableStyles.td} ${isFirstCol ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}
                                 dangerouslySetInnerHTML={{ __html: val }}
                               />
                             );
@@ -552,24 +311,19 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 4) 시도별 하수처리수 재이용 현황 */}
-        <section
-          id="status-treated-region"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-treated-region' className='scroll-mt-[120px]'>
           <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
-              <div className="mb-2 text-right text-[13px] text-neutral-600">
-                (단위: 백만m³/일)
-              </div>
+              <div className='mb-2 text-right text-[13px] text-neutral-600'>(단위: 백만m³/년)</div>
 
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "160px" }} />
+                  <col style={{ width: '160px' }} />
                   <col />
                   <col />
                   <col />
@@ -583,110 +337,71 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th
-                      rowSpan={3}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       시도
                     </th>
-                    <th
-                      rowSpan={3}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       연간
                       <br />
                       하수
                       <br />
                       처리량
                     </th>
-                    <th
-                      colSpan={7}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}
-                    >
+                    <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       재이용현황
                     </th>
-                    <th
-                      rowSpan={3}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       재이용률
                       <br />
                       (%)
                     </th>
-                    <th
-                      rowSpan={3}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       비고
                     </th>
                   </tr>
                   <tr>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       계
                     </th>
-                    <th
-                      rowSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       장내
                     </th>
-                    <th
-                      colSpan={5}
-                      className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}
-                    >
+                    <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>
                       장외
                     </th>
                   </tr>
                   <tr>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>
-                      소계
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>
-                      하천유지용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>
-                      공업용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>
-                      농업용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>
-                      기타용수
-                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
+                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
+                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
+                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
                   </tr>
                 </thead>
                 <tbody>
                   {[
-                    ["합계", "7,537.2", "1,137.5", "490.0", "647.5", "484.0", "128.1", "11.4", "24.0", "15.1%", ""],
-                    ["서울특별시", "1,567.0", "114.9", "59.3", "55.6", "55.1", "-", "-", "0.5", "7.3%", ""],
-                    ["부산광역시", "491.5", "146.2", "120.7", "25.5", "25.3", "-", "-", "0.2", "29.7%", ""],
-                    ["대구광역시", "432.7", "102.4", "38.2", "64.2", "64.1", "-", "-", "0.1", "23.7%", ""],
-                    ["인천광역시", "302.3", "57.7", "11.6", "46.1", "29.2", "12.1", "0.5", "4.3", "19.1%", ""],
-                    ["광주광역시", "211.1", "28.7", "6.5", "22.3", "22.2", "-", "-", "0.1", "13.6%", ""],
-                    ["대전광역시", "244.6", "11.9", "11.9", "0.68", "0.0", "-", "-", "0.1", "4.9%", ""],
-                    ["울산광역시", "235.1", "36.1", "6.1", "29.9", "29.7", "0.2", "-", "-", "15.3%", ""],
-                    ["세종특별자치시", "38.5", "2.5", "2.0", "0.5", "0.4", "-", "0.2", "-", "6.6%", ""],
-                    ["경기도", "1,926.8", "313.3", "122.2", "191.0", "153.0", "33.3", "0.4", "4.3", "16.3%", ""],
-                    ["강원도", "230.4", "19.6", "15.4", "4.2", "2.1", "-", "-", "2.1", "8.5%", ""],
-                    ["충청북도", "190.9", "15.6", "6.3", "9.2", "7.4", "0.6", "-", "1.2", "8.2%", ""],
-                    ["충청남도", "241.5", "41.4", "9.8", "31.5", "17.7", "8.6", "4.5", "0.8", "17.1%", ""],
-                    ["전라북도", "292.4", "42.7", "7.5", "35.1", "33.5", "0.2", "1.0", "0.5", "14.6%", ""],
-                    ["전라남도", "254.0", "23.6", "12.3", "11.3", "8.7", "0.0", "1.0", "1.6", "9.3%", ""],
-                    ["경상북도", "378.4", "129.1", "33.7", "95.3", "20.8", "72.5", "0.8", "1.3", "34.1%", ""],
-                    ["경상남도", "411.3", "50.1", "25.0", "25.0", "14.7", "0.5", "3.0", "6.9", "12.2%", ""],
-                    ["제주특별자치도", "88.6", "1.7", "1.5", "0.12", "-", "-", "0.1", "-", "1.9%", ""],
+                    ['합계', '7,537.2', '1,137.5', '490.0', '647.5', '484.0', '128.1', '11.4', '24.0', '15.1%', ''],
+                    ['서울특별시', '1,567.0', '114.9', '59.3', '55.6', '55.1', '-', '-', '0.5', '7.3%', ''],
+                    ['부산광역시', '491.5', '146.2', '120.7', '25.5', '25.3', '-', '-', '0.2', '29.7%', ''],
+                    ['대구광역시', '432.7', '102.4', '38.2', '64.2', '64.1', '-', '-', '0.1', '23.7%', ''],
+                    ['인천광역시', '302.3', '57.7', '11.6', '46.1', '29.2', '12.1', '0.5', '4.3', '19.1%', ''],
+                    ['광주광역시', '211.1', '28.7', '6.5', '22.3', '22.2', '-', '-', '0.1', '13.6%', ''],
+                    ['대전광역시', '244.6', '11.9', '11.9', '0.68', '0.0', '-', '-', '0.1', '4.9%', ''],
+                    ['울산광역시', '235.1', '36.1', '6.1', '29.9', '29.7', '0.2', '-', '-', '15.3%', ''],
+                    ['세종특별자치시', '38.5', '2.5', '2.0', '0.5', '0.4', '-', '0.2', '-', '6.6%', ''],
+                    ['경기도', '1,926.8', '313.3', '122.2', '191.0', '153.0', '33.3', '0.4', '4.3', '16.3%', ''],
+                    ['강원도', '230.4', '19.6', '15.4', '4.2', '2.1', '-', '-', '2.1', '8.5%', ''],
+                    ['충청북도', '190.9', '15.6', '6.3', '9.2', '7.4', '0.6', '-', '1.2', '8.2%', ''],
+                    ['충청남도', '241.5', '41.4', '9.8', '31.5', '17.7', '8.6', '4.5', '0.8', '17.1%', ''],
+                    ['전라북도', '292.4', '42.7', '7.5', '35.1', '33.5', '0.2', '1.0', '0.5', '14.6%', ''],
+                    ['전라남도', '254.0', '23.6', '12.3', '11.3', '8.7', '0.0', '1.0', '1.6', '9.3%', ''],
+                    ['경상북도', '378.4', '129.1', '33.7', '95.3', '20.8', '72.5', '0.8', '1.3', '34.1%', ''],
+                    ['경상남도', '411.3', '50.1', '25.0', '25.0', '14.7', '0.5', '3.0', '6.9', '12.2%', ''],
+                    ['제주특별자치도', '88.6', '1.7', '1.5', '0.12', '-', '-', '0.1', '-', '1.9%', ''],
                   ].map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {row.map((val, i) => (
-                        <td
-                          key={i}
-                          className={`${tableStyles.td} ${
-                            i === 0 ? "!font-bold !text-neutral-900" : ""
-                          } ${[1, 3, 9].includes(i) ? "bg-[#EAF5F5]" : ""}`}
-                        >
+                        <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 9].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                           {val}
                         </td>
                       ))}
@@ -702,4 +417,4 @@ export default function SewageStatusSection() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx b/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx
index de39aa798..8c2a535ce 100644
--- a/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx
+++ b/apps/dm/app/(landing)/reuse/intro/_components/LawIntroSection.tsx
@@ -1,123 +1,92 @@
-"use client";
+'use client';
 
-import React from "react";
-import Image, { type StaticImageData } from "next/image";
+import React from 'react';
+import Image, { type StaticImageData } from 'next/image';
 
-import lawPlan from "@/public/images/landing/intro/law_timeline.png";
-import planPerformance from "@/public/images/landing/intro/performance_left.png";
-import domesticChange from "@/public/images/landing/intro/domestic_textbox.png";
-import policyHistory from "@/public/images/landing/intro/policy_timeline.png";
-import lawRelation from "@/public/images/landing/intro/rel_note.png";
-import domesticLinkage from "@/public/images/landing/intro/linkage.png";
+import lawPlan from '@/public/images/landing/intro/law_timeline.png';
+import planPerformance from '@/public/images/landing/intro/performance_left.png';
+import domesticChange from '@/public/images/landing/intro/domestic_textbox.png';
+import policyHistory from '@/public/images/landing/intro/policy_timeline.png';
+import lawRelation from '@/public/images/landing/intro/rel_note.png';
+import domesticLinkage from '@/public/images/landing/intro/linkage.png';
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    <div className='flex items-center gap-3'>
+      <span className='h-5 w-[3px] bg-sky-500' />
+      <h3 className='text-[24px] font-bold text-neutral-900'>{children}</h3>
     </div>
   );
 }
 
-function Hr({ className = "" }: { className?: string }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
   return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="mx-auto block max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
+    <div className='w-full overflow-x-auto'>
+      <Image src={src} alt={alt} className='mx-auto block max-w-none' style={{ width: 'auto', height: 'auto' }} />
     </div>
   );
 }
 
-function SectionShell({
-  id,
-  title,
-  children,
-  className = "",
-}: {
-  id: string;
-  title: string;
-  children: React.ReactNode;
-  className?: string;
-}) {
+function SectionShell({ id, title, children, className = '' }: { id: string; title: string; children: React.ReactNode; className?: string }) {
   return (
     <section id={id} className={`scroll-mt-[120px] ${className}`}>
       <SectionTitle>{title}</SectionTitle>
-      <div className="mt-8">{children}</div>
+      <div className='mt-8'>{children}</div>
     </section>
   );
 }
 
 export default function LawIntroSection() {
-  const title = "물 재이용 법";
+  const title = '물 재이용 법';
 
   return (
-    <div className="bg-white">
-      <div className="inline-block">
-        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
-          <span className="relative z-10">{title}</span>
-          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+    <div className='bg-white'>
+      <div className='inline-block'>
+        <h2 className='relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900'>
+          <span className='relative z-10'>{title}</span>
+          <span className='absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300' />
         </h2>
       </div>
 
-      <div className="mt-10">
-        <SectionShell
-          id="law-plan"
-          title="법률 제·개정 및 기본계획 수립"
-          className="mt-10"
-        >
-          <ImgCard src={lawPlan} alt="법률 제·개정 및 기본계획 수립" />
+      <div className='mt-10'>
+        <SectionShell id='law-plan' title='법률 제·개정 및 기본계획 수립' className='mt-10'>
+          <ImgCard src={lawPlan} alt='법률 제·개정 및 기본계획 수립' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="plan-performance"
-          title="제2차 계획 대비 실적 현황"
-        >
-          <ImgCard src={planPerformance} alt="제2차 계획 대비 실적 현황" />
+        <SectionShell id='plan-performance' title='제2차 계획 대비 실적 현황'>
+          <ImgCard src={planPerformance} alt='제2차 계획 대비 실적 현황' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell id="domestic-change" title="우리나라의 수자원 현황 및 물이용 여건">
-          <ImgCard src={domesticChange} alt="우리나라의 수자원 현황 및 물이용 여건" />
+        <SectionShell id='domestic-change' title='우리나라의 수자원 현황 및 물이용 여건'>
+          <ImgCard src={domesticChange} alt='우리나라의 수자원 현황 및 물이용 여건' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="policy-history"
-          title="물 재이용 정책 변화 추이"
-        >
-          <ImgCard src={policyHistory} alt="물 재이용 정책 변화 추이" />
+        <SectionShell id='policy-history' title='물 재이용 정책 변화 추이'>
+          <ImgCard src={policyHistory} alt='물 재이용 정책 변화 추이' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="law-relation"
-          title="타법령과의 관계 검토"
-        >
-          <ImgCard src={lawRelation} alt="타법령과의 관계 검토" />
+        <SectionShell id='law-relation' title='타법령과의 관계 검토'>
+          <ImgCard src={lawRelation} alt='타법령과의 관계 검토' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="domestic-linkage"
-          title="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요"
-        >
-          <ImgCard src={domesticLinkage} alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
+        <SectionShell id='domestic-linkage' title='주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요'>
+          <ImgCard src={domesticLinkage} alt='주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요' />
         </SectionShell>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dm/app/(landing)/reuse/intro/law/page.tsx b/apps/dm/app/(landing)/reuse/intro/law/page.tsx
index c9952bf0b..d8d391202 100644
--- a/apps/dm/app/(landing)/reuse/intro/law/page.tsx
+++ b/apps/dm/app/(landing)/reuse/intro/law/page.tsx
@@ -1,20 +1,20 @@
 // apps/dm/app/(landing)/reuse/intro/law/page.tsx
-"use client";
+'use client';
 
-import Image, { type StaticImageData } from "next/image";
-import SubPageHeader from "../../_components/SubPageHeader";
-import lawTimeline from "@/public/images/landing/intro/law_timeline.png";
-import performanceLeft from "@/public/images/landing/intro/performance_left.png";
-import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
-import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
-import relNote from "@/public/images/landing/intro/rel_note.png";
-import linkage from "@/public/images/landing/intro/linkage.png";
+import Image, { type StaticImageData } from 'next/image';
+import SubPageHeader from '../../_components/SubPageHeader';
+import lawTimeline from '@/public/images/landing/intro/law_timeline.png';
+import performanceLeft from '@/public/images/landing/intro/performance_left.png';
+import domesticTextbox from '@/public/images/landing/intro/domestic_textbox.png';
+import policyTimeline from '@/public/images/landing/intro/policy_timeline.png';
+import relNote from '@/public/images/landing/intro/rel_note.png';
+import linkage from '@/public/images/landing/intro/linkage.png';
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    <div className='flex items-center gap-3'>
+      <span className='h-5 w-[3px] bg-sky-500' />
+      <h3 className='text-[24px] font-bold text-neutral-900'>{children}</h3>
     </div>
   );
 }
@@ -23,7 +23,7 @@ type HrProps = {
   className?: string;
 };
 
-function Hr({ className = "" }: HrProps) {
+function Hr({ className = '' }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
@@ -34,95 +34,87 @@ type ImgCardProps = {
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="block mx-auto max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
+    <div className='w-full overflow-x-auto'>
+      <Image src={src} alt={alt} className='block mx-auto max-w-none' style={{ width: 'auto', height: 'auto' }} />
     </div>
   );
 }
 
 export default function WaterReuseLawPage() {
   return (
-    <div className="bg-white">  
+    <div className='bg-white'>
       <SubPageHeader
-        title="물 재이용 법"
-        crumbs={[
-            { label: "Home", href: "/reuse" },
-            { label: "물 재이용 소개", href: "/reuse/intro/law" },
-            { label: "물 재이용 법" },
-        ]}
+        title='물 재이용 법'
+        crumbs={[{ label: 'Home', href: '/reuse' }, { label: '물 재이용 소개', href: '/reuse/intro/law' }, { label: '물 재이용 법' }]}
         hideFooterLine
         hideGuideText
-        wrapClassName="!pb-0"
+        wrapClassName='!pb-0'
       />
 
-      <Hr className="my-7" />
+      <Hr className='my-7' />
 
       {/* 1) 법제도/계획 수립 타임라인 */}
-      <section className="mt-6">
+      <section className='mt-6'>
         <SectionTitle>법제도 · 계획 및 기본계획 수립</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={lawTimeline} alt="법제도 타임라인" />
+        <div className='mt-8'>
+          <ImgCard src={lawTimeline} alt='법제도 타임라인' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 2) 제2차 계획 대비 실적 현황 (2컬럼) */}
       <section>
         <SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={performanceLeft} alt="실적 현황 요약" />
+        <div className='mt-8'>
+          <ImgCard src={performanceLeft} alt='실적 현황 요약' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 3) 국내 관련 현황 */}
       <section>
         <SectionTitle>국내 관련 현황</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
+        <div className='mt-8'>
+          <ImgCard src={domesticTextbox} alt='국내 관련 현황 설명' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 4) 정책 변천 추이 */}
       <section>
         <SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
+        <div className='mt-8'>
+          <ImgCard src={policyTimeline} alt='정책 변천 타임라인' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 5) 타 법령과의 관계도 */}
       <section>
         <SectionTitle>타법령과의 관계도</SectionTitle>
-        <div className="mt-8">
-          <ImgCard src={relNote} alt="관계도 설명" />
+        <div className='mt-8'>
+          <ImgCard src={relNote} alt='관계도 설명' />
         </div>
       </section>
 
-      <Hr className="my-11" />
+      <Hr className='my-11' />
 
       {/* 6) 국내 연계 현황 */}
-      <section className="pb-[200px]">
+      <section className='pb-[200px]'>
         <SectionTitle>국내 연계 현황</SectionTitle>
-        <div className="mt-8">
-          <div className="mx-[20px] mb-8">
-            <p className="text-[24px] font-semibold mb-2">주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
-            <p className="text-[#4F4F4F]">국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요<br />
-                • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
+        <div className='mt-8'>
+          <div className='mx-[20px] mb-8'>
+            <p className='text-[24px] font-semibold mb-2'>주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
+            <p className='text-[#4F4F4F]'>
+              국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요
+              <br />• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
             </p>
           </div>
-          <ImgCard src={linkage} alt="국내 연계 현황" />
+          <ImgCard src={linkage} alt='국내 연계 현황' />
         </div>
       </section>
     </div>
diff --git a/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx b/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx
index 0ca6ccf69..ea4ad810d 100644
--- a/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx
+++ b/apps/dm/app/(with-layout)/intro/_components/LawIntroSection.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 export default function LawIntroSection() {
   const contentsHtml = `
@@ -84,10 +84,5 @@ export default function LawIntroSection() {
     </div>
   `;
 
-  return (
-    <div
-      className="bg-white"
-      dangerouslySetInnerHTML={{ __html: contentsHtml }}
-    />
-  );
+  return <div className='bg-white' dangerouslySetInnerHTML={{ __html: contentsHtml }} />;
 }
diff --git a/apps/dm/app/(with-layout)/intro/law/page.tsx b/apps/dm/app/(with-layout)/intro/law/page.tsx
index 63f504af4..9e881b921 100644
--- a/apps/dm/app/(with-layout)/intro/law/page.tsx
+++ b/apps/dm/app/(with-layout)/intro/law/page.tsx
@@ -1,22 +1,22 @@
 // DM 물 재이용 소개(물 재이용 법) 페이지
-"use client";
+'use client';
 
-import Image, { type StaticImageData } from "next/image";
-import SubPageHeader from "@/components/SubPageHeader";
+import Image, { type StaticImageData } from 'next/image';
+import SubPageHeader from '@/components/SubPageHeader';
 // import BusinessSubNav from "@/components/BusinessSubNav";
 
-import lawTimeline from "@/public/images/landing/intro/law_timeline.png";
-import performanceLeft from "@/public/images/landing/intro/performance_left.png";
-import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
-import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
-import relNote from "@/public/images/landing/intro/rel_note.png";
-import linkage from "@/public/images/landing/intro/linkage.png";
+import lawTimeline from '@/public/images/landing/intro/law_timeline.png';
+import performanceLeft from '@/public/images/landing/intro/performance_left.png';
+import domesticTextbox from '@/public/images/landing/intro/domestic_textbox.png';
+import policyTimeline from '@/public/images/landing/intro/policy_timeline.png';
+import relNote from '@/public/images/landing/intro/rel_note.png';
+import linkage from '@/public/images/landing/intro/linkage.png';
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    <div className='flex items-center gap-3'>
+      <span className='h-5 w-[3px] bg-sky-500' />
+      <h3 className='text-[24px] font-bold text-neutral-900'>{children}</h3>
     </div>
   );
 }
@@ -25,7 +25,7 @@ type HrProps = {
   className?: string;
 };
 
-function Hr({ className = "" }: HrProps) {
+function Hr({ className = '' }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
@@ -36,14 +36,8 @@ type ImgCardProps = {
 
 function ImgCard({ src, alt }: ImgCardProps) {
   return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="mx-auto block max-w-none"
-        style={{ width: "auto", height: "auto" }}
-        priority={false}
-      />
+    <div className='w-full overflow-x-auto'>
+      <Image src={src} alt={alt} className='mx-auto block max-w-none' style={{ width: 'auto', height: 'auto' }} priority={false} />
     </div>
   );
 }
@@ -55,109 +49,73 @@ type SectionShellProps = {
   className?: string;
 };
 
-function SectionShell({ id, title, children, className = "" }: SectionShellProps) {
+function SectionShell({ id, title, children, className = '' }: SectionShellProps) {
   return (
-    <section
-      id={id}
-      className={[
-        "scroll-mt-[140px]",
-        className,
-      ].join(" ")}
-    >
+    <section id={id} className={['scroll-mt-[140px]', className].join(' ')}>
       <SectionTitle>{title}</SectionTitle>
-      <div className="mt-8">{children}</div>
+      <div className='mt-8'>{children}</div>
     </section>
   );
 }
 
 export default function WaterReuseLawPage() {
   return (
-    <div className="relative bg-white">
+    <div className='relative bg-white'>
       {/* <BusinessSubNav /> */}
 
       <SubPageHeader
-        title="물 재이용 법"
-        crumbs={[
-          { label: "Home", href: "/main" },
-          { label: "물 재이용 소개", href: "/intro/law" },
-          { label: "물 재이용 법" },
-        ]}
+        title='물 재이용 법'
+        crumbs={[{ label: 'Home', href: '/main' }, { label: '물 재이용 소개', href: '/intro/law' }, { label: '물 재이용 법' }]}
         hideFooterLine
         hideGuideText
-        wrapClassName="!pb-0"
+        wrapClassName='!pb-0'
       />
 
-      <div className="pr-0">
-        <Hr className="my-7" />
+      <div className='pr-0'>
+        <Hr className='my-7' />
 
-        <SectionShell
-          id="law-plan"
-          title="법률 제·개정 및 기본계획 수립"
-          className="mt-6"
-        >
-          <ImgCard src={lawTimeline} alt="법률 제·개정 및 기본계획 수립" />
+        <SectionShell id='law-plan' title='법률 제·개정 및 기본계획 수립' className='mt-6'>
+          <ImgCard src={lawTimeline} alt='법률 제·개정 및 기본계획 수립' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="plan-performance"
-          title="제2차 계획 대비 실적 현황"
-        >
-          <ImgCard src={performanceLeft} alt="제2차 계획 대비 실적 현황" />
+        <SectionShell id='plan-performance' title='제2차 계획 대비 실적 현황'>
+          <ImgCard src={performanceLeft} alt='제2차 계획 대비 실적 현황' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="domestic-change"
-          title="국내 여건 변화"
-        >
-          <ImgCard src={domesticTextbox} alt="국내 여건 변화" />
+        <SectionShell id='domestic-change' title='국내 여건 변화'>
+          <ImgCard src={domesticTextbox} alt='국내 여건 변화' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="policy-history"
-          title="물 재이용 정책 변화 추이"
-        >
-          <ImgCard src={policyTimeline} alt="물 재이용 정책 변화 추이" />
+        <SectionShell id='policy-history' title='물 재이용 정책 변화 추이'>
+          <ImgCard src={policyTimeline} alt='물 재이용 정책 변화 추이' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="law-relation"
-          title="타법령과의 관계 검토"
-        >
-          <ImgCard src={relNote} alt="타법령과의 관계 검토" />
+        <SectionShell id='law-relation' title='타법령과의 관계 검토'>
+          <ImgCard src={relNote} alt='타법령과의 관계 검토' />
         </SectionShell>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-        <SectionShell
-          id="domestic-linkage"
-          title="국내 연계 현황"
-          className="pb-[250px]"
-        >
-          <div className="mx-[20px] mb-8">
-            <p className="mb-2 text-[24px] font-semibold">
-              주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요
-            </p>
-            <p className="text-[#4F4F4F]">
-              국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한
-              물 재이용 활성화로 정책 실효성 제고 필요
-              <br />
-              • 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획,
-              하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서
-              물이용 체계 구축 필요
+        <SectionShell id='domestic-linkage' title='국내 연계 현황' className='pb-[250px]'>
+          <div className='mx-[20px] mb-8'>
+            <p className='mb-2 text-[24px] font-semibold'>주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</p>
+            <p className='text-[#4F4F4F]'>
+              국가 상위계획의 정책 방향이 기후위기 대응 등 수자원의 공급 안전성을 위한 물 재이용 활성화로 정책 실효성 제고 필요
+              <br />• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
             </p>
           </div>
 
-          <ImgCard src={linkage} alt="국내 연계 현황" />
+          <ImgCard src={linkage} alt='국내 연계 현황' />
         </SectionShell>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx
index 6a534294d..e30cc8df0 100644
--- a/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx
+++ b/apps/dm/app/(with-layout)/status/_components/RainStatusSection.tsx
@@ -1,30 +1,24 @@
-"use client";
+'use client';
 
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo } from 'react';
 // import SubPageHeader from "@/components/SubPageHeader";
-import Image from "next/image";
-import { useDmStore } from "@/app/store";
-import { formatUsage } from "@/app/common/transValueFormat";
-import type {
-  DmStatusBildTpYearsType,
-  DmStatusUsgBildTpType,
-  DmStatusUsgYearsType,
-  TableHeaderType,
-} from "@/app/store/dm-status/type";
-
+import Image from 'next/image';
+import { useDmStore } from '@/app/store';
+import { formatUsage } from '@/app/common/transValueFormat';
+import type { DmStatusBildTpYearsType, DmStatusUsgBildTpType, DmStatusUsgYearsType, TableHeaderType } from '@/app/store/dm-status/type';
 
 // 공통 섹션 타이틀 컴포넌트
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    <div className='flex items-center gap-3'>
+      <span className='h-5 w-[3px] bg-sky-500' />
+      <h3 className='text-[24px] font-bold text-neutral-900'>{children}</h3>
     </div>
   );
 }
 
 // 구분선
-function Hr({ className = "" }: { className?: string }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
@@ -32,62 +26,49 @@ function Hr({ className = "" }: { className?: string }) {
 function RainIntroSummary() {
   const items = [
     {
-      icon: "/images/landing/icon_chart.png",
-      title: "지속적인 이용량 증가",
-      desc: "2018년 약 797만m³이었던 빗물 이용량은 5년 사이 약 75% 증가하여 수자원 절약에 기여하고 있습니다.",
+      icon: '/images/landing/icon_chart.png',
+      title: '지속적인 이용량 증가',
+      desc: '2018년 약 797만m³이었던 빗물 이용량은 5년 사이 약 75% 증가하여 수자원 절약에 기여하고 있습니다.',
     },
     {
-      icon: "/images/landing/icon_hand.png",
-      title: "조경용수의 핵심 자원",
-      desc: "재이용되는 빗물의 약 97%가 조경용수로 활용되고 있으며 이는 공원, 아파트 단지 등의 녹지 관리에 중요한 역할을 합니다.",
+      icon: '/images/landing/icon_hand.png',
+      title: '조경용수의 핵심 자원',
+      desc: '재이용되는 빗물의 약 97%가 조경용수로 활용되고 있으며 이는 공원, 아파트 단지 등의 녹지 관리에 중요한 역할을 합니다.',
     },
     {
-      icon: "/images/landing/icon_building.png",
-      title: "민간·공공의 협력",
-      desc: "골프장과 같은 대규모 스포츠 시설은 물론, 최근에는 공동주택·아파트 등 내 이용량이 급증하며 일상생활 속 빗물 활용이 확산되는 추세입니다.",
+      icon: '/images/landing/icon_building.png',
+      title: '민간·공공의 협력',
+      desc: '골프장과 같은 대규모 스포츠 시설은 물론, 최근에는 공동주택·아파트 등 내 이용량이 급증하며 일상생활 속 빗물 활용이 확산되는 추세입니다.',
     },
   ];
 
   return (
-    <div className="mb-[70px] px-[160px]">
-      <div className="grid grid-cols-[1fr_400px] items-center gap-[60px]">
+    <div className='mb-[70px] px-[160px]'>
+      <div className='grid grid-cols-[1fr_400px] items-center gap-[60px]'>
         {/* 좌측 */}
         <div>
-          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.04em] text-neutral-900">
+          <h3 className='text-[40px] font-extrabold leading-[1.35] tracking-[-0.04em] text-neutral-900'>
             기후위기 시대의 수자원 확보,
             <br />
-            <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
-              빗물 재이용
-            </span>
-            이 앞장섭니다.
+            <span className='inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent'>빗물 재이용</span>이 앞장섭니다.
           </h3>
 
-          <p className="mt-5 text-[16px] leading-[1.8] tracking-[-0.04em] text-neutral-600">
+          <p className='mt-5 text-[16px] leading-[1.8] tracking-[-0.04em] text-neutral-600'>
             2023년 기준 전국 3,500여 개 시설에서
             <br />
             연간 약 1,394만m³의 빗물을 소중한 자원으로 다시 활용하고 있습니다.
           </p>
 
-          <div className="mt-10 space-y-8">
+          <div className='mt-10 space-y-8'>
             {items.map((item) => (
-              <div key={item.title} className="flex gap-3 items-center">
-                <div className="flex h-12 w-12 shrink-0 items-center justify-center">
-                  <Image
-                    src={item.icon}
-                    alt=""
-                    width={48}
-                    height={48}
-                    className="object-contain"
-                  />
+              <div key={item.title} className='flex gap-3 items-center'>
+                <div className='flex h-12 w-12 shrink-0 items-center justify-center'>
+                  <Image src={item.icon} alt='' width={48} height={48} className='object-contain' />
                 </div>
 
                 <div>
-                  <strong className="block text-[18px] font-extrabold text-neutral-900">
-                    {item.title}
-                  </strong>
-                  <p className="mt-2 text-[16px] leading-[1.7] text-neutral-600 tracking-tighter">
-                    {item.desc}
-                  </p>
+                  <strong className='block text-[18px] font-extrabold text-neutral-900'>{item.title}</strong>
+                  <p className='mt-2 text-[16px] leading-[1.7] text-neutral-600 tracking-tighter'>{item.desc}</p>
                 </div>
               </div>
             ))}
@@ -95,15 +76,8 @@ function RainIntroSummary() {
         </div>
 
         {/* 우측 이미지 */}
-        <div className="flex items-center justify-center">
-          <Image
-            src="/images/landing/rain_status_img.png"
-            alt="빗물 재이용 개념도"
-            width={400}
-            height={343}
-            className="h-auto w-full max-w-[400px] object-contain"
-            priority
-          />
+        <div className='flex items-center justify-center'>
+          <Image src='/images/landing/rain_status_img.png' alt='빗물 재이용 개념도' width={400} height={343} className='h-auto w-full max-w-[400px] object-contain' priority />
         </div>
       </div>
     </div>
@@ -111,31 +85,15 @@ function RainIntroSummary() {
 }
 
 const tableStyles = {
-  container: "w-[1000px] mx-auto overflow-hidden",
-  table: "w-full table-fixed border-collapse text-center text-[16px]",
-  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
-  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
-  headerBg: "bg-[#E3E7EA]",
+  container: 'w-[1000px] mx-auto overflow-hidden',
+  table: 'w-full table-fixed border-collapse text-center text-[16px]',
+  th: 'border border-[#858F98] py-3 font-bold text-neutral-800',
+  td: 'border border-[#858F98] py-3 text-neutral-700 font-medium break-keep',
+  headerBg: 'bg-[#E3E7EA]',
 };
 
-const headerColors6 = [
-  "bg-[#01ACE5]",
-  "bg-[#17AFC7]",
-  "bg-[#2CB2A9]",
-  "bg-[#42B58B]",
-  "bg-[#57B86D]",
-  "bg-[#81C784]",
-];
-const headerColors8 = [
-  "bg-[#01ACE5]",
-  "bg-[#10AED0]",
-  "bg-[#20B0BA]",
-  "bg-[#2FB2A5]",
-  "bg-[#3FB58F]",
-  "bg-[#4EB77A]",
-  "bg-[#5EB964]",
-  "bg-[#6DBB4F]",
-];
+const headerColors6 = ['bg-[#01ACE5]', 'bg-[#17AFC7]', 'bg-[#2CB2A9]', 'bg-[#42B58B]', 'bg-[#57B86D]', 'bg-[#81C784]'];
+const headerColors8 = ['bg-[#01ACE5]', 'bg-[#10AED0]', 'bg-[#20B0BA]', 'bg-[#2FB2A5]', 'bg-[#3FB58F]', 'bg-[#4EB77A]', 'bg-[#5EB964]', 'bg-[#6DBB4F]'];
 export default function RainStatusSection() {
   const getRainyByBildTpYears = useDmStore((state) => state.getRainyByBildTpYears);
   const getRainyByUsgBildTp = useDmStore((state) => state.getRainyByUsgBildTp);
@@ -148,19 +106,11 @@ export default function RainStatusSection() {
   const rainyByUsgBildTp = useDmStore((state) => state.rainy.rainyByUsgBildTp);
   const rainyByUsgYearsHeader = useDmStore((state) => state.rainy.rainyByUsgYearsHeader);
   const rainyByUsgYears = useDmStore((state) => state.rainy.rainyByUsgYears);
-  const partBildTpHeader = useMemo(
-    () => rainyByUsgBildTpHeader.slice(3).map((header) => header.title),
-    [rainyByUsgBildTpHeader]
-  );
-  
+  const partBildTpHeader = useMemo(() => rainyByUsgBildTpHeader.slice(3).map((header) => header.title), [rainyByUsgBildTpHeader]);
 
   // 출처 텍스트
   function SourceText() {
-    return (
-      <p className="mt-7 text-center text-[13px] text-neutral-500">
-        자료: 하수도정보시스템 {selectYear} 하수도 통계
-      </p>
-    );
+    return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 하수도정보시스템 {selectYear} 하수도 통계</p>;
   }
 
   useEffect(() => {
@@ -171,32 +121,22 @@ export default function RainStatusSection() {
 
   const renderPartHeaders = (headers: string[], headerColors: string[]) => {
     return headers.map((header, index) => (
-      <th
-        key={header}
-        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
-        style={{ width: "140px" }}
-      >
+      <th key={header} className={`${tableStyles.th} ${headerColors[index] ?? 'bg-[#81C784]'} text-white`} style={{ width: '140px' }}>
         {header}
       </th>
     ));
   };
 
-  const renderBuildingUsageCells = (
-    row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType,
-    headers: TableHeaderType[]
-  ) => {
+  const renderBuildingUsageCells = (row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType, headers: TableHeaderType[]) => {
     const rowData = row as Record<string, string | number>;
     const firstHeaderId = headers[0]?.id;
-    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? "") : "";
+    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? '') : '';
 
     return headers.map((header, index) => {
       const value = rowData[header.id];
 
       return (
-        <td
-          key={`${rowKey}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
+        <td key={`${rowKey}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 5].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
           {index === 0 ? value : formatUsage(value as string | number, 1000, 1)}
         </td>
       );
@@ -206,102 +146,99 @@ export default function RainStatusSection() {
   const renderRainyByUsgBildTpCells = (row: DmStatusUsgBildTpType) => {
     return rainyByUsgBildTpHeader.map((header, index) => {
       const value = row[header.id as keyof DmStatusUsgBildTpType];
-      const displayValue =
-        index === 0
-          ? value
-          : header.id === "CNT"
-            ? Number(value).toLocaleString("ko-KR")
-            : formatUsage(value as string | number, 1000, 1);
+      const displayValue = index === 0 ? value : header.id === 'CNT' ? Number(value).toLocaleString('ko-KR') : formatUsage(value as string | number, 1000, 1);
 
       return (
-        <td
-          key={`${row.USG_NM}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 2].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
-          {displayValue == 0.0 ? "-" : displayValue}
+        <td key={`${row.USG_NM}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 2].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
+          {displayValue == 0.0 ? '-' : displayValue}
         </td>
       );
     });
   };
-  
-  const title = "빗물이용시설(현황)";
+
+  const title = '빗물이용시설(현황)';
 
   return (
-    <div className="bg-white">
+    <div className='bg-white'>
       {/* 상단 타이틀 */}
-      <div className="inline-block">
-        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
-            <span className="relative z-10">{title}</span>
-            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+      <div className='inline-block'>
+        <h2 className='relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900'>
+          <span className='relative z-10'>{title}</span>
+          <span className='absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300' />
         </h2>
       </div>
 
-      <div className="mt-[70px] pb-[120px]">
+      <div className='mt-[70px] pb-[120px]'>
         {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
         <section>
           {/* 인트로 영역 */}
           <RainIntroSummary />
-          
-          <div id="status-rain-building" className="scroll-mt-[120px]">
+
+          <div id='status-rain-building' className='scroll-mt-[120px]'>
             <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
 
-            <div className="mt-10">
-                <div className={tableStyles.container}>
+            <div className='mt-10'>
+              <div className={tableStyles.container}>
                 <table className={tableStyles.table}>
-                    <thead>
+                  <thead>
                     <tr>
-                        <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>
+                      <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                         구분
-                        </th>
-                        <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      </th>
+                      <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                         빗물이용량 (천m³/년)
-                        </th>
+                      </th>
                     </tr>
-                    <tr>
-                        {renderPartHeaders(rainyYears, headerColors6)}
-                    </tr>
-                    </thead>
-                    <tbody>
+                    <tr>{renderPartHeaders(rainyYears, headerColors6)}</tr>
+                  </thead>
+                  <tbody>
                     {rainyByBildTpYears.map((row, idx) => (
-                        <tr key={idx} className="bg-white">
+                      <tr key={idx} className='bg-white'>
                         {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)}
-                        </tr>
+                      </tr>
                     ))}
-                    </tbody>
+                  </tbody>
                 </table>
-                </div>
+              </div>
 
-                <SourceText />
+              <SourceText />
             </div>
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 빗물이용시설의 용도별 분포 (xxxx년 기준) */}
-        <section
-          id="status-rain-purpose-distribution"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-rain-purpose-distribution' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 분포 ({selectYear}년 기준)</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>개소수<br />(개소)</th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>저류용량<br />(천m³)</th>
-                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
-                  </tr>
-                  <tr>
-                    {renderPartHeaders(partBildTpHeader, headerColors8)}
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
+                      용도
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      개소수
+                      <br />
+                      (개소)
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      저류조용량
+                      <br />
+                      (천m³)
+                    </th>
+                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      빗물이용량 (천m³/년)
+                    </th>
                   </tr>
+                  <tr>{renderPartHeaders(partBildTpHeader, headerColors8)}</tr>
                 </thead>
                 <tbody>
                   {rainyByUsgBildTp.map((row, idx) => (
-                    <tr key={`${row.USG_NM}-${idx}`} className="bg-white">
+                    <tr key={`${row.USG_NM}-${idx}`} className='bg-white'>
                       {renderRainyByUsgBildTpCells(row)}
                     </tr>
                   ))}
@@ -313,30 +250,29 @@ export default function RainStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
-        <section
-          id="status-rain-purpose-usage"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-rain-purpose-usage' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
-                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
-                  </tr>
-                  <tr>
-                    {renderPartHeaders(rainyYears, headerColors6)}
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
+                      용도
+                    </th>
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      빗물이용량 (천m³/년)
+                    </th>
                   </tr>
+                  <tr>{renderPartHeaders(rainyYears, headerColors6)}</tr>
                 </thead>
                 <tbody>
                   {rainyByUsgYears.map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderBuildingUsageCells(row, rainyByUsgYearsHeader)}
                     </tr>
                   ))}
@@ -350,4 +286,4 @@ export default function RainStatusSection() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx b/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx
index f7eb49a84..c1ae8e05e 100644
--- a/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx
+++ b/apps/dm/app/(with-layout)/status/_components/SewageStatusSection.tsx
@@ -1,116 +1,97 @@
 /**
  * 하수처리수
  */
-"use client";
+'use client';
 
-import React from "react";
-import Image from "next/image";
-import { useEffect } from "react";
-import { useDmStore } from "@/app/store";
-import { formatUsage } from "@/app/common/transValueFormat";
-import type {
-  DmStatusLawYearsType,
-  DmStatusBildTpYearsType,
-  DmStatusUsgYearsType,
-  DmStatusSidoUsgType,
-  TableHeaderType,
-} from "@/app/store/dm-status/type";
-import { Col2Name } from "@/app/store/dm-status/type";
+import React from 'react';
+import Image from 'next/image';
+import { useEffect } from 'react';
+import { useDmStore } from '@/app/store';
+import { formatUsage } from '@/app/common/transValueFormat';
+import type { DmStatusLawYearsType, DmStatusBildTpYearsType, DmStatusUsgYearsType, DmStatusSidoUsgType, TableHeaderType } from '@/app/store/dm-status/type';
+import { Col2Name } from '@/app/store/dm-status/type';
 
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    <div className='flex items-center gap-3'>
+      <span className='h-5 w-[3px] bg-sky-500' />
+      <h3 className='text-[24px] font-bold text-neutral-900'>{children}</h3>
     </div>
   );
 }
 
-function Hr({ className = "" }: { className?: string }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 function SewageIntroSummary() {
   const items = [
     {
-      icon: "/images/landing/icon_cycle_water.png",
-      title: "안정적인 재이용률 유지",
+      icon: '/images/landing/icon_cycle_water.png',
+      title: '안정적인 재이용률 유지',
       desc: (
-          <>
+        <>
           연간 약 1,136백만m³의 하수처리수가 재이용되고 있으며,
-          <br/>
+          <br />
           약 15%에 달하는 높은 재이용률을 통해
-          <br/>
+          <br />
           수자원 선순환 체계를 구축하고 있습니다.
-          </>
+        </>
       ),
     },
     {
-      icon: "/images/landing/icon_water_flow.png",
-      title: "메마른 하천을 살리는 물",
+      icon: '/images/landing/icon_water_flow.png',
+      title: '메마른 하천을 살리는 물',
       desc: (
-          <>
+        <>
           재이용되는 물의 가장 많은 부분이 하천유지용수로 사용되어
-          <br/>
+          <br />
           도심 속 하천의 생태계를 보호하고 쾌적한 수변 환경을 조성합니다.
-          </>
+        </>
       ),
     },
     {
-      icon: "/images/landing/icon_location.png",
-      title: "지역별 균형 있는 활용",
+      icon: '/images/landing/icon_location.png',
+      title: '지역별 균형 있는 활용',
       desc: (
-          <>
+        <>
           전국적으로 고르게 시설이 확충되고 있으며, 특히 경기 지역을 중심으로
-          <br/>
+          <br />
           대규모 공업용수 공급망을 구축하여
-          <br/>
+          <br />
           지역 경제와 환경 보호를 동시에 실현하고 있습니다.
-          </>
+        </>
       ),
     },
   ];
 
   return (
-    <div className="mb-[70px] px-[160px]">
-      <div className="grid grid-cols-[1fr_400px] items-center gap-0">
+    <div className='mb-[70px] px-[160px]'>
+      <div className='grid grid-cols-[1fr_400px] items-center gap-0'>
         {/* 좌측 */}
         <div>
-          <h3 className="text-[40px] font-extrabold leading-[1.35] tracking-[-0.14em] text-neutral-900">
+          <h3 className='text-[40px] font-extrabold leading-[1.35] tracking-[-0.14em] text-neutral-900'>
             버려지는 하수에서 찾는 새로운 가치,
             <br />
-            <span className="inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent">
-              하수처리수 재이용
-            </span>
-            이 도시를 숨쉬게 합니다.
+            <span className='inline-block bg-gradient-to-b from-[#6DBB4F] to-[#01ACE5] bg-clip-text text-transparent'>하수처리수 재이용</span>이 도시를 숨쉬게 합니다.
           </h3>
 
-          <p className="mt-5 text-[16px] leading-[1.8] text-neutral-600">
+          <p className='mt-5 text-[16px] leading-[1.8] text-neutral-600'>
             하수처리장에서 정화된 물은 하천의 수량을 조절하고
             <br />
             산업 현장에 용수를 공급하는 소중한 자원입니다.
           </p>
 
-          <div className="mt-10 space-y-8">
+          <div className='mt-10 space-y-8'>
             {items.map((item) => (
-              <div key={item.title} className="flex gap-4 items-center">
-                <div className="mt-1 flex h-12 w-12 shrink-0 items-center justify-center">
-                  <Image
-                    src={item.icon}
-                    alt=""
-                    width={48}
-                    height={48}
-                    className="object-contain"
-                  />
+              <div key={item.title} className='flex gap-4 items-center'>
+                <div className='mt-1 flex h-12 w-12 shrink-0 items-center justify-center'>
+                  <Image src={item.icon} alt='' width={48} height={48} className='object-contain' />
                 </div>
 
                 <div>
-                  <strong className="block text-[18px] font-extrabold text-neutral-900">
-                    {item.title}
-                  </strong>
-                  <p className="mt-2 text-[16px] leading-[1.7] text-neutral-600">
-                    {item.desc}
-                  </p>
+                  <strong className='block text-[18px] font-extrabold text-neutral-900'>{item.title}</strong>
+                  <p className='mt-2 text-[16px] leading-[1.7] text-neutral-600'>{item.desc}</p>
                 </div>
               </div>
             ))}
@@ -118,15 +99,8 @@ function SewageIntroSummary() {
         </div>
 
         {/* 우측 이미지 */}
-        <div className="flex items-center justify-center">
-          <Image
-            src="/images/landing/sewage_status_img.png"
-            alt="하수처리수 재이용 개념도"
-            width={420}
-            height={360}
-            className="h-auto w-full max-w-[420px] object-contain"
-            priority
-          />
+        <div className='flex items-center justify-center'>
+          <Image src='/images/landing/sewage_status_img.png' alt='하수처리수 재이용 개념도' width={420} height={360} className='h-auto w-full max-w-[420px] object-contain' priority />
         </div>
       </div>
     </div>
@@ -134,31 +108,24 @@ function SewageIntroSummary() {
 }
 
 const tableStyles = {
-  container: "w-[1000px] mx-auto overflow-hidden",
-  table: "w-full table-fixed border-collapse text-center text-[16px]",
-  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
-  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
-  headerBg: "bg-[#E3E7EA]",
+  container: 'w-[1000px] mx-auto overflow-hidden',
+  table: 'w-full table-fixed border-collapse text-center text-[16px]',
+  th: 'border border-[#858F98] py-3 font-bold text-neutral-800',
+  td: 'border border-[#858F98] py-3 text-neutral-700 font-medium break-keep',
+  headerBg: 'bg-[#E3E7EA]',
 };
 
-const headerColors6 = [
-  "bg-[#01ACE5]",
-  "bg-[#17AFC7]",
-  "bg-[#2CB2A9]",
-  "bg-[#42B58B]",
-  "bg-[#57B86D]",
-  "bg-[#81C784]",
-];
+const headerColors6 = ['bg-[#01ACE5]', 'bg-[#17AFC7]', 'bg-[#2CB2A9]', 'bg-[#42B58B]', 'bg-[#57B86D]', 'bg-[#81C784]'];
 
 export default function SewageStatusSection() {
   const getPbnstByLawYears = useDmStore((state) => state.getPbnstByLawYears);
-  const getPbnstByUsgYears = useDmStore((state) => state.getPbnstByUsgYears); 
-  const getPbnstByCpcYears = useDmStore((state) => state.getPbnstByCpcYears); 
-  const getPbnstBySido = useDmStore((state) => state.getPbnstBySido); 
+  const getPbnstByUsgYears = useDmStore((state) => state.getPbnstByUsgYears);
+  const getPbnstByCpcYears = useDmStore((state) => state.getPbnstByCpcYears);
+  const getPbnstBySido = useDmStore((state) => state.getPbnstBySido);
   const pbnstYears = useDmStore((state) => state.pbnst.pbnstYears);
   const selectYear = pbnstYears.slice(-1)[0];
   const pbnstByLawYearsHeader = useDmStore((state) => state.pbnst.pbnstByLawYearsHeader);
-  const pbnstByLawYears = useDmStore((state) => state.pbnst.pbnstByLawYears); 
+  const pbnstByLawYears = useDmStore((state) => state.pbnst.pbnstByLawYears);
   const pbnstByUsgYearsHeader = useDmStore((state) => state.pbnst.pbnstByUsgYearsHeader);
   const pbnstByUsgYears = useDmStore((state) => state.pbnst.pbnstByUsgYears);
   const pbnstByCpcYearsHeader = useDmStore((state) => state.pbnst.pbnstByCpcYearsHeader);
@@ -168,15 +135,11 @@ export default function SewageStatusSection() {
 
   // 출처 텍스트
   function SourceText() {
-    return (
-      <p className="mt-7 text-center text-[13px] text-neutral-500">
-        자료: 하수도정보시스템 {selectYear} 하수도 통계
-      </p>
-    );
+    return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 하수도정보시스템 {selectYear} 하수도 통계</p>;
   }
-  
+
   useEffect(() => {
-    void getPbnstByLawYears(); 
+    void getPbnstByLawYears();
     void getPbnstByUsgYears();
     void getPbnstByCpcYears();
     void getPbnstBySido();
@@ -184,10 +147,7 @@ export default function SewageStatusSection() {
 
   const renderPartHeaders = (headers: string[], headerColors: string[]) => {
     return headers.map((header, index) => (
-      <th
-        key={header}
-        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
-      >
+      <th key={header} className={`${tableStyles.th} ${headerColors[index] ?? 'bg-[#81C784]'} text-white`}>
         {header}
       </th>
     ));
@@ -198,10 +158,10 @@ export default function SewageStatusSection() {
     row: DmStatusLawYearsType,
     data: DmStatusLawYearsType[],
     headers: TableHeaderType[],
-    unitSize: number = 1, // 단위 변경 1000 인 경우, 100,000 -> 100 으로 변경
+    unitSize: number = 1 // 단위 변경 1000 인 경우, 100,000 -> 100 으로 변경
   ) => {
     const rowData = row as Record<string, string | number>;
-    const currentCol1 = String(rowData["COL1"] ?? "");
+    const currentCol1 = String(rowData['COL1'] ?? '');
 
     // 이전 값
     const prevCol1 = rowIdx > 0 ? data[rowIdx - 1]?.COL1 : null;
@@ -220,56 +180,38 @@ export default function SewageStatusSection() {
       const value = rowData[header.id];
 
       // COL1 처리 (rowspan 핵심)
-      if (header.id === "COL1") {
+      if (header.id === 'COL1') {
         // 이전과 같으면 렌더링 안함
         if (currentCol1 === prevCol1) return null;
 
         return (
-          <td
-            key={`${rowIdx}-${header.id}`}
-            rowSpan={getRowSpan()}
-            className={`${tableStyles.td} !font-bold !text-neutral-900`}
-          >
+          <td key={`${rowIdx}-${header.id}`} rowSpan={getRowSpan()} className={`${tableStyles.td} !font-bold !text-neutral-900`}>
             {value}
           </td>
         );
-      } else if (header.id === "COL2") {
-        return (
-          <td
-            key={`${rowIdx}-${header.id}`}
-            className={`${tableStyles.td} !font-bold !text-neutral-900`}
-            dangerouslySetInnerHTML={{ __html: Col2Name[value as string] ?? "" }}
-          />
-        );
+      } else if (header.id === 'COL2') {
+        return <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} !font-bold !text-neutral-900`} dangerouslySetInnerHTML={{ __html: Col2Name[value as string] ?? '' }} />;
       }
-      
+
       return (
-        <td
-          key={`${rowIdx}-${header.id}`}
-          className={`${tableStyles.td} ${[0, 2, 4].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
-          {(String(rowData["COL2"]).indexOf("CNT") > -1)
-            ? Number(value).toLocaleString("ko-KR")
-            : ((String(rowData["COL2"]).indexOf("REUSERT") > -1)
+        <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} ${[0, 2, 4].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
+          {String(rowData['COL2']).indexOf('CNT') > -1
+            ? Number(value).toLocaleString('ko-KR')
+            : String(rowData['COL2']).indexOf('REUSERT') > -1
               ? formatUsage(value as string | number, 1, 1)
-              : formatUsage(value as string | number, unitSize, 1))
-          }
+              : formatUsage(value as string | number, unitSize, 1)}
         </td>
       );
     });
   };
 
-  const renderPbnstUsgCells = (
-    rowIdx: number,
-    row: DmStatusBildTpYearsType | DmStatusUsgYearsType,
-    headers: TableHeaderType[]
-  ) => {
+  const renderPbnstUsgCells = (rowIdx: number, row: DmStatusBildTpYearsType | DmStatusUsgYearsType, headers: TableHeaderType[]) => {
     const rowData = row as Record<string, string | number>;
     const isLastInGroup = rowIdx === 8 || rowIdx === 17;
 
-    const getType = (colNm:string) => {
+    const getType = (colNm: string) => {
       const last3 = colNm.slice(-3); // 끝 3자리
-      const prefix = last3[0];       // S 또는 D
+      const prefix = last3[0]; // S 또는 D
 
       if (prefix === 'S') {
         const num = parseInt(last3.slice(1), 10); // 숫자
@@ -282,149 +224,117 @@ export default function SewageStatusSection() {
 
     return headers.map((header, index) => {
       const value = rowData[header.id];
-      const colNm = String(rowData["COL_NM"] ?? "");
+      const colNm = String(rowData['COL_NM'] ?? '');
       const type = getType(colNm);
-      const isSubItem = type === "red-item" || type === "blue-item";
-      
+      const isSubItem = type === 'red-item' || type === 'blue-item';
+
       if (index === 0) {
         // console.log(header.id, value);
         return (
           <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} relative`}>
             {isSubItem ? (
               <>
-                <div
-                  className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${
-                    isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
-                  }`}
-                />
-                <div
-                  className={`absolute left-[16px] w-[4px] z-20 ${
-                    type === "red-item" ? "bg-[#FF8B8B]" : "bg-[#4ECBFF]"
-                  } top-[-2px] ${
-                    isLastInGroup ? "bottom-[0px]" : "bottom-[-2px]"
-                  }`}
-                />
-                <span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">
-                  {value}
-                </span>
+                <div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
+                <div className={`absolute left-[16px] w-[4px] z-20 ${type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
+                <span className='text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]'>{value}</span>
               </>
             ) : (
-              <span className="font-bold text-neutral-900 block w-full text-center">
-                {value}
-              </span>
+              <span className='font-bold text-neutral-900 block w-full text-center'>{value}</span>
             )}
           </td>
-        );  
-      } 
+        );
+      }
 
       return (
-        <td
-          key={`${rowIdx}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[0, 2, 4].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
+        <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[0, 2, 4].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
           {formatUsage(value as string | number, 1000, 1)}
         </td>
       );
-      
     });
   };
 
-  const renderSidoUsgCells = (
-    rowIdx: number,
-    row: DmStatusSidoUsgType,
-    headers: TableHeaderType[]
-  ) => {
+  const renderSidoUsgCells = (rowIdx: number, row: DmStatusSidoUsgType, headers: TableHeaderType[]) => {
     const rowData = row as Record<string, string | number>;
 
     return headers.map((header, index) => {
       let value = rowData[header.id];
-      value = (index === 0||index ===9) ? value : formatUsage(value as string | number, 1000, 1);
-      value = value === "0.0"? "-" : value;
+      value = index === 0 || index === 9 ? value : formatUsage(value as string | number, 1000, 1);
+      value = value === '0.0' ? '-' : value;
 
       return (
-        <td
-          key={`${rowIdx}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 9].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
+        <td key={`${rowIdx}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 9].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
           {value}
         </td>
       );
     });
   };
 
-  const title = "하수처리수 재이용시설(현황)";
+  const title = '하수처리수 재이용시설(현황)';
 
   return (
-    <div className="bg-white">
+    <div className='bg-white'>
       {/* 상단 타이틀 */}
-      <div className="inline-block">
-        <h2 className="relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900">
-            <span className="relative z-10">{title}</span>
-            <span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
+      <div className='inline-block'>
+        <h2 className='relative inline-block px-2 text-[28px] font-extrabold tracking-tight leading-none text-slate-900'>
+          <span className='relative z-10'>{title}</span>
+          <span className='absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300' />
         </h2>
       </div>
 
-      <div className="mt-[70px] pb-[120px]">
+      <div className='mt-[70px] pb-[120px]'>
         {/* 1) 연도별 하수처리수 재이용 현황 */}
         <section>
-            {/* 인트로 */}
-            <SewageIntroSummary />
+          {/* 인트로 */}
+          <SewageIntroSummary />
 
-            <div id="status-treated-year" className="scroll-mt-[120px]">
-                <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
-                <div className="mt-10">
-                    <div className={tableStyles.container}>
-                    <table className={tableStyles.table}>
-                        <colgroup>
-                        <col style={{ width: "130px" }} />
-                        <col style={{ width: "180px" }} />
-                        <col />
-                        <col />
-                        <col />
-                        <col />
-                        <col />
-                        <col />
-                        </colgroup>
-                        <thead>
-                        <tr>
-                            <th
-                            colSpan={2}
-                            className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                            >
-                            구분
-                            </th>
-                            {renderPartHeaders(pbnstYears, headerColors6)}
-                        </tr>
-                        </thead>
-                        <tbody>
-                          {pbnstByLawYears.map((row, idx, arr) => (
-                              <tr key={idx}>
-                              {renderCells(idx, row, arr, pbnstByLawYearsHeader, 1000)}
-                              </tr>
-                          ))}
-                        </tbody>
-                    </table>
-                    </div>
+          <div id='status-treated-year' className='scroll-mt-[120px]'>
+            <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
+            <div className='mt-10'>
+              <div className={tableStyles.container}>
+                <table className={tableStyles.table}>
+                  <colgroup>
+                    <col style={{ width: '130px' }} />
+                    <col style={{ width: '180px' }} />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                  </colgroup>
+                  <thead>
+                    <tr>
+                      <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                        구분
+                      </th>
+                      {renderPartHeaders(pbnstYears, headerColors6)}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {pbnstByLawYears.map((row, idx, arr) => (
+                      <tr key={idx}>{renderCells(idx, row, arr, pbnstByLawYearsHeader, 1000)}</tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
 
-                    <SourceText />
-                </div>
+              <SourceText />
             </div>
+          </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 용도별 하수처리수 재이용 현황 */}
-        <section id="status-treated-usage" className="scroll-mt-[120px]">
+        <section id='status-treated-usage' className='scroll-mt-[120px]'>
           <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
-              <div className="mb-2 text-right text-[13px] text-neutral-600">
-                (단위: 백만m³/일)
-              </div>
+              <div className='mb-2 text-right text-[13px] text-neutral-600'>(단위: 백만m³/년)</div>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "180px" }} />
+                  <col style={{ width: '180px' }} />
                   <col />
                   <col />
                   <col />
@@ -434,17 +344,15 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>
-                      구분
-                    </th>
+                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
                     {renderPartHeaders(pbnstYears, headerColors6)}
                   </tr>
                 </thead>
                 <tbody>
                   {pbnstByUsgYears.map((row, idx) => (
-                      <tr key={idx}  className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderPbnstUsgCells(idx, row, pbnstByUsgYearsHeader)}
-                      </tr>
+                    </tr>
                   ))}
                 </tbody>
               </table>
@@ -454,18 +362,18 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 하수처리시설 설치 및 이용 현황 */}
-        <section id="status-treated-facility" className="scroll-mt-[120px]">
+        <section id='status-treated-facility' className='scroll-mt-[120px]'>
           <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "130px" }} />
-                  <col style={{ width: "160px" }} />
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '160px' }} />
                   <col />
                   <col />
                   <col />
@@ -475,10 +383,7 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th
-                      colSpan={2}
-                      className={`${tableStyles.th} ${tableStyles.headerBg}`}
-                    >
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       구분
                     </th>
                     {renderPartHeaders(pbnstYears, headerColors6)}
@@ -486,9 +391,7 @@ export default function SewageStatusSection() {
                 </thead>
                 <tbody>
                   {pbnstByCpcYears.map((row, idx, arr) => (
-                      <tr key={idx}>
-                      {renderCells(idx, row, arr, pbnstByCpcYearsHeader, 10000)}
-                      </tr>
+                    <tr key={idx}>{renderCells(idx, row, arr, pbnstByCpcYearsHeader, 10000)}</tr>
                   ))}
                 </tbody>
               </table>
@@ -498,24 +401,19 @@ export default function SewageStatusSection() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 4) 시도별 하수처리수 재이용 현황 */}
-        <section
-          id="status-treated-region"
-          className="scroll-mt-[120px]"
-        >
+        <section id='status-treated-region' className='scroll-mt-[120px]'>
           <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
 
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
-              <div className="mb-2 text-right text-[13px] text-neutral-600">
-                (단위: 백만m³/일)
-              </div>
+              <div className='mb-2 text-right text-[13px] text-neutral-600'>(단위: 백만m³/년)</div>
 
               <table className={tableStyles.table}>
                 <colgroup>
-                  <col style={{ width: "160px" }} />
+                  <col style={{ width: '160px' }} />
                   <col />
                   <col />
                   <col />
@@ -529,54 +427,53 @@ export default function SewageStatusSection() {
                 </colgroup>
                 <thead>
                   <tr>
-                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}> 시도 </th>
-                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
-                      연간<br />하수<br />처리량
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      {' '}
+                      시도{' '}
                     </th>
-                    <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`} >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      연간
+                      <br />
+                      하수
+                      <br />
+                      처리량
+                    </th>
+                    <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       재이용현황
                     </th>
-                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
-                      재이용률<br />(%)
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      재이용률
+                      <br />
+                      (%)
                     </th>
-                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       비고
                     </th>
                   </tr>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       계
                     </th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} >
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
                       장내
                     </th>
-                    <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`} >
+                    <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>
                       장외
                     </th>
                   </tr>
                   <tr>
-                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>
-                      소계
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>
-                      하천유지용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>
-                      공업용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>
-                      농업용수
-                    </th>
-                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>
-                      기타용수
-                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
+                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
+                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
+                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
                   </tr>
                 </thead>
                 <tbody>
                   {pbnstBySido.map((row, idx) => (
-                      <tr key={idx}  className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderSidoUsgCells(idx, row, pbnstBySidoHeader)}
-                      </tr>
+                    </tr>
                   ))}
                 </tbody>
               </table>
diff --git a/apps/dm/app/(with-layout)/status/rain/page.tsx b/apps/dm/app/(with-layout)/status/rain/page.tsx
index 88f041edf..fe4caa7c4 100644
--- a/apps/dm/app/(with-layout)/status/rain/page.tsx
+++ b/apps/dm/app/(with-layout)/status/rain/page.tsx
@@ -1,60 +1,36 @@
-"use client";
+'use client';
 
-import { useEffect, useMemo } from "react";
-import SubPageHeader from "@/components/SubPageHeader";
-import { useDmStore } from "@/app/store";
-import { formatUsage } from "@/app/common/transValueFormat";
-import type {
-  DmStatusBildTpYearsType,
-  DmStatusUsgBildTpType,
-  DmStatusUsgYearsType,
-  TableHeaderType,
-} from "@/app/store/dm-status/type";
+import { useEffect, useMemo } from 'react';
+import SubPageHeader from '@/components/SubPageHeader';
+import { useDmStore } from '@/app/store';
+import { formatUsage } from '@/app/common/transValueFormat';
+import type { DmStatusBildTpYearsType, DmStatusUsgBildTpType, DmStatusUsgYearsType, TableHeaderType } from '@/app/store/dm-status/type';
 
 // 공통 섹션 타이틀 컴포넌트
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    <div className='flex items-center gap-3'>
+      <span className='h-5 w-[3px] bg-sky-500' />
+      <h3 className='text-[24px] font-bold text-neutral-900'>{children}</h3>
     </div>
   );
 }
 
 // 구분선
-function Hr({ className = "" }: { className?: string }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-
-
 const tableStyles = {
-  container: "w-[1000px] mx-auto overflow-hidden",
-  table: "w-full table-fixed border-collapse text-center text-[16px]",
-  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
-  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
-  headerBg: "bg-[#E3E7EA]",
+  container: 'w-[1000px] mx-auto overflow-hidden',
+  table: 'w-full table-fixed border-collapse text-center text-[16px]',
+  th: 'border border-[#858F98] py-3 font-bold text-neutral-800',
+  td: 'border border-[#858F98] py-3 text-neutral-700 font-medium break-keep',
+  headerBg: 'bg-[#E3E7EA]',
 };
 
-const headerColors6 = [
-  "bg-[#01ACE5]",
-  "bg-[#17AFC7]",
-  "bg-[#2CB2A9]",
-  "bg-[#42B58B]",
-  "bg-[#57B86D]",
-  "bg-[#81C784]",
-];
-const headerColors8 = [
-  "bg-[#01ACE5]",
-  "bg-[#10AED0]",
-  "bg-[#20B0BA]",
-  "bg-[#2FB2A5]",
-  "bg-[#3FB58F]",
-  "bg-[#4EB77A]",
-  "bg-[#5EB964]",
-  "bg-[#6DBB4F]",
-];
-
+const headerColors6 = ['bg-[#01ACE5]', 'bg-[#17AFC7]', 'bg-[#2CB2A9]', 'bg-[#42B58B]', 'bg-[#57B86D]', 'bg-[#81C784]'];
+const headerColors8 = ['bg-[#01ACE5]', 'bg-[#10AED0]', 'bg-[#20B0BA]', 'bg-[#2FB2A5]', 'bg-[#3FB58F]', 'bg-[#4EB77A]', 'bg-[#5EB964]', 'bg-[#6DBB4F]'];
 
 export default function RainwaterStatusPage() {
   const getRainyByBildTpYears = useDmStore((state) => state.getRainyByBildTpYears);
@@ -68,19 +44,11 @@ export default function RainwaterStatusPage() {
   const rainyByUsgBildTp = useDmStore((state) => state.rainy.rainyByUsgBildTp);
   const rainyByUsgYearsHeader = useDmStore((state) => state.rainy.rainyByUsgYearsHeader);
   const rainyByUsgYears = useDmStore((state) => state.rainy.rainyByUsgYears);
-  const partBildTpHeader = useMemo(
-    () => rainyByUsgBildTpHeader.slice(3).map((header) => header.title),
-    [rainyByUsgBildTpHeader]
-  );
-  
+  const partBildTpHeader = useMemo(() => rainyByUsgBildTpHeader.slice(3).map((header) => header.title), [rainyByUsgBildTpHeader]);
 
   // 출처 텍스트
   function SourceText() {
-    return (
-      <p className="mt-7 text-center text-[13px] text-neutral-500">
-        자료: 환경부(2024), 「{selectYear} 하수도 통계」
-      </p>
-    );
+    return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 환경부(2024), 「{selectYear} 하수도 통계」</p>;
   }
 
   useEffect(() => {
@@ -91,32 +59,22 @@ export default function RainwaterStatusPage() {
 
   const renderPartHeaders = (headers: string[], headerColors: string[]) => {
     return headers.map((header, index) => (
-      <th
-        key={header}
-        className={`${tableStyles.th} ${headerColors[index] ?? "bg-[#81C784]"} text-white`}
-        style={{ width: "140px" }}
-      >
+      <th key={header} className={`${tableStyles.th} ${headerColors[index] ?? 'bg-[#81C784]'} text-white`} style={{ width: '140px' }}>
         {header}
       </th>
     ));
   };
 
-  const renderBuildingUsageCells = (
-    row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType,
-    headers: TableHeaderType[]
-  ) => {
+  const renderBuildingUsageCells = (row: DmStatusBildTpYearsType | DmStatusUsgYearsType | DmStatusUsgYearsType, headers: TableHeaderType[]) => {
     const rowData = row as Record<string, string | number>;
     const firstHeaderId = headers[0]?.id;
-    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? "") : "";
+    const rowKey = firstHeaderId ? String(rowData[firstHeaderId] ?? '') : '';
 
     return headers.map((header, index) => {
       const value = rowData[header.id];
 
       return (
-        <td
-          key={`${rowKey}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 5].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
+        <td key={`${rowKey}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 5].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
           {index === 0 ? value : formatUsage(value as string | number, 1000, 1)}
         </td>
       );
@@ -126,63 +84,49 @@ export default function RainwaterStatusPage() {
   const renderRainyByUsgBildTpCells = (row: DmStatusUsgBildTpType) => {
     return rainyByUsgBildTpHeader.map((header, index) => {
       const value = row[header.id as keyof DmStatusUsgBildTpType];
-      const displayValue =
-        index === 0
-          ? value
-          : header.id === "CNT"
-            ? Number(value).toLocaleString("ko-KR")
-            : formatUsage(value as string | number, 1000, 1);
+      const displayValue = index === 0 ? value : header.id === 'CNT' ? Number(value).toLocaleString('ko-KR') : formatUsage(value as string | number, 1000, 1);
 
       return (
-        <td
-          key={`${row.USG_NM}-${header.id}`}
-          className={`${tableStyles.td} ${index === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 2].includes(index) ? "bg-[#EAF5F5]" : ""}`}
-        >
-          {displayValue == 0.0 ? "-" : displayValue}
+        <td key={`${row.USG_NM}-${header.id}`} className={`${tableStyles.td} ${index === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 2].includes(index) ? 'bg-[#EAF5F5]' : ''}`}>
+          {displayValue == 0.0 ? '-' : displayValue}
         </td>
       );
     });
   };
 
   return (
-    <div className="bg-white">
+    <div className='bg-white'>
       <SubPageHeader
-        title="빗물이용시설(현황)"
-        crumbs={[
-          { label: "Home", href: "/reuse" },
-          { label: "물 재이용 현황", href: "/reuse/cases/rain" },
-          { label: "빗물이용시설(현황)" },
-        ]}
+        title='빗물이용시설(현황)'
+        crumbs={[{ label: 'Home', href: '/reuse' }, { label: '물 재이용 현황', href: '/reuse/cases/rain' }, { label: '빗물이용시설(현황)' }]}
         hideFooterLine
         hideGuideText
-        wrapClassName="!pb-0"
+        wrapClassName='!pb-0'
       />
 
-      <div className="pr-[100px]">
-        <Hr className="my-7" />
+      <div className='pr-[100px]'>
+        <Hr className='my-7' />
 
         {/* 1) 빗물이용시설의 건축물별 빗물이용량 현황 */}
-        <section id="status-rain-building" className="mt-10 scroll-mt-[120px]">
+        <section id='status-rain-building' className='mt-10 scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
-          <div className="mt-10">
+          <div className='mt-10'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
                       구분
                     </th>
                     <th colSpan={rainyYears.length || 6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
                       빗물이용량 (천m³/년)
                     </th>
                   </tr>
-                  <tr>
-                    {renderPartHeaders(rainyYears, headerColors6)}
-                  </tr>
+                  <tr>{renderPartHeaders(rainyYears, headerColors6)}</tr>
                 </thead>
                 <tbody>
                   {rainyByBildTpYears.map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderBuildingUsageCells(row, rainyByBildTpYearsHeader)}
                     </tr>
                   ))}
@@ -193,28 +137,38 @@ export default function RainwaterStatusPage() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 2) 빗물이용시설의 용도별 분포 (2023년 기준) */}
-        <section id="status-rain-purpose-distribution" className="scroll-mt-[120px]">
+        <section id='status-rain-purpose-distribution' className='scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 분포 ({selectYear}년 기준)</SectionTitle>
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>개소수<br />(개소)</th>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "84px" }}>저류용량<br />(천m³)</th>
-                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
-                  </tr>
-                  <tr>
-                    {renderPartHeaders(partBildTpHeader, headerColors8)}
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
+                      용도
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      개소수
+                      <br />
+                      (개소)
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '84px' }}>
+                      저류조용량
+                      <br />
+                      (천m³)
+                    </th>
+                    <th colSpan={8} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      빗물이용량 (천m³/년)
+                    </th>
                   </tr>
+                  <tr>{renderPartHeaders(partBildTpHeader, headerColors8)}</tr>
                 </thead>
                 <tbody>
                   {rainyByUsgBildTp.map((row, idx) => (
-                    <tr key={`${row.USG_NM}-${idx}`} className="bg-white">
+                    <tr key={`${row.USG_NM}-${idx}`} className='bg-white'>
                       {renderRainyByUsgBildTpCells(row)}
                     </tr>
                   ))}
@@ -225,26 +179,28 @@ export default function RainwaterStatusPage() {
           </div>
         </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
         {/* 3) 빗물이용시설의 용도별 빗물이용량 현황 */}
-        <section id="status-rain-purpose-usage" className="pb-[200px] scroll-mt-[120px]">
+        <section id='status-rain-purpose-usage' className='pb-[200px] scroll-mt-[120px]'>
           <SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
-          <div className="mt-8">
+          <div className='mt-8'>
             <div className={tableStyles.container}>
               <table className={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: "160px" }}>용도</th>
-                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>빗물이용량 (천m³/년)</th>
-                  </tr>
-                  <tr>
-                    {renderPartHeaders(rainyYears, headerColors6)}
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`} style={{ width: '160px' }}>
+                      용도
+                    </th>
+                    <th colSpan={6} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      빗물이용량 (천m³/년)
+                    </th>
                   </tr>
+                  <tr>{renderPartHeaders(rainyYears, headerColors6)}</tr>
                 </thead>
                 <tbody>
                   {rainyByUsgYears.map((row, idx) => (
-                    <tr key={idx} className="bg-white">
+                    <tr key={idx} className='bg-white'>
                       {renderBuildingUsageCells(row, rainyByUsgYearsHeader)}
                     </tr>
                   ))}
diff --git a/apps/dm/app/(with-layout)/status/sewage/page.tsx b/apps/dm/app/(with-layout)/status/sewage/page.tsx
index fdb1fe8f9..98d49bfc1 100644
--- a/apps/dm/app/(with-layout)/status/sewage/page.tsx
+++ b/apps/dm/app/(with-layout)/status/sewage/page.tsx
@@ -1,30 +1,26 @@
-"use client";
+'use client';
 
-import React from "react";
-import SubPageHeader from "@/components/SubPageHeader";
+import React from 'react';
+import SubPageHeader from '@/components/SubPageHeader';
 
 // 공통 섹션 타이틀 컴포넌트
 function SectionTitle({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
+    <div className='flex items-center gap-3'>
+      <span className='h-5 w-[3px] bg-sky-500' />
+      <h3 className='text-[24px] font-bold text-neutral-900'>{children}</h3>
     </div>
   );
 }
 
 // 구분선
-function Hr({ className = "" }: { className?: string }) {
+function Hr({ className = '' }: { className?: string }) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
 // 출처 텍스트
 function SourceText() {
-  return (
-    <p className="mt-7 text-center text-[13px] text-neutral-500">
-      자료: 환경부(2024), 「2023 하수도 통계」
-    </p>
-  );
+  return <p className='mt-7 text-center text-[13px] text-neutral-500'>자료: 환경부(2024), 「2023 하수도 통계」</p>;
 }
 
 /**
@@ -33,11 +29,11 @@ function SourceText() {
  * - 폰트 사이즈: 16px로 수정
  */
 const tableStyles = {
-  container: "w-[1000px] mx-auto overflow-hidden",
-  table: "w-full table-fixed border-collapse text-center text-[16px]",
-  th: "border border-[#858F98] py-3 font-bold text-neutral-800",
-  td: "border border-[#858F98] py-3 text-neutral-700 font-medium break-keep",
-  headerBg: "bg-[#E3E7EA]",
+  container: 'w-[1000px] mx-auto overflow-hidden',
+  table: 'w-full table-fixed border-collapse text-center text-[16px]',
+  th: 'border border-[#858F98] py-3 font-bold text-neutral-800',
+  td: 'border border-[#858F98] py-3 text-neutral-700 font-medium break-keep',
+  headerBg: 'bg-[#E3E7EA]',
 };
 
 // export default function TreatedWaterPage() {
@@ -51,368 +47,382 @@ const tableStyles = {
 
 export default function TreatedStatusPage() {
   return (
-    <div className="relative bg-white">
+    <div className='relative bg-white'>
       {/* <BusinessSubNav /> */}
 
       <SubPageHeader
-        title="하수처리수 재이용시설(현황)"
-        crumbs={[
-          { label: "Home", href: "/main" },
-          { label: "물 재이용 현황", href: "/status/rain" },
-          { label: "하수처리수 재이용시설(현황)" },
-        ]}
+        title='하수처리수 재이용시설(현황)'
+        crumbs={[{ label: 'Home', href: '/main' }, { label: '물 재이용 현황', href: '/status/rain' }, { label: '하수처리수 재이용시설(현황)' }]}
         hideFooterLine
         hideGuideText
-        wrapClassName="!pb-0"
+        wrapClassName='!pb-0'
       />
 
-      <div className="pr-0">
-        <Hr className="my-7" />
+      <div className='pr-0'>
+        <Hr className='my-7' />
 
-      {/* 1) 연도별 하수처리수 재이용 현황 */}
-      <section className="mt-10">
-        <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
-        <div className="mt-10">
-          <div className={tableStyles.container}>
-            <table className={tableStyles.table}>
-              <colgroup>
-                <col style={{ width: '130px' }} />
-                <col style={{ width: '180px' }} />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
-                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
-                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
-                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
-                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
-                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
-                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  {
-                    group: "전체",
-                    rows: [
-                      ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "671", "681", "698", "704", "714", "717"],
-                      ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "7,163.7", "7,140.4", "7,375.6", "7,335.8", "7,378.9", "7,537.2"],
-                      ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "1,112.7", "1,148.7", "1,148.7", "1,127.0", "1,136.8", "1,137.5"],
-                      ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "17.4", "16.5", "15.5", "14.1", "14.3", "14.4"],
-                    ]
-                  },
-                  {
-                    group: "법적 대상",
-                    rows: [
-                      ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "68", "82", "94", "97", "101", "118"],
-                      ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "761.2", "839.0", "935.3", "1,158.7", "1,220.6", "1,473.6"],
-                      ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "162.2", "190.6", "218.5", "244.6", "247.2", "324.9"],
-                      ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "24.7", "25.4", "27.8", "25.7", "24.2", "24.1"],
-                    ]
-                  },
-                  {
-                    group: "법적 미대상",
-                    rows: [
-                      ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "603", "599", "604", "607", "613", "599"],
-                      ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "6,402.5", "6,301.4", "6,440.3", "6,177.1", "6,158.3", "6,063.5"],
-                      ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", "950.6", "958.1", "926.2", "882.4", "889.5", "812.7"],
-                      ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", "16.5", "15.3", "13.6", "12.2", "12.6", "12.5"],
-                    ]
-                  }
-                ].map((section, sIdx) => (
-                  <React.Fragment key={sIdx}>
-                    {section.rows.map((row, rIdx) => (
-                      <tr key={`${sIdx}-${rIdx}`} className="bg-white">
-                        {rIdx === 0 && (
-                          <td 
-                            rowSpan={section.rows.length} 
-                            className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
-                          >
-                            {section.group}
-                          </td>
-                        )}
-                        {row.map((val, i) => {
-                          const isFirstCol = i === 0;
-                          const isHighlightedCol = [1, 3, 5].includes(i);
-                          return (
-                            <td 
-                              key={i} 
-                              className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
-                              dangerouslySetInnerHTML={{ __html: val }}
-                            />
-                          );
-                        })}
-                      </tr>
-                    ))}
-                  </React.Fragment>
-                ))}
-              </tbody>
-            </table>
+        {/* 1) 연도별 하수처리수 재이용 현황 */}
+        <section className='mt-10'>
+          <SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
+          <div className='mt-10'>
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '180px' }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      구분
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    {
+                      group: '전체',
+                      rows: [
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '671', '681', '698', '704', '714', '717'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '7,163.7', '7,140.4', '7,375.6', '7,335.8', '7,378.9', '7,537.2'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '1,112.7', '1,148.7', '1,148.7', '1,127.0', '1,136.8', '1,137.5'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '17.4', '16.5', '15.5', '14.1', '14.3', '14.4'],
+                      ],
+                    },
+                    {
+                      group: '법적 대상',
+                      rows: [
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '68', '82', '94', '97', '101', '118'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '761.2', '839.0', '935.3', '1,158.7', '1,220.6', '1,473.6'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '162.2', '190.6', '218.5', '244.6', '247.2', '324.9'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '24.7', '25.4', '27.8', '25.7', '24.2', '24.1'],
+                      ],
+                    },
+                    {
+                      group: '법적 미대상',
+                      rows: [
+                        ["개소수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '603', '599', '604', '607', '613', '599'],
+                        ["하수처리량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '6,402.5', '6,301.4', '6,440.3', '6,177.1', '6,158.3', '6,063.5'],
+                        ["재이용량 <span class='text-[13px] font-normal text-[#767676]'>(백만m³/년)</span>", '950.6', '958.1', '926.2', '882.4', '889.5', '812.7'],
+                        ["재이용률 <span class='text-[13px] font-normal text-[#767676]'>(%)</span>", '16.5', '15.3', '13.6', '12.2', '12.6', '12.5'],
+                      ],
+                    },
+                  ].map((section, sIdx) => (
+                    <React.Fragment key={sIdx}>
+                      {section.rows.map((row, rIdx) => (
+                        <tr key={`${sIdx}-${rIdx}`} className='bg-white'>
+                          {rIdx === 0 && (
+                            <td rowSpan={section.rows.length} className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}>
+                              {section.group}
+                            </td>
+                          )}
+                          {row.map((val, i) => {
+                            const isFirstCol = i === 0;
+                            const isHighlightedCol = [1, 3, 5].includes(i);
+                            return (
+                              <td
+                                key={i}
+                                className={`${tableStyles.td} ${isFirstCol ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}
+                                dangerouslySetInnerHTML={{ __html: val }}
+                              />
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
           </div>
-          <SourceText />
-        </div>
-      </section>
+        </section>
 
-        <Hr className="my-11" />
+        <Hr className='my-11' />
 
-      {/* 2) 용도별 하수처리수 재이용 현황 */}
-      <section>
-        <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
-        <div className="mt-8">
-          <div className={tableStyles.container}>
-            <table className={tableStyles.table}>
-              <colgroup>
-                <col style={{ width: '180px' }} />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
-                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
-                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
-                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
-                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
-                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
-                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  { label: "총 재이용량", type: "total", values: ["1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"] },
-                  { label: "장내 재이용", type: "category", values: ["520.6", "519.8", "513.9", "520.3", "502.2", "490.0"] },
-                  { label: "세척수", type: "red-item", values: ["177.9", "174.4", "169.4", "180.9", "196.8", "191.2"] },
-                  { label: "냉각수", type: "red-item", values: ["45.5", "46.8", "50.4", "40.6", "38.3", "41.7"] },
-                  { label: "청소수", type: "red-item", values: ["17.6", "21.2", "21.2", "21.7", "20.8", "20.5"] },
-                  { label: "조경용수", type: "red-item", values: ["0.1", "0.1", "-", "-", "-", "-"] },
-                  { label: "회생용수", type: "red-item", values: ["15.8", "16.7", "17.8", "15.7", "14.4", "14.0"] },
-                  { label: "장내급수도", type: "red-item", values: ["2.4", "-", "-", "-", "-", "-"] },
-                  { label: "장내기타용수", type: "red-item", values: ["261.3", "260.6", "255.0", "261.1", "231.8", "222.6"] },
-                  { label: "장외 재이용", type: "category", values: ["592.1", "628.9", "630.8", "606.7", "634.6", "647.5"] },
-                  { label: "청소·화장실용수", type: "blue-item", values: ["0.6", "0.4", "0.4", "0.4", "0.4", "0.4"] },
-                  { label: "세척·살수용수", type: "blue-item", values: ["5.6", "9.9", "2.9", "2.1", "3.0", "3.6"] },
-                  { label: "조경용수", type: "blue-item", values: ["10.3", "16.4", "5.9", "4.5", "8.9", "9.5"] },
-                  { label: "친수용수", type: "blue-item", values: ["7.8", "3.1", "3.1", "3.0", "10.9", "10.5"] },
-                  { label: "하천유지용수", type: "blue-item", values: ["480.5", "482.5", "496.2", "442.7", "471.7", "484.0"] },
-                  { label: "농업용수", type: "blue-item", values: ["12.2", "11.9", "13.4", "10.7", "10.6", "11.4"] },
-                  { label: "지하수 충전", type: "blue-item", values: ["0.0", "0.0", "0.0", "13.4", "0.0", "0.0"] },
-                  { label: "공업용수", type: "blue-item", values: ["75.2", "104.6", "108.9", "129.9", "129.0", "128.1"] },
-                ].map((row, idx) => {
-                  const isSubItem = row.type === "red-item" || row.type === "blue-item";
-                  const isLastInGroup = idx === 8 || idx === 17;
+        {/* 2) 용도별 하수처리수 재이용 현황 */}
+        <section>
+          <SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
+          <div className='mt-8'>
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: '180px' }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    { label: '총 재이용량', type: 'total', values: ['1,112.7', '1,148.7', '1,144.7', '1,127.0', '1,136.8', '1,137.5'] },
+                    { label: '장내 재이용', type: 'category', values: ['520.6', '519.8', '513.9', '520.3', '502.2', '490.0'] },
+                    { label: '세척수', type: 'red-item', values: ['177.9', '174.4', '169.4', '180.9', '196.8', '191.2'] },
+                    { label: '냉각수', type: 'red-item', values: ['45.5', '46.8', '50.4', '40.6', '38.3', '41.7'] },
+                    { label: '청소수', type: 'red-item', values: ['17.6', '21.2', '21.2', '21.7', '20.8', '20.5'] },
+                    { label: '조경용수', type: 'red-item', values: ['0.1', '0.1', '-', '-', '-', '-'] },
+                    { label: '회생용수', type: 'red-item', values: ['15.8', '16.7', '17.8', '15.7', '14.4', '14.0'] },
+                    { label: '장내급수도', type: 'red-item', values: ['2.4', '-', '-', '-', '-', '-'] },
+                    { label: '장내기타용수', type: 'red-item', values: ['261.3', '260.6', '255.0', '261.1', '231.8', '222.6'] },
+                    { label: '장외 재이용', type: 'category', values: ['592.1', '628.9', '630.8', '606.7', '634.6', '647.5'] },
+                    { label: '청소·화장실용수', type: 'blue-item', values: ['0.6', '0.4', '0.4', '0.4', '0.4', '0.4'] },
+                    { label: '세척·살수용수', type: 'blue-item', values: ['5.6', '9.9', '2.9', '2.1', '3.0', '3.6'] },
+                    { label: '조경용수', type: 'blue-item', values: ['10.3', '16.4', '5.9', '4.5', '8.9', '9.5'] },
+                    { label: '친수용수', type: 'blue-item', values: ['7.8', '3.1', '3.1', '3.0', '10.9', '10.5'] },
+                    { label: '하천유지용수', type: 'blue-item', values: ['480.5', '482.5', '496.2', '442.7', '471.7', '484.0'] },
+                    { label: '농업용수', type: 'blue-item', values: ['12.2', '11.9', '13.4', '10.7', '10.6', '11.4'] },
+                    { label: '지하수 충전', type: 'blue-item', values: ['0.0', '0.0', '0.0', '13.4', '0.0', '0.0'] },
+                    { label: '공업용수', type: 'blue-item', values: ['75.2', '104.6', '108.9', '129.9', '129.0', '128.1'] },
+                  ].map((row, idx) => {
+                    const isSubItem = row.type === 'red-item' || row.type === 'blue-item';
+                    const isLastInGroup = idx === 8 || idx === 17;
 
-                  return (
-                    <tr key={idx} className="bg-white">
-                      <td className={`${tableStyles.td} relative`}>
-                        {isSubItem ? (
-                          <>
-                            <div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
-                            <div className={`absolute left-[16px] w-[4px] z-20 ${row.type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
-                            <span className="text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]">{row.label}</span>
-                          </>
-                        ) : (
-                          <span className="font-bold text-neutral-900 block w-full text-center">{row.label}</span>
-                        )}
-                      </td>
-                      {row.values.map((val, i) => (
-                        <td key={i} className={`${tableStyles.td} ${[0, 2, 4].includes(i) ? "bg-[#EAF5F5]" : ""}`}>
+                    return (
+                      <tr key={idx} className='bg-white'>
+                        <td className={`${tableStyles.td} relative`}>
+                          {isSubItem ? (
+                            <>
+                              <div className={`absolute left-[1px] w-[16px] bg-white z-10 top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`} />
+                              <div
+                                className={`absolute left-[16px] w-[4px] z-20 ${row.type === 'red-item' ? 'bg-[#FF8B8B]' : 'bg-[#4ECBFF]'} top-[-2px] ${isLastInGroup ? 'bottom-[0px]' : 'bottom-[-2px]'}`}
+                              />
+                              <span className='text-[#4f4f4f] font-bold block w-full text-center relative z-30 translate-x-[8px]'>{row.label}</span>
+                            </>
+                          ) : (
+                            <span className='font-bold text-neutral-900 block w-full text-center'>{row.label}</span>
+                          )}
+                        </td>
+                        {row.values.map((val, i) => (
+                          <td key={i} className={`${tableStyles.td} ${[0, 2, 4].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
+                            {val}
+                          </td>
+                        ))}
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className='my-11' />
+
+        {/* 3) 하수처리시설 설치 및 이용 현황 */}
+        <section>
+          <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
+          <div className='mt-8'>
+            <div className={tableStyles.container}>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: '130px' }} />
+                  <col style={{ width: '160px' }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      구분
+                    </th>
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
+                    <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
+                    <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
+                    <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
+                    <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    {
+                      group: '전체',
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '671', '681', '698', '704', '714', '717'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '25,846', '26,067', '26,244', '26,492', '26,586', '26,766'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '1,112.7', '1,148.7', '1,144.7', '1,127.0', '1,136.8', '1,137.5'],
+                      ],
+                    },
+                    {
+                      group: '법적 대상',
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '68', '82', '94', '97', '101', '118'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '3,088.9', '3,359.2', '3,612.6', '4,412.2', '4,692.3', '5,503.8'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '162.2', '190.6', '218.5', '244.6', '247.2', '324.9'],
+                      ],
+                    },
+                    {
+                      group: '법적 미대상',
+                      rows: [
+                        ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", '603', '599', '604', '607', '613', '599'],
+                        ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '22,757', '22,708', '22,631', '22,080', '21,894', '21,262'],
+                        ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", '950.6', '958.1', '926.2', '882.4', '889.5', '812.7'],
+                      ],
+                    },
+                  ].map((section, sIdx) => (
+                    <React.Fragment key={sIdx}>
+                      {section.rows.map((row, rIdx) => (
+                        <tr key={`${sIdx}-${rIdx}`} className='bg-white'>
+                          {rIdx === 0 && (
+                            <td rowSpan={section.rows.length} className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}>
+                              {section.group}
+                            </td>
+                          )}
+                          {row.map((val, i) => {
+                            const isFirstCol = i === 0;
+                            const isHighlightedCol = [1, 3, 5].includes(i);
+                            return (
+                              <td
+                                key={i}
+                                className={`${tableStyles.td} ${isFirstCol ? '!font-bold !text-neutral-900' : ''} ${isHighlightedCol ? 'bg-[#EAF5F5]' : ''}`}
+                                dangerouslySetInnerHTML={{ __html: val }}
+                              />
+                            );
+                          })}
+                        </tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
+          </div>
+        </section>
+
+        <Hr className='my-11' />
+
+        {/* 4) 시도별 하수처리수 재이용 현황 */}
+        <section className='pb-[200px]'>
+          <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
+          <div className='mt-8'>
+            <div className={tableStyles.container}>
+              <div className='text-right text-[13px] mb-2 text-neutral-600'>(단위: 백만m³/년)</div>
+              <table className={tableStyles.table}>
+                <colgroup>
+                  <col style={{ width: '160px' }} />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      시도
+                    </th>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      연간
+                      <br />
+                      하수
+                      <br />
+                      처리량
+                    </th>
+                    <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>
+                      재이용현황
+                    </th>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      재이용률
+                      <br />
+                      (%)
+                    </th>
+                    <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      비고
+                    </th>
+                  </tr>
+                  <tr>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      계
+                    </th>
+                    <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>
+                      장내
+                    </th>
+                    <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>
+                      장외
+                    </th>
+                  </tr>
+                  <tr>
+                    {/* 💡 하천유지용수는 14px, 나머지 하위 헤더는 16px로 적용 */}
+                    <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
+                    <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
+                    <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
+                    <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
+                    <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    ['합계', '7,537.2', '1,137.5', '490.0', '647.5', '484.0', '128.1', '11.4', '24.0', '15.1%', ''],
+                    ['서울특별시', '1,567.0', '114.9', '59.3', '55.6', '55.1', '-', '-', '0.5', '7.3%', ''],
+                    ['부산광역시', '491.5', '146.2', '120.7', '25.5', '25.3', '-', '-', '0.2', '29.7%', ''],
+                    ['대구광역시', '432.7', '102.4', '38.2', '64.2', '64.1', '-', '-', '0.1', '23.7%', ''],
+                    ['인천광역시', '302.3', '57.7', '11.6', '46.1', '29.2', '12.1', '0.5', '4.3', '19.1%', ''],
+                    ['광주광역시', '211.1', '28.7', '6.5', '22.3', '22.2', '-', '-', '0.1', '13.6%', ''],
+                    ['대전광역시', '244.6', '11.9', '11.9', '0.68', '0.0', '-', '-', '0.1', '4.9%', ''],
+                    ['울산광역시', '235.1', '36.1', '6.1', '29.9', '29.7', '0.2', '-', '-', '15.3%', ''],
+                    ['세종특별자치시', '38.5', '2.5', '2.0', '0.5', '0.4', '-', '0.2', '-', '6.6%', ''],
+                    ['경기도', '1,926.8', '313.3', '122.2', '191.0', '153.0', '33.3', '0.4', '4.3', '16.3%', ''],
+                    ['강원도', '230.4', '19.6', '15.4', '4.2', '2.1', '-', '-', '2.1', '8.5%', ''],
+                    ['충청북도', '190.9', '15.6', '6.3', '9.2', '7.4', '0.6', '-', '1.2', '8.2%', ''],
+                    ['충청남도', '241.5', '41.4', '9.8', '31.5', '17.7', '8.6', '4.5', '0.8', '17.1%', ''],
+                    ['전라북도', '292.4', '42.7', '7.5', '35.1', '33.5', '0.2', '1.0', '0.5', '14.6%', ''],
+                    ['전라남도', '254.0', '23.6', '12.3', '11.3', '8.7', '0.0', '1.0', '1.6', '9.3%', ''],
+                    ['경상북도', '378.4', '129.1', '33.7', '95.3', '20.8', '72.5', '0.8', '1.3', '34.1%', ''],
+                    ['경상남도', '411.3', '50.1', '25.0', '25.0', '14.7', '0.5', '3.0', '6.9', '12.2%', ''],
+                    ['제주특별자치도', '88.6', '1.7', '1.5', '0.12', '-', '-', '0.1', '-', '1.9%', ''],
+                  ].map((row, idx) => (
+                    <tr key={idx} className='bg-white'>
+                      {/* 💡 연간하수처리량(index 1), 장내(index 3), 재이용률(index 9) 컬러 하이라이트 적용 */}
+                      {row.map((val, i) => (
+                        <td key={i} className={`${tableStyles.td} ${i === 0 ? '!font-bold !text-neutral-900' : ''} ${[1, 3, 9].includes(i) ? 'bg-[#EAF5F5]' : ''}`}>
                           {val}
                         </td>
                       ))}
                     </tr>
-                  );
-                })}
-              </tbody>
-            </table>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <SourceText />
           </div>
-          <SourceText />
-        </div>
-      </section>
-
-        <Hr className="my-11" />
-
-      {/* 3) 하수처리시설 설치 및 이용 현황 */}
-      <section>
-        <SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
-        <div className="mt-8">
-          <div className={tableStyles.container}>
-            <table className={tableStyles.table}>
-              <colgroup>
-                <col style={{ width: '130px' }} />
-                <col style={{ width: '160px' }} />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th colSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>구분</th>
-                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white`}>2018</th>
-                  <th className={`${tableStyles.th} bg-[#14AFCD] text-white`}>2019</th>
-                  <th className={`${tableStyles.th} bg-[#28B2B4] text-white`}>2020</th>
-                  <th className={`${tableStyles.th} bg-[#3CB59A] text-white`}>2021</th>
-                  <th className={`${tableStyles.th} bg-[#50B880] text-white`}>2022</th>
-                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white`}>2023</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  {
-                    group: "전체",
-                    rows: [
-                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "671", "681", "698", "704", "714", "717"],
-                      ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "25,846", "26,067", "26,244", "26,492", "26,586", "26,766"],
-                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "1,112.7", "1,148.7", "1,144.7", "1,127.0", "1,136.8", "1,137.5"],
-                    ]
-                  },
-                  {
-                    group: "법적 대상",
-                    rows: [
-                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "68", "82", "94", "97", "101", "118"],
-                      ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "3,088.9", "3,359.2", "3,612.6", "4,412.2", "4,692.3", "5,503.8"],
-                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "162.2", "190.6", "218.5", "244.6", "247.2", "324.9"],
-                    ]
-                  },
-                  {
-                    group: "법적 미대상",
-                    rows: [
-                      ["시설수 <span class='text-[13px] font-normal text-[#767676]'>(개소)</span>", "603", "599", "604", "607", "613", "599"],
-                      ["시설용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "22,757", "22,708", "22,631", "22,080", "21,894", "21,262"],
-                      ["처리용량 <span class='text-[13px] font-normal text-[#767676]'>(만m³/일)</span>", "950.6", "958.1", "926.2", "882.4", "889.5", "812.7"],
-                    ]
-                  }
-                ].map((section, sIdx) => (
-                  <React.Fragment key={sIdx}>
-                    {section.rows.map((row, rIdx) => (
-                      <tr key={`${sIdx}-${rIdx}`} className="bg-white">
-                        {rIdx === 0 && (
-                          <td 
-                            rowSpan={section.rows.length} 
-                            className={`${tableStyles.td} ${tableStyles.headerBg} !text-[18px] !font-bold !text-neutral-900`}
-                          >
-                            {section.group}
-                          </td>
-                        )}
-                        {row.map((val, i) => {
-                          const isFirstCol = i === 0;
-                          const isHighlightedCol = [1, 3, 5].includes(i);
-                          return (
-                            <td 
-                              key={i} 
-                              className={`${tableStyles.td} ${isFirstCol ? "!font-bold !text-neutral-900" : ""} ${isHighlightedCol ? "bg-[#EAF5F5]" : ""}`}
-                              dangerouslySetInnerHTML={{ __html: val }}
-                            />
-                          );
-                        })}
-                      </tr>
-                    ))}
-                  </React.Fragment>
-                ))}
-              </tbody>
-            </table>
-          </div>
-          <SourceText />
-        </div>
-      </section>
-
-        <Hr className="my-11" />
-
-      {/* 4) 시도별 하수처리수 재이용 현황 */}
-      <section className="pb-[200px]">
-        <SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
-        <div className="mt-8">
-          <div className={tableStyles.container}>
-            <div className="text-right text-[13px] mb-2 text-neutral-600">(단위: 백만m³/일)</div>
-            <table className={tableStyles.table}>
-              <colgroup>
-                <col style={{ width: '160px' }} />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-                <col />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>시도</th>
-                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>연간<br/>하수<br/>처리량</th>
-                  <th colSpan={7} className={`${tableStyles.th} ${tableStyles.headerBg} py-2`}>재이용현황</th>
-                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>재이용률<br/>(%)</th>
-                  <th rowSpan={3} className={`${tableStyles.th} ${tableStyles.headerBg}`}>비고</th>
-                </tr>
-                <tr>
-                  <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>계</th>
-                  <th rowSpan={2} className={`${tableStyles.th} ${tableStyles.headerBg}`}>장내</th>
-                  <th colSpan={5} className={`${tableStyles.th} ${tableStyles.headerBg} py-1`}>장외</th>
-                </tr>
-                <tr>
-                  {/* 💡 하천유지용수는 14px, 나머지 하위 헤더는 16px로 적용 */}
-                  <th className={`${tableStyles.th} bg-[#01ACE5] text-white py-2 text-[16px]`}>소계</th>
-                  <th className={`${tableStyles.th} bg-[#1FB1C2] text-white py-2 text-[13px]`}>하천유지용수</th>
-                  <th className={`${tableStyles.th} bg-[#3EB59F] text-white py-2 text-[16px]`}>공업용수</th>
-                  <th className={`${tableStyles.th} bg-[#5DB97C] text-white py-2 text-[16px]`}>농업용수</th>
-                  <th className={`${tableStyles.th} bg-[#6DBB4F] text-white py-2 text-[16px]`}>기타용수</th>
-                </tr>
-              </thead>
-              <tbody>
-                {[
-                  ["합계", "7,537.2", "1,137.5", "490.0", "647.5", "484.0", "128.1", "11.4", "24.0", "15.1%", ""],
-                  ["서울특별시", "1,567.0", "114.9", "59.3", "55.6", "55.1", "-", "-", "0.5", "7.3%", ""],
-                  ["부산광역시", "491.5", "146.2", "120.7", "25.5", "25.3", "-", "-", "0.2", "29.7%", ""],
-                  ["대구광역시", "432.7", "102.4", "38.2", "64.2", "64.1", "-", "-", "0.1", "23.7%", ""],
-                  ["인천광역시", "302.3", "57.7", "11.6", "46.1", "29.2", "12.1", "0.5", "4.3", "19.1%", ""],
-                  ["광주광역시", "211.1", "28.7", "6.5", "22.3", "22.2", "-", "-", "0.1", "13.6%", ""],
-                  ["대전광역시", "244.6", "11.9", "11.9", "0.68", "0.0", "-", "-", "0.1", "4.9%", ""],
-                  ["울산광역시", "235.1", "36.1", "6.1", "29.9", "29.7", "0.2", "-", "-", "15.3%", ""],
-                  ["세종특별자치시", "38.5", "2.5", "2.0", "0.5", "0.4", "-", "0.2", "-", "6.6%", ""],
-                  ["경기도", "1,926.8", "313.3", "122.2", "191.0", "153.0", "33.3", "0.4", "4.3", "16.3%", ""],
-                  ["강원도", "230.4", "19.6", "15.4", "4.2", "2.1", "-", "-", "2.1", "8.5%", ""],
-                  ["충청북도", "190.9", "15.6", "6.3", "9.2", "7.4", "0.6", "-", "1.2", "8.2%", ""],
-                  ["충청남도", "241.5", "41.4", "9.8", "31.5", "17.7", "8.6", "4.5", "0.8", "17.1%", ""],
-                  ["전라북도", "292.4", "42.7", "7.5", "35.1", "33.5", "0.2", "1.0", "0.5", "14.6%", ""],
-                  ["전라남도", "254.0", "23.6", "12.3", "11.3", "8.7", "0.0", "1.0", "1.6", "9.3%", ""],
-                  ["경상북도", "378.4", "129.1", "33.7", "95.3", "20.8", "72.5", "0.8", "1.3", "34.1%", ""],
-                  ["경상남도", "411.3", "50.1", "25.0", "25.0", "14.7", "0.5", "3.0", "6.9", "12.2%", ""],
-                  ["제주특별자치도", "88.6", "1.7", "1.5", "0.12", "-", "-", "0.1", "-", "1.9%", ""],
-                ].map((row, idx) => (
-                  <tr key={idx} className="bg-white">
-                    {/* 💡 연간하수처리량(index 1), 장내(index 3), 재이용률(index 9) 컬러 하이라이트 적용 */}
-                    {row.map((val, i) => (
-                      <td 
-                        key={i} 
-                        className={`${tableStyles.td} ${i === 0 ? "!font-bold !text-neutral-900" : ""} ${[1, 3, 9].includes(i) ? "bg-[#EAF5F5]" : ""}`}
-                      >
-                        {val}
-                      </td>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-          <SourceText />
-        </div>
-      </section>
-
+        </section>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/dm/public/images/landing/intro/greywater_mandatory.png b/apps/dm/public/images/landing/intro/greywater_mandatory.png
index f3dc58ab6..4476f1245 100644
Binary files a/apps/dm/public/images/landing/intro/greywater_mandatory.png and b/apps/dm/public/images/landing/intro/greywater_mandatory.png differ
diff --git a/apps/dm/public/images/landing/intro/greywater_standard.png b/apps/dm/public/images/landing/intro/greywater_standard.png
index d544a1fc7..52fcb0518 100644
Binary files a/apps/dm/public/images/landing/intro/greywater_standard.png and b/apps/dm/public/images/landing/intro/greywater_standard.png differ
diff --git a/apps/dm/public/images/landing/intro/law_timeline.png b/apps/dm/public/images/landing/intro/law_timeline.png
index 56ff1c347..f4e0a1417 100644
Binary files a/apps/dm/public/images/landing/intro/law_timeline.png and b/apps/dm/public/images/landing/intro/law_timeline.png differ
diff --git a/apps/dm/public/images/landing/intro/linkage.png b/apps/dm/public/images/landing/intro/linkage.png
index a7595a598..91f98fa98 100644
Binary files a/apps/dm/public/images/landing/intro/linkage.png and b/apps/dm/public/images/landing/intro/linkage.png differ
diff --git a/apps/dm/public/images/landing/intro/performance_left.png b/apps/dm/public/images/landing/intro/performance_left.png
index b85bdd920..4bdd1e836 100644
Binary files a/apps/dm/public/images/landing/intro/performance_left.png and b/apps/dm/public/images/landing/intro/performance_left.png differ
diff --git a/apps/dm/public/images/landing/intro/policy_timeline.png b/apps/dm/public/images/landing/intro/policy_timeline.png
index 296bad776..744ec87c9 100644
Binary files a/apps/dm/public/images/landing/intro/policy_timeline.png and b/apps/dm/public/images/landing/intro/policy_timeline.png differ
diff --git a/apps/dm/public/images/landing/intro/rainwater_design.png b/apps/dm/public/images/landing/intro/rainwater_design.png
index 714f506f3..5bff2e747 100644
Binary files a/apps/dm/public/images/landing/intro/rainwater_design.png and b/apps/dm/public/images/landing/intro/rainwater_design.png differ
diff --git a/apps/dm/public/images/landing/intro/rel_note.png b/apps/dm/public/images/landing/intro/rel_note.png
index 94880c743..5f00b677e 100644
Binary files a/apps/dm/public/images/landing/intro/rel_note.png and b/apps/dm/public/images/landing/intro/rel_note.png differ
diff --git a/apps/dm/public/images/landing/intro/treatedwater_mandatory.png b/apps/dm/public/images/landing/intro/treatedwater_mandatory.png
index 84704c6ec..617bf1391 100644
Binary files a/apps/dm/public/images/landing/intro/treatedwater_mandatory.png and b/apps/dm/public/images/landing/intro/treatedwater_mandatory.png differ