/* ==========================================================================
   (주)후트웍 — 회사소개 (about) 전용 스타일
   daehan(대한상선 a1) 톤: 풀블리드 다크 서브헤더 + 대형 에디토리얼 타이포
   + 비대칭/풀폭 레이아웃. main.css 토큰(--accent/--navy/--font-display) 재사용.
   하드코딩 색은 이미지 오버레이용 rgba만 허용. radius 0(직각).
   ========================================================================== */

/* --------------------------------------------------------------------------
   공통: about 섹션 내부 헤더 (좌측 정렬 영문 대형 + 국문 보조)
   가운데 정렬 남발 회피. eyebrow 앞 짧은 룰 라인으로 daehan 톤 강조.
   -------------------------------------------------------------------------- */
.ab-head { margin-bottom: 56px; }
.ab-head__eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 14px; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--accent);
}
.ab-head__eyebrow::before {
	content: ''; display: inline-block;
	width: 34px; height: 1px; background: var(--accent);
	vertical-align: middle; margin-right: 14px;
}
/* 영문 대형 디스플레이 타이틀 (Poppins) */
.ab-head__en {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 600; line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 18px 0 0; color: var(--ink);
}
/* 국문 보조 타이틀 */
.ab-head__ko {
	margin: 14px 0 0;
	font-size: 21px; font-weight: 600;
	letter-spacing: -0.02em; color: var(--ink-soft);
}
.dl-sec--dark .ab-head__en { color: #fff; }
.dl-sec--dark .ab-head__ko { color: rgba(255,255,255,0.7); }

/* ==========================================================================
   1. 대표 인사말 — 좌 대형 타이틀 / 우 인사말 전문 (비대칭 2-col)
   ========================================================================== */
.ab-greeting { padding: 150px 0; background: #fff; }
/* 상단 헤더(풀폭) + 좌 이미지(3:4) / 우 본문 — 이미지 상단 = 본문 상단 정렬 */
.ab-greeting__grid { display: grid; grid-template-columns: 460px 1fr; gap: 0 70px; align-items: start; }
.ab-greeting__left { grid-column: 1 / -1; margin-bottom: 54px; }
.ab-greeting__media { aspect-ratio: 3 / 4; background: linear-gradient(160deg, #eef3f7, #dde6ed); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ab-greeting__media img { width: 100%; height: 100%; object-fit: cover; }
.ab-greeting__media-label { font-family: var(--font-body); font-size: 14px; letter-spacing: 0.04em; color: #8a97a2; }
.ab-greeting__body { max-width: 880px; }
.ab-greeting__en {
	font-family: var(--font-display);
	font-size: 60px;
	font-weight: 600; line-height: 1;
	letter-spacing: -0.02em; color: var(--ink);
	margin: 0;
}
.ab-greeting__ko {
	margin: 20px 0 0; padding-left: 20px;
	position: relative;
	font-size: 22px; font-weight: 600;
	letter-spacing: -0.02em; color: var(--accent);
}
.ab-greeting__ko::before {
	content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
	width: 3px; background: var(--accent);
}
/* 우측 인사말 본문 */
.ab-greeting__body p {
	font-size: 18px; font-weight: 300; line-height: 1.95;
	color: var(--ink-soft); margin: 0 0 26px;
}
.ab-greeting__body p:first-child {
	font-size: 21px; font-weight: 400; color: var(--ink);
}
.ab-greeting__body em {
	font-style: normal; font-weight: 600; color: var(--accent);
}
.ab-greeting__sign {
	margin-top: 44px; padding-top: 30px;
	border-top: 1px solid var(--line);
	font-family: var(--font-display);
}
.ab-greeting__sign-co {
	display: block; font-size: 14px; letter-spacing: 0.04em;
	color: var(--ink-soft);
}
.ab-greeting__sign-name {
	display: block; margin-top: 8px;
	font-size: 28px; font-weight: 600; color: var(--ink);
	letter-spacing: -0.01em;
}
.ab-greeting__memo {
	margin-top: 22px; font-size: 13px; color: #aab2bb;
	font-family: var(--font-body);
}

/* ==========================================================================
   2. 회사 개요 + 차별점 3 — 좌 헤더+리드 / 우 번호 리스트 (비대칭)
   .dl-sec--gray 위에 얹음
   ========================================================================== */
.ab-overview__grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 70px; align-items: start;
}
.ab-overview__lead {
	margin-top: 26px;
	font-size: 18px; font-weight: 300; line-height: 1.85;
	color: var(--ink-soft); max-width: 520px;
}
/* 우측 차별점 — 번호 + 제목 + 설명, 상단 라인 (각진 daehan 톤) */
.ab-edge { display: flex; flex-direction: column; }
.ab-edge__item {
	display: grid; grid-template-columns: 78px 1fr;
	gap: 24px; align-items: baseline;
	padding: 30px 0;
	border-top: 1px solid #dbe3ea;
}
.ab-edge__item:last-child { border-bottom: 1px solid #dbe3ea; }
.ab-edge__no {
	font-family: var(--font-display);
	font-size: 38px; font-weight: 600; line-height: 1;
	color: var(--accent);
}
.ab-edge__name {
	font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
	color: var(--ink); margin: 0;
}
.ab-edge__desc {
	margin: 10px 0 0; font-size: 16px; font-weight: 300;
	line-height: 1.7; color: var(--ink-soft);
}

/* ==========================================================================
   3. 연혁 — 대형 연도(Poppins) 좌측 정렬 타임라인 (직접 제작)
   좌 sticky 헤더 / 우 세로 라인 + 연도 행
   ========================================================================== */
/* 좌 헤더(sticky) / 우 타임라인 비대칭 2col — 1920 우측 휑함 해소 */
.ab-history__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; }
.ab-history__head { position: sticky; top: 120px; }
.ab-history__memo {
	margin-top: 18px; font-size: 13px; color: #aab2bb;
	max-width: 520px; line-height: 1.6;
}
.ab-timeline { max-width: 980px; }
/* 타임라인 — 좌측 세로 라인 따라 연도/내용 행 */
.ab-timeline { position: relative; }
.ab-timeline__row {
	display: grid; grid-template-columns: 150px 1fr;
	gap: 36px; align-items: baseline;
	padding: 28px 0 28px 40px;
	position: relative;
	border-bottom: 1px solid var(--line);
}
.ab-timeline__row:first-child { padding-top: 4px; }
/* 세로 라인 */
.ab-timeline::before {
	content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px;
	width: 1px; background: #dbe3ea;
}
/* 노드 점 */
.ab-timeline__row::before {
	content: ''; position: absolute; left: 1px; top: 38px;
	width: 11px; height: 11px;
	background: #fff; border: 2px solid #c7d2dc;
	transition: .3s;
}
.ab-timeline__row:first-child::before { top: 14px; }
.ab-timeline__row:hover::before { border-color: var(--accent); background: var(--accent); }
.ab-timeline__year {
	font-family: var(--font-display);
	font-size: 42px; font-weight: 600; line-height: 1;
	color: var(--ink); letter-spacing: -0.01em;
	transition: .3s;
}
.ab-timeline__row:hover .ab-timeline__year { color: var(--accent); }
.ab-timeline__text {
	font-size: 17px; font-weight: 400; line-height: 1.6;
	color: var(--ink-soft); letter-spacing: -0.01em;
}

/* ==========================================================================
   4. Clariant Group — 다크(.dl-sec--dark) + 대형 카운트업 4지표
   좌 헤더+본문 / 우 풀폭 네트워크 숫자 그리드
   ========================================================================== */
.ab-clariant__top {
	display: grid; grid-template-columns: 1fr 1.1fr;
	gap: 70px; align-items: end;
	margin-bottom: 84px;
}
.ab-clariant__body {
	font-size: 18px; font-weight: 300; line-height: 1.9;
	color: rgba(255,255,255,0.78); margin: 0;
}
.ab-clariant__body b { color: #fff; font-weight: 600; }
/* 네트워크 지표 — 대형 숫자, 세로 구분선 (main.css dl-num 톤 차용) */
.ab-net {
	display: grid; grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid rgba(255,255,255,0.16);
}
.ab-net__item {
	padding: 50px 28px 0; position: relative; text-align: left;
}
.ab-net__item + .ab-net__item::before {
	content: ''; position: absolute; left: 0; top: 50px; bottom: 4px;
	width: 1px; background: rgba(255,255,255,0.14);
}
.ab-net__value {
	font-family: var(--font-display);
	font-size: clamp(56px, 7vw, 84px); font-weight: 600;
	line-height: 1; color: #fff;
}
.ab-net__value sup {
	font-size: 24px; font-weight: 500; color: var(--accent);
	vertical-align: super; margin-left: 6px;
}
.ab-net__label {
	margin-top: 20px; font-size: 15px; font-weight: 300;
	line-height: 1.6; color: rgba(255,255,255,0.62);
}

/* ==========================================================================
   5. 친환경·그린 경영 — 인트로 + 4메시지 (번호) + 인증 박스
   ========================================================================== */
.ab-green__intro {
	font-size: 22px; font-weight: 300; line-height: 1.7;
	color: var(--ink); letter-spacing: -0.01em;
	margin: 0 0 64px;
}
.ab-green__intro b { font-weight: 600; color: var(--accent); }
/* 4메시지 — 풀폭 4분할, 상단 굵은 라인 + 번호 (균일 테두리카드 회피, 라인만) */
.ab-green__grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.ab-green__item {
	position: relative;
	padding: 44px 30px 40px;
	background: #fff;
	border-top: 3px solid var(--ink);
	border-right: 1px solid var(--line);
	transition: .35s;
}
.ab-green__item:last-child { border-right: 0; }
.ab-green__item:hover { border-top-color: var(--accent); background: #f7fafc; }
.ab-green__no {
	font-family: var(--font-display);
	font-size: 15px; font-weight: 600; letter-spacing: 0.06em;
	color: var(--accent);
}
.ab-green__name {
	margin: 22px 0 0; font-size: 21px; font-weight: 700;
	letter-spacing: -0.02em; color: var(--ink); line-height: 1.3;
}
.ab-green__desc {
	margin: 12px 0 0; font-size: 16px; font-weight: 300;
	line-height: 1.65; color: var(--ink-soft);
}
/* 하단 인증 박스 — 풀폭 다크 스트립 */
.ab-cert {
	display: flex; align-items: center; gap: 28px;
	margin-top: 36px; padding: 34px 40px;
	background: var(--navy); color: #fff;
}
.ab-cert__icon {
	flex-shrink: 0; width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,0.3);
}
.ab-cert__icon svg { width: 26px; height: 26px; stroke: var(--accent); }
.ab-cert__text {
	font-size: 16px; font-weight: 300; line-height: 1.65;
	color: rgba(255,255,255,0.85); margin: 0;
}
.ab-cert__text b { color: #fff; font-weight: 600; }

/* ==========================================================================
   6. CTA — 풀블리드 이미지 밴드 (warehouse.jpg)
   ========================================================================== */
.ab-cta {
	position: relative; padding: 150px 0; text-align: center; color: #fff;
	background-image: linear-gradient(rgba(8,16,32,0.82), rgba(8,16,32,0.82)), url('../assets/scene/warehouse.jpg');
	background-size: cover; background-position: center; background-attachment: scroll;
}
.ab-cta__title {
	font-family: var(--font-display);
	font-size: 48px; font-weight: 600;
	line-height: 1.3; margin: 0 0 36px;
}
.ab-cta__btn {
	display: inline-flex; align-items: center; gap: 12px;
	height: 60px; padding: 0 40px;
	background: var(--accent); color: #fff;
	font-size: 16px; font-weight: 500; transition: .35s;
}
.ab-cta__btn:hover { background: #fff; color: var(--accent); }
.ab-cta__btn svg { width: 18px; height: 18px; }

/* ==========================================================================
   반응형 — 1200 / 768
   ========================================================================== */
@media (max-width: 1200px) {
	.ab-greeting { padding: 100px 0; }
	.ab-greeting__grid { grid-template-columns: 1fr; gap: 50px; }
	.ab-greeting__left { position: static; }
	.ab-overview__grid { grid-template-columns: 1fr; gap: 50px; }
	.ab-clariant__top { grid-template-columns: 1fr; gap: 36px; }
	.ab-net { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
	.ab-net__item:nth-child(3)::before { display: none; }
	.ab-history__grid { grid-template-columns: 1fr; gap: 44px; }
	.ab-history__head { position: static; }
	.ab-green__grid { grid-template-columns: repeat(2, 1fr); }
	.ab-green__item:nth-child(2) { border-right: 0; }
	.ab-green__item:nth-child(1), .ab-green__item:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 768px) {
	.ab-greeting { padding: 70px 0; }
	.ab-greeting__en { font-size: 52px; }
	.ab-greeting__ko { font-size: 18px; }
	.ab-greeting__body p:first-child { font-size: 18px; }
	.ab-greeting__body p { font-size: 16px; line-height: 1.8; }
	.ab-greeting__sign-name { font-size: 23px; }

	.ab-head { margin-bottom: 40px; }
	.ab-head__en { font-size: 34px; }
	.ab-head__ko { font-size: 18px; }
	.ab-overview__lead { font-size: 16px; }

	.ab-edge__item { grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; }
	.ab-edge__no { font-size: 30px; }
	.ab-edge__name { font-size: 19px; }
	.ab-edge__desc { font-size: 15px; }

	.ab-timeline__row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0 22px 32px; }
	.ab-timeline__year { font-size: 34px; }
	.ab-timeline__text { font-size: 15px; }
	.ab-timeline__row::before, .ab-timeline__row:first-child::before { top: 12px; }

	.ab-net { grid-template-columns: 1fr 1fr; }
	.ab-net__item { padding: 36px 14px 0; }
	.ab-net__item::before { top: 36px !important; }
	.ab-net__item:nth-child(odd)::before { display: none; }
	.ab-net__value { font-size: 48px; }

	.ab-green__intro { font-size: 18px; margin-bottom: 40px; }
	.ab-green__grid { grid-template-columns: 1fr; }
	.ab-green__item { border-right: 0 !important; border-bottom: 1px solid var(--line); padding: 32px 22px; }
	.ab-green__item:last-child { border-bottom: 0; }
	.ab-cert { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; }
	.ab-cert__text { font-size: 15px; }

	.ab-cta__title { font-size: 30px; }
	.ab-cta { padding: 80px 0; background-attachment: scroll; }
}