@charset "utf-8";

/* ============================================================
   제품 › 카테고리 목록 (메탈로센 · 전자재료 · 스페셜케미칼)
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  메탈로센 2048:4278

   세 카테고리 페이지가 같은 틀을 쓴다. 내용은 /data/products.json 에서 오고
   /js/product-list.js 가 그린다.

   구성
     pl-nav     메탈로센 / 전자재료 / 스페셜케미칼 페이지 이동 (탭처럼 보이지만 링크다)
     pl-chips   하위 카테고리 칩 — 누르면 그 묶음의 카드만 보인다 (시안: 한 묶음씩)
     pl-grid    제품 카드 320 × 405 · 넷씩
     pl-card    카드 전체가 링크. 비공개는 자물쇠 + 흐린 썸네일 + 안내 풍선
     pl-empty   제품이 아직 없는 묶음의 안내 한 줄

   페이지 틀(.infra-wrap) · 섹션 제목(.infra-sec__title) · 히어로는
   인프라 페이지와 같은 부품이라 /css/page-infra.css · /css/page-hero.css 를 그대로 쓴다.
   (공통 변수는 /css/style.css 에 있다 — 이 프로젝트의 common.css 자리다)

   불러오는 차례
     <link rel="stylesheet" href="../css/page-hero.css">
     <link rel="stylesheet" href="../css/page-infra.css">
     <link rel="stylesheet" href="../css/product-list.css">
   ============================================================ */

.pl-page {
  --pl-point:  #135a9c;      /* 시안 --color */
  --pl-ink:    #222;
  --pl-border: #d8d8d8;      /* 카드 테두리 */
  --pl-thumb:  #f7f8fa;      /* 썸네일 바탕 */
  --pl-rule:   #9f9f9f;      /* 칩 아래 가로선 (시안 Line 45) */
}

/* ==================== 페이지 이동 (메탈로센 / 전자재료 / 스페셜케미칼) ====================
   시안 2048:4438 — 30px, 현재 것만 코발트 굵게, 그 아래 글자 폭 밑줄. 트랙은 1400 */
.pl-nav {
  position: relative;
  display: flex;
  gap: calc(70 * var(--u));           /* 시안 글자 사이 */
  margin-top: calc(94 * var(--u));    /* 시안 히어로 아래(891) → 메뉴(985) */
  padding: 0 calc(20 * var(--u));
  border-bottom: calc(2 * var(--u)) solid var(--line-track);
}
.pl-nav__link {
  position: relative;
  flex: none;
  padding-bottom: calc(20 * var(--u));
  font-weight: 400;
  font-size: max(calc(30 * var(--u)), 15px);
  line-height: 1.36;
  letter-spacing: -.02em;
  color: var(--gray);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.pl-nav__link:hover { color: var(--ink-mid); }
.pl-nav__link[aria-current="page"] {
  font-weight: 800;
  color: var(--pl-point);
}
/* 시안 Line 46 — 글자 폭(169) 만큼, 좌우로 20 넓게 */
.pl-nav__link[aria-current="page"]::after,
.pl-nav__link:not([aria-current="page"])::after {
  content: "";
  position: absolute;
  left: calc(-20 * var(--u));
  right: calc(-20 * var(--u));
  bottom: calc(-2 * var(--u));
  height: calc(3 * var(--u));
  background: var(--pl-point);
}
.pl-nav__link:not([aria-current="page"])::after {
  background: rgba(34, 34, 34, .22);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.pl-nav__link:not([aria-current="page"]):hover::after { transform: scaleX(1); }

/* ==================== 제목 ==================== */
.pl-page .infra-sec__head { margin-top: calc(141 * var(--u)); }   /* 시안 메뉴선(1047) → 제목(1188) */

/* ==================== 하위 카테고리 칩 ====================
   시안 2048:4426 — 60 높이 알약, 0.5px 회색 테두리, 23px 옅은 글자. 고른 것은 코발트 채움 + 굵게 */
.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--u));
  margin: calc(71 * var(--u)) 0 0 calc(3 * var(--u));   /* 시안 제목(1188) → 칩(1311) = 123, 제목 상자 52 를 뺀 값 */
  padding-bottom: calc(50 * var(--u));                   /* 시안 칩 아래(1371) → 선(1422) */
  border-bottom: 1px solid var(--pl-rule);
}
.pl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(60 * var(--u));
  padding: 0 calc(49 * var(--u));
  border: 1px solid var(--gray);
  border-radius: 999px;
  background: var(--color-white);
  font: inherit;
  font-weight: 300;
  font-size: max(calc(23 * var(--u)), 13px);
  letter-spacing: -.03em;
  color: var(--gray);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.pl-chip:hover { border-color: var(--pl-point); color: var(--pl-point); }
