/* 主体容器 */
.main-content { max-width: 768px; margin: 0 auto; }

/* 文章列表区域 */
.article-section { background-color: #ffffff; padding: 1.5rem 16px; }
.section-title { font-size: 1.25rem; font-weight: 700; color: #111827; margin-top: 0; margin-bottom: 1.5rem; display: flex; align-items: center; }
.section-title::before { content: ''; display: inline-block; width: 4px; height: 1.25rem; background-color: #1e40af; margin-right: 0.75rem; }

.article-list { display: flex; flex-direction: column; gap: 2rem; }
.article-item { display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid #f3f4f6; }
.article-img { width: 100%; height: 12rem; object-fit: cover; border-radius: 0.25rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.article-body { display: flex; flex-direction: column; gap: 0.5rem; }
.article-title { font-size: 1.125rem; font-weight: 700; color: #111827; margin: 0; line-height: 1.375; transition: color 0.2s; cursor: pointer; }
.article-title:hover { color: #1d4ed8; }
.article-desc { font-size: 0.875rem; color: #6b7280; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; text-overflow: ellipsis; word-wrap: break-word; overflow-wrap: break-word; }
.article-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 0.5rem; }
.tag-badge { padding: 0.125rem 0.5rem; border: 1px solid #fb923c; color: #f97316; font-size: 10px; border-radius: 0.25rem; }
.meta-date { font-size: 0.75rem; color: #9ca3af; }