/* ==========================================================================
   OSBC main-design2 — company-about.css (회사소개 전용)
   Page Title(화이트 좌정렬) / Who We Are(틴트 밴드 C+H)
   History(사명 변천 스텝 I + 시대별 타임라인) / Stats(패턴 D 라이트)
   common.css 토큰·공통 클래스(.eyebrow .chip .img-slot .section 등) 재사용
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page Title — 화이트 밴드, 좌정렬 (1차 시안의 다크 page-hero 대체)
   -------------------------------------------------------------------------- */
.page-title {
	padding: 84px 0 76px;
	background: var(--c-bg);
}

.page-title-heading {
	font-size: 48px;
	font-weight: 800;
}

.page-title-desc {
	margin-top: 16px;
	font-size: 20px; /* 17 → 20 (2026-06-10 사용자 조정) */
	color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   2. Who We Are — 패턴 C+H: 틴트 풀폭 밴드, 좌 텍스트 + 우 이미지 슬롯
   -------------------------------------------------------------------------- */
.about-who {
	background: var(--c-tint);
	padding: 110px 0;
}

.about-who-inner {
	display: flex;
	align-items: stretch;
	gap: 80px;
}

.about-who-text {
	width: 54%;
	flex-shrink: 0;
}

.about-who-title {
	margin-top: 18px;
	font-size: 40px;
	font-weight: 800;
}

.about-who-lead {
	margin-top: 24px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--c-ink);
}

.about-who-body {
	margin-top: 24px;
}

.about-who-body p {
	font-size: 16px;
	color: var(--c-text);
}

.about-who-body p + p {
	margin-top: 14px;
}

.about-who-visual {
	flex: 1;
	display: flex;
}

/* 틴트 밴드 위 슬롯은 common.css .img-slot-alt(bg-alt) 재사용 — 가이드 6장 슬롯 처방(틴트/bg-alt) 준수, 틴트 배경에 묻힘 방지. 여기선 레이아웃만 보정 */
.about-who-visual .img-slot {
	flex: 1;
	min-height: 420px;
}

/* --------------------------------------------------------------------------
   3. History — 화이트 섹션
   -------------------------------------------------------------------------- */

/* 3-1. 사명 변천 3스텝 — 패턴 I (넘버 원형 + 연결선) */
.name-steps {
	display: flex;
	margin: 64px 0 88px;
}

.name-step {
	position: relative;
	flex: 1;
}

.name-step-no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-pill);
	background: var(--c-tint);
	color: var(--c-primary-deep);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0;
}

/* 스텝 사이 얇은 연결선 */
.name-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 26px;
	left: 72px;
	right: 28px;
	height: 1px;
	background: var(--c-border);
}

.name-step-date {
	display: block;
	margin-top: 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--c-primary-deep);
	font-variant-numeric: tabular-nums;
}

.name-step-title {
	margin-top: 6px;
	font-size: 21px;
	font-weight: 700;
}

.name-step-sub {
	margin-top: 4px;
	font-size: 14px;
	color: var(--c-text-sub);
}

/* 3-2. 시대별 타임라인 — 좌 시대 라벨(sticky) + 우 연도 리스트 */
.history-group {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 64px;
	padding: 56px 0;
	border-top: 1px solid var(--c-border);
}

.history-group:last-child {
	padding-bottom: 8px;
}

.history-era {
	align-self: start;
	position: sticky;
	top: calc(var(--header-h) + 32px);
}

.history-era-range {
	display: block;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}

.history-era-label {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	color: var(--c-text-sub);
}

.history-year {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 28px;
	padding: 26px 0;
	border-bottom: 1px solid var(--c-border-soft);
}

.history-year:first-child {
	padding-top: 4px;
}

.history-year:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.history-year-num {
	font-size: 21px;
	font-weight: 800;
	color: var(--c-primary-deep);
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.history-year-body h4 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

/* 연도 타이틀 옆 작은 칩 (.chip 재사용, 크기만 보정) */
.history-chip {
	margin-left: 8px;
	padding: 2px 10px;
	font-size: 12px;
	vertical-align: 2px;
}

.history-detail {
	margin-top: 10px;
}

.history-detail li {
	position: relative;
	padding-left: 14px;
	font-size: 15px;
	color: var(--c-text-sub);
	line-height: 1.7;
}

.history-detail li + li {
	margin-top: 4px;
}

.history-detail li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--c-tint-2);
}

.history-note {
	margin-top: 8px;
	font-size: 15px;
	color: var(--c-text-sub);
}

/* --------------------------------------------------------------------------
   4. Stats — 패턴 D 라이트 (index 마크업 재사용, bg-alt 밴드 위 타이포만)
   -------------------------------------------------------------------------- */
.stats-grid {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	margin-top: 72px;
	padding: 0 20px;
}

.stat-item {
	text-align: center;
}

.stat-value {
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.stat-unit {
	font-size: 24px;
	font-weight: 700;
	margin-left: 2px;
}

.stat-label {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-primary-deep);
}