/* ═══════════════════════════════════════════════════════
   ChartFlow — 약관 · 개인정보 페이지 (terms.html · privacy.html 공용)
   2026-10-18 개편: 본문 문구는 그대로 두고 모양만 바꿈 (브랜드 이름만 ChartFlow 로).
   두 페이지가 똑같은 틀이라 파일 하나를 같이 씁니다. 이름 접두어 lg-
   (site.css 의 예전 이름 .legal / .legal-updated / .legal-intro 와 겹치지 않게 lg- 를 씀)

   틀
     머리  : .page-header--compact 안에 제목 · 한 줄 설명 · 게시일(.lg-dates)
     본문  : .lg-layout = 목차(nav.ui-toc.lg-toc) + 본문(article.ui-prose.lg-body)
             넓은 화면(1024px 이상) — 본문 왼쪽, 목차 오른쪽에 붙어서 따라옴
             좁은 화면 — 목차가 본문 위로 (641~1023px 2열, 640px 이하 1열)
     조문 제목 id: art1 · art2 … · art6-2 (다른 페이지가 terms.html#art6-2 로 연결 — 바꾸지 말 것)
   ═══════════════════════════════════════════════════════ */

/* 머리의 게시일·개정일 */
.lg-dates { margin-top: 14px; font-size: 0.875rem; line-height: 1.65; color: var(--c-ink-3); font-variant-numeric: tabular-nums; max-width: 760px; }
.lg-revnote { display: block; }

/* 목차 + 본문 */
.lg-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(200px, 260px);
  grid-template-areas: "body toc";
  column-gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.lg-body { grid-area: body; min-width: 0; }
.lg-toc {
  grid-area: toc;
  margin: 0;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto;
}
.lg-toc ol { columns: 1; }
.lg-toc li { font-size: 0.875rem; }

/* 조문으로 바로 갈 때(#art6-2, 목차 누름) — [2026-10-18 통합] site.css 에서 scroll-margin 이중 계산을 없애 다른 페이지와 같이 머리글 아래 16px 에 멈춤.
   글꼴이 늦게 들어와 위치가 어긋나는 것은 site.js 가 다시 맞춤 (예전 이 두 페이지의 인라인 스크립트를 site.js 로 옮김) */

/* 본문 표 — 2칸 표(항목 | 내용)의 왼쪽 칸 폭 */
.lg-body th[scope="row"] { width: 30%; }
.lg-body .lg-col-key { width: 26%; }
.lg-body .lg-nw { white-space: nowrap; } /* 짧은 칸(근거·기간)이 '전자상거래/법'처럼 쪼개지지 않게 */

/* 운영 · 문의 (값 목록) */
.lg-contact { margin: 16px 0; }
.lg-contact > div { grid-template-columns: 5em minmax(0, 1fr); } /* 좁은 화면에서도 두 칸 그대로 (이름이 짧음) */
.lg-body > .lg-contact:last-child { margin-top: 40px; }

@media (max-width: 1023px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "body"; }
  .lg-toc { position: static; max-height: none; overflow: visible; max-width: 760px; margin: 0 0 32px; }
  .lg-toc ol { columns: 2; }
}
@media (max-width: 640px) {
  .lg-toc ol { columns: 1; }
  .lg-body th[scope="row"], .lg-body .lg-col-key { width: 34%; }
}