/* ============================================================================
   faq-pair-fix.css — 고객문의(FAQ) 위젯 대비 교정 · 2026-08-03
   여섯 사이트가 같은 faq-widget.css 를 쓴다(해시 동일). 그래서 고치는 것도 한 번이다.

   무슨 일이 있었나
     faq-widget.css 는 색을 이렇게 쓴다.
        .faq-widget { color: var(--text, #334155) }
        .faq-title  { color: var(--text-strong, #0F172A) }
     사이트가 --text / --text-strong 을 정의하지 않으면 뒤의 고정값이 쓰인다.
     즉 **어두운 남색 글자**다. 밝은 배경을 전제로 고른 값이다.

     반전(inverse) 테마에서는 뒤 배경이 #0e1117 로 바뀐다. 글자는 그대로 남색이다.
     실측 1.06 : 1 — 면접 첫 화면에서만 63곳이 안 보였다. 대부분 FAQ 질문 문장이다.
     결제·환불·로그인 문제를 묻는 자리라, 여기가 안 보이면 문의가 그대로 이탈이다.

   고치는 법 — 글자색과 배경을 같은 곳에서 함께 가져온다
     ① 위젯 바탕이 테마 배경 위에 그냥 얹히는 부분
        → --text / --text-strong 을 **테마 토큰으로 연결**한다.
          변수 하나만 바꾸면 위젯 안 모든 규칙이 따라온다(원인을 고치는 방법).
     ② 위젯 안에서 배경을 직접 흰색(#fff)으로 칠하는 부품
        (검색창 · 아코디언 본문 · 모달 · 카드)
        → 그 안에서는 다시 **고정 어두운 글자**로 되돌린다. 배경이 고정이니까.
   ========================================================================== */

/* ① 2026-08-04 갱신 — 위젯이 자기 배경을 확정했다. 그래서 여기도 고정색으로 바꾼다.
   원래 이 블록은 "위젯 바탕이 테마 배경 위에 그냥 얹힌다"는 전제로 --text 를
   테마 토큰에 연결했다. 그 전제가 오늘 깨졌다.
   위젯이 어두운 푸터 안에 놓이는 사이트(공부 footer.site-foot, AI교과서
   .site-footer)가 있어 테마만으로는 맞출 수가 없다. 그래서 공용 faq-widget.css 가
   .faq-widget/.inbox-widget 에 background:#FFFFFF 를 직접 칠하도록 바꿨다.

   배경이 고정색이 되었으니 이 자리의 토큰도 고정색이어야 한다.
   그대로 두면 반전 테마에서 흰 카드 위에 #A7B2C2 밝은 글자가 얹혀 1.71 : 1 이 된다
   (바로 이 파일 ⑤가 경고하던 사고와 같은 모양이다).
     #334155 on #FFFFFF = 10.35 : 1 · #0F172A on #FFFFFF = 17.85 : 1 */
body.onae-themed .faq-widget,
body.onae-themed .inbox-widget,
body.onae-themed #cs-faq-widget{
  --text:        #334155;
  --text-strong: #0F172A;
  --border:      #E2E5EB;
  --surface:     #F7F8FA;
}

/* ② 위젯이 스스로 밝은 배경을 칠하는 부품 — 여기서는 고정 어두운 글자로 되돌린다.
      배경이 고정이면 글자색도 고정. 이게 짝 맞추기다.

   ★ 이 목록은 손으로 고르지 않았다. faq-widget.css 를 읽어 background 가
     #fff · white · var(--surface) 인 규칙의 선택자를 **전부 뽑아냈다.**
     처음에는 눈에 띄는 네 개(.faq-search .faq-a .faq-modal .inbox-card)만 넣었는데,
     빠진 .faq-tab · .faq-phone-block · .faq-q-icon 에서 2.14 : 1, 1.52 : 1 이 나왔다.
     **기억으로 목록을 만들면 반드시 빠진다. 파일에서 뽑아야 한다.**
     faq-widget.css 에 밝은 배경을 쓰는 규칙을 새로 넣으면 여기에도 추가할 것.
   ------------------------------------------------------------------------ */
