/*
 * port-bizinfo 관리자 화면 스타일. 규칙과 이탈 기록의 SSOT는 docs/conventions/ui.md 다.
 *
 * 토큰은 2계층이다: Layer 1 `--p-*`(팔레트 원본, 색 리터럴은 이 블록에서만) →
 * Layer 2 시맨틱(컴포넌트가 참조하는 유일한 레이어). 값의 출처는 Portlogics 디자인 시스템
 * (DESIGN.md, 이 저장소 밖) — port-mailroom `src/public/assets/app.css`의 팔레트를 그대로
 * 미러한다(같은 조직 제품군은 같은 토큰을 쓴다. 새 팔레트를 만들지 않는다).
 *
 * 폰트는 CDN에서 받지 않는다 — 제품 페이지에 외부 CDN을 물리면 런타임 외부 의존이 생기고
 * CSP(`default-src 'self'`)를 넓혀야 한다. 선언만 두고 설치된 경우에만 적용시킨다.
 * 다크모드는 지원하지 않는다 — `color-scheme: light`를 명시한다.
 */

/* ------------------------------------------------------------------ */
/* Layer 1 — primitive palette (컴포넌트에서 직접 사용 금지)          */
/* ------------------------------------------------------------------ */
:root {
  /* primary (trust blue H=260.5) */
  --p-primary-50: oklch(0.97 0.02 260.5);
  --p-primary-100: oklch(0.93 0.045 260.5);
  --p-primary-400: oklch(0.68 0.185 260.5);
  --p-primary-500: oklch(0.604 0.215 260.5);
  --p-primary-600: oklch(0.52 0.205 260.5);
  --p-primary-700: oklch(0.42 0.175 260.5);
  --p-primary-800: oklch(0.32 0.13 260.5);

  /* neutral (cool-tinted, 브랜드와 같은 H) */
  --p-neutral-50: oklch(0.98 0.005 260.5);
  --p-neutral-100: oklch(0.94 0.01 260.5);
  --p-neutral-200: oklch(0.88 0.012 260.5);
  --p-neutral-300: oklch(0.8 0.015 260.5);
  --p-neutral-400: oklch(0.68 0.015 260.5); /* 텍스트 금지 — 2.88:1 */
  --p-neutral-500: oklch(0.56 0.015 260.5); /* 텍스트 최소선 — 4.65:1 */
  --p-neutral-700: oklch(0.34 0.01 260.5);
  --p-neutral-800: oklch(0.24 0.008 260.5);
  --p-neutral-900: oklch(0.16 0.006 260.5);

  /* semantic — bg/border/text 3쌍은 대비가 검증된 조합이다 */
  --p-success: oklch(0.55 0.15 145);
  --p-success-bg: oklch(0.96 0.03 145);
  --p-success-border: oklch(0.65 0.13 145);
  --p-success-text: oklch(0.3 0.12 145);
  --p-warning: oklch(0.68 0.16 78);
  --p-warning-bg: oklch(0.96 0.04 78);
  --p-warning-border: oklch(0.78 0.14 78);
  --p-warning-text: oklch(0.38 0.13 78);
  --p-danger: oklch(0.55 0.21 25);
  --p-danger-bg: oklch(0.96 0.04 25);
  --p-danger-border: oklch(0.7 0.18 25);
  --p-danger-text: oklch(0.38 0.17 25);
  --p-danger-hover: oklch(0.48 0.21 25);
  --p-danger-active: oklch(0.42 0.21 25);
}

