@charset "utf-8";

/* ============================================================
   제품 › 원페이지 카테고리 (전자재료 · 필요하면 스페셜케미칼)
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  전자재료 2048:3592

   메탈로센 목록의 틀(.pl-nav · .pl-chip · 제목 자리, /css/product-list.css)을 그대로 쓰고,
   카드 대신 '사진 + 글' 항목을 둔다. 상세 페이지로 가지 않는다.
   내용은 /data/products.json (mode: "onepage") 에서 오고 /js/product-onepage.js 가 그린다.

   구성 (시안 순서 그대로)
     infra-sec__head     고른 묶음의 제목 45 + 한 줄 설명 23
     .pl-chips           묶음 칩 — 목록 페이지와 같은 필터. 누르면 아래 내용이 그 묶음으로 바뀐다
     po-group            고른 묶음의 항목들
     po-item             항목 — 사진 320×350 · 큰 번호 85 · 이름 35 · 한 줄 · 선
     po-usage            '쓰이는 곳' 칸 셋 (320×135 회색)
     po-work             'SPCI가 하는 일' 회색 판 + 점 목록
     po-cta              묶음 끝 문의 띠 — 시안에 없다. 'SPCI가 하는 일' 판을 뺀 뒤(2026-09-11) 항목 묶음마다 끝에 붙인다

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

.po-page {
  --po-point: #135a9c;
  --po-ink:   #222;
  --po-soft:  #f7f7f7;      /* 칸 · 판 바탕 */
  --po-ghost: #f4f4f4;      /* 큰 번호 */
  --po-rule:  #d8d8d8;      /* 항목 아래 선 (시안 Line 46) */
}

/* ==================== 제목 · 설명 · 묶음 칩 ====================
   시안 2048:3650 — 메탈로센 목록과 같은 자리: 메뉴선(1097) → 제목(1238) → 설명(1315) → 칩(1441) → 선(1553).
   제목·설명은 고른 묶음 것으로 바뀐다. 칩은 목록 페이지와 같은 필터다 */
.po-page .infra-sec__head { margin-top: calc(141 * var(--u)); }
.po-page .pl-chips {
  margin-top: calc(91 * var(--u));    /* 시안 설명 아래(1350) → 칩(1441) */
}
/* 묶음을 바꿀 때 — 나가는 것은 빨리 사라진다 */
.js [data-po-groups].is-leaving .po-item,
.js [data-po-groups].is-leaving .pl-card,
.js [data-po-groups].is-leaving .po-empty { opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }

/* 카드 묶음 (layout: "cards" — 반도체 소재): 메탈로센 목록의 카드 그리드를 그대로 쓴다.
   목록 페이지에서 칩 선 → 카드 50 인데, 여기서는 .po-group 이 그 간격을 잡으므로 그리드 자체 여백은 없다 */
.po-group .pl-grid { margin-top: 0; }
.po-group.po-group--cards { margin-top: calc(50 * var(--u)); }   /* 메탈로센 목록과 같이 칩 선 → 카드 50 (.po-group 150 을 이겨야 해서 두 클래스) */

/* ==================== 묶음 (고른 것 하나) ==================== */
.po-group { margin-top: calc(150 * var(--u)); }    /* 시안 칩 선(1553) → 사진(1704) */
.po-group__lead {
  margin: calc(16 * var(--u)) 0 0;    /* 시안 제목(1238, 61 높이) → 설명(1315) */
  font-weight: 300;
  font-size: max(calc(23 * var(--u)), 14px);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--ink-mid);
  word-break: keep-all;
}
/* 묶음에 아직 항목이 없을 때 */
.po-empty {
  margin-top: 0;
  padding: calc(60 * var(--u)) 0;
  border: 1px dashed var(--po-rule);
  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;
}

/* ==================== 항목 ====================
   시안 2048:3615 — 사진 320×350 (260~580), 글 620~1660. 큰 번호 85 는 오른쪽 위 */
.po-item {
  position: relative;
  display: grid;
  grid-template-columns: calc(320 * var(--u)) minmax(0, 1fr);
  gap: calc(40 * var(--u));
  align-items: start;
  margin-top: 0;                      /* 칩 선 → 첫 항목 간격은 .po-group 이 잡는다 */
  padding-bottom: calc(60 * var(--u));
}
.po-item + .po-item { margin-top: calc(90 * var(--u)); }   /* 시안 판 아래(2318) → 다음 사진(2468) = 150, 항목 아래 여백 60 을 뺀 값 */
/* 사진 자리는 시안대로 늘 왼쪽 — 홀짝 구분(.po-item--flip)은 자리를 바꾸지 않는다. 들어오는 방향만 묶음(.po-group--from-right)이 정한다 */

