/* DDKK 文章布局样式 - 基于 Ant Design 5.x 设计规范 */
/* 所有选择器均使用完整前缀，避免样式冲突 */

/* ==================== 容器布局 ==================== */
.ddkk-article-wrapper {
  max-width: 1200px; /* 默认最大宽度，适用于屏幕宽度小于 1366px 的情况 */
  margin: 0 auto;
  padding: 60px 24px 24px 24px; /* 顶部预留导航栏高度及间距 */
  /* 允许子元素使用 sticky 定位 */
  overflow: visible;
}

.ddkk-article-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  /* 允许子元素使用 sticky 定位 */
  overflow: visible;
}

/* ==================== 左侧：文章教程列表 ==================== */
.ddkk-article-sidebar {
  flex-shrink: 0;
  width: 350px;
  min-width: 350px;
  position: sticky;
  top: 60px; /* 与导航栏保持固定间距 */
  height: calc(100vh - 80px - 10px);
  max-height: calc(100vh - 80px - 10px);
  background: #ffffff;
  border-radius: 4px;
  /* 顶部无内边距，使内部 header 紧贴容器顶部 */
  padding: 0 12px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 侧边栏显示/隐藏逻辑：桌面端（≥1200px）通过 wrapper 的 left/right 类控制，详见下方媒体查询 */

/* ==================== 侧边栏切换按钮（竖条） ==================== */
.ddkk-sidebar-collapse-toggler {
  flex-shrink: 0;
  width: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  background: rgba(255, 255, 255, 0);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  margin-left: -24px; /* 负边距填充左侧间隙 */
  margin-right: -24px; /* 负边距填充右侧间隙 */
  transition: background-color 0.2s;
  z-index: 10;
}

.ddkk-sidebar-collapse-toggler:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ddkk-sidebar-collapse-toggler:active {
  background: rgba(0, 0, 0, 0.08);
}

/* 箭头样式 */
.ddkk-sidebar-collapse-toggler .arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.ddkk-sidebar-collapse-toggler .arrow svg {
  width: 24px;
  height: 24px;
  stroke: rgba(0, 0, 0, 0.65);
  fill: none;
}

/* 侧边栏展开状态：箭头指向左侧 */
.ddkk-article-wrapper.left .ddkk-sidebar-collapse-toggler .arrow.left {
  transform: rotate(0deg);
}

/* 侧边栏收起状态：箭头指向右侧 */
.ddkk-article-wrapper.right .ddkk-sidebar-collapse-toggler .arrow.left {
  transform: rotate(180deg);
}

/* ==================== 目录切换按钮（竖条） ==================== */
.ddkk-toc-collapse-toggler {
  flex-shrink: 0;
  width: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  background: rgba(255, 255, 255, 0);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  margin-left: -24px; /* 负边距填充左侧间隙 */
  margin-right: -24px; /* 负边距填充右侧间隙 */
  transition: background-color 0.2s;
  z-index: 10;
}

.ddkk-toc-collapse-toggler:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ddkk-toc-collapse-toggler:active {
  background: rgba(0, 0, 0, 0.08);
}

/* 箭头样式 */
.ddkk-toc-collapse-toggler .arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.ddkk-toc-collapse-toggler .arrow svg {
  width: 24px;
  height: 24px;
  stroke: rgba(0, 0, 0, 0.65);
  fill: none;
}

/* 目录展开状态：箭头指向右侧 */
.ddkk-article-wrapper.toc-left .ddkk-toc-collapse-toggler .arrow.right {
  transform: rotate(0deg);
}

/* 目录收起状态：箭头指向左侧 */
.ddkk-article-wrapper.toc-right .ddkk-toc-collapse-toggler .arrow.right {
  transform: rotate(180deg);
}

/* ==================== 中间：文章内容 ==================== */
.ddkk-article-main {
  flex: 1;
  min-width: 0;
  padding-top: 20px; 
  background: #ffffff;
  border-radius: 4px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 32px;
  /* 使用 sticky 定位，与左右两侧保持一致 */
  position: sticky;
  top: 60px; /* 与导航栏保持固定间距 */
  height: calc(100vh - 80px - 45px);
  max-height: calc(100vh - 80px - 45px);
  overflow-y: auto;
  overflow-x: hidden;
  /* 启用硬件加速滚动，提升移动端性能 */
  -webkit-overflow-scrolling: touch;
}

/* 自定义滚动条样式，与整体设计保持一致 */
.ddkk-article-main::-webkit-scrollbar {
  width: 6px;
}

.ddkk-article-main::-webkit-scrollbar-track {
  background: transparent;
}

.ddkk-article-main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.ddkk-article-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* 面包屑导航 */
.ddkk-article-main .ddkk-breadcrumb {
  margin-bottom: 16px;
}

/* 页面标题区域 */
.page-title {
  margin: 0 auto;
  padding-top: 5px;
  padding-left: 24px;
  padding-right: 24px;
  margin-bottom: 0;
  margin-left: -24px;
  margin-right: -24px;
  align-self: flex-start;
}


.page-title h1 {
  font-size: 24px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.activation-page-title h1 {
  font-size: 24px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.page-info {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  margin-bottom: 0;
}

.page-info .blog-post-meta {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  margin-right: 16px;
}

.page-info .blog-post-meta a {
  color: #1677ff;
  text-decoration: none;
  transition: color 0.2s;
}

.page-info .blog-post-meta a:hover {
  color: #0958d9;
}

/* 页面阅读量统计样式 */
.page-info #busuanzi_value_page_pv {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 500;
}

/* 内容区域 */
.row-content {
  margin: 0 auto;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
}

/* 目录隐藏时，文章内容区域自动扩展以充分利用空间 */

/* ==================== 文章锁定器（阅读全文功能） ==================== */
#locker {
  position: relative;
  z-index: 10000;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 50px;
}

#locker .mask {
  width: 100%;
  height: 200px;
  z-index: 10000;
  margin-top: -200px;
  /* 柔和渐变：从透明到半透明再到不透明，营造自然过渡效果 */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(60%, rgba(255, 255, 255, 0.6)), color-stop(90%, rgba(255, 255, 255, 0.95)), to(#fff));
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.95) 90%, #fff 100%);
}