/* ------------------------------------------------------------------ */
/* Layer 2 — semantic tokens (컴포넌트가 참조하는 유일한 레이어)      */
/* ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  --surface-app: var(--p-neutral-50);
  --surface-card: #ffffff;
  --surface-subtle: var(--p-neutral-100);
  --surface-hover: var(--p-neutral-100);

  --border-default: var(--p-neutral-200);
  --border-strong: var(--p-neutral-300);

  --text-primary: var(--p-neutral-900);
  --text-body: var(--p-neutral-800);
  --text-secondary: var(--p-neutral-500);
  /* placeholder는 텍스트다 — neutral-400(2.88:1)은 텍스트 금지선 아래. neutral-500(4.65:1)로 */
  --text-placeholder: var(--p-neutral-500);
  /* 비활성 요소 전용 — 대비 규정 면제 대상(버튼·입력의 disabled 상태) */
  --text-disabled: var(--p-neutral-400);
  --text-error: var(--p-danger);

  --brand: var(--p-primary-500);
  --brand-hover: var(--p-primary-600);
  --brand-active: var(--p-primary-700);
  --brand-press: var(--p-primary-800);
  --brand-50: var(--p-primary-50);
  --brand-100: var(--p-primary-100);
  --brand-focus-ring: oklch(0.604 0.215 260.5 / 0.15);

  --danger-solid: var(--p-danger);
  --danger-solid-hover: var(--p-danger-hover);
  --danger-solid-active: var(--p-danger-active);

  --illustration: var(--p-neutral-300);

  --callout-info-bg: var(--brand-50);
  --callout-info-border: var(--p-primary-400);
  --callout-info-text: var(--p-primary-800);
  --callout-success-bg: var(--p-success-bg);
  --callout-success-border: var(--p-success-border);
  --callout-success-text: var(--p-success-text);
  --callout-warning-bg: var(--p-warning-bg);
  --callout-warning-border: var(--p-warning-border);
  --callout-warning-text: var(--p-warning-text);
  --callout-danger-bg: var(--p-danger-bg);
  --callout-danger-border: var(--p-danger-border);
  --callout-danger-text: var(--p-danger-text);

  --badge-success-bg: var(--p-success-bg);
  --badge-success-text: var(--p-success-text);
  --badge-warning-bg: var(--p-warning-bg);
  --badge-warning-text: var(--p-warning-text);
  --badge-danger-bg: var(--p-danger-bg);
  --badge-danger-text: var(--p-danger-text);
  --badge-brand-bg: var(--brand-100);
  --badge-brand-text: var(--brand-hover);
  --badge-neutral-bg: var(--p-neutral-100);
  /* neutral-500 on neutral-100 실효 약 4.1:1(AA 미달) — neutral-700로 */
  --badge-neutral-text: var(--p-neutral-700);

  --shadow-1:
    0 0 0 1px oklch(0.2 0.01 260.5 / 0.03), 0 1px 2px oklch(0.2 0.01 260.5 / 0.04),
    0 4px 12px oklch(0.2 0.01 260.5 / 0.04);

  --duration-fast: 100ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  --font-sans:
    'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI',
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ */
/* Layer 1.5 — dimension tokens (spacing · type · layout)             */
/* 값의 출처는 기존 리터럴이다 — 이 커밋은 리터럴을 토큰으로 회수만 한다(시각 변화 0) */
/* ------------------------------------------------------------------ */
:root {
  /* spacing — 4px 그리드 */
  --space-05: 0.125rem;
  --space-1: 0.25rem;
  --space-15: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* type */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.5rem;
  /* 리포트 등급 상자 한 자리에만 쓴다 — 문서에서 제일 먼저 읽혀야 하는 값이다 */
  --text-2xl: 2rem;

  --leading-tight: 1.4;
  --leading-snug: 1.5;
  --leading-normal: 1.6;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* layout */
  --sidebar-w: 15rem;
  --topbar-h: 3.5rem;
  --row-h: 2.25rem;
  --control-h: 2.25rem;
  --control-h-sm: 1.875rem;
  --content-max: 90rem;

  --radius-pill: 9999px;
  --shadow-0: none;
  --duration-base: 150ms;

  /* ui.md §9 강제 */
  --label-size: var(--text-2xs);
  --label-weight: var(--weight-bold);
  --label-color: var(--text-secondary);
  --value-size: var(--text-sm);
  --value-color: var(--text-body);
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--leading-normal);
  word-break: keep-all;
  overflow-wrap: break-word;
  background: var(--surface-app);
  color: var(--text-body);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  color: var(--text-primary);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* Shell — 좌측 고정 nav + 우측 콘텐츠                                 */
/* ------------------------------------------------------------------ */
.shell {
  display: flex;
  min-height: 100dvh;
}

.sidebar {
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: var(--surface-card);
  padding: var(--space-5) var(--space-3);
}

.sidebar-brand {
  padding: var(--space-2) var(--space-3) var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: var(--space-4);
}

.nav-group-title {
  padding: var(--space-1) var(--space-3);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--label-color);
}

/* 링크(활성 화면)와 비활성 항목(준비 중) 둘 다 이 클래스를 쓴다 — 위치가 흔들리면 안 된다 */
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text-body);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default);
}

