/* ================================================================
   영화금속 modern.css — 신규 디자인 레이어
   구 헤더(#header)는 header.php에서 if(false)로 비활성.
   신규 .site-header 를 깨끗한 클래스로 스타일링한다.
   ================================================================ */

:root{
  --brand:#d30008;      /* 메인 레드 */
  --brand-2:#ff6600;    /* 포인트 오렌지 */
  --trust:#0f766e;      /* 신뢰 청록(teal) - 자료 다운로드/문서 액션 */
  --trust-dark:#115e59; /* hover - 한 단계 깊게 */
  --trust-deep:#134e4a; /* active - 눌린 상태 */
  --trust-soft:#f1f8f7;
  --ink:#1a1a1a;
  --gray-700:#3d3d3d;
  --gray-500:#767676;
  --gray-300:#c9c9c9;
  --gray-100:#f4f4f4;
  --line:#e6e6e6;
  --header-h:90px;
  --font:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif;
}

/* ---------- Pretendard 웹폰트 (자체 호스팅) ---------- */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920; font-style:normal; font-display:optional;
  src:url('/common/fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');
}
/* 전역 폰트 통일 — 기존 나눔/s-core-dream(!important) 오버라이드 */
html, body, input, textarea, select, button, table, th, td,
#container, #wrap, .site-header, #subvisual, #sublocbar, #scontainer{
  font-family:var(--font) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 구 헤더 잔재 안전장치 (if(false)로 출력 안 되지만 혹시 대비) */
#header{ display:none !important; }

/* ================================================================
   SITE HEADER  (로고 / 중앙 GNB / 우측 언어)
   ================================================================ */
