/* page.css — 글 페이지(안내글 · 개인정보처리방침)용. 도구 화면(base.css)과 별개다.

   도구는 격자로 깔린 작업대고, 글은 한 단으로 읽는 지면이다. 같은 CSS 로 억지로 묶지 않는다.
   색은 tokens.css 의 기본 테마(작업대)를 그대로 쓴다 — 글 페이지에는 테마 고르기가 없다.
   여덟 시간 띄워두는 화면이 아니라 한 번 읽고 나가는 화면이라 취향을 물을 자리가 아니다. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg); background-image: var(--bg-texture);
  color: var(--ink);
  font: 16px/1.75 var(--font);
  word-break: keep-all;          /* 한국어는 낱말 중간에서 자르지 않는다 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: var(--ink); }

/* ── 맨 위 줄 ─────────────────────────────────────── */
.pagetop {
  display: flex; align-items: center; gap: 14px;
  max-width: 760px; margin: 0 auto; padding: 18px 20px;
  border-bottom: 1px solid var(--line-strong);
}
.pagetop .brand { font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
.pagetop nav { margin-left: auto; display: flex; gap: 14px; font-size: 13.5px; }
.pagetop nav a { color: var(--ink-2); text-decoration: none; }
.pagetop nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── 본문 한 단 ───────────────────────────────────── */
.prose { max-width: 760px; margin: 0 auto; padding: 8px 20px 56px; }
.prose h1 { font-size: 30px; line-height: 1.3; letter-spacing: -.02em; margin: 30px 0 6px; }
.prose h2 { font-size: 20px; letter-spacing: -.01em; margin: 38px 0 10px;
  padding-top: 14px; border-top: 2px solid var(--ink); }
.prose h3 { font-size: 16px; margin: 26px 0 6px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 5px; }
.prose hr { border: 0; border-top: 1px solid var(--line-strong); margin: 30px 0; }
.prose code { font-family: var(--font-mono); font-size: .88em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1px 5px; }
.prose strong { font-weight: 700; }
/* 참고한 곳 — 본문보다 조용하게 */
.prose h3 + ul { font-size: 14px; color: var(--ink-2); }

.backline { margin-top: 40px; font-size: 14px; }

/* ── 안내글 목록 ──────────────────────────────────── */
.guidelist { list-style: none; margin: 24px 0 0; padding: 0; }
.guidelist li { margin: 0 0 2px; }
.guidelist a {
  display: block; text-decoration: none;
  padding: 15px 16px; background: var(--surface);
  border: 1px solid var(--line); border-bottom: 3px solid var(--ink);
  border-radius: var(--radius);
}
.guidelist a:hover { border-color: var(--line-strong); border-bottom-color: var(--ink); }
.guidelist b { display: block; font-size: 16.5px; letter-spacing: -.01em; }
.guidelist span { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }

/* ── 맨 아래 줄 ───────────────────────────────────── */
.pagefoot {
  max-width: 760px; margin: 0 auto; padding: 18px 20px 40px;
  border-top: 1px solid var(--line-strong);
  font-size: 13px; color: var(--ink-3);
}
.pagefoot a { color: var(--ink-2); text-decoration: none; }
.pagefoot a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .prose h1 { font-size: 25px; }
}

/* 만든 곳 — 글 페이지 맨 아래 */
.pagefoot .copy { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); opacity: .8; }