a.nav-item:hover {
  background: var(--surface-hover);
}

a.nav-item[aria-current='page'] {
  background: var(--brand-50);
  color: var(--brand-hover);
  font-weight: var(--weight-semibold);
}

.main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-card);
  padding: 0.875rem var(--space-6);
}

.topbar h1 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.content {
  flex: 1 1 auto;
  padding: var(--space-6);
  max-width: var(--content-max);
}

/* ------------------------------------------------------------------ */
/* Card                                                               */
/* ------------------------------------------------------------------ */
.card {
  margin-bottom: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-1);
  padding: var(--space-6);
}

.card:last-child {
  margin-bottom: 0;
}

.card-header {
  margin-bottom: var(--space-5);
}

.card-header h2 {
  margin-bottom: var(--space-15);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.card-header p {
  max-width: 48rem;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

.btn-sm {
  padding: var(--space-15) var(--space-3);
  font-size: var(--text-xs);
}

.btn-primary {
  background: var(--brand-hover);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--brand-active);
}

.btn-primary:active {
  background: var(--brand-press);
  transform: scale(0.98);
}

.btn-secondary {
  border: 1.5px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-body);
}

.btn-secondary:hover {
  background: var(--surface-subtle);
}

.btn-danger {
  background: var(--danger-solid);
  color: #ffffff;
}

.btn-danger:hover {
  background: var(--danger-solid-hover);
}

.btn-danger:active {
  background: var(--danger-solid-active);
  transform: scale(0.98);
}

/*
 * 흰 아웃라인(#ffffff)이 --surface-card(#ffffff) 배경 위에서 안 보이던 반전 버그 수정.
 * 브랜드색 아웃라인 + 포커스 링으로 통일 — .input·.select·사이드바 링크도 같은 규칙을 쓴다.
 */
.btn-primary:focus-visible,
.btn-danger:focus-visible,
.input:focus-visible,
.select:focus-visible,
a.nav-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--brand-focus-ring);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 줄바꿈 없음(ui.md §10) — 버튼 그룹이 두 줄로 갈라지면 칸 폭이 내용에 흔들린다.
   다 안 들어가면 가로 스크롤로(넘칠 만큼 버튼이 쌓이는 화면은 없다 — 방어적 처리) */
.actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
}

/* 조회 폼의 실행 버튼 줄 — 폼 우측에 붙인다(입력 격자의 오른쪽 끝과 시선을 맞춘다) */
.actions--end {
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Tabstrip — 한 결과 안에서 대상을 바꿔 가며 보는 가로 탭            */
/* (사이드바 .nav-item 은 화면 이동, 이쪽은 같은 화면 안의 대상 전환) */
/* ------------------------------------------------------------------ */
.tabstrip {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-4);
}

