<div class="typo_stack-lg">
  <h1 class="typo_title-1">h1. 제목 레벨 1</h1>
  <h2 class="typo_title-2">h2. 제목 레벨 2</h2>
  <h3 class="typo_title-3">h3. 제목 레벨 3</h3>
  <h4 class="typo_title-4">h4. 제목 레벨 4</h4>
  <h5 class="typo_title-5">h5. 제목 레벨 5</h5>
</div>

<!-- Muted -->

<p>기본 본문 텍스트입니다. 인라인으로 <span class="color_muted">보조 설명</span>을 함께 쓸 수 있습니다.</p>

<!-- typo_paragraph -->

<div>
  <p class="typo_paragraph">typo_paragraph — 첫 번째 단락입니다. 단락 사이에 일정한 간격이 적용됩니다.</p>
  <p class="typo_paragraph">두 번째 단락입니다. 마지막 단락은 하단 여백이 제거됩니다.</p>
</div>

<!-- 기본 텍스트 (Default) -->

<p class="color_default">기본 텍스트 (Default)</p>

<!-- 보조 텍스트 (Muted) -->

<p class="color_muted">보조 텍스트 (Muted)</p>

<!-- 성공 메시지 (Success) -->

<p class="color_success">성공 메시지 (Success)</p>

<!-- 주의 메시지 (Warning) -->

<p class="color_warning">주의 메시지 (Warning)</p>

<!-- 오류 메시지 (Danger) -->

<p class="color_danger">오류 메시지 (Danger)</p>

<!-- 강조 텍스트 (Primary) -->

<p class="color_primary">강조 텍스트 (Primary)</p>

<!-- Extra Small — 0.75rem -->

<p class="size_xs">Extra Small — 0.75rem</p>

<!-- Small — 0.8125rem -->

<p class="size_sm">Small — 0.8125rem</p>

<!-- Base — 0.875rem (기본) -->

<p>Base — 0.875rem (기본)</p>

<!-- Large — 1rem -->

<p class="size_lg">Large — 1rem</p>

<!-- Extra Large — 1.125rem -->

<p class="size_xl">Extra Large — 1.125rem</p>

<!-- typo_strong -->

<p>
  <strong class="typo_strong">굵은 텍스트</strong>와
  <em class="typo_italic">기울임 텍스트</em>,
  <span class="typo_underline">밑줄 텍스트</span>,
  <del class="typo_delete">취소선 텍스트</del>를 함께 사용할 수 있습니다.
</p>

<!-- typo_mark -->

<p>
  <mark class="typo_mark">형광펜 강조</mark>와
  <code class="typo_code">inline code</code> 표현도 지원합니다.
</p>

<!-- Muted -->

<p class="color_muted">
  조합 예시:
  <strong class="typo_strong color_danger">중요 경고</strong>,
  <em class="typo_italic color_primary">강조 설명</em>,
  <del class="typo_delete color_muted">삭제된 항목</del>
</p>

<!-- typo_sub -->

<p>
  화학식 H<sub class="typo_sub">2</sub>O,
  수식 x<sup class="typo_sup">2</sup> + y<sup class="typo_sup">2</sup> = z<sup class="typo_sup">2</sup>처럼
  아래·위첨자를 표현합니다.
</p>

<!-- typo_sup -->

<p>
  각주<sup class="typo_sup">1</sup>나
  제곱미터 m<sup class="typo_sup">2</sup> 단위에도 활용합니다.
</p>

<!-- typo_small -->

<p>
  <small class="typo_small">※ 본 안내는 참고용이며, 법적 효력은 약관을 따릅니다.</small>
</p>

<div style="max-width: 320px; width: 100%;">
  <p class="text_ellipsis">1줄 말줄임 — 긴 텍스트가 영역을 넘으면 말줄임표로 표시됩니다. Lorem ipsum dolor sit amet.</p>
  <p class="text_ellipsis-2">2줄 말줄임 — 두 줄까지 표시한 뒤 넘치는 내용은 말줄임표로 처리합니다. UXKM 가이드는 컴포넌트 문서와 데모를 제공합니다.</p>
  <p class="text_ellipsis-3">3줄 말줄임 — 세 줄까지 표시합니다. 디자인 시스템의 타이포그래피는 일관된 위계와 가독성을 유지하는 데 중요한 역할을 합니다. 제목·본문·캡션의 크기와 색상을 체계적으로 정의하세요.</p>
