/* ============================================================
 * styles.css — 卡片渲染契约层
 * ------------------------------------------------------------
 * 本文件只负责两件事：
 *   1) 项目自带字体（Noto Sans SC 分片 / 可变字重 100..900）
 *   2) 小红书卡片的**结构与渲染契约**（.card / .card-* / .ratio-*）
 *
 * ⚠️ 应用外壳（页头、按钮、三栏布局、工具条、弹窗…）已全部迁到
 *    design-system.css。此文件不再包含任何外壳样式。
 *
 * ⚠️ 卡片是出图契约，请勿随意改动：
 *    · --card-w: 360px 是导出采样基准（前端 html2canvas 按 1080/360 = 3 倍
 *      采样，服务端 cardRenderer.js 也用 360px）。改它会让预览排版与导出
 *      图不一致。
 *    · --font-scale 由顶部字号滑块控制。
 *    · 卡片配色/字体由 themes/*.css 经 /api/themes.css 提供（--bg / --fg /
 *      --accent / --accent-soft / --font 等 11 个变量），本文件只定义结构。
 *
 * 加载顺序：styles.css → design-system.css → /api/themes.css
 * （卡片样式被其它页面单独复用：admin 主题实时预览 iframe、_verify/*）
 * ============================================================ */

/* @import 必须排在所有规则之前：前端预览、前端导出与服务端 PNG 共用同一套
   字体文件，保证本地 Windows 与线上 Linux 出图完全一致、可复现。
   详见 fonts/SOURCES.json */
@import url("/fonts/noto-sans-sc.css");
@import url("/fonts/noto-color-emoji.css");

/* ============== 基础 ============== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* —— 卡片契约变量（勿改） —— */
  --card-w: 360px;            /* 预览/导出基准宽度，导出 scale=3 → 1080px */
  --ratio: 1.3333;            /* 默认 3:4 */
  --font-scale: 1;            /* 预览字号缩放（由顶部滑块控制） */

  /* —— 旧令牌别名 ——
     供仅加载 styles.css 的页面继续可用（admin 主题预览 iframe、_verify/*）。
     完整设计令牌见 design-system.css，后者加载在后、优先生效。 */
  --bg-app: #f7f8fa;
  --bg-panel: #ffffff;
  --border: #e2e5ea;
  --text: #14171b;
  --text-soft: #78808a;
  --brand: #ff2e4d;
}

html, body { height: 100%; }

body {
  font-family: "Noto Sans SC", "Noto Color Emoji", "PingFang SC", "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-app);
  color: var(--text);
}

/* ============== 小红书卡片 ============== */
.card {
  width: var(--card-w);
  min-height: calc(var(--card-w) * var(--ratio));
  background: var(--bg);
  color: var(--fg);
  border-radius: 0;
  padding: 20px;
  /* 预览区阴影已收敛为中性分层（导出时 cardToCanvas 会显式置 none，不影响成品） */
  box-shadow: 0 1px 2px rgba(16, 20, 28, .06), 0 10px 28px rgba(16, 20, 28, .07);
  /* 卡片字体：主题 --font 首位是自带字体（见 themes/*.css）；后面是 --font 缺失时的兜底。
     不用「"Noto Sans SC", var(--font)」的写法 —— 会和主题 --font 里的 Noto 撞成重复 */
  font-family: var(--font, "Noto Sans SC", "Noto Color Emoji", sans-serif);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.card .note-tag {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.card-title {
  font-size: calc(22px * var(--font-scale, 1));
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 16px;
  color: var(--title-color, var(--fg));
  position: relative;
  padding-left: 14px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.card-title::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 6px;
  border-radius: 4px;
  background: var(--accent);
}
/* 一级标题（首卡标题）：大字号、左对齐、去左侧色条（对齐原站 42px / 800 / 行高1.5） */
.card-title.card-title-cover {
  position: relative;
  z-index: 1;                 /* 标题文字位于装饰引号之上 */
  font-size: calc(42px * var(--font-scale, 1));
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--title-color, var(--fg));
  padding-left: 0;
  margin-bottom: 0;
}
.card-title.card-title-cover::before { display: none; }

/* 首卡容器：对齐原站 .xhs-cover（position:relative + flex 列 + 垂直居中），
   让引号/标题相对于内容区定位，且整体在卡片内垂直居中 */
.card-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}
/* 首卡内 body 不参与拉伸，保证与标题作为整体垂直居中 */
.card-cover .card-body { flex: 0 0 auto; }

