* { box-sizing: border-box; }
:root {
  --bg: #f5f6f8;
  --panel: #fff;
  --border: #dadce0;
  --hdr-bg: #e8eaed;
  --hdr-fg: #3c4043;
  --fg: #202124;
  --muted: #5f6368;
  --red: #d93025;
  --green: #137333;
  --blue: #1a73e8;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --row-hover: #f1f3f4;
}
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", sans-serif;
  background: var(--bg); color: var(--fg);
  font-size: 13px;
}

/* ── 와이드 모니터에서 양쪽 여백 두기 ──
   topbar / tabs / panel 모두 max-width 로 가운데 정렬. */
.topbar,
.tabs-wrap,
.panel {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1000px) {
  .topbar, .tabs-wrap, .panel { max-width: 100%; }
}

/* ── 모바일/좁은 화면 (≤768px): 부차 컬럼 숨김 + # 컴팩트 ── */
@media (max-width: 768px) {
  /* 종목별 탭은 가로 스크롤 가능하므로 컬럼 숨기지 않음 — 사용자가 좌우로 스와이프 */

  /* 종목별 — 모바일에서 # 컬럼 숨김, 종목명 타이트 + 셀 내 가로 스크롤 */
  #tbl-by-stock thead th.col-idx,
  #tbl-by-stock tbody td.col-idx { display: none; }
  #tbl-by-stock thead th.col-name,
  #tbl-by-stock tbody td.col-name {
    left: 0;
    font-size: 10px;
  }
  #tbl-by-stock thead th.col-name {
    width: 78px; min-width: 78px; max-width: 78px;
    padding: 3px 4px;
  }
  #tbl-by-stock tbody td.col-name .name-inner {
    width: 78px;
    padding: 3px 4px;
    overflow-x: auto; overflow-y: hidden;
    white-space: nowrap;
    text-overflow: clip;            /* 스크롤할 거라 ellipsis 제거 */
    -webkit-overflow-scrolling: touch;
  }
  /* 셀 내 스크롤바 숨김 */
  #tbl-by-stock tbody td.col-name .name-inner::-webkit-scrollbar { height: 0; display: none; }
  #tbl-by-stock tbody td.col-name .name-inner { scrollbar-width: none; }

  /* 일반 # 컬럼 컴팩트 (Portfolio 등) */
  #tbl-raw thead th:first-child,
  #tbl-raw tbody td.idx {
    padding: 4px 4px; min-width: 22px; font-size: 11px;
  }

  /* 종목별 / Portfolio — 모바일에서 폭 살짝 더 컴팩트 */
  #tbl-by-stock th, #tbl-by-stock td,
  #tbl-raw th, #tbl-raw td {
    padding: 3px 4px;
    font-size: 11px;
  }

  /* 모바일에서 전반적으로 패딩 축소해서 텍스트 더 들어가게 */
  .tbl th, .tbl td { padding: 4px 6px; }
  .tbl { font-size: 12px; }
  .tbl.small th, .tbl.small td { padding: 3px 5px; font-size: 11px; }

  /* 패널 좌우 패딩 축소 */
  .panel { padding: 12px 8px; }
  .topbar { padding: 8px 10px; }
  .tabs { padding: 0 8px; gap: 0; }
  .tab { padding: 8px 10px; font-size: 12px; }

  /* topbar: brand + logout 한 줄 (logout 우측), ctrls 다음 줄 */
  .topbar .logout-form { margin-left: auto; order: 1; }
  .topbar .ctrls { flex-basis: 100%; order: 2; }
  /* 새로고침 버튼 — 모바일에선 숨김 (브라우저 새로고침 사용) */
  #reload { display: none; }

  /* ── 모바일 터치 안정화 ──
     페이지 자체는 세로 스크롤만 허용 (가로 흔들림 방지).
     표는 tbl-wrap 안에서 가로 스크롤 가능 (필요 시).
  */
  html, body { overflow-x: hidden; }
  .panel { touch-action: pan-y; }
  .tbl-wrap { touch-action: pan-x pan-y; }   /* 표 안에서는 가로 스와이프 허용 */

  /* desktop-only / mobile-only toggle (모바일은 mobile-only 보임) */
  .desktop-only { display: none !important; }
  .mobile-only { display: inline !important; }

  /* 대차 시트: 차입처(목록), 스왑처 컬럼 숨김 + 순번 숨김 + 컴팩트 */
  #tbl-lending th:nth-child(9), #tbl-lending td.lending-lenders,
  #tbl-lending th:nth-child(10), #tbl-lending td.lending-swap,
  #tbl-lending th:first-child, #tbl-lending td.idx {
    display: none;
  }
  /* 한 화면에 8컬럼(=순번 제외 시 7컬럼) 들어가도록 폰트·패딩 압축 */
  #tbl-lending th, #tbl-lending td { font-size: 10px; padding: 3px 3px; }
  #tbl-lending .lending-name { font-size: 11px; max-width: 110px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 주식형펀드 첫 표 — 누계 팀, YTD 팀 컬럼 숨김 (펀드 기준만) */
  #tbl-ef-fund-summary .ef-team-col {
    display: none;
  }
  /* 주식형펀드 첫 표 — 모바일에서 # 컬럼 숨김 + 펀드명 한 줄 유지 (2줄 wrap 방지).
     # 컬럼 자리만큼 펀드 컬럼이 자연 흡수. tfoot 합계 행 첫 td 도 .idx 클래스 부여됨. */
  #tbl-ef-fund-summary thead th:first-child,
  #tbl-ef-fund-summary tbody td.idx,
  #tbl-ef-fund-summary tfoot td.idx {
    display: none;
  }
  #tbl-ef-fund-summary thead th:nth-child(2),
  #tbl-ef-fund-summary tbody td:nth-child(2),
  #tbl-ef-fund-summary tfoot td:nth-child(2) {
    white-space: nowrap;
  }
}

/* desktop default — 모바일 전용은 숨김 */
.mobile-only { display: none; }
.desktop-only { display: inline; }

