/* public/css/components.css — 여러 화면이 같이 쓰는 부품: 제목 줄(pageHeading)과 기준 시각, 분할 버튼, 도구 버튼, 기본 버튼,
   부팅·불러오기 실패 안내, 화면 오류, 그리고 js/app/components/의 부품 — 배지, 빈 상태, 연결 방식 칩·범례, KPI 띠, 막대 목록,
   필터 칩, 선택상자·검색 입력, 한 줄 칩 줄, 표 카드(도구줄 · 표 · 쪽 넘김), 데이터 표, 쪽 넘김. 구분은 1px 선과 여백, 그림자 없음. */

/* ── 제목 줄: 아이브로 → h1 → (바로 다음 형제) .title-meta, 배지는 h1 옆, 오른쪽 끝에 기준 시각 ───────── */

.page-heading {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3.2rem;
  margin-bottom: var(--heading-gap);
}

/* DOM 순서는 eyebrow · h1 · .title-meta · 배지(h1의 다음 형제가 .title-meta), 배지는 격자로 h1 옆 칸에 놓는다 */
.heading-text {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  grid-template-areas:
    'eyebrow eyebrow'
    'title badge'
    'meta meta';
  align-items: center;
  column-gap: 1.6rem;
  min-width: 0;
}

.eyebrow {
  grid-area: eyebrow;
  margin-bottom: 1rem;
  font-size: var(--fs-eyebrow);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.page-heading h1 {
  grid-area: title;
  min-width: 0;
  font-size: var(--fs-title);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.title-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-width: 0;
  margin-top: 1.4rem;
  overflow: hidden;
  white-space: nowrap; /* 한 줄 */
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-2);
}

.heading-badge {
  grid-area: badge;
  justify-self: start;
  display: flex;
  align-items: center;
}

/* 오른쪽 끝: 기준 시각(화면이 지역 탭 등을 더 넣을 수 있다) */
.page-heading-aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.asof {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.asof-stale {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--warn-line);
  border-radius: 99rem;
  background: var(--warn-soft);
  font-weight: 800;
  color: var(--warn);
}

.asof-stale::before {
  content: '';
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--hub);
}

/* ── 분할 버튼(KR/EN 등): 1px 테두리 안에 칸, 고른 칸은 파란 바탕 흰 글자 ───────────────────── */

.seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
}

.seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 6.4rem;
  min-height: 4.6rem;
  padding: 0 1.4rem;
  border-radius: 0.7rem;
  font-size: var(--fs-control);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.seg-btn[aria-pressed='true'] {
  background: var(--blue);
  color: var(--on-fill);
}

/* ── 도구 버튼(전체 화면·초기화·처음으로): 흰 바탕 + 1px 테두리 + 아이콘 ─────────────────────── */

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 5.2rem;
  padding: 0 1.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-control);
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}

.tool-btn svg {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: var(--text-2);
}

.tool-btn:active,
.seg-btn:not([aria-pressed='true']):active,
.ws-switch-btn:not([aria-current='true']):active {
  background: var(--blue-soft);
}

.sidebar-foot .seg {
  display: grid;
}

.sidebar-foot .tool-btn {
  width: 100%;
}

/* ── 기본 버튼 ─────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 5.6rem;
  padding: 0 3.2rem;
  border-radius: var(--radius);
  background: var(--blue);
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--on-fill);
}

.btn-primary svg {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
}

.btn-primary:active {
  background: var(--blue-strong);
}

@media (hover: hover) {
  .tool-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
  }

  .tool-btn:hover svg {
    color: var(--blue);
  }

  .seg-btn:not([aria-pressed='true']):hover,
  .ws-switch-btn:not([aria-current='true']):hover {
    background: var(--surface);
    color: var(--ink);
  }

  .btn-primary:hover {
    background: var(--blue-strong);
  }
}

/* ── 부팅: 불러오는 중 · 불러오기 실패(전체 화면 안내) ─────────────────────────────────────── */

.boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
  padding: 4rem;
  background: var(--bg);
  text-align: center;
}

.boot-logo {
  width: auto;
  height: 4rem;
  max-height: 49px; /* 원본 PNG보다 키우지 않는다 */
}

/* 금방 뜨면 깜빡이지 않도록 0.3초 뒤에 나타난다 */
.boot-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-2);
  animation: boot-reveal 0.2s 0.3s ease-out both;
}

.boot-bar {
  position: relative;
  width: 24rem;
  height: 0.4rem;
  overflow: hidden;
  border-radius: 0.2rem;
  background: var(--line);
}

.boot-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  border-radius: inherit;
  background: var(--blue);
  animation: boot-bar 1.2s ease-in-out infinite;
}

@keyframes boot-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes boot-bar {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(290%);
  }
}

.boot-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  max-width: 80rem;
}

.boot-message-icon {
  width: 5.6rem;
  height: 5.6rem;
  margin-bottom: 0.8rem;
  color: var(--warn);
}

.boot-message-title {
  font-size: var(--fs-section);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.boot-message-body {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-2);
}

.boot-message .btn-primary {
  margin-top: 2rem;
}

/* ── 화면 하나를 그리다 실패했을 때(셸은 그대로) ─────────────────────────────────────────── */

.page-error {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  min-height: 24rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}

.page-error-title {
  font-size: var(--fs-section);
  font-weight: 800;
  color: var(--ink);
}

/* 남색 무대 위 윤곽 버튼(금융기관 Main 히어로의 두 번째 버튼 등) */
.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 5.6rem;
  padding: 0 3.2rem;
  border: 1px solid var(--navy-text);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-weight: 800;
  white-space: nowrap;
  color: var(--on-fill);
}

.btn-outline-dark:active {
  background: var(--navy-2);
}

@media (hover: hover) {
  .btn-outline-dark:hover {
    border-color: var(--on-fill);
    background: var(--navy-2);
  }
}

/* ── 배지: SAMPLE DATA(파랑) · 데이터 연동 전(회색) ─────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 3.2rem;
  padding: 0 1.2rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.badge-sample {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.badge-muted {
  border-color: var(--line-strong);
  background: var(--bg);
  color: var(--text-2);
  letter-spacing: 0;
}

/* ── 빈 상태: 놓인 칸을 채우고 가운데에 아이콘 · 제목 · 설명 ─────────────────────────────── */

.empty-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-height: 24rem;
  padding: 4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}

.empty-icon {
  width: 5.6rem;
  height: 5.6rem;
  margin-bottom: 0.4rem;
  color: var(--muted);
}

.empty-title {
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.empty-body {
  max-width: 64rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-2);
}

/* ── 연결 방식 칩(2.4rem 정사각, 방식 색 바탕 + 흰 글자 800)과 범례 ─────────────────────────── */

.method-chips {
  display: inline-flex;
  gap: 0.6rem;
}

.method-chip {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
  font-size: var(--fs-small);
  font-weight: 800;
  line-height: 1;
  color: var(--on-fill);
  background: var(--method-s);
}

.method-chip.is-f {
  background: var(--method-f);
}

.method-chip.is-d {
  background: var(--method-d);
}

.method-chip.is-e {
  background: var(--method-e);
}

.method-legend {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.method-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text);
}

/* ── KPI 띠: 흰 면 + 1px 선, 칸은 1px 세로선. 이름 위, 큰 수 + 단위 아래(칸마다 같은 기준선) ─────────── */

.kpi-band {
  display: grid;
  grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1.4rem 2.4rem 1.6rem;
}

.kpi + .kpi {
  border-left: 1px solid var(--line);
}

.kpi-label {
  overflow: hidden;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-2);
}