#locker .info {
  background: white;
}

.text-center {
  text-align: center;
}

/* ==================== 兼容性按钮样式 ==================== */
.layui-btn {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  box-sizing: border-box;
}

.layui-btn-danger {
  background-color: #0781fc;
}

.layui-btn-lg {
  height: 44px;
  line-height: 44px;
  padding: 0 25px;
  font-size: 16px;
}

/* ==================== 兼容性输入框样式 ==================== */
.layui-input,
.layui-textarea {
  display: block;
  width: 100%;
  padding-left: 10px;
}

.layui-input,
.layui-select,
.layui-textarea {
  height: 38px;
  line-height: 1.3;
  line-height: 38px\9;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  border-radius: 2px;
}

/* ==================== 右侧：文章目录 ==================== */
.ddkk-article-toc {
  flex-shrink: 0;
  width: 300px;
  position: sticky;
  top: 60px; /* 与左侧列表保持一致的顶部间距 */
  max-height: calc(100vh - 80px - 18px);
  /* 允许内容溢出，由内部元素处理滚动 */
  overflow: visible;
  background: #ffffff;
  border-radius: 4px;
  padding: 12px;
  padding-left: 24px; /* 基础内边距 + 为目录指示条预留空间 */
  /* 使用 flex 布局，使内部元素充满容器高度 */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px - 18px);
}

/* 移动端目录按钮默认隐藏，仅在特定断点下显示 */
.ddkk-toc-toggler {
  display: none;
}

