/* 테마 변수 정의 */
:root {
  /* 기본 설정 */
  --base-font-size: 20px;
  --primary-color: #41ADF4;
  --secondary-color: #8ab4f8;
  
  /* 텍스트 색상 */
  --text-dark: #333;
  --text-light: rgba(255, 255, 255, 0.87);
  
  /* 레이아웃 */
  --sidebar-margin: 100px;
  --content-padding: 20px;
  --min-width: 1700px;
  
  /* 헤딩 크기 */
  --h1-size: 1.4rem;
  --h2-size: 1.25rem;
  --h3-size: 1.15rem;
  --h4-size: 1.05rem;
  --h5-size: 1.02rem;
  --h6-size: 0.9rem;
  
  /* 박스 스타일 */
  --box-padding: 1rem;
  --box-radius: 5px;
  --box-margin: 1rem 0;
  
  /* 하이라이트 */
  --highlight-orange: #ff7f00;
  --highlight-size: 45px;
}

/* 기본 설정 */
html {
  font-size: var(--base-font-size);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.md-content table {
  width: 100%; /* 부모 요소 너비에 맞게 조정 */
  table-layout: fixed; /* 열 너비를 균등하게 배분 */
  border-collapse: collapse; /* 테두리 겹침 방지 */
  overflow-wrap: break-word; /* 긴 텍스트 줄바꿈 */
}

.md-content th, .md-content td {
  padding: 8px; /* 셀 간격 */
  text-align: left; /* 텍스트 정렬 */
  border: 1px solid #ddd; /* 셀 경계선 */
  word-break: break-word; /* 긴 단어 줄바꿈 */
  overflow-wrap: break-word; /* 텍스트 강제 줄바꿈 */
}

.md-content table img {
  max-width: 100%; /* 이미지가 셀을 넘지 않도록 설정 */
  height: auto; /* 이미지 비율 유지 */
}

.md-content {
  overflow: hidden; /* 콘텐츠가 넘어가지 않도록 설정 */
}

table pre {
 white-space: pre-wrap; /* 줄바꿈 허용 */
 max-width: 100%; /* 셀 너비를 초과하지 않도록 제한 */
 padding: 3px; /* 내부 여백 추가 */
}

th, td {
  padding: 8px; /* 셀 간격 */
  text-align: left; /* 텍스트 정렬 */
  border: 1px solid #ddd; /* 셀 경계선 */
  word-break: break-all; /* 긴 단어 줄바꿈 */
}



/* 레이아웃 컴포넌트 */
.md-main {
  min-width: var(--min-width);
}

.md-main__inner {
  margin-left: var(--sidebar-margin);
  margin-right: 0;
  max-width: calc(100% - 240px);
  padding: var(--content-padding);
}

.md-content {
  margin-left: var(--sidebar-margin);
  margin-right: 130px;
}

/* 타이포그래피 */
.md-typeset {
  /* 헤딩 공통 스타일 */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: var(--text-dark);
  }
  
  /* 개별 헤딩 크기 */
  h1 { font-size: var(--h1-size); }
  h2 { font-size: var(--h2-size); }
  h3 { font-size: var(--h3-size); }
  h4 { font-size: var(--h4-size); }
  h5 { font-size: var(--h5-size); }
  h6 { font-size: var(--h6-size); }
}

/* Note 박스 스타일 */
.gray-box {
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}

.gray-box strong {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.gray-box p {
  margin: 0;
}

.yellow-box {
  border: 1px solid #f5c16c;
  background-color: #fff7e6;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 14px;
}

.yellow-box strong {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #d35400; /* 텍스트 색상 */
}

/* 하이라이트 효과 */
.highlight-orange {
  color: var(--highlight-orange);
  font-weight: bold;
  font-size: var(--highlight-size);
}

/* 코드 블록의 Copy 버튼 스타일 */
pre {
  position: relative; /* Copy 버튼 위치를 위한 설정 */
  background-color: #f8f8f8; /* 밝은 배경색 */
  border: 1px solid #f8f8f8; /* 테두리 색상: 배경색과 동일 */
  border-radius: 5px; /* 둥근 모서리 */
  padding: 10px; /* 코드 블록 내부 여백 */
  font-family: 'Nanum Gothic Coding', 'D2Coding', monospace; /* 코드 폰트 */
  font-size: 15px; /* 크기 조정 */
  line-height: 1.5; /* 줄 간격 조정 */
  overflow: auto; /* 스크롤 추가 */
  color: #333; /* 텍스트 색상 */
}

[data-md-color-scheme="slate"] pre {
  background-color: #2e2e2e; /* 어두운 배경색 */
  border: 1px solid #2e2e2e; /* 테두리 색상: 배경색과 동일 */
  color: #f5f5f5; /* 밝은 텍스트 색상 */
}

/* Copy 버튼 스타일 */
.copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #41ADF4; /* 버튼 배경색 */
  color: white; /* 버튼 텍스트 색상 */
  border: none; /* 버튼 테두리 없음 */
  border-radius: 5px; /* 둥근 모서리 */
  font-size: 12px;
  cursor: pointer;
  z-index: 1;
  opacity: 0.9;
  transition: opacity 0.3s;
}

