/* 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: 13px !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: 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,
  .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; }
}


/* ═══════════════════════════════════════════════════════════════════
   yn8 (YN 스튜디오) 전용 가독성 보정 — **다크 테마용** (2026-08-12, 라이브 실측)
   ⚠️ 글자를 **밝게** 만드는 규칙이다. 밝은 배경 사이트에 복사하면 정반대 효과.
   실측 8건: .partner-cta 파트너 브랜드색 3.76~4.42 · .social-cta/.bp-caption 흰글자 3.71/4.35
   ═══════════════════════════════════════════════════════════════════ */
/* ② 어두운 브랜드색 글자 → 색조 유지하며 밝게(색값을 CSS 로 읽을 수 없어 filter 사용) */
/* 2026-08-12: css/style.css 에서 color-mix 로 근본 수정 → 오버레이 filter 제거(이중 적용 방지) */
/* ③ 밝은 브랜드색 배경 위 흰 글자 → 배경만 어둡게(글자는 흐려지지 않는다) */
/* .social-cta / .bp-caption 도 css/style.css 에서 inset 을 직접 넣었다 → 오버레이 규칙 제거 */


/* ═══ 2026-08-14 품질 보강(기준서 A) ═══ */
/* 키보드 포커스 가시화 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand-ring, #7c5cff) !important;
  outline-offset: 2px !important;
}
/* 터치 타깃 보강 — 실측(375px): fc-link 17px·banner-close 17px·blog-pill 33px 등.
   크기만 키운다. banner-close 는 패딩+음수마진으로 배치 불변 확장. */
.fc-link { display: inline-flex !important; align-items: center !important; min-height: 44px !important; }
.banner-close { padding: 15px !important; margin: -15px !important; box-sizing: content-box !important; }
@media (max-width: 768px) {
  .blog-pill, .lang-btn, .hamburger, .theme-toggle { min-height: 44px !important; min-width: 44px !important; }
  .bl-tab { min-height: 44px !important; }
  .btn, .chip, .studio-chip, .ratio-tab, .quiz-opt, .tool-tab, .avatar-play, select { min-height: 44px !important; }
  .promo-arrow, .carousel-arrow { min-width: 44px !important; min-height: 44px !important; }
  footer a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; }
}