/* 史记专栏（构建时拷入 dist/topic/shiji/）。色板沿用 app.css 的纸墨朱砂，标注色另取。 */
.sj { max-width: 820px; margin: 0 auto; padding: 0 18px 60px; }
.sj-crumb { font-size: 12.5px; color: var(--ink-2); padding: 22px 0 0; letter-spacing: .04em; }
.sj-crumb a { color: var(--ink-2); }
.sj h1 { font-size: 32px; letter-spacing: .2em; margin: 18px 0 14px; font-weight: 700; }
.sj-juan { font-size: 13px; letter-spacing: .1em; color: var(--ink-2); margin-left: 14px; font-weight: 400; }
.sj h2 { font-size: 20px; letter-spacing: .14em; margin: 46px 0 10px; }
.sj h2 .en { font-size: 12px; letter-spacing: .1em; color: var(--ink-2); margin-left: 12px; font-weight: 400; }
.sj h3 { font-size: 16px; letter-spacing: .08em; margin: 30px 0 8px; color: var(--cinnabar); }
.sj h4 { font-size: 14.5px; margin: 22px 0 6px; color: var(--ink-2); }
.sj .note { color: var(--ink-2); font-size: 13.5px; line-height: 1.9; }
.sj a { color: var(--cinnabar); }

/* 首页 */
.tp-hero { text-align: center; padding: 46px 0 20px; }
.tp-kicker { font-size: 12.5px; letter-spacing: .32em; color: var(--cinnabar); margin-bottom: 14px; }
.sj-home .tp-hero h1 { font-size: 40px; letter-spacing: .3em; margin: 0 0 14px; }
.tp-lede { color: var(--ink-2); font-size: 15.5px; max-width: 34em; margin: 0 auto; line-height: 1.95; }
.tp-rule { width: 54px; height: 2px; background: var(--cinnabar); margin: 26px auto 0; }
.sj-stat { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin: 22px 0 0; }
.sj-stat b { font-family: Georgia, serif; font-size: 17px; color: var(--ink); margin-right: 3px; }
.sj-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.sj-ch {
  display: flex; align-items: baseline; gap: 9px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; color: var(--ink) !important; font-size: 15px;
}
.sj-ch:hover { border-color: var(--cinnabar); }
.sj-ch .n { font-family: Georgia, serif; font-size: 11.5px; color: var(--ink-2); min-width: 1.9em; }
.sj-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; text-indent: 0 !important; }

