/* Koomjai คุ้มใจ —— 本站原创样式
   反站群规范:不与任何别站共用类名/结构/配色。前缀 kj-(马来站是 ch-)。

   设计立意:这个站的护城河是**真实数字**(年电费计算器 / เบอร์5 星级库 / มอก 认证清单),
   所以视觉走「仪表 / 规格表」而不是生活博客。数字是一等公民:等宽、表格数字对齐、
   有自己的排版规则。马来站(暖奶油+teal+mango+大圆角)是刻意的反面。

   泰文排版三条硬规则(照抄拉丁排版会出问题):
   1. line-height 必须宽松(1.85):泰文声调符号上下叠加,行高不够会上下行打架
   2. word-break 必须 normal:泰文无词间空格,break-all 会在词中间乱断
      (现代浏览器用 ICU 词典自动分词断行,不要干预)
   3. 字体必须真的支持泰文:Sarabun / Prompt 都是泰文字体,
      回退栈里也放了 Noto Sans Thai 和系统 Thonburi
*/

:root {
  /* 冷调纸面 —— 刻意不用 AI 默认的暖奶油 */
  --kj-ground: #eff1f3;
  --kj-surface: #ffffff;
  --kj-ink: #131820;
  --kj-muted: #5a6675;
  --kj-line: #dce0e6;
  /* 主色:深海军蓝(仪表/可信),明确区别于马来站的 teal */
  --kj-navy: #1c3557;
  --kj-navy-soft: #e6ebf2;
  /* 强调色:朱砂(数据高亮/警示),明确区别于马来站的 mango 黄 */
  --kj-vermilion: #ce4b27;
  /* 数据语义色 —— 与强调色分开,不混用 */
  --kj-good: #2f6b4a;
  --kj-warn: #9a6412;
  --kj-bad: #a8331d;

  --kj-r: 4px;          /* 小圆角:规格表气质,不是卡片博客 */
  --kj-r-lg: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kj-ground);
  color: var(--kj-ink);
  font-family: "Sarabun", "Noto Sans Thai", "Thonburi", -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  /* 泰文声调符号需要更宽的行高 */
  line-height: 1.85;
  word-break: normal;          /* 绝不 break-all */
  overflow-wrap: break-word;
}

h1, h2, h3, .kj-brand {
  font-family: "Prompt", "Noto Sans Thai", "Sarabun", -apple-system, sans-serif;
  font-weight: 600;
  line-height: 1.4;            /* 标题也要给声调符号留空间 */
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0;
}

/* 数字是一等公民 */
.kj-num, table td, .kj-stat-v {
  font-variant-numeric: tabular-nums;
}

a { color: var(--kj-navy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--kj-vermilion);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

.kj-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.kj-narrow { max-width: 720px; }

/* ── 顶栏:下划线标签,不是胶囊 ───────────────────────────────── */
.kj-top {
  background: var(--kj-surface);
  border-bottom: 1px solid var(--kj-line);
  position: sticky; top: 0; z-index: 20;
}
.kj-topbar {
  display: flex; align-items: baseline; gap: 28px;
  padding: 14px 20px; flex-wrap: wrap;
}
.kj-brand {
  font-size: 1.3rem; color: var(--kj-ink); white-space: nowrap;
}
.kj-brand b { color: var(--kj-navy); font-weight: 600; }
.kj-brand i {
  font-style: normal; font-size: .72rem; color: var(--kj-muted);
  margin-inline-start: 8px; letter-spacing: .04em;
}
.kj-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.kj-nav a {
  /* 同上:泰文下方元音符号需要净空,3px 会被穿 */
  font-size: .93rem; color: var(--kj-muted); padding-bottom: 9px;
  border-bottom: 2px solid transparent;
}
.kj-nav a:hover {
  color: var(--kj-navy); border-bottom-color: var(--kj-vermilion);
  text-decoration: none;
}

/* ── 首页 hero:以主张开场,不以口号开场 ──────────────────────── */
.kj-hero { padding: 46px 0 30px; }
.kj-hero h1 {
  font-size: clamp(1.75rem, 4.2vw, 2.6rem);
  max-width: 20ch;
}
.kj-hero h1 mark {
  background: none; color: var(--kj-vermilion);
  /* ⚠️ 泰文排版:สระอุ/สระอู(◌ุ ◌ู)等元音符号挂在基线**以下**,
     拉丁排版惯用的 2px 下划线间距会直接穿过它们(实测撞了)。
     泰文下划线必须留出 10px 以上净空。 */
  border-bottom: 3px solid currentColor; padding-bottom: 12px;
}
.kj-hero p {
  margin: 16px 0 0; max-width: 56ch; color: var(--kj-muted); font-size: 1.03rem;
}

/* 事实条:把「我们凭什么」摆在首屏 —— 首页不许一屏纯文字 */
.kj-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--kj-line);
  border: 1px solid var(--kj-line); border-radius: var(--kj-r-lg);
  overflow: hidden; margin-top: 28px;
}
.kj-fact { background: var(--kj-surface); padding: 16px 18px; }
.kj-fact .kj-stat-v {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.32rem; font-weight: 600; color: var(--kj-navy);
  line-height: 1.3;
}
.kj-fact .kj-stat-l {
  font-size: .84rem; color: var(--kj-muted); margin-top: 4px; line-height: 1.6;
}