.pl-chip[aria-selected="true"] {
  border-color: var(--pl-point);
  background: var(--pl-point);
  font-weight: 700;
  color: var(--color-white);
}
.pl-chip:focus-visible {
  outline: 2px solid var(--pl-point);
  outline-offset: 3px;
}

/* ==================== 카드 ====================
   시안 2048:4384 — 320 × 405, 테두리 #d8d8d8 라운드 20. 위 250 은 썸네일 바탕 #f7f8fa */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(40 * var(--u));
  margin-top: calc(50 * var(--u));    /* 시안 선(1422) → 카드(1472) */
}
.pl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(405 * var(--u));
  border: 1px solid var(--pl-border);
  border-radius: calc(20 * var(--u));
  background: var(--color-white);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease,
              transform .45s cubic-bezier(.22, .61, .36, 1);
}
/* 시안에서 첫 카드에 2px 코발트 테두리가 그려져 있다 — 짚었을 때의 모습으로 읽었다.
   1px 테두리 위에 안쪽 그림자로 한 겹 더 두른다 (두께가 바뀌어 칸이 흔들리지 않게) */
.pl-card:hover,
.pl-card:focus-visible,
.js .pl-card[data-reveal].is-in:hover,
.js .pl-card[data-reveal].is-in:focus-visible {
  border-color: var(--pl-point);
  box-shadow: inset 0 0 0 1px var(--pl-point), 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(19, 90, 156, .12);
  transform: translateY(calc(-6 * var(--u)));
}
.pl-card:focus-visible { outline: none; }

/* 카드는 <a> 라 안의 조각을 span 으로 짰다 — 전부 블록으로 세운다 */
.pl-card__thumb,
.pl-card__body,
.pl-card__name,
.pl-card__summary { display: block; }

.pl-card__thumb {
  position: relative;
  height: calc(250 * var(--u));
  background: var(--pl-thumb);
  overflow: hidden;
}
/* 구조식 그림 — 흰 바탕 그림을 옅은 바탕에 얹으므로 darken 으로 흰색을 지운다 (시안과 같은 방식) */
.pl-card__thumb img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 86%;                     /* 시안 276 / 320 */
  max-height: 86%;
  transform: translate(-50%, -50%);
  mix-blend-mode: darken;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1), filter .4s ease;
}
.pl-card:hover .pl-card__thumb img { transform: translate(-50%, -50%) scale(1.06); }

.pl-card__body {
  flex: 1 1 auto;
  padding: calc(36 * var(--u)) calc(38 * var(--u)) calc(32 * var(--u));   /* 시안 250 → 이름 286 · 왼쪽 299 */
}
.pl-card__name {
  margin: 0;
  font-weight: 600;
  font-size: max(calc(20 * var(--u)), 15px);
  line-height: 1.25;
  letter-spacing: -.03em;
  color: #000;
  transition: color .3s ease;
}
.pl-card:hover .pl-card__name { color: var(--pl-point); }
.pl-card__summary {
  margin: calc(9 * var(--u)) 0 0;     /* 시안 이름(2648) → 설명(2682), 줄 높이 25 */
  font-size: max(calc(15 * var(--u)), 12px);
  line-height: calc(25 * var(--u));
  letter-spacing: -.03em;
  color: var(--gray);
}
/* 한 줄씩. 칸보다 길면 말줄임 — 줄 수가 늘어 카드 높이가 흔들리지 않게 (시안도 '....' 로 끊었다) */
.pl-card__line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 오른쪽 아래 화살표 — 짚으면 오른쪽으로 조금 간다 */
.pl-card__arrow {
  position: absolute;
  right: calc(30 * var(--u));
  bottom: calc(14 * var(--u));       /* 설명 둘째 줄 아래 빈 자리(35) 안에 둔다 — 글자와 겹치지 않게 */
  width: calc(22 * var(--u));
  height: calc(10 * var(--u));
  color: var(--gray);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), color .3s ease;
}
.pl-card__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.pl-card__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.pl-card:hover .pl-card__arrow {
  color: var(--pl-point);
  transform: translateX(calc(6 * var(--u)));
}

