@charset "utf-8";
/* 知识社区 · 内容详情页（新模板）v1.0
 * 设计基准：1920 画板，内容 1400 居中；左栏 984 / 右栏 336，栏间距 80
 * 设计稿：plans/zssq/figma/images/?20260915 详情页PC.png、延展阅读.png
 */

.kd-page {
  background: #fff;
  color: #2A2B2E;
}

.kd-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* ===================== 面包屑 ===================== */
.kd-breadcrumb {
  padding: 28px 0 40px;
  font-size: 14px;
  line-height: 22px;
  color: #6A6B6D;
}

.kd-breadcrumb a {
  color: #6A6B6D;
  text-decoration: none;
}

.kd-breadcrumb a:hover {
  color: #0175E8;
}

.kd-breadcrumb__sep {
  margin: 0 8px;
  color: #9B9FA8;
}

/* ===================== 两栏骨架 ===================== */
.kd-layout {
  display: grid;
  grid-template-columns: 984px 336px;
  column-gap: 80px;
  align-items: start;
  padding-bottom: 64px;
}

.kd-main {
  min-width: 0;
}

/* ===================== 头部信息 ===================== */
.kd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 设计修订（2026-10-22）：标签行与问题间距 16px（原 14px） */
  margin-bottom: 16px;
}

.kd-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 24px;
  color: #6A6B6D;
  background: #F3F6FB;
  text-decoration: none;
}

a.kd-tag:hover {
  opacity: .85;
}

.kd-tag--purple { color: #5D5FEF; background: rgba(93, 95, 239, .1); }
.kd-tag--blue   { color: #0175E8; background: rgba(1, 117, 232, .1); }
.kd-tag--green  { color: #15803D; background: rgba(21, 128, 61, .1); }
.kd-tag--orange { color: #D3882C; background: rgba(255, 143, 31, .12); }
.kd-tag--cyan   { color: #26AFA4; background: rgba(38, 175, 164, .1); }

.kd-title {
  /* 设计修订（2026-10-22）：问题与摘要间距 16px（原 12px，与摘要 margin-top 折叠后取大值） */
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.35;
  font-weight: 700;
  color: #2A2B2E;
}

.kd-desc {
  /* 设计修订（2026-10-22）：摘要上间距由问题 margin-bottom 提供（16px），下间距 24px */
  margin: 0 0 24px;
  padding-left: 18px;
  border-left: 2px solid #C0D3ED;
  /* 设计稿：摘要 16px（行高 24 = 150%） */
  font-size: 16px;
  line-height: 24px;
  color: #6A6B6D;
}

/* 作者 / 互动信息带 */
.kd-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: #F7F9FA;
  border-radius: 4px;
}

.kd-meta__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
}

.kd-meta__info {
  min-width: 0;
}

.kd-meta__name {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: #2A2B2E;
}

.kd-meta__sub {
  font-size: 14px;
  line-height: 22px;
  color: #6A6B6D;
}

.kd-meta__sub span + span {
  margin-left: 12px;
}

.kd-meta__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 22px;
  color: #6A6B6D;
}

.kd-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 与图标同高（16px），包管文字与图标处于统一水平中线 */
  line-height: 16px;
}

.kd-meta__item--share {
  cursor: pointer;
}

.kd-meta__item--share:hover {
  color: #0175E8;
}

.kd-meta__divider {
  width: 1px;
  height: 16px;
  background: #E3E5E6;
}

.kd-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  /* 线性图标（素材 read.svg / share.svg 为 20×20 描边），颜色随文字 */
  fill: none;
  stroke: currentColor;
  /* 20 视框缩放到 16px 后约 1px，与设计稿线条视觉一致 */
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===================== 分享乐成提醒（toast） ===================== */
/* 设计稿：plans/zssq/figma/设计规格清单.md / Frame 19322（272×145、圆角 4、勾选圆 #15803D）
 * 第一行「? 链接已复制」18px 白色，第二行「粘贴到谈天工具或邮件即可分享」16px 白色 */
.kd-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  box-sizing: border-box;
  width: 272px;
  padding: 28px 24px 20px;
  border-radius: 4px;
  /* 设计为半透明黑（白底上取样约 #818181） */
  background: rgba(0, 0, 0, .5);
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease;
}

.kd-toast.is-visible {
  opacity: 1;
  visibility: visible;
}

.kd-toast__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.kd-toast__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #15803D;
}

.kd-toast__check svg {
  display: block;
  width: 12px;
  height: 12px;
}

.kd-toast__title {
  font-size: 18px;
  line-height: 24px;
  color: #FFFFFF;
}

