/* ============================================================
   커스텀 반응형/인터랙션 + 사이드바 카테고리 트리
   (정적 사이트에서 동작하는 클라이언트 사이드 향상)
   ============================================================ */

/* --- 0. 폰트: Pretendard(본문) + JetBrains Mono(코드) --- */
:root {
  --bs-body-font-family: "Pretendard Variable", "Pretendard", system-ui,
    -apple-system, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --bs-font-monospace: "JetBrains Mono", "D2Coding", SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", monospace;
}
body {
  font-family: var(--bs-body-font-family);
}
code,
pre,
kbd,
samp,
.highlight,
.highlighter-rouge,
td.rouge-code {
  font-family: var(--bs-font-monospace);
}

/* --- 1. 읽기 진행바 (포스트 페이지) --- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2000;
  background: transparent;
  pointer-events: none;
}
.reading-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--link-color, #1f8fff);
  transition: width 0.1s linear;
}

/* --- 2. 스크롤 등장 애니메이션 (.js-reveal 있을 때만 숨김) --- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.reveal {
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* --- 3. 홈 글 목록: 세로 카드(이미지→제목→설명) + 반응형 그리드 --- */
#post-list.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 모바일 포함 기본 2열 */
  gap: 1rem;
}
@media (min-width: 992px) {
  #post-list.post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 데스크톱 3열 */
    gap: 1.25rem;
  }
}
#post-list.post-grid .card-wrapper {
  margin-bottom: 0;
  height: 100%;
}
#post-list.post-grid .post-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#post-list.post-grid .grid-img {
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
#post-list.post-grid .grid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#post-list.post-grid .card-body {
  flex: 1 1 auto;
  padding: 1rem;
}
/* 제목·설명 줄 수 제한으로 카드 높이 균일하게 */
#post-list.post-grid .card-title {
  font-size: 1.05rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#post-list.post-grid .card-text.content p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#post-list.post-grid .read-more {
  color: var(--link-color, #1f8fff);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
/* 모바일: 카드 조금 작게(2열 유지) */
@media (max-width: 768px) {
  #post-list.post-grid {
    gap: 0.7rem;
  }
  #post-list.post-grid .card-body {
    padding: 0.7rem;
  }
  #post-list.post-grid .card-title {
    font-size: 0.92rem;
    -webkit-line-clamp: 2;
  }
  #post-list.post-grid .card-text.content {
    font-size: 0.8rem;
  }
  #post-list.post-grid .post-meta {
    font-size: 0.72rem;
  }
}

/* 카드 호버 리프트 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #post-list .card-wrapper {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  #post-list .card-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.13);
  }
}

/* 모션 최소화 선호 시 애니메이션 비활성 */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
  .reveal,
  .reading-progress > span {
    transition: none;
  }
}

/* --- 4. 사이드바 카테고리 트리 --- */
#sidebar nav {
  overflow-y: auto;
}
#sidebar .sidebar-cats {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0 1rem 0.5rem 1.5rem;
  font-size: 0.82rem;
}
/* 홈을 카테고리와 같은 스타일로 통합 */
#sidebar .menu-top {
  margin-bottom: 0.5rem;
}
#sidebar .menu-top .home-link i {
  width: 15px;
  text-align: center;
  opacity: 0.85;
}
#sidebar .cats-heading {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0.4rem 0 0.5rem;
  padding-left: 0.45rem; /* 홈/카테고리 항목(.cat-tree a)의 좌측 패딩과 동일하게 정렬 */
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
#sidebar .cat-tree,
#sidebar .cat-tree ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
#sidebar .cat-tree li {
  margin: 0.05rem 0;
}
#sidebar .cat-tree a,
#sidebar .cat-tree summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.45rem;
  border-radius: 0.4rem;
  color: #8a949e;
  text-decoration: none;
  cursor: pointer;
}
#sidebar .cat-tree a:hover,
#sidebar .cat-tree summary:hover {
  color: var(--link-color, #1f8fff);
  background: rgba(128, 128, 128, 0.12);
}
#sidebar .cat-tree summary {
  list-style: none;
}
#sidebar .cat-tree summary::-webkit-details-marker {
  display: none;
}
/* 펼침 화살표 (CSS 보더 셰브론 — 폰트 의존 없음) */
#sidebar .cat-tree summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
  margin-left: 0.35rem;
  transition: transform 0.2s ease;
}
#sidebar .cat-tree details[open] > summary::after {
  transform: rotate(45deg);
}
#sidebar .cat-tree details > ul {
  padding-left: 1.35rem;
}
#sidebar .cat-count {
  margin-left: auto;
  opacity: 0.55;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* 현재 보고 있는 카테고리/홈 강조 */
