/*
 * ESG-01 참여 기업(/esg) — P5-S1-T1 · ESG-SUP-2(결과만 보여주는 화면으로 정리) ·
 * ESG-HERO-SIGNUP(히어로 전폭 배경 · 새 문구)
 * application.css 와 같은 규칙: 색은 전부 var(--…) 로만 쓰고 새 hex 값은 여기 적지 않습니다.
 * (application.css 는 다른 태스크와 같이 고치는 파일이라, 화면별 파일로 따로 둡니다.)
 */

/* home.css 의 .home-page.layout-full-width 와 같은 방식 — 페이지 컨테이너 패딩을 0으로 비우고
   히어로만 화면 전체 폭(full-bleed)으로 깐 뒤, 다른 절은 각자 좌우 여백을 관리한다. */
.esg-page.layout-full-width {
  max-width: 1280px;
  padding: 0;
}

.esg-home {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* ── 히어로(홈 히어로와 같은 전폭 어두운 바탕 · 나비 심볼 장식) ──────── */
.esg-home__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  padding-left: calc(50vw - min(50vw, 640px) + var(--space-8));
  padding-right: calc(50vw - min(50vw, 640px) + var(--space-8));
  background: var(--color-background-dark);
  overflow: hidden;
}

.esg-home__hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 40rem;
}

.esg-home__hero-title {
  font-size: var(--font-size-title-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-background);
}

.esg-home__hero-lead {
  font-size: var(--font-size-body);
  color: var(--color-ink-muted);
  max-width: 34rem;
}

.esg-home__hero-description {
  font-size: var(--font-size-caption);
  color: var(--color-ink-muted);
  max-width: 34rem;
}

.esg-home__hero-symbol {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .esg-home__hero {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (max-width: 640px) {
  .esg-home__hero {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8) var(--space-4);
  }

  .esg-home__hero-symbol {
    width: 96px;
    height: 96px;
    align-self: center;
  }
}

/* ── 참여 기업 카드(로고 + 기업명만) ──────────────────────────── */
.esg-home__companies {
  padding: 0 var(--space-8);
}

.esg-home__title {
  font-size: var(--font-size-title-lg);
  font-weight: var(--font-weight-bold);
}

.esg-home__lead {
  color: var(--color-text-muted);
  max-width: 40rem;
  margin-top: var(--space-2);
}

.esg-home__company-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .esg-home__companies {
    padding: 0 var(--space-4);
  }

  .esg-home__company-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .esg-home__company-grid {
    grid-template-columns: 1fr;
  }
}

/* P5-S7-T1: 카드 전체가 ESG-07 팝업을 여는 링크입니다(<a>) — 밑줄·링크색을 지우고 카드처럼 보이게 합니다. */
.esg-home__company-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 140px;
  padding: var(--space-4);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.esg-home__company-card:hover,
.esg-home__company-card:focus-visible {
  border-color: var(--color-primary-pressed);
}

.esg-home__company-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
  object-fit: contain;
}

.esg-home__company-logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
}

.esg-home__company-name {
  font-weight: var(--font-weight-bold);
}

/* ── 기업 계정 로그인 · 개인 서포터 안내(화면 맨 아래) ────────── */
.esg-home__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 var(--space-8);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-card);
}

@media (max-width: 1024px) {
  .esg-home__bottom {
    margin: 0 var(--space-4);
  }
}

.esg-home__corporate-login {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.esg-home__supporter-text {
  color: var(--color-text-muted);
}

.esg-home__supporter-link {
  margin-left: var(--space-2);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}