밖으로 보내는 인쇄물(견적서 · 계약서 · 보고서 · 원페이저)입니다. 고딕으로 짜서 굵기와 크기 차이만으로 구조가 보이게 하고, 면을 칠하지 않고 선과 글자로 강조합니다.
문서 종류마다 가장 먼저 볼 것을 크게 둡니다. 견적서는 합계, 계약서는 당사자, 원페이저는 요약입니다. 브랜드는 머리의 마크 하나가 맡고, v1 의 블롭 머리 배경 · 그레인 · 그라데이션 강조 글자는 없습니다. 화면 테마를 따르지 않아 다크 화면에서도 종이는 흰 종이입니다.
/* 앱 화면에서 미리 볼 때: @uyoolabs/ui/css 안에 들어 있다 */
@import "@uyoolabs/ui/css";
/* 렌더러(단일 HTML · PDF)는 Tailwind 없이 두 파일을 그대로 인라인한다 */
node_modules/@uyoolabs/ui/src/css/carton-tokens.css
node_modules/@uyoolabs/ui/src/css/carton/brand.css
// 서체: @uyoolabs/ui/fonts/app(한 · 영) · fonts/app-ja(일본어)의 Noto Sans견적서 · 보고서 · 계약서를 줄여 보입니다(픽스처 brand-sheet 는 100%).
시트는 article, 제목 h1, 섹션 h2. 금액 표는 thead · tfoot, 합계 행에 data-total.
<article className="uyoo-sheet" data-kind="estimate" lang="ko"> {/* data-fit="fixed" 는 한 장 고정 */}
<header className="uyoo-sheet-head">
<span className="uyoo-sheet-mark"><img src={logo} alt="" />한결</span>
<span className="uyoo-sheet-label">견적서 · <b>QT-2026-1022</b> · 1.0판</span>
</header>
<div className="uyoo-sheet-body">
<div className="uyoo-sheet-titleblock">
<p className="uyoo-sheet-label">견적서 · 2026년 10월 22일</p>
<h1 className="uyoo-sheet-title">한결 팀 요금제 연간 도입 견적</h1>
<p className="uyoo-sheet-meta">…</p>
</div>
<div className="uyoo-sheet-total">
<p className="uyoo-sheet-total-value">₩10,560,000<small>/ 연</small></p>
</div>
<section className="uyoo-sheet-sec">
<h2 className="uyoo-sheet-section"><span className="uyoo-sheet-n">1</span>견적 내역</h2>
<table className="uyoo-sheet-table" data-kind="money">
<thead>…</thead><tbody>…</tbody>
<tfoot><tr data-total><td colSpan={3}>합계</td><td className="num">₩10,560,000</td></tr></tfoot>
</table>
</section>
<section className="uyoo-sheet-sec" data-kind="closing">…</section>
<div className="uyoo-sheet-sign">…</div>
</div>
<footer className="uyoo-sheet-foot"><span><b>QT-2026-1022</b> · …</span><span>1.0판 · 2026-10-22 · 1 / 1</span></footer>
</article>CSS 표면이라 props 대신 클래스와 상태 속성을 적습니다.
| 부분 | 클래스 | 변형 · 규칙 |
|---|---|---|
| 시트 | uyoo-sheet | data-kind="estimate|contract|doc|onepager" · data-fit="fixed" · lang · --uyoo-sheet-bleed |
| 머리 · 라벨 | uyoo-sheet-head · -mark · -label | 라벨 대문자 · 고정폭 · 넓은 자간은 영어만 |
| 제목 블록 | uyoo-sheet-titleblock · -title · -meta · -summary · -text | data-lede(원페이저: 요약이 곧 본문) |
| 합계 · 지표 | uyoo-sheet-total · -total-value · -breakdown · -figs · -fig · -fig-value · -fig-label | 큰 숫자는 Display 400 |
| 당사자 | uyoo-sheet-parties · -who · -sub | data-layout="facing"(계약서: 갑 · 을을 마주 놓는다) |
| 섹션 | uyoo-sheet-sec · -section · -subsection · -n · -aside · -note · -quote | data-kind="closing"(문서에서 하나뿐인 굵은 선) |
| 표 · 목록 | uyoo-sheet-table · -rows · -subrows | data-kind="money" · tr[data-total] · [data-tone="ok|warn|bad"] · data-mark="decimal|circled" |
| 서명 | uyoo-sheet-sign · -sign-date · -sign-blank · -sign-row · -sign-party · -sign-name · -sign-line · -sign-rule | '(인)' 은 글자 |
| 제어 · 나눔 | uyoo-sheet-foot · uyoo-sheet-body · uyoo-keep · uyoo-page-break | 모든 쪽 아래에 번호 · 판 · 날짜 · 쪽 |
상호작용이 없어 키보드 동작은 없습니다. PDF 는 태그 PDF(Chrome 출력)로 냅니다.
| 항목 | 규칙 |
|---|---|
| 그늘 | 화면 미리보기에서만 카드 두께(2,3). 인쇄에서는 뺀다. 지붕 모서리는 없다(종이의 실루엣은 직사각형) |
| 면 | 칠하지 않는다. 배경 그래픽을 끄면 사라지고 토너를 먹는다. 강조는 선 굵기(마무리 1.6pt · 합계 1.2pt)와 글자 굵기 |
| 나눔 | 행 · 섹션 · 서명란은 쪽 사이에서 나누지 않는다. 제목만 쪽 끝에 남기지 않는다. 고아 · 과부 줄 3 |
| 쪽 번호 | CSS 가 아니라 렌더러(puppeteer header/footerTemplate)가 넣는다 |
| 페이지 크기 | @page uyoo-sheet(이름 있는 페이지). 이 CSS 를 불러온 다른 화면의 인쇄 여백은 바꾸지 않는다 |
| 다크 | 따르지 않는다. 바닥만 어둡고 종이는 라이트 토큰을 다시 선언한다 |
v1 paper.css 의 짧은 클래스(.sheet · .doc-head · .sec · .sign* …)가 어디로 갔는지는 docs/migration/v2-brand.md 의 A4 표에 있습니다.