/* **표 화면의 좁은 화면 규칙.** 규약과 브레이크포인트 등록부는 `mobile.css` 머리말.
   여기 있는 것: 칸 접기(1024) → 표를 카드로(600). `index.html` 만 싣는다.

   ## 순서가 계약이다

   아래 세 덩어리는 **이 순서여야 한다.** 1024 의 자동 숨김을 600 의 카드 규칙이 덮고,
   그 사이에 방문자의 선택(`cols-explicit`)이 자동 숨김을 이긴다 — 순서가 뒤집히면 켠 칸이
   안 나오거나(2026-08-12 신고의 그 모습) 카드 배치가 표 배치로 되돌아간다.
   `checks/cards.checks.mjs`·`colpick.checks.mjs` 가 값은 보지만 **순서는 못 본다** — CSS 는
   한 줄도 실행되지 않기 때문이다(`docs/manual-qa-mobile.md`). */

/* ── 1024px · 표가 본문 칸에 안 들어간다 ──────────────────────────── */

/* **1024px 이다(720px 이 아니다).** 워드프레스 본문 칸은 보통 720~800px 인데 우리 표는 칸이
   열하나라 그 폭에 안 들어간다 — 넘치면 `.table-wrap` 에 가로 스크롤이 생기고, 페이지가 이미
   세로로 스크롤하는 자리라 **스크롤 안의 스크롤**이 된다(2026-08-07 방문자 신고).
   720px 은 "휴대폰"의 선이었지 "표가 들어가는" 선이 아니었다. */
@media (max-width: 1024px) {
  .col-optional { display: none; }
  /* col-optional(거래소·거래대금)이 숨은 상태 + 신고가 한 칸 + 실적 한 칸 */
  .screen-table { min-width: 560px; }
}

/* 좁은 화면의 자동 숨김(`table.css` 의 `col-optional`)보다 **방문자의 선택이 이긴다.**
   체크는 켜져 있는데 칸이 안 보이면 컨트롤이 거짓말을 하는 것이라, 칸 하나 더 보이는
   것보다 나쁘다. 손댄 적이 없으면 `cols-explicit` 이 안 붙어 종전 그대로다.

   **이 폭은 `table.css` 의 자동 숨김과 같은 숫자여야 한다.** 2026-08-07 에 저쪽을
   720px → 1024px 로 넓히면서 이 짝을 안 옮겼더니, 블로그 본문 폭(720~800px)에서
   `거래소`·`거래대금` 이 **체크를 켜도 끝내 안 나왔다**(2026-08-12 방문자 신고).
   숨기는 규칙만 넓어지고 되살리는 규칙이 안 넓어지면 컨트롤이 죽은 채로 남는다. */
@media (max-width: 1024px) {
  .screen-table.cols-explicit .col-optional:not(.is-col-off) { display: table-cell; }
}

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

/* 좁은 화면에서 **표를 카드로 접는다**(D-049). 렌더러는 그대로 하나다 — `table.js` 가 그린
   같은 `<table>` 을 CSS 가 다르게 눕힐 뿐이다.

   ## 왜 카드 전용 렌더러를 만들지 않았나

   값 하나가 어떻게 보이는지는 이미 서른 개 남짓한 선택자에 흩어져 있다 — RS 히트맵
   (`controls.css`) · 장중 덧칠과 돌파 행(`live.css`) · 돌파 칸(`breakout.css`) · 실적 칸과
   감춘 칸(`colpick.css`) · 기준일이 다른 행(`table.css`). 그것들이 전부 `.screen-table td`
   에 걸려 있어, DOM 이 다른 카드를 새로 그리면 **그 서른 개를 두 벌로 베껴야 한다.** 두
   벌이 된 표기는 한쪽만 고쳐진 날 조용히 어긋나고, 그 화면은 고장이 아니라 «다른 정상
   화면»으로 보인다(루트 `CLAUDE.md`). 그래서 구조를 그대로 두고 배치만 바꾼다.

   ## 600px 인 이유

   표는 `col-optional` 이 접힌 상태에서 **560px** 를 요구한다(`table.css` 의 `min-width`).
   여기에 `.page` 좌우 여백 24px 와 테두리를 더하면 약 586px — 그 아래에서는 `.table-wrap`
   에 가로 스크롤이 생기고, 페이지가 이미 세로로 구르는 자리라 **스크롤 안의 스크롤**이
   된다(2026-08-07 방문자 신고가 그것이었다). 600 은 그 선 바로 위의 둥근 수다.
   ⚠️ `table.css` 의 `min-width` 가 다시 커지면 **이 숫자도 같이 커져야 한다** — 안 옮기면
   그 사이 폭에서 옛 사고가 그대로 돌아온다.

   이 파일은 **맨 마지막에 링크된다**(`index.html`). 같은 특정도끼리는 나중에 온 쪽이
   이기므로, 아래 뒤집기들이 앞 파일의 표 규칙을 덮으려면 순서가 그 자체로 계약이다. */

