# TailwindCSS v4 print variant 쿼리
mcp__context7__resolve-library-id: "TailwindCSS"
mcp__context7__query-docs: "print variant responsive design v4"

# Vue.js 라이프사이클
mcp__context7__resolve-library-id: "Vue.js"
mcp__context7__query-docs: "onMounted lifecycle composition API"

mcp__sequential-thinking__sequentialthinking:
- thought: "인쇄 대상 데이터 구조 분석"
- thought: "페이지 브레이크 위치 결정"
- thought: "헤더/푸터 반복 요소 설계"
- thought: "정보 계층 구조 최적화"

/peach-add-print [원본컴포넌트경로]

<!-- 인쇄용 타이포그래피 -->
<div class="print:font-sans print:text-[11pt] print:leading-relaxed print:text-black">
  <h1 class="print:text-[18pt] print:font-bold">제목</h1>
  <h2 class="print:text-[14pt] print:font-semibold">부제목</h2>
  <h3 class="print:text-[12pt] print:font-semibold">소제목</h3>
</div>

<!-- 인쇄 친화적 색상 -->
<span class="print:text-black">기본 텍스트</span>
<span class="print:text-gray-700">보조 텍스트</span>
<span class="print:text-blue-700">강조</span>
<span class="print:text-red-600">음수/경고</span>

<!-- 배경색 (절제하여 사용) -->
<div class="print:bg-gray-100">연한 배경</div>
<div class="print:border print:border-gray-300">테두리</div>

<!-- 페이지 브레이크 제어 -->
<div class="print:break-before-page">새 페이지 시작</div>
<div class="print:break-after-page">페이지 끝</div>
<div class="print:break-inside-avoid">분리 방지</div>

<!-- 테이블 헤더 반복 -->
<thead class="print:table-header-group">...</thead>
<tfoot class="print:table-footer-group">...</tfoot>

<!-- 인쇄 시 숨김/표시 -->
<div class="print:hidden">화면에서만 표시</div>
<div class="hidden print:block">인쇄에서만 표시</div>

┌─────────────────────────────────────────┐
│  문서 타이틀 (18pt, Bold, 중앙)          │
├─────────────────────────────────────────┤
│  메타 정보 (기간, 작성자, 날짜)           │
│  ─────────────────────────────────────  │
│  요약 박스 (배경색, 테두리)               │
│  ┌─────────────────────────────────┐   │
│  │ 핵심 수치 / KPI                   │   │
│  └─────────────────────────────────┘   │
├─────────────────────────────────────────┤
│  섹션 타이틀 (14pt, Bold)               │
│  ─────────────────────────────────────  │
│  데이터 테이블                           │
│  ┌───┬───────┬─────┬─────┬─────┐      │
│  │   │       │     │     │     │      │
│  ├───┼───────┼─────┼─────┼─────┤      │
│  │   │       │     │     │     │      │
│  └───┴───────┴─────┴─────┴─────┘      │
├─────────────────────────────────────────┤
│  푸터 (페이지 번호, 인쇄일시)             │
└─────────────────────────────────────────┘

Sequential Thinking 활용:
1. 데이터 구조 파악 (테이블, 목록, 차트 등)
2. 인쇄 시 필수 정보 vs 생략 가능 정보 분류
3. 페이지당 최적 데이터 양 계산
4. 페이지 브레이크 위치 결정

# TailwindCSS v4 print variant 최신 사양 확인
mcp__context7__query-docs:
  libraryId: "/tailwindlabs/tailwindcss"
  query: "print variant modifier responsive design"

<u-button color="neutral" variant="outline" @click="actionPrint">
  <i class="i-heroicons-printer" />
  인쇄
</u-button>

front/src/modules-domain/[모듈명]/pages/
├── [원본]-print.vue           # 인쇄 전용 컴포넌트
└── _[모듈명]-print.routes.ts  # 인쇄 전용 라우트