/* =====================================================================
 * NOW WORK 효과(모션) 확정 모듈 v1 — nw-motion.css
 * 디자인팀 motion-artist · 2026-11-02 · KH 결정(2026-11-02 13:45) 반영본
 *   폰·태블릿 14개(M1~M15 중 KH 가 고른 것) + PC M16~M23 8개 = 22개, 방향은 '현장 산업형' 하나.
 *   강도: <html data-nw-motion="full|lite"> 로만 바뀐다(NWPrefs 가 넣음). 기기 '움직임 줄이기'면 CSS 만으로도 가볍게.
 *   밝기: <html data-nw-mode="light|dark"> (지금 앱의 data-theme="dark|light" 도 같이 알아봄 — 별칭).
 * 넣는 곳: index.html 에서 css/theme.css 다음 줄 (<link rel="stylesheet" href="css/nw-motion.css?v=…">). theme.css 보다 뒤여야 함.
 * 이름 규칙: 효과 클래스 .nw-* (폰·공통) · .pc-* (PC) · 움직임 이름 nw-* · pc-* · 변수 --m-* · --pc-*. 지금 앱 CSS 와 겹치는 이름 없음(검수 확인).
 * 원칙: 움직이는 속성은 transform·opacity. 예외 = 작은 SVG 선 그리기(M2 체크·M9 고리), 표 칸 바탕색(M18, 칠하기만), 초점 테두리 간격(M20).
 *       will-change 안 씀(저사양 폰 메모리). 무한 반복은 M4 로딩만(로딩이 끝나면 요소를 지울 것).
 *       효과가 꺼져도(가볍게·움직임 줄이기·JS 없음) 모든 상태는 끝 모양(.is-on .is-done .ok .err .sel 등)으로 완성돼 보인다.
 * 색: 테마 변수(--nw-*, 없으면 지금 theme.css 의 --bg --surface --text --text3 --pri --on-pri --red --orange)만 씀. 고정색은 쇳물 심 #FFD27A 하나.
 * ===================================================================== */

