:root {
  --bg: #0f1216;
  --panel: #171c23;
  --panel-2: #1e252e;
  --line: #2b333d;
  --text: #e6e9ee;
  --muted: #8b95a1;
  --up: #ef4444;      /* 국내 관습: 상승=빨강 */
  --down: #3b82f6;    /* 하락=파랑 */
  --accent: #f59e0b;  /* UI 강조색 = 앰버 (AI Advisor·부제와 통일 · 원자재시황과 결 맞춤) */
  --green: #22c55e;
  --amber: #f59e0b;
  --shadow: rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* 자동(OS) 모드: 사용자가 수동으로 고른 적 없을 때만(data-theme 없음) OS 라이트 설정을 따름 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7f9; --panel: #fff; --panel-2: #f0f2f5; --line: #e2e6eb;
    --text: #1a1f26; --muted: #667085; --shadow: rgba(15, 23, 42, .08);
    color-scheme: light;
  }
}

/* 수동 라이트 모드 (상단 토글 버튼) — OS 설정과 무관하게 강제 적용 */
:root[data-theme="light"] {
  --bg: #f6f7f9; --panel: #fff; --panel-2: #f0f2f5; --line: #e2e6eb;
  --text: #1a1f26; --muted: #667085; --shadow: rgba(15, 23, 42, .08);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, "Segoe UI", "Malgun Gothic", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;   /* 숫자 자릿수 세로 정렬 (통계 사이트 느낌) */
}

/* 다크/라이트 전환 시 색상만 부드럽게 트랜지션 (레이아웃엔 영향 없음) */
body, .topbar, .meta button, .card, .chart-box, .table-wrap, .equity-block,
.eq-modal-inner, .tabs button, .block, .bubble, .acct-card, table, th, td,
.advisor, .sig-chip, .sig-guide, .tab-add-pop, .eq-askrow input[type="date"] {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* 다크/라이트 토글 버튼 */
#themeToggle {
  font-size: 14px; line-height: 1; padding: 5px 9px !important;
}

/* 패널형 컨테이너 공통 elevation — 배경이 판판해 보이지 않게 미세한 그림자만 */
.chart-box, .table-wrap, .equity-block, .block, .tab-add-pop {
  box-shadow: 0 2px 8px var(--shadow);
}

.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 10px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40; background: var(--bg);
}
.topbar h1 { font-size: 17px; margin: 0; display: flex; align-items: center; }
.topbar h1::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); margin-right: 9px; flex: none;
}
.topbar .sub { color: var(--amber); font-weight: 700; font-size: 17px; margin-left: 8px; }
.meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.meta button {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.meta button:hover { border-color: var(--accent); }
.meta button:active { transform: scale(.96); }
/* 현재가 갱신 = 툴바의 주 액션으로 강조 (AI Advisor·테마 토글은 보조) */
#refreshBtn {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  font-weight: 600;
}
#refreshBtn:hover { background: color-mix(in srgb, var(--accent) 26%, var(--panel-2)); }

/* 기간/토글류 버튼 공통 — 눌렀을 때 살짝 눌리는 피드백 */
.chart-ctl button, .eq-range button, .tf-btns button, .pie-toggle, .pie-collapse, .eq-tbtn {
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .1s ease;
}
.chart-ctl button:active, .eq-range button:active, .tf-btns button:active,
.pie-toggle:active, .pie-collapse:active, .eq-tbtn:active {
  transform: scale(.96);
}

/* 상단 티커 스트립 — KOSPI·KOSDAQ·원/달러 등 시황을 한눈에 (data/indices.json) */
.top-ticker {
  display: flex; flex-wrap: wrap; gap: 5px 20px;
  padding: 7px 20px; font-size: 11.5px; border-bottom: 1px solid var(--line);
  background: var(--panel); font-variant-numeric: tabular-nums;
}
.top-ticker:empty { display: none; }
.tick-item b { color: var(--muted); font-weight: 600; margin-right: 5px; }
.tick-item .pos, .tick-item .neg { font-weight: 600; }

/* 섹션 구분 라벨 — 라벨 + 가로선으로 시각적 위계를 분명히 */
.section-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px;
}
.section-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.section-eyebrow:first-child { margin-top: 0; }

