/* ═══════════════════════════════════════════════════════════════
   WatchBoard style.css — SPEC 8절 디자인 스펙 구현
   색 토큰은 전부 CSS 변수. 폰트 12px, 행 26px, zebra 금지.
   상태 클래스/ID 계약은 web/CONTRACT.md 참조.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;                /* 크롬 자동 다크 모드의 색 강제 변환 방지 */
  --bg:#0D1117;  --panel:#161B22;  --group:#18202B;  --hover:#1B2633;  --flash:#16202C;
  --line:#151C24;  --line2:#1F2733;
  --tx:#C9D1D9;  --tx2:#8B949E;  --tx3:#6E7681;
  --up:#F0616D;  --u1:#E0707A;  --u2:#FF7B84;  --u3:#FF9199;
  --dn:#58A6FF;  --d1:#6FA8E8;  --d2:#79C0FF;
  --pu1:rgba(240,97,109,.10);  --pu2:rgba(240,97,109,.18);  --pu3:rgba(240,97,109,.30);
  --pd1:rgba(88,166,255,.10);  --pd2:rgba(88,166,255,.18);
  --bar-u:rgba(240,97,109,.16);  --bar-d:rgba(88,166,255,.16);
  --sel:#E3B341;  --ok:#3FB950;
  --chip-off:#2A3340;
  --topbar-h:44px;
}

/* ── 리셋/기본 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--tx);
  font: 12px/1.45 "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
h1 { margin: 0; font-size: inherit; font-weight: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
input, select {
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 4px;
  color: var(--tx);
  padding: 5px 8px;
  outline: none;
}
input:focus, select:focus { border-color: var(--tx3); }
input[type="checkbox"] { accent-color: var(--sel); margin: 0; }
input[type="color"] {
  width: 26px; height: 22px; padding: 1px; border: 1px solid var(--line2);
  border-radius: 3px; background: var(--bg); cursor: pointer;
}
input[type="number"] { width: 58px; text-align: right; }
::placeholder { color: var(--tx3); }

.num { font-variant-numeric: tabular-nums; }

/* hidden 어트리뷰트 = 표시 계약 (CONTRACT.md) — author display 지정보다 항상 우선 */
[hidden] { display: none !important; }

/* 스크롤바 (webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx3); }
::-webkit-scrollbar-track { background: transparent; }

/* ── 공용 버튼 ─────────────────────────────────────────────── */
.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: none; border: none; border-radius: 4px;
  color: var(--tx2);
}
.icon-btn:hover { background: var(--hover); color: var(--tx); }

.btn-primary {
  background: var(--hover);
  border: 1px solid var(--line2);
  border-radius: 4px;
  color: var(--tx);
  padding: 6px 12px;
}
.btn-primary:hover:not(:disabled) { border-color: var(--tx3); }
.btn-primary:disabled { opacity: .4; cursor: default; }

/* ── 등락 필(pill) — 티어 문법 ─────────────────────────────── */
.pill {
  display: inline-block;
  min-width: 52px;
  padding: 1px 6px;
  border-radius: 3px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tx3);
}
.pill.p-u1 { background: var(--pu1); color: var(--u1); }
.pill.p-u2 { background: var(--pu2); color: var(--u2); font-weight: 700; }
.pill.p-u3 { background: var(--pu3); color: var(--u3); font-weight: 700; }
.pill.p-d1 { background: var(--pd1); color: var(--d1); }
.pill.p-d2 { background: var(--pd2); color: var(--d2); font-weight: 700; }
.pill.p-flat { background: none; color: var(--tx3); }

/* 방향 색 (현재가/지수값 등 텍스트) */
.up { color: var(--up); }
.dn { color: var(--dn); }

