/* ⚰️ 2026-09-23 — 모달·이벤트·신호등바·점수·창/리셋 UI 를 걷어내며
   해당 스타일 89개를 제거했다. 동적으로 붙는 클래스(pl-52w 등 price_label_cls,
   hidden)는 **문자열 검색에 안 잡히므로 일부러 남겼다.**
   ↩️ 복원: pmv2.css.20260923.bak */
/* PMv2 — P/F Flow Monitor */
/* 🆕 2026-09-30 — 24h 편입. 색은 /24h/assets/shell.css 의 :root 가 정본이다.
   아래는 PMv2 옛 이름 → shell 토큰 **별칭**뿐이다(값을 직접 쓰지 않는다 — shell 을 고치면 여기도 따라온다).
   🔴 --bg 는 shell 이름과 같아서 여기서 다시 선언하면 shell 값을 덮는다 → 선언하지 않는다.
   보라(--purple)는 24h 에 없는 색이라 24h 포인트색(--accent)으로 흡수했다.
   ↩️ 복원: pmv2.css.20260930.bak */
:root {
  --bg-card: var(--card);
  --bg-theme: var(--card2);
  --border: var(--line);
  --text: var(--tx);
  --text-muted: var(--tx2);
  --red: var(--up);
  --blue: var(--dn);
  --green: #2ea043;          /* shell .dot.on 과 같은 초록 */
  --yellow: var(--anchor);
  --purple: var(--accent);
}
/* 글꼴·리셋은 shell.css 가 한다. 표는 한눈에 많이 봐야 해서 글자만 작게 둔다. */
body { font-size: 12px; line-height: 1.35; }

/* ── 헤더 ── */
/* 24h .bar-sub 와 같은 모양 — 배경 --bg · 아래 실선 하나 · 좌우 여백은 .wrap 만.
   🔴 top 은 shell.js 가 재는 상단 바 실측 높이(--nav-h). 0 이면 상단 바 밑으로 파고든다. */
header {
  position: sticky; top: var(--nav-h, 38px); z-index: 45;
  padding: 6px 0; background: var(--bg); border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hdr-title { font-weight: 700; font-size: 14px; color: var(--tx); }
.hdr-sub { font-size: 11px; color: var(--tx2); margin-left: 6px; }
@media (max-width: 420px) { .hdr-sub { display: none; } }
/* 연결 점 — shell 상단 바 오른쪽(.live)으로 옮겨진다. 모양은 shell .dot 과 같게. */
.hdr-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--tx3); }
.hdr-dot.online { background: #2ea043; animation: pulse 2s infinite; }
.hdr-dot.offline { background: var(--err); }
.hdr-dot.paused { background: var(--tx3); }   /* 🆕 09-30 쉬는 중(화면 숨김) — 고장 아님 */
.hdr-btn {
  font-size: 11px; padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
}
.hdr-btn:active { transform: scale(0.95); }
.hdr-btn.active { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); }.hdr-left, .hdr-right { display: flex; align-items: center; gap: 4px; }
.hdr-center { display: flex; align-items: center; gap: 6px; }
/* 정렬 토글 (거래대금 / 등락률) — 2026-09-23 */
/* 24h 상단 메뉴(.seg)와 같은 세그먼트 모양 — "여기서 하나를 고른다" 가 같은 모양으로 읽히게 */
.sort-group { display: inline-flex; gap: 2px; padding: 2px; background: var(--card2);
              border: 1px solid var(--line); border-radius: 9px; }
