/* 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;
}

/* 오른쪽 ToC 텍스트가 짤리지 않도록 설정 */
.md-nav__link {
  white-space: normal !important;  /* 텍스트 줄바꿈 허용 */
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word;
}

/* nav 1단계 하위 항목 들여쓰기 조정 */
/*
.md-nav__item .md-nav__item {
  padding-left: 16px !important;  
}
*/

/* nav 2단계 하위 항목 들여쓰기 조정 */
/*
.md-nav__item .md-nav__item .md-nav__item {
  padding-left: 32px !important;  
}
*/

/* 테이블 크기 고정 */
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* 테이블 셀 하나에 두 개 제목 */
.diagonal-cell {
  position: relative;
  width: 150px;
  height: 60px;
}
.diagonal-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.diagonal-cell::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

.diagonal-cell .top-right {
  position: absolute;
  top: 2px;
  right: 5px;
  white-space: nowrap;
}

.diagonal-cell .bottom-left {
  position: absolute;
  bottom: 2px;
  left: 5px;
  white-space: nowrap;
}