/* public/css/pages-products.css — 상품 화면 배치: 전체(KPI 띠 → 상품 비교 표), 상품 Main(KPI 띠 → 칸 격자 → 아래 줄),
   고객현황(KPI 띠 → 표 카드 — 도구줄 두 줄), 그리고 상품 화면 부품 — 월별 막대그래프(trend-chart.js), 대표 고객 로고 벽(logo-wall.js),
   최근 등록 목록, 신규 배지, 불러오는 중. 구분은 1px 선과 여백, 그림자 없음. 공통 부품 모양(KPI 띠·막대 목록·칩·표·쪽 넘김)은 components.css. */

/* ── 불러오는 중(목록을 받는 동안 본문 자리) ─────────────────────────────── */

.page-loading {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  min-height: 24rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-2);
}

/* 제목 줄 오른쪽: "최근 등록 2026.08.31" | 기준 시각 */
.latest-entry {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.latest-entry + .asof {
  padding-left: 1.6rem;
  border-left: 1px solid var(--line);
}

/* 전년 대비: 증가는 초록 + 부호, 감소는 빨강(부호는 수에 이미 있다) */
.kpi-num[data-trend='up'] {
  color: var(--up);
}

.kpi-num[data-trend='up']::before {
  content: '+';
}

.kpi-num[data-trend='down'] {
  color: var(--down);
}

/* ── 상품 전체: KPI 띠 → 비교 표(남은 높이, 행이 높이를 나눠 갖는다) ─────────────────── */

.product-all .kpi-band,
.product-main .kpi-band,
.product-customers .kpi-band {
  flex: 0 0 auto;
  margin-bottom: 1.6rem;
}

.compare-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.compare-title {
  flex: 0 0 auto;
  padding: 2rem 3.2rem 1.6rem;
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.compare-table {
  flex: 1 1 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.compare-table .col-product {
  width: 30%;
}

.compare-table .col-year,
.compare-table .col-month {
  width: 15%;
}

.compare-table .col-go {
  width: 7.2rem;
}

.compare-table thead th {
  height: var(--table-head);
  padding: 0 3.2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
  color: var(--text-2);
}

.compare-table thead th.is-right {
  text-align: right;
}

.compare-table tbody th,
.compare-table tbody td {
  padding: 0 3.2rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.compare-row:not(.is-total) {
  cursor: pointer;
}

.compare-row:not(.is-total):active > * {
  background: var(--blue-soft);
}

@media (hover: hover) {
  .compare-row:not(.is-total):hover > * {
    background: var(--bg);
  }

  .compare-row:not(.is-total):hover .compare-chevron {
    color: var(--blue);
  }
}

.compare-product {
  text-align: left;
  font-weight: inherit;
}

/* 상품 이름 칸: 줄 전체가 누르는 대상이고, 이 버튼은 키보드·화면 읽기용 */
.compare-link {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  min-height: var(--tap);
  color: inherit;
  text-align: left;
}

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

.compare-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.compare-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.source-label {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
}

.compare-cell {
  text-align: right;
  white-space: nowrap;
}

.compare-cell .num {
  font-size: var(--fs-section);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* 누적 칸: 전체 대비 막대 · 비중 % · 수. 비중·수 상자 폭이 행마다 같아 막대 시작선과 수의 오른쪽 끝선이 행마다 맞는다
   (막대 없는 전체 행·"—"도 오른쪽 정렬) */
.compare-total .bar-track {
  display: inline-block;
  width: calc(100% - 22rem);
  height: 1.4rem;
  margin-right: 1.6rem;
  vertical-align: middle;
}

.compare-share {
  display: inline-block;
  width: 7.6rem;
  margin-right: 1.2rem;
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: right;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.compare-total .num,
.compare-total .compare-none {
  display: inline-block;
  min-width: 11.6rem;
  text-align: right;
  vertical-align: middle;
}

.compare-none {
  font-size: var(--fs-section);
  font-weight: 700;
  color: var(--muted);
}

.compare-go {
  text-align: center;
}

.compare-chevron {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--muted);
}

/* 전체 행: 위 1px 남색 선(R24 — 강조는 굵기·색), 굵은 글자. 바로 위 행은 아래 선을 두지 않는다 —
   두 선이 붙으면(border-collapse: separate) 2px로 쌓여 보인다 */
.compare-row.is-total > * {
  border-top: 1px solid var(--ink);
  border-bottom: 0;
}

.compare-table tbody tr:nth-last-child(2) > * {
  border-bottom: 0;
}

/* 노출 상품이 없어 전체 행뿐이면 머리글의 아래 선이 그 자리의 선 하나다(남색 위 선을 겹치지 않는다) */
.compare-table tbody tr.is-total:first-child > * {
  border-top: 0;
}

.compare-row.is-total .compare-name {
  font-weight: 900;
}

.compare-row.is-total .num {
  font-weight: 900;
  color: var(--ink);
}

/* ── 상품 Main: KPI 띠 → 칸 격자(남은 높이) → 아래 줄 ─────────────────────────────── */

/* 칸 격자: 무엇을 그릴지는 화면(product-main.js)이 데이터로 정해 data-layout에 적고, 배치는 여기서 화면 비율마다 고른다.
   list = 분류 · 추이 · 최근 등록, share = 지역 비중만(목록 없는 상품 — R29), filler = 빈 상태 하나, share-filler = 둘 다.
   뒤에 -logos가 붙으면 대표 고객 로고 벽이 더 있다.
   보통 비율 기본(list, 2×2): 왼쪽 비중(두 줄) · 오른쪽 위 추이 · 아래 최근 등록(2열 × 4줄의 두 줄짜리 항목에 조금 더) */
.pm-grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas:
    'share trend'
    'share recent';
  gap: 1.6rem;
}

/* 로고 벽이 있으면 2×2를 같은 높이로: 분류 막대·추이가 비좁아지지 않게(로고 칸은 그만큼 작다) */
.pm-grid[data-layout='list-logos'] {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    'share trend'
    'logos recent';
}

.pm-grid[data-layout='share'] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'share';
}

.pm-grid[data-layout='filler'] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'none';
}

.pm-grid[data-layout='share-logos'] {
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'share logos';
}

.pm-grid[data-layout='filler-logos'] {
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'none logos';
}

.pm-grid[data-layout='share-filler'] {
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'share none';
}

.pm-grid[data-layout='share-filler-logos'] {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    'share none'
    'logos none';
}

.panel-share {
  grid-area: share;
}

.panel-trend {
  grid-area: trend;
}

.panel-recent {
  grid-area: recent;
}

.panel-showcase {
  grid-area: logos;
}

/* 빈 상태 하나로 합친 칸(.panel — 테두리·여백은 칸이 갖고, 안의 빈 상태는 상자를 겹치지 않는다: 아래 .panel .empty-state) */
.panel-none {
  grid-area: none;
}

.pm-side {
  grid-area: side;
}

/* 가로로 긴 화면(TV 월): 3열. 로고 벽과 최근 등록이 함께면 세 번째 칸(.pm-side)이 탭 하나로 두 패널을 나눠 쓴다 */
@media (min-aspect-ratio: 19/10) {
  .pm-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'share trend recent';
  }

  .pm-grid[data-layout='list-logos'] {
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'share trend side';
  }

  .pm-grid[data-layout='share'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'share';
  }

  .pm-grid[data-layout='filler'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'none';
  }

  .pm-grid[data-layout='share-logos'] {
    grid-template-areas: 'share share logos';
  }

  .pm-grid[data-layout='filler-logos'] {
    grid-template-areas: 'none none logos';
  }

  .pm-grid[data-layout='share-filler'] {
    grid-template-areas: 'share share none';
  }

  .pm-grid[data-layout='share-filler-logos'] {
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'share none logos';
  }
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 1.8rem 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* 제목과 오른쪽 작은 글자가 한 줄에 안 들어가면 작은 글자가 다음 줄(오른쪽)로 내려간다 — 잘라 내지 않는다 */
.panel-head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
  margin-bottom: 1.2rem;
}

.panel-title {
  flex: 0 1 auto;
  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);
}