/* ---------- 0. 토큰 ---------- */
:root{
  --m-bg:var(--nw-bg,var(--bg,#f3f5f7));
  --m-sf:var(--nw-surface,var(--surface,#fff));
  --m-tx:var(--nw-text,var(--text,#121b23));
  --m-mu:var(--nw-muted,var(--text3,#5f6b76));
  --m-pri:var(--nw-primary,var(--pri,#2B45BD));
  --m-on-pri:var(--nw-on-primary,var(--on-pri,#fff));
  --m-acc:var(--nw-accent,var(--accent,#F08A3C));      /* 현장 산업형: 테마 강조색(쇳물 빛). 상태 표시(새 줄·초점·오류)에는 쓰지 않음 */
  --m-ok:var(--nw-ok,var(--ok,#2E9B6A));
  --m-on-ok:var(--nw-on-ok,var(--on-ok,var(--m-sf)));    /* 초록 위 체크·글자 */
  --m-warn:var(--nw-warn,var(--orange,#D98A1C));
  --m-dg:var(--nw-danger,var(--red,#C4252F));
  --m-on-dg:var(--nw-on-danger,var(--on-red,#fff));
  --m-r:var(--nw-radius,14px);
  --m-hot:#FFD27A;                                       /* 쇳물 심(가장 뜨거운 빛) · 새 항목 형광펜 */
  --m-line:color-mix(in srgb,var(--m-mu) 22%,transparent);
  --m-line2:color-mix(in srgb,var(--m-mu) 45%,transparent);
  --m-ctl:color-mix(in srgb,var(--m-mu) 80%,var(--m-sf));
  --m-k:1;                                               /* 길이 배율: 기본 1 · 가볍게 .6 */
  --m-ease:cubic-bezier(.2,.8,.2,1);
  --m-spring:cubic-bezier(.34,1.56,.64,1);
  --m-glow:1;                                            /* 빛·입자 세기 (가볍게 = 0) */
  --m-glow-img:radial-gradient(circle,var(--m-hot) 0 28%,var(--m-acc) 46%,transparent 70%);
  --m-sweep:linear-gradient(90deg,transparent,rgba(240,138,60,.22) 60%,rgba(255,210,122,.32) 80%,transparent);
  --m-halo:0 0 0 3px rgba(240,138,60,.16);
  --m-pt-w:3px;--m-pt-h:11px;--m-pt-r:2px;               /* 축하 입자 = 가는 불티 */
  --m-shake:6px;
  --m-new-a:.22;                                         /* 새 항목 형광 첫 진하기 (다크 .12) */
  /* PC */
  --pc-lift:1;--pc-glide:1;
  --pc-tint:color-mix(in srgb,var(--m-mu) 11%,transparent);
  --pc-sel:color-mix(in srgb,var(--m-pri) 14%,transparent);
  --pc-ring:color-mix(in srgb,var(--m-pri) 28%,transparent);
  --pc-new:var(--m-hot);
  --pc-new-a:30%;
  --pc-shadow:0 6px 16px rgba(16,24,32,.16);
  --pc-pop:0 12px 32px rgba(10,15,20,.24);
  --pc-scrim:rgba(10,15,20,.45);
}
/* 다크 (data-nw-mode 우선, 지금 앱 data-theme 별칭, 속성이 없으면 기기 설정) */
:root[data-nw-mode="dark"],:root[data-theme="dark"]:not([data-nw-mode]){
  --m-new-a:.12;--pc-new-a:10%;
  --pc-shadow:0 6px 18px rgba(0,0,0,.5);--pc-pop:0 14px 36px rgba(0,0,0,.6);--pc-scrim:rgba(0,0,0,.6);
  --m-halo:0 0 0 3px rgba(240,138,60,.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-nw-mode]):not([data-theme="light"]){
    --m-new-a:.12;--pc-new-a:10%;
    --pc-shadow:0 6px 18px rgba(0,0,0,.5);--pc-pop:0 14px 36px rgba(0,0,0,.6);--pc-scrim:rgba(0,0,0,.6);
  }
}

/* ---------- 1. 공통 ---------- */
/* 누르는 맛 (큰 단추·카드) */
.nw-press{transition:transform calc(90ms * var(--m-k)) var(--m-ease)}
.nw-press:active{transform:scale(.97)}
/* 등장: 화면·탭·내용 바뀔 때 (M5 · M17 내용) */
.nw-enter{animation:nw-enter calc(220ms * var(--m-k)) var(--m-ease) both}
@keyframes nw-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nw-fade{from{opacity:0}to{opacity:1}}
@keyframes nw-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes nw-ping{0%{opacity:calc(.7 * var(--m-glow));transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes nw-settle{0%{transform:scale(.96)}100%{transform:none}}
@keyframes nw-melt{0%{opacity:calc(.95 * var(--m-glow));transform:scale(.4)}100%{opacity:0;transform:scale(2.3)}}

/* 효과 겹층 #nw-fx: 빛 번짐·용탕 흐름·완료 빛·새 항목 형광·불티를 화면 위 한 겹에 그림 (nw-motion.js 가 만듦)
   → 앱 화면이 render() 로 통째로 다시 그려져도 끊기지 않고, 앱 요소에 position·overflow 를 바꿀 필요 없음 */
/* 겹 순서(11-02 최종 보완): 앱의 가장 높은 겹층(사진 보기 .pv·개인정보 #nwpv 1000, 회의록 801, v110 9000~9800,
   손글씨·노트 note_app.js 9800~9950)보다 위 — 효과 10000 · 토스트 10020 · PC 알림 10030 · 단축키 10040 · 말풍선 10050 · 메뉴 10060 · 확인 창 10080 */
#nw-fx{position:fixed;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:10000}
#nw-fx>*{position:fixed;pointer-events:none}
.nw-fx-glow{border-radius:50%;background:var(--m-glow-img);opacity:0;animation:nw-melt calc(560ms * var(--m-k)) var(--m-ease) both}
.nw-fx-clip{overflow:hidden}
.nw-fx-clip>i{position:absolute;inset:0;display:block}
.nw-fx-sweep>i{background:var(--m-sweep);opacity:0;transform:translateX(-100%);animation:nw-flow calc(520ms * var(--m-k)) var(--m-ease) both}
@keyframes nw-flow{0%{opacity:var(--m-glow);transform:translateX(-100%)}100%{opacity:0;transform:translateX(100%)}}
.nw-fx-tint>i{background:var(--m-ok);opacity:0;animation:nw-tint calc(520ms * var(--m-k)) ease-out both}
@keyframes nw-tint{0%{opacity:calc(.18 * var(--m-glow))}100%{opacity:0}}
.nw-fx-hl>i{background:var(--m-hot);opacity:0;animation:nw-hl calc(1400ms * var(--m-k)) ease-out both}
@keyframes nw-hl{0%{opacity:calc(var(--m-new-a) * var(--m-glow))}100%{opacity:0}}
.nw-fx-pt{width:var(--m-pt-w);height:var(--m-pt-h);margin:calc(var(--m-pt-h) / -2) 0 0 calc(var(--m-pt-w) / -2);border-radius:var(--m-pt-r);background:var(--m-acc);opacity:0;
  animation:nw-burst calc(720ms * var(--m-k)) var(--m-ease) both}
.nw-fx-pt:nth-child(3n+2){background:var(--m-hot)}
.nw-fx-pt:nth-child(3n){background:var(--m-pri)}
@keyframes nw-burst{0%{opacity:var(--m-glow);transform:rotate(var(--a)) translateY(-14px) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-52px) scale(.5)}}

/* ---------- M1 출근 체크 · 쇳물 도장 ---------- */
/* 아무 요소에나: nw-stamp 를 다시 붙이면 '크게 → 눌림 → 제자리' (빛 번짐·줄 흐름은 #nw-fx) */
.nw-stamp{animation:nw-stamp-el calc(420ms * var(--m-k)) var(--m-spring) both}
@keyframes nw-stamp-el{0%{transform:scale(1.22)}55%{transform:scale(.93)}100%{transform:none}}
/* 새로 만드는 체크 단추를 쓸 때 (권장 모양) */
.nw-row{display:flex;align-items:center;gap:10px;background:var(--m-sf);border-radius:12px;padding:10px 12px}
.nw-row .nm{flex:1;font-weight:600;min-width:0}
.nw-chip{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--m-bg);color:var(--m-mu);white-space:nowrap}
.nw-chip.ok{background:color-mix(in srgb,var(--m-ok) 12%,transparent);color:color-mix(in srgb,var(--m-ok) 78%,var(--m-tx))}
.nw-check{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid var(--m-ctl);background:var(--m-sf);display:grid;place-items:center;padding:0;cursor:pointer;flex:none;color:var(--m-on-ok)}
.nw-check svg{width:24px;height:24px;opacity:0;transform:scale(.6)}
.nw-check.is-on{background:var(--m-ok);border-color:var(--m-ok);box-shadow:var(--m-halo)}
.nw-check.is-on svg{opacity:1;transform:none}
.nw-check.nw-stamp{animation:none}
.nw-check.nw-stamp svg{animation:nw-stamp calc(420ms * var(--m-k)) var(--m-spring) both}
@keyframes nw-stamp{0%{opacity:0;transform:scale(1.8) rotate(-14deg)}55%{opacity:1;transform:scale(.86) rotate(2deg)}100%{opacity:1;transform:none}}

/* ---------- M2 업무 완료 · 식어 굳기 ---------- */
.nw-done:not(.nw-task){animation:nw-settle calc(300ms * var(--m-k)) var(--m-spring) both}   /* 아무 줄에나 (완료 빛은 #nw-fx) */
.nw-task{display:flex;gap:10px;align-items:flex-start;background:var(--m-sf);border-radius:12px;padding:12px;position:relative;overflow:hidden;transition:opacity calc(240ms * var(--m-k)) var(--m-ease) calc(200ms * var(--m-k))}
.nw-task .heat{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--m-acc)}
.nw-task .heat::after{content:"";position:absolute;inset:0;background:var(--m-ok);opacity:0;transition:opacity calc(360ms * var(--m-k)) var(--m-ease)}
.nw-task .box{width:24px;height:24px;border-radius:7px;border:2px solid var(--m-ctl);display:grid;place-items:center;flex:none;color:var(--m-on-ok);transition:background-color calc(160ms * var(--m-k)),border-color calc(160ms * var(--m-k))}
.nw-task .box svg{width:16px;height:16px}
.nw-task .box path{stroke-dasharray:24;stroke-dashoffset:24}
.nw-task .tt{font-weight:600;position:relative;display:inline-block}
.nw-task .tt::after{content:"";position:absolute;left:0;right:0;top:55%;height:2px;background:var(--m-mu);transform:scaleX(0);transform-origin:left}
.nw-task .sub{font-size:13px;color:var(--m-mu)}
.nw-task.is-done{opacity:.72}
.nw-task.is-done .heat::after{opacity:1}
.nw-task.is-done .box{background:var(--m-ok);border-color:var(--m-ok)}
.nw-task.is-done .box path{stroke-dashoffset:0}
.nw-task.is-done .tt::after{transform:scaleX(1)}
.nw-task.nw-done .box path{animation:nw-draw calc(260ms * var(--m-k)) var(--m-ease) both}
.nw-task.nw-done .tt::after{animation:nw-strike calc(240ms * var(--m-k)) var(--m-ease) calc(140ms * var(--m-k)) both}
.nw-task.nw-done .box{animation:nw-pop calc(300ms * var(--m-k)) var(--m-spring) both}
@keyframes nw-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes nw-strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- M3 새 알림 배지 · 신경망 핑 ---------- */
/* .nw-new = 배지에 (지금 앱 .nb 는 position:absolute 라 그대로 됨), .nw-ring = 종 단추에 */
.nw-new{animation:nw-pop calc(320ms * var(--m-k)) var(--m-spring) both}
.nw-new::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--m-dg);opacity:0;pointer-events:none;animation:nw-ping calc(620ms * var(--m-k)) var(--m-ease) calc(80ms * var(--m-k)) both}
.nw-ring svg{transform-origin:50% 10%;animation:nw-ring calc(520ms * var(--m-k)) var(--m-ease) both}
@keyframes nw-ring{0%,100%{transform:none}20%{transform:rotate(14deg)}45%{transform:rotate(-10deg)}70%{transform:rotate(5deg)}}
.nw-bell{position:relative;width:48px;height:48px;border-radius:14px;background:var(--m-sf);display:grid;place-items:center;flex:none;color:var(--m-tx)}
.nw-bell svg{width:24px;height:24px}
.nw-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--m-dg);color:var(--m-on-dg);font-size:12px;font-weight:800;line-height:20px;text-align:center;box-shadow:var(--m-halo)}

/* ---------- M4 로딩: 스켈레톤 · 용탕 흐름 · 신경망 노드 (무한 반복은 여기만, 로딩 중일 때만) ---------- */
.nw-skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--m-mu) 16%,transparent);border-radius:8px;height:12px;margin:8px 0}
.nw-skel.w60{width:60%}.nw-skel.w80{width:80%}.nw-skel.h28{height:28px;width:28px;border-radius:50%;margin:0;flex:none}
.nw-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--m-sf) 70%,transparent),transparent);animation:nw-shim 1.4s linear infinite}
@keyframes nw-shim{to{transform:translateX(100%)}}
.nw-pour{position:relative;height:4px;border-radius:4px;overflow:hidden;background:color-mix(in srgb,var(--m-acc) 18%,transparent)}
.nw-pour::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--m-acc) 60%,var(--m-hot));animation:nw-pour 1.2s var(--m-ease) infinite}
@keyframes nw-pour{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.nw-nodes{display:block;width:72px;height:24px;flex:none}
.nw-nodes line{stroke:color-mix(in srgb,var(--m-pri) 40%,transparent);stroke-width:1.5}
.nw-nodes circle{fill:var(--m-pri);animation:nw-node 1.2s ease-in-out infinite}
.nw-nodes circle:nth-of-type(2){animation-delay:.2s}
.nw-nodes circle:nth-of-type(3){animation-delay:.4s}
.nw-nodes circle:nth-of-type(4){animation-delay:.6s}
@keyframes nw-node{0%,100%{opacity:.25}40%{opacity:1}}

/* ---------- M5 화면·탭 전환 ---------- */
/* 화면 안 탭 묶음(새로 만들 때): 밑줄이 미끄러짐. --i = 고른 탭 번호, --n = 탭 수 */
.nw-tabs{display:flex;position:relative;background:var(--m-sf);border-radius:10px;--i:0;--n:3}
.nw-tabs button{flex:1;border:0;background:none;font:inherit;font-weight:600;color:var(--m-mu);padding:10px 0;min-height:44px;cursor:pointer}
.nw-tabs button[aria-selected="true"]{color:var(--m-tx)}
.nw-tabs::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(100% / var(--n));border-radius:3px;background:var(--m-pri);
  transform:translateX(calc(var(--i) * 100%));transition:transform calc(240ms * var(--m-k) * var(--pc-glide)) var(--m-ease)}
/* 지금 앱 폰 아래 탭(.tabs .on): 새로 고른 탭의 아이콘 바탕이 톡 나타남 (nw-motion.js 가 화면이 바뀔 때만 붙임) */
.tabs .on.nw-tabon svg{animation:nw-pill calc(240ms * var(--m-k)) var(--m-spring) both}
@keyframes nw-pill{from{transform:scale(.8);opacity:.5}to{transform:none;opacity:1}}

/* ---------- M6 저장됨 토스트 (nw-motion.js 가 body 에 하나만 만들어 씀) ---------- */
.nw-toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));z-index:10020;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);
  background:var(--m-tx);color:var(--m-sf);padding:10px 18px;border-radius:12px;font-size:14px;font-weight:600;text-align:center;line-height:1.4;
  opacity:0;visibility:hidden;transform:translate(-50%,16px) scale(.96);pointer-events:none}
#app.wide~.nw-toast,#app.tabp~.nw-toast,.nw-toast.is-low{bottom:32px}
/* v1.11.0 검수 보완 L-1: 아래 [되돌리기] 띠(.dgundo 18px · .nwl-undo 84px)가 떠 있으면 알림은 그 위로 (겹쳐 가리지 않게) */
body:has(>.dgundo) #app.wide~.nw-toast,body:has(>.dgundo) #app.tabp~.nw-toast,body:has(>.dgundo) .nw-toast.is-low{bottom:calc(84px + env(safe-area-inset-bottom))}
body:has(>.nwl-undo) .nw-toast{bottom:calc(150px + env(safe-area-inset-bottom))}.nw-toast .dot{position:relative;width:10px;height:10px;border-radius:50%;background:var(--m-ok);flex:none}
.nw-toast[data-kind="err"] .dot{background:var(--m-dg)}
.nw-toast[data-kind="info"] .dot{background:var(--m-pri)}
.nw-toast .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0}
.nw-toast.in{visibility:visible;animation:nw-tin calc(240ms * var(--m-k)) var(--m-ease) both}
.nw-toast.in .dot::after{animation:nw-ping calc(560ms * var(--m-k)) var(--m-ease) calc(120ms * var(--m-k)) both}
.nw-toast.out{visibility:visible;animation:nw-tout calc(180ms * var(--m-k)) ease-in both}
.nw-toast.is-local{position:absolute;bottom:12px;white-space:nowrap}   /* 확인 페이지 무대 안 */
@keyframes nw-tin{from{opacity:0;transform:translate(-50%,16px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes nw-tout{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,8px)}}

/* ---------- M8 길게 눌러 확인 (폰·태블릿: 삭제·일괄 처리 같은 되돌리기 어려운 동작) ---------- */
/* .nw-hold = 동작(채움 막대) — 지금 앱 버튼(.btn.red 등)에 그대로 붙임 · data-nw-hold 속성이 있어야 JS 가 잡음 */
.nw-hold{position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.nw-hold::before{content:"";position:absolute;inset:0;background:var(--m-dg);opacity:.2;transform:scaleX(0);transform-origin:left;pointer-events:none;
  transition:transform calc(200ms * var(--m-k)) var(--m-ease)}
.nw-hold.holding::before{transform:scaleX(1);transition:transform 900ms linear}   /* 0.9초는 안전 시간이라 강도와 무관하게 고정 */
.nw-hold>*{position:relative}
.nw-hold.ok{animation:nw-settle calc(260ms * var(--m-k)) var(--m-spring)}
.nw-hold.ok::before{transform:scaleX(1);opacity:.32;transition:none}
/* 새로 만들 때 권장 모양 */
.nw-hold-look{width:100%;min-height:48px;border-radius:12px;border:2px solid var(--m-dg);background:var(--m-sf);color:var(--m-dg);font:inherit;font-weight:700;cursor:pointer}
.nw-hold-look.ok{background:var(--m-dg);color:var(--m-on-dg)}
.nw-hint{font-size:13px;color:var(--m-mu);margin-top:8px;min-height:20px}

/* ---------- M9 오늘 할 일 다 끝냄 · 작은 축하 (입자는 #nw-fx) ---------- */
.nw-cele{display:flex;align-items:center;gap:22px;padding:22px 0 22px 26px}
.nw-ringp{position:relative;width:56px;height:56px;flex:none}
.nw-ringp svg{width:56px;height:56px;transform:rotate(-90deg)}
.nw-ringp .bg{stroke:color-mix(in srgb,var(--m-mu) 22%,transparent)}
.nw-ringp .fg{stroke:var(--m-ok);stroke-dasharray:138.2;stroke-dashoffset:var(--off,0);transition:stroke-dashoffset calc(420ms * var(--m-k)) var(--m-ease)}
.nw-ringp b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-variant-numeric:tabular-nums}
.nw-cmsg b{display:block;font-size:15px}

/* ---------- M10 사진 첨부·업로드 (사진이 아래부터 차오름) — --u = 0~1 진행률 ---------- */
.nw-up{display:flex;gap:12px;align-items:center}
.nw-up>div{flex:1;font-size:13px;min-width:0}
.nw-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;flex:none;background:linear-gradient(160deg,#a9b8c6 0 42%,#77889a 42% 68%,#56636f 68%)}
.nw-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.nw-thumb .veil{position:absolute;inset:0;background:rgba(15,20,25,.6);transform-origin:top;transform:scaleY(calc(1 - var(--u,1)));transition:transform 160ms linear}
.nw-thumb .ck{position:absolute;right:4px;bottom:4px;width:20px;height:20px;border-radius:50%;background:var(--m-ok);color:var(--m-on-ok);display:grid;place-items:center;transform:scale(0)}
.nw-thumb .ck svg{width:12px;height:12px}
.nw-up.is-done .ck{transform:none}
.nw-up.nw-fin .ck{animation:nw-pop calc(300ms * var(--m-k)) var(--m-spring) both}
.nw-up.nw-reset .veil,.nw-up.nw-reset .nw-pbar i{transition:none}
.nw-pbar{height:6px;border-radius:6px;background:color-mix(in srgb,var(--m-mu) 18%,transparent);overflow:hidden;margin-top:6px}
.nw-pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--m-acc),var(--m-hot));transform-origin:left;transform:scaleX(var(--u,1));transition:transform 160ms linear}
.nw-up .pct{font-variant-numeric:tabular-nums;color:var(--m-mu);font-size:13px}

