<script setup lang="ts">
// 이미지 자리표시자 — 실제 사진이 준비되기 전 영역을 채우는 플레이스홀더
// (원본 디자인의 <image-slot> 대체. 실제 이미지가 생기면 <img> 로 교체)
interface Props {
  label?: string
}
withDefaults(defineProps<Props>(), {
  label: '이미지',
})
</script>

<template>
  <div class="ph" role="img" :aria-label="label">
    <span class="ph-cap">{{ label }}</span>
  </div>
</template>

<style scoped>
.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eef0f3 0%, #dfe2e7 100%);
}

.ph-cap {
  font-size: 0.75rem; /* 12px */
  letter-spacing: 0.1em;
  color: rgba(27, 26, 23, 0.38);
  font-weight: 600;
  text-align: center;
  padding: 0 1rem;
}
</style>
