@charset "utf-8";

/* ============================================================
   ESG 경영 › ESG 정책
   확정본: spci-esg-preview.html (2026-09-14 수령) — 구조 · 문구 · 컴포넌트 규격은 그대로,
   색 · 글꼴 · 괘선은 공용 토큰(style.css)으로 바꿨다.

   공용에서 가져다 쓰는 것
     page-hero.css          히어로
     page-tabs.css          하위 메뉴 (ESG 정책 · ESG 인증 — 페이지 둘)
     page-infra.css         .infra-wrap(1400) · .infra-sec__title
     tab-table.css/.js      인권 10대 원칙 표 · 인증 표
     page-certificate.css   인증서 카드(.cert-card) — 갤러리
     style.css              .policy · .goal (방침 문서 · 안전보건 목표)

   두 페이지가 이 파일을 함께 쓴다 — ESG 정책 esg/policy.html · ESG 인증 esg/certification.html.
   이 파일은 페이지 고유의 배치만 맡는다 — 인트로, 카드 여섯, 방침 탭 + 문서 하나, 인증 갤러리, Contact 띠.
   모든 치수는 calc(N * var(--u)). px 하드코딩 없음.
   ============================================================ */

.esg-page {
  /* ESG 세 축의 색 (2026-09-14). E 환경 초록 · S 사회 코발트(사이트 포인트) · G 거버넌스 네이비.
     카드 · 문서 머리 · 범례가 data-pillar 로 이 색을 받는다 */
  --pillar-e: #2f9e6a;
  --pillar-s: var(--sub-point);
  --pillar-g: #22395e;
  --pillar: var(--sub-point);
  /* 옅은 바탕 — 흰 판 대신 청록으로 살짝 기운 단색 (그라데이션 없음, 2026-09-14) */
  --esg-wash: #f3f7fb;

  /* 공용 모듈이 페이지 변수로 색을 받는다 — 전부 공용 토큰으로 이어 준다 */
  --infra-point: var(--sub-point);
  --infra-ink:   var(--sub-ink);
  --bm-point:    var(--sub-point);
  --bm-ink:      var(--sub-ink);
  --bm-soft:     #f8f8f8;
  --cert-point:  var(--sub-point);
  --cert-ink:    var(--sub-ink);
  /* 인증서 카드 — 네 장이 1400 에 들어가게 (320 × 4 + 40 × 3 = 1400). A4 비율(0.706) 유지 */
  --card-w: 320;
  --card-gap: 40;
  --img-w: 240;
  --img-h: 340;
  --card-r: 15;
}

[data-pillar="E"] { --pillar: var(--pillar-e); }
[data-pillar="S"] { --pillar: var(--pillar-s); }
[data-pillar="G"] { --pillar: var(--pillar-g); }

/* ==================== 히어로 — 사진이 없을 때는 공용 어두운 바탕(#10151f) 그대로 ==================== */
.esg-page .page-hero {
  height: calc(380 * var(--u));         /* 공용 430. 이 페이지는 메시지를 아래 선언 패널이 맡아 표지를 한 단 낮춘다 (첫 블록 ≤ 940) */
}
/* 동심원 무늬는 뺐다 (2026-09-14). 사진이 오면 공용 딤만 덮인다 */

/* ==================== 인트로 — 밝은 선언 (2026-09-14) ====================
   히어로가 사진(어두운 판)이라 바로 아래에 또 짙은 판을 두면 겹쳐 보였다 → 판 없이 흰 바탕 위에
   왼쪽 큰 글 · 오른쪽 E S G 윤곽 글자(축 색 선만) · 아래 수치 칩 셋.
   첫 블록(헤더 + 히어로 + 하위 메뉴 + 인트로)이 940 안에 들어야 한다 (js/page-esg.js 의 ?hud 로 잰다) */
