/* 제품(products.html) 전용 스타일 — 공통 d3.css 위에 덧붙임 */

/* 머리 사진 톤 · 섹션 번호(.secno) · 출처 주석(.src) · 숫자 한 칸(.facts.c1)은 공통 d3.css */

/* NEW 표시 (메인 .step-label em 과 같음) */
.label em.new{font-style:normal;font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--accent)}

/* 섹션 안 보조 문단은 리드보다 한 단계 낮게 (리드보다 밝아 튀지 않게) */
.split-txt > .prose{color:var(--mute);font-size:16px;line-height:1.8}

/* ===== 01 전자용 액상실리콘 ===== */
/* 머리 바로 아래 첫 섹션: 위 여백을 줄이고 글을 사진 윗선에 맞춰, 첫 화면에 번호와 제목이 들어오게 */
#liquid{padding-top:clamp(56px,calc(5vw / var(--z)),80px)}
#liquid > .wrap > .split{align-items:start}

/* 분야 다섯 줄: 메인 제품군 목록(.plist/.prow)의 결을 따르되 번호 없이, 한 단계 작게 (아래 '대표 품번' 제목보다 작음) */
.fields{margin-top:clamp(56px,calc(6vw / var(--z)),96px)}
.fields .prow{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 48px;padding:16px 0}
.fields .prow-name{font-size:clamp(19px,calc(1.5vw / var(--z)),22px)}
.fields .prow-desc{max-width:34em}

/* 대표 품번 머리 */
/* 링크(?f=…#grades) · '대표 품번 보기'로 도착할 때 막대 아래로 띄움: 등장 효과(.rv)로 18px 내려가 있던 제목이 올라오면서 막대 밑에 들어가지 않게 (news.css .nlist li 와 같은 값) */
#grades{margin-top:clamp(48px,calc(5vw / var(--z)),80px);scroll-margin-top:28px}
.subhead .sub-en{margin-left:10px;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--mute)}
.subhead p{max-width:40em}

/* 대표 품번 표: 'TDS 요청'이 품번보다 튀지 않게 한 단계 낮추고, 줄에 마우스를 올리거나 포커스하면 밝힘 */
.ftable .tbl-go{color:var(--fg3);font-weight:500;border-bottom-color:var(--line)}
.ftable tr:hover .tbl-go,.ftable .tbl-go:focus-visible{color:var(--fg);border-bottom-color:var(--accent)}

/* 표 아래 작은 주석 */
.tnote{margin-top:22px;font-size:13.5px;line-height:1.7;color:var(--mute);max-width:62em}

/* ===== 02 실리콘 점착제 PSA ===== */
/* 용도별 묶음: 메인 고객사 격자(.clist)를 3칸으로 */
.clist.gset{grid-template-columns:repeat(3,minmax(0,1fr))}
.gset a{min-height:104px;align-items:flex-end}
.gname{display:block}
.gname small{display:block;margin-bottom:8px;font-size:12px;color:var(--mute)}
.gset .arw{color:var(--mute);margin-bottom:3px;transition:transform .35s var(--ease),color .25s}
.gset a:hover .arw,.gset a:focus-visible .arw{color:var(--accent);transform:translateX(4px)}

/* ===== 03 변압기용 절연유: 사진이 글 칸 높이만큼 장면을 채움 (위아래 빈 어둠 없이) ===== */
#fluid .split{align-items:stretch}
#fluid .split-media{display:flex}
#fluid .split-media img{height:100%;aspect-ratio:auto;min-height:520px;object-position:30% 50%}
/* 2단 배치에서는 사진을 칸에 띄워 채움 → 칸 높이는 글이 정함. 그대로 두면 아주 넓은 화면에서 사진 원본 비율이 글보다 높아져 섹션을 끌어올림 */
@media (min-width:960px){
  #fluid .split-media{min-height:520px}
  #fluid .split-media img{position:absolute;inset:0;min-height:0}
}

