/*
 * 게임 아이콘 베이스 스타일.
 * 규칙: 흰 실루엣 SVG 를 CSS mask 로 받아 background-color 로 색칠한다.
 *       (구 <img> 폴백도 .icon 클래스 사이즈 규칙은 그대로 받는다.)
 * 자세한 규약은 docs/icon-style-guide.md 참고.
 */

.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.18em;
  user-select: none;
  -webkit-user-drag: none;
  /* mask 베이스: --icon-src 가 지정된 <span> 은 흰 실루엣을 mask 로 받아
     background-color (= 현재 color) 로 칠해진다. <img> 폴백은 --icon-src 가
     없으므로 mask 효과 무시되고 그대로 그림이 그려진다. */
  background-color: currentColor;
  -webkit-mask: var(--icon-src) center/contain no-repeat;
          mask: var(--icon-src) center/contain no-repeat;
  color: var(--icon-default, #ffffff);
  object-fit: contain;
}

/* ── 골드 마크 ─────────────────────────────────────────────────────────
 * 이모지 🪙 는 색을 바꿀 수 없어 금색 버튼(--accent) 위에서 배경에 묻힌다.
 * mask 아이콘은 currentColor 로 칠해지므로, 옆 숫자와 같은 색을 따라간다:
 *   어두운 배경 + 금색 숫자 → 금색 코인 / 금색 버튼 + 짙은 글자 → 짙은 코인.
 * 어디에 놓든 대비가 확보되므로 배경별 예외 규칙이 필요 없다.
 *
 * 크기·정렬: 골드 마크는 메뉴 아이콘(.icon 기본 1.25em)이 아니라 **숫자 옆에 붙는 인라인 마크**다.
 * 1.25em 은 옆 숫자보다 커서 글줄이 튀고, 기본 vertical-align 로는 중심이 1.5px 떠올랐다.
 * 1em + -0.15em 이 글자 상자 중심과 0.3px 이내로 맞는다(브라우저 실측). */
.icon--gold {
  color: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}

/* ── 등급별 색상 (장비/소비/잡템 공통, 8단계) ── */
.icon[data-rarity="junk"]      { color: #7a7e89; }
.icon[data-rarity="common"]    { color: #cfd3df; }
.icon[data-rarity="uncommon"]  { color: #5d9b6a; }
.icon[data-rarity="rare"]      { color: #5b88c8; }
.icon[data-rarity="epic"]      { color: #a35cc7; }
.icon[data-rarity="legendary"] { color: #d9a441; }
.icon[data-rarity="artifact"]  { color: #e6cc80; }
.icon[data-rarity="ancient"]   { color: #e68a00; }
.icon[data-rarity="unique"]    { color: #ff8000; }

/* ── 재료 (rarity=material) — sub_category 로 세분화 ── */
.icon[data-rarity="material"]                        { color: #9cd0c8; }
.icon[data-rarity="material"][data-subcat="alchemy"] { color: #76c89a; }
.icon[data-rarity="material"][data-subcat="armor"]   { color: #b08a6a; }
.icon[data-rarity="material"][data-subcat="weapon"]  { color: #c4a26a; }
.icon[data-rarity="material"][data-subcat="general"] { color: #9cd0c8; }

.icon--lg { width: 2em; height: 2em; vertical-align: -0.35em; }
.icon--xl { width: 3em; height: 3em; vertical-align: middle; }

/* ── 컨테이너별 명시적 사이즈 ──
 * 부모 컨테이너 font-size 가 큰(이모지 시절) 경우 em 계산이 과대해지므로
 * .icon 자체를 절대 단위(rem) 로 강제 고정한다. 이모지 폴백은 부모 font-size 를
 * 그대로 따르므로 시각 비율이 호환된다.
 */
.exp-event-card__icon .icon  { width: 3rem;   height: 3rem; }
.exp-farm__icon .icon        { width: 3.6rem; height: 3.6rem; }
.exp-monster__icon .icon     { width: 3.6rem; height: 3.6rem; }
.equip-portrait__icon .icon  { width: 3rem;   height: 3rem; }
.hero-card__icon .icon       { width: 2rem;   height: 2rem; }
.equip-slot__icon .icon      { width: 1.6rem; height: 1.6rem; }
.menu-tab__icon .icon        { width: 1.4rem; height: 1.4rem; vertical-align: -0.3em; }
.section-head__icon .icon    { width: 1.6rem; height: 1.6rem; }
.goal__icon .icon            { width: 1.6rem; height: 1.6rem; }
.char-card__icon .icon       { width: 2.4rem; height: 2.4rem; }
.class-card__icon .icon      { width: 2rem;   height: 2rem; }
.home__res .icon             { width: 1.1rem; height: 1.1rem; vertical-align: -0.18em; }
.home__menu-btn .icon        { width: 1.2rem; height: 1.2rem; vertical-align: -0.2em; }
.chars__logout-btn .icon     { width: 1.2rem; height: 1.2rem; vertical-align: -0.2em; }
.char-create__close .icon    { width: 1.1rem; height: 1.1rem; }
.exp-region-card__lock .icon { width: 1rem;   height: 1rem; vertical-align: -0.15em; }
.exp-region-card__mob .icon  { width: 1.2rem; height: 1.2rem; vertical-align: -0.2em; }

/* 등급/카테고리별 색상은 위쪽 [data-rarity]/[data-subcat] 셀렉터로 적용된다.
   UI/메뉴/슬롯/클래스/몬스터/지역 아이콘은 data-rarity 가 없으므로 기본 흰색. */