/* ---------- M11 오류 흔들림 (입력 누락) ---------- */
/* 아무 입력칸에나: .nw-err(빨간 테) + nw-shake 다시 붙이기. 지금 앱 .inp 에 그대로 붙음 */
.nw-shake{animation:nw-shake calc(340ms * var(--m-k)) var(--m-ease)}
@keyframes nw-shake{0%,100%{transform:none}20%{transform:translateX(calc(var(--m-shake) * -1))}40%{transform:translateX(var(--m-shake))}60%{transform:translateX(calc(var(--m-shake) * -.6))}80%{transform:translateX(calc(var(--m-shake) * .4))}}
.nw-err,.nw-field.err input{border-color:var(--m-dg)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--m-dg) 20%,transparent)!important}
.nw-errmsg,.nw-field .msg{color:var(--m-dg);font-size:13px;font-weight:700;margin-top:6px}
.nw-errmsg{animation:nw-enter calc(200ms * var(--m-k)) var(--m-ease) both}
.nw-field label{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.nw-field input{width:100%;min-height:44px;border:1.5px solid var(--m-ctl);border-radius:10px;padding:0 12px;font:inherit;background:var(--m-sf);color:var(--m-tx)}
.nw-field .msg{display:none}
.nw-field.err .msg{display:block;animation:nw-enter calc(200ms * var(--m-k)) var(--m-ease) both}
.nw-field.nw-shake{animation:none}
.nw-field.nw-shake input{animation:nw-shake calc(340ms * var(--m-k)) var(--m-ease)}

/* ---------- M12 목록 새 항목 (위에서 내려앉음 + 노랑 형광 잠깐) ---------- */
.nw-in{animation:nw-drop calc(260ms * var(--m-k)) var(--m-ease) both}
@keyframes nw-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* '새로' 꼬리표: 주색 바탕이 꽉 찬 꼬리표 → 테마 1·2·4·5 × 라이트·다크 모두 4.5:1 이상 (11-02 검수 지적 3.9:1 해결 — 예전엔 빨강 글자) */
.nw-newtag{display:inline-block;font-size:12px;font-weight:800;line-height:18px;padding:0 6px;border-radius:5px;background:var(--m-pri);color:var(--m-on-pri);margin-right:6px;vertical-align:1px;white-space:nowrap}
.nw-feed{display:flex;flex-direction:column;gap:8px}
.nw-feed .it{background:var(--m-sf);border-radius:10px;padding:10px 12px;font-size:13px;flex:none}

/* ---------- M13 앱 시작 화면 (하루 첫 실행만, 로딩을 늦추지 않음) ---------- */
/* 앱: index.html 의 '불러오는 중' 로고(#app .lg img)에 nw-motion.js 가 html.nw-boot 를 잠깐 붙임 */
html.nw-boot #app .lg img,html.nw-boot #app .lg svg{animation:nw-mark calc(380ms * var(--m-k)) var(--m-spring) both}
html.nw-boot #app .login h1{animation:nw-enter calc(260ms * var(--m-k)) var(--m-ease) calc(200ms * var(--m-k)) both}
@keyframes nw-mark{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.nw-splash{display:grid;place-items:center;align-content:center;gap:10px}
.nw-mark{position:relative;width:64px;height:64px}
.nw-mark img,.nw-mark svg{position:relative;display:block;width:64px;height:64px;border-radius:22%}
.nw-splash.go .nw-mark img,.nw-splash.go .nw-mark svg{animation:nw-mark calc(380ms * var(--m-k)) var(--m-spring) both}
.nw-word{font-weight:800;letter-spacing:.16em;font-size:15px;text-align:center}
.nw-word small{display:block;letter-spacing:0;font-size:12px;font-weight:600;color:var(--m-mu)}
.nw-splash.go .nw-word{animation:nw-enter calc(260ms * var(--m-k)) var(--m-ease) calc(240ms * var(--m-k)) both}

/* ---------- M14 숫자 카운트업 (값이 바뀔 때만) — 글자 바꿈은 JS, 여기는 밑줄만 ---------- */
.nw-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nw-stat{background:var(--m-sf);border-radius:10px;padding:10px 12px}
.nw-stat .k{font-size:13px;color:var(--m-mu)}
.nw-stat .v{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25}
.nw-stat .v small{font-size:13px;font-weight:600;color:var(--m-mu);margin-left:2px}
.nw-stat .u{height:3px;border-radius:3px;background:var(--m-acc);transform:scaleX(0);transform-origin:left;margin-top:4px;opacity:0}
.nw-counted .u{animation:nw-uline calc(640ms * var(--m-k)) var(--m-ease) both}
@keyframes nw-uline{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ---------- M15 스와이프로 처리 + 되돌리기 ---------- */
.nw-sw{position:relative;border-radius:12px;overflow:hidden;background:var(--m-ok);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.nw-sw .act{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:16px;color:var(--m-on-ok);font-weight:800;font-size:15px}
.nw-sw .act span{transform:scale(calc(.8 + .2 * var(--sp,0)));opacity:calc(.45 + .55 * var(--sp,0))}
.nw-sw .front{position:relative;background:var(--m-sf);padding:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;transform:translateX(var(--sx,0px));cursor:grab;font-size:13px}
.nw-sw .front b{display:block;font-size:14px}
.nw-sw.settle .front{transition:transform calc(220ms * var(--m-k)) var(--m-ease)}
.nw-undo{display:none;align-items:center;justify-content:space-between;gap:8px;background:var(--m-sf);border-radius:12px;padding:4px 4px 4px 12px;font-size:13px}
.nw-undo button{border:0;background:none;color:var(--m-pri);font:inherit;font-weight:800;min-height:44px;min-width:44px;padding:0 12px;cursor:pointer}
.nw-swwrap.is-gone .nw-sw{display:none}
.nw-swwrap.is-gone .nw-undo{display:flex;animation:nw-enter calc(220ms * var(--m-k)) var(--m-ease) both}

/* =====================================================================
 * PC 효과 M16~M23 — PC 프로그램(WebView2)·넓은 화면(.wide). 진짜 마우스 올림은 (hover:hover) and (pointer:fine) 에서만.
 * ===================================================================== */

/* ---------- M16 마우스 올림·누름 (버튼·카드에만 — 목록 줄·표 줄은 M18 바탕색만) ---------- */
.wide .btn,.wide .top .act,.pc-hv{position:relative;transition:transform calc(120ms * var(--m-k)) var(--m-ease),background-color calc(120ms * var(--m-k)),border-color calc(120ms * var(--m-k))}
.wide .btn::after,.wide .top .act::after,.pc-hv::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--pc-shadow);opacity:0;pointer-events:none;transition:opacity calc(120ms * var(--m-k))}
@media (hover:hover) and (pointer:fine){
  .wide .btn:hover,.wide .top .act:hover,.pc-hv:hover{transform:translateY(calc(-1px * var(--pc-lift)))}
  .pc-hv.pc-card:hover{transform:translateY(calc(-2px * var(--pc-lift)));border-color:color-mix(in srgb,var(--m-pri) 45%,var(--m-line))}
  .wide .btn:hover::after,.wide .top .act:hover::after,.pc-hv:hover::after{opacity:1}
}
.wide .btn:active,.wide .top .act:active,.pc-hv:active{transform:scale(calc(1 - .02 * var(--pc-lift)));transition-duration:calc(90ms * var(--m-k))}
.wide .btn:active::after,.wide .top .act:active::after,.pc-hv:active::after{opacity:.35}
.wide .btn:disabled,.wide .btn:disabled:hover{transform:none}
.wide .btn:disabled::after{opacity:0}
/* 누른 자리 물결 (nw-motion.js 가 pointerdown 자리에 만듦) */
.pc-rw{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.pc-rip{position:absolute;left:0;top:0;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;background:var(--m-acc);pointer-events:none;opacity:0;
  animation:pc-rip calc(380ms * var(--m-k)) var(--m-ease) both}
.btn.pri .pc-rip,.pc-hv.pri .pc-rip{background:var(--m-hot)}
@keyframes pc-rip{0%{opacity:calc(.3 * var(--m-glow));transform:scale(.15)}100%{opacity:0;transform:scale(1)}}

/* ---------- M17 왼쪽 메뉴 이동 (선택 표시가 미끄러짐) ---------- */
/* nw-motion.js: 화면이 바뀌면 옛 자리 → 새 자리로 선택 표시(.pc-navghost)를 옮기는 동안만 진짜 .on 바탕을 감춤 */
.side .snav{position:relative}
.side .snav button:focus-visible{--pc-off:-2px}
.pc-navghost{position:absolute;left:10px;right:10px;top:0;border-radius:8px;background:var(--side-on,var(--pc-sel));pointer-events:none;z-index:0;
  transition:transform calc(200ms * var(--m-k) * var(--pc-glide)) var(--m-ease),height calc(200ms * var(--m-k) * var(--pc-glide)) var(--m-ease)}
.pc-navghost::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--m-pri)}
.pc-gliding .on,.pc-gliding .on:hover{background:transparent!important;box-shadow:none!important}
.pc-gliding .on:before{opacity:0}
.pc-gliding button{z-index:1}
.pc-in-anim{animation:pc-in calc(200ms * var(--m-k)) var(--m-ease) both}
@keyframes pc-in{from{opacity:0;transform:translateY(calc(6px * var(--pc-lift)))}to{opacity:1;transform:none}}
/* 새로 만들 때(확인 페이지): 한 요소짜리 선택 표시 */
.pc-nav{position:relative;padding:8px;display:flex;flex-direction:column;gap:2px}
.pc-nav button{position:relative;z-index:1;display:flex;align-items:center;gap:8px;height:40px;padding:0 8px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--m-mu);text-align:left;cursor:pointer;white-space:nowrap}
.pc-nav button[aria-current="page"]{color:color-mix(in srgb,var(--m-pri) 78%,var(--m-tx));font-weight:800}
@media (hover:hover) and (pointer:fine){.pc-nav button:not([aria-current]):hover{background:var(--pc-tint);color:var(--m-tx)}}
@media (pointer:coarse){.pc-nav button{height:44px}}
.pc-nav .pc-navghost{left:8px;right:8px}
.pc-nav .pc-navghost::before{left:-8px}

