@charset "utf-8";
/* ============================================================
   typography_v2.css — Exporum 통일 타이포 시스템 (v2 페이지 전용)
   - 모든 규칙은 .v2 스코프 하위로만 작성(기존 페이지 영향 0)
   - B.콘텐츠형 6토큰을 .v2 스코프 CSS 변수로 정의, 4분기 미디어쿼리로 px 재정의
   - 원본 contents.css가 #section-xxx + !important + :not()를 분기마다 도배해
     specificity가 높음 → 본 파일은 상위 ID(#wrap)를 결합해 ID 2개로 올려
     (specificity 0,2,x,x) 원본의 단일-ID 규칙을 무조건 제압. font-size엔 !important.
   미디어 분기: PC ≥1025 / TAB 768~1024 / MO 481~767 / SM ≤480
   포인트 컬러 #e4002b, 본문 회색 #666
   ============================================================ */

/* ---------- 토큰 변수 (PC 기본: ≥1025) ---------- */
.v2 {
	--t-display: 40px;
	--t-h1:      34px;
	--t-h2:      25px;
	--t-label:   18px;
	--t-body:    20px;
	--t-caption: 14px;
	--c-point:   #e4002b;
	--c-body:    #666;
}
/* TAB: 768 ~ 1024 */
@media (max-width: 1024px) {
	.v2 {
		--t-display: 28px; --t-h1: 26px; --t-h2: 21px;
		--t-label: 15px; --t-body: 16px; --t-caption: 13px;
	}
}
/* MO: 481 ~ 767 */
@media (max-width: 767px) {
	.v2 {
		--t-display: 26px; --t-h1: 22px; --t-h2: 19px;
		--t-label: 14px; --t-body: 15px; --t-caption: 13px;
	}
}
/* SM: ≤480 */
@media (max-width: 480px) {
	.v2 {
		--t-display: 24px; --t-h1: 20px; --t-h2: 18px;
		--t-label: 13px; --t-body: 14px; --t-caption: 13px;
	}
}

/* ============================================================
   EX_V2_HISTORY_START — about/history2.php (#section-history.v2)
   ============================================================ */
#wrap #section-history.v2 .history-tab a.history-tab-link { font-size: var(--t-label) !important; }
#wrap #section-history.v2 .history-hero .hero-text .period { font-size: var(--t-display) !important; }
#wrap #section-history.v2 .history-hero .hero-text .desc { font-size: var(--t-body) !important; }
#wrap #section-history.v2 .history-hero .hero-text .btns a { font-size: var(--t-caption) !important; }
#wrap #section-history.v2 .history-block .period-label p { font-size: var(--t-h1) !important; color: var(--c-point); }
#wrap #section-history.v2 .history-block .period-label .period-years,
#wrap #section-history.v2 .history-content .period-label .period-years { font-size: var(--t-label) !important; }
#wrap #section-history.v2 .history-block .period-label .period-desc { font-size: var(--t-caption) !important; color: var(--c-body); }
#wrap #section-history.v2 .history-list li h5 { font-size: var(--t-h2) !important; }
/* dt(월) 색은 원본 동작(검정) 유지 — 원본 라이브가 이미 #e4002b 미적용 상태. 시안은 빨강이라 보고에 제안으로 남김 */
#wrap #section-history.v2 .history-list li dl dt { font-size: var(--t-label) !important; color: #111 !important; } /* [ABOUT-R2] 월=시안검정+위계축소 */
#wrap #section-history.v2 .history-list li dl dd { font-size: var(--t-body) !important; }
/* EX_V2_HISTORY_END */


/* ============================================================
   EX_V2_AREAS_START — business/areas2.php (#section-areas.v2)
   ============================================================ */
