/* ============================================
   设计画框（前台 + 后台共用）
   前台页面和后台编辑画布都用同一套 .site-frame 结构和这份样式，
   保证两边看到的比例、位置完全一致。
   - 电脑：设计宽 1184（左侧导航 242 + 内容 902 + 右侧白色竖栏 40，竖栏放「回到顶部」），前台按窗口宽度等比缩放，高度填满窗口
   - 手机：设计宽 390，按屏幕宽度等比缩放，高度 = 屏幕可视高度
   高度（--frame-height）由 js/site-frame.js（前台）和 admin.js（后台所选屏幕）设置。
   要改设计宽度，改下面的 --frame-width 和两处 FRAME_SIZES。
   ============================================ */
@import url('/css/fonts.css'); /* 字体文件放在网站自己的 /fonts/ 里，不依赖谷歌 */

.site-frame {
  --frame-nav-width: 242px;
  --frame-content-width: 902px;
  --frame-side-width: 40px; /* 右侧白色竖栏（「回到顶部」） */
  --frame-mobile-nav-height: 102px;
  --frame-bg: #f7f6f4;
  --frame-text: #454545;
  --frame-line: #cfcfcf;
  --font-heading: 'Zilla Slab', serif;
  --font-body: 'IBM Plex Mono', monospace;
  --font-caption: 'IBM Plex Sans', sans-serif;

  position: relative;
  width: var(--frame-width);
  height: var(--frame-height);
  overflow: hidden;
  background: #fff;
  color: var(--frame-text);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
.site-frame.is-desktop { --frame-width: 1184px; --frame-height: 620px; display: grid; grid-template-columns: var(--frame-nav-width) var(--frame-content-width) var(--frame-side-width); }
.site-frame.is-mobile { --frame-width: 390px; display: block; }

/* 画框内统一的基础样式（:where 不增加优先级，模块自己的样式可以覆盖） */
.site-frame *, .site-frame *::before, .site-frame *::after { box-sizing: border-box; }
.site-frame :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote, section) { margin: 0; padding: 0; }
.site-frame :where(ul, ol) { list-style: none; }
.site-frame :where(a) { color: inherit; text-decoration: none; cursor: pointer; }
.site-frame :where(img, video) { display: block; max-width: 100%; }
.site-frame :where(button, input, select, textarea) { font: inherit; }

