/* =============================================================
   좌측 메뉴 - gjf_front(SPA) 사이드바 디자인 이식
   원본 : gjf_front/src/styles/headerSideMenu.scss (컴파일본)
   두 화면의 메뉴를 하나의 디자인으로 맞추기 위해 그대로 가져왔다.
   수정할 일이 생기면 원본을 고치고 다시 컴파일해 덮어쓰는 편이 안전하다.
   ============================================================= */
@charset "UTF-8";
/* ✅ 햄버거 버튼 */
.topnav-ham {
  top: 12px;
  left: 16px;
  cursor: pointer;
  z-index: 2;
}

/* ✅ 사이드 메뉴 */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100%;
  background: #fff;
  /* 경계는 선 대신 그림자로 — 선은 다크에서 밝은 줄로 도드라진다 */
  border-right: 0;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  padding: 40px 0;
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 500;
  /* 위 여백 40px 은 로고 위가 대부분 빈 칸이었다. 메뉴 항목이 아래로 밀려
     스크롤이 생기던 원인이라 줄이되, 닫기 ✕(24px)가 로고 위에 매달려 있으므로
     그 자리는 남긴다.
     20px 은 ✕ 가 위로 잘려 나갔고, 30px 은 로고줄에 3px 까지 붙어 ✕ 가 위 칸에
     떠 있는 게 아니라 아래 줄에 딸린 것처럼 보였다. 36px = ✕(24) + 위아래 6px. */
  padding: 36px 0 0;
}
.side-menu.open {
  transform: translateX(0);
}
.side-menu {
  /* 로고 영역 */
}
.side-menu .side-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  /* 아래 여백들을 조금씩 줄여 메뉴에 돌려준다 (23 → 16 → 10) */
  margin-bottom: 10px;
  position: relative;
}
/* 재단 워드마크 대신 심볼 + 화면 이름 2줄 (UIX-09-006) */
.side-menu .side-logo .side-logo-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}
.side-menu .side-logo .side-logo-symbol {
  width: 30px;
  height: auto;
  flex: 0 0 30px;
}
.side-menu .side-logo .side-logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* 화면에 따라 상위에서 text-align:center 가 내려오면 '경기도'가
     '일자리상황판' 가운데로 몰린다. 두 줄은 왼쪽 끝을 맞춰야 한 이름으로 읽힌다. */
  text-align: left;
  line-height: 1.15;
  letter-spacing: -0.4px;
}
/* 두 줄은 한 이름이다. 회색 600 으로 두었더니 '경기도' 만 흐려
   따로 붙은 꼬리표처럼 읽혔다. 크기만 다르고 색·굵기는 같게 둔다. */
.side-menu .side-logo .side-logo-text em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #222;
}
.side-menu .side-logo .side-logo-text strong {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}

