/* AMTI causal-timeline — SVG 차트 (외부 라이브러리 0) */

.ts-status {
  margin: 14px 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-dim);
  min-height: 20px;
}
.ts-status.err { color: var(--risk, #E45858); }

.ts-summary {
  margin: 10px 0 20px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ts-meta { color: var(--text-dim); font-size: 13px; }
.ts-meta .dot { margin: 0 8px; color: var(--text-mute); }

.ts-chart {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  margin: 10px 0;
  overflow-x: auto;
}
.ts-chart svg { display: block; width: 100%; height: auto; }

.ts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .ts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .ts-grid { grid-template-columns: repeat(3, 1fr); }
}

.ts-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
}
.ts-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.ts-card-name {
  font-size: 12px; letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.ts-card-last {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--text);
}
.ts-card-delta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
}
.ts-card-delta.up   { color: var(--good, #4DA86E); }
.ts-card-delta.down { color: var(--risk, #E45858); }

.ts-axis { stroke: var(--text-mute); stroke-width: 1; }
.ts-grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.ts-line { fill: none; stroke: var(--gold, #C9A227); stroke-width: 2; }
.ts-line-secondary { fill: none; stroke: var(--info, #4F8FE0); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ts-dot { fill: var(--gold, #C9A227); }
.ts-dot.infl { fill: var(--risk, #E45858); }
.ts-label { fill: var(--text-mute); font-size: 10px; font-family: var(--mono); }
.ts-tooltip {
  pointer-events: none;
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  position: absolute;
  white-space: nowrap;
  z-index: 10;
}

.ts-delta-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 12px;
}
.ts-delta-row.head {
  color: var(--text-mute);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-sans, inherit);
}
.ts-delta-cell { text-align: right; }
.ts-delta-cell.label { text-align: left; color: var(--text-dim); }
.ts-delta-cell.up   { color: var(--good, #4DA86E); }
.ts-delta-cell.down { color: var(--risk, #E45858); }

.ts-infl-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr 1fr 80px;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 12px;
}
.ts-infl-row.up   .pct { color: var(--good, #4DA86E); }
.ts-infl-row.down .pct { color: var(--risk, #E45858); }