.kd-toast__desc {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
}

/* ===================== 正文 ===================== */
/* 设计稿：作者信息带下方 40px 处有一条 1px #E3E5E6 通栏支解线，再往下 40px 进正文 */
.kd-content {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #E3E5E6;
  font-size: 16px;
  line-height: 24px;
  /* 不设默认文字色：按富文本自身样式（内联 color）或页面基础色渲染 */
  word-break: break-word;
}

/* 正文为空时的空状态提醒（PRD 功效说明二） */
.kd-content--empty {
  padding: 64px 0;
  text-align: center;
  color: #9B9FA8;
  font-size: 16px;
}

.kd-content--empty p {
  margin: 0;
}

.kd-content p {
  margin: 0 0 16px;
}

/* 正文内问题只控制字号/间距/字重，不指定颜色：
 * 让富文本自身的内联 color 或页面基础色生效（含 <p><strong><span> 形式的伪问题） */
.kd-content h2 {
  margin: 40px 0 16px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
}

.kd-content h3 {
  margin: 32px 0 12px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.kd-content h4 {
  margin: 24px 0 12px;
  font-size: 16px;
  font-weight: 700;
}

.kd-content img {
  max-width: 100%;
  height: auto;
}

.kd-content a {
  color: #0175E8;
}

.kd-content ul,
.kd-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.kd-content li {
  margin-bottom: 8px;
}

.kd-content blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  background: #F7F9FA;
  border-left: 2px solid #0175E8;
  border-radius: 0 4px 4px 0;
}

.kd-content blockquote p:last-child {
  margin-bottom: 0;
}

.kd-content table {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
}

.kd-content table th,
.kd-content table td {
  padding: 8px 12px;
  border: 1px solid #E3E5E6;
  text-align: left;
}

.kd-content table ul li {
  list-style-type: disc;
}

/* ===================== 相关标签 + 返回 ===================== */
.kd-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  /* 设计稿：正文与「相关标签」之间 48px */
  margin-top: 48px;
  font-size: 16px;
  line-height: 24px;
}

.kd-labels__title {
  color: #2A2B2E;
}

.kd-labels a {
  color: #0175E8;
  text-decoration: none;
}

.kd-labels a:hover {
  text-decoration: underline;
}

.kd-back {
  display: block;
  /* 设计稿：「相关标签」与返回链接之间 48px */
  margin-top: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E3E5E6;
  font-size: 16px;
  line-height: 24px;
  color: #0175E8;
  text-decoration: none;
}

/* hover：通例蓝 #0175E8 的 80% 透明度（稳固灰、不下划线） */
.kd-page .kd-back:hover {
  color: rgba(1, 117, 232, .8);
  text-decoration: none;
}

/* ===================== 谈论区 ===================== */
.kd-comment {
  padding-top: 32px;
}

.kd-comment__title {
  position: relative;
  margin: 0 0 24px;
  padding-left: 12px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: #2A2B2E;
}

.kd-comment__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 26px;
  margin-top: -13px;
  background: #E60039;
  border-radius: 2px;
}

/* 表单面板：设计稿为 1px 描边 + 2px 圆角的白底整块，面板自身不留内边距
 *（文本域与底部灰色通栏条各自贴边，提醒文案在面板外下方） */
.kd-form {
  border: 1px solid #E3E5E6;
  border-radius: 2px;
  background: #fff;
  /* 让底部灰色通栏条随面板圆角裁切，省去逐块设置内圆角 */
  overflow: hidden;
}

/* 谈论内容输入域：设计稿无自力描边与底色，靠 16px 内边距留白 */
.kd-form__textarea {
  display: block;
  width: 100%;
  min-height: 128px;
  padding: 16px;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  line-height: 24px;
  color: #2A2B2E;
  background: transparent;
  resize: none;
  box-sizing: border-box;
}

.kd-form__textarea::placeholder,
.kd-form__input::placeholder {
  color: #9B9FA8;
}

/* 昵称 / 手机号 / 邮箱 + 揭晓谈论：设计稿为面板底部的浅灰通栏条（左右贴边） */
.kd-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-top: 0;
  padding: 16px;
  background: #F7F8FA;
}

/* 字段为一列：输入框在上、校验提醒在下（PRD 功效说明五） */
.kd-form__field {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 180px;
  /* 设计稿：三个输入框等宽 244，余量留给右侧按钮 */
  max-width: 244px;
}

/* 「谈论内容」字段提醒直接挂在表单上时，与文本域同缩进 */
.kd-form > .kd-form__err {
  padding: 0 16px;
}

