/* 시장 상태 카드 · 상태 배지 · 활성 DD 배지 · 프록시 라벨 · 스켈레톤. */

.cards {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.card-active { border-color: var(--accent); box-shadow: 0 0 0 2px #dce7f7; }
.card-error { background: #fdf6f6; }

.card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.card-select {
  font: inherit; font-size: 15px; font-weight: 700; color: var(--text);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted;
}
.card-select:hover { color: var(--accent); }
.card-line { margin: 4px 0; }
.error-msg { color: var(--status-error); }

/* 색만으로 구분하지 않는다 — 아이콘 + 텍스트 병기 (web/CLAUDE.md §9). */
.state-badge {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 2px 10px; margin: 0 0 8px; font-weight: 600; font-size: 13px;
}
.state-icon { font-size: 12px; }
.state-uptrend { color: var(--status-uptrend); }
.state-pressure { color: var(--status-pressure); }
.state-correction { color: var(--status-correction); }
.state-rally { color: var(--status-rally); }
.state-unknown { color: var(--status-unknown); }
.state-error { color: var(--status-error); }
.state-cell { display: inline-flex; gap: 4px; align-items: center; }

/* 활성 DD 배지 — 상태 배지에 묻히면 안 된다 (CHART.md §C4). */
.dd-badge {
  display: inline-flex; align-items: baseline; gap: 8px;
  border-radius: 8px; padding: 6px 12px; margin: 2px 0 8px;
  border: 2px solid currentColor; font-variant-numeric: tabular-nums;
}
.dd-badge-lg .dd-num { font-size: 18px; font-weight: 800; }
.dd-word { font-size: 12px; opacity: .85; }
.dd-good { color: var(--dd-good); background: #eaf6ef; }
.dd-warn { color: var(--dd-warn); background: #fdf3e3; }
.dd-bad { color: var(--dd-bad); background: #fceded; }
.dd-unknown { color: var(--status-unknown); background: #f1f3f5; }

.chip { font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid currentColor; }
.chip-warn { color: var(--status-pressure); }
/* 장중 진행 중 봉 (CHART.md §C8) — 점선 테두리 + ⏱ 문구로 확정 정보와 구분한다. */
.chip-live { color: var(--status-pressure); background: #fdf3e3; border-style: dashed; font-weight: 700; }

/* proxy_label이 온 시장에만 붙는다 (web/CLAUDE.md §6). */
.proxy-label {
  font-size: 11px; font-weight: 700; color: #6b3fa0;
  border: 1px dashed currentColor; border-radius: 999px; padding: 1px 8px;
}

.card-skeleton { min-height: 168px; }
.sk { background: #e7ebf1; border-radius: 6px; animation: sk 1.2s ease-in-out infinite; }
.sk-title { height: 18px; width: 45%; margin-bottom: 10px; }
.sk-badge { height: 34px; width: 65%; margin-bottom: 10px; }
.sk-line { height: 14px; width: 85%; margin-bottom: 8px; }
@keyframes sk { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }