/* 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 안 'NB' 이니셜은 마스코트 장식 글리프 — 11px 유지(장식 예외, r2에서 확정). * 12.5px 로 키우면 우하단 미니 뱃지(패딩 1px 4px·radius 6px)가 로고 밖으로 넘친다. * → 기준서 A1(12px 미만 금지)과 절충: 넘침 임계(12.5px) 아래인 12px 로 통일(모바일 규칙과 동일값). */ .nbf-logo, .nbf-logo i, .nbf-logo * { font-size: 12px !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; } /* ⚠️ 세로(높이)만 잡아 두고 가로를 안 잡아 두면, 구글이 슬롯보다 넓은 광고를 채울 때 * 그 iframe 이 화면을 통째로 밀어낸다. 실제로 1280px 화면에서 1178px 짜리 광고가 떠 * 문서가 538px 넘쳤다(nb-pdf, 간헐 재현 — 광고가 어떤 크기로 채워지느냐에 달렸다). * 페이지가 옆으로 흔들리면 손가락으로 스크롤할 때 화면이 어긋나 조작이 불편해진다. * 광고를 줄이지 않는다 — 넘치는 부분만 슬롯 안에서 잘라 낸다. */ .ad-slot { max-width: 100%; overflow-x: clip; } .ad-slot ins.adsbygoogle { max-width: 100%; } .ad-slot iframe { max-width: 100%; } /* 자동광고는 슬롯 밖(본문 아무 데나)에 꽂힌다 — 그쪽도 함께 막는다 */ ins.adsbygoogle { max-width: 100%; } body > ins.adsbygoogle, [data-google-query-id] { max-width: 100%; overflow-x: clip; } /* ⚠️ 자동광고는 .ad-slot 밖, 본문 아무 데나 꽂힌다. 실제로 라이브에서 `#aswift_2_host` 가 * .container 안에 직접 들어가 1,178px 로 떠서 문서를 538px 밀었다(1280px 화면). * 광고를 감싸는 상자에 규칙을 걸어도 그 상자가 아니라 본문에 꽂히면 소용이 없다. * → 본문 컨테이너 자체가 넘치는 것을 잘라 낸다. 광고는 그대로 뜨고 잘린 만큼만 안 보인다. * ⚠️ overflow-x:hidden 을 쓰면 sticky 헤더가 깨지므로 clip 을 쓴다. */ .container { max-width: 100%; overflow-x: clip; } [id^="aswift_"], [id$="_host"] { max-width: 100% !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: 12px !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; } } /* ═══ 1000만원 퀄리티 보강 (2026-08-14, 기준서 A) ═══════════════════════════ * 라이브 6표본 실측 근거: * · 홈 데스크톱 12px 미만 48~50개 = NB패밀리 로고 뱃지(.nbf-logo i, 8→11px 강제분) * 47~48개 + 섹션 키커 2개(.section-head span / .nb-channel-intro span 11.5px) * · 블로그 페이지 144~530개 = 블로그 빌드 셸에 이 오버레이가 연결돼 있지 않았음 * (빌드 pageShell/layout 에 링크 추가로 해소, 본 파일이 블로그에서도 적용됨) * · 모바일 터치 44px 미만 43~52개 = 캐러셀 점·화살표·별·칩·테마 토글 * 원칙: 크기·패딩·포커스만 추가. 색/배치/기능 불변. */ /* A-1a. 홈 섹션 키커(실측 11.5px) */ .section-head > span, .tools-head > span, .nb-channel-intro span { font-size: 13px !important; } /* A-1b. 블로그 목록 메타·라벨(실측 11~11.5px) — 셸 연결로 이제 블로그에도 적용 */ .blog-meta, .blog-meta * { font-size: 13px !important; } .hv-chip, .feat-body em { font-size: 12.5px !important; } /* A-4. 키보드 포커스 링 — :focus-visible 이라 마우스 클릭에는 나타나지 않는다 */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--brand, #4f46e5) !important; outline-offset: 2px !important; } /* ═══ r3: 클릭·터치 타깃 24px 확보 (WCAG 2.5.8 AA) — 2026-08-16 ═══════════════ * 2026-08-16 클릭·터치 타깃 24px 확보 (WCAG 2.5.8) * 라이브 실측(1280×800, nb·nb1~nb24 25곳): 24px 미달 조작요소 555개. * 정체는 템플릿 2종이 공유하는 4개 컴포넌트뿐이었다: * ① 캐러셀 점 .promo-dot/.rec-dot (7×7, active 20×7) — 25곳 전부 * ② 푸터 정책링크 nav[aria-label="policy links"] a (104×20.8) — 25곳 전부 * ③ 템플릿B(nb5~nb24) 푸터 .footer .ft-col a (331.8×20.9) / .section-head a (69×20.1) * ④ 템플릿B 도구폼 .field label (높이 19.4~20.4px) * 원칙: 보이는 크기·색·글자크기는 그대로. 히트 영역(투명 border/패딩/최소높이)만 키운다. * * ⚠ 배치 위치: 아래 `@media (max-width:768px)` 44px 블록보다 **앞**이어야 한다. * 뒤에 두면 모바일의 더 큰 값(44px, dot ::after 32px)이 이 24px 규칙에 덮인다. * ⚠ !important 를 쓴 이유: 템플릿B 20곳의 index.html 은 로드 순서가 * styles.css(29행) → nb-readability.css(30행) → **nb-carousel.css(42행)** 로 * 역전돼 있다. 점(dot) 정의가 나중에 오는 nb-carousel.css(170~198행)에 있어 * 동일 명시도로는 무효다. 명시도 곡예 대신 !important 로 확실히 이긴다. */ /* ①-a dots 컨테이너: gap 6px → 0. 24px 히트박스끼리 겹치면 WCAG 2.5.8 의 "간격(spacing)" 예외조차 성립하지 않는다. 보이는 점 사이 여백은 아래 좌우 투명 border 8.5px 이 대신 벌려준다(6px → 17px). */ .promo-dots, .rec-dots { gap: 0 !important; } /* ①-b 점 본체: 24×24 히트박스 안에 원래 7×7 그림만 그린다. 히트 영역 확장은 padding 이 아니라 **투명 border 8.5px** 로 한다. ⚠ padding 8.5px + background-clip:content-box 는 쓰면 안 된다(라이브 실측 실패). 라이브 DOM 에 두 방식을 주입해 8배 확대 스크린샷으로 비교한 결과 padding 방식은 ① 활성 점의 오른쪽 끝이 각지게 잘려 둥근 알약 모양이 깨졌고 ② background-origin 이 padding-box(=37×24)로 커져서 그라디언트가 늘어난 뒤 가운데 20×7 만 보이므로 원본보다 채도가 눈에 띄게 흐려졌다. 투명 border 방식은 padding-box == content-box 라 그라디언트가 그려지는 범위가 원본(20×7)과 동일하고 둥근 끝도 유지된다 — 원본과 모양·색이 같음을 샷으로 확인했다. 상하로 8.5px 만 번지므로 바로 위 슬라이드(제휴 링크) 클릭을 가로채지 않는다 (.promo-dots margin-top 10px / .rec-dots 9~10px). */ .promo-dot, .rec-dot { box-sizing: border-box !important; width: 24px !important; height: 24px !important; padding: 0 !important; border: 8.5px solid transparent !important; background-clip: content-box !important; } /* 활성 점: 보이는 폭 20px + 좌우 투명 border 17px = 37px */ .promo-dot.active, .rec-dot.active { width: 37px !important; } /* ⚠⚠ 아래 한 줄을 지우면 활성 점이 24px 짜리 알약으로 크게 번진다. 삭제 금지. 이유: .active 규칙(nb-carousel.css 189·194행 / 템플릿A styles.css 112·129행)이 `background:` **단축 속성**으로 그라디언트를 깐다. background 단축은 background-clip 을 border-box 로 초기화하므로 위 ①-b 의 content-box 가 죽고, 명시도도 .active(0,2,0) > .promo-dot(0,1,0) 이라 덮인다. yn4 에서 실제로 이 버그가 났고 스크린샷으로 잡았다. */ .promo-dot.active, .rec-dot.active { background-clip: content-box !important; } /* ② 푸터 정책 링크(개인정보처리방침·이용약관 등). 클래스가 없어 속성 셀렉터로 잡는다. index.html 인라인 style 은 color 만 지정하므로 padding 은 오버레이가 이긴다(색 불변). */ nav[aria-label="policy links"] a { padding-block: 3px; min-width: 24px; } /* ③ 템플릿B 푸터 링크 목록 + 섹션 "더보기" 링크. .ft-col(flex column) / .section-head(flex) 의 아이템이라 blockify 되어 padding-block·min-height 가 실제 높이로 반영된다. 글자크기·색·정렬 불변. */ .footer .ft-col a { padding-block: 3px; } .section-head a { min-height: 24px; display: inline-flex; align-items: center; } /* ④ 도구폼 라벨. app.js fieldHtml() 이