/* ===== WERP 움직임 (2026-10-08 · 2판: 다채롭게 — html.motion.mx) — html.motion 일 때만, 윈도우 "애니메이션 효과 끄기"(움직임 줄이기) PC 에선 자동으로 꺼짐 ===== */
@media all{
/* 버튼: 올리면 살짝 떠오르고, 누르면 꾹 */
html.motion .btn-primary,html.motion .ab,html.motion .wk-new,html.motion .wk-sec,html.motion .mini,html.motion .wk-seg button,html.motion .wk-pipe button,html.motion .wk-ftbtn,html.motion .tb-todo-btn,html.motion .topbar .btn,html.motion #w-cf .bt button{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .2s ease,color .2s ease;position:relative;overflow:hidden}
html.motion .btn-primary:hover,html.motion .wk-new:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(63,143,87,.30)}
html.motion .ab:hover,html.motion .wk-sec:hover,html.motion .mini:hover,html.motion .tb-todo-btn:hover,html.motion .topbar .btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(40,70,60,.10)}
html.motion .btn-primary:active,html.motion .ab:active,html.motion .wk-new:active,html.motion .wk-sec:active,html.motion .mini:active,html.motion .wk-seg button:active,html.motion .wk-pipe button:active,html.motion #w-cf .bt button:active{transform:scale(.96);transition-duration:.06s}
/* 숫자 카드 · 목록 줄 · 사이드바 */
html.motion .wk-kpi,html.motion .kpi,html.motion .stat-card{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease}
html.motion .wk-kpi:hover,html.motion .kpi:hover,html.motion .stat-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(40,70,60,.13)}
html.motion .wk-row{transition:background-color .18s ease}
html.motion .wk-row .wk-go{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
html.motion .wk-row:hover .wk-go{transform:translateX(4px)}
html.motion .app-sidebar .nav-link{transition:background-color .2s ease,color .2s ease,transform .18s ease}
/* 누른 자리에서 물결 */
.wm-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:wmRip .55s ease-out forwards}
.ab .wm-rip,.wk-sec .wm-rip,.mini .wm-rip,.wk-seg .wm-rip,.wk-pipe .wm-rip,.tb-todo-btn .wm-rip,.topbar .btn .wm-rip{background:rgba(63,143,87,.20)}
@keyframes wmRip{to{transform:scale(2.6);opacity:0}}
/* 화면에 들어올 때 — 배너 → 숫자 카드 → 단계 → 도구줄 → 목록 줄이 차례로 */
@keyframes wmUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.motion .wm-enter .hero{animation:wmUp .55s cubic-bezier(.2,.8,.2,1) both}
html.motion .wm-enter .wk-kpi{animation:wmUp .5s cubic-bezier(.2,.8,.2,1) both}
html.motion .wm-enter .wk-kpi:nth-child(1){animation-delay:.05s}html.motion .wm-enter .wk-kpi:nth-child(2){animation-delay:.1s}html.motion .wm-enter .wk-kpi:nth-child(3){animation-delay:.15s}html.motion .wm-enter .wk-kpi:nth-child(4){animation-delay:.2s}
html.motion .wm-enter .wk-pipe{animation:wmUp .5s .22s cubic-bezier(.2,.8,.2,1) both}
html.motion .wm-enter .wk-tools{animation:wmUp .5s .26s cubic-bezier(.2,.8,.2,1) both}
html.motion .wm-enter .wk-list{animation:wmUp .5s .3s cubic-bezier(.2,.8,.2,1) both}
html.motion .wm-enter .wk-list .wk-row{animation:wmUp .42s cubic-bezier(.2,.8,.2,1) both}
html.motion .wm-enter .wk-list .wk-row:nth-child(2){animation-delay:.34s}html.motion .wm-enter .wk-list .wk-row:nth-child(3){animation-delay:.37s}html.motion .wm-enter .wk-list .wk-row:nth-child(4){animation-delay:.4s}html.motion .wm-enter .wk-list .wk-row:nth-child(5){animation-delay:.43s}html.motion .wm-enter .wk-list .wk-row:nth-child(6){animation-delay:.46s}html.motion .wm-enter .wk-list .wk-row:nth-child(7){animation-delay:.49s}html.motion .wm-enter .wk-list .wk-row:nth-child(8){animation-delay:.52s}html.motion .wm-enter .wk-list .wk-row:nth-child(9){animation-delay:.55s}html.motion .wm-enter .wk-list .wk-row:nth-child(n+10){animation-delay:.58s}
html.motion .wm-enter > .card,html.motion .wm-enter .kpi,html.motion .wm-enter .stat-card{animation:wmUp .5s .12s cubic-bezier(.2,.8,.2,1) both}
/* 오른쪽 패널 — 미끄러져 들어오고 안의 칸들이 차례로 */
@keyframes wmDr{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}
@keyframes wmFade{from{opacity:0}to{opacity:1}}
html.motion .wk-dr.in{animation:wmDr .36s cubic-bezier(.2,.8,.2,1) both}
html.motion .wk-dr.in ~ .wk-scrim,html.motion .wk-scrim{animation:wmFade .3s ease both}
html.motion .wk-dr.in .db > *{animation:wmUp .42s cubic-bezier(.2,.8,.2,1) both}
html.motion .wk-dr.in .db > :nth-child(1){animation-delay:.1s}html.motion .wk-dr.in .db > :nth-child(2){animation-delay:.16s}html.motion .wk-dr.in .db > :nth-child(3){animation-delay:.22s}html.motion .wk-dr.in .db > :nth-child(n+4){animation-delay:.28s}
/* WERP 확인창 */
@keyframes wmPopIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
html.motion #w-cf.on .bx{animation:wmPopIn .26s cubic-bezier(.2,.8,.2,1) both}
/* 그림 배너 — 점선 길이 천천히 흐름 */
html.motion .hero svg path[stroke-dasharray]{animation:wmDash 9s linear infinite}
@keyframes wmDash{to{stroke-dashoffset:-90}}
}

