/* jg-chart.css — 자금진단.com 공통 차트 컴포넌트 스타일 (Sprint167 → Sprint168 안정화)
 * Sprint168: 모든 --cf-* 토큰에 안전한 기본값을 두어(예: var(--cf-card, #ffffff))
 * 이 CSS가 아직 --cf-* 토큰을 정의하지 않은 페이지에 로드되어도 색이 깨지지 않도록 함.
 * (물론 assets/css/company-finance.css가 함께 로드되는 페이지에서는 그 값이 우선 적용됨)
 */
:root{
  --jg-up:#b91c1c;      /* 상승 — 사이트 전역 danger 톤과 통일 */
  --jg-down:#1d4ed8;    /* 하락 — 사이트 전역 accent 톤과 통일 */
}
html[data-theme="dark"],html.dark,body.dark{
  --jg-up:#fb7185;
  --jg-down:#60a5fa;
}

.jg-chart-wrap{
  background:var(--cf-card,#ffffff);border:1px solid var(--cf-line,#dbe3ee);
  border-radius:var(--cf-radius,18px);
  padding:18px 18px 14px;margin:14px 0;
  box-shadow:var(--cf-shadow,0 16px 45px rgba(15,23,42,.08));
}
.jg-chart-head{margin-bottom:10px}
.jg-chart-title{font-weight:900;font-size:16px;color:var(--cf-text,#0f172a)}
.jg-chart-subtitle{font-size:12.5px;color:var(--cf-muted,#64748b);margin-top:2px}

/* 요약 통계 스트립 */
.jg-chart-summary{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px;
}
.jg-chart-stat{
  background:var(--cf-soft,#eef6ff);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;
  min-width:0;
}
.jg-chart-stat-label{font-size:11px;color:var(--cf-muted,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jg-chart-stat-value{font-size:13.5px;font-weight:800;color:var(--cf-text,#0f172a)}
.jg-chart-stat-value.up{color:var(--jg-up)}
.jg-chart-stat-value.down{color:var(--jg-down)}

/* 기간 필터 — 최소 44px 터치 영역, 키보드 포커스 스타일, aria-pressed 상태 스타일 */
.jg-chart-filter{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.jg-chart-filter-btn{
  border:1px solid var(--cf-line,#dbe3ee);background:var(--cf-card,#ffffff);color:var(--cf-muted,#64748b);
  border-radius:999px;padding:10px 14px;min-height:44px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.jg-chart-filter-btn.active,
.jg-chart-filter-btn[aria-pressed="true"]{
  background:var(--cf-accent,#2563eb);border-color:var(--cf-accent,#2563eb);color:#fff;
}
.jg-chart-filter-btn:focus-visible,
.jg-chart-table-toggle:focus-visible{
  outline:2px solid var(--cf-accent,#2563eb);outline-offset:2px;
}

/* 차트 본체 */
.jg-chart-host{position:relative;width:100%}
.jg-chart-svg{width:100%;height:auto;display:block}
.jg-chart-grid{stroke:var(--cf-line,#dbe3ee);stroke-width:1;stroke-dasharray:2,3}
.jg-chart-axis-y{font-size:9.5px;fill:var(--cf-muted,#64748b)}
.jg-chart-axis-x{font-size:9.5px;fill:var(--cf-muted,#64748b)}
.jg-chart-area{fill:var(--cf-accent,#2563eb);opacity:.10}
.jg-chart-line{fill:none;stroke:var(--cf-accent,#2563eb);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.jg-chart-dot{fill:var(--cf-accent,#2563eb);stroke:var(--cf-card,#ffffff);stroke-width:1.5}
.jg-chart-hit{cursor:pointer}
.jg-chart-vol-bar{fill:var(--cf-accent2,#0f766e);opacity:.55}

/* 애니메이션 축소 환경 대응 */
@media (prefers-reduced-motion: reduce){
  .jg-chart-skeleton-bar{animation:none;background:var(--cf-soft,#eef6ff)}
}
.jg-chart-no-motion .jg-chart-line,
.jg-chart-no-motion .jg-chart-area{transition:none}

/* 툴팁 */
.jg-chart-tooltip{
  position:absolute;pointer-events:none;transform:translate(-50%,-100%);
  background:var(--cf-text,#0f172a);color:var(--cf-card,#ffffff);border-radius:10px;padding:8px 10px;
  font-size:11.5px;line-height:1.5;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.18);
  z-index:5;display:none;
}
.jg-chart-tooltip-t{font-weight:800;margin-bottom:2px}

/* 빈 상태 / 로딩 */
.jg-chart-empty{padding:34px 12px;text-align:center;color:var(--cf-muted,#64748b)}
.jg-chart-empty-icon{font-size:28px;margin-bottom:6px;opacity:.6}
.jg-chart-empty-text{font-size:13px}
.jg-chart-empty-inline{padding:24px 0;text-align:center;color:var(--cf-muted,#64748b);font-size:12.5px}
.jg-chart-skeleton{padding:10px 0}
.jg-chart-skeleton-bar{height:180px;border-radius:12px;background:linear-gradient(90deg,var(--cf-soft,#eef6ff) 25%,var(--cf-line,#dbe3ee) 37%,var(--cf-soft,#eef6ff) 63%);background-size:400% 100%;animation:jgChartShimmer 1.4s ease infinite}
.jg-chart-skeleton-text{margin-top:10px;text-align:center;color:var(--cf-muted,#64748b);font-size:12.5px}
@keyframes jgChartShimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* 표 대체 정보 */
.jg-chart-table-toggle{
  margin-top:8px;border:none;background:none;color:var(--cf-accent,#2563eb);font-size:12.5px;font-weight:800;
  cursor:pointer;padding:10px 4px;min-height:44px;
}
.jg-chart-table-host{margin-top:8px;overflow-x:auto}
.jg-chart-table{width:100%;border-collapse:collapse;font-size:12.5px}
.jg-chart-table-caption{caption-side:top;text-align:left;color:var(--cf-muted,#64748b);font-size:11.5px;padding-bottom:6px}
.jg-chart-table th,.jg-chart-table td{padding:7px 8px;border-bottom:1px solid var(--cf-line,#dbe3ee);text-align:left;color:var(--cf-text,#0f172a)}
.jg-chart-table th{color:var(--cf-muted,#64748b);font-weight:700;font-size:11.5px}
.jg-chart-table td.num{text-align:right;font-variant-numeric:tabular-nums}

/* 모바일 — 320/360/375/390px 폭에서 요약카드·필터 버튼이 밀리지 않도록 검토 */
@media (max-width:640px){
  .jg-chart-wrap{padding:14px 12px 12px;border-radius:16px}
  .jg-chart-summary{grid-template-columns:repeat(2,1fr)}
  .jg-chart-stat-value{font-size:13px}
  .jg-chart-title{font-size:14.5px}
  .jg-chart-hit{touch-action:pan-y}
}
@media (max-width:340px){
  .jg-chart-summary{grid-template-columns:1fr 1fr;gap:6px}
  .jg-chart-stat{padding:7px 8px}
  .jg-chart-filter-btn{padding:9px 11px;font-size:12px}
}