/* ---- 사진 ---- */
.po-item__media {
  position: relative;
  width: calc(320 * var(--u));
  height: calc(var(--po-h, 350) * var(--u));   /* 항목마다 다를 수 있다 (HNBR 375) — js 가 --po-h 로 넣는다 */
  border-radius: calc(15 * var(--u));
  overflow: hidden;
  background: var(--po-soft);
  cursor: zoom-in;
  transition: box-shadow .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.po-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--po-pos, 50% 50%);
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
.po-item__media:hover,
.po-item__media:focus-visible {
  box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(19, 90, 156, .14);
  transform: translateY(calc(-4 * var(--u)));
}
.po-item__media:hover img { transform: scale(1.04); }
.po-item__media:focus-visible { outline: 2px solid var(--po-point); outline-offset: 4px; }
.po-item__media.is-empty { cursor: default; }
.po-item__media.is-empty:hover { box-shadow: none; transform: none; }
/* 확대 표시 — 위험물 인허가 카드와 같은 돋보기 */
.po-item__zoom {
  position: absolute;
  right: calc(14 * var(--u));
  bottom: calc(14 * var(--u));
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s ease, transform .3s ease;
}
.po-item__media:hover .po-item__zoom,
.po-item__media:focus-visible .po-item__zoom { opacity: 1; transform: none; }
.po-item__media.is-empty .po-item__zoom { display: none; }
.po-item__zoom::before {
  content: "";
  position: absolute;
  left: calc(10 * var(--u));
  top: calc(10 * var(--u));
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-radius: 50%;
}
.po-item__zoom::after {
  content: "";
  position: absolute;
  right: calc(9 * var(--u));
  bottom: calc(9 * var(--u));
  width: calc(8 * var(--u));
  height: calc(2 * var(--u));
  background: #fff;
  transform: rotate(45deg);
  transform-origin: right center;
}

/* ---- 글 ---- */
.po-item__body { position: relative; min-width: 0; }
/* 큰 번호 — 시안 85px #f4f4f4, 오른쪽 위(1572, 1695). 글 뒤에 깔린다 */
.po-item__no {
  position: absolute;
  right: 0;
  top: calc(-9 * var(--u));
  z-index: 0;
  font-weight: 900;
  font-size: calc(85 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--po-ghost);
  pointer-events: none;
  user-select: none;
}
.po-item__name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 700;
  font-size: calc(35 * var(--u));
  line-height: 1.36;                  /* 시안 1704 → 다음 줄 1756 */
  letter-spacing: -.03em;
  color: var(--po-point);
}
/* 한 줄 요약 — 'SPCI가 하는 일' 판이 빠진 뒤(2026-09-11) 본문이 아니라 선언문이다.
   시안 25/500 → 30/400, 핵심 구절(<em>)만 코발트 */
.po-item__summary {
  position: relative;
  z-index: 1;
  margin: calc(10 * var(--u)) 0 0;
  padding-bottom: calc(30 * var(--u));
  border-bottom: 1px solid var(--po-rule);
  font-weight: 400;
  font-size: max(calc(30 * var(--u)), 17px);
  line-height: 1.4;
  letter-spacing: -.03em;
  color: var(--po-ink);
  word-break: keep-all;
}
.po-item__summary em {
  font-style: normal;
  font-weight: 600;
  color: var(--po-point);
}

/* ---- 소제목 (22px + 5px 점) ---- */
.po-sub {
  position: relative;
  margin: 0;
  padding-left: calc(17 * var(--u));  /* 시안 점(620) → 글(637) */
  font-weight: 600;
  font-size: max(calc(22 * var(--u)), 14px);
  line-height: 1.35;
  letter-spacing: -.03em;
  color: var(--po-ink);
}
.po-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(13 * var(--u));
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: var(--po-point);
}

/* ---- 쓰이는 곳: 320 × 135 칸 셋 ---- */
.po-usage { margin-top: calc(46 * var(--u)); }        /* 시안 선(1817) → 소제목(1863) */
/* 쓰이는 곳이 항목의 주역이다 (2026-09-11 — 판이 빠진 자리를 이 칸들이 맡는다):
   시안 320×135 셋을 글 칸 폭에 셋으로 꽉 채우고, 번호를 키우고, 짚으면 코발트로 반전한다 */