/* 다크 모드 */
[data-md-color-scheme="slate"] {
  /* 다크 모드 변수 재정의 */
  --md-typeset-color: var(--text-light);
  --md-default-fg-color: var(--text-light);
  --md-typeset-a-color: var(--secondary-color);
  
  /* 다크 모드 텍스트 스타일 */
  .md-typeset { 
    color: var(--md-typeset-color); 
  }
  
  .md-nav__link { 
    color: var(--md-typeset-color); 
  }
  
  /* 다크 모드 헤더 */
  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset h4,
  .md-typeset h5,
  .md-typeset h6 {
    color: white;
  }
  
  /* 다크 모드 박스 스타일 */
  .gray-box {
    background-color: #333;
    border-color: #555;
    color: var(--text-light);
  }
  
  .yellow-box {
    background-color: #4a3d1e;
    border-color: #d4a437;
    color: #f9d976;
  }
  
  pre {
    background-color: #2e2e2e;
    border-color: #2e2e2e;
    color: #f5f5f5;
  }
}

/* 좌측 메뉴 위치를 조정 */
.md-nav--primary {
  margin-left: 0px; /* 왼쪽으로 10px 이동 */
}

.md-sidebar--primary {
  padding-left: 0; /* 내부 여백 제거 */
  margin-left: -80px; /* 전체를 왼쪽으로 이동 */
}

/* 반응형 디자인 */
@media screen and (max-width: 76.234em) {
  /* 메인 레이아웃 조정 */
  .md-main {
    min-width: auto; /* min-width 제거 */
  }
  
  .md-main__inner {
    margin: 0;
    max-width: 100%;
    padding: 0;
  }
  
  .md-content {
    margin: 0;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .md-nav--primary .md-nav__title {
    background-color: #4051B5;
    color: #ffffff;
  }

  /* 사이드바 메뉴 위치 초기화 */
  .md-sidebar--primary {
    margin-left: 0; /* 기존의 -80px 제거 */
    padding-left: 0;
    position: fixed;
    width: 12.1rem;
    z-index: 100;
  }

  .md-nav--primary {
    margin-left: 0;
    width: 100%;
  }

  /* 사이드바가 열렸을 때 전체 너비로 표시 */
  [data-md-toggle="drawer"]:checked ~ .md-sidebar--primary {
    transform: translateX(0);
    width: 100%;
    max-width: 20rem;
  }

  /* 컨텐츠 영역 조정 */
  .md-typeset {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0 8px;
    box-sizing: border-box;
    
    /* 모든 요소들이 컨테이너 내에 머물도록 설정 */
    * {
      max-width: 100%;
      box-sizing: border-box;
    }
    
    pre, code {
      max-width: 100%;
      white-space: pre-wrap;
      word-break: break-all;
    }
    
    table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
    }
  }
}


/* 더 작은 화면에서의 추가 조정 */
@media screen and (max-width: 600px) {
  .md-content {
    padding: 8px;
  }
  
  .md-typeset {
    font-size: 0.9rem;
  }
}

/* 네비게이션 타이틀 스타일링 */
.md-nav__title {
  color: var(--primary-color);
  background-color: var(--primary-color);
  color: #646365;
  padding: 8px;
  border-radius: 4px;
}

.md-nav__icon::after {
  color: var(--primary-color);
}


/* Konan LLM v2 텍스트만 굵게 처리 */
.md-nav__link .md-ellipsis:only-child {
  font-weight: normal; /* 기본 네비게이션 링크는 normal로 설정 */
}

.md-nav__link[for="__nav_1"] .md-ellipsis {
  font-weight: bold; /* Konan LLM v2 텍스트만 bold로 설정 */
}