/* ── 频道栅格 ────────────────────────────────────────────────── */
.kj-sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 44px 0 16px; padding-bottom: 8px;
  border-bottom: 2px solid var(--kj-ink);
}
.kj-sec-h h2 { font-size: 1.18rem; }
.kj-sec-h span { font-size: .84rem; color: var(--kj-muted); }

.kj-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
.kj-card {
  background: var(--kj-surface); border: 1px solid var(--kj-line);
  border-radius: var(--kj-r); padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s ease;
}
.kj-card:hover { border-color: var(--kj-navy); text-decoration: none; }
.kj-card h3 { font-size: 1.05rem; color: var(--kj-ink); }
.kj-card-hint { font-size: .88rem; color: var(--kj-muted); margin: 0; }
.kj-card-tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kj-vermilion);
}

/* ── 首屏图表 ────────────────────────────────────────────────
   图由 site/charts.py 在构建期从费率事实源生成。img 上写死 width/height 防 CLS,
   这里只负责让它按比例缩放(height:auto 必须有,否则窄屏会被压扁)。 */
.kj-hero-fig {
  margin: 26px 0 0; padding: 0;
  border: 1px solid var(--kj-line); border-radius: var(--kj-r-lg);
  background: var(--kj-surface); overflow: hidden;
}
.kj-hero-fig-link { display: block; }
.kj-hero-fig-link:focus-visible { outline-offset: -3px; }
.kj-chart { display: block; width: 100%; height: auto; aspect-ratio: 960 / 450; }
/* 窄屏用横条形那一版,宽高比不同 —— 在这里钉住,图没加载完也不会跳版 */
@media (max-width: 640px) { .kj-chart { aspect-ratio: 480 / 500; } }
.kj-hero-fig figcaption {
  border-top: 1px solid var(--kj-line);
  padding: 11px 16px 13px;
  font-size: .82rem; line-height: 1.75; color: var(--kj-muted);
}
.kj-hero-fig figcaption a { color: var(--kj-navy); border-bottom: 1px solid var(--kj-line); }
.kj-hero-fig figcaption a:hover { border-bottom-color: var(--kj-vermilion); text-decoration: none; }

/* 栏目卡图标:纯装饰,鼠标悬停时跟着卡片一起「亮」一下 */
.kj-card-ico {
  display: block; width: 48px; height: 48px; margin-bottom: 2px;
  opacity: .92; transition: opacity .15s ease, transform .15s ease;
}
.kj-card:hover .kj-card-ico { opacity: 1; transform: translateY(-1px); }

/* ── 文章列表 ────────────────────────────────────────────────── */
.kj-list { display: flex; flex-direction: column; }
.kj-item {
  padding: 16px 0; border-bottom: 1px solid var(--kj-line);
  display: flex; flex-direction: column; gap: 5px;
}
.kj-item:last-child { border-bottom: 0; }
.kj-item a { font-size: 1.06rem; font-weight: 500; color: var(--kj-ink); }
.kj-item a:hover { color: var(--kj-navy); }
.kj-item p { margin: 0; font-size: .92rem; color: var(--kj-muted); }