.site-header{
  position:fixed; top:0; left:0; width:100%; height:var(--header-h);
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(0,0,0,.05); z-index:500;
}
.site-header .sh-inner{
  max-width:1320px; height:100%; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* ---------- 로고 ---------- */
.site-header .sh-logo{ margin:0; flex:0 0 auto; line-height:0; }
.site-header .sh-logo img{ width:196px; height:auto; }

/* ---------- GNB (중앙) ---------- */
.site-header .sh-nav{ flex:1 1 auto; display:flex; justify-content:center; }
.site-header .gnb{ display:flex; gap:2px; margin:0; padding:0; list-style:none; }
.site-header .gnb-item{ position:relative; }
.site-header .gnb-link{
  display:block; padding:0 24px; line-height:var(--header-h);
  font-size:19px; font-weight:600; letter-spacing:-0.02em; color:var(--ink);
  text-decoration:none; white-space:nowrap; transition:color .15s;
}
.site-header .gnb-link:hover,
.site-header .gnb-link.is-active{ color:var(--brand); }
/* hover 밑줄 인디케이터 */
.site-header .gnb-link::after{
  content:""; position:absolute; left:20px; right:20px; bottom:0; height:3px;
  background:var(--brand); transform:scaleX(0); transform-origin:center;
  transition:transform .18s;
}
.site-header .gnb-item:hover .gnb-link::after,
.site-header .gnb-link.is-active::after{ transform:scaleX(1); }

/* ---------- 드롭다운 패널 (CSS :hover, JS 불필요) ---------- */
.site-header .gnb-panel{
  position:absolute; top:var(--header-h); left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:184px; background:#fff;
  border:1px solid var(--line); border-top:2px solid var(--brand);
  border-radius:0 0 10px 10px; box-shadow:0 14px 30px rgba(0,0,0,.10);
  padding:8px 0; opacity:0; visibility:hidden;
  transition:opacity .16s ease, transform .16s ease; z-index:510;
}
.site-header .gnb-item:hover .gnb-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.site-header .gnb-panel ul{ margin:0; padding:0; list-style:none; }
.site-header .gnb-panel li a{
  display:block; padding:11px 24px; font-size:16px; color:var(--gray-700);
  text-decoration:none; white-space:nowrap; transition:background .12s, color .12s;
}
.site-header .gnb-panel li a:hover{ background:var(--gray-100); color:var(--brand); }

/* ---------- 우측: 언어 토글 (KOR / ENG pill) ---------- */
.site-header .sh-util{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }
.site-header .lang{
  display:inline-flex; border:1px solid var(--gray-300);
  border-radius:999px; overflow:hidden;
}
.site-header .lang a,
.site-header .lang .lang-on{
  padding:6px 15px; font-size:13px; font-weight:700; line-height:1;
  color:var(--gray-500); text-decoration:none;
}
.site-header .lang .lang-on{ background:var(--brand); color:#fff; }
.site-header .lang a:hover{ color:var(--brand); }

/* ================================================================
   HERO (#mvisual) — ①여백 ②타이포대비 ③색절제 ④그라디언트 오버레이
   ================================================================ */
#mvisual .carousel-inner .item{ position:relative; }
/* ④ 이미지 위 그라디언트 오버레이 (좌→우 어둡게: 텍스트 가독성 + 깊이감) */
#mvisual .carousel-inner .item::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(10,12,16,.50) 0%, rgba(10,12,16,.18) 48%, rgba(10,12,16,0) 100%);
}
/* ① 캡션: 좌측 정렬 + 세로 중앙 + 컨테이너 여백 */
#mvisual .carousel-caption{
  z-index:3; left:0; right:0; top:50%; bottom:auto; transform:translateY(-50%);
  width:100%; max-width:1320px; margin:0 auto; padding:0 32px;
  text-align:left; text-shadow:none;
}
#mvisual .carousel-caption h2,
#mvisual .carousel-caption .txt20{ margin:0; padding:0; }
/* ② 타이포 대비: 제목 확 크게, 부제는 얇게 */
#mvisual .carousel-caption .txt10b{
  display:inline-block; font-size:56px; font-weight:800;
  letter-spacing:-.035em; line-height:1.12; color:#fff;
}
#mvisual .carousel-caption .txt14{
  font-size:21px; font-weight:400; letter-spacing:-.01em; line-height:1.55;
  color:rgba(255,255,255,.9); margin-top:20px;
}
/* ④ 인디케이터: 라인형 미니멀 + 좌측 정렬(캡션과 축 맞춤) */
#mvisual .carousel-indicators{
  left:50%; right:auto; bottom:40px; transform:translateX(-50%);
  width:100%; max-width:1320px; margin:0; padding:0 32px;
  text-align:left;
}
#mvisual .carousel-indicators li{
  width:38px; height:3px; margin:0 6px 0 0; border:none; border-radius:2px;
  background:rgba(255,255,255,.38); transition:background .2s, width .2s;
}
#mvisual .carousel-indicators li.active{ width:38px; height:3px; background:var(--brand); }
/* ④ 좌우 컨트롤 제거 — 5초 자동재생 + 라인 인디케이터로 충분 */
#mvisual .carousel-control{ display:none !important; }

/* ================================================================
   메인 공지/자료실 (mconstep2) — 파란 박스 → 카드형
   ================================================================ */
