/* ==========================================================================
   정도경영 탭 (center/vision_new.php 전용)
   - 준법경영 / 환경경영 / 인권경영 / CSR 네 탭이 같은 구조를 쓴다
     탭 버튼 → 패널[본문(+일러스트) → 표 슬라이더]
   - 모든 요소가 일반 흐름이라 높이는 내용만큼 자동으로 정해진다
     (고정 높이, absolute, 음수 마진, JS 간격 보정 없음)
   - 클래스는 모두 .esg- 로 시작해 기존 custom_241224.css / px-custom.css 규칙과 겹치지 않는다
   ========================================================================== */

main {
	overflow: hidden;
}

.esg {
	padding: 80px 0 200px;
}

.esg-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ---- 탭 ---- */
.esg-tabs {
	display: flex;
	gap: 40px;
	margin-bottom: 80px;
}

.esg-tab {
	position: relative;
	width: 140px;
	padding: 0 0 12px;
	border: 0;
	background: none;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.38px;
	color: #000;
	text-align: center;
	cursor: pointer;
}

/* 밑줄: 회색 바탕 위에 활성 탭만 검정 */
.esg-tab::before,
.esg-tab::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
}

.esg-tab::before {
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
}

.esg-tab::after {
	width: 0;
	background: #000;
	transition: width 0.35s ease;
}

.esg-tab.is-active::after {
	width: 100%;
}

.esg-tab:focus-visible {
	outline: 2px solid #1f2687;
	outline-offset: 4px;
}

/* ---- 패널 (클릭하면 전환 + 페이드) ---- */
.esg-panel {
	display: none;
}

.esg-panel.is-active {
	display: block;
	animation: esgFade 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
	.esg-panel.is-active {
		animation: none;
	}
}

@keyframes esgFade {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---- 본문 + 일러스트 ---- */
.esg-intro {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-bottom: 80px;
}

.esg-text {
	flex: 1 1 auto;
	min-width: 0;
}

.esg-title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	color: #000;
	word-break: keep-all;
}

.esg-desc {
	margin-top: 32px;
	font-size: 16px;
	line-height: 1.7;
	color: #333;
	word-break: keep-all;
}

/* 일러스트: 가로로 긴 기존 배경 이미지에서 그림이 있는 부분만 잘라 보여준다
   (background-size = 100 / 잘라낼 폭 비율, position = 시작점 / (1 - 폭 비율)) */
.esg-illust {
	flex: 0 0 34%;
	max-width: 420px;
	background-repeat: no-repeat;
}

.esg-illust--communication {
	aspect-ratio: 1523 / 482;
	background-image: url('../img/bg-communication.png');
	background-size: 350.9% auto;
	background-position: 67.13% 68.85%;
}

.esg-illust--innovation {
	flex-basis: 26%;
	aspect-ratio: 1216 / 1042;
	background-image: url('../img/bg-innovation.png');
	background-size: 370.4% auto;
	background-position: 68.49% 0;
}

.esg-illust--dedication {
	aspect-ratio: 2779 / 902;
	background-image: url('../img/bg-dedication.png');
	background-size: 192.3% auto;
	background-position: 77.08% 62.96%;
}

/* ---- 슬라이더 공통 (표 / CSR) : 화살표는 위쪽에 고정해 표 높이가 바뀌어도 움직이지 않는다 ---- */
.esg-slider-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 16px;
}

.esg-slider-count {
	margin-right: 8px;
	font-size: 15px;
	font-weight: 500;
	color: #333;
	font-variant-numeric: tabular-nums;
}

.esg-slider-prev,
.esg-slider-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: #000;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	transition: opacity 0.2s;
}

.esg-slider-prev.slick-disabled,
.esg-slider-next.slick-disabled {
	opacity: 0.3;
	cursor: default;
}

/* slick 은 adaptiveHeight 높이를 정수로 내려 잡아(153.4px → 153px) 표 맨 아래 선이 잘린다.
   슬라이드 아래에 여유를 둬서 잘리는 부분이 빈 공간이 되게 한다 */
.esg-slider .slick-slide {
	padding-bottom: 2px;
}

/* slick 초기화 전에 슬라이드가 한꺼번에 보이지 않도록 */
.esg-slider:not(.slick-initialized) > :not(:first-child) {
	display: none;
}