/* ── 正文 ────────────────────────────────────────────────────── */
.kj-article { background: var(--kj-surface); border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-lg); padding: 34px 30px; margin: 26px 0 40px; }
.kj-article h1 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin-bottom: 10px; }
.kj-meta { font-size: .84rem; color: var(--kj-muted); margin-bottom: 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--kj-line); }
.kj-body h2 { font-size: 1.28rem; margin: 34px 0 12px;
  padding-inline-start: 12px; border-inline-start: 4px solid var(--kj-vermilion); }
.kj-body h3 { font-size: 1.08rem; margin: 24px 0 8px; color: var(--kj-navy); }
.kj-body p { margin: 0 0 16px; }
.kj-body ul, .kj-body ol { margin: 0 0 16px; padding-inline-start: 22px; }
.kj-body li { margin-bottom: 7px; }
.kj-body img { border-radius: var(--kj-r); margin: 22px 0; }
.kj-body blockquote {
  margin: 22px 0; padding: 14px 18px; background: var(--kj-navy-soft);
  border-inline-start: 4px solid var(--kj-navy); border-radius: 0 var(--kj-r) var(--kj-r) 0;
}
.kj-body blockquote p:last-child { margin-bottom: 0; }

/* 表格 = 规格表,本站的主力表达形式 */
.kj-tablewrap { overflow-x: auto; margin: 22px 0; }
.kj-body table, table {
  width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 420px;
}
.kj-body th, table th {
  text-align: start; background: var(--kj-navy); color: #fff;
  font-weight: 600; padding: 10px 12px; font-size: .86rem;
}
.kj-body td, table td {
  padding: 10px 12px; border-bottom: 1px solid var(--kj-line);
}
.kj-body tr:nth-child(even) td { background: #f7f8fa; }

/* ── 页脚 ────────────────────────────────────────────────────── */
.kj-foot {
  background: var(--kj-ink); color: #aeb7c4; margin-top: 56px;
  padding: 34px 0 40px; font-size: .89rem;
}
.kj-foot a { color: #d5dce6; }
.kj-foot-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.kj-foot p { margin: 6px 0 0; line-height: 1.75; }

/* ── 通用 ────────────────────────────────────────────────────── */
.kj-note {
  background: var(--kj-navy-soft); border: 1px solid #c9d5e4;
  border-radius: var(--kj-r); padding: 14px 16px; font-size: .9rem; margin: 22px 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .kj-article { padding: 24px 18px; }
  .kj-topbar { gap: 14px; padding: 12px 20px; }
  .kj-nav { gap: 14px; }
}

/* ── 电费计算器 ─────────────────────────────────────────────────
   规格表气质的延伸:输入区紧凑、结果区把「一个数字」放大、
   过程可展开。数字一律 tabular-nums。 */
.kj-calc { border: 1px solid var(--kj-line); border-radius: var(--kj-r-lg);
  background: var(--kj-surface); overflow: hidden; margin: 26px 0; }
.kj-calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; padding: 18px; background: var(--kj-navy-soft); }
.kj-calc-f { display: flex; flex-direction: column; gap: 5px; font-size: .88rem; }
.kj-calc-f > span { font-weight: 600; color: var(--kj-ink); }
.kj-calc-f input, .kj-calc-f select {
  font: inherit; font-family: "IBM Plex Mono", ui-monospace, monospace;
  padding: 9px 11px; border: 1px solid #b9c6d8; border-radius: var(--kj-r);
  background: #fff; color: var(--kj-ink); width: 100%;
}
.kj-calc-f select { font-family: "Sarabun", sans-serif; font-size: .85rem; }
.kj-calc-f input:focus, .kj-calc-f select:focus {
  outline: 2px solid var(--kj-vermilion); outline-offset: 1px; border-color: var(--kj-navy); }
.kj-calc-f em { font-style: normal; font-size: .78rem; color: var(--kj-muted); line-height: 1.6; }

.kj-calc-out { padding: 20px 18px; }
.kj-calc-hero { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--kj-line); }
.kj-calc-lbl { font-size: .85rem; color: var(--kj-muted); }
.kj-calc-big { font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; margin-top: 4px; }
.kj-calc-big b {
  font-size: clamp(1.7rem, 7vw, 2.3rem); font-weight: 600; color: var(--kj-vermilion);
  /* 金额绝不允许从数字中间断开(实测 560px 下断成「1,360.9 / 8」) */
  white-space: nowrap;
}
.kj-calc-big span { font-size: .95rem; color: var(--kj-muted); white-space: nowrap; }
.kj-calc-sub { font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; color: var(--kj-muted); font-size: .92rem;
  margin-top: 2px; white-space: nowrap; }

