/* ================================================================
   7차시 따라 하기 (무대 data-p="t" → t1~t8)
   밝기 센서 A0 + 만약/아니면 + 네오픽셀 켜기·끄기. 블록 문구·색은 ezon.ai/sandbox 실제 값
   좌표: 무대 = 작업칸 + (200,152)
   ================================================================ */
/* 5차시에 이미 꽂아 둔 것: LED(D0) · USB */
.v7 .wcab path.mod,.v7 .wcab path.usb{stroke-dashoffset:0;transition:none}
.v7 .wplug.mp,.v7 .wplug.up{opacity:1;animation:none}
.v7 .wport.d0{animation:none}
.v7 .wcab path.sen{stroke:#1F4FD8}
.v7 .wplug.ap{left:317px;top:588px}
.v7 .wsen{position:absolute;left:560px;top:560px;width:220px;mix-blend-mode:multiply}
.v7 .wport.a0{left:300px;top:650px}
.v7 .wpop.p3{left:440px;top:640px}
.v7 .whand{position:absolute;left:555px;top:505px;width:230px;mix-blend-mode:multiply;opacity:0}
.v7 .wval{position:absolute;left:800px;top:600px;font:900 30px/1.3 var(--ff);color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:12px;padding:8px 14px;opacity:0;white-space:nowrap}
.v7 .wval b{color:var(--purple)}

/* 1단계: 밝기 센서 선이 그려지고 플러그가 아래에서 A0로 */
.t1 .wcab path.sen{transition:stroke-dashoffset 1.1s ease-in-out .2s;stroke-dashoffset:0}
.t1 .wplug.ap{animation:wPlugUp 1.1s cubic-bezier(.3,1.4,.5,1) .9s both}
@keyframes wPlugUp{from{opacity:1;transform:translateY(110px)}to{opacity:1;transform:none}}
.t1 .wport.a0{animation:wPulse 1s ease-in-out infinite}
.t1 .wpop.p3{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) 1.9s both}
.t2 .wcab path.sen{transition:none;stroke-dashoffset:0}
.t2 .wplug.ap{animation:none;opacity:1}
/* 2단계부터 책상은 작게, 화면이 나온다 */
.t2 .wdesk{transform:scale(.36)}
.t2 .wpop,.t2 .wport{opacity:0!important;animation:none!important}
.t2 .wez{opacity:1;transform:none}

