@mixin chinese() {
    &.chinese {
        text-indent: 1.5em;
        font-weight: 300;
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        ol,
        ul,
        blockquote,
        details,
        summary,
        pre,
        .tabs {
            text-indent: 0;
        }
    }
}
.markdown-body {
    --color-base: #ef4444;
    --markdown-bg: transparent;
    --color-bg: #ff47479c;
    --color-light: #ef44441a;
    --color-extra: rgba(239, 68, 68, 0.3);
    --color-more: rgba(239, 68, 68, 0.4);
}

.markdown-body.green {
    background-color: var(--markdown-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 1.6em;
    @media screen and (max-width: 768px) {
        padding: 0;
        box-shadow: none;
    }

    strong {
        &::before{
            content: "『";
        }
        &::after{
            content: "』";
        }
        // color: #ff4d20;
    }

    /* 块/段落引用 */
    // blockquote {
    //     position: relative;
    //     // color: #555;
    //     font-weight: 400;
    //     border-left: 6px solid var(--color-base);
    //     padding-left: 1em;
    //     margin-left: 0;
    //     padding: 1em;
    //     background-color: var(--color-light);
    // }

    blockquote {
        position: relative;
        z-index: 600;
        padding: 20px 20px 15px 20px;
        line-height: 1.4 !important;
        background-color: rgba(239, 68, 68, 0.06);
        border-radius: .4em;
        > * {
            position: relative;
            &:first-child:before {
              content: '\201C';
              color: var(--color-light);
              font-size: 6.5em;
              font-weight: 700;
              transform: rotate(15deg) translateX(-10px);
              opacity: 1;
              position: absolute;
              top: -.4em;
              left: -.2em;    
              text-shadow: none;
              z-index: -10;
            }
          }
    }

    .tabs{
        margin-top: 0;
        margin-bottom: 1em;
    }

    /* 让链接在 hover 状态下显示下划线 */
    // a {
    //     color: var(--color-base);
    //     text-decoration: none;
    //     &:hover {
    //         text-decoration: underline;
    //     }
    // }
    a {
        position: relative;
        z-index: 10;
        transition: color 0.3s linear;
        cursor: pointer;
        font-weight: bolder;
        // text-decoration: underline #c7254e;
        text-decoration: none;
        color: var(--color-base);
        border-bottom: 1px solid currentColor;
        padding: 0 4px;
        &[data-footnote-backref],
        &[data-footnote-ref] {
            // text-decoration: none;
            border: none;
            &:hover {
                background: none;
                animation: none;
            }
        }
        &:hover {
            content: '';
            // text-decoration: none;
            border: none;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")
                repeat-x 0 100%;
            background-size: 20px auto;
            animation: waveMove 1s infinite linear;
        }
        @keyframes waveMove {
            0% {
                background-position: 0 100%;
            }
            100% {
                background-position: -20px 100%;
            }
        }
    }

    pre {
        background: #f7f7f7;
        font-size: 0.95em;
        //     /* border: 1px solid #ddd; */
        // padding: 1em 1.5em;
        display: block;
        -webkit-overflow-scrolling: touch;
    }

    pre,
    pre code {
        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
    }

    //     /* 底部印刷体、版本等标记 */
    small,
        /* 图片说明 */
        figcaption {
        font-size: 0.75em;
        color: #888;
    }
    // .markdown-body {
    legend {
        color: #000;
        font-weight: inherit;
    }
    caption {
        color: #000;
        font-weight: inherit;
    }
    del {
        text-decoration: line-through var(--color-base) 2px;
    }
    /* 行内代码：仅匹配非代码块场景，避免和 pre/code 嵌套互相覆盖 */
    :not(pre) > code {
        color: #d73a49;
        background-color: rgba(160, 174, 192, 0.25);
        font-family: inherit;
        font-size: 1em;
        border-radius: 4px;
        padding: 1px 6px;
        margin: 0 2px;
        vertical-align: bottom;
    }

    /* MarkdownIt highlight 输出的代码块容器 */
    .code-block-wrapper {
        margin: 1rem 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        background: #f7f7f7;
        color: #333;
        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
        font-size: 0.95em;
        line-height: 1.5;

        .code-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.6rem 1rem;
            background: #efefef;

            .code-lang {
                font-size: 0.78rem;
                font-weight: 600;
                letter-spacing: 0.02em;
                color: #64748b;
                text-transform: uppercase;
            }

            .copy-btn {
                border: 1px solid #d0d7de;
                background: #fff;
                color: #475569;
                border-radius: 6px;
                padding: 0.2rem 0.6rem;
                font-size: 0.75rem;
                line-height: 1.3;
                cursor: pointer;
                transition: all 0.18s ease;

                &:hover {
                    background: #f8fafc;
                    border-color: #b8c2cc;
                    color: #334155;
                }

                &.is-copied {
                    background: #dcfce7;
                    border-color: #86efac;
                    color: #166534;
                }
            }
        }

        pre {
            margin: 0;
            padding: 1.2rem;
            overflow-x: auto;
            background: transparent;
            box-shadow: none;

            code {
                display: block;
                padding: 0;
                margin: 0;
                color: inherit;
                background: transparent;
                border-radius: 0;
                white-space: pre;
            }

        }
    }
    table {
        width: fit-content;
        display: block;
        max-width: 100%;
        overflow-x: auto;
        border: 1px solid var(--color-light);
        border-radius: 8px;
        border-collapse: separate;
        border-spacing: 0;
        margin: 1rem 0;
        background: #fff;

        caption {
            padding: 0.6em 1em;
            text-align: left;
            color: var(--color-fg-subtle);
            border-bottom: 1px solid var(--color-light);
            background: #fff;
        }

        thead th {
            background: var(--color-extra);
            border-bottom: 1px solid var(--color-light);
            font-weight: 600;
        }

        th,
        td {
            padding: 0.55em 1em;
            white-space: nowrap;
            border-right: 1px solid var(--color-light);
            border-bottom: 1px solid var(--color-light);
        }

        th:last-child,
        td:last-child {
            border-right: 0;
        }

        tbody tr:last-child td {
            border-bottom: 0;
        }

        tbody tr:hover td {
            background: var(--color-light);
        }
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 1.2em;
        margin-bottom: 0.6em;
        line-height: 1.35;
        position: relative;
    }
    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.6em;
    }
    h3 {
        font-size: 1.4em;
    }
    h4 {
        font-size: 1.2em;
    }
    h5 {
        font-size: 1em;
    }
    h6 {
        font-size: 1em;
    }
    
    ::-webkit-calendar-picker-indicator {
        filter: invert(50%);
    }
    em {
        // color: #000;
        font-weight: inherit;
        position: relative;
        &:after {
            position: absolute;
            top: 0.65em;
            left: 0;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            pointer-events: none;
            color: var(--color-base);
            content: '・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・';
        }
    }
    ul.toc {
        li {
            list-style-type: none;
            a {
                text-decoration: none;
                border: 0;
                list-style-type: none;
            }
        }
    }
    @include chinese;
}