@charset "utf-8";

/* ============================================================
   장비인프라 › 생산설비 — 이 페이지에만 있는 것
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:2421

   페이지 틀 · 섹션 제목 · 통계 카드 · 설비 카드 · 사진 갤러리는
   연구설비 · 분석시험장비와 똑같아서 /css/page-infra.css 로 뺐다.
   여기 남은 것은 생산설비에만 있는 인트로 하나뿐이다.

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

/* ==================== 인트로 ====================
   시안 2048:2622 — 작은 제목 / 큰 숫자 / 오른쪽에 설명 두 줄
   (연구설비·분석시험장비에는 이 덩어리가 없다. 탭 바로 아래가 통계 카드다) */
.prod-intro {
  display: grid;
  /* 시안 제목 260~900 · 설명 940~1660. 오른쪽 칸도 --u 로 잡아야
     화면이 좁아질 때 제목 칸이 먼저 줄어 두 줄로 접히지 않는다 */
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(720 * var(--u)));
  align-items: end;
  gap: calc(40 * var(--u));
  margin-top: calc(80 * var(--u));    /* 시안 탭(1026) → 제목(1120) */
}

.prod-intro__eyebrow {
  margin: 0;
  font-weight: 700;
  font-size: max(calc(25 * var(--u)), 15px);
  letter-spacing: -.02em;
  color: var(--infra-ink);
}
.prod-intro__title {
  margin: calc(20 * var(--u)) 0 0;    /* 시안 1120 → 1169 */
  font-weight: 700;
  font-size: calc(58 * var(--u));     /* 시안 65 */
  line-height: 1.1;                   /* 시안 70/65 */
  letter-spacing: -.05em;             /* -3.25 / 65 */
  color: var(--infra-point);
  word-break: keep-all;
}
.prod-intro__desc {
  margin: 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);   /* 시안 20 */
  line-height: 1.5;                            /* 시안 30/20 */
  letter-spacing: -.03em;
  color: var(--ink-mid);
  word-break: keep-all;
}

/* 통계 카드는 인트로 아래에 붙는다 (다른 두 페이지는 탭 아래에 바로 온다) */
.prod-intro + .infra-stats { margin-top: calc(76 * var(--u)); }   /* 시안 1229 → 1305 */

/* 세 줄을 따로 등장시킨다 */
.js .prod-intro [data-reveal] { transition-delay: calc(var(--d, 0) * .12s); }
/*
  큰 숫자만 한 겹 더 준다 — 아래에서 올라오면서 위에서부터 드러난다.
  clip-path 는 transform 과 겹치지 않아 두 움직임이 서로 방해하지 않는다.
*/
.js .prod-intro__title[data-reveal] {
  clip-path: inset(0 0 100% 0);
  transition: opacity .8s ease-out, transform .8s ease-out,
              clip-path 1s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--d, 0) * .12s);
}
.js .prod-intro__title[data-reveal].is-in { clip-path: inset(0 0 -12% 0); }

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .prod-intro {
    grid-template-columns: 1fr;
    gap: calc(14 * var(--u));
    margin-top: var(--sp-block);       /* 서브탭 → 첫 섹션 */
  }
  .prod-intro__eyebrow { font-size: max(calc(15 * var(--u)), 14px); }
  .prod-intro__title { margin-top: calc(8 * var(--u)); font-size: calc(28 * var(--u)); }
  .prod-intro__desc { font-size: max(calc(14 * var(--u)), 13px); line-height: 1.7; }
  .prod-intro + .infra-stats { margin-top: var(--sp-block); }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .js .prod-intro__title[data-reveal],
  .js .prod-intro__title[data-reveal].is-in {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}