From 53356228a7dc31236905bcd9b8a18ca346b7da94 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 18 Mar 2026 15:24:32 +0900
Subject: [PATCH] =?UTF-8?q?sn:=20=EA=B0=95=EC=9A=B0=EC=9C=A0=EC=9E=85?=
 =?UTF-8?q?=EC=88=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popupComponent/chart/rdiiChart.tsx        | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
index 58d9f9a49..07286bcbe 100644
--- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
@@ -265,49 +265,49 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
                 </div>
 
                 {/* 우측 카드 */}
-                <div className="flex min-h-[98px] items-center rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
+                <div className="flex min-h-[98px] min-w-0 items-center gap-5 rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
                     {/* 좌측: 제목 (세로 가운데 정렬) */}
-                    <div className="flex h-full items-center">
-                        <span className="text-[16px] font-bold text-[#ef4444]">
-                        강우유입수량 분석결과
-                        </span>
+                    <div className="flex min-w-0 basis-[32%] items-center">
+                        <div className="text-[16px] font-bold text-[#ef4444] break-keep">
+                            강우유입수량 분석결과
+                        </div>
                     </div>
 
                     {/* 우측: 지표 영역 */}
-                    <div className="ml-auto flex flex-col gap-2 text-right">
-                        <div className="grid grid-cols-[1fr_auto] items-center gap-6">
-                            <span className="text-[15px] text-[#555]">평균RDII</span>
-                            <div className="flex justify-end">
-                                <div className="flex items-end gap-2">
-                                    <span className="w-[105px] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
-                                        {rdiiQty}
-                                    </span>
-                                    <span className="w-[52px] text-left text-[14px] text-[#111]">m³/d</span>
-                                </div>
+                    <div className="flex min-w-0 basis-[68%] flex-col gap-[2px]">
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[42%] text-right text-[15px] text-[#555]">
+                                평균RDII
+                            </div>
+                            <div className="min-w-0 basis-[38%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {rdiiQty}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                m³/d
                             </div>
                         </div>
 
-                        <div className="grid grid-cols-[1fr_auto] items-center gap-6">
-                            <span className="text-[15px] text-[#555]">적용 강우량</span>
-                            <div className="flex justify-end">
-                                <div className="flex items-end gap-2">
-                                    <span className="w-[105px] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
-                                        {rainTotal}
-                                    </span>
-                                    <span className="w-[52px] text-left text-[14px] text-[#111]">mm</span>
-                                </div>
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[42%] text-right text-[15px] text-[#555]">
+                                적용 강우량
+                            </div>
+                            <div className="min-w-0 basis-[38%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {rainTotal}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                mm
                             </div>
                         </div>
 
-                        <div className="grid grid-cols-[1fr_auto] items-center gap-6">
-                            <span className="text-[15px] text-[#555]">강우량 대비 RDII</span>
-                            <div className="flex justify-end">
-                                <div className="flex items-end gap-2">
-                                    <span className="w-[105px] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
-                                        {totalVolume}
-                                    </span>
-                                    <span className="w-[52px] text-left text-[14px] text-[#111]">m³/mm</span>
-                                </div>
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0 basis-[42%] text-right text-[15px] text-[#555]">
+                                강우량 대비 RDII
+                            </div>
+                            <div className="min-w-0 basis-[38%] text-right text-[18px] font-extrabold text-[#111] tabular-nums">
+                                {totalVolume}
+                            </div>
+                            <div className="min-w-0 basis-[20%] text-left text-[14px] text-[#111]">
+                                m³/mm
                             </div>
                         </div>
                     </div>