/* 字段级校验提醒：红色 12px，无内容时不占位 */
.kd-form__err {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: #E60039;
}

.kd-form__err:empty {
  display: none;
}

.kd-form__input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #E3E5E6;
  border-radius: 2px;
  font-size: 14px;
  color: #2A2B2E;
  background: #fff;
  box-sizing: border-box;
}

/* 必填项：星号浮在输入框内左侧（原型：红 * + 昵称占位） */
.kd-form__field--req .kd-form__input {
  padding-left: 24px;
}

.kd-form__star {
  position: absolute;
  left: 12px;
  top: 0;
  height: 48px;
  line-height: 48px;
  color: #E60039;
  font-size: 14px;
  pointer-events: none;
}

.kd-form__field--req {
  position: relative;
}

.kd-form__input--code {
  width: 120px;
}

.kd-form__req {
  color: #E60039;
}

.kd-form__code {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 0 16px 16px;
}

/* 阿里云滑块模式（helper 在 provider=aliyun 时给 body 加 aliyun-captcha-mode）：
 * 隐藏图片验证码行，改由点击「揭晓谈论」弹出滑块；provider=image 时此行自动恢复可见 */
body.aliyun-captcha-mode .kd-form__code {
  display: none;
}

.kd-form__code img {
  display: block;
  width: 88px;
  height: 40px;
  border: 1px solid #E3E5E6;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

.kd-form__submit {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  min-width: 140px;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 2px;
  background: #E60039;
  color: #fff;
  font-size: 16px;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

.kd-form__submit:hover {
  opacity: .9;
}

/* 提醒文案：在表单面板外侧下方，左对齐面板左边沿 */
.kd-form__hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 20px;
  color: #9B9FA8;
}

/* 谈论列表：与表单之间 50px（设计稿实测 2505→2555），列表自身无顶部分隔线 */
.kd-comment-list {
  margin-top: 50px;
}

/* 谈论项（量值取自设计稿 1:1 实测：项高 100 = 25 + 内容 48 + 27，头像 48，名称 18/600（行高 150%），时间 14） */
.kd-comment-item {
  display: flex;
  gap: 20px;
  padding: 25px 0 27px;
  border-bottom: .5px solid #E3E5E6;
}

.kd-comment-item:last-child {
  border-bottom: 0;
}

.kd-comment-item__avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  line-height: 48px;
  text-align: center;
  overflow: hidden;
}

