@font-face {
  font-family: "HakgyoansimWooju";
  src: url("/fonts/HakgyoansimWoojuR.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Do Hyeon";
  src: url("/fonts/DoHyeon-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "TTHakgyoansimJeomsimsiganB";
  src: url("/fonts/HakgyoansimJeomsimsiganB.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --md-primary-fg-color: #0c78e4; /* 네비게이션 바 색상 */
  --md-accent-fg-color: #04d593; /* 버튼 및 링크 강조 색상 */
  --md-text-font: "Do Hyeon", sans-serif; /* 본문 폰트 변경 */
  --md-code-font: "Fira Code"; /* 코드 폰트 변경 */
}

.md-header {
  background-color: #000000 !important; /* 헤더 배경색 변경 */
}

.md-header__title {
  display: none !important; /* 제목 숨기기 */
}

.md-nav {
  font-size: 18px;
}
/* 네비게이션 메뉴 제목 숨기기 */
.md-nav__title {
  display: none !important;
}

/* 모바일에서 로고 보이게 */
@media (max-width: 76.234375em) {
  .md-header__button.md-logo {
    display: block;
    position: absolute !important;
    right: 2rem !important;
  }
}

article {
  border: 1px solid gray; /* 회색 테두리, 두께 2px */
  border-radius: 20px; /* 둥근 테두리 (모서리 반경 10px) */
  padding: 25px; /* 내부 여백 (테두리와 내용 사이의 공간) */
}

/* 본문 폰트 크기 조절 */
.md-content {
  font-size: 20px; /* 원하는 크기로 조절 (기본은 16px) */
  line-height: 1; /* 줄 간격 조절 */
}

/* 테이블 전체 스타일 */
.md-typeset table {
  border: 1px !important;
  border-collapse: collapse; /* 테두리 분리 */
  border-spacing: 0; /* 기본 간격 제거 */
  overflow: hidden; /* 둥근 모서리 효과 유지 */
  width: 100%; /* 너비 100% */
  font-size: 18px !important;
}

/* 테이블 헤더 스타일 */
.md-typeset table thead {
  background-color: black; /* 검은 배경 */
  color: white; /* 흰색 글씨 */
}

/* 개별 셀 스타일 */
.md-typeset table th,
.md-typeset table td {
  border: 1px solid black; /* 회색 1px 테두리 */
  padding: 5px; /* 셀 내부 여백 */
  text-align: center !important; /* 기본 왼쪽 정렬 */
  vertical-align: middle !important;
}

/* 헤더(제목) 셀 상하 여백 줄이기 */
.md-typeset table th {
  font-size: 16px !important;
  padding: 3px 10px !important; /* 위아래 여백을 3px로 줄임 */
}

h1 {
  font-family: "Do Hyeon", serif;
  background-color: black !important; /* 검은 배경 */
  color: white !important; /* 붉은 글씨 */
  padding: 5px 10px; /* 여백을 적당히 설정 (위/아래 5px, 좌/우 10px) */
  border-radius: 20px; /* 둥근 테두리 (선택 사항) */
  text-align: center; /* 가운데 정렬 (선택 사항) */
  font-size: 60px !important;
  margin: 0px 0px 40px !important;
  letter-spacing: 0.1em !important;
}

h2 {
  font-size: 30px !important;
}
h3 {
  font-size: 28px !important;
}

.md-typeset h2,
.md-typeset h3 {
  font-family: "Do Hyeon", serif;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

p {
  margin-top: 0em !important;
  margin-bottom: 1em !important;
  line-height: 1.5em;
  font-family: "TTHakgyoansimJeomsimsiganB";
  font-size: 20px; /* 원하는 크기로 조절 (기본은 16px) */
  letter-spacing: 1px !important;
}
blockquote {
  padding-left: 0px !important;
  margin-left: 0px !important;
}

/* 목록 (ul, ol) 항목 크기 조절 */
.md-typeset ul,
.md-typeset ol {
  font-family: "TTHakgyoansimJeomsimsiganB";
  font-size: 20px;
  margin: 3px 3px;
  line-height: 1.4em;
  letter-spacing: 1px !important;
}

.md-typeset ul {
  list-style-type: disc !important;
}

.md-typeset ul ul {
  list-style-type: circle !important;
}

.md-typeset hr {
  margin-top: 2px !important;
  margin-bottom: 10px !important;
}

img {
  margin: auto;
  display: block;
  padding-left: 0px;
  max-width: 100%; /* 부모 요소 크기에 맞게 이미지 크기 조정 */
  height: auto; /* 비율에 맞춰 높이 자동 조정 */
}

h2.collapsible {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between; /* 왼쪽: 제목, 오른쪽: 아이콘 */
  align-items: center;
  padding-right: 10px; /* 오른쪽 여백 추가 */
}

h2.collapsible::after {
  content: "➖"; /* 기본적으로 펼침 */
  font-size: 0.5em;
  margin-left: auto; /* 자동 정렬 (오른쪽으로 이동) */
}

h2.collapsible:not(.open)::after {
  content: "➕"; /* 접힘 상태 */
}

.collapsible-content {
  display: block; /* 기본적으로 펼쳐진 상태 */
  padding-left: 10px;
}

.collapsible-content:not(.open) {
  display: none; /* 접힌 상태 */
}

.footnote {
  padding: 5px;
  border: 1px solid #ccc; /* 테두리 추가 */
  background-color: #f8f8f8; /* 배경색 추가 */
  border-radius: 4px; /* 둥근 테두리 */
  margin-top: 50px !important; /* 위쪽 여백 */
}

/* 각주 리스트 스타일 */
ol.footnotes {
  margin-left: 20px;
}

.footnote-item {
  margin-bottom: 5px;
}

.footnote hr {
  display: none !important; /* 구분선 숨기기 */
}

.footnote p {
  font-size: 14px !important;
  font-family: "Fira Code";
}
.footnote ol,
.footnote ul {
  padding-left: 30px;
  font-size: 14px !important;
  font-family: "Fira Code";
}

/* 각주 내 돌아가기 링크 (footnote-backref) */
.md-typeset .footnote-backref {
  display: inline-block; /* 블록 요소처럼 동작 */
  vertical-align: middle; /* 줄 정렬을 맞춤 */
  font-size: 0px; /* 크기 조정 */
  margin-left: 5px; /* 각주 번호와 간격 추가 */
  text-decoration: none; /* 밑줄 제거 */
  line-height: 1.5; /* 줄 간격 조정 */
  white-space: nowrap; /* 줄바꿈 방지 */
  font-family: "Fira Code"; /* 코드 스타일 폰트 */
}