/* ---------- 导航（--nav-* 变量来自全站设置 data/site.json，见 js/nav.js 的 applySiteStyles） ---------- */
.frame-nav { background: #fff; }
.frame-nav-item {
  display: block;
  width: max-content;
  font-family: var(--nav-font, var(--font-heading));
  font-weight: 600;
  text-transform: var(--nav-transform, uppercase);
  letter-spacing: var(--nav-letter, 0);
  color: var(--nav-color, #000);
}
.site-frame .frame-nav-item { color: var(--nav-color, #000); }
.frame-nav-item.is-active { text-decoration: underline; }
.frame-nav-item:hover { text-decoration: underline; }

.is-desktop .frame-nav { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: var(--nav-top, 157px) 0 0 var(--nav-left, 63px); background-image: var(--nav-hole-image, none); background-size: var(--nav-hole-size, auto); background-position: var(--nav-hole-position, 0 0); background-repeat: no-repeat; }
.is-desktop .frame-nav-item:last-child { margin-bottom: 0; }
/* 上下位置：上下各一个空白占位，按比例分配剩余空间（黄金分割 382:618 / 居中 1:1 / 靠上 0:1）。文件夹圆孔用背景画 */
.is-desktop .frame-nav::before { content: ""; flex: var(--nav-space-top, 0 0 0px); }
.is-desktop .frame-nav::after { content: ""; flex: var(--nav-space-bottom, 1 1 0px); }
.is-desktop .frame-nav-item { margin-bottom: var(--nav-spacing, 16px); font-size: var(--nav-font-size, 15px); line-height: 1; }
.is-desktop .frame-nav-row { display: block; }

.is-mobile .frame-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  height: var(--frame-mobile-nav-height);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--frame-line);
}
.is-mobile .frame-nav-row { display: flex; width: 339.5px; height: 30px; align-items: center; justify-content: center; gap: var(--nav-spacing, 20px); }
.is-mobile .frame-nav-row + .frame-nav-row { border-top: 1px solid var(--frame-line); }
.is-mobile .frame-nav-item { margin: 0; font-size: var(--nav-font-size, 12px); line-height: 30px; letter-spacing: var(--nav-letter, .04em); white-space: nowrap; }

/* ---------- 内容区（在画框内部滚动） ---------- */
.frame-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--frame-bg);
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.frame-content::-webkit-scrollbar { display: none; }
.frame-content-inner { min-height: 100%; }
/* 模块区域：每个模块（.module-slot，后台为 .canvas-module）按 top 独立定位；
   高度由 js/render-modules.js 的 layoutModuleSlots 设为最下面模块的底部，页尾紧随其后 */
.frame-modules { position: relative; }
.module-slot { position: absolute; top: 0; left: 0; right: 0; }
/* 外壳占满整行宽度，但模块本身可能只占一部分：外壳（和锚点包裹层）不接收鼠标，
   只有模块内容区域接收，这样左右并排、上下重叠的模块不会互相挡住点击和滚动 */
.module-slot, .module-anchor { pointer-events: none; }
.module-slot > :not(.module-anchor), .module-anchor > * { pointer-events: auto; }
.is-desktop .frame-content-inner { padding: 40px 0 var(--page-bottom-space, 90px) 0; } /* 底部留白 = 页尾到页面最底端的距离（全站设置） */
.is-mobile .frame-content { position: absolute; top: var(--frame-mobile-nav-height); right: 0; bottom: var(--totop-bar, 0px); left: 0; height: auto; } /* 底部留给「回到顶部」底栏 */
.is-mobile .frame-content-inner { --content-pad-x: 18px; padding: 24px var(--content-pad-x) var(--page-bottom-space, 80px); }

/* ---------- 模块通用样式（render-modules.js 生成） ---------- */
.site-frame .module { margin-bottom: 48px; }
.site-frame .module-text { font-family: var(--font-body); font-size: 12px; line-height: 1.8; }
.site-frame .module-caption { font-family: var(--font-caption); font-size: 12px; color: #666; }
.site-frame .module-section > * { flex-shrink: 0; }
.is-mobile .module-section { flex-direction: column; }

/* 目录 TOC：字号、字体跟随模块设置 */
.site-frame .hero-toc { gap: 24px; }
.site-frame .hero-toc .hero-toc-item { flex: 1 1 0; }
.site-frame .hero-toc a:link, .site-frame .hero-toc a:visited, .site-frame .hero-toc a:hover, .site-frame .hero-toc a:active { color: inherit; } /* 跟随目录设置的颜色 */
.site-frame .toc-index { opacity: .47; margin-bottom: 4px; } /* 目录颜色的浅色版（默认黑色时 ≈ #888） */
.site-frame .toc-title { font-weight: 600; text-decoration: underline; }
.site-frame .toc-desc { opacity: .67; margin-top: 4px; } /* 默认黑色时 ≈ #555 */
.is-mobile .hero-toc { gap: 16px; }

/* 可滚动文本框：框的宽度 = 模块宽度，紧贴文字；只上下滚动；滚动箭头在框外右侧 */
.site-frame .module-scrollbox { position: relative; }
.site-frame .scrollbox-box { border: 1px solid var(--frame-line); padding: 8px 10px; }
.site-frame .scrollbox-inner { overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; scrollbar-width: none; }
.site-frame .scrollbox-inner::-webkit-scrollbar { display: none; }
.site-frame .scrollbox-inner > * { margin: 0; }
.site-frame .scrollbox-arrows { position: absolute; top: 0; bottom: 0; left: 100%; margin-left: 6px; width: 14px; display: flex; flex-direction: column; align-items: center; visibility: hidden; }
.site-frame .module-scrollbox.has-overflow .scrollbox-arrows { visibility: visible; }
.site-frame .scrollbox-arrows button { flex: none; width: 14px; height: 14px; padding: 0; border: none; background: none; cursor: pointer; color: var(--frame-text); font-size: 12px; line-height: 1; }
.site-frame .scrollbox-arrows button:disabled { opacity: .25; cursor: default; }
.site-frame .scrollbox-track { flex: 1; width: 1px; margin: 4px 0; background: var(--frame-line); }

.site-frame .module-audio { display: flex; align-items: center; gap: 12px; }
.site-frame .module-audio button { border: none; background: none; cursor: pointer; font-size: 16px; }
.site-frame .module-audio .track { flex: 1; height: 2px; background: var(--frame-line); position: relative; }
.site-frame .module-audio .track { cursor: pointer; touch-action: none; }
.site-frame .module-audio .track::before { content: ''; position: absolute; inset: -10px 0; }
.site-frame .module-audio .track .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--frame-text); }
.site-frame .module-audio .track .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--frame-text); position: absolute; top: 50%; transform: translate(-50%, -50%); }
.site-frame .module-audio time { flex: none; font-family: var(--font-caption); font-size: 11px; color: #888; font-variant-numeric: tabular-nums; }

/* 多图：横向 = 统一高度（--multi-row-height），宽度按原图比例，放不下自动换行；纵向 = 统一为模块宽度，高度按比例 */
.site-frame .module-multi-image { display: flex; gap: var(--multi-gap, 16px); }
.site-frame .module-multi-image.is-row { flex-wrap: wrap; align-items: flex-start; }
.site-frame .module-multi-image.is-column { flex-direction: column; }
.site-frame .multi-image-item { display: table; flex: none; } /* 说明文字宽度跟随图片 */
.site-frame .multi-image-item figcaption { display: table-caption; caption-side: bottom; padding-top: 6px; }
.site-frame .is-row .multi-image-item :is(img, video) { display: block; width: auto; max-width: none; height: var(--multi-row-height); }
.site-frame .is-column .multi-image-item { width: 100%; }
.site-frame .is-column .multi-image-item :is(img, video) { display: block; width: 100%; height: auto; }
.site-frame .multi-image-empty { display: grid; place-items: center; color: #999; font-family: var(--font-caption); background: repeating-linear-gradient(45deg, #fff 0 8px, #f0eeea 8px 16px); }
/* 错落（瀑布流）：几列等宽，每列里的图片按原始比例上下排，各列高低错落 */
.site-frame .module-multi-image.is-masonry { align-items: flex-start; }
.site-frame .masonry-column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--multi-gap, 16px); }
/* 满行对齐：每行等高、铺满宽度（每张的宽度比例由 setupJustifiedGallery 按图片宽高比设置）；最后一行不拉伸 */
.site-frame .module-multi-image.is-justify { flex-wrap: wrap; }
.site-frame .module-multi-image.is-justify::after { content: ''; flex-grow: 1000000; }
.site-frame .is-justify .multi-image-item { flex: 1 1 calc(var(--multi-row-height, 240px) * 1.33); min-width: 0; }
.site-frame .is-masonry .multi-image-item, .site-frame .is-justify .multi-image-item { display: block; width: 100%; }
.site-frame .is-justify .multi-image-item { width: auto; }
.site-frame .is-masonry .multi-image-item :is(img, video), .site-frame .is-justify .multi-image-item :is(img, video) { display: block; width: 100%; height: auto; }
.site-frame .is-masonry .multi-image-item figcaption, .site-frame .is-justify .multi-image-item figcaption { display: block; }
.site-frame .is-masonry .multi-image-empty, .site-frame .is-justify .multi-image-empty { width: 100%; aspect-ratio: 4 / 3; }
/* 自由排列：每张图在模块框内绝对定位（位置、大小保存在每张图的 free 里） */
.site-frame .module-multi-image.is-free { display: block; position: relative; min-height: 40px; }
.site-frame .is-free .multi-image-item { position: absolute; display: block; }
.site-frame .is-free .multi-image-item :is(img, video) { display: block; width: 100%; height: auto; }
.site-frame .is-free .multi-image-item figcaption { display: block; }
.site-frame .is-free .multi-image-empty { width: 100%; aspect-ratio: 4 / 3; }
/* 可以点击放大的图片：鼠标移上去时放大 5%，提示可以点开（不用放大镜光标） */
.site-frame [data-lightbox] .multi-image-item img { cursor: pointer; transition: transform .3s ease; }
.site-frame [data-lightbox] .multi-image-item:hover { z-index: 2; }
.site-frame [data-lightbox] .multi-image-item:hover img { transform: scale(1.05); }
/* 单张图片、图文、图片文件夹里的图也可以点开放大：鼠标移上去显示手形光标（不放大，悬停放大只用于多图模块） */
.site-frame [data-no-zoom] img { cursor: auto !important; }
/* 时间模块：每一项一行（地点 / 日期 / 时间） */
.site-frame .module-datetime span { display: block; white-space: pre-wrap; }
/* 文字高亮：背景用阴影向左右各延伸一点，不改变文字宽度（两端对齐不受影响）；换行时每一行都有完整的高亮 */
.site-frame mark { background: var(--hl-bg, #2b2b2b); color: var(--hl-color, #f7f6f4); box-shadow: .15em 0 0 var(--hl-bg, #2b2b2b), -.15em 0 0 var(--hl-bg, #2b2b2b); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 精细两端对齐：每一行单独一块，行内不再自动换行；剩下不到 1px 的误差由 text-align-last 补齐 */
/* 排好版之前先不显示，排好后淡入，避免页面打开时间距先变大再跳回来 */
.site-frame [data-fine-justify]:not(.fj-ready) { opacity: 0; }
.site-frame [data-fine-justify].fj-ready { transition: opacity .15s ease; }
.site-frame .is-fine-justified { text-indent: 0; }
.site-frame .is-fine-justified .fj-para, .site-frame .is-fine-justified .fj-line { display: block; }
.site-frame .is-fine-justified .fj-line { white-space: nowrap; }
.site-frame .is-fine-justified .fj-justified { text-align: justify; text-align-last: justify; }
.site-frame [data-saturate] :is(img, video) { filter: saturate(var(--img-saturate, 100%)); }
/* 图片显示区域（裁切）：图片铺满外框，加载前先用 4:3 占位 */
.site-frame .image-crop { position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.site-frame .image-crop > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.site-frame .image-crop > img,
.site-frame figure.module:not(.module-panorama) > img, .site-frame .module-image-text > img, .site-frame .module-image-folder .folder-panel img { cursor: pointer; }
.site-frame .is-row .multi-image-empty { height: var(--multi-row-height); aspect-ratio: 4 / 3; }
.site-frame .is-column .multi-image-empty { width: 100%; aspect-ratio: 4 / 3; }

.site-frame .module-video { position: relative; }
.site-frame .video-frame { position: relative; width: 100%; overflow: hidden; background: #111; }
.site-frame .video-frame > iframe, .site-frame .video-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; object-fit: cover; }
.site-frame .video-placeholder, .site-frame .video-poster { position: absolute; inset: 0; display: grid; place-items: center; }
.site-frame .video-placeholder { color: #999; font-family: var(--font-caption); background: repeating-linear-gradient(45deg, #fff 0 8px, #f0eeea 8px 16px); }
.site-frame .video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-frame button.video-poster { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: #111; cursor: pointer; }
.site-frame button.video-poster .video-play { transition: background .2s ease, transform .2s ease; }
.site-frame button.video-poster:hover .video-play { background: rgba(0, 0, 0, .78); transform: scale(1.06); }
.site-frame .video-play { position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding-left: 5px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 24px; }
.site-frame .video-kind { position: absolute; left: 10px; bottom: 8px; padding: 2px 6px; background: rgba(0, 0, 0, .55); color: #fff; font-family: var(--font-caption); font-size: 11px; }

/* 图片文件夹（手风琴）的样式在 js/render-modules.js 的 IMAGE_FOLDER_CSS 中 */

/* 长画横向滑动：框里只显示一部分，左右滑动查看；不显示系统滚动条，下方一条细进度线 */
.site-frame .panorama-scroller { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
.site-frame .panorama-scroller::-webkit-scrollbar { display: none; }
.site-frame .panorama-scroller img { display: block; max-width: none; height: auto; }
.site-frame .panorama-progress { position: relative; height: 1px; margin-top: 8px; background: var(--frame-line); }
.site-frame .panorama-hint { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; color: #999; line-height: 0; } /* 细线尖角箭头 ‹ ›：左边贴图片左边缘，右边贴图片右边缘 */
.site-frame .panorama-hint svg { display: block; }
.site-frame .panorama-progress span { position: absolute; top: -1px; height: 3px; background: var(--frame-line); } /* 和下方轨道线同色，靠粗细区分当前位置 */

/* 图文模块：8 种版式（--it-width 图片宽度 / 文字框宽度，--it-gap 间距） */
.site-frame .module-image-text .image-text-media { display: block; width: 100%; height: auto; }
.site-frame .module-image-text .multi-image-empty.image-text-media { aspect-ratio: 4 / 3; }
.site-frame .module-image-text.is-left, .site-frame .module-image-text.is-right { display: grid; column-gap: var(--it-gap); }
.site-frame .module-image-text.is-top .image-text-media, .site-frame .module-image-text.is-bottom .image-text-media { width: var(--it-width); }
.site-frame .module-image-text.is-top .image-text-copy { margin-top: var(--it-gap); }
.site-frame .module-image-text.is-bottom .image-text-copy { margin-bottom: var(--it-gap); }
/* 文字环绕：图片浮动在一侧，文字绕着排，超过图片高度后占满整个宽度 */
.site-frame .module-image-text.is-wrap-left, .site-frame .module-image-text.is-wrap-right { display: flow-root; }
.site-frame .module-image-text.is-wrap-left .image-text-media { float: left; width: var(--it-width); margin: 0 var(--it-gap) calc(var(--it-gap) * .6) 0; }
.site-frame .module-image-text.is-wrap-right .image-text-media { float: right; width: var(--it-width); margin: 0 0 calc(var(--it-gap) * .6) var(--it-gap); }
/* 文字压在图上 */
.site-frame .module-image-text.is-overlay { position: relative; }
.site-frame .image-text-overlay { position: absolute; width: var(--it-width); max-width: calc(100% - var(--it-gap) * 2); }
.site-frame .image-text-overlay.is-top { top: var(--it-gap); }
.site-frame .image-text-overlay.is-bottom { bottom: var(--it-gap); }
.site-frame .image-text-overlay.is-middle { top: 50%; transform: translateY(-50%); }
.site-frame .image-text-overlay.is-left { left: var(--it-gap); }
.site-frame .image-text-overlay.is-right { right: var(--it-gap); }
.site-frame .image-text-overlay.is-center { left: 50%; transform: translateX(-50%); }
.site-frame .image-text-overlay.is-middle.is-center { transform: translate(-50%, -50%); }

/* 文字里的超链接：带下划线，颜色跟随文字 */
.site-frame :is(.module-text, .module-caption, .toc-desc) a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.site-frame :is(.module-text, .module-caption, .toc-desc) a:hover { opacity: .6; }

/* 按钮模块（回到顶部 / 跳到锚点 / 打开网址）：样式 text / underline / outline / filled，颜色 = --button-color */
.site-frame .module-button { display: inline-block; color: var(--button-color, #454545); cursor: pointer; transition: opacity .2s ease, background .2s ease, color .2s ease; }
.site-frame .module-button.is-text:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-frame .module-button.is-underline { text-decoration: underline; text-underline-offset: .2em; }
.site-frame .module-button.is-underline:hover { opacity: .6; }
.site-frame .module-button.is-outline { padding: .6em 1.1em; border: 1px solid var(--button-color, #454545); }
.site-frame .module-button.is-outline:hover { background: var(--button-color, #454545); color: #fff; }
.site-frame .module-button.is-filled { padding: .6em 1.1em; border: 1px solid var(--button-color, #454545); background: var(--button-color, #454545); color: #fff; }
.site-frame .module-button.is-filled:hover { opacity: .8; }

/* 目录锚点（空的 Section）：后台一条细虚线标出跳转位置；前台是看不见的 0 高度元素 */
.site-frame { --anchor-line: 1px dashed #b5b1aa; } /* 锚点灰色细虚线 */
.site-frame .module-anchor-marker { position: relative; height: 14px; border-top: 1px dashed rgba(179, 131, 79, .45); }
.site-frame .module-anchor-marker.has-line { border-top: var(--anchor-line); }
.site-frame .module-anchor-marker span { position: absolute; top: 2px; left: 0; padding: 0 4px; background: rgba(247, 246, 244, .9); color: #b3834f; font-family: var(--font-caption); font-size: 10px; line-height: 12px; white-space: nowrap; }
.site-frame .anchor-point { height: 0; }
.site-frame .anchor-point.has-line { border-top: var(--anchor-line); }

/* 还没放内容的模块：只在后台画布显示这个占位框，前台不渲染 */
.site-frame .module-empty { display: grid; place-items: center; min-height: 90px; padding: 12px; border: 1px dashed #bdb6ab; background: rgba(255, 255, 255, .55); color: #9a948a; font-family: var(--font-caption); font-size: 12px; text-align: center; }

/* ---------- 固定的「回到顶部」（全站设置 backToTop；在画框里、滚动区域之外，不随页面滚动） ---------- */
.site-frame .frame-totop { position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; background: none; color: var(--totop-color, #454545); font-family: var(--totop-font, var(--font-body)); font-weight: var(--totop-weight, 600); letter-spacing: var(--totop-letter, .12em); cursor: pointer; transition: opacity .3s ease; }
/* 未滚动时只隐藏文字（白色竖栏 / 底栏保持不动，页面不会跳） */
.site-frame .frame-totop > * { transition: opacity .3s ease; }
.site-frame .frame-totop.is-hidden { pointer-events: none; }
.site-frame .frame-totop.is-hidden > * { opacity: 0; }
/* 电脑版：右侧白色竖栏里竖排，固定在右下角 */
.is-desktop .frame-totop { right: 0; top: var(--totop-top, auto); bottom: var(--totop-bottom, 40px); transform: translateY(var(--totop-translate, 0)); width: 40px; display: flex; flex-direction: column; align-items: center; gap: var(--totop-gap, 8px); font-size: var(--totop-font-size, 10px); }
.is-desktop .frame-totop .totop-label { writing-mode: vertical-rl; text-transform: var(--totop-transform, uppercase); }
.is-desktop .frame-totop:hover .totop-label { text-decoration: underline; text-underline-offset: .25em; }
/* 手机版：页面最下面一条白色细栏（和顶部导航栏同样风格），横排「↑ BACK TO TOP」，内容区在它上方结束、不被遮住 */
.is-mobile .frame-totop { left: 0; right: 0; bottom: 0; height: var(--totop-bar-height, 32px); display: flex; align-items: center; justify-content: var(--totop-justify, center); gap: var(--totop-gap, 6px); padding: 0 14px; background: #fff; border-top: 1px solid var(--frame-line); font-size: var(--totop-font-size, 10px); }
.is-mobile .frame-totop .totop-label { text-transform: var(--totop-transform, uppercase); }

/* ---------- 页尾 / Contact ---------- */
/* --footer-* 变量来自全站设置 data/site.json（见 js/nav.js 的 applySiteStyles） */
.site-frame .site-footer {
  border-top: var(--footer-border, 1px) solid var(--frame-line);
  padding: var(--footer-pt, 40px) var(--footer-pr, 0px) var(--footer-pb, 40px) var(--footer-pl, 0px);
  margin-top: var(--footer-mt, 80px);
  min-height: var(--footer-min-height, 0px);
  font-family: var(--footer-font, var(--font-caption));
  font-size: var(--footer-font-size, 13px);
  color: var(--footer-color, inherit);
  text-align: var(--footer-align, left);
}
.site-frame .site-footer .contact-line { margin-bottom: var(--footer-line-gap, 4px); }
.site-frame .site-footer a { color: inherit; }
.site-frame .site-footer a:hover { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- 卡片（点开详情页） ---------- */
.site-frame .module-card { margin: 0; }
.site-frame .module-card .card-date { margin-bottom: .5em; }
.site-frame .module-card [data-card-open] { cursor: pointer; }
.site-frame .module-card .card-media :is(img, video) { display: block; width: 100%; height: auto; }
.site-frame .module-card.is-grayscale .card-media :is(img, video) { filter: grayscale(1); }
.site-frame .module-card .card-caption { margin-top: .5em; }
.site-frame .module-card .card-caption:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-frame .module-card .card-empty { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px dashed #c9c5bf; color: #9a968f; font-size: 11px; }
/* 详情页：盖住正文区域，自己上下滚动 */
.site-frame .card-detail { position: absolute; z-index: 6; background: var(--frame-bg); animation: card-detail-in .25s ease; }
.site-frame .card-detail-scroll { height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.site-frame .card-detail-scroll::-webkit-scrollbar { display: none; }
.site-frame .card-detail-close { position: absolute; top: 8px; right: 14px; z-index: 3; padding: 4px 6px; border: 0; background: none; color: var(--frame-text, #454545); font-size: 26px; line-height: 1; cursor: pointer; }
@keyframes card-detail-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 单屏页面（页面设置里开启）：正好一屏、不滚动，页尾固定在最下面 ---------- */
.site-frame.is-single-screen .frame-content { overflow: hidden; }
.site-frame.is-single-screen .frame-content-inner { height: 100%; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; }
.site-frame.is-single-screen .frame-modules { flex: 1 1 auto; min-height: 0; }
.site-frame.is-single-screen .site-footer { flex: none; }
/* 贴边的图片：铺满内容区整个宽度，手机版盖住左右 18px 留白（图片模块里的「贴边」选项） */
.site-frame figure.module.is-bleed { width: calc(100% + 2 * var(--content-pad-x, 0px)) !important; margin-left: calc(-1 * var(--content-pad-x, 0px)) !important; margin-right: 0 !important; padding: 0 !important; transform: none !important; }
.site-frame figure.module.is-bleed > :is(img, video, .image-crop) { width: 100% !important; }

/* Contact 页：所有链接（邮箱、INS 等）都不带下划线，照样可以点 */
.site-frame.page-contact :is(.module-text, .module-caption) a { text-decoration: none; }

/* 单屏页面不需要「回到顶部」：电脑版右侧不显示，手机版底栏也去掉 */
.site-frame.is-single-screen .frame-totop { display: none; }
.is-mobile.is-single-screen .frame-content { bottom: 0; }

/* 文字里的邮箱：不加下划线，点一下打开写邮件 */
.site-frame :is(.module-text, .module-caption) a[href^="mailto:"] { color: inherit; text-decoration: none; }

/* 不显示页尾的页面：最下面内容离页面底端的留白（页面设置，默认电脑 60 / 手机 40） */
.site-frame.no-footer .frame-content-inner { padding-bottom: var(--page-end-space, 60px); }

/* ---------- 多图：方块网格（像手机相册），黑白显示 ---------- */
.site-frame .module-multi-image.is-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 5), minmax(0, 1fr)); gap: var(--multi-gap, 16px); }
.site-frame .is-grid .multi-image-item { display: block; width: 100%; margin: 0; overflow: hidden; }
.site-frame .is-grid .multi-image-item :is(img, video) { display: block; width: 100%; height: auto; aspect-ratio: var(--grid-ratio, 1 / 1); object-fit: cover; }
.site-frame .is-grid .multi-image-empty { aspect-ratio: var(--grid-ratio, 1 / 1); }
.site-frame .module-multi-image.is-grayscale .multi-image-item :is(img, video) { filter: grayscale(1); }
/* 方块网格：每张图可以放大只露出局部（以「显示区域」为中心）；鼠标移上去在这个基础上再放大一点 */
.site-frame .is-grid .multi-image-item :is(img, video) { transform: scale(var(--zoom, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); transition: transform .3s ease; }
.site-frame .is-grid[data-lightbox] .multi-image-item:hover :is(img, video) { transform: scale(calc(var(--zoom, 1) * 1.05)); }
/* 多图：对比度（整体 × 每张），和黑白、饱和度一起作用 */
.site-frame .module-multi-image .multi-image-item :is(img, video) { filter: saturate(var(--img-saturate, 100%)) contrast(calc(var(--img-contrast, 1) * var(--all-contrast, 1))); }
.site-frame .module-multi-image.is-grayscale .multi-image-item :is(img, video) { filter: grayscale(1) contrast(calc(var(--img-contrast, 1) * var(--all-contrast, 1))); }