/* 일별 기준가 표 — 수정기준가 컬럼은 admin 만 표시 (전역) */
#tbl-ef-daily-base .ef-mod-col { display: none; }
body.is-admin #tbl-ef-daily-base .ef-mod-col { display: table-cell; }
/* admin input 셀 좁게 */
#tbl-ef-daily-base input.ef-db-in {
  width: 90px; text-align: right; padding: 2px 4px;
  border: 1px solid var(--border); border-radius: 3px; font-size: 12px;
}

  /* 캘린더 — 위 북별 표(=panel 너비 그대로) 에 맞춰 줄어들 수 있게 */
  .cal-row { max-width: 100%; min-width: 0; }
  .cal-wrap { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .cal-side { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .cal-nav { flex-wrap: wrap; }
  .cal-nav .hint { margin-left: 0; flex-basis: 100%; font-size: 10px; }
  table.calendar { font-size: 10px; }
  table.calendar th { padding: 3px; }
  table.calendar td { padding: 3px; height: 44px; overflow: hidden; }
  table.calendar .cal-day { font-size: 10px; }
  table.calendar .cal-pnl { font-size: 10px; margin-top: 1px; }
  table.calendar .cal-pnl.cal-pnl-small { font-size: 8px; }
}

/* ── login ── */
.login-body {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; background: var(--bg);
}
.login-card {
  background: #fff; padding: 32px 28px; border-radius: 8px;
  box-shadow: var(--shadow); width: 320px;
  display: flex; flex-direction: column; gap: 12px;
}
.login-title { font-size: 18px; font-weight: 600; }
.login-sub { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.login-card input[type=password] {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px;
}
.login-card button {
  padding: 10px; background: var(--blue); color: #fff; border: 0;
  border-radius: 6px; font-size: 14px; cursor: pointer;
}
.login-card button:hover { background: #1565c0; }
.err { color: var(--red); font-size: 12px; padding-top: 4px; }

/* ── topbar ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 600; font-size: 15px; cursor: pointer; user-select: none; }
.brand:hover { color: var(--blue); }
.ctrls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ctrls .status-row { margin-right: 12px; }
.ctrls .date-row { gap: 12px; }
.ctrls label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ctrls select,
.ctrls input[type=date] {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px;
  background: #fff;
}
.ctrls input[type=date] { font-family: inherit; }
.ctrls .chk { color: var(--fg); }
.btn-mini {
  padding: 4px 10px; background: #fff; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; font-size: 12px;
}
.btn-mini:hover { background: var(--row-hover); }
.logout-form { display: inline; margin: 0; }
.upload-btn { cursor: pointer; user-select: none; }
.upload-btn:hover { background: var(--row-hover); }
/* file input 숨기기 — label 클릭 시 dialog 정상 작동하게 visually-hidden 패턴 사용 */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* HTML hidden 속성을 항상 강제 (일부 framework/CSS 가 display 덮어쓰는 것 방지) */
[hidden] { display: none !important; }

/* 한도 (당일) / 한도변화 컬럼 — 거래 시뮬레이션 붙이기 전까지 숨김 */
.limit-today-col, .limit-change-col { display: none; }

/* ── tabs ── */
.tabs-wrap {
  position: sticky;
  /* topbar 가 wrap 될 수 있어 JS 가 --topbar-h 를 동적 갱신. 미설정 시 fallback 49px */
  top: var(--topbar-h, 49px);
  z-index: 9;
  background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: stretch;
  max-width: 1000px; margin: 0 auto;
}
.tabs {
  display: flex; gap: 2px; padding: 0 8px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none;          /* Firefox */
  scroll-behavior: smooth;
}
.tabs::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.tab {
  padding: 8px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; font-size: 13px; color: var(--muted);
  white-space: nowrap; flex: 0 0 auto;
}
.tab:hover { color: var(--fg); background: var(--row-hover); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
/* 좌우 스크롤 화살표 */
.tabs-scroll {
  flex: 0 0 auto; width: 28px; padding: 0;
  background: linear-gradient(to right, transparent, #fff 60%);
  border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 18px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.tabs-scroll.left { background: linear-gradient(to left, transparent, #fff 60%); }
.tabs-scroll:hover { color: var(--fg); }
.tabs-scroll[hidden] { display: none; }
@media (max-width: 1000px) {
  .tabs-wrap { max-width: 100%; }
}

/* ── panels ── */
.panel { padding: 16px; }
.panel.hidden { display: none; }
.sec { margin: 28px 0 10px; font-size: 14px; font-weight: 600; color: var(--hdr-fg); }
.sec:first-of-type { margin-top: 16px; }

/* ── KPI ── */
.kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px;
}
.kpi {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px;
}
.kpi-label { font-size: 16px; color: var(--muted); white-space: nowrap; }
.kpi-date { font-size: 11px; color: var(--muted); margin-left: 2px; }
.kpi-val { font-size: 22px; font-weight: 600; margin-top: 4px; }
.kpi-val.small { font-size: 14px; line-height: 1.4; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* 누계 카드: 월누계(위, 전일손익과 동일 양식) + 기누계(아래, 약간 공백) */
.kpi-label-gap { margin-top: 10px; }
/* 해외투자 탭 — KPI 5카드 한 줄 (가운데 3개는 좁게) */
#panel-foreign .kpi-row {
  grid-template-columns: 1.25fr 0.85fr 0.85fr 0.85fr 1.25fr;
}
#panel-foreign .kpi { padding: 12px 14px; }
#panel-foreign .kpi-label { font-size: 14px; }
#panel-foreign .kpi-val { font-size: 24px; }
#panel-foreign .kpi-val.small { font-size: 21px; font-weight: 600; }
@media (max-width: 900px) {
  #panel-foreign .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
/* 통합 카드 (전일/월누계/기누계) — 라벨 좌 · 값 우, 3행 */
.kpi-trow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kpi-trow + .kpi-trow { margin-top: 7px; }
.kpi-trow .kpi-tval { font-size: 22px; font-weight: 600; }   /* 당일손익 숫자와 동일 */
/* 델타 카드 — 2칸 폭 + 큰 글씨 (가독성). 통합카드 값(17px)과 통일 */
.kpi-delta-wide { grid-column: span 2; }
.kpi-delta-wide .kpi-val.small { font-size: 17px; }

/* ── KPI 카드 다듬기 (2026-07-15) ────────────────────────────── */
.kpi { border-radius: 8px; }
/* 통합카드(전일/월누계/기누계) 행 사이 헤어라인 */
.kpi-trow + .kpi-trow { padding-top: 6px; border-top: 1px solid var(--border); }
/* 델타 카드 내부 — 정렬 그리드 + 전월비 배지 */
.delta-wrap { display: flex; gap: 38px; align-items: flex-start; flex-wrap: wrap;
              padding: 4px 4px 0 12px; }
.delta-grid { display: inline-grid; grid-template-columns: auto auto auto;
              column-gap: 14px; row-gap: 8px; white-space: nowrap;
              align-items: baseline; line-height: 1.3; }
.delta-grid.sub { border-left: 2px solid var(--border); padding-left: 16px; }
.delta-head { grid-column: 1 / -1; font-size: 12px; color: var(--muted);
              letter-spacing: .05em; margin-bottom: -3px; }
.delta-head.span2 { grid-column: 1 / 3; }
/* 전월말대비 열 머리글 ('9/30 대비') — 배지 열 위, 우측 정렬 */
.delta-cmp { font-size: 12px; color: var(--muted); justify-self: end; margin-bottom: -3px; white-space: nowrap; }
.delta-div { grid-column: 1 / -1; height: 1px; background: var(--border); margin: 0; }
.delta-chg { font-size: 12px; padding: 1px 7px; border-radius: 10px;
             justify-self: end; font-variant-numeric: tabular-nums; }
.delta-chg.pos { background: rgba(19, 115, 51, .09); }
.delta-chg.neg { background: rgba(217, 48, 37, .09); }
.delta-chg.zero { background: rgba(128, 128, 128, .08); color: var(--muted); }

/* ── tables ── */
.tbl {
  width: 100%; background: #fff; border: 1px solid var(--border);
  border-collapse: collapse; font-size: 13px;
}
.tbl th, .tbl td {
  padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap;
}
.tbl thead th {
  background: var(--hdr-bg); color: var(--hdr-fg); font-weight: 600;
  position: sticky; top: 0; cursor: pointer; user-select: none;
}
.tbl thead th.sorted { background: #d2e3fc; color: #1967d2; }
.sort-arrow { font-size: 10px; color: #1967d2; margin-left: 2px; }
.tbl thead th.r, .tbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.idx { color: var(--muted); width: 1%; padding-right: 14px; }
.tbl tbody tr:hover { background: var(--row-hover); }
.tbl tbody tr.click { cursor: pointer; }
/* 종목별 탭은 종목명 셀 클릭만 시계열로 이동 (모바일 표 스크롤 시 오작동 방지).
   tr.click 자체 cursor 는 default 로 — 클릭 가능한 곳이 종목명임을 시각적으로도 명확. */
#tbl-by-stock tbody tr.click { cursor: default; }
#tbl-by-stock tbody tr.click td.col-name { cursor: pointer; }
.tbl.small th, .tbl.small td { font-size: 12px; padding: 4px 8px; }
.tbl.small thead th { position: sticky; top: 0; }   /* 헤더 고정 */
#ef-daily-pnl-th { line-height: 1.15; }

.tbl-wrap { max-height: calc(100vh - 220px); overflow: auto; }

/* 종목별 / 시계열 / 리포트 종목별 / Portfolio — 자체 스크롤 비활성, 페이지가 자연스럽게 길어짐 */
#panel-ts .tbl-wrap,
#panel-report .tbl-wrap,
#panel-equity .tbl-wrap,
#panel-foreign .tbl-wrap,
#panel-raw .tbl-wrap {
  max-height: none;
  overflow: visible;
}
/* 종목별 — 컬럼이 많아서 컨테이너 내부 가로/세로 스크롤. 종목명 sticky 좌측. */
#panel-stock .stock-wrap {
  max-height: calc(100vh - var(--sticky-offset, 110px) - 60px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0; padding: 0;   /* 좌측 정렬 — filter-row 와 같은 left edge */
}
#tbl-by-stock {
  min-width: 1180px;   /* 컬럼 폭 제한 했으니 더 작게 — 좌측 정렬 + 공간 효율 */
  margin: 0;
  border-collapse: collapse;
}
/* sticky thead — 컨테이너 내부 top:0 */
#tbl-by-stock thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--hdr-bg);
}
/* sticky 좌측 — # / 종목명. # 은 컴팩트, 종목명도 폭 타이트하게. */
#tbl-by-stock thead th.col-idx,
#tbl-by-stock tbody td.col-idx {
  position: sticky; left: 0; z-index: 7;
  background: var(--hdr-bg);
  width: 24px; min-width: 24px;
  padding: 4px 2px;
  font-size: 11px;
}
#tbl-by-stock thead th.col-name,
#tbl-by-stock tbody td.col-name {
  position: sticky; left: 24px; z-index: 7;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 4px 6px;
}
#tbl-by-stock thead th.col-name { width: 150px; min-width: 150px; max-width: 150px; }
#tbl-by-stock tbody td.col-name { padding: 0; cursor: pointer; }
#tbl-by-stock tbody td.col-name .name-inner {
  display: block;
  width: 150px;
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tbl-by-stock tbody td.col-name:hover .name-inner { overflow: visible; }
#tbl-by-stock thead th.col-name,
#tbl-by-stock thead th.col-idx {
  z-index: 8;   /* thead × sticky-left 교차 셀 — 최상단 */
}
#tbl-by-stock thead th.col-name { background: var(--hdr-bg); }
#tbl-by-stock tbody tr:hover td.col-name,
#tbl-by-stock tbody tr:hover td.col-idx { background: var(--row-hover); }
#tbl-by-stock tbody tr.total td.col-name,
#tbl-by-stock tbody tr.total td.col-idx { background: #f1f3f4; }

/* 수량(9번째) / 펀드(14번째) 컬럼 — 폭 제한 + ellipsis + hover 시 풀 노출.
   - 수량: 6-7 자리 콤마 숫자 가 일반적 → 70px
   - 펀드: tag 1-2 개 일반적 → 84px (조금 여유)
   넘치면 ellipsis, 호버 시 풀 노출. */
#tbl-by-stock thead th:nth-child(9),
#tbl-by-stock tbody td:nth-child(9) {
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tbl-by-stock thead th:nth-child(14),
#tbl-by-stock tbody td:nth-child(14) {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tbl-by-stock tbody td:nth-child(9):hover,
#tbl-by-stock tbody td:nth-child(14):hover {
  overflow: visible;
  position: relative;
  z-index: 6;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* 펀드 tag 들이 줄바꿈 안 되게 + 작은 폰트 */
#tbl-by-stock tbody td:nth-child(14) .tag {
  font-size: 10px;
  padding: 1px 4px;
  margin-right: 2px;
}

/* 종목별 표 전체적으로 padding 살짝 줄여서 더 타이트하게 */
#tbl-by-stock th,
#tbl-by-stock td {
  padding: 3px 5px;
}

/* Portfolio(#tbl-raw) — 가로폭 축소 (종목별 탭과 동일 방침).
   종목명·잔고: 폭 제한 + ellipsis + hover 전체노출. 잔고는 풀 숫자 유지(정확).
   섹터·셀패딩도 축소. */
#tbl-raw th, #tbl-raw td { padding: 3px 5px; }
#tbl-raw thead th.col-name { width: 124px; min-width: 124px; max-width: 124px; }
#tbl-raw tbody td.col-name { padding: 0; }
#tbl-raw tbody td.col-name .name-inner {
  display: block; max-width: 124px; padding: 3px 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tbl-raw tbody td.col-name:hover .name-inner {
  overflow: visible; position: relative; z-index: 6;
  width: max-content; max-width: 360px;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* 잔고(5번째) — 풀 숫자. 길면(01WJ/01AO/01WH/00HI 조합 등 8자리+) ellipsis + hover 전체노출
   (종목별 '수량' 컬럼과 동일). 일반(≤7자리=최대 9글자)은 70px 안에 다 보임. */
#tbl-raw thead th:nth-child(5),
#tbl-raw tbody td:nth-child(5) {
  max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tbl-raw tbody td:nth-child(5):hover {
  overflow: visible; position: relative; z-index: 6;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* 섹터(15번째) — 폭 제한 + ellipsis (총합계행은 셀 수 적어 nth-15 미해당 → 영향 없음) */
#tbl-raw thead th:nth-child(15),
#tbl-raw tbody td:nth-child(15) {
  max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 페이지 스크롤 패널의 sticky thead — JS 가 측정한 topbar+tabs 합계로 오프셋
   (panel-stock 는 자체 스크롤 컨테이너 .stock-wrap 사용 — 이 리스트 제외) */
#panel-ts .tbl thead th,
#panel-report .tbl thead th,
#panel-equity .tbl thead th,
#panel-raw .tbl thead th,
#panel-lending .tbl thead th {
  top: var(--sticky-offset, 94px);
  z-index: 5;
}

/* 요약 탭의 운용구분별/북별 표 — 가로 overflow 시 표 자체 스크롤 (panel 폭 보존) */
#panel-summary .summary-tbl-wrap {
  max-height: none;        /* 세로 스크롤 불필요 */
  overflow-x: auto;        /* 가로 만 필요 시 */
  overflow-y: visible;
}

/* 메자닌 헷지 현황 — 요약 블록 (지수헷지 + 비율 요약 좌우 배치) */
.mhedge-summary-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mhedge-summary-col {
  flex: 1 1 380px;
  min-width: 0;
}
.mhedge-subtitle {
  font-size: 13px;
  margin: 8px 0 6px;
  color: var(--muted);
  font-weight: 600;
}
/* 헷지 비율 요약 표 — 행 색상 제거 (헤더 만 강조 — bindSortableTable th 스타일 사용) */
.num.muted                             { color: var(--muted); }
.est-mark {
  color: #f59e0b; font-weight: 700; margin-left: 2px; font-size: 11px;
  cursor: help;
}
@media (max-width: 768px) {
  .mhedge-summary-row { gap: 8px; }
  .mhedge-summary-col { flex: 1 1 100%; }
}

@media (max-width: 768px) {
  #panel-summary .summary-tbl-wrap {
    -webkit-overflow-scrolling: touch;
  }
  #tbl-category-table {
    width: max-content;
    min-width: 620px;
  }
  #tbl-book-summary-table {
    width: max-content;
    min-width: 540px;
  }
  #tbl-category-table th,
  #tbl-category-table td,
  #tbl-book-summary-table th,
  #tbl-book-summary-table td {
    padding: 2px 3px;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
    word-break: keep-all;
  }
  #tbl-category-table th:first-child,
  #tbl-category-table td:first-child,
  #tbl-book-summary-table th:first-child,
  #tbl-book-summary-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 7;
    width: 1%;
    min-width: 42px;
    max-width: 58px;
    padding-left: 4px;
    padding-right: 4px;
    background: #fff;
    border-right: 1px solid var(--border);
  }
  #tbl-category-table th:first-child,
  #tbl-book-summary-table th:first-child {
    z-index: 9;
    background: var(--hdr-bg);
  }
  #tbl-category-table tr.total td:first-child,
  #tbl-book-summary-table tr.total td:first-child {
    background: #f1f3f4;
  }
  #panel-summary .summary-mobile-label {
    display: inline-block;
    white-space: nowrap;
    font-size: 0;
  }
  #panel-summary .summary-mobile-label::after {
    content: attr(data-mobile-label);
    font-size: 10px;
  }
}