.po-usage__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--u));
  margin: calc(27 * var(--u)) 0 0;    /* 시안 소제목(1863, 30) → 칸(1920) */
  padding: 0;
  list-style: none;
}
.po-usage__item {
  position: relative;
  min-height: calc(170 * var(--u));
  padding: calc(30 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u));
  border-radius: calc(15 * var(--u));
  background: var(--po-soft);
  transition: background-color .35s ease, transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}
.po-usage__no {
  display: block;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: max(calc(28 * var(--u)), 15px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--po-point);
  transition: color .35s ease;
}
.po-usage__text {
  display: block;
  margin-top: calc(18 * var(--u));
  font-weight: 400;
  font-size: max(calc(19 * var(--u)), 14px);
  line-height: 1.45;
  letter-spacing: -.03em;
  color: var(--ink-mid);
  word-break: keep-all;
  transition: color .35s ease;
}
.po-usage__item:hover,
.js .po-usage__item[data-reveal].is-in:hover {
  background: var(--po-point);
  box-shadow: 0 calc(14 * var(--u)) calc(32 * var(--u)) rgba(19, 90, 156, .22);
  transform: translateY(calc(-4 * var(--u)));
}
.po-usage__item:hover .po-usage__no { color: rgba(255, 255, 255, .7); }
.po-usage__item:hover .po-usage__text { color: var(--color-white); }

/* 'SPCI가 하는 일'(.po-work, 시안의 1400 회색 판)은 2026-09-11 클라이언트 요청으로 뺐다 — 규칙도 지웠다 */

/* ---- 규격 표 (자료가 생기면) — tab-table 을 항목 폭으로 ---- */
.po-spec { grid-column: 1 / -1; margin-top: calc(6 * var(--u)); }   /* 46 − 그리드 줄 사이 40 */
.po-spec .tab-table { margin-top: calc(27 * var(--u)); }

/* ---- 내려받기 (자료가 생기면) — e-브로셔 버튼 어법. 상세 페이지의 .pd-file 과 같다 ---- */