/* ── 앱 골격 ──────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#content { flex: 1; display: flex; min-height: 0; }

/* ── 상단 바 ──────────────────────────────────────────────── */
#topbar {
  flex: none;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line2);
}
.tb-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
#brand { font-size: 13px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.idx { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tb-left .idx { cursor: pointer; border-radius: 4px; padding: 2px 4px; margin: -2px -4px; }
.tb-left .idx:hover { background: var(--hover); }
.idx-inner { display: flex; align-items: center; gap: 6px; }
.idx-name { color: var(--tx3); font-size: 11px; }
.idx-val { font-weight: 700; }
/* ── 보드 조작 툴바 — 상단 바에서 이동 (상단 바 = 시세 스트립 전용) ── */
#board-toolbar {
  position: sticky; top: 0; z-index: 7;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  height: 32px; padding: 0 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--line2);
}
#conn {
  display: none;   /* 연결 상태는 창 제목(🟢/🔴)으로 이동 — 상단 바에서 제거 */
  align-items: center; gap: 6px;
  margin-right: 6px;
  color: var(--tx2); font-size: 11px; white-space: nowrap;
}
#conn .lamp {
  width: 8px; height: 8px; border-radius: 50%;
  background: #F0616D;             /* 끊김 기본 */
}
#conn.ok .lamp { background: var(--ok); }
#chat-unread {
  position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--up);
}

/* ── 관심종목 테이블 (테이블 모드) ────────────────────────── */
#board { flex: 1; min-width: 0; overflow-y: auto; overflow-x: auto; }
#wl-table { width: 100%; border-collapse: collapse; table-layout: fixed; }

#wl-table thead th {
  position: sticky; top: 32px; z-index: 5;   /* 툴바(32px) 아래에 고정 */
  height: 28px;
  padding: 0 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--line2);
  color: var(--tx2);
  font-size: 11px; font-weight: 400;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}
#wl-table thead th.num { text-align: right; }
#wl-table th.c-badge { width: 54px; }
#wl-table th.c-price { width: 84px; }
#wl-table th.c-rate  { width: 76px; }
#wl-table th.c-mcap  { width: 72px; }
#wl-table th.c-val   { width: 88px; }
#wl-table th.c-prog, #wl-table th.c-frgn, #wl-table th.c-inst { width: 90px; }

th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--tx); }
th.sortable.sort-asc::after  { content: " ▲"; font-size: 9px; color: var(--sel); }
th.sortable.sort-desc::after { content: " ▼"; font-size: 9px; color: var(--sel); }

#wl-table td {
  height: 26px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
}
#wl-table td.num { text-align: right; }
td.c-name { text-overflow: ellipsis; }

/* 종목 행 — 틱 플래시: JS가 .flash 추가→제거, 제거 시 300ms 트랜지션으로 원복 */
tr.stock-row { background: transparent; transition: background-color .3s ease; cursor: default; }
tr.stock-row.flash { background-color: var(--flash); transition: none; }
tr.stock-row:hover td { background: var(--hover); }

.s-price { font-weight: 700; }
.badge {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(227,179,65,.15);
  color: var(--sel);
  font-size: 10px; line-height: 16px;
}

/* ── 일중 위치선 — 등락률 필 아래 2px (좌=당일 저가, 우=당일 고가, 점=현재가).
   저점 대비 +3%p 이상 반등 중이면 노란 궤적/점(.hot) — 공간 증가 없는 반등 감지 ── */
