/* HTML 版的共用樣式（網頁、之後的 PDF 與圖卡都從這份長出來）。
   顏色與字體只用下面的變數；各品牌在自己的主題檔（book.yaml 的 html-css）裡覆寫變數就好，不必改這份。 */

:root {
  --c-text: #222;
  --c-muted: #666;
  --c-accent: #2a6f78;     /* 主色：節標題、連結、方框 */
  --c-accent2: #b4572b;    /* 輔色：故事框標題、重點 */
  --c-bg: #fff;
  --c-soft: #f6f3ef;       /* 淺底：故事框 */
  --c-line: #d9dee0;
  --c-th: #e8f0f1;         /* 表頭底色 */
  --f-body: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --f-head: var(--f-body);
  --w-head: 700;
  --measure: 46rem;        /* 內文最大寬度 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2.5rem) 4rem;
  max-width: calc(var(--measure) + 5rem);
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--f-body); font-size: 17px; line-height: 1.85;
  text-align: justify; text-justify: inter-character;
}

/* 封面與書名區 */
.cover { margin: 0 0 2.5rem; text-align: center; }
.cover img { max-width: min(100%, 520px); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
#title-block-header { margin: 0 0 2.5rem; text-align: left; }
#title-block-header .title { font-family: var(--f-head); font-weight: var(--w-head); font-size: 2rem; line-height: 1.35; margin: 0; }
#title-block-header .subtitle { font-size: 1.1rem; color: var(--c-muted); margin: .4rem 0 0; }
#title-block-header .author, #title-block-header .date { color: var(--c-muted); margin: .3rem 0 0; }

/* 目錄 */
nav#TOC { margin: 0 0 3rem; padding: 1.2rem 1.5rem; background: var(--c-soft); border-radius: 12px; }
#toc-title { font-size: 1.2rem; color: var(--c-accent); margin: 0 0 .5rem; }
nav#TOC ul { list-style: none; margin: 0; padding-left: 0; }
nav#TOC ul ul { padding-left: 1.4em; font-size: .93em; }
nav#TOC li { margin: .15em 0; }
nav#TOC a { color: var(--c-text); }

/* 標題 */
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: var(--w-head); line-height: 1.4; text-align: left; }
h1 { font-size: 2rem; margin: 4rem 0 .4rem; padding-bottom: .5rem; border-bottom: 2px solid var(--c-accent); }
h2 { font-size: 1.5rem; color: var(--c-accent); margin: 2.6rem 0 .8rem; }
h3 { font-size: 1.15rem; margin: 2rem 0 .7rem; padding-left: .6rem; border-left: 4px solid var(--c-accent); }
h4 { font-size: 1rem; margin: 1.5rem 0 .4rem; }
.subtitle { display: block; color: var(--c-muted); margin: .2rem 0 1.2rem; text-align: left; }

p { margin: 0 0 1rem; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 700; }
ul, ol { padding-left: 1.6em; margin: 0 0 1rem; }
li { margin: .3em 0; }
li::marker { color: var(--c-accent); }
img { max-width: 100%; height: auto; border-radius: 12px; }
p > img:only-child { display: block; margin: 1.5rem auto; }

/* 表格：窄螢幕可以左右捲 */
table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: .88em; line-height: 1.65; text-align: left; }
th { background: var(--c-th); font-weight: 700; }
th, td { padding: .55em .7em; border-bottom: 1px solid var(--c-line); vertical-align: top; }
@media (max-width: 640px) {
  table { display: block; overflow-x: auto; white-space: normal; }
  th, td { min-width: 7em; }
}

/* 部的開頭：插圖 → 「第一部」小標 → 大標題 → 副標 → 這一部的小目錄 */
img.part-art { display: block; width: 100%; margin: 3rem 0 1.5rem; }
h1.part { margin-top: 0; }
h1.part .part-label { display: block; font-size: .5em; color: var(--c-accent); letter-spacing: .1em; margin-bottom: .2rem; }
.part-toc { margin: 1.5rem 0 2.5rem; padding: 1rem 1.4rem; background: var(--c-soft); border-radius: 12px; }
.part-toc > p { font-weight: 700; color: var(--c-accent); margin-bottom: .3rem; }
.part-toc ul { margin: 0; }

/* 方框（::: box）、故事框（::: story） */
.box { border: 1.5px solid var(--c-accent); border-radius: 12px; padding: 1rem 1.3rem .4rem; margin: 1.6rem 0; background: #fff; }
.box > h3 { border: 0; padding: 0; margin: .2rem 0 .8rem; color: var(--c-accent); }
.story { background: var(--c-soft); border-radius: 12px; padding: 1.1rem 1.4rem .3rem; margin: 1.8rem 0; }
.story > p:first-child { color: var(--c-accent2); margin-bottom: .7rem; }
.story > p:last-child { color: var(--c-muted); font-size: .88em; }

/* 小工具 */
.right { display: block; text-align: right; }
.center { display: block; text-align: center; }
.small { font-size: .88em; }

/* 分章網頁版（chunkedhtml）的上一頁／下一頁 */
nav.chunk-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; margin: 1rem 0; padding: .8rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); font-size: .92em; }
nav.chunk-nav .top { text-align: center; }
nav.chunk-nav .next { text-align: right; }
nav.chunk-nav + * { margin-top: 2rem; }