/* 산업별 솔루션(industries.html) 전용 스타일 — 공통 d3.css 위에 덧붙임 */

/* 머리 사진 톤: 밝은 청록 로봇 팔을 메인 히어로처럼 거의 무채색 · 어둡게 누름 (공통 .phero.mood 규칙보다 우선) */
.page-industries .phero.mood .phero-img img{filter:saturate(.35) brightness(.6) contrast(1.12)}

/* 산업 번호(.secno) · 출처 주석(.src)은 공통 d3.css (제품 페이지와 같음) */

/* 산업 섹션: 지그재그. 짝수는 왼쪽 큰 정사각 사진, 홀수(.ind-b)는 글 칸을 넓히고 오른쪽 세로 사진(4:5) */
.ind-sec .split{gap:clamp(40px,calc(5.6vw / var(--z)),104px)}
.ind-sec .split.ind-b{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ind-b .split-txt{max-width:640px}
/* 머리 바로 아래 첫 섹션: 위 여백을 줄이고 글을 사진 윗선에 맞춰, 첫 화면 아래가 비지 않게 (제품 페이지와 같음) */
#electronics{padding-top:clamp(56px,calc(5vw / var(--z)),80px)}
#electronics .split{align-items:start}
.ind-sec .split-txt .lead{max-width:26em}

/* 쓰이는 곳 → 맞는 제품 (메인 .cty 줄과 같은 결의 .kv 를 씀) */
.uses > div{grid-template-columns:132px minmax(0,1fr);padding:18px 0}
.uses dt{font-size:15px;color:var(--fg)}
.uses dd a{display:inline-flex;font-size:16.5px;font-weight:600;color:var(--fg);border-bottom:1px solid var(--line2);padding-bottom:2px;letter-spacing:-.01em}
.uses dd a:hover{border-color:var(--accent)}
.uses dd b{display:inline-block;font-size:16.5px;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.uses dd span{display:block;margin-top:6px;font-size:15px;line-height:1.65;color:var(--mute)}
/* 설명 안의 줄바꿈 막기(span.nw)가 위 설명 span 규칙(블록)을 물려받지 않게 줄 안에 둠 */
.uses dd span span{display:inline;margin:0;font-size:inherit;line-height:inherit;color:inherit}
.split-txt > .uses + .notice{margin-top:28px}
.split-txt > .notice .tn{margin-right:6px;font-weight:600;color:var(--fg)}

/* 모빌리티 사진: 먼지 낀 납축전지는 화면 밖으로, 주황 고전압 커넥터 · 인버터 쪽으로 당기고 어둡게 */
.media.mood img.ev-img{object-position:20% 80%;transform:scale(1.3);transform-origin:20% 80%;filter:saturate(.6) brightness(.66) contrast(1.15)}
/* 디스플레이 사진: 세로 원본의 아래쪽(콘솔)을 보여 화면을 작고 어둡게 — 화면 속 글자가 읽히지 않게 */
.media.mood img.disp-img{object-position:50% 100%;filter:saturate(.5) brightness(.62) contrast(1.12)}
/* 테이프 사진: 흰 바탕 사진이라 흑백 · 어둡게 · 조금 확대하고, 가장자리를 바탕색으로 눌러 다른 산업 사진 톤에 맞춤 */
.media.mood img.tape-img{filter:grayscale(1) brightness(.34) contrast(1.6);transform:scale(1.18);transform-origin:42% 58%}
.media.vig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 95% at 44% 56%,rgba(12,13,15,0) 40%,rgba(12,13,15,.8) 100%)}

/* 끝 목록: 제품 설명 대신 쓰이는 산업 (메인 목록과 겹치지 않게) */
.pd-k{display:inline-block;margin-right:14px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--mute2)}

@media (max-width:959px){
  /* 좁은 화면: 공통 .split 처럼 한 칸으로 쌓음 (사진 → 글) */
  .ind-sec .split.ind-b{grid-template-columns:minmax(0,1fr)}
  .ind-b .split-txt{max-width:none}
  .ind-sec .split-media img{aspect-ratio:4/3}
  .media.mood img.tape-img{transform:none}
  .media.mood img.ev-img{transform:scale(1.15)}
}
@media (max-width:640px){
  .page-industries .phero.mood .phero-img img{filter:saturate(.3) brightness(.48) contrast(1.12)}
  .uses > div{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0}
  .uses dt{font-size:13.5px;color:var(--mute);font-weight:500}
  .pd-k{display:block;margin:0 0 2px}
}

/* ===== 영문판(.lang-en) 조정 ===== */
/* 전시 안내의 날짜(Aug 25–27, 2026): 숫자용 넓은 자간이 영어 글자에는 벌어져 보여 조금 좁힘 */
.lang-en .split-txt > .notice .tn{letter-spacing:.02em}
/* 쓰임 줄 이름 칸: 영어 이름이 132px에서 두 줄로 접혀 넓힘 (640px 이하는 위 규칙대로 이름을 위에 쌓음) */
@media (min-width:641px){
  .lang-en .uses > div{grid-template-columns:160px minmax(0,1fr)}
  /* 글 칸이 넓은 홀수 섹션(01·03·05)은 가장 긴 이름(Process & transit protection · Rail & power transformers)도 한 줄로 */
  .lang-en .ind-b .uses > div{grid-template-columns:200px minmax(0,1fr)}
}
/* 960~1279px: 사진 옆 글 칸이 좁아 설명이 4줄로 쌓이므로 휴대폰처럼 이름을 위에 */
@media (min-width:960px) and (max-width:1279px){
  .lang-en .uses > div,.lang-en .ind-b .uses > div{grid-template-columns:minmax(0,1fr);gap:6px}
  .lang-en .uses dt{font-size:13.5px;color:var(--mute);font-weight:500}
}
/* 영어 설명·링크가 줄 끝에 한 단어만 남기지 않게 */
.lang-en .uses dd > span{text-wrap:pretty}
.lang-en .uses dd a{text-wrap:balance}
/* 문의 띠 제목: 영문 홈 · 회사소개와 같은 두 줄(Not sure which silicone fits? / Start with your process conditions.)이 되게 폭을 넓힘 */
.lang-en .cta h2{max-width:15em}