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

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

frontend/src/pages/Modpack.jsx

@@ -37,12 +37,12 @@ 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'}`}>
             <Package className={isLatest ? 'text-mc-green' : 'text-zinc-400'} size={24} />
           </div>
-            <div>
+          <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
               <h3 className="text-xl font-bold text-white">v{modpack.version}</h3>
               {isLatest && (
@@ -51,29 +51,28 @@ const ModpackCard = ({ modpack, isLatest }) => {
                 </span>
               )}
             </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"
+          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>
 
         {/* 메타 정보 */}
-        <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}개