.side-menu .side-logo .logo {
  height: 32px;
}
.side-menu .side-logo .logo-en {
  width: 130px;
}
.side-menu .side-logo .lang-select {
  position: relative;
  margin-left: 6px;
}
.side-menu .side-logo .lang-select .lang-select-trigger {
  height: 22px;
  min-width: 60px;
  padding: 0 16px 0 6px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #f5f5f5;
  color: #555;
  font-size: 12px;
  line-height: 20px;
  cursor: pointer;
  position: relative;
  text-align: left;
}
.side-menu .side-logo .lang-select .lang-select-trigger::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #888;
  transform: translateY(-50%);
}
.side-menu .side-logo .lang-select .lang-select-menu {
  position: absolute;
  top: 24px;
  left: 0;
  width: 58px;
  border: 1px solid #d9d9d9;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  z-index: 10;
}
.side-menu .side-logo .lang-select .lang-select-menu button {
  display: block;
  width: 100%;
  height: 24px;
  border: 0;
  background: #fff;
  color: #333;
  font-size: 11px;
  text-align: left;
  padding: 0 6px;
  cursor: pointer;
}
.side-menu .side-logo .lang-select .lang-select-menu button.active, .side-menu .side-logo .lang-select .lang-select-menu button:hover {
  background: #5061E1;
  color: #fff;
}
.side-menu .side-logo .close-btn {
  position: absolute;
  /* 위 여백 36px 안에서 위아래 6px 씩 — 로고줄과도, 패널 윗변과도 같은 간격 */
  top: -30px;
  right: 16px;
  background: #F6F6F6;
  border-radius: 20px;
  font-weight: 600;
  font-family: "Pretendard";
}
.side-menu {
  /* 섹션 타이틀 */
}
.side-menu .menu-section-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(217, 217, 217, 0.3019607843);
  color: #333;
  /* 제목 줄 오른쪽 끝에 로그인 · 공유 · 전체화면 · 테마 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.side-menu .menu-section-title > span {
  white-space: nowrap;
}
.side-menu .menu-section-title {
  /* 상단 도구 묶음 — 공유 · 전체화면 · 테마 (상황판 좌측 메뉴 상단과 짝).
     오른쪽 끝에 몰려 있던 것을 폭 전체로 편다. 남는 자리는 테마 스위치가 먹는다. */
}
.side-menu .menu-section-title .menu-section-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  width: 100%;
  /* 상단으로 옮긴 로그인 — 도구 버튼과 높이를 맞춘다 */
}
.side-menu .menu-section-title .menu-section-tools .login-btn-trigger {
  height: 24px;
  padding: 0 6px;
  margin: 0;
  border-radius: 4px;
  font-size: 11px;
  line-height: 24px;
  white-space: nowrap;
  box-shadow: none;
}
.side-menu .menu-section-title .side-menu-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.side-menu .menu-section-title .side-tool-btn,
.side-menu .menu-section-title .theme-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #f5f5f5;
  color: #555;
  cursor: pointer;
}

/* 라이트/다크는 '지금 어느 쪽인지'가 보여야 하는 상태값이라
   공유·전체화면 같은 아이콘 버튼과 성격이 다르다. 크기로 키우는 대신
   (36px 로 키웠더니 줄이 들쭉날쭉해 보인다는 지적) 좌우 스위치로 바꾼다.
   버튼 높이는 32px 그대로 맞추고, 남는 가로를 스위치가 채운다. (UIX-09-002) */
/* 공유·전체화면은 왼쪽, 토글은 오른쪽 끝에 붙인다(margin-left:auto).
   폭을 늘려 채우면 줄 끝이 서로 안 맞아 보인다 — 크기를 못 박고 끝선만 맞춘다. */
.side-menu .menu-section-title .theme-toggle.is-switch {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 28px;
  margin-left: auto;
  padding: 2px;
  border-radius: 14px;
  overflow: hidden;
}
.side-menu .menu-section-title .theme-toggle.is-switch .theme-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}
.side-menu .menu-section-title .theme-toggle.is-switch[aria-pressed="true"] .theme-switch-knob {
  transform: translateX(100%);
}
.side-menu .menu-section-title .theme-toggle.is-switch .theme-switch-half {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b0b4bb;
  transition: color 0.2s ease;
}
.side-menu .menu-section-title .theme-toggle.is-switch[aria-pressed="false"] .theme-switch-half.light,
.side-menu .menu-section-title .theme-toggle.is-switch[aria-pressed="true"] .theme-switch-half.dark {
  color: #333;
}
@media (prefers-reduced-motion: reduce) {
  .side-menu .menu-section-title .theme-toggle.is-switch .theme-switch-knob { transition: none; }
}

/* 관계자 로그인 — 눈에 띄지 않게 (UIX-09-001).
   맨 아래에 홀로 두니 위아래 빈 칸이 오히려 시선을 끌어,
   최근 업데이트 머리줄 오른쪽 끝에 붙여 줄 하나를 통째로 아꼈다. */
