/* C10 · 진짜일까 가짜일까 */

/* 판 이름 — 어느 판인지, 그 기계가 **몇 장을 봤는지**가 늘 보입니다.
   이 한 줄이 두 판의 난이도 차이를 설명해 줍니다 */
.c10-round {
  margin: 0 0 var(--s2); text-align: center;
  display: flex; gap: var(--s3); align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.c10-round b {
  padding: 2px var(--s3); border-radius: var(--radius-pill);
  background: var(--sky); border: 2px solid var(--ink);
  font-size: .85rem; font-weight: 800;
}
.c10-round span { font-size: .85rem; color: var(--ink-3); font-weight: 700; }

.c10-q {
  margin: 0 0 var(--s4); text-align: center;
  font-size: 1.1rem; font-weight: 800;
}

/* **두 장을 똑같이 둡니다.** 한쪽이 크거나 선명하면 아이는 그림이 아니라
   크기를 보고 답합니다. 폭·테두리·그림자 전부 같습니다 */
.c10-board {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  max-width: 420px; margin: 0 auto;
}
.c10-pick {
  padding: var(--s2); min-width: 0;
  display: grid; place-items: center;
}
.c10-pick img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--radius) - 4px);
  /* 128칸 그림을 크게 늘여 보여 줍니다. 매끄럽게 뭉개면 단서가 지워지므로
     **칸을 살려** 둡니다 — 진짜·가짜 둘 다 똑같이 */
  image-rendering: auto;
}
.c10-pick:disabled { opacity: 1; }

.c10-nav {
  display: flex; gap: var(--s3); align-items: center; justify-content: center;
  margin: var(--s5) 0 0; flex-wrap: wrap;
}
.c10-count { font-size: .85rem; font-weight: 800; color: var(--ink-3); }

.c10-result {
  max-width: 460px; margin: var(--s5) auto 0;
  padding: var(--s4) var(--s5);
  background: var(--cream);
  border: var(--stroke) dashed var(--ink); border-radius: var(--radius);
  text-align: center;
}
.c10-verdict {
  margin: 0 0 var(--s4); font-size: 1.05rem; font-weight: 800;
  padding: var(--s2) var(--s4); border-radius: var(--radius-pill);
  border: 2px solid var(--ink); display: inline-block;
}
.c10-verdict.is-ok { background: var(--leaf); }
.c10-verdict.is-no { background: var(--red); color: #fff; }

/* 답을 보인 뒤 **어느 쪽이 무엇이었는지** 이름을 붙여 나란히 둡니다 */
.c10-side {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  margin: 0 0 var(--s4);
}
.c10-side figure { margin: 0; }
.c10-side img {
  display: block; width: 100%; height: auto;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--drop-1);
}
.c10-side figcaption {
  margin: var(--s2) 0 0; font-size: .85rem; font-weight: 800;
}

.c10-label {
  margin: 0 0 var(--s1); font-size: .78rem; font-weight: 800;
  color: var(--ink-3); letter-spacing: .04em;
}
.c10-why { margin: 0; color: var(--ink-2); text-align: left; }

/* 두 판을 다 풀면 나오는 점수. **아이 자신의 숫자**가 3단계 답의 근거입니다 */
.c10-tally {
  max-width: 460px; margin: var(--s5) auto 0;
  padding: var(--s4) var(--s5);
  background: var(--paper);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--drop-2);
}
.c10-score {
  margin: 0; display: flex; gap: var(--s3);
  align-items: center; justify-content: space-between;
}
.c10-score + .c10-score { margin-top: var(--s3); }
.c10-score b { font-size: .9rem; font-weight: 800; }
.c10-score span { font-size: 1.05rem; font-weight: 800; }