/* ============================================================
   史記 講讀 · 視覺設計
   配色取自宋元工筆畫與印章朱砂
   ============================================================ */

:root {
  /* 宣紙、墨色 */
  --paper:       #f6efde;
  --paper-deep:  #ece1c5;
  --paper-edge:  #d8c896;
  --ink:         #1d1916;
  --ink-soft:    #4a4036;
  --ink-light:   #6b6258;
  --ink-fade:    #8a7e6f;

  /* 朱砂、靛青、黛紫、金箔 —— 用於名詞標色 */
  --vermilion:   #b3322a;   /* 人名 */
  --indigo:      #2c5a8a;   /* 地名 */
  --purple:      #6f4c89;   /* 官名 / 制度 */
  --ochre:       #ad7e1a;   /* 典故 */
  --jade:        #4d7a4b;   /* 兵器 / 器物 */
  --crimson:     #8a1f1f;   /* 章節印章 */

  --gold-line:   #c0982b;   /* 金句下劃線 */
  --gold-bg:     #fbeeb888; /* 金句淡底 */

  --shadow-1:    0 2px 8px rgba(60, 40, 10, 0.08);
  --shadow-2:    0 8px 28px rgba(60, 40, 10, 0.14);

  --serif-zh:    "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Source Han Serif SC", "Source Han Serif CN", serif;
  --kai-zh:      "Ma Shan Zheng", "STKaiti", "KaiTi", "Kaiti SC", "楷体", var(--serif-zh);
  --sans-zh:     "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

/* ---------- 基礎 ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-zh);
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* 宣紙紋理 */
body {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(180, 140, 60, 0.05) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(140, 90, 30, 0.04) 0, transparent 40%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  min-height: 100vh;
}

a { color: var(--crimson); text-decoration: none; border-bottom: 1px dotted transparent; transition: 0.15s; }
a:hover { border-bottom-color: var(--crimson); color: #5a1010; }

::selection { background: var(--gold-bg); color: var(--ink); }

/* ---------- 頁眉 ---------- */
.page-head {
  text-align: center;
  padding: 48px 24px 24px;
  border-bottom: 1px solid var(--paper-edge);
  position: relative;
}

.page-head::before, .page-head::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px; background: var(--paper-edge);
}
.page-head::before { top: 28px; }
.page-head::after  { bottom: 12px; }

.page-head .booklet {
  font-family: var(--kai-zh);
  font-size: 14px;
  color: var(--ink-fade);
  letter-spacing: 0.5em;
  margin-bottom: 8px;
}

.page-head h1 {
  font-family: var(--serif-zh);
  font-size: 44px;
  letter-spacing: 0.2em;
  margin: 8px 0;
  font-weight: 600;
  color: var(--ink);
}

.page-head .subtitle {
  font-family: var(--kai-zh);
  font-size: 17px;
  color: var(--ink-soft);
  letter-spacing: 0.15em;
}

.page-head .author {
  font-size: 14px;
  color: var(--ink-light);
  margin-top: 6px;
  letter-spacing: 0.3em;
}

/* 章節序號的朱印 */
.seal {
  display: inline-block;
  background: var(--crimson);
  color: var(--paper);
  font-family: var(--kai-zh);
  padding: 4px 10px;
  font-size: 14px;
  letter-spacing: 0.2em;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 12px;
  box-shadow: var(--shadow-1);
}

/* ---------- 主版心 ---------- */
.layout {
  max-width: 1380px;
  margin: 0 auto;
  padding: 24px 28px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-gap: 32px;
}

.main-col { min-width: 0; }
.side-col { min-width: 0; position: relative; }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .side-col { order: 2; }
}

/* ---------- 段落卡片 ---------- */
.para {
  position: relative;
  padding: 18px 22px 18px 56px;
  margin: 14px 0 22px;
  background: rgba(255, 250, 232, 0.55);
  border-left: 3px solid var(--paper-edge);
  border-radius: 0 4px 4px 0;
  box-shadow: var(--shadow-1);
}

.para .para-num {
  position: absolute;
  left: 14px; top: 18px; bottom: 18px;
  width: 26px;
  font-family: var(--kai-zh);
  color: var(--ink-fade);
  font-size: 13px;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.para .gu {
  font-family: var(--serif-zh);
  font-size: 19px;
  line-height: 2.0;
  color: var(--ink);
  letter-spacing: 0.05em;
  text-align: justify;
}

.para .bai {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--paper-edge);
  font-family: var(--sans-zh);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-light);
}

.para .bai::before {
  content: "白話";
  display: inline-block;
  background: var(--ink-fade);
  color: var(--paper);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 2px;
  margin-right: 8px;
  letter-spacing: 0.2em;
  vertical-align: 2px;
}

/* ---------- 名詞標色 ---------- */
.n-person  { color: var(--vermilion); font-weight: 500; }
.n-place   { color: var(--indigo);   font-weight: 500; }
.n-office  { color: var(--purple);   font-weight: 500; }
.n-allude  { color: var(--ochre);    font-weight: 500; border-bottom: 1px dotted var(--ochre); cursor: help; }
.n-thing   { color: var(--jade);     font-weight: 500; }

/* ---------- 金句 ---------- */
.golden {
  background: linear-gradient(180deg, transparent 65%, var(--gold-bg) 65%);
  padding: 0 2px;
  font-weight: 600;
  position: relative;
}
.golden::after {
  content: "★";
  font-size: 9px;
  color: var(--gold-line);
  vertical-align: super;
  margin-left: 1px;
}

/* ---------- 注音（ruby）---------- */
ruby { ruby-align: center; }
rt {
  font-family: var(--sans-zh);
  font-size: 0.55em;
  color: var(--ink-light);
  letter-spacing: 0;
  font-weight: 400;
  user-select: none;
}

/* 顯式 tooltip（hover 顯示） */
[data-tip] { position: relative; cursor: help; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 130%; left: 50%; transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans-zh);
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: pre-wrap;
  width: max-content;
  max-width: 280px;
  z-index: 50;
  box-shadow: var(--shadow-2);
  pointer-events: none;
}

/* ---------- 右側典故欄 ---------- */
.side-col h3 {
  font-family: var(--serif-zh);
  font-size: 17px;
  letter-spacing: 0.3em;
  color: var(--crimson);
  border-bottom: 2px solid var(--crimson);
  padding-bottom: 6px;
  margin: 24px 0 12px;
}

.side-col .panel {
  position: sticky;
  top: 16px;
  background: rgba(255, 250, 232, 0.7);
  padding: 16px 18px;
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  box-shadow: var(--shadow-1);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.side-col .panel::-webkit-scrollbar { width: 6px; }
.side-col .panel::-webkit-scrollbar-thumb { background: var(--paper-edge); border-radius: 3px; }

.note-item {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--paper-edge);
}
.note-item:last-child { border-bottom: 0; }

.note-item .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.15em;
  padding: 1px 6px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: 1px;
}
.tag-allude { background: var(--ochre); color: var(--paper); }
.tag-word   { background: var(--ink-fade); color: var(--paper); }
.tag-fig    { background: var(--vermilion); color: var(--paper); }
.tag-place  { background: var(--indigo); color: var(--paper); }
.tag-office { background: var(--purple); color: var(--paper); }