.summary { padding: 16px 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 2px 8px var(--shadow);
}
.card:has(.value.pos) { border-left-color: var(--up); }
.card:has(.value.neg) { border-left-color: var(--down); }
.card .label { color: var(--muted); font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.card .label em { font-style: normal; color: var(--accent); font-size: 11px; }
.card .value {
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 손익 방향이 있는 숫자(평가손익·전일대비)가 진짜 헤드라인 — 매수/평가금액보다 한 단계 크게 */
.card .value.pos, .card .value.neg { font-size: 19px; font-weight: 700; }
.card .value.pos { color: var(--up); }
.card .value.neg { color: var(--down); }

/* AI Advisor 코멘트 (data/advisor.json) — 원자재시황과 동일한 절제된 스타일 */
.advisor {
  margin-top: 14px; padding: 12px 16px; border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 5%, var(--panel));
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  color: var(--text); font-weight: 400; font-size: 13px; line-height: 1.6;
  white-space: pre-line;
}
.advisor .tag { font-weight: 700; letter-spacing: .3px; margin-right: 4px; color: var(--amber); }
.advisor .src { color: var(--muted); }

/* 차트 컨트롤 버튼 */
.chart-ctl { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.chart-ctl .ctl-row { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.chart-ctl .ctl-row::-webkit-scrollbar { height: 4px; }
.chart-ctl .ctl-lbl { color: var(--muted); font-size: 11px; width: 52px; flex: none; }
.chart-ctl button { flex: none; }

.chart-ctl button {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.chart-ctl button:hover { border-color: var(--accent); }
.chart-ctl button.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }

.summary-charts {
  display: grid; grid-template-columns: 340px 1fr; gap: 16px; margin-top: 16px;
}
.summary-charts > * { min-width: 0; }
@media (max-width: 760px) { .summary-charts { grid-template-columns: 1fr; } }
.chart-box {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; height: 320px; display: flex;
  position: relative;
}

/* 원그래프 접기/펼치기 (우하단 버튼) */
.pie-collapse {
  position: absolute; bottom: 8px; right: 8px; z-index: 3;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; font-size: 11px; cursor: pointer;
}
.pie-collapse:hover { border-color: var(--accent); color: var(--text); }
.summary-charts.pie-collapsed { grid-template-columns: 1fr; }
.summary-charts.pie-collapsed .chart-box {
  order: 2; height: 34px; min-height: 0; padding: 0;
  border: none; background: none; align-items: center; justify-content: flex-end;
}
.summary-charts.pie-collapsed .chart-box canvas { display: none !important; }
.summary-charts.pie-collapsed .pie-toggle { display: none; }
.summary-charts.pie-collapsed .pie-collapse { position: static; }
/* 원그래프 우측 상단 종목별/회사별 토글 (절대배치 → 도넛 크기 영향 없음) */
.pie-toggle {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; font-size: 11px; cursor: pointer;
}
.pie-toggle:hover { border-color: var(--accent); color: var(--text); }
.pie-toggle.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }
.chart-box canvas { flex: 1 1 auto; }

/* ── 자산 추이 ─────────────────────────────────────────────── */
.equity-block {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; min-width: 0; overflow: hidden;
}
.equity-block[hidden] { display: none; }
.eq-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.eq-head h3 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.eq-head .eq-sub { color: var(--muted); font-size: 11px; font-weight: 400; opacity: .8; }
.eq-range { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.eq-range button {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 9px; font-size: 11px; cursor: pointer;
}
.eq-range button:hover { border-color: var(--accent); }
.eq-range button.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }
.eq-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 6px; }
.eq-stat { display: flex; flex-direction: column; gap: 1px; }
.eq-stat i { font-style: normal; color: var(--muted); font-size: 11px; }
.eq-stat i em { font-style: normal; opacity: .7; }
.eq-stat b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.eq-stat b.pos { color: var(--up); }
.eq-stat b.neg { color: var(--down); }
/* "현재 평가액"이 이 블록의 헤드라인 숫자 — 나머지 보조 지표보다 한 단계 크게 */
.eq-stat:first-child b { font-size: 18px; }
#equityChart { height: 260px !important; cursor: pointer; }
.eq-askrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
}
.eq-askrow label { font-size: 12px; color: var(--muted); }
.eq-hint { font-size: 10.5px; opacity: .65; margin-left: 3px; }
.eq-askrow input[type="date"] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; font-size: 12px;
}
.eq-asof { font-size: 12.5px; color: var(--muted); }
.eq-asof b { color: var(--text); font-weight: 700; }
.eq-asof b.pos { color: var(--up); }
.eq-asof b.neg { color: var(--down); }
.eq-tbtn {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.eq-tbtn:hover { border-color: var(--accent); color: var(--text); }
.eq-tbtn.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }
.eq-note { margin-top: 8px; font-size: 11px; line-height: 1.6; color: var(--muted); }

