/* 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: 12.5px !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"],
[class*="-meta"],
.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; }

/* ── 브랜드색 라벨의 명도대비 보정 (2026-08-12 추가) ─────────────────────────
 * 사장님 지적: "글자색 때문에 안 보이는 데가 몇 개 있다".
 * 라이브 실측(WCAG 명도대비, 흰 배경 위 단색 텍스트만 집계):
 *   .promo-eyebrow  rgb(253,164,175)  1.89   ← 사실상 안 읽힘
 *   .promo-cta      amber  #f59e0b    2.15 / green 2.28 / teal 2.49 / orange 2.80
 *   .deal-tag       #ff5b59 2.81 · #ff2d55 3.36
 *   .deal-mini      #fe2c55 3.68      .channel-cta 흰글자 on #ff0033 3.96
 *   (기준: 본문급 13px 이하 텍스트는 4.5:1 필요)
 *
 * 원인: 슬라이드/제휴 카드가 각자의 브랜드색을 **글자색**으로 그대로 쓴다
 *      (.promo-slide style="--accent:#f59e0b" → .promo-cta{color:var(--accent)}).
 *      밝은 브랜드색(앰버·라임·로즈·시안)은 흰 배경에서 읽히지 않는다.
 *
 * 처방: 색상 코딩(브랜드 구분)은 살리고, 같은 색조를 어둡게 섞어 대비만 확보한다.
 *      ⚠️ color-mix 를 쓰므로 미지원 브라우저에서는 선언 자체가 무효가 되어
 *         기존 색이 그대로 남는다(깨지지 않는다). 배경/배치는 건드리지 않는다.
 */
/* 2026-08-12 2차 실측 보정: 50% 혼합으로는 라임/옐로 계열 accent 가 4.23:1 에 머물러
   기준(4.5)을 못 넘겼다(nb4 .promo-eyebrow/.promo-cta) → 42% 로 낮춘다.
   어두운 브랜드색은 더 어두워질 뿐이라 부작용이 없다. */