/* ---------- M18 표 줄 강조 (올린 줄 · 고른 줄 · 새 줄) ---------- */
/* 대상: 지금 앱 .tbl tr.click (app.css 566~568 — 출근현황 취합·설비 이력 등) · .tl-t tr.click (tools.css 148·149 — 공구 재고).
   고른 줄 바탕은 앱·테마 규칙 그대로 두고(.sel), 여기서는 왼쪽 3px 막대만 더함. 표 칸은 바탕색만 바뀜(글자 안 움직임) */
.tbl tr.click td,.tl-t tr.click td{transition:background-color calc(100ms * var(--m-k))}
.tbl tr.click td:first-child,.tl-t tr.click td:first-child{position:relative}
.tbl tr.click td:first-child::before,.tl-t tr.click td:first-child::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:0 3px 3px 0;background:var(--m-mu);
  transform:scaleY(0);transition:transform calc(120ms * var(--m-k)) var(--m-ease)}
@media (hover:hover) and (pointer:fine){
  .tbl tr.click:not(.sel):hover td,.tl-t tr.click:not(.sel):hover td{background:var(--pc-tint)}
  .tbl tr.click:hover td:first-child::before,.tl-t tr.click:hover td:first-child::before{transform:scaleY(1)}
}
.tbl tr.sel td:first-child::before,.tl-t tr.sel td:first-child::before{transform:none;background:var(--m-pri)}
/* 새로 들어온 줄: 노랑 형광펜이 1.6초에 걸쳐 옅어짐 (빨강·분홍 = ▲지연·오류, 주색 = 고른 줄 이라 안 씀) */
tr.pc-rownew td{animation:pc-hlbg calc(1600ms * var(--m-k)) ease-out}
@keyframes pc-hlbg{0%{background-color:color-mix(in srgb,var(--pc-new) var(--pc-new-a),var(--m-sf))}100%{background-color:transparent}}
tr.pc-rownew td:first-child::before{animation:pc-hlbar calc(1600ms * var(--m-k)) ease-out}
@keyframes pc-hlbar{0%,30%{transform:none;background-color:var(--pc-new);opacity:1}100%{transform:none;background-color:var(--pc-new);opacity:0}}