.pos-line {
  position: relative;
  height: 2px; width: 52px;
  margin: 2px 0 0 auto;
  background: #232B38; border-radius: 1px;
}
.pos-trail {
  position: absolute; left: 0; top: 0; height: 2px; border-radius: 1px;
  background: rgba(255, 214, 0, .45);              /* 노랑: 저점→현재 회복 경로 */
  width: 0;
}
.pos-line.strong .pos-trail { background: rgba(242, 54, 69, .45); }   /* 빨강: 저점→현재 */
.pos-line.low .pos-trail { left: auto; right: 0; background: rgba(52, 133, 250, .45); }  /* 파랑: 현재→고점 */
.pos-dot {
  position: absolute; top: -1px; width: 4px; height: 4px; border-radius: 50%;
  background: #8B949E;                       /* 회색 = 중간 지대 (무신호) */
}
.pos-line.hot .pos-dot { background: #FFD600; }      /* 노랑 = 저점서 반등 진행 */
.pos-line.strong .pos-dot { background: #F23645; }   /* 빨강 = 고점 부근 (강세) */
.pos-line.low .pos-dot { background: #3485FA; }      /* 파랑 = 저점 부근 */

/* 수급 셀 (프로그램/외국인/기관) — 티어 클래스는 td.flow에 부여 */
td.flow { position: relative; }
td.flow .bar {
  position: absolute; top: 3px; right: 0; bottom: 3px;
  width: 0;                        /* JS가 inline width %로 지정 */
  pointer-events: none;
}
td.flow .fnum { position: relative; z-index: 1; color: var(--tx3); }
td.flow.f-u1 .fnum { color: var(--u1); }
td.flow.f-u2 .fnum { color: var(--u2); font-weight: 700; }
td.flow.f-d1 .fnum { color: var(--d1); }
td.flow.f-d2 .fnum { color: var(--d2); font-weight: 700; }
td.flow.f-bar .bar { background: var(--bar-u); }
td.flow.f-bar.f-d1 .bar, td.flow.f-bar.f-d2 .bar { background: var(--bar-d); }

/* 테마 헤더 행 */
tr.theme-row td {
  height: 28px;
  background: var(--group);
  border-bottom: 1px solid var(--line2);
  cursor: pointer;
  user-select: none;
}
.th-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.th-arrow { display: inline-flex; color: var(--tx3); flex: none; }
.th-arrow svg { transition: transform .15s ease; }
tbody.theme.collapsed .th-arrow svg { transform: rotate(-90deg); }
.th-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.th-avg { flex: none; }
.th-updown { display: inline-flex; gap: 6px; flex: none; font-size: 11px; }
.th-up { color: var(--u1); }
.th-dn { color: var(--d1); }
.th-up.zero, .th-dn.zero { color: var(--tx3); }
.th-spacer { flex: 1; }
.th-count { color: var(--tx3); font-size: 11px; flex: none; }

/* 접힌 테마: 종목/상세 행 숨김 (헤더 집계는 계속 갱신됨) */
tbody.theme.collapsed tr.stock-row,
tbody.theme.collapsed tr.divider-row,
tbody.theme.collapsed tr.detail-row { display: none; }

/* 드래그 앤 드롭 표시 */
tr.stock-row.dragging { opacity: .4; }
tr.stock-row.drop-above td, tr.divider-row.drop-above td { box-shadow: inset 0 2px 0 var(--sel); }
tr.stock-row.drop-below td, tr.divider-row.drop-below td { box-shadow: inset 0 -2px 0 var(--sel); }

/* ── 테마 내 구분선 행 (소분류 — HTS 색상 바) ── */
tr.divider-row td.c-div {
  padding: 2px 8px;
  height: 18px;
  border-bottom: 1px solid var(--line);
}
tr.divider-row .div-line {
  display: flex; align-items: center; justify-content: center;   /* 라벨 가운데 정렬 */
  height: 14px; border-radius: 3px;
  background: #FFD600;                 /* JS가 inline background로 덮음 */
}
tr.divider-row .div-label {
  font-size: 11px; font-weight: 800; line-height: 1;
  color: #000;
  letter-spacing: .3px;
  padding: 0 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
tr.divider-row:hover .div-line { filter: brightness(1.15); }
tr.divider-row.dragging { opacity: .5; }

/* 즉시 툴팁 (data-tip) — 기본 title 지연 없이 80ms */
.wb-tip {
  position: fixed; z-index: 120;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 5px;
  padding: 5px 8px;
  font-size: 11.5px; color: var(--tx);
  max-width: 260px; white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

/* 종목 메모 표시 점 */
.memo-dot {
  display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sel);
  margin-left: 5px; vertical-align: 2px;
}
tr.theme-row.drop-into td  { box-shadow: inset 0 0 0 1px var(--sel); }

/* 모바일 상세 확장 행 — <768px에서만 보임 */
tr.detail-row { display: none; }
tr.detail-row td { background: var(--flash); }
.dt-flow { display: flex; gap: 16px; padding: 3px 6px; }
.dt-item { display: inline-flex; align-items: center; gap: 6px; }
.dt-label { color: var(--tx3); font-size: 11px; }
.dt-num { color: var(--tx3); }
.dt-num.f-u1 { color: var(--u1); }
.dt-num.f-u2 { color: var(--u2); font-weight: 700; }
.dt-num.f-d1 { color: var(--d1); }
.dt-num.f-d2 { color: var(--d2); font-weight: 700; }

#board-empty { padding: 48px 16px; text-align: center; color: var(--tx3); }

/* ── 차트 모드 ────────────────────────────────────────────── */
#chart-panel { display: none; }

body.mode-chart #chart-panel {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0; order: 1;
}
#board-resizer { display: none; }
body.mode-chart #board-resizer {
  display: block; order: 2; flex: 0 0 5px;
  cursor: col-resize;
  margin-right: -1px;                 /* board의 border-left 위에 겹치게 */
  z-index: 5;
}
body.mode-chart #board-resizer:hover,
body.mode-chart #board-resizer.dragging { background: var(--sel); opacity: .5; }

body.mode-chart #board {
  flex: 0 0 var(--board-w, 226px);
  width: var(--board-w, 226px); min-width: 160px; order: 3;
  border-left: 1px solid var(--line2);
  overflow-x: hidden;
}
body.mode-chart #chat-panel { order: 4; }

/* 우측 좁은 리스트: 종목명·현재가·등락률만 */
body.mode-chart #wl-table { table-layout: auto; }
body.mode-chart #wl-table thead { display: none; }
body.mode-chart .c-badge, body.mode-chart .c-mcap, body.mode-chart .c-val,
body.mode-chart .c-prog, body.mode-chart .c-frgn, body.mode-chart .c-inst { display: none; }
/* 차트 모드 우측 리스트: n↑m↓ 카운트는 유지, 'n종목' 표기만 숨김 (확정 목업 기준) */
body.mode-chart .th-count, body.mode-chart .th-spacer { display: none; }
body.mode-chart tr.stock-row { cursor: pointer; }
body.mode-chart #wl-table td { padding: 0 6px; }
body.mode-chart .pill { min-width: 46px; padding: 1px 4px; }

/* 선택 종목: 좌측 2px 셀렉트 바 + hover 배경 */
body.mode-chart tr.stock-row.selected td { background: var(--hover); }
body.mode-chart tr.stock-row.selected td.c-name { box-shadow: inset 2px 0 0 var(--sel); }

/* 차트 헤더 */
#chart-header {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line2);
  flex-wrap: wrap;
}
#ch-name { font-size: 13px; font-weight: 700; }
#ch-price { font-weight: 700; }
#tf-bar { display: flex; gap: 2px; margin-left: 12px; flex-wrap: wrap; }
.tf-btn {
  background: none; border: none; border-radius: 3px;
  padding: 3px 8px;
  color: var(--tx2);
  white-space: nowrap;
}
.tf-btn:hover { color: var(--tx); }
.tf-btn.active { background: var(--hover); color: var(--tx); }
#btn-chart-close { margin-left: auto; }