.esg-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: calc(80 * var(--u));
  align-items: center;
  margin-top: calc(56 * var(--u));
  color: var(--sub-ink);
}
.esg-intro__copy { max-width: calc(900 * var(--u)); }
/* 눈썹 — 짧은 코발트 선 + 영문 */
.esg-intro__eyebrow {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: max(calc(14 * var(--u)), 11px);
  letter-spacing: .12em;
  color: var(--sub-point);
}
.esg-intro__eyebrow::before { content: ""; width: calc(40 * var(--u)); height: 2px; background: var(--sub-point); }
.esg-intro__title {
  margin: calc(22 * var(--u)) 0 0;
  font-weight: 700;
  font-size: max(calc(46 * var(--u)), 24px);
  line-height: 1.25;
  letter-spacing: -.03em;
  word-break: keep-all;
}
.esg-intro__desc {
  margin: calc(28 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(18 * var(--u)), 14px);
  line-height: 1.75;
  letter-spacing: -.01em;
  color: var(--ink-mid);
  word-break: keep-all;
}
/* E · S · G — 큼직한 글자 셋. 축 색으로 늘 채워져 있고(2026-09-19, 이전엔 윤곽만 → 짚으면 채움),
   짚으면 글자가 살짝 떠오르며 그림자가 생기고 아래 영문 라벨에 밑줄이 왼→오로 그려진다 */
