/* 左右分栏布局（构建产物专用）：左侧目录常驻，右侧内容 + 顶部搜索 */
body { margin: 0; padding: 0; }

/* 容器铺满窗口：左栏固定 288px 贴左，右栏吃掉剩余宽度（宽屏两侧不再留白） */
.layout {
  display: flex;
  align-items: flex-start;
}

/* ---- 左栏：目录树 ---- */
.side {
  position: sticky;
  top: 0;
  flex: 0 0 288px;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 18px 10px 40px 18px;
  border-right: 1px solid #e8e8e8;
  background: #fafafa;
  font-size: 14px;
}
.side-brand {
  display: block;
  margin: 0 0 14px 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: bold;
  color: #3939AC;
  text-decoration: none;
}
.side-brand:hover { text-decoration: underline; }
.side-tree ul { list-style: none; margin: 0; padding-left: 11px; }
.side-tree > ul { padding-left: 0; }
.side-tree li { margin: 1px 0; line-height: 1.55; }
.side-tree a {
  display: block;
  padding: 3px 8px;
  border-radius: 5px;
  color: #333;
  text-decoration: none;
}
.side-tree a:hover { background: #eef1fb; color: #2647a8; }
.side-tree a.on { background: #e2e8fb; color: #1f3fa8; font-weight: bold; }
.side-tree .grp {
  display: block;
  padding: 7px 8px 2px 8px;
  font-size: 13px;
  font-weight: bold;
  color: #666;
}

/* ---- 右栏：搜索条 + 面包屑 + 正文 ---- */
.doc { flex: 1 1 auto; min-width: 0; }
.doc-top {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 28px 6px 28px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
/* 搜索条与面包屑跟着正文一起居中，与正文左右边缘对齐（横线仍横贯整栏） */
.doc-top .doc-search,
.doc-top .site-nav {
  max-width: 956px;
  margin-left: auto;
  margin-right: auto;
}
.doc-search { position: relative; margin: 0 0 6px 0; }
.doc-search input[type=search] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: 15px;
  border: 1px solid #ccd;
  border-radius: 8px;
  outline: none;
}
.doc-search input[type=search]:focus {
  border-color: #8ea2e0;
  box-shadow: 0 0 0 3px rgba(57, 57, 172, .12);
}
.doc-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 62vh;
  overflow: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #dfe3ee;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(30, 40, 80, .14);
}
.qr-item { display: block; padding: 8px 10px; border-radius: 6px; color: #222; text-decoration: none; }
.qr-item:hover, .qr-item:focus { background: #f2f5fd; }
.qr-item b { display: block; font-size: 14.5px; color: #2647a8; }
.qr-item i { display: block; margin: 1px 0 3px 0; font-size: 12px; font-style: normal; color: #9aa0ad; }
.qr-item span { display: block; font-size: 13px; line-height: 1.6; color: #444; }
.qr-item em { font-style: normal; background: #FFF3B0; }
.qr-more {
  display: block;
  margin-top: 4px;
  padding: 9px 0;
  border-top: 1px solid #eee;
  text-align: center;
  font-size: 13px;
  color: #2647a8;
  text-decoration: none;
}
.qr-more:hover { background: #f4f6fd; }
.qr-none { padding: 14px; font-size: 13px; color: #888; }

/* 正文容器：限宽在这里，而不是 body；居中让左右白边均分 */
.doc-inner { max-width: 900px; margin: 0 auto; padding: 18px 28px 10px 28px; }

/* 页脚：外层分隔横线横贯整个右栏，内层 .foot-in 与正文同宽同内边距以对齐左边缘 */
.doc > .site-foot { margin: 30px 0 0 0; padding: 14px 0 24px 0; }
.doc > .site-foot .foot-in { max-width: 900px; margin: 0 auto; padding: 0 28px; }
/* 404 页不套 .doc 容器，页脚保持原样 */
.notfound .foot-in { max-width: none; padding: 0; }

/* ---- 窄屏：左栏变抽屉 ---- */
.side-toggle { display: none; }

@media (max-width: 900px) {
  .layout { display: block; }
  /* 抽屉：目录字号 20px（宽屏 14px 的 1.4 倍），真机实测 28px 偏大 */
  .side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    width: min(88vw, 360px);
    height: 100%;
    padding: 16px 8px 40px 14px;
    font-size: 20px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, .18);
  }
  .side.open { transform: none; }
  .side-brand { margin: 0 0 12px 0; font-size: 18px; }
  .side-tree ul { padding-left: 12px; }
  .side-tree li { margin: 2px 0; line-height: 1.4; }
  .side-tree a { padding: 5px 8px; }
  .side-tree .grp { padding: 9px 8px 2px 8px; font-size: 18px; }
  /* 遮罩用 body 伪元素：fixed 定位不受左栏滚动容器影响 */
  body.side-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(0, 0, 0, .28);
  }
  .side.open ~ .side-toggle { left: auto; right: 12px; }
  .side-toggle {
    display: block;
    position: fixed;
    left: 12px;
    bottom: 16px;
    z-index: 21;
    padding: 10px 18px;
    font-size: 19px;
    color: #fff;
    background: #3939AC;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(57, 57, 172, .35);
  }
  .doc-top { padding: 8px 14px 4px 14px; }
  .doc-top .site-nav { font-size: 16px; }
  /* 输入框不得小于 16px：iOS 聚焦时会自动放大页面 */
  .doc-search input[type=search] { padding: 10px 12px; font-size: 20px; }
  .qr-item b { font-size: 19px; }
  .qr-item i { font-size: 15px; }
  .qr-item span { font-size: 17px; }
  .qr-more, .qr-none { font-size: 17px; }
  /* 右栏正文 20px：源 catalog.css 把正文写死成 15/16px/12pt，需逐个拉平 */
  .doc-inner { padding: 14px 14px 10px 14px; font-size: 20px; }
  .doc-inner .pBody, .doc-inner .pBodyRelative,
  .doc-inner .pDefault, .doc-inner .pWarning, .doc-inner .pAttention, .doc-inner .pAttentionBody,
  .doc-inner .pIndented1, .doc-inner .pIndented2, .doc-inner .pIndented3,
  .doc-inner .pIndented4, .doc-inner .pIndented5, .doc-inner .pIndentedRelative,
  .doc-inner .pSmartList1, .doc-inner .pSmartList2, .doc-inner .pSmartList3,
  .doc-inner .pSmartList4, .doc-inner .pSmartList5,
  .doc-inner .pCellBody, .doc-inner .pCellHeading,
  .doc-inner .pPopupAppend, .doc-inner .pStep, .doc-inner .pToDo,
  .doc-inner .pPreformatted, .doc-inner .pPreformattedRelative { font-size: 20px; }
  .doc-inner .pCaption, .doc-inner figcaption { font-size: 17px; }
  .doc-inner h1 { font-size: 32px; }
  .doc-inner h2 { font-size: 28px; }
  .doc-inner h2.sec-title { font-size: 24px; padding-left: 12px; }
  .doc-inner h3 { font-size: 24px; }
  .doc-inner h4, .doc-inner h5, .doc-inner h6 { font-size: 21px; }
  .doc > .site-foot { padding: 12px 0 20px 0; }
  .doc > .site-foot .foot-in { padding: 0 14px; font-size: 15px; }
}

@media print {
  .layout { display: block; }
  .side, .side-toggle, .doc-top { display: none; }
  .doc-inner { max-width: none; padding: 0; }
  .doc > .site-foot .foot-in { max-width: none; padding: 0; }
}