From abd5c2249cdae5a227297143b6cb2b1c525872f8 Mon Sep 17 00:00:00 2001
From: SDI <b24014@hanmaceng.co.kr>
Date: Tue, 24 Feb 2026 12:44:15 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A0=84=EC=B2=B4=ED=95=99=EC=8A=B5?=
 =?UTF-8?q?=ED=98=84=ED=99=A9=20=EC=B0=A8=ED=8A=B8=20X/Y=EC=B6=95=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EB=B8=94=20=EB=B0=8F=20=EA=B2=A9=EC=9E=90?=
 =?UTF-8?q?=EC=84=A0=20=EC=B6=94=EA=B0=80=20(SVG=20=EA=B8=B0=EB=B0=98=20?=
 =?UTF-8?q?=EC=9E=AC=EA=B5=AC=EC=84=B1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/index.php | 256 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 208 insertions(+), 48 deletions(-)

diff --git a/src/admin/index.php b/src/admin/index.php
index 23306f3..29c8195 100644
--- a/src/admin/index.php
+++ b/src/admin/index.php
@@ -8,12 +8,12 @@ include_once 'header.php';
           전체학습현황
           <span class="ml-4 text-xs font-normal px-2 py-1 bg-gray-200 rounded text-gray-600">전체 학습자 수: 74명</span>
         </h2>
-        <p class="text-sm text-gray-400 mt-1 italic leading-relaxed">법정의무교육 기간: 2025.11.01 ~ 2025.12.15</p>
+        <p class="text-sm text-gray-400 mt-1 italic leading-relaxed">법정의무교육 기간: 2026.11.01 ~ 2026.12.15</p>
       </div>
       <div class="flex items-center space-x-2">
         <div class="flex bg-gray-200 p-1 rounded-md">
-           <button class="px-3 py-1 text-sm rounded bg-white shadow-sm text-gray-700">2025년</button>
-           <button class="px-3 py-1 text-sm text-gray-500 hover:text-gray-800 transition">2026년</button>
+           <button class="px-3 py-1 text-sm rounded text-gray-500 hover:text-gray-800 transition">2025년</button>
+           <button class="px-3 py-1 text-sm rounded bg-[#114b3d] text-white shadow-sm font-bold">2026년</button>
         </div>
         <button class="px-4 py-2 bg-[#2563eb] text-white rounded-md text-sm font-bold flex items-center hover:bg-blue-700 transition shadow-lg">
           <i class="fa-solid fa-file-invoice mr-2"></i>교육결과보고서
@@ -21,36 +21,79 @@ include_once 'header.php';
       </div>
     </header>
 
+    <!-- 통계 카드 3개 -->
     <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+
+      <!-- 법인별 학습인원 현황 (막대 차트) -->
       <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-        <h3 class="font-bold text-gray-800 mb-6 flex items-center justify-between">
+        <h3 class="font-bold text-gray-800 mb-4 flex items-center justify-between text-sm">
           법인별 학습인원 현황
           <i class="fa-solid fa-ellipsis-vertical text-gray-300"></i>
         </h3>
-        <div class="h-44 flex items-end justify-between px-2 space-x-3">
-          <div class="w-full bg-slate-100 rounded-t relative group">
-            <div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 85%;"></div>
-            <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">한맥</span>
-          </div>
-          <div class="w-full bg-slate-100 rounded-t relative group">
-            <div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 45%;"></div>
-            <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">삼안</span>
-          </div>
-          <div class="w-full bg-slate-100 rounded-t relative group">
-            <div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 25%;"></div>
-            <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">바른</span>
-          </div>
+        <!-- SVG Bar Chart -->
+        <div class="relative w-full" style="height:200px;">
+          <svg viewBox="0 0 280 180" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+            <!-- 격자선 & Y축 레이블 -->
+            <!-- y=0 → svg y=155, y=1800 → svg y=15. 범위 140px, 단위 1800 -->
+            <!-- y_svg = 155 - (val/1800)*140 -->
+
+            <!-- 격자선 -->
+            <line x1="36" y1="155" x2="270" y2="155" stroke="#e5e7eb" stroke-width="1"/>
+            <line x1="36" y1="120" x2="270" y2="120" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
+            <line x1="36" y1="85"  x2="270" y2="85"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
+            <line x1="36" y1="50"  x2="270" y2="50"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
+            <line x1="36" y1="15"  x2="270" y2="15"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
+
+            <!-- Y축 레이블 -->
+            <text x="30" y="158" text-anchor="end" font-size="8" fill="#9ca3af">0</text>
+            <text x="30" y="123" text-anchor="end" font-size="8" fill="#9ca3af">450</text>
+            <text x="30" y="88"  text-anchor="end" font-size="8" fill="#9ca3af">900</text>
+            <text x="30" y="53"  text-anchor="end" font-size="8" fill="#9ca3af">1350</text>
+            <text x="30" y="18"  text-anchor="end" font-size="8" fill="#9ca3af">1800</text>
+
+            <!-- Y축 라인 -->
+            <line x1="36" y1="10" x2="36" y2="155" stroke="#e5e7eb" stroke-width="1"/>
+
+            <!-- 막대 그래프 데이터 -->
+            <!-- 삼안: 520명 → (520/1800)*140=40.4px → y=155-40=115 -->
+            <!-- 한맥: 450명 → (450/1800)*140=35px → y=155-35=120 -->
+            <!-- PTC: 120명 → (120/1800)*140=9.3px → y=155-9=146 -->
+            <!-- 바른: 74명 → (74/1800)*140=5.7px  → y=155-6=149 -->
+            <!-- 장현: 90명  → (90/1800)*140=7px    → y=155-7=148 -->
+            <!-- 한라산업: 1800명 → y=15 -->
+
+            <!-- 한맥기술 -->
+            <rect x="44"  y="120" width="28" height="35" fill="#114b3d" rx="2"/>
+            <text x="58"  y="168" text-anchor="middle" font-size="7" fill="#6b7280">한맥</text>
+            <!-- 삼안 -->
+            <rect x="82"  y="115" width="28" height="40" fill="#114b3d" rx="2"/>
+            <text x="96"  y="168" text-anchor="middle" font-size="7" fill="#6b7280">삼안</text>
+            <!-- 한라산업 (가장 큰 값) -->
+            <rect x="120" y="15"  width="28" height="140" fill="#114b3d" rx="2"/>
+            <text x="134" y="168" text-anchor="middle" font-size="7" fill="#6b7280">한라산업</text>
+            <!-- PTC -->
+            <rect x="158" y="140" width="28" height="15" fill="#1d6b56" rx="2"/>
+            <text x="172" y="168" text-anchor="middle" font-size="7" fill="#6b7280">PTC</text>
+            <!-- 바른컨설턴트 -->
+            <rect x="196" y="148" width="28" height="7"  fill="#1d6b56" rx="2"/>
+            <text x="210" y="168" text-anchor="middle" font-size="6.5" fill="#6b7280">바른</text>
+            <!-- 장현산업 -->
+            <rect x="234" y="145" width="28" height="10" fill="#1d6b56" rx="2"/>
+            <text x="248" y="168" text-anchor="middle" font-size="6.5" fill="#6b7280">장현</text>
+          </svg>
         </div>
       </div>
 
+      <!-- 법인별 통계 -->
       <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-        <div class="flex justify-between items-center mb-6">
-            <h3 class="font-bold text-gray-800 italic underline decoration-blue-200 decoration-4">법인별 통계</h3>
+        <div class="flex justify-between items-center mb-5">
+            <h3 class="font-bold text-gray-800 italic underline decoration-blue-200 decoration-4 text-sm">법인별 통계</h3>
             <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
                 <option>평균학습</option>
+                <option>총 학습시간</option>
             </select>
         </div>
-        <div class="space-y-4">
+        <div class="space-y-3">
           <div class="flex justify-between items-center pb-2 border-b border-gray-50">
             <span class="text-sm font-medium text-gray-600">한맥기술</span><span class="text-sm font-bold text-blue-600">15.2회</span>
           </div>
@@ -60,69 +103,153 @@ include_once 'header.php';
           <div class="flex justify-between items-center pb-2 border-b border-gray-50">
             <span class="text-sm font-medium text-gray-600">장현산업</span><span class="text-sm font-bold text-blue-600">18.5회</span>
           </div>
+          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
+            <span class="text-sm font-medium text-gray-600">PTC</span><span class="text-sm font-bold text-blue-600">14.1회</span>
+          </div>
+          <div class="flex justify-between items-center pb-2 border-b border-gray-50">
+            <span class="text-sm font-medium text-gray-600">한라산업</span><span class="text-sm font-bold text-blue-600">16.3회</span>
+          </div>
           <div class="flex justify-between items-center">
-            <span class="text-sm font-medium text-gray-600">GAIA</span><span class="text-sm font-bold text-blue-600">14.1회</span>
+            <span class="text-sm font-medium text-gray-600">바른컨설턴트</span><span class="text-sm font-bold text-blue-600">19.7회</span>
           </div>
         </div>
-            </div>
+      </div>
 
-      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm relative overflow-hidden">
-        <h3 class="font-bold text-gray-800 mb-6">법인별 접속 추이</h3>
-        <div class="h-40 flex items-center justify-center">
-            <svg class="w-full h-full" viewBox="0 0 200 80">
-                <path d="M0,60 L40,50 L80,55 L120,30 L160,40 L200,35" fill="none" stroke="#0d9488" stroke-width="2" />
-                <circle cx="40" cy="50" r="3" fill="#0d9488" />
-                <circle cx="120" cy="30" r="3" fill="#0d9488" />
-                <circle cx="200" cy="35" r="3" fill="#0d9488" />
-            </svg>
+      <!-- 법인별 접속 추이 (라인 차트) -->
+      <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+        <div class="flex justify-between items-center mb-4">
+          <h3 class="font-bold text-gray-800 text-sm">법인별 접속 추이</h3>
+          <div class="flex gap-1">
+            <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
+              <option>전체</option>
+              <option>한맥기술</option>
+              <option>삼안</option>
+            </select>
+            <select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
+              <option>일별</option>
+              <option>주별</option>
+            </select>
+          </div>
         </div>
-                </div>
+        <!-- SVG Line Chart -->
+        <div class="relative w-full" style="height:200px;">
+          <svg viewBox="0 0 280 180" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+            <!-- 격자 범위: y=0→svg y=155, y=800→svg y=15. 140px 높이 -->
+            <!-- x 범위: x=36 ~ x=270 (6점) -->
+            <!-- 날짜: 01/20,01/21,01/22,01/23,01/24,01/26 -->
+            <!-- 값:    220,  310,  450,  480,  570,  590 -->
+            <!-- y_svg = 155 - (val/800)*140 -->
+            <!-- 220→116.5, 310→101.8, 450→76.25, 480→71.5, 570→55.25, 590→52.0 -->
+            <!-- x 간격: (270-36)/5 = 46.8 → 36,82.8,129.6,176.4,223.2,270 -->
+
+            <!-- 격자선 -->
+            <line x1="36" y1="155" x2="270" y2="155" stroke="#e5e7eb" stroke-width="1"/>
+            <line x1="36" y1="120" x2="270" y2="120" stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
+            <line x1="36" y1="85"  x2="270" y2="85"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
+            <line x1="36" y1="50"  x2="270" y2="50"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
+            <line x1="36" y1="15"  x2="270" y2="15"  stroke="#e5e7eb" stroke-width="0.8" stroke-dasharray="3,3"/>
+
+            <!-- Y축 레이블 -->
+            <text x="30" y="158" text-anchor="end" font-size="8" fill="#9ca3af">0</text>
+            <text x="30" y="123" text-anchor="end" font-size="8" fill="#9ca3af">200</text>
+            <text x="30" y="88"  text-anchor="end" font-size="8" fill="#9ca3af">400</text>
+            <text x="30" y="53"  text-anchor="end" font-size="8" fill="#9ca3af">600</text>
+            <text x="30" y="18"  text-anchor="end" font-size="8" fill="#9ca3af">800</text>
+
+            <!-- Y축 라인 -->
+            <line x1="36" y1="10" x2="36" y2="155" stroke="#e5e7eb" stroke-width="1"/>
+
+            <!-- 라인 경로 -->
+            <polyline
+              points="36,117 83,102 130,77 177,71 223,56 270,52"
+              fill="none"
+              stroke="#0d9488"
+              stroke-width="2"
+              stroke-linejoin="round"
+            />
+
+            <!-- 데이터 포인트 (원) -->
+            <circle cx="36"  cy="117" r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
+            <circle cx="83"  cy="102" r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
+            <circle cx="130" cy="77"  r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
+            <circle cx="177" cy="71"  r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
+            <circle cx="223" cy="56"  r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
+            <circle cx="270" cy="52"  r="3.5" fill="white" stroke="#0d9488" stroke-width="2"/>
+
+            <!-- X축 레이블 -->
+            <text x="36"  y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/20</text>
+            <text x="83"  y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/21</text>
+            <text x="130" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/22</text>
+            <text x="177" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/23</text>
+            <text x="223" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/24</text>
+            <text x="270" y="168" text-anchor="middle" font-size="7" fill="#9ca3af">01/26</text>
+          </svg>
+        </div>
+      </div>
     </section>
 
+    <!-- 하단: 가장 많이 본 영상 + 배움터 학습 랭킹 -->
     <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-12">
+
+      <!-- 가장 많이 본 영상 -->
       <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
-        <div class="p-6 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
-          <h3 class="font-bold text-gray-800 flex items-center italic">
+        <div class="p-5 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
+          <h3 class="font-bold text-gray-800 flex items-center italic text-sm">
             <i class="fa-solid fa-play-circle text-blue-500 mr-2"></i>가장 많이 본 영상
           </h3>
-          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>인사이트</option></select>
+          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>인사이트</option><option>리더십</option><option>온보딩</option></select>
         </div>
-        <div class="p-6 space-y-6">
+        <div class="p-5 space-y-5">
           <div class="flex items-start space-x-4">
-            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0"></div>
+            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
             <div>
               <h4 class="font-bold text-sm leading-tight">실리콘밸리 PM이 말해주는 AI 시대 PM 생존법</h4>
               <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,245회</span> | 완료율: <span class="text-blue-500 font-bold">92%</span></p>
             </div>
           </div>
           <div class="flex items-start space-x-4">
-            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0"></div>
+            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
             <div>
               <h4 class="font-bold text-sm leading-tight">AI와 함께 진화하는 법 : AI 일잘러의 비밀</h4>
-              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,127회</span> | 완료율: <span class="text-blue-500 font-bold">88%</span></p>
+              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,132회</span> | 완료율: <span class="text-blue-500 font-bold">88%</span></p>
+            </div>
+          </div>
+          <div class="flex items-start space-x-4">
+            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
+            <div>
+              <h4 class="font-bold text-sm leading-tight">인생이 바뀌는 환경을 셋업하는 뇌과학적 방법</h4>
+              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,089회</span> | 완료율: <span class="text-blue-500 font-bold">85%</span></p>
+            </div>
+          </div>
+          <div class="flex items-start space-x-4">
+            <div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0 flex items-center justify-center text-slate-400 text-xs"><i class="fa-solid fa-play text-lg"></i></div>
+            <div>
+              <h4 class="font-bold text-sm leading-tight">인생의 기회를 100% 내 것으로 만드는 '운의 공식'</h4>
+              <p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">987회</span> | 완료율: <span class="text-blue-500 font-bold">83%</span></p>
             </div>
           </div>
         </div>
-        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-50 italic">
+        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-100 italic transition">
           <i class="fa-solid fa-comment-dots mr-2"></i>한줄 소감문 보기
         </button>
       </div>
 
+      <!-- 배움터 학습 랭킹 -->
       <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
-        <div class="p-6 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
-          <h3 class="font-bold text-gray-800 flex items-center italic">
+        <div class="p-5 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
+          <h3 class="font-bold text-gray-800 flex items-center italic text-sm">
             <i class="fa-solid fa-award text-teal-600 mr-2"></i>배움터 학습 랭킹
           </h3>
-          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>전체</option></select>
+          <select class="text-xs bg-white border border-gray-200 rounded p-1"><option>전체</option><option>한맥기술</option><option>삼안</option></select>
         </div>
         <div class="p-4">
           <table class="w-full text-sm">
             <tbody>
               <tr class="hover:bg-gray-50 transition">
-                <td class="p-3 font-bold text-blue-600">1</td>
+                <td class="p-3 font-bold text-blue-600 text-lg w-10">1</td>
                 <td class="p-3">
                   <p class="font-bold">홍길동</p>
-                  <p class="text-[10px] text-gray-400">한맥기술 본부장</p>
+                  <p class="text-[10px] text-gray-400">한맥기술 선임연구원</p>
                 </td>
                 <td class="p-3 text-right">
                   <span class="font-bold mr-2">52시간</span>
@@ -130,20 +257,53 @@ include_once 'header.php';
                 </td>
               </tr>
               <tr class="hover:bg-gray-50 transition border-t border-gray-50">
-                <td class="p-3 font-bold text-gray-400">2</td>
+                <td class="p-3 font-bold text-gray-400 text-lg">2</td>
                 <td class="p-3">
                   <p class="font-bold">김철수</p>
-                  <p class="text-[10px] text-gray-400">삼안 전략기획팀</p>
+                  <p class="text-[10px] text-gray-400">삼안 책임연구원</p>
                 </td>
                 <td class="p-3 text-right">
                   <span class="font-bold mr-2">48시간</span>
                   <span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
                 </td>
               </tr>
+              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
+                <td class="p-3 font-bold text-gray-400 text-lg">3</td>
+                <td class="p-3">
+                  <p class="font-bold">이영희</p>
+                  <p class="text-[10px] text-gray-400">삼안 수석연구원</p>
+                </td>
+                <td class="p-3 text-right">
+                  <span class="font-bold mr-2">45시간</span>
+                  <span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
+                </td>
+              </tr>
+              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
+                <td class="p-3 font-bold text-gray-400 text-lg">4</td>
+                <td class="p-3">
+                  <p class="font-bold">박민수</p>
+                  <p class="text-[10px] text-gray-400">한맥기술 주임연구원</p>
+                </td>
+                <td class="p-3 text-right">
+                  <span class="font-bold mr-2">38시간</span>
+                  <span class="px-2 py-0.5 bg-blue-50 text-blue-500 text-[10px] rounded font-bold">Elite</span>
+                </td>
+              </tr>
+              <tr class="hover:bg-gray-50 transition border-t border-gray-50">
+                <td class="p-3 font-bold text-gray-400 text-lg">5</td>
+                <td class="p-3">
+                  <p class="font-bold">정수진</p>
+                  <p class="text-[10px] text-gray-400">바른컨설턴트 선임연구원</p>
+                </td>
+                <td class="p-3 text-right">
+                  <span class="font-bold mr-2">35시간</span>
+                  <span class="px-2 py-0.5 bg-blue-50 text-blue-500 text-[10px] rounded font-bold">Elite</span>
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>
-        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-50 italic">
+        <button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-100 italic transition">
           <i class="fa-solid fa-thumbs-up mr-2"></i>추천 영상 보기
         </button>
       </div>