/* **표 화면의 좁은 화면 규칙.** 규약과 등록부는 `mobile.css` 머리말. `index.html` 만 싣는다.

   ## 순서가 계약이다

   640(눈금) → 600(표를 카드로) → 560(칩 배치). 아래로 갈수록 좁은 화면이고, 같은 특정도끼리는
   나중이 이기므로 이 줄지어짐이 곧 «좁아질수록 덧칠된다»는 뜻이다. */

/* ── 640px · 눈금 글자 ────────────────────────────────────────────── */

/* 좁은 화면에서는 가운데 눈금 글자가 서로 겹친다 — 양 끝만 남긴다(고른 구간은 채움
   막대가 이미 말하고, 정확한 값은 칩 글씨에 적혀 있다). */
@media (max-width: 640px) {
  .scale-ticks li:not(:first-child):not(:last-child) { display: none; }
}

/* ── 600px · 조건 칩이 화면보다 넓어지지 않는다 ───────────────────── */

/* 칩 글씨는 조건 문장 그대로라 **길이에 상한이 없다**(`js/filterbar.js`). flex 항목의 기본
   `min-width: auto` 는 «내용보다 작아지지 않는다»는 뜻이라, 조건을 여럿 켜면 칩이 바를 밀어내고
   **페이지 전체에 가로 스크롤**이 생긴다 — 오른쪽에 빈 띠가 생기는 그 모습이다.
   `screener_us` 에서 실제로 터진 자리다(그쪽 D-050: 폭 390px 화면에서 문서가 449px 이 됐다).
   여기서는 아직 안 터졌지만 **같은 코드 모양이라 같은 조건에서 터진다** — 미리 막는다.

   넘치는 값은 **잘라서 `…`** 로 적는다. 늘리면(줄바꿈) 칩 하나가 여러 줄이 되어 «조건을 한
   줄로 접는다»가 뒤집힌다. 잘린 글씨는 사라지지 않는다 — 칩을 열면 컨트롤이 실제 값을 보여 준다. */
@media (max-width: 600px) {
  .fchip { min-width: 0; }
  .fchip-head { max-width: 100%; }
  .fchip-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ── 600px · 표를 카드로 접는다 (D-023) ──────────────────────────── */

/* 이 표는 칸이 많아 **약 1,120px** 를 요구한다 — 폭 390px 화면에서 화면의 세 배다(실측
   2026-08-29). `.tablewrap` 안에서 가로로 구르는데, 페이지가 이미 세로로 구르는 자리라
   **스크롤 안의 스크롤**이 된다.

   **렌더러는 그대로 하나다** — 같은 `<table>` 을 CSS 가 다르게 눕힐 뿐이다. 카드용 HTML 을
   따로 만들면 값 표기(색·부호·잠정 표시)가 두 벌이 되고, 두 벌이 된 표기는 한쪽만 고쳐진 날
   조용히 어긋난다. JS 가 대는 재료는 두 가지뿐이다: 칸의 이름표(`data-label`)와 못 누르는
   머리 표시(`unsortable`) — 둘 다 `js/table.js` 한 줄씩이다. */
@media (max-width: 600px) {
  /* 껍데기: 가로 스크롤을 만들던 상자를 푼다. 카드는 세로로만 자란다. */
  .tablewrap { overflow-x: visible; border: 0; border-radius: 0; background: transparent; }

  /* **카드만 화면 끝까지 뺀다**(사용자 요청 2026-08-29). 글(제목·요약·면책)은 가장자리에서
     떨어져 있어야 읽히지만, 카드는 넓을수록 값이 많이 들어간다.

     `body` 의 좌우 8px 을 7px 만큼 도로 빼서 **화면 끝에서 1px** 남긴다. 0 이 아닌 이유:
     테두리가 가장자리에 딱 붙으면 «잘린 것»으로 보인다(사용자 결정 — 0 이 아니라 1 로).

     ⚠️ 이 값은 `mobile.css` 의 `body` 좌우 여백과 **한 쌍이다** — 저기를 고치면 여기 7 도
     같이 고쳐야 한다. */
  .tablewrap { margin-left: -7px; margin-right: -7px; }

  table.screen { display: block; white-space: normal; }
  table.screen tbody { display: block; }

  /* 머리 = 정렬 칩 줄. 머리를 지우면 **정렬할 방법이 통째로 사라지므로** 같은 `<th>` 를
     눌리는 칩으로 눕힌다 — `▲/▼`·`sorted`·클릭 배선이 전부 그대로 붙어 있다. */
  table.screen thead { display: block; margin-bottom: 10px; }
  table.screen thead::before {
    content: "정렬"; display: block; margin-bottom: 5px;
    color: var(--ink-faint); font-size: 11.5px; font-weight: 600;
  }
  table.screen thead tr { display: flex; flex-wrap: wrap; gap: 6px; }
  table.screen thead th {
    position: static;                  /* 카드에서는 붙박이 머리가 뜻이 없다 */
    display: block; padding: 4px 10px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--bg); font-size: 11.5px;
  }
  table.screen thead th.sorted { border-color: var(--accent); background: var(--accent-soft); }
  table.screen thead th.unsortable { display: none; }

  /* 행 = 카드 */
  table.screen tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px; margin-bottom: 8px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  }
  table.screen tbody td {
    /* **줄바꿈을 허용한다**(`flex-wrap`). 아주 좁은 폰(320px)에서는 한 칸이 130px 남짓인데
       `시가총액` 같은 이름과 값이 그 안에 다 안 들어간다 — 안 접으면 카드가 넘쳐 문서에
       가로 스크롤이 생긴다(실측 2026-08-29: 320px 에서 문서가 327px). 접으면 이름이 윗줄,
       값이 아랫줄로 가고 둘 다 읽힌다. */
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 0 8px; padding: 2px 0; border-bottom: 0; white-space: normal;
  }
  /* **칸 이름은 칸이 데리고 다닌다**(`js/table.js` 의 `data-label`). 머리가 칩이 되면서
     «이 숫자가 무엇인가»를 말해 줄 것이 화면에 하나도 없어진다. */
  table.screen tbody td::before {
    content: attr(data-label); flex: none;
    color: var(--ink-faint); font-size: 11.5px; font-weight: 400;
  }
  /* 기업명과 현재가는 카드의 머리다 — 이름표 없이 읽힌다. */
  table.screen tbody tr td.name,
  table.screen tbody tr td.price {
    grid-row: 1; margin-bottom: 4px; padding-bottom: 6px;
    border-bottom: 1px solid var(--line-soft); font-size: 15px;
  }
  table.screen tbody tr td.name { grid-column: 1; justify-content: flex-start; font-weight: 700; }
  table.screen tbody tr td.price { grid-column: 2; justify-content: flex-end; font-weight: 700; }
  table.screen tbody td.name::before,
  table.screen tbody td.price::before { content: none; }
  /* 기준 분기는 두 칸을 다 쓴다(잠정 표시 `●` 가 값과 떨어지면 안 읽힌다). */
  table.screen tbody tr td.period { grid-column: 1 / -1; }
}

/* ── 560px · 칩이 한 줄에 하나씩 ──────────────────────────────────── */

/* 좁은 화면에서는 칩이 한 줄에 하나씩 선다. 팝오버는 이미 바 폭이라 손댈 것이 없다. */
@media (max-width: 560px) {
  .fchip { flex: 1 1 auto; }
  .fchip-head { width: 100%; justify-content: space-between; }
}