/* ============================================================================
   onae-insight.css — 면접끝판왕 /insight/ 전용 레이아웃
   생성 2026-08-03 · 개정 2026-08-03(토큰 체계 교정)

   ■ 왜 별도 파일인가
     인사이트 글은 트랙 페이지와 성격이 다르다. 본문이 **표와 근거**다.
     style.css 에 섞으면 다른 페이지의 표까지 같이 변한다. 그래서 분리한다.

   ■ ★ 처음에 틀렸던 것 (기록해 둔다)
     이 사이트에는 색 변수 체계가 **두 벌** 있다.
       ① style.css      : --navy --ink --mut --card --line      (정적. 라이트 값 고정)
       ② onae-themes.css: --onae-brand --onae-text --onae-bg-elev …
                          [data-onae-theme="default|inverse|cute"] 로 실제로 바뀐다
     onae-theme.js 가 실제로 세우는 속성은 **data-onae-theme** 하나뿐이다.
     style.css 안의 html[data-theme="dark"] 규칙은 그 속성을 아무도 세우지 않아
     지금은 동작하지 않는다.

     처음 이 파일을 ①로 썼다가 inverse 테마에서 표 숫자가 **1.16 : 1** 로
     안 보이게 됐다. 배경만 테마를 따라가고 글자색은 안 따라갔기 때문이다.
     그래서 전부 ②로 다시 썼다. ①은 폴백 값으로만 남긴다.

   ■ 지킨 규칙
     · 색은 --onae-* 를 먼저 쓰고, 없을 때만 style.css 변수 → 고정값으로 떨어진다.
     · 클래스 이름은 .ins- 접두사로 고정한다. 기존 클래스와 겹치지 않는다.
     · 유일한 예외 .callout 은 style.css 에 같은 이름이 없음을 확인하고 썼다.
     · 검사: tools/contrast_audit.py 로 default / inverse / cute 세 테마를 모두 통과해야 한다.
   ========================================================================== */