#container .mconstep2{ background:#f5f6f8; padding:64px 0; min-height:0; }
.mcondiv2{
  width:auto; max-width:1320px; min-height:0; margin:0 auto; padding:0 32px;
  display:flex; gap:28px;
}
.mcondiv2 .mstep1, .mcondiv2 .mstep2{
  float:none; width:auto; flex:1 1 0; height:auto; margin:0;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:26px 30px; box-shadow:0 4px 20px rgba(0,0,0,.04);
}
/* 헤더: 파란 둥근바 제거 → 제목 + 더보기, 하단 강조선 */
.mnotice1, .mnotice2{
  width:100%; height:auto; background:none !important; border-radius:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 15px; margin-bottom:6px; border-bottom:2px solid var(--ink);
}
.mnotice1 .mdivlft, .mnotice2 .mdivlft{ float:none; width:auto; padding:0; }
.mnotice1 .mdivlft .txt12b, .mnotice2 .mdivlft .txt12b{
  color:var(--ink) !important; font-size:21px !important; font-weight:800; letter-spacing:-.02em;
  position:relative; padding-left:15px !important;
}
/* 제목 앞 세로 포인트바 — 공지=레드, 자료실=오렌지 */
.mnotice1 .mdivlft .txt12b::before, .mnotice2 .mdivlft .txt12b::before{
  content:""; position:absolute; left:0; top:3px; bottom:3px; width:4px; border-radius:2px;
}
.mnotice1 .mdivlft .txt12b::before{ background:var(--brand); }
.mnotice2 .mdivlft .txt12b::before{ background:var(--brand-2); }
.mnotice1 .mdivrgt, .mnotice2 .mdivrgt{ float:none; width:auto; padding:0; }
/* 더보기: 파란 원형 + → 미니멀 회색 + (hover 레드) */
.morebtn a, .morebtn2 a{
  width:auto; height:auto; background:none !important; border-radius:0;
  color:var(--gray-500) !important; font-size:22px !important; font-weight:400; line-height:1;
}
.morebtn a:hover, .morebtn2 a:hover{ background:none !important; color:var(--brand) !important; }
/* 리스트: 제목 좌 / 날짜 우, 얇은 구분선, hover 레드 */
.mtxtln{ height:auto; }
.mtxtln ul{ padding-top:8px; }
.mtxtln ul li{
  margin:0; text-indent:0; padding:13px 2px; border-bottom:1px solid #eee;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.mtxtln ul li:last-child{ border-bottom:none; }
.mtxtln ul li a{
  font-size:16px !important; color:var(--gray-700) !important; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mtxtln ul li a:hover{ color:var(--brand) !important; }
.mtxtrgt{
  float:none; flex:0 0 auto; color:var(--gray-500); font-size:12px; letter-spacing:0;
  background:var(--gray-100); padding:3px 11px; border-radius:20px;
}

/* ================================================================
   FOOTER — 먹색 + 상단 레드 액센트 + 좌측정렬
   ================================================================ */
#footer{ background:#161719; border-top:3px solid var(--brand); }
#footer .copyright{ width:auto; max-width:1320px; margin:0 auto; padding:38px 32px; }
#footer .copyright .copymenu{
  border-bottom:1px solid rgba(255,255,255,.10); padding-bottom:18px; margin-bottom:20px;
}
#footer .copyright .copymenu .notice{ float:none; width:auto; margin:0; text-align:left; }
#footer .copyright .notice a{
  color:rgba(255,255,255,.82) !important; font-size:14px; padding:0 7px; letter-spacing:-.01em;
}
#footer .copyright .notice a:first-child{ padding-left:0; }
#footer .copyright .notice a:hover{ color:var(--brand) !important; }
#footer .copyright .copyinfo{ margin:0; }
#footer .copyright .copyinfo .info{
  float:none; width:auto; text-align:left; color:rgba(255,255,255,.5);
  font-size:13.5px; letter-spacing:0; line-height:1.75;
}

/* ================================================================
   SIDE NAV — 서브페이지 좌측 메뉴 (공통 컴포넌트 left_menu.php)
   ================================================================ */
