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

/* 600px — 팝오버는 **바텀시트**가 된다. `star.js` 가 인라인으로 넣은 `top`/`left` 를
   `!important` 로 덮어써야 이긴다 — 인라인 스타일은 보통 무엇보다 특정도가 높다. */
@media (max-width: 600px) {
  /* ‼️ 바텀시트(`bottom: 8px`)가 아니다 — 2026-09-09 실사용에서 모바일 «관심종목 추가가 안 된다»고 신고됐다.
     이 앱은 WP 페이지의 iframe 안이고 iframe 은 내용 높이(폰에서 2200px 이상)라, `position: fixed; bottom`
     은 화면 아래가 아니라 **iframe 맨 아래**(보이는 영역 훨씬 밖)다. 탭한 별·버튼은 방금 눌렀으니 눈앞에 있다 —
     그 바로 아래(`top` 은 `popover-host.js` 가 인라인으로 넣는 rect.bottom+6)에 전체 폭으로 연다.
     `max-height` 도 vh(=iframe 높이)가 아니라 px. */
  .wl-popover {
    left: 8px !important; right: 8px;
    width: auto; max-width: none; max-height: 360px;
  }
  /* 관심종목 탭도 위/아래로 쌓는다 — 그룹 목록이 표 위, 표는 그 아래 전체 폭.
     그룹 목록은 «세로 목록 접기» 쪽을 썼다(사용자 지시의 두 선택지 중 하나) — `wl-group-
     row` 가 이미 `flex-wrap: wrap` 이라 이름이 길거나 버튼 넷이 다 있어도 다음 줄로
     접힐 뿐 가로로 안 넘친다(가로 스크롤 칩 목록을 새로 만들 필요가 없었다). */
  .pane[data-tab="watchlist"] { flex-direction: column; gap: 12px; }
  .wl-groups { flex-basis: auto; width: 100%; }

  /* ── 관심종목 표 → 카드(사용자 요청 2026-09-09) ──────────────────────────
     스크리너 표(`mobile-screen.css`)의 «화면 끝까지 빼는» 카드와 **다르다** — 칸이
     넷뿐이라 좌우 8px 을 그대로 남긴다(사용자 지시 "카드 사이 8px, 좌우 8px"). 렌더러는
     여전히 하나(`../table.js` renderRows) — 이 파일은 CSS 로 두 줄 레이아웃을 다시
     그릴 뿐, 카드용 HTML 을 따로 만들지 않는다. 선택자를 `.pane[data-tab="watchlist"]`
     로 좁혀 특정도를 올려 뒀으니 `mobile-screen.css`(스크리너 표)의 일반 규칙과 안
     겹친다 — 그쪽은 `table.screen` 하나뿐이라 로드 순서와 무관하게 이 파일이 이긴다. */
  .pane[data-tab="watchlist"] .tablewrap {
    overflow-x: visible; border: 0; border-radius: 0; background: transparent;
    margin-left: 0; margin-right: 0;
  }
  .pane[data-tab="watchlist"] table.screen { display: block; white-space: normal; }
  .pane[data-tab="watchlist"] table.screen thead { display: none; }   /* 정렬 없다(`tab.js` 머리말) */
  .pane[data-tab="watchlist"] table.screen tbody { display: block; }
  .pane[data-tab="watchlist"] table.screen tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 8px; margin: 0 8px 8px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  }
  .pane[data-tab="watchlist"] table.screen tbody td {
    display: block; padding: 0; border-bottom: 0; white-space: normal;
  }
  /* 이름표를 안 쓴다 — 자리(1줄/2줄 각 칸)가 이미 뜻을 말한다(`js/watchlist/tabcolumns.js`
     의 순서: 이름 · 현재가 · 등락률 · PER). */
  .pane[data-tab="watchlist"] table.screen tbody td::before { content: none; }
  /* 1줄: 티커·이름·★ — 이름 칸이 세 칸을 다 차지하는 자기 줄. */
  .pane[data-tab="watchlist"] table.screen tbody td.name {
    grid-column: 1 / -1; grid-row: 1; font-size: 15px; font-weight: 700;
    margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
  }
  /* 2줄: 현재가 · 등락률(색) · PER 이 한 줄에 나란히. */
  .pane[data-tab="watchlist"] table.screen tbody td.price { grid-column: 1; grid-row: 2; }
  .pane[data-tab="watchlist"] table.screen tbody td.wl-change {
    grid-column: 2; grid-row: 2; text-align: center;
  }
  .pane[data-tab="watchlist"] table.screen tbody td.wl-per {
    grid-column: 3; grid-row: 2; text-align: right;
  }
}