/* /var/www/html/blog/css/blog.css
   색·폰트·카드 톤은 style.css에서 그대로 상속, 글에 필요한 것만 추가 */

/* 글 본문 카드 — .profile / .youtube 와 같은 톤 */
.post {
  padding: 34px;
  background-color: #ffffff;
  border: 1px solid #d8e4df;
  border-radius: 8px;
}
.post a { color: #2f7d59; }
.post a:hover { text-decoration: underline; }

.series-badge {              /* 기존 .label 배지 톤 재사용 */
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px;
  color: #ffffff;
  background-color: #2f7d59;
  font-size: 14px;
  font-weight: bold;
}
.post-meta { margin: 8px 0 24px; color: #6c7a8a; font-size: 14px; }
.post h2 { margin-top: 28px; }   /* 색·크기(녹색 24px)는 기존 h2 상속 */
.post p, .post li { font-size: 16px; }

/* 코드 블록 — 표 셀 색(#f8fbff)과 통일 */
.post pre {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #d8e4df;
  border-radius: 6px;
  background-color: #f8fbff;
  overflow-x: auto;            /* 가로 스크롤은 코드 블록만 */
  font-size: 14px;
}
.post pre code,
.post pre code.hljs { padding: 0; background: transparent; }  /* 테마와 배경 충돌 방지 */
.post code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.post p code {               /* 본문 인라인 코드 */
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #eef4f1;
  color: #16324f;
  font-size: 14px;
}

/* 이미지·다이어그램 */
.post figure { margin: 22px 0; text-align: center; }
.post figure img { max-width: 100%; height: auto; border: 1px solid #d8e4df; border-radius: 6px; }
.post figcaption { margin-top: 8px; color: #6c7a8a; font-size: 14px; }

/* 시리즈 이전/다음 */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 18px 20px;
  background-color: #ffffff;
  border: 1px solid #d8e4df;
  border-radius: 8px;
  font-size: 15px;
}
.post-nav a { color: #16324f; text-decoration: none; font-weight: bold; }
.post-nav a:hover { color: #2f7d59; }
.post-nav .prev { color: #9aa7b4; }

.site-footer { margin-top: 28px; padding: 18px; text-align: center; color: #6c7a8a; font-size: 14px; }

@media (max-width: 720px) {     /* 기존과 같은 720px 분기점 */
  .post { padding: 24px; }
  .post-nav { flex-direction: column; }
}