.tabstrip-item {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.tabstrip-item:hover {
  color: var(--text-body);
}

.tabstrip-item[aria-selected='true'] {
  border-bottom-color: var(--brand);
  color: var(--brand-hover);
  font-weight: var(--weight-semibold);
}

.tabstrip-item[aria-busy='true'] {
  color: var(--text-disabled);
  cursor: progress;
}

.tabstrip-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* 격자 페이지 넘김 — id 규약(-prev·-next·-range)은 console-core.js의
   renderPagingControls()와의 계약이라 바꾸지 않는다. 감싸는 마크업만 grid로 정리 */
.pager {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.pager-range {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ------------------------------------------------------------------ */
/* Inline text primitives                                             */
/* ------------------------------------------------------------------ */
.num {
  font-variant-numeric: tabular-nums;
}

/*
 * 주요경영지표만 숫자를 오른쪽에 붙인다 — 결산 회차를 가로로 훑으며 자릿수를 비교하는
 * 표라 소수점이 세로로 맞아야 읽힌다. `.num`은 시각·소요처럼 비교하지 않는 칸에도 쓰여
 * 전역으로 올리면 이력 표의 정렬까지 바뀐다.
 */
#detail-panel-indicators .table th.num,
#detail-panel-indicators .table td.num {
  text-align: right;
}

/* 회계기준·재무구분 필터 블록과 표 사이 — 필터 아래 힌트(.hint)가 위쪽 여백은 이미 갖고
   있어서 표 쪽만 띄운다. */
#detail-panel-indicators .table-scroll {
  margin-top: var(--space-4);
}

.hint {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------ */
/* Callout — 인라인 알림 배너                                          */
/* ------------------------------------------------------------------ */
.callout {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4) 1.125rem;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.callout strong {
  display: block;
  margin-bottom: 0.15rem;
  color: inherit;
}

.callout[data-tone='info'] {
  background: var(--callout-info-bg);
  border-color: var(--callout-info-border);
  color: var(--callout-info-text);
}

.callout[data-tone='success'] {
  background: var(--callout-success-bg);
  border-color: var(--callout-success-border);
  color: var(--callout-success-text);
}

.callout[data-tone='warning'] {
  background: var(--callout-warning-bg);
  border-color: var(--callout-warning-border);
  color: var(--callout-warning-text);
}

.callout[data-tone='danger'] {
  background: var(--callout-danger-bg);
  border-color: var(--callout-danger-border);
  color: var(--callout-danger-text);
}

/* ------------------------------------------------------------------ */
/* Badge — 상태 표시. 색은 보조(색약 접근성) — 텍스트가 항상 의미를 진다  */
/* ------------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-05) 0.625rem;
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

.badge[data-status='ACTIVE'],
.badge[data-status='ACCEPTED'] {
  background: var(--badge-success-bg);
  color: var(--badge-success-text);
}

.badge[data-status='PENDING'],
.badge[data-status='OPEN'] {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-text);
}

.badge[data-status='DISABLED'],
.badge[data-status='REVOKED'] {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-text);
}

/* 만료는 별도 상태값이 아니라 화면이 계산한 파생 표시다(ui.md — derived, not a status) */
.badge[data-status='EXPIRED'] {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

.badge[data-role='VIEWER'] {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

.badge[data-role='ADMIN'] {
  background: var(--badge-brand-bg);
  color: var(--badge-brand-text);
}

/* ------------------------------------------------------------------ */
/* Empty / loading                                                    */
/* ------------------------------------------------------------------ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-8) 0;
  text-align: center;
}

.empty-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}

.empty-desc {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.spinner {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border: 2px solid var(--border-default);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 750ms linear infinite;
}

@keyframes spin {
  to {
    rotate: 360deg;
  }
}

/* ------------------------------------------------------------------ */
/* Table                                                              */
/* ------------------------------------------------------------------ */
/*
 * 열 폭 고정 — table-layout: fixed + <colgroup>(ui.md §4·§10). CSS Grid로 재작성하지 않는다:
 * <th scope="col"> 스크린리더 관계와 인쇄 display: table-header-group을 그대로 쓰면서
 * 같은 목표(열 위치가 내용에 안 흔들림)를 더 적은 변경으로 만족한다.
 */
.table-scroll {
  max-height: 34rem;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.table th,
.table td {
  height: var(--row-h);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table th {
  background: var(--surface-subtle);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--label-color);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: var(--surface-hover);
}

/* <colgroup><col class="col-*"> 폭 유틸리티 — table-layout: fixed와 짝. 폭을 안 준 열은
   남는 폭을 나눠 갖는다(가변 텍스트 열) */
.col-time {
  width: 9.5rem;
}

.col-brn {
  width: 7rem;
}

/* B/L 번호(ADR-0008) — BRN보다 자릿수가 가변적이라 폭을 조금 더 준다 */
.col-bl {
  width: 8.5rem;
}

.col-badge {
  width: 6rem;
}

.col-badge-lg {
  width: 7rem;
}

.col-ms {
  width: 5.5rem;
}

.col-short {
  width: 4rem;
}

/* 시각 없는 날짜(YYYY-MM-DD) 전용 — col-time(9.5rem)은 시:분까지 담는 폭이라 과하다 */
.col-date {
  width: 6.75rem;
}

/* 지표·항목 이름 열 — 가장 긴 라벨(매출액영업이익률, 8자)이 잘리지 않는 폭 */
.col-metric {
  width: 9.5rem;
}

/* NICE 기본정보 항목명 열 — 라벨 대부분이 들어가는 폭. 가장 긴 라벨
   ((구)우편번호(6자리), 12자)은 말줄임되고 전체값은 title로 남는다(ui.md §10) */
.col-field {
  width: 11rem;
}

.col-mid {
  width: 5rem;
}

.col-actions-sm {
  width: 8rem;
}

.col-actions-md {
  width: 10rem;
}

.col-actions-lg {
  width: 14rem;
}

/* ------------------------------------------------------------------ */
/* Forms                                                              */
/* ------------------------------------------------------------------ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.form-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.field--span2 {
  grid-column: span 2;
}

.field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.field-error {
  font-size: var(--text-xs);
  color: var(--text-error);
}

/*
 * 라벨·값 글꼴 분리(ui.md §9) — 같은 칸에 라벨과 값이 붙을 때 <span>을 갈라 이 두 클래스를
 * 쓴다. 라벨은 작고(11px) 굵고 흐리게, 값은 본문 크기·색으로 — 붙어 있어도 한 단어로
 * 안 읽힌다. `.stat dt`·`.detail-grid dt`도 같은 라벨 규칙으로 통합한다.
 */
.label,
.stat dt,
.detail-grid dt {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--label-color);
}

.value {
  font-size: var(--value-size);
  color: var(--value-color);
}

.input,
.select {
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: inherit;
  font-size: var(--text-base);
  color: var(--text-body);
}

.select-sm,
.input-sm {
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

/* TTL 입력은 격자 열 폭을 흔들지 않게 고정 폭 */
.input-sm[type='number'] {
  width: 7rem;
}

.input:disabled,
.select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-1) 0.875rem;
  min-height: var(--control-h);
  align-items: center;
}

.checkbox-group label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--text-body);
}

.checkbox-group input[type='checkbox']:disabled + span {
  opacity: 0.4;
}

/*
 * 토글 — 값이 켜짐/꺼짐 두 갈래뿐인 설정 하나. 두 갈래를 select로 두면 고르기 전에 현재
 * 값을 읽을 수 없다. 네이티브 checkbox + role="switch"를 쓴다(클릭 가능한 div는 키보드·
 * 스크린리더에서 상태가 없다) — 라벨은 명사구 고정이고 상태는 스위치가 말한다(ui.md §1·§5).
 */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  font-size: var(--text-base);
  color: var(--text-body);
  cursor: pointer;
}