.side-menu .side-login-btn {
  padding: 0 2px;
  border: 0;
  background: none;
  /* 조용해야 하지만 읽히긴 해야 한다 — 머리줄 바탕(#e9e9e9) 위 대비 4.8
     (다크는 theme-dark.css 의 --dk-text-3 로 이미 충분하다) */
  color: #5f6672;
  font-size: 11px;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.side-menu .side-login-btn:hover { color: #5061e1; }
.side-menu .menu-section-title .side-tool-btn:hover,
.side-menu .menu-section-title .theme-toggle:hover {
  background: #ececec;
}
.side-menu .menu-section-title .side-tool-btn svg,
.side-menu .menu-section-title .theme-toggle svg {
  display: block;
  width: 15px;
  height: 15px;
}
.side-menu .menu-section-title .side-tool-btn.on {
  background: #e6e9fb;
  color: #5061e1;
  border-color: #c3cbf5;
}
.side-menu .menu-section-title {
  /* 공유 목록 */
}
.side-menu .menu-section-title .side-tool-share {
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 20;
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.side-menu .menu-section-title .side-tool-share button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.side-menu .menu-section-title .side-tool-share button img {
  width: 100%;
  height: 100%;
  display: block;
}
.side-menu {
  /* N(NEW) 배지 — waa_menu_mng.NEW_YN 으로 켜고 끈다 */
}
.side-menu .menu-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 3px;
  background: #fbc02d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
}
.side-menu {
  /* 메뉴 리스트 */
}
.side-menu .menu-list {
  /* 아래 블록들은 제 높이만 쓰고, 남는 세로는 메뉴가 가져간다.
     min-height:0 이 없으면 flex 자식이 줄지 않아 스크롤이 생기지 않는다. */
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
}
.side-menu .menu-list .menu-item {
  display: block;
  align-items: center;
  /* 항목에 2px 테두리가 있어 그만큼 빼야 끝선이 16px 로 맞는다 */
  margin: 0px 14px;
  padding: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.side-menu .menu-list .menu-item .menu-link {
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  /* 좌우 끝선을 제목줄·최근업데이트(16px)와 맞춘다 */
  margin: 0;
}
.side-menu .menu-list .menu-item .menu-link a {
  margin: 0px 18px;
}
.side-menu .menu-list .menu-item .menu-link img {
  width: 18px;
}
.side-menu .menu-list .menu-item .menu-link .dropdown-arrow {
  text-align: center;
}
.side-menu .menu-list .menu-item .menu-link .dropdown-arrow img {
  width: 10px;
}
.side-menu .menu-list .menu-item .menu-link.sub-active {
  background-color: #5061E1;
}
.side-menu .menu-list .menu-item .menu-link.sub-active span {
  color: #fff;
}
/* 아이콘 PNG 가 브랜드 블루(#5061E1)라 같은 색 배경 위에서 사라진다.
   글자와 같이 흰색으로 뒤집는다. (.menu-item.active 쪽에는 이미 있던 처리인데
   지금 선택 표시는 .menu-link.sub-active 로 붙어 이 규칙이 비어 있었다) */
.side-menu .menu-list .menu-item .menu-link.sub-active img {
  filter: brightness(0) invert(1);
}
.side-menu .menu-list .menu-item a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 8px 18px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}
.side-menu .menu-list .menu-item a img {
  flex-shrink: 0;
}
.side-menu .menu-list .menu-item a span {
  flex: 1;
}
.side-menu .menu-list .menu-item a span:hover {
  color: #5061E1;
}
.side-menu .menu-list .menu-item:hover {
  background: inherit;
}
.side-menu .menu-list .menu-item.active {
  background: #5061E1;
  outline: none;
  color: inherit;
}
.side-menu .menu-list .menu-item.active.monitoring span {
  color: #fff;
}
.side-menu .menu-list .menu-item.active.economy span {
  color: #fff;
}
.side-menu .menu-list .menu-item.active span:hover {
  color: #fff;
}
.side-menu .menu-list .menu-item.active a {
  color: #fff;
}
.side-menu .menu-list .menu-item.active img {
  filter: brightness(0) invert(1);
}
.side-menu .menu-list .menu-item .drop-menu {
  display: none;
  list-style: none;
  /* 항목은 li 의 padding-left 55px 로 자리를 잡는다. 가운데 정렬이면
     이름이 길어 줄이 감길 때 두 줄이 가운데로 몰려 다음 항목과 뭉쳐 보인다. */
  text-align: left;
  padding: 0;
}
.side-menu .menu-list .menu-item .drop-menu li a {
  /* 상위 메뉴용 margin 8px 18px 이 하위까지 먹고 있었다.
     좌우 18px 은 이름을 눌러 감기게 했고, 세로 8px 은 하위 행을 40px 로 만들어
     상위 항목(36px)보다 커지게 했다. 상위 링크와 같은 32px(24+4+4)로 맞춘다. */
  margin: 4px 0;
  height: 20px;
  display: inline-block;
  width: max-content;
}
.side-menu .menu-list .menu-item .drop-menu li.active {
  background: #5061E1;
  border-radius: 4px;
}
.side-menu .menu-list .menu-item .drop-menu li.active a {
  color: #fff;
  border-bottom: 0;
}
.side-menu .menu-list .menu-item .drop-menu li.active a:hover {
  color: #fff;
  border-bottom: 0;
}
.side-menu .menu-list .menu-item .drop-menu li a:hover {
  color: #5061E1;
  border-bottom: 2px solid #5061E1;
}
.side-menu .menu-list .menu-item .drop-menu.open {
  margin: 0;
  display: block;
}
.side-menu .menu-list .menu-item .drop-menu.open li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 55px;
}
.side-menu .menu-list .menu-item .drop-menu.open li a {
  height: 24px;
  line-height: 24px;
}
.side-menu {
  /* ✅ 최근 업데이트 */
}
.side-menu .recent-update {
  /* 개편 전 .update-container 의 짜임을 되살린다.
     둥근 카드 하나가 아니라 '머리줄 + 목록' 두 칸이고, 위아래를 선으로 끊는다. */
  /* 이 아래로는 아무것도 없으므로 사이드바 바닥 여백을 여기서 준다 */
  margin: 0 16px 14px;
  border-top: 1px solid rgba(164, 164, 164, 0.3);
  border-bottom: 1px solid rgba(164, 164, 164, 0.3);
  background: rgba(164, 164, 164, 0.1019607843);
  font-size: 12px;
  /* 한 건 = 두 줄(날짜/출처명). 한 건만 그려 두고 바뀔 때 올려 준다. */
}
.side-menu .recent-update .recent-ticker {
  overflow: hidden;
  outline: none;
}
.side-menu .recent-update .recent-ticker-item {
  animation: recent-ticker-up 0.45s ease;
}
@keyframes recent-ticker-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 원본과 같은 순서 — 날짜(파랑, 작게) 위, 출처명(본문색) 아래 */
.side-menu .recent-update .recent-ticker {
  padding: 6px 10px;
}
.side-menu .recent-update .recent-ticker-date {
  margin-bottom: 2px;
  line-height: 1.2;
  font-size: 11px;
  font-weight: 400;
  color: #5061E1;
}
.side-menu .recent-update .recent-ticker-name {
  line-height: 1.2;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-menu .recent-update {
  /* 모션을 줄이도록 설정한 경우 흐르지 않는다 */
}
@media (prefers-reduced-motion: reduce) {
  .side-menu .recent-update .recent-ticker-item {
    animation: none;
  }
}
.side-menu .recent-update .recent-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(164, 164, 164, 0.3);
  background: rgba(164, 164, 164, 0.1);
  font-weight: 500;
  color: #333;
}
/* 원본의 fa-square-n 듀오톤 아이콘(파란 사각형 + 흰 N)을 그대로 그린다.
   FontAwesome 이 없는 화면에서도 같게 보이도록 CSS 로 만든다. */
.side-menu .recent-update .recent-title::before {
  content: "N";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #208af5;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.side-menu .recent-update .recent-title .recent-title-txt {
  margin-right: auto;
  font-weight: 500;
  font-size: 14px;
}
.side-menu .recent-update .recent-title .recent-update-badge {
  display: inline-block;
  background-color: #5061E1;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 0px 4px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}
.side-menu .recent-update ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.side-menu .recent-update ul li {
  margin-bottom: 6px;
  line-height: 1.4;
}
.side-menu .recent-update ul li div:first-child {
  color: #8392FF;
  font-weight: 500;
  margin-bottom: 2px;
}
.side-menu .recent-update ul li div:last-child {
  color: #333;
  font-size: 12px;
}
.side-menu {
  /* ✅ 오버레이 */
}
.side-menu .overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9;
}
.side-menu {
  /* 반응형 */
}
.side-menu .topnav-ham-mobile {
  display: none;
}
@media (max-width: 768px) {
  .side-menu .topnav-ham {
    display: none;
  }
  .side-menu .topnav-ham-mobile {
    display: inline-block;
  }
}

.login-user-name {
  display: block;
  font-size: 15px;
  /* font-weight: 600; */
  color: #333;
  margin-right: 10px;
  padding: 6px 12px;
  /* background: #f5f6fb; */
  border-radius: 6px;
  text-align: center;
  /* border: 1px solid #e0e3f0; */
  justify-content: left;
  display: flex;
  /* justify-items: left; */
  /* text-decoration: underline; */
}

.topnav-ham-mobile {
  display: none;
}

.topnav-ham[src*=white] {
  display: none;
}

@media (max-width: 768px) {
  .topnav-ham {
    display: none;
  }
  .topnav-ham[src*=white] {
    display: inline-block;
  }
  .topnav-ham-mobile {
    display: inline-block;
  }
  .login-user-name {
    display: none;
  }
}
.div-popup-btns-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 구분선을 좌우 16px 들여 넣으려고 안쪽 여백을 바깥 여백으로 돌렸다 */
  padding: 12px 0;
  /* 굵기·색은 제목줄 구분선, 필터 패널 구분선과 같은 값 */
  border-top: 4px solid rgba(217, 217, 217, 0.3);
  margin-top: auto;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
}

