/* ★10/31 5차 — 만 2~5세 시중앱급 다듬기 */

/* ═════ ① 콩이 친구 : 놀이판 구석에서 반응 (누름은 통과 · 판 아래 층) ═════ */
.board-kongi { position: absolute; top: auto; right: auto; bottom: 16px; z-index: 1; pointer-events: none; transform-origin: 50% 100%; transition: opacity .25s; }
.board-kongi.왼 { left: 14px; }
.board-kongi.오른 { left: auto; right: 14px; }
.board-kongi.오른 img { transform: scaleX(-1); }   /* 오른쪽에선 판 쪽(왼쪽)을 본다 */
.board-kongi.숨음 { opacity: 0; visibility: hidden; }
.board-kongi img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(0,0,0,.16)); animation: bk숨 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.board-kongi.오른 img { animation-name: bk숨오; }
.bk-그림자 { position: absolute; left: 18%; right: 18%; bottom: -2px; height: 12%; border-radius: 50%; background: rgba(60,40,20,.18); filter: blur(2px); }
@keyframes bk숨 { 50% { transform: scaleY(.97) scaleX(1.02); } }
@keyframes bk숨오 { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1.02) scaleY(.97); } }
/* 문제가 나오면 판 쪽으로 몸을 기울여 빼꼼 */
.board-kongi.왼.빼꼼 { animation: bk빼꼼왼 1.1s cubic-bezier(.3,1.5,.5,1) both; }
.board-kongi.오른.빼꼼 { animation: bk빼꼼오 1.1s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes bk빼꼼왼 { 0% { transform: translateY(8%) scale(.8); } 45% { transform: translate(10%, -4%) rotate(12deg); } 75% { transform: translate(6%, 0) rotate(8deg); } 100% { transform: rotate(6deg); } }
@keyframes bk빼꼼오 { 0% { transform: translateY(8%) scale(.8); } 45% { transform: translate(-10%, -4%) rotate(-12deg); } 75% { transform: translate(-6%, 0) rotate(-8deg); } 100% { transform: rotate(-6deg); } }
/* 맞으면 폴짝 */
.board-kongi.폴짝 { animation: bk폴짝 .9s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes bk폴짝 { 0% { transform: scale(1, 1); } 15% { transform: scale(1.12, .85); } 40% { transform: translateY(-34%) scale(.94, 1.08); } 65% { transform: translateY(0) scale(1.1, .9); } 80% { transform: translateY(-8%); } 100% { transform: none; } }
/* 틀리면 갸웃 */
.board-kongi.갸웃 { animation: bk갸웃 1.2s ease-in-out both; }
@keyframes bk갸웃 { 20% { transform: rotate(-14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(9deg); } 100% { transform: none; } }
/* 3번 연속 맞으면 만세 (두 번 폴짝 + 빙글) */
.board-kongi.만세 { animation: bk만세 1.6s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes bk만세 { 0% { transform: none; } 12% { transform: scale(1.15, .82); } 30% { transform: translateY(-40%) rotate(-10deg) scale(1.1); } 48% { transform: translateY(0) scale(1.12, .88); } 66% { transform: translateY(-46%) rotate(12deg) scale(1.14); } 84% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }
.board-kongi.가리킴 { animation: bk가리킴 .8s ease-in-out 3 both; }
@keyframes bk가리킴 { 50% { transform: translateY(-8%) rotate(4deg); } }
.bk-spark { position: fixed; z-index: 60; pointer-events: none; font-style: normal; font-size: 30px; margin: -15px 0 0 -15px; animation: bk반짝 1.1s ease-out both; }
@keyframes bk반짝 { 0% { transform: scale(.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(25deg); opacity: 0; } }
/* 콩이 친구가 나와 있으면 위쪽 작은 콩이는 쉰다 (콩이는 한 명) */
.game-top.bk-on .mini-kongi { display: none; }
.game-top.bk-on .guide .bubble::before { display: none; }

/* ═════ ② 보상 연출 4가지 ═════ */
.rw-show { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
/* 풍선 */
.rw-balloon { position: absolute; bottom: -260px; width: 120px; animation: rw풍선 4s ease-in both; }
.rw-balloon img { width: 100%; filter: hue-rotate(var(--hue, 0deg)) saturate(1.5) drop-shadow(0 8px 6px rgba(0,0,0,.12)); }
@keyframes rw풍선 { 0% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(24px, -60vh) rotate(5deg); } 100% { transform: translate(-10px, -130vh) rotate(-3deg); } }
/* 친구 행진 */
.rw-parade { position: absolute; left: 0; bottom: 18px; display: flex; gap: 22px; animation: rw행진 5.6s linear both; }
.rw-parade .emo { font-size: 84px; display: inline-block; animation: rw통통 .45s ease-in-out infinite alternate; }
.rw-parade .rw-flag { font-size: 70px; }
@keyframes rw행진 { from { transform: translateX(-110%); } to { transform: translateX(110vw); } }
@keyframes rw통통 { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-22px) rotate(6deg); } }
/* 불꽃 */
.rw-firework { position: absolute; width: 0; height: 0; }
.rw-ray { position: absolute; width: 20px; height: 20px; margin: -10px; border-radius: 50%; opacity: 0; animation: rw불꽃 1.3s ease-out both; box-shadow: 0 0 10px rgba(255,255,255,.9); }
/* 불꽃 가운데 번쩍 */
.rw-flash { position: absolute; width: 120px; height: 120px; margin: -60px; border-radius: 50%; opacity: 0; animation: rw번쩍 .9s ease-out both; }
@keyframes rw번쩍 { 0% { transform: scale(.2); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes rw불꽃 { 0% { transform: translate(0, 60px) scale(.3); opacity: 0; } 15% { transform: translate(0, 0) scale(.6); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(.5); opacity: 0; } }
/* 스티커 비 */
.rw-sticker { position: absolute; top: -120px; width: 96px; height: 96px; border-radius: 26px; background: #fff; border: 5px dashed #FFC9DE; box-shadow: 0 6px 0 rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; animation: rw스티커 3.2s cubic-bezier(.4,0,.6,1) both; }
.rw-sticker .emo { font-size: 58px; }
@keyframes rw스티커 { 0% { transform: translateY(0) rotate(0); } 80% { opacity: 1; } 100% { transform: translateY(calc(100vh + 160px)) rotate(var(--r)); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .board-kongi, .board-kongi img, .rw-show * { animation: none !important; } }

/* ═════ ③ 고르기 카드 (만 2~5) : 흰 반투명 → 파스텔 사탕 카드 + 받침 그림자 + 윤기 ═════ */
body[data-band^="s"] .choices .choice { --카드색: #FFE6EE; --카드바닥: #F3AFC4;
  background: radial-gradient(140px 60px at 32% 12%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%), linear-gradient(180deg, #fff 0%, var(--카드색) 100%);
  border: 5px solid #fff; border-radius: 38px; box-shadow: 0 10px 0 var(--카드바닥), 0 18px 26px rgba(90,60,25,.16); }
body[data-band^="s"] .choices .choice:nth-child(3n+2) { --카드색: #DDF6EA; --카드바닥: #93D8B5; }
body[data-band^="s"] .choices .choice:nth-child(3n) { --카드색: #E0EEFF; --카드바닥: #9CC3EE; }
body[data-band^="s"] .choices .choice:nth-child(4) { --카드색: #FFF1C9; --카드바닥: #F2CF6B; }
body[data-band^="s"] .choices .choice:active:not(:disabled) { transform: translateY(7px) scale(.97); box-shadow: 0 3px 0 var(--카드바닥), 0 8px 14px rgba(90,60,25,.14); }
body[data-band^="s"] .choices .choice.right { --카드색: #D7F7DF; --카드바닥: #6CCB86; border-color: #fff; }
body[data-band^="s"] .choices .choice .lbl { color: #5B4636; background: rgba(255,255,255,.75); border-radius: 14px; padding: 0 10px; }
body[data-band^="s"] .choices .choice.dim { filter: grayscale(.5); }
/* 물음 카드 : 위에 리본 띠 */
body[data-band^="s"] .stage > .prompt > .prompt-card { position: relative; border: 5px solid #fff; background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,247,236,.95)); }
body[data-band^="s"] .stage > .prompt > .prompt-card::before { content: ""; position: absolute; left: 50%; top: -15px; width: 90px; height: 24px; margin-left: -45px; border-radius: 12px; background: repeating-linear-gradient(-45deg, #FFB3C7 0 10px, #FFD1DC 10px 20px); box-shadow: 0 3px 0 rgba(200,90,120,.25); }
/* 맞힌 카드에서 빛 고리가 퍼진다 */
.bk-ring { position: fixed; z-index: 55; pointer-events: none; border-radius: 50%; border: 8px solid rgba(255,214,90,.95); box-shadow: 0 0 24px rgba(255,214,90,.8); animation: bk고리 .8s ease-out forwards; }
@keyframes bk고리 { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ═════ ④ 놀이별 다듬기 (만 2~5) ═════ */
/* 가나다 노래 : 실로폰 — 나무틀 위 무지개 건반 (작아졌던 104px → 크게) */
.song-blocks { position: relative; padding: 30px 34px 34px; border-radius: 40px; background: linear-gradient(180deg, #D7A574, #B67E4E); box-shadow: inset 0 6px 0 rgba(255,255,255,.25), 0 12px 0 #8A5A33, 0 22px 30px rgba(60,30,10,.25); align-items: center; flex-wrap: nowrap; gap: 14px; }
.song-blocks::before, .song-blocks::after { content: ""; position: absolute; left: 26px; right: 26px; height: 12px; border-radius: 6px; background: #7B4E2A; opacity: .55; }
.song-blocks::before { top: 38%; } .song-blocks::after { top: 62%; }
.song-blocks .song-blk { position: relative; z-index: 1; width: 128px !important; border-radius: 22px !important; font-size: 66px; box-shadow: inset 0 -12px 0 rgba(0,0,0,.14), inset 0 8px 0 rgba(255,255,255,.35), 0 6px 0 rgba(0,0,0,.18) !important;
  background: radial-gradient(circle at 50% 10%, #fff 0 7px, transparent 8px), radial-gradient(circle at 50% 90%, #fff 0 7px, transparent 8px), var(--c) !important; }
.song-blocks .song-blk:nth-child(1) { height: 230px !important; } .song-blocks .song-blk:nth-child(2) { height: 214px !important; } .song-blocks .song-blk:nth-child(3) { height: 198px !important; }
.song-blocks .song-blk:nth-child(4) { height: 184px !important; } .song-blocks .song-blk:nth-child(5) { height: 170px !important; } .song-blocks .song-blk:nth-child(n+6) { height: 158px !important; }
.song-blocks.nmany { flex-wrap: wrap; max-width: 1080px; }
.song-blocks.nmany .song-blk { width: 104px !important; height: 130px !important; font-size: 54px; }
.song-blocks .song-blk.next { box-shadow: 0 0 0 7px #fff, 0 0 0 13px var(--강조), inset 0 -12px 0 rgba(0,0,0,.14) !important; }
/* 동요 그림책 : 악보 종이 위 블록 */
.song { padding: 22px 28px 26px; border-radius: 36px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.96) 0 26px, #F3D9E4 26px 28px); border: 5px solid #fff; box-shadow: var(--바닥), var(--그림자); position: relative; }
.song::before { content: "🎵"; position: absolute; left: -26px; top: -30px; font-size: 54px; transform: rotate(-12deg); }
.song::after { content: "🎶"; position: absolute; right: -22px; top: -26px; font-size: 48px; transform: rotate(10deg); }
body[data-band^="s"] .song-row .song-blk { width: 118px !important; height: 118px !important; font-size: 58px; box-shadow: inset 0 -10px 0 rgba(0,0,0,.14), inset 0 7px 0 rgba(255,255,255,.35), 0 6px 0 rgba(0,0,0,.15); }
/* 재기 전 비교하기 : 크레파스 · 컵 · 땅 — 크고 또렷하게 */
.mc-bar { position: relative; height: 40px; border-radius: 8px 20px 20px 8px; margin-right: 22px; transform: scaleX(1.25); transform-origin: left center; background: linear-gradient(180deg, rgba(255,255,255,.45) 0 22%, rgba(255,255,255,0) 23% 100%), linear-gradient(90deg, #FF8A65, #FF7043); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.mc-bar::before { content: ""; position: absolute; left: 18%; top: 0; bottom: 0; width: 14px; background: rgba(255,255,255,.55); }
.mc-bar::after { content: ""; position: absolute; right: -22px; top: 6px; border-left: 24px solid #E64A19; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.choice:nth-child(3n+2) .mc-bar { background: linear-gradient(180deg, rgba(255,255,255,.45) 0 22%, rgba(255,255,255,0) 23%), linear-gradient(90deg, #66BB6A, #43A047); } .choice:nth-child(3n+2) .mc-bar::after { border-left-color: #2E7D32; }
.choice:nth-child(3n) .mc-bar { background: linear-gradient(180deg, rgba(255,255,255,.45) 0 22%, rgba(255,255,255,0) 23%), linear-gradient(90deg, #42A5F5, #1E88E5); } .choice:nth-child(3n) .mc-bar::after { border-left-color: #1565C0; }
.mc-cup { width: 92px; height: 128px; border-width: 6px; border-color: #90CAF9; border-radius: 0 0 26px 26px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 4px rgba(255,255,255,.8); }
.mc-cup i { background: linear-gradient(180deg, #81D4FA, #4FC3F7); border-top: 4px solid #B3E5FC; }
.mc-area { border-radius: 16px; border: 5px solid #66BB6A; background: repeating-linear-gradient(45deg, #A5D6A7 0 12px, #C8E6C9 12px 24px); transform: scale(1.2); }
/* 요일과 달력 : 달력 고리 + 토·일 색 */
.week-row { position: relative; padding: 26px 18px 14px; border-radius: 26px; background: #fff; box-shadow: 0 8px 0 #F1C6A0; gap: 10px; }
.week-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; border-radius: 22px 22px 0 0; background: #FF8A80; }
.week-row b { width: 78px; height: 78px; font-size: 40px; border-radius: 20px; box-shadow: 0 4px 0 #EAD8BD; }
.week-row b:nth-child(6) { color: #1E88E5; } .week-row b:nth-child(7) { color: #E53935; }
.week-row b.q { animation: breathe 1.3s ease-in-out infinite; }
.cal { border-radius: 22px; overflow: hidden; }
/* 누가 없어졌나 : 나무 선반 */
.miss-shelf { background: linear-gradient(180deg, rgba(255,250,240,.95) 0 78%, #C98B57 78% 86%, #A86C3D 86% 100%); border: 6px solid #E8C39A; box-shadow: 0 10px 0 #9B6338, 0 20px 30px rgba(60,30,10,.22); padding: 28px 40px 46px; }
.miss-row .emo, .miss-row img.pic { filter: drop-shadow(0 8px 4px rgba(80,40,10,.22)); }
/* 모으기 가르기 : 나뭇가지 선 */
.dc-tree { position: relative; }
.dc-top { position: relative; z-index: 1; box-shadow: 0 5px 0 #F2C14E; }
.dc-legs { position: relative; }
.dc-legs::before { content: ""; position: absolute; left: 50%; top: -40px; width: 120px; height: 40px; margin-left: -60px; border: 5px solid #E7C89B; border-bottom: 0; border-radius: 30px 30px 0 0; }
.dc-legs b { box-shadow: 0 5px 0 #E7D8BF; }
.dc-beads i { width: 30px; height: 30px; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
/* 개구리 노래 : 연잎 크게 · 개구리 크게 */
body[data-band^="s"] .pad { width: 140px; height: 82px; font-size: 38px; background: radial-gradient(ellipse at 40% 35%, #8CE99A, #51CF66 70%); box-shadow: inset 0 -10px 0 #37B24D, 0 6px 10px rgba(0,60,40,.2); }
body[data-band^="s"] .pad.on { background: radial-gradient(ellipse at 40% 35%, #FFEC99, #FCC419 70%); box-shadow: inset 0 -10px 0 #F59F00, 0 0 0 6px rgba(255,255,255,.7); }
body[data-band^="s"] .frog { width: 140px; height: 140px; font-size: 104px; background: radial-gradient(circle at 40% 30%, #fff, rgba(255,255,255,.75)); box-shadow: 0 8px 0 rgba(0,80,40,.18); }
body[data-band^="s"] .hint-text { font-size: 32px; border: 4px solid #fff; box-shadow: var(--바닥); }
/* 들어 보고 고르기 : 소리 단추를 분홍 동그라미로 · 숨쉬듯 */
.listen-big { background: radial-gradient(circle at 35% 30%, #fff, #FFE0EC 60%, #FFC2D6) !important; border: 6px solid #fff !important; box-shadow: 0 10px 0 #F3A2BE, 0 0 0 14px rgba(255,194,214,.35), var(--그림자) !important; animation: bk소리숨 2.4s ease-in-out infinite; }
@keyframes bk소리숨 { 50% { box-shadow: 0 10px 0 #F3A2BE, 0 0 0 26px rgba(255,194,214,.12), var(--그림자); } }
/* 따라 말하기 : 마이크 단추 = 무대 마이크 */
.mic-btn { background: radial-gradient(circle at 35% 25%, #fff 0 12%, #FFD8E4 40%, #FFB0C8) !important; border: 6px solid #fff !important; box-shadow: 0 10px 0 #E88FAE, var(--그림자) !important; }
.mic-btn small { color: #B23A64 !important; }
.mic-state { background: rgba(255,255,255,.88); border-radius: 18px; padding: 6px 14px; border: 3px solid #fff; }

/* ═════ ⑤ 누름 느낌 통일 : 움직이는(애니메이션) 단추도 꾹 눌리게 — transform 과 따로 노는 scale 속성 ═════ */
.kid-btn:active:not(:disabled):not(.draggable), .btn:active:not(:disabled) { scale: .95; }
.stage .spot-obj:active { scale: .9; background: rgba(255,255,255,.45); }
.stage .flash-card:active { scale: .97; }
.stage .miss-shelf:active { scale: .98; }
.stage .part:active { filter: brightness(1.08); }
.stage .pz2-piece:active { scale: 1.05; filter: drop-shadow(0 10px 8px rgba(0,0,0,.25)); }
/* 행진만은 단추 위로 (누름은 통과) — 맨 아래 가장자리를 짧게 지나간다 */
.rw-show.rw-1 { z-index: 30; }
.rw-parade { bottom: 0; animation-duration: 4.6s; }
.rw-parade .emo { font-size: 70px; }
.rw-ray { width: 24px; height: 24px; margin: -12px; }
/* 누가 없어졌나 : 덮개는 위에서 숨어 있다 내려오는 대신 커튼처럼 위에서 펼쳐진다 (선반 밖으로 안 나가게) */
.miss-cover { transform: scaleY(0); transform-origin: 50% 0; }
.miss-cover.down { transform: none; }

/* ═════ 6차 ① 화면 들어올 때 : 아래에서 올라오던 것(0.4초 동안 화면 밖으로 삐짐) → 제자리에서 살짝 커지며 나타남 ═════ */
@keyframes 제자리들어옴 { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.screen.enter > *:not(.scene) { animation-name: 제자리들어옴; }

/* ═════ 6차 ② 끌기·긋기 놀이 : 잡으면 들리고 · 놓으면 쿵 · 판 꾸밈 ═════ */
.draggable.dragging { scale: 1.06; rotate: -4deg; filter: drop-shadow(0 16px 10px rgba(0,0,0,.22)); outline: 5px solid rgba(255,214,90,.9); outline-offset: 4px; }
.in-bin { animation: bk쿵 .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes bk쿵 { 0% { scale: 1.4; } 60% { scale: .9; } 100% { scale: 1; } }
/* 나눠 담기 쟁반 : 소풍 돗자리 */
body[data-band^="s"] .tray { background: repeating-linear-gradient(90deg, rgba(255,205,214,.92) 0 34px, rgba(255,245,247,.92) 34px 68px); border: 6px dashed rgba(255,255,255,.95); box-shadow: 0 8px 0 rgba(215,120,140,.35), var(--그림자); }
body[data-band^="s"] .tray .item { background: radial-gradient(110px 50px at 32% 12%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%), linear-gradient(180deg, #fff, #FFF4DC); border: 4px solid #fff; border-radius: 32px; box-shadow: 0 8px 0 #EBC98F, 0 12px 18px rgba(90,60,25,.14); }
/* 따라 쓰기 판 : 공책 종이 + 마스킹 테이프 */
.trace-wrap { position: relative; }
.trace-pad { background: #FFFDF6 radial-gradient(#E6E9F0 2px, transparent 2.3px) 0 0 / 26px 26px; }
.trace-wrap::before { content: ""; position: absolute; z-index: 3; left: 36px; top: -12px; width: 110px; height: 30px; background: repeating-linear-gradient(-45deg, rgba(255,179,199,.9) 0 9px, rgba(255,214,224,.9) 9px 18px); rotate: -6deg; box-shadow: 0 2px 3px rgba(0,0,0,.08); pointer-events: none; }
/* 색칠 판 : 이젤 종이 */
.color-pic { position: relative; background: #FFFEF9; border: 6px solid #fff; box-shadow: 0 10px 0 #D9B48A, 0 18px 26px rgba(90,60,25,.18); }
.color-wrap { position: relative; }
.color-pic::before { content: ""; position: absolute; z-index: 3; left: 50%; margin-left: -50px; top: -16px; width: 100px; height: 28px; background: repeating-linear-gradient(-45deg, rgba(150,210,255,.9) 0 9px, rgba(205,234,255,.9) 9px 18px); rotate: 4deg; pointer-events: none; }
.palette .kid-btn { box-shadow: 0 6px 0 rgba(0,0,0,.12); }
/* 점 잇기 판 : 테이프 */
.dots-wrap { position: relative; }
.dots-wrap::before { content: ""; position: absolute; z-index: 3; right: 40px; top: -10px; width: 100px; height: 28px; background: repeating-linear-gradient(-45deg, rgba(180,230,190,.9) 0 9px, rgba(220,245,226,.9) 9px 18px); rotate: 5deg; pointer-events: none; }

/* ═════ 6차 ③ 섬 고르기 : 섬 3D 그림 + 진행 막대 · 카드 고르면 꾹 ═════ */
.island-icon .isl-art { height: 150px; width: auto; max-width: 200px; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,.18)); animation: bob 3.4s ease-in-out infinite; }
.island-card:nth-child(2n) .isl-art { animation-delay: -1.2s; }
.island-stars { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.isl-bar { display: block; width: 110px; height: 9px; border-radius: 5px; background: #F1E4D3; overflow: hidden; }
.isl-bar b { display: block; height: 100%; min-width: 9px; border-radius: 5px; background: linear-gradient(90deg, #FFD43B, #FF922B); }
/* 단원 단계 : 다음 할 카드에 「여기!」 깃발 · 다 한 카드엔 도장 */
.step-card.next::before { content: "👉"; position: absolute; top: -26px; left: 50%; margin-left: -20px; font-size: 40px; animation: bk가리킴 .9s ease-in-out infinite; z-index: 2; }
.step-card { position: relative; }
.step-card.done:not(.stamp-card)::after { content: "✔"; position: absolute; right: -10px; top: -12px; width: 44px; height: 44px; border-radius: 50%; background: #2FB344; color: #fff; font: 700 26px/44px sans-serif; text-align: center; box-shadow: 0 4px 0 #1E8A30; }