/* 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"], .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: 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; } } /* ═══════════════════════════════════════════════════════════════════ yn1 (YN 변환기) 전용 가독성 보정 — **다크 테마용** (2026-08-12, 라이브 실측) ⚠️ 글자를 **밝게** 만드는 규칙이다. 밝은 배경 사이트에 복사하면 정반대 효과. 실측 2건: .aff-go #64748b 3.73 · .soc-cta 흰글자 4.00 ═══════════════════════════════════════════════════════════════════ */ /* ① 너무 어두운 보조문 → 밝은 회색(어두운 배경에서 약 7.7:1) */ .aff-go { color: #9aa0b8 !important; opacity: 1 !important; } /* ③ 밝은 브랜드색 배경 위 흰 글자 → 배경만 어둡게(글자는 흐려지지 않는다) */ .soc-cta { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.3) !important; filter: none !important; } /* =============================================================================== CLS: 상단 바 자리 예약 (2026-08-16, 라이브 실측 기반) ----------------------------------------------------------------------------- 증상: 첫 화면이 그려진 뒤 상단 바 2~3개가 뒤늦게 나타나며 히어로 이하 전체를 522px 밀어낸다 -> CLS 0.375 (기준 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 만 무시됐다. 그게 단서다. 범인: css/style.css:26 [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; } #promo[hidden] { height: 201px; } #recruit[hidden] { height: 187px; } /* -- NB 패밀리 바 자리 예약 -------------------------------------------------- #nbFamilyBar 는 nb-family.js 가 **런타임에 만들어 삽입**하는 요소라 CSS 로 직접 예약할 수 없다(첫 페인트 시점에 DOM 에 존재하지 않는다). -> 대신 **바로 앞 형제**에 마진을 주고, 바가 삽입되면 :has(+ #nbFamilyBar) 가 매칭되어 규칙이 스스로 풀린다. JS 를 건드리지 않는 자기해제형 예약이다. [경고] 값 = 패밀리바 높이 + 그 요소의 margin-top(18px). 인접 마진 상쇄까지 계산했다. [경고] :has() 미지원 구형 브라우저에서는 예약이 적용되지 않을 뿐 깨지지는 않는다. */ #recruit:not(:has(+ #nbFamilyBar)) { margin-bottom: 128px; } @media (max-width: 768px) { #promo[hidden] { height: 209px; } #recruit[hidden] { height: 202px; } } @media (max-width: 640px) { #promo[hidden] { height: 241px; } #recruit[hidden] { height: 234px; } } @media (max-width: 480px) { #recruit[hidden] { height: 252px; } } @media (max-width: 420px) { #promo[hidden] { height: 258px; } #recruit[hidden] { height: 269px; } #recruit:not(:has(+ #nbFamilyBar)) { margin-bottom: 148px; } }