.note-item .head {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.note-item .body {
  font-family: var(--sans-zh);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- 太史公曰 ---------- */
.taishigong {
  margin: 36px 0 16px;
  padding: 22px 28px;
  background:
    linear-gradient(180deg, rgba(179, 50, 42, 0.06), rgba(179, 50, 42, 0.02)),
    var(--paper);
  border: 1px solid rgba(179, 50, 42, 0.25);
  border-left: 5px solid var(--crimson);
  border-radius: 0 4px 4px 0;
  position: relative;
}
.taishigong::before {
  content: "太史公曰";
  position: absolute;
  top: -14px; left: 24px;
  background: var(--crimson);
  color: var(--paper);
  font-family: var(--kai-zh);
  font-size: 14px;
  letter-spacing: 0.3em;
  padding: 3px 14px;
  border-radius: 2px;
  box-shadow: var(--shadow-1);
}
.taishigong .gu { font-size: 18px; }
.taishigong .bai { color: var(--ink-soft); }

/* ---------- 篇末总结 ---------- */
.summary, .summary-block {
  margin-top: 48px;
  padding: 28px 32px;
  background: rgba(248, 240, 215, 0.7);
  border: 1px solid var(--paper-edge);
  border-radius: 6px;
  box-shadow: var(--shadow-1);
}

.summary h2, .summary-block h2 {
  font-family: var(--serif-zh);
  font-size: 22px;
  letter-spacing: 0.3em;
  color: var(--crimson);
  margin: 0 0 6px;
  border-bottom: 2px double var(--crimson);
  padding-bottom: 8px;
}

.summary h3, .summary-block h3 {
  font-family: var(--serif-zh);
  font-size: 17px;
  letter-spacing: 0.2em;
  color: var(--ink);
  margin: 24px 0 10px;
}

.summary p, .summary li, .summary-block p, .summary-block li {
  font-family: var(--sans-zh);
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}

.summary-block ol, .summary-block ul { padding-left: 24px; }

.summary blockquote, .summary-block blockquote {
  margin: 12px 0;
  padding: 8px 16px;
  border-left: 3px solid var(--ochre);
  background: rgba(173, 126, 26, 0.08);
  font-family: var(--serif-zh);
  font-size: 16px;
  color: var(--ink);
}
.summary blockquote cite, .summary-block blockquote cite {
  display: block;
  margin-top: 4px;
  font-family: var(--sans-zh);
  font-size: 12.5px;
  color: var(--ink-fade);
  font-style: normal;
}

.golden-list {
  list-style: none;
  padding: 0;
}
.golden-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--paper-edge);
  font-family: var(--serif-zh);
  font-size: 16px;
  color: var(--ink);
}
.golden-list li small {
  display: block;
  font-family: var(--sans-zh);
  font-size: 12.5px;
  color: var(--ink-fade);
  margin-top: 2px;
}

/* ---------- 導航 ---------- */
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  background: rgba(255, 250, 232, 0.85);
  border-bottom: 1px solid var(--paper-edge);
  font-family: var(--kai-zh);
  letter-spacing: 0.2em;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
}
.nav-bar a { color: var(--ink-soft); padding: 2px 4px; }
.nav-bar a:hover { color: var(--crimson); }
.nav-bar .home { font-size: 16px; color: var(--crimson); }
.nav-bar .center { font-size: 14px; color: var(--ink-fade); }

/* ---------- 索引頁 ---------- */
.intro {
  max-width: 920px;
  margin: 32px auto 24px;
  padding: 0 24px;
  font-family: var(--serif-zh);
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
  text-align: justify;
}
.intro p { margin: 12px 0; }
.intro strong { color: var(--ink); }

.legend {
  max-width: 920px;
  margin: 12px auto 24px;
  padding: 14px 20px;
  background: rgba(255, 250, 232, 0.8);
  border: 1px dashed var(--paper-edge);
  border-radius: 4px;
  font-family: var(--sans-zh);
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i {
  display: inline-block; width: 14px; height: 14px; border-radius: 2px;
}

.section-block {
  max-width: 1200px;
  margin: 36px auto;
  padding: 0 24px;
}

.section-title {
  font-family: var(--serif-zh);
  font-size: 28px;
  letter-spacing: 0.4em;
  color: var(--crimson);
  text-align: center;
  margin: 24px 0 6px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--crimson);
  position: relative;
}
.section-title small {
  display: block;
  font-family: var(--kai-zh);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--ink-fade);
  margin-top: 6px;
}

.chap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.chap-card {
  display: block;
  padding: 14px 16px;
  background: rgba(255, 250, 232, 0.7);
  border: 1px solid var(--paper-edge);
  border-left: 4px solid var(--ink-fade);
  border-radius: 4px;
  transition: 0.2s;
  position: relative;
}
.chap-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  background: rgba(255, 248, 220, 0.95);
  border-left-color: var(--crimson);
}
.chap-card.is-deluxe { border-left-color: var(--crimson); background: rgba(255, 240, 200, 0.65); }
.chap-card.is-deluxe::after {
  content: "精講";
  position: absolute;
  top: 8px; right: 8px;
  background: var(--crimson);
  color: var(--paper);
  font-family: var(--kai-zh);
  font-size: 10px;
  letter-spacing: 0.15em;
  padding: 1px 5px;
  border-radius: 2px;
}

