/* 순위검색 판의 좁은 화면 규칙(D-072). 규약·브레이크포인트 등록부는 `mobile.css` 머리말.
   `index.html` 만 싣는다(순위검색 판이 있는 문서가 이 하나다). **맨 뒤**여야
   `mobile-filters.css` 의 같은 `.fchip` 규칙과 특정도가 같을 때 이긴다.

   표 카드 접기(D-049)·조건 칩 한 줄에 하나씩(D-033)은 **여기 없다** — 스크리너와 같은
   클래스(`.screen-table`·`.fchip`)를 그대로 써서 `mobile-table.css`·`mobile-filters.css`
   규칙이 이미 그대로 걸린다(두 벌로 적으면 한쪽만 고쳐진 날 표는 카드인데 칩은 안 접힌다).
   여기 있는 것은 **이 판에만 있는** 식별줄·이전/다음 버튼(2026-09-06)뿐이다. */

/* 600px — 표가 카드로 접히는 선과 같다(D-049). 시간외 괄호 규칙은 남기고,
   식별줄 자체(글씨 크기·2줄 격자)는 780px 규칙 하나로 통일했다(2026-09-09,
   아래 참고 — 예전엔 여기서 줄바꿈을 허용했지만 그러면 아래 차트 넘기기 버튼이
   튄다는 신고를 받아 780px 의 고정 2줄로 대체했다). */
@media (max-width: 600px) {
  /* 연장거래 괄호("(애프터마켓 $9.35)", D-075 화면 반, 2026-09-04 사용자 정정)를 아래
     줄로 — 좁은 칸에서 본 값과 한 줄에 끼면 카드 폭을 넘겨 줄바꿈이 어색해진다.
     **표 칸**(`.rank-table .live-ext`) 전용이다 — 식별줄의 시간외 글씨는
     `.rank-ident-ext`(다른 클래스, 아래 780px 규칙)라 이 줄과 안 겹친다. */
  .rank-table .live-ext { display: block; margin-left: 0; }
}

/* 780px — 차트 붙박이(D-075/D-082)를 다시 푼다. 좁은 화면은 애초에 표 안쪽 스크롤이 없고
   (D-082, `rank.css`) 방향키도 데스크톱 전용 장치라, 대신 **이전/다음 버튼**(2026-09-06)을
   켠다 — 화면을 안 움직이고 차트만 바꾸는 같은 일을 손가락으로 한다. 버튼 높이 40px 은
   사용자가 정한 최소 크기(엄지로 누르기 좋은 크기).

   **식별줄 고정 2줄 격자**(2026-09-09 사용자 신고) — 좁은 화면에서 티커·기업명·등락률·
   시간외 %·「+ 관심종목」이 한 줄에 있어 폭에 따라 줄바꿈이 생기고, 그때마다 이 아래
   차트 넘기기 버튼(`.rank-nav`)이 위아래로 튀었다. `.rank-ident` 를 높이 고정 2행
   격자로 바꾼다 — 1행 `.rank-ident-line1`(티커 · 기업명, 말줄임)·2행
   `.rank-ident-line2`(등락률 · 시간외 %(작은 글씨) · 버튼, 넘치면 자르기 — 폰트를 줄이지
   않는다). `min-height` 를 두 행의 합으로 **고정**해 시간외 값·버튼이 없어도(익명·정규장
   중) 아래 요소가 안 움직인다. `.rank-ident-sep`(데스크톱에서만 두 부분을 잇는 가운뎃점,
   `rank/rankchart.js` 참고)는 이제 줄이 갈렸으니 숨긴다 — 지우지 않는 이유는 데스크톱
   `textContent` 계약(`rankchart.checks.mjs`)이 그 텍스트 노드가 존재하길 기대해서다.
   가로 여백은 안 늘렸다(`mobile.css` 의 8px 페이지 여백 규칙 그대로, 이 규칙엔 좌우
   padding/margin 이 없다). */
@media (max-width: 780px) {
  .rank-chart { position: static; }
  .rank-nav { display: flex; }
  .rank-nav-prev, .rank-nav-next { min-height: 40px; }

  .rank-ident {
    display: grid; grid-template-rows: 20px 30px; row-gap: 2px;
    min-height: 52px; align-content: start;
  }
  .rank-ident-sep { display: none; }
  .rank-ident-line1, .rank-ident-line2 {
    display: block; white-space: nowrap; overflow: hidden;
  }
  /* 1행만 말줄임 — 2행은 명세대로 자르기만(폰트를 안 줄인다), `.wl-addwrap` 의 기존
     `margin-left:8px`(`watchlist.css`)가 버튼 앞 간격을 이미 준다. */
  .rank-ident-line1 { text-overflow: ellipsis; }
}