/* 기술자료 페이지 전용 (공통 d3.css 다음에 읽힘) */

/* 머리 사진: 반도체 패턴(u021)을 흑백으로 눌러 메인 히어로와 같은 검정 깊이로 맞춤.
   무늬가 고르고 글자가 없어 제목 뒤가 조용함 */
.page-library .phero.mood .phero-img img{object-position:50% 50%;filter:grayscale(1) brightness(.4) contrast(1.15)}

/* 자료 목록 위 안내는 공통 .notice.bare, 품번 머리글 옆 브랜드는 공통 .th-sub */

/* ===== 자료 표: 품번 | 용도 | 자료 요청, 행을 낮게 해 빨리 훑어 찾게 함 ===== */
.lib-tbl .c-no{width:22%}
.lib-tbl .c-go{width:236px}
.lib-tbl td,.lib-tbl tbody th{padding:12px 24px 12px 0}
.lib-tbl td:last-child{padding-right:0}
.lib-go{display:inline-flex;justify-content:flex-end;gap:20px}
/* 요청 링크는 품번 첫 줄 높이에 맞춤 */
.lib-tbl td.go{vertical-align:top;padding-top:14px}
@media (min-width:768px){
  .lib-tbl tbody th{white-space:nowrap}
}

/* ===== 직접 요청 아래 안내 세 칸: 상자 대신 메인 .cty / .iso처럼 위쪽 1px 선만 ===== */
.lib-notes{margin-top:clamp(56px,calc(6vw / var(--z)),96px);gap:0 40px}
.lib-notes .notice{border:0;border-top:1px solid var(--line2);background:none;padding:22px 0 0}
#direct .h3{margin-top:22px}

/* 머리 사진 위 헤더 글자가 잘 보이도록 위쪽 그늘을 조금 더 짙게 */
.page-library .phero::before{background:linear-gradient(180deg,rgba(12,13,15,.8) 0%,rgba(12,13,15,.12) 24%,rgba(12,13,15,0) 38%,rgba(12,13,15,.78) 78%,var(--bg) 100%),linear-gradient(90deg,rgba(12,13,15,.66) 0%,rgba(12,13,15,0) 64%)}

@media (max-width:767px){
  /* 카드형 표: 묶음 제목 줄을 헤더 아래에 고정 (tbody가 block이라 tr.grp 자체에 sticky) */
  .lib-tbl tr.grp{position:sticky;top:var(--stick);z-index:4;background:var(--tbl-bg);border-bottom:1px solid var(--line2)}
  .lib-tbl tr.grp th,.lib-tbl tbody:first-of-type tr.grp th,.lib-tbl thead + tbody tr.grp th{padding:14px 0 12px;border-bottom:0}
  .lib-tbl tbody + tbody{margin-top:28px}
  /* 한 장을 낮게: 첫 줄 = 품번 + 요청 링크 두 개, 둘째 줄 = 용도 (칸 이름 없이 회색 글자) */
  .lib-tbl tbody tr:not(.grp){padding:14px 0 13px}
  .lib-tbl td,.lib-tbl tbody th{padding:0}
  .lib-tbl tbody tr:not(.grp) > th{margin-bottom:4px}
  .lib-tbl td[data-label]{display:block;font-size:14.5px;line-height:1.6;color:var(--mute)}
  .lib-tbl td[data-label]::before{content:none}
  .lib-tbl tbody tr:not(.grp) > td.go{grid-column:2;grid-row:1;align-self:start;padding-top:4px;text-align:right}
  .lib-go{gap:16px}
}
/* 낮은 가로 화면(d3.css '낮은 화면'과 같은 520px 기준): 묶음 제목 줄을 붙이지 않음 — 머리글 아래에 겹쳐 붙으면 표가 한두 줄만 보임 */
@media (max-height:520px) and (orientation:landscape){
  .lib-tbl tr.grp{position:static}
}
@media (max-width:640px){
  .page-library .phero::before{background:linear-gradient(180deg,rgba(12,13,15,.86) 0%,rgba(12,13,15,.3) 22%,rgba(12,13,15,.42) 48%,rgba(12,13,15,.88) 76%,var(--bg) 100%)}
  .lib-notes .notice + .notice{margin-top:24px}
}
@media (max-width:640px){
  /* 직접 요청 단추 두 개: 좁은 화면에서는 같은 폭으로 쌓음 */
  #direct .acts .btn{flex:1 1 100%;justify-content:center}
}

/* ===== 영문판(.lang-en) 조정 — 한국어 페이지에는 걸리지 않음 ===== */
/* 묶음 머리의 개수(예: 9 products)가 숫자와 단위로 갈려 두 줄이 되지 않게 */
.lang-en .lib-tbl tr.grp th small{white-space:nowrap}
@media (max-width:640px){
  /* 머리 단추: 영문 'Request documents'는 반 폭(390에서 글자 칸 143px)에 들어가지 않아 두 줄로 꺾이므로,
     아래 '직접 요청' 단추처럼 같은 폭으로 쌓음 */
  .lang-en.page-library .phero-side{flex-wrap:wrap}
  .lang-en.page-library .phero-side .btn{flex:1 1 100%}
}
/* 묶음 거르기 단추: 영문 이름이 길어 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 .lib-tbl tr.grp th small{display:block;margin:4px 0 0}
}
@media (max-width:640px){
  /* 요청 링크: 'Request TDS · Request MSDS'가 품번 칸을 밀어 긴 품번(288 Mica Binder 등)이 두 줄로 쪼개지므로
     좁은 화면에서는 'TDS · MSDS'만 보임 (읽어 주는 이름은 aria-label 그대로 'Request TDS for …') */
  .lang-en .lib-rq{display:none}
}
/* 10-24 제품군 확대: 브랜드(DOWSIL™·SYL-OFF™ 등)를 품번 위에 작게 */
.lib-br{display:block;font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--mute);margin-bottom:2px}