/*! web/assets/css/index/13-icon-font.css
 * 2026-09-12（送审反馈 #18）：全端统一字体图标
 *
 * 背景：项目此前图标是「三种混着来」——Element Plus 的 SVG 图标组件、
 * Vant 的字体图标名（靠垫片映射成 EP）、以及 uni-app 端直接用 emoji。
 * emoji 在不同系统/机型上字形与基线不一致，有些还缺字（表现为「部分端无法
 * 显示正确的字体图标」）。本文件把图标统一到**自托管字体**上。
 *
 * 字体：Material Symbols Rounded（Google，Apache-2.0），已自托管到
 *       web/vendor/material-symbols@v372/，不走任何外部 CDN（铁律 #4）。
 * 用法：<i class="ic">home</i> —— 内容写「连字名」，font-feature-settings:'liga'
 *       会把英文名渲染成对应图形（无需为每个图标维护 Unicode 码点）。
 *
 * 降级：JS 侧（EpIcon）会先探测字体是否可用（document.fonts.load），
 *       探测失败则继续用 Element Plus 图标组件 —— 保证任何环境下都不会
 *       出现「图标位置显示英文单词」的坏效果。
 */
@font-face{
  font-family:'GarmentIcons';
  src:url('../../../vendor/material-symbols@v372/material-symbols-rounded.woff2?v=20260912e') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
.ic{
  font-family:'GarmentIcons';
  font-weight:400;
  font-style:normal;
  font-size:1em;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  vertical-align:-0.125em;            /* 与文字基线对齐，替代图片图标常见的错位 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'liga';       /* 关键：连字渲染 */
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  text-rendering:optimizeLegibility;
  user-select:none;
}
/* 图标与文字混排时的间距（原来靠组件属性，现在用类名统一） */
.ic + span,.ic + .ic{margin-left:.35em}
/* 2026-10-03（#317）静态槽位图标：字形取自同一份自托管 Material 字体的轮廓，
   由 tools/gen_iconfont_base64.py 落成内联 SVG（生成表在 assets/js/standalone/01-ic.js）。
   fill:currentColor 让它跟着主题色走 —— 这正是 emoji 做不到的（emoji 颜色写死在系统字体里）。 */
.ic-svg{width:1em;height:1em;fill:currentColor;flex:none;display:inline-block;vertical-align:-0.125em}
.ic-svg + span,.ic-svg + .ic-svg{margin-left:.35em}
/* 侧栏/标签栏内的图标不参与 flex 压缩 */
.sidebar-nav .ic,.mobile-tab .ic,.admin-tab .ic,.sidebar svg{flex:none}