/* 1. 폰트 불러오기 (제목: 세리프 / 본문: Pretendard) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Noto+Serif+KR:wght@600;700&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 2. 컬러 팔레트를 CSS 변수로 선언 (한 곳만 바꾸면 전체 색이 바뀜) */
:root {
  --bg-color: #FAFAF8;
  --text-color: #1A1A1A;
  --text-muted: #767676;
  --accent-color: #B34700;      /* 포인트 컬러: 번트 오렌지 */
  --accent-hover: #8C3600;
  --border-color: #E5E2DC;
}

/* 3. 전체 배경 & 기본 텍스트 */
body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.7;
}

/* 4. 사이트 제목 / 로고 영역 */
.site-title,
.wp-block-site-title,
h1.site-title a {
  font-family: "Playfair Display", "Noto Serif KR", serif !important;
  font-weight: 700 !important;
  color: var(--text-color) !important;
  letter-spacing: -0.02em;
}

/* 5. 상단 메뉴 - 포인트 컬러로 통일, 밑줄은 hover에만 */
.main-navigation a,
.wp-block-navigation a,
nav a {
  color: var(--accent-color) !important;
  text-decoration: none !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}
.main-navigation a:hover,
.wp-block-navigation a:hover,
nav a:hover {
  opacity: 0.7;
}

