/* ══════════════════════════════════════════════════════════════════════
   마추 모바일 — 균형 보정 (2026-09-17)

   배치(틀)는 그대로 두고 여백·정렬만 맞춘다. 색은 건드리지 않는다('전부 초록'은 green*.css 담당).

   ⚠ 2026-09-17 대표 지시로 **메인(홈)은 원복** — 이 파일의 모든 규칙에서 `.m3-home` 을 뺐다.
     `html body .m3:not(.m3-home)` 이 그 장치다. 홈 전용이던 규칙(메뉴 카드·신뢰 지표 손질)은 삭제했다.
     홈 PHP(theme/rb.basic/rb.layout/jtm_main/index.php)도 원본으로 되돌렸다
     — 다듬었던 판은 /home/machu/apk-archive/index.php.m3polished.bak 에 있다.

   ⚠ 파일 이름이 green'x'- 인 이유 — jtm_ui_assets() 가 glob('rb.css/m3/green*.css') 를
     sort() 해서 싣는데, '-'(45) < '.'(46) 이라 green-*.css 는 전부 green.css 보다 먼저 온다.
     이 파일은 green.css 뒤(마지막)에 와야 하므로 'greenx-' 로 시작한다.
   ⚠ 전부 @media (max-width:900px) 안 · .m3 스코프 → PC(≥901px)는 .m3 가 display:none 이라 무관.
   ⚠ 선택자 앞 `html body` — 화면별 CSS(m3/race.css·stats.css…)가 뒤에 실려도 이기게.
   되돌리기: 이 파일만 지우면 나머지 화면도 전부 원래대로.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

/* ── 1. 한글이 단어 중간에서 잘리던 것 ──────────────────────────────────
   그누보드 default.css 의 `p { word-break: break-all }` 은 *요소* 규칙이라
   .m3 의 keep-all *상속*을 이긴다(상속은 아무리 약한 직접 규칙에도 진다).
   그래서 <p> 로 쓴 문단만 골라 "더 특별해집/니다." 처럼 잘렸다. */
html body .m3:not(.m3-home) p,
html body .m3:not(.m3-home) li,
html body .m3:not(.m3-home) dt,
html body .m3:not(.m3-home) dd { word-break: keep-all; overflow-wrap: break-word; }

/* 마지막 줄에 한 단어만 남는 고아 줄 줄이기 (지원 안 하는 브라우저는 무시) */
html body .m3:not(.m3-home) .m3-lead,
html body .m3:not(.m3-home) .m3-sub,
html body .m3:not(.m3-home) .m3-ctabar-note,
html body .m3:not(.m3-home) .m3-note span { text-wrap: pretty; }

/* ── 2. 히어로 — 일러스트 잘림 · 손글씨 겹침 ────────────────────────────
   2026-09-17 375px 측정: 일러스트가 오른쪽으로 8px 빠져나가 잘렸고(오늘의 경주·마추픽·이용권),
   손글씨가 일러스트 위에 그대로 올라타 글자가 뭉갰다(적중률 리포트 100% · 오늘의 경주 54% · 이용가이드 19%).
   → 손글씨는 위, 일러스트는 아래 — 세로로 갈라 놓고 오른쪽 끝을 화면 안으로 들인다. */
html body .m3:not(.m3-home) .m3-hero .m3-hero-art {
  right: 0; left: auto;
  top: auto; bottom: 10px;
  width: 38%; max-width: 172px; height: auto;
}
html body .m3:not(.m3-home) .m3-hero .m3-hero-photo { right: 0; }

/* 손글씨 — 흐름 배치인 이용권(.m3-plans)만 빼고 위 오른쪽 고정 */
html body .m3:not(.m3-plans):not(.m3-home) .m3-hero .m3-script {
  top: 14px; right: 16px; bottom: auto; left: auto;
  max-width: 50%; font-size: 19px; line-height: 1.22;
}
html body .m3:not(.m3-home) .m3-hero .m3-script::after { width: 58%; }

