/* NewlineWork navigation card visual system — 2026-10-08
   Matches the "오늘의 주요현황" dashboard visual language without changing navigation behavior. */
:root{
  --nw-nav-bg:#f6f8fb;
  --nw-nav-card:#ffffff;
  --nw-nav-line:#e3e9f1;
  --nw-nav-line-soft:#eef2f6;
  --nw-nav-text:#172033;
  --nw-nav-muted:#64748b;
  --nw-nav-blue:#1877f2;
  --nw-nav-blue-strong:#1264c7;
  --nw-nav-blue-soft:#eef6ff;
  --nw-nav-shadow:0 8px 24px rgba(15,23,42,.06);
  --nw-nav-shadow-soft:0 4px 13px rgba(15,23,42,.035);
}

/* ---------- Shared sidebar ---------- */
#sidebar.sidebar{
  background:var(--nw-nav-bg)!important;
  border-right:1px solid #e8edf4!important;
  padding:14px 12px 12px!important;
  gap:10px!important;
  box-shadow:none!important;
}
#sidebar .side-brand{
  flex:0 0 auto!important;
  min-height:70px!important;
  margin:0!important;
  padding:12px!important;
  border:1px solid var(--nw-nav-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:var(--nw-nav-shadow)!important;
}
#sidebar .side-brand .side-logo,
#sidebar .side-brand img{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  border-radius:13px!important;
  object-fit:cover!important;
  box-shadow:0 4px 12px rgba(15,49,91,.12)!important;
}
#sidebar .side-brand>div{min-width:0!important}
#sidebar .side-brand b{
  display:block!important;
  color:#0f172a!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#sidebar .side-brand small{
  display:block!important;
  margin-top:4px!important;
  color:#718096!important;
  font-size:9px!important;
  line-height:1.3!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

#sidebar .erp-nav-search{
  flex:0 0 auto!important;
  min-height:46px!important;
  margin:0!important;
  padding:0 13px!important;
  border:1px solid var(--nw-nav-line)!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:var(--nw-nav-shadow-soft)!important;
}
#sidebar .erp-nav-search>span{
  color:#7890a8!important;
  font-size:16px!important;
}
#sidebar .erp-nav-search input{
  height:44px!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:var(--nw-nav-text)!important;
  font-size:12px!important;
  font-weight:750!important;
}
#sidebar .erp-nav-search input::placeholder{color:#9aa8b9!important}

#sidebar #nav{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  padding:2px 1px 10px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:#cad5e3 transparent!important;
}
#sidebar #nav::-webkit-scrollbar{width:6px!important}
#sidebar #nav::-webkit-scrollbar-track{background:transparent!important}
#sidebar #nav::-webkit-scrollbar-thumb{background:#cad5e3!important;border-radius:999px!important}

#sidebar #nav .nav-group{
  position:relative!important;
  flex:0 0 auto!important;
  margin:0!important;
  border:1px solid var(--nw-nav-line)!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:var(--nw-nav-shadow-soft)!important;
  overflow:hidden!important;
}
#sidebar #nav .nav-group.active-group,
#sidebar #nav .nav-group[open]{
  border-color:#d7e5f7!important;
  box-shadow:0 7px 18px rgba(34,88,150,.075)!important;
}
#sidebar #nav .nav-group.active-group:before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:4px!important;
  background:var(--nw-nav-blue)!important;
  z-index:2!important;
}

