/* ============================================================================
   onae-chrome-fix.css — 머리말·꼬리말·버튼의 대비 미달만 고친다
   생성 2026-08-03

   ■ 무엇을 고치나
     로고 강조글자, 로그인 버튼, 히어로 라벨·보조문구·CTA, 섹션 라벨, 빵부스러기.
     전부 **모든 페이지에 똑같이 있는 부분**이고, 전부 원래부터 4.5:1 미만이었다.
     (2026-08-03 tools/contrast_audit.py 실측 — /tracks/(계열)/ 에서 미달 13건)

   ■ 무엇을 안 고치나
     색 변수 체계는 건드리지 않는다.
     이 사이트는 style.css(고정값)와 onae-themes.css(테마별)가 따로 놀고 있어서
     .section.alt 같은 곳이 inverse 테마에서 1.08:1 로 깨진다.
     그걸 잇는 파일은 onae-theme-bridge.css 로 따로 두었다 —
     그건 헤더·푸터·카드 배경까지 같이 흔들기 때문에
     **6개 사이트를 한 번에 검사한 뒤에** 넣어야 한다. 이 파일은 그 전에 넣어도 안전하다.

   ■ 넣는 자리
     style.css 뒤. 사이트 CSS 중 마지막.
   ========================================================================== */

/* --------------------------------------------------------------------------
   기본(default) 테마에서 원래 있던 대비 미달 — 테마와 무관하게 원래 낮았다.
   실측값을 주석에 남긴다. 고친 뒤 값이 아니라 '왜 이 값인지'를 남겨야
   다음 사람이 되돌리지 않는다.
   -------------------------------------------------------------------------- */

/* .hero .eyebrow — 3.58 : 1 이었다. 히어로 배경(진한 남색) 위 연한 주황.
   글자를 밝게 올리고 테두리로 형태를 유지한다. */
.hero .eyebrow{
  color:#FFD2C2;                     /* on #143A6B : 8.6:1 */
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.34);
}

/* .hero .sub-note — 4.38 : 1. 흰색의 62% 였다. 78% 로 올린다. */
.hero .sub-note{ color:rgba(255,255,255,.86); }

/* .logo b — 4.15 : 1. 로고 강조 글자가 accent 였다.
   로고는 링크라 색으로만 구분할 이유가 없다. 굵기로 구분한다. */
.site-header .logo b{ color:inherit; font-weight:900; }

/* .btn.small (로그인·베타) — 2.49 : 1. accent 배경 위 흰 글자가 아니라
   투명 배경 위 accent 글자였다. 배경을 채워 대비를 만든다. */
