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

   표 카드 접기(D-023)는 **여기 없다** — 표가 스크리너 표와 같은 클래스(`table.screen`)를
   그대로 써서 `mobile-screen.css` 규칙이 이미 그대로 걸린다(두 벌로 적으면 한쪽만
   고쳐진 날 스크리너 표는 카드인데 이 표는 안 접힌다). 여기 있는 것은 **이 판에만 있는**
   붙박이 차트 풀기·식별줄·"정렬" 칩 줄 지우기뿐이다.

   ⚠️ **780 이 아니라 600 을 쓴다.** 애초 지시는 "780 에서 차트 붙박이를 푼다"였지만
   `mobile.css` 등록부에는 640·600·560 뿐이고 780 은 없다 — 이 디렉터리 밖의 파일이라
   등록부에 새 숫자를 더할 권한이 이 작업에는 없다(`web/mobile.css` 는 편집 범위 밖).
   표가 카드로 접히는 선(600)과 **같은 폭**에서 차트도 풀리게 맞췄다 — 표가 카드가 되는
   순간이 곧 "폰에서 스크롤 안의 스크롤을 없애야 하는" 순간이라 뜻도 맞아떨어진다. 780 을
   쓰려면 먼저 `mobile.css` 머리말 등록부에 이유와 함께 적어야 한다(다음 손질 몫). */

@media (max-width: 600px) {
  /* 차트 붙박이를 푼다 — 표가 카드로 접히며 페이지와 함께 자라야 폰에서 «스크롤 안의
     스크롤»이 안 생긴다(D-023 카드 접기와 같은 결, D-032 로 이제 표 자신은 애초에 안
     스크롤한다). 차트가 페이지와 함께 밀려 올라가므로 대신 이전/다음 버튼(`nav.js`)이
     붙는다(아래). **머리(`thead`) 오프셋도 0 으로 되돌린다** — `rank.css` 의
     `--rank-chart-h` 는 데스크톱 붙박이 차트 몫이라, 여기서는 차트가 안 붙박이니 머리가
     페이지 맨 위에 바로 붙어야 한다(특정도는 `rank.css` 규칙과 같다 — 맨 뒤에 실려 이긴다). */
  .rank-chart { position: static; }
  table.rank-table thead th { top: 0; }

  /* "기업명 · 코드 · +3.4% · 「+ 관심종목」" 은 좁은 폰에서 한 줄에 안 들어간다(회사명이
     긴 종목·로그인 버튼이 겹치면 더). **높이 고정 2줄 격자로 접는다**(D-043, 사용자 요청
     2026-09-09) — 자유 줄바꿈(`white-space: normal`)을 쓰면 이름 길이에 따라 줄 수가
     들쭉날쭉해 차트 밑 이전/다음 버튼(`.rank-nav`)이 위아래로 튄다. `ident.js` 가 이미
     여섯 조각(이름·dot1·티커·dot2·등락률·「+ 관심종목」)을 **데스크톱과 같은 DOM 순서**
     로 짓는다(`textContent` 검사가 그 순서를 본다, `test_rank_chart_ident_link_js.py`) —
     여기서는 `grid-area` 로 **시각만** 1행("티커 · 기업명")·2행("등락률 · 버튼")으로
     재배치한다. 열 1(티커/등락률)·열 2(dot)·열 3(기업명/버튼, `minmax(0,1fr)`)이고, 각
     조각은 `white-space: nowrap` 이라 안 깨진다 — 대신 넘치는 쪽(기업명·버튼)만
     `overflow: hidden` + `ellipsis` 로 자른다. */
  .rank-ident {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    grid-template-rows: 20px 20px;
    align-items: center;
    column-gap: 0;
    row-gap: 2px;
    font-size: 14px;
    min-height: 42px;   /* 20px × 2행 + 2px 간격 — 내용이 없어도(선택 전) 높이가 안 변한다 */
  }
  /* 기업명(첫 자식 — 링크 `<a class="stock">` 또는 티커 없을 때의 `<span>`) — 1행 우측. */
  .rank-ident > :first-child {
    grid-row: 1; grid-column: 3; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rank-ident .ident-ticker { grid-row: 1; grid-column: 1; white-space: nowrap; }
  .rank-ident .ident-dot-1 { grid-row: 1; grid-column: 2; white-space: nowrap; }
  .rank-ident .ident-pct { grid-row: 2; grid-column: 1; white-space: nowrap; }
  .rank-ident .ident-dot-2 { grid-row: 2; grid-column: 2; white-space: nowrap; }
  /* 「+ 관심종목」 슬롯(`rank/addbutton.js`) — 2행 우측. 버튼 자신의 `margin-left: 8px`
     (`watchlist.css`, 상세와 공유하는 규칙)는 그대로 둔다 — 이 칸 안에서 살짝 들여쓴다. */
  .rank-ident .rank-ident-add { grid-row: 2; grid-column: 3; min-width: 0; overflow: hidden; }
  .rank-ident .rank-ident-add .wl-add-btn {
    display: inline-block; max-width: 100%; vertical-align: middle;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 이전/다음 버튼 줄(D-032, 사용자 요청 2026-09-06, screener_us 와 같은 배치) — 차트
     **아래**, 키보드가 없는 화면에서 표의 방향키와 같은 선택 경로(`table.js` `step()`)를
     누르는 손잡이다. 위치 표시는 두 버튼 사이. */
  .rank-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 6px 0 0; }
  /* 44px 는 손가락 터치 타깃의 통상 하한이다. */
  .rank-nav-btn { display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 12px; flex: none; }
  .rank-nav-pos { color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }

  /* **"정렬" 머리말을 지운다.** `mobile-screen.css` 의 `table.screen thead::before`
     (content:"정렬")는 정렬 가능한 칸이 있다고 가정하는데, 이 표는 칸 전부가
     `unsortable` 이라(방향은 컨트롤 줄 버튼이 고른다, `columns.js`) 그 칩 줄 아래 남는
     것이 없다 — 빈 "정렬" 표만 뜬다(codex 스크린샷 지적, 폭 390px). 그 규칙을 못
     건드리므로(스크리너 표 렌더러 몫) 이 표에서만 `content: none` 으로 지운다 — 특정도
     를 그쪽과 맞추려 `table.rank-table` 로 적고, **맨 뒤에 실려**(위 머리말) 같은
     특정도에서 이긴다. */
  table.rank-table thead::before { content: none; }
}