.num.pos { color: var(--green); }
.num.neg { color: var(--red); }
.num.zero { color: #80868b; }

.kind-group  { background: #e8f0fe; color: #1967d2; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.kind-fund   { background: #e6f4ea; color: #137333; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.kind-cohort { background: #fce8e6; color: #c5221f; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.kind-fut    { background: #fff4e5; color: #b06000; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
/* 호환 (옛 클래스 — 안전) */
.kind-mezz { color: #5f6368; font-size: 11px; }
.kind-stock { color: #5f6368; font-size: 11px; }

.tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px;
       background: #e8eaed; color: var(--muted); margin-right: 2px; }
/* 합산 펀드 태그 (예: 01WP+3) — 일반 회색, +N 으로 식별 */
.tag.merged { background: #e8eaed; color: var(--muted); cursor: help; }
.tag.merged sup { font-size: 9px; margin-left: 1px; opacity: .7; }
.sub-funds { color: var(--muted); font-size: 11px; cursor: help; }
/* LIVE 태그 — 초록 (장중 실시간) */
.tag.live-tag-on {
  background: #e6f4ea; color: #137333; font-weight: 600;
}

.merged-cell { cursor: help; }
.merged-cell sup { font-size: 9px; margin-left: 1px; color: #8a6d00; opacity: .85; }

/* 종목별: 헷지 합산 종목의 우상단 마커 */
.hedge-marker { cursor: help; position: relative; }
.hedge-marker sup.hedge-dot {
  font-size: 14px; line-height: 0; margin-left: 2px; color: #d97706;
  vertical-align: super;
}

/* 종목별: TRADE_GROUPS (SKC / 한화솔루션 / 엘앤에프 등) 의 우상단 마커.
   호버 시 펀드별 주식/선물/net 수량 표시. */
.group-marker { cursor: help; position: relative; }
.group-marker sup.group-dot {
  font-size: 14px; line-height: 0; margin-left: 2px; color: #1565c0;
  vertical-align: super;
}

.map-label { color: #1967d2; font-size: 11px; }
.raw-name { color: var(--muted); font-size: 11px; }

/* ── 캘린더 (요약탭 일자별 손익) ── */
.cal-row { display: flex; gap: 16px; align-items: flex-start; margin-top: 8px; flex-wrap: wrap; }
.cal-wrap { flex: 1 1 480px; min-width: 480px; }
.cal-side { flex: 0 0 280px; min-width: 240px; }
.cal-side-title { font-size: 13px; margin: 0 0 6px; }
.cal-nav {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 13px;
}
.cal-nav .hint { margin-left: auto; }

table.calendar {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: 11px;
}
table.calendar th {
  background: #f5f5f5; color: #5f6368; font-weight: 600;
  padding: 4px; text-align: center; border: 1px solid var(--border);
}
table.calendar td {
  border: 1px solid var(--border); padding: 4px; vertical-align: top;
  height: 56px; background: #fff;
}
table.calendar td.empty { background: #fafafa; }
table.calendar td.weekend { background: #fcfcfd; }
table.calendar td.today { background: #fff8dc; }
table.calendar td.click { cursor: pointer; transition: background .12s; }
table.calendar td.click:hover { background: #e8f0fe; }
table.calendar .cal-day {
  font-weight: 600; color: #3c4043; font-size: 11px;
}
table.calendar .cal-day.sun { color: #d93025; }
table.calendar .cal-day.sat { color: #1967d2; }
table.calendar .cal-pnl {
  display: block; margin-top: 2px; font-weight: 700; font-size: 12px;
  text-align: right;
}
/* 주말·공휴일(매매 없음) — 자금비용만 발생한 날: 폰트 3sz 작게 + 약하게 */
table.calendar .cal-pnl.cal-pnl-small {
  font-size: 9px; font-weight: 500; opacity: .7; margin-top: 4px;
}
table.calendar .cal-pnl.pos { color: #137333; }
table.calendar .cal-pnl.neg { color: #d93025; }
table.calendar .cal-pnl.zero { color: #9aa0a6; }

/* ── filter row ── */
.filter-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.filter-row input[type=search],
.filter-row select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px;
  background: #fff;
}
.filter-row input[type=search] { width: 240px; }
.hint { color: var(--muted); font-size: 11px; }
.comp-live-field.muted { opacity: 0.45; }

/* ── 다중선택 드롭다운 ── */
.multiselect { position: relative; display: inline-block; }
.multiselect .ms-trigger {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 130px; text-align: left;
  font-family: inherit;
}
.multiselect .ms-trigger:hover { border-color: #adb5bd; }
.multiselect .ms-label { flex: 1; color: #333; }
.multiselect .ms-label.empty { color: var(--muted); }
.multiselect .ms-arrow { color: var(--muted); font-size: 9px; }
.ms-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: var(--shadow); max-height: 320px; overflow-y: auto;
  z-index: 100; min-width: 100%; padding: 4px 0;
}
.ms-panel.hidden { display: none; }
.ms-item {
  display: flex; padding: 5px 12px; cursor: pointer;
  font-size: 13px; align-items: center; gap: 8px; user-select: none;
}
.ms-item:hover { background: #f5f5f5; }
.ms-item input { margin: 0; cursor: pointer; }
.ms-item .ms-text { color: #333; white-space: nowrap; }
.ms-actions {
  display: flex; gap: 4px; padding: 4px 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.ms-actions button {
  font-size: 11px; padding: 3px 8px; background: #f5f5f5;
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.ms-actions button:hover { background: #e8eaed; }
.ref-date {
  display: inline-block; padding: 4px 10px; background: #fff8dc;
  border: 1px solid #f0e0a0; border-radius: 4px;
  font-size: 12px; color: #6b5f00; font-weight: 600;
}

/* ── chart ── */
.chart-wrap {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 12px; margin: 8px 0; height: 360px;
}

.note { color: var(--muted); font-size: 11px; margin-top: 12px; }

.status {
  position: fixed; bottom: 12px; right: 12px;
  background: rgba(32,33,36,.92); color: #fff; padding: 6px 12px;
  border-radius: 20px; font-size: 12px; opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.status.show { opacity: 1; }
.status.err { background: var(--red); }

.ts-info { color: var(--muted); font-size: 11px; }

.empty-state {
  text-align: center; padding: 80px 20px; color: var(--muted);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state h2 { color: var(--fg); margin: 0 0 12px; }
.empty-state p { margin: 6px 0; }

/* 시장 상태 pill */
.market-pill {
  padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
  background: #e8eaed; color: var(--muted);
}
.market-pill.on      { background: #e6f4ea; color: #137333; }
.market-pill.closed  { background: #f1f3f4; color: #5f6368; }
.market-pill.weekend { background: #fce8e6; color: #c5221f; }
.market-pill.off     { background: #fef0c8; color: #8a6d00; }

/* 마지막 가격 갱신 시각 — 헤더에 옅은 글씨로 표시 */
.price-update-time {
  font-size: 11px; color: #9aa0a6; font-weight: 400;
  margin-left: 2px; white-space: nowrap;
}
.price-update-time.stale { color: #c5221f; }

/* ── 리포트22 (정형 보고 템플릿) ── */
.r22-toolbar { gap: 8px; align-items: center; }
.r22-toolbar .r22-nav { min-width: 68px; }
.r22-toolbar .r22-template-btn {
  background: #f8f9fa; border: 1px solid var(--border); padding: 6px 12px;
  font-weight: 500;
}
.r22-toolbar .r22-template-btn:hover { background: #e8f0fe; color: var(--blue); border-color: var(--blue); }
.r22-result { padding-top: 12px; }
.r22-header h2 {
  margin: 0 0 16px; font-size: 18px; font-weight: 600;
  padding-bottom: 8px; border-bottom: 2px solid var(--border);
}
.r22-header h2 .hint { font-size: 13px; font-weight: 400; margin-left: 8px; }
.r22-section {
  margin-bottom: 26px; padding: 0; background: transparent;
  border: 0; border-radius: 0;
  display: flow-root;
  clear: both;
  position: relative;
}
.r22-section h3 {
  margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #1a3a52;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.r22-section h3 .hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.r22-section-title { min-width: 0; }
.r22-section-precision {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 400; color: var(--muted);
  white-space: nowrap;
}
.r22-section-precision input { margin: 0; }
.r22-section .tbl-wrap {
  margin: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}
.r22-section .tbl { width: 100%; table-layout: auto; }
.r22-section .tbl thead th {
  position: static;
  top: auto;
}

/* 라이브 값 변경 시 잔상 효과 — opacity 가 살짝 흐려졌다 돌아옴 (색 없음) */
@keyframes flash-cell {
  0%   { opacity: 0.3; }
  100% { opacity: 1; }
}
.flash-cell { animation: flash-cell 0.6s ease-out; }

/* 거래내역 삭제 버튼 — KPI 카드 sub 영역에 작게. admin 전용 + count>0 일 때만 표시 */
.trades-clear-btn {
  margin-left: 6px; padding: 0 6px; font-size: 11px; line-height: 16px;
  border: 1px solid var(--border); background: #fff; color: #9aa0a6;
  border-radius: 3px; cursor: pointer; vertical-align: middle;
}
.trades-clear-btn:hover { background: #fce8e6; color: #c5221f; border-color: #f6cdc8; }

/* 실시간 가손익 KPI 카드 */
.kpi-row.live { margin-top: 8px; grid-template-columns: 1fr 1fr 1fr; gap: 12px; display: grid; }
.live-card { border-color: #c8e6c9; background: linear-gradient(180deg,#f1faf3 0%, #fff 80%); }
.live-tag { margin-left: 4px; }
.unit { color: var(--muted); font-weight: 400; font-size: 10px; }

/* 표의 총합계 행 — 옅은 회색 강조 */
.tbl tbody tr.total { background: #f1f3f4; font-weight: 600; }
.tbl tbody tr.total td { border-top: 2px solid #c8ccd1; }
.ef-db-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ef-db-title #ef-db-date {
  margin-left: 4px;
  padding: 2px 5px;
  font-size: 12px;
  font-weight: 400;
}
#tbl-ef-daily-base tbody tr.bench td {
  background: #f8fbff;
  border-bottom: 2px solid #dce7f5;
}
#tbl-ef-daily-base tbody tr.bench td,
#tbl-ef-daily-base tbody tr.bench .num {
  color: #3c4043;
}
#tbl-ef-daily-base tfoot tr.total td {
  background: #f1f3f4;
  font-weight: 600;
  border-top: 2px solid #c8ccd1;
  border-bottom: 1px solid #dadce0;
}

@media (max-width: 768px) {
  #panel-equity .ef-daily-wrap {
    width: 100%;
    max-width: 100%;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  #tbl-ef-daily-base {
    width: max-content;
    min-width: 760px;
    table-layout: auto;
  }
  #panel-equity #tbl-ef-daily-base thead th {
    position: static !important;
    top: auto !important;
  }
  #tbl-ef-daily-base th,
  #tbl-ef-daily-base td {
    padding: 2px 3px;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
  }
  #tbl-ef-daily-base thead th:first-child,
  #tbl-ef-daily-base tbody td.idx,
  #tbl-ef-daily-base tfoot td.idx {
    display: none;
  }
  #tbl-ef-daily-base thead th:nth-child(2),
  #tbl-ef-daily-base tbody td:nth-child(2),
  #tbl-ef-daily-base tfoot td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 7;
    width: 1%;
    min-width: 50px;
    max-width: 66px;
    padding-left: 4px;
    padding-right: 4px;
    background: #fff;
    border-right: 1px solid var(--border);
  }
  #tbl-ef-daily-base thead th:nth-child(2) {
    position: sticky !important;
    left: 0;
    top: auto !important;
    z-index: 9;
    background: var(--hdr-bg);
  }
  #tbl-ef-daily-base tbody tr.bench td:nth-child(2) {
    background: #f8fbff;
  }
  #tbl-ef-daily-base tfoot tr.total td:nth-child(2) {
    background: #f1f3f4;
  }
}

/* 기누계 (YTD) 행 — 총합계와 미묘하게 다른 옅은 파란 톤 */
.tbl tbody tr.ytd-row { background: #e8eef5; font-weight: 600; color: #1a3a52; }
.tbl tbody tr.ytd-row td { border-top: 1px dashed #b5c4d3; }

/* 종목별 탭 — 평가손실률 -15% 이상 (Long 포지션) 행 강조: 옅은 붉은색 */
#tbl-by-stock tbody tr.row-loss td { background: #fce8e6; }
#tbl-by-stock tbody tr.row-loss td.col-name,
#tbl-by-stock tbody tr.row-loss td.col-idx { background: #fce8e6; }
#tbl-by-stock tbody tr.row-loss td.col-name .name-inner { background: #fce8e6; }
#tbl-by-stock tbody tr.row-loss:hover td,
#tbl-by-stock tbody tr.row-loss:hover td.col-name,
#tbl-by-stock tbody tr.row-loss:hover td.col-idx { background: #f6cdc8; }
#tbl-by-stock tbody tr.row-loss:hover td.col-name .name-inner { background: #f6cdc8; }

/* 시계열 점프 링크 — 일반 텍스트처럼 보이되 hover 시 밑줄 + 손모양 */
a.ts-link { color: inherit; text-decoration: none; cursor: pointer; }
a.ts-link:hover { text-decoration: underline; color: var(--blue); }

/* 종목 탭 — 상승/하락 split */
.changes-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 16px; }
.changes-half { background: #fff; border: 1px solid #e8eaed; border-radius: 8px; padding: 10px 12px; }
.changes-title { font-size: 13px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.2px; }
.changes-title.pos { color: var(--green); }
.changes-title.neg { color: var(--red); }
@media (max-width: 768px) {
  .changes-row { grid-template-columns: 1fr; }
}

/* 펀드 요약 표 — admin 입력 */
.fund-summary-wrap { margin: 12px 0 18px; }
.fund-summary-wrap .tbl th, .fund-summary-wrap .tbl td {
  padding: 4px 6px;
  font-size: 12px;
}

/* 누계 / KOSPI대비 / YTD / KOSPI대비 표 — 5 컬럼이라 좁은 표 */
.tbl.compact th, .tbl.compact td { padding: 4px 8px; }
#tbl-ef-ret-summary { max-width: 600px; }   /* 좌측 정렬 (table 기본 margin 0) */

/* 긴 종목명 truncate — hover 시 title attribute 로 전체 노출 */
.cell-trunc {
  display: inline-block;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* TOP 20 종목 표 — 5 컬럼이라 좁은 표 */
#tbl-top-stocks { max-width: 600px; }   /* 좌측 정렬 */
#tbl-top-stocks tr.top20-sum td {
  background: #f1f3f4;
  font-weight: 600;
  border-top: 2px solid #dadce0;
  color: #1a1a1a;
}
#tbl-top-stocks tr.top20-sum td.idx { color: #9aa0a6; font-weight: 400; }
#tbl-ef-fund-summary thead th { text-align: center; }   /* 제목 셀 가운데 정렬 (.r override) */
#tbl-ef-fund-summary th.grp { border-bottom: 1px solid #dadce0; background: #f1f3f4; }
#tbl-ef-fund-summary th.sub { font-weight: 500; font-size: 11.5px; color: #5f6368; background: #f8f9fa; }
#tbl-ef-fund-summary tfoot tr.total td { background: #f1f3f4; font-weight: 600; border-top: 2px solid #dadce0; }
#tbl-ef-fund-summary input.ef-sum-in {
  width: 78px;
  padding: 3px 6px;
  text-align: right;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
  font-variant-numeric: tabular-nums;
}
#tbl-ef-fund-summary input.ef-sum-in:focus {
  outline: none;
  border-color: #1a73e8;
  background: #fff8e1;
}
#tbl-ef-fund-summary input.ef-sum-in::-webkit-outer-spin-button,
#tbl-ef-fund-summary input.ef-sum-in::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.btn-ghost {
  background: #fff; color: #5f6368; border: 1px solid #dadce0;
}
.btn-ghost:hover { background: #f1f3f4; }

/* ── admin 휴장일 캘린더 ── */
.hol-calendar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 1100px) {
  .hol-calendar { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .hol-calendar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hol-calendar { grid-template-columns: 1fr; }
}
.hol-month {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 8px;
}
.hol-month h4 {
  margin: 0 0 6px; font-size: 12px; color: #3c4043; text-align: center;
  font-weight: 600;
}
.hol-cal-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hol-cal-tbl th {
  font-size: 10px; font-weight: 500; color: #5f6368;
  padding: 2px; text-align: center;
}
.hol-cal-tbl td {
  text-align: center; vertical-align: middle;
  padding: 0; border: 0;
}
.hol-cell {
  display: block; padding: 4px 0;
  font-size: 11px; cursor: pointer;
  border-radius: 4px;
  user-select: none;
}
.hol-cell:hover { background: #f1f3f4; }
.hol-cell.weekend { color: #9aa0a6; cursor: not-allowed; }
.hol-cell.weekend:hover { background: transparent; }
.hol-cell.holiday { background: #fce8e6; color: #c5221f; font-weight: 600; }
.hol-cell.holiday:hover { background: #f6cdc8; }
.hol-cell.sun { color: #d93025; }
.hol-cell.sat { color: #1967d2; }
.hol-cell input { display: none; }   /* 체크박스 숨기고 cell click 으로 토글 */
.hol-cell.empty { visibility: hidden; cursor: default; }

/* 누계/YTD/KOSPI대비 요약 표 — 벤치마크(KOSPI) 행 강조 */
#tbl-ef-ret-summary tr.bench {
  background: #f8f9fa;
  border-bottom: 2px solid #dadce0;
}
#tbl-ef-ret-summary tr.bench td {
  font-size: 12.5px;
  color: #202124;
}
#tbl-ef-ret-summary th .hint { font-size: 10.5px; color: var(--muted); margin-left: 2px; }

/* ── 섹터 카드 (분류 3개 병렬) ── */
.sector-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 12px 0 16px;
}
.sector-card {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  padding: 18px 18px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: flex; flex-direction: column;
}
.sc-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f2f4;
}
.sc-title {
  font-size: 14px; font-weight: 600; color: #1a1a1a;
  margin: 0; letter-spacing: -0.3px;
}
.sc-total {
  font-size: 18px; font-weight: 700; color: #1a73e8;
  font-feature-settings: "tnum";
}
.sc-total::after { content: "억"; font-size: 11px; color: #5f6368; margin-left: 2px; font-weight: 500; }
.sc-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Chart.js 반응형 — position relative + canvas absolute 로 ResizeObserver 가
   parent 줄어듦도 정확히 감지하도록. flex 안에선 canvas 가 줄어들기 안 함. */
.sc-chart {
  position: relative;
  height: 200px;
  width: 100%;
  min-width: 0;
}
.sc-chart canvas {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
}
.sc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px;
}
.sc-list li {
  display: grid;
  /* dot | name (가변 50~110px) | 비중 | 전월대비 | 금액
     섹터비중 탭(3 카드) 좁은 레이아웃에선 name 줄어들고, 주식형펀드 탭(단일 카드)에선 max 110 */
  grid-template-columns: 12px minmax(50px, 110px) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #f5f6f7;
  cursor: default;
}
.sc-name {
  color: #3c4043;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-list li:hover { background: #f8f9fa; }
.sc-amt {
  color: #5f6368; font-feature-settings: "tnum";
  min-width: 48px; text-align: right;
  font-size: 11.5px;
}
.sc-amt::after { content: "억"; font-size: 10px; color: #9aa0a6; margin-left: 1px; }
.sc-list li:last-child { border-bottom: 0; }
.sc-list li.sc-total-row {
  font-weight: 600;
  border-top: 1px solid #d8dde2;
  border-bottom: 0;
  margin-top: 4px; padding-top: 8px;
}
.sc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.sc-pct {
  color: #1a1a1a; font-weight: 600; font-feature-settings: "tnum";
  min-width: 50px; text-align: right;
}
.sc-diff {
  font-size: 11px; min-width: 56px; text-align: right;
  font-feature-settings: "tnum";
}
.sc-diff.pos { color: var(--green); }
.sc-diff.neg { color: var(--red); }
.sc-diff.zero { color: #9aa0a6; }

/* 단일 카드 모드 — 주식형펀드 탭 안의 fund 섹터비중 카드 */
/* max-width 로 카드 폭 cap, grid 자체는 1열 — 좌측 정렬 (margin-right: auto) */
.sector-cards.single {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-right: auto;
}
.sector-cards.single .sector-card { max-width: 100%; }
/* 단일 카드일 땐 도넛 좌 / 리스트 우 2열 — minmax 로 컬럼 shrink 허용 */
.sc-body.sc-body-row {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.sc-body.sc-body-row .sc-chart { height: 240px; }

/* sector-card 도 grid item 으로 들어갈 때 min-width: 0 가 없으면 축소 안 됨 */
.sector-card { min-width: 0; }

@media (max-width: 1100px) {
  .sector-cards { grid-template-columns: 1fr; }
  .sc-body.sc-body-row { grid-template-columns: 1fr; }
}

/* 대차 테이블 — Google Sheet 의 '현황요약' 스크린샷 스타일 매칭 */
.lending-wrap { /* 자체 스크롤 없이 패널이 자연스럽게 늘어남 */
  overflow: visible;
}
.lending-tbl thead th {
  background: #1f4e78;     /* 진한 네이비 */
  color: #fff;
  text-align: center;
  font-weight: 700;
  position: sticky; top: 0; z-index: 1;
}
.lending-tbl tbody td { padding: 3px 8px; }   /* 컴팩트 — 33행+합계 한 화면에 */
.lending-tbl tbody td.idx { text-align: center; color: var(--muted); }
/* 종목명 — 한·영 일관된 굵기 (Bold 제거) */
.lending-tbl .lending-name {
  font-weight: 500;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    -apple-system, BlinkMacSystemFont, sans-serif;
}
/* 차입처(목록) — 너무 길면 잘라서 hover 로 전체 보기 */
.lending-tbl .lending-lenders {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   반응형 (iPhone 13 Pro 390×844 기준)
   ========================================================================== */
@media (max-width: 768px) {
  body { font-size: 12px; }

  /* 상단바: 세로 정렬 + 컨트롤 wrap */
  .topbar { padding: 8px 10px; gap: 6px; }
  .brand { font-size: 14px; }
  .ctrls { gap: 6px; }
  .ctrls label { font-size: 11px; }
  .ctrls input[type=date], .ctrls select, .btn-mini { font-size: 12px; padding: 3px 6px; }

  /* 탭 가로 스크롤 */
  .tabs {
    top: 0; padding: 0 8px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    position: sticky;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 7px 10px; font-size: 12px; flex-shrink: 0; }

  .panel { padding: 8px; }

  /* KPI 2열 그리드 */
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-row.live { grid-template-columns: 1fr; }
  /* 델타 카드(2블록 breakdown)는 모바일에서 가로로 넓어 한 줄 전체 차지 */
  .kpi-row > .kpi:last-child { grid-column: 1 / -1; }
  .kpi { padding: 8px 10px; }
  .kpi-val { font-size: 16px; }
  .kpi-val.small { font-size: 12px; }
  .kpi-label { font-size: 12px; }
  .kpi-trow .kpi-tval { font-size: 16px; }   /* 모바일 당일손익(16px)과 동일 */
  .kpi-delta-wide .kpi-val.small { font-size: 14px; }
  .delta-wrap { gap: 18px; padding-left: 2px; }
  .delta-grid.sub { padding-left: 10px; }
  .delta-chg { font-size: 10px; padding: 0 5px; }
  .delta-cmp { font-size: 10px; }

  /* 표: 가로 스크롤 + 한국어 가독성 위해 폰트 11.5px 유지 (10px은 한글 너무 작음) */
  .tbl { font-size: 11.5px; }
  .tbl th, .tbl td { padding: 4px 6px; }
  .tbl-wrap { max-height: calc(100vh - 200px); }

  /* 모바일도 sticky thead 활성 — JS 가 --sticky-offset 으로 동적 추적 (topbar wrap 대응) */
  /* (별도 override 없이 desktop 규칙 그대로 사용) */

  /* 필터 행: 세로 wrap */
  .filter-row { gap: 6px; }
  .filter-row input[type=search] { width: 100%; }
  .filter-row select, .filter-row input[type=search] { font-size: 12px; padding: 5px 8px; }
  .multiselect .ms-trigger { font-size: 12px; padding: 5px 8px; min-width: 100px; }
  .ms-item { font-size: 12px; padding: 5px 10px; }
  .ref-date { font-size: 11px; padding: 3px 8px; }

  /* 차트 높이 축소 */
  .chart-wrap { height: 260px; padding: 8px; }

  /* 종목 셀 줄바꿈 허용 */
  .tbl td { white-space: normal; word-break: break-word; }
  .tbl td.r { white-space: nowrap; }

  /* market pill 더 작게 */
  .market-pill { padding: 2px 6px; font-size: 10px; }
}

/* 리포트 탭 — 표 우상단 소숫점 토글 */
.precision-toggle {
  float: right; font-size: 11px; font-weight: normal;
  color: var(--muted); cursor: pointer; user-select: none;
}
.precision-toggle input { vertical-align: middle; margin-right: 3px; }

/* iPhone 13 Pro 좁은 폭 (390px) — KPI 1열 */
@media (max-width: 420px) {
  .kpi-row { grid-template-columns: 1fr; }
  .kpi-val { font-size: 18px; }
  .topbar { flex-direction: column; align-items: stretch; }
  .brand { text-align: center; }
  .ctrls { justify-content: center; }
}

/* ==========================================================================
   모달 (메자닌 편집 등)
   ========================================================================== */
.modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal.hidden { display: none; }
.modal-card {
  background: #fff; border-radius: 8px;
  max-width: 520px; width: 100%;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.modal-head {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-close {
  background: transparent; border: 0; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.modal-body {
  padding: 16px 20px; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
}
.modal-body label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--muted);
}
.modal-body input {
  font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit;
}
.modal-foot {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}

@media (max-width: 600px) {
  .modal-body { grid-template-columns: 1fr; }
}

/* 메자닌 정보 테이블 — 컴팩트 */
#tbl-mezzinfo th, #tbl-mezzinfo td { padding: 4px 8px; }
#tbl-mezzinfo .edit-btn {
  background: transparent; border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
#tbl-mezzinfo .edit-btn:hover { background: var(--row-hover); }

/* 정렬 가능한 컬럼 헤더 — 호버시 강조 + 화살표 inline */
th.sortable {
  position: relative;
  user-select: none;
}
th.sortable:hover {
  background: var(--row-hover);
}
th.sortable[data-sort-dir="asc"],
th.sortable[data-sort-dir="desc"] {
  background: var(--hdr-bg);
  color: var(--blue);
}
th .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.85;
}

/* ──────────────────────────────────────────────────────────
   2026-05 수정: 종목별/Portfolio 스크롤 정책 + 모바일 일관성
   - PC: 내부 스크롤 제거 (페이지 자연 스크롤 사용)
   - 모바일: Portfolio 도 가로 스와이프 가능, 종목명 sticky 시 비침 방지
   - 모바일 캘린더 폭 제한 (파일 상단 @media 가 뒤쪽 base rule 에 덮혀서 별도 블록)
   ────────────────────────────────────────────────────────── */

/* PC — 종목별/Portfolio panel 폭은 헤더(1000px) 와 동일.
   내부 스크롤 없음, thead 는 페이지 스크롤 기준 sticky.
   표는 panel 폭에 fit (overflow 없음) — 컬럼은 자연 폭으로 분배. */
@media (min-width: 769px) {
  #panel-stock .stock-wrap {
    max-height: none;
    overflow: visible;
  }
  /* 표 폭 = panel 폭 (table-layout: auto + width:100% → 컬럼 자동 분배) */
  #tbl-by-stock { min-width: 0; width: 100%; }
  #panel-stock #tbl-by-stock thead th {
    position: sticky;
    top: var(--sticky-offset, 94px);
    z-index: 5;
    background: var(--hdr-bg);
  }
  /* col-name / col-idx 의 sticky-left 룰 (#tbl-by-stock thead th.col-name) 이
     상위에 정의돼 top 을 덮어쓰는 사고가 있어 명시적으로 다시 설정.
     z-index 도 thead 의 5 보다 높게 (좌측+상단 교차 셀이 다른 thead 보다 위) */
  #panel-stock #tbl-by-stock thead th.col-name,
  #panel-stock #tbl-by-stock thead th.col-idx {
    top: var(--sticky-offset, 94px);
    z-index: 8;
  }
  /* # 컬럼 가운데정렬 (sticky-left + center) */
  #tbl-by-stock thead th.col-idx,
  #tbl-by-stock tbody td.col-idx {
    text-align: center;
  }

  /* Portfolio 도 동일 */
  #panel-raw .tbl-wrap {
    max-height: none;
    overflow: visible;
  }
  #tbl-raw { width: 100%; }
  #panel-raw #tbl-raw thead th {
    position: sticky;
    top: var(--sticky-offset, 94px);
    z-index: 5;
    background: var(--hdr-bg);
  }
}

/* 모바일 — Portfolio 가로 스크롤 활성 + 종목명 sticky 비침 방지 */
@media (max-width: 768px) {
  /* Portfolio 가로 스크롤 (종목별과 동일 패턴) */
  #panel-raw .tbl-wrap {
    max-height: calc(100vh - var(--sticky-offset, 110px) - 60px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #tbl-raw {
    min-width: 760px;   /* 모든 컬럼 자연 폭 보장 */
  }
  /* Portfolio sticky thead — 내부 스크롤 컨테이너 기준 (top: 0).
     선행 #panel-raw .tbl thead { top: var(--sticky-offset) } 룰이 적용되지 않도록
     specificity 우선 (#panel-raw + #tbl-raw) 으로 덮어씀. */
  #tbl-raw tbody td { background: #fff; }
  #panel-raw #tbl-raw thead th {
    position: sticky; top: 0; z-index: 5; background: var(--hdr-bg);
  }

  /* ── 종목별 종목명 sticky bleed 방지 ─────────────────
     .name-inner 배경 투명이라 가로 스크롤 시 뒷 셀이 비침.
     배경 명시 + 패딩-좌측 0 으로 텍스트가 왼쪽에 붙도록. */
  #tbl-by-stock tbody td.col-name {
    background: #fff !important;
    padding: 0 !important;
  }
  #tbl-by-stock tbody td.col-name .name-inner {
    background: #fff;
    padding: 3px 4px 3px 4px;
  }
  /* 호버/total 시에도 배경 유지 (덮어쓰기 우선순위) */
  #tbl-by-stock tbody tr:hover td.col-name { background: var(--row-hover) !important; }
  #tbl-by-stock tbody tr.total td.col-name { background: #f1f3f4 !important; }
  #tbl-by-stock tbody tr:hover td.col-name .name-inner { background: var(--row-hover); }
  #tbl-by-stock tbody tr.total td.col-name .name-inner { background: #f1f3f4; }

  /* ── 캘린더 폭 — 파일 상단 @media 가 뒤쪽 base rule 에 덮혀서
        명시적 !important + max-width 다시 강제 ──────── */
  .cal-row { max-width: 100% !important; min-width: 0 !important; flex-wrap: wrap; }
  .cal-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .cal-side {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  table.calendar { table-layout: fixed; width: 100%; }
  table.calendar th, table.calendar td { word-break: break-all; }
}

/* ──────────────────────────────────────────────────────────
   2026-05 추가 수정 — 모바일 sticky 좌측 잔상 + Portfolio # 컬럼 숨김
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 종목별 — 종목명 left:0 으로 표 왼쪽 가장자리에 붙임.
     # 컬럼이 display: none 이라도 sticky offset 잔상 방지 위해 모든 left/border 명시. */
  #tbl-by-stock thead th.col-name,
  #tbl-by-stock tbody td.col-name {
    left: 0 !important;
    border-left: 0 !important;
    margin-left: 0 !important;
  }
  /* tbl-wrap / panel padding 제거 — 표가 화면 가장자리까지 (왼쪽 흰 공백 잔상 방지) */
  #panel-stock, #panel-raw {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #panel-stock .stock-wrap,
  #panel-raw .tbl-wrap {
    padding-left: 0;
    margin-left: 0;
  }
  #tbl-by-stock, #tbl-raw { margin-left: 0; }

  /* Portfolio — # 컬럼 (첫 컬럼) 숨김. tbody 는 .idx 클래스로 매칭. */
  #tbl-raw thead th:first-child,
  #tbl-raw tbody td.idx { display: none !important; }
}

/* ── 전역 로딩 스피너 ─────────────────────────────────────────
   window.fetch 모니터링 — in-flight 요청 1개 이상이면 표시.
   페이지 우상단 (topbar 아래) 에 떠 있고 클릭/스크롤 막지 않음. */
#global-spinner {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(26, 115, 232, 0.18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: gs-spin 0.8s linear infinite;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
#global-spinner.on { opacity: 1; }
@keyframes gs-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  #global-spinner { top: 10px; right: 10px; width: 20px; height: 20px; }
}

/* ──────────────────────────────────────────────────────────
   2026-05 모바일 압축 보정 — 헤더/종목별 표
   ────────────────────────────────────────────────────────── */
.ctrls .status-row,
.ctrls .date-row,
.ctrls .admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
    padding: 6px 8px;
    flex-wrap: nowrap;
  }
  .brand {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .topbar .logout-form {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    justify-self: end;
    order: initial;
  }
  .topbar .ctrls {
    display: contents;
  }
  .ctrls .status-row {
    grid-column: 2;
    grid-row: 1;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
    justify-self: start;
    max-width: 100%;
    margin-right: 0;
  }
  .ctrls .date-row {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 4px;
    width: 100%;
  }
  .ctrls .admin-row {
    grid-column: 1 / -1;
    grid-row: 3;
    gap: 4px;
  }
  .ctrls .date-row label {
    min-width: 0;
    gap: 3px;
    font-size: 11px;
    white-space: nowrap;
  }
  .ctrls input[type=date] {
    width: 108px;
    min-width: 0;
    padding: 3px 4px;
    font-size: 11px;
  }
  .ctrls .date-row .btn-mini {
    padding: 3px 6px;
    font-size: 11px;
    white-space: nowrap;
  }
  .market-pill {
    flex: 0 0 auto;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 1.35;
  }
  .price-update-time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    line-height: 1.35;
  }
  #reload { display: none !important; }
  .xlsx-dl { display: none !important; }
}

@media (max-width: 420px) {
  .topbar {
    flex-direction: initial;
    align-items: center;
  }
  .brand { text-align: left; }
  .ctrls { justify-content: flex-start; }
}

@media (max-width: 768px) {
  #panel-stock {
    overflow-x: hidden;
  }
  #panel-stock .filter-row {
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #stock-book-filter,
  #stock-fund-filter,
  #stock-kind-filter {
    order: 1;
    flex: 1 1 calc((100% - 12px) / 3);
    min-width: 0;
  }
  #stock-book-filter .ms-trigger,
  #stock-fund-filter .ms-trigger,
  #stock-kind-filter .ms-trigger {
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
  }
  #stock-search {
    order: 2;
    flex: 1 1 150px;
    width: auto !important;
    min-width: 120px;
    padding: 5px 8px !important;
  }
  #panel-stock .stock-held-filter {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
    font-size: 11px;
    white-space: nowrap;
  }
  #panel-stock .stock-wrap {
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--border);
    border-left: 0;
    border-right: 0;
    background: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }
  #tbl-by-stock {
    min-width: 780px !important;
    width: max-content !important;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  #tbl-by-stock th,
  #tbl-by-stock td {
    padding: 3px 5px !important;
    font-size: 11px;
    line-height: 1.35;
  }
  #tbl-by-stock thead th.col-idx,
  #tbl-by-stock tbody td.col-idx {
    display: none !important;
  }
  #tbl-by-stock thead th.col-name,
  #tbl-by-stock tbody td.col-name {
    left: 0 !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    padding: 0 !important;
    /* white-space:normal (.tbl td 모바일 룰) 가 .name-inner 로 상속돼 종목명이
       세로로 찌그러지는 사고 방지 — nowrap 명시 */
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
  #tbl-by-stock thead th.col-name {
    padding: 3px 5px !important;
  }
  #tbl-by-stock tbody td.col-name .name-inner {
    width: 130px !important;
    padding: 3px 5px !important;
    white-space: nowrap !important;   /* ★ 한글 종목명 세로 찌그러짐 방지 */
    word-break: keep-all !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #tbl-by-stock th:nth-child(3), #tbl-by-stock td:nth-child(3) { width: 58px; min-width: 58px; max-width: 58px; }
  #tbl-by-stock th:nth-child(4), #tbl-by-stock td:nth-child(4) { width: 54px; min-width: 54px; max-width: 54px; }
  #tbl-by-stock th:nth-child(5), #tbl-by-stock td:nth-child(5) { width: 54px; min-width: 54px; max-width: 54px; }
  #tbl-by-stock th:nth-child(6), #tbl-by-stock td:nth-child(6),
  #tbl-by-stock th:nth-child(7), #tbl-by-stock td:nth-child(7) { width: 64px; min-width: 64px; max-width: 64px; }
  #tbl-by-stock th:nth-child(8), #tbl-by-stock td:nth-child(8),
  #tbl-by-stock th:nth-child(11), #tbl-by-stock td:nth-child(11) { width: 70px; min-width: 70px; max-width: 70px; }
  #tbl-by-stock th:nth-child(9), #tbl-by-stock td:nth-child(9),
  #tbl-by-stock th:nth-child(10), #tbl-by-stock td:nth-child(10) { width: 50px; min-width: 50px; max-width: 50px; }
  #tbl-by-stock th:nth-child(12), #tbl-by-stock td:nth-child(12) { width: 44px; min-width: 44px; max-width: 44px; }
  #tbl-by-stock th:nth-child(13), #tbl-by-stock td:nth-child(13) { width: 86px; min-width: 86px; max-width: 86px; }
}

/* ──────────────────────────────────────────────────────────
   2026-05 모바일 표 후속 보정 — Portfolio/Report/스크롤 안정화
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 종목별: 모바일에서는 유형/펀드 컬럼 제거 */
  #tbl-by-stock thead th:nth-child(12),
  #tbl-by-stock tbody td:nth-child(12),
  #tbl-by-stock thead th:nth-child(13),
  #tbl-by-stock tbody td:nth-child(13) {
    display: none !important;
  }
  #panel-stock .stock-wrap {
    contain: paint;
    overscroll-behavior-x: none;
  }
  #tbl-by-stock {
    min-width: 680px !important;   /* 종목 컬럼 130px 으로 키운 만큼 +26 */
  }

  /* Portfolio 필터: 기준일 + 유형/북/펀드 한 줄, 검색은 그 아래에서 짧게 */
  #panel-raw {
    overflow-x: hidden;
  }
  #panel-raw .filter-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
    align-items: center;
    padding: 0 8px;
  }
  #raw-ref-date {
    grid-column: 1;
    grid-row: 1;
    padding: 5px 4px;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
  }
  #raw-type-filter { grid-column: 2; grid-row: 1; min-width: 0; }
  #raw-book-filter { grid-column: 3; grid-row: 1; min-width: 0; }
  #raw-fund-filter { grid-column: 4; grid-row: 1; min-width: 0; }
  #raw-type-filter .ms-trigger,
  #raw-book-filter .ms-trigger,
  #raw-fund-filter .ms-trigger {
    width: 100%;
    min-width: 0;
    padding: 5px 6px;
    font-size: 11px;
  }
  #raw-search {
    grid-column: 1 / 3;
    grid-row: 2;
    width: 100% !important;
    min-width: 0;
    padding: 5px 8px !important;
  }
  #panel-raw .filter-row .hint {
    grid-column: 3 / 5;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }
  #panel-raw .tbl-wrap {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border);
    border-left: 0;
    border-right: 0;
    background: #fff;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
    contain: paint;
    touch-action: pan-x pan-y;
  }
  #tbl-raw {
    min-width: 760px !important;
    width: max-content;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* 리포트 종목별 상세: 모바일에서 독립 가로 스크롤 */
  #panel-report .report-stock-wrap {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - var(--sticky-offset, 110px) - 60px);
    border: 1px solid var(--border);
    border-left: 0;
    border-right: 0;
    background: #fff;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
    contain: paint;
    touch-action: pan-x pan-y;
  }
  #tbl-report-stock {
    min-width: 760px;
    width: max-content;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  #tbl-report-stock th,
  #tbl-report-stock td {
    padding: 3px 5px !important;
    font-size: 11px;
    line-height: 1.35;
  }
  #panel-report .report-stock-wrap #tbl-report-stock thead th {
    position: sticky;
    top: 0 !important;
    z-index: 6;
    background: var(--hdr-bg);
  }
  #tbl-report-stock th:first-child,
  #tbl-report-stock td:first-child {
    position: sticky;
    left: 0;
    z-index: 7;
    background: #fff;
    border-right: 1px solid var(--border);
    min-width: 110px;
    max-width: 110px;
  }
  #tbl-report-stock thead th:first-child {
    background: var(--hdr-bg);
    z-index: 8;
  }
  #tbl-report-stock tbody tr.group-header td:first-child {
    position: static;
    min-width: 0;
    max-width: none;
    border-right: 0;
  }
  #tbl-report-stock tbody tr:hover td:first-child { background: var(--row-hover); }
  #tbl-report-stock tbody tr.total td:first-child { background: #f1f3f4; }
}