/* 이평 칩 줄 */
#chip-row {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 3px;
  flex-wrap: wrap;   /* 구분선은 아래 수급 줄(#flow-strip)이 담당 */
}
.chip-row-label { color: var(--tx3); font-size: 11px; margin-right: 2px; }
#ma-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 10px;
  color: var(--tx2);
  font-size: 11px;
  user-select: none;
}
.chip:hover { border-color: var(--tx3); }
.chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--chip-c, var(--tx3));   /* JS가 --chip-c 인라인 지정 */
  flex: none;
}
.chip.off { color: var(--tx3); }
.chip.off .chip-dot { background: var(--chip-off); }
.chip-sep { width: 1px; height: 14px; background: var(--line2); margin: 0 4px; }

/* 차트 본체: 상단 캔들 / 중단 거래대금 / 하단 RSI */
#chart-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#chart-main { flex: 1; min-height: 120px; }
#chart-vol  { flex: none; height: 90px;  border-top: 1px solid var(--line2); }
#chart-rsi  { flex: none; height: 110px; border-top: 1px solid var(--line2); }
body.vol-off #chart-vol { display: none; }
body.rsi-off #chart-rsi { display: none; }

/* 하단 수급 스트립 */
#flow-strip {
  /* 이평 칩 줄 바로 아래, 좌측 정렬 — 차트를 가리지 않는 헤더권 노출 */
  flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 1px 12px 5px;
  border-bottom: 1px solid var(--line2);
  font-size: 11.5px;
  white-space: nowrap; overflow-x: auto;
}
.fs-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fs-label { color: var(--tx3); font-size: 11px; }
.fs-num { color: var(--tx3); }
.fs-num.f-u1 { color: var(--u1); }
.fs-num.f-u2 { color: var(--u2); font-weight: 700; }
.fs-num.f-d1 { color: var(--d1); }
.fs-num.f-d2 { color: var(--d2); font-weight: 700; }

