/* ---------- 영어 읽기 · 문장 놀이 (참고 영상 기준) ----------
   얼음 맞추기 · 글자가 사라졌다 · 문장 벽돌 · 문장 메모 · 배를 고치자 · 문장 다리 만들기 */

/* 얼음 맞추기 (e-ice) */
.ice-build { width: min(860px, 100%); border-radius: 24px; overflow: hidden; background: #3A86E0; box-shadow: 0 10px 0 rgba(0, 0, 0, .12); }
.ib-sky {
  position: relative; height: 96px;
  background: radial-gradient(ellipse 40% 60% at 30% 40%, #E2B652 0 98%, transparent), radial-gradient(ellipse 35% 55% at 75% 40%, #E2B652 0 98%, transparent), linear-gradient(#F3D98E 0 44%, #2F7AD8 44%);
}
.ib-penguins { position: absolute; left: 10px; bottom: 6px; display: flex; gap: 2px; font-size: 30px; }
.ib-penguins span { transition: opacity .3s; }
.ib-penguins span.gone { opacity: 0; }
.ib-fish { position: absolute; right: 14px; bottom: 10px; font-size: 26px; }
.ib-slider { position: absolute; left: 10%; bottom: 0; font-size: 34px; opacity: 0; }
.ib-slider.go { animation: ib-slide 2.2s ease-in-out forwards; }
@keyframes ib-slide { 0% { opacity: 1; left: 8%; transform: rotate(-80deg); } 85% { opacity: 1; left: 84%; transform: rotate(-80deg); } 100% { opacity: 0; left: 88%; } }
.ib-cliffs { display: flex; align-items: center; min-height: 72px; background: linear-gradient(#3A86E0, #2F72C8); }
.ib-cliff { flex: none; width: 54px; align-self: stretch; background: linear-gradient(90deg, #EAF6FF, #BFE3FA); border-radius: 0 0 18px 0; }
.ib-cliff.right { border-radius: 0 0 0 18px; }
.ib-bridge { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 10px 6px; }
.ib-block, .ib-gap {
  min-width: 46px; min-height: 40px; padding: 6px 10px; border-radius: 6px; display: grid; place-items: center;
  font: 700 clamp(17px, 2.6vw, 22px)/1 var(--font-latin); color: #1E3A5F; background: #D9F1FF; box-shadow: inset 0 -4px 0 #A9D8F5;
}
.ib-block.end { min-width: 18px; padding: 6px 4px; }
.ib-gap { background: #2F65B3; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .25); min-width: 70px; cursor: pointer; }
.ib-gap.full { background: #CFF5FF; box-shadow: 0 0 0 3px #7FE0FF, inset 0 -4px 0 #A9D8F5; }
.ib-water { position: relative; height: 170px; background: radial-gradient(ellipse at 50% 120%, #4F9BEA, #2F72C8 70%); }
.ib-ice {
  position: absolute; padding: 10px 16px; border: 0; border-radius: 8px; cursor: grab; touch-action: none;
  font: 700 clamp(18px, 2.8vw, 24px)/1 var(--font-latin); color: #1E3A5F; background: #E3F6FF; box-shadow: 0 6px 0 #9FD3F2, 0 10px 14px rgba(0, 0, 0, .2);
  animation: ib-bob 3s ease-in-out infinite;
}
.ib-ice.sel { box-shadow: 0 0 0 4px #FFE15A, 0 6px 0 #9FD3F2; }
@keyframes ib-bob { 50% { transform: translateY(-6px) rotate(1deg); } }

/* 글자가 사라졌다 (e-missingw) */
.missing-words { display: flex; gap: 14px; width: min(900px, 100%); align-items: stretch; }
.mw-page {
  flex: 1.6; position: relative; padding: 16px 18px 18px 36px; border-radius: 6px; background: #fff;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .1); background-image: repeating-linear-gradient(transparent 0 33px, #F6D1E2 33px 35px);
}
.mw-page::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 10px; background: radial-gradient(circle, #7A6A80 0 3px, transparent 4px) 0 0 / 10px 18px repeat-y; }
.mw-photo { display: grid; place-items: center; height: 92px; margin: 0 auto 6px; width: min(240px, 80%); border-radius: 6px; background: #FFF4E6; font-size: 50px; box-shadow: inset 0 0 0 3px #F3E0C8; }
.mw-title { margin: 0 0 4px; text-align: center; font: 700 20px var(--font-latin); color: #2E2440; }
.mw-text { margin: 0; font: 500 clamp(17px, 2.4vw, 21px)/35px var(--font-latin); color: #2E2440; }
.mw-slot { display: inline-block; min-width: 74px; height: 28px; margin: 0 2px; padding: 0 8px; border: 0; border-radius: 4px; vertical-align: middle; background: #DDF6EE; cursor: pointer; font: 700 18px var(--font-latin); color: #1E7A5A; }
.mw-slot.full { background: #FFF27A; color: #2E2440; }
.mw-float { position: relative; flex: 1; min-height: 340px; }
.mw-chip {
  position: absolute; left: var(--x); top: var(--y); padding: 6px 12px; border: 0; border-radius: 4px; cursor: grab; touch-action: none;
  background: #FFF27A; font: 700 18px var(--font-latin); color: #2E2440; box-shadow: 0 4px 0 #E3C94A; animation: mw-float 4s ease-in-out infinite;
}
.mw-chip.sel { box-shadow: 0 0 0 4px #5B6CF0, 0 4px 0 #E3C94A; }
@keyframes mw-float { 50% { transform: translate(6px, -8px); } }

/* 문장 벽돌 (e-bricks) */
.sentence-bricks { width: min(560px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sb-sentence { width: 100%; margin: 0; padding: 14px; border-radius: 10px; background: #FFF6EE; text-align: center; font: 700 clamp(20px, 3.4vw, 26px) var(--font-latin); color: #2E2440; box-shadow: 0 4px 0 rgba(0, 0, 0, .08); }
.sb-blank { display: inline-block; min-width: 80px; margin: 0 6px; border-bottom: 3px solid #9A8E9F; color: #2F8BE0; }
.sb-blank.bad { color: #E25D5D; text-decoration: line-through; }
.sb-done { color: #2E9C54; }
.sb-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(420px, 100%); min-height: 330px; padding: 8px; border-radius: 10px; background: #4A3626; box-shadow: inset 0 0 0 6px #3A2A1C; }
.sb-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.sb-brick {
  height: 46px; border: 0; border-radius: 6px; cursor: pointer; background: var(--c); color: #2E2440;
  font: 700 clamp(17px, 2.6vw, 21px) var(--font-latin); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15); transition: transform .25s;
}
.sb-brick.broken { animation: sb-break .38s ease-in forwards; }
@keyframes sb-break { to { transform: scale(.4) rotate(12deg); opacity: 0; } }
.sb-found { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 28px; }
.sb-found span { padding: 3px 10px; border-radius: 999px; background: #DFF7EC; color: #1E7A43; font-size: 15px; font-weight: 700; }

/* 문장 메모 (e-sticky) */
.sticky-story { width: min(720px, 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ss-board { position: relative; width: 100%; padding: 22px; border-radius: 10px; background: #E8CF95; box-shadow: inset 0 0 0 8px #D9BA77; }
.ss-pin { position: absolute; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #A9A2B0; box-shadow: 0 2px 0 #6E6874; }
.ss-pin.l { left: 30px; }
.ss-pin.r { right: 30px; }
.ss-paper { min-height: 200px; padding: 18px 26px; background: #FFFDF8; border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .12); background-image: repeating-linear-gradient(transparent 0 37px, #EFE7D8 37px 38px); }
.ss-paper.done { box-shadow: 0 0 0 4px #F59BE0, 0 6px 12px rgba(0, 0, 0, .12); }
.ss-line { margin: 0; font: 500 clamp(17px, 2.6vw, 21px)/38px var(--font-latin); color: #2E2440; }
.ss-line.now { background: rgba(255, 255, 255, .9); }
.ss-slot { display: inline-block; min-width: 86px; height: 30px; border: 0; border-radius: 3px; background: #E9E4EE; vertical-align: middle; cursor: pointer; }
.ss-stuck { padding: 2px 8px; background: #FFE95C; border-radius: 3px; font-weight: 700; }
.ss-notes { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; min-height: 52px; }
.ss-note {
  min-width: 110px; padding: 10px 18px; border: 0; cursor: grab; touch-action: none; background: #FFE95C; color: #2E2440;
  font: 700 clamp(18px, 2.8vw, 22px) var(--font-latin); box-shadow: 0 6px 10px rgba(0, 0, 0, .15); transform: rotate(-1deg);
}
.ss-note.nope { background: #F7E2A0; }

/* 배를 고치자 (e-ship) */
.fix-ship { width: min(860px, 100%); border-radius: 24px; overflow: hidden; box-shadow: 0 10px 0 rgba(0, 0, 0, .12); }
.fs-sea { position: relative; height: 280px; overflow: hidden; background: linear-gradient(#A9E1FB 0 62%, #3FA9E8 62%); }
.fs-light { position: absolute; right: 12px; top: 96px; font-size: 44px; }
.fs-ship { position: absolute; left: 50%; bottom: 26px; width: min(560px, 90%); translate: -50% 0; transition: transform 2s ease-in; }
.fs-ship.arrive { animation: fs-arrive 1.2s ease-out; }
@keyframes fs-arrive { from { transform: translateX(-120%); } }
.fs-ship.sail { transform: translateX(140%); }
.fs-hull {
  position: relative; z-index: 2; padding: 16px 26px 22px; border-radius: 0 0 46% 46% / 0 0 34% 34%; background: linear-gradient(#C08A55, #A06D3E);
  box-shadow: inset 0 6px 0 #D9A46B, 0 6px 0 rgba(0, 0, 0, .15); clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
}
.fs-ship.fixed .fs-hull { box-shadow: inset 0 6px 0 #D9A46B, 0 0 0 4px #FFF27A, 0 0 22px #FFF27A; }
.fs-line { margin: 4px 0; padding: 4px 10px; border-radius: 4px; background: rgba(255, 255, 255, .18); font: 700 clamp(16px, 2.4vw, 20px)/1.4 var(--font-latin); color: #2E1A08; }
.fs-slot { display: inline-block; min-width: 90px; height: 28px; border: 0; border-radius: 4px; background: #6E4723; vertical-align: middle; cursor: pointer; font: 700 18px var(--font-latin); color: #2E1A08; }
.fs-slot.full { background: #E8C08A; padding: 0 8px; }
.fs-mast { position: absolute; left: 50%; bottom: 100%; width: 70%; height: 120px; translate: -50% 0; display: flex; justify-content: space-around; align-items: flex-end; }
.fs-mast::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 120px; background: #7A5230; }
.fs-sail { position: relative; width: 90px; height: 90px; border-radius: 4px 4px 30px 30px; background: #fff; box-shadow: inset -6px 0 0 #E6E6E6; transform: scaleY(0); transform-origin: top; transition: transform .6s; }
.fs-sail.small { width: 60px; height: 64px; }
.fs-ship.fixed .fs-sail { transform: scaleY(1); }
.fs-crew { position: absolute; z-index: 1; left: 50%; bottom: calc(100% - 14px); translate: -50% 0; font-size: 26px; opacity: 0; transition: opacity .5s .4s; }
.fs-ship.fixed .fs-crew { opacity: 1; }
.fs-dock { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; min-height: 70px; padding: 14px; background: repeating-linear-gradient(90deg, #4B4F57 0 60px, #43464E 60px 62px); }
.fs-plank {
  padding: 10px 18px; border: 0; border-radius: 4px; cursor: grab; touch-action: none; background: #D9A46B; color: #2E1A08;
  font: 700 clamp(17px, 2.6vw, 21px) var(--font-latin); box-shadow: 0 5px 0 #A06D3E; transform: rotate(var(--r));
}
.fs-plank.sel { box-shadow: 0 0 0 4px #FFF27A, 0 5px 0 #A06D3E; }

/* 문장 다리 만들기 (e-bridge) */
.bridge-type { width: min(860px, 100%); border-radius: 24px; overflow: hidden; box-shadow: 0 10px 0 rgba(0, 0, 0, .12); }
.bt-road { position: relative; height: 90px; background: linear-gradient(#F9D4EE 0 70%, #fff 70% 74%, #F4C6E6 74%); }
.bt-truck { position: absolute; left: 6%; bottom: 14px; font-size: 52px; transform: scaleX(-1); }
.bt-truck.go { animation: bt-go 2.2s ease-in forwards; }
@keyframes bt-go { to { left: 104%; } }
.bt-ear { position: absolute; left: 50%; top: 10px; translate: -50% 0; width: 54px; height: 54px; border: 0; border-radius: 14px; background: #fff; font-size: 26px; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .08); }
.bt-bridge { padding: 16px 14px 22px; background: repeating-linear-gradient(0deg, #C9473B 0 18px, #B53D33 18px 20px), #C9473B; }
.bt-line { margin: 0 0 18px; text-align: center; font: 700 clamp(20px, 3.6vw, 30px)/1.5 var(--font-latin); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.bt-line.roll { animation: bt-roll .6s ease-out; }
@keyframes bt-roll { from { transform: translateX(40%); opacity: 0; } }
.bt-cell { display: inline-block; min-width: .8em; height: 1.15em; margin: 0 1px; border-radius: 3px; vertical-align: -.15em; background: #F2C7E4; color: #2E2440; text-shadow: none; }
.bt-cell.now { box-shadow: 0 0 0 3px #FFE15A; }
.bt-cell.full { background: transparent; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.bt-keys { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bt-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.bt-key {
  width: clamp(26px, 5vw, 40px); height: clamp(30px, 5.6vw, 44px); border: 0; border-radius: 8px; cursor: pointer;
  background: #7A1F2B; color: #fff; font: 700 clamp(16px, 2.8vw, 22px) var(--font-latin); box-shadow: 0 4px 0 #561520;
}
.bt-key:active { transform: translateY(3px); box-shadow: 0 1px 0 #561520; }

@media (max-width: 640px) {
  .missing-words { flex-direction: column; }
  .mw-float { min-height: 170px; }
  .ib-water { height: 150px; }
  .fs-sea { height: 300px; }
  .fs-hull { padding: 12px 16px 18px; }
}

/* 라벨링 (e-label): 공책(제목 칸 + 그림 카드 2×2 / 3×2) + 오른쪽 스티커 */
.labeling.notebook { display: flex; flex-direction: row; align-items: stretch; gap: 16px; width: min(860px, 100%); padding: 16px; border-radius: 22px; background: #F2C14E; box-shadow: inset 0 0 0 8px #E7AE33, 0 10px 0 rgba(0, 0, 0, .12); }
.lb-book {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 16px 18px 34px;
  border-radius: 8px; background: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
}
.lb-book::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 14px; background: radial-gradient(circle, #6E6874 0 4px, transparent 5px) 0 0 / 14px 22px repeat-y; }
.lb-title-slot, .lb-book .lb-label {
  min-width: 120px; min-height: 34px; padding: 4px 14px; border: 2px dashed #CFC6D8; border-radius: 4px; background: #FBF8FD; cursor: pointer;
  font: 700 18px var(--font-latin); color: #2E2440;
}
.lb-title-slot { min-width: 160px; font-size: 21px; }
.lb-title-slot:not(.empty), .lb-book .lb-label:not(.empty) { border: 0; background: var(--c, #F6E27A); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.lb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; padding: 12px; border-radius: 6px; background: #F7F1E6; }
.lb-grid.n6 { grid-template-columns: repeat(3, 1fr); }
.lb-card { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 6px; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .06); }
.lb-photo { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; font-size: clamp(56px, 10vw, 96px); line-height: 1; border-radius: 4px; background: #FFF6E9; }
.lb-book .lb-label { min-width: 0; width: 100%; font-size: 16px; }
.lb-stickers { flex: none; width: 150px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; justify-content: center; }
.lb-sticker {
  padding: 8px 10px; border: 0; border-radius: 4px; cursor: grab; touch-action: none; background: var(--c); color: #2E2440;
  font: 700 17px var(--font-latin); box-shadow: 0 4px 0 rgba(0, 0, 0, .15); animation: pop .3s both;
}
.lb-sticker.title { border-left: 8px solid #E85DB4; }
.lb-sticker.sel { box-shadow: 0 0 0 4px #5B6CF0, 0 4px 0 rgba(0, 0, 0, .15); }
@media (max-width: 640px) {
  .labeling.notebook { flex-direction: column; padding: 10px; }
  .lb-stickers { width: auto; flex-direction: row; flex-wrap: wrap; }
  .lb-grid.n6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* 좁은 화면: 떠 있는 낱말이 겹치지 않게 줄 지어 놓는다 */
  .mw-float { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: flex-start; min-height: 0; }
  .mw-chip { position: static; }
}
.mw-photo { white-space: nowrap; font-size: clamp(34px, 9vw, 50px); letter-spacing: .1em; }