/* 1.전체 설정 */

/* 1-1 본문 폭 */
.md-grid {
  max-width: 90%;
}

/* 1-2 폰트 사이즈 */
html{
font-size: 1.25rem;
}

/* 1-3 사이트 컬러 팔레트 */
:root {
  --md-primary-fg-color: #004182;
  --md-accent-fg-color: #00ABE4;
}

/* 1-4 Read the Docs 플라이아웃 메뉴 숨김 */
readthedocs-flyout { display: none; }

/* 2.헤더 설정 */

/* 2-1 헤더의 문서 제목 영역 위치 세밀 조정 */
.md-header__title .md-header__ellipsis .md-header__topic {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

/* 2-2 버전 전환 버튼 영역 위치 세밀 조정 */
.md-header__option {
  margin: auto;
}

/* 2-3 버전 전환 버튼 글씨 폰트 크기 */
.md-header__button.version-button {
  font-size: 18px;
}

/* 2-4 헤더의 버튼 하위 메뉴 가운데 정렬 */
[dir=ltr] .md-select__link {
  padding-left: .6rem;
  padding-right: .6rem;
}

/* 2-5 검색창 검색 결과 줄 수 조정 */
.md-search-result .md-typeset {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  }

/* 3.푸터 설정 */

/* 3-1 푸터 영역 색 설정 */
.md-footer {
  color: #6C6E70;
  background-color: transparent;
}

/* 3-2 카피라이트 문구 색 설정*/
.md-copyright__highlight {
  color: #6C6E70;
}

/* 3-3 소셜 링크 아이콘 채움색 설정 */
.md-social > a > svg > path {
  fill:#6C6E70
}

/* 3-4 푸터 영역 구분선 설정 */
.footer-separation {
  height: 0.05rem;
  background: #6C6E70;
  max-width: 90%;
}

/* 4.오른쪽 하단 매뉴얼 리스트 확장 버튼 */

/* 4-1 매뉴얼 리스트 버튼 설정 */
.floating-menu-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: #EE682A;
  color: #F0F0F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  margin: 2px;
}

/* 4-2 메뉴 닫힘 스타일 */
.side-menu {
  position: fixed;
  right: 20px;
  bottom: 80px; /* 버튼 바로 위 */
  width: 250px;
  max-height: 0;
  overflow: hidden;
  background-color: white;
  transition: max-height 0.4s ease;
  z-index: 1001;
}

/* 4-3 메뉴 열림 스타일 */
.side-menu.open {
  max-height: 60vh; /* 메뉴의 최대 높이 */
  width: fit-content;
  border: 1px solid white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow-y: auto;
}

/* 4-4 메뉴 컨테이너 스타일 */
.menu-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

/* 4-5 매뉴얼 리스트 카테고리 스타일 */
.menu-content h4 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 10px 0 5px;
  border-bottom: 1px solid #6C6E70;
  padding-bottom: 5px;
}

.menu-content ul h5 {
  font-size: 14px;
  font-weight: normal;
  color: #6C6E70;
  margin: 10px 0 5px;
}

/* 4-6 메뉴얼 리스트 스타일 */
.menu-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

/* 4-7 리스트 항목 스타일 */
.menu-content ul li {
  margin-bottom: 5px;
}

/* 4-8 링크 항목 스타일 */
.menu-content ul li a {
  text-decoration: none;
  color: #004182;
  font-size: 14px;
  display: block;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 4-9 링크에 마우스를 올렸을 때 스타일 */
.menu-content ul li a:hover {
  background-color: #F0F0F0;
  color: #00ABE4;
}