/* iconfont — 使用 CSS mask + 内联 SVG 数据 URI 实现
 * 行为与字体图标一致：颜色由 color 控制，大小由 font-size 控制
 * 优势：不依赖外部 sprite 文件，file:// 直接打开也能正常显示
 */
.iconfont {
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  line-height: 1;
  width: 1em;
  height: 1em;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: currentColor;
}

.icon-logo {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='5'><circle cx='32' cy='32' r='27'/><circle cx='32' cy='32' r='11'/></g><g fill='black'><circle cx='32' cy='11' r='5.5'/><circle cx='49' cy='15' r='5.5'/><circle cx='53' cy='32' r='5.5'/><circle cx='49' cy='49' r='5.5'/><circle cx='32' cy='53' r='5.5'/><circle cx='15' cy='49' r='5.5'/><circle cx='11' cy='32' r='5.5'/><circle cx='15' cy='15' r='5.5'/></g></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='black' stroke-width='5'><circle cx='32' cy='32' r='27'/><circle cx='32' cy='32' r='11'/></g><g fill='black'><circle cx='32' cy='11' r='5.5'/><circle cx='49' cy='15' r='5.5'/><circle cx='53' cy='32' r='5.5'/><circle cx='49' cy='49' r='5.5'/><circle cx='32' cy='53' r='5.5'/><circle cx='15' cy='49' r='5.5'/><circle cx='11' cy='32' r='5.5'/><circle cx='15' cy='15' r='5.5'/></g></svg>");
}

.icon-phone {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/></svg>");
}

.icon-search {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l5 5'/></g></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l5 5'/></g></svg>");
}

.icon-grid {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2'><rect x='4' y='4' width='7' height='7' rx='1'/><rect x='13' y='4' width='7' height='7' rx='1'/><rect x='4' y='13' width='7' height='7' rx='1'/><rect x='13' y='13' width='7' height='7' rx='1'/></g></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2'><rect x='4' y='4' width='7' height='7' rx='1'/><rect x='13' y='4' width='7' height='7' rx='1'/><rect x='4' y='13' width='7' height='7' rx='1'/><rect x='13' y='13' width='7' height='7' rx='1'/></g></svg>");
}

.icon-chev-r {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='m9 5 7 7-7 7'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='m9 5 7 7-7 7'/></svg>");
}

.icon-chev-l {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M15 5 8 12l7 7'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M15 5 8 12l7 7'/></svg>");
}

.icon-plus {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='12' r='10'/><path d='M12 8v8M8 12h8'/></g></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='12' r='10'/><path d='M12 8v8M8 12h8'/></g></svg>");
}

.icon-medal {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='black' d='M14 4h9l-5.5 11h-9z M34 4h-9l5.5 11h9z'/><circle fill='black' cx='24' cy='28' r='13'/><path fill='transparent' d='m24 20 2.3 4.6 5.1.8-3.7 3.6.9 5.1-4.6-2.4-4.6 2.4.9-5.1-3.7-3.6 5.1-.8z'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='black' d='M14 4h9l-5.5 11h-9z M34 4h-9l5.5 11h9z'/><circle fill='black' cx='24' cy='28' r='13'/><path fill='transparent' d='m24 20 2.3 4.6 5.1.8-3.7 3.6.9 5.1-4.6-2.4-4.6 2.4.9-5.1-3.7-3.6 5.1-.8z'/></svg>");
}

.icon-gear {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='black'><rect x='20' y='5' width='8' height='38' rx='2'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(45 24 24)'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(90 24 24)'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(135 24 24)'/><circle cx='24' cy='24' r='12.5'/></g><circle cx='24' cy='24' r='5.5' fill='transparent'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='black'><rect x='20' y='5' width='8' height='38' rx='2'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(45 24 24)'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(90 24 24)'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(135 24 24)'/><circle cx='24' cy='24' r='12.5'/></g><circle cx='24' cy='24' r='5.5' fill='transparent'/></svg>");
}

.icon-rd {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='black' transform='translate(2 8) scale(.78)'><rect x='20' y='5' width='8' height='38' rx='2'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(45 24 24)'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(90 24 24)'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(135 24 24)'/><circle cx='24' cy='24' r='12.5'/></g><path fill='black' d='M28 15 37 6l5 5-9 9-6 1.5z'/><path fill='transparent' d='m29.5 18.2 9-9 1.8 1.8-9 9-2.5.8z'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='black' transform='translate(2 8) scale(.78)'><rect x='20' y='5' width='8' height='38' rx='2'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(45 24 24)'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(90 24 24)'/><rect x='20' y='5' width='8' height='38' rx='2' transform='rotate(135 24 24)'/><circle cx='24' cy='24' r='12.5'/></g><path fill='black' d='M28 15 37 6l5 5-9 9-6 1.5z'/><path fill='transparent' d='m29.5 18.2 9-9 1.8 1.8-9 9-2.5.8z'/></svg>");
}

.icon-house {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='black' d='M24 5 3 22h6v21h30V22h6L24 5z'/><rect x='19' y='29' width='10' height='14' fill='transparent'/><circle fill='black' cx='24' cy='20' r='5'/><circle cx='24' cy='20' r='2' fill='transparent'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='black' d='M24 5 3 22h6v21h30V22h6L24 5z'/><rect x='19' y='29' width='10' height='14' fill='transparent'/><circle fill='black' cx='24' cy='20' r='5'/><circle cx='24' cy='20' r='2' fill='transparent'/></svg>");
}

.icon-truck {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='black' d='M3 11h26v21H3z M29 17h8.5L44 24.5V32h-4.6a5.6 5.6 0 0 0-10.4 0z'/><circle fill='black' cx='12.5' cy='34.5' r='4.5'/><circle fill='black' cx='34' cy='34.5' r='4.5'/><circle cx='12.5' cy='34.5' r='1.8' fill='transparent'/><circle cx='34' cy='34.5' r='1.8' fill='transparent'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='black' d='M3 11h26v21H3z M29 17h8.5L44 24.5V32h-4.6a5.6 5.6 0 0 0-10.4 0z'/><circle fill='black' cx='12.5' cy='34.5' r='4.5'/><circle fill='black' cx='34' cy='34.5' r='4.5'/><circle cx='12.5' cy='34.5' r='1.8' fill='transparent'/><circle cx='34' cy='34.5' r='1.8' fill='transparent'/></svg>");
}

.icon-user {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle fill='black' cx='24' cy='14' r='8.5'/><path fill='black' d='M7 43c0-9.5 7.6-15 17-15s17 5.5 17 15z'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle fill='black' cx='24' cy='14' r='8.5'/><path fill='black' d='M7 43c0-9.5 7.6-15 17-15s17 5.5 17 15z'/></svg>");
}

.icon-check {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' d='m4 12.5 5 5L20 6.5'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' d='m4 12.5 5 5L20 6.5'/></svg>");
}

.icon-menu {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 7h16'/><path d='M4 12h16'/><path d='M4 17h16'/></g></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M4 7h16'/><path d='M4 12h16'/><path d='M4 17h16'/></g></svg>");
}