/*! onae-mobile-fix.css v1.0.0 — 모바일·패드 안전망 (선택 적용)
 *
 * 왜 필요한가:
 *   onae-responsive.css 는 "새로 만드는 화면" 을 위한 토큰·유틸리티다.
 *   하지만 기존 사이트에는 이미 `h1{font-size:52px}` `table{width:980px}` 같은
 *   고정값 CSS 가 살아 있어서, 파일만 링크해서는 아무것도 안 고쳐진다.
 *   (실측: 링크만 했을 때 CRITICAL 225 → 138. 절반밖에 안 줄었다.)
 *   이 파일이 그 나머지를 마크업 수정 없이 덮는다.
 *
 * 안전 원칙 — 반드시 지킬 것:
 *   1) 모든 규칙은 @media (max-width:1024px) 안에만 있다. **데스크톱은 1픽셀도 안 변한다.**
 *   2) 색·폰트패밀리·브랜드 요소는 건드리지 않는다. 크기와 흘러넘침만 다룬다.
 *   3) 레이아웃 구조(배치 순서, 라우팅, 데이터)는 바꾸지 않는다.
 *   4) 의도적으로 넓어야 하는 것(캐러셀·가로스크롤 영역)은 예외 처리한다.
 *      → 그런 요소에는 `data-onae-keep` 또는 `.onae-scroll-x` 를 붙이면 이 파일이 비켜간다.
 *
 * 적용: onae-responsive.css 다음에 링크. 문제가 있는 사이트에만 넣으면 된다.
 */

