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


/* ═══════════════════════════════════════════════════════════════════
   yn2 (YN 포토에디터) 전용 가독성 보정 — **밝은 테마용**(글자를 어둡게) (2026-08-12 실측)
   실측 7건: #67848a 보조문 3.95~4.00 · .sr-btn 흰글자 4.00. 광고 라벨 div 1건은 부모가
   section.wrap 뿐이어서 안전한 범위를 못 만들어 제외했다.
   ═══════════════════════════════════════════════════════════════════ */
/* ① 밝은 회색 보조문 → 진한 회색 */
.deals-disc,
.desc,
.steps .step p,
.foot-links a { color: #565c6b !important; opacity: 1 !important; }
/* ③ 브랜드색 배경 위 흰 글자 → 배경만 어둡게 */
.sr-btn { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.3) !important; filter: none !important; }

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

   ⚠️ 왜 이 파일에 넣는가: yn2 는 외부 main CSS 가 없고 스타일이 index.html 인라인
      <style>(108~470행)에 있다. 언어별 index.html 37개 사본이 전부 동일한 인라인을 갖는데,
      nb-readability.css 링크가 그 <style> **뒤**(472행)에 있어 동일 명시도면 이 파일이 이긴다.
      → 이 한 파일 수정으로 38개 index.html 전부 해결된다.

   ⚠️ 왜 @media (min-width: 821px) 로 감싸는가: 인라인 <style> 안에 이미
      @media(max-width:820px) 터치 블록(promo-dot 28px, foot-links a padding 13px,
      yn-growth-footer nav a 12px)이 있다. 이 파일은 그보다 나중에 로드되므로 여기에
      평범한(미디어쿼리 없는) 규칙을 쓰면 모바일의 더 큰 값을 덮어써 죽인다.
      821px 이상만 담당하게 하면 두 블록이 서로 겹치지 않고 정확히 상보한다.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 821px) {
  /* 캐러셀 점 — 보이는 점 크기(8px)는 그대로, 클릭 상자만 24px.
     background-clip:content-box 라서 padding 영역은 투명 → 시각 변화 없음.
     gap:0 인 이유: 24px 상자끼리 겹치면 WCAG 간격 예외조차 성립하지 않는다. */
  /* bottom 보정 이유(9px→1px): .promo-dots 는 position:absolute; bottom:9px 로
     슬라이드 하단에 붙어 있다. 상자가 8px→24px 로 커지면 컨테이너 위쪽이 16px 자라고
     "보이는 점"이 8px 위로 올라가 위쪽 흰색 CTA 버튼과 겹친다(라이브 스크린샷으로 확인).
     bottom 을 8px 내리면 보이는 점의 중심이 원래 위치(하단에서 13px)로 정확히 돌아온다. */
  .promo-dots { gap: 0; bottom: 1px; }
  .promo-dot { box-sizing: border-box; width: 24px; height: 24px; padding: 8px; background-clip: content-box; }
  /* ⚠️ border-radius 를 5px→13px 로 올린 이유 (내리면 활성 점이 각진 사각형이 된다):
     background-clip:content-box 로 칠할 때 실제 모서리 반경은 (지정값 − padding) 이다.
     원래 .promo-dot.on 은 20×8 에 radius 5px(=완전 둥근 알약)였는데, padding 8px 를
     주면 5−8 <0 → 0 이 되어 각진 20×8 직사각형으로 렌더된다(라이브에서 실제로 확인했다).
     13px 로 두면 13−8=5px 가 되어 원래 알약 모양이 그대로 복원된다. */
  .promo-dot.on { width: 36px; border-radius: 13px; }  /* 보이는 폭 20px + padding 16px */
  /* ⚠️ 활성 점에 background-clip 을 다시 선언하는 이유 (지우면 점이 크게 번진다):
     .promo-dot.on 은 background 단축 속성으로 색을 깐다. background 단축은
     background-clip 을 border-box 로 초기화하고, 명시도(0,2,0)가 .promo-dot(0,1,0)보다
     높아서 content-box 가 무효화된다. 결과적으로 padding 까지 흰색이 칠해져
     36×24 알약처럼 크게 번진다. */
  .promo-dot.on { background-clip: content-box; }

  /* 목록형 텍스트 링크 — 글자 크기·색·정렬은 건드리지 않고 세로 여백만 준다.
     min-width 는 짧은 언어 라벨이 24px 를 아슬하게 못 넘길 때를 위한 보험. */
  .foot-links a { padding-block: 3px; min-width: 24px; display: inline-block; }
  .yn-growth-footer nav a { padding-block: 3px; min-width: 24px; display: inline-block; }
  /* ⚠️ p.deals-disc a 는 문장 속 인라인 링크라 WCAG 인라인 예외로 일부러 제외한다.
     line-height 에 묶여 있어 키우면 본문 줄간격이 깨진다. */
}