/* tempo 법무 문서(이용약관 · 개인정보 처리방침) 전용 스타일.

   style.css 는 손대지 않는다 — 랜딩은 Vercel 이 서빙하던 사이트의 미러이고 그 목적이
   동일성 보존이다(DESIGN.md §14). 이 파일은 셸(nav·footer·색·활자 패밀리)을 style.css 에
   그대로 맡기고 **문서 본문의 활자와 표만** 갖는다.

   두 페이지는 analytics.js·Meta Pixel·site.js 를 싣지 않는다. 추적을 설명하는 문서가
   자기를 읽는 사람을 추적하면 그 문서가 자기 말을 뒤집는다. 그래서 여기에는 스크립트가
   필요한 규칙이 하나도 없다 — 메가 메뉴도 버거도 없는 최소 nav 를 쓴다. */

/* nav 에 메뉴가 없으므로 `문의하기` 를 오른쪽으로 민다.
   (index.html 은 .nav-menu 의 `margin:0 auto` 가 대신 하던 일이다) */
.legal-nav .nav-r { margin-inline-start: auto; }

/* 고정 nav 72px + 문서가 헤더에 붙지 않을 만큼의 숨. */
.legal { padding: calc(72px + 56px) 20px 96px; }

.legal-doc {
  max-width: 760px;          /* 한국어 본문의 읽기 폭 */
  margin: 0 auto;
  background: var(--b-white);
  border-radius: 24px;
  padding: 56px 56px 64px;
}

.legal-doc h1 {
  font-size: clamp(26px, 4.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.35;
}

/* 시행일·버전. 제목 바로 아래 한 줄이고 본문과 규칙선으로 갈린다. */
.legal-meta {
  margin-top: 14px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--b200);
  font-size: 13px;
  color: var(--b500);
  line-height: 1.9;
}

.legal-doc h2 {
  margin-top: 44px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.5;
  color: var(--b800);
}

.legal-doc h3 {
  margin-top: 30px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--b700);
}

.legal-doc p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--b600);
}

.legal-doc ul,
.legal-doc ol { margin: 14px 0 0 20px; }
.legal-doc li {
  font-size: 15px;
  line-height: 1.85;
  color: var(--b600);
  margin-top: 7px;
}
.legal-doc li > ul,
.legal-doc li > ol { margin-top: 7px; }

.legal-doc strong { color: var(--b800); font-weight: 700; }

.legal-doc a {
  color: var(--b800);
  text-decoration: underline;      /* 색만으로 링크를 알리지 않는다 */
  text-underline-offset: 3px;
}

/* 표는 좁은 폭에서 카드로 접지 않는다 — 항목·목적·보유기간은 나란히 놓고 견주는 값이라
   세로로 쌓으면 견줄 수 없다. 대신 자기 상자 안에서 가로로 스크롤한다. */
.legal-table { margin-top: 16px; overflow-x: auto; }
.legal-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.7;
}
.legal-table th,
.legal-table td {
  border: 1px solid var(--b200);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--b600);
}
.legal-table th {
  background: var(--b100);
  font-weight: 700;
  color: var(--b700);
  white-space: nowrap;
}

/* 본문과 같은 무게로 두면 그냥 문단이 되고, 상자를 치면 경고처럼 읽힌다.
   왼쪽 규칙선 하나가 「이건 짚고 넘어가는 줄」이라고 말하는 최소 표시다. */
.legal-note {
  margin-top: 18px;
  padding: 2px 0 2px 16px;
  border-inline-start: 3px solid var(--b300);
}
.legal-note p { margin-top: 0; }
.legal-note p + p { margin-top: 10px; }

.legal-back {
  max-width: 760px;
  margin: 28px auto 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--b400);
}
.legal-back a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .legal { padding: calc(72px + 32px) 14px 72px; }
  .legal-doc { border-radius: 18px; padding: 32px 20px 40px; }
  .legal-doc h2 { margin-top: 36px; font-size: 17.5px; }
  .legal-back { padding-inline: 6px; }
}