#sidebar #nav .nav-group-title{
  min-height:54px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0!important;
  padding:10px 12px 10px 14px!important;
  list-style:none!important;
  border:0!important;
  background:#fff!important;
  cursor:pointer!important;
}
#sidebar #nav .nav-group-title::-webkit-details-marker{display:none!important}
#sidebar #nav .nav-group-copy{min-width:0!important}
#sidebar #nav .nav-group-copy b{
  display:block!important;
  color:#1f2a3d!important;
  font-size:12px!important;
  line-height:1.3!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
}
#sidebar #nav .nav-group-copy small{
  display:block!important;
  margin-top:3px!important;
  color:#8a98aa!important;
  font-size:8.5px!important;
  line-height:1.25!important;
  font-weight:650!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#sidebar #nav .nav-group-chevron{
  flex:0 0 auto!important;
  width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:#f3f6fa!important;
  color:#718096!important;
  font-size:16px!important;
  transition:transform .18s ease,background .18s ease!important;
}
#sidebar #nav .nav-group[open] .nav-group-chevron{
  transform:rotate(180deg)!important;
  background:var(--nw-nav-blue-soft)!important;
  color:var(--nw-nav-blue)!important;
}

#sidebar #nav .nav-group-items{
  display:grid!important;
  gap:5px!important;
  padding:2px 8px 9px!important;
  border-top:1px solid var(--nw-nav-line-soft)!important;
  background:#fbfcfe!important;
}
#sidebar #nav button[data-page]{
  position:relative!important;
  width:100%!important;
  min-height:42px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  padding:7px 9px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#425066!important;
  text-align:left!important;
  font-size:11.5px!important;
  font-weight:800!important;
  box-shadow:none!important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease!important;
}
#sidebar #nav button[data-page]:hover{
  background:#fff!important;
  border-color:#dde7f2!important;
  color:#1f4f85!important;
  box-shadow:0 4px 12px rgba(15,23,42,.045)!important;
  transform:translateY(-1px)!important;
}
#sidebar #nav button[data-page] .nav-icon{
  flex:0 0 auto!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  background:#f0f4f8!important;
  color:#61758d!important;
}
#sidebar #nav button[data-page] .nav-icon svg{
  width:16px!important;
  height:16px!important;
  max-width:16px!important;
  max-height:16px!important;
}
#sidebar #nav button[data-page] .nav-text{
  min-width:0!important;
  flex:1 1 auto!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#sidebar #nav button[data-page].active{
  border-color:#cfe2fb!important;
  background:var(--nw-nav-blue-soft)!important;
  color:var(--nw-nav-blue-strong)!important;
  box-shadow:0 5px 14px rgba(24,119,242,.09)!important;
}
#sidebar #nav button[data-page].active:before{
  content:""!important;
  position:absolute!important;
  left:-1px!important;
  top:9px!important;
  bottom:9px!important;
  width:3px!important;
  border-radius:0 999px 999px 0!important;
  background:var(--nw-nav-blue)!important;
}
#sidebar #nav button[data-page].active .nav-icon{
  background:#dcecff!important;
  color:var(--nw-nav-blue)!important;
}

#sidebar .side-foot{
  flex:0 0 auto!important;
  margin:0!important;
  padding:10px!important;
  border:1px solid var(--nw-nav-line)!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:var(--nw-nav-shadow-soft)!important;
}
#sidebar .side-foot .who{
  padding:2px 2px 9px!important;
  margin:0 0 8px!important;
  border-bottom:1px solid var(--nw-nav-line-soft)!important;
}
#sidebar .side-foot .avatar-mini{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:50%!important;
  background:var(--nw-nav-blue-soft)!important;
  color:var(--nw-nav-blue)!important;
  font-weight:950!important;
}
#sidebar .side-foot button{
  min-height:38px!important;
  margin-top:6px!important;
  border:1px solid #dce5ef!important;
  border-radius:11px!important;
  background:#f8fafc!important;
  color:#475569!important;
  font-size:10px!important;
  font-weight:850!important;
}
#sidebar .side-foot button:hover{
  background:#eef6ff!important;
  border-color:#cfe2fb!important;
  color:#1264c7!important;
}