.chap-card .no {
  font-family: var(--kai-zh);
  font-size: 11px;
  color: var(--ink-fade);
  letter-spacing: 0.15em;
}
.chap-card .ti {
  display: block;
  margin: 4px 0 2px;
  font-family: var(--serif-zh);
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0.08em;
}
.chap-card .meta {
  font-family: var(--sans-zh);
  font-size: 11.5px;
  color: var(--ink-fade);
}

/* ---------- 簡頁（未配講讀的章節）---------- */
.basic-page .para .gu { font-size: 18px; }
.basic-banner {
  margin: 16px 0 24px;
  padding: 14px 18px;
  background: rgba(173, 126, 26, 0.08);
  border: 1px dashed var(--ochre);
  border-radius: 4px;
  font-family: var(--sans-zh);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.8;
}
.basic-banner strong { color: var(--ochre); }

/* ---------- 頁腳 ---------- */
footer {
  text-align: center;
  padding: 32px 24px;
  font-family: var(--kai-zh);
  font-size: 13px;
  color: var(--ink-fade);
  letter-spacing: 0.3em;
  border-top: 1px solid var(--paper-edge);
}

/* ---------- 典故汇编（glossary）---------- */
.glossary-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 28px 72px;
}

.glossary-jump {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 8px;
  padding: 12px 14px;
  background: rgba(255, 250, 232, 0.92);
  border: 1px solid var(--paper-edge);
  border-radius: 6px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(6px);
}
.glossary-jump a {
  font-family: var(--kai-zh);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding: 4px 12px;
  border: 1px solid var(--paper-edge);
  border-radius: 16px;
  transition: 0.15s;
}
.glossary-jump a:hover {
  color: var(--crimson);
  border-color: var(--crimson);
  background: var(--gold-bg);
}
.glossary-jump a small {
  margin-left: 5px;
  font-family: var(--sans-zh);
  font-size: 11px;
  color: var(--ink-fade);
}

.glossary-section {
  margin: 38px 0 8px;
  scroll-margin-top: 64px;
}
.glossary-cat {
  font-family: var(--serif-zh);
  font-size: 22px;
  letter-spacing: 0.2em;
  color: var(--crimson);
  border-bottom: 2px double var(--crimson);
  padding-bottom: 8px;
  margin: 0 0 4px;
}
.glossary-cat .tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.15em;
  padding: 2px 8px;
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: 3px;
}
.glossary-cat small {
  font-family: var(--sans-zh);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink-fade);
  margin-left: 10px;
}
.glossary-cat-intro {
  font-family: var(--sans-zh);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-light);
  margin: 4px 0 18px;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.term-card {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: rgba(255, 250, 232, 0.6);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--paper-edge);
  border-radius: 0 4px 4px 0;
  box-shadow: var(--shadow-1);
  transition: 0.15s;
}
.term-card:hover {
  border-left-color: var(--crimson);
  background: rgba(255, 248, 220, 0.85);
}
.term-head {
  font-family: var(--serif-zh);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.5;
}
.term-head .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.15em;
  padding: 1px 6px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: 2px;
  font-weight: 400;
}
.term-body {
  font-family: var(--sans-zh);
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--ink-soft);
  flex: 1;
}
.term-refs {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--paper-edge);
  font-family: var(--kai-zh);
  font-size: 12px;
  color: var(--ink-fade);
  letter-spacing: 0.1em;
}
.term-refs .ref-chip {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 1px 8px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 12px;
  font-size: 12px;
  transition: 0.15s;
}
.term-refs .ref-chip:hover {
  color: var(--crimson);
  border-color: var(--crimson);
}

@media (max-width: 640px) {
  .glossary-wrap { padding: 16px 16px 56px; }
  .glossary-grid { grid-template-columns: 1fr; }
}