/* ══════════════════════════════════════════════════════════════════════
 * 未换皮页面的暂用样式（2026-07-30）
 *
 * 🔴 这一份是**补回归**，不是新设计。
 *   换皮批（68485c6）把 `layout/front.html` 的陽春佔位版改写成套设计稿的正式版时，
 *   连同砍掉了佔位版里的 inline <style> —— 那里面定义了
 *   `.article-card` `.media-section` `.container-narrow` `.breadcrumb` 等
 *   **内容区**的 class。而设计稿的 page.css/com.css 认的是设计自己的名字
 *   （`txtList` / `articlesPart` / `pageBot`…），对不上。
 *   ⇒ `/articles`、`/articles/{id}`、`/category/{slug}`、404，
 *     以及**尚未列入 config/front_skin.php 的模组**的 `/pages/{id}`，
 *     内容区从那一版起就是**完全没有样式的裸 HTML**（页面 200、看起来却像坏了）。
 *
 * ⚠ 这只是把它们恢复成换皮前的样子。**正解是把这些页面也换皮**：
 *   node 页只要在 `config/front_skin.php` 加一行就好（模板是通用的）；
 *   文章页要照 docs/html/Page 另做一次。那是下一批的事，已列提案。
 *
 * ⚠ 刻意**不**带进来的：全域 reset（* / body / a / img）与
 *   `.header/.footer/.main` —— 那些会和设计稿的 layout.css 打架。
 * ══════════════════════════════════════════════════════════════════════ */

    .container-narrow { max-width: 760px; margin: 0 auto; padding: 30px 20px; }

    .article-card {
    display: block; padding: 18px 20px; border: 1px solid #e2e8f0;
    border-radius: 8px; margin-bottom: 14px; transition: box-shadow 0.2s;
    }

    .article-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); text-decoration: none; }

    .article-card h3 { margin-bottom: 6px; color: #2d3748; }

    .article-card .meta { color: #718096; font-size: 13px; margin-bottom: 8px; }

    .article-card .summary { color: #4a5568; }

    .article-card.pinned { border-left: 4px solid #ed8936; }

    .article-detail h1 { font-size: 32px; margin-bottom: 8px; line-height: 1.3; }

    .article-detail .subtitle { font-size: 18px; color: #718096; margin-bottom: 14px; }

    .article-detail .meta {
    color: #718096; font-size: 14px; margin-bottom: 24px;
    padding-bottom: 14px; border-bottom: 1px solid #edf2f7;
    }

    .article-detail .cover { margin: 20px 0; border-radius: 8px; }

    .article-detail .summary {
    background: #f7fafc; border-left: 4px solid #3182ce;
    padding: 14px 18px; margin: 20px 0; border-radius: 4px;
    }

    .article-detail .content { font-size: 17px; }

    .article-detail .content img { border-radius: 6px; margin: 12px 0; }

    .article-detail .content h2 { font-size: 24px; margin: 30px 0 12px; }

    .article-detail .content h3 { font-size: 20px; margin: 24px 0 10px; }

    .article-detail .content p { margin-bottom: 14px; }

    .article-detail .content blockquote {
    border-left: 3px solid #cbd5e0; padding-left: 14px; color: #4a5568;
    margin: 14px 0;
    }

    .article-detail .content code {
    background: #edf2f7; padding: 2px 6px; border-radius: 3px;
    font-family: monospace; font-size: 14px;
    }

    .article-detail .content pre {
    background: #2d3748; color: #e2e8f0; padding: 14px;
    border-radius: 6px; overflow-x: auto; margin: 14px 0;
    }

    .article-detail .content table { border-collapse: collapse; margin: 14px 0; }

    .article-detail .content th, .article-detail .content td {
    border: 1px solid #e2e8f0; padding: 8px 12px;
    }

    .article-detail .content iframe { max-width: 100%; }

    .media-section { margin: 30px 0; padding-top: 24px; border-top: 1px solid #edf2f7; }

    .media-section h2 { font-size: 18px; margin-bottom: 14px; }

    .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

    .media-grid figure { margin: 0; }

    .media-grid figcaption { font-size: 13px; color: #718096; margin-top: 4px; }

    .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }

    .video-wrapper iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

    .attachment-list ul { list-style: none; }

    .attachment-list li {
    padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 6px;
    margin-bottom: 6px; display: flex; align-items: center; gap: 10px;
    }

    .attachment-list .file-name { flex: 1; }

    .attachment-list .file-size { color: #a0aec0; font-size: 13px; }

    .navigation {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin: 30px 0; padding-top: 24px; border-top: 1px solid #edf2f7;
    }

    .navigation a {
    padding: 12px 14px; border: 1px solid #e2e8f0;
    border-radius: 6px; display: block;
    }

    .navigation a:hover { background: #f7fafc; text-decoration: none; }

    .navigation .label { font-size: 12px; color: #718096; margin-bottom: 4px; }

    .pagination { display: flex; gap: 8px; justify-content: center; margin: 30px 0; }

    .pagination a, .pagination span {
    padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 4px;
    }

    .pagination .current { background: #3182ce; color: #fff; border-color: #3182ce; }

    .breadcrumb { color: #718096; font-size: 14px; margin-bottom: 14px; }

    .breadcrumb a { color: #718096; }

    .breadcrumb span { margin: 0 6px; }