/* style.css 3분할 3/3 — 국내증시(KR)·자본흐름·3존·B+·C안·최신 리뉴얼 (2026-07-23).
   로드 순서 의무: base → mobile → domain. 신규 스타일은 기본적으로 이 파일 끝에 추가. */
/* ─────────────────────────────────────────────
   국내증시 현황 (KR) — /domestic-market
   따뜻한 cream + sage/coral 톤으로 통일된 매크로 도구
───────────────────────────────────────────── */
.nav-kr-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  background: #c8745c; color: #fff;
  padding: 1px 5px; margin-left: 4px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

/* 페이지 컬러 토큰 — 같은 톤을 다른 섹션에서도 재사용 가능 */
.dm-page {
  --dm-bg:           #faf8f3;   /* 페이지 배경 */
  --dm-card-bg:      #ffffff;
  --dm-border:       #ece7dd;
  --dm-divider:      #e3ddd2;
  --dm-text:         #2d2a26;
  --dm-text-soft:    #6e6862;
  --dm-text-mute:    #a59f96;
  --dm-up-faint:     #eef3e7;   /* 0%~+0.5% */
  --dm-up-strong:    #5e8a52;   /* +5%↑ */
  --dm-down-faint:   #f5e6dd;
  --dm-down-strong:  #b35a48;
  --dm-zero:         #fbfaf6;
  --dm-row-label:    #f6f3ec;
  --dm-avg-col-bg:   #f0ece2;
  --dm-accent:       #c8745c;

  max-width: 100%;
}

.dm-header { margin-bottom: 18px; }
.dm-header h1 {
  font-size: 22px; font-weight: 700;
  color: var(--dm-text);
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.01em;
}
.dm-kr {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  background: var(--dm-accent); color: #fff;
  padding: 2px 8px; border-radius: 4px;
  letter-spacing: 0.06em;
}
.dm-sub { font-size: 13px; color: var(--dm-text-soft); margin: 0; }