.kj-calc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--kj-line); }
.kj-calc-facts div { font-size: .85rem; color: var(--kj-muted); }
.kj-calc-facts span { display: block; margin-bottom: 2px; }
.kj-calc-facts b { font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-size: 1.12rem; color: var(--kj-navy); }

.kj-calc-note { margin-top: 14px; font-size: .85rem; color: var(--kj-muted); line-height: 1.75; }
.kj-calc-note b { color: var(--kj-ink); }

.kj-calc-cmp { margin-top: 18px; border: 1px solid var(--kj-line); border-radius: var(--kj-r); overflow: hidden; }
.kj-calc-cmp-h { background: var(--kj-navy); color: #fff; padding: 9px 13px;
  font-size: .84rem; font-weight: 600; }
.kj-calc-cmp table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 0; }
.kj-calc-cmp td { padding: 9px 13px; border-bottom: 1px solid var(--kj-line); }
.kj-calc-cmp td:last-child { text-align: end; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; }
.kj-calc-cmp tr:last-child td { border-bottom: 0; }
.kj-calc-diff td { font-weight: 600; background: #f4f7fa; color: var(--kj-good); }

.kj-calc-detail { margin-top: 16px; }
.kj-calc-detail summary { cursor: pointer; font-size: .87rem; color: var(--kj-navy); font-weight: 600; }
.kj-calc-brk { margin-top: 12px; }
.kj-calc-brk h4 { font-size: .85rem; margin: 0 0 5px; color: var(--kj-muted); font-weight: 600; }
.kj-calc-brk table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 0; }
.kj-calc-brk td { padding: 5px 0; border-bottom: 1px dotted var(--kj-line); }
.kj-calc-brk td:last-child { text-align: end; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; }
.kj-calc-brk .kj-calc-diff td { background: none; border-top: 1px solid var(--kj-ink); }

