/* ══════════════════════════════════════════════════════════════════════════════
   🎨 손으로 그린 취향배지 아이콘 (2026-09-23, 대표 지시)

   Font Awesome 무료판에 «뜻이 맞는 그림이 없는» 다섯 가지를 직접 그렸다.
     ch2d-8ball        당구      — 「fa-8」 은 그냥 숫자 8이라 헷갈렸다 → 당구공 8번
     ch2d-mic          노래방    — 「fa-microphone-lines」 는 방송용이라 → 손에 쥐는 공연용
     ch2d-clapper      단편영화  — 🎬 슬레이트
     ch2d-baduk        바둑      — 바둑판 위의 흑백 돌
     ch2d-constellation 별자리   — 선으로 이은 별

   ⚠️ 쓰는 법은 폰트 아이콘과 «똑같다». 화면은 그대로 <i class="fas ch2d-8ball"> 라고
      적으면 된다. 아래 규칙이 그 자리를 그림으로 채운다. 그래서 배지 표(card-world.js)의
      「그림」 칸에 fa- 이름 대신 이 이름을 적어 두면 어느 화면에서나 같이 바뀐다.
   ⚠️ 색은 «글자색을 따라간다»(currentColor). 배지마다 style="color:…" 를 주는
      화면들이 이미 있어서, 칠을 고정하면 그 색이 무시된다.
   ⚠️ 그림은 «마스크» 다 — 흰 구멍은 칠하지 않고 비워 둔다(8번 공 가운데 흰 동그라미처럼).
      그래서 어두운 바닥 위에 놓아도 구멍이 바닥색으로 비쳐 자연스럽다.
   ⚠️ 이 파일을 안 불러온 화면에서는 «빈칸» 이 된다. 배지를 그리는 화면 아홉 곳에
      <link> 를 달아 두었다 — 새 화면을 만들면 여기도 같이.
   ══════════════════════════════════════════════════════════════════════════════ */