/* 화면 배치 (7차시용) */
.v7 .bk.ez.a{top:20px}.v7 .slotb.a{top:56px;height:52px}.v7 .bk.ez-end.a{top:106px}
.v7 .bk.ez.b{top:140px}.v7 .slotb.b{top:176px;height:200px}.v7 .bk.ez-end.b{top:374px}
.v7 .bk.np{opacity:0}
.v7 .bk.np.g1{left:52px;top:60px}
.v7 .bk.np.g2{left:74px;top:226px;transform:translate(-22px,-46px)}
.v7 .bk.np.g3{left:74px;top:314px}
.v7 .bk.np.g3 .dot{background:#000}
.ifb{position:absolute;left:52px;top:180px;width:640px;height:190px;opacity:0;color:#fff;font-size:15px;font-weight:700}
.ifb > div{position:absolute;background:#3c8de7;box-shadow:inset 0 0 0 1.5px #2f73c2}
.ifb .h{left:0;top:0;height:42px;border-radius:6px 6px 0 6px;display:flex;align-items:center;gap:8px;padding:0 12px;white-space:nowrap}
.ifb .hole{display:inline-block;width:470px;height:28px;background:#2f73c2;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
.ifb .arm{left:0;top:40px;width:22px;height:136px}
.ifb .mid{left:0;top:94px;width:200px;height:34px;display:flex;align-items:center;padding-left:12px}
.ifb .ft{left:0;top:172px;width:200px;height:18px;border-radius:0 0 6px 6px}
.cmp{position:absolute;left:112px;top:187px;height:30px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#3c8de7;color:#fff;font-size:14px;font-weight:700;white-space:nowrap;opacity:0;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);box-shadow:inset 0 0 0 1.5px #2f73c2}
.cmp .br{background:#f1c40f;border-radius:99px;padding:3px 10px;display:flex;gap:6px;align-items:center}
.cmp .br .dd,.cmp .op{border:1.5px solid rgba(255,255,255,.6);border-radius:5px;padding:0 6px;font-size:13px}
.cmp .num{background:#fff;color:#575e75;border-radius:99px;padding:0 9px;font-size:13px}
.v7 .ez-tree .ez-on{border-radius:6px;margin-right:12px;transition:background .3s}

/* 블록이 블록 상자(왼쪽 아래)에서 날아와 자리 잡는다: --fx, --fy = 출발 위치 - 도착 위치 */
@keyframes wIn{0%{opacity:0;transform:translate(var(--fx),var(--fy))}18%{opacity:1;transform:translate(var(--fx),var(--fy))}70%,100%{opacity:1;transform:none}}
/* 2단계: 블럭 불러오기 → 지난번 LED 코드가 다시 나타남 */
.t2 .wcur{opacity:1;animation:wCur7b 1.2s ease-in-out .5s both}
@keyframes wCur7b{from{left:520px;top:520px}to{left:400px;top:120px}}
.t2 .wburst.b7{left:410px;top:128px;animation:wBurst .6s ease-out 1.6s both}
.t2 .bk.np.g1,.t2 .bk.np.g2{animation:wFade .4s ease 1.9s both}
@keyframes wFade{to{opacity:1}}
.v7 .bk.np.g1,.v7 .bk.np.g2{transform-origin:0 50%}
/* 3단계: 제어 › 만약/아니면 이 반복 실행 안으로, 빨강 블록은 '만약' 칸으로 */
.t3 .ez-tree .r-ctl{background:#d8e8fb}
.t3 .ifb{--fx:-36px;--fy:240px;animation:wIn 2.4s ease-in-out .9s both}
.t3 .bk.np.g2{transition:transform .8s cubic-bezier(.4,0,.2,1) 3.2s;transform:none}
.t3 .wcur{animation:wCur7c 3.2s ease-in-out .2s both}
@keyframes wCur7c{0%{left:400px;top:120px}20%,28%{left:90px;top:208px}40%{left:256px;top:592px}80%,100%{left:292px;top:352px}}
/* 4단계: 밝기 센서 측정값 < 45 */
.t4 .ez-tree .r-ctl{background:none}
.t4 .ez-tree .r-br{background:#fdf1c4}
.t4 .cmp{--fx:-96px;--fy:256px;animation:wIn 2.4s ease-in-out .9s both}
.t4 .wcur{animation:wCur7d 3.2s ease-in-out .2s both}
@keyframes wCur7d{0%{left:292px;top:352px}20%,28%{left:90px;top:264px}40%{left:256px;top:612px}80%,100%{left:372px;top:352px}}
.t4 .cmp .num{animation:wNum .5s ease 3.2s both}
@keyframes wNum{50%{transform:scale(1.4);background:#ffe58a}}
.t5 .ifb,.t5 .cmp{animation:none;opacity:1;transform:none}
.t4 .ifb{animation:none;opacity:1;transform:none}
.t4 .bk.np.g2,.t5 .bk.np.g2{transition:none;transform:none;opacity:1}
.t3 .bk.np.g1,.t3 .bk.np.g2{animation:none;opacity:1}
/* 5단계: 아니면 칸에 검정(끄기) */
.t5 .ez-tree .r-br{background:none}
.t5 .ez-tree .r-np{background:#ffe3ea}
.t5 .bk.np.g3{--fx:-58px;--fy:126px;animation:wIn 2.4s ease-in-out .9s both}
.t5 .wcur{animation:wCur7e 3.2s ease-in-out .2s both}
@keyframes wCur7e{0%{left:372px;top:352px}20%,28%{left:90px;top:320px}40%{left:256px;top:612px}80%,100%{left:314px;top:482px}}
.t6 .bk.np.g3{animation:none;opacity:1;transform:none}
.t5 .ez-tree .r-np~*{background:none}
/* 6단계: 업로드 → 포트 연결 → 완료 (5차시에 해 봤으니 빠르게) */
.t6 .ez-tree .ez-on{background:none}
.t6 .wcur{animation:wCur7f 2.6s ease-in-out .1s both}
@keyframes wCur7f{0%{left:314px;top:482px}25%,35%{left:52px;top:118px}60%{left:420px;top:215px}85%,100%{left:690px;top:340px}}
.t6 .ez-tb .up{animation:wPress .5s ease-in-out .8s both}
.t6 .wburst.b4{left:70px;top:132px;animation:wBurst .6s ease-out .8s both}
.t6 .wser{animation:wSer 2.6s ease both}
@keyframes wSer{0%,38%{opacity:0;transform:translateY(-14px)}45%,92%{opacity:1;transform:none}100%{opacity:0}}
.t6 .wser li.pk{animation:wRow .3s ease 1.5s both}
.t6 .wser .bt .ok{animation:wPress .5s ease-in-out 2.1s both}
.t6 .wburst.b5{left:705px;top:352px;animation:wBurst .6s ease-out 2.1s both}
.t6 .wprog{animation:wProg 2.4s ease 2.7s both}
@keyframes wProg{0%{opacity:0}10%,88%{opacity:1}100%{opacity:0}}
.t6 .wprog .bar i{animation:wFill 1.8s cubic-bezier(.4,0,.2,1) 2.9s both}
.t6 .wok{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) 5.1s both}
/* 7단계: 손으로 가리면 켜지고, 떼면 꺼진다 (반복) */
.t7 .wcur,.t7 .wok,.t7 .wprog,.t7 .wser{opacity:0!important;animation:none!important}
.t7 .wdesk{transform:scale(.6);z-index:6;transition-delay:0s}
.t7 .whand{animation:wCover 3.2s ease-in-out .6s infinite}
@keyframes wCover{0%,8%{opacity:0;transform:translateY(-170px)}25%,62%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(-170px)}}
.t7 .wdesk .wmod .on{animation:wLit 3.2s steps(1) .6s infinite}
@keyframes wLit{0%,24%{opacity:0}25%,62%{opacity:1}63%,100%{opacity:0}}
.t7 .wval{opacity:1}
.t7 .wval .v-dark{animation:wLit 3.2s steps(1) .6s infinite}
.t7 .wval .v-bright{animation:wUnlit 3.2s steps(1) .6s infinite}
@keyframes wUnlit{0%,24%{opacity:1}25%,62%{opacity:0}63%,100%{opacity:1}}
.v7 .wval span{display:block}
.v7 .wval .v-dark{position:absolute;left:14px;top:8px}
/* ! 거꾸로 켜질 때 */
.t8 .wdesk{transform:scale(.36);z-index:auto}
.t8 .whand,.t8 .wval{opacity:0;animation:none}
.t8 .cmp .op{animation:wRing 1s ease-in-out infinite}
@keyframes wRing{50%{box-shadow:0 0 0 6px rgba(232,69,44,.75);background:#E8452C}}
.t8 .wfix7{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) .5s both}
.wfix7{position:absolute;left:250px;top:400px;width:600px;font:900 26px/1.45 var(--ff);color:var(--ink);background:var(--hl,#FFD43B);border:3px solid var(--ink);border-radius:12px;padding:14px 20px;opacity:0;z-index:8}
.t8 .ez-tb,.t8 .ez-tree{filter:grayscale(.3) brightness(.92)}
.t7 .wez{opacity:.35;transition:opacity .5s}
.t8 .wez{opacity:1}