.sort-group .hdr-btn { border: 0; border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--tx2); }
.sort-group .hdr-btn:hover { color: var(--tx); background: rgba(255,255,255,.05); }
.sort-group .hdr-btn.active { background: var(--accent-fill); color: #fff; font-weight: 700; }.hidden { display: none; }

/* ── 테마 밴드 ── */
.theme-band {
  position: sticky; top: calc(var(--nav-h, 38px) + var(--band-top, 36px)); z-index: 44;
  display: flex; align-items: stretch; gap: 6px;
  padding: 6px var(--wrap-pad); background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.theme-band::-webkit-scrollbar { display: none; }
.theme-band:empty { display: none; }
/* 🔴 2026-08-04 PC 가로스크롤 수정 — overflow-x:auto 는 원래 있었으나 스크롤바를 숨겨놔서
   마우스로 잡을 데가 없었다(모바일은 터치라 되고 PC만 안 됨). 마우스 환경에만 얇게 되살린다. */
@media (hover: hover) and (pointer: fine) {
  .theme-band { scrollbar-width: thin; scrollbar-color: var(--border) transparent; padding-bottom: 2px; }
  .theme-band::-webkit-scrollbar { display: block; height: 6px; }
  .theme-band::-webkit-scrollbar-track { background: transparent; }
  .theme-band::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .theme-band::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
}
.theme-chip {
  flex-shrink: 0; min-width: 90px;
  padding: 5px 10px; border-radius: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.15s; text-align: center;
}
.theme-chip:active { transform: scale(0.96); }
.theme-chip.active { border-color: var(--accent); background: rgba(47,129,247,0.12); }
.theme-chip .tc-row { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.theme-chip .tc-name { font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; }
.theme-chip .tc-count { font-size: 10px; font-weight: 600; color: var(--purple); }
.theme-chip .tc-chg { font-size: 11px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.theme-chip .tc-chg.up { color: var(--red); }
.theme-chip .tc-chg.dn { color: var(--blue); }
.theme-chip.chip-all { min-width: 48px; display: flex; align-items: center; justify-content: center; }
.theme-chip.chip-all .tc-name { color: var(--text-muted); font-size: 11px; }
.theme-chip.chip-vol-top { border-color: rgba(240,62,62,0.3); }
.theme-chip.chip-vol-top .tc-name { color: var(--red); }
/* 🟢 2026-08-27 — '등락률 TOP' 가상 밴드 (구 '거래급증 TOP' 자리) */
.theme-chip.chip-chg-top { border-color: rgba(234,179,8,0.35); }
.theme-chip.chip-chg-top .tc-name { color: var(--yellow); }
/* 등락률 순위 숫자 — 자리가 바뀌어도 "지금 몇 위"가 남는다 */
.theme-chip .tc-rank {
  font-size: 9px; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums; min-width: 9px; text-align: right;
}
.theme-chip.active .tc-rank { color: var(--text); }

/* ── 로딩 ── */
.loading { text-align: center; padding: 40px; color: var(--text-muted); }/* ── 테마 그룹 ── */
.theme-group { border-bottom: 1px solid var(--border); }
.theme-hdr {
  display: flex; align-items: center; gap: 6px;
  padding: 8px var(--wrap-pad); background: var(--bg-theme); cursor: pointer;
  font-weight: 600; font-size: 12px;
}
.theme-hdr:active { background: var(--card); }
.theme-arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.theme-group.collapsed .theme-arrow { transform: rotate(-90deg); }
.theme-group.collapsed .theme-stocks { display: none; }
.theme-name { flex: 1; }
.theme-meta { font-size: 10px; color: var(--text-muted); font-weight: 400; }
.theme-flow-dir { font-size: 10px; font-weight: 700; }
/* 🔴 2026-09-28 — 테마 헤더 거래대금. 종전 .theme-flow-dir 는 «매수/매도» 라벨용이라
   빨강/파랑이 붙었다. 체결 구독을 끈 뒤 방향이 늘 «매도»(파랑)로 찍혀 라벨을 뺐다.
   금액만 남기므로 중립색을 쓴다. */
.theme-amt { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.theme-flow-dir.up { color: var(--red); }
.theme-flow-dir.dn { color: var(--blue); }

/* ── 종목 카드 ── */
.stock-card {
  padding: 8px var(--wrap-pad); border-bottom: 1px solid var(--line);
  background: var(--bg-card);
}/* ── 카드 2026-09-23 단순화판 ──
   진석님: "주도테마+등락률 보는게 전부야" → 등락률을 제일 크게, 거래대금은 보조.
   윗줄 = 순위·종목명·배지·핀 / 아랫줄 = 현재가·거래대금·Δ·등락률 */
.sc-top { display: flex; align-items: center; gap: 6px; }
.sc-spacer { flex: 1; }
.sc-bottom {
  display: flex; align-items: baseline; gap: 8px; margin-top: 5px;
}
.sc-bottom .sc-price {
  font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sc-amt {
  font-size: 10px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}.sc-bottom .sc-chg {
  font-size: 15px; font-weight: 700; min-width: 66px; text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Δ가 없는 카드도 등락률이 같은 자리에 오도록 */
.sc-bottom .sc-delta + .sc-chg { margin-left: 0; }
.sc-bottom > .sc-chg:not(.sc-delta + .sc-chg) { margin-left: auto; }
.sc-rank.blank { visibility: hidden; }
/* 폴링이 아직 안 닿은 종목 = 10분 크론값. 숨기지 않고 표시한다. */
.sc-stale {
  font-size: 8px; padding: 1px 4px; border-radius: 3px;
  background: rgba(107,114,128,0.18); color: #9ca3af; white-space: nowrap;
}.sc-trend { font-size: 10px; font-weight: 600; }
.sc-trend.up { color: var(--red); }
.sc-trend.dn { color: var(--blue); }
.sc-trend.flat { color: var(--text-muted); }
.sc-name { font-weight: 600; font-size: 13px; flex: 1; }
.sc-price { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-muted); }
.sc-chg { font-size: 11px; font-weight: 600; }
.sc-chg.up { color: var(--red); }
.sc-chg.dn { color: var(--blue); }
/* 거래대금 순위 — 2026-08-04 보라(눈에 안 띔) → 노란 바탕으로 변경 */
.sc-rank { font-size: 10px; font-weight: 700; color: #1a1206; background: var(--yellow, #eab308);
           padding: 1px 5px; border-radius: 3px; }
.sc-theme-row { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 6px 0; justify-content: flex-end; }
.sc-theme-tag { font-size: 8px; color: var(--yellow); background: rgba(234,179,8,0.12); padding: 1px 5px; border-radius: 3px; white-space: nowrap; }.sc-dir-badge { font-size: 9px; font-weight: 700; padding: 1px 3px; border-radius: 2px; }
.sc-dir-badge.p-buy { color: var(--red); }
.sc-dir-badge.p-sell { color: var(--blue); }
.sc-dir-badge.f-buy { color: var(--red); }
.sc-dir-badge.f-sell { color: var(--blue); }
/* 가격 위치 배지 */
.sc-pl { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.sc-pl.pl-52w { background: rgba(234,179,8,0.2); color: #eab308; }
.sc-pl.pl-20d { background: rgba(29,158,117,0.15); color: #1D9E75; }
.sc-pl.pl-5d { background: rgba(99,102,241,0.12); color: #6366f1; }
.sc-pl.pl-prev { background: rgba(107,114,128,0.15); color: #9ca3af; }
.sc-clean { font-size: 8px; padding: 1px 3px; border-radius: 2px; background: rgba(29,158,117,0.1); color: #1D9E75; }
.theme-group.vol-top > .theme-hdr { border-left: 3px solid var(--red); }
.theme-group.vol-top > .theme-hdr .theme-name { color: var(--red); }.tag-p { background: rgba(99,102,241,0.12); color: var(--purple); }
.tag-f { background: rgba(29,158,117,0.12); color: var(--green); }
.tag-turn { background: rgba(234,179,8,0.15); color: var(--yellow); }
.tag-enter { background: rgba(29,158,117,0.12); color: var(--green); }
.tag-exit { background: rgba(107,114,128,0.15); color: var(--text-muted); }
.tag-bomb { background: rgba(234,179,8,0.2); color: var(--yellow); font-weight: 800; }
.tag-alert { background: rgba(99,102,241,0.12); color: var(--purple); }/* 종목 카드 호버 */
.stock-card { transition: background 0.15s; }
.stock-card:hover { background: var(--card2); }

/* ── 반응형 ── */
@media (min-width: 600px) {
  .theme-stocks { display: grid; grid-template-columns: 1fr 1fr; }
  .stock-card { border-right: 1px solid var(--line); }}
@media (min-width: 900px) {
  .theme-stocks { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── 핀 고정 버튼 ── */
.pin-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; padding: 0 2px; line-height: 1;
  opacity: 0.25; transition: opacity 0.15s;
  margin-left: auto; flex-shrink: 0;
}
.pin-btn:hover { opacity: 0.6; }
.pin-btn.pinned { opacity: 1; }
.naver-btn {
  font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 3px;
  background: rgba(29,158,117,0.15); color: var(--green);
  text-decoration: none; flex-shrink: 0; line-height: 1.4;
}
.naver-btn:active { background: rgba(29,158,117,0.3); }
.pinned-card { border-left: 2px solid #f59e0b !important; }/* TRACK A: 실시간 판정 배지 */
.sc-fv, .sc-sp { font-size: 10px; padding: 1px 4px; border-radius: 3px; margin-left: 2px; font-weight: 600; }
.sc-fv.fv-conv { background: #ffe0e0; color: #c92a2a; }
.sc-fv.fv-low  { background: #fff3e0; color: #e67700; }
.sc-fv.fv-exit { background: #e0e0e0; color: #666; }
.sc-fv.fv-loss { background: #e0e7ff; color: #364fc7; }
.sc-sp.sp-real { background: #ffe0e0; color: #c92a2a; }
.sc-sp.sp-fomo { background: #f0f0f0; color: #888; }
.sc-sp.sp-inst { background: #fff3e0; color: #e67700; }
.sc-sp.sp-sell { background: #e0e7ff; color: #364fc7; }
.sc-div-warn { font-size: 10px; color: #e67700; margin-left: 2px; }
.sc-sb { font-size: 10px; color: var(--text-muted); margin-left: 4px; }/* ── 주도테마 대장주 뷰 ── */
.cohesion-group { border-bottom: 2px solid var(--green); }
.cohesion-theme-hdr { border-left: 3px solid var(--green); }
.cohesion-label { color: var(--green); font-weight: 800; }
.cohesion-summary { font-size: 10px; color: var(--text-muted); padding: 4px 10px; background: rgba(29,158,117,0.05); }
.cohesion-count {
  font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px;
  font-variant-numeric: tabular-nums; margin-left: 4px;
}
.cohesion-count.cnt-high { background: rgba(240,62,62,0.15); color: var(--red); }
.cohesion-count.cnt-mid { background: rgba(234,179,8,0.15); color: var(--yellow); }
.cohesion-count.cnt-low { background: rgba(107,114,128,0.15); color: var(--text-muted); }
.cron-only > .stock-card { opacity: 0.45; border-left: 2px dashed var(--text-muted) !important; }

/* ── 알고리즘 매도 위험 배지 (B형) ── */
.sc-algo-risk {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  line-height: 1; white-space: nowrap;
}
.ar-watch   { background: rgba(234,179,8,0.15); color: var(--yellow); }
.ar-warning { background: rgba(245,158,11,0.20); color: #f59e0b; }
.ar-danger  { background: rgba(240,62,62,0.20); color: var(--red); }/* 테마 헤더용 위험 배지 */
.th-algo-badge {
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
  line-height: 1; white-space: nowrap; margin-left: 6px;
}

/* ── 테마 상대강도 바 (A형, 실시간) ── */
.th-rel-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 10px 4px; font-size: 9px;
}
.rel-lbl { color: var(--text-muted); white-space: nowrap; min-width: 24px; }
.rel-solid   .rel-lbl { color: var(--green); font-weight: 700; }
.rel-caution .rel-lbl { color: var(--yellow); font-weight: 700; }
.rel-crack   .rel-lbl { color: var(--red); font-weight: 700; }
.rel-track {
  flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.rel-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.rel-solid   .rel-fill { background: var(--green); }
.rel-caution .rel-fill { background: var(--yellow); }
.rel-crack   .rel-fill { background: var(--red); }