/* 0) 배너-리스팅 사이 여백 축소 */
.quarto-title-banner {
  margin-bottom: 0 !important;
}
main#quarto-document-content {
  padding-top: 0 !important;
  margin-top: 20 !important;
}
#listing-listing {
  margin-top: 10px !important;
}

/* 1) 페이지 중앙 정렬 — casestudy와 동일한 body-content 너비(908px) */
main#quarto-document-content.column-page-left {
  grid-column: body-content-start / body-content-end !important;
}

.quarto-title.column-page-left,
.quarto-title-meta.column-page-left {
  grid-column: body-content-start / body-content-end !important;
}

/* 2) h1 스타일: casestudy와 동일하게 (bold 700, 흰색) */
.quarto-title-banner h1.title {
  font-weight: 700 !important;
  color: var(--clr-title) !important;
}

/* listing 항목: flex → grid 전환 */
.quarto-post.image-right {
  display: grid !important;
  grid-template-columns: 1fr auto 25%;
  grid-template-rows: auto auto auto auto;
  gap: 0 1em;
}

/* .body를 해체하여 자식들이 grid에 직접 참여 */
.quarto-post .body {
  display: contents;
}

/* 제목: 본문+메타 영역 전체 사용 */
.quarto-post .listing-title {
  grid-column: 1 / 3;
  grid-row: 1;
  margin-bottom: 0.3em;
  color: var(--gs-white) !important;
}

/* 3) 블로그 제목: 밝은 글씨 */
.quarto-post .listing-title a {
  font-family: "Noto Sans KR", sans-serif !important;
  font-weight: 600 !important;
  color: var(--gs-white) !important;
}

.quarto-post .listing-title a:hover {
  color: var(--gs-hover) !important;
}

/* 부제목 */
.quarto-post .listing-subtitle {
  grid-column: 1 / 3;
  grid-row: 2;
  margin-bottom: 0.3em;
}

.quarto-post .listing-subtitle a {
  color: var(--clr-desc) !important;
}

/* 4) 카테고리 태그 + 날짜/저자: 같은 행, 수직 정렬 */
.quarto-post .listing-categories {
  grid-column: 1;
  grid-row: 3;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  align-self: center;
}

.quarto-post .listing-categories .listing-category {
  margin-bottom: 0 !important;
}

.quarto-post .metadata {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: center;
  padding: 0;
  border: none;
}

.quarto-post .metadata a {
  display: flex;
  gap: 0.8em;
  align-items: center;
}

.quarto-post .metadata .listing-date,
.quarto-post .metadata .listing-author {
  white-space: nowrap;
  font-size: var(--fs-aux);
  color: var(--clr-desc);
  margin-top: -2px;
  margin-right: 4px;
}

/* 3) 본문 요약: 밝은 글씨 */
.quarto-post .listing-description {
  grid-column: 1 / 3;
  grid-row: 4;
  margin-top: 0.2em;
  color: var(--clr-desc);
}

/* 썸네일: 우측 전체 행 */
.quarto-post .thumbnail {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
}

/* 5) 페이징 버튼 크기 조정 */
.quarto-listing-pager .page-link {
  font-size: var(--fs-caption);
  padding: 0.3rem 0.6rem;
}

/* 6) 블로그 본문 폰트 사이즈 — 장문 읽기용 */
#quarto-document-content p,
#quarto-document-content li {
  font-size: var(--fs-base);       /* 16px (전역 14px → 블로그 16px) */
}
#quarto-document-content h2 {
  font-size: 1.5rem;               /* 24px (전역 --fs-h2 1.3rem → 블로그 1.5rem) */
  font-weight: 600;
}
#quarto-document-content h3 {
  font-size: var(--fs-h2);         /* 20.8px (전역 --fs-h3 1.15rem → 블로그 1.3rem) */
}
#quarto-document-content h4 {
  font-size: var(--fs-h3);         /* 18.4px (전역 --fs-h4 1.05rem → 블로그 1.15rem) */
}
#quarto-document-content h5 {
  font-size: var(--fs-h4);         /* 16.8px (전역 --fs-h5 0.95rem → 블로그 1.05rem) */
}

/* 7) FAQ등 본문 스타일 개선 */
.blog-thin-block {
  font-weight: 300;
}