Index: vue/src/assets/images/devops/DevSupport/github.png
===================================================================
diff -u -r86a844cd3fa50de696337b851311971d42b00500 -r2432dd60fa7ba880398a63ecfc89f95d9160d275
--- vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 86a844cd3fa50de696337b851311971d42b00500)
+++ vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 2432dd60fa7ba880398a63ecfc89f95d9160d275)
@@ -1944,6 +1944,7 @@
 .kanban-item {
 	display: flex;
 	justify-content: space-between;
+	align-items: flex-start;
 	background: rgba(51, 51, 51, 1) !important;
 	box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
 	border-radius: 6px;
@@ -1976,5 +1977,5 @@
     padding: 5px 10px;
     border-radius: 4px;
     font-size: 11px;
-    z-index: 1000;
+    z-index: 900;
 }
\ No newline at end of file
Index: arms/css/tourGuide/tourGuideCustom.css
===================================================================
diff -u -raa2928816d05cea9d5334b7943f6d26be5c82814 -r2432dd60fa7ba880398a63ecfc89f95d9160d275
--- arms/css/tourGuide/tourGuideCustom.css	(.../tourGuideCustom.css)	(revision aa2928816d05cea9d5334b7943f6d26be5c82814)
+++ arms/css/tourGuide/tourGuideCustom.css	(.../tourGuideCustom.css)	(revision 2432dd60fa7ba880398a63ecfc89f95d9160d275)
@@ -14,4 +14,8 @@
 
 .tgOnOff {
     color: #DB2A34 !important;
+}
+
+.tg-dialog .tg-dialog-footer {
+    padding: 0;
 }
\ No newline at end of file
Index: arms/js/common/tourGuide/tgApi.js
===================================================================
diff -u -raa2928816d05cea9d5334b7943f6d26be5c82814 -r2432dd60fa7ba880398a63ecfc89f95d9160d275
--- arms/js/common/tourGuide/tgApi.js	(.../tgApi.js)	(revision aa2928816d05cea9d5334b7943f6d26be5c82814)
+++ arms/js/common/tourGuide/tgApi.js	(.../tgApi.js)	(revision 2432dd60fa7ba880398a63ecfc89f95d9160d275)
@@ -8,6 +8,22 @@
         return tg;
     }
 
+    const makeModalInstance = function (data) {
+
+        //TgGroup.modalReqKanban(data);
+
+        let tg = new tourguide.TourGuideClient({
+            autoScroll: false,
+            hidePrev: true,
+            hideNext: true,
+            showStepDots: false,
+            stepDotsPlacement: 'body',
+            showStepProgress: false,
+            steps: modalFetchSteps(data),
+        });
+        return tg;
+    }
+
     const fetchSteps = function (pageName) {
         let steps;
         console.log("[ tgApi :: TourGuideApi.fetchSteps ] :: pageName → " + pageName);
@@ -49,6 +65,13 @@
         return steps;
     };
 
+    const modalFetchSteps = function (data) {
+        let steps = TgGroup.modalReqKanban(data);
+        return steps;
+    }
+
     return {fetchSteps : fetchSteps,
-            makeInstance :makeInstance}; // 내부 함수 key : value ( function )
+            makeInstance : makeInstance,
+            makeModalInstance : makeModalInstance,
+            modalFetchSteps : modalFetchSteps}; // 내부 함수 key : value ( function )
 })();
\ No newline at end of file
Index: arms/js/common/tourGuide/tgGroup.js
===================================================================
diff -u -raa2928816d05cea9d5334b7943f6d26be5c82814 -r2432dd60fa7ba880398a63ecfc89f95d9160d275
--- arms/js/common/tourGuide/tgGroup.js	(.../tgGroup.js)	(revision aa2928816d05cea9d5334b7943f6d26be5c82814)
+++ arms/js/common/tourGuide/tgGroup.js	(.../tgGroup.js)	(revision 2432dd60fa7ba880398a63ecfc89f95d9160d275)
@@ -61,6 +61,41 @@
             return steps;
         };
 
