/* ── kstock 대시보드 스타일 ─────────────────────────────────────
   디자인 토큰: dataviz 검증 팔레트 (라이트/다크 각각 검증된 스텝).
   다크 모드: OS 설정(prefers-color-scheme) + 수동 토글(html[data-theme])
   둘 다 지원 — 토글이 항상 우선한다.                              */

:root {
  color-scheme: light;
  /* 표면/잉크 */
  --page:        #f9f9f7;
  --surface:     #fcfcfb;
  --ink:         #0b0b0b;
  --ink-2:       #52514e;
  --muted:       #898781;
  --grid:        #e1e0d9;
  --axis:        #c3c2b7;
  --border:      rgba(11, 11, 11, 0.10);
  /* 카테고리 시리즈 (검증된 순서: 파랑→주황→아쿠아→노랑→마젠타) */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  /* 등락 (국내 관례: 상승=빨강, 하락=파랑) — 본문 텍스트 대비 확보 스텝 */
  --up:   #d03b3b;
  --down: #1c5cab;
  /* 이동평균선 (관례: 5=보라, 20=초록, 60=주황) — 검증 팔레트 */
  --ma5:  #7c53c9;
  --ma20: #1baf7a;
  --ma60: #eb6834;
  /* 상태 */
  --good:    #006300;
  --warning: #b97e00;
  --serious: #c05a2e;
  --accent:  #2a78d6;
  --accent-ink: #ffffff;
  --tooltip-bg: rgba(252, 252, 251, 0.97);
  --shadow: 0 2px 10px rgba(11, 11, 11, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:        #17171c;
    --surface:     #202027;
    --ink:         #e7e8ec;
    --ink-2:       #9b9ca8;
    --muted:       #8a8b96;
    --grid:        #2a2a33;
    --axis:        #3a3a45;
    --border:      #2f2f3a;
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --s5: #d55181;
    --up:   #f4606c;
    --down: #4e95fc;
    --ma5:  #9d7ce0;
    --ma20: #199e70;
    --ma60: #d95926;
    --good:    #0ca30c;
    --warning: #fab219;
    --serious: #ec835a;
    --accent:  #3987e5;
    --accent-ink: #ffffff;
    --tooltip-bg: rgba(32, 32, 39, 0.97);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:        #17171c;
  --surface:     #202027;
  --ink:         #e7e8ec;
  --ink-2:       #9b9ca8;
  --muted:       #8a8b96;
  --grid:        #2a2a33;
  --axis:        #3a3a45;
  --border:      #2f2f3a;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #d55181;
  --up:   #f4606c;
  --down: #4e95fc;
  --ma5:  #9d7ce0;
  --ma20: #199e70;
  --ma60: #d95926;
  --good:    #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --accent:  #3987e5;
  --accent-ink: #ffffff;
  --tooltip-bg: rgba(32, 32, 39, 0.97);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

/* display 지정된 요소도 hidden 속성이 항상 이긴다 */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: 44px; /* 고정 푸터 공간 */
}

/* ── 상단 바 ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.brand-sub { font-size: 12px; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.last-update { font-size: 12px; color: var(--ink-2); }

/* 로그인 계정 — 비어 있으면(로컬 실행) 여백도 차지하지 않게 :empty로 숨긴다 */
.me-user {
  font-size: 12px;
  color: var(--ink-2);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.me-user:empty { display: none; }

/* AI 생성 권한이 없는 계정에 버튼 대신 뜨는 안내 */
.ai-locked { font-size: 12px; color: var(--ink-2); white-space: nowrap; }

/* ── 로그인 화면 ── */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--page);
}
.login-screen[hidden] { display: none; }
.login-box {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
}
.login-brand { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.login-sub { font-size: 12px; color: var(--ink-2); margin: -8px 0 6px; }
.login-field {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--ink-2);
}
.login-field input {
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--page);
  color: var(--ink);
}
.login-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.login-error { font-size: 12px; color: #d64545; }
.login-error[hidden] { display: none; }
.login-submit { margin-top: 4px; padding: 9px; }

/* ── 버튼 ── */
.btn {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 2px 8px; font-size: 12px; }

/* ── 업데이트 패널 / 에러 배너 ── */
.update-panel, .error-banner {
  max-width: 1240px;
  margin: 10px auto 0;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.update-panel-head { display: flex; align-items: center; gap: 8px; }
.update-panel-head .btn { margin-left: auto; }
.update-log {
  margin-top: 8px;
  max-height: 180px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-all;
}
.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--grid);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex: none;
}
.spinner.done { animation: none; border-color: var(--good); }
@keyframes spin { to { transform: rotate(360deg); } }
.error-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: var(--serious);
  color: var(--ink);
}
.error-banner .btn { margin-left: auto; flex: none; }

