콜아웃 제목과 기본 아이콘 정리

components/content/ProseCallout.vue

@@ -8,6 +8,10 @@ const props = defineProps({
     type: String,
     default: '💡'
   },
+  title: {
+    type: String,
+    default: ''
+  },
   background: {
     type: String,
     default: 'blue'
@@ -44,11 +48,14 @@ const backgroundClass = computed(() => {
     class="prose-callout prose-callout-card mb-2.5 rounded-[10px] p-5 text-[15px] leading-8 text-[var(--site-text)]"
     :class="backgroundClass"
   >
-    <div class="flex items-start gap-2">
-      <span v-if="emojiEnabled" class="inline-flex shrink-0 text-[20px] leading-none">{{ emoji || '💡' }}</span>
-      <div class="min-w-0 flex-1 whitespace-pre-line">
-        <slot />
-      </div>
+    <div v-if="emojiEnabled || title" class="prose-callout-card__header mb-4 flex items-start gap-2">
+      <span v-if="emojiEnabled" class="prose-callout-card__emoji inline-flex shrink-0 pt-0.5 text-[20px] leading-none">{{ emoji || '💡' }}</span>
+      <strong v-if="title" class="prose-callout-card__title min-w-0 text-[18px] leading-[1.35] font-bold text-[#050505]">
+        {{ title }}
+      </strong>
+    </div>
+    <div class="prose-callout-card__body min-w-0 whitespace-pre-line">
+      <slot />
     </div>
   </aside>
 </template>