/* 6. 글 제목 (목록/카드) - 세리프 + 굵게, 밑줄 제거하고 hover 시 컬러 전환 */
.entry-title,
.wp-block-post-title,
h2.entry-title a,
article h2 a {
  font-family: "Playfair Display", "Noto Serif KR", serif !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  line-height: 1.3 !important;
  color: var(--text-color) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.entry-title a:hover,
.wp-block-post-title a:hover {
  color: var(--accent-color) !important;
}

/* 6-1. 제목 영역 높이 고정 - 카드마다 제목 줄 수가 달라도
   (1줄이든 3줄이든) 항상 같은 높이를 차지하게 해서
   그 아래 날짜·카테고리 줄이 가로로 나란히 맞춰지도록 함.
   최대 3줄까지 허용, 넘치면 "..." 처리 */
.entry-title,
.wp-block-post-title,
h2.entry-title,
.wp-block-post .wp-block-post-title {
  min-height: calc(1.3em * 3) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

@media (max-width: 782px) {
  .entry-title,
  .wp-block-post-title,
  h2.entry-title,
  .wp-block-post .wp-block-post-title {
    min-height: calc(1.3em * 2) !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* 6-2. 제목 링크(a)의 display가 inline-block으로 되어 있으면
   위의 3줄 자르기(-webkit-line-clamp)가 제대로 작동하지 않음.
   inline으로 되돌려서 줄 자르기가 정상 작동하도록 함 */
.wp-block-post-title a,
.entry-title a {
  display: inline !important;
}

/* 7. 썸네일 이미지 - 비율 통일 + 라운드 처리로 정돈된 느낌 */
.wp-block-post-featured-image img,
.post-thumbnail img,
article img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 1rem;
}

/* 8. 발췌문(excerpt) 본문 - 산세리프로 가독성 확보 */
.entry-summary,
.wp-block-post-excerpt,
.entry-content p {
  font-family: "Pretendard", sans-serif !important;
  font-size: 0.98rem;
  color: var(--text-color);
}

/* 9. 날짜 - 보조 텍스트 컬러 + "READ MORE" 느낌으로 스타일링 */
.entry-date,
.wp-block-post-date,
.posted-on a {
  color: var(--text-muted) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  border-bottom: 1px solid var(--accent-color);
  padding-bottom: 2px;
}
.entry-date:hover,
.posted-on a:hover {
  color: var(--accent-color) !important;
}

/* 10. 카드 사이 간격 - 여백을 넉넉히 줘서 "기술적으로 정돈된" 그리드 느낌 */
.wp-block-query .wp-block-post,
article.post {
  padding: 0 1.2rem;
}

/* 11. 헤더에 얇은 하단 구분선 - 섹션 분리감 */
.site-header,
header.site-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

/* ============================================================
   12. 레이아웃 / 여백 다듬기
   ============================================================ */

/* 12-1. 전체 콘텐츠 최대 너비 제한 - 화면이 넓어도 텍스트가
   무한정 늘어지지 않게, 가운데 정렬 */
.wp-site-blocks,
.site-content,
#content.site-content {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* 12-2. 그리드(3단 카드) 카드 사이 간격 넉넉하게 - 답답함 해소 */
.wp-block-query,
.wp-block-post-template {
  display: grid;
  gap: 3rem 2.5rem !important;
}

/* 12-3. 카드 내부 요소 간 세로 리듬 - 제목/이미지/본문/날짜
   사이 간격을 일정하게 맞춰서 스캔하기 편하게 */
.wp-block-post {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  gap: 0.6rem;
}

/* 12-4. 본문(발췌문) 줄 길이 제한 - 한 줄이 너무 길면
   가독성이 떨어지므로 최대 65자 폭으로 제한 */
.entry-summary,
.wp-block-post-excerpt {
  max-width: 60ch;
}

/* 12-5. 섹션(헤더 / 본문 / 푸터) 사이 상하 여백 - 큰 틀의 리듬감 */
.site-header { margin-bottom: 3rem !important; }
.site-content { margin-bottom: 4rem !important; }
.site-footer  { margin-top: 4rem !important; padding-top: 2rem; border-top: 1px solid var(--border-color); }

/* 12-6. 모바일 화면에서는 여백을 살짝 줄여서 답답하지 않게 */
@media (max-width: 782px) {
  .wp-site-blocks,
  .site-content {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .wp-block-query,
  .wp-block-post-template {
    gap: 2.5rem 0 !important;
  }
  .entry-title,
  .wp-block-post-title {
    font-size: 1.35rem !important;
  }
}

/* ============================================================
   13. 카테고리 / 태그 디자인 - 알약(pill) 모양 배지
   ============================================================ */

/* 13-1. 카테고리 배지 - 포인트 컬러 배경, 흰 글씨, 진하고 눈에 띄게 */
.wp-block-post-terms a,
.cat-links a,
.post-categories a {
  display: inline-block;
  background-color: var(--accent-color);
  color: #ffffff !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.65rem !important;
  border-radius: 999px;
  text-decoration: none !important;
  margin-right: 0.4rem;
  margin-bottom: 0.6rem;
  transition: background-color 0.2s ease;
}
.wp-block-post-terms a:hover,
.cat-links a:hover,
.post-categories a:hover {
  background-color: var(--accent-hover);
}

/* 13-2. 태그 배지 - 카테고리보다 톤 다운, 테두리만 있는 스타일로
   위계(카테고리 > 태그) 구분 */
.tags-links a,
.post-tags a,
.wp-block-tag-cloud a {
  display: inline-block;
  background-color: transparent;
  color: var(--text-muted) !important;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  text-decoration: none !important;
  margin-right: 0.4rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.tags-links a::before,
.post-tags a::before {
  content: "#";
  margin-right: 2px;
}
.tags-links a:hover,
.post-tags a:hover {
  border-color: var(--accent-color);
  color: var(--accent-color) !important;
}

/* 13-3. 카드 상단, 제목 위쪽에 카테고리가 오도록 배치 정리 */
.wp-block-post-terms {
  margin-bottom: 0.5rem;
}

/* 13-4. 글 목록 카드 안에서 태그/카테고리를 가로로 나열 */
.wp-block-post-terms,
.cat-links,
.tags-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   14. 모바일 화면 세부 조정 (782px 이하)
   ============================================================ */
@media (max-width: 782px) {

  /* 14-1. 상단 헤더 - 로고와 메뉴가 겹치지 않게 세로로 쌓기 */
  .site-header,
  header.site-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  /* 14-2. 사이트 제목 크기 축소 - 좁은 화면에서 줄바꿈 방지 */
  .site-title,
  .wp-block-site-title {
    font-size: 1.3rem !important;
  }

  /* 14-3. 메뉴 항목 사이 간격을 넓혀서 손가락으로 누르기 쉽게
     (터치 영역 최소 44px 권장) */
  .main-navigation a,
  .wp-block-navigation a,
  nav a {
    display: inline-block;
    padding: 0.5rem 0.3rem;
    font-size: 0.95rem;
  }

  /* 14-4. 3단 그리드였던 글 목록을 모바일에서는 1단으로 강제 전환
     (테마가 자동으로 안 바꿔줄 경우 대비) */
  .wp-block-query,
  .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }

  /* 14-5. 본문 발췌문 줄 길이 제한 해제 - 좁은 화면에선
     ch 단위 제한이 오히려 어색할 수 있어 폭 100% 사용 */
  .entry-summary,
  .wp-block-post-excerpt {
    max-width: 100%;
  }

  /* 14-6. 카테고리·태그 배지 살짝 작게 - 여러 개 나열될 때
     줄바꿈이 너무 많이 생기지 않도록 */
  .wp-block-post-terms a,
  .cat-links a,
  .post-categories a,
  .tags-links a,
  .post-tags a {
    font-size: 0.68rem;
    padding: 0.26rem 0.7rem;
  }

  /* 14-7. 썸네일 비율을 살짝 낮춰서(정사각형에 가깝게)
     세로 스크롤이 과도하게 길어지지 않게 */
  .wp-block-post-featured-image img,
  .post-thumbnail img,
  article img {
    aspect-ratio: 1 / 1;
  }

  /* 14-8. 가로 스크롤 방지 - 혹시 넘치는 요소가 있으면 강제로 숨김 */
  body {
    overflow-x: hidden;
  }
}

/* ============================================================
   15. 개별 글 상세페이지(본문) 디자인
   ============================================================ */

/* 15-1. 본문 읽기 폭 제한 - 한 줄이 너무 길면 눈이 피로하므로
   약 68자 폭으로, 페이지 가운데 정렬 */
.single .entry-content,
.post-template .entry-content,
article.single .entry-content {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.08rem;
  line-height: 1.85;
}

/* 15-2. 상세페이지 제목 - 목록보다 훨씬 크고 임팩트 있게 */
.single .entry-title,
.post-template h1.entry-title,
.single .wp-block-post-title,
.single h1.wp-block-post-title,
body.single-post .wp-block-post-title {
  font-family: "Playfair Display", "Noto Serif KR", serif !important;
  font-size: 2.4rem !important;
  line-height: 1.25 !important;
  max-width: 68ch;
  margin: 0 auto 1rem auto;
  min-height: 0 !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
}

/* 15-3. 작성일 / 카테고리 등 메타 정보 - 제목 아래 한 줄로,
   은은하게 */
.single .entry-meta,
.single .posted-on,
.post-template .entry-meta {
  max-width: 68ch;
  margin: 0 auto 2.5rem auto;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* 15-4. 본문 문단 사이 간격 - 문단 구분이 명확하게 */
.single .entry-content p {
  margin-bottom: 1.6rem;
}

/* 15-5. 본문 내 소제목(H2, H3) - 위계 확실히, 위쪽 여백 넉넉히 */
.single .entry-content h2,
.single .entry-content h1.wp-block-heading {
  font-family: "Playfair Display", "Noto Serif KR", serif !important;
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  margin-top: 2.2rem;
  margin-bottom: 0.7rem;
}
.single .entry-content h3 {
  font-family: "Pretendard", sans-serif !important;
  font-weight: 700;
  font-size: 0.89rem !important;
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
}

/* 15-6. 본문 내 이미지 - 원본 크기가 제각각이어도 항상 같은
   비율(4:3)로 자동 맞춰서 통일감 있게 보이도록 크롭.
   세로 사진이든 가로 사진이든 화면에서는 같은 모양으로 보임 */
.single .entry-content img,
.single .entry-content figure img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 6px;
  margin: 1.8rem auto;
  display: block;
}
.single .entry-content figure {
  max-width: 100%;
  margin: 2.5rem auto;
}

/* 15-6-1. 사진 두 장이 나란히(같은 문단 안에) 붙어있는 경우
   자동으로 2열 그리드로 배치해서 나란히 보이게 함 */
.single .entry-content p:has(> img + img) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
}
.single .entry-content p:has(> img + img) img {
  margin: 0;
  height: 100%;
}

/* 15-6-2. 모바일에서는 2열 그리드를 1열로 전환 */
@media (max-width: 782px) {
  .single .entry-content p:has(> img + img) {
    grid-template-columns: 1fr;
  }
}

.single .entry-content figcaption,
.single .wp-element-caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

/* 15-7. 인용구(blockquote) - 왼쪽에 포인트 컬러 굵은 선 +
   이탤릭체로 시각적으로 구분 */
.single .entry-content blockquote {
  border-left: 4px solid var(--accent-color);
  padding-left: 1.3rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--text-color);
  font-family: "Noto Serif KR", serif;
  font-size: 1.1rem;
}

/* 15-8. 본문 내 링크 - 밑줄은 살짝 흐리게, hover 시 포인트 컬러 */
.single .entry-content a {
  color: var(--text-color);
  text-decoration: underline;
  text-decoration-color: var(--border-color);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.single .entry-content a:hover {
  color: var(--accent-color);
  text-decoration-color: var(--accent-color);
}

/* 15-9. 이전글/다음글 내비게이션 - 카드 형태로 정돈 */
.post-navigation,
.nav-links {
  max-width: 68ch;
  margin: 4rem auto 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.post-navigation a,
.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 600;
}
.post-navigation a:hover,
.nav-links a:hover {
  color: var(--accent-color);
}

/* 15-10. 모바일에서는 본문 폭 제한을 풀고 글자 크기 살짝 축소 */
@media (max-width: 782px) {
  .single .entry-content,
  .single .entry-title,
  .single .entry-meta,
  .post-navigation {
    max-width: 100%;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }
  .single .entry-title,
  .post-template h1.entry-title,
  .single .wp-block-post-title {
    font-size: 1.7rem !important;
  }
  .single .entry-content {
    font-size: 1rem;
  }
}

/* ============================================================
   16. 버튼 / 링크 스타일 다듬기
   ============================================================ */

/* 16-1. 워드프레스 기본 버튼 블록 - 포인트 컬러 채움 스타일,
   과하지 않게 살짝 둥근 모서리 */
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0.7rem 1.5rem !important;
  font-family: "Pretendard", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--accent-hover) !important;
  transform: translateY(-1px);
}
.wp-block-button__link:active,
button[type="submit"]:active,
input[type="submit"]:active {
  transform: translateY(0);
}

/* 16-2. 테두리만 있는 보조 버튼 (아웃라인 스타일) -
   블록 에디터에서 "outline" 스타일 선택 시 적용 */
.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--accent-color) !important;
  border: 1.5px solid var(--accent-color) !important;
}
.is-style-outline .wp-block-button__link:hover {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
}

