/* ===== WERP 유리 디자인 (2026-10-08 전 직원 적용) — html.glass 일 때만 적용 (화면 파일 head 에서 붙임) =====
   · 은은한 색 번짐 배경 + 반투명 유리 카드 · 사이드바는 짙은 유리(로고가 흰 글씨라)
   · 그림 배너는 뒤 판을 걷어 내고 유리 카드 위에 그림만 (바탕 무늬는 옅게)
   · 둥근 모서리만큼 안쪽 여백을 넓혀 글씨가 잘리지 않게
   · 숫자(카드 숫자 · 패널 제목)는 Outfit 가는 굵기 — 서버에 직접 올린 글꼴(SIL OFL 1.1) */
@font-face{font-family:"Outfit";font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/outfit-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20A9,U+20AC,U+2190-21FF}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/outfit-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20A9,U+20AC,U+2190-21FF}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/outfit-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20A9,U+20AC,U+2190-21FF}

html.glass{--gl-card:rgba(255,255,255,.56);--gl-card2:rgba(255,255,255,.72);--gl-line:rgba(255,255,255,.82);--gl-sh:0 10px 34px rgba(40,70,60,.07);--gl-blur:blur(18px) saturate(150%);--gl-r:20px;background:#edf2f0}
html.glass body{background:transparent!important}
/* 색 번짐 배경 — 옷 파일만으로 바로 그림 (화면이 열리는 순간부터, 스크립트 없이) */
html.glass::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(40vw 40vw at 66% 6%,rgba(255,226,122,.85),rgba(255,213,77,.32) 42%,rgba(255,213,77,0) 70%),
  radial-gradient(30vw 30vw at 86% 66%,rgba(255,179,138,.55),rgba(255,179,138,0) 70%),
  radial-gradient(36vw 36vw at 6% 8%,rgba(185,212,234,.85),rgba(185,212,234,0) 70%),
  radial-gradient(36vw 36vw at 24% 88%,rgba(191,230,207,.85),rgba(191,230,207,0) 70%),#edf2f0}

/* ---- 사이드바: 밝은 유리 (로고는 어두운 글씨 판 logo-dark.png 로 바꿔 끼움) ---- */
html.glass .app-sidebar{background:rgba(255,255,255,.46)!important;color:#33475b!important;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-right:1px solid rgba(255,255,255,.75);box-shadow:4px 0 30px rgba(40,70,60,.06)}
html.glass .app-sidebar img.brand-logo{content:url(/img/logo-dark.png)}
html.glass .app-sidebar .brand,html.glass .app-sidebar .brand-werp{color:#2c5c46!important}
html.glass .app-sidebar .brand-div{background:rgba(32,49,60,.18)!important}
html.glass .app-sidebar .nav-group,html.glass .app-sidebar .sn-group{color:#33475b!important}
html.glass .app-sidebar .nav-group:hover,html.glass .app-sidebar .sn-group:hover{background:rgba(255,255,255,.6)!important;color:#1d2a33!important;border-radius:12px}
html.glass .app-sidebar .nav-group.has-active,html.glass .app-sidebar .sn-group.has-active{background:rgba(255,255,255,.72)!important;color:#1d2a33!important;border-radius:12px;box-shadow:0 4px 14px rgba(40,70,60,.06)}
html.glass .app-sidebar .ng-icon svg{color:#6b8291!important}
html.glass .app-sidebar .sn-group:hover .ng-icon svg,html.glass .app-sidebar .nav-group:hover .ng-icon{color:#33475b!important}
html.glass .app-sidebar .sn-block.cur > .sn-group .ng-icon svg{color:#2f9e44!important}
html.glass .app-sidebar .sn-chev,html.glass .app-sidebar .nav-group .ng-caret{color:#8a98a2!important}
html.glass .app-sidebar .sn-sub,html.glass .app-sidebar .sn-wrap .nav-group{color:#8a98a2!important}
html.glass .app-sidebar .sn-wrap .nav-group.has-active{color:#5d6e79!important;background:none!important;box-shadow:none}
html.glass .app-sidebar .sn-sep{background:rgba(32,49,60,.08)!important}
html.glass .app-sidebar .nav-kids::before{background:rgba(32,49,60,.10)!important}
html.glass .app-sidebar .nav-link,html.glass .app-sidebar .nav-kids .nav-link{color:#4a5b68!important}
html.glass .app-sidebar .nav-link:hover,html.glass .app-sidebar .nav-kids .nav-link:hover{background:rgba(255,255,255,.62)!important;color:#1d2a33!important;border-radius:12px}
html.glass .app-sidebar .nav-link.active,html.glass .app-sidebar .nav-kids .nav-link.active{background:rgba(255,255,255,.92)!important;color:#1f6b33!important;font-weight:600;border-radius:12px;box-shadow:0 4px 14px rgba(40,70,60,.08)}
html.glass .app-sidebar .nav-kids .nav-link.active::before{background:#2f9e44!important;box-shadow:none!important}
html.glass .app-sidebar .nav-link .cnt{background:rgba(32,49,60,.08)!important;color:#4a5b68!important}
html.glass .app-sidebar .nav-link.active .cnt{background:rgba(63,143,87,.14)!important;color:#1f6b33!important}
html.glass .app-sidebar .profile{border-top:1px solid rgba(32,49,60,.08)!important;color:#20313c!important}
html.glass .app-sidebar .profile .avatar{background:rgba(63,143,87,.14)!important;color:#1f6b33!important}
html.glass .app-sidebar .profile-name small{color:#8a98a2!important}

/* ---- 위쪽 줄: 투명 + 알약 모양 ---- */
html.glass .topbar{background:rgba(255,255,255,.30)!important;border-bottom:1px solid rgba(255,255,255,.6)!important;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:none!important}
html.glass .tb-box,html.glass .tb-todo-btn,html.glass .tb-erp,html.glass .topbar .btn{background:var(--gl-card)!important;border:1px solid var(--gl-line)!important;border-radius:999px!important;box-shadow:0 4px 16px rgba(40,70,60,.06)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html.glass .tb-box{padding-left:16px!important;padding-right:14px!important}
html.glass .tb-pop{background:rgba(250,252,251,.92)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:18px!important;border:1px solid var(--gl-line)!important}

/* ---- 그림 배너: 뒤 판 걷기 ---- */
html.glass .hero{background:rgba(255,255,255,.40)!important;border:1px solid var(--gl-line)!important;border-radius:24px!important;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:var(--gl-sh)}
html.glass .hero svg path[fill="url(#bg)"]{fill:transparent}
html.glass .hero svg > g.fd > :not(path[fill="url(#bg)"]){opacity:.38}

/* ---- 공용 화면 틀 (영업 · 구매 새 화면) ---- */
html.glass .wk .wk-kpi,html.glass .wk .wk-pipe,html.glass .wk .wk-list,html.glass .wk .wk-seg,html.glass .wk .wk-sec,html.glass .wk .wk-srch,html.glass .wk .wk-ftbtn,html.glass .wk .wk-ft{
  background:var(--gl-card)!important;border:1px solid var(--gl-line)!important;backdrop-filter:var(--gl-blur);-webkit-backdrop-filter:var(--gl-blur);box-shadow:var(--gl-sh)}
html.glass .wk .wk-kpi{border-radius:var(--gl-r);padding:18px 20px}
html.glass .wk .wk-kpi .k{font-weight:400;color:#5d6e79}
html.glass .wk .wk-kpi .v{font-family:"Outfit","Pretendard Variable",Pretendard,sans-serif;font-weight:300;font-size:32px;letter-spacing:-.8px;line-height:1.15;color:#1d2a33}
html.glass .wk .wk-kpi .v small{font-family:"Pretendard Variable",Pretendard,sans-serif;font-size:13px;font-weight:400;margin-left:3px}
html.glass .wk .wk-kpi .kico{background:transparent!important;border-color:transparent!important;border-radius:12px}   /* 아이콘 뒤 흰 바탕 뺌 (대표 2026-10-13) */
html.glass .wk .wk-kpi.on{box-shadow:0 0 0 2px rgba(63,143,87,.35),var(--gl-sh)}
html.glass .wk .wk-pipe{border-radius:999px;padding:6px 12px}
html.glass .wk .wk-pipe button{border-radius:999px}
html.glass .wk .wk-pipe button.on{background:rgba(255,255,255,.95)!important;box-shadow:0 2px 10px rgba(40,70,60,.08)!important}
html.glass .wk .wk-srch{border-radius:999px;padding-left:16px!important;padding-right:14px!important}
html.glass .wk .wk-seg,html.glass .wk .wk-sec,html.glass .wk .wk-ftbtn{border-radius:999px;overflow:hidden}
html.glass .wk .wk-seg button{padding-left:15px;padding-right:15px}
html.glass .wk .wk-seg button.on{background:var(--blue,#337b35);border-radius:999px}
html.glass .wk .wk-ft{border-radius:18px;padding:12px 14px}
html.glass .wk .wk-list{border-radius:var(--gl-r)}
html.glass .wk .wk-lhd{background:rgba(255,255,255,.38)!important;border-bottom:1px solid rgba(32,49,60,.06)}
html.glass .wk .wk-row{background:rgba(255,255,255,.30)!important;border-top:1px solid rgba(32,49,60,.05)}
html.glass .wk .wk-row:hover{background:rgba(255,255,255,.72)!important}
html.glass .wk .wk-row.sel{background:rgba(231,241,253,.75)!important}
html.glass .wk .wk-foot{background:rgba(255,255,255,.32)!important;border-top:1px solid rgba(32,49,60,.05)}
html.glass .wk .wk-lhd,html.glass .wk .wk-row,html.glass .wk .wk-foot{padding-left:22px!important;padding-right:22px!important}   /* 둥근 모서리에서 글씨가 잘리지 않게 */
html.glass .wk-ov .wk-scrim{background:rgba(20,40,30,.18)!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
html.glass .wk-ov .wk-dr{background:rgba(245,249,247,.74)!important;backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);border-left:1px solid var(--gl-line);border-radius:24px 0 0 24px;overflow:hidden}
html.glass .wk-ov .dh,html.glass .wk-ov .da{background:rgba(255,255,255,.45)!important}
html.glass .wk-ov .dh{padding-left:26px!important}html.glass .wk-ov .da{padding-left:26px!important;padding-right:24px!important}
html.glass .wk-ov .dh h3,html.glass .wk-ov .dh .t{font-family:"Outfit","Pretendard Variable",Pretendard,sans-serif;font-weight:500}
html.glass .wk-ov .bx{background:var(--gl-card2)!important;border:1px solid var(--gl-line)!important;border-radius:18px}
html.glass .wk-ov .bx h4{padding-left:18px;padding-right:18px}
html.glass .wk-ov .ab,html.glass .wk-ov .btn-primary,html.glass .wk .btn-primary,html.glass .wk-new{border-radius:999px!important;padding-left:18px!important;padding-right:18px!important}
html.glass .wk-ov .ab.sec{background:rgba(255,255,255,.75)!important}

/* ---- 예전 화면 부품 (카드 · 숫자 상자 · 표 · 창) ---- */
html.glass .card{background:var(--gl-card)!important;border:1px solid var(--gl-line)!important;border-radius:var(--gl-r)!important;box-shadow:var(--gl-sh)!important;backdrop-filter:var(--gl-blur);-webkit-backdrop-filter:var(--gl-blur)}
html.glass .card.flush{overflow-x:auto;overflow-y:hidden}
html.glass .card.flush table th:first-child,html.glass .card.flush table td:first-child,html.glass .tbl th:first-child,html.glass .tbl td:first-child{padding-left:22px!important}
html.glass .card.flush table th:last-child,html.glass .card.flush table td:last-child,html.glass .tbl th:last-child,html.glass .tbl td:last-child{padding-right:22px!important}
html.glass .tbl thead th,html.glass table.tbl th{background:rgba(255,255,255,.4)!important}
html.glass .kpi,html.glass .stat-card{background:var(--gl-card)!important;border:1px solid var(--gl-line)!important;border-radius:var(--gl-r)!important;box-shadow:var(--gl-sh)!important;backdrop-filter:var(--gl-blur);-webkit-backdrop-filter:var(--gl-blur);padding-left:20px!important;padding-right:20px!important}
html.glass .kpi .v,html.glass .stat-card .val{font-family:"Outfit","Pretendard Variable",Pretendard,sans-serif;font-weight:300!important;letter-spacing:-.6px}
html.glass .kpi .kico,html.glass .stat-card .ico{background:transparent!important;border-color:transparent!important;border-radius:12px!important}   /* 흰 바탕 · 테두리 뺌 (대표 2026-10-13) */
html.glass .seg{border-radius:999px!important;overflow:hidden}
html.glass .seg button{padding-left:14px!important;padding-right:14px!important}
html.glass .mini,html.glass .btn-issue{border-radius:999px!important;padding-left:13px!important;padding-right:13px!important}
html.glass .modal .modal-box,html.glass .modal > div:first-child:not(.modal-bg){background:rgba(248,251,249,.9)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:24px!important;border:1px solid var(--gl-line)!important}
html.glass input:not([type=checkbox]):not([type=radio]),html.glass select,html.glass textarea{border-radius:12px}

/* ---- WERP 확인창 ---- */
html.glass #w-cf .bx{background:rgba(250,252,251,.86)!important;backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);border:1px solid var(--gl-line);border-radius:24px!important;padding:26px 26px 20px!important}
html.glass #w-cf .bt button{border-radius:999px!important;padding:0 20px!important}
html.glass #w-cf .in{border-radius:12px}


/* ---- 사이드바 스크롤 막대 — 얇고 투명하게, 사이드바에 마우스를 올렸을 때만 살짝 (화살표 없음) ---- */
@supports selector(::-webkit-scrollbar){html.glass .app-sidebar,html.glass .app-sidebar *{scrollbar-width:auto;scrollbar-color:auto}}
html.glass .app-sidebar ::-webkit-scrollbar,html.glass .app-sidebar::-webkit-scrollbar{width:6px;height:6px;background:transparent}
html.glass .app-sidebar ::-webkit-scrollbar-button,html.glass .app-sidebar::-webkit-scrollbar-button{display:none;width:0;height:0}
html.glass .app-sidebar ::-webkit-scrollbar-track,html.glass .app-sidebar ::-webkit-scrollbar-corner{background:transparent}
html.glass .app-sidebar ::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}
html.glass .app-sidebar:hover ::-webkit-scrollbar-thumb{background:rgba(32,49,60,.20)}
html.glass .app-sidebar ::-webkit-scrollbar-thumb:hover{background:rgba(32,49,60,.36)}
@supports not selector(::-webkit-scrollbar){html.glass .app-sidebar *{scrollbar-width:thin;scrollbar-color:rgba(32,49,60,.22) transparent}}

/* ===== 그리기 부담 줄이기 (2026-10-09) =====
   흐림(backdrop-filter)은 큰 틀(사이드바 · 위쪽 줄 · 패널 · 창 · 알림)에만. 작은 카드 · 목록 · 버튼은 반투명 흰색만 —
   배경이 부드러운 색 번짐이라 겉보기는 거의 같고, 흐림 계산이 수십 겹 → 몇 겹으로 줄어 오래된 PC · 서버 점검에서도 가벼움 */
html.glass{--gl-card:rgba(255,255,255,.64)}
html.glass .wk .wk-kpi,html.glass .wk .wk-pipe,html.glass .wk .wk-list,html.glass .wk .wk-seg,html.glass .wk .wk-sec,html.glass .wk .wk-srch,html.glass .wk .wk-ftbtn,html.glass .wk .wk-ft,
html.glass .card,html.glass .kpi,html.glass .stat-card,html.glass .hero,html.glass .tb-box,html.glass .tb-todo-btn,html.glass .tb-erp,html.glass .topbar .btn,html.glass .wk-ov .wk-scrim{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ===== 11판 — 상세 패널(WK.drawer) 유리 머리 · 상자 · 움직임 (2026-10-17 대표: 연구 상세 시안을 다른 상세에도) =====
   · 머리: 메인 화면 색 번짐(하늘 · 노랑 · 살구 · 민트) 위에 반투명 흰 유리판 — 번짐은 천천히 흐름, 열 때 유리 위로 빛이 한 번
   · 상자: 제목 그림을 색 네모로, 모서리 18 · 옅은 그림자
   · 아래 단추 줄: 유리 · 주 단추에 가끔 빛이 지나감
   · 숫자 칸(.g3 b)은 열 때 0 → 값으로 굴러감 (werp-motion.js 11판) */
@media all{
@keyframes wdAur{0%,100%{background-position:0 0,0 0,0 0,0 0}50%{background-position:30px 22px,-36px 14px,-26px -18px,24px -22px}}
@keyframes wdShine{from{background-position:150% 0,0 0}to{background-position:-50% 0,0 0}}
@keyframes wdBtn{0%,60%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes wdUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wdPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:none}}
html.glass .wk-ov .wk-dr .dh{position:relative;isolation:isolate;overflow:hidden;scrollbar-gutter:stable;background:transparent!important;border-bottom:0!important;padding:28px 40px 22px!important}
html.glass .wk-ov .wk-dr .dh::before{content:"";position:absolute;inset:-20px -20px -10px;z-index:-2;pointer-events:none;background-repeat:no-repeat;
  background-image:radial-gradient(300px 210px at 12% 16%,rgba(185,212,234,.95),rgba(185,212,234,0) 70%),radial-gradient(320px 230px at 78% 0%,rgba(255,226,122,.92),rgba(255,226,122,0) 70%),radial-gradient(260px 210px at 100% 100%,rgba(255,179,138,.62),rgba(255,179,138,0) 70%),radial-gradient(340px 230px at 28% 118%,rgba(191,230,207,1),rgba(191,230,207,0) 70%)}
html.glass .wk-ov .wk-dr .dh::after{content:"";position:absolute;inset:14px 22px 6px;z-index:-1;border-radius:18px;pointer-events:none;border:1px solid rgba(255,255,255,.92);
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 60%) 150% 0/260% 100% no-repeat,rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px rgba(40,70,60,.08),inset 0 1px 0 rgba(255,255,255,.95)}
html.glass .wk-ov .wk-dr .dh .code{background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);border-radius:999px;padding:3px 11px;box-shadow:0 1px 3px rgba(40,70,60,.06);color:#20313c}
html.glass .wk-ov .wk-dr .dh .r1 > span:not(.code){box-shadow:0 1px 3px rgba(40,70,60,.06);border:1px solid rgba(255,255,255,.7)}
html.glass .wk-ov .wk-dr .dh .x{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);border-radius:50%;width:32px;height:32px;box-shadow:0 2px 8px rgba(40,70,60,.08)}
html.glass .wk-ov .wk-dr .dh .x:hover{background:#fff}
html.glass .wk-ov .wk-dr .dh .pn{color:#16232d;font-size:21px;letter-spacing:-.4px;margin-top:11px}
html.glass .wk-ov .wk-dr .dh .sub{color:#5d6d77}
/* 상자 */
html.glass .wk-ov .wk-dr .bx{border-radius:18px;box-shadow:0 10px 30px rgba(40,70,60,.06)}
html.glass .wk-ov .wk-dr .bx h4{padding-top:13px;padding-bottom:11px;border-bottom-color:rgba(32,49,60,.06);font-size:14px}
html.glass .wk-ov .wk-dr .bx h4 > svg.ph:first-child{flex:0 0 26px;width:26px;height:26px;padding:5px;border-radius:8px;color:#fff;background:linear-gradient(135deg,#58BA48,#1fa39b);box-shadow:0 3px 8px rgba(47,158,68,.22)}
html.glass .wk-ov .wk-dr .db > .bx:nth-of-type(4n+2) h4 > svg.ph:first-child{background:linear-gradient(135deg,#2f80c8,#1fa39b);box-shadow:0 3px 8px rgba(47,128,200,.22)}
html.glass .wk-ov .wk-dr .db > .bx:nth-of-type(4n+3) h4 > svg.ph:first-child{background:linear-gradient(135deg,#f0a020,#f08a5d);box-shadow:0 3px 8px rgba(240,138,32,.22)}
html.glass .wk-ov .wk-dr .db > .bx:nth-of-type(4n+4) h4 > svg.ph:first-child{background:linear-gradient(135deg,#8a5cc4,#2f80c8);box-shadow:0 3px 8px rgba(138,92,196,.22)}
html.glass .wk-ov .wk-dr .wk-bigbar span{background:linear-gradient(90deg,#58BA48,#1fa39b)}
/* 아래 단추 줄 */
html.glass .wk-ov .wk-dr .da{background:rgba(255,255,255,.5)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.85)}
html.glass .wk-ov .wk-dr .da .ab.sec{background:rgba(255,255,255,.78);border-color:rgba(32,49,60,.1);border-radius:999px}
html.glass .wk-ov .wk-dr .da .ab.pri{border-radius:999px;position:relative;overflow:hidden;box-shadow:0 6px 16px rgba(18,35,49,.22)}
/* 움직임 */
html.glass.motion .wk-ov .wk-dr .dh::before{animation:wdAur 14s ease-in-out infinite}
html.glass.motion .wk-ov .wk-dr.in .dh::after{animation:wdShine 1.3s cubic-bezier(.35,.6,.3,1) .3s both}
html.glass.motion .wk-ov .wk-dr.in .dh .r1,html.glass.motion .wk-ov .wk-dr.in .dh .pn,html.glass.motion .wk-ov .wk-dr.in .dh .sub{animation:wdUp .45s cubic-bezier(.2,.8,.2,1) both}
html.glass.motion .wk-ov .wk-dr.in .dh .pn{animation-delay:.06s}html.glass.motion .wk-ov .wk-dr.in .dh .sub{animation-delay:.12s}
html.glass.motion .wk-ov .wk-dr.in .bx h4 > svg.ph:first-child{animation:wdPop .5s cubic-bezier(.2,.9,.3,1.3) .25s both}
html.glass.motion .wk-ov .wk-dr.in .wk-bigbar span{transform-origin:left center;animation:wmAnGrow 1s cubic-bezier(.2,1,.3,1) .3s both}
html.glass.motion .wk-ov .wk-dr .da .ab.pri::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 65%) 150% 0/260% 100% no-repeat;animation:wdBtn 3.6s ease-in-out 1s infinite}
@keyframes wmAnGrow{from{transform:scaleX(0)}to{transform:none}}

}

/* ===== 11판 — 생산지시 대장 상세(po-detail · .pdd-panel) 유리 머리 · 진행 막대 · 상자 (2026-10-17 대표) =====
   · 지금은 흰 판이라 다른 상세와 다름 → 유리 패널 · 유리 머리(공통 상세와 같음)
   · 머리 아래에 진행 n / 전체 단계 · 지금 단계 · 납기 한 줄 + 단계 막대 (po-detail.js 가 그림)
   · 머리 유리판과 아래 상자 너비를 맞춤 (몸통 여백 22 · 스크롤 막대 자리) */
@media all{
@keyframes wdAur{0%,100%{background-position:0 0,0 0,0 0,0 0}50%{background-position:30px 22px,-36px 14px,-26px -18px,24px -22px}}
@keyframes wdShine{from{background-position:150% 0,0 0}to{background-position:-50% 0,0 0}}
@keyframes wdUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wdPing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.1);opacity:0}}
@keyframes wdSeg{from{transform:scaleX(0)}to{transform:none}}
@keyframes wdStripe{to{background-position:17px 0}}
html.glass .pdd .pdd-panel{background:rgba(245,249,247,.74)!important;-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);border-left:1px solid rgba(255,255,255,.82);border-radius:24px 0 0 24px;overflow:hidden}
html.glass .pdd-panel .pdd-h{position:relative;isolation:isolate;overflow:hidden;scrollbar-gutter:stable;background:transparent!important;border-bottom:0!important;padding:28px 40px 22px!important}
html.glass .pdd-panel .pdd-h::before{content:"";position:absolute;inset:-20px -20px -10px;z-index:-2;pointer-events:none;background-repeat:no-repeat;
  background-image:radial-gradient(300px 210px at 12% 16%,rgba(185,212,234,.95),rgba(185,212,234,0) 70%),radial-gradient(320px 230px at 78% 0%,rgba(255,226,122,.92),rgba(255,226,122,0) 70%),radial-gradient(260px 210px at 100% 100%,rgba(255,179,138,.62),rgba(255,179,138,0) 70%),radial-gradient(340px 230px at 28% 118%,rgba(191,230,207,1),rgba(191,230,207,0) 70%)}
html.glass .pdd-panel .pdd-h::after{content:"";position:absolute;inset:14px 22px 6px;z-index:-1;border-radius:18px;pointer-events:none;border:1px solid rgba(255,255,255,.92);
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 60%) 150% 0/260% 100% no-repeat,rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px rgba(40,70,60,.08),inset 0 1px 0 rgba(255,255,255,.95)}
html.glass .pdd-panel .pdd-lotc{background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);border-radius:999px;padding:3px 11px;box-shadow:0 1px 3px rgba(40,70,60,.06)}
html.glass .pdd-panel .pdd-tag{border-radius:999px;box-shadow:0 1px 3px rgba(40,70,60,.06)}
html.glass .pdd-panel .pdd-x,html.glass .pdd-panel .pdd-ghost{background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.95)!important;border-radius:999px!important;box-shadow:0 2px 8px rgba(40,70,60,.08)}
html.glass .pdd-panel .pdd-pn{color:#16232d;font-size:21px;letter-spacing:-.4px}
html.glass .pdd-panel .pdd-sub{color:#5d6d77}
.pdd-meter{margin-top:13px}
.pdd-meter .t{display:flex;align-items:center;gap:8px;font-size:12px;color:#71818c;margin-bottom:7px;flex-wrap:wrap}
.pdd-meter .t b{color:#20313c}
.pdd-meter .now{font-weight:800;color:#8a5200;background:rgba(255,213,77,.42);border:1px solid rgba(255,226,122,.9);border-radius:999px;padding:1px 10px}
.pdd-meter .dd{margin-left:auto;font-weight:800;border-radius:999px;padding:1px 10px;background:rgba(88,186,72,.16);color:#2f6b24}
.pdd-meter .dd.late{background:rgba(217,71,60,.12);color:#b3261e}
.pdd-meter .sg{display:grid;gap:5px}
.pdd-meter .sg i{height:7px;border-radius:4px;background:rgba(255,255,255,.85);box-shadow:inset 0 1px 2px rgba(40,70,60,.12);overflow:hidden;position:relative}
.pdd-meter .sg i b{position:absolute;inset:0;border-radius:4px;transform-origin:left center}
.pdd-meter .sg i.d b{background:linear-gradient(90deg,#58BA48,#1fa39b)}
.pdd-meter .sg i.p b{background:linear-gradient(90deg,#9ccf8f,#8fc9c3)}
.pdd-meter .sg i.n b{right:45%;background:repeating-linear-gradient(-45deg,#f6b648 0 6px,#ffd27a 6px 12px);background-size:17px 17px}
html.glass .pdd-panel .pdd-b > section,html.glass .pdd-panel .pdd-notes > div{background:rgba(255,255,255,.66)!important;border:1px solid rgba(255,255,255,.88)!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(40,70,60,.06)}
html.glass .pdd-panel .pdd-next .pdd-k > span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#58BA48;margin-right:7px;vertical-align:1px}
html.glass .pdd-panel .pdd-next.other .pdd-k > span:first-child::before{background:#f0a020}
html.glass .pdd-panel .pdd-flow li.n .dot{position:relative}
html.glass.motion .pdd-panel .pdd-flow li.n .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:.6;animation:wdPing 1.8s ease-out infinite}
html.glass.motion .pdd-panel .pdd-h::before{animation:wdAur 14s ease-in-out infinite}
html.glass.motion .pdd-panel.wd-in .pdd-h::after{animation:wdShine 1.3s cubic-bezier(.35,.6,.3,1) .3s both}
html.glass.motion .pdd-panel.wd-in .pdd-h > *{animation:wdUp .45s cubic-bezier(.2,.8,.2,1) both}
html.glass.motion .pdd-panel.wd-in .pdd-h > :nth-child(2){animation-delay:.06s}html.glass.motion .pdd-panel.wd-in .pdd-h > :nth-child(n+3){animation-delay:.12s}
html.glass.motion .pdd-panel.wd-in .pdd-meter .sg i b{animation:wdSeg .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 110ms + 250ms)}
html.glass.motion .pdd-panel .pdd-meter .sg i.n b{animation:wdSeg .5s cubic-bezier(.2,.8,.2,1) both,wdStripe .6s linear infinite;animation-delay:calc(var(--i) * 110ms + 250ms),0s}
html.glass.motion .pdd-panel.wd-in .pdd-b > *{animation:wdUp .45s cubic-bezier(.2,.8,.2,1) both}
html.glass.motion .pdd-panel.wd-in .pdd-b > :nth-child(1){animation-delay:.1s}html.glass.motion .pdd-panel.wd-in .pdd-b > :nth-child(2){animation-delay:.16s}html.glass.motion .pdd-panel.wd-in .pdd-b > :nth-child(3){animation-delay:.22s}html.glass.motion .pdd-panel.wd-in .pdd-b > :nth-child(n+4){animation-delay:.28s}
html.glass.motion .pdd-panel.wd-in .pdd-flow > li{animation:wdUp .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 60ms + 350ms)}
}
.pdd-meter .dd.today{background:rgba(240,160,32,.18);color:#a35f00}

/* ===== 12판 — 팝업 창 유리 머리 (2026-10-18 대표: 영업 팝업 · 품질 시안) =====
   · 입력 창(.modal — 생산지시서 발행 · 구매 등록 창 등 같은 틀): 머리 유리판 · 칸 묶음은 유리 상자 · 아래 단추 줄 유리
   · 결제조건 창(.pt-card): 같은 머리 · 맨 글자로 보이던 취소 · 바꾸기 단추에 모양 (단추 꾸밈이 상세 패널 안에만 있었음)
   · 품질 검사 상세(새 창, WK.drawer)의 진행 막대는 .wd-meter (생산지시 상세 .pdd-meter 와 같은 모양) */
@media all{
@keyframes wdAur{0%,100%{background-position:0 0,0 0,0 0,0 0}50%{background-position:30px 22px,-36px 14px,-26px -18px,24px -22px}}
@keyframes wdShine{from{background-position:150% 0,0 0}to{background-position:-50% 0,0 0}}
@keyframes wdUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wdIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes wdSeg{from{transform:scaleX(0)}to{transform:none}}
@keyframes wdStripe{to{background-position:17px 0}}
@keyframes wdStamp{0%{transform:scale(1.6) rotate(-8deg);opacity:0}60%{transform:scale(.94) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
/* 머리 공통 — 색 번짐 + 유리판 (상세 패널 11판과 같음) */
html.glass .modal > header,html.glass .pt-card .pt-h{position:relative;isolation:isolate;overflow:hidden;scrollbar-gutter:stable;background:transparent!important;border-bottom:0!important}
html.glass .modal > header::before,html.glass .pt-card .pt-h::before{content:"";position:absolute;inset:-20px -20px -10px;z-index:-2;pointer-events:none;background-repeat:no-repeat;
  background-image:radial-gradient(300px 210px at 12% 16%,rgba(185,212,234,.95),rgba(185,212,234,0) 70%),radial-gradient(320px 230px at 78% 0%,rgba(255,226,122,.92),rgba(255,226,122,0) 70%),radial-gradient(260px 210px at 100% 100%,rgba(255,179,138,.62),rgba(255,179,138,0) 70%),radial-gradient(340px 230px at 28% 118%,rgba(191,230,207,1),rgba(191,230,207,0) 70%)}
html.glass .modal > header::after,html.glass .pt-card .pt-h::after{content:"";position:absolute;z-index:-1;border-radius:18px;pointer-events:none;border:1px solid rgba(255,255,255,.92);
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 60%) 150% 0/260% 100% no-repeat,rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px rgba(40,70,60,.08),inset 0 1px 0 rgba(255,255,255,.95)}
/* 입력 창 */
html.glass .modal{background:rgba(245,249,247,.84)!important;-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);border:1px solid rgba(255,255,255,.85)!important;border-radius:24px!important;overflow:hidden;box-shadow:0 30px 80px rgba(12,28,42,.22)!important}
html.glass .modal > header{padding:26px 40px 20px!important}
html.glass .modal > header::after{inset:14px 22px 6px}
html.glass .modal > header .hbadge{background:rgba(255,255,255,.88)!important;box-shadow:0 2px 6px rgba(40,70,60,.08)}
html.glass .modal > header .htitle{font-size:18px;font-weight:800;color:#16232d}
html.glass .modal > header .x{background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.95)!important;border-radius:50%!important;width:32px;height:32px;box-shadow:0 2px 8px rgba(40,70,60,.08)}
html.glass .modal .mbody{padding:4px 22px 14px!important;scrollbar-gutter:stable}
html.glass .modal .mbody > .msec{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.88)!important;border-radius:18px;box-shadow:0 10px 30px rgba(40,70,60,.06);margin-top:12px;padding:16px 20px!important}
html.glass .modal .mbody > .msec[hidden]{display:none}
html.glass .modal input:focus,html.glass .modal select:focus,html.glass .modal textarea:focus{border-color:#58BA48!important;box-shadow:0 0 0 3px rgba(88,186,72,.16)!important;outline:0}
html.glass .modal > footer{background:rgba(255,255,255,.5)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.85)!important;padding:12px 22px!important}
html.glass .modal > footer .mbtn{border-radius:999px!important}
html.glass .modal > footer .mbtn.primary{box-shadow:0 6px 16px rgba(18,35,49,.22)}
/* 결제조건 창 — 단추 모양 (어디서 열려도) */
.pt-a .ab.sec,.pt-a .btn-primary{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 18px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.pt-a .ab.sec{background:#fff;border:1px solid #dce4e8;color:#33475b}
.pt-a .ab.sec:hover{background:#f6f8f9}
.pt-a .btn-primary{background:#122331;border:1px solid #122331;color:#fff;box-shadow:0 6px 16px rgba(18,35,49,.22)}
html.glass .pt-card{background:rgba(245,249,247,.86)!important;-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);border:1px solid rgba(255,255,255,.85);border-radius:24px!important;overflow:hidden;box-shadow:0 30px 80px rgba(12,28,42,.22)!important}
html.glass .pt-card .pt-h{padding:24px 36px 18px!important;scrollbar-gutter:auto}   /* 결제조건 창 몸통은 스크롤 막대가 없음 — 머리도 자리 비우지 않음 */
html.glass .pt-card .pt-h::after{inset:12px 18px 4px}
html.glass .pt-card .pt-h b{font-size:17px;font-weight:800;color:#16232d}
html.glass .pt-card .pt-x{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);border-radius:50%;width:32px;height:32px;font-size:18px;box-shadow:0 2px 8px rgba(40,70,60,.08)}
html.glass .pt-card .pt-scope,html.glass .pt-card .pt-ls{background:rgba(255,255,255,.66)!important;border:1px solid rgba(255,255,255,.88)!important;border-radius:14px!important}
html.glass .pt-card .pt-a{background:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.85)}
/* 진행 막대 (품질 검사 상세) */
.wd-meter{margin-top:13px}
.wd-meter .t{display:flex;align-items:center;gap:8px;font-size:12px;color:#71818c;margin-bottom:7px;flex-wrap:wrap}
.wd-meter .t b{color:#20313c}
.wd-meter .now{font-weight:800;border-radius:999px;padding:1px 10px;color:#8a5200;background:rgba(255,213,77,.42);border:1px solid rgba(255,226,122,.9)}
.wd-meter .now.ok{color:#2f6b24;background:rgba(88,186,72,.16);border-color:rgba(88,186,72,.25)}
.wd-meter .now.ng{color:#b3261e;background:rgba(217,71,60,.12);border-color:rgba(217,71,60,.2)}
.wd-meter .at{margin-left:auto}
.wd-meter .sg{display:grid;gap:5px}
.wd-meter .sg i{height:7px;border-radius:4px;background:rgba(255,255,255,.85);box-shadow:inset 0 1px 2px rgba(40,70,60,.12);overflow:hidden;position:relative}
.wd-meter .sg i b{position:absolute;inset:0;border-radius:4px;transform-origin:left center}
.wd-meter .sg i.d b{background:linear-gradient(90deg,#58BA48,#1fa39b)}
.wd-meter .sg i.x b{background:linear-gradient(90deg,#e0675d,#d9473c)}
.wd-meter .sg i.n b{right:45%;background:repeating-linear-gradient(-45deg,#f6b648 0 6px,#ffd27a 6px 12px);background-size:17px 17px}
.qc-row-open{cursor:pointer}
.qc-row-open:hover td{background:rgba(255,255,255,.55)}
/* 움직임 */
html.glass.motion .modal > header::before,html.glass.motion .pt-card .pt-h::before{animation:wdAur 14s ease-in-out infinite}
html.glass.motion .modal.open > header::after,html.glass.motion .pt-card .pt-h::after{animation:wdShine 1.3s cubic-bezier(.35,.6,.3,1) .3s both}
html.glass.motion .modal.open .mbody > .msec{animation:wdUp .45s cubic-bezier(.2,.8,.2,1) both}
html.glass.motion .modal.open .mbody > .msec:nth-child(2){animation-delay:.06s}html.glass.motion .modal.open .mbody > .msec:nth-child(3){animation-delay:.12s}html.glass.motion .modal.open .mbody > .msec:nth-child(n+4){animation-delay:.18s}
html.glass.motion .pt-card{animation:wdIn .32s cubic-bezier(.2,.8,.2,1) both}
html.glass.motion .wk-dr.in .wd-meter .sg i b{animation:wdSeg .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 140ms + 250ms)}
html.glass.motion .wd-meter .sg i.n b{animation:wdSeg .5s cubic-bezier(.2,.8,.2,1) both,wdStripe .6s linear infinite;animation-delay:calc(var(--i) * 140ms + 250ms),0s}
}

/* ===== 13판 — 유리 창 다듬기 (2026-10-18 대표: "박스에 하단 여백이 다들 부족") =====
   · 상자 · 머리 유리판 안쪽 아래 여백을 늘림 (상자 약 20px · 머리 약 24px — 재서 맞춤)
   · 색 번짐을 머리 안(::before)이 아니라 창 전체 위쪽에 깔고 아래로 서서히 사라지게
     — 스크롤 막대가 늘 보이는 컴퓨터에서 머리 오른쪽에 생기던 회색 띠 · 머리 아래 색이 뚝 끊기던 선 없앰 */
@media all{
html.glass .wk-ov .wk-dr,html.glass .pdd .pdd-panel,html.glass .modal,html.glass .pt-card{isolation:isolate}
html.glass .pt-card{position:relative}
html.glass .wk-ov .wk-dr::before,html.glass .pdd .pdd-panel::before,html.glass .modal::before,html.glass .pt-card::before{content:"";position:absolute;left:0;right:0;top:0;height:400px;z-index:-1;pointer-events:none;background-repeat:no-repeat;
  background-image:radial-gradient(300px 220px at 10% 9%,rgba(185,212,234,.95),rgba(185,212,234,0) 70%),radial-gradient(340px 240px at 80% 0%,rgba(255,226,122,.92),rgba(255,226,122,0) 70%),radial-gradient(280px 220px at 100% 42%,rgba(255,179,138,.6),rgba(255,179,138,0) 70%),radial-gradient(380px 230px at 26% 48%,rgba(191,230,207,1),rgba(191,230,207,0) 70%)}
html.glass.motion .wk-ov .wk-dr::before,html.glass.motion .pdd .pdd-panel::before,html.glass.motion .modal::before,html.glass.motion .pt-card::before{animation:wdAur 14s ease-in-out infinite}
html.glass .wk-ov .wk-dr .dh::before,html.glass .pdd-panel .pdd-h::before,html.glass .modal > header::before,html.glass .pt-card .pt-h::before{content:none;display:none}
/* 머리 유리판 안쪽 여백 */
html.glass .wk-ov .wk-dr .dh{padding:32px 40px 30px!important}
html.glass .pdd-panel .pdd-h{padding:32px 40px 30px!important}
html.glass .modal > header{padding:30px 40px 28px!important}
html.glass .pt-card .pt-h{padding:28px 36px 24px!important}
/* 상자 아래 여백 */
html.glass .wk-ov .wk-dr .bb{padding-bottom:18px}
html.glass .pdd-panel .pdd-next{padding:16px 18px 20px}
html.glass .pdd-panel .pdd-notes > div{padding-bottom:16px}
html.glass .pdd-panel .pdd-b > .pdd-box{padding-bottom:6px}
html.glass .pdd-panel .pdd-box .pdd-tw{padding-bottom:10px}
html.glass .modal .mbody > .msec{padding:18px 20px 22px!important}
}

/* ===== 14판 — 모든 팝업 유리 · 움직임 (2026-10-18 대표: "언급한 것 말고도 모든 팝업") =====
   · 가운데 창: 운송 완료(.dv-card) · 수정 사유(.er-card) · Forecast 분할(.split-modal) · 분석(#anModal .mbox) · 이력 나란히 비교(.h2-cmp)
     · 간트 나누기(.gt-sbx) · 관리자 계정(.acct-dlg) · 확인 창(:is(#w-cf,.w-cf) .bx) — 유리판 + 위쪽 색 번짐 + 떠오르며 열림, 머리는 유리 띠
   · 바깥 막: 어둡게만 하던 것 → 살짝 흐리게 + 서서히
   · 작은 고르기 창: 위쪽 바(.tb-pop) · 고객 · 품목 목록(.pick-list) · 담당자 고르기(.pdd-whop · .rp-whop) · 달력(.air-datepicker) — 유리 + 톡 열림
   · 이미 바뀐 것(상세 패널 11판 · 입력 창 · 결제조건 12판 · 13판)은 그대로 */
@media all{
@keyframes wdUp2{from{opacity:0;translate:0 10px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes wdPop2{from{opacity:0;translate:0 -6px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes wdFade{from{opacity:0}to{opacity:1}}
@keyframes wdShine1{from{background-position:150% 0}to{background-position:-50% 0}}
/* 바깥 막 */
html.glass :is(.modal-backdrop,.dv-modal,.er-modal,.split-back,#anModal,.pt-ov,.acct-dlg-dim,#h2-ov,.gt-spl){-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1)}
html.glass.motion :is(.modal-backdrop.show,.dv-modal.show,.er-modal,.split-back,#anModal.on,.pt-ov,.acct-dlg-dim){animation:wdFade .25s ease both}
/* 가운데 창 — 유리판 */
html.glass :is(.dv-card,.er-card,.split-modal,#anModal .mbox,.h2-cmp,.gt-sbx,.acct-dlg){background:rgba(245,249,247,.88)!important;-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);border:1px solid rgba(255,255,255,.85)!important;border-radius:24px!important;box-shadow:0 30px 80px rgba(12,28,42,.22)!important;isolation:isolate}
html.glass :is(.dv-card,.er-card,.split-modal,#anModal .mbox,.gt-sbx,.acct-dlg){position:relative}
html.glass :is(.dv-card,.er-card,.split-modal,#anModal .mbox,.h2-cmp,.gt-sbx,.acct-dlg,:is(#w-cf,.w-cf) .bx)::before{content:"";position:absolute;left:0;right:0;top:0;height:400px;z-index:-1;pointer-events:none;border-radius:inherit;background-repeat:no-repeat;
  background-image:radial-gradient(300px 220px at 10% 9%,rgba(185,212,234,.95),rgba(185,212,234,0) 70%),radial-gradient(340px 240px at 80% 0%,rgba(255,226,122,.92),rgba(255,226,122,0) 70%),radial-gradient(280px 220px at 100% 42%,rgba(255,179,138,.6),rgba(255,179,138,0) 70%),radial-gradient(380px 230px at 26% 48%,rgba(191,230,207,1),rgba(191,230,207,0) 70%)}
html.glass :is(#w-cf,.w-cf) .bx{position:relative;isolation:isolate;overflow:hidden}
html.glass.motion :is(.dv-card,.er-card,.split-modal,#anModal .mbox,.h2-cmp,.gt-sbx,.acct-dlg,:is(#w-cf,.w-cf) .bx)::before{animation:wdAur 14s ease-in-out infinite}
html.glass.motion :is(.dv-card,.er-card,.split-modal,#anModal .mbox,.h2-cmp,.gt-sbx,.acct-dlg){animation:wdUp2 .32s cubic-bezier(.2,.8,.2,1) both}
/* 머리 — 유리 띠 (열 때 빛이 한 번) */
html.glass :is(.dv-head,.er-head,.sm-head,.h2-cmp > header){margin:12px 14px 4px;border-radius:16px;border:1px solid rgba(255,255,255,.92)!important;border-bottom:1px solid rgba(255,255,255,.92)!important;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 60%) 150% 0/260% 100% no-repeat,rgba(255,255,255,.56)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px rgba(40,70,60,.08),inset 0 1px 0 rgba(255,255,255,.95)}
html.glass :is(.dv-head,.er-head){padding:18px 20px 18px!important;font-size:16.5px;font-weight:800;color:#16232d}
html.glass .sm-head{padding:16px 18px!important;font-weight:700;color:#16232d}
html.glass .h2-cmp > header{padding:16px 20px!important}
html.glass.motion :is(.dv-head,.er-head,.sm-head,.h2-cmp > header){animation:wdShine1 1.3s cubic-bezier(.35,.6,.3,1) .3s both}
html.glass #anModal .mbox h2{font-size:18px;font-weight:800;color:#16232d}
html.glass :is(.acct-dlg h3){font-size:17px;font-weight:800;color:#16232d}
/* 몸통 · 아래 단추 줄 */
html.glass :is(.dv-kv,.er-kv){margin:8px 14px 0;border-radius:14px;background:rgba(255,255,255,.62)!important;border:1px solid rgba(255,255,255,.88)!important}
html.glass :is(.dv-foot,.er-foot){margin-top:12px;background:rgba(255,255,255,.5)!important;border-top:1px solid rgba(255,255,255,.85)!important}
html.glass :is(.dv-foot,.er-foot,.gt-sbt,.acct-dlg) button{border-radius:999px!important}
html.glass .sm-sum,html.glass .sm-list{background:rgba(255,255,255,.62)!important;border-color:rgba(255,255,255,.88)!important;border-radius:14px!important}
html.glass .h2-cmp .cb{padding-top:12px!important}
html.glass :is(.dv-card,.er-card,.split-modal,.acct-dlg,.gt-sbx) :is(input,select,textarea):focus{border-color:#58BA48!important;box-shadow:0 0 0 3px rgba(88,186,72,.16)!important;outline:0}
/* 확인 창 — 같은 색 번짐 · 단추 알약 */
html.glass :is(#w-cf,.w-cf) .bt button{border-radius:999px!important}
/* 작은 고르기 창 */
html.glass :is(.tb-pop,.pick-list,.pdd-whop,.rp-whop){background:rgba(250,252,251,.9)!important;-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.9)!important;border-radius:16px!important;box-shadow:0 18px 44px rgba(12,28,42,.16)!important}
html.glass.motion :is(.tb-pop,.pick-list,.pdd-whop,.rp-whop){transform-origin:top center;animation:wdPop2 .2s cubic-bezier(.2,.8,.2,1) both}
html.glass .air-datepicker{--adp-background-color:rgba(250,252,251,.92);--adp-border-color:rgba(255,255,255,.9);--adp-border-radius:16px;--adp-border-color-inner:rgba(32,49,60,.08);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 18px 44px rgba(12,28,42,.16)}
}

/* ===== 15판 — 색 번짐 가장자리 (2026-10-18 대표: "효과가 네모 반듯하게 되어 있고 박스 위쪽이 비어 보임") =====
   · 번짐이 천천히 움직일 때 색 판이 같이 밀려, 창 가장자리에 색 없는 띠 · 네모 모서리가 보였음 (사파리 엔진으로 재현)
     → 색 판을 창보다 사방 40px 크게 깔아 움직여도 가장자리가 안 보이게 (창이 둥글게 잘라 줌)
   · 안이 스크롤되는 창(분석 · 간트 나누기 · 관리자 계정)은 크게 깔면 옆 스크롤이 생기므로 판은 그대로 두고 움직임만 뺌
   · 작은 창 머리 띠 위 · 옆 여백을 같게 (14px) */
@media all{
html.glass :is(.wk-ov .wk-dr,.pdd .pdd-panel,.modal,.pt-card,.dv-card,.er-card,.split-modal,.h2-cmp,#w-cf .bx,.w-cf .bx)::before{left:-40px;right:-40px;top:-40px;height:460px;border-radius:0;
  background-image:radial-gradient(300px 220px at 12% 16%,rgba(185,212,234,.95),rgba(185,212,234,0) 70%),radial-gradient(340px 240px at 78% 9%,rgba(255,226,122,.92),rgba(255,226,122,0) 70%),radial-gradient(280px 220px at 97% 45%,rgba(255,179,138,.6),rgba(255,179,138,0) 70%),radial-gradient(380px 230px at 27% 50%,rgba(191,230,207,1),rgba(191,230,207,0) 70%)}
html.glass .h2-cmp{overflow:hidden}
html.glass :is(#anModal .mbox,.gt-sbx,.acct-dlg)::before{border-radius:0;animation:none!important}
html.glass :is(.dv-head,.er-head,.sm-head,.h2-cmp > header){margin:14px 14px 4px}
}

/* ===== 16판 — 디테일 점검 (2026-10-18 대표: "다른 부분에서 이런 디테일이 부족한 부분 없는지") =====
   ① 창 안을 다시 그릴 때(입력 · 고르기) 열리는 움직임이 다시 나오거나 색 번짐이 처음 자리로 튀던 것
      → werp-motion.js 16판이 다시 그린 창에 .wd-still · --wd-t(번짐이 이어질 시각)를 달아 줌
   ② 아래 단추 줄이 위 상자와 좌우가 어긋나던 것 (스크롤 막대가 늘 보이는 컴퓨터) — 상세 창 · 입력 창
   ③ 휴대폰 폭: 머리 유리판이 아래 상자보다 좁던 것 · 닫기 ✕ 가 둘째 줄로 내려가던 것
   ④ 생산지시 상세 정보 칸 수가 줄 칸 수로 안 나눠질 때 빈 칸이 회색 덩어리로 보이던 것 → 칸 사이 선만
   ⑤ 작은 창(운송 완료 · 수정 사유 · Forecast 분할 · 이력 비교) 머리 띠 · 정보 상자 · 입력 줄의 글자 시작선 맞춤 */
@media all{
/* ① */
html.glass :is(.wk-ov .wk-dr,.pdd .pdd-panel,.modal,.pt-card,.dv-card,.er-card,.split-modal,.h2-cmp,#w-cf .bx,.w-cf .bx)::before{animation-delay:var(--wd-t,0s)}
html.glass.motion :is(.dv-card,.er-card,.split-modal,.h2-cmp,.gt-sbx,.acct-dlg).wd-still,
html.glass.motion :is(.dv-card,.er-card,.split-modal,.h2-cmp,.gt-sbx,.acct-dlg).wd-still :is(.dv-head,.er-head,.sm-head,header){animation:none!important}
/* ② */
html.glass .wk-ov .wk-dr .da{padding:12px 22px!important;overflow:hidden;scrollbar-gutter:stable}
html.glass .modal > footer{overflow:hidden;scrollbar-gutter:stable}
/* ④ */
html.glass .pdd-panel .pdd-facts{gap:0;background:transparent!important}
html.glass .pdd-panel .pdd-facts > div{background:transparent!important;border-right:1px solid rgba(32,49,60,.08);border-bottom:1px solid rgba(32,49,60,.08)}
html.glass .pdd-panel .pdd-facts > div:last-child{border-right:0}
/* ⑤ 글자 시작선 = 카드 끝에서 34px (머리 띠 14 + 20 · 정보 상자 14 + 20 · 입력 줄 34) */
html.glass :is(.dv-head,.er-head){padding-left:20px!important;padding-right:20px!important}
html.glass :is(.dv-kv,.er-kv){padding:16px 20px!important}
html.glass :is(.dv-form,.er-form){padding-left:34px!important;padding-right:34px!important}
html.glass :is(.dv-warn,.er-warn){padding-left:34px!important;padding-right:34px!important}
html.glass :is(.dv-foot,.er-foot){padding-left:34px!important;padding-right:34px!important}
html.glass .split-modal .sm-body{padding-left:14px!important;padding-right:14px!important}
html.glass .split-modal :is(.sm-po,.sm-label){padding-left:6px;padding-right:6px}
html.glass .h2-cmp .cb{padding-left:14px!important;padding-right:14px!important}
}
/* ④ 넓은 화면 정보 칸 3줄 — 마지막 칸 오른쪽 · 마지막 줄 아래 선 없음 (좁은 화면 2줄은 아래) */
@media (min-width:701px){
  html.glass .pdd-panel .pdd-facts > div:nth-child(3n){border-right:0}
  html.glass .pdd-panel .pdd-facts > div:nth-child(3n+1):nth-last-child(-n+3),html.glass .pdd-panel .pdd-facts > div:nth-child(3n+1):nth-last-child(-n+3) ~ div{border-bottom:0}
}
/* ③ 휴대폰 폭 — 상세 창(600px 이하 몸통 여백 16) · 생산지시 상세(700px 이하 16) */
@media (max-width:600px){
  html.glass .wk-ov .wk-dr .dh{padding:30px 34px 28px!important}
  html.glass .wk-ov .wk-dr .dh::after{inset:14px 16px 6px}
  html.glass .wk-ov .wk-dr .da{padding-left:16px!important;padding-right:16px!important}
  html.glass .wk-ov .wk-dr .dh .r1{position:relative;padding-right:40px}
  html.glass .wk-ov .wk-dr .dh .x{position:absolute;right:-4px;top:-2px}
}
@media (max-width:700px){
  html.glass .pdd-panel .pdd-h{padding:30px 34px 28px!important}
  html.glass .pdd-panel .pdd-h::after{inset:14px 16px 6px}
  html.glass .pdd-panel .pdd-h1{position:relative;padding-right:40px}
  html.glass .pdd-panel .pdd-h1 .pdd-x{position:absolute;right:-4px;top:-2px}
  /* 정보 칸 2줄 */
  html.glass .pdd-panel .pdd-facts > div:last-child:nth-child(odd){grid-column:1/-1}
  html.glass .pdd-panel .pdd-facts > div:nth-child(2n){border-right:0}
  html.glass .pdd-panel .pdd-facts > div:nth-child(2n+1):nth-last-child(-n+2),html.glass .pdd-panel .pdd-facts > div:nth-child(2n+1):nth-last-child(-n+2) ~ div{border-bottom:0}
}

/* ===== 17판 — 본 화면 점검 고침 (2026-10-18 대표 "고쳐") =====
   ① 숫자 카드 숫자가 칸보다 길면 글자를 줄여 맞춤 — werp-motion.js 17판 (영업 분석 '총 매출 · 손익 총액' 끝 '원' 잘림)
   ② 옆 카드 높이에 맞춰 늘어나 아래가 크게 비던 카드 → 내용 높이만큼: 매출 분석 담당자별 실적 · 견적 산출 계산 결과 · 출고 고객 카드
   ③ 출고 고객 카드: 왼쪽 초록 띠 빼고 유리 카드
   ④ 상세 창 밖(본 화면)에 놓인 단추(.ab)가 꾸밈 없이 회색 기본 단추로 보이던 것 · 품질 '검사 취소'(.btn-ghost-sm) — 같은 알약 모양 (:where 로 다른 꾸밈보다 약하게)
   ⑤ 단계 카드 줄(생산지시 대장 · 연구)이 넓은 화면에서도 넘쳐 잘리던 것 → 카드 폭을 줄여 한 줄에, 넘칠 때는 얇은 막대
   ⑥ 옆으로 넘치는 표 · 칸반: 얇은 막대 + 오른쪽에 더 있으면 끝이 흐려짐(.wd-more-r — werp-motion.js 17판)
   ⑦ 흰 판 → 유리: 단계 카드 줄 · 영업 분석 표 · 간트 판 */
@media all{
/* ② */
html.glass .an-split{align-items:start}
html.glass .calc-grid{align-items:start}
html.glass .sh2-rg{align-items:start}
/* ③ */
html.glass .sh2-rc{background:rgba(255,255,255,.66)!important;border:1px solid rgba(255,255,255,.88)!important;box-shadow:0 10px 30px rgba(40,70,60,.06)!important;border-radius:18px!important;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
/* ④ */
:where(.ab){display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;border:1px solid #dce4e8;background:#fff;color:#33475b;transition:background .15s,border-color .15s}
:where(.ab):hover{background:#f6f8f9;border-color:#cbd6dc}
:where(.ab.sm){height:32px;padding:0 13px;font-size:12.5px}
:where(.ab.pri){background:#122331;border-color:#122331;color:#fff}
:where(.ab.pri):hover{background:#1d3446}
:where(.ab)[disabled]{opacity:.45;cursor:not-allowed}
:where(.btn-ghost-sm){display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid #dce4e8;background:rgba(255,255,255,.85);font:inherit;font-size:12px;font-weight:600;color:#4a5a64;cursor:pointer;white-space:nowrap}
:where(.btn-ghost-sm):hover{border-color:#cbd6dc;background:#fff}
/* ⑤ */
html.glass :is(.pl-pipe,.rp-pipe) :is(.pl-pc,.rp-pc){min-width:96px;padding-left:10px;padding-right:10px}
html.glass :is(.pl-pipe,.rp-pipe) :is(.pl-pc,.rp-pc).all{min-width:92px}
/* ⑥ 얇은 막대 */
html.glass :is(.pl-pipe,.rp-pipe,.pl-scroll,.tblwrap,.kanban,.twrap){scrollbar-width:thin;scrollbar-color:rgba(32,49,60,.22) transparent}
html.glass :is(.pl-pipe,.rp-pipe,.pl-scroll,.tblwrap,.kanban,.twrap)::-webkit-scrollbar{height:8px;width:8px}
html.glass :is(.pl-pipe,.rp-pipe,.pl-scroll,.tblwrap,.kanban,.twrap)::-webkit-scrollbar-thumb{background:rgba(32,49,60,.22);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
html.glass :is(.pl-pipe,.rp-pipe,.pl-scroll,.tblwrap,.kanban,.twrap)::-webkit-scrollbar-track{background:transparent}
.wd-more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),rgba(0,0,0,.15));mask-image:linear-gradient(to right,#000 calc(100% - 48px),rgba(0,0,0,.15))}
/* ⑦ */
html.glass :is(.pl-pipe,.rp-pipe,.twrap){background:rgba(255,255,255,.64)!important;border:1px solid rgba(255,255,255,.85)!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(40,70,60,.06)!important;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
html.glass .gt-card{background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
}
/* 17판 덧붙임 — 단계 카드 줄 폭: 생산지시 대장 카드 꾸밈이 화면 이름표(#page-…)로 묶여 있어 같은 힘으로 덮음.
   글자 폭만큼(min-content)까지 줄어들고 옆 여백 10 · 화살표 칸 6 → 1280px 화면에서 한 줄에 들어감 */
html.glass :is(#page-ledger,#page-poledger,#productionSection) .pl-pipe .pl-pc{min-width:auto;padding-left:10px;padding-right:10px}
html.glass :is(#page-ledger,#page-poledger,#productionSection) .pl-pipe .pl-ar{flex-basis:6px;width:6px}
html.glass .rp .rp-pipe .rp-pc{min-width:auto;padding-left:10px;padding-right:10px}
html.glass .rp .rp-pipe .rp-ar{flex-basis:6px;width:6px}
html.glass :is(#page-ledger,#page-poledger,#productionSection) .pl-pipe .pl-ar svg,html.glass .rp .rp-pipe .rp-ar svg{width:8px;height:8px}

/* ===== 18판 — 대표 결정 (2026-10-18 "다 올려") =====
   ① 목록 줄 왼쪽 상태 띠 → 점 · 알약 (조달 점검 가공 · 구매 필요, 시스템 재고 점검 맞지 않음, 이력 조회 견적 묶음 아래 줄)
   ② 영업 분석 · 매출 분석 조회 조건 → 같은 한 줄 유리 막대 (매출 분석 설명 글은 막대 아래 작은 글씨)
   ③ 매출 추이 그래프 꾸밈 (요약 칩 · 기간 고르기 · 최고 표시 · 마지막 점 숨쉬기 · 범례) — app-2.js anTrendChart */
@media all{
/* ① */
html.glass .wk-row:is(.mr2-buy,.rc-bad,.h2-l){box-shadow:none!important}
html.glass .wk-row:is(.mr2-buy,.rc-bad) > .wk-c:first-child .l1::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#e0525a;margin-left:-15px;margin-right:8px;vertical-align:2px;box-shadow:0 0 0 3px rgba(224,82,90,.14)}
html.glass .wk-row.h2-l .h2-n{display:inline-flex;align-items:center;gap:6px;background:rgba(88,186,72,.14);color:#2f6b24;border-radius:999px;padding:2px 10px 2px 8px;font-size:12px;font-weight:700;margin-left:-8px}
html.glass .wk-row.h2-l .h2-n::before{content:"";width:6px;height:6px;border-radius:50%;background:#58BA48}
/* ② */
html.glass #p-sales .fbar,html.glass #sub-analytics .an-filter{background:rgba(255,255,255,.64)!important;border:1px solid rgba(255,255,255,.88)!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(40,70,60,.06)!important;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);padding:12px 16px!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 10px}
html.glass #p-sales .fbar > label{font-size:12px;color:#71818c}
html.glass #p-sales .fbar :is(select,.rangebox,.msel-btn){height:36px}
html.glass #sub-analytics .an-filter{flex-direction:column;align-items:stretch;gap:6px}
html.glass #sub-analytics .an-filter .rc-ct{order:2;display:block;margin:0;padding:0 2px;font-size:0!important;line-height:0}
html.glass #sub-analytics .an-filter .rc-ct > :not(.rc-sub){display:none!important}
html.glass #sub-analytics .an-filter .rc-ct .rc-sub{display:block;font-size:11.5px!important;line-height:1.4;color:#8a99a3;margin:0}
html.glass #sub-analytics .an-filter .filter-bar{order:1;background:transparent!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;display:flex!important;grid-template-columns:none!important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 10px}
html.glass #sub-analytics .an-filter .filter-item{display:flex!important;flex-direction:row!important;flex:0 0 auto!important;width:auto!important;align-items:center;gap:6px;margin:0!important;min-width:0}
html.glass #sub-analytics .an-filter .filter-item > label{font-size:12px;color:#71818c;margin:0!important;white-space:nowrap;text-align:left!important}
html.glass #sub-analytics .an-filter .filter-item select{width:auto!important;min-width:110px;height:36px}
html.glass #sub-analytics .an-filter .rangebox{width:200px!important;height:36px}
html.glass #sub-analytics .an-filter #an-customer{max-width:180px}
html.glass #sub-analytics .an-filter .filter-quick-row{margin:0!important}
}
/* ③ 매출 추이 — 테마와 상관없이 */
.an-chart{position:relative}
.an-tchips{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.an-tchips .c{flex:1 1 150px;min-width:0;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:14px;padding:10px 14px;box-shadow:0 6px 18px rgba(40,70,60,.06)}
.an-tchips small{display:block;font-size:11.5px;color:#8a99a3;font-weight:600}
.an-tchips b{font-size:18px;font-weight:800;color:#16232d;font-variant-numeric:tabular-nums}
.an-tchips em{font-style:normal;font-size:12px;font-weight:800;margin-left:6px;border-radius:999px;padding:1px 8px;white-space:nowrap}
.an-tchips em.up{color:#2f6b24;background:rgba(88,186,72,.16)}
.an-tchips em.dn{color:#b3261e;background:rgba(217,71,60,.12)}
.an-rng{display:inline-flex;background:rgba(237,242,240,.9);border-radius:999px;padding:3px;gap:2px;margin-left:10px;vertical-align:middle}
.an-rng[hidden]{display:none}
.an-rng button{border:0;background:transparent;border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;font-weight:700;color:#5d6d77;cursor:pointer;line-height:1.4}
.an-rng button.on{background:#fff;color:#16232d;box-shadow:0 2px 6px rgba(16,36,50,.12)}
.cl-ma{display:inline-block;width:16px;border-top:2px dashed #e08a00;flex:0 0 16px}
.an-ma-leg[hidden]{display:none}
.an-peak{position:absolute;z-index:2;pointer-events:none;white-space:nowrap;font-size:11.5px;font-weight:800;color:#2f6b24;background:rgba(255,255,255,.95);border:1px solid rgba(47,138,62,.45);border-radius:999px;padding:3px 10px;box-shadow:0 4px 12px rgba(40,70,60,.12)}
.an-peak::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;margin-left:-5px;border:5px solid transparent;border-top-color:rgba(47,138,62,.9);border-bottom:0}
.an-peak[hidden],.an-pulse[hidden]{display:none}
.an-pulse{position:absolute;z-index:2;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#3b7fd4;border:2px solid #fff;box-shadow:0 2px 6px rgba(59,127,212,.4)}
@keyframes anPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:none}}
@keyframes anBeat{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.4);opacity:0}}
html.motion .an-peak.pop{animation:anPop .5s cubic-bezier(.2,.9,.3,1.3) .15s both}   /* 그래프를 다 그린 뒤 app-1.js anPkShow 가 .pop 을 붙임 (10-22) */
html.motion .an-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #3b7fd4;animation:anBeat 1.8s ease-out infinite}

/* 일정 지난 지금 단계 = 빨간 줄무늬 (10-21 대표 "일정 지나면 빨간 줄무늬 — 개발뿐 아니라 모든 화면" · 네이버웍스 보고서 글과 같은 빨강) — 연구 과제 · 품질 상세(.wd-meter) · 생산지시 상세(.pdd-meter) · 영업 PO 상세 생산 흐름(.po-flow) */
.pdd-meter .sg i.n.late b,.wd-meter .sg i.n.late b{background:repeating-linear-gradient(-45deg,#e0675d 0 6px,#f7b4ac 6px 12px);background-size:17px 17px}
.wd-meter .now.late,.pdd-meter .now.late{color:#b3261e;background:rgba(217,71,60,.12);border-color:rgba(217,71,60,.22)}