@charset "utf8";
/* CSS Document */
/* ========== 文章页主体容器 ========== */
.MainTable {
    max-width: 1000px;
    margin: 20px auto;
    margin-left: calc((100% - 1000px) / 2 - -10px); /* ✅ 精确左移10px */
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    background: #ffffff;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: flex-start;

    box-sizing: border-box;
}

/* ========== 左侧文章区 ========== */
.MainTable .Main {
    width: 70%;
    min-width: 0;
    flex-shrink: 0;
}
.font-size-btn{cursor:pointer;margin:0 3px;color:#0066cc;}
.font-size-btn:hover{text-decoration:underline;}
/* ========== 右侧栏 ========== */
.MainTable .Side {
    width: 30%;
    flex-shrink: 0;
}

/* ========== 文章标题 ========== */
.main_title {
    font-size: 24px;
    font-weight: bold;
    color: #111;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 8px;
}
.fit_title {
    font-size: 16px;
    color: #888;
    text-align: center;
    margin-bottom: 20px;
}

/* ========== 文章信息栏（面包屑导航） ========== */
.top_about {
    text-align: center;
    font-size: 13px;
    color: #999;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 25px;
}
/* ✅ 红色 → 灰色 */
.top_about a {
    color: #666666;
}
.top_about a:hover {
    color: #409EFF;   /* 悬停时青色 */
}

/* ========== 正文排版 ========== */
#contentArea {
    margin-left: 230px;
    transition: margin-left .25s ease;
}

#contentArea.expanded {
    margin-left: 10px; /* 或 0 */
}
.content_word {
    word-break: break-all;
    word-wrap: break-word;
}
.content_word p {
    font-size: 16px;
    line-height: 1.8;
    color: #222;
    margin-bottom: 18px;
    text-align: justify;
}
.content_word img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

/* ========== Digg / Cigg ========== */
.Cigg {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    margin: 10px auto;
}
/* ✅ 背景红色 → 灰色 */
.Cigg .number {
    background: #666666;
    color: #fff;
    padding: 6px 14px;
    font-weight: bold;
}
/* ✅ 文字红色 → 灰色 */
.Cigg .title a {
    padding: 6px 14px;
    color: #666666;
}
.Cigg .title a:hover {
    background: #f2f2f2;
}

/* ========== 分页 ========== */
.fyf {
    text-align: center;
    margin: 20px 0;
    padding:1px 0; /* 防止margin塌陷，保留 */
    line-height: 1.6; /* 兜底行高，多行分页拉开距离 */
}
.fyf a {
    border: 1px solid #ddd;
    padding: 6px 12px;
    margin: 4px 3px; /* 原来0 3px → 修改为上下4px，左右3px */
    border-radius: 3px;
    color: #666;
    display: inline-block; /* 关键！margin上下生效，inline元素垂直margin无效 */
}
/* ✅ hover 青色样式 */
.fyf a:hover {
    background: #409EFF;
    color: #fff;
    border-color: #409EFF;
}

.func-bar::-webkit-scrollbar {
    height:4px; /*横向滚动条高度缩小 */
	margin-bottom: 20px;
}
.func-bar::-webkit-scrollbar-thumb {
    background:#cccccc;
    border-radius:2px;
}
.func-bar::-webkit-scrollbar-track {
    background:#f1f1f1;
}
.func-bar a{
    margin:0 1px;
}

/* ========== 上一篇 / 下一篇 ========== */
.nextprev {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 20px 0;
    font-size: 13px;
}
.nextprev a {
    color: #555;
}
/* ✅ hover 红色 → 青色 */
.nextprev a:hover {
    color: #409EFF;
}

/* ========== 右侧栏模块（左侧青色竖线标题） ========== */
.Side .dragTable {
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
}
/* ✅ 去掉背景色，只留左侧 3px 青色竖线 */
.Side .head {
    background: transparent;
    padding: 9px 14px;
    border-left: 3px solid #79BF88;
    border-bottom: 1px solid #f0f0f0;
}
.Side .head .TAG {
    color: #333;
    font-size: 14px;
    font-weight: bold;
}
.Side .middle {
    padding: 12px;
    font-size: 13px;
    line-height: 1.8;
    height: auto;
    overflow: visible;
}

/* 普通文字列表：标题+时间左右布局 */
.Side .middle a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
    color: #555;
    transition: color .2s, padding-left .2s;
}
.Side .middle a:hover {
    color:#79BF88;
    padding-left:4px;
}
.article-title{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1;
}
.article-date{
    font-size:12px;
    color:#888;
    margin-left:8px;
    flex-shrink:0;
}

/* ==========【图片主题｜三等间距布局：左=中间=右】========== */
.Side .middle:after{
    content:"";
    display:block;
    clear:both;
}
/* 仅对包含图片卡片的middle容器设置网格+内边距 */
.Side .middle:has(.p.pic-item){
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px 8px;     /* 行间距14px，两图中间间隔8px */
    padding:0 8px !important; /* 左右内边距 = gap横向值，实现三等距 */
}
/* 重置图片卡片 */
.Side .middle .p.pic-item{
    width:auto !important;
    float:none !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing: border-box;
}