/* ---------- M19 단축키 표시 (오른쪽 위에 누른 키, 0.9초) ---------- */
.pc-keys{position:fixed;right:16px;top:64px;z-index:10040;display:flex;align-items:center;gap:4px;pointer-events:none;opacity:0;visibility:hidden;
  transform:translateY(calc(-6px * var(--pc-lift)));transition:opacity calc(160ms * var(--m-k)),transform calc(160ms * var(--m-k)) var(--m-ease),visibility 0s linear calc(160ms * var(--m-k))}
.pc-keys.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pc-keys.is-local{position:absolute;right:10px;top:10px}
.pc-keys .pl{font-size:13px;font-weight:800;color:var(--m-mu)}
.pc-keys kbd{font:inherit;font-size:13px;font-weight:800;line-height:1;min-width:32px;height:30px;padding:0 8px;display:inline-grid;place-items:center;border-radius:7px;
  background:var(--m-sf);color:var(--m-tx);border:1px solid var(--m-line2);box-shadow:0 2px 0 var(--m-line2);transition:transform 80ms,box-shadow 80ms,border-color 80ms}
.pc-keys kbd.dn{transform:translateY(calc(2px * var(--pc-lift)));box-shadow:0 0 0 calc(3px * var(--m-glow)) var(--pc-ring);border-color:var(--m-pri)}
.pc-kpress{transform:scale(calc(1 - .02 * var(--pc-lift)))!important}
.pc-khint{font-size:12px;font-weight:700;padding:1px 6px;border-radius:5px;border:1px solid color-mix(in srgb,currentColor 55%,transparent);opacity:.92;margin-left:6px}
@media not all and (hover:hover){.pc-khint{display:none}}   /* 'Ctrl+S' 꼬리표는 마우스 있는 기기에서만 */

