/**
 * 文章 / 页面内页 UI（E7-07）
 */

.mk-single.qk-single-content,
.qk-single-content.mk-single {
    gap: var(--mk-gap);
}

/* gap 由 .qk-single-content 统一处理，侧栏不再叠加 margin */
.mk-single.qk-single-content > .widget-area,
.qk-single-content.mk-single > .widget-area {
    margin: 0;
}

.mk-single .single-article {
    border-radius: var(--mk-radius);
    background: var(--mk-color-surface);
    border: 1px solid var(--mk-color-border-muted);
    box-shadow: var(--mk-shadow-sm);
}

.mk-single .single-article h1 {
    color: var(--mk-color-text);
}

.mk-single .article-header .post-meta-row {
    border-bottom-color: var(--mk-color-border-muted);
    color: var(--mk-color-text-subtle);
}

.mk-single .article-header .post-meta-row .post-categories a {
    background: var(--mk-color-surface-accent);
    color: var(--mk-color-primary);
    border-radius: var(--mk-radius-button);
}

.mk-single .article-content {
    color: var(--mk-color-text-muted);
}

.mk-single .article-content a {
    color: var(--mk-color-primary);
}

.mk-single .breadcrumb {
    color: var(--mk-color-text-subtle);
}

.mk-single .breadcrumb a {
    color: var(--mk-color-text-muted);
}

.mk-single .article-footer .box,
.mk-single .mk-article-footer .box {
    background: var(--mk-color-surface);
    border: 1px solid var(--mk-color-border-muted);
    color: var(--mk-color-text-muted);
    transition: color var(--mk-duration-fast) var(--mk-ease-out),
        border-color var(--mk-duration-fast) var(--mk-ease-out),
        transform var(--mk-duration-fast) var(--mk-ease-out);
}

.mk-single .article-footer .box:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--mk-color-primary) 35%, var(--mk-color-border));
}

.mk-single .article-footer .active .box,
.mk-single .mk-article-footer .active .box {
    color: var(--mk-color-primary);
    border-color: var(--mk-color-primary);
    background: color-mix(in srgb, var(--mk-color-primary) 8%, var(--mk-color-surface));
}

.mk-single .article-footer [num]::after,
.mk-single .article-footer .text {
    color: var(--mk-color-text-subtle);
}

.mk-single .comment-list .comment-body {
    border-radius: var(--mk-radius);
    background: var(--mk-color-surface-muted);
}

.mk-single .comment-respond textarea,
.mk-single .comment-respond input[type="text"] {
    background: var(--mk-color-surface-muted);
    border-radius: var(--mk-radius);
    border: 1px solid var(--mk-color-border-muted);
    color: var(--mk-color-text);
}

.mk-single .comment-respond textarea:focus,
.mk-single .comment-respond input[type="text"]:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--mk-color-primary) 40%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-color-primary) 10%, transparent);
}

.mk-single .download-box,
.mk-single .password-pay-container {
    border-radius: var(--mk-radius);
    background: var(--mk-color-surface);
    border: 1px solid var(--mk-color-border-muted);
}

@media screen and (max-width: 960px) {
    .mk-single .single-article {
        padding: calc(var(--mk-gap) * 1.25);
    }

    .mk-single .article-footer {
        position: static;
        margin-top: var(--mk-gap);
    }

    .mk-single .article-footer > div {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: calc(var(--mk-gap) * 0.75);
    }
}

@media screen and (max-width: 480px) {
    .mk-single .single-article h1 {
        font-size: 20px;
        line-height: 1.35;
    }
}