@import url("./wlpicks.css");   /* 떠 있는 작은 판 둘(다중 선택 띠·실행 취소) — index.html 이 200줄이라 링크 대신 여기서 */
/* 관심종목(`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-row { display: flex; align-items: center; gap: 6px; }
.wl-popover-row > .wl-popover-label, .wl-popover-row > .wl-chooser-item { flex: 1; min-width: 0; width: auto; }
.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`) ──────────────────────────────
   그룹 목록은 표 «위» 전폭 칩 줄, 그 아래 표·차트 칸(2026-11-07 사용자 요청·Fable 결정 — 왼쪽 240px 열은 그룹이
   많아야 10줄인데 차트 칸이 붙어 길어진 오른쪽 옆에서 빈 열로 남았다). JS·DOM 은 그대로, CSS 만:
   `ul` 을 `display: contents` 로 펴서 칩(li)과 새 그룹 폼이 한 flex 줄에 선다(넘치면 줄바꿈, 폼은 오른쪽 끝).
   ↑↓✎×·«내 그룹으로 복사»는 **선택된 칩에만** 보인다(호버로 안 보인다 — 터치·흔들림). */
.pane[data-tab="watchlist"]:not([hidden]) { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.wl-groups { flex: 0 0 auto; width: 100%; }
.wl-groups-table { width: 100%; min-width: 0; }
.wl-grouplist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wl-groups-status { margin: 0 0 8px; color: var(--muted); font-size: 13px; }

.wl-grouplist-new { display: flex; gap: 6px; order: 1; margin: 0 0 0 auto; }
.wl-grouplist-input {
  flex: 0 0 160px; 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-empty { margin: 0; }
.wl-grouplist-items { list-style: none; margin: 0; padding: 0; display: contents; }
.wl-group-row {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px; flex: 0 0 auto; flex-wrap: nowrap;
  border: 1px solid var(--line); border-radius: 999px;
}
.wl-group-row:not(.is-selected) > :is(.wl-icon-btn, .wl-group-action) { display: none; }
.wl-group-row.is-selected { background: var(--accent-weak); border-color: var(--accent); }
.wl-group-name {
  flex: 0 1 auto; max-width: 220px; 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` 것을 그대로 받는다.
   여기 있는 것은 이 표에만 있는 칸의 색·숨김 규칙뿐이다. */

/* 심볼 칸 안의 회사 이름(2026-10-21 여섯 칸 표) — 심볼 뒤에 옅게. 테마 칸은 세 테마라 길어 한 줄로 자르고
   전부는 툴팁(`wlcolumns.js`). 테마가 없어 산업을 적은 칸(`is-industry`)은 더 옅게. */
.wl-groups-table .screen-table .wl-name { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.wl-groups-table .screen-table td.wl-col-theme {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
}
.wl-groups-table .screen-table td.wl-col-theme.is-industry { color: var(--muted); }

/* 등락률 색 — `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); }

/* 별 해제 — «해제할 그룹» 팝오버(chooser.js)와 관심종목 탭 행의 ✕(2026-11-07) */
.wl-chooser-title { margin: 0 0 6px; font-weight: 600; font-size: 13px; }
.wl-chooser-item {
  width: 100%; text-align: left; padding: 6px 8px; cursor: pointer;
  background: transparent; color: var(--fg); border: 1px solid var(--border, #ccc); border-radius: 6px;
}
.wl-chooser-item:hover { border-color: var(--accent); color: var(--accent); }
.wl-chooser-all { margin-top: 8px; }
.wl-chooser-more { display: block; margin-top: 8px; padding: 0; background: none; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
/* 관심종목 탭: 별은 심볼 칸 맨 앞 — 심볼 길이와 상관없이 세로 한 줄(`js/watchlist/wlcolumns.js`, 2026-11-07). */
.wl-star.wl-star-lead { margin: 0 6px 0 0; }

/* ── 관심종목 탭 차트 칸(`js/watchlist/tabcharts.js`, 2026-11-07, screener_kr 과 같은 동작) ──
   행을 누르면 표 아래에 차트가 붙는다(최대 10). 차트 속은 순위검색 차트(`rank.css`) 그대로. */
.wl-groups-table tbody tr[data-symbol] { cursor: pointer; }
.wl-groups-table tbody tr.wl-charted { background: var(--accent-weak); }
.wl-charts-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 13px; }
.wl-charts-head[hidden] { display: none; }
.wl-charts-count { color: var(--muted); font-weight: 600; }
.wl-chart-cell { position: relative; padding: 10px 12px 6px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--radius); }
.wl-chart-cell .rank-ident { padding-right: 28px; }
.wl-chart-cell [data-months="24"] { display: none; }   /* 국내와 같은 네 칸(3M·6M·1Y·3Y) — 순위검색·상세는 그대로 */
.wl-chart-close {
  position: absolute; top: 6px; right: 8px; font: inherit; font-size: 14px; line-height: 1;
  padding: 4px 6px; border: none; background: none; color: var(--muted); cursor: pointer;
}
.wl-chart-close:hover { color: var(--err); }