대민서비스 물재이용 랜딩 페이지 서브 타이틀 라인 UI 수정 및 기타 수정

apps/dm_new/app/(landing)/reuse/_components/CaseTabsCarousel.tsx

@@ -106,21 +106,51 @@ const MOCK: Record<TabKey, CaseItem[]> = {
       imageSrc: "/images/landing/sewage_06.png",
       href: "/reuse/business/sewage/guri",
     },
-    ...Array.from({ length: 6 }).map((_, i) => ({
-      id: `sewage-x-${i}`,
-      title: `하수 재이용 사례 ${i + 4}`,
-      desc: "설명 문구가 들어갑니다. (최대 2~3줄) …",
-      imageSrc: "/images/landing/sample_case.png",
-      href: "#",
-    })),
+    // ...Array.from({ length: 6 }).map((_, i) => ({
+    //   id: `sewage-x-${i}`,
+    //   title: `하수 재이용 사례 ${i + 4}`,
+    //   desc: "설명 문구가 들어갑니다. (최대 2~3줄) …",
+    //   imageSrc: "/images/landing/sample_case.png",
+    //   href: "#",
+    // })),
+  ],
+  global: [
+    {
+      id: "global-1",
+      title: "해외 재이용 사례 개요",
+      desc: "2024년 하수도 통계 기준 15.6%이며, 제2차 물 재이용 기본 계획을 고려한 2030년 목표는 17%, 우리나라의 하수 처리 재이용률은 15% 수준...",
+      imageSrc: "/images/landing/overview_01.png",
+      href: "reuse/business/globalCase/overview",
+    },
+    {
+      id: "global-2",
+      title: "[대만] 국가 주도의 공업용수 공급",
+      desc: "대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑), 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능...",
+      imageSrc: "/images/landing/taiwan_01.png",
+      href: "/reuse/business/globalCase/taiwan",
+    },
+    {
+      id: "global-3",
+      title: "[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급",
+      desc: "SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망, 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급...",
+      imageSrc: "/images/landing/australia_01.png",
+      href: "/reuse/business/globalCase/australia",
+    },
+    {
+      id: "global-4",
+      title: "[싱가포르] 수요가 높은 산업의 물 재이용 의무화",
+      desc: "2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설, NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용...",
+      imageSrc: "/images/landing/singapore_01.png",
+      href: "/reuse/business/globalCase/singapore",
+    },
+    {
+      id: "global-5",
+      title: "[EU] 법률을 제정, EU국가에서 물 재이용 유도",
+      desc: "유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741), 2023년부터 모든 EU국가에서 시행...",
+      imageSrc: "/images/landing/eu_01.png",
+      href: "/reuse/business/globalCase/eu",
+    },
   ],
-  global: Array.from({ length: 6 }).map((_, i) => ({
-    id: `global-${i}`,
-    title: `해외 재이용 사례 ${i + 1}`,
-    desc: "설명 문구가 들어갑니다. (최대 2~3줄) …",
-    imageSrc: "/images/landing/sample_case.png",
-    href: "#",
-  })),
 };
 
 /* ---------------- utils ---------------- */