.panel-meta {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.panel-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 칸 안의 빈 상태: 칸이 이미 1px 테두리를 가지니 상자를 겹치지 않는다 */
.panel .empty-state {
  min-height: 0;
  padding: 2rem;
  border: 0;
  border-radius: 0;
}

/* 가로로 긴 화면의 세 번째 칸(.pm-side): 탭 하나 "대표 고객 | 최근 등록"(글자 탭 + 활성 밑줄, 칸 제목 자리) + 탭 패널 둘 */
.side-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 3.2rem;
  min-width: 0;
  margin-bottom: 1.2rem;
}

.side-tab {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--muted);
}

.side-tab[aria-selected='true'] {
  font-weight: 800;
  color: var(--ink);
}

.side-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.side-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.4rem;
  border-radius: 0.2rem;
  background: var(--blue);
}

/* 비중 막대: 누르는 줄이 아니라 줄 높이를 칸에 맞춘다(한 줄 최대 7.2rem, 모자라면 함께 줄어든다). 이름 칸은 칸 폭의 42%까지 */
.panel .bar-list {
  flex: 1 1 0;
  min-height: 0;
  grid-template-columns: fit-content(42%) minmax(6rem, 1fr) max-content;
  grid-auto-rows: minmax(0, 7.2rem);
  align-content: start;
}

