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

   ## 왜 갈랐나 (사용자 결정 2026-08-29)

   모바일 작업이 늘면서 좁은 화면 규칙이 열한 개 파일에 흩어졌다. 한 파일 안에 데스크톱과
   모바일이 섞여 있으면 ① 「지금 이 화면에서 무엇이 걸리나」를 파일 열 개를 열어야 알고
   ② 데스크톱을 고치다 모바일을 건드리는 사고가 조용하다(둘 중 하나만 눈에 보이니까).
   **대가는 알고 진다**: 표 하나를 고치는 데 파일이 둘이고, 같은 선택자가 두 파일에 흩어져
   우선순위가 순서에 달린다. 그래서 아래 규약 셋이 이 갈라짐의 조건이다.

   ## 규약 셋

   ① **링크는 맨 마지막, 정해진 순서로**(`index.html`·`stock.html`). 같은 특정도끼리는
      나중이 이기므로 순서 자체가 계약이다 — 순서는 `checks/mobile.checks.mjs` 가 고정한다.
        표  화면: … → mobile.css → mobile-table.css → mobile-filters.css
        상세 화면: … → mobile.css → mobile-detail.css → mobile-holders.css(D-070)
   ② **새 브레이크포인트를 만들지 않는다.** 아래 등록부의 숫자만 쓴다. 새 숫자가 필요하면
      등록부에 이유와 함께 적고, 그때 검사가 통과한다(적지 않으면 빨간불이다).
   ③ **JS 쪽 좁은 화면 판정도 같은 숫자다** — `js/viewport.js` 하나에서 온다. CSS 는 600 인데
      JS 는 640 이면, 그 사이 폭에서 화면과 동작이 서로 다른 말을 한다(오류는 없다).

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

   | 폭 | 뜻 | 근거 |
   |---|---|---|
   | **1024px** | 표가 블로그 본문 칸에 안 들어간다 | 본문 폭 720~800px · 칸 열하나(2026-08-07 신고) |
   | **780px**  | 상세 패널 2단이 안 들어간다 | 한 열이 380px 밑이면 캔버스가 눌린다 |
   | **720px**  | 페이지 여백을 줄인다 | 좌우 16px → 12px |
   | **600px**  | **표가 카드로 접힌다**(D-049) | `table.css` 의 `min-width: 560` + 여백 24 ≈ 586 바로 위 |
   | **560px**  | 조건 칩이 한 줄에 하나씩 선다 | 칩 여섯이 두 줄을 넘는 폭 |
   | **480px**  | 상세 화면의 글씨·여백을 줄인다 | 폰 세로 |

   ⚠️ **숫자를 옮기지 않았다.** 여섯을 둘로 줄이면 깔끔하지만 그 순간 태블릿·좁은 데스크톱
   창의 모습이 바뀐다 — 「데스크톱 UI 는 한 픽셀도 바꾸지 않는다」(사용자 결정 2026-08-29)와
   정면으로 부딪친다. 줄이는 일은 그 결정이 풀리는 날의 몫이고, 그때까지 등록부가 대신한다.
   ───────────────────────────────────────────────────────────────────── */

/* 두 화면이 함께 쓰는 껍데기. 여기 있는 것은 `.page` 하나뿐이라 파일이 짧다 — 짧다고
   합치면 표 화면 규칙이 상세 화면에도 실린다(`stock.html` 은 표를 모른다). */

@media (max-width: 720px) {
  .page { padding: 12px 12px 20px; }
  .cap-ticks li:not(:first-child):not(:last-child) { display: none; }
}

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

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