/* 头像配色：设计稿实测（李开国/吴大王/陈陈陈/李/李2） */
.kd-comment-item__avatar--0 { background: #7879F1; }
.kd-comment-item__avatar--1 { background: #51D04D; }
.kd-comment-item__avatar--2 { background: #EF5DA8; }
.kd-comment-item__avatar--3 { background: #B978F1; }
.kd-comment-item__avatar--4 { background: #FB9433; }

.kd-comment-item__body {
  min-width: 0;
  flex: 1 1 auto;
}

.kd-comment-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 名称：设计稿 18px / 600 / 行高 150%（27px）/ 字距 0 */
.kd-comment-item__name {
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  letter-spacing: 0;
  color: #2A2B2E;
}

.kd-comment-item__time {
  font-size: 14px;
  line-height: 20px;
  color: #9B9FA8;
}

.kd-comment-item__text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 22px;
  color: #5F6062;
  word-break: break-word;
}

.kd-comment-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.kd-comment-empty img {
  width: 110px;
}

.kd-comment-empty p {
  margin: 20px 0 0;
  font-size: 18px;
  color: #6A6B6D;
}

/* 「审查更多 / 收起」（默认展示前 3 条，>3 条时泛起） */
.kd-comment-more {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #0175E8;
  text-align: center;
  cursor: pointer;
}

/* ===================== 右侧边栏（延展阅读） ===================== */
.kd-rail {
  display: grid;
  /* 牢靠 336px 轨道：minmax(0,1fr) + min-width:0 避免被内容（nowrap 的资料名）撑开 */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: start;
  min-width: 0;
  /* 吸顶：正文转动时侧栏牢靠在右侧不动（顶到容器底部为止）
   * 顶部偏移由页面剧本按站颔首部（fixed，转动时会缩短）的实测高度写入 --kd-sticky-top，
   * 未取到时回退 104px（头部约 88px + 16px 间距） */
  position: sticky;
  top: var(--kd-sticky-top, 104px);
  align-self: start;
  /* 视口较矮时侧栏内部转动，阻止下方卡片（稿件征集）被裁掉 */
  max-height: calc(100vh - var(--kd-sticky-top, 104px) - 24px);
  overflow-y: auto;
}

.kd-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #E3E5E6;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}

.kd-card__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #2A2B2E;
}

/* 联系97国际手艺专家
 * 设计稿：336×114 / 圆角 4 / 描边 1px #E3E5E6 / 内边距 16 / 间距 12
 * 配景 = 白底 + 底图 30% 不透明度（Figma：image.png Opacity 30%）
 */
.kd-expert {
  /* ==== 底图手工调参（整图 2560×3840，浏览器里改这几个变量实时生效；调好告诉我，我固化）====
   * --kd-expert-bg-size    ：单值百分比 = 按卡片宽度缩放、高度自动坚持比例（推荐）
   *                          272% ≈ 设计稿的线条密度；数值越大图越大（越放大、线条越疏）
   *                          也支持 px：整图渲染尺寸 = 2560k × 3840k，如 k=0.357 → 915px 1372px
   * --kd-expert-bg-position：百分比，0% 0% = 贴左上角，100% 100% = 贴右下角（图比卡片大，按溢出量分派）
   *                          也支持 px：显示素材 (x0,y0) 区域 → -x0·k / -y0·k（x0 ≤ 2560-可视宽）
   * --kd-expert-bg-fade    ：白色蒙层（= 底图不透明度 30%，越小底图越显着，1 = 看不见）
   */
  --kd-expert-bg-position: 60% 50%;         /* 2026-10-16 按 DevTools 调试效果固化 */
  --kd-expert-bg-size: 101%;                /* = 整图宽 ≈ 卡片宽 ×1.01（素材约 y1490~2350 整幅宽） */
  --kd-expert-bg-fade: rgba(255, 255, 255, .7);

  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #E3E5E6;
  background-color: #fff;
  background-image: linear-gradient(var(--kd-expert-bg-fade), var(--kd-expert-bg-fade)), url(/zssq/images/expert-card-wave.jpg);
  background-position: 0 0, var(--kd-expert-bg-position);
  background-size: auto, var(--kd-expert-bg-size);
  background-repeat: no-repeat, no-repeat;
}

.kd-expert__avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  display: block;
}

.kd-expert__body {
  min-width: 0;
}

.kd-expert__title {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
  color: #2A2B2E;
}

.kd-expert__btn {
  display: inline-block;
  height: 28px;
  padding: 0 12px;
  border-radius: 4px;
  background: #E60039;
  color: #fff;
  font-size: 14px;
  line-height: 28px;
  font-weight: 600;
  text-decoration: none;
}

.kd-expert__btn:hover {
  color: #fff;
  opacity: .9;
}

/* 相关资料与工具包 */
.kd-toolkit__list {
  display: block;
}

/* 列表项：行高 56，脱离线 0.5px #E3E5E6（Figma：0.5px Bottom side） */
.kd-toolkit__item {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 56px;
  border-bottom: .5px solid #E3E5E6;
  font-size: 16px;
  line-height: 24px;
  color: #2A2B2E;
  text-decoration: none;
}

.kd-toolkit__item:hover {
  color: #0175E8;
}

/* 只有一条资料时不显示脱离线 */
.kd-toolkit__item:only-child {
  border-bottom: 0;
}

/* 问题与 >> 统一行左对齐（Figma 文本节点为「问题>>」） */
.kd-toolkit__name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kd-toolkit__arrow {
  flex: 0 0 auto;
  margin-left: 4px;
}

/* 稿件征集（Figma：卡片内 Gap 16；说明文字 #2A2B2E 16px/150%） */
.kd-contribute__text {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #2A2B2E;
}

.kd-contribute__more {
  display: inline-block;
  margin-top: 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #0175E8;
  text-decoration: none;
}

/* hover：通例蓝 #0175E8 的 80% 透明度（稳固灰、不下划线） */
.kd-page .kd-contribute__more:hover {
  color: rgba(1, 117, 232, .8);
  text-decoration: none;
}

/* ===================== 响应式（设计基准 1920，向下适配） ===================== */
@media screen and (max-width: 1439px) {
  .kd-container {
    max-width: none;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .kd-layout {
    grid-template-columns: minmax(0, 1fr) 336px;
    column-gap: 40px;
  }
}

@media screen and (max-width: 1023px) {
  .kd-breadcrumb {
    padding: 20px 0 24px;
  }

  .kd-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    padding-bottom: 32px;
  }

  /* 单列结构（≤1023px）：侧栏作废吸顶，阻止与正文重叠或爆发内部转动条 */
  .kd-rail {
    position: static;
    top: auto;
    max-height: none;
    overflow-y: visible;
  }

  .kd-title {
    font-size: 24px;
  }

  .kd-meta {
    flex-wrap: wrap;
  }

  .kd-meta__actions {
    margin-left: 0;
    width: 100%;
    padding-top: 12px;
  }

  .kd-content {
    margin-top: 24px;
    padding-top: 24px;
  }

  .kd-content h2 {
    margin-top: 24px;
    font-size: 20px;
  }

  .kd-content h3 {
    font-size: 18px;
  }

  .kd-form__field {
    flex: 1 1 100%;
    max-width: none;
  }

  .kd-form__submit {
    margin-left: 0;
    width: 100%;
  }
}

/* 移动端（≤750px）：单列，顺序为「正文 → 相关资料/稿件/专家 → 谈论（含表单）」，
   与设计稿一致。做法：把 .kd-main 酿成 display:contents，让它的子元素与 .kd-rail 同级，
   再用 order 把 rail 提到谈论之前，不改 DOM。 */
@media screen and (max-width: 750px) {
  .kd-layout {
    display: flex;
    flex-direction: column;
    row-gap: 0;
    padding-bottom: 24px;
    /* 桌面端 .kd-layout 是 align-items: start，改为 flex 后子项会按内容缩短，
     * 导致正文上方的通栏支解线变短，这里恢复拉伸 */
    align-items: stretch;
  }

  .kd-main {
    display: contents;
  }

  /* 正文区各块在窄屏下的节奏 */
  .kd-container {
    padding: 0 16px;
  }

  .kd-title {
    font-size: 22px;
    line-height: 1.4;
  }

  .kd-desc {
    /* 与桌面一致：上下间距各 +4px（竖线继续基础样式） */
    margin-top: 16px;
    font-size: 14px;
    line-height: 22px;
  }

  .kd-tags {
    gap: 8px;
  }

  .kd-tag {
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    padding: 0 8px;
  }

  .kd-content {
    font-size: 15px;
    line-height: 24px;
  }

  /* 右侧栏各卡片在移动端顺序：资料工具包 → 稿件征集 → 咨询专家（设计稿） */
  .kd-rail {
    order: 1;
    margin-top: 24px;
    row-gap: 16px;
  }

  .kd-expert {
    order: 3;
  }

  .kd-toolkit {
    order: 1;
  }

  .kd-contribute {
    order: 2;
  }

  /* 谈论整块放到栏区之后 */
  .kd-comment {
    order: 2;
    margin-top: 32px;
  }

  .kd-comment__title {
    font-size: 18px;
  }

  /* 设计稿移动端实测：文本域区高约 131（与桌面 128 一致），下方灰条内 16 间距等距 */
  .kd-form__textarea {
    height: 128px;
    min-height: 128px;
  }

  /* 移动端纵向堆叠：用块级 + 统一 16 间距，阻止 flex 换行爆发特殊间隙 */
  .kd-form__row {
    display: block;
  }

  .kd-form__field {
    max-width: none;
    margin-bottom: 16px;
  }

  .kd-form__submit {
    display: block;
    width: 100%;
    margin-left: 0;
  }

  .kd-comment-list {
    margin-top: 24px;
  }

  .kd-comment-item {
    gap: 12px;
    padding: 16px 0;
  }

  .kd-comment-item__avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
  }

  /* 谈论时间已统一为 14px（见基础样式），移动端无需笼罩 */

  .kd-back {
    margin-top: 24px;
    /* 与上方「相关标签」坚持一致（.kd-labels 为 16px/24px） */
    font-size: 16px;
    line-height: 24px;
    /* 移动端设计稿无下划线 */
    border-bottom: 0;
  }

  /* 作者信息卡（设计稿移动端）：头像 40；名称一行、头衔+日期一行；
     阅读在左、分享在右，中心一条竖向支解线（设计稿卡内无横向支解线） */
  .kd-meta {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }

  .kd-meta__avatar {
    width: 40px;
    height: 40px;
  }

  .kd-meta__name {
    font-size: 16px;
    line-height: 22px;
  }

  .kd-meta__sub {
    font-size: 13px;
    line-height: 20px;
  }

  .kd-meta__sub span + span {
    margin-left: 8px;
  }

  .kd-meta__actions {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 4px;
    padding-top: 12px;
    justify-content: space-between;
    font-size: 13px;
  }

  /* 阅读 | 分享 之间的竖向支解线：保保存中心（space-between 自然居中） */
  .kd-meta__divider {
    height: 12px;
  }
}