/* ==========================================================================
   iconfont 3D 插画 · 静态页通用样式
   --------------------------------------------------------------------------
   用途：给不需要经过 Vue SPA（/h5/）的那些手写页面提供统一的 3D 图标样式。
        这些页面（index.html 请假详情、teacher_attendance.html 考勤打卡、
        attendance.html 公开考勤、face.html 人脸页）原来是 emoji，
        与后台换过 iconfont 3D 插画之后风格不一致，所以统一到这里。

   用法：
     <img class="i3d s20" src="/img/icons3d/calendar_64.png?v=20261017g" alt="">

   ⚠️ 尺寸下限：3D 插画在 16px 以下只剩一团模糊色块，比原来的线性图标 /
      emoji 更难认。本项目实测 18px 是可用下限，常用尺寸是 20px 与 24px。
      小尺寸用 _64.png（DPR3 下 64/20 = 3.2 倍，足够锐利），
      大尺寸（≥40px）用 _192.png。

   ⚠️ 换图/加图必须同步升 index.html 里 css/js 的 ?v= —— 宝塔 Nginx 对
      静态资源有 30 天强缓存（Cache-Control: max-age=2592000），
      不升版本号手机端会一直看到旧图。

   素材出处见 /img/icons3d/meta.json（全部取自阿里巴巴 iconfont 3D 插画库）。
   ========================================================================== */

img.i3d {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: -5px;
  flex: 0 0 auto;
  border: 0;
  background: none;
  /* 不做任何 filter/opacity，彩色插画要的就是本身的颜色 */
}

img.i3d.s14 { width: 14px; height: 14px; vertical-align: -3px; }
img.i3d.s16 { width: 16px; height: 16px; vertical-align: -4px; }
img.i3d.s18 { width: 18px; height: 18px; vertical-align: -4px; }
img.i3d.s20 { width: 20px; height: 20px; vertical-align: -5px; }
img.i3d.s22 { width: 22px; height: 22px; vertical-align: -5px; }
img.i3d.s24 { width: 24px; height: 24px; vertical-align: -6px; }
img.i3d.s28 { width: 28px; height: 28px; vertical-align: -7px; }
img.i3d.s32 { width: 32px; height: 32px; vertical-align: -8px; }
img.i3d.s40 { width: 40px; height: 40px; vertical-align: middle; }
img.i3d.s48 { width: 48px; height: 48px; vertical-align: middle; }
img.i3d.s56 { width: 56px; height: 56px; vertical-align: middle; }
img.i3d.s64 { width: 64px; height: 64px; vertical-align: middle; }

/* 小屏微缩一档，避免把本来就窄的行撑开 */
@media (max-width: 360px) {
  img.i3d.s22 { width: 20px; height: 20px; }
  img.i3d.s24 { width: 22px; height: 22px; }
}