/* 실리콘 점착제 PSA 페이지 전용 (공통 d3.css 다음에 읽힘) */

/* 머리 사진: 밝은 하늘색 배경의 테이프 사진을 흑백으로 깊게 눌러 메인 히어로와 같은 검정 깊이로 맞춤
   (.phero.mood 규칙보다 우선하도록 선택자를 맞춤) */
.page-product-psa .phero.mood .phero-img img{object-position:62% 58%;filter:grayscale(1) brightness(.34) contrast(1.6)}

/* 위치 표시 마지막 칸의 NEW: 메인 제품 목록의 'DOWSIL™ NEW'와 같은 표기 */
.page-product-psa .crumb em{font-style:normal;margin-left:4px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--accent)}

/* 아래로 이동하는 단추의 화살표 */
.arw.dn{transform:rotate(90deg)}
.btn:hover .arw.dn,.btn-solid:hover .arw.dn{transform:rotate(90deg) translateX(3px)}

/* ===== 개요: 글 칸(라벨 · 제목 · 본문 · 숫자) + 세로 사진 ===== */
.psa-about .split-txt > .psa-facts{margin-top:clamp(40px,calc(4vw / var(--z)),56px)}
.psa-about .split-txt > .tlink{margin-top:clamp(32px,calc(3vw / var(--z)),44px)}
.psa-facts .fact strong{font-size:clamp(56px,calc(6vw / var(--z)),96px)}
/* 메인 '붙이다' 장면과 같은 사진(u118): 세로로 세워 회색 바탕 면적을 줄이고, 어두운 섹션에 맞춰 한 단계 낮춤 */
#about .media img{aspect-ratio:4/5;object-position:50% 34%;filter:brightness(.58) contrast(1.14) saturate(.85)}

/* ===== 제품표 ===== */
/* 표 위 기준 안내는 공통 .notice.bare (상자 없이 보라 점 + 제목 + 한 줄) */

/* 특징 칸의 온도 값은 색만 본문보다 밝게 (품번 머리글 옆 브랜드는 공통 .th-sub) */
.psa-tbl .t{color:var(--fg)}

/* 묶음 머리: 제목 줄 + 설명 줄(tr.grp-sub). 선은 설명 줄 아래에 한 번만 */
.psa-tbl tr.grp th{padding-bottom:6px;border-bottom:0}
.psa-tbl tr.grp-sub td{padding:0 0 16px;border-bottom:1px solid var(--line2);font-size:14.5px;line-height:1.6;color:var(--mute)}

/* 문의 링크는 품번 첫 줄 높이에 맞춤 (용도가 두 줄로 꺾여도 가운데로 내려가지 않게) */
.psa-tbl td.go{vertical-align:top;padding-top:20px}
@media (min-width:768px){
  .psa-tbl tbody th{white-space:nowrap}
}
/* 태블릿 폭: 칸 사이를 좁히고 글자를 한 단계 줄여 줄바꿈을 줄임 */
@media (min-width:768px) and (max-width:1023px){
  .psa-tbl td,.psa-tbl tbody th{padding-right:16px;font-size:14.5px}
  .psa-tbl tbody th{font-size:15.5px}
  .psa-tbl td.go{padding-right:0}
}
.tbl-note{margin-top:28px;max-width:52em;font-size:13.5px;line-height:1.7;color:var(--mute)}

/* ===== 선정 상담 ===== */
#consult .h3{margin-top:22px}
/* 표 다음이라 메인 본사 사진(saturate .72 · brightness .86)보다 한 단계 낮게 */
#consult .media img{aspect-ratio:3/2;object-position:42% 62%;filter:saturate(.5) brightness(.64) contrast(1.1)}
#consult .split{align-items:start}
#consult .split-media{margin-top:46px}