.panel .bar-row {
  min-height: 0;
  padding: 0 0.4rem;
}

.panel .bar-label {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.panel .bar-value {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

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

.bar-count {
  min-width: 6rem;
  font-size: var(--fs-body);
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* 비중 칸이 격자 폭 전체를 쓸 때(목록 없는 상품 — R29): 긴 줄을 멀리서도 읽게 글자·막대를 한 단계 키운다 */
.pm-grid[data-layout='share'] .bar-label {
  font-size: var(--fs-section);
  letter-spacing: -0.02em;
}

.pm-grid[data-layout='share'] .bar-track {
  height: 1.6rem;
  border-radius: 0.8rem;
}

.pm-grid[data-layout='share'] .bar-share {
  font-size: var(--fs-body);
}

.pm-grid[data-layout='share'] .bar-count {
  min-width: 11rem;
  font-size: var(--fs-section);
  letter-spacing: -0.02em;
}

/* 월별 막대그래프: SVG가 칸을 채우고(viewBox = 칸 크기 px) 글자는 rem 그대로 */
.trend-chart {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
}

.trend-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trend-grid {
  stroke: var(--line);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.trend-grid.is-base {
  stroke: var(--line-strong);
}

.trend-bar {
  fill: var(--sky);
}

.trend-month.is-latest .trend-bar {
  fill: var(--blue-strong);
}

.trend-value {
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: var(--text-2);
}

.trend-axis {
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: var(--muted);
}

.trend-month.is-latest .trend-value,
.trend-month.is-latest .trend-axis {
  font-weight: 800;
  fill: var(--ink);
}

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

@keyframes trend-grow {
  from {
    transform: scaleY(0);
  }
}

/* 최근 등록: 보통 비율은 2열 × 4줄(위에서 아래로, 이름 위 · 분류와 날짜 아래), 가로로 긴 화면은 1열 × 8줄(한 줄에 모두) */
.recent-list {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-auto-flow: column;
  column-gap: 3.2rem;
}

.recent-item {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  grid-template-areas:
    'idx name name'
    'idx cat date';
  align-content: center;
  column-gap: 1.4rem;
  row-gap: 0.3rem;
  min-width: 0;
  min-height: 0;
  border-bottom: 1px solid var(--line);
}

.recent-item:nth-child(4n) {
  border-bottom: 0;
}

.recent-index {
  grid-area: idx;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-sm);
  background: var(--blue-soft);
  font-size: var(--fs-small);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--blue-strong);
}

.recent-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}

.recent-category {
  grid-area: cat;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-2);
}

.recent-date {
  grid-area: date;
  justify-self: end;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

@media (min-aspect-ratio: 19/10) {
  .recent-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }

  .recent-item {
    grid-template-columns: 3.2rem minmax(0, 1fr) fit-content(16rem) auto;
    grid-template-areas: 'idx name cat date';
    align-items: center;
  }

  .recent-item:nth-child(4n) {
    border-bottom: 1px solid var(--line);
  }

  .recent-item:last-child {
    border-bottom: 0;
  }

}