/* 16-3. 페이지네이션(이전 글 목록 / 다음 글 목록 이동) -
   숫자 버튼을 동그란 배지 형태로 */
.pagination a,
.pagination span,
.wp-block-query-pagination a,
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  color: var(--text-color);
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination a:hover,
.wp-block-query-pagination a:hover,
.nav-links .page-numbers:hover {
  background-color: var(--accent-color);
  color: #ffffff !important;
}
.pagination .current,
.wp-block-query-pagination .current,
.nav-links .page-numbers.current {
  background-color: var(--text-color);
  color: #ffffff !important;
}

/* 16-4. 일반 본문 링크가 아닌, 목록/사이드바 등 UI성 링크 -
   기본 파란색 대신 텍스트 컬러 + hover 시에만 포인트 컬러 */
a {
  color: var(--text-color);
}
a:hover {
  color: var(--accent-color);
}

/* 16-5. 키보드 포커스 상태 - 접근성을 위해 포인트 컬러 아웃라인
   (탭 키로 이동하는 사용자를 위한 배려, "기술적으로 잘 만든"
   사이트라는 인상을 줌) */
a:focus-visible,
.wp-block-button__link:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* ============================================================
   17. 사이드바 / 푸터 디자인
   ============================================================ */

/* 17-1. 사이드바 위젯 하나하나를 카드처럼 - 배경 살짝 다르게,
   둥근 모서리, 내부 여백 */
