/* 서버가 만든 페이지: 게임 페이지(/ko/games/…)와 소개 페이지(/ko/make, /ko/ai). HTML은 server/internal/site/pages/에 있습니다.
   약관 페이지(legal.css)처럼 가운데에 읽기 좋은 폭으로 두고, 칸은 같은 테두리 상자를 씁니다.
   판 정보 타일, 룰북, 승률 막대, 첫 화면의 버튼과 아이콘 줄, 코드 그림은 lobby.css의 것을 그대로 씁니다. */
.guide { width: 100%; max-width: 880px; margin: 0 auto; padding: 32px 32px 8px; }
.guide [hidden] { display: none; }

/* 위치: 게임 / 스플체스 */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }

/* 머리: (게임 그림) 제목, 한 줄 소개, 버튼. 글자 크기와 버튼은 로비의 첫 화면(.hero)과 같습니다 */
.guide-head { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-bottom: 24px; }
.guide-intro { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.guide h1 { margin: 0; color: var(--strong); font-size: clamp(28px, 4vw, 40px); line-height: 1.2; letter-spacing: -0.02em; word-break: keep-all; }
.guide .lead { margin: 0; font-size: 17px; line-height: 1.7; word-break: keep-all; }
.guide-head svg, .steps svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* 게임 그림: 로비 카드의 그림 칸과 같은 바닥. guide.js가 칸에 꼭 맞게 그립니다 */
.gp-thumb {
  flex: 0 0 260px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--thumb);
}
.gp-thumb canvas { height: auto !important; max-width: 100%; border-radius: 6px; }

/* 칸: 약관 페이지와 같은 상자 */
.guide section {
  margin-top: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  scroll-margin-top: 16px;
}
.guide h2 { margin: 0 0 10px; color: var(--strong); font-size: 19px; }
.guide h3 { margin: 0 0 4px; color: var(--strong); font-size: 15px; }
.guide p { margin: 0; line-height: 1.7; }
.guide p + p, .guide p + .code-card, .guide .code-card + p { margin-top: 12px; }
.guide a:not(.btn) { color: var(--accent); }
.guide code { font: 0.92em var(--mono); }
.guide .muted { color: var(--muted); font-size: 14px; }

/* 판 정보 타일: 게임 창의 타일을 페이지 바닥 위에 */
.guide .gd-tile { border-color: var(--border); background: var(--surface); }
/* 룰북: 게임 창과 같은 문단. 첫 문단은 제목 바로 아래 */
.guide .rulebook-text p:first-child { margin-top: 0; }

/* 승률 막대의 색은 판의 플레이어 색 (sdk/playground/board.js의 PLAYER_COLORS. 로비는 lobby.js가 같은 색을 넣습니다) */
.balance-bar .first, .balance-legend .first { background: #e0524f; }
.balance-bar .second, .balance-legend .second { background: #4a7fdc; }

/* 제작자처럼 이름과 값 한 줄 */
.guide-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.guide .guide-row h2 { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.guide-row span { font-weight: 600; overflow-wrap: anywhere; }

/* 단계: 번호는 제목에 적어서 목록 기호를 뺍니다 */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.steps li { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }

/* 점 목록 */
.points { margin: 0; padding-left: 1.3em; }
.points li { line-height: 1.7; }
.points li + li { margin-top: 6px; }
.points b { color: var(--strong); }

/* 코드 그림: 로비 첫 화면의 그림과 같고, 좁은 화면에서는 옆으로 밀어 봅니다. .c는 주석 */
.guide .code-card { margin-top: 12px; }
.guide .code-card .code { overflow-x: auto; }
.code-card .code .c { color: var(--code-line); }

/* 게임 목록 */
.game-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.game-links li { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.guide .game-links a { font-size: 16px; font-weight: 600; text-decoration: none; }
.guide .game-links a:hover, .guide .game-links a:focus-visible { text-decoration: underline; }
.game-links span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.game-links .balance-bar { height: 10px; margin: 2px 0 0; }

/* 자주 묻는 질문 */
.faq { margin: 0; }
.faq dt { color: var(--strong); font-weight: 600; }
.faq dd { margin: 4px 0 0; line-height: 1.7; }
.faq dd + dt { margin-top: 14px; }

@media (max-width: 760px) {
  .guide { padding: 20px 16px 8px; }
  .guide section { padding: 16px; }
  .guide-head { gap: 20px; }
  .gp-thumb { flex: 1 1 100%; max-width: 320px; margin: 0 auto; }
  .guide h1 { font-size: 28px; }
  .guide .lead { font-size: 16px; }
}