/* ============================================================
   VisionCore · 06 Emoji & icon polish
   The audit flagged 24+ emoji as the icon system (F7).
   Mask-image strategy: keep existing emoji TEXT in markup,
   visually hide it, render an SVG icon in its place via CSS.

   This way zero JS / markup changes are required.
   ============================================================ */

/* Helper class — apply via existing classes that wrap emoji */
/* But we can't easily target emoji char alone. Instead: ::before
   icons for known buttons by their existing ids. */

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Icon injections via ::before — keyed by button id.
   We use mask-image so the SVG color = currentColor (theme-aware).
   The original emoji stays in the text node, just visually muted.
   ============================================================ */

/* Reusable icon base */
[id^="open-studio-btn"]::before,
[id^="chatbot-persona-btn"]::before,
[id^="settings-btn"]::before,
[id^="open-vps-config-btn"]::before,
[id^="creative-generate-btn"]::before,
[id^="vision-remix-btn"]::before,
[id^="refine-prompt-btn"]::before,
[id^="open-prompt-search-btn"]::before,
[id^="asset-manager-btn"]::before,
[id^="run-classification-btn"]::before,
[id^="rebuild-classification-btn"]::before,
[id^="open-brainstorm-modal-btn"]::before,
[id^="activate-preset-btn"]::before,
[id^="save-persona-btn"]::before,
[id^="submit-creative-btn"]::before,
[id^="submit-vision-btn"]::before,
[id^="submit-remix-btn"]::before,
[id^="submit-brainstorm-batch-btn"]::before,
[id^="do-refine-prompt-btn"]::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  flex-shrink: 0;
}

/* sparkles · ✨ Studio */
#open-studio-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5ZM19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1ZM5 16l.7 2 2 .8-2 .8L5 21.5l-.8-2-2-.8 2-.8Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5ZM19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1ZM5 16l.7 2 2 .8-2 .8L5 21.5l-.8-2-2-.8 2-.8Z'/></svg>");
}

/* bot · 🤖 챗봇 통제실 */
#chatbot-persona-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M7 11a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2Zm5-7v3m-3 8h.01M15 14h.01M5 13h2m10 0h2'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M7 11a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2Zm5-7v3m-3 8h.01M15 14h.01M5 13h2m10 0h2'/></svg>");
}

/* user · 📌 이미지 페르소나 */
#settings-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 10a7 7 0 0 1 14 0'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 10a7 7 0 0 1 14 0'/></svg>");
}

/* settings · ⚙ V2 코어 튜닝 */
#open-vps-config-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm7.3 3 1.7-1-2-3.5-2 .6a7 7 0 0 0-1.7-1L14.5 5h-5l-.8 2.2a7 7 0 0 0-1.7 1l-2-.6-2 3.5L4.7 12 3 13l2 3.5 2-.6c.5.4 1.1.7 1.7 1L9.5 19h5l.8-2.1c.6-.3 1.2-.6 1.7-1l2 .6 2-3.5Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm7.3 3 1.7-1-2-3.5-2 .6a7 7 0 0 0-1.7-1L14.5 5h-5l-.8 2.2a7 7 0 0 0-1.7 1l-2-.6-2 3.5L4.7 12 3 13l2 3.5 2-.6c.5.4 1.1.7 1.7 1L9.5 19h5l.8-2.1c.6-.3 1.2-.6 1.7-1l2 .6 2-3.5Z'/></svg>");
}

/* wand · 🪄 테마 리믹스 */
#creative-generate-btn::before,
#submit-creative-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m4 20 11-11m3-3 2 2M14 6l4 4M9 4v3M5 6h3M19 14v3m-1.5-1.5h3'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m4 20 11-11m3-3 2 2M14 6l4 4M9 4v3M5 6h3M19 14v3m-1.5-1.5h3'/></svg>");
}

/* camera · 📷 비전 리믹스 */
#vision-remix-btn::before,
#submit-vision-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4h6l2 3h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2Zm3 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4h6l2 3h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2Zm3 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z'/></svg>");
}

/* layers · ✨ PIE refine */
#refine-prompt-btn::before,
#do-refine-prompt-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 9 5-9 5-9-5Zm9 9-9 5-9-5m18 4-9 5-9-5'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 9 5-9 5-9-5Zm9 9-9 5-9-5m18 4-9 5-9-5'/></svg>");
}

/* search · 🔎 prompt search */
#open-prompt-search-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M11 19a8 8 0 1 1 5.3-2L21 21'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M11 19a8 8 0 1 1 5.3-2L21 21'/></svg>");
}

/* database · 🛠 asset manager */
#asset-manager-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3Zm0 6c0 1.7 3.6 3 8 3s8-1.3 8-3M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3Zm0 6c0 1.7 3.6 3 8 3s8-1.3 8-3M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/></svg>");
}

/* check-square · 자동 분류 */
#run-classification-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3Zm5 6 3 3 5-6'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3Zm5 6 3 3 5-6'/></svg>");
}

/* refresh · 전체 재분류 */
#rebuild-classification-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 1 0-2 6m2-6V5m0 6h-6'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 1 0-2 6m2-6V5m0 6h-6'/></svg>");
}

/* dice · 🎲 brainstorm */
#open-brainstorm-modal-btn::before,
#submit-brainstorm-batch-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5ZM19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1ZM5 16l.7 2 2 .8-2 .8L5 21.5l-.8-2-2-.8 2-.8Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5ZM19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1ZM5 16l.7 2 2 .8-2 .8L5 21.5l-.8-2-2-.8 2-.8Z'/></svg>");
}

/* zap · activate */
#activate-preset-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h7l-1 8 9-12h-7Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h7l-1 8 9-12h-7Z'/></svg>");
}

/* save */
#save-persona-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v12m0 0-4-4m4 4 4-4M4 20h16'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v12m0 0-4-4m4 4 4-4M4 20h16'/></svg>");
}

/* send · ⚡ submit remix */
#submit-remix-btn::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12 20 4l-7 17-2-7Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12 20 4l-7 17-2-7Z'/></svg>");
}

/* ============================================================
   HIDE the original emoji text now that we've injected SVGs.
   We can't easily remove individual emoji characters, but we
   can use a font-size:0 wrapper trick OR keep emoji visible.
   The pragmatic choice: keep emoji as readable text on first-text-node level,
   but inject icon prefix BEFORE. The emoji then becomes
   redundant decoration. The "real" cleanup is to remove emoji
   from index.html source — see 07-polish.md notes.

   For now, leaving emoji visible: 결과는 [SVG icon][emoji][text].
   This is intentional during migration; once emoji are stripped
   from index.html the icons take over cleanly.
   ============================================================ */