/* ── 하단 패널 (투자자/일별시세 탭, 차트 하단 토글) ───────── */
#inv-panel {
  flex: none;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line2);
  max-height: 210px;
}
#inv-panel[hidden] { display: none; }
#inv-tabs {
  flex: none;
  display: flex; gap: 2px;
  padding: 3px 10px 0;
  border-bottom: 1px solid var(--line);
}
.inv-tab {
  background: none; border: none; cursor: pointer;
  color: var(--tx3); font-size: 11.5px;
  padding: 3px 9px 4px;
  border-bottom: 2px solid transparent;
}
.inv-tab.on { color: var(--tx); border-bottom-color: var(--sel); }
#inv-flow-wrap { display: flex; align-items: flex-start; overflow-y: auto; }
#daily-wrap { overflow-y: auto; }
#daily-wrap[hidden] { display: none; }
#inv-table, #daily-table { width: auto; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#inv-table th, #daily-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg);
  color: var(--tx3); font-weight: 500; font-size: 11px;
  text-align: right; padding: 4px 12px 3px;
}
#inv-table td, #daily-table td { font-size: 11.5px; text-align: right; padding: 3px 12px; border-top: 1px solid var(--line); }
#inv-table th:first-child, #inv-table td:first-child,
#daily-table th:first-child, #daily-table td:first-child { min-width: 66px; text-align: left; color: var(--tx2); }
#inv-table th:not(:first-child), #inv-table td:not(:first-child) { min-width: 100px; }
#daily-table th:not(:first-child), #daily-table td:not(:first-child) { min-width: 82px; }
#inv-table .inv-prov { color: var(--tx3); font-size: 10.5px; margin-left: 4px; }
#inv-sum {
  flex: none;
  display: flex; flex-direction: column; gap: 5px;   /* 외국인 위 / 기관 아래 세로 스택 */
  padding: 6px 10px;
  position: sticky; top: 0;
}
.sum-card { border: 1px solid var(--line2); border-radius: 6px; padding: 4px 10px; min-width: 112px; }
.sum-card .sl { color: var(--tx3); font-size: 10.5px; }
.sum-card .sv { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; margin-bottom: 2px; }

/* ── 채팅 패널 ────────────────────────────────────────────── */
#chat-panel {
  display: none;
  flex-direction: column;
  width: 280px; flex: none;
  background: var(--bg);
  border-left: 1px solid var(--line2);
  min-height: 0;
}
body.chat-open #chat-panel { display: flex; }