.esg-intro__letters {
  display: flex;
  gap: calc(28 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.esg-intro__letters li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
}
.esg-intro__letters b {
  font-family: "Open Sans", var(--font-base);
  font-weight: 800;
  font-size: calc(150 * var(--u));
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--pillar);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), filter .45s ease;
  will-change: transform;
}
.esg-intro__letters span {
  position: relative;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: max(calc(12 * var(--u)), 10px);
  letter-spacing: .1em;
  color: var(--pillar);
}
.esg-intro__letters span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-5 * var(--u));
  height: 2px;
  background: var(--pillar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) {
  .esg-intro__letters li:hover b {
    transform: translateY(calc(-10 * var(--u))) scale(1.04);
    filter: drop-shadow(0 calc(14 * var(--u)) calc(18 * var(--u)) rgba(17, 20, 24, .22));
  }
  .esg-intro__letters li:hover span::after { transform: scaleX(1); }
}
/* 수치 칩 셋 — 흰 알약, 옅은 테두리 */
.esg-intro__stat {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
  margin: calc(40 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.esg-intro__stat li {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border: 1px solid var(--line-track);
  border-radius: 999px;
  background: var(--color-white);
}
.esg-intro__stat strong {
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: max(calc(22 * var(--u)), 16px);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.esg-intro__stat span {
  font-size: max(calc(14 * var(--u)), 12px);
  letter-spacing: -.01em;
  color: var(--ink-mid);
}
/* ==================== 한눈에 보기 — 방침 카드 여섯 (3 × 2) ====================
   장비인프라 설비 카드와 같은 어법: 흰 카드 · 테두리 · 위쪽 코발트 선 · 짚으면 떠오른다.
   카드 전체(.esg-ov__link)가 아래 문서로 가는 링크이고, PDF 는 오른쪽 위 작은 알약이다 */
.esg-overview { margin-top: calc(110 * var(--u)); }   /* 인트로 → 카드 (2026-09-14 간격 확대) */
/* E · S · G 범례 — 카드 위 한 줄 */
.esg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u)) calc(28 * var(--u));
  margin: 0 0 calc(28 * var(--u));
  padding: 0;
  list-style: none;
  font-size: max(calc(14 * var(--u)), 12px);
  letter-spacing: -.01em;
  color: var(--ink-mid);
}
.esg-legend__item { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); }
.esg-legend__item b,
.esg-pillar {
  display: inline-grid;
  place-items: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--pillar);
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: max(calc(12 * var(--u)), 10px);
  line-height: 1;
  color: var(--color-white);
}
.esg-ov__en .esg-pillar,
.policy__eyebrow .esg-pillar { margin-right: calc(8 * var(--u)); vertical-align: middle; }
.esg-overview__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.esg-ov {
  position: relative;
  border: 1px solid var(--line-track);
  border-radius: calc(15 * var(--u));
  background: var(--color-white);
  overflow: hidden;
  transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.esg-ov::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(3 * var(--u));
  background: var(--pillar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.esg-ov__link {
  display: flex;
  flex-direction: column;
  min-height: calc(250 * var(--u));
  padding: calc(30 * var(--u)) calc(32 * var(--u)) calc(28 * var(--u));
  color: var(--sub-ink);
}
.esg-ov__no {
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: max(calc(24 * var(--u)), 15px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pillar);
}
.esg-ov__en {
  margin-top: calc(22 * var(--u));
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: max(calc(12 * var(--u)), 11px);
  letter-spacing: .06em;
  color: var(--gray);
}
.esg-ov__name {
  margin-top: calc(6 * var(--u));
  font-weight: 700;
  font-size: max(calc(22 * var(--u)), 17px);
  line-height: 1.35;
  letter-spacing: -.03em;
  word-break: keep-all;
  transition: color .3s ease;
}
.esg-ov__sum {
  flex: 1 1 auto;
  margin-top: calc(14 * var(--u));
  font-weight: 300;
  font-size: max(calc(15.5 * var(--u)), 13px);
  line-height: 1.6;
  letter-spacing: -.02em;
  color: var(--ink-mid);
  word-break: keep-all;
}
.esg-ov__more {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(22 * var(--u));
  font-weight: 600;
  font-size: max(calc(14 * var(--u)), 12px);
  color: var(--sub-point);
}
.esg-ov__more::after {
  content: "";
  width: calc(18 * var(--u));
  height: 1px;
  background: currentColor;
  transition: width .35s cubic-bezier(.22, .61, .36, 1);
}
.esg-ov__pdf {
  position: absolute;
  top: calc(26 * var(--u));
  right: calc(26 * var(--u));
  display: inline-flex;
  align-items: center;
  height: calc(30 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: 1px solid var(--line-track);
  border-radius: 999px;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: max(calc(11 * var(--u)), 10px);
  letter-spacing: .06em;
  color: var(--ink-mid);
  background: var(--color-white);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.esg-ov__pdf:hover,
.esg-ov__pdf:focus-visible { background: var(--sub-ink); border-color: var(--sub-ink); color: var(--color-white); }
@media (hover: hover) {
  .esg-ov:hover,
  .js .esg-ov[data-reveal].is-in:hover {
    border-color: var(--pillar);
    box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(19, 90, 156, .12);
    transform: translateY(calc(-4 * var(--u)));
  }
  .esg-ov:hover::before { transform: scaleX(1); }
  .esg-ov:hover .esg-ov__name { color: var(--pillar); }
  .esg-ov:hover .esg-ov__more::after { width: calc(30 * var(--u)); }
}
.js .esg-page .esg-ov[data-reveal] { transition-delay: calc(var(--d, 0) * .08s); }

/* ==================== 방침 — 왼쪽 sticky 내비 + 문서 열 ====================
   옅은 바탕은 화면 전체 폭으로 깔린다(.esg-policies 는 .infra-wrap 밖) */
.esg-policies {
  position: relative;
  margin-top: calc(120 * var(--u));
  padding: calc(96 * var(--u)) 0 calc(110 * var(--u));
  background: var(--esg-wash);
  overflow: clip;                       /* 워터마크가 옆으로 넘친다 (hidden 은 sticky 를 죽인다) */
}
/* 워터마크 — 큼직한 E S G 가 구역 안에서 스크롤을 따라 내려온다(sticky). 메인 3섹션 워터마크와 같은 어법.
   높이 0 인 sticky 블록 위에 글자만 넘쳐 보이므로 문서 열의 흐름을 밀지 않는다 */
.esg-policies::before {
  content: "E S G";
  position: sticky;
  top: calc(var(--gnb-h) * var(--u) + 6vh);
  z-index: 0;
  display: block;
  height: 0;
  margin-top: calc(-60 * var(--u));
  text-align: right;
  transform: translateX(calc(20 * var(--u)));
  font-family: "Open Sans", var(--font-base);
  font-weight: 800;
  font-size: calc(300 * var(--u));
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(19, 90, 156, .05);
  pointer-events: none;
  user-select: none;
}
/* 문서 머리의 번호 · 선도 축 색을 따른다 */
.esg-page .policy__no { color: var(--pillar); }
.esg-page .policy__body-in > :first-child { border-top-color: var(--pillar); }

/* ==================== 방침 탭 바 (2026-09-14) ====================
   하위 메뉴(sub-tabs)와 같은 어법을 한 단 아래 크기로 — 밑줄이 현재 탭에 깔린다.
   방침 구역 상단에 고정(제자리). 화면을 따라오지 않는다 — 따라오는 것은 워터마크만.
   긴 문서를 읽다 다른 방침으로 갈 때는 문서 아래 PREV · NEXT 를 쓴다 */
.esg-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: calc(8 * var(--u));
  margin: 0 0 calc(40 * var(--u));
  padding: 0;
  border-bottom: 1px solid var(--line-track);
}
.esg-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));
  border: 0;
  background: none;
  font: inherit;
  font-size: max(calc(17 * var(--u)), 13px);
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--ink-mid);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease;
}
.esg-tabs__tab i {
  font-family: "Open Sans", var(--font-base);
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: .85em;
  color: var(--gray);
  transition: color .2s ease;
}
.esg-tabs__tab .esg-pillar { width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: max(calc(11 * var(--u)), 9px); opacity: .55; transition: opacity .2s ease; }
.esg-tabs__tab::after {
  content: "";
  position: absolute;
  left: calc(18 * var(--u));
  right: calc(18 * var(--u));
  bottom: -1px;
  height: calc(3 * var(--u));
  background: var(--pillar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.esg-tabs__tab:hover,
.esg-tabs__tab:focus-visible { color: var(--sub-ink); }
.esg-tabs__tab:focus-visible { outline: 2px solid var(--pillar); outline-offset: -2px; border-radius: calc(6 * var(--u)); }
.esg-tabs__tab[aria-selected="true"] { color: var(--sub-ink); font-weight: 700; }
.esg-tabs__tab[aria-selected="true"] i { color: var(--pillar); }
.esg-tabs__tab[aria-selected="true"] .esg-pillar { opacity: 1; }
.esg-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }

/* 문서 — 여섯 중 하나만. 바뀔 때 짧게 떠오른다 (높이 애니메이션 · 스크롤 이동 없음) */
.esg-docs .policy[hidden] { display: none; }
.esg-docs .policy + .policy { margin-top: 0; }
/* 탭을 바꾸면 문서가 한 번에 뜨지 않고 위에서 아래로 차례로 들어온다 (2026-09-14):
   번호 → 눈썹 · 제목 → 머리 아래 선(왼→오) → 서문 → 조항 하나씩 → 하단 줄. 전부 합쳐 0.8초 안에 끝난다.
   display:none 에서 다시 보이는 순간 애니메이션이 처음부터 재생되므로 스크립트가 따로 할 일은 없다.
   fill-mode 는 backwards — 애니메이션이 돌지 않는 환경에서도 내용이 숨어 있지 않도록 */
@keyframes esgDocIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes esgNoIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes esgRuleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js .esg-docs .policy.is-active .policy__no { animation: esgNoIn .4s cubic-bezier(.22, .61, .36, 1) backwards; }
.js .esg-docs .policy.is-active .policy__eyebrow,
.js .esg-docs .policy.is-active .policy__title { animation: esgDocIn .4s cubic-bezier(.22, .61, .36, 1) .08s backwards; }
/* 머리 아래 굵은 선 — border 대신 그려서 왼쪽에서 오른쪽으로 자라게 한다 */
.esg-page .policy__body-in > :first-child { position: relative; border-top: 0; }
.esg-page .policy__body-in > :first-child::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(2 * var(--u));
  background: var(--pillar);
  transform-origin: left;
}
.js .esg-docs .policy.is-active .policy__body-in > :first-child::before { animation: esgRuleIn .5s cubic-bezier(.22, .61, .36, 1) .12s backwards; }
.js .esg-docs .policy.is-active .policy__pre { animation: esgDocIn .4s ease-out .22s backwards; }
.js .esg-docs .policy.is-active .policy__clauses li,
.js .esg-docs .policy.is-active .tab-table,
.js .esg-docs .policy.is-active .goal { animation: esgDocIn .4s ease-out backwards; animation-delay: calc(.3s + var(--k, 0) * .05s); }
.js .esg-docs .policy.is-active .policy__clauses li:nth-child(1) { --k: 0; }
.js .esg-docs .policy.is-active .policy__clauses li:nth-child(2) { --k: 1; }
.js .esg-docs .policy.is-active .policy__clauses li:nth-child(3) { --k: 2; }
.js .esg-docs .policy.is-active .policy__clauses li:nth-child(4) { --k: 3; }
.js .esg-docs .policy.is-active .policy__clauses li:nth-child(5) { --k: 4; }
.js .esg-docs .policy.is-active .policy__clauses li:nth-child(6) { --k: 5; }
.js .esg-docs .policy.is-active .goal { --k: 6; }
.js .esg-docs .policy.is-active .policy__foot,
.js .esg-docs .policy.is-active .policy__nav { animation: esgDocIn .4s ease-out .6s backwards; }
/* 문서가 1400 전체 폭을 쓰므로 안쪽 여백을 한 단 넓힌다 */
.esg-page .policy { padding: calc(64 * var(--u)) calc(88 * var(--u)) calc(56 * var(--u)); }

