/* ko-typo.css — 한글 웹 타이포그래피 기준값
 * 검사: node ~/.claude/skills/ko-typo/check.js <경로>
 * :where() 로 감싸 특정도 0 — 페이지 CSS 를 절대 이기지 않는다. head 맨 앞에 넣는다.
 */

/* 1. 어절 단위 줄바꿈 ------------------------------------------------- */
:where(:lang(ko), .ko, [data-lang="ko"]) {
  word-break: keep-all;
  overflow-wrap: break-word;   /* anywhere 아님: min-content 계산을 건드리지 않는다 */
}

/* 2. 줄 균형 ---------------------------------------------------------- */
:where(h1, h2, h3, h4, .tit, .title, .heading) { text-wrap: balance; }
:where(p, li, dd, .desc, .txt, .text)          { text-wrap: pretty; }

/* 3. 짧은 문구는 쪼개지지 않게 ----------------------------------------- */
:where(button, .btn, .badge, .label, .tag, .tab) { word-break: keep-all; }

/* 4. 넘치는 것만 국소적으로 강제 분해 ---------------------------------- */
:where(.url, .mail, .hash, code, pre, kbd) { overflow-wrap: anywhere; }

/* 5. 한글 본문 가독 폭 — 한 줄 25~45자 --------------------------------- */
:where(.prose, .article-body) { max-width: 38em; line-height: 1.7; }

/* 6. 지원이 갈리는 최신 속성은 @supports 로 감싼다 ---------------------- */
@supports (text-autospace: normal) {
  :where(:lang(ko), .ko) { text-autospace: normal; }   /* 한글-영문/숫자 사이 간격 */
}
@supports (text-spacing-trim: normal) {
  :where(:lang(ko), .ko) { text-spacing-trim: normal; } /* 괄호·따옴표 여백 정리 */
}

/* 7. 반응형 줄바꿈 — 사내 관례 ----------------------------------------- */
/*    .w_br = PC 전용 / .m_br = 모바일 전용. 기준폭 1024px */
.m_br { display: none; }
.w_br { display: inline; }
@media (max-width: 1024px) {
  .m_br { display: inline; }
  .w_br { display: none; }
}