.kj-calc-src { font-size: .78rem; color: var(--kj-muted); margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════
   本地阅读习惯组件(docs/10)
   依据:泰国成熟内容站(scair.co.th / mercular / sanook)的共同结构 ——
   面包屑 → 佛历更新日期 → 摘要 → 可回溯的公式 → 规格表 → FAQ → 来源。
   风格延续本站的「仪表/规格表」气质:小圆角、navy 主色、朱砂做强调,
   与马来站(暖奶油+teal+大圆角)刻意分叉。
   泰文硬规则照旧:行高不低于 1.75、word-break 保持 normal、
   下划线/边框离文字至少 10px(声调符号挂在基线以下)。
   ══════════════════════════════════════════════════════════════════ */

.kj-crumbs { font-size: .84rem; color: var(--kj-muted); margin: 18px 0 0; }
.kj-crumbs a { color: var(--kj-muted); }
.kj-crumbs a:hover { color: var(--kj-navy); }

.kj-cover { border-radius: var(--kj-r); margin: 6px 0 18px; width: 100%; }

/* 摘要:先给结论 */
.kj-tldr {
  background: var(--kj-navy-soft); border: 1px solid #c9d5e4;
  border-inline-start: 4px solid var(--kj-navy);
  border-radius: 0 var(--kj-r) var(--kj-r) 0; padding: 16px 18px; margin: 22px 0;
}
.kj-tldr h2 {
  font-size: .82rem; letter-spacing: .06em; color: var(--kj-navy);
  margin: 0 0 8px; font-weight: 600;
}
.kj-tldr ul { margin: 0; padding-inline-start: 20px; }
.kj-tldr li { margin-bottom: 7px; }
.kj-tldr li:last-child { margin-bottom: 0; }

/* 目录 */
.kj-toc {
  border: 1px solid var(--kj-line); border-radius: var(--kj-r);
  padding: 14px 18px; margin: 22px 0; background: #fafbfc;
}
.kj-toc h2 { font-size: .82rem; letter-spacing: .06em; color: var(--kj-muted); margin: 0 0 8px; }
.kj-toc ol { margin: 0; padding-inline-start: 20px; }
.kj-toc li { margin-bottom: 5px; }
.kj-toc a { color: var(--kj-ink); }
.kj-toc a:hover { color: var(--kj-navy); }

/* sticky 顶栏会盖住锚点落点 */
.kj-body h2, .kj-body h3, .kj-faq h2 { scroll-margin-top: 78px; }

/* FAQ */
.kj-faq { margin-top: 2.2em; }
.kj-faq > h2 {
  font-size: 1.28rem; margin: 0 0 12px;
  padding-inline-start: 12px; border-inline-start: 4px solid var(--kj-vermilion);
}
.kj-faq details {
  border: 1px solid var(--kj-line); border-radius: var(--kj-r);
  padding: 12px 16px; margin-bottom: 8px; background: #fafbfc;
}
.kj-faq summary { cursor: pointer; font-weight: 600; color: var(--kj-ink); }
.kj-faq summary::marker { color: var(--kj-vermilion); }
.kj-faq details[open] summary { margin-bottom: 8px; }
.kj-faq-a p:last-child { margin-bottom: 0; }

/* 来源与核实:电价这类四个月一变的数字,读者要能看见「哪天核的、出自哪」 */
.kj-sumber { margin-top: 2.2em; border-top: 1px solid var(--kj-line); padding-top: 1.2em; }
.kj-sumber h2 { font-size: 1.02rem; margin-bottom: 8px; }
.kj-sumber-note { font-size: .87rem; color: var(--kj-muted); margin: 0 0 8px; }
.kj-sumber ul { font-size: .87rem; color: var(--kj-muted); padding-inline-start: 20px; margin: 0; }
.kj-sumber li { margin-bottom: 5px; }

/* 分享:LINE 第一 —— 泰国渗透率最高的通讯应用,群转发是主要二次传播路径 */
.kj-share {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 1.8em; padding-top: 1.2em; border-top: 1px solid var(--kj-line);
}
.kj-share span { font-size: .85rem; color: var(--kj-muted); }
.kj-share a {
  font-size: .85rem; font-weight: 600; padding: 7px 15px; border-radius: var(--kj-r);
  border: 1px solid var(--kj-line); color: var(--kj-navy); background: var(--kj-surface);
}
.kj-share a:hover { border-color: var(--kj-navy); background: var(--kj-navy-soft); text-decoration: none; }

.kj-related { margin-bottom: 46px; }

/* 正文里的提示/警示框 —— markdown 内嵌 div 挂 class 即可 */
.kj-amaran {
  background: #fdf1ec; border-inline-start: 4px solid var(--kj-bad);
  border-radius: 0 var(--kj-r) var(--kj-r) 0; padding: 14px 16px; margin: 22px 0; font-size: .95rem;
}
.kj-amaran p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .kj-tldr, .kj-toc { padding: 14px 15px; }
}

/* ══════════════════════════════════════════════════════════════════
   内链版位(site/linking.py 的四个投放位)
   读者 90% 从搜索进落地页。读完一篇没有下一步 = 告诉他「读完请走」。
   侧栏(常驻) / 中段卡(还在读) / 文末卡(滚到底) / 正文概念链(读到就点)。
   本站没有文章配图,所以这些卡片一律**文字 + 标签**,不塞占位图 —— 规格表气质。
   ══════════════════════════════════════════════════════════════════ */

.kj-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.kj-col { min-width: 0; }
/* 正文行宽仍按 kj-narrow 的尺度控制,不要因为多了侧栏就把行拉长到难读 */
.kj-col .kj-article { max-width: 720px; }

