init

static/app.js

@@ -75,15 +75,15 @@ function appendLinks(links) {
     body.className = "card-body d-flex flex-column";
 
     const title = document.createElement("h5");
-    title.className = "card-title mb-2";
+    title.className = "card-title mb-2 line-clamp-title";
     title.textContent = link.title || link.url;
 
     const description = document.createElement("p");
-    description.className = "card-text text-secondary flex-grow-1";
+    description.className = "card-text text-secondary card-description";
     description.textContent = link.description || "설명 없음";
 
     const linkBtn = document.createElement("a");
-    linkBtn.className = "btn btn-outline-primary btn-sm";
+    linkBtn.className = "btn btn-outline-primary btn-sm mt-auto";
     linkBtn.href = link.url;
     linkBtn.target = "_blank";
     linkBtn.rel = "noopener";

static/styles.css

@@ -19,3 +19,21 @@ body {
   height: 180px;
   object-fit: cover;
 }
+
+/* 웹(가로 그리드)에서 긴 요약으로 카드가 과도하게 늘어나지 않도록 모바일과 비슷한 미리보기 높이로 제한 */
+@media (min-width: 768px) {
+  .card-description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .card-title.line-clamp-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}