:root{
  --continuity-navy:#2c3b52;
  --continuity-navy-deep:#172e49;
  --continuity-red:#a92e2b;
  --continuity-gray:#dcdddd;
  --continuity-bg:#f5f6f7;
  --continuity-line:#e1e4e8;
  --continuity-ink:#202b3b;
  --continuity-muted:#718096;
  --continuity-top:72px;
  --continuity-side:232px;
}

html{scroll-behavior:smooth}
body.continuity-active{
  margin-left:var(--continuity-side)!important;
  padding-top:var(--continuity-top)!important;
  background:var(--continuity-bg)!important;
  color:var(--continuity-ink);
  font-variant-numeric:tabular-nums;
}
body.continuity-active:before{
  content:"";position:fixed;z-index:-1;inset:var(--continuity-top) 0 0 var(--continuity-side);
  pointer-events:none;background:radial-gradient(circle at 82% 0,rgba(44,59,82,.035),transparent 34%);
}

body.continuity-active .gnav{
  height:var(--continuity-top)!important;
  left:0!important;padding:0 28px 0 24px!important;gap:12px!important;
  background:linear-gradient(100deg,#263a55,#142b47)!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;color:#fff!important;z-index:9000!important;
}
body.continuity-active .gnav .gbrand{height:62px!important;margin:0!important;width:184px!important}
body.continuity-active .gnav .glogo{
  width:164px!important;max-width:164px!important;height:56px!important;object-fit:contain!important;
  filter:brightness(0) invert(1);opacity:.96;
}
body.continuity-active .gnav .gsp{flex:1!important}
body.continuity-active .gnav .gwho{color:#c5d0dc!important;margin-right:8px!important;line-height:1.35}
body.continuity-active .gnav .gwho b{display:block;color:#fff!important;font-size:13px}
body.continuity-active .gnav .glo{color:#dbe3eb!important;background:transparent!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:8px!important}
body.continuity-active .gnav .glo:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
body.continuity-active .gnav .gadmin{border-color:rgba(255,255,255,.35)!important}
body.continuity-active .gnav .gout{border:0!important;color:#aebdcb!important;padding-right:0!important}
body.continuity-active .gnav>.gmenu{display:none}
body.continuity-active .gtog{color:#fff!important}

.gsidenav{
  position:fixed;z-index:8990;left:0;top:var(--continuity-top);bottom:0;width:var(--continuity-side);
  background:linear-gradient(180deg,#203a5b,#172e49);color:#dbe4ee;padding:25px 0 18px;
  font-family:Pretendard,'Malgun Gothic',sans-serif;box-shadow:inset -1px 0 rgba(255,255,255,.04);
}
.gsidenav *{box-sizing:border-box}
.gsidenav .gs-label{padding:0 24px 12px;color:#91a6bb;font-size:11px;letter-spacing:.08em}
.gsidenav .gs-links{display:grid;gap:3px}
.gsidenav a,.gsidenav button{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;height:58px;padding:0 22px;
  border:0;border-radius:0;background:transparent;color:inherit;text-decoration:none;font:700 14px/1 Pretendard,'Malgun Gothic',sans-serif;
  cursor:pointer;transition:background .2s ease,transform .2s ease,color .2s ease;text-align:left;
}
.gsidenav a:hover,.gsidenav button:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateX(2px)}
.gsidenav a.active{background:rgba(255,255,255,.09);color:#fff}
.gsidenav a.active:after{content:"";position:absolute;left:0;inset-block:0;width:4px;background:var(--continuity-red)}
.gs-icon{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px}
.gs-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 업무 그룹 — 상위 버튼을 누르면 하위 메뉴가 펼쳐진다 */
.gsidenav .gs-links{overflow-y:auto;max-height:calc(100vh - var(--continuity-top) - 110px);scrollbar-width:thin}
.gsidenav .gs-caret{margin-left:auto;font-size:10px;opacity:.6;transition:transform .18s ease}
.gsidenav .gs-grp.open>.gs-top{color:#fff;background:rgba(255,255,255,.05)}
.gsidenav .gs-grp.open .gs-caret{transform:rotate(180deg);opacity:1}
.gsidenav .gs-sub{display:none}
.gsidenav .gs-grp.open .gs-sub{display:block;padding:2px 0 8px}
.gsidenav .gs-sub a{height:34px;padding:0 20px 0 58px;gap:0;font-size:12.5px;font-weight:600;color:#a7bccf}
.gsidenav .gs-sub a:before{content:"";position:absolute;left:38px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:currentColor;opacity:.55}
.gsidenav .gs-sub a:hover{color:#fff}
.gsidenav .gs-sub a.active{background:rgba(255,255,255,.1);color:#fff}
.gs-foot{position:absolute;left:0;right:0;bottom:16px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}
.gs-foot button{height:46px;color:#b9c7d4;font-size:13px}

body.continuity-active .gnav.menu-open>.gmenu{
  display:flex!important;position:fixed!important;z-index:9010!important;left:232px!important;top:72px!important;bottom:0!important;
  width:310px!important;overflow:auto!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;
  padding:18px!important;background:#fff!important;border-right:1px solid var(--continuity-line)!important;
  box-shadow:18px 0 36px rgba(23,46,73,.13)!important;white-space:normal!important;
}
body.continuity-active .gnav.menu-open .gmi{position:static!important}
body.continuity-active .gnav.menu-open .gmi>button{width:100%!important;text-align:left!important;color:var(--continuity-muted)!important;padding:12px 10px 7px!important;pointer-events:none}
body.continuity-active .gnav.menu-open .gdrop{display:block!important;position:static!important;box-shadow:none!important;border:0!important;padding:0 0 8px!important;background:none!important}
body.continuity-active .gnav.menu-open .gdrop a{display:block!important;padding:11px 12px!important;color:var(--continuity-ink)!important;border-radius:8px!important;font-weight:650}
body.continuity-active .gnav.menu-open .gdrop a:hover{background:#f0f2f4!important;color:var(--continuity-red)!important}

body.continuity-active>.wrap,body.continuity-active>#app,body.continuity-active>main,
body.continuity-active .dash-main>.wrap{
  max-width:1260px;margin-left:auto!important;margin-right:auto!important;
}
body.continuity-active .dash-layout{display:block!important}
body.continuity-active .dash-side{display:none!important}
body.continuity-active .dash-main{min-width:0!important}
body.continuity-active h1{letter-spacing:-.035em;text-wrap:balance}
body.continuity-active button,body.continuity-active a,body.continuity-active input,body.continuity-active select{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
body.continuity-active button:active,body.continuity-active a:active{transform:translateY(1px)}
body.continuity-active :focus-visible{outline:3px solid rgba(169,46,43,.24)!important;outline-offset:2px!important}
body.continuity-active .wrap,body.continuity-active #app{animation:continuity-page-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes continuity-page-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* 지도·노선도는 이중 사이드바 때문에 본문이 좁아지지 않도록 공통 메뉴를 아이콘 폭으로 접는다. */
body.continuity-map{--continuity-side:76px;overflow:hidden!important}
body.continuity-map .gsidenav{width:76px}
body.continuity-map .gsidenav .gs-label,body.continuity-map .gsidenav a>span:last-child,body.continuity-map .gs-foot button>span:last-child{display:none}
body.continuity-map .gsidenav a,body.continuity-map .gs-foot button{justify-content:center;padding:0;gap:0}
/* 노선도(축소 폭)에서는 하위 메뉴를 펼치지 않는다 — 아이콘만 보이는 상태라 글자가 들어갈 자리가 없다 */
body.continuity-map .gsidenav .gs-sub,body.continuity-map .gsidenav .gs-caret{display:none!important}
body.continuity-map .gsidenav .gs-top>span:nth-child(2){display:none}
body.continuity-map .gsidenav .gs-top{justify-content:center;padding:0;gap:0}
body.continuity-map .gnav.menu-open>.gmenu{left:76px!important}
body.continuity-map>.wrap{width:100%!important;max-width:none!important;height:calc(100vh - var(--continuity-top))!important;margin:0!important}
body.continuity-map>.wrap>.body{min-height:0!important}

@media(max-width:900px){
  :root{--continuity-top:62px;--continuity-side:0px}
  body.continuity-active{margin-left:0!important;padding-top:62px!important;padding-bottom:62px!important}
  body.continuity-active:before{inset:62px 0}
  body.continuity-active .gnav{height:62px!important;padding:0 14px!important}
  body.continuity-active .gnav .gbrand{width:auto!important;height:54px!important}
  body.continuity-active .gnav .glogo{width:132px!important;height:48px!important}
  body.continuity-active .gnav .gwho,body.continuity-active .gnav .glo:not(.gout),body.continuity-active .gs-label,body.continuity-active .gs-foot{display:none!important}
  body.continuity-active .gtog{display:block!important;order:4}
  .gsidenav{top:auto;bottom:0;width:100%;height:62px;padding:0;z-index:9020}
  .gsidenav .gs-links{grid-template-columns:repeat(7,1fr);height:62px;max-height:none;overflow:visible}
  /* 하단 탭바에서는 펼치지 않고, 탭을 누르면 그 업무의 대표 화면으로 바로 이동한다(스크립트에서 처리) */
  .gsidenav .gs-sub,.gsidenav .gs-caret{display:none!important}
  .gsidenav .gs-grp{display:flex}
  .gsidenav .gs-top{height:62px;padding:0;justify-content:center;gap:0;font-size:0}
  .gsidenav a{height:62px;padding:0;justify-content:center;gap:0;font-size:0}
  .gsidenav a.active:after{left:20%;right:20%;top:auto;bottom:0;width:auto;height:3px}
  body.continuity-active .gnav.open>.gmenu,body.continuity-active .gnav.menu-open>.gmenu{left:0!important;top:62px!important;bottom:62px!important;width:100%!important;max-height:none!important}
  body.continuity-map>.wrap{height:calc(100vh - 124px)!important}
}
@media print{
  body.continuity-active{margin-left:0!important;padding-top:0!important;padding-bottom:0!important;background:#fff!important}
  .gsidenav{display:none!important}
}