.gnb a.btn.small{
  background:var(--onae-brand, #143A6B);
  color:var(--onae-on-brand, #ffffff);
  border:1px solid transparent;
}
.gnb a.btn.small:hover{ background:var(--onae-brand-strong, #0E2A50); }

/* .btn.big (히어로 CTA) — 4.15 : 1. accent(#E2431F) 위 흰 글자.
   accent 를 한 단계 진하게 쓴다. 색상은 유지, 명도만 내린다. */
.btn.big{ background:#C6371A; }            /* on #ffffff 글자 : 5.4:1 */
.btn.big:hover{ background:#A82C13; }
/* ★ 처음엔 .hero .btn.big 만 고쳤다가, 본문 한가운데 있는 CTA 가 그대로 남아
   4.15:1 로 걸렸다. 같은 버튼이면 어디 있든 같은 색이어야 한다. */

/* .sec-head .tag — 3.71~4.15 : 1. 섹션 라벨. 배경 없는 accent 글자였다.
   알약 배경을 깔아 대비를 확보한다. */
.sec-head .tag{
  display:inline-block; padding:3px 10px; border-radius:999px;
  background:var(--onae-bg-soft, #F3ECDD);
  color:var(--onae-text, #334155);
  border:1px solid var(--onae-border, #E2E5EB);
}

/* breadcrumb — 4.14 : 1. 인라인 style 로 #6b7785 가 박혀 있어
   여기서 덮어쓴다. HTML 을 고치지 않고 CSS 로 잡는 이유는
   같은 인라인 스타일이 수십 장에 흩어져 있기 때문이다. */
/* ★ 여기서 lint 를 한 번 잘못 믿었다 (2026-08-03)
   theme_pair_lint 가 "배경 짝이 없다" 고 잡길래 고정색으로 되돌렸더니
   inverse 테마에서 **1.66 : 1** 로 더 나빠졌다. 확인해 보니 —

     onae-themes.css :  .onae-themed { background: var(--onae-bg); color: var(--onae-text); }

   **body 배경은 이미 테마를 따라가고 있었다.** 다른 파일에 있어서 lint 가 못 봤을 뿐이다.
   lint 문서에 적어 둔 한계 그대로다 — "다른 CSS 파일이 배경을 어떻게 칠하는지는 모른다."
   그래서 여기는 테마 색이 맞다. 되돌린다.

   교훈 : lint 는 '보라'고 알려 줄 뿐 '고쳐라'가 아니다.
   최종 판단은 언제나 contrast_audit 의 실측이다. */
nav[aria-label="breadcrumb"]{ color:var(--onae-text-muted, #55606f)!important; }
nav[aria-label="breadcrumb"] a{ color:var(--onae-brand, #143A6B); text-decoration:underline; }

/* .sec-head h2 — inverse 에서 1.66 : 1. --navy 가 앰버로 바뀌면서
   밝은 배경 위에 놓였다. 제목은 본문색으로 두고 강조는 굵기로 한다. */
.sec-head h2{ color:var(--onae-text, #143A6B); }

/* --------------------------------------------------------------------------
   .section.alt — 배경만 크림색으로 고정돼 있어 테마를 안 따라간다.
   inverse 테마에서 밝은 글자가 크림색 위에 놓여 **1.08 : 1**, 글이 사라진다.
   (2026-08-03 /tracks/ 계열 페이지에서 소제목 2곳 실측)

   변수 체계 전체를 잇는 건 위험이 커서 미뤘다(_검토/onae-theme-bridge.css).
   여기서는 **이 한 클래스의 배경과 글자색만** 테마를 따라가게 한다.
   기본 테마에서는 값이 그대로여서 화면이 바뀌지 않는다.
   -------------------------------------------------------------------------- */
.section.alt{ background:var(--onae-bg-soft, #EFE9DE); }
.section.alt .sec-head h2,
.section.alt h2, .section.alt h3,
.section.alt p, .section.alt li,
.section.alt .card, .section.alt .card p, .section.alt .card h3{
  color:var(--onae-text, #334155);
}
.section.alt .card{ background:var(--onae-bg-elev, #fff); border-color:var(--onae-border, #E2E5EB); }

/* --------------------------------------------------------------------------
   나머지 낱개 미달 — 트랙 페이지 9장에 공통으로 있던 것들.
   2026-08-03 실측값을 각각 주석에 남긴다.
   -------------------------------------------------------------------------- */

/* .beta-nav — 2.04 : 1. 노랑→주황 그라디언트 위 흰 글자였다.
   그라디언트는 그대로 두고 글자를 어둡게 뒤집는다(그라디언트 밝은 쪽 #f5b841 위 9.9:1). */
.gnb a.btn.small.beta-nav{ color:#2A1A00!important; font-weight:800; }

/* #lead-free-diagnosis .tag — 3.54 : 1. 진한 남색 밴드 위 연한 주황.
   밴드 안이라 배경을 밝게 못 쓴다. 글자만 밝게 올린다. */
#lead-free-diagnosis .sec-head .tag{
  color:#FFD2C2; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.34);
}

/* .q-card .q-answer — 3.99 : 1. 연한 파랑 배경 위 #26415e.
   문항 해설이라 본문만큼 중요하다. 글자를 본문색으로 내린다. */
.q-card .q-answer{ color:var(--onae-text, #14181f); }
.q-card .q-answer b{ color:var(--onae-text, #14181f); }

/* .card p — 4.34 : 1. 카드 본문이 --mut(회색)이었다.
   제목만 진하고 설명이 흐리면 정작 읽어야 할 쪽이 안 읽힌다. */
.card p{ color:var(--onae-text, #334155); }
.card.link p{ color:var(--onae-text, #334155); }

/* ★ 위 두 규칙을 넣자마자 inverse 테마에서 1.02 : 1 이 새로 생겼다 (2026-08-03).
   원인은 분명하다 — **글자색만 테마를 따라가게 하고 배경은 그대로 뒀기 때문**이다.
   .q-answer 의 배경은 --blue-soft(연한 파랑 고정), .card 의 배경은 --bg(크림 고정)였다.
   같은 실수를 .section.alt 에서 이미 한 번 했다.

   규칙으로 적어 둔다 : **글자색을 테마 변수로 바꿀 거면 배경도 같이 바꾼다.**
   둘 중 하나만 바꾸면 반드시 어느 테마에선가 글자가 사라진다. */
.q-card .q-answer{
  background:var(--onae-bg-soft, #EAF0FA);
  border:1px solid var(--onae-border, transparent);
}
.card, .card.link{
  background:var(--onae-bg-elev, #FFFFFF);
  border-color:var(--onae-border, #E2E5EB);
}
.card h3{ color:var(--onae-text, #143A6B); }

/* .sec-head p — 3.97 : 1. 섹션 설명문이 --mut(회색)이었다.
   제목 아래 첫 문장이라 실제로 가장 많이 읽히는 자리다. 본문색으로 올린다.
   (다크 밴드 안의 #lead-free-diagnosis 는 style.css 가 따로 지정하므로 건드리지 않는다) */
.sec-head p{ color:var(--onae-text, #334155); }
#lead-free-diagnosis .sec-head p{ color:#DCE5F0; }   /* 진한 남색 위 — 5.9:1 */

/* --------------------------------------------------------------------------
   마지막 남은 낱개들 — 2026-08-03 실측
   -------------------------------------------------------------------------- */

/* .q-answer.small — 4.25 : 1. '준비 포인트' 해설 글이다. 이 사이트에서
   실제로 가장 값이 나가는 문장인데 가장 흐렸다. 크기가 작으니 색을 더 올린다. */
.q-card .q-answer.small{ color:var(--onae-text, #14181f); }

/* .gnb a.active — 3.62 : 1. 현재 메뉴 표시가 accent 글자 + accent 연한 배경이었다.
   같은 계열 색끼리는 대비가 안 난다. 배경을 진하게 채우고 글자를 흰색으로 뒤집는다. */
.gnb a.active{
  background:var(--onae-brand, #143A6B);
  color:var(--onae-on-brand, #ffffff);
}

/* .badge.paid — 3.62 : 1. 위와 같은 이유(accent 위 accent). 12px 이라 더 나쁘다. */
.badge.paid{
  background:var(--onae-brand, #143A6B);
  color:var(--onae-on-brand, #ffffff);
}

/* .btn (accent 배경) — 4.15 : 1. 히어로 밖 버튼까지 전부 같은 색으로 맞춘다.
   .btn.sec / .btn.small 은 위에서 따로 잡았으므로 제외한다. */
.btn:not(.sec):not(.small){ background:#C6371A; color:#ffffff; }
.btn:not(.sec):not(.small):hover{ background:#A82C13; }

/* .tier-card p.small — 4.15 : 1. 가격 밑 안내 문구. 돈 얘기는 흐리면 안 된다. */
.tier-card p.small{ color:var(--onae-text, #334155); }

/* ★★ 같은 실수 세 번째 (2026-08-03) — 이번엔 .tier-card 였다.
   p.small 글자색만 테마 변수로 바꾸고 카드 배경(#fff 고정)은 그대로 뒀다.
   inverse 테마에서 흰 배경 위 밝은 글자 → **1.12 : 1**, 요금제 설명이 사라졌다.

   세 번을 같은 이유로 틀렸으니 더는 기억에 맡기지 않는다.
   tools/theme_pair_lint.py 를 만들어 **이 파일을 기계로 검사**한다.
   규칙 : 글자색을 --onae-* 로 바꾼 선택자는 배경도 --onae-* 로 바꿔야 한다. */
.tier-card{
  background:var(--onae-bg-elev, #ffffff);
  border-color:var(--onae-border, #E2E5EB);
}
.tier-card h3, .tier-card li, .tier-card .price,
.tier-card .tier-price, .tier-card .tier-name{ color:var(--onae-text, #334155); }