.popup-btn-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #444;
  cursor: pointer;
  transition: 0.2s ease;
}
.popup-btn-item:hover {
  color: #2f6df6;
}
.popup-btn-item span {
  display: flex;
  align-items: center;
}
.popup-btn-item img {
  display: block;
}

/* 제목 줄을 두 줄로 나눈다.
   영문은 'Job Dashboard' + 로그아웃·공유·전체화면·테마가 한 줄에 다 들어가지
   않아 오른쪽으로 밀린다. 제목은 왼쪽에 한 줄로, 도구는 다음 줄 오른쪽 끝에.
   한글은 한 줄에 들어가므로 그대로 둔다. (SPA headerSideMenu.scss 와 같은 값) */
.side-menu.en .menu-section-title {
  flex-wrap: wrap;
}
.side-menu.en .menu-section-title > span {
  width: 100%;
}
.side-menu.en .menu-section-title .menu-section-tools {
  margin-left: auto;
}

.side-menu.en .menu-list .menu-item .menu-link {
  height: auto;
  min-height: 32px;
  line-height: normal;
}
.side-menu.en .menu-list .menu-item .menu-link a {
  align-items: center;
  line-height: 1.2;
  min-height: 32px;
}
.side-menu.en .menu-list .menu-item a span {
  white-space: normal;
}
.side-menu.en .menu-list .menu-item.monitoring .drop-menu {
  text-align: left;
}
.side-menu.en .menu-list .menu-item.monitoring .drop-menu li {
  padding-left: 55px;
  min-height: 24px;
  height: auto;
}
.side-menu.en .menu-list .menu-item.monitoring .drop-menu li a {
  height: auto;
  line-height: 1.2;
  text-align: left;
  margin-left: 0;
}

