/* ================================================================
   따라 하기: 보드 연결 → EZ·ON 블록 → 업로드 → 포트 고르기 → 완료
   무대 1080×780. 단계는 .wstage 의 s1~s7 클래스(누적)로 바뀐다
   EZ·ON 색·글자는 2026-10-24 ezon.ai/sandbox 에서 잰 값
   ================================================================ */
.x-walk{display:grid;grid-template-columns:560px 1fr;gap:30px;align-items:start}
.x-walk .wl{display:flex;flex-direction:column}
.wsteps{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.wsteps li{display:flex;gap:14px;align-items:flex-start;font-size:29px;font-weight:900;line-height:1.3;padding:10px 14px;border-radius:10px;border:2.5px solid transparent;transition:background .3s,border-color .3s,transform .3s}
.wsteps li b{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:24px}
.wsteps li em{font-style:normal;color:var(--coral)}
.wsteps li.cur{background:#fff;border-color:var(--ink);box-shadow:5px 5px 0 var(--ink);transform:translateX(6px)}
.wsteps li.cur b{background:var(--coral);border-color:var(--coral);color:#fff}
.wsteps li.done b{background:var(--ink);color:#fff}
.wsteps li.trouble{margin-top:6px;border:2.5px dashed var(--purple);font-size:25px}
.wsteps li.trouble b{border-color:var(--purple);color:var(--purple)}
.wplay{position:absolute;right:0;top:-14px;z-index:10;font-size:20px;font-weight:900;padding:8px 18px;border-radius:99px;border:2.5px solid var(--ink);background:#fff}
.wplay.on{background:var(--ink);color:#fff}

.wstage{position:relative;width:1080px;height:780px;margin-top:-30px}
.wstage img{display:block}

/* ---------- 책상: 보드 · 모듈 · 노트북 ---------- */
.wdesk{position:absolute;left:0;top:0;width:1080px;height:780px;transform-origin:100% 100%;transition:transform .8s cubic-bezier(.6,.05,.3,1)}
.wdesk .wb{position:absolute;left:250px;top:150px;width:600px;mix-blend-mode:multiply}
.wdesk .wport{position:absolute;font:900 22px/1 var(--ff);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:6px;padding:3px 6px;transform:translate(-50%,-50%)}
.wdesk .wport.d0{left:382px;top:180px}
.wdesk .wport.usb{left:215px;top:530px;background:var(--ink);color:#fff}
.wdesk .wport.hot{animation:wPulse 1s ease-in-out infinite}
@keyframes wPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,69,44,.6)}50%{box-shadow:0 0 0 14px rgba(232,69,44,0)}}
.wdesk .wmod{position:absolute;left:830px;top:0;width:230px;mix-blend-mode:multiply}
.wdesk .wmod img{position:absolute;inset:0;width:100%;transition:opacity .2s}
.wdesk .wmod .on{opacity:0}
.wdesk .wlap{position:absolute;left:-10px;top:500px;width:280px;mix-blend-mode:multiply}
.wdesk svg.wcab{position:absolute;inset:0;width:1080px;height:780px;overflow:visible}
.wcab path{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--L,1400);stroke-dashoffset:var(--L,1400)}
.wcab path.mod{stroke:#E8452C}
.wdesk .wplug{position:absolute;width:130px;mix-blend-mode:multiply;opacity:0}
.wdesk .wplug.mp{left:317px;top:190px;transform:rotate(180deg)}
.wdesk .wplug.up{left:178px;top:375px}
.wpop{position:absolute;font:700 40px/1 var(--hand,var(--ff));color:var(--purple);opacity:0;transform:scale(.4) rotate(-8deg)}
.wpop.p1{left:420px;top:60px}
.wpop.p2{left:150px;top:300px}

/* 1단계: 모듈 선이 그려지고 플러그가 D0에 딸깍 */
.s1 .wcab path.mod{transition:stroke-dashoffset 1.1s ease-in-out .2s;stroke-dashoffset:0}
.s1 .wplug.mp{animation:wPlugDown 1.1s cubic-bezier(.3,1.4,.5,1) .9s both}
@keyframes wPlugDown{from{opacity:1;transform:rotate(180deg) translateY(110px)}to{opacity:1;transform:rotate(180deg) translateY(0)}}
.s1 .wpop.p1{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) 1.9s both}
@keyframes wPop{to{opacity:1;transform:none}}
/* 2단계: USB-C가 왼쪽에서 들어간다 */
.s2 .wcab path.usb{transition:stroke-dashoffset 1s ease-in-out .2s;stroke-dashoffset:0}
.s2 .wplug.up{animation:wPlugRight 1s cubic-bezier(.3,1.4,.5,1) .8s both}
@keyframes wPlugRight{from{opacity:1;transform:translateX(-110px)}to{opacity:1;transform:none}}
.s2 .wpop.p2{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) 1.7s both}
.s2 .wpop.p1{opacity:0;animation:none}
/* 3단계부터: 책상은 오른쪽 아래로 작게 */
.s3 .wdesk{transform:scale(.36)}
.s3 .wpop,.s3 .wport{opacity:0!important;animation:none!important}
/* 이미 지난 단계는 끝난 모습으로 바로 */
.s2 .wcab path.mod,.s3 .wcab path{transition:none;stroke-dashoffset:0}
.s2 .wplug.mp,.s3 .wplug{animation:none;opacity:1}
.s2 .wplug.mp{transform:rotate(180deg)}

/* ---------- 화면: EZ·ON 체험하기 ---------- */
.wez{position:absolute;left:0;top:0;width:1000px;height:600px;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;font-family:"Pretendard",var(--ff);opacity:0;transform:translateY(30px) scale(.96);transition:opacity .5s .35s,transform .6s cubic-bezier(.2,1.2,.4,1) .35s;pointer-events:none}
.s3 .wez{opacity:1;transform:none}
.ez-h{display:flex;align-items:center;gap:12px;height:54px;padding:0 18px;border-bottom:1px solid #e5e5e5;font-size:15px;color:#0a0a0a}
.ez-logo{font:900 26px/1 "Pretendard",sans-serif;letter-spacing:-.02em;color:#111;margin-right:6px}
.ez-pill{font-size:11px;font-weight:700;color:#fff;background:#8fb0ea;border-radius:4px;padding:2px 6px}
.ez-usb{font-size:10px;font-weight:600;color:#62748e;background:#ede8e2;border:1px solid #cad5e2;border-radius:99px;padding:2px 9px;transition:all .3s}
.s6 .ez-usb{color:#0f7a4f;background:#e3f6ec;border-color:#9dd8b9}
.ez-t{display:flex;gap:26px;height:44px;align-items:center;padding:0 22px;border-bottom:1px solid #e5e5e5;font-size:15px;font-weight:600;color:#333}
.ez-t .on{color:#2563eb;box-shadow:inset 0 -3px 0 #2563eb;padding:12px 0}
.ez-tb{display:flex;gap:8px;padding:10px 14px;background:#f8fafc;border-bottom:1px solid #e5e5e5}
.ez-tb span{font-size:14px;font-weight:500;padding:8px 13px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;color:#0a0a0a;white-space:nowrap}
.ez-tb .up{background:#5b8def;border-color:#5b8def;color:#fafafa;position:relative;transition:transform .15s,box-shadow .3s}
.ez-b{position:absolute;left:0;right:0;top:152px;bottom:0;display:grid;grid-template-columns:200px 1fr}
.ez-tree{border-right:1px solid #e5e5e5;padding:14px 0 0 18px;font-size:14px;font-weight:600;color:#222;line-height:2}
.ez-tree i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:8px;vertical-align:1px}
.ez-tree .ez-sub{padding-left:16px;font-weight:500}
.ez-tree .ez-pick{background:#eef2f7;border-radius:6px;margin-right:12px;transition:background .3s}
.ez-ws{position:relative;background:#fff radial-gradient(#d4d9e1 1.2px,transparent 1.3px) 0 0/22px 22px}

/* 블록 (Blockly 모양을 단순하게) */
.wez .bk{position:absolute;color:#fff;font-size:15px;font-weight:700;white-space:nowrap;border-radius:6px;padding:9px 12px;display:flex;align-items:center;gap:6px}
.wez .bk .dd{border:1.5px solid rgba(255,255,255,.55);border-radius:5px;padding:1px 6px;font-size:13px}
.wez .bk .num{background:#fff;color:#575e75;border-radius:99px;padding:0 9px;font-size:13px}
.wez .bk .dot{width:20px;height:20px;border-radius:50%;background:#ff0000;border:2px solid #fff}
.wez .bk.ez{background:#7d65c7;left:30px;width:300px;height:38px}
.wez .bk.ez.a{top:26px}.wez .bk.ez.b{top:150px}
.wez .slotb{position:absolute;left:30px;width:22px;background:#7d65c7}
.wez .slotb.a{top:62px;height:60px}.wez .slotb.b{top:186px;height:60px}
.wez .bk.ez-end{background:#7d65c7;left:30px;width:300px;height:22px;padding:0}
.wez .bk.ez-end.a{top:120px}.wez .bk.ez-end.b{top:244px}
.wez .bk.np{background:#ff5e84;box-shadow:0 0 0 2px #e04970 inset}
/* 꺼낼 블록: 처음엔 블록 상자(왼쪽 위)에 있다가 틀 안으로 날아간다 */
.wez .bk.np.f1{left:16px;top:310px;opacity:0}
.wez .bk.np.f2{left:16px;top:370px;opacity:0}
.s3 .wez .bk.np.f1{animation:wFly1 2.6s ease-in-out .9s both}
.s3 .wez .bk.np.f2{animation:wFly2 2.6s ease-in-out 2.1s both}
@keyframes wFly1{0%{opacity:0;transform:none}15%{opacity:1;transform:none}60%,100%{opacity:1;transform:translate(36px,-245px)}}
@keyframes wFly2{0%{opacity:0;transform:none}15%{opacity:1;transform:none}60%,100%{opacity:1;transform:translate(36px,-181px)}}
.s4 .wez .bk.np.f1{animation:none;opacity:1;transform:translate(36px,-245px)}
.s4 .wez .bk.np.f2{animation:none;opacity:1;transform:translate(36px,-181px)}
.s3 .ez-tree .ez-pick{background:#ffe3ea}

/* 커서 */
.wcur{position:absolute;width:64px;left:520px;top:520px;opacity:0;z-index:9;pointer-events:none;mix-blend-mode:multiply;transition:left .9s cubic-bezier(.5,0,.3,1),top .9s cubic-bezier(.5,0,.3,1),opacity .3s}
.wcur img{width:100%}
.wburst{position:absolute;width:110px;margin:-55px 0 0 -55px;opacity:0;z-index:8;pointer-events:none;mix-blend-mode:multiply}
.s3 .wcur{opacity:1;animation:wCur3 4.6s ease-in-out .3s both}
@keyframes wCur3{0%{left:520px;top:520px}12%{left:90px;top:300px}24%{left:90px;top:300px}30%{left:250px;top:470px}45%{left:290px;top:225px}55%{left:250px;top:530px}72%{left:290px;top:350px}100%{left:290px;top:350px}}
.s4 .wcur{animation:none;left:52px;top:118px;transition-duration:.8s}
.s4 .ez-tb .up{animation:wPress .5s ease-in-out 1s both}
@keyframes wPress{50%{transform:scale(.9);box-shadow:0 0 0 10px rgba(91,141,239,.35)}to{transform:none;box-shadow:0 0 0 0 rgba(91,141,239,0)}}
.s4 .wburst.b4{left:70px;top:132px;animation:wBurst .6s ease-out 1s both}
@keyframes wBurst{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.25)}}

/* 크롬 포트 고르기 창 */
.wser{position:absolute;left:250px;top:110px;width:520px;background:#fff;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 0 1px #d0d0d0;font-family:"Malgun Gothic","Pretendard",sans-serif;color:#202124;opacity:0;transform:translateY(-14px);transition:opacity .3s,transform .4s;z-index:7}
.s5 .wser{opacity:1;transform:none}
.s6 .wser{opacity:0;transition-delay:0s}
.wser h4{font-size:16px;font-weight:600;padding:20px 22px 12px}
.wser ul{margin:0 22px;border:1px solid #dadce0;border-radius:6px;height:150px}
.wser li{font-size:14px;padding:10px 12px;border-bottom:1px solid #eee;transition:background .3s}
.wser li.pk{color:#202124}
.s5 .wser li.pk{animation:wRow .4s ease 1.6s both}
@keyframes wRow{to{background:#d3e3fd}}
.wser .bt{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px 18px}
.wser .bt span{font-size:14px;font-weight:600;padding:8px 18px;border-radius:99px;border:1px solid #c4c7c5;color:#0b57d0}
.wser .bt .ok{background:#0b57d0;border-color:#0b57d0;color:#fff;transition:filter .3s}
.s5 .wser .bt .ok{animation:wPress .5s ease-in-out 2.9s both}
.s5 .wcur{animation:wCur5 3.4s ease-in-out .3s both}
@keyframes wCur5{0%{left:52px;top:118px}35%{left:420px;top:215px}55%{left:420px;top:215px}85%,100%{left:690px;top:340px}}
.s5 .wburst.b5{left:705px;top:352px;animation:wBurst .6s ease-out 2.9s both}

/* 업로드 진행 · 완료 */
.wprog{position:absolute;left:280px;top:260px;width:460px;background:#fff;border:1px solid #d6d6d6;border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,.2);padding:18px 22px;font-size:16px;font-weight:600;color:#111827;opacity:0;z-index:7;transition:opacity .3s}
.wprog .bar{height:12px;border-radius:99px;background:#eef2f7;margin-top:12px;overflow:hidden}
.wprog .bar i{display:block;height:100%;width:0;background:#5b8def;border-radius:99px}
.wprog .done{display:none;color:#0f7a4f}
.s6 .wprog{opacity:1;animation:wHide .3s ease 3.4s both}
.s6 .wprog .bar i{animation:wFill 2.6s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes wFill{to{width:100%}}
@keyframes wHide{to{opacity:0}}
.wok{position:absolute;left:330px;top:250px;display:flex;align-items:center;gap:14px;font:900 34px/1.2 var(--ff);color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:16px 26px 16px 16px;opacity:0;transform:scale(.6);z-index:7}
.wok img{width:70px;mix-blend-mode:multiply}
.s6 .wok{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) 3.5s both}
.s6 .wcur{opacity:0}
/* 완료 뒤: 작은 책상 그림 속 LED가 빨갛게 깜빡 */
.s6 .wdesk .wmod .on{animation:wBlink 1s steps(1) 3.6s infinite}
@keyframes wBlink{0%{opacity:1}50%{opacity:0}}
.s6 .wdesk{transform:scale(.5);transition-delay:3.2s}

/* 막혔을 때: 진짜 "업로드 취소" 창 */
.wcan{position:absolute;left:240px;top:90px;width:512px;background:#fff;border:1px solid #6a7282;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:22px 24px 18px;font-family:"Pretendard",sans-serif;color:#111827;opacity:0;transform:translateY(-12px);transition:opacity .3s,transform .4s;z-index:8}
.wcan h4{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700}
.wcan h4 i{width:22px;height:22px;border-radius:50%;border:2px solid #dc2626;color:#dc2626;font:900 14px/18px sans-serif;text-align:center;font-style:normal}
.wcan p{font-size:14px;color:#374151;margin:10px 0 14px}
.wcan span{float:right;font-size:14px;font-weight:500;background:#171717;color:#fafafa;border-radius:8px;padding:8px 16px}
.wfix{position:absolute;left:240px;top:290px;width:512px;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}
.s7 .wcan{opacity:1;transform:none}
.s7 .wfix{animation:wPop .5s cubic-bezier(.3,1.8,.5,1) .7s both}
.s7 .wok,.s7 .wprog{opacity:0!important;animation:none!important}
.s7 .ez-b,.s7 .ez-tb{filter:grayscale(.3) brightness(.9)}

/* 효과 끔: 각 단계의 끝 모습만 */
body.lite .wstage *{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important;transition-delay:0s!important}
.s6 .wdesk{z-index:6}
.s6 .wdesk .wmod{filter:drop-shadow(0 0 0 transparent)}
.s7 .wdesk{z-index:auto}