/* ══════════════════════════════════════════════════════════════════════════
   📐 화면 비율 통일 — 페이지를 옮길 때 화면이 «커졌다 작아지는» 현상 제거
       (2026-08-14 피드백 ①)

   ── 무엇이 문제였나 ──────────────────────────────────────────────────
   제보: "페이지마다 화면 비율이 달라서, 페이지 이동 시 화면이 순간적으로
          커졌다 작아지는 현상이 발생함."

   원인은 «CSS 폭» 이 아니라 그 아래 두 가지였다.

   ① 세로 스크롤바가 페이지마다 생겼다 없어진다.
      긴 페이지(홈)에는 스크롤바가 있고 짧은 페이지(결제완료 등)에는 없다.
      스크롤바가 사라지는 순간 뷰포트가 15~17px 넓어지고, 가운데 정렬된
      본문이 그만큼 옆으로·크게 벌어진다. 관리자 화면은 zoom:1.3 이 걸려
      있어 이 흔들림이 1.3배로 보인다. → 이것이 «커졌다 작아지는» 의 정체다.

   ② viewport meta 가 페이지마다 달랐다(18가지).
      maximum-scale=1·user-scalable=no 인 페이지와 maximum-scale=5 인
      페이지를 오가면 모바일에서 확대 배율 기준 자체가 바뀐다.
      → 이건 각 HTML 의 meta 를 한 줄로 통일해서 고쳤다(이 파일 밖).

   ── 이 파일이 하는 일 ────────────────────────────────────────────────
   · scrollbar-gutter: stable — 스크롤바 자리를 «항상» 비워 둔다. 스크롤바가
     있든 없든 본문 폭이 같아지므로, 페이지를 옮겨도 폭이 튀지 않는다.
   · 확대/축소 기준(text-size-adjust)을 모든 페이지에서 같게 고정한다.
   · 공통 레이아웃 토큰(--mi-page-max 등)과 .mi-page 유틸리티를 제공한다.
     새로 만드는 화면은 폭을 직접 적지 말고 이 토큰을 쓴다.

   ── 일부러 하지 않은 것 ──────────────────────────────────────────────
   ⛔ 기존 페이지의 max-width 값을 강제로 덮어쓰지 않는다.
      화면마다 담는 내용이 달라서(카드 3열 vs 읽기 전용 문서) 폭을 한 값으로
      눌러 버리면 멀쩡히 잘 보이던 화면들이 같이 망가진다. 폭이 다른 것 자체는
      제보된 증상의 원인이 아니었다 — 원인은 «옮길 때 흔들리는» 것이었다.
   ⛔ 관리자 zoom:1.3 을 여기로 옮기지 않는다.
      CLAUDE.md 에 «관리자 PC 확대는 각 페이지에서 zoom:1.3. 공용 CSS 로 묶지 말 것»
      이라고 적혀 있다. 여기서 묶으면 학생 화면까지 1.3배가 된다.
   ⛔ html/body 에 overflow-x:hidden 을 걸지 않는다. position:sticky 가 죽는다.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 본문 컨테이너 기준 폭 — 새 화면은 이 토큰을 쓴다 */
  --mi-page-max: 1120px;   /* 넓은 화면(대시보드·표) */
  --mi-read-max: 820px;    /* 읽는 화면(안내·약관·FAQ) */
  --mi-form-max: 560px;    /* 입력 화면(로그인·결제) */
  --mi-page-pad: 20px;     /* 좌우 여백 (데스크톱) */
  --mi-page-pad-sm: 14px;  /* 좌우 여백 (모바일) */

  /* 브레이크포인트 — 값만 참고용으로 모아 둔다(미디어쿼리에는 변수를 못 쓴다) */
  --mi-bp-tablet: 900px;
  --mi-bp-mobile: 600px;
}

html {
  /* ★ 핵심 한 줄 — 스크롤바 자리를 항상 확보해 페이지 간 폭 변화를 없앤다.
       지원 안 하는 구형 브라우저는 그냥 무시한다(예전과 같은 동작). */
  scrollbar-gutter: stable;
  /* 모바일 가로모드에서 브라우저가 글자만 임의로 키우는 것을 막는다 —
     페이지마다 커지는 정도가 달라 «비율이 다르다» 로 보이던 원인 중 하나. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 공통 컨테이너 유틸리티 — 새 화면 전용.
   기존 화면에 억지로 끼워 넣지 말 것(위 «일부러 하지 않은 것» 참고). */
.mi-page,
.mi-page-read,
.mi-page-form {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--mi-page-pad);
}
.mi-page      { max-width: var(--mi-page-max); }
.mi-page-read { max-width: var(--mi-read-max); }
.mi-page-form { max-width: var(--mi-form-max); }

@media (max-width: 600px) {
  .mi-page,
  .mi-page-read,
  .mi-page-form { padding-inline: var(--mi-page-pad-sm); }
}

/* 이미지가 컨테이너를 밀어내 가로 스크롤을 만드는 것을 막는다 —
   가로 스크롤바가 생겼다 없어지는 것도 «화면이 튀는» 것으로 보인다. */
img, video, canvas, svg, iframe { max-width: 100%; }

/* 표는 자기 상자 안에서만 가로로 스크롤한다(문서 전체가 밀리지 않게). */
.mi-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }