/* C7 · AI 는 엄청 많이 봤어요 */

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

.c7-pilebox {
  max-width: 460px; margin: 0 auto;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--cream);
  box-shadow: var(--drop-2);
}
.c7-pile { display: block; width: 100%; }
.c7-cap {
  max-width: 460px; margin: 6px auto 0;
  font-size: .82rem; color: var(--ink-2); text-align: right;
}

.c7-levels {
  display: flex; gap: var(--s2); justify-content: center;
  max-width: 460px; margin: var(--s4) auto 0; flex-wrap: wrap;
}
.c7-level.is-on { background: var(--yellow); }

.c7-outbox {
  width: 100%; max-width: 300px; 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);
}
.c7-out { display: block; width: 100%; height: 100%; object-fit: cover; }
.c7-out.is-pop { animation: c7-pop .4s ease; }
@keyframes c7-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } }

/* 주문 — 위 더미에는 여섯 친구가 다 있는데 아래는 늘 포코입니다.
   **일부러 고정한 것**이라고 적어 두지 않으면 "포코만 배웠나" 로 읽힙니다 */
.c7-order {
  margin: 0 0 var(--s3); text-align: center;
  font-size: .88rem; font-weight: 700; color: var(--ink-2);
}