/**
 * 운영(franchise-ranking.com) 배포 CSS에서 추출한 업종 허브 블록.
 * 근거: .tmp-prod-style-new.css (저장소 스냅샷) 동일 구간 복사.
 * 로컬 전용 마크업 보조 규칙은 파일 하단에만 추가.
 */

/* —— 업종별 핵심데이터 허브 /industry/{slug} —— */
/* 상단 레이아웃·필터·컨테이너는 순위 페이지와 동일 클래스 (style-new.css). 본문만 아래 보조 규칙. */

/* 허브만: 상단 블록 간격 소폭 축소 (순위 페이지 .ranking-page / .ranking-top-main 은 유지) */
.industry-hub-page.ranking-page {
  gap: 16px;
}

.industry-hub-page .ranking-top-main {
  gap: 12px;
}

/*
 * 상단 필터 2개만 사용하는데 `.ranking-filter-bar--grid` 가 repeat(4)라
 * 각 항목이 25% 폭만 쓰고 오른쪽 50%가 비어 보임 → 허브만 2열 균등.
 * padding/gap/align-items 는 style-new.css 공통값 유지.
 */
.industry-hub-page .ranking-filter.ranking-filter-bar--grid {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.industry-hub-page .ranking-filter.ranking-filter-bar--grid .ranking-filter-group {
  min-width: 0;
}

@media (max-width: 479px) {
  .industry-hub-page .ranking-filter.ranking-filter-bar--grid {
    grid-template-columns: 1fr;
  }
}

/* 본문(#industryHubMainRoot): 섹션 간격은 이 flex gap만 사용 — 자식 margin 누적 제거 */
.industry-hub-page .ranking-results-root {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.industry-hub-page .ranking-results-root > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* style-new .ranking-subheading(24px/12px) 본문 중첩 방지 */
.industry-hub-page .ranking-results-root .ranking-subheading {
  margin-top: 0;
  margin-bottom: 0;
}

.industry-hub-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.industry-hub-section--top3 {
  gap: 16px;
}

.industry-hub-section > .ranking-subheading {
  margin-top: 0;
  margin-bottom: 0;
}

.industry-hub-avg-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  row-gap: 6px;
}

.industry-hub-avg-heading__title {
  flex: 0 0 auto;
}

.industry-hub-avg-heading__count {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

.industry-hub-avg-heading__count strong {
  font-weight: 600;
  color: var(--text, #111827);
}

body.dark-mode .industry-hub-avg-heading__count {
  color: var(--text-muted, #9ca3af);
}

body.dark-mode .industry-hub-avg-heading__count strong {
  color: var(--text, #f3f4f6);
}

.industry-hub-avg-panel {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  padding: 12px 12px 14px;
}

body.dark-mode .industry-hub-avg-panel {
  background: var(--surface, #111827);
  border-color: var(--border, #374151);
}

/* 폐점률·성장률 산식 안내 — KPI TOP3 묶음 바로 위 (세로 간격은 .ranking-results-root gap) */
.industry-hub-avg-footnote {
  margin: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-muted, #6b7280);
  max-width: 100%;
}

body.dark-mode .industry-hub-avg-footnote {
  color: var(--text-muted, #9ca3af);
}

.industry-hub-avg-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1024px) {
  .industry-hub-avg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .industry-hub-avg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .industry-hub-avg-grid {
    grid-template-columns: 1fr;
  }
}

.industry-hub-avg-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  padding: 16px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-light, #f3f4f6);
  background: var(--surface-muted, #f9fafb);
  box-shadow: none;
}

body.dark-mode .industry-hub-avg-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border, #374151);
}

.industry-hub-avg-label {
  font-size: 0.8rem;
  color: var(--text-secondary, #555);
  margin-bottom: 6px;
  line-height: 1.3;
}

body.dark-mode .industry-hub-avg-label {
  color: rgba(243, 244, 246, 0.72);
}

/* 값 + 단위 한 줄 (제목 + 값행 = 카드 2줄) */
.industry-hub-avg-value {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.industry-hub-avg-value.kpi-value {
  gap: 8px;
}

.industry-hub-avg-number {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text, #111827);
}

body.dark-mode .industry-hub-avg-number {
  color: var(--text, #f3f4f6);
}

.industry-hub-avg-unit {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-sub, #6b7280);
}

.industry-hub-avg-unit.kpi-unit {
  font-size: calc(1.25rem * 0.68);
}

body.dark-mode .industry-hub-avg-unit {
  color: var(--text-muted, #9ca3af);
}

.industry-hub-top3-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* KPI TOP3: 순위페이지 테이블 래퍼 톤 + 미니 열 폭 */
.industry-hub-kpi-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.industry-hub-kpi-block__head {
  width: 100%;
  min-width: 0;
}

/* 제목(좌) + 단위 보조메타(우), 표 바로 위 한 줄 — 좁은 화면에서는 단위만 아래 줄 우측 */
.industry-hub-kpi-block__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.industry-hub-kpi-block__title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: var(--text, #111827);
}

.industry-hub-kpi-block__unit {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .industry-hub-kpi-block__unit {
    flex-basis: 100%;
    margin-left: 0;
    text-align: right;
    white-space: normal;
  }
}

.industry-hub-kpi-block__title .industry-hub-sort-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
}

body.dark-mode .industry-hub-kpi-block__title {
  color: var(--text, #f3f4f6);
}

body.dark-mode .industry-hub-kpi-block__title .industry-hub-sort-hint {
  color: var(--text-muted, #9ca3af);
}

body.dark-mode .industry-hub-kpi-block__unit {
  color: var(--text-sub, #94a3b8);
}

.industry-hub-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  row-gap: 4px;
}

.industry-hub-sort-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

body.dark-mode .industry-hub-sort-hint {
  color: var(--text-muted, #9ca3af);
}

/* 업종 허브 하단: KPI별 전체 순위 미니카드 그리드 (동일 위계) */
.industry-hub-kpi-rank-hub {
  margin-top: 0;
  margin-bottom: 0;
  padding: 16px 14px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-muted, #f9fafb);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.industry-hub-kpi-rank-hub__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.35;
  color: var(--text, #111827);
  letter-spacing: -0.02em;
}

.industry-hub-kpi-rank-hub__lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #6b7280);
}

.industry-hub-kpi-rank-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .industry-hub-kpi-rank-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .industry-hub-kpi-rank-hub__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.industry-hub-kpi-rank-hub__card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 14px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  color: var(--text, #111827);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  word-break: keep-all;
}

.industry-hub-kpi-rank-hub__card:hover {
  background: var(--surface-muted, #f3f4f6);
  border-color: var(--border-strong, #d1d5db);
}

.industry-hub-kpi-rank-hub__card:focus-visible {
  outline: 2px solid var(--navy, #1e3a5f);
  outline-offset: 2px;
}

.industry-hub-kpi-rank-hub__card:active {
  opacity: 0.92;
}

body.dark-mode .industry-hub-kpi-rank-hub {
  border-color: var(--border-light);
  background: var(--bg-section);
}

body.dark-mode .industry-hub-kpi-rank-hub__title {
  color: var(--text-main);
}

body.dark-mode .industry-hub-kpi-rank-hub__lead {
  color: var(--text-sub);
}

body.dark-mode .industry-hub-kpi-rank-hub__card {
  color: var(--text-main);
  background: var(--bg-card);
  border-color: var(--border-light);
}

body.dark-mode .industry-hub-kpi-rank-hub__card:hover {
  background: var(--bg-card-soft);
  border-color: var(--border-strong);
}

body.dark-mode .industry-hub-kpi-rank-hub__card:focus-visible {
  outline: 2px solid var(--dm-link-focus-ring);
  outline-offset: 2px;
}

.industry-hub-seo-footer.seo-content.ranking-related-links {
  margin-top: 0;
}

.industry-hub-seo-footer.seo-content h2:first-child {
  margin-top: 0;
}

.industry-hub-seo-footer.seo-content {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted, #6b7280);
}

.industry-hub-seo-footer.seo-content h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #111827);
}

body.dark-mode .industry-hub-seo-footer.seo-content h2 {
  color: var(--text, #f3f4f6);
}

.industry-hub-seo-footer.seo-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--navy, #1e3a5f);
}

body.dark-mode .industry-hub-seo-footer.seo-content a,
body.dark-mode .industry-hub-seo-footer.seo-content a:visited {
  color: var(--dm-link);
  text-decoration-color: var(--dm-link-decoration);
}
body.dark-mode .industry-hub-seo-footer.seo-content a:hover {
  color: var(--dm-link);
  text-decoration-color: var(--dm-link-decoration-strong);
}
body.dark-mode .industry-hub-seo-footer.seo-content a:focus-visible {
  outline: 2px solid var(--dm-link-focus-ring);
  outline-offset: 2px;
  color: var(--dm-link);
}

.industry-hub-loading-msg,
.industry-hub-error {
  padding: 24px 12px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted, #6b7280);
}

.industry-hub-error.ranking-error {
  color: #dc2626;
}

.industry-hub-error a {
  color: var(--navy, #1e3a5f);
  font-weight: 600;
}

/* --- 허브 섹션 상위 제목: 업종 평균 KPI · KPI TOP3 브랜드 (style-new `.ranking-subheading` 동일 계열) --- */
.industry-hub-page h2.industry-hub-section-title.ranking-subheading {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--text, #111827);
}

body.dark-mode .industry-hub-page h2.industry-hub-section-title.ranking-subheading {
  color: var(--text, #f3f4f6);
}

/* KPI TOP3 묶음 직속 h2 — 본문 .ranking-subheading 리셋보다 높은 특이도 */
.industry-hub-page .ranking-results-root .industry-hub-section--top3 > h2.industry-hub-section-title.ranking-subheading {
  margin: 0 0 12px;
}

/* --- KPI별 소제목: 상위 섹션 제목보다 2단계 작은 타입 스케일 (1rem → 0.875rem → 0.8125rem) --- */
.industry-hub-page .ranking-results-root .hub-kpi-top3-sub-title.ranking-subheading,
.industry-hub-page .ranking-results-root h3.industry-hub-subsection-title.ranking-subheading {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text, #111827);
}

body.dark-mode .industry-hub-page .ranking-results-root .hub-kpi-top3-sub-title.ranking-subheading,
body.dark-mode .industry-hub-page .ranking-results-root h3.industry-hub-subsection-title.ranking-subheading {
  color: var(--text-main, #f3f4f6);
}

/* --- KPI별 TOP3: 2열 그리드 · 순위 표 마크업 재사용 --- */
.industry-hub-kpi-top3-bundle {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
}

.industry-kpi-top3-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

@media (max-width: 768px) {
  .industry-hub-page .ranking-results-root {
    gap: 16px;
  }

  .industry-kpi-top3-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 2열 그리드용 우측 빈 칸 — 모바일 1열에서는 숨김 */
  .hub-kpi-top3-grid-spacer {
    display: none;
  }

  /*
   * 순위 페이지 모바일: PC 표는 숨기고 `.ranking-mobile-flex` 만 표시 (style-new.css).
   * 업종 허브 KPI TOP3에는 flex 표가 없으므로 동일 마크업의 table 이 그대로 숨겨져 제목만 보임.
   * 허브 전용 래퍼에서 table 을 복원하고, 넓은 표는 래퍼에서 가로 스크롤.
   */
  .ranking-table-wrapper.industry-hub-mini-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .ranking-table-wrapper.industry-hub-mini-table-wrap .ranking-table {
    display: table !important;
    width: 100%;
    min-width: 0;
  }

  /*
   * TOP3 모바일 열: 브랜드 가변 열에 폭 이전 — KPI 는 데스크톱 대비 ~25% 축소(72→54px 대역)
   * 데스크톱 col 인라인: 48 / — / 70 / 70 / 80
   */
  .ranking-table-wrapper.industry-hub-mini-table-wrap .hub-kpi-top3-table col.hub-top3-col-rank {
    width: 42px !important;
  }

  .ranking-table-wrapper.industry-hub-mini-table-wrap .hub-kpi-top3-table col.hub-top3-col-brand {
    width: auto !important;
  }

  .ranking-table-wrapper.industry-hub-mini-table-wrap .hub-kpi-top3-table col.hub-top3-col-kpi {
    width: 54px !important;
    max-width: 62px !important;
  }

  .ranking-table-wrapper.industry-hub-mini-table-wrap .hub-kpi-top3-table col.hub-top3-col-year {
    width: 70px !important;
  }

  .ranking-table-wrapper.industry-hub-mini-table-wrap .hub-kpi-top3-table col.hub-top3-col-action {
    width: 80px !important;
  }

  /* KPI 값 칸(회색): 가독 유지 범위에서 패딩만 소폭 축소 */
  .ranking-table-wrapper.industry-hub-mini-table-wrap .hub-kpi-top3-table td.ranking-kpi-col--sort {
    padding-left: 3px;
    padding-right: 3px;
  }

  /* 브랜드 열: 남는 폭 우선 — ellipsis 기존 유지, 셀 최소 폭 완화 */
  .ranking-table-wrapper.industry-hub-mini-table-wrap .hub-kpi-top3-table td.ranking-brand-name {
    min-width: 0;
  }
}

/* 그리드 셀: 순위 표 래퍼만 카드 톤(style-new `.ranking-table-wrapper`) — 바깥 이중 카드 없음 */
.hub-kpi-top3-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 서브 타이틀 여백은 `.hub-kpi-top3-sub-title` 에서 통일 */

/* 마지막 행 오른쪽 빈 칸(5개 KPI → 2×3 그리드) */
.hub-kpi-top3-grid-spacer {
  visibility: hidden;
  pointer-events: none;
  padding: 0;
  border: none;
  background: transparent;
  min-height: 0;
}

.industry-hub-kpi-top3-block {
  margin-bottom: 0;
}

.industry-hub-mini-table-wrap {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* TOP3 표: style-new `.ranking-table` / wrapper / meta — 허브 전용 폰트·패딩 오버라이드 없음 */

/* --- 업종별 SEO 설명 (데이터 안내 바로 위, 카드·보더 없음) --- */
.industry-seo-text {
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-sub, #6b7280);
  max-width: 100%;
  box-sizing: border-box;
}

.industry-seo-text__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-main, #111827);
  line-height: 1.45;
}

.industry-seo-text__meta {
  font-size: 12px;
  color: var(--text-sub, #6b7280);
  margin: 0 0 10px;
  line-height: 1.5;
}

.industry-seo-text__p {
  margin: 0 0 10px;
}

.industry-seo-text__p:last-child {
  margin-bottom: 0;
}

body.dark-mode .industry-seo-text {
  color: var(--compare-muted, #aeb9c8);
}

body.dark-mode .industry-seo-text__title {
  color: var(--text-main, #f3f4f6);
}

body.dark-mode .industry-seo-text__meta {
  color: var(--compare-muted, #aeb9c8);
}