/* ===== Extracted CSS from: article_content.html ===== */
/* --- Begin --- */
:root{
--bg:#ffffff; --ink:#0a0a0a; --muted:#6b7280; --line:#e5e7eb; --chip:#f7f8fa;
--gutter:16px; --header-h:72px;
/* 可调参数 */
--thumb-radius:12px; /* 文章头图圆角 */
--content-max: 860px; /* 正文最大宽度 */
--left-col: 300px; /* 右侧浮动栏宽度（桌面） */
--content-gap: 24px; /* 主列与侧栏间距 */
--h1-size: clamp(24px, 3.6vw, 36px);
--p-size: 16px;
/* 推荐阅读栅格可调 */
--rec-grid-min: 220px; /* 底部推荐卡片最小宽 */
--mini-card-min: 140px; /* 侧栏小网格卡片最小宽 */
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
line-height:1.8;-webkit-font-smoothing:antialiased
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
.site{width:100%;padding:0 var(--gutter) 80px}
.section{margin-bottom:32px}
.section__hd{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px}
.section__title{font-size:18px;font-weight:700}
/* ===== Header（与前面页面保持一致） ===== */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
@media (max-width:640px){ .site-header{position:static} }
.site-header__bar{
height:var(--header-h);display:grid;gap:12px;align-items:center;
grid-template-columns:auto 1fr auto; padding:0 var(--gutter);
}
.logo{margin:0;line-height:1;font-weight:700;font-size:clamp(26px,5.6vw,36px)}
.logo a{display:inline-flex;align-items:center}
.search{position:relative;justify-self:center;min-width:0}
.search input{
width:clamp(280px, 48vw, 720px); height:44px; border:1px solid var(--line);
border-radius:10px; padding:0 14px 0 44px; background:#fff; outline:none; font-size:16px;
box-shadow:0 1px 0 rgba(0,0,0,.02) inset
}
.search .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#9aa0a6}
.header-actions{display:flex;gap:12px;white-space:nowrap}
.btn{height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#fff}
.btn--primary{background:#0b141a;color:#fff;border-color:#0b141a}
.hamburger{display:none;background:transparent;border:0;padding:8px}
.hamburger svg{width:24px;height:24px}
/* ===== 页面布局（主列居中，侧栏靠右且粘性；避免小屏错位） ===== */
.wrap{
display:grid;
gap: var(--content-gap);
margin-top:24px;
grid-template-columns: minmax(0, var(--content-max)) minmax(220px, var(--left-col));
align-items:start;
max-width: calc(var(--content-max) + var(--left-col) + var(--content-gap));
margin-left:auto; margin-right:auto;
}
.wrap > *{ min-width: 0 }
/* 正文 */
.article{
width:100%;
display:flex; flex-direction:column; align-items:center;
}
.hero{
width:min(100%, var(--content-max));
border-radius:var(--thumb-radius); overflow:hidden; background:transparent;
}
.hero img{width:100%;height:auto;object-fit:cover}
.title{
width:min(100%, var(--content-max));
font-size:var(--h1-size); line-height:1.35; font-weight:800;
margin:22px auto 12px;
}
.meta{
width:min(100%, var(--content-max));
color:var(--muted); font-size:14px; display:flex; align-items:center; gap:14px;
margin-bottom:12px;
}
.meta .avatar{width:28px;height:28px;border-radius:50%;overflow:hidden}
.content{
width:min(100%, var(--content-max));
font-size:var(--p-size); color:#111; line-height:1.95;
}
.content p{margin:1em 0}
.content h2{font-size:clamp(18px,2.2vw,24px);margin:1.6em 0 .6em}
.content img{border-radius:10px}
/* 底部标签（小圆角，不是太圆） */
.tags{width:min(100%, var(--content-max)); display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 18px}
.tag{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:13px}
.tag svg{width:14px;height:14px}
.tags--end{ width:min(100%, var(--content-max)); margin:18px auto 12px; }
/* 上一篇 / 下一篇 */
.pager{width:min(100%, var(--content-max)); display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px auto 8px}
.pager a{display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; text-decoration:none}
.pager .label{color:var(--muted); font-size:12px}
.pager .arrow{width:18px; height:18px}
/* 左侧导航样式 */
.side{
position:sticky;top:calc(var(--header-h) + 8px);align-self:start;
border-right:1px solid var(--line);padding-right:12px;
max-height:calc(100vh - var(--header-h) - 24px);overflow:auto
}
.side h3{margin:10px 0;font-size:14px}
.side ul{list-style:none;margin:0;padding:0}
.side li{margin:2px 0}
.side li a{
display:flex;align-items:center;justify-content:space-between;
padding:10px 8px;border-radius:8px;color:#111
}
.side li a:hover{background:var(--chip)}
.side .active a{background:#eef8ee;color:#0a7f0a}
/* ===== 右侧浮动栏（作者卡片 + 推荐阅读，一起粘性） ===== */
.side2{ position:sticky; top:calc(var(--header-h) + 12px); align-self:start; display:flex; flex-direction:column; gap:16px; margin-right:clamp(0px,4vw,36px) }
.author-card{ border:1px solid var(--line); border-radius:12px; padding:16px; background:#fff }
.author-back{ display:inline-flex; align-items:center; gap:8px; color:#111; margin-bottom:8px }
.author-back svg{width:18px;height:18px}
.author-row{display:flex; align-items:center; gap:12px; margin-top:8px}
.author-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;background:#f2f2f2;flex:0 0 auto}
.author-name{font-weight:700}
.author-sub{color:var(--muted);font-size:12px;margin-top:2px}
.follow{margin-top:12px}
.follow .btn{height:34px;border-radius:8px}
.small-metrics{display:flex;gap:14px;color:var(--muted);font-size:13px;margin-top:10px}
/* 侧栏推荐阅读（列表版，保留现有风格） */
.side-rec{ border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff }
.side-rec h3{ margin:0 0 10px; font-size:16px; font-weight:700 }
.rec-list{ display:flex; flex-direction:column; gap:12px }
.rec-item{ display:flex; gap:10px; text-decoration:none; color:inherit }
.rec-thumb{ width:84px; height:56px; border-radius:8px; overflow:hidden; flex:0 0 auto }
.rec-thumb img{ width:100%; height:100%; object-fit:cover }
.rec-body{ display:flex; flex-direction:column }
.rec-title{ font-weight:600; font-size:14px; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
.rec-meta{ color:var(--muted); font-size:12px; margin-top:4px }
/* 侧栏推荐阅读（小网格卡片试样） */
.side-rec--grid{ padding:14px }
.rec-grid-mini{ display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(var(--mini-card-min), 1fr)); }
.mini-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff }
.mini-card__thumb{ aspect-ratio: 3 / 2; }
.mini-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.mini-card__title{ padding:8px 10px; font-size:13px; font-weight:600; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
/* ===== 底部推荐阅读（改为更自适应） ===== */
.recommend{width:100%; margin:34px auto 0}
.recommend h3{margin:0 0 12px; font-size:18px; font-weight:700}
.rec-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(var(--rec-grid-min), 1fr))}
.tile{min-width:0}
.tile__thumb{display:block;border-radius:var(--thumb-radius);overflow:hidden;background:transparent;border:0;outline:0;aspect-ratio:16/9}
.tile__thumb img{width:100%;height:100%;object-fit:cover;background:#fff}
.tile__title{font-weight:700;font-size:15px;line-height:1.6;margin-top:8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tile__meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin-top:6px}
.tile__avatar{width:20px;height:20px;border-radius:50%;overflow:hidden;flex:0 0 auto}
/* ===== 响应式 ===== */
@media (max-width:1240px){/* 提前收缩为单列，避免主列过窄 */
:root{ --rec-grid-min: 200px; --mini-card-min: 130px; }
.wrap{ grid-template-columns: 1fr; max-width: min(100%, calc(var(--content-max) + 2*var(--gutter))); }
.side{ position:static; order:2; width:min(100%, var(--content-max)); margin:16px auto 0 }
.author-card, .side-rec{ width:100% }
}
}
.side{position:static; order:2; width:100%; margin:16px 0 0}
.author-card, .side-rec{width:100%}
}
@media (max-width:820px){
:root{ --rec-grid-min: 180px; --mini-card-min: 120px; }
}
@media (max-width:640px){
.site-header__bar{
grid-template-columns:1fr auto; grid-template-rows:auto auto;
height:auto; padding:8px var(--gutter)
}
.search{grid-column:1/-1; grid-row:2; margin:8px 0 10px; justify-self:stretch; width:100%}
.search input{width:100%; max-width:100%}
.hamburger{display:inline-flex}
:root{ --rec-grid-min: 160px; --mini-card-min: 110px; }
}
@media (max-width:480px){
.header-actions .btn--ghost{display:none}
.author-row .author-name{font-size:15px}
:root{ --rec-grid-min: 140px; --mini-card-min: 100px; }
}
/* --- End --- */
/* 手机抽屉（如需） */
.only-mobile{display:none}
.only-desktop{display:block}
.side-wrap[aria-hidden="true"]{display:none}
.side-wrap{
position:fixed;inset:0 0 0 auto;width:min(84vw,320px);
background:#fff;border-left:1px solid var(--line);z-index:60;padding:16px
}
.side-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:55}
.side-mask.show{display:block}
@media (max-width:1024px){ .only-mobile{display:block} .only-desktop{display:none} }
/* --- End --- */