/* ============================================================
   主页弹窗组件样式（v1.8.7）
   ------------------------------------------------------------
   本文件集中存放主页各弹窗组件的样式，当前包含：
   - 导航「网站信息」触发按钮补齐样式（.nav-links button）
   - 网站信息弹窗（.about-modal-overlay / .about-modal /
     .about-modal-close / .about-modal-scroll）
   - 网站信息弹窗内容样式（.ab-* 分节，v1.8.7 自 about-page.css
     迁入 —— about-page.css 已重写为二级页全新 .aw-* 设计，
     弹窗内容样式由此处独立提供，视觉与迁移前完全一致）
   - 摄影作品弹窗（.photo-modal-overlay / .photo-modal /
     .photo-modal-media / .photo-modal-info / .photo-modal-close，
     详见本文件后半段的摄影作品弹窗分节）
   后续新增弹窗样式请追加在本文件末尾，并保持相同的注释分节风格。
   注意：
   - 弹窗内容复用 project-page.css 的 .pj-* 类（标题区等），
     弹窗容器（遮罩 / 窗体 / 关闭按钮 / 滚动区）及 .ab-* 内容
     样式由本文件负责
   - 弹窗显隐由 js/about-modal.js / js/photo-modal.js
     通过 .is-open 类控制
   ============================================================ */

/* ---- 导航「网站信息」触发按钮 ---- */
/* styles.css 中 .nav-links a 的样式不作用于 button 元素， */
/* 此处为 .nav-links 内的按钮补齐与相邻链接完全一致的视觉样式 */
/* （清零浏览器默认按钮外观后，逐项对齐 .nav-links a 的规则） */
.nav-links button {
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: center;
    cursor: none; /* 全站自定义光标风格，与 .nav-links a 一致 */
    transition: color 240ms ease, background 240ms ease, transform 240ms ease;
}

/* 悬停高亮 — 与 .nav-links a:hover / a.is-active 完全一致（变亮 + 毛玻璃底 + 微上移） */
.nav-links button:hover,
.nav-links button.is-active {
    color: var(--ink);
    background: var(--hover-bg);
    transform: translateY(-1px);
}

/* 手机端菜单面板内 — 对齐 styles.css 中 720px 断点的 .nav-links a 规则 */
/* （本站 ≤768px 只显示移动端提示遮罩，此规则为基础适配兜底） */
@media (max-width: 720px) {
    .nav-links button {
        padding: 13px 14px;
        font-size: 1rem;
    }
}

/* ============================================================
   网站信息弹窗
   ============================================================ */

/* ---- 遮罩层 ---- */
/* 全屏固定遮罩 + 毛玻璃模糊背景 */
/* 默认 visibility:hidden + opacity:0（而非 display:none）， */
/* 保证关闭状态下弹窗仍可被 JS 测量（offsetWidth/offsetHeight 不为 0） */
.about-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(9, 10, 13, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    visibility: hidden;
    opacity: 0;
    /* 关闭时：先完成 320ms 淡出，再延迟把 visibility 切回 hidden */
    /* （visibility 参与过渡且延迟 320ms，无需 JS 计时器即可实现淡出后隐藏） */
    transition: opacity 320ms ease, visibility 0s linear 320ms;
}

/* 打开状态 — 立即恢复可见并淡入（visibility 不带延迟） */
.about-modal-overlay.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 320ms ease;
}

/* ---- 弹窗窗体 ---- */
/* 深色毛玻璃窗体；初始 0.6 倍缩放 + 透明，配合 JS 内联设置的 */
/* transform-origin 从导航按钮位置原点展开；.is-open 时放大至 1 并显示 */
.about-modal {
    width: min(880px, 100%);
    height: min(82vh, 900px);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    /* 毛玻璃弹窗：均匀半透明深色底 + backdrop 模糊磨砂，
       顶部保留极细内高光勾勒界面边缘 */
    border: 1px solid var(--line);
    background: rgba(13, 15, 20, 0.82);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.5),
        0 12px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: scale(0.6);
    opacity: 0;
    /* transform-origin 由 js/about-modal.js 按导航按钮位置动态内联设置 */
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}

.about-modal.is-open {
    transform: scale(1);
    opacity: 1;
}

/* ---- 关闭按钮 ---- */
/* 右上角绝对定位的圆形毛玻璃按钮，层级高于滚动内容，悬停变亮 */
.about-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    background: rgba(20, 22, 27, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    cursor: none; /* 全站自定义光标风格 */
    transition: color 240ms ease, background 240ms ease, border-color 240ms ease;
}

/* 悬停 — 文字变亮 + 背景提亮 + 边框微亮 */
.about-modal-close:hover {
    color: var(--ink);
    background: var(--hover-bg);
    border-color: rgba(245, 241, 232, 0.3);
}

