/* 完整CSS - 直角与细线视觉识别；石墨灰与芥末黄配色 */
:root{
  --bg:#f8f9fa;
  --surface:#ffffff;
  --text:#222428; /* 石墨灰 */
  --muted:#6b6f73;
  --accent:#d4b000; /* 芥末黄（沉稳） */
  --line:rgba(34,36,40,0.12);
  --max-desktop:1200px;
  --gap:24px;
  --radius:0px; /* 直角 */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 全页基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{margin:0 auto;padding:20px;width:100%;}

/* header 工具栏 - 左对齐紧凑品牌栏 */
.site-header{background:transparent;border-bottom:1px solid var(--line)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.home-link{color:var(--text);text-decoration:none;font-weight:700}
.divider{color:var(--muted)}
.breadcrumb{color:var(--muted);font-size:14px}
.tools .now{color:var(--muted);font-size:13px}

/* 广告块为独立容器，不悬浮，不遮挡 */
.ad{padding:12px 0;color:var(--muted);font-size:13px}
.ad-top,.ad-middle,.ad-bottom{border-top:1px solid var(--line);border-bottom:0}

/* Headline split */
.headline-split{display:grid;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.headline-left .eyebrow{color:var(--accent);font-size:13px;font-weight:600;letter-spacing:0.02em}
h1{margin:8px 0 6px 0;font-size:24px;line-height:1.2;font-weight:700}
.meta{color:var(--muted);font-size:13px}
.headline-right .summary{color:var(--text);font-size:15px}
.headline-right h2.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 内容区：桌面7/5 两栏布局；手机为单列顺序 */
.content-grid{display:block;padding:24px 0;gap:28px}
.article{background:transparent;border:0}
.article-body{color:var(--text);font-size:16px}

.side{margin-top:18px}
.side h3{font-size:15px;margin:0 0 10px 0;color:var(--text)}
/* FAQ pattern: 无卡片的 details 折叠 */
.faq-list details{border-top:1px solid var(--line);padding:10px 0;cursor:pointer}
.faq-list summary{list-style:none;outline:none;cursor:pointer;font-weight:600;color:var(--text);}
.faq-list details[open] summary{color:var(--accent)}
.faq-list details p{margin:8px 0 0 0;color:var(--muted)}

.related-list{padding-left:18px;color:var(--muted)}
.related-list li{margin:8px 0}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:18px 0;background:transparent}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.legal{color:var(--muted);font-size:13px}

/* TYPOGRAPHY & SURFACE: 不使用卡片，保持大留白、无圆角、细线 */
p,ul,ol,li{max-width:65ch}
ul,ol{margin:0 0 16px 18px}
a{color:var(--accent);text-decoration:none}
a:focus,a:hover{text-decoration:underline}

/* Accessibility: focus outline */
:focus{outline:2px solid rgba(212,176,0,0.18);outline-offset:2px}

/* Desktop 专属布局（必须包含 min-width:1024px 规则） */
@media (min-width:1024px){
  .container{width:clamp(1120px,84vw,1440px);padding:28px}
  .headline-split{grid-template-columns:1fr 1fr;padding:36px 0}
  h1{font-size:28px}
  .content-grid{display:grid;grid-template-columns:7fr 5fr;align-items:start;gap:36px;padding:28px 0}
  .article-body{font-size:17px}
  .side{border-left:1px solid var(--line);padding-left:28px;margin-top:0}
  .ad-top{padding-left:0;padding-right:0}
}

/* Mobile 专属布局（必须包含 max-width:767px 规则） */
@media (max-width:767px){
  html,body{font-size:16px}
  .container{padding:14px}
  .headline-split{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .headline-right{order:2}
  .headline-left{order:1}
  h1{font-size:20px}
  .content-grid{display:block;padding:12px 0}
  .side{margin-top:18px;border-left:none;padding-left:0}
  .ad{font-size:13px;padding:10px 0}
  /* 320px 时确保不横向滚动 */
  body, .container{min-width:0;overflow-x:hidden}
}

/* 视觉签名：仅直角与细线，禁止圆角与重阴影 */
*{border-radius:var(--radius)}