/* ── 인사이트: 종목별 손익 기여도 · 연도별 수익률 ──────────────────── */
.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.insight-grid > .block { margin-bottom: 0; }
@media (max-width: 760px) { .insight-grid { grid-template-columns: 1fr; } }

.contrib-row {
  display: grid; grid-template-columns: 88px 1fr auto; align-items: center;
  gap: 10px; padding: 6px 0; font-size: 12.5px;
}
.contrib-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text);
}
.contrib-bar-track {
  position: relative; height: 14px; background: var(--panel-2); border-radius: 3px; overflow: hidden;
}
.contrib-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.contrib-bar.pos { left: 0; background: var(--up); }
.contrib-bar.neg { left: 0; background: var(--down); }
.contrib-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.contrib-val.pos { color: var(--up); }
.contrib-val.neg { color: var(--down); }

.yearly-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.yearly-table th, .yearly-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.yearly-table th:first-child, .yearly-table td:first-child { text-align: left; }
.yearly-table th { color: var(--muted); font-weight: 500; font-size: 11px; }
.yearly-table tbody tr:last-child td { border-bottom: none; }
.yearly-table tbody tr:hover { background: var(--panel-2); }
.yearly-table td.pos { color: var(--up); }
.yearly-table td.neg { color: var(--down); }

