/* C14 · 배운 걸까 시킨 걸까 */

.c14-h {
  margin: 0 0 var(--s3); font-size: .95rem; font-weight: 800; color: var(--ink-3);
  text-align: center;
}

.c14-rules {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
  max-width: 520px; margin: 0 auto var(--s4);
}
.c14-rule { min-width: 0; font-size: .85rem; padding: var(--s2) var(--s3); }
.c14-rule.is-on { background: var(--leaf); }

.c14-score {
  margin: 0 0 var(--s4); text-align: center;
  display: flex; gap: var(--s3); align-items: baseline; justify-content: center;
  flex-wrap: wrap;
}
.c14-score b { font-size: 1.15rem; font-weight: 800; }
.c14-score span { font-size: .85rem; font-weight: 700; color: var(--ink-3); }

/* 열두 장을 **한 화면에.** 점수 숫자보다 ✗ 가 어디 붙는지가 알맹이라
   스크롤 없이 다 보여야 합니다.
   여섯 줄로 놓아 봤더니 한 칸이 75px 이었습니다 — 여우와 강아지를 견주려면
   털과 귀가 보여야 하는데 그 크기로는 안 보입니다. **넷씩 세 줄**로 갑니다 */
.c14-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2);
}
.c14-cell {
  margin: 0; min-width: 0;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  overflow: hidden; background: var(--paper);
}
.c14-cell img { display: block; width: 100%; height: auto; }
.c14-cell figcaption {
  padding: 2px; text-align: center; font-size: .72rem; font-weight: 800;
  border-top: 2px solid var(--ink);
}
/* 맞았나 틀렸나를 **테두리가 아니라 띠 색**으로 말합니다 — 사진이 작아
   테두리는 눈에 안 들어옵니다 */
.c14-cell.is-ok figcaption { background: var(--leaf); }
.c14-cell.is-no figcaption { background: var(--red); color: #fff; }

@media (max-width: 480px) { .c14-grid { grid-template-columns: repeat(3, 1fr); } }

/* 기계가 지금 무엇이라고 말하는지 — 채점보다 **먼저** 옵니다.
   이 줄이 없으면 "전부 강아지래요" 와 "여섯 장 맞았어요" 가 따로 놉니다 */
.c14-score { flex-direction: column; gap: var(--s1); }
.c14-says { font-size: .95rem; font-weight: 700; color: var(--ink-2); }