/* /terms · /privacy 전용 레이아웃. CSP(style-src 'self')가 인라인 <style> 을 막아
   외부 파일로 둔다 — theme-init.js 와 같은 이유·같은 패턴. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.legal-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-9);
}
.legal-back {
  display: inline-block;
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--ts-sub);
  margin-bottom: var(--sp-6);
}
.legal-back:hover,
.legal-back:focus-visible { text-decoration: underline; }
.legal-wrap h1 {
  font-size: var(--ts-title);
  line-height: 1.3;
  margin: 0 0 var(--sp-2);
}
.legal-meta {
  color: var(--ink-2);
  font-size: var(--ts-sub);
  margin: 0 0 var(--sp-7);
}
.legal-wrap h2 {
  font-size: var(--ts-head);
  line-height: 1.4;
  margin: var(--sp-7) 0 var(--sp-3);
}
.legal-wrap p {
  font-size: var(--ts-body);
  line-height: 1.65;
  margin: 0 0 var(--sp-3);
}
.legal-wrap ol,
.legal-wrap ul {
  font-size: var(--ts-body);
  line-height: 1.65;
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-6);
}
.legal-wrap li { margin-bottom: var(--sp-1); }
.legal-wrap a { color: var(--ink); }
.legal-cross {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hair);
  font-size: var(--ts-sub);
}
.legal-cross a { color: var(--ink-2); }

/* 404(피그마 426:2)·500(피그마 427:78) 에러 페이지 — .legal-wrap 재사용 + 중앙 정렬
   오버레이(legal-error). 32·8px 는 --sp-7·--sp-2 와 정확히 맞아 토큰을 쓴다. 26·28·6px 는
   --sp-* 4px 격자(…24·32…)에 없는 값이라(사이값) 반올림하면 승인된 목업과 어긋나 리터럴로
   둔다 — 완료 보고에 개시. */
.legal-wrap.legal-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.legal-error .brandbar-logo { margin-bottom: var(--sp-7); }

.legal-error-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 244px;
  margin: 0 0 26px;
}
.legal-error-chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r0);
  background: var(--fill-3);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
}
.legal-error-chip--dashed {
  background: none;
  border: 1.5px dashed var(--label-3);
  color: var(--label-3);
}

.legal-wrap .legal-error-title {
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 var(--sp-2);
}
.legal-error-title--head { font-size: var(--ts-head); }
.legal-error-title--display { font-size: var(--ts-display); }

.legal-error-eyebrow {
  font-size: var(--ts-cap);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  margin: 0 0 var(--sp-2);
}

.legal-wrap .legal-error-body {
  line-height: 1.65;
  margin: 0 0 28px;
}
.legal-error-body--label { font-size: var(--ts-label); color: var(--ink-4); }
.legal-error-body--base { font-size: var(--ts-body); color: var(--ink-2); }

.legal-wrap .legal-error-actions .btn-primary { color: var(--accent-ink); }
.legal-error-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* /guide 전용 — 목차·표·소제목. terms·privacy 에는 h3·table 이 없어 영향 없다. */
.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-7);
  font-size: var(--ts-label);
}
.legal-toc a { color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover,
.legal-toc a:focus-visible { text-decoration: underline; }

.legal-wrap h3 {
  font-size: var(--ts-body);
  font-weight: 600;
  line-height: 1.4;
  margin: var(--sp-5) 0 var(--sp-2);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ts-label);
  line-height: 1.65;
  margin: 0 0 var(--sp-3);
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
  vertical-align: top;
}
.legal-table thead th {
  background: var(--fill-4);
  color: var(--ink-3);
  font-weight: 500;
}
.legal-table tbody tr { border-bottom: 1px solid var(--hair); }

.legal-note {
  font-size: var(--ts-label);
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0 0 var(--sp-3);
}

/* /bot 초대 버튼 — 본체 .btn .btn-primary 를 <a> 로 쓴다(404 의 .legal-error-actions 와 같은 방식). */
.legal-wrap .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin: var(--sp-2) 0 var(--sp-3);
}
.legal-wrap .btn-primary { color: var(--accent-ink); }

/* 인라인 명령어 표기(/bot·/privacy). 브라우저 기본 monospace 에 한글 글리프가 없어
   「!꼬리봇알림」의 한글만 대체 폰트로 튀고 폭이 뒤틀렸다. 폴백 사슬로 영문·기호는
   monospace 가, 한글은 Pretendard 가 받게 한다 — 폰트 폴백은 글자 단위로 동작한다. */
.legal-wrap code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace,
    'Pretendard Variable', Pretendard, sans-serif;
  font-size: 0.92em;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: var(--fill-4);
  color: var(--ink);
}