/* ---- 비공개 항목 — 메탈로센 상세의 잠금 판과 같은 어법 ---- */
.po-item--private .po-item__media { background: #f4f4f4; cursor: default; }
.po-item--private .po-item__media:hover { box-shadow: none; transform: none; }
.po-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
.po-lock__icon { width: calc(90 * var(--u)); height: calc(119 * var(--u)); }
.po-lock__title { margin: calc(18 * var(--u)) 0 0; font-size: max(calc(18 * var(--u)), 14px); color: #878787; }
.po-item--private .po-item__cta {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin-top: calc(30 * var(--u));
  padding: calc(14 * var(--u)) calc(34 * var(--u));
  border: 1px solid var(--po-point);
  border-radius: 999px;
  font-weight: 600;
  font-size: max(calc(17 * var(--u)), 14px);
  color: var(--po-point);
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.po-item--private .po-item__cta:hover { background: var(--po-point); color: var(--color-white); }

/* ==================== 문의 유도 (시안에 없다) ====================
   OBM 의 문의 띠와 같은 어법 — 옅은 바탕, 링크 하나 */
.po-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  margin-top: calc(120 * var(--u));
  padding: calc(56 * var(--u)) calc(68 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #f8f8f8;
}
.po-cta__title {
  margin: 0;
  font-weight: 600;
  font-size: calc(30 * var(--u));
  line-height: 1.35;
  letter-spacing: -.03em;
  color: var(--po-ink);
  word-break: keep-all;
}
.po-cta__desc {
  margin: calc(12 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: var(--ink-body);
  word-break: keep-all;
}
.po-cta__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(16 * var(--u)) calc(34 * var(--u));
  border: 1px solid var(--po-point);
  border-radius: 999px;
  font-weight: 600;
  font-size: max(calc(18 * var(--u)), 14px);
  letter-spacing: -.02em;
  color: var(--po-point);
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.po-cta__link::after {
  content: "";
  width: calc(22 * var(--u));
  height: 1px;
  background: currentColor;
  transition: width .35s cubic-bezier(.22, .61, .36, 1);
}
.po-cta__link:hover { background: var(--po-point); color: var(--color-white); }
.po-cta__link:hover::after { width: calc(34 * var(--u)); }

/* ---- 문의 띠 인터랙션 (2026-09-11, 제품 쪽 문의 띠 일괄) ----
   등장: 띠가 뜬 뒤 제목 → 설명 → 버튼이 차례로 올라온다.
   짚기: 띠 전체가 살짝 떠오르며 흰색으로 밝아지고, 왼쪽 아래에서 코발트 선이 자라고,
         제목이 코발트가 되며, 버튼은 마우스가 버튼 위에 없어도 미리 채워진다(띠 어디를 짚어도 문의로 이끈다) */
.po-cta {
  position: relative;
  overflow: hidden;
  transition: background-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.po-cta::after {
  content: "";
  position: absolute;
  left: calc(68 * var(--u));           /* 제목 시작선에 맞춘다 (둥근 모서리에 잘리지 않게) */
  bottom: 0;
  width: calc(160 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 999px 999px 0 0;
  background: var(--po-point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.po-cta__title { transition: color .35s ease; }
.po-cta__body { min-width: 0; }
/* 등장 순서 — 띠(data-reveal)가 켜지면 안의 셋이 차례로 */
.js .po-cta[data-reveal] .po-cta__title,
.js .po-cta[data-reveal] .po-cta__desc,
.js .po-cta[data-reveal] .po-cta__link {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1), background-color .3s ease, color .3s ease;
}
.js .po-cta[data-reveal].is-in .po-cta__title,
.js .po-cta[data-reveal].is-in .po-cta__desc,
.js .po-cta[data-reveal].is-in .po-cta__link { opacity: 1; transform: none; }
.js .po-cta[data-reveal].is-in .po-cta__desc { transition-delay: .12s; }
.js .po-cta[data-reveal].is-in .po-cta__link { transition-delay: .24s; }
@media (hover: hover) {
  .po-cta:hover,
  .js .po-cta[data-reveal].is-in:hover {
    background: var(--color-white);
    box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(19, 90, 156, .12);
    transform: translateY(calc(-4 * var(--u)));
  }
  .po-cta:hover::after { transform: scaleX(1); }
  .po-cta:hover .po-cta__title { color: var(--po-point); }
  .po-cta:hover .po-cta__link { background: var(--po-point); color: var(--color-white); }
  .po-cta:hover .po-cta__link::after { width: calc(34 * var(--u)); }
}

/* ==================== 등장 ====================
   특화기술 패턴 — 사진은 한쪽에서, 글은 반대쪽에서 미끄러져 들어온다.
   사진 자리는 시안대로 늘 왼쪽. 방향만 묶음마다 다르다:
   기본(전자재료 · 고무) 사진 ← 왼쪽 / 글 ← 오른쪽, .po-group--from-right(유기금속) 는 반대 */
.js .po-item__media[data-reveal] { transform: translateX(-40px); }
.js .po-item__body[data-reveal] { transform: translateX(40px); transition-delay: .12s; }
.js .po-group--from-right .po-item__media[data-reveal] { transform: translateX(40px); }
.js .po-group--from-right .po-item__body[data-reveal] { transform: translateX(-40px); }
.js .po-item__media[data-reveal].is-in,
.js .po-item__body[data-reveal].is-in { transform: none; }
.js .po-fine__cap[data-reveal] { transition-delay: calc(var(--d, 0) * .1s); }
.js .po-usage__item[data-reveal] { transition-delay: calc(var(--d, 0) * .08s); }

/* ==================== 관련 묶음 링크 (유기금속 Grignard 시약) ====================
   시안에 없는 요소 — 원본 자료(찐최종.html)의 xlink 를 옮긴 것. 옅은 코발트 알약 */
.po-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(34 * var(--u));    /* 쓰이는 곳 칸 아래 — 글 칸 안에서 마지막 줄 (2026-09-11 전 항목으로 확장) */
}
.po-links__label {
  margin-right: calc(6 * var(--u));
  font-size: max(calc(15 * var(--u)), 12px);
  letter-spacing: .02em;
  color: var(--gray);
}
.po-links__item {
  display: inline-flex;
  align-items: center;
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  border-radius: 999px;
  background: rgba(19, 90, 156, .07);
  font-weight: 600;
  font-size: max(calc(15 * var(--u)), 13px);
  letter-spacing: -.02em;
  color: #0e4b84;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.po-links__item:hover,
.po-links__item:focus-visible { background: var(--po-point); color: var(--color-white); }

/* ==================== 파인케미칼 · 의약 중간체 (layout: "fine") ====================
   시안 2048:3349 — 칩 선(1563) → 큰 문장(1624) → 두 줄 설명(1749) → 대응 범위 띠(1860, 1400×95)
   → 역량 3열(2103, 세로선 100) → 문의 띠(2370, 회색 판 920×445 + 사진 560×445) → 푸터(3045) */
.po-group.po-group--fine {
  margin-top: calc(61 * var(--u));
  padding-bottom: calc(50 * var(--u));   /* 시안 문의 띠 아래(2815) → 푸터(3045) = 230. 틀의 기본 180 에 더한다 */
}
.po-fine__stmt {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: calc(40 * var(--u));
  line-height: 1.36;                  /* 시안 두 줄 1624 → 1679 */
  letter-spacing: -.05em;
  color: var(--gray);
  word-break: keep-all;
}
.po-fine__em { font-style: normal; font-weight: 600; }
.po-fine__em--ink { color: var(--po-ink); }
.po-fine__em--point { color: var(--po-point); }
.po-fine__sub {
  margin: calc(16 * var(--u)) 0 0;    /* 시안 문장 아래(1733) → 설명(1749) */
  font-weight: 300;
  font-size: max(calc(23 * var(--u)), 14px);
  line-height: calc(33 * var(--u));
  letter-spacing: -.03em;
  color: var(--ink-mid);
  word-break: keep-all;
}
/* 대응 범위 띠 — 1400 × 95 #f8f8f8, 안에 170 × 55 코발트 라벨 */
.po-fine__scope {
  display: flex;
  align-items: center;
  gap: calc(29 * var(--u));           /* 시안 라벨 끝(449) → 글(478) */
  min-height: calc(95 * var(--u));
  margin-top: calc(45 * var(--u));    /* 시안 설명 아래(1815) → 띠(1860) */
  padding: calc(20 * var(--u));
  border-radius: calc(15 * var(--u));
  background: #f8f8f8;
}
.po-fine__scope-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(170 * var(--u));
  height: calc(55 * var(--u));
  border-radius: calc(15 * var(--u));
  background: var(--po-point);
  font-weight: 700;
  font-size: max(calc(20 * var(--u)), 13px);
  letter-spacing: -.03em;
  color: var(--color-white);
}
.po-fine__scope-text {
  margin: 0;
  font-size: max(calc(23 * var(--u)), 14px);
  letter-spacing: -.03em;
  color: var(--po-ink);
  word-break: keep-all;
}
/* 역량 3열 — 세로선 두 개 (100 높이), 글은 선에서 70 안쪽 */
.po-fine__caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(148 * var(--u)) 0 0;   /* 시안 띠 아래(1955) → 3열(2103) */
  padding: 0;
  list-style: none;
}
.po-fine__cap {
  position: relative;
  padding: 0 calc(40 * var(--u)) 0 calc(70 * var(--u));
}
.po-fine__cap + .po-fine__cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(20 * var(--u));
  width: 1px;
  height: calc(100 * var(--u));
  background: var(--po-rule);
}
.po-fine__cap-eyebrow {
  display: block;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: max(calc(17 * var(--u)), 12px);
  letter-spacing: -.03em;
  color: var(--po-point);
}
.po-fine__cap-title {
  display: block;
  margin-top: calc(3 * var(--u));     /* 시안 17px(2103) → 30px(2129) */
  font-weight: 600;
  font-size: calc(30 * var(--u));
  line-height: 1.35;
  letter-spacing: -.03em;
  color: var(--po-ink);
  word-break: keep-all;
}
.po-fine__cap-desc {
  margin: calc(19 * var(--u)) 0 0;    /* 시안 제목 아래(2170) → 설명(2189) */
  font-weight: 300;
  font-size: max(calc(20 * var(--u)), 13px);
  line-height: 1.35;
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
}
/* 문의 띠 — 회색 판(920)은 글 뒤에, 사진(560)은 오른쪽 끝. 판이 사진 밑으로 80 들어간다 */
.po-fine__ask {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(560 * var(--u));
  align-items: stretch;
  min-height: calc(445 * var(--u));
  margin-top: calc(140 * var(--u));   /* 시안 3열 아래(2230) → 띠(2370) */
}
.po-fine__ask::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(920 * var(--u));
  border-radius: calc(15 * var(--u));
  background: #f8f8f8;
}
/* 글과 사진은 회색 판(::before) 위에 — 좁은 화면에서 사진을 order 로 앞에 두면 칠하는 차례도 앞으로 가서
   판 아래로 숨어 버리므로 z-index 로 명시한다 */
.po-fine__ask-body {
  position: relative;
  z-index: 1;
  padding: calc(61 * var(--u)) calc(60 * var(--u)) calc(60 * var(--u)) calc(68 * var(--u));   /* 시안 글 시작 328 */
}
.po-fine__ask-title {
  margin: 0;
  font-weight: 600;
  font-size: calc(35 * var(--u));
  line-height: 1.36;                  /* 시안 두 줄 2431 → 2480 */
  letter-spacing: -.03em;
  color: var(--po-ink);
  word-break: keep-all;
}
.po-fine__ask-desc {
  margin: calc(18 * var(--u)) 0 0;    /* 시안 제목 아래(2526) → 설명(2544) */
  font-size: max(calc(20 * var(--u)), 14px);
  line-height: calc(30 * var(--u));
  letter-spacing: -.03em;
  color: #878787;
  word-break: keep-all;
}
.po-fine__ask-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(300 * var(--u));
  height: calc(70 * var(--u));
  margin-top: calc(56 * var(--u));    /* 시안 설명 아래(2604) → 버튼(2660) */
  padding: 0 calc(40 * var(--u));
  border-radius: 999px;
  background: var(--po-ink);
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: max(calc(25 * var(--u)), 15px);
  letter-spacing: -.02em;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}
.po-fine__ask-btn:hover,
.po-fine__ask-btn:focus-visible { background: var(--po-point); transform: translateY(calc(-2 * var(--u))); }
.po-fine__ask-btn:focus-visible { outline: 2px solid var(--po-point); outline-offset: 3px; }
.po-fine__ask-media {
  position: relative;
  z-index: 1;
  border-radius: calc(15 * var(--u));
  overflow: hidden;
  background: #eef2f7;
}
.po-fine__ask-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--po-pos, 50% 50%);
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}