#wrap #section-areas.v2 .sGroup > h4 { font-size: var(--t-display) !important; }
#wrap #section-areas.v2 .sGroup > div { font-size: var(--t-body) !important; }
#wrap #section-areas.v2 .icon-list > li > p { font-size: var(--t-label) !important; }
#wrap #section-areas.v2 .icon-list > li > dl > dt { font-size: var(--t-h2) !important; }
#wrap #section-areas.v2 .icon-list > li > dl > dd { font-size: var(--t-label) !important; }
#wrap #section-areas.v2 .areas-detail > .detail-text > h4 { font-size: var(--t-h1) !important; }
#wrap #section-areas.v2 .areas-detail > .detail-text > h4 > .num { color: var(--c-point); }
#wrap #section-areas.v2 .areas-detail > .detail-text > .detail-en { font-size: var(--t-label) !important; color: var(--c-point); }
#wrap #section-areas.v2 .areas-detail > .detail-text > .detail-desc { font-size: var(--t-body) !important; color: var(--c-body); }
#wrap #section-areas.v2 .tag-list > li { font-size: var(--t-caption) !important; color: var(--c-body); }
/* EX_V2_AREAS_END */

/* ============================================================
   EX_V2_CAPABILITY_START — business/capabilities2.php (#section-capability.v2)
   ============================================================ */
#wrap #section-capability.v2 .sGroup > h4 { font-size: var(--t-display) !important; }
#wrap #section-capability.v2 .sGroup > div { font-size: var(--t-body) !important; }
#wrap #section-capability.v2 .areas-detail > .detail-text > h4 { font-size: var(--t-h1) !important; }
#wrap #section-capability.v2 .areas-detail > .detail-text > h4 > .num { color: var(--c-point); }
#wrap #section-capability.v2 .areas-detail > .detail-text > .detail-desc { font-size: var(--t-body) !important; color: var(--c-body); }
#wrap #section-capability.v2 .tag-list > li { font-size: var(--t-caption) !important; color: var(--c-body); }
/* EX_V2_CAPABILITY_END */

/* ============================================================
   EX_V2_SUSTAIN_START — business/sustainability2.php (#section-sustain.v2)
   ============================================================ */
#wrap #section-sustain.v2 .sGroup > h4 { font-size: var(--t-display) !important; }
#wrap #section-sustain.v2 .sGroup > div { font-size: var(--t-body) !important; }
#wrap #section-sustain.v2 .sustain-promise { font-size: var(--t-h2) !important; }
#wrap #section-sustain.v2 .esg-cards > li > p { font-size: var(--t-label) !important; }
#wrap #section-sustain.v2 .esg-cards > li > dl > dt { font-size: var(--t-h2) !important; }
#wrap #section-sustain.v2 .esg-cards > li > dl > dt > span { font-size: var(--t-label) !important; }
#wrap #section-sustain.v2 .esg-cards > li > dl > dd { font-size: var(--t-h1) !important; }
#wrap #section-sustain.v2 .sustain-section > .sustain-text > h4 { font-size: var(--t-h1) !important; }
#wrap #section-sustain.v2 .sustain-section > .sustain-text > .sustain-desc { font-size: var(--t-body) !important; color: var(--c-body); }
#wrap #section-sustain.v2 .sustain-section > .sustain-text > .sustain-keyword { font-size: var(--t-h2) !important; color: var(--c-point); }
#wrap #section-sustain.v2 .sustain-cards > li > dl > dt { font-size: var(--t-caption) !important; color: var(--c-point); }
#wrap #section-sustain.v2 .sustain-cards > li > dl > dd > strong { font-size: var(--t-label) !important; }
#wrap #section-sustain.v2 .sustain-cards > li > dl > dd > span { font-size: var(--t-caption) !important; color: var(--c-body); }
/* EX_V2_SUSTAIN_END */

/* ============================================================
   EX_V2_INQUIRY_START — contact/inquiry2.php (#section-inquiry.v2)
   ID 2개(#wrap #section-inquiry.v2)로 원본 EX_INQUIRY_FONT_UNIFY(단일ID) 제압
   ============================================================ */