/* ---------- M20 키보드 이동 테두리 (버튼은 착 붙음, 입력칸은 색만) ---------- */
/* 지금 theme.css: #app button:focus-visible{outline:2px solid var(--focus);outline-offset:2px} — 테두리 모양·색은 테마 그대로, 붙는 움직임만 더함 */
.wide button:focus-visible,.wide a:focus-visible,.wide [tabindex]:focus-visible,.pc-kf:focus-visible{animation:pc-snap calc(150ms * var(--m-k)) var(--m-ease)}
.wide input:focus-visible,.wide select:focus-visible,.wide textarea:focus-visible{animation:none}
@keyframes pc-snap{from{outline-offset:calc(var(--pc-off,2px) + 6px * var(--pc-lift));outline-color:transparent}}

/* ---------- M21 말풍선 도움말 · 오른쪽 클릭 메뉴 (nw-motion.js 가 body 에 하나씩 만들어 씀) ---------- */
.pc-tip{position:fixed;left:0;top:0;z-index:10050;background:var(--m-tx);color:var(--m-sf);font-size:12px;font-weight:700;line-height:1.3;padding:5px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transform:translate(var(--tx,0px),calc(var(--ty,0px) - 4px * var(--pc-lift)));
  transition:opacity calc(80ms * var(--m-k)),transform calc(80ms * var(--m-k)),visibility 0s linear calc(80ms * var(--m-k))}
.pc-tip.on{opacity:1;visibility:visible;transform:translate(var(--tx,0px),var(--ty,0px));transition-duration:calc(140ms * var(--m-k)),calc(140ms * var(--m-k)),0s;transition-delay:0s}
.pc-menu{position:fixed;left:0;top:0;z-index:10060;min-width:168px;background:var(--m-sf);color:var(--m-tx);border:1px solid var(--m-line2);border-radius:10px;padding:4px;box-shadow:var(--pc-pop);
  opacity:0;visibility:hidden;transform-origin:0 0;transform:translate(var(--mx,0px),var(--my,0px)) scale(calc(1 - .04 * var(--pc-lift)));
  transition:opacity calc(100ms * var(--m-k)),transform calc(100ms * var(--m-k)) var(--m-ease),visibility 0s linear calc(100ms * var(--m-k))}
.pc-menu.on{opacity:1;visibility:visible;transform:translate(var(--mx,0px),var(--my,0px));transition-duration:calc(120ms * var(--m-k)),calc(120ms * var(--m-k)),0s;transition-delay:0s}
.pc-menu button{display:flex;width:100%;align-items:center;min-height:36px;padding:0 10px;border:0;border-radius:7px;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--m-tx);text-align:left;cursor:pointer}
.pc-menu button.dg{color:var(--m-dg)}
.pc-menu button:focus-visible{background:var(--pc-sel);outline:none;animation:none}
@media (hover:hover) and (pointer:fine){.pc-menu button:hover{background:var(--pc-sel)}}
@media (pointer:coarse){.pc-menu button{min-height:44px}}