@media (max-width: 1024px) {

  /* ── 0. 흘러넘침의 근본 원인 두 가지 ───────────────── */
  /* (가) content-box + width:100% + padding 조합 */
  *, *::before, *::after { box-sizing: border-box; }

  /* (나) 고정 픽셀 폭. 화면보다 넓은 것만 줄인다. */
  body *:not([data-onae-keep]):not([data-onae-keep] *):not(.onae-scroll-x):not(.onae-scroll-x *) {
    max-width: 100%;
  }
  img, video, canvas, svg, iframe, embed, object { height: auto; }

  /* 표는 줄이지 말고 가로로 굴린다 (값이 뭉개지면 안 되므로) */
  table:not([data-onae-keep]) {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  pre, code { overflow-x: auto; }

  /* 가로 방향 flex 는 접히게 한다 (카드 3장이 나란히 튀어나가는 대표 원인) */
  [class*="card"], [class*="cards"], [class*="grid"], [class*="row"],
  [class*="flex"], [class*="col"], [class*="list"] {
    flex-wrap: wrap;
  }
  /* 이미 좁은 화면인데 최소폭이 박혀 있으면 무시 */
  [style*="min-width"], [class*="card"] > *, [class*="col"] > * { min-width: 0; }

  /* ★ flex-wrap:wrap 만으로는 안 접힌다.
   *   `flex:1`(= flex-basis:0) 인 카드는 아무리 좁아도 절대 넘치지 않으므로 계속 한 줄에 남고,
   *   360px 화면에서 카드 하나가 100px 이 되어 제목이 4줄로 부서진다.
   *   최소 폭을 줘야 비로소 줄바꿈이 일어난다. */
  [class*="card"]:not([data-onae-keep]):not(nav *):not(header *),
  [class*="col"]:not([data-onae-keep]):not(nav *):not(header *) {
    min-width: min(100%, 240px);
  }

  /* ── 터치·입력은 패드에서도 똑같이 필요하다 (아이패드도 손가락으로 쓴다) ── */
  a:not([data-onae-keep]), button:not([data-onae-keep]),
  [role="button"], summary, select {
    min-height: 44px;
  }
  /* 네비 자체가 안 접히면 링크가 눌려서 "자주묻는질문" 이 두 줄로 부서진다 */
  nav, [class*="nav"], [class*="menu"], [class*="gnb"] { flex-wrap: wrap; }

  nav a, [class*="nav"] a, [class*="menu"] a, header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;              /* "홈" 같은 한 글자 링크가 27px 이 되는 것 방지 */
    padding-inline: 8px;
    white-space: nowrap;          /* 메뉴 이름은 절대 두 줄이 되면 안 된다 */
  }
  /* 본문 문장 속 인라인 링크는 제외 (문단이 뚝뚝 끊긴다) */
  p a, li a, td a { display: inline; min-height: 0; min-width: 0; padding-inline: 0; }

  /* iOS 자동 확대 방지 — 아이패드도 동일 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: max(16px, 1em) !important;
    min-height: 44px;
    max-width: 100%;
  }
  textarea { min-height: 88px; }

  /* 가격·배지가 패드에서도 두 줄로 쪼개지지 않게 */
  [class*="price"]:not([data-onae-keep]),
  [class*="amount"]:not([data-onae-keep]),
  [class*="badge"]:not([data-onae-keep]),
  [class*="chip"]:not([data-onae-keep]),
  [class*="tag"]:not([data-onae-keep]) {
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  /* ★ nowrap 은 "숫자가 쪼개지지 않게" 하려는 것이지 "부가 문구까지 한 줄에 붙들어라" 가 아니다.
   *   .tier-price 안의 <small>· 30일 이용권</small> 같은 자식까지 묶이면
   *   오히려 화면 밖으로 밀려나 가로 스크롤이 생긴다(실제 면접끝판왕 /pricing/ 에서 발생).
   *   → 컨테이너의 직접 텍스트만 보호하고, 자식 요소는 다시 접히게 푼다. */
  [class*="price"] > *, [class*="amount"] > *, [class*="badge"] > *,
  [class*="chip"] > *, [class*="tag"] > *, [class*="label"] > * {
    white-space: normal;
  }
}

/* ── 1. 패드 (768~1024px): 글자 상한 ─────────────────── */
@media (max-width: 1024px) and (min-width: 768px) {
  h1:not([data-onae-keep]) { font-size: clamp(28px, 4.4vw, 40px) !important; }
  h2:not([data-onae-keep]) { font-size: clamp(22px, 3.2vw, 30px) !important; }
  h3:not([data-onae-keep]) { font-size: clamp(19px, 2.4vw, 26px) !important; }
}

/* ── 2. 모바일 (≤767px): 본격 보정 ───────────────────── */
@media (max-width: 767px) {

  /* 글자 상한 — "글자가 커서 세련미가 떨어진다" 의 직접 해결 */
  h1:not([data-onae-keep]) { font-size: clamp(24px, 6.4vw, 30px) !important; line-height: 1.28 !important; }
  h2:not([data-onae-keep]) { font-size: clamp(20px, 5.4vw, 25px) !important; line-height: 1.3  !important; }
  h3:not([data-onae-keep]) { font-size: clamp(18px, 4.6vw, 21px) !important; line-height: 1.34 !important; }
  h4:not([data-onae-keep]) { font-size: clamp(17px, 4.2vw, 19px) !important; }

  /* 커다란 가격 표기 — 흔히 34~48px 로 박혀 있다 */
  [class*="price"]:not([data-onae-keep]),
  [class*="amount"]:not([data-onae-keep]),
  [class*="num"]:not([data-onae-keep]) {
    font-size: clamp(17px, 4.8vw, 21px) !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap;              /* 가격이 두 줄로 쪼개지는 것 방지 */
  }

  /* 리드 문단이 22px 씩 되어 있는 경우 */
  p:not([data-onae-keep]),
  [class*="lead"]:not([data-onae-keep]),
  [class*="desc"]:not([data-onae-keep]),
  [class*="sub"]:not([data-onae-keep]) {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.66 !important;
  }

  /* 너무 작은 글자도 문제 (11~12px 안내문) */
  small, .note, [class*="note"], [class*="caption"], [class*="hint"], [class*="tiny"] {
    font-size: 14px !important;
  }

  /* 배지·칩: 폭이 박혀 있어 두 줄로 접히는 대표 사례 */
  [class*="badge"]:not([data-onae-keep]),
  [class*="chip"]:not([data-onae-keep]),
  [class*="tag"]:not([data-onae-keep]),
  [class*="label"]:not([data-onae-keep]) {
    width: auto !important;
    min-width: 0 !important;
    font-size: clamp(12px, 3.4vw, 14px) !important;
    white-space: nowrap;
  }
  [class*="price"] > *, [class*="badge"] > *, [class*="chip"] > *,
  [class*="tag"] > *, [class*="label"] > * { white-space: normal; }

  /* 한글 줄바꿈 — 어절 중간에서 끊기지 않게 */
  body, h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th,
  a, button, span, div, label, figcaption {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  h1, h2, h3, h4 { text-wrap: balance; }

  /* 터치 타깃 — 시각 크기는 그대로 두고 히트 영역만 넓힌다 */
  a:not([data-onae-keep]), button:not([data-onae-keep]),
  [role="button"], summary, select {
    min-height: 44px;
  }
  /* 네비게이션 링크는 세로 정렬이 필요하므로 flex 로 중앙 정렬 */
  nav a, [class*="nav"] a, [class*="menu"] a, header a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 6px;
  }
  /* 본문 문장 속 인라인 링크는 제외 (문단이 뚝뚝 끊긴다) */
  p a, li a, td a { display: inline; min-height: 0; padding-inline: 0; }

  /* iOS 자동 확대 방지 — 반드시 16px 이상 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: max(16px, 1em) !important;
    min-height: 44px;
    max-width: 100%;
  }
  textarea { min-height: 88px; }

  /* 데스크톱용 큰 여백을 모바일 여백으로 */
  [class*="hero"], [class*="section"], section, main > div {
    padding-left: min(20px, 5vw);
    padding-right: min(20px, 5vw);
  }

  /* 가로 스크롤 최종 방어선 */
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ── 3. 소형 폰 (≤480px) ─────────────────────────────── */
@media (max-width: 480px) {
  h1:not([data-onae-keep]) { font-size: clamp(22px, 6.8vw, 27px) !important; }
  [class*="price"]:not([data-onae-keep]) { font-size: clamp(16px, 4.4vw, 19px) !important; }
  /* 버튼은 폭을 채워 오조작을 줄인다 */
  [class*="btn"]:not([data-onae-keep]):not(nav *):not(header *),
  button[type="submit"] { width: 100%; }
}