.switch input[type='checkbox'] {
  appearance: none;
  position: relative;
  flex: none;
  margin: 0;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--p-neutral-300);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}

.switch input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--surface-card);
  box-shadow: var(--shadow-1);
  transition: translate var(--duration-fast) var(--ease-default);
}

.switch input[type='checkbox']:checked {
  background: var(--brand-hover);
}

.switch input[type='checkbox']:checked::after {
  translate: 1rem 0;
}

.switch input[type='checkbox']:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--brand-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .switch input[type='checkbox'],
  .switch input[type='checkbox']::after {
    transition: none;
  }
}

/* 입력 한 칸 + 버튼이 같은 줄에 서는 폼. `.field`가 늘어나고 버튼은 바닥선에 맞춘다. */
.inline-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.inline-form .field {
  flex: 1 1 auto;
  max-width: 22rem;
}

/*
 * 서브탭 — 사이드바 탭(`data-tab-*`)과 **다른 축**이다. 한 화면 안에서 같은 주체(BRN)의
 * 다른 면을 번갈아 보는 자리라 사이드바와 같은 모양을 쓰면 어느 축이 움직였는지 안 보인다.
 * 밑줄 강조 하나로만 구분한다(ui.md §4 — 격자를 흔들지 않는다).
 */
.subtabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

.subtab {
  appearance: none;
  flex: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.subtab:hover {
  color: var(--text-body);
}

.subtab[aria-selected='true'] {
  color: var(--brand-hover);
  border-bottom-color: var(--brand-hover);
}

.subtab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/*
 * 원천 칩 줄 — 원천별 결과를 표로 펼치면 정작 읽어야 할 조회 결과보다 커진다. 원천 수는
 * 엔드포인트가 고정하므로(ADR-0011) 한 줄이면 충분하다. 칩 자체가 원문 보기 버튼이다.
 */
.chip-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  overflow-x: auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-card);
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-body);
  white-space: nowrap;
  cursor: pointer;
}

/*
 * 최근 조회 칩 — 원천 칩 줄(위)과 달리 flex가 아니라 격자다. 개수가 사람의 조회 이력에
 * 달렸고 상호명 길이도 제각각이라, 한 줄 flex면 가로 스크롤 뒤로 칩이 숨고 `flex-wrap:
 * wrap`이면 칸 크기를 내용이 정하게 된다(둘 다 ui.md §10 위반). 열 폭을 먼저 못 박고
 * 칩이 그 안에서 줄어들게 한다 — 상호명이 길든 짧든 격자가 흔들리지 않는다.
 */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

