/* ─────────────────────────────────────────────────────────────────────
   **좁은 화면 규칙은 `mobile-*.css` 에만 산다.** 기능 CSS(`table.css`·`detail.css`…)에는
   `@media (max-width: …)` 를 **한 줄도 두지 않는다** — `tests/test_mobile_css.py` 가 막는다.

   ## 왜 갈랐나 (사용자 결정 2026-08-29 · `screener_us` D-051 을 그대로 옮겼다)

   한 파일 안에 데스크톱과 모바일이 섞여 있으면 ① 「지금 이 폭에서 무엇이 걸리나」를 알려면
   파일을 전부 열어야 하고 ② 데스크톱을 고치다 모바일을 건드리는 사고가 조용하다.
   **대가는 알고 진다**: 표 하나를 고치는 데 파일이 둘이고, 같은 선택자가 두 파일에 흩어져
   우선순위가 링크 순서에 달린다. 그래서 아래 규약 셋이 이 갈라짐의 조건이다.

   ## 규약 셋

   ① **링크는 맨 마지막, 정해진 순서로.** 같은 특정도끼리는 나중이 이기므로 순서가 계약이다.
        표  화면: … → mobile.css → mobile-screen.css → mobile-rank.css → mobile-watchlist.css
        상세 화면: … → mobile.css → mobile-detail.css → mobile-watchlist.css
      `mobile-rank.css`(D-029, 순위검색 판)는 표가 카드로 접히는 규칙(`mobile-screen.css`)
      과 같은 `table.screen` 선택자를 다시 건드리지 않지만, 혹시 특정도가 겹치는 날을
      대비해 **더 나중**에 둔다(이겨야 할 쪽이 이긴다). `mobile-watchlist.css`(관심종목,
      D-038)도 같은 이유로 **맨 끝**이다 — 두 화면 다 싣되, 없는 셀렉터(관심종목 탭은
      표 화면에만 있다)는 그냥 안 걸린다.
   ② **새 브레이크포인트를 만들지 않는다.** 아래 등록부의 숫자만 쓴다. 새 숫자가 필요하면
      등록부에 이유와 함께 적고, 그때 검사가 통과한다(적지 않으면 빨간불이다).
   ③ **JS 쪽 좁은 화면 판정도 같은 숫자다** — `js/viewport.js` 하나에서 온다.

   ## 브레이크포인트 등록부

   | 폭 | 뜻 | 근거 |
   |---|---|---|
   | **640px** | 페이지 여백을 줄이고 눈금 글자·검색칸을 접는다 | 예전부터 쓰던 선 |
   | **600px** | **표가 카드로 접힌다** · 칩 폭 상한 · 리포트 양쪽정렬 · 내보내기 한 개 | `screener_us` 와 **같은 숫자**로 맞춘다 |
   | **560px** | 조건 칩이 한 줄에 하나씩 선다 | 칩이 두 줄을 넘는 폭 |

   ⚠️ **600 은 표 폭에서 나온 수가 아니다.** 이 표는 칸이 많아 **약 1,120px** 를 요구하므로
   600~1120 구간에서는 `.tablewrap` 가로 스크롤이 그대로 남는다. 그 구간까지 접으려면 폭을
   1024 로 올려야 하는데, 그러면 **태블릿·블로그 본문 폭의 모습이 바뀐다** — 「데스크톱은
   한 픽셀도 바꾸지 않는다」(사용자 결정 2026-08-29)와 부딪쳐 미뤘다. 두 앱이 같은 선을
   쓰는 편이 다음 사람에게 설명하기 쉽다는 점도 함께 고려했다.

   ⚠️ **숫자를 옮기지 않았다.** 640·560 은 있던 그대로다 — 줄이면 그 구간의 모습이 바뀐다.
   ───────────────────────────────────────────────────────────────────── */

/* 두 화면이 함께 쓰는 껍데기. */

@media (max-width: 640px) {
  body { padding: 12px 12px 32px; }
}

/* 폰에서는 좌우를 한 번 더 줄인다(사용자 요청 2026-08-29). 화면이 좁을수록 여백 1px 이
   비싸다 — 366px 폭에서 24px 는 6.6% 다. **601~640px 은 12px 그대로 둔다**: 그 구간은
   태블릿·좁은 창이고 「데스크톱은 한 픽셀도 바꾸지 않는다」가 여기까지 걸린다.

   ⚠️ 화면에 보이는 여백이 8px 보다 크면 **그 초과분은 블로그 쪽**이다 — 워드프레스 테마의
   본문 칼럼 padding 이고, 이 앱에서는 못 줄인다. */
@media (max-width: 600px) {
  body { padding: 12px 8px 32px; }
}