/**
 * 브랜드 상세 전용 UI 정렬 (운영 franchise-ranking.com 시각 기준)
 * - 순위 숫자/스냅샷 로직 미포함 · 마크업·간격·폰트만
 * - 로드: cta-primary-override.css 이후 (필요 시 !important 로 피어 버튼 크기만 보정)
 */

/* ---------- [A] H1 + 서브타이틀 ---------- */
.brand-detail-page--ftc h1.brand-title {
  letter-spacing: -0.02em;
}

@media screen and (max-width: 640px) {
  .brand-detail-page--ftc h1.brand-title {
    white-space: normal;
    line-height: 1.35;
    font-size: 18px;
  }

  .brand-detail-page--ftc h1.brand-title .seo-text {
    display: block;
    margin-left: 0;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
  }
}

@media screen and (max-width: 390px) {
  .brand-detail-page--ftc h1.brand-title {
    font-size: 17px;
  }
}

/* ---------- [B] 메타 줄 + 버전 셀렉트 ---------- */
/* 데스크톱: 래퍼는 레이아웃 박스로 취급하지 않음(기존 flex·wrap과 동일) */
.brand-detail-page--ftc .brand-detail-meta-primary {
  display: contents;
}

.brand-detail-page--ftc .brand-detail-doc-meta {
  row-gap: 10px;
  column-gap: 24px;
}

.brand-detail-page--ftc .brand-meta-row .brand-detail-meta-label {
  font-size: 11px;
  font-weight: 600;
}

.brand-detail-page--ftc .brand-version select,
.brand-detail-page--ftc select.brand-detail-version-select {
  min-width: min(100%, 280px);
  max-width: 100%;
  height: 30px;
  padding: 2px 28px 2px 10px;
  font-size: 12px;
  line-height: 1.35;
  border-radius: 6px;
  box-sizing: border-box;
  background-color: var(--bg, #fff);
}

/* 모바일·태블릿(≤768px): PC와 유사한 정보 행 — 상호·업종·기준연도 한 줄(부족 시 2줄까지) + 버전·순위 압축 */
@media screen and (max-width: 768px) {
  .brand-detail-page--ftc .brand-detail-doc-header {
    margin-bottom: 8px;
    padding-bottom: 4px;
  }

  .brand-detail-page--ftc h1.brand-title {
    margin-bottom: 6px;
  }

  .brand-detail-page--ftc .brand-detail-doc-meta {
    flex-direction: column;
    align-items: stretch;
    row-gap: 4px;
    column-gap: 0;
  }

  /* [1행] 상호 / 업종 / 기준연도 — 인라인 덩어리 나란히 (wrap 시 자연스럽게 2줄) */
  .brand-detail-page--ftc .brand-detail-meta-primary {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    width: 100%;
    min-width: 0;
  }

  .brand-detail-page--ftc .brand-detail-meta-primary .brand-meta-row {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 4px 6px;
    min-width: 0;
    max-width: 100%;
    line-height: 1.3;
    flex: 0 1 auto;
  }

  .brand-detail-page--ftc .brand-detail-meta-primary .brand-meta-row .brand-detail-meta-label {
    flex-shrink: 0;
  }

  /* 버전 줄만: 상위 doc-meta column과 무관하게 한 줄 인라인 유지 */
  .brand-detail-page--ftc .brand-meta-row.brand-meta-row--version {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
  }

  /* 정보공개서 버전: 라벨 + 셀렉트 한 줄 · 드롭다운은 내용 폭 기준 컴팩트 */
  .brand-detail-page--ftc .brand-detail-version-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .brand-detail-page--ftc .brand-meta-row--version .brand-version {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px 10px;
  }

  .brand-detail-page--ftc .brand-detail-version-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.35;
  }

  .brand-detail-page--ftc .brand-detail-version-control {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }

  .brand-detail-page--ftc .brand-version select,
  .brand-detail-page--ftc select.brand-detail-version-select {
    /* 전역 블록(상단)의 min-width: min(100%,280px) 덮어 컴팩트 폭 */
    min-width: unset;
    width: auto;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 28px;
    padding: 2px 20px 2px 7px;
    font-size: 11px;
    line-height: 1.35;
  }

  .brand-detail-page--ftc .brand-detail-table-wrap .brand-detail-section-header {
    margin-bottom: 8px;
  }
}

