/* ★10/31 4차 — 나이별 화면 결 맞추기 + 고르기 카드 다듬기
   만2~5 = 그림 크게 / 초1~2 = 그림 + 글 / 초3~6 = 글 중심(공책 느낌 · 그림은 작게 곁들임) */
body[data-band="e3"] { --강조: #F08C3A; --강조진: #C96A1E; --버터: #FFF0E0; }
body[data-band="e4"] { --강조: #3D8BEA; --강조진: #2A6BC0; --버터: #E3EFFF; }
body[data-band="e5"] { --강조: #3FA34D; --강조진: #2E7D32; --버터: #E6F5E7; }
body[data-band="e6"] { --강조: #D6457A; --강조진: #A82F5C; --버터: #FDE7EF; }

/* 초3~6 : 물음 카드는 공책처럼 — 그림은 작게 왼쪽, 글은 크게 */
body[data-band="e3"] .prompt-card.wide, body[data-band="e4"] .prompt-card.wide, body[data-band="e5"] .prompt-card.wide, body[data-band="e6"] .prompt-card.wide {
  flex-direction: row; gap: 18px; max-width: 980px; padding: 16px 28px !important; border-left: 10px solid var(--강조);
  background: repeating-linear-gradient(180deg, #fff 0 46px, #EEF3F8 46px 48px) !important;
}
body[data-band="e3"] .prompt-card.wide > .emo, body[data-band="e4"] .prompt-card.wide > .emo, body[data-band="e5"] .prompt-card.wide > .emo, body[data-band="e6"] .prompt-card.wide > .emo { font-size: 70px !important; flex: 0 0 auto; }
body[data-band="e3"] .prompt-card.wide > .lbl, body[data-band="e4"] .prompt-card.wide > .lbl, body[data-band="e5"] .prompt-card.wide > .lbl, body[data-band="e6"] .prompt-card.wide > .lbl { font-size: 36px; line-height: 1.35; text-align: left; color: var(--글); }
/* 지도·그래프처럼 그림이 주인공인 카드는 세로 그대로 */
body[data-band^="e"] .prompt-card.wide.mapq, body[data-band^="e"] .prompt-card.wide:has(svg) { flex-direction: column; background: rgba(255,255,255,.96) !important; border-left: 0; }
body[data-band^="e"] .prompt-card.wide:has(svg) > .lbl { text-align: center; }

/* 글 보기 카드 : 번호 배지 · 높이는 글에 맞게 */
.choices { counter-reset: 보기; }
.choices .choice:has(.txt-choice) { position: relative; height: auto !important; min-height: 128px; padding: 14px 18px; counter-increment: 보기; }
.choices .choice:has(.txt-choice)::before { content: counter(보기); position: absolute; left: -10px; top: -12px; width: 40px; height: 40px; border-radius: 50%; background: var(--강조, #FFA94D); color: #fff; font: 400 24px/40px Jua, sans-serif; text-align: center; box-shadow: 0 3px 0 var(--강조진, #E8590C); }
.choices .choice:has(.txt-choice):active { transform: translateY(3px) scale(.98); }

/* 맞으면 ✔ 도장 · 틀리면 살짝 흔들림 */
.choice { position: relative; }
.choice.right::after { content: '✔'; position: absolute; right: -14px; top: -16px; width: 52px; height: 52px; border-radius: 50%; background: #2FB344; color: #fff; font: 700 30px/52px sans-serif; text-align: center; box-shadow: 0 4px 0 #1E8A30; animation: 도장 .45s cubic-bezier(.2, 1.8, .4, 1) both; z-index: 3; }
@keyframes 도장 { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }
.choice.dim { animation: 살짝흔들 .35s; }
@keyframes 살짝흔들 { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }

/* 문제 넘어갈 때 : 물음 카드가 부드럽게 올라온다 */
.stage > .prompt { animation: 물음올라옴 .38s ease-out both; }
@keyframes 물음올라옴 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage > .prompt, .choice.right::after, .choice.dim { animation: none !important; } }

/* ★10/31 부모 화면 작은 단추 : 어른문 「돌아가기」 59px → 80px · 부모 화면 단추는 64px 이상
   부모 화면 목록은 아래 56px 를 비워 둔다 (화면 맨 아래 가장자리 = 태블릿 시스템 몸짓 자리) */
#gate-back.gate-back { min-height: 80px !important; min-width: 200px; padding: 14px 34px; font-size: 26px; }
.parent .btn { min-height: 64px; min-width: 64px; }
.parent .btn.chip { padding: 10px 22px; }
.parent-body { margin-bottom: 56px; }
.parent-head { padding-right: 120px; }   /* 오른쪽 위 소리 단추(🔔)에 「아이 화면으로」가 가리지 않게 */