/* 값 줄: 보이지 않는 KPI 크기 받침 글자(::before)가 줄 높이와 기준선을 정해, 글자 값(선택 국가 등)도 수와 같은 선에 앉는다 */
.kpi-value {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  min-width: 0;
  margin-top: auto;
  line-height: 1;
}

.kpi-value::before {
  content: '\200B';
  width: 0;
  margin-right: -0.8rem;
  font-size: var(--fs-kpi);
  font-weight: 900;
}

/* 칸이 좁아 수 + 단위가 넘치면 kpi.js(fitKpiValues)가 띠(.kpi-band)에 --kpi-fit(0.6–1, 띠 하나에 한 값)을 걸어 띠의 수 글자를 함께 줄인다 —
   값 줄 높이·기준선은 ::before가 지킨다 */
.kpi-num {
  --fs-kpi-fit: calc(var(--fs-kpi) * var(--kpi-fit, 1));
  font-size: var(--fs-kpi-fit);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.kpi-num.is-none {
  color: var(--muted);
}

.kpi-text {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}

.kpi-unit {
  flex: 0 0 auto;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--muted);
}

.kpi-unit:empty {
  display: none;
}

.kpi-note {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--muted);
}

/* 이름 옆 작은 꼬리표(예 "수기 입력값") — 줄을 늘리지 않는다 */
.kpi-tag {
  margin-left: 1rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--muted);
}

/* ── 막대 목록: 줄들이 한 격자(subgrid)를 나눠 써 막대 시작선과 값 끝선이 맞는다 ───────────────── */

.bar-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  column-gap: 2.4rem;
}

.bar-item {
  display: contents;
}

.bar-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: var(--tap);
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-align: left;
}

.bar-item:last-child > .bar-row {
  border-bottom: 0;
}

/* subgrid가 없는 브라우저: 줄마다 같은 칸 너비 */
@supports not (grid-template-columns: subgrid) {
  .bar-row {
    grid-template-columns: minmax(14rem, 32%) minmax(0, 1fr) max-content max-content;
    column-gap: 2.4rem;
  }
}

.bar-label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.bar-icon {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--blue);
}

.bar-track {
  position: relative;
  height: 1.2rem;
  overflow: hidden;
  border-radius: 0.6rem;
  background: var(--blue-soft);
}

.bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--bar, 0%);
  border-radius: inherit;
  background: var(--blue);
  transform-origin: left center;
}

/* 페이지에 들어올 때 한 번 자란다(카운트업과 같은 620ms). 언어만 바꾼 다시 그리기에는 page-enter가 없어 움직이지 않는다 */
.page-enter .bar-fill {
  animation: bar-grow 620ms ease-out both;
}

@keyframes bar-grow {
  from {
    transform: scaleX(0);
  }
}

.bar-value {
  justify-self: end;
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.bar-go {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--muted);
}

button.bar-row:active {
  background: var(--blue-soft);
}

@media (hover: hover) {
  button.bar-row:hover {
    background: var(--bg);
  }

  button.bar-row:hover .bar-go {
    color: var(--blue);
  }
}

/* ── 필터 칩: 1px 테두리 버튼, 고른 칩은 파란 바탕 흰 글자 ───────────────────────────── */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 4.8rem;
  padding: 0 1.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-control);
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}

.chip-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.chip[aria-pressed='true'] {
  border-color: var(--blue);
  background: var(--blue);
  font-weight: 800;
  color: var(--on-fill);
}

.chip[aria-pressed='true'] .chip-count {
  color: var(--blue-soft);
}

.chip:not([aria-pressed='true']):active {
  background: var(--blue-soft);
}

@media (hover: hover) {
  .chip:not([aria-pressed='true']):hover {
    border-color: var(--blue);
    color: var(--blue);
  }
}

/* ── 선택상자·검색 입력(도구줄) ─────────────────────────────────────────────── */

.select-wrap,
.search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.select-input,
.search-input {
  height: 5.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-control);
  color: var(--text);
}

