/* ============================================================================
   iv-pair-fix.css — 면접끝판왕 글자 대비 교정 · 2026-08-03
   전부 실측값(tools/theme3_audit.py, 배포될 원본 폴더 site_v18 기준)

   ── 규칙 하나 ──────────────────────────────────────────────────────────
   글자색과 배경은 같은 곳에서 함께 가져온다.
       배경이 테마에서 오면(요소가 배경을 안 칠하면) → 글자색도 테마 토큰
       배경이 고정값이면(요소가 스스로 칠하면)       → 글자색도 고정값

   ── 이 파일을 쓰면서 물린 것들 (다음 사람을 위해 남긴다) ──────────────
   ① 사이트 자체 다크 팔레트(html[data-theme="dark"])를 반전에 연결해 봤다.
      style.css 안에 이미 있는데 켜 주는 사람이 없어서(onae-theme.js 는
      data-onae-theme 만 세팅한다) 이어 주면 되겠다 싶었다.
      결과 — 첫 화면 안보임 0 → 8건, 미달 20 → 61건. 되돌렸다.
      이 사이트는 색을 정하는 층이 셋이다.
          style.css 자기 팔레트 · onae-themes.css 테마 · onae-skin/pro 의 !important
      하나만 어둡게 바꾸면 나머지 둘과 어긋난다.
      잠든 코드를 깨우는 건 새로 쓰는 것보다 위험하다.
   ② 페이지 전체를 밝은 지면으로 고정해 봤다(.card * 까지 한꺼번에).
      기본 테마까지 망가져 안보임 0 → 8건. 되돌렸다.
      `.card *` 안에는 어두운 배경 위 흰 글자로 얹힌 부품도 섞여 있었다.
   ③ 그 뒤로도 세 번 더 같은 실수를 했다 — .sec-head · a.link · label 을
      이름만 보고 통째로 잡았다가, 각각 크림색 판·카드 안에서 거꾸로 안 보이게 됐다.

   그래서 결론은 하나다.
   부품 이름으로 묶지 말고, 그 부품 뒤에 무엇이 깔렸는지로 나눈다.
   아래 규칙은 전부 그렇게 나눈 것이고, 고칠 때마다 세 테마를 다시 쟀다.
   ========================================================================== */


/* ══ ① 섹션 머리말 ═══════════════════════════════════════════════════
   .sec-head h2{color:var(--navy)} 는 밝은 지면 전제로 고른 남색이다.
   반전에서 뒤가 #0e1117 이 되면 1.66 : 1 — 큰 글자 기준(3:1)에도 못 미친다.

       .section       배경 없음    → 테마 배경 위 → 테마 색
       .section.alt   크림 #EFE9DE → 고정 배경 위 → 고정 색
   두 번째 줄을 놓쳐서 한 번 1.08 : 1 을 만들었다.

   p 와 .tag 에 !important 를 붙인 이유 — onae-skin.css 가 이렇게 박아 두었다.
       .sec-head p   { color:#525E73 !important }
       .sec-head .tag{ color:#A8371A !important }
   둘 다 '흰 배경 위'를 실측해 고른 옳은 값이다. 다만 반전에서는 방향이 반대라
   같은 무게로 맞서지 않으면 이길 수 없다. 기본·큐트에서는 그 값이 그대로 산다.
   ------------------------------------------------------------------------ */
