.legal { padding: 20px 18px 40px; color: #25252a; }
.legal-card { padding: 20px 0; border-bottom: 1px solid #e8e8ec; }
.legal-card h2 { margin: 0 0 12px; font-size: 19px; line-height: 1.5; }
.legal-note { color: #62626b; font-size: 14px; line-height: 1.75; }
.legal-link { display: block; padding: 10px 0; color: #254ac8; font-size: 15px; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; }
.legal-link[aria-current="page"] { font-weight: 700; }
.legal-body, .legal-summary { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; font-size: 15px; }
.legal-body { padding: 24px 0; }
.legal-button { min-height: 44px; margin-top: 12px; padding: 10px 18px; border: 0; border-radius: 8px; background: #254ac8; color: white; font: inherit; cursor: pointer; }
.legal-link:focus-visible, .legal-button:focus-visible { outline: 3px solid #f5b942; outline-offset: 4px; }

/* 시안 v15(body.app--v15 — 회색 바탕 #f2f2f2, 2026-10-26 시안 v15 정리): 밑줄로만 나누던 묶음 · 본문이 회색 바탕에 묻히지 않게
 * 테두리 없는 흰 상자(시안 .box)로 나눔.
 * 화면 점검(2026-10-26): 좌우 여백은 main 의 16px 하나만(.legal 좌우 18px 이중 → 0), 묶음 제목 명조(--font-family-title),
 * 글 · 보조 글 · 링크 · 버튼 · 초점 색은 v15 토큰(옛 #25252a · #62626b · #254ac8 대신). 링크는 밑줄로 구분(잉크). */
.app--v15 .legal {
  padding: 20px 0 40px;
  color: var(--color-text-primary);
}
.app--v15 .legal-card h2 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-tight);
}
.app--v15 .legal-note { color: var(--color-text-secondary); }
.app--v15 .legal-link { color: var(--color-text-link); }
.app--v15 .legal-button {
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}
.app--v15 .legal-link:focus-visible,
.app--v15 .legal-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.app--v15 .legal-card,
.app--v15 .legal-body {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-bottom: 0;
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
}
.app--v15 .legal > :first-child { margin-top: 0; }
.app--v15 .legal-card h2 { margin-bottom: var(--space-2); }
.app--v15 .legal-card > :last-child { margin-bottom: 0; }
.app--v15 .legal > .legal-link { margin-top: var(--space-2); }

/* 공개 문서 본문 마크다운(2026-10-30 QA 6번, 뷰 legal-document.ejs .legal-md — 블록은 view-model 이 만듦, HTML 없음):
 * 상자 자체는 줄바꿈을 접고(블록 사이 공백 무시), 문단 · 목록 · 제목 안은 글자 그대로(pre-wrap — 공백 · 줄바꿈 유지) */
.legal-body.legal-md { white-space: normal; }
.legal-md > :first-child { margin-top: 0; }
.legal-md > :last-child { margin-bottom: 0; }
.legal-md__p, .legal-md__h, .legal-md__list li { white-space: pre-wrap; overflow-wrap: anywhere; }
.legal-md__p { margin: 0 0 12px; }
.legal-md__h { margin: 20px 0 8px; font-size: 16px; line-height: 1.6; font-weight: 700; }
h4.legal-md__h, h5.legal-md__h { font-size: 15px; }
.legal-md__list { margin: 0 0 12px; padding-left: 22px; }
.legal-md__list li { margin: 2px 0; }
.legal-md__hr { margin: 16px 0; border: 0; border-top: 1px solid #e8e8ec; }
.legal-md__link { color: #254ac8; text-decoration: underline; text-underline-offset: 3px; }
.app--v15 .legal-md__link { color: var(--color-text-link); }
.app--v15 .legal-md__hr { border-top-color: var(--color-border-default, #e8e8ec); }