body.onae-themed .faq-a,
body.onae-themed .faq-a *,
body.onae-themed .faq-btn-outline,
body.onae-themed .faq-btn-outline *,
body.onae-themed .faq-gate-item,
body.onae-themed .faq-gate-item *,
body.onae-themed .faq-gate-modal,
body.onae-themed .faq-gate-modal *,
body.onae-themed .faq-modal,
body.onae-themed .faq-modal *,
body.onae-themed .faq-phone-block,
body.onae-themed .faq-phone-block *,
body.onae-themed .faq-q-icon,
body.onae-themed .faq-q-icon *,
body.onae-themed .faq-search,
body.onae-themed .faq-search *,
body.onae-themed .faq-selfservice-btn,
body.onae-themed .faq-selfservice-btn *,
body.onae-themed .faq-tab,
body.onae-themed .faq-tab *,
body.onae-themed .inbox-answer,
body.onae-themed .inbox-answer *,
body.onae-themed .inbox-card,
body.onae-themed .inbox-card *,
body.onae-themed .inbox-guest-form,
body.onae-themed .inbox-guest-form *,
body.onae-themed .inbox-ticket-body,
body.onae-themed .inbox-ticket-body *,
body.onae-themed .inbox-ticket-head,
body.onae-themed .inbox-ticket-head *{
  --text:        #334155;
  --text-strong: #0F172A;
  --border:      #E2E5EB;
  --surface:     #F7F8FA;
  color:#0F172A;
}
/* 답변 본문은 제목보다 한 톤 연하게 — 원래 디자인 그대로 */
body.onae-themed .faq-a,
body.onae-themed .faq-a *,
body.onae-themed .inbox-answer,
body.onae-themed .inbox-answer *{ color:#334155 }

/* ── ③ 페이지가 위젯 부품에 자기 배경을 덧칠하는 경우 ────────────────
   같은 부품이라도 페이지마다 뒤 색이 다르다. 실제로 이렇게 갈렸다.

     첫 화면(index.html)  .faq-item 에 배경 없음 → 테마 배경이 비친다 → 테마색이 맞다
     FAQ 페이지(faq/)     페이지 <style> 이 .faq-item{background:#fff} 로 덧칠 → 고정색이 맞다

   ①만 넣었더니 첫 화면 63건은 사라졌는데 FAQ 페이지가 7건 → 69건으로 늘었다.
   **부품 이름만 보고 정하면 안 된다. 그 부품 뒤에 무엇이 깔렸는지를 봐야 한다.**

   두 페이지 다 #cs-faq-widget 으로 감싸고 있어서 선택자로는 구분이 안 된다.
   그래서 **덧칠하는 페이지의 body 에 표시(faq-doc)를 붙여** 구분한다.
   앞으로 .faq-item 에 밝은 배경을 칠하는 페이지를 만들면 body 에 faq-doc 을 붙이면 된다. */
body.onae-themed.faq-doc .faq-item,
body.onae-themed.faq-doc .faq-item *{
  --text:        #334155;
  --text-strong: #0F172A;
  color:#0F172A;
}
body.onae-themed.faq-doc .faq-a,
body.onae-themed.faq-doc .faq-a *{ color:#334155 }

/* ── ④ 페이지 자신의 제목이 테마 배경 위에 있을 때 ────────────────────
   FAQ 페이지의 분류 제목(.faq-category h2)과 위젯 제목(.faq-title)은
   배경을 칠하지 않는다. 뒤에 깔린 것이 테마 배경이므로 글자색도 테마에서 온다.
   faq-doc 표시가 붙은 페이지라도 이 자리만은 예외다 —
   **표시는 페이지 단위지만 색은 자리 단위로 정해야 한다.** */
body.onae-themed .faq-content > .faq-category > h2,
body.onae-themed .faq-help-block > .faq-title{
  color:var(--onae-text, #16314F);
}

/* ── ⑤ 활성 탭은 스스로 어두운 배경을 칠한다 ─────────────────────────
   .faq-tab.is-active{ background:var(--brand,#143A6B); color:#fff }
   ②의 목록에 .faq-tab 을 넣었더니 활성 탭의 흰 글자까지 어둡게 덮어
   1.57 : 1 이 됐다. 어두운 배경을 칠하는 상태는 ②에서 빼 준다. */
body.onae-themed .faq-tab.is-active,
body.onae-themed .faq-tab.is-active *{ color:#fff }

/* ── ⑥ 문의하기 버튼 — 테마와 무관하게 원래 모자랐다 ─────────────────
   .faq-btn-primary{ background:var(--accent,#E2431F); color:#fff } → 4.15 : 1.
   16px 본문 기준은 4.5 : 1 이다. 세 테마 전부에서 걸렸다. 테마 문제가 아니라
   원래 모자랐던 것이고, 이번에 재면서 드러났다.
   onae-skin.css 가 .btn 에 쓴 것과 같은 계열의 한 단계 깊은 주황을 쓴다. */
body.onae-themed .faq-btn-primary,
body.onae-themed #faq-inquire-btn{
  background:#C03A16;
  border-color:#A63213;
}