#sidebar .cat-tree a.active-cat {
  color: var(--link-color, #1f8fff);
  background: rgba(31, 143, 255, 0.13);
  font-weight: 600;
  border-radius: 0.4rem;
}

/* --- 4b. 프로필에 녹인 정보(About) --- */
/* 프로필 영역: 비대칭 패딩 보정 + 전체 가운데 정렬로 통일 */
#sidebar .profile-wrapper {
  width: 100%;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  text-align: center;
}
#sidebar .profile-wrapper #avatar {
  margin-left: auto;
  margin-right: auto;
}
/* .site-title 은 width:fit-content 라서 text-align만으론 안 가운데됨 → margin auto 로 박스 중앙 정렬 */
#sidebar .profile-wrapper .site-title {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
#sidebar .profile-wrapper .site-subtitle {
  text-align: center;
}

#sidebar .profile-bio {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0;
  text-align: center; /* 제목/태그라인과 동일하게 가운데 */
}
/* 한글 단어 중간 줄바꿈 방지 + 태그라인 고정높이로 인한 잘림 방지 */
#sidebar .site-subtitle {
  word-break: keep-all;
  height: auto;
  min-height: 2rem;
  line-height: 1.4;
}
#sidebar .profile-bio .bio-text {
  word-break: keep-all;
}
#sidebar .profile-bio .bio-text {
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.78;
  margin-bottom: 0.5rem;
}
#sidebar .profile-bio .bio-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.7rem;
  opacity: 0.6;
}
#sidebar .profile-bio .bio-stack li {
  padding: 0.08rem 0;
}

/* --- 5. 활동 잔디 (블로그 + GitHub) --- */
.grass-label {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 0.45rem;
}
.heatmap {
  overflow-x: auto;
  padding-bottom: 4px;
}
.heatmap-grid {
  display: flex;
  gap: 3px;
  width: max-content;
}
.heatmap-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.heatmap-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: rgba(128, 128, 128, 0.15);
}
.heatmap-cell.lv1 { background: #9be9a8; }
.heatmap-cell.lv2 { background: #40c463; }
.heatmap-cell.lv3 { background: #30a14e; }
.heatmap-cell.lv4 { background: #216e39; }

.gh-grass {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- 5a. 시리즈(연재) 박스 --- */
#series-box .series-title {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
#series-box .series-list {
  margin: 0;
  padding-left: 1.25rem;
}
#series-box .series-list li {
  margin: 0.25rem 0;
  line-height: 1.5;
}
#series-box .series-list li.current {
  list-style: none;
  margin-left: -1.25rem;
  padding: 0.3rem 0.6rem;
  background: rgba(31, 143, 255, 0.12);
  border-radius: 0.4rem;
}
#series-box .series-current {
  font-weight: 700;
}
#series-box .series-now {
  font-size: 0.72rem;
  background: var(--link-color, #1f8fff);
  color: #fff;
  border-radius: 0.6rem;
  padding: 0.05rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* --- 5b. 관련 글 / 이전·다음 글 다듬기 --- */
#related-posts .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #related-posts .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.13);
  }
}
#related-posts .card-body .card-title {
  font-size: 1rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-navigation .btn {
  border-radius: 0.5rem;
  transition: transform 0.15s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .post-navigation .btn:not(.disabled):hover {
    transform: translateY(-2px);
  }
}

/* --- 6. 고정(sticky) 영역 --- */
/* 데스크톱: 오른쪽 패널 전체를 화면에 고정 (활동 잔디 추가로 풀린 sticky 복구) */
@media (min-width: 1200px) {
  #panel-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
  /* 패널 내부 .access의 조건부 마진/스티키와 충돌 방지 */
  #panel-wrapper .access {
    margin-top: 0;
  }
}

/* (모바일 상단바 고정은 카테고리 페이지에서 콘텐츠와 겹침이 생겨 제거 — Chirpy 기본 동작 사용) */
/* 오른쪽 패널용 작은 잔디 */
.heatmap-sm .heatmap-cell {
  width: 9px;
  height: 9px;
}
#access-activity .panel-heading {
  font-size: 1.1rem;
}