/* 두레박 — 공용 컴포넌트: 게임 카드 · 고지 · 준비중 · 정책 문서
   docs/디자인_가이드.md §6.13·6.3 (시안 G · g1 블루) */

/* ── 게임 선택 카드 (M1) — .group + .card 어휘 ────────────────────
   전 뷰포트 1단(§4.2) — 구 640px 2열 변형은 --wrap 600px에서 의미가 없어 폐기. */
.game-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }

.game-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border: none;
  border-radius: var(--r-md); padding: var(--sp-4) var(--inset);
}
.game-card:hover { text-decoration: none; }
.game-card:active { background: var(--track); }
.game-card h3 { font-size: var(--fs-body); margin: 0; color: var(--label); }
.game-card .rule { color: var(--label-2); font-size: var(--fs-aux); margin: 0; }
.game-card .draw { color: var(--label-2); font-size: var(--fs-cap); margin: 0; }
.game-card .cta { margin-top: var(--sp-1); align-self: flex-start; color: var(--tint); font-size: var(--fs-aux); font-weight: 600; }
.game-card--soon { opacity: 0.85; }

/* 미니 볼(카드 미리보기) — 볼 잉크 규칙은 결과 볼과 동일(§5.2) */
.mini-balls { display: flex; gap: 4px; margin: var(--sp-1) 0; }
.mini-ball {
  width: 22px; height: 22px; border-radius: 50%; font-size: 0.65rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ball-ink); font-weight: 700;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.12);
}

/* ── 정직 고지 (통계·시뮬레이터 — §6.13) ─────────────────────────
   "무작위와 다르지 않다"는 고지는 유지된다(§8-35에서도 불변).
   붉은 패널은 결과·CTA와 주목을 다투고 오류 상태로 오독된다 — 톤을 낮추되 노출은 유지. */
.disclaimer-foot {
  display: flex; gap: 6px; align-items: flex-start;
  margin-top: var(--sp-5);
  padding: 10px var(--inset) 0;   /* 축 B */
  font-size: var(--fs-cap); color: var(--label-2); line-height: 1.45;
}
.disclaimer-foot .icon { flex: none; color: var(--danger); }

/* ── 하단 안내 (생성기 — §6.13 개정 · §8-35) ──────────────────────
   고정 고지 문구를 대체하는 기록 활용 안내. 경보가 아니라 안내다 →
   ⚠ 아이콘도 --danger 색도 쓰지 않는다. 그룹 푸터 위치·축 B. */
.hint-foot {
  margin-top: var(--sp-5);
  padding: 10px var(--inset) 0;   /* 축 B */
  font-size: var(--fs-cap); color: var(--label-2); line-height: 1.45;
}

/* ── 공식 구매처 링크 (§8-37) ─────────────────────────────────────
   틴트 텍스트 링크 — 채움 버튼 금지(화면당 채움 CTA는 "다시 뽑기" 하나 · §6.10). */
.buy-foot {
  margin-top: var(--sp-5);
  padding: 0 var(--inset);        /* 축 B */
  display: flex; flex-direction: column; gap: 2px;
}
.buy-link {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  min-height: 44px;
  color: var(--tint); font-size: var(--fs-aux); font-weight: 600;
}
.buy-link:hover { text-decoration: none; }
.buy-link .ext { font-size: var(--fs-cap); }
.buy-note { font-size: var(--fs-cap); color: var(--label-2); }

/* ── 준비 중 (골격 페이지) ─────────────────────────────────────── */
.coming-soon {
  text-align: center; padding: var(--sp-6) var(--inset);
  background: var(--card); border: none; border-radius: var(--r-md);
}
.coming-soon .big { font-size: 2.4rem; margin-bottom: var(--sp-3); }
.coming-soon h2 { margin-bottom: var(--sp-2); }
.coming-soon p { color: var(--label-2); max-width: 46ch; margin: 0 auto var(--sp-4); }
.coming-soon .preview-list {
  display: inline-flex; flex-direction: column; gap: var(--sp-2);
  text-align: left; color: var(--label-2); padding: 0; margin: 0;
}
.coming-soon .preview-list li { list-style: none; }
.coming-soon .preview-list li::before { content: "→ "; color: var(--tint); }

/* ── 정책·콘텐츠 문서 (M5) ─────────────────────────────────────── */
.doc {
  background: var(--card); border: none; border-radius: var(--r-md);
  padding: var(--sp-5) var(--inset) var(--sp-6);
}
.doc h1 { margin-bottom: var(--sp-1); }
.doc .revised { color: var(--label-2); font-size: var(--fs-aux); margin-bottom: var(--sp-5); }
.doc h2 { margin-top: var(--sp-5); font-size: var(--fs-body); padding-bottom: var(--sp-2); border-bottom: 0.5px solid var(--sep); }
.doc p, .doc li { color: var(--label); font-size: var(--fs-aux); }
.doc ul { padding-left: 1.2em; }
.doc a { text-decoration: underline; }
.doc .contact-box {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--inset);
  background: var(--bg); border-radius: var(--r-md); font-size: var(--fs-aux);
}
/* 참여·후원 도선 — 소개 contact-box 확장 (참여_후원_도선_설계 §1.2): 아이디어→문의→후원 문단 */
.doc .contact-box .engage-item + .engage-item { margin-top: var(--sp-4); }
.doc .contact-box .engage-item strong { display: block; margin-bottom: var(--sp-1); }
.doc .contact-box .engage-item p { margin: 0; }

/* .page-title 은 폐기했다(§6.2 검수 P2) — 뒤로 가기는 .large-title 안의 .back-link 별행으로.
   제목과 같은 줄에 두면 h1 이 72px로 밀려 제3의 축이 된다. */