/* css styles */

@import url("https://hangeul.pstatic.net/hangeul_static/css/nanum-barun-gothic.css");
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap");

@font-face {
  font-family: "D2Coding";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "NanumBarunGothic", "Nanum Gothic", sans-serif;
}

/* 블로그 목록 아이템 내 카테고리(태그) 스타일 */
.listing-item .categories a,
.quarto-listing-category a {
  /* 목록 페이지의 각 게시물에 표시되는 카테고리 */
  display: inline-block;
  padding: 0.2em 0.6em;
  margin: 0.2em 0.3em 0.2em 0;
  background-color: #e9ecef; /* 연한 회색 배경 */
  color: #495057; /* 약간 어두운 텍스트 색상 */
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85em;
}

.listing-item .categories a::before,
.quarto-listing-category a::before {
  content: "#";
  margin-right: 0.2em;
}

/* 개별 게시물 페이지의 메타데이터 내 카테고리(태그) 스타일 */
.article-meta .article-categories a, /* 테마에 따라 이 선택자는 다를 수 있습니다 */
.quarto-title-meta .quarto-category a {
  /* 제목 메타데이터 블록의 카테고리 */
  display: inline-block;
  padding: 0.2em 0.6em;
  margin: 0.2em 0.3em 0.2em 0;
  background-color: #e9ecef;
  color: #495057;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85em;
}

.article-meta .article-categories a::before,
.quarto-title-meta .quarto-category a::before {
  content: "#";
  margin-right: 0.2em;
}

/* (선택 사항) 태그에 마우스 호버 시 효과 */
.listing-item .categories a:hover,
.quarto-listing-category a:hover,
.article-meta .article-categories a:hover,
.quarto-title-meta .quarto-category a:hover {
  background-color: #ced4da; /* 약간 더 진한 회색 배경 */
}

/* 카테고리 필터 목록 스타일 (선택 사항) */
.quarto-categories .category a {
  display: inline-block;
  padding: 0.2em 0.6em;
  margin: 0.2em 0.3em 0.2em 0;
  background-color: #f8f9fa;
  color: #0d6efd;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
}

.quarto-categories .category a::before {
  content: "#";
  margin-right: 0.2em;
}

.quarto-categories .category a:hover {
  background-color: #e9ecef;
}

/* 타이틀 블록 배너의 세로 높이 줄이기 */
.quarto-title-block.banner {
  padding-top: 4rem; /* 기본값보다 작게 조절 (예: 4rem -> 2rem) */
  padding-bottom: 0rem; /* 기본값보다 작게 조절 (예: 4rem -> 2rem) */
}

/* 필요한 경우 제목, 부제목 등의 마진이나 폰트 크기 조절 */
.quarto-title-block.banner .title {
  margin-bottom: 0.5rem; /* 제목 아래 마진 조절 */
  /* font-size: 2.5rem; */ /* 제목 폰트 크기 조절 */
}

.quarto-title-block.banner .subtitle {
  margin-top: 0rem; /* 부제목 위 마진 조절 */
  margin-bottom: 1rem; /* 부제목 아래 마진 조절 */
  /* font-size: 1.25rem; */ /* 부제목 폰트 크기 조절 */
}

.quarto-title-block.banner .quarto-title-meta {
  margin-top: 1rem; /* 메타 정보 위 마진 조절 */
}

/* 코드 블록에 D2Coding 폰트 적용 */
pre,
code {
  font-family: "D2Coding", monospace;
}

/* index.qmd의 포스트 목록에서 읽기 시간 스타일 수정 */
.quarto-listing-default .quarto-post .metadata a .listing-reading-time::before {
  content: "📖: "; /* 책 아이콘과 변경된 문구 */
  font-style: normal;
  color: var(
    --quarto-text-color
  ) !important; /* 배경이 있으므로 조금 더 진한 색상 */
  margin-right: 0.2em; /* 아이콘과 시간 사이 간격 약간 줄임 */
  text-decoration: none !important;
  font-family: "NanumBarunGothic", "Nanum Gothic", sans-serif !important;
  vertical-align: middle; /* 아이콘과 텍스트 수직 정렬 */
}

.quarto-listing-default .quarto-post .metadata a .listing-reading-time {
  font-style: italic; /* 시간 부분은 이탤릭 유지 */
  color: var(
    --quarto-text-color
  ) !important; /* 배경이 있으므로 조금 더 진한 색상 */
  font-family: "NanumBarunGothic", "Nanum Gothic", sans-serif !important;
  text-decoration: none !important;
  background-color: var(--quarto-light); /* 테마의 연한 배경색 */
  font-size: 0.85em; /* 다른 메타 정보보다 약간 작게 */
  display: inline-block; /* 패딩, 배경 등 적용 */
  line-height: 1.2; /* 줄 높이 조정으로 아이콘과 정렬 개선 */
  vertical-align: middle; /* 아이콘과 텍스트 수직 정렬 */
}

.profile-readme {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.profile-readme table {
  width: 100% !important;
  display: block;
  overflow-x: auto;
}

.profile-readme img {
  max-width: 100%;
  height: auto;
}

.profile-summary__grid {
  gap: 1.5rem;
  align-items: center;
}

.profile-summary__content ul {
  padding-left: 1.2rem;
}

.profile-summary__cta {
  margin-top: 1rem;
}

.profile-summary__media {
  text-align: center;
}

.profile-summary__media img {
  max-width: 220px;
  height: auto;
}

.profile-summary__media-link {
  margin-top: 0.75rem;
}

.profile-readme div,
.profile-readme p {
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .profile-readme {
    padding: 0.75rem;
  }

  .profile-summary__media img {
    max-width: 180px;
  }
}

/* callout + syntax colors tuned for Tokyo Night style */
body.quarto-dark {
  --callout-note-border: #565f89;
  --callout-note-bg: rgba(56, 62, 90, 0.35);
  /* --callout-note-color: #c0caf5; */
}

.sourceCode .ex {
  color: #475569;
}

body.quarto-dark .sourceCode .ex {
  color: #7aa2f7;
}

.sourceCode .fu {
  color: #1d4ed8;
}

body.quarto-dark .sourceCode .fu {
  color: #9f76eb;
}

.sourceCode .st {
  color: #b45309;
}

body.quarto-dark .sourceCode .st {
  color: #9ece6a;
}

.sourceCode .at {
  color: #925dee;
}

body.quarto-dark .sourceCode .at {
  color: #fe91a5;
}