/* 左侧文章列表（可展开，不随滚动粘性） */
.left-nav {
  /* 与 zhong.css 的左列宽度保持一致 */
  width: 240px;
  padding: 8px 0 8px 2px;
  box-sizing: border-box;
  /* 左侧高亮与悬浮的统一变量 */
  --ln-bg-hover: rgba(135, 206, 235, 0.28); /* 天蓝色半透明（SkyBlue ~ #87CEEB） */
  --ln-bg-active: #d1d5db; /* 当前页面灰色更明显 */
  --ln-bg-right-gap: 12px; /* 高亮/悬浮条右侧收窄的距离 */
  /* 新增：hover 灰条四边可控（应用于无二级的一级标题与二级标题） */
  --ln-hover-left-l1: 6px;   /* 一级标题 hover 左侧留白 */
  --ln-hover-left-l2: 6px;   /* 二级标题 hover 左侧留白 */
  --ln-hover-right: 20px;     /* hover 灰条右侧收窄 */
  --ln-hover-top: 6px;        /* hover 灰条上侧内边距 */
  --ln-hover-bottom: 6px;     /* hover 灰条下侧内边距 */
  /* 新增：active（URL 匹配）高亮条四边可控 */
  --ln-active-left: 0px;     /* 左侧距离文字 */
  --ln-active-right: 20px;    /* 右侧距离文字 */
  --ln-active-top: 3px;      /* 上侧距离文字 */
  --ln-active-bottom: 3px;   /* 下侧距离文字 */
  --ln-active-radius: 5px;   /* 高亮条圆角（0 表示矩形） */
  --ln-active-left-section: 0px; /* 一级栏目条（.ln-summary）左侧额外留白 */
}

.ln-section {
  margin-bottom: 8px;
}

.ln-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-weight: 500; /* 一级标题不加粗 */
  font-size: 16px; /* 一级标题字号略小 */
  border-radius: 6px;
  position: relative; /* 供高亮伪元素定位 */
  z-index: 0;
}

.ln-summary .ln-title-link { color: #111827; text-decoration: none; flex: 1; position: relative; z-index: 0; }
.ln-summary .ln-title-link:hover {
  /* 悬浮效果与其它标题统一：右侧略微收窄 */
  background-image: linear-gradient(
    to right,
    var(--ln-bg-hover) 0,
    var(--ln-bg-hover) calc(100% - var(--ln-bg-right-gap)),
    transparent calc(100% - var(--ln-bg-right-gap)),
    transparent 100%
  );
}
.ln-summary .arrow-btn { border: none; background: transparent; cursor: pointer; color: #6b7280; padding: 0; line-height: 1; }
.ln-summary .arrow-btn .arrow { transition: transform .2s ease; display: inline-block; font-size: 12px; }

.ln-section[open] .ln-summary .arrow { transform: rotate(90deg); }

.ln-level2 {
  display: block;
  padding: 2px 0 6px 40px; /* 二级缩进 */
}

.ln-link {
  display: block;
  color: #111827; /* 黑色文本 */
  text-decoration: none;
  padding: 6px 8px;
  font-size: 15px; /* 二级标题字号略小 */
  border-radius: 6px;
  position: relative; /* 供高亮伪元素定位 */
  z-index: 0;
}
.ln-link:hover {
  /* 悬浮效果与有二级标题的一级标题一致：右侧略微收窄 */
  background-image: linear-gradient(
    to right,
    var(--ln-bg-hover) 0,
    var(--ln-bg-hover) calc(100% - var(--ln-bg-right-gap)),
    transparent calc(100% - var(--ln-bg-right-gap)),
    transparent 100%
  );
}

/* 顶级无二级标签：直接可点击卡片 */
.ln-top-link {
  display: block;
  padding: 6px 8px;
  font-weight: 500; /* 顶级无二级标题也不加粗 */
  font-size: 16px;
  color: #111827;
  text-decoration: none;
  margin-bottom: 8px;
  border-radius: 6px;
  position: relative; /* 供高亮伪元素定位 */
  z-index: 0;
}
.ln-top-link:hover {
  /* 悬浮效果与有二级标题的一级标题一致：右侧略微收窄 */
  background-image: linear-gradient(
    to right,
    var(--ln-bg-hover) 0,
    var(--ln-bg-hover) calc(100% - var(--ln-bg-right-gap)),
    transparent calc(100% - var(--ln-bg-right-gap)),
    transparent 100%
  );
}

/* 当前页面高亮（灰底） */
/* 当前页面高亮（灰底），通过伪元素实现右侧也保持圆角 */
.ln-link.active::before,
.ln-title-link.active::before,
.ln-top-link.active::before {
  content: "";
  position: absolute;
  left: var(--ln-active-left);
  top: var(--ln-active-top);
  bottom: var(--ln-active-bottom);
  width: calc(100% - var(--ln-active-left) - var(--ln-active-right));
  background: var(--ln-bg-active);
  border-radius: var(--ln-active-radius);
  z-index: -1;
}

/* 当前页面 URL 对应的条目：不可点击、不可 hover（保持高亮外观但禁用交互） */
.ln-link.active,
.ln-title-link.active,
.ln-top-link.active {
  pointer-events: none;
  cursor: default;
}

/* 当前页面所在的一级栏目高亮（灰色条） */
.ln-section.active .ln-summary::before {
  /* 当前页面所在的一级栏目高亮（灰色条），右侧也保持圆角 */
  content: "";
  position: absolute;
  left: var(--ln-active-left-section);
  top: var(--ln-active-top);
  bottom: var(--ln-active-bottom);
  width: calc(100% - var(--ln-active-left-section) - var(--ln-active-right));
  background: var(--ln-bg-active);
  border-radius: var(--ln-active-radius);
  z-index: -1;
}

/* 保持选中（根据 URL 匹配）的高亮样式不变；仅统一 hover 的视觉效果于上方各 hover 规则 */

/* 统一 hover 视觉：将无二级的一级标题与所有二级标题的 hover 改为矩形灰条且四边可控 */
.ln-top-link:hover { background: none; }
.ln-top-link:hover::before {
  content: "";
  position: absolute;
  left: var(--ln-hover-left-l1);
  top: var(--ln-hover-top);
  bottom: var(--ln-hover-bottom);
  width: calc(100% - var(--ln-hover-left-l1) - var(--ln-hover-right));
  background: var(--ln-bg-hover);
  border-radius: 0; /* 四角矩形 */
  z-index: -1;
}

.ln-link:hover { background: none; }
.ln-link:hover::before {
  content: "";
  position: absolute;
  left: var(--ln-hover-left-l2);
  top: var(--ln-hover-top);
  bottom: var(--ln-hover-bottom);
  width: calc(100% - var(--ln-hover-left-l2) - var(--ln-hover-right));
  background: var(--ln-bg-hover);
  border-radius: 0; /* 四角矩形 */
  z-index: -1;
}

/* 布局容器在中间样式文件里定义，这里只关注左栏外观和展开/收起效果 */