/*  약관 · 개인정보처리방침 한 장의 자리 — 글을 읽는 판이라 값이 몇 뿐이다.
 *  GameHub `wwwroot/css/legal.css` 를 그대로 옮겼고, 갈리는 날은 그쪽이 이기고 여기가 따라간다(README §7).
 *  ⚠ 색도 글자 크기도 새로 안 짓는다 — `studio.css` 의 값(`--ink`·`--dim`·`--line`)만 쓴다.
 *  ⚠ 이 파일은 Next.js 판(`src/styles/`)에서 «안 온 것»이다 — 저쪽에 약관 판이 없었다.
 *    그래서 「저쪽이 이긴다」의 짝은 Next.js 판이 아니라 GameHub 이다.  */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 2px 48px;
}
.legal h1 {
  font-size: 23px;
  font-weight: 800;
  margin: 6px 0 10px;
}
.legal-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.legal-draft {
  margin: 10px 0 22px;
}
.legal h2 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 22px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.legal p {
  color: var(--dim);
  margin: 0 0 8px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/*  가입 판의 동의 줄 — 링크만 또렷하게(밑값은 `.hint` 의 옅은 색이다).
    ⚠ **칸의 폭을 여기서 도로 편다** — `studio.css · .gate-form input` 이 `width: 100%` 라 그대로 두면
      체크박스 하나가 판을 가로질러 320px 로 늘어난다. 그 옷은 Next.js 판에서 그대로 온 것이라
      «저쪽»을 고치지 않고 이 자리에서 좁혀 덮는다(README §7).
    ⚠ 줄을 flex 로 안 짠다 — 글이 두 줄로 접힐 때 링크가 제 자리에서 흘러야 해서, 칸을 그냥
      글줄 안의 한 글자처럼 세운다(`vertical-align` 이 그 자리를 잡는다).
    ⚠ 링크는 딱지(label) «밖»이라야 한다 — 딱지 «안»의 <a> 를 누르면 브라우저가 그 누르기를
      칸으로 돌려 약관이 안 열리고 체크만 뒤집힌다(오류는 한 줄도 안 난다).  */
.gate-legal {
  margin-top: 2px;
}
.gate-form .gate-legal input[type="checkbox"] {
  width: auto;
  margin: 0 6px 0 0;
  padding: 0;
  vertical-align: -1px;
  accent-color: var(--accent);
}
.gate-legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}