/*! onae-typo.css v1.0.0 — (주)가르치는사람들 타이포그래피 정본
 * ==========================================================================
 * 왜 만들었나 (2026-07-31 진단)
 *   1) 수학·워크시트랩·공부끝판왕은 font-family 에 "Pretendard" 를 적어만 두고
 *      실제로 폰트를 받아오는 <link> 가 없었다. → Windows 에서 맑은 고딕으로 떨어진다.
 *      맑은 고딕은 같은 px 에서 더 크고 두껍게 보여서 "글자가 크고 아마추어 같다" 는 인상이 된다.
 *   2) 기본 글자 크기가 사이트마다 제각각이었다.
 *      학생부 13.5px / 공부 15px / 면접 16px / AI교과서·수학 미지정(브라우저 기본 16px)
 *      제목도 워크시트랩 h1 34px 고정, 공부 clamp(20~28px) 처럼 서로 달랐다.
 *   3) onae-responsive.css 가 --onae-fs-* 토큰을 정의했지만 .onae- 유틸에만 붙어서
 *      실제 body·h1 에는 적용되지 않았다. 모듈이 있어도 화면이 바뀌지 않는 상태였다.
 *
 * 원칙
 *   - 이 파일은 **가장 마지막에** 로드한다. 기본 타이포만 통일하고 레이아웃은 건드리지 않는다.
 *   - 색·여백·컴포넌트는 손대지 않는다. 글꼴·크기·자간·줄간격·줄바꿈만 정리한다.
 *   - 사이트가 의도적으로 지정한 크기는 .onae-keep-size 를 붙이면 유지된다.
 * ========================================================================== */

/* ===== 1. 타이포 스케일 — 기존보다 한 단계 낮췄다(사장님 지적: 글자가 크다) ===== */
:root{
  --onae-font-sans: "Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,
                    "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --onae-font-num:  "Pretendard Variable","Pretendard",ui-monospace,"SF Mono",Menlo,monospace;

  --onae-fs-display: clamp(26px, 3.2vw + 8px, 42px);
  --onae-fs-h1:      clamp(21px, 1.9vw + 9px, 30px);
  --onae-fs-h2:      clamp(18px, 1.1vw + 10px, 24px);
  --onae-fs-h3:      clamp(16px, 0.6vw + 12px, 19px);
  --onae-fs-h4:      clamp(15px, 0.3vw + 13px, 16px);
  --onae-fs-lead:    clamp(15px, 0.5vw + 13px, 17px);
  --onae-fs-body:    15px;
  --onae-fs-sm:      13.5px;
  --onae-fs-xs:      12.5px;

  --onae-lh-tight:   1.28;
  --onae-lh-snug:    1.45;
  --onae-lh-normal:  1.65;

  /* 한글은 자간을 살짝 좁혀야 정돈돼 보인다. 영문보다 조금 더 준다. */
  --onae-ls-title:  -0.022em;
  --onae-ls-body:   -0.011em;
}

/* ===== 2. 기반 ===== */
html{
  -webkit-text-size-adjust:100%;   /* iOS 가로전환 시 글자가 커지는 것 방지 */
  text-size-adjust:100%;
}

body{
  font-family:var(--onae-font-sans);
  font-size:var(--onae-fs-body);
  line-height:var(--onae-lh-normal);
  letter-spacing:var(--onae-ls-body);
  /* 글자를 선명하게 — 굵어 보이는 현상을 줄인다 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* 한국어는 단어 단위로 끊어야 읽기 쉽다 */
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* ===== 3. 제목 ===== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--onae-font-sans);
  letter-spacing:var(--onae-ls-title);
  line-height:var(--onae-lh-tight);
  word-break:keep-all;
  text-wrap:balance;               /* 제목이 어색하게 한 단어만 내려가는 것 방지 */
  margin-top:0;
}
h1:not(.onae-keep-size){ font-size:var(--onae-fs-h1); font-weight:800; }
h2:not(.onae-keep-size){ font-size:var(--onae-fs-h2); font-weight:750; line-height:var(--onae-lh-snug); }
h3:not(.onae-keep-size){ font-size:var(--onae-fs-h3); font-weight:700; line-height:var(--onae-lh-snug); }
h4:not(.onae-keep-size){ font-size:var(--onae-fs-h4); font-weight:700; line-height:var(--onae-lh-snug); }
h5:not(.onae-keep-size),
h6:not(.onae-keep-size){ font-size:var(--onae-fs-sm); font-weight:700; }

/* 히어로 대제목만 크게 — 명시적으로 붙였을 때만 */
.onae-display{ font-size:var(--onae-fs-display); font-weight:850; letter-spacing:-0.028em; line-height:1.18; }

/* ===== 4. 본문 ===== */
p,li,dd,dt,td,th,figcaption{
  letter-spacing:var(--onae-ls-body);
  word-break:keep-all;
  overflow-wrap:break-word;
}
p:not(.onae-keep-size){ line-height:var(--onae-lh-normal); }
.onae-lead{ font-size:var(--onae-fs-lead); line-height:1.55; color:var(--text-muted,#64748B); }
small,.small,.onae-sm{ font-size:var(--onae-fs-sm); }
.onae-xs{ font-size:var(--onae-fs-xs); }

/* ===== 5. 입력 요소 — iOS 확대 방지(16px 미만이면 확대된다) ===== */
input,select,textarea,button{
  font-family:var(--onae-font-sans);
  letter-spacing:var(--onae-ls-body);
}
input,select,textarea{ font-size:16px; }
@media (min-width:768px){
  input,select,textarea{ font-size:15px; }
}

/* ===== 6. 숫자 — 표·지표에서 자릿수가 흔들리지 않게 ===== */
.onae-num,
[class*="price"],[class*="count"],[class*="score"],
table td:not(.onae-keep-size){ font-variant-numeric:tabular-nums; }

/* ===== 7. 링크·강조 ===== */
a{ text-underline-offset:0.18em; }
strong,b{ font-weight:700; }

/* ===== 8. 코드 ===== */
code,kbd,pre,samp{ font-family:var(--onae-font-num); font-size:0.92em; letter-spacing:0; }

/* ===== 9. 표 — 촘촘하고 정돈되게 ===== */
table:not(.onae-keep-size){ font-size:var(--onae-fs-sm); }
table:not(.onae-keep-size) th{ font-weight:700; letter-spacing:var(--onae-ls-body); }

/* ===== 10. 작은 화면 — 더 좁히지 않는다(가독성 우선) ===== */
@media (max-width:400px){
  :root{ --onae-fs-body:14.5px; --onae-fs-sm:13px; }
}

/* ===== 11. 인쇄 ===== */
@media print{
  body{ font-size:10.5pt; line-height:1.5; }
  h1{ font-size:18pt; } h2{ font-size:14pt; } h3{ font-size:12pt; }
}