.widget,
.wp-block-widget-area .wp-block-group {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.8rem;
}

/* 17-2. 위젯 제목 - 세리프체로 다른 제목들과 통일감,
   아래 작은 포인트 컬러 밑줄 */
.widget-title,
.wp-block-widget-area h2 {
  font-family: "Playfair Display", "Noto Serif KR", serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--accent-color);
  display: inline-block;
}

/* 17-3. 위젯 내부 리스트(최근 글, 카테고리 목록 등) -
   구분선으로 항목 나누기, 링크 스타일 통일 */
.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget ul li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
}
.widget ul li:last-child {
  border-bottom: none;
}
.widget ul li a {
  color: var(--text-color);
  text-decoration: none;
}
.widget ul li a:hover {
  color: var(--accent-color);
}

/* 17-4. 검색창 위젯 - 둥근 모서리, 포커스 시 포인트 컬러 테두리 */
.widget input[type="search"],
.search-form input[type="search"] {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  font-family: "Pretendard", sans-serif;
  font-size: 0.9rem;
}
.widget input[type="search"]:focus,
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* 17-5. 푸터 전체 - 배경을 본문과 살짝 다르게(짙은 톤)
   해서 "여기서부터 사이트 끝"이라는 경계감 부여 */
.site-footer,
footer.site-footer {
  background-color: #1A1A1A;
  color: #C9C6BF;
  padding: 3rem 2rem;
  margin-top: 4rem;
}
.site-footer a,
footer.site-footer a {
  color: #C9C6BF;
}
.site-footer a:hover,
footer.site-footer a:hover {
  color: var(--accent-color);
}

