/*! ©2026 shanghai life and info zhaozhishi.net */
/* CSS Document */

/* 基础 */
* {margin:0; padding:0; box-sizing:border-box}
html,body {height:100%; font:14px/1.5 Arial,"Microsoft YaHei",sans-serif; background:#f8f9fa}
a {color:#333; text-decoration:none; transition:color .3s}
a:hover {color:#ed4040}
ul,ol {list-style:none}
img {max-width:100%; height:auto; border:none}
.clearfix::after {content:""; display:block; clear:both}

/* 保证右侧栏布局稳定性 */
.wrapper {min-height:100%; padding-top:60px}
.container {width:95%; max-width:1200px; margin:0 auto; padding:15px 0}
.main-layout {display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; /* 防止列高度不一致错位 */}

/* 头部交互更顺滑 */
.header {
    position:fixed; top:0; left:0; right:0; height:60px; line-height:60px;
    background:#fff; border-bottom:1px solid #e9ecef; box-shadow:0 2px 8px rgba(0,0,0,.05); z-index:9999;
    transition:height .3s, line-height .3s; /* 响应式过渡 */
}
.header-inner {width:95%; max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.logo {width:120px}
.logo img {height:40px; object-fit:contain}
.search-form {flex:1; max-width:500px; margin:0 20px}
.search-input {
    width:100%; height:38px; padding:0 15px 0 35px; border:1px solid #e9ecef; border-radius:19px; outline:0; font-size:14px;
    background:#f8f9fa url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 0 1-11 0 5.5 5.5 0 1 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 12px center;
    transition:border-color .3s, box-shadow .3s; /* 聚焦过渡 */
}
.search-input:focus {border-color:#ed4040; box-shadow:0 0 0 3px rgba(237,64,64,.1)}
.menu-btn-wrapper {display:flex; align-items:center; gap:8px; cursor:pointer; /* 新增：整体可点击 */}
.menu-text {display:none; font-size:15px; color:#333; font-weight:500}
.menu-arrow {display:none; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:6px solid #ed4040; transition:transform .3s}
.menu-btn {width:42px; height:42px; background:#ed4040; color:#fff; border-radius:50%; text-align:center; line-height:42px; font-size:20px; cursor:pointer; transition:background .3s,transform .3s; border:none; outline:0}
.menu-btn:hover {background:#d93636; transform:scale(1.05)}
.global-menu {display:none; position:fixed; top:60px; right:0; width:280px; background:#fff; border:1px solid #e9ecef; border-top:none; border-radius:0 0 0 8px; box-shadow:0 4px 12px rgba(0,0,0,.1); z-index:9998; max-height:calc(100vh - 60px); overflow-y:auto;
    transition:opacity .3s, transform .3s; /* 菜单显示过渡 */
    opacity:0; transform:translateX(10px);
}
.global-menu.show { /* 显示类，WSYJ配合JS */
    display:block;
    opacity:1;
    transform:translateX(0);
}
.global-menu ul {padding:8px 0}
.global-menu li {border-bottom:1px solid #f8f9fa}
.global-menu a {display:block; height:48px; line-height:48px; padding:0 20px; font-size:15px}
.global-menu a:hover {background:#f8f9fa; color:#ed4040}

/* 文章区域优化 */
.curpos {font-size:12px; color:#999; margin-bottom:10px}
.article-header {margin-bottom:20px}
.article-header .title {font-size:24px; font-weight:700; color:#222; line-height:1.4; margin-bottom:10px;
    word-break:break-word; /* 长标题换行 */
}
.article-header .time {font-size:12px; color:#999}
.article-content {background:#fff; padding:20px; border-radius:8px; line-height:1.8; font-size:15px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,.05);
    word-break:break-all; /* 内容换行 */
}
.article-content p {margin-bottom:15px; text-indent:2em}
.article-content h3 {
  font-size: 1em;
  color: #e53e3e;
  background-color: #ffffff;
  border-left: 4px solid #e53e3e;
  padding: 8px 12px;
  margin: 20px 0 12px;
  line-height: 1.5;
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.article-content h4 {
  font-size: 0.8em;
  color: #fff;
  background-color: #e53e3e;
  border-left: 6px solid #c52222;
  padding: 10px 14px;
  margin: 22px 0 14px;
  line-height: 1.5;
  font-weight: 600;
  border-radius: 4px;
}
/* 文章操作区优化 */
.article-actions {background:#fff; padding:12px 15px; border-radius:8px; margin-bottom:15px; box-shadow:0 2px 8px rgba(0,0,0,.05); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px}
.action-left {display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.favorite-tip {color:#ff5722; font-weight:500; white-space:nowrap}
.share-group {display:flex; gap:10px; flex-wrap:wrap} /* 换行适配 */
.share-group a {color:#0084ff; font-size:14px;
    display:inline-flex; align-items:center; /* 对齐优化 */
}
.areport {color:#ed4040; font-weight:500; margin-left:auto}

/* 上下篇优化 */
.page-links {width:100%; background:#fff; padding:10px 15px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.05); font-size:13px; color:#666; line-height:1.8;
    display:flex; flex-wrap:wrap; gap:10px; /* 换行适配 */
}
.page-pre,.page-next {display:block; flex:1 1 auto; /* 平分空间 */}

/* 相关阅读优化 */
#pagelet-relatednews {background:#fff; padding:15px; border-radius:8px; margin-top:15px; box-shadow:0 2px 8px rgba(0,0,0,.05)}
.dtag {font-size:16px; font-weight:700; margin-bottom:10px; padding-left:8px; border-left:3px solid #ed4040}
.relatednews .item {margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #eee}
.relatednews .item:not(:has(.lbox)) {display:flex; align-items:center}
.lbox {width:100px; height:70px; float:left; margin-right:10px; flex-shrink:0} /* 防压缩 */
.lbox img {width:100%; height:100%; object-fit:cover; border-radius:4px}
.rbox {margin-left:110px; overflow:hidden; /* 防溢出 */}
.title-box {font-size:14px; font-weight:700; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.abstract {font-size:12px; color:#666; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.footer {font-size:12px; color:#999}

/* 右侧栏：强显 + 粘性布局（可选） */
.detail-main {flex:1; min-width:300px}
.detail-right {width:280px; position:relative; z-index:1;
    flex-shrink:0; /* 防止宽度被压缩 */
    display:block !important; /* 强制显示 */
    visibility:visible !important;
    opacity:1 !important;
}
/* 可选：右侧栏粘性布局（滚动时固定），如需取消可注释 */
@media (min-width:769px) {
    .detail-right {
        position:sticky;
        top:70px;
        align-self:flex-start;
    }
}
.sideGap {margin-bottom:20px; background:#fff; padding:15px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.05)}
.Pgc_name {display:block; text-align:center; font-weight:700; margin-bottom:5px}
.Pgc_details {display:block; text-align:center; font-size:12px; color:#999; margin-bottom:10px}
.image_head {width:60px; height:60px; border-radius:50%; margin:0 auto -10px; background:url(/style/sh_logo.png); background-size:cover}

/* 右侧列表统一优化 */
.monthhot li,
.Pgc_article li {height:28px; line-height:28px; font-size:13px; border-bottom:1px dashed #eee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.monthhot i {display:inline-block; width:16px; height:16px; line-height:16px; text-align:center; background:#ccc; color:#fff; border-radius:50%; margin-right:5px; font-size:12px}
.monthhot li:nth-child(1) i,.monthhot li:nth-child(2) i,.monthhot li:nth-child(3) i {background:#ed4040}
.Pgc_article ul {padding:0; margin:0; list-style:none}
.Pgc_article li {display:flex; align-items:center; height:34px; line-height:34px; font-size:14px}
.Pgc_article li::before {content:""; width:6px; height:6px; border-radius:50%; background:#999; margin-right:10px; flex-shrink:0}
.Pgc_article li a {flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.hotgallery_show img {width:100%; height:160px; object-fit:cover; border-radius:4px; margin-bottom:5px}
.pic_number {position:absolute; background:rgba(0,0,0,.5); color:#fff; padding:2px 5px; font-size:12px; border-radius:3px; right:5px; top:5px}
.gallery-con {position:relative}
.gallery_item .title p {white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* 反馈弹窗优化：wd43交互更友好 */
.feedback_dialog {position:fixed; right:-380px; bottom:100px; width:320px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.2); z-index:9999; transition:all .3s ease; border-radius:6px;
    opacity:0; /* 新增：透明度过渡 */
}
.feedback_dialog.on {right:10px; opacity:1}
.feedback_dialog:hover {right:10px; opacity:1}
.dialog-header {padding:10px; background:#f5f5f5; border-bottom:1px solid #eee; font-weight:700; display:flex; justify-content:space-between; align-items:center}
.feedback_panel {padding:15px}
.feedback_item {margin-bottom:12px}
.feedback_panel p {margin-bottom:6px; font-size:14px; color:#333}
.email,.content {width:100%; border:1px solid #eee; padding:8px; border-radius:4px; outline:0; font-size:14px; transition:border-color .3s}
.email:focus,.content:focus {border-color:#ed4040} /* 聚焦样式 */
.content {height:100px; resize:none}
.btn_group {display:flex; gap:10px; margin-top:10px}
.submit-btn,.close-btn {flex:1; padding:8px 0; text-align:center; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:14px; transition:background .3s}
.submit-btn {background:#ed4040}
.submit-btn:hover {background:#d93636}
.close-btn {background:#6c757d}
.close-btn:hover {background:#5a6268}

/* 底部优化 */
#aboutus {text-align:center; padding:15px 0; font-size:12px; color:#999; background:#fff; margin-top:20px; border-top:1px solid #eee;
    line-height:1.8; /* 行高优化 */
}

/* 响应式优化 */
@media (min-width:769px) {
    .menu-text,.menu-arrow {display:block}
    /* 大屏下相关阅读布局 */
    .relatednews .item:not(:has(.lbox)) {flex-wrap:nowrap}
}
@media (max-width:768px) {
    .header {height:50px; line-height:50px}
    .wrapper {padding-top:50px}
    .logo {width:80px}
    .search-form {max-width:none; margin:0 10px}
    .menu-btn {width:38px; height:38px; line-height:38px}
    .global-menu {top:50px; width:100%; border-radius:0}
    .main-layout {flex-direction:column}
    .detail-right {width:100%}
    .action-left {gap:6px}
    /* sh移动端文章内容缩进取消 */
    .article-content p {text-indent:0}
    /* 移动端相关阅读布局 */
    .lbox {width:80px; height:60px}
    .rbox {margin-left:90px}
    /* 移动端反馈弹窗位置 */
    .feedback_dialog {width:90%; bottom:20px; right:-100%; max-width:320px}
    .feedback_dialog.on {right:5%}
}
/* 超小屏适配（480px以下） */
@media (max-width:480px) {
    .share-group {gap:6px}
    .favorite-tip {font-size:12px}
    .article-header .title {font-size:20px}
}