/* ---- 弹窗内部滚动容器 ---- */
/* 弹窗内容超长时独立滚动，不影响背后页面 */
.about-modal-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 40px 44px 32px;
    /* Firefox 细滚动条 — 与全站暗色风格一致 */
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 241, 232, 0.2) transparent;
}

/* WebKit 细滚动条 — 与 project-page.css 中 .pj-section 的滚动条样式一致 */
.about-modal-scroll::-webkit-scrollbar {
    width: 6px;
}
.about-modal-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.about-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(245, 241, 232, 0.2);
    border-radius: 3px;
}

/* ---- 弹窗内容样式（.ab-*，v1.8.7 自 about-page.css 迁入） ---- */
/* 以下规则原定义于 about-page.css，因该文件重写为二级页全新 .aw-* 设计， */
/* 迁移至此独立供主页弹窗使用。所有数值与迁移前完全一致，弹窗视觉无任何变化。 */

/* 特性网格 — 弹窗内三列布局（一行放三个），卡片较原页面更小 */
.ab-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0;
}
/* 单个特性卡片 — 毛玻璃小卡：半透明深色底 + 模糊磨砂 + 顶部细内高光，
   与弹窗毛玻璃统一；尺寸保持缩小（一行放三个） */
.ab-feature {
  position: relative;
  padding: 16px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(20, 22, 27, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 320ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 320ms ease;
}
.ab-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
/* 特性图标 */
.ab-feature-icon {
  display: block;
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.ab-feature h3 {
  margin: 0 0 5px;
  font-size: 0.88rem;
  font-weight: 700;
}
.ab-feature p {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.55;
}

/* 技术栈胶囊标签列表 */
.ab-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 36px;
}
/* 单个技术标签 — 圆角胶囊样式 */
.ab-tech {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(20, 22, 27, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 240ms ease, background 240ms ease;
}
.ab-tech:hover {
  border-color: rgba(245, 241, 232, 0.3);
  background: rgba(245, 241, 232, 0.08);
}

/* 文件树 — 等宽字体展示项目结构（white-space:pre 保留原样缩进） */
.ab-tree {
  margin: 20px 0 36px;
  padding: 24px 28px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(20, 22, 27, 0.45);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  font-size: 0.8rem;
  line-height: 1.85;
  color: var(--muted);
  overflow-x: auto;
  white-space: pre;
}
/* 文件树中的目录名高亮 */
.ab-tree .dir { color: var(--blue); font-weight: 700; }
/* 文件树中的文件名 */
.ab-tree .file { color: var(--ink); }
/* 文件树中的注释文字 */
.ab-tree .comment { color: rgba(166, 160, 147, 0.6); }

/* 更新日志时间线容器 */
.ab-changelog {
  margin: 20px 0;
  position: relative;
  padding-left: 28px;
}
/* 时间线竖线 */
.ab-changelog::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
  border-radius: 1px;
}
/* 单个版本条目 */
.ab-version {
  position: relative;
  margin-bottom: 32px;
}
/* 版本时间线圆点 */
.ab-version::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: var(--bg);
}
/* 当前版本 — 圆点填充 + 发光 */
.ab-version.is-current::before {
  background: var(--blue);
  box-shadow: 0 0 10px rgba(120, 148, 255, 0.4);
}
/* 版本标题行 */
.ab-version-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ab-version-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
/* 当前版本标题 — 大号 + 发光文字 */
.is-current .ab-version-header h3 {
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 0 18px rgba(120, 148, 255, 0.55), 0 0 40px rgba(120, 148, 255, 0.25);
}
/* 版本标签胶囊 */
.ab-version-tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* 当前版本标签样式 */
.ab-tag-current {
  background: rgba(120, 148, 255, 0.22);
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 800;
}
/* 已发布版本标签样式 */
.ab-tag-release {
  background: rgba(98, 200, 157, 0.15);
  color: var(--green);
}
/* 更新列表 */
.ab-version ul {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}
/* 更新列表项 */
.ab-version li {
  position: relative;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--muted);
}
/* 列表项自定义圆点 */
.ab-version li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
}

/* ---- 弹窗内容排版适配 ---- */
/* 弹窗容器比原二级页面窄，此处对复用的 pj-* / ab-* 类做少量覆盖适配 */

/* 主标题字号缩小（原页面 clamp 最大 3.2rem，弹窗内固定 1.8rem 更协调） */
.about-modal .pj-title {
    font-size: 1.8rem;
}

