/* ============================================================
   LUKE demo-kit — 데모 크롬 스타일 (토큰 전용, 하드코딩 hex/px 금지)
   근거: foxnail 디자인 SSOT (한낮 light + Sharp, 애저 #2f6bff)
   대상: #og-demo-controls / #og-demo-extra / 이벤트 로그의 "데모 섹션 콘텐츠"
   그리드 자신(.og-container)은 코어 소관 — 여기서 손대지 않음(host-isolation 보존).
   ============================================================ */

/* ---- 컨트롤 패널 (#og-demo-controls) ---- */
.lk-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  align-items: flex-end;
  padding: var(--space-4, 16px);
  background: var(--surface, #fff);
  border: var(--bw, 1px) solid var(--border, #dae0e9);
  border-radius: var(--radius-md, 3px);
}
.lk-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 0;
}
.lk-control > .lk-label {
  font-size: var(--fs-xs, .78rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--tracking-wide, .04em);
  text-transform: uppercase;
  color: var(--brand-strong, #1f4fd6);
}

/* 세그먼트 토글 (aria-pressed) */
.lk-seg {
  display: inline-flex;
  border: var(--bw-emph, 2px) solid var(--border-strong, #c0c8d4);
  border-radius: var(--radius-md, 3px);
  overflow: hidden;
}
.lk-seg > button {
  appearance: none;
  border: 0;
  background: var(--surface, #fff);
  color: var(--text, #111520);
  font: inherit;
  font-size: var(--fs-sm, .875rem);
  min-height: 44px;              /* 터치 타깃 */
  padding: 0 var(--space-3, 12px);
  cursor: pointer;
  transition: background var(--motion-fast, 120ms) var(--ease, cubic-bezier(.2,0,0,1));
}
.lk-seg > button + button { border-left: var(--bw, 1px) solid var(--border, #dae0e9); }
.lk-seg > button[aria-pressed="true"] {
  background: var(--brand, #2f6bff);
  color: var(--on-brand, #fff);
}
.lk-seg > button:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.lk-seg > button[aria-pressed="true"]:hover { background: var(--brand-strong, #1f4fd6); }
.lk-seg > button:focus-visible {
  outline: var(--bw-emph, 2px) solid var(--focus, #2f6bff);
  outline-offset: 2px;
}

/* ---- 정직 플래그 (⚠ 라이브) ---- */
.lk-flag {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-md, 3px);
  font-size: var(--fs-sm, .875rem);
  border: var(--bw-emph, 2px) solid transparent;
  min-height: 44px;
}
.lk-flag[data-state="ok"] {
  color: var(--muted, #59616f);
  border-color: var(--border, #dae0e9);
  background: var(--surface-2, #e3e8ef);
}
.lk-flag[data-state="warn"] {
  color: var(--warn, #b7770f);
  border-color: var(--warn, #b7770f);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.lk-flag[data-state="danger"] {
  color: var(--danger, #d23b32);
  border-color: var(--danger, #d23b32);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.lk-flag .lk-flag-icon { flex: 0 0 auto; width: 1.1em; height: 1.1em; }

/* ---- 추가 패널 (#og-demo-extra): 범례 / 컬러바 ---- */
.lk-extra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5, 24px);
  align-items: center;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-2, #e3e8ef);
  border: var(--bw, 1px) solid var(--border, #dae0e9);
  border-radius: var(--radius-md, 3px);
  font-size: var(--fs-sm, .875rem);
  color: var(--text, #111520);
}
.lk-extra-title {
  font-size: var(--fs-xs, .78rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--tracking-wide, .04em);
  text-transform: uppercase;
  color: var(--muted, #59616f);
}

/* 범례 항목: 색 + 형태 + 라벨 (삼중부호화) */
.lk-legend { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); align-items: center; }
.lk-legend-item { display: inline-flex; align-items: center; gap: var(--space-2, 8px); }
.lk-legend-item .lk-glyph { flex: 0 0 auto; width: 1.15em; height: 1.15em; }
.lk-legend-item .lk-legend-range { color: var(--muted, #59616f); font-variant-numeric: tabular-nums; }

/* 컬러바: 명도 램프 + 눈금(틱) — 눈금 없는 램프 단독 금지 */
.lk-colorbar { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 12rem; }
.lk-colorbar-ramp {
  display: flex;
  height: var(--space-4, 16px);
  border: var(--bw, 1px) solid var(--border-strong, #c0c8d4);
  border-radius: var(--radius-sm, 2px);
  overflow: hidden;
}
.lk-colorbar-ramp > i { flex: 1 1 0; display: block; }
.lk-colorbar-ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs, .78rem);
  color: var(--muted, #59616f);
  font-variant-numeric: tabular-nums;
}

/* provenance 배지 (무왜곡 = 배지 0) */
.lk-badges { display: inline-flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.lk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--fs-xs, .78rem);
  font-weight: var(--fw-semibold, 600);
  padding: 2px var(--space-2, 8px);
  border-radius: var(--radius-pill, 4px);
  border: var(--bw, 1px) solid var(--border-strong, #c0c8d4);
  background: var(--surface, #fff);
  color: var(--muted, #59616f);
  cursor: help;
}

/* 서사 카피 (재질 매트릭스 등) */
.lk-narrative {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-left: var(--bw-emph, 2px) solid var(--brand, #2f6bff);
  background: var(--surface, #fff);
  color: var(--text, #111520);
  font-size: var(--fs-md, 1rem);
  line-height: var(--lh-base, 1.7);
}
.lk-narrative b { color: var(--brand-strong, #1f4fd6); }

/* 스크린리더 전용 텍스트 등가 */
.lk-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 반응형: 768 이하 컨트롤 세로 스택, 480 이하 컬러바 풀폭 */
@media (max-width: 768px) {
  .lk-controls { gap: var(--space-2, 8px); }
  .lk-extra { gap: var(--space-3, 12px); }
}
@media (max-width: 480px) {
  .lk-colorbar { min-width: 100%; }
  .lk-legend { gap: var(--space-2, 8px); }
}

/* prefers-reduced-motion: 트랜지션 제거 */
@media (prefers-reduced-motion: reduce) {
  .lk-seg > button { transition: none; }
}

/* forced-colors: 형태·보더 생존 보장 */
@media (forced-colors: active) {
  .lk-seg > button[aria-pressed="true"] { forced-color-adjust: none; }
  .lk-flag { border-style: solid; }
}

/* ============================================================
   ECharts 연동 데모 — 차트 카드 · 프로비넌스 배지 · 텍스트 등가
   토큰만 사용(하드코딩 hex/px 최소, 폴백만 병기).
   ============================================================ */
.og-ec-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-4, 16px);
  background: var(--surface, #fff);
  border: var(--bw, 1px) solid var(--border, #dae0e9);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 1px 2px rgba(16, 22, 34, .04);
}
.og-ec-card-title {
  font-size: var(--fs-md, 1rem);
  font-weight: 600;
  color: var(--text, #111520);
  letter-spacing: -0.01em;
}
.og-ec-chart {
  width: 100%;
  min-height: 240px;
}
.og-ec-badges-row { min-height: 0; }
.og-ec-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  align-items: center;
}
.og-ec-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 2px var(--space-2, 8px);
  font-size: var(--fs-xs, .78rem);
  font-weight: 600;
  color: var(--warn-strong, #8a5a08);
  background: var(--warn-soft, #fdf4e3);
  border: var(--bw, 1px) solid var(--warn, #b7770f);
  border-radius: var(--radius-pill, 999px);
  cursor: help;
}
.og-ec-badge--ok {
  color: var(--muted, #59616f);
  background: var(--surface-2, #f6f8fb);
  border-color: var(--border, #dae0e9);
  font-weight: 500;
  cursor: default;
}
/* 스크린리더 전용 데이터표(시각 인코딩 텍스트 등가) */
.og-ec-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* 미니 대시보드(L2): extra 안 2~3 차트 그리드 */
.og-ec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4, 16px);
}
@media (forced-colors: active) {
  .og-ec-badge { forced-color-adjust: none; border-style: solid; }
}