/* ============================================================
   moim.bio — Twenty Twenty-Five 한글 조판 보정
   폰트(Pretendard)는 moim-style.php 에서 의존성으로 걸어 둔다.
   ============================================================ */

:root {
  --moim-ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
}

/* ── 1. 본문 폰트 ───────────────────────────────────────────
   TT5 기본 폰트는 라틴 전용이라 한글이 시스템 폰트로 떨어진다.
   고정폭(코드)은 테마 것을 그대로 둔다 — 덮으면 정렬이 깨진다. */
body,
.wp-site-blocks,
.wp-site-blocks :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd,
  th, td, figcaption, blockquote, .wp-block-button__link) {
  font-family: var(--moim-ko);
}

/* ── 2. 줄바꿈 ──────────────────────────────────────────────
   TT5 는 제목에 word-break:break-word 를 걸어 둬서 한글이 단어
   중간에서 잘린다. keep-all 로 어절 단위로 끊고, 긴 URL·영문만
   overflow-wrap 으로 예외를 연다. 둘은 반드시 세트로 간다. */
.wp-site-blocks :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd,
  th, td, figcaption, blockquote),
.wp-block-post-title,
.wp-block-post-title a,
.wp-block-post-excerpt__excerpt {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 3. 가독성 ──────────────────────────────────────────────
   한글은 라틴보다 행간이 더 필요하다. 제목은 반대로 조여야
   한 덩어리로 읽힌다. */
.wp-site-blocks :where(p, li, dd) {
  line-height: 1.75;
  letter-spacing: -0.003em;
}

.wp-block-post-title,
.wp-site-blocks :where(h1, h2, h3) {
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* ── 4. 표 ─────────────────────────────────────────────────
   blog.yaml 방침상 조건·금액·기한은 표로 나간다. min-width 가
   없으면 모바일에서 셀이 찌그러질 뿐 가로 스크롤이 안 생긴다. */
.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wp-block-table table {
  min-width: 32rem;
  border-collapse: collapse;
}

.wp-block-table :where(th, td) {
  padding: 0.6em 0.8em;
  word-break: keep-all;
  vertical-align: top;
}

.wp-block-table th {
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-weight: 600;
  white-space: nowrap;
}

/* ── 5. 상단 메뉴 ───────────────────────────────────────────
   대메뉴 항목 간격. 테마 기본은 --wp--style--block-gap(1.2rem)이라
   한글 메뉴명이 서로 붙어 보인다. 최상위 ul 에만 걸어 드롭다운의
   줄 간격은 건드리지 않는다(코어가 gap 을 물려 준다). 600px 아래는
   오버레이 메뉴라 세로로 쌓이므로 그대로 둔다. */
@media (min-width: 600px) {
  .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
    gap: 2.2rem;
  }
}

/* 카테고리 옆 글 수. 이름을 읽는 데 방해되면 안 되므로 한 단계 작고 흐리게. */
.moim-nav-count {
  margin-left: 0.35em;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

/* 드롭다운은 부모 li(좁다) 기준으로 shrink-to-fit 되어, 코어의 min-width:200px
   에 걸려 긴 이름이 (1) 을 아랫줄로 떨어뜨린다. 항목을 nowrap 으로 두면 상자의
   최소폭이 곧 글자 길이가 되어 이름에 맞춰 늘어난다. 600px 아래는 오버레이라
   가로폭이 넉넉하지 않으므로 줄바꿈을 그대로 둔다. */
@media (min-width: 600px) {
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    white-space: nowrap;
  }
}