/* ==================== 响应式设计 ==================== */
/* 小屏幕（<1200px）：采用抽屉式布局 */
@media (max-width: 1199.98px) {
  .ddkk-article-wrapper {
    padding: 10px;
    padding-top: 45px;
    /* 允许子元素使用 sticky 定位 */
    overflow: visible;
  }

  .ddkk-article-container {
    padding-top: 30px;
    gap: 0;
    /* 允许子元素使用 sticky 定位 */
    overflow: visible;
  }

  /* 左侧边栏 - 移动端固定定位，抽屉宽度为屏幕的 80% */
  .ddkk-article-sidebar {
    position: fixed !important;
    top: 59px;
    left: 0;
    width: 80vw !important;
    max-width: 80%;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    max-height: none;
    /* 提高层级，确保在移动端显示在文章锁定器之上 */
    z-index: 10001 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    /* 移动端侧边栏内容可滚动 */
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    display: block !important;
    padding: 0 12px 16px !important;
    flex-direction: row !important;
  }

  .ddkk-article-sidebar.show {
    transform: translateX(0);
  }

  /* 移动端隐藏侧边栏切换按钮 */
  .ddkk-sidebar-collapse-toggler {
    display: none !important;
  }

  /* 移动端隐藏目录切换按钮 */
  .ddkk-toc-collapse-toggler {
    display: none !important;
  }

  .ddkk-article-wrapper:not(.left) .ddkk-article-sidebar {
    width: 80vw !important;
    min-width: 80vw !important;
  }

  /* 侧边栏遮罩层 */
  .ddkk-article-sidebar-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    /* 提高层级，位于文章锁定器之上但低于侧边栏 */
    z-index: 10000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
                visibility 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }

  .ddkk-article-sidebar-mask.show {
    opacity: 1;
    visibility: visible;
  }

  /* 抽屉打开时禁止页面滚动 */
  body.ddkk-article-sidebar-open {
    overflow: hidden !important;
  }

  /* 主内容区域 - 移动端 */
  .ddkk-article-main {
    padding-top: 10px;
    width: 100%;
    /* 移动端使用相对定位，采用正常文档流布局 */
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-left: 14px;
    padding-right: 14px;

  }

  /* 右侧目录 - 小屏隐藏（具体隐藏逻辑由下方媒体查询统一控制） */
  .ddkk-article-toc {
    display: none;
  }


  /* 移动端页面标题区域 - 使用相对定位 */
  .page-title {
    position: relative !important;
    top: auto !important;
    padding-left: 24px;
    padding-right: 24px;
  }

  .page-title h1 {
    font-size: 20px;
  }

  .activation-page-title h1 {
    font-size: 20px;
  }

  .activation-description p {
    font-size: 16px;
  }

  .row-content {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 60px;
  }
}

/* ≥1200px：三列布局（左侧列表 + 中间内容 + 右侧目录） */
@media (min-width: 1200px) {
  .ddkk-article-wrapper {
    padding: 24px;
    padding-top: 65px;
  }

  .ddkk-article-container {
    gap: 24px;
  }

  .ddkk-article-sidebar {
    display: block;
    /* 桌面端通过 left/right 类控制侧边栏展开/收起 */
    transition: none;
  }

  /* 桌面端：侧边栏收起状态（wrapper 有 right 类） */
  .ddkk-article-wrapper.right .ddkk-article-sidebar {
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
  }

  .ddkk-article-toc {
    display: block;
  }

  /* 桌面端：目录收起状态（wrapper 有 toc-right 类） */
  .ddkk-article-wrapper.toc-right .ddkk-article-toc {
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
  }

  /* 桌面端隐藏遮罩层 */
  .ddkk-article-sidebar-mask {
    display: none !important;
  }

  /* 桌面端隐藏移动端目录相关元素 */
  .ddkk-toc-toggler {
    display: none !important;
  }

  .ddkk-article-toc-mobile {
    display: none !important;
  }

  .ddkk-article-toc-mask {
    display: none !important;
  }
}

/* 窗口宽度 1200px-1365px：隐藏右侧目录，中间内容区域占满剩余空间 */
@media (min-width: 1200px) and (max-width: 1365.98px) {
  .ddkk-article-toc {
    display: none !important;
  }
}

/* 1366px-1549px：目录宽度调整为 250px */
@media (min-width: 1366px) and (max-width: 1549.98px) {
  .ddkk-article-toc {
    width: 250px;
  }
}

