/* ============================================================
   TopGrammar mobile.css — 모바일 전용 레이어 (2026-07-20)
   전 규칙 max-width 미디어 내부. 데스크톱(>=1024px) 무영향(GPT 회귀검수 확인).
   로드 위치: 각 페이지 </head> 직전(인라인 <style>보다 뒤 = 캐스케이드 승리·!important 0).
   설계: Fable mobile-first Architect · 구현: Opus · GPT 적대검수 R1 반영(M1 min-height화·M2 drop).
   ============================================================ */

@media (max-width: 768px) {
  /* ★2026-08-07: 모바일 최소 글씨 — 12px 미만 74건 대응.
     --text-xs 는 배지·라벨 전용이라 데스크톱에서는 위계를 만들지만,
     스마트폰에서는 40대 학부모가 읽는 하한을 넘는다. 모바일에서만 올린다.
     위계는 크기 대신 letter-spacing·weight·색으로 유지된다. */
  :root { --text-xs: 0.8125rem; }          /* 12px → 13px */
  .title-badge { font-size:0.8125rem; }   /* 10.4px → 13px */
}

/* ---------- M0 · P0: 모바일 내비 붕괴 수정 + 앱형 메뉴 ----------
   원인: backdrop-filter(.site-header)가 fixed .site-nav의 containing block을 생성 →
   bottom:0이 헤더(68px) 기준으로 붕괴(패널 48px). 명시적 height로 복구.
   GPT R1: 변수 폴백·box-sizing·overscroll 보강. */
