/* C8 · 보여 준 것만 배워요 */

.c8-head {
  max-width: 460px; margin: var(--s4) auto var(--s2);
  font-size: .85rem; font-weight: 800; color: var(--ink-3); letter-spacing: .03em;
}
.c8-head:first-child { margin-top: 0; }

.c8-card {
  display: block; width: 100%; height: auto;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-sm);
  background: var(--cream);
}
.c8-card.is-small { width: 46px; border-width: 2px; border-radius: 9px; }

/* ── 손에 든 카드 — 크게 하나 ─────────────────────── */
.c8-hand { max-width: 460px; margin: 0 auto; text-align: center; }
.c8-hand-card { width: 120px; margin: 0 auto var(--s3); }
.c8-hand-card b { display: block; margin-top: 4px; font-size: .95rem; }
.c8-hand-btns { display: flex; gap: var(--s3); justify-content: center; }
.c8-send { font-size: 1rem; padding: var(--s3) var(--s5); }
.c8-left { margin-top: var(--s2); font-size: .82rem; color: var(--ink-3); }
.c8-done { font-weight: 800; }

/* ── 상자 둘 ──────────────────────────────────────── */
.c8-boxes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  max-width: 460px; margin: var(--s4) auto 0;
}
.c8-box {
  padding: var(--s3);
  background: var(--paper);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-sm);
  box-shadow: var(--drop-2);
  min-height: 96px;
}
.c8-box h4 { margin: 0 0 var(--s2); font-size: .9rem; font-weight: 800; }
.c8-box-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.c8-box-count { display: block; margin-top: var(--s2); font-size: .8rem; color: var(--ink-3); }

/* ── 물어보기 ─────────────────────────────────────── */
.c8-picks {
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center;
  max-width: 460px; margin: 0 auto;
}
.c8-pick { font-size: .9rem; }
/* 안 가르친 친구 — 눈에 띄게 두되 막지 않습니다. 누르는 것이 핵심 순간입니다 */
.c8-pick.is-held { border-style: dashed; background: var(--cream-2); }

.c8-result { max-width: 460px; margin: var(--s4) auto 0; }
.c8-asked { width: 96px; margin: 0 auto var(--s3); text-align: center; }
.c8-asked b { display: block; margin-top: 4px; font-size: .9rem; }
.c8-why { margin: 0 0 var(--s2); font-size: .85rem; color: var(--ink-2); text-align: center; }
.c8-neighbors { display: flex; gap: var(--s3); justify-content: center; }
.c8-nb { text-align: center; font-size: .74rem; font-weight: 800; }
.c8-nb span { display: block; margin-top: 3px; }
.c8-nb--0 span { color: var(--leaf-2); }
.c8-nb--1 span { color: var(--ink-2); }

.c8-answer {
  margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
  background: var(--yellow);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--drop-2); font-weight: 800; text-align: center;
}
.c8-note {
  margin: var(--s3) 0 0; padding: var(--s3) var(--s4);
  background: var(--paper);
  border: var(--stroke) dashed var(--ink); border-radius: var(--radius);
  font-weight: 700; text-align: center;
}