/* 법무 문서 페이지 — styles.css 토큰 위에 읽기용 레이아웃만 얹는다. 새 디자인 언어 없음. */

.legal .legal-nav {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 20px var(--gutter);
  color: var(--ink-900);
  background: transparent;
  mix-blend-mode: normal;
}
.legal .legal-nav .wordmark { color: var(--ink-900); }
.legal-wordmark { display: block; line-height: 0; }
.legal-wordmark img { display: block; }
.legal-back { font-size: 0.9375rem; color: var(--ink-600); text-decoration: none; }
.legal-back:hover { color: var(--accent); }

/* 🔴 `padding` 단축을 쓰면 안 된다 — `.shell`의 `padding-inline: var(--gutter)`까지
   0으로 덮어써서, 뷰포트가 --shell(1280px)보다 좁은 모든 화면에서 본문이 좌우
   가장자리에 딱 붙는다(폰에서 특히 읽기 어렵다). 세로 여백만 얹는다. */
.legal-main { padding-block: 24px 80px; }

.legal-doc {
  max-width: 44rem;
  font-size: 1rem;
}
.legal-doc h1 {
  /* 굵기를 800→Regular로 내리는 대신 크기를 올려 위계를 지킨다(§3). 본문 16px 대비 3배. */
  font-size: clamp(2.125rem, 4.6vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 24px;
}
.legal-doc h2 {
  /* h3(19)와 3px 이상 벌린다(§3 "인접 단계 최소 3pt 차"). */
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.legal-doc > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* 본문 16px과 1px 차라 굵기를 내리면 위계가 사라진다 → 19px로 올린다(§3). */
.legal-doc h3 { font-size: 1.1875rem; font-weight: 500; margin: 24px 0 8px; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-left: 1.25em; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--canvas); padding: 1px 5px; border-radius: 4px; }
.legal-doc a { color: var(--accent); }

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 0.9375rem;
  display: block;
  overflow-x: auto;
}
.legal-doc th, .legal-doc td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
}
.legal-doc th { font-weight: 500; color: var(--ink-600); font-size: 0.8125rem; letter-spacing: 0.02em; }

.legal-meta { margin-top: 40px; }

/* 계정 삭제 요청 폼 — 흰 바탕용(랜딩 .form은 사진 위 흰 글자 변형이라 재사용 불가) */
.legal-form {
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin: 20px 0 24px;
}
.legal-form label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-600); }
.legal-form input {
  font: inherit;
  padding: 12px 16px;
  border: 1px solid var(--ink-400);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-900);
}
.legal-form input:focus { border-color: var(--accent); outline: none; }
.legal-form .btn { justify-self: start; }

.legal-footer { padding-top: 40px; }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legal-footer nav a { text-decoration: none; color: var(--ink-600); }
.legal-footer nav a:hover { color: var(--ink-900); }