/* 회사소개(company.html) 전용 — 공통 d3.css 위에 덧붙임. 메인의 .nums · .cty · .prow · .hq 결을 그대로 따름 */

/* ===== 머리 사진: 메인 '한국 · 베트남 · 중국' 띠(.hq)와 같은 밝기·채도로 맞춤 ===== */
.page-company .phero-img img{object-position:72% 50%;filter:saturate(.7) brightness(.78) contrast(1.06)}
/* 사진이 밝아진 만큼 왼쪽 글 쪽 그늘만 조금 진하게 (.66 → .72) */
.page-company .phero::before{background:
  linear-gradient(180deg,rgba(12,13,15,.62) 0%,rgba(12,13,15,0) 24%,rgba(12,13,15,0) 38%,rgba(12,13,15,.78) 78%,var(--bg) 100%),
  linear-gradient(90deg,rgba(12,13,15,.72) 0%,rgba(12,13,15,0) 64%)}

/* ===== 인사말 아래 숫자 줄: 각 칸이 해당 섹션 바로가기 ===== */
.gr-facts{margin-top:clamp(72px,calc(8vw / var(--z)),128px)}
.gr-facts .fact > a{display:block}
.gr-facts .fact strong,.gr-facts .fact p{transition:color .25s}
.gr-facts .fact > a:hover strong{color:var(--hi)}
.gr-facts .fact > a:hover p{color:var(--fg)}
.gr-facts .fact > a:focus-visible{outline-offset:6px}

/* ===== 연혁: 왼쪽 가는 대형 연도(메인 .nums 결) + 설명, 오른쪽 연대별 줄 ===== */
.his-side .his-y{font-size:clamp(56px,calc(6vw / var(--z)),96px);font-weight:200;letter-spacing:-.05em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.his-side .his-y + .lead{margin-top:28px}
/* 넓고 높은 화면에서만 왼쪽 제목이 연혁을 따라 내려옴 (메인 '실리콘이 하는 일'의 고정 패널과 같은 결) */
@media (min-width:1280px) and (min-height:780px){
  .his-side{position:sticky;top:calc(var(--stick) + 32px)}
}
/* 1279px 이하: 2단 안에 연도:항목 2단이 겹쳐 칸이 좁아지므로 한 줄로 */
@media (max-width:1279px){
  .page-company .split.his{grid-template-columns:minmax(0,1fr);gap:40px}
}
/* 1280px 이상: 2단 안의 연도 칸은 213px쯤에서 더 넓어지지 않으므로, 숫자를 1366px 폭 때 크기(68.3px)에서 멈춤 — 더 키우면 '년대'와 표시점이 칸을 넘음 */
@media (min-width:1280px){
  .page-company .his .tl-y{font-size:min(calc(5vw / var(--z)),68.3px)}
}

/* ===== 인증 3종: 메인 .nums 와 같은 가는 대형 숫자 + 1px 세로선 ===== */
.cert{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2)}
.cert li{padding:30px 28px 8px 0}
.cert li + li{padding-left:28px;border-left:1px solid var(--line)}
/* 최소 46px: 3칸이 시작되는 641px(칸 197px)에서 'ISO 14001'이 세로선을 넘지 않는 크기. 800px 이상은 7vw가 56px을 넘어 그대로, 640px 이하는 아래에서 56px로 따로 정함 */
.cert strong{display:flex;align-items:baseline;gap:.12em;font-size:clamp(46px,calc(7vw / var(--z)),116px);font-weight:200;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}
/* 'ISO' 앞 글씨: 메인 숫자 단위(.num small)와 같은 굵기·자간 */
.cert strong small{font-size:.22em;font-weight:500;letter-spacing:.04em;color:var(--mute)}
.cert h3{margin-top:26px;font-size:clamp(19px,calc(1.5vw / var(--z)),22px);font-weight:600;letter-spacing:-.02em;line-height:1.35}
.cert p{margin-top:8px;font-size:15px;line-height:1.65;color:var(--mute);max-width:24em;text-wrap:pretty}
/* 분쟁광물 선언서 줄: 메인 제품 목록(.prow) 한 줄 재사용 */
.decl{margin-top:clamp(48px,calc(5vw / var(--z)),72px)}
.decl .prow:hover .prow-go .arw{transform:translate(2px,-2px)}

/* ===== 사업장 ===== */
/* 사업장 한 곳: 메인 .cty 처럼 위 선 + 국가(한글) · 작은 영문 + 이름 + 주소 */
.site{padding-top:24px;border-top:1px solid var(--line2)}
.site + .site{margin-top:36px;border-top-color:var(--line)}
.site-c{display:flex;align-items:baseline;gap:10px;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--fg)}
.site-c small{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--mute)}
.site-t{margin-top:10px;font-size:clamp(24px,calc(2.2vw / var(--z)),32px);font-weight:600;letter-spacing:-.03em;line-height:1.25}
.site-a{margin-top:10px;font-size:16px;line-height:1.7;color:var(--mute)}
.site .tlink{margin-top:20px;font-size:15px}
.split-txt > .site + .site{margin-top:36px}

/* 평택 본사: 이름(5) · 연락처(7). 두 칸 높이를 맞춰 위 선과 아래 선(지도 링크 밑줄 = 표 마지막 줄)이 나란히 */
.site-hq-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,calc(5.2vw / var(--z)),96px);align-items:stretch;margin-bottom:clamp(28px,calc(3vw / var(--z)),44px)}
.site-hq-head > .site{display:flex;flex-direction:column;align-items:flex-start}
.site-hq-head > .site > .site-a{margin-bottom:28px}
.site-hq-head > .site > .tlink{margin-top:auto}
.site-hq .site-t{font-size:clamp(30px,calc(3.4vw / var(--z)),48px);letter-spacing:-.035em;line-height:1.15}
.site-hq-info{padding-top:24px;border-top:1px solid var(--line2)}
.site-hq-info .kv{border-top:0}
.site-hq-info .kv > div:first-child{padding-top:0}
.site-hq + .split{margin-top:clamp(72px,calc(8vw / var(--z)),128px)}

/* 수원 · 구미: 임대 사무소 사진이 본사 사진보다 커 보이지 않도록 사진 칸을 5로 줄임.
   태블릿(641~959px)에서도 2단을 유지해 4:5 사진이 화면 가득 커지지 않게 함 */
@media (min-width:641px){
  .page-company .split.rev.sites{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,calc(5.2vw / var(--z)),96px)}
}

/* 해외 법인: 베트남 · 중국 두 칸, 나라마다 사진 4장(2×2). 실내 형광등·흰 벽이 튀지 않게 조금 더 눌러 줌 */
.abroad2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,calc(5.2vw / var(--z)),96px);margin-top:clamp(72px,calc(8vw / var(--z)),128px)}
.ab-col > .site{margin-bottom:clamp(24px,calc(2.4vw / var(--z)),32px)}
.page-company .ab-g{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,calc(13.5vw / var(--z)),220px)}
.page-company .ab-g > figure{grid-column:span 1}
.page-company .sites img,.page-company .abroad2 img{filter:saturate(.42) brightness(.72) contrast(1.1)}
/* 거점 지도 아래 간격 (그 아래 평택 본사) */
.page-company #locations .gmap{margin-bottom:clamp(72px,calc(8vw / var(--z)),128px)}
/* 수원 사진: 흰 하늘이 페이지에서 가장 밝은 면이 되지 않도록 메인 .hq 처럼 위쪽을 눌러 줌 */
.page-company .split.rev.sites > .media::before{content:"";position:absolute;inset:0 0 auto;height:42%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,13,15,.6),rgba(12,13,15,0))}