#wrap #section-inquiry.v2 .form-required { font-size: var(--t-label) !important; }
#wrap #section-inquiry.v2 .form-msg { font-size: var(--t-body) !important; }
#wrap #section-inquiry.v2 .form-table th { font-size: var(--t-label) !important; }
#wrap #section-inquiry.v2 .form-table .radio-row label { font-size: var(--t-body) !important; }
#wrap #section-inquiry.v2 .form-table input,
#wrap #section-inquiry.v2 .form-table select,
#wrap #section-inquiry.v2 .form-table select option,
#wrap #section-inquiry.v2 .form-table textarea { font-size: var(--t-body) !important; }
#wrap #section-inquiry.v2 .form-table .file-field input.file-name { font-size: var(--t-body) !important; }
#wrap #section-inquiry.v2 #bf_file { font-size: var(--t-body) !important; }
#wrap #section-inquiry.v2 .file-btn { font-size: var(--t-label) !important; }
#wrap #section-inquiry.v2 .captcha #captcha_key,
#wrap #section-inquiry.v2 .captcha-cell #captcha_key { font-size: var(--t-body) !important; }
#wrap #section-inquiry.v2 #captcha_info { font-size: var(--t-caption) !important; color: var(--c-body); }
#wrap #section-inquiry.v2 .form-policy h6 { font-size: var(--t-label) !important; }
#wrap #section-inquiry.v2 #inq-policy-open { font-size: var(--t-caption) !important; color: var(--c-point); }
#wrap #section-inquiry.v2 .form-policy .policy-box p { font-size: var(--t-caption) !important; color: var(--c-body); }
#wrap #section-inquiry.v2 .form-policy > label { font-size: var(--t-body) !important; }
#wrap #section-inquiry.v2 .form-btns .btn-submit { font-size: var(--t-label) !important; }
/* EX_V2_INQUIRY_END */

/* ============================================================
   EX_V2_TALENT_START — careers/talent2.php (#section-talent.v2)
   ============================================================ */
#wrap #section-talent.v2 .talent-row > dl > dt { font-size: var(--t-h1) !important; }
#wrap #section-talent.v2 .talent-xcode > dl > dt { font-size: var(--t-h1) !important; }
#wrap #section-talent.v2 .talent-row > dl > dt .red,
#wrap #section-talent.v2 .talent-xcode > dl > dt .red { color: var(--c-point); }
#wrap #section-talent.v2 .talent-xcode .xcode-item h5 { font-size: var(--t-h2) !important; }
#wrap #section-talent.v2 .talent-xcode .xcode-item p { font-size: var(--t-body) !important; color: var(--c-body); }
#wrap #section-talent.v2 .talent-row > dl > dd { font-size: var(--t-body) !important; color: var(--c-body); }
#wrap #section-talent.v2 .talent-mice .mice-name { font-size: var(--t-h2) !important; }
#wrap #section-talent.v2 .talent-mice .mice-sub { font-size: var(--t-h2) !important; }
#wrap #section-talent.v2 .talent-mice .mice-sub .r { color: var(--c-point); }
#wrap #section-talent.v2 .talent-mice .mice-desc { font-size: var(--t-body) !important; color: var(--c-body); }
/* EX_V2_TALENT_END */

/* ============================================================
   EX_V2_RECRUIT_START — careers/recruit2.php (#section-recruit.v2)
   ============================================================ */