@media screen and (max-width: 480px) {
  /* 상단 메타 칩: 라벨+값 한 덩어리 유지 */
  .brand-detail-page--ftc .brand-detail-meta-primary .brand-meta-row {
    flex-wrap: nowrap;
  }

  /* 버전 줄은 한 줄 우선 */
  .brand-detail-page--ftc .brand-meta-row.brand-meta-row--version {
    flex-wrap: nowrap;
  }

  .brand-detail-page--ftc .brand-meta-row .brand-version:not(.brand-detail-version-row) {
    width: 100%;
    flex-wrap: wrap;
  }

  .brand-detail-page--ftc .brand-detail-version-row {
    width: auto;
    max-width: 100%;
  }
}

/* 극소 폭(약 335px 미만): 버전 줄만 라벨↔셀렉트 줄바꿈, 셀렉트는 컨테이너 폭까지(풀뷰포트 금지는 max-width로) */
@media screen and (max-width: 335px) {
  .brand-detail-page--ftc .brand-detail-version-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .brand-detail-page--ftc .brand-version select,
  .brand-detail-page--ftc select.brand-detail-version-select {
    max-width: 100%;
    width: auto;
    min-width: 0;
  }
}

/* 순위 요약: 연도별 비교와 동일 — `rank-summary-links.css` 단일 소스. style-new `.brand-detail-table-wrap .rank-summary` 17px 제거 */
.brand-detail-page--ftc .brand-detail-table-wrap .rank-summary[data-brand-detail-rank-summary] {
  margin: 0 0 10px;
}

@media screen and (max-width: 480px) {
  .brand-detail-page--ftc .brand-detail-table-wrap .rank-summary[data-brand-detail-rank-summary] {
    margin-bottom: 8px;
  }
}

/* 모바일: 순위 문구를 한 줄(또는 자연스러운 인라인 흐름)로 압축 — 상세 상단 세로 길이 축소 */
@media screen and (max-width: 768px) {
  .brand-detail-page--ftc .brand-detail-table-wrap .rank-summary[data-brand-detail-rank-summary] {
    display: block;
    margin: 2px 0 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  .brand-detail-page--ftc .brand-detail-rank-summary .rank-summary-links {
    display: inline;
    width: auto;
    min-width: 0;
    vertical-align: baseline;
  }

  .brand-detail-page--ftc .brand-detail-rank-summary .rank-summary__item,
  .brand-detail-page--ftc .brand-detail-rank-summary .rank-summary__link {
    display: inline;
    vertical-align: baseline;
  }

  .brand-detail-page--ftc .brand-detail-rank-summary .rank-summary__suffix {
    display: inline;
    font-size: 10px;
    font-weight: 400;
    margin: 0;
    vertical-align: baseline;
  }
}

/* ---------- [D] 같이 많이 보는 브랜드 — 카드/버튼 치수(운영 pill과 통일) ---------- */
.brand-detail-page--ftc .related-brands {
  padding-top: 14px;
}

.brand-detail-page--ftc .related-brands .brand-detail-inline-peers__lead {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.brand-detail-page--ftc .related-brands .brand-detail-peer-cards {
  gap: 10px;
}

.brand-detail-page--ftc .related-brands .brand-detail-peer-card {
  padding: 10px 12px;
  border-radius: 8px;
  gap: 10px;
}

.brand-detail-page--ftc .related-brands .brand-detail-peer-link {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

/* style-new / cta-secondary 와 중복되는 높이·패딩을 운영 pill(26px)에 맞춤 */
.brand-detail-page--ftc .related-brands a.brand-detail-peer-compare-btn.compare-action-pill {
  min-height: 26px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  box-sizing: border-box;
}

/* ---------- 하단 ← 홈으로 · SEO 미니 ---------- */
.brand-detail-page--ftc .seo-content .brand-detail-back {
  margin-top: 20px;
  padding-top: 14px;
  font-size: 12px;
}

.brand-detail-page--ftc .seo-content .brand-detail-back a {
  font-size: 12px;
  font-weight: 500;
}

.brand-detail-page--ftc .seo-mini-wrap {
  margin-top: 10px;
}