글 읽는 화면

<article class="prose">
  <header>
    <h1>도서관을 이용하는 방법</h1>
    <p class="meta">홍길동 · 2026년 9월 4일</p>
  </header>

  <p>도서관은 책을 빌리는 곳만이 아닙니다. 자리를 예약해 공부할 수도 있고,
  매달 열리는 독서 모임에 참여할 수도 있습니다.</p>

  <h2>회원 가입</h2>
  <p>신분증을 들고 1층 안내 창구로 가면 됩니다. 그 자리에서 회원증을
  받습니다. <strong>미성년자는 보호자 동의서</strong>가 필요합니다.</p>

  <blockquote>회원증은 다른 사람에게 빌려줄 수 없습니다.</blockquote>

  <h2>대출</h2>
  <p>한 번에 다섯 권까지, 2주 동안 빌릴 수 있습니다.</p>
  <ul>
    <li>연장은 한 번만 됩니다</li>
    <li>늦게 반납하면 그만큼 대출이 막힙니다</li>
  </ul>

  <p>자세한 것은 <a href="/guide">이용 안내</a>를 보십시오.</p>
</article>

* { box-sizing: border-box; }

:root { --brand: #6e56cf; --ink: #2e3440; --line: #e5e0f5; }

body { margin: 0; background: #fff; }

/* ch 는 글자 하나의 폭입니다. 65자 정도가 읽기 좋습니다. */
.prose {
  max-width: 65ch;
  margin: 0 auto;
  padding: 24px 16px;

  font-family: "Pretendard", "맑은 고딕", sans-serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink);
}

.prose h1 { font-size: clamp(24px, 5vw, 32px); line-height: 1.3; margin: 0 0 6px; }
.prose .meta { color: #686c78; font-size: 0.9rem; margin: 0 0 24px; }

/* 소제목은 위를 넉넉히, 아래는 좁게 — 다음 문단과 묶여 보입니다 */
.prose h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 32px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* 여백은 아래로만 줍니다 — 상쇄를 따질 일이 없습니다(2.9) */
.prose p, .prose ul { margin: 0 0 16px; }
.prose li { margin-bottom: 4px; }

.prose blockquote {
  margin: 20px 0;
  padding: 10px 16px;
  border-left: 4px solid var(--brand);
  background: #f8f7fd;
  color: #3b4252;
}

/* 링크는 밑줄을 남깁니다(5.1) */
.prose a { color: var(--brand); text-underline-offset: 3px; }
.prose a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }