/*! onae-pro.css v2.0.0 — 오늘과내일 공통 마감 레이어 (고급 방향)
 * ============================================================================
 * ■ v1 을 왜 통째로 버렸나 — 2026-08-02 브라우저 실측
 *
 *   v1 은 `[class*="card"]`, `[class*="panel"]` 같은 **추측 선택자**로
 *   화면 전체를 흰색·무그림자로 덮었다. 그 결과 실제로 이런 일이 벌어졌다.
 *
 *   · 학교생활끝판왕  .herocard 는 남색 그라디언트 위 흰 글자로 설계된 카드다.
 *                   v1 이 배경을 흰색으로 덮어써서 흰 글자만 남았다.
 *                   「내 계열 고르기」 6개 카드의 글자 대비 = 1.06 : 1 (사실상 안 보임)
 *   · 면접끝판왕    .stat-card 짙은 남색 배경이 흰색으로 덮여 583·7·63 이 안 읽혔다.
 *   · 전 사이트     .card box-shadow:none → 평면. "만들다 중단한" 인상의 직접 원인.
 *
 *   즉 v1 은 "고급스럽게 만든다"면서 실제로는 화면을 망가뜨리고 있었다.
 *
 * ■ v2 의 규칙 — 딱 두 줄로 요약된다
 *   ① 배경색·배경이미지는 **절대 건드리지 않는다.**
 *      각 사이트가 의도한 색이 있고, 그 위의 글자색이 그 색에 맞춰져 있다.
 *   ② 추측 선택자(`[class*="..."]`)를 쓰지 않는다. 실재하는 클래스만 적는다.
 *
 *   이 파일이 하는 일은 '빼기'가 아니라 '더하기'다.
 *   그림자를 세 겹으로 얹고, 모서리를 고르고, 초점 링을 만들고, 표를 정리한다.
 *
 * ■ 되돌리기
 *   <link> 한 줄만 지우면 각 사이트 원래 디자인으로 완전히 복귀한다.
 * ============================================================================ */

:root{
  /* 세 겹이 겹쳐야 고급스럽다 — 한 겹 진한 그림자는 싸구려로 보인다 */
  --pro-sh1:0 1px 2px rgba(14,26,44,.05), 0 1px 3px rgba(14,26,44,.04);
  --pro-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);
  --pro-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);
  --pro-line:#E2E8F2;
  --pro-line-strong:#CFD8E6;
  --pro-focus:#1E4B8F;
  --pro-focus-soft:#E8F0F9;
}

/* ══════════════════════════════════════════════════════════
 * 1. 카드 — 그림자만 얹는다. 배경·글자색은 손대지 않는다.
 *    (아래 목록은 6개 사이트에서 실제로 쓰이는 클래스만 적었다)
 * ══════════════════════════════════════════════════════════ */
.card, .topic-card, .book-card, .tier-card, .q-card,
.herocard, .obcard, .plan, .panel, .stat-card, .infocard{
  box-shadow:var(--pro-sh2);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
}
/* 눌러서 이동하는 카드만 떠오른다 — 그냥 판은 가만히 있어야 한다 */
a.card:hover, .card.link:hover, .card[href]:hover,
.topic-card:hover, .book-card:hover, .herocard.clickable:hover,
.obcard:hover, .stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--pro-sh3);
}

/* ══════════════════════════════════════════════════════════
 * 2. 초점 링 — 키보드로 쓰는 사람을 위한 최소한
 * ══════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--pro-focus);
  outline-offset:2px;
  border-radius:6px;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--pro-focus);
  box-shadow:0 0 0 3px var(--pro-focus-soft);
}

/* ══════════════════════════════════════════════════════════
 * 3. 표 — 세로선을 지우고 숫자를 고정폭으로. 읽는 속도가 달라진다.
 * ══════════════════════════════════════════════════════════ */
table td, table th{ font-variant-numeric:tabular-nums; }
.tbl, table.ptable, table.data{
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--pro-sh2);
}
.tbl th, table.ptable th, table.data th{
  background:linear-gradient(180deg,#F9FBFD,#F2F6FA);
  border:0; border-bottom:1px solid var(--pro-line);
  font-weight:700; letter-spacing:0;
}
.tbl td, table.ptable td, table.data td{
  border:0; border-bottom:1px solid #EFF3F8;
}
.tbl tr:last-child td, table.ptable tr:last-child td, table.data tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover td, table.ptable tbody tr:hover td{ background:#FAFCFE; }

/* ══════════════════════════════════════════════════════════
 * 4. 떠 있어야 하는 것 — 모달·드롭다운은 확실히 띄운다
 * ══════════════════════════════════════════════════════════ */
.modal .panel, .modal-panel, .dropdown, .popover, .tooltip,
[role="dialog"] > .panel{
  box-shadow:var(--pro-sh3);
}

/* ══════════════════════════════════════════════════════════
 * 5. 한글 조판 — 낱말이 끊기지 않게, 제목 줄이 고르게
 * ══════════════════════════════════════════════════════════ */
h1,h2,h3,h4,p,li,dd,dt,figcaption,label,.lead{
  word-break:keep-all;
  overflow-wrap:break-word;
}
h1,h2,h3{ text-wrap:balance; }

/* ══════════════════════════════════════════════════════════
 * 6. 워터마크 — 있어야 하지만, 화면을 삼키면 안 된다
 *    (학교생활끝판왕 #watermark. 다른 사이트엔 이 id 가 없으니 무해하다)
 *    v1 상태: opacity .06 · padding 26/34 · scale(1.3) · z-index 99999
 *      → 글자가 촘촘히 깔려 본문 위를 덮고, 모달 위에까지 얹혀 화면이 지저분했다.
 *    v2   : 간격을 넓혀 밀도를 낮추고, 모달 아래로 내린다. 보호 기능은 그대로.
 * ══════════════════════════════════════════════════════════ */
#watermark{
  opacity:.038 !important;
  z-index:40 !important;
  transform:rotate(-24deg) scale(1.15) !important;
}
#watermark span{
  padding:52px 78px !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
}
@media print{
  /* 인쇄본은 무단복제 억제가 목적이므로 조금 더 진하게 */
  #watermark{ opacity:.10 !important; }
}
@media (max-width:600px){
  #watermark span{ padding:38px 52px !important; }
}

/* ══════════════════════════════════════════════════════════
 * 7. 인쇄 — 그림자는 잉크만 먹는다
 * ══════════════════════════════════════════════════════════ */
@media print{
  .card, .topic-card, .book-card, .tier-card, .q-card,
  .herocard, .obcard, .plan, .panel, .stat-card, .infocard,
  .tbl, table.ptable, table.data{ box-shadow:none !important; }
}

/* ══════════════════════════════════════════════════════════
 * 8. 움직임을 줄이도록 설정한 사용자 존중
 * ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .card, .topic-card, .book-card, .tier-card, .q-card,
  .herocard, .obcard, .stat-card{
    transition:none !important;
    transform:none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * 워크시트랩 전용 보정 (이 사이트의 onae-pro.css 사본에만 붙는다)
 * 2026-08-02 contrast_audit.py 실측으로 찾은 것만 고친다.
 *
 *  ① 히어로 안에서 본문용 회색 토큰을 그대로 써서 남색 배경에 묻혔다
 *       .hero p        rgb(100,116,139) on 남색  →  2.49 : 1
 *       .hero p b      rgb(14,42,80)    on 남색  →  1.21 : 1  ★ "월 9,900원" 이 안 보인다
 *     가격은 이 사이트에서 가장 중요한 글자다. 안 보이면 안 된다.
 *
 *  ② 카드 부제 .wcard .st 가 13px 에 rgb(138,148,166) — 2.88 : 1
 *     작은 글씨일수록 더 진해야 한다. 70곳에서 같은 문제가 반복된다.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ① 히어로 — 어두운 판 위에서는 어두운 글자 토큰을 쓰지 않는다
 *
 * ★ 2026-08-02 수정 — 처음에 `.hero p` 로 넓게 걸었다가 사고를 냈다.
 *   이 사이트에는 히어로가 두 종류다.
 *     홈(#app > .hero)     남색 그라디언트 위 흰 글자
 *     무료 신청(/free/)     흰 배경 위 검은 글자   ← 여기까지 밝은 글자로 칠해 버렸다
 *   그 결과 /free/ 의 안내 문단이 1.19 : 1 로 안 보이는 상태가 됐다.
 *   이메일을 받는 페이지에서 '무엇을 주는지' 설명이 안 보였다.
 *   그래서 어두운 히어로에만 걸리도록 범위를 좁힌다. */
#app > .hero p{ color:#E4ECF8 !important; opacity:1 !important; }
#app > .hero p b,
#app > .hero p strong{ color:#FFD79A !important; font-weight:750 !important; }   /* 가격 — 금색 (남색 위 9.6:1) */
#app > .hero p a{ color:#AFCDF2 !important; text-decoration:underline; text-underline-offset:3px; }
#app > .hero p a:hover{ color:#fff !important; }
#app > .hero .sub,#app > .hero small,#app > .hero span{ color:#CBD9EC !important; }

/* ② 카드 부제 — 13px 은 4.5:1 을 넘겨야 읽힌다 */
.wcard .st{ color:#5A6478 !important; }        /* #F7F8FA 위 5.9 : 1 */
.wcard.locked .st{ color:#5A6478 !important; }
.lockic{ color:#6B7488 !important; }

/* 잠긴 카드 — 흐리게 하되 '고장난 것'으로 보이지 않게 */
.wcard.locked{ opacity:1 !important; }
.wcard.locked .tt{ color:#3A4459 !important; }

/* 출처 표기 — 작지만 신뢰의 근거다. 읽히게 둔다 */
#geoBlock p{ color:#5A6478 !important; }

/* ③ 뿌리 원인 — 보조 글자 토큰 --ink3 가 #8a94a6 이라 12~13px 에서 2.9:1 밖에 안 나온다.
 *    이 토큰 하나가 사이트 전역의 부제·배지·꼬리말에 쓰인다.
 *    한 톤만 진하게 내리면 60여 곳이 한 번에 기준을 넘는다. (흰 배경 위 4.6 : 1)
 *    색감은 그대로 두고 명도만 낮췄다 — 디자인이 달라 보이지 않는다. */
:root{
  --ink3:#697284 !important;
  /* --ink2(= onae-tokens 의 --text-muted #64748B) 도 흰 배경 위 4.48:1 로 기준에 0.02 모자란다.
     같은 이유로 한 단계만 내린다. */
  --text-muted:#5F6B7F !important;
  --ink2:#5F6B7F !important;
}

/* ④ 배지 — 11.5px 은 아주 작다. 옅은 판 위 형광 계열 글자는 이 크기에서 무너진다.
 *    배경 판은 그대로 두고 글자만 같은 색조의 '깊은 색'으로 내린다. */
.tag{ color:#3730A3 !important; }                 /* 보라  #EBECFC 위 7.4 : 1 */
.tag.t-free,.tag.t-ans{ color:#0B6B5E !important; } /* 청록  #E2F5F1 위 6.4 : 1 */
.tag.t-rev{ color:#7A4A08 !important; }            /* 호박  #FDF1D8 위 6.5 : 1 */
.lockic{ color:#59627A !important; }
.sec-h span,footer .wrap,footer .wrap a{ color:#5C6579 !important; }

/* ⑤ 하위 페이지 보정 — 2026-08-02 실측
 *   b2b.html 로고의 「B2B」 배지가 3.51 : 1.
 *   ※ 처음엔 글자를 파랑(#3457d5)으로 내렸다가 더 나빠졌다(1.72:1) —
 *     이 배지는 배경이 이미 같은 파랑이었다. 배경을 먼저 재고 색을 정해야 한다.
 *     파란 판 위에는 흰 글자가 답이다(6.5:1). */
header .logo span.dot{ color:#FFFFFF !important; }
/* 「B2B」 배지 — 주황 판(#E2603F) 위 흰 글자가 3.51 : 1.
   11px 이라 더 확실해야 한다. 판을 한 단계 내려 5.4 : 1 로 만든다. */
header .logo span:not(.dot){ background:#B93F1D !important; color:#FFFFFF !important; font-weight:800 !important; }

/* ⑥ /seo/ws/ 118장 — 2026-08-02 크롤러 렌더로 처음 확인
 *   이 폴더는 검색 결과에서 워크시트 한 장 한 장의 착지 지점이다.
 *   페이지 자체 <style> 블록의 인디고 두 색이 12px 에서 기준에 못 미쳤다.
 *     .bc / .bc a  #6366f1  4.47 : 1  (기준 4.5 — 아슬아슬하게 부족)
 *     .kw          #818cf8  2.98 : 1  (키워드 줄. 사실상 흐릿한 회보라로 보인다)
 *   색조는 그대로 두고 명도만 내린다. 인디고는 우리 색이므로 바꾸지 않는다.
 *   ★ 선택자를 nav / p 로 좀혔다 — index.html 은 같은 이름을 <div> 로 쓴다.
 *     이름만 보고 칠했으면 홈의 빵줄길과 키워드 칩까지 같이 바뀌었다. */
.wrap > nav.bc,
.wrap > nav.bc a{ color:#5457D6 !important; }   /* 흰 판 위 5.66 : 1 */
.wrap > p.kw{ color:#4F52CC !important; }       /* 흰 판 위 6.16 : 1 — 12px 이라 한 단계 더 */

/* ══ ⑦ 외부 출판 도서 고지 — 2026-08-03 ══════════════════════════════════
 * 『활기찬 중학교 생활 워크북』(박영사)은 판매 중인 책이다. 그 활동지를
 * 우리가 제공하는 것처럼 보이면 안 된다. 활용법·학생안내·FAQ 를 숨기고
 * 서지정보와 구매 링크만 남겼다. 이 고지가 그 자리를 대신하므로
 * 본문보다 먼저 눈에 들어와야 한다. */
.ext-notice{ margin:16px 0 20px; padding:20px 22px; border-radius:13px;
  border:1.5px solid #CFD8E6; background:#F7F9FC; }
.ext-badge{ display:inline-block; margin:0 0 11px; padding:4px 12px; border-radius:99px;
  background:#FFFFFF; border:1px solid #CFD8E6; color:#4B5568; font-size:12px;
  font-weight:800; letter-spacing:.02em; }
.ext-main{ margin:0 0 10px; padding:12px 16px; border-left:4px solid #4F52CC;
  border-radius:0 9px 9px 0; background:#FFFFFF; font-size:15px; line-height:1.65; color:#1F2733; }
.ext-main strong{ font-weight:750; }
.ext-sub{ margin:0; font-size:13px; line-height:1.6; color:#59637A; }
@media print{ .ext-notice{ border:1px solid #999; background:#fff; } }