/* magazine — 杂志大图卡片风 | 复用 .yubao-header/.yubao-footer 契约 */
:root { --mag-ink:#1b1b1f; --mag-line:#ececec; --mag-muted:#8a8a92; }
* { box-sizing: border-box; }
html { background:#f4f4f6; text-align:center; }
body {
  width:100%; max-width:1180px; margin:0 auto; text-align:left; background:#fff;
  font:15px/1.75 "Noto Serif SC","Songti SC","Microsoft YaHei",serif; color:var(--mag-ink);
}
a { color:inherit; text-decoration:none; }
a:hover { color:var(--yubao-primary,#1a237e); }
ul,ol,li { margin:0; padding:0; list-style:none; }
img { display:block; }

/* 头部：细字距、居中 logo、下描边 */
.yubao-header { background:#fff; color:var(--mag-ink); padding:18px 24px 0; border-bottom:3px solid var(--yubao-primary,#1a237e); }
.yubao-inner { max-width:1120px; margin:0 auto; text-align:center; }
.yubao-slogan { margin:0; font-size:12px; letter-spacing:2px; color:var(--mag-muted); text-transform:uppercase; }
.yubao-logo { display:inline-block; margin:6px 0 12px; color:var(--mag-ink); font-size:34px; font-weight:700; letter-spacing:4px; }
.yubao-logo:hover { color:var(--yubao-primary,#1a237e); }
.yubao-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:0; border-top:1px solid var(--mag-line); }
.yubao-nav a { padding:12px 16px; font-family:"Microsoft YaHei",sans-serif; font-size:14px; color:#444; }
.yubao-nav a:hover { color:#fff; background:var(--yubao-primary,#1a237e); }

.mag-main { padding:28px 24px; max-width:1120px; margin:0 auto; }
.mag-kicker,.mag-h2 a,.mag-side-title { font-family:"Microsoft YaHei",sans-serif; }

/* 封面区：大图 lead + 侧栏排行 */
.mag-cover { display:grid; grid-template-columns:2fr 1fr; gap:28px; padding-bottom:28px; margin-bottom:12px; border-bottom:1px solid var(--mag-line); }
.mag-kicker { display:inline-block; font-size:12px; letter-spacing:3px; color:var(--yubao-primary,#1a237e); border-left:4px solid var(--yubao-primary,#1a237e); padding-left:10px; margin-bottom:14px; }
.mag-lead-link { display:block; }
.mag-lead-img { width:100%; height:380px; object-fit:cover; border-radius:6px; background:#eee; }
.mag-lead-cap { display:block; padding-top:14px; }
.mag-lead-title { display:block; font-size:26px; line-height:1.4; font-weight:700; }
.mag-lead-sum { display:block; margin-top:8px; font-style:normal; color:var(--mag-muted); font-size:14px; }
.mag-side-title { font-size:15px; letter-spacing:1px; padding-bottom:10px; margin-bottom:6px; border-bottom:2px solid var(--mag-ink); }
.mag-cover-rank { counter-reset:mr; }
.mag-cover-rank li { counter-increment:mr; display:flex; gap:10px; padding:11px 0; border-bottom:1px dotted var(--mag-line); font-size:15px; }
.mag-cover-rank li::before { content:counter(mr); font-family:"Microsoft YaHei"; font-weight:700; color:var(--yubao-primary,#1a237e); flex:0 0 22px; }

/* 分类卡片带 */
.mag-strip { margin:26px 0; }
.mag-h2 { display:flex; align-items:baseline; justify-content:space-between; font-size:20px; margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid var(--mag-line); }
.mag-more a { font-size:13px; color:var(--mag-muted); }
.mag-card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mag-card-a { display:block; }
.mag-card-imgbox { display:block; overflow:hidden; border-radius:6px; }
.mag-card-img { width:100%; height:130px; object-fit:cover; background:#eee; transition:transform .3s ease; }
.mag-card-a:hover .mag-card-img { transform:scale(1.06); }
.mag-card-title { display:block; margin-top:9px; font-size:15px; line-height:1.5; }

/* 双栏：正文列 + 右轨 */
.mag-two-col { display:grid; grid-template-columns:1fr 300px; gap:32px; margin-top:8px; }
.mag-text-list li { padding:11px 0; border-bottom:1px dotted var(--mag-line); font-size:15px; position:relative; padding-left:14px; }
.mag-text-list li::before { content:"—"; position:absolute; left:0; color:var(--yubao-primary,#1a237e); }
.mag-rail-box { background:#faf9f7; border:1px solid var(--mag-line); border-radius:6px; padding:18px; margin-bottom:20px; }
.mag-topic-list li { padding:9px 0; border-bottom:1px dotted var(--mag-line); font-family:"Microsoft YaHei"; }
.mag-topic-list li:last-child { border-bottom:none; }

/* 列表页 */
.mag-list-page { padding:8px 0; }
.mag-list-title { font-size:28px; margin:0 0 6px; }
.mag-list-intro { color:var(--mag-muted); margin-bottom:22px; }
.mag-list-cards { display:grid; gap:20px; }
.mag-list-item { border-bottom:1px solid var(--mag-line); padding-bottom:20px; }
.mag-list-a { display:grid; grid-template-columns:230px 1fr; gap:20px; align-items:center; }
.mag-list-imgbox { overflow:hidden; border-radius:6px; }
.mag-list-img { width:230px; height:150px; object-fit:cover; background:#eee; }
.mag-list-h { display:block; font-size:20px; line-height:1.5; }
.mag-list-sum { display:block; margin:8px 0; font-style:normal; color:var(--mag-muted); font-size:14px; }
.mag-list-date { font-size:12px; color:#b3b3b8; font-family:"Microsoft YaHei"; }

/* 内容页 */
.mag-article { max-width:760px; margin:0 auto; padding:10px 0 30px; }
.mag-art-title { font-size:32px; line-height:1.45; margin:8px 0 14px; }
.mag-art-meta { font-family:"Microsoft YaHei"; font-size:13px; color:var(--mag-muted); padding-bottom:18px; border-bottom:1px solid var(--mag-line); margin-bottom:24px; }
.mag-art-body { font-size:17px; line-height:1.95; }
.mag-art-body p { margin:0 0 20px; }
.mag-art-body img { max-width:100%; height:auto; margin:12px 0; border-radius:4px; }

.yubao-crumb { font-family:"Microsoft YaHei"; font-size:12px; color:var(--mag-muted); margin-bottom:14px; }
.yubao-pagination { margin-top:26px; text-align:center; font-family:"Microsoft YaHei"; }

/* 页脚 */
.yubao-footer { margin-top:40px; padding:26px; text-align:center; font-family:"Microsoft YaHei"; font-size:12px; color:var(--mag-muted); border-top:3px solid var(--yubao-primary,#1a237e); background:#faf9f7; }
.yubao-footer a { color:#555; }
.yubao-topic-links { margin-bottom:8px; }

@media (max-width:860px) {
  .mag-cover,.mag-two-col { grid-template-columns:1fr; }
  .mag-card-grid { grid-template-columns:repeat(2,1fr); }
  .mag-lead-img { height:240px; }
  .mag-list-a { grid-template-columns:130px 1fr; gap:12px; }
  .mag-list-img { width:130px; height:90px; }
  .mag-list-h { font-size:16px; }
  .mag-art-title { font-size:24px; }
}