/* 移动端文章目录按钮与目录抽屉（仅 <768px） */
@media (max-width: 767.98px) {
  /* 移动端目录按钮 - 固定在导航栏下方 */
  .ddkk-toc-toggler {
    position: fixed;
    top: 73px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 4px; /* 正方形，圆角 */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* 提高层级，确保在移动端显示在文章锁定器之上 */
    z-index: 10001 !important;
    transition: top 0.2s, right 0.2s, transform 0.3s;
    padding: 0;
  }

  .ddkk-toc-toggler:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .ddkk-toc-toggler:active {
    transform: scale(0.95);
  }

  .ddkk-toc-toggler svg {
    width: 18px;
    height: 18px;
    color: rgba(0, 0, 0, 0.65);
  }

  /* 移动端目录抽屉 */
  .ddkk-article-toc-mobile {
    position: fixed;
    top: -6px;
    right: 0;
    width: 80vw;
    max-width: 80%;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    /* 提高层级，确保在移动端显示在文章锁定器之上 */
    z-index: 10001 !important;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ddkk-article-toc-mobile.show {
    transform: translateX(0);
  }

  /* 目录抽屉头部 */
  .ddkk-toc-mobile-header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
  }

  /* 目录抽屉标题 */
  .ddkk-toc-mobile-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
    margin: 0;
    flex: 1;
  }

  .ddkk-toc-mobile-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
    padding: 0;
    margin-left: 8px;
    flex-shrink: 0;
  }

  .ddkk-toc-mobile-close:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  .ddkk-toc-mobile-close:active {
    background: rgba(0, 0, 0, 0.1);
  }

  .ddkk-toc-mobile-close svg {
    width: 20px;
    height: 20px;
    color: rgba(0, 0, 0, 0.65);
    stroke-width: 2;
  }

  /* 目录抽屉内容 */
  .ddkk-toc-mobile-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 16px;
    padding-left: 5px; /* 为目录指示条预留空间 */
    position: relative;
  }

  /* 目录内容区域右上角关闭按钮 */
  .ddkk-toc-mobile-content-close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    padding: 0;
    z-index: 10;
  }

  .ddkk-toc-mobile-content-close:hover {
    transform: scale(1.1);
  }

  .ddkk-toc-mobile-content-close:active {
    transform: scale(0.95);
  }

  .ddkk-toc-mobile-content-close svg {
    width: 24px;
    height: 24px;
    color: rgba(0, 0, 0, 0.65);
    stroke-width: 2;
  }

  /* 目录抽屉遮罩层 */
  .ddkk-article-toc-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    /* 提高层级，位于文章锁定器之上但低于目录抽屉 */
    z-index: 10000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
                visibility 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }

  .ddkk-article-toc-mask.show {
    opacity: 1;
    visibility: visible;
  }

  /* 目录抽屉打开时禁止页面滚动 */
  body.ddkk-article-toc-open {
    overflow: hidden !important;
  }
}

/* ============= 文章页主容器宽度响应式适配（PC端） ============= */
/* <1366px：使用默认最大宽度 1200px */

/* 1366px–1499px：最大宽度 1300px */
@media (min-width: 1366px) and (max-width: 1499.98px) {
  .ddkk-article-wrapper {
    max-width: 1300px;
  }
}

/* 1500px–1599px：最大宽度 1500px */
@media (min-width: 1500px) and (max-width: 1599.98px) {
  .ddkk-article-wrapper {
    max-width: 1500px;
  }
}

/* 1600px–1699px：最大宽度 1600px */
@media (min-width: 1600px) and (max-width: 1699.98px) {
  .ddkk-article-wrapper {
    max-width: 1600px;
  }
}

/* 1700px–1919px：最大宽度 1700px */
@media (min-width: 1700px) and (max-width: 1919.98px) {
  .ddkk-article-wrapper {
    max-width: 1700px;
  }
}

/* 1920px–2559px：最大宽度 1700px */
@media (min-width: 1920px) and (max-width: 2559.98px) {
  .ddkk-article-wrapper {
    max-width: 1700px;
  }
}

/* ≥2560px：最大宽度 1900px */
@media (min-width: 2560px) {
  .ddkk-article-wrapper {
    max-width: 1900px;
  }
}