/* ============================================================================
sp-contrast-fix.css — 학교생활끝판왕 글자 대비 보정
생성 2026-08-03
■ 무엇을 고치나 (전부 실측값, tools/contrast_audit.py)
첫 화면 기준 24건이 4.5:1 미만이었다. 그중 큰 덩어리 세 가지를 잡는다.
① 계열 카드(.herocard) — 그라디언트 배경 위 흰 글자.
밝은 계열일수록 나쁘다. 교육 2.11 · 의생명 2.75 · 자연 3.18 · 사회상경 3.35 · 공학 3.67
② 골드 버튼(button.gold) — #E0A100 위 흰 글자, 2.06 : 1
③ 푸터 링크 — 2.15 : 1
■ ①을 고른 방식
흰 글자는 그대로 두고 **배경 그라디언트만 어둡게** 했다.
계열별 색(주황·산호·초록·보라·파랑)은 그 자체가 정보라서 색상은 유지하고
밝기만 내렸다. 각 계열마다 4.6:1 을 넘기는 최소 배율을 계산해서 적용했다.
계산: 흰 글자 4.5:1 을 넘기려면 배경 상대휘도 ≤ 0.1833.
■ ②는 디자인 정본이 이미 답을 적어 두었다
onae-tokens.css 주석 —
"--warning-solid 배경 위에는 반드시 --on-warning-solid(#0F172A) 를 쓴다.
--text-strong 를 짝지으면 다크모드에서 2.07:1 로 깨진다"
골드 배경 위에는 **어두운 글자**가 정답이다. 흰 글자를 어둡게 뒤집는다.
■ 넣는 자리
사이트 CSS 전부 뒤. 되돌리려면 한 줄만 빼면 된다.
========================================================================== */
/* ---- ① 계열 카드 그라디언트 -------------------------------------------------
원본 → 보정 (밝기만 내림, 색상 유지)
교육 #C98A2F→#E0A94F → #845B1F→#936F34 (2.11 → 4.60)
의생명 #E2533B→#EF7A60 → #A93E2C→#B35B47 (2.75 → 4.66)
자연 #1A7F37→#3FA35C → #15662C→#33844A (3.18 → 4.63)
사회상경 #2F6DB0→#5490CF → #275B93→#4678AD (3.35 → 4.61)
공학 #5B5F97→#7D81BB → #505384→#6D71A4 (3.67 → 4.62)
인문 #16314F→#3B5B82 → 그대로 (6.99, 이미 통과)
-------------------------------------------------------------------------- */
/* ★ 선택자를 한 번 놓쳤다 (2026-08-03)
처음엔 rgb 표기만 쓴 규칙을 뒤에 덧붙였는데 **적용이 안 됐다.**
이 카드들의 style 속성은 자바스크립트가 런타임에 채우고(`${v.g}`),
들어가는 값이 rgb 인지 hex 인지 페이지마다 다르다.
그래서 세 표기를 **모두** 적어 준다. 하나만 적으면 조용히 빗나간다.
아래 값은 11px 짜리 .d 글자까지 4.5:1 을 넘기도록 계산한 최종값이다. */
/* 교육 */
.herocard[style*="201, 138, 47"], .herocard[style*="#C98A2F"], .herocard[style*="c98a2f"]{
background:linear-gradient(135deg,#77521C,#84632E)!important;
}
/* 의생명 */
.herocard[style*="226, 83, 59"], .herocard[style*="#E2533B"], .herocard[style*="e2533b"]{
background:linear-gradient(135deg,#983828,#A1513F)!important;
}
/* 자연 */
.herocard[style*="26, 127, 55"], .herocard[style*="#1A7F37"], .herocard[style*="1a7f37"]{
background:linear-gradient(135deg,#125B27,#2D7642)!important;
}
/* 사회상경 */
.herocard[style*="47, 109, 176"], .herocard[style*="#2F6DB0"], .herocard[style*="2f6db0"]{
background:linear-gradient(135deg,#235284,#3F6C9B)!important;
}
/* 공학 */
.herocard[style*="91, 95, 151"], .herocard[style*="#5B5F97"], .herocard[style*="5b5f97"]{
background:linear-gradient(135deg,#484B77,#626593)!important;
}
/* 인문 */
.herocard, .herocard .t, .herocard .d{ color:#ffffff; }
/* button.warn — #E2431F 위 흰 글자 4.15 : 1. 색상 유지, 명도만 내린다. */
button.warn, .btn.warn{ background:#CB3C1B!important; color:#ffffff!important; } /* 5.00:1 */
/* span.chip — 연한 파랑 배경 위 같은 계열 파랑 글자 4.38 : 1.
배경은 그대로 두고 글자만 진하게. */
span.chip, .chip{ color:#245488!important; } /* 인라인 color:#2f6db0 를 이겨야 한다 */ /* 7.05:1 */
/* footer a — 인라인 style="color:#9fb3c8" 가 박혀 있어 2.06 : 1 로 남았다.
인라인은 CSS 로 못 이긴다. 여기서만 !important 를 쓴다.
(HTML 을 고치는 편이 낫지만 푸터가 1,197장에 흩어져 있어 CSS 로 잡는다) */
/* ---- ⑤ 인라인 style 을 이겨야 하는 두 곳 -----------------------------------
정리하다 규칙을 지웠다가 2.06 : 1 로 되돌아간 것을 재측정에서 잡았다.
둘 다 HTML 에 색이 인라인으로 박혀 있어 !important 가 필요하다. */
/* 골드 버튼 — #E0A100 위 흰 글자였다.
디자인 정본(onae-tokens.css)이 이미 답을 적어 두었다 :
"--warning-solid 배경 위에는 --on-warning-solid(#0F172A) 를 쓴다" */
button.gold, .btn.gold, a.gold{
color:#0F172A!important; /* #E0A100 위 : 8.9:1 */
font-weight:800;
}
/* 푸터 링크 — 이 사이트 푸터는 **흰 배경**이다(가정하지 말고 재서 확인했다). */
footer a{ color:#334155!important; } /* 흰 배경 위 10.35:1 */
footer a:hover{ color:#16314F!important; }
/* ★ 위 한 줄이 새로 만든 페이지에서 사고를 냈다 (2026-08-03)
인사이트 2편(record-items · sebteuk-quality)의 푸터는 흰색이 아니라
남색(.sp-foot = var(--navy) = #143A6B)이다.
그 위에 이 파일이 #334155 를 !important 로 덮어써서 **1.10 : 1** —
링크 네 개가 완전히 안 보이는 상태였다. 페이지 안에 있던
`.sp-foot a{color:#9fc3e8}`(6.20:1)는 !important 에 밀려 무시됐다.
'footer a' 라고 넓게 쓴 것이 원인이다. 이 사이트에 푸터가 한 종류라고
가정했는데, 오늘 두 번째 종류가 생겼다.
넓은 규칙은 예외가 생기는 순간 사고가 된다 — 어두운 푸터는 여기서 되돌린다. */
footer.sp-foot a{ color:#CFE2F7!important; } /* #143A6B 위 8.59:1 */
footer.sp-foot a:hover{ color:#ffffff!important; } /* 11.37:1 */
footer.sp-foot{ color:#D6E4F2; } /* 본문 8.79:1 */
/* ============================================================================
★ 2026-08-03 (두 번째) — 배포될 원본 폴더(02.대시보드)로 다시 재고 나서 쓴다
앞의 규칙들은 _deploy\stage 사본으로 쟀다. 배포되는 건 02.대시보드 폴더고
거기엔 onae-typo.css · onae-pro.css · onae-seo-doc.css 가 더 붙어 있다.
재는 대상이 틀렸으니 결과도 틀렸다. 서버를 띄워 원본 그대로 다시 쟀다.
반전(inverse) 테마에서 —
index.html 안 보이는 글자 29건 (요금 비교표 전체)
guides/*.html 안 보이는 글자 11건 · 미달 10건
c/*.html 통과 ✔
원인은 늘 같다. 배경은 고정값, 글자색은 테마값이다.
.tips, .intro { background:#fff } table { background:#F7F8FA }
body { color:var(--onae-text) } ← 반전이면 거의 흰색
흰 판에 흰 글씨가 된다.
요금 비교표가 안 보이는 건 특히 나쁘다. 무엇을 사는지 못 읽는 표다.
고치는 법 — 배경이 고정이면 글자색도 고정. 사이트가 원래 쓰던 값 그대로 쓴다.
========================================================================== */
/* ── 안내 가이드(guides/) ─────────────────────────────────────────── */
[data-onae-theme="inverse"] .wrap > .intro,
[data-onae-theme="inverse"] .wrap > .intro *,
[data-onae-theme="inverse"] .wrap > ul.tips,
[data-onae-theme="inverse"] .wrap > ul.tips li,
[data-onae-theme="inverse"] .wrap .ex,
[data-onae-theme="inverse"] .wrap .ex *{ color:#2b3444 }
/* 제목은 배경을 안 칠한다 — 뒤가 테마 배경이므로 글자색도 테마에서 */
[data-onae-theme="inverse"] .wrap > h1,
[data-onae-theme="inverse"] .wrap > h2{ color:var(--onae-text) }
/* ── 첫 화면 요금 비교표 ──────────────────────────────────────────── */
[data-onae-theme="inverse"] table td{ color:#2b3444 }
/* 표 머리는 스스로 남색을 칠하고 흰 글자를 쓴다 — 건드리지 않는다 */
/* ── 두 번째 회차에서 더 나온 것들 ────────────────────────────────────
위 규칙을 넣고 다시 재니 남은 자리가 드러났다. 전부 같은 갈래다.
① 배경을 안 칠하는 자리(빵부스러기·관련 링크·꼬리말·본문 문단)
→ 뒤가 테마 배경이므로 글자색도 테마에서. 고정 회색(#789 · #9ab)은 반전에서
3.2~3.5 : 1 이 된다. 밝은 지면에서 고른 값이라 방향이 반대다.
② 카드가 스스로 흰 배경을 칠하는 자리(.unitcard .meta)
→ 고정 어두운 글자. 출처 표기라 흐리면 안 된다. */
/* !important 를 쓴 이유 — 이 파일 위쪽(93행)에 이렇게 박아 두었다.
footer a{ color:#334155!important } 흰 배경 위 10.35:1
흰 푸터를 전제로 고른 옳은 값이지만, 반전 테마에서는 방향이 반대다.
같은 무게로 맞서지 않으면 이길 수 없다. 8/2에도 같은 줄에 한 번 물렸다. */
[data-onae-theme="inverse"] .wrap > .crumb,
[data-onae-theme="inverse"] .wrap > p,
[data-onae-theme="inverse"] footer.site,
[data-onae-theme="inverse"] footer.site a,
[data-onae-theme="inverse"] footer > span,
[data-onae-theme="inverse"] footer > a{ color:var(--onae-text-muted) !important }
[data-onae-theme="inverse"] .wrap > .crumb a,
[data-onae-theme="inverse"] .wrap > .related a{ color:#7FB2FF }
[data-onae-theme="inverse"] .unitcard .meta,
[data-onae-theme="inverse"] .unitcard .meta span{ color:#4A5568 }
[data-onae-theme="inverse"] #membershipintro span{ color:#2b3444 }
/* ── 세 번째 회차 — 남은 자리 ─────────────────────────────────────────
① 요금 안내 띠(#F7F8FA 고정 배경) 안 문구와 버전 표기
② 미리보기 꼬리말(테마 배경 위 남색 #16314F → 1.43 : 1) */
/* ★ #membershipintro 아래를 통째로 묶었다가 표 머리(남색 배경 위 흰 글자)까지
어둡게 덮어 1.10 : 1 을 만들었다. th 는 빼야 한다 — 또 같은 실수였다. */
[data-onae-theme="inverse"] .plan-note,
[data-onae-theme="inverse"] #membershipintro,
[data-onae-theme="inverse"] #membershipintro span,
[data-onae-theme="inverse"] #membershipintro td,
[data-onae-theme="inverse"] #membershipintro p,
[data-onae-theme="inverse"] #membershipintro div{ color:#2b3444 }
[data-onae-theme="inverse"] #membershipintro th{ color:#fff }
/* 이 한 줄만 인라인으로 색이 박혀 있다 — style="color:var(--accent)".
인라인은 보통 CSS 로 못 이긴다. 여기서만 !important 를 쓴다.
(--accent 가 반전에서 밝게 잡혀 회색 판 위 1.06 : 1 이 됐다) */
[data-onae-theme="inverse"] #membershipintro span[style]{ color:#A8371A !important }
/* 워터마크(#watermark)는 배경을 안 칠한다 — 테마 배경 위 남색이라 1.43 : 1 이었다.
원래 아주 흐리게 깔리는 문구(opacity .038)라 색만 테마로 옮긴다. */
[data-onae-theme="inverse"] #watermark,
[data-onae-theme="inverse"] #watermark span{ color:var(--onae-text) }
[data-onae-theme="inverse"] .wrap > .crumb a,
[data-onae-theme="inverse"] .wrap > .related a{ color:#7FB2FF !important }
/* == 2026-08-03 : 가이드 허브(guides/index.html)의 작은 숫자 글자 ==============
실측(세 테마 모두)
.hero-stats .stat span #789 on #fff 3.64 : 1 (기준 4.5)
.glist li .cnt #789 on #fff 3.64 : 1
h2 .cnt #789 on 지면색 3.64 / 3.48 : 1
11~12px 작은 글자라 기준이 4.5다. 세 테마 모두 모자랐으니 테마 문제가 아니라
색 자체가 옅은 것이다.
두 갈래로 나눈다 - 뒤에 무엇이 있느냐가 다르기 때문이다.
.stat 과 .glist li 는 background:#fff 로 배경을 스스로 칠한다 -> 고정 배경 -> 고정 색
h2 안의 .cnt 는 지면 위에 그냥 얹혀 있다 -> 테마 배경 -> 테마 색
이 두 가지를 한 줄로 묶으면 반전에서 흰 글자가 흰 카드 위에 얹힌다.
이 클래스들은 guides/index.html 한 장에만 쓰인다(전체 확인함).
------------------------------------------------------------------------- */
.hero-stats .stat span{ color:#5C6B7A } /* 흰 카드 위 5.47 : 1 */
.glist li span.cnt{ color:#5C6B7A } /* 흰 카드 위 5.47 : 1 */
h2 span.cnt{ color:var(--onae-text-muted, #5C6B7A) } /* 지면 위 - 테마를 따른다 */
/* == 2026-08-04 : .onae-ico 크기 규칙 누락 (색이 아니라 크기) =================
onae-icons.js 가 이모지를