/* ──────────────────────────────────────────────────────────
   2026-05 모바일 UX — 사용자 요청 반영
   1) 북·펀드별 filter-row 한 줄 (검색/북필터/체크박스)
   2) 종목별·Portfolio 의 wrap 자체 세로 스크롤 해제
      → filter-row 가 페이지 스크롤로 자연스럽게 사라지도록
      (가로 스크롤은 wrap 안에서 유지)
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* === 1. 북·펀드별 filter-row 한 줄 배치 === */
  #panel-book .filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    flex-wrap: nowrap;
  }
  /* 검색: 남는 공간 차지 (긴 펀드명 검색이 아니라 짧은 검색이라 너무 길 필요 없음) */
  #panel-book #bf-search {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    padding: 5px 8px !important;
    font-size: 12px;
  }
  /* 북 필터 multiselect: 컴팩트 */
  #panel-book #bf-book-filter {
    flex: 0 0 auto;
    min-width: 0;
  }
  #panel-book #bf-book-filter .ms-trigger {
    min-width: 78px;
    padding: 5px 7px;
    font-size: 11px;
  }
  /* "장부금액 0 숨김" 체크박스: 라벨 짧게, 한 줄 유지 */
  #panel-book .filter-row .chk {
    flex: 0 0 auto;
    font-size: 10.5px;
    white-space: nowrap;
    gap: 4px;
    margin-left: 0;
    color: var(--fg);
  }
  #panel-book .filter-row .chk input { margin: 0; }

  /* === 2. 종목별 / Portfolio wrap 자체 세로 스크롤 해제 === */
  /* max-height 제거 → wrap height 가 자연 (콘텐츠 높이). 세로 스크롤은 페이지가 처리.
     overflow 는 spec 상 양방향 auto 가 되지만 세로 콘텐츠가 wrap height 와 같으므로
     실제 세로 자체 스크롤은 발생 안 함 → filter-row 가 페이지 스크롤로 위로 사라짐.
     가로 스크롤은 wrap 안에서 그대로 유지. sticky 좌측 (col-name/종목명) 도 유지. */
  #panel-stock .stock-wrap {
    max-height: none !important;
  }
  #panel-raw .tbl-wrap {
    max-height: none !important;
  }
  /* thead 의 sticky-top 은 wrap 내부 기준이라 topbar+tabs 와 겹칠 수 있어 모바일에선 비활성.
     sticky-left (종목명/첫 컬럼) 는 가로 스크롤 시 필요하므로 유지. */
  #panel-stock #tbl-by-stock thead th:not(.col-name):not(.col-idx) {
    position: static !important;
  }
  #panel-raw #tbl-raw thead th:not(:first-child) {
    position: static !important;
  }
  /* col-name / col-idx 는 sticky-left 만 (top 은 비활성) */
  #panel-stock #tbl-by-stock thead th.col-name,
  #panel-stock #tbl-by-stock thead th.col-idx {
    top: auto !important;
  }
  #panel-raw #tbl-raw thead th:first-child {
    top: auto !important;
  }

  /* === 4. 북·펀드별 모바일 — 종목별 탭과 동일 안정화 패턴
     - # 컬럼 숨김 (사용자 요청)
     - 자체 가로 스크롤 wrap (overflow auto + overscroll-behavior-x: none + contain: paint)
       → 약한 터치로 표가 양방향 흔들리던 사고 차단
     - 표 폰트 11px / padding 컴팩트 (종목별과 일관) */
  #tbl-by-fund thead th:first-child,
  #tbl-by-fund tbody td.idx { display: none !important; }

  #panel-book {
    overflow-x: hidden;       /* panel 밖으로 흔들림 차단 */
  }
  #panel-book .tbl-wrap {
    max-height: none !important;
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--border);
    border-left: 0;
    border-right: 0;
    background: var(--panel);
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
    contain: paint;
    touch-action: pan-x pan-y;
  }
  #tbl-by-fund {
    min-width: 600px !important;
    width: max-content !important;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  #tbl-by-fund th,
  #tbl-by-fund td {
    padding: 3px 5px !important;
    font-size: 11px;
    line-height: 1.35;
  }

  /* === 3. Portfolio 모바일 종목명 컬럼 너비 축소 (자연 너비의 ~2/3) ===
     컬럼 순서: 1) # (숨김) 2) 북 3) 펀드 4) 종목명 5) 잔고 6) 평균단가 ...
     # 컬럼은 display:none 이지만 nth-child 카운트엔 포함되므로 종목명 = nth-child(4). */
  #tbl-raw th:nth-child(4),
  #tbl-raw td:nth-child(4) {
    max-width: 76px !important;
    min-width: 76px !important;
    width: 76px !important;
    overflow: hidden;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
  #tbl-raw td:nth-child(4) strong {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  /* === 5. 리포트22 (admin) — 종목별/북별 탭과 동일 안정화 패턴
     - # 컬럼 (.idx) 모바일 숨김
     - 펀드 컬럼 (.col-funds) 모바일 숨김
     - 종목/북/구분 컬럼 (.col-name) max-width + ellipsis (2줄 방지)
     - 표 자체 가로 스크롤 + 흔들림 방지 (overscroll/contain/touch-action)
     - 폰트/패딩 컴팩트 (다른 탭과 일관) */
  #panel-report22 { overflow-x: hidden; }
  /* r22 표 — PC 와 동일한 카드 안 자연 흐름 유지.
     큰 표 (MezzGroup weekly 등) 만 가로 스크롤. width: max-content/contain: paint 는
     r22-section 카드 layout 을 깨므로 빼고, min-width 로만 컬럼 폭 보장. */
  #panel-report22 .tbl-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: none;
    touch-action: pan-x pan-y;
  }
  #panel-report22 .tbl {
    min-width: 0;             /* panel 폭에 fit (PC default 와 동일) */
  }
  #panel-report22 .tbl th,
  #panel-report22 .tbl td {
    padding: 3px 5px !important;
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
  }
  /* # 컬럼 / 펀드 컬럼 모바일 숨김 */
  #panel-report22 .tbl thead th:first-child,
  #panel-report22 .tbl tbody td.idx { display: none !important; }
  #panel-report22 .tbl .col-funds { display: none !important; }
  /* 종목/북/구분 컬럼 — 길어도 한 줄로 (ellipsis) */
  #panel-report22 .tbl .col-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
  #panel-report22 .tbl .col-name strong {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  /* r22 툴바: 버튼 많아서 wrap 허용 + 컴팩트 */
  #panel-report22 .r22-toolbar {
    gap: 4px;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  #panel-report22 .r22-toolbar .btn-mini {
    font-size: 10.5px;
    padding: 3px 6px;
  }
  #panel-report22 .r22-toolbar input[type=date] {
    width: 108px;
    font-size: 11px;
    padding: 3px 4px;
  }
  #panel-report22 .r22-toolbar .ref-date {
    font-size: 10px;
    padding: 2px 6px;
  }
  #panel-report22 .r22-section h3 {
    font-size: 13px;
    margin: 12px 0 6px;
  }
}