/* 工具条 */
.sj-bar {
  position: sticky; top: var(--sj-top, 43px); z-index: 5; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 9px 0; margin-bottom: 8px; font-size: 13.5px; color: var(--ink-2);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.sj-bar label { cursor: pointer; user-select: none; }
.sj-bar input { accent-color: var(--cinnabar); vertical-align: -1px; }
.sj-bar input:disabled + * , .sj-bar label:has(input:disabled) { opacity: .45; cursor: default; }
.sj-legend-link { margin-left: auto; font-size: 12.5px; }
.sj-toc { margin: 10px 0 0; font-size: 14px; }
.sj-toc summary { cursor: pointer; color: var(--ink-2); }
.sj-toc ol { list-style: none; padding: 6px 0 0; margin: 0; columns: 2; column-gap: 24px; }
.sj-toc li { padding: 3px 0; break-inside: avoid; }
.sj-toc li.l3 { padding-left: 1.2em; font-size: 13px; }
.sj-toc li.l3 a { color: var(--ink-2); }

/* 正文 */
.sj-body { font-size: 17.5px; line-height: 2.05; }
.sj-body p { margin: 0 0 .7em; position: relative; }
.sj-body p.li { padding-left: 1em; }
.sj-body .pn {
  font-family: Georgia, serif; font-size: 10.5px; color: var(--ink-2) !important; opacity: .55;
  text-decoration: none; margin-right: 7px; vertical-align: 1px; letter-spacing: 0;
}
.sj-body .pn:hover { opacity: 1; color: var(--cinnabar) !important; }
.sj-body [id], .tbl tr[id] { scroll-margin-top: 100px; }
.sj-body p:target, .tbl tr:target td { background: rgba(160, 58, 42, .10); border-radius: 4px; }
html[data-theme="dark"] .sj-body p:target, html[data-theme="dark"] .tbl tr:target td { background: rgba(208, 112, 92, .16); }
.sj-body blockquote { margin: 0 0 .7em; padding: 2px 0 2px 1.1em; border-left: 2px solid var(--line); }
.sj-body blockquote p { margin: 0 0 .3em; }
.sj-body .blk {
  margin: 18px 0; padding: 14px 18px 8px; background: var(--paper-2);
  border-left: 3px solid var(--cinnabar); border-radius: 0 8px 8px 0;
}
.sj-body .blk-t { font-size: 12px; letter-spacing: .2em; color: var(--cinnabar); margin-bottom: 6px; }
.sj-body i { font-style: normal; }

/* 表 */
.tbl { overflow-x: auto; margin: 16px -18px; padding: 0 18px; }
.tbl table { border-collapse: collapse; font-size: 13.5px; line-height: 1.7; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 5px 8px; vertical-align: top; min-width: 5.5em; max-width: 17em; }
.tbl thead th { background: var(--paper-2); position: sticky; top: 0; white-space: nowrap; }
.tbl tbody th { font-family: Georgia, serif; font-weight: 400; font-size: 11px; color: var(--ink-2); min-width: 0; }

/* 二十二类标注。名词着色，动词加点，成语加波浪线；关掉 .hl 即为白文。 */
.hl i.p { color: #8b2f1f; }            /* 人名 */
.hl i.l { color: #2f6b4f; }            /* 地名 */
.hl i.s { color: #7a4a12; font-weight: 700; } /* 邦国 */
.hl i.o { color: #2c5a8a; }            /* 官职 */
.hl i.y { color: #6a5a8c; }            /* 身份 */
.hl i.t { color: #8a6d1a; }            /* 时间 */
.hl i.d { color: #9a3d6a; }            /* 氏族 */
.hl i.r { color: #a0522d; }            /* 族群 */
.hl i.i { color: #3d7a7a; }            /* 名物 */
.hl i.a { color: #55683a; }            /* 器物 */
.hl i.k { color: #35558f; font-weight: 700; } /* 典籍 */
.hl i.c { color: #7d4f8f; }            /* 思想 */
.hl i.u { color: #8f5f3a; }            /* 礼仪 */
.hl i.g { color: #6b2a2a; }            /* 刑法 */
.hl i.x { color: #3a5fa0; }            /* 天文 */
.hl i.m { color: #8a4aa0; }            /* 神话 */
.hl i.b { color: #4c7a2a; }            /* 生物 */
.hl i.q { color: #666052; }            /* 数量 */
.hl i.vm, .hl i.vx, .hl i.vp, .hl i.ve { text-emphasis: dot; -webkit-text-emphasis: dot; text-emphasis-position: under right; -webkit-text-emphasis-position: under right; }
.hl i.vm { text-emphasis-color: #b03a2a; -webkit-text-emphasis-color: #b03a2a; }
.hl i.vx { text-emphasis-color: #4a2a2a; -webkit-text-emphasis-color: #4a2a2a; }
.hl i.vp { text-emphasis-color: #2c5a8a; -webkit-text-emphasis-color: #2c5a8a; }
.hl i.ve { text-emphasis-color: #8a6d1a; -webkit-text-emphasis-color: #8a6d1a; }
.hl i.z { text-decoration: underline wavy var(--cinnabar-2); text-decoration-thickness: 1px; text-underline-offset: 5px; }

html[data-theme="dark"] .hl i.p { color: #e0907e; }
html[data-theme="dark"] .hl i.l { color: #7fc0a0; }
html[data-theme="dark"] .hl i.s { color: #d9a766; }
html[data-theme="dark"] .hl i.o { color: #86b2e0; }
html[data-theme="dark"] .hl i.y { color: #b3a5d6; }
html[data-theme="dark"] .hl i.t { color: #d6bb63; }
html[data-theme="dark"] .hl i.d { color: #e08cb5; }
html[data-theme="dark"] .hl i.r { color: #dc9a78; }
html[data-theme="dark"] .hl i.i { color: #7cc4c4; }
html[data-theme="dark"] .hl i.a { color: #a9bf86; }
html[data-theme="dark"] .hl i.k { color: #8fb0e8; }
html[data-theme="dark"] .hl i.c { color: #c79bd8; }
html[data-theme="dark"] .hl i.u { color: #d6a67e; }
html[data-theme="dark"] .hl i.g { color: #d98a8a; }
html[data-theme="dark"] .hl i.x { color: #8fb0ea; }
html[data-theme="dark"] .hl i.m { color: #cf98e2; }
html[data-theme="dark"] .hl i.b { color: #9ccc7a; }
html[data-theme="dark"] .hl i.q { color: #a9a292; }
html[data-theme="dark"] .hl i.vm { text-emphasis-color: #e0806c; -webkit-text-emphasis-color: #e0806c; }
html[data-theme="dark"] .hl i.vx { text-emphasis-color: #c9a0a0; -webkit-text-emphasis-color: #c9a0a0; }
html[data-theme="dark"] .hl i.vp { text-emphasis-color: #86b2e0; -webkit-text-emphasis-color: #86b2e0; }
html[data-theme="dark"] .hl i.ve { text-emphasis-color: #d6bb63; -webkit-text-emphasis-color: #d6bb63; }

/* 白话与三家注 */
.sj-body p.tr {
  white-space: pre-line;
  font-size: 14.5px; line-height: 1.9; color: var(--ink-2); margin: -.35em 0 1em;
  padding-left: 1em; border-left: 2px solid var(--line);
  font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
}
sup.nt { display: none; }
.nt-on sup.nt {
  display: inline-block; font-family: Georgia, serif; font-size: 10px; line-height: 1;
  color: var(--cinnabar); cursor: pointer; padding: 1px 3px; margin: 0 1px; vertical-align: super;
  border-radius: 3px; background: rgba(160, 58, 42, .08);
}
.nt-on sup.nt:hover, .nt-on sup.nt.on { background: var(--cinnabar); color: var(--paper); }
.sj-note {
  display: block; margin: 6px 0 12px; padding: 10px 14px; font-size: 14px; line-height: 1.85;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
}
.sj-note b { color: var(--cinnabar); font-size: 12px; letter-spacing: .1em; margin-right: 8px; font-weight: 700; }
.sj-note span { display: block; }
.sj-note span + span { margin-top: 5px; }

.sj-pn { display: flex; justify-content: space-between; gap: 12px; margin: 50px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
.sj-pn a { text-decoration: none; }
.sj-foot { max-width: 820px; margin: 0 auto; padding: 0 18px 50px; font-size: 12.5px; line-height: 1.85; color: var(--ink-2); }
.sj-foot a { color: var(--ink-2); }

@media (max-width: 560px) {
  .sj h1 { font-size: 26px; letter-spacing: .12em; }
  .sj-body { font-size: 16.5px; }
  .sj-toc ol { columns: 1; }
  .sj-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}