/*! onae-skin.css v2.0.0 — 면접끝판왕 전용 스킨 (고급 방향)
 * ============================================================================
 * 이 파일이 고치는 것 — 추측이 아니라 브라우저에서 실제로 측정한 값이다 (2026-08-02)
 *
 *  ① 지표 카드의 글자가 안 보인다  ★ 가장 큰 문제
 *     style.css:429  .strip.stat-cards span{ color:var(--ink) }   (0,2,1)
 *     style.css:690  .stat-card .sc-ico  { color:#C9502F }        (0,2,0)  ← 짐
 *     지표 카드가 v32 에서 짙은 남색(#122238)으로 바뀌었는데 옛 규칙이 남아
 *     숫자·아이콘이 슬레이트(#334155)로 칠해진다. 짙은 남색 위 슬레이트 = 대비 1.4:1.
 *     583·7·63·331·858 이 사실상 안 읽힌다.
 *
 *  ② 카드가 평면이다
 *     style.css:663  .card{ box-shadow:none }
 *     style.css:659  .btn:hover{ box-shadow:none!important }
 *     전에 '그림자를 빼는' 방향으로 정리한 흔적. 그 결과 "만들다 중단한" 인상이 남았다.
 *
 *  ③ onae-pro.css 가 지표 카드를 흰색으로 덮어쓴다
 *     [class*="card"] 라는 추측 선택자가 .stat-card·.card-icon-badge 까지 잡아
 *     의도한 짙은 배경과 아이콘 배지 색을 지운다.  → 그 링크는 제거한다.
 *
 * 고치는 방향 — 요소를 빼지 않고 톤을 한 단계 낮춘다
 *   원색 → 깊은 색 · 한 겹 진한 그림자 → 세 겹 옅은 그림자 · 평면 → 층
 *
 * 되돌리기 : <link> 한 줄만 지우면 완전 복귀. 원본 CSS 는 건드리지 않았다.
 * ============================================================================ */

:root{
  --sk-sh1:0 1px 2px rgba(14,26,44,.05), 0 1px 3px rgba(14,26,44,.04);
  --sk-sh2:0 1px 2px rgba(14,26,44,.05), 0 4px 10px -2px rgba(14,26,44,.07), 0 12px 28px -8px rgba(14,26,44,.10);
  --sk-sh3:0 2px 4px rgba(14,26,44,.06), 0 12px 24px -6px rgba(14,26,44,.11), 0 28px 56px -18px rgba(14,26,44,.16);
  --sk-sh-accent:0 2px 6px rgba(198,55,26,.20), 0 10px 22px -8px rgba(198,55,26,.30);
  --sk-sh-navy:0 2px 6px rgba(20,58,107,.16), 0 10px 24px -8px rgba(20,58,107,.26);
  --sk-line-strong:#CFD6E1;
}

/* ══════════════════════════════════════════════════════════
 * ① 지표 카드 — 읽히게 만든다 (최우선)
 * ══════════════════════════════════════════════════════════ */
