/* 관심종목의 좁은 화면 규칙(D-051 규약 — `mobile.css` 머리말). 등록부에 있는 폭만 쓴다.
   `index.html`·`stock.html` 양쪽 맨 뒤에 싣는다(별은 두 화면 다 있고, 관심종목 탭은
   `index.html` 에만 있다 — 없는 셀렉터는 그냥 안 걸릴 뿐이다). */

/* 600px — 팝오버는 **바텀시트**가 된다(`dashboard_user/briefs/screener_us.md`). `js/watchlist/
   popover-host.js`(별·「+ 관심종목」 공용, D-090)가 인라인으로 넣은 `top`/`left` 를
   `!important` 로 덮어써야 이긴다 — 인라인 스타일은 보통 무엇보다 특정도가 높다. */
@media (max-width: 600px) {
  /* ‼️ 바텀시트(`bottom: 8px`)가 아니다 — 2026-09-09 실사용에서 모바일 «관심종목 추가가 안 된다»고 신고됐다.
     이 앱은 WP 페이지의 iframe 안이고 iframe 은 내용 높이(폰에서 2200px 이상)라, `position: fixed; bottom`
     은 화면 아래가 아니라 **iframe 맨 아래**(보이는 영역 훨씬 밖)다. 탭한 별·버튼은 방금 눌렀으니 눈앞에 있다 —
     그 바로 아래(`top` 은 `js/watchlist/popover-host.js`(별·「+ 관심종목」 공용, D-090) 가 인라인으로 넣는 rect.bottom+6)에 전체 폭으로 연다.
     `max-height` 도 vh(=iframe 높이)가 아니라 px. */
  .wl-popover {
    left: 8px !important; right: 8px;
    width: auto; max-width: none; max-height: 360px;
  }
  /* 관심종목 탭도 위/아래로 쌓는다 — 그룹 목록이 표 위, 표는 그 아래 전체 폭
     (사용자 명세 "그룹 목록은 표 위에"). */
  .pane[data-tab="watchlist"] { flex-direction: column; gap: 12px; }
  .wl-groups { flex-basis: auto; width: 100%; }

  /* 그룹 목록 → **가로 스크롤 칩 줄**(사용자 명세 "표 위에 가로 스크롤 칩" — 세로로
     접는 것이 아니다). 새 그룹 입력 폼(`.wl-grouplist-new`)은 그대로 위에 전체 폭으로
     남고, 그 아래 목록(`.wl-grouplist-items`)만 한 줄로 눕는다. `overflow-x: auto` 는
     이 줄 **안에서만** 걸린다 — `.wl-groups`/`.page` 는 폭을 그대로 두므로 페이지
     전체에는 가로 스크롤바가 새로 생기지 않는다(사용자 명세 "화면 폭 안에 다 들어오고
     페이지 가로 스크롤바가 생기면 안 된다"). 칩 안(`.wl-group-row`)은 `nowrap` 으로
     되돌린다 — 데스크톱의 `flex-wrap: wrap`(`watchlist.css`, 좁은 사이드바용)을 여기
     그대로 두면 칩 하나가 여러 줄로 접혀 "칩"이 아니라 세로 카드가 된다. */
  .wl-grouplist-items {
    display: flex; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;   /* 스크롤바가 마지막 칩과 안 붙게 */
  }
  .wl-group-row { flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; }
  .wl-group-row .wl-group-name { flex: 0 1 auto; max-width: 140px; }

  /* ── 관심종목 표 → 카드(D-096) ────────────────────────────────────────
     **일반 카드 접기(D-049, `mobile-table.css`)를 안 쓴다.** 그 규칙은 칸 전부를
     label:value 줄로 늘어놓는데, 사용자 명세는 "1줄 티커·이름·★ / 2줄 현재가·등락률·PER"
     딱 다섯 값만 요구했다 — 그래서 `.wl-groups-table` 아래에서 그 일반 규칙을 이 전용
     카드로 덮어쓴다. **DOM 은 새로 안 그린다**(`js/watchlist/wlcolumns.js` 가 이미 낸
     칸을 그대로 쓴다) — 여기서 하는 일은 배치(`display`/`grid-*`)뿐이고, 값 표기는
     여전히 `cells.js` 하나다(D-049 의 취지는 지킨다). 좌우 여백은 `.page` 의 기본
     8px(`mobile.css` 600px 규칙) 그대로다 — 스크리너 카드처럼 화면 끝까지 빼지 않는다
     (사용자 명세 "좌우 8px"). */
  .wl-groups-table .table-wrap { overflow-x: visible; border: 0; border-radius: 0; }
  .wl-groups-table .screen-table { display: block; min-width: 0; }
  .wl-groups-table .screen-table thead { display: none; }   /* 정렬 UI 자체가 없는 카드다 */
  .wl-groups-table .screen-table tbody { display: block; }
  .wl-groups-table .screen-table tbody tr {
    display: grid; grid-template-columns: auto 1fr auto;
    column-gap: 8px; row-gap: 2px;
    margin-bottom: 8px; padding: 10px 12px;   /* 카드 사이 8px(사용자 명세) */
    border: 1px solid var(--line); border-radius: var(--radius);
  }
  .wl-groups-table .screen-table tbody tr:hover { background: transparent; }
  .wl-groups-table .screen-table td { display: none; padding: 0; border: 0; white-space: normal; }
  .wl-groups-table .screen-table td::before { content: none; }   /* 이 카드에는 이름표 줄이 없다 */

  /* 1줄: 티커(+★, `mountStar` 가 같은 칸에 붙인다, `cells.js`) · 이름 */
  .wl-groups-table .screen-table td.col-sym {
    display: flex; align-items: center; gap: 2px; grid-row: 1; grid-column: 1;
    font-size: 15px; font-weight: 700; white-space: nowrap;
  }
  .wl-groups-table .screen-table td.wl-col-name {
    display: block; grid-row: 1; grid-column: 2 / span 2; text-align: right;
    color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 2줄: 현재가 · 등락률(색은 `watchlist.css` 의 `.is-up`/`.is-down`) · PER */
  .wl-groups-table .screen-table td.col-price { display: block; grid-row: 2; grid-column: 1; font-weight: 700; }
  .wl-groups-table .screen-table td.col-chg { display: block; grid-row: 2; grid-column: 2; text-align: right; }
  .wl-groups-table .screen-table td.wl-col-per {
    display: block; grid-row: 2; grid-column: 3; text-align: right;
  }
  /* "12.3" 혼자면 가격·등락률과 헷갈린다 — 옅은 접두어로 뜻만 밝힌다(값 자체는 안 바뀐다). */
  .wl-groups-table .screen-table td.wl-col-per::before {
    content: "PER "; color: var(--muted); font-size: 11px;
  }
}