@media (max-width:1023px){
  .cert li{padding:26px 20px 6px 0}
  .cert li + li{padding-left:20px}
  .cert strong small{font-size:.24em}
}
@media (max-width:959px){
  .site-hq-head{grid-template-columns:minmax(0,1fr);gap:28px}
  /* 해외 법인: 나라별로 한 줄씩 (베트남 글 → 사진 → 중국 글 → 사진) */
  .abroad2{grid-template-columns:minmax(0,1fr);gap:64px}
  .page-company .ab-g{grid-auto-rows:clamp(150px,calc(26vw / var(--z)),240px)}
}
@media (max-width:640px){
  /* 머리: 사진 속 간판이 위치 표시와 겹치지 않도록 오른쪽 유리 타워 쪽만 남김 */
  .page-company .phero-img img{object-position:100% 50%}
  .page-company .phero::before{background:linear-gradient(180deg,rgba(12,13,15,.6) 0%,rgba(12,13,15,.3) 22%,rgba(12,13,15,.55) 46%,rgba(12,13,15,.88) 74%,var(--bg) 100%)}
  .gr-facts{margin-top:56px}
  .his-side .his-y{font-size:56px}
  /* 인증: 한 줄에 하나씩 */
  .cert{grid-template-columns:minmax(0,1fr)}
  .cert li,.cert li + li{display:grid;grid-template-columns:minmax(0,1fr);padding:22px 0 24px;border-left:0}
  .cert li + li{border-top:1px solid var(--line)}
  .cert strong{font-size:56px}
  .cert strong small{font-size:.26em}
  .cert h3{margin-top:16px}
  .site-t{font-size:24px}
  .site-hq .site-t{font-size:32px}
  .site + .site,.split-txt > .site + .site{margin-top:28px}
  /* 공통 모바일 사진 배열(첫 장만 넓게)을 쓰지 않고 2×2 정사각 유지 */
  .page-company .ab-g{grid-auto-rows:auto}
  .page-company .ab-g > figure:nth-child(n){grid-column:span 1 !important;aspect-ratio:1}
  .abroad2{gap:56px}
}

/* ===== 영문판(.lang-en) 조정 — 한국어 페이지에는 걸리지 않음 ===== */
/* 끝맺음 띠 제목: 둘째 문장(Start with your process conditions.)이 한 줄에 들어가게 폭을 넓힘 */
.lang-en .cta h2{max-width:15em}
/* 머리 설명: 영문은 글자 수가 많아 같은 줄 수(두 줄)가 되도록 폭을 넓힘 → 위치 표시가 한국어판과 같은 높이에 옴 */
.lang-en .phero-row p{max-width:44em}
/* 연혁 연대: 영문은 '2020s'를 한 단어로 크게 씀 (한국어 '년대'처럼 작게 떼면 아래첨자처럼 보임) */
.lang-en .tl-y{letter-spacing:-.04em}
/* 주소 · 설명: 마지막 줄에 한 단어만 남지 않게 */
.lang-en .site-a,.lang-en .kv dd{text-wrap:pretty}
/* 평택 본사 이름: 1500px 이상(이름 칸 480px쯤, 글자 48px로 489px)과 360px 이하에서는 한 줄에 못 들어가 'office'만 내려가므로,
   두 줄이 될 때 'Pyeongtaek / head office'로 고르게 나눔 (한 줄에 들어가는 폭은 그대로) */
.lang-en .site-hq .site-t{text-wrap:balance}
/* 연혁 날짜: 영문 'Aug 2026'이 두 줄로 갈라지지 않게 (640px 이하는 날짜 칸이 64px라 조금 넓힘) */
.lang-en .tl-m{white-space:nowrap}
@media (max-width:640px){
  .lang-en .tl-items li{grid-template-columns:70px minmax(0,1fr)}
}
/* 339px 이하: 연혁 항목의 묶음 '(Seotan-myeon, Pyeongtaek)'(210px)이 항목 칸(320px에서 198px)보다 넓어 오른쪽 여백으로 나가므로 묶음을 풂 */
@media (max-width:339px){ .lang-en .tl-items .nw{white-space:normal} }
/* 숫자 줄: 한국어판처럼 가는 숫자 옆에 작은 영문 단위(+ years, countries, sites, customers)를 붙임.
   1024px 부근에서 'customers'가 숫자 밑으로 떨어지지 않게 한 줄로 묶고, 설명은 마지막 줄에 한 단어만 남지 않게 고르게 나눔 */
.lang-en .fact strong{white-space:nowrap}
.lang-en .fact p{text-wrap:balance}
/* 넷째 칸 '20 customers'는 116px 글자에서 293px라 칸(284px)을 9px 넘으므로(1610px 폭부터) 네 숫자를 108px에서 멈춤 — 1543px 이하는 그대로.
   359px 이하는 2칸의 한 칸(320px에서 140px)에 들어가게 화면 폭에 맞춰 줄임 (360px부터 56px 그대로) */
.lang-en .gr-facts .fact strong{font-size:clamp(56px,calc(7vw / var(--z)),108px)}
@media (max-width:359px){ .lang-en .gr-facts .fact strong{font-size:calc(14.5vw / var(--z))} }