/*! onae-responsive.css v1.0.0 — (주)가르치는사람들 공용 반응형 레이어
 * 목적: 모바일/패드에서 (1) 글자가 두 줄로 어색하게 끊기는 문제
 *       (2) 글자가 과하게 커서 세련미가 떨어지는 문제 를 구조적으로 제거한다.
 * 적용: <link rel="stylesheet" href="/assets/onae-tokens.css">  바로 다음 줄에 로드.
 * 원칙: 기존 사이트 CSS를 덮어쓰지 않는다. 토큰과 유틸리티만 제공하고,
 *       실제 상향은 아래 "3. 안전 오버라이드" 에서 최소 선택자로만 건드린다.
 * 브레이크포인트: 480 / 767 / 1024 (모바일 / 큰폰~작은패드 / 패드~데스크톱)
 */

/* ─────────────────────────────────────────────
 * 1. 유동 타이포 스케일 (clamp)
 *    min = 모바일에서 절대 이보다 작아지지 않음
 *    max = 데스크톱에서 절대 이보다 커지지 않음  ← "글자가 너무 커서 촌스러움" 차단
 *    본문(body)은 어떤 화면에서도 16px 미만으로 내려가지 않는다(iOS 자동 확대 방지).
 * ───────────────────────────────────────────── */
:root{
  --onae-fs-display: clamp(28px, 4.6vw + 8px, 52px);
  --onae-fs-h1:      clamp(24px, 3.4vw + 8px, 40px);
  --onae-fs-h2:      clamp(20px, 2.2vw + 8px, 30px);
  --onae-fs-h3:      clamp(18px, 1.4vw + 8px, 24px);
  --onae-fs-lead:    clamp(16px, 0.9vw + 12px, 20px);
  --onae-fs-body:    clamp(16px, 0.35vw + 14px, 17px);
  --onae-fs-sm:      clamp(14px, 0.25vw + 12px, 15px);
  --onae-fs-xs:      13px;

  --onae-lh-tight: 1.22;
  --onae-lh-head:  1.32;
  --onae-lh-body:  1.68;

  /* 한국어 가독 폭: 영문 65ch 기준이 아니라 한글 기준으로 재산정 */
  --onae-measure:  38em;

  --onae-space-1: 4px;
  --onae-space-2: 8px;
  --onae-space-3: 12px;
  --onae-space-4: 16px;
  --onae-space-5: clamp(20px, 2.4vw, 32px);
  --onae-space-6: clamp(28px, 4vw, 56px);
  --onae-space-7: clamp(40px, 6vw, 88px);

  --onae-gutter:  clamp(16px, 4vw, 40px);
  --onae-maxw:    1160px;

  --onae-tap:     44px;   /* WCAG 2.5.5 / Apple HIG 최소 터치 타깃 */
  --onae-radius:  14px;
}

/* ─────────────────────────────────────────────
 * 2. 한국어 줄바꿈 교정  ← 사장님이 지적한 "두 줄로 내려가 보이는" 문제의 핵심
 *    - keep-all : 단어(어절) 중간에서 끊기지 않게 한다.
 *    - balance  : 제목이 1글자만 다음 줄로 넘어가는 "고아 글자" 를 없앤다.
 *    - pretty   : 본문 마지막 줄이 한 단어만 남는 것을 방지.
 * ───────────────────────────────────────────── */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body,