/* 특정일 보유내역 모달 */
.eq-modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(0,0,0,.55);
}
.eq-modal[hidden] { display: none; }
.eq-modal-inner {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  width: min(760px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.eq-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.eq-modal-head h3 { margin: 0; font-size: 14px; color: var(--text); }
.eq-modal-head button {
  background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer;
}
.eq-modal-head button:hover { color: var(--text); }
.eq-modal-body { padding: 12px 16px 16px; overflow: auto; }
.eq-htbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.eq-htbl th, .eq-htbl td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.eq-htbl th { color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; user-select: none; }
.eq-htbl th:hover { color: var(--text); }
.eq-htbl th.on { color: var(--accent); }
.eq-htbl td.l, .eq-htbl th.l { text-align: left; }
.eq-htbl td.pos { color: var(--up); }
.eq-htbl td.neg { color: var(--down); }
.eq-htbl tfoot td { border-top: 2px solid var(--line); border-bottom: none; font-weight: 700; color: var(--text); }
.eq-htbl .us { color: var(--accent); font-size: 10px; }
.eq-hnote { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.eq-hnote b { color: var(--text); }
.eq-warn {
  margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; font-size: 11.5px; line-height: 1.6;
  color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}
.eq-unpriced {
  margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2); font-size: 11.5px; line-height: 1.7; color: var(--muted);
}
.eq-unpriced b { color: var(--text); font-weight: 600; }

.table-wrap {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px 12px; overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { color: var(--muted); font-weight: 500; font-size: 12px; }
#posTable thead th { cursor: pointer; user-select: none; white-space: nowrap; }
#posTable thead th:hover { color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
/* 표 행 hover — 지금 어떤 줄을 보고 있는지 시각적으로 짚어줌 */
#posTable tbody tr, .eq-htbl tbody tr, .idx-table tbody tr {
  transition: background-color .12s ease;
}
#posTable tbody tr:hover, .eq-htbl tbody tr:hover, .idx-table tbody tr:hover {
  background: var(--panel-2);
}

.pos { color: var(--up); }
.neg { color: var(--down); }
td.dim { color: var(--muted); }

/* 완료 토스트 */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 8px 18px; font-size: 13px; z-index: 100;
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 표: 종목 행 vs 계좌 하위 행 */
tr.lvl-ticker td { font-weight: 600; }
tr.lvl-account td { font-weight: 400; color: var(--muted); }
tr.lvl-account td:first-child { padding-left: 22px; }
tr.lvl-account .pos, tr.lvl-account .neg { color: inherit; }
tr.lvl-account td.pos { color: var(--up); }
tr.lvl-account td.neg { color: var(--down); }

.bubble {
  display: inline-block; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; color: var(--text);
}

/* 종목 상세 상단 계좌 스트립 */
.acct-strip .acct-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.acct-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.acct-card .bubble { margin-bottom: 8px; }

/* 주가전망 박스 */
.fc-tier { margin-bottom: 10px; }
.fc-tier-h { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.fc-tier-h.pos { color: var(--up); }
.fc-tier-h.neg { color: var(--down); }
.firm-bubbles { display: flex; flex-wrap: wrap; gap: 5px; }
.firm-bubbles .bubble { font-size: 11px; }
.firm-bubbles .bubble b { font-weight: 700; color: var(--text); }
a.fc-chip { text-decoration: none; }
a.fc-chip:hover { border-color: var(--accent); color: var(--accent); }

.tabs {
  display: flex; gap: 6px; padding: 0 20px; margin-top: 8px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.tabs button {
  background: transparent; border: none; border-bottom: 3px solid transparent;
  color: var(--muted); padding: 10px 14px; cursor: pointer; font-size: 14px;
  transition: color .15s ease, border-color .15s ease;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.tabs button.tab-extra { font-style: italic; }
.tab-x {
  margin-left: 6px; padding: 0 3px; border-radius: 3px;
  color: var(--muted); font-style: normal;
}
.tab-x:hover { background: var(--panel-2); color: var(--neg, #3b82f6); }

/* + 종목 추가 */
.tab-add-wrap { position: relative; display: inline-flex; align-items: center; }
.tab-add {
  background: transparent; border: 1px dashed var(--line); border-radius: 6px;
  color: var(--muted); width: 26px; height: 26px; line-height: 1; cursor: pointer;
  font-size: 16px; align-self: center;
}
.tab-add:hover { border-color: var(--accent); color: var(--text); }
.tab-add-pop {
  position: absolute; top: 34px; left: 0; z-index: 40; width: 280px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); padding: 8px;
}
.tab-add-pop input {
  width: 100%; box-sizing: border-box; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 6px; color: var(--text);
  padding: 7px 9px; font-size: 13px; outline: none;
}
.tab-add-pop input:focus { border-color: var(--accent); }
.tab-add-res { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.tab-add-res li {
  padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text);
}
.tab-add-res li:hover { background: var(--panel-2); }
.tab-add-res li.dim { color: var(--muted); cursor: default; }
.tab-add-res li.dim:hover { background: transparent; }

.detail { padding: 16px 20px 40px; }
/* 태블릿+ : 차트(2) · 지표(1) · 시장(1) 3열. 좁으면 세로로 쌓임 */
.panel-grid {
  /* 차트칸은 전체의 50%(=10/20) 고정. 나머지를 기본지표 40 : 주요지수 60 으로 */
  display: grid; grid-template-columns: 10fr 4fr 6fr; gap: 16px;
}
/* 그리드/플렉스 자식이 내용 폭 때문에 트랙을 밀어내지 않도록 */
.panel-grid > div { min-width: 0; }
@media (max-width: 1100px) {
  .panel-grid { grid-template-columns: 1fr 1fr; }
  .panel-grid > .pg-charts { grid-column: 1 / -1; } /* 차트는 전체 폭 */
}
@media (max-width: 720px) {
  .panel-grid { grid-template-columns: 1fr; }
  .panel-grid > .pg-charts { grid-column: auto; }
}
.block {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; margin-bottom: 16px;
  min-width: 0; overflow: hidden;
}
.block h3 { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.block h3.h3-row { display: flex; justify-content: space-between; align-items: center; }
.tf-btns { display: inline-flex; gap: 4px; }
.unit-tag { color: var(--muted); font-size: 11px; font-weight: 400; }
.tf-btns button {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 8px; font-size: 10px; cursor: pointer;
}
.tf-btns button:hover { border-color: var(--accent); }
.tf-btns button.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }
.block canvas { width: 100% !important; display: block; }
#priceChart { height: 340px !important; }
#macdChart { height: 150px !important; }
#stochChart { height: 150px !important; }
#rsiChart { height: 130px !important; }
#flowChart { height: 190px !important; }
#weightChart { width: 100% !important; height: 100% !important; }

/* 보조지표 블록: 버튼으로 켜고 끌 때 위/아래로 밀려 들어오고 나가게 */
.sub-block {
  overflow: hidden;
  max-height: 520px;
  transition: max-height .38s ease, opacity .28s ease,
              padding .38s ease, margin .38s ease, border-width .38s ease;
}
.sub-block.collapsed {
  max-height: 0; opacity: 0;
  padding-top: 0; padding-bottom: 0;
  margin-top: 0; margin-bottom: 0;
  border-width: 0;
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* 기본지표·목표주가 갭: 항목마다 끊김 없는 가로 구분선 (열 간격 0 + 셀 내부 패딩) */
#fundBox .kv, #targetBox .kv { column-gap: 0; row-gap: 0; }
#fundBox .kv > *, #targetBox .kv > * { border-bottom: 1px solid var(--line); padding: 6px 0; }
#fundBox .kv > dt, #targetBox .kv > dt { padding-right: 12px; }
#fundBox .kv > dd, #targetBox .kv > dd { padding-left: 12px; }
#fundBox .kv > dt:last-of-type, #fundBox .kv > dd:last-of-type,
#targetBox .kv > dt:last-of-type, #targetBox .kv > dd:last-of-type { border-bottom: none; }

/* 주요 지수 / ETF 구성종목 표 — 넓으면 가로 스크롤. 폰트는 기본지표(.kv)와 동일 13px */
.tbl-scroll { max-width: 100%; overflow-x: auto; }
.idx-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.idx-table th, .idx-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.idx-table th { color: var(--muted); font-weight: 500; font-size: 11px; }
.idx-table th:first-child, .idx-table td:first-child { text-align: left; }
.idx-table tbody tr:last-child td { border-bottom: none; }

/* 투자의견 컨센서스 표 — 제목은 다른 블록처럼 좌상단 h3 */
.consensus-table td { color: var(--text); }           /* 기본은 흰색 */
.consensus-table .op-sbuy  { color: #b91c1c; font-weight: 700; } /* 강력매수 */
.consensus-table .op-buy   { color: #f59e0b; font-weight: 700; } /* 매수 */
.consensus-table .op-hold  { color: #22c55e; font-weight: 700; } /* 중립 */
.consensus-table .op-sell  { color: #3b82f6; font-weight: 700; } /* 매도 */
.consensus-table .op-ssell { color: #1e3a8a; font-weight: 700; } /* 강력매도 */

.target-gap { font-size: 13px; }
.bar-track { background: var(--panel-2); border-radius: 6px; height: 10px; position: relative; margin: 8px 0; }
.bar-fill { background: var(--accent); height: 100%; border-radius: 6px; }
.bar-mark { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--text); }

.news { list-style: none; margin: 0; padding: 0; }
.news li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.news li:last-child { border-bottom: none; }
.news a { color: var(--text); text-decoration: none; }
.news a:hover { color: var(--accent); }
.news .src { color: var(--muted); font-size: 11px; margin-left: 6px; }

/* 로딩 — 은은한 펄스로 "아직 처리 중"임을 표시 (멎어 보이는 텍스트 대신) */
.loading {
  color: var(--muted); padding: 20px; text-align: center; font-size: 12.5px;
  animation: loadingPulse 1.4s ease-in-out infinite;
}
@keyframes loadingPulse { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }

/* 빈/미제공 데이터 — 눈에 띄는 빨강 대신 카드 톤의 절제된 안내 박스 */
.error {
  color: var(--muted); padding: 16px 14px; text-align: center; font-size: 12px; line-height: 1.6;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--panel-2);
}
.error::before { content: "ⓘ "; opacity: .7; }

/* 페이지 전체가 못 뜬 경우 — AI Advisor 박스와 같은 언어의 강조 알림 */
.fail {
  margin: 20px; padding: 16px 18px; border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 6%, var(--panel));
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  color: var(--text); font-size: 13px; line-height: 1.7;
}

/* 출처·갱신 스트립 (푸터) — 원자재시황과 동일 */
.provenance {
  color: var(--muted); font-size: 11px; line-height: 1.8;
  border-top: 1px solid var(--line);
  margin: 4px 20px 0; padding: 14px 0 32px;
}
.provenance b { color: var(--text); font-weight: 600; }
.provenance .sep { margin: 0 8px; opacity: .45; }
.provenance[hidden] { display: none; }

/* ── 보조지표 종합 신호 패널 ─────────────────────────────────────── */
.sig-help-btn {
  margin-left: 8px; width: 18px; height: 18px; line-height: 16px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2);
  color: var(--muted); font-size: 11px; cursor: pointer;
}
.sig-help-btn:hover { border-color: var(--accent); color: var(--text); }
.sig-help {
  margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel-2); font-size: 12px; line-height: 1.7;
  color: var(--muted);
}
.sig-help[hidden] { display: none; }
.sig-help b { color: var(--text); font-weight: 600; }
.sig-help ul { margin: 6px 0; padding-left: 18px; }
.sig-help a { color: var(--accent); }

.sig-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.sig-stance {
  font-weight: 700; font-size: 14px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.sig-head.bull  .sig-stance { color: var(--up);   border-color: color-mix(in srgb, var(--up) 55%, var(--line)); }
.sig-head.bear  .sig-stance { color: var(--down); border-color: color-mix(in srgb, var(--down) 55%, var(--line)); }
.sig-head.mixed .sig-stance { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.sig-read { font-size: 13px; color: var(--text); flex: 1 1 auto; }
.sig-tally { font-size: 12px; color: var(--muted); }
.sig-tally i { font-style: normal; margin-left: 4px; }
.sig-tally i.bull { color: var(--up); }
.sig-tally i.bear { color: var(--down); }

.sig-narrative {
  margin: 0 0 12px; font-size: 13px; line-height: 1.75; color: var(--text);
}
.sig-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sig-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); cursor: default;
}
.sig-chip b { font-size: 7px; letter-spacing: -1px; }
.sig-chip.bull    { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); }
.sig-chip.bull b  { color: var(--up); }
.sig-chip.bear    { border-color: color-mix(in srgb, var(--down) 45%, var(--line)); }
.sig-chip.bear b  { color: var(--down); }
.sig-chip.neutral b { color: var(--muted); }

.sig-list { list-style: none; margin: 0; padding: 0; }
.sig-row {
  display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.6;
}
.sig-row:last-child { border-bottom: none; }
.sig-row .sig-body { flex: 1 1 auto; min-width: 0; }
.sig-row.has-guide { cursor: pointer; }
.sig-row.has-guide:hover { background: var(--panel-2); }
.sig-row.has-guide:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.sig-more {
  margin-left: 6px; font-size: 11px; color: var(--muted); white-space: nowrap;
  border: 1px solid var(--line); border-radius: 4px; padding: 0 5px;
}
.sig-row.open .sig-more { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sig-guide {
  flex-basis: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 12px; line-height: 1.7; color: var(--muted);
}
.sig-guide[hidden] { display: none; }
.sig-guide b { color: var(--text); font-weight: 600; }
.sig-subhead {
  margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--muted); text-transform: uppercase;
}
.sig-subhead span { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; }
.sig-list.sig-ref .sig-detail { color: var(--muted); }
.sig-list.sig-ref .sig-row.open .sig-detail { color: var(--text); }
.sig-tag {
  flex: none; align-self: flex-start; font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 4px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--muted);
}
.sig-tag.bull    { color: var(--up);   border-color: color-mix(in srgb, var(--up) 45%, var(--line)); }
.sig-tag.bear    { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, var(--line)); }
.sig-tag.neutral { color: var(--muted); }
.sig-detail { color: var(--text); }
.sig-foot { margin-top: 10px; font-size: 11px; color: var(--muted); }