/* ---------- 이름 옆 작은 태그 (시안 2048:3882 — 'Cr 촉매' · 'Borate 조촉매' · '중간체') ---------- */
.pl-card__head {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--u));           /* 시안 이름 끝 → 태그 */
  min-width: 0;
}
.pl-card__name { flex: none; }
.pl-card__tag {
  flex: 1 1 auto;
  min-width: 0;
  font-size: max(calc(12 * var(--u)), 11px);
  letter-spacing: -.03em;
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 비공개 제품 (시안 2048:3882 — PC-9001) ----------
   그림 자리에 자물쇠 그림 130 × 130, 2px 코발트 테두리.
   설명 줄에는 자료의 안내 문장이 온다. 자료에는 그 이상이 없다 */
.pl-card--private {
  border-color: var(--pl-point);
  box-shadow: inset 0 0 0 1px var(--pl-point);   /* 1px 테두리 + 안쪽 1px = 시안 2px */
}
.pl-card__lock-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(130 * var(--u));
  height: calc(130 * var(--u));
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
}
.pl-card--private:hover .pl-card__thumb img { transform: translate(-50%, -50%); }   /* 자물쇠는 줌 안 함 */
.pl-card--private:hover .pl-card__thumb { background: #eef2f7; }                  /* 톤만 살짝 */
.pl-card__thumb { transition: background-color .3s ease; }
/* 화면에 들어오면 자물쇠가 한 번 흔들리고 멈춘다 */
@keyframes pl-lock-shake {
  0%   { transform: translate(-50%, -50%) rotate(0); }
  20%  { transform: translate(-50%, -50%) rotate(-8deg); }
  40%  { transform: translate(-50%, -50%) rotate(6deg); }
  60%  { transform: translate(-50%, -50%) rotate(-4deg); }
  80%  { transform: translate(-50%, -50%) rotate(2deg); }
  100% { transform: translate(-50%, -50%) rotate(0); }
}
.js .pl-card--private[data-reveal].is-in .pl-card__lock-art {
  animation: pl-lock-shake .5s ease-in-out .35s 1 both;
}

/* ---------- 제품이 없는 묶음 ---------- */
.pl-empty {
  grid-column: 1 / -1;
  padding: calc(80 * var(--u)) 0;
  border: 1px dashed var(--pl-border);
  border-radius: calc(20 * var(--u));
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);
  letter-spacing: -.03em;
  color: var(--gray);
  text-align: center;
}

/* ==================== 등장 ====================
   칩을 고르면 제목 → 카드 차례로. 카드 간격 0.08s */
