/* ============================================================
   약관 문서 — terms.php / privacy.php 공통.
   landing.css 다음에 읽힌다(상단바·푸터를 대문과 같이 쓴다).
   여기에는 본문 활자만 둔다.
   ============================================================ */

.legal {
  --lp-maxw: 1080px;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px var(--pad, 20px) 56px;
}

/* ---------- 제목 ---------- */
.legal__head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.legal__title {
  margin: 0;
  font-size: 24px; font-weight: 800; letter-spacing: -0.6px;
  color: var(--text);
}

.legal__lead {
  margin: 12px 0 0;
  font-size: 14px; line-height: 1.8; letter-spacing: -0.2px;
  color: var(--text-dim);
}

/* 시행일 — 어느 판본을 보고 있는지가 약관에서는 본문만큼 중요하다. */
.legal__dates {
  margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  list-style: none;
  font-size: 12px; letter-spacing: -0.2px; color: var(--text-mute);
}

.legal__dates b { font-weight: 600; color: var(--text-dim); }

/* ---------- 조문 ---------- */
.legal__art {
  margin: 30px 0 0;
}

.legal__art > h2 {
  margin: 0 0 10px;
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text);
}

.legal__art p {
  margin: 0 0 10px;
  font-size: 14px; line-height: 1.85; letter-spacing: -0.2px;
  color: var(--text-dim);
}

.legal__art p:last-child { margin-bottom: 0; }

.legal__art b { font-weight: 600; color: var(--text); }

/* 항·호 — 번호는 ol 이 매긴다. 글자로 적어 두면 중간에 하나 지울 때
   나머지를 전부 손으로 고쳐야 하고, 실제로 어긋난다. */
.legal__art ol,
.legal__art ul {
  margin: 0 0 10px;
  padding-left: 22px;
  font-size: 14px; line-height: 1.85; letter-spacing: -0.2px;
  color: var(--text-dim);
}

.legal__art ol:last-child,
.legal__art ul:last-child { margin-bottom: 0; }

.legal__art li { margin: 0 0 5px; }

.legal__art li:last-child { margin-bottom: 0; }

.legal__art ul { list-style: disc; }

/* 아래에 목록을 거느린 항목은 묶음의 머리다('회원 관리' 아래 세부 목적들).
   같은 굵기로 두면 어디까지가 머리이고 어디부터 속인지 읽히지 않는다. */
.legal__art li:has(> ul) { font-weight: 600; color: var(--text); }

.legal__art li:has(> ul) > ul { font-weight: 400; color: var(--text-dim); }

.legal__art ol { list-style: decimal; }

/* 두 겹 이상은 번호 모양을 바꿔 준다 — 1. 안의 1. 은 어느 층인지 알 수 없다. */
.legal__art ol ol { list-style: lower-latin; margin-top: 5px; }

.legal__art ul ul { list-style: circle; margin-top: 5px; }

/* 정의·사업자정보처럼 '라벨 : 값' 이 줄줄이 오는 곳 */
.legal__kv {
  margin: 0; padding: 14px 16px;
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 10px;
  font-size: 13.5px; line-height: 1.85; letter-spacing: -0.2px;
  color: var(--text-dim);
}

/* 라벨 칸을 가장 긴 라벨에 맞춰 **한 번에** 정한다. 줄마다 따로 재면
   '개인정보 보호책임자' 가 있는 줄만 값이 밀려 세 줄이 어긋난다.
   display:contents 가 줄 상자를 걷어내 dt·dd 를 바깥 격자에 직접 앉힌다. */
.legal__kv-row { display: contents; }

.legal__kv dt { color: var(--text-mute); }

.legal__kv dd { margin: 0; color: var(--text); }

/* 전화·이메일은 누를 수 있어야 하지만(폰에서 바로 걸린다) 브라우저 기본
   파란 밑줄은 이 문서에서 혼자 튄다. 본문 색을 따르게 하고 밑줄만 남긴다. */
.legal__kv a {
  color: inherit; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--line);
  transition: text-decoration-color .12s;
}

.legal__kv a:hover,
.legal__kv a:focus-visible { text-decoration-color: currentColor; }

/* ---------- 부칙 ---------- */
.legal__addendum {
  margin: 34px 0 0; padding: 16px 18px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.legal__addendum h2 {
  margin: 0 0 8px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.2px; color: var(--text);
}

.legal__addendum p {
  margin: 0 0 6px;
  font-size: 13px; line-height: 1.8; letter-spacing: -0.2px; color: var(--text-dim);
}

.legal__addendum p:last-child { margin-bottom: 0; }

/* ---------- 다른 문서로 ---------- */
.legal__also {
  margin: 30px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px; letter-spacing: -0.2px; color: var(--text-mute);
}

.legal__also a { color: var(--text-dim); font-weight: 600; text-decoration: none; }

.legal__also a:hover,
.legal__also a:focus-visible { color: var(--text); text-decoration: underline; }

@media (max-width: 480px) {
  .legal { padding-top: 20px; }
  .legal__title { font-size: 20px; }
  .legal__kv { display: block; }
  .legal__kv-row { display: block; margin-bottom: 8px; }
  .legal__kv-row:last-child { margin-bottom: 0; }
  .legal__kv dt { font-size: 12px; }
}