<script setup>
definePageMeta({
  layout: 'post'
})
</script>

<template>
  <ContentRenderer>
    <ProseHeaderCard>
      <p class="post-detail__eyebrow text-sm uppercase text-white/70">
        NOTE
      </p>
      <h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
        sori.studio를 직접 만들기 시작하며
      </h1>
    </ProseHeaderCard>

    <p>
      이 페이지는 게시물 본문 스타일을 확인하기 위한 초기 샘플입니다.
      실제 글 데이터와 마크다운 기반 위지윅 렌더링은 다음 단계에서 연결합니다.
    </p>

    <ProseHeading :level="2">
      본문 스타일 기준
    </ProseHeading>
    <p>
      제목, 리스트, 인용구, 이미지, 버튼, 카드류 컴포넌트를 개별 컴포넌트로 분리해 이후 스타일 변경이 쉽도록 둡니다.
    </p>

    <ProseList>
      <li>Regular image, Wide image, Full-width image 구분</li>
      <li>Callout, Toggle, File, Product 카드 분리</li>
      <li>YouTube, Twitter 임베드 영역 분리</li>
    </ProseList>

    <ProseBlockquote>
      글쓰기 경험은 Ghost를 참고하되, 공개 화면은 sori.studio에 맞게 조정합니다.
    </ProseBlockquote>

    <ProseCallout>
      <strong>초기 상태:</strong> 지금은 샘플 콘텐츠이며, DB와 관리자 글쓰기 연결 후 실제 데이터로 교체합니다.
    </ProseCallout>
  </ContentRenderer>
</template>