/* ===== 2판 — 더 다양하고 다채롭게 (html.motion.mx) ===== */
@media all{
html.motion.mx .btn-primary,html.motion.mx .wk-new{background-image:linear-gradient(110deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 65%)!important;background-size:250% 100%!important;background-repeat:no-repeat!important;background-position:130% 0!important;transition:background-position 0s,transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease}
html.motion.mx .btn-primary:hover,html.motion.mx .wk-new:hover{background-position:-30% 0!important;transition:background-position .75s ease,transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease;box-shadow:0 10px 22px rgba(63,143,87,.32),0 0 0 3px rgba(63,143,87,.12)}
html.motion.mx .wk-new svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}html.motion.mx .wk-new:hover svg{transform:rotate(90deg)}
html.motion.mx .ab:hover,html.motion.mx .wk-sec:hover,html.motion.mx .mini:hover{border-color:rgba(63,143,87,.45)!important}
html.motion.mx .wk-sec:hover svg{animation:wmTurn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes wmTurn{50%{transform:rotate(-18deg) scale(1.12)}}
html.motion.mx .wk-kpi{position:relative;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
html.motion.mx .wk-kpi:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}
html.motion.mx .wk-kpi::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.6),rgba(255,255,255,0) 60%);opacity:0;transition:opacity .25s}
html.motion.mx .wk-kpi:hover::after{opacity:1}
html.motion.mx .wk-kpi:hover .kico{animation:wmWiggle .6s ease}
@keyframes wmWiggle{25%{transform:rotate(-9deg) scale(1.1)}50%{transform:rotate(7deg) scale(1.1)}75%{transform:rotate(-3deg)}}
/* 11-11 요약 카드 아이콘 — 올리면 뜻에 맞게 움직임(그림 이름 data-k 로 묶음 · 맞는 묶음이 없으면 까딱 그대로). 입체 그림은 그림만 움직이고 예전 요약 카드(.kpi · .stat-card)도 같이 */
html.motion.mx .wk-kpi:hover .kico:has(> svg.kx){animation:none}
html.motion.mx :is(.wk-kpi,.kpi,.stat-card):hover :is(.kico,.ico) > svg.kx{animation:wmWiggle .6s ease}
html.motion.mx :is(.wk-kpi,.kpi,.stat-card):hover :is(.kico,.ico) > svg.kx:is([data-k="arrows-clockwise"],[data-k="clock-counter-clockwise"],[data-k="gear-six"]){animation:kxSpin .75s cubic-bezier(.33,1,.68,1)}
html.motion.mx :is(.wk-kpi,.kpi,.stat-card):hover :is(.kico,.ico) > svg.kx:is([data-k="warning"],[data-k="warning-circle"],[data-k="alarm"],[data-k="x-circle"],[data-k="user-x"]){animation:kxShake .75s cubic-bezier(.33,1,.68,1)}
html.motion.mx :is(.wk-kpi,.kpi,.stat-card):hover :is(.kico,.ico) > svg.kx:is([data-k="truck"],[data-k="arrow-right"],[data-k="shopping-cart"]){animation:kxDrive .85s cubic-bezier(.33,1,.68,1)}
html.motion.mx :is(.wk-kpi,.kpi,.stat-card):hover :is(.kico,.ico) > svg.kx:is([data-k="hourglass-medium"]){animation:kxFlip .95s cubic-bezier(.33,1,.68,1)}
html.motion.mx :is(.wk-kpi,.kpi,.stat-card):hover :is(.kico,.ico) > svg.kx:is([data-k="package"],[data-k="stack"]){animation:kxBounce .8s cubic-bezier(.33,1,.68,1)}
html.motion.mx :is(.wk-kpi,.kpi,.stat-card):hover :is(.kico,.ico) > svg.kx:is([data-k="seal-check"],[data-k="check"],[data-k="check-square"],[data-k="shield-check"]){animation:kxStamp .8s cubic-bezier(.33,1,.68,1)}
html.motion.mx :is(.wk-kpi,.kpi,.stat-card):hover :is(.kico,.ico) > svg.kx:is([data-k="chart-line-up"],[data-k="chart-bar"],[data-k="trend-up"],[data-k="presentation-chart"]){animation:kxRise .8s cubic-bezier(.33,1,.68,1)}
html.motion.mx :is(.wk-kpi,.kpi,.stat-card):hover :is(.kico,.ico) > svg.kx:is([data-k="currency-circle-dollar"],[data-k="hand-coins"]){animation:kxCoin .75s cubic-bezier(.33,1,.68,1)}
@keyframes kxSpin{to{transform:rotate(360deg)}}@keyframes kxShake{16.7%{transform:translateX(-3px) rotate(-5deg)}33.3%{transform:translateX(3px) rotate(5deg)}50%{transform:translateX(-2px) rotate(-3deg)}66.7%{transform:translateX(2px) rotate(2deg)}83.3%{transform:translateX(-1px)}}@keyframes kxDrive{18%{transform:translateX(-3px)}59%{transform:translateX(8px)}}@keyframes kxFlip{42%,58%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}@keyframes kxBounce{25%{transform:translateY(-7px) scale(.97,1.04)}50%{transform:translateY(0) scale(1.08,.9)}69%{transform:translateY(-2px)}88%{transform:none}}@keyframes kxStamp{25%{transform:scale(1.3) rotate(-11deg)}50%{transform:scale(.86)}69%{transform:scale(1.05)}}@keyframes kxRise{25%{transform:translateY(3px) scaleY(.8)}56%{transform:translateY(-3px) scaleY(1.1)}81%{transform:none}}@keyframes kxCoin{to{transform:rotateY(360deg)}}
html.motion.mx .wk-kpi:has(.kico.g):hover{box-shadow:0 0 0 1px rgba(47,158,68,.32),0 18px 40px rgba(47,158,68,.18)}
html.motion.mx .wk-kpi:has(.kico.b):hover{box-shadow:0 0 0 1px rgba(28,126,214,.32),0 18px 40px rgba(28,126,214,.18)}
html.motion.mx .wk-kpi:has(.kico.a):hover{box-shadow:0 0 0 1px rgba(224,168,0,.38),0 18px 40px rgba(224,168,0,.2)}
html.motion.mx .wk-kpi:has(.kico.r):hover{box-shadow:0 0 0 1px rgba(224,49,49,.32),0 18px 40px rgba(224,49,49,.18)}
html.motion.mx .wk .wk-row{background-image:linear-gradient(90deg,rgba(63,143,87,.13),rgba(63,143,87,0) 45%)!important;background-size:0% 100%!important;background-repeat:no-repeat!important;transition:background-size .38s cubic-bezier(.2,.8,.2,1),background-color .18s ease}
html.motion.mx .wk .wk-row:hover{background-size:100% 100%!important}
html.motion.mx .wk-row:hover .wk-sc i{animation:wmDot 1s ease-in-out infinite}
@keyframes wmDot{50%{transform:scale(1.7);opacity:.55}}
html.motion.mx .wk-srch,html.motion.mx .tb-box{transition:box-shadow .25s ease,transform .2s ease}
html.motion.mx .wk-srch:focus-within,html.motion.mx .tb-box:focus-within{box-shadow:0 0 0 3px rgba(63,143,87,.18),0 12px 30px rgba(63,143,87,.14)!important;transform:translateY(-1px)}
@keyframes wmPop{0%{transform:scale(.92)}60%{transform:scale(1.03)}100%{transform:none}}
html.motion.mx input[type=checkbox]:checked{animation:wmPop .26s cubic-bezier(.2,.8,.2,1)}
html.motion.mx .hero{position:relative}
html.motion.mx .hero::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 58%);background-size:300% 100%;background-repeat:no-repeat;background-position:130% 0;animation:wmHeroSheen 10s ease-in-out infinite}
@keyframes wmHeroSheen{0%,72%{background-position:130% 0}100%{background-position:-30% 0}}
html.motion.mx .hero .wm-bob{animation:wmBob 6s ease-in-out infinite}
html.motion.mx .hero .wm-bob.b2{animation-duration:7s;animation-delay:-2.3s}html.motion.mx .hero .wm-bob.b3{animation-duration:8s;animation-delay:-4.6s}
@keyframes wmBob{0%,100%{translate:0 0}50%{translate:0 -4px}}
html.motion.mx.glass::before{animation:wmDrift 46s ease-in-out infinite alternate}
@keyframes wmDrift{0%{transform:none}50%{transform:scale(1.06) translate(-1.5%,1%)}100%{transform:scale(1.1) translate(1.5%,-1%) rotate(1.5deg)}}
}