#recent-lookups {
  margin-top: var(--space-4);
}

/* 칩이 열 폭을 넘지 않는다 — 넘치는 상호명은 `.chip-label`이 말줄임으로 받는다. */
.chip-recent {
  min-width: 0;
  justify-content: space-between;
}

.chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-meta {
  flex: none;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.chip:hover {
  background: var(--surface-hover);
}

.chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.chip:disabled {
  opacity: 0.55;
  cursor: default;
}

.chip .badge {
  margin-left: var(--space-1);
}

/* ------------------------------------------------------------------ */
/* 요약 지표 타일 — 라벨/값 폰트를 나눈다(ui.md 격자 규칙)             */
/* ------------------------------------------------------------------ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.stat {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  padding: 0.875rem var(--space-4);
}

.stat dd {
  margin: var(--space-1) 0 0;
  color: var(--text-primary);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

.stat-delta {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* 외부 통신 원문 카드 — 조회 이력 상세·외부 통신 이력 격자가 공유한다.   */
/* 접이식(<details>) — 기본은 표지(배지·제목·일자)만, 눌러서 펼친다     */
/* ------------------------------------------------------------------ */
.disclosure {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.disclosure > summary {
  position: relative;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) 9.5rem;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
}

/* display: grid가 <summary>의 네이티브 펼침 마커(list-item 전용)를 지운다 — 대체 화살표 */
.disclosure > summary::after {
  content: '▸';
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.disclosure[open] > summary {
  border-bottom: 1px solid var(--border-default);
}

.disclosure[open] > summary::after {
  content: '▾';
}

.disclosure-body {
  padding: var(--space-3);
}

/* 라벨 열 고정 — 값이 길어도 라벨 열이 밀리지 않는다(ui.md 격자 규칙) */
.detail-grid {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.detail-grid dd {
  margin: 0;
  min-width: 0;
  color: var(--text-body);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.detail-grid pre,
/* 원문 카드(`#lookup-raw-payload`)도 같은 규칙 — 긴 JSON이 카드를 가로로 밀지 않는다(ui.md §10) */
#lookup-raw-payload {
  margin: 0;
  max-height: 16rem;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media print {
  .sidebar,
  #logout,
  #banner,
  #retry,
  .actions,
  .form-grid,
  .pager {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .content {
    max-width: none;
    padding: 0;
  }

  .card {
    box-shadow: var(--shadow-0);
    border-color: #000000;
    break-inside: avoid;
  }

  .table-scroll {
    max-height: none;
    overflow: visible;
    border-color: #000000;
  }

  .table {
    table-layout: auto;
  }

  .table th,
  .table td {
    border-color: #000000;
    color: #000000;
    white-space: normal;
    overflow: visible;
  }

  .table thead {
    display: table-header-group;
  }

  .table tbody tr {
    break-inside: avoid;
  }

  .badge {
    background: none !important;
    color: #000000 !important;
    border: 1px solid #000000;
  }

  a[href]::after {
    content: '';
  }
}

/* NICE 기본정보 상세 — 공통 9필드 표와 붙지 않게 띄운다 */
#detail-profile-source {
  margin-top: var(--space-5);
}

#detail-profile-sites > section {
  margin-top: var(--space-5);
}

/* ------------------------------------------------------------------ */
/* 기업 리포트 (A4 인쇄)                                               */
/* 조회 뷰와 리포트 뷰는 같은 탭의 두 상태다 — 새 탭으로 넘기지 않는다  */
/* (exec-plan 2026-09-18 결정 3). 화면에서는 종이 모양 그대로 미리보기다 */
/* ------------------------------------------------------------------ */
:root {
  /* 계열 색 — 같은 색상(H)의 명도 3단. 서열이 아니라 구분이고, 의미는 항상 글자가 진다 */
  --chart-1: var(--p-primary-600);
  --chart-2: var(--p-primary-400);
  --chart-3: var(--p-neutral-400);
  --chart-grid: var(--border-default);
  --chart-axis-text: var(--text-secondary);

  /* A4 세로 실측 — 인쇄 여백을 뺀 본문 폭 */
  --page-w: 210mm;
  --page-pad: 14mm 12mm;
}

[data-view='lookup'] #report {
  display: none;
}

[data-view='report'] > .card {
  display: none;
}

.report-toolbar {
  margin-bottom: var(--space-4);
}

.report-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* 한 쪽 = 한 장. 화면에서도 종이 폭으로 고정한다 — 미리보기와 인쇄물이 갈리면 미리보기가
   거짓말을 한다. 높이는 내용이 정한다(빈 종이 아래쪽을 억지로 만들지 않는다). */
.report-page {
  box-sizing: border-box;
  width: var(--page-w);
  max-width: 100%;
  padding: var(--page-pad);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-1);
  break-after: page;
}

.report-page:last-child {
  break-after: auto;
}

/* 문서 머리 — 종류(왼쪽)와 기준 시각(오른쪽)이 한 줄이다. 상호는 여기 오지 않는다:
   문서 종류보다 크게, 식별 블록의 제목으로 선다. */
.report-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--text-primary);
}