#chat-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  height: 36px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--line2);
}
.chat-title { font-size: 11px; color: var(--tx2); }
#chat-msgs {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.msg { display: flex; flex-direction: column; max-width: 100%; }
.msg-nick { font-size: 11px; color: var(--tx3); margin: 0 2px 2px; }
.msg-bubble {
  background: var(--panel);
  border-radius: 6px;
  padding: 6px 9px;
  width: fit-content; max-width: 94%;
  white-space: pre-wrap; word-break: break-word;
  line-height: 1.5;
}
.msg.mine { align-items: flex-end; }
.msg.mine .msg-bubble { background: var(--group); }

/* 채팅 내 $종목 시세 칩 */
.stock-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 2px;
  padding: 0 5px;
  background: var(--group);
  border: 1px solid var(--line2);
  border-radius: 3px;
  vertical-align: middle;
  font-size: 11px;
}
.sc-name { color: var(--tx); }
.sc-price { font-weight: 700; }
.stock-chip .pill { min-width: 0; padding: 0 4px; font-size: 10px; }

#chat-form {
  flex: none;
  display: flex; gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--line2);
}
#chat-input { flex: 1; min-width: 0; background: var(--panel); }
#btn-chat-send {
  flex: none;
  background: var(--hover);
  border: 1px solid var(--line2);
  border-radius: 4px;
  color: var(--tx);
  padding: 5px 10px;
}
#btn-chat-send:hover { border-color: var(--tx3); }

/* ── 종목 추가 모달 ───────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  width: 380px; max-width: 92vw;
  max-height: 76vh;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700;
}
#add-results { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
#add-results:empty { display: none; }
.sr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.sr-item:hover, .sr-item.active { background: var(--hover); }
.sr-code { color: var(--tx2); width: 56px; flex: none; }
.sr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-market { margin-left: auto; color: var(--tx3); font-size: 11px; flex: none; }
#add-selected {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  background: var(--group);
  border-radius: 4px;
}
#add-selected[hidden] { display: none; }
.as-code { color: var(--tx2); }
.as-name { font-weight: 700; }
.as-market { margin-left: auto; color: var(--tx3); font-size: 11px; }
.add-theme-line { display: flex; align-items: center; gap: 8px; }
.add-theme-line label { color: var(--tx2); flex: none; }
#add-theme-select { flex: 1; min-width: 0; }
#add-new-theme { flex: 1; min-width: 0; }
#add-new-theme[hidden] { display: none; }

/* ── 지표 설정 패널 ───────────────────────────────────────── */
#ind-panel {
  position: fixed; top: 52px; right: 12px; z-index: 55;
  width: 330px; max-width: 94vw;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
#ind-panel[hidden] { display: none; }
.ip-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700;
  margin-bottom: 10px;
}
.ip-section { margin-bottom: 12px; }
.ip-section:last-child { margin-bottom: 0; }
.ip-title {
  color: var(--tx2); font-size: 11px;
  border-bottom: 1px solid var(--line2);
  padding-bottom: 4px; margin-bottom: 8px;
}
#ma-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ma-row { display: flex; align-items: center; gap: 6px; }
.ma-row select { padding: 3px 4px; }
.ma-row .ma-period { width: 56px; padding: 3px 6px; }
.ma-row .ma-remove { width: 22px; height: 22px; margin-left: auto; }
#btn-ma-add {
  width: 100%;
  background: none;
  border: 1px dashed var(--line2);
  border-radius: 4px;
  color: var(--tx2);
  padding: 5px;
}
#btn-ma-add:hover { color: var(--tx); border-color: var(--tx3); }
.rsi-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rsi-row:last-child { margin-bottom: 0; }
.rsi-row select { padding: 3px 4px; }
.rsi-row input[type="number"] { padding: 3px 6px; }
.rsi-label { width: 40px; flex: none; color: var(--tx2); cursor: pointer; }

