/* 콘텐츠 페이지 공통 — 게임 화면과 같은 팔레트, 읽기용 세로 레이아웃 */
:root {
  --ink: #2c2118;
  --ink-soft: #6b5a49;
  --paper: #f7f1e6;
  --card: #fffdf8;
  --line: #e2d5c2;
  --rock: #b8603c;
  --paper-k: #3f7a68;
  --scissors: #9a7a2e;
}
* { box-sizing: border-box; }
/* 한국어가 섞였을 때 단어 중간에서 끊기지 않게 (영어는 영향 없음) */
body { word-break: keep-all; overflow-wrap: break-word; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
}
.wrap { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
nav.top {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
  /* 🔴 링크가 늘면 375px 안에서 넘쳐 본문이 가로로 밀린다 (실측 415px).
     숨기지 않고 접는다 — 크롤러도 사람도 전부 볼 수 있어야 한다 */
  flex-wrap: wrap;
  row-gap: .5rem;
}
nav.top .brand { flex: 1 0 100%; }
@media (min-width: 40rem) { nav.top .brand { flex: 1 1 auto; } }
nav.top a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
nav.top a:hover { color: var(--ink); }
nav.top .brand { font-weight: 700; color: var(--ink); margin-right: auto; }
h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.lede { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 2rem; }
p, li { color: var(--ink); }
ol, ul { padding-left: 1.3rem; }
li { margin: .4rem 0; }
.play {
  display: inline-block; margin: 1.5rem 0; padding: .85rem 1.6rem;
  background: var(--rock); color: #fff; text-decoration: none;
  border-radius: .6rem; font-weight: 700;
}
.play:hover { filter: brightness(1.08); }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
th, td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; }
th { background: var(--card); font-weight: 600; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: .6rem; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.ad { margin: 2.5rem 0; min-height: 100px; }
footer { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.5rem; font-size: .85rem; color: var(--ink-soft); }
footer a { color: var(--ink-soft); }

/* 좁은 화면에서 표를 짓눌러 읽기 어렵게 만드느니, 표만 옆으로 굴린다.
   본문이 가로로 밀리면 안 되므로 스크롤은 이 상자 안에서만 일어난다 */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
.scroll table { margin: 0; min-width: 30rem; }