/* ============================================================
   changup.ai — 법적 고지 문서 (이용약관 · 개인정보처리방침 · 환불 정책)
   ------------------------------------------------------------
   결제 심사 필수 문서다. 심사원과 이용자가 둘 다 읽는 문서이므로
   장식을 줄이고 조문 구조와 스캔 가능성에만 투자한다.

   블로그 본문(content.css .art-body)과 다른 점:
     · 읽는 폭을 더 넓게 (840px) — 조문에 표와 목록이 많다
     · 조 단위 앵커와 좌측 목차 — 심사 시 특정 조를 지목해 확인한다
     · 개정 이력을 문서 끝에 남긴다
   ============================================================ */

.legal{padding:var(--sp7) 0 var(--sp8);background:var(--surface)}

.legal-head{max-width:940px;margin:0 auto;padding:0 var(--gutter)}
.legal-head h1{
  margin-top:var(--sp3);font-size:var(--fs-h1);font-weight:800;color:var(--t1);
  letter-spacing:var(--ls-h1);line-height:1.34;
}
.legal-meta{
  margin-top:var(--sp4);display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp4);
  padding:13px 16px;border-radius:var(--r-md);
  background:var(--surface-soft);border:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--t3);
}
.legal-meta b{color:var(--t1);font-weight:700}

/* 초안 고지 — 법무 검토 전임을 문서 자체에 남긴다 */
.legal-draft{
  max-width:940px;margin:var(--sp4) auto 0;padding:0 var(--gutter);
}
.legal-draft div{
  display:flex;align-items:flex-start;gap:9px;
  padding:13px 16px;border-radius:var(--r-md);
  background:var(--state-warn-soft);border:1px solid #f3e2bd;
  font-size:var(--fs-sm);color:#8a6113;line-height:1.65;
}
.legal-draft svg{flex:0 0 auto;margin-top:2px}

/* 목차 */
.legal-toc{
  max-width:940px;margin:var(--sp6) auto 0;padding:0 var(--gutter);
}
.legal-toc-in{
  padding:var(--sp4) var(--sp5);border-radius:var(--r-md);
  background:var(--surface-soft);border:1px solid var(--line);
}
.legal-toc b{
  display:block;font-size:var(--fs-xs);font-weight:800;color:var(--t3);
  letter-spacing:.06em;margin-bottom:11px;
}
.legal-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px var(--sp5)}
.legal-toc a{
  display:block;font-size:var(--fs-sm);color:var(--t3);
  transition:color var(--d-fast) var(--ez);
}
.legal-toc a:hover{color:var(--accent-strong)}

/* 본문 */
.legal-body{max-width:940px;margin:var(--sp6) auto 0;padding:0 var(--gutter)}

.legal-body h2{
  margin-top:var(--sp7);padding-bottom:9px;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-h3);font-weight:800;color:var(--t1);
  letter-spacing:var(--ls-h3);scroll-margin-top:calc(var(--shell-h) + 16px);
}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{
  margin-top:var(--sp5);font-size:var(--fs-body);font-weight:750;color:var(--t1);
  letter-spacing:-.3px;
}
.legal-body p{
  margin-top:var(--sp3);font-size:15px;line-height:1.85;
  letter-spacing:-.3px;color:#39405a;word-break:keep-all;
}

/* 항 — 번호를 매긴 조문 목록 */
.legal-body ol.cl{margin-top:var(--sp3);display:grid;gap:10px;counter-reset:cl}
.legal-body ol.cl > li{
  position:relative;padding-left:29px;counter-increment:cl;
  font-size:15px;line-height:1.8;letter-spacing:-.3px;color:#39405a;word-break:keep-all;
}
.legal-body ol.cl > li::before{
  content:counter(cl);position:absolute;left:0;top:.3em;
  width:20px;height:20px;border-radius:var(--r-xs);
  display:grid;place-items:center;
  font-size:11px;font-weight:800;
  background:var(--surface-soft);border:1px solid var(--line);color:var(--t3);
}
/* 호 — 항 안의 세부 항목 */
.legal-body ul.sub{margin-top:9px;display:grid;gap:6px}
.legal-body ul.sub li{
  position:relative;padding-left:16px;
  font-size:14px;line-height:1.75;color:var(--t3);word-break:keep-all;
}
.legal-body ul.sub li::before{
  content:"";position:absolute;left:3px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--blue-300);
}
.legal-body strong{color:var(--t1);font-weight:750}

/* 표 */
.legal-body .tbl{margin-top:var(--sp4);overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line)}
.legal-body table{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--fs-sm)}
.legal-body th,.legal-body td{
  padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft);
}
.legal-body thead th{background:var(--surface-soft);font-weight:800;color:var(--t2);font-size:var(--fs-xs)}
.legal-body tbody th{font-weight:700;color:var(--t1);white-space:nowrap}
.legal-body tbody tr:last-child th,.legal-body tbody tr:last-child td{border-bottom:0}

/* 강조 박스 — AI 생성물 특칙처럼 반드시 읽어야 하는 조항 */
.legal-body .box{
  margin-top:var(--sp4);padding:var(--sp4) var(--sp5);
  border-radius:var(--r-md);
  background:var(--state-ai-soft);border:1px solid var(--peri-100);
}
.legal-body .box b{display:block;font-size:var(--fs-sm);font-weight:800;color:var(--peri-700);margin-bottom:6px}
.legal-body .box p{margin-top:0;font-size:14px;color:#4a4c8a;line-height:1.8}
.legal-body .box p+p{margin-top:9px}

.legal-body a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px}

/* 개정 이력 */
.legal-hist{
  max-width:940px;margin:var(--sp7) auto 0;padding:0 var(--gutter);
}
.legal-hist-in{
  padding:var(--sp4) var(--sp5);border-radius:var(--r-md);
  background:var(--surface-soft);border:1px solid var(--line);
}
.legal-hist b{display:block;font-size:var(--fs-xs);font-weight:800;color:var(--t3);letter-spacing:.06em}
.legal-hist ul{margin-top:11px;display:grid;gap:7px}
.legal-hist li{display:flex;gap:var(--sp4);font-size:var(--fs-sm);color:var(--t3)}
.legal-hist time{flex:0 0 96px;color:var(--t4);font-variant-numeric:tabular-nums}

/* 관련 문서 링크 */
.legal-rel{
  max-width:940px;margin:var(--sp5) auto 0;padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;gap:var(--sp2);
}
.legal-rel a{
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 15px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-sm);font-weight:650;color:var(--t2);
  text-decoration:none;transition:var(--tr-base);
}
.legal-rel a:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft)}
.legal-rel a[aria-current="page"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}

@media (max-width:760px){
  .legal-toc ol{grid-template-columns:1fr}
  .legal-body p,.legal-body ol.cl > li{font-size:14.5px}
}

/* ▼ 우리 추가 */