/* ===== 반응형 ===== */
@media (max-width:959px){
  #about .media img{aspect-ratio:4/3;object-position:50% 38%}
  #consult .split-media{margin-top:0}
}
@media (max-width:767px){
  /* 카드형 표: 묶음 제목 줄을 바로가기 막대 아래에 고정해 지금 어느 묶음인지 보이게 함
     (tbody가 block이라 th가 아닌 tr.grp 자체에 sticky를 줌) */
  .psa-tbl tr.grp:not(.grp-sub){position:sticky;top:var(--stick);z-index:4;background:var(--tbl-bg);border-bottom:1px solid var(--line2)}
  .psa-tbl tr.grp th,.psa-tbl tbody:first-of-type tr.grp th,.psa-tbl thead + tbody tr.grp th{padding:14px 0 12px;border-bottom:0}
  .psa-tbl tr.grp-sub td{padding:12px 0 6px;border-bottom:0;font-size:14px}
  .psa-tbl tbody + tbody{margin-top:28px}
  .psa-tbl td[data-label]{grid-template-columns:72px minmax(0,1fr)}
  .psa-tbl tbody tr:not(.grp){padding:16px 0 14px}
  .psa-tbl td.go{padding-top:3px}
}
/* 낮은 가로 화면(d3.css '낮은 화면'과 같은 520px 기준): 묶음 제목 줄을 붙이지 않음 — 머리글 아래에 겹쳐 붙으면 표가 한두 줄만 보임 */
@media (max-height:520px) and (orientation:landscape){
  .psa-tbl tr.grp:not(.grp-sub){position:static}
}
@media (max-width:640px){
  .phero-side .btn .arw.dn{display:none}
  .page-product-psa .phero.mood .phero-img img{object-position:66% 50%}
}

/* ===== 영문판(.lang-en) 조정 — 한국어 페이지에는 걸리지 않음 ===== */
/* 묶음 머리의 개수(예: 19 products)가 숫자와 단위로 갈려 두 줄이 되지 않게 */
.lang-en .psa-tbl tr.grp th small{white-space:nowrap}
@media (max-width:767px){
  /* 카드형 표의 칸 이름(Cure · solvent, Applications)이 한국어보다 길어 이름 칸을 넓힘 */
  .lang-en .psa-tbl td[data-label]{grid-template-columns:92px minmax(0,1fr)}
}
/* 묶음 거르기 단추: 영문 이름이 길어 1024에서 마지막 단추(Additives 4)가 17px 밀려나므로 간격만 32 → 26px */
@media (min-width:768px) and (max-width:1199px){
  .lang-en .filters{gap:0 26px}
}
@media (max-width:767px){
  /* 카드형 표의 묶음 머리: 영문 묶음 이름이 길어 개수가 들여쓴 채 다음 줄로 밀리므로, 모든 묶음에서 개수를 이름 아래 한 줄로 */
  .lang-en .psa-tbl tr.grp th small{display:block;margin:4px 0 0}
}
/* 문의 띠 제목: 영문 홈 · 회사소개와 같은 두 줄(Not sure which silicone fits? / Start with your process conditions.)이 되게 폭을 넓힘 */
.lang-en .cta h2{max-width:15em}
/* 개요 숫자 줄: 단위(products · groups)를 숫자 옆에 한 줄로 묶음 — 묶지 않으면 1580px 이상에서 '57 product / s', 353px 이하에서 'produ / cts'로 낱말이 갈림
   (칸은 240px에서 멈추는데 숫자는 1600px 폭까지 커짐). 359px 이하는 묶은 채 칸에 들어가게 화면 폭에 맞춰 줄임 (360px부터 56px 그대로) */
.lang-en .psa-facts .fact strong{white-space:nowrap}
@media (max-width:359px){ .lang-en .psa-facts .fact strong{font-size:min(56px,calc(15.5vw / var(--z)))} }
/* 768~899px 표(태블릿 세로): 품번 칸이 가장 긴 이름('290C Curing Agent' 등 7개)에 맞춰 넓어지면서 용도 칸이 132px로 눌려 한 칸이 4~6줄이 되므로,
   긴 품명만 두 줄로 접고 칸 폭을 다시 나눠 용도 칸을 넓힘 (!important 는 col 의 style 폭을 이기려는 것. 900px 이상 · 767px 이하 카드형은 그대로) */
@media (min-width:768px) and (max-width:899px){
  .lang-en .psa-tbl tbody th{white-space:normal}
  .lang-en .psa-tbl thead .th-sub{display:block;margin:2px 0 0}
  .lang-en .psa-tbl col:nth-child(1){width:15% !important}
  .lang-en .psa-tbl col:nth-child(2){width:19% !important}
  .lang-en .psa-tbl col:nth-child(3){width:27% !important}
  .lang-en .psa-tbl col:nth-child(5){width:84px !important}
}