/* 17-6. 푸터 내부 텍스트 - 작고 은은하게, 저작권 문구 등 */
.site-footer .site-info,
footer.site-footer p {
  font-size: 0.82rem;
  color: #8A877F;
  text-align: center;
}

/* 17-7. 푸터 소셜 링크(있다면) - 가로 정렬, 아이콘 간격 */
.footer-social,
.site-footer .social-links {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

/* 17-8. 모바일에서 사이드바 위젯 여백 축소 */
@media (max-width: 782px) {
  .widget,
  .wp-block-widget-area .wp-block-group {
    padding: 1.1rem;
  }
  .site-footer,
  footer.site-footer {
    padding: 2rem 1.2rem;
  }
}

/* ============================================================
   18. 댓글 / 구독 폼 디자인
   ============================================================ */

/* 18-1. 댓글 섹션 전체 - 본문과 구분되도록 위쪽 구분선 +
   본문과 같은 읽기 폭으로 정렬 */
#comments,
.comments-area {
  max-width: 68ch;
  margin: 4rem auto 0 auto;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-color);
}

/* 18-2. "댓글 N개" 제목 - 세리프체로 통일 */
.comments-title,
#comments h2 {
  font-family: "Playfair Display", "Noto Serif KR", serif !important;
  font-size: 1.4rem !important;
  margin-bottom: 1.8rem;
}