/* =============================================================
   본문 여백 · 햄버거 · 오버레이

   예전처럼 메뉴가 처음부터 펼쳐진 상태로 둔다.
   본문은 메뉴 폭만큼 밀어 두고, 접으면 햄버거 자리(56px)만 남긴다.
   접힘 여부는 body.side-collapsed 하나로 다룬다.
   ============================================================= */

/* 예전 사이드바 잔재가 남아 있어도 보이지 않게 */
.side_menu_layer { display: none !important; }

/* 예전 메뉴의 햄버거(menuOpen() -> .side_menu_layer)도 같이 남아 있었다.
   화면마다 템플릿에 박혀 있어(사용자 화면 40개) 새 햄버거와 나란히 겹쳐 보였다.
   여는 대상(.side_menu_layer)이 없어 눌러도 아무 일이 없는 죽은 버튼이다.
   이 파일은 layout-open.html 에서만 불러오므로 관리자 화면은 그대로 둔다. */
.open_menu_btn { display: none !important; }

/* 경제 대시보드(.body-djs)는 본문이 화면을 꽉 채우는 구성이라 밀지 않는다.
   그 화면에서는 메뉴가 덮는 방식으로 열린다. */
body:not(.body-djs) .layer { padding-left: 242px !important; }
body.side-collapsed:not(.body-djs) .layer { padding-left: 32px !important; }