.js .pl-card[data-reveal] { transition-delay: calc(var(--d, 0) * .08s); }
/* 칩을 바꿀 때 — 나가는 것은 빨리, 들어오는 것은 카드 차례대로 */
.js .pl-grid.is-leaving .pl-card { opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .pl-nav {
    gap: calc(20 * var(--u));
    margin-top: var(--sp-block);        /* 히어로 → 메뉴 */
    padding: 0 calc(4 * var(--u));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pl-nav::-webkit-scrollbar { display: none; }
  .pl-nav__link { padding-bottom: calc(12 * var(--u)); font-size: max(calc(16 * var(--u)), 15px); }
  .pl-nav__link[aria-current="page"]::after,
  .pl-nav__link:not([aria-current="page"])::after { left: calc(-4 * var(--u)); right: calc(-4 * var(--u)); }
  .pl-nav__link:not([aria-current="page"]):hover::after { transform: scaleX(0); }

  .pl-page .infra-sec__head { margin-top: var(--sp-block); }   /* 메뉴 → 제목 */

  /* 칩은 가로로 넘긴다 — 좌우 여백까지 밀려 나가 끝이 보이게 */
  .pl-chips {
    flex-wrap: nowrap;
    gap: calc(8 * var(--u));
    margin: var(--sp-head) calc(-16 * var(--u)) 0;   /* 제목 → 칩 */
    padding: 0 calc(16 * var(--u));                  /* 칩 → 내용 간격은 .pl-grid / .po-group 이 잡는다 */
    border-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pl-chips::-webkit-scrollbar { display: none; }
  .pl-chip {
    flex: none;
    min-height: calc(36 * var(--u));
    padding: 0 calc(16 * var(--u));
    font-size: max(calc(13 * var(--u)), 13px);
  }
  .pl-chip:hover { border-color: var(--gray); color: var(--gray); }
  .pl-chip[aria-selected="true"]:hover { border-color: var(--pl-point); color: var(--color-white); }

  /* 시안에 모바일 안이 없어 두 칸으로 — 320 카드 비율을 유지한다 */
  .pl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(12 * var(--u));
    margin-top: var(--sp-block);        /* 칩 → 카드 */
  }
  .pl-card { min-height: 0; border-radius: calc(12 * var(--u)); }
  .pl-card__thumb { height: calc(136 * var(--u)); }   /* 카드 폭(약 170) × 250/320. aspect-ratio 만 쓰면 iOS 사파리에서 그림 max-height 가 풀려 길게 늘어난다 (2026-09-20) */
  .pl-card__thumb img { width: auto; height: auto; }
  .pl-card__body { padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(30 * var(--u)); }
  .pl-card__name { font-size: max(calc(14 * var(--u)), 14px); }
  .pl-card__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-top: calc(4 * var(--u));
    font-size: max(calc(11 * var(--u)), 11px);
    line-height: 1.5;
    overflow: hidden;
    word-break: break-word;
  }
  /* 좁은 칸에서는 두 줄을 이어 붙여 자연스럽게 감싼다 (최대 세 줄) */
  .pl-card__line { display: inline; white-space: normal; overflow: visible; }
  .pl-card__line + .pl-card__line::before { content: " "; }
  .pl-card__arrow { right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); width: calc(16 * var(--u)); height: calc(8 * var(--u)); }
  .pl-card__arrow::after { width: calc(5 * var(--u)); height: calc(5 * var(--u)); }
  /* 손가락에는 마우스오버가 없다 */
  .pl-card:hover,
  .js .pl-card[data-reveal].is-in:hover { transform: none; box-shadow: none; border-color: var(--pl-border); }
  .pl-card:hover .pl-card__thumb img { transform: translate(-50%, -50%); }
  .pl-card:hover .pl-card__name { color: #000; }
  .pl-card:hover .pl-card__arrow { color: var(--gray); transform: none; }
  /* 자물쇠 그림은 카드 폭에 맞춰 줄인다. 태그는 이름 아래로 */
  .pl-card__lock-art { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
  .pl-card--private:hover .pl-card__thumb { background: var(--pl-thumb); }
  .pl-card__head { flex-wrap: wrap; gap: calc(2 * var(--u)) calc(6 * var(--u)); }
  .pl-card__tag { flex: 1 1 100%; font-size: max(calc(11 * var(--u)), 11px); }
  .pl-empty { padding: calc(40 * var(--u)) calc(16 * var(--u)); font-size: max(calc(13 * var(--u)), 13px); }
  .js .pl-card[data-reveal] { transition-delay: calc(var(--d, 0) * .05s); }
}

/* ==================== 모션 최소화 ====================
   페이드인만 남긴다 */
@media (prefers-reduced-motion: reduce) {
  .pl-nav__link,
  .pl-nav__link::after,
  .pl-chip,
  .pl-card,
  .pl-card__thumb img,
  .pl-card__name,
  .pl-card__arrow,
  .pl-card__thumb { transition: none; }
  .js .pl-card--private[data-reveal].is-in .pl-card__lock-art { animation: none; }
  .pl-card:hover,
  .js .pl-card[data-reveal].is-in:hover { transform: none; box-shadow: inset 0 0 0 1px var(--pl-point); }
  .pl-card:hover .pl-card__thumb img { transform: translate(-50%, -50%); }
  .pl-card:hover .pl-card__arrow { transform: none; }
  .js .pl-card[data-reveal] { transition-delay: 0s; }
  .js .pl-grid.is-leaving .pl-card { transition: none; }
}