/* ═══════════════════════════════════════════════════════════════
   ELPUSK ERP · glass.css · v19.10
   전 화면 공용 : 밝은 유리 테마 + 왼쪽 세로 메뉴
   내장그래픽 배려 : blur 는 작은 면적(사이드바·KPI·필터카드)에만.
   표가 든 큰 카드는 blur 없이 반투명 흰색 (스크롤 버벅임 방지).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. 파스텔 배경 ── */
body{background:#F4F7FB !important;color:#14161C;position:relative}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 480px at 8% -6%,  rgba(133,183,235,.55), transparent 62%),
    radial-gradient(560px 460px at 92% 8%,  rgba(175,169,236,.50), transparent 62%),
    radial-gradient(600px 520px at 48% 104%,rgba(93,202,165,.42), transparent 62%),
    radial-gradient(460px 400px at 78% 62%, rgba(240,153,123,.28), transparent 62%)}

/* ── 2. 왼쪽 세로 메뉴 (기존 상단바를 CSS 로만 세로 전환) ── */
body{padding-left:202px}
.topnav{position:fixed !important;left:0;top:0;bottom:0;width:202px;z-index:50;
  overflow:hidden !important;
  background:rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter:blur(28px) saturate(190%);
  backdrop-filter:blur(28px) saturate(190%);
  border-right:1px solid rgba(255,255,255,.85);
  box-shadow:10px 0 32px rgba(15,23,42,.09) !important}
.topnav::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 46%)}
.tninner{flex-direction:column;align-items:stretch;height:100%;max-width:none;
  overflow-y:auto;overflow-x:hidden;padding:12px 10px 10px;gap:2px;position:relative}
.tninner::-webkit-scrollbar{width:0;height:0}

.brand{padding:2px 6px 11px;margin:0 0 8px;border-bottom:1px solid rgba(15,23,42,.09)}
.brand .bname b{color:#0B0E14 !important}
.brand .bname span{color:#5A6274 !important}
.brand .bver{background:rgba(10,132,255,.14) !important;color:#0A5BD0 !important}

.topnav .tnitem{margin-left:0 !important;padding:8px 10px;border-radius:11px;
  color:#2C3346 !important;width:100%;box-sizing:border-box}
.topnav .tnitem[style*="margin-left"]{margin-top:12px;position:relative}
.topnav .tnitem[style*="margin-left"]::before{content:'';position:absolute;left:8px;right:8px;top:-6px;
  height:1px;background:rgba(15,23,42,.08)}
.topnav .tnitem:hover{background:rgba(255,255,255,.78) !important;color:#0B0E14 !important}
.topnav .tnitem.on{background:#0A84FF !important;color:#fff !important;
  box-shadow:0 5px 16px rgba(10,132,255,.35) !important}
.topnav .tnitem small{color:#5A6274 !important;opacity:1}
.topnav .tnitem.on small{color:rgba(255,255,255,.85) !important}
.tnsp{flex:1 1 auto !important;min-height:8px}

/* 메모 : 밝은 사이드바 안에서는 진한 유리 칩으로 (흰 글씨 유지) */
.tnmemo{width:auto !important;flex:0 0 auto !important;margin:8px 0 6px !important;
  padding:9px !important;border-left:0 !important;border-radius:13px;
  background:rgba(22,35,61,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.tnmemo .mlist{max-height:120px}

/* ── 3. 카드 유리 ── */
.card{background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  box-shadow:0 10px 28px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.95) !important}
/* 표가 들어간 큰 카드는 blur 금지 (내장그래픽 스크롤 보호) */
.card:has(table),.card:has(.tbox){
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  background:rgba(255,255,255,.94) !important}

/* ── 4. KPI : 컬러 그라데이션 카드 (표와 같은 폭) ── */
.kpis{gap:12px;margin-bottom:14px}
.kpi{flex:1 1 0;position:relative;overflow:hidden;border:0 !important;border-radius:18px;
  box-shadow:0 10px 26px rgba(15,23,42,.16) !important}
.kpi::after{content:'';position:absolute;right:-26px;top:-26px;width:110px;height:110px;
  border-radius:50%;background:rgba(255,255,255,.16);pointer-events:none}
.kpi>*{position:relative}
.kpi .l{color:rgba(255,255,255,.92) !important}
.kpi .v{color:#fff !important}
.kpi .s,.kpi small{color:rgba(255,255,255,.85) !important}
.kpi .v.red,.kpi .v.dim{color:#fff !important}
.kpi:nth-child(4n+1){background:linear-gradient(135deg,#FE9496,#FDBA83) !important}
.kpi:nth-child(4n+2){background:linear-gradient(135deg,#57A7F5,#8AC7FF) !important}
.kpi:nth-child(4n+3){background:linear-gradient(135deg,#3DC9A2,#7EE3C0) !important}
.kpi:nth-child(4n+4){background:linear-gradient(135deg,#9F8FF0,#C4B6FF) !important}

/* ── 5. 확대창·모달 : 리퀴드 글래스 (내장그래픽용 가벼운 blur) ── */
.modal,.zbox{border-radius:22px !important;
  background:rgba(255,255,255,.80) !important;
  -webkit-backdrop-filter:blur(18px) saturate(180%) !important;
  backdrop-filter:blur(18px) saturate(180%) !important;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .22s ease !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 34px 90px rgba(15,23,42,.30),
             inset 0 1.5px 1px rgba(255,255,255,1),
             inset 0 -1.5px 2px rgba(255,255,255,.45),
             inset 2px 0 3px rgba(255,255,255,.5),
             inset -2px 0 3px rgba(255,255,255,.5) !important}
.zbox .zsum div{background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(255,255,255,.8);border-radius:14px}
.zbox .zh,.modal .mh{border-bottom:1px solid rgba(255,255,255,.6) !important}

/* ── 6. 글자 조금 더 굵고 진하게 ── */
body{font-weight:560}
table td{font-weight:640}
table th{font-weight:800}
h1{color:#0B0E14}

/* ── 7. 좁은 화면 : 다시 가로 상단바로 ── */
@media (max-width:940px){
  body{padding-left:0}
  .topnav{position:sticky !important;left:auto;top:0;bottom:auto;width:auto}
  .tninner{flex-direction:row;align-items:center;height:auto;overflow-x:auto;padding:5px 12px}
  .brand{border-bottom:0;margin:0;padding:0 12px 0 0}
  .topnav .tnitem{width:auto}
  .topnav .tnitem[style*="margin-left"]{margin-top:0}
  .topnav .tnitem[style*="margin-left"]::before{display:none}
  .tnmemo{display:none}
}

/* ── 8. 인쇄 : 메뉴·배경 전부 제거 ── */
@media print{
  body{padding-left:0 !important;background:#fff !important;font-weight:400}
  body::before{display:none !important}
  .topnav{display:none !important}
  .card,.kpi,.modal,.zbox{background:#fff !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    box-shadow:none !important}
}

/* ── 9. 알림(toast) : 항상 밝은 바탕 + 진한 글씨 ── */
.toast{background:rgba(255,255,255,.94) !important;color:#0B0E14 !important;
  border:1px solid rgba(255,255,255,.9) !important;
  box-shadow:0 16px 44px rgba(15,23,42,.24) !important}
.toast .tx{color:#0A4FA8}
.toast.err{background:#FFECEA !important;color:#9A1B14 !important}

/* ── 10. 사이드바 메모 : 위로 크게 ── */
.tnmemo .mlist{max-height:44vh !important}