/* 메인(index.html) 전용 — 지금은 영문판(.lang-en) 조정만 있음. 한국어 메인은 이 파일의 영향을 받지 않음 */

/* 영문 큰 제목은 짧은 카피(Where parts meet, / silicone at work.)로 바꿔 한국어판과 같은 크기(d3.css 7.3vw)를 그대로 씀 */

/* 첫 화면 설명: 영문은 글자 수가 많아 33em 폭에서 세 줄이 되므로, 단추 옆 남는 폭까지 넓혀 한국어판처럼 두 줄로 */
.lang-en .hero-row p{max-width:44em}

/* '실리콘이 하는 일' 머리말: 첫 문장(Liquid silicones, PSAs, …)이 한 줄에 들어가게 27em 제한을 풂.
   데스크톱에서는 글 칸(62fr − 오른쪽 여백)이 폭을 정하므로 한국어판처럼 두 줄이 됨 */
@media (min-width:960px){
  .lang-en .story-lead{max-width:none}
}

/* 문의 띠 제목: 둘째 문장(Start with your process conditions.)이 한 줄에 들어가게 폭을 넓힘 */
.lang-en .cta h2{max-width:15em}

/* ISO 줄: 영문 'Occupational health & safety'가 길어 1379px 이하에서는 네 칸에 다 들어가지 않으므로
   한국어판 1023px 이하와 같은 2×2 배치를 조금 더 넓은 화면까지 씀. 641px 이상에서는 이름이 줄 끝에서 갈라지지 않게 함 */
@media (min-width:641px){
  .lang-en .iso span{white-space:nowrap}
}
@media (min-width:641px) and (max-width:1379px){
  .lang-en .iso{grid-template-columns:1fr 1fr}
  .lang-en .iso > *:nth-child(3){padding-left:0;border-left:0}
  .lang-en .iso > *:nth-child(n+3){border-top:1px solid var(--line)}
}

/* 거점 줄: 'Pyeongtaek head office'가 한 줄에 들어가게 이름 칸을 넓힘 (640px 이하는 원래대로 위아래 쌓기) */
@media (min-width:641px){
  .lang-en .cty dd.rows p{grid-template-columns:184px minmax(0,1fr)}
}

/* 숫자 줄: 한국어판처럼 가는 숫자 옆에 작은 영문 단위(product lines, products, countries)를 붙임.
   단위가 숫자 밑으로 떨어지지 않게 한 줄로 묶고, 설명은 마지막 줄에 한 단어만 남지 않게 고르게 나눔 */
.lang-en .num strong{white-space:nowrap}
.lang-en .num p{text-wrap:balance}
/* 339px 이하: 단위를 묶은 두 칸이 틀(320px에서 280px)보다 넓어져 오른쪽 칸('4 product lines')과 그 아래 선이 여백으로 나가므로 숫자를 화면 폭에 맞춰 줄임 */
@media (max-width:339px){ .lang-en .num strong{font-size:calc(14.5vw / var(--z))} }