/* ============================================================================ math-contrast-fix.css — 수학끝판왕 글자 대비 보정 생성 2026-08-03 · 전부 실측값(tools/contrast_audit.py) 단원 페이지(/units/*.html) 기준 3건이 4.5:1 미만이었다. 전부 난이도 배지(.dbadge) — 연한 배경 위에 **같은 계열 색** 글자를 얹었다. 같은 계열끼리는 대비가 안 난다. 배경은 그대로 두고 글자만 어둡게 한다. ========================================================================== */ .dbadge.d1{ color:#107D38; } /* on #E7F7EE : 2.97 → 4.72 */ .dbadge.d2{ color:#A25A16; } /* on #FFF3E2 : 2.80 → 4.78 */ .dbadge.d3{ color:#9B2C2C; } /* 상 난이도도 같은 구조로 미리 맞춰 둔다 */ /* ============================================================================ ★ 2026-08-03 — 반전(inverse) 테마에서만 나던 5곳을 한 색으로 잡는다 원고 절을 붙이고 세 테마를 다시 재 보니, 새로 붙인 절은 통과인데 원래 있던 부품 다섯 가지가 반전에서만 3.24 : 1 로 걸렸다. a (상단 이동 링크) · p.crumb · p.note · th (표 머리) · p.foot 다섯 자리 모두 **같은 색 한 가지**였다 — rgb(91,102,117) = #5B6675. style.css 에 고정값으로 박혀 있어서 배경이 어두워져도 따라가지 않는다. 기본·큐트 테마는 배경이 밝아 통과했고, 반전에서만 드러났다. 배경을 재서 확인했다 — 다섯 자리 모두 실측 배경이 rgb(14,17,23) 로 onae-themes.css 의 --onae-bg(#0e1117)와 정확히 일치한다. 표 머리도 칠이 없어 몸통 배경이 그대로 비친다. 그래서 **같은 파일이 짝으로 정의한** --onae-text-muted 를 쓴다 (기본 7.2 · 반전 8.6 · 큐트 6.9 : 1). 글자색과 배경을 같은 곳에서 함께 가져온다 — 오늘 되풀이한 실수의 반대편이다. ========================================================================== */ .wrap nav.top a, .wrap p.crumb, .wrap p.note, .wrap table.ptable th, .wrap p.foot{ color:var(--onae-text-muted, #55606f); } /* ============================================================================ ★ 2026-08-03 (두 번째) — 단원 페이지 v2 디자인에 맞춰 다시 잡는다 무슨 일이 있었나 위쪽 규칙은 units/style.css **v1** 을 기준으로 쓴 것이다. 그때 표 머리와 안내 문구는 배경이 없어 본문 배경(반전에서 #0e1117)이 그대로 비쳤고, 그래서 --onae-text-muted 로 맞추는 게 정답이었다. 그런데 원본 폴더에는 이미 **v2.0.0** 이 들어와 있었다(2026-08-02). v2 는 본문 전체를 흰 판 위에 올린다. .wrap { background:var(--card) } -- card 는 #FFFFFF 고정 table.ptable { background:var(--card) } table.ptable th{ background:linear-gradient(180deg,#F9FBFD,#F2F6FA) } 배경이 **고정 흰색**이 된 것이다. 그런데 글자색은 테마에서 온다. 반전 테마에서 실측한 결과 — td 1.12 : 1 (흰 판 위 흰 글자 — 안 보임, 33장 × 최대 23곳) th 2.02 : 1 (내가 위에서 넣은 muted 가 밝은 판 위에 앉았다) 상단 링크·빵부스러기·안내·꼬리말 2.14 : 1 왜 이걸 늦게 알았나 — 이게 진짜 교훈이다 나는 `_deploy\stage` 에 있던 **v1** style.css 로 재고 「99개 조합 통과」라고 적었다. 실제로 배포되는 것은 원본 폴더의 v2 다. **재는 대상이 틀렸다.** 통과 보고는 무엇을 상대로 쟀는지까지 같이 적어야 한다. 어떻게 고치나 — 단원 페이지는 '밝은 지면' 디자인이다 흰 판 위에 검은 글씨로 짜인 설계다. 이걸 어둡게 바꾸려면 판·표·그림자·테두리를 전부 다시 설계해야 한다. 그건 대비 교정이 아니라 재디자인이다. 그래서 **단원 페이지는 반전 테마에서도 밝은 지면을 유지한다.** 배경이 고정이면 글자색도 고정 — 같은 곳에서 짝지어 가져온다. 반전을 누른 사람에게는 이 한 장만 밝게 보인다. 글자가 사라지는 것보다 낫다. 페이지 전체를 진짜 어둡게 만드는 일은 v3 디자인에서 따로 한다. 범위 body 에 `unit-page` 를 붙인 33장에만 적용한다. math-contrast-fix.css 는 index.html 등도 부르기 때문에, 파일이 아니라 **클래스로** 울타리를 친다. ========================================================================== */ /* 판·표의 배경이 고정 흰색이므로 글자색도 고정으로 짝지운다 */ body.unit-page.onae-themed{ background:#F7F9FC; color:#0B1524; } body.unit-page .wrap{ color:#0B1524 } body.unit-page table.ptable, body.unit-page table.ptable td{ color:#0B1524 } body.unit-page table.ptable td:first-child{ color:#5F6B7F } /* 위쪽 규칙이 muted 토큰으로 바꿔 놓은 다섯 자리를 v2 의 자기 색으로 되돌린다. #5F6B7F 는 v2 가 흰 판 위에서 5.39 : 1 로 실측해 고른 값이다. */ body.unit-page .wrap nav.top a, body.unit-page .wrap p.crumb, body.unit-page .wrap p.note, body.unit-page .wrap table.ptable th, body.unit-page .wrap p.foot{ color:#5F6B7F; } /* == 2026-08-03 : 홈(index.html)의 푸터와 「불러오는 중」 ===================== 실측 (색은 고정, 배경만 테마를 탄다 - 짝이 어긋난 자리다) footer #9CA3AF 기본 2.54 : 1 · 큐트 2.43 : 1 · 반전 통과 #mfInitLoading #64748B 반전 3.97 : 1 · 기본/큐트 통과 한쪽은 밝은 지면에서, 다른 쪽은 어두운 지면에서 모자란다. 배경이 테마에서 오니 글자색도 테마에서 와야 한다. footer 는 body 바로 밑 하나뿐임을 확인하고 직계 자식으로 좁혔다 (섹션 안에 들어 있는 다른 푸터를 건드리지 않기 위해서다). ------------------------------------------------------------------------- */ body.onae-themed > footer{ color:var(--onae-text-muted, #5F6B7F) } #mfInitLoading{ color:var(--onae-text-muted, #5F6B7F) } /* ============================================================================ ★ 2026-08-04 — 홈 화면(index.html)이 반전 테마에서 89곳 안 보이던 것 실측 (tools/contrast_audit.py 와 같은 자로, 오른쪽 아래 전환기 단추를 실제로 눌러 잼) 기본 244곳 중 안보임 0 · 반전 244곳 중 안보임 89 · cute 244곳 중 안보임 0 반전에서만 났다. 그리고 원인이 서로 반대인 두 무리였다. ── 무리 ㉮ : 25곳 — 글자는 테마를 타는데 배경이 안 탄다 ──────────────── 「📈 나의 진도」 제목과 그 아래 과목 이름 전부(공통수학1·대수·미적분Ⅰ· 확률과통계·공통수학2·미적분Ⅱ·기하·중등수학), 「🧭 나의 진단 결과」, 「📚 학습 사이클」과 그 안의 진단/처방/훈련/기록, 「🔥 심화 코너」, 「📚 추천 학습서」, 「💾 내 학습 데이터 백업·복원」, 자료실·멤버십 안내 두 장. 글자색을 정하는 규칙 onae-themes.css 89~92줄 .onae-themed{ color:var(--onae-text) } 반전에서 --onae-text 는 #eef2f8 (onae-themes.css 43줄) → index.html 473줄 이라 카드 안까지 상속된다. 배경을 정하는 규칙 index.html 52줄 .card{ background:var(--card) } index.html 141줄 --card:var(--bg,#FFFFFF); --bg:var(--surface,#F7F8FA) --surface 는 onae-tokens.css 51줄의 :root 고정값 #F7F8FA 다. **테마별로 다시 정의된 적이 없다.** 즉 배경 쪽이 테마를 안 탄다. 실측 rgb(238,242,248) 글자 / rgb(247,248,250) 배경 = 1.06 : 1. 거의 흰 바탕에 거의 흰 글씨였다. ── 무리 ㉯ : 64곳 — 반대다. 글자가 고정인데 배경이 테마를 탄다 ────────── FAQ 위젯의 질문 62개 + 「무엇을 도와드릴까요?」 + 「내 문의함」 제목. faq-widget.css 는 글자색을 var(--text-strong,#0F172A) / var(--text,#334155) 로 쓴다. 이 둘도 onae-tokens.css 의 :root 고정값이다. 그런데 질문 줄은 배경이 transparent(faq-widget.css 126줄)라 **몸통 배경이 그대로 비친다** — 반전에서 rgb(14,17,23)(=--onae-bg). 실측 1.06 : 1. ── 어느 길로 가나 ──────────────────────────────────────────────────── ㉮ 는 (나) 배경이 고정이니 글자색도 고정으로 못박는다. (가) 배경도 테마를 타게 하는 길을 **실제로 붙여서 재 봤다** — [data-onae-theme="inverse"] .card{ background:var(--onae-bg-elev) } 결과 : 안보임 89 → 67 로 줄지만, 없던 자리가 새로 하나 생겼다. 「종이책 구매 →」 rgb(20,58,107)(--brand #143A6B) on rgb(27,34,48) = 1.40 : 1 게다가 자기 배경을 따로 가진 카드 두 장(자료실·멤버십 안내)은 그대로 남았다. 카드 안이 흰 판 전제로 짜여 있다 — .chip 은 #fff, .qbox 는 옅은 보라 그라디언트, 테두리 #edeff6, .stat b 는 브랜드 그라디언트 글자다. 판을 어둡게 하려면 이것들을 전부 다시 골라야 한다. 그건 대비 교정이 아니라 재디자인이다. 같은 판단을 이 사이트가 이미 두 번 했다 — 단원 페이지(위 68~75줄)와 고지 문서(legal-pair-fix.css 22~24줄). 같은 길로 간다. 색은 단원 페이지가 쓰는 #0B1524 를 그대로 쓴다(#F7F8FA 위 17.23 : 1). ㉯ 는 반대로 **판을 고정 밝은색으로** 짝지운다. FAQ 위젯은 이미 자기 안이 전부 고정 밝은 판이다 — 카드 #fff(78·171·224·283·481·546줄), 답변 판 var(--surface,#F7F8FA)(149·241·347·434·523줄). 글자도 고정 어두운색이다. **위젯 전체가 밝은 판 설계**인데 뒷배경 한 겹만 테마를 타서 어긋났다. 그 한 겹을 고정 밝은색으로 채우면 위젯 안이 전부 짝이 맞는다. 글자를 밝게 바꾸는 쪽은 안 된다 — 위젯 안 판 20여 곳이 고정 밝은색이라 거기서 새로 안 보이게 된다. ── 울타리 ──────────────────────────────────────────────────────────── math-contrast-fix.css 는 index.html 말고 legal/*.html 8장과 auth-callback.html, 단원 페이지도 부른다. 그래서 넓게 쓰면 안 된다. 단원 페이지가 body.unit-page 를, 고지 문서가 body.legal-doc 를 쓰는 것과 똑같이 index.html 473줄 에 **home-page** 를 붙이고, 거기에 반전 테마 조건을 겹쳤다. :not() 으로 빼는 방식은 쓰지 않았다 — 그 자리에 쓸 색을 직접 지정했다. ── 고친 뒤 실측 (세 테마 전부 다시 눌러서 잼) ─────────────────────── 기본 244곳 안보임 0 → 0 (변화 없음) 반전 244곳 안보임 89 → 0 cute 244곳 안보임 0 → 0 (변화 없음) 244곳을 하나씩 짝지어 대조 — 세 테마 모두 대비가 낮아진 자리 0곳. ========================================================================== */ /* ㉮ 카드 판이 고정 밝은색(#F7F8FA 등)이므로 글자색도 고정 어두운색으로 못박는다. .card 자기 자신에만 걸어 상속으로 내려보낸다 — 이렇게 해야 자기 색을 따로 가진 요소(짙은 남색 그라디언트 위 흰 글씨인 맨 위 소개 카드 등)를 건드리지 않는다. */ [data-onae-theme="inverse"] body.home-page .card{ color:#0B1524 } /* ㉯ FAQ·문의함 위젯 — 안쪽이 전부 고정 밝은 판인데 뒷배경 한 겹만 테마를 탔다. 그 한 겹을 고정 밝은색으로 채워 짝을 맞춘다. 반전에서만 칠한다. */ [data-onae-theme="inverse"] body.home-page .faq-widget, [data-onae-theme="inverse"] body.home-page .inbox-widget{ background:#FFFFFF; border-radius:14px; padding:16px; } /* ============================================================================ ★ 2026-08-04 — 360px 에서 「다음 할 일」 카드 글자가 상자를 뚫던 것 2곳 실측 (tools/overflow_check.py) SPAN.jn-next-title 15px 내용이 9px 상자에 SPAN.jn-next-desc 15px 내용이 9px 상자에 더 좁은 320px 에서는 상자가 아예 0px 로 찌부러졌다. 이건 검사 도구가 clientWidth>0 인 것만 세기 때문에 보고에 안 뜬다 — 더 나쁜데 안 보였다. 원인 — 넘칠 자리가 없는 게 아니라, 한 줄에 다 넣으려 해서다. theme.css 1110~1153줄 .jn-next { display:flex; align-items:center } 한 줄 고정 .jn-next-badge{ flex:0 0 auto } 「다음 할 일」 배지 — 안 줄어듦 .jn-next-cta { flex:0 0 auto; white-space:nowrap } 단추 — 안 줄어듦 .jn-next-main { flex:1 1 auto; min-width:0 } ← 혼자 다 줄어듦 360px 에서 배지와 단추가 자리를 다 가져가고, min-width:0 인 가운데 칸만 9px 까지 짜부라진다. 글자가 들어갈 자리가 없다. 고치는 법 — 이 사이트가 이미 쓰는 방식 그대로다. onae-mobile-fix.css 43~58줄에 같은 사고와 같은 해법이 적혀 있다. 「flex-wrap:wrap 만으로는 안 접힌다. 최소 폭을 줘야 비로소 줄바꿈이 일어난다.」 그래서 접기 허용 + 가운데 칸에 최소 폭. 좁은 화면에서만 건다. 고친 뒤 실측 (320·360·390·430·480·540·600·768·1280 아홉 폭을 다 쟀다) 360px jn-next-title 9px → 209px 상자 (넘침 없음) 360px jn-next-desc 9px → 209px 상자 (넘침 없음) 320px 두 곳 모두 0px → 169px 상자 540·600·768·1280px 은 규칙 밖이라 전과 똑같다. 가로 밀림 아홉 폭 모두 없음. ========================================================================== */ @media (max-width:520px){ .jn-next{ flex-wrap:wrap } /* 최소 폭이 있어야 가운데 칸이 짜부라지는 대신 단추를 아랫줄로 내린다 */ .jn-next-main{ min-width:min(100%,200px) } .jn-next-cta{ margin-left:auto } } /* == 2026-08-04 : .onae-ico 크기 규칙 누락 (색이 아니라 크기) ================= onae-icons.js 가 이모지를 로 바꾼다. width/height 속성은 주지 않는다 — 스타일시트가 크기를 책임지는 설계다. 그런데 이 사이트 CSS 어디에도 .onae-ico 크기 규칙이 없었다(전수 검색 0건). 그래서 SVG 가 부모 상자 너비만큼 자라 제목의 이모지가 수백 px 짜리 그림이 됐다(실측 990px). 글자 크기를 따라가게(1em) 만든다. 부모 font-size 가 크면 아이콘도 크고, 작으면 같이 작아진다 — 인라인 아이콘의 정상 동작이다. 울타리를 두지 않는다: 이모지 대체는 onae-icons.js 가 사이트 전체에서 하므로 body 클래스로 가둘 이유가 없다. 선택자는 클래스 하나로만 좁힌다. 색은 건드리지 않는다(stroke=currentColor 그대로 둔다). 워크시트(css/ws-contrast-fix.css)에 먼저 넣은 것과 같은 규칙이다. (이 블록은 05:03 에 한 번 넣었다가 다른 작업의 덮어쓰기로 사라져 다시 넣었다.) */ .onae-ico{ width:1em; height:1em; flex:0 0 auto; vertical-align:-.125em; display:inline-block; } /* ============================================================================ ★ 2026-08-05 — 「디자인이 AI스럽다」를 고친다 (수학 사이트 전용 지면 교정) 회장님 지적 다섯 가지 중 이 절이 맡는 것은 네 가지다. (이모지→선아이콘은 onae-icons.js 와 위 .onae-ico 규칙으로 이미 끝났다.) ── 고치기 전에 화면에서 실제로 본 것 (1280·360 · 세 테마) ─────────────── ㉠ 전부 둥근 모서리 카드였다. main 바로 밑 15덩이가 예외 없이 radius 16px + 3겹 그림자 + 1px 테두리 + 아래 여백 16px 이었다(premium-skin.css 80줄 .card, onae-pro.css 43줄). 그 안의 .mfx-dash-tile · .mfx-dash-empty · .mfx-dash-reco · .jn-step · .book-card 도 전부 같은 둥근 상자였다. 상자 안에 상자가 세 겹 들어간 자리도 있었다(「추천 학습서」 카드 > 카드 > 안내판). 전부 같은 무게라 눈이 멈출 자리가 없었다. ㉡ 위계가 글자 크기뿐이었다. h2 23px / h3 17.5px / .sub 11px — 전부 같은 산세리프, 전부 굵기 800~900. 크기 말고는 서로 다른 축이 하나도 없었다. 게다가 h2 앞에는 색막대가 붙어 있어서(h2::before) 제목이 「위젯 이름표」처럼 보였다. ㉢ 얼굴이 하나가 아니라 셋이었다. 머리띠는 딥그린 그라디언트(premium-skin.css 62줄), 「잘 왔어요」 판과 소개 판은 인디고→보라 그라디언트(index.html 547·961줄 인라인), 그 위 단추는 금색 #fbbf24, 숫자는 남색 #143A6B, 칩은 연녹색. 한 화면에 색 계열이 넷이었다. ㉣ 여백이 어디나 같았다. 카드 안 22~30px, 카드 사이 16px, 제목 아래 6px — 절이 바뀌어도 숨이 같았다. ── 어떻게 고치나 ──────────────────────────────────────────────────────── 정본은 bookgen/web/order.html 이다. 거기 쓴 원칙을 그대로 옮긴다. · 카드 대신 괘선(border-top)과 여백으로 나눈다 · 표제는 세리프, 라벨·단추는 산세리프 · 위계를 서체계열·자간·색·괘선·여백 다섯 축으로 만든다 · 먹색 #16181C + 강조색 하나 · 절 번호는 모노스페이스 작은 글자 · border-radius 는 「누르는 것」에만 2px 강조색은 #1F4E79(감청)로 한다 — spec/math-b01.json 의 meta.accent 다. 여섯 사이트가 서로 다른 얼굴을 갖게 하는 것이 이번 작업의 목적이므로, 공용 파일(onae-*.css)은 건드리지 않고 이 파일에만 적는다. ── 울타리 ─────────────────────────────────────────────────────────────── 이 파일은 index.html 말고 legal/*.html 8장 · auth-callback.html · units/*.html 33장도 부른다. 그래서 전부 body.home-page 로 가둔다. (index.html 473줄 ) ── 로드 순서에 관한 사실 하나 ─────────────────────────────────────────── 이 파일은 「마지막」이 아니다. index.html 471줄에 있고, 그 뒤로 legal-widget.css(2552) · bank-transfer.css(2582) · css/membership-lifecycle.css(2588) · faq-widget.css(2625) 가 더 온다. 그래서 순서에 기대지 않고 선택자 명시도(body.home-page = 0,2,x)로 이긴다. 인라인 style 로 박힌 두 자리만 !important 를 쓴다(아래 3-2 에 이유를 적었다). ── 배경과 글자색은 반드시 같은 규칙 안에서 짝으로 지정한다 ────────────── 이 파일이 8월 3~4일에 두 번 되풀이한 실수가 그것이다. 그래서 아래는 var(--onae-*) 테마 토큰과 고정색을 섞지 않는다. 이 화면은 세 테마 모두 「밝은 지면」으로 고정한다 — 위 115~183줄에서 같은 판단을 이미 내렸고, 그 결정을 이어받는다. ========================================================================== */ /* ── 0. 이 사이트만의 색·서체 ─────────────────────────────────────────── */ body.home-page{ --mf-accent:#1F4E79; /* 감청 — spec/math-b01.json meta.accent */ --mf-accent-2:#EDF1F6; /* 강조색 10% 를 흰 지면에 섞은 옅은 판 */ --mf-ink:#16181C; --mf-ink-2:#3A3F47; --mf-ink-3:#5A6270; --mf-rule:#D5DAE1; /* 절을 나누는 괘선 */ --mf-rule-2:#E9ECF1; /* 줄을 나누는 옅은 괘선 */ --mf-paper:#FFFFFF; /* 웹폰트를 새로 받지 않는다 — 기기에 있는 명조를 순서대로 찾는다. Windows 는 Nanum Myeongjo/Batang, macOS 는 AppleMyungjo, 리눅스는 Noto Serif CJK KR. */ --mf-serif:"Noto Serif KR","Noto Serif CJK KR","Nanum Myeongjo","AppleMyungjo","Batang",serif; --mf-mono:ui-monospace,"SFMono-Regular",Menlo,"DejaVu Sans Mono",monospace; } /* ── 1. 지면 — 판을 띄우지 않는다 ──────────────────────────────────────── premium-skin.css 51줄이 body 에 딥그린 방사형 광을 깔아 카드가 「떠 있는」 느낌을 만든다. 지면을 평평한 흰 종이로 되돌린다. 배경과 글자색을 한 규칙 안에서 짝으로 준다. 세 테마 모두 같은 짝이다. */ body.home-page, [data-onae-theme="inverse"] body.home-page, [data-onae-theme="cute"] body.home-page{ background:#FFFFFF; color:#16181C; /* on #FFFFFF = 16.30 : 1 */ } body.home-page main{ max-width:1000px; margin:0 auto 96px; padding:0 28px; } /* ── 2. 카드 해체 — main 바로 밑 덩이는 상자가 아니라 「절」이다 ────────── 테두리·그림자·모서리·아래 여백을 걷어내고, 위쪽 괘선 하나와 여백으로 나눈다. 괘선 굵기를 두 가지로 두어 절의 무게를 다르게 한다 — 이것이 위계의 넷째 축이다. */ body.home-page main > .card, body.home-page main > .grid, body.home-page main > section.mfx-dash, body.home-page main > section.jn, body.home-page main > section.mfx-sp{ background:#FFFFFF; color:#16181C; border:0; border-top:1px solid var(--mf-rule); border-radius:0; box-shadow:none; margin:0; padding:30px 0 34px; transition:none; } /* 큰 절 — 굵은 먹색 괘선. 숨도 더 준다. */ body.home-page main > section.mfx-dash, body.home-page main > section.jn, body.home-page main > section.mfx-sp{ border-top:2px solid var(--mf-ink); padding:40px 0 44px; } /* 맨 위 지도판 바로 다음 절은 괘선을 지운다 — 판 아래에 줄이 겹친다 */ body.home-page main > section.gx-hero + *{ border-top:0 } body.home-page main > .card:hover{ box-shadow:none; transform:none } /* 맨 위 「수학 전체 지도」 — 이 화면에서 유일하게 무거운 판으로 남긴다. 전부 평평하면 눈이 처음 앉을 자리가 없다. 대신 모서리와 그림자는 지운다. */ body.home-page main > section.gx-hero{ border-radius:0; box-shadow:none; margin:0 0 4px; border-top:4px solid var(--mf-accent); } /* 격자 안의 카드 — 상자가 아니라 세로 괘선으로 나눈 칸 */ body.home-page main > .grid{ gap:0 } body.home-page main > .grid > .card{ background:#FFFFFF; color:#16181C; border:0; border-left:1px solid var(--mf-rule-2); border-radius:0; box-shadow:none; margin:0; padding:6px 22px; } body.home-page main > .grid > .card:first-child{ border-left:0; padding-left:0 } @media (max-width:759px){ body.home-page main > .grid > .card{ border-left:0; border-top:1px solid var(--mf-rule-2); padding:14px 0; } body.home-page main > .grid > .card:first-child{ border-top:0; padding-top:0 } } /* ── 3. 강조색 하나 ────────────────────────────────────────────────────── 3-1. 머리띠 — 딥그린 그라디언트를 감청 단색으로. 흰 글자와 짝으로 지정한다. */ body.home-page header{ background:#1F4E79; /* 흰 글자 8.72 : 1 */ color:#FFFFFF; box-shadow:none; border-bottom:0; } body.home-page header::before{ display:none } /* 배경 수식 무늬 — 지운다 */ body.home-page header .logo{ font-family:var(--mf-serif); font-weight:900; letter-spacing:-.02em; color:#FFFFFF; } body.home-page header .logo small{ font-family:var(--onae-font-sans); font-weight:500; letter-spacing:.02em; opacity:1; color:#D6E2EF; /* on #1F4E79 = 6.44 : 1 */ } body.home-page header nav button{ color:#C6D6E6; /* on #1F4E79 = 5.50 : 1 */ background:transparent; border-radius:0; font-weight:600; letter-spacing:.01em; } body.home-page header nav button.on, body.home-page header nav button:hover{ color:#FFFFFF; background:transparent } body.home-page header nav button.on{ border-bottom:3px solid #FFFFFF } body.home-page .nav-uline{ background:#FFFFFF; border-radius:0; height:3px } body.home-page .nav-ico{ opacity:.85 } /* 3-2. 인디고→보라 그라디언트 판 두 장(index.html 547·961줄). 이 두 자리는 마크업에 style="background:linear-gradient(...);color:#fff" 가 인라인으로 박혀 있다. 인라인은 명시도로 이길 수 없으므로 여기만 !important 를 쓴다. 배경을 흰 종이로 되돌리면서 글자색도 같은 규칙 안에서 함께 먹색으로 바꾼다. */ body.home-page main > .card[style*="linear-gradient(135deg,#312e81,#4f46e5)"]{ background:#FFFFFF !important; color:#16181C !important; /* 16.30 : 1 */ border:0 !important; border-top:3px solid var(--mf-accent) !important; border-radius:0 !important; box-shadow:none !important; text-align:left !important; padding:34px 0 38px !important; margin:0 !important; } /* 그 판 안의 이모지 장식(👋 · 40px) — 아이콘이 아니라 그림이다. 지운다. */ body.home-page main > .card[style*="linear-gradient(135deg,#312e81,#4f46e5)"] > div[style*="font-size:40px"]{ display:none !important; } body.home-page main > .card[style*="linear-gradient(135deg,#312e81,#4f46e5)"] h2{ justify-content:flex-start !important; color:#16181C; } body.home-page main > .card[style*="linear-gradient(135deg,#312e81,#4f46e5)"] p{ opacity:1 !important; color:#3A3F47; /* on #FFFFFF = 10.62 : 1 */ } body.home-page main > .card[style*="linear-gradient(135deg,#312e81,#4f46e5)"] > div[style*="margin-top"]{ justify-content:flex-start !important; } /* 그 안의 금색 단추(인라인 background:#fbbf24;color:#312e81) */ body.home-page .btn[style*="#fbbf24"]{ background:#1F4E79 !important; color:#FFFFFF !important; /* 8.72 : 1 */ } /* ── 4. 표제는 세리프, 라벨은 산세리프 ─────────────────────────────────── 위계를 만드는 다섯 축 : 서체계열 · 자간 · 색 · 괘선 · 여백. 크기 차이는 그중 하나일 뿐이다. */ body.home-page h2:not(.onae-keep-size){ font-family:var(--mf-serif); font-size:27px; font-weight:900; letter-spacing:-.03em; line-height:1.34; color:#16181C; margin:0 0 8px; } body.home-page h3:not(.onae-keep-size){ font-family:var(--mf-serif); font-size:19px; font-weight:900; letter-spacing:-.025em; line-height:1.45; color:#16181C; margin:0 0 5px; } /* h2 앞 색막대 — 제목을 「위젯 이름표」로 보이게 하던 것. 지운다. */ body.home-page h2::before{ display:none !important } /* 제목 옆 선아이콘은 강조색으로 — 색이 위계의 셋째 축이다 */ body.home-page h2 > .onae-ico, body.home-page h3 > .onae-ico{ color:var(--mf-accent) } /* 설명문 — 제목과 서체 계열이 달라야 제목이 제목으로 보인다 */ body.home-page .sub, body.home-page p.sub{ font-family:var(--onae-font-sans); font-size:13.5px; font-weight:400; letter-spacing:0; line-height:1.75; color:#5A6270; /* on #FFFFFF = 6.28 : 1 */ margin:0 0 20px; } /* 작은 라벨 — 산세리프 11px, 자간 넓게, 강조색. order.html 의 .sec-no / .pv-head 와 같은 취급이다. */ body.home-page .mfx-dash-sec-title, body.home-page .mfx-sp-rev-head, body.home-page .jn-next-badge, body.home-page .mfx-dash-tier{ font-family:var(--onae-font-sans); font-size:11px; font-weight:700; letter-spacing:.18em; color:#1F4E79; /* on #FFFFFF = 8.72 : 1 */ text-transform:none; } body.home-page .mfx-dash-sec-title{ margin:0 0 12px } /* 대시보드 머리 — 「내 학습 대시보드」는 절의 표제다 */ body.home-page .mfx-dash-head{ align-items:baseline; padding-bottom:14px; border-bottom:1px solid var(--mf-rule-2); margin-bottom:20px; } body.home-page .mfx-dash-hello{ font-family:var(--mf-serif); font-size:24px; font-weight:900; letter-spacing:-.03em; color:#16181C; } body.home-page .mfx-dash-tier{ background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; } /* ── 5. 숫자 — 모노스페이스로 세운다 (order.html 의 .sec-no · .order) ──── */ body.home-page .stat b, body.home-page .mfx-dash-dday .mfx-dash-tile-v, body.home-page .dday{ font-family:var(--mf-mono); font-weight:700; letter-spacing:-.02em; color:#1F4E79; /* on #FFFFFF = 8.72 : 1 */ -webkit-text-fill-color:#1F4E79; background:none; } /* ── 6. 안쪽 상자들도 줄로 바꾼다 ──────────────────────────────────────── 「누르는 것」이 아닌 것만 푼다. 단추·탭·칩은 아래 7 에서 상자로 남긴다. */ body.home-page .mfx-dash-tile{ background:transparent; border:0; border-left:1px solid var(--mf-rule-2); border-radius:0; box-shadow:none; padding:10px 20px; } body.home-page .mfx-dash-grid > .mfx-dash-tile:first-child{ border-left:0; padding-left:0 } body.home-page .mfx-dash-grid{ gap:0 } body.home-page .mfx-dash-empty{ background:#FFFFFF; color:#3A3F47; /* on #FFFFFF = 10.62 : 1 */ border:0; border-left:3px solid var(--mf-accent); border-radius:0; box-shadow:none; padding:4px 0 4px 16px; } body.home-page .mfx-dash-reco{ background:#FFFFFF; border:0; border-top:1px solid var(--mf-rule-2); border-radius:0; box-shadow:none; padding:14px 0 4px; } body.home-page .mfx-dash-recos{ gap:0 18px } body.home-page .mfx-sp-rev-card{ background:transparent; border:0; border-left:2px solid var(--mf-rule); border-radius:0; box-shadow:none; padding:2px 0 2px 18px; } /* 자료실·멤버십 안내 — 눌러서 넘어가는 「목차 줄」이다. 판이 아니라 줄로 둔다. */ body.home-page main > .card.guide-cta{ background:#FFFFFF; color:#16181C; border:0; border-top:1px solid var(--mf-rule); border-radius:0; box-shadow:none; padding:20px 0; transform:none; } body.home-page main > .card.guide-cta + .card.guide-cta{ border-top:1px solid var(--mf-rule-2) } body.home-page main > .card.guide-cta:hover{ background:var(--mf-accent-2); transform:none; box-shadow:none } body.home-page .gc-go{ color:#1F4E79; font-weight:700; font-size:13px; letter-spacing:.02em } body.home-page .gc-ic{ color:#1F4E79 } /* 진도 막대 — 둥근 알약을 곧은 막대로 */ body.home-page .bar, body.home-page .bar i{ border-radius:0 } /* ── 7. 「누르는 것」은 상자로 남긴다 (모서리 2px) ──────────────────────── */ body.home-page .btn{ font-family:var(--onae-font-sans); background:#1F4E79; color:#FFFFFF; /* 8.72 : 1 */ border:1px solid #1F4E79; border-radius:2px; box-shadow:none; font-weight:700; letter-spacing:-.01em; } body.home-page .btn:hover{ background:#173C5D; border-color:#173C5D; filter:none } body.home-page .btn.ghost{ background:#FFFFFF; color:#1F4E79; /* 8.72 : 1 */ border:1px solid #B9C6D6; box-shadow:none; } body.home-page .btn.ghost:hover{ background:var(--mf-accent-2); filter:none } body.home-page .chip{ border-radius:2px } body.home-page .chip.on{ background:#1F4E79; color:#FFFFFF; box-shadow:none } body.home-page .jn-step{ border-radius:2px; box-shadow:none } body.home-page .jn-next{ border-radius:2px; border:1px solid #1F4E79; box-shadow:none } body.home-page .book-card{ border-radius:2px; box-shadow:none; border:1px solid var(--mf-rule) } body.home-page .mfx-dash-persona-chip{ border-radius:2px; box-shadow:none } body.home-page .share-btn{ border-radius:2px; box-shadow:none } /* ── 8. 여백에 리듬을 준다 ─────────────────────────────────────────────── 전부 같은 숨이면 어디가 한 덩이인지 알 수 없다. 값을 넷으로 나눈다. 절 사이 40px · 절 안 묶음 사이 20px · 표제와 설명 8px · 줄 사이 10px */ body.home-page main > * + *{ margin-top:0 } body.home-page .mfx-dash-sec{ margin-top:26px } body.home-page .mfx-dash-sec + .mfx-dash-sec{ margin-top:30px } body.home-page .jn-head{ margin-bottom:18px } body.home-page .jn-steps{ margin-top:14px } body.home-page .qrow{ padding:10px 0 } body.home-page footer{ border-top:2px solid var(--mf-ink); max-width:1000px; margin:0 auto; padding:24px 28px 60px; font-size:12.5px; color:#5A6270; /* on #FFFFFF = 6.28 : 1 */ background:#FFFFFF; } /* ── 9. 남아 있던 딥그린·금색 부품들 — 강조색 하나로 모은다 ─────────────── 8절까지 고친 뒤 화면을 다시 재 보니, 지면은 정리됐는데 부품 열두 가지가 아직 딥그린(#0A5F49·#0E7A5F)과 금색(#D4A017)으로 남아 있었다. 전부 배경과 글자색을 한 규칙 안에서 짝으로 다시 지정한다. */ /* 대시보드 단추 두 종 */ body.home-page .mfx-dash-cta{ background:#1F4E79; color:#FFFFFF; /* 8.72 : 1 */ border:1px solid #1F4E79; border-radius:2px; box-shadow:none; } body.home-page .mfx-dash-cta.mfx-dash-cta-ghost{ background:#FFFFFF; color:#1F4E79; /* 8.72 : 1 */ border:1px solid #B9C6D6; } /* 「학년·교과 설정하기」 칩 */ body.home-page .mfx-dash-persona-chip{ background:#FFFFFF; color:#3A3F47; /* 10.62 : 1 */ border:1px solid var(--mf-rule); } body.home-page .mfx-dash-persona-gear{ background:var(--mf-accent-2); color:#1F4E79; /* on #EDF1F6 = 7.71 : 1 */ border-radius:2px; } /* 문항 태그(전략선택·개념결손·검토부재) */ body.home-page .mfx-dash-reco-tag{ background:var(--mf-accent-2); color:#1F4E79; /* on #EDF1F6 = 7.71 : 1 */ border-radius:2px; font-weight:700; letter-spacing:.02em; } /* 대시보드 타일 숫자 — 모노스페이스 강조색 */ body.home-page .mfx-dash-tile-num{ font-family:var(--mf-mono); font-weight:700; color:#1F4E79; /* 8.72 : 1 */ -webkit-text-fill-color:#1F4E79; background:none; } body.home-page .mfx-dash-tile-ico{ color:#5A6270 } /* 배경 장식 그래프(art-motif) — 지면 위 얼룩이었다. 아주 옅은 회색으로 물린다. */ body.home-page .art-motif, body.home-page .art-motif.art-gold{ color:#E4E8EE; opacity:.9 } /* 「다음 할 일」 줄 — 초록 알약 두 개를 괘선과 상자로 */ body.home-page .jn-next-badge{ background:transparent; color:#1F4E79; /* on #FFFFFF = 8.72 : 1 */ border-radius:0; padding:0 12px 0 0; box-shadow:none; } body.home-page .jn-next-cta{ background:#1F4E79; color:#FFFFFF; /* 8.72 : 1 */ border-radius:2px; box-shadow:none; } body.home-page .jn-step.is-current{ background:var(--mf-accent-2); color:#16181C; /* on #EDF1F6 = 14.29 : 1 */ border:1px solid #1F4E79; } body.home-page .mfx-sp-rev-dot.on{ background:#1F4E79 } body.home-page .mfx-sp-badge-ico{ color:#1F4E79 } /* 「공유」 단추 — 보라 판 위 반투명 흰색이었다. 판이 흰 종이가 됐으니 짝을 다시 맞춘다. */ body.home-page .share-btn, body.home-page .share-btn.hero{ background:#FFFFFF; color:#1F4E79; /* 8.72 : 1 */ border:1px solid #B9C6D6; border-radius:2px; box-shadow:none; } /* ── 10. 숫자 세 칸 — 가운데 정렬 알약이 아니라 표의 한 줄로 ───────────── index.html 122·125줄이 .stat.clickable 에 padding-bottom:26px 를 주고 그 자리에 「자세히 보기 →」를 absolute 로 앉힌다. 2절에서 칸 여백을 6px 로 줄이면서 그 글자가 설명 위로 겹쳤다(실측). 아래를 다시 벌린다. */ body.home-page main > .grid.g3 > .card.stat{ text-align:left; padding:6px 22px 30px; } body.home-page main > .grid.g3 > .card.stat:first-child{ padding-left:0 } body.home-page main > .grid.g3 > .card.stat::after{ left:22px; right:auto; text-align:left; bottom:6px; color:#5A6270; /* on #FFFFFF = 6.28 : 1 */ opacity:1; font-weight:600; letter-spacing:.02em; } body.home-page main > .grid.g3 > .card.stat:first-child::after{ left:0 } body.home-page main > .grid.g3 > .card.stat b{ font-size:34px; line-height:1.1; margin-bottom:2px; } body.home-page main > .grid.g3 > .card.stat .sub{ margin:0 } body.home-page main > .grid.g3 > .card.stat:hover{ transform:none; box-shadow:none } @media (max-width:759px){ body.home-page main > .grid.g3 > .card.stat{ padding:14px 0 28px } body.home-page main > .grid.g3 > .card.stat::after{ left:0 } } /* ── 11. 인라인으로 색이 박힌 판 세 자리 ───────────────────────────────── 화면을 다시 재서 찾은 것들이다. 전부 마크업에 style="background:..." 이 박혀 있어 명시도로는 못 이긴다. 배경과 글자색을 한 규칙에서 짝으로 준다. · 「심화 코너」 index.html background:linear-gradient(#fff7ed,#fef2f2) · 「자료실」 index.html background:linear-gradient(#eef2ff,#faf5ff) · 「심화 문항 클리닉 →」 단추 background:linear-gradient(#f97316,#dc2626) */ body.home-page main > .card[style*="#fff7ed"]{ background:#FFFFFF !important; color:#16181C !important; /* 16.30 : 1 */ border:0 !important; border-top:1px solid var(--mf-rule) !important; border-left:0 !important; border-radius:0 !important; box-shadow:none !important; padding:30px 0 34px !important; } body.home-page main > .card.guide-cta[style*="#eef2ff"]{ background:#FFFFFF !important; color:#16181C !important; /* 16.30 : 1 */ border:0 !important; border-top:1px solid var(--mf-rule) !important; border-radius:0 !important; box-shadow:none !important; padding:20px 0 !important; } body.home-page main > .card.guide-cta[style*="#eef2ff"]:hover{ background:var(--mf-accent-2) !important } body.home-page .btn[style*="#f97316"]{ background:#1F4E79 !important; background-image:none !important; color:#FFFFFF !important; /* 8.72 : 1 */ border-color:#1F4E79 !important; } /* 「추천 학습서」 안쪽 — 책 겉장은 상자로 남기되 초록을 강조색으로, 안내판은 알약을 지우고 왼쪽 괘선으로 바꾼다. */ body.home-page .bk-cover{ background:#1F4E79; background-image:none; color:#FFFFFF; /* 8.72 : 1 */ border-radius:2px; box-shadow:none; } body.home-page .bk-soon{ background:#FFFFFF; color:#3A3F47; /* 10.62 : 1 */ border:0; border-left:3px solid var(--mf-accent); border-radius:0; padding-left:16px; } /* ── 12. 맨 위 지도판 — 이 화면에서 남은 유일한 금색을 걷는다 ──────────── 강조색 #1F4E79 은 이 어두운 판(#0A1622) 위에서 1.4 : 1 이라 쓸 수 없다. 그래서 이 판 안에서는 「밝은 먹색」을 강조로 쓴다. 배경과 짝으로 지정한다. */ body.home-page section.gx-hero .gx-title{ color:#E8EDF3; /* on #0A1622 = 15.94 : 1 */ -webkit-text-fill-color:#E8EDF3; background-image:none; font-family:var(--mf-serif); font-weight:900; letter-spacing:-.02em; } body.home-page section.gx-hero .gx-toggle{ color:#E8EDF3; /* on #0A1622 = 15.94 : 1 */ border:1px solid #4A5A6B; border-radius:2px; background:transparent; } /* ── 13. 지면을 흰 종이로 못박으면서 어긋난 짝을 다시 맞춘다 ───────────── 1절에서 body.home-page 배경을 세 테마 모두 #FFFFFF 로 고정했다. 그러자 「배경이 투명이라 body 배경이 그대로 비치는」 부품 두 무리가 반전 테마에서 어긋났다. 실측으로 11곳이었다. · #ls-footer (legal-widget.css 21줄) — background:transparent, color:var(--onae-text-muted). 반전에서 #A7B2C2 가 흰 종이에 앉아 2.14 : 1. ·