v0.1.25 포스트 카드 구조 정리

assets/built/screen.css

@@ -979,21 +979,40 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 }
 
 .post-card {
-    display: grid;
-    grid-template-columns: 112px minmax(0, 1fr);
-    gap: 18px;
+    position: relative;
+    display: flex;
+    gap: 12px;
     padding: 18px 0;
     border-bottom: 1px solid var(--border);
-    align-items: start;
+    align-items: stretch;
+    overflow: hidden;
+}
+
+.post-card__media {
+    flex: 1 1 34%;
+    min-width: 84px;
+    max-width: 168px;
+}
+
+.post-card__figure {
+    display: block;
+    margin: 0;
+    overflow: hidden;
+    border-radius: 14px;
 }
 
 .post-card__media img,
 .post-card__media-fallback {
-    width: 112px;
-    height: 112px;
+    width: 100%;
+    aspect-ratio: 1 / 1;
     object-fit: cover;
-    border-radius: 14px;
     background: var(--surface-muted);
+    border-radius: inherit;
+    transition: opacity 0.22s ease;
+}
+
+.post-card__media:hover img {
+    opacity: 0.9;
 }
 
 .post-card__media-fallback {
@@ -1005,11 +1024,22 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     text-align: center;
 }
 
+.post-card__content {
+    position: relative;
+    flex: 1 1 0%;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    justify-content: space-between;
+}
+
 .post-card__content h2 {
     margin: 0 0 6px;
     font-size: 15px;
     line-height: 1.32;
     letter-spacing: -0.015em;
+    max-width: calc(100% - 28px);
 }
 
 .post-card__content h2 a {
@@ -1018,6 +1048,10 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     gap: 6px;
 }
 
+.post-card__content h2 a:hover {
+    opacity: 0.75;
+}
+
 .post-card__featured-icon {
     width: 14px;
     height: 14px;
@@ -1030,6 +1064,11 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     color: var(--text-soft);
     font-size: 13px;
     line-height: 1.45;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    flex: 1 1 auto;
 }
 
 .post-card__meta {
@@ -1062,6 +1101,10 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     gap: 4px;
 }
 
+.meta-item:hover {
+    color: var(--text);
+}
+
 .meta-divider {
     color: var(--border-strong);
     font-size: 12px;
@@ -1074,10 +1117,44 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     color: var(--text-dim);
 }
 
+.meta-item__icon--image {
+    width: 14px;
+    height: 14px;
+    flex: 0 0 auto;
+    opacity: 0.8;
+}
+
 .meta-item--access {
     font-weight: 600;
 }
 
+.post-card__share {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    opacity: 0.72;
+    transition: opacity 0.22s ease;
+}
+
+.post-card__share:hover {
+    opacity: 1;
+}
+
+.post-card__share-icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+}
+
 .category-overview {
     display: grid;
 }
@@ -1712,13 +1789,18 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     }
 
     .post-card {
-        grid-template-columns: 1fr;
+        flex-direction: column;
     }
 
     .post-card__media img,
     .post-card__media-fallback {
         width: 100%;
         height: 180px;
+        aspect-ratio: auto;
+    }
+
+    .post-card__media {
+        max-width: none;
     }
 
     .post-navigation {