.blog-view-area{
        position:relative;
        overflow:hidden;
        border-radius:32px;
        border:1px solid #ededed;
        background:#fff;
        min-height:850px;
    }

    /* iframe */
    #naverBlogFrame{
        width:100%;
        height:100%;
        border:none;
        display:block;
    }

    /* loading */
    .blog-loading{
        position:absolute;
        inset:0;
        background:rgba(255,255,255,0.92);
        z-index:20;

        display:flex;
        align-items:center;
        justify-content:center;

        opacity:0;
        visibility:hidden;
        transition:0.25s;
    }

    /* 显示loading */
    .blog-loading.show{
        opacity:1;
        visibility:visible;
    }

    /* spinner */
    .blog-loading-spinner{
        width:42px;
        height:42px;
        border-radius:50%;
        border:3px solid #e5e5e5;
        border-top-color:#111;

        animation:blogSpin 0.8s linear infinite;
    }

    @keyframes blogSpin{

        from{
            transform:rotate(0deg);
        }

        to{
            transform:rotate(360deg);
        }

    }
    .blog-header{
        align-items:center;
        justify-content:flex-start;
        margin-bottom:28px;
    }

    .blog-title-wrap h2{
        margin:0;
        font-size:32px;
        font-weight:800;
        color:#111;
        letter-spacing:-1px;
    }
    .blog-title-wrap h2 span{
        color:#36b1a7; 
        font-size:32px;
        font-weight:800; 
        float: right;
    }
    /* 整体 */
    .blog-layout-section{
        width:1240px;
        margin:0px auto;
        display:grid;
        grid-template-columns:420px 1fr;
        gap:32px;
        padding: 50px 0px;
        min-height:850px;
    }

    /* 左侧 */
    .blog-sidebar{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    /* item */
    .blog-list-item{
        display:flex;
        gap:18px;
        padding:16px;
        background:#fff;
        border-radius:24px;
        border:1px solid #ededed;
        cursor:pointer;
        transition:0.3s;
    }

    .blog-list-item:hover{
        transform:translateY(-4px);
        box-shadow:0 12px 30px rgba(0,0,0,0.06);
    }

    .blog-list-item.active{
        border-color:#111;
        background:#fafafa;
    }

    /* 图片 */
    .blog-list-thumb{
        width:120px;
        height:120px;
        border-radius:18px;
        overflow:hidden;
        flex-shrink:0;
        background:#f5f5f5;
    }

    .blog-list-thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:0.4s;
    }

    .blog-list-item:hover .blog-list-thumb img{
        transform:scale(1.06);
    }

    /* 内容 */
    .blog-list-content{
        flex:1;
        min-width: 0;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    .blog-list-category{
        display:block;
        width:100%;
        max-width:100%;
        padding:6px 12px;
        border-radius:999px;
        background:#111;
        color:#fff;
        font-size:12px;
        font-weight:600;
        margin-bottom:12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        box-sizing:border-box;
    }

    .blog-list-content h3{
        margin:0;
        font-size:18px;
        line-height:1.5;
        color:#111;
        font-weight:700;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .blog-list-meta{
        margin-top:14px;
        display:flex;
        gap:14px;
        color:#888;
        font-size:13px;
    }

    /* 右侧 */
    .blog-view-area{
        position:relative;
        overflow:hidden;
        border-radius:32px;
        border:1px solid #ededed;
        background:#fff;
        min-height:850px;
    }

    /* iframe */
    #naverBlogFrame{
        width:100%;
        height:100%;
        border:none;
        background:#fff;
    }
    @media(max-width:1600px){
        .blog-layout-section{
            width:95%;
        }

    }
    /* 平板 */
    @media(max-width:1200px){

        .blog-layout-section{
            grid-template-columns:1fr;
        }

        .blog-view-area{
            min-height:700px;
        }

    }