</div>

<blockquote class="typo_blockquote color_muted" cite="https://example.com">
  좋은 타이포그래피는 읽기 쉬운 콘텐츠의 기반입니다. 위계, 대비, 여백을 일관되게 유지하세요.
</blockquote>

<!-- typo_list -->

<ul class="typo_list">
  <li>디자인 토큰 정의</li>
  <li>컴포넌트 문서화</li>
  <li>접근성 검토</li>
</ul>

<!-- typo_list-ordered -->

<ol class="typo_list-ordered">
  <li>요구사항 분석</li>
  <li>와이어프레임 작성</li>
  <li>프로토타입 검증</li>
</ol>

<!-- 예시 1 -->

<p class="form_field-hint">
  용어 설명·구조화된 목록은 <a href="list.html#definition-heading">List — 정의 목록</a>을 참고하세요.
</p>

<p class="typo_paragraph">
  자세한 내용은 <a href="../getting-started.html" class="typo_link">설치 및 사용</a>을 참고하세요.
  <span class="color_muted">또는</span>
  <a href="../design-tokens.html" class="typo_link size_sm">디자인 토큰</a>으로 이동할 수 있습니다.
</p>

<div style="max-width: 32rem; width: 100%;">
  <div class="typo_stack-lg">
    <p class="typo_overline">가이드 소개</p>
    <h3 class="typo_title-3">HTML Components</h3>
    <p class="typo_lead">순수 HTML과 SCSS로 구성된 UI 컴포넌트 가이드입니다. 접근성과 일관성을 기준으로 설계되었습니다.</p>
    <p class="typo_caption">마지막 업데이트: 2026-07-31</p>
  </div>
  <div>
    <label class="typo_label" for="demo-email">이메일</label>
    <input
    id="demo-email"
    class="input"
    type="email"
    placeholder="name@example.com"
    aria-describedby="demo-email-caption"
    />
    <p id="demo-email-caption" class="typo_caption" style="margin-top: 0.25rem;">가입 시 사용한 이메일 주소를 입력하세요.</p>
  </div>
</div>

<!-- typo_title-3 -->

<h3 class="typo_title-3 color_primary">Primary 제목</h3>

<!-- typo_title-3 -->

<h3 class="typo_title-3 color_success">Success 제목</h3>

<!-- typo_title-3 -->

<h3 class="typo_title-3 color_danger">Danger 제목</h3>

<!-- typo_title-3 -->

<h3 class="typo_title-3 color_muted">Muted 제목</h3>

<!-- typo_kbd -->

<p>
  저장하려면 <kbd class="typo_kbd">⌘</kbd> + <kbd class="typo_kbd">S</kbd>를 누르세요.
  검색은 <kbd class="typo_kbd">Ctrl</kbd> + <kbd class="typo_kbd">K</kbd>입니다.
</p>

<!-- typo_pre -->

<pre class="typo_pre">
  <code>&lt;button class="btn btn_filled color_primary"&gt;
    &lt;span class="btn_label"&gt;저장&lt;/span&gt;
    &lt;/button&gt;</code>
  </pre>

<ul class="typo_list">
  <li>레이아웃
    <ul class="typo_list">
      <li>Container</li>
      <li>Grid</li>
    </ul>
  </li>
  <li>기본 요소
    <ul class="typo_list">
      <li>Button</li>
      <li>Typography</li>
    </ul>
  </li>
</ul>

<!-- typo_stack-lg -->

<div class="typo_stack-lg" style="max-width: 28rem;">
  <h3 class="typo_title-3">섹션 제목</h3>
  <p class="typo_paragraph">typo_stack-lg는 제목과 본문 사이 간격을 넓게 유지합니다. 카드 헤더, 모달 제목, 폼 섹션 등에 활용합니다.</p>
  <p class="color_muted size_sm">마지막 업데이트: 2026-07-31</p>
</div>

<!-- typo_stack -->

<div class="typo_stack" style="max-width: 28rem;">
  <h4 class="typo_title-4">작은 스택</h4>
  <p class="color_muted">typo_stack은 좁은 간격으로 제목·설명을 묶습니다.</p>
</div>