/* 장면(만화 애니메이션) 스타일 — 손그림 느낌 */
.lec-stage.anim .board {
  background: #fff; border-color: #c89a63; padding: 0; min-height: auto; overflow: hidden;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .18);
}
.lec-stage.anim .board::after { display: none; }
.lec-stage.anim .board-inner { max-height: none; font-size: inherit; line-height: normal; color: inherit; }
.lec-stage.anim .chalk-tray { display: none; }
.lec-stage.anim .board-wrap { width: 100%; align-self: stretch; }

.scene { width: 100%; height: auto; display: block; }
.scene text { font-family: 'Gaegu', 'Pretendard', sans-serif; }
.scene .sc { opacity: 0; transition: opacity .3s ease; transform-box: fill-box; transform-origin: center; }
.scene .sc.on { opacity: 1; }

/* 손으로 그린 듯 떨리는 외곽선 */
.scene .panel rect, .scene .note rect, .scene .card rect, .scene .chip rect,
.scene .item rect, .scene .sign .bd, .scene .bub path, .scene .paper rect,
.scene .hs .wall, .scene .hs .roof, .scene .office .wall, .scene .office .roof,
.scene .burst path, .scene .stamp circle, .scene .tblbg rect { filter: url(#rough); }

/* 제목 · 마무리 문구 */
.scene .ttl text { fill: #1f2a37; font-size: 34px; font-weight: 700; }
.scene .cap text { fill: #1f2a37; font-size: 24px; font-weight: 700; }

/* 해 · 구름 */
.scene .sun circle { fill: #ffd85e; stroke: #e8a200; stroke-width: 3; }
.scene .sun .ray path { stroke: #f5b301; stroke-width: 4.5; stroke-linecap: round; }
.scene .sun .ray { transform-box: fill-box; transform-origin: center; animation: spin 26s linear infinite; }
.scene .cloud path { fill: #fff; stroke: #b9d3e6; stroke-width: 2.6; }
.scene .cloud { animation: drift 9s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(16px); } }

/* 기둥(패널) */
.scene .panel rect { fill: rgba(255, 255, 255, .72); stroke: #94a3b8; stroke-width: 2.4; stroke-dasharray: 10 7; }
.scene .panel .pt { fill: #24303f; font-size: 24px; font-weight: 700; }
.scene .panel.blue rect { fill: #eaf1ff; stroke: #7aa0ee; }
.scene .panel.amber rect { fill: #fff6e5; stroke: #e8b25a; }
.scene .panel.green rect { fill: #e9f9ee; stroke: #6cc28c; }
.scene .panel.pink rect { fill: #ffeef4; stroke: #f093b0; }
.scene .panel.on { animation: scIn .4s cubic-bezier(.2, .9, .3, 1.3) both; }

/* 나무 팻말 */
.scene .sign .leg { fill: #a9793f; stroke: #3a2f28; stroke-width: 2.2; }
.scene .sign .bd { fill: #fff8e8; stroke: #3a2f28; stroke-width: 3; }
.scene .sign text { fill: #2a2118; font-size: 23px; font-weight: 700; }
.scene .sign.blue .bd { fill: #e6efff; }
.scene .sign.amber .bd { fill: #fff2d8; }
.scene .sign.green .bd { fill: #e4f7ea; }
.scene .sign.pink .bd { fill: #ffe7ef; }
.scene .sign.on { animation: plant .5s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes plant { 0% { opacity: 0; transform: translateY(-22px) rotate(-8deg); } 60% { transform: translateY(3px) rotate(2deg); } 100% { opacity: 1; } }

/* 알약 카드 */
.scene .chip rect { fill: #fff; stroke: #4a5568; stroke-width: 2.6; }
.scene .chip text { fill: #1f2a37; font-size: 20px; font-weight: 700; }
.scene .chip.blue rect { fill: #dbe8ff; stroke: #4a72cf; }
.scene .chip.amber rect { fill: #ffeecb; stroke: #c98c25; }
.scene .chip.green rect { fill: #d9f5e3; stroke: #3f9e63; }
.scene .chip.pink rect { fill: #ffdfe9; stroke: #cf6286; }
.scene .chip.on { animation: popIn .38s cubic-bezier(.2, .9, .3, 1.6) both; }

/* 네모 카드 */
.scene .card rect { fill: #fff; stroke: #3a2f28; stroke-width: 2.8; }
.scene .card .ic { font-size: 36px; }
.scene .card .tx { fill: #1f2a37; font-size: 19px; font-weight: 700; }
.scene .card.blue rect { fill: #eaf1ff; }
.scene .card.amber rect { fill: #fff4e0; }
.scene .card.green rect { fill: #e6f8ec; }
.scene .card.pink rect { fill: #ffeaf1; }
.scene .card.on { animation: cardIn .42s cubic-bezier(.2, .9, .3, 1.5) both; }

/* 물건 카드(표정) */
.scene .item rect { fill: #fff; stroke: #3a2f28; stroke-width: 2.8; }
.scene .item .ic { font-size: 40px; }
.scene .item .tx { fill: #24303f; font-size: 19px; font-weight: 700; }
.scene .item .ey { fill: #3a2f28; }
.scene .item .mo { stroke: #3a2f28; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.scene .item.blue rect { fill: #eaf1ff; }
.scene .item.amber rect { fill: #fff4e0; }
.scene .item.green rect { fill: #e6f8ec; }
.scene .item.pink rect { fill: #ffeaf1; }
.scene .item.on { animation: hop .5s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes hop { 0% { opacity: 0; transform: translateY(26px) rotate(-5deg); } 60% { transform: translateY(-5px) rotate(2deg); } 100% { opacity: 1; } }

/* 설명 박스 */
.scene .note rect { fill: #fffdf3; stroke: #3a2f28; stroke-width: 2.6; }
.scene .note text { fill: #1f2a37; font-size: 21px; font-weight: 700; }
.scene .note.soft rect { fill: #f4f6f9; stroke: #9aa7b8; stroke-dasharray: 7 5; }
.scene .note.soft text { fill: #48566a; font-weight: 400; }
.scene .note.blue rect { fill: #e8f0ff; }
.scene .note.amber rect { fill: #fff3d9; }
.scene .note.green rect { fill: #e4f7ea; }
.scene .note.pink rect { fill: #ffe6ee; }
.scene .note.red rect { fill: #ffe9e9; stroke: #d2464b; }
.scene .note.red text { fill: #a32026; }
.scene .note.on { animation: scIn .38s cubic-bezier(.2, .9, .3, 1.35) both; }

/* 표 · 노트 종이 */
.scene .paper rect { fill: #fffdf4; stroke: #3a2f28; stroke-width: 3; }
.scene .paper .hole { fill: #e8e2d2; stroke: #c9c0ac; stroke-width: 1.6; }
.scene .paper.on { animation: cardIn .45s cubic-bezier(.2, .9, .3, 1.4) both; }
.scene .tblbg rect { fill: #fff; stroke: #3a2f28; stroke-width: 2.4; }
.scene .trow rect { fill: #fffdf4; stroke: #c3b8a2; stroke-width: 1.6; }
.scene .trow text { fill: #24303f; font-size: 17px; font-weight: 400; }
.scene .trow.head rect { fill: #3a2f28; stroke: #3a2f28; }
.scene .trow.head text { fill: #fff; font-weight: 700; }
.scene .trow.on { animation: rowIn .34s ease both; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; } }

/* 도장 · 효과선 · 표시 */
.scene .stamp circle { fill: rgba(255, 90, 95, .12); stroke: #e0555a; stroke-width: 4.5; }
.scene .stamp text { fill: #d2464b; font-size: 21px; font-weight: 700; }
.scene .stamp.ing circle { fill: rgba(240, 165, 0, .16); stroke: #e8a200; }
.scene .stamp.ing text { fill: #b97c00; }
.scene .stamp.on { animation: stampIn .45s cubic-bezier(.2, .9, .3, 1.8) both; }
@keyframes stampIn { 0% { opacity: 0; transform: scale(2.2) rotate(-18deg); } 70% { transform: scale(.94) rotate(-5deg); } 100% { opacity: 1; transform: rotate(-7deg); } }
.scene .zip path { stroke: #f0a500; stroke-width: 4; stroke-linecap: round; }
.scene .zip.on { animation: zipOut .5s ease-out both; }
@keyframes zipOut { 0% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1.15); } 100% { opacity: .55; transform: scale(1); } }
.scene .fx text { fill: #ff5a5f; font-size: 34px; font-weight: 700; }
.scene .fx.on { animation: popIn .4s cubic-bezier(.2, .9, .3, 1.8) both; }
.scene .xm circle { fill: rgba(224, 85, 90, .14); stroke: #e0555a; stroke-width: 4; }
.scene .xm path { stroke: #e0555a; stroke-width: 5; stroke-linecap: round; }
.scene .xm.on { animation: popIn .38s cubic-bezier(.2, .9, .3, 1.7) both; }
.scene .ck circle { fill: #e4f7ea; stroke: #3f9e63; stroke-width: 3.2; }
.scene .ck path { stroke: #3f9e63; stroke-width: 4.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.scene .ck.on { animation: popIn .36s cubic-bezier(.2, .9, .3, 1.7) both; }

/* 만화 효과 말풍선 */
.scene .burst path { fill: #fff3b0; stroke: #3a2f28; stroke-width: 3; stroke-linejoin: round; }
.scene .burst text { fill: #2a2118; font-size: 23px; font-weight: 700; }
.scene .burst.red path { fill: #ffd9d9; stroke: #c2333a; }
.scene .burst.red text { fill: #a32026; }
.scene .burst.green path { fill: #d9f5e3; }
.scene .burst.blue path { fill: #dbe8ff; }
.scene .burst.pink path { fill: #ffdfe9; }
.scene .burst.on { animation: burstIn .5s cubic-bezier(.2, .9, .3, 1.9) both, wig 3.4s ease-in-out .6s infinite; }
@keyframes burstIn { 0% { opacity: 0; transform: scale(.2) rotate(-24deg); } 65% { transform: scale(1.12) rotate(5deg); } 100% { opacity: 1; transform: rotate(-3deg); } }
@keyframes wig { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* 화살표 */
.scene .arw path { stroke: #ff7aa6; stroke-width: 4; fill: none; stroke-linecap: round; }
.scene .arw.y path { stroke: #f0a500; }
.scene .arw.on path { animation: drawIn .5s ease both; stroke-dasharray: 240; }
@keyframes drawIn { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }

/* 말풍선 */
.scene .bub path { fill: #fffdf5; stroke: #3a2f28; stroke-width: 3; stroke-linejoin: round; }
.scene .bub text { fill: #23303f; font-size: 22px; font-weight: 700; }
.scene .bub.on { animation: bubIn .34s cubic-bezier(.2, .9, .3, 1.6) both; }
@keyframes bubIn { from { opacity: 0; transform: translateY(12px) scale(.88); } to { opacity: 1; } }

/* 집 · 관공서 · 나무 */
.scene .hs .wall { stroke: #3a2f28; stroke-width: 2.8; }
.scene .hs .roof { fill: #e0705f; stroke: #3a2f28; stroke-width: 2.8; stroke-linejoin: round; }
.scene .hs .win { fill: #3a2f28; }
.scene .hs .door { fill: #8b5e3c; stroke: #3a2f28; stroke-width: 2; }
.scene .hs .hs-name { fill: #24303f; font-size: 18px; font-weight: 700; }
.scene .hs.on { animation: houseIn .5s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes houseIn { 0% { opacity: 0; transform: translateY(30px) scale(.8); } 65% { transform: translateY(-4px) scale(1.04); } 100% { opacity: 1; } }
.scene .office .wall { fill: #f6efe2; stroke: #3a2f28; stroke-width: 3; }
.scene .office .roof { fill: #7fa7d8; stroke: #3a2f28; stroke-width: 3; stroke-linejoin: round; }
.scene .office .col { fill: #fff; stroke: #3a2f28; stroke-width: 2.4; }
.scene .office .bd { fill: #fff3c4; stroke: #3a2f28; stroke-width: 2.6; }
.scene .office .nm { fill: #2a2118; font-size: 21px; font-weight: 700; }
.scene .office.on { animation: houseIn .55s cubic-bezier(.2, .9, .3, 1.4) both; }
.scene .fence.on { animation: scIn .4s ease both; }
.scene .tree.on { animation: popIn .42s cubic-bezier(.2, .9, .3, 1.6) both; }

/* 캐릭터 */
.scene .chr .shadow { fill: rgba(0, 0, 0, .15); }
.scene .chr .body, .scene .chr .head { stroke: #3a2f28; stroke-width: 2.6; }
.scene .chr .ey { fill: #2a2118; }
.scene .chr .gl { fill: #fff; }
.scene .chr .ln { stroke: #2a2118; stroke-width: 2.8; fill: none; stroke-linecap: round; }
.scene .chr .mo { stroke: #2a2118; stroke-width: 2.6; fill: none; stroke-linecap: round; }
.scene .chr .mo2 { fill: #c2566a; }
.scene .chr .bl { fill: #ffb3a7; opacity: .65; }
.scene .chr .arm { stroke: #3a2f28; stroke-width: 2.6; }
.scene .chr .it { font-size: 30px; }
.scene .chr .nm { fill: #3a2f28; font-size: 17px; font-weight: 700; }
.scene .chr.on { animation: charIn .5s cubic-bezier(.2, .9, .3, 1.5) both, bob 2.6s ease-in-out .5s infinite; }
@keyframes charIn { 0% { opacity: 0; transform: translateY(28px) scale(.85); } 65% { transform: translateY(-5px) scale(1.03); } 100% { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@keyframes scIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene .sc { animation: none !important; } }

/* ===== 전체화면(몰입) 보기 — 스마트폰에서 화면을 꽉 채운다 ===== */
body.lec-fs { overflow: hidden; }
body.lec-fs #lec-wrap { position: fixed; inset: 0; z-index: 9999; margin: 0; padding: 0; background: #0b1220; display: block; }

/* 조작줄 자리를 비워두고(가리지 않게) 나머지를 그림이 다 쓴다 */
body.lec-fs #lec-stage {
  position: absolute; left: 0; right: 0; top: 0;
  bottom: calc(52px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; margin: 0;
}
body.lec-fs .board-wrap { width: auto; align-self: auto; display: flex; justify-content: center; }
body.lec-fs .board {
  width: min(100vw, calc((100svh - 52px - env(safe-area-inset-bottom)) * 1.8));
  min-height: 0; margin: 0; border-radius: 0; border-width: 0; box-shadow: none;
}
body.lec-fs .chalk-tray, body.lec-fs .cat-wrap, body.lec-fs .lec-subtitle { display: none; }
body.lec-fs .lec-bar { position: absolute; left: 0; right: 0; bottom: calc(52px + env(safe-area-inset-bottom)); width: auto; margin: 0; z-index: 3; }

/* 조작줄 — 반드시 한 줄 */
body.lec-fs .lec-ctrl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0;
  height: calc(52px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #0e1729; padding: 0 8px env(safe-area-inset-bottom);
}
body.lec-fs .lec-ctrl::-webkit-scrollbar { display: none; }
body.lec-fs .lec-ctrl [data-act="lec-restart"],
body.lec-fs .lec-ctrl [data-act="sound-help"],
body.lec-fs .lec-ctrl [data-act="lec-mute"],
body.lec-fs .lec-ctrl #lec-audio-mark,
body.lec-fs .lec-ctrl .rate-wrap,
body.lec-fs .lec-ctrl #lec-idx,
body.lec-fs .lec-ctrl .grow { display: none; }
body.lec-fs .lec-ctrl .btn { flex: 0 0 auto; padding: 8px 10px; font-size: 13px; white-space: nowrap; }

/* 세로로 들고 있을 때 — 화면을 눕혀서 꽉 채운다 */
body.lec-fs.rot-fs .board-wrap {
  position: absolute; top: 50%; left: 50%;
  width: calc(100svh - 52px - env(safe-area-inset-bottom)); height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  align-items: center;
}
body.lec-fs.rot-fs .board { width: min(calc(100svh - 52px - env(safe-area-inset-bottom)), calc(100vw * 1.8)); }
body.lec-fs.rot-fs .lec-bar { display: none; }

/* ===== 전체화면이 아닌 스마트폰 보기 ===== */
@media (max-width: 860px) {
  .lec-stage.anim { margin-left: -16px; margin-right: -16px; }
  .lec-stage.anim .board { border-left-width: 0; border-right-width: 0; border-radius: 0; min-height: 0; }

  /* 조작줄을 한 줄로 — 넘치면 좌우로 밀어서 본다 */
  #lec-wrap .lec-ctrl {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 6px; padding: 8px 0; scrollbar-width: none;
  }
  #lec-wrap .lec-ctrl::-webkit-scrollbar { display: none; }
  #lec-wrap .lec-ctrl .btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 10px; font-size: 13px; }
  #lec-wrap .lec-ctrl .btn.lg { flex: 0 0 auto; order: 0; }
  #lec-wrap .lec-ctrl [data-act="lec-prev"] { order: -1; }
  #lec-wrap .lec-ctrl [data-act="lec-next"] { order: 1; }
  #lec-wrap .lec-ctrl [data-act="lec-fs"] { order: 2; }
  #lec-wrap .lec-ctrl .rate-wrap { order: 3; flex: 0 0 auto; }
  #lec-wrap .lec-ctrl [data-act="lec-mute"] { order: 4; }
  #lec-wrap .lec-ctrl [data-act="lec-restart"] { order: 5; }
  #lec-wrap .lec-ctrl [data-act="sound-help"] { order: 6; }
  #lec-wrap .lec-ctrl #lec-audio-mark, #lec-wrap .lec-ctrl #lec-idx { order: 7; flex: 0 0 auto; white-space: nowrap; }
  #lec-wrap .lec-ctrl .grow { display: none; }
  #lec-wrap .lec-ctrl .fs-only[hidden] { display: none; }
}

/* 가로로 든 스마트폰: 떠 있는 조작줄이 그림을 가리지 않게 */
@media (max-height: 520px) and (orientation: landscape) {
  body:not(.lec-fs) #lec-wrap .lec-ctrl { position: static !important; bottom: auto !important; }
  .lec-stage.anim .board { min-height: 0; }
}