.select-input {
  appearance: none;
  min-width: 26rem;
  max-width: 34rem;
  padding: 0 5.2rem 0 1.8rem;
  font-weight: 700;
  cursor: pointer;
}

.select-arrow {
  position: absolute;
  right: 1.6rem;
  width: 2rem;
  height: 2rem;
  transform: rotate(90deg);
  pointer-events: none;
  color: var(--text-2);
}

.search-input {
  width: 32rem;
  padding: 0 1.8rem 0 5.2rem;
  font-weight: 600;
}

.search-input::placeholder {
  color: var(--muted);
}

/* 브라우저의 작은 지우기 단추는 누르기 어렵다 — 지우기는 초기화 버튼이 맡는다 */
.search-input::-webkit-search-cancel-button {
  appearance: none;
}

.search-icon {
  position: absolute;
  left: 1.7rem;
  width: 2.2rem;
  height: 2.2rem;
  pointer-events: none;
  color: var(--muted);
}

.select-input:focus,
.search-input:focus {
  border-color: var(--blue);
}

/* ── 한 줄 칩 줄(chip-row.js): 칩은 줄이 넘치지 않게 숨기고, 숨긴 값은 오른쪽 선택상자에 모은다 ─────────── */

.chip-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.chip-row .chip-group {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.chip-row-more-wrap {
  flex: 0 0 auto;
}

.chip-row-more {
  width: 26rem;
  min-width: 0;
  height: 4.8rem;
}

/* 숨은 값을 골랐다: 선택상자가 고른 칩처럼 파랗게 */
.chip-row-more-wrap.is-active .chip-row-more {
  border-color: var(--blue);
  background: var(--blue-soft);
  font-weight: 800;
  color: var(--blue-strong);
}

/* ── 표 카드: 도구줄 · 표(남은 높이) · 쪽 넘김. 표 칸은 최소 머리글 + 5행 높이를 지킨다(넘치면 본문이 스크롤) ─────── */

.table-card {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.table-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.6rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--line);
}

.toolbar-end {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-left: auto;
}

.table-area {
  flex: 1 1 0;
  min-height: calc(var(--table-head) + 5 * var(--table-row));
}

.table-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  padding: 0.8rem 1.6rem;
  border-top: 1px solid var(--line);
}

.table-range {
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ── 데이터 표: 고정 칸 너비, 머리글 4.8rem(옅은 바탕), 행 5.6rem, 1px 가로선 ─────────────────── */

.data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-table);
}

.data-table th,
.data-table td {
  overflow: hidden;
  padding: 0 2.4rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.data-table th {
  height: var(--table-head);
  background: var(--bg);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.data-table td {
  height: var(--table-row);
  font-weight: 600;
  color: var(--text);
}

.data-table .is-center {
  text-align: center;
}

.data-table .is-right {
  text-align: right;
}

.cell-strong {
  font-weight: 800;
  color: var(--ink);
}

.cell-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.data-table-empty td {
  height: calc(2 * var(--table-row));
  text-align: center;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--muted);
}

/* ── 쪽 넘김: 이전 · 번호 · 다음(4.8rem), 지금 쪽은 파란 바탕 ─────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 4.8rem;
  min-height: 4.8rem;
  padding: 0 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-control);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.pager-step {
  padding: 0 1.6rem;
}

.pager-btn svg {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
}

.pager-btn[aria-current='page'] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--on-fill);
}

.pager-btn:disabled {
  border-color: var(--line);
  color: var(--line-strong);
  cursor: default;
}

.pager-btn:not(:disabled):not([aria-current='page']):active {
  background: var(--blue-soft);
}

.pager-gap {
  min-width: 2.4rem;
  font-size: var(--fs-control);
  font-weight: 800;
  text-align: center;
  color: var(--muted);
}

@media (hover: hover) {
  .pager-btn:not(:disabled):not([aria-current='page']):hover {
    border-color: var(--blue);
    color: var(--blue);
  }
}