/* ──────────────────────────────────────────────────────────
   다크 모드 — html[data-theme="dark"] 토글
   ----------------------------------------------------------
   설계:
   - light 색은 :root 기본값 유지 (위 파일 상단).
   - dark 는 cascade override 로 hardcoded #fff/#f5f5f5/... 류 덮어씀.
   - color-scheme: dark 로 native input (date picker 등) 자동 다크화.
   - Chart.js 의 axis label/grid 색은 JS 측 (옵션 동적 갱신) 으로 별도 처리 필요.
     이 블록은 CSS-only 범위.
   ────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Binance-inspired palette
     - bg: 거의 검정 (#0b0e11)
     - panel: 어두운 슬레이트 (#1e2329) / alt (#2b3139)
     - signature gold (#fcd535) — 액션·링크·탭 active 색
     - 채도 높은 초록 (#0ecb81) / 빨강 (#f6465d) — 손익/시장 시각화
     - text: #eaecef / muted: #848e9c (Binance 그대로) */
  --bg: #0b0e11;
  --panel: #1e2329;
  --panel-2: #2b3139;
  --panel-3: #181a20;
  --border: #2b3139;
  --border-soft: #2b3139;
  --hdr-bg: #1e2329;
  --hdr-fg: #eaecef;
  --fg: #eaecef;
  /* Binance 정석 muted 는 #848e9c 인데 어두운 배경 + 작은 폰트에서 옅음.
     한 단계 밝게 (#a4adb8) — WCAG 콘트라스트 ~8.6:1 확보. */
  --muted: #a4adb8;
  --red: #f6465d;
  --red-bg: #2e1a1f;
  --red-bg-strong: #4a2128;
  --red-fg: #f6465d;
  --green: #0ecb81;
  --green-bg: #14241c;
  --green-card-bg: #102018;
  /* signature gold — light theme 의 blue 자리에 들어가서 액션/링크/active 색이 됨 */
  --blue: #fcd535;
  --blue-bg: #2e2812;
  --blue-strong: #d4af2c;
  --link-blue: #fcd535;
  --warn-bg: #2e2812;
  --warn-fg: #fcd535;
  --warn-border: #4a3d18;
  --shadow: 0 1px 3px rgba(0,0,0,.6);
  --shadow-strong: 0 12px 40px rgba(0,0,0,.85);
  --row-hover: #2b3139;
}

