/* 관심종목(`dashboard_user` 연동) — 별 토글·팝오버·토스트·관심종목 탭(그룹 목록 + 표).
   좁은 화면 규칙(바텀시트·8px 여백)은 여기 없다 — `mobile-watchlist.css`(맨 뒤) 몫이다
   (`mobile.css` 규약, D-051). 색은 `styles.css` 토큰만 쓴다(그림자 알파만 예외 —
   `filterbar.css` 의 `.fchip-body` 와 같은 전례). */

/* ── 별 ────────────────────────────────────────────────────────────── */

.wl-star { position: relative; display: inline-block; margin-left: 6px; }
.wl-star-btn {
  font: inherit; font-size: 15px; line-height: 1; padding: 0; border: none; background: none;
  color: var(--muted); cursor: pointer; vertical-align: -1px;
}
.wl-star-btn:hover { color: var(--accent); }
.wl-star-btn.is-on { color: #d4a017; }   /* 채워진 별의 금색 — 토큰에 없는 유일한 강조라 여기 고정 */
.wl-star-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 「+ 관심종목」 버튼(`js/watchlist/addbutton.js`, D-090) ───────────────
   상세 신원 줄(`.ident-sym`, 26px)의 한 자식일 뿐이라 버튼 자체 모양은 공용 `.btn-toggle`
   (`buttons.css`, D-076)이 전부 낸다 — 켜짐(그룹에 하나라도 있음) 강조도 그 파일의
   `[aria-pressed="true"]` 규칙을 그대로 받는다. 여기서는 신원 줄과의 간격만 정한다. */
.wl-addwrap { display: inline-block; margin-left: 8px; vertical-align: middle; }

/* ── 팝오버 (`js/watchlist/popover.js`) ──────────────────────────────
   `position: fixed` + `document.body` 에 직접 붙인다(`js/watchlist/popover-host.js` 의
   `positionPopover`, 별·「+ 관심종목」 공용) — 표 셀은 `.table-wrap { overflow-x: auto }`
   안이라 `absolute` 로 붙이면 가로 스크롤에 잘린다. 좌표는 JS 가 뷰포트 기준으로 계산해
   인라인 `top`/`left` 로 넣는다. */
.wl-popover {
  position: fixed;
  z-index: 30;
  width: 280px;
  max-height: min(360px, 70vh);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  text-align: left;
}
.wl-popover-close {
  float: right; font: inherit; font-size: 12px; border: none; background: none;
  color: var(--muted); cursor: pointer; padding: 2px 4px;
}
.wl-popover-close:hover { color: var(--fg); }
.wl-popover-empty { margin: 0 0 8px; color: var(--muted); font-size: 13px; clear: both; }
.wl-popover-list { list-style: none; margin: 0 0 10px; padding: 0; clear: both; max-height: 220px; overflow-y: auto; }
.wl-popover-item + .wl-popover-item { margin-top: 6px; }
.wl-popover-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.wl-popover-new { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.wl-popover-input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg);
}

/* ── 토스트 (`js/watchlist/toast.js`) ────────────────────────────────
   실패했을 때만 뜬다 — 성공은 화면이 이미 말한다(`./CLAUDE.md`). */
.wl-toast-host {
  position: fixed; z-index: 40; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.wl-toast {
  pointer-events: auto; cursor: pointer; max-width: 320px;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--fg); color: var(--bg); font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}

/* ── 관심종목 탭(`js/watchlist/tab.js`) ──────────────────────────────
   왼쪽 그룹 목록 + 오른쪽 표. 데스크톱은 2단, 좁은 화면은 위/아래로 쌓인다
   (`mobile-watchlist.css`). */
.pane[data-tab="watchlist"] { display: flex; gap: 20px; align-items: flex-start; }
.wl-groups { flex: 0 0 240px; }
.wl-groups-table { flex: 1; min-width: 0; }
.wl-groups-status { margin: 0 0 8px; color: var(--muted); font-size: 13px; }

.wl-grouplist-new { display: flex; gap: 6px; margin: 0 0 10px; }
.wl-grouplist-input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg);
}
.wl-grouplist-empty { color: var(--muted); font-size: 13px; }
.wl-grouplist-items { list-style: none; margin: 0; padding: 0; }
.wl-group-row {
  display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px;
  flex-wrap: wrap;
}
.wl-group-row.is-selected { background: var(--accent-weak); }
.wl-group-name {
  flex: 1; min-width: 0; text-align: left; font: inherit; font-size: 13px; border: none;
  background: none; color: var(--fg); cursor: pointer; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-group-row.is-selected .wl-group-name { font-weight: 700; }
/* 글자 버튼(공유 그룹의 "내 그룹으로 복사")만 이 크기를 쓴다 — 이름 변경·삭제·순서는
   아래 `.wl-icon-btn` 이 덮는다(D-096). */
.wl-group-action {
  font: inherit; font-size: 11px; padding: 3px 6px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--bg); color: var(--muted); cursor: pointer;
}
.wl-group-action:hover { color: var(--fg); }

/* ── 아이콘 버튼(D-096) — 이름 변경(✎)·삭제(×)·순서(▲▼), 넷이 같은 24px 안팎이다(사용자
   명세). 이름 변경·삭제는 `.wl-group-action` 도 같이 달아 hover 색은 그쪽 규칙을 그대로
   받고, 크기(`width`/`height`/`padding`/`font-size`)만 여기서 덮는다 — 순서 버튼은 이
   클래스 하나로 테두리·배경까지 완결된다(`.wl-group-action` 이 없다). 글자를 지운 자리는
   `aria-label`/`title` 이 대신한다(`grouplist.js`). */
.wl-icon-btn {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; font: inherit; font-size: 14px; line-height: 1; border: 1px solid var(--line);
  border-radius: 4px; background: var(--bg); color: var(--muted); cursor: pointer;
}
.wl-icon-btn:hover { color: var(--fg); }
.wl-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.wl-group-delete:hover { color: var(--err); border-color: var(--err); }
.wl-group-shared .wl-group-name { cursor: default; }
.wl-group-lock { font-size: 12px; }

/* ── 관심종목 표 전용 칸 셋(D-096, `js/watchlist/wlcolumns.js`) ─────────────
   `.screen-table` 재사용이라 폭·테두리·`.num` 정렬은 `table.css` 것을 그대로 받는다.
   여기 있는 것은 이 표에만 있는 칸의 색·숨김 규칙뿐이다. */

/* 이름 칸은 좁은 화면 카드(1줄: 티커·이름·★)에만 쓰인다 — 데스크톱 표는 지금처럼 티커
   하나로 종목을 구별한다(`columns.js` "종목명 칸은 없다"와 같은 판단). `mobile-watchlist.css`
   (맨 뒤에 실린다, `mobile.css` 규약)가 좁은 화면에서 이 규칙을 되돌린다. */
.wl-groups-table .screen-table .wl-col-name { display: none; }

/* 등락률 색 — `rank.css` 의 `--rank-up`/`--rank-down`(한국 관행: 상승 빨강·하락 파랑)을
   그대로 쓴다. 두 표가 "등락률" 이라는 같은 뜻을 다른 색으로 칠하면 방문자가 매번
   어느 표인지부터 확인해야 한다 — 그 파일이 먼저 실려 변수가 이미 있다(`index.html`). */
.wl-groups-table .screen-table td.col-chg.is-up { color: var(--rank-up); font-weight: 700; }
.wl-groups-table .screen-table td.col-chg.is-down { color: var(--rank-down); font-weight: 700; }
.wl-groups-table .screen-table td.col-chg.is-missing { color: var(--muted); }