.side-menu {
  transform: none;
  transition: transform .25s ease;
  z-index: 1000;
}
body.side-collapsed .side-menu { transform: translateX(-100%); }

/* 햄버거는 접혀 있을 때만 보인다.
   .layer 가 flex 라서 흐름에 남겨 두면 본문을 밀어내므로 띄워서 뺀다. */
/* 경제 대시보드 토글 버튼(.toggle-btn)과 같은 값 */
.topnav-ham {
  display: none;
  position: fixed;
  top: 5px;
  left: 5px;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: #fff;
  color: #222;
  cursor: pointer;
  z-index: 1001;
}
.topnav-ham i { line-height: 0; }
body.side-collapsed .topnav-ham { display: flex; align-items: center; justify-content: center; }

/* 경제 대시보드는 자체 토글 메뉴 안에 열기 버튼(.side-open)이 있다 */
body.body-djs .topnav-ham { display: none !important; }

/* 1024px 아래는 모바일 헤더(.m_hd)가 뜨고 그 안에 메뉴 버튼이 따로 있다.
   떠 있는 햄버거까지 두면 둘이 겹치고, 헤더 왼쪽 로고를 가린다.
   이 폭에서는 헤더 버튼만 쓴다 (common.js menuOpenM 이 새 사이드바를 연다). */
@media (max-width: 1024px) {
  body.side-collapsed .topnav-ham { display: none !important; }
}

/* 메뉴가 기본으로 숨겨지는 폭(sideMenu.js 의 NARROW = 1680)에서는
   열 때 본문을 밀지 않고 위를 덮는다. forecast(SPA) 사이드바와 같은 방식이다.
   밀어 두면 남는 폭이 그만큼 줄어 카드가 찌그러지고, 애초에 좁아서 접어 둔
   메뉴가 다시 본문을 잡아먹는 셈이 된다. */
@media (max-width: 1679px) {
  body:not(.body-djs) .layer,
  body.side-collapsed:not(.body-djs) .layer { padding-left: 0 !important; }

  /* 덮을 때는 뒤를 어둡게 — 어디를 눌러야 닫히는지 보이게 */
  .side-menu-overlay.open { display: block; }
}

/* 본문을 밀지 않고 덮는 화면에서만 뒤를 어둡게 한다 */
.side-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 999;
}
body.body-djs .side-menu-overlay.open { display: block; }

/* 상황판 CSS 에는 전역 border-box 가 없다.
   .side-menu 는 height:100% + padding-top:40px 이라 content-box 로 계산되면
   화면보다 40px 길어져 맨 아래(최근 업데이트)가 잘린다. */
.side-menu, .side-menu * { box-sizing: border-box; }

/* =============================================================
   SPA 와 맞추기 위한 보정

   side-menu.css 는 headerSideMenu.scss 만 컴파일한 것이라,
   SPA 가 다른 파일에서 얹는 스타일과 상황판 전역 button 스타일 탓에
   같은 마크업이라도 다르게 보이는 부분이 있다. 그만 되돌린다.
   ============================================================= */