/* ---------- Desktop top navigation ---------- */
@media (min-width:981px){
  .top-primary-menu,
  .grouped-top-menu,
  .erp-top-menu{
    box-sizing:border-box!important;
    margin:10px 18px 0!important;
    padding:7px!important;
    min-height:54px!important;
    border:1px solid var(--nw-nav-line)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:var(--nw-nav-shadow)!important;
    gap:5px!important;
  }
  .top-primary-menu .top-primary-group-trigger{
    min-height:38px!important;
    padding:8px 12px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#45556d!important;
    font-size:11px!important;
    font-weight:900!important;
  }
  .top-primary-menu .top-primary-group.active>.top-primary-group-trigger,
  .top-primary-menu .top-primary-group.open>.top-primary-group-trigger,
  .top-primary-menu .top-primary-group-trigger:hover{
    border-color:#d5e5fa!important;
    background:var(--nw-nav-blue-soft)!important;
    color:var(--nw-nav-blue-strong)!important;
  }
  .top-primary-menu .top-primary-dropdown{
    margin-top:8px!important;
    padding:10px!important;
    border:1px solid var(--nw-nav-line)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 18px 42px rgba(15,23,42,.15)!important;
  }
  .top-primary-menu .top-primary-dropdown-head{
    margin:-2px -1px 7px!important;
    padding:8px 8px 10px!important;
    border-bottom:1px solid var(--nw-nav-line-soft)!important;
  }
  .top-primary-menu .top-primary-dropdown button[data-page]{
    min-height:42px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:#fff!important;
  }
  .top-primary-menu .top-primary-dropdown button[data-page]:hover,
  .top-primary-menu .top-primary-dropdown button[data-page].active{
    border-color:#d5e5fa!important;
    background:var(--nw-nav-blue-soft)!important;
    color:var(--nw-nav-blue-strong)!important;
  }
}