/* 1. Surfaces — topbar / tabs / panels / login */
html[data-theme="dark"] body { background: var(--bg); color: var(--fg); }
html[data-theme="dark"] .topbar { background: var(--panel); border-bottom-color: var(--border); }
html[data-theme="dark"] .tabs-wrap { background: var(--panel); border-bottom-color: var(--border); }
html[data-theme="dark"] .tabs-scroll {
  background: linear-gradient(to right, transparent, var(--panel) 60%);
  border-bottom-color: var(--border);
  color: var(--muted);
}
html[data-theme="dark"] .tabs-scroll.left { background: linear-gradient(to left, transparent, var(--panel) 60%); }
html[data-theme="dark"] .tabs-scroll:hover { color: var(--fg); }

html[data-theme="dark"] .login-body { background: var(--bg); }
html[data-theme="dark"] .login-card { background: var(--panel); box-shadow: var(--shadow); }
html[data-theme="dark"] .login-card input[type=password] {
  background: var(--panel-2); color: var(--fg); border-color: var(--border);
}
/* Binance gold(#fcd535) 위 흰 글씨는 가독성 0 → 검정 글씨로 */
html[data-theme="dark"] .login-card button { background: var(--blue); color: #0b0e11; font-weight: 600; }
html[data-theme="dark"] .login-card button:hover { background: var(--blue-strong); color: #0b0e11; }
html[data-theme="dark"] .login-title { color: var(--fg); }
html[data-theme="dark"] .login-sub { color: var(--muted); }

/* 2. Form controls — inputs / selects / buttons / multiselect */
html[data-theme="dark"] .ctrls select,
html[data-theme="dark"] .ctrls input[type=date],
html[data-theme="dark"] .filter-row input[type=search],
html[data-theme="dark"] .filter-row select,
html[data-theme="dark"] .multiselect .ms-trigger,
html[data-theme="dark"] .modal-body input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] select {
  background: var(--panel-2); color: var(--fg); border-color: var(--border);
}
html[data-theme="dark"] .multiselect .ms-trigger:hover { border-color: var(--muted); }
html[data-theme="dark"] .btn-mini {
  background: var(--panel-2); color: var(--fg); border-color: var(--border);
}
html[data-theme="dark"] .btn-mini:hover { background: var(--row-hover); }
html[data-theme="dark"] .btn-ghost {
  background: var(--panel-2); color: var(--muted); border-color: var(--border);
}
html[data-theme="dark"] .btn-ghost:hover { background: var(--row-hover); color: var(--fg); }
html[data-theme="dark"] .upload-btn:hover { background: var(--row-hover); }

html[data-theme="dark"] .ms-panel {
  background: var(--panel); border-color: var(--border); box-shadow: var(--shadow);
}
html[data-theme="dark"] .ms-item:hover { background: var(--row-hover); }
html[data-theme="dark"] .ms-text { color: var(--fg); }
html[data-theme="dark"] .ms-actions { border-bottom-color: var(--border); }
html[data-theme="dark"] .ms-actions button {
  background: var(--panel-2); border-color: var(--border); color: var(--fg);
}
html[data-theme="dark"] .ms-actions button:hover { background: var(--row-hover); }

/* 3. Tables — core */
html[data-theme="dark"] .tbl { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .tbl th,
html[data-theme="dark"] .tbl td { border-bottom-color: var(--border); }
html[data-theme="dark"] .tbl thead th { background: var(--hdr-bg); color: var(--hdr-fg); }
html[data-theme="dark"] .tbl thead th.sorted { background: var(--blue-bg); color: var(--link-blue); }
html[data-theme="dark"] th.sortable[data-sort-dir="asc"],
html[data-theme="dark"] th.sortable[data-sort-dir="desc"] {
  background: var(--hdr-bg); color: var(--link-blue);
}
html[data-theme="dark"] .sort-arrow { color: var(--link-blue); }
html[data-theme="dark"] .tbl tbody tr:hover { background: var(--row-hover); }
html[data-theme="dark"] .tbl tbody tr.total { background: var(--panel-2); }
html[data-theme="dark"] .tbl tbody tr.total td { border-top-color: var(--border); }
html[data-theme="dark"] #tbl-ef-daily-base tbody tr.bench td {
  background: var(--panel-3);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] #tbl-ef-daily-base tbody tr.bench td,
html[data-theme="dark"] #tbl-ef-daily-base tbody tr.bench .num {
  color: var(--fg);
}
html[data-theme="dark"] #tbl-ef-daily-base tfoot tr.total td {
  background: var(--panel-2);
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}
@media (max-width: 768px) {
  html[data-theme="dark"] #tbl-category-table th:first-child,
  html[data-theme="dark"] #tbl-book-summary-table th:first-child {
    background: var(--hdr-bg);
  }
  html[data-theme="dark"] #tbl-category-table td:first-child,
  html[data-theme="dark"] #tbl-book-summary-table td:first-child {
    background: var(--panel);
  }
  html[data-theme="dark"] #tbl-category-table tr.total td:first-child,
  html[data-theme="dark"] #tbl-book-summary-table tr.total td:first-child {
    background: var(--panel-2);
  }
}
@media (max-width: 768px) {
  html[data-theme="dark"] #tbl-ef-daily-base thead th:nth-child(2) {
    background: var(--hdr-bg);
  }
  html[data-theme="dark"] #tbl-ef-daily-base tbody td:nth-child(2) {
    background: var(--panel);
  }
  html[data-theme="dark"] #tbl-ef-daily-base tbody tr.bench td:nth-child(2) {
    background: var(--panel-3);
  }
  html[data-theme="dark"] #tbl-ef-daily-base tfoot tr.total td:nth-child(2) {
    background: var(--panel-2);
  }
}
html[data-theme="dark"] .tbl tbody tr.ytd-row {
  background: rgba(91,156,246,.10); color: var(--link-blue);
}
html[data-theme="dark"] .tbl tbody tr.ytd-row td { border-top-color: rgba(91,156,246,.3); }