/* ── 탭 ── */
.tabs {
  max-width: 1240px;
  margin: 12px auto 0;
  padding: 0 16px;
  display: flex;
  gap: 4px;
  /* 경계선을 border가 아닌 inset 그림자로 그린다 — border를 쓰면 그만큼
     clientHeight가 줄어, 활성 탭 밑줄을 선 위로 겹치려고 .tab에 걸었던
     margin-bottom:-1px과 맞물려 세로로 1px 넘친다. scrollHeight는 음수
     마진을 무시하고 자식 테두리 상자로 재기 때문. overflow-x:auto가
     overflow-y까지 auto로 올리므로 그 1px이 유령 세로 스크롤바가 됐다. */
  box-shadow: inset 0 -1px 0 var(--border);
  overflow-x: auto; /* 탭 6개 — 좁은 화면에서 가로 스크롤 (페이지 오버플로 방지) */
  overflow-y: hidden; /* 반올림으로 다시 넘쳐도 스크롤바가 뜨지 않게 */
}
.tab { flex: none; white-space: nowrap; }
.tab {
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.tab[hidden] { display: none; } /* 내 계좌 탭 — 단독 실행에서 숨김 */

/* ── 레이아웃 ── */
main { max-width: 1240px; margin: 0 auto; padding: 16px; }
.tab-panel[hidden] { display: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.card-sub { font-size: 12px; font-weight: 400; color: var(--muted); }

.section-title { font-size: 15px; font-weight: 600; margin: 22px 0 10px; }
.section-sub { font-size: 12px; font-weight: 400; color: var(--muted); }

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.chart-grid-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.market-top {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 12px;
  align-items: stretch;
}
/* 좁은 화면 가로 오버플로 방지: 그리드/플렉스 아이템 최소폭 해제 */
.market-top > .card, .chart-card, .signal-row, .signal-note { min-width: 0; }
/* 2열 표 그리드(시그널 탭 등)의 무클래스 래퍼도 동일 — 표 자체는 .table-scroll이
   가로 스크롤을 맡으므로 아이템이 표 최소폭에 끌려 페이지를 넘치게 두지 않는다 */
.chart-grid > div, .chart-grid-2 > div { min-width: 0; }
@media (max-width: 760px) {
  .market-top { grid-template-columns: 1fr; }
}

/* ── 차트 공통 ── */
.chart-card { position: relative; }
.chart-head { display: flex; align-items: baseline; gap: 8px; }
.chart-head .chart-title { font-size: 13px; font-weight: 600; }
.chart-head .chart-latest { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart-head .chart-latest.val-up { color: var(--up); }
.chart-head .chart-latest.val-down { color: var(--down); }
.chart-head .btn { margin-left: auto; }
.chart-body { position: relative; margin-top: 6px; }
.chart-body svg { display: block; width: 100%; }
.chart-svg text { font-family: inherit; font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-svg .gridline { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axisline { stroke: var(--axis); stroke-width: 1; }
.chart-svg .crosshair { stroke: var(--muted); stroke-width: 1; }
.chart-svg:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.chart-empty { color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; }

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--tooltip-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px 10px;
  font-size: 12px;
  z-index: 10;
  min-width: 120px;
}
.chart-tooltip .tt-date { color: var(--muted); margin-bottom: 3px; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart-tooltip .tt-key { width: 12px; height: 0; border-top: 2px solid; flex: none; }
.chart-tooltip .tt-name { color: var(--ink-2); }
.chart-tooltip .tt-val { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; padding-left: 10px; }
.chart-tooltip .tt-val.val-up { color: var(--up); }
.chart-tooltip .tt-val.val-down { color: var(--down); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.chart-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .lg-key { width: 14px; height: 0; border-top: 2px solid; }
.chart-legend .lg-swatch { width: 8px; height: 12px; border-radius: 2px; }

/* ── 캔들차트 컨트롤/정보줄 ── */
.chart-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button {
  font: inherit;
  font-size: 12px;
  padding: 4px 11px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.candle-info {
  display: flex;
  align-items: baseline;
  gap: 4px 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.candle-info .ci-date { color: var(--muted); }
.candle-info .ci-label { color: var(--muted); margin-right: 2px; }
.candle-info strong { font-weight: 600; color: var(--ink); }
.candle-info .val-up strong, .candle-info .val-up { color: var(--up); }
.candle-info .val-down strong, .candle-info .val-down { color: var(--down); }

.chart-table-wrap { max-height: 220px; overflow: auto; margin-top: 6px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td {
  text-align: right;
  padding: 3px 8px;
  border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--surface); }
.data-table th:first-child, .data-table td:first-child { text-align: left; }

/* ── 수급 상위 테이블 ── */
.flows-table-wrap { max-height: 520px; overflow: auto; margin-top: 10px; }
.flows-table th:nth-child(2), .flows-table td:nth-child(2) { text-align: left; }
.flows-table th, .flows-table td { padding: 6px 10px; }
.flows-table tbody tr { cursor: pointer; }
.flows-table tbody tr:hover, .flows-table tbody tr:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.flows-sector { margin-left: 6px; font-size: 11px; color: var(--muted); }
.flows-caption { margin-top: 8px; font-size: 11px; color: var(--muted); }

/* ── 국면 게이지 ── */
.regime-gauge { text-align: center; }
.regime-gauge svg { display: block; margin: 0 auto; max-width: 100%; }
.regime-score {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.regime-label {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.regime-scale { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* ── 신호 목록 ── */
.signal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 16px; }
.signal-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--grid);
}
.signal-name { font-size: 13px; flex: none; }
.signal-note { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signal-badge {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.badge-up   { color: var(--up); }
.badge-down { color: var(--down); }
.badge-flat { color: var(--muted); }

/* ── 등락/상태 텍스트 ── */
.val-up   { color: var(--up); }
.val-down { color: var(--down); }
.num { font-variant-numeric: tabular-nums; }

/* ── 컨트롤 행 ── */
.controls-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.control { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.control select {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
}
.controls-meta { font-size: 12px; color: var(--muted); }
.rec-weights { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

/* ── 추천 카드 ── */
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
.rec-card { display: flex; flex-direction: column; gap: 10px; }
.rec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-rank {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rec-name { font-size: 15px; font-weight: 700; }
.stock-link { cursor: pointer; }
.stock-link:hover, .stock-link:focus-visible { text-decoration: underline; }
/* 시그널 > 신규 리포트: 제목은 네이버 금융 원문을 새 탭으로 연다. */
.signal-report-table th:nth-child(3),
.signal-report-table td:nth-child(3) { text-align: left; }
.signal-report-link {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.signal-report-link:hover { text-decoration: underline solid; }
.signal-report-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  text-decoration: underline solid;
}
/* 방송 데일리 본문 내 종목명 링크 — stock-link 위에 얹어 '클릭 가능'을 분명히
   하되 본문 흐름과 어울리게: 강조색 + 점선 밑줄, 포커스 시 실선. */
.wowtv-stock {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  border-radius: 2px;
}
.wowtv-stock:hover { text-decoration: underline solid; }
.wowtv-stock:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; text-decoration: underline solid; }
.rec-code { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip {
  font-size: 11px;
  color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.rec-stats { display: flex; align-items: baseline; gap: 16px; }
.rec-price { font-size: 15px; font-weight: 600; }
.rec-composite { font-size: 13px; color: var(--ink-2); }
.rec-composite strong { font-size: 17px; color: var(--ink); }
.rec-sector { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mini-bars { display: grid; gap: 4px; }
.mini-bar-row { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 8px; }
.mini-bar-label { font-size: 12px; color: var(--ink-2); }
.mini-bar-track { height: 8px; border-radius: 0 4px 4px 0; overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 0 4px 4px 0; }
.mini-bar-val { font-size: 12px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.reason-list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.reason-list li { padding: 2px 0 2px 22px; position: relative; }
.reason-list li::before { position: absolute; left: 0; }
.reason-list li.pos::before { content: "✓"; color: var(--good); font-weight: 700; }
.reason-list li.risk::before { content: "⚠"; color: var(--serious); }
/* 자체 계산 과열(참고) — 거래소 경보가 아니므로 ⚠·serious 를 쓰지 않는다 */
.reason-list li.note::before { content: "·"; color: var(--ink-2); font-weight: 700; }
/* 근거별 가중치 칩 — 없으면 "-3.0 거래정지"와 "-0.5 RSI 과열"이 같은 무게로 읽힌다 */
.reason-list .outlook-pts {
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── 종목분석 ── */
.search-wrap { position: relative; max-width: 440px; margin-bottom: 14px; }
.search-input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.search-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
}
.suggest-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
}
.suggest-item:hover, .suggest-item.active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.suggest-code { color: var(--muted); font-variant-numeric: tabular-nums; }
.suggest-sector { margin-left: auto; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 상단 검색 제안의 '미국' 구분 — 국내 종목 뒤에 붙는 미국 종목 줄 */
.suggest-market {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  white-space: nowrap;
}

.analyze-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 860px) { .analyze-grid { grid-template-columns: 1fr; } }
.analyze-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.analyze-name { font-size: 20px; font-weight: 700; }
.stance-badge {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.stance-badge.up   { color: var(--up);   border-color: var(--up); }
.stance-badge.down { color: var(--down); border-color: var(--down); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px 12px;
}
.stat { min-width: 0; }
.stat-label { font-size: 11px; color: var(--muted); }
.stat-value { font-size: 14px; font-weight: 600; white-space: nowrap; }

.kv-list { margin: 0; font-size: 13px; }
.kv-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--grid); }
.kv-list dt { color: var(--ink-2); }
.kv-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.empty-state { color: var(--muted); text-align: center; padding: 48px 16px; font-size: 14px; }

/* ── 종목분석 로딩/빈 상태 ── */
.analyze-result { position: relative; }
.analyze-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 16px;
  font-size: 14px;
  color: var(--ink-2);
}
.analyze-loading.over {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 0;
  background: color-mix(in srgb, var(--page) 55%, transparent);
}
.quick-picks { margin-top: 20px; }
.quick-picks-label { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.quick-picks-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip-btn {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink-2);
  padding: 5px 12px;
}
.chip-btn:hover { border-color: var(--accent); color: var(--ink); }
.chip-btn .suggest-code { margin-left: 4px; }

/* ── 요인 아코디언 ── */
.factor-list { display: grid; gap: 10px; }
.factor-cat { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.factor-cat > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
}
.factor-cat[open] > summary { border-radius: 9px 9px 0 0; }
.factor-cat > summary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.factor-cat > summary::-webkit-details-marker { display: none; }
.factor-cat > summary::before { content: "▸"; color: var(--muted); transition: transform 0.15s; }
.factor-cat[open] > summary::before { transform: rotate(90deg); }
.factor-cat-count { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
.factor-item { border-top: 1px solid var(--grid); padding: 10px 16px; }
.factor-item-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.factor-name { font-size: 13px; font-weight: 600; }
.factor-stars { color: var(--s4); font-size: 12px; letter-spacing: 1px; }
.factor-state { font-size: 13px; color: var(--ink-2); margin-top: 4px; max-width: 68ch; }
.factor-signal { font-size: 12px; margin-top: 4px; color: var(--ink-2); max-width: 68ch; }
.factor-detail summary { font-size: 12px; color: var(--muted); cursor: pointer; margin-top: 4px; }
.factor-detail-body {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 6px;
  display: grid;
  gap: 4px;
  max-width: 68ch;
  padding: 8px 12px;
  margin-left: 8px;
  border-left: 2px solid var(--grid);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: 0 6px 6px 0;
}

/* ── 공용: 표 가로 스크롤 래퍼 (모바일 오버플로 방지) ── */
.table-scroll { overflow-x: auto; min-width: 0; }

/* ── 추천 성과 트래킹 카드 ── */
.perf-card { margin-bottom: 14px; }
.perf-note { font-size: 12px; color: var(--warning); margin-bottom: 8px; }
.perf-stats { margin-bottom: 10px; }

/* ── 섹터 로테이션 ── */
.sector-table th, .sector-table td { padding: 6px 10px; }
.sector-table td:last-child { text-align: left; }
.leader-cell { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.leader-cell .chip-btn { padding: 2px 8px; font-size: 11px; }
.leader-cell .suggest-code { font-size: 11px; }

/* ── 쏠림·밸류에이션 (시장 탭) ── */
.breadth-headline { font-size: 13px; color: var(--ink-2); margin: 2px 0 4px; }
.breadth-headline strong { font-size: 15px; }
.breadth-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.breadth-chips .chip-btn { padding: 2px 8px; font-size: 11px; }
.breadth-quart { margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-svg .baseline { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }

/* ── 안내/경고 박스 ── */
.notice-box {
  border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--border));
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
.notice-box .notice-strong { font-weight: 600; margin-bottom: 4px; }
.warn-box {
  border: 1px solid color-mix(in srgb, var(--serious) 55%, var(--border));
  background: color-mix(in srgb, var(--serious) 8%, var(--surface));
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.warn-box .warn-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }

/* ── 내 계좌 (포트폴리오 진단) ── */
.manual-card { margin-bottom: 12px; }
.manual-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  resize: vertical;
}
.manual-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.manual-error { font-size: 12px; color: var(--serious); }
.sector-bar-row { display: grid; grid-template-columns: minmax(64px, 140px) 1fr 52px; align-items: center; gap: 8px; }
.sector-bar-label { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diag-table tbody tr { cursor: pointer; }
.diag-table tbody tr:hover, .diag-table tbody tr:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.diag-table td.diag-flags {
  white-space: normal;
  text-align: left;
  max-width: 280px;
  font-size: 11px;
  color: var(--serious);
}
.excluded-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 백테스트 ── */
.bt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 860px) { .bt-grid { grid-template-columns: 1fr; } }
.bt-bench td { border-top: 2px solid var(--axis); color: var(--ink-2); }

/* ── 고정 푸터 (면책) ── */
.disclaimer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 8px 16px;
}

/* ── 반응형 ── */
@media (max-width: 560px) {
  .chart-grid, .chart-grid-2 { grid-template-columns: 1fr; }
  .rec-grid { grid-template-columns: 1fr; }
  .signal-list { grid-template-columns: 1fr; }
  .topbar-inner { padding: 8px 12px; }
  main { padding: 12px; }
}

/* 공시/뉴스 목록 (종목분석) */
.disc-list { list-style: none; margin: 0; padding: 0; }
.disc-item { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.disc-item:last-child { border-bottom: none; }
.disc-item a { color: var(--accent, #3182f6); text-decoration: none; }
.disc-item a:hover { text-decoration: underline; }
.disc-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.disc-line a { min-width: 0; overflow-wrap: anywhere; }
.disc-reason { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* 공시 임팩트 배지: 호재=상승색 / 악재=하락색 / 중대=경고색 / 중요=중립 */
.impact-badge {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.impact-badge.imp-pos { color: var(--up); }
.impact-badge.imp-neg { color: var(--down); }
.impact-badge.imp-grave {
  color: var(--serious);
  background: color-mix(in srgb, var(--serious) 12%, transparent);
}
.impact-badge.imp-info { color: var(--ink-2); }

/* ── 관심종목 ☆/★ 토글 (종목분석 헤더) ── */
.watch-star {
  font: inherit;
  font-size: 20px;
  line-height: 1;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
}
.watch-star:hover { color: var(--s4); }
.watch-star.on { color: var(--s4); }
.watch-star:disabled { opacity: 0.5; cursor: default; }

/* ── 관심종목 표 (내 계좌) ── */
.watch-box { margin-bottom: 12px; }
.watch-table tbody tr { cursor: pointer; }
.watch-table tbody tr:hover, .watch-table tbody tr:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.watch-table td.watch-memo {
  text-align: left;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-2);
}
.watch-table td.watch-actions { text-align: right; }

/* ── 관심·시세 탭 (시세 보드) ── */
.quotes-controls { margin: 4px 0 12px; row-gap: 8px; }
.quotes-controls .search-wrap { margin-bottom: 0; flex: 1 1 220px; max-width: 320px; }
.quote-status { font-size: 12px; color: var(--muted); }
.quote-import-result { font-size: 12px; color: var(--ink-2); }
.quote-src {
  margin-left: 6px;
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 6px;
  white-space: nowrap;
}
.quotes-table td.quote-sigs { text-align: left; }
.q-sig {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
}
.q-sig .tech-dot { width: 7px; height: 7px; }
.q-sig-more { color: var(--muted); cursor: help; }
.quotes-table td.watch-memo { cursor: pointer; }
.quotes-table td.watch-memo-empty { color: var(--muted); font-style: italic; }
.quotes-table .watch-star { font-size: 16px; }

/* ── 밸류에이션 밴드 (종목분석) ── */
.vband-headline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.vband-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.vband-tag-cheap { color: var(--good); border-color: var(--good); }
.vband-tag-dear { color: var(--serious); border-color: var(--serious); }
.vband-tag-mid { color: var(--muted); }
.vband-track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--grid);
  margin: 20px 6px 4px;
}
.vband-iqr {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--s1) 38%, var(--grid));
}
.vband-median {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink-2);
  transform: translateX(-1px);
}
.vband-now {
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid var(--accent);
  transform: translateX(-6px);
}
.vband-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin: 6px 6px 0; }
.vband-note { margin-top: 10px; font-size: 11px; color: var(--muted); line-height: 1.45; }

/* ── 자체 적정가치 v1 (종목분석) ── */
.intrinsic-card {
  grid-column: 1 / -1;
  min-width: 0;
  border-left: 3px solid var(--accent);
}
.intrinsic-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.intrinsic-title { margin: 0; }
.intrinsic-meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.intrinsic-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 1px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--grid);
  border-radius: 9px;
  background: var(--grid);
}
.intrinsic-summary .stat {
  min-height: 58px;
  padding: 9px 10px;
  background: var(--surface);
}
.intrinsic-summary .stat-value {
  margin-top: 3px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.intrinsic-summary-abstain { max-width: 420px; }
.intrinsic-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--grid);
}
.intrinsic-section-title {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}
.intrinsic-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.intrinsic-scenario {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-top: 2px solid var(--muted);
  border-radius: 9px;
  background: color-mix(in srgb, var(--page) 55%, var(--surface));
}
.intrinsic-scenario-bear { border-top-color: var(--down); }
.intrinsic-scenario-base { border-top-color: var(--accent); }
.intrinsic-scenario-bull { border-top-color: var(--up); }
/* 현 실적 기준 카드는 정책 가중 대상이 아니라 성격이 달라 점선 테두리로 구분한다. */
.intrinsic-scenario-current {
  border-style: dashed;
  border-top: 2px solid var(--warn, var(--muted));
}
.intrinsic-scenario-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.intrinsic-scenario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.intrinsic-scenario-label { font-size: 12px; font-weight: 600; }
.intrinsic-policy-weight { font-size: 10px; color: var(--muted); }
.intrinsic-scenario-value { margin: 5px 0 8px; font-size: 20px; font-weight: 700; }
.intrinsic-mini-title { margin: 8px 0 4px; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.intrinsic-kv > div { align-items: flex-start; }
.intrinsic-kv dt { min-width: 0; overflow-wrap: anywhere; }
.intrinsic-kv dd {
  max-width: 62%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.intrinsic-details {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--grid);
  font-size: 12px;
}
.intrinsic-details > summary {
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.intrinsic-details[open] > summary { margin-bottom: 6px; color: var(--ink-2); }
.intrinsic-wide-details {
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.intrinsic-wide-details > .intrinsic-kv { margin-top: 7px; }
.intrinsic-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}
.intrinsic-zone-grid .stat {
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.intrinsic-zone-note,
.intrinsic-method-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
/* 역산 DCF·민감도 표 (v3) */
.intrinsic-reverse-text {
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.intrinsic-table-scroll { overflow-x: auto; max-width: 100%; }
.intrinsic-mini-table,
.intrinsic-sens-table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 11px;
}
.intrinsic-mini-table th,
.intrinsic-mini-table td,
.intrinsic-sens-table th,
.intrinsic-sens-table td {
  padding: 4px 7px;
  border: 1px solid var(--grid);
  text-align: right;
  white-space: nowrap;
}
.intrinsic-mini-table th,
.intrinsic-sens-table th { color: var(--muted); font-weight: 600; }
.intrinsic-mini-table tbody th,
.intrinsic-sens-table tbody th,
.intrinsic-table-corner { text-align: left; }
.intrinsic-table-corner { font-weight: 500; }
/* v4 역산 3단 시작점 표: 산출 기준 셀은 줄바꿈을 허용해 표 폭을 줄인다 */
.intrinsic-points-table td.intrinsic-text-cell {
  text-align: left;
  white-space: normal;
  min-width: 150px;
  color: var(--muted);
}
.intrinsic-points-skipped { margin-top: 4px; }
.intrinsic-cycle-multiples {
  margin: 8px 0 2px;
  font-size: 11px;
  color: var(--ink);
  line-height: 1.5;
}
.intrinsic-cycle-multiples .intrinsic-mini-title { display: inline; margin: 0 4px 0 0; }
.intrinsic-sens-grid { margin-top: 8px; }
.intrinsic-sensitivity > .intrinsic-section-title { margin-top: 4px; }
.intrinsic-kill-list { display: grid; gap: 7px; }
.intrinsic-kill-item {
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.intrinsic-kill-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intrinsic-kill-current { font-size: 11px; color: var(--ink-2); }
.intrinsic-kill-text { margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.intrinsic-abstain {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  font-size: 12px;
  line-height: 1.5;
}
.intrinsic-abstain strong { display: block; margin-bottom: 2px; color: var(--warning); }
.intrinsic-list {
  margin: 7px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}
.intrinsic-reasons { margin-top: 8px; }
.intrinsic-reasons li::before,
.intrinsic-warnings li::before { content: "⚠"; color: var(--warning); }
.intrinsic-lock {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}
.intrinsic-lock strong { flex: none; color: var(--accent); }
.intrinsic-warning-block { color: var(--ink-2); }
.intrinsic-disclaimer {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--grid);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .intrinsic-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intrinsic-scenario-grid { grid-template-columns: 1fr; }
  .intrinsic-lock { display: block; }
  .intrinsic-lock strong { display: block; margin-bottom: 3px; }
}

/* ── 스크리너 (추천 탭) ── */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.preset-card {
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--page);
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
}
.preset-card:hover { border-color: var(--accent); }
.preset-card[aria-pressed="true"] {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.preset-name { font-size: 13px; }
.preset-desc { font-size: 11px; color: var(--muted); line-height: 1.5; }
.screener-meta { margin: 14px 0 8px; font-size: 13px; color: var(--ink-2); }
#value-result .screener-meta { margin-top: 0; }

/* ── 가치투자 탭: 커스텀 필터 ── */
.value-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 18px;
  margin-bottom: 12px;
}
.vf-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  min-width: 0;
}
.vf-name { flex: none; }
.vf-op { flex: none; color: var(--muted); }
.vf-unit { flex: none; font-size: 12px; color: var(--muted); }
.vf-input {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  width: 90px;
  min-width: 0;
}
.vf-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.vf-field select {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
}
.screener-table th:nth-child(2), .screener-table td:nth-child(2) { text-align: left; }
.screener-table tbody tr { cursor: pointer; }
.screener-table tbody tr:hover, .screener-table tbody tr:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

/* ── 초보자 도움말 (ⓘ 아이콘 + 팝오버 + 첫 방문 힌트) ── */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  vertical-align: -2px;
  flex: none;
}
.help-icon:hover { color: var(--accent); }
.help-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--accent); }
.help-icon[aria-expanded="true"] { color: var(--accent); }
/* 표 헤더/작은 라벨 안에서도 줄높이 안 흔들리게 */
th .help-icon, .stat-label .help-icon, .mini-bar-label .help-icon { vertical-align: -3px; }

.help-popover {
  position: fixed;
  z-index: 120;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
}
.help-popover-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.help-popover-body { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); white-space: normal; }
/* 모바일: 하단 시트 (위치 인라인 스타일은 help.js가 지정) */
.help-popover.sheet {
  max-width: none;
  max-height: 55vh;
  overflow-y: auto;
  border-radius: 14px 14px 0 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
}

.help-hint {
  max-width: 1240px;
  margin: 12px auto 0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
}
.help-hint-icon { color: var(--accent); font-weight: 700; flex: none; }
.help-hint .btn { margin-left: auto; flex: none; }
@media (max-width: 560px) { .help-hint { margin: 10px 12px 0; } }

/* 팩터 라벨에 ⓘ가 붙는 미니 바 (종목분석) — 라벨 칸 넓힘 */
.mini-bars-help .mini-bar-row { grid-template-columns: 76px 1fr 40px; }

/* ── 데이터 상태 배지/패널 (topbar) ── */
#btn-quality { display: inline-flex; align-items: center; gap: 6px; }
.quality-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
/* 오류 상태 버튼 강조 — 점 색만으로는 노랑/빨강이 구별되지 않는다 */
#btn-quality.quality-alert {
  color: var(--serious);
  border-color: var(--serious);
  font-weight: 600;
}
.quality-dot.q-ok { background: var(--good); }
.quality-dot.q-warn { background: var(--warning); }
.quality-dot.q-error { background: var(--serious); }
.quality-checks { margin-top: 8px; display: grid; gap: 6px; }
.quality-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; min-width: 0; }
.quality-check .quality-dot { margin-top: 5px; }
.quality-name { font-weight: 600; flex: none; }
.quality-detail { color: var(--ink-2); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }

/* ── AI 해설 (KIE 경유 Claude) ─────────────────────────────── */
.ai-card { border-left: 3px solid var(--accent); }
.ai-note-content p { margin: 8px 0; line-height: 1.7; font-size: 13.5px; }
.ai-note-content ul { margin: 6px 0 6px 20px; padding: 0; }
.ai-note-content li { margin: 3px 0; line-height: 1.6; font-size: 13.5px; }
.ai-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; font-size: 12px; color: var(--muted); }
.ai-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: var(--ink-2); font-size: 13px; padding: 4px 0; }
.ai-reco-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 10px; font-size: 12.5px; color: var(--ink-2); }
.ai-brief { margin: 6px 0 2px; padding: 6px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }

/* ── 시장 브리핑 (한국경제TV 와우넷) ─────────────────────────── */
.news-list { display: flex; flex-direction: column; }
.news-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px; border-radius: 6px; cursor: pointer;
  font-size: 13px; min-width: 0;
}
.news-row:hover, .news-row:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.news-stamp { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.news-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.news-row.open .news-title { font-weight: 600; }
.news-link { flex: none; font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.news-link:hover { text-decoration: underline; }
.news-body {
  margin: 2px 6px 10px; padding: 6px 12px;
  border-left: 3px solid var(--border);
  font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.news-para { margin: 0 0 8px; }
.news-para:last-child { margin-bottom: 0; }

/* ── 기술 신호 카드 (종목분석) ── */
.tech-signal-list { display: grid; gap: 6px; }
.tech-signal { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tech-signal-badge {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.ts-bullish { color: var(--up);      background: color-mix(in srgb, var(--up) 8%, transparent); }
.ts-bearish { color: var(--down);    background: color-mix(in srgb, var(--down) 8%, transparent); }
.ts-warn    { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.tech-signal .chip { flex: none; }
.tech-signal-note {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tech-sub-title { margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }

/* ── 동종업계 비교 (종목분석) ── */
.peer-table tbody tr:not(.peer-self) { cursor: pointer; }
.peer-table tbody tr:not(.peer-self):hover, .peer-table tbody tr:not(.peer-self):focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.peer-table tr.peer-self td {
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

/* 볼린저 토글 체크박스 (캔들차트 컨트롤) */
.chk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.chk-toggle input { accent-color: var(--accent); margin: 0; }

/* 지지/저항 표시 모드 셀렉트 (캔들차트 컨트롤) */
.sr-select {
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 4px;
  cursor: pointer;
}

/* ── 오늘의 기술 신호 (추천 탭) ── */
.tech-scan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.tech-chip {
  font: inherit;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.tech-chip:hover { border-color: var(--accent); color: var(--ink); }
.tech-chip[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--ink);
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.tech-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.tech-dot.ts-dot-bullish { background: var(--up); }
.tech-dot.ts-dot-bearish { background: var(--down); }
.tech-dot.ts-dot-warn    { background: var(--warning); }
.tech-chip-count { font-weight: 700; color: var(--ink); }
.tech-scan-table th:nth-child(2), .tech-scan-table td:nth-child(2) { text-align: left; }
.tech-scan-table tbody tr { cursor: pointer; }
.tech-scan-table tbody tr:hover, .tech-scan-table tbody tr:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.tech-scan-table td.ts-note {
  text-align: left;
  font-size: 12px;
  color: var(--ink-2);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 재무 심층 (종목분석) ── */
/* min-width:0 — 그리드 1fr 트랙의 자동 최소폭은 min-content라, 이걸 풀지 않으면
   좁은 화면에서 이 섹션의 표·차트가 같은 행의 다른 카드까지 함께 늘린다 */
.fin-deep { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.fin-deep-body, .fin-deep-body > div { grid-template-columns: minmax(0, 1fr); }
.fin-deep > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
}
.fin-deep[open] > summary { border-radius: 9px 9px 0 0; border-bottom: 1px solid var(--grid); }
.fin-deep > summary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.fin-deep > summary::-webkit-details-marker { display: none; }
.fin-deep > summary::before { content: "▸"; color: var(--muted); transition: transform 0.15s; }
.fin-deep[open] > summary::before { transform: rotate(90deg); }
.fin-deep-body { padding: 12px 14px; display: grid; gap: 12px; }

.fin-badge {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--ink-2);
  white-space: nowrap;
}
.fin-badge.tone-good { color: var(--good);    background: color-mix(in srgb, var(--good) 9%, transparent); }
.fin-badge.tone-warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.fin-badge.tone-bad  { color: var(--serious); background: color-mix(in srgb, var(--serious) 10%, transparent); }

/* 매출 100%를 원가·판관비·영업이익으로 쪼갠 구조 바 */
.fin-waterfall { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--grid); }
.fw-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
  white-space: nowrap;
  overflow: hidden;
}
.fw-cogs { background: var(--muted); }
.fw-sga  { background: var(--s4); }
.fw-op   { background: var(--s3); }

/* 현금흐름 부호 3칸 — 등락색(up/down) 대신 상태색만 쓴다 */
.cf-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cf-sign { border: 1px solid var(--border); border-radius: 10px; padding: 8px 6px; text-align: center; min-width: 0; }
.cf-sign-label { font-size: 12px; color: var(--ink-2); }
.cf-sign-mark { font-size: 32px; font-weight: 700; line-height: 1.15; color: var(--ink-2); }
.cf-sign-val { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-sign-mark.tone-good, .cf-sign.tone-good .cf-sign-mark { color: var(--good); }
.cf-sign-mark.tone-warn, .cf-sign.tone-warn .cf-sign-mark { color: var(--warning); }
.cf-sign-mark.tone-bad,  .cf-sign.tone-bad  .cf-sign-mark { color: var(--serious); }

/* 8패턴 매트릭스 */
.cf-matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cf-cell {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}
.cf-cell-signs { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--ink-2); }
.cf-cell.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--ink);
}
.cf-cell.active .cf-cell-signs { color: var(--ink); }
.cf-history { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cf-history-item { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* 임계선 달린 게이지 (이자보상배율·유동비율 등) */
.fin-gauge { position: relative; height: 12px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.fin-gauge-fill { height: 100%; background: var(--accent); }
.fin-gauge-fill.tone-good { background: var(--good); }
.fin-gauge-fill.tone-warn { background: var(--warning); }
.fin-gauge-fill.tone-bad  { background: var(--serious); }
.fin-gauge-th { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--ink-2); }

/* 차입금 만기 스택 바 */
.fin-maturity { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--grid); }
.fin-maturity .fm-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 11px;
  color: var(--accent-ink);
  white-space: nowrap;
  overflow: hidden;
}
.fin-maturity .fm-seg:nth-child(1) { background: var(--s2); }
.fin-maturity .fm-seg:nth-child(2) { background: var(--s4); }
.fin-maturity .fm-seg:nth-child(3) { background: var(--s3); }
.fin-maturity .fm-seg:nth-child(4) { background: var(--s1); }

@media (max-width: 560px) {
  .cf-matrix { grid-template-columns: repeat(2, 1fr); }
  .cf-sign-mark { font-size: 26px; }
}

/* ── 마켓맵 (시장 탭 상단 트리맵) ── */
/* --mm-base: 0% 근처 셀의 중립 회색 — 표면색과 구분되는 스텝 */
:root { --mm-base: #e6e5df; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mm-base: #2c2c35; } }
:root[data-theme="dark"] { --mm-base: #2c2c35; }

.mm-details { margin-bottom: 16px; }
.mm-body { padding: 12px 14px; }
.mm-map { position: relative; width: 100%; overflow: hidden; }
.mm-group { position: absolute; overflow: hidden; }
.mm-group-label {
  position: absolute;
  left: 3px; right: 2px; top: 1px;
  height: 15px;
  font-size: 10px;
  line-height: 15px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.mm-cell {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--page);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1px 2px;
  color: var(--ink);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}
.mm-cell:hover { filter: brightness(1.08); }
.mm-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-cell .mm-name {
  font-weight: 600;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-cell .mm-chg { font-variant-numeric: tabular-nums; opacity: 0.85; }
.mm-cell.mm-md { font-size: 11px; }
.mm-cell.mm-lg { font-size: 13px; }
.mm-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}
.mm-legend .mm-sw { width: 26px; height: 12px; border-radius: 2px; }
.mm-legend .mm-lab { margin: 0 4px; font-variant-numeric: tabular-nums; }
.mm-tip {
  position: fixed;
  z-index: 60;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--tooltip-bg);
  box-shadow: var(--shadow);
  font-size: 12px;
  color: var(--ink);
  pointer-events: none;
}
.mm-tip .tt-name { font-weight: 700; margin-bottom: 2px; }
.mm-tip .tt-row { color: var(--ink-2); }
.mm-tip .tt-stale { color: var(--warning); margin-top: 2px; }

/* ═══ 한경TV 데일리 탭 ═══════════════════════════════════════ */
.wowtv-head { margin-bottom: 12px; }
.wowtv-titlebar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.wowtv-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; font-size: 12px; color: var(--muted);
}
.wowtv-cov { color: var(--ink-2); }
.wowtv-gen { color: var(--muted); }
.wowtv-chip {
  display: inline-flex; align-items: center; padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
}
.wowtv-chip-ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.wowtv-chip-partial { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.wowtv-chip-empty { color: var(--muted); }
.wowtv-chip-failed { color: var(--danger, #d92d20); border-color: color-mix(in srgb, var(--danger, #d92d20) 45%, transparent); }

.wowtv-warning {
  margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
/* 자막 수집 실패 등 — 분석 근거 전무. 부분 경고보다 강하게(위험색) 표시한다. */
.wowtv-warning.wowtv-warn-error {
  color: var(--danger, #d92d20); font-weight: 600;
  background: color-mix(in srgb, var(--danger, #d92d20) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger, #d92d20) 40%, transparent);
}
/* 영상 없음 등 중립 안내. */
.wowtv-warning.wowtv-warn-info {
  color: var(--muted, #667085);
  background: color-mix(in srgb, var(--muted, #667085) 10%, transparent);
  border-color: color-mix(in srgb, var(--muted, #667085) 30%, transparent);
}

.wowtv-report { line-height: 1.65; font-size: 14px; color: var(--ink); }
.wowtv-report .wowtv-p { margin: 8px 0; }
.wowtv-report .wowtv-h2 { font-size: 17px; font-weight: 700; margin: 6px 0 10px; }
.wowtv-report .wowtv-h3 {
  font-size: 15px; font-weight: 700; margin: 20px 0 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.wowtv-report .wowtv-h4 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.wowtv-report .wowtv-list { margin: 6px 0 10px; padding-left: 20px; }
.wowtv-report .wowtv-list li { margin: 4px 0; }
.wowtv-report .wowtv-hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.wowtv-report .wowtv-quote {
  margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 0 6px 6px 0; font-size: 13px; color: var(--ink-2);
}
.wowtv-report .wowtv-quote div { margin: 2px 0; }
.wowtv-report a { color: var(--accent); text-decoration: none; }
.wowtv-report a:hover { text-decoration: underline; }
.wowtv-report code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  padding: 1px 4px; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.wowtv-src-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.wowtv-src-row:last-child { border-bottom: 0; }
.wowtv-src-time { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; width: 40px; }
.wowtv-src-title {
  flex: 1 1 auto; min-width: 0; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.wowtv-src-title { color: var(--accent); text-decoration: none; }
a.wowtv-src-title:hover { text-decoration: underline; }
.wowtv-src-chars { color: var(--muted); font-size: 12px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.wowtv-src-badge {
  flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wowtv-src-badge.wowtv-ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.wowtv-src-badge.wowtv-fail { color: var(--muted); }

/* 모바일 — 좁은 화면에서 소스 행을 줄바꿈해 겹치지 않게 */
@media (max-width: 560px) {
  .wowtv-titlebar { flex-direction: column; align-items: stretch; }
  .wowtv-src-row { flex-wrap: wrap; gap: 4px 8px; }
  .wowtv-src-title { flex-basis: 100%; white-space: normal; order: 2; }
  .wowtv-src-time { order: 1; }
  .wowtv-src-chars { order: 3; }
  .wowtv-src-badge { order: 4; max-width: none; }
  .wowtv-report .wowtv-h2 { font-size: 16px; }
}

/* ── 미국주식 탭 (금액 단위 USD) ────────────────────────────── */
/* 원화 화면과 섞여 보이지 않도록 통화 안내 줄을 탭 맨 위에 고정 배치한다. */
.us-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
}
.us-asof { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* 지수·금리 줄 */
.us-indices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 16px;
}
.us-index { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.us-index-label { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 라벨 옆 심볼 — 'S&P 500 (SPY)' 의 (SPY). ETF 종가임을 본문에 드러낸다 */
.us-index-sym { font-size: 11px; color: var(--muted); font-weight: 400; }
.us-index-value { font-size: 15px; font-weight: 600; margin-left: auto; }
.us-index-chg { font-size: 12px; flex: none; }

/* 섹터 ETF 성과 칩 */
.us-sectors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.us-sector-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.us-sector-label { color: var(--ink-2); }

/* 목록 컨트롤 */
.us-search-wrap { margin-bottom: 0; flex: 1 1 240px; min-width: 180px; max-width: 360px; }
.us-filter-input {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  width: 170px;
  min-width: 0;
}
.us-filter-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.us-pager { margin: 10px 0 0; gap: 10px; }
.us-pager .controls-meta { font-variant-numeric: tabular-nums; }

/* 종목 표 — 좁은 화면에서는 .table-scroll 이 가로 스크롤을 맡는다.
   첫 열은 ★(관심종목), 그 뒤 티커·회사명·거래소가 왼쪽 정렬이다 */
.us-stocks-table th, .us-stocks-table td { white-space: nowrap; }
.us-stocks-table th:nth-child(2), .us-stocks-table td:nth-child(2),
.us-stocks-table th:nth-child(3), .us-stocks-table td:nth-child(3),
.us-stocks-table th:nth-child(4), .us-stocks-table td:nth-child(4) { text-align: left; }
.us-stocks-table .us-sortable:nth-child(2) .us-sort-btn { justify-content: flex-start; }

/* 목록 첫 열 ★ — 관심종목 토글(window.usWatch). 행 클릭(상세)과 분리된 버튼이다 */
.us-watch-cell { width: 28px; padding-left: 6px; padding-right: 2px; text-align: center; }
.us-star {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 4px;
  color: var(--muted);
}
.us-star[aria-pressed="true"] { color: var(--warning); }
.us-star:hover, .us-star:focus-visible { color: var(--accent); outline: none; }
.us-star:disabled { opacity: .5; cursor: default; }
.us-name-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.us-mover-table td:first-child { white-space: nowrap; }
.us-row-link { cursor: pointer; }
.us-row-link:hover, .us-row-link:focus-visible {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  outline: none;
}

/* 정렬 가능한 열 제목 — 버튼이라 키보드로도 정렬된다 */
.data-table th.us-sortable { padding: 0; }
.us-sort-btn {
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 7px 10px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  white-space: nowrap;
}
.us-sortable:first-child .us-sort-btn { justify-content: flex-start; }
.us-sort-btn:hover { color: var(--ink); }
.us-sort-btn.is-active { color: var(--accent); font-weight: 600; }
.us-sort-ind { font-size: 9px; }

/* Z·F 점수 색조 — 값이 없으면 색을 입히지 않는다 */
.us-tone-good { color: var(--good); }
.us-tone-warn { color: var(--warning); }
.us-tone-bad  { color: var(--serious); }
.us-tone-none { color: var(--muted); }

/* 종목 상세 */
.us-company { margin-top: 10px; }
.us-company-card { display: grid; gap: 10px; }
.us-company-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.us-company-name { font-size: 20px; font-weight: 700; }
.us-company-ticker { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.us-company-close { margin-left: auto; }
.us-company-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.us-price-big { font-size: 24px; font-weight: 700; }
.us-price-chg { font-size: 14px; font-weight: 600; }
.us-sub-title {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--grid);
}
.us-chart-controls { margin: 0; }
.us-price-card { position: relative; min-width: 0; }
.us-fin-table th, .us-fin-table td { white-space: nowrap; }
.us-fin-ttm td { font-weight: 600; border-top: 1px solid var(--axis); }

/* 하위 탭 (홈/종목/실적/매크로/구루) — .seg 골격을 그대로 쓰되
   role=tab 이라 선택 표시는 aria-pressed 가 아니라 aria-selected 다. */
.us-subtabs { margin: 12px 0 2px; max-width: 100%; }
.us-subtabs button[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.us-pane { min-width: 0; }
/* 각 모듈(us_home/us_earnings/us_macro/us_guru)은 자기 스타일을 스스로 주입한다 —
   여기서는 패널 골격만 잡는다. */
.us-company-ext { min-width: 0; }
.us-watch-msg { color: var(--serious); }

@media (max-width: 560px) {
  .us-asof { margin-left: 0; }
  .us-subtabs { display: flex; width: 100%; }
  .us-subtabs button { flex: 1 1 0; padding: 6px 4px; text-align: center; }
  .us-indices { grid-template-columns: 1fr; }
  .us-search-wrap { max-width: none; flex-basis: 100%; }
  .us-filter-input { width: 100%; }
  .us-name-cell { max-width: 180px; }
  .us-price-big { font-size: 20px; }
}