.promo-eyebrow,
.promo-cta,
.promo-yn { color: color-mix(in srgb, var(--accent, #4a4756) 42%, #17161c) !important; }

.rec-kicker,
.rec-cta { color: color-mix(in srgb, var(--rec, #4a4756) 42%, #17161c) !important; }

.deal-tag,
.deal-cta,
.deal-mini { color: color-mix(in srgb, var(--brand, #4a4756) 42%, #17161c) !important; }

/* 브랜드색 배경 + 흰 글자인 탭/알약 — 배경만 어둡게 덮어 흰 글자를 살린다.
   실측: `.channel-tab.active` 배경 rgb(254,40,83) 에 흰 12px = 3.71:1 (nb3·nb4).
   ⚠️ 배경색 값을 CSS 에서 읽을 수 없으므로 **inset 그림자로 덮는다**.
      inset box-shadow 는 배경 위·내용(글자) 아래에 그려져서 글자는 흐려지지 않는다.
      filter: brightness() 를 쓰면 흰 글자까지 같이 어두워져 오히려 나빠진다. */
.channel-tab.active,
.channel-tab[aria-selected="true"] {
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.26) !important;
}

/* 흰 글자를 쓰는 브랜드 배경 알약 — 배경을 낮춰 흰 글자가 읽히게 한다
   (시안·라임처럼 밝은 채널색이 문제였다) */
.channel-cta { background: color-mix(in srgb, var(--channel, #4a4756) 48%, #141319) !important; }

/* 반투명으로 흐려진 보조 텍스트(날짜·메타) — 실측 2.94:1 */
.blog-mini small,
.blog-mini time,
.lp-mini-body small { color: #55525f !important; opacity: 1 !important; }

/* ── 광고 슬롯 높이 예약: 늦게 붙는 광고가 화면을 밀어내는 것 완화 (2026-08-12) ──
 * 실측(모바일 390px, CPU 4배 감속): CLS 0.59 (양호 기준 0.1 이하).
 *   · 큰 이동 ①0.309@4.2초 — 상단에 삽입된 자동광고 285px 가 hero/NB패밀리를 밀어냄
 *   · 큰 이동 ②0.282@7.2초 — 본문 광고(선언 슬롯)가 90px → 392px 로 커지며 아래를 밀어냄
 * 이동이 크면 "버튼을 눌렀는데 다른 게 눌린다 / 기능이 안 된다" 로 체감된다.
 *
 * 선언 슬롯(.ad-slot)은 미리 높이를 잡아 두고, 구글이 "미충전(unfilled)" 으로 표시하면
 * 그때 접어서 빈 공간이 남지 않게 한다. :has() 미지원 브라우저에서는 기본 100px 만 적용된다.
 * ⚠️ 광고를 줄이거나 끄지 않는다 — 자리만 미리 잡는다.
 */
.ad-slot { min-height: 100px; }
.ad-slot:has(ins[data-ad-format="auto"]) { min-height: 300px; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { min-height: 0 !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: 12.5px !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; }
}


/* ═══════════════════════════════════════════════════════════════════
   yn3 (YN 다운로더) 전용 가독성 보정 (2026-08-12, 라이브 실측 기반)
   ⚠️ 이 사이트는 **밝은 배경**이라 글자를 어둡게 하는 게 맞다.
      다크 테마 YN 사이트(yn·yn1·yn4·yn7·yn8·yn10·yn11)에 복사하면 정반대 효과가 난다.
   ═══════════════════════════════════════════════════════════════════ */
/* ① 밝은 회색 보조문 → 진한 회색(흰 배경에서 6:1 이상) */
.partner-disc,
.terms-note,
.ad-tag,
.convert-hint,
.deal-cat,
.deal-ad,
.copyright,
.hero-trust,
.section-sub { color: #565c6b !important; opacity: 1 !important; }

/* ② 브랜드색 글자 → 색조 유지하며 어둡게(색값을 CSS 로 읽을 수 없어 filter 사용).
      배경이 투명한 텍스트 전용이라 배경까지 어두워지는 부작용이 없다. */
/* 2026-08-12: .nav-link.tab-link / .hb-more / .site-chip 은 style.css 의 --accent-text 로
   근본 수정했다 → filter 를 함께 걸면 이중으로 어두워지므로 제외.
   .deal-go 는 제휴사별 색(--brand)을 쓰므로 filter 유지. */
.deal-go { filter: brightness(0.62) saturate(1.12); }

/* ③ 브랜드색 배경 + 흰 글자 → 배경만 덮어 어둡게.
      inset box-shadow 는 배경 위·글자 아래에 그려져 흰 글자가 흐려지지 않는다(NB 에서 검증). */
.skip-link,
.btn-label,
.btn-green,
.soc-cta { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.28) !important; filter: none !important; }

/* ── 픽셀 실측 후 교정 (2026-08-12) ────────────────────────────────────
 * filter 를 걸었던 아래 클래스들은 **컬러 글자가 아니라 브랜드 배경 위 흰 글자**였다
 * (실측: .site-chip 2.75 · .promo-go 4.02 · .tpl-thumb-free 2.29 — filter 가 흰 글자까지
 *  어둡게 만들어 오히려 악화). 게다가 같은 클래스가 사이트 안에서 '컬러 글자'로도 쓰여
 * 한 규칙으로 양쪽을 개선할 수 없다 → **규칙을 되돌려 원래 상태로 둔다**(악화 방지).
 * 이 항목들은 각 사이트 자체 CSS 에서 디자인 의도를 보고 고쳐야 한다.
 */
.site-chip, .promo-go, .tpl-thumb-free { filter: none !important; }

/* 밝은 초록 버튼에 흰 글자 — 28% 덮기로는 1.91 에 머물러 더 강하게 덮는다 */
.btn-green { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.46) !important; }

/* ── 2026-08-16 잔존 마감: 아래 3개는 색만 고쳐져 있고 크기가 12px 였다(전수 실측). */
.convert-hint,
.partner-disc,
.footer-brand .copyright { font-size: 12.5px !important; }


/* ===============================================================================
   CLS: 상단 바 자리 예약 (2026-08-16, 라이브 실측 기반)
   -----------------------------------------------------------------------------
   증상: 첫 화면이 그려진 뒤 상단 바 2~3개가 뒤늦게 나타나며 히어로 이하 전체를
         380px 밀어낸다 -> CLS 0.317 (기준 0.1 이하).

   [경고] 왜 min-height 만으로는 안 되는가 (yn4 에서 반나절 헤맨 지점):
        바들은 `hidden` 속성(UA 기본 스타일 [hidden]{display:none}) 로 숨겨져 있다. **숨겨진 요소에는 min-height 가 아무 자리도
        차지하지 않는다**(박스가 생성되지 않으므로). 그래서 숨김 상태를 함께 풀어 준다.
        - display:block      -> 박스를 만들어 자리를 잡게 한다
        - visibility:hidden  -> 자리는 잡되 화면·스크린리더 모두에서 감춘다(빈 껍데기 노출 방지)
        - height + overflow:hidden -> 초기화 전 슬라이드가 세로로 쌓여 **과대 예약**되는 것을 막는다
          (min-height 로 두면 캐러셀 초기화 전 4장이 쌓여 400px 이 되고, 초기화 후 접히며
           반대 방향으로 더 큰 CLS 가 난다 -> 그래서 height 로 못 박는다)
        JS 가 숨김을 풀면 이 규칙은 자동으로 매칭이 끊겨 원래 높이로 돌아간다.

   [경고] 값은 이 사이트에서 채워진 뒤 뷰포트 7단(1280/1024/900/768/640/480/375)을
      전부 실측한 것이다. **다른 사이트에 복사 금지** - 사이트마다 전혀 다르다.
   [경고] 광고(adsbygoogle)·제휴링크·배너는 개수·위치·표시 시점을 건드리지 않는다. 자리만 미리 잡는다.
   =============================================================================== */

/* [사고기록] 2026-08-16 1차 시도는 !important 가 없어 **전허 적용되지 않았다.**
   증거: 라이부 상태 실산에서 `#promo h0  display:none / visibility:hidden` —
   **같은 궜칙 안**의 visibility 는 적용되고 display 만 무시됐다. 그게 단서다.
   범인: style.css:49   [hidden] { display: none !important; }
   -> !important 대결에서는 특이도 높은 집이 이긴다. 내 선택자는 (1,1,0) 이므로
      !important 만 붙이면 이긴다. 자리예약 목적에만 사용하므로 바가 보이는 동작에는
      영향이 없다(JS 가 hidden 을 해제하면 이 궜칙은 매칭이 끊긴다).
   [경고] 이 !important 를 지우면 예약이 조용하게 사라지고 CLS 가 원래대로 돌아간다.
      숫자만 보는 검사로는 안 잡힌다 — 반드시 **계산된 display** 를 확인할 것. */
#promo[hidden],
#recruit[hidden] { display: block !important; visibility: hidden; overflow: hidden; height: 109px; }

/* -- NB 패밀리 바 자리 예약 --------------------------------------------------
   #nbFamilyBar 는 nb-family.js 가 **런타임에 만들어 삽입**하는 요소라 CSS 로 직접
   예약할 수 없다(첫 페인트 시점에 DOM 에 존재하지 않는다).
   -> 대신 **바로 앞 형제**에 마진을 주고, 바가 삽입되면 :has(+ #nbFamilyBar) 가
      매칭되어 규칙이 스스로 풀린다. JS 를 건드리지 않는 자기해제형 예약이다.
   [경고] 값 = 패밀리바 높이 + 그 요소의 margin-top(18px). 인접 마진 상쇄까지 계산했다.
   [경고] :has() 미지원 구형 브라우저에서는 예약이 적용되지 않을 뿐 깨지지는 않는다. */
#recruit:not(:has(+ #nbFamilyBar)) { margin-bottom: 132px; }

@media (max-width: 768px) { #promo[hidden], #recruit[hidden] { height: 110px; } }
@media (max-width: 640px) { #promo[hidden], #recruit[hidden] { height: 98px; } }
@media (max-width: 480px) { #recruit:not(:has(+ #nbFamilyBar)) { margin-bottom: 156px; } }
@media (max-width: 420px) { #promo[hidden], #recruit[hidden] { height: 96px; } }