/* 图片外层容器：固定16:9比例 */
.Side .middle .p.pic-item a:first-child{
    display:block;
    width:100%;
    height:0;
    padding-bottom: 56.25%;  /* 16:9 */
    position:relative;
    overflow:hidden;
    margin-bottom:6px;    
	margin-top:15px;
    border:1px solid #eee;
}
/* 图片居中裁剪不变形 */
.Side .middle .p.pic-item img{
    position:absolute;
    top:0;
    left:0;
    width:96%;
    height:96%;
    object-fit: cover;
    display:block;
}

/* 标题单行截断 */
.Side .middle .p.pic-item a:last-child {
    display:block;
    font-size:13px;
    color:#555;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ========== 评论区 ========== */
.ShowComment {
    margin-top: 30px;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
}
.ShowComment .head {
    background: #f5f5f5;
    padding: 8px 14px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

/* ========== WAP / 窄屏：恢复单栏 ========== */
@media (max-width: 768px) {
    .MainTable {
        flex-direction: column;
    }
    .MainTable .Main,
    .MainTable .Side {
        width: 100%;
    }
    .main_title { font-size: 20px; }
    .content_word p { font-size: 15px; }
}
/* ========== 侧栏折叠按钮（fixed 版，确保显示） ========== */
.side-toggle {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 18px;
    height: 56px;
    background: #409EFF;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: background .2s;
}
.side-toggle:hover {
    background: #2d7fe0;
}
.side-toggle .arrow {
    color: #fff;
    font-size: 14px;
    line-height: 1;
}
.side-toggle .arrow::before {
    content: '<<';   /* 展开态 */
    font-size: 12px;
    color: #fff;
}

/* 折叠态：JS 会给 .Side 加 .collapsed */
.Side.collapsed ~ .side-toggle .arrow::before {
    content: '>';   /* 折叠态 */
}
/* ========== 侧栏定位 ========== */
.MainTable .Side {
    position: relative;
    z-index: 1;
    transition: width .35s ease, opacity .3s ease, padding .3s ease;
    overflow: hidden;
}

/* ========== 折叠状态 ========== */
.MainTable .Side.collapsed {
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0;
}

/* ========== 主内容区自适应 ========== */
.MainTable .Main {
    flex: 1;
    min-width: 0;
    transition: width .35s ease;
}

/* ========== 折叠后隐藏内容 ========== */
.Side.collapsed .dragTable,
.Side.collapsed .head,
.Side.collapsed .middle {
    display: none;
}

/* ========== 移动端隐藏按钮 ========== */
@media (max-width: 768px) {
    .side-toggle {
        display: none;
    }
}
/* ========== 右侧栏列表 + 日期 ========== */
.Side .middle a {
    display: block;
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s, padding-left .2s;
}
.Side .middle a:hover {
    color: #2E8B57;
    padding-left: 4px;
}
.Side .middle .list_date {
    float: right;
    color: #999;
    font-size: 12px;
    margin-left: 8px;
}

/* =====================【新增：7大模块专属样式】===================== */
/*1、表情投票区域 */
.heart-wrap{
    text-align:center;
    margin:12px 0;
    padding:10px 0;
}

/*2、Tags+免责申明 外框容器 */
.info-border-box{
    border:1px solid #ccc;
    padding:10px;
    margin:16px 0;
}
.tags-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.desc-line{
    font-size:8pt;
    color:#999;
    line-height:1.6;
}

/*4、功能按钮栏【大中小/打印/收藏等】 */
.func-bar{
    margin:16px 0;
    line-height:2.2;
}
.func-bar a{
    text-decoration:none;
    color:#0066cc;
    margin:0 4px;
}

/*5、分享+顶踩同一行布局（左70%｜右30%） */
.share-digg-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:16px 0;
}
.share-left{
    width:70%;
}
.digg-right{
    width:30%;
    display:flex;
    gap:8px;
    justify-content:flex-end;
}
.clearfix{
    clear:both;
}

/* 分享按钮内置样式 */
.share-box{
    margin:0;
    display:flex;
    gap:8px;
    align-items:center;
}
.share-btn{
    width:32px;
    height:32px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    text-decoration:none!important;
    border:none;
}
.share-btn svg{
    width:18px;
    height:18px;
    fill:#fff;
}
/*微信弹窗 */
#wechat-qr{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}
.qr-box{
    background:#fff;
    padding:20px;
    border-radius:10px;
    text-align:center;
}
.qr-box img{
    width:220px;
    height:220px;
    display:block;
}
.qr-box p{
    margin:15px 0 0;
    font-size:14px;
    color:#666;
}
.qr-box .close{
    margin-top:15px;
    padding:6px 12px;
    background:#07C160;
    color:#fff;
    border:none;
    border-radius:4px;
    cursor:pointer;
}

/*7、评论容器预留 */
.comment-wrap{
    margin-top:20px;
}

/* 移动端自适应同步适配模块布局 */
@media (max-width:768px){
    .share-digg-row{
        flex-direction:column;
        gap:12px;
    }
    .share-left,.digg-right{
        width:100%!important;
    }
    .digg-right{
        justify-content:flex-start;
    }
}