/* ================================================================
   9차시 따라 하기: 스마트 현관등 (밝기 & 초음파 → LED)  무대 data-p="u" → u1~u8
   지난주 밝기불(A0 밝기, D0 LED)에 초음파(D1)를 더하고 "◇ & ◇"로 조건 두 개를 묶는다
   좌표: 무대 = 작업칸 + (130,152)  (이 장면은 블록 상자 칸을 130px로 줄인다)
   ================================================================ */
/* 이미 꽂아 둔 것: LED(D0) · USB · 밝기 센서(A0) */
.v9 .wcab path.mod,.v9 .wcab path.usb,.v9 .wcab path.sen{stroke-dashoffset:0;transition:none}
.v9 .wplug.mp,.v9 .wplug.up,.v9 .wplug.ap{opacity:1;animation:none}
.v9 .wport{animation:none}
.v9 .wcab path.sen{stroke:#1F4FD8}
.v9 .wcab path.usx{stroke:#E8452C}
.v9 .wplug.ap{left:317px;top:588px}
.v9 .wsen{position:absolute;left:560px;top:560px;width:220px;mix-blend-mode:multiply}
.v9 .wusx{position:absolute;left:470px;top:-40px;width:230px;mix-blend-mode:multiply}
.v9 .wplug.dp{left:405px;top:190px;transform:rotate(180deg);opacity:0}
.v9 .wport.d1{left:470px;top:180px}
.v9 .wport.a0{left:300px;top:650px}
.v9 .wpop.p9{left:520px;top:200px}
.v9 .whand,.v9 .whand2{position:absolute;width:230px;mix-blend-mode:multiply;opacity:0}
.v9 .whand{left:555px;top:505px}
.v9 .whand2{left:470px;top:-150px}
.v9 .wval{position:absolute;left:760px;top:330px;font:900 30px/1.35 var(--ff);color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:12px;padding:10px 16px;opacity:0;white-space:nowrap}
.v9 .wval b{color:var(--purple)}
.v9 .wval s{text-decoration:none;color:#E8452C}

/* 1단계: 초음파 선이 그려지고 플러그가 위에서 D1로 */
.u1 .wcab path.usx{transition:stroke-dashoffset 1.1s ease-in-out .2s;stroke-dashoffset:0}
.u1 .wplug.dp{animation:wPlugDown 1.1s cubic-bezier(.3,1.4,.5,1) .9s both}
.u1 .wport.d1{animation:wPulse 1s ease-in-out infinite}
.u1 .wpop.p9{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) 1.9s both}
.u2 .wcab path.usx{transition:none;stroke-dashoffset:0}
.u2 .wplug.dp{animation:none;opacity:1;transform:rotate(180deg)}
.u2 .wdesk{transform:scale(.36)}
.u2 .wpop,.u2 .wport{opacity:0!important;animation:none!important}
.u2 .wez{opacity:1;transform:none}

/* 화면 배치 */
.v9 .ez-b{grid-template-columns:130px 1fr}
.v9 .ez-tree{padding-left:12px;font-size:13px}
.v9 .wez .bk.ez.a{top:20px}.v9 .wez .slotb.a{top:56px;height:52px}.v9 .wez .bk.ez-end.a{top:106px}
.v9 .wez .bk.ez.b{top:140px}.v9 .wez .slotb.b{top:176px;height:200px}.v9 .wez .bk.ez-end.b{top:374px}
.v9 .wez .bk.np{opacity:0}
.v9 .wez .bk.np.g1{left:52px;top:60px}
.v9 .wez .bk.np.g2{left:74px;top:226px}
.v9 .wez .bk.np.g3{left:74px;top:314px}
.v9 .wez .bk.np.g3 .dot{background:#000}
.v9 .ifb{left:22px;width:840px}
.v9 .ifb .hole{width:690px}
.v9 .cmp{font-size:11.5px;height:28px;top:188px;padding:0 10px;gap:4px}
.v9 .cmp .num{font-size:12px}
.v9 .cmp.ca{left:84px}
.v9 .cmp.cb{left:438px}
.v9 .cmp.cb .br{background:#e67e22}
.v9 .cand{position:absolute;left:76px;top:184px;width:700px;height:36px;background:#3c8de7;box-shadow:inset 0 0 0 1.5px #2f73c2;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);opacity:0;color:#fff;font:900 16px/36px "Pretendard",sans-serif}
.v9 .cand .amp{position:absolute;left:336px;top:0;width:24px;text-align:center;border:1.5px solid rgba(255,255,255,.6);border-radius:5px;line-height:22px;margin-top:6px}
.v9 .cand .h2{position:absolute;left:366px;top:5px;width:320px;height:26px;background:#2f73c2;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
.v9 .ifb,.v9 .cmp.ca{opacity:0}

/* 2단계: 블럭 불러오기 → 지난주 밝기불이 그대로 */
.u2 .wcur{opacity:1;animation:wCur7b 1.2s ease-in-out .5s both}
.u2 .wburst.b7{left:340px;top:128px;animation:wBurst .6s ease-out 1.6s both}
.u2 .wez .bk.np.g1,.u2 .wez .bk.np.g2,.u2 .wez .bk.np.g3,.u2 .ifb,.u2 .cmp.ca{animation:wFade .4s ease 1.9s both}
@keyframes wFade{to{opacity:1}}
.u3 .wez .bk.np.g1,.u3 .wez .bk.np.g2,.u3 .wez .bk.np.g3,.u3 .ifb,.u3 .cmp.ca{animation:none;opacity:1}
/* 3단계: 제어 › ◇ & ◇ 를 조건 자리에, 밝기 조건은 왼쪽 칸으로 */
.u3 .ez-tree .r-ctl{background:#d8e8fb}
.u3 .cand{--fx:-60px;--fy:260px;animation:wIn 2.4s ease-in-out .9s both}
.u3 .cmp.ca{transition:transform .5s ease 3.1s}
.u3 .wcur{animation:wCur9c 3.2s ease-in-out .2s both}
@keyframes wCur9c{0%{left:330px;top:120px}20%,28%{left:70px;top:208px}40%{left:200px;top:600px}80%,100%{left:420px;top:352px}}
.u4 .cand{animation:none;opacity:1;transform:none}
/* 4단계: 입력 › 초음파 센서 < 20 을 오른쪽 칸에 */
.u4 .ez-tree .r-ctl{background:none}
.u4 .ez-tree .r-us{background:#fde3c8}
.u4 .cmp.cb{--fx:-330px;--fy:420px;animation:wIn 2.4s ease-in-out .9s both}
.u4 .wcur{animation:wCur9d 3.2s ease-in-out .2s both}
@keyframes wCur9d{0%{left:420px;top:352px}20%,28%{left:70px;top:264px}40%{left:200px;top:610px}80%,100%{left:640px;top:352px}}
.u4 .cmp.cb .num{animation:wNum .5s ease 3.2s both}
.u5 .cmp.cb{animation:none;opacity:1;transform:none}
/* 5단계: 업로드 → 연결 → 완료 */
.u5 .ez-tree .ez-on{background:none}
.u5 .wcur{animation:wCur9f 2.6s ease-in-out .1s both}
@keyframes wCur9f{0%{left:640px;top:352px}25%,35%{left:52px;top:118px}60%{left:420px;top:215px}85%,100%{left:690px;top:340px}}
.u5 .ez-tb .up{animation:wPress .5s ease-in-out .8s both}
.u5 .wburst.b4{left:70px;top:132px;animation:wBurst .6s ease-out .8s both}
.u5 .wser{animation:wSer 2.6s ease both}
.u5 .wser li.pk{animation:wRow .3s ease 1.5s both}
.u5 .wser .bt .ok{animation:wPress .5s ease-in-out 2.1s both}
.u5 .wburst.b5{left:705px;top:352px;animation:wBurst .6s ease-out 2.1s both}
.u5 .wprog{animation:wProg 2.4s ease 2.7s both}
.u5 .wprog .bar i{animation:wFill 1.8s cubic-bezier(.4,0,.2,1) 2.9s both}
.u5 .wok{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) 5.1s both}
/* 6단계: 가리기만 → 안 켜져요 / 7단계: 가리고 가까이 → 켜져요 */
.u6 .wcur,.u6 .wok,.u6 .wprog,.u6 .wser{opacity:0!important;animation:none!important}
.u6 .wdesk{transform:scale(.62);z-index:6;transition-delay:0s}
.u6 .wez{opacity:.3;transition:opacity .5s}
.u6 .whand{opacity:1;animation:wDown .8s ease-out .4s both}
@keyframes wDown{from{opacity:0;transform:translateY(-170px)}to{opacity:1;transform:none}}
.u6 .wval{opacity:1}
.u6 .wval .v7on{display:none}
.u7 .wval .v6off{display:none}
.u7 .wval .v7on{display:block}
.u7 .whand{animation:none;opacity:1}
.u7 .whand2{animation:wNear 1s ease-out .3s both}
@keyframes wNear{from{opacity:0;transform:translateY(-120px)}to{opacity:1;transform:none}}
.u7 .wdesk .wmod .on{animation:wFade .2s ease 1.1s both}
/* ! 안 켜질 때 */
.u8 .wdesk{transform:scale(.36);z-index:auto}
.u8 .wez{opacity:1}
.u8 .whand,.u8 .whand2,.u8 .wval{opacity:0;animation:none}
.u8 .cand .amp{animation:wRing 1s ease-in-out infinite}
.u8 .wfix9{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) .5s both}
.wfix9{position:absolute;left:200px;top:400px;width:640px;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}
.u8 .ez-tb,.u8 .ez-tree{filter:grayscale(.3) brightness(.92)}