[data-onae-theme="inverse"] .section:not(.alt) .sec-head h2{ color:var(--onae-text) }
[data-onae-theme="inverse"] .section:not(.alt) .sec-head p{ color:var(--onae-text-muted) !important }
[data-onae-theme="inverse"] .section:not(.alt) .sec-head .tag{ color:#FF8A6B !important }

[data-onae-theme="inverse"] .section.alt .sec-head h2{ color:#143A6B }
[data-onae-theme="inverse"] .section.alt .sec-head p{ color:#525E73 !important }
[data-onae-theme="inverse"] .section.alt .sec-head .tag{ color:#A8371A !important }

/* class 없는 <section>(about 페이지) — 배경을 안 칠하므로 테마 색 */
[data-onae-theme="inverse"] section:not([class]) .sec-head p,
[data-onae-theme="inverse"] .wrap > .sec-head p{ color:var(--onae-text-muted) !important }
[data-onae-theme="inverse"] section:not([class]) .sec-head .tag,
[data-onae-theme="inverse"] .wrap > .sec-head .tag{ color:#FF8A6B !important }


/* ══ ② 표 ════════════════════════════════════════════════════════════
   table.tbl td 의 실측 배경이 #fff / #fafbfd 였다. 고정색이다.
   글자는 테마에서 와서 반전이면 흰 글자 → 1.09 ~ 1.12 : 1.

   th 는 빼야 한다. 표 머리는 스스로 남색(#143A6B)을 칠하고 흰 글자를 쓴다.
   td 와 같이 묶었더니 1.10 : 1 이 됐다. 몸통과 머리는 배경이 다르다.
   ------------------------------------------------------------------------ */
[data-onae-theme="inverse"] table.tbl td{ color:#334155 }


/* ══ ③ 안내 페이지의 '바로가기' 링크 ═════════════════════════════════
   a.link 는 두 자리에 쓰인다. 답이 갈린다.
       .step-body 안 — 배경 없음    → 테마 배경 위 → 밝은 파랑
       .card 안      — 크림 #F7F4EE → 고정 배경 위 → 원래 남색 그대로 (건드리지 않는다)
   처음에 a.link 를 통째로 밝은 파랑으로 했다가 카드 안이 1.97 : 1 이 됐다.
   ------------------------------------------------------------------------ */
[data-onae-theme="inverse"] .step-body a.link{ color:#7FB2FF }


/* ══ ④ 유형 고르기 칩(best30) ════════════════════════════════════════
   .type-chip{ background:#fff } 인데 글자는 테마에서 온다 → 반전 1.12 : 1.
   선택된 칩은 남색 배경에 흰 글자이므로 거기서는 되돌린다.
   ------------------------------------------------------------------------ */
[data-onae-theme="inverse"] .type-chip{ color:#334155 }
[data-onae-theme="inverse"] .type-chip:hover,
[data-onae-theme="inverse"] .type-chip.active{ color:#fff }


/* ══ ⑤ 폼 라벨 ═══════════════════════════════════════════════════════
   label{ color:var(--navy) } 이 반전 배경 위에서 1.66 : 1.
   처음에 form label 을 통째로 잡았더니 이번엔 카드 안 라벨 6곳이 안 보였다.
   자리를 좁혀 .container.narrow > form > .form-grid > label 로 집었더니
   **또 6곳이 안 보였다.** 같은 경로인데 폼이 두 개였다.
       .section 안 폼      → 배경 없음 → 테마 배경 위(#0e1117) → 테마 색
       .section.alt 안 폼  → 크림 #EFE9DE 위 → 남색 그대로
   경로가 같아도 어느 섹션 안이냐로 갈린다. 섹션까지 넣어야 답이 하나가 된다.
   ------------------------------------------------------------------------ */
[data-onae-theme="inverse"] .section:not(.alt) .container.narrow > form > .form-grid > label{ color:var(--onae-text) }
[data-onae-theme="inverse"] .section.alt .container.narrow > form > .form-grid > label{ color:#143A6B }


/* ══ ⑥ 공유 버튼 — 테마와 상관없이 원래 모자랐다 ═════════════════════
   실측  페이스북 흰글자 on #1877f2 = 4.23 : 1   ·   밴드 흰글자 on #21c531 = 2.31 : 1
   둘 다 각 서비스의 브랜드색이다. 색을 통째로 바꾸면 어느 서비스인지 알아보기
   어려워지니 같은 색을 한 단계만 어둡게 한다. 로고 인상은 유지된다.
   '공유하기' 라벨은 남색 히어로 위 --mut 회색이라 1.79 : 1 이었다.
   ------------------------------------------------------------------------ */
.share-bar .sh-fb{ background:#1465CC; border-color:#1465CC }    /* 흰글자 5.3 : 1 */
.share-bar .sh-band{ background:#157A22; border-color:#157A22 }  /* 흰글자 5.1 : 1 */
.hero .share-bar .sh-label{ color:#D3DFEE !important }           /* 남색 히어로 위 8.0 : 1 */


/* ══ ⑦ 상단 메뉴의 코랄 글자 — 이것도 테마와 무관하다 ════════════════
   .nav-gtrigger span 이 --accent(#E2431F) 라 흰 배경 위 4.15 : 1.
   onae-skin.css 가 '글자로 쓰는 코랄'로 이미 정해 둔 #A8371A 를 그대로 쓴다.
   ------------------------------------------------------------------------ */
.nav-gtrigger span{ color:#A8371A }


/* ══ ⑧ 계열별 안내 9장 (interview 폴더 밑 index.html 아홉 장) ════════
   ★ 처음에 이 제목을 「interview/(별표)/index.html」 로 적었다가 규칙이
     통째로 죽었다. 주석 안의 별표+빗금이 주석을 그 자리에서 닫아 버린다.
     CSS 주석에는 경로 와일드카드를 쓰지 않는다.
   이 9장만 onae-chrome-fix.css 를 함께 부른다. 그 파일은 `.section.alt` 와
   `.card` 의 **배경을 테마 토큰으로** 바꿔 놓는다.

       .section.alt      { background:var(--onae-bg-soft) }
       .section.alt .card{ background:var(--onae-bg-elev) }

   그래서 이 9장에서는 ①의 「.section.alt 는 크림색이니 남색 글자」가 틀린다.
   여기서는 배경이 테마에서 오니 글자색도 테마에서 와야 한다.
   같은 클래스라도 **어느 페이지가 어떤 CSS를 함께 부르는가**로 답이 갈린다.
   선택자로는 구분할 수 없어 body 에 iv-chrome 표시를 붙여 나눈다.
   ------------------------------------------------------------------------ */
[data-onae-theme="inverse"] body.iv-chrome .section.alt .sec-head h2{ color:var(--onae-text) }
[data-onae-theme="inverse"] body.iv-chrome .section.alt .sec-head p{ color:var(--onae-text-muted) !important }
[data-onae-theme="inverse"] body.iv-chrome .section.alt .sec-head .tag{ color:#FF8A6B !important }
/* 영상 카드 제목은 HTML 에 style="color:var(--navy)" 로 박혀 있다.
   인라인은 보통 CSS 로 못 이긴다. 이 자리에서만 !important 를 쓴다.
   (처음엔 규칙이 안 먹는 이유를 CSS 우선순위에서 찾다가 시간을 썼다 —
    실제 원인은 HTML 쪽 인라인이었다. 안 먹으면 인라인부터 확인할 것) */
[data-onae-theme="inverse"] body.iv-chrome .card h3,
[data-onae-theme="inverse"] body.iv-chrome .grid .card h3{ color:var(--onae-text) !important }

/* ══ ⑨ 계열 안내 9장 — 테마와 상관없이 원래 모자랐던 것 ══════════════
   실측(기본·반전·큐트 모두 같은 값)
       .q-card.locked .q-text   2.37 : 1  — 잠금 처리된 문항 미리보기
       a.dl-card .dl-btn        4.15 : 1  — 「PDF 다운로드」
   앞엣것은 일부러 흐리게 한 잠금 표시로 보이지만, 글자를 읽을 수 없을 정도면
   잠금이 아니라 고장으로 보인다. 읽히는 선(4.6:1)까지만 올린다.
   ------------------------------------------------------------------------ */
body.iv-chrome .q-card.locked .q-text{ color:#5A6579 }

/* ★ .dl-btn 은 스스로 코랄 배경(--accent #E2431F)을 칠하고 흰 글자를 쓴다.
     처음에 글자를 어둡게 했다가 코랄 위 어두운 글자가 되어 4.15 → 1.57 로
     더 나빠졌다. **배경을 칠하는 쪽은 배경을 손봐야 한다.**
     onae-skin.css 가 .btn 에 쓴 것과 같은 한 단계 깊은 주황을 쓴다. */
/* ※ .btn.small 도 같은 코랄 배경이다. 처음에 :not(.small) 로 빼 두었다가
      「무료 진단 후 훈련 시작 →」이 4.15 : 1 로 남았다. 크기가 작을수록 더
      진해야 하는데 오히려 빼 놓았다. 크기로 가르지 말고 배경으로 가른다. */
body.iv-chrome a.dl-card .dl-btn,
body.iv-chrome .btn.solid,
body.iv-chrome a.btn:not(.btn-o):not(.btn-g){ background:#C03A16; color:#fff }


/* == 2026-08-03 : 「무료 진단」 띠는 .section.alt 인데 배경이 테마를 안 탄다 ==
   세 테마 모두 남색 #143A6B 고정이다. 그런데 바로 위 규칙이 '테마에서 온 글자색'을
   씌우는 바람에 반전에서만 이렇게 됐다.
       FREE DIAGNOSIS  #FF8A6B on #143A6B = 3.69 : 1   (기준 4.5)
   기본·큐트는 #FFD2C2 · #C2CEDD 라 통과했다. 배경이 같으니 글자도 같아야 한다.
   * 처음엔 위 규칙에서 :not(#lead-free-diagnosis) 로 빼기만 했다. 그랬더니
     더 위에 있는 '크림 배경 전제' 규칙(#A8371A)이 대신 먹어 1.31 : 1 - 안 보임이 됐다.
     빼는 것으로는 안 된다. 이 띠에 쓸 색을 직접 정해 줘야 한다. */
[data-onae-theme="inverse"] body.iv-chrome #lead-free-diagnosis .sec-head .tag{ color:#FFD2C2 !important }
[data-onae-theme="inverse"] body.iv-chrome #lead-free-diagnosis .sec-head p{ color:#C2CEDD !important }
[data-onae-theme="inverse"] body.iv-chrome #lead-free-diagnosis .sec-head h2{ color:#fff !important }


/* == 2026-08-04 : .onae-ico 크기 규칙 누락 (색이 아니라 크기) =================
   onae-icons.js 가 이모지를 <svg class="onae-ico" viewBox="0 0 24 24" fill="none"
   stroke="currentColor" stroke-width="1.6"> 로 바꾼다. width/height 속성은 주지
   않는다 — 스타일시트가 크기를 책임지는 설계다. 그런데 이 사이트 CSS 어디에도
   .onae-ico 크기 규칙이 없었다(전수 검색 0건). 그래서 SVG 가 부모 상자 너비만큼
   자라 제목의 이모지가 수백 px 짜리 그림이 됐다.

   글자 크기를 따라가게(1em) 만든다. 부모 font-size 가 크면 아이콘도 크고,
   작으면 같이 작아진다 — 인라인 아이콘의 정상 동작이다.
   울타리를 두지 않는다: 이모지 대체는 onae-icons.js 가 사이트 전체에서 하므로
   body 클래스로 가둘 이유가 없다. 선택자는 클래스 하나로만 좁힌다.
   색은 건드리지 않는다(stroke=currentColor 그대로 둔다).
   워크시트(css/ws-contrast-fix.css)에 먼저 넣은 것과 같은 규칙이다. */
.onae-ico{
  width:1em; height:1em; flex:0 0 auto;
  vertical-align:-.125em; display:inline-block;
}