/* 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; }
}


/* ═══════════════════════════════════════════════════════════════════
   yn7 (YN 포토스마트픽처) 전용 가독성 보정 — **다크 테마용** (2026-08-12, 라이브 실측)
   ⚠️ 글자를 **밝게** 만드는 규칙이다. 밝은 배경 사이트에 복사하면 정반대 효과.
   실측 8건 중 최악은 .nbf-go 1.32 — **스타일이 안 걸려 브라우저 기본 링크색(#0000ee)** 이었다(아래 별도 규칙).
   ═══════════════════════════════════════════════════════════════════ */
/* ① 너무 어두운 보조문 → 밝은 회색(어두운 배경에서 약 7.7:1) */
.cmp,
.copy,
.no,
.affiliate-disclosure { color: #9aa0b8 !important; opacity: 1 !important; }

/* ④ NB 패밀리 바 링크에 색이 지정돼 있지 않아 **브라우저 기본 파랑(#0000ee)** 이 나왔다.
      어두운 배경에서 1.32:1 — 사실상 안 보이는 상태였다. 밝은 색으로 명시한다. */
.nbf-go { color: #cbd5e1 !important; }
.nbf-card a, .nbf-wrap a { color: #cbd5e1; }

/* ═══ 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, #8b5cf6) !important;
  outline-offset: 2px !important;
}
/* 잔여 소형 라벨 실측 보정 (라이브 1280/375 계측) */
.promo-eye, .rec-eye { font-size: 13px !important; }
/* 모바일 터치 타깃 보강 — 크기만, 배치·색 불변 */
@media (max-width: 768px) {
  .lang-btn { min-width: 44px !important; min-height: 44px !important; }
  .auth-btn { min-height: 44px !important; }
  .credit-chip { min-height: 44px !important; }
  .blog-pill, .nav-blog { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  .chip, .tab, .btn-sm { min-height: 44px !important; }
  .promo-nav { width: 44px !important; height: 44px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   2026-08-16 클릭·터치 타깃 24px 확보 (WCAG 2.5.8 AA) — 전 뷰포트
   1280px 라이브 실측에서 20개가 24px 미만이었다. 마우스 사용자도 대상이라 PC에도 적용한다.

   ⚠️⚠️ 명시도를 일부러 올린 이유 (내리면 규칙이 전부 무효가 된다):
      yn7 은 스타일이 index.html 인라인 <style>(30~421행)에 있고, 이 파일의 <link> 가
      그보다 **앞**(29행)에 있다. 즉 동일 명시도면 나중에 오는 인라인 <style> 이 이긴다.
      인라인에 이미 `.t-dot`(0,1,0) `.nav-links a`(0,1,1) `.foot .links a`(0,2,1) 가
      정의돼 있으므로, 여기서는 각각 한 단계 높은 명시도로 써야 실제로 적용된다:
        .t-dots .t-dot (0,2,0) / ul.nav-links a (0,1,2) / .foot .links li a (0,2,2)
      `.yn-growth-footer nav a` 는 인라인에 경쟁 규칙이 없어 평범한 명시도로도 먹는다.
   ⚠️ .consent-text a 는 문장 속 인라인 링크라 WCAG 인라인 예외로 일부러 제외했다.
   ⚠️ 아래 @media(max-width:768px) 블록은 이 블록의 셀렉터를 건드리지 않으므로
      순서 충돌이 없다(.nav-links 는 ≤820px 에서 display:none 이라 데스크톱 전용이다).
   ═══════════════════════════════════════════════════════════════════ */
/* 후기 캐러셀 점 — 보이는 점 크기(9px)는 그대로, 클릭 상자만 24px.
   background-clip:content-box 라서 padding 영역은 투명 → 시각 변화 없음.
   gap:0 인 이유: 24px 상자끼리 겹치면 WCAG 간격 예외조차 성립하지 않는다. */
/* padding/margin 보정 이유: 점 상자가 9px→24px 로 15px 커지면 그만큼 아래 콘텐츠가 밀린다.
   원래 .t-dots 는 `padding: 0 0 28px` 로 총 9+28=37px 를 점유하고 보이는 점 중심이
   상단에서 4.5px 에 있었다. margin-top:-7.5px + padding-bottom:20.5px 로 두면
   총 점유 -7.5+24+20.5 = 37px, 보이는 점 중심 -7.5+12 = 4.5px → 픽셀 단위로 동일. */
/* 쿠키 안내문 끝의 '자세히' 링크 — 문장 속 인라인이라 WCAG 예외 대상이지만(위 주석 참고),
   인라인 요소의 세로 padding 은 줄 상자를 늘리지 않아 레이아웃 변화가 0이다.
   히트영역만 19px→25px 로 커지므로 예외이든 아니든 넣는 쪽이 이득이다.
   ⚠️ display 를 inline-block 으로 바꾸면 줄 높이가 늘어난다. inline 유지 필수. */
.consent-text a { padding-block: 3px; }

.t-dots { gap: 0; margin-top: -7.5px; padding-bottom: 20.5px; }
.t-dots .t-dot { box-sizing: border-box; width: 24px; height: 24px; padding: 7.5px; background-clip: content-box; }
.t-dots .t-dot.on { width: 43px; }  /* 보이는 폭 28px + padding 15px */
/* ⚠️ 활성 점에 background-clip 을 다시 선언하는 이유 (지우면 점이 크게 번진다):
   인라인의 .t-dot.on 은 `background: var(--grad)` 단축 속성으로 그라디언트를 깐다.
   background 단축은 background-clip 을 border-box 로 초기화한다. 여기서 다시
   content-box 를 선언하지 않으면 padding 까지 그라디언트가 칠해져 43×24 알약이 된다. */
.t-dots .t-dot.on { background-clip: content-box; }

/* 목록형 텍스트 링크 — 글자 크기·색·정렬은 건드리지 않고 세로 여백만 준다.
   .foot .links a 는 실측 16.0px 이라 3px(=22px)로는 미달 → 4px 필요.
   ul.nav-links a 는 18.0px 이라 3px(=24px)로 충족. */
ul.nav-links a { padding-block: 3px; min-width: 24px; display: inline-block; }
.foot .links li a { padding-block: 4px; min-width: 24px; display: inline-block; }
.yn-growth-footer nav a { padding-block: 3px; min-width: 24px; display: inline-block; }


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

   [경고] 왜 min-height 만으로는 안 되는가 (yn4 에서 반나절 헤맨 지점):
        바들은 (숨김 메커니즘 없음 - 컨테이너가 빈 채로 display:block 이다) 로 숨겨져 있다. **숨겨진 요소에는 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)·제휴링크·배너는 개수·위치·표시 시점을 건드리지 않는다. 자리만 미리 잡는다.
   =============================================================================== */

/* 이 사이트는 바가 hidden 이 아니라 **빈 채로 보이는** 상태다(빈 상태 192px).
   그래서 숨김 해제가 필요 없고 min-height 만으로 예약이 걸린다.
   [경고] #recruit 은 빈 상태 192px -> 최종 170px 로 **줄어든다**(22px). min-height 로는 못 막는다.
      막으려면 min-height:192px 로 못박아야 하는데 그러면 영구히 22px 더 커진다 ->
      디자인 변경이 되므로 감수한다(기여도 작음). */
#promo   { min-height: 266px; }
#recruit { min-height: 170px; }

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

@media (max-width: 640px) { #promo { min-height: 359px; } #recruit { min-height: 291px; } }
@media (max-width: 420px) { #recruit:not(:has(+ #nbFamilyBar)) { margin-bottom: 156px; } }