/* ★10/30 2차 파도 — 만2 · 초1 · 초2 */
/* 띠 얼굴 : 만2 = 크게·단순 / 초1 = 보라 공책 / 초2 = 청록 공책 (초등은 글자 + 소리) */
body[data-band="s2"] { --강조: #FF8FB1; --강조진: #E0628A; --버터: #FFE6EF; }
body[data-band="e1"] { --강조: #8A6CF0; --강조진: #6A4BD6; --버터: #EEE8FF; }
body[data-band="e2"] { --강조: #1FA7A0; --강조진: #15807A; --버터: #DDF5F3; }
body[data-band^="e"] .scene-img { filter: saturate(.8) brightness(1.06); }
body[data-band^="e"] .prompt-card { background: rgba(255,255,255,.95); }
body[data-band^="e"] .title-small { border-color: var(--강조); }
body[data-band^="e"] .play-big, body[data-band="s2"] .play-big { background: linear-gradient(180deg, var(--버터), var(--강조)) !important; box-shadow: 0 8px 0 var(--강조진), var(--그림자) !important; }
body[data-band^="e"] .choice .lbl, body[data-band^="e"] .txt-choice { font-size: 30px; }
.txt-choice { font-size: 32px; line-height: 1.2; padding: 6px 10px; color: var(--글); text-align: center; word-break: keep-all; }
.choices .choice:has(.txt-choice) { width: auto !important; min-width: 220px; max-width: 360px; height: 140px !important; }
/* 지문 */
.passage-card { max-width: 920px; padding: 14px 22px !important; align-items: stretch !important; }
.passage { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.ps-line { margin: 0; font-size: 30px; line-height: 1.45; color: var(--글); cursor: pointer; border-radius: 10px; padding: 2px 8px; }
.ps-line:active { background: var(--버터); }
.ps-q { margin-top: 10px; font-size: 32px; color: var(--강조진); text-align: center; }
/* 선잇기 */
.match { position: relative; display: flex; justify-content: space-between; gap: 220px; padding: 10px 30px; }
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.match-lines line { stroke: var(--강조); stroke-width: 8; stroke-linecap: round; }
.match-col { display: flex; flex-direction: column; gap: 14px; z-index: 1; }
.match-it { min-width: 230px !important; height: 100px !important; min-height: 0 !important; }
.match-it.picked { box-shadow: 0 0 0 6px #fff, 0 0 0 11px var(--강조) !important; }
.match-it.done { background: #EAFBF0 !important; }
/* 터치반응 */
.tapfx { display: grid; grid-template-columns: repeat(3, 230px); gap: 22px; }
.tapfx-it { height: 200px !important; flex-direction: column; position: relative; }
.tapfx-it.pop { animation: tappop .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes tappop { 40% { transform: scale(1.18) rotate(-6deg); } }
.tapfx-say { font-size: 28px; color: var(--강조진); opacity: 0; transition: opacity .2s; }
.tapfx-it.seen .tapfx-say { opacity: 1; }
/* 수직선 · 자릿값 */
.numline { position: relative; width: 760px; height: 110px; margin: 10px 20px; }
.nl-line { position: absolute; left: 0; right: 0; top: 40px; height: 6px; background: #4A3B2C; border-radius: 3px; }
.nl-tick { position: absolute; top: 26px; width: 4px; height: 34px; margin-left: -2px; background: #4A3B2C; }
.nl-tick b { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 28px; white-space: nowrap; color: var(--글); }
.nl-tick.q { background: var(--강조); height: 44px; top: 21px; }
.nl-tick.q b { color: var(--강조진); font-size: 36px; }
.place { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 760px; }
.place .ten-bar { flex-direction: column; }
.ones { display: flex; flex-wrap: wrap; width: 70px; gap: 3px; }
.ones i { width: 18px; height: 18px; border-radius: 4px; background: #4FC3F7; }
/* 세로셈 */
.vcalc { display: grid; grid-template-columns: 50px 140px; gap: 4px 6px; font-size: 64px; text-align: right; align-items: center; }
.vcalc b { font-weight: normal; letter-spacing: 8px; }
.vcalc i { grid-column: 1 / 3; height: 6px; background: #4A3B2C; border-radius: 3px; }
.vcalc .calc-slot { grid-column: 2; }
/* 곱셈 */
.groups { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 760px; }
.grp { display: flex; flex-wrap: wrap; width: 110px; gap: 2px; justify-content: center; background: #FFF4E8; border-radius: 18px; padding: 6px; border: 3px dashed #FFCC80; }
.dot-array { display: grid; gap: 8px; }
.dot-array i { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #FF8A65); }
/* 그래프·표 */
.gbar { display: flex; gap: 26px; align-items: flex-end; height: 300px; padding: 0 20px; border-bottom: 5px solid #4A3B2C; }
.gcol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gstack { display: flex; flex-direction: column-reverse; gap: 2px; }
.gstack i { font-style: normal; font-size: 26px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--강조진); }
.gtab { border-collapse: collapse; font-size: 32px; }
.gtab th, .gtab td { border: 3px solid #E2CFB4; padding: 8px 20px; text-align: center; background: #fff; }
/* 시계 · 자 · 마을 */
.clock { display: block; }
.ruler-wrap { position: relative; width: 720px; height: 140px; }
.ruler-obj { position: absolute; left: 0; top: 0; height: 46px; background: linear-gradient(90deg, #FFE0B2, #FFB74D); border-radius: 12px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; }
.ruler { position: absolute; left: 0; top: 60px; width: 680px; height: 54px; background: #FFF6D6; border: 3px solid #D7B98A; border-radius: 6px; }
.ruler span { position: absolute; top: 0; width: 2px; height: 22px; background: #8D6E63; }
.ruler span b { position: absolute; top: 22px; left: -8px; font-size: 24px; color: var(--글); font-weight: normal; }
.town { position: relative; width: 420px; height: 240px; background: #E8F5E9; border-radius: 20px; }
.town span { position: absolute; transform: translate(-50%, -50%); font-size: 60px; }
.cubes { display: flex; gap: 6px; align-items: flex-end; }
.cube-col { display: flex; flex-direction: column; gap: 3px; }
.cube-col i { width: 56px; height: 56px; background: linear-gradient(135deg, #FFE0B2, #FFB74D); border: 3px solid #E0A458; border-radius: 6px; }
/* 만2 : 단추 더 크게 */
body[data-band="s2"] .choices .choice { min-width: 260px; min-height: 260px; }
.kin-key[data-k="␣"] { width: 360px !important; }
.kin-slots.long .kin-slot { width: 66px; height: 80px; font-size: 44px; }
/* 수입력 : 그림이 많아도 숫자판이 화면 안에 (10/30) */
.numin .ap-grp { max-width: 640px; }
.numin .ap-grp .emo { font-size: 44px; }
.numin .prompt-card { padding: 8px 18px !important; }
.numin { gap: 6px; }