.report-asof {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 문서 종류를 먼저 말하는 작은 머리글 — 제목(상호)과 같은 크기면 한 덩어리로 읽힌다(ui.md §9) */
.report-kicker {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: 0.06em;
  color: var(--brand);
}

.report-head h2 {
  margin-top: var(--space-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* 식별 블록 — 왼쪽은 사실 목록, 오른쪽은 등급 상자. 신용의견서의 1쪽 머리다.
   등급 상자는 폭을 고정한다(등급 문자열 길이에 따라 사실 목록 폭이 흔들리면 안 된다). */
.report-identity {
  display: grid;
  grid-template-columns: 1fr 34mm;
  align-items: start;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.report-company-en {
  margin-top: var(--space-05);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* `라벨  값` 목록. 라벨 폭을 고정해 값의 왼쪽 끝이 한 줄로 선다 — 이게 표 없이도
   표처럼 읽히게 하는 유일한 장치다. */
.report-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-3);
}

.report-facts--wide {
  grid-template-columns: 1fr 1fr;
}

.report-facts > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-2);
  align-items: baseline;
  break-inside: avoid;
}

.report-facts dt {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--label-color);
}

.report-facts dd {
  font-size: var(--text-base);
  color: var(--text-body);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 등급 상자 — 이 문서에서 제일 먼저 보여야 하는 값 하나 */
.report-grade {
  border: 2px solid var(--text-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  text-align: center;
}

.report-grade-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.report-grade-caption {
  margin-top: var(--space-1);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: 0.04em;
  color: var(--label-color);
}

.report-grade-since {
  margin-top: var(--space-05);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 쪽 안의 절 제목 — 쪽 제목(2px)보다 한 단 약한 선으로 위계를 만든다 */
.report-section-head {
  margin-top: var(--space-5);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.report-site {
  margin-top: var(--space-2);
  break-inside: avoid;
}

/* 출처 한 줄 — 값마다 원천 열을 다는 대신 쪽 끝에서 한 번 밝힌다 */
.report-source {
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.report-page-title {
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.report-section-title {
  margin-top: var(--space-5);
}

/* 리포트 표는 스크롤하지 않는다 — 종이에는 스크롤이 없다(`.table-scroll`과 다른 점) */
/* 쪽 자체에는 break-inside를 걸지 않는다 — 등급 이력이 길면 한 장을 넘겨야 하고, 넘기지
   못하게 막으면 넘친 행이 종이 밖으로 잘린다. 잘리면 안 되는 건 행과 차트다. */
.report-table {
  margin-top: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* 종이에는 가로 스크롤이 없다 — 잘라내는 대신 접는다. 한글은 어절째 넘긴다
   (`break-word`만 두면 "부가가치세 일반과/세자"처럼 단어 중간에서 끊긴다). */
.report-table .table th,
.report-table .table td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.report-table .table thead th {
  position: static;
}

.report-table .table tbody tr {
  break-inside: avoid;
}

#report-page-indicators .report-table .table th.num,
#report-page-indicators .report-table .table td.num {
  text-align: right;
}

/* 쪽 머리의 한 줄 요약(범위·회차) — 제목 바로 밑에 붙고 표와는 떨어진다 */
.report-lead {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

/* 오늘 이후까지 유효한 구간 — 오른쪽 끝이 실제 끝이 아니라 축의 끝이다 */
.report-chart-band--open {
  stroke-dasharray: 5 3;
}

.report-missing {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-05) 0.625rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

/* ------------------------------------------------------------------ */
/* 리포트 차트 (report-chart.js가 그리는 인라인 SVG)                    */
/* ------------------------------------------------------------------ */
.report-chart-box {
  margin-top: var(--space-2);
  break-inside: avoid;
}

.report-chart {
  display: block;
  width: 100%;
  height: auto;
}

.report-chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

/* 0선은 눈금선이 아니라 부호의 기준이다 — 굵기로 가른다 */
.report-chart-zero {
  stroke: var(--text-secondary);
  stroke-width: 1.5;
}

.report-chart-tick,
.report-chart-axis,
.report-chart-note {
  font-size: 11px;
  fill: var(--chart-axis-text);
  font-variant-numeric: tabular-nums;
}

.report-chart-legend,
.report-chart-point-label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  fill: var(--text-body);
}

.report-chart-bar {
  fill: var(--chart-1);
}

.report-chart-line {
  fill: none;
  stroke: var(--chart-1);
  stroke-width: 2;
  stroke-linejoin: round;
}

.report-chart-dot {
  fill: var(--chart-1);
}

.report-chart-series-2 {
  fill: var(--chart-2);
  stroke: var(--chart-2);
}

.report-chart-series-3 {
  fill: var(--chart-3);
  stroke: var(--chart-3);
}

/* 계열을 색으로만 가르지 않는다 — 꺾은선은 선 모양이 1차 구분이다(흑백 인쇄·색각 이상) */
.report-chart-line.report-chart-series-2 {
  stroke-dasharray: 7 4;
}

.report-chart-line.report-chart-series-3 {
  stroke-dasharray: 2 3;
}

.report-chart-band {
  fill: var(--brand-100);
  stroke: var(--chart-1);
  stroke-width: 1;
}

.report-chart-band-label {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  fill: var(--text-primary);
}

/* ------------------------------------------------------------------ */
/* 인쇄 — A4 세로. 리포트 뷰가 켜져 있으면 조회 카드는 이미 display:none  */
/* 이라 인쇄물에는 리포트만 남는다.                                     */
/* ------------------------------------------------------------------ */
@page {
  size: A4 portrait;
  margin: 14mm 12mm;
}

@media print {
  .report-toolbar {
    display: none !important;
  }

  /* 리포트를 인쇄할 때만 화면 제목을 뺀다 — 리포트 표지가 이미 제목을 갖고 있어
     그대로 두면 인쇄물 맨 위에 제목이 둘이다. 조회 화면 인쇄는 예전 그대로다. */
  body[data-view='report'] .topbar {
    display: none;
  }

  /* 회색 글자는 종이에서 거의 안 나온다 */
  .report-asof,
  .report-company-en,
  .report-grade-since,
  .report-source {
    color: #000000;
  }

  /* 종이가 이미 여백을 주므로 쪽 자체는 테두리 없이 폭만 채운다 */
  .report-page {
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* 화면에선 종이 폭으로 고정해 가운데 세우지만, 인쇄물의 폭은 종이가 정한다 —
     center로 두면 width:auto인 쪽이 내용 폭까지 줄어 쪽마다 폭이 달라진다. */
  .report-doc {
    gap: 0;
    align-items: stretch;
  }

  .report-table {
    border-color: #000000;
  }

  /* 화면 색은 종이에서 옅게 나온다 — 선·글자를 검정 계열로 내린다 */
  .report-chart-grid {
    stroke: #666666;
  }

  .report-chart-zero,
  .report-chart-line,
  .report-chart-bar,
  .report-chart-dot,
  .report-chart-band {
    stroke: #000000;
  }

  .report-chart-bar {
    fill: #767676;
  }

  .report-chart-bar.report-chart-series-2 {
    fill: #b0b0b0;
  }

  .report-chart-bar.report-chart-series-3 {
    fill: #e0e0e0;
  }

  .report-chart-line,
  .report-chart-dot {
    fill: none;
  }

  .report-chart-dot {
    fill: #000000;
  }

  .report-chart-band {
    fill: #ffffff;
  }

  .report-chart-tick,
  .report-chart-axis,
  .report-chart-note,
  .report-chart-legend,
  .report-chart-point-label,
  .report-chart-band-label {
    fill: #000000;
  }

  .report-kicker {
    color: #000000;
  }
}