fix: 모드팩 페이지 모바일 UI 개선

- 다운로드 버튼 모바일에서 전체 너비로 표시
- 헤더 레이아웃을 세로 배치로 변경
- 메타 정보 및 태그 줄바꿈 허용

frontend/src/pages/Modpack.jsx

@@ -37,43 +37,42 @@ const ModpackCard = ({ modpack, isLatest }) => {
     <div className={`bg-zinc-900 border rounded-2xl overflow-hidden ${isLatest ? 'border-mc-green' : 'border-zinc-800'}`}>
       {/* 헤더 */}
       <div className="p-5">
-        <div className="flex items-start justify-between">
+        {/* 상단: 아이콘 + 버전 정보 */}
-          <div className="flex items-center gap-3">
+        <div className="flex items-center gap-3 mb-3">
-            <div className={`p-2.5 rounded-xl ${isLatest ? 'bg-mc-green/20' : 'bg-zinc-800'}`}>
+          <div className={`p-2.5 rounded-xl ${isLatest ? 'bg-mc-green/20' : 'bg-zinc-800'}`}>
-              <Package className={isLatest ? 'text-mc-green' : 'text-zinc-400'} size={24} />
+            <Package className={isLatest ? 'text-mc-green' : 'text-zinc-400'} size={24} />
-            </div>
+          </div>
-            <div>
+          <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2">
-                <h3 className="text-xl font-bold text-white">v{modpack.version}</h3>
+              <h3 className="text-xl font-bold text-white">v{modpack.version}</h3>
-                {isLatest && (
+              {isLatest && (
-                  <span className="px-2 py-0.5 bg-mc-green/20 text-mc-green text-xs font-medium rounded-full">
+                <span className="px-2 py-0.5 bg-mc-green/20 text-mc-green text-xs font-medium rounded-full">
-                    최신
+                  최신
-                  </span>
+                </span>
-                )}
+              )}
-              </div>
+            </div>
-              <p className="text-sm text-zinc-400 mt-0.5">{modpack.name}</p>
+            <p className="text-sm text-zinc-400 mt-0.5 truncate">{modpack.name}</p>
-            </div>
           </div>
-          
-          {/* 다운로드 버튼 */}
-          <a 
-            href={`/api/modpacks/${modpack.id}/download`}
-            className="flex items-center gap-2 px-4 py-2.5 bg-mc-green hover:bg-mc-green/80 text-white font-medium rounded-xl transition-colors"
-          >
-            <Download size={18} />
-            <span>다운로드</span>
-          </a>
         </div>
         
+        {/* 다운로드 버튼 - 모바일에서 전체 너비 */}
+        <a 
+          href={`/api/modpacks/${modpack.id}/download`}
+          className="flex items-center justify-center gap-2 w-full sm:w-auto px-4 py-2.5 bg-mc-green hover:bg-mc-green/80 text-white font-medium rounded-xl transition-colors"
+        >
+          <Download size={18} />
+          <span>다운로드</span>
+        </a>
+
         {/* 메타 정보 */}
-        <div className="flex flex-wrap gap-4 mt-4 text-sm text-zinc-400">
+        <div className="flex flex-wrap gap-x-4 gap-y-2 mt-4 text-sm text-zinc-400">
           <div className="flex items-center gap-1.5">
             <Gamepad2 size={14} />
             <span>MC {modpack.minecraftVersion}</span>
           </div>
           <div className="flex items-center gap-1.5">
             <Box size={14} />
-            <span>{modpack.modLoader} {modpack.modLoaderVersion}</span>
+            <span>{modpack.modLoader}</span>
           </div>
           <div className="flex items-center gap-1.5">
             <HardDrive size={14} />
@@ -86,7 +85,7 @@ const ModpackCard = ({ modpack, isLatest }) => {
         </div>
 
         {/* 포함 콘텐츠 요약 */}
-        <div className="flex gap-3 mt-4">
+        <div className="flex flex-wrap gap-2 mt-4">
           {totalMods > 0 && (
             <span className="px-2.5 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-lg">
               모드 {totalMods}개