/* 문서 아래 이전 · 다음 방침 — 순서대로 읽는 사람용 (js/page-esg.js 가 만든다) */
.policy__nav {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  margin-top: calc(28 * var(--u));
}
.policy__nav-btn {
  display: inline-flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  max-width: 48%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink-mid);
  cursor: pointer;
}
.policy__nav-btn--next { text-align: right; align-items: flex-end; margin-left: auto; }
.policy__nav-btn small { font-family: "Open Sans", var(--font-base); font-weight: 700; font-size: max(calc(11 * var(--u)), 10px); letter-spacing: .08em; color: var(--gray); }
.policy__nav-btn b { font-weight: 600; font-size: max(calc(16 * var(--u)), 13px); color: var(--sub-ink); word-break: keep-all; transition: color .2s ease; }
.policy__nav-btn:hover b, .policy__nav-btn:focus-visible b { color: var(--sub-point); }

/* 문서 열 안에서 문서 → 목표 판 → 문서 간격은 style.css .policy 가 잡는다.
   (스크롤 규칙용 아래 여백은 뺐다 — 마지막 문서는 페이지 끝에 닿으면 열린다, js/page-esg.js) */

/* ==================== ESG 인증 (esg/certification.html) — 하위 탭 바로 아래 ==================== */
.esg-certs { margin-top: calc(70 * var(--u)); }
.esg-certs__gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--card-gap) * var(--u));
  margin: calc(40 * var(--u)) 0;
}
/* 카드는 인증특허 페이지 것 그대로. 회색 판 위가 아니므로 카드 바탕만 옅게 */
.esg-certs__gal .cert-card { --card-bg: var(--card-bg-soft); }