/* 이용권 — 손글씨가 흐름(본문 아래)에 있는 유일한 화면이다.
   여기서만 일러스트를 위에 둔다(아래로 내리면 손글씨와 89% 겹친다).
   밑줄은 화면 밖으로 나가 있던 것을 안으로 들인다. */
html body .m3.m3-plans .m3-hero .m3-hero-art { top: 14px; bottom: auto; }
html body .m3.m3-plans .m3-hero .m3-script { max-width: 100%; }
html body .m3.m3-plans .m3-hero .m3-script::after { width: 52%; }

/* 적중률 리포트 — 히어로 아래쪽에 모드 탭(실전픽/백테스트)이 붙어 있어,
   일러스트를 바닥에 내리면 탭에 허리가 잘린다(측정: 탭 상단 y=159, 일러스트 119~219).
   손글씨 아래(92) ~ 탭 위(159) 사이 빈 띠에 맞춰 높이를 못 박아 앉힌다. */
html body .m3.m3-stats .m3-st-hero .m3-hero-art {
  top: 90px; bottom: auto; height: 64px; width: auto; max-width: 34%;
}

/* 이용가이드 — guide.css 가 네 클래스(.m3.m3-guide .m3-guide-hero .m3-hero-art)라
   위 공통 규칙을 이긴다. 같은 무게로 다시 눌러 준다. */
html body .m3.m3-guide .m3-guide-hero .m3-hero-art {
  top: auto; bottom: 10px; width: 38%; max-width: 172px;
}

/* ── 3. 적중률 리포트 2연 카드 — 마지막 줄 바닥 정렬 ─────────────────────
   좌(이번주 적중) 3줄 · 우(누적 적중) 3줄인데 마지막 줄 바닥이 13.7px 어긋나 있었다.
   전폭 카드(.m3-st-kpi1)와 한 줄 카드(.m3-st-today)는 가로 배치라 건드리지 않는다. */
html body .m3.m3-stats .m3-st-kpis .m3-kpi:not(.m3-st-kpi1):not(.m3-st-today) {
  display: flex; flex-direction: column;
}
html body .m3.m3-stats .m3-st-kpis .m3-kpi:not(.m3-st-kpi1):not(.m3-st-today) > :last-child {
  margin-top: auto;
}

/* ── 4. 카운트다운 — 38px 은 옆 버튼·라벨과 붙어 보인다 ── */
html body .m3:not(.m3-home) .m3-cd b { font-size: 34px; }
html body .m3:not(.m3-home) .m3-cd i { font-size: 26px; }

/* ── 5. 제목 줄에 배지가 섞일 때 세로 중앙 ── */
html body .m3:not(.m3-home) .m3-badge { vertical-align: middle; }

/* ── 6. 짧은 제목·설명의 줄 길이를 고르게 ── */
html body .m3:not(.m3-home) .m3-sec .m3-h2,
html body .m3:not(.m3-home) .m3-empty span,
html body .m3:not(.m3-home) .m3-note b { text-wrap: balance; }

/* ── 7. "답답하다" — 글자 크기는 그대로, 숨 쉴 틈만 준다 ──────────────────
   측정값: 본문까지 600 · 라벨 700 · 배지 800 · 제목 900 으로 가벼운 글자가 한 톨도 없고,
   자간은 전부 음수(-0.32px), 줄간격 1.3~1.5 였다. 크기(font-size)는 한 곳도 건드리지 않는다. */
html body .m3:not(.m3-home) .m3-lead,
html body .m3:not(.m3-home) .m3-sub,
html body .m3:not(.m3-home) .m3-kpi-s,
html body .m3:not(.m3-home) .m3-note span { font-weight: 500; }
html body .m3:not(.m3-home) .m3-kpi-l { font-weight: 600; }

html body .m3:not(.m3-home) .m3-lead,
html body .m3:not(.m3-home) .m3-sub,
html body .m3:not(.m3-home) .m3-kpi-l,
html body .m3:not(.m3-home) .m3-kpi-s { letter-spacing: -.005em; }

html body .m3:not(.m3-home) .m3-sub { line-height: 1.62; }

} /* @media max-width:900px */