/* ============================================================
   SPINE GAME HUB — page.css
   문서형 페이지(소개·문의·개인정보처리방침) 공용 스타일.
   ------------------------------------------------------------
   공통 시스템(헤더·푸터·색·간격)은 tokens.css(.sgh-*).
   이 파일은 문서 본문(.page-doc)만 담당하며 tokens 변수만 쓴다.
   로드 순서: tokens.css → hub.css → page.css
   ============================================================ */

.page-main {
  padding: var(--sgh-sp-8) 0;
}

.page-doc {
  max-width: 820px;
  margin: 0 auto;
  background: var(--sgh-bg-1);
  border: 1px solid var(--sgh-border-1);
  border-radius: var(--sgh-r-lg);
  padding: var(--sgh-sp-8) var(--sgh-sp-7);
  box-shadow: var(--sgh-shadow-1);
}

.page-doc h1 {
  margin: 0 0 var(--sgh-sp-2);
  font-family: var(--sgh-font-display);
  font-size: var(--sgh-fs-h1);
  letter-spacing: -0.02em;
  color: var(--sgh-text-1);
}

.page-doc .doc-meta {
  margin: 0 0 var(--sgh-sp-6);
  color: var(--sgh-text-3);
  font-size: var(--sgh-fs-small);
}

.page-doc h2 {
  margin: var(--sgh-sp-7) 0 var(--sgh-sp-3);
  padding-top: var(--sgh-sp-5);
  border-top: 1px solid var(--sgh-border-1);
  font-size: var(--sgh-fs-h2);
  color: var(--sgh-text-1);
}

.page-doc h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.page-doc p,
.page-doc li {
  color: var(--sgh-text-2);
  line-height: 1.75;
  font-size: var(--sgh-fs-body);
}

.page-doc ul {
  padding-left: 22px;
}

.page-doc strong {
  color: var(--sgh-text-1);
}

.page-doc a {
  color: var(--game-accent);
  text-decoration: none;
}

.page-doc a:hover {
  text-decoration: underline;
}

.page-doc .doc-note {
  background: var(--sgh-bg-2);
  border: 1px solid var(--sgh-border-1);
  border-radius: var(--sgh-r-md);
  padding: var(--sgh-sp-4) var(--sgh-sp-5);
  font-size: var(--sgh-fs-body);
}

.page-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sgh-fs-small);
}

.page-doc th,
.page-doc td {
  border: 1px solid var(--sgh-border-1);
  padding: 10px 12px;
  text-align: left;
  color: var(--sgh-text-2);
}

.page-doc th {
  background: var(--sgh-bg-2);
  color: var(--sgh-text-1);
  font-weight: 600;
}

@media (max-width: 560px) {
  .page-doc {
    padding: var(--sgh-sp-6) var(--sgh-sp-5);
  }
}