.strip.stat-cards .stat-card{
  background:linear-gradient(165deg,#17304F 0%,#122238 62%,#0E1B2C 100%) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:14px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, var(--sk-sh2) !important;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s !important;
}
.strip.stat-cards .stat-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, var(--sk-sh3) !important;
  border-color:rgba(255,255,255,.16) !important;
}
/* 위쪽 브랜드 띠 — 지면이 살아난다 */
.strip.stat-cards .stat-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#E2431F,#C9502F 55%,rgba(201,80,47,0));
}
/* ★ 대비 복구 — 아래 세 줄이 583·7·63 을 읽히게 한다 */
.strip.stat-cards .stat-card .sc-in b,
.strip.stat-cards .stat-card .sc-in b .stat-num{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.strip.stat-cards .stat-card .sc-in b em{ color:#F0B98A !important; }
.strip.stat-cards .stat-card .sc-in > span{ color:#E9EFF6 !important; font-weight:650 !important; }
.strip.stat-cards .stat-card .sc-in small{ color:#A9BACC !important; }
.strip.stat-cards .stat-card .sc-ico{
  color:#F07A4E !important;
  background:rgba(226,67,31,.14);
  border:1px solid rgba(240,122,78,.28);
  border-radius:12px;
  width:44px !important; height:44px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.strip.stat-cards .stat-card .sc-ico svg{ width:22px !important; height:22px !important; }

/* ══════════════════════════════════════════════════════════
 * ② 카드 — 그림자를 되살린다. 단, 세 겹 옅게
 * ══════════════════════════════════════════════════════════ */
.card{
  box-shadow:var(--sk-sh2) !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s !important;
}
.card.link:hover,.card[href]:hover,a.card:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--sk-sh3) !important;
  border-color:var(--sk-line-strong) !important;
}
/* 아이콘 배지 — 옅은 판 + 안쪽 하이라이트 */
.card-icon-badge{
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--sk-sh1) !important;
  border:1px solid rgba(201,80,47,.18);
}
.card-icon-badge.badge-navy{ border-color:rgba(18,34,56,.14); }

/* ══════════════════════════════════════════════════════════
 * ③ 버튼 — 눌리는 물건처럼
 * ══════════════════════════════════════════════════════════ */
.btn{
  background:linear-gradient(180deg,#E9502A,#D33F1B) !important;
  border:1px solid #B8371A !important;
  color:#fff !important;
  border-radius:10px !important;
  font-weight:700 !important;
  box-shadow:var(--sk-sh-accent), 0 1px 0 rgba(255,255,255,.20) inset !important;
  transition:transform .14s, box-shadow .14s, background .14s !important;
}
.btn:hover{
  background:linear-gradient(180deg,#D33F1B,#B8371A) !important;
  transform:translateY(-1px) !important;
  box-shadow:var(--sk-sh-accent), 0 1px 0 rgba(255,255,255,.22) inset !important;
}
.btn.sec,.btn.ghost,.btn-outline{
  background:linear-gradient(180deg,#FFFFFF,#F6F8FB) !important;
  color:#26374F !important;
  border:1px solid var(--sk-line-strong) !important;
  box-shadow:var(--sk-sh1) !important;
}
.btn.sec:hover,.btn.ghost:hover{
  background:#F1F5FA !important; transform:translateY(-1px) !important;
  box-shadow:var(--sk-sh2) !important;
}
.btn.navy{
  background:linear-gradient(180deg,#1B4A82,#143A6B) !important;
  border:1px solid #0E2A50 !important; color:#fff !important;
  box-shadow:var(--sk-sh-navy), 0 1px 0 rgba(255,255,255,.16) inset !important;
}
.btn:disabled{ box-shadow:none !important; transform:none !important; }

/* ══════════════════════════════════════════════════════════
 * ④ 헤더 · 히어로 — 평면을 층으로
 * ══════════════════════════════════════════════════════════ */
header{
  box-shadow:0 1px 0 rgba(14,26,44,.06), 0 2px 12px rgba(14,26,44,.05) !important;
  backdrop-filter:saturate(180%) blur(10px);
}
.hero{
  background:linear-gradient(168deg,#1A4478 0%,#143A6B 55%,#0E2A50 100%) !important;
  position:relative;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}

/* ══════════════════════════════════════════════════════════
 * ⑤ 표 · 입력 · 모달
 * ══════════════════════════════════════════════════════════ */
.tbl{
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  border-collapse:separate !important; border-spacing:0 !important;
  overflow:hidden; box-shadow:var(--sk-sh2) !important;
}
/* ★ 2026-08-02 수정 — 여기서 내가 v1 과 똑같은 실수를 했다.
   이 사이트의 .tbl th 는 남색 배경(var(--navy)) 위 흰 글자다(style.css).
   그런데 내가 배경만 밝은색으로 덮어써서 흰 글자가 흰 배경 위에 남았다 → 1.06 : 1.
   교사·기관 페이지의 표 머리글 6개가 안 보이는 상태로 배포돼 있었다.
   교훈은 v2 서문에 적은 그대로다 — **배경은 건드리지 않는다.**
   테두리와 모서리만 다듬고 색은 사이트가 정한 대로 둔다. */
.tbl th{
  border:0 !important; border-bottom:1px solid var(--line) !important;
  font-weight:700 !important;
}
.tbl td{
  border:0 !important; border-bottom:1px solid #EFF3F8 !important;
  font-variant-numeric:tabular-nums;
}
.tbl tbody tr:hover td{ background:#FAFCFE !important; }
.tbl tr:last-child td{ border-bottom:0 !important; }

input,select,textarea{
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  box-shadow:0 1px 0 #fff inset !important;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--brand-600,#1E4B8F) !important;
  box-shadow:0 0 0 3px var(--brand-tint,#EAF0FA) !important;
}

.modal .panel{ box-shadow:var(--sk-sh3) !important; border-radius:18px !important; }

/* ══════════════════════════════════════════════════════════
 * ⑥ 인쇄 — 그림자·짙은 배경은 잉크를 먹는다
 * ══════════════════════════════════════════════════════════ */
@media print{
  .card,.tbl,.strip.stat-cards .stat-card{ box-shadow:none !important; }
  .strip.stat-cards .stat-card{ background:#fff !important; border:1px solid #ccc !important; }
  .strip.stat-cards .stat-card .sc-in b,
  .strip.stat-cards .stat-card .sc-in > span{ color:#111 !important; -webkit-text-fill-color:#111 !important; }
  .btn{ background:none !important; color:#111 !important; box-shadow:none !important; }
}

@media (prefers-reduced-motion:reduce){
  .card,.strip.stat-cards .stat-card,.btn{ transition:none !important; transform:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * ⑦ 대비 보정 — contrast_audit.py 실측 (2026-08-02)
 *
 *  코랄(#E2431F)은 브랜드색이지만 **흰 배경 위 작은 글자로는 3.4 : 1** 밖에 안 나온다.
 *  색을 버리는 게 아니라, '글자로 쓸 때만' 한 단계 깊은 코랄을 쓴다.
 *  면(버튼·배지 배경)에는 원래 코랄 그대로 — 브랜드 인상은 유지된다.
 *
 *    .sec-head .tag   3.44 : 1     .eyebrow        3.67 : 1
 *    .sec-head p      3.94 : 1     .logo b         4.15 : 1
 *    별점 ★★★★★      1.62 : 1  ← 옅은 코랄 판 위 코랄 글자, 사실상 안 보였다
 * ══════════════════════════════════════════════════════════════════════════ */

/* 글자로 쓰이는 코랄 — 깊은 벽돌색 (흰 배경 위 5.9 : 1) */
.sec-head .tag,
.logo b,
a.logo b{ color:#A8371A !important; }

/* 옅은 코랄 판 위(흰 지면) — 더 깊게 (7.2 : 1) */
.grid.c3 .card span,
.stars{ color:#8E2E14 !important; }

/* 보조 문단 — #64748B 는 15px 에서 3.9 : 1. 한 톤 내린다 */
.sec-head p,
.small.mut,
.mut{ color:#525E73 !important; }

:root{ --mut:#525E73 !important; --text-muted:#525E73 !important; }

/* ── 어두운 판 위에서는 반대로 밝혀야 한다 ──────────────────────
 * 히어로와 「무료 진단」 밴드는 남색 바탕이다.
 * 위의 '깊은 색' 규칙을 그대로 두면 남색 위 벽돌색이 되어 1.3 : 1 로 떨어진다.
 * (실제로 한 번 그렇게 만들었다가 검사에서 잡혔다.)                        */
.hero .eyebrow,
#lead-free-diagnosis .sec-head .tag{ color:#FFC9AC !important; }
#lead-free-diagnosis .sec-head p{ color:#D3DFEE !important; }
#lead-free-diagnosis .sec-head h2{ color:#fff !important; }

/* 1차 버튼 — 흰 글자가 4.16 : 1. 주황을 한 단계만 내린다 */
.btn{ background:linear-gradient(180deg,#D8451F,#C03A16) !important; border-color:#A63213 !important; }
.btn:hover{ background:linear-gradient(180deg,#C03A16,#A63213) !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * ⑧ 하위 페이지 대비 보정 — 2026-08-02, 요금제·교사·자료실 페이지 실측
 *
 *   코랄(#E2431F)이 작은 글자로 쓰인 곳이 아직 남아 있었다.
 *     .gnb a.active        3.62 : 1     .badge.paid        3.62 : 1
 *     .rubric-tbl .weight  4.15 : 1     .dl-btn(흰 글자)   4.15 : 1
 *   면(배경)에는 원색 코랄을 그대로 쓰고, 글자로 쓸 때만 깊은 벽돌색을 쓴다 — ⑦과 같은 원칙.
 * ══════════════════════════════════════════════════════════════════════════ */

.gnb a.active,
.badge.paid,
.rubric-tbl td.weight{ color:#A8371A !important; }

/* 옅은 판 위 작은 글자는 한 톤 더 깊게 */
.tier-card .badge.paid{ background:#FDECE7 !important; border:1px solid #F3C9BC !important; }
.tier-card p.small{ color:#525E73 !important; }

/* 내려받기 버튼 — 흰 글자가 4.15 : 1. 코랄을 한 단계 내린다 */
.dl-card .dl-btn{ background:#C03A16 !important; color:#fff !important; }

/* FAQ 하단 배너 버튼 — 3.79 : 1 */
.cta-banner a{ background:#C03A16 !important; color:#fff !important;
  border:1px solid #A63213 !important; }