/* ── 컨텍스트 메뉴 ────────────────────────────────────────── */
#ctx-menu, #theme-ctx, #div-ctx {
  position: fixed; z-index: 70;
  min-width: 148px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
#ctx-menu[hidden], #theme-ctx[hidden] { display: none; }
#div-ctx[hidden] { display: none; }
.inv-unit { color: var(--tx3); font-size: 9.5px; font-weight: 400; margin-left: 3px; }
#div-ctx .div-swatches {
  display: flex; gap: 6px;
  padding: 8px 10px 6px;
}
#div-ctx .div-swatch {
  width: 20px; height: 20px; padding: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
}
#div-ctx .div-swatch:hover { border-color: var(--tx); transform: scale(1.12); }
.ctx-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: none; border: none; border-radius: 4px;
  color: var(--tx);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.ctx-item:hover { background: var(--hover); }
.ctx-item.danger { color: var(--up); }
.ctx-caret { margin-left: auto; color: var(--tx3); }
.has-sub { position: relative; }
#ctx-move-sub {
  display: none;
  position: absolute; left: 100%; top: -5px; z-index: 71;
  min-width: 130px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.has-sub:hover > #ctx-move-sub, #ctx-move.open > #ctx-move-sub { display: block; }

/* ── 로그인 오버레이 ──────────────────────────────────────── */

/* ── 창 기본 크기 버튼 — 앱 모드 창(standalone)에서만 표시 ── */
#btn-win-reset { display: none; }
@media (display-mode: standalone) {
  #btn-win-reset { display: inline-flex; }
}

/* ── 항상 위 고정(PiP) — 활성 시 버튼 강조 + 본창 자리 표시자 ── */
#btn-pin.on { color: var(--sel); }
#board-placeholder {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx3); font-size: 12px;
  padding: 20px; text-align: center;
}

/* ── 앱 창으로 열기 — 일반 탭에서만 표시 (독립 창에서는 JS가 hidden 처리) ── */
#login-app-open {
  background: none; border: none; padding: 2px;
  color: var(--tx3); font-size: 11px; cursor: pointer;
}
#login-app-open:hover { color: var(--tx); text-decoration: underline; }

#app-open-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 200;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 6px;
  padding: 8px 14px; font-size: 12px; color: var(--tx);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  white-space: nowrap;
}

/* ── 차트/목록 토글 버튼 — 모드에 따라 아이콘 전환 ── */
#btn-idx-chart .ico-list { display: none; }
body.mode-chart #btn-idx-chart .ico-chart { display: none; }
body.mode-chart #btn-idx-chart .ico-list { display: block; }

/* ── 게스트(구경 전용) — 편집 UI 숨김 ── */
body.guest #btn-add { display: none; }

/* ── 접속자 목록 팝업 ── */
#btn-presence {
  background: none; border: none; padding: 0;
  color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
#btn-presence:hover { color: var(--tx); }
#chat-head { position: relative; }
#presence-pop {
  position: absolute; top: calc(100% + 2px); left: 10px; z-index: 60;
  min-width: 150px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
#presence-pop .pp-item { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; }
#presence-pop .pp-role { color: var(--tx3); font-size: 11px; }

#login-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#login-overlay[hidden] { display: none; }
#login-form {
  width: 280px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 24px 20px;
}
.login-title {
  text-align: center;
  font-size: 16px; font-weight: 700; letter-spacing: 1px;
  margin-bottom: 6px;
}
#login-form input { background: var(--bg); padding: 8px 10px; }
#login-error { color: var(--up); font-size: 11px; }
#btn-login { padding: 8px; }

/* ═══════════════════════════════════════════════════════════
   반응형 — 브레이크포인트 1100 / 768 / 600
   ═══════════════════════════════════════════════════════════ */

/* <1080px: 지수를 2줄 스택(위 이름·아래 가격)으로 — 이름표 유지하면서 폭 절약
   (버튼들이 보드 툴바로 내려가 임계값 1250→1080로 완화, 6지표 기준) */
