@charset "utf-8";

/* ================================================================
   mgmt-page-V1.css — 경영철학 (MNU-U-110200) 페이지 전용 CSS

   대상: shared/publishing/fo/pages/재단소개_MNU-U-110000/
         경영철학_MNU-U-110200/MNU-U-110200_경영철학_design_V1.0_PUB.html

   · self-contained: output.css + 본 파일만으로 동작 (page-header/header/footer
     인클루드 CSS는 include.js가 동적 로드).
   · 격리: 모든 룰 .mgmt-philosophy wrapper 스코프 (DS 글로벌 충돌 방지).
   · 값은 전부 DS 토큰 경유 — hex/rgba/px 생짜 금지(폴백만 var(token,#fallback)).
   · 구성:
       1) 페이지 컨테이너 + 탭(1Depth bold / 2Depth pill) 간격 정합
       2) 선언문 박스 — Figma 14837:22226 (흰 카드 + brand-blue 테두리
          + 네 모서리 장식 브래킷 + 도입문 + "하나." 리스트 + 서명)
       3) 전략체계도(.ethics-strategy: svision/strat/roadmap/ESG)
          — ethics-page-V1_SB.css 패턴을 DS 토큰 그대로 차용
       4) 안전보건 경영방침 메타 표 · 안내문
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   1. 페이지 컨테이너 + 탭 간격
   ════════════════════════════════════════════════════════════════ */

/* CONTENT ↔ FOOTER 100px (탭형 페이지 통일 — 공통가이드 §5) */
.sub-page-wrap.mgmt-philosophy {
  max-width: var(--ds-contents-size-wide, 1440px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--ds-number-25, 5rem);
}

/* [간격통일] 미션및비전 TAB ↔ CONTENT 50/28/16 (공통가이드 §3-3 케이스 B).
   미션및비전 패널은 2Depth 탭(.ds-tab)이 없어 pfmc-page-V2.css·layout.css의
   `.sub-page-wrap:has(...> .ds-tab...){ margin-top:0 }` 규칙에 안 걸리고, DS 케이스 C
   기본값(100/80/60)이 잔존해 탭↔콘텐츠가 과대했음. `:has(> .mv)`로 미션및비전 패널만
   한정해 보정(윤리/인권/ESG·사회공헌 게시판은 .mv 미보유 → 무영향). */
.sub-page-wrap.mgmt-philosophy:has(> .mv) { margin-top: 5rem; /* 50 — PC */ }
@media (max-width: 1199px) {
  .sub-page-wrap.mgmt-philosophy:has(> .mv) { margin-top: var(--ds-number-14, 2.8rem); /* 28 — 태블릿 */ }
}
@media (max-width: 767px) {
  .sub-page-wrap.mgmt-philosophy:has(> .mv) { margin-top: var(--ds-number-14, 2.8rem); /* 28 — 모바일(사용자 지정) */ }
}

/* 1Depth 탭(윤리/인권/ESG/사회공헌) 가운데 정렬 + HERO↔TAB 간격 */
.mgmt-philosophy .about-tab {
  margin-bottom: 0;
}
.mgmt-philosophy .about-tab .ds-tab__list {
  justify-content: center;
}

/* 탭 → 패널 위 여백 제거 (간격은 .ethics-sub-tab margin이 단일 책임) */
.mgmt-philosophy .ds-tab__panel {
  padding-top: 0;
}
.mgmt-philosophy > .ds-tab__panel,
.sub-page-wrap.mgmt-philosophy > .ds-tab__panel {
  margin-top: 0;
}

/* 2Depth pill 탭 — 가운데 정렬. 상·하 margin 50 (사용자 지정: PC 상/하 50)
   위 = 1Depth bold btn pb(10) + panel pt(0) + sub-tab mt(50) ≈ 60
   아래 = sub-tab mb(50) + 2Depth panel pt(0)                 = 50 */
.mgmt-philosophy .ethics-sub-tab {
  display: flex;
  justify-content: center;
  margin: 5rem 0; /* 상/하 50 (사용자 지정) */
}
/* [높이 정정] HERO↔1Depth탭 50px 규칙(pfmc-page-V2.css:84 `.sub-page-wrap > div > .ds-tab:first-child { margin-top:5rem }`)이
   .ethics-sub-tab > .ds-tab--pill(2Depth 서브탭) 중첩 구조에도 오매칭돼 pill에 margin-top 50px이 붙고,
   .ethics-sub-tab이 flex라 그 margin이 컨테이너 높이에 흡수(50+48=98)되어 파란 영역이 탭보다 커지던 문제 해결.
   1Depth↔2Depth 위 간격은 .ethics-sub-tab margin-top(위 블록)이 단독 책임 → pill 자체 오매칭 margin 제거. */
.mgmt-philosophy .ethics-sub-tab > .ds-tab--pill:first-child {
  margin-top: 0;   /* pfmc-page-V2.css:84 (0,3,1)를 이기려 :first-child로 (0,4,0) 특정성 확보 */
}
.mgmt-philosophy .ethics-sub-tab .ds-tab--pill .ds-tab__list {
  gap: var(--ds-number-1, 0.2rem);
}
/* 2Depth 셀렉박스(.ethics-sub-tab 안) — PC·태블릿 숨김(알약 노출),
   모바일에서만 노출(아래 @767 블록). 1Depth 셀렉(.sub-page-wrap 직계)은
   page-header.css 기본룰이 숨기지만, 2Depth는 .ethics-sub-tab 안에 중첩돼
   그 직계자식(>) 룰에 안 걸리므로 여기서 명시적으로 숨긴다. */
.mgmt-philosophy .ethics-sub-tab .page-header__select {
  display: none;
}

/* 사회공헌(게시판 직접) 패널은 sub-tab이 없어 HERO↔TAB 간격을 패널 자체가 가짐 */
.mgmt-philosophy #d1-panel-social {
  padding-top: var(--ds-number-25, 5rem);
}

/* 공시자료(게시판) 패널 — 검색바 위 여백 (sub-tab 60px 정합 유지) */
.mgmt-philosophy .mgmt-board {
  padding-top: 0;
}


/* ════════════════════════════════════════════════════════════════
   2. 선언문 박스 — Figma node 14837:22226
   흰 카드 + brand-blue(primary-50) 2px 테두리 + 네 모서리 브래킷
   + 가운데 도입문 + "하나." 항목 리스트 + 서명
   ════════════════════════════════════════════════════════════════ */