/* ---------- Mobile drawer ---------- */
@media (max-width:980px){
  #sidebar.sidebar{
    width:min(88vw,342px)!important;
    max-width:min(88vw,342px)!important;
    padding:max(12px,env(safe-area-inset-top,0px)) 10px max(12px,env(safe-area-inset-bottom,0px))!important;
    box-shadow:18px 0 44px rgba(15,23,42,.20)!important;
  }
  #sidebar #nav .nav-group-title{min-height:52px!important}
  #sidebar #nav button[data-page]{min-height:44px!important;font-size:12px!important}

  #nwEmergencyDrawer{
    width:min(88vw,342px)!important;
    padding:calc(12px + max(var(--system-top,0px),env(safe-area-inset-top,0px))) 10px calc(12px + env(safe-area-inset-bottom,0px))!important;
    background:var(--nw-nav-bg)!important;
    box-shadow:18px 0 44px rgba(15,23,42,.22)!important;
  }
  #nwEmergencyDrawer .nw-drawer-head{
    margin:0 0 10px!important;
    padding:10px!important;
    border:1px solid var(--nw-nav-line)!important;
    border-radius:19px!important;
    background:#fff!important;
    box-shadow:var(--nw-nav-shadow)!important;
  }
  #nwEmergencyDrawer .nw-drawer-brand{padding:0!important}
  #nwEmergencyDrawer .nw-drawer-brand img{
    width:44px!important;height:44px!important;border-radius:13px!important;
  }
  #nwEmergencyDrawer .nw-drawer-close{
    top:calc(18px + max(var(--system-top,0px),env(safe-area-inset-top,0px)))!important;
    right:17px!important;
    width:34px!important;
    height:34px!important;
    border:1px solid #e0e7ef!important;
    border-radius:10px!important;
    background:#f6f8fb!important;
    color:#5f6f82!important;
    font-size:20px!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav{
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    padding:0 1px 10px!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav .nav-group{
    position:relative!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--nw-nav-line)!important;
    border-radius:17px!important;
    background:#fff!important;
    box-shadow:var(--nw-nav-shadow-soft)!important;
    overflow:hidden!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav .nav-group+.nav-group{
    margin-top:0!important;
    padding-top:0!important;
    border-top:1px solid var(--nw-nav-line)!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav .nav-group.active-group:before{
    content:""!important;
    position:absolute!important;
    left:0!important;top:0!important;bottom:0!important;width:4px!important;
    background:var(--nw-nav-blue)!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav .nav-group-title{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:52px!important;
    padding:10px 12px 10px 14px!important;
    background:#fff!important;
    border:0!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav .nav-group-copy b{
    display:block!important;
    color:#1f2a3d!important;
    font-size:12px!important;
    font-weight:950!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav .nav-group-copy small{
    display:block!important;
    margin-top:3px!important;
    color:#8a98aa!important;
    font-size:8.5px!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav .nav-group-chevron{
    width:25px!important;height:25px!important;display:grid!important;place-items:center!important;
    border-radius:8px!important;background:#f3f6fa!important;color:#718096!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav .nav-group-items{
    display:grid!important;
    gap:5px!important;
    padding:3px 8px 9px!important;
    border-top:1px solid var(--nw-nav-line-soft)!important;
    background:#fbfcfe!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav button[data-page]{
    min-height:44px!important;
    padding:7px 9px!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    background:transparent!important;
    color:#425066!important;
    font-size:12px!important;
    font-weight:800!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav button[data-page] .nav-icon{
    width:30px!important;height:30px!important;min-width:30px!important;
    border-radius:9px!important;background:#f0f4f8!important;color:#61758d!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav button[data-page].active{
    border-color:#cfe2fb!important;
    background:var(--nw-nav-blue-soft)!important;
    color:var(--nw-nav-blue-strong)!important;
    box-shadow:0 5px 14px rgba(24,119,242,.09)!important;
  }
  #nwEmergencyDrawer .nw-drawer-nav button[data-page].active .nav-icon{
    background:#dcecff!important;color:var(--nw-nav-blue)!important;
  }
  #nwEmergencyDrawer .nw-drawer-foot{
    margin-top:0!important;
    padding:10px!important;
    border:1px solid var(--nw-nav-line)!important;
    border-radius:17px!important;
    background:#fff!important;
    box-shadow:var(--nw-nav-shadow-soft)!important;
  }
  #nwEmergencyDrawer .nw-drawer-logout{
    min-height:40px!important;
    border-radius:11px!important;
    background:#f8fafc!important;
  }

  /* Floating quick navigation uses the same dashboard-card language. */
  #bottomQuick.bottom-quick,
  #bottomQuick.reference-bottom-nav{
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    min-height:64px!important;
    padding:7px!important;
    border:1px solid var(--nw-nav-line)!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 12px 30px rgba(15,23,42,.14)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    overflow:visible!important;
  }
  #bottomQuick button{
    min-width:0!important;
    min-height:50px!important;
    padding:4px 2px!important;
    border:1px solid transparent!important;
    border-radius:14px!important;
    background:transparent!important;
    color:#6b7a8d!important;
    gap:3px!important;
  }
  #bottomQuick button>span{
    width:28px!important;
    height:28px!important;
    margin:0 auto!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    background:#f0f4f8!important;
    color:#61758d!important;
  }
  #bottomQuick button>span svg{width:16px!important;height:16px!important}
  #bottomQuick button small{
    color:inherit!important;
    font-size:8.5px!important;
    line-height:1.1!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:100%!important;
  }
  #bottomQuick button.active{
    border-color:#d5e5fa!important;
    background:var(--nw-nav-blue-soft)!important;
    color:var(--nw-nav-blue-strong)!important;
  }
  #bottomQuick button.active>span{
    background:#dcecff!important;
    color:var(--nw-nav-blue)!important;
  }
  .clean-shell main{
    padding-bottom:max(86px,calc(78px + env(safe-area-inset-bottom,0px)))!important;
  }
}

@media print{
  #sidebar,
  #nwEmergencyDrawer,
  #nwEmergencyScrim,
  #bottomQuick,
  .top-primary-menu,
  .grouped-top-menu,
  .erp-top-menu{display:none!important}
}