/*
 * 문서 페이지(개인정보처리방침 · 이용약관) 스타일.
 *
 * **`style.css` 를 쓰지 않는다.** 게임 화면은 가로 고정에 844x390 을 전제로 짜여 있어
 * 세로로 긴 글을 얹으면 판이 무너진다. 그리고 게임 CSS 는 한 파일에 다 있어서
 * `.doc` 같은 새 이름을 거기에 더하면 언젠가 전투 화면 규칙과 겹친다 -
 * 인수인계서에 두 번 적어 둔 사고다(`.hand-card` · `.rune-slot` · `.costbar`).
 *
 * 그래서 이 파일은 **게임과 완전히 갈라 둔다.** 여기의 이름은 전부 `doc-` 로 시작하거나
 * `.doc` 안에서만 쓰이는 태그 선택자다.
 *
 * 이 페이지들은 **구글/카카오 콘솔에 주소를 등록해야 하는 문서**라
 * 로그인 없이 열려야 하고, 검색엔진과 심사자가 브라우저로 그냥 연다 -
 * 게임처럼 가로 고정이 아니라 **평범한 세로 문서**로 만든다.
 */

:root {
  --doc-bg: #10161c;
  --doc-panel: #1a232c;
  --doc-line: #2f414f;
  --doc-text: #e8eef3;
  --doc-dim: #8fa3b2;
  --doc-accent: #4a8fd4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--doc-bg);
  color: var(--doc-text);
  font-family: "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  /* 게임 화면과 달리 세로 스크롤이 정상이다. overscroll 을 막지 않는다. */
}

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.doc-back {
  margin: 0 0 24px;
  font-size: 13px;
}

.doc a {
  color: var(--doc-accent);
}

.doc h1 {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.35;
}

.doc h2 {
  margin: 36px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--doc-line);
  font-size: 18px;
  line-height: 1.4;
}

.doc h3 {
  margin: 22px 0 6px;
  font-size: 15px;
  color: var(--doc-dim);
}

.doc p, .doc li {
  margin: 8px 0;
}

.doc ul, .doc ol {
  margin: 8px 0;
  padding-left: 22px;
}

.doc code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--doc-panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.doc-meta,
.doc-foot {
  color: var(--doc-dim);
  font-size: 13px;
}

.doc-foot {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--doc-line);
}

/*
 * 알림 상자. 문단 하나를 눈에 띄게 할 때만 쓴다.
 * 색만으로 알리지 않는다는 원칙대로, 왼쪽 선 + 배경 + 글자(굵게)를 함께 쓴다.
 */
.doc-note {
  margin: 14px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--doc-accent);
  background: var(--doc-panel);
  border-radius: 0 4px 4px 0;
}

/*
 * 표. 390px 폭에서도 읽히도록 가로 스크롤을 허용한다 -
 * 좁은 화면에서 글자가 한 줄에 두세 자씩 흐르는 것을 여러 번 겪었다.
 */
.doc table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
  font-size: 14px;
}

.doc th, .doc td {
  padding: 8px 10px;
  border: 1px solid var(--doc-line);
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--doc-panel);
  color: var(--doc-dim);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .doc { padding: 18px 14px 48px; }
  .doc h1 { font-size: 21px; }
  .doc h2 { font-size: 17px; }
}

/*
 * 언어 고르기 줄. 약관·방침은 게임 화면과 달리 **사전을 쓰지 않는다** -
 * 문서 전체가 쪽 하나이므로 언어마다 파일이 따로다(privacy-en.html …).
 * 그래서 여기만 링크 줄로 잇는다.
 *
 * 지금 보고 있는 언어는 `aria-current="page"` 로도 함께 말한다 -
 * 굵기와 색만으로 알리면 그 하나를 못 보는 사람이 생긴다.
 */
.doc-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 18px;
  font-size: 13px;
}

.doc-langs [aria-current="page"] {
  color: var(--doc-text);
  font-weight: 700;
  text-decoration: none;
}