/* 대표 고객 로고 벽: 그룹 탭(탭 줄 하나) + 탭 패널 안 4×3 격자. 칸은 테두리 없는 빈 칸(칸 안에 둥근 카드를 겹치지 않는다 — 요건 5 형태),
   로고는 칸 안에서 비율 그대로(원본보다 키우지 않는다).
   보통 비율(2×2의 한 칸 — 높이가 모자라다): 왼쪽 세로 탭 줄, 오른쪽 위 제목 · 쪽 표시, 그 아래 격자. 그룹 이름이 길어도(영어) 탭이
   격자의 높이를 먹지 않는다. 머리(.logo-head)는 상자 없이(display: contents) 그 안의 제목 · 탭 줄 · 쪽 표시가 이 격자의 칸에 놓인다. */
.logo-wall {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr); /* 로고는 칸 폭에 맞춰 줄어든다 — 탭 줄은 영어 두 줄이 들어갈 만큼만 */
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    'tabs title'
    'tabs panel';
  gap: 1.2rem 1.6rem;
}

.logo-head {
  display: contents;
}

.logo-title {
  grid-area: title;
  align-self: center;
  min-width: 0;
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
}

/* 그룹이 아주 많을 때만 탭 줄이 스크롤한다(overflow-y: auto). 스크롤 상자는 넘친 것을 자르므로 안쪽 여백 0.6rem에 초점 테두리
   (0.3rem + 띄움 0.2rem — base.css :focus-visible)가 들어가게 하고, 같은 만큼 바깥 여백을 당겨 탭 자리는 그대로 둔다 */
.logo-tabs {
  grid-area: tabs;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  min-height: 0;
  margin: -0.6rem;
  padding: 0.6rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.logo-tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: var(--text-2);
}

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

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

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

.logo-page {
  grid-area: title;
  justify-self: end;
  align-self: center;
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.logo-panel {
  grid-area: panel;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 가로로 긴 화면(세 번째 칸 — 폭이 모자라다): 위 한 줄(제목 · 가로 탭 · 쪽 표시, 넘치면 탭이 다음 줄로) + 그 아래 격자 */
@media (min-aspect-ratio: 19/10) {
  .logo-wall {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .logo-head {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.6rem;
    min-width: 0;
  }

  .logo-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .logo-tab {
    justify-content: center;
    padding: 0 1.4rem;
    white-space: nowrap;
    text-align: center;
  }

  .logo-page {
    margin-left: auto;
  }

  .logo-panel {
    flex: 1 1 0;
  }
}

.logo-grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.8rem 1.2rem;
}

.logo-grid.is-entering {
  animation: logo-enter 0.3s ease-out;
}

@keyframes logo-enter {
  from {
    opacity: 0;
  }
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.logo-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--fs-small);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.pm-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-top: 1.6rem;
}

/* ── 고객현황: 도구줄 두 줄(① 분류 칩 한 줄 ② 검색 · 신규만 보기 · 초기화) ───────────────────── */

.customers-toolbar {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.8rem;
  padding: 0.8rem 1.6rem;
}

.toolbar-line {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: 0;
}

.toolbar-line .search-input {
  width: 40rem;
}

/* 신규만 보기: 누르면 파란 바탕(칩과 같은 말투), 안의 NEW 배지는 표의 신규 배지와 같은 모양 */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  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);
}

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

.toggle-btn[aria-pressed='true'] .badge-new {
  background: var(--surface);
}

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

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

.badge-new {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 0.9rem;
  border-radius: 0.5rem;
  background: var(--blue-soft);
  font-size: var(--fs-eyebrow);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--blue-strong);
}

.cell-date {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* 지역 표(경리나라 고객현황): 머리(제목 · 기준) → 표 → 안내 */
.region-card {
  flex: 0 0 auto;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2.4rem;
  padding: 2rem 2.4rem 1.6rem;
}

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

.card-meta {
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.cell-figure {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.share-cell {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.share-cell .bar-track {
  flex: 1 1 auto;
}

.share-cell .bar-share {
  min-width: 6.4rem;
  font-size: var(--fs-table);
  font-weight: 800;
  text-align: right;
  color: var(--ink);
}

.region-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 2.4rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-2);
}

.region-note-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: var(--blue);
}