#wrap #section-recruit.v2 .form-required { font-size: var(--t-caption) !important; color: var(--c-point); }
#wrap #section-recruit.v2 .form-msg { font-size: var(--t-body) !important; }
#wrap #section-recruit.v2 table.form-table th { font-size: var(--t-label) !important; }
#wrap #section-recruit.v2 table.form-table td { font-size: var(--t-body) !important; }
#wrap #section-recruit.v2 table.form-table td input[type=text],
#wrap #section-recruit.v2 table.form-table td input[type=email],
#wrap #section-recruit.v2 table.form-table td input[type=tel],
#wrap #section-recruit.v2 table.form-table td input[type=file],
#wrap #section-recruit.v2 table.form-table td select,
#wrap #section-recruit.v2 table.form-table td textarea { font-size: var(--t-body) !important; }
#wrap #section-recruit.v2 table.form-table td label { font-size: var(--t-body) !important; }
#wrap #section-recruit.v2 .form-policy { font-size: var(--t-caption) !important; color: var(--c-body); }
#wrap #section-recruit.v2 .form-policy h6 { font-size: var(--t-label) !important; }
#wrap #section-recruit.v2 .form-policy h6 .link-r { font-size: var(--t-caption) !important; color: var(--c-point); }
#wrap #section-recruit.v2 .form-policy label { font-size: var(--t-caption) !important; }
#wrap #section-recruit.v2 .form-btns button,
#wrap #section-recruit.v2 .form-btns a { font-size: var(--t-label) !important; }
/* EX_V2_RECRUIT_END */

/* ============================================================
   EX_V2_AWARDS_START — pr/awards2.php (#section-awards.v2) 연도탭+카드그리드
   ============================================================ */
#wrap #section-awards.v2 .awards-tab a.awards-tab-link { font-size: var(--t-label) !important; }
#wrap #section-awards.v2 .awards-year h3 .yr-label { font-size: var(--t-display) !important; }
#wrap #section-awards.v2 .awards-list li .badge { font-size: var(--t-caption) !important; }
#wrap #section-awards.v2 .awards-list li h5 { font-size: var(--t-h2) !important; }
#wrap #section-awards.v2 .awards-list li p { font-size: var(--t-caption) !important; color: var(--c-body); }
/* EX_V2_AWARDS_END */

/* ============================================================
   EX_V2_SUSTAIN_LAYOUT_START — business/sustainability.php (#section-sustain.v2)
   TAB·MO 481~1024px: 우측 카드(.sustain-cards) 1열 세로 스택 (지그재그 해제, CTO 지시 2026-07-07)
   실측 근거:
   - 841~1024: 카드 영역이 360px 컨테이너에 170px 2열 지그재그로 압축돼 깨짐 → 1열 전환
   - 769~840: 이미 1열이나 nth-child(2) translateY(21rem) 잔존 → 2/3번 카드 겹침 해제
   - 이미지 비율은 기존 규칙(aspect-ratio 16/10) 그대로 유지 — 배치만 변경
   - 481~768: contents.css translateY(21rem) 잔존 → 2번 카드가 3번 카드 가림(기존 버그) → 밴드 481까지 확장(2026-07-07)
   - 1025px 이상(PC) / 480px 이하(SM) 불변 — SM은 contents.css 자체 1열 폴백(transform:none) 유지
   적용: 환경/공정경영/사회 3개 섹션 공통(.sustain-cards 동일 패턴)
   ============================================================ */
@media (min-width:481px) and (max-width:1024px){
	#wrap #section-sustain.v2 .sustain-cards{ grid-template-columns:1fr !important; align-items:stretch !important; row-gap:2.4rem !important; }
	#wrap #section-sustain.v2 .sustain-cards > li{ margin-top:0 !important; align-self:stretch !important; }
	#wrap #section-sustain.v2 .sustain-cards > li:nth-child(2){ transform:none !important; }
	#wrap #section-sustain.v2 .sustain-cards > li > dl{ min-height:0 !important; }
}
/* EX_V2_SUSTAIN_LAYOUT_END */