@media (max-width: 600px) {

  /* ── 껍데기 ─────────────────────────────────────────────────────── */
  /* 가로 스크롤을 만들던 상자를 푼다. 카드는 세로로만 자란다. */
  .table-wrap { overflow-x: visible; border: 0; border-radius: 0; }

  /* **카드만 화면 끝까지 뺀다**(사용자 요청 2026-08-29). 글(제목·요약·면책)은 가장자리에서
     떨어져 있어야 읽히지만, 카드는 넓을수록 값이 많이 들어간다 — 그래서 여백을 «페이지»가
     아니라 «무엇이 들어 있느냐»로 나눈다.

     `.page` 의 좌우 8px 을 7px 만큼 도로 빼서 **화면 끝에서 1px** 남긴다. 0 이 아닌 이유:
     카드 테두리가 화면 가장자리에 딱 붙으면 «잘린 것»으로 보인다(사용자 결정 — 0 이 아니라
     1 로 하자). 1px 이면 테두리가 제 선으로 읽히면서 폭은 사실상 다 쓴다.

     ⚠️ 이 값은 `mobile.css` 의 `.page` 좌우 여백과 **한 쌍이다** — 저기를 고치면 여기 7 도
     같이 고쳐야 한다. 안 맞추면 카드가 화면 밖으로 나가거나(넘침) 안쪽에서 뜬다. */
  .table-wrap { margin-left: -7px; margin-right: -7px; }

  .screen-table { display: block; min-width: 0; }
  .screen-table tbody { display: block; }

  /* ── 표 머리 = 정렬 칩 줄 ───────────────────────────────────────── */
  /* 카드에는 머리가 없다. 그렇다고 머리를 지우면 **정렬할 방법이 통째로 사라진다** —
     그래서 같은 `<th>` 를 눌리는 칩으로 눕힌다. `▲/▼`·`is-sorted`·기준 표시(`is-basis`)가
     전부 그대로 붙어 있어, 정렬 UI 를 새로 만들지 않는다(만들면 `state.setSort` 의
     «같은 칸을 다시 누르면 방향이 뒤집힌다» 규약이 두 벌이 된다). */
  .screen-table thead { display: block; margin-bottom: 10px; }
  .screen-table thead::before {
    content: "정렬"; display: block; margin-bottom: 5px;
    color: var(--muted); font-size: 12px; font-weight: 600;
  }
  .screen-table thead tr { display: flex; flex-wrap: wrap; gap: 6px; }
  .screen-table thead th {
    display: block; padding: 4px 10px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--bg); font-size: 12px;
  }
  .screen-table thead th.is-sorted { border-color: var(--accent); background: var(--pick-bg); }
  /* 못 누르는 머리(산업·거래소)는 칩 줄에서 뺀다 — 정렬 줄에 있는데 아무 일도 안 하는
     칩은 고장으로 읽힌다. 그 칸의 이름은 카드 안에 이미 붙는다(아래 `data-label`). */
  .screen-table thead th.is-unsortable { display: none; }

  /* ── 행 = 카드 ──────────────────────────────────────────────────── */
  .screen-table 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);
  }
  .screen-table tbody tr:hover { background: transparent; }   /* 손가락에는 hover 가 없다 */
  .screen-table tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 2px 0; border-bottom: 0; white-space: normal;
  }
  /* **칸 이름은 칸이 데리고 다닌다**(`js/cells.js` 의 `data-label`). 머리가 칩이 되면서
     "이 숫자가 무엇인가"를 말해 줄 것이 화면에 하나도 없어진다 — 숫자만 여덟 개 뜬 카드는
     표보다 나쁘다. */
  .screen-table tbody td::before {
    content: attr(data-label); flex: none;
    color: var(--muted); font-size: 12px; font-weight: 400;
  }

  /* 티커와 가격은 카드의 머리다. 이름표를 달지 않는다 — 둘은 이름 없이 읽힌다. */
  /* `tr` 를 굳이 끼운다 — `table.css` 의 `tbody tr:last-child td { border-bottom: 0 }` 와
     특정도를 맞추기 위해서다(빼면 **마지막 카드만** 머리 밑줄을 잃는다). */
  .screen-table tbody tr td.col-sym,
  .screen-table tbody tr td.col-price {
    grid-row: 1; margin-bottom: 4px; padding-bottom: 6px;
    border-bottom: 1px solid var(--line); font-size: 16px;
  }
  .screen-table tbody tr td.col-sym { grid-column: 1; justify-content: flex-start; }
  .screen-table tbody tr td.col-price {
    grid-column: 2; justify-content: flex-end; font-weight: 700;
  }
  .screen-table tbody td.col-sym::before,
  .screen-table tbody td.col-price::before { content: none; }
  /* `≈`(잠정)·`종가`(시세 못 받음) 표시는 `live.css` 것이 그대로 이긴다 — 특정도가 위라
     여기서 지운 이름표 자리에 그 뜻이 다시 들어온다. 일부러 그렇게 뒀다. */

  /* 연장거래 괄호(`.live-ext`, D-079)는 좁은 화면에서 값과 한 줄에 못 들어간다 — 카드 폭이
     반쪽(`grid-column: 2`)이라 "$328.08 (애프터마켓 $327.94)" 가 넘친다. `flex-basis: 100%`
     로 **줄바꿈**해 아래 줄로 내린다(플렉스 컨테이너에 `wrap` 을 켜야 먹는 흔한 수). 넓은
     화면(`live.css`)은 손대지 않는다 — 거긴 한 줄로 붙는 것이 맞다. */
  .screen-table tbody tr td.col-price { flex-wrap: wrap; }
  .screen-table tbody tr td.col-price .live-ext { flex-basis: 100%; text-align: right; }

  /* 산업명은 길다. 두 칸을 다 쓰고 폭 제한을 푼다(표에서는 22ch 로 묶여 있었다). */
  .screen-table tbody td.col-industry { grid-column: 1 / -1; max-width: none; }

  /* `▲`(오늘 돌파)는 `::before` 를 쓰는데 그 자리를 이름표가 차지했다. **표시를 지우지
     않고 반대쪽으로 옮긴다** — `0` 은 이 표에서 가장 강한 신호라 결측과 한눈에 갈려야
     한다(`breakout.css`·`format.js` 가 공들여 지킨 그것). */
  .screen-table tbody td.col-brk.is-breakout::before { content: attr(data-label); }
  .screen-table tbody td.col-brk.is-breakout::after { content: " ▲"; }

  /* 장중 신고가 돌파. 표에서는 행 배경 + 심볼 칸 왼쪽 띠였고, 카드에서는 **테두리**가
     하나 더 말한다(칸 배경은 `live.css` 것이 그대로 깔린다). */
  .screen-table tbody tr.is-live-high { border-color: var(--live-high); }

  /* 방문자가 직접 켠 칸은 카드에서도 이긴다 — `colpick.css` 의 짝이다. 저쪽은 좁은 화면의
     자동 숨김을 `table-cell` 로 되살리는데, 카드에서 그 값은 이름/값 배치를 통째로 깬다.
     ⚠️ 되살릴 때 **정렬 못 하는 칩까지 되살리지 않는다**(`:not(.is-unsortable)`) — 거래소는
     정렬 키가 없어 칩으로는 죽은 자리다. */
  .screen-table.cols-explicit tbody td.col-optional:not(.is-col-off) { display: flex; }
  .screen-table.cols-explicit thead th.col-optional:not(.is-col-off):not(.is-unsortable) {
    display: block;
  }
}