/* ---- 표 ---- */
.esg-table-tt {
	margin-bottom: 12px;
	font-size: 22px;
	font-weight: 700;
	color: #000;
	word-break: keep-all;
}

.esg-unit {
	margin-bottom: 6px;
	font-size: 14px;
	color: #666;
	text-align: right;
}

/* 좁은 화면에서는 표를 줄이지 않고 옆으로 밀어서 본다 */
.esg-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* collapse 방식은 바깥 테두리 절반이 표 밖으로 나가 스크롤 영역에 잘리므로,
   separate 방식으로 선을 모두 표 안쪽에 그린다 (표: 위·왼쪽 / 칸: 오른쪽·아래) */
.esg-data {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	background: #fff;
}

.esg-data th,
.esg-data td {
	padding: 10px 12px;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	font-size: 16px;
	line-height: 1.5;
	color: #000;
	text-align: left;
	vertical-align: middle;
	word-break: keep-all;
}

.esg-data th {
	background: #f8f9fa;
	font-weight: 500;
	white-space: nowrap;
}

.esg-data .category {
	background: #f8f9fa;
	font-weight: 500;
}

.esg-data .indent {
	padding-left: 24px;
}

.esg-data .number {
	text-align: right;
	white-space: nowrap;
}

.esg-footnote {
	margin-top: 12px;
}

.esg-footnote p {
	margin-bottom: 4px;
	font-size: 14px;
	line-height: 1.6;
	color: #666;
	word-break: keep-all;
}

/* ---- CSR ---- */
.esg-csr {
	margin-bottom: 80px;
}

.esg-csr-title {
	margin-bottom: 32px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: #000;
	word-break: keep-all;
}

.esg-csr-body {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.esg-csr-image {
	flex: 0 0 45%;
}

.esg-csr-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.esg-csr-text {
	flex: 1 1 auto;
	min-width: 0;
}

.esg-csr-text p {
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 1.8;
	color: #333;
	word-break: keep-all;
}

.esg-csr-text p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   반응형
   ========================================================================== */

/* 태블릿: 일러스트를 빼고 본문을 전체 폭으로 */
@media (max-width: 1024px) {
	.esg-tabs {
		margin-bottom: 56px;
	}

	.esg-intro {
		margin-bottom: 56px;
	}

	.esg-illust {
		display: none;
	}

	.esg-title,
	.esg-csr-title {
		font-size: 24px;
	}

	.esg-data th,
	.esg-data td {
		font-size: 15px;
	}

	.esg-csr-body {
		gap: 28px;
	}

	.esg-csr-image {
		flex-basis: 40%;
	}
}

/* 모바일 */
@media (max-width: 768px) {
	.esg {
		padding: 56px 0 100px;
	}

	.esg-inner {
		padding: 0 20px;
	}

	.esg-tabs {
		gap: 8px;
		margin-bottom: 40px;
	}

	.esg-tab {
		flex: 1 1 0;
		width: auto;
		padding-bottom: 10px;
		font-size: 17px;
		letter-spacing: -0.3px;
	}

	.esg-tab::before,
	.esg-tab::after {
		height: 3px;
	}

	.esg-intro {
		margin-bottom: 40px;
	}

	.esg-title,
	.esg-csr-title {
		font-size: 20px;
	}

	.esg-desc {
		margin-top: 20px;
		font-size: 15px;
	}

	/* PC용 강제 줄바꿈은 빼고 자연스럽게 줄바꿈 */
	.esg-title br,
	.esg-desc br {
		display: none;
	}

	.esg-table-tt {
		font-size: 18px;
	}

	.esg-data th,
	.esg-data td {
		padding: 8px 10px;
		font-size: 14px;
	}

	.esg-footnote p {
		font-size: 13px;
	}

	.esg-slider-prev,
	.esg-slider-next {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.esg-csr {
		margin-bottom: 56px;
	}

	.esg-csr-title {
		margin-bottom: 20px;
	}

	.esg-csr-body {
		flex-direction: column;
		gap: 20px;
	}

	.esg-csr-image {
		flex: none;
		width: 100%;
	}

	.esg-csr-text p {
		font-size: 15px;
		line-height: 1.7;
		margin-bottom: 12px;
	}
}

@media (max-width: 360px) {
	.esg-tab {
		font-size: 15px;
	}
}