/* 4. 종목별 표 — sticky 좌측 셀 (col-name / col-idx) 의 hardcoded #fff 덮어쓰기 */
html[data-theme="dark"] #tbl-by-stock tbody td.col-name { background: var(--panel) !important; }
html[data-theme="dark"] #tbl-by-stock tbody td.col-name .name-inner { background: var(--panel); }
html[data-theme="dark"] #tbl-by-stock thead th.col-name { background: var(--hdr-bg); }
html[data-theme="dark"] #tbl-by-stock thead th.col-idx,
html[data-theme="dark"] #tbl-by-stock tbody td.col-idx { background: var(--hdr-bg); }
html[data-theme="dark"] #tbl-by-stock tbody tr:hover td.col-name,
html[data-theme="dark"] #tbl-by-stock tbody tr:hover td.col-idx { background: var(--row-hover) !important; }
html[data-theme="dark"] #tbl-by-stock tbody tr:hover td.col-name .name-inner { background: var(--row-hover); }
html[data-theme="dark"] #tbl-by-stock tbody tr.total td.col-name,
html[data-theme="dark"] #tbl-by-stock tbody tr.total td.col-idx { background: var(--panel-2) !important; }
html[data-theme="dark"] #tbl-by-stock tbody tr.total td.col-name .name-inner { background: var(--panel-2); }
html[data-theme="dark"] #tbl-by-stock tbody tr.row-loss td,
html[data-theme="dark"] #tbl-by-stock tbody tr.row-loss td.col-name,
html[data-theme="dark"] #tbl-by-stock tbody tr.row-loss td.col-idx { background: var(--red-bg); }
html[data-theme="dark"] #tbl-by-stock tbody tr.row-loss td.col-name .name-inner { background: var(--red-bg); }
html[data-theme="dark"] #tbl-by-stock tbody tr.row-loss:hover td,
html[data-theme="dark"] #tbl-by-stock tbody tr.row-loss:hover td.col-name,
html[data-theme="dark"] #tbl-by-stock tbody tr.row-loss:hover td.col-idx { background: var(--red-bg-strong); }
html[data-theme="dark"] #tbl-by-stock tbody tr.row-loss:hover td.col-name .name-inner { background: var(--red-bg-strong); }

/* Portfolio 모바일 — 종목명 sticky 좌측 #fff 덮어쓰기 */
html[data-theme="dark"] #tbl-raw tbody td { background: var(--panel); }

/* 5. KPI 카드 + LIVE 카드 */
html[data-theme="dark"] .kpi { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .live-card {
  background: linear-gradient(180deg, var(--green-card-bg) 0%, var(--panel) 80%);
  border-color: rgba(14,203,129,.3);   /* binance green #0ecb81 톤 */
}
/* KPI 카드 라벨 (당일 손익 / 전일 손익 / ...) — muted 보다 한 단계 더 선명하게.
   사용자 피드백: 다크에서 카드 제목이 옅어 잘 안 읽힘. */
html[data-theme="dark"] .kpi-label { color: #d1d8e0; }
html[data-theme="dark"] .kpi-sub,
html[data-theme="dark"] .kpi-date { color: #b7becc; }

/* 6. 캘린더 */
html[data-theme="dark"] table.calendar td { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] table.calendar td.empty,
html[data-theme="dark"] table.calendar td.weekend { background: var(--panel-3); }
html[data-theme="dark"] table.calendar td.today { background: var(--warn-bg); }
html[data-theme="dark"] table.calendar td.click:hover { background: var(--blue-bg); }
html[data-theme="dark"] table.calendar th {
  background: var(--hdr-bg); color: var(--hdr-fg); border-color: var(--border);
}
html[data-theme="dark"] table.calendar .cal-day { color: var(--fg); }
html[data-theme="dark"] table.calendar .cal-day.sun { color: var(--red); }
html[data-theme="dark"] table.calendar .cal-day.sat { color: #7ab3ff; }
html[data-theme="dark"] table.calendar .cal-pnl.pos { color: var(--green); }
html[data-theme="dark"] table.calendar .cal-pnl.neg { color: var(--red); }
html[data-theme="dark"] table.calendar .cal-pnl.zero { color: var(--muted); }

/* 7. Chart wrap + status + ref-date */
html[data-theme="dark"] .chart-wrap { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .ref-date {
  background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg);
}
html[data-theme="dark"] .status { background: rgba(232,234,237,.95); color: #1a1d29; }
html[data-theme="dark"] .status.err { background: var(--red); color: #fff; }
html[data-theme="dark"] .hint, html[data-theme="dark"] .note { color: var(--muted); }
html[data-theme="dark"] .sub-funds { color: var(--muted); }
html[data-theme="dark"] .raw-name { color: var(--muted); }
html[data-theme="dark"] .map-label { color: var(--link-blue); }
html[data-theme="dark"] .brand { color: var(--fg); }
html[data-theme="dark"] .brand:hover { color: var(--blue); }
html[data-theme="dark"] .tab { color: var(--muted); }
html[data-theme="dark"] .tab:hover { color: var(--fg); background: var(--row-hover); }
html[data-theme="dark"] .tab.active { color: var(--blue); border-bottom-color: var(--blue); }
html[data-theme="dark"] a.ts-link:hover { color: var(--blue); }

/* 8. Pills + tags */
html[data-theme="dark"] .market-pill { background: var(--panel-2); color: var(--muted); }
html[data-theme="dark"] .market-pill.on { background: var(--green-bg); color: var(--green); }
html[data-theme="dark"] .market-pill.closed { background: var(--panel-2); color: var(--muted); }
html[data-theme="dark"] .market-pill.weekend { background: var(--red-bg); color: var(--red-fg); }
html[data-theme="dark"] .market-pill.off { background: var(--warn-bg); color: var(--warn-fg); }
html[data-theme="dark"] .tag { background: var(--panel-2); color: var(--muted); }
html[data-theme="dark"] .tag.live-tag-on { background: var(--green-bg); color: var(--green); }
html[data-theme="dark"] .tag.merged { background: var(--panel-2); color: var(--muted); }
html[data-theme="dark"] .price-update-time { color: var(--muted); }
html[data-theme="dark"] .price-update-time.stale { color: var(--red-fg); }

html[data-theme="dark"] .kind-group { background: var(--blue-bg); color: var(--link-blue); }
html[data-theme="dark"] .kind-fund { background: var(--green-bg); color: var(--green); }
html[data-theme="dark"] .kind-cohort { background: var(--red-bg); color: var(--red); }
html[data-theme="dark"] .kind-fut { background: var(--warn-bg); color: var(--warn-fg); }
html[data-theme="dark"] .kind-mezz, html[data-theme="dark"] .kind-stock { color: var(--muted); }

/* 9. 모달 */
html[data-theme="dark"] .modal { background: rgba(0,0,0,.7); }
html[data-theme="dark"] .modal-card { background: var(--panel); box-shadow: var(--shadow-strong); }
html[data-theme="dark"] .modal-head, html[data-theme="dark"] .modal-foot { border-color: var(--border); }
html[data-theme="dark"] .modal-head h3 { color: var(--fg); }
html[data-theme="dark"] .modal-close { color: var(--muted); }
html[data-theme="dark"] .modal-body label { color: var(--muted); }
html[data-theme="dark"] .modal-body input {
  background: var(--panel-2); color: var(--fg); border-color: var(--border);
}

/* 10. 섹터 카드 */
html[data-theme="dark"] .sector-card { background: var(--panel); border-color: var(--border-soft); box-shadow: var(--shadow); }
html[data-theme="dark"] .sc-header { border-bottom-color: var(--border); }
html[data-theme="dark"] .sc-title { color: var(--fg); }
html[data-theme="dark"] .sc-total { color: var(--link-blue); }
html[data-theme="dark"] .sc-total::after { color: var(--muted); }
html[data-theme="dark"] .sc-list li { border-bottom-color: var(--border-soft); }
html[data-theme="dark"] .sc-list li:hover { background: var(--row-hover); }
html[data-theme="dark"] .sc-name { color: var(--fg); }
html[data-theme="dark"] .sc-amt { color: var(--muted); }
html[data-theme="dark"] .sc-amt::after { color: var(--muted); }
html[data-theme="dark"] .sc-pct { color: var(--fg); }
html[data-theme="dark"] .sc-diff.zero { color: var(--muted); }
html[data-theme="dark"] .sc-list li.sc-total-row { border-top-color: var(--border); }

html[data-theme="dark"] .changes-half { background: var(--panel); border-color: var(--border-soft); }

/* 11. 대차 (Lending) — light theme 의 네이비 헤더는 binance 톤과 안 맞음 → panel-3 + gold */
html[data-theme="dark"] .lending-tbl thead th { background: #14181d; color: var(--blue); }
html[data-theme="dark"] .lending-tbl .lending-name { color: var(--fg); }

/* 12. 휴장일 캘린더 */
html[data-theme="dark"] .hol-month { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .hol-month h4 { color: var(--hdr-fg); }
html[data-theme="dark"] .hol-cal-tbl th { color: var(--muted); }
html[data-theme="dark"] .hol-cell { color: var(--fg); }
html[data-theme="dark"] .hol-cell:hover { background: var(--row-hover); }
html[data-theme="dark"] .hol-cell.weekend { color: var(--muted); }
html[data-theme="dark"] .hol-cell.holiday { background: var(--red-bg); color: var(--red-fg); }
html[data-theme="dark"] .hol-cell.holiday:hover { background: var(--red-bg-strong); }
html[data-theme="dark"] .hol-cell.sat { color: #7ab3ff; }
html[data-theme="dark"] .hol-cell.sun { color: var(--red); }

/* 13. 주식형펀드 */
html[data-theme="dark"] #tbl-ef-fund-summary th.grp { background: var(--panel-2); border-color: var(--border); }
html[data-theme="dark"] #tbl-ef-fund-summary th.sub { background: var(--panel-3); color: var(--muted); }
html[data-theme="dark"] #tbl-ef-fund-summary tfoot tr.total td { background: var(--panel-2); border-top-color: var(--border); }
html[data-theme="dark"] #tbl-ef-fund-summary input.ef-sum-in {
  background: var(--panel-2); color: var(--fg); border-color: var(--border);
}
html[data-theme="dark"] #tbl-ef-fund-summary input.ef-sum-in:focus {
  background: var(--warn-bg); border-color: var(--blue);
}
html[data-theme="dark"] #tbl-top-stocks tr.top20-sum td {
  background: var(--panel-2); color: var(--fg); border-top-color: var(--border);
}
html[data-theme="dark"] #tbl-top-stocks tr.top20-sum td.idx { color: var(--muted); }
html[data-theme="dark"] #tbl-ef-ret-summary tr.bench {
  background: var(--panel-3); border-bottom-color: var(--border);
}
html[data-theme="dark"] #tbl-ef-ret-summary tr.bench td { color: var(--fg); }
html[data-theme="dark"] #tbl-mezzinfo .edit-btn { background: transparent; border-color: var(--border); color: var(--fg); }
html[data-theme="dark"] #tbl-mezzinfo .edit-btn:hover { background: var(--row-hover); }

/* 14. 글로벌 스피너 */
html[data-theme="dark"] #global-spinner {
  border-color: rgba(91,156,246,.2); border-top-color: var(--blue);
}

/* 15. 리포트 종목별 — sticky 좌측 셀 */
html[data-theme="dark"] #tbl-report-stock th:first-child,
html[data-theme="dark"] #tbl-report-stock td:first-child { background: var(--panel); border-right-color: var(--border); }
html[data-theme="dark"] #tbl-report-stock thead th:first-child { background: var(--hdr-bg); }
html[data-theme="dark"] #tbl-report-stock tbody tr:hover td:first-child { background: var(--row-hover); }
html[data-theme="dark"] #tbl-report-stock tbody tr.total td:first-child { background: var(--panel-2); }

/* 16. 테마 토글 — 우측 하단 floating 원형 버튼 (FAB)
   - 어느 탭이든 같은 위치. status 토스트와 동일 우측하단이지만 토스트는 일시적이라 OK.
   - 모바일에서도 엄지 닿기 좋은 위치. */
.theme-fab-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9998;          /* status 위 / global-spinner(9999) 아래 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.theme-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* 다크 모드 버튼 숨기기/보이기 토글 — theme-fab 하단의 작은 버튼 */
.theme-hide {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  opacity: .6;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 9px;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,.10);
  transition: opacity .15s ease, transform .15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.theme-hide:hover { opacity: 1; transform: translateY(-1px); }
/* 숨김 상태: 큰 토글(FAB)만 감추고 '보이기' 버튼은 유지 (head 에서 선세팅 → flicker 방지) */
html[data-fab-hidden="1"] .theme-fab { display: none; }
html[data-theme="dark"] .theme-hide { border-color: var(--blue); color: var(--blue); opacity: .5; }
html[data-theme="dark"] .theme-hide:hover { opacity: .95; }
.theme-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.theme-fab:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.12); }

/* 다크 모드일 땐 시그니처 골드 border + 글로우 */
html[data-theme="dark"] .theme-fab {
  background: var(--panel);
  border-color: var(--blue);            /* gold #fcd535 */
  color: var(--blue);
  box-shadow: 0 2px 10px rgba(252,213,53,.18);
}
html[data-theme="dark"] .theme-fab:hover {
  box-shadow: 0 4px 18px rgba(252,213,53,.32);
}

/* status 토스트가 같은 우측하단이라 토스트 띄울 땐 토글 위로 자연스럽게 — 토스트 위치를 살짝 위로
   (FAB + '숨기기' 클러스터가 더 높아져서 그만큼 더 올림) */
.status { bottom: 104px; }
@media (max-width: 768px) {
  .theme-fab-wrap { bottom: 16px; right: 16px; }
  .theme-fab { width: 40px; height: 40px; font-size: 16px; }
  .status { bottom: 96px; right: 12px; }
}

/* ── 메자닌 탭 개편 (2026-08-04): 구분 필터 + 요약표 + 그룹 행 ── */
.mzclass-filters { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mzclass-btn.on {
  background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600;
}
html[data-theme="dark"] .mzclass-btn.on { color: #1b1b1b; }
#tbl-mezz-class-summary { max-width: 760px; }
#tbl-mezz-class-summary .sum-row td { border-top: 2px solid var(--border); background: var(--row-hover); }
/* 메자닌 탭 — 내부 스크롤 없이 페이지가 자연스럽게 길어지도록 */
#panel-mezzinfo .tbl-wrap { max-height: none; overflow: visible; }
/* 요약표 ↔ 종목별 상세표 사이 여백 */
#panel-mezzinfo .mz-summary-wrap { margin-bottom: 26px; }
/* 구분별 분리 표 (직투 / LP(월) / LP(분기)) */
#panel-mezzinfo .mz-block + .mz-block { margin-top: 26px; }
#panel-mezzinfo .mz-sec {
  margin: 0 0 6px; font-size: 13px; font-weight: 700;
  padding-bottom: 4px; border-bottom: 2px solid var(--blue);
}
#panel-mezzinfo .mz-sec .hint { font-weight: 400; margin-left: 6px; }
#panel-mezzinfo .mz-detail tfoot tr.total td {
  background: #f1f3f4; font-weight: 600; border-top: 2px solid var(--border);
}
html[data-theme="dark"] #panel-mezzinfo .mz-detail tfoot tr.total td { background: var(--row-hover); }

/* 리포트 탭 — 조건 변경 후 미조회 상태의 '조회' 버튼 강조 (2026-08-05) */
#report-reload.dirty {
  background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600;
}
html[data-theme="dark"] #report-reload.dirty { color: #1b1b1b; }

/* 메자닌 상세표 — # 순번 컬럼 최소폭 (2026-08-07) */
#panel-mezzinfo .mz-detail th.col-idx,
#panel-mezzinfo .mz-detail td.idx {
  width: 26px; min-width: 26px; max-width: 32px;
  padding-left: 3px; padding-right: 3px;
  text-align: right; color: var(--muted); font-weight: 400;
}