/* 暖调家书：浅米纸面 + 胡桃棕字 + 陶土红点睛。
* 全部挂在 html.theme-warm 下（由 js/theme-preview.js 在首绘前加上），不带该类的访客完全不受影响。
* 必须是页面上最后加载的样式表。设计规格见 docs/white-theme-plan-2026-11-08.md。
* 规则：只改颜色、遮罩、阴影；不动布局、字号和交互。
*/
/* ───────── 1. 全站令牌（登录后应用 + 支付页） ───────── */
@media screen {
html.theme-warm body.theme-c {
--vg-bg:#faf2e6; --vg-paper:#fff9ef; --vg-soft:#f2e3d0;
--vg-sunlit:#f8ead2; --vg-folio:#e4c6a4;
--vg-ink:#392922; --vg-ink2:#6b5143; --vg-ink3:#7c6051;
/* line 只做纯装饰分隔线（对纸面仅 1.37:1）；控件边界一律用 line-strong（3.16:1） */
--vg-line:#e1cfb9; --vg-line-strong:#ad8569;
--vg-seal:#994732; --vg-seal-dk:#763323; --vg-seal-soft:#f6dfd3; --vg-on-seal:#fff5e5;
--vg-info:#994732;
--vg-ok:#536648; --vg-ok-soft:rgba(83,102,72,.1);
--vg-wait:#8a5b0c; --vg-wait-soft:rgba(138,91,12,.1);
--vg-danger:#a3281a;
--vg-shadow-pop:0 18px 44px -18px rgba(76,43,27,.38);
--vg-night:#2b1b13; --vg-on-night:#fff1d8; --vg-on-night-dim:#eedbc0;
--vg-shade:rgb(76 43 27 / 16%);
--desk-line:rgba(76,43,27,.14); --desk-panel:#fff9ef; --desk-hover:#f2e3d0;
color-scheme: light;
}
/* 遮罩：暖棕代替绿黑 */
html.theme-warm body.theme-c .modal-overlay:not(#auth-modal),
html.theme-warm body.theme-c .mm-modal-back {
background: rgba(43,27,19,.55); backdrop-filter: blur(6px);
}
html.theme-warm body.theme-c :is(.mm-scope,.mm-merge)::backdrop { background: rgba(43,27,19,.55); }
html.theme-warm body.checkout-film #error-overlay { background: rgba(250,242,230,.96); }
html.theme-warm body.theme-c #gallery-grid .gallery-item > [class*="bg-black"] {
background: rgba(43,27,19,.82) !important;
}
/* 弹窗、菜单阴影改轻 */
html.theme-warm body.theme-c .mm-app .mm-chapter-tools > .mm-row {
background: var(--vg-paper); box-shadow: 0 16px 40px rgba(76,43,27,.18);
}
html.theme-warm body.theme-c :is(.mm-app,.mm-modal) .mm-btn-danger:hover:not(:disabled) {
background: rgba(163,40,26,.08);
}
/* 照片编辑画布：深胡桃底，浅色控件 */
html.theme-warm body.theme-c #editor-modal { background: var(--vg-night); }
html.theme-warm body.theme-c #editor-modal #editor-canvas-wrap { background: var(--vg-night) !important; }
}
/* ───────── 2. 书房书架：陶土红布面书封 ───────── */
@media screen {
html.theme-warm body.theme-c #view-memoir .st-shelf { border-bottom-color: var(--vg-folio); }
html.theme-warm body.theme-c #view-memoir .st-bk .lb { background: var(--vg-paper); color: var(--vg-ink); }
html.theme-warm body.theme-c #view-memoir .st-bk.cur,
html.theme-warm body.theme-c #view-memoir .st-bk.cur :is(.blank,.in) {
background: var(--vg-seal); color: var(--vg-on-seal);
}
html.theme-warm body.theme-c #view-memoir .st-bk .ribbon { background: var(--vg-folio); }
}
/* ───────── 3. 登录 / 注册窗 ───────── */
@media screen {
html.theme-warm body.theme-c #auth-modal {
--auth-bg:#fff9ef; --auth-paper:#392922; --auth-muted:#6b5143; --auth-accent:#994732;
--auth-line:#e1cfb9;
--vg-soft:#f2e3d0; --vg-line-strong:#ad8569;
--ui-surface:#fff9ef;
background: rgba(43,27,19,.6); backdrop-filter: blur(8px); color-scheme: light;
}
html.theme-warm body.theme-c #auth-modal #auth-dialog { box-shadow: 0 24px 80px rgba(76,43,27,.3); }
html.theme-warm body.theme-c #auth-modal input:not([type=hidden]) { border-color: var(--vg-line-strong); }
html.theme-warm body.theme-c #auth-modal input:focus { background: #fff; }
html.theme-warm body.theme-c #auth-modal form button[type=submit] { color: var(--vg-on-seal, #fff5e5); }
}
/* ───────── 4. 访客首页：已由 css/landing.css 自带暖色（不依赖本主题），旧的 .hf-* 覆盖已删除 ───────── */
/* 以下仅屏幕：静态页自带的打印规则（白纸黑字）不能被奶油字覆盖 */
@media screen {
/* ───────── 5. 静态内容页（隐私/条款/帮助/服务/示例/why-memoir/404，共用 .film-page） ───────── */
html.theme-warm .film-page {
--hf-bg:#faf2e6; --hf-deep:#2b1b13; --hf-paper:#392922; --hf-muted:#6b5143;
--hf-accent:#994732; --hf-seal:#994732; --hf-line:rgba(76,43,27,.22);
color-scheme:light;
}
html.theme-warm .film-page :where(.fp-skip,.wm-skip) { background:#392922; color:#fff5e5; }
html.theme-warm .film-page .fp-button { background:#994732; color:#fff5e5; }
html.theme-warm .film-page .fp-button:hover { background:#763323; color:#fff5e5; }
html.theme-warm .film-page .fp-cta { background:radial-gradient(ellipse at center,rgba(228,198,164,.3),transparent 65%); }
/* 暗区：照片罩图的头图、深色页脚，保持奶油字 */
html.theme-warm .film-page :is(.fp-hero,.fp-footer) {
--hf-paper:#fff1d8; --hf-muted:#eedbc0; --hf-accent:#f2b896; --hf-line:rgba(255,241,216,.35);
color:#fff1d8;
}
html.theme-warm .film-page .fp-hero::before {
background:linear-gradient(90deg,rgba(43,27,19,.92),rgba(43,27,19,.55) 55%,rgba(43,27,19,.15)),
linear-gradient(0deg,#2b1b13,transparent 45%);
}
html.theme-warm .film-page .fp-footer { background:#2b1b13; }
@media (max-width:600px) {
html.theme-warm .film-page .fp-hero::before {
background:linear-gradient(90deg,rgba(43,27,19,.83),rgba(43,27,19,.45)),linear-gradient(0deg,#2b1b13,transparent 55%);
}
}
/* ───────── 7. 静态页里「纸面」类组件（--hf-paper 在静态页被换成文字色，纸面必须单独给） ───────── */
html.theme-warm .fp-book { background:#fff9ef; color:#392922; box-shadow:0 24px 64px rgba(76,43,27,.18); }
html.theme-warm .fp-book section+section { border-top-color:rgba(76,43,27,.2); }
html.theme-warm .fp-book h2, html.theme-warm .fp-book h3 { color:#392922; }
html.theme-warm .fp-book p { color:#392922; }
html.theme-warm .fp-book :is(.fp-book-no,.fp-book-meta,.fp-book-figure figcaption) { color:#6b5143; }
html.theme-warm .why-memoir .wm-figure--opening { background:#fff9ef; box-shadow:0 24px 64px rgba(76,43,27,.2); }
html.theme-warm .fp-compare .fp-tag { background:rgba(43,27,19,.78); color:#fff1d8; }
html.theme-warm .fp-compare figure:last-child .fp-tag { background:#994732; color:#fff5e5; }
html.theme-warm .fp-digest-grid li { background:rgba(255,249,239,.6); }
}
/* ───────── 8. 零散修正（审计脚本发现） ───────── */
@media screen {
/* 危险红字写在陶土红实心按钮上会红压红（1.15:1）→ 描边危险按钮 */
html.theme-warm body.theme-c .people-clear.vg-btn {
background: transparent; color: var(--vg-danger); border: 1px solid var(--vg-danger);
}
html.theme-warm body.theme-c .people-clear.vg-btn:hover { background: rgba(163,40,26,.08); }
}
/* ───────── 9. 阅读页：暖调书页（仅屏幕；打印沿用 style.css 的白纸黑字） ───────── */
@media screen {
/* 版心：正文约 34em，居中；章首、小标题与正文同一条线 */
html.theme-warm body.theme-c .mm-book .mm-story > :is(h3,.meta,.mm-reading-body,.mm-persp) {
max-width: min(100%, calc(34 * var(--pub-size-body, 18px))); margin-inline: auto; width: 100%;
}
/* 章首：短朱线 + 朱砂色时期 */
html.theme-warm body.theme-c .mm-book .mm-chapter > h2::before {
content: ""; display: block; width: 48px; height: 3px; margin: 0 auto 24px; background: var(--vg-seal);
}
html.theme-warm body.theme-c .mm-book .mm-chapter .period { color: var(--vg-seal); }
/* 照片：暖色相框 */
html.theme-warm body.theme-c .mm-book .photos figure img {
border: 6px solid var(--vg-paper); outline: 1px solid var(--vg-line);
box-shadow: 0 6px 18px rgba(76,43,27,.14);
}
html.theme-warm body.theme-c .mm-book .photos figcaption { color: var(--vg-ink2); }
/* 补充讲述：像夹在书页里的便笺 */
html.theme-warm body.theme-c .mm-book .mm-persp {
background: var(--vg-sunlit); border: 1px solid var(--vg-line);
padding: 16px 24px; border-radius: 12px; color: var(--vg-ink);
}
html.theme-warm body.theme-c .mm-book .mm-persp h4 { color: var(--vg-seal-dk); }
}
/* ───────── 10. 新规范：卡片不做单侧边框；嵌套圆角 = 外圆角 − 间距 ───────── */
@media screen {
/* 补充讲述（书页之外的故事页里也一样）：四周一圈细线 */
html.theme-warm body.theme-c .mm-app .mm-persp { border: 1px solid var(--vg-line); border-radius: 12px; }
/* 侧栏里的可点卡片：原来只有左边一条朱线，改成四周细线，悬停时描边变朱红。主栏里的列表行是分隔线样式，不受影响 */
html.theme-warm body.theme-c .mm-app .mm-card.clickable:not(.mm-col-main > .mm-card) { border: 1px solid var(--vg-line); }
html.theme-warm body.theme-c .mm-app .mm-card.clickable:not(.mm-col-main > .mm-card):hover { border-color: var(--vg-seal); }
/* 外层 12、内边距 8：内层按钮取 4 */
html.theme-warm body.theme-c .mm-app .ms-story .ms-more-actions .ms-tools .ms-tool { --desk-control: 4px; border-radius: 4px; }
/* 外层 16、内边距 8：菜单里的按钮取 8 */
html.theme-warm body.theme-c .qi-workspace .qi-menu-list .qi-btn { --desk-control: 8px; }
/* 照片外面的透明按钮和图片同一个圆角，键盘焦点环才贴着图片 */
html.theme-warm body.theme-c .mm-cover > .mm-photo-zoom { --desk-control: 6px; border-radius: 6px; }
html.theme-warm body.theme-c .mm-story .photos figure > .mm-photo-zoom { --desk-control: 2px; border-radius: 2px; }
}
/* ───────── 11. 没有书时的书房首屏：照片是压暗的，字必须是浅色（和首页首屏同一组奶油色） ───────── */
@media screen {
html.theme-warm body.theme-c #view-memoir .st-empty > img { filter: brightness(.32) saturate(.7); }
html.theme-warm body.theme-c #view-memoir .st-empty .hi { color: #e8d3b6; }
html.theme-warm body.theme-c #view-memoir .st-empty h1 { color: #fff9ef; }
html.theme-warm body.theme-c #view-memoir .st-empty .lead { color: #f1e4d0; }
}
/* ───────── 12. 照片 / 我的 两个分区的页面：标题和内容共用一条左边缘，内容列只有两档宽度 ─────────
之前页面条（标题）左边留 64px，各页内容列却各自居中、宽度 384 / 576 / 672 / 896 不等，照片库又是 32px 内边距，
标题和内容对不齐。现在页面条和页面内容用同一个内边距，内容列靠左，网格类页面 896，其余 672。
书页（#view-memoir）有自己的版心，不在这里。 */
@media screen {
html.theme-warm body.theme-c #main-app { --vg-page-pad: 16px; }
@media (min-width: 768px) {
html.theme-warm body.theme-c #main-app { --vg-page-pad: 64px; }
}
html.theme-warm body.theme-c #main-app .vg-pagebar { padding-inline: var(--vg-page-pad); }
html.theme-warm body.theme-c #main-app .view-section:not(#view-memoir) { padding-inline: var(--vg-page-pad); }
html.theme-warm body.theme-c #main-app .view-section:not(#view-memoir) > div[class*="max-w-"] { margin-inline: 0 auto; max-width: 672px; }
html.theme-warm body.theme-c #main-app #view-persons.view-section > div[class*="max-w-"] { max-width: 896px; }
}
/* ───────── 13. 书页版心：页面条和内容共用一条版心，只有两档 ─────────
工作页（整本书 / 目录和全部功能 / 讲述页）：外框 1120，内文 1040。
阅读页（读书 / 单篇故事）：外框 880，内文 800。
之前是 1040 / 1120 / 900 / 880 各页不同，页面条（返回、标题、操作）又是一条 1320 宽的居中工具条，和内容左右都对不齐。
现在页面条的最大宽度按当前版心算（版心 + 两侧内边距）并居中，返回和标题落在内文左边缘，操作按钮落在内文右边缘；内边距仍是 64px / 手机 16px，落在间距表上。 */
@media screen {
html.theme-warm body.theme-c #main-app { --vg-col: 1040px; }
html.theme-warm body.theme-c #main-app:has(#view-memoir :is(.mm-book, .ms-story)) { --vg-col: 800px; }
html.theme-warm body.theme-c #main-app.theme-memoir[data-group="memoir"] #vg-pagebar {
width: 100%; max-width: calc(var(--vg-col) + 2 * var(--vg-page-pad)); margin-inline: auto;
padding-inline: var(--vg-page-pad);
}
html.theme-warm body.theme-c #view-memoir .mm-wrap.mm-guide { max-width: 1120px; }
html.theme-warm body.theme-c #view-memoir .mm-app .mm-book { max-width: 882px; } /* 882 = 内文 800 + 两侧内边距 40 + 两侧 1px 边框 */
@media (min-width: 1024px) {
html.theme-warm body.theme-c #view-memoir .mm-app .mm-book { padding-inline: 40px; }
}
}