/* ============================================================
   base.css — reset、字體、版面容器、紙張背景、標題與內文排版
   引用順序：tokens.css → base.css → 其他
   ============================================================ */

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tp-header-h) + var(--tp-space-4));
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;              /* 手機 375px 不得出現水平捲軸 */
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: var(--tp-ink-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--tp-cinnabar-dark);
}

ul[class],
ol[class] {
  list-style: none;
}

:where([hidden]) {
  display: none !important;
}

/* ---------- 字體與內文 ---------- */
body {
  font-family: var(--tp-font-sans);
  font-size: var(--tp-fs-body);
  font-weight: var(--tp-fw-regular);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink);
  background-color: var(--tp-paper);
  /* 紙張紋理：細微粒 + 溫暖漸層，純 CSS 漸層堆疊 */
  background-image:
    radial-gradient(rgba(59, 53, 44, 0.028) 1px, transparent 1.2px),
    radial-gradient(rgba(59, 53, 44, 0.02) 1px, transparent 1.2px),
    linear-gradient(180deg, #FBF7EF 0%, var(--tp-paper) 40%, #F8F3E7 100%);
  background-size: 22px 22px, 34px 34px, 100% 100%;
  background-position: 0 0, 11px 17px, 0 0;
}

/* 淡色大國字漂浮裝飾（放在 body 底下的固定層，由樣板注入 .tp-float-layer） */
.tp-float-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.tp-float-layer .tp-float-char {
  position: absolute;
  font-family: var(--tp-font-serif);
  font-weight: var(--tp-fw-black);
  color: rgba(59, 53, 44, 0.045);
  line-height: 1;
  user-select: none;
  animation: tp-float 14s ease-in-out infinite;
}

@keyframes tp-float {
  0%, 100% { transform: translateY(0) rotate(var(--tp-float-rot, 0deg)); }
  50% { transform: translateY(-14px) rotate(var(--tp-float-rot, 0deg)); }
}

/* ---------- 標題階層 ---------- */
h1, .tp-h1,
h2, .tp-h2,
h3, .tp-h3,
h4, .tp-h4 {
  font-family: var(--tp-font-serif);
  font-weight: var(--tp-fw-black);
  line-height: var(--tp-lh-title);
  color: var(--tp-ink);
  text-wrap: balance;
}

h1, .tp-h1 { font-size: var(--tp-fs-h1); }
h2, .tp-h2 { font-size: var(--tp-fs-h2); }
h3, .tp-h3 { font-size: var(--tp-fs-h3); font-weight: var(--tp-fw-bold); }
h4, .tp-h4 { font-size: var(--tp-fs-h4); font-weight: var(--tp-fw-bold); }

p {
  max-width: 68ch;   /* 中文行長上限，超過不好讀 */
}

.tp-lead {
  font-size: var(--tp-fs-lead);
  color: var(--tp-ink-soft);
}

.tp-caption {
  font-size: var(--tp-fs-caption);
  color: var(--tp-ink-faint);
  line-height: 1.7;
}

.tp-kai {
  font-family: var(--tp-font-kai);
}

/* 手繪底線：關鍵詞標示（朱砂波浪） */
.tp-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' viewBox='0 0 24 6'%3E%3Cpath d='M1 4 Q6 1 12 3.5 T23 3' fill='none' stroke='%23C05B4B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 24px 6px;
  padding-bottom: 0.35em;
}

/* 螢光筆標記（琥珀淡底） */
.tp-mark {
  background: linear-gradient(180deg, transparent 55%, var(--tp-amber-soft) 55%, var(--tp-amber-soft) 92%, transparent 92%);
  padding: 0 0.1em;
}

/* ---------- 版面容器 ---------- */
.tp-container {
  width: 100%;
  max-width: var(--tp-container);
  margin-inline: auto;
  padding-inline: var(--tp-space-4);
}

@media (min-width: 640px) {
  .tp-container {
    padding-inline: var(--tp-space-6);
  }
}

/* 直欄堆疊的區段垂直節奏 */
.tp-stack > * + * {
  margin-top: var(--tp-stack-gap, var(--tp-space-4));
}

.tp-section {
  padding-block: var(--tp-space-10);
}

@media (min-width: 640px) {
  .tp-section {
    padding-block: var(--tp-space-16);
  }
}

/* ---------- 無障礙 ---------- */
:focus-visible {
  outline: 3px solid var(--tp-focus-ring);
  outline-offset: 2px;
  border-radius: var(--tp-radius-s);
}

.tp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 點擊 target 不要太貼手機螢幕邊緣 */
:target {
  scroll-margin-top: calc(var(--tp-header-h) + var(--tp-space-4));
}

/* ---------- 動效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tp-float-layer .tp-float-char {
    animation: none;
  }
}