/* 관심종목(`dashuser` 연동, D-038) — 별 토글·팝오버·토스트·관심종목 탭(그룹 목록 + 표)·
   상세의 「+ 관심종목」 버튼(D-040, `js/watchlist/addbutton.js`).
   `screener_us` 의 같은 파일을 이름·구조 그대로 옮겼다 — 색 토큰만 이 저장소 것으로
   바꿨다(`--ink`/`--ink-soft`(그쪽 `--fg`/`--muted`) · `--accent-soft`(그쪽
   `--accent-weak`) · `--up`(그쪽 `--err` — 이 저장소엔 별도 오류색이 없고 `.panel-error`
   도 `--up` 을 쓴다, `styles.css`)). 버튼은 이 저장소의 공용 알약 버튼 `.chip`
   (`controls.css`)을 그대로 쓴다 — 새 버튼 변형을 만들지 않는다.

   좁은 화면 규칙(바텀시트·8px 여백)은 여기 없다 — `mobile-watchlist.css`(맨 뒤) 몫이다
   (`mobile.css` 규약). */

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

.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(--ink-soft); 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`) ──────────────────
   상세 신원 줄(`<h1>`)에 붙는다 — 표 셀의 별과 달리 텍스트 라벨이라 공용 알약 버튼
   `.chip`(`controls.css`)을 그대로 쓴다(`on` 은 그 버튼이 이미 가진 강조 상태). 새 변형을
   만들지 않는다. `<h1>` 은 `flex` 가 아니라 보통 블록이라 버튼이 줄에 안 들어가면
   **그대로 다음 줄로 내려간다** — 별도 `flex-wrap` 없이도 신원 줄이 안 깨진다. */
.wl-add-btn { margin-left: 8px; vertical-align: middle; }

/* ── 팝오버 (`js/watchlist/popover.js`) ──────────────────────────────
   `position: fixed` + `document.body` 에 직접 붙인다(`star.js` 의 `positionPopover`) —
   표 셀은 `.tablewrap { 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(--ink-soft); cursor: pointer; padding: 2px 4px;
}
.wl-popover-close:hover { color: var(--ink); }
.wl-popover-empty { margin: 0 0 8px; color: var(--ink-soft); 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(--ink);
}

/* ── 토스트 (`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(--ink); 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(--ink-soft); font-size: 13px; }

/* 관심종목 탭 표(`js/watchlist/tabcolumns.js`, D-047)의 이름 칸 — 종목코드는 기업명 앞
   작은 글씨다(`web/CLAUDE.md` "종목코드는 작은 글씨에만"). */
.wl-code { color: var(--ink-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.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(--ink);
}
.wl-grouplist-empty { color: var(--ink-soft); 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-soft); }
.wl-group-name {
  flex: 1; min-width: 0; text-align: left; font: inherit; font-size: 13px; border: none;
  background: none; color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-group-row.is-selected .wl-group-name { font-weight: 700; }
/* 아이콘 버튼 넷(↑↓✎×, 사용자 요청 2026-09-09) — 24px 안팎 정사각형, 이름 옆에 조용히.
   글자가 아니라 한 글자 기호라 `line-height: 1` 로 세로 가운데를 맞춘다. */
.wl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; line-height: 1;
  font: inherit; font-size: 13px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--bg); color: var(--ink-soft); cursor: pointer;
}
.wl-group-move:disabled { opacity: 0.35; cursor: not-allowed; }
.wl-group-action:hover { color: var(--ink); }
.wl-group-delete:hover { color: var(--up); border-color: var(--up); }
.wl-group-shared .wl-group-name { cursor: default; }
.wl-group-lock { font-size: 12px; }