/* ===== 04 경화 장비 표 ===== */
/* 행 제목만 작게 (묶음 머리는 공통 크기를 따라 액상 표와 같음) */
.tbl.cure tbody tr:not(.grp) > th{font-size:16px}
/* 모델명·사양은 한 줄씩 (모델명 중간에서 끊기지 않게) */
.tbl.cure .mdl span,.tbl.cure .spec span{display:block;white-space:nowrap}
.tbl.cure .mdl span{color:var(--fg);font-weight:500;letter-spacing:.01em}
.tbl.cure .spec span + span{color:var(--mute)}
@media (min-width:1024px){
  .tbl.cure td.wl{white-space:nowrap}
}

/* ===== 반응형 ===== */
@media (max-width:1023px){
  .clist.gset{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 분야 줄: 이름 위 · 설명 아래 · 화살표 오른쪽 */
  .fields .prow{grid-template-columns:minmax(0,1fr) 48px}
  .fields .prow-name{grid-column:1;grid-row:1}
  .fields .prow-desc{grid-column:1;grid-row:2}
  .fields .prow-go{grid-column:2;grid-row:1 / span 2}

  /* 경화 장비 표: 태블릿부터 카드형 (공통 767px 카드 규칙과 같은 꼴을 이 표에만 넓혀 적용) */
  .tbl.cure thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl.cure colgroup{display:none}
  .tbl.cure,.tbl.cure tbody,.tbl.cure tr,.tbl.cure td,.tbl.cure tbody th{display:block}
  .tbl.cure tbody tr:not(.grp){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:18px 0 16px;border-bottom:1px solid var(--line)}
  .tbl.cure tbody tr:not(.grp) > *{grid-column:1 / -1;padding:3px 0;border:0;box-shadow:none !important;background:none !important}
  .tbl.cure tbody tr:not(.grp) > th{grid-column:1;margin-bottom:8px;font-size:17px}
  .tbl.cure td[data-label]{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;font-size:15px}
  .tbl.cure td[data-label]::before{content:attr(data-label);font-size:13px;font-weight:500;color:var(--mute);padding-top:1px}
  .tbl.cure td.mdl > span,.tbl.cure td.spec > span{grid-column:2}
  .tbl.cure td.mdl,.tbl.cure td.spec{row-gap:2px}
  .tbl.cure tbody tr:not(.grp) > td.go{grid-column:2;grid-row:1;align-self:start;padding-top:3px}
  .tbl.cure tr.grp th{padding:40px 0 12px}
  .tbl.cure tbody:first-of-type tr.grp th{padding-top:24px}
}
@media (max-width:959px){
  #fluid .split-media img{height:auto;min-height:0;aspect-ratio:4/3}
}
@media (max-width:767px){
  /* 대표 품번 카드: 값이 없는 줄은 숨기고 카드 간격을 조임 */
  .ftable .tbl td[data-label]:empty{display:none}
  .ftable .tbl tbody tr:not(.grp){padding:14px 0 12px}
  .ftable .tbl td{padding:2px 0}
  /* 카드가 길어 표를 내려가도 분야 단추가 막대 아래에 붙어 따라옴 (모바일은 표 머리글이 숨겨져 겹치지 않음) */
  .ftable .filters{position:sticky;top:var(--stick);z-index:6;background:var(--bg);margin-top:0}
}
/* 낮은 가로 화면(d3.css '낮은 화면'과 같은 520px 기준)과 마우스를 쓰는 화면(단추가 여러 줄로 접힘)에서는 분야 단추를 붙이지 않음 — 붙으면 머리글과 함께 화면을 거의 다 가림 */
@media (max-height:520px) and (orientation:landscape), (max-width:767px) and (hover:hover) and (pointer:fine){
  .ftable .filters{position:static}
}
@media (max-width:640px){
  .fields{margin-top:48px}
  .fields .prow{grid-template-columns:minmax(0,1fr) 44px;padding:18px 0}
  .fields .prow-name{grid-row:1}
  .fields .prow-desc{grid-row:2;margin-top:2px}
  .fields .prow-go{grid-column:2;grid-row:1 / span 2;align-self:center}
  #grades{margin-top:48px}
  .gset a{min-height:84px}
  .tnote{font-size:13px}
}

/* ===== 영문판(.lang-en) 조정 ===== */
/* 머리 제목: 영어가 길어 96px이면 세 줄이 되어 위치 표시가 머리글 밑까지 올라감 → 한 단계 줄여 한국어처럼 두 줄 */
.lang-en .phero h1{font-size:clamp(40px,calc(5.5vw / var(--z)),82px)}
/* 389px 이하: 묶어 둔 둘째 줄(to curing systems —)이 40px 글자로는 348px라 오른쪽 여백을 넘어 줄표가 잘리므로(360px) 화면 폭에 맞춰 줄임 — 390px부터 40px 그대로 */
@media (max-width:389px){ .lang-en .phero h1{font-size:min(40px,calc(9.8vw / var(--z)))} }
/* PSA 용도별 묶음: 영어 이름이 두 줄이 되면 마지막 단어 하나만 내려가지 않게 고르게 나눔 */
.lang-en .gset .gname{text-wrap:balance}
/* 휴대폰: 영어 묶음 이름이 길어 두 칸이면 3~4줄로 쪼개지므로 한 칸 목록으로 */
@media (max-width:640px){
  .lang-en .clist.gset{grid-template-columns:minmax(0,1fr)}
  .lang-en .gset a{min-height:76px}
}
/* PSA 용도별 묶음(3칸): 영어 이름은 두 줄·한 줄이 섞여 번호 높이가 어긋남 → 번호는 칸 위에 붙이고 이름은 아래에 맞춤 (화살표 위치는 그대로) */
.lang-en .gset .gname{align-self:stretch;display:flex;flex-direction:column}
.lang-en .gset .gname small{margin-bottom:auto;padding-bottom:8px}
/* 휴대폰: 절연유 물성의 'Flash · fire point'가 92px 이름 칸에서 두 줄로 접히므로 이 목록만 이름 칸을 넓힘 (값 '300 °C minimum · above 350 °C'는 한 줄 유지) */
@media (max-width:640px){
  .lang-en #fluid .kv > div{grid-template-columns:112px minmax(0,1fr)}
}
/* 1024~1099px: 영문 거르기 단추 6개(All · Adhesives & sealants … Thermal management)가 칸보다 길어 마지막 단추가 가려지므로 간격·글자를 조금 줄여 한 줄에 둠
   (1023px 이하는 한국어 제품 PSA · 기술자료처럼 가로로 밀어 보는 띠) */
@media (min-width:1024px) and (max-width:1099px){
  .lang-en .filters{gap:0 22px}
  .lang-en .filters button{font-size:15px}
}
/* 문의 띠 제목: 영문 홈 · 회사소개와 같은 두 줄(Not sure which silicone fits? / Start with your process conditions.)이 되게 폭을 넓힘 */
.lang-en .cta h2{max-width:15em}

/* ===== 04 도포 · 경화 설비 (10-22): 제안 범위 네 칸 + 진행 순서 다섯 단계 ===== */
.eq-scope{margin-bottom:clamp(28px,calc(3vw / var(--z)),44px)}
.eq-flow{list-style:none;margin:0 0 clamp(56px,calc(6vw / var(--z)),88px);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.eq-flow li{position:relative;display:flex;align-items:baseline;gap:10px;padding:18px 20px 18px 0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.eq-flow li + li{padding-left:20px;border-left:1px solid var(--line)}
.eq-flow .tn{font-size:12.5px;font-weight:400;color:var(--mute)}
@media (max-width:899px){
  .eq-flow{grid-template-columns:minmax(0,1fr)}
  .eq-flow li{padding:14px 0}
  .eq-flow li + li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}
.eq-scope .notice p{color:var(--fg2)}   /* 설명 네 칸은 본문이라 기본 안내 상자(흐린 글씨)보다 진하게 */