/* ============================================================
   EX_V2_AWARDS_LAYOUT_START — awards 1025~1327px 좌우 여백 확보(2026-07-07)
   원인: #container{max-width:1280px; margin:auto} → 뷰포트 1280px 이하에서
   좌우 마진 0이 되어 콘텐츠(sticky 연도탭 .awards-tab 포함)가 화면 끝에 붙음
   (1024px 이하는 별도 TAB/MO 패딩 존재 → 손대지 않음).
   - 1025~1280px: 섹션 좌우 패딩 24px 고정 (CTO 보고 1130px 구간 포함).
   - 1280.02~1327.98px: 자연 마진((100vw-1280)/2)과 합산해 총 24px 유지
     → padding = 24px - (100vw-1280px)/2 = calc(664px - 50vw). 1328px+는
     자연 마진이 24px 이상이라 규칙 불필요(기존 레이아웃 무변경).
   !important: contents.css EX_AWARDS_WIDTH_SIANSPEC2_20260624(≥841px)의
   #section-awards{padding:0 !important} 상쇄용. 본 셀렉터(ID 2+class)가 특이도 우위.
   섹션은 위 규칙에 의해 box-sizing:border-box → 패딩이 콘텐츠만 인셋(오버플로 0).
   scope: #wrap #section-awards.v2 한정 — 타 페이지/기존 블록 영향 0.
   ============================================================ */
@media only screen and (min-width:1025px) and (max-width:1280px){
	#wrap #section-awards.v2{padding-left:24px !important; padding-right:24px !important;}
}
@media only screen and (min-width:1280.02px) and (max-width:1327.98px){
	#wrap #section-awards.v2{padding-left:calc(664px - 50vw) !important; padding-right:calc(664px - 50vw) !important;}
}
/* EX_V2_AWARDS_LAYOUT_END */


/* EX_V2_SUSTAIN_ESGICON_START — 2026-07-08
   business/sustainability (#section-sustain.v2) ESG 3카드 아이콘 반응형 보정 (CTO 지시).
   실측: contents.css @media(max-width:840px)에서 .esg-cards 1열 스택(841px~ 3열).
   1열 구간 아이콘(figure.esg-icon>img)이 우하단 27~29px로 과소(카드높이 163~185px의 16%)
   → 1열 구간 한정: 우측 + 세로중앙 + 카드높이 58% 크기. 3열(>840px) 구간 불변.
   rem트랩(html 6.5/6/5.5px) 회피 위해 %비례 + px 클램프. append-only. */
@media only screen and (max-width:840px){
	#wrap #section-sustain.v2 .esg-cards>li>figure.esg-icon{
		position:absolute !important;
		top:50% !important;
		bottom:auto !important;
		left:auto !important;
		right:20px !important;
		transform:translateY(-50%) !important;
		margin:0 !important;
		width:auto !important;
		height:58% !important;
		max-height:120px !important;
		min-height:56px !important;
		display:flex !important;
		align-items:center !important;
		justify-content:flex-end !important;
	}
	#wrap #section-sustain.v2 .esg-cards>li>figure.esg-icon img{
		width:auto !important;
		height:100% !important;
	}
}
/* EX_V2_SUSTAIN_ESGICON_END */


/* EX_V2_SUSTAIN_ESGPAD_START — 2026-07-08
   business/sustainability (#section-sustain.v2) ESG 3카드 1열(≤840px) 하단 패딩 보정 (CTO 지시).
   아이콘 우하단 시절 잔여 padding-bottom(9rem/12rem, contents.css)으로 카드 하단이 비어
   텍스트가 상단 쏠림 → 1열 구간 한정 padding-bottom을 padding-top과 동일 수준으로 축소.
   contents.css min-height:24rem(≤840, 481~840 구간 적용)이 잔여 공간을 하단에 남기므로 auto 처리.
   아이콘(ESGICON 블록: 카드높이 58% 세로중앙)은 카드 축소에 비례해 함께 축소 — 겹침 실측 검증.
   3열(>840px) 구간 불변. append-only. */
@media only screen and (max-width:840px){
	#wrap #section-sustain.v2 .esg-cards>li{
		padding-bottom:3.5rem !important; /* 기존 9rem → 상단 3.5rem과 동일 */
		min-height:auto !important;       /* 기존 24rem — 하단 잔여공간 원인 */
	}
}
@media only screen and (max-width:480px){
	#wrap #section-sustain.v2 .esg-cards>li{
		padding-bottom:4rem !important;   /* 기존 12rem → 상단 4rem과 동일 */
	}
}
/* EX_V2_SUSTAIN_ESGPAD_END */