/* ===== 모션 장면 공통 ===== */
.mv{position:relative;flex:1;min-height:0;border-radius:1.4cqw;background:#f6f3ee;overflow:hidden;font-size:1.4cqw;color:#14161b}
.mv b{font-weight:800}
.mv small{display:block;font-size:1.05cqw;color:#6b7280;font-weight:600}
@keyframes mvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6cqw)}}
@keyframes mvPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes mvFade{from{opacity:0;transform:translateY(1cqw)}to{opacity:1;transform:none}}
@keyframes mvBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* 일반 챗 vs 에이전트 */
.mv-chat{display:flex;gap:1.6cqw;padding:1.6cqw;background:transparent}
.mv-chat .pane{flex:1;position:relative;background:#f3f5f8;border-radius:1.2cqw;padding:1.4cqw}
.mv-chat .pane.on{background:var(--c2)}
.mv-chat .ttl{font-weight:900;font-size:1.7cqw}
.mv-chat .desk{position:absolute;left:1.6cqw;bottom:2cqw;font-size:3.2cqw;text-align:center}
.mv-chat .glass{position:absolute;left:44%;top:22%;bottom:12%;width:.6cqw;background:linear-gradient(#cfe3ff,#9ec1ff);border-radius:99px;box-shadow:0 0 1.2cqw #9ec1ff}
.mv-chat .pane:not(.on) .bot{position:absolute;right:1.6cqw;bottom:2cqw;font-size:4cqw;text-align:center}
.mv-chat .bub{position:absolute;right:10cqw;bottom:6cqw;font-size:2.6cqw;animation:mvBounce 2.4s ease-in-out infinite}
@keyframes mvBounce{0%{transform:translateX(0)}45%{transform:translateX(-11cqw)}55%{transform:translateX(-10cqw)}100%{transform:translateX(0)}}
.mv-chat .no{position:absolute;left:39%;top:14%;color:#e5484d;font-weight:900;font-size:1.2cqw}
.mv-chat .area{position:absolute;inset:4.4cqw 1.4cqw 4cqw;border:.25cqw dashed var(--c);border-radius:1cqw}
.mv-chat .area .lb{position:absolute;top:-1.1cqw;left:1cqw;background:var(--c2);padding:0 .5cqw;font-size:1.05cqw;font-weight:800;color:var(--c)}
.mv-chat .fold{position:absolute;font-size:3.6cqw;bottom:1cqw}.mv-chat .f1{right:2cqw}.mv-chat .f2{right:7cqw}
.mv-chat .file{position:absolute;left:2cqw;top:2cqw;font-size:2.4cqw;animation:mvFile 3s ease-in-out infinite}
.mv-chat .file.b{top:5cqw}
@keyframes mvFile{0%{transform:translate(0,0);opacity:1}70%{transform:translate(18cqw,6cqw);opacity:1}100%{transform:translate(18cqw,6cqw);opacity:0}}
.mv-chat .bot.in{position:absolute;left:9cqw;bottom:.6cqw;font-size:3.6cqw;animation:mvFloat 1.6s ease-in-out infinite}
.mv-chat .cap{position:absolute;left:1.4cqw;right:1.4cqw;bottom:1cqw;text-align:center;font-weight:800;color:var(--c);font-size:1.25cqw}

/* 작업 범위 */
.mv-scope{padding:2cqw}
.mv-scope .city{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:.6cqw;height:62%}
.mv-scope .blk{background:#e5e1d8;border-radius:.6cqw;display:grid;place-items:center;font-weight:900;font-size:1.25cqw;color:#8a8577}
.mv-scope .worker{position:absolute;font-size:3.4cqw}
.mv-scope .sweep{top:10%;left:0;animation:mvSweep 5s linear infinite}
@keyframes mvSweep{0%{left:0;top:5%}24%{left:88%;top:5%}25%{left:88%;top:55%}49%{left:0;top:55%}50%{left:0;top:5%}74%{left:88%;top:5%}75%{left:88%;top:55%}100%{left:0;top:55%}}
.mv-scope > .st{position:absolute;left:2cqw;right:2cqw;top:2cqw;height:62%;pointer-events:none}
.mv-scope .sel{position:absolute;left:50%;width:50%;top:0;height:46%;border:.35cqw solid var(--c);border-radius:.8cqw;background:color-mix(in srgb,var(--c) 22%,transparent)}
.mv-scope .stay{left:62%;top:6%;animation:mvFloat 1.4s ease-in-out infinite}
.mv-scope > .st:not(.off) ~ .city .sweep, .mv-scope:has(> .st:not(.off)) .sweep{display:none}
.mv-scope .legend{display:flex;flex-direction:column;gap:.6cqw;margin-top:1.4cqw;font-weight:800;font-size:1.35cqw}
.mv-scope .legend .x{color:#b45309}.mv-scope .legend .o{color:var(--c)}

/* 토큰 */
.mv-token{padding:2cqw;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto 1fr;column-gap:2cqw}
.mv-token .sent{grid-column:1;display:flex;gap:.6cqw;flex-wrap:wrap}
.mv-token .chip{background:var(--c2);color:var(--c);font-weight:900;border-radius:.6cqw;padding:.6cqw 1cqw;animation:mvDrop 3.5s ease-in infinite}
@keyframes mvDrop{0%,20%{transform:translateY(0);opacity:1}70%{transform:translateY(13cqw) scale(.7);opacity:.9}100%{transform:translateY(13cqw) scale(.7);opacity:0}}
.mv-token .lbl{grid-column:1;margin:1cqw 0;font-weight:700}
.mv-token .basket{grid-column:1;position:relative;align-self:end;height:9cqw;border:.3cqw solid #14161b;border-top:0;border-radius:0 0 2cqw 2cqw;overflow:hidden;display:grid;place-items:center;font-weight:900}
.mv-token .basket .fill{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--c) 35%,transparent);animation:mvFill 7s ease-in-out infinite}
@keyframes mvFill{0%{height:5%}80%{height:92%}88%{height:45%}100%{height:50%}}
.mv-token .basket span{position:relative}
.mv-token .side{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;justify-content:center;gap:1.2cqw;font-weight:800}
.mv-token .press{background:#fff;border-radius:1cqw;padding:1.2cqw}
.mv-token .hp{background:#fff;border-radius:1cqw;padding:1.2cqw;color:#e5484d}

/* Git */
.mv-git{padding:2.4cqw;display:flex;flex-direction:column;gap:2cqw}
.mv-git .track{position:relative;height:3.2cqw;background:#e5e1d8;border-radius:99px;margin-top:3cqw}
.mv-git .bar{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--c);animation:mvBar 5s ease-out infinite}
@keyframes mvBar{0%{width:0}80%{width:80%}100%{width:80%}}
.mv-git .flag{position:absolute;top:-3cqw;font-size:2.6cqw;transform:translateX(-50%);animation:mvFade .4s both}
.mv-git .pct{position:absolute;right:0;top:3.8cqw;font-weight:800;color:#6b7280;font-size:1.2cqw}
.mv-git .row{display:flex;gap:1.6cqw;margin-top:1.6cqw}
.mv-git .card{flex:1;background:#fff;border-radius:1.2cqw;padding:1.4cqw;font-size:1.4cqw}
.mv-git .bad b{color:#e5484d}.mv-git .good b{color:var(--c)}
.mv-git .boom{position:absolute;left:calc(2.4cqw + 80% * .93);top:3.4cqw;font-size:4cqw;animation:mvPulse .6s ease-in-out infinite}

/* GitHub */
.mv-gh{display:flex;align-items:center;gap:1.4cqw;padding:2cqw}
.mv-gh .pc,.mv-gh .cloud{flex:1;background:#fff;border-radius:1.4cqw;padding:1.4cqw;text-align:center;font-size:4cqw}
.mv-gh .pc b,.mv-gh .cloud b{display:block;font-size:1.5cqw;margin:.4cqw 0}
.mv-gh .docs{display:flex;flex-direction:column;gap:.4cqw;font-size:1.2cqw}
.mv-gh .docs span{background:#f3f5f8;border-radius:.5cqw;padding:.3cqw}
.mv-gh .pipe{position:relative;width:18%;height:5cqw;display:grid;place-items:center}
.mv-gh .pipe em{font-style:normal;font-weight:900;color:var(--c);font-size:1.5cqw;margin-top:4cqw}
.mv-gh .pk{position:absolute;left:0;top:.6cqw;font-size:2.2cqw;animation:mvPush 2s linear infinite}
@keyframes mvPush{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:80%;opacity:0}}
.mv-gh .team{display:flex;justify-content:center;gap:1cqw;font-size:2.6cqw}
.mv-gh .team span{animation:mvFloat 1.6s ease-in-out infinite}

/* 와이파이 · 배포 */
.mv-wifi{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;padding:2cqw;gap:1cqw}
.mv-wifi .phone,.mv-wifi .srv{background:#fff;border-radius:1.4cqw;padding:1.4cqw;text-align:center;font-size:4.4cqw;position:relative}
.mv-wifi .phone b,.mv-wifi .srv b{display:block;font-size:1.5cqw}
.mv-wifi .sig{position:absolute;top:.6cqw;right:.8cqw;font-size:2cqw}
.mv-wifi .sig.off{background:#fff}
.mv-wifi .road{position:relative;height:.5cqw;background:#cfd5df;border-radius:99px}
.mv-wifi .pk{position:absolute;top:-1cqw;font-size:1.8cqw;color:var(--c);animation:mvGo 1.8s linear infinite}
.mv-wifi .pk.back{animation-name:mvBack;color:#139a63}
@keyframes mvGo{from{left:0}to{left:95%}}@keyframes mvBack{from{left:95%}to{left:0}}
.mv-wifi .cut{position:absolute;left:44%;top:-2.6cqw;font-size:4cqw;font-weight:900;color:#e5484d}
.mv-wifi:has(.cut:not(.off)) .pk{display:none}
.mv-wifi .msg{grid-column:1/4;text-align:center;font-weight:700;font-size:1.5cqw;margin-top:1.4cqw}

.mv-deploy{display:flex;flex-direction:column;justify-content:center;gap:2.4cqw;padding:2cqw}
.mv-deploy .lane{display:flex;align-items:center;gap:1cqw}
.mv-deploy .nd{flex:1;background:#fff;border-radius:1.2cqw;padding:1.2cqw;text-align:center;font-size:2.8cqw;line-height:1.2}
.mv-deploy .nd img{width:2.6cqw;height:2.6cqw;display:inline-block}
.mv-deploy .nd b{display:block;font-size:1.4cqw}
.mv-deploy .fail{background:#ffeceb}.mv-deploy .fail small{color:#e5484d}
.mv-deploy .hot{background:var(--c2)}.mv-deploy .ok{background:#e4f6ee}.mv-deploy .ok small{color:#139a63;font-size:1.4cqw}
.mv-deploy .ar{font-size:2cqw;font-weight:900;color:var(--c);animation:mvBlink 1.2s infinite}

/* MCP */
.mv-mcp{display:flex;align-items:center;gap:1.4cqw;padding:2cqw}
.mv-mcp .box{width:22%;background:#fff;border-radius:1.4cqw;padding:1.6cqw;text-align:center;font-size:4cqw}
.mv-mcp .box b{display:block;font-size:1.7cqw}
.mv-mcp .box.m{background:var(--c2)}
.mv-mcp .tun{flex:1;position:relative;height:12cqw;background:linear-gradient(#e9e4da,#dcd5c8);border-radius:6cqw;box-shadow:inset 0 .6cqw 1cqw rgba(0,0,0,.12)}
.mv-mcp .lab{position:absolute;top:-2.4cqw;left:0;right:0;text-align:center;font-weight:900}
.mv-mcp .in,.mv-mcp .out{position:absolute;white-space:nowrap;font-weight:800;font-size:1.3cqw;background:#fff;border-radius:99px;padding:.3cqw .8cqw;animation:mvIn 3.2s linear infinite}
.mv-mcp .in{top:1.6cqw;color:#139a63}
.mv-mcp .out{bottom:1.6cqw;color:var(--c);animation-name:mvOut}
@keyframes mvIn{from{right:2%;opacity:0}10%{opacity:1}90%{opacity:1}to{right:72%;opacity:0}}
@keyframes mvOut{from{left:2%;opacity:0}10%{opacity:1}90%{opacity:1}to{left:68%;opacity:0}}

/* 스킬 */
.mv-skill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2cqw;padding:2cqw}
.mv-skill .btn{background:#14161b;color:#ffd166;font-family:ui-monospace,Consolas,monospace;font-weight:900;font-size:2.6cqw;border-radius:99px;padding:1cqw 2.6cqw;animation:mvPulse 3.4s ease-in-out infinite}
.mv-skill .wf{display:flex;align-items:center;gap:.8cqw}
.mv-skill .stp{background:#fff;border-radius:1cqw;padding:1.2cqw 1.4cqw;font-weight:800;text-align:center;animation:mvLight 3.4s infinite}
@keyframes mvLight{0%,15%{background:#fff;color:#14161b}25%,80%{background:var(--c);color:#fff}100%{background:#fff;color:#14161b}}
.mv-skill .stp small{color:inherit;opacity:.75}
.mv-skill .ar{font-weight:900;color:var(--c)}
.mv-skill .cap{font-weight:700;color:#5d6474}

/* 크롤링 */
.mv-crawl{display:flex;align-items:center;gap:1.2cqw;padding:2cqw}
.mv-crawl .shop{position:relative;flex:1;background:#fff;border-radius:1.2cqw;padding:1.2cqw;display:flex;flex-direction:column;gap:.7cqw}
.mv-crawl .shop .bar{background:#f3f5f8;border-radius:99px;padding:.5cqw 1cqw;font-weight:700}
.mv-crawl .item{display:flex;justify-content:space-between;background:#faf7f2;border-radius:.6cqw;padding:.7cqw 1cqw;animation:mvHl 3.6s infinite}
@keyframes mvHl{0%,10%{box-shadow:none}20%,35%{box-shadow:0 0 0 .3cqw var(--c)}45%,100%{box-shadow:none}}
.mv-crawl .cursor{position:absolute;right:2cqw;top:4cqw;font-size:2.4cqw;animation:mvCur 3.6s ease-in-out infinite}
@keyframes mvCur{0%{top:4cqw}33%{top:7.6cqw}66%{top:11.2cqw}100%{top:4cqw}}
.mv-crawl .arrow{font-weight:900;color:var(--c);font-size:1.4cqw;width:16%;text-align:center}
.mv-crawl .sheet{flex:1;background:#fff;border-radius:1.2cqw;padding:1cqw;font-size:1.25cqw}
.mv-crawl .hd,.mv-crawl .rw{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.4cqw;padding:.6cqw .4cqw;border-bottom:1px solid #eceef2}
.mv-crawl .hd{font-weight:900;color:#139a63}
.mv-crawl .rw{animation:mvFade 1s both}

/* 검정 테마 맞춤 */
.mv{background:#0d0d0f;color:#f4f4f5}.mv-crawl .shop,.mv-crawl .sheet{background:#141416}.mv-crawl .item{background:#1b1b1e}.mv-crawl .shop .bar{background:#1b1b1e}.mv-crawl .hd,.mv-crawl .rw{border-color:#26262a}