h1,h2,h3,h4,h5,h6,
p, li, dt, dd, figcaption,
button, a, label,
.btn, .badge, .chip, .tag, .card, .card *{
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1,h2,h3,h4,
.hero-title, .section-title, .card-title, .price-title{
  text-wrap: balance;          /* 지원 브라우저에서 즉시 개선, 미지원은 무시 */
  line-height: var(--onae-lh-head);
  letter-spacing: -0.02em;     /* 한글 큰 글자 특유의 헐거움 제거 → 세련미 */
}
p, .lead, .desc, .card-desc{
  text-wrap: pretty;
  line-height: var(--onae-lh-body);
}

/* 절대 두 줄로 쪼개지면 안 되는 짧은 라벨 (가격, 배지, CTA) */
.onae-nowrap,
.price-amount, .price-num, .badge, .chip, .tag{
  white-space: nowrap;
}

/* 의미 단위로 묶어 줄바꿈시키고 싶을 때 감싸는 유틸 */
.onae-keep{ display:inline-block; }

/* ─────────────────────────────────────────────
 * 3. 안전 오버라이드 — 유틸리티 클래스 (권장 경로)
 * ───────────────────────────────────────────── */
/* ★ box-sizing: 이게 없으면 width:100% + padding 이 화면을 넘어 가로 스크롤이 생긴다.
 *   기존 사이트 CSS를 깨지 않도록 전역이 아니라 onae-* 유틸리티에만 건다. */
[class^="onae-"], [class*=" onae-"],
[class^="onae-"] *, [class*=" onae-"] *{
  box-sizing: border-box;
}

.onae-container{
  width:100%;
  max-width: var(--onae-maxw);
  margin-inline:auto;
  padding-inline: var(--onae-gutter);
}
.onae-stack > * + *{ margin-block-start: var(--onae-space-4); }
.onae-prose{ max-width: var(--onae-measure); font-size: var(--onae-fs-body); }

.onae-display{ font-size: var(--onae-fs-display); line-height: var(--onae-lh-tight); }
.onae-h1{ font-size: var(--onae-fs-h1); }
.onae-h2{ font-size: var(--onae-fs-h2); }
.onae-h3{ font-size: var(--onae-fs-h3); }
.onae-lead{ font-size: var(--onae-fs-lead); }
.onae-sm{ font-size: var(--onae-fs-sm); }

/* 자동 반응형 그리드: 미디어쿼리 없이 카드가 스스로 접힌다 */
.onae-grid{
  display:grid;
  gap: var(--onae-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.onae-grid--wide{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* 터치 타깃 보정: 시각 크기는 그대로 두고 히트영역만 넓힌다 */
.onae-tap{ position:relative; min-height: var(--onae-tap); min-width: var(--onae-tap); }
.onae-tap::after{
  content:""; position:absolute; inset:50% auto auto 50%;
  width:max(100%, var(--onae-tap)); height:max(100%, var(--onae-tap));
  transform:translate(-50%,-50%);
}

/* 표가 모바일에서 화면을 깨뜨리지 않게 */
.onae-scroll-x{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.onae-scroll-x > table{ min-width:560px; }

/* ─────────────────────────────────────────────
 * 4. 브레이크포인트 보정
 * ───────────────────────────────────────────── */

/* 패드 세로 ~ 작은 노트북 */
@media (max-width:1024px){
  .onae-container{ --onae-maxw: 100%; }
  .onae-grid--wide{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}

/* 큰 폰 ~ 패드 세로 */
@media (max-width:767px){
  :root{
    --onae-gutter: clamp(14px, 4.5vw, 20px);
    --onae-measure: 100%;
  }
  /* 데스크톱용 다단을 1단으로 */
  .onae-grid, .onae-grid--wide{ grid-template-columns:1fr; }

  /* 모바일에서 버튼은 폭을 꽉 채워 오조작을 줄인다 */
  .onae-btn-block-mobile{ display:block; width:100%; text-align:center; }

  /* 제목 letter-spacing 을 조금 되돌린다 (작은 글자에서 과한 압축은 가독성 저하) */
  h1,h2,h3{ letter-spacing:-0.01em; }
}

/* 소형 폰 */
@media (max-width:480px){
  :root{
    --onae-fs-display: clamp(26px, 7.2vw, 34px);
    --onae-fs-h1:      clamp(22px, 6.2vw, 28px);
    --onae-fs-h2:      clamp(19px, 5.0vw, 23px);
    --onae-radius: 12px;
  }
  .onae-hide-xs{ display:none !important; }
  /* 가로 스크롤 유발 요소 봉쇄 */
  img, video, canvas, svg, iframe, table, pre{ max-width:100%; height:auto; }
  pre{ overflow-x:auto; }
}

/* 가로 모드 낮은 높이 (패드/폰 가로) — 히어로가 화면을 다 먹지 않게 */
@media (max-height:520px) and (orientation:landscape){
  .onae-hero, .hero{ min-height:auto !important; padding-block: var(--onae-space-5); }
}

/* ─────────────────────────────────────────────
 * 5. 접근성 / 시스템 설정 존중
 * ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--onae-focus, #2563eb);
  outline-offset:2px;
  border-radius:6px;
}
/* iOS 폼 자동 확대 방지: 입력 글자는 반드시 16px 이상 */
input, select, textarea{ font-size:max(16px, 1em); }

/* 입력창도 손가락으로 누를 수 있어야 한다 (체크박스/라디오/히든은 제외) */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
select, textarea, button{
  min-height: var(--onae-tap);
}
textarea{ min-height: calc(var(--onae-tap) * 2); }

/* 안전영역(노치) */
.onae-safe{
  padding-left:max(var(--onae-gutter), env(safe-area-inset-left));
  padding-right:max(var(--onae-gutter), env(safe-area-inset-right));
}
.onae-safe-bottom{ padding-bottom:max(var(--onae-space-4), env(safe-area-inset-bottom)); }