/* ==========================================================================
   A안 · 키비주얼 + 포인트 그린 + Green 지그재그   (사용자 확정 방향, 7/7)
   현재 회사소개 콘텐츠(파트너십·규모·신뢰)의 한계를 인정하고, 무리한 전면
   친환경(B안) 대신 아래 두 가지로 "친환경 인상"을 준다.
     ① 서브헤더 키비주얼 = 친환경 자연 이미지(eco-nature)
     ② 포인트 컬러(accent)만 그린 — 배경 도배는 하지 않음
   Green 섹션은 카드 그리드 → 이미지+텍스트 지그재그로 볼륨을 준다.
   ※ 온전한 ESG로 확장하려면 후트웍의 ESG 가치 원고·자료가 추가로 필요.
   ========================================================================== */

/* --- 포인트 컬러만 블루 → 그린 (배경은 화이트 유지) --- */
.eco-a { --accent: #0a8f5f; --accent-deep: #087a50; }
/* GNB·CTA 버튼은 원래 브랜드 블루 유지 (그린 포인트에서 제외) */
.eco-a .dl-gnb,
.eco-a .ab-cta { --accent: #0082BA; --accent-deep: #006C9C; }

/* --- 서브헤더: 이미지 원색 유지 + 검정 오버레이 0.5 (색상 틴트 제거) --- */
.eco-a .dl-sub { background: #000; }
.eco-a .dl-sub__bg { opacity: 1; filter: contrast(1.15) saturate(1.1); }
/* 음영 오버레이 — 검정 0.5 */
.eco-a .dl-sub::after { content: ''; position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0.5; }
.eco-a .dl-sub .dl-wrap { position: relative; z-index: 2; }
.eco-a .dl-sub__eyebrow { color: #7fe3b4; visibility: visible; }

/* --- 인사말·본문 배경은 화이트 유지. accent 토큰이 그린이라 포인트는 자동 그린 --- */
.eco-a .ab-greeting__ko { color: #0a8f5f; }
.eco-a .ab-greeting__ko::before { background: #0a8f5f; }
.eco-a .ab-greeting__body em { color: #0a8f5f; }

/* ==========================================================================
   Green 섹션 — 지그재그 이미지+텍스트 (좌우 교차)
   ========================================================================== */
.eco-a .ab-esg2 { padding: 150px 0; background: #fff; }
.eco-a .ab-esg2__head { margin-bottom: 18px; }
.eco-a .ab-esg2__head .ab-head__eyebrow { color: #0a8f5f; }
.eco-a .ab-esg2__intro { font-size: 20px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); max-width: none; margin-bottom: 24px; }
.eco-a .ab-esg2__intro b { color: #0a8f5f; font-weight: 600; }

.eco-a .ab-zz { display: flex; flex-direction: column; }
.eco-a .ab-zz__row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 46px 0; }
.eco-a .ab-zz__row--rev .ab-zz__media { order: 2; }

.eco-a .ab-zz__media { position: relative; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; background: linear-gradient(140deg, #e6f5ec, #cfe9da); display: flex; align-items: center; justify-content: center; }
.eco-a .ab-zz__media img { width: 100%; height: 100%; object-fit: cover; }
.eco-a .ab-zz__media--ph { border: 1.5px dashed #86c9a5; }
.eco-a .ab-zz__ph { position: absolute; bottom: 12px; left: 12px; background: rgba(10,143,95,.92); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 14px; letter-spacing: 0.01em; }
.eco-a .ab-zz__media--ph .ab-zz__ph { position: static; background: transparent; color: #4b8f6c; font-size: 14px; }

.eco-a .ab-zz__no { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: #0a8f5f; line-height: 1; }
.eco-a .ab-zz__name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 10px; }
.eco-a .ab-zz__desc { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); }

/* --- 인증 박스 --- */
.eco-a .ab-esg2__cert { display: flex; align-items: center; gap: 18px; margin-top: 54px; padding: 22px 28px; background: #edf9f4; border-radius: 12px; }
.eco-a .ab-esg2__cert-icon { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #0a8f5f; }
.eco-a .ab-esg2__cert-icon svg { width: 24px; height: 24px; stroke: #fff; }
.eco-a .ab-esg2__cert-text { font-size: 15px; line-height: 1.6; color: #2a4a3a; }
.eco-a .ab-esg2__cert-text b { color: #0a8f5f; }

/* --- 반응형 --- */
@media (max-width: 760px) {
	.eco-a .ab-esg2 { padding: 84px 0; }
	.eco-a .ab-zz__row { grid-template-columns: 1fr; gap: 22px; padding: 30px 0; }
	.eco-a .ab-zz__row--rev .ab-zz__media { order: 0; }
	.eco-a .ab-zz__name { font-size: 22px; }
}