+        var modalReqKanban = function (data) {
+
+            let reqId = data.reqId;
+            let reqInfo = data.reqInfo;
+
+            const keyMap = {
+                reqVersions: "버전",
+                reqPriority: "우선순위",
+                reqDifficulty: "난이도",
+                reqPlan: "계획일",
+                reqSummary: "요구사항"
+            };
+
+            let formattedString = "";
+            Object.keys(reqInfo).forEach((key) => {
+                const mappedKey = keyMap[key] || key;
+                formattedString += `<div class="step-content"><strong>${mappedKey}:</strong> ${reqInfo[key]}</div>`;
+            });
+
+            $(`[data-id="${reqId}"]`).attr({
+                'data-tg-tour': formattedString,
+                'data-tg-title': "<div class=\"step-title\">요구사항 상세 정보</div>"
+            });
+
+            const steps = [
+                {
+                    title: '<div class="step-title">요구사항 상세 정보</div>',
+                    content: formattedString,
+                    target: `[data-id="${reqId}"]`,
+                }
+            ];
+
+            return steps;
+        }
+
         var tg_pdServiceVersion = function () {
 
         };
@@ -113,7 +148,9 @@
             tg_analysisResource : tg_analysisResource,
             tg_analysisCost : tg_analysisCost,
 
-            sampleStep : sampleStep
+            sampleStep : sampleStep,
+
+            modalReqKanban : modalReqKanban
         }; // 내부함수 key : value
     }
 )();
Index: arms/js/reqKanban.js
===================================================================
diff -u -r86a844cd3fa50de696337b851311971d42b00500 -r2432dd60fa7ba880398a63ecfc89f95d9160d275
--- arms/js/reqKanban.js	(.../reqKanban.js)	(revision 86a844cd3fa50de696337b851311971d42b00500)
+++ arms/js/reqKanban.js	(.../reqKanban.js)	(revision 2432dd60fa7ba880398a63ecfc89f95d9160d275)
@@ -1,7 +1,7 @@
 let selectedPdServiceId;           // 선택한 제품(서비스) 아이디
 let selectedPdService;             // 선택한 제품(서비스) 이름
 let selectedVersionId;             // 선택한 버전 아이디
-const reqStateToIdMapping = {      // 요구사항 상태에 id 매핑
+const reqStateToIdMapping = { // 요구사항 상태에 id 매핑
     '열림': '10',
     '진행중': '11',
     '해결됨': '12',
@@ -11,6 +11,14 @@
                      id: reqStateToIdMapping[state],
                      title: state
                  }));
+
+const reqKanbanTg = new tourguide.TourGuideClient({              // 상세 정보 투어 가이드
+                        autoScroll: false,
+                        hidePrev: true,
+                        hideNext: true,
+                        showStepDots: false,
+                        showStepProgress: false
+                    });
 ////////////////////////////////////////////////////////////////////////////////////////
 //Document Ready
 ////////////////////////////////////////////////////////////////////////////////////////
@@ -244,9 +252,9 @@
 
                     // 현재 상태에 해당하는 리스트에 아이템 추가
                     reqList[state].push({
-                        id: item.c_id,
+                        id: "req_" + item.c_id,
                         title: `<span class="req_item">${item.c_title}</span>
-                                <i class="fa fa-ellipsis-h show-info" data-id="${item.c_id}"></i>`,
+                                <i class="fa fa-ellipsis-h show-info" data-id="req_${item.c_id}"></i>`,
                         info: {
                             reqVersions: versions,
                             reqPriority: (item.reqPriorityEntity && item.reqPriorityEntity.c_title) || "우선순위 정보 없음",
@@ -353,7 +361,7 @@
     });
 
     // 상세 정보 클릭 이벤트
-    $('.show-info').click(function() {
+    $(".show-info").on('click', function() {
         const reqId = $(this).data('id');
 
         let reqInfo;
@@ -364,11 +372,18 @@
             }
         });
 
-        if (reqInfo) {
-            alert(JSON.stringify(reqInfo));
-        } else {
-            console.error('[ reqKanban :: loadKanban ] :: info 정보를 찾을 수 없습니다.', { reqId });
+        let reqData = {
+            reqId: reqId,
+            reqInfo: reqInfo
         }
+
+        TgGroup.modalReqKanban(reqData);
+        reqKanbanTg.start();
+
+        reqKanbanTg.onAfterExit(() => {
+            $(`[data-id="${reqId}"]`).removeAttr('data-tg-tour');
+            $(`[data-id="${reqId}"]`).removeAttr('data-tg-title');
+        });
     });
 
     // 툴팁
@@ -410,7 +425,6 @@
 }
 
 function initKanban() {
-
     KanbanBoard.init('myKanban', boardData);
     setReqCount();
 }
\ No newline at end of file