#left_menu{ display:none !important; }  /* 구 좌측메뉴 안전장치 */
.side-nav{ width:100%; }
/* 제목: 원색 블록 제거 → 먹색 제목 + 하단 강조선 (공지 카드와 동일 톤) */
.side-nav-head{
  background:none; border-radius:0; padding:2px 2px 16px; margin-bottom:4px;
  border-bottom:2px solid var(--ink);
}
.side-nav-title{
  margin:0; color:var(--brand); font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.25;
}
.side-nav-list{ list-style:none; margin:0; padding:0; border:none; }
.side-nav-list li a{
  display:block; position:relative; padding:14px 6px 14px 15px;
  font-size:15px; color:var(--gray-700); text-decoration:none;
  border-bottom:1px solid var(--line); transition:color .15s;
}
.side-nav-list li a:hover{ color:var(--brand); }
.side-nav-list li a.is-active{ color:var(--brand); font-weight:700; }
/* 현재 항목: 좌측 짧은 레드바(악센트만) */
.side-nav-list li a.is-active::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:15px; background:var(--brand); border-radius:2px;
}

/* ================================================================
   서브페이지 상단 (서브비주얼 / 위치바 / 탭) + 남색(#3A558B) 정리
   ================================================================ */
/* 남색 본문 강조 → 먹색 통일 */
.ndblue{ color:var(--ink) !important; }

/* 서브 비주얼(전 페이지 공통: subvisual, subvisual1~6): 그라디언트 오버레이 + 좌측 큰 텍스트 */
[id^="subvisual"]{ height:300px !important; position:relative; overflow:hidden; }
[id^="subvisual"]::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(10,12,16,.62) 0%, rgba(10,12,16,.26) 100%);
}
[id^="subvisual"] .blind{ background:none !important; height:100%; position:relative; z-index:1; }
.svisualbox{
  position:relative; z-index:1; height:100%;
  width:auto; max-width:1320px; min-height:300px; padding:0 32px;
  display:flex; align-items:center;
}
.svisualbox .leftbox{ float:none; width:auto; min-height:0; }
/* 2줄 구조: 제목 + 슬로건 부제 */
.svisualbox .leftbox .sv-title{
  text-align:left; margin:0; color:#fff;
  font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.2; text-shadow:none;
}
.svisualbox .leftbox .sv-desc{
  text-align:left; margin:14px 0 0; color:rgba(255,255,255,.85);
  font-size:16px; font-weight:400; letter-spacing:-.01em; line-height:1.5; text-shadow:none;
}

