/**
 * 연도별 비교 — related-brands(peer): ui-align(gap10·pad10) 대비 운영 scrollHeight 맞춤.
 * 측정: peerCards 386(prod) vs 400(local 기준) → 약 14px = 세로패딩 1px×6카드 + gap 0.4px×5 등으로 근사.
 */

.yearly-compare-page .brand-detail-page--ftc .related-brands .brand-detail-inline-peers__lead {
  margin: 0 0 6px;
  padding-bottom: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-sub);
}

.yearly-compare-page .brand-detail-page--ftc .related-brands .brand-detail-peer-card {
  padding: 9.35px 12px;
  gap: 12px;
}

@media (max-width: 480px) {
  /* 좌우만 좁혀 모바일 폭에 맞춤 — 세로는 데스크톱과 동일 9.35px 유지 */
  .yearly-compare-page .brand-detail-page--ftc .related-brands .brand-detail-peer-card {
    padding: 9.35px 10px;
  }

  /*
   * 모바일 세로 분해(390/360, prod vs local Playwright):
   * - topWrap: 헤더 셸은 .brand-detail-page 미사용 → 4840 여백 + meta flex wrap 로 로컬만 세로 증가.
   * - seoContent: 본문 리듬을 운영 scrollHeight 에 근접.
   */
  .yearly-compare-page .yearly-compare-top-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .yearly-compare-page .yearly-compare-brand-header-shell .brand-detail-doc-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-wrap: nowrap;
  }

  .yearly-compare-page .yearly-compare-brand-header-shell .brand-meta-row {
    flex-wrap: nowrap;
  }

  .yearly-compare-page .yearly-compare-brand-header-shell.brand-detail-page--ftc .brand-detail-doc-header {
    margin-bottom: 8px;
    padding-top: 0;
    padding-bottom: 6px;
  }

  .yearly-compare-page .yearly-compare-brand-header-shell .brand-detail-doc-title {
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.2;
  }

  .yearly-compare-page .yearly-compare-brand-header-shell .brand-detail-doc-meta,
  .yearly-compare-page .yearly-compare-brand-header-shell .brand-detail-doc-meta .brand-meta-row {
    font-size: 11px;
    line-height: 1.25;
  }

  .yearly-compare-page > .brand-detail-bottom-stack .seo-content p {
    line-height: 1.58;
    margin-bottom: 5px;
  }

  .yearly-compare-page > .brand-detail-bottom-stack .seo-content h2 {
    margin-top: 14px;
    margin-bottom: 7px;
  }

  .yearly-compare-page > .brand-detail-bottom-stack .seo-content h3 {
    margin-top: 11px;
    margin-bottom: 5px;
  }
}