/* ===== 3판 — 화면 종류와 상관없이 공통 부품 전체에 (수평 전개) — html.motion.mx.m3 ===== */
@media all{
/* 모든 버튼: 누르면 꾹 · 올리면 살짝 */
html.m3.motion button:not(:disabled),html.m3.motion .btn,html.m3.motion a.btn{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
html.m3.motion button:not(:disabled):active,html.m3.motion .btn:active{transform:scale(.96);transition-duration:.06s}
html.m3.motion .btn:hover,html.m3.motion .btn-g:hover,html.m3.motion .btn-issue:hover,html.m3.motion .quick-btn:hover,html.m3.motion .chip:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(40,70,60,.10)}
html.m3.motion .btn,html.m3.motion .btn-g,html.m3.motion .btn-issue,html.m3.motion .quick-btn,html.m3.motion .seg button,html.m3.motion .chip{position:relative;overflow:hidden}
/* 화면 들어올 때 — 카드 · 숫자 상자 · 표 줄이 위에서부터 차례로 (새 틀 · 예전 화면 같은 규칙) */
html.m3.motion .wm-enter .wm-st{animation:wmUp .5s cubic-bezier(.2,.8,.2,1) both!important;animation-delay:calc(var(--wm-i,0) * 42ms + 30ms)!important}
html.m3.motion .wm-rv{animation:wmUp .55s cubic-bezier(.2,.8,.2,1) both}
/* 예전 표: 줄에 올리면 왼쪽 초록 띠 · 상태 표시 살짝 */
html.m3.motion table tbody tr{transition:background-color .18s ease,box-shadow .18s ease}
html.m3.motion .tbl tbody tr:hover,html.m3.motion .card table tbody tr:hover{background-color:rgba(63,143,87,.05)}
html.m3.motion .badge,html.m3.motion .wk-dp,html.m3.motion .wk-sc,html.m3.motion .status-pill{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
html.m3.motion tr:hover .badge,html.m3.motion tr:hover .status-pill,html.m3.motion .wk-row:hover .wk-dp,html.m3.motion .wk-row:hover .wk-sc{transform:scale(1.06)}
/* 입력칸 · 고르기 칸: 누르면 초록 테두리 빛 */
html.m3.motion input:not([type=checkbox]):not([type=radio]):not([type=range]),html.m3.motion select,html.m3.motion textarea{transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
html.m3.motion input:not([type=checkbox]):not([type=radio]):not([type=range]):not([readonly]):focus,html.m3.motion select:focus,html.m3.motion textarea:focus{border-color:#3f8f57!important;box-shadow:0 0 0 3px rgba(63,143,87,.16)!important;outline:none}
html.m3.motion :is(.wk-srch,.tb-box,.search,.rp-srch,.rp-pk-q) input:not([type=checkbox]):not([type=radio]):not([type=range]):focus{box-shadow:none!important;border-color:transparent!important}   /* 테는 감싸개가 그림 — 안쪽 칸에 둥근 테가 또 생기던 두 겹 고침 (10-21 점검: 예전 줄은 세기가 낮아 위 줄에 졌음) */
html.m3.motion #w-cf .in:focus{border-color:#2f6b24!important;box-shadow:0 0 0 3px rgba(47,107,36,.12)!important}
html.m3.motion input[type=radio]:checked{animation:wmPop .26s cubic-bezier(.2,.8,.2,1)}
/* 예전 창: 톡 튀어나오며 열림 · 뒤 배경 서서히 */
@keyframes wmModal{from{opacity:0;transform:translate(-50%,-47%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
html.m3.motion .modal.open{animation:wmModal .32s cubic-bezier(.2,.9,.25,1.05) both}
html.m3.motion .modal-backdrop,html.m3.motion .modal-overlay{animation:wmFade .25s ease both}
/* 오른쪽 패널: 닫힐 때도 미끄러져 나감 */
@keyframes wmDrOut{to{transform:translateX(56px);opacity:0}}
@keyframes wmFadeOut{to{opacity:0}}
html.m3.motion .wk-ov.wm-out .wk-dr{animation:wmDrOut .17s ease-in forwards!important}
html.m3.motion .wk-ov.wm-out .wk-scrim{animation:wmFadeOut .17s ease-in forwards!important}
/* 알림(토스트): 오른쪽에서 통통 · 체크 표시 톡 */
html.m3.motion #w-toast .w-t{transform:translateX(28px) scale(.96);transition:transform .38s cubic-bezier(.2,1.25,.35,1),opacity .25s ease}
html.m3.motion #w-toast .w-t.on{transform:none}
html.m3.motion #w-toast .w-t.on .w-ic{animation:wmPop .45s .12s cubic-bezier(.2,1.4,.4,1) both}
@keyframes wmToast{from{transform:translate(-50%,14px)}to{transform:translate(-50%,0)}}
html.m3.motion .toast.show{animation:wmToast .38s cubic-bezier(.2,1.25,.35,1)}
/* 숫자가 바뀌면 초록으로 반짝 */
@keyframes wmChg{0%{color:#2f9e44;transform:scale(1.08)}100%{transform:none}}
html.m3.motion .wm-chg{animation:wmChg .7s cubic-bezier(.2,.8,.2,1);display:inline-block}
/* 빈 화면 그림: 둥실둥실 */
@keyframes wmFloat{50%{transform:translateY(-6px)}}
html.m3.motion .empty .big,html.m3.motion .wk-empty svg,html.m3.motion .wk-empty img,html.m3.motion .tb-empty svg{animation:wmFloat 3.2s ease-in-out infinite}
/* 사이드바: 메뉴를 펼칠 때 차례로 · 화살표 부드럽게 */
@keyframes wmSlideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
html.m3.motion .app-sidebar .sn-chev,html.m3.motion .app-sidebar .ng-caret{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
/* 위쪽 줄 그림 · 로그인 상자 */
html.m3.motion .topbar .btn:hover svg,html.m3.motion .tb-todo-btn:hover svg{animation:wmTurn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes wmLogin{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
html.m3.motion #screenLogin .loginbox{animation:wmLogin .7s cubic-bezier(.2,.8,.2,1) both}
html.m3.motion #screenLogin .login-logo{animation:wmUp .6s .25s cubic-bezier(.2,.8,.2,1) both}
}

/* ===== 4판 — 사이드바: 흰 강조 판 하나가 이전 메뉴에서 새 메뉴로 미끄러져 이동 (글자는 그대로) — html.wmind ===== */
@media all{
html.wmind .app-sidebar .side-content > .wm-ind{position:absolute;left:0;top:0;z-index:0;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(40,70,60,.08);pointer-events:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1),height .4s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
html.wmind .app-sidebar .side-content > .wm-ind::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:4px;border-radius:0 4px 4px 0;background:#2f9e44}
html.wmind:not(.glass) .app-sidebar .side-content > .wm-ind{background:rgba(255,255,255,.14);box-shadow:none}
html.wmind .app-sidebar .nav-link{position:relative;z-index:1}
html.wmind .app-sidebar .nav-link.active,html.wmind .app-sidebar .nav-kids .nav-link.active{background:transparent!important;box-shadow:none!important}
html.wmind .app-sidebar .nav-kids .nav-link.active::before,html.wmind .app-sidebar .nav-link.active::before{opacity:0!important}
}

/* ===== 5판 — 사이드바 펼치고 접기: 높이가 부드럽게 (위에서 아래로만, 글자는 옆으로 안 움직임) — html.wmacc =====
   · 부서 묶음(숨김 표시 [hidden])과 한 부서 화면의 그룹(.nav-group 이 open 이 아닐 때) 둘 다 */
@media all{
html.wmacc{interpolate-size:allow-keywords}
html.wmacc .app-sidebar .sn-block > .nav-kids,html.wmacc .app-sidebar .sn-block > .sn-wrap,html.wmacc .app-sidebar .sn-block > nav{display:block!important;height:auto;overflow:clip;opacity:1;visibility:visible;
  transition:height .34s cubic-bezier(.2,.8,.2,1),padding .34s cubic-bezier(.2,.8,.2,1),margin .34s cubic-bezier(.2,.8,.2,1),opacity .28s ease,visibility 0s}
html.wmacc .app-sidebar .sn-block > [hidden],html.wmacc .app-sidebar .sn-block > .nav-group:not(.open) + .nav-kids{height:0!important;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;opacity:0;visibility:hidden;
  transition:height .28s cubic-bezier(.4,0,.2,1),padding .28s cubic-bezier(.4,0,.2,1),margin .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,visibility 0s .28s}   /* 접힌 그룹은 안쪽 여백까지 0 — 빈틈 없이 (2026-10-09) */
html.wmacc .app-sidebar .sn-chev,html.wmacc .app-sidebar .ng-caret{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
}

/* ===== 7판 — Lottie 움직이는 그림 (디자이너 원래 색): 가운데 알림 · 빈 목록 · 내 할 일 끝 · 불러오는 중 ===== */
#wm-cp{position:fixed;left:50%;top:46%;z-index:100000;transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:220px;max-width:min(440px,86vw);padding:12px 30px 20px;border-radius:24px;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 24px 60px rgba(40,70,60,.2);transition:opacity .22s ease,transform .32s cubic-bezier(.2,1.2,.35,1);text-align:center}
#wm-cp.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#wm-cp .wm-lt{width:110px;height:110px;margin:0}#wm-cp.big .wm-lt{width:210px;height:210px}#wm-cp.load .wm-lt{width:220px;height:110px}#wm-cp.err .wm-lt{width:120px;height:120px}
#wm-cp b{font-size:16px;color:#1d2a33;line-height:1.45;word-break:keep-all}#wm-cp .s{font-size:13px;color:#6b7a84;line-height:1.5;word-break:keep-all}#wm-cp .s:empty{display:none}
#wm-cp.err{pointer-events:auto;cursor:pointer;border-color:rgba(224,49,49,.35);box-shadow:0 24px 60px rgba(201,42,42,.18)}#wm-cp.err b{color:#c92a2a}
#wm-cp:not(.on){pointer-events:none!important}   /* 오류 안내가 사라진 뒤(.on 빠짐)에도 투명한 채 화면 가운데를 덮어 클릭을 먹던 것 (2026-10-14) */
#wm-cp .x{display:none;font-size:11.5px;color:#9aa6ae;margin-top:4px}#wm-cp.err .x{display:block}
.wm-lt{width:120px;height:120px;margin:0 auto 4px}.wm-lt.load{width:200px;height:100px}.wm-lt.xs{width:64px;height:64px}.wm-lt.load.xs{width:120px;height:60px}
.wk-empty .wm-lt svg,.empty .wm-lt svg,.tb-empty .wm-lt svg{animation:none!important}
#tbTodoPop .tb-empty,.tb-pop .tb-empty:has(.wm-lt){display:flex;flex-direction:column;align-items:center;gap:2px}

/* 그리기 부담 줄이기 (2026-10-09): 배경 색 번짐이 흐르는 효과는 끔 — 배경이 움직이면 위에 얹힌 흐림을 매 순간 다시 계산해야 해서 무거움 */
html.motion.mx.glass::before{animation:none!important}

/* 로티 그림 상자 — 공통 틀의 같은 이름 규칙(.empty 의 여백 60px 등)이 끼어들어 높이가 0이 되던 것 막음 (2026-10-10) */
.wm-lt.wm-lt{display:block;padding:0;gap:0;border:0;background:none;box-shadow:none}
/* 11-11 빈 목록 = 입체 돋보기 · 준비 중 = 입체 고깔 (/kpi-icons.js) — 둥실은 그림을 담은 칸이 */
.wm-lt.wm-lt.empty{width:auto;height:auto;margin:0 auto 6px}
.wm-lt.wm-lt.empty svg.kx{display:block;width:64px;height:64px;margin:0 auto;color:#9aabb6;stroke:none;filter:drop-shadow(0 4px 6px rgba(30,50,60,.16))}
.wm-lt.wm-lt.empty.xs svg.kx{width:40px;height:40px}
html.motion .wm-lt.empty{animation:wmFloat 3.2s ease-in-out infinite}
:where(.card) > .soon .big svg.kx{display:block;width:64px;height:64px;margin:0 auto;color:#a86a06;stroke:none;filter:drop-shadow(0 4px 6px rgba(30,50,60,.16))}
html.motion :where(.card) > .soon .big{animation:wmFloat 3.2s ease-in-out infinite}

/* ===== 8판 (2026-10-13) — 공통 틀 새 움직임 8가지 (werp-motion.js 맨 아래 8판과 짝) · html.motion.wm8 일 때만 ===== */
/* ① 위쪽 줄 신호선 (8판) — 기다릴 때만 위쪽 줄 바로 아래 2px 초록 선 · 앞에 작은 빛 점. 선은 JS 가 transform 으로만 밀고, 나타나고 사라지는 건 opacity
   · 위쪽 줄(.topbar, sticky) 안 맨 끝에 잠깐 붙는 span — 자리를 차지하지 않음(absolute) · 누름 통과 · 남색 기본 / 유리(운영) 색 따로 */
@media all{
html.motion.wm8 .topbar > .wm8-pg{position:absolute;left:0;right:0;bottom:-4px;height:8px;margin:0;padding:0;display:block;overflow:hidden;pointer-events:none;z-index:2;opacity:0;transition:opacity .34s ease}
html.motion.wm8 .topbar > .wm8-pg.wm8-on{opacity:1;transition:opacity .12s linear}   /* 처음부터 또렷하게 · 사라질 땐 0.34초 — 시안 (10-13) */
html.motion.wm8 .topbar > .wm8-pg > .wm8-pg-b{position:absolute;left:0;right:0;top:3px;height:2px;margin:0;padding:0;display:block;background:linear-gradient(90deg,rgba(110,231,135,0) 0%,#6ee787 55%,#337b35 100%);transform:translateX(-100%);will-change:transform}
html.motion.wm8 .topbar > .wm8-pg > .wm8-pg-b::after{content:'';position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:#efffd6;box-shadow:0 0 6px 2px rgba(110,231,135,.85)}
html.motion.wm8.glass .topbar > .wm8-pg > .wm8-pg-b{background:linear-gradient(90deg,rgba(88,186,72,0) 0%,#58BA48 55%,#2f6b24 100%)}
html.motion.wm8.glass .topbar > .wm8-pg > .wm8-pg-b::after{background:#fff;box-shadow:0 0 6px 2px rgba(88,186,72,.7)}
}
/* ② 메뉴 이름 날기 (8판) — 날아가는 글자(.wm8-fly, 자리 · 투명도는 JS 가 직접도 줌) · 제목 밑 연두 선 · 부서 이름 / 제목 올라오기
   · 제목(strong)은 position 만 relative — 자리 · 크기 그대로. 위치 표시줄(.breadcrumb)이 overflow:hidden 이라 선은 제목 상자 안 아래쪽에 그림 */
@media all{
html.motion.wm8 .wm8-fly{position:fixed;z-index:60;pointer-events:none;white-space:nowrap;margin:0;padding:0}
html.motion.wm8 .wm8-fly-y{display:inline-block;transform-origin:0 50%}
html.motion.wm8 #crumbTitle{position:relative}
html.motion.wm8 #crumbTitle.wm8-land::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#c5ed85,#337b35);transform-origin:0 50%;pointer-events:none;animation:wm8Land .9s cubic-bezier(.2,.8,.2,1) both}
html.motion.wm8 #crumbGroup.wm8-crg{animation:wm8CrG .26s .08s cubic-bezier(.2,.8,.2,1) both}
html.motion.wm8 #crumbTitle.wm8-crt{animation:wm8CrT .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes wm8Land{0%{transform:scaleX(0);opacity:1}40%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes wm8CrG{from{opacity:0;transform:translateY(6px)}}
@keyframes wm8CrT{from{opacity:0;transform:translateY(10px)}}
}
/* ===== 8판 ③ 숫자 알약 굴러가기 — 메뉴 숫자 · '내 할 일' 숫자 (html.motion.wm8) ===== */
@media all{
/* 옛 숫자 · 새 숫자를 한 칸에 겹쳐 두고 위아래로 — 폭은 둘 중 넓은 쪽, 넘친 부분은 가림 */
html.motion.wm8 .wm8-od{display:inline-grid;justify-items:center;font-variant-numeric:tabular-nums;overflow:hidden;vertical-align:top;line-height:inherit}
html.motion.wm8 .wm8-od > i{grid-area:1/1;font-style:normal}
html.motion.wm8 .wm8-bu .wm8-od > i:first-child{animation:wm8OdUo .42s cubic-bezier(.2,.8,.2,1) both}
html.motion.wm8 .wm8-bu .wm8-od > i:last-child{animation:wm8OdUi .42s cubic-bezier(.2,.8,.2,1) both}
html.motion.wm8 .wm8-bd .wm8-od > i:first-child{animation:wm8OdDo .42s cubic-bezier(.2,.8,.2,1) both}
html.motion.wm8 .wm8-bd .wm8-od > i:last-child{animation:wm8OdDi .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes wm8OdUo{to{transform:translateY(-100%);opacity:0}}
@keyframes wm8OdUi{from{transform:translateY(100%);opacity:0}}
@keyframes wm8OdDo{to{transform:translateY(100%);opacity:0}}
@keyframes wm8OdDi{from{transform:translateY(-100%);opacity:0}}
/* 늘었을 때 둘레 신호 고리 한 번 (어두운 사이드바 #6ee787 · 유리 #2f9e44 · 내 할 일은 빨강 1.5배 — 단추 안에서 안 잘리게) */
html.motion.wm8 .wm8-ping{position:relative}
html.motion.wm8 .wm8-ping::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:0 0 0 2px #6ee787;pointer-events:none;animation:wm8Ping .7s cubic-bezier(.2,.7,.3,1) forwards}
html.motion.wm8.glass .wm8-ping::after{box-shadow:0 0 0 2px #2f9e44}
html.motion.wm8 .tb-todo-btn > b.wm8-ping::after{box-shadow:0 0 0 2px rgba(229,72,77,.6);animation-name:wm8PingT}
@keyframes wm8Ping{from{transform:scale(1);opacity:.85}to{transform:scale(1.7);opacity:0}}
@keyframes wm8PingT{from{transform:scale(1);opacity:.85}to{transform:scale(1.5);opacity:0}}
/* 방금 내가 처리해서 '내 할 일'이 바뀌면 옆에 '−1' (늘면 '+1' 주황) — 화면에 고정, 누르기 막지 않음 */
html.motion.wm8 .wm8-dl{position:fixed;z-index:60;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:0;padding:1px 6px;border-radius:999px;background:#eaf3de;color:#2f6b24;white-space:nowrap;pointer-events:none;opacity:0;animation:wm8Dl 1s ease-out forwards}
html.motion.wm8 .wm8-dl.up{background:#fff4e0;color:#a86a06}
@keyframes wm8Dl{0%{opacity:0;transform:translateY(4px) scale(.9)}25%{opacity:1;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-16px)}}
/* 접힌 부서에 일이 늘면 그 부서 그림이 톡 + 작은 점 (점은 그동안만 자리 기준을 둠) */
html.motion.wm8 .app-sidebar .ng-icon.wm8-nudge{animation:wm8Nudge .55s cubic-bezier(.2,.8,.2,1)}
@keyframes wm8Nudge{30%{transform:scale(1.18) rotate(-8deg)}60%{transform:scale(.96) rotate(3deg)}100%{transform:none}}
html.motion.wm8 .app-sidebar .sn-group.wm8-dot{position:relative}
html.motion.wm8 .app-sidebar .sn-group.wm8-dot::after{content:"";position:absolute;left:30px;top:9px;width:6px;height:6px;border-radius:50%;background:#6ee787;pointer-events:none;animation:wm8DotIn 1.4s ease both}
html.motion.wm8.glass .app-sidebar .sn-group.wm8-dot::after{background:#2f9e44}   /* 밝은 유리 사이드바에서 보이게 */
@keyframes wm8DotIn{0%{transform:scale(0)}20%{transform:scale(1)}80%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
/* 처음 열 때 보이는 알약이 차례로 톡 · 새로 생긴 알약 톡 · 사라지는 알약은 작아지며 */
html.motion.wm8 .wm8-cin{animation:wm8CntIn .32s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--wm8-i,0) * 35ms)}
@keyframes wm8CntIn{from{transform:scale(.4);opacity:0}}
html.motion.wm8 .wm8-cout{animation:wm8CntOut .22s ease-in forwards}
@keyframes wm8CntOut{to{transform:scale(.4);opacity:0}}
}
/* ===== 8판 ④ 줄 → 패널 잇기 (html.motion.wm8) — 줄에서 패널 가장자리로 연두 띠 · 패널 가장자리 반짝 · 열린 동안 줄 막대 · 닫은 뒤 그 줄 짚기
   · 띠 · 반짝은 body 끝에 잠깐 붙는 조각(자리 · 크기 · 숨김은 스크립트가 바로 적음) · 줄 표시는 안쪽 그림자만 — 자리 · 높이 그대로 ===== */
@media all{
html.motion.wm8 .wm8-rpb-bridge{border-radius:10px;background:linear-gradient(90deg,rgba(63,143,87,.10),rgba(197,237,133,.6));transform-origin:0 50%;transform:scaleX(0)}
html.motion.wm8 .wm8-rpb-bridge.wm8-rpb-go{animation:wm8RpbBridge .48s cubic-bezier(.4,0,.2,1) both}
html.motion.wm8 .wm8-rpb-rx{display:block;background:linear-gradient(180deg,rgba(110,231,135,0),#6ee787,rgba(110,231,135,0))}
html.motion.wm8.glass .wm8-rpb-rx{background:linear-gradient(180deg,rgba(47,158,68,0),#2f9e44,rgba(47,158,68,0))}
html.motion.wm8 .wm8-rpb-rx.wm8-rpb-go{animation:wm8RpbRx .5s .3s cubic-bezier(.2,.8,.2,1) both}
html.motion.wm8 .wk-list .wk-row.wm8-hold.wm8-hold{box-shadow:inset 0 0 0 4000px rgba(63,143,87,.10)!important}
html.motion.wm8 .wk-list .wk-row.wm8-back.wm8-back{transition:box-shadow 1.4s ease-out,background-color .18s ease,background-size .38s cubic-bezier(.2,.8,.2,1)!important}   /* 줄 자신의 그림자(출고 줄 연두 막대 등)로 부드럽게 돌아감 (재확인 10-13) */
@keyframes wm8RpbBridge{0%{transform:translateX(0%) scaleX(0);opacity:.9}35%{transform:translateX(0%) scaleX(1);opacity:1}100%{transform:translateX(100%) scaleX(0);opacity:.6}}
@keyframes wm8RpbRx{0%{opacity:0;transform:scaleY(.2)}40%{opacity:1;transform:scaleY(1.6)}100%{opacity:0;transform:scaleY(2.4)}}
}
/* ===== 8판 ⑤ 저장 뒤 줄 표시 (html.motion.wm8) — 새 줄: 왼쪽 연두 띠가 위에서 아래로 + 줄 바탕 연두빛(1.8초) · 바뀐 줄: 연한 빛이 왼쪽에서 오른쪽으로 한 번(0.9초)
   · 줄 끝에 2초 동안 붙는 빈 조각(.wm8-flag) 안에서만 — 줄 자리 · 높이 · 글자는 그대로 ===== */
@media all{
html.motion.wm8 .wk-row > .wm8-flag{position:absolute!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;display:block!important;z-index:-1!important;overflow:hidden!important;pointer-events:none!important;border-radius:inherit;background:none!important;box-shadow:none!important;opacity:1;transform:none;animation:none;transition:none}
html.motion.wm8 .wk-row > .wm8-flag::before,html.motion.wm8 .wk-row > .wm8-flag::after{content:none}
html.motion.wm8 .wk-row > .wm8-flag.wm8-new::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(197,237,133,.32);animation:wm8SrmTint 1.8s ease-out forwards}
html.motion.wm8 .wk-row > .wm8-flag.wm8-new.wm8-nt::after{content:none}
html.motion.wm8 .wk-row > .wm8-flag.wm8-new::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(#c5ed85,#58BA48);transform-origin:top;animation:wm8SrmBar .28s cubic-bezier(.2,.8,.2,1) both,wm8SrmFade .4s 1.5s forwards}
html.motion.wm8 .wk-row > .wm8-flag > .wm8-sw{position:absolute!important;top:0!important;bottom:0!important;left:0!important;right:auto!important;width:45%!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0;display:block!important;background:linear-gradient(90deg,rgba(158,203,110,0),rgba(158,203,110,.38) 50%,rgba(158,203,110,0));transform:translateX(-100%);animation:wm8SrmSweep .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes wm8SrmTint{from{opacity:1}to{opacity:0}}
@keyframes wm8SrmBar{from{transform:scaleY(0)}}
@keyframes wm8SrmFade{to{opacity:0}}
@keyframes wm8SrmSweep{to{transform:translateX(320%)}}
}
/* ===== 8판 ⑥ 숫자 카드 세어 가기 + '+3' 꼬리표 (html.motion.wm8) — 3판 반짝(wm-chg) 대신. 1.08배 흔들림 없음 ===== */
@media all{
/* 세는 동안 초록 → 0.5초부터 0.6초에 걸쳐 원래 색 (유리 카드 숫자 색 규칙보다 우선) */
html.motion.wm8 .wk-kpi .v.wm8-cnt{color:#2f9e44;transition:none}
html.motion.wm8 .wk-kpi .v.wm8-cntx{transition:color .6s ease}
/* 꼬리표 — 카드 안에 떠 있음(자리 차지 안 함, 누르기 막지 않음). 색은 카드 그림 색을 따름 */
html.motion.wm8 .wm8-dlt{position:absolute;z-index:1;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.5;letter-spacing:0;white-space:nowrap;pointer-events:none;background:#eef1f3;color:#5d6e79;opacity:0;animation:wm8Dlt 1.8s cubic-bezier(.2,.8,.2,1) forwards}
html.motion.wm8 .wm8-dlt.g{background:rgba(47,158,68,.14);color:#2f6b24}
html.motion.wm8 .wm8-dlt.b{background:rgba(28,126,214,.14);color:#1c5789}
html.motion.wm8 .wm8-dlt.a{background:rgba(224,168,0,.18);color:#8a6200}
html.motion.wm8 .wm8-dlt.r{background:rgba(224,49,49,.14);color:#b7444c}
html.motion.wm8 .wm8-dlt.p{background:rgba(107,79,179,.14);color:#553c9a}
/* 예전 '초록 반짝 + 1.08배 커짐'(3판 wm-chg)은 커짐 없이 색만 잠깐 — 대표가 세어 가기로 바꾸기로 한 효과 (10-13) */
html.motion.wm8 .wm-chg{animation:wm8Chg .7s cubic-bezier(.2,.8,.2,1)}
@keyframes wm8Chg{0%{color:#2f9e44}}
@keyframes wm8Dlt{0%{opacity:0;transform:translateY(8px) scale(.9)}15%{opacity:1;transform:none}75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
/* 카드 그림 톡 */
html.motion.wm8 .wk-kpi .kico.wm8-kpop{animation:wm8Pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes wm8Pop{0%{transform:scale(.92)}60%{transform:scale(1.03)}100%{transform:none}}
}
/* ⑦ 로고 옆 전파 (8판) — 'WERP' 글자 오른쪽 7px, 20px 상자에 ))) 세 줄이 0.09초씩 차례로 퍼지고 사라짐 (0.56초 · 끝까지 약 0.75초)
   · 'WERP' 글자(.brand-werp, relative) 안에 잠깐 붙는 span — 자리를 차지하지 않음(absolute) · 누름 통과 · 남색 사이드바 #6ee787 / 유리(운영) #2f9e44 */
@media all{
html.motion.wm8 .brand-werp > .wm8-ant{position:absolute;left:calc(100% + 7px);top:50%;width:20px;height:20px;margin:-10px 0 0;padding:0;display:block;line-height:0;pointer-events:none}
html.motion.wm8 .brand-werp > .wm8-ant > svg{display:block;width:20px;height:20px;overflow:visible;pointer-events:none}
html.motion.wm8 .brand-werp > .wm8-ant path{fill:none;stroke:#6ee787;stroke-width:2;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:0 50%}
html.motion.wm8.glass .brand-werp > .wm8-ant path{stroke:#2f9e44}
html.motion.wm8 .brand-werp > .wm8-ant.wm8-go path{animation:wm8Ant .56s cubic-bezier(.2,.8,.2,1) both}
html.motion.wm8 .brand-werp > .wm8-ant.wm8-go path:nth-child(2){animation-delay:.09s}
html.motion.wm8 .brand-werp > .wm8-ant.wm8-go path:nth-child(3){animation-delay:.18s}
@keyframes wm8Ant{0%{opacity:0;transform:translateX(-3px) scale(.8)}35%{opacity:1}100%{opacity:0;transform:translateX(4px) scale(1.06)}}
}
/* ⑧ 이카운트 점 전파 (8판) — 점(.tb-erp i)의 ::before · ::after 가 점 색(currentColor)으로 퍼짐. 점 · 칩 크기와 자리는 그대로
   · 보내는 중(.ok)만 7초에 한 번 (0~1.26초만 보임) · 잠시 멈춤 / 일부만(.off) · 시작 전(.before)은 멈춰 있음
   · 상태가 바뀌면(.wm8-erp-chg, JS 가 1초 붙임) 두 겹 전파 + 글자 올라오기. 칩 글자(span)는 flex 칸이라 transform 이 먹음 — display 는 건드리지 않음(1180px 이하에선 글자가 숨어 있어야 함)
   · 유리(html.glass)에선 칩 바탕이 !important 로 고정이라 바뀌는 색은 점 · 글자에서만 보임 — 같은 규칙으로 충분 */
@media all{
html.motion.wm8 .tb-erp{transition:background-color .4s ease,color .4s ease}
html.motion.wm8 .tb-erp i{position:relative}
html.motion.wm8 .tb-erp.ok i{color:#58BA48}
html.motion.wm8 .tb-erp.off i{color:#e09b00}
html.motion.wm8 .tb-erp.before i{color:#9aabb6}
html.motion.wm8 .tb-erp i::before,html.motion.wm8 .tb-erp i::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:currentColor;opacity:0;pointer-events:none}
html.motion.wm8 .tb-erp.ok i::after{animation:wm8ErpBreath 7s cubic-bezier(.2,.8,.2,1) infinite}
html.motion.wm8.wk-lock .tb-erp.ok:not(.wm8-erp-chg) i::after{animation:none}   /* 오른쪽 패널이 열려 있으면 쉼 — 패널 뒤 흐림을 다시 그리지 않게 (점검 지적 10-13) */
html.motion.wm8 .tb-erp.wm8-erp-chg i::before{animation:wm8ErpBurst .9s cubic-bezier(.2,.8,.2,1) both}
html.motion.wm8 .tb-erp.wm8-erp-chg i::after{animation:wm8ErpBurst .9s .14s cubic-bezier(.2,.8,.2,1) both}
html.motion.wm8 .tb-erp.wm8-erp-chg span{animation:wm8ErpLbl .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes wm8ErpBreath{0%{transform:scale(1);opacity:.45}18%{transform:scale(2.8);opacity:0}100%{transform:scale(2.8);opacity:0}}
@keyframes wm8ErpBurst{from{transform:scale(1);opacity:.6}to{transform:scale(4);opacity:0}}
@keyframes wm8ErpLbl{from{opacity:0;transform:translateY(6px)}}
}

/* ===== 9판 — 영업 분석 · 매출 분석: 그래프 · 숫자 카드 · 표 · 배너 (2026-10-17, werp-motion-an.js) — html.motion.wman ===== */
@media all{
@keyframes wmAnSweep{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes wmAnPing{0%{box-shadow:0 0 0 0 rgba(88,186,72,.5)}100%{box-shadow:0 0 0 16px rgba(88,186,72,0)}}
@keyframes wmAnBeat{0%{transform:scale(.5);opacity:.95}100%{transform:scale(2.2);opacity:0}}
@keyframes wmAnRingO{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes wmAnSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes wmAnRow{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes wmAnGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes wmAnMedal{0%{transform:scale(.4) rotate(-40deg);opacity:0}60%{transform:scale(1.18) rotate(6deg);opacity:1}100%{transform:none}}
@keyframes wmAnGlint{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes wmAnRise{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:.85}100%{transform:translateY(-150px) scale(1.15);opacity:0}}
/* 숫자 카드 — 기울기 · 비치는 빛 · 숫자가 바뀌면 빛이 한 번 쓸고 감 · 그림 칸이 톡 */
html.motion.wman :is(#p-sales,#sub-analytics) .kpi{position:relative;overflow:hidden;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
html.motion.wman :is(#p-sales,#sub-analytics) .kpi:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);box-shadow:0 0 0 1px rgba(88,186,72,.3),0 18px 40px rgba(47,158,68,.16)}
html.motion.wman :is(#p-sales,#sub-analytics) .kpi::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.65),rgba(255,255,255,0) 60%);opacity:0;transition:opacity .25s}
html.motion.wman :is(#p-sales,#sub-analytics) .kpi:hover::before{opacity:1}
html.motion.wman :is(#p-sales,#sub-analytics) .kpi::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 62%);background-size:260% 100%;background-repeat:no-repeat;background-position:150% 0;opacity:0}
html.motion.wman :is(#p-sales,#sub-analytics) .kpi.wm-an-sw::after{opacity:1;animation:wmAnSweep 1.15s cubic-bezier(.35,.6,.3,1) .15s both}
html.motion.wman :is(#p-sales,#sub-analytics) .kpi.wm-an-sw .kico{animation:wmAnPing 1s ease-out .1s}
html.motion.wman :is(#p-sales,#sub-analytics) .kpi .kspark{opacity:.5!important}
.wm-an-dot{position:absolute;z-index:1;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--c,#58BA48);box-shadow:0 0 8px var(--c,#58BA48);pointer-events:none}
.wm-an-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c,#58BA48);animation:wmAnBeat 1.8s ease-out infinite}
/* 그래프 상자 — 테두리를 빛이 한 바퀴 */
html.motion.wman .wm-an-host{position:relative}
html.motion.wman .wm-an-ring{position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;overflow:hidden;container-type:size;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:wmAnRingO 1.6s cubic-bezier(.45,.05,.3,1) both}
/* 11-07 가볍게 — 예전엔 빛 무늬의 각도 값을 장면마다 바꿔 테두리 판 전체를 매번 다시 그렸음(영업 분석 기간 바꿀 때 초당 29장).
   빛 무늬는 그대로 두고 그 판을 돌리기(transform)만 해서 그래픽 칩이 맡게 함 → 같은 모양 · 같은 빠르기, 초당 35장 (빛을 아예 빼면 40장) */
html.motion.wman .wm-an-ring::before{content:"";position:absolute;left:50%;top:50%;width:calc(hypot(100cqw,100cqh) + 8px);aspect-ratio:1;will-change:transform;
  background:conic-gradient(from 0deg,rgba(88,186,72,0) 0deg,rgba(88,186,72,0) 240deg,rgba(31,163,155,.7) 300deg,#58BA48 335deg,#b6f09a 350deg,rgba(88,186,72,0) 360deg);
  animation:wmAnSpin 1.6s cubic-bezier(.45,.05,.3,1) both}
/* 표 — 줄이 차례로 · 총 매출 칸 뒤 막대가 차오름 (적자 줄은 빨강) */
html.motion.wman :is(#p-sales,#sub-analytics) tbody tr.wm-an-row{animation:wmAnRow .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 38ms)}
html.motion.wman :is(#p-sales,#sub-analytics) td.wm-an-bar{background-image:linear-gradient(90deg,rgba(88,186,72,.24),rgba(88,186,72,.07));background-repeat:no-repeat;background-position:left center;background-size:0% 62%;transition:background-size 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 38ms + 160ms)}
html.motion.wman :is(#p-sales,#sub-analytics) td.wm-an-bar.lo{background-image:linear-gradient(90deg,rgba(224,82,82,.24),rgba(224,82,82,.07))}
html.motion.wman :is(#p-sales,#sub-analytics) td.wm-an-bar.go{background-size:var(--wb,0%) 62%}
/* 범례 — 차례로 */
html.motion.wman :is(#saMixLegend,#anMixLegend) > .wm-an-lg{animation:wmAnRow .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms + 350ms)}
/* 고객별 주문 금액 — 막대가 차례로 차오르고 반짝 · 1~3위 금 · 은 · 동 */
html.motion.wman #sub-analytics .cust-bar-fill{position:relative;overflow:hidden;transform-origin:left center;background:linear-gradient(90deg,#1fa39b,#58BA48 72%,#a6e88a);box-shadow:0 2px 8px rgba(47,158,68,.25);animation:wmAnGrow 1s cubic-bezier(.2,1.12,.35,1) both;animation-delay:calc(var(--i,0) * 45ms + 80ms)}
html.motion.wman #sub-analytics .cust-bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%);background-size:240% 100%;background-repeat:no-repeat;background-position:150% 0;animation:wmAnSweep 1.1s ease-in-out both;animation-delay:calc(var(--i,0) * 45ms + 950ms)}
html.motion.wman #sub-analytics .cust-bar-row:hover .cust-bar-fill{filter:brightness(1.08) saturate(1.15);box-shadow:0 3px 12px rgba(47,158,68,.4)}
html.motion.wman :is(#customer-chart,#rep-chart) .cust-bar-row:nth-child(-n+3) .cust-rank{color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);animation:wmAnMedal .6s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i,0) * 45ms + 700ms)}
html.motion.wman :is(#customer-chart,#rep-chart) .cust-bar-row:nth-child(1) .cust-rank{background:linear-gradient(135deg,#ffe07a,#e2a514);color:#5c3b00}
html.motion.wman :is(#customer-chart,#rep-chart) .cust-bar-row:nth-child(2) .cust-rank{background:linear-gradient(135deg,#f1f4f6,#9fadb8);color:#33424c}
html.motion.wman :is(#customer-chart,#rep-chart) .cust-bar-row:nth-child(3) .cust-rank{background:linear-gradient(135deg,#f6cfa6,#bf7638)}
/* 배너 — 줄기를 따라 흐르는 빛 · 떠오르는 빛 알갱이 */
html.motion.wman .hero .wm-an-glint{fill:none;stroke:#fff;stroke-linecap:round;stroke-dasharray:6 94;stroke-dashoffset:100;opacity:.95;pointer-events:none;animation:wmAnGlint 3.4s linear infinite}
html.motion.wman .hero .wm-an-spark{fill:#7fcf98;opacity:0;transform-box:fill-box;transform-origin:center;animation:wmAnRise 6.5s linear infinite}
html.motion.wman .hero .wm-an-spark.w{fill:#fff}
/* 화면 아래에 있어 안 보이는 동안은 멈춤 — 보이면 시작 */
html.motion.wman :is(#p-sales,#sub-analytics) .wm-an-hold tbody tr.wm-an-row,html.motion.wman #sub-analytics .wm-an-hold .cust-bar-fill,html.motion.wman #sub-analytics .wm-an-hold .cust-bar-fill::after,html.motion.wman :is(#customer-chart,#rep-chart).wm-an-hold .cust-bar-row:nth-child(-n+3) .cust-rank{animation-play-state:paused}
}

/* ===== 10판 (2026-10-17 대표) — 간트: 들어올 때 줄 · 막대가 차례로 자라남 · ◆ 톡 · 오늘 선 빛 · ‹ › 넘기면 미끄러짐 · 위아래는 줄에 맞춰 멈춤 (werp-motion.js 10판과 짝) ===== */
@media all{
@keyframes wgtGrow{from{scale:0 1}}
@keyframes wgtRow{from{opacity:0;translate:-12px 0}}
@keyframes wgtPop{0%{scale:0}65%{scale:1.35}100%{scale:1}}
@keyframes wgtFade{from{opacity:0}}
@keyframes wgtDrop{from{scale:1 0}}
@keyframes wgtGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(192,50,47,0))}50%{filter:drop-shadow(0 0 4px rgba(192,50,47,.85))}}
@keyframes wgtSlL{from{opacity:0;translate:56px 0}}
@keyframes wgtSlR{from{opacity:0;translate:-56px 0}}
/* 생산지시 대장 간트 — 들어올 때(wgt-in): 줄 → 막대(왼쪽부터 자라남) → ◆ · 자재 표시 톡 → 글 · 오늘 선 그어짐 */
html.motion :is(#ganttView,.rp-gt).wgt-in :is(.gt-or,.gt-gh2){animation:wgtRow .45s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--gi,0) * 28ms)}
html.motion :is(#ganttView,.rp-gt).wgt-in :is(.gt-aa,.gt-ab,.gt-pb,.gt-pp){transform-origin:left center;animation:wgtGrow .8s cubic-bezier(.2,1,.3,1) backwards;animation-delay:calc(var(--gi,0) * 28ms + 160ms)}
html.motion :is(#ganttView,.rp-gt).wgt-in :is(.gt-md,.gt-mm,.gt-meta,.gt-mip,.gt-mdg){animation:wgtPop .5s cubic-bezier(.2,.9,.3,1.3) backwards;animation-delay:calc(var(--gi,0) * 28ms + 700ms)}
html.motion :is(#ganttView,.rp-gt).wgt-in :is(.gt-olb,.gt-cut){animation:wgtFade .5s ease backwards;animation-delay:calc(var(--gi,0) * 28ms + 650ms)}
html.motion :is(#ganttView,.rp-gt).wgt-in .gt-ov .gt-now{transform-origin:top center;animation:wgtDrop .7s cubic-bezier(.2,.8,.2,1) .25s backwards,wgtGlow 2.6s ease-in-out 1s infinite}
html.motion :is(#ganttView,.rp-gt).wgt-in .gt-nowtag{animation:wgtPop .5s cubic-bezier(.2,.9,.3,1.3) .2s backwards}
html.motion :is(#ganttView,.rp-gt) .gt-ov .gt-now{animation:wgtGlow 2.6s ease-in-out infinite}
/* ‹ › 넘김 · 옆으로 쓸기 — 날짜판과 막대가 미끄러져 들어와 딱 멈춤 */
html.motion :is(#ganttView,.rp-gt).wgt-l :is(.gt-trk,.gt-th,.gt-lines,.gt-ov){animation:wgtSlL .45s cubic-bezier(.2,.8,.2,1) backwards}
html.motion :is(#ganttView,.rp-gt).wgt-r :is(.gt-trk,.gt-th,.gt-lines,.gt-ov){animation:wgtSlR .45s cubic-bezier(.2,.8,.2,1) backwards}
/* 위아래로 굴리면 줄 경계에 맞춰 멈춤 — 머리줄(46px) 바로 아래로 · 움직임을 꺼도 그대로 */
:is(#ganttView,.rp-gt) .gt-body{scroll-snap-type:y proximity;scroll-padding-top:46px}
:is(#ganttView,.rp-gt) :is(.gt-or,.gt-gh2){scroll-snap-align:start}
/* 연구 › 과제 관리 간트 — 간트로 바꿀 때: 줄 차례로 · 단계 막대 자라남 · 목표일 ◆ 톡 · 오늘 선 */
html.motion .wk-gt.wgt-in .rg-p{animation:wgtRow .45s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--gi,0) * 40ms)}
html.motion .wk-gt.wgt-in .g-trk :is(.rg-a,.rg-pl,.rg-lt,.g-done,.g-rest,.g-over){transform-origin:left center;animation:wgtGrow .8s cubic-bezier(.2,1,.3,1) backwards;animation-delay:calc(var(--gi,0) * 40ms + 160ms)}
html.motion .wk-gt.wgt-in .g-trk .rg-due{animation:wgtPop .5s cubic-bezier(.2,.9,.3,1.3) backwards;animation-delay:calc(var(--gi,0) * 40ms + 700ms)}
html.motion .wk-gt.wgt-in .g-now{transform-origin:top center;animation:wgtDrop .7s cubic-bezier(.2,.8,.2,1) .25s backwards,wgtGlow 2.6s ease-in-out 1s infinite}
html.motion .wk-gt .g-now{animation:wgtGlow 2.6s ease-in-out infinite}
}