/* **조건 칩 바와 장중 표시줄의 좁은 화면 규칙.** 규약은 `mobile.css` 머리말.
   표(`mobile-table.css`)와 가른 이유는 바뀌는 계기다 — 저기는 «값을 어떻게 보여 주나»,
   여기는 «조건을 어떻게 만지나»다. `index.html` 만 싣는다.

   600 이 먼저고 560 이 뒤다: 폭 제한을 깔고 그 위에 배치를 얹는다. */

/* **칩은 화면보다 넓어질 수 없다**(2026-08-29 방문자 신고: "실적 조건 선택하는 부분이 길어서
   화면 우측 여백이 생겨"). flex 항목의 기본 `min-width: auto` 는 «내용보다 작아지지 않는다»는
   뜻이라, 칩 글씨가 길면 바가 그만큼 밀리고 **페이지 전체에 가로 스크롤**이 생긴다 — 오른쪽에
   빈 띠가 생기는 그 모습이다.

   칩 글씨는 조건 문장 그대로라(`js/filterbar.js` 의 `SOURCES`) **길이에 상한이 없다**: 실적을
   하나만 켜도 «실적 분기 매출 QoQ 제한 없음 — 이 조건은 종목을 거르지 않습니다»가 통째로
   들어와, 폭 390px 화면에서 문서가 449px 이 됐다(실측 2026-08-29). 셋을 켜면 112자다.

   넘치는 값은 **잘라서 `…`** 로 적는다. 늘리면(줄바꿈) 칩 하나가 다섯 줄이 되어 «조건을 한
   줄로 접는다»(D-033)가 뒤집힌다. **잘린 글씨는 사라지지 않는다** — 같은 문장이 표 위 조건
   줄(`#conditions`)에 통째로 있고 둘은 같은 함수에서 온다(이 파일 머리말의 그 규약).

   ⚠️ **좁은 화면 안에만 둔다.** 데스크톱은 한 픽셀도 바꾸지 않기로 했다(사용자 결정
   2026-08-29) — 넓은 바에서는 이 칩들이 넘칠 일이 사실상 없고, 넘치는 날의 모습은 오늘과
   같은 채로 남는다. 600px 은 표가 카드로 접히는 선과 같다(D-049).

   `560px` 짝은 그대로다: 저기는 «칩이 한 줄에 하나씩 선다»는 배치이고 여기는 폭 제한이다. */
@media (max-width: 600px) {
  .fchip { min-width: 0; }
  /* 인라인 flex 라 내용만큼 넓어진다 — 위 `min-width: 0` 만으로는 칩이 줄어도 이 상자가
     그대로 넘치므로 한 쌍으로 묶는다. */
  .fchip-head { max-width: 100%; }
  .fchip-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

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

/* ── 720px · 장중 표시줄 ──────────────────────────────────────────── */

@media (max-width: 720px) {
  .live-toggle { margin-left: 0; }
}