/* =========================================================
   pages/esg.css — ESG 전용
   ⚠ page-esg.php 담당. 다른 페이지 클래스 정의 금지.
   Figma node 207-1365 기준: 라임→그린 그라데이션 링 + 방사형 다이어그램.
   ========================================================= */

/* ── 방사형 다이어그램: 중앙 원 + 3 브랜치(좌:Social / 우상:Env / 우하:Gov) + 커넥터 ── */
.esg-diagram { position: relative; height: 440px; max-width: 1200px; margin: 72px auto 0; }
.esg-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.esg-lines path { stroke-linecap: round; }

/* 중앙 원 — Figma 207-1365: 얇은 초록 '외곽선' 원(안은 투명), 지구본 + ESG(초록)
   ⚠ 중앙 정렬은 transform이 아닌 inset+margin:auto 로 처리 (reveal-group transform 스태거 충돌 방지) */
.esg-circle {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: 300px; height: 300px; border-radius: 50%;
  border: 1.5px solid var(--green); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--green);
}
.esg-circle .ic { position: relative; z-index: 1; width: 62px; height: 62px; color: var(--green); }
.esg-circle .ic svg { width: 100%; height: 100%; display: block; }
.esg-circle .lbl {
  position: relative; z-index: 1; color: var(--green);
  font-family: var(--font-head); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: .01em;
}

/* 브랜치 노드 */
.esg-node { position: absolute; z-index: 2; width: 24%; max-width: 320px; }
.esg-node .en-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--ink); margin-bottom: 8px;
}
.esg-node .en-head .ic { width: 32px; height: 32px; color: var(--green); flex-shrink: 0; transition: transform .35s var(--e-back); }
.esg-node .en-head .ic svg { width: 100%; height: 100%; display: block; }
.esg-node p { font-size: 16px; color: var(--gray); line-height: 1.6; }

/* 좌: Social — 원쪽(오른쪽)으로 정렬, 아이콘은 라벨 뒤. 세로중앙은 flex로 (transform 미사용) */
.esg-node.pos-social {
  left: 0; top: 0; bottom: 0; width: 23%; text-align: right;
  display: flex; flex-direction: column; justify-content: center;
}
.esg-node.pos-social .en-head { justify-content: flex-end; }
/* 우상: Environmental / 우하: Governance */
.esg-node.pos-env { right: 0; top: 12%; }
.esg-node.pos-gov { right: 0; top: 66%; }

/* hover: 아이콘 살짝 반응 (중앙 정렬을 transform으로 하지 않으므로 scale만) */
.esg-node:hover .en-head .ic { transform: translateY(-2px) scale(1.08); }
.esg-circle { transition: transform .5s var(--e-expo); }
.esg-diagram:hover .esg-circle { transform: scale(1.015); }

/* ── 성과 밴드 ── */
.esg-achieve { position: relative; padding: 100px var(--gutter); color: #fff; overflow: hidden; }
.esg-achieve .ea-bg { position: absolute; inset: 0; z-index: 0; }
.esg-achieve .ea-bg img { width: 100%; height: 100%; object-fit: cover; }
.achieve-inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; }
/* Figma section06 실측: 흰색 프로스트 카드, 넓은 박스 */
.achieve-list {
  max-width: 1294px; padding: 20px 50px;
  background: rgba(255,255,255,.3); border-radius: 20px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.achieve-item {
  padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,.7);
  transition: transform .35s var(--e-expo);
}
.achieve-item:last-child { border-bottom: 0; }
.achieve-item:hover { transform: translateX(4px); }
.achieve-item h3 { font-family: var(--font-head); font-size: 36px; font-weight: 800; line-height: 1.2; letter-spacing: -0.9px; }
.achieve-item p { margin-top: 20px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.65px; color: #fff; }

/* ── 반응형 ── */
@media (max-width: 1200px) {
  .esg-diagram { max-width: 960px; }
  .esg-node { width: 26%; }
}
@media (max-width: 1024px) {
  .esg-diagram { height: 400px; }
  .esg-circle { width: 200px; height: 200px; }
  .esg-circle .ic { width: 54px; height: 54px; }
  .esg-circle .lbl { font-size: 38px; }
  .esg-node { width: 27%; max-width: 300px; }
  .esg-node .en-head { font-size: 20px; }
  .esg-node p { font-size: 15px; }
  .esg-achieve { padding: 84px var(--gutter); }
  .achieve-item h3 { font-size: 30px; }
  .achieve-item p { font-size: 22px; }
}

/* 태블릿·모바일: 방사형 → 세로 스택으로 리플로우 (커넥터 숨김) */
@media (max-width: 768px) {
  .esg-diagram {
    position: static; height: auto; max-width: 520px; margin: 40px auto 0;
    display: flex; flex-direction: column; align-items: center; gap: 34px;
  }
  .esg-lines { display: none; }
  /* position:relative 유지 — ::before 링이 원 안에 클리핑되도록 (static이면 링이 새어나감) */
  .esg-circle {
    position: relative; inset: auto; transform: none; margin: 0 auto;
    width: 200px; height: 200px;
  }
  .esg-diagram:hover .esg-circle { transform: none; }
  .esg-node,
  .esg-node.pos-social,
  .esg-node.pos-env,
  .esg-node.pos-gov {
    position: static; transform: none; width: 100%; max-width: 420px;
    text-align: center;
  }
  .esg-node .en-head { justify-content: center; }
  .esg-node.pos-social .en-head { justify-content: center; }
  .esg-node p { font-size: 15px; max-width: 34ch; margin-left: auto; margin-right: auto; }
  /* 성과 밴드: 모바일 편안한 여백 + 글래스 카드 풀폭 */
  .esg-achieve { padding: 66px var(--gutter); }
  .achieve-list { max-width: none; padding: 20px 30px; }
  .achieve-item { padding: 28px 6px; }
  .achieve-item h3 { font-size: 26px; }
  .achieve-item p { font-size: 19px; }
}
@media (max-width: 480px) {
  /* 원은 얇은 초록 외곽선 유지(투명 배경) — 크기만 축소, 180px 유지 */
  .esg-circle { width: 180px; height: 180px; }
  .esg-circle .ic { width: 50px; height: 50px; }
  .esg-circle .lbl { font-size: 34px; }
  .esg-node .en-head { font-size: 19px; }
  .esg-node p { font-size: 15px; }
  .esg-achieve { padding: 52px var(--gutter); }
  .achieve-list { padding: 16px 22px; border-radius: 22px; }
  .achieve-item { padding: 22px 4px; }
  .achieve-item h3 { font-size: 22px; }
  .achieve-item p { font-size: 16px; }
}