/* ---------- M22 창 열고 닫기 (+ PC 삭제 확인 창) ---------- */
/* 지금 앱 창(.modal > .sheet)을 넓은 화면에서: 열 때 8px 올라오며 0.97→1 + 뒤 어둡게, 닫을 때 더 빨리. 폰 아래 판은 그대로 */
.wide .modal.nw-open{animation:nw-fade calc(160ms * var(--m-k)) linear both}
.wide .modal.nw-open>.sheet{animation:pc-dlgin calc(200ms * var(--m-k)) var(--m-ease) both}
.wide .modal.nw-closing{animation:pc-fadeout calc(140ms * var(--m-k)) ease-in both;pointer-events:none}
.wide .modal.nw-closing>.sheet{animation:pc-dlgout calc(140ms * var(--m-k)) ease-in both}
@keyframes pc-dlgin{from{opacity:0;transform:translateY(calc(8px * var(--pc-lift))) scale(calc(1 - .03 * var(--pc-lift)))}to{opacity:1;transform:none}}
@keyframes pc-dlgout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(6px * var(--pc-lift))) scale(calc(1 - .02 * var(--pc-lift)))}}
@keyframes pc-fadeout{from{opacity:1}to{opacity:0}}
/* NWMotion.ask() 가 PC 에서 띄우는 확인 창 (confirm() 대신) */
.nw-dlgwrap{position:fixed;inset:0;z-index:10080;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--pc-scrim)}
.nw-dlg{width:min(400px,100%);background:var(--m-sf);color:var(--m-tx);border-radius:14px;padding:20px;box-shadow:var(--pc-pop)}
.nw-dlg h3{margin:0 0 6px;font-size:18px;font-weight:800}
.nw-dlg p{margin:0 0 16px;font-size:14px;color:var(--m-mu);white-space:pre-line;line-height:1.5}
.nw-dlg .bt{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.nw-dlg .bt button{min-height:44px;padding:0 18px;border-radius:10px;border:1px solid var(--m-ctl);background:var(--m-sf);color:var(--m-tx);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.nw-dlg .bt .ok{background:var(--m-pri);border-color:var(--m-pri);color:var(--m-on-pri)}
.nw-dlg .bt .ok.dg{background:var(--m-dg);border-color:var(--m-dg);color:var(--m-on-dg)}
.nw-dlgwrap.nw-open{animation:nw-fade calc(160ms * var(--m-k)) linear both}
.nw-dlgwrap.nw-open .nw-dlg{animation:pc-dlgin calc(200ms * var(--m-k)) var(--m-ease) both}
.nw-dlgwrap.nw-closing{animation:pc-fadeout calc(140ms * var(--m-k)) ease-in both;pointer-events:none}
.nw-dlgwrap.nw-closing .nw-dlg{animation:pc-dlgout calc(140ms * var(--m-k)) ease-in both}

/* ---------- M23 PC 알림 (창이 열려 있을 때 앱 안 오른쪽 아래 카드 5초) — 창이 내려가 있으면 Windows 알림 + 작업표시줄(C#) ---------- */
.pc-ntf{position:fixed;right:16px;bottom:16px;z-index:10030;width:min(320px,calc(100vw - 32px));display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;
  background:var(--m-sf);color:var(--m-tx);border:1px solid var(--m-line2);box-shadow:var(--pc-pop);cursor:pointer;text-align:left;font:inherit;
  opacity:0;visibility:hidden;transform:translateX(calc(24px * var(--pc-lift)));
  transition:opacity calc(160ms * var(--m-k)) ease-in,transform calc(160ms * var(--m-k)) ease-in,visibility 0s linear calc(160ms * var(--m-k))}
.pc-ntf.on{opacity:1;visibility:visible;transform:none;transition:opacity calc(260ms * var(--m-k)) var(--m-ease),transform calc(260ms * var(--m-k)) var(--m-ease),visibility 0s}
.pc-ntf.is-local{position:absolute;right:10px;bottom:10px}
.pc-ntf .ic{width:28px;height:28px;flex:none;border-radius:22%;overflow:hidden}
.pc-ntf .ic img{display:block;width:100%;height:100%}
.pc-ntf .tx{display:flex;flex-direction:column;min-width:0;font-size:13px}
.pc-ntf .ap{font-size:12px;font-weight:700;color:var(--m-mu)}
.pc-ntf .ti{font-size:14px;font-weight:800}
.pc-ntf .bd{color:var(--m-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
 * 가볍게 (설정 '움직임: 가볍게' = html[data-nw-motion="lite"]) — 길이 0.6배, 빛·흐름·입자·흔들림 없음, 이동은 투명도로
 * ===================================================================== */
:root[data-nw-motion="lite"]{--m-k:.6;--m-glow:0;--pc-lift:0;--pc-glide:0}
:root[data-nw-motion="lite"] #nw-fx,
:root[data-nw-motion="lite"] .nw-toast .dot::after,
:root[data-nw-motion="lite"] .nw-skel::after,
:root[data-nw-motion="lite"] .nw-stat .u,
:root[data-nw-motion="lite"] .nw-new::after,
:root[data-nw-motion="lite"] .pc-rip{display:none}
:root[data-nw-motion="lite"] .nw-shake,
:root[data-nw-motion="lite"] .nw-field.nw-shake input,
:root[data-nw-motion="lite"] .nw-ring svg,
:root[data-nw-motion="lite"] .nw-hold.ok,
:root[data-nw-motion="lite"] .wide button:focus-visible,:root[data-nw-motion="lite"] .wide a:focus-visible,:root[data-nw-motion="lite"] .wide [tabindex]:focus-visible,:root[data-nw-motion="lite"] .pc-kf:focus-visible{animation:none}
:root[data-nw-motion="lite"] .nw-stamp,
:root[data-nw-motion="lite"] .nw-check.nw-stamp svg,
:root[data-nw-motion="lite"] .nw-new,
:root[data-nw-motion="lite"] .nw-done:not(.nw-task),
:root[data-nw-motion="lite"] .nw-task.nw-done .box,
:root[data-nw-motion="lite"] .nw-task.nw-done .box path,
:root[data-nw-motion="lite"] .nw-task.nw-done .tt::after,
:root[data-nw-motion="lite"] .nw-in,
:root[data-nw-motion="lite"] .nw-enter,
:root[data-nw-motion="lite"] .nw-up.nw-fin .ck,
:root[data-nw-motion="lite"] .tabs .on.nw-tabon svg,
:root.nw-boot[data-nw-motion="lite"] #app .lg img,:root.nw-boot[data-nw-motion="lite"] #app .lg svg,:root.nw-boot[data-nw-motion="lite"] #app .login h1,
:root[data-nw-motion="lite"] .nw-splash.go .nw-word,
:root[data-nw-motion="lite"] .nw-splash.go .nw-mark img,:root[data-nw-motion="lite"] .nw-splash.go .nw-mark svg{animation-name:nw-fade}
:root[data-nw-motion="lite"] .nw-field.err .msg,:root[data-nw-motion="lite"] .nw-errmsg,:root[data-nw-motion="lite"] .nw-swwrap.is-gone .nw-undo{animation-name:nw-fade}
:root[data-nw-motion="lite"] .nw-toast{transform:translateX(-50%)}
:root[data-nw-motion="lite"] .nw-toast.in{animation-name:nw-fade}
:root[data-nw-motion="lite"] .nw-toast.out{animation-name:pc-fadeout}
:root[data-nw-motion="lite"] .nw-pour::before,:root[data-nw-motion="lite"] .nw-nodes circle{animation-duration:2s}
:root[data-nw-motion="lite"] .nw-press:active{transform:none;filter:brightness(.92)}
:root[data-nw-motion="lite"] .tbl tr.click td:first-child::before,:root[data-nw-motion="lite"] .tl-t tr.click td:first-child::before{transition:none}
/* M18 새 줄 형광: 가볍게에서는 '짧게만' 약속대로 0.3초 (11-02 최종 보완 — 전엔 1.6초×0.6 = 0.96초) */
:root[data-nw-motion="lite"] tr.pc-rownew td,:root[data-nw-motion="lite"] tr.pc-rownew td:first-child::before{animation-duration:300ms}

/* 기기 '움직임 줄이기' — 자바스크립트가 없어도 가볍게와 같게 (기기 설정 우선) */
@media (prefers-reduced-motion:reduce){
  :root,:root[data-nw-motion]{--m-k:.6;--m-glow:0;--pc-lift:0;--pc-glide:0}
  #nw-fx,.nw-toast .dot::after,.nw-skel::after,.nw-stat .u,.nw-new::after,.pc-rip{display:none}
  .nw-shake,.nw-field.nw-shake input,.nw-ring svg,.nw-hold.ok,.wide button:focus-visible,.wide a:focus-visible,.wide [tabindex]:focus-visible,.pc-kf:focus-visible{animation:none}
  .nw-stamp,.nw-check.nw-stamp svg,.nw-new,.nw-done:not(.nw-task),.nw-task.nw-done .box,.nw-task.nw-done .box path,.nw-task.nw-done .tt::after,.nw-in,.nw-enter,.nw-up.nw-fin .ck,.tabs .on.nw-tabon svg,
  html.nw-boot #app .lg img,html.nw-boot #app .lg svg,html.nw-boot #app .login h1,.nw-splash.go .nw-word,.nw-splash.go .nw-mark img,.nw-splash.go .nw-mark svg{animation-name:nw-fade}
  .nw-field.err .msg,.nw-errmsg,.nw-swwrap.is-gone .nw-undo{animation-name:nw-fade}
  .nw-toast{transform:translateX(-50%)}
  .nw-toast.in{animation-name:nw-fade}
  .nw-toast.out{animation-name:pc-fadeout}
  .nw-pour::before,.nw-nodes circle{animation-duration:2s}
  .nw-press:active{transform:none;filter:brightness(.92)}
  .tbl tr.click td:first-child::before,.tl-t tr.click td:first-child::before{transition:none}
  tr.pc-rownew td,tr.pc-rownew td:first-child::before{animation-duration:300ms}
}

/* 오래된 안드로이드 WebView(크롬 111 미만)는 color-mix 를 모름 → 고정 반투명색 */
@supports not (color:color-mix(in srgb,red,blue)){
  :root{--m-line:rgba(95,107,118,.22);--m-line2:rgba(95,107,118,.45);--m-ctl:var(--m-mu);--pc-tint:rgba(95,107,118,.11);--pc-sel:rgba(94,131,224,.16);--pc-ring:rgba(94,131,224,.3)}
  .nw-chip.ok{background:rgba(46,155,106,.14);color:var(--m-ok)}
  .nw-skel{background:rgba(95,107,118,.16)}
  .nw-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
  .nw-pour{background:rgba(240,138,60,.18)}
  .nw-nodes line{stroke:rgba(94,131,224,.4)}
  .nw-ringp .bg{stroke:rgba(95,107,118,.22)}
  .nw-pbar{background:rgba(95,107,118,.18)}
  .nw-err,.nw-field.err input{box-shadow:0 0 0 3px rgba(229,99,106,.2)!important}
  .pc-nav button[aria-current="page"]{color:var(--m-pri)}
  .pc-khint{border-color:currentColor}
  @keyframes pc-hlbg{0%{background-color:rgba(255,210,122,.3)}100%{background-color:transparent}}
}