/* 페이지네이션(카드형 리스트용) */
.pagination { display: flex; gap: .5rem; align-items: center; justify-content: center; margin: 1.5rem 0 0; flex-wrap: wrap; }
.pagination a, .pagination .page { padding: .4rem .7rem; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none; color: #111827; }
.pagination .current { background: #111827; color: #fff; border-color: #111827; }
.page-prev, .page-next { font-weight: 500; }

/* 컨테이너 */
.content { max-width: 980px; margin: 40px auto; padding: 0 20px; }


/* 리스트(썸네일 우측) */
.wrap_thumbnail_post_list .item {
  display: grid; grid-template-columns: 1fr 180px; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid #f1f5f9;
}
.wrap_thumbnail_post_list .item:last-child { border-bottom: 0; }

/* 작성자 */
.author { display: flex; gap: 10px; align-items: center; text-decoration: none; }
.info_author .name_author { font-weight: 600; color: #111827; }
.info_author .time { margin-left: 8px; font-size: 12px; color: #6b7280; }

/* 본문 요약 */
.desc { margin-top: 8px; }
.desc_inner { text-decoration: none; }
.title_post { display: block; font-size: 18px; color: #111827; margin-bottom: 6px; }
.text { display: block; color: #4b5563; text-decoration: none; }

/* 메타(공감/댓글) */
.comments { margin-top: 10px; color: #6b7280; font-size: 13px; display: flex; gap: 14px; }
.comments em { font-style: normal; font-weight: 700; color: #374151; }

/* 썸네일 */
.thumbnail_post .thumbnail_area { position: relative; }
.img_post { width: 167px; height: 167px; object-fit: cover; border-radius: 8px; display: block; }

/* 썸네일 없는 카드(한 칸만) */
.info_post.only_post ~ .thumbnail_post { display: none; }

/* 반응형 */
@media (max-width: 720px) {
  .wrap_thumbnail_post_list .item { grid-template-columns: 1fr; }
  .img_post { width: 100%; height: 200px; }
}

/* ===== Single Post ===== */
.post { max-width: 820px; margin: 0 auto 80px; }
.post-header { margin: 28px 0 18px; }
.post-hero {
  margin: 0 0 18px;
  background-image: var(--post-hero);
  background-size: cover; background-position: center;
  border-radius: 18px;
}
.post-hero-inner {
  padding: 80px 24px;
  backdrop-filter: saturate(120%) brightness(0.95);
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.35));
  border-radius: 18px;
}
.post-title {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.25;
  color: #111827;
}
.post-hero .post-title { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.25); }

.post-meta {
  color: #6b7280; font-size: .9rem; margin: 0;
}
.post-hero .post-meta { color: rgba(255,255,255,.92); }

.post-summary {
  margin: 14px 0 22px; padding: 12px 14px;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px;
  color: #334155;
}

.post-content {
  color: #111827; line-height: 1.75; font-size: 1.02rem;
}
.post-content p { margin: 0 0 1.05em; }
.post-content h2, .post-content h3, .post-content h4 {
  margin: 2em 0 .6em; line-height: 1.35; scroll-margin-top: 100px;
}
.post-content h2 { font-size: 1.35rem; }
.post-content h3 { font-size: 1.18rem; color: #111827; }
.post-content a { color: #3344dd; text-decoration: underline; text-underline-offset: 2px; }
.post-content img, .post-content video {
  max-width: 100%; height: auto; border-radius: 12px;
  display: block; margin: 14px auto;
}
.post-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: .15rem .38rem; font-size: .95em;
}
.post-content pre {
  background: #0b1020; color: #e5e7eb; padding: 14px; border-radius: 12px;
  overflow: auto; border: 1px solid #111827;
}
.post-content pre code { background: transparent; border: 0; padding: 0; color: inherit; }

/* tags */
.post-tags { list-style: none; padding: 0; margin: 22px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.post-tags li a {
  display: inline-block; padding: 6px 10px; border-radius: 16px;
  border: 1px solid #e5e7eb; text-decoration: none; color: #374151; background: #fff;
}

/* pager */
.post-pager { display: flex; justify-content: space-between; gap: 12px; margin: 28px 0 0; }
.post-pager a { flex: 1; text-decoration: none; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; color: #111827; background: #fff; }
.post-pager a:hover { box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }

.pager{padding:.5rem .8rem;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#111827}
.pager:hover{box-shadow:0 2px 10px rgba(0,0,0,.06)}
.pager.all{margin:0 auto}


/* ===== Comments (utterances) ===== */
.comments-card {
  margin-top: 2rem;
  padding: 1.25rem 1rem 1rem;
  border-radius: 14px;
  background: #fff;
}

.comments-header { margin: 0 0 .75rem; }

.comments-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: #111827;
}

/* "Comments" 카운트가 숫자로 바뀌었을 때 길이가 변해도 안정적으로 */
#comments-count { line-height: 1; }

/* utterances 영역 기본 폭 보장 */
.utterances, .comments-body { width: 100%; }

/* 다크모드가 있다면 */
html[data-theme="dark"] .comments-card { background: #0f172a; border-color: #1f2937; }
html[data-theme="dark"] .comments-title { color: #e5e7eb; }

.post-toc{border:1px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff;margin:16px 0;box-shadow:0 4px 12px rgba(0,0,0,.03)}
.post-toc__title{display:block;font-weight:800;margin-bottom:8px;color:#111827}
.post-toc__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.post-toc__item--h2{padding-left:0}
.post-toc__item--h3{padding-left:12px;opacity:.9}
.post-toc__link{text-decoration:none;color:#374151}
.post-toc__link:hover{text-decoration:underline}

.tag-chip{
  display:inline-block;padding:.25rem .6rem;border-radius:999px;
  background:#fff;border:1px solid #e5e7eb;color:#374151;font-size:.9rem;
}