[class*="ch2d-ic-"],
.ch2d-8ball, .ch2d-mic, .ch2d-clapper, .ch2d-baduk, .ch2d-constellation {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
/* 폰트 아이콘 자리에 끼어 들어가므로, 글꼴이 만들어 내는 글자는 지운다 */
.ch2d-8ball::before, .ch2d-mic::before, .ch2d-clapper::before,
.ch2d-baduk::before, .ch2d-constellation::before { content: ''; }

/* 🎱 당구 — 검은 공 + 가운데 흰 동그라미 + 숫자 8
   ⚠️ 흰 동그라미와 8은 «구멍» 이다(fill-rule:evenodd). 그래야 어느 바닥에서도 8로 읽힌다. */
.ch2d-8ball {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm0 6.2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6Z"/><path fill-rule="evenodd" d="M12 8.6a1.9 1.9 0 0 0-1.15 3.41A2.25 2.25 0 1 0 13.15 12 1.9 1.9 0 0 0 12 8.6Zm0 1.35a.62.62 0 1 1 0 1.24.62.62 0 0 1 0-1.24Zm0 2.5a.95.95 0 1 1 0 1.9.95.95 0 0 1 0-1.9Z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm0 6.2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6Z"/><path fill-rule="evenodd" d="M12 8.6a1.9 1.9 0 0 0-1.15 3.41A2.25 2.25 0 1 0 13.15 12 1.9 1.9 0 0 0 12 8.6Zm0 1.35a.62.62 0 1 1 0 1.24.62.62 0 0 1 0-1.24Zm0 2.5a.95.95 0 1 1 0 1.9.95.95 0 0 1 0-1.9Z"/></svg>');
}

/* 🎤 노래방 — 손에 쥐는 공연용 마이크 (둥근 그릴 + 목테 + 굵은 손잡이)
   ⚠️ 그릴이 작고 손잡이가 가늘면 «돋보기» 로 읽힌다. 한 번 그렇게 나와서 다시 그렸다 —
      그릴을 키우고, 목테를 넣고, 손잡이를 굵게 했다. */
.ch2d-mic {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="15.9" cy="8.5" r="5.2"/><rect x="8.24" y="11.31" width="7.4" height="2.3" rx="1" transform="rotate(45 11.94 12.46)"/><rect x="4.7" y="13.2" width="8.4" height="4.6" rx="1.3" transform="rotate(-45 8.9 15.5)"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="15.9" cy="8.5" r="5.2"/><rect x="8.24" y="11.31" width="7.4" height="2.3" rx="1" transform="rotate(45 11.94 12.46)"/><rect x="4.7" y="13.2" width="8.4" height="4.6" rx="1.3" transform="rotate(-45 8.9 15.5)"/></svg>');
}

/* 💃 댄스 — 한 팔을 위로 뻗고 한 다리를 차올린 춤추는 사람 (2026-11-02 대표 「댄스 동아리 잘 어울리는 아이콘」)
   ⚠️ 무료 폰트 아이콘엔 «춤» 이 없다(fa-child-reaching 은 손 든 아이) — 선 굵기 2.6 · 둥근 끝 */
.ch2d-dance {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12.6" cy="3.1" r="2.3"/><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M12.4 6.9L11.9 13.4M12.3 8L17.6 5.2L19.2 1.8M12.1 8.2L7.4 10.4L5 7.6M11.9 13.4L10.2 17.4L11.6 22M11.9 13.4L16.6 15.6L15.4 21"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12.6" cy="3.1" r="2.3"/><path fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M12.4 6.9L11.9 13.4M12.3 8L17.6 5.2L19.2 1.8M12.1 8.2L7.4 10.4L5 7.6M11.9 13.4L10.2 17.4L11.6 22M11.9 13.4L16.6 15.6L15.4 21"/></svg>');
}
.ch2d-dance { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.ch2d-dance::before { content: ''; }

/* 🎬 단편영화 — 슬레이트. 윗막대의 빗금은 «구멍» 이라 흰 줄로 보인다 */
.ch2d-clapper {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 4.4h20v4.4H2Zm4.4 0L3.6 8.8h2.2l2.8-4.4Zm5 0L8.6 8.8h2.2l2.8-4.4Zm5 0L13.6 8.8h2.2l2.8-4.4Z"/><path d="M2 10.1h20v7.9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 4.4h20v4.4H2Zm4.4 0L3.6 8.8h2.2l2.8-4.4Zm5 0L8.6 8.8h2.2l2.8-4.4Zm5 0L13.6 8.8h2.2l2.8-4.4Z"/><path d="M2 10.1h20v7.9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Z"/></svg>');
}

/* ⚫⚪ 바둑 — 바둑판 줄 위에 흑돌 하나, 백돌 하나
   ⚠️ 백돌 자리에 판 줄이 그대로 지나가면 «과녁» 으로 읽힌다. 그래서 SVG 안에서
      그 자리만 줄을 지우고(mask) 그 위에 테두리만 있는 돌을 얹는다.
   ⚠️ 주소 안의 «#» 은 반드시 %23 으로 적는다 — 안 그러면 브라우저가 거기서
      주소가 끝난 줄 알고 그림이 통째로 안 뜬다. */
.ch2d-baduk {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><mask id="g"><rect width="24" height="24" fill="white"/><circle cx="15.2" cy="15.2" r="4.1" fill="black"/><circle cx="8.6" cy="8.6" r="4.1" fill="black"/></mask></defs><g mask="url(%23g)" fill="none" stroke="black" stroke-width="1.25"><path d="M3.6 3.6h16.8v16.8H3.6z"/><path d="M8.6 3.6v16.8M15.2 3.6v16.8M3.6 8.6h16.8M3.6 15.2h16.8"/></g><circle cx="8.6" cy="8.6" r="3.3"/><circle cx="15.2" cy="15.2" r="2.65" fill="none" stroke="black" stroke-width="1.5"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><mask id="g"><rect width="24" height="24" fill="white"/><circle cx="15.2" cy="15.2" r="4.1" fill="black"/><circle cx="8.6" cy="8.6" r="4.1" fill="black"/></mask></defs><g mask="url(%23g)" fill="none" stroke="black" stroke-width="1.25"><path d="M3.6 3.6h16.8v16.8H3.6z"/><path d="M8.6 3.6v16.8M15.2 3.6v16.8M3.6 8.6h16.8M3.6 15.2h16.8"/></g><circle cx="8.6" cy="8.6" r="3.3"/><circle cx="15.2" cy="15.2" r="2.65" fill="none" stroke="black" stroke-width="1.5"/></svg>');
}

/* ✨ 별자리 — 선으로 이은 별 다섯 */
.ch2d-constellation {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round" d="M4.2 16.6 9.1 11 14.6 13.6 19.4 5.6M14.6 13.6 13.4 19.8"/><circle cx="9.1" cy="11" r="1.7"/><circle cx="14.6" cy="13.6" r="1.5"/><circle cx="4.2" cy="16.6" r="1.35"/><circle cx="13.4" cy="19.8" r="1.35"/><path d="M19.4 2.6l1.1 2.4 2.4 1.1-2.4 1.1-1.1 2.4-1.1-2.4-2.4-1.1 2.4-1.1z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="1.15" stroke-linecap="round" stroke-linejoin="round" d="M4.2 16.6 9.1 11 14.6 13.6 19.4 5.6M14.6 13.6 13.4 19.8"/><circle cx="9.1" cy="11" r="1.7"/><circle cx="14.6" cy="13.6" r="1.5"/><circle cx="4.2" cy="16.6" r="1.35"/><circle cx="13.4" cy="19.8" r="1.35"/><path d="M19.4 2.6l1.1 2.4 2.4 1.1-2.4 1.1-1.1 2.4-1.1-2.4-2.4-1.1 2.4-1.1z"/></svg>');
}