/* 도해 애니메이션 스타일 — 칠판 위에 분필로 그린 느낌 */
.scene-wrap { width: 100%; }
.scene { width: 100%; height: auto; display: block; font-family: inherit; }
.scene .bg { fill: none; }

/* 기본: 숨김 → .on 이 붙으면 나타남 */
.scene .sc { opacity: 0; transition: opacity .35s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.scene .sc.on { opacity: 1; }

/* 제목 · 설명 */
.scene .ttl { fill: #ffe9a8; font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.scene .gt { fill: #f6faf4; font-size: 19px; font-weight: 700; }
.scene .lb { fill: #f6faf4; font-size: 16px; font-weight: 700; }
.scene .note { fill: #c9d6cc; font-size: 13.5px; }
.scene .note.small { font-size: 12.5px; }
.scene .cap { fill: #ffe9a8; font-size: 18px; font-weight: 700; }
.scene .sub { fill: #9fb3a6; font-size: 13px; }

/* 묶음 박스 */
.scene .grp { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .28); stroke-width: 1.6; stroke-dasharray: 7 5; }

/* 건물 */
.scene .bldg .fl { fill: rgba(255, 255, 255, .1); stroke: #eef3ec; stroke-width: 2; transform-origin: center bottom; }
.scene .bldg .fl.on { animation: flIn .35s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes flIn { from { opacity: 0; transform: translateY(10px) scaleY(.4); } to { opacity: 1; transform: none; } }
.scene .bldg .fl.hit { fill: rgba(255, 216, 77, .3); stroke: #ffd84d; }
.scene .bldg .roof { fill: rgba(255, 216, 77, .22); stroke: #ffd84d; stroke-width: 2; stroke-linejoin: round; }

/* 기준선 · 강조 박스 */
.scene .line5 path { stroke: #ffd84d; stroke-width: 2; stroke-dasharray: 8 6; }
.scene .line5 text { fill: #ffd84d; font-size: 13px; font-weight: 700; }
.scene .rule rect { fill: rgba(120, 255, 170, .12); stroke: #7ef0a8; stroke-width: 1.6; }
.scene .rule text { fill: #cbf5d6; font-size: 15px; font-weight: 700; }
.scene .xmark circle { fill: rgba(255, 107, 111, .18); stroke: #ff6b6f; stroke-width: 2.4; }
.scene .xmark path { stroke: #ff6b6f; stroke-width: 3.4; stroke-linecap: round; }
.scene .xmark.on { animation: pop .38s cubic-bezier(.2, .9, .3, 1.5) both; transform-origin: 349px 150px; }
@keyframes pop { from { opacity: 0; transform: scale(.3) rotate(-18deg); } to { opacity: 1; transform: none; } }

/* 지역 블록 */
.scene .zone rect { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .45); stroke-width: 2; }
.scene .zone text { fill: #f6faf4; font-size: 19px; font-weight: 700; }
.scene .zone.z-im rect { fill: rgba(96, 200, 140, .16); stroke: #6fd9a2; }
.scene .zone.z-nong rect { fill: rgba(240, 200, 90, .16); stroke: #f0c85a; }
.scene .zone.z-taek rect { fill: rgba(120, 165, 255, .16); stroke: #78a5ff; }
.scene .zone.sub-z rect { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .5); }
.scene .zone.sub-z text { font-size: 15px; }
.scene .zone.on { animation: zoneIn .4s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes zoneIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* 화살표 */
.scene .arw path { stroke: #ffd84d; stroke-width: 3.2; stroke-linecap: round; }
.scene .arw.on path { animation: draw .45s ease both; stroke-dasharray: 60; }
@keyframes draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.scene .arw.hit path { stroke: #fff; filter: drop-shadow(0 0 6px rgba(255, 216, 77, .8)); }

/* 라벨 배지 */
.scene .badge rect { fill: rgba(255, 216, 77, .16); stroke: #ffd84d; stroke-width: 2; }
.scene .badge text { fill: #ffe9a8; font-size: 17px; font-weight: 800; }
.scene .badge.yi rect { fill: rgba(120, 165, 255, .18); stroke: #9cc0ff; }
.scene .badge.yi text { fill: #d6e4ff; }
.scene .badge.on { animation: pop2 .4s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes pop2 { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.scene .note-box rect { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .3); stroke-dasharray: 6 5; }
.scene .note-box text { fill: #c9d6cc; font-size: 14px; }

.scene .dim { opacity: .35 !important; }

.lec-bar { height: 5px; border-radius: 99px; background: var(--surface-2); margin: 14px 0 12px; overflow: hidden; }
.lec-bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* ===== 만화형 장면 ===== */
.scene .sky { fill: url(#skyG); }
.scene .ground { fill: #7fc98f; }
.scene .sun { fill: #ffd84d; opacity: .9; }
.scene .plot rect { fill: rgba(255,255,255,.35); stroke: #6b8f72; stroke-width: 2.4; stroke-dasharray: 10 7; }
.scene .plot.on rect { animation: zoneIn .45s cubic-bezier(.2,.9,.3,1.3) both; }

/* 캐릭터 */
.scene .chr .shadow { fill: rgba(0,0,0,.18); }
.scene .chr.on { animation: chrIn .45s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes chrIn { from { opacity: 0; transform: translateY(18px) scale(.8); } to { opacity: 1; } }

/* 말풍선 */
.scene .bub rect, .scene .bub path { fill: #fffdf5; stroke: #3a2f28; stroke-width: 2.6; stroke-linejoin: round; }
.scene .bub text { fill: #2a2119; font-size: 19px; font-weight: 800; }
.scene .bub.on { animation: bubIn .35s cubic-bezier(.2,.9,.3,1.6) both; }
@keyframes bubIn { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; } }

/* 집 캐릭터 */
.scene .hs .wall { stroke: #3a2f28; stroke-width: 2.6; }
.scene .hs .roof { fill: #e0705f; stroke: #3a2f28; stroke-width: 2.6; stroke-linejoin: round; }
.scene .hs .win { fill: #3a2f28; }
.scene .hs .door { fill: #8b5e3c; stroke: #3a2f28; stroke-width: 2; }
.scene .hs .hl-name { fill: #2a2119; font-size: 15px; font-weight: 800; }
.scene .hs.on { animation: hsIn .5s cubic-bezier(.2,.9,.3,1.45) both; }
@keyframes hsIn { from { opacity: 0; transform: translateY(26px) scale(.85); } to { opacity: 1; } }

/* 나무 · 작물 · 표지판 */
.scene .tree.on, .scene .crop.on { animation: popIn .4s cubic-bezier(.2,.9,.3,1.6) both; }
@keyframes popIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; } }
.scene .sign rect { fill: #fff6d8; stroke: #3a2f28; stroke-width: 2.6; }
.scene .sign text { fill: #2a2119; font-size: 17px; font-weight: 800; }
.scene .sign.on { animation: signIn .45s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes signIn { from { opacity: 0; transform: translateY(-14px) rotate(-8deg); } to { opacity: 1; } }

/* 굴착기 · 가게 */
.scene .dig.on { animation: digIn .6s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes digIn { from { opacity: 0; transform: translate(240px,340px); } to { opacity: 1; } }
.scene .shop rect, .scene .shop path { stroke: #3a2f28; stroke-width: 2.4; }
.scene .shop .shop-t { fill: #6d2340; font-size: 15px; font-weight: 900; }
.scene .shop.on { animation: hsIn .5s cubic-bezier(.2,.9,.3,1.45) both; }
.scene .arw2 path { stroke: #ff8fb1; stroke-width: 4; fill: none; stroke-linecap: round; }
.scene .arw2.on path { animation: draw .5s ease both; stroke-dasharray: 90; }

/* 효과음 · 도장 */
.scene .fx { fill: #ff5a5f; font-size: 30px; font-weight: 900; }
.scene .fx.on { animation: fxIn .45s cubic-bezier(.2,.9,.3,1.8) both; }
@keyframes fxIn { from { opacity: 0; transform: scale(.3) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.15) rotate(6deg); } to { opacity: 1; transform: none; } }
.scene .stamp circle { fill: rgba(255,90,95,.14); stroke: #ff5a5f; stroke-width: 4; }
.scene .stamp text { fill: #ff5a5f; font-size: 19px; font-weight: 900; }
.scene .stamp.ing circle { fill: rgba(255,216,77,.18); stroke: #f0a500; }
.scene .stamp.ing text { fill: #d98c00; }
.scene .stamp.on { animation: stampIn .4s cubic-bezier(.2,.9,.3,1.7) both; }
@keyframes stampIn { from { opacity: 0; transform: scale(2.2) rotate(-18deg); } to { opacity: 1; transform: rotate(-8deg); } }

/* 구역 박스 */
..scene .zoneL rect, .scene .zoneR rect { fill: rgba(255,255,255,.16); stroke: #3a2f28; stroke-width: 2.4; stroke-dasharray: 10 7; }
.scene .zoneL text, .scene .zoneR text { fill: #2a2119; font-size: 19px; font-weight: 800; }
.scene .ruleBox rect { fill: #eafbe7; stroke: #3a7a4a; stroke-width: 2.6; }
.scene .ruleBox text { fill: #23512f; font-size: 16px; font-weight: 700; }
.scene .ruleBox.on { animation: bubIn .4s cubic-bezier(.2,.9,.3,1.4) both; }
.scene .cap { font-weight: 800; }

.scene .ttl.dark, .scene .cap.dark { fill: #2a2119; }

/* 만화형 (재작성) */
.scene .zoneBox rect { fill: rgba(255,255,255,.5); stroke: #3a2f28; stroke-width: 2.4; stroke-dasharray: 11 8; }
.scene .zoneBox text { fill: #2a2119; font-size: 19px; font-weight: 800; }
.scene .hs-name { fill: #2a2119; font-size: 14.5px; font-weight: 800; }
.scene .bub path { fill: #fffdf5; stroke: #3a2f28; stroke-width: 2.6; stroke-linejoin: round; }
.scene .bub text { fill: #2a2119; font-size: 18px; font-weight: 800; }
.scene .fx text { fill: #ff5a5f; font-size: 30px; font-weight: 900; }
.scene .stamp text { font-size: 19px; font-weight: 900; }
.scene .shop path, .scene .shop rect { stroke-linejoin: round; }
.scene .arw2 path { stroke: #ff7aa6; stroke-width: 4; fill: none; stroke-linecap: round; }
.scene .sun { opacity: .95; }
.scene .cap { fill: #2a2119; font-size: 18px; font-weight: 800; }
.scene .ttl { fill: #2a2119; font-size: 27px; font-weight: 800; }

.scene .shop-t { fill: #6d2340; font-size: 15px; font-weight: 900; }