/* nb-readability.css — NB/YN 공용 가독성 오버레이 (2026-08-11)
 *
 * 왜 오버레이인가: NB 25사이트·YN 11사이트의 CSS 가 전부 다르다(고유 톤).
 *   기존 파일을 고치거나 복사하면 사이트별 디자인이 깨진다. 그래서 **덮어쓰지 않고
 *   맨 뒤에 얹는 얇은 레이어**로 "12px 미만 글자"만 해소한다.
 *
 * 근거(라이브 실측):
 *   전수감사에서 사이트당 12px 미만 글자 151~266개 → 사장님 "글씨가 번지고 안 보인다"의 실체.
 *   · nb.mhna98.com(모바일 375): 201개 → **0개**
 *   · yn6.mhna98.com(모바일 375): 266개 → **0개**
 *   두 경우 모두 가로스크롤 미발생(scrollWidth 375 유지), NB패밀리 카드 높이 70px 정상.
 *
 * ⚠️ 선택자 주의(실측으로 배운 것):
 *   ① .nbf-logo / .nbf-txt 는 **자식(i, span)이 자체 font-size** 를 가진다 →
 *      부모만 지정하면 96개가 남는다. 그래서 자손까지 함께 지정한다.
 *   ② 사이트마다 라벨 클래스명이 다르다(deal-cat-tag, sc-badge, fs-free, latest-badge,
 *      rank-change, ad-tag, src-tag, aff-desc, aff-disclosure …). 개별 열거로는 못 끝난다 →
 *      **배지/태그/라벨 계열 부분일치([class*="-badge"] 등)** 로 안전망을 둔다.
 *      본문·제목 클래스는 건드리지 않으므로 레이아웃 위험이 없다(실측 확인).
 *
 * 접근성 기준: 본문 가독 최소 13px, 모바일 14px, 보조 라벨 12.5px(모바일 13px).
 */

/* ── 브랜드/로고 ── */
.brand-text span,
.brand-text small { font-size: 13px !important; line-height: 1.45 !important; }

/* ── NB 패밀리 추천 카드(전 사이트 공통 컴포넌트) ── */
.nbf-logo, .nbf-logo i, .nbf-logo * { font-size: 11px !important; }
.nbf-txt, .nbf-txt span, .nbf-txt * { font-size: 13px !important; line-height: 1.4 !important; }
.nbf-go { font-size: 13px !important; }

/* ── 섹션 키커·통계 보조문 ── */
.blog-kicker,
.active-tool-kicker,
.hero-stat-card small { font-size: 13px !important; }

/* ── 배지·태그·라벨·고지문 계열(사이트별 클래스명 차이를 부분일치로 흡수) ── */
[class*="-badge"],
[class*="-tag"],
[class*="-flag"],
[class*="-kicker"],
[class*="-eyebrow"],
[class*="-disclosure"],
[class*="-desc"],
[class*="-cat"],
[class*="-kw"],
[class*="-change"],
.src-badges, .src-badges *,
.fs-free,
.deal-tag,
.sc-badge,
/* 2026-08-11 추가(yn11 실측 잔여 11건): 고유 라벨 + 공통 소형 태그 */
.lang-caret,
.ad-label,
.card-soon,
.paypal-or,
[class*="-popular"],
sup, sub,
small { font-size: 12.5px !important; line-height: 1.35 !important; }

/* ── 렌더링 품질(글자 번짐 완화) ── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 모바일: 한 단계 크게 + 터치타깃 44px(iOS HIG) ── */
@media (max-width: 768px) {
  .brand-text span,
  .brand-text small,
  .nbf-go,
  .blog-kicker,
  .active-tool-kicker,
  .hero-stat-card small { font-size: 14px !important; }
  .nbf-txt, .nbf-txt span, .nbf-txt * { font-size: 13.5px !important; }
  .nbf-logo, .nbf-logo i, .nbf-logo * { font-size: 12px !important; }

  [class*="-badge"],
  [class*="-tag"],
  [class*="-flag"],
  [class*="-kicker"],
  [class*="-eyebrow"],
  [class*="-disclosure"],
  [class*="-desc"],
  [class*="-cat"],
  [class*="-kw"],
  [class*="-change"],
  .src-badges, .src-badges *,
  .fs-free,
  .deal-tag,
  .sc-badge,
  .lang-caret,
  .ad-label,
  .card-soon,
  .paypal-or,
  [class*="-popular"],
  sup, sub,
  small { font-size: 13px !important; }

  /* 크기만 키운다 — 배치·색은 건드리지 않는다 */
  .theme-toggle,
  .nba-btn,
  .lang-select,
  header select,
  header button { min-height: 44px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   2026-08-12 라이브 실측 보강 — yn-marketing-auto
   측정: 모바일 375px 에서 12px 미만 글자 301개 / 40px 미만 터치타깃 92개.
   famband(.fbar-*)·제휴블록(.ybf-*)은 생성 CSS 라 각 JS 원본에서 고쳤고,
   여기서는 페이지 자체 요소만 다룬다.
   ══════════════════════════════════════════════════════════════════════ */
.rev-grid .rev .badge,
.sched .row .tag,
.mock-body .panel .cap { font-size: 12.5px !important; line-height: 1.4 !important; }

@media (max-width: 768px) {
  .rev-grid .rev .badge,
  .sched .row .tag,
  .mock-body .panel .cap { font-size: 13px !important; }

  /* 푸터·SNS 링크는 목록형이라 세로 여백으로 터치 높이를 확보한다(본문 인라인 링크 아님) */
  footer .flinks a,
  footer .frow a { display: inline-flex; align-items: center; min-height: 40px; }
  .chan-group .sns-row .sns-btn { min-height: 40px; }
}