/* 手机端排版；桌面继续使用原有布局。颜色由当前主题提供，切换后即时生效。 */
.mobile-search-toggle {
    display: none;
}

@media (max-width: 767px) {
    body {
        min-width: 0;
        padding-top: 0;
        font-size: 16px;
        line-height: 1.7;
        color: var(--mobile-text);
        background: var(--mobile-background);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    #topmenu, .switch-theme-float {
        display: none;
    }

    #mainmenu {
        position: relative !important;
        top: 0 !important;
        max-height: none !important;
        opacity: 1;
    }

    #mainmenu .menu-box {
        padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
        background: var(--mobile-surface);
        border-bottom: 1px solid var(--mobile-border);
        box-shadow: none;
    }

    #mainmenu .navbar-header {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 76px;
        margin: 0;
    }

    #mainmenu .mini_head {
        display: block !important;
        flex: 1;
        min-width: 0;
        padding: 12px 0;
    }

    .mobile-site-name, .mobile-site-description {
        overflow: hidden;
        margin: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-site-name {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
    }

    .mobile-site-name a {
        color: var(--mobile-heading);
    }

    .mobile-site-description {
        color: var(--mobile-muted);
        font-size: 12px;
        line-height: 1.7;
    }

    #mainmenu .logo {
        display: none;
    }

    #mainmenu .navbar-toggle, .mobile-search-toggle {
        display: inline-flex;
        flex: 0 0 44px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border: 1px solid var(--mobile-border);
        border-radius: 10px;
        color: var(--mobile-text);
        background: var(--mobile-surface);
        font-size: 18px;
    }

    #mainmenu .navbar-toggle .icon-bar {
        background: var(--mobile-text);
    }

    #navbar {
        max-height: 65vh;
        padding: 0;
        border-top: 1px solid var(--mobile-border);
        box-shadow: none;
    }

    #navbar .menu-ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
        margin: 10px 0;
    }

    #navbar .menu-ul::before, #navbar .menu-ul::after {
        display: none;
    }

    #navbar .menu-ul > .replace-sign, #navbar .menu-ul > .desktop-search-item {
        display: none;
    }

    .navbar-default #navbar .menu-ul > li > .menu_a {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        border: 0;
        border-radius: 8px;
        color: var(--mobile-text);
        background: transparent;
        font-size: 15px;
        line-height: 1.6;
        text-align: left;
    }

    .navbar-default #navbar .menu-ul > .active > .menu_a {
        color: var(--mobile-accent) !important;
        background: var(--mobile-tint);
    }

    .custome-container {
        margin-top: 0;
        padding: 16px max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left));
    }

    .custome-container > .row {
        width: auto;
        margin: 0;
    }

    .custome-container .blog-main, .custome-container .blog-sidebar {
        float: none;
        width: 100%;
        min-width: 0;
        padding: 0;
    }

    .blog-main > article, .blog-body, .sidebar-module {
        min-width: 0 !important;
        border: 1px solid var(--mobile-border);
        border-radius: 12px !important;
        background: var(--mobile-surface);
        box-shadow: none;
    }

    .blog-main > article.article-list-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 14px;
        height: auto;
        padding: 18px !important;
        margin: 0 0 12px !important;
    }

    .article-list-item .entry-header {
        grid-column: 1;
        grid-row: 1;
    }

    .article-list-item .entry-header .entry-title {
        padding: 0;
        margin: 0;
        font-size: 19px;
        line-height: 1.55;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .article-list-item .entry-header .entry-title a {
        color: var(--mobile-heading);
        font-size: inherit;
        font-weight: 650;
        line-height: inherit;
    }

    .article-list-item .thumbnail {
        grid-column: 2;
        grid-row: 1;
        float: none;
        width: 72px;
        height: 72px;
        margin: 2px 0 0;
        border-radius: 8px;
    }

    .article-list-item .thumbnail a img {
        width: 72px;
        height: 72px;
        min-height: 0;
        max-height: none;
        object-fit: cover;
    }

    .article-list-item .entry-content {
        grid-column: 1 / -1;
        height: auto;
        min-width: 0;
        padding: 0;
    }

    .article-list-item .entry-content .archive-content {
        display: -webkit-box;
        max-height: none;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        color: var(--mobile-muted);
        font-size: 15px;
        line-height: 1.8;
        overflow-wrap: anywhere;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .article-list-item .entry-content .entry-meta {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
        margin: 12px 0 0;
        color: var(--mobile-muted);
        font-size: 12px;
        line-height: 1.8;
    }

    .article-list-item .entry-content .entry-meta span {
        margin: 0;
    }

    .article-list-item .entry-content .entry-meta .date {
        display: inline;
    }

    .article-list-item .entry-meta .type-tag a {
        color: var(--mobile-accent);
    }

    .article-list-item .entry-more, .article-list-item .title-l,
    .article-list-item .thumbnail .cat, .article-list-item .entry-meta .comment {
        display: none;
    }

    .blog-body, .sidebar-module {
        padding: 18px;
        margin-bottom: 12px;
    }

    .breadcrumb {
        padding: 0 4px 14px;
        margin: 0;
        background: transparent;
        color: var(--mobile-muted);
        font-size: 13px;
        line-height: 1.8;
    }

    .blog-info {
        min-width: 0;
        padding: 0;
    }

    .blog-info-title, .disclaimer-title, .archives-title {
        margin: 10px 0 18px;
        color: var(--mobile-heading);
        font-size: 26px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .article-flag {
        height: 26px;
        margin: 0;
    }

    .article-flag .article-blockquote {
        display: none;
    }

    .article-flag .article-original {
        position: static;
        display: inline-block;
        padding: 2px 9px;
        margin: 0;
        border-radius: 5px;
        font-size: 12px;
        line-height: 1.8;
        box-shadow: none;
    }

    .article-flag .article-original-green {
        background: var(--mobile-tint);
    }

    .article-flag .article-original-green a {
        color: var(--mobile-accent);
    }

    .blog-info .title-head {
        padding: 0 0 18px;
        border-bottom: 1px solid var(--mobile-border);
        border-radius: 0;
        color: var(--mobile-muted);
        background: transparent;
        font-size: 13px !important;
    }

    .blog-info .title-head li {
        line-height: 1.9;
        white-space: normal;
    }

    .blog-info .title-head .read-remind {
        color: inherit;
    }

    .blog-info .title-head li + li {
        margin-top: 5px;
    }

    .blog-info .title-head .article-tag-li a {
        padding: 2px 7px;
        margin: 2px 3px 2px 0;
        color: var(--mobile-accent) !important;
        background: var(--mobile-tint);
        font-size: 12px;
    }

    .blog-info-body, .disclaimer-body, .archives-body {
        padding: 22px 0 6px;
        color: var(--mobile-text);
        font-size: 17px;
        line-height: 1.9;
        overflow: visible;
        overflow-wrap: anywhere;
    }

    .blog-info-body p {
        padding: 0;
        margin: 0 0 1.15em !important;
        color: inherit;
        line-height: inherit;
        overflow: visible;
    }

    .blog-info-body li {
        color: inherit;
        line-height: inherit;
    }

    .blog-info-body h1, .blog-info-body h2, .blog-info-body h3,
    .blog-info-body h4, .blog-info-body h5, .blog-info-body h6 {
        padding: 0 0 8px;
        margin: 1.6em 0 0.8em;
        color: var(--mobile-heading);
        line-height: 1.5;
        scroll-margin-top: 20px;
    }

    .blog-info-body h1 { font-size: 25px; }
    .blog-info-body h2 { font-size: 22px; }
    .blog-info-body h3 { font-size: 19px; }
    .blog-info-body h4, .blog-info-body h5, .blog-info-body h6 { font-size: 17px; }

    .blog-info-body ul, .blog-info-body ol {
        padding-left: 1.5em;
        margin: 0 0 1.2em;
    }

    .blog-info-body li + li {
        margin-top: 8px;
    }

    .blog-info-body blockquote {
        padding: 14px 16px;
        margin: 20px 0;
        border-left: 3px solid var(--mobile-accent);
        border-radius: 0 8px 8px 0;
        color: var(--mobile-text);
        background: var(--mobile-tint);
        font-size: 16px;
    }

    .blog-info-body blockquote p:last-child {
        margin-bottom: 0 !important;
    }

    .blog-info-body img, .blog-info-body video {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
    }

    .blog-info-body iframe {
        max-width: 100%;
    }

    .blog-info-body pre {
        max-width: 100%;
        padding: 48px 14px 14px !important;
        margin: 20px 0;
        overflow: auto !important;
        font-size: 14px;
        line-height: 1.75;
        overflow-wrap: normal;
        word-break: normal;
    }

    .blog-info-body pre code {
        font-size: 14px;
        line-height: inherit;
        overflow-wrap: normal;
        word-break: normal;
    }

    .blog-info-body > table {
        display: block !important;
        width: 100%;
        max-width: 100%;
        margin: 20px 0;
        overflow-x: auto !important;
        font-size: 14px;
        -webkit-overflow-scrolling: touch;
    }

    .blog-info-body > table th, .blog-info-body > table td {
        min-width: 100px;
        padding: 10px 12px !important;
        line-height: 1.7 !important;
    }

    .blog-info-body .copy_button, .blog-info-body .toggle_code_button {
        width: 36px;
        height: 36px;
    }

    .blog-info-body .toggle_code_button_div {
        right: 52px;
    }

    .article-footer {
        position: static;
        padding: 14px 0 0;
        border-top: 1px solid var(--mobile-border);
        font-size: 13px;
        line-height: 1.8;
    }

    .article-tag, .prev-next {
        font-size: 14px;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }

    .article-tag .cat, .prev-next .nav-single {
        padding: 0;
    }

    .pagination {
        margin: 8px 0 20px;
    }

    .pagination .pager {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pager > li > a, .pager > li > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 8px 12px;
        margin: 0;
        border-radius: 8px;
        font-size: 15px;
    }

    .nav-search-box .modal-dialog {
        margin: 18px 14px;
    }

    .nav-search-box .modal-dialog .modal-content {
        border: 1px solid var(--mobile-border);
        border-radius: 12px;
        color: var(--mobile-text);
        background: var(--mobile-surface);
    }

    .nav-search-box .modal-header {
        border-color: var(--mobile-border);
    }

    .nav-search-box .modal-header .close {
        width: 44px;
        height: 44px;
        margin: 0 !important;
        color: var(--mobile-text);
        font-size: 26px;
        opacity: 1;
        text-shadow: none;
    }

    .nav-search-box .modal-body {
        padding: 18px;
    }

    .nav-search-box .input-group, .nav-search-box input {
        width: 100%;
    }

    .nav-search-box input, #detail-form input {
        min-height: 44px;
        font-size: 16px;
    }

    .nav-search-box input {
        color: var(--mobile-text);
        background: var(--mobile-background);
    }

    .nav-search-box .nav-search-btn {
        width: 84px;
        min-height: 44px;
        font-size: 16px;
    }

    .footer {
        padding: 22px 0;
        font-size: 12px;
        line-height: 1.9;
        overflow-wrap: anywhere;
    }

    .footer .container {
        padding: 0 18px;
    }

    .to-top {
        right: 12px;
        bottom: max(20px, env(safe-area-inset-bottom));
    }

    .fade-in:hover, .sidebar-module:hover, .menu-box:hover, .blog-body:hover {
        box-shadow: none;
    }
}