.mgmt-philosophy .mgmt-declaration {
  max-width: 120rem;          /* Figma container 1200 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 대제목 (Figma 32 Bold #1e2124) */
.mgmt-philosophy .mgmt-declaration__title {
  text-align: center;
  font-size: var(--ds-font-size-32, 3.2rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  color: var(--ds-light-color-text-basic, #1e2124);
  margin: 0 0 var(--ds-number-16, 3.2rem);
  word-break: keep-all;
}

/* 도입문 (Figma 17 Regular #464c53, 가운데, line-height 33px) */
.mgmt-philosophy .mgmt-declaration__lead {
  font-size: var(--ds-font-size-17, 1.7rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  line-height: 1.95;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  color: var(--ds-light-color-text-subtle, #464c53);
  text-align: center;
  max-width: 76rem;            /* Figma 760 */
  margin: 0 auto var(--ds-number-16, 3.2rem);
  word-break: keep-all;
}

/* 카드 본체 — 흰 배경 + brand-blue 2px 테두리
   (Figma: border-2 var(--brand/blue-aa,#027bc1) = DS primary-50) */
.mgmt-philosophy .mgmt-declaration__box {
  position: relative;
  width: 100%;
  background: var(--ds-color-gray-0, #fff);
  border: var(--ds-border-width-medium, 0.2rem) solid var(--ds-color-primary-50, #027bc1);
  padding: var(--ds-number-19, 3.8rem) var(--ds-number-18, 3.6rem);
}

/* 네 모서리 장식 — 사용자 제공 프레임 이미지(img_frame.svg, 43×41 흰 박스+파란 L 브래킷).
   기본(좌상단) 이미지를 시계방향으로 "돌려서" 4모서리에 배치 — 좌상0°·우상90°·우하180°·좌하270°.
   (CSS로 그리던 ::before 브래킷 → 실제 이미지로 교체. 4개 선언문 박스 공통) */
.mgmt-philosophy .mgmt-declaration__corner {
  position: absolute;
  width: 4.3rem;               /* Figma 43 */
  height: 4.1rem;              /* Figma 41 */
  background: url(../../img/img_frame.svg) no-repeat center / contain;
  pointer-events: none;
}
/* 모서리를 박스 보더 바깥선까지 끌어내(−보더폭) 프레임 이미지의 끝라인과 박스 보더가 한 선으로 맞물리게.
   (top/left:0 이면 프레임이 보더 안쪽에 들어가 2중선처럼 보였음 — 사용자 지적) */
/* 좌상단 — 기본 방향 그대로 */
.mgmt-philosophy .mgmt-declaration__corner.is-tl {
  top: calc(-1 * var(--ds-border-width-medium, 0.2rem));
  left: calc(-1 * var(--ds-border-width-medium, 0.2rem));
}
/* 우상단 — 시계 90° (43×41 비정사각이라 중심회전 시 1px 어긋남 → 화면좌표 +0.1rem 보정) */
.mgmt-philosophy .mgmt-declaration__corner.is-tr {
  top: calc(-1 * var(--ds-border-width-medium, 0.2rem));
  right: calc(-1 * var(--ds-border-width-medium, 0.2rem));
  transform: translate(0.1rem, 0.1rem) rotate(90deg);
}
/* 우하단 — 180° */
.mgmt-philosophy .mgmt-declaration__corner.is-br {
  bottom: calc(-1 * var(--ds-border-width-medium, 0.2rem));
  right: calc(-1 * var(--ds-border-width-medium, 0.2rem));
  transform: rotate(180deg);
}
/* 좌하단 — 270°(반시계 90°) (동일 1px 보정, 좌·하 방향이라 −0.1rem) */
.mgmt-philosophy .mgmt-declaration__corner.is-bl {
  bottom: calc(-1 * var(--ds-border-width-medium, 0.2rem));
  left: calc(-1 * var(--ds-border-width-medium, 0.2rem));
  transform: translate(-0.1rem, -0.1rem) rotate(270deg);
}

/* 항목 리스트 (Figma Ordered List, gap 26px, 좌패딩 70px) */
.mgmt-philosophy .mgmt-declaration__list {
  list-style: none;
  margin: 0;
  padding: var(--ds-number-20, 4rem) var(--ds-number-17, 3.4rem);
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-13, 2.6rem);
}
.mgmt-philosophy .mgmt-declaration__item {
  display: grid;
  grid-template-columns: 7.4rem 1fr;   /* Figma "하나." 컬럼 74px */
  align-items: baseline;
}
/* "하나." 마커 (Figma 16 Bold brand-blue) */
.mgmt-philosophy .mgmt-declaration__no {
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-primary-50, #027bc1);
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
}
/* 항목 본문 (Figma 18 Medium #464c53, line-height 26.4px) */
.mgmt-philosophy .mgmt-declaration__text {
  font-size: var(--ds-font-size-18, 1.8rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--ds-light-color-text-subtle, #464c53);
  line-height: 1.6;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin: 0;
  word-break: keep-all;
}

/* 서명 (Figma 19 Bold #1e2124, 가운데) */
.mgmt-philosophy .mgmt-declaration__sign {
  text-align: center;
  font-size: var(--ds-font-size-19, 1.9rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-light-color-text-basic, #1e2124);
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin: var(--ds-number-16, 3.2rem) 0 0;
}

/* ── 선언문 하단 메타 표 (안전보건 경영방침: 전담조직/안전책임자) ── */
/* 회색 그라데이션 띠는 화면 가로 꽉(풀블리드 100vw), 표/제목은 본문폭(76rem) 중앙 정렬 */
.mgmt-philosophy .mgmt-declaration__meta {
  width: 100vw;
  max-width: none;
  margin: var(--ds-number-30, 6rem) calc(50% - 50vw) 0; /* (재) 평택시문화재단 ↔ 띠 갭 60 + 풀블리드 좌우 (사용자 요청) */
  padding-top: var(--ds-number-48, 9.6rem);             /* 회색 띠(56px) ↔ 안전보건 담당자 제목 갭 확보 (사용자 요청) */
  /* 안전보건 담당자 위 그라데이션 띠 — 대관신청안내 부대시설과 동일(gray-5 → 흰색 fade), 상단 56px 풀폭 */
  background: linear-gradient(180deg, var(--ds-color-gray-5) 0%, var(--ds-color-gray-0) 100%) top / 100% var(--ds-number-28, 5.6rem) no-repeat;
}
.mgmt-philosophy .mgmt-declaration__meta > .mgmt-table {
  max-width: 76rem;
  margin-inline: auto;
}
.mgmt-philosophy .mgmt-table {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--ds-border-width-thin, 0.1rem) solid var(--ds-color-gray-60, #5b6471);   /* 대관신청안내 표와 동일 — 상단 진한 라인(was gray-10) */
  border-bottom: var(--ds-border-width-thin, 0.1rem) solid var(--ds-color-gray-10, #e6e8ea);
}
.mgmt-philosophy .mgmt-table__caption {
  caption-side: top;
  text-align: left;
  font-size: var(--ds-font-size-22, 2.2rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-light-color-text-basic, #1e2124);
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin-bottom: var(--ds-number-7, 1.4rem);
}
.mgmt-philosophy .mgmt-table th,
.mgmt-philosophy .mgmt-table td {
  border-bottom: var(--ds-border-width-thin, 0.1rem) solid var(--ds-color-gray-10, #e6e8ea);
  border-right: var(--ds-border-width-thin, 0.1rem) solid var(--ds-color-gray-10, #e6e8ea);
  padding: var(--ds-number-5, 1rem) var(--ds-number-5, 1rem);   /* 대관신청안내 표와 동일 10px (was 14/10) */
  font-size: var(--ds-font-size-15, 1.5rem);                    /* 14→15 (rg-table 일치) */
  line-height: 1.4;
  text-align: center;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
}
.mgmt-philosophy .mgmt-table th:last-child,
.mgmt-philosophy .mgmt-table td:last-child {
  border-right: none;
}
.mgmt-philosophy .mgmt-table th {
  background: color-mix(in srgb, var(--ds-color-secondary-5, #f6f7f9) 50%, transparent);   /* 대관신청안내 표 헤더와 동일(was gray-5 solid) */
  font-weight: var(--ds-typo-font-weight-medium, 500);                                     /* bold→medium */
  color: var(--ds-light-color-text-basic, #1e2124);
}
.mgmt-philosophy .mgmt-table td {
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--ds-light-color-text-subtle, #464c53);
}

/* ── 선언문 하단 안내문 ── */
.mgmt-philosophy .mgmt-declaration__notice {
  width: 100%;
  max-width: 76rem;
  margin: var(--ds-number-12, 2.4rem) auto 0;
  font-size: var(--ds-font-size-15, 1.5rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--ds-light-color-text-subtle, #464c53);
  line-height: 1.7;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  word-break: keep-all;
}
.mgmt-philosophy .mgmt-declaration__notice a {
  color: var(--ds-color-primary-60, #02639a);
  text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════
   3. 전략체계도 (.ethics-strategy)
   비전 히어로 + LH 매트릭스 + 로드맵 + ESG 경영분야별 카드
   — ethics-page-V1_SB.css 검증 패턴을 DS 토큰 그대로 차용
   ════════════════════════════════════════════════════════════════ */

.mgmt-philosophy .ethics-strategy {
  max-width: 144rem;            /* 비전및추진전략 PC 폭 1440 (사용자 요청, 112rem→144rem) */
  margin: 0 auto;
  padding: 0 var(--ds-number-20, 4rem);
  color: var(--ds-light-color-text-basic, #1e2124);
}

/* ─ 섹션 헤더 ─ */
.mgmt-philosophy .ethics-strategy .sh {
  display: flex;
  align-items: baseline;
  gap: var(--ds-number-6, 1.2rem);
  margin: 0 0 var(--ds-number-14, 2.8rem);
}
.mgmt-philosophy .ethics-strategy .sh__bar { display: none; }
.mgmt-philosophy .ethics-strategy .sh__t {
  font-size: var(--ds-font-size-19, 1.9rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  line-height: var(--ds-typo-line-height-heading, 1.3);
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin: 0;
}
.mgmt-philosophy .ethics-strategy .sh--large {
  justify-content: center;
  margin: 0 0 var(--ds-number-16, 3.2rem);
}
.mgmt-philosophy .ethics-strategy .sh--large .sh__t {
  font-size: var(--ds-font-size-28, 2.8rem);
}
/* 중장기 로드맵 제목 — "전략체계도"(.sh--large) 제목과 동일 크기로 통일 (사용자 요청, 로드맵 예외) */
.mgmt-philosophy .ethics-strategy .road .sh__t {
  font-size: var(--ds-font-size-28, 2.8rem);
}
/* 경영분야별 전략 헤더 — 비전/로드맵 사이 여백 */
.mgmt-philosophy .ethics-strategy .sh--mt {
  margin-top: var(--ds-number-19, 3.8rem);
}

/* ─ 비전(VISION) 블록 — Figma 14981:26598 (개정)
   "○○경영 전략체계도" 제목 *아래*에 위치. 구조:
     ① 재단 미션/비전 2-up 알약 카드(공통 — 재단 전체) →
     ② 깔때기(funnel) SVG 커넥터(두 카드를 아래 한 점으로 모음) →
     ③ 파란 솔리드 VISION 알약(헤드라인 흰색, 둘째 절 Bold 강조).
   윤리·인권 공용. ESG는 별도 .esg-vision(그린 강조) 사용 — 미겹침.
   고유값(DS 토큰 부재 Figma 디자인색·치수)은 .svision 스코프 변수로 정의(정의부). */
.mgmt-philosophy .ethics-strategy .svision {
  --sv-card-border: #e5e5e5;          /* 미션/비전 카드 보더 (Figma 고유, DS gray-10 근사) */
  --sv-label-gray: #58616a;           /* 카드 라벨 그레이 = DS gray-60 동일값, Figma gray/60 */
  --sv-ls: 0.96px;                    /* 라벨/eyebrow letter-spacing (Figma 0.96px) */
  --sv-card-w: 56rem;                 /* 카드 max-width 560 */
  --sv-fs-40: 4rem;                   /* VISION 헤드라인 40 (DS 36→44 사이 부재 — 고유값) */
  --sv-shadow-card: 0 1rem 1.3rem rgba(0, 0, 0, 0.05);   /* 카드 그림자 Figma 0 10 13 .05 */
  --sv-shadow-pill: 0 2rem 2.2rem rgba(0, 0, 0, 0.3);    /* 파란 알약 그림자 Figma 0 20 22 .30 */
  --sv-funnel-w: 76.4rem;             /* 깔때기 SVG 너비 764 */
  --sv-funnel-h: 10.9rem;             /* 깔때기 SVG 높이 109 */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 var(--ds-number-40, 8rem);
}
/* ① 미션/비전 2-up 카드 행 */
.mgmt-philosophy .ethics-strategy .svision__mv {
  display: flex;
  gap: var(--ds-number-32, 6.4rem);   /* Figma 64 */
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 118rem;                   /* Figma container 1180 */
}
.mgmt-philosophy .ethics-strategy .svision__card {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--sv-card-w);
  background: var(--ds-color-gray-0, #fff);
  border: var(--ds-border-width-thin, 0.1rem) solid var(--sv-card-border);
  border-radius: var(--ds-radius-max, 999px);
  box-shadow: var(--sv-shadow-card);
  padding: var(--ds-number-14, 2.8rem) var(--ds-number-18, 3.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-2, 0.4rem);
  text-align: center;
}
.mgmt-philosophy .ethics-strategy .svision__card-label {
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--sv-label-gray);
  letter-spacing: var(--sv-ls);
  margin: 0;
}
.mgmt-philosophy .ethics-strategy .svision__card-text {
  font-size: var(--ds-font-size-24, 2.4rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-light-color-text-basic, #111);
  line-height: 1.5;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin: 0;
  word-break: keep-all;
}
/* ② 깔때기 커넥터 — 두 카드를 아래 한 점으로 모으는 그라데이션 삼각형(외부 SVG)
   카드 행과 −20px 겹쳐 위 변이 카드 하단에 맞물림(Figma mb-[-20px]). */
.mgmt-philosophy .ethics-strategy .svision__funnel {
  width: var(--sv-funnel-w);
  max-width: 100%;
  height: var(--sv-funnel-h);
  margin-top: calc(-1 * var(--ds-number-10, 2rem));   /* Figma -20 겹침 */
  background: url(../../img/strat-funnel.svg) no-repeat center / 100% 100%;
}
/* ③ 파란 솔리드 VISION 알약 */
.mgmt-philosophy .ethics-strategy .svision__pill {
  background: var(--ds-color-brand-blue-aa, #027bc1);   /* Figma brand/blue-aa = DS primary-50 */
  border-radius: var(--ds-radius-max, 999px);
  box-shadow: var(--sv-shadow-pill);
  padding: var(--ds-number-10, 2rem) var(--ds-number-30, 6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-2, 0.4rem);   /* eyebrow(VISION)↔text 갭 절반 8px→4px (사용자 요청) */
  text-align: center;
}
.mgmt-philosophy .ethics-strategy .svision__eyebrow {
  font-size: var(--ds-font-size-12, 1.2rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  letter-spacing: var(--sv-ls);
  color: var(--ds-color-gray-0, #fff);
  margin: 0;
}
.mgmt-philosophy .ethics-strategy .svision__text {
  font-size: var(--ds-font-size-32, 3.2rem);   /* 평택시문화재단 배지(32px)와 동일 (사용자 요청) */
  font-weight: var(--ds-typo-font-weight-regular, 400);   /* 앞 절 Regular */
  line-height: 1.3;
  letter-spacing: -0.0125em;    /* Figma -0.5px @40 */
  color: var(--ds-color-gray-0, #fff);
  margin: 0;
  word-break: keep-all;
}
.mgmt-philosophy .ethics-strategy .svision__accent {
  font-weight: var(--ds-typo-font-weight-bold, 700);   /* 둘째 절 Bold 강조 (Figma, 흰색 동일) */
}

/* (ethics-matrix / ethics-area 룰 제거 — ESG 패널 새 디자인(.esg-vision/.esg-fields)으로
   교체되며 전 페이지에서 미사용 확인. 윤리·인권은 .strat + .svision(미션/비전 카드 + 깔때기 + 파란 VISION 알약) 사용.) */

/* ════════════════════════════════════════════════════════════════
   3-B. 전략체계도 — 세로 플로우 다이어그램 (.strat)
   Figma JcDwyleEw4eMrCaVoxRDkv / 14946:20804 (SECTION 02 Strategy Map)
   윤리·인권 패널 전용 폼. ESG 패널은 새 디자인(.esg-vision/.esg-fields, §3-C) 사용.
   모든 커넥터·원은 중심축(center) 정렬.
   고유값(DS 토큰에 없는 Figma 디자인색·치수)은 .strat 스코프 변수로 정의(정의부).
   ════════════════════════════════════════════════════════════════ */
.mgmt-philosophy .ethics-strategy .strat {
  /* ─ Figma 고유값 (DS 토큰 부재) ─ */
  --strat-card-border: #e5e5e5;        /* 알약/원 보더 (DS gray-10 #e6e8ea 와 근사하나 Figma 고유) */
  --strat-label-gray: #58616a;         /* pill 라벨 그레이 = DS gray-60 와 동일값, Figma gray/60 */
  --strat-line: #ccc;                  /* 커넥터 선/원 보더 (Figma #ccc) */
  --strat-no: #666;                    /* 전략과제 번호 (Figma #666) */
  --strat-ls: 0.96px;                  /* 라벨 letter-spacing (Figma 0.96px) */
  --strat-pill-w: 46rem;               /* pill 너비 460 */
  --strat-tasks-w: 67.2rem;            /* 전략과제 컨테이너 너비 672 */
  --strat-circle-w: 22rem;             /* 전략과제 원 너비 220 */
  --strat-areas-w: 62.6rem;            /* 관리영역 컨테이너 너비 626 */
  --strat-area-w: 16rem;               /* 컬러 원 너비 160 (aspect 1:1) */
  --strat-overlap: 2rem;               /* 원 겹침 20px */
  --strat-area-ring: 0.3rem;           /* 컬러 원 흰 테두리 3px (DS border-width large 부재) */
  --strat-area-ring-color: #fafafa;    /* 컬러 원 흰 테두리색 (Figma #fafafa, gray-0 #fff 과 미세차 — 고유) */
  --strat-shadow-pill: 0 1.2rem 1.6rem rgba(0, 0, 0, 0.05);   /* Figma 0 12 16 .05 */
  --strat-shadow-tasks: 0 1rem 2rem rgba(0, 0, 0, 0.03);      /* Figma 0 10 20 .03 */
  --strat-shadow-areas: 0 1rem 4rem rgba(0, 0, 0, 0.03);      /* Figma 0 10 40 .03 */
  --strat-shadow-circle: 0 1rem 1rem rgba(0, 0, 0, 0.1);      /* 원 0 10 10 .1 */
  --strat-areas-bg: var(--ds-color-secondary-5, #eef2f7);     /* 관리영역 컨테이너 배경 (Figma secondary/5 솔리드, 개정) */
  --strat-area-fill: var(--ds-color-brand-dark, #343a48);     /* 관리영역 원 — 전부 다크 네이비 (Figma brand/dark, 개정: 기존 4색 → 단색) */

  /* VISION 알약↔목표 세로 갭. 데스크탑/태블릿 240px(24rem) 고정 → 768px 미만에서 뷰포트 비례 자연 축소.
     clamp 상한 24rem이 정확히 768px(=24rem/0.3125)에서 걸려 데스크탑 값 유지·모바일만 줄어듦. 하한 12rem(120px).
     ::before top/height/그라데이션 %스톱이 전부 이 변수에 비례 → 회색 띠 비율 그대로 유지하며 함께 축소. */
  --strat-gap: clamp(12rem, 31.25vw, 24rem);
  margin-top: var(--strat-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;                          /* ::before 회색 그라데이션 배경 anchor */
  isolation: isolate;                          /* CMS 콘텐츠(content.do) 흰 배경 컨테이너 안에서도 z-index:-1 회색 띠가 가려지지 않도록 자체 스택 컨텍스트 분리 (PUB 렌더 동일) */
}
/* VISION 알약↔목표 사이 갭(240px)을 회색→흰색 그라데이션으로 꽉 채움 (사용자 요청)
   — 가로: full-bleed 100vw (좌우 흰 여백 0). 세로: 갭 전체(상단=알약 밑, 하단=목표 위) 여백 0.
     .strat top 기준 top:-24rem(=-240px=갭 높이) / height:24rem 이면 갭에 정확히 안착(상하 flush).
     갭(margin-top)·top·height를 같은 배수(4×)로 키워 회색 띠 길이를 현재의 약 2배로 (사용자 "두배는 길어야해").
     띠 스타일(위 하드엣지 25%·아래로만 흰색 fade·중앙·gray-5)은 % 스톱 그대로 유지 → 절대 길이만 2배.
     full-bleed지만 edge-to-edge라 새 가로 오버플로우 없음(기존 97px=헤더분). */
.mgmt-philosophy .ethics-strategy .strat::before {
  content: '';
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: calc(-0.5 * var(--strat-gap));   /* 갭 중앙(절반 위)에서 시작 — 갭에 비례 */
  height: var(--strat-gap);             /* 갭 길이만큼: 하단 절반 회색 + 목표 박스 위로 페이드(%스톱). 갭 축소 시 함께 축소 */
  background: linear-gradient(180deg, var(--ds-color-gray-5, #f4f5f6) 0%, var(--ds-color-gray-5, #f4f5f6) 50%, var(--ds-color-gray-0, #fff) 100%);   /* 시작~50%(목표 박스 상단)까지 회색, 이후 페이드 */
  z-index: -1;
  pointer-events: none;
}

/* 공통 라벨 (전략 과제 / 주요 관리 영역) */
.mgmt-philosophy .ethics-strategy .strat__label {
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-brand-dark, #343a48);
  letter-spacing: var(--strat-ls);
  text-align: center;
  margin: 0 0 var(--ds-number-6, 1.2rem);
}

/* ─ ① 목표 2-pill ─ */
.mgmt-philosophy .ethics-strategy .strat__goals {
  position: relative;                          /* 모바일 ::before(item38 커넥터) 기준 — 유지 */
  display: flex;
  gap: var(--ds-number-20, 4rem);
  justify-content: center;
  flex-wrap: wrap;
}
.mgmt-philosophy .ethics-strategy .strat__pill {
  width: var(--strat-pill-w);
  max-width: 100%;
  background: var(--ds-color-gray-0, #fff);
  border: var(--ds-border-width-thin, 0.1rem) solid var(--strat-card-border);
  border-radius: var(--ds-radius-max, 999px);
  box-shadow: var(--strat-shadow-pill);
  padding: var(--ds-number-20, 4rem) var(--ds-number-8, 1.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-2, 0.4rem);   /* 라벨↔본문 간격 4px — 미션/비전 카드(.svision__card)와 통일 (was 12px) */
  text-align: center;
}
.mgmt-philosophy .ethics-strategy .strat__pill-label {
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--strat-label-gray);
  letter-spacing: var(--strat-ls);
  margin: 0;
}
.mgmt-philosophy .ethics-strategy .strat__pill-text {
  font-size: var(--ds-font-size-24, 2.4rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);   /* 미션/비전 카드(.svision__card-text)와 통일 (was regular 400) */
  color: var(--ds-light-color-text-basic, #111);
  line-height: 1.5;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin: 0;
  word-break: keep-all;
}

/* ─ ② 분기(∪) 커넥터 — 좌·우·하 보더만 (위 없음) + 중앙 세로선 ─ */
.mgmt-philosophy .ethics-strategy .strat__merge {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mgmt-philosophy .ethics-strategy .strat__merge-u {
  display: block;
  width: 50rem;
  max-width: 100%;
  height: 4.2rem;
  border: var(--ds-border-width-thin, 0.1rem) solid var(--strat-line);
  border-top: 0;
}
.mgmt-philosophy .ethics-strategy .strat__merge-line,
.mgmt-philosophy .ethics-strategy .strat__line {
  display: block;
  width: var(--ds-border-width-thin, 0.1rem);
  height: 5.2rem;
  background: var(--strat-line);
}

/* ─ ③ 전략 과제 — 흰 알약 컨테이너 + 원 3개 겹침 ─ */
.mgmt-philosophy .ethics-strategy .strat__tasks {
  width: var(--strat-tasks-w);
  max-width: 100%;
  background: var(--ds-color-gray-0, #fff);
  border: var(--ds-border-width-thin, 0.1rem) solid var(--ds-color-brand-dark, #343a48);   /* 작은 번호 원 감싸는 큰 외곽 ring 테두리 dark (사용자 요청, 작은 .strat__task 보더는 유지) */
  border-radius: var(--ds-radius-max, 999px);
  box-shadow: var(--strat-shadow-tasks);
  padding: var(--ds-number-11, 2.2rem) var(--ds-number-16, 3.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mgmt-philosophy .ethics-strategy .strat__task {
  width: var(--strat-circle-w);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  margin-right: calc(-1 * var(--strat-overlap));
  border: var(--ds-border-width-thin, 0.1rem) solid var(--strat-card-border);
  border-radius: var(--ds-radius-max, 999px);
  background: var(--ds-color-gray-0, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-3, 0.6rem);
  text-align: center;
}
.mgmt-philosophy .ethics-strategy .strat__task:last-child { margin-right: 0; }
.mgmt-philosophy .ethics-strategy .strat__task-no {
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--strat-no);
  line-height: 1;
}
.mgmt-philosophy .ethics-strategy .strat__task-text {
  font-size: var(--ds-font-size-22, 2.2rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--ds-light-color-text-basic, #111);
  line-height: 1.32;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  word-break: keep-all;
}

/* ─ ⑤ 주요 관리 영역 — 연한 컨테이너 + 컬러 원 4개 겹침 ─ */
.mgmt-philosophy .ethics-strategy .strat__areas {
  width: var(--strat-areas-w);
  max-width: 100%;
  background: var(--strat-areas-bg);
  border: var(--ds-border-width-thin, 0.1rem) solid transparent;
  border-radius: var(--ds-radius-max, 999px);
  box-shadow: var(--strat-shadow-areas);
  padding: var(--ds-number-9, 1.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mgmt-philosophy .ethics-strategy .strat__area {
  width: var(--strat-area-w);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  margin-right: calc(-1 * var(--strat-overlap));
  background: var(--strat-area-fill);   /* 전부 다크 네이비 (개정) */
  border: var(--strat-area-ring) solid var(--strat-area-ring-color);
  border-radius: var(--ds-radius-max, 999px);
  box-shadow: var(--strat-shadow-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mgmt-philosophy .ethics-strategy .strat__area:last-child { margin-right: 0; }
.mgmt-philosophy .ethics-strategy .strat__area-text {
  font-size: var(--ds-font-size-22, 2.2rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--ds-color-gray-0, #fff);
  line-height: 1.2;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  word-break: keep-all;
}

/* ─ 중장기 로드맵 (Figma 14946:23460 — 라이트 테마 풀블리드 + 흰 카드 + 계단식 컬러 꼬리) ─ */
.mgmt-philosophy .ethics-strategy .road {
  /* Figma 디자인 고유색 — DS 토큰에 없어 .road 스코프 변수로 정의(정의부) */
  --road-bg: #f8fafc;                                  /* 섹션 배경 */
  --road-title: #1e2124;                               /* 제목/본문 텍스트 */
  --road-year: #58616a;                                /* 연도 라벨 그레이 */
  --road-line-radius: 0.1rem;                          /* 라인 1px radius */
  --road-card-radius: 2rem;                            /* 카드 radius 20px — DS max(xlarge 16) 초과, 고유값 */
  --road-li-size: 1.8rem;                              /* 리스트 18px — DS 18 토큰 없음, 고유값 */
  --road-li-lh: 2.4rem;                                /* 리스트 line-height 24px — 고유값 */
  /* 단계별 컬러 (도입=회 / 성장=파 / 성숙=진파) */
  --rs1-border: #343a48;                               /* 도입 카드 보더 */
  --rs1-name: #1e2124;                                 /* 도입 단계명 */
  --rs1-head: rgba(153, 153, 153, 0.12);               /* 도입 헤더 그라데이션 끝 */
  --rs1-glow: 176, 181, 188;                           /* 도입 꼬리 글로우(rgb) */
  --rs1-line: #737578;                                 /* 도입 라인 */
  --rs2-border: #027bc1;                               /* 성장 카드 보더 */
  --rs2-name: #027bc1;                                 /* 성장 단계명 */
  --rs2-head: rgba(2, 123, 193, 0.12);                 /* 성장 헤더 그라데이션 끝 */
  --rs2-glow: 2, 123, 193;                             /* 성장 꼬리 글로우(rgb) */
  --rs2-line: #027bc1;                                 /* 성장 라인 */
  --rs3-border: #1c589c;                               /* 성숙 카드 보더 */
  --rs3-name: #1c589c;                                 /* 성숙 단계명 */
  --rs3-head: rgba(28, 88, 156, 0.12);                 /* 성숙 헤더 그라데이션 끝 */
  --rs3-glow: 28, 88, 156;                             /* 성숙 꼬리 글로우(rgb) */
  --rs3-line: #1c589c;                                 /* 성숙 라인 */
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);                     /* 풀블리드 — 본문 컨테이너 밖 100vw */
  margin-top: var(--ds-number-32, 6.4rem);
  padding-block: var(--ds-number-40, 8rem);            /* 상하 80px */
  background: var(--road-bg);
  overflow: hidden;
}
/* 로드맵(풀블리드)이 푸터에 바로 붙도록 페이지 하단 갭 제거 */
.sub-page-wrap.mgmt-philosophy { margin-bottom: 0; }
/* 풀블리드 내부 콘텐츠를 본문 컨테이너(1440) 폭으로 재정렬 */
.mgmt-philosophy .ethics-strategy .road > .sh,
.mgmt-philosophy .ethics-strategy .road > .rmap {
  width: min(var(--ds-contents-size-wide, 144rem), 100% - var(--ds-number-30, 6rem));  /* 1440 cap + 좌우 3rem 거터 */
  margin-inline: auto;
  box-sizing: border-box;
}
/* 제목 — 다크 중앙, 바 없음 */
.mgmt-philosophy .ethics-strategy .road .sh {
  justify-content: center;
  margin-bottom: var(--ds-number-20, 4rem);
}
.mgmt-philosophy .ethics-strategy .road .sh__bar { display: none; }
.mgmt-philosophy .ethics-strategy .road .sh__t {
  color: var(--road-title);
  text-align: center;
}
/* 카드 줄 — 상단 정렬(카드 정렬), 꼬리가 계단식 */
.mgmt-philosophy .ethics-strategy .rmap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--ds-number-12, 2.4rem);                    /* 24px */
}
/* 스테이지 = 컬럼(흰 카드 + 그 아래 컬러 꼬리) */
.mgmt-philosophy .ethics-strategy .rstage {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* 흰 카드 */
.mgmt-philosophy .ethics-strategy .rstage__card {
  background: var(--ds-color-gray-0, #fff);
  border: var(--ds-border-width-thin, 0.1rem) solid var(--rs-border);
  border-radius: var(--road-card-radius);
  box-shadow: 0 0.4rem 1.2rem rgba(30, 33, 36, 0.2);   /* Figma 고유 그림자 */
  overflow: hidden;
}
/* 헤더 — 상단 흰빛→단계색 12% 그라데이션, 단계명/연도 양끝 */
.mgmt-philosophy .ethics-strategy .rstage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-number-6, 1.2rem);
  padding: var(--ds-number-12, 2.4rem);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), var(--rs-head));
}
/* 단계명(좌, bold) */
.mgmt-philosophy .ethics-strategy .rstage__name {
  font-size: var(--ds-font-size-24, 2.4rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  line-height: var(--ds-typo-line-height-heading, 1.3);
  color: var(--rs-name);
}
/* 연도(우, 그레이) */
.mgmt-philosophy .ethics-strategy .rstage__year {
  flex-shrink: 0;
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--road-year);
  line-height: var(--ds-typo-line-height-heading, 1.3);
  letter-spacing: -0.03em;
}
/* 본문 리스트 — 흰 배경, 점(●) 항목 */
.mgmt-philosophy .ethics-strategy .rstage__list {
  list-style: none;
  margin: 0;
  padding: var(--ds-number-12, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6, 1.2rem);
}
.mgmt-philosophy .ethics-strategy .rstage__list li {
  position: relative;
  padding-left: var(--ds-number-8, 1.6rem);            /* 점(3px)+gap(12px) */
  font-size: var(--road-li-size);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--road-title);
  line-height: var(--road-li-lh);
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  word-break: keep-all;
}
.mgmt-philosophy .ethics-strategy .rstage__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05rem;                                        /* 24px line-height 세로중앙 정렬 */
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--road-title);
}
/* 카드↔꼬리 사이 여백 + 컬러 꼬리(세로 그라데이션 글로우 + 하단 6px 라인).
   계단식: 도입→성숙으로 꼬리가 점점 길어지고(글로우↑) 라인이 위로 올라감.
   ::before = 글로우, ::after = 라인. 카드 아래 빈 공간을 ::before로 채우고 라인이 맨 아래. */
.mgmt-philosophy .ethics-strategy .rstage::after {
  content: '';
  display: block;
  margin-top: var(--rs-tail-gap, 4rem);                /* 카드↔꼬리 간격(계단식) */
  height: var(--rs-tail-glow, 4rem);                   /* 글로우 높이(계단식) */
  border-radius: var(--road-line-radius);
  background:
    /* 맨 위 6px 컬러 라인 (카드 바로 아래) */
    linear-gradient(var(--rs-line), var(--rs-line)) top / 100% 0.6rem no-repeat,
    /* 라인에서 아래로 흘러내리는 세로 글로우 */
    linear-gradient(to bottom,
      rgba(var(--rs-glow), 0.34) 0%,
      rgba(var(--rs-glow), 0.22) 12%,
      rgba(var(--rs-glow), 0) 100%);
}
/* 단계별 컬러·계단 변수 매핑 */
.mgmt-philosophy .ethics-strategy .rstage--1 {
  --rs-border: var(--rs1-border); --rs-name: var(--rs1-name); --rs-head: var(--rs1-head);
  --rs-glow: var(--rs1-glow); --rs-line: var(--rs1-line);
  --rs-tail-gap: 12rem; --rs-tail-glow: 4rem;          /* 도입 — 라인 가장 아래, 글로우 짧음 */
}
.mgmt-philosophy .ethics-strategy .rstage--2 {
  --rs-border: var(--rs2-border); --rs-name: var(--rs2-name); --rs-head: var(--rs2-head);
  --rs-glow: var(--rs2-glow); --rs-line: var(--rs2-line);
  --rs-tail-gap: 8rem; --rs-tail-glow: 8rem;           /* 성장 — 라인 중간, 글로우 중간 */
}
.mgmt-philosophy .ethics-strategy .rstage--3 {
  --rs-border: var(--rs3-border); --rs-name: var(--rs3-name); --rs-head: var(--rs3-head);
  --rs-glow: var(--rs3-glow); --rs-line: var(--rs3-line);
  --rs-tail-gap: 4rem; --rs-tail-glow: 12rem;          /* 성숙 — 라인 가장 위, 글로우 가장 김·진함 */
}
/* 성숙 카드 보더 — Figma는 2px이나 다른 카드와 통일해 1px (사용자 요청) */
.mgmt-philosophy .ethics-strategy .rstage--3 .rstage__card {
  border-width: var(--ds-border-width-thin, 0.1rem);
}

/* ════════════════════════════════════════════════════════════════
   3-C. ESG경영 전략체계도 — 새 Figma 디자인 (.esg-vision / .esg-fields)
   Figma JcDwyleEw4eMrCaVoxRDkv / 14814:25059 (VISION+목표) · 14946:22249 (분야별)
   ESG 전용 클래스 — 윤리/인권 .strat · 로드맵 .road · 선언문과 미겹침.
   E = 상세(전략목표/키워드/KPI 3필드 + 전략과제 사진 띠), S·G = 헤더+설명 요약 행.
   ════════════════════════════════════════════════════════════════ */
.mgmt-philosophy .ethics-strategy {
  /* ESG 색 — DS 토큰 우선, Figma 직대조 매핑 */
  --esg-e: var(--ds-color-brand-green-aa, #3a8434);   /* E 친환경 = brand green-aa (Figma #3a8434) */
  --esg-s: var(--ds-color-brand-blue-aa, #027bc1);    /* S 사회 = brand blue-aa (Figma S 이니셜 #027bc1) */
  --esg-g: var(--ds-color-brand-red-aa, #e03010);     /* G 지배구조 = brand red-aa (Figma G 이니셜 #e03010) */
  /* Figma 고유값 (DS 폰트 스케일·치수에 부재 — .strat/.road 패턴대로 스코프 변수 정의) */
  --esg-fs-52: 5.2rem;                                /* VISION·영문타이틀 52 (DS 44→60 사이 부재) */
  --esg-fs-26: 2.6rem;                                /* 지표 값 26 (DS 24→28 사이 부재) */
  --esg-goal-border: #e5e5e5;                         /* 경영목표 알약 보더 (Figma 고유) */
  --esg-goal-shadow: 0 1.2rem 1.6rem rgba(0, 0, 0, 0.05);   /* Figma 0 12 16 .05 */
  --esg-band-overlay: rgba(3, 31, 63, 0.5);           /* 전략과제 사진 다크 네이비 오버레이 (Figma) */
  --esg-band-solid: #031f3f;                          /* 사진 없는 전략과제 띠(S/G) 솔리드 네이비 (Figma 오버레이색 100%) */
}
/* 접근성 — 모션 최소화 환경에서는 펼침 전환 즉시 */
@media (prefers-reduced-motion: reduce) {
  .mgmt-philosophy .ethics-strategy .esg-field__detail { transition: none; }
}

/* ESG 패널만 가로 최대너비 1440(페이지 기본)으로 — 윤리/인권(.ethics-strategy 공용 112rem)은
   그대로 두고 ESG(#esg-panel-system)에 한정해 넓힌다 (사용자 요청 1200→1440). */
.mgmt-philosophy #esg-panel-system .ethics-strategy {
  max-width: var(--ds-contents-size-wide, 144rem);
}

/* ─ VISION 블록 (Figma 14814:25063) ─ */
.mgmt-philosophy .ethics-strategy .esg-vision {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-30, 6rem);   /* 텍스트 ↔ 경영목표 알약 (Figma 60) */
  text-align: center;
  margin-bottom: var(--ds-number-40, 8rem);
}
.mgmt-philosophy .ethics-strategy .esg-vision__eyebrow {
  font-size: var(--ds-font-size-12, 1.2rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  letter-spacing: 0.08em;
  color: var(--ds-color-brand-dark, #343a48);
  margin: 0 0 var(--ds-number-6, 1.2rem);
}
.mgmt-philosophy .ethics-strategy .esg-vision__text {
  font-size: var(--esg-fs-52);   /* Figma 52 Bold */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ds-light-color-text-basic, #1e2124);
  margin: 0;
  word-break: keep-all;
}
.mgmt-philosophy .ethics-strategy .esg-vision__accent {
  color: var(--ds-color-brand-green-aa, #3a8434);   /* "지속가능한 경영 구현" 그린 강조 (Figma) */
}
/* ESG 경영목표 — 흰 알약 (Figma 14946:21048).
   인권경영 형태(.svision) 안에서 파란 VISION 알약 아래에 위치 — svision은 flex column gap 없음이라
   알약↔목표 간격을 직접 부여(원 .esg-vision gap 60px과 동일). svision align-items:center로 자동 가운데 정렬. */
.mgmt-philosophy .ethics-strategy .svision .esg-goal {
  margin-top: var(--ds-number-30, 6rem);
}
.mgmt-philosophy .ethics-strategy .esg-goal {
  background: var(--ds-color-gray-0, #fff);
  border: var(--ds-border-width-thin, 0.1rem) solid var(--esg-goal-border, #e5e5e5);   /* Figma #e5e5e5 고유 */
  border-radius: var(--ds-radius-max, 999px);
  box-shadow: var(--esg-goal-shadow, 0 1.2rem 1.6rem rgba(0, 0, 0, 0.05));   /* Figma 0 12 16 .05 */
  padding: var(--ds-number-20, 4rem) var(--ds-number-40, 8rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-3, 0.6rem);
  max-width: 100%;
}
.mgmt-philosophy .ethics-strategy .esg-goal__label {
  font-size: var(--ds-font-size-14, 1.4rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  letter-spacing: 0.05em;
  color: var(--ds-color-gray-60, #58616a);
  margin: 0;
}
.mgmt-philosophy .ethics-strategy .esg-goal__text {
  font-size: var(--ds-font-size-24, 2.4rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  line-height: 1.5;
  color: var(--ds-light-color-text-basic, #111);
  margin: 0;
  word-break: keep-all;
}
/* 경영목표 3개 키문구(2050 탄소중립·가족친화우수기관·부정부패 Zero화) 굵게 (사용자 요청) */
.mgmt-philosophy .ethics-strategy .esg-goal__text strong {
  font-weight: var(--ds-typo-font-weight-bold, 700);
}

/* 경영분야별 전략 헤더 — 중앙 정렬 (Figma 14814:25158, 32 SemiBold) */
.mgmt-philosophy .ethics-strategy .esg-fields-head {
  justify-content: center;
  margin-top: 0;
  margin-bottom: var(--ds-number-20, 4rem);
}
.mgmt-philosophy .ethics-strategy .esg-fields-head .sh__t {
  font-size: var(--ds-font-size-28, 2.8rem);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
}

/* ─ 분야별 전략 행 (Figma 14946:22249) — 3항목 모두 접힘 기본 + 호버/포커스/탭 펼침 ─ */
.mgmt-philosophy .ethics-strategy .esg-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* 각 항목 = 하단 구분선 행(접힘 기본) — E/S/G 동일 */
.mgmt-philosophy .ethics-strategy .esg-field {
  border-bottom: var(--ds-border-width-thin, 0.1rem) solid var(--ds-color-gray-20, #cdd1d5);   /* 항목 구분선 (Figma) */
}
/* 헤더(이니셜 컬러 + 우측 요약) — 펼침 토글 버튼(터치·키보드) */
.mgmt-philosophy .ethics-strategy .esg-field__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-number-12, 2.4rem);
  flex-wrap: wrap;
  width: 100%;
  padding: var(--ds-number-20, 4rem) 0;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.mgmt-philosophy .ethics-strategy .esg-field__top:focus-visible {
  outline: var(--ds-border-width-medium, 0.2rem) solid var(--esg-field-color);
  outline-offset: 0.4rem;   /* .mv-strat__navbtn 포커스 패턴과 동일 */
}
/* 펼침 영역 — grid-rows 0fr→1fr 부드러운 전환(height:auto 점프 금지) */
.mgmt-philosophy .ethics-strategy .esg-field__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;   /* DS 모션 토큰 부재 — .mv-strat 등 기존 raw 0.3s 패턴과 동일 */
}
.mgmt-philosophy .ethics-strategy .esg-field__detail-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-20, 4rem);
}
.mgmt-philosophy .ethics-strategy .esg-field__metrics,
.mgmt-philosophy .ethics-strategy .esg-field__band {
  margin-top: 0;
}
/* 펼침 트리거 — 호버 / 키보드 포커스(focus-within) / 토글버튼 열림(.is-open) */
.mgmt-philosophy .ethics-strategy .esg-field:hover .esg-field__detail,
.mgmt-philosophy .ethics-strategy .esg-field:focus-within .esg-field__detail,
.mgmt-philosophy .ethics-strategy .esg-field.is-open .esg-field__detail {
  grid-template-rows: 1fr;
}
/* 펼침 시 상단 행 하단 여백 확보(요약 ↔ 상세 간격) */
.mgmt-philosophy .ethics-strategy .esg-field:hover .esg-field__detail-inner,
.mgmt-philosophy .ethics-strategy .esg-field:focus-within .esg-field__detail-inner,
.mgmt-philosophy .ethics-strategy .esg-field.is-open .esg-field__detail-inner {
  padding-bottom: var(--ds-number-20, 4rem);
}
/* 영문 타이틀 (Figma 52 Bold, 첫 글자만 컬러) */
.mgmt-philosophy .ethics-strategy .esg-field__title {
  position: relative;
  display: flex;
  align-items: flex-end;
  font-size: var(--esg-fs-52);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ds-light-color-text-basic, #1e2124);
  margin: 0;
}
.mgmt-philosophy .ethics-strategy .esg-field__initial { color: var(--esg-field-color); }
.mgmt-philosophy .ethics-strategy .esg-field--e { --esg-field-color: var(--esg-e); }
.mgmt-philosophy .ethics-strategy .esg-field--s { --esg-field-color: var(--esg-s); }
.mgmt-philosophy .ethics-strategy .esg-field--g { --esg-field-color: var(--esg-g); }
/* 컬러 도트 — 우상단 라운드(말풍선형) 작은 사각 (Figma 14946:22409) */
.mgmt-philosophy .ethics-strategy .esg-field__dot {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: var(--ds-number-3, 0.6rem);
  margin-bottom: 0.6rem;
  background: var(--esg-field-color);
  border-radius: var(--ds-radius-max, 999px) var(--ds-radius-max, 999px) var(--ds-radius-max, 999px) 0;
  flex-shrink: 0;
}
/* 우측 설명 (Figma 18 Medium gray/60, 우측 정렬) */
.mgmt-philosophy .ethics-strategy .esg-field__desc {
  font-size: var(--ds-font-size-18, 1.8rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  line-height: 1.5;
  color: var(--ds-color-gray-60, #58616a);
  text-align: right;
  margin: 0;
  word-break: keep-all;
}
/* E 상세 — 3필드 행 (Figma 14946:22152, 각 칸 상단 검정 보더) */
.mgmt-philosophy .ethics-strategy .esg-field__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-number-20, 4rem);
}
.mgmt-philosophy .ethics-strategy .esg-metric {
  border-top: var(--ds-border-width-thin, 0.1rem) solid var(--ds-light-color-text-basic, #1e2124);   /* Figma 상단 검정선 */
  padding: var(--ds-number-20, 4rem) var(--ds-number-4, 0.8rem) var(--ds-number-24, 4.8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-6, 1.2rem);
  text-align: center;
}
.mgmt-philosophy .ethics-strategy .esg-metric__k {
  font-size: var(--ds-font-size-18, 1.8rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  letter-spacing: -0.009em;
  color: var(--ds-color-gray-60, #58616a);
  margin: 0;
}
.mgmt-philosophy .ethics-strategy .esg-metric__v {
  font-size: var(--esg-fs-26);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  letter-spacing: -0.019em;
  line-height: 1.3;
  color: var(--ds-color-gray-90, #1e2124);
  margin: 0;
  word-break: keep-all;
}
/* 전략과제 — 띠(다크 네이비) + 알약 태그 + 본문 (Figma 14946:22210)
   기본 = 사진 없는 솔리드 네이비(S/G), --photo 변형이 E 사진을 오버레이 합성 */
.mgmt-philosophy .ethics-strategy .esg-field__band {
  position: relative;
  min-height: 32rem;   /* Figma 320 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-6, 1.2rem);
  padding: var(--ds-number-30, 6rem) var(--ds-number-20, 4rem);
  overflow: hidden;
  background: var(--esg-band-solid, #031f3f);   /* 사진 없는 항목(S/G) — 다크 네이비 솔리드 */
}
/* 사진 띠 — 다크 네이비 오버레이 위 분야별 사진 (Figma 14946:26504).
   E/S/G 각 카드가 --esg-band-img 변수로 자기 사진을 지정(DRY: 단일 룰). */
.mgmt-philosophy .ethics-strategy .esg-field__band--photo {
  background: var(--esg-band-overlay, rgba(3, 31, 63, 0.5)) var(--esg-band-img) center / cover no-repeat;
  background-blend-mode: multiply;
}
.mgmt-philosophy .ethics-strategy .esg-field--e .esg-field__band--photo { --esg-band-img: url(../../img/esg-environment-band.jpg); }
.mgmt-philosophy .ethics-strategy .esg-field--s .esg-field__band--photo { --esg-band-img: url(../../img/esg-social-band.jpg); }
.mgmt-philosophy .ethics-strategy .esg-field--g .esg-field__band--photo { --esg-band-img: url(../../img/esg-governance-band.jpg); }
.mgmt-philosophy .ethics-strategy .esg-field__band-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-number-5, 1rem) var(--ds-number-6, 1.2rem);
  border-radius: var(--ds-radius-max, 999px);
  background: var(--ds-color-gray-90, #1e2124);
  color: var(--ds-color-gray-0, #fff);
  font-size: var(--ds-font-size-20, 2rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  letter-spacing: 0.04em;
}
.mgmt-philosophy .ethics-strategy .esg-field__band-text {
  position: relative;
  max-width: 96rem;
  font-size: var(--ds-font-size-24, 2.4rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  line-height: 1.5;
  color: var(--ds-color-gray-0, #fff);
  text-align: center;
  margin: 0;
  word-break: keep-all;
}


/* ════════════════════════════════════════════════════════════════
   4. 게시판(공시자료 / 사회공헌) — DS .ds-board-list 그대로 +
   3컬럼 그리드(번호/제목/등록일)만 페이지에서 보정
   ════════════════════════════════════════════════════════════════ */

/* 3컬럼 그리드(번호/제목/등록일) — DS 기본 .ds-board-list 그리드 보정.
   첨부 아이콘(.ds-board-list__attach)·고정배지(.notice-pin)·태그(.ds-tag)는
   DS(layout.css/component.css) 기본 스타일 그대로 사용 — 재정의 금지. */
.mgmt-philosophy .mgmt-board .ds-board-list__head,
.mgmt-philosophy .mgmt-board .ds-board-list__item {
  grid-template-columns: 8rem 1fr 12rem;
}
.mgmt-philosophy .mgmt-board .ds-pagination {
  margin-top: var(--ds-number-25, 5rem);
}


/* ════════════════════════════════════════════════════════════════
   5. 미션 및 비전 (#d1-panel-mission) — Figma 14946:23752
   콘텐츠 출처 = 기획서 SB(MNU-U-110206), 디자인 = Figma.
   ① 미션/비전(배지+웨이브 커넥터+카드 2)  ② 핵심가치·경영목표(사진 백드롭 칩)
   ③ 전략방향 및 전략과제(중앙 웨이브 요동 + 좌상세/우목록 캐러셀)
   윤리/인권 .strat · ESG .esg-* · 로드맵 .road · 선언문과 미겹침(전용 .mv-* 네임스페이스).
   고유값(DS 토큰 부재 — 48px 등)은 .mv 스코프 변수로 정의(정의부).
   ════════════════════════════════════════════════════════════════ */
.mgmt-philosophy .mv {
  /* Figma 고유값 (DS 토큰 스케일 부재) */
  --mv-fs-48: 4.8rem;                 /* 전략 번호 01~04 / 상세 타이틀 (DS 40→60 사이 부재) */
  --mv-fs-32: var(--ds-font-size-32, 3.2rem);
  --mv-card-border: #e5e5e5;          /* 카드 보더 (Figma 고유, DS gray-10 근사) */
  /* 미션/비전 카드 — 흰 fill이 분명히 떠 보이도록 그림자 강화(사용자 요청: 투명→불투명 흰 카드).
     Figma 원안(0 10 13 .05)은 흰 페이지에서 카드가 거의 안 보였음. */
  --mv-shadow-card: 0 1.6rem 4rem rgba(0, 0, 0, 0.16);   /* 사용자: 흰 카드가 또렷이 떠 보이게 그림자 강화 */
  --mv-shadow-badge: 0 2rem 2.2rem rgba(0, 0, 0, 0.3);   /* Figma 0 20 22 .30 */
  --mv-photo-size: 56rem;             /* 전략 사진 카드 560 */
  --mv-overlay: rgba(255, 255, 255, 0.8);   /* 핵심가치 사진 백드롭 80% 흰 오버레이 (Figma; DS alpha-white80 부재) */
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-40, 8rem);
  padding-top: var(--ds-number-25, 5rem);
  /* 전략방향 섹션 ↔ 푸터 사이 여백(사용자 요청). 로드맵 풀블리드용
     .sub-page-wrap{margin-bottom:0}(§3-B, .road 소유)이 페이지 하단 갭을 0으로
     만들어 미션비전 전략 섹션이 푸터에 바짝 붙던 것 보정 — 그 룰은 건드리지 않고
     미션 패널 자체에 하단 여백을 준다. */
  padding-bottom: var(--ds-number-40, 8rem);
}

/* 섹션 대타이틀 (Figma 32 Bold #111, 가운데) */
.mgmt-philosophy .mv .mv-sectitle {
  font-size: var(--mv-fs-32);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  color: var(--ds-light-color-text-basic, #111);
  text-align: center;
  margin: 0 0 var(--ds-number-30, 6rem);
  word-break: keep-all;
}

/* ── 1) 미션 및 비전 ── */
.mgmt-philosophy .mv .mv-mv {
  max-width: 118rem;        /* Figma 1180 */
  margin: 0 auto;
  width: 100%;
}
.mgmt-philosophy .mv .mv-mv__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 평택시문화재단 배지 (Figma 14946:23812 — brand-blue 알약 + 그림자) */
.mgmt-philosophy .mv .mv-mv__badge {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-brand-blue-aa, #027bc1);
  color: var(--ds-color-gray-0, #fff);
  font-size: var(--ds-font-size-32, 3.2rem);   /* 40→32 — 배지만 축소 (사용자 요청, VISION 알약 텍스트는 유지) */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  letter-spacing: -0.0125em;
  border-radius: var(--ds-radius-max, 999px);
  box-shadow: var(--mv-shadow-badge);
  padding: var(--ds-number-8, 1.6rem) var(--ds-number-24, 4.8rem);   /* 20/60 → 16/48 (축소 정합) */
  word-break: keep-all;
  text-align: center;
}
/* 배지 → 카드 연결 웨이브(외부 SVG 삼각 그라데이션, Figma 14946:23815). 배지·카드와 겹침 */
.mgmt-philosophy .mv .mv-mv__connector {
  z-index: 1;        /* 카드 뒤로 — 깔때기 파란 끝이 흰 카드 위로 비치지 않게 (카드 z:2가 덮음) */
  width: min(96.8rem, 100%);    /* Figma 968 */
  height: 10.3rem;              /* Figma 103 */
  margin-top: calc(-1 * var(--ds-number-10, 2rem));
  margin-bottom: calc(-1 * var(--ds-number-10, 2rem));
  background: url(../../img/mv-connector.svg) no-repeat center bottom / contain;
  pointer-events: none;
}
.mgmt-philosophy .mv .mv-mv__cards {
  position: relative;
  z-index: 2;        /* 커넥터 위로 — 흰 카드가 깔때기 파란 끝을 덮음 */
  display: flex;
  gap: var(--ds-number-32, 6.4rem);     /* Figma 64 */
  justify-content: center;
  width: 100%;
}
.mgmt-philosophy .mv .mv-mv__card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 56rem;            /* Figma 560 */
  background: var(--ds-color-gray-0, #fff);
  border: var(--ds-border-width-thin, 0.1rem) solid var(--mv-card-border);
  border-radius: var(--ds-radius-max, 999px);
  box-shadow: var(--mv-shadow-card);
  padding: var(--ds-number-20, 4rem) var(--ds-number-20, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-2, 0.4rem);            /* 라벨↔본문 갭 절반 — 윤리경영 .svision__card와 동일 (사용자 요청) */
  text-align: center;
}
.mgmt-philosophy .mv .mv-mv__tag {
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  letter-spacing: 0.06em;
  color: var(--ds-color-brand-dark, #343a48);
}
.mgmt-philosophy .mv .mv-mv__txt {
  font-size: var(--ds-font-size-20, 2rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ds-color-gray-90, #1e2124);
  margin: 0;
  word-break: keep-all;
}

/* ── 2) 핵심가치 · 경영 목표 (Figma 14946:23828 — 풀블리드 사진 백드롭) ── */
.mgmt-philosophy .mv .mv-core {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);     /* 풀블리드 */
  min-height: 70rem;                   /* Figma 700 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-number-30, 6rem) var(--ds-number-20, 4rem);
  background: url(../../img/mv-corevalues-bg.jpg) center / cover no-repeat;
  overflow: hidden;
}
/* 사진 위 80% 흰 오버레이 (Figma rgba(255,255,255,0.8)) */
.mgmt-philosophy .mv .mv-core::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mv-overlay);
  pointer-events: none;
}
.mgmt-philosophy .mv .mv-core__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-number-20, 4rem);      /* Figma 40 */
  max-width: var(--ds-contents-size-wide, 144rem);
}
/* 좌측 행 라벨 (핵심가치 / 경영 목표) — 2행, 칩 행과 세로 정렬 */
.mgmt-philosophy .mv .mv-core__rows {
  display: flex;
  flex-direction: column;
  gap: 15.2rem;                        /* Figma 152 (행 간격) */
  flex-shrink: 0;
}
.mgmt-philosophy .mv .mv-core__rowhead {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6, 1.2rem);
}
.mgmt-philosophy .mv .mv-core__rowtitle {
  font-size: var(--mv-fs-32);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-brand-dark-aa, #343a48);
  white-space: nowrap;
  margin: 0;
}
.mgmt-philosophy .mv .mv-core__rowline {
  display: block;
  width: 4rem;                         /* Figma 40 */
  height: var(--ds-border-width-thin, 0.1rem);
  background: var(--ds-color-brand-dark, #343a48);
}
/* 칩 컬럼 4개 — 각 컬럼: 위 핵심가치(테두리 원) / 아래 경영목표(다크 원), 살짝 겹침 */
.mgmt-philosophy .mv .mv-core__cols {
  display: flex;
  gap: var(--ds-number-10, 2rem);      /* Figma 20 */
}
.mgmt-philosophy .mv .mv-core__col {
  display: flex;
  flex-direction: column;
}
.mgmt-philosophy .mv .mv-core__chip {
  width: 24rem;                        /* Figma 240 */
  aspect-ratio: 1 / 1;
  border-radius: var(--ds-radius-max, 999px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--ds-number-8, 1.6rem);
  word-break: keep-all;
}
.mgmt-philosophy .mv .mv-core__chip span {
  font-size: var(--ds-font-size-20, 2rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);   /* 사용자 요청: 원형 텍스트 굵기 +1단계(regular→medium) */
  line-height: 1.4;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
}
/* 핵심가치 — 투명(배경 비침) + secondary 테두리 (Figma border #bacbde).
   사용자 요청: 흰색 fill 제거(뒤 물결 배경 비치게, 테두리만 유지) */
.mgmt-philosophy .mv .mv-core__chip--value {
  position: relative;
  z-index: 2;
  margin-bottom: -4rem;                /* Figma mb -40 (다크 원과 겹침) */
  background: transparent;
  border: var(--ds-border-width-thin, 0.1rem) solid var(--ds-color-secondary-10, #d6e0eb);
  color: var(--ds-color-brand-dark, #343a48);
}
/* 경영목표 — 다크 원 (Figma brand-dark #343a48) */
.mgmt-philosophy .mv .mv-core__chip--goal {
  position: relative;
  z-index: 1;
  background: var(--ds-color-brand-dark, #343a48);
  color: var(--ds-color-gray-0, #fff);
}

/* ── 3) 전략방향 및 전략과제 (Figma 14946:23858 — 웨이브 + 캐러셀) ── */
.mgmt-philosophy .mv .mv-strat {
  max-width: var(--ds-contents-size-wide, 144rem);
  margin: 0 auto;
  width: 100%;
}
.mgmt-philosophy .mv .mv-strat__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--mv-photo-size) 1fr;
  align-items: center;
  gap: var(--ds-number-20, 4rem);
  min-height: var(--mv-photo-size);
}
/* 중앙 웨이브 — 스테이지 전체에 풀폭으로 가로지름. 사용자 요청: 가운데 이미지에
   가려지지 않고 "위로" 올라오게 → 사진(z:1) 위(z:2)에 라인이 보이도록.
   상세텍스트·목록(콘텐츠)은 더 위(z:3)에 둬 클릭/가독 우선. */
.mgmt-philosophy .mv .mv-strat__wave {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 142vw;                        /* Figma 2051 — 컨테이너 넘어 좌우로 흐름 */
  max-width: 205rem;
  height: 22.6rem;                     /* Figma 226 */
  z-index: 2;
  pointer-events: none;
  /* 정적 폴백(JS 미동작/reduced-motion 전) — 외부 웨이브 SVG */
  background: url(../../img/mv-wave.svg) no-repeat center / 100% 100%;
}
/* JS가 inline 애니 SVG 주입하면 정적 배경 제거 */
.mgmt-philosophy .mv .mv-strat__wave.is-animated {
  background: none;
}
.mgmt-philosophy .mv .mv-strat__wave-svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* 좌: 활성 전략 상세 (콘텐츠 — 웨이브보다 위 z:3) */
.mgmt-philosophy .mv .mv-strat__detail {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-20, 4rem);
}
.mgmt-philosophy .mv .mv-strat__detail.is-enter {
  animation: mv-fade-up 0.5s ease both;
}
.mgmt-philosophy .mv .mv-strat__detail-title {
  font-size: var(--mv-fs-48);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ds-color-gray-90, #1e2124);
  margin: 0;
  word-break: keep-all;
}
.mgmt-philosophy .mv .mv-strat__detail-accent {
  color: var(--ds-color-brand-blue-aa, #027bc1);
}
.mgmt-philosophy .mv .mv-strat__detail-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-5, 1rem);
}
.mgmt-philosophy .mv .mv-strat__detail-tasks li {
  position: relative;
  padding-left: var(--ds-number-9, 1.8rem);
  font-size: var(--ds-font-size-18, 1.8rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  line-height: 1.6;
  letter-spacing: -0.008em;
  color: var(--ds-light-color-text-subtle, #464c53);
  word-break: keep-all;
}
.mgmt-philosophy .mv .mv-strat__detail-tasks li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 1.2rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ds-color-brand-blue-aa, #027bc1);
}
/* 중앙: 전략 사진 카드 (Figma 14946:23864 — 560 라운드40 + 그림자) */
.mgmt-philosophy .mv .mv-strat__photo {
  position: relative;
  z-index: 1;
  width: var(--mv-photo-size);
  aspect-ratio: 1 / 1;
  border-radius: var(--ds-radius-xlarge, 1.6rem);
  overflow: hidden;
  box-shadow: 0 0.8rem 1.6rem 0.4rem rgba(0, 0, 0, 0.08);   /* Figma 0 8 16 4 .08 */
}
/* 4장 스택 — 활성 1장만 보임(크로스페이드). JS 미동작 시엔 hidden 속성이 폴백(1장만 표시) */
.mgmt-philosophy .mv .mv-strat__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.mgmt-philosophy .mv .mv-strat__img.is-active {
  opacity: 1;
  visibility: visible;
}
/* JS 비활성(폴백) — hidden 속성이 그대로면 정적 1장만, 첫 장은 보이게 */
.mgmt-philosophy .mv .mv-strat__img[hidden] { display: none; }
.mgmt-philosophy .mv .mv-strat__photo:not(.is-js) .mv-strat__img.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .mgmt-philosophy .mv .mv-strat__img { transition: none; }
}
/* 우: 전략방향 목록 01~04 (콘텐츠 — 웨이브보다 위 z:3, 클릭 우선) */
.mgmt-philosophy .mv .mv-strat__nav {
  position: relative;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-20, 4rem);      /* Figma 40 */
}
.mgmt-philosophy .mv .mv-strat__navbtn {
  display: flex;
  align-items: center;
  gap: var(--ds-number-9, 1.8rem);     /* Figma 18 */
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ds-color-gray-20, #cdd1d5);     /* 비활성 회색 (Figma) */
  transition: color 0.3s ease;
}
.mgmt-philosophy .mv .mv-strat__navno {
  flex-shrink: 0;
  font-size: var(--mv-fs-48);
  font-weight: var(--ds-typo-font-weight-thin, 100);   /* 사용자: 01~04 숫자 더 얇게 (light 300 → thin 100) */
  line-height: 1;
  letter-spacing: -0.02em;
}
.mgmt-philosophy .mv .mv-strat__navdir {
  font-size: var(--ds-font-size-24, 2.4rem);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
  line-height: 1.3;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.mgmt-philosophy .mv .mv-strat__navdir b {
  font-weight: var(--ds-typo-font-weight-semibold, 600);
}
/* 활성 — 파란색 (번호+방향), 방향 강조 부분도 파랑 */
.mgmt-philosophy .mv .mv-strat__navbtn.is-active {
  color: var(--ds-color-brand-blue-aa, #027bc1);
}
.mgmt-philosophy .mv .mv-strat__navbtn.is-active .mv-strat__navdir b {
  color: var(--ds-color-brand-blue-aa, #027bc1);
}
.mgmt-philosophy .mv .mv-strat__navbtn:focus-visible {
  outline: var(--ds-border-width-medium, 0.2rem) solid var(--ds-color-brand-blue-aa, #027bc1);
  outline-offset: 0.4rem;
  border-radius: var(--ds-radius-small, 0.4rem);
}

@keyframes mv-fade-up {
  from { opacity: 0; transform: translateY(1.2rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mgmt-philosophy .mv .mv-strat__detail.is-enter { animation: none; }
}


/* ════════════════════════════════════════════════════════════════
   R. 반응형 (태블릿 / 모바일) — 모바일 시안 없음
   텍스트 위계·간격 단계 축소 (모바일 위계 룰)
   ════════════════════════════════════════════════════════════════ */

/* ── 태블릿 (768~1199px) ── */
@media (max-width: 1199px) {
  /* 미션및비전 — 미션/비전 카드 세로 스택, 전략 캐러셀 세로 재배치 */
  .mgmt-philosophy .mv { gap: var(--ds-number-30, 6rem); }
  .mgmt-philosophy .mv .mv-sectitle { font-size: var(--ds-font-size-28, 2.8rem); margin-bottom: var(--ds-number-20, 4rem); }
  .mgmt-philosophy .mv .mv-mv__badge { font-size: var(--ds-font-size-32, 3.2rem); padding: var(--ds-number-8, 1.6rem) var(--ds-number-20, 4rem); }
  .mgmt-philosophy .mv .mv-mv__cards { flex-direction: column; align-items: center; gap: var(--ds-number-12, 2.4rem); }
  .mgmt-philosophy .mv .mv-mv__card { width: 100%; max-width: 48rem; padding: var(--ds-number-15, 3rem) var(--ds-number-16, 3.2rem); }
  .mgmt-philosophy .mv .mv-mv__connector { height: 7rem; }
  /* 핵심가치·경영목표 — 태블릿부터 모바일과 동일 구조(라벨 가운데 위 → 값 4 가로 한 줄 → 라벨 → 목표 4).
     래퍼(rows/cols/col) display:contents 해체 + grid + order. 데스크탑(≥1200)은 원래대로(좌측 라벨·세로 겹침쌍) 유지. */
  .mgmt-philosophy .mv .mv-core { min-height: 0; }
  .mgmt-philosophy .mv .mv-core__inner {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    align-items: center;
    column-gap: var(--ds-number-6, 1.2rem);
    row-gap: 0;
    width: 100%;
  }
  .mgmt-philosophy .mv .mv-core__rows,
  .mgmt-philosophy .mv .mv-core__cols,
  .mgmt-philosophy .mv .mv-core__col { display: contents; }
  .mgmt-philosophy .mv .mv-core__rowhead { grid-column: 1 / -1; justify-content: center; margin: 0; }
  .mgmt-philosophy .mv .mv-core__rows .mv-core__rowhead:first-child { order: 1; margin-bottom: var(--ds-number-12, 2.4rem); }
  .mgmt-philosophy .mv .mv-core__chip--value { order: 2; margin-bottom: 0; }   /* 세로 겹침쌍 해제(모바일 구조) */
  .mgmt-philosophy .mv .mv-core__rows .mv-core__rowhead:last-child { order: 3; margin-top: var(--ds-number-16, 3.2rem); margin-bottom: var(--ds-number-12, 2.4rem); }
  .mgmt-philosophy .mv .mv-core__chip--goal { order: 4; }
  .mgmt-philosophy .mv .mv-core__rowline { display: none; }
  .mgmt-philosophy .mv .mv-core__chip { width: clamp(14rem, 16vw, 19rem); justify-self: center; }
  .mgmt-philosophy .mv .mv-core__chip span { font-size: var(--ds-font-size-16, 1.6rem); }   /* 작아진 원에 긴 라벨 맞춤 */
  .mgmt-philosophy .mv .mv-core__rowtitle { font-size: var(--ds-font-size-24, 2.4rem); }
  /* 전략 캐러셀 — 사진 위, 상세/목록 아래로(세로 1열). 웨이브는 숨김(가로 의미 약화) */
  .mgmt-philosophy .mv .mv-strat__stage { grid-template-columns: 1fr; justify-items: center; gap: var(--ds-number-20, 4rem); min-height: 0; }
  .mgmt-philosophy .mv .mv-strat__wave { display: none; }
  .mgmt-philosophy .mv .mv-strat__photo { width: min(46rem, 100%); order: -1; }
  .mgmt-philosophy .mv .mv-strat__detail { width: 100%; max-width: 60rem; align-items: center; text-align: center; }
  .mgmt-philosophy .mv .mv-strat__detail-title { font-size: var(--ds-font-size-32, 3.2rem); }
  .mgmt-philosophy .mv .mv-strat__detail-tasks { align-items: flex-start; }
  .mgmt-philosophy .mv .mv-strat__nav { width: 100%; max-width: 60rem; gap: var(--ds-number-16, 3.2rem); }
  .mgmt-philosophy .mv .mv-strat__navno { font-size: var(--ds-font-size-36, 3.6rem); }
  .mgmt-philosophy .mv .mv-strat__navdir { font-size: var(--ds-font-size-20, 2rem); }

  .mgmt-philosophy .ethics-strategy { padding: 0 var(--ds-number-10, 2rem); }
  /* 윤리·인권 VISION 블록 — 태블릿 축소 */
  .mgmt-philosophy .ethics-strategy .svision { margin-bottom: var(--ds-number-30, 6rem); }
  .mgmt-philosophy .ethics-strategy .svision__mv { gap: var(--ds-number-16, 3.2rem); }
  .mgmt-philosophy .ethics-strategy .svision__card-text { font-size: var(--ds-font-size-20, 2rem); }
  .mgmt-philosophy .ethics-strategy .svision__text { font-size: var(--ds-font-size-32, 3.2rem); }
  .mgmt-philosophy .ethics-strategy .svision__pill { padding: var(--ds-number-9, 1.8rem) var(--ds-number-20, 4rem); }
  /* ESG 분야별 전략 — 태블릿: VISION/타이틀 축소, 헤더 세로 스택, 설명 좌측 정렬 */
  .mgmt-philosophy .ethics-strategy .esg-vision__text { font-size: var(--ds-font-size-36, 3.6rem); }
  .mgmt-philosophy .ethics-strategy .esg-vision { gap: var(--ds-number-20, 4rem); margin-bottom: var(--ds-number-30, 6rem); }
  .mgmt-philosophy .ethics-strategy .svision .esg-goal { margin-top: var(--ds-number-20, 4rem); }
  .mgmt-philosophy .ethics-strategy .esg-goal { padding: var(--ds-number-15, 3rem) var(--ds-number-20, 4rem); }
  .mgmt-philosophy .ethics-strategy .esg-goal__text { font-size: var(--ds-font-size-20, 2rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__top { flex-direction: column; align-items: flex-start; gap: var(--ds-number-6, 1.2rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__title { font-size: var(--ds-font-size-40, 4rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__desc { text-align: left; font-size: var(--ds-font-size-16, 1.6rem); }
  .mgmt-philosophy .ethics-strategy .esg-metric__v { font-size: var(--ds-font-size-22, 2.2rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__band-text { font-size: var(--ds-font-size-20, 2rem); }
  .mgmt-philosophy .ethics-strategy .rmap { flex-direction: column; align-items: stretch; gap: var(--ds-number-7, 1.4rem); }
  /* 1열 스택 시 카드 하단 컬러 꼬리(글로우+라인) 영역 전부 숨김 (사용자 요청) */
  .mgmt-philosophy .ethics-strategy .rstage::after { display: none; }
  .mgmt-philosophy .ethics-strategy .rstage { flex: 0 0 auto; }   /* 세로 스택 — 콘텐츠 높이(겹침 방지) */
  /* 스택 시 계단식 꼬리 간격 축소(가로일 때만 의미) — 라인+소량 글로우 균일 */
  .mgmt-philosophy .ethics-strategy .rstage--1,
  .mgmt-philosophy .ethics-strategy .rstage--2,
  .mgmt-philosophy .ethics-strategy .rstage--3 { --rs-tail-gap: 2rem; --rs-tail-glow: 3.2rem; }

  .mgmt-philosophy .ethics-sub-tab { margin: var(--ds-number-14, 2.8rem) 0; }
  .mgmt-philosophy #d1-panel-social { padding-top: var(--ds-number-14, 2.8rem); }

  .mgmt-philosophy .mgmt-declaration__title { font-size: var(--ds-font-size-28, 2.8rem); }
  .mgmt-philosophy .mgmt-declaration__box { padding: var(--ds-number-15, 3rem) var(--ds-number-12, 2.4rem); }
  .mgmt-philosophy .mgmt-declaration__list { padding: var(--ds-number-12, 2.4rem) var(--ds-number-10, 2rem); }

  /* 전략 플로우(.strat) — 컨테이너 폭이 화면을 넘지 않게 가변, 원은 가로 유지하되 축소 */
  .mgmt-philosophy .ethics-strategy .strat__goals { gap: var(--ds-number-10, 2rem); }
  .mgmt-philosophy .ethics-strategy .strat__pill { padding: var(--ds-number-15, 3rem) var(--ds-number-8, 1.6rem); }
  .mgmt-philosophy .ethics-strategy .strat__pill-text { font-size: var(--ds-font-size-20, 2.0rem); line-height: 1.45; }
  .mgmt-philosophy .ethics-strategy .strat__merge-u { width: 42rem; }
  .mgmt-philosophy .ethics-strategy .strat__tasks { width: 100%; max-width: var(--strat-tasks-w); padding: var(--ds-number-9, 1.8rem) var(--ds-number-10, 2rem); }
  .mgmt-philosophy .ethics-strategy .strat__task { width: auto; flex: 1 1 0; min-width: 0; }
  .mgmt-philosophy .ethics-strategy .strat__task-text { font-size: var(--ds-font-size-19, 1.9rem); }
  .mgmt-philosophy .ethics-strategy .strat__areas { width: 100%; max-width: var(--strat-areas-w); }
  .mgmt-philosophy .ethics-strategy .strat__area { width: auto; flex: 1 1 0; min-width: 0; }
  .mgmt-philosophy .ethics-strategy .strat__area-text { font-size: var(--ds-font-size-19, 1.9rem); }
}

/* ── 모바일 (≤767px) ── */
@media (max-width: 767px) {
  /* 미션및비전 — 모바일 위계 축소 */
  /* 카드 그림자 — PC용 강화값(0 1.6 4 .16)은 모바일에서 과함 → 작게(사용자 요청). PC는 현행 유지.
     배지 그림자 — PC 드롭섀도우(0 20 22 .30)도 모바일에서 과함 → 축소(사용자 요청 item34, PC 현행). */
  .mgmt-philosophy .mv {
    --mv-shadow-card: 0 0.8rem 2rem rgba(0, 0, 0, 0.1);
    --mv-shadow-badge: 0 0.8rem 1.2rem rgba(0, 0, 0, 0.18);
  }
  .mgmt-philosophy .mv .mv-sectitle { font-size: var(--ds-font-size-22, 2.2rem); margin-bottom: var(--ds-number-16, 3.2rem); }
  .mgmt-philosophy .mv .mv-mv__badge { font-size: var(--ds-font-size-22, 2.2rem); padding: var(--ds-number-6, 1.2rem) var(--ds-number-15, 3rem); }
  /* 카드 — 모바일 축소(너무 큼 보정) + 카드 사이 갭 축소(화살표 공간 확보) */
  .mgmt-philosophy .mv .mv-mv__cards { gap: var(--ds-number-6, 1.2rem); }
  .mgmt-philosophy .mv .mv-mv__card { max-width: 34rem; padding: var(--ds-number-9, 1.8rem) var(--ds-number-12, 2.4rem); gap: var(--ds-number-2, 0.4rem); }
  /* 서브텍스트 위계 — 라벨(작게) < 본문(크게) */
  .mgmt-philosophy .mv .mv-mv__tag { font-size: var(--ds-font-size-13, 1.3rem); }
  .mgmt-philosophy .mv .mv-mv__txt { font-size: var(--ds-font-size-16, 1.6rem); line-height: 1.4; }
  /* 배지 → 카드 커넥터 — PC와 동일한 파란 깔때기 SVG 그대로 유지(사용자 요청).
     세로 스택·축소 갭에 맞춰 너비/높이만 조정해 또렷이 보이게. (base 의 contain 배경 유지)
     item34: 배지↔첫 카드 사이 공간을 더 줘서 깔때기 화살표가 잘 보이게 —
     아래쪽 음수 겹침(base mb -2rem) 제거하고 위 겹침만 약하게, 높이 키움. */
  .mgmt-philosophy .mv .mv-mv__connector {
    width: min(34rem, 100%);   /* 모바일 카드 폭에 맞춤 */
    height: 6.4rem;
    margin-top: calc(-1 * var(--ds-number-4, 0.8rem));   /* 배지와만 살짝 겹침 */
    margin-bottom: var(--ds-number-4, 0.8rem);           /* 첫 카드와 분리(공간 확보) */
  }
  /* 핵심가치·경영목표 — 모바일 재구성(사용자 요청 item35):
     핵심가치 라벨(가운데,대시제거) → 값 2×2 → 경영목표 라벨(가운데,대시제거) → 목표 2×2.
     원을 더 크게(덜 빡빡), 겹침 유지(2×2 안에서 상하·좌우 인접끼리 림 겹침).
     HTML 무변경 — display:contents 로 래퍼(rows/cols/col) 해체 후 2열 그리드 + order 로 흐름 재배치. */
  .mgmt-philosophy .mv .mv-core { padding: var(--ds-number-20, 4rem) var(--ds-number-3, 0.6rem); }
  /* display:contents 로 래퍼(rows/cols/col) 해체 → 2열 그리드(2×2 보장) + order.
     라벨(전열폭) → 값 2×2 → 라벨 → 목표 2×2. column-gap/row-gap 0 + 트랙<칩 → 좌우 겹침,
     칩 음수 세로마진 → 상하 겹침. */
  .mgmt-philosophy .mv .mv-core__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* minmax(0,..) — 트랙이 칩 너비 이하로 줄어 칩이 좌우로 넘쳐 겹치게 */
    column-gap: 0;
    row-gap: 0;
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: 22rem;          /* 트랙 ≈11rem — 칩(12.5rem)이 좌우로 넘쳐 인접끼리 림 겹침(≈1.5rem) */
    margin-inline: auto;
  }
  .mgmt-philosophy .mv .mv-core__rows,
  .mgmt-philosophy .mv .mv-core__cols,
  .mgmt-philosophy .mv .mv-core__col { display: contents; }
  /* 라벨 — 2열 전체 폭(행 분리), 가운데, 대시라인 숨김. 칩 음수 세로마진 보정 위해 위 여백 확보. */
  .mgmt-philosophy .mv .mv-core__rowhead {
    grid-column: 1 / -1;
    justify-content: center;
    margin: 0;
  }
  .mgmt-philosophy .mv .mv-core__rowline { display: none; }
  .mgmt-philosophy .mv .mv-core__rowtitle { font-size: var(--ds-font-size-19, 1.9rem); }
  .mgmt-philosophy .mv .mv-core__rows .mv-core__rowhead:first-child { order: 1; margin-bottom: var(--ds-number-5, 1rem); }     /* 핵심가치 라벨 */
  .mgmt-philosophy .mv .mv-core__chip--value { order: 2; }                            /* 값 2×2 */
  .mgmt-philosophy .mv .mv-core__rows .mv-core__rowhead:last-child { order: 3; margin-top: var(--ds-number-9, 1.8rem); margin-bottom: var(--ds-number-5, 1rem); }  /* 경영목표 라벨 */
  .mgmt-philosophy .mv .mv-core__chip--goal { order: 4; }                             /* 목표 2×2 */
  /* 칩 — 크게 유지(12.5rem) + 2×2 가로·세로 오버랩.
     트랙(11.5rem)보다 큰 원을 가운데 정렬 → 좌우 인접 림 겹침. 음수 세로마진 → 위·아래 행 겹침.
     (텍스트는 중앙이라 겹쳐도 안 가림 — 데스크탑 .strat__area 오버랩과 동일한 느낌) */
  .mgmt-philosophy .mv .mv-core__chip {
    width: 12.5rem;
    justify-self: center;
    padding: 0 var(--ds-number-4, 0.8rem);
    margin-block: calc(-1 * var(--ds-number-4, 0.8rem));   /* 위·아래 행 림 겹침 */
    position: relative;
  }
  .mgmt-philosophy .mv .mv-core__chip span { font-size: var(--ds-font-size-14, 1.4rem); line-height: 1.25; }
  /* 경영목표(다크) 원 — 흰 테두리(겹칠 때 서로 구분, 사용자 요청 item35). 핵심가치(투명)는 secondary-10 테두리 유지. */
  .mgmt-philosophy .mv .mv-core__chip--goal {
    border: var(--ds-border-width-medium, 0.2rem) solid var(--ds-color-gray-0, #fff);
  }
  /* 겹침 z-순서 — 2×2 흐름(col1·col2 = 윗줄, col3·col4 = 아랫줄):
     값(투명): 윗줄이 아랫줄 위로(왼→오 우선) / 목표(다크): 아랫줄이 윗줄 위로(흰 테두리가 또렷이) */
  .mgmt-philosophy .mv .mv-core__col:nth-child(1) .mv-core__chip--value { z-index: 4; }
  .mgmt-philosophy .mv .mv-core__col:nth-child(2) .mv-core__chip--value { z-index: 3; }
  .mgmt-philosophy .mv .mv-core__col:nth-child(3) .mv-core__chip--value { z-index: 2; }
  .mgmt-philosophy .mv .mv-core__col:nth-child(4) .mv-core__chip--value { z-index: 1; }
  .mgmt-philosophy .mv .mv-core__col:nth-child(1) .mv-core__chip--goal { z-index: 1; }
  .mgmt-philosophy .mv .mv-core__col:nth-child(2) .mv-core__chip--goal { z-index: 2; }
  .mgmt-philosophy .mv .mv-core__col:nth-child(3) .mv-core__chip--goal { z-index: 3; }
  .mgmt-philosophy .mv .mv-core__col:nth-child(4) .mv-core__chip--goal { z-index: 4; }
  /* 전략 캐러셀 — 모바일 순서 재배치(사용자 요청): 목록(01~04) → 이미지 → 상세.
     (DOM: detail→photo→nav. order로 nav 최상단, photo 가운데, detail 하단) */
  .mgmt-philosophy .mv .mv-strat__nav { order: -2; width: 100%; }
  .mgmt-philosophy .mv .mv-strat__photo { order: -1; width: 100%; }
  .mgmt-philosophy .mv .mv-strat__detail { order: 0; }
  /* 상세 타이틀·과제 — 왼쪽 정렬(현재 가운데) */
  .mgmt-philosophy .mv .mv-strat__detail { align-items: flex-start; text-align: left; }
  .mgmt-philosophy .mv .mv-strat__detail-title { font-size: var(--ds-font-size-24, 2.4rem); }
  .mgmt-philosophy .mv .mv-strat__detail-tasks li { font-size: var(--ds-font-size-15, 1.5rem); }
  .mgmt-philosophy .mv .mv-strat__detail-tasks li::before { top: 1rem; }
  .mgmt-philosophy .mv .mv-strat__nav { gap: var(--ds-number-12, 2.4rem); }
  .mgmt-philosophy .mv .mv-strat__navbtn { gap: var(--ds-number-6, 1.2rem); }
  .mgmt-philosophy .mv .mv-strat__navno { font-size: var(--ds-font-size-28, 2.8rem); }
  .mgmt-philosophy .mv .mv-strat__navdir { font-size: var(--ds-font-size-16, 1.6rem); }

  /* 전략체계도 섹션 — 상단 탭(2depth 셀렉/1depth 셀렉)과 너무 붙음 → 상단 갭 확보(사용자 요청 item36).
     제목(.sh--large)·.svision 가 탭과 분리되어 보이게. (윤리/인권/ESG 전략체계도 공통) */
  .mgmt-philosophy .ethics-strategy { padding-top: var(--ds-number-16, 3.2rem); }

  /* ESG 분야별 전략 — 모바일: VISION 24, 지표 3→1 세로 스택, 사진 띠 본문 축소 */
  .mgmt-philosophy .ethics-strategy .esg-vision__text { font-size: var(--ds-font-size-24, 2.4rem); }
  /* 윤리·인권 VISION 블록 — 모바일: 미션/비전 카드 세로 스택, 깔때기 복원, 헤드라인 축소 */
  .mgmt-philosophy .ethics-strategy .svision { margin-bottom: var(--ds-number-20, 4rem); }
  .mgmt-philosophy .ethics-strategy .svision__mv { flex-direction: column; gap: var(--ds-number-6, 1.2rem); align-items: center; }
  .mgmt-philosophy .ethics-strategy .svision__card { width: 100%; max-width: var(--sv-card-w); padding: var(--ds-number-12, 2.4rem) var(--ds-number-12, 2.4rem); }
  .mgmt-philosophy .ethics-strategy .svision__card-text { font-size: var(--ds-font-size-17, 1.7rem); }
  /* 깔때기 커넥터 — PC 처럼 깔때기/아래 화살표 비주얼 복원(세로 라인 X, 사용자 요청 item37).
     세로 스택이라 카드 폭보다 좁은 중앙 다운 삼각형(funnel SVG)으로 VISION 알약을 향해 모이게.
     base 의 strat-funnel.svg 배경을 그대로 쓰되 모바일 치수만 재지정(앞 모바일 룰의 세로선 덮어씀). */
  .mgmt-philosophy .ethics-strategy .svision__funnel {
    width: min(24rem, 70%);
    height: var(--ds-number-14, 2.8rem);
    margin-top: var(--ds-number-6, 1.2rem);
    background: url(../../img/strat-funnel.svg) no-repeat center / 100% 100%;   /* 다운 깔때기(파란 그라데이션) */
  }
  .mgmt-philosophy .ethics-strategy .svision__pill { padding: var(--ds-number-8, 1.6rem) var(--ds-number-16, 3.2rem); }
  .mgmt-philosophy .ethics-strategy .svision__text { font-size: var(--ds-font-size-22, 2.2rem); }
  .mgmt-philosophy .ethics-strategy .esg-goal { padding: var(--ds-number-10, 2rem) var(--ds-number-12, 2.4rem); }
  .mgmt-philosophy .ethics-strategy .esg-goal__text { font-size: var(--ds-font-size-17, 1.7rem); }
  .mgmt-philosophy .ethics-strategy .esg-fields-head .sh__t { font-size: var(--ds-font-size-22, 2.2rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__title { font-size: var(--ds-font-size-32, 3.2rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__dot { width: 1rem; height: 1rem; margin-bottom: 0.4rem; }
  .mgmt-philosophy .ethics-strategy .esg-field__desc { font-size: var(--ds-font-size-15, 1.5rem); }
  /* 모바일 — 호버 불가: 3항목 모두 기본 펼침(아코디언 토글은 그대로 유효) */
  .mgmt-philosophy .ethics-strategy .esg-field__detail { grid-template-rows: 1fr; }
  .mgmt-philosophy .ethics-strategy .esg-field__top { cursor: default; }
  .mgmt-philosophy .ethics-strategy .esg-field__detail-inner { padding-bottom: var(--ds-number-15, 3rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__metrics { grid-template-columns: 1fr; gap: 0; }
  .mgmt-philosophy .ethics-strategy .esg-metric { padding: var(--ds-number-9, 1.8rem) var(--ds-number-4, 0.8rem); }
  .mgmt-philosophy .ethics-strategy .esg-metric__k { font-size: var(--ds-font-size-15, 1.5rem); }
  .mgmt-philosophy .ethics-strategy .esg-metric__v { font-size: var(--ds-font-size-19, 1.9rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__band { min-height: 24rem; padding: var(--ds-number-20, 4rem) var(--ds-number-10, 2rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__band-tag { font-size: var(--ds-font-size-16, 1.6rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__band-text { font-size: var(--ds-font-size-16, 1.6rem); }
  .mgmt-philosophy .ethics-strategy .esg-field__top { padding: var(--ds-number-12, 2.4rem) 0; }

  .mgmt-philosophy .ethics-sub-tab { margin: var(--ds-number-14, 2.8rem) 0; } /* 상/하 28 (사용자 지정) */
  .mgmt-philosophy #d1-panel-social { padding-top: var(--ds-number-8, 1.6rem); }
  /* 1depth·2depth 탭 → 모바일 셀렉박스(DS): 알약/버튼 숨김 +
     page-header__select(ds-select-enhance가 만든 드롭다운) 노출 */
  .mgmt-philosophy .about-tab .ds-tab__list { display: none; }       /* 1Depth 버튼 숨김 */
  .mgmt-philosophy .ds-tab--pill .ds-tab__list { display: none; }    /* 2Depth 알약 숨김 (셀렉으로 대체) */
  .mgmt-philosophy .page-header__select { display: block; }          /* 1Depth 셀렉 노출 */
  .mgmt-philosophy .ethics-sub-tab .page-header__select { display: block; } /* 2Depth 셀렉 노출(PC 숨김 해제) */
  /* 2Depth(알약형) 셀렉트만 DS 표준 박스 룩으로 — page-header.css '메뉴 탭 룩(밑줄형)' 대신
     테두리+라운드+흰배경 풀폭 박스(마이페이지 050000 .ds-select 와 동일, 사용자 요청).
     ⚠ 1Depth(.about-tab 셀렉트)는 원래 밑줄형 그대로 — .ethics-sub-tab 하위로만 한정 */
  .mgmt-philosophy .ethics-sub-tab .page-header__select { width: 100%; }
  .mgmt-philosophy .ethics-sub-tab .page-header__select .ds-select-ui__btn {
    padding: 0 var(--ds-number-8, 1.6rem);                            /* 0 16px */
    border: var(--ds-border-width-thin, 0.1rem) solid var(--ds-color-gray-20);
    border-radius: var(--ds-radius-medium, 0.6rem);
    background: var(--ds-color-gray-0, #fff);
  }

  /* 대제목 < 섹션 대타이틀 위계 — 32→24, 도입문 17→15 */
  .mgmt-philosophy .ethics-strategy .sh--large .sh__t { font-size: var(--ds-font-size-22, 2.2rem); }
  /* 로드맵 제목 — 전략체계도 제목과 동일(모바일 22) 통일 (사용자 요청) */
  .mgmt-philosophy .ethics-strategy .road .sh__t { font-size: var(--ds-font-size-22, 2.2rem); }
  /* 로드맵 모바일 위계 축소 — 제목 1.9 / 단계명 1.7 / 연도 1.3 / 리스트 1.4, 패딩·섹션여백 축소.
     카드 세로 스택(full width)은 ≤1199 .rmap flex-direction:column 룰에서 처리. */
  .mgmt-philosophy .ethics-strategy .road { padding-block: var(--ds-number-25, 5rem); }
  .mgmt-philosophy .ethics-strategy .rstage__head { padding: var(--ds-number-9, 1.8rem) var(--ds-number-10, 2rem); }
  .mgmt-philosophy .ethics-strategy .rstage__list { padding: var(--ds-number-9, 1.8rem) var(--ds-number-10, 2rem); }
  .mgmt-philosophy .ethics-strategy .rstage__name { font-size: var(--ds-font-size-17, 1.7rem); }
  .mgmt-philosophy .ethics-strategy .rstage__year { font-size: var(--ds-font-size-13, 1.3rem); }
  .mgmt-philosophy .ethics-strategy .rstage__list li { font-size: var(--ds-font-size-14, 1.4rem); line-height: 1.6; }
  .mgmt-philosophy .ethics-strategy .rstage__list li::before { top: 0.7rem; }   /* 14px 줄높이 세로중앙 */
  /* 꼬리 — 모바일 스택이라 계단(높이차) 의미 약해짐: 전 단계 동일·짧게(라인+소량 글로우) */
  .mgmt-philosophy .ethics-strategy .rstage--1,
  .mgmt-philosophy .ethics-strategy .rstage--2,
  .mgmt-philosophy .ethics-strategy .rstage--3 { --rs-tail-gap: 1.2rem; --rs-tail-glow: 2.4rem; }
  .mgmt-philosophy .ethics-strategy .sh__t { font-size: var(--ds-font-size-19, 1.9rem); }

  /* 선언문 영역 좌우 여백 — 박스가 화면 가장자리(16px)에 바짝 붙어 답답하던 것
     보정. 컨테이너에 padding-inline 6px 추가 → 박스가 가장자리에서 ~22px 안쪽으로. */
  .mgmt-philosophy .mgmt-declaration { padding-inline: var(--ds-number-3, 0.6rem); padding-top: var(--ds-number-16, 3.2rem); } /* 전략체계도(.ethics-strategy)와 상단 갭 통일 — 2depth 탭 전환 시 콘텐츠 간격 일치 */

  .mgmt-philosophy .mgmt-declaration__title { font-size: var(--ds-font-size-24, 2.4rem); margin-bottom: var(--ds-number-12, 2.4rem); }
  .mgmt-philosophy .mgmt-declaration__lead { font-size: var(--ds-font-size-15, 1.5rem); margin-bottom: var(--ds-number-12, 2.4rem); }
  .mgmt-philosophy .mgmt-declaration__box { padding: var(--ds-number-12, 2.4rem) var(--ds-number-8, 1.6rem); }

  /* "하나." 항목 — 모바일 세로 스택(라벨 위 / 값 아래) */
  .mgmt-philosophy .mgmt-declaration__list { padding: var(--ds-number-10, 2rem) var(--ds-number-6, 1.2rem); gap: var(--ds-number-9, 1.8rem); }
  .mgmt-philosophy .mgmt-declaration__item { grid-template-columns: 1fr; gap: var(--ds-number-2, 0.4rem); }
  .mgmt-philosophy .mgmt-declaration__text { font-size: var(--ds-font-size-15, 1.5rem); }
  .mgmt-philosophy .mgmt-declaration__sign { font-size: var(--ds-font-size-16, 1.6rem); }

  /* 모서리 프레임 이미지 — 모바일 축소 (43→32, background-size:contain이 비례 축소) */
  .mgmt-philosophy .mgmt-declaration__corner { width: 3.2rem; height: 3rem; }

  /* 메타 표 — 라벨/값 모바일 가독 유지 (그대로, caption 축소) */
  .mgmt-philosophy .mgmt-table__caption { font-size: var(--ds-font-size-19, 1.9rem); }

  /* 전략 플로우(.strat) — 2pill 세로 스택, U커넥터→세로선 단순화, 원은 가로 유지·축소 */
  .mgmt-philosophy .ethics-strategy .strat__goals { flex-direction: column; gap: 0; width: 100%; align-items: center; }
  /* (모바일 .strat__goals::before 세로 회색 라인 삭제 — 목표 박스 위 이상한 세로선 제거, 사용자 요청) */
  .mgmt-philosophy .ethics-strategy .strat__pill { width: 100%; max-width: var(--strat-pill-w); padding: var(--ds-number-12, 2.4rem) var(--ds-number-8, 1.6rem); }
  .mgmt-philosophy .ethics-strategy .strat__pill-text { font-size: var(--ds-font-size-17, 1.7rem); line-height: 1.4; }
  /* 두 pill 사이 세로선(가로 스택일 때의 ∪ 대체) */
  .mgmt-philosophy .ethics-strategy .strat__goals .strat__pill:first-child { margin-bottom: var(--ds-number-6, 1.2rem); position: relative; }
  .mgmt-philosophy .ethics-strategy .strat__goals .strat__pill:first-child::after {
    content: ''; position: absolute; left: 50%; bottom: calc(-1 * var(--ds-number-6, 1.2rem));
    width: var(--ds-border-width-thin, 0.1rem); height: var(--ds-number-6, 1.2rem);
    background: var(--strat-line); transform: translateX(-50%);
  }
  /* ∪ 분기 커넥터 → 단순 세로선 */
  .mgmt-philosophy .ethics-strategy .strat__merge-u { display: none; }
  .mgmt-philosophy .ethics-strategy .strat__merge-line,
  .mgmt-philosophy .ethics-strategy .strat__line { height: var(--ds-number-16, 3.2rem); }
  .mgmt-philosophy .ethics-strategy .strat__tasks { padding: var(--ds-number-7, 1.4rem) var(--ds-number-6, 1.2rem); }
  .mgmt-philosophy .ethics-strategy .strat__task { gap: var(--ds-number-1, 0.2rem); }
  .mgmt-philosophy .ethics-strategy .strat__task-no { font-size: var(--ds-font-size-13, 1.3rem); }
  .mgmt-philosophy .ethics-strategy .strat__task-text { font-size: var(--ds-font-size-14, 1.4rem); line-height: 1.25; }
  .mgmt-philosophy .ethics-strategy .strat__areas { padding: var(--ds-number-6, 1.2rem); }
  .mgmt-philosophy .ethics-strategy .strat__area { --strat-overlap: 1.2rem; --strat-area-ring: 0.2rem; }
  .mgmt-philosophy .ethics-strategy .strat__area-text { font-size: var(--ds-font-size-13, 1.3rem); }
}