/* 侧栏:桌面跟着读者滚,窄屏落到正文下方 */
.kj-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.kj-rail-box {
  background: var(--kj-surface); border: 1px solid var(--kj-line);
  border-radius: var(--kj-r); padding: 14px 15px;
}
.kj-rail-h {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kj-vermilion); margin: 0 0 10px;
}
.kj-rail-box ul { list-style: none; margin: 0; padding: 0; }
.kj-rail-box li { margin-bottom: 9px; font-size: .92rem; line-height: 1.55; }
.kj-rail-box li:last-child { margin-bottom: 0; }
.kj-rail-box li a { color: var(--kj-ink); }
.kj-rail-box li a:hover { color: var(--kj-navy); text-decoration: underline; }
.kj-rail-all { display: inline-block; margin-top: 11px; font-size: .84rem; color: var(--kj-navy); }
.kj-rail-nav li a { color: var(--kj-muted); }
.kj-rail-nav .kj-now { color: var(--kj-navy); border-bottom: 2px solid var(--kj-vermilion); }

/* 正文中段卡:出现在读者注意力最高的地方,不是等他滚到底 */
.kj-inline-rel {
  border: 1px solid var(--kj-line); border-left: 3px solid var(--kj-vermilion);
  border-radius: var(--kj-r); background: var(--kj-navy-soft); margin: 26px 0;
}
.kj-inline-rel a { display: block; padding: 13px 16px; color: var(--kj-ink); }
.kj-inline-rel a:hover { text-decoration: none; background: rgba(28, 53, 87, .06); }
.kj-ir-h {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kj-vermilion); margin-bottom: 3px;
}
.kj-inline-rel strong { font-weight: 600; line-height: 1.5; }
.kj-ir-d {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .85rem; color: var(--kj-muted); margin-top: 4px; line-height: 1.6;
}

/* 正文里的概念内链:比普通链接明显一点,但不能像广告 */
.kj-body a.ctx { border-bottom: 1px solid var(--kj-line); }
.kj-body a.ctx:hover { border-bottom-color: var(--kj-vermilion); text-decoration: none; }

/* ก่อนหน้า / ถัดไป */
.kj-seq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 8px; }
.kj-seq-a {
  background: var(--kj-surface); border: 1px solid var(--kj-line);
  border-radius: var(--kj-r); padding: 12px 14px; display: block; color: var(--kj-ink);
}
.kj-seq-a:hover { border-color: var(--kj-navy); text-decoration: none; }
.kj-seq-a span {
  display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kj-muted); margin-bottom: 4px;
}
.kj-seq-a strong { font-size: .93rem; font-weight: 600; line-height: 1.5; }
.kj-seq-next { text-align: end; }

/* 文末发现位:两列卡片。平铺列表是「目录」的观感,卡片是「还有这个」的观感 */
.kj-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 14px 0 34px; }
.kj-cardl {
  background: var(--kj-surface); border: 1px solid var(--kj-line);
  border-radius: var(--kj-r); padding: 14px 16px; display: block; color: var(--kj-ink);
  transition: border-color .15s ease;
}
.kj-cardl:hover { border-color: var(--kj-navy); text-decoration: none; }
.kj-cardl strong { display: block; font-weight: 600; line-height: 1.5; margin-top: 6px; }
.kj-cardl-d {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .85rem; color: var(--kj-muted); margin-top: 5px; line-height: 1.65;
}
.kj-tag {
  display: inline-block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kj-navy); background: var(--kj-navy-soft); padding: 2px 7px; border-radius: 2px;
}
.kj-tag-alt { color: var(--kj-vermilion); background: #f7e7e1; }  /* 跨频道:换了题目,标出来 */

.kj-sec-all { font-size: .84rem; color: var(--kj-navy); white-space: nowrap; }
.kj-foot-map { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.kj-foot-map a { font-size: .86rem; color: var(--kj-muted); }
.kj-foot-map a:hover { color: var(--kj-navy); }

@media (max-width: 1000px) {
  .kj-layout { grid-template-columns: 1fr; gap: 6px; }
  /* 窄屏侧栏落到正文下面就不该再 sticky —— 会盖住文末推荐 */
  .kj-rail { position: static; margin-top: 4px; }
  .kj-rail-nav { display: none; }   /* 顶栏已有频道导航,窄屏不重复第三遍 */
  .kj-col .kj-article { max-width: none; }
}
@media (max-width: 640px) {
  .kj-seq { grid-template-columns: 1fr; }
  .kj-seq-next { text-align: start; }
}