/* --- [새로 만든] 커스텀 메뉴 스타일 --- */

/* 1. 기본적으로 메뉴를 보여줍니다 (Flex 설정) */
.my-custom-menu {
  display: flex;
  align-items: center;
  gap: 20px;          /* 메뉴 간격 */
  margin-right: 15px; /* 검색창과의 거리 */
}

/* 2. 메뉴 링크 디자인 */
.my-nav-link {
  color: #666 !important;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap; /* 줄바꿈 방지 */
  transition: color 0.2s;
}

/* 활성화/호버 디자인 */
.my-nav-link:hover,
.my-nav-link.active {
  color: #000 !important;
  font-weight: bold;
}

/* 3. [중요] 모바일/태블릿(화면 폭 960px 이하)에서는 메뉴 숨기기 */
/* 좁은 화면에서는 햄버거 메뉴를 써야 하므로 상단 메뉴는 숨깁니다 */
@media screen and (max-width: 60em) {
  .my-custom-menu {
    display: none !important;
  }
}

/* 4. PC 화면에서 왼쪽 사이드바 숨기기 */
@media screen and (min-width: 60em) {
  .md-sidebar--primary {
    display: none;
  }
}

.md-header__title {
  font-family: "Roboto Mono", monospace !important;
  font-weight: bold;
}