.dm-section {
  background: var(--dm-card-bg);
  border: 1px solid var(--dm-border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(60, 50, 40, 0.04);
}
.dm-section.dm-locked {
  opacity: 0.7;
  background: #faf8f3;
  border-style: dashed;
}

.dm-section-head {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 14px;
}
.dm-section-head h2 {
  font-size: 15px; font-weight: 600;
  margin: 0; color: var(--dm-text);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
}
.dm-eta {
  font-size: 10.5px; font-weight: 600;
  color: var(--dm-accent); background: #f6e8e0;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.dm-info { font-size: 11.5px; color: var(--dm-text-mute); }

.dm-placeholder {
  background: #faf8f3;
  border: 1px dashed var(--dm-divider);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
}
.dm-placeholder p { margin: 4px 0; font-size: 13px; color: var(--dm-text-soft); }
.dm-placeholder small { color: var(--dm-text-mute); font-size: 11.5px; }

/* ─────────────────────────────────────────────
   Phase 3 — 자본 흐름 파이프라인 (2026-07-12 출시)
   색 축은 Phase 1 히트맵과 동일 — sage(유입) / warm brick(유출).
   대시 스트로크가 리본 위를 흐르며 방향·강도를 표현.
   reduced-motion은 전역 폴백이 흐름을 정지시킴 (정보는 굵기·색으로 유지).
───────────────────────────────────────────── */
.dm-flow-wrap { overflow-x: auto; padding: 6px 0 2px; }
#dmFlowSvg { width: 100%; min-width: 760px; height: auto; display: block; }
.dm-flow-ribbon {
  stroke: #8aa583; opacity: .32;
  stroke-linecap: butt;
  transition: opacity 160ms ease-out;
  cursor: pointer;
}
.dm-flow-ribbon.out { stroke: #b3705e; }
.dm-flow-ribbon:hover { opacity: .55; }
.dm-flow-dash {
  stroke: #386c32; opacity: .85;
  stroke-dasharray: 5 11;
  animation: dmFlowMove 1.6s linear infinite;
  pointer-events: none;
}
.dm-flow-dash.rev { stroke: #9e4030; animation-direction: reverse; }
@keyframes dmFlowMove { to { stroke-dashoffset: -16; } }
.dm-flow-node-src { fill: #6b6357; }
.dm-flow-node-theme.in  { fill: #386c32; }
.dm-flow-node-theme.out { fill: #9e4030; }
.dm-flow-src-label { font-size: 15px; font-weight: 800; fill: #2d2a26; }
.dm-flow-src-sum { font-size: 12px; font-weight: 700; }
.dm-flow-src-sum.in  { fill: #386c32; }
.dm-flow-src-sum.out { fill: #9e4030; }
.dm-flow-theme-label { font-size: 13px; font-weight: 700; fill: #2d2a26; cursor: pointer; }
.dm-flow-theme-label:hover { fill: var(--primary); }
.dm-flow-theme-amt { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-flow-theme-amt.in  { fill: #386c32; }
.dm-flow-theme-amt.out { fill: #9e4030; }
.dm-flow-key {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  border-radius: 999px; padding: 2px 10px; margin-right: 4px;
}
.dm-flow-key--in  { background: #edf3ec; color: #346538; }
.dm-flow-key--out { background: #f8ece8; color: #9e4030; }

/* ─────────────────────────────────────────────
   PR2 — 가시성 3종 (2026-07-12, 토론 판정 C 이식분)
   ①가격 격상 ②등락 필 셀 ③20일 스파크라인 + 라이브 도트
───────────────────────────────────────────── */
/* ① 현재가 — 숫자가 주인공 (16px 볼드 tabular) */
.data-table td.price-row {
  font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  table.mobile-cards tbody td.price-row { font-size: 16px; font-weight: 700; }
}
/* ② 등락률 — 글자색 → 면적(필 셀). up/dn 클래스는 applyQuote 계약 그대로 */
.data-table td.change-row {
  font-weight: 700; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
/* 글자색은 --up/--dn 토큰 통일 (audit 드리프트 지적 반영) — 배경 틴트가 면적 신호 담당 */
.data-table td.change-row.up { background: #fdecea; color: var(--up); }
.data-table td.change-row.dn { background: #e8f1fb; color: var(--dn); }
/* ③ 20일 스파크라인 — price_history 슬라이스, 가격 관례색(상승 빨강/하락 파랑) */
.spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark.up polyline { stroke: #c0392b; }
.spark.dn polyline { stroke: #1a6dad; }
.spark { opacity: .9; vertical-align: middle; }
/* 라이브 도트 — 실시간 갱신 활성 신호 (배지에 내용 있을 때만) */
.live-quote-badge:not(:empty)::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: #16a34a; margin-right: 5px;
  vertical-align: 0;
  animation: liveDot 2s ease-in-out infinite;
}
@keyframes liveDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.dm-heatmap-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2px;
}
.dm-heatmap-grid {
  display: grid;
  grid-template-columns: 168px repeat(18, minmax(38px, 1fr)) 60px;
  gap: 0;
  background: var(--dm-card-bg);
  min-width: 880px;
  border: 1px solid var(--dm-border);
  border-radius: 8px;
  overflow: hidden;
}
/* 셀 — 기본 */
.dm-cell {
  background: var(--dm-zero);
  height: 30px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  color: var(--dm-text);
  cursor: default;
  transition: outline 0.1s;
  user-select: none;
  border-right: 1px solid #f3efe7;
  border-bottom: 1px solid #f3efe7;
}
.dm-cell:hover {
  outline: 2px solid var(--dm-accent);
  outline-offset: -2px;
  cursor: pointer;
  z-index: 2;
}
/* 헤더 (W-17 ~ W-0 + 평균) */
.dm-cell.week-header {
  font-size: 10px;
  font-weight: 600;
  color: var(--dm-text-soft);
  background: var(--dm-row-label);
  height: 26px;
  border-bottom: 1px solid var(--dm-divider);
  cursor: default;
}
.dm-cell.week-header:hover { outline: none; }
.dm-cell.week-header.first {
  color: var(--dm-text);
  font-weight: 700;
}
/* 슈퍼테마 라벨 (좌측 1열) — 클릭 시 /stocks?super_theme= 진입 */
.dm-cell.theme-label {
  justify-content: flex-start;
  padding-inline: 12px;
  background: var(--dm-row-label);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dm-text);
  cursor: pointer;
  gap: 6px;
  border-right: 1px solid var(--dm-divider);
}
.dm-cell.theme-label:hover {
  outline: none;
  background: #ece4d2;
  color: var(--dm-accent);
}
.dm-cell.theme-label:hover .dm-theme-arrow {
  opacity: 1;
  transform: translateX(2px);
}
.dm-theme-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  width: 16px; text-align: center;
}
.dm-theme-text { flex: 1; }
.dm-theme-count {
  font-size: 10.5px;
  color: var(--dm-text-mute);
  font-weight: 400;
  margin-left: 2px;
}
.dm-theme-arrow {
  font-size: 12px;
  color: var(--dm-accent);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.12s, transform 0.12s;
  margin-left: 2px;
}
/* 빈 셀 (데이터 부족) */
.dm-cell.cell-empty {
  background: #fbf9f3;
  color: #c9c2b6;
}
/* 평균 칼럼 */
.dm-cell.avg-col {
  font-weight: 700;
  background: var(--dm-avg-col-bg);
  border-left: 2px solid var(--dm-divider);
}
.dm-cell.week-header.avg-col {
  background: var(--dm-avg-col-bg);
  color: var(--dm-text);
  font-weight: 700;
}

/* 툴팁 — warm dark tone */
.dm-tooltip {
  position: absolute;
  background: #2d2a26; color: #f5f1e8;
  font-size: 12px; line-height: 1.55;
  padding: 10px 13px; border-radius: 8px;
  pointer-events: none;
  z-index: 1000;
  max-width: 280px;
  box-shadow: 0 6px 20px rgba(40, 30, 20, 0.28);
  border: 1px solid #3d3a35;
}
.dm-tooltip strong { color: #f0c987; }
.dm-tooltip ul { margin: 6px 0 0; padding: 0; list-style: none; }
.dm-tooltip li {
  font-size: 11.5px; color: #d8d3c7;
  padding: 1px 0;
  font-variant-numeric: tabular-nums;
}
.dm-tooltip li .dm-pct-up   { color: #a8d49a; font-weight: 600; }
.dm-tooltip li .dm-pct-down { color: #e89d8a; font-weight: 600; }

/* 범례 — 색 단계 */
.dm-legend {
  margin-top: 14px;
  font-size: 11.5px; color: var(--dm-text-soft);
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.dm-legend-cell {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10.5px;
  border: 1px solid var(--dm-border);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ─── Phase 2 — 슈퍼테마별 자본 흐름 종합표 ─────────────────────────── */
.dm-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--dm-border);
  border-radius: 8px;
  background: var(--dm-card-bg);
}
.dm-flow-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dm-flow-table thead { background: var(--dm-row-label); }
.dm-flow-table th {
  padding: 10px 12px;
  font-weight: 600;
  font-size: 11px;
  color: var(--dm-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--dm-divider);
}
.dm-flow-table th.th-num { text-align: right; }
.dm-flow-table th.th-theme { text-align: left; padding-left: 14px; }
.dm-flow-table th.th-signal { text-align: center; }
.dm-flow-table th.th-treasury { color: var(--dm-text-mute); font-weight: 500; }
.dm-flow-table .dm-th-sub {
  font-size: 9px; color: var(--dm-text-mute);
  font-weight: 400; letter-spacing: 0; text-transform: none;
}
.dm-flow-table tbody tr {
  border-bottom: 1px solid #f3efe7;
  transition: background 0.1s;
}
.dm-flow-table tbody tr:last-child { border-bottom: none; }
.dm-flow-table tbody tr:hover { background: #faf6ee; }
.dm-flow-table td {
  padding: 11px 12px;
  color: var(--dm-text);
}
.dm-flow-table td.td-theme {
  font-weight: 600;
  padding-left: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.dm-flow-table td.td-theme .dm-theme-icon { margin-right: 4px; }
.dm-flow-table td.td-theme:hover { color: var(--dm-accent); }
.dm-flow-table td.td-theme:hover .dm-theme-arrow { opacity: 1; }
.dm-flow-table td.td-num { text-align: right; white-space: nowrap; }
.dm-flow-table td.td-signal { text-align: center; }
.dm-flow-table td.td-treasury {
  text-align: right;
  color: var(--dm-text-mute);
  font-style: italic;
  font-size: 11px;
}
/* 한국식 표기 — 글로벌 --up/--dn 변수 재사용 (대시보드·종합표 톤 통일) */
.dm-flow-table td.td-num.up    { color: var(--up); font-weight: 600; }
.dm-flow-table td.td-num.down  { color: var(--dn); font-weight: 600; }
.dm-flow-table td.td-num.zero  { color: var(--dm-text-mute); }

/* 신호 뱃지 */
.dm-sig-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dm-sig-accumulation { background: #e9f3e0; color: #3a6a32; }
.dm-sig-divergence   { background: #fdf2dd; color: #92602a; }
.dm-sig-neutral      { background: #f0ece2; color: var(--dm-text-soft); }
.dm-sig-distribution { background: #f7e3d8; color: #99432f; }

@media (max-width: 768px) {
  .dm-heatmap-grid {
    grid-template-columns: 116px repeat(18, 32px) 50px;
    min-width: 740px;
  }
  .dm-cell { font-size: 10px; height: 28px; }
  .dm-cell.theme-label { font-size: 11px; padding-inline: 8px; gap: 4px; }
  .dm-theme-icon { font-size: 12px; width: 14px; }
  .dm-section { padding: 14px; }
  .dm-section-head h2 { font-size: 14px; }
  .dm-flow-table { min-width: 760px; font-size: 11px; }
  .dm-flow-table th, .dm-flow-table td { padding: 8px 8px; }
  .dm-flow-table td.td-theme { padding-left: 10px; }
}

/* ─────────────────────────────────────────────
   2026-07-02 대시보드 정보 구조 재편 (B+ PR1)
   hero 시장 온도 스트립 · 관리자 도구 바 · 공지 1줄 배너 ·
   실측 성과 탭 · 관찰·수급 그룹 · 뉴스 더보기
───────────────────────────────────────────── */

/* hero 하단 시장 온도 스트립 — 구 온도계 섹션 흡수 */
.hero-sentiment-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-light);
  font-size: 12px; color: var(--text-muted);
}
.hss-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hss-item strong { color: var(--text); }

/* 관리자 도구 바 — 흩어져 있던 운영 버튼 집결 */
.admin-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 10px 14px;
  background: #fff; border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.admin-toolbar-label {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  margin-right: 4px; white-space: nowrap;
}
.admin-toolbar .test-result { font-size: 11px; }
.admin-toolbar .test-result:empty { display: none; }

/* 공지 1줄 배너 */
.notice-line {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 9px 14px;
  background: #fff; border: 1px solid var(--border-light);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  font-size: 13px; color: var(--text);
  transition: background .12s;
}
.notice-line:hover { background: var(--primary-pale); }
.notice-line-tag { font-weight: 700; font-size: 12px; color: var(--primary); flex-shrink: 0; }
.notice-line-date { font-size: 12px; color: #9ca3af; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.notice-line-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-line-more { margin-left: auto; font-size: 12px; color: #9ca3af; flex-shrink: 0; }

/* 실측 성과 탭 (신호 달성률 ↔ EOD 성과) */
.perf-merged > .dash-card { margin-bottom: 0; }
.perf-tabs { display: inline-flex; gap: 4px; margin-left: auto; }
.perf-tab {
  padding: 5px 12px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  transition: background .12s, color .12s;
}
.perf-tab:hover { background: #f3f4f6; }
.perf-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 관찰·수급 그룹 — 기본 접힘 details */
.observe-group > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text);
}
.observe-group > summary::-webkit-details-marker { display: none; }
.observe-group .og-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.observe-group .og-toggle { margin-left: auto; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.observe-group-body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.observe-group-body .dash-card,
.observe-group-body .section { margin-bottom: 0; }

@media (max-width: 768px) {
  .observe-group .og-sub { white-space: normal; }
  .notice-line-title { white-space: normal; }
}

/* ── 3존 구조 (B+ PR2) — 서브 네비 · 존 라벨 · 자산 통합 카드 ── */
.dash-subnav {
  position: sticky; top: 54px; z-index: 90;
  display: flex; align-items: center; gap: 6px;
  margin: 0 -4px 14px; padding: 8px 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dash-subnav::-webkit-scrollbar { display: none; }
.subnav-link {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.subnav-link:hover { background: #f3f4f6; }
.subnav-link.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.dash-zone { scroll-margin-top: 108px; }
.zone-label {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 12px;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .2px;
}
.zone-label::after { content: ""; flex: 1; height: 1px; background: var(--border-light); }

/* 자산 통합 카드 서브 헤딩 */
.asset-subhead {
  margin: 18px 0 10px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.asset-merged .pf-hero { margin-bottom: 0; }

/* ── B+ PR3 — 세리프 디스플레이 타이포 (헤드라인만, 본문·숫자는 산세리프 유지) ── */
.dash-hero-title,
.dash-greet-title,
.section-title h2,
.asset-subhead {
  font-family: 'Noto Serif KR', 'Noto Sans KR', 'Apple SD Gothic Neo', serif;
  letter-spacing: -0.01em;
}

/* ── C안 PR③ (2026-07-12) — reduced-motion 전역 폴백 (animation-systems 표준: 콘텐츠는 보이게, 모션만 즉시 상태로) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}