/* 18-3. 댓글 하나하나를 카드처럼 - 배경 구분, 둥근 모서리 */
.comment,
.comment-body {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.2rem;
}

/* 18-4. 댓글 작성자 이름 - 굵게, 포인트 컬러 */
.comment-author .fn,
.comment-meta .fn {
  font-weight: 700;
  color: var(--accent-color);
  font-style: normal;
}

/* 18-5. 댓글 작성일 - 흐린 보조 텍스트 */
.comment-metadata,
.comment-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* 18-6. 답글 (대댓글) - 왼쪽에 살짝 들여쓰기 + 연한 선으로
   부모 댓글과의 관계 표시 */
.comment .children,
.comment-list .children {
  margin-left: 1.5rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--border-color);
}

/* 18-7. 댓글 작성 폼 - input과 textarea 스타일 통일,
   포커스 시 포인트 컬러 테두리 */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-family: "Pretendard", sans-serif;
  font-size: 0.92rem;
  margin-bottom: 1rem;
  background-color: #ffffff;
  color: var(--text-color);
}
#commentform textarea,
.comment-form textarea {
  min-height: 120px;
  resize: vertical;
}
#commentform input:focus,
#commentform textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* 18-8. 댓글 폼 라벨 - 작고 은은하게 */
#commentform label,
.comment-form label {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.3rem;
}

/* 18-9. 구독(뉴스레터) 폼 - 눈에 띄는 카드 형태로,
   본문 흐름 속에서 시선을 끌도록 포인트 컬러 배경 살짝 */
.wp-block-jetpack-subscriptions,
.newsletter-form,
.subscribe-form {
  background-color: #FBEEE4;
  border: 1px solid #E8C9AE;
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  max-width: 68ch;
  margin: 3rem auto;
}
.wp-block-jetpack-subscriptions input[type="email"],
.newsletter-form input[type="email"],
.subscribe-form input[type="email"] {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  font-family: "Pretendard", sans-serif;
}
.wp-block-jetpack-subscriptions button,
.newsletter-form button,
.subscribe-form button {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  border: none;
  border-radius: 6px;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  margin-top: 0.8rem;
}

/* 18-10. 모바일에서 댓글/구독 폼 여백 축소 */
@media (max-width: 782px) {
  #comments,
  .comments-area,
  .wp-block-jetpack-subscriptions,
  .newsletter-form,
  .subscribe-form {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .comment,
  .comment-body {
    padding: 1rem;
  }
}

/* ============================================================
   19. [임시방편] 글 목록에서 본문 전체 대신 일부만 보이게 자르기
   - 가장 좋은 방법은 사이트 에디터에서 Post Content 블록을
     Post Excerpt 블록으로 바꾸는 것입니다 (근본적 해결).
   - 이건 그게 불가능한 클래식 테마용 임시방편입니다.
   ============================================================ */

/* 19-1. 홈/목록 화면(.single 클래스가 없는 페이지)에서만
   entry-content를 3줄로 자르고 나머지는 흐리게 페이드아웃 */
body:not(.single) .entry-content,
body.home .entry-content,
body.blog .entry-content {
  max-height: 4.8em;
  overflow: hidden;
  position: relative;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* 19-2. 잘린 부분 아래에 흰색(배경색) 그라데이션을 덮어서
   "글이 끊겼다"는 느낌 대신 자연스럽게 페이드아웃 되도록 */
body:not(.single) .entry-content::after,
body.home .entry-content::after,
body.blog .entry-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--bg-color));
}

/* 19-3. 본문 안에 들어있던 이미지가 목록에서 통째로 보이면
   레이아웃이 깨지므로, 목록 화면에서는 본문 내 이미지를
   숨기고 대표이미지(featured image)만 보이게 함 */
body:not(.single) .entry-content img,
body.