/* 后续卡片内容容器：与首卡一致，标题+正文整体垂直居中，页码在底部 */
.card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}
.card-content .card-body { flex: 0 0 auto; }

/* 首卡装饰引号（对齐原站 .xhs-cover-quote：top:-16px / left:0，相对 .card-cover 内容区） */
.card-cover-quote {
  position: absolute;
  top: calc(-16px * var(--font-scale, 1));
  left: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(152px * var(--font-scale, 1));
  line-height: 1;
  font-weight: 900;
  color: var(--accent);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
/* 首卡右下角下引号（与左上引导同款样式，完整字形停在底边内侧、距卡片底≈14px，与上引导对称） */
.card-cover-quote-end {
  position: absolute;
  top: calc(100% - 54px * var(--font-scale, 1));
  right: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(152px * var(--font-scale, 1));
  line-height: 1;
  font-weight: 900;
  color: var(--accent);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* 标题内加粗 = 荧光笔刷高亮（主题可自定义 --title-highlight） */
.card-title strong,
.card-title.card-title-cover strong {
  font-weight: 800;
  color: var(--title-color, var(--fg));
  background: var(--title-highlight, linear-gradient(transparent 58%, var(--accent-soft) 58%));
  padding: 0 4px;
  border-radius: 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.card-body { font-size: calc(15px * var(--font-scale, 1)); line-height: 1.85; flex: 1 1 auto; }
.card-body > * + * { margin-top: 12px; }
.card-body p { word-break: break-word; overflow-wrap: anywhere; }
.card-body strong { color: var(--accent); font-weight: 700; }
.card-body em { font-style: italic; }
.card-body a { color: var(--accent); text-decoration: underline; }

/* 卡片内段落首标记换行：行首（忽略 emoji）出现 **xxx** 时，整段（含标签与后续内容）独立成块换行 */
.card-tag-line { }
.card-tag-line p { margin: 0; }

.card-body ul, .card-body ol { padding-left: 22px; }
.card-body li { margin: 6px 0; word-break: break-word; overflow-wrap: anywhere; }
.card-body ul li::marker { color: var(--accent); }
.card-body ol li::marker { color: var(--accent); font-weight: 600; }

.card-body blockquote {
  position: relative;
  background: var(--accent-soft);
  padding: 16px 18px 16px 22px;
  border-radius: 0 10px 10px 0;
  color: var(--quote-color, var(--fg));
  margin: 10px 0;
}
.card-body blockquote::before {
  content: "\201C";            /* 左双引号 “ */
  position: absolute;
  top: -16px; left: 0;
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 50px;
  line-height: 1;
  color: var(--accent);
  opacity: .42;
}
.card-body blockquote::after {
  content: "\201D";            /* 右双引号 ” */
  position: absolute;
  bottom: -30px; right: 4px;
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 50px;
  line-height: 1;
  color: var(--accent);
  opacity: .42;
}

.card-body pre.code {
  background: var(--code-bg);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace, "Noto Sans SC";
  font-size: calc(13px * var(--font-scale, 1));
  line-height: 1.6;
}
.card-body code.inline {
  background: var(--code-bg);
  padding: 1px 6px;
  border-radius: 5px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace, "Noto Sans SC";
  font-size: calc(13px * var(--font-scale, 1));
}

/* 表格：遵循主题配色（accent 表头、accent-soft 底、fg 单元格、border-soft 描边） */
.card-body .table-wrap { overflow-x: auto; }
.card-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: calc(14px * var(--font-scale, 1));
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-soft, rgba(0,0,0,.1));
}
.card-body thead { background: var(--accent-soft); }
.card-body th {
  color: var(--accent);
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 2px solid var(--accent);
  text-align: left;
}
.card-body td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,.08));
  color: var(--fg);
  word-break: break-word;
}
.card-body tr:last-child td { border-bottom: none; }

/* 页码（对齐原站 .xhs-page-number：左下角、主题 accent 色、13px、600、无边框） */
.card-foot {
  margin-top: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-align: left;
  letter-spacing: .02em;
}

/* 单张保存按钮（导出时忽略：导出逻辑会移除 .card-dl） */
.card-dl {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 7px;
  cursor: pointer;
  z-index: 5;
  opacity: .82;
  transition: opacity .15s;
}
.card-dl:hover { opacity: 1; }

/* ============== 比例（出图契约：--ratio 决定导出高度） ============== */
.ratio-3-4 { --ratio: 1.3333; }
.ratio-3-5 { --ratio: 1.6667; }
.ratio-1-1 { --ratio: 1; }