/* ---- 문의 띠 인터랙션 (2026-09-11) — 묶음 끝 띠(.po-cta)와 같은 어법 ----
   회색 판(::before)이 흰색으로 밝아지고 떠오르며, 판 왼쪽 아래에서 코발트 선이 자란다.
   사진은 천천히 확대되고, 버튼은 띠 어디를 짚어도 코발트로 채워진다 */
.po-fine__ask::before {
  transition: background-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.po-fine__ask::after {
  content: "";
  position: absolute;
  left: calc(68 * var(--u));           /* 제목 시작선에 맞춘다 */
  bottom: 0;
  z-index: 1;
  width: calc(160 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 999px 999px 0 0;
  background: var(--po-point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.po-fine__ask-title { transition: color .35s ease; }
.js .po-fine__ask[data-reveal] .po-fine__ask-title,
.js .po-fine__ask[data-reveal] .po-fine__ask-desc,
.js .po-fine__ask[data-reveal] .po-fine__ask-btn {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1), background-color .3s ease, color .3s ease;
}
.js .po-fine__ask[data-reveal].is-in .po-fine__ask-title,
.js .po-fine__ask[data-reveal].is-in .po-fine__ask-desc,
.js .po-fine__ask[data-reveal].is-in .po-fine__ask-btn { opacity: 1; transform: none; }
.js .po-fine__ask[data-reveal].is-in .po-fine__ask-desc { transition-delay: .12s; }
.js .po-fine__ask[data-reveal].is-in .po-fine__ask-btn { transition-delay: .24s; }
@media (hover: hover) {
  .po-fine__ask:hover::before {
    background: var(--color-white);
    box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(19, 90, 156, .12);
    transform: translateY(calc(-4 * var(--u)));
  }
  .po-fine__ask:hover::after { transform: scaleX(1); }
  .po-fine__ask:hover .po-fine__ask-title { color: var(--po-point); }
  .po-fine__ask:hover .po-fine__ask-btn { background: var(--po-point); }
  .po-fine__ask:hover .po-fine__ask-media img { transform: scale(1.04); }
}

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .po-page .infra-sec__head { margin-top: var(--sp-block); }   /* 메뉴 → 제목 */
  .po-page .pl-chips { margin-top: var(--sp-head); }           /* 제목 → 칩 */
  .po-group,
  .po-group.po-group--cards { margin-top: var(--sp-block); }   /* 칩 → 내용 (카드 묶음도 같게) */
  .po-group__lead { margin-top: calc(8 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); line-height: 1.7; }
  .po-empty { margin-top: var(--sp-block); padding: calc(30 * var(--u)) calc(16 * var(--u)); font-size: max(calc(13 * var(--u)), 13px); }
  .po-group .po-empty { margin-top: 0; }   /* 묶음 안에서는 .po-group 이 간격을 잡는다 */

  .po-item,
  .po-item--flip {
    grid-template-columns: 1fr;
    gap: calc(18 * var(--u));
    margin-top: 0;                      /* 첫 항목 간격은 .po-group 이 잡는다 */
    padding-bottom: 0;                  /* 항목 사이 간격은 아래 margin 하나로 */
  }
  .po-item + .po-item { margin-top: var(--sp-section); }
  .po-item--flip .po-item__media { order: 0; }
  .po-item__media {
    width: 100%;
    height: calc(236 * var(--u));       /* 343 × 220/320. aspect-ratio 대신 높이를 직접 (iOS 사파리, 2026-09-20) */
    border-radius: calc(12 * var(--u));
  }
  .po-item__media:hover { box-shadow: none; transform: none; }
  .po-item__media:hover img { transform: none; }
  .po-item__zoom { opacity: 1; transform: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); }
  .po-item__zoom::before { left: calc(7 * var(--u)); top: calc(7 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .po-item__zoom::after { right: calc(6 * var(--u)); bottom: calc(6 * var(--u)); width: calc(6 * var(--u)); height: calc(1.5 * var(--u)); }
  .po-item__no { font-size: calc(48 * var(--u)); top: calc(-4 * var(--u)); }
  .po-item__name { font-size: calc(22 * var(--u)); }
  .po-item__summary { margin-top: calc(6 * var(--u)); padding-bottom: calc(14 * var(--u)); font-size: max(calc(17 * var(--u)), 16px); line-height: 1.5; }
  .po-sub { padding-left: calc(12 * var(--u)); font-size: max(calc(15 * var(--u)), 14px); }
  .po-sub::before { top: calc(8 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); }

  .po-usage { margin-top: calc(22 * var(--u)); }
  .po-usage__list { grid-template-columns: 1fr; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
  .po-usage__item {
    display: flex;
    align-items: baseline;
    gap: calc(12 * var(--u));
    min-height: 0;
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    border-radius: calc(10 * var(--u));
  }
  .po-usage__no { font-size: max(calc(13 * var(--u)), 13px); }
  .po-usage__text { margin-top: 0; font-size: max(calc(14 * var(--u)), 13px); }
  .po-usage__item:hover,
  .js .po-usage__item[data-reveal].is-in:hover { background: var(--po-soft); box-shadow: none; transform: none; }


  .po-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--u));
    margin-top: var(--sp-block);
    padding: calc(22 * var(--u)) calc(18 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .po-cta__title { font-size: calc(19 * var(--u)); }
  .po-cta__desc { margin-top: calc(8 * var(--u)); font-size: max(calc(13 * var(--u)), 13px); }
  .po-cta__link { width: 100%; justify-content: center; padding: calc(12 * var(--u)) calc(20 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); }
  .po-cta__link:hover { background: none; color: var(--po-point); }
  .po-cta::after, .po-fine__ask::after { left: calc(18 * var(--u)); width: calc(90 * var(--u)); height: calc(3 * var(--u)); }

  .po-links { margin-top: calc(16 * var(--u)); gap: calc(6 * var(--u)); }
  .po-links__label { flex: 1 1 100%; margin-right: 0; font-size: max(calc(12 * var(--u)), 12px); }
  .po-usage__item:hover,
  .js .po-usage__item[data-reveal].is-in:hover { background: var(--po-soft); }
  .po-usage__item:hover .po-usage__no { color: var(--po-point); }
  .po-usage__item:hover .po-usage__text { color: var(--ink-mid); }
  .po-links__item { padding: calc(8 * var(--u)) calc(12 * var(--u)); font-size: max(calc(12 * var(--u)), 12px); }

  /* 파인케미칼 — 한 칸으로 */
  .po-group.po-group--fine { margin-top: var(--sp-block); padding-bottom: 0; }   /* 시안 PC 여백(50)은 모바일에서 빼 다른 제품 페이지와 푸터 간격을 맞춘다 (2026-09-19) */
  .po-fine__stmt { font-size: calc(22 * var(--u)); line-height: 1.45; }
  .po-fine__sub { margin-top: calc(10 * var(--u)); font-size: max(calc(13 * var(--u)), 13px); line-height: 1.7; }
  .po-fine__scope { flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); min-height: 0; margin-top: calc(18 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); }
  .po-fine__scope-label { min-width: 0; height: auto; padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-size: max(calc(12 * var(--u)), 12px); }
  .po-fine__scope-text { font-size: max(calc(13 * var(--u)), 13px); }
  .po-fine__caps { grid-template-columns: 1fr; gap: calc(18 * var(--u)); margin-top: calc(36 * var(--u)); }
  .po-fine__cap { padding: 0 0 calc(18 * var(--u)); border-bottom: 1px solid var(--po-rule); }
  .po-fine__cap:last-child { border-bottom: 0; padding-bottom: 0; }
  .po-fine__cap + .po-fine__cap::before { display: none; }
  .po-fine__cap-eyebrow { font-size: max(calc(12 * var(--u)), 12px); }
  .po-fine__cap-title { font-size: calc(17 * var(--u)); }
  .po-fine__cap-desc { margin-top: calc(6 * var(--u)); font-size: max(calc(13 * var(--u)), 13px); line-height: 1.6; }
  .po-fine__ask { grid-template-columns: 1fr; min-height: 0; margin-top: calc(36 * var(--u)); }
  .po-fine__ask::before { width: 100%; border-radius: calc(12 * var(--u)); }
  .po-fine__ask-body { padding: calc(22 * var(--u)) calc(18 * var(--u)); }
  .po-fine__ask-title { font-size: calc(19 * var(--u)); }
  .po-fine__ask-desc { margin-top: calc(8 * var(--u)); font-size: max(calc(13 * var(--u)), 13px); line-height: 1.65; }
  .po-fine__ask-btn { width: 100%; min-width: 0; height: calc(46 * var(--u)); margin-top: calc(18 * var(--u)); font-size: max(calc(14 * var(--u)), 14px); }
  .po-fine__ask-btn:hover { transform: none; }
  .po-fine__ask-media { order: -1; height: calc(200 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; }
  /* 시안의 줄바꿈은 1920 기준 — 좁은 칸에서는 글이 알아서 감기게 <br> 을 감춘다 (줄 사이 공백은 js 가 넣어 둔다) */
  .po-fine__sub br, .po-fine__cap-desc br, .po-fine__ask-title br, .po-fine__ask-desc br { display: none; }

  /* 좌우 슬라이드는 한 칸 화면에서 어색하다 — 위에서 올라오기만 */
  .js .po-item__media[data-reveal],
  .js .po-item__body[data-reveal],
  .js .po-group--from-right .po-item__media[data-reveal],
  .js .po-group--from-right .po-item__body[data-reveal] { transform: translateY(20px); }
  .js .po-item__body[data-reveal] { transition-delay: .08s; }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .po-item__media, .po-item__media img, .po-item__zoom, .po-usage__item, .po-cta__link, .po-cta__link::after { transition: none; }
  .po-item__media:hover, .po-usage__item:hover, .js .po-usage__item[data-reveal].is-in:hover { transform: none; }
  .po-item__media:hover img { transform: none; }
  .po-cta__link:hover::after { width: calc(22 * var(--u)); }
  .js .po-item__media[data-reveal], .js .po-item__body[data-reveal],
  .js .po-group--from-right .po-item__media[data-reveal], .js .po-group--from-right .po-item__body[data-reveal] { transform: none; transition-delay: 0s; }
  .js .po-usage__item[data-reveal], .js .po-fine__cap[data-reveal] { transition-delay: 0s; }
  .po-links__item, .po-fine__ask-btn { transition: none; }
  .po-fine__ask-btn:hover { transform: none; }
  /* 문의 띠 — 떠오름 · 선 · 순차 등장을 끈다. 색 바뀜만 남긴다 */
  .po-cta, .po-cta::after, .po-fine__ask::before, .po-fine__ask::after, .po-fine__ask-media img { transition: none; }
  .po-cta:hover, .js .po-cta[data-reveal].is-in:hover, .po-fine__ask:hover::before { transform: none; box-shadow: none; }
  .po-cta:hover::after, .po-fine__ask:hover::after { transform: scaleX(1); }
  .po-fine__ask:hover .po-fine__ask-media img { transform: none; }
  .js .po-cta[data-reveal] .po-cta__title, .js .po-cta[data-reveal] .po-cta__desc, .js .po-cta[data-reveal] .po-cta__link,
  .js .po-fine__ask[data-reveal] .po-fine__ask-title, .js .po-fine__ask[data-reveal] .po-fine__ask-desc, .js .po-fine__ask[data-reveal] .po-fine__ask-btn {
    opacity: 1; transform: none; transition: none;
  }
}