/* 게임 화면 아래에 붙는 설명 문서 영역.
   게임별 style.css '다음에' 불러야 한다 — 여기서 html/body의 overflow:hidden을 되돌린다.

   게임들은 캔버스를 window.innerWidth/innerHeight에 맞추고
   canvas.style.position='absolute'로 앉힌다. 그래서 #stage를 100dvh + relative로 두면
   캔버스 크기와 stage 박스가 정확히 겹친다. */

html, body {
  width: auto;
  height: auto;
  overflow: visible;
  overflow-x: hidden;
  /* 여백은 stage가 직접 갖는다. body에 남아 있으면 게임 화면이 뷰포트에 딱 안 맞는다. */
  padding: 0;
}

/* 본문은 읽고 복사할 수 있어야 한다. 게임 CSS가 body 전체에 건 선택 금지를 문서에서만 푼다. */
body {
  -webkit-user-select: auto;
  user-select: auto;
}

#stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  /* transform이 걸린 요소는 안쪽 position:fixed 자손의 기준 박스가 된다(CSS 규격).
     덕분에 게임별 오버레이 CSS를 한 줄도 안 고치고 오버레이를 게임 화면 안에 가둔다. */
  transform: translateZ(0);
}

/* 감도 승부예측처럼 캔버스가 아니라 일반 흐름으로 짜인 화면.
   원래 body가 갖고 있던 세로 flex 배치를 stage가 그대로 이어받는다. */
#stage.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 20px 28px;
}

.doc-bg { width: 100%; }

/* 게임 화면 아래에 읽을거리가 있다는 걸 알려주는 칩.
   캔버스는 touch-action:none이라 모바일에서 캔버스를 쓸어도 스크롤되지 않는다.
   이 칩이 없으면 아래 내용으로 내려갈 방법이 없다. */
.doc-jump {
  position: absolute;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.doc-jump:hover { background: #fff; }

/* 여행 다트는 화면 맨 아래에 경계 데이터 출처 표기가 깔려 있다.
   CC BY 자료라 그 줄을 가리면 안 되므로 이 게임에서만 칩을 위로 올린다. */
.doc-jump.top {
  top: calc(12px + env(safe-area-inset-top, 0px));
  bottom: auto;
}

/* ── 문서 본문 ─────────────────────────────────────────────── */

.gdoc,
.gfoot {
  background: #ffffff;
  color: #111111;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-user-select: auto;
  user-select: auto;
}

.gdoc {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 8px;
  line-height: 1.75;
  /* 한국어는 음절이 아니라 단어 단위로 꺾는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 문서 폭이 720px이어도 흰 배경은 화면 끝까지 깔려야 한다 (게임 배경이 어두운 경우가 있다) */
.doc-bg {
  background: #ffffff;
}

/* 게임 화면에 제목이 없는 게임은 이 문서의 제목이 그 페이지의 h1이 된다.
   (여행 다트·생일 케이크는 게임 화면 자체에 h1이 있어 여기선 h2부터 시작한다) */
.gdoc h1 {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.gdoc h2 {
  margin: 40px 0 12px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gdoc h2:first-child { margin-top: 0; }

.gdoc h3 {
  margin: 28px 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gdoc p {
  margin: 0 0 16px;
  font-size: 16px;
  color: #333;
}

.gdoc ul,
.gdoc ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.gdoc li {
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
}

.gdoc a { color: #111; }

.gdoc strong { font-weight: 700; color: #111; }

/* 게임 한 줄 요약 — 문서 맨 위에 놓는 리드 문단 */
.gdoc .lead {
  font-size: 17px;
  color: #111;
  font-weight: 500;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

/* 모드·규칙을 표로 정리할 때 */
.gdoc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 15px;
}

.gdoc th,
.gdoc td {
  border-bottom: 1px solid #eee;
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  color: #333;
}

.gdoc th {
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}

/* 자주 묻는 질문 */
.gdoc .faq-q {
  margin: 24px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

.gdoc .faq-a {
  margin: 0;
  font-size: 16px;
  color: #333;
}

/* 다른 게임으로 넘어가는 카드 줄 */
.gdoc .more {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  padding: 0;
  margin: 0 0 8px;
  list-style: none;
}

@media (min-width: 560px) {
  .gdoc .more { grid-template-columns: repeat(2, 1fr); }
}

.gdoc .more li { margin: 0; }

.gdoc .more a {
  display: block;
  padding: 14px 16px;
  border: 1px solid #eee;
  border-radius: 12px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: #111;
}

.gdoc .more a:hover { border-color: #ccc; background: #fafafa; }

.gdoc .more span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: #777;
}

/* ── 공통 푸터 ─────────────────────────────────────────────── */

.gfoot {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 56px;
  text-align: center;
  font-size: 13px;
  color: #888;
  border-top: 1px solid #eee;
}

.gfoot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin-bottom: 14px;
}

.gfoot a {
  color: #666;
  text-decoration: none;
  padding: 0 10px;
}

.gfoot a:hover { color: #111; text-decoration: underline; }

.gfoot .sep { color: #ddd; }

.gfoot p { margin: 0; }