/* C1 · AI 가 그림을 그려 줘요 */

.c1-stage {
  position: relative;
  width: 100%; max-width: 380px; aspect-ratio: 1;
  margin: 0 auto;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sky);
  box-shadow: var(--drop-2);
}
/* 128칸 그림을 크게 봅니다. `pixelated` 로 두면 네모가 도드라져 6번 챕터의
   `얼룩` 과 헷갈립니다 — 그림처럼 보이는 쪽이 맞습니다 */
.c1-pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.c1-stage.is-pop { animation: c1-pop .45s ease; }
@keyframes c1-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } }

.c1-veil {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--cream);
  opacity: 0; pointer-events: none; transition: opacity .18s;
  font-weight: 800;
}
.c1-veil.is-on { opacity: 1; }