/* 1. 프리텐다드(Pretendard) 웹 폰트를 외부에서 불러옵니다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 2. 웹페이지 전체(html, body)의 가로 스크롤이 생기지 않도록 막고, 하단 여백을 없앱니다. */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 3. 모든 요소의 너비와 높이를 계산할 때 테두리와 안쪽 여백(padding)을 포함시킵니다. (레이아웃 틀어짐 방지) */
*, *::before, *::after { box-sizing: border-box !important; }

/* 4. 기본 폰트를 프리텐다드로 설정하고, 한국어 단어가 줄바꿈될 때 끊어지지 않고 단어 단위로 넘어가도록 설정합니다. */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, .entry-content {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif !important;
  word-break: keep-all;
}

/* 5. 개별 글(상세 페이지) 본문의 줄 간격을 넓히고(2배), 문단 아래 여백을 주며, 글을 양쪽 정렬하여 가독성을 높입니다. */
body.single .entry-content p,
body.single .wp-block-post-content p {
  line-height: 2 !important;
  margin-bottom: 1.5em !important;
  text-align: justify !important;
}

/* 6. 홈, 블로그, 카테고리 등의 '목록 페이지'에서 썸네일(대표 이미지) 영역을 16:9 비율로 고정하고 가로로 꽉 차게 만듭니다. */
:where(body.home, body.blog, body.archive, body.search, body.category) .wp-block-post-featured-image,
:where(body.home, body.blog, body.archive, body.search, body.category) .post-thumbnail,
.forced-thumb-wrapper {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  margin-bottom: 15px !important;
}

/* 7. 썸네일 영역 안의 링크(a)와 사진(picture) 요소가 부모 영역에 맞게 100% 꽉 차도록 설정합니다. */
:where(body.home, body.blog, body.archive, body.search, body.category) .wp-block-post-featured-image a,
:where(body.home, body.blog, body.archive, body.search, body.category) .wp-block-post-featured-image picture,
:where(body.home, body.blog, body.archive, body.search, body.category) .post-thumbnail a,
:where(body.home, body.blog, body.archive, body.search, body.category) .post-thumbnail picture,
.forced-thumb-wrapper a,
.forced-thumb-wrapper picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* 8. 실제 썸네일 이미지가 16:9 비율 안에서 찌그러지지 않고 꽉 차게 예쁘게 잘리도록(cover) 하며, 위쪽 중앙을 기준으로 보여줍니다. */
:where(body.home, body.blog, body.archive, body.search, body.category) .wp-block-post-featured-image img,
:where(body.home, body.blog, body.archive, body.search, body.category) .post-thumbnail img,
.forced-thumb-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

/* 9. 구글 애드센스 광고가 로드되지 않았을 때(unfilled), 빈 공간이 하얗게 남지 않도록 해당 영역을 완전히 숨깁니다. */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 10. 주소가 없거나 크기가 0인 불필요한 iframe(주로 보이지 않는 빈 위젯이나 광고 찌꺼기)을 화면에서 숨깁니다. */
iframe:not([src]),
iframe[src="about:blank"],
iframe[width="0"][height="0"] {
  display: none !important;
}

/* 11. 모바일 환경(화면 가로폭 768px 이하)에만 적용되는 반응형 디자인 설정입니다. */
@media (max-width: 768px) {
  /* 모바일에서 글 본문이나 요약 내용의 좌우에 20px의 여백을 줍니다. */
  .entry-content, .wp-block-post-content, .entry-summary {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 단, 상세 페이지 본문 영역 자체의 기본 좌우 여백은 0으로 초기화합니다 (위의 설정과 조합되어 레이아웃을 맞춤). */
  body.single .entry-content,
  body.single .wp-block-post-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 모바일에서 광고 컨테이너가 화면을 벗어나지 않도록 가로 너비를 100%로 맞추고 가운데 정렬합니다. */
  .google-auto-placed,
  .ad-container,
  .ad-wrapper,
  .advertisement,
  .code-block {
    width: 100% !important;
    max-width: 100vw !important;
    text-align: center !important;
    margin: 10px auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 구글 자동광고 등 반응형 광고가 모바일 화면 너비에 딱 맞게 꽉 차도록 설정합니다. */
  ins.adsbygoogle[data-ad-format="auto"],
  ins.adsbygoogle[data-full-width-responsive="true"],
  .google-auto-placed ins.adsbygoogle {
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* 모바일 화면에서 맨 아래 푸터(바닥글) 부분의 불필요한 하단 여백을 없앱니다. */
  .site-footer, footer, #colophon {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}