/* 로그인 - SPA 는 loginLayer.scss 에서 파란 버튼으로 만든다 */
.side-menu .login-btn-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5061e1;
  color: #fff;
  border: none;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.side-menu .login-btn-trigger:hover {
  background: #fff;
  color: #5061e1;
  outline: 1px solid #5061e1;
}

/* 닫기 - 상황판 전역 button 테두리가 동그라미를 그려 버린다 */
.side-menu .side-logo .close-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* 도구 버튼도 같은 이유로 글꼴을 물려받게 둔다 */
.side-menu .side-tool-btn { font-family: inherit; cursor: pointer; }

/* 하단 3버튼 - 전역에서 굵기가 500 으로 올라온다 */
.side-menu .popup-btn-item { font-weight: 400; line-height: normal; }

/* 상황판 전역값이 사이드바 안까지 넘어와 SPA 와 어긋나는 것들 */

/* 본문 기본 글꼴(15px/500, line-height 15px)이 물려 내려온다 */
.side-menu { font-size: 13px; font-weight: 400; line-height: normal; }

/* style.css 의 .logo 가 위아래 여백(40px/8px)을 얹어 로고 줄이 83px 로 부푼다 */
.side-menu .side-logo .logo { display: block; margin: 0; padding: 0; }

/* SPA 는 .menu-item 에 2px 테두리가 있어 안쪽 폭이 207px 이다.
   reset.css 가 이걸 지워서 gjf 만 211px 이 됐다. */
.side-menu .menu-list .menu-item { border: 2px solid transparent; }

/* SPA 는 chartHamburger.scss 의 전역 .menu-item 규칙이 여기까지 닿아
   글꼴이 12px/500 으로 내려간다. 실제 글자는 저마다 크기를 정하므로
   보이는 차이는 없지만, 값까지 맞춰 둔다. */
.side-menu .menu-list .menu-item { font-size: 12px; font-weight: 500; }

/* 로고 - 심볼은 브랜드 색을 지켜야 해서 filter 로 뒤집지 않고 파일을 갈아 끼운다.
   (라이트 : 검은 글자 / 다크 : 흰 글자, 심볼 색은 둘 다 그대로) */
.side-menu .side-logo .logo-dark { display: none; }


/* =============================================================
   접혀 있을 때 햄버거는 '자기 줄'을 갖는다 (운영 화면과 같은 방식)

   지금까지는 본문 위에 띄워 두고 왼쪽에 32px 홈만 냈다. 그러다 보니
   좌상단에 오는 것(제목, 로고, 구 메뉴 버튼)과 계속 겹쳤다.
   본문을 햄버거 줄만큼 내려 아예 겹칠 일을 없앤다.

   1024px 아래는 모바일 헤더(.m_hd)가 그 역할을 하고 햄버거도 숨기므로 제외한다.
   경제 대시보드(.body-djs)는 자체 토글을 쓰므로 제외한다.
   ============================================================= */
@media (min-width: 1025px) {
  /* 본문 왼쪽 끝선(16px)에 맞춰 그 줄에 놓는다 */
  body.side-collapsed .topnav-ham {
    top: 8px;
    left: 16px;
    width: 26px;
    height: 26px;
  }
}



/*1920 해상도에서 스크롤 발생 안되로고 수정요청 (UIX-09-027)
상단의 기존 1679이하 해상도에서 사이드바가 덮는규칙은 유지
*/

/* 1680px 이상은 본문이 햄버거 오른쪽(48px)에서 시작해 위로 내릴 필요가 없다.
   1679px 이하는 본문이 햄버거 아래로 오므로 햄버거 아래끝(34) + 12px = 46px 에서 시작하게 맞춘다.
   .content 자체 위 여백이 1421px 이상 16px, 그 아래 32px 이라 구간별로 보탤 값이 다르다
   (한 값으로 묶으면 1420px 이하만 간격이 28px 로 벌어진다). */
@media (min-width: 1421px) and (max-width: 1679px) {
  body.side-collapsed:not(.body-djs) .layer { padding-top: 30px !important; }
}

@media (min-width: 1025px) and (max-width: 1420px) {
  body.side-collapsed:not(.body-djs) .layer { padding-top: 14px !important; }
}