/**
 * 정적 문서 세 장(개인정보처리방침·이용약관·게임 소개)의 공통 서식.
 *
 * 게임 번들과 분리된 `public/` 의 파일이다 — 심사자와 크롤러가 자바스크립트 없이 전문을 읽는다.
 * 한국어·영어 전문이 둘 다 HTML 에 있고, 손님에게는 드롭다운으로 고른 언어만 보인다. 스크립트는
 * 언어를 고르는 `/lang.js` 하나다 — `vercel.json` 의 `script-src 'self'` 가 인라인 스크립트를 막아 파일로 둔다.
 */

:root {
  --kraft: #d9c3a0;
  --paper: #f1e6cf;
  --edge: #7a5a30;
  --ink: #2b2118;
  --stamp: #b4362b;
  font-family: var(--public-ui, 'Pretendard'), 'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
  /* 한국어는 어절 단위로 끊는다 (index.html 과 같은 이유) */
  word-break: normal;
  overflow-wrap: break-word;
}
html:lang(ko) { word-break: keep-all; }

/* **이것을 빼면 모바일에서 가로로 넘친다.** `width:min(780px,92vw)` 에 padding 이 더해져
   320px 에서 9px 넘쳤다 — 이 초안이 실제로 겪은 사고다 */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; background: #0b0908; color: var(--ink); }

/* 고른 언어만 보인다 — `<html lang>` 은 /lang.js 가 그리기 전에 정한다 */

body {
  padding: 24px 0 60px;
  background: radial-gradient(ellipse at 50% 20%, rgba(60, 40, 20, .85), rgba(8, 6, 4, .96)) fixed;
}

main {
  width: min(780px, 92vw);
  margin: 0 auto;
  padding: 30px 34px 36px;
  position: relative;
  background: var(--kraft);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .025) 0 2px, transparent 2px 6px);
  border: 2px solid var(--edge);
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
main::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(122, 90, 48, .5);
  border-radius: 8px;
  pointer-events: none;
}

h1 { font-family: var(--public-serif, 'Nanum Myeongjo'), serif; font-size: 28px; margin: 0 0 6px; letter-spacing: .03em; }
h2 {
  font-family: var(--public-serif, 'Nanum Myeongjo'), serif;
  font-size: 20px;
  margin: 30px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(122, 90, 48, .35);
}
h3 { font-size: 16px; margin: 18px 0 6px; }
p, li { font-size: 15px; line-height: 1.75; }
ul { padding-left: 20px; }
li { margin: 4px 0; }

.sub { font-size: 14px; opacity: .75; margin: 0 0 4px; }
.meta { font-size: 13px; opacity: .7; margin-top: 2px; }
.nav { margin: 18px 0 0; font-size: 14px; }
.langbar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.langbar label { display: inline-flex; align-items: center; gap: 6px; }
.langbar .globe { width: 18px; height: 18px; flex: none; }
.langbar select { min-height: 34px; padding: 3px 8px; border: 1px solid var(--edge); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
a, .nav a { color: #6b4a18; }

.box {
  background: var(--paper);
  border-left: 4px solid var(--stamp);
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 14px;
}

table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(122, 90, 48, .3); vertical-align: top; }
th { font-weight: 700; }
table.kv th { width: 32%; }

footer { text-align: center; margin-top: 34px; font-size: 13px; opacity: .7; }

@media (max-width: 520px) {
  main { padding: 22px 18px 28px; }
  main::before { inset: 6px; }
  h1 { font-size: 24px; }
  /* 좁은 화면에서는 표를 세로로 편다 — 칸이 눌려 글자가 세로로 서는 것을 막는다 */
  th, td { display: block; }
  th { width: auto; border-bottom: 0; padding-bottom: 0; }
  table.kv th { width: auto; }
  td { padding-top: 2px; }
}