/* =========================================================
   EngMap 커스텀 스타일
   - 전체 글씨 크기 축소
   - 사이드바 접기 (지도를 넓게 보기)
   ========================================================= */

/* ---------- 1. 글씨 크기 ----------
   rem 기반 값(본문, 제목, 카드 타이틀 등)이 함께 줄어듭니다.
   더 작게/크게 하려면 아래 87.5% 값만 조절하세요. (100% = 16px) */
html {
  font-size: 87.5%; /* 16px -> 14px */
}

/* px로 고정돼 있어 위 설정에 반응하지 않는 항목들 */
.sidebar .nav p {
  font-size: 13px;
}
.sidebar .logo a.simple-text {
  font-size: 16px;
}
.navbar .navbar-brand {
  font-size: 15px;
}
.footer {
  font-size: 13px;
}

/* ---------- 2. 사이드바 접기 ----------
   접으면 사라지지 않고 아이콘만 남는 좁은 띠가 됩니다. */
:root {
  --sidebar-w: 260px;
  --sidebar-mini-w: 68px;
}

/* 토글 버튼 — 사이드바 로고 줄 왼쪽에 둡니다 */
.sidebar .logo {
  display: flex;
  align-items: center;
}
.sidebar-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 4px 8px;
  margin-right: 4px;
  line-height: 1;
  opacity: 0.7;
}
.sidebar-toggle:hover {
  opacity: 1;
}
.sidebar-toggle .material-icons {
  font-size: 24px;
  vertical-align: middle;
}
.sidebar .logo .logo-normal {
  white-space: nowrap;
  overflow: hidden;
}

/* 데스크톱에서만 동작. 좁은 화면은 부트스트랩 기본 동작을 그대로 둡니다.
   .main-panel 은 width 가 calc(100% - 260px) 로 고정돼 있어 min-width 로 덮습니다. */
@media (min-width: 992px) {
  .sidebar,
  .main-panel {
    transition: width 0.3s ease, min-width 0.3s ease;
  }

  body.sidebar-collapsed .sidebar {
    width: var(--sidebar-mini-w);
    overflow: hidden;
  }

  /* 안쪽 래퍼도 같이 줄여야 합니다. 폭이 260px 로 고정돼 있어
     그대로 두면 메뉴 아이콘이 띠 밖으로 밀려 잘립니다. */
  body.sidebar-collapsed .sidebar .sidebar-wrapper {
    width: var(--sidebar-mini-w);
  }

  body.sidebar-collapsed .main-panel {
    min-width: calc(100% - var(--sidebar-mini-w));
  }

  /* 접힌 상태에서는 글자를 감추고 아이콘만 남깁니다 */
  body.sidebar-collapsed .sidebar .logo .logo-normal,
  body.sidebar-collapsed .sidebar .nav p {
    display: none;
  }

  /* 메뉴 아이콘을 띠 가운데로 */
  body.sidebar-collapsed .sidebar .nav li > a {
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
  body.sidebar-collapsed .sidebar .nav li > a i,
  body.sidebar-collapsed .sidebar .nav li > a .material-icons {
    float: none;
    margin: 0 auto;
  }

  /* 배경 이미지가 좁은 띠에서 늘어나 보이지 않도록 */
  body.sidebar-collapsed .sidebar:after,
  body.sidebar-collapsed .sidebar:before {
    width: var(--sidebar-mini-w);
  }
}

/* 접힌 상태에서 아이콘에 마우스를 올리면 띄우는 메뉴명.
   사이드바 안쪽 래퍼는 perfect-scrollbar 가 overflow 를 잡고 있어
   ::after 로 띄우면 잘립니다. 그래서 body 에 붙는 고정 요소로 만듭니다. */
.sidebar-tip {
  display: none;
  position: fixed;
  z-index: 1100;
  background: rgba(33, 33, 33, 0.88);
  color: #fff;
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
.sidebar-tip.show {
  display: block;
}