/* 위치바(breadcrumb) — 얇은 라인 + 본문과 간격 */
#sublocbar{ height:auto; border-bottom:1px solid var(--line); }
.subloctxt{ width:auto; max-width:1320px; padding:15px 32px; color:var(--gray-400, #9a9a9a); font-weight:400; }
.subloctxt a{ color:var(--gray-500); }
.subloctxt a:hover{ color:var(--brand); }
/* 위치바 아래 본문 간격 */
#scontainer{ padding-top:50px; padding-bottom:70px; }
/* 본문 폭을 헤더·위치바(1320)와 정렬 + 좌측메뉴/본문 flex화 */
#scontainer .contbody{ width:auto !important; max-width:1320px; padding:0 32px; text-align:left; }
#scontainer .contbody .contbdiv{ display:flex; gap:48px; align-items:flex-start; }
#scontainer .contbody .contbdiv .slftmenu{ float:none; width:240px; flex:0 0 240px; }
#scontainer .contbody .contbdiv .scontent{ float:none; width:auto; flex:1 1 auto; margin:0; }

/* ================================================================
   ESG 지속가능경영 — 비전·선언문 (sub/sustain/sub_1)
   ================================================================ */
.esg-kicker{
  margin:0 0 12px; font-size:13px; font-weight:800; letter-spacing:.14em;
  color:var(--brand);
}
.esg-vision{ padding:2px 0 0; }

/* 시안 A/B 토글 (세그먼트 pill) */
.esg-toggle{
  display:inline-flex; gap:4px; margin:14px 0 22px;
  background:var(--gray-100); border:1px solid var(--line); border-radius:999px; padding:5px;
}
.esg-tab{
  border:none; background:none; padding:9px 24px; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:-.01em;
  color:var(--gray-500); cursor:pointer; transition:background .15s, color .15s, box-shadow .15s;
}
.esg-tab.is-on{ background:#fff; color:var(--brand); box-shadow:0 2px 8px rgba(0,0,0,.10); }
.esg-tab:hover:not(.is-on){ color:var(--ink); }
.esg-headline{
  margin:0 0 32px; font-size:30px; font-weight:800; line-height:1.35;
  letter-spacing:-.03em; color:var(--ink);
}
.esg-headline b{ color:var(--brand); font-weight:800; }
.esg-declaration{
  border-top:1px solid var(--line); padding-top:28px;
}
.esg-declaration p{
  margin:0 0 18px; font-size:16px; line-height:1.85; color:var(--gray-700);
  letter-spacing:-.01em;
}
.esg-declaration p b{ color:var(--ink); font-weight:700; }
.esg-sign{
  margin-top:28px !important; text-align:right; font-size:15px; color:var(--gray-500);
}
.esg-sign .esg-sign-co{ margin-right:10px; }
.esg-sign strong{
  font-size:22px; font-weight:800; letter-spacing:.15em; color:var(--ink);
}

/* ESG Value Chain */
.esg-chain{ margin-top:56px; }
.esg-chain-head{ margin-bottom:24px; }
.esg-chain-title{
  margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.esg-chain-grid{ display:flex; gap:20px; }
.esg-card{
  flex:1 1 0; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:32px 28px; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.esg-card:hover{
  transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.08);
  border-color:transparent;
}
.esg-card-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:14px; margin-bottom:18px;
}
.esg-card-en{
  margin:0 0 4px; font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--gray-500);
}
.esg-card-ko{
  margin:0 0 14px; font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.esg-card-desc{
  margin:0; font-size:15px; line-height:1.7; color:var(--gray-700); letter-spacing:-.01em;
}
/* 영역별 색 악센트 (E 녹 / S 청 / G 앰버) */
.esg-e .esg-card-ico{ background:#e8f5e9; color:#2e7d32; }
.esg-s .esg-card-ico{ background:#e7f0fb; color:#1565c0; }
.esg-g .esg-card-ico{ background:#fbf0e2; color:#b26a00; }
.esg-e:hover{ box-shadow:0 14px 30px rgba(46,125,50,.16); }
.esg-s:hover{ box-shadow:0 14px 30px rgba(21,101,192,.16); }
.esg-g:hover{ box-shadow:0 14px 30px rgba(178,106,0,.16); }

/* 선언문 배너 (친환경 배경 + 오버레이) */
.esg-banner{
  position:relative; margin-top:26px; border-radius:18px; overflow:hidden;
  background-size:cover; background-position:center;
}
.esg-banner::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 60%);
}
/* 밝은 배경 + 흰 반투명 유리패널 + 진한 텍스트 */
.esg-banner-body{
  position:relative; z-index:1; max-width:720px; margin:40px; padding:40px 44px;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6); border-radius:16px; box-shadow:0 12px 40px rgba(20,40,30,.14);
}
.esg-banner-body p{
  margin:0 0 18px; font-size:16px; line-height:1.9; color:var(--gray-700); letter-spacing:-.01em;
}
.esg-banner-body p b{ color:var(--ink); font-weight:700; }
.esg-sign-w{ margin:28px 0 0 !important; text-align:right; color:var(--gray-500); font-size:15px; }
.esg-sign-w span{ margin-right:12px; }
.esg-sign-w strong{ font-size:22px; font-weight:800; letter-spacing:.16em; color:var(--ink); }

/* EcoVadis 인증 하이라이트 */
.esg-cert{
  display:flex; align-items:center; gap:34px; margin-top:32px;
  background:linear-gradient(120deg,#faf6f1,#f6efe7); border:1px solid #ece0d3;
  border-radius:18px; padding:34px 38px;
}
.esg-cert-badge{ flex:0 0 auto; width:132px; height:auto; display:block; }
.esg-cert-body{ flex:1 1 auto; }
.esg-cert-body .esg-kicker{ color:#b26a00; }
.esg-cert-title{ margin:0 0 10px; font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.esg-cert-title b{ color:#b26a00; }
.esg-cert-desc{ margin:0 0 12px; font-size:15px; line-height:1.75; color:var(--gray-700); }
.esg-cert-desc b{ color:var(--ink); font-weight:700; }
.esg-cert-meta{ margin:0; font-size:13px; font-weight:600; color:var(--gray-500); }

/* ================================================================
   ESG 비전 [시안형] — 통 배경 이미지 위 1.6:1 (좌 선언문+하얀필터 / 우 배지+가치)
   ================================================================ */
.esgv2{
  position:relative; margin-top:40px; border-radius:18px; overflow:hidden;
  background-size:cover; background-position:center;
  box-shadow:0 4px 16px rgba(20,40,30,.07);
}
.esgv2-inner{ display:grid; grid-template-columns:1.6fr 1fr; align-items:stretch; }

/* 좌 1.6 : 살짝 하얀 필터 패널 + 선언문 (blur 제거 — 외곽 뭉개짐 방지) */
.esgv2-left{
  background:rgba(255,255,255,.82);
  padding:48px 44px;
  display:flex; flex-direction:column; justify-content:center;
}
.esgv2-left p{ margin:0 0 16px; font-size:15.5px; line-height:1.85; color:var(--gray-700); letter-spacing:-.01em; }
.esgv2-left p b{ color:var(--ink); font-weight:700; }
.esgv2-sign{ margin-top:28px !important; text-align:right; color:var(--gray-500); font-size:14px; }
.esgv2-sign span{ margin-right:10px; }
.esgv2-sign strong{ font-size:20px; font-weight:800; letter-spacing:.14em; color:var(--ink); }

/* 우 1 : 배경 위 배지 + 가치 체계 */
.esgv2-right{
  padding:44px 34px; display:flex; flex-direction:column; gap:26px; justify-content:center;
}
/* 배지: 흰 카드 제거 → 배경 위 직접 (배지 자체에 등급·날짜 정보 포함) */
.esgv2-badge{ text-align:center; }
.esgv2-badge img{ width:168px; height:auto; display:inline-block; filter:drop-shadow(0 3px 10px rgba(0,0,0,.16)); }
/* 가치 체계 — 배경 위 반투명 카드 */
.esgv2-vc{ background:rgba(255,255,255,.86); border-radius:14px; padding:20px 22px; box-shadow:0 6px 20px rgba(0,0,0,.08); }
.esgv2-vc-title{ margin:0 0 6px; font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.esgv2-vc ul{ list-style:none; margin:0; padding:0; }
.esgv2-vc li{
  display:flex; align-items:center; gap:11px; padding:12px 0;
  border-bottom:1px solid var(--line); font-size:14px; color:var(--gray-500);
}
.esgv2-vc li:last-child{ border-bottom:none; }
.esgv2-vc li b{ color:var(--ink); font-weight:700; min-width:98px; }
.esgv2-ko{ color:var(--gray-700); }
.esgv2-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.esgv2-e{ background:#2e7d32; } .esgv2-s{ background:#ef6c00; } .esgv2-g{ background:#1565c0; }

/* ================================================================
   ESG 공통 컴포넌트 (sub_2~6) — 리드/항목카드/인증/다운로드/절차/문의
   ================================================================ */
/* 핵심 방향 리드 문장 */
.esg-lead{
  margin:34px 0 30px; padding-left:18px; border-left:4px solid var(--brand);
  font-size:21px; font-weight:700; line-height:1.55; letter-spacing:-.02em; color:var(--ink);
}
/* 항목 카드 그리드 */
.esg-grid{ display:grid; gap:20px; }
.esg-grid-2{ grid-template-columns:repeat(2,1fr); }
.esg-grid-3{ grid-template-columns:repeat(3,1fr); }
.esg-item{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:30px 28px; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.esg-item:hover{ border-color:var(--gray-300); box-shadow:0 4px 14px rgba(0,0,0,.05); }
.esg-item-no{ display:block; font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--brand); margin-bottom:14px; }
.esg-item h4{ margin:0 0 10px; font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.35; }
.esg-item p{ margin:0; font-size:15px; line-height:1.7; color:var(--gray-700); }
.esg-item ul{ margin:8px 0 0; padding-left:0; list-style:none; }
.esg-item ul li{ position:relative; padding-left:14px; font-size:14px; line-height:1.7; color:var(--gray-700); }
.esg-item ul li::before{ content:""; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--gray-300); }

/* 관련 인증 카드 */
.esg-cert-card{
  display:flex; align-items:center; gap:26px; margin-top:30px;
  background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:30px 34px; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.esg-cert-mark{
  flex:0 0 auto; width:96px; height:96px; border-radius:16px;
  background:linear-gradient(135deg,#1f4e79,#2e6da4); box-shadow:0 4px 14px rgba(31,78,121,.24);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#fff;
}
.esg-cert-mark strong{ font-size:19px; font-weight:800; letter-spacing:.04em; }
.esg-cert-mark span{ font-size:10px; font-weight:600; letter-spacing:.06em; opacity:.85; }
.esg-cert-info .esg-cert-tag{ margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--gray-500); }
.esg-cert-info h4{ margin:0 0 8px; font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.esg-cert-info p{ margin:0; font-size:15px; line-height:1.65; color:var(--gray-700); }

/* 다운로드 버튼 */
.esg-dl-row{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.esg-dl,
.esg-dl:link,
.esg-dl:visited{
  display:inline-flex; align-items:center; gap:10px; padding:13px 22px;
  background:var(--trust); color:#fff !important; border:1px solid var(--trust); border-radius:10px;
  text-decoration:none; font-size:15px; font-weight:700;
  box-shadow:0 1px 2px rgba(13,80,74,.20);
  transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.esg-dl:hover{
  background:var(--trust-dark); border-color:var(--trust-dark); color:#fff !important;
  box-shadow:0 3px 10px rgba(13,80,74,.26);
}
.esg-dl:active{
  background:var(--trust-deep); border-color:var(--trust-deep); color:#fff !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.24);
}
.esg-dl:focus-visible{ outline:2px solid var(--trust); outline-offset:3px; }
.esg-dl svg{ width:18px; height:18px; }

/* 섹션 소제목 */
.esg-sec-title{
  margin:40px 0 18px; font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.esg-sec-title::before{ content:""; width:4px; height:20px; background:var(--brand); border-radius:2px; }

/* 신문고 — 제보 유형 */
.esg-types{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.esg-types li{
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:#fff; border:1px solid var(--line); border-radius:12px; font-size:15px; color:var(--gray-700);
}
.esg-types li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); flex:0 0 auto; }

/* 신문고 — 처리 절차 */
.esg-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.esg-step{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 28px; }
.esg-step-no{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:12px; background:var(--brand); color:#fff; font-size:16px; font-weight:800; margin-bottom:16px;
}
.esg-step h4{ margin:0 0 8px; font-size:18px; font-weight:800; color:var(--ink); }
.esg-step p{ margin:0; font-size:14px; line-height:1.65; color:var(--gray-700); }
.esg-note{ margin:14px 0 0; font-size:13px; color:var(--gray-500); }

/* 신문고 — 문의/접수 안내 */
.esg-contact{
  margin-top:28px; background:var(--gray-100); border-radius:16px; padding:30px 36px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.esg-contact dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 22px; align-items:center; }
.esg-contact dt{ font-size:14px; font-weight:700; color:var(--gray-500); }
.esg-contact dd{ margin:0; font-size:15px; font-weight:600; color:var(--ink); }

/* 환경경영 — 좌 아이콘 항목 / 우 사진 2단 */
.esg-env-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:stretch; margin-top:6px; }
.esg-env-items{ display:flex; flex-direction:column; gap:16px; }
.esg-env-item{
  display:flex; align-items:center; gap:22px;
  background:#fefefe; border:1px solid var(--line); border-radius:16px; padding:18px 26px;
  transition:border-color .18s;
}
.esg-env-item:hover{ border-color:var(--gray-300); }
.esg-env-item img{ width:110px; height:auto; flex:0 0 auto; }
.esg-env-item p{ margin:0; font-size:15px; line-height:1.7; color:var(--gray-700); }
.esg-env-photo{ border-radius:16px; overflow:hidden; }
.esg-env-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 인증 카드 로고 이미지 */
.esg-cert-logo{ flex:0 0 auto; width:118px; height:auto; }

/* 사회 — 좌 사진 2장 / 우 아이콘 4개(2x2) */
.esg-social-layout{ display:grid; grid-template-columns:1fr 1.35fr; gap:24px; align-items:stretch; }
.esg-social-photos{ display:flex; flex-direction:column; gap:16px; }
.esg-social-photos img{ width:100%; flex:1; min-height:0; object-fit:cover; border-radius:16px; display:block; }
.esg-social-items{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.esg-si{
  display:flex; align-items:center; gap:16px;
  background:#fefefe; border:1px solid var(--line); border-radius:16px; padding:14px 18px;
  transition:border-color .18s;
}
.esg-si:hover{ border-color:var(--gray-300); }
.esg-si img{ width:96px; height:auto; flex:0 0 auto; }
.esg-si p{ margin:0; font-size:14px; line-height:1.6; color:var(--gray-700); }
.esg-si-sub{ display:block; margin-top:6px; font-size:13px; color:var(--gray-500); }

/* 아이콘 4항목(2x2) + 사진 */
.esg-si-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.esg-gov-photo{ margin-top:20px; border-radius:16px; overflow:hidden; }
.esg-gov-photo img{ width:100%; height:400px; object-fit:cover; display:block; }
/* 사진 2장 가로 (사회) */
.esg-photo-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.esg-photo-row img{ width:100%; height:250px; object-fit:cover; border-radius:16px; display:block; }

/* 환경안전보건 방침 — 선언박스(좌 텍스트 / 우 이미지) + 컬러바 카드 */
.esg-policy{
  display:grid; grid-template-columns:1.35fr 1fr; gap:32px; align-items:center;
  background:#f7f9fb; border:1px solid var(--line); border-radius:18px; padding:36px 40px; margin-top:8px;
}
.esg-policy-lead{ margin:0 0 18px; font-size:19px; font-weight:800; line-height:1.55; letter-spacing:-.02em; color:var(--ink); }
.esg-policy-text > p:not(.esg-policy-lead){ margin:0; font-size:15px; line-height:1.8; color:var(--gray-700); }
.esg-policy-img img{ width:100%; height:auto; border-radius:14px; display:block; }
/* 3카드 좌측 컬러바 (번호 대신) */
.esg-pol{ border-left:4px solid var(--line); padding-left:26px; }
.esg-pol-1{ border-left-color:#5aa469; }
.esg-pol-2{ border-left-color:#4a7fb5; }
.esg-pol-3{ border-left-color:#c8756e; }

/* 탭메뉴: 남색 → 먹색(활성/hover), 하단선 먹색 */
#stabmenu{ border-bottom:2px solid var(--ink); border-left:none; }
#stabmenu ul li{
  background:#f5f6f8; color:var(--gray-700); border-color:var(--line);
  font-size:15px; font-weight:600;
}
#stabmenu ul li:hover,
#stabmenu ul .mover{
  background:var(--ink) !important; color:#fff !important;
  border-color:var(--ink) !important;
}