/* 特性卡片网格 — 弹窗内一行放三个（3 列），卡片更小更紧凑 */
.about-modal .ab-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 响应式 — 窄屏断点 960px：特性卡片降为 2 列 */
@media (max-width: 960px) {
    .about-modal .ab-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 响应式 — 手机断点 720px：特性卡片改单列 */
@media (max-width: 720px) {
    .about-modal .ab-feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- 弹窗响应式 — 平板/手机断点 768px ---- */
/* 小屏下弹窗全屏化（本站移动端仅显示访问提示遮罩，此处做基础适配兜底） */
@media (max-width: 768px) {
    /* 遮罩去除留白，让窗体占满全屏 */
    .about-modal-overlay {
        padding: 0;
    }

    /* 窗体全屏 + 去圆角 */
    .about-modal {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    /* 滚动区内边距收窄 */
    .about-modal-scroll {
        padding: 28px 20px 24px;
    }
}

/* ============================================================
   摄影作品弹窗（v1.8.7）
   ------------------------------------------------------------
   点击 .work[data-cam] 摄影卡片后，以 FLIP 动画从卡片原位
   展开的左图右文详情弹窗（交互逻辑见 js/photo-modal.js）：
   - .photo-modal-overlay  遮罩层（压暗为主，不加背景模糊）
   - .photo-modal          弹窗窗体（仅定义视觉外观，
                           尺寸/位置/变换全部由 JS 内联控制）
   - .photo-modal-media    左栏：作品大图
   - .photo-modal-info     右栏：作品信息
   - .photo-modal-close    右上角圆形毛玻璃关闭按钮
   显隐仍由 .is-open 类控制（与网站信息弹窗同一套约定）。
   注意：FLIP 展开动画依赖 JS 逐帧写入 transform，窗体的
   width / height / transform 不在本文件定义，避免与
   JS 内联样式相互覆盖；transform-origin 固定为左上角。
   ============================================================ */

/* ---- 遮罩层 ---- */
/* 全屏固定遮罩，仅压暗（72% 黑）不加 backdrop-filter， */
/* 弹窗打开期间背后页面保持可辨识的暗化轮廓而非完全消失 */
/* 默认 visibility:hidden + opacity:0，.is-open 时 300ms 淡入 */
.photo-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5100; /* 高于网站信息弹窗（5000） */
    background: rgba(9, 10, 13, 0.72);
    visibility: hidden;
    opacity: 0;
    /* 关闭时：先完成 300ms 淡出，再延迟把 visibility 切回 hidden */
    /* （visibility 参与过渡且延迟 300ms，无需 JS 计时器即可实现淡出后隐藏） */
    transition: opacity 300ms ease, visibility 0s linear 300ms;
}

/* 打开状态 — 立即恢复可见并淡入（visibility 不带延迟） */
.photo-modal-overlay.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 300ms ease;
}

/* ---- 弹窗窗体 ---- */
/* 深色毛玻璃长方形窗体；最终形态宽高由 JS 计算： */
/* min(1040px, 100vw - 64px) × min(640px, 100vh - 64px) 并居中。 */
/* position / left / top / margin / width / height / transform */
/* 均由 js/photo-modal.js 内联设置以驱动 FLIP 展开动画， */
/* 此处只定义圆角、边框、背景、阴影等静态视觉外观 */
.photo-modal {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    display: flex;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: rgba(15, 17, 22, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow:
        0 48px 140px rgba(0, 0, 0, 0.6),
        0 12px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* FLIP 以卡片左上角为基准缩放，原点固定在窗体左上角 */
    transform-origin: 0 0;
}

/* ---- 左栏：作品大图 ---- */
/* 占窗体宽度 56%；图片等比 contain 完整呈现（超高/超宽图不裁切），
/* 轻微深色占位背景避免 letterbox 时露白；默认透明、打开时淡入 */
.photo-modal-media {
    flex: 0 0 56%;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.28);
}

.photo-modal-media img {
    display: block;
    width: 100%;
    height: 100%;
    /* 使用 cover 铺满媒体区：当弹窗高度被钳制（超高/超宽图）导致媒体区
       宽高比与图片不完全一致时，以裁切而非留黑边的方式呈现，彻底消除黑边 */
    object-fit: cover;
    object-position: center;
    /* 图片加载淡入：打开时 360ms 浮现，关闭时随窗体一同淡出 */
    opacity: 0;
    transition: opacity 360ms ease;
}

/* 打开状态 — 大图淡入显示 */
.photo-modal.is-open .photo-modal-media img {
    opacity: 1;
}

/* ---- 右栏：作品信息 ---- */
/* 垂直居中的信息列：kicker → 标题 → 元信息 |分隔线| 描述 → 相机参数， */
/* 层级间距由各子元素自身的 margin 控制 */
.photo-modal-info {
    flex: 1;
    min-width: 0; /* 防止长文本把 flex 子项撑破窗体 */
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    /* safe center：内容未溢出时垂直居中；内容超高（很宽的横图导致弹窗很矮）时
       安全对齐到顶部并允许滚动，避免裁切文字起始（配合 overflow-y） */
    justify-content: safe center;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 241, 232, 0.2) transparent;
}
.photo-modal-info::-webkit-scrollbar { width: 6px; }
.photo-modal-info::-webkit-scrollbar-track { background: transparent; }
.photo-modal-info::-webkit-scrollbar-thumb { background: rgba(245, 241, 232, 0.2); border-radius: 3px; }

