/* FontAwesome全廃止に伴うアイコン移行用CSS（mask方式・色はcurrentColorで親のcolorを継承）
   - マッピング済みクラス: /test/common3/img/ の自作SVGを描画
   - 未マッピングクラス  : 黄背景+赤破線のプレースホルダー（置換残のTODO可視化）
   対応表: docs/icon-inventory.md
   TODO: 全アイコンのSVG置換が完了したら、このファイルと各テンプレートの<link>読み込みを削除すること。
   更新: 2026-06-12 */

/* ============ 未置換アイコン共通: プレースホルダー ============ */
i[class*="fa-"] {
  display: inline-block;
  min-width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background: #fff3cd;
  outline: 2px dashed #dc3545;
  font-style: normal;
}
i[class*="fa-"]::before {
  content: attr(class);
  color: #dc3545;
  font-size: 10px;
  font-family: monospace;
  white-space: nowrap;
}

/* ============ 置換済みアイコン: 自作SVG（currentColor） ============ */
/* prefスタイル(fas/far/fa-solid/fa-regular)を問わず glyph クラスで一致させる */
i.fa-user,
i.fa-user-plus,
i.fa-angle-up,
i.fa-chevron-down,
i.fa-shopping-cart,
i.fa-cart-shopping,
i.fa-coins,
i.fa-envelope,
i.fa-heart,
i.fa-lock,
i.fa-unlock-alt,
i.fa-magnifying-glass-plus,
i.fa-newspaper,
i.fa-phone-volume,
i.fa-calendar-day,
i.fa-shop,
i.fa-window-restore,
i.fa-search {
  width: 1.3em;
  min-width: 0;
  height: 1.3em;
  background: currentColor;
  outline: none;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
i.fa-user::before,
i.fa-user-plus::before,
i.fa-angle-up::before,
i.fa-chevron-down::before,
i.fa-shopping-cart::before,
i.fa-cart-shopping::before,
i.fa-coins::before,
i.fa-envelope::before,
i.fa-heart::before,
i.fa-lock::before,
i.fa-unlock-alt::before,
i.fa-magnifying-glass-plus::before,
i.fa-newspaper::before,
i.fa-phone-volume::before,
i.fa-calendar-day::before,
i.fa-shop::before,
i.fa-window-restore::before,
i.fa-search::before {
  content: none;
}

/* glyph → SVG マッピング */
i.fa-user                 { -webkit-mask-image: url(/test/common3/img/user-solid-full.svg);                  mask-image: url(/test/common3/img/user-solid-full.svg); }
i.fa-user-plus            { -webkit-mask-image: url(/test/common3/img/user-plus-solid-full.svg);             mask-image: url(/test/common3/img/user-plus-solid-full.svg); }
i.fa-angle-up             { -webkit-mask-image: url(/test/common3/img/angle-up-solid-full.svg);              mask-image: url(/test/common3/img/angle-up-solid-full.svg); }
i.fa-chevron-down         { -webkit-mask-image: url(/test/common3/img/angle-down-solid-full.svg);            mask-image: url(/test/common3/img/angle-down-solid-full.svg); }
i.fa-shopping-cart        { -webkit-mask-image: url(/test/common3/img/cart-shopping-solid-full.svg);         mask-image: url(/test/common3/img/cart-shopping-solid-full.svg); }
i.fa-cart-shopping        { -webkit-mask-image: url(/test/common3/img/cart-shopping-solid-full.svg);         mask-image: url(/test/common3/img/cart-shopping-solid-full.svg); }
i.fa-coins                { -webkit-mask-image: url(/test/common3/img/coins-solid-full.svg);                 mask-image: url(/test/common3/img/coins-solid-full.svg); }
i.fa-envelope             { -webkit-mask-image: url(/test/common3/img/envelope-solid-full.svg);              mask-image: url(/test/common3/img/envelope-solid-full.svg); }
i.fa-heart                { -webkit-mask-image: url(/test/common3/img/heart-solid-full.svg);                 mask-image: url(/test/common3/img/heart-solid-full.svg); }
i.fa-lock                 { -webkit-mask-image: url(/test/common3/img/lock-solid-full.svg);                  mask-image: url(/test/common3/img/lock-solid-full.svg); }
i.fa-unlock-alt           { -webkit-mask-image: url(/test/common3/img/unlock-keyhole-solid-full.svg);        mask-image: url(/test/common3/img/unlock-keyhole-solid-full.svg); }
i.fa-magnifying-glass-plus{ -webkit-mask-image: url(/test/common3/img/magnifying-glass-plus-solid-full.svg); mask-image: url(/test/common3/img/magnifying-glass-plus-solid-full.svg); }
i.fa-newspaper            { -webkit-mask-image: url(/test/common3/img/newspaper-solid-full.svg);             mask-image: url(/test/common3/img/newspaper-solid-full.svg); }
i.fa-phone-volume         { -webkit-mask-image: url(/test/common3/img/phone-volume-solid-full.svg);          mask-image: url(/test/common3/img/phone-volume-solid-full.svg); }
i.fa-calendar-day         { -webkit-mask-image: url(/test/common3/img/calendar-days-solid-full.svg);         mask-image: url(/test/common3/img/calendar-days-solid-full.svg); }
i.fa-shop                 { -webkit-mask-image: url(/test/common3/img/calendar-days-solid-full.svg);         mask-image: url(/test/common3/img/calendar-days-solid-full.svg); } /* 来店予約: calendar-daysで統一 */
i.fa-window-restore       { -webkit-mask-image: url(/test/common3/img/window-restore-solid-full.svg);        mask-image: url(/test/common3/img/window-restore-solid-full.svg); } /* オークション入札/出品代行 */
i.fa-search               { -webkit-mask-image: url(/test/common3/img/magnifying-glass-solid-full.svg);      mask-image: url(/test/common3/img/magnifying-glass-solid-full.svg); } /* 商品名・キーワード検索 */

/* angle-down(=fa-chevron-down) はviewBox内でglyphが小さいため2倍表示 + 5px下げ */
i.fa-chevron-down { width: 2em; height: 2em; position: relative; top: 5px; }

/* phone-volume が横向きのため時計回り45度回転（後続CSSに負けないよう!important） */
i.fa-phone-volume { transform: rotate(45deg) !important; }

/* ログイン/マイページ/お気に入り/カート はやや小さめ 1.2em */
i.fa-unlock-alt,
i.fa-user,
i.fa-heart,
i.fa-shopping-cart { width: 1.2em; height: 1.2em; }