/* 취득 예정 인증 — 회색 빈 틀 대신 문서 모양 표찰 (2026-09-18). js/page-esg.js 가 pending 카드에 그린다 */
.cert-card.is-pending .cert-card__thumb { background: var(--color-white); }
.cert-card__pending {
  position: absolute;
  inset: calc(12 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  padding: calc(16 * var(--u));
  border: 1px dashed rgba(19, 90, 156, .45);
  border-radius: calc(6 * var(--u));
  text-align: center;
  color: var(--sub-point);
  word-break: keep-all;
}
/* 문서 상단의 가는 두 줄 — 인증서 종이 느낌 */
.cert-card__pending::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: calc(18 * var(--u));
  height: calc(8 * var(--u));
  border-top: 1px solid rgba(19, 90, 156, .25);
  border-bottom: 1px solid rgba(19, 90, 156, .25);
}
.cert-card__pending-icon { width: calc(56 * var(--u)); height: calc(56 * var(--u)); margin-bottom: calc(6 * var(--u)); opacity: .9; }
.cert-card__pending-name { font-family: "Open Sans", var(--font-base); font-weight: 700; font-size: max(calc(24 * var(--u)), 16px); letter-spacing: -.02em; color: var(--sub-ink); }
.cert-card__pending-sub { font-size: max(calc(13 * var(--u)), 11px); letter-spacing: -.02em; color: var(--ink-mid); }
.cert-card__pending-tag {
  margin-top: calc(10 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: var(--sub-point);
  color: var(--color-white);
  font-size: max(calc(12 * var(--u)), 11px);
  font-weight: 600;
  letter-spacing: .02em;
}
/* 카드가 코발트로 뒤집혀도 표찰은 흰 종이로 남아 읽힌다 */
.cert-card.is-pending:hover .cert-card__thumb,
.cert-card.is-pending:focus-within .cert-card__thumb { background: var(--color-white); }
.esg-certs__table { margin-top: calc(40 * var(--u)); }

/* Contact us 띠(.esg-cta)는 2026-09-17 삭제. 마지막 블록 → 푸터 여백은 .infra-page main 의 padding-bottom(180) 하나만 쓴다.
   방침 페이지는 마지막이 색 띠(.esg-policies)라 띠 안 여백(110)과 겹쳐 보이므로 main 여백을 줄인다 */
.esg-page main:has(> .esg-policies) { padding-bottom: calc(100 * var(--u)); }   /* 인증 페이지는 다른 서브페이지와 같은 180 */

/* ==================== 등장 ==================== */
.js .esg-page [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.js .esg-page [data-reveal].is-in { opacity: 1; transform: none; }
.js .esg-page .cert-card[data-reveal] { transition-delay: calc(var(--d, 0) * .08s); }

/* ==================== 1024 이하 — 내비가 위로 올라가 가로 탭이 된다 ==================== */
@media (max-width: 1024px) {
  .esg-intro { grid-template-columns: 1fr; row-gap: calc(24 * var(--u)); margin-top: calc(36 * var(--u)); }
  .esg-page .page-hero { height: calc(300 * var(--u)); }
  .esg-intro__letters { gap: calc(24 * var(--u)); }
  .esg-intro__letters b { font-size: max(calc(96 * var(--u)), 56px); }
  .esg-intro__stat { margin-top: 0; }
  .esg-intro__stat li { padding: calc(10 * var(--u)) calc(16 * var(--u)); }

  .esg-overview { margin-top: calc(64 * var(--u)); }
  .esg-overview__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
  .esg-ov__link { min-height: 0; padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); }
  .esg-ov__pdf { top: calc(18 * var(--u)); right: calc(18 * var(--u)); }

  .esg-policies { margin-top: calc(72 * var(--u)); padding: calc(56 * var(--u)) 0 calc(64 * var(--u)); }
  .esg-policies::before { font-size: calc(160 * var(--u)); top: calc(var(--gnb-h) * var(--u) + 4vh); margin-top: calc(-30 * var(--u)); }

  /* 좁은 화면 탭 — 제자리에 서서, 여섯 항목이 3 × 2 알약으로 다 보인다 */
  .esg-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: calc(8 * var(--u));
    margin-bottom: calc(24 * var(--u));
    border-bottom: 0;
  }
  .esg-tabs__tab {
    flex-direction: column;
    justify-content: center;
    gap: calc(4 * var(--u));
    min-height: calc(60 * var(--u));
    padding: calc(10 * var(--u)) calc(8 * var(--u));
    border: 1px solid var(--line-track);
    border-radius: calc(12 * var(--u));
    background: var(--color-white);
    font-size: max(calc(13 * var(--u)), 12px);
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  }
  .esg-tabs__tab::after { display: none; }
  .esg-tabs__tab .esg-pillar { display: none; }
  .esg-tabs__tab[aria-selected="true"] { border-color: var(--pillar); background: var(--pillar); color: var(--color-white); font-weight: 600; }
  .esg-tabs__tab[aria-selected="true"] i { color: rgba(255, 255, 255, .75); }
  .esg-page .policy { padding: calc(24 * var(--u)) calc(20 * var(--u)); }
  .policy__nav-btn { max-width: 100%; }

  .esg-certs { margin-top: calc(44 * var(--u)); }
  .esg-certs__gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin: calc(24 * var(--u)) 0; }
  .esg-page main:has(> .esg-policies) { padding-bottom: calc(72 * var(--u)); }
}