/* kicker — 小号大写字距标签（muted 色），紧凑引导标题 */
.photo-modal-kicker {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* 标题 — 大号粗字重（覆盖全局 h3 字号），适度下距 */
.photo-modal-title {
    margin: 0 0 16px;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: 0.01em;
}

/* 元信息行 — 时间 + 地点（「·」分隔），muted 色偏粗字重 */
.photo-modal-meta {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* 描述正文 — 顶部 1px 细分隔线与元信息分层，行高 1.8 保证阅读舒适 */
.photo-modal-desc {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    line-height: 1.8;
    color: rgba(255, 253, 248, 0.78);
}

/* 相机参数块 — 等宽字体 + 左侧竖线，muted 色小字号 */
/* white-space:pre-wrap 保留 data-cam 中「型号  ·  参数」的双空格排版 */
.photo-modal-cam {
    margin-top: 26px;
    padding: 8px 0 8px 16px;
    border-left: 2px solid var(--line);
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--muted);
    white-space: pre-wrap;
}

/* ---- 右栏信息入场动画（stagger 上移淡入） ---- */
/* 默认（关闭）状态：子元素整体下移 14px 且透明 */
.photo-modal-info > * {
    opacity: 0;
    transform: translateY(14px);
}

/* 打开状态 — 子元素依次上移淡入（相邻元素错开 40ms）， */
/* 首个延迟 240ms，待窗体 FLIP 展开过半后再进场，层次感更强； */
/* 过渡只定义在 .is-open 状态上，关闭移除类时子元素瞬间复位（无退场动画） */
.photo-modal.is-open .photo-modal-info > * {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 240ms;
}

.photo-modal.is-open .photo-modal-info > *:nth-child(2) { transition-delay: 280ms; }
.photo-modal.is-open .photo-modal-info > *:nth-child(3) { transition-delay: 320ms; }
.photo-modal.is-open .photo-modal-info > *:nth-child(4) { transition-delay: 360ms; }
.photo-modal.is-open .photo-modal-info > *:nth-child(5) { transition-delay: 400ms; }

/* ---- 关闭按钮 ---- */
/* 右上角绝对定位的圆形毛玻璃按钮，层级高于左右两栏内容，悬停变亮 */
/* （视觉规格与 .about-modal-close 完全一致） */
.photo-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    background: rgba(20, 22, 27, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    cursor: none; /* 全站自定义光标风格 */
    transition: color 240ms ease, background 240ms ease, border-color 240ms ease;
}

/* 悬停 — 文字变亮 + 背景提亮 + 边框微亮 */
.photo-modal-close:hover {
    color: var(--ink);
    background: var(--hover-bg);
    border-color: rgba(245, 241, 232, 0.3);
}

/* ---- 弹窗响应式 — 窄屏断点 860px ---- */
/* 窄屏改为上图下文纵向布局：图片栏占 44% 高，信息栏占余下高度并允许滚动 */
/* （本站移动端仅显示访问提示遮罩，此处做基础适配兜底） */
@media (max-width: 860px) {
    .photo-modal {
        flex-direction: column;
    }

    /* 图片栏由占宽 56% 改为占高 44% */
    .photo-modal-media {
        flex: 0 0 44%;
    }

    /* 信息栏：取消垂直居中避免长内容被裁切，改独立滚动 + 收窄内边距 */
    .photo-modal-info {
        justify-content: flex-start;
        overflow-y: auto;
        padding: 28px 22px;
        /* Firefox 细滚动条 — 与 .about-modal-scroll 一致 */
        scrollbar-width: thin;
        scrollbar-color: rgba(245, 241, 232, 0.2) transparent;
    }

    /* WebKit 细滚动条 — 与 .about-modal-scroll 一致 */
    .photo-modal-info::-webkit-scrollbar {
        width: 6px;
    }
    .photo-modal-info::-webkit-scrollbar-track {
        background: transparent;
    }
    .photo-modal-info::-webkit-scrollbar-thumb {
        background: rgba(245, 241, 232, 0.2);
        border-radius: 3px;
    }
}