@media (max-width: 1150px) {
  :root { --topbar-h: 52px; }
  .tb-left { gap: 12px; }
  .idx { flex-direction: column; align-items: flex-start; row-gap: 1px; }
  .idx-name { font-size: 10.5px; line-height: 1.2; }
  .idx-inner { gap: 5px; }
  .idx-inner .pill { min-width: 0; padding: 1px 5px; }
}

/* 768~1100px: 채팅은 본문을 밀지 않고 오버레이 */
@media (max-width: 1100px) {
  body.chat-open #chat-panel {
    position: fixed;
    top: var(--topbar-h); right: 0; bottom: 0;
    width: 280px;
    z-index: 45;
    box-shadow: -8px 0 24px rgba(0,0,0,.45);
  }
}

/* 좁은 창: 컬럼을 폭에 맞춰 한 단계씩 접기.
   fixed 레이아웃은 숨긴 컬럼이 유령 폭으로 남아 우측 공백을 만들므로 auto로 전환 */
@media (max-width: 800px) {
  #wl-table { table-layout: auto; }
  #wl-table .c-badge { display: none; }
  #wl-table td, #wl-table thead th { padding: 0 6px; }
}
@media (max-width: 768px) {
  #brand { display: none; }
  #chart-vol { height: 70px; }
  #chart-rsi { height: 90px; }
  #ind-panel { top: var(--topbar-h); right: 0; left: 0; margin: 0 auto; }
}
@media (max-width: 820px) { #idx-ixic { display: none; } }
@media (max-width: 760px) { #idx-btc { display: none; } }
@media (max-width: 700px) { #idx-wti { display: none; } }
@media (max-width: 700px) { #wl-table .c-inst { display: none; } }
@media (max-width: 640px) { #wl-table .c-frgn { display: none; } }
@media (max-width: 580px) { #idx-fx { display: none; } }
@media (max-width: 580px) { #wl-table .c-prog { display: none; } }
@media (max-width: 470px) { #idx-nq { display: none; } }

/* 폰(터치 기기) 전용 — 풀스크린 차트 + 탭 상세 + 하단 채팅.
   좁은 데스크톱 창은 pointer:fine이라 여기 안 걸리고 차트+우측 리스트 유지 */
@media (max-width: 768px) and (pointer: coarse) {
  /* 행 탭 상세 확장 (JS가 .expanded 행 뒤에 detail-row 삽입) */
  tr.detail-row { display: table-row; }
  tbody.theme.collapsed tr.detail-row { display: none; }
  tr.stock-row.expanded td { background: var(--hover); }

  /* 차트 모드 = 풀스크린 오버레이 (우측 리스트 없음) */
  body.mode-chart #chart-panel {
    position: fixed; inset: 0; z-index: 50;
    background: var(--bg);
  }
  body.mode-chart #board-resizer { display: none; }
  body.mode-chart #board {
    flex: 1; width: auto; min-width: 0;
    border-left: none;
  }
  body.mode-chart #wl-table thead { display: table-header-group; }
  body.mode-chart .th-updown { display: inline-flex; }
  body.mode-chart .th-count { display: inline; }
  body.mode-chart .th-spacer { display: block; flex: 1; }

  /* 채팅 = 하단 시트 */
  body.chat-open #chat-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: 52vh;
    z-index: 45;
    border-left: none;
    border-top: 1px solid var(--line2);
    box-shadow: 0 -8px 24px rgba(0,0,0,.45);
  }
}

/* ~600px: 밀도 압축, 시총은 520px에서 마지막으로 접힘 */
@media (max-width: 600px) {
  #wl-table td, #wl-table thead th { padding: 0 5px; }
  .pill { min-width: 48px; }
  .tb-left { gap: 8px; }
  #conn .conn-label { display: none; }
}
@media (max-width: 520px) { #wl-table .c-mcap { display: none; } }