/* ==================== 768 이하 — 서브페이지 공통 간격 토큰 ==================== */
@media (max-width: 768px) {
  /* 2026-09-19 모바일 간격 한 단 넉넉히 — 덩어리 사이가 답답하다는 지적 */
  .esg-intro { margin-top: var(--sp-block); row-gap: calc(28 * var(--u)); }
  .esg-intro__title { font-size: max(calc(24 * var(--u)), 20px); }
  .esg-intro__desc { margin-top: calc(18 * var(--u)); }
  .esg-intro__letters { gap: calc(22 * var(--u)); padding: calc(6 * var(--u)) 0; }
  .esg-intro__letters b { font-size: calc(72 * var(--u)); }
  .esg-intro__stat { margin-top: calc(6 * var(--u)); gap: calc(10 * var(--u)); }
  .esg-intro__stat li { padding: calc(10 * var(--u)) calc(16 * var(--u)); }
  .esg-overview { margin-top: var(--sp-section); }
  .esg-legend { margin-bottom: calc(22 * var(--u)); gap: calc(10 * var(--u)) calc(20 * var(--u)); }
  .esg-overview__list { grid-template-columns: 1fr; gap: calc(16 * var(--u)); }
  .esg-ov__link { padding: calc(26 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); }
  .esg-ov__en { margin-top: calc(18 * var(--u)); }
  .esg-ov__sum { margin-top: calc(12 * var(--u)); }
  .esg-ov__more { margin-top: calc(20 * var(--u)); }
  .esg-policies { margin-top: var(--sp-section); padding: calc(64 * var(--u)) 0 calc(72 * var(--u)); }
  .esg-tabs { gap: calc(10 * var(--u)); margin-bottom: calc(32 * var(--u)); }
  .esg-tabs__tab { min-height: calc(64 * var(--u)); padding: calc(12 * var(--u)) calc(8 * var(--u)); }
  .esg-page .policy { padding: calc(32 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u)); }
  .esg-page .policy__body-in > :first-child { margin-top: calc(28 * var(--u)); padding-top: calc(26 * var(--u)); }
  .esg-page .policy__pre { margin-bottom: calc(30 * var(--u)); line-height: 1.8; }
  .esg-page .policy__clauses li { padding: calc(18 * var(--u)) 0; gap: calc(14 * var(--u)); line-height: 1.7; }
  .esg-page .policy__foot { margin-top: calc(32 * var(--u)); padding-top: calc(22 * var(--u)); gap: calc(16 * var(--u)); }
  .esg-page .policy__nav { margin-top: calc(32 * var(--u)); }
  .esg-page .goal { margin-top: calc(32 * var(--u)); }
  .esg-page .goal__cards { gap: calc(14 * var(--u)); }
  .esg-page main:has(> .esg-policies) { padding-bottom: calc(80 * var(--u)); }
  .esg-certs { margin-top: var(--sp-block); }
  /* 카드 폭이 반으로 줄어 A4 그림도 함께 줄인다 */
  .esg-page { --img-w: 160; --img-h: 226; }
}

@media (prefers-reduced-motion: reduce) {
  .esg-tabs__tab, .esg-tabs__tab i, .esg-tabs__tab::after, .esg-ov, .esg-ov::before, .esg-ov__name, .esg-ov__more::after, .esg-ov__pdf { transition: none; }
  .js .esg-docs .policy.is-active *, .js .esg-docs .policy.is-active *::before { animation: none !important; }
  .esg-ov:hover, .js .esg-ov[data-reveal].is-in:hover { transform: none; box-shadow: none; }
  .js .esg-page [data-reveal] { opacity: 1; transform: none; transition: none; }
}