/* 이 파일 안에서만 쓰는 짧은 이름. 매번 3중 폴백을 적지 않기 위해서다. */
.ins-scope, .section .container.narrow, .ins-cards{
  --i-text:   var(--onae-text,        var(--ink,   #334155));
  --i-muted:  var(--onae-text-muted,  var(--mut,   #55606f));
  --i-line:   var(--onae-border,      var(--line,  #dde3ec));
  --i-elev:   var(--onae-bg-elev,     #ffffff);
  --i-soft:   var(--onae-bg-soft,     #f5f7fb);
  --i-brand:  var(--onae-brand,       var(--navy,  #1b4fd8));
  --i-onbrand:var(--onae-on-brand,    #ffffff);
  --i-accent: var(--onae-accent,      #0f766e);
}

/* ---- ① 본문 리듬 ---------------------------------------------------------- */
.section .container.narrow > p{
  font-size:1.02rem; line-height:1.85; color:var(--i-text); margin:0 0 16px;
}
.section .container.narrow > h3{
  font-size:1.15rem; color:var(--i-text); margin:30px 0 12px;
  letter-spacing:-.01em; font-weight:800;
}
/* 제목 왼쪽에 브랜드색 막대. 색을 글자에 쓰면 테마별 대비가 흔들려서
   글자는 본문색 그대로 두고 장식만 브랜드색으로 뺐다. */
.section .container.narrow > h3::before{
  content:""; display:inline-block; vertical-align:middle;
  width:4px; height:1em; margin-right:9px; border-radius:2px;
  background:var(--i-brand);
}

/* ---- ② 짚고 넘어가는 상자 -------------------------------------------------- */
.callout{
  margin:22px 0; padding:16px 20px;
  border-left:4px solid var(--i-brand);
  border-radius:0 10px 10px 0;
  background:var(--i-soft);
  color:var(--i-text); line-height:1.8; font-size:.98rem;
}

/* ---- ③ 집계표 ------------------------------------------------------------- */
.ins-table{
  width:100%; border-collapse:collapse; margin:18px 0 10px;
  font-size:.95rem;
  background:var(--i-elev); color:var(--i-text);
  border:1px solid var(--i-line); border-radius:12px; overflow:hidden;
}
.ins-table caption{
  caption-side:top; text-align:left;
  font-size:.85rem; color:var(--i-muted); padding:0 2px 10px; font-weight:600;
}
.ins-table th, .ins-table td{
  padding:11px 13px; border-bottom:1px solid var(--i-line);
  text-align:right; color:var(--i-text);
}
.ins-table thead th{
  background:var(--i-brand); color:var(--i-onbrand);
  font-weight:700; font-size:.88rem; border-bottom:none; text-align:right;
}
.ins-table thead th:first-child,
.ins-table tbody th{ text-align:left; }
.ins-table tbody th{ font-weight:800; }
.ins-table tbody tr:last-child th,
.ins-table tbody tr:last-child td{ border-bottom:none; }
.ins-table tbody tr:nth-child(even){ background:var(--i-soft); }
/* 강조 숫자 — 색만으로 강조하면 테마마다 대비가 달라진다. 굵기로 강조하고
   색은 본문색을 유지한다. */
.ins-table b{ color:var(--i-text); font-weight:900; }

@media (max-width:640px){
  .ins-table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ---- ④ 순서가 있는 준비 절차 ---------------------------------------------- */
.ins-steps{ list-style:none; counter-reset:s; margin:18px 0; padding:0; }
.ins-steps li{
  counter-increment:s; position:relative;
  padding:14px 16px 14px 54px; margin-bottom:10px;
  background:var(--i-elev); border:1px solid var(--i-line);
  border-radius:12px; line-height:1.8; font-size:.98rem; color:var(--i-text);
}
.ins-steps li::before{
  content:counter(s);
  position:absolute; left:16px; top:14px;
  width:26px; height:26px; border-radius:50%;
  background:var(--i-brand); color:var(--i-onbrand);
  font-size:.82rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* ---- ⑤ 목록 --------------------------------------------------------------- */
.ins-list{ margin:16px 0; padding-left:0; list-style:none; }
.ins-list li{
  position:relative; padding:9px 0 9px 22px;
  border-bottom:1px dashed var(--i-line);
  line-height:1.8; color:var(--i-text); font-size:.98rem;
}
.ins-list li:last-child{ border-bottom:none; }
.ins-list li::before{
  content:""; position:absolute; left:4px; top:19px;
  width:7px; height:7px; border-radius:2px; background:var(--i-brand);
}

/* ---- ⑥ 출처 블록 ---------------------------------------------------------- */
/* 이 구간은 rewrite_guard 검사에서 제외된다(<!--cite--> 로 감싼다).
   출처는 원문과 글자가 같아야 출처 구실을 하기 때문이다. 대신 눈에 띄게 둔다. */
.ins-src{ margin:6px 0; padding-left:0; list-style:none; }
.ins-src li{
  padding:11px 14px; margin-bottom:8px;
  background:var(--i-elev); border:1px solid var(--i-line);
  border-left:3px solid var(--i-brand);
  border-radius:0 9px 9px 0;
  font-size:.92rem; line-height:1.75; color:var(--i-text);
}
.ins-src b{ color:var(--i-text); font-weight:800; }

/* ---- ⑦ 인사이트 목록(허브) ------------------------------------------------ */
.ins-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px; margin:20px 0;
}
.ins-card{
  display:block; padding:20px 22px;
  background:var(--i-elev); border:1px solid var(--i-line);
  border-radius:14px; color:var(--i-text);
  transition:border-color .15s ease, transform .15s ease;
}
.ins-card:hover{ border-color:var(--i-brand); transform:translateY(-2px); }
.ins-card .k{
  display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.04em;
  color:var(--i-text); margin-bottom:8px;
  padding:3px 9px; border-radius:999px;
  background:var(--i-soft); border:1px solid var(--i-line);
}
.ins-card h3{
  font-size:1.06rem; color:var(--i-text); margin:0 0 8px; line-height:1.5;
  letter-spacing:-.01em; font-weight:800;
}
.ins-card p{ font-size:.94rem; color:var(--i-text); line-height:1.7; margin:0; }
.ins-card .d{ display:block; margin-top:12px; font-size:.82rem; color:var(--i-muted); }

/* ---- ⑧ 테마를 따라가는 띠 배경 --------------------------------------------
   ★ 왜 .section.alt 를 안 쓰는가 (2026-08-03)

   style.css 의 .section.alt 는 background:var(--cream) — 크림색 #EFE9DE 고정이다.
   테마를 inverse 로 바꾸면 글자만 밝아지고 배경은 크림색 그대로 남아
   **대비 1.08 : 1** 이 된다. 실측으로 확인했다. 글이 아예 안 보인다.

   이건 인사이트 페이지만의 문제가 아니라 사이트 전체의 문제라서,
   따로 onae-theme-bridge.css 를 만들어 두었다. 다만 그 파일은 헤더·푸터·카드까지
   같이 흔들기 때문에 6개 사이트를 한 번에 검사한 뒤에 넣어야 한다.
   그때까지 인사이트 페이지는 **자기 띠 배경을 직접 갖는다.**
   -------------------------------------------------------------------------- */
.ins-band{
  background:var(--onae-bg-soft, #f5f7fb);
  border-top:1px solid var(--onae-border, #dde3ec);
  border-bottom:1px solid var(--onae-border, #dde3ec);
}
.ins-band .sec-head h2,
.ins-band h3,
.ins-band p,
.ins-band li,
.ins-band b{ color:var(--onae-text, #14181f); }
.ins-band .sec-head .tag{
  display:inline-block; padding:3px 10px; border-radius:999px;
  background:var(--onae-bg-elev, #fff);
  color:var(--onae-text, #14181f);
  border:1px solid var(--onae-border, #dde3ec);
}
/* 흰 구간(.section) 쪽도 제목·라벨을 테마색으로 맞춘다 */
.section .container.narrow .sec-head h2{ color:var(--onae-text, #14181f); }
.section .container.narrow .sec-head .tag{
  display:inline-block; padding:3px 10px; border-radius:999px;
  background:var(--onae-bg-soft, #f5f7fb);
  color:var(--onae-text, #14181f);
  border:1px solid var(--onae-border, #dde3ec);
}

/* ---- ⑨ 교재 코어 목차 ------------------------------------------------------
   트랙 페이지에서 「면접끝판왕」 교재가 그 계열을 어떻게 나눠 다루는지 보여 준다.
   학과 이름이 많아 목록이 길어지므로 격자로 깐다. */
.core-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:8px; list-style:none; margin:14px 0 18px; padding:0;
}
.core-grid li{
  padding:9px 13px; font-size:.92rem; line-height:1.45;
  background:var(--onae-bg-soft, #f5f7fb);
  border:1px solid var(--onae-border, #dde3ec);
  border-radius:9px; color:var(--onae-text, #14181f);
}
/* ★ theme_pair_lint 가 잡았다 — 배경을 같이 못 주는 자리라 배경도 함께 준다.
   글자색만 테마에 맡기면 어느 테마에선가 사라진다. 오늘 세 번 겪었다. */
.core-note{
  margin-top:16px; padding:11px 15px;
  background:var(--onae-bg-soft, #f5f7fb);
  border-left:3px solid var(--onae-border, #dde3ec);
  border-radius:0 8px 8px 0;
  font-size:.92rem; line-height:1.7;
  color:var(--onae-text, #14181f);
}

/* ---- ⑩ 본문 안 링크 --------------------------------------------------------
   .callout 안에 링크를 넣었더니 inverse 테마에서 **1.52 : 1** 이 됐다.
   style.css 의 링크색 --blue 가 고정값(#2E5FD0)이라 어두운 배경을 못 따라간다.
   같은 실수를 또 한 것이라, 이번에는 링크색도 테마 변수로 바꾼다.
   (밑줄을 함께 둔다 — 색만으로 링크를 알리면 대비가 낮을 때 링크인지도 모른다) */
.callout a,
.section .container.narrow > p a,
.ins-list a, .ins-steps a{
  color:var(--onae-brand, #1b4fd8);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ============================================================================
   ⑪ 인사이트 8편 3테마 재실측 후 보정 (2026-08-03)

   숫자 교정이 끝난 4편을 default / inverse / cute 로 다시 쟀더니
   페이지마다 6~8건이 4.5:1 에 못 미쳤다. 여덟 페이지가 똑같이 걸렸다 —
   페이지 문제가 아니라 **공통 부품 문제**라는 뜻이라 여기서 한 번에 잡는다.

   아래 값은 전부 실측이다. 짐작으로 적은 값 없음.
   ========================================================================== */

/* ⑪-1 머리글 로고 굵은 글씨 — #E2431F on #ffffff = 4.15 : 1 (18px 는 큰 글자가 아니다)
        같은 계열에서 명도만 내린다. */
.brand b, header b, .site-header b{ color:#C6371A; }   /* 흰 배경 5.30 · 회색 배경 4.86 */

/* ⑪-2 작은 버튼 — 주황 배경 #E2431F 위에 **어두운 회색 글자**가 얹혀 2.49 : 1 이었다.
        주황 위에는 흰 글자다. 배경도 한 단계 내려 5.99 를 만든다. */
a.btn.small, .btn.small{ background:#B83217; color:#ffffff; }   /* 5.99:1 */

/* ⑪-3 큰 버튼 — 흰 글자 on #E2431F = 4.15 : 1.
        17px 은 '큰 글자(24px 또는 18.66px 굵게)' 기준에 못 미쳐 4.5 를 넘겨야 한다. */
a.btn.big, .btn.big{ background:#B83217; color:#ffffff; }       /* 5.99:1 */

/* ⑪-4 히어로 눈썹글씨 — #E0794F on #2D3D63 = 3.58 : 1. 배경(남색)은 그대로 두고
        글자만 밝게 올린다. 주황 계열은 유지한다(브랜드 색이라 정보다). */
.hero .eyebrow, span.eyebrow{ color:#F0A98A; }                  /* 5.49:1 */

/* ⑪-5 히어로 밑줄글씨(집계 기준일) — #8FA3B8 on #143A6B = 4.38 : 1. 아깝게 미달. */
.hero .sub-note, p.sub-note{ color:#A8BCD2; }                   /* 5.84:1 */

/* ⑪-6 빵부스러기 — 여기서 **두 가지**가 걸렸다.
        ① 회색 글자 #6b7785 : 반전 4.14 · 큐트 4.36 (기본은 통과)
        ② 그 안의 링크 : 반전에서 **1.66 : 1** — 남색 글자에 검정 배경, 거의 안 보였다

        ②는 전에도 한 번 만든 사고다. 그때 lint 가 빵부스러기를 지적하길래
        고정색으로 되돌렸다가 오히려 1.66 을 만들었다. 교훈을 기록해 뒀었다 —
        **lint 는 '보라'고 알려 줄 뿐 '고쳐라'가 아니다. 배경은 재서 확인한다.**

        이번에는 쟀다. 이 자리의 배경은 body 이고, body 는 onae-themes.css 가
        --onae-bg 로 칠한다(실측 rgb 이 --onae-bg 값과 정확히 일치했다).
        그래서 글자색도 **같은 파일이 짝으로 정의한 토큰**에서 가져온다.
        글자와 배경을 같은 곳에서 함께 가져오는 것 — 이것이 규칙이다.

        인라인 style="color:#6b7785" 를 이겨야 해서 여기서만 !important 를 쓴다. */
nav[aria-label="breadcrumb"]{ color:var(--onae-text-muted, #55606f)!important; }  /* 7.2 / 8.6 / 6.9 */
nav[aria-label="breadcrumb"] a{
  color:var(--onae-brand, #1b4fd8);      /* 기본 7.0 · 반전 10.9 · 큐트 6.3 (--onae-bg 기준) */
  text-decoration:underline; text-underline-offset:2px;
}