/* =========================================================
   약관 · 개인정보취급방침 (Views/Home/Terms_*.cshtml, Privacy_*.cshtml)

   본문 서식은 .pd-prose 가 전부 맡습니다. 여기는 배치와,
   긴 법률 문서를 읽을 때만 필요한 것 두 가지만 둡니다.
   ========================================================= */

.page-term {
  /* 고객센터 화면들과 같은 읽는 폭을 씁니다 — tokens.css 의 --pd-read-w.
     한동안 그 값이 900px 이었습니다. 법률 문서는 끝까지 읽어야 하는 글이라
     글줄을 짧게 두려던 것인데, 지금은 그 값이 본문 컨테이너와 같아서 폭을
     줄이지 않습니다(화면끼리 폭을 맞추는 쪽을 택했습니다 — 사용자 지시).
     다시 좁히려면 여기가 아니라 tokens.css 한 곳을 내립니다. */
  max-width: var(--pd-read-w);
}

.page-term__doc {
  padding: var(--pd-space-10);
}

/* 지금 보고 있는 판. 제목 옆에 붙습니다. */
.page-term__version {
  display: inline-block;
  margin-inline-start: var(--pd-space-3);
  padding: 2px var(--pd-space-2);
  border-radius: var(--pd-radius-sm);
  background-color: var(--pd-surface-muted);
  color: var(--pd-text-secondary);
  font-size: 13px;
  font-weight: var(--pd-weight-semibold);
  letter-spacing: normal;
  vertical-align: middle;
}

.page-term__versions {
  margin-top: var(--pd-space-6);
}

/* 조문 번호가 깊게 중첩됩니다(1 → ① → -). .pd-prose 의 기본 여백으로는
   단계가 잘 안 보여서, 이 화면에서만 한 단계씩 더 들여씁니다. */
.page-term .pd-prose :is(ul, ol) :is(ul, ol) {
  margin-top: var(--pd-space-1);
  padding-inline-start: var(--pd-space-5);
}

/* 조문 제목 위 간격. 조가 바뀌는 지점이 눈에 들어와야 합니다. */
.page-term .pd-prose h2 { margin-top: var(--pd-space-10); }
.page-term .pd-prose h3 { margin-top: var(--pd-space-8); }

@media (max-width: 768px) {
  .page-term__doc { padding: var(--pd-space-5); }
  .page-term__version { font-size: 12px; margin-inline-start: var(--pd-space-2); }
  .page-term .pd-prose h2 { margin-top: var(--pd-space-8); }
  .page-term .pd-prose h3 { margin-top: var(--pd-space-6); }
}