/* 콘텐츠클리닉 3차 시안 · p-legal.css (담당 J: 처리방침·약관·404)
   글자 크기·줄 간격은 공통 클래스(.t-h2 .t-h3 .t-b .t-s .t-d .t-l)만 쓴다. 여기서 px 글자 크기를 새로 만들지 않는다.
   문서형: 글 칼럼 최대 720px, 왼쪽 정렬. 연출 없음. */

/* ---------------- 글 페이지 공통 틀 ---------------- */
.legal-wrap { display: grid; gap: var(--cc-s5); padding-block: var(--cc-s6) var(--cc-section); }
.legal-doc { min-width: 0; max-width: var(--cc-max-text); }

.legal-toc { min-width: 0; }
.legal-toc-list { display: flex; flex-wrap: wrap; gap: var(--cc-s2) var(--cc-s4); list-style: none; margin: 0; padding: 0; }
.legal-toc-list a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--cc-navy-soft); text-decoration: none; text-underline-offset: 3px;
}
.legal-toc-list a:hover { color: var(--cc-navy); text-decoration: underline; }

.legal-head { display: grid; gap: var(--cc-s3); padding-bottom: var(--cc-s5); border-bottom: 1px solid var(--cc-line); }
.legal-draft { color: var(--cc-navy); }
.legal-draft strong { font-weight: var(--cc-w-strong); }

.legal-sec { display: grid; gap: var(--cc-s3); margin-top: var(--cc-s6); }
.legal-sec > h2 { margin-bottom: var(--cc-s1); }
.legal-sec p { margin: 0; }
.legal-sec ul, .legal-sec ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--cc-s2); }
.legal-sec ol { list-style: decimal; }
.legal-sec ul { list-style: disc; }
.legal-sub { display: grid; gap: var(--cc-s2); }

/* 표: 1차 글 그대로. 모바일은 한 줄씩 쌓고 칸 이름을 앞에 붙임 */
.legal-scroll { margin-top: var(--cc-s2); }
.legal-table { width: 100%; border-collapse: collapse; }
.legal-table th,
.legal-table td {
  text-align: left; vertical-align: top;
  padding: var(--cc-s3) var(--cc-s3) var(--cc-s3) 0;
  border-bottom: 1px solid var(--cc-line);
}
.legal-table th { font-weight: var(--cc-w-strong); color: var(--cc-navy-soft); }
@media (min-width: 768px) {
  .legal-table th:first-child, .legal-table td:first-child { width: 9.5em; white-space: nowrap; }
  .legal-table th:nth-child(3), .legal-table td:nth-child(3) { width: 3.5em; white-space: nowrap; }
  .legal-table th:nth-child(4), .legal-table td:nth-child(4) { width: 8.5em; }
}

@media (min-width: 1024px) {
  .legal-wrap {
    grid-template-columns: 180px minmax(0, var(--cc-max-text));
    gap: var(--cc-s8);
    align-items: start;
    padding-block: var(--cc-s7) var(--cc-section);
  }
  .legal-toc { position: sticky; top: calc(var(--cc-header-h) + var(--cc-s6)); }
  .legal-toc-list { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .legal-toc-list a { min-height: 40px; }
  .legal-head { gap: var(--cc-s4); }
}

@media (max-width: 639px) {
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table tr { display: block; padding-block: var(--cc-s3); border-bottom: 1px solid var(--cc-line); }
  .legal-table th,
  .legal-table td { display: block; border: 0; padding: 0 0 var(--cc-s2); }
  .legal-table td::before {
    content: attr(data-label); display: block;
    color: var(--cc-navy-soft); font-weight: var(--cc-w-strong);
  }
}

/* ---------------- 404 ---------------- */
.nf-head { margin-bottom: var(--cc-s5); }
.nf-art {
  width: min(100%, 200px); height: auto; margin-inline: auto;
  aspect-ratio: 593 / 800; margin-bottom: var(--cc-s5);
}
@media (min-width: 1024px) { .nf-art { width: min(100%, 300px); } }
.nf-actions { margin-top: var(--cc-s6); }