/* 설명 페이지(about·how-to-play·faq·stickers) 공용 스타일.
   게임 화면과 같은 한지 색 (src/App.css의 변수와 같은 값). 외부 글꼴은 불러오지 않아요 (방문자 정보가 다른 곳으로 가지 않게) */
:root {
  --color-hanji: #f3ecdc;
  --color-paper: #fbf7ec;
  --color-line: #ddd0b4;
  --color-fill: #eae0ca;
  --color-ink: #2b2522;
  --color-ink-soft: #6b6152;
  --color-indigo: #1f3b6e;
  --color-red: #b5372a;
  --color-gold: #d9a441;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  color: var(--color-ink);
  background: var(--color-hanji);
  line-height: 1.75;
  word-break: keep-all;
}
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.top img {
  width: 132px;
  height: auto;
}
a {
  color: var(--color-indigo);
}
.play {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--color-indigo);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
h1 {
  margin: 12px 0 4px;
  font-size: 1.6rem;
}
.lead {
  margin: 0 0 8px;
  color: var(--color-ink-soft);
}
h2 {
  margin: 32px 0 8px;
  padding-top: 10px;
  font-size: 1.15rem;
  color: var(--color-indigo);
  border-top: 1px solid var(--color-line);
}
h3 {
  margin: 18px 0 6px;
  font-size: 1rem;
}
p,
li {
  font-size: 0.96rem;
}
.box {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 12px;
}
.example {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.example b {
  color: var(--color-red);
}
.table-wrap {
  overflow-x: auto;
  margin: 8px 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-paper);
  font-size: 0.9rem;
}
th,
td {
  padding: 8px 10px;
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--color-fill);
}
.dot {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: -0.05em;
}
.dot.gray { background: #9a948a; }
.dot.green { background: #4f8a4b; }
.dot.blue { background: #3d6cb3; }
.dot.purple { background: #7a4ea3; }
.dot.gold { background: var(--color-gold); }
.faq dt {
  margin-top: 18px;
  font-weight: 700;
}
.faq dt::before {
  content: '물음 ';
  color: var(--color-red);
}
.faq dd {
  margin: 4px 0 0;
}
.note {
  color: var(--color-ink-soft);
  font-size: 0.88rem;
}
/* 맨 아래 페이지 링크 (게임 화면 아래쪽 링크 줄과 같은 목록) */
.page-links {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  border-top: 1px solid var(--color-line);
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.page-links nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4px;
}
.page-links nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}
.page-links nav a[aria-current='page'] {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
}
.page-links p {
  margin: 4px 0 0;
}
/* 없는 주소 페이지(404.html) — 가운데 정렬, 붉은 도장 */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 48px;
  text-align: center;
}
.not-found-logo {
  width: 200px;
  height: auto;
}
.not-found-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 32px 0 8px;
  border: 3px solid var(--color-red);
  border-radius: 50%;
  color: var(--color-red);
  font-family: serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transform: rotate(-8deg);
}
.not-found .lead {
  margin-bottom: 24px;
}