@media (max-width: 768px) {
  .site-nav {
    box-sizing: border-box;
    bottom: auto;
    height: calc(100vh - var(--header-height, 68px));
    height: calc(100dvh - var(--header-height, 68px));
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* 앱형 메뉴: 행 단위 풀-폭 터치(52px)·구분선·활성 인디케이터 */
  .site-nav__link {
    display: flex; align-items: center;
    min-height: 52px;
    padding: var(--space-2) var(--space-4);
    font-size:1.125rem;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0;
  }
  .site-nav__link--active {
    background: var(--color-bg-alt);
    box-shadow: inset 3px 0 0 var(--color-accent);
  }
  .site-nav__cta {
    display: flex; align-items: center; justify-content: center;
    min-height: 52px; font-size:1rem;
  }
}

/* ---------- M1 · 터치 타깃 44px+ (실 레이아웃 공간으로 확보·GPT R1 반영)
   네거티브마진/pseudo 확장 폐기 → min-height + inline-flex로 실제 44px 보장. ---------- */
@media (max-width: 768px) {
  .site-header__hamburger { width: 44px; height: 44px; }

  .site-footer__link { display: flex; align-items: center; min-height: 44px; padding: var(--space-2) 0; }
  .site-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

  p a[href^="tel:"], li a[href^="tel:"], td a[href^="tel:"], div > a[href^="tel:"] {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  a.tel { display: flex; align-items: center; min-height: 44px; }

  .btn--sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .tg-row__cta { min-height: 44px; }
  .tg-evbar__link { display: inline-flex; align-items: center; min-height: 44px; }

  .legal-toc__list li { margin-bottom: 0; }
  .legal-toc__list a { display: flex; align-items: center; min-height: 44px; padding: 2px var(--space-2); }

  /* ★2026-08-07: 가로모드(낮은 높이)에서 58px 고정 바가 화면을 과하게 먹는다 → 축소 */
  /* ★R1 GPT: 높이만 조건으로 두면 납작한 데스크톱 창·분할 화면에도 발화한다.
     포인터가 정밀하지 않은(터치) 기기로 한정한다. */
  @media (orientation: landscape) and (max-height: 500px) and (any-pointer: coarse) {
    .tg-sticky__btn { height: 46px; font-size:1rem; }
    body { padding-bottom: calc(46px + env(safe-area-inset-bottom) + 8px); }
    /* ★C-2 육안: 가로모드에서 테마 토글이 본문을 덮었다 → 더 작게·더 구석으로 */
    body:has(.tg-sticky) .theme-toggle,
    body:has(.tg-sticky) .scroll-top { bottom: calc(46px + env(safe-area-inset-bottom) + 6px); }
    .theme-toggle { width: 30px; height: 30px; font-size:0.8125rem; left: 6px; opacity: 0.42; }
  }
  .back-to-top { display: inline-flex; align-items: center; min-height: 44px; }
  .theme-toggle { width: 44px; height: 44px; }
  .skip-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- M3 · index 섹션 리듬 압축 (세로 패딩만·가로 무변경으로 가장자리 밀착 방지) ---------- */
@media (max-width: 640px) {
  .tg-sec { padding-top: 40px; padding-bottom: 40px; }
  .tg-works { padding-top: 36px; padding-bottom: 38px; }
  .tg-row { margin-bottom: 44px; }
  .tg-sub { font-size:1rem; margin-bottom: 36px; }
  .tg-h2 { margin-bottom: 10px; }
  .tg-final__in { padding-top: 48px; padding-bottom: 48px; }
  .tg-director { padding: 20px; }
  .tg-gal { gap: 10px; }
  /* `.tg-proof__cards{gap:16px}` 제거(2026-08-04): 이 구간은 항상 1단이라 열 간격이 그려지지 않는다.
     카드 세로 간격은 `.tg-pcard{margin-bottom}` 이 담당한다. 다시 2단이 되면 재검토할 것. */
}

/* ---------- M4 · 히어로 타이포 미세 조정 (초소형 폰) ---------- */
@media (max-width: 420px) {
  .tg-hero h1 { font-size:clamp(1.875rem,8.7vw,2.375rem); }
}

/* ---------- M5 · sticky CTA 터치 피드백 ---------- */
@media (max-width: 1023px) {
  .tg-sticky__btn--test:active { filter: brightness(0.92); }
}

/* M2(실적 상단화 CSS order)는 GPT R1 지적(main flex 부작용·시각/DOM 순서 불일치 a11y)으로 제외.
   실적 노출은 M3 리듬 압축으로 자연 단축(대체). DOM 레벨 재배치는 별도 focused 작업. */

/* ---------- M6 · 후기 섹션 스마트폰 가독성 (2026-08-05 · GPT·Gemini 토론 R1 수렴)
   두 검수자 모두 A급으로 지적: 본문 13.44px 는 40~50대 학부모에게 작고,
   9장을 1열로 3,850px 나열하면 2~3장 뒤부터는 비교가 아니라 반복 스크롤이 된다.
   가로 스와이프(캐러셀)는 기각 — 장문 카드와 가로 제스처가 맞지 않고,
   실측 결과 오프캔버스 나브와 겹쳐 페이지 가로 오버플로 1,991~8,870px 을 만든다.
   채택 = 글자 확대 + 3장 우선 노출 + 더보기. 실측(390px):
     현행 후기 3,850px·문서 25,193px → 적용 후 2,243px·23,587px (본문 13.44→16px) ---------- */
@media (max-width: 729px) {
  .tg-pcard .tg-pcard__q { font-size:1rem; line-height: 1.62; }
  .tg-proof__lead, .tg-proof__foot { font-size:0.875rem; line-height: 1.65; }
  .tg-pcard__rel { font-size:0.8125rem; line-height: 1.55; }
  .tg-pcard__badge { font-size:0.8125rem; }
  .tg-pcard__name { font-size:1rem; }
  .tg-pcard__from { font-size:1rem; }
  .tg-pcard { padding: 16px 15px; }

  /* 접기는 JS가 .tg-proof__cards 에 is-foldable 을 붙였을 때만 동작한다.
     JS가 없거나 실패하면 9장이 그대로 보인다(점진적 향상·GPT R1 지적). */
  .tg-proof__cards.is-foldable:not(.is-open) .tg-pcard:nth-child(n+4) { display: none; }
  .tg-proof__more { display: none; }
  .tg-proof__cards.is-foldable + .tg-proof__more {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; margin-top: 4px; padding: 12px 18px;
    /* rem 기반이라 iOS Dynamic Type 확대에 자동 대응된다(추가 작업 불필요) */
    background: #fff; color: var(--color-primary);
    border: 1.5px solid var(--color-primary); border-radius:12px;
    font-size:1rem; font-weight: 800; cursor: pointer;
  }
  .tg-proof__more::after { content: "▾"; font-size: .85em; }
  .tg-proof__cards.is-open + .tg-proof__more::after { content: "▴"; }
  html.dark .tg-proof__cards.is-foldable + .tg-proof__more {
    background: #1E1E3A; color: #8FB4DC; border-color: #3A5C82;
  }
}
/* `html:not(.light)` 는 반드시 prefers-color-scheme 안에 둔다. 밖에 두면
   index 가 `<html class="light">` 를 놓는 지금은 불발이지만, 그 한 줄이 빠지는
   순간 라이트 모드 전원에게 다크 버튼이 나간다(잠복 결함). */
@media (prefers-color-scheme: dark) {
  @media (max-width: 729px) {
    html:not(.light) .tg-proof__cards.is-foldable + .tg-proof__more {
      background: #1E1E3A; color: #8FB4DC; border-color: #3A5C82;
    }
  }
}

/* ---------- M7 · 작은 글자 하한선 (2026-08-06 · 실측 12건 교정)
   390px 실측에서 14px 미만 텍스트가 12건이었다. 주 방문자가 40~50대 학부모라
   이 크기는 읽으라는 뜻이 아니다. 특히 법무 고지(.tg-claim-note 12.5px,
   .tg-pcard__rel 13.1px)는 공정위 심사지침상 "쉽게 찾을 수 있어야" 하는 문구이므로
   작게 두는 것 자체가 위험이다.
   스마트폰 하한: 법무 고지·본문성 14px / 배지·라벨 13px.
   데스크톱은 무영향(전 규칙 미디어쿼리 안). ---------- */
@media (max-width: 729px) {
  .tg-claim-note,
  .tg-hero__panel-foot,
  .tg-pcard__rel { font-size:0.875rem; line-height: 1.6; }

  .tg-hero__eyebrow,
  .tg-hero__chip,
  .tg-eyebrow,
  .tg-pcard__badge,
  .tg-assist__badge { font-size:0.8125rem; }

  /* 헤더 로고는 링크다 — 40px 이라 터치 규격 44px 에 미달했다. */
  .site-header__logo { min-height: 44px; display: inline-flex; align-items: center; }

  /* 정보성 작은 글자 — 학부모가 실제로 읽어야 하는 내용이라 하한을 13px 로 올린다.
     운영시간·법정표기·면책 고지·출처 표기가 여기 해당한다. */
  /* .tgf-note / .tgf-hub small 은 푸터 안 <style> 블록에 정의돼 있어 문서 순서상
     이 파일보다 뒤에 온다. !important 없이 특이도로 이긴다(클래스 2개). */
  .site-footer .tgf-note,
  .site-footer .tgf-hub small,
  .tgf-note,
  .site-footer__info,
  .site-footer__info span,
  .site-footer__bottom,
  .site-footer__bottom a,
  .tg-evbar__foot,
  .tg-evbar__link,
  .tg-rev__m,
  .tg-tcard__role,
  .small { font-size:0.8125rem; line-height: 1.6; }

  /* ★2026-08-08 개정1(페이블 R3): "장식은 12px 까지만" 조항을 폐기한다.
     40대 학부모 기준 12px 는 읽기 부담이고, 장식/정보의 경계는 실제로 모호하다.
     단일 하한 13px. 위계는 크기가 아니라 weight·letter-spacing·색이 담당한다. */
  .tg-hero__scroll,
  .tg-mira__eyebrow,
  .tg-evbar__label,
  .site-header__logo-sub { font-size:0.8125rem; }
  /* ★2026-08-08 2차개정 A급1: 임계 12.5→13.0 으로 올리자 드러난 12.5~12.99px 구간.
     rem 리터럴로 선언된 것들이라 토큰으로 안 잡혔다. 모바일에서만 13px 하한을 강제한다. */
  .consent,
  .notice__tag,
  .reg-consent,
  .reg-note,
  .tg-assist__badge,
  .tg-claim-note,
  .tg-claim-note::before,
  .tg-evbar__foot,
  .tg-evbar__label,
  .tg-eyebrow,
  .tg-gcard__badge,
  .tg-hero__chip,
  .tg-hero__panel-foot,
  .tg-hero__panel-list small,
  .tg-hero__scroll,
  .tg-mira__eyebrow,
  .tg-pcard__badge,
  .tg-pcard__rel,
  .tg-rev__m,
  .tg-tcard__role,
  .tgf-hub small,
  .tgf-note { font-size:0.8125rem; }
}

/* ---------- M8 · 히어로 시각 순서 재배열 (2026-08-06 · 페이블 설계)
   ★실측: CTA 는 없는 게 아니라 y=850 에 있어 폴드(844)보다 6px 잘려 있었다.
   문제는 존재가 아니라 위치다. 콘텐츠는 하나도 지우지 않고 순서만 바꿔
   CTA 를 첫 화면 안으로 끌어올린다(예상 y≈605).
   인터랙티브 요소의 탭 순서는 DOM·시각이 동일하게 유지된다. ---------- */
@media (max-width: 729px) {
  .tg-hero__inner { display: flex; flex-direction: column; align-items: stretch; }
  .tg-hero__eyebrow { order: 0; align-self: flex-start; }
  .tg-hero h1 { order: 1; }
  .tg-hero__slogan { order: 2; }
  .tg-hero__lead { order: 3; }
  .tg-hero__inner > .tg-hero__sign { order: 4; margin-bottom: 18px; }
  .tg-hero__cta { order: 5; }
  .tg-hero__cta ~ .tg-hero__sign { order: 6; margin-top: 14px; }
  /* R2 Q-01 (2026-08-11): 증거(실적 패널)를 CTA 직후로 올린다.
     종전 시각 순서는 리드→서명→CTA→서명2→리드-서브→칩→패널 이라, 독자가 행동 요청을
     지난 뒤 다시 부속 설명을 만나고 가장 강한 증거(패널 697px)가 y1,002(두 번째 화면)에 있었다.
     서사 = 약속 → 행동 → 증거 → 부속 → 고지. CTA 위치(y565~696)와 실증 고지·대기 안내
     위치(y1,709/1,802)는 불변이며, 칩의 「1등급 연평균 3명」 주장과 실증 고지 간격이
     841px → 23px 로 줄어 법무 인접성이 개선된다. DOM 무변경(탭 순서 불변). */
  /* R1 검수(GPT B-01) 반영: 패널과 실증 고지 사이에 리드-서브·칩이 끼어 간격이 10→234px 로
     벌어졌다는 지적. 정량 주장(패널·칩)을 고지 바로 위에 모은다 —
     패널 7 → 칩 8 → 실증고지 9 → 리드-서브 10 → 대기안내 11. */
  .tg-hero__chips { order: 8; margin-top: 6px; }
  .tg-claim-note { order: 9; }
  .tg-hero__lead--sub { order: 10; }
  .tg-hero__panel { order: 7; }
  .tg-hero__notice { order: 11; }
}

/* ---------- M9 · 법무 고지 플랫화 (내용·글자 크기·위치 불변, 시각 무게만 하향)
   ★실측: 두 번째 화면의 법무·안내 텍스트가 110+141+190 = 441px, 화면의 52%였다.
   반면 최강 전환 자산인 실적 5건은 64px 가로 스크롤에 1.5개만 노출 —
   각주가 증거보다 3배 컸다. 위계가 정확히 거꾸로였다.
   박스는 "여기를 봐라"라는 신호다. 면책에 박스를 3개 주면 학부모의 두 번째 화면이
   경고문 게시판이 된다. 박스만 걷어내면 내용은 그대로인데 위계만 실적 아래로 내려간다.
   ※ 문구·글자 크기(14px)·주장과의 근접 위치는 건드리지 않는다(표시광고법 §5①·심사지침).
      접기(<details>)는 "쉽게 인식" 요건과 충돌하므로 쓰지 않는다. ---------- */
@media (max-width: 729px) {
  .tg-hero .tg-claim-note {
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 0 24px; margin-top: 10px;
    color: rgba(255,255,255,.85);
  }
  .tg-hero .tg-claim-note::before { left: 0; top: 3px; }
  .tg-hero__panel-foot { border-top: 0; padding-top: 0; margin-top: 10px; }
}

/* ---------- M11 · 실적 패널: 가로 스크롤 스트립 → 세로 증거 리스트
   5건 중 1.5건만 보이던 것을 전부 노출한다. 스크롤해야 보이는 증거는 없는 증거다. ---------- */
@media (max-width: 729px) {
  .tg-hero__panel {
    margin-top: 10px; padding: 16px 16px 12px; border-radius:16px;
    background: rgba(15,38,64,.5); border: 1px solid rgba(255,255,255,.16);
  }
  .tg-hero__panel-head { display: block; margin-bottom: 6px; }
  .tg-hero__panel-list { flex-direction: column; gap: 0; overflow: visible; }
  .tg-hero__panel-list li {
    flex: initial; display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 2px; border-radius: 0; background: transparent; border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .tg-hero__panel-list li:last-child { border-bottom: 0; }
  .tg-hero__panel-list b { white-space: normal; font-size:1rem; color: #fff; }
  .tg-hero__panel-list small {
    display: block; color: rgba(255,255,255,.82); font-size:0.8125rem; margin-top: 2px; line-height: 1.5;
  }
  .tg-hero__panel-list .ic { color: #FFB877; }
}