/* ============================================================
   my.css · 自定义样式覆盖层（DICOMPNET/pinyin 私有）
   ------------------------------------------------------------
   作用机制（方案 A：覆盖层）：
   - 本文件由 template.html / index.html / main.html 在 </body>
     前通过 <link> 引入，位于原 <style> 之后，相同选择器的规则
     会覆盖原样式；四个工具页由 build.js 从 template.html 构建，
     CI（build.yml）将本文件一并组装进 dist 分支部署。
   - 原项目（tjsky/pinyin-annotator）更新内容时直接
     `git fetch upstream && git merge upstream/main` 即可，
     HTML 内联的 <style> 会跟着更新，但本文件不受影响。
   - 原项目若新增 class / 结构，可能需要在这里补几条覆盖规则。

   优先级提示：
   - 想强确保覆盖，在规则末尾加 !important，或用更具体的选择器。
   - :root 里的 CSS 变量只对引用了该变量的原样式生效，
     原样式若写死了颜色值则需直接覆盖对应选择器。
   ============================================================ */

/* ── 主题色变量覆盖示例（取消注释即生效） ──────────────
   :root {
     --bg:          #faf6ee;   背景宣纸米白
     --paper:       #fffdf6;   卡片纸面
     --ink:         #3a3733;   主文字墨色
     --ink-soft:    #7a7468;   次要文字
     --line:        #ece5d4;   分割线
     --accent:      #b65f2a;   朱砂主色（原 #d97b3f 偏橙，此处压暗）
     --accent-dark: #8f4a1f;
     --accent-light:#f6e7d6;
   }
   ─────────────────────────────────────────────────────── */

/* ── 中文阅读排版微调（正文/FAQ 适用） ── */
.faq div,
.card li,
section > p {
  letter-spacing: 0.02em;
}

/* ── 卡片轻量化示例（取消注释即生效） ──────────────────
   .card { border: none; box-shadow: 0 1px 4px rgba(90,70,40,.05); }
   ─────────────────────────────────────────────────────── */


/* ============================================================
   以下为 my.js 注入元素的样式（覆盖层配套）
   用 var() 带回退，适配各页不同的 CSS 变量定义
   ============================================================ */

/* 顶部「更多」链接：模仿 #lang-sw 按钮外观 */
.my-more {
  display: inline-block;
  margin-left: 4px;
  padding: 4px 12px;
  font-size: 12.5px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--line, #e6dfd2);
  border-radius: 999px;
  background: var(--paper, #fffdf8);
  color: var(--ink-soft, #7a7468);
  transition: background .15s, color .15s, border-color .15s;
}
.my-more:hover {
  background: var(--accent, #d97b3f);
  border-color: var(--accent, #d97b3f);
  color: #fff;
}

/* 返回顶部按钮：右下角 fixed */
.my-totop {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--accent, #d97b3f);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  opacity: .9;
  z-index: 9999;
  transition: opacity .2s, transform .2s;
}
.my-totop:hover { opacity: 1; transform: translateY(-2px); }
.my-totop[hidden] { display: none; }

/* 底部版权声明：与 footer 原内容整合为连续一块，不单独分隔 */
.my-copyright {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--ink-soft, #7a7468);
}