@@ -482,7 +512,7 @@ export default function CaseTabsCarousel() {
                             key={c.id}
                             className="overflow-hidden rounded-[22px] border-2 border-sky-400 bg-white"
                           >
-                            <div className="h-[241px] w-full bg-slate-100">
+                            <div className="h-[241px] w-full bg-slate-100 border-b border-b-blue-300">
                               <img
                                 src={c.imageSrc}
                                 alt={c.title}
@@ -492,7 +522,7 @@ export default function CaseTabsCarousel() {
                             </div>
 
                             <div className="p-8">
-                              <h3 className="text-[28px] font-extrabold leading-snug tracking-tight">
+                              <h3 className="h-[77px] text-center text-[28px] font-extrabold leading-snug tracking-tight">
                                 {c.title}
                               </h3>
                               <p className="mt-4 line-clamp-3 text-[16px] leading-7 text-slate-600">

apps/dm_new/app/(landing)/reuse/_components/SubPageHeader.tsx

@@ -31,8 +31,8 @@ export default function SubPageHeader({
         <div className="flex items-start justify-between gap-6">
           {/* 좌측 타이틀 */}
           <div className="inline-block">
-            <h1 className="text-[28px] font-extrabold tracking-tight text-slate-900 leading-none">{title}</h1>
-            <div className="h-2 bg-gradient-to-r from-sky-300 to-green-300" />
+            <h1 className="relative z-10 px-2 text-[28px] font-extrabold tracking-tight text-slate-900 leading-none">{title}</h1>
+            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300" />
           </div>
 
           {/* 우측 브레드크럼 */}

apps/dm_new/app/(landing)/reuse/_components/TopNav.tsx

@@ -180,13 +180,13 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
 
             <h2
               id={titleId}
-              className="text-center text-[32px] font-bold tracking-tight leading-none text-gray-900"
+              className="relative z-10 px-2 text-center text-[32px] font-bold tracking-tight leading-none text-gray-900"
             >
               수요처 로그인
             </h2>
 
             {/* title underline gradient bar */}
-            <div className="mx-auto h-[10px] w-[240px] bg-gradient-to-r from-sky-300 to-green-300" />
+            <div className="relative top-[-7px] -z-1 mx-auto h-[10px] w-[240px] bg-gradient-to-r from-sky-300 to-green-300" />
           </div>
 
           {/* Body */}

apps/dm_new/app/(landing)/reuse/_sections/IntroCards.tsx

@@ -43,8 +43,8 @@ export default function IntroCards() {
       <div className="mx-auto max-w-[1520px] px-6 py-[90px] h-[870px]">
         <div className="text-center">
           <div className="inline-block"> 
-            <h2 className="text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 소개</h2>
-            <div className="h-2 bg-gradient-to-r from-sky-300 to-green-300"></div>
+            <h2 className="relative z-10 px-2 text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 소개</h2>
+            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300"></div>
           </div>
           <p className="mt-5 text-xl text-gray-500">
             지속 가능한 미래를 위한 약속, 깨끗한 물의 새로운 순환을 시작합니다.

apps/dm_new/app/(landing)/reuse/_sections/ProcessFlow.tsx

@@ -8,8 +8,8 @@ export default function ProcessFlow() {
       <div className="mx-auto max-w-[1520px] px-6 py-[50px] h-[870px]">
         <div className="text-center">
           <div className="inline-block"> 
-            <h2 className="text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 사례</h2>
-            <div className="h-2 bg-gradient-to-r from-sky-300 to-green-300"></div>
+            <h2 className="relative z-10 px-2 text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 사례</h2>
+            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300"></div>
           </div>
         </div>
 

apps/dm_new/app/(landing)/reuse/apply/register/page.tsx

@@ -468,7 +468,7 @@ function DateInput({
         aria-label="달력 열기"
       >
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-            <path d="M7.14286 7.99104H16.7812M6.48512 2.5625V4.19126M17.3125 2.5625V4.19106M20.5 7.19106L20.5 18.5625C20.5 20.2194 19.1569 21.5625 17.5 21.5625H6.5C4.84315 21.5625 3.5 20.2194 3.5 18.5625V7.19106C3.5 5.53421 4.84315 4.19106 6.5 4.19106H17.5C19.1569 4.19106 20.5 5.53421 20.5 7.19106Z" stroke="#1A1A1A" strokeWidth={2} strokeLinecap="round" stroke-linejoin="round"/>
+            <path d="M7.14286 7.99104H16.7812M6.48512 2.5625V4.19126M17.3125 2.5625V4.19106M20.5 7.19106L20.5 18.5625C20.5 20.2194 19.1569 21.5625 17.5 21.5625H6.5C4.84315 21.5625 3.5 20.2194 3.5 18.5625V7.19106C3.5 5.53421 4.84315 4.19106 6.5 4.19106H17.5C19.1569 4.19106 20.5 5.53421 20.5 7.19106Z" stroke="#1A1A1A" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
         </svg>
       </button>
     </div>

apps/dm_new/app/main/_sections/IntroCards.tsx

@@ -43,8 +43,8 @@ export default function IntroCards() {
       <div className="mx-auto max-w-[1520px] px-6 py-[90px] h-[870px]">
         <div className="text-center">
           <div className="inline-block"> 
-            <h2 className="text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 소개</h2>
-            <div className="h-2 bg-gradient-to-r from-sky-300 to-green-300"></div>
+            <h2 className="relative z-10 px-2 text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 소개</h2>
+            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300"></div>
           </div>
           <p className="mt-5 text-xl text-gray-500">
             지속 가능한 미래를 위한 약속, 깨끗한 물의 새로운 순환을 시작합니다.

apps/dm_new/app/main/_sections/ProcessFlow.tsx

@@ -8,8 +8,8 @@ export default function ProcessFlow() {
       <div className="mx-auto max-w-[1520px] px-6 py-[50px] h-[870px]">
         <div className="text-center">
           <div className="inline-block"> 
-            <h2 className="text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 사례</h2>
-            <div className="h-2 bg-gradient-to-r from-sky-300 to-green-300"></div>
+            <h2 className="relative z-10 px-2 text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 사례</h2>
+            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300"></div>
           </div>
         </div>
 

apps/dm_new/components/LoginModal.tsx

@@ -199,13 +199,13 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
 
             <h2
               id={titleId}
-              className="text-center text-[32px] font-bold tracking-tight leading-none text-gray-900"
+              className="relative z-10 px-2 text-center text-[32px] font-bold tracking-tight leading-none text-gray-900"
             >
               수요처 로그인
             </h2>
 
             {/* title underline gradient bar */}
-            <div className="mx-auto h-[10px] w-[240px] bg-gradient-to-r from-sky-300 to-green-300" />
+            <div className="relative top-[-7px] -z-1 h-2 mx-auto w-[240px] bg-gradient-to-r from-sky-300 to-green-300" />
           </div>
 
           {/* Body */}

apps/dm_new/components/SubPageHeader.tsx

@@ -31,8 +31,8 @@ export default function SubPageHeader({
         <div className="flex items-start justify-between gap-6">
           {/* 좌측 타이틀 */}
           <div className="inline-block">
-            <h1 className="text-[28px] font-extrabold tracking-tight text-slate-900 leading-none">{title}</h1>
-            <div className="h-2 bg-gradient-to-r from-sky-300 to-green-300" />
+            <h1 className="relative z-10 px-2